/* contact.css — Contact Page Styles */

/* ── Popup animation ── */
@keyframes popIn {
  0%   { opacity:0; transform:scale(.88) translateY(16px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}

#successOverlay, #errorOverlay { display:none; }
#successOverlay.show, #errorOverlay.show { display:flex!important; }

#successOverlay, #errorOverlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(15,23,42,.65); backdrop-filter:blur(6px);
  align-items:center; justify-content:center;
  padding:16px; box-sizing:border-box;
}
#successOverlay > div, #errorOverlay > div {
  width:100%; max-width:420px; box-sizing:border-box;
}

/* ── Form wrapper ── */
.fwrap {
  background:#fff; border:1px solid var(--border);
  border-radius:var(--r24); padding:36px;
  box-shadow:var(--sh-m); box-sizing:border-box; width:100%;
}

/* ── All form inputs full width, no overflow ── */
.fg input, .fg select, .fg textarea {
  box-sizing:border-box; width:100%; max-width:100%;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color:var(--blue); background:#fff;
  box-shadow:0 0 0 3px rgba(37,99,235,.08);
}
.fg input.err, .fg select.err, .fg textarea.err { border-color:#ef4444; }

/* ── Agree checkbox ── */
.f-agree { display:flex; align-items:flex-start; gap:10px; }
.f-agree input { margin-top:3px; flex-shrink:0; accent-color:var(--blue); width:16px; height:16px; }
.f-agree label { font-size:.76rem; color:var(--tx3); line-height:1.6; cursor:pointer; }

/* ── Submit button ── */
.sbtn:disabled { opacity:.65; cursor:not-allowed; transform:none!important; box-shadow:none!important; }
.sbtn .spin {
  display:inline-block; width:14px; height:14px;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; animation:spin .7s linear infinite; margin-right:6px;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Quick contact bar ── */
.qc-bar { background:#fff; border-bottom:1px solid var(--borderl); overflow-x:auto; -webkit-overflow-scrolling:touch; }
.qc-inner { display:flex; max-width:1280px; margin:0 auto; padding:0 16px; scrollbar-width:none; min-width:0; }
.qc-inner::-webkit-scrollbar { display:none; }
.qc-i {
  display:flex; align-items:center; gap:8px;
  padding:12px 14px; border-right:1px solid var(--borderl);
  text-decoration:none; color:var(--tx2); transition:background .22s;
  flex:1; min-width:140px; white-space:nowrap;
}
.qc-i:hover { background:rgba(37,99,235,.04); }
.qc-i:last-child { border-right:none; }
.qc-icon {
  width:32px; height:32px; border-radius:var(--r8);
  background:rgba(37,99,235,.08); color:var(--blue);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.82rem; flex-shrink:0;
}
.qc-l { font-size:.6rem; text-transform:uppercase; letter-spacing:.07em; color:var(--g400); display:block; margin-bottom:1px; }
.qc-v { font-size:.78rem; font-weight:700; color:var(--tx1); display:block; }

/* ── Map ── */
.map-section { border-top:1px solid var(--borderl); }
.map-embed-wrap { width:100%; overflow:hidden; line-height:0; }
.map-embed-wrap iframe { display:block; width:100%; height:500px; border:0; }

/* ── Off cards ── */
.off-card { box-sizing:border-box; width:100%; }

/* ── MOBILE (≤700px) ── */
@media(max-width:700px) {

  /* Section padding */
  #demo { padding:40px 0!important; }
  #demo .wrap { padding:0 14px!important; }

  /* Contact layout */
  .contact-layout { gap:20px!important; }

  /* Form wrapper */
  .fwrap { padding:18px 14px; border-radius:var(--r16); }

  /* Form rows stack */
  .frow { grid-template-columns:1fr!important; gap:10px; }

  /* Inputs */
  .fg input, .fg select, .fg textarea {
    font-size:.85rem; padding:9px 11px;
    box-sizing:border-box; max-width:100%;
  }

  /* reCAPTCHA scale down to fit */
  .rcap-box { overflow:hidden; max-width:100%; }
  .g-recaptcha { transform:scale(0.85); transform-origin:0 0; }

  /* Quick contact bar — horizontal scroll */
  .qc-bar { overflow-x:auto!important; }
  .qc-inner {
    flex-direction:row!important;
    width:max-content; min-width:100%;
    padding:0 10px;
  }
  .qc-i {
    border-right:1px solid var(--borderl)!important;
    border-bottom:none!important;
    min-width:120px; padding:10px 10px;
  }
  .qc-i:last-child { border-right:none!important; }
  .qc-icon { width:28px; height:28px; font-size:.76rem; }
  .qc-v { font-size:.7rem; }
  .qc-l { font-size:.56rem; }

  /* Map */
  .map-embed-wrap iframe { height:260px; }
  .map-hdr { flex-direction:column; align-items:flex-start; gap:10px; }
  .map-hdr .btn { width:100%; justify-content:center; }

  /* Info panel */
  .off-card { padding:14px; }
  .port-links { grid-template-columns:1fr 1fr; gap:6px; }
  .port-a { font-size:.72rem; padding:6px 8px; }

  /* Popup */
  #successOverlay > div, #errorOverlay > div {
    padding:24px 18px; border-radius:16px;
  }
}

/* ── SMALL MOBILE (≤400px) ── */
@media(max-width:400px) {
  .fwrap { padding:14px 10px; }
  .g-recaptcha { transform:scale(0.76); transform-origin:0 0; }
  .qc-i { min-width:100px; padding:8px; }
  .qc-v { font-size:.65rem; }
}