/* ── gifting.css — /gifting page and booking form component ── */

/* ── Gift tiers grid ── */
.nara-gift-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
}
.nara-gift-card {
    background: var(--color-white);
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: background var(--transition);
}
.nara-gift-card:hover { background: var(--color-off-white); }
.nara-gift-card--featured { background: var(--color-off-white); }
.nara-gift-card__tier  { font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-gold); font-weight: 600; }
.nara-gift-card__name  { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700; }
.nara-gift-card__desc  { font-size: 0.78rem; color: #666; line-height: 1.7; flex: 1; }
.nara-gift-card__price { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; }

/* ── Occasion chips strip ── */
.nara-occ-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nara-occ-chip {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-border);
    font-size: 0.7rem;
    color: var(--color-muted);
    letter-spacing: 0.05em;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Booking form (nbf-*) — two-panel layout
   ══════════════════════════════════════════════════════════════════════════════ */

.nbf-wrap {
    background: #f9f7f4;
    border: 1px solid var(--color-border);
    margin-top: 2rem;
}
.nbf-form {
    display: grid;
    grid-template-columns: 1fr 500px;
    min-height: 600px;
}

/* ── Trust panel ── */
.nbf-trust {
    background: var(--color-white);
    border-right: 1px solid var(--color-border);
    padding: 3.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.nbf-geo-1 {
    position: absolute; top: -90px; right: -80px;
    width: 360px; height: 360px;
    border: 1px solid rgba(178,156,118,0.13);
    pointer-events: none;
    transform: perspective(900px) rotateX(22deg) rotateY(-18deg) rotateZ(6deg);
    transition: transform 0.6s ease;
}
.nbf-geo-2 {
    position: absolute; bottom: 60px; left: -60px;
    width: 200px; height: 200px;
    border: 1px solid rgba(178,156,118,0.07);
    pointer-events: none;
    transform: perspective(600px) rotateX(-18deg) rotateZ(14deg);
}
.nbf-lmark {
    position: absolute;
    font-family: var(--font-serif); font-size: 22rem; font-weight: 700; line-height: 1;
    color: rgba(178,156,118,0.04);
    bottom: -3rem; right: -0.5rem;
    pointer-events: none; user-select: none;
}
.nbf-brand { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700; position: relative; z-index: 2; }
.nbf-brand__sub { font-size: 0.58rem; font-family: var(--font-sans); letter-spacing: 0.26em; text-transform: uppercase; color: var(--color-gold); margin-top: 0.25rem; display: block; }
.nbf-trust__body { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 3rem 0 2rem; }
.nbf-trust__hl { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 400; line-height: 1.2; margin-bottom: 1rem; }
.nbf-trust__hl em { color: var(--color-gold); }
.nbf-trust__p { font-size: 0.8rem; color: #666; line-height: 1.85; max-width: 360px; margin-bottom: 2rem; }
.nbf-stats { display: flex; gap: 2rem; margin-bottom: 2rem; }
.nbf-stat-n { font-family: var(--font-serif); font-size: 1.5rem; display: block; }
.nbf-stat-l { font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-muted); margin-top: 0.1rem; display: block; }
.nbf-trust__foot { font-size: 0.65rem; color: var(--color-muted); position: relative; z-index: 2; line-height: 1.7; }

/* ── Form panel ── */
.nbf-panel { padding: 3.5rem 3rem; background: #f9f7f4; display: flex; flex-direction: column; }

/* WhatsApp bar */
.nbf-wa {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--color-white);
    border: 1px solid rgba(37,211,102,0.25);
    text-decoration: none; color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    margin-bottom: 1.75rem;
}
.nbf-wa:hover { border-color: rgba(37,211,102,0.5); box-shadow: 0 2px 12px rgba(37,211,102,0.08); }
.nbf-wa__dot { width: 9px; height: 9px; border-radius: 50%; background: #25d366; flex-shrink: 0; }
.nbf-wa__text { flex: 1; }
.nbf-wa__text strong { display: block; font-size: 0.73rem; font-weight: 600; color: var(--color-black); }
.nbf-wa__text span   { font-size: 0.65rem; color: #888; margin-top: 0.1rem; display: block; }
.nbf-wa__caret { font-size: 0.75rem; color: #25d366; }

/* Divider */
.nbf-divider {
    display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem;
}
.nbf-divider::before, .nbf-divider::after { content:''; flex:1; height:1px; background: var(--color-border); }
.nbf-divider span { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); white-space: nowrap; }

/* Progress */
.nbf-prog { display: flex; align-items: center; margin-bottom: 2rem; }
.nbf-pdot {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; font-weight: 600; color: var(--color-muted);
    transition: all 0.3s; flex-shrink: 0;
}
.nbf-pdot--active { border-color: var(--color-black); color: var(--color-black); }
.nbf-pdot--done   { border-color: var(--color-gold); background: var(--color-gold); color: var(--color-white); }
.nbf-pline { flex: 1; height: 1px; background: var(--color-border); transition: background 0.3s; }
.nbf-pline--done { background: var(--color-gold); }

/* Step typography */
.nbf-stitle { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 400; line-height: 1.2; margin-bottom: 0.45rem; }
.nbf-stitle em { font-style: italic; }
.nbf-ssub { font-size: 0.77rem; color: #777; line-height: 1.8; margin-bottom: 1.75rem; }

/* Service cards */
.nbf-svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; margin-bottom: 1.1rem; }
.nbf-svc--wide { grid-column: span 2; }
.nbf-svc {
    border: 1px solid var(--color-border); padding: 1.1rem; cursor: pointer;
    transition: all 0.2s; background: var(--color-white);
}
.nbf-svc:hover, .nbf-svc:focus { border-color: var(--color-gold); outline: none; }
.nbf-svc--selected { border-color: var(--color-gold); background: #fdfcfa; box-shadow: inset 0 0 0 1px rgba(178,156,118,0.2); }
.nbf-svc__tag  { font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold); font-weight: 600; display: block; margin-bottom: 0.35rem; }
.nbf-svc__name { font-family: var(--font-serif); font-size: 0.9rem; margin-bottom: 0.3rem; }
.nbf-svc__desc { font-size: 0.67rem; color: #777; line-height: 1.55; margin-bottom: 0.6rem; }
.nbf-svc__price { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* Occasion chips */
.nbf-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.35rem; }
.nbf-chip {
    padding: 0.42rem 0.85rem; border: 1px solid var(--color-border);
    font-size: 0.68rem; cursor: pointer; transition: all 0.2s; color: #555;
    background: var(--color-white); font-family: var(--font-sans);
}
.nbf-chip:hover { border-color: var(--color-gold); color: var(--color-black); }
.nbf-chip--selected { border-color: var(--color-gold); color: var(--color-gold); background: #fdfcfa; }

/* Fields — HIGH CONTRAST */
.nbf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 0.85rem; }
.nbf-row1 { grid-template-columns: 1fr; margin-bottom: 0.85rem; }
.nbf-fg { display: flex; flex-direction: column; }
.nbf-fl {
    font-size: 0.8125rem; /* 13px — WCAG AA at #555 on #f9f7f4 */
    letter-spacing: 0.12em; text-transform: uppercase;
    color: #555; margin-bottom: 0.35rem; display: block;
}
.nbf-fi {
    width: 100%; background: var(--color-white);
    border: 1px solid #b8b4ae; /* clearly visible mid-grey */
    color: var(--color-black);
    font-family: var(--font-sans); font-size: 16px; /* prevents iOS auto-zoom */
    padding: 0.75rem 0.85rem; outline: none; border-radius: 0;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none; appearance: none;
}
.nbf-fi::placeholder { color: #aaa; }
.nbf-fi:focus { border-color: var(--color-black); box-shadow: 0 0 0 2px rgba(0,0,0,0.06); }
textarea.nbf-fi { resize: none; min-height: 80px; line-height: 1.6; }

/* Summary */
.nbf-summ { border: 1px solid var(--color-border); background: var(--color-white); margin-bottom: 1.5rem; }
.nbf-summ__row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.75rem 1.15rem; border-bottom: 1px solid #f0ede8; }
.nbf-sl { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-muted); }
.nbf-sv { font-family: var(--font-serif); font-size: 0.9rem; }

/* Payment cards */
.nbf-pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; margin-bottom: 1.5rem; }
.nbf-pay {
    border: 1px solid var(--color-border); padding: 1.15rem; cursor: pointer;
    transition: all 0.2s; background: var(--color-white);
}
.nbf-pay:hover, .nbf-pay:focus { border-color: var(--color-gold); outline: none; }
.nbf-pay--selected { border-color: var(--color-black); box-shadow: inset 0 0 0 1px var(--color-black); }
.nbf-pay__ico  { font-size: 1.1rem; display: block; margin-bottom: 0.45rem; }
.nbf-pay__name { font-family: var(--font-serif); font-size: 0.88rem; margin-bottom: 0.3rem; }
.nbf-pay__note { font-size: 0.65rem; color: #888; line-height: 1.5; }

/* Button row */
.nbf-btn-row { display: flex; gap: 0.65rem; margin-top: 1.75rem; }

/* Error + fallback */
.nbf-error {
    padding: 0.75rem 1rem; border-left: 3px solid #c0392b;
    background: #fff5f5; font-size: 0.78rem; color: #c0392b;
    margin-top: 0.75rem; margin-bottom: 1rem;
}
.nbf-wa-fallback { font-size: 0.75rem; color: #666; margin-top: 0.5rem; }
.nbf-wa-fallback a { color: #25d366; text-decoration: underline; }

/* Reassurance note */
.nbf-reassure {
    display: flex; gap: 0.6rem; align-items: flex-start;
    margin-top: 1.25rem; padding: 0.85rem 1rem;
    border: 1px solid var(--color-border); background: var(--color-white);
    font-size: 0.68rem; color: #888; line-height: 1.7;
}

/* ── Responsive ── */
@media (max-width: 1023px) {
    .nara-gift-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
    .nbf-form   { grid-template-columns: 1fr; }
    .nbf-trust  { padding: 2.5rem 1.5rem; border-right: none; border-bottom: 1px solid var(--color-border); }
    .nbf-lmark  { font-size: 14rem; }
    .nbf-geo-1  { width: 200px; height: 200px; top: -50px; right: -50px; }
    .nbf-geo-2  { display: none; }
    .nbf-trust__hl { font-size: 1.5rem; }
    .nbf-trust__body { padding: 2rem 0 1.5rem; }
    .nbf-panel  { padding: 2rem 1.5rem 3rem; }
    .nbf-svc-grid  { grid-template-columns: 1fr; }
    .nbf-svc--wide { grid-column: span 1; }
    .nbf-pay-grid  { grid-template-columns: 1fr; }
    .nbf-row2   { grid-template-columns: 1fr; }
    .nbf-btn-row { flex-direction: column-reverse; }
    .nbf-stats  { gap: 1.25rem; }
}
@media (max-width: 767px) {
    .nara-gift-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
    .nbf-trust { padding: 2rem 1.25rem; }
    .nbf-panel { padding: 1.75rem 1.25rem 2.5rem; }
}