/* ==========================================================================
   NUTMOND — MOBILE RESPONSIVE OVERRIDES
   Applies to: header.php, index.php, footer.php
   Loaded AFTER all other stylesheets (see header.php <link> order) so these
   rules can safely override desktop-only styles that ship with the theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. GLOBAL / SAFETY NET
   -------------------------------------------------------------------------- */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

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

/* Bootstrap columns that only ship with a single breakpoint class
   (e.g. col-lg-6 with no sm/md variant) have no width/gutter at all
   below that breakpoint. This keeps content from bleeding into the
   row's negative margins on phones. */
@media (max-width: 991px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* --------------------------------------------------------------------------
   1. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .header .navbar-container {
        padding: 10px 0;
    }

    .header .row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
    }

    /* Logo column + nav column share one line with the toggler */
    .header .col-lg-5,
    .header .col-lg-2 {
        width: auto;
        max-width: none;
        flex: 0 0 auto;
    }

    /* Reorder header columns: logo left, then one tight right-hand
       cluster of [cart, account, toggler] in that order.
       DOM order is [nav+toggler, logo, cart/account] so we override with `order`. */
    .header .row > .col-lg-2 {
        order: 1;
    }

    .header .row > .col-lg-5:nth-child(3) {
        order: 2;
        flex-shrink: 0;
    }

    .header .row > .col-lg-5:nth-child(1) {
        order: 3;
        flex-shrink: 0;
        margin-left: 6px;
    }

    /* Right-hand cluster: cart + account, evenly spaced, right-aligned
       flush against the toggler so nothing floats away on its own */
    .header-nav-right-info {
        float: none;
        display: flex;
        align-items: center;
        gap: 14px;
        justify-content: flex-end;
        margin: 0;
        padding: 0;
    }

    .header-nav-right-info li {
        display: flex;
        align-items: center;
    }

    /* Account icon: match size/weight to the cart icon so the pair
       reads as one consistent icon group, not two mismatched buttons */
    .navSidebar-button {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        line-height: 1;
    }

    /* Remove Bootstrap's auto-caret on the account toggle — with a
       distinct user icon now in place, the extra arrow is just noise */
    .navSidebar-button.dropdown-toggle::after {
        display: none;
    }

    .header .navbar-brand.d-none {
        display: none !important;
    }

    .nav-logo img {
        max-height: 60px;
        width: auto;
    }

    .navbar-toggler {
        padding: 6px 10px;
        border: none;
    }

    .navbar-toggler-icon {
        font-size: 22px;
        color: #fff;
    }

    /* Collapsed mobile menu panel */
    #primary-nav.collapse.show,
    #primary-nav.collapsing {
        background: #1a3a20;
        margin-top: 12px;
        padding: 10px 15px 15px;
        border-radius: 8px;
        width: 100%;
    }

    .header .main-menu {
        flex-direction: column;
        width: 100%;
    }

    .header .main-menu > li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .header .main-menu > li:last-child {
        border-bottom: none;
    }

    .header .main-menu > li > a {
        display: block;
        padding: 12px 4px;
        color: #fff !important;
    }

    /* Right-side info (order btn / cart / account) */
    .header-nav-right-info {
        float: none;
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: flex-end;
    }

    .header-nav-right-info .header-book-btn {
        display: none;
    }

    .header-nav-right-info .btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    /* Keep the account dropdown on-screen instead of overflowing right */
    .user-account-menu {
        right: -10px;
        left: auto;
        min-width: 200px;
    }
}

@media (max-width: 575px) {
    .header-nav-right-info .header-book-btn {
        display: none;
    }

    .nav-logo img {
        max-height: 48px;
    }

    .header-cart .icon-cart {
        font-size: 18px;
    }
}

/* --------------------------------------------------------------------------
   2. HERO SLIDER (homepage swiper)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .nutmond-slider-wrapper .swiper,
    .swiper {
        min-height: 100dvh;
        height: 100dvh;
    }

    .slider-container {
        padding: 0 20px;
    }

    .price-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 18px 20px;
    }

    .menu-options {
        max-width: 100%;
    }

    .price-box {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 767px) {
    .main-title {
        font-size: 2.3rem;
        margin-bottom: 16px;
    }

    .tagline {
        font-size: 0.95rem;
    }

    .image-wrapper {
        max-width: 220px;
    }

    /* Thin out the floating particle animation so it doesn't clutter
       a small screen or overlap the text/price bar. */
    .nut-particle {
        width: 42px !important;
        height: 42px !important;
    }

    .nut-particle.sm { width: 30px !important; height: 30px !important; }
    .nut-particle.xs { width: 22px !important; height: 22px !important; }
    .nut-particle.lg { width: 54px !important; height: 54px !important; }

    .swiper-button-next,
    .swiper-button-prev {
        width: 36px;
        height: 36px;
        top: auto !important;
        bottom: 12px;
    }

    .swiper-button-prev { left: 12px; }
    .swiper-button-next { right: 12px; }
}

@media (max-width: 480px) {
    .main-title {
        font-size: 1.8rem;
    }

    .image-wrapper {
        max-width: 170px;
    }

    .price-bar {
        padding: 14px 16px;
    }

    .menu-options p {
        font-size: 0.85rem;
    }

    /* Hide the smallest floating particles entirely on very small phones —
       keeps the hero readable without visual clutter. */
    .nut-particle.xs,
    .nut-particle.sm {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   3. TWO-COLUMN ELEMENTOR SECTIONS (Welcome / Our Promise / Delivery)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .elementor-element-9e63d75 > .elementor-container,
    .elementor-column-gap-default {
        flex-wrap: wrap;
    }

    .elementor-column.elementor-col-50 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100%;
    }

    /* Sections that force display:flex via inline style (Our Promise /
       Delivery) should stack vertically instead of side-by-side.
       DOM order already puts text before image, which reads correctly
       stacked, so no reordering is needed. */
    .elementor-element[style*="display:flex"] {
        flex-direction: column;
    }

    .ts-section-title.title-left,
    .ts-section-title[style*="text-align:left"],
    .section-title[style*="text-align:left"] {
        text-align: center !important;
    }

    .elementor-widget-wrap[style*="padding: 40px 30px"] {
        padding: 30px 20px !important;
    }
}

/* --------------------------------------------------------------------------
   4. PRODUCT SLIDER (owl-carousel)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .ts-product-item.ts-product-slider {
        padding: 0 10px;
    }

    .ts-product-single-item {
        max-width: 260px;
        margin: 0 auto;
    }
}

/* --------------------------------------------------------------------------
   5. FOOD MENU TABS + MENU GRID
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .nav-menu-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
        padding-bottom: 8px;
    }

    .nav-menu-tabs::-webkit-scrollbar {
        height: 4px;
    }

    .nav-menu-tabs li.col {
        flex: 0 0 auto;
        width: auto;
        padding: 0 10px;
    }

    .nav-menu-tabs a {
        white-space: nowrap;
        font-size: 13px;
    }

    .nav-menu-tabs img {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 991px) {
    /* col-xs-12/col-sm-6/col-md-6 menu blocks have no explicit gutter
       below the 576px breakpoint — restore it explicitly. */
    .menu-block {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
}

@media (max-width: 575px) {
    .menu-block.col-sm-6 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .menu-block .inner-box .text {
        padding-right: 0;
    }

    .menu-block .info.clearfix {
        flex-wrap: wrap;
    }
}

/* --------------------------------------------------------------------------
   6. TESTIMONIALS
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    /* style-12.css forces the testimonial columns to a fixed 50/50 split
       at every screen size — override that so it stacks on tablets/phones. */
    .testimonial-carousel.owl-carousel .owl-item .row {
        flex-wrap: wrap;
    }

    .testimonial-carousel.owl-carousel .owl-item .col-lg-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .testimonial-thumb {
        margin-bottom: 16px;
    }

    .testimonial-author-content.two {
        padding: 10px 5px;
        text-align: center;
    }

    .testimonial-footer.media {
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .testimonial-author-content.two .testimonial-text {
        font-size: 14px;
        line-height: 1.6;
    }
}

/* --------------------------------------------------------------------------
   7. GALLERY
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .gallery-columns-4 .gallery-item {
        max-width: 50% !important;
        width: 50% !important;
        box-sizing: border-box;
        padding: 5px;
    }
}

@media (max-width: 480px) {
    .gallery-columns-4 .gallery-item {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   8. BLOG / NEWS CARDS
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .latest-blog .col-lg-4 {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        margin-bottom: 24px;
    }

    .latest-blog .col-lg-4:last-child {
        margin-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   9. FOOTER
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .ts-footer .footer-widget {
        text-align: center;
        margin-bottom: 24px;
    }

    .ts-footer .col-lg-3,
    .ts-footer .col-md-6 {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .footer-logo-area {
        margin-bottom: 10px;
    }
}

@media (max-width: 767px) {
    .ts-footer .row.copyright {
        text-align: center;
    }

    .ts-footer .copyright-text {
        margin-bottom: 16px;
    }

    #footer-menu.footer-menu {
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px 14px;
        padding: 0;
        margin-bottom: 12px;
    }

    .footer-social ul {
        justify-content: center;
        display: flex;
        gap: 10px;
    }

    .ts-footer .col-lg-6 {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .ts-footer {
        padding: 30px 0 15px;
    }

    .footer-widget .widget-title {
        font-size: 16px;
    }

    .BackTo {
        width: 38px;
        height: 38px;
        line-height: 38px;
    }
}