/* ============================================================
   SADRA — Contact Page, Premium Enhancement Layer
   Layers on top of styles.css + pages.css. Same design tokens,
   same red/white corporate palette — richer motion & detail.
   ============================================================ */

/* ---------- Live status badge (hero) ---------- */
.status-badge{display:inline-flex;align-items:center;gap:11px;padding:10px 20px 10px 16px;
  border-radius:var(--radius-pill);background:var(--glass-bg-strong);border:1px solid var(--glass-border);
  box-shadow:var(--shadow-sm);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  font-size:.9rem;font-weight:700;color:var(--muted);margin-bottom:26px}
.status-badge__dot{width:9px;height:9px;border-radius:50%;background:var(--muted-2);flex-shrink:0;position:relative}
.status-badge.is-open{color:var(--ink)}
.status-badge.is-open .status-badge__dot{background:#1FAE5C;box-shadow:0 0 0 0 rgba(31,174,92,.55);
  animation:statusPulse 2.2s infinite}
@keyframes statusPulse{
  0%{box-shadow:0 0 0 0 rgba(31,174,92,.5)}
  70%{box-shadow:0 0 0 9px rgba(31,174,92,0)}
  100%{box-shadow:0 0 0 0 rgba(31,174,92,0)}
}

/* ---------- Quick channel row ---------- */
.quick-channels{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.channel-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:var(--radius-pill);
  background:#fff;border:1px solid var(--line-strong);box-shadow:var(--shadow-sm);font-weight:700;font-size:.96rem;
  color:var(--ink);transition:transform .5s var(--ease),box-shadow .5s var(--ease),
  border-color .4s var(--ease),color .4s var(--ease);will-change:transform}
.channel-btn svg{width:19px;height:19px;flex-shrink:0}
.channel-btn:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--blue);color:var(--blue)}
.channel-btn--fill{background:var(--grad-blue);color:#fff;border-color:transparent;box-shadow:var(--shadow-glow)}
.channel-btn--fill:hover{background:var(--burgundy);color:#fff}

/* ---------- Reason chips ---------- */
.reason{margin-bottom:30px}
.reason__label{display:block;font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:14px}
.reason-chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:var(--radius-pill);
  border:1px solid var(--line-strong);background:#fff;color:var(--ink-soft);font-size:.92rem;font-weight:700;
  cursor:pointer;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),
  transform .4s var(--ease),box-shadow .4s var(--ease)}
.chip svg{width:16px;height:16px;flex-shrink:0}
.chip:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.chip.is-active{background:var(--grad-blue);border-color:transparent;color:#fff;box-shadow:var(--shadow-glow);
  transform:translateY(-2px)}

/* ---------- Floating-label fields ---------- */
.field{position:relative;margin-bottom:20px}
.field__input,.field__textarea{width:100%;padding:23px 20px 9px;border-radius:16px;border:1px solid var(--line-strong);
  background:rgba(255,255,255,.7);font-family:inherit;font-size:1rem;color:var(--ink);
  transition:border-color .3s,box-shadow .3s}
.field__textarea{min-height:150px;resize:vertical;padding-top:28px}
.field__label{position:absolute;inset-inline-start:20px;top:23px;font-size:1rem;color:var(--muted);
  font-weight:600;pointer-events:none;transition:top .25s var(--ease),font-size .25s var(--ease),color .25s var(--ease)}
.field__input:focus,.field__textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(225,29,46,.14)}
.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__textarea:focus ~ .field__label,
.field__textarea:not(:placeholder-shown) ~ .field__label{top:10px;font-size:.74rem;color:var(--blue-2);font-weight:700}
.field__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field__count{position:absolute;bottom:12px;inset-inline-end:18px;font-size:.75rem;color:var(--muted-2);
  font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- Form success overlay ---------- */
.form{position:relative}
.form__success{position:absolute;inset:0;border-radius:var(--radius-lg);background:var(--glass-bg-strong);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;text-align:center;opacity:0;pointer-events:none;
  transform:scale(.94);transition:opacity .5s var(--ease),transform .5s var(--ease);padding:40px;z-index:5}
.form__success.is-visible{opacity:1;pointer-events:auto;transform:scale(1)}
.form__success-icon{width:78px;height:78px;border-radius:50%;background:var(--grad-blue);display:grid;
  place-items:center;box-shadow:var(--shadow-glow)}
.form__success-icon svg{width:36px;height:36px;overflow:visible}
.form__success-icon path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40}
.form__success.is-visible .form__success-icon path{animation:drawCheck .6s var(--ease) .25s forwards}
@keyframes drawCheck{to{stroke-dashoffset:0}}
.form__success-title{font-size:1.4rem;font-weight:800;color:var(--ink)}
.form__success-text{color:var(--ink-soft);font-size:.98rem;max-width:32ch;line-height:1.7}
.form__success-btn{margin-top:6px}

/* ---------- Info card: value row + copy ---------- */
.info-card__value-row{display:flex;align-items:center;gap:10px}
.copy-btn{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;
  background:var(--grad-blue-soft);color:var(--blue-2);border:1px solid var(--line);opacity:0;
  transform:translateY(3px);transition:opacity .3s var(--ease),transform .3s var(--ease),
  background .3s var(--ease),color .3s var(--ease)}
.copy-btn svg{width:14px;height:14px}
.info-card:hover .copy-btn,.info-card:focus-within .copy-btn{opacity:1;transform:translateY(0)}
.copy-btn:hover{background:var(--blue);color:#fff}
.copy-btn.is-copied{background:#1FAE5C;color:#fff;opacity:1;transform:translateY(0)}

/* ---------- Social row inside contact-info ---------- */
.social-row{display:flex;gap:10px;margin-top:2px}
.social-row__link{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 12px;
  border-radius:var(--radius);background:var(--glass-bg-strong);border:1px solid var(--glass-border);
  box-shadow:var(--shadow-sm);color:var(--ink-soft);font-weight:700;font-size:.88rem;
  transition:transform .45s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.social-row__link svg{width:18px;height:18px}
.social-row__link:hover{transform:translateY(-4px);color:var(--blue-2);border-color:var(--line-strong)}

/* ---------- Office visual (replaces static map placeholder) ---------- */
.office-visual{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:440px;
  background:linear-gradient(175deg,#1A1114 0%,#3A0912 55%,#5C0D1B 100%);box-shadow:var(--shadow-lg);
  display:flex;align-items:center;justify-content:center}
.office-visual__grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% 42%,#000 0%,transparent 72%);
  mask-image:radial-gradient(circle at 50% 42%,#000 0%,transparent 72%)}
.office-visual__glow{position:absolute;width:62%;height:62%;border-radius:50%;top:14%;inset-inline-start:19%;
  background:radial-gradient(circle,rgba(239,62,74,.38),transparent 70%);filter:blur(54px);
  animation:officeGlow 8s ease-in-out infinite alternate}
@keyframes officeGlow{0%{opacity:.7;transform:scale(1)}100%{opacity:1;transform:scale(1.08)}}
.office-visual__content{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:20px;padding:40px}
.office-pin{position:relative;width:66px;height:66px;margin-bottom:2px}
.office-pin__ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);
  animation:pinRing 2.6s var(--ease-soft) infinite}
.office-pin__ring--2{animation-delay:.85s}
.office-pin__ring--3{animation-delay:1.7s}
@keyframes pinRing{0%{transform:scale(.35);opacity:.85}100%{transform:scale(2.7);opacity:0}}
.office-pin__core{position:absolute;inset:19px;border-radius:50%;background:var(--grad-blue);
  display:grid;place-items:center;box-shadow:0 0 32px rgba(225,29,46,.75)}
.office-pin__core svg{width:20px;height:20px;color:#fff}
.office-visual__title{font-size:clamp(1.4rem,3vw,1.8rem);font-weight:800;color:#fff;letter-spacing:-.01em}
.office-visual__text{color:rgba(255,255,255,.62);font-size:1rem;max-width:40ch;line-height:1.8}
.office-visual__badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:4px}
.office-visual__badge{padding:8px 16px;border-radius:var(--radius-pill);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.85);font-size:.83rem;font-weight:700}
.office-visual__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:10px}

/* floating micro dots drifting inside the office visual */
.office-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5);
  animation:officeDot 7s ease-in-out infinite}
.office-dot--1{top:22%;inset-inline-start:18%;animation-delay:0s}
.office-dot--2{top:68%;inset-inline-start:26%;animation-delay:1.4s}
.office-dot--3{top:30%;inset-inline-end:16%;animation-delay:2.6s}
.office-dot--4{top:74%;inset-inline-end:22%;animation-delay:.7s}
@keyframes officeDot{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-14px);opacity:.85}}

/* ---------- FAQ teaser strip ---------- */
.faq-teaser__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:clamp(32px,5vw,48px);flex-wrap:wrap}
.faq-teaser__foot{display:flex;justify-content:center;margin-top:36px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .field__row{grid-template-columns:1fr}
  .quick-channels{gap:10px}
  .channel-btn{padding:12px 18px;font-size:.9rem}
  .social-row{flex-wrap:wrap}
  .social-row__link{flex:1 1 30%}
}
@media (max-width:520px){
  .status-badge{font-size:.82rem}
  .office-visual{min-height:360px}
}