/* ═══════════════════════════════════════════════════════════════════
   Apna Web — mobile improvements (public site, auth pages, user dashboard)
   Loaded LAST so it can fine-tune the other stylesheets.
   Only phones / small tablets are affected — desktop layout is unchanged.
═══════════════════════════════════════════════════════════════════ */

/* ── Footer headings were dark on the dark footer (all screen sizes) ── */
.footer h6 { color: #fff; }

/* ═══════════════ Tablets & phones (≤ 991px) ═══════════════ */
@media (max-width: 991px) {

    /* Dashboard: proper top bar instead of a lone ☰ icon */
    .dash-mobilebar {
        display: flex; align-items: center; gap: 10px;
        position: sticky; top: 0; z-index: 1020;
        margin: -15px -15px 16px; padding: 8px 12px;
        background: rgba(255,255,255,.96); backdrop-filter: blur(6px);
        border-bottom: 1px solid #e8eef8; box-shadow: 0 4px 14px -10px rgba(26,58,143,.35);
    }
    .dash-mobilebar .mobile-menu-toggle { margin: 0 !important; width: 40px; height: 40px; }
    .dash-mobilebar-logo { display: flex; align-items: center; }
    .dash-mobilebar-logo img { height: 84px; max-width: 170px; object-fit: contain; margin: -22px 0; }
    .dash-mobilebar-user {
        margin-left: auto; width: 36px; height: 36px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, var(--primary-color, #1A3A8F), var(--secondary-color, #00B4D8));
        color: #fff; font-size: 13px; font-weight: 700; text-decoration: none;
    }
}
@media (min-width: 992px) {
    .dash-mobilebar { display: none; }
}

/* ═══════════════ Phones (≤ 767px) ═══════════════ */
@media (max-width: 767px) {

    /* iPhone zooms into any form field smaller than 16px — keep fields at 16px */
    input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
    input[type="number"], input[type="url"], input[type="search"], input[type="date"],
    select, textarea, .form-control, .form-select {
        font-size: 16px !important;
    }

    /* Less empty space between landing sections */
    .hiw-section, .features-section, .testimonials-section { padding: 56px 0 !important; }
    section[style*="padding:100px"], section[style*="padding: 100px"],
    section[style*="padding:80px"],  section[style*="padding: 80px"] { padding: 56px 0 !important; }

    /* Footer: shorter, readable, nothing hidden behind the WhatsApp button */
    .footer { padding: 48px 0 96px !important; }
    .footer .row > [class*="col-"] { margin-bottom: 8px; }
    .footer img[alt="Apna Web"] { height: 72px !important; max-height: 72px !important; width: auto !important; }
    .footer .footer-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
    .footer .footer-links a { display: inline-flex; align-items: center; padding: 7px 0; min-height: 36px; }
    .footer h6 { margin-top: 18px; }
    .footer .col-md-6.text-md-end a { display: inline-block; padding: 8px 6px; }

    /* Bigger tap targets for small text links in page content */
    .breadcrumb a, .back-link { display: inline-block; padding: 6px 0; }

    /* Dashboard: wide tables scroll inside their card instead of squeezing */
    .main-content table.table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }

    /* Dashboard cards: a bit tighter on phones */
    .main-content .card-body { padding-left: 16px; padding-right: 16px; }

    /* Festival card: keep price + MRP together */
    .main-content [style*="line-through"] { white-space: nowrap; }

    /* Checkout: Pay button always visible at the bottom */
    #payBtnRow {
        position: sticky; bottom: 0; z-index: 1010;
        margin: 16px -15px -15px !important; padding: 10px 15px 12px;
        background: rgba(255,255,255,.97); backdrop-filter: blur(6px);
        border-top: 1px solid #e8eef8; box-shadow: 0 -8px 20px -14px rgba(26,58,143,.45);
    }
    #payBtnRow > div { width: 100%; }
    #payBtnRow p { margin-top: 4px !important; }
}

/* ═══════════════ Small phones (≤ 575px) ═══════════════ */
@media (max-width: 575px) {

    /* Hero buttons: full width and equal size */
    .hero-btns { flex-direction: column; align-items: stretch !important; }
    .hero-btns > a, .hero-btns > button { width: 100% !important; justify-content: center; }
}

/* Dashboard content has 10px side padding on small phones (style.css) — match it */
@media (max-width: 576px) {
    .dash-mobilebar { margin: -10px -10px 14px; }
    #payBtnRow { margin: 16px -10px -10px !important; padding-left: 10px; padding-right: 10px; }
}

/* Dashboard sidebar: language selector inset like the menu items (all screen sizes) */
.sidebar .sidebar-lang { padding: 0 16px; }
.sidebar .sidebar-lang .btn {
    border-color: rgba(255,255,255,.35); border-radius: 10px;
    padding: 8px 12px; text-align: left; font-size: 14px;
}
.sidebar .sidebar-lang .btn:hover { background: rgba(255,255,255,.12); color: #fff; }