/**
 * FS Booking — Frontend CSS
 * v11 design, scoped to .fsb for Elementor/WP compatibility
 */

/* ── Elementor breakout ── */
/* Breakout not needed — .fsb uses position:fixed */

/* ── Scoped reset ── */
.fsb,
.fsb *,
.fsb *::before,
.fsb *::after {
    box-sizing: border-box !important;
}

.fsb [hidden] {
    display: none !important;
}

.fsb img {
    max-width: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.fsb button {
    font-family: 'Space Grotesk', sans-serif !important;
}

/* ── Shell ── */
.fsb {
    background: #09090B !important;
    color: #FAFAFA !important;
    font-family: 'Space Grotesk', sans-serif !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    -webkit-font-smoothing: antialiased !important;
    line-height: 1.4 !important;
    z-index: 9999 !important;
}

.fsb .shell {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
}

/* ── Animation ── */
@keyframes fsbUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Header ── */
.fsb .hdr {
    height: auto !important;
    padding: 12px 48px !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.04) !important;
    background: #09090B !important;
    position: relative !important;
    z-index: 1 !important;
}

.fsb .hdr-logo {
    height: 55px !important;
    object-fit: contain !important;
}

.fsb .hdr-nav {
    display: flex !important;
    gap: 28px !important;
    align-items: center !important;
}

.fsb .hdr-link {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,.35) !important;
    text-decoration: none !important;
    transition: color .2s !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    font-family: inherit !important;
    padding: 0 !important;
}

.fsb .hdr-link:hover {
    color: rgba(255,255,255,.7) !important;
}

.fsb .hdr-cta {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #09090B !important;
    background: #E8A43A !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all .2s !important;
    border: none !important;
    cursor: pointer !important;
    font-family: inherit !important;
}

.fsb .hdr-cta:hover {
    background: #F0B94E !important;
}

/* ── Blurred background ── */
.fsb .bg-blur {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    filter: blur(20px) brightness(.35) !important;
    transform: scale(1.2) !important;
    transition: opacity .6s !important;
    opacity: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.fsb .bg-blur.on {
    opacity: 1 !important;
}

/* ── Progress bar ── */
.fsb .prog {
    height: 3px !important;
    flex-shrink: 0 !important;
    background: rgba(255,255,255,.03) !important;
    position: relative !important;
    z-index: 1 !important;
}

.fsb .prog-fill {
    height: 100% !important;
    background: #E8A43A !important;
    transition: width .5s cubic-bezier(.4,0,.2,1) !important;
    border-radius: 0 2px 2px 0 !important;
}

/* ── Main content area ── */
.fsb .mid {
    flex: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 48px !important;
    position: relative !important;
    z-index: 1 !important;
    min-height: 84vh !important;
}

.fsb .mid.mid-done {
    padding-top: 48px !important;
    padding-bottom: 24px !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
}

.fsb .content {
    width: 100% !important;
    max-width: 1400px !important;
    animation: fsbUp .5s ease !important;
}

/* ── Bottom bar ── */
.fsb .bar {
    height: 48px !important;
    padding: 0 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    border-top: 1px solid rgba(255,255,255,.04) !important;
    position: relative !important;
    z-index: 1 !important;
}

.fsb .bar-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.fsb .bar-pr {
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
}

.fsb .bar-sub {
    font-size: 11px !important;
    color: rgba(255,255,255,.25) !important;
}

.fsb .bar-right {
    display: flex !important;
    gap: 6px !important;
}

/* ── Buttons ── */
.fsb .b {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all .2s !important;
    line-height: 1 !important;
}

.fsb .b:disabled {
    opacity: .1 !important;
    cursor: default !important;
}

.fsb .b-back {
    background: rgba(255,255,255,.05) !important;
    color: rgba(255,255,255,.4) !important;
}

.fsb .b-next {
    background: #E8A43A !important;
    color: #09090B !important;
}

.fsb .b-next:hover:not(:disabled) {
    background: #F0B94E !important;
    transform: translateY(-1px) !important;
}

.fsb .b-send {
    background: #16A34A !important;
    color: #fff !important;
}

/* ── Inputs ── */
.fsb .inp {
    width: 100% !important;
    background: rgba(255,255,255,.03) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 10px !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 15px !important;
    padding: 14px 16px !important;
    color: #FAFAFA !important;
    transition: border .2s !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.fsb .inp:focus {
    border-color: rgba(232,164,58,.25) !important;
    outline: none !important;
}

.fsb .inp.big {
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: .03em !important;
}

.fsb .inp.err {
    border-color: #EF4444 !important;
}

.fsb textarea.inp {
    min-height: 60px !important;
    resize: vertical !important;
    line-height: 1.4 !important;
}

.fsb .lbl {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.2) !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    margin: 0 0 4px !important;
    display: block !important;
}

/* ═══ STEP 1 — Wagon cards ═══ */
.fsb .cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    width: 100% !important;
}

.fsb .card {
    position: relative !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all .4s !important;
    border: 2px solid transparent !important;
    aspect-ratio: 4/3 !important;
}

.fsb .card:hover {
    border-color: rgba(255,255,255,.08) !important;
    transform: translateY(-2px) !important;
}

.fsb .card.on {
    border-color: #E8A43A !important;
}

.fsb .card img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform .6s !important;
}

.fsb .card:hover img {
    transform: scale(1.03) !important;
}

.fsb .card-grad {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(9,9,11,.9) 0%, rgba(9,9,11,.1) 60%) !important;
}

.fsb .card-ct {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 20px 24px !important;
}

.fsb .card-nm {
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
}

.fsb .card-pr {
    font-size: 16px !important;
    color: rgba(255,255,255,.35) !important;
    margin-top: 2px !important;
}

.fsb .card-pr b {
    color: rgba(255,255,255,.7) !important;
    font-weight: 700 !important;
}

/* ═══ STEP 2 — Map + postcode ═══ */
.fsb .s2-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    align-items: center !important;
    width: 100% !important;
}

.fsb .s2-map {
    background: rgba(255,255,255,.025) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 70vh !important;
    height: 100% !important;
    max-height: 70vh !important;
    position: relative !important;
    overflow: hidden !important;
}

.fsb .s2-map-inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.fsb .s2-map svg,
.fsb .s2-svg {
    width: 100% !important;
    height: auto !important;
    max-height: 60vh !important;
    overflow: visible !important;
    display: block !important;
}

.fsb .s2-region,
.fsb .s2-region-base {
    transition: fill .3s cubic-bezier(.23,1,.32,1), stroke .3s cubic-bezier(.23,1,.32,1) !important;
}

/* Rolling fill animation — clipPath rect uses scaleX transform for reliable SVG transitions */
.fsb .s2-cp-rect {
    transform: scaleX(0);
    transition: transform .55s cubic-bezier(.34, 1.2, .64, 1) !important;
}

.fsb .s2-region-fill {
    transition: opacity .25s ease !important;
}

/* Hit-test layer — picks up mouse events */
.fsb .s2-region-hit {
    transition: none !important;
}

/* Map hint — visible until user interacts */
.fsb .s2-map-hint {
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,.45) !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
    background: rgba(0,0,0,.5) !important;
    padding: 6px 12px !important;
    border-radius: 100px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: opacity .35s cubic-bezier(.23,1,.32,1) !important;
    animation: fsbHintFade .6s cubic-bezier(.23,1,.32,1) !important;
    z-index: 5 !important;
}
@keyframes fsbHintFade {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes fsbBlockFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fsbTipFade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Map tooltip — always in DOM, toggled via .is-visible class */
.fsb .s2-tip {
    position: absolute !important;
    z-index: 20 !important;
    background: #141416 !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 2px 12px rgba(232,164,58,.08) !important;
    pointer-events: none !important;
    min-width: 200px !important;
    max-width: 260px !important;
    opacity: 0 !important;
    transform: translateY(4px) !important;
    transition: opacity .2s cubic-bezier(.23,1,.32,1), transform .2s cubic-bezier(.23,1,.32,1) !important;
    visibility: hidden !important;
    left: 0 !important;
    top: 0 !important;
}
.fsb .s2-tip.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
}
/* Mobile / touch: pin tooltip to top-right corner of map (no cursor to follow) */
.fsb .s2-tip.is-mobile-pin {
    left: auto !important;
    right: 12px !important;
    top: 12px !important;
    bottom: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 24px) !important;
    width: 220px !important;
    transform: translateY(-4px) !important;
}
.fsb .s2-tip.is-mobile-pin.is-visible {
    transform: translateY(0) !important;
}
/* On very small screens, span full width below for legibility */
@media (max-width: 480px) {
    .fsb .s2-tip.is-mobile-pin {
        width: auto !important;
        right: 8px !important;
        top: 8px !important;
        max-width: 200px !important;
    }
}
.fsb .s2-tip-region {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #FAFAFA !important;
    letter-spacing: -.01em !important;
    margin: 0 0 2px !important;
}
.fsb .s2-tip-cities {
    font-size: 11px !important;
    color: rgba(255,255,255,.4) !important;
    margin: 0 0 8px !important;
    line-height: 1.4 !important;
}
.fsb .s2-tip-zone {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.75) !important;
    padding-top: 4px !important;
}
.fsb .s2-tip-zd {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #E8A43A !important;
    flex-shrink: 0 !important;
}
.fsb .s2-tip-pr {
    margin-left: auto !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #E8A43A !important;
}
.fsb .s2-tip-pr-incl {
    color: #4ADE80 !important;
}

.fsb .s2-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.fsb .s2-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
    margin: 0 0 4px !important;
}

.fsb .s2-sub {
    font-size: 13px !important;
    color: rgba(255,255,255,.45) !important;
    margin: 0 0 8px !important;
    line-height: 1.5 !important;
}

/* Postcode confirmed result */
.fsb .pcr {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    background: rgba(232,164,58,.1) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    animation: fsbBlockFade .35s cubic-bezier(.23,1,.32,1) !important;
}

.fsb .pcr-d {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #E8A43A !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 0 4px rgba(232,164,58,.12) !important;
}

.fsb .pcr-main {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.fsb .pcr-loc {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #FAFAFA !important;
    letter-spacing: -.005em !important;
}
.fsb .pcr-region {
    font-size: 11px !important;
    color: rgba(255,255,255,.4) !important;
    margin-top: 1px !important;
}
.fsb .pcr-zone {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #E8A43A !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    background: rgba(232,164,58,.08) !important;
    padding: 5px 9px !important;
    border-radius: 100px !important;
}

/* Postcode error state */
.fsb .pcr-err {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    background: rgba(239,68,68,.08) !important;
    color: #F87171 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* Pricebox — clear breakdown */
.fsb .s2-pricebox {
    margin-top: 4px !important;
    padding: 16px 18px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.025) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    animation: fsbTipFade .35s cubic-bezier(.23,1,.32,1) !important;
}
.fsb .s2-pb-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 13px !important;
    color: rgba(255,255,255,.55) !important;
    line-height: 1.4 !important;
}
.fsb .s2-pb-row-add {
    color: #E8A43A !important;
}
.fsb .s2-pb-row-incl .s2-pb-val-incl {
    color: #4ADE80 !important;
    font-weight: 600 !important;
}
.fsb .s2-pb-label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.fsb .s2-pb-tag {
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    background: rgba(232,164,58,.12) !important;
    color: #E8A43A !important;
    padding: 2px 7px !important;
    border-radius: 100px !important;
}
.fsb .s2-pb-val {
    font-weight: 600 !important;
    color: rgba(255,255,255,.75) !important;
}
.fsb .s2-pb-val-add {
    color: #E8A43A !important;
    font-weight: 700 !important;
}
.fsb .s2-pb-divider {
    height: 1px !important;
    background: rgba(255,255,255,.05) !important;
    margin: 4px 0 !important;
}
.fsb .s2-pb-row-total {
    align-items: baseline !important;
    margin-top: 2px !important;
}
.fsb .s2-pb-label-total {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.85) !important;
}
.fsb .s2-pb-val-total {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #FAFAFA !important;
    letter-spacing: -.02em !important;
}

/* Zone info collapsible */
.fsb .s2-zinfo-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255,255,255,.45) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all .25s cubic-bezier(.23,1,.32,1) !important;
    text-align: left !important;
}
.fsb .s2-zinfo-toggle:hover {
    background: rgba(255,255,255,.025) !important;
    color: rgba(255,255,255,.7) !important;
}
.fsb .s2-zinfo-toggle span {
    flex: 1 !important;
}
.fsb .s2-zinfo-chev {
    transition: transform .3s cubic-bezier(.23,1,.32,1) !important;
}
.fsb .s2-zinfo-toggle.is-open .s2-zinfo-chev {
    transform: rotate(180deg) !important;
}
.fsb .s2-zinfo-toggle.is-open {
    color: rgba(255,255,255,.7) !important;
    background: rgba(255,255,255,.025) !important;
}
.fsb .s2-zinfo-panel {
    padding: 12px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.02) !important;
    animation: fsbTipFade .3s cubic-bezier(.23,1,.32,1) !important;
}
.fsb .s2-zinfo-intro {
    font-size: 12px !important;
    color: rgba(255,255,255,.55) !important;
    line-height: 1.5 !important;
    margin: 0 0 12px !important;
}

/* Zone list (inside collapsible) */
.fsb .zlist {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.fsb .zc {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.025) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all .25s cubic-bezier(.23,1,.32,1) !important;
    width: 100% !important;
    text-align: left !important;
    font-family: 'Space Grotesk', sans-serif !important;
    color: #FAFAFA !important;
}

.fsb .zc:hover {
    background: rgba(255,255,255,.05) !important;
}

.fsb .zc.on {
    background: rgba(232,164,58,.12) !important;
}

.fsb .zc-d {
    width: 4px !important;
    height: 24px !important;
    border-radius: 2px !important;
    background: rgba(255,255,255,.06) !important;
    transition: all .3s !important;
    flex-shrink: 0 !important;
}

.fsb .zc.on .zc-d {
    background: #E8A43A !important;
}

.fsb .zc-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.fsb .zc-nm {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.7) !important;
    transition: color .2s !important;
}

.fsb .zc.on .zc-nm {
    color: #FAFAFA !important;
}

.fsb .zc-lb {
    font-size: 11px !important;
    color: rgba(255,255,255,.3) !important;
    margin-top: 1px !important;
    line-height: 1.3 !important;
}

.fsb .zc.on .zc-lb {
    color: rgba(255,255,255,.45) !important;
}

.fsb .zc-pct {
    margin-left: auto !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,.35) !important;
}

.fsb .zc.on .zc-pct {
    color: #E8A43A !important;
}

/* ═══ STEP 3 — Calendar ═══ */
.fsb .s3-wrap {
    display: grid !important;
    grid-template-columns: 1.3fr 1fr !important;
    gap: 40px !important;
    align-items: center !important;
    width: 100% !important;
}

.fsb .calbox {
    background: rgba(255,255,255,.03) !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 24px !important;
}

.fsb .calnav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 0 14px !important;
}

.fsb .ca {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    background: transparent !important;
    color: rgba(255,255,255,.3) !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Space Grotesk', sans-serif !important;
}

.fsb .ca:hover {
    background: rgba(255,255,255,.04) !important;
    color: #fff !important;
}

.fsb .cm {
    font-size: 18px !important;
    font-weight: 700 !important;
}

.fsb .calh {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px !important;
    margin: 0 0 4px !important;
}

.fsb .calh span {
    text-align: center !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.12) !important;
    padding: 4px 0 !important;
}

.fsb .cg {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

.fsb .cd {
    aspect-ratio: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    border: none !important;
    font-size: 14px !important;
    cursor: pointer !important;
    background: transparent !important;
    color: rgba(255,255,255,.25) !important;
    transition: all .15s !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 500 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.fsb .cd:hover:not(.dis):not(.mt):not(.sel):not(.inr) {
    background: rgba(255,255,255,.04) !important;
    color: #fff !important;
}

.fsb .cd:active:not(.dis):not(.mt):not(.sel):not(.inr) {
    background: rgba(232,164,58,.25) !important;
    color: #fff !important;
    transform: scale(.93) !important;
}

/* Ensure sel ALWAYS shows gold — even when focused/active after tap */
.fsb .cd.sel,
.fsb .cd.sel:hover,
.fsb .cd.sel:focus,
.fsb .cd.sel:active {
    background: #E8A43A !important;
    color: #09090B !important;
    font-weight: 700 !important;
    outline: none !important;
    box-shadow: 0 4px 16px rgba(232,164,58,.3) !important;
}

.fsb .cd.inr,
.fsb .cd.inr:hover,
.fsb .cd.inr:focus {
    background: rgba(232,164,58,.12) !important;
    color: #E8A43A !important;
}

.fsb .cd.mt {
    cursor: default !important;
}

.fsb .cd.dis {
    opacity: .08 !important;
    cursor: default !important;
}

.fsb .cd.pk {
    color: #E8A43A !important;
    background: rgba(232,164,58,.06) !important;
}

.fsb .cd .pt {
    font-size: 5px !important;
    font-weight: 700 !important;
    opacity: .5 !important;
    text-transform: uppercase !important;
}

/* Right panel (step 3) */
.fsb .s3-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.fsb .ctx {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.02) !important;
    border: none !important;
}

.fsb .ctx img {
    height: 80px !important;
    object-fit: contain !important;
    opacity: .8 !important;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.4)) !important;
}

.fsb .ctx-nm {
    font-size: 18px !important;
    font-weight: 700 !important;
}

.fsb .ctx-sub {
    font-size: 13px !important;
    color: rgba(255,255,255,.25) !important;
}

/* Info panels */
.fsb .info {
    background: rgba(255,255,255,.04) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 16px !important;
}

.fsb .info-lbl {
    font-size: 9px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.15) !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    margin: 0 0 8px !important;
}

.fsb .info-row {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 12px !important;
    color: rgba(255,255,255,.25) !important;
    margin: 0 0 3px !important;
}

.fsb .info-div {
    height: 1px !important;
    background: rgba(255,255,255,.04) !important;
    margin: 8px 0 !important;
}

.fsb .info-tot {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
}

/* ═══ STEP 4 — Form ═══ */
.fsb .s4-wrap {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr !important;
    gap: 32px !important;
    align-items: stretch !important;
    width: 100% !important;
}

.fsb .s4-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
    margin: 0 0 4px !important;
}

.fsb .s4-sub {
    font-size: 13px !important;
    color: rgba(255,255,255,.3) !important;
    margin: 0 0 16px !important;
}

.fsb .frow {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
}

/* ═══ Done state ═══ */
.fsb .done-wrap {
    text-align: center !important;
    width: 100% !important;
    padding: 0 9% !important;
    box-sizing: border-box !important;
}

.fsb .done-header {
    margin: 0 0 40px !important;
}

.fsb .done-ico {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: #16A34A !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    margin: 0 0 16px !important;
}

.fsb .done-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.02em !important;
    color: #fff !important;
}

.fsb .done-subtitle {
    color: rgba(255,255,255,.35) !important;
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}
.fsb .done-subtitle strong {
    color: rgba(255,255,255,.6) !important;
}

/* ── Grid ── */
.fsb .done-grid {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr !important;
    gap: 48px !important;
    text-align: left !important;
    width: 100% !important;
    align-items: start !important;
}

.fsb .done-right {
    position: sticky !important;
    top: 32px !important;
    align-self: start !important;
}

/* ── Section labels ── */
.fsb .done-section-label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: rgba(255,255,255,.2) !important;
    margin: 0 0 20px !important;
}

/* ── Left column ── */
.fsb .done-wagon-row {
    display: flex !important;
    gap: 16px !important;
    align-items: center !important;
    margin: 0 0 4px !important;
}
.fsb .done-wagon-img {
    height: 56px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.4)) !important;
}
.fsb .done-wagon-name {
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #fff !important;
}
.fsb .done-wagon-zone {
    font-size: 12px !important;
    color: rgba(255,255,255,.25) !important;
    margin-top: 3px !important;
}

.fsb .done-divider {
    height: 1px !important;
    background: rgba(255,255,255,.06) !important;
    margin: 16px 0 !important;
}

.fsb .done-row {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 14px !important;
    color: rgba(255,255,255,.35) !important;
    padding: 5px 0 !important;
}
.fsb .done-row--peak { color: #E8A43A !important; }
.fsb .done-row--discount { color: #4ADE80 !important; }

.fsb .done-total-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    padding: 3px 0 !important;
    font-size: 14px !important;
    color: rgba(255,255,255,.3) !important;
}
.fsb .done-total-price {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #fff !important;
}
.fsb .done-per-student {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #E8A43A !important;
}

.fsb .done-actions {
    display: flex !important;
    gap: 12px !important;
    margin-top: 28px !important;
    flex-wrap: wrap !important;
}
.fsb .done-btn {
    font-size: 14px !important;
    padding: 12px 24px !important;
    text-decoration: none !important;
    text-align: center !important;
}

/* ── Right column — steps ── */
.fsb .done-step {
    display: flex !important;
    gap: 14px !important;
    margin: 0 0 24px !important;
    align-items: flex-start !important;
}

.fsb .done-step-num {
    min-width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(232,164,58,.08) !important;
    color: #E8A43A !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

.fsb .done-step-body {
    flex: 1 !important;
}

.fsb .done-step-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.8) !important;
    margin: 0 0 4px !important;
}

.fsb .done-step-desc {
    font-size: 13px !important;
    color: rgba(255,255,255,.3) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.fsb .done-email-link {
    display: inline-block !important;
    margin-top: 6px !important;
    color: #E8A43A !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.fsb .done-email-link:hover {
    text-decoration: underline !important;
    background-color: transparent !important;
}

/* ── Info blocks ── */
.fsb .done-info-block {
    margin: 0 0 12px !important;
}
.fsb .done-info-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #E8A43A !important;
    margin: 0 0 6px !important;
}
.fsb .done-info-text {
    font-size: 13px !important;
    color: rgba(255,255,255,.35) !important;
    line-height: 1.6 !important;
}
.fsb .done-info-block--muted .done-info-text {
    font-size: 12px !important;
    color: rgba(255,255,255,.2) !important;
}

/* ═══ "Hvad sker der nu?" CTA button ═══ */
.fsb .done-next-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 20px 24px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(232,164,58,.15) !important;
    background: linear-gradient(135deg, rgba(232,164,58,.08), rgba(232,164,58,.03)) !important;
    cursor: pointer !important;
    transition: all .2s !important;
    font-family: 'Space Grotesk', sans-serif !important;
    text-align: left !important;
}
.fsb .done-next-btn:hover {
    background: linear-gradient(135deg, rgba(232,164,58,.14), rgba(232,164,58,.06)) !important;
    border-color: rgba(232,164,58,.25) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(232,164,58,.1) !important;
}
.fsb .done-next-btn:active {
    transform: scale(.98) !important;
    background: linear-gradient(135deg, rgba(232,164,58,.14), rgba(232,164,58,.06)) !important;
    border-color: rgba(232,164,58,.25) !important;
}
.fsb .done-next-ico {
    font-size: 28px !important;
    flex-shrink: 0 !important;
}
.fsb .done-next-label {
    flex: 1 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,.85) !important;
    letter-spacing: -.01em !important;
}
.fsb .done-next-arrow {
    font-size: 20px !important;
    color: #E8A43A !important;
    flex-shrink: 0 !important;
    transition: transform .2s !important;
}
.fsb .done-next-btn:hover .done-next-arrow {
    transform: translateX(4px) !important;
}

/* ═══ Modal overlay + panel ═══ */
.fsb .done-modal-overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 100 !important;
    background: rgba(0,0,0,.7) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
}
.fsb .done-modal-overlay.open {
    display: flex !important;
}
.fsb .done-modal {
    background: #151518 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 20px !important;
    max-width: 560px !important;
    width: 100% !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    animation: modalIn .25s ease !important;
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.fsb .done-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    position: sticky !important;
    top: 0 !important;
    background: #151518 !important;
    border-radius: 20px 20px 0 0 !important;
    z-index: 2 !important;
}
.fsb .done-modal-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
}
.fsb .done-modal-close {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    background: rgba(255,255,255,.04) !important;
    color: rgba(255,255,255,.4) !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .15s !important;
}
.fsb .done-modal-close:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}
.fsb .done-modal-body {
    padding: 24px !important;
}



/* Step 3 right column - light panel */
.fsb .s3-panel {
    background: rgba(255,255,255,.05) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.fsb .s3-panel .ctx {
    background: transparent !important;
}

.fsb .s3-panel .info {
    background: rgba(255,255,255,.04) !important;
}


/* ── Booked days ── */
.fsb .cd.bkd,
.fsb button.cd.bkd,
.fsb .cd.bkd.dis,
.fsb button.cd.bkd.dis {
    background: rgba(220,38,38,.18) !important;
    color: rgba(220,38,38,.9) !important;
    cursor: not-allowed !important;
    position: relative !important;
    opacity: 1 !important;
    border: 1px solid rgba(220,38,38,.25) !important;
}

.fsb .cd.bkd span,
.fsb .cd.bkd.dis span {
    color: rgba(220,38,38,.7) !important;
    text-decoration: line-through !important;
}

.fsb .cd .bt,
.fsb button.cd .bt {
    font-size: 7px !important;
    font-weight: 800 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    color: rgba(220,38,38,.9) !important;
    text-decoration: none !important;
}

/* ── Responsive utility ── */
.fsb .mob-only {
    display: none !important;
}

/* ═══ Step 4 heading ═══ */
.fsb .s4-heading {
    text-align: center !important;
    margin: 0 0 20px !important;
}
.fsb .s4-h1 {
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: -.03em !important;
    margin: 0 0 4px !important;
}
.fsb .s4-hsub {
    font-size: 13px !important;
    color: rgba(255,255,255,.3) !important;
    margin: 0 !important;
}

/* ═══ Optaget CTA (under calendar grid) ═══ */
.fsb .cal-optaget {
    display: none !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    margin-top: 8px !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.03) !important;
    flex-wrap: nowrap !important;
}
.fsb .cal-optaget-txt {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.4) !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}
.fsb .cal-optaget-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 10px !important;
    background: rgba(232,164,58,.15) !important;
    color: #E8A43A !important;
    border-radius: 5px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.fsb .cal-optaget-btn:hover {
    background: rgba(232,164,58,.25) !important;
}
.fsb .cal-optaget-tel {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 10px !important;
    background: rgba(255,255,255,.04) !important;
    color: rgba(255,255,255,.4) !important;
    border-radius: 5px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* ═══ Festive multi-day discount breakup ═══ */
.fsb .fs-multiday {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 12px !important;
    padding: 16px 20px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(232,164,58,.1) 0%, rgba(232,164,58,.03) 50%, rgba(232,164,58,.08) 100%) !important;
    border: 1px solid rgba(232,164,58,.15) !important;
    position: relative !important;
    overflow: hidden !important;
}
.fsb .fs-multiday::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: radial-gradient(ellipse at 30% 50%, rgba(232,164,58,.08) 0%, transparent 60%) !important;
    animation: fsMdShimmer 4s ease-in-out infinite !important;
    pointer-events: none !important;
}
@keyframes fsMdShimmer {
    0%, 100% { transform: translateX(-10%); opacity: .5; }
    50% { transform: translateX(10%); opacity: 1; }
}
.fsb .fs-multiday-sparks {
    font-size: 20px !important;
    color: #E8A43A !important;
    flex-shrink: 0 !important;
    animation: fsMdSpark 2s ease-in-out infinite !important;
    position: relative !important;
    z-index: 1 !important;
}
.fsb .fs-multiday-sparks:last-child {
    animation-delay: 1s !important;
}
@keyframes fsMdSpark {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: .6; }
    50% { transform: scale(1.3) rotate(15deg); opacity: 1; }
}
.fsb .fs-multiday-content {
    flex: 1 !important;
    text-align: center !important;
    position: relative !important;
    z-index: 1 !important;
}
.fsb .fs-multiday-badge {
    display: inline-block !important;
    background: #E8A43A !important;
    color: #09090B !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    letter-spacing: .08em !important;
    margin-bottom: 6px !important;
}
.fsb .fs-multiday-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: -.01em !important;
    margin-bottom: 4px !important;
}
.fsb .fs-multiday-sub {
    font-size: 12px !important;
    color: rgba(255,255,255,.4) !important;
    line-height: 1.4 !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .fsb .fs-multiday {
        padding: 14px 16px !important;
        gap: 10px !important;
    }
    .fsb .fs-multiday-title {
        font-size: 14px !important;
    }
    .fsb .fs-multiday-sub {
        font-size: 11px !important;
    }
    .fsb .fs-multiday-sparks {
        font-size: 16px !important;
    }
}

/* ═══ Mobile compact summary under calendar ═══ */
.fsb .cal-mob-summary {
    margin-top: 10px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.04) !important;
}
.fsb .cal-mob-row {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.7) !important;
    margin-bottom: 4px !important;
}
.fsb .cal-mob-note {
    font-size: 11px !important;
    color: #E8A43A !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}
.fsb .cal-mob-price {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #E8A43A !important;
}
.fsb .cal-mob-price small {
    font-size: 10px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,.3) !important;
    margin-left: 3px !important;
}

/* Logo link (continued) */
.fsb .hdr-logo-link {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    margin-right: auto !important;
}


/* ── Terms checkbox ── */
.fsb .terms {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 16px 0 0 !important;
    cursor: pointer !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.02) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    transition: all .2s !important;
}

.fsb .terms:hover {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.1) !important;
}

.fsb .terms input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.fsb .terms-check {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 5px !important;
    border: 2px solid rgba(255,255,255,.15) !important;
    background: rgba(255,255,255,.03) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .2s !important;
    margin-top: 1px !important;
}

.fsb .terms input:checked + .terms-check {
    background: #E8A43A !important;
    border-color: #E8A43A !important;
}

.fsb .terms input:checked + .terms-check::after {
    content: '✓' !important;
    color: #09090B !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.fsb .terms-txt {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: rgba(255,255,255,.4) !important;
}

.fsb .terms-txt strong {
    color: rgba(255,255,255,.7) !important;
    font-weight: 700 !important;
}

.fsb .terms input:checked ~ .terms-txt {
    color: rgba(255,255,255,.55) !important;
}

/* ── Done screen ── */
/* ── Loading spinner ── */
.fsb .spinner {
    width: 24px !important;
    height: 24px !important;
    border: 2px solid rgba(255,255,255,.06) !important;
    border-top-color: #E8A43A !important;
    border-radius: 50% !important;
    animation: fsbSpin .6s linear infinite !important;
    margin: 0 auto !important;
}

@keyframes fsbSpin {
    to { transform: rotate(360deg); }
}

/* ── Autocomplete dropdown ── */
/* Search input wrapper */
.fsb .ac-wrap {
    position: relative !important;
    z-index: 5 !important;
}
.fsb .ac-wrap.ac-open {
    z-index: 60 !important;
}
.fsb .ac-input-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}
.fsb .ac-icon {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    color: rgba(255,255,255,.35) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    transition: color .25s !important;
}
.fsb .ac-input-wrap:focus-within .ac-icon {
    color: #E8A43A !important;
}
.fsb .ac-inp {
    padding-left: 46px !important;
    padding-right: 44px !important;
}
.fsb .ac-clear {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.08) !important;
    border: none !important;
    color: rgba(255,255,255,.55) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all .2s !important;
    z-index: 2 !important;
    padding: 0 !important;
}
.fsb .ac-clear svg {
    width: 14px !important;
    height: 14px !important;
}
.fsb .ac-clear:hover {
    background: rgba(255,255,255,.15) !important;
    color: #FAFAFA !important;
}
.fsb .ac-spin {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(232,164,58,.2) !important;
    border-top-color: #E8A43A !important;
    animation: fsbSpin .7s linear infinite !important;
    z-index: 2 !important;
}
@keyframes fsbSpin {
    to { transform: translateY(-50%) rotate(360deg); }
}

.fsb .ac-drop {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    background: #141416 !important;
    border-radius: 12px !important;
    z-index: 50 !important;
    overflow: hidden !important;
    box-shadow: 0 16px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    animation: fsbDropFade .2s cubic-bezier(.23,1,.32,1) !important;
}
@keyframes fsbDropFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.fsb .ac-empty {
    padding: 16px 18px !important;
    color: rgba(255,255,255,.4) !important;
    font-size: 12px !important;
    font-style: italic !important;
    text-align: center !important;
}

.fsb .ac-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px 14px !important;
    border: none !important;
    background: none !important;
    color: rgba(255,255,255,.75) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: background .15s !important;
}

.fsb .ac-item:hover,
.fsb .ac-item.ac-item-sel {
    background: rgba(232,164,58,.08) !important;
}

.fsb .ac-code {
    font-weight: 700 !important;
    color: #FAFAFA !important;
    min-width: 38px !important;
    font-variant-numeric: tabular-nums !important;
}

.fsb .ac-city {
    flex: 1 !important;
    color: rgba(255,255,255,.65) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.fsb .ac-zone-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 1px !important;
    flex-shrink: 0 !important;
}

.fsb .ac-zone {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.4) !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

.fsb .ac-pr {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #E8A43A !important;
}
.fsb .ac-pr-incl {
    color: #4ADE80 !important;
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN
   Strategy: Desktop = position:fixed, 100vh locked, no scroll
             Mobile  = position:fixed stays, but .mid becomes scrollable
   ════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤1200px) — reduce padding ── */
@media (max-width: 1200px) {
    .fsb .mid {
        padding: 0 32px !important;
    }
    .fsb .hdr {
        padding: 12px 32px !important;
    }
    .fsb .bar {
        padding: 0 32px !important;
    }
}

/* ── Small laptop (≤1024px) — tighter spacing ── */
@media (max-width: 1024px) {
    .fsb .mid {
        padding: 0 24px !important;
    }
    .fsb .hdr {
        padding: 10px 24px !important;
    }
    .fsb .bar {
        padding: 0 24px !important;
    }
    .fsb .s2-wrap {
        gap: 24px !important;
    }
    .fsb .s3-wrap {
        gap: 24px !important;
    }
    .fsb .s4-wrap {
        gap: 24px !important;
    }
    .fsb .hdr-nav {
        gap: 18px !important;
    }
    .fsb .hdr-link {
        font-size: 12px !important;
    }
}

/* ═══ Step 5 summary panel (desktop) ═══ */
.fsb .s5-summary {
    position: relative !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    height: 100% !important;
    min-height: 400px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}
.fsb .s5-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: brightness(.6) !important;
}
.fsb .s5-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(9,9,11,.85) 0%, rgba(9,9,11,.2) 40%, transparent 70%) !important;
}
.fsb .s5-inner {
    position: relative !important;
    padding: 28px !important;
}
.fsb .s5-wagon-row {
    display: flex !important;
    gap: 16px !important;
    align-items: center !important;
    margin: 0 0 16px !important;
}
.fsb .s5-wagon-img {
    height: 80px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 6px 20px rgba(0,0,0,.6)) !important;
}
.fsb .s5-wagon-name {
    font-weight: 700 !important;
    font-size: 22px !important;
}
.fsb .s5-wagon-sub {
    font-size: 13px !important;
    color: rgba(255,255,255,.35) !important;
    margin-top: 2px !important;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE (≤768px)
   Strategy: Show only what's needed per step. Bottom bar already
   shows price info, so panels/summaries are hidden or minimal.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Layout ── */
    .fsb {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .fsb .shell {
        height: auto !important;
        min-height: 100vh !important;
        overflow: visible !important;
    }
    .fsb .mid {
        overflow: visible !important;
        align-items: flex-start !important;
        padding: 12px 14px 140px !important;
        min-height: auto !important;
        flex: 1 1 auto !important;
    }
    .fsb .content {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .fsb .bg-blur {
        position: fixed !important;
    }
    .fsb .bg-blur.on {
        filter: blur(12px) brightness(.35) !important;
    }

    /* ── Header: logo + Book nu CTA only ── */
    .fsb .hdr {
        padding: 8px 14px !important;
    }
    .fsb .hdr-logo {
        height: 32px !important;
    }
    .fsb .hdr-link {
        display: none !important;
    }
    .fsb .hdr-cta {
        font-size: 11px !important;
        padding: 6px 14px !important;
    }

    /* ── Progress ── */
    .fsb .prog { height: 2px !important; }

    /* ── Bottom bar ── */
    .fsb .bar {
        position: fixed !important;
        bottom: 0 !important; left: 0 !important; right: 0 !important;
        height: auto !important;
        padding: 16px 18px 16px 18px !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        background: linear-gradient(to top, #09090B 80%, rgba(9,9,11,.95)) !important;
        border-top: 1px solid rgba(255,255,255,.08) !important;
        z-index: 999990 !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,.5) !important;
    }
    .fsb .bar-left {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: baseline !important;
        gap: 8px !important;
    }
    .fsb .bar-right {
        flex: 1 1 100% !important;
        display: flex !important;
        gap: 8px !important;
    }
    .fsb .bar-right .b {
        flex: 1 1 0 !important;
    }
    .fsb .bar-pr { font-size: 22px !important; }
    .fsb .bar-sub {
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: rgba(255,255,255,.35) !important;
    }
    .fsb .b {
        padding: 14px 20px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }

    /* ═══ STEP 1: Wagons ═══ */
    .fsb .cards {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .fsb .card {
        aspect-ratio: 14/9 !important;
        border-radius: 12px !important;
    }
    .fsb .card-nm { font-size: 17px !important; }
    .fsb .card-pr { font-size: 13px !important; }

    /* ── Show mobile-only elements ── */
    .fsb .mob-only {
        display: block !important;
    }
    .fsb .cal-optaget.mob-only {
        display: flex !important;
    }

    /* ═══ STEP 2: Zone — hide zone list, keep map + postnr ═══ */
    .fsb .s2-wrap {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .fsb .s2-map {
        min-height: auto !important;
        max-height: none !important;
        height: auto !important;
        padding: 8px !important;
        border-radius: 12px !important;
    }
    .fsb .s2-map svg {
        width: 100% !important;
        height: auto !important;
        max-height: 380px !important;
    }
    .fsb .s2-map-hint {
        font-size: 10px !important;
        padding: 5px 10px !important;
    }
    .fsb .s2-tip {
        min-width: 180px !important;
        max-width: 220px !important;
        padding: 10px 12px !important;
    }
    .fsb .s2-title { font-size: 20px !important; }
    .fsb .s2-sub { font-size: 12px !important; }
    .fsb .inp.big {
        font-size: 18px !important;
        padding: 12px 14px !important;
    }
    .fsb .ac-inp {
        padding-left: 42px !important;
        padding-right: 40px !important;
    }
    .fsb .pcr {
        padding: 12px 14px !important;
    }
    .fsb .pcr-loc {
        font-size: 13px !important;
    }
    .fsb .pcr-zone {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
    .fsb .s2-pricebox {
        padding: 14px !important;
    }
    .fsb .s2-pb-val-total {
        font-size: 20px !important;
    }
    /* Zone info collapsible — keep visible on mobile so users understand zones */
    /* (Previously zlist was hidden — now it's tucked inside the collapsible toggle) */

    /* ═══ STEP 3: Antal — more breathing room ═══ */
    .fsb .content > div[style*="max-width:500px"] {
        padding: 16px 8px 0 !important;
    }
    .fsb .elev-slider { margin: 0 !important; }

    /* ═══ STEP 4: Calendar heading (always visible) ═══ */
    .fsb .s4-heading {
        text-align: center !important;
        margin-bottom: 12px !important;
    }
    .fsb .s4-h1 {
        font-size: 22px !important;
    }
    .fsb .s4-hsub {
        font-size: 12px !important;
    }

    /* ═══ STEP 4: Calendar — hide desktop info panel ═══ */
    .fsb .s3-wrap {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .fsb .s3-info {
        display: none !important;
    }
    .fsb .calbox {
        padding: 10px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        max-width: 100% !important;
    }
    .fsb .calnav { margin: 0 0 8px !important; }
    .fsb .cm { font-size: 15px !important; }
    .fsb .ca { width: 30px !important; height: 30px !important; font-size: 16px !important; }
    .fsb .calh { gap: 2px !important; }
    .fsb .calh span { font-size: 9px !important; }
    .fsb .cg { gap: 3px !important; max-width: 100% !important; overflow: hidden !important; }
    .fsb .cd { font-size: 12px !important; border-radius: 6px !important; }
    .fsb .cd .pt { font-size: 5px !important; }
    .fsb .cd .bt { font-size: 6px !important; letter-spacing: .04em !important; }

    /* ═══ STEP 5: Form only — hide summary ═══ */
    .fsb .s4-wrap {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .fsb .s5-summary {
        display: none !important;
    }
    .fsb .s4-title { font-size: 20px !important; }
    .fsb .s4-sub { font-size: 12px !important; margin-bottom: 12px !important; }
    .fsb .frow {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .fsb .lbl { font-size: 10px !important; }
    .fsb .inp {
        font-size: 14px !important;
        padding: 10px 12px !important;
        border-radius: 8px !important;
    }
    .fsb .terms-txt { font-size: 11px !important; }

    /* ═══ DONE — no sticky bar, normal padding ═══ */
    .fsb .mid.mid-done {
        padding-bottom: 24px !important;
    }
    .fsb .done-wrap { padding: 0 !important; }
    .fsb .done-header { margin-bottom: 16px !important; }
    .fsb .done-ico { width: 40px !important; height: 40px !important; font-size: 18px !important; }
    .fsb .done-title { font-size: 20px !important; }
    .fsb .done-subtitle { font-size: 12px !important; }
    .fsb .done-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .fsb .done-right { position: static !important; }
    .fsb .done-section-label { font-size: 10px !important; margin-bottom: 12px !important; }
    .fsb .done-wagon-img { height: 36px !important; }
    .fsb .done-wagon-name { font-size: 16px !important; }
    .fsb .done-wagon-zone { font-size: 11px !important; }
    .fsb .done-row { font-size: 12px !important; padding: 3px 0 !important; }
    .fsb .done-total-price { font-size: 20px !important; }
    .fsb .done-per-student { font-size: 16px !important; }
    .fsb .done-actions {
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 16px !important;
    }
    .fsb .done-btn { width: 100% !important; text-align: center !important; }
    .fsb .done-next-btn {
        padding: 14px 16px !important;
        border-radius: 12px !important;
        gap: 12px !important;
    }
    .fsb .done-next-ico { font-size: 22px !important; }
    .fsb .done-next-label { font-size: 15px !important; }

    /* ── Modal: FULLSCREEN on mobile ── */
    .fsb .done-modal-overlay { padding: 0 !important; }
    .fsb .done-modal {
        border-radius: 0 !important;
        max-height: 100vh !important;
        height: 100vh !important;
        max-width: 100% !important;
    }
    .fsb .done-modal-header { padding: 16px !important; border-radius: 0 !important; }
    .fsb .done-modal-body { padding: 16px 16px 40px !important; }
    .fsb .done-step { margin-bottom: 16px !important; gap: 10px !important; }
    .fsb .done-step-num { min-width: 28px !important; height: 28px !important; font-size: 12px !important; }
    .fsb .done-step-title { font-size: 14px !important; }
    .fsb .done-step-desc { font-size: 12px !important; }
}

/* ════════════════════════════════════════════════════════════════
   SMALL PHONE (≤400px) — extra compact
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
    .fsb .hdr-logo { height: 28px !important; }
    .fsb .hdr-cta { display: none !important; }
    .fsb .mid { padding: 10px 10px 140px !important; }
    .fsb .bar { padding: 14px 14px !important; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
    .fsb .bar-pr { font-size: 20px !important; }
    .fsb .b { padding: 12px 16px !important; font-size: 13px !important; }
    .fsb .cd { font-size: 11px !important; }
    .fsb .s2-map svg { max-height: 300px !important; }
    .fsb .card { aspect-ratio: 2/1 !important; }
    .fsb .card-nm { font-size: 15px !important; }
}