/* ═══════════════════════════════════════════════════════════════
   responsive.css – Global Mobile & Tablet Breakpoints
   Applied to ALL pages via base.html (after custom.css)
   Breakpoints: 1200px (xl), 991px (lg), 768px (md), 576px (sm)
   ═══════════════════════════════════════════════════════════════ */

/* ─── General Overflow Protection ─── */
html, body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

/* ─── Tables: Always Scrollable on Small Screens ─── */
table {
    width: 100%;
}

/* ─── Toast Notifications ─── */
@media (max-width: 576px) {
    .toast-container {
        right: 10px;
        left: 10px;
        top: 10px;
    }
    .toast-message {
        min-width: auto !important;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .header__top__left p {
        font-size: 12px;
    }
    .header__top__right .header__top__links a {
        font-size: 12px;
    }
}

@media (max-width: 576px) {
    .header__top {
        padding: 5px 0;
    }
    .header__top__left p {
        font-size: 11px;
        text-align: center;
    }
    .header__top__right {
        justify-content: center;
    }
    .header__nav__option {
        gap: 8px;
    }
    .header__nav__option a img {
        width: 18px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   CART PAGE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .shopping__cart__table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .shopping__cart__table table {
        min-width: 600px;
    }
}

@media (max-width: 768px) {
    /* Stack cart layout: table + summary */
    .shopping-cart .col-lg-8,
    .shopping-cart .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .shopping-cart .col-lg-4 {
        margin-top: 24px;
    }

    /* Responsive cart table */
    .shopping__cart__table {
        overflow-x: auto;
    }

    /* Make buttons stack */
    .continue__btn {
        margin-bottom: 10px;
    }
    .continue__btn a,
    .update__btn a {
        display: block;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .shopping__cart__table table {
        min-width: 500px;
    }
    .product__cart__item {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .product__cart__item__pic img {
        width: 70px !important;
        height: 70px !important;
    }
    .product__cart__item__text h6 {
        font-size: 13px;
    }
    .qty-btncart {
        width: 30px;
        height: 30px;
    }
    .qty-inputcart {
        width: 40px;
    }
    .cart__price {
        font-size: 14px;
    }

    /* Cart summary */
    .cart__discount input {
        width: 100%;
    }
    .cart__total ul li {
        font-size: 14px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   CHECKOUT PAGE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .section-content .col-lg-8,
    .section-content .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .section-content .col-lg-4 {
        margin-top: 24px;
    }
}

@media (max-width: 768px) {
    /* Stack form fields */
    .form-row {
        flex-direction: column;
    }
    .form-row > .col,
    .form-row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
        padding-left: 0;
    }
    .form-row > .col + .col,
    .form-row > [class*="col-"] + [class*="col-"] {
        margin-top: 8px;
    }

    /* Payment method cards */
    .payment-method-card {
        padding: 15px;
    }
    .payment-icon {
        font-size: 24px;
    }
    .payment-title {
        font-size: 14px;
    }
    .payment-desc {
        font-size: 12px;
    }

    /* Shipping cards */
    .shipping-method-card {
        padding: 12px;
    }
    .shipping-title {
        font-size: 13px;
    }
    .shipping-price {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .card-title {
        font-size: 18px;
    }
    .card-body {
        padding: 15px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   WISHLIST PAGE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .wishlist-header .d-flex.justify-content-between {
        flex-direction: column;
        gap: 12px;
    }
    .wishlist-header .d-flex.gap-2 {
        width: 100%;
    }
    .wishlist-header .d-flex.gap-2 a {
        flex: 1;
        text-align: center;
        font-size: 13px;
        padding: 8px 12px;
    }
}

@media (max-width: 576px) {
    .product__item__pic {
        height: 200px;
        background-size: cover;
        background-position: center;
    }
}


/* ═══════════════════════════════════════════════════════════════
   DASHBOARD PAGE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Stack sidebar above content */
    .section-conten .col-md-3,
    .section-conten .col-md-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Horizontal sidebar on mobile */
    .section-conten #sidebar {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 15px;
    }
    .section-conten #sidebar .list-group-item {
        flex: 1;
        text-align: center;
        font-size: 13px;
        padding: 8px 5px;
        border-radius: 0;
    }
    .section-conten .btn-block {
        margin-bottom: 20px;
    }

    /* Dashboard cards */
    .section-conten .card-body.row > .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 12px;
    }

    /* Orders table scrollable */
    .section-conten .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Profile picture alignment */
    .section-conten img[style*="margin-left: 180px"] {
        margin-left: 0 !important;
        display: block;
        margin: 10px auto;
    }
}


/* ═══════════════════════════════════════════════════════════════
   MY ORDERS PAGE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .section-content h2 {
        font-size: 1.5rem;
    }

    /* Order card header */
    .section-content .card-header .row > .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .section-content .card-header .text-right {
        text-align: left !important;
        margin-top: 8px;
    }

    /* Order info grid stacks */
    .section-content .card-body .row > .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 10px;
    }

    /* Buttons */
    .section-content .card-body .text-right {
        text-align: center !important;
    }
    .section-content .card-body .text-right .btn {
        margin-bottom: 6px;
        display: inline-block;
    }
}

@media (max-width: 576px) {
    .section-content .card-body .row > .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .section-content .card-body p {
        font-size: 14px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   ORDER DETAIL PAGE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Stack main content + sidebar */
    .section-content .col-md-8,
    .section-content .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .section-content .col-md-4 {
        margin-top: 20px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   TRACK ORDER PAGE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Table scrollable */
    .table-responsive,
    .table-shopping-cart {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-shopping-cart {
        min-width: 500px;
    }

    /* Order summary sidebar */
    .dlist-align {
        display: flex;
        justify-content: space-between;
    }
    .dlist-align dt {
        font-size: 13px;
    }
    .dlist-align dd {
        font-size: 13px;
    }

    /* Summary card, definition list responsive  */
    dl.row > dt.col-sm-6,
    dl.row > dd.col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    /* Timeline adjustments */
    .timeline-item {
        padding-left: 50px;
    }
    .timeline-icon {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
    .timeline-line {
        left: 16px;
    }
    .timeline-content h6 {
        font-size: 14px;
    }

    /* Progress bar */
    .progress-container .progress {
        height: 18px !important;
    }
    .progress-bar {
        font-size: 11px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   ORDER COMPLETE PAGE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
    .order-complete .order-info-section {
        padding: 15px;
    }
    .order-complete h2 {
        font-size: 1.3rem;
    }
}


/* ═══════════════════════════════════════════════════════════════
   LOGIN & REGISTER PAGES
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Stack login + register side by side */
    .content-page .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .content-page .col-md-6:last-child {
        margin-top: 24px;
    }

    .form-border-box {
        padding: 20px;
    }
    .form-border-box h2 {
        font-size: 1.3rem;
    }
    .form-field-wrapper input,
    .form-field-wrapper select {
        font-size: 14px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   HOME PAGE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .banner .container .row > div {
        margin-bottom: 15px;
    }
    .banner__item {
        margin-bottom: 10px;
    }
    .latest-product__text h4 {
        font-size: 18px;
    }
}

@media (max-width: 576px) {
    .hero__items .hero__text h2 {
        font-size: 28px;
    }
    .hero__items .hero__text p {
        font-size: 14px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   DEMO HOME PAGE (products_demo/demo_home.html)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Announcement bar */
    .announce-bar {
        font-size: 12px;
        padding: 8px 10px;
    }
    .announce-bar .announce-items {
        flex-direction: column;
        gap: 4px;
    }

    /* Hero section */
    .hero-slide h2 {
        font-size: 1.6rem !important;
    }
    .hero-slide p {
        font-size: 0.9rem !important;
    }
    .hero-slide .btn {
        padding: 10px 24px;
        font-size: 13px;
    }

    /* Trust bar */
    .trust-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    /* Categories */
    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    /* Product grids */
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    /* Promo section */
    .promo-grid {
        grid-template-columns: 1fr !important;
    }
    .promo-img {
        height: 200px !important;
    }

    /* Flash sale */
    .flash-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: 1fr !important;
    }

    /* Newsletter */
    .newsletter-form {
        flex-direction: column;
    }
    .newsletter-form input {
        width: 100% !important;
        border-radius: 8px !important;
    }
    .newsletter-form button {
        border-radius: 8px !important;
        margin-top: 8px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
}

@media (max-width: 480px) {
    .hero-slide h2 {
        font-size: 1.3rem !important;
    }
    .trust-grid {
        gap: 8px;
    }
    .products-grid,
    .flash-grid {
        grid-template-columns: 1fr !important;
    }
    .countdown {
        gap: 8px;
    }
    .countdown > div {
        min-width: 50px;
        padding: 8px 6px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   BLOG PAGES (supplementary to existing inline @media)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .blog-sidebar,
    .blog-content {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .blog-post-card {
        margin-bottom: 15px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   OFFERS PAGE (supplementary to existing inline @media)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
    .offers-hero {
        padding: 30px 0 25px;
    }
    .offers-hero h1 {
        font-size: 1.5rem;
    }
    .featured-offer {
        padding: 18px;
        border-radius: 12px;
    }
    .featured-offer h2 {
        font-size: 1.2rem;
    }
    .countdown-unit {
        min-width: 45px;
        padding: 6px 8px;
    }
    .countdown-unit .num {
        font-size: 18px;
    }
    .filter-chips {
        gap: 6px;
    }
    .filter-chip {
        padding: 6px 12px;
        font-size: 12px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   STORE PAGE (supplementary to existing inline @media)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
    .store-toolbar {
        flex-wrap: wrap;
        gap: 10px;
    }
    .sort-select {
        width: 100%;
    }
    .store-hero h1 {
        font-size: 1.4rem;
    }
}


/* ═══════════════════════════════════════════════════════════════
   PRODUCTS DEMO LIST (supplementary to existing inline @media)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
    .demo-hero h1 {
        font-size: 1.3rem;
    }
    .demo-toolbar {
        flex-wrap: wrap;
        gap: 10px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   PRODUCTS DEMO DETAIL (supplementary)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .product-gallery-container {
        flex-direction: column;
    }
    .product-thumbnails {
        flex-direction: row;
        overflow-x: auto;
    }
    .product-info {
        padding-top: 20px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   ADMIN PAGES (index, analytics)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Admin dashboard stats grid */
    .admin-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Admin charts */
    .admin-chart-card {
        min-height: auto;
    }
}

@media (max-width: 576px) {
    .admin-stats-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER (includes/footer.html)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .footer__about p {
        font-size: 13px;
    }
    .footer__widget ul li a {
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .footer .container .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }
    .footer__copyright__text {
        text-align: center;
    }
}


/* ═══════════════════════════════════════════════════════════════
   UTILITY: Responsive helpers
   ═══════════════════════════════════════════════════════════════ */

/* Force tables to scroll horizontally on mobile */
@media (max-width: 768px) {
    .table-auto-scroll {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Responsive text alignment */
@media (max-width: 768px) {
    .text-right-md {
        text-align: left !important;
    }
}

@media (max-width: 576px) {
    .text-right-sm {
        text-align: left !important;
    }
}

/* Responsive spacing */
@media (max-width: 768px) {
    .spad {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

@media (max-width: 576px) {
    .spad {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}