/*
 * ConnectHQ — submit result popup, standalone stylesheet.
 *
 * Extracted verbatim from assets/css/theme.css so the legacy pages (contact,
 * book-*, about, location pages) can show the same success/error dialog without
 * pulling in the whole theme — theme.css would restyle their Bootstrap markup.
 *
 * These rules are intentionally NOT scoped to body.chq: legacy pages have no
 * .chq class. Keep the two copies in sync; theme.css is the source.
 */

/* ═══════════════════════════════════════════════════════════════
   SUBMIT RESULT POPUP
   ───────────────────────────────────────────────────────────────
   Shown after every form submit, site-wide — themed forms and the legacy
   jQuery ones alike. It replaces the old "redirect to thankyou.html on success,
   inline popup on failure" split, so the outcome is reported the same way
   everywhere and the visitor keeps their place on the page.

   Deliberately NOT scoped to body.chq: the legacy pages (contact, book-*,
   virtual-office) have no .chq class and need this too.
═══════════════════════════════════════════════════════════════ */
.chq-modal{
  position:fixed;inset:0;z-index:100050;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(10,8,20,0.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity 0.28s cubic-bezier(0.16,1,0.3,1);
}
.chq-modal.open{display:flex;opacity:1}
.chq-modal-box{
  position:relative;width:100%;max-width:410px;
  background:#fff;border-radius:22px;padding:34px 28px 26px;text-align:center;
  box-shadow:0 24px 80px rgba(12,8,30,0.32);
  transform:translateY(14px) scale(0.97);
  transition:transform 0.32s cubic-bezier(0.16,1,0.3,1);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
}
.chq-modal.open .chq-modal-box{transform:translateY(0) scale(1)}
.chq-modal-icon{
  width:58px;height:58px;margin:0 auto 18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.chq-modal--ok   .chq-modal-icon{background:#F0FDF4;border:2px solid #BBF7D0;color:#16A34A}
.chq-modal--fail .chq-modal-icon{background:#FEF2F2;border:2px solid #FECACA;color:#DC2626}
.chq-modal-title{
  font-family:'Outfit',system-ui,sans-serif;font-weight:700;font-size:1.25rem;
  color:#1A1828;margin:0 0 8px;line-height:1.25;
}
.chq-modal-text{font-size:0.9rem;line-height:1.6;color:#4A4768;margin:0;font-weight:400}
.chq-modal-text a{color:#6B2FA0;font-weight:600;text-decoration:underline}
.chq-modal-ref{
  display:inline-block;margin-top:15px;padding:6px 13px;border-radius:100px;
  background:rgba(107,47,160,0.08);border:1px solid rgba(107,47,160,0.18);
  font-size:0.75rem;color:#6B2FA0;font-weight:600;letter-spacing:0.02em;
}
.chq-modal-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.chq-modal-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 20px;border-radius:100px;font-size:0.875rem;font-weight:600;
  font-family:'Outfit',system-ui,sans-serif;cursor:pointer;border:none;
  transition:transform 0.2s,box-shadow 0.2s,background 0.2s;flex:1 1 auto;min-width:120px;
  text-decoration:none;
}
/* `body.chq button{background:none}` in the theme reset has specificity (0,1,1)
   and would otherwise strip these fills, leaving an empty white pill. The
   .chq-modal prefix raises these to (0,2,0) so they win on themed pages, while
   staying unscoped for legacy pages that have no .chq class. */
.chq-modal .chq-modal-btn--primary{background:#6B2FA0;color:#fff;box-shadow:0 4px 18px rgba(107,47,160,0.32)}
.chq-modal .chq-modal-btn--primary:hover{background:#7C3DB5;color:#fff;transform:translateY(-1px)}
.chq-modal .chq-modal-btn--wa{background:#25D366;color:#fff}
.chq-modal .chq-modal-btn--ghost{background:transparent;color:#4A4768;border:1.5px solid rgba(0,0,0,0.12)}
.chq-modal .chq-modal-close{background:none;color:#8A87A8}
.chq-modal-btn--wa{background:#25D366;color:#fff}
.chq-modal-btn--wa:hover{color:#fff;transform:translateY(-1px)}
.chq-modal-btn--ghost{background:transparent;color:#4A4768;border:1.5px solid rgba(0,0,0,0.12)}
.chq-modal-btn--ghost:hover{border-color:#6B2FA0;color:#6B2FA0}
.chq-modal-close{
  position:absolute;top:12px;right:14px;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;color:#8A87A8;background:none;border:none;cursor:pointer;
}
.chq-modal-close:hover{background:rgba(0,0,0,0.05);color:#1A1828}
@media (max-width:480px){
  .chq-modal-box{padding:30px 20px 22px;border-radius:18px}
  .chq-modal-actions{flex-direction:column}
  .chq-modal-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .chq-modal,.chq-modal-box{transition:none}
}

/*
 * Form submitting / sent states.
 *
 * Mirrors the rules in theme.css, but unscoped: the legacy pages (contact,
 * book-*, location pages) have no .chq class and load only this stylesheet.
 * Keep the two copies in sync; theme.css is the source.
 */
form.is-submitting{
  opacity:0.55;
  pointer-events:none;
  transition:opacity 0.35s cubic-bezier(0.25,1,0.5,1);
  cursor:progress;
}
form.is-submitting input[type="submit"],
form.is-submitting button[type="submit"],
form.is-submitting .enquiry-submit{opacity:1}

form.is-sent{
  opacity:0;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity 0.45s cubic-bezier(0.25,1,0.5,1),transform 0.45s cubic-bezier(0.25,1,0.5,1);
}

@media (prefers-reduced-motion:reduce){
  form.is-submitting,form.is-sent{transition:none;transform:none}
}