/* ==========================================================
   DRIVEBEST ACADEMIA - RESPONSIVE / MOBILE MASTER STYLES
   Added without changing the existing PHP/database logic.
========================================================== */

html { -webkit-text-size-adjust: 100%; }
body { max-width: 100%; }
img, video, iframe { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }

/* Prevent long words, emails and URLs from breaking layouts */
p, h1, h2, h3, h4, h5, h6, td, th, label, a { overflow-wrap: anywhere; }

/* Main website containers */
.features, .about, .packages, .testimonials, .faq, .contact, .gallery, .appointment {
    width: 100%;
}

/* Generic responsive grids */
.features-grid,
.packages-grid,
.testimonials-grid,
.gallery-grid {
    width: 100%;
}

/* Forms */
form { max-width: 100%; }
input, select, textarea, button { font: inherit; }
input, select, textarea { box-sizing: border-box; }

/* Tables: scroll the table, never the whole page */
.table-responsive,
.admin-table-wrap,
.diary-table-wrap,
.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-main table,
.diary-screen table,
.admin-page table {
    max-width: 100%;
}

/* Admin layout */
.admin-main { width: min(1400px, 94%); }
.admin-booking-shell,
.admin-edit-box { max-width: 100%; }

/* ===================== MOBILE ===================== */
@media (max-width: 768px) {
    .navbar {
        padding: 14px 16px !important;
        min-height: 68px;
    }

    .navbar.sticky {
        padding: 12px 16px !important;
    }

    .logo-main { font-size: 1.25rem !important; }
    .logo-academia { font-size: .62rem !important; letter-spacing: 2px; }

    .menu-toggle {
        display: block !important;
        min-width: 44px;
        min-height: 44px;
        line-height: 44px;
        text-align: center;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    .nav-links,
    .admin-navbar .nav-links {
        position: fixed !important;
        top: 68px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-height: calc(100vh - 82px);
        overflow-y: auto;
        display: none !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 12px !important;
        margin: 0 !important;
        background: rgba(15,15,15,.98) !important;
        border-radius: 14px !important;
        box-shadow: 0 12px 30px rgba(0,0,0,.3);
        z-index: 10000 !important;
    }

    .nav-links.active,
    .admin-navbar .nav-links.active,
    .admin-navbar .nav-links.open {
        display: flex !important;
    }

    .nav-links li { width: 100%; list-style: none; }
    .nav-links a {
        display: block;
        width: 100%;
        padding: 13px 14px;
        border-radius: 9px;
        font-size: .95rem;
    }
    .nav-links a:hover,
    .nav-links a.active { background: rgba(247,148,29,.12); }

    .hero {
        min-height: 100svh;
        height: auto;
        padding: 110px 18px 60px;
    }

    .hero-content { width: 100%; max-width: 680px; padding: 10px; }
    .hero-content h1,
    .hero-content h2 { font-size: clamp(2rem, 9vw, 3rem) !important; line-height: 1.15; }
    .hero-content p { font-size: 1rem !important; line-height: 1.6; }

    .hero-buttons { width: 100%; gap: 12px; }
    .btn { width: min(100%, 320px) !important; min-height: 48px; padding: 13px 20px; }

    .features, .about, .packages, .testimonials, .faq, .contact, .gallery {
        padding: 70px 16px !important;
    }

    .appointment {
        padding: 105px 12px 50px !important;
        min-height: auto;
    }

    .section-title { margin-bottom: 30px; }
    .section-title h2 { font-size: clamp(1.65rem, 7vw, 2.2rem) !important; }

    .card {
        width: 100% !important;
        max-width: 600px;
        padding: 22px 18px !important;
        border-radius: 16px;
    }

    .card input, .card select, .card textarea {
        min-height: 46px;
        font-size: 16px !important;
        color: #222 !important;
    }

    .feature-card, .package-card, .testimonial-card {
        width: 100%;
        padding: 28px 20px !important;
    }

    .gallery-grid { grid-template-columns: 1fr !important; gap: 16px; }
    .gallery-grid img { height: auto !important; min-height: 180px; max-height: 320px; }

    /* Diary booking */
    .diary-page { padding-top: 70px !important; }
    .diary-page .top-bar {
        margin: 0 10px !important;
        padding: 14px 16px !important;
        flex-direction: column;
        align-items: flex-start !important;
        gap: 5px;
    }
    .diary-container { margin: 0 10px 20px !important; width: auto; }
    .diary-hero { padding: 28px 16px 22px !important; }
    .diary-hero h1 { font-size: clamp(1.55rem, 7vw, 2rem) !important; line-height: 1.2; }
    .form-area { padding: 20px 16px !important; }
    .form-grid, .appointment-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
    .field input, .field select { min-height: 46px; font-size: 16px !important; }
    .appointment-box { padding: 16px !important; }
    .appointment-heading { flex-direction: column !important; align-items: flex-start !important; }
    .submit-button, .existing-button { width: 100%; min-height: 48px; text-align: center; }

    /* Applicant/account screens */
    .diary-screen { padding: 75px 10px 25px !important; }
    .diary-screen .container { padding: 20px 15px !important; width: 100%; }
    .diary-screen h1 { font-size: 1.7rem; }
    .diary-screen table { min-width: 650px; }

    /* Admin */
    .admin-main {
        width: 100% !important;
        padding: 88px 12px 35px !important;
    }
    .admin-title h1 { font-size: 25px; }
    .admin-cards { grid-template-columns: 1fr !important; gap: 14px; }
    .admin-card { padding: 20px; }
    .admin-booking-shell { padding: 16px !important; border-radius: 12px; }
    .admin-edit-box { margin: 15px auto; padding: 20px 16px !important; }

    /* Inline-style admin pages */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Make old fixed-width forms fluid */
    .login-box, form { max-width: 100% !important; }
    .login-box { width: min(100%, 420px) !important; }

    /* Buttons are finger friendly */
    button, input[type="submit"], input[type="button"], .btn-add, .btn-edit, .btn-delete {
        min-height: 44px;
    }

    /* Prevent tiny text */
    table { font-size: 14px; }
}

@media (max-width: 480px) {
    .navbar { padding-left: 12px !important; padding-right: 12px !important; }
    .hero { padding-left: 12px; padding-right: 12px; }
    .features, .about, .packages, .testimonials, .faq, .contact, .gallery { padding-left: 12px !important; padding-right: 12px !important; }
    .card { padding: 18px 14px !important; }
    .hero-content h1, .hero-content h2 { font-size: 1.85rem !important; }
    .whatsapp-card { max-width: 100%; }

    /* Calendar remains readable instead of becoming microscopic */
    .calendar-container { overflow-x: auto !important; }
    .calendar-grid { min-width: 700px !important; }
    .calendar-day { min-height: 145px !important; padding: 6px !important; }
    .day-name { padding: 9px 5px !important; font-size: 12px; }
    .day-number { font-size: 16px !important; }
    .appointment { font-size: 11px !important; }
}

/* Landscape phones */
@media (max-height: 500px) and (orientation: landscape) {
    .hero { min-height: auto; padding-top: 100px; padding-bottom: 50px; }
    .nav-links { max-height: calc(100vh - 78px); }
}

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}