/**
 * Rave Essentials - Responsive CSS
 *
 * This file contains responsive adjustments to ensure consistent
 * display across all mobile devices without affecting the main styling.
 */

/* ===== Base Responsive Adjustments ===== */
html {
    overflow-x: hidden; /* Prevent horizontal scrolling on mobile */
    overflow-y: scroll; /* Fallback for older browsers */
    scrollbar-gutter: stable; /* Prevents layout shift from scrollbar in Chrome */
}

body {
    overflow-x: hidden;
}

/* ===== Comprehensive Media Queries ===== */

/* Extra Small Devices (phones, up to 575.98px) */
@media (max-width: 575.98px) {
    /* Container padding adjustments */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Smaller neon text on tiny screens */
    .neon-text {
        font-size: 2.2rem;
    }

    /* Mobile navbar - small phones */
    .navbar {
        min-height: 58px;
    }

    .navbar-container {
        padding: 0.4rem 0.75rem;
    }

    .navbar-logo-mobile {
        height: 42px;
        max-width: 140px;
    }

    .mobile-cart-icon {
        font-size: 1.3rem;
    }

    .mobile-toggler .navbar-toggler-icon {
        width: 1.4rem;
        height: 1.4rem;
    }

    /* .btn-rave responsive styles are in components/buttons.css */

    /* Product detail page */
    .product-title {
        font-size: 2rem;
    }

    /* Trust badges - stack on mobile */
    .trust-badges {
        flex-direction: column;
        align-items: flex-start;
    }

    .badge-item {
        margin-bottom: 0.5rem;
    }

    /* Footer adjustments */
    .footer-section h5 {
        margin-top: 1rem;
    }

    /* Reviews section - Fix for stars and title on small screens */
    .reviews-header .d-flex.align-items-center {
        flex-direction: column;
        align-items: flex-start;
    }

    .reviews-header .section-title {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
        margin-right: 0 !important;
        width: 100%;
        text-align: center;
    }

    .header-rating-stars {
        margin-bottom: 0.5rem;
        justify-content: center !important;
        margin: 0 auto;
    }

    /* Make review content fit better on small screens */
    .reviews-section {
        padding: 15px;
    }

    /* Ensure text doesn't overflow */
    .review-title, .review-comment {
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

/* Small Devices (large phones, tablets, up to 767.98px) */
@media (max-width: 767.98px) {
    /* Tablet navbar */
    .navbar-logo-mobile {
        height: 44px;
        max-width: 150px;
    }

    .navbar {
        min-height: 64px;
    }

    .navbar-container {
        padding: 0.5rem 1rem;
    }

    .mobile-cart-icon {
        font-size: 1.35rem;
    }

    /* Add spacing between stacked columns. Legacy rule from before Bootstrap
       g-* gap utilities — for grids that don't use g-*, this gives them
       breathing room. Grids using g-* already have spacing and the extra
       margin steals vertical height from cards (cards with `height: 100%`
       fill the column-minus-margin, while :last-child has no margin and
       fills the full column — making cards in the same row visually
       different heights). Override below cancels that. */
    .row > [class*="col-"] {
        margin-bottom: 1.5rem;
    }

    /* Remove bottom margin from the last column in a row */
    .row > [class*="col-"]:last-child {
        margin-bottom: 0;
    }

    /* Bootstrap g-* gap utility already provides spacing — cancel the
       legacy margin so cards retain consistent height across the grid. */
    .row[class*="g-"] > [class*="col-"] {
        margin-bottom: 0;
    }

    /* Product image optimizations */
    .product-image-container {
        max-width: 100%;
        margin: 0 auto;
    }

    /* Ensure cart items fit */
    .cart-item {
        padding: 0.75rem;
    }

    /* Reviews section adjustments */
    .reviews-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .reviews-section .section-title {
        font-size: 1.7rem;
        margin-bottom: 0.5rem;
    }

    /* Better fit for review content on smaller screens */
    .review-item,
    .review-form-container {
        padding: 12px;
    }

    /* Improve reviewer info display */
    .reviewer-info {
        flex-wrap: wrap;
    }
}

/* Medium Devices (tablets, up to 991.98px) */
@media (max-width: 991.98px) {
    /* Tablet landscape navbar */
    .navbar-logo-mobile {
        height: 46px;
        max-width: 160px;
    }

    .navbar {
        min-height: 68px;
    }

    .navbar-container {
        padding: 0.5rem 1.25rem;
    }

    .mobile-cart-icon {
        font-size: 1.35rem;
    }

    /* Larger touch targets in general */
    .nav-link, .dropdown-item, button, .btn {
        padding: 0.5rem 0.75rem;
    }

    /* Checkout form adjustments */
    .form-control {
        padding: 0.5rem;
        font-size: 1rem;
    }
}

/* Large Devices (desktops, up to 1199.98px) */
@media (max-width: 1199.98px) {
    /* Subtle adjustments for smaller desktops */
    .container {
        max-width: 96%;
    }

    /* Slightly smaller logo on smaller desktops */
    .navbar-logo {
        height: 46px;
    }

    /* Tighter nav spacing for smaller screens */
    .navbar-nav-center .nav-link {
        padding: 0.5rem 0.9rem;
        font-size: 0.95rem;
    }
}

/* Extra Large Devices (large desktops, 1400px and up) */
@media (min-width: 1400px) {
    .navbar-logo {
        height: 52px;
    }

    .navbar-nav-center .nav-link {
        padding: 0.5rem 1.35rem;
    }
}

/* Ultra-wide screens (2K+) */
@media (min-width: 1920px) {
    .navbar-logo {
        height: 56px;
    }
}

/* ===== Responsive Image Handling ===== */

/* Enhance Bootstrap img-fluid for all scenarios */
.img-fluid {
    max-width: 100%;
    height: auto;
    display: block; /* Removes bottom spacing */
}

/* Product images */
.product-image {
    object-fit: contain; /* Preserve aspect ratio */
    width: 100%;
    max-height: 50vh; /* Limit height on mobile */
}

/* Thumbnail images */
.product-thumbnail {
    max-width: 60px;
    height: auto;
}

@media (max-width: 575.98px) {
    /* Further optimize images on smallest screens */
    .product-image {
        max-height: 40vh;
    }
}

/* ===== Typography Scaling ===== */

/* Base typography adjustments */
@media (max-width: 767.98px) {
    h1, .h1 {
        font-size: calc(1.8rem + 1.5vw);
    }

    h2, .h2 {
        font-size: calc(1.4rem + 1vw);
    }

    h3, .h3 {
        font-size: calc(1.2rem + 0.5vw);
    }

    h4, .h4 {
        font-size: calc(1.1rem + 0.3vw);
    }

    h5, .h5 {
        font-size: 1rem;
    }

    /* Adjust paragraph and list text */
    p, li, .nav-link {
        font-size: 0.95rem;
    }

    /* Ensure form labels and inputs remain readable */
    label, input, select, textarea {
        font-size: 0.95rem;
    }

    /* Subtle improvements to messages */
    .login-to-review-message,
    .already-reviewed-message {
        font-size: 0.95rem;
        padding: 10px;
    }

    /* Rating stars for product reviews */
    .review-rating {
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .small-star {
        font-size: 0.85rem;
        margin-right: 1px;
    }
}

/* Further adjustments for very small screens */
@media (max-width: 359.98px) {
    /* Even smaller text for tiny screens */
    p, li {
        font-size: 0.9rem;
    }

    /* Ensure buttons remain usable */
    .btn {
        padding: 0.375rem 0.675rem;
        font-size: 0.9rem;
    }

    /* Adjust layout but not the star elements themselves */
    .review-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .review-date {
        margin-top: 4px;
    }
}

/* ===== Utility Classes for Responsive Design ===== */

/* Navbar spacer - adds padding for fixed navbar */
.navbar-spacer {
    padding-top: 80px;
}

@media (max-width: 768px) {
    .navbar-spacer {
        padding-top: 90px;
    }
}

@media (max-width: 430px) {
    .navbar-spacer {
        padding-top: 80px;
    }
}

/* Honeypot field - hidden from users but visible to bots */
.honeypot {
    display: none !important;
    visibility: hidden;
    position: absolute;
    left: -9999px;
}

/* Hide elements only on mobile */
@media (max-width: 767.98px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide elements only on desktop */
@media (min-width: 768px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Touch-friendly spacing adjustments */
@media (max-width: 767.98px) {
    .touch-friendly {
        margin-bottom: 1.5rem !important;
    }

    /* Increase spacing between interactive elements */
    .btn, .nav-link, .form-control {
        margin-bottom: 0.5rem;
    }

    /* Ensure adequate spacing between close elements */
    .touch-gap {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
}

/* Mobile nav: search + cart icons side-by-side.
   Existing .mobile-cart-icon (product_detail.css) uses `justify-self: end`
   for a single-icon grid cell. Wrapping two icons in `.mobile-actions`
   requires a wider right grid column and a flex reset on the icons.
   Sized to fit comfortably at 360px without overflowing the viewport. */
.navbar-mobile {
    /* Equal side columns keep the logo on the viewport centre: the right one
       holds two 44px icons and a 4px gap, the left one the 44px menu button. */
    grid-template-columns: 92px 1fr 92px !important;
    column-gap: 8px;
}

.navbar-mobile .mobile-toggler {
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin: 0;
}

.navbar-mobile .mobile-actions {
    display: flex !important;
    align-items: center;
    gap: var(--spacing-xs);
    justify-self: end;
    flex-wrap: nowrap;
    min-width: 0;
    justify-content: flex-end;
    /* Don't claim the full grid cell width — let the cell expand if needed
       at very small widths but keep the icons hugging the right edge. */
    width: auto;
}

.navbar-mobile .mobile-actions > .mobile-cart-icon {
    justify-self: auto !important;
    position: relative;
    width: 44px !important;
    height: 44px !important;
    font-size: 1.15rem;
    flex-shrink: 0;
    flex-grow: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

/* Cart badge MUST be position: absolute so it doesn't push the icon wider
   and break the carefully-sized 44+gap+44 layout. */
.navbar-mobile .mobile-actions > .mobile-cart-icon .cart-badge {
    position: absolute;
    top: -2px;
    right: -2px;
}

.navbar-mobile .mobile-search-icon .cart-badge { display: none !important; }

/* Tighter padding on the navbar container at mobile widths to give the
   icons more breathing room before they hit the viewport edge. */
@media (max-width: 575.98px) {
    .navbar .navbar-container { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* Below 360px two 44px icons leave the logo too little room, so the icons
   shrink to 36px and both side columns stay equal. */
@media (max-width: 359.98px) {
    .navbar-mobile { grid-template-columns: 76px 1fr 76px !important; }
    .navbar-mobile .mobile-toggler { width: 36px; min-width: 36px; height: 36px; }
    .navbar-mobile .mobile-actions > .mobile-cart-icon {
        width: 36px !important; height: 36px !important; font-size: 1rem;
    }
}

/* Search-only header (no basket icon): equal side columns keep the logo on the
   viewport centre, and the hamburger and the lone search icon are full 44px tap
   targets, each flush with its outer edge so the two icons mirror each other.
   The columns stay 44px below 360px too (this rule outranks the narrower one
   above), because a 44px control cannot fit a narrower column and the logo
   still has room at 320px. */
.navbar-mobile.navbar-mobile--search-only {
    grid-template-columns: 44px 1fr 44px !important;
}

.navbar-mobile.navbar-mobile--search-only .mobile-toggler {
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin: 0;
}

.navbar-mobile.navbar-mobile--search-only .mobile-actions > .mobile-search-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.15rem;
}