/* ============================================================
   MOBILE APP LOOK — mobile-only overrides
   Applies ONLY on screens ≤ 768px (phones in Chrome & Safari).
   Nothing here touches desktop layouts.
   ============================================================ */

@media (max-width: 768px) {

    /* ──────────────────────────────────────────────────────────
       1. ROOT TOKENS — override to app-scale values
       ────────────────────────────────────────────────────────── */
    :root {
        --border-radius: 14px;      /* was 8px — rounder cards */
        --shadow: 0 1px 6px rgba(0, 0, 0, 0.08);   /* softer shadows */
        --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
    }


    /* ──────────────────────────────────────────────────────────
       2. GLOBAL BUTTONS — pill shape, tighter padding
       ────────────────────────────────────────────────────────── */
    .btn {
        border-radius: 50px;            /* full pill */
        padding: 0.65rem 1.4rem;        /* was 0.9rem 2rem */
        font-size: 0.92rem;
        font-weight: 600;
        letter-spacing: 0.01em;
    }

    /* Secondary border: 1px instead of 2px */
    .btn-secondary {
        border-width: 1px;
    }

    /* Full-width buttons inside modals/booking stay full-width */
    .btn-full,
    .booking-nav-btns .btn,
    .vc-nav-btns .vc-btn-next,
    .ct-btn-next,
    .trial-book-btn,
    .trial-banner-cta {
        border-radius: 50px;
    }

    /* Back button in booking — pill ghost style */
    .vc-btn-back {
        border-radius: 50px;
        padding: 0.65rem 1.2rem;
    }


    /* ──────────────────────────────────────────────────────────
       3. FORM INPUTS & SELECTS — crisp, app-style fields
       ────────────────────────────────────────────────────────── */

    /* Main appointment form */
    .form-group input,
    .form-group select,
    .form-group textarea {
        border: 1px solid #e0e0e0;          /* was 1px #ddd — consistent color */
        border-radius: 12px;                /* was var(--border-radius) = 8px */
        padding: 0.7rem 0.95rem;
        font-size: 1rem;                    /* prevents iOS auto-zoom (≥16px) */
        background: #fafafa;
        transition: border-color 0.18s, box-shadow 0.18s;
        -webkit-appearance: none;
        appearance: none;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        border-color: var(--primary-color);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.12);
    }

    /* Booking modal form fields */
    .booking-modal-content input,
    .booking-modal-content select,
    .booking-modal-content textarea {
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        background: #fafafa;
        -webkit-appearance: none;
        appearance: none;
    }

    /* Video consultation form fields */
    .vc-form-group input,
    .vc-form-group select {
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        background: #fafafa;
    }

    .vc-textarea {
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        background: #fafafa;
    }

    .vc-form-group input:focus,
    .vc-form-group select:focus {
        border-color: var(--primary-color);
        background: #fff;
    }

    /* Auth / login modal fields */
    .auth-form input,
    .modal-content input,
    .modal-content select,
    .modal-content textarea {
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        padding: 0.7rem 0.95rem;
        font-size: 1rem;
        background: #fafafa;
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        transition: border-color 0.18s, box-shadow 0.18s;
    }

    .auth-form input:focus,
    .modal-content input:focus,
    .modal-content select:focus,
    .modal-content textarea:focus {
        outline: none;
        border-color: var(--primary-color);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.12);
    }

    /* Admin filter inputs that appear on mobile */
    .filter-input,
    .filter-select {
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        background: #fafafa;
        -webkit-appearance: none;
        appearance: none;
    }


    /* ──────────────────────────────────────────────────────────
       4. CARDS — rounder, thinner borders, lighter shadows
       ────────────────────────────────────────────────────────── */

    /* Service cards */
    .service-card {
        border-radius: 16px;
        box-shadow: var(--shadow);
    }

    /* Review cards */
    .review-card {
        border-radius: 16px;
    }

    /* Review top-border accent: 2px → 1px */
    .review-card.google-review {
        border-top-width: 2px;          /* keep accent, just a tad thinner */
    }

    /* Appointment CTA cards */
    .appt-cta-card {
        border-radius: 16px;
        border-width: 1.5px;            /* was 3px */
    }

    /* Package cards in booking modal */
    .package-card {
        border-radius: 14px;
        border-width: 1.5px;            /* was 2px */
    }

    .repeat-package-card {
        border-radius: 14px;
        border-width: 1.5px;
    }

    /* Booking modal itself */
    .booking-modal-content {
        border-radius: 20px !important;
    }

    /* Booking success card */
    .booking-success-card {
        border-radius: 20px;
    }

    /* Modal content base */
    .modal-content {
        border-radius: 20px;
    }

    /* Dashboard modal */
    .dashboard-content {
        border-radius: 20px;
    }

    /* Appointment / payment / order list items */
    .appointment-item,
    .payment-item,
    .report-item,
    .shipment-item {
        border-radius: 14px;
        border-width: 1px;
    }

    /* Order history cards */
    .order-history-card {
        border-radius: 14px;
        border-width: 1px;
    }

    /* Shipment cards */
    .shipment-card {
        border-radius: 16px;
    }

    /* Contact cards */
    .contact-card {
        border-radius: 16px;
    }

    /* Qualification box */
    .qualifications {
        border-radius: 16px;
    }

    /* Booking summary section */
    .booking-summary {
        border-radius: 14px;
    }

    /* Appointment section */
    .appointment-form {
        border-radius: 20px;
    }


    /* ──────────────────────────────────────────────────────────
       5. PROGRESS STEPS — thinner connecting line, tighter dots
       ────────────────────────────────────────────────────────── */
    .booking-progress-line {
        height: 1.5px;                  /* was 2px */
        background: #e0e0e0;
    }

    .booking-progress-step {
        border-radius: 50%;             /* always a circle */
    }


    /* ──────────────────────────────────────────────────────────
       6. SCROLL NAVIGATION BUTTONS — thinner border
       ────────────────────────────────────────────────────────── */
    .services-scroll-btn {
        border-width: 1px;              /* was 2px */
        width: 34px;
        height: 34px;
    }

    .appt-scroll-btn {
        border-width: 1px;              /* was 2px */
    }


    /* ──────────────────────────────────────────────────────────
       7. REVIEW AVATAR — thinner border ring
       ────────────────────────────────────────────────────────── */
    .review-avatar {
        border-width: 2px;              /* was 3px */
    }


    /* ──────────────────────────────────────────────────────────
       8. AUTH TABS & DASHBOARD TABS — lighter underline indicator
       ────────────────────────────────────────────────────────── */
    .auth-tab {
        border-bottom-width: 2px;
    }

    .auth-tabs {
        border-bottom-width: 1px;
        border-bottom-color: #ececec;
    }

    .dashboard-tabs {
        border-bottom-width: 1px;
        border-bottom-color: #ececec;
    }

    .dashboard-tab {
        border-bottom-width: 2px;
    }


    /* ──────────────────────────────────────────────────────────
       9. GOOGLE SIGN-IN BUTTON — 1px, rounder corners
       ────────────────────────────────────────────────────────── */
    .btn-google {
        border-width: 1px;
        border-radius: 50px;
        padding: 0.7rem 1.2rem;
        font-size: 0.9rem;
    }


    /* ──────────────────────────────────────────────────────────
       10. PAYMENT BUTTONS — pill style, consistent radius
       ────────────────────────────────────────────────────────── */
    .btn-razorpay,
    .btn-cashfree {
        border-radius: 50px;
        padding: 0.75rem 1.5rem;
    }

    .vc-pay-btn {
        border-radius: 14px;
        border-width: 1px;
        padding: 0.8rem;
    }


    /* ──────────────────────────────────────────────────────────
       11. CASE-TAKING CARDS & CHIPS — already app-like, just
           make the border thinner
       ────────────────────────────────────────────────────────── */
    .ct-card {
        border-width: 1.5px;            /* was 2px */
        border-radius: 14px;
    }

    .ct-chip {
        border-width: 1.5px;            /* was 2px */
    }

    .ct-textarea,
    .ct-inline-textarea {
        border-width: 1.5px;
        border-radius: 12px;
    }

    .ct-btn-callback {
        border-width: 1.5px;
        border-radius: 50px;
    }

    .ct-sum-edit-btn {
        border-width: 1px;
    }


    /* ──────────────────────────────────────────────────────────
       12. VIDEO CONSULTATION — slot cards, summary card
       ────────────────────────────────────────────────────────── */
    .vc-slot-card {
        border-width: 1.5px;            /* was 2px */
        border-radius: 12px;
    }

    .vc-summary-card {
        border-width: 1.5px;            /* was 2px */
        border-radius: 14px;
    }

    .vc-appt-card {
        border-width: 1.5px;            /* was 2px */
        border-radius: 14px;
    }


    /* ──────────────────────────────────────────────────────────
       13. PROFILE SECTION — thinner badges, rounder header
       ────────────────────────────────────────────────────────── */
    .profile-meta-item {
        border-width: 1px;
        border-radius: 20px;
        font-size: 0.78rem;
        padding: 0.18rem 0.6rem;
    }

    .profile-header {
        border-width: 1px;
        border-radius: 16px;
    }

    .reorder-banner {
        border-width: 1px;
        border-radius: 14px;
    }


    /* ──────────────────────────────────────────────────────────
       14. SECTION UNDERLINE — thinner accent bar
       ────────────────────────────────────────────────────────── */
    .underline {
        height: 3px;                    /* was 4px */
    }


    /* ──────────────────────────────────────────────────────────
       15. MISC TOUCH-UPS
       ────────────────────────────────────────────────────────── */

    /* Shipment progress connector — 2px → 1.5px */
    .ship-connector {
        height: 2px;
    }

    /* Confirm note border-left accent */
    .confirm-note--success {
        border-left-width: 3px;
        border-radius: 10px;
    }

    /* Order appt-row left accent */
    .order-appt-row {
        border-left-width: 2px;
        border-radius: 8px;
    }

    /* UPI QR canvas container */
    .upi-qr-canvas {
        border-radius: 12px;
    }

    /* Booking QR side rounded image */
    .booking-qr-side img,
    .upi-qr-canvas canvas,
    .upi-qr-canvas img {
        border-radius: 10px;
    }

    /* Google badge pill */
    .google-badge {
        border-radius: 50px;
    }

    /* Verified badge pill inside dashboard */
    .pay-status-badge,
    .shipment-status-badge,
    .status {
        border-radius: 20px;
        font-size: 0.74rem;
        padding: 0.2rem 0.6rem;
    }

    /* Maps directions button */
    .maps-directions-btn {
        border-radius: 50px;
        padding: 0.45rem 1.1rem;
    }

    /* Repeat past order card */
    .repeat-past-order-card {
        border-width: 1px;
        border-radius: 14px;
    }

    /* Booking exit modal */
    .booking-exit-content {
        border-radius: 20px !important;
    }

    /* Inline case-taking chip in booking summary */
    .ct-sum-chip {
        border-width: 1px;
        border-radius: 20px;
        font-size: 0.75rem;
    }

    /* Past order cards in repeat flow */
    .repeat-past-orders-list .repeat-past-order-card {
        border-radius: 14px;
    }

    /* Reorder this button */
    .reorder-this-btn {
        border-radius: 50px;
    }

}


/* ──────────────────────────────────────────────────────────────
   Extra small phones (≤ 480px) — same principle, just ensure
   nothing reverts to boxy on very small screens
   ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    :root {
        --border-radius: 12px;
    }

    .btn {
        border-radius: 50px;
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }

    /* Full-width hero buttons still pill */
    .hero-buttons .btn {
        border-radius: 50px;
        width: 100%;
    }

    .form-group input,
    .form-group select,
    .form-group textarea,
    .booking-modal-content input,
    .booking-modal-content select,
    .booking-modal-content textarea,
    .vc-form-group input,
    .vc-form-group select,
    .vc-textarea,
    .auth-form input,
    .modal-content input,
    .modal-content select {
        border-radius: 12px;
        font-size: 1rem;   /* keep at 1rem (16px) — prevents iOS zoom */
    }
}