/* ============================================================
   CORIO - CONTACT PAGE STYLES
   -----------------------------------------------------------
   Loaded on top of assets/css/base.css. Only the contact page
   specific layout and form styles belong here.
   ============================================================ */
/* ============================================================
   5. CONTACT HERO
============================================================ */
.contact-hero{
  padding:64px 0 52px;
  background:
    radial-gradient(60% 50% at 85% 10%, var(--orange-glow), transparent 70%),
    linear-gradient(180deg, var(--cream), #FFFDF9);
  text-align:center;
}
.contact-hero h1{ font-size:clamp(32px,5vw,52px); margin:16px 0 14px; }
.contact-hero p{ color:var(--ink-soft); font-size:16px; max-width:640px; margin:0 auto; }
.contact-hero .quick-chips{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:26px;
}
.contact-hero .quick-chips a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; color:var(--ink);
  background:var(--white); border:1px solid var(--line);
  padding:10px 18px; border-radius:var(--r-pill); box-shadow:var(--shadow-sm);
  transition:border-color .2s ease, transform .2s ease, color .2s ease;
}
.contact-hero .quick-chips a:hover{ border-color:var(--orange); color:var(--orange-deep); transform:translateY(-2px); }
.contact-hero .quick-chips a i{ color:var(--orange); }

/* ============================================================
   6. CONTACT LAYOUT
============================================================ */
.contact-wrap{ padding:64px 0 96px; }
.contact-grid{
  display:grid; grid-template-columns:1.65fr 1fr; gap:40px; align-items:start;
}

/* ---- Form card ---- */
.form-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:40px; box-shadow:var(--shadow-sm);
}
.form-card > h2{ font-size:26px; margin-bottom:6px; }
.form-card > .form-intro{ color:var(--ink-soft); font-size:15px; margin-bottom:28px; }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.field label{ font-size:14px; font-weight:700; color:var(--ink); }
.field label .req{ color:var(--orange-deep); }
.field .hint{ font-size:12.5px; color:var(--ink-soft); }
.field .err{ font-size:12.5px; font-weight:600; color:#C62828; display:none; }
.field.has-error .err{ display:block; }

.field input, .field select, .field textarea{
  font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--cream); border:1.5px solid var(--line);
  border-radius:var(--r-sm); padding:13px 16px; width:100%;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.field textarea{ resize:vertical; min-height:150px; line-height:1.6; }
.field input::placeholder, .field textarea::placeholder{ color:#9c9c9c; }
.field select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F36F00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
  padding-right:44px; cursor:pointer;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; background:var(--white);
  border-color:var(--orange); box-shadow:0 0 0 4px var(--orange-glow);
}
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:#E35D5D; }

/* ---- Consent + submit ---- */
.consent{ display:flex; align-items:flex-start; gap:10px; margin:4px 0 22px; }
.consent input{ width:18px; height:18px; margin-top:2px; accent-color:var(--orange); flex-shrink:0; }
.consent label{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.consent a{ color:var(--orange-deep); font-weight:700; text-decoration:underline; }
.consent.has-error label{ color:#C62828; }

.form-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.form-actions .btn{ padding:15px 34px; font-size:15.5px; }
.form-actions .form-note{ font-size:12.5px; color:var(--ink-soft); }
.form-actions .form-note i{ color:var(--green); }

/* ---- Alerts ---- */
.form-alert{
  display:flex; align-items:flex-start; gap:12px;
  border-radius:var(--r-md); padding:16px 18px; margin-bottom:24px; font-size:14.5px;
}
.form-alert i{ font-size:18px; margin-top:2px; flex-shrink:0; }
.form-alert.success{ background:var(--green-light); color:var(--green); border:1px solid rgba(30,122,70,.25); }
.form-alert.error{ background:#FDECEC; color:#B3261E; border:1px solid rgba(179,38,30,.22); }
.form-alert p{ margin:0; }
.form-alert strong{ display:block; margin-bottom:2px; }

.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---- Side column ---- */
.side-col{ display:flex; flex-direction:column; gap:20px; position:sticky; top:calc(var(--header-h) + 24px); }
.help-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow-sm);
}
.help-card h3{ font-size:19px; margin-bottom:18px; }
.help-list{ display:flex; flex-direction:column; gap:16px; }
.help-item{ display:flex; align-items:flex-start; gap:14px; }
.help-item .ico{
  width:42px; height:42px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--orange-light); color:var(--orange-deep); font-size:17px;
}
.help-item strong{ display:block; font-size:14.5px; }
.help-item span{ display:block; font-size:13.5px; color:var(--ink-soft); }
.help-item a{ color:var(--orange-deep); font-weight:700; }
.help-item a:hover{ text-decoration:underline; }

.help-card.dark{
  background:linear-gradient(135deg,var(--ink),#3a2e26);
  border-color:transparent; color:#fff;
}
.help-card.dark h3{ color:#fff; }
.help-card.dark p{ color:rgba(255,255,255,.75); font-size:14px; margin:0 0 18px; }
.help-card.dark .app-badge{ display:inline-flex; }

/* ============================================================
   7. SUBJECT SHORTCUTS  (topic picker above the form)
============================================================ */
.topic-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:34px; }
.topic-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  text-align:left; padding:18px; border-radius:var(--r-md);
  background:var(--white); border:1.5px solid var(--line);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.topic-btn i{ font-size:19px; color:var(--orange); }
.topic-btn strong{ font-size:14px; line-height:1.35; }
.topic-btn:hover{ border-color:var(--orange); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.topic-btn.is-active{ border-color:var(--orange); background:var(--orange-light); }

/* ============================================================
   8. REFUND / CANCELLATION INFO  (footer deep link target)
============================================================ */
.info-band{
  background:
    radial-gradient(60% 60% at 15% 0%, var(--orange-glow), transparent 65%),
    linear-gradient(180deg, #FFFDF9, var(--cream));
  border-top:1px solid var(--line);
  padding:64px 0;
}
.info-band .info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.info-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-md); padding:28px; box-shadow:var(--shadow-sm);
}
.info-card .ico{
  width:46px; height:46px; border-radius:14px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--orange),var(--orange-deep)); color:#fff; font-size:19px;
}
.info-card h3{ font-size:18px; margin-bottom:8px; }
.info-card p{ color:var(--ink-soft); font-size:14.5px; margin:0; }
.info-card p + p{ margin-top:10px; }
.info-card a{ color:var(--orange-deep); font-weight:700; }

/* ============================================================
   9. FAQ STRIP
============================================================ */
.contact-faq{ padding:64px 0 88px; }
.contact-faq .faq-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.contact-faq .qa{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:22px 24px; }
.contact-faq .qa strong{ display:block; font-size:15px; margin-bottom:6px; font-family:var(--font-display); }
.contact-faq .qa p{ color:var(--ink-soft); font-size:14.5px; margin:0; }

/* ============================================================
   10. RESPONSIVE
============================================================ */
@media (max-width:960px){
  .contact-grid{ grid-template-columns:1fr; }
  .side-col{ position:static; }
  .topic-grid{ grid-template-columns:repeat(2,1fr); }
  .info-band .info-grid{ grid-template-columns:1fr; }
  .contact-faq .faq-list{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .contact-hero{ padding:44px 0 40px; }
  .contact-wrap{ padding:44px 0 64px; }
  .form-card{ padding:28px 20px; }
  .form-row{ grid-template-columns:1fr; gap:0; }
  .topic-grid{ grid-template-columns:1fr; }
  .form-actions .btn{ width:100%; justify-content:center; }
}