/* =====================================================
   YoKart — Mobile & Responsive Stylesheet
   Covers: xs (< 576px), sm (576-767px), md (768-991px)
   Desktop (≥ 992px) is unchanged — handled by site.css
   ===================================================== */

/* ── 1. SHELL / LAYOUT ─────────────────────────────── */

/* Below lg: sidebar becomes a hidden off-canvas drawer */
@media (max-width: 991.98px) {
    body {
        zoom: 1 !important; /* remove desktop zoom on mobile */
    }

    .yk-shell {
        grid-template-columns: 1fr !important;
        min-height: 100vh;
    }

    /* Sidebar hidden by default on mobile */
    .yk-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 40;
        overflow-y: auto;
    }

    /* Sidebar visible when sidebar-open is active */
    body.sidebar-open .yk-sidebar {
        transform: translateX(0);
    }

    .yk-main {
        width: 100%;
        min-width: 0;
    }
}

/* ── 2. HEADER ──────────────────────────────────────── */

@media (max-width: 991.98px) {
    .yk-header {
        padding: 10px 12px 0;
    }

    .yk-header-row {
        grid-template-columns: auto 1fr auto;
        gap: 8px;
        padding: 6px 10px;
        border-radius: 20px;
    }

    .yk-header-copy h1 {
        display: none; /* hide subtitle on tablet */
    }

    .yk-search {
        max-width: 100%;
        padding: 8px 10px;
    }

    .yk-user-meta {
        display: none; /* hide username text, keep avatar */
    }

    .yk-user-chip {
        padding: 4px;
        border-radius: 14px;
        background: transparent;
    }
}

@media (max-width: 575.98px) {
    .yk-header {
        padding: 8px 8px 0;
    }

    .yk-header-row {
        grid-template-columns: auto 1fr;
        gap: 6px;
        padding: 6px 8px;
        border-radius: 16px;
    }

    /* Move search below header row on small phones */
    .yk-header-row {
        flex-wrap: wrap;
        display: flex;
        align-items: center;
    }

    .yk-header-primary {
        flex: 0 0 auto;
    }

    .yk-search {
        order: 10;
        flex: 1 1 100%;
        margin-top: 6px;
        padding: 7px 10px;
        border-radius: 14px;
        max-width: 100%;
    }

    .yk-header-actions {
        flex: 0 0 auto;
        gap: 6px;
    }

    .yk-header-copy .yk-overline {
        display: none;
    }

    .yk-header-copy h1 {
        display: none;
    }

    .yk-icon-action {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 1rem;
    }
}

/* ── 3. CONTENT PADDING ────────────────────────────── */

@media (max-width: 767.98px) {
    .yk-content {
        padding: 14px 12px 28px;
    }

    .yk-footer {
        padding: 0 12px 20px;
    }
}

@media (max-width: 575.98px) {
    .yk-content {
        padding: 10px 10px 24px;
    }

    .yk-footer {
        padding: 0 10px 16px;
    }
}

/* ── 4. FOOTER ─────────────────────────────────────── */

@media (max-width: 991.98px) {
    .yk-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

@media (max-width: 575.98px) {
    .yk-footer-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 16px;
        border-radius: 20px;
    }
}

/* ── 5. HOME — HERO & PRODUCT GRID ─────────────────── */

@media (max-width: 575.98px) {
    .hero-panel {
        padding: 16px;
        margin-bottom: 14px;
        border-radius: 20px;
    }

    .hero-copy h2,
    .hero-copy h4 {
        font-size: clamp(1.2rem, 6vw, 1.65rem);
        max-width: none;
    }

    .hero-copy p {
        font-size: 0.9rem;
    }

    .hero-badges span {
        font-size: 0.78rem;
        padding: 7px 10px;
    }

    .catalog-heading {
        padding: 12px 14px;
    }

    .catalog-heading h3 {
        font-size: 1.15rem;
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .product-card {
        border-radius: 18px;
    }

    .product-card-body {
        padding: 12px;
        gap: 8px;
    }

    .product-title {
        font-size: 0.9rem;
        min-height: auto;
    }

    .product-card-body p {
        font-size: 0.82rem;
        min-height: auto;
    }

    .product-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .product-card-footer strong {
        font-size: 1rem;
    }

    .product-card-footer .btn {
        width: 100%;
        padding: 8px 12px;
        font-size: 0.85rem;
    }
}

/* ── 6. PRODUCT DETAIL PAGE ────────────────────────── */

@media (max-width: 575.98px) {
    .product-detail-card {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
        border-radius: 20px;
    }

    .product-detail-media {
        padding: 18px;
        border-radius: 18px;
    }

    .product-detail-media img {
        max-height: 260px;
    }

    .detail-price {
        font-size: 1.65rem;
    }

    .detail-purchase-form .btn {
        flex: 1 1 100%;
    }
}

/* ── 7. CART PAGE ──────────────────────────────────── */

@media (max-width: 767.98px) {
    .cart-product-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .cart-product-cell img {
        width: 60px;
        height: 60px;
        border-radius: 14px;
    }
}

@media (max-width: 575.98px) {
    /* Make cart table scroll horizontally */
    .table-responsive {
        border-radius: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cart-total-panel {
        justify-items: start;
    }

    .cart-total-panel strong {
        font-size: 1.4rem;
    }

    .quantity-control {
        gap: 6px;
        padding: 6px;
    }

    .quantity-control button {
        width: 28px;
        height: 28px;
        border-radius: 10px;
    }

    .quantity-field {
        width: 44px;
    }
}

/* ── 8. ORDERS PAGE ────────────────────────────────── */

@media (max-width: 575.98px) {
    .orders-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 12px 0 18px;
    }

    .orders-metric-card {
        padding: 12px 14px;
        border-radius: 16px;
    }

    .orders-metric-card strong {
        font-size: 1.1rem;
    }

    .order-item-card {
        grid-template-columns: 80px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
        border-radius: 18px;
    }

    .order-item-card img {
        width: 80px;
        height: 80px;
        border-radius: 14px;
    }

    .orders-hero {
        flex-direction: column;
        gap: 12px;
    }

    .orders-stats div {
        min-width: 80px;
        padding: 10px 12px;
    }

    .orders-stats strong {
        font-size: 1rem;
    }

    /* Make orders table scrollable */
    .yk-content .table-responsive {
        border-radius: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .yk-content table th,
    .yk-content table td {
        white-space: nowrap;
        font-size: 0.85rem;
        padding: 10px 12px;
    }
}

/* ── 9. PROFILE PAGE ───────────────────────────────── */

@media (max-width: 991.98px) {
    .profile-shell {
        grid-template-columns: 1fr;
    }

    .profile-overview,
    .profile-editor {
        padding: 18px;
    }

    .profile-form-head {
        flex-direction: column;
    }

    .profile-fields-grid,
    .profile-summary-list {
        grid-template-columns: 1fr;
    }

    .profile-actions {
        align-items: stretch;
    }

    .profile-actions-group,
    .profile-actions-note {
        width: 100%;
    }

    .profile-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .profile-shell {
        gap: 14px;
    }

    .profile-overview {
        padding: 16px;
        gap: 12px;
        border-radius: 20px;
    }

    .profile-avatar {
        width: 68px;
        height: 68px;
        border-radius: 20px;
    }

    .profile-overview-top {
        align-items: flex-start;
        gap: 12px;
    }

    .profile-avatar-wrap {
        flex-wrap: wrap;
    }

    .profile-overview h2 {
        font-size: 1.62rem;
    }

    .profile-overview-copy {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .profile-summary-item,
    .profile-lock-note,
    .profile-edit-tip {
        border-radius: 16px;
    }
}

/* ── 10. AUTH PAGES (Login / Register) ─────────────── */

@media (max-width: 991.98px) {
    .auth-shell {
        grid-template-columns: 1fr;
        min-height: auto;
        border-radius: 24px;
    }

    .auth-brand-panel {
        display: none; /* hide brand panel on mobile, focus on form */
    }
}

@media (max-width: 575.98px) {
    .auth-page {
        padding: 12px;
        align-items: flex-start;
        padding-top: 30px;
    }

    .auth-shell {
        border-radius: 20px;
        min-height: auto;
    }
}

/* ── 11. ADMIN TABLES & LOGS ───────────────────────── */

@media (max-width: 991.98px) {
    .yk-admin-shell .yk-content table {
        font-size: 0.88rem;
    }

    .yk-admin-shell .yk-content th,
    .yk-admin-shell .yk-content td {
        padding: 10px 12px;
    }

    .admin-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .yk-admin-shell .yk-content .table-responsive {
        border-radius: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .yk-admin-shell .yk-content table th,
    .yk-admin-shell .yk-content table td {
        white-space: nowrap;
        font-size: 0.82rem;
        padding: 8px 10px;
    }

    .audit-summary {
        justify-content: flex-start;
    }

    .audit-table-card,
    .assistant-table-card {
        padding: 18px;
    }

    .assistant-page-meta,
    .assistant-question,
    .assistant-response {
        max-width: 100%;
    }
}

/* ── 12. ADMIN FORM PAGE & PRODUCTS ─────────────────── */

@media (max-width: 575.98px) {
    .admin-form-shell {
        padding: 0;
    }

    .admin-form-card {
        border-radius: 20px;
        padding: 16px;
    }

    .admin-filter-bar {
        grid-template-columns: 1fr;
    }

    .admin-filter-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── 13. REVIEWS PAGE ──────────────────────────────── */

@media (max-width: 991.98px) {
    .review-summary-card,
    .review-grid {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .review-summary-card {
        display: grid;
        justify-items: start;
    }

    .review-score-panel {
        min-width: 0;
        justify-self: start;
        text-align: left;
    }

    .review-stars {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .review-card-top {
        flex-direction: column;
    }

    .review-meta {
        justify-items: start;
    }
}

@media (max-width: 575.98px) {
    .review-card {
        border-radius: 18px;
        padding: 14px;
    }
}

/* ── 14. ASSISTANT (FAB + PANEL) ───────────────────── */

@media (max-width: 575.98px) {
    .yk-assistant-shell {
        left: 8px;
        right: 8px;
        bottom: 8px;
    }

    .yk-assistant-panel {
        width: 100%;
        max-height: calc(100dvh - 110px);
        border-radius: 20px;
    }

    .yk-assistant-fab {
        width: 100%;
        justify-content: center;
        border-radius: 18px;
        padding: 14px 20px;
    }
}

/* ── 15. GENERAL UTILITY / BUTTONS / ALERTS ─────────── */

@media (max-width: 575.98px) {
    .yk-alert {
        font-size: 0.88rem;
        padding: 10px 14px;
        border-radius: 14px;
        margin-bottom: 14px;
    }

    .btn {
        font-size: 0.9rem;
    }

    .btn-sm {
        font-size: 0.82rem;
        padding: 6px 12px;
    }

    /* Prevent text overflow in badges / pills */
    .badge,
    .product-meta span,
    .detail-meta span {
        font-size: 0.72rem;
        padding: 4px 8px;
    }
}

/* ── 16. PUBLIC PAGES (About / Contact / Privacy) ─── */

@media (max-width: 991.98px) {
    .public-stat-grid,
    .public-card-grid,
    .public-contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .public-hero,
    .public-section,
    .public-panel {
        padding: 22px;
    }

    .public-stat-grid,
    .public-card-grid,
    .public-contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .public-hero {
        padding: 20px 16px;
        border-radius: 20px;
    }

    .public-hero h1,
    .public-hero h2 {
        font-size: clamp(1.3rem, 6vw, 1.7rem);
    }

    .public-section {
        padding: 16px;
        border-radius: 18px;
    }
}

/* ── 17. PREVENT HORIZONTAL OVERFLOW GLOBALLY ───────── */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
iframe,
table {
    max-width: 100%;
}

/* ── 18. TOUCH IMPROVEMENTS ─────────────────────────── */

@media (max-width: 991.98px) {
    /* Larger tap targets */
    .btn,
    .yk-icon-action,
    .yk-category-trigger,
    .yk-subcategory-link,
    .dropdown-item {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Smooth momentum scroll for drawers */
    .yk-sidebar {
        -webkit-overflow-scrolling: touch;
    }
}

/* ── 19. MODAL ON MOBILE ─────────────────────────────── */

@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 10px;
    }

    .modal-content {
        border-radius: 16px;
    }

    .modal-header,
    .modal-body {
        padding: 16px;
    }
}