/* Locker Rental Map Frontend Styles v3.1 - Clean HTML Design */

/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Prompt:wght@400;600;700&display=swap');

.locker-rental-map-app {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    min-height: 100vh !important;
    background: #F4EFEA !important;
    color: #111827 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
}

/* Hide page titles */
.locker-rental-map-app~h1,
.locker-rental-map-app~h2,
.entry-title {
    display: none !important;
}

body:has(.locker-rental-map-app) .entry-header {
    display: none !important;
}

body:has(.locker-rental-map-app) .page-header {
    display: none !important;
}

/* Custom Scrollbar */
.locker-rental-map-app ::-webkit-scrollbar {
    width: 6px;
}

.locker-rental-map-app ::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.locker-rental-map-app ::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.locker-rental-map-app ::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Search & Filter Bar Base styles defined in modern Figma section */

/* Main Content Layout */
.locker-rental-map-app .content-layout {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: visible !important;
}

/* Sidebar */
.locker-rental-map-app .sidebar {
    width: 420px !important;
    flex-shrink: 0 !important;
    background: white !important;
    border-right: 1px solid #e5e7eb !important;
    overflow-y: auto !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03) !important;
}

.locker-rental-map-app .sidebar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Center content */
    margin-bottom: 20px !important;
    padding: 20px 0 !important;
    background: transparent !important;
    border-bottom: 1px solid #f3f4f6 !important;
    /* Add subtle separator like image */
}

.locker-rental-map-app .sidebar-header h3 {
    font-size: 14px !important;
    /* Bigger */
    font-weight: 500 !important;
    color: #4b5563 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    text-align: center !important;
}

.locker-rental-map-app .sidebar-header p,
.locker-rental-map-app .sidebar-header button {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #0044cc !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Lockers List */
.locker-rental-map-app .lockers-list {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 !important;
}

/* Locker Card Redesign */
.locker-rental-map-app .locker-card {
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 16px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: white !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Internal spacing between rows */
}

/* Row 1: Status Header */
.locker-rental-map-app .locker-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.locker-rental-map-app .status-label {
    font-size: 10px;
    font-weight: 700;
    color: #1e3a8a;
    /* Strong Blue */
    text-transform: uppercase;
}

.locker-rental-map-app .status-value {
    font-size: 10px;
    font-weight: 700;
    color: #1e3a8a;
    /* Strong Blue */
    text-transform: uppercase;
}

/* Row 2: Icon + Info */
.locker-rental-map-app .locker-card-body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.locker-rental-map-app .locker-icon-wrapper {
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0;
}

.locker-rental-map-app .locker-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

.locker-rental-map-app .locker-info-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.locker-rental-map-app .locker-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    /* Bold */
    color: #000 !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.2;
}

.locker-rental-map-app .locker-campus {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #374151 !important;
    /* Slightly darker grey */
    margin: 0 !important;
}

/* Row 3: Meta (Rating + Green Status) */
.locker-rental-map-app .locker-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.locker-rental-map-app .locker-rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.locker-rental-map-app .rating-text {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.locker-rental-map-app .locker-status-text-green {
    font-size: 12px;
    font-weight: 700;
    color: #047857;
    /* Green */
}

/* Row 4: Description */
.locker-rental-map-app .locker-description {
    font-size: 13px;
    color: #111827;
    margin-top: 2px;
}

/* Row 5: Footer (Pill + Price) - No Border */
.locker-rental-map-app .locker-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* Align bottom */
    margin-top: 24px;
    /* More spacing */
    /* Removed padding-top and border-top per new design request */
}

.locker-rental-map-app .time-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #dcfce7;
    /* Light green bg */
    padding: 6px 12px;
    border-radius: 20px;
    color: #166534;
    /* Dark green text */
    font-size: 11px;
    font-weight: 600;
}

.locker-rental-map-app .price-display {
    text-align: right;
    font-size: 16px;
    /* Larger */
    font-weight: 800;
    /* Bold Price */
    color: #000;
}

.locker-rental-map-app .price-display .unit {
    font-size: 13px;
    font-weight: 400;
    color: #1f2937;
    /* Darker Grey */
    margin-left: 2px;
}

/* Map - Enhanced with Streets Simulation */
.locker-rental-map-app .map-wrapper {
    flex: 1 !important;
    position: relative;
    background: #e5e3df;
    overflow: hidden;
}

.locker-rental-map-app #location-map {
    width: 100%;
    height: 100%;
}

/* Popup typography balance (desktop + mobile) */
.leaflet-popup-content .map-popup h3 {
    margin: 0 0 4px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
}

.leaflet-popup-content .map-popup p {
    margin: 0 0 4px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.leaflet-popup.wortev-map-popup .leaflet-popup-content-wrapper {
    border-radius: 10px !important;
    padding: 2px !important;
}

.leaflet-popup.wortev-map-popup .leaflet-popup-content {
    margin: 8px 10px !important;
}

.leaflet-popup.wortev-map-popup .map-popup h3 {
    font-size: 13px !important;
    margin-bottom: 4px !important;
}

.leaflet-popup.wortev-map-popup .map-popup p,
.leaflet-popup.wortev-map-popup .map-popup a,
.leaflet-popup.wortev-map-popup .map-popup button {
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.leaflet-popup.wortev-map-popup .map-popup {
    max-width: 100%;
}

.leaflet-popup.wortev-map-popup .map-popup h3,
.leaflet-popup.wortev-map-popup .map-popup p,
.leaflet-popup.wortev-map-popup .map-popup a {
    word-break: normal !important;
    overflow-wrap: anywhere;
}

/* Simulated Street Overlays */
.locker-rental-map-app .map-wrapper::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 0;
    width: 100%;
    height: 32px;
    background: white;
    opacity: 0.2;
    transform: rotate(1deg);
    pointer-events: none;
    z-index: 1;
}

.locker-rental-map-app .map-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 32px;
    background: white;
    opacity: 0.2;
    transform: rotate(-1deg);
    pointer-events: none;
    z-index: 1;
}

/* Floating Map Status Badge */
.locker-rental-map-app .map-status-badge {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 8px 16px;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 100;
    border: 1px solid #e5e7eb;
}

.locker-rental-map-app .map-status-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.locker-rental-map-app .map-status-badge span {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
}

/* Map Controls - Bottom Right */
.locker-rental-map-app .map-controls {
    position: absolute;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
}

.locker-rental-map-app .map-controls button {
    background: white;
    border: 1px solid #e5e7eb;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.locker-rental-map-app .map-controls button:hover {
    background: #f9fafb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Unified Datepicker Modal */
.locker-rental-map-app #datepickerModal {
    display: none;
    position: absolute;
    top: 100%;
    left: 20px;
    right: 20px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 2005;
    margin-top: 10px;
    max-width: 900px;
    /* Wider to avoid squashing */
    margin-left: auto;
    margin-right: auto;
    padding: 40px;
    /* More padding */
}

body > #datepickerModal {
    display: none;
    background: white;
    border: 1px solid #e5e7eb;
}

.locker-rental-map-app #datepickerModal.active {
    display: block;
}

body > #datepickerModal.active {
    display: block;
}

.locker-rental-map-app .calendar-modal-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

@media (min-width: 1024px) {

    /* Main container is always column now, internal rows handle horizontal layout */
    .locker-rental-map-app .calendar-modal-content {
        flex-direction: column;
    }
}

.locker-rental-map-app .calendar-column {
    flex: 1;
    min-width: 300px;
    /* Ensure they don't get too squashed, but triggers wrap if needed */
    max-width: 400px;
    /* PREVENT GIANT NUMBERS: constrain max width */
    margin: 0 auto;
    /* Center if stacked */
}

.locker-rental-map-app .calendar-divider {
    display: none;
    width: 1px;
    background: #f3f4f6;
    margin: 0 20px;
}

@media (min-width: 1024px) {
    .locker-rental-map-app .calendar-divider {
        display: block;
    }
}

.locker-rental-map-app .calendar-month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* Calendar Grid Fixes */
.locker-rental-map-app .calendar-weekdays-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    text-align: center;
    margin-bottom: 12px;
    width: 100%;
}

.locker-rental-map-app .calendar-days-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px;
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
}

.locker-rental-map-app .weekday-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 0;
}

.locker-rental-map-app .day-node {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    border-radius: 50%;
    /* Circle shape like image */
    color: #374151;
    font-weight: 500;
    max-width: 40px;
    /* Limit max size */
    max-height: 40px;
    margin: 0 auto;
    /* Center in grid cell */
}

.locker-rental-map-app .day-node:hover:not(.empty):not(.past) {
    background-color: #f3f4f6;
    /* Lighter hover */
    color: #111827;
}

.locker-rental-map-app .day-node.empty {
    cursor: default;
    pointer-events: none;
}

.locker-rental-map-app .day-node.past {
    color: #e5e7eb;
    cursor: not-allowed;
}

.locker-rental-map-app .day-node.disabled {
    color: #e5e7eb;
    cursor: not-allowed;
    background: transparent;
}

.locker-rental-map-app .day-node.in-range {
    background-color: #d1fae5;
    /* Light green to match theme */
    border-radius: 0;
    color: #065f46;
    font-weight: 600;
}

/* Fix range start/end rounded corners */
.locker-rental-map-app .day-node.selected-range {
    background-color: #a8a29e !important;
    /* Taupe/Gold color from image */
    color: white !important;
    font-weight: 600;
    border-radius: 4px;
    /* Slightly rounded square */
}

/* Sidebar Empty State */
.locker-rental-map-app .sidebar-empty-state {
    display: flex;
    /* Force flex display */
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
    padding: 40px !important;
    color: #4a4a4a !important;
    opacity: 1;
    visibility: visible;
}

.locker-rental-map-app .sidebar-empty-state h2 {
    font-size: 32px !important;
    /* Large readable text */
    line-height: 1.2 !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

/* Minimal Loader */
.locker-rental-map-app .locker-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    width: 100%;
}

.locker-rental-map-app .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    /* Light grey background ring */
    border-top: 3px solid #1e3a8a;
    /* Blue spinner */
    border-radius: 50%;
    animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    /* Smooth cubic-bezier spin */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Fade In Animation for Results */
@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.locker-rental-map-app .lockers-list {
    animation: fadeInSlide 0.4s ease-out;
}

/* Ensure the container is big enough */
.locker-rental-map-app .sidebar {
    min-width: 320px !important;
    width: 30% !important;
    /* Flexible width similar to Airbnb/Booking */
    max-width: 500px !important;
    height: 100% !important;
    /* Take full height */
    z-index: 2 !important;
    /* Ensure on top of map if overlap */
    position: relative !important;
}

/* Modal Actions */
.locker-rental-map-app .modal-actions {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    align-items: flex-end;
    gap: 20px;
}

/* Overriding btn-apply to match SEARCH button */
.locker-rental-map-app .btn-apply {
    background: #1d3d2e;
    color: white;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 14px 40px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    margin-left: auto;
    /* Push to right */
}

.locker-rental-map-app .btn-apply:hover {
    background: #142920;
}

/* Ensure button is visible */
.locker-rental-map-app .btn-apply.remove-display-none {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: #1d3d2e !important;
    /* Ensure dark green color */
    color: white !important;
    min-width: 120px;
}

.locker-rental-map-app .calendar-nav {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 6px;
    color: #6c757d;
    transition: all 0.2s ease;
}

.locker-rental-map-app .calendar-nav:hover {
    background: #f8f9fa;
    color: #007bff;
}

.locker-rental-map-app .calendar-title {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

.locker-rental-map-app .calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 8px;
}

.locker-rental-map-app .weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #6c757d;
    padding: 5px;
    text-transform: uppercase;
}

.locker-rental-map-app .calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.locker-rental-map-app .calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.locker-rental-map-app .calendar-day.empty {
    cursor: default;
}

.locker-rental-map-app .calendar-day.past {
    color: #adb5bd;
    cursor: not-allowed;
}

.locker-rental-map-app .calendar-day.today {
    background: #e3f2fd;
    color: #1976d2;
    font-weight: 600;
}

.locker-rental-map-app .calendar-day.available:hover {
    background: #f0f8ff;
    color: #007bff;
}

.locker-rental-map-app .calendar-day.selected {
    background: #007bff;
    color: white;
    font-weight: 600;
}

.locker-rental-map-app .day-number {
    display: block;
}

/* Time Carousel */
.locker-rental-map-app .time-carousel-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.locker-rental-map-app .time-nav-btn {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: background 0.2s;
}

.locker-rental-map-app .time-nav-btn:hover {
    background: #f3f4f6;
}

.locker-rental-map-app .time-display-group {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.locker-rental-map-app .time-val {
    font-size: 13px;
    color: #d1d5db;
    /* Light gray for non-active */
    font-weight: 500;
}

.locker-rental-map-app .time-val.current-val {
    font-size: 18px;
    color: #1a1a1a;
    font-weight: 700;
}

/* Hide legacy selects */
.locker-rental-map-app .time-select {
    display: none;
}

/* NEW LAYOUT STYLES FOR V4 */

/* 1. Calendars Row Container */
.locker-rental-map-app .calendars-row {
    display: flex;
    flex-direction: row;
    /* Default to row */
    align-items: flex-start;
    gap: 30px;
    flex-wrap: wrap;
    /* Wrap on very small screens */
}

/* On very small mobile screens, stack them */
@media (max-width: 640px) {
    .locker-rental-map-app .calendars-row {
        flex-direction: column;
    }
}

/* 2. Vertical Divider (between calendars) */
.locker-rental-map-app .calendar-divider-vertical {
    display: block;
    width: 1px;
    background: #e5e7eb;
    margin: 0 20px;
    align-self: stretch;
}

@media (max-width: 640px) {
    .locker-rental-map-app .calendar-divider-vertical {
        display: none;
    }
}

/* 3. Horizontal Divider (below calendars) */
.locker-rental-map-app .calendar-divider-horizontal {
    height: 1px;
    background: #e5e7eb;
    margin: 24px 0;
    width: 100%;
}

/* 4. Bottom Controls Row */
.locker-rental-map-app .bottom-controls-row {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 768px) {
    .locker-rental-map-app .bottom-controls-row {
        flex-direction: row;
        align-items: flex-end;
        /* Align to bottom for button */
        justify-content: space-between;
    }

    .locker-rental-map-app .bottom-controls-row .time-selection-container {
        flex: 1;
        /* Distribute space */
    }

    .locker-rental-map-app .bottom-controls-row .action-control {
        margin-left: auto;
    }
}

/* 5. Clean Navigation Buttons */
.locker-rental-map-app .calendar-nav-btn {
    background: transparent !important;
    border: none !important;
    color: #1a1a1a !important;
    /* Dark black/gray */
    padding: 4px !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.locker-rental-map-app .calendar-nav-btn:hover {
    color: #000 !important;
    background: #f3f4f6 !important;
    border-radius: 4px;
}

/* Fix calendar header alignment for arrows */
.locker-rental-map-app .calendar-month-header {
    margin-bottom: 24px !important;
    padding: 0 8px;
    /* Slight indent for arrows */
}

/* Ensure Month Title is correct size */
.locker-rental-map-app .calendar-month-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

.locker-rental-map-app .calendar-context-label {
    display: none;
}

/* Hide old modal-actions if present */
.locker-rental-map-app .modal-actions {
    display: none !important;
}

/* Label for bottom time controls */
.locker-rental-map-app .time-select-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
    text-transform: capitalize;
    /* "Depositar" not "DEPOSITAR" */
}

/* ==========================================================================
   CHECKOUT CONTAINER & ESSENTIAL HELPERS (PRESERVED & CONSOLIDATED)
   ========================================================================== */

/* Layout Container - Absolute Overlay for "New Page" Feel (Preserved for T2.11.4) */
.locker-rental-map-app .checkout-container,
#checkout-container {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    background: #fdfbf7;
    z-index: 3000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.locker-rental-map-app .checkout-container.active,
#checkout-container.active {
    display: block;
    opacity: 1;
}

/* Discount & Coupon Input Wrapper */
.locker-rental-map-app .discount-input-wrapper {
    display: block !important;
    margin: 10px 0;
}

.locker-rental-map-app .coupon-apply-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.locker-rental-map-app .coupon-apply-row .checkout-input {
    flex: 1;
    min-width: 0;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 14px !important;
}

/* Terms & Privacy Checkbox Styling (Figma Token #1d3326) */
.locker-rental-map-app .round-checkbox,
.round-checkbox,
#terms-check,
.terms-checkbox input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    background-color: #ffffff !important;
    border-radius: 4px !important;
    vertical-align: middle !important;
    border: 2px solid #1d3326 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    margin: 0 10px 0 0 !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    outline: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.locker-rental-map-app .round-checkbox:hover,
.round-checkbox:hover,
#terms-check:hover,
.terms-checkbox input[type="checkbox"]:hover {
    border-color: #0b4d3b !important;
    box-shadow: 0 0 0 2px rgba(29, 51, 38, 0.12) !important;
}

.locker-rental-map-app .round-checkbox:checked,
.round-checkbox:checked,
#terms-check:checked,
.terms-checkbox input[type="checkbox"]:checked {
    background-color: #1d3326 !important;
    border-color: #1d3326 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 5.5' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
}

.locker-rental-map-app .round-checkbox:checked::after {
    display: none !important;
}

.locker-rental-map-app .terms-checkbox {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

/* Checkout Mini Map Preview */
.locker-rental-map-app .checkout-map-preview,
.locker-rental-map-app #checkout-mini-map {
    height: 200px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

/* Confirmation Icon SVG Styles */
.confirmation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
}

.confirmation-icon svg {
    width: 48px;
    height: 48px;
    stroke: #10b981;
    stroke-width: 2;
}

@media (max-width: 768px) {
    /* App: auto height, allow datepicker to overflow */
    .locker-rental-map-app {
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        height: auto !important;
        min-height: unset !important;
        overflow: visible !important;
    }

    .locker-paginated-grid,
    .locker-rental-map-app .locker-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =============================================
   VALIDATION ERROR STYLES
   ============================================= */

/* Red border on invalid inputs */
.locker-rental-map-app input.input-field-error,
.locker-rental-map-app textarea.input-field-error,
.locker-rental-map-app select.input-field-error {
    border: 1.5px solid #E57373 !important;
    background-color: #FFF8F8 !important;
    outline: none !important;
}

.locker-rental-map-app input.input-field-error:focus,
.locker-rental-map-app textarea.input-field-error:focus {
    border-color: #C62828 !important;
    box-shadow: 0 0 0 3px rgba(229, 115, 115, 0.2) !important;
}

.locker-rental-map-app .payment-method-item.has-error {
    border: 1.5px solid #E57373 !important;
    box-shadow: 0 0 0 3px rgba(229, 115, 115, 0.12) !important;
}

/* Error banner — "Campos incompletos" */
.validation-error-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #FDECEA;
    border: 1px solid #F5C6C6;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 12px;
    color: #5D1A1A;
}

.validation-error-banner svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.validation-error-banner strong {
    font-size: 13px;
    font-weight: 600;
    display: block;
    color: #5D1A1A;
}

.validation-error-banner p {
    font-size: 12px;
    color: #7B3131;
    margin: 2px 0 0;
}

/* Global floating error banner */
.global-error-banner {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Terms checkbox error highlight */
.locker-rental-map-app .input-field-error-label,
.input-field-error-label {
    color: #D8534F !important;
}

.locker-rental-map-app .input-field-error-label input[type="checkbox"] {
    outline: 2px solid #E57373;
    outline-offset: 2px;
}

.locker-rental-map-app .terms-checkbox.has-error {
    border: 1.5px solid #E57373;
    border-radius: 8px;
    padding: 8px 10px;
    background: #FFF8F8;
}

.locker-rental-map-app .terms-checkbox.has-error label {
    color: #D8534F !important;
}

.locker-rental-map-app .terms-inline-error {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #D8534F;
}

/* Thank You Page Map Styles */
.thank-you-map,
#thank-you-mini-map {
    width: 100%;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Thank you map - mobile responsive */
@media (max-width: 768px) {
    .thank-you-map,
    #thank-you-mini-map {
        height: 250px !important;
        margin-bottom: 16px;
    }
}

/* Fix popup background and tip */
.leaflet-popup-content-wrapper {
    background: white !important;
}

.leaflet-popup-tip {
    background: white !important;
}

/* Center popup on mobile in checkout mini-map */
@media (max-width: 768px) {
    /* Checkout mini-map popup centering */
    #checkout-mini-map .leaflet-popup {
        margin-left: 0 !important;
    }
    
    #checkout-mini-map .leaflet-popup-content-wrapper {
        background: white !important;
    }
    
    #checkout-mini-map .leaflet-popup-tip {
        background: white !important;
    }
    
    /* Force popup to center above marker */
    #checkout-mini-map .leaflet-marker-icon + .leaflet-popup-pane .leaflet-popup {
        transform: translate(-50%, -100%) !important;
        left: 50% !important;
    }
}


/* ==========================================================================
   MILESTONE 1: VISTA PRINCIPAL UNIFICADA DE RESERVAS (reservas)
   Tokens, Search Bar, Popover Calendar, 2-Column Layout, Map, Grid, Sidebar
   ========================================================================== */

:root {
    --locker-primary: #1d3326;
    --locker-primary-hover: #294735;
    --locker-gold: #a38c64;
    --locker-gold-hover: #8f7952;
    --locker-mint: #ecfdf5;
    --locker-mint-border: #10b981;
    --locker-gray-50: #f9fafb;
    --locker-gray-100: #f3f4f6;
    --locker-gray-200: #e5e7eb;
    --locker-gray-300: #d1d5db;
    --locker-gray-400: #9ca3af;
    --locker-gray-500: #6b7280;
    --locker-gray-600: #4b5563;
    --locker-gray-700: #374151;
    --locker-gray-900: #111827;
}

/* 1. TOP SEARCH BAR - Floating White Card (Figma Node 2536:1177) */
html body div.locker-rental-map-app .filter-bar,
div.locker-rental-map-app .filter-bar,
div.locker-rental-map-app .filter-bar.locker-search-bar,
.locker-rental-map-app .filter-bar {
    max-width: 1312px !important;
    margin: 32px auto 24px auto !important;
    padding: 24px 32px !important;
    background: #ffffff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    width: calc(100% - 48px) !important;
    position: relative !important;
    z-index: 1000 !important;
    display: block !important;
    grid-template-columns: none !important;
    float: none !important;
    clear: both !important;
}

/* Conceal Search Bar & Filters in Checkout & Confirmation (Figma 2536:1100 / 2538:2866) */
.locker-rental-map-app.in-checkout .filter-bar,
.locker-rental-map-app.in-checkout .locker-search-bar,
.locker-rental-map-app.in-checkout .content-layout,
.locker-rental-map-app.in-checkout #datepickerModal,
.locker-rental-map-app.in-checkout .datepicker-modal,
.locker-rental-map-app.in-confirmation .filter-bar,
.locker-rental-map-app.in-confirmation .locker-search-bar,
.locker-rental-map-app.in-confirmation .content-layout,
.locker-rental-map-app.in-confirmation #datepickerModal,
.locker-rental-map-app.in-confirmation .datepicker-modal,
body.in-checkout .locker-rental-map-app .filter-bar,
body.in-checkout .locker-rental-map-app .locker-search-bar,
body.in-checkout .locker-rental-map-app .content-layout,
body.in-checkout #datepickerModal,
body.in-confirmation .locker-rental-map-app .filter-bar,
body.in-confirmation .locker-rental-map-app .locker-search-bar,
body.in-confirmation .locker-rental-map-app .content-layout,
body.in-confirmation #datepickerModal {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

html body div.locker-rental-map-app .filter-bar-container,
div.locker-rental-map-app .filter-bar-container,
.locker-rental-map-app .filter-bar-container {
    max-width: 100% !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 20px !important;
}

html body div.locker-rental-map-app .filter-item.item-destination,
div.locker-rental-map-app .filter-item.item-destination,
.locker-rental-map-app .filter-item.item-destination {
    flex: 1.4 !important;
    min-width: 220px !important;
    display: flex !important;
    flex-direction: column !important;
}

html body div.locker-rental-map-app .filter-item.item-checkin,
html body div.locker-rental-map-app .filter-item.item-checkout,
div.locker-rental-map-app .filter-item.item-checkin,
div.locker-rental-map-app .filter-item.item-checkout,
.locker-rental-map-app .filter-item.item-checkin,
.locker-rental-map-app .filter-item.item-checkout {
    flex: 1 !important;
    min-width: 170px !important;
    display: flex !important;
    flex-direction: column !important;
}

html body div.locker-rental-map-app .search-bar-action,
div.locker-rental-map-app .search-bar-action,
.locker-rental-map-app .search-bar-action {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: flex-end !important;
}

/* ==========================================================================
   Narrow Desktop Viewports (769px - 880px): Balanced 2-Row Filter Bar Layout
   ========================================================================== */
@media (min-width: 769px) and (max-width: 880px) {
    html body div.locker-rental-map-app .filter-bar-container,
    div.locker-rental-map-app .filter-bar-container,
    .locker-rental-map-app .filter-bar-container {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
    }

    html body div.locker-rental-map-app .filter-item.item-destination,
    div.locker-rental-map-app .filter-item.item-destination,
    .locker-rental-map-app .filter-item.item-destination,
    .locker-rental-map-app .filter-destination-col,
    .filter-destination-col {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body div.locker-rental-map-app .filter-item.item-checkin,
    html body div.locker-rental-map-app .filter-item.item-checkout,
    div.locker-rental-map-app .filter-item.item-checkin,
    div.locker-rental-map-app .filter-item.item-checkout,
    .locker-rental-map-app .filter-item.item-checkin,
    .locker-rental-map-app .filter-item.item-checkout,
    .locker-rental-map-app .filter-date-col,
    .filter-date-col {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 140px !important;
    }

    html body div.locker-rental-map-app .search-bar-action,
    div.locker-rental-map-app .search-bar-action,
    .locker-rental-map-app .search-bar-action,
    .locker-rental-map-app .filter-search-col,
    .filter-search-col {
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    html body div.locker-rental-map-app .btn-search-primary,
    div.locker-rental-map-app .btn-search-primary,
    .locker-rental-map-app .btn-search-primary {
        width: auto !important;
        padding: 0 24px !important;
    }
}

.locker-rental-map-app .filter-item label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #9CA3AF !important;
    letter-spacing: 0.06em !important;
    margin: 0 0 8px 0 !important;
    display: block !important;
}

.locker-rental-map-app .input-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    padding: 0 14px !important;
    height: 48px !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.locker-rental-map-app .input-wrapper:hover,
.locker-rental-map-app .input-wrapper:focus-within {
    border-color: #1D3326 !important;
    box-shadow: 0 0 0 2px rgba(29, 51, 38, 0.1) !important;
}

.locker-rental-map-app .input-wrapper .icon {
    position: static !important;
    margin-right: 10px !important;
    color: #9CA3AF !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    transform: none !important;
    pointer-events: none !important;
}

.locker-rental-map-app .input-wrapper select,
.locker-rental-map-app .input-wrapper input {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    outline: none !important;
    height: 100% !important;
    cursor: pointer !important;
    box-shadow: none !important;
    font-family: inherit !important;
}

.locker-rental-map-app .btn-search-primary {
    background: #1D3326 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0 28px !important;
    height: 48px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.locker-rental-map-app .btn-search-primary:hover {
    background: #16281e !important;
    transform: none !important;
    box-shadow: none !important;
}

/* 2. DATEPICKER POPOVER MODAL (#datepickerModal) */
#datepickerModal.datepicker-popover {
    display: none;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #ffffff !important;
    border: 1px solid var(--locker-gray-200) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    z-index: 99999 !important;
    width: 660px !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(80vh, 520px) !important;
    overflow-y: auto !important;
    padding: 18px 22px !important;
    box-sizing: border-box !important;
}

#datepickerModal.active {
    display: block !important;
    animation: popoverDrop 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes popoverDrop {
    0% { opacity: 0; transform: translate(-50%, -10px) scale(0.98); }
    100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.datepicker-popover-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 12px !important;
    position: relative !important;
}

.popover-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.popover-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    background: #E8F5E9 !important;
    color: #1D3326 !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
}

.popover-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.popover-subtitle {
    font-size: 12px !important;
    color: #6B7280 !important;
    margin: 2px 0 0 0 !important;
    line-height: 1.3 !important;
}

.datepicker-close-btn {
    background: transparent !important;
    border: none !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #9CA3AF !important;
    cursor: pointer !important;
    transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.datepicker-close-btn:hover {
    background: #F3F4F6 !important;
    color: #111827 !important;
    transform: scale(1.1) !important;
}

.datepicker-close-btn:active {
    transform: scale(0.92) !important;
}

.datepicker-tabs-nav {
    display: flex !important;
    background: #F3F4F6 !important;
    padding: 3px !important;
    border-radius: 8px !important;
    gap: 4px !important;
    margin-bottom: 14px !important;
    border-bottom: none !important;
}

.datepicker-tab-btn {
    flex: 1 !important;
    text-align: center !important;
    padding: 7px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #4B5563 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.datepicker-tab-btn:hover {
    color: #111827 !important;
    background: rgba(255, 255, 255, 0.6) !important;
}

.datepicker-tab-btn.active {
    background: #1D3326 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(29, 51, 38, 0.2) !important;
    transform: translateY(-1px) !important;
}

.calendars-row {
    display: flex !important;
    gap: 20px !important;
    position: relative !important;
}

.calendar-column {
    flex: 1 !important;
    min-width: 0 !important;
}

.calendar-divider-vertical {
    width: 1px !important;
    background: var(--locker-gray-200) !important;
    margin: 4px 0 !important;
}

.calendar-month-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    height: 30px !important;
}

.calendar-month-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--locker-gray-900) !important;
    text-align: center !important;
    flex: 1 !important;
}

.calendar-nav-btn {
    background: var(--locker-gray-100) !important;
    border: none !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: var(--locker-gray-700) !important;
    transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.calendar-nav-btn:hover:not(:disabled) {
    background: var(--locker-gray-200) !important;
    color: var(--locker-gray-900) !important;
    transform: scale(1.08) !important;
}

.calendar-nav-btn:active:not(:disabled) {
    transform: scale(0.92) !important;
}

.calendar-nav-btn:disabled,
.calendar-nav-btn.disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

.calendar-spacer {
    width: 28px !important;
    height: 28px !important;
}

.calendar-weekdays-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--locker-gray-400) !important;
    margin-bottom: 4px !important;
}

.calendar-days-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    row-gap: 3px !important;
    column-gap: 0px !important;
    text-align: center !important;
}

.day-node {
    height: 32px !important;
    width: 32px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--locker-gray-700) !important;
    cursor: pointer !important;
    transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    user-select: none !important;
    border-radius: 6px !important;
    position: relative !important;
}

.day-node:hover:not(.disabled):not(.empty) {
    background: #E8F5E9 !important;
    color: #1D3326 !important;
    transform: scale(1.12) !important;
    box-shadow: 0 2px 6px rgba(29, 51, 38, 0.15) !important;
    z-index: 2 !important;
}

.day-node.empty {
    cursor: default !important;
    background: transparent !important;
}

.day-node.disabled,
.day-node.past {
    color: var(--locker-gray-300) !important;
    cursor: not-allowed !important;
    background: transparent !important;
    text-decoration: line-through !important;
}

@keyframes daySelectPulse {
    0% { transform: scale(0.85); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Single Day Selection */
.day-node.day-selected-single {
    background: var(--locker-primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    animation: daySelectPulse 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 2px 8px rgba(29, 51, 38, 0.3) !important;
}

/* Range Start & End */
.day-node.day-range-start {
    background: var(--locker-primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-top-left-radius: 50% !important;
    border-bottom-left-radius: 50% !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    animation: daySelectPulse 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.day-node.day-range-end {
    background: var(--locker-primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-top-right-radius: 50% !important;
    border-bottom-right-radius: 50% !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    animation: daySelectPulse 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Range Middle */
.day-node.day-in-range {
    background: #EEF4F0 !important;
    color: #1D3326 !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
}

.day-node.day-in-range-preview {
    background: #F0FDF4 !important;
    color: #047857 !important;
    border-radius: 0 !important;
}

.day-node.day-range-end-preview {
    background: #1D3326 !important;
    color: #ffffff !important;
    border-top-right-radius: 50% !important;
    border-bottom-right-radius: 50% !important;
}

/* Popover Footer - Figma Hours, Days Badge & Apply Button */
.datepicker-footer-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px solid #E5E7EB !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.datepicker-hours-col {
    font-size: 11.5px !important;
    color: #4B5563 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.datepicker-hours-col strong {
    color: #111827 !important;
}

.datepicker-footer-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
}

.datepicker-days-badge {
    background: #ECFDF5 !important;
    border: 1px solid #A7F3D0 !important;
    color: #065F46 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 5px 12px !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.btn-datepicker-apply {
    background: #1D3326 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 7px 16px !important;
    border-radius: 9999px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 8px rgba(29, 51, 38, 0.2) !important;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    white-space: nowrap !important;
}

.btn-datepicker-apply:hover {
    background: #14241b !important;
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 4px 12px rgba(29, 51, 38, 0.3) !important;
}

.btn-datepicker-apply:hover svg {
    transform: translateX(3px) !important;
}

.btn-datepicker-apply svg {
    transition: transform 0.2s ease !important;
}

.btn-datepicker-apply:active {
    transform: scale(0.96) !important;
}

.datepicker-actions-bar {
    display: flex !important;
    align-items: center !important;
}

.btn-apply-dates {
    background: var(--locker-primary);
    color: #ffffff;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-apply-dates:hover {
    background: var(--locker-primary-hover);
}

/* Micro-interaction & Transition Classes */
@keyframes gridPageTransition {
    0% { opacity: 0.3; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}

.grid-transitioning {
    animation: gridPageTransition 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes priceValuePulse {
    0% { opacity: 0.5; transform: scale(0.97); }
    50% { transform: scale(1.03); color: #065F46; }
    100% { opacity: 1; transform: scale(1); }
}

.val-updated {
    animation: priceValuePulse 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 3. UNIFIED 2-COLUMN MAIN CONTENT LAYOUT */
.locker-unified-layout {
    display: flex !important;
    flex-direction: row !important;
    gap: 32px !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 24px 20px !important;
    align-items: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.locker-main-column {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

.locker-rental-map-app .locker-unified-layout .locker-sidebar-column,
.locker-rental-map-app .locker-sidebar-column,
.locker-sidebar-column {
    width: 400px !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.card-section {
    background: #ffffff;
    border: 1px solid var(--locker-gray-200);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--locker-gray-100);
}

.section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--locker-gray-900);
    margin: 0;
}

.badge-tag-map {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: #1D3326 !important;
    padding: 4px 14px !important;
    border-radius: 9999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* 3.1 Campus Location Map (Leaflet) */
.map-container-frame {
    position: relative !important;
    width: 100% !important;
}

#location-map,
.location-map-instance {
    height: 280px !important;
    width: 100% !important;
    z-index: 10 !important;
}

/* Leaflet Custom Campus Pin & Label (Fix 0-width collapse in Elementor/WordPress) */
.custom-campus-pin,
.custom-campus-pin *,
.leaflet-marker-icon.custom-campus-pin {
    max-width: none !important;
    box-sizing: content-box !important;
}

.custom-campus-pin {
    z-index: 1000 !important;
}

.campus-pin-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 150px;
    margin-left: -75px;
    margin-top: -62px;
    pointer-events: auto;
    cursor: pointer;
}

.campus-map-label {
    background: #1d3326;
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1.5px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    position: relative;
    transition: transform 0.2s ease, background 0.2s ease;
}

.campus-map-label::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px 5px 0;
    border-style: solid;
    border-color: #1d3326 transparent transparent transparent;
    display: block;
    width: 0;
}

.campus-label-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
    flex-shrink: 0;
}

.campus-pin-marker {
    background-color: #1d3326;
    width: 32px;
    height: 32px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    border: 2.5px solid #ffffff;
    transition: transform 0.2s ease;
}

.campus-pin-wrapper:hover .campus-map-label,
.campus-pin-wrapper:active .campus-map-label {
    background: #14241b;
}

.campus-pin-wrapper:hover .campus-pin-marker,
.campus-pin-wrapper:active .campus-pin-marker {
    transform: rotate(-45deg) scale(1.08);
}

.mobile-location-gmaps-btn {
    margin-left: auto !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1d3326 !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.mobile-location-gmaps-btn:hover {
    background-color: #f9fafb !important;
    color: #1d3326 !important;
}

.mobile-location-gmaps-btn:active {
    background-color: #f3f4f6 !important;
    transform: scale(0.96) !important;
}

.map-address-strip {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 24px !important;
    background: #ffffff !important;
    border-top: 1px solid #E5E7EB !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.address-info {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #374151 !important;
    font-weight: 500 !important;
}

.btn-external-map {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.btn-external-map:hover {
    color: #1D3326 !important;
    text-decoration: underline !important;
    background: transparent !important;
}

/* 3.2 Lockers Status & 3D Standard Locker Card */
.lockers-status-section {
    padding: 24px !important;
}

.lockers-status-section .section-header-row {
    padding: 0 0 18px 0 !important;
    border-bottom: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.availability-badge {
    background: transparent !important;
    border: none !important;
    color: #6B7280 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.availability-badge .status-dot {
    color: #10B981 !important;
    font-size: 14px !important;
}

.locker-standard-hero-card {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    background: #ffffff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-top: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.standard-hero-icon {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    background: #087243 !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 14px rgba(8, 114, 67, 0.18) !important;
}


.standard-hero-details {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.hero-card-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 0 4px 0 !important;
}

.hero-card-desc {
    font-size: 13px !important;
    color: #6B7280 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.4 !important;
}

.hero-feature-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.feat-pill {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #6B7280 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.standard-hero-pricing {
    text-align: right !important;
    flex-shrink: 0 !important;
    padding-left: 20px !important;
    border-left: 1px solid #F3F4F6 !important;
    min-width: 90px !important;
}

.rate-large {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    line-height: 1 !important;
}

.rate-unit-text {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #6B7280 !important;
    margin-top: 4px !important;
}

/* 3.3 Paginated Locker Grid (10 per page) */
.lockers-grid-section {
    padding: 24px !important;
}

.lockers-grid-section .section-header-row {
    padding: 0 0 18px 0 !important;
    border-bottom: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.grid-section-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 !important;
}

.grid-range-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #6B7280 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.locker-paginated-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 12px !important;
    max-width: 580px !important;
    margin: 20px auto !important;
    justify-content: center !important;
    padding: 0 !important;
}

.locker-cell {
    position: relative !important;
    height: 86px !important;
    width: 100% !important;
    max-width: 86px !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 4px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    user-select: none !important;
}

.locker-cell-number {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
}

/* Available state - Soft sage / mint tint */
.locker-cell.available {
    background: #EEF4F0 !important;
    border: 1px solid #D6E4DB !important;
    box-shadow: none !important;
    cursor: pointer !important;
    color: #1D3326 !important;
}

.locker-cell.available:hover {
    background: #ffffff !important;
    border-color: #1D3326 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

.locker-cell.available .locker-cell-number {
    color: #1D3326 !important;
}

/* Selected state - Solid institutional dark green */
.locker-cell.available.selected {
    background: var(--locker-primary) !important;
    border-color: var(--locker-primary) !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
}

.locker-cell.available.selected .locker-cell-number {
    color: #ffffff !important;
}

/* Occupied state */
.locker-cell.occupied {
    background: #F3F4F6 !important;
    border: 1px solid #E5E7EB !important;
    color: #9CA3AF !important;
    cursor: not-allowed !important;
    opacity: 0.55 !important;
    box-shadow: none !important;
}

.locker-cell.occupied .locker-cell-number {
    color: #9CA3AF !important;
}

.locker-occupied-badge {
    display: none !important;
}

/* Pagination Controls - Figma Node 2536:1604 */
.locker-pagination-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 24px !important;
    padding-top: 18px !important;
    border-top: 1px solid #F3F4F6 !important;
}

.pagination-buttons-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.page-nav-arrow {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 6px !important;
    border: 1px solid #E5E7EB !important;
    background: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.page-nav-arrow:hover:not(:disabled) {
    border-color: #1D3326 !important;
    color: #1D3326 !important;
}

.page-nav-arrow:disabled,
.page-nav-arrow.disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}

.page-numbers-container {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.page-num-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 6px !important;
    border: 1px solid #E5E7EB !important;
    background: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}

.page-num-btn:hover:not(.active) {
    border-color: #1D3326 !important;
    color: #1D3326 !important;
}

.page-num-btn.active {
    background: #1D3326 !important;
    color: #ffffff !important;
    border-color: #1D3326 !important;
}

.pagination-info-text {
    font-size: 12px !important;
    color: #6B7280 !important;
    font-weight: 500 !important;
    text-align: center !important;
}

/* Legend (Strictly absent in Figma design) */
.locker-status-legend {
    display: none !important;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-dot.available { background: #10b981; }
.legend-dot.occupied { background: var(--locker-gray-400); }
.legend-dot.selected { background: var(--locker-primary); }

/* 4. REACTIVE STICKY SIDEBAR */
.reservation-summary-card {
    background: #ffffff;
    border: 1px solid var(--locker-gray-200);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.sidebar-header-green {
    background: var(--locker-primary);
    color: #ffffff;
    padding: 18px 24px;
}

.sidebar-header-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}

.summary-card-content {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--locker-gray-700);
}

.summary-line .label-text {
    color: var(--locker-gray-500);
    font-weight: 500;
}

.summary-line .value-text {
    font-weight: 600;
    color: var(--locker-gray-900);
}

.summary-line .value-text.bold {
    font-weight: 700;
}

.summary-line .value-text.highlight {
    color: var(--locker-primary);
    font-weight: 700;
}

/* Figma Total Estimated Box (Node 2536:1691) */
.summary-total-box-figma,
.summary-cost-box {
    background: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    margin: 18px 0 20px 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.total-label-col .total-main-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    display: block !important;
}

.total-label-col .total-tax-badge {
    font-size: 11px !important;
    color: #6B7280 !important;
    font-weight: 500 !important;
    display: block !important;
    margin-top: 2px !important;
}

.total-number-col .total-main-number {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    line-height: 1 !important;
}

.summary-actions-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

.btn-sidebar-primary {
    background: #1D3326 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    height: 48px !important;
    width: 100% !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    box-shadow: none !important;
    padding: 0 16px !important;
}

.btn-sidebar-primary:hover:not(:disabled) {
    background: #16281e !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn-sidebar-primary:disabled {
    background: #E5E7EB !important;
    color: #9CA3AF !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    box-shadow: none !important;
}

.btn-sidebar-secondary {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    height: 44px !important;
    width: 100% !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
}

.btn-sidebar-secondary:hover:not(:disabled) {
    background: #F9FAFB !important;
    border-color: #111827 !important;
}

.btn-sidebar-secondary:disabled {
    border-color: #E5E7EB !important;
    color: #9CA3AF !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Service Policy Card - Figma Node 2536:1708 */
.service-policy-card {
    background: #ffffff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    padding: 20px 24px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

.service-policy-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 0 14px 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.policy-items-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    color: var(--locker-gray-600);
}

.policy-items-list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.policy-icon {
    font-size: 14px;
}

/* Fallback notice banner & error badge */
.locker-sync-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #92400e;
}

.locker-sync-notice .notice-icon {
    font-size: 16px;
}

.locker-sync-notice .btn-retry-sync {
    margin-left: auto;
    background: #ffffff;
    border: 1px solid #d97706;
    color: #b45309;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.locker-sync-notice .btn-retry-sync:hover {
    background: #fef3c7;
}

.availability-badge.has-fallback-warning {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

.availability-badge.has-fallback-warning .status-dot {
    color: #f59e0b !important;
}

/* 5. RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
    .locker-unified-layout {
        flex-direction: column !important;
        gap: 24px !important;
    }
    .locker-sidebar-column {
        width: 100% !important;
        position: static !important;
    }
}

@media (max-width: 768px) {
    .locker-rental-map-app .filter-bar-container {
        grid-template-columns: 1fr !important;
    }
    .locker-paginated-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .locker-standard-hero-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .standard-hero-pricing {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--locker-gray-200);
        padding-top: 12px;
        width: 100%;
        text-align: left;
    }
    .map-address-strip {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   MILESTONE 2 (R2): CHECKOUT & DUAL PAYMENT SELECTOR STYLES (FIGMA 2538:2866)
   ========================================================================== */

/* 1. Checkout Container & Viewport Overlay */
.checkout-container,
#checkout-container {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    pointer-events: none !important;
    box-sizing: border-box;
}

body:not(.in-checkout) #checkout-container,
body:not(.in-checkout) .checkout-container {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.locker-rental-map-app.in-checkout #checkout-container,
.locker-rental-map-app.in-checkout .checkout-container,
.checkout-container.active,
#checkout-container.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    z-index: 1000 !important;
    background: transparent !important;
}

body.checkout-mobile-open,
body.confirmation-mobile-open,
body.in-checkout,
body.in-confirmation {
    overflow-x: clip !important;
    overflow-y: visible !important;
    height: auto !important;
    min-height: 100vh !important;
}

body.checkout-mobile-open .mobile-header-bar:not(.mobile-checkout-header),
body.checkout-mobile-open #mobile-hold-countdown-banner:not(#mobile-checkout-hold-banner),
body.checkout-mobile-open .locker-rental-map-app .content-layout,
body.checkout-mobile-open .locker-rental-map-app .filter-bar,
body.checkout-mobile-open .locker-rental-map-app .locker-search-bar,
body.checkout-mobile-open #mobile-sticky-bottom-bar:not(#mobile-checkout-sticky-bar),
body.checkout-mobile-open #mobile-main-view,
body.checkout-mobile-open #checkout-container,
body.checkout-mobile-open div.locker-rental-map-app #checkout-container,
html body.checkout-mobile-open div.locker-rental-map-app #checkout-container,
body.mobile-checkout-active #checkout-container,
body.mobile-checkout-active div.locker-rental-map-app #checkout-container,
html body.mobile-checkout-active div.locker-rental-map-app #checkout-container,
body.checkout-mobile-open .locker-rental-map-app.in-checkout #checkout-container.locker-desktop-only,
body.checkout-mobile-open .locker-rental-map-app.in-checkout #checkout-container.locker-mobile-hidden,
body.checkout-mobile-open #checkout-container.locker-desktop-only {
    display: none !important;
}

/* Suppress third-party marketing overlays during locker booking flow */
body.locker-rental-page div[id^="om-"],
body.locker-rental-page .om-holder,
body.locker-rental-page .om-overlay,
body.locker-rental-page iframe[id^="om-"] {
    display: none !important;
    pointer-events: none !important;
}

/* 2. Checkout Top Bar: Stepper & Hold Countdown Timer (Figma Node 2538:2890) */
.checkout-top-bar,
.checkout-stepper-header {
    background: #ffffff !important;
    border: 1px solid var(--locker-gray-200, #e5e7eb) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    padding: 16px 28px !important;
    width: calc(100% - 48px) !important;
    max-width: 1312px !important;
    margin: 28px auto 24px auto !important;
    box-sizing: border-box !important;
}

.checkout-top-bar-inner,
.checkout-stepper-container {
    max-width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

/* Stepper Progress Bar */
.checkout-stepper-bar,
.checkout-stepper-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.stepper-step,
.stepper-phase-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #6b7280;
    transition: color 0.2s ease;
}

.stepper-step .step-indicator {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: #f3f4f6;
    color: #6b7280;
    border: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.stepper-step.completed,
.stepper-step.step-complete {
    color: #2D5233 !important;
    font-weight: 600 !important;
}

.stepper-step.completed .step-indicator,
.stepper-step.step-complete .step-indicator {
    background-color: #2D5233 !important;
    color: #ffffff !important;
    border: none !important;
}

.stepper-step.completed .step-label,
.stepper-step.step-complete .step-label {
    color: #2D5233 !important;
}

.stepper-step.completed .step-check-icon,
.stepper-step.step-complete .step-check-icon {
    stroke: #ffffff !important;
}

.stepper-step.active,
.stepper-step.step-active {
    color: #1D3326 !important;
    font-weight: 700 !important;
}

.stepper-step.active .step-indicator,
.stepper-step.step-active .step-indicator {
    background-color: #1D3326 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.stepper-step.active .step-label,
.stepper-step.step-active .step-label {
    color: #1D3326 !important;
}

.stepper-step.step-pending,
.stepper-step.inactive {
    color: #8A968D !important;
}

.stepper-step.step-pending .step-indicator,
.stepper-step.inactive .step-indicator {
    background-color: #F5F2ED !important;
    color: #8A968D !important;
    border: 1px solid #E5E0D8 !important;
}

.stepper-step.step-pending .step-label,
.stepper-step.inactive .step-label {
    color: #8A968D !important;
}

.stepper-connector,
.stepper-divider {
    width: 32px;
    height: 1px;
    background: #e5e7eb;
    border-radius: 0;
}

.stepper-connector.completed,
.stepper-connector.active {
    background-color: #e5e7eb;
}

/* 3. Hold Countdown Banner (Figma Node 2538:2916) */
@keyframes holdPulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

.hold-countdown-banner,
.checkout-hold-timer-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: none;
}

.hold-timer-dot,
.hold-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #dc2626;
    animation: holdPulse 1.5s ease-in-out infinite;
    display: inline-block;
}

.timer-clock-icon {
    flex-shrink: 0;
}

.hold-timer-digits,
.checkout-timer-display,
.timer-digits {
    font-family: inherit;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.02em;
    color: #dc2626;
}

/* 4. Checkout Main Layout (2 Columns - Figma Node 2538:2929) */
.checkout-grid,
.checkout-main-layout {
    max-width: 1312px !important;
    margin: 0 auto 48px auto !important;
    padding: 0 !important;
    width: calc(100% - 48px) !important;
    display: flex !important;
    gap: 36px !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
}

.checkout-main-col,
.checkout-details {
    flex: 1 1 62% !important;
    min-width: 0 !important;
}

.checkout-sidebar-col,
.checkout-summary {
    flex: 0 0 400px !important;
    width: 400px !important;
}

.checkout-sidebar-sticky {
    position: sticky;
    top: 24px;
    max-height: none !important;
    overflow: visible !important;
}

/* 5. Checkout Headings & Category Label */
.checkout-heading-group {
    margin-bottom: 20px;
}

.checkout-title,
.checkout-main-title {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 6px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -0.02em;
}

.checkout-subtitle,
.checkout-main-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

.checkout-method-category-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* 6. Dual Accordion Payment Selector (Figma Node 2538:2936) */
.payment-methods,
.payment-accordion-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

.payment-method-item,
.payment-card-accordion {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    transition: all 0.2s ease;
    overflow: hidden;
    cursor: pointer;
}

.payment-method-item:hover {
    border-color: #d1d5db;
}

.payment-method-item.active,
.payment-card-accordion.active {
    border: 1.5px solid #111827 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.payment-method-item.has-error {
    border-color: #ef4444;
}

.payment-header,
.payment-card-header {
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    user-select: none;
}

.payment-radio-circle,
.custom-radio-selector {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #ffffff;
    transition: all 0.2s ease;
}

.payment-method-item.active .payment-radio-circle {
    border: 2px solid #111827 !important;
}

.payment-radio-circle .radio-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    transition: background-color 0.2s ease;
}

.payment-method-item.active .payment-radio-circle .radio-indicator {
    background: #111827 !important;
}

.payment-method-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.payment-method-icon-box.stripe-icon-box {
    background: #e8ece9;
}

.payment-method-icon-box.campus-icon-box {
    background: #faf5ee;
}

.payment-header-text {
    flex: 1;
    min-width: 0;
}

.payment-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
}

.payment-title,
.payment-method-title {
    font-size: 15.5px;
    font-weight: 700;
    color: #111827;
}

.badge-recommended {
    font-size: 11.5px;
    font-weight: 600;
    background: #f3f4f6;
    color: #374151;
    border: none;
    padding: 3px 10px;
    border-radius: 9999px;
    text-transform: none;
}

.badge-campus-tag {
    font-size: 11.5px;
    font-weight: 600;
    background: #faf5ee;
    color: #92400e;
    border: 1px solid #fde68a;
    padding: 3px 10px;
    border-radius: 9999px;
    text-transform: none;
}

.payment-subtitle,
.payment-method-desc {
    font-size: 13px;
    color: #6b7280;
    display: block;
    line-height: 1.4;
}

/* Card Body & Form Inputs - Smooth Accordion Transition */
.payment-body,
.payment-card-body,
.payment-form {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 24px;
    border-top: 1px solid transparent;
    pointer-events: none;
    cursor: default;
    display: block !important;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, padding 0.25s ease, border-color 0.25s ease;
}

.payment-method-item.active .payment-body,
.payment-method-item.active .payment-card-body,
.payment-method-item.active .payment-form {
    max-height: 1200px;
    opacity: 1;
    overflow: visible;
    padding: 0 24px 24px;
    border-top: 1px solid #e5e7eb;
    pointer-events: auto;
    display: block !important;
}

.payment-security-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0 14px;
    flex-wrap: wrap;
}

.card-brand-badges {
    display: flex;
    gap: 6px;
}

.brand-badge {
    background: #ffffff;
    border: 1px solid #d1d5db;
    font-size: 11px;
    font-weight: 700;
    color: #4b5563;
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1.3;
}

.ssl-guarantee-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
}

/* Campus Reception Notice */
.campus-reception-notice {
    background: #faf5ee;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 16px 0;
}

.notice-location-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #92400e;
    margin-bottom: 6px;
}

.notice-instructions-text {
    font-size: 13px;
    color: #78350f;
    line-height: 1.5;
    margin: 0 0 8px;
}

.notice-hours-pill {
    font-size: 12px;
    color: #92400e;
}

/* Form Fields with Warm Background Tints (Figma Node 2538:2970) */
.checkout-form-fields-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 14px 0 0 0;
}

.checkout-form-row.checkout-form-split-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

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

.checkout-form-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #4b5563;
    letter-spacing: 0.04em;
}

.required-star {
    color: #dc2626;
}

/* Warm Input Styling Matching Figma #F4F3EF */
.checkout-input {
    background-color: #f4f3ef !important;
    border: 1px solid #e5e2dc !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: #111827 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.checkout-input::placeholder {
    color: #9ca3af;
}

.checkout-input:focus,
.checkout-field-input:focus {
    background-color: #ffffff !important;
    border-color: #1d3326 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(29, 51, 38, 0.12) !important;
}

.checkout-input.input-field-error {
    border-color: #dc2626 !important;
    background-color: #fff5f5 !important;
}

.input-with-icon-wrapper {
    position: relative;
    width: 100%;
}

.input-with-icon-wrapper .checkout-input {
    padding-right: 40px !important;
}

.input-with-icon-wrapper .input-trailing-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}

.validation-error-banner {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
}

/* Horizontal CTA Divider (Figma Node 2538:3027) */
.checkout-cta-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 24px 0 20px 0;
}

/* Unified Main CTA Button (Figma Node 2538:3028) */
.checkout-main-cta-wrapper {
    width: 100% !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
}

/* Internal buttons kept for legacy tests/triggers but strictly hidden visually */
#checkout-container #btn-submit-stripe,
#checkout-container #btn-submit-campus,
#checkout-container .btn-submit-stripe,
#checkout-container .btn-submit-campus,
#checkout-container .btn-confirm-unified {
    display: none !important;
}

/* Figma Node 2538:3028 - The ONLY primary CTA button in checkout */
#checkout-container button#btn-submit-checkout,
#checkout-container .btn-checkout-main {
    background: #1d3326 !important;
    background-color: #1d3326 !important;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    padding: 14px 24px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    width: 100% !important;
    min-height: 54px !important;
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    text-transform: none !important;
    text-decoration: none !important;
    letter-spacing: normal !important;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

#checkout-container button#btn-submit-checkout *,
#checkout-container .btn-checkout-primary * {
    color: #ffffff !important;
}

#checkout-container button#btn-submit-checkout:hover,
#checkout-container .btn-checkout-primary:hover,
#checkout-container .btn-submit-stripe:hover,
#checkout-container .btn-submit-campus:hover,
#checkout-container .btn-checkout-main:hover,
#checkout-container .btn-confirm:hover,
.btn-checkout-primary:hover,
.btn-submit-stripe:hover,
.btn-submit-campus:hover,
.btn-checkout-main:hover,
.btn-confirm:hover {
    background: #254232 !important;
    background-color: #254232 !important;
    color: #ffffff !important;
}

#checkout-container button#btn-submit-checkout:active,
#checkout-container .btn-checkout-primary:active,
#checkout-container .btn-submit-stripe:active,
#checkout-container .btn-submit-campus:active,
#checkout-container .btn-checkout-main:active,
#checkout-container .btn-confirm:active {
    transform: scale(0.99) !important;
}

/* Centered Back Navigation Link (Figma Node 2538:3034) */
.checkout-back-nav-bottom {
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 14px !important;
    margin-bottom: 6px !important;
    width: 100% !important;
}

#checkout-container button#btn-back-to-lockers,
#checkout-container .checkout-back-link,
#checkout-container .btn-back-to-lockers,
.checkout-back-link,
.btn-back-to-lockers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 6px 12px !important;
    color: #6b7280 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    text-transform: none !important;
    transition: color 0.15s ease !important;
}

#checkout-container button#btn-back-to-lockers *,
#checkout-container .btn-back-to-lockers * {
    color: #6b7280 !important;
}

#checkout-container button#btn-back-to-lockers:hover,
#checkout-container .checkout-back-link:hover,
#checkout-container .btn-back-to-lockers:hover {
    color: #111827 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
}

#checkout-container button#btn-back-to-lockers:hover *,
#checkout-container .btn-back-to-lockers:hover * {
    color: #111827 !important;
}

/* Hide extra fields to conform 100% to Figma Node 2538:2866 */
#checkout-container .stripe-contact-fields,
#checkout-container .checkout-coupon-section {
    display: none !important;
}

#checkout-container .checkout-terms-wrapper {
    display: block !important;
    margin: 16px 0 14px 0 !important;
}
#checkout-container .terms-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
}
#checkout-container .terms-checkbox-label input[type="checkbox"],
#checkout-container #terms-check {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    cursor: pointer !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: 2px solid #1d3326 !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#checkout-container .terms-checkbox-label a {
    color: #1d3326 !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}
#checkout-container .terms-checkbox-label input[type="checkbox"]:checked,
#checkout-container #terms-check:checked {
    background-color: #1d3326 !important;
    border-color: #1d3326 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 5.5' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
}
#checkout-container #btn-submit-checkout:disabled,
#checkout-container #btn-submit-checkout.disabled {
    opacity: 0.50 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Badges pushed to far right */
#checkout-container .payment-title-row {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}
#checkout-container .badge-recommended,
#checkout-container .badge-gold-reserve,
#checkout-container .payment-method-badge {
    margin-left: auto !important;
}

/* Centered SSL Security Footer (Figma Node 2538:3039) */
.checkout-trust-footer {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    color: #9ca3af !important;
    padding: 6px 0 0 !important;
    justify-content: center !important;
}

/* 7. Sticky Reservation Summary Sidebar (Figma Node 2538:3046) */
.checkout-summary-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0 24px 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    margin-bottom: 16px;
    overflow: hidden;
}

.summary-card-header {
    background: #1d3326;
    margin: 0 -24px 0 -24px;
    padding: 20px 24px;
}

.summary-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.summary-campus-subtitle {
    font-size: 12px;
    color: #a7d4b5;
    font-weight: 500;
}

/* Locker Miniature Row (Figma Node 2538:3053) */
.checkout-locker-miniature {
    display: flex;
    align-items: center;
    gap: 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #f3f4f6;
    border-radius: 0;
    padding: 16px 0;
    margin-bottom: 0;
}

.mini-cube-box {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: #1d3326;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mini-locker-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mini-locker-name {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.mini-locker-dimensions {
    font-size: 12px;
    color: #6b7280;
}

/* 4 Schedule Detail Rows with Icons (Figma Node 2538:3060) */
.checkout-schedule-rows {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    border: none;
    margin-bottom: 0;
}

.checkout-schedule-rows .schedule-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
}

.checkout-schedule-rows .schedule-item:last-child {
    border-bottom: none;
}

.schedule-label-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
}

.schedule-label-with-icon svg {
    flex-shrink: 0;
}

.checkout-schedule-rows .schedule-value {
    font-weight: 700;
    color: #111827;
    font-size: 13.5px;
}

.checkout-schedule-rows .schedule-value.highlight {
    color: #111827;
    font-weight: 700;
}

/* Institutional Dark Green Total Box (Figma Node 2543:4055) */
.checkout-dark-total-box {
    background: #1d3326 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    margin: 16px 0 0 0 !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.checkout-dark-total-box .total-row-main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.checkout-dark-total-box .total-box-label {
    font-size: 13.5px;
    font-weight: 500;
    color: #ffffff;
}

.checkout-dark-total-box .total-box-amount {
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    font-family: inherit;
    letter-spacing: -0.01em;
}

.checkout-dark-total-box .total-row-sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checkout-dark-total-box .total-box-tax-label {
    font-size: 11.5px;
    color: #9ca3af;
}

.checkout-dark-total-box .total-box-tax-amount {
    font-size: 11.5px;
    color: #9ca3af;
}

/* Terms and Conditions Checkbox */
.checkout-terms-wrapper {
    margin-top: 14px;
}

.terms-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
    cursor: pointer;
}

.terms-checkbox-label a {
    color: #1d3326;
    text-decoration: underline;
    font-weight: 600;
}

.terms-checkbox-label a:hover {
    color: #14241b;
}

.terms-inline-error-msg {
    font-size: 12px;
    color: #dc2626;
    margin-top: 6px;
    font-weight: 600;
}

/* Service Policy Card (Figma Node 2538:3110) */
.checkout-policy-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px 24px;
}

.checkout-policy-card .service-policy-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px;
}

.checkout-policy-card .policy-items-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checkout-policy-card .policy-items-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.4;
}

.checkout-policy-card .policy-items-list li strong {
    color: #111827;
    font-weight: 700;
}

/* 8. Responsive Design for Max Widths 1024px and 768px */
@media (max-width: 1024px) {
    .checkout-grid,
    .checkout-main-layout {
        flex-direction: column !important;
        padding: 0 20px 32px !important;
        gap: 24px !important;
    }

    .checkout-main-col,
    .checkout-details,
    .checkout-sidebar-col,
    .checkout-summary {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    .checkout-sidebar-sticky {
        position: static !important;
    }
}

@media (max-width: 768px) {
    .checkout-top-bar,
    .checkout-stepper-header {
        padding: 12px 16px !important;
    }

    .checkout-top-bar-inner,
    .checkout-stepper-container {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .checkout-stepper-bar,
    .checkout-stepper-nav {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .stepper-step .step-label {
        display: none !important;
    }

    .stepper-step.active .step-label {
        display: inline-block !important;
        font-size: 12px !important;
    }

    .stepper-connector,
    .stepper-divider {
        flex: 1 !important;
        width: auto !important;
    }

    .checkout-form-row.checkout-form-split-2 {
        grid-template-columns: 1fr !important;
    }

    .checkout-input,
    .checkout-field-input {
        font-size: 16px !important;
        min-height: 48px !important;
    }

    .payment-header,
    .payment-card-header {
        padding: 16px !important;
    }

    .payment-body,
    .payment-card-body,
    .payment-form {
        padding: 0 16px !important;
    }

    .payment-method-item.active .payment-body,
    .payment-method-item.active .payment-card-body,
    .payment-method-item.active .payment-form {
        padding: 0 16px 20px !important;
    }

    .checkout-dark-total-box {
        padding: 14px 16px !important;
    }

    .total-box-amount {
        font-size: 20px !important;
    }
}

/* ==========================================================================
   MILESTONE 3 (R3): PANTALLAS DE CONFIRMACIÓN DIFERENCIADAS (FIGMA 2539:3261 & 2559:4325)
   ========================================================================== */

/* 1. Stepper Step 4 Visual Transition & Completed Step 3 */
.checkout-stepper-bar .stepper-step[data-step="3"].completed .step-indicator,
.checkout-stepper-nav .stepper-step[data-step="3"].step-complete .step-indicator,
.confirmation-stepper-nav .stepper-step[data-step="3"].step-complete .step-indicator {
    background-color: var(--locker-mint, #ecfdf5) !important;
    border: 1.5px solid var(--locker-mint-border, #10b981) !important;
    color: var(--locker-mint-text, #065f46) !important;
}

.checkout-stepper-bar .stepper-step[data-step="3"].completed .step-check-icon,
.checkout-stepper-nav .stepper-step[data-step="3"].step-complete .step-check-icon,
.confirmation-stepper-nav .stepper-step[data-step="3"].step-complete .step-check-icon {
    stroke: var(--locker-mint-text, #065f46) !important;
    display: block !important;
}

.checkout-stepper-bar .stepper-step[data-step="4"].active .step-indicator,
.checkout-stepper-nav .stepper-step[data-step="4"].step-active .step-indicator,
.confirmation-stepper-nav .stepper-step[data-step="4"].step-active .step-indicator {
    background-color: #1d3326 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
    border-color: #1d3326 !important;
}

.checkout-stepper-bar .stepper-step[data-step="4"].active,
.checkout-stepper-nav .stepper-step[data-step="4"].step-active,
.confirmation-stepper-nav .stepper-step[data-step="4"].step-active {
    color: #1d3326 !important;
    font-weight: 700 !important;
}

/* Also support full completion state where all 4 steps show checkmark */
.checkout-stepper-bar .stepper-step[data-step="4"].completed .step-indicator,
.checkout-stepper-nav .stepper-step[data-step="4"].step-complete .step-indicator,
.confirmation-stepper-nav .stepper-step[data-step="4"].step-complete .step-indicator {
    background-color: var(--locker-mint, #ecfdf5) !important;
    border: 1.5px solid var(--locker-mint-border, #10b981) !important;
    color: var(--locker-mint-text, #065f46) !important;
}

.stepper-connector.connector-3.active,
.stepper-connector.connector-3.completed,
.stepper-divider.divider-3.active,
.stepper-divider.divider-3.completed,
.confirmation-stepper-nav .stepper-connector.completed {
    background-color: #1d3326 !important;
}

/* Top Bar Confirmation Status Pill (Replaces Hold Timer) */
.confirmation-status-pill,
.confirmation-success-badge,
.confirmation-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--locker-mint, #ecfdf5);
    border: 1.5px solid var(--locker-mint-border, #10b981);
    color: var(--locker-mint-text, #065f46);
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.12);
}

.confirmation-status-pill .status-dot,
.confirmation-pill .pill-dot {
    font-size: 10px;
    display: inline-block;
}

.confirmation-pill.pill-onsite,
.confirmation-pill.pill-online {
    background: #ecfdf5;
    border: 1.5px solid #a7f3d0;
    color: #065f46;
}

/* Hide hold countdown timer on confirmation screen */
.confirmation-active #hold-countdown-banner,
.confirmation-step #hold-countdown-banner,
.confirmation-view #hold-countdown-banner,
#confirmation-step #hold-countdown-banner {
    display: none !important;
}

/* 2. Confirmation Main Layout (2 Columns) */
.confirmation-container,
#confirmation-container,
.confirmation-view {
    max-width: 1280px;
    margin: 28px auto;
    padding: 0 32px 48px;
    box-sizing: border-box;
}

.confirmation-grid,
.confirmation-main-layout,
.confirmation-two-col-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: flex-start;
    box-sizing: border-box;
}

.confirmation-main-col,
.confirmation-details-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.confirmation-sidebar-col,
.confirmation-summary-sidebar {
    width: 380px;
}

.confirmation-sidebar-sticky {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 3. Hero Elevated Confirmation Card */
.confirmation-hero-card {
    background: #ffffff;
    border: 1px solid var(--locker-gray-200, #e5e7eb);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 10px 25px -5px rgba(29, 51, 38, 0.08);
    box-sizing: border-box;
    overflow: hidden;
}

.confirmation-hero-header,
.hero-header-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.confirmation-hero-icon,
.hero-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.confirmation-hero-icon.icon-gold,
.hero-icon-circle.gold-circle {
    background: #fdf8f0;
    border: 1.5px solid var(--locker-gold, #a38c64);
    color: #92400e;
}

.confirmation-hero-icon.icon-mint,
.hero-icon-circle.emerald-circle {
    background: var(--locker-mint, #ecfdf5);
    border: 1.5px solid var(--locker-mint-border, #10b981);
    color: var(--locker-mint-text, #065f46);
}

.confirmation-hero-title,
.hero-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--locker-gray-900, #111827);
    line-height: 1.2;
    margin: 0 0 8px 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.confirmation-hero-subtitle,
.hero-subtitle {
    font-size: 15px;
    line-height: 1.5;
    color: var(--locker-gray-600, #4b5563);
    margin: 0;
}

/* Badges Row */
.confirmation-badges-row,
.hero-badges-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.confirmation-badge,
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.badge-locker-confirmed,
.badge-locker {
    background: var(--locker-gray-100, #f3f4f6);
    border: 1px solid var(--locker-gray-200, #e5e7eb);
    color: var(--locker-gray-900, #111827);
    font-weight: 700;
}

.badge-dates-confirmed,
.badge-dates {
    background: var(--locker-gray-100, #f3f4f6);
    border: 1px solid var(--locker-gray-200, #e5e7eb);
    color: var(--locker-gray-700, #374151);
}

.badge-alert-3h,
.badge-alert-time {
    background: #fffbeb;
    border: 1.5px solid #f59e0b;
    color: #92400e;
    font-weight: 700;
}

/* 4. Titular Banner (Green Institutional with Gold Name) */
.confirmation-titular-banner {
    background: #1d3326 !important;
    color: #ffffff !important;
    border-radius: 12px;
    padding: 24px 32px;
    margin-bottom: 24px;
    box-sizing: border-box;
    box-shadow: 0 4px 14px rgba(29, 51, 38, 0.18);
}

.titular-banner-label,
.titular-upper-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 4px 0;
    display: block;
}

.titular-banner-name,
.titular-main-name,
.confirmation-customer-name,
.gold-highlight {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--locker-gold, #a38c64) !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -0.01em;
    margin: 4px 0 8px 0;
    word-break: break-word;
}

.titular-banner-hint,
.titular-footer-note {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    margin: 8px 0 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.titular-code-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 6px 0;
    flex-wrap: wrap;
}

.reservation-code {
    font-family: monospace;
    font-size: 16px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 6px;
    letter-spacing: 0.05em;
}

.btn-copy-code {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
}

.btn-copy-code:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

.btn-copy-code svg {
    stroke: currentColor !important;
}

.confirmation-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

.confirmation-status-badge.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.confirmation-status-badge.badge-success {
    background: #ecfdf5;
    color: #065f46;
}

.key-pickup-notice-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 12px 0;
    font-size: 13.5px;
    color: #ffffff;
}

/* 5. 3-Hour Arrival Warning Banner (Modalidad A Only) */
.confirmation-alert-3h,
.payment-reminder-banner {
    background: #fffbeb;
    border: 1.5px solid #f59e0b;
    color: #92400e;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.alert-icon-wrap,
.confirmation-alert-3h-icon {
    width: 24px;
    height: 24px;
    color: #f59e0b;
    flex-shrink: 0;
    margin-top: 2px;
}

.alert-title,
.confirmation-alert-3h-title {
    font-size: 16px;
    font-weight: 700;
    color: #92400e;
    margin: 0 0 6px 0;
}

.alert-text,
.confirmation-alert-3h-desc {
    font-size: 13.5px;
    line-height: 1.5;
    color: #78350f;
    margin: 0 0 10px 0;
}

.alert-deadline-box {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.confirmation-deadline-time {
    color: #92400e;
    font-weight: 800;
}

/* Strict Rule: Hide 3-hour alert in Modalidad B */
.modalidad-b .confirmation-alert-3h,
#confirmation-online .confirmation-alert-3h,
.confirmation-online .confirmation-alert-3h,
.confirmation-view[data-method="stripe"] .confirmation-alert-3h {
    display: none !important;
}

/* 6. 4-Step Guide ("¿Qué sigue?") */
.confirmation-steps-guide,
.what-next-card {
    background: #ffffff;
    border: 1px solid var(--locker-gray-200, #e5e7eb);
    border-radius: 16px;
    padding: 24px 28px;
    box-sizing: border-box;
    margin-bottom: 24px;
}

.guide-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.guide-title,
.confirmation-steps-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--locker-gray-900, #111827);
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.guide-steps-list,
.confirmation-steps-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.guide-step-item,
.confirmation-step-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.step-num-icon,
.confirmation-step-badge {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: var(--locker-mint, #ecfdf5);
    border: 1.5px solid var(--locker-mint-border, #10b981);
    color: var(--locker-mint-text, #065f46);
    font-size: 14px;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-content,
.confirmation-step-body {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.step-title,
.confirmation-step-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--locker-gray-900, #111827);
    margin: 0 0 3px 0;
}

.step-desc,
.confirmation-step-detail {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--locker-gray-600, #4b5563);
    margin: 0;
}

.guide-step-divider {
    height: 1px;
    background: var(--locker-gray-200, #e5e7eb);
    margin: 4px 0 4px 48px;
}

/* 7. Action Buttons Grid */
.confirmation-actions,
.confirmation-ctas,
.action-buttons-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 24px;
}

.btn-confirmation-action {
    min-height: 48px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.btn-confirmation-directions,
.btn-primary-green,
#btn-confirmation-directions,
#btn-confirmation-directions-onsite,
#btn-confirmation-directions-online {
    background-color: #1d3326 !important;
    color: #ffffff !important;
    border: none;
    border-radius: 10px;
    min-height: 48px;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.btn-confirmation-directions:hover,
.btn-primary-green:hover,
#btn-confirmation-directions:hover,
#btn-confirmation-directions-onsite:hover,
#btn-confirmation-directions-online:hover {
    background-color: #264433 !important;
    box-shadow: 0 4px 12px rgba(29, 51, 38, 0.2);
    transform: translateY(-1px);
    color: #ffffff !important;
}

.btn-confirmation-ticket,
.btn-secondary-white,
#btn-confirmation-ticket,
#btn-confirmation-ticket-onsite,
#btn-confirmation-ticket-online {
    background-color: #ffffff;
    border: 2px solid var(--locker-gold, #a38c64);
    color: #1d3326;
    border-radius: 10px;
    min-height: 48px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.btn-confirmation-ticket:hover,
.btn-secondary-white:hover,
#btn-confirmation-ticket:hover,
#btn-confirmation-ticket-onsite:hover,
#btn-confirmation-ticket-online:hover {
    background-color: var(--locker-gold, #a38c64);
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(163, 140, 100, 0.25);
    transform: translateY(-1px);
}

.btn-confirmation-home,
.btn-tertiary-ghost,
#btn-confirmation-home,
#btn-confirmation-home-onsite,
#btn-confirmation-home-online {
    background-color: #ffffff;
    border: 1px solid var(--locker-gray-300, #d1d5db);
    color: var(--locker-gray-700, #374151);
    border-radius: 10px;
    min-height: 48px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.btn-confirmation-home:hover,
.btn-tertiary-ghost:hover,
#btn-confirmation-home:hover,
#btn-confirmation-home-onsite:hover,
#btn-confirmation-home-online:hover {
    border-color: #1d3326;
    color: #1d3326;
    background-color: var(--locker-gray-50, #f9fafb);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

/* 8. Confirmation Sidebar Styles */
.confirmation-summary-card,
.confirmation-sidebar-card {
    background: #ffffff;
    border: 1px solid var(--locker-gray-200, #e5e7eb);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    margin-bottom: 16px;
}

.sidebar-locker-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--locker-gray-50, #f9fafb);
    border-radius: 10px;
    margin: 16px 0;
}

.locker-num-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--locker-gray-900, #111827);
    margin: 0 0 2px 0;
}

.locker-features {
    font-size: 12px;
    color: var(--locker-gray-600, #4b5563);
}

.sidebar-meta-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13.5px;
}

.meta-label {
    color: var(--locker-gray-600, #4b5563);
}

.meta-value {
    color: var(--locker-gray-900, #111827);
    font-weight: 600;
}

.sidebar-total-card,
.confirmation-total-box {
    background: #1d3326;
    color: #ffffff;
    border-radius: 12px;
    padding: 16px 20px;
    margin: 16px 0 8px 0;
    box-shadow: 0 4px 12px rgba(29, 51, 38, 0.15);
}

.total-row-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-caption,
.confirmation-total-label {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
}

.total-tax-label,
.confirmation-total-tax {
    font-size: 11px;
    font-weight: 600;
    color: #a7f3d0;
}

.total-number,
.confirmation-total-amount {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -0.01em;
}

.total-payment-notice,
.confirmation-reception-notice {
    font-size: 12px;
    color: #a7f3d0;
    margin: 8px 0 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.total-payment-notice.success,
.confirmation-paid-badge {
    color: #a7f3d0;
}

.confirmation-contact-card {
    background: #ffffff;
    border: 1px solid var(--locker-gray-200, #e5e7eb);
    border-radius: 16px;
    padding: 20px 24px;
    box-sizing: border-box;
}

.contact-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.contact-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--locker-gray-900, #111827);
    margin: 0;
}

.contact-details-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
}

.contact-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-label {
    color: var(--locker-gray-600, #4b5563);
}

.contact-val {
    color: var(--locker-gray-900, #111827);
    font-weight: 600;
}

.confirmation-titular-banner.titular-banner-onsite,
.titular-banner-onsite {
    display: none !important;
}

.btn-confirmation-calendar,
#btn-confirmation-calendar-onsite,
#btn-confirmation-calendar-online,
.confirmation-calendar-action .btn-confirmation-calendar,
.locker-rental-map-app .btn-confirmation-calendar,
button.btn-confirmation-calendar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: #1d3326 !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
    border: 1.5px solid #1d3326 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-top: 14px !important;
    width: 100% !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    cursor: pointer !important;
    outline: none !important;
}

.btn-confirmation-calendar:hover,
#btn-confirmation-calendar-onsite:hover,
#btn-confirmation-calendar-online:hover,
.confirmation-calendar-action .btn-confirmation-calendar:hover,
.locker-rental-map-app .btn-confirmation-calendar:hover,
button.btn-confirmation-calendar:hover {
    background: #1d3326 !important;
    background-color: #1d3326 !important;
    border-color: #1d3326 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(29, 51, 38, 0.2) !important;
    transform: translateY(-1px) !important;
}

.btn-confirmation-calendar .cal-icon,
.btn-confirmation-calendar svg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    stroke: currentColor !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    transition: stroke 0.2s ease !important;
}

.btn-confirmation-calendar .cal-text {
    color: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* 9. Responsive Media Queries for Confirmation Screen */
@media (max-width: 1024px) {
    .confirmation-grid,
    .confirmation-main-layout,
    .confirmation-two-col-layout {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .confirmation-container,
    #confirmation-container {
        padding: 0 20px 32px !important;
    }

    .confirmation-main-col,
    .confirmation-sidebar-col,
    .confirmation-details-panel,
    .confirmation-summary-sidebar {
        width: 100% !important;
    }

    .confirmation-sidebar-sticky {
        position: static !important;
    }
}

@media (max-width: 768px) {
    .confirmation-hero-card {
        padding: 20px 16px !important;
    }

    .confirmation-hero-title,
    .hero-title {
        font-size: 22px !important;
    }

    .confirmation-hero-subtitle,
    .hero-subtitle {
        font-size: 14px !important;
    }

    .confirmation-titular-banner {
        padding: 18px 20px !important;
    }

    .titular-banner-name,
    .titular-main-name,
    .confirmation-customer-name,
    .gold-highlight {
        font-size: 24px !important;
    }

    .titular-banner-label,
    .titular-upper-label {
        font-size: 11px !important;
    }

    .confirmation-alert-3h,
    .payment-reminder-banner {
        padding: 16px !important;
    }

    .alert-title,
    .confirmation-alert-3h-title {
        font-size: 15px !important;
    }

    .alert-text,
    .confirmation-alert-3h-desc {
        font-size: 13px !important;
    }

    .confirmation-badges-row,
    .hero-badges-row {
        gap: 8px !important;
    }

    .confirmation-actions,
    .confirmation-ctas,
    .action-buttons-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .btn-confirmation-directions,
    .btn-primary-green,
    #btn-confirmation-directions,
    #btn-confirmation-directions-onsite,
    #btn-confirmation-directions-online,
    .btn-confirmation-ticket,
    .btn-secondary-white,
    #btn-confirmation-ticket,
    #btn-confirmation-ticket-onsite,
    #btn-confirmation-ticket-online,
    .btn-confirmation-home,
    .btn-tertiary-ghost,
    #btn-confirmation-home,
    #btn-confirmation-home-onsite,
    #btn-confirmation-home-online {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 15px !important;
    }

    .guide-step-item,
    .confirmation-step-item {
        gap: 12px !important;
    }

    .step-title,
    .confirmation-step-name {
        font-size: 14px !important;
    }

    .step-desc,
    .confirmation-step-detail {
        font-size: 13px !important;
    }
}

/* ==========================================================================
   MILESTONE 4: TICKET VOUCHER & PRINT OPTIMIZATION (R4, Nodes 2558:3809 & 2559:4171)
   ========================================================================== */

/* 1. Modal Overlay & Screen Presentation */
#locker-ticket-modal,
.voucher-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2147483647 !important; /* Maximum 32-bit integer: strictly above all headers & navbars */
    display: none;
    align-items: flex-start !important;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    overflow-y: auto !important;
    padding: 32px 16px !important;
    box-sizing: border-box !important;
}

#locker-ticket-modal.active,
.voucher-modal-overlay.active {
    display: flex !important;
    z-index: 2147483647 !important;
}

/* Guarantee ticket modal is always above theme / Elementor header */
body.voucher-modal-open,
html.voucher-modal-open {
    overflow: hidden !important;
}

body.voucher-modal-open header,
body.voucher-modal-open .elementor-location-header,
body.voucher-modal-open header[data-elementor-type="header"],
body.voucher-modal-open .site-header,
body.voucher-modal-open .main-header,
body.voucher-modal-open .elementor-sticky,
body.voucher-modal-open .elementor-section.elementor-sticky,
body.voucher-modal-open div[data-elementor-type="header"] {
    z-index: 10 !important;
}

.voucher-modal-backdrop,
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
}

.voucher-dialog,
.voucher-modal-dialog,
#locker-ticket-modal .modal-dialog,
#locker-ticket-modal .voucher-modal-dialog {
    position: relative;
    max-width: 540px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
}

/* Top Floating Actions Bar */
.voucher-actions,
.voucher-modal-actions,
#locker-ticket-modal .voucher-actions,
#locker-ticket-modal .voucher-modal-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    box-sizing: border-box;
}

.modal-actions-left {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.modal-actions-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Status Loader Pill: Completely hidden per user preference */
.voucher-status-loader,
#voucher-status-loader {
    display: none !important;
}

/* Post-download secondary actions (Imprimir en papel / Volver a descargar) */
.voucher-post-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-voucher-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}

.btn-close-voucher {
    background: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
    padding: 10px 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-close-voucher:hover {
    background: #f3f4f6;
    color: #111827;
    border-color: #9ca3af;
}

.btn-download-voucher-pdf,
#btn-download-voucher-pdf {
    background: #1d3326;
    color: #ffffff;
    border: 1px solid #1d3326;
    padding: 10px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-weight: 600;
}

.btn-download-voucher-pdf:hover,
#btn-download-voucher-pdf:hover {
    background: #14241b;
    border-color: #14241b;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.12);
}

.btn-download-voucher-pdf:disabled,
#btn-download-voucher-pdf:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-print-voucher,
#btn-print-voucher {
    background: #ffffff;
    color: #1d3326;
    border: 1px solid #1d3326;
    padding: 10px 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font-weight: 600;
}

.btn-print-voucher:hover,
#btn-print-voucher:hover {
    background: #f0fdf4;
    border-color: #1d3326;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------------
   PDF Generation Smooth Luxury Loader Overlay & Offscreen Render Sandbox
   -------------------------------------------------------------------------- */
#locker-pdf-loader.locker-pdf-loader-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}

#locker-pdf-loader.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.pdf-loader-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.76);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.pdf-loader-card {
    position: relative;
    z-index: 2;
    background: #ffffff;
    border-radius: 24px;
    padding: 34px 30px 28px;
    max-width: 380px;
    width: 90%;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: scale(0.92) translateY(8px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#locker-pdf-loader.active .pdf-loader-card {
    transform: scale(1) translateY(0);
}

.pdf-loader-icon-wrap {
    position: relative;
    width: 76px;
    height: 76px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-loader-pulse-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(163, 140, 100, 0.25) 0%, rgba(163, 140, 100, 0) 70%);
    animation: pdfPulseRing 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.pdf-loader-icon-box {
    position: relative;
    width: 66px;
    height: 66px;
    border-radius: 20px;
    background: linear-gradient(135deg, #1d3326 0%, #2b4c39 100%);
    color: #e5b66d;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 24px -6px rgba(29, 51, 38, 0.4);
    border: 1px solid rgba(229, 182, 109, 0.25);
    transition: all 0.3s ease;
}

.pdf-loader-ticket-icon {
    animation: pdfIconFloat 2.6s ease-in-out infinite;
    stroke: #e5b66d;
}

.pdf-loader-check-icon {
    display: none;
    stroke: #48bb78;
}

#locker-pdf-loader.is-ready .pdf-loader-icon-box {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%);
    border-color: rgba(72, 187, 120, 0.4);
}

#locker-pdf-loader.is-ready .pdf-loader-ticket-icon {
    display: none;
}

#locker-pdf-loader.is-ready .pdf-loader-check-icon {
    display: block;
    animation: pdfCheckPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pdf-loader-title {
    font-size: 18px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 6px 0;
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.pdf-loader-subtitle {
    font-size: 13.5px;
    color: #6b7280;
    margin: 0 0 22px 0;
    line-height: 1.45;
}

.pdf-loader-progress-track {
    width: 100%;
    height: 6px;
    background: #f3f4f6;
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
    margin-bottom: 14px;
}

.pdf-loader-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 45%;
    background: linear-gradient(90deg, #a38c64 0%, #e5b66d 50%, #1d3326 100%);
    border-radius: 9999px;
    animation: pdfProgressFlow 1.8s ease-in-out infinite;
}

#locker-pdf-loader.is-ready .pdf-loader-progress-bar {
    left: 0 !important;
    width: 100% !important;
    background: #15803d !important;
    animation: none !important;
    transition: width 0.3s ease;
}

.pdf-loader-hint {
    font-size: 11.5px;
    color: #9ca3af;
    display: block;
    line-height: 1.35;
}

@keyframes pdfPulseRing {
    0% { transform: scale(0.92); opacity: 0.85; }
    50% { transform: scale(1.22); opacity: 0.2; }
    100% { transform: scale(0.92); opacity: 0.85; }
}

@keyframes pdfIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3.5px); }
}

@keyframes pdfProgressFlow {
    0% { left: -45%; width: 35%; }
    50% { width: 65%; }
    100% { left: 105%; width: 35%; }
}

@keyframes pdfCheckPop {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Off-screen Unconstrained Render Sandbox for 100% Complete PDF Generation */
#pdf-render-sandbox {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 520px !important;
    min-width: 520px !important;
    max-width: 520px !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    z-index: 999999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
}

#pdf-render-sandbox .voucher-minimal {
    width: 520px !important;
    max-width: 520px !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    overflow: visible !important;
}

/* 2. 600px Voucher Card Styling */
.printable-voucher,
.printable-ticket-wrapper,
#printable-ticket-wrapper {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
}

.voucher-card,
.ticket-card,
.voucher-ticket {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    position: relative;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #111827;
}

/* ==========================================================================
   CAMPUS WORTEV RECEIPT PRINTER (Machine Chassis, LCD Screen & Stepped Feed)
   ========================================================================== */

/* 1. Modal Overlay & Dialog Container Overrides */
#locker-ticket-modal.voucher-modal-overlay {
    background: rgba(4, 10, 6, 0.82) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 36px 16px 80px 16px !important;
    z-index: 2147483647 !important;
}

#locker-ticket-modal .voucher-modal-dialog {
    max-width: 490px !important;
    animation: modalSpringUp 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes modalSpringUp {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 2. Receipt Printer Machine Chassis */
.printer-machine-chassis {
    position: relative;
    z-index: 30;
    width: 100%;
    background: linear-gradient(175deg, #1d3326 0%, #15251c 65%, #0d1712 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px 20px 8px 8px;
    padding: 14px 18px 20px 18px;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.65),
        0 10px 24px -6px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
}

.printer-chassis-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin-bottom: 12px;
    padding: 0 38px;
}

.printer-chassis-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
}

.printer-brand-logo-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.printer-chassis-logo-img {
    height: 28px !important;
    max-height: 28px !important;
    width: auto !important;
    max-width: 175px !important;
    display: block !important;
    object-fit: contain !important;
}

.printer-brand-name {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #e5b66d;
    text-transform: uppercase;
}

.printer-model-tag {
    display: none !important;
}

.printer-chassis-controls {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
}

.printer-status-led-pill,
.printer-status-led-dot,
.printer-screen-left,
.printer-screen-indicator,
.printer-screen-status-wrap,
.printer-screen-status-title,
.printer-screen-status-sub {
    display: none !important;
}

.btn-printer-close,
#btn-close-voucher-modal,
.printer-chassis-controls .btn-printer-close,
.printer-machine-chassis #btn-close-voucher-modal {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.8) !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.btn-printer-close:hover,
#btn-close-voucher-modal:hover,
.printer-chassis-controls .btn-printer-close:hover,
.printer-machine-chassis #btn-close-voucher-modal:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    transform: scale(1.06);
}

.btn-printer-close svg,
#btn-close-voucher-modal svg {
    stroke: currentColor !important;
    width: 18px !important;
    height: 18px !important;
}

/* 3. Recessed Digital Screen / Actions Dock */
.printer-digital-screen {
    position: relative;
    background: #08100a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 8px 12px;
    box-shadow: 
        inset 0 3px 8px rgba(0, 0, 0, 0.8),
        inset 0 1px 2px rgba(0, 0, 0, 0.95),
        0 1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 44px;
    box-sizing: border-box;
}

.voucher-status-loader,
#voucher-status-loader {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    color: #e5b66d;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 2px 4px;
}

.voucher-loader-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #e5b66d;
}

#locker-ticket-modal.is-printing #voucher-status-loader {
    display: inline-flex !important;
}

#locker-ticket-modal.is-printing #voucher-post-actions {
    display: none !important;
}

.printer-screen-actions,
.voucher-post-actions,
#voucher-post-actions {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

.btn-printer-action,
.printer-screen-actions .btn-printer-action,
.voucher-post-actions .btn-printer-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-family: inherit !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    border-radius: 7px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

.btn-printer-action-print,
#btn-print-voucher.btn-printer-action-print,
.printer-digital-screen #btn-print-voucher {
    background: rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
}

.btn-printer-action-print:hover,
#btn-print-voucher.btn-printer-action-print:hover,
.printer-digital-screen #btn-print-voucher:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    background-color: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.btn-printer-action-download,
#btn-download-voucher-pdf.btn-printer-action-download,
.printer-digital-screen #btn-download-voucher-pdf {
    background: #e5b66d !important;
    background-color: #e5b66d !important;
    color: #1d3326 !important;
    border: 1px solid #d4a359 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
    font-weight: 800 !important;
}

.btn-printer-action-download:hover,
#btn-download-voucher-pdf.btn-printer-action-download:hover,
.printer-digital-screen #btn-download-voucher-pdf:hover {
    background: #f2c782 !important;
    background-color: #f2c782 !important;
    color: #14241b !important;
    border-color: #e5b66d !important;
    transform: translateY(-1px);
}

/* 4. Printer Mouth Slit */
.printer-slot-mouth {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: -5px;
    height: 10px;
    background: #050a06;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        inset 0 4px 6px rgba(0, 0, 0, 0.95),
        0 1px 0 rgba(255, 255, 255, 0.05);
    z-index: 40;
}

.printer-mouth-bezel {
    position: absolute;
    inset: 2px 8px;
    background: #020503;
    border-radius: 3px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 1);
}

/* 5. Printer Output Container */
.receipt-printer-output,
.printable-ticket-wrapper.receipt-printer-output {
    position: relative;
    z-index: 20;
    width: 100%;
    max-width: 376px !important;
    margin: -6px auto 0 auto !important;
    padding-top: 6px;
    overflow: hidden; /* Clips paper during stepped feed! */
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.receipt-printer-output.is-complete,
.printable-ticket-wrapper.is-complete {
    overflow: visible !important;
}

.receipt-mouth-shadow {
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 14px;
    background: rgba(0, 0, 0, 0.7);
    filter: blur(5px);
    z-index: 25;
    pointer-events: none;
    border-radius: 4px;
}

/* 6. Stepped Paper Feed Motion Wrapper */
.receipt-feed-motion-wrapper {
    position: relative;
    width: 100%;
    transform: translateY(calc(-100% + 4px));
    transition: transform 0.16s ease-out;
}

#locker-ticket-modal.is-printing .receipt-feed-motion-wrapper,
#locker-ticket-modal.active.is-printing .receipt-feed-motion-wrapper,
.printable-ticket-wrapper.is-printing .receipt-feed-motion-wrapper {
    animation: receiptSteppedFeed 2.4s linear forwards !important;
}

#locker-ticket-modal.is-complete .receipt-feed-motion-wrapper,
.printable-ticket-wrapper.is-complete .receipt-feed-motion-wrapper {
    transform: translateY(0%) !important;
}

/* 20-stop stepped feed keyframes */
@keyframes receiptSteppedFeed {
    0%    { transform: translateY(calc(-100% + 4px)); }
    7.5%  { transform: translateY(-91%); }
    10.5% { transform: translateY(-91%); }
    18%   { transform: translateY(-81%); }
    21%   { transform: translateY(-81%); }
    28.5% { transform: translateY(-70%); }
    31.5% { transform: translateY(-70%); }
    39%   { transform: translateY(-58%); }
    42%   { transform: translateY(-58%); }
    49.5% { transform: translateY(-45%); }
    52.5% { transform: translateY(-45%); }
    60%   { transform: translateY(-32%); }
    63%   { transform: translateY(-32%); }
    70.5% { transform: translateY(-20%); }
    73.5% { transform: translateY(-20%); }
    81%   { transform: translateY(-10%); }
    84%   { transform: translateY(-10%); }
    91.5% { transform: translateY(-3%); }
    94.5% { transform: translateY(-3%); }
    100%  { transform: translateY(0%); }
}

/* 7. The Receipt Paper Article with 40-Tooth Sawtooth Edge */
.voucher-ticket.voucher-minimal {
    background: #ffffff;
    border-radius: 4px 4px 0 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-bottom: none !important;
    position: relative;
    width: 100%;
    max-width: 376px !important;
    margin: 0 auto;
    box-shadow: 
        0 18px 36px -8px rgba(0, 0, 0, 0.22),
        0 6px 14px -4px rgba(0, 0, 0, 0.1) !important;
    /* 40-tooth sawtooth clipPath */
    clip-path: polygon(
        0 0, 100% 0, 100% calc(100% - 4px),
        98.75% 100%, 97.5% calc(100% - 4px),
        96.25% 100%, 95% calc(100% - 4px),
        93.75% 100%, 92.5% calc(100% - 4px),
        91.25% 100%, 90% calc(100% - 4px),
        88.75% 100%, 87.5% calc(100% - 4px),
        86.25% 100%, 85% calc(100% - 4px),
        83.75% 100%, 82.5% calc(100% - 4px),
        81.25% 100%, 80% calc(100% - 4px),
        78.75% 100%, 77.5% calc(100% - 4px),
        76.25% 100%, 75% calc(100% - 4px),
        73.75% 100%, 72.5% calc(100% - 4px),
        71.25% 100%, 70% calc(100% - 4px),
        68.75% 100%, 67.5% calc(100% - 4px),
        66.25% 100%, 65% calc(100% - 4px),
        63.75% 100%, 62.5% calc(100% - 4px),
        61.25% 100%, 60% calc(100% - 4px),
        58.75% 100%, 57.5% calc(100% - 4px),
        56.25% 100%, 55% calc(100% - 4px),
        53.75% 100%, 52.5% calc(100% - 4px),
        51.25% 100%, 50% calc(100% - 4px),
        48.75% 100%, 47.5% calc(100% - 4px),
        46.25% 100%, 45% calc(100% - 4px),
        43.75% 100%, 42.5% calc(100% - 4px),
        41.25% 100%, 40% calc(100% - 4px),
        38.75% 100%, 37.5% calc(100% - 4px),
        36.25% 100%, 35% calc(100% - 4px),
        33.75% 100%, 32.5% calc(100% - 4px),
        31.25% 100%, 30% calc(100% - 4px),
        28.75% 100%, 27.5% calc(100% - 4px),
        26.25% 100%, 25% calc(100% - 4px),
        23.75% 100%, 22.5% calc(100% - 4px),
        21.25% 100%, 20% calc(100% - 4px),
        18.75% 100%, 17.5% calc(100% - 4px),
        16.25% 100%, 15% calc(100% - 4px),
        13.75% 100%, 12.5% calc(100% - 4px),
        11.25% 100%, 10% calc(100% - 4px),
        8.75% 100%, 7.5% calc(100% - 4px),
        6.25% 100%, 5% calc(100% - 4px),
        3.75% 100%, 2.5% calc(100% - 4px),
        1.25% 100%, 0% calc(100% - 4px)
    ) !important;
    padding-bottom: 22px !important;
}

.btn-spinner-svg {
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

#pdf-render-sandbox .voucher-ticket.voucher-minimal {
    animation: none !important;
    transform: none !important;
    clip-path: none !important;
    border-radius: 12px !important;
    border: 1px solid #cbd5e1 !important;
    padding-bottom: 24px !important;
    box-shadow: none !important;
}

@media print {
    .printer-machine-chassis,
    .receipt-mouth-shadow {
        display: none !important;
    }
    .receipt-printer-output,
    .printable-ticket-wrapper.receipt-printer-output {
        overflow: visible !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        max-width: 600px !important;
    }
    .receipt-feed-motion-wrapper {
        transform: none !important;
        animation: none !important;
    }
    .voucher-ticket.voucher-minimal {
        animation: none !important;
        transform: none !important;
        clip-path: none !important;
        border-radius: 12px !important;
        border: 1px solid #cbd5e1 !important;
        padding-bottom: 24px !important;
        box-shadow: none !important;
    }
}

.voucher-minimal .voucher-header {
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.voucher-minimal .voucher-header.header-online {
    background: #1d3326;
    color: #ffffff;
}

.voucher-minimal .voucher-header.header-onsite {
    background: #a38c64 !important;
    color: #ffffff !important;
}

.voucher-minimal .voucher-header.header-onsite .voucher-brand-title,
.voucher-minimal .voucher-header.header-onsite .voucher-brand-sub {
    color: #ffffff !important;
}

.voucher-brand-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: block;
    line-height: 1.2;
}

.voucher-brand-sub {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    opacity: 0.85;
    text-transform: uppercase;
    display: block;
}

.voucher-minimal .voucher-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.voucher-minimal .header-online .badge-paid {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

.voucher-minimal .header-onsite .badge-pending-gold {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}

.voucher-minimal .header-onsite .badge-pending-gold svg {
    stroke: #ffffff !important;
}

.voucher-hero {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    padding: 14px 18px 12px 18px;
    text-align: center;
    box-sizing: border-box;
}

.voucher-hero-locker .locker-tag {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b7280;
    display: block;
    margin-bottom: 2px;
}

.voucher-hero-locker .locker-display-num {
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    color: #1d3326;
    margin: 0 0 3px 0;
    letter-spacing: -0.02em;
}

.voucher-hero-locker .locker-campus-tag {
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: block;
}

.voucher-deadline-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #fffbeb;
    border-bottom: 1px solid #fef3c7;
    padding: 6px 14px;
    font-size: 11px;
    color: #92400e;
    font-weight: 600;
    text-align: center;
}

.voucher-deadline-pill strong {
    font-weight: 800;
    color: #78350f;
}

.voucher-minimal-body {
    padding: 16px 18px 14px 18px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #ffffff;
}

.voucher-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 10px;
    column-gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #cbd5e1;
    box-sizing: border-box;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.info-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
}

.info-value {
    font-size: 12px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
    word-break: break-word;
}

.info-value.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 700;
    color: #1d3326;
}

.info-total {
    font-size: 12.5px;
    font-weight: 800;
    color: #1d3326;
}

.status-paid-text {
    color: #15803d;
    font-weight: 700;
}

.status-pending-text {
    color: #b45309;
    font-weight: 700;
}

.voucher-simple-note {
    font-size: 10.5px;
    color: #6b7280;
    line-height: 1.4;
    text-align: center;
    margin: 0;
    padding: 10px 8px 12px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #f3f4f6;
}

/* Mobile Responsive Polish for Receipt Printer Modal (Compact and clean, avoids cramped look) */
@media (max-width: 480px) {
    #locker-ticket-modal.voucher-modal-overlay {
        padding: 14px 10px 30px 10px !important;
    }
    #locker-ticket-modal .voucher-modal-dialog {
        max-width: 100% !important;
    }
    .printer-machine-chassis {
        padding: 12px 14px 18px 14px !important;
        border-radius: 16px 16px 6px 6px !important;
    }
    .printer-chassis-logo-img {
        height: 24px !important;
        max-height: 24px !important;
        max-width: 150px !important;
    }
    /* In mobile top bar, hide model tag so brand pill and controls breathe */
    .printer-model-tag {
        display: none !important;
    }
    /* In LCD screen, hide secondary subtext to keep height compact */
    .printer-screen-status-sub {
        display: none !important;
    }
    .printer-screen-status-title {
        font-size: 13px !important;
        font-weight: 700 !important;
    }
    .printer-digital-screen {
        padding: 8px 10px !important;
        min-height: 46px !important;
        gap: 8px !important;
    }
    .btn-printer-action-print,
    .btn-printer-action-download {
        font-size: 11.5px !important;
        padding: 7px 11px !important;
        font-weight: 700 !important;
    }
    .printer-slot-mouth {
        left: 14px !important;
        right: 14px !important;
    }
    .receipt-printer-output,
    .voucher-ticket.voucher-minimal {
        max-width: 100% !important;
    }
    .voucher-minimal .voucher-header {
        padding: 10px 14px !important;
    }
    .voucher-minimal .voucher-brand-title {
        font-size: 11.5px !important;
    }
    .voucher-minimal .voucher-status-pill {
        font-size: 9.5px !important;
        padding: 3px 8px !important;
    }
    .voucher-hero {
        padding: 10px 12px 8px 12px !important;
    }
    .voucher-hero-locker .locker-display-num {
        font-size: 28px !important;
        margin-bottom: 0 !important;
    }
    /* Hide redundant campus name inside hero on mobile */
    .voucher-hero-locker .locker-campus-tag {
        display: none !important;
    }
    .voucher-deadline-pill {
        padding: 5px 8px !important;
        font-size: 10px !important;
    }
    .voucher-minimal-body {
        padding: 10px 14px 12px 14px !important;
    }
    .voucher-info-grid {
        row-gap: 7px !important;
        column-gap: 8px !important;
        padding-bottom: 8px !important;
    }
    .info-label {
        font-size: 8.5px !important;
    }
    .info-value {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }
    /* Remove redundant note on mobile so ticket fits completely on screen without scrolling */
    .voucher-simple-note {
        display: none !important;
    }
    .voucher-barcode-section {
        padding-top: 8px !important;
    }
    .voucher-barcode-svg {
        width: 170px !important;
        height: 28px !important;
    }
    .barcode-folio-legend {
        font-size: 10px !important;
    }
}

/* 3. Voucher Header (Compra vs Reserva) */
.voucher-header {
    padding: 24px 28px 20px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    color: #ffffff;
}

/* Header Ticket Compra: Institutional Dark Green #1d3326 */
.voucher-header-compra,
.voucher-header.header-online {
    background: #1d3326;
    background: linear-gradient(135deg, #1d3326 0%, #15271d 100%);
    color: #ffffff;
}

/* Header Ticket Reserva: Institutional Gold #a38c64 */
.voucher-header-reserva,
.voucher-header.header-onsite {
    background: #a38c64 !important;
    background: linear-gradient(135deg, #a38c64 0%, #8f7952 100%) !important;
    color: #ffffff !important;
}

.voucher-header-top,
.voucher-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.voucher-header-left {
    flex: 1;
    min-width: 0;
}

.voucher-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
    gap: 6px;
}

.voucher-type-badge,
.voucher-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    margin-bottom: 8px;
}

.voucher-header-compra .voucher-type-badge,
.voucher-header.header-online .badge-paid {
    background: rgba(163, 140, 100, 0.18);
    border: 1px solid rgba(163, 140, 100, 0.45);
    color: #e9dec9;
}

.voucher-header-reserva .voucher-type-badge,
.voucher-header.header-onsite .badge-pending-gold {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}

.voucher-brand-logo-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.voucher-brand-logo-img {
    height: 28px;
    max-height: 28px;
    width: auto;
    max-width: 140px;
    display: block;
    object-fit: contain;
}

.voucher-header-left {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.voucher-campus-brand,
.voucher-brand-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.brand-campus-title {
    font-weight: 800;
    font-size: 12px;
}

.brand-campus-sub {
    font-size: 9px;
    opacity: 0.85;
    letter-spacing: 0.15em;
}

.voucher-header-compra .voucher-campus-brand,
.voucher-header.header-online .voucher-brand-logo {
    color: rgba(255, 255, 255, 0.9);
}

.voucher-header-reserva .voucher-campus-brand,
.voucher-header.header-onsite .voucher-brand-logo {
    color: #ffffff;
}

.voucher-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px 0;
    line-height: 1.25;
}

.voucher-header-compra .voucher-title,
.voucher-header.header-online .voucher-title {
    color: #ffffff;
}

.voucher-header-compra .voucher-locker-accent,
.voucher-header.header-online #voucher-locker-number-online {
    color: #e5b66d;
}

.voucher-header-reserva .voucher-title,
.voucher-header.header-onsite .voucher-title {
    color: #ffffff !important;
}

.voucher-header-reserva .voucher-locker-accent,
.voucher-header.header-onsite #voucher-locker-number-onsite {
    color: #ffffff;
}

.voucher-emission-meta {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

.voucher-header-compra .voucher-emission-meta,
.voucher-header.header-online .voucher-emission-meta {
    color: rgba(255, 255, 255, 0.75);
}

.voucher-header-reserva .voucher-emission-meta,
.voucher-header.header-onsite .voucher-emission-meta {
    color: rgba(29, 51, 38, 0.85);
    font-weight: 500;
}

.voucher-header-total,
.voucher-header-total-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
    margin-top: 4px;
}

.total-caption {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.voucher-header-compra .total-caption,
.voucher-header.header-online .total-caption {
    color: rgba(255, 255, 255, 0.75);
}

.voucher-header-reserva .total-caption,
.voucher-header.header-onsite .total-caption {
    color: rgba(29, 51, 38, 0.85);
    font-weight: 700;
}

.total-figure {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.voucher-header-compra .total-figure,
.voucher-header.header-online .total-figure {
    color: #ffffff;
}

.voucher-header-reserva .total-figure,
.voucher-header.header-onsite .total-figure {
    color: #1d3326;
}

.total-tax-note {
    font-size: 11px;
    margin-top: 2px;
}

.voucher-header-compra .total-tax-note,
.voucher-header.header-online .total-tax-note {
    color: rgba(255, 255, 255, 0.65);
}

.voucher-header-reserva .total-tax-note,
.voucher-header.header-onsite .total-tax-note {
    color: rgba(29, 51, 38, 0.7);
}

/* 3-Hour Deadline Urgency Box (Onsite) */
.voucher-deadline-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fffbeb;
    border-bottom: 1px solid #fef3c7;
    padding: 12px 28px;
    box-sizing: border-box;
}

.deadline-banner-icon {
    flex-shrink: 0;
}

.deadline-banner-text {
    flex: 1;
    font-size: 12.5px;
    color: #92400e;
}

.deadline-banner-title {
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
}

.deadline-highlight-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.deadline-time-tag {
    background: #fde68a;
    color: #78350f;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Tear Notch Strip */
.ticket-tear-strip {
    position: relative;
    height: 20px;
    background: #ffffff;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.tear-notch {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    top: 0;
}

.notch-left {
    left: -10px;
}

.notch-right {
    right: -10px;
}

.tear-line {
    width: 100%;
    border-bottom: 2px dashed #e5e7eb;
    margin: 0 16px;
}

/* 4. Voucher Body Content */
.voucher-body {
    padding: 24px 28px 28px;
    box-sizing: border-box;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Locker Highlight Card */
.voucher-locker-highlight,
.voucher-locker-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 18px;
    box-sizing: border-box;
}

.voucher-locker-badge,
.voucher-cube-badge {
    background: #1d3326;
    color: #ffffff;
    border-radius: 8px;
    width: 52px;
    height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(29, 51, 38, 0.15);
}

.voucher-cube-badge.badge-gold {
    background: #a38c64;
}

.voucher-locker-badge .badge-label,
.voucher-cube-badge .cube-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.85;
    text-transform: uppercase;
    line-height: 1;
}

.voucher-locker-badge .badge-number,
.voucher-cube-badge .cube-num {
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    margin-top: 2px;
}

.voucher-locker-details,
.voucher-locker-specs {
    flex: 1;
    min-width: 0;
}

.locker-type-name,
.locker-specs-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px 0;
}

.locker-specs-row,
.locker-specs-pills {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #4b5563;
}

.spec-item,
.spec-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f3f4f6;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11.5px;
}

.voucher-locker-price-pill,
.voucher-locker-pricing {
    text-align: right;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.price-val,
.locker-rate-figure {
    font-size: 16px;
    font-weight: 700;
    color: #1d3326;
    font-variant-numeric: tabular-nums;
}

.price-duration,
.locker-rate-days {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
}

/* Fields Grid */
.voucher-fields-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #e5e7eb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.voucher-field-cell,
.field-grid-cell {
    background: #ffffff;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.field-label-row,
.cell-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 2px;
}

.field-primary-val,
.cell-primary {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-secondary-val,
.cell-secondary {
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cost Breakdown Card with Tabular Figures and Dotted Leader Lines */
.voucher-breakdown-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}

.breakdown-header-row,
.breakdown-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9fafb;
    padding: 9px 16px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}

.breakdown-item-row,
.breakdown-table-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 16px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
    color: #374151;
}

.breakdown-item-row .item-concept,
.breakdown-table-row .td-concept {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    position: relative;
    margin-right: 12px;
    min-width: 0;
}

.breakdown-item-row .item-concept::after,
.breakdown-table-row .td-concept::after {
    content: '';
    flex: 1;
    border-bottom: 1px dashed #d1d5db;
    margin: 0 10px;
    position: relative;
    top: -2px;
}

.breakdown-item-row .item-amount,
.breakdown-table-row .td-amount {
    font-weight: 600;
    color: #111827;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.breakdown-total-bar,
.breakdown-total-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1d3326;
    color: #ffffff;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 700;
}

.breakdown-total-bar .total-bar-label,
.breakdown-total-strip .total-strip-label {
    color: #ffffff;
}

.breakdown-total-bar .total-bar-amount,
.breakdown-total-strip .total-strip-amount {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

/* Folio & Tx Strip */
.voucher-tx-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
}

.tx-meta-block,
.tx-folio-block {
    display: flex;
    align-items: center;
    gap: 6px;
}

.meta-label {
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
}

.voucher-folio {
    font-weight: 800;
    color: #1d3326;
    background: #ecfdf5;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #a7f3d0;
}

.badge-warning-amber {
    background: #fef3c7;
    color: #92400e;
    font-weight: 700;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
}

/* Instructions Card (Onsite) */
.voucher-instructions-card {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 14px 18px;
    box-sizing: border-box;
}

.instructions-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.inst-title {
    font-size: 13px;
    font-weight: 700;
    color: #166534;
    margin: 0;
}

.inst-desc {
    font-size: 12px;
    color: #15803d;
    line-height: 1.5;
    margin: 0;
}

/* Notice Box */
.voucher-notice-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fefce8;
    border: 1px solid #fde047;
    border-radius: 10px;
    padding: 12px 16px;
    box-sizing: border-box;
}

.voucher-notice-box .notice-icon {
    color: #a16207;
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1.4;
}

.voucher-notice-box .notice-text {
    font-size: 12px;
    color: #713f12;
    line-height: 1.5;
    margin: 0;
}

.voucher-notice-box .notice-text strong {
    color: #854d0e;
}

/* Barcode & Verification Zone */
.voucher-barcode-section {
    padding-top: 14px;
    border-top: 1px dashed #e5e7eb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
}

.barcode-graphic-wrapper,
.barcode-graphic-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: #ffffff;
    border-radius: 8px;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    box-sizing: border-box;
}

.barcode-svg-container,
.voucher-barcode-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 260px;
    height: 42px;
    margin: 0 auto;
}

.barcode-digits,
.barcode-folio-legend {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #111827;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.barcode-instructions {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
    margin-top: 2px;
}

/* 5. Responsive Behavior for Mobile Viewports */
@media (max-width: 640px) {
    .voucher-card,
    .ticket-card,
    .voucher-ticket {
        border-radius: 12px;
    }

    .voucher-header {
        padding: 18px 16px;
    }

    .voucher-header-main,
    .voucher-header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .voucher-header-total,
    .voucher-header-total-box {
        align-items: flex-start;
        text-align: left;
    }

    .voucher-body {
        padding: 16px;
        gap: 16px;
    }

    .voucher-info-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .voucher-minimal-body {
        padding: 16px 14px;
        gap: 14px;
    }

    .voucher-hero {
        padding: 16px;
    }

    .voucher-hero-locker .locker-display-num {
        font-size: 32px;
    }

    .voucher-fields-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        background: transparent;
        border: none;
    }

    .voucher-field-cell,
    .field-grid-cell {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 10px 12px;
    }

    .voucher-actions,
    .voucher-modal-actions {
        flex-direction: column-reverse;
        gap: 8px;
        width: 100%;
    }

    .modal-actions-right {
        width: 100%;
        flex-direction: column-reverse;
        gap: 8px;
    }

    .btn-close-voucher,
    .btn-print-voucher,
    .btn-download-voucher-pdf,
    #btn-print-voucher,
    #btn-download-voucher-pdf {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   MILESTONE 5 (R5): MOBILE RESPONSIVE POLISH (≤480px and ≤390px FIGMA 2536:1100)
   ========================================================================== */

@media (max-width: 480px) {
    /* 1. iOS Safari Auto-Zoom Prevention */
    .locker-rental-map-app input[type="text"],
    .locker-rental-map-app input[type="email"],
    .locker-rental-map-app input[type="tel"],
    .locker-rental-map-app input[type="search"],
    .locker-rental-map-app select,
    .checkout-input,
    .checkout-field-input,
    .search-input-readonly,
    #checkin-date,
    #checkout-date,
    #coupon-code-input {
        font-size: 16px !important;
        min-height: 48px !important;
        box-sizing: border-box !important;
    }

    /* 2. Top Search Bar: Single-Column Full-Width */
    .locker-rental-map-app .filter-bar {
        padding: 14px 12px !important;
    }
    .locker-rental-map-app .filter-bar-container {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }
    .locker-rental-map-app .search-bar-item {
        width: 100% !important;
    }
    .locker-rental-map-app .search-bar-action {
        width: 100% !important;
        margin-top: 4px !important;
    }
    .locker-rental-map-app .btn-search-primary {
        width: 100% !important;
        min-height: 48px !important;
        height: 48px !important;
        font-size: 15px !important;
        justify-content: center !important;
    }

    /* 3. Datepicker Popover: Mobile Screen Optimization */
    #datepickerModal.datepicker-popover {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        left: 10px !important;
        right: 10px !important;
        transform: none !important;
        padding: 16px 12px !important;
        top: calc(100% + 6px) !important;
    }
    .calendars-row {
        flex-direction: column !important;
        gap: 16px !important;
    }
    .calendar-divider-vertical {
        display: none !important;
    }
    .calendar-column {
        width: 100% !important;
    }
    .calendar-nav-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    .datepicker-tab-btn {
        min-height: 44px !important;
        padding: 10px 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .day-node {
        height: 40px !important;
        min-height: 40px !important;
        font-size: 13px !important;
    }
    .datepicker-footer-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .datepicker-badge-col {
        width: 100% !important;
    }
    .datepicker-days-badge {
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    .btn-apply-dates {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 15px !important;
    }

    /* 4. Main 2-Column Layout Collapse */
    .locker-unified-layout {
        padding: 14px 10px !important;
        gap: 16px !important;
        flex-direction: column !important;
    }
    .locker-main-column {
        width: 100% !important;
        min-width: 0 !important;
        gap: 16px !important;
    }
    .card-section {
        border-radius: 12px !important;
    }

    /* 5. Leaflet Map Height & Address Strip */
    .locker-rental-map-app #location-map,
    #location-map.location-map-instance {
        height: 280px !important;
        min-height: 260px !important;
        max-height: 300px !important;
        width: 100% !important;
    }
    .map-address-strip {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 14px !important;
    }
    .btn-external-map {
        min-height: 44px !important;
        width: 100% !important;
        justify-content: center !important;
    }

    /* 6. Locker Hero Card & Paginated Grid */
    .lockers-status-section {
        padding: 14px !important;
    }
    .locker-standard-hero-card {
        padding: 14px !important;
        gap: 12px !important;
        border-radius: 12px !important;
    }
    .standard-hero-icon {
        width: 68px !important;
        height: 68px !important;
        min-width: 68px !important;
        border-radius: 14px !important;
    }
    .standard-hero-icon svg,
    .standard-hero-icon .locker-cube-svg {
        width: 50px !important;
        height: 50px !important;
    }
    .standard-hero-pricing {
        border-left: none !important;
        border-top: 1px dashed var(--locker-gray-200) !important;
        padding: 10px 0 0 0 !important;
        width: 100% !important;
        display: flex !important;
        align-items: baseline !important;
        justify-content: space-between !important;
    }
    .rate-large {
        font-size: 22px !important;
    }
    .lockers-grid-section {
        padding: 14px !important;
    }
    .locker-paginated-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .locker-cell {
        padding: 12px 8px !important;
        min-height: 80px !important;
        border-radius: 10px !important;
    }
    .page-nav-arrow,
    .page-num-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 14px !important;
    }

    /* 7. Reactive Sidebar & Buttons */
    .reservation-summary-card {
        border-radius: 12px !important;
    }
    .summary-card-content {
        padding: 16px 14px !important;
    }
    .summary-actions-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .btn-sidebar-primary,
    .btn-sidebar-secondary {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        justify-content: center !important;
    }

    /* 8. Stepper Bar & Hold Timer */
    .checkout-top-bar,
    .checkout-stepper-header {
        padding: 10px 12px !important;
    }
    .checkout-top-bar-inner,
    .checkout-stepper-container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .checkout-stepper-bar,
    .checkout-stepper-nav {
        width: 100% !important;
        justify-content: space-between !important;
    }
    .stepper-step .step-indicator {
        width: 26px !important;
        height: 26px !important;
        font-size: 11px !important;
    }
    .stepper-connector,
    .stepper-divider {
        flex: 1 !important;
        margin: 0 4px !important;
        min-width: 8px !important;
    }
    .hold-countdown-banner,
    .checkout-hold-timer-pill {
        width: 100% !important;
        justify-content: center !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
    }

    /* 9. Dual Accordion Checkout */
    .checkout-grid,
    .checkout-main-layout {
        padding: 0 10px 24px !important;
        gap: 16px !important;
    }
    .checkout-main-title {
        font-size: 20px !important;
    }
    .payment-header,
    .payment-card-header {
        padding: 14px 12px !important;
        gap: 10px !important;
    }
    .payment-body {
        padding: 0 12px 16px !important;
    }
    .checkout-form-row.checkout-form-split-2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .btn-checkout-primary {
        min-height: 48px !important;
        height: 48px !important;
        font-size: 15px !important;
    }
    .checkout-dark-total-box {
        padding: 12px 14px !important;
    }
    .terms-checkbox-label {
        min-height: 44px !important;
        display: flex !important;
        align-items: flex-start !important;
        padding: 6px 0 !important;
    }

    /* 10. Confirmation Screens */
    .confirmation-container,
    #confirmation-container {
        padding: 0 10px 24px !important;
    }
    .confirmation-hero-card {
        padding: 16px 14px !important;
        border-radius: 12px !important;
    }
    .hero-title,
    .confirmation-hero-title {
        font-size: 19px !important;
    }
    .confirmation-titular-banner {
        padding: 16px 14px !important;
        border-radius: 10px !important;
    }
    .titular-main-name,
    .confirmation-customer-name {
        font-size: 19px !important;
        line-height: 1.35 !important;
    }
    .titular-code-wrap {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .reservation-code {
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
        font-size: 15px !important;
        padding: 6px 12px !important;
    }
    .btn-copy-code {
        width: 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
        font-size: 13px !important;
    }
    .action-buttons-row,
    .confirmation-actions {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .btn-confirmation-action {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 15px !important;
    }
    .btn-confirmation-calendar {
        min-height: 48px !important;
        width: 100% !important;
    }

    /* 11. 600px Voucher Modal Dialog */
    #locker-ticket-modal,
    .voucher-modal-overlay {
        padding: 10px 8px !important;
        align-items: flex-start !important;
    }
    .voucher-modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    .voucher-card,
    .ticket-card,
    .voucher-ticket {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 10px !important;
    }
    .voucher-header {
        padding: 14px 12px !important;
    }
    .voucher-title {
        font-size: 16px !important;
    }
    .voucher-header-total-box {
        padding: 6px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .total-figure {
        font-size: 18px !important;
    }
    .voucher-body {
        padding: 14px 12px !important;
        gap: 12px !important;
    }
    .voucher-locker-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 12px !important;
        gap: 10px !important;
    }
    .voucher-locker-pricing {
        width: 100% !important;
        border-top: 1px dashed #e5e7eb !important;
        padding-top: 8px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
    }
    .voucher-fields-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    .field-grid-cell,
    .voucher-field-cell {
        padding: 8px 10px !important;
    }
    .breakdown-table-row {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
    .barcode-graphic-wrapper {
        padding: 8px 12px !important;
        max-width: 100% !important;
    }
    .barcode-svg-container {
        max-width: 220px !important;
        height: 36px !important;
    }
    .voucher-modal-actions {
        width: 100% !important;
        flex-direction: column-reverse !important;
        gap: 8px !important;
    }
    .btn-print-voucher,
    .btn-download-voucher-pdf,
    .btn-close-voucher {
        width: 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
        font-size: 14px !important;
    }
}

/* 390px iPhone / Narrow Viewport Polish (Figma Node 2536:1100) */
@media (max-width: 390px) {
    .locker-rental-map-app .filter-bar {
        padding: 10px 8px !important;
    }
    .locker-unified-layout {
        padding: 10px 6px !important;
    }
    .section-header-row {
        padding: 12px 10px !important;
    }
    .hero-card-title {
        font-size: 14px !important;
    }
    .standard-hero-pricing .rate-large {
        font-size: 20px !important;
    }
    .locker-paginated-grid {
        gap: 8px !important;
    }
    .locker-cell {
        padding: 10px 6px !important;
        min-height: 75px !important;
    }
    .checkout-main-title {
        font-size: 18px !important;
    }
    .hero-title,
    .confirmation-hero-title {
        font-size: 18px !important;
    }
    .titular-main-name,
    .confirmation-customer-name {
        font-size: 17px !important;
    }
    .voucher-header-title {
        font-size: 15px !important;
    }
}

/* 6. High-Fidelity Print Media Rules */
@media print {
    @page {
        size: A4 portrait;
        margin: 8mm;
    }

    html, body {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        overflow: visible !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Suppress theme container clipping across WordPress themes (Astra, Elementor, Divi) */
    #page, .site, #content, .site-content, #primary, .content-area,
    main, .site-main, article, .entry-content, .locker-rental-map-app,
    #confirmation-step, .booking-step {
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        position: static !important;
        transform: none !important;
        filter: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    /* 1. Global visibility suppression - hide all page chrome and clutter */
    body * {
        visibility: hidden !important;
    }

    /* 2. Make exclusively the ticket modal and voucher card visible */
    #locker-ticket-modal,
    #locker-ticket-modal *,
    .printable-voucher,
    .printable-voucher *,
    #printable-ticket-wrapper,
    #printable-ticket-wrapper *,
    .voucher-card,
    .voucher-card *,
    .ticket-card,
    .ticket-card *,
    .voucher-ticket,
    .voucher-ticket * {
        visibility: visible !important;
    }

    /* 3. Re-anchor the modal container to standard page flow with fixed page root */
    #locker-ticket-modal,
    .voucher-modal-overlay {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        display: block !important;
        z-index: 99999999 !important;
    }

    .modal-dialog,
    .voucher-dialog,
    .voucher-modal-dialog {
        position: relative !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .printable-voucher,
    .printable-ticket-wrapper,
    #printable-ticket-wrapper {
        width: 100% !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* 4. Strictly hide interactive actions, backdrops, and other page sections */
    .modal-backdrop,
    .voucher-modal-backdrop,
    .voucher-actions,
    .voucher-modal-actions,
    .modal-actions-bar,
    .non-printable,
    .btn-close-voucher,
    .btn-print-voucher,
    .btn-download-voucher-pdf,
    #btn-print-voucher,
    #btn-download-voucher-pdf,
    #btn-close-voucher,
    #btn-close-voucher-modal,
    .locker-rental-map-app .filter-bar,
    .locker-rental-map-app .content-layout,
    .locker-rental-map-app .stepper-bar,
    .locker-rental-map-app .step-view,
    #wpadminbar,
    header:not(.voucher-header),
    footer:not(.voucher-footer),
    nav,
    .site-header,
    .site-footer,
    .sidebar,
    #masthead,
    #colophon {
        display: none !important;
    }

    /* Guarantee voucher-header visibility and display */
    .voucher-header,
    header.voucher-header {
        display: flex !important;
        visibility: visible !important;
    }

    /* 5. Voucher card print geometry and color preservation */
    .voucher-card,
    .ticket-card,
    .voucher-ticket {
        box-shadow: none !important;
        border: 1px solid #d1d5db !important;
        margin: 0 auto !important;
        max-width: 600px !important;
        width: 600px !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        background: #ffffff !important;
    }

    /* Ensure active ticket is displayed as block */
    .voucher-ticket.active,
    .voucher-ticket.voucher-active-print,
    .voucher-ticket:not([style*="display: none"]),
    #voucher-ticket-online.active,
    #voucher-ticket-onsite.active {
        display: block !important;
        visibility: visible !important;
    }

    /* Modality-specific print enforcement based on active modal data-type */
    #locker-ticket-modal[data-ticket-type="online"] #voucher-ticket-online {
        display: block !important;
        visibility: visible !important;
    }
    #locker-ticket-modal[data-ticket-type="online"] #voucher-ticket-onsite {
        display: none !important;
    }
    #locker-ticket-modal[data-ticket-type="onsite"] #voucher-ticket-onsite {
        display: block !important;
        visibility: visible !important;
    }
    #locker-ticket-modal[data-ticket-type="onsite"] #voucher-ticket-online {
        display: none !important;
    }

    /* Preserve header institutional colors */
    .voucher-header-compra,
    .voucher-header.header-online {
        background: #1d3326 !important;
        color: #ffffff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .voucher-header-reserva,
    .voucher-header.header-onsite {
        background: #a38c64 !important;
        color: #ffffff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Preserve brand logo in print */
    .voucher-brand-logo-img {
        display: block !important;
        visibility: visible !important;
        height: 28px !important;
        max-height: 28px !important;
        width: auto !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .voucher-type-badge,
    .voucher-status-pill {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .breakdown-total-bar,
    .breakdown-total-strip {
        background: #1d3326 !important;
        color: #ffffff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .voucher-locker-badge,
    .voucher-cube-badge {
        background: #1d3326 !important;
        color: #ffffff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .voucher-cube-badge.badge-gold {
        background: #a38c64 !important;
    }

    .voucher-notice-box {
        background: #fefce8 !important;
        border-color: #fde047 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .voucher-field-cell,
    .field-grid-cell {
        background: #ffffff !important;
    }

    /* 6. Standard page margins */
    @page {
        size: auto;
        margin: 15mm;
    }
}

/* ==========================================================================
   SVG ICONS & STATUS DOT HELPERS
   ========================================================================== */
.inline-svg-icon {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 4px !important;
    flex-shrink: 0 !important;
}

.timer-dot-circle {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: #dc2626 !important;
    animation: locker-timer-pulse 1.5s infinite !important;
    vertical-align: middle !important;
}

@keyframes locker-timer-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

.badge-dot-circle {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: #10b981 !important;
    vertical-align: middle !important;
}

/* ==========================================================================
   FIGMA NODE 2538:2866 ULTRA-FIDELITY OVERRIDES
   ========================================================================== */
/* 1. Hide red asterisks in checkout form labels to match Figma */
#checkout-container .required-star,
.checkout-view .required-star,
.checkout-form-label .required-star,
.field-label .required-star {
    display: none !important;
}

/* 2. Clean single red pulsing dot in hold timer pill */
#checkout-container .hold-timer-dot,
.checkout-hold-timer-pill .hold-timer-dot {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    min-width: 6px !important;
    min-height: 6px !important;
    border-radius: 50% !important;
    background-color: #dc2626 !important;
    animation: locker-timer-pulse 1.5s infinite !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
}
#checkout-container .hold-timer-dot .timer-dot-circle,
.checkout-hold-timer-pill .hold-timer-dot .timer-dot-circle {
    display: none !important;
}

/* 3. Sidebar locker blueprint box exact Figma 64x64 dimensions */
#checkout-container .mini-cube-box,
.checkout-locker-miniature .mini-cube-box {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    border-radius: 8px !important;
    background: #1d3326 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
#checkout-container .mini-cube-box svg,
.checkout-locker-miniature .mini-cube-box svg {
    width: 38px !important;
    height: 38px !important;
}

/* ==========================================================================
   PAGE CANVAS FRAMING & FULL-BLEED SEAMLESS BACKGROUND (FIGMA FIDELITY)
   ========================================================================== */

/* 1. Full-bleed seamless background - eliminate white stripes and gaps */
html:has(.locker-rental-map-app),
body.page-id-5150,
body:has(.locker-rental-map-app) main#content,
body:has(.locker-rental-map-app) .site-main,
body:has(.locker-rental-map-app) .page-content,
body:has(.locker-rental-map-app) .elementor-5150,
body:has(.locker-rental-map-app) .elementor-5150 .elementor-element-b2427b3,
body:has(.locker-rental-map-app) .elementor-5150 .elementor-element-c97d601,
body:has(.locker-rental-map-app) .elementor-5150 .elementor-widget-container,
body:has(.locker-rental-map-app) .elementor-5150 .elementor-shortcode,
body:has(.locker-rental-map-app) .elementor-5150 .e-con-inner,
body:has(.locker-rental-map-app) .elementor-5150 .e-con {
    background-color: #F4EFEA !important;
    background: #F4EFEA !important;
}

/* 2. Seamless full-width container expansion */
body:has(.locker-rental-map-app) .elementor-5150 .elementor-element-b2427b3 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

body:has(.locker-rental-map-app) .elementor-5150 .elementor-element-b2427b3 > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

body:has(.locker-rental-map-app) .elementor-5150 .elementor-widget-shortcode,
body:has(.locker-rental-map-app) .elementor-5150 .elementor-widget-container,
body:has(.locker-rental-map-app) .elementor-5150 .elementor-shortcode {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. Base app & checkout framing and footer breathing room */
.locker-rental-map-app {
    padding-bottom: 72px !important;
    min-height: calc(100vh - 104px) !important;
    scroll-margin-top: 120px !important;
}

.locker-rental-map-app .filter-bar,
.locker-rental-map-app .locker-search-bar {
    max-width: 1312px !important;
    margin: 28px auto 24px auto !important;
    width: calc(100% - 48px) !important;
    box-sizing: border-box !important;
}

.locker-rental-map-app .content-layout,
.locker-rental-map-app .locker-unified-layout {
    max-width: 1312px !important;
    margin: 0 auto !important;
    width: calc(100% - 48px) !important;
    box-sizing: border-box !important;
}

#checkout-container {
    padding-top: 36px !important;
    padding-bottom: 72px !important;
    min-height: calc(100vh - 104px) !important;
    box-sizing: border-box !important;
    scroll-margin-top: 120px !important;
}

#checkout-container .checkout-top-bar,
#checkout-container .checkout-stepper-header {
    max-width: 1312px !important;
    margin: 0 auto 32px auto !important;
    width: calc(100% - 48px) !important;
    box-sizing: border-box !important;
}

.checkout-grid,
.checkout-main-layout {
    max-width: 1312px !important;
    margin: 0 auto !important;
    width: calc(100% - 48px) !important;
    box-sizing: border-box !important;
}

.confirmation-grid,
.confirmation-main-layout {
    max-width: 1312px !important;
    margin: 0 auto !important;
    width: calc(100% - 48px) !important;
    box-sizing: border-box !important;
}

/* 4. Footer separation & clearing */
footer.elementor-location-footer,
.site-footer,
#colophon {
    position: relative !important;
    z-index: 10 !important;
    clear: both !important;
    margin-top: 0 !important;
}

/* 5. Sticky sidebar offsets on desktop (clears 104px header, no internal scrollbar) */
@media (min-width: 1025px) {
    .checkout-sidebar-sticky,
    .map-sidebar-sticky,
    .confirmation-sidebar-sticky,
    .locker-sidebar-column {
        position: sticky !important;
        top: 120px !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
    }
}

/* 6. Static sidebar on tablet/mobile (never overlays or collides) */
@media (max-width: 1024px) {
    .checkout-sidebar-sticky,
    .map-sidebar-sticky,
    .confirmation-sidebar-sticky,
    .locker-sidebar-col,
    .map-sidebar-col,
    .checkout-sidebar-col {
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* 7. Mobile responsive spacing (<=768px) */
@media (max-width: 768px) {
    .locker-rental-map-app {
        padding-bottom: 56px !important;
    }
    #checkout-container {
        padding-top: 20px !important;
        padding-bottom: 56px !important;
    }
    .locker-rental-map-app .filter-bar,
    .locker-rental-map-app .locker-search-bar,
    .locker-rental-map-app .content-layout,
    .locker-rental-map-app .locker-unified-layout,
    #checkout-container .checkout-top-bar,
    #checkout-container .checkout-stepper-header,
    .checkout-grid,
    .checkout-main-layout,
    .confirmation-grid,
    .confirmation-main-layout {
        width: calc(100% - 24px) !important;
    }
}

/* ==========================================================================
   FIGMA COLOR EQUALIZATION & LOCKER ICON FIDELITY (EXACT TO FIGMA NODE 2538:2866)
   ========================================================================== */

/* 1. Stepper Phase Colors (Completed = #2D5233, Active = #1D3326, Inactive = #8A968D / #F5F2ED) */
.checkout-stepper-bar .stepper-step.completed,
.checkout-stepper-bar .stepper-step.step-complete,
.checkout-stepper-nav .stepper-step.completed,
.checkout-stepper-nav .stepper-step.step-complete,
.confirmation-stepper-nav .stepper-step.completed,
.confirmation-stepper-nav .stepper-step.step-complete {
    color: #2D5233 !important;
    font-weight: 600 !important;
}

.checkout-stepper-bar .stepper-step.completed .step-indicator,
.checkout-stepper-bar .stepper-step.step-complete .step-indicator,
.checkout-stepper-nav .stepper-step.completed .step-indicator,
.checkout-stepper-nav .stepper-step.step-complete .step-indicator,
.confirmation-stepper-nav .stepper-step.completed .step-indicator,
.confirmation-stepper-nav .stepper-step.step-complete .step-indicator {
    background-color: #2D5233 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.checkout-stepper-bar .stepper-step.completed .step-label,
.checkout-stepper-bar .stepper-step.step-complete .step-label,
.checkout-stepper-nav .stepper-step.completed .step-label,
.checkout-stepper-nav .stepper-step.step-complete .step-label,
.confirmation-stepper-nav .stepper-step.completed .step-label,
.confirmation-stepper-nav .stepper-step.step-complete .step-label {
    color: #2D5233 !important;
    font-weight: 600 !important;
}

.checkout-stepper-bar .stepper-step.completed .step-check-icon,
.checkout-stepper-bar .stepper-step.step-complete .step-check-icon,
.checkout-stepper-nav .stepper-step.completed .step-check-icon,
.checkout-stepper-nav .stepper-step.step-complete .step-check-icon,
.confirmation-stepper-nav .stepper-step.completed .step-check-icon,
.confirmation-stepper-nav .stepper-step.step-complete .step-check-icon {
    stroke: #ffffff !important;
}

.checkout-stepper-bar .stepper-step.active,
.checkout-stepper-bar .stepper-step.step-active,
.checkout-stepper-nav .stepper-step.active,
.checkout-stepper-nav .stepper-step.step-active,
.confirmation-stepper-nav .stepper-step.active,
.confirmation-stepper-nav .stepper-step.step-active {
    color: #1D3326 !important;
    font-weight: 700 !important;
}

.checkout-stepper-bar .stepper-step.active .step-indicator,
.checkout-stepper-bar .stepper-step.step-active .step-indicator,
.checkout-stepper-nav .stepper-step.active .step-indicator,
.checkout-stepper-nav .stepper-step.step-active .step-indicator,
.confirmation-stepper-nav .stepper-step.active .step-indicator,
.confirmation-stepper-nav .stepper-step.step-active .step-indicator {
    background-color: #1D3326 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.checkout-stepper-bar .stepper-step.active .step-label,
.checkout-stepper-bar .stepper-step.step-active .step-label,
.checkout-stepper-nav .stepper-step.active .step-label,
.checkout-stepper-nav .stepper-step.step-active .step-label,
.confirmation-stepper-nav .stepper-step.active .step-label,
.confirmation-stepper-nav .stepper-step.step-active .step-label {
    color: #1D3326 !important;
    font-weight: 700 !important;
}

.checkout-stepper-bar .stepper-step.inactive .step-indicator,
.checkout-stepper-bar .stepper-step.step-pending .step-indicator,
.checkout-stepper-nav .stepper-step.inactive .step-indicator,
.checkout-stepper-nav .stepper-step.step-pending .step-indicator,
.confirmation-stepper-nav .stepper-step.inactive .step-indicator,
.confirmation-stepper-nav .stepper-step.step-pending .step-indicator {
    background-color: #F5F2ED !important;
    color: #8A968D !important;
    border: 1px solid #E5E0D8 !important;
}

.checkout-stepper-bar .stepper-step.inactive .step-label,
.checkout-stepper-bar .stepper-step.step-pending .step-label,
.checkout-stepper-nav .stepper-step.inactive .step-label,
.checkout-stepper-nav .stepper-step.step-pending .step-label,
.confirmation-stepper-nav .stepper-step.inactive .step-label,
.confirmation-stepper-nav .stepper-step.step-pending .step-label {
    color: #8A968D !important;
    font-weight: 500 !important;
}

/* 2. Payment Method Card Accordion Equalization */
.payment-method-item,
.payment-card-accordion {
    border: 1px solid #E5E0D8 !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    transition: all 0.2s ease !important;
}

.payment-method-item.active,
.payment-card-accordion.active {
    border: 1.5px solid #1D3326 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    background: #FFFFFF !important;
}

/* 3. Radio Buttons */
.payment-radio-circle,
.custom-radio-selector {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #D1D5DB !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
}

.payment-method-item.active .payment-radio-circle,
.payment-card-accordion.active .payment-radio-circle {
    border: 2px solid #1D3326 !important;
}

.payment-radio-circle .radio-indicator {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: transparent !important;
}

.payment-method-item.active .payment-radio-circle .radio-indicator,
.payment-card-accordion.active .payment-radio-circle .radio-indicator {
    background: #1D3326 !important;
}

/* 4. Payment Method Icon Containers */
.payment-method-icon-box.stripe-icon-box {
    background: #EAEEEB !important;
    border-radius: 10px !important;
    width: 44px !important;
    height: 44px !important;
}

.payment-method-icon-box.stripe-icon-box svg,
.payment-method-icon-box.stripe-icon-box svg rect,
.payment-method-icon-box.stripe-icon-box svg line {
    stroke: #2D5233 !important;
}

.payment-method-icon-box.campus-icon-box {
    background: #F7F2EA !important;
    border-radius: 10px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.payment-method-icon-box.campus-icon-box svg,
.payment-method-icon-box.campus-icon-box svg path,
.payment-method-icon-box.campus-icon-box svg rect,
.payment-method-icon-box.campus-icon-box svg line {
    stroke: #B5904C !important;
}

/* 5. Typography in Payment Method Header */
.payment-title,
.payment-method-title {
    color: #1D3326 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.payment-subtitle,
.payment-method-desc {
    color: #718274 !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
}

/* 6. Badges ("Recomendado" & "Crea reserva") */
#checkout-container .badge-recommended,
.badge-recommended,
.payment-method-badge.badge-recommended {
    background: #EAEEEB !important;
    background-color: #EAEEEB !important;
    color: #2D5233 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 9999px !important;
    padding: 4px 12px !important;
}

#checkout-container .badge-campus-tag,
.badge-campus-tag,
.badge-gold-reserve {
    background: #F6EEDA !important;
    background-color: #F6EEDA !important;
    border: none !important;
    color: #8A6D3B !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    padding: 4px 12px !important;
}

/* 7. Card Brand Badges (VISA, MC, AMEX) & SSL Guarantee */
.brand-badge,
.brand-card-pill {
    background: #F5F2ED !important;
    background-color: #F5F2ED !important;
    border: 1px solid #E0DCD5 !important;
    color: #5A685D !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    line-height: 1.3 !important;
}

.ssl-guarantee-badge,
.security-trust-tag {
    color: #7A877D !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* 8. Form Labels */
.checkout-method-category-label,
.checkout-method-category-label span,
.checkout-form-label,
.field-label {
    color: #5A685D !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* 9. Form Inputs (Warm Background #F5F2ED matching Figma) */
.checkout-input,
.checkout-field-input,
#stripe-card-number-mock,
#stripe-customer-name,
#stripe-card-expiry-mock,
#stripe-card-cvv-mock,
#campus-customer-name,
#campus-customer-email,
#campus-customer-phone {
    background: #F5F2ED !important;
    background-color: #F5F2ED !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 10px !important;
    min-height: 48px !important;
    height: 48px !important;
    color: #1D3326 !important;
    font-size: 14px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.checkout-input::placeholder,
.checkout-field-input::placeholder,
#stripe-card-number-mock::placeholder,
#stripe-customer-name::placeholder,
#stripe-card-expiry-mock::placeholder,
#stripe-card-cvv-mock::placeholder,
#campus-customer-name::placeholder,
#campus-customer-email::placeholder,
#campus-customer-phone::placeholder {
    color: #8A968D !important;
    opacity: 1 !important;
}

.checkout-input:focus,
.checkout-field-input:focus {
    border-color: #2D5233 !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 0 0 2px rgba(45, 82, 51, 0.15) !important;
    outline: none !important;
}

.input-trailing-icon,
.input-with-icon-wrapper .input-trailing-icon {
    color: #7A877D !important;
}

.input-trailing-icon svg,
.input-trailing-icon svg path,
.input-trailing-icon svg rect,
.input-trailing-icon svg circle,
.input-trailing-icon svg line {
    stroke: #7A877D !important;
}

/* 10. Wireframe 3D Locker SVG Geometry & Styling */
.locker-cube-svg {
    display: block !important;
    flex-shrink: 0 !important;
}

.standard-hero-icon {
    background: #087243 !important;
    border-radius: 18px !important;
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(8, 114, 67, 0.18) !important;
}

.standard-hero-icon .locker-cube-svg {
    width: 72px !important;
    height: 72px !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
}

#checkout-container .mini-cube-box,
.checkout-locker-miniature .mini-cube-box {
    background: #087243 !important;
    border-radius: 10px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#checkout-container .mini-cube-box .locker-cube-svg,
.checkout-locker-miniature .mini-cube-box .locker-cube-svg {
    width: 32px !important;
    height: 32px !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.voucher-cube-badge .locker-cube-svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.locker-cell .locker-cell-pkg-svg,
.locker-cell .locker-cube-svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
}

.locker-cell.available .locker-cell-pkg-svg,
.locker-cell.available .locker-cube-svg {
    color: #1D3326 !important;
    stroke: #1D3326 !important;
}

.locker-cell.available.selected .locker-cell-pkg-svg,
.locker-cell.available.selected .locker-cube-svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.locker-cell.occupied .locker-cell-pkg-svg,
.locker-cell.occupied .locker-cube-svg {
    color: #9CA3AF !important;
    stroke: #9CA3AF !important;
}

/* 11. Elimination of redundant reception notice & Figma stacked layout for Pagar en el lugar (media_1790873561119.png) */
.campus-reception-notice {
    display: none !important;
}

.checkout-form-stacked {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    margin-top: 8px !important;
}

.checkout-form-stacked .checkout-form-row {
    width: 100% !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.checkout-form-stacked .checkout-form-label,
.checkout-form-stacked .field-label {
    display: block !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #5A675E !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 6px !important;
}

.checkout-form-stacked .checkout-input,
.checkout-form-stacked .checkout-field-input {
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: #F5F2ED !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 8px !important;
    height: 48px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    color: #1D3326 !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

.checkout-form-stacked .checkout-input::placeholder,
.checkout-form-stacked .checkout-field-input::placeholder {
    color: #8A968D !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.checkout-form-stacked .checkout-input:focus,
.checkout-form-stacked .checkout-field-input:focus {
    border-color: #2D5233 !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 0 0 2px rgba(45, 82, 51, 0.15) !important;
}

/* ==========================================================================
   DESKTOP DEFAULT: All mobile-only components are completely hidden (>= 769px)
   ========================================================================== */
.locker-mobile-only {
    display: none !important;
}

/* ==========================================================================
   MILESTONE M1: MOBILE APP VIEWPORT ENCAPSULATION (<= 768px)
   Figma Reference: Node 2229:811 ("Móvil V-2"), 2229:812, 2229:2236, 2231:818
   ========================================================================== */
@media (max-width: 768px) {
    /* ======================================================================
       R1. NATIVE MOBILE APP ISOLATION: SUPPRESS THEME HEADER & FOOTER (<= 768px)
       Figma Ref: Node 2229:811 ("Móvil V-2"), Node 2229:812
       ====================================================================== */

    /* WordPress & Elementor Global Header Suppression */
    body.locker-rental-page header.elementor-location-header,
    body.locker-rental-page header[data-elementor-type="header"],
    body.locker-rental-page .elementor-location-header,
    body.locker-rental-page [data-elementor-type="header"],
    body.locker-rental-page header.site-header,
    body.locker-rental-page .site-header,
    body.locker-rental-page #masthead,
    body.locker-rental-page #site-header,
    body.locker-rental-page header[role="banner"],
    body.locker-rental-page .ast-main-header-wrap,
    body.locker-rental-page .main-header-bar-wrap,
    body.page-id-5150 header.elementor-location-header,
    body.page-id-5150 header[data-elementor-type="header"],
    body.page-id-5150 .elementor-location-header,
    body.page-id-5150 [data-elementor-type="header"],
    body.page-id-5150 header.site-header,
    body.page-id-5150 .site-header,
    body.page-id-5150 #masthead,
    body.page-id-5150 #site-header,
    body.page-id-5150 header[role="banner"],
    body.page-id-5150 .ast-main-header-wrap,
    body.page-id-5150 .main-header-bar-wrap,
    body:has(.locker-rental-map-app) header.elementor-location-header,
    body:has(.locker-rental-map-app) header[data-elementor-type="header"],
    body:has(.locker-rental-map-app) .elementor-location-header,
    body:has(.locker-rental-map-app) [data-elementor-type="header"],
    body:has(.locker-rental-map-app) header.site-header,
    body:has(.locker-rental-map-app) .site-header,
    body:has(.locker-rental-map-app) #masthead,
    body:has(.locker-rental-map-app) #site-header,
    body:has(.locker-rental-map-app) header[role="banner"],
    body:has(.locker-rental-map-app) .ast-main-header-wrap,
    body:has(.locker-rental-map-app) .main-header-bar-wrap,

    /* WordPress & Elementor Global Footer Suppression */
    body.locker-rental-page footer.elementor-location-footer,
    body.locker-rental-page footer[data-elementor-type="footer"],
    body.locker-rental-page .elementor-location-footer,
    body.locker-rental-page [data-elementor-type="footer"],
    body.locker-rental-page footer.site-footer,
    body.locker-rental-page .site-footer,
    body.locker-rental-page #colophon,
    body.locker-rental-page #site-footer,
    body.locker-rental-page footer[role="contentinfo"],
    body.locker-rental-page .ast-footer-copyright,
    body.page-id-5150 footer.elementor-location-footer,
    body.page-id-5150 footer[data-elementor-type="footer"],
    body.page-id-5150 .elementor-location-footer,
    body.page-id-5150 [data-elementor-type="footer"],
    body.page-id-5150 footer.site-footer,
    body.page-id-5150 .site-footer,
    body.page-id-5150 #colophon,
    body.page-id-5150 #site-footer,
    body.page-id-5150 footer[role="contentinfo"],
    body.page-id-5150 .ast-footer-copyright,
    body:has(.locker-rental-map-app) footer.elementor-location-footer,
    body:has(.locker-rental-map-app) footer[data-elementor-type="footer"],
    body:has(.locker-rental-map-app) .elementor-location-footer,
    body:has(.locker-rental-map-app) [data-elementor-type="footer"],
    body:has(.locker-rental-map-app) footer.site-footer,
    body:has(.locker-rental-map-app) .site-footer,
    body:has(.locker-rental-map-app) #colophon,
    body:has(.locker-rental-map-app) #site-footer,
    body:has(.locker-rental-map-app) footer[role="contentinfo"],
    body:has(.locker-rental-map-app) .ast-footer-copyright {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
        overflow: hidden !important;
    }

    /* Zero canvas top/bottom offsets to dock mobile header flush at y = 0 */
    body.locker-rental-page,
    body.page-id-5150,
    body:has(.locker-rental-map-app) {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    body.locker-rental-page #page,
    body.locker-rental-page #content,
    body.locker-rental-page .site-content,
    body.locker-rental-page main#content,
    body.locker-rental-page .site-main,
    body.page-id-5150 #page,
    body.page-id-5150 #content,
    body.page-id-5150 .site-content,
    body.page-id-5150 main#content,
    body.page-id-5150 .site-main,
    body:has(.locker-rental-map-app) #page,
    body:has(.locker-rental-map-app) #content,
    body:has(.locker-rental-map-app) .site-content,
    body:has(.locker-rental-map-app) main#content,
    body:has(.locker-rental-map-app) .site-main {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* --- Display Isolation Gating --- */
    .locker-mobile-only {
        display: flex !important;
    }
    .locker-mobile-only.mobile-rental-duration-section,
    .locker-mobile-only.mobile-grid-section-header,
    .locker-mobile-only.is-block {
        display: block !important;
    }
    .mobile-help-modal-overlay.locker-mobile-only {
        display: none !important;
    }
    .mobile-help-modal-overlay.locker-mobile-only.active,
    .mobile-help-modal-overlay.locker-mobile-only.open {
        display: flex !important;
    }
    /* --- Ultra-High Specificity Desktop Suppression (<= 768px) --- */
    html body div.locker-rental-map-app .filter-bar.locker-search-bar.locker-desktop-only,
    html body div.locker-rental-map-app div.filter-bar.locker-search-bar.locker-desktop-only,
    html body div.locker-rental-map-app div.filter-bar.locker-search-bar,
    html body div.locker-rental-map-app .content-layout.locker-unified-layout .locker-sidebar-column.locker-desktop-only,
    html body div.locker-rental-map-app .locker-unified-layout .locker-sidebar-column.locker-desktop-only,
    html body div.locker-rental-map-app div.locker-unified-layout div.locker-sidebar-column.locker-desktop-only,
    html body div.locker-rental-map-app div.locker-unified-layout div.locker-sidebar-column,
    html body div.locker-rental-map-app .locker-unified-layout .lockers-status-section.card-section.locker-desktop-only,
    html body div.locker-rental-map-app .locker-unified-layout .section-header-row.locker-desktop-only,
    html body div.locker-rental-map-app .locker-unified-layout .map-address-strip.locker-desktop-only,
    html body div.locker-rental-map-app .locker-unified-layout .locker-pagination-footer.locker-desktop-only,
    html body div.locker-rental-map-app .filter-bar.locker-desktop-only,
    html body div.locker-rental-map-app .locker-search-bar.locker-desktop-only,
    html body div.locker-rental-map-app .locker-sidebar-column.locker-desktop-only,
    html body div.locker-rental-map-app .filter-bar .filter-bar-container,
    html body div.locker-rental-map-app .filter-bar-container,
    html body div.locker-rental-map-app .locker-desktop-only,
    html body div.locker-rental-map-app .filter-bar,
    html body div.locker-rental-map-app .locker-search-bar,
    html body div.locker-rental-map-app .locker-sidebar-column,
    div.locker-rental-map-app .filter-bar.locker-search-bar.locker-desktop-only,
    div.locker-rental-map-app .locker-unified-layout .locker-sidebar-column.locker-desktop-only,
    div.locker-rental-map-app .filter-bar.locker-search-bar,
    div.locker-rental-map-app .locker-sidebar-column,
    div.locker-rental-map-app .locker-desktop-only,
    div.locker-rental-map-app .filter-bar,
    div.locker-rental-map-app .filter-bar-container,
    div.locker-rental-map-app .locker-search-bar,
    .locker-rental-map-app .filter-bar.locker-search-bar.locker-desktop-only,
    .locker-rental-map-app .locker-unified-layout .locker-sidebar-column.locker-desktop-only,
    .locker-rental-map-app .filter-bar.locker-search-bar,
    .locker-rental-map-app .locker-sidebar-column,
    .locker-rental-map-app .locker-desktop-only,
    .locker-rental-map-app .filter-bar,
    .locker-rental-map-app .filter-bar-container,
    .locker-rental-map-app .locker-search-bar,
    html body div.locker-rental-map-app #checkout-container,
    html body div.locker-rental-map-app.in-checkout #checkout-container,
    div.locker-rental-map-app #checkout-container,
    div.locker-rental-map-app.in-checkout #checkout-container,
    .locker-rental-map-app.in-checkout #checkout-container,
    .locker-rental-map-app #checkout-container,
    #checkout-container,
    .checkout-container,
    .locker-desktop-only {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        overflow: hidden !important;
        position: absolute !important;
        pointer-events: none !important;
    }

    /* --- Base Layout Clearance (prevents 81px sticky bottom bar overlap) --- */
    .locker-rental-map-app {
        height: auto !important;
        min-height: 100vh !important;
        overflow: visible !important;
        background-color: #f7fbff !important;
        padding-bottom: 96px !important;
        box-sizing: border-box !important;
    }
    html body div.locker-rental-map-app .locker-unified-layout,
    html body div.locker-rental-map-app .content-layout,
    div.locker-rental-map-app .locker-unified-layout,
    div.locker-rental-map-app .content-layout,
    .locker-rental-map-app .locker-unified-layout,
    .locker-rental-map-app .content-layout,
    .locker-unified-layout,
    .content-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    html body.checkout-mobile-open div.locker-rental-map-app .content-layout,
    html body.mobile-checkout-active div.locker-rental-map-app .content-layout,
    html body.in-checkout div.locker-rental-map-app .content-layout,
    div.locker-rental-map-app.in-checkout .content-layout,
    body.checkout-mobile-open .content-layout,
    body.mobile-checkout-active .content-layout,
    body.in-checkout .content-layout,
    html body.checkout-mobile-open div.locker-rental-map-app .filter-bar,
    html body.mobile-checkout-active div.locker-rental-map-app .filter-bar,
    html body.in-checkout div.locker-rental-map-app .filter-bar,
    div.locker-rental-map-app.in-checkout .filter-bar,
    body.checkout-mobile-open .filter-bar,
    body.mobile-checkout-active .filter-bar,
    body.in-checkout .filter-bar {
        display: none !important;
    }
    html body div.locker-rental-map-app .locker-main-column,
    div.locker-rental-map-app .locker-main-column,
    .locker-rental-map-app .locker-main-column,
    .locker-main-column {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px 96px 20px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .card-section {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 335px !important;
    }

    /* --- Component 1: Mobile App Header (Figma 2229:812) --- */
    .mobile-header-bar,
    .mobile-app-header {
        height: 72px !important;
        padding: 16px 20px !important;
        background-color: #f7fbff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    }
    .mobile-header-btn-back,
    .mobile-header-btn.btn-back {
        width: 40px !important;
        height: 40px !important;
        border-radius: 6px !important;
        background-color: #e9f0ff !important;
        border: 1px solid #bfdbfe !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        transition: background-color 0.15s ease !important;
    }
    .mobile-header-btn-back:hover,
    .mobile-header-btn.btn-back:hover {
        background-color: #dbeafe !important;
    }
    .mobile-header-btn-back svg,
    .mobile-header-btn.btn-back svg {
        width: 24px !important;
        height: 24px !important;
        stroke: #0f1724 !important;
        stroke-width: 2.0 !important;
        fill: none !important;
    }
    .mobile-header-title {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #0f1724 !important;
        text-align: center !important;
        flex: 1 !important;
        margin: 0 12px !important;
        line-height: 20px !important;
    }
    .mobile-header-btn-help,
    .mobile-header-btn.btn-help {
        width: 40px !important;
        height: 40px !important;
        border-radius: 6px !important;
        background-color: #ac9a84 !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        transition: opacity 0.15s ease !important;
    }
    .mobile-header-btn-help:hover,
    .mobile-header-btn.btn-help:hover {
        opacity: 0.9 !important;
    }
    .mobile-header-btn-help svg,
    .mobile-header-btn.btn-help svg {
        width: 22px !important;
        height: 22px !important;
        stroke: #ffffff !important;
        stroke-width: 2.0 !important;
        fill: none !important;
    }

    /* --- Component 2: Hold Countdown Banner (Figma 2229:2223) --- */
    .mobile-hold-countdown-banner {
        height: 44px !important;
        background-color: #e9f0ff !important;
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        display: none;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
    .mobile-hold-countdown-banner.active,
    .mobile-hold-countdown-banner.is-active,
    .mobile-checkout-hold-banner {
        display: flex !important;
    }
    #mobile-hold-countdown-banner:not(.active):not(.is-active),
    #mobile-hold-countdown-banner[style*="display: none"],
    .mobile-hold-countdown-banner[style*="display: none"] {
        display: none !important;
    }
    .mobile-hold-inner {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    .mobile-hold-banner-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .mobile-hold-banner-icon svg,
    .mobile-hold-icon {
        width: 18px !important;
        height: 18px !important;
        stroke: #139200 !important;
        stroke-width: 1.5 !important;
        fill: none !important;
    }
    .mobile-hold-label,
    .mobile-hold-banner-text {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #06307a !important;
    }
    .mobile-hold-timer-val,
    .mobile-hold-banner-timer {
        font-family: 'Inter', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #139200 !important;
    }

    /* --- Component 3: Map Section, Floating Tag & Location Card (Figma 2229:916, 2229:825) --- */
    .campus-location-section {
        margin: 16px auto 0 auto !important;
        width: 100% !important;
        max-width: 360px !important;
        position: relative !important;
        box-sizing: border-box !important;
    }
    .map-container-frame {
        width: 100% !important;
        max-width: 335px !important;
        height: 261px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        position: relative !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        background-color: #e5e7eb !important;
        margin: 0 auto !important;
        touch-action: pan-y !important;
    }
    .map-container-frame #location-map,
    .map-container-frame .location-map-instance,
    #location-map {
        width: 100% !important;
        height: 100% !important;
        min-height: 261px !important;
        max-height: 261px !important;
        border-radius: 8px !important;
        touch-action: pan-y !important;
    }
    .mobile-map-floating-tag {
        position: absolute !important;
        bottom: 12px !important;
        right: 12px !important;
        z-index: 500 !important;
        background-color: #ffffff !important;
        border-radius: 12px !important;
        padding: 6px 14px !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.10) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        pointer-events: auto !important;
    }
    .mobile-map-tag-dot,
    .tag-status-dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background-color: #0ca678 !important;
        flex-shrink: 0 !important;
    }
    .mobile-map-tag-text,
    .tag-label-text {
        font-family: 'Inter', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #0f1724 !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }
    .mobile-campus-badge-card,
    .mobile-location-card,
    .locker-mobile-only.mobile-campus-badge-card,
    .locker-mobile-only.mobile-location-card {
        width: calc(100% - 32px) !important;
        max-width: 360px !important;
        min-height: 64px !important;
        height: auto !important;
        background-color: #e9f0ff !important;
        border-radius: 6px !important;
        padding: 14px 16px !important;
        margin: 0 auto 16px auto !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
    }
    .campus-badge-icon-box,
    .mobile-location-icon-box {
        width: 36px !important;
        height: 36px !important;
        border-radius: 4px !important;
        background-color: #f7fbff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .campus-badge-icon-box svg,
    .mobile-location-icon-box svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #0f1724 !important;
        stroke-width: 1.67 !important;
        fill: none !important;
    }
    .campus-badge-details,
    .mobile-location-details {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    .campus-badge-name,
    .mobile-location-name {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #0f1724 !important;
        line-height: 1.2 !important;
        margin: 0 0 2px 0 !important;
    }
    .campus-badge-floor,
    .mobile-location-floor {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #354155 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    /* --- Component 4: 2x5 Locker Grid & Pagination (Figma 2229:836, 2229:861) --- */
    .mobile-grid-section-header,
    .mobile-section-heading,
    .mobile-duration-heading {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #0f1724 !important;
        width: 100% !important;
        max-width: 335px !important;
        margin: 16px auto 12px auto !important;
        padding: 0 !important;
        line-height: 22px !important;
        box-sizing: border-box !important;
    }
    .lockers-grid-section {
        width: 100% !important;
        max-width: 335px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .locker-grid-wrapper {
        width: 100% !important;
        max-width: 335px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    #locker-grid.locker-paginated-grid,
    .locker-paginated-grid {
        display: grid !important;
        grid-template-columns: repeat(5, 59px) !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 335px !important;
        max-width: 335px !important;
        margin: 12px auto 16px auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .locker-cell {
        width: 59px !important;
        max-width: 59px !important;
        height: 59px !important;
        min-height: 59px !important;
        max-height: 59px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 0 auto !important;
        cursor: pointer !important;
        transition: all 0.15s ease-in-out !important;
        user-select: none !important;
    }
    .locker-cell .locker-cube-svg,
    .locker-cell .locker-cell-pkg-svg,
    .locker-cell .locker-cell-icon {
        display: none !important;
    }
    .locker-cell .locker-cell-number {
        font-family: 'Inter', -apple-system, sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .locker-cell.available {
        background-color: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        color: #0f1724 !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }
    .locker-cell.available .locker-cell-number {
        color: #0f1724 !important;
    }
    .locker-cell.available:hover,
    .locker-cell.available:active {
        background-color: #f7fbff !important;
        border-color: rgba(0, 0, 0, 0.18) !important;
    }
    .locker-cell.available.selected,
    .locker-cell.selected {
        background-color: #2a5135 !important;
        border: 1px solid #139200 !important;
        box-shadow: 0 0 0 1px #139200 !important;
        color: #ffffff !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .locker-cell.available.selected .locker-cell-number,
    .locker-cell.selected .locker-cell-number {
        color: #ffffff !important;
    }
    .locker-cell.occupied {
        background-color: #f1f5f9 !important;
        border: none !important;
        color: #94a3b8 !important;
        opacity: 0.60 !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
        box-shadow: none !important;
    }
    .locker-cell.occupied .locker-cell-number {
        color: #94a3b8 !important;
    }
    .locker-cell.occupied .locker-occupied-badge {
        display: none !important;
    }

    /* Mobile Pagination Bar */
    .mobile-grid-pagination,
    .mobile-locker-pagination {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 335px !important;
        margin: 10px auto 20px auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .mobile-pagination-btn {
        height: 36px !important;
        padding: 0 14px !important;
        background-color: #e9f0ff !important;
        color: #06307a !important;
        border-radius: 6px !important;
        border: none !important;
        font-family: 'Inter', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        cursor: pointer !important;
        transition: background-color 0.15s ease !important;
    }
    .mobile-pagination-btn:hover {
        background-color: #dbeafe !important;
    }
    .mobile-pagination-btn:disabled,
    .mobile-pagination-btn.disabled {
        opacity: 0.50 !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
    }
    .mobile-pagination-status {
        font-family: 'Inter', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #94a3b8 !important;
    }

    /* --- Component 5: Rental Duration Cards (Figma 2229:874, 2229:2312) --- */
    .mobile-rental-duration-section {
        width: 100% !important;
        max-width: 335px !important;
        margin: 0 auto 24px auto !important;
        box-sizing: border-box !important;
    }
    .mobile-rental-duration-group,
    .mobile-duration-cards-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .mobile-duration-card {
        width: 100% !important;
        border-radius: 6px !important;
        padding: 16px 17px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }
    .mobile-duration-card:not(.active) {
        background-color: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
    }
    .mobile-duration-card:not(.active) .duration-card-icon-box,
    .mobile-duration-card:not(.active) .mobile-duration-icon-box {
        width: 40px !important;
        height: 40px !important;
        border-radius: 6px !important;
        background-color: #e9f0ff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .mobile-duration-card:not(.active) .duration-card-icon-box svg,
    .mobile-duration-card:not(.active) .mobile-duration-icon-box svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #0f1724 !important;
        stroke-width: 1.67 !important;
        fill: none !important;
    }
    .mobile-duration-card.active {
        background-color: #e9f0ff !important;
        border: 2px solid #2a5135 !important;
    }
    .mobile-duration-card.active .duration-card-icon-box,
    .mobile-duration-card.active .mobile-duration-icon-box {
        width: 40px !important;
        height: 40px !important;
        border-radius: 6px !important;
        background-color: #2a5135 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .mobile-duration-card.active .duration-card-icon-box svg,
    .mobile-duration-card.active .mobile-duration-icon-box svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #ffffff !important;
        stroke-width: 1.67 !important;
        fill: none !important;
    }
    .mobile-duration-content {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }
    .duration-card-body,
    .mobile-duration-text {
        display: flex !important;
        flex-direction: column !important;
    }
    .duration-card-title,
    .mobile-duration-title {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #0f1724 !important;
        margin: 0 0 2px 0 !important;
        line-height: 1.2 !important;
    }
    .duration-card-subtitle,
    .mobile-duration-subtitle {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #354155 !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }
    .duration-card-price-badge,
    .mobile-duration-price {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #0f1724 !important;
        white-space: nowrap !important;
    }
    .duration-card-action-badge,
    .mobile-duration-action-link,
    .action-link-text {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #139200 !important;
        cursor: pointer !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
        text-decoration: none !important;
    }
    .duration-card-action-badge:hover,
    .mobile-duration-action-link:hover,
    .action-link-text:hover {
        text-decoration: underline !important;
    }

    /* --- Component 6: Sticky Bottom Price & CTA Bar (Figma 2229:905) --- */
    .mobile-sticky-bottom-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 81px !important;
        background-color: #ffffff !important;
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        z-index: 1000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 20px !important;
        box-sizing: border-box !important;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04) !important;
    }
    .sticky-price-column,
    .mobile-sticky-price-group {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 120px !important;
    }
    .sticky-price-label,
    .mobile-sticky-price-label {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #354155 !important;
        line-height: 1.2 !important;
        margin: 0 0 2px 0 !important;
    }
    .sticky-price-amount,
    .mobile-sticky-price-val {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #0f1724 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }
    .btn-mobile-sticky-cta,
    .mobile-sticky-cta-btn {
        width: 150.28px !important;
        height: 48px !important;
        min-width: 140px !important;
        background: linear-gradient(57.23deg, #1a3a23 1.49%, #294f34 53.82%, #356643 100%) !important;
        border: none !important;
        border-radius: 4px !important;
        color: #ffffff !important;
        font-family: 'Tenor Sans', Georgia, serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        cursor: pointer !important;
        transition: opacity 0.2s ease, transform 0.1s ease !important;
        text-decoration: none !important;
    }
    .btn-mobile-sticky-cta:active,
    .mobile-sticky-cta-btn:active {
        transform: scale(0.98) !important;
    }
    .btn-mobile-sticky-cta:disabled,
    .btn-mobile-sticky-cta.disabled,
    .mobile-sticky-cta-btn:disabled,
    .mobile-sticky-cta-btn.disabled {
        opacity: 0.50 !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
    }
    .btn-mobile-sticky-cta svg,
    .mobile-sticky-cta-btn svg {
        width: 18px !important;
        height: 18px !important;
        stroke: #ffffff !important;
        stroke-width: 1.5 !important;
        fill: none !important;
    }

    /* --- Component 7: Help Center Modal (Figma 2231:818) --- */
    .mobile-help-modal-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-color: rgba(0, 0, 0, 0.45) !important;
        z-index: 2000 !important;
        display: none;
        align-items: flex-end !important;
        justify-content: center !important;
        backdrop-filter: blur(2px) !important;
    }
    .mobile-help-modal-overlay.active,
    .mobile-help-modal-overlay.open {
        display: flex !important;
    }
    .mobile-help-modal-container,
    .mobile-help-bottom-sheet {
        width: 100% !important;
        max-width: 480px !important;
        max-height: 90vh !important;
        background-color: #f7fbff !important;
        border-top-left-radius: 16px !important;
        border-top-right-radius: 16px !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        padding: 0 0 32px 0 !important;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15) !important;
        animation: mobileSlideUp 0.25s ease-out !important;
    }
    @keyframes mobileSlideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    .mobile-help-header,
    .mobile-help-sheet-header {
        height: 64px !important;
        padding: 12px 20px !important;
        background-color: #ffffff !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        box-sizing: border-box !important;
    }
    .btn-help-back,
    .mobile-help-close-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 6px !important;
        background-color: #e9f0ff !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        padding: 0 !important;
    }
    .btn-help-back svg,
    .mobile-help-close-btn svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #0f1724 !important;
        stroke-width: 2.0 !important;
        fill: none !important;
    }
    .help-header-title,
    .mobile-help-sheet-title {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #0f1724 !important;
        text-align: center !important;
        flex: 1 !important;
        margin: 0 !important;
    }
    .help-header-placeholder,
    .mobile-help-header-spacer {
        width: 36px !important;
    }
    .help-intro-card,
    .mobile-help-intro {
        padding: 20px 20px 12px 20px !important;
    }
    .help-intro-title,
    .mobile-help-intro-title {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #0f1724 !important;
        margin: 0 0 6px 0 !important;
    }
    .help-intro-text,
    .mobile-help-intro-desc {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #354155 !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }
    .help-faq-accordion-group,
    .mobile-help-faq-list {
        padding: 0 20px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }
    .help-faq-item,
    .mobile-help-faq-item {
        border-radius: 6px !important;
        overflow: hidden !important;
        transition: all 0.2s ease !important;
    }
    .help-faq-header,
    .mobile-faq-header {
        background-color: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        padding: 16px 17px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #0f1724 !important;
        cursor: pointer !important;
        transition: background-color 0.2s ease, color 0.2s ease !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }
    .help-faq-header svg,
    .mobile-faq-header svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #94a3b8 !important;
        stroke-width: 1.67 !important;
        fill: none !important;
        flex-shrink: 0 !important;
        transition: transform 0.2s ease, stroke 0.2s ease !important;
    }
    .help-faq-item.open .help-faq-header,
    .mobile-help-faq-item.open .mobile-faq-header {
        background-color: #ac9a84 !important;
        color: #ffffff !important;
        border-color: #ac9a84 !important;
    }
    .help-faq-item.open .help-faq-header svg,
    .mobile-help-faq-item.open .mobile-faq-header svg {
        stroke: #ffffff !important;
        transform: rotate(180deg) !important;
    }
    .help-faq-body,
    .mobile-faq-body {
        display: none;
        background-color: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-top: none !important;
        padding: 14px 17px 18px 17px !important;
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #354155 !important;
        line-height: 1.5 !important;
        box-sizing: border-box !important;
    }
    .help-faq-item.open .help-faq-body,
    .mobile-help-faq-item.open .mobile-faq-body {
        display: block !important;
    }

    /* ==========================================================================
       COMPONENT 8: DATE RANGE PICKER MODAL (Figma Node 2229:923 - "Fechas de renta")
       ========================================================================== */
    
    /* 1. Modal Overlay Backdrop */
    #mobile-date-picker-modal.locker-mobile-only,
    .mobile-date-modal-overlay.locker-mobile-only {
        display: none !important;
    }
    #mobile-date-picker-modal.locker-mobile-only.active,
    #mobile-date-picker-modal.locker-mobile-only.open,
    .mobile-date-modal-overlay.locker-mobile-only.active,
    .mobile-date-modal-overlay.locker-mobile-only.open {
        display: flex !important;
    }
    .mobile-date-modal-overlay,
    #mobile-date-picker-modal {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 10000 !important;
        align-items: flex-end !important;
        justify-content: center !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
        box-sizing: border-box !important;
    }

    /* 2. Modal Sheet / Container */
    .mobile-date-modal-container,
    .mobile-date-modal-sheet,
    .mobile-date-bottom-sheet,
    #mobile-date-picker-modal .modal-content {
        width: 100% !important;
        max-width: 480px !important;
        max-height: 90vh !important;
        height: auto !important;
        background: #ffffff !important;
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        overflow: hidden !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
        padding: 0 0 96px 0 !important; /* Clears 81px sticky bottom bar */
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15) !important;
        position: relative !important;
        animation: mobileSheetSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        display: flex !important;
        flex-direction: column !important;
    }
    @keyframes mobileSheetSlideUp {
        from {
            transform: translateY(100%);
            opacity: 0.8;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* 3. Drag Handle Indicator */
    .mobile-date-modal-drag-handle {
        width: 36px !important;
        height: 4px !important;
        border-radius: 2px !important;
        background-color: #cbd5e1 !important;
        margin: 10px auto 4px auto !important;
        display: block !important;
    }

    /* 4. Modal Header Bar */
    .mobile-date-modal-header,
    .mobile-date-sheet-header {
        height: 64px !important;
        padding: 12px 20px !important;
        background-color: #ffffff !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        box-sizing: border-box !important;
    }
    #btn-mobile-close-date-modal,
    #btn-mobile-back-date-modal,
    .mobile-date-modal-close-btn,
    .btn-mobile-close-date-modal,
    .btn-date-modal-back {
        width: 40px !important;
        height: 40px !important;
        border-radius: 6px !important;
        background-color: #e9f0ff !important;
        border: 1px solid #bfdbfe !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        transition: background-color 0.15s ease !important;
    }
    #btn-mobile-close-date-modal:hover,
    #btn-mobile-back-date-modal:hover,
    .mobile-date-modal-close-btn:hover,
    .btn-mobile-close-date-modal:hover,
    .btn-date-modal-back:hover {
        background-color: #dbeafe !important;
    }
    #btn-mobile-close-date-modal svg,
    #btn-mobile-back-date-modal svg,
    .mobile-date-modal-close-btn svg,
    .btn-mobile-close-date-modal svg,
    .btn-date-modal-back svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #0f1724 !important;
        stroke-width: 2.0 !important;
        fill: none !important;
    }
    .mobile-date-modal-title,
    .mobile-date-sheet-title {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #0f1724 !important;
        text-align: center !important;
        flex: 1 !important;
        margin: 0 !important;
        line-height: 20px !important;
    }
    .mobile-date-header-spacer {
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0 !important;
    }

    .mobile-date-modal-body-scroll {
        padding: 16px 20px 100px 20px !important;
        flex: 1 !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    /* 5. Range Summary Card (Inicio 14 Nov -> Fin 17 Nov) */
    .mobile-date-range-summary-card,
    .date-modal-summary-card {
        width: calc(100% - 40px) !important;
        max-width: 335px !important;
        height: 74px !important;
        margin: 16px auto 14px auto !important;
        background-color: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 6px !important;
        padding: 14px 24px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .mobile-range-summary-col,
    .summary-card-col,
    .range-summary-item {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    .mobile-range-summary-label,
    .summary-col-label,
    .range-summary-label {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #354155 !important;
        line-height: 1.2 !important;
        margin: 0 0 2px 0 !important;
    }
    .mobile-range-summary-val,
    .summary-col-date,
    .range-summary-date,
    #mobile-date-summary-start,
    #mobile-date-summary-end,
    #mobile-range-start-val,
    #mobile-range-end-val {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #0f1724 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }
    .mobile-range-arrow-badge,
    .summary-card-arrow-badge,
    .range-summary-arrow-badge {
        width: 32px !important;
        height: 32px !important;
        border-radius: 16px !important;
        background-color: #e9f0ff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        margin: 0 12px !important;
    }
    .mobile-range-arrow-badge svg,
    .summary-card-arrow-badge svg,
    .range-summary-arrow-badge svg {
        width: 16px !important;
        height: 16px !important;
        stroke: #0f1724 !important;
        stroke-width: 1.33 !important;
        fill: none !important;
    }

    /* 6. Calendar Card Container */
    .mobile-calendar-card,
    .mobile-date-picker-card {
        width: calc(100% - 40px) !important;
        max-width: 335px !important;
        background-color: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 6px !important;
        padding: 18px 12px 20px 12px !important;
        margin: 0 auto 16px auto !important;
        box-sizing: border-box !important;
    }

    /* 7. Month Navigation Row */
    .mobile-calendar-nav-header,
    .mobile-calendar-month-nav,
    .mobile-month-nav-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 16px !important;
        padding: 0 4px !important;
    }
    #btn-mobile-prev-month,
    #btn-mobile-next-month,
    .btn-calendar-nav,
    .mobile-month-nav-btn,
    .btn-mobile-month-nav {
        width: 32px !important;
        height: 32px !important;
        border-radius: 4px !important;
        background-color: #e9f0ff !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        transition: background-color 0.15s ease !important;
    }
    #btn-mobile-prev-month:hover,
    #btn-mobile-next-month:hover,
    .btn-calendar-nav:hover,
    .mobile-month-nav-btn:hover,
    .btn-mobile-month-nav:hover {
        background-color: #dbeafe !important;
    }
    #btn-mobile-prev-month:disabled,
    #btn-mobile-next-month:disabled,
    #btn-mobile-prev-month.disabled,
    #btn-mobile-next-month.disabled,
    .btn-calendar-nav:disabled,
    .btn-calendar-nav.disabled {
        opacity: 0.40 !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
    }
    #btn-mobile-prev-month svg,
    #btn-mobile-next-month svg,
    .btn-calendar-nav svg,
    .mobile-month-nav-btn svg,
    .btn-mobile-month-nav svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #0f1724 !important;
        stroke-width: 1.67 !important;
        fill: none !important;
    }
    #mobile-calendar-month-year,
    #mobile-calendar-month-title,
    .mobile-calendar-month-title,
    .mobile-month-title {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #0f1724 !important;
        text-align: center !important;
        flex: 1 !important;
        margin: 0 8px !important;
    }

    /* 8. Calendar Weekday Headers (7 Equal Columns) */
    #mobile-calendar-weekdays,
    .mobile-calendar-weekdays,
    .mobile-weekdays-row {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        text-align: center !important;
        margin-bottom: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .mobile-calendar-weekday,
    .mobile-weekday-cell,
    .mobile-weekday {
        font-family: 'Inter', -apple-system, sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #94a3b8 !important;
        text-align: center !important;
        line-height: 24px !important;
        padding: 4px 0 !important;
    }

    /* 9. Calendar Day Grid (7 Equal Columns, ~44px Row Height) */
    #mobile-calendar-grid,
    .mobile-calendar-grid {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        row-gap: 4px !important;
        column-gap: 0 !important; /* Seamless continuous range highlight */
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .mobile-calendar-day,
    .mobile-calendar-cell,
    .mobile-day-cell,
    .mobile-day-node {
        height: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        font-family: 'Inter', -apple-system, sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #1e293b !important;
        user-select: none !important;
        background: transparent !important;
        border: none !important;
    }
    .mobile-day-inner,
    .cell-day-number,
    .day-inner,
    .mobile-day-number,
    .mobile-day-circle {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        z-index: 2 !important;
        box-sizing: border-box !important;
        transition: background-color 0.15s ease, color 0.15s ease !important;
    }

    /* 10. Visual States for Dates (Figma Node 2229:923) */

    /* Regular Available Day */
    .mobile-calendar-day:not(.disabled):not(.empty):not(.past):hover .mobile-day-inner,
    .mobile-calendar-cell:not(.disabled):not(.empty):not(.past):hover .cell-day-number {
        background-color: #f1f5f9 !important;
    }

    /* Strip helper */
    .cell-range-strip {
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        z-index: 1 !important;
    }

    /* Range Start Date (Endpoint) */
    .mobile-calendar-day.day-range-start:not(.day-range-end)::before,
    .mobile-calendar-day.range-start:not(.range-end)::before,
    .mobile-calendar-cell.day-range-start:not(.day-range-end)::before,
    .mobile-calendar-cell.range-start:not(.range-end)::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 50% !important;
        right: 0 !important;
        background-color: #e9f0ff !important;
        z-index: 1 !important;
    }
    .mobile-calendar-day.day-range-start .cell-range-strip,
    .mobile-calendar-cell.range-start .cell-range-strip {
        right: 0 !important;
        left: 50% !important;
        width: 50% !important;
        background-color: #e9f0ff !important;
    }
    .mobile-calendar-day.day-range-start .mobile-day-inner,
    .mobile-calendar-day.range-start .mobile-day-inner,
    .mobile-calendar-cell.day-range-start .cell-day-number,
    .mobile-calendar-cell.range-start .cell-day-number {
        background-color: #2a5135 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 6px rgba(42, 81, 53, 0.25) !important;
        z-index: 2 !important;
    }

    /* Range End Date (Endpoint) */
    .mobile-calendar-day.day-range-end:not(.day-range-start)::before,
    .mobile-calendar-day.range-end:not(.range-start)::before,
    .mobile-calendar-cell.day-range-end:not(.day-range-start)::before,
    .mobile-calendar-cell.range-end:not(.range-start)::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 50% !important;
        background-color: #e9f0ff !important;
        z-index: 1 !important;
    }
    .mobile-calendar-day.day-range-end .cell-range-strip,
    .mobile-calendar-cell.range-end .cell-range-strip {
        left: 0 !important;
        width: 50% !important;
        background-color: #e9f0ff !important;
    }
    .mobile-calendar-day.day-range-end .mobile-day-inner,
    .mobile-calendar-day.range-end .mobile-day-inner,
    .mobile-calendar-cell.day-range-end .cell-day-number,
    .mobile-calendar-cell.range-end .cell-day-number {
        background-color: #2a5135 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 6px rgba(42, 81, 53, 0.25) !important;
        z-index: 2 !important;
    }

    /* Range Intermediate Days */
    .mobile-calendar-day.day-in-range,
    .mobile-calendar-day.in-range,
    .mobile-calendar-cell.day-in-range,
    .mobile-calendar-cell.in-range {
        background-color: #e9f0ff !important;
        color: #1e293b !important;
        font-weight: 500 !important;
        border-radius: 0 !important;
    }
    .mobile-calendar-day.day-in-range .cell-range-strip,
    .mobile-calendar-cell.range-in-range .cell-range-strip,
    .mobile-calendar-cell.in-range .cell-range-strip {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background-color: #e9f0ff !important;
    }
    .mobile-calendar-day.day-in-range .mobile-day-inner,
    .mobile-calendar-day.in-range .mobile-day-inner,
    .mobile-calendar-cell.day-in-range .cell-day-number,
    .mobile-calendar-cell.in-range .cell-day-number {
        background-color: transparent !important;
        color: #1e293b !important;
        font-weight: 500 !important;
        border-radius: 0 !important;
    }

    /* Single Day Selected (Start == End) */
    .mobile-calendar-day.day-selected-single .mobile-day-inner,
    .mobile-calendar-day.range-start.range-end .mobile-day-inner,
    .mobile-calendar-cell.day-selected-single .cell-day-number,
    .mobile-calendar-cell.range-start.range-end .cell-day-number {
        background-color: #2a5135 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        border-radius: 50% !important;
        z-index: 2 !important;
    }

    /* Disabled / Past Days */
    .mobile-calendar-day.disabled,
    .mobile-calendar-day.past,
    .mobile-calendar-day.past-day,
    .mobile-calendar-cell.disabled,
    .mobile-calendar-cell.past,
    .mobile-calendar-cell.past-day {
        color: #cbd5e1 !important;
        pointer-events: none !important;
        cursor: not-allowed !important;
        background: transparent !important;
    }
    .mobile-calendar-day.disabled .mobile-day-inner,
    .mobile-calendar-day.past .mobile-day-inner,
    .mobile-calendar-day.past-day .mobile-day-inner,
    .mobile-calendar-cell.disabled .cell-day-number,
    .mobile-calendar-cell.past .cell-day-number,
    .mobile-calendar-cell.past-day .cell-day-number {
        color: #cbd5e1 !important;
    }

    /* Out-of-Month / Empty Cells */
    .mobile-calendar-day.empty,
    .mobile-calendar-cell.empty {
        pointer-events: none !important;
        background: transparent !important;
        border: none !important;
    }
    .mobile-calendar-day.other-month,
    .mobile-calendar-day.out-of-month,
    .mobile-calendar-cell.other-month,
    .mobile-calendar-cell.out-of-month {
        color: #94a3b8 !important;
        opacity: 0.50 !important;
    }

    /* 11. Sticky Confirmation Bottom Bar */
    #mobile-date-modal-sticky-bar,
    .mobile-date-modal-sticky-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 81px !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
        z-index: 10001 !important; /* Layers above modal content (z-index 10000) */
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 20px !important;
        box-sizing: border-box !important;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04) !important;
    }
    .mobile-date-modal-summary-col,
    .mobile-date-modal-price-col {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 120px !important;
    }
    #mobile-date-count,
    .mobile-date-count-label {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #354155 !important;
        line-height: 1.2 !important;
        margin: 0 0 2px 0 !important;
    }
    #mobile-date-total-val,
    .mobile-date-total-val {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #0f1724 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }
    #btn-mobile-confirm-dates,
    .btn-mobile-confirm-dates,
    .mobile-date-confirm-btn {
        width: 150.28px !important;
        height: 48px !important;
        min-width: 140px !important;
        background: #2a5135 !important;
        background-color: #2a5135 !important;
        color: #ffffff !important;
        font-family: 'Tenor Sans', 'Montserrat', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        border: none !important;
        border-radius: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        cursor: pointer !important;
        transition: background-color 0.15s ease, transform 0.1s ease, opacity 0.2s ease !important;
        text-decoration: none !important;
    }
    #btn-mobile-confirm-dates:active,
    .btn-mobile-confirm-dates:active {
        transform: scale(0.98) !important;
    }
    #btn-mobile-confirm-dates:disabled,
    #btn-mobile-confirm-dates.disabled,
    .btn-mobile-confirm-dates:disabled,
    .btn-mobile-confirm-dates.disabled {
        opacity: 0.50 !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
    }
    #btn-mobile-confirm-dates svg,
    .btn-mobile-confirm-dates svg {
        width: 14px !important;
        height: 10px !important;
        stroke: #ffffff !important;
        stroke-width: 1.5 !important;
        fill: none !important;
        flex-shrink: 0 !important;
    }

    /* ==========================================================================
       COMPONENT 12: MOBILE CHECKOUT PROCESS (Figma Nodes 2229:1061 & 2229:1818)
       ========================================================================== */

    /* 1. Mobile Checkout Container Flow & Clearance */
    #mobile-checkout-container.locker-mobile-only,
    .mobile-checkout-container.locker-mobile-only {
        display: none !important;
    }
    #mobile-checkout-container.locker-mobile-only.active,
    #mobile-checkout-container.locker-mobile-only.open,
    .mobile-checkout-container.locker-mobile-only.active,
    .mobile-checkout-container.locker-mobile-only.open {
        display: flex !important;
        flex-direction: column !important;
    }
    #mobile-checkout-container:not(.active):not(.open),
    .mobile-checkout-container:not(.active):not(.open),
    #mobile-checkout-container.locker-mobile-hidden,
    .mobile-checkout-container.locker-mobile-hidden,
    body:not(.checkout-mobile-open):not(.in-checkout) #mobile-checkout-container,
    body:not(.checkout-mobile-open):not(.in-checkout) .mobile-checkout-container {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
    #mobile-checkout-container,
    .mobile-checkout-container {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        background-color: #f8fafc !important;
        padding: 0 16px 120px 16px !important; /* 120px provides full clearance for 81px sticky bottom bar + safe area */
        margin: 0 auto !important;
        box-sizing: border-box !important;
        overflow-x: clip !important;
        overflow-y: visible !important;
        position: relative !important;
    }
    .mobile-checkout-content-wrap,
    .mobile-checkout-body-scroll {
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    /* 2. Mobile Checkout Header */
    #mobile-checkout-header,
    .mobile-checkout-header {
        height: 64px !important;
        padding: 12px 0 !important;
        margin-bottom: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    }
    #btn-mobile-checkout-back,
    .btn-mobile-checkout-back,
    .mobile-checkout-back-btn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
        background-color: #e9f0ff !important;
        border: 1px solid #bfdbfe !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        transition: background-color 0.15s ease !important;
    }
    #btn-mobile-checkout-back:hover,
    .btn-mobile-checkout-back:hover {
        background-color: #dbeafe !important;
    }
    #btn-mobile-checkout-back svg,
    .btn-mobile-checkout-back svg {
        width: 24px !important;
        height: 24px !important;
        stroke: #0f1724 !important;
        stroke-width: 2.0 !important;
        fill: none !important;
    }
    #mobile-checkout-title,
    .mobile-checkout-header-title,
    .mobile-checkout-title,
    #mobile-checkout-heading {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #0f1724 !important;
        text-align: center !important;
        flex: 1 !important;
        margin: 0 10px !important;
        line-height: 20px !important;
    }
    .mobile-checkout-header-spacer,
    .mobile-header-placeholder {
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0 !important;
    }

    /* 3. Hold Countdown Banner in Checkout */
    #mobile-checkout-hold-banner,
    .mobile-checkout-hold-banner {
        height: 44px !important;
        background-color: #e9f0ff !important;
        border-radius: 10px !important;
        border: 1px solid rgba(0, 0, 0, 0.04) !important;
        margin-bottom: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
    .mobile-checkout-hold-icon svg,
    .mobile-checkout-hold-banner svg {
        width: 18px !important;
        height: 18px !important;
        stroke: #139200 !important;
        stroke-width: 1.5 !important;
        fill: none !important;
    }
    .mobile-checkout-hold-label {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #06307a !important;
    }
    #mobile-checkout-hold-timer,
    .mobile-checkout-hold-timer {
        font-family: 'Inter', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #139200 !important;
    }

    /* 4. Section Headings */
    .mobile-checkout-section-title,
    .mobile-checkout-heading {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #0f1724 !important;
        margin: 18px 0 10px 0 !important;
        line-height: 20px !important;
    }

    /* 5. Booking Summary Card ("Tu reservación") */
    #mobile-checkout-summary-card,
    .mobile-checkout-summary-card,
    .mobile-summary-card {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 16px !important;
        padding: 16px 20px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin-bottom: 16px !important;
    }
    .mobile-summary-item,
    .checkout-summary-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }
    .mobile-summary-icon-box {
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
        background-color: #e9f0ff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .mobile-summary-icon-box svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #0f1724 !important;
        stroke-width: 1.67 !important;
        fill: none !important;
    }
    .mobile-summary-info {
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    .mobile-summary-title,
    #mobile-checkout-summary-locker,
    #mobile-checkout-summary-dates,
    #mobile-checkout-locker-badge,
    #mobile-checkout-dates {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #0f1724 !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .mobile-summary-subtitle,
    #mobile-checkout-summary-locker-desc,
    #mobile-checkout-summary-dates-desc,
    #mobile-checkout-duration {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #64748b !important;
        line-height: 1.3 !important;
        margin: 2px 0 0 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    #btn-mobile-change-locker,
    #btn-mobile-checkout-change-dates,
    .btn-mobile-change-link,
    .mobile-summary-change-btn {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #2a5135 !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 6px 8px !important;
        border-radius: 6px !important;
        transition: background-color 0.15s ease, text-decoration 0.15s ease !important;
        text-decoration: none !important;
        flex-shrink: 0 !important;
    }
    #btn-mobile-change-locker:hover,
    #btn-mobile-checkout-change-dates:hover,
    .btn-mobile-change-link:hover {
        background-color: #ecfdf5 !important;
        text-decoration: underline !important;
    }
    .mobile-summary-divider,
    .mobile-card-divider {
        height: 1px !important;
        background-color: #e2e8f0 !important;
        margin: 12px 0 !important;
        border: none !important;
        width: 100% !important;
    }

    /* 6. Dual Payment Accordion Cards */
    .mobile-payment-accordion-group,
    .mobile-payment-cards-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 16px !important;
    }
    .mobile-payment-card,
    .payment-accordion-card {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        width: 100% !important;
        transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important;
    }
    /* Active Payment Card Highlight */
    .mobile-payment-card.active,
    .mobile-payment-card.selected,
    .mobile-payment-card.is-active,
    .payment-accordion-card.active,
    .payment-accordion-card.selected,
    .mobile-payment-option-card.active,
    .mobile-payment-option-card.selected {
        border: 2px solid #2a5135 !important;
        box-shadow: 0 4px 14px rgba(42, 81, 53, 0.12) !important;
        background: #ffffff !important;
    }
    .mobile-payment-card-header,
    .payment-card-header,
    .mobile-payment-option-header {
        padding: 16px 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        cursor: pointer !important;
        user-select: none !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
    .payment-header-left {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Custom Radio Indicator */
    .mobile-payment-radio,
    .payment-radio-indicator,
    .mobile-payment-radio-indicator {
        width: 20px !important;
        height: 20px !important;
        border-radius: 50% !important;
        border: 2px solid #cbd5e1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
        background: #ffffff !important;
        position: relative !important;
    }
    .mobile-payment-card.active .mobile-payment-radio,
    .mobile-payment-card.selected .mobile-payment-radio,
    .mobile-payment-option-card.active .mobile-payment-radio-indicator,
    .mobile-payment-radio.checked,
    .mobile-payment-radio-indicator.checked,
    input[name="mobile_payment_method"]:checked + .mobile-payment-radio {
        border-color: #2a5135 !important;
    }
    .mobile-payment-card.active .mobile-payment-radio::after,
    .mobile-payment-card.selected .mobile-payment-radio::after,
    .mobile-payment-option-card.active .mobile-payment-radio-indicator::after,
    .mobile-payment-radio.checked::after,
    .mobile-payment-radio-indicator.checked::after,
    input[name="mobile_payment_method"]:checked + .mobile-payment-radio::after {
        content: '' !important;
        display: block !important;
        width: 10px !important;
        height: 10px !important;
        border-radius: 50% !important;
        background-color: #2a5135 !important;
    }
    .payment-method-icon-box,
    .mobile-payment-method-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
        background-color: #e9f0ff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .payment-method-icon-box svg,
    .mobile-payment-method-icon svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #0f1724 !important;
        stroke-width: 1.67 !important;
        fill: none !important;
    }
    .payment-header-text,
    .mobile-payment-header-info {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
        flex: 1 !important;
    }
    .mobile-payment-title,
    .payment-card-title,
    .mobile-payment-method-title {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #0f1724 !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }
    .mobile-payment-subtitle,
    .payment-card-subtitle,
    .mobile-payment-method-subtitle {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #64748b !important;
        line-height: 1.3 !important;
        margin: 2px 0 0 0 !important;
    }

    /* Collapsible Form Panel & Smooth Accordion Transition */
    .mobile-payment-body,
    .mobile-payment-form-panel,
    .payment-accordion-body,
    #card-form-panel,
    #onsite-form-panel {
        max-height: 0;
        opacity: 0;
        padding: 0 20px !important;
        overflow: hidden;
        pointer-events: none;
        border-top: 1px solid transparent !important;
        box-sizing: border-box !important;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.25s ease,
                    padding 0.35s ease,
                    border-color 0.2s ease !important;
    }
    .mobile-payment-card.active .mobile-payment-body,
    .mobile-payment-card.selected .mobile-payment-body,
    .mobile-payment-option-card.active .mobile-payment-form-panel,
    .mobile-payment-body.open,
    .mobile-payment-body.active,
    #card-form-panel.active,
    #card-form-panel.open,
    #onsite-form-panel.active,
    #onsite-form-panel.open {
        max-height: 600px !important;
        opacity: 1 !important;
        padding: 16px 20px 20px 20px !important;
        overflow: visible !important;
        pointer-events: auto !important;
        border-top-color: #f1f5f9 !important;
    }

    /* Desk Instructions Alert Badge in On-site Option */
    .mobile-onsite-notice,
    .onsite-alert-badge,
    .mobile-onsite-instructions-banner {
        background-color: #ecfdf5 !important;
        border: 1px solid #10b981 !important;
        border-radius: 8px !important;
        padding: 10px 12px !important;
        margin-bottom: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        box-sizing: border-box !important;
    }
    .onsite-alert-badge svg {
        width: 18px !important;
        height: 18px !important;
        stroke: #2a5135 !important;
        stroke-width: 1.5 !important;
        fill: none !important;
        flex-shrink: 0 !important;
        margin-top: 2px !important;
    }
    .onsite-alert-text,
    .mobile-onsite-alert-badge {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 13px !important;
        color: #1e3a26 !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }

    /* 7. Form Field Styling */
    .mobile-form-group,
    .checkout-field-group {
        margin-bottom: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .mobile-form-group:last-child {
        margin-bottom: 0 !important;
    }
    .mobile-form-label,
    .checkout-field-label {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #354155 !important;
        margin: 0 0 6px 0 !important;
        line-height: 1.3 !important;
        display: block !important;
    }
    .mobile-checkout-input,
    .checkout-field-input,
    .mobile-form-input,
    #mobile-card-number,
    #mobile-card-exp,
    #mobile-card-expiry,
    #mobile-card-cvc,
    #mobile-card-name,
    #mobile-card-email,
    #mobile-onsite-name,
    #mobile-onsite-email,
    #mobile-onsite-phone {
        height: 48px !important;
        min-height: 48px !important;
        width: 100% !important;
        max-width: 100% !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        font-family: 'Inter', -apple-system, sans-serif !important;
        background-color: #f8fafc !important;
        color: #0f1724 !important;
        padding: 0 14px !important;
        box-sizing: border-box !important;
        outline: none !important;
        transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
    }
    .mobile-checkout-input::placeholder,
    .checkout-field-input::placeholder,
    .mobile-form-input::placeholder {
        color: #94a3b8 !important;
        font-size: 14px !important;
        font-weight: 400 !important;
    }
    .mobile-checkout-input:focus,
    .checkout-field-input:focus,
    .mobile-form-input:focus {
        border-color: #2a5135 !important;
        background-color: #ffffff !important;
        box-shadow: 0 0 0 3px rgba(42, 81, 53, 0.12) !important;
        outline: none !important;
    }
    .mobile-checkout-input.is-invalid,
    .mobile-checkout-input.has-error,
    .mobile-form-input.input-field-error,
    .checkout-field-input.has-error {
        border-color: #ef4444 !important;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
    }
    .mobile-field-feedback {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 12px !important;
        color: #ef4444 !important;
        margin: 4px 0 0 0 !important;
        display: none;
    }
    .mobile-field-feedback.visible,
    .mobile-form-group.has-error .mobile-field-feedback {
        display: block !important;
    }

    /* Side-by-side Form Grid Columns (Exp / CVC) */
    .mobile-form-row,
    .mobile-form-row-dual {
        display: flex !important;
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .mobile-form-col,
    .mobile-form-col-6 {
        flex: 1 !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .mobile-input-with-icon {
        position: relative !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
    }
    .mobile-input-with-icon input {
        padding-right: 44px !important;
    }
    .mobile-input-with-icon .input-icon-right,
    .mobile-input-with-icon .mobile-input-trailing-icon {
        position: absolute !important;
        right: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 20px !important;
        height: 20px !important;
        pointer-events: none !important;
        stroke: #94a3b8 !important;
        stroke-width: 1.5 !important;
        fill: none !important;
    }

    /* 8. Terms Checkbox Card */
    #mobile-checkout-terms-container,
    .mobile-terms-card,
    .mobile-terms-wrapper {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 16px !important;
        padding: 16px 20px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 16px 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    }
    #mobile-checkout-terms-container.has-error,
    .mobile-terms-card.has-error {
        border-color: #ef4444 !important;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
    }
    #mobile-checkout-terms,
    .mobile-terms-checkbox,
    .mobile-terms-checkbox-input {
        appearance: none !important;
        -webkit-appearance: none !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        border-radius: 5px !important;
        border: 2px solid #1d3326 !important;
        background-color: #ffffff !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        margin: 0 10px 0 0 !important;
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        vertical-align: middle !important;
        transition: all 0.2s ease !important;
        flex-shrink: 0 !important;
        outline: none !important;
        box-sizing: border-box !important;
    }
    #mobile-checkout-terms:hover,
    .mobile-terms-checkbox:hover,
    .mobile-terms-checkbox-input:hover {
        border-color: #0b4d3b !important;
        box-shadow: 0 0 0 2px rgba(29, 51, 38, 0.15) !important;
    }
    #mobile-checkout-terms:checked,
    .mobile-terms-checkbox:checked,
    .mobile-terms-checkbox-input:checked {
        background-color: #1d3326 !important;
        border-color: #1d3326 !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 5.5' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 15px 15px !important;
    }
    #mobile-checkout-terms:checked::after,
    .mobile-terms-checkbox:checked::after,
    .mobile-terms-checkbox-input:checked::after {
        display: none !important;
    }
    .mobile-terms-label {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        cursor: pointer !important;
    }
    .mobile-terms-text {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: #354155 !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        cursor: pointer !important;
        user-select: none !important;
        flex: 1 !important;
    }
    .mobile-terms-link,
    .mobile-privacy-link,
    .mobile-terms-card a,
    .mobile-terms-label a {
        color: #1d3326 !important;
        font-weight: 600 !important;
        text-decoration: underline !important;
        transition: color 0.15s ease, text-decoration 0.15s ease !important;
    }
    .mobile-terms-link:hover,
    .mobile-privacy-link:hover,
    .mobile-terms-card a:hover,
    .mobile-terms-label a:hover {
        color: #0b4d3b !important;
        text-decoration: underline !important;
    }

    /* 9. Fee Breakdown Card ("Desglose") */
    #mobile-fee-breakdown-card,
    .mobile-fee-breakdown-card,
    .mobile-breakdown-card,
    #mobile-checkout-breakdown {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 16px !important;
        padding: 16px 20px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    .mobile-fee-row,
    .fee-breakdown-row,
    .mobile-breakdown-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 6px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .mobile-fee-label,
    .mobile-breakdown-label,
    #mobile-fee-tariff-label,
    #mobile-breakdown-rate-label {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #475569 !important;
        line-height: 1.3 !important;
    }
    .mobile-fee-amount,
    .mobile-breakdown-val,
    #mobile-checkout-subtotal,
    #mobile-checkout-tax {
        font-family: 'Inter', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #0f1724 !important;
        line-height: 1.3 !important;
    }
    .mobile-fee-divider,
    .fee-breakdown-divider,
    .mobile-breakdown-divider {
        height: 1px !important;
        background-color: #e2e8f0 !important;
        margin: 10px 0 !important;
        border: none !important;
        width: 100% !important;
    }
    .mobile-fee-total-row,
    .fee-total-row,
    .total-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 4px 0 2px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .mobile-fee-total-label,
    .mobile-breakdown-label-total {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #0f1724 !important;
        line-height: 1.3 !important;
    }
    .mobile-fee-total-amount,
    .mobile-breakdown-val-total,
    #mobile-checkout-total {
        font-family: 'Inter', -apple-system, sans-serif !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #0f1724 !important;
        line-height: 1.3 !important;
    }

    /* 10. Sticky Bottom Bar & Submit CTA Button */
    #mobile-checkout-sticky-bar,
    .mobile-checkout-sticky-bar,
    #mobile-sticky-checkout-bar,
    .mobile-sticky-checkout-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 81px !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
        z-index: 1000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 20px !important;
        box-sizing: border-box !important;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04) !important;
    }
    .checkout-sticky-price-group,
    .mobile-checkout-sticky-col,
    .mobile-sticky-price-group {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 120px !important;
    }
    .checkout-sticky-price-label,
    .mobile-checkout-sticky-price-label,
    .mobile-sticky-price-label {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #64748b !important;
        line-height: 1.2 !important;
        margin: 0 0 2px 0 !important;
    }
    #mobile-sticky-checkout-total,
    #mobile-checkout-sticky-total,
    .mobile-checkout-sticky-val,
    .mobile-sticky-price-val {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #0f1724 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }
    #btn-mobile-submit-payment,
    .btn-mobile-submit-payment,
    #btn-mobile-checkout-submit,
    .btn-mobile-checkout-submit {
        width: auto !important;
        min-width: 150px !important;
        height: 48px !important;
        padding: 0 20px !important;
        background: #2a5135 !important;
        background-color: #2a5135 !important;
        color: #ffffff !important;
        font-family: 'Tenor Sans', 'Montserrat', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        border: none !important;
        border-radius: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        cursor: pointer !important;
        transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.1s ease !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }
    #btn-mobile-submit-payment:active,
    .btn-mobile-submit-payment:active,
    #btn-mobile-checkout-submit:active {
        transform: scale(0.98) !important;
    }
    #btn-mobile-submit-payment:disabled,
    #btn-mobile-submit-payment.disabled,
    #btn-mobile-checkout-submit:disabled,
    #btn-mobile-checkout-submit.disabled {
        background: #94a3b8 !important;
        background-color: #94a3b8 !important;
        color: #ffffff !important;
        cursor: not-allowed !important;
        opacity: 0.50 !important;
        pointer-events: none !important;
        box-shadow: none !important;
    }
    #btn-mobile-submit-payment:not(:disabled):not(.disabled),
    #btn-mobile-checkout-submit:not(:disabled):not(.disabled) {
        opacity: 1.0 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    #btn-mobile-submit-payment svg,
    .btn-mobile-submit-payment svg,
    #btn-mobile-checkout-submit svg {
        width: 16px !important;
        height: 16px !important;
        stroke: #ffffff !important;
        stroke-width: 1.5 !important;
        fill: none !important;
        flex-shrink: 0 !important;
    }

    /* Defense in depth: Hide main mobile view elements while checkout is active */
    body.checkout-mobile-open .mobile-header-bar:not(.mobile-checkout-header),
    body.checkout-mobile-open #mobile-hold-countdown-banner:not(#mobile-checkout-hold-banner),
    body.checkout-mobile-open .locker-rental-map-app .content-layout,
    body.checkout-mobile-open .locker-rental-map-app .filter-bar,
    body.checkout-mobile-open .locker-rental-map-app .locker-search-bar,
    body.checkout-mobile-open #mobile-sticky-bottom-bar:not(#mobile-checkout-sticky-bar) {
        display: none !important;
    }

    /* ==========================================================================
       COMPONENT 13: MOBILE CONFIRMATION / THANK YOU PAGES (Figma Nodes 2229:2378 & 2229:1161)
       Milestone M4: Screen 4A ("¡Compra confirmada!") & Screen 4B ("¡Reserva confirmada!")
       ========================================================================== */

    /* 1. Display Isolation Gating for Confirmation Container */
    #mobile-confirmation-container.locker-mobile-only,
    .mobile-confirmation-container.locker-mobile-only {
        display: none !important;
    }
    #mobile-confirmation-container.locker-mobile-only.active,
    #mobile-confirmation-container.locker-mobile-only.open,
    .mobile-confirmation-container.locker-mobile-only.active,
    .mobile-confirmation-container.locker-mobile-only.open,
    .mobile-confirmation-container.is-active {
        display: flex !important;
        flex-direction: column !important;
    }
    #mobile-confirmation-container:not(.active):not(.open):not(.is-active),
    .mobile-confirmation-container:not(.active):not(.open):not(.is-active),
    #mobile-confirmation-container.locker-mobile-hidden,
    .mobile-confirmation-container.locker-mobile-hidden,
    body:not(.confirmation-mobile-open):not(.in-confirmation) #mobile-confirmation-container,
    body:not(.confirmation-mobile-open):not(.in-confirmation) .mobile-confirmation-container {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
    #mobile-confirmation-container,
    .mobile-confirmation-container {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        background-color: #f7fbff !important;
        padding: 0 20px 48px 20px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        overflow-x: clip !important;
        overflow-y: visible !important;
        position: relative !important;
        z-index: 10 !important;
    }
    .mobile-confirmation-content-wrap,
    #mobile-confirmation-content-wrap,
    .mobile-confirmation-body {
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
    .mobile-confirmation-subview {
        width: 100% !important;
        display: none !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .mobile-confirmation-subview.active,
    .mobile-confirmation-subview.is-active,
    .mobile-confirmation-subview.open {
        display: flex !important;
    }

    /* 2. Top Header Bar & Close Button */
    #mobile-confirmation-header,
    .mobile-confirmation-header {
        height: 64px !important;
        padding: 12px 0 !important;
        margin-bottom: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 480px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    }
    .mobile-confirmation-header-spacer {
        width: 40px !important;
        height: 40px !important;
        visibility: hidden !important;
    }
    #btn-mobile-confirm-close,
    .btn-mobile-confirm-close,
    .mobile-confirmation-close-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 6px !important;
        background-color: #e9f0ff !important;
        border: 1px solid #bfdbfe !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        transition: background-color 0.15s ease, transform 0.1s ease !important;
        box-sizing: border-box !important;
    }
    #btn-mobile-confirm-close:hover,
    .btn-mobile-confirm-close:hover {
        background-color: #dbeafe !important;
    }
    #btn-mobile-confirm-close:active,
    .btn-mobile-confirm-close:active {
        transform: scale(0.96) !important;
    }
    #btn-mobile-confirm-close svg,
    .btn-mobile-confirm-close svg,
    .mobile-confirmation-close-btn svg {
        width: 24px !important;
        height: 24px !important;
        stroke: #0f1724 !important;
        stroke-width: 2.0 !important;
        fill: none !important;
        flex-shrink: 0 !important;
    }

    /* 3. Central Success Hero Section */
    #mobile-confirmation-hero,
    #mobile-confirmation-hero-onsite,
    .mobile-confirmation-hero,
    .mobile-confirm-hero,
    .mobile-confirm-hero-section {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-top: 12px !important;
        margin-bottom: 24px !important;
        width: 100% !important;
        max-width: 335px !important;
        box-sizing: border-box !important;
    }
    #icon-mobile-confirm-check,
    #icon-mobile-confirm-check-onsite,
    .mobile-confirm-check-circle,
    .mobile-confirm-hero-icon,
    .mobile-confirm-hero-icon-wrap {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
        margin: 0 auto 16px auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
    }
    #icon-mobile-confirm-check svg,
    #icon-mobile-confirm-check-onsite svg,
    .mobile-confirm-check-circle svg,
    .mobile-confirm-hero-icon svg,
    .mobile-confirm-hero-icon-wrap svg {
        width: 64px !important;
        height: 64px !important;
        display: block !important;
        flex-shrink: 0 !important;
    }
    #mobile-confirm-title,
    #mobile-confirm-title-online,
    #mobile-confirm-title-onsite,
    .mobile-confirm-title,
    .mobile-confirm-hero-title,
    .mobile-confirmation-title {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 24px !important;
        font-weight: 600 !important;
        color: #0f1724 !important;
        line-height: 29px !important;
        letter-spacing: -0.3px !important;
        text-align: center !important;
        margin: 0 0 10px 0 !important;
        width: 100% !important;
    }
    #mobile-confirm-instructions,
    #mobile-confirm-instructions-online,
    #mobile-confirm-instructions-onsite,
    .mobile-confirm-instructions,
    .mobile-confirm-hero-instructions,
    .mobile-confirm-description,
    .mobile-confirmation-instructions {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #354155 !important;
        line-height: 22.5px !important;
        text-align: center !important;
        margin: 0 !important;
        max-width: 335px !important;
        width: 100% !important;
    }
    .mobile-confirm-hero-instructions p,
    .mobile-confirm-instructions p {
        margin: 0 0 8px 0 !important;
    }
    #mobile-confirm-schedule,
    .mobile-confirm-schedule,
    .mobile-confirm-instructions strong,
    .mobile-confirm-hero-instructions strong,
    .mobile-confirmation-instructions strong {
        font-weight: 700 !important;
        color: #0f1724 !important;
        display: block !important;
        margin-top: 6px !important;
    }

    /* 4. 3-Hour Urgent Alert Badge (Modalidad B: Pago en Mostrador) */
    #mobile-confirm-onsite-alert,
    #mobile-confirm-alert-3h,
    .mobile-confirm-alert-3h,
    .mobile-confirm-onsite-alert,
    .mobile-urgent-alert-badge {
        width: 100% !important;
        max-width: 335px !important;
        background-color: #fffbeb !important;
        border: 1px solid #fde68a !important;
        border-radius: 8px !important;
        padding: 12px 14px !important;
        margin: 0 auto 20px auto !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        box-sizing: border-box !important;
        box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08) !important;
    }
    #mobile-confirm-alert-3h.is-hidden,
    #mobile-confirm-onsite-alert.is-hidden,
    .mobile-confirm-alert-3h.is-hidden {
        display: none !important;
    }
    .mobile-confirm-alert-3h .alert-icon-box,
    .mobile-confirm-alert-3h .alert-icon-wrap,
    .mobile-confirm-alert-3h .mobile-alert-icon-wrap {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        flex-shrink: 0 !important;
        margin-top: 2px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .mobile-confirm-alert-3h svg,
    .mobile-confirm-onsite-alert svg {
        width: 18px !important;
        height: 18px !important;
        stroke: #b45309 !important;
        stroke-width: 2.0 !important;
        fill: none !important;
    }
    .mobile-confirm-alert-3h .alert-text,
    .mobile-confirm-alert-3h .alert-text-box,
    .mobile-confirm-alert-3h .mobile-alert-text,
    .mobile-confirm-alert-3h p {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.45 !important;
        color: #92400e !important;
        margin: 0 !important;
        flex: 1 !important;
    }
    .mobile-confirm-alert-3h .alert-headline {
        display: block !important;
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        color: #92400e !important;
        margin-bottom: 4px !important;
    }
    .mobile-confirm-alert-3h strong,
    .mobile-confirm-alert-3h .alert-deadline {
        font-weight: 700 !important;
        color: #78350f !important;
    }

    /* 5. Confirmation Details Card */
    #mobile-confirmation-card,
    #mobile-confirmation-card-onsite,
    .mobile-confirmation-card,
    .mobile-confirm-card {
        width: 100% !important;
        max-width: 335px !important;
        background-color: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 6px !important;
        padding: 21px 20px !important;
        margin: 0 auto 24px auto !important;
        box-sizing: border-box !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    }
    .mobile-confirm-card-header {
        text-align: center !important;
        padding-bottom: 4px !important;
    }
    #mobile-confirm-card-tracking,
    .mobile-confirm-card-tracking,
    .card-header-subtitle,
    .mobile-confirm-badge {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #354155 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        margin: 0 0 4px 0 !important;
        display: block !important;
        line-height: 1.3 !important;
    }
    #mobile-confirm-card-title,
    .mobile-confirm-card-title,
    .card-header-title,
    #mobile-confirm-customer-name {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        color: #0f1724 !important;
        letter-spacing: 1px !important;
        line-height: 29px !important;
        margin: 0 0 16px 0 !important;
        text-transform: uppercase !important;
        word-break: break-word !important;
    }
    .mobile-confirm-divider,
    .mobile-confirm-card-divider,
    .mobile-confirmation-card .mobile-card-divider {
        height: 1px !important;
        background-color: rgba(0, 0, 0, 0.08) !important;
        margin: 16px 0 !important;
        border: none !important;
        width: 100% !important;
    }
    .mobile-confirm-rows-stack,
    .mobile-confirm-card-rows,
    .mobile-confirm-card-body {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .mobile-confirm-row {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .mobile-confirm-icon-box,
    .confirm-row-icon-box,
    .mobile-confirm-icon-wrap {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 4px !important;
        background-color: #e9f0ff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .mobile-confirm-icon-box svg,
    .confirm-row-icon-box svg,
    .mobile-confirm-icon-wrap svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #0f1724 !important;
        stroke-width: 1.67 !important;
        fill: none !important;
        flex-shrink: 0 !important;
    }
    .mobile-confirm-row-content,
    .confirm-row-content,
    .mobile-confirm-row-text {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    .mobile-confirm-row-title,
    .confirm-row-primary,
    #mobile-confirm-locker-number,
    #mobile-confirm-locker-online,
    #mobile-confirm-locker-onsite,
    #mobile-confirm-dates,
    #mobile-confirm-dates-online,
    #mobile-confirm-dates-onsite,
    #mobile-confirm-payment-badge {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #0f1724 !important;
        line-height: 20px !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .mobile-confirm-row-subtitle,
    .confirm-row-secondary,
    #mobile-confirm-locker-desc,
    #mobile-confirm-locker-size-online,
    #mobile-confirm-locker-size-onsite,
    #mobile-confirm-duration,
    #mobile-confirm-duration-online,
    #mobile-confirm-duration-onsite,
    #mobile-confirm-payment-amount,
    #mobile-confirm-card-paid,
    #mobile-confirm-amount-online,
    #mobile-confirm-onsite-pending,
    #mobile-confirm-amount-onsite {
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #354155 !important;
        line-height: 18px !important;
        margin: 2px 0 0 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 6. Action Buttons Stack */
    #mobile-confirmation-actions,
    .mobile-confirmation-actions,
    .mobile-confirmation-actions-footer,
    .mobile-confirm-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 335px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    #btn-mobile-download-receipt,
    #btn-mobile-confirm-download,
    .btn-mobile-download-receipt,
    .btn-mobile-confirm-download,
    .mobile-confirmation-btn-primary {
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        border-radius: 4px !important;
        background: linear-gradient(34.88deg, #1a3a23 1.49%, #294f34 53.82%, #356643 100%) !important;
        background-color: #2a5135 !important;
        color: #ffffff !important;
        font-family: 'Tenor Sans', 'Montserrat', -apple-system, sans-serif !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        border: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        box-shadow: 0 4px 12px rgba(42, 81, 53, 0.20) !important;
        transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease !important;
        text-decoration: none !important;
    }
    #btn-mobile-download-receipt:hover,
    #btn-mobile-confirm-download:hover,
    .btn-mobile-download-receipt:hover,
    .mobile-confirmation-btn-primary:hover {
        opacity: 0.95 !important;
    }
    #btn-mobile-download-receipt:active,
    #btn-mobile-confirm-download:active,
    .btn-mobile-download-receipt:active,
    .mobile-confirmation-btn-primary:active {
        transform: scale(0.98) !important;
        box-shadow: 0 2px 6px rgba(42, 81, 53, 0.15) !important;
    }
    #btn-mobile-download-receipt svg,
    #btn-mobile-confirm-download svg,
    .btn-mobile-download-receipt svg {
        width: 18px !important;
        height: 18px !important;
        stroke: #ffffff !important;
        stroke-width: 1.67 !important;
        fill: none !important;
        flex-shrink: 0 !important;
    }

    #btn-mobile-return-home,
    #btn-mobile-confirm-home,
    .btn-mobile-return-home,
    .btn-mobile-confirm-home,
    .mobile-confirmation-btn-secondary {
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        border-radius: 12px !important;
        background-color: transparent !important;
        background: transparent !important;
        color: #0f1724 !important;
        font-family: 'Montserrat', -apple-system, sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        border: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        transition: background-color 0.15s ease, transform 0.15s ease !important;
        text-decoration: none !important;
    }
    #btn-mobile-return-home:hover,
    #btn-mobile-confirm-home:hover,
    .btn-mobile-return-home:hover,
    .mobile-confirmation-btn-secondary:hover {
        background-color: rgba(15, 23, 36, 0.05) !important;
    }
    #btn-mobile-return-home:active,
    #btn-mobile-confirm-home:active,
    .btn-mobile-return-home:active,
    .mobile-confirmation-btn-secondary:active {
        background-color: rgba(15, 23, 36, 0.10) !important;
        transform: scale(0.98) !important;
    }

    /* 7. Defense in Depth: Hide other views when Confirmation is active */
    body.confirmation-mobile-open .mobile-header-bar:not(.mobile-confirmation-header),
    body.confirmation-mobile-open #mobile-hold-countdown-banner,
    body.confirmation-mobile-open .locker-rental-map-app .content-layout,
    body.confirmation-mobile-open #mobile-sticky-bottom-bar,
    body.confirmation-mobile-open #mobile-checkout-container,
    body.confirmation-mobile-open #mobile-checkout-sticky-bar,
    body.confirmation-mobile-open .mobile-checkout-container {
        display: none !important;
    }
}

/* ==========================================================================
   SMOOTH TRANSITION LOADER (Gentle Navigation & View Transition State)
   ========================================================================== */
.locker-nav-transition-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(255, 255, 255, 0.90) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    z-index: 9999999 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease-out, visibility 0.22s ease-out;
}

.locker-nav-transition-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
}

.locker-nav-transition-overlay.fading-out {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease-in, visibility 0.2s ease-in;
}

.locker-nav-transition-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    background: #ffffff !important;
    padding: 28px 36px !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 40px -8px rgba(15, 23, 36, 0.12), 0 4px 14px -2px rgba(15, 23, 36, 0.05) !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    max-width: 320px !important;
    width: 85% !important;
    text-align: center !important;
    transform: scale(0.95);
    animation: lockerCardPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes lockerCardPop {
    0% {
        transform: scale(0.92);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.locker-nav-transition-spinner-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: #f0fdf4 !important;
}

.locker-nav-transition-spinner {
    width: 34px !important;
    height: 34px !important;
    border: 3.5px solid #dcfce7 !important;
    border-top: 3.5px solid #1d3326 !important;
    border-radius: 50% !important;
    animation: lockerNavSpin 0.75s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

@keyframes lockerNavSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.locker-nav-transition-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
}

.locker-nav-transition-title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1d3326 !important;
    letter-spacing: -0.2px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.locker-nav-transition-subtext {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    letter-spacing: -0.1px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Button Active Feedback for Back Navigation Buttons */
.btn-mobile-header-back:active,
.btn-mobile-checkout-back:active,
.checkout-back-link:active,
.btn-back-to-lockers:active {
    transform: scale(0.90) !important;
    opacity: 0.75 !important;
    transition: transform 0.08s ease, opacity 0.08s ease !important;
}

/* ==========================================================================
   GLOBAL BULLETPROOF CHECKBOX RESCUE (OVERRIDES THEME left: -9999px HIDING)
   ========================================================================== */
html body .locker-rental-map-app input[type="checkbox"],
html body #checkout-container input[type="checkbox"],
html body #mobile-checkout-container input[type="checkbox"],
html body #terms-check,
html body #mobile-checkout-terms,
html body #accept-terms,
html body .round-checkbox,
html body .terms-checkbox input[type="checkbox"],
html body .mobile-terms-checkbox,
html body .mobile-terms-checkbox-input,
html body input[type="checkbox"]#terms-check,
html body input[type="checkbox"]#mobile-checkout-terms,
html body input[type="checkbox"]#accept-terms {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    cursor: pointer !important;
    margin: 0 10px 0 0 !important;
    flex-shrink: 0 !important;
    border: 2px solid #1d3326 !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    z-index: 5 !important;
    clip: auto !important;
    clip-path: none !important;
}

html body .locker-rental-map-app input[type="checkbox"]:checked,
html body #checkout-container input[type="checkbox"]:checked,
html body #mobile-checkout-container input[type="checkbox"]:checked,
html body #terms-check:checked,
html body #mobile-checkout-terms:checked,
html body #accept-terms:checked,
html body .round-checkbox:checked,
html body .terms-checkbox input[type="checkbox"]:checked,
html body .mobile-terms-checkbox:checked,
html body .mobile-terms-checkbox-input:checked,
html body input[type="checkbox"]#terms-check:checked,
html body input[type="checkbox"]#mobile-checkout-terms:checked,
html body input[type="checkbox"]#accept-terms:checked {
    background-color: #1d3326 !important;
    border-color: #1d3326 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 5.5' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
}