/**
 * Mobile Device Specific Fixes
 * Fixes viewport and font rendering differences between emulator and real devices
 */

/* Prevent text size adjustment on orientation change (iOS Safari) */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Fix font sizes for actual mobile devices */
@media (max-width: 768px) {
    /* Override h1 clamp for better mobile control */
    h1 {
        font-size: 2rem !important; /* Force 32px max on mobile */
    }

    .hero-title {
        font-size: 1.75rem !important; /* 28px for hero */
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 1rem !important; /* 16px for subtitle */
        line-height: 1.5;
    }

    .section-title {
        font-size: 1.75rem !important;
    }

    .section-subtitle {
        font-size: 0.95rem !important;
    }

    /* Feature cards */
    .feature-card h3 {
        font-size: 1.1rem !important;
    }

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

    /* Court cards */
    .court-name {
        font-size: 1.25rem !important;
    }

    .court-description {
        font-size: 0.9rem !important;
    }

    /* Buttons */
    .btn {
        font-size: 0.95rem !important;
        padding: 0.75rem 1.5rem !important;
    }

    .btn-lg {
        font-size: 1rem !important;
        padding: 0.875rem 1.75rem !important;
    }

    /* Hero section spacing */
    .hero {
        padding: 100px 0 60px !important;
    }

    .hero-container {
        padding: 0 1rem !important;
    }

    /* Prevent text overflow */
    * {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Container proper padding */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100% !important;
    }

    /* ===== SPLASH SCREEN FIXES ===== */
    .splash-logo {
        font-size: 3rem !important; /* Smaller splash logo */
    }

    .splash-tagline {
        font-size: 1rem !important; /* Smaller tagline */
    }

    /* ===== BOOKING PAGE FIXES ===== */
    .booking-header h1 {
        font-size: 1.4rem !important; /* 22.4px - much smaller */
        margin-bottom: 0.3rem !important;
    }

    .booking-header p {
        font-size: 0.85rem !important; /* 13.6px - smaller */
    }

    .booking-header {
        margin-bottom: 1.5rem !important; /* Reduce spacing */
    }

    /* Cart Summary */
    .cart-summary {
        padding: 1rem !important;
    }

    .cart-count,
    .cart-total {
        font-size: 0.9rem !important;
    }

    .cart-total strong {
        font-size: 1.1rem !important;
    }

    /* ===== MODAL FIXES ===== */
    .modal-content {
        padding: 1rem !important; /* Reduce modal padding */
        margin: 1rem !important;
    }

    .modal-header {
        padding: 0.75rem 0 !important;
        margin-bottom: 0.75rem !important;
    }

    .modal-header h2 {
        font-size: 1.2rem !important; /* Much smaller modal title */
    }

    .modal-body {
        padding: 0 !important;
    }

    .modal-body h3 {
        font-size: 0.95rem !important; /* Smaller section headings */
        margin-bottom: 0.5rem !important;
    }

    .modal-body p,
    .modal-body label {
        font-size: 0.8rem !important; /* Smaller labels */
    }

    .modal-body input,
    .modal-body textarea,
    .modal-body select {
        font-size: 0.8rem !important;
        padding: 0.5rem !important; /* Smaller input padding */
    }

    .checkout-section {
        margin-bottom: 1rem !important; /* Reduce section spacing */
    }

    .order-summary {
        font-size: 0.8rem !important;
        padding: 0.75rem !important;
    }

    .order-summary strong {
        font-size: 0.9rem !important;
    }

    /* Order summary items - court name, date, time */
    .order-item {
        padding: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .order-item h4 {
        font-size: 0.9rem !important;
    }

    .order-item p {
        font-size: 0.75rem !important;
    }

    .order-item .price {
        font-size: 0.85rem !important;
    }

    /* ===== FORM ELEMENTS ===== */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    textarea,
    select {
        font-size: 0.9rem !important;
    }

    /* ===== DATE SELECTOR ===== */
    .date-selector-wrapper {
        padding: 0.75rem !important; /* Reduce padding */
    }

    .date-item {
        min-width: 50px !important; /* Much smaller - fit 3-4 dates */
        padding: 0.4rem 0.3rem !important;
    }

    .date-item .day-name {
        font-size: 0.55rem !important; /* Smaller day name */
        margin-bottom: 0.15rem !important;
    }

    .date-item .day-number {
        font-size: 1rem !important; /* Smaller number */
        line-height: 1 !important;
    }

    .date-item .month-name {
        font-size: 0.55rem !important; /* Smaller month */
        margin-top: 0.15rem !important;
    }

    /* Filter labels */
    .filter-group label {
        font-size: 0.85rem !important;
    }

    .filter-group select {
        font-size: 0.85rem !important;
    }

    /* ===== BOOKING PAGE MOBILE FIXES ===== */
    /* Reduce top padding so content is visible immediately */
    .booking-section {
        padding: 80px 0 100px !important;
    }

    /* ===== BOOKING GRID MOBILE FIXES ===== */
    /* Make time column smaller in mobile */
    .booking-grid th.time-header {
        min-width: 35px !important;
        max-width: 35px !important;
        padding: 0.5rem 0.15rem !important;
    }

    .booking-grid td.time-cell {
        min-width: 35px !important;
        max-width: 35px !important;
        padding: 0.5rem 0.15rem !important;
        font-size: 0.65rem !important;
    }

    /* Make grid cells more compact */
    .grid-cell {
        min-width: 85px !important;
        min-height: 65px !important;
        padding: 0.4rem 0.3rem !important;
    }

    .cell-price {
        font-size: 0.7rem !important;
    }

    /* Filter button smaller */
    .filter-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.8rem !important;
    }

    /* Court header smaller */
    .booking-grid th.court-header {
        font-size: 0.7rem !important;
        padding: 0.75rem 0.4rem !important;
    }
}

/* Extra small devices (phones in portrait) */
@media (max-width: 480px) {
    h1, .hero-title {
        font-size: 1.5rem !important; /* 24px for very small screens */
    }

    .hero-subtitle {
        font-size: 0.9rem !important; /* 14.4px */
    }

    .section-title {
        font-size: 1.5rem !important;
    }

    .btn {
        font-size: 0.875rem !important;
        padding: 0.65rem 1.25rem !important;
    }

    .btn-lg {
        font-size: 0.95rem !important;
        padding: 0.75rem 1.5rem !important;
    }

    /* Reduce spacing on very small screens */
    .hero {
        padding: 80px 0 40px !important;
    }

    /* Splash screen even smaller */
    .splash-logo {
        font-size: 2.5rem !important;
    }

    .splash-tagline {
        font-size: 0.9rem !important;
    }

    /* Booking page */
    .booking-header h1 {
        font-size: 1.25rem !important; /* Even smaller for tiny screens */
    }

    .booking-header p {
        font-size: 0.75rem !important;
    }

    /* Date selector even smaller */
    .date-item {
        min-width: 45px !important;
    }

    .date-item .day-name,
    .date-item .month-name {
        font-size: 0.5rem !important;
    }

    .date-item .day-number {
        font-size: 0.9rem !important;
    }

    /* Booking section even less padding for tiny screens */
    .booking-section {
        padding: 70px 0 90px !important;
    }

    /* Booking grid even more compact for very small screens */
    .booking-grid th.time-header,
    .booking-grid td.time-cell {
        min-width: 30px !important;
        max-width: 30px !important;
        padding: 0.4rem 0.1rem !important;
        font-size: 0.6rem !important;
    }

    .grid-cell {
        min-width: 75px !important;
        min-height: 60px !important;
    }

    .filter-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.7rem !important;
    }

    /* Modal */
    .modal-header h2 {
        font-size: 1.1rem !important; /* Smaller */
    }

    .modal-body h3 {
        font-size: 0.85rem !important; /* Smaller */
    }

    .modal-body p,
    .modal-body label {
        font-size: 0.75rem !important;
    }

    .order-item h4 {
        font-size: 0.8rem !important;
    }

    .order-item p {
        font-size: 0.7rem !important;
    }
}

/* Landscape phones */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: 60px 0 40px !important;
    }

    h1, .hero-title {
        font-size: 1.75rem !important;
    }
}

/* High DPI devices (Retina) - more aggressive control */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2),
       (max-width: 768px) and (min-resolution: 192dpi) {
    body {
        font-size: 16px !important; /* Force base 16px */
    }

    h1 {
        font-size: 1.875rem !important; /* 30px */
    }

    .hero-title {
        font-size: 1.75rem !important; /* 28px */
    }

    /* Splash screen for Retina */
    .splash-logo {
        font-size: 2.8rem !important;
    }

    .splash-tagline {
        font-size: 0.95rem !important;
    }

    /* Booking page for Retina */
    .booking-header h1 {
        font-size: 1.35rem !important; /* Smaller for Retina */
    }

    .booking-header p {
        font-size: 0.8rem !important;
    }

    /* Date selector for Retina */
    .date-item {
        min-width: 48px !important;
        padding: 0.35rem 0.25rem !important;
    }

    .date-item .day-number {
        font-size: 0.95rem !important;
    }

    /* Cart */
    .cart-count,
    .cart-total {
        font-size: 0.8rem !important;
    }

    /* Modal for Retina */
    .modal-header h2 {
        font-size: 1.15rem !important; /* Smaller title */
    }

    .modal-body h3 {
        font-size: 0.9rem !important; /* Smaller section heads */
    }

    .modal-body p,
    .modal-body label {
        font-size: 0.75rem !important; /* Smaller labels */
    }

    .modal-body input,
    .modal-body textarea,
    .modal-body select {
        font-size: 0.75rem !important;
    }

    .order-summary {
        font-size: 0.75rem !important;
    }

    .order-item h4 {
        font-size: 0.85rem !important;
    }

    .order-item p {
        font-size: 0.7rem !important;
    }
}