/* KAN-460: everything the full-service booking modal needs to look like
   itself, wherever it is included.
   ---------------------------------------------------------------------------
   The modal used to live inside en_nie_landing.html / en_cue_landing.html, so
   its styles lived in those pages' inline <style> blocks. Now that the markup
   is a shared partial (templates/en/components/booking/), the provider detail
   page includes the same modal and needs the same rules.

   This file is LINKED BEFORE those pages' inline <style>, so on /nie and /cue
   the page's own copies still win on equal specificity and those pages render
   exactly as they did. That duplication is deliberate: proving zero visual
   change on two live checkout pages is worth more than a tidy de-duplication,
   and removing the inline copies is a safe follow-up once someone can do a
   full visual pass. On the provider detail page these are the only copies.

   Values are copied verbatim from en_nie_landing.html - do not "improve" them
   here while the inline copies still exist, or the two surfaces will drift. */

/* Step reveal */
.flow-section { display: none; }
.flow-section.active { display: block; animation: revealSection 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes revealSection {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Step connector */
.step-line { flex: 1; height: 2px; background: var(--color-border); transition: background 0.4s; }
.step-line.done { background: var(--color-brand); }

/* Spinner */
.spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.35); border-top-color: white; border-radius: 50%; animation: spin 0.75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Form inputs */
.field { width: 100%; border: 1.5px solid var(--color-border); border-radius: 10px; padding: 10px 14px; font-size: 0.9375rem; color: var(--color-text-primary); background: var(--color-surface-raised); transition: border-color 0.2s, box-shadow 0.2s; }
.field:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 12%, transparent); }
.field::placeholder { color: var(--color-text-tertiary); }

/* Card-number-style spacing on the fake card field */
.card-field { letter-spacing: 0.08em; }

/* Success pulse */
@keyframes successPop { 0%{transform:scale(0.6);opacity:0} 70%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }
.success-pop { animation: successPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

/* Dates you cannot attend */
.date-chip { border: 1.5px solid var(--color-border); border-radius: 8px; padding: 8px 14px; font-size: 0.875rem; cursor: pointer; transition: all 0.15s; }
.date-chip:hover { border-color: var(--color-brand); background: var(--color-brand-bg-subtle); }
.date-chip.selected { border-color: var(--color-brand); background: var(--color-brand-bg); color: var(--color-brand-dark); font-weight: 600; }

/* Modal overlay */
#booking-modal { transition: opacity 0.25s ease; }
#booking-modal.hidden { opacity: 0; pointer-events: none; display: flex !important; visibility: hidden; }
#booking-modal:not(.hidden) { opacity: 1; visibility: visible; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(10,22,40,0.55); backdrop-filter: blur(4px); }
@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(36px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-panel { animation: modalSlideUp 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
#booking-modal.hidden .modal-panel { animation: none; }

/* Collapsible form sections */
.fsec { border: 1.5px solid var(--color-border); border-radius: 14px; overflow: hidden; background: var(--color-surface-raised); transition: border-color 0.25s; }
.fsec.fsec-active { border-color: var(--color-brand); }
.fsec.fsec-done { border-color: var(--color-brand); }
.fsec-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; background: transparent; border: none; cursor: pointer; gap: 12px; transition: background 0.15s; }
.fsec-btn:hover { background: var(--color-surface-muted); }
.fsec-num { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 700; flex-shrink: 0; background: var(--color-surface-muted); color: var(--color-text-secondary); transition: background 0.2s, color 0.2s; }
.fsec-num.active { background: var(--color-brand); color: #fff; }
.fsec-num.done { background: var(--color-brand); color: #fff; }
.fsec-body { max-height: 0; overflow: hidden; transition: max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
.fsec-body.open { max-height: 3200px; }
.fsec-arrow { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); flex-shrink: 0; color: var(--color-text-tertiary); }
.fsec-arrow.open { transform: rotate(180deg); }