/* =========================================
   Forever Imprints — Booking App Styles
   ========================================= */

:root {
    --fi-gold: #C9A96E;
    --fi-gold-light: #E8D5B7;
    --fi-dark: #1A1A1A;
    --fi-charcoal: #2D2D2D;
    --fi-gray: #6B7280;
    --fi-light: #F9F7F4;
    --fi-white: #FFFFFF;
    --fi-border: #E5E1DB;
    --fi-green: #22C55E;
    --fi-red: #EF4444;
    --fi-radius: 12px;
    --fi-shadow: 0 4px 24px rgba(0,0,0,0.08);
    --fi-shadow-hover: 0 8px 32px rgba(0,0,0,0.14);
    --fi-transition: 0.2s ease;
}

.fi-booking-app {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
    font-family: 'Georgia', 'Times New Roman', serif;
    color: var(--fi-dark);
    position: relative;
}

/* ---- Step Indicators ---- */
.fi-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 40px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.fi-step {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 100px;
    font-size: 13px;
    font-family: sans-serif;
    color: var(--fi-gray);
    white-space: nowrap;
    transition: var(--fi-transition);
    cursor: default;
    opacity: 0.5;
}

/* completed + current steps read at full strength; upcoming steps stay dimmed */
.fi-step.active,
.fi-step.completed {
    opacity: 1;
}

/* current step gets a soft gold pill so "you are here" is obvious */
.fi-step.active {
    background: rgba(212, 175, 55, 0.12);
}

.fi-step span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--fi-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    transition: var(--fi-transition);
}

.fi-step.active {
    color: var(--fi-dark);
    font-weight: 600;
}

.fi-step.active span {
    background: var(--fi-gold);
    color: var(--fi-white);
}

.fi-step.completed span {
    background: var(--fi-charcoal);
    color: var(--fi-white);
}

.fi-step.completed {
    color: var(--fi-charcoal);
}

/* ---- Section ---- */
.fi-section-title {
    font-size: 26px;
    font-weight: normal;
    margin: 0 0 6px;
    color: var(--fi-dark);
    letter-spacing: -0.3px;
}

.fi-section-sub {
    color: var(--fi-gray);
    margin: 0 0 28px;
    font-family: sans-serif;
    font-size: 14px;
}

/* ---- Collection Tabs ---- */
.fi-collection-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.fi-tab {
    padding: 8px 20px;
    border: 1.5px solid var(--fi-border);
    background: var(--fi-white);
    border-radius: 100px;
    font-family: sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: var(--fi-transition);
    color: var(--fi-gray);
}

.fi-tab:hover {
    border-color: var(--fi-gold);
    color: var(--fi-dark);
}

.fi-tab.active {
    background: var(--fi-dark);
    border-color: var(--fi-dark);
    color: var(--fi-white);
}

/* ---- Package Grid ---- */
.fi-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.fi-package-card {
    border: 1.5px solid var(--fi-border);
    border-radius: var(--fi-radius);
    padding: 24px;
    cursor: pointer;
    transition: var(--fi-transition);
    background: var(--fi-white);
    position: relative;
    overflow: hidden;
}

.fi-package-card:hover {
    border-color: var(--fi-gold);
    box-shadow: var(--fi-shadow-hover);
    transform: translateY(-2px);
}

.fi-package-card.selected {
    border-color: var(--fi-dark);
    box-shadow: var(--fi-shadow-hover);
}

.fi-popular-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--fi-gold);
    color: var(--fi-white);
    font-family: sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 0 var(--fi-radius) 0 var(--fi-radius);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.fi-package-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.fi-package-header h3 {
    font-size: 17px;
    font-weight: normal;
    margin: 0;
    line-height: 1.3;
}

.fi-package-duration {
    font-family: sans-serif;
    font-size: 13px;
    color: var(--fi-gray);
    background: var(--fi-light);
    padding: 3px 8px;
    border-radius: 100px;
    white-space: nowrap;
}

.fi-package-price {
    font-size: 28px;
    font-weight: bold;
    color: var(--fi-dark);
    margin: 10px 0;
    line-height: 1;
}

.fi-cad {
    font-size: 13px;
    font-family: sans-serif;
    color: var(--fi-gray);
    font-weight: normal;
}

.fi-package-desc {
    font-family: sans-serif;
    font-size: 13px;
    color: var(--fi-gray);
    margin: 0 0 14px;
    line-height: 1.5;
}

.fi-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.fi-feature-list li {
    font-family: sans-serif;
    font-size: 13px;
    padding: 3px 0;
    color: var(--fi-charcoal);
}

.fi-feature-list li::before {
    content: '✓ ';
    color: var(--fi-gold);
    font-weight: bold;
}

.fi-select-indicator {
    font-family: sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--fi-gray);
    text-align: center;
    padding: 8px;
    border: 1.5px solid var(--fi-border);
    border-radius: 8px;
    transition: var(--fi-transition);
}

.fi-package-card.selected .fi-select-indicator {
    background: var(--fi-dark);
    border-color: var(--fi-dark);
    color: var(--fi-white);
}

/* ---- Calendar ---- */
.fi-calendar-wrap {
    background: var(--fi-white);
    border: 1.5px solid var(--fi-border);
    border-radius: var(--fi-radius);
    padding: 20px;
    margin-bottom: 24px;
}

.fc-daygrid-day.fi-booked-day {
    background: #FEF2F2 !important;
    pointer-events: none;
}

.fc-daygrid-day.fi-booked-day .fc-daygrid-day-number {
    color: var(--fi-red) !important;
    text-decoration: line-through;
}

.fc-daygrid-day.fi-selected-day {
    background: #FDF8F0 !important;
    border: 2px solid var(--fi-gold) !important;
}

.fc .fc-button-primary {
    background: var(--fi-dark) !important;
    border-color: var(--fi-dark) !important;
}

.fc .fc-button-primary:hover {
    background: var(--fi-charcoal) !important;
}

/* ---- Step 2: Date + Time two-column layout ---- */
.fi-date-time-wrap {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.fi-date-time-wrap .fi-calendar-wrap {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.fi-time-panel {
    width: 210px;
    flex-shrink: 0;
}

.fi-time-panel-inner {
    background: var(--fi-white);
    border: 1.5px solid var(--fi-border);
    border-radius: var(--fi-radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 80px;
}

.fi-time-date-label {
    font-family: sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--fi-gold);
    border-bottom: 1px solid var(--fi-border);
    padding-bottom: 12px;
    line-height: 1.4;
}

.fi-time-label {
    font-family: sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--fi-charcoal);
    display: block;
    margin-bottom: 6px;
}

.fi-time-range-display {
    background: var(--fi-light);
    border-radius: 8px;
    padding: 12px;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--fi-dark);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fi-time-block-label {
    font-size: 12px;
    color: var(--fi-gray);
    font-weight: normal;
}

.fi-time-hint {
    font-family: sans-serif;
    font-size: 13px;
    color: var(--fi-gray);
    line-height: 1.5;
    margin: 0;
}

/* Past days — visible but greyed, not clickable */
.fc-day-past {
    background: var(--fi-light) !important;
    pointer-events: none !important;
}

.fc-day-past .fc-daygrid-day-number {
    color: #D1CBC3 !important;
}

@media (max-width: 680px) {
    .fi-date-time-wrap {
        flex-direction: column;
    }
    .fi-time-panel {
        width: 100%;
    }
}

/* ---- Form ---- */
.fi-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 32px;
}

.fi-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fi-field.fi-field-full {
    grid-column: 1 / -1;
}

.fi-field label {
    font-family: sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--fi-charcoal);
}

.fi-input {
    padding: 10px 14px;
    border: 1.5px solid var(--fi-border);
    border-radius: 8px;
    font-family: sans-serif;
    font-size: 14px;
    transition: var(--fi-transition);
    background: var(--fi-white);
    color: var(--fi-dark);
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.fi-input:focus {
    border-color: var(--fi-gold);
    box-shadow: 0 0 0 3px rgba(201,169,110,0.15);
}

.fi-input.fi-input-error {
    border-color: var(--fi-red);
}

/* ---- Afterword Upsell ---- */
.fi-afterword-card {
    background: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%);
    border-radius: var(--fi-radius);
    padding: 24px;
    margin-bottom: 28px;
    color: var(--fi-white);
}

.fi-afterword-inner {
    display: flex;
    align-items: center;
    gap: 16px;
}

.fi-afterword-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.fi-afterword-text {
    flex: 1;
}

.fi-afterword-text strong {
    font-size: 16px;
    display: block;
    margin-bottom: 4px;
}

.fi-afterword-text p {
    font-family: sans-serif;
    font-size: 13px;
    opacity: 0.8;
    margin: 0 0 6px;
}

.fi-afterword-price {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: var(--fi-gold);
}

.fi-toggle {
    flex-shrink: 0;
    cursor: pointer;
}

.fi-toggle input { display: none; }

.fi-toggle-track {
    display: block;
    width: 50px;
    height: 28px;
    background: #555;
    border-radius: 100px;
    position: relative;
    transition: var(--fi-transition);
}

.fi-toggle-track::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: var(--fi-transition);
}

.fi-toggle input:checked + .fi-toggle-track {
    background: var(--fi-gold);
}

.fi-toggle input:checked + .fi-toggle-track::after {
    left: 25px;
}

/* ---- Backdrops ---- */
.fi-addon-section {
    margin-bottom: 28px;
}

.fi-addon-section h3 {
    font-size: 17px;
    font-weight: normal;
    margin: 0 0 14px;
}

.fi-backdrops {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.fi-backdrop-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 13px;
}

.fi-backdrop-option input { display: none; }

.fi-backdrop-swatch {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    border: 2.5px solid var(--fi-border);
    transition: var(--fi-transition);
}

.fi-backdrop-option input:checked + .fi-backdrop-swatch {
    border-color: var(--fi-gold);
    box-shadow: 0 0 0 3px rgba(201,169,110,0.3);
}

.fi-backdrop-black-sequin { background: linear-gradient(135deg, #1a1a1a, #3d3d3d); }
.fi-backdrop-champagne { background: linear-gradient(135deg, #d4a96a, #f0d9b5); }
.fi-backdrop-white-floral { background: linear-gradient(135deg, #f9f9f9, #e8e8e8); }
.fi-backdrop-greenery { background: linear-gradient(135deg, #3d7a3d, #6aad6a); }
.fi-backdrop-blush { background: linear-gradient(135deg, #f4a7b9, #fce4ec); }
.fi-backdrop-none { background: linear-gradient(135deg, #e0e0e0, #f5f5f5); }

/* ---- Add-ons List ---- */
.fi-addons-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fi-addon-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--fi-border);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--fi-transition);
    font-family: sans-serif;
}

.fi-addon-item:hover {
    border-color: var(--fi-gold);
    background: var(--fi-light);
}

.fi-addon-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--fi-gold);
    cursor: pointer;
    flex-shrink: 0;
}

.fi-addon-info {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.fi-addon-name { font-size: 14px; }
.fi-addon-price { font-size: 14px; font-weight: 600; color: var(--fi-gold); }

/* ---- Review ---- */
.fi-review-card {
    background: var(--fi-white);
    border: 1.5px solid var(--fi-border);
    border-radius: var(--fi-radius);
    padding: 28px;
    margin-bottom: 20px;
}

.fi-review-item {
    display: flex;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--fi-light);
    font-family: sans-serif;
    font-size: 14px;
}

.fi-review-item:last-child { border-bottom: none; }

.fi-review-label {
    color: var(--fi-gray);
    min-width: 100px;
    flex-shrink: 0;
}

.fi-review-addons {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fi-review-addons li::before {
    content: '+ ';
    color: var(--fi-gold);
}

.fi-discount-row {
    display: flex;
    gap: 10px;
    margin: 20px 0 8px;
}

.fi-discount-row .fi-input { flex: 1; }

.fi-discount-msg {
    font-family: sans-serif;
    font-size: 13px;
    margin-bottom: 16px;
}

.fi-discount-msg.fi-success { color: var(--fi-green); }
.fi-discount-msg.fi-error { color: var(--fi-red); }

.fi-totals {
    border-top: 1.5px solid var(--fi-border);
    padding-top: 16px;
    margin-top: 8px;
}

.fi-total-row {
    display: flex;
    justify-content: space-between;
    font-family: sans-serif;
    font-size: 14px;
    padding: 5px 0;
}

.fi-total-main {
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0 8px;
    border-top: 1px solid var(--fi-border);
    border-bottom: 1px solid var(--fi-border);
    margin: 4px 0;
}

.fi-deposit-row {
    color: var(--fi-gold);
    font-weight: 600;
    font-size: 15px;
}

.fi-green { color: var(--fi-green); }

/* ---- Slot status (booth/time conflict notice) ---- */
.fi-slot-status {
    font-family: sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    border-radius: 10px;
    padding: 13px 16px;
    margin: 18px 0 4px;
}
.fi-slot-tight {
    background: #fff7e6;
    border: 1px solid #f0d9a0;
    color: #6b5a2e;
}
.fi-slot-overlap {
    background: #fcecec;
    border: 1px solid #e7b4b4;
    color: #8a3b3b;
}

.fi-terms-note {
    font-family: sans-serif;
    font-size: 13px;
    color: var(--fi-gray);
    text-align: center;
}

.fi-terms-note a { color: var(--fi-gold); }

/* ---- Payment Step ---- */
.fi-payment-summary {
    background: var(--fi-light);
    border-radius: var(--fi-radius);
    padding: 20px;
    margin-bottom: 24px;
    font-family: sans-serif;
}

.fi-payment-breakdown {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    margin-bottom: 8px;
}

.fi-payment-note {
    font-size: 13px;
    color: var(--fi-gray);
    margin: 0;
}

#payment-element {
    margin-bottom: 20px;
}

.fi-error {
    background: #FEF2F2;
    color: var(--fi-red);
    padding: 12px 16px;
    border-radius: 8px;
    font-family: sans-serif;
    font-size: 13px;
    margin-bottom: 16px;
}

/* ---- Confirmation ---- */
.fi-confirmation {
    text-align: center;
    padding: 48px 20px;
}

.fi-confirm-icon {
    width: 72px;
    height: 72px;
    background: var(--fi-dark);
    color: var(--fi-gold);
    border-radius: 50%;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.fi-confirmation h2 {
    font-size: 30px;
    margin: 0 0 12px;
}

.fi-confirm-details {
    display: inline-block;
    text-align: left;
    background: var(--fi-light);
    border-radius: var(--fi-radius);
    padding: 20px 28px;
    margin-top: 20px;
    font-family: sans-serif;
    font-size: 14px;
}

.fi-confirm-item { padding: 4px 0; }

/* ---- Buttons ---- */
.fi-btn {
    padding: 12px 28px;
    border-radius: 100px;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--fi-transition);
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.fi-btn-primary {
    background: var(--fi-dark);
    color: var(--fi-white);
}

.fi-btn-primary:hover:not(:disabled) {
    background: var(--fi-charcoal);
    transform: translateY(-1px);
    box-shadow: var(--fi-shadow);
}

.fi-btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.fi-btn-ghost {
    background: transparent;
    color: var(--fi-gray);
    border: 1.5px solid var(--fi-border);
}

.fi-btn-ghost:hover {
    border-color: var(--fi-gray);
    color: var(--fi-dark);
}

.fi-btn-outline {
    background: transparent;
    color: var(--fi-dark);
    border: 1.5px solid var(--fi-border);
}

.fi-btn-outline:hover {
    border-color: var(--fi-gold);
    color: var(--fi-gold);
}

.fi-btn-pay {
    width: 100%;
    justify-content: center;
    padding: 16px;
    font-size: 16px;
    background: var(--fi-gold);
    color: var(--fi-dark);
}

.fi-btn-pay:hover:not(:disabled) {
    background: #b8953e;
    transform: translateY(-1px);
}

.fi-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--fi-light);
    margin-top: 8px;
}

/* ---- Loading ---- */
.fi-loading {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.fi-loading-inner {
    text-align: center;
    font-family: sans-serif;
    font-size: 14px;
    color: var(--fi-gray);
}

.fi-spinner-large {
    width: 40px;
    height: 40px;
    border: 3px solid var(--fi-border);
    border-top-color: var(--fi-gold);
    border-radius: 50%;
    animation: fi-spin 0.7s linear infinite;
    margin: 0 auto 12px;
}

.fi-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.5);
    border-top-color: white;
    border-radius: 50%;
    animation: fi-spin 0.7s linear infinite;
}

@keyframes fi-spin {
    to { transform: rotate(360deg); }
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .fi-form-grid { grid-template-columns: 1fr; }
    .fi-form-grid .fi-field.fi-field-full { grid-column: 1; }
    .fi-packages-grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 14px;
        padding-bottom: 10px;
        scrollbar-width: none;
    }
    .fi-packages-grid::-webkit-scrollbar { display: none; }
    .fi-packages-grid .fi-package-card { scroll-snap-align: center; flex: 0 0 82%; }
    .fi-steps { gap: 2px; }
    .fi-step { padding: 6px 10px; font-size: 11px; }
    .fi-afterword-inner { flex-wrap: wrap; }
    .fi-section-title { font-size: 22px; }
    .fi-collection-tabs { gap: 6px; }
    .fi-tab { padding: 7px 14px; }
}

/* ---- Mobile calendar — phone-specific fixes ---- */
@media (max-width: 480px) {

    /* Give back every pixel — reduce outer app padding */
    .fi-booking-app {
        padding: 0 8px;
    }

    /* Reduce calendar card padding so grid has maximum width */
    .fi-calendar-wrap {
        padding: 12px !important;
    }

    /* FullCalendar: toolbar (prev / Month Year / next) */
    .fi-booking-app .fc .fc-toolbar {
        gap: 6px;
        margin-bottom: 10px !important;
    }
    .fi-booking-app .fc .fc-toolbar-title {
        font-size: 14px !important;
        font-weight: 600;
    }
    .fi-booking-app .fc .fc-button,
    .fi-booking-app .fc .fc-button-primary {
        padding: 5px 10px !important;
        font-size: 12px !important;
        min-width: 0;
    }

    /* Day-of-week header row (Sun Mon … Sat) */
    .fi-booking-app .fc .fc-col-header-cell-cushion {
        font-size: 11px !important;
        padding: 4px 2px !important;
    }

    /* Day number inside each cell */
    .fi-booking-app .fc .fc-daygrid-day-number {
        font-size: 12px !important;
        padding: 3px 4px !important;
        line-height: 1.2;
    }

    /* Reduce cell top-padding so rows are less tall */
    .fi-booking-app .fc .fc-daygrid-day-top {
        padding: 1px !important;
    }

    /* Fix minimum row height — FC default is ~80px, reduce for phones */
    .fi-booking-app .fc .fc-daygrid-day-frame {
        min-height: 38px !important;
    }

    /* Remove inner table padding FullCalendar adds */
    .fi-booking-app .fc-theme-standard td,
    .fi-booking-app .fc-theme-standard th {
        border-color: var(--fi-border) !important;
    }
    .fi-booking-app .fc .fc-scrollgrid {
        border-radius: var(--fi-radius);
        overflow: hidden;
    }

    /* Time panel: full width, compact */
    .fi-time-panel {
        width: 100% !important;
    }
    .fi-time-panel-inner {
        padding: 16px;
        position: static !important; /* cancel sticky on phones */
    }

    /* Step nav buttons: stack vertically if needed */
    .fi-nav-row {
        flex-wrap: wrap;
        gap: 10px;
    }
    .fi-nav-row .fi-btn {
        flex: 1;
        justify-content: center;
        min-width: 120px;
    }
}