/* ═══════════════════════════════════════════════════════════════════
   Stephenson Adventures – Bokun Widget Replica
   All rules scoped to .sbpf-booking-app / #sbpf-modal to avoid theme conflicts
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --sbpf-accent: #A98D3A;
    --sbpf-accent-hover: #8B7430;
    --sbpf-accent-light: rgba(169,141,58,0.08);
    --sbpf-teal: #4DB8A8;
    --sbpf-green: #5CB85C;
    --sbpf-red: #c0392b;
    --sbpf-text: #1F2937;
    --sbpf-text-secondary: #6B7280;
    --sbpf-text-muted: #9CA3AF;
    --sbpf-bg: #fff;
    --sbpf-bg-light: #F7F7F7;
    --sbpf-border: #E5E7EB;
    --sbpf-border-light: #F3F4F6;
    --sbpf-radius: 4px;
    --sbpf-font: -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
}

/* ─── Base ──────────────────────────────────────────────────────── */
.sbpf-booking-app {
    font-family: var(--sbpf-font) !important;
    color: var(--sbpf-text) !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 24px 16px !important;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
}
.sbpf-booking-app *, .sbpf-booking-app *::before, .sbpf-booking-app *::after,
#sbpf-modal *, #sbpf-modal *::before, #sbpf-modal *::after {
    box-sizing: border-box !important;
}

/* ─── Loading ──────────────────────────────────────────────────── */
.sbpf-booking-app .sbpf-loading, .sbpf-loading-modal {
    text-align: center !important; padding: 60px 20px !important;
}
.sbpf-spinner {
    width: 32px !important; height: 32px !important;
    border: 3px solid var(--sbpf-border) !important;
    border-top-color: var(--sbpf-accent) !important;
    border-radius: 50% !important;
    margin: 0 auto 12px !important;
    animation: sbpf-spin 0.7s linear infinite !important;
}
@keyframes sbpf-spin { to { transform: rotate(360deg); } }
.sbpf-loading-modal p { color: var(--sbpf-text-muted) !important; font-size: 14px !important; }

/* ─── Product Grid (Screen 0) ──────────────────────────────────── */
.sbpf-booking-app .sbpf-products-header h2 {
    font-size: 22px !important; font-weight: 700 !important; margin: 0 0 16px !important;
}
.sbpf-booking-app .sbpf-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}
.sbpf-booking-app .sbpf-product-card {
    background: var(--sbpf-bg) !important; border-radius: 6px !important; overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; cursor: pointer !important;
    transition: all 0.2s ease !important; border: 1px solid var(--sbpf-border-light) !important;
}
.sbpf-booking-app .sbpf-product-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important; transform: translateY(-2px) !important;
}
.sbpf-booking-app .sbpf-card-img-wrap {
    position: relative !important; width: 100% !important; padding-top: 60% !important;
    overflow: hidden !important; background: var(--sbpf-bg-light) !important;
}
.sbpf-booking-app .sbpf-card-img {
    position: absolute !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important; object-fit: cover !important;
    transition: transform 0.3s ease !important;
}
.sbpf-booking-app .sbpf-product-card:hover .sbpf-card-img { transform: scale(1.04) !important; }
.sbpf-booking-app .sbpf-card-img-placeholder {
    position: absolute !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 40px !important; background: #f0ebe1 !important;
}
.sbpf-booking-app .sbpf-card-body { padding: 14px 16px !important; }
.sbpf-booking-app .sbpf-card-title {
    font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important;
    letter-spacing: 0.3px !important; margin: 0 0 8px !important; line-height: 1.3 !important;
}
.sbpf-booking-app .sbpf-card-meta {
    display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important;
}
.sbpf-booking-app .sbpf-card-duration { font-size: 12px !important; color: var(--sbpf-text-muted) !important; }
.sbpf-booking-app .sbpf-card-price { font-size: 13px !important; font-weight: 700 !important; white-space: nowrap !important; }

/* ═══════════════════════════════════════════════════════════════════
   MODAL OVERLAY
   ═══════════════════════════════════════════════════════════════════ */
#sbpf-modal-overlay {
    position: fixed !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    background: rgba(0,0,0,0.6) !important; z-index: 999999 !important;
    display: flex !important; align-items: flex-start !important; justify-content: center !important;
    padding: 20px !important; overflow-y: auto !important;
}
#sbpf-modal {
    background: var(--sbpf-bg) !important; border-radius: 8px !important;
    width: 100% !important; max-width: 960px !important;
    position: relative !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
    font-family: var(--sbpf-font) !important;
    margin: 20px 0 !important;
    overflow: hidden !important;
}

/* ─── Header Bar ───────────────────────────────────────────────── */
.sbpf-header-bar {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    padding: 14px 24px !important; border-bottom: 1px solid var(--sbpf-border) !important;
    background: var(--sbpf-bg) !important; position: sticky !important; top: 0 !important; z-index: 10 !important;
}
.sbpf-header-back {
    background: none !important; border: none !important; font-size: 14px !important;
    cursor: pointer !important; color: var(--sbpf-text) !important; padding: 0 !important;
    font-family: var(--sbpf-font) !important; font-weight: 500 !important;
}
.sbpf-header-back:hover { color: var(--sbpf-accent) !important; }
.sbpf-header-right {
    display: flex !important; align-items: center !important; gap: 12px !important;
}
.sbpf-header-lang, .sbpf-header-curr {
    font-size: 13px !important; color: var(--sbpf-text-secondary) !important;
    border: 1px solid var(--sbpf-border) !important; padding: 4px 10px !important;
    border-radius: var(--sbpf-radius) !important; cursor: default !important;
}
.sbpf-header-close {
    width: 28px !important; height: 28px !important; border: none !important; background: none !important;
    font-size: 18px !important; cursor: pointer !important; color: var(--sbpf-text-muted) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-family: var(--sbpf-font) !important;
}
.sbpf-header-close:hover { color: var(--sbpf-text) !important; }

/* ─── Inner Content (screens 2-4) ──────────────────────────────── */
.sbpf-inner-content { padding: 24px !important; }

/* ─── Stepper ──────────────────────────────────────────────────── */
.sbpf-stepper {
    display: flex !important; align-items: flex-start !important; justify-content: center !important;
    margin-bottom: 28px !important; padding: 0 40px !important;
}
.sbpf-step {
    display: flex !important; flex-direction: column !important; align-items: center !important;
    z-index: 1 !important; min-width: 40px !important;
}
.sbpf-step-circle {
    width: 28px !important; height: 28px !important; border-radius: 50% !important;
    border: 2px solid var(--sbpf-border) !important; background: var(--sbpf-bg) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    margin-bottom: 6px !important; font-size: 12px !important;
}
.sbpf-step.completed .sbpf-step-circle,
.sbpf-step.active .sbpf-step-circle {
    background: var(--sbpf-accent) !important; border-color: var(--sbpf-accent) !important; color: #fff !important;
}
.sbpf-step.future .sbpf-step-circle { background: var(--sbpf-bg) !important; border-color: var(--sbpf-border) !important; }
.sbpf-step-check { color: #fff !important; font-size: 14px !important; font-weight: 700 !important; }
.sbpf-step-icon { font-size: 14px !important; }
.sbpf-step-num { font-size: 11px !important; font-weight: 600 !important; color: var(--sbpf-text-muted) !important; }
.sbpf-step-label {
    font-size: 11px !important; color: var(--sbpf-text-muted) !important;
    text-align: center !important; max-width: 100px !important; line-height: 1.2 !important;
}
.sbpf-step.active .sbpf-step-label { color: var(--sbpf-text) !important; font-weight: 600 !important; }
.sbpf-step-line {
    flex: 1 !important; height: 2px !important; background: var(--sbpf-border) !important;
    margin: 0 4px !important; margin-top: 14px !important; min-width: 20px !important;
}
.sbpf-step-line.completed { background: var(--sbpf-accent) !important; }

/* ─── Accent Bar ───────────────────────────────────────────────── */
.sbpf-accent-bar {
    width: 40px !important; height: 3px !important; background: var(--sbpf-accent) !important;
    border-radius: 2px !important; margin-bottom: 16px !important;
}

/* ─── Page Headings ────────────────────────────────────────────── */
.sbpf-page-heading {
    font-size: 20px !important; font-weight: 700 !important; margin: 0 0 8px !important; color: var(--sbpf-text) !important;
}
.sbpf-sub-heading {
    font-size: 17px !important; font-weight: 700 !important; margin: 24px 0 8px !important; color: var(--sbpf-text) !important;
}

/* ─── Two-Column Layout (Screens 2-4) ─────────────────────────── */
.sbpf-two-col-layout {
    display: grid !important; grid-template-columns: 1fr 280px !important; gap: 32px !important;
}
.sbpf-form-col { min-width: 0 !important; }
.sbpf-summary-col { min-width: 0 !important; }

/* ─── Order Summary (Screens 2-4 sidebar) ──────────────────────── */
.sbpf-order-summary {
    background: var(--sbpf-bg) !important; border: 1px solid var(--sbpf-border) !important;
    border-radius: 6px !important; padding: 20px !important; position: sticky !important; top: 80px !important;
}
.sbpf-order-header { margin-bottom: 10px !important; }
.sbpf-order-title {
    font-size: 14px !important; font-weight: 700 !important; display: block !important; margin-bottom: 2px !important;
}
.sbpf-order-price { font-size: 14px !important; font-weight: 700 !important; float: right !important; margin-top: -18px !important; }
.sbpf-order-date { font-size: 12px !important; color: var(--sbpf-text-secondary) !important; margin-bottom: 4px !important; }
.sbpf-order-guests { font-size: 12px !important; color: var(--sbpf-text-secondary) !important; margin-bottom: 12px !important; }
.sbpf-order-breakdown { border-top: 1px solid var(--sbpf-border) !important; padding-top: 12px !important; }
.sbpf-order-line {
    display: flex !important; justify-content: space-between !important;
    font-size: 13px !important; margin-bottom: 6px !important;
}
.sbpf-order-tax { color: var(--sbpf-text-muted) !important; font-size: 12px !important; }
.sbpf-order-total-line {
    display: flex !important; justify-content: space-between !important;
    font-size: 14px !important; font-weight: 700 !important;
    border-top: 1px solid var(--sbpf-border) !important; padding-top: 8px !important; margin-top: 6px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SCREEN 1: TOUR DETAIL
   ═══════════════════════════════════════════════════════════════════ */

/* Gallery Grid */
.sbpf-gallery-grid {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 4px !important; margin: 0 -24px !important; padding: 0 !important;
    max-height: 300px !important; overflow: hidden !important;
}
.sbpf-gallery-main {
    grid-row: 1 / 3 !important; overflow: hidden !important;
}
.sbpf-gallery-main img {
    width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
}
.sbpf-gallery-thumbs-grid {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important; gap: 4px !important;
}
.sbpf-gallery-thumb-cell {
    overflow: hidden !important; position: relative !important;
}
.sbpf-thumb-img {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
    display: block !important; cursor: pointer !important;
}
.sbpf-gallery-more-overlay {
    position: absolute !important; inset: 0 !important;
    background: rgba(0,0,0,0.5) !important; color: #fff !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important;
}

/* Detail Layout */
.sbpf-detail-layout {
    display: grid !important; grid-template-columns: 1fr 280px !important; gap: 24px !important;
    padding: 20px 24px !important;
}
.sbpf-detail-left { min-width: 0 !important; }
.sbpf-detail-sidebar { min-width: 0 !important; }

/* Title */
.sbpf-detail-title {
    font-size: 22px !important; font-weight: 700 !important; margin: 0 0 8px !important;
    letter-spacing: 0.3px !important; color: var(--sbpf-text) !important;
}

/* Meta */
.sbpf-detail-meta {
    display: flex !important; align-items: center !important; gap: 16px !important;
    margin-bottom: 16px !important; font-size: 14px !important; color: var(--sbpf-text-secondary) !important;
}
.sbpf-meta-item { display: flex !important; align-items: center !important; gap: 4px !important; }
.sbpf-meta-diff { color: var(--sbpf-teal) !important; }

/* Tabs */
.sbpf-tabs {
    display: flex !important; gap: 0 !important; border-bottom: 2px solid var(--sbpf-border) !important;
    margin-bottom: 16px !important;
}
.sbpf-tab {
    padding: 10px 20px !important; font-size: 14px !important; font-weight: 500 !important;
    background: none !important; border: none !important; border-bottom: 3px solid transparent !important;
    cursor: pointer !important; color: var(--sbpf-text-muted) !important;
    margin-bottom: -2px !important; font-family: var(--sbpf-font) !important;
}
.sbpf-tab:hover { color: var(--sbpf-text) !important; }
.sbpf-tab.active { color: var(--sbpf-text) !important; border-bottom-color: var(--sbpf-accent) !important; font-weight: 600 !important; }

/* Content Sections */
.sbpf-desc-text {
    font-size: 14px !important; color: var(--sbpf-text-secondary) !important;
    line-height: 1.7 !important; margin-bottom: 20px !important;
}
.sbpf-section { margin-bottom: 20px !important; }
.sbpf-section-heading {
    font-size: 16px !important; font-weight: 700 !important; margin: 0 0 8px !important; color: var(--sbpf-text) !important;
    padding-bottom: 4px !important; border-bottom: 2px solid var(--sbpf-accent) !important;
    display: inline-block !important;
}
.sbpf-check-list { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.sbpf-check-list li {
    font-size: 14px !important; color: var(--sbpf-text-secondary) !important;
    padding: 3px 0 !important; line-height: 1.6 !important;
}
.sbpf-list-check { }
.sbpf-inc { color: var(--sbpf-green) !important; }
.sbpf-list-x { color: var(--sbpf-red) !important; }
.sbpf-attention-text { font-size: 14px !important; color: var(--sbpf-text-secondary) !important; line-height: 1.6 !important; }
.sbpf-attention-text ul { padding-left: 18px !important; }
.sbpf-attention-text li { font-size: 14px !important; margin-bottom: 4px !important; }
.sbpf-two-cols {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important;
}

/* Itinerary */
.sbpf-itinerary { position: relative !important; padding-left: 32px !important; }
.sbpf-itinerary::before {
    content: '' !important; position: absolute !important; left: 10px !important; top: 8px !important; bottom: 8px !important;
    width: 2px !important; background: var(--sbpf-border) !important;
}
.sbpf-itin-stop { position: relative !important; margin-bottom: 16px !important; }
.sbpf-itin-dot {
    position: absolute !important; left: -32px !important; top: 0 !important;
    width: 22px !important; height: 22px !important; border-radius: 50% !important;
    background: var(--sbpf-accent) !important; color: #fff !important;
    font-size: 10px !important; font-weight: 700 !important;
    display: flex !important; align-items: center !important; justify-content: center !important; z-index: 1 !important;
}
.sbpf-itin-text { font-size: 14px !important; margin: 0 0 2px !important; }
.sbpf-itin-loc { font-size: 12px !important; color: var(--sbpf-text-muted) !important; margin: 0 !important; }

/* ─── Sidebar (Screen 1) ──────────────────────────────────────── */
.sbpf-sidebar-section {
    margin-bottom: 16px !important;
}
.sbpf-sidebar-title {
    font-size: 16px !important; font-weight: 600 !important; margin: 0 0 6px !important; color: var(--sbpf-text) !important;
}

/* Guest Rows */
.sbpf-guest-row {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    padding: 8px 0 !important; border-bottom: 1px solid var(--sbpf-border-light) !important;
}
.sbpf-guest-row:last-child { border-bottom: none !important; }
.sbpf-guest-info { display: flex !important; flex-direction: column !important; gap: 1px !important; }
.sbpf-guest-name { font-size: 14px !important; font-weight: 400 !important; color: var(--sbpf-text) !important; }
.sbpf-guest-age { font-size: 12px !important; color: var(--sbpf-text-muted) !important; }
.sbpf-guest-counter {
    display: flex !important; align-items: center !important; gap: 10px !important;
}
.sbpf-cnt-btn {
    width: 28px !important; height: 28px !important;
    border: 1.5px solid #D8D8D8 !important; background: var(--sbpf-bg) !important;
    font-size: 16px !important; cursor: pointer !important; color: var(--sbpf-text-muted) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-family: var(--sbpf-font) !important;
    border-radius: 50% !important; transition: all 0.15s ease !important;
}
.sbpf-cnt-btn:hover { border-color: var(--sbpf-accent) !important; color: var(--sbpf-accent) !important; }
.sbpf-cnt-val {
    width: 24px !important; text-align: center !important; font-size: 14px !important; font-weight: 500 !important;
}

/* Calendar */
.sbpf-cal-header {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    margin-bottom: 10px !important;
}
.sbpf-cal-month { font-size: 15px !important; font-weight: 600 !important; }
.sbpf-cal-arrow {
    background: none !important; border: 1px solid var(--sbpf-border) !important;
    border-radius: 50% !important; width: 28px !important; height: 28px !important;
    font-size: 16px !important; cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    color: var(--sbpf-text-muted) !important; font-family: var(--sbpf-font) !important;
}
.sbpf-cal-arrow:hover { background: var(--sbpf-bg-light) !important; color: var(--sbpf-text) !important; }
.sbpf-cal-grid { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 2px !important; }
.sbpf-cal-weekday {
    text-align: center !important; font-size: 11px !important; font-weight: 500 !important;
    color: var(--sbpf-text-muted) !important; padding: 4px 0 !important;
}
.sbpf-cal-day {
    text-align: center !important; padding: 4px 2px !important; border-radius: var(--sbpf-radius) !important;
    cursor: pointer !important; position: relative !important; min-height: 40px !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important;
    transition: all 0.15s ease !important; border: 1px solid transparent !important;
}
.sbpf-cal-day.empty { cursor: default !important; }
.sbpf-cal-day.past { opacity: 0.3 !important; cursor: default !important; pointer-events: none !important; }
.sbpf-cal-day.available {
    border-color: var(--sbpf-border) !important; background: var(--sbpf-bg) !important; cursor: pointer !important;
}
.sbpf-cal-day.available:hover { background: #F9F9F9 !important; }
.sbpf-cal-day.unavailable { opacity: 0.3 !important; cursor: default !important; pointer-events: none !important; }
.sbpf-cal-day.selected { border-color: var(--sbpf-accent) !important; background: #FFF9F0 !important; }
.sbpf-cal-num { font-size: 13px !important; font-weight: 500 !important; }
.sbpf-cal-check {
    color: var(--sbpf-green) !important; font-size: 10px !important; position: absolute !important;
    top: 2px !important; right: 3px !important;
}
.sbpf-cal-price {
    font-size: 9px !important; color: var(--sbpf-text-secondary) !important;
    line-height: 1 !important; margin-top: 1px !important;
}

/* Time Slots */
.sbpf-time-slots { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.sbpf-time-btn {
    padding: 6px 14px !important; border: 1px solid var(--sbpf-border) !important;
    border-radius: var(--sbpf-radius) !important; background: var(--sbpf-bg) !important;
    font-size: 13px !important; font-weight: 500 !important; cursor: pointer !important;
    color: var(--sbpf-text) !important; font-family: var(--sbpf-font) !important;
}
.sbpf-time-btn:hover { border-color: var(--sbpf-accent) !important; }
.sbpf-time-btn.selected {
    border-color: var(--sbpf-accent) !important; background: var(--sbpf-accent) !important; color: #fff !important;
}

/* Booking Summary in Sidebar (Screen 1) */
.sbpf-summary-card {
    display: flex !important; gap: 10px !important; align-items: flex-start !important;
    background: var(--sbpf-bg-light) !important; border: 1px solid var(--sbpf-border) !important;
    border-radius: var(--sbpf-radius) !important; padding: 10px !important; margin-bottom: 8px !important;
}
.sbpf-summary-img {
    width: 50px !important; height: 38px !important; border-radius: 3px !important;
    object-fit: cover !important; flex-shrink: 0 !important;
}
.sbpf-summary-name { font-size: 12px !important; font-weight: 700 !important; margin: 0 0 3px !important; }
.sbpf-summary-detail { font-size: 11px !important; color: var(--sbpf-text-muted) !important; margin: 0 !important; }
.sbpf-summary-total {
    display: flex !important; justify-content: space-between !important;
    font-size: 13px !important; font-weight: 600 !important;
}

/* Checkout Button (Screen 1 sidebar) */
.sbpf-checkout-btn {
    width: 100% !important; padding: 14px !important; border: none !important;
    border-radius: var(--sbpf-radius) !important; font-size: 15px !important; font-weight: 600 !important;
    cursor: pointer !important; font-family: var(--sbpf-font) !important;
    background: var(--sbpf-accent) !important; color: #fff !important;
    transition: background 0.2s ease !important;
}
.sbpf-checkout-btn:hover { background: var(--sbpf-accent-hover) !important; }
.sbpf-checkout-btn:disabled {
    background: #E0E0E0 !important; color: #999 !important; cursor: not-allowed !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SCREENS 2-4: FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════════ */

/* Form Card */
.sbpf-form-card {
    border: 1px solid var(--sbpf-border) !important; border-radius: 6px !important;
    padding: 24px !important; background: var(--sbpf-bg) !important;
}
.sbpf-form-grid {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px 20px !important;
}
.sbpf-field { display: flex !important; flex-direction: column !important; }
.sbpf-field label {
    font-size: 13px !important; font-weight: 400 !important; color: var(--sbpf-text) !important;
    margin-bottom: 6px !important;
}
.sbpf-req { color: var(--sbpf-red) !important; }
.sbpf-input {
    width: 100% !important; padding: 10px 12px !important; font-size: 14px !important;
    color: var(--sbpf-text) !important; background: var(--sbpf-bg) !important;
    font-family: var(--sbpf-font) !important;
    border: 1px solid #D1D5DB !important; border-radius: var(--sbpf-radius) !important;
    outline: none !important; transition: border-color 0.2s ease !important;
}
.sbpf-input:focus { border-color: var(--sbpf-accent) !important; box-shadow: 0 0 0 2px rgba(169,141,58,0.15) !important; }
select.sbpf-input { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236B7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px !important; }

/* Continue Button */
.sbpf-center-btn { text-align: center !important; margin-top: 24px !important; }
.sbpf-continue-btn {
    display: inline-block !important; padding: 12px 40px !important;
    background: var(--sbpf-accent) !important; color: #fff !important;
    border: none !important; border-radius: var(--sbpf-radius) !important;
    font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important;
    font-family: var(--sbpf-font) !important; transition: background 0.2s ease !important;
}
.sbpf-continue-btn:hover { background: var(--sbpf-accent-hover) !important; }

/* ─── Screen 3: Booking Card ──────────────────────────────────── */
.sbpf-booking-card {
    display: flex !important; gap: 16px !important; align-items: flex-start !important;
    padding: 16px !important; background: #EFF6FF !important; border: 1px solid var(--sbpf-border) !important;
    border-radius: 6px !important; margin-bottom: 20px !important;
}
.sbpf-booking-card-img {
    width: 80px !important; height: 60px !important; border-radius: var(--sbpf-radius) !important;
    object-fit: cover !important; flex-shrink: 0 !important;
}
.sbpf-booking-card-info { flex: 1 !important; }
.sbpf-booking-card-title { font-size: 14px !important; font-weight: 700 !important; margin: 0 0 8px !important; }
.sbpf-booking-card-details { display: flex !important; gap: 24px !important; flex-wrap: wrap !important; }
.sbpf-bcd-label { font-size: 12px !important; color: var(--sbpf-text-muted) !important; display: block !important; }
.sbpf-bcd-value { font-size: 13px !important; color: var(--sbpf-text) !important; }

/* Pick-up / Drop-off */
.sbpf-pickup-grid {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; margin-bottom: 24px !important;
}
.sbpf-pickup-card {
    border: 1px solid var(--sbpf-border) !important; border-radius: 6px !important; padding: 16px !important;
}
.sbpf-pickup-header {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    margin-bottom: 8px !important;
}
.sbpf-pickup-label { font-size: 14px !important; font-weight: 600 !important; }
.sbpf-pickup-badge {
    font-size: 11px !important; background: var(--sbpf-bg-light) !important;
    padding: 2px 8px !important; border-radius: 3px !important; color: var(--sbpf-text-secondary) !important;
}
.sbpf-pickup-q { font-size: 13px !important; color: var(--sbpf-text) !important; margin: 0 0 8px !important; }

/* Booking Questions */
.sbpf-questions { margin-bottom: 16px !important; }
.sbpf-question { margin-bottom: 16px !important; }
.sbpf-question label {
    font-size: 13px !important; color: var(--sbpf-text) !important;
    margin-bottom: 8px !important; display: block !important;
}
.sbpf-textarea {
    width: 100% !important; padding: 10px 12px !important; font-size: 14px !important;
    border: 1px solid #D1D5DB !important; border-radius: var(--sbpf-radius) !important;
    font-family: var(--sbpf-font) !important; resize: vertical !important;
    outline: none !important;
}
.sbpf-textarea:focus { border-color: var(--sbpf-accent) !important; }

/* ─── Screen 4: Checkout ──────────────────────────────────────── */
.sbpf-checkout-box {
    border: 1px solid var(--sbpf-border) !important; border-radius: 6px !important;
    padding: 20px !important; background: var(--sbpf-bg) !important;
}
.sbpf-terms-label {
    display: flex !important; align-items: flex-start !important; gap: 10px !important;
    font-size: 14px !important; color: var(--sbpf-text) !important; cursor: pointer !important;
}
.sbpf-terms-label input[type="checkbox"] {
    margin-top: 2px !important; accent-color: var(--sbpf-accent) !important;
    width: 18px !important; height: 18px !important; flex-shrink: 0 !important;
}
.sbpf-terms-label a { color: var(--sbpf-text) !important; text-decoration: underline !important; }
.sbpf-secure-badge {
    font-size: 13px !important; color: var(--sbpf-text-secondary) !important;
    margin: 12px 0 16px !important;
}
.sbpf-pay-btn {
    display: inline-block !important; padding: 12px 28px !important;
    background: #999 !important; color: #fff !important;
    border: none !important; border-radius: 22px !important;
    font-size: 15px !important; font-weight: 600 !important; cursor: not-allowed !important;
    font-family: var(--sbpf-font) !important; transition: all 0.2s ease !important;
}
.sbpf-pay-btn:not(:disabled) {
    background: var(--sbpf-accent) !important; cursor: pointer !important;
}
.sbpf-pay-btn:not(:disabled):hover { background: var(--sbpf-accent-hover) !important; }

/* ─── Widget Footer ────────────────────────────────────────────── */
.sbpf-widget-footer {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    padding: 16px 0 !important; margin-top: 24px !important; border-top: 1px solid var(--sbpf-border) !important;
    font-size: 12px !important;
}
.sbpf-footer-links { display: flex !important; gap: 16px !important; }
.sbpf-footer-links a { color: #2563EB !important; text-decoration: none !important; }
.sbpf-footer-links a:hover { text-decoration: underline !important; }
.sbpf-footer-brand { color: var(--sbpf-text-muted) !important; }

/* ─── Hints / Errors ───────────────────────────────────────────── */
.sbpf-hint-text { font-size: 13px !important; color: var(--sbpf-text-muted) !important; margin: 0 !important; }
.sbpf-error-text { font-size: 13px !important; color: var(--sbpf-red) !important; margin: 0 !important; }
.sbpf-booking-app .sbpf-error {
    color: var(--sbpf-red) !important; background: #fdf0ef !important; padding: 8px 12px !important;
    border-radius: var(--sbpf-radius) !important; border: 1px solid #f5c6cb !important; font-size: 13px !important;
}

/* ─── Confirmation / Cancellation Pages ───────────────────────── */
.sbpf-confirmation, .sbpf-cancellation {
    text-align: center !important; max-width: 560px !important; margin: 40px auto !important; padding: 40px !important;
    background: var(--sbpf-bg) !important; border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
.sbpf-confirmation-icon { font-size: 48px !important; margin-bottom: 12px !important; }
.sbpf-confirmation h2 { font-size: 22px !important; margin-bottom: 8px !important; }
.sbpf-confirmation-details {
    text-align: left !important; background: var(--sbpf-bg-light) !important; border-radius: var(--sbpf-radius) !important;
    padding: 20px !important; margin: 20px 0 !important;
}
.sbpf-confirmation-details p { margin: 6px 0 !important; font-size: 14px !important; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .sbpf-booking-app .sbpf-cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .sbpf-detail-layout, .sbpf-two-col-layout { grid-template-columns: 1fr !important; }
    .sbpf-gallery-grid { grid-template-columns: 1fr !important; max-height: none !important; }
    .sbpf-gallery-thumbs-grid { grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: 1fr !important; }
    .sbpf-header-lang { display: none !important; }
    .sbpf-pickup-grid { grid-template-columns: 1fr !important; }
    .sbpf-two-cols { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
    .sbpf-booking-app .sbpf-cards-grid { grid-template-columns: 1fr !important; }
    #sbpf-modal { margin: 0 !important; border-radius: 0 !important; min-height: 100vh !important; }
    #sbpf-modal-overlay { padding: 0 !important; }
    .sbpf-form-grid { grid-template-columns: 1fr !important; }
    .sbpf-header-lang, .sbpf-header-curr { display: none !important; }
    .sbpf-stepper { padding: 0 !important; }
    .sbpf-step-label { font-size: 9px !important; max-width: 60px !important; }
    .sbpf-booking-card { flex-direction: column !important; }
    .sbpf-booking-card-details { flex-direction: column !important; gap: 8px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY OVERVIEW TILES
   ═══════════════════════════════════════════════════════════════ */
.sbpf-category-overview .sbpf-loading {
    text-align: center;
    padding: 40px 20px;
}

/* Search bar */
.sbpf-cat-search {
    display: flex;
    align-items: center;
    margin: 0 auto 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 16px;
    background: #fff;
    max-width: 900px;
    padding-left: 40px;
    padding-right: 40px;
}

.sbpf-cat-search-icon {
    color: #999;
    margin-right: 10px;
    font-size: 16px;
}

.sbpf-cat-search input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #34404E;
    background: transparent;
}

/* Grid — 2x2 with padding */
.sbpf-cat-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 0 24px;
    max-width: 900px;
    margin: 0 auto;
}

/* Each tile is a card with image mosaic + overlay text */
.sbpf-cat-tile {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    height: 280px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.sbpf-cat-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Mosaic fills the entire tile */
.sbpf-cat-tile-mosaic {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

.sbpf-mosaic-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2px;
    height: 100%;
}

.sbpf-mosaic-main {
    overflow: hidden;
}

.sbpf-mosaic-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sbpf-mosaic-side {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 2px;
}

.sbpf-mosaic-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sbpf-mosaic-single {
    height: 100%;
}

.sbpf-mosaic-single img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sbpf-mosaic-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e4dc;
    font-size: 48px;
}

/* Overlay — text on top of mosaic */
.sbpf-cat-tile-info {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0,0,0,0.25);
    z-index: 2;
}

.sbpf-cat-tile:hover .sbpf-cat-tile-info {
    background: rgba(0,0,0,0.35);
}

.sbpf-cat-tile-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    line-height: 1.35;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    max-width: 90%;
}

.sbpf-cat-tile-count {
    display: block;
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 14px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.sbpf-cat-tile-btn {
    display: inline-block;
    padding: 8px 28px;
    background: #fff;
    color: #34404E;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.sbpf-cat-tile-btn:hover {
    background: #f0f0f0;
}

/* Expanded view */
.sbpf-cat-back-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e1d8;
}

.sbpf-cat-back-btn {
    background: none;
    border: 1px solid #e5e1d8;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    color: #A98D3A;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.15s;
}

.sbpf-cat-back-btn:hover {
    background: #f8f7f4;
}

.sbpf-cat-expanded-title {
    font-size: 20px;
    font-weight: 600;
    color: #34404E;
    margin: 0;
}

.sbpf-cat-expanded-title span {
    font-weight: 400;
    color: #6b7c8e;
}

/* Responsive */
@media (max-width: 600px) {
    .sbpf-cat-tiles {
        grid-template-columns: 1fr;
        padding: 0 16px;
    }
    .sbpf-cat-tile {
        height: 200px;
    }
    .sbpf-cat-search {
        margin-left: 16px;
        margin-right: 16px;
    }
}