/* ===================================
   MOBILE RESPONSIVE STYLES
   =================================== */

/* Tablet and below (768px) */
@media (max-width: 768px) {

    /* Booking wizard grid - stack vertically */
    .grid-booking,
    .booking-wizard .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    /* Wizard progress indicators */
    .wizard-progress {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }

    .step-indicator {
        width: 100%;
        padding: 0.75rem;
        text-align: center;
    }

    /* Booking steps progress */
    .booking-steps {
        flex-direction: column;
        gap: 0.5rem;
    }

    .booking-steps .step {
        width: 100%;
        text-align: center;
        padding: 0.75rem;
    }

    /* Room selection grid - 1 column on mobile */
    .room-select-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    .room-select-card {
        max-width: 100%;
    }

    /* Booking summary - move to bottom on mobile */
    .booking-summary {
        position: static;
        width: 100%;
        margin-top: 2rem;
        order: 2;
    }

    /* Date group - stack vertically */
    .date-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .date-group input {
        width: 100%;
    }

    /* Form grid - single column */
    .grid-2 {
        grid-template-columns: 1fr !important;
    }

    /* Buttons - full width on mobile */
    .btn {
        width: 100%;
        padding: 0.875rem 1.5rem;
    }

    /* Hero section */
    .hero {
        height: 40vh !important;
        margin-top: -70px !important;
    }

    .hero h1 {
        font-size: 2rem !important;
    }

    .hero p {
        font-size: 1rem !important;
    }

    /* Container padding */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Wizard content */
    .wizard-content {
        grid-template-columns: 1fr !important;
    }

    /* Guest popover - full width */
    .guest-popover {
        width: 100%;
        left: 0 !important;
        right: 0 !important;
    }

    /* Summary items - better spacing */
    .summary-item {
        padding: 0.75rem 0;
    }

    /* Card padding */
    .card {
        padding: 1.5rem !important;
    }
}

/* Mobile phones (480px and below) */
@media (max-width: 480px) {

    /* Even smaller text on tiny screens */
    .hero h1 {
        font-size: 1.75rem !important;
    }

    .hero p {
        font-size: 0.9rem !important;
    }

    /* Room cards - smaller images */
    .room-select-card img {
        height: 150px !important;
    }

    /* Tighter spacing */
    .section {
        padding: 2rem 0;
    }

    /* Smaller buttons */
    .btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }

    /* Booking summary */
    .booking-summary h4 {
        font-size: 1.25rem;
    }

    .total-price {
        font-size: 1.5rem;
    }

    /* Form inputs */
    .form-control,
    .booking-field {
        font-size: 16px;
        /* Prevents zoom on iOS */
    }

    /* Navigation */
    .nav-links {
        font-size: 0.9rem;
    }

    /* Step indicators - smaller text */
    .step-indicator,
    .booking-steps .step {
        font-size: 0.85rem;
        padding: 0.625rem;
    }

    /* Guest counter */
    .counter-btn {
        width: 32px;
        height: 32px;
        font-size: 1.25rem;
    }

    .counter-value {
        min-width: 32px;
        font-size: 1rem;
    }
}

/* Landscape mobile (max-height: 500px) */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        height: 60vh !important;
    }

    .wizard-progress {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .step-indicator {
        flex: 1;
        min-width: 120px;
    }
}

/* Print styles */
@media print {

    .header,
    .btn,
    .wizard-progress,
    .booking-steps {
        display: none;
    }

    .booking-summary {
        page-break-inside: avoid;
    }
}