/* ============================================================
   cart2_mobile.css — compact, polished mobile UI for cart2 pages
   Scoped via .cart2-page wrapper or applied at <=768px to common
   tailwind/utility containers used across cart2 templates.
   ============================================================ */

@media (max-width: 768px) {

    /* Outer page padding — tighten breathing room */
    body { font-size: 14px; }

    main, .cart2-page, .checkout-page,
    [class*="min-h-screen"] > .mx-auto,
    .container, .max-w-7xl, .max-w-6xl, .max-w-5xl,
    .max-w-4xl, .max-w-3xl, .max-w-2xl, .max-w-xl, .max-w-lg {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Header / Hero areas */
    h1 { font-size: 1rem !important; line-height: 1.3 !important; }
    h2 { font-size: 0.95rem !important; line-height: 1.3 !important; }
    h3 { font-size: 0.875rem !important; line-height: 1.3 !important; }
    h4, h5 { font-size: 0.8125rem !important; line-height: 1.3 !important; }

    /* Cards / panels — common in checkout & order pages */
    .bg-white.rounded-lg, .bg-white.rounded-xl, .bg-white.rounded-2xl,
    .bg-gray-50.rounded-lg, .bg-gray-100.rounded-lg,
    .card, .panel, .section-card {
        border-radius: 8px !important;
        margin-bottom: 8px !important;
        padding: 10px !important;
    }

    /* Tighten Tailwind utility paddings on mobile */
    .p-6 { padding: 12px !important; }
    .p-5 { padding: 10px !important; }
    .p-4 { padding: 10px !important; }
    .p-3 { padding: 8px !important; }
    .px-6 { padding-left: 12px !important; padding-right: 12px !important; }
    .px-5 { padding-left: 10px !important; padding-right: 10px !important; }
    .px-4 { padding-left: 10px !important; padding-right: 10px !important; }
    .py-6 { padding-top: 12px !important; padding-bottom: 12px !important; }
    .py-5 { padding-top: 10px !important; padding-bottom: 10px !important; }
    .py-4 { padding-top: 10px !important; padding-bottom: 10px !important; }

    /* Margins */
    .mb-8 { margin-bottom: 12px !important; }
    .mb-6 { margin-bottom: 10px !important; }
    .mb-5 { margin-bottom: 10px !important; }
    .mb-4 { margin-bottom: 8px !important; }
    .mt-8 { margin-top: 12px !important; }
    .mt-6 { margin-top: 10px !important; }
    .mt-5 { margin-top: 10px !important; }
    .mt-4 { margin-top: 8px !important; }

    /* Spacing-y stacks */
    .space-y-6 > * + * { margin-top: 10px !important; }
    .space-y-5 > * + * { margin-top: 10px !important; }
    .space-y-4 > * + * { margin-top: 8px !important; }
    .space-y-3 > * + * { margin-top: 6px !important; }

    /* Gap utilities */
    .gap-6 { gap: 10px !important; }
    .gap-5 { gap: 10px !important; }
    .gap-4 { gap: 8px !important; }
    .gap-3 { gap: 6px !important; }

    /* Cart item rows — keep image small, info dense */
    .cart-item-mobile,
    .cart-item,
    [data-item-id] {
        padding: 8px !important;
        margin-bottom: 6px !important;
    }
    .cart-item-mobile img,
    .cart-item img {
        width: 64px !important;
        height: 64px !important;
        border-radius: 6px !important;
    }

    /* Text sizes — keep prices/titles legible but compact */
    .text-3xl { font-size: 1.25rem !important; }
    .text-2xl { font-size: 1.125rem !important; }
    .text-xl  { font-size: 1rem !important; }
    .text-lg  { font-size: 0.95rem !important; }
    .text-base { font-size: 0.875rem !important; }
    .text-sm  { font-size: 0.8125rem !important; }
    .text-xs  { font-size: 0.6875rem !important; }

    /* Buttons — ensure 44px touch target, but tighter padding */
    button, .btn,
    a[class*="bg-orange"], a[class*="bg-blue"], a[class*="bg-green"],
    button[class*="bg-orange"], button[class*="bg-blue"], button[class*="bg-green"],
    a[class*="rounded"][href], input[type="submit"], input[type="button"] {
        min-height: 40px;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        font-size: 0.875rem !important;
        font-weight: 600;
        border-radius: 8px !important;
    }
    /* Icon-only / quantity-style small buttons keep their compact size */
    .qty-btn, .quantity-btn, .icon-btn,
    button.w-8, button.w-7, button.w-6,
    button.h-8, button.h-7, button.h-6 {
        min-height: 32px !important;
        padding: 0 !important;
    }

    /* Form inputs — prevent zoom-on-focus by ensuring 16px font, tighter padding */
    input[type="text"], input[type="tel"], input[type="email"],
    input[type="number"], input[type="search"], input[type="password"],
    select, textarea {
        font-size: 16px !important;        /* prevents iOS zoom */
        padding: 9px 12px !important;
        border-radius: 8px !important;
        line-height: 1.3 !important;
    }
    label {
        font-size: 0.8125rem !important;
        margin-bottom: 4px !important;
        font-weight: 500;
    }

    /* Radio / payment-method tiles common across checkout pages */
    .payment-option, .address-option, .delivery-option,
    label[class*="border"][class*="rounded"] {
        padding: 10px !important;
        margin-bottom: 6px !important;
    }

    /* Order summary lines */
    .order-summary-row,
    .summary-row,
    .order-summary li,
    .order-summary > div {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        font-size: 0.8125rem !important;
    }

    /* Tables — collapse oversized cells */
    table { font-size: 0.8125rem !important; }
    td, th { padding: 6px 8px !important; }

    /* Sticky bottom action bar where used */
    .sticky-bottom, .bottom-action-bar, .checkout-bottom-bar {
        padding: 8px 10px !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    }

    /* Breadcrumb shrink */
    .breadcrumb, .breadcrumbs {
        font-size: 0.6875rem !important;
        margin-bottom: 8px !important;
    }

    /* Avatars / small thumbs */
    .w-24, .h-24 { width: 56px !important; height: 56px !important; }
    .w-20, .h-20 { width: 56px !important; height: 56px !important; }
    .w-16, .h-16 { width: 48px !important; height: 48px !important; }

    /* Modal/dialog tightening */
    .modal-content, .dialog-content {
        padding: 12px !important;
        border-radius: 12px !important;
        max-width: calc(100vw - 16px) !important;
        margin: 8px !important;
    }

    /* Order receipt / invoice / order detail — ensure they fit screen */
    .receipt, .invoice, .order-detail-card {
        padding: 10px !important;
        margin: 4px 0 !important;
        font-size: 0.8125rem !important;
    }
    .receipt h1, .receipt h2, .invoice h1, .invoice h2 {
        font-size: 1rem !important;
    }

    /* Reduce shadow weight for crisper look on mobile */
    .shadow, .shadow-md, .shadow-lg, .shadow-xl {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    }

    /* Hide elements explicitly marked desktop-only */
    .desktop-only, .hidden-mobile { display: none !important; }

    /* Disable horizontal scroll */
    html, body { overflow-x: hidden; }

    /* Fix common "long product name" overflow */
    .product-name, .item-name, h3.line-clamp-2 {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

/* ----- Very small phones (<= 380px) — go even tighter ----- */
@media (max-width: 380px) {
    body { font-size: 13px; }
    main, .cart2-page, .checkout-page,
    [class*="min-h-screen"] > .mx-auto {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .cart-item-mobile img, .cart-item img { width: 56px !important; height: 56px !important; }
    h1 { font-size: 0.95rem !important; }
    .text-3xl { font-size: 1.125rem !important; }
    .text-2xl { font-size: 1.0625rem !important; }
}

/* ----- Subtle polish (all sizes) ----- */
.cart2-page, .checkout-page {
    -webkit-tap-highlight-color: rgba(255, 138, 0, 0.15);
}
button:active, .btn:active, a.btn:active {
    transform: scale(0.98);
    transition: transform 80ms ease-out;
}