/* ==========================================================================
   Contact Page Styles
   Built on the WP FixBoard design system (variables from style.css).
   ========================================================================== */

/* === HERO === */
.contact-hero{
  background:linear-gradient(180deg, #F7F7FC 0%, #ffffff 100%);
  padding:56px 0 48px;
}
.contact-hero-inner{
  max-width:660px;
  margin:0 auto;
  text-align:center;
}
.contact-hero .badge-pill{
  margin-bottom:22px;
}
.contact-hero h1{
  font-size:42px;
  font-weight:800;
  line-height:1.14;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin-bottom:18px;
}
.contact-hero h1 .line2{
  color:var(--primary);
  display:block;
}
.contact-lead{
  font-size:16.5px;
  color:var(--gray-600);
  line-height:1.65;
  max-width:560px;
  margin:0 auto 30px;
}
.contact-hero-actions{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

/* === PAGE LAYOUT === */
.contact-page{
  padding:56px 0;
}
.contact-layout{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:32px;
  align-items:start;
}

/* === LEFT: INFO COLUMN === */
.contact-info{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.contact-availability{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  background:#E9FAEE;
  border:1px solid rgba(62,168,96,0.25);
  border-radius:var(--radius-md);
  font-size:13.5px;
  font-weight:500;
  color:#3EA860;
  line-height:1.5;
}
.contact-status-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#3EA860;
  flex-shrink:0;
  animation:contactPulse 2s ease-in-out infinite;
}
@keyframes contactPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(62,168,96,0.45);}
  50%{box-shadow:0 0 0 6px rgba(62,168,96,0);}
}

.contact-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:26px;
  box-shadow:var(--shadow-sm);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.contact-card:hover{
  border-color:#DCD9F7;
  box-shadow:var(--shadow-md);
}
.contact-card-head{
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:14px;
}
.contact-card-icon{
  width:44px;
  height:44px;
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.contact-card-icon svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.contact-card-icon.blue{background:#EAF3FB; color:#3E8AC7;}
.contact-card-icon.orange{background:var(--pipeline-bg); color:var(--pipeline-text);}
.contact-card-icon.green{background:var(--open-bg); color:var(--open-text);}
.contact-card-head h3{
  font-size:15.5px;
  font-weight:700;
  color:var(--ink);
}
.contact-card p{
  font-size:13.5px;
  color:var(--gray-600);
  line-height:1.6;
  margin-bottom:14px;
}

.contact-info-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:600;
  color:var(--primary);
  word-break:break-all;
}
.contact-info-link svg{
  width:15px;
  height:15px;
  transition:transform .2s ease;
}
.contact-info-link:hover svg{transform:translateX(3px);}

/* Hours */
.contact-hours{
  display:flex;
  flex-direction:column;
}
.contact-hour-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid var(--border-soft);
  font-size:13.5px;
}
.contact-hour-row:last-child{border-bottom:none;}
.contact-hour-row .day{
  color:var(--ink-soft);
  font-weight:500;
}
.contact-hour-row .time{
  color:var(--gray-500);
  font-weight:600;
}

/* Community social */
.contact-card-community p{margin-bottom:16px;}
.contact-social{
  display:flex;
  gap:10px;
}
.contact-social a{
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--bg-soft);
  border:1px solid var(--border-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gray-600);
  transition:all .2s ease;
}
.contact-social a:hover{
  color:#fff;
  background:var(--gradient);
  border-color:transparent;
  box-shadow:0 6px 14px rgba(91,79,232,0.30);
  transform:translateY(-2px);
}
.contact-social svg{width:17px; height:17px;}

/* === RIGHT: FORM === */
.contact-form-wrapper{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:36px;
  box-shadow:var(--shadow-lg);
  position:relative;
  overflow:hidden;
}
.contact-form-wrapper::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:var(--gradient);
}
.contact-form-head{margin-bottom:28px;}
.contact-form-head h2{
  font-size:24px;
  font-weight:800;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin-bottom:8px;
}
.contact-form-head p{
  font-size:14px;
  color:var(--gray-600);
  line-height:1.6;
}

.contact-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.contact-field{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.contact-field-full{grid-column:span 2;}

.contact-label{
  font-size:13px;
  font-weight:600;
  color:var(--ink-soft);
}
.contact-label .req{
  color:#EF4444;
  font-size:11px;
}

.contact-input,
.contact-select,
.contact-textarea{
  width:100%;
  padding:12px 14px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--ink);
  font-size:14px;
  font-family:inherit;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.contact-input::placeholder,
.contact-textarea::placeholder{color:var(--gray-400);}
.contact-input:focus,
.contact-select:focus,
.contact-textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(91,79,232,0.12);
}
.contact-input.error,
.contact-select.error,
.contact-textarea.error{
  border-color:#EF4444;
  box-shadow:0 0 0 3px rgba(239,68,68,0.10);
}

.contact-select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238B90A3' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
  cursor:pointer;
}

.contact-textarea{
  resize:vertical;
  min-height:140px;
  line-height:1.6;
}
.contact-textarea-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.contact-char{
  font-size:12px;
  color:var(--gray-400);
  white-space:nowrap;
  margin-left:auto;
}

.contact-error{
  font-size:12px;
  color:#EF4444;
  display:none;
}
.contact-error.visible{display:block;}

/* Form footer */
.contact-form-foot{
  margin-top:26px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.contact-form-foot .btn-block{
  padding:14px;
  font-size:15px;
}
.contact-form-foot .btn svg{width:16px; height:16px;}
.contact-disclaimer{
  font-size:12.5px;
  color:var(--gray-500);
  text-align:center;
  line-height:1.5;
}
.contact-disclaimer a{
  color:var(--primary);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Submit loading state */
#submitBtn.loading{
  opacity:0.75;
  pointer-events:none;
}

/* === SUCCESS STATE === */
.contact-success{
  display:none;
  text-align:center;
  padding:48px 24px;
}
.contact-success.visible{
  display:block;
  animation:contactFadeUp .4s ease both;
}
@keyframes contactFadeUp{
  from{opacity:0; transform:translateY(12px);}
  to{opacity:1; transform:translateY(0);}
}
.contact-success-icon{
  width:72px;
  height:72px;
  border-radius:50%;
  background:#E9FAEE;
  border:2px solid rgba(62,168,96,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 22px;
  color:#3EA860;
  animation:contactPop .45s .15s ease both;
}
.contact-success-icon svg{
  width:34px;
  height:34px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@keyframes contactPop{
  0%{transform:scale(0.5); opacity:0;}
  55%{transform:scale(1.1);}
  100%{transform:scale(1); opacity:1;}
}
.contact-success h3{
  font-size:22px;
  font-weight:800;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin-bottom:10px;
}
.contact-success p{
  font-size:14.5px;
  color:var(--gray-600);
  line-height:1.65;
  max-width:420px;
  margin:0 auto 24px;
}
.contact-reset{
  display:block;
  margin:14px auto 0;
  background:none;
  border:none;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  color:var(--gray-500);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.contact-reset:hover{color:var(--primary);}

/* === FAQ === */
.contact-faq{
  background:var(--bg-soft);
  padding:72px 0;
}
.contact-faq-head{
  text-align:center;
  max-width:560px;
  margin:0 auto 44px;
}
.contact-faq-head h2{
  font-size:30px;
  font-weight:800;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin-bottom:10px;
}
.contact-faq-head p{
  font-size:15px;
  color:var(--gray-500);
}
.contact-faq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.contact-faq-card{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  padding:26px;
  box-shadow:var(--shadow-sm);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.contact-faq-card:hover{
  border-color:#DCD9F7;
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.contact-faq-card .q-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:var(--radius-sm);
  background:var(--primary-100);
  color:var(--primary);
  font-size:16px;
  font-weight:800;
  margin-bottom:14px;
}
.contact-faq-card .q-icon .icon{
  width:16px;
  height:16px;
  stroke:var(--primary);
}
.contact-faq-card h4{
  font-size:15.5px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:8px;
  letter-spacing:-0.01em;
}
.contact-faq-card p{
  font-size:13.5px;
  color:var(--gray-600);
  line-height:1.6;
}

/* === CTA === */
.contact-cta{padding:72px 0 80px;}
.contact-cta-box{
  background:var(--cta-bg);
  border-radius:var(--radius-lg);
  padding:36px 44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  flex-wrap:wrap;
}
.contact-cta-left{
  display:flex;
  align-items:center;
  gap:22px;
}
.contact-cta-icon{
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 8px 20px rgba(91,79,232,0.30);
}
.contact-cta-icon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.contact-cta-left h3{
  font-size:19px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:5px;
}
.contact-cta-left p{
  font-size:14px;
  color:var(--gray-600);
}

/* === RESPONSIVE === */
@media (max-width: 980px){
  .contact-layout{grid-template-columns:1fr;}
  .contact-hero h1{font-size:34px;}
}
@media (max-width: 640px){
  .contact-hero{padding:40px 0 40px;}
  .contact-hero h1{font-size:28px;}
  .contact-hero-actions{flex-direction:column;}
  .contact-hero-actions .btn{width:100%;}
  .contact-form-grid{grid-template-columns:1fr;}
  .contact-field-full{grid-column:span 1;}
  .contact-form-wrapper{padding:26px 20px;}
  .contact-faq-grid{grid-template-columns:1fr;}
  .contact-faq{padding:56px 0;}
  .contact-cta-box{flex-direction:column; align-items:flex-start; padding:28px 24px;}
  .contact-cta-right{align-self:stretch;}
  .contact-cta-right .btn{width:100%;}
}