/* ═══════════════════════════════════════════════════════════
   Anahat Banquet | Gallery | Lawns — Front-end Form Styles
   Palette: #341018 · #5a160c · #b09443 · #e4d2c3 · #f6f3ee
   Author:  Insignia Technolabs — https://www.insigniatechnolabs.com/
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Jost:wght@300;400;500;600;700&display=swap');

:root {
    --abf-maroon-dk:  #341018;
    --abf-maroon:     #5a160c;
    --abf-gold:       #b09443;
    --abf-gold-dk:    #8c7535;
    --abf-cream:      #f6f3ee;
    --abf-cream-dk:   #ede8e0;
    --abf-sand:       #e4d2c3;
    --abf-white:      #ffffff;
    --abf-muted:      #8a6a6a;
    --abf-success:    #2e7d32;
    --abf-error:      #c62828;
    --abf-radius:     14px;
    --abf-shadow:     0 8px 40px rgba(52,16,24,.14);
    --abf-t:          0.28s ease;
    --abf-serif:      'Cormorant Garamond', Georgia, serif;
    --abf-sans:       'Jost', system-ui, sans-serif;
}

/* ── Wrapper ── */
.abf-wrapper {
    max-width: 500px;
    margin: 32px auto;
    background: var(--abf-white);
    border: 1px solid var(--abf-sand);
    border-radius: var(--abf-radius);
    box-shadow: var(--abf-shadow);
    overflow: hidden;
    font-family: var(--abf-sans);
}

/* ── Header ── */
.abf-header {
    background: var(--abf-maroon-dk);
    background-image:
        repeating-linear-gradient(
            135deg, transparent, transparent 22px,
            rgba(176,148,67,.065) 22px, rgba(176,148,67,.065) 23px
        );
    position: relative;
}
.abf-header-inner {
    position: relative; z-index: 1;
    padding: 22px 28px 16px;
    text-align: center;
}
.abf-header-logo {
    display: block; margin: 0 auto 10px;
    height: 44px; width: auto;
    filter: brightness(0) invert(1); opacity: .88;
}
.abf-header-title {
    font-family: var(--abf-serif);
    font-size: 1.15rem; font-weight: 600;
    color: var(--abf-cream);
    letter-spacing: .07em; margin: 0 0 4px;
    text-transform: uppercase;
}
.abf-header-sub {
    font-size: .68rem; letter-spacing: .22em;
    color: var(--abf-gold); text-transform: uppercase;
    font-weight: 500; margin: 0;
}
.abf-header-divider {
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--abf-gold) 40%, var(--abf-gold) 60%, transparent 100%);
    opacity: .85;
}
/* .abf-header-success {
    background: linear-gradient(135deg, var(--abf-maroon-dk) 0%, #1a3d1c 100%);
    background-image: none;
} */

/* ── Progress bar ── */
.abf-progress { height: 4px; background: var(--abf-sand); }
.abf-progress span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--abf-maroon), var(--abf-gold));
    transition: width var(--abf-t);
}

/* ── Step bodies ── */
.abf-form-body, .abf-welcome-body, .abf-thankyou-body {
    padding: 24px 28px 10px;
    background: var(--abf-cream);
}

/* ── Welcome ── */
.abf-welcome-options { margin-bottom: 20px; }
.abf-option-row {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 0; border-bottom: 1px solid var(--abf-sand);
}
.abf-option-row:last-child { border-bottom: none; }
.abf-option-label {
    background: var(--abf-maroon-dk); color: var(--abf-cream);
    padding: 4px 14px; border-radius: 20px; font-size: .74rem;
    font-weight: 600; white-space: nowrap;
    letter-spacing: .06em; text-transform: uppercase;
}
.abf-tagline {
    text-align: center;
    font-family: var(--abf-serif); font-style: italic;
    font-size: 1rem; font-weight: 500;
    color: var(--abf-maroon-dk); margin: 0;
    letter-spacing: .02em;
}

/* ── Fields ── */
.abf-field { display: grid; gap: 4px; margin-bottom: 16px; position: relative; }
.abf-field label {
    font-size: .73rem; font-weight: 700;
    color: var(--abf-maroon-dk);
    text-transform: uppercase; letter-spacing: .08em;
}
.abf-field input,
.abf-field select,
.abf-field textarea {
    width: 100%; padding: 10px 13px;
    border: 1.5px solid var(--abf-sand); border-radius: 8px;
    font-size: .92rem; font-family: var(--abf-sans);
    background: var(--abf-white); color: var(--abf-maroon-dk);
    transition: border-color var(--abf-t), box-shadow var(--abf-t);
    box-sizing: border-box;
}
.abf-field input:focus,
.abf-field select:focus,
.abf-field textarea:focus {
    outline: none; border-color: var(--abf-gold);
    box-shadow: 0 0 0 3px rgba(176,148,67,.16);
}
.abf-field textarea { resize: vertical; min-height: 70px; }
.abf-hint { font-size: .71rem; color: var(--abf-muted); }
.abf-req { color: var(--abf-gold); }

/* ── Buttons ── */
.abf-btn-row {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 28px 22px; background: var(--abf-cream);
}
/* ── Base Button ── */
.abf-wrapper .abf-btn {
    padding: 11px 24px; border: none; border-radius: 8px;
    font-size: .8rem; font-family: var(--abf-sans); font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    cursor: pointer; transition: all var(--abf-t);
}
.abf-wrapper .abf-btn:active  { transform: scale(.97); }
.abf-wrapper .abf-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Primary ── */
.abf-wrapper .abf-btn-primary {
    background: var(--abf-maroon-dk); color: var(--abf-cream);
    box-shadow: 0 3px 14px rgba(52,16,24,.28);
}
.abf-wrapper .abf-btn-primary:focus,
.abf-wrapper .abf-btn-primary:active,
.abf-wrapper .abf-btn-primary:hover {
    background: var(--abf-maroon);
    box-shadow: 0 5px 18px rgba(90,22,12,.36);
}

/* ── Secondary ── */
.abf-wrapper .abf-btn-secondary {
    background: transparent; color: var(--abf-maroon-dk);
    border: 1.5px solid var(--abf-sand);
}
.abf-wrapper .abf-btn-secondary:focus,
.abf-wrapper .abf-btn-secondary:active,
.abf-wrapper .abf-btn-secondary:hover { background: var(--abf-sand); }
.abf-wrapper .abf-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Spinner / Error ── */
.abf-spinner {
    text-align: center; padding: 8px;
    color: var(--abf-gold); font-weight: 600; font-size: .85rem;
    background: var(--abf-cream);
    font-family: var(--abf-serif); letter-spacing: .06em;
}
.abf-error {
    background: #fff3f3; border: 1px solid #ffcdd2;
    color: var(--abf-error); border-radius: 8px;
    padding: 10px 16px; margin: 0 28px 12px; font-size: .88rem;
}

/* ── Thank you ── */
.abf-thankyou-body { text-align: center; padding: 36px 28px 28px; }
.abf-checkmark {
    font-size: 2.8rem; color: var(--abf-gold); margin-bottom: 14px;
    animation: abf-pop .4s cubic-bezier(.175,.885,.32,1.275); display: block;
}
@keyframes abf-pop { 0%{transform:scale(0);opacity:0} 100%{transform:scale(1);opacity:1} }
.abf-thankyou-body p { font-size: .9rem; color: var(--abf-muted); margin: 6px 0; }
.abf-thankyou-sub { font-size: .8rem; color: #bbb; }
.abf-booking-ref {
    background: var(--abf-cream-dk);
    border: 1px solid var(--abf-sand);
    border-left: 4px solid var(--abf-gold);
    border-radius: 6px; padding: 10px 20px;
    font-family: var(--abf-serif); font-size: 1.1rem; font-weight: 700;
    color: var(--abf-maroon-dk); letter-spacing: .05em;
    display: inline-block; margin: 10px auto;
}

/* ── Step animation ── */
.abf-step { animation: abf-in .32s ease; }
@keyframes abf-in { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }

/* ── Responsive ── */
@media (max-width: 540px) {
    .abf-form-body, .abf-welcome-body, .abf-thankyou-body { padding: 18px 16px 8px; }
    .abf-btn-row { padding: 12px 16px 18px; flex-direction: column; }
    .abf-btn { width: 100%; text-align: center; }
    .abf-error { margin: 0 16px 10px; }
}