/* ══════════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════════ */

    @keyframes spin{to{transform:rotate(360deg)}}
    @keyframes popIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
    @keyframes waPulse{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.55)}60%{box-shadow:0 4px 32px rgba(37,211,102,.90),0 0 0 12px rgba(37,211,102,0)}}

    /* ══════════════════════════════════════════
       SECTION 1: PAGE HEADER — clean, minimal
    ══════════════════════════════════════════ */
    .contact-hero {
      padding: 174px 52px 64px;
      max-width: 1200px; margin: 0 auto;
      position: relative; z-index: 1;
    }
    .contact-hero-h1 {
      font-family: var(--font-display);
      font-size: clamp(2.6rem, 5.5vw, 4.8rem);
      font-weight: 200; line-height: .94; letter-spacing: -.03em;
      color: var(--green-dark);
      opacity: 0; animation: fadeUp .9s .3s forwards;
    }
    .contact-hero-h1 em { font-style: italic; color: var(--gold); display: block; }
    .contact-hero-sub {
      font-size: 1.05rem; color: var(--muted);
      line-height: 1.70; max-width: 520px;
      margin-top: 18px;
      opacity: 0; animation: fadeUp .9s .45s forwards;
    }
    .contact-hero-wa {
      display: inline-flex; align-items: center; gap: 12px;
      background: #25d366; color: #fff;
      padding: 15px 30px; border-radius: 100px;
      font-family: var(--font-body); font-weight: 700; font-size: 1rem;
      text-decoration: none; margin-top: 28px;
      box-shadow: 0 6px 24px rgba(37,211,102,.45);
      animation: fadeUp .9s .6s forwards, waPulse 2.8s 2s infinite;
      opacity: 0; transition: transform .25s, box-shadow .3s;
    }
    .contact-hero-wa:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 36px rgba(37,211,102,.60);
      animation: none;
      opacity: 1;
    }

    /* ══════════════════════════════════════════
       MAIN LAYOUT: form left, details right
    ══════════════════════════════════════════ */
    .contact-layout {
      display: grid;
      grid-template-columns: 1.55fr 1fr;
      gap: 48px;
      align-items: start;
      max-width: 1200px; margin: 0 auto;
      padding: 48px 52px 80px;
      position: relative; z-index: 1;
    }

    /* ══════════════════════════════════════════
       SECTION 2: BOOKING FORM
    ══════════════════════════════════════════ */
    .form-card {
      background: rgba(255,252,240,.68);
      border: 1.5px solid rgba(255,255,255,.88);
      border-radius: 24px;
      backdrop-filter: blur(18px) saturate(160%);
      box-shadow: 0 6px 32px rgba(45,106,45,.10);
      overflow: hidden;
    }
    .form-card-header {
      padding: 28px 36px 0;
    }
    .form-card-title {
      font-family: var(--font-display);
      font-size: 1.5rem; font-weight: 400;
      color: var(--green-dark); letter-spacing: -.01em;
    }
    .form-card-title em { font-style: italic; color: var(--gold); }
    .form-progress {
      display: flex; gap: 5px; align-items: center;
      margin-top: 16px;
    }
    .fp-step {
      flex: 1; height: 3px; border-radius: 3px;
      background: rgba(45,106,45,.12);
      transition: background .4s;
    }
    .fp-step.active { background: var(--green); }
    .fp-step.done   { background: var(--gold); }
    .fp-label { font-size: .68rem; color: var(--muted); margin-left: 8px; white-space: nowrap; }

    form { padding: 24px 36px 36px; }

    /* Field groups */
    .fg { margin-bottom: 16px; }
    .fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .fg label {
      display: block; font-size: .67rem; letter-spacing: .11em;
      text-transform: uppercase; color: var(--gold);
      font-weight: 700; margin-bottom: 7px;
    }

    /* Inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select, textarea {
      width: 100%;
      background: rgba(255,255,255,.75);
      border: 1.5px solid rgba(255,255,255,.90);
      border-radius: 12px;
      color: var(--green-dark);
      padding: 13px 15px;
      font-family: var(--font-body); font-size: 16px; font-weight: 400;
      outline: none;
      transition: border-color .25s, background .25s, box-shadow .25s;
    }
    input::placeholder, textarea::placeholder { color: var(--muted); }
    input:focus, select:focus, textarea:focus {
      border-color: var(--gold);
      background: rgba(255,255,255,.96);
      box-shadow: 0 0 0 3px rgba(200,146,10,.14);
    }
    input.err, select.err, textarea.err {
      border-color: rgba(200,60,60,.55);
    }
    .fg-error {
      font-size: .71rem; color: rgba(200,60,60,.90);
      margin-top: 4px; display: none;
    }
    .fg-error.show { display: block; }

    /* Select arrow */
    select {
      appearance: none; -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C8920A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 14px center;
      padding-right: 38px; cursor: pointer;
    }
    select option { background: #fef9e7; color: var(--green-dark); }
    

    textarea { resize: vertical; min-height: 90px; line-height: 1.62; }

    /* Section divider inside form */
    .form-section-head {
      font-family: var(--font-display);
      font-size: .9rem; font-weight: 400;
      color: var(--green-dark); letter-spacing: -.01em;
      display: flex; align-items: center; gap: 9px;
      margin: 22px 0 14px;
      padding-bottom: 9px;
      border-bottom: 1px solid rgba(45,106,45,.12);
    }
    .form-section-head:first-of-type { margin-top: 0; }

    /* Grade checkboxes */
    .grade-row { display: flex; gap: 8px; flex-wrap: wrap; }
    .grade-chip {
      display: inline-flex; align-items: center;
      padding: 8px 16px; border-radius: 100px;
      background: rgba(255,255,255,.75);
      border: 1.5px solid rgba(255,255,255,.90);
      font-size: .83rem; font-weight: 500; color: var(--green-dark);
      cursor: pointer; user-select: none;
      transition: background .2s, border-color .2s, color .2s;
    }
    .grade-chip input { display: none; }
    .grade-chip:has(input:checked) {
      background: rgba(45,106,45,.14);
      border-color: rgba(45,106,45,.45);
      color: var(--green); font-weight: 700;
    }
    

    /* Submit button */
    .submit-btn {
      width: 100%; padding: 17px; border-radius: 14px;
      background: var(--green); color: #fff;
      font-family: var(--font-body); font-weight: 700; font-size: 1.05rem;
      border: none; cursor: pointer; margin-top: 10px;
      box-shadow: 0 6px 24px rgba(45,106,45,.30);
      transition: transform .2s, box-shadow .3s, background .2s;
    }
    .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(45,106,45,.45); background: var(--green-light); }
    .submit-btn.loading { opacity: .7; pointer-events: none; }
    .btn-spinner { display: none; width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; margin: 0 auto; }
    .submit-btn.loading .btn-text { display: none; }
    .submit-btn.loading .btn-spinner { display: block; }
    

    .form-note {
      text-align: center; font-size: .73rem; color: var(--muted);
      margin-top: 10px; line-height: 1.55;
    }
    .form-note a { color: var(--green); font-weight: 600; text-decoration: none; }

    /* ── Success state ── */
    .form-success { display: none; text-align: center; padding: 52px 28px; }
    .form-success.show { display: block; }
    .success-icon { font-size: 3.8rem; margin-bottom: 16px; animation: popIn .5s cubic-bezier(.34,1.56,.64,1); display: block; }
    .success-title {
      font-family: var(--font-display); font-size: 1.9rem;
      font-weight: 200; color: var(--green-dark); line-height: 1.15;
    }
    .success-title em { font-style: italic; color: var(--gold); }
    .success-body { color: var(--muted); font-size: .92rem; line-height: 1.70; max-width: 340px; margin: 14px auto 24px; }
    .success-ig {
      display: inline-flex; align-items: center; gap: 8px;
      background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
      color: #fff; padding: 12px 24px; border-radius: 100px;
      font-weight: 700; font-size: .88rem; text-decoration: none;
    }

    /* ══════════════════════════════════════════
       SECTION 3: CONTACT DETAILS + MAP (right col)
    ══════════════════════════════════════════ */
    .details-col { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 100px; }

    /* Contact card */
    .contact-card {
      background: rgba(255,252,240,.68);
      border: 1.5px solid rgba(255,255,255,.88);
      border-radius: 20px; padding: 28px;
      backdrop-filter: blur(16px);
      box-shadow: 0 4px 20px rgba(45,106,45,.08);
    }
    .contact-card-title {
      font-size: .68rem; letter-spacing: .12em;
      text-transform: uppercase; color: var(--gold);
      font-weight: 700; margin-bottom: 18px;
    }
    .contact-row {
      display: flex; align-items: flex-start;
      gap: 13px; padding: 11px 0;
      border-bottom: 1px solid rgba(255,255,255,.65);
    }
    .contact-row:last-child { border-bottom: none; }
    .contact-icon { font-size: 1.1rem; flex-shrink: 0; width: 22px; text-align: center; margin-top: 1px; }
    .contact-label {
      font-size: .64rem; letter-spacing: .1em;
      text-transform: uppercase; color: var(--gold);
      font-weight: 700; display: block; margin-bottom: 2px;
    }
    .contact-val {
      color: var(--green-dark); font-size: .9rem;
      line-height: 1.48; font-weight: 500;
    }
    .contact-val a { color: var(--green-dark); text-decoration: none; transition: color .2s; }
    .contact-val a:hover { color: var(--gold); }

    /* Map embed */
    .map-card {
      border-radius: 20px; overflow: hidden;
      border: 1.5px solid rgba(255,255,255,.88);
      box-shadow: 0 4px 20px rgba(45,106,45,.10);
      aspect-ratio: 4/3; position: relative;
      background: rgba(45,106,45,.04);
    }
    .map-card iframe { width: 100%; height: 100%; border: none; display: block; }
    .map-card-note {
      position: absolute; bottom: 0; left: 0; right: 0;
      background: rgba(255,252,240,.90); backdrop-filter: blur(8px);
      padding: 8px 14px; font-size: .72rem; color: var(--muted);
      border-top: 1px solid rgba(255,255,255,.75);
    }

    /* Directions button */
    .map-dir-btn {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      background: var(--green); color: #fff;
      padding: 12px; border-radius: 12px;
      font-family: var(--font-body); font-weight: 600; font-size: .86rem;
      text-decoration: none; transition: transform .2s, box-shadow .3s;
    }
    .map-dir-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(45,106,45,.35); }

    /* ══════════════════════════════════════════
       SECTION 4: FAQ ACCORDION
    ══════════════════════════════════════════ */
    .faq-section {
      max-width: 780px; margin: 0 auto;
      padding: 0 52px 80px;
      position: relative; z-index: 1;
    }
    .faq-list { list-style: none; margin-top: 40px; }
    .faq-item {
      border-bottom: 1px solid rgba(255,255,255,.70);
      cursor: pointer;
    }
    .faq-item * { cursor: pointer; }
    .faq-q {
      display: flex; justify-content: space-between; align-items: center;
      padding: 18px 4px; cursor: pointer;
      font-size: .95rem; font-weight: 500; color: var(--green-dark);
      transition: color .25s; gap: 16px;
    }
    .faq-q:hover { color: var(--gold); }
    
    .faq-icon {
      width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
      background: rgba(45,106,45,.10); border: 1px solid rgba(45,106,45,.20);
      display: flex; align-items: center; justify-content: center;
      font-size: .85rem; color: var(--green);
      transition: background .3s, transform .35s;
      cursor: pointer;
    }
    .faq-item.open .faq-icon {
      background: var(--green); color: #fff;
      transform: rotate(45deg) scale(1.1);
      border-color: var(--green);
    }
    .faq-a {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .38s cubic-bezier(.4,0,.2,1);
    }
    .faq-a > p { overflow: hidden; min-height: 0; }
    .faq-item.open .faq-a { grid-template-rows: 1fr; }
    .faq-a p {
      padding: 0 4px 18px; color: var(--muted);
      font-size: .9rem; line-height: 1.75;
    }

    /* Toast */
    #toast {
      position: fixed; bottom: 32px; left: 50%;
      transform: translateX(-50%) translateY(80px);
      background: var(--green); color: #fff;
      font-weight: 600; font-size: .88rem;
      padding: 12px 24px; border-radius: 100px;
      box-shadow: 0 8px 32px rgba(45,106,45,.40);
      z-index: 999; transition: transform .5s, opacity .5s;
      opacity: 0; pointer-events: none; white-space: nowrap;
    }
    #toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
    #toast.err   { background: rgba(200,60,60,.92); }

    /* ══ RESPONSIVE ══ */
    @media(max-width:900px) {.contact-layout{grid-template-columns:1fr!important}
      .contact-hero { padding: 144px 24px 48px; }
      .contact-layout { grid-template-columns: 1fr; padding: 40px 24px 60px; gap: 32px; }
      .details-col { position: static; }
      .faq-section { padding: 0 24px 60px; }
    }
    @media(max-width:600px) {
      .contact-hero { padding: 95px 16px 40px; }
      .contact-hero-h1 { font-size: clamp(2.2rem, 9vw, 3.2rem); }
      .contact-layout { padding: 36px 16px 48px; }
      form { padding: 18px 20px 28px; }
      .form-card-header { padding: 22px 20px 0; }
      .fg-row { grid-template-columns: 1fr; }
      .faq-section { padding: 0 16px 48px; }
    }
    @media(max-width:400px) {
      .grade-row { gap: 6px; }
      .grade-chip { padding: 7px 12px; font-size: .78rem; }
    }