/* ═══════════════════════════════════════════════════════════════════════
   SENSORIUM AGENCY — contact.css
   Contact page. Requires base.css.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── HERO ────────────────────────────────────────────────────────────── */
.contact-hero {
  position: relative;
  min-height: 56vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(150deg,rgba(13,40,64,.97) 0%,rgba(21,60,95,.88) 60%,rgba(244,125,85,.1) 100%),
              url('../images/global/globa2.webp') center/cover no-repeat;
  color: var(--clr-white);
  overflow: hidden;
}
.contact-hero-overlay { position:absolute;inset:0;background:radial-gradient(circle at 80% 30%,rgba(56,182,255,.07) 0%,transparent 55%);z-index:0; }

.contact-hero-content {
  position: relative; z-index: 1;
  max-width: 780px;
  padding: 5rem var(--container-pad) 2.5rem;
  margin-inline: auto;
  width: 100%;
  text-align: center;
}
.contact-hero-content h1 { color:var(--clr-white);font-size:clamp(2.0rem,4vw,2.5rem);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin-bottom:1.25rem; }
.contact-hero-content h1 em { font-style:normal;color:var(--clr-white); }
.contact-hero-content p { color:rgba(255,255,255,.78);font-size:clamp(.9rem,1.7vw,1.05rem);max-width:620px;margin:0 auto 2rem;line-height:1.65; }
.contact-hero-content p strong { color:var(--clr-white); }

/* Quick action buttons */
.hero-quick-actions { display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;margin-bottom:0; }
.quick-action-btn {
  display: inline-flex;align-items:center;gap:.45rem;
  padding: .65rem 1.4rem;
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);font-weight:500;
  color: var(--clr-white);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  transition: background var(--transition),border-color var(--transition),transform var(--transition);
}
.quick-action-btn:hover { background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.6);transform:translateY(-2px); }
.quick-action-btn.whatsapp { border-color:rgba(37,211,102,.5);color:#25D366; }
.quick-action-btn.whatsapp:hover { background:rgba(37,211,102,.15);border-color:#25D366; }

@media (max-width:575px) {
  .contact-hero { min-height:65svh; }
  .contact-hero-content { padding:4rem 1rem 2rem; }
  .hero-quick-actions { flex-direction:column;align-items:center; }
}


/* ── MAIN CONTACT SECTION ────────────────────────────────────────────── */
.contact-main { background:var(--clr-surface);padding:3.5rem 0 5rem; }

.contact-card {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 0;
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}


/* ── LEFT COLUMN ─────────────────────────────────────────────────────── */
.contact-left {
  background: var(--clr-navy);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow-y: auto;
  max-height: 90vh;
}

.contact-left h2 { color:var(--clr-white);font-size:1.3rem;margin:0; }
.contact-left-sub { color:rgba(255,255,255,.65);font-size:var(--fs-sm);line-height:1.6;margin:0; }

/* Contact info list */
.contact-info-list { list-style:none;display:flex;flex-direction:column;gap:.85rem; }

.contact-info-list li {
  display: flex;align-items:flex-start;gap:1rem;
  padding: .85rem 1rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  transition: background var(--transition);
}
.contact-info-list li:hover { background:rgba(255,255,255,.09); }

.ci-icon {
  width:38px;height:38px;border-radius:50%;
  background:rgba(244,125,85,.18);
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;color:var(--clr-sky);flex-shrink:0;
}

.ci-text span { display:block;font-size:.68rem;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.2rem; }
.ci-text a,
.ci-text address { color:rgba(255,255,255,.85);font-size:var(--fs-sm);font-style:normal;transition:color var(--transition); }
.ci-text a:hover { color:var(--clr-coral); }

/* Social */
.contact-socials { display:flex;gap:.75rem; }
.contact-socials a {
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;color:rgba(255,255,255,.7);
  transition:background var(--transition),color var(--transition),transform var(--transition);
}
.contact-socials a:hover { background:var(--clr-coral);color:var(--clr-white);border-color:var(--clr-coral);transform:translateY(-2px); }

/* Map */
.contact-map-wrap {
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  flex-shrink:0;
}
.contact-map-wrap iframe { display:block;width:100%;height:180px;border:none;filter:grayscale(30%) contrast(1.05); }

/* FAQ */
.faq-heading {
  display:flex;align-items:center;gap:.5rem;
  font-size:.85rem;font-weight:700;
  color:rgba(255,255,255,.55);
  text-transform:uppercase;letter-spacing:.08em;
  margin:0;
}
.faq-heading i { color:var(--clr-sky);font-size:.9rem; }

.faq-list { display:flex;flex-direction:column;gap:.4rem; }

.faq-item { border-radius:var(--radius-md);overflow:hidden; }

.faq-trigger {
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.8rem 1rem;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-md);
  font-size:var(--fs-sm);font-weight:500;
  color:rgba(255,255,255,.8);
  font-family:var(--font-body);cursor:pointer;text-align:left;
  transition:background var(--transition),border-color var(--transition);
}
.faq-trigger:hover { background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15); }
.faq-trigger[aria-expanded="true"] { background:rgba(244,125,85,.12);border-color:rgba(244,125,85,.25);color:var(--clr-white); }
.faq-trigger i { font-size:.75rem;flex-shrink:0;color:rgba(255,255,255,.45);transition:transform .3s; }
.faq-trigger[aria-expanded="true"] i { transform:rotate(180deg);color:var(--clr-coral); }

.faq-body {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-top:none;
  border-radius:0 0 var(--radius-md) var(--radius-md);
  padding:.85rem 1rem;
  animation:fadeDown .25s ease;
}
.faq-body[hidden] { display:none; }
@keyframes fadeDown { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }
.faq-body p { font-size:var(--fs-sm);color:rgba(255,255,255,.65);line-height:1.65;margin:0; }
.faq-body a { color:var(--clr-sky);transition:color var(--transition); }
.faq-body a:hover { color:var(--clr-coral); }


/* ── RIGHT COLUMN ────────────────────────────────────────────────────── */
.contact-right { padding:2.5rem; }

/* Enquiry type tabs */
.enquiry-tabs { display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem; }

.enq-tab {
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.55rem 1.15rem;
  border:1.5px solid var(--clr-border);
  border-radius:var(--radius-pill);
  font-size:var(--fs-sm);font-weight:500;
  font-family:var(--font-body);
  color:var(--clr-text-muted);background:transparent;cursor:pointer;
  transition:background var(--transition),border-color var(--transition),color var(--transition);
}
.enq-tab i { font-size:.8rem; }
.enq-tab:hover { border-color:var(--clr-navy);color:var(--clr-navy); }
.enq-tab.active { background:var(--clr-navy);border-color:var(--clr-navy);color:var(--clr-white); }

/* Context banner */
.enquiry-context {
  display:flex;align-items:flex-start;gap:.65rem;
  background:rgba(56,182,255,.06);
  border:1px solid rgba(56,182,255,.18);
  border-radius:var(--radius-md);
  padding:.75rem 1rem;
  margin-bottom:1.5rem;
}
.enquiry-context > i { color:var(--clr-sky);font-size:.9rem;flex-shrink:0;margin-top:.15rem; }
.enquiry-context p { font-size:var(--fs-sm);color:var(--clr-text-muted);margin:0;line-height:1.55; }

/* Form */
.contact-form { display:flex;flex-direction:column;gap:1rem; }

.cf-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }

/* Floating label fields */
.cf-field { position:relative;display:flex;flex-direction:column; }

.cf-field input,
.cf-field select,
.cf-field textarea {
  width:100%;padding:1.1rem .9rem .45rem;
  border:1.5px solid var(--clr-border);border-radius:var(--radius-md);
  font-size:var(--fs-sm);font-family:var(--font-body);
  color:var(--clr-text);background:var(--clr-surface);
  outline:none;appearance:none;-webkit-appearance:none;
  transition:border-color var(--transition),box-shadow var(--transition),background var(--transition);
}
.cf-field textarea { resize:vertical;min-height:110px;padding-top:1.35rem; }
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus {
  border-color:var(--clr-navy);box-shadow:0 0 0 3px rgba(21,60,95,.1);background:var(--clr-white);
}

.cf-field label {
  position:absolute;top:.75rem;left:.9rem;
  font-size:var(--fs-sm);color:var(--clr-text-muted);
  pointer-events:none;transition:top .2s,font-size .2s,color .2s;
}
.cf-field input:not(:placeholder-shown)~label,
.cf-field input:focus~label,
.cf-field textarea:not(:placeholder-shown)~label,
.cf-field textarea:focus~label,
.cf-field select:valid~label,
.cf-field select:focus~label {
  top:.25rem;font-size:.65rem;color:var(--clr-navy);font-weight:600;
}
.req { color:var(--clr-coral); }
.char-count { font-size:.7rem;color:var(--clr-text-muted);text-align:right;margin-top:.2rem; }

/* Employer and candidate conditional fields */
.employer-fields.cf-field { margin-top:0; }

/* CV Upload label */
.cf-upload-label {
  display:flex;align-items:center;gap:.75rem;
  padding:.9rem 1.1rem;
  border:1.5px dashed var(--clr-border);border-radius:var(--radius-md);
  cursor:pointer;font-size:var(--fs-sm);color:var(--clr-text-muted);
  background:var(--clr-surface);
  transition:border-color var(--transition),background var(--transition),color var(--transition);
}
.cf-upload-label:hover { border-color:var(--clr-navy);background:var(--clr-white);color:var(--clr-navy); }
.cf-upload-label.has-file { border-color:var(--clr-emerald);color:var(--clr-emerald);background:rgba(16,185,129,.04); }
.cf-upload-label i { font-size:1.2rem;flex-shrink:0; }

/* GDPR consent */
.cf-consent {
  display:flex;align-items:flex-start;gap:.65rem;cursor:pointer;
  font-size:var(--fs-sm);color:var(--clr-text-muted);line-height:1.55;
}
.cf-consent input[type="checkbox"] { flex-shrink:0;width:16px;height:16px;margin-top:.15rem;accent-color:var(--clr-navy);cursor:pointer; }
.cf-consent a { color:var(--clr-navy);font-weight:500;text-decoration:underline; }

/* Error */
.cf-error {
  background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.2);
  border-radius:var(--radius-md);padding:.7rem 1rem;
  font-size:var(--fs-sm);color:var(--clr-red);line-height:1.5;
}

/* Submit */
.cf-submit { width:100%;justify-content:center;font-size:var(--fs-base);padding:.9rem; }
.cf-submit.loading { opacity:.7;pointer-events:none; }
.btn-spinner.hidden,.btn-label.hidden { display:none; }

/* Disclaimer */
.cf-disclaimer {
  display:flex;align-items:center;gap:.45rem;
  font-size:.72rem;color:var(--clr-text-muted);
  text-align:center;justify-content:center;line-height:1.5;
}
.cf-disclaimer i { color:var(--clr-emerald);font-size:.75rem; }

/* ── RESPONSIVE ── */
@media (max-width:991px) {
  .contact-card { grid-template-columns:1fr; }
  .contact-left { max-height:none;border-radius:0; }
  .contact-right { padding:2rem 1.5rem; }
}
@media (max-width:575px) {
  .contact-right { padding:1.5rem 1rem; }
  .cf-row { grid-template-columns:1fr; }
  .enquiry-tabs { gap:.35rem; }
  .enq-tab { padding:.5rem .9rem;font-size:.78rem; }
}