/* ============================================
   DESIGN SYSTEM - DESIGN TOKENS & METRICS
   ============================================ */

   :root {
    /* ========== TYPOGRAPHY SCALE ========== */
    /* Base font size - scales responsively (pixel values for html element) */
    --font-size-base-px: 16px;                 /* Desktop base */
    --font-size-base-tablet-px: 15px;          /* Tablet base */
    --font-size-base-mobile-px: 14px;          /* Mobile base */
    
    /* Font size scale (using rem for scalability) */
    --font-size-xs: 0.75rem;                   /* 12px on desktop */
    --font-size-sm: 0.875rem;                  /* 14px on desktop */
    --font-size-base: 1rem;                    /* 16px on desktop */
    --font-size-md: 1.125rem;                  /* 18px on desktop */
    --font-size-lg: 1.25rem;                   /* 20px on desktop */
    --font-size-xl: 1.5rem;                    /* 24px on desktop */
    --font-size-2xl: 1.875rem;                /* 30px on desktop */
    --font-size-3xl: 2.25rem;                 /* 36px on desktop */
    --font-size-4xl: 3rem;                    /* 48px on desktop */
    --font-size-5xl: 3.75rem;                 /* 60px on desktop */
    
    /* Line heights for readability */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;
    
    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ========== SPACING SCALE ========== */
    /* Base spacing unit (4px system) */
    --spacing-unit: 4px;
    
    --spacing-0: 0;
    --spacing-1: 0.25rem;                     /* 4px */
    --spacing-2: 0.5rem;                      /* 8px */
    --spacing-3: 0.75rem;                     /* 12px */
    --spacing-4: 1rem;                        /* 16px */
    --spacing-5: 1.25rem;                     /* 20px */
    --spacing-6: 1.5rem;                      /* 24px */
    --spacing-8: 2rem;                        /* 32px */
    --spacing-10: 2.5rem;                     /* 40px */
    --spacing-12: 3rem;                       /* 48px */
    --spacing-16: 4rem;                       /* 64px */
    --spacing-20: 5rem;                       /* 80px */
    --spacing-24: 6rem;                       /* 96px */
    
    /* ========== COLOR PALETTE ========== */
    /* Primary brand colors */
    --color-primary: #DA0000;
    --color-primary-dark: #B30000;
    --color-primary-darker: #8B0000;
    --color-primary-light: #FF1A1A;
    --color-primary-hover: #A30000;
    
    /* Neutral colors */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-gray-50: #FAFAFA;
    --color-gray-100: #F5F5F5;
    --color-gray-200: #E5E5E5;
    --color-gray-300: #D4D4D4;
    --color-gray-400: #A3A3A3;
    --color-gray-500: #737373;
    --color-gray-600: #525252;
    --color-gray-700: #404040;
    --color-gray-800: #262626;
    --color-gray-900: #171717;
    
    /* Semantic colors */
    --color-success: #28A745;
    --color-success-light: #4ADE80;
    --color-error: #DC3545;
    --color-error-light: #FF0000;
    --color-warning: #FFC107;
    --color-info: #17A2B8;
    
    /* Text colors */
    --color-text-primary: #1A1A1A;
    --color-text-secondary: #525252;
    --color-text-tertiary: #737373;
    --color-text-inverse: #FFFFFF;
    --color-text-muted: #A3A3A3;
    
    /* Background colors */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F5F5F5;
    --color-bg-tertiary: #E5E5E5;
    --color-bg-dark: #1A1A1A;
    --color-bg-overlay: rgba(0, 0, 0, 0.8);
    
    /* ========== BORDER RADIUS ========== */
    --radius-none: 0;
    --radius-sm: 0.25rem;                      /* 4px */
    --radius-md: 0.5rem;                       /* 8px */
    --radius-lg: 0.75rem;                      /* 12px */
    --radius-xl: 1rem;                         /* 16px */
    --radius-2xl: 1.5rem;                      /* 24px */
    --radius-full: 9999px;
    
    /* ========== SHADOWS ========== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    
    /* ========== TRANSITIONS ========== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;
    --transition-slower: 500ms ease-in-out;
    
    /* ========== BREAKPOINTS (for reference) ========== */
    /* Mobile: up to 640px */
    /* Tablet: 641px - 1024px */
    /* Desktop: 1025px and above */
    
    /* ========== Z-INDEX SCALE ========== */
    --z-index-base: 1;
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    --z-index-max: 9999;
}

/* ========== RESPONSIVE BASE FONT SIZES ========== */
html {
    font-size: var(--font-size-base-px);
    scroll-behavior: smooth;
}

/* Tablet adjustments */
@media screen and (max-width: 1024px) {
    html {
        font-size: var(--font-size-base-tablet-px);
    }
}

/* Mobile adjustments */
@media screen and (max-width: 640px) {
    html {
        font-size: var(--font-size-base-mobile-px);
    }
}

/* ========== GLOBAL RESET & BASE STYLES ========== */
*{
    /* Apply Inter Font to the whole website */
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    overflow-x: hidden;  /* Prevents horizontal scrolling */
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    margin: 0;
    padding: 0;
}

/*Landing Page*/
/* Make the main container full width */
.maincontainer{
    width: 100%;
    box-sizing: border-box;
    background-color: black;
    margin: 70px 0 0 0;
    padding: 0;
}

/* Adjust margin-top for mobile to match navbar height */
@media screen and (max-width: 640px) {
    /* Ensure navbar is exactly 60px and doesn't create gap */
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    
    .maincontainer {
        margin-top: 60px;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Ensure maincontainer's first child (nav wrapper) doesn't create space */
    .maincontainer > .nav:first-child,
    .maincontainer > .main-reviews-page-nav:first-child {
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
    }
    
    /* Ensure content after nav wrapper in maincontainer has no top spacing */
    .maincontainer > .nav + *,
    .maincontainer > .main-reviews-page-nav + * {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Exception: Order details page needs top spacing */
    .maincontainer > .nav + .client-order-details-container {
        padding-top: 20px !important; /* Professional space below navbar */
    }
    
    /* Exception: Wallet container needs top spacing */
    .maincontainer > .nav + .wallet-container {
        padding-top: 20px !important; /* Professional space below navbar */
    }
    
    /* Exception: View film container needs top spacing */
    .maincontainer > .nav + .view-film-container,
    .maincontainer .view-film-container {
        margin-top: 0 !important;
        padding-top: 20px !important; /* Professional space below navbar */
    }
    
    /* Exception for film error - allow top spacing on mobile with black background */
    /* Must come after the general padding-top: 0 rule to override it */
    .maincontainer:has(> .user-film-error) {
        padding-top: 20px !important; /* Top padding for space below navbar on mobile - shows black background */
    }
    
    .maincontainer > .nav + .user-film-error {
        margin-top: 0 !important; /* Remove margin since padding handles spacing */
    }
    
    /* Ensure navbar doesn't create any space below it */
    .navbar::after,
    .navbar::before {
        display: none !important;
        content: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Ensure no gap between navbar and maincontainer */
    body {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Remove any potential gap from elements between navbar and content */
    .navbar + * {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Ensure no element creates space between navbar and maincontainer */
    .navbar ~ *:not(.nav-backdrop) {
        margin-top: 0 !important;
    }
    
    /* Force maincontainer to start exactly at navbar height (will be set by JS) */
    body > .maincontainer,
    body > * > .maincontainer {
        margin-top: 60px;
    }
    
    /* Remove any potential spacing from wrapper divs */
    .main-reviews-page-nav,
    .nav {
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
        line-height: 0 !important;
        overflow: visible !important;
    }
    
    /* Remove top margin from hero and any content immediately after nav wrapper */
    .nav + *,
    .main-reviews-page-nav + * {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Exception: Wallet container needs top spacing */
    .nav + .wallet-container {
        padding-top: 20px !important; /* Professional space below navbar */
    }
    
    /* Remove hero margin-top on mobile since maincontainer already accounts for navbar */
    .hero {
        margin-top: 0 !important;
    }
    
    /* Remove top spacing from about page main container */
    .maincontainer-about-page {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Remove top margin from about page hero section on mobile to eliminate white space */
    .about-page-hero-section {
        margin-top: 0 !important;
    }
    
    /* Remove white space below navigation bar on reviews page */
    .main-reviews-page-nav + .main-reviews-page-hero,
    .main-reviews-page-hero {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Remove white space below navigation bar on product page */
    .product-container {
        margin-top: 0 !important;
        padding-top: 20px !important; /* Professional spacing inside maincontainer */
    }
}


/*Navigation/Header*/
.navbar {
    width: 100%;
    height: 70px;
    background-color: #111;
    color: white;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: all 0.3s ease;
    margin: 0;
    border: none;
    outline: none;
    box-sizing: border-box;
    line-height: 1;
    overflow: visible;
    display: flex;
    align-items: center;
}

.nav-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 100%;
    box-sizing: border-box;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
}

.nav-links li a {
    text-decoration: none;
    color: white;
    font-weight: 500;
    transition: transform 0.3s ease, color 0.3s ease;
    display: inline-block; /* Needed for transform to work properly */
}

.nav-links li a:hover {
    transform: scale(1.1);
    color: #DA0000;
}

.nav-auth .btn {
    background-color: #DA0000;
    padding: 6px 12px;
    color: white;
    text-decoration: none;
    margin-left: 10px;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: transform 0.3s ease, color 0.3s ease;
    display: inline-block; /* Needed for transform to work properly */
}

.nav-auth .btn:hover {
    transform: scale(1.1);
    background-color: #B60000;
}


/* Profile pic + dropdown in nav */
.nav-auth {
  display: flex;
  align-items: center;
}
.nav-auth .profile-pic {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
  margin-top: 0;
  margin-bottom: 0;
  display: block;
}
.nav-auth .user-menu {
  padding: 4px 8px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.nav-auth .user-menu:focus,
.nav-auth .user-menu:hover {
  border-color: #999;
}

/* Log out option */
.user-menu .logout-option {
  color: red;
}

/*Cart Icon */
.cart-icon a {
  position: relative;
  display: inline-block;
}

.cart-icon img {
  width: 28px;
  height: 28px;
}

.cart-icon .cart-count {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #DA0000; /* red background for visibility */
  color: white;
  border-radius: 50%;
  padding: 3px 7px;
  font-size: 12px;
}
.nav-auth .cart-icon {
  padding-left: 12px;
}

/* ========== HAMBURGER MENU (Mobile Only) ========== */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    position: relative;
}

.hamburger-menu span {
    width: 100%;
    height: 3px;
    background-color: var(--color-white);
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    transform-origin: center;
}

.hamburger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* ========== LOGO TEXT (Mobile Only) ========== */
.logo-text-mobile {
    display: none;
    text-decoration: none;
    color: var(--color-white);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: 2px;
    transition: color var(--transition-base);
}

.logo-text-mobile:hover {
    color: var(--color-primary);
}

/* ========== MOBILE HEADER STYLES ========== */
@media screen and (max-width: 640px) {
    .navbar {
        height: 60px !important;
        padding: 0 !important;
        padding-bottom: 0 !important;
        min-height: 60px !important;
        max-height: 60px !important;
        margin: 0 !important;
        margin-bottom: 0 !important;
        border: none !important;
        border-bottom: none !important;
        outline: none;
        box-sizing: border-box;
        overflow: hidden;
        line-height: 0;
    }

    .nav-container {
        padding: 0 var(--spacing-4);
        position: relative;
        height: 60px !important;
        max-height: 60px !important;
        min-height: 60px !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        line-height: 0;
    }
    
    /* Ensure all nav-container children fit within 60px */
    .nav-container > * {
        max-height: 60px !important;
        line-height: 1;
        vertical-align: middle;
    }

    /* Show hamburger menu - always visible on mobile */
    .hamburger-menu {
        display: flex !important;
        order: 1;
        flex-shrink: 0;
        min-width: 30px;
    }

    /* Hide logo image on mobile */
    .logo {
        display: none;
    }

    /* Show TITAN text link */
    .logo-text-mobile {
        display: block;
        order: 2;
        flex: 1;
        text-align: center;
        margin: 0 var(--spacing-2);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Hide nav links by default, show when active - remove from flex flow */
    .nav-links {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: auto !important;
        width: 60% !important;
        max-width: 300px !important;
        background-color: var(--color-gray-900);
        flex-direction: column !important;
        padding: var(--spacing-4) 0;
        gap: 0;
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        z-index: 1000;
        box-shadow: var(--shadow-lg);
        max-height: calc(100vh - 60px) !important;
        min-height: auto !important;
        height: auto !important;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        list-style: none !important;
    }

    .nav-links.active {
        transform: translateX(0) !important;
        display: flex !important;
    }
    
    /* Backdrop overlay when menu is open */
    .nav-backdrop {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
        pointer-events: auto;
    }
    
    .nav-backdrop.active {
        display: block;
    }


    .nav-links li {
        width: 100% !important;
        display: list-item !important;
        list-style: none !important;
        border-bottom: 1px solid var(--color-gray-800);
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nav-links li a {
        display: block !important;
        padding: var(--spacing-4) var(--spacing-6);
        font-size: var(--font-size-base);
        color: var(--color-white);
        transition: background-color var(--transition-base), color var(--transition-base);
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }

    .nav-links li a:hover {
        background-color: var(--color-gray-800);
        color: var(--color-primary);
        transform: none;
    }

    /* Nav auth section - right side */
    .nav-auth {
        order: 3;
        display: flex;
        align-items: center;
        gap: var(--spacing-1);
        flex-shrink: 0;
        min-width: 0;
        height: 60px !important;
        max-height: 60px !important;
        min-height: 60px !important;
        margin: 0;
        padding: 0;
        line-height: 1;
    }
    
    /* Ensure nav-auth children don't expand beyond 60px */
    .nav-auth > * {
        max-height: 60px !important;
        line-height: 1;
        vertical-align: middle;
    }

    /* Profile pic - smaller on mobile */
    .nav-auth .profile-pic {
        width: 32px;
        height: 32px;
        margin: 0;
        flex-shrink: 0;
        display: block;
        object-fit: cover;
    }

    /* User menu dropdown - smaller on mobile */
    .nav-auth .user-menu {
        font-size: var(--font-size-xs) !important;
        padding: 4px 20px 4px 6px !important; /* Add right padding for arrow */                                                                                                                                      
        max-width: 85px;
        min-width: 0;
        flex-shrink: 1;
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        height: 28px !important;
        max-height: 28px !important;
        min-height: 28px !important;
        line-height: 1 !important;
        border: 1px solid var(--color-gray-300);
        border-radius: var(--radius-sm);
        background: var(--color-white);
        box-sizing: border-box !important;
        vertical-align: middle;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        overflow: hidden;
        position: relative;
        top: 0;
        /* Add custom dropdown arrow - visible on mobile */
        background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201L6%206L11%201%22%20stroke%3D%22%23666%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E') !important;
        background-repeat: no-repeat !important;
        background-position: right 6px center !important;
        background-size: 10px 6px !important;
    }

    /* Login button - mobile optimized */
    .nav-auth .btn {
        font-size: var(--font-size-xs);
        padding: 6px 12px;
        margin: 0;
        height: auto;
        line-height: 1.2;
        white-space: nowrap;
    }

    /* Cart icon - smaller on mobile */
    .cart-icon {
        padding-left: 0;
        flex-shrink: 0;
    }

    .cart-icon img {
        width: 24px;
        height: 24px;
    }

    .cart-icon .cart-count {
        font-size: 10px;
        padding: 2px 6px;
        top: -8px;
        right: -8px;
    }

    /* Ensure nav-links don't affect layout */
    .nav-links {
        order: 999;
    }
}

/* ========== TABLET STYLES (641px - 1024px) ========== */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    .hamburger-menu {
        display: none;
    }

    .logo-text-mobile {
        display: none;
    }

    .nav-links {
        gap: var(--spacing-3);
    }

    .nav-links li a {
        font-size: var(--font-size-sm);
    }
}





/* Hero section */
.hero {
    margin-top: 70px;
    position: relative;
    width: 100%;
    height: calc(100vh - 70px);
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../Images/hero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 2; /* must be above the overlay */
    max-width: 800px;
    color: white;
    animation: fadeIn 1.2s ease-out forwards;
    opacity: 0;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero h3 {
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 2rem;
}

.cta-btn {
    background-color: #DA0000;
    color: white;
    padding: 14px 30px;
    border: none;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 4px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    display: inline-block;
}

.cta-btn:hover {
    background-color: #B60000;
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}






/* Modal Background */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
  }
  
  /* Modal Content Box */
  .modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  }
  
  /* Close Button */
  .close-btn {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #333;
  }
  
  /* Modal Buttons */
  .modal-options {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  
  .modal-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #DA0000;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin: 10px;
    transition: background-color 0.3s ease;
  }
  
  .modal-btn:hover {
    background-color: #a00000;
  }
  




/*Top_offer Section*/
.top_offer {
    text-align: center;
    padding: 50px 20px;
}

.top_offer h3 {
    font-size: 2rem;
    margin-bottom: 40px;
    text-transform: uppercase;
    color: white;
}

.offer-tile {
    display: inline-block;
    width: 30%;
    margin: 1%;
    vertical-align: top;
    cursor: pointer;
    background-color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;

    /* For equal height tiles */
    min-height: 350px;
    box-sizing: border-box;
}

.top_offer_tile {
    height: 100px;
}

.offer-tile img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
}

.offer-tile p {
    padding: 15px;
    font-size: 1rem;
    color: #333;
}

.offer-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

/* Responsive for mobile */
@media screen and (max-width: 768px) {
    .offer-tile {
        display: block;
        width: 100%;
        margin: 15px 0;
        min-height: auto; /* let height adjust naturally on smaller screens */
    }
}








/* Top Programs Section */
.top_programs_index {
    text-align: center;
    padding: 50px 20px;
}

.top_programs_index h3 {
    font-size: 2rem;
    margin-bottom: 40px;
    text-transform: uppercase;
    color: white;
}

.program-tile_combat_index, .program-tile_fitness_index {
    display: inline-block;
    width: 45%;
    margin: 2%;
    vertical-align: top;
    cursor: pointer;
    background-color: #fdfdfd;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    min-height: 320px;
    box-sizing: border-box;
}

.program-tile_combat_index img, .program-tile_fitness_index img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
}

.tile-details_combat_index, .tile-details_fitness_index {
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tile-details_combat_index h4, .tile-details_fitness_index h4 {
    font-size: 1.2rem;
    margin: 0 0 8px;
    color: #222;
    line-height: 1.2;
}

.tile-details_combat_index .short-description, .tile-details_fitness_index .short-description {
    font-size: 0.95rem;
    color: #333;
    margin: 0 0 8px;
    line-height: 1.3;
}

.tile-details_combat_index .program-info-row, .tile-details_fitness_index .program-info-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 12px 0 12px 0;
    width: 100%;
}

.tile-details_combat_index .category, .tile-details_fitness_index .category {
    text-transform: capitalize;
    font-weight: 500;
    color: #666;
    font-size: 0.95rem;
    margin: 0;
}

.tile-details_combat_index .program-status-index, .tile-details_fitness_index .program-status-index {
    font-weight: bold;
    font-size: 0.95rem;
    margin: 0;
}

.tile-details_combat_index .program-status-index.active, .tile-details_fitness_index .program-status-index.active {
    color: green;
}

.tile-details_combat_index .program-status-index.expired, .tile-details_fitness_index .program-status-index.expired {
    color: red;
}

.tile-details_combat_index .program-status-index.placeholder, .tile-details_fitness_index .program-status-index.placeholder {
    width: 0;
    margin: 0;
    padding: 0;
}

.tile-details_combat_index .program-info-right, .tile-details_fitness_index .program-info-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tile-details_combat_index .weeks-price, .tile-details_fitness_index .weeks-price {
    font-size: 0.95rem;
    color: #333;
    margin: 0;
}

.tile-details_combat_index .weeks-price.weeks-only, .tile-details_fitness_index .weeks-price.weeks-only {
    color: gray;
}

.tile-details_combat_index .price, .tile-details_fitness_index .price {
    font-weight: bold;
    color: #333;
}

.program-tile_combat_index:hover, .program-tile_fitness_index:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

@media screen and (max-width: 768px) {
    .program-tile_combat_index, .program-tile_fitness_index {
        display: block;
        width: 100%;
        margin: 15px 0;
        min-height: auto;
    }

    .tile-details_combat_index, .tile-details_fitness_index {
        padding: 15px;
    }

    .tile-details_combat_index .program-info-row, .tile-details_fitness_index .program-info-row {
        flex-direction: row;
        justify-content: center;
        gap: 16px;
    }
}








/* Featured Products Section - index.php Page*/
/* To use styles for shop.php */








/* YouTube Latest Section */
.youtube_latest {
    text-align: center;
    padding: 50px 20px;
}

.youtube_latest h3 {
    font-size: 2rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: white;
}

.youtube_latest h4 {
    font-size: 1rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: white;
}

/* Columns Layout */
.youtube-columns {
    display: flex;
    justify-content: center;
    gap: 5%;
    flex-wrap: wrap;
}

.youtube_latest_combat,
.youtube_latest_fitness {
    width: 45%;
    min-width: 300px;
}

/* Thumbnail Container */
.youtube-thumb {
    position: relative;
    cursor: pointer;
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    width: 100%;
    height: 250px;
}

.youtube-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Play Button */
.play-button-homepage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    background: url('https://img.icons8.com/ios-filled/100/ffffff/play--v1.png') no-repeat center center;
    background-size: 60%;
    transform: translate(-50%, -50%);
    background-color: rgba(0,0,0,0.6);
    border-radius: 50%;
}

/* Subscribe Button */
.subscribe-btn {
    display: inline-block;
    background-color: #DA0000;
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    margin-top: 10px;
    font-size: 1rem;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.subscribe-btn:hover {
    background-color: #B60000;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .youtube-columns {
        flex-direction: column;
        align-items: center;
    }

    .youtube_latest_combat,
    .youtube_latest_fitness {
        width: 100%;
        margin-bottom: 30px;
    }

    .youtube-thumb {
        height: 220px;
    }
}









/* Reviews Section */
.reviews {
    text-align: center;
    position: relative;
    margin: auto;
    width: 100%; /* full container */
    max-width: 1200px; /* optional max width */
}

.reviews h3 {
    font-size: 2rem;
    margin-bottom: 40px;
    text-transform: uppercase;
    color: white;
}

/* Carousel Wrapper */
.reviews-carousel-wrapper {
    overflow: hidden;
    width: 80%;            /* 80% width */
    margin: 0 auto;        /* center it */
    position: relative;
}

/* Carousel */
.reviews-carousel {
    display: flex;
    transition: transform 0.6s ease-in-out;
    gap: 20px; /* spacing between tiles */
    padding: 0 10px; /* optional container padding */
    box-sizing: border-box;
}

/* Review tile */
.review_tile {
    flex: 0 0 calc((100% - (20px * 2)) / 3); /* 3 tiles visible per view */
    background-color: white;
    padding: 20px 10px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    text-align: center;
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-top: 0.5%;
    margin-bottom: 0.5%;
}


.review_tile:hover {
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* Review Text */
.review_text {
    font-style: italic;
    font-size: 1rem;
    color: #444;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Profile */
.review_profile {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
    margin-top: 15px;
}

.user_pic {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #DA0000;
}

.user_info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.username {
    font-weight: bold;
    font-size: 1rem;
    margin: 0;
    color: #111;
}

/* Nav Buttons */
.carousel-controls {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
}

.reviews {
    position: relative; /* Ensure buttons are positioned relative to reviews container */
}

/* Scope carousel buttons to only reviews section to avoid conflicts */
.reviews .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    font-size: 2rem;
    color: white !important;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}
.reviews .carousel-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #DA0000 !important;
    opacity: 1;
}
.reviews .carousel-btn svg {
    stroke: white !important;
    fill: none;
    width: 24px;
    height: 24px;
}
.reviews .carousel-btn:hover svg {
    stroke: #DA0000 !important;
}
.reviews .carousel-btn.prev { left: 5%; }   /* sits outside 80% wrapper */
.reviews .carousel-btn.next { right: 5%; }

.reviews-carousel-wrapper {
    position: relative; /* ensures buttons are positioned inside wrapper */
}

.reviews-carousel {
    display: flex;
    transition: transform 0.6s ease-in-out; /* smooth sliding */
}

.cta-btn-reviews {
    background-color: #DA0000;
    color: white;
    padding: 14px 30px;
    border: none;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 4px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    display: inline-block;
}

.cta-btn-reviews:hover {
    background-color: #B60000;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}


/* Responsive */
/* Tablet: 2 tiles per view (641px - 1024px) */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    .review_tile {
        flex: 0 0 calc((100% - 20px) / 2); /* 2 tiles visible on tablet */
    }

    .reviews .carousel-btn.prev { left: 2%; }
    .reviews .carousel-btn.next { right: 2%; }
}

/* Mobile: 1 tile per view (<=640px) */
@media screen and (max-width: 640px) {
    .reviews-carousel-wrapper {
        width: 70%; /* Reduced width to leave space for navigation controls */
    }

    .review_tile {
        flex: 0 0 100%; /* 1 tile visible on mobile */
    }

    .reviews .carousel-btn.prev { left: 2%; /* Pushed further outwards, positioned outside wrapper */ }
    .reviews .carousel-btn.next { right: 2%; /* Pushed further outwards, positioned outside wrapper */ }
}

/* Stars */
.stars {
    margin: 10px 0;
}
.star {
    font-size: 1.2rem;
    color: #ccc;
}
.star.filled {
    color: #DA0000;
}

/* Uploaded Review Image */
.review_uploaded_image {
    margin-top: 15px;
    max-width: 100%;
    max-height: 180px;
    border-radius: 8px;
    object-fit: cover;
}

/* Review Image Placeholder - for reviews without uploaded images */
.review_image_placeholder {
    margin-top: 15px;
    max-width: 100%;
    max-height: 180px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border: 1px solid #e0e0e0;
    position: relative;
    overflow: hidden;
}

.review_image_placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.3) 10px,
        rgba(255, 255, 255, 0.3) 20px
    );
    opacity: 0.3;
}

.review_image_placeholder svg {
    width: 48px;
    height: 48px;
    opacity: 0.4;
    position: relative;
    z-index: 1;
}

.review_image_placeholder svg path {
    fill: #999;
    stroke: #999;
}

/* Review Modal */
.review-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.review-modal.active {
    display: flex;
}

.review-modal-content {
    background: #ffffff !important;
    border-radius: 12px;
    max-width: 600px;
    max-height: 80vh;
    width: 100%;
    position: relative;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.review-modal-close {
    position: absolute;
    top: 12px;
    right: 20px;
    font-size: 24px;
    color: #333 !important;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.review-modal-close:hover {
    background: #f0f0f0;
    color: #DA0000 !important;
}

.review-modal-title {
    font-size: 1.2rem;
    color: #1a1a1a !important;
    margin-bottom: 20px;
    font-weight: 600;
}

.review-modal-text {
    font-size: 1rem;
    color: #1a1a1a !important;
    line-height: 1.6;
    white-space: pre-wrap;
    max-height: 400px;
    overflow-y: auto;
    background: transparent !important;
}

/* Make review text clickable */
.review_text {
    cursor: pointer;
    transition: color 0.2s ease;
}

.review_text:hover {
    color: #DA0000;
}












/* ========== FOOTER LINE (Before and After Footer Columns) ========== */
.footer-line-container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-bottom-line {
    width: 100%;
    border: none;
    border-top: 1px solid #444;
    margin: 0;
}

/* ========== FOOTER CONTENT ========== */
.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 40px 20px;
    color: #eee;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.footer-column {
    flex: 1 1 30%;
    margin: 15px 10px;
}

.footer-column h4 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    color: #fff;
}

.footer-slogan {
    font-size: 1rem;
    margin-bottom: 20px;
    color: #ccc;
}

.social-icons a {
    display: inline-block;
    margin-right: 10px;
}

.social-icons img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
    transition: transform 0.2s ease;
}

.social-icons a:hover img {
    transform: scale(1.1);
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    text-decoration: none;
    color: #ccc;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #B60000;
}

/* ========== COPYRIGHT SECTION ========== */
.footer-bottom {
    color: #aaa;
    text-align: center;
    padding: 20px 10px;
    font-size: 0.9rem;
}

/* ========== RESPONSIVE DESIGN ========== */
@media screen and (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        width: 100vw !important; /* Force full viewport width */
        margin-left: calc(-50vw + 50%) !important; /* Center relative to viewport */
        box-sizing: border-box;
    }

    .footer-column {
        width: 100%;
        margin: 0 0 30px 0; /* Explicitly set margins: top 0, right 0, bottom 30px, left 0 */
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .footer-column h4 {
        text-align: center;
        width: 100%;
    }

    .footer-links {
        text-align: center;
        width: 100%;
    }

    .social-icons {
        justify-content: center;
    }

    .footer-bottom {
        padding: 20px 20px;
        text-align: center;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        box-sizing: border-box;
    }

    .newsletter-container form {
        flex-direction: column;
    }

    .newsletter-container input[type="email"] {
        width: 100%;
    }
}





/* Hero section - Combat */
.hero_combat {
    margin-top: 70px;
    position: relative;
    width: 100%;
    height: calc(100vh - 70px);
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../Images/combat/combat_hero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.hero_combat-content {
    position: relative;
    z-index: 2; /* must be above the overlay */
    max-width: 800px;
    color: white;
    animation: fadeIn 1.2s ease-out forwards;
    opacity: 0;
}

.hero_combat h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero_combat h3 {
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 2rem;
}







/* Combat Programs Section */
.combat_programs_section {
    text-align: center;
    padding: 50px 20px;
    width: 96%;
    margin: auto;
}

.combat_programs_section h3 {
    font-size: 2rem;
    margin-bottom: 40px;
    margin-top: 40px;
    text-transform: uppercase;
    color: white;
}

.combat-programs-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* center items horizontally */
    gap: 20px;
}

.combat-programs-program-tile {
    flex: 0 1 300px;   /* each tile has a max width ~300px, shrinks if needed */
    max-width: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.combat-programs-program-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.combat-programs-thumbnail {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 ratio */
    overflow: hidden;
}

.combat-programs-thumbnail img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
}

.combat-programs-program-tile:hover .combat-programs-thumbnail img {
    filter: brightness(70%);
}

.combat-programs-play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 30px;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    cursor: pointer;
}

.combat-programs-details {
    padding: 15px;
    display: flex;
    flex-direction: column;
}

.combat-programs-details h4 {
    font-size: 18px;
    font-weight: 600;
    min-height: 36px; /* Uniform height for titles */
}

.combat-programs-details p {
    min-height: 40px; /* Uniform height for descriptions */
}

.combat-programs-details .coming-soon {
    color: #888;              /* gray text */
    font-style: italic;       /* optional, makes it look distinct */
    font-weight: 500;
}

.combat-programs-details .short-description {
    font-size: 0.95rem;
    color: #333;
    margin: 0 0 8px;
    line-height: 1.3;
    min-height: 40px; /* Match existing min-height for descriptions */
}

.combat-programs-details .program-info-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 0 0 8px;
    width: 100%;
}

.combat-programs-details .category {
    text-transform: capitalize;
    font-weight: 500;
    color: #666;
    font-size: 0.95rem;
    margin: 0;
}

.combat-programs-details .program-status-combat {
    font-weight: bold;
    font-size: 0.95rem;
    margin: 0;
}

.combat-programs-details .program-status-combat.active {
    color: green;
}

.combat-programs-details .program-status-combat.expired {
    color: red;
}

.combat-programs-details .program-status-combat.placeholder {
    width: 0;
    margin: 0;
    padding: 0;
}

.combat-programs-details .program-info-right {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 8px;
}

.combat-programs-details .weeks-price {
    font-size: 0.95rem;
    color: #333;
    margin: 0;
}

.combat-programs-details .weeks-price.weeks-only {
    color: gray;
}

.combat-programs-details .price {
    font-weight: bold;
    color: #333;
}

.combat-programs-view-program-btn {
    margin-top: auto;
    width: 100%;
    padding: 10px;
    background-color: #DA0000; /* Your theme red */
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.combat-programs-view-program-btn:hover {
    background-color: #b30000;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .combat-programs-details h4 {
        font-size: 16px;
    }
}





/* Modal Styles */
.video-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
}

.video-modal.show {
  display: flex;
}

.video-modal-content {
  position: relative;
  width: 75vw; /* 3/4 of window width */
  height: 75vh; /* 3/4 of window height */
}

.video-modal-content iframe {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.video-modal-close {
  position: absolute;
  top: -30px;
  right: -30px;
  font-size: 40px;
  color: white;
  cursor: pointer;
}








/*Latest from YouTube - Combat*/
.youtube-latest-combat {
    text-align: center;
    padding: 60px 20px;
    color: white;
}

.youtube-latest-combat h3 {
    font-size: 2rem;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.youtube-tiles {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Side by side layout for desktop and tablet - YouTube thumbs in combat/fitness */
.youtube-tiles .youtube-thumb {
    flex: 1 1 calc(50% - 10px); /* Two items side by side with gap */
    max-width: 500px;
    min-width: 300px;
}

.youtube-tile {
    flex: 1 1 45%;
    max-width: 500px;
    height: 280px;
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
}

.youtube-tile img,
.youtube-tile iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.youtube-subscribe {
    margin-top: 30px;
}

.combat-subscribe-btn {
    display: inline-block;
    background-color: #DA0000;
    color: white;
    padding: 12px 25px;
    font-weight: bold;
    border: none;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.combat-subscribe-btn:hover {
    background-color: #b80000;
}

@media screen and (max-width: 768px) {
    .youtube-tiles {
        flex-direction: column;
        align-items: center;
    }
    
    /* Add border radius on mobile for YouTube thumbs */
    .youtube-tiles .youtube-thumb {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        border-radius: 12px !important; /* Professional border radius on mobile */
    }

    .youtube-tile {
        flex: 1 1 100%;
    }
}







/* Hero section - fitness */
.hero_fitness {
    margin-top: 70px;
    position: relative;
    width: 100%;
    height: calc(100vh - 70px);
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../Images/fitness/fitness_hero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.hero_fitness-content {
    position: relative;
    z-index: 2; /* must be above the overlay */
    max-width: 800px;
    color: white;
    animation: fadeIn 1.2s ease-out forwards;
    opacity: 0;
}

.hero_fitness h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero_fitness h3 {
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 2rem;
}





/* fitness Programs Section */
.fitness_programs_section {
    text-align: center;
    padding: 50px 20px;
}

.fitness_programs_section h3 {
    font-size: 2rem;
    margin-bottom: 40px;
    text-transform: uppercase;
    color: white;
}

/* Tile Container */
.program-tile_fitness {
    display: inline-block;
    width: 30%;
    margin: 1.5%;
    vertical-align: top;
    cursor: pointer;
    background-color: #fdfdfd;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    min-height: 370px;
    box-sizing: border-box;
}

.program-tile_fitness img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
}

.tile-details_fitness {
    padding: 15px;
}

.tile-details_fitness h4 {
    font-size: 1.2rem;
    margin: 10px 0 5px;
    color: #222;
}

.tile-details_fitness p {
    font-size: 0.95rem;
    color: #444;
    margin: 5px 0;
}

.program-tile_fitness:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.cta-fitness-wrapper {
    margin-top: 40px;
    text-align: center;
}

.cta-fitness-btn {
    background-color: #DA0000;
    color: white;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.cta-fitness-btn:hover {
    background-color: #a00000;
}


/* Responsive Design */
@media screen and (max-width: 768px) {
    .program-tile_fitness {
        display: block;
        width: 100%;
        margin: 15px 0;
        min-height: auto;
    }
}







/*Latest from YouTube - fitness*/
.youtube-latest-fitness {
    text-align: center;
    padding: 60px 20px;
    background-color: #111;
    color: white;
}

.youtube-latest-fitness h3 {
    font-size: 2rem;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.youtube-tiles {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Side by side layout for desktop and tablet - YouTube thumbs in combat/fitness */
.youtube-tiles .youtube-thumb {
    flex: 1 1 calc(50% - 10px); /* Two items side by side with gap */
    max-width: 500px;
    min-width: 300px;
}

.youtube-tile {
    flex: 1 1 45%;
    max-width: 500px;
    height: 280px;
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
}

.youtube-tile img,
.youtube-tile iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.youtube-subscribe {
    margin-top: 30px;
}

.fitness-subscribe-btn {
    display: inline-block;
    background-color: #DA0000;
    color: white;
    padding: 12px 25px;
    font-weight: bold;
    border: none;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.fitness-subscribe-btn:hover {
    background-color: #b80000;
}

@media screen and (max-width: 768px) {
    .youtube-tiles {
        flex-direction: column;
        align-items: center;
    }
    
    /* Add border radius on mobile for YouTube thumbs */
    .youtube-tiles .youtube-thumb {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        border-radius: 12px !important; /* Professional border radius on mobile */
    }

    .youtube-tile {
        flex: 1 1 100%;
    }
}








/*Shop Page*/
/* Hero Shop Section */
.hero_shop {
    margin-top: 70px;
    width: 100vw;
    height: calc(100vh - 70px);
    background-image: url('../Images/merch/shop_hero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hero_shop::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* dark overlay */
    z-index: 1;
}

.hero_shop-content {
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 2;
    padding: 20px;
    animation: fadeIn 1.5s ease-in-out;
}

.hero_shop-content h1 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.hero_shop-content h3 {
    font-size: 1.5rem;
    margin-bottom: 30px;
}

.hero_shop .cta-btn {
    background-color: #DA0000;
    color: white;
    padding: 14px 30px;
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 6px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    display: inline-block;
}

.hero_shop .cta-btn:hover {
    background-color: #b80000;
    transform: scale(1.05);
}


@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}










/* Featured Products Section */
.featured_products_section {
    padding: 50px 20px;
    text-align: center;
}

.featured_products_section h3 {
    font-size: 2rem;
    margin-bottom: 40px;
    text-transform: uppercase;
    color: white;
}

.featured_products_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.featured_products_grid a{
    text-decoration: none;
}

.product-tile_shop {
  position: relative;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;         /* Restore for border-radius */
    width: 28%;
    min-width: 200px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    text-align: center;
}

.product-tile_shop img {
    width: 100%;
    height: 570px;
    aspect-ratio: 2 / 3;     /* Portrait 2:3 aspect ratio */
    object-fit: cover;
}

.product-tile_shop:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

.product-details_shop {
    padding: 15px;
    padding-top: 60px;        /* Always reserve space for cart addition overlay */
}

.product-details_shop h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #222;
    /* Allow product name to display in full - wrap to multiple lines if needed */
    white-space: normal;
    overflow: visible;
    word-wrap: break-word;
    line-height: 1.4;
}

.product-details_shop p {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 10px;
}

.product-price_shop {
    font-size: 1rem;
    color: #333;
    font-weight: bold;
}

.view-product-btn {
    display: inline-block;
    margin-bottom: 16px;
    background-color: #DA0000;
    color: white;
    padding: 8px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
}
.view-product-btn:hover {
    background-color: #b30000;
}


/* View All Button */
.view-all-btn-container_shop {
    margin-top: 30px;
}

.view-all-btn_shop {
    display: inline-block;
    background-color: #DA0000;
    color: white;
    padding: 10px 30px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.view-all-btn_shop:hover {
    background-color: #b30000;
}

/* Variant Slideshow */
.variant-slideshow_shop {
    position: relative;
    width: 100%;
    height: 570px;      /* Remove fixed height to let aspect-ratio control it */
    aspect-ratio: 2 / 3;     /* Portrait 2:3 aspect ratio */
    overflow: visible;        /* Allow overlay to extend below image */
    background-color: #eee;
}

.variant-image {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.variant-image.active {
    display: block;
}

.slideshow-nav-shop {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 4px;
    z-index: 2; /* 👈 make sure buttons are above images */
    transition: opacity 0.3s ease, color 0.3s ease, background 0.3s ease;
}

/* Hide prev/next buttons until hover */
.product-tile_shop .slideshow-nav-shop {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Show on hover */
.product-tile_shop:hover .slideshow-nav-shop {
    opacity: 1;
    pointer-events: auto;
}

/* White by default, red on hover */
.slideshow-nav-shop {
    color: #fff;
    transition: color 0.2s ease, background 0.2s ease;
}
.slideshow-nav-shop:hover {
    color: #DA0000;
    background: rgba(255,255,255,0.9);
}

.slideshow-nav-shop.prev { left: 8px; }
.slideshow-nav-shop.next { right: 8px; }

/* Responsive */
/* Tablet: 641px - 1024px - controls always visible */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    .product-tile_shop {
        width: calc(50% - 10px); /* 2 products per row on tablet */
        overflow: visible !important; /* Allow overlay to be visible */
    }
    
    /* Make controls visible by default on tablet - override all hover rules */
    .product-tile_shop .slideshow-nav-shop,
    .product-tile_shop:hover .slideshow-nav-shop {
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
        display: block !important;
    }
    
    /* Make navigation buttons smaller and more subtle on tablet - use more specific selector */
    .product-tile_shop .slideshow-nav-shop,
    .variant-slideshow_shop .slideshow-nav-shop,
    .slideshow-nav-shop {
        padding: 2px 4px !important;
        font-size: 11px !important;
        background: rgba(0, 0, 0, 0.35) !important;
        border-radius: 3px !important;
        min-width: auto !important;
        min-height: auto !important;
    }
    
    .product-tile_shop .slideshow-nav-shop:hover,
    .variant-slideshow_shop .slideshow-nav-shop:hover,
    .slideshow-nav-shop:hover {
        background: rgba(0, 0, 0, 0.55) !important;
        color: #fff !important;
    }
    
    .product-tile_shop .slideshow-nav-shop.prev,
    .variant-slideshow_shop .slideshow-nav-shop.prev,
    .slideshow-nav-shop.prev { left: 3px !important; }
    .product-tile_shop .slideshow-nav-shop.next,
    .variant-slideshow_shop .slideshow-nav-shop.next,
    .slideshow-nav-shop.next { right: 3px !important; }
    
    .product-tile_shop .add-to-cart-overlay,
    .product-tile_shop:hover .add-to-cart-overlay {
        display: flex !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }
    
    /* Ensure variant slideshow container allows overflow */
    .variant-slideshow_shop {
        overflow: visible !important;
    }
    
    /* Ensure aspect ratio remains 2:3 on tablet - remove fixed height */
    .product-tile_shop img {
        height: auto;
        aspect-ratio: 2 / 3;
    }
    
    .variant-slideshow_shop {
        height: auto;
        aspect-ratio: 2 / 3;
        overflow: visible; /* Allow overlay to extend below */
    }
}

@media screen and (max-width: 640px) {
    .product-tile_shop {
        width: calc(50% - 10px); /* 2 products per row on mobile */
        min-width: 0; /* Remove min-width constraint to allow 2 per row */
        flex: 0 0 calc(50% - 10px); /* Ensure flexbox respects the width */
        max-width: calc(50% - 10px); /* Prevent items from growing beyond 50% */
        box-sizing: border-box; /* Include padding/border in width calculation */
        overflow: hidden !important; /* Maintain border-radius clipping */
        border-radius: 8px !important; /* Ensure border-radius is applied */
    }
    
    /* Make controls visible by default on mobile (no hover needed) */
    .product-tile_shop .slideshow-nav-shop {
        opacity: 1;
        pointer-events: auto;
    }
    
    .product-tile_shop .add-to-cart-overlay {
        display: flex;
        opacity: 1;
        pointer-events: auto;
    }
    
    /* Make navigation buttons smaller and more subtle on mobile */
    .slideshow-nav-shop {
        padding: 5px 8px !important;
        font-size: 15px !important;
        background: rgba(0, 0, 0, 0.35) !important;
        border-radius: 3px !important;
    }
    
    .slideshow-nav-shop:hover {
        background: rgba(0, 0, 0, 0.55) !important;
        color: #fff !important;
    }
    
    .slideshow-nav-shop.prev { left: 3px !important; }
    .slideshow-nav-shop.next { right: 3px !important; }
    
    /* Ensure aspect ratio remains 2:3 on mobile - remove fixed height */
    .product-tile_shop img {
        height: auto;
        aspect-ratio: 2 / 3;
        border-radius: 8px 8px 0 0 !important; /* Round top corners to match tile */
    }
    
    .variant-slideshow_shop {
        height: auto;
        aspect-ratio: 2 / 3;
        overflow: hidden !important; /* Clip images to border-radius */
        border-radius: 8px 8px 0 0 !important; /* Round top corners to match tile */
    }
    
    /* Ensure images inside slideshow have rounded top corners */
    .variant-slideshow_shop img,
    .variant-slideshow_shop .variant-image {
        border-radius: 8px 8px 0 0 !important;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Ensure overlay is visible even with overflow hidden on slideshow */
    .variant-slideshow_shop .add-to-cart-overlay {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 10;
    }
    
    /* Reduce Coming Soon message size to fit on one line and match size selector/add button strips */
    .coming-soon-message {
        font-size: 11px !important;
        padding: 6px 8px !important;
        letter-spacing: 0.3px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.2 !important;
    }
    
    /* Ensure overlay fits within tile boundaries on mobile */
    .variant-slideshow_shop .add-to-cart-overlay {
        padding: 6px 4px !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Resize size selector to fit within tile on mobile */
    .size-selector {
        gap: 3px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Resize size buttons to fit within tile on mobile */
    .size-btn {
        padding: 4px 6px !important;
        font-size: 11px !important;
        min-width: 28px !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
    }
    
    /* Resize add button to fit within tile on mobile */
    .add-btn {
        padding: 5px 10px !important;
        font-size: 12px !important;
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }
}








/* Product Container */
.product-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  padding: 40px 20px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
  margin-top: 70px;
  color: white;
}

/* Product Images */
.product-images {
  position:relative;
  flex: 1 1 200px;
  max-width: 550px;           /* Increased to accommodate larger 350px image with buttons */
  overflow: visible;           /* Ensure buttons aren't clipped */
}

.product-image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;                  /* Large gap to ensure buttons are clearly outside image */
  width: 100%;
  overflow: visible;           /* Ensure buttons aren't clipped */
}

.main-product-image {
  width: 350px;               /* Match event poster width */
  height: 525px;              /* Match event poster height (2:3 ratio: 350*3/2 = 525) */
  aspect-ratio: 2 / 3;        /* Portrait 2:3 aspect ratio */
  object-fit: cover;          /* Ensure images fill the space properly */
  border-radius: 8px;
  display: block;
  flex-shrink: 0;             /* Prevent image from shrinking */
  margin: 0;                  /* Remove auto margin since we're using flexbox */
}

.product-thumbnails {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

.product-thumbnails img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.product-thumbnails img:hover {
  transform: scale(1.1);
}

.nav-btn {
  position: relative;
  background: transparent;    /* No background */
  color:#fff;
  border:none;
  font-size:2.5rem;
  padding:0;
  cursor:pointer;
  border-radius: 0;
  opacity:0.8;
  transition: color 0.2s ease, opacity 0.3s ease;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: auto;
  width: auto;
  height: auto;
  flex-shrink: 0;             /* Prevent buttons from shrinking */
  margin: 0;                  /* Remove any default margins */
}

.nav-btn:hover {
  opacity:1;
  color: #DA0000;             /* Red color on hover, matching shop.php */
  background: transparent;     /* No background on hover */
}

.product-images:hover .nav-btn {
  opacity:1;
}

.nav-btn.prev {
  order: -1;  /* Place before image */
}

.nav-btn.next {
  order: 1;   /* Place after image */
}

.product-thumbnails img.active {
  border:2px solid #DA0000;
}

.size-box.active {
  background:#DA0000;
  color:#fff;
}

/* Product Details */
.product-details {
  flex: 1 1 300px;
  max-width: 500px;
  display: flex;             /* Make it a flex container */
  flex-direction: column;    /* Stack children vertically */
  align-items: center;       /* Center children horizontally */
  text-align: center;
}

.product-details h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.product-price {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

/* Size Selection */
.product-size p {
  margin-bottom: 5px;
  font-weight: bold;
}

.size-options {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.size-box {
  border: 1px solid #ccc;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.3s ease, color 0.3s ease;
}

.size-box:hover {
  background: #DA0000;
  color: white;
}

/* Quantity Selector */
.product-quantity p {
  margin-bottom: 5px;
  font-weight: bold;
}

.quantity-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.qty-input {
  width: 70px;
  text-align: center;
  padding: 5px;
}

.qty-btn-product {
  background: #f0f0f0;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 4px;
}

.qty-btn-product:hover {
  background: #ddd;
}

/* Add to Cart Button */
.add-to-cart-btn-product {
  width: 100%;
  background: #DA0000;
  color: white;
  padding: 12px;
  font-size: 1.1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.add-to-cart-btn-product:hover {
  background: #b30000;
}

/* Disabled Add to Cart button styling */
.add-to-cart-btn-product[disabled] {
  cursor: not-allowed;
  background: grey;
  opacity: 0.5;
  position: relative;
}

/* Hover tooltip for size selection message */
.add-to-cart-btn-product[disabled][data-hover-message]:hover::after {
  content: attr(data-hover-message);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  margin-bottom: 8px;
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  animation: fadeInTooltip 0.3s forwards;
}

@keyframes fadeInTooltip {
  to { opacity: 1; }
}

/* Product Description */
.product-description {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
  color: white;
}

.product-description h3 {
  margin-bottom: 10px;
  font-size: 1.5rem;
}













/*===================================================================================================*/

/* Recommended Section */
.recommended-section {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: center;
  color: white;
}

.recommended-section h3 {
  margin-bottom: 30px;
  font-size: 1.8rem;
}

.recommended-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.recommended-tile-link { 
  text-decoration: none; 
  color: inherit;
  display: flex;
  flex: 0 0 calc(33.33% - 14px); /* Match tile sizing - 3 products per row on desktop/tablet */
  min-width: 0;
  max-width: calc(33.33% - 14px);
  box-sizing: border-box;
}

.recommended-tile {
  position: relative;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  width: 100%; /* Take full width of parent link */
  min-width: 0;
  box-sizing: border-box;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.recommended-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

.recommended-tile img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3; /* Uniform portrait aspect ratio */
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.recommended-tile .tile-details {
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.recommended-tile h4 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #222;
  white-space: normal;
  overflow: visible;
  word-wrap: break-word;
  line-height: 1.4;
}

.recommended-tile p {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 10px;
}

.recommended-tile .tile-details p:last-child {
  font-size: 1rem;
  color: #333;
  font-weight: bold;
}

/* Responsive Adjustments for Recommended Section */
@media screen and (min-width: 641px) and (max-width: 1024px) {
  .recommended-tile-link {
    flex: 0 0 calc(33.33% - 14px); /* 3 products per row on tablet */
    min-width: 0;
    max-width: calc(33.33% - 14px);
    box-sizing: border-box;
  }
}

@media screen and (max-width: 640px) {
  .recommended-tile-link {
    flex: 0 0 calc(50% - 10px); /* 2 products per row on mobile */
    min-width: 0;
    max-width: calc(50% - 10px);
    box-sizing: border-box;
  }
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
  .product-container {
    flex-direction: column;
    align-items: center;
    margin-top: 0 !important; /* Remove top margin on tablet/mobile */
    padding-top: 20px !important; /* Professional spacing inside maincontainer */
  }

  .product-images {
    max-width: 100%;           /* Full width on mobile */
    padding: 0;                /* Remove padding, let wrapper handle it */
  }

  .product-image-wrapper {
    gap: 0;                    /* Remove gap, use margins on buttons instead */
    width: 100%;
    justify-content: space-between; /* Push buttons to edges */
    padding: 0 10px;           /* Minimal padding */
  }

  .main-product-image {
    width: 250px;              /* Slightly smaller on mobile */
    height: 375px;             /* Maintains 2:3 ratio (250/375 = 2/3) */
    flex-shrink: 0;            /* Prevent image from shrinking */
    margin: 0 auto;            /* Center the image */
  }

  .nav-btn {
    font-size: 2rem;           /* Slightly smaller icons on mobile */
    flex-shrink: 0;            /* Prevent buttons from shrinking */
    margin: 0 -50px;          /* Increased negative margins to push buttons further outside */
  }

  .nav-btn.prev {
    margin-right: -50px;      /* Push left button further left */
  }

  .nav-btn.next {
    margin-left: -50px;        /* Push right button further right */
  }

  .size-options {
    justify-content: center;
  }

  .quantity-selector {
    justify-content: center;
  }

  .add-to-cart-btn-product {
    max-width: 300px;
  }
}






/* Login Page Styles */

.login-container {
  max-width: 400px;
  margin: 120px auto; /* pushes below navbar */
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  text-align: center;
}

.login-container h2 {
  margin-bottom: 20px;
  color: #333;
}

.login-form input[type="text"],
.login-form input[type="password"] {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.login-form button {
  width: 100%;
  padding: 12px;
  background-color: #DA0000;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.login-form button:hover {
  background-color: #a80000;
}

.login-links {
  margin-top: 15px;
}

.login-links p {
  margin: 5px 0;
}

.login-links a {
  color: #DA0000;
  text-decoration: none;
}

.login-links a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 500px) {
  .login-container {
    margin: 50px 20px;
    padding: 15px;
  }
}


.error-msg {
    background-color: #d4edda;
    color: #DA0000;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    text-align: center;
}


/* Password visibility toggle */
.password-field {
  position: relative;
}

.password-field input[type="password"],
.password-field input[type="text"] {
  width: 100%;
  padding-right: 40px; /* space for icon */
}

.toggle-password {
  position: absolute;
  right: 10px;
  top: 35%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
}







/* Registration form container */
.register-container {
  max-width: 400px;
  margin: 80px auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

.register-container h2 {
  text-align: center;
  margin-bottom: 20px;
}

.register-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="password"],
.register-form input[type="tel"],
.register-form input[type="file"],
.register-form select {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  box-sizing: border-box;
}

.phone-field {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-bottom: 15px;
  box-sizing: border-box;
}

.phone-code-input {
  width: 25%;
  max-width: 90px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  box-sizing: border-box;
}

#phone_number {
  width: 75%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  box-sizing: border-box;
}

#phone_number:disabled {
  background-color: #e0e0e0;
  cursor: not-allowed;
}

.register-form button {
  width: 100%;
  padding: 10px;
  background: #DA0000;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.register-form button:hover {
  background: #a80000;
}

.password-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.password-field input[type="password"],
.password-field input[type="text"] {
  width: 100%;
  padding: 10px 40px 10px 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  box-sizing: border-box;
}

.toggle-password {
  position: absolute;
  right: 10px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: #666;
}

.password-note {
  font-size: 12px;
  color: grey;
  margin-top: -10px;
  margin-bottom: 10px;
}

.image-note {
  font-size: 12px;
  color: grey;
  margin-top: 4px;
  margin-bottom: 10px;
}

.profile-picture-field label {
  display: block;
  margin-bottom: 5px;
}

.profile-picture-field input[type="file"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  box-sizing: border-box;
}

.login-links {
  text-align: center;
  margin-top: 20px;
}

.login-links a {
  color: #DA0000;
  text-decoration: none;
}

.login-links a:hover {
  text-decoration: underline;
}

.username-field, .email-field {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.username-feedback, .email-feedback {
  font-size: 12px;
  margin-top: -10px;
  margin-bottom: 10px;
  font-family: 'Inter', sans-serif;
}

.username-suggestions {
  list-style: none;
  padding: 0;
  margin: 0 0 15px 0;
  width: 100%;
  max-width: 400px;
}

.suggestion-item {
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 5px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #333;
}

.suggestion-item:hover {
  background: #f0f0f0;
}







/* Email Verification Form */
.emailuserverify {
  max-width: 400px;
  background: #f9f9f9;
  margin: 120px auto; /* pushes below navbar */
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

.emailverify-instructions, .emailverify-note {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px;
}

.emailuserverifyform form input[type="text"] {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.emailuserverifyform form input[type="text"]:focus {
  border-color: #555;
  outline: none;
}

/* Button styling consistent with your theme */
.emailuserverifyform form button {
  width: 100%;
  padding: 12px;
  background-color: #DA0000;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.emailuserverifyform form button:hover {
  background-color: #a80000;
}





/* Forgot Password Page Styles */

/* Forgot Password container */
.forgot-password {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 10px;
    padding: 30px 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin: 108px auto; /* pushes below navbar */
}

/* Heading */
.forgot-password h2 {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 25px;
}

/* Message alert */
.forgot-password .message {
    background: #fdecea;
    color: #c0392b;
    border-left: 4px solid #c0392b;
    padding: 12px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    border-radius: 4px;
}

/* Paragraph styling */
.forgot-password p {
    font-size: 0.95rem;
    color: #444;
    margin-bottom: 15px;
    line-height: 1.4;
}

.forgot-password p b {
    color: #c0392b;
}

/* Form styling */
.forgot-password form {
    display: flex;
    flex-direction: column;
}

.forgot-password input[type="email"],
.forgot-password input[type="text"] {
    padding: 12px 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 20px;
    outline: none;
    transition: border 0.3s ease;
}

.forgot-password input[type="email"]:focus,
.forgot-password input[type="text"]:focus {
    border-color: #c0392b;
}

/* Submit button */
.forgot-password button {
    padding: 12px;
    background-color: #DA0000;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.forgot-password button:hover {
    background-color: #a80000;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .forgot-password {
        padding: 20px 15px;
    }

    .forgot-password h2 {
        font-size: 20px;
    }
}






/* Reset Password Page */
.reset-password-container {
    background: #fff;
    max-width: 400px;
    margin: 120px auto; /* pushes below navbar */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    text-align: center;
}

.reset-password-container h2 {
    margin-bottom: 20px;
    font-weight: 600;
}

.reset-password-container input[type="password"] {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.reset-password-container button {
    width: 100%;
    padding: 12px;
    background: #DA0000;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}

.reset-password-container button:hover {
    background: #a80000;
}

.reset-password-container .message {
    color: red;
    margin: 10px 0;
    font-weight: 500;
    margin-top: -10px;
    margin-bottom: 10px;
}

.reset-password-container .password-reset-note {
    font-size: 0.9em;
    color: red;
    margin-bottom: 10px;
    text-align: left;
    margin-top: -10px;
    margin-bottom: 10px;
}

.reset-password-field {
    position: relative;
}

.reset-password-field input[type="password"],
.reset-password-field input[type="text"] {
    width: 100%;
    padding: 12px 40px 12px 10px; /* left, top/bottom, right padding */
    box-sizing: border-box;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top: 0px;
    margin-bottom: 12px;
}

.toggle-icon {
    position: absolute;
    right: 10px;
    top: 35%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    user-select: none;
}








/*View Combat Program Section*/
.view-combat-program-container {
  max-width: 1200px;
  margin: auto;
  padding: 20px;
  margin-top: 70px;
  color: white;
}

.program-video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 8px;
  overflow: hidden;
}

/* Program Top Section */
.program-top-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Video Section */
.program-video-section {
  flex: 1 1 600px;
  position: relative;
  max-width: 600px;   /* 🔹 limit how wide the video/thumbnail can be */
}

.program-thumbnail-container,
.program-video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.program-video-player {
  display: none; /* hidden until play */
}


.program-thumbnail-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 🔹 fills the box without stretching */
  border-radius: 8px;
  transition: filter 0.3s ease;
}

.play-button-view-combat-program {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  color: white;
  background: rgba(0,0,0,0.5);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 10px 20px;
  transition: background 0.3s ease, filter 0.3s ease;
}

.play-button-view-combat-program:hover {
  background: rgba(0,0,0,0.7);
}

.program-video-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

/* Program Info Section */
.program-info-section {
  flex: 1 1 400px;
  display: block;
  padding-top: 20px;
}

.program-info-inner {
  text-align: center;
}

.program-price {
  font-size: 20px;
  margin: 10px 0;
}

.add-to-cart-btn {
  width: 100%;
  background: #DA0000; /* Your theme red */
  color: white;
  border: none;
  padding: 12px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}

.add-to-cart-btn:hover {
  background: #a30000;
}

/* Program Details Section */
.program-details-section {
  margin-top: 40px;
}

.program-details-section h2 {
  margin-bottom: 10px;
  text-align: left;
}

.program-details-section p {
  margin-bottom: 10px;
  text-align: left;
}

/* Fix big gap below video on small screens */
@media (max-width: 768px) {
  .program-top-section {
    flex-direction: column;
    align-items: center;
  }

  .program-video-section {
    max-width: 100%;
  }

  .program-video-wrapper {
    padding-top: 0;    /* 🔹 remove the fake aspect-ratio padding */
    height: auto;      /* 🔹 let the content define height */
  }

  .program-thumbnail-container,
  .program-video-player {
    position: relative !important; /* 🔹 reset absolute */
    width: 100% !important;
    height: auto !important;
  }

  .program-thumbnail-container img,
  .program-video-player iframe {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    display: block;   /* 🔹 removes inline gap below images */
  }
}










/* Life Transformations Section */
.life-transformations-section {
  margin-top: 40px;
}

.life-transformations-section h2 {
  margin-bottom: 10px;
  text-align: center;
}

/* Transformations Gallery */
.transformations-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
  gap: 10px;
}

.transformations-gallery img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.transformations-gallery img:hover {
  box-shadow: 0 0 10px 2px red; /* Increased spread and glow size */
  transition: box-shadow 0.3s ease;
}


/* Ensure no size change on hover */
.transformations-gallery img {
  display: block;
}

/* More Transformations Button */
.more-transformations-btn-wrapper {
  margin-top: 20px;
  text-align: center;
}

.more-transformations-btn {
  display: inline-block;
  background: #DA0000;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
}

.more-transformations-btn:hover {
  background: #a30000;
}

/* Modal Slideshow */
/*
.reviews-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 60px;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

.reviews-modal-content {
  margin: auto;
  display: block;
  max-width: 80%;
  max-height: 80vh; /* Limits image height to 80% of viewport height */
  /*
  object-fit: contain; /* Ensures the image scales without cropping */
  /*
}
*/


.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  color: white;
  font-size: 40px;
  padding: 16px;
  user-select: none;
  transform: translateY(-50%);
}

.prev { left: 0; }
.next { right: 0; }

@media (max-width: 768px) {
  .program-top-section {
    flex-direction: column;
  }
  .program-info-section {
    padding-top: 10px;
  }
}






/* Cart Page Layout */
.cart-page {
  max-width: 1200px;
  margin: 70px auto 40px auto;
  padding: 20px;
  color: white;
}

.cart-page h2 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: 600;
}

.cart-content {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

/* Items Section */
.cart-items {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: #1c1c1c;
  border-radius: 12px;
  padding: 15px;
  gap: 20px;
}

.cart-item-thumbnail img {
  width: 100px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
}

.cart-item-details {
  flex: 1;
}

.cart-item-details h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #fff;
}

.cart-item-desc {
  font-size: 14px;
  color: #ccc;
  margin-bottom: 5px;
}

.cart-item-type {
  font-size: 13px;
  color: #aaa;
}

.cart-item-meta {
  text-align: right;
  min-width: 120px;
}

.cart-item-price {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px;
}

.cart-quantity {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.qty-btn-cart-minus,.qty-btn-cart-plus  {
  background: #444;
  color: #fff;
  border: none;
  padding: 5px 10px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}

.qty-btn-cart-minus{
  margin-right: 4px;
}

.qty-btn-cart-plus{
  margin-left: 4px;
}

.qty-btn-cart-minus:hover,.qty-btn-cart-plus:hover {
  background: #666;
}

.remove-btn {
  background: #DA0000;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.remove-btn:hover {
  background: #a30000;
}

/* Summary Section */
.cart-summary {
  flex: 1;
  background: #2a2a2a;
  padding: 20px;
  border-radius: 12px;
  height: fit-content;
}

.coupon-form {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.coupon-form input {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 6px;
}

.coupon-form .apply-btn {
  background: #444;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
}

.coupon-form .apply-btn:hover {
  background: #666;
}

.coupon-success {
  color: #4CAF50;
  font-size: 14px;
  margin-bottom: 10px;
}

.coupon-error {
  color: #DA0000;
  font-size: 14px;
  margin-bottom: 10px;
}

.summary-subtotal {
  margin: 20px 0;
}

.summary-subtotal h3 {
  font-size: 20px;
  margin: 0;
}

.checkout-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px;
  background: #DA0000;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}

.checkout-btn:hover {
  background: #a30000;
}

.empty-cart {
  text-align: center;
  font-size: 18px;
  margin-top: 40px;
  color: #ccc;
}

/* Responsive */
@media (max-width: 768px) {
  .cart-content {
    flex-direction: column;
  }
  .cart-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .cart-item-meta {
    text-align: left;
    margin-top: 10px;
  }
}










/* Main Shop Page */
/* Filter/Search Bar */
/* Wrapper to maintain space in document flow */
.shop-filter-bar-wrapper, .event-filter-bar-wrapper {
  position: relative;
  width: 100%;
  min-height: 60px;           /* Maintain space when bar becomes fixed */
  /* Height matches the search bar height to prevent layout shift */
}

.shop-filter-bar, .event-filter-bar {
  position: sticky;
  top: 70px; /* stays below nav initially */
  background: #111;
  padding: 10px 15px;
  z-index: 100;
  transition: transform 0.3s ease, opacity 0.3s ease;
  width: 100%;
}

/* When scrolling up, make it fixed below the navbar */
.shop-filter-bar.scroll-up, .event-filter-bar.scroll-up {
  position: fixed;
  top: 70px;                  /* Position below the 70px navbar */
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999;               /* Below navbar (1000) but above content */
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  transform: translateY(0);   /* Ensure it's visible */
}

.shop-filter-bar.hide, .event-filter-bar.hide {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;        /* Disable interactions when hidden */
}
.shop-filter-form, .event-filter-form {
  display: flex;
  gap: 10px;
  max-width: 1000px;   /* wider */
  margin: auto;
  justify-content: center; /* center align */
}
.search-wrapper {
  position: relative;
  flex: 1;
}

.shop-search-input, .event-search-input {
  width: 100%;
  padding: 10px 40px 10px 12px; /* extra right padding for X */
  border-radius: 20px;
  border: 1px solid #444;
  background: #222;
  color: #fff;
  font-size: 15px;
}

.clear-search-btn-shop {
  position: absolute;
  right: 12px;
  top: 44%;
  transform: translateY(-50%);
  font-size: 28px;
  color: #aaa;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clear-search-btn-shop:hover {
  color: #fff;
}
.shop-category-select {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #444;
  background: #222;
  color: #fff;
}
.shop-search-btn, .event-search-btn {
  background: #DA0000;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}

.shop-search-btn i, .event-search-btn i {
  font-size: 16px;
}

.shop-search-btn:hover, .event-search-btn:hover {
  background: #a30000;
}

/* Wrapper for category and button controls - desktop layout */
.shop-filter-controls-row,
.event-filter-controls-row {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  align-items: center;
}

/* Date input styling for events */
.event-filter-controls-row input[type="date"] {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #444;
  background: #222;
  color: #fff;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
}

.event-filter-controls-row input[type="date"]:focus {
  outline: none;
  border-color: #DA0000;
}

/* "to" span styling */
.event-filter-controls-row span {
  color: #fff;
  font-size: 14px;
  white-space: nowrap;
}

/* Mobile responsive layout for shop filter form */
@media screen and (max-width: 640px) {
  /* Adjust search bar position for mobile navbar (60px instead of 70px) */
  .shop-filter-bar, .event-filter-bar {
    top: 60px !important; /* Mobile navbar is 60px */
  }
  
  .shop-filter-bar.scroll-up, .event-filter-bar.scroll-up {
    top: 60px !important; /* Mobile navbar is 60px */
  }
  
  .shop-filter-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
  }
  
  /* Search bar on top, full width */
  .search-wrapper {
    width: 100%;
    order: 1;
  }
  
  /* Row container for category and button - always together on same line */
  .shop-filter-controls-row {
    order: 2;
    display: flex;
    gap: 12px;
    width: 100%;
    align-items: stretch;
  }
  
  /* Category select takes remaining space */
  .shop-filter-controls-row .shop-category-select {
    flex: 1;
    min-width: 0;
  }
  
  /* Search button fixed width */
  .shop-filter-controls-row .shop-search-btn {
    flex-shrink: 0;
    padding: 10px 20px;
    white-space: nowrap;
  }
  
  /* Event filter form mobile layout - same pattern as shop */
  .event-filter-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
  }
  
  /* Search bar on top, full width */
  .event-filter-form .search-wrapper {
    width: 100%;
    order: 1;
  }
  
  /* Row container for date inputs and button - always together on same line */
  .event-filter-controls-row {
    order: 2;
    display: flex;
    gap: 12px;
    width: 100%;
    align-items: center;
    flex-wrap: nowrap;
  }
  
  /* Date inputs take equal space */
  .event-filter-controls-row input[type="date"] {
    flex: 1;
    min-width: 0;
  }
  
  /* "to" span doesn't shrink */
  .event-filter-controls-row span {
    flex-shrink: 0;
    margin: 0;
  }
  
  /* Search button fixed width */
  .event-filter-controls-row .event-search-btn {
    flex-shrink: 0;
    padding: 10px 20px;
    white-space: nowrap;
  }
}

/* Products Grid */
/* Product Items Page - Items display use the same 
  display classes and logic as the shop.php 'Featured Products' section*/
/* Add to Cart button for each product displayed (shop_items.php page) */
.add-to-cart-btn-shop-items {
  background: #DA0000;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  margin-bottom: 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s ease;
  width: auto;         /* not full width */
  display: inline-block;
}
.add-to-cart-btn-shop-items:hover:not(:disabled) {
  background: #a30000;
}

/* No products message */
.no-products, .no-events {
  text-align: center;
  padding: 40px;
  font-size: 18px;
  color: #aaa;
}

.no-events-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.add-to-cart-overlay {
  position: absolute;
  top: 100%;                  /* Position below the slideshow container */
  left: 0;
  right: 0;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 8px;
  background: rgba(0,0,0,0.6);
  z-index: 10;               /* Ensure it appears above product details */
  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.product-tile_shop {
  position: relative;
  overflow: hidden;          /* Restore for border-radius */
}

.product-tile_shop:hover .add-to-cart-overlay {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

/* Tablet and mobile: Always show overlay - must override default and hover states */
@media screen and (max-width: 1024px) {
  .product-tile_shop {
    overflow: visible !important;
  }
  
  .variant-slideshow_shop {
    overflow: visible !important;
  }
  
  .product-tile_shop .add-to-cart-overlay,
  .product-tile_shop:hover .add-to-cart-overlay {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    position: absolute !important;
    top: 100% !important;
    z-index: 10 !important;
  }
  
  .product-tile_shop .slideshow-nav-shop,
  .product-tile_shop:hover .slideshow-nav-shop {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    display: block !important;
  }
}

/* Force controls visible on tablet - must come after hover rules */
/* Note: Mobile (max-width: 640px) uses overflow: hidden to maintain border-radius */
@media screen and (min-width: 641px) and (max-width: 1024px) {
  /* Ensure product tile doesn't clip overlay content on tablet */
  .product-tile_shop {
    overflow: visible !important;
  }
  
  /* Override default hidden state for slideshow nav buttons */
  .product-tile_shop .slideshow-nav-shop {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    display: block !important;
  }
  
  /* Override hover behavior - keep visible on tablet */
  .product-tile_shop:hover .slideshow-nav-shop,
  .product-tile_shop .slideshow-nav-shop {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    display: block !important;
  }
  
  /* Make navigation buttons smaller and more subtle on tablet - use more specific selector */
  .product-tile_shop .slideshow-nav-shop,
  .variant-slideshow_shop .slideshow-nav-shop,
  .slideshow-nav-shop {
    padding: 2px 4px !important;
    font-size: 11px !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border-radius: 3px !important;
    min-width: auto !important;
    min-height: auto !important;
  }
  
  .product-tile_shop .slideshow-nav-shop:hover,
  .variant-slideshow_shop .slideshow-nav-shop:hover,
  .slideshow-nav-shop:hover {
    background: rgba(0, 0, 0, 0.55) !important;
    color: #fff !important;
  }
  
  .product-tile_shop .slideshow-nav-shop.prev,
  .variant-slideshow_shop .slideshow-nav-shop.prev,
  .slideshow-nav-shop.prev { left: 3px !important; }
  .product-tile_shop .slideshow-nav-shop.next,
  .variant-slideshow_shop .slideshow-nav-shop.next,
  .slideshow-nav-shop.next { right: 3px !important; }
  
  /* Override default hidden state for add-to-cart overlay */
  .product-tile_shop .add-to-cart-overlay {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }
  
  /* Override hover behavior - keep visible on tablet */
  .product-tile_shop:hover .add-to-cart-overlay,
  .product-tile_shop .add-to-cart-overlay {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }
  
  /* Override inline styles on overlay content - ensure size selector and add button are visible */
  .product-tile_shop .add-to-cart-overlay .size-selector[style*="display: none"],
  .product-tile_shop .add-to-cart-overlay .add-btn[style*="display: none"] {
    display: flex !important;
  }
  
  .product-tile_shop .add-to-cart-overlay .size-selector {
    display: flex !important;
  }
  
  .product-tile_shop .add-to-cart-overlay .add-btn {
    display: inline-block !important;
  }
  
  /* Ensure variant slideshow container allows overflow */
  .variant-slideshow_shop {
    overflow: visible !important;
  }
}

.size-selector {
  display: flex;
  gap: 6px;
}

.size-btn {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.2s, color 0.2s;
}

.size-btn:hover {
  background: #000;
  color: #fff;
}

.add-btn {
  background: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}

.add-btn:hover {
  background: #000;
  color: #fff;
}

/* Notification toast */
#cartMessage {
  position: fixed;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  background: #4caf50;
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  z-index: 2000;
  display: none;
  font-weight: 500;
}










/* Events Page */
/* Hero Events Section */
.hero_events {
  margin-top: 70px;
  width: 100vw;
  height: calc(100vh - 70px);
  background-image: url('../Images/events/hero_events.webp');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hero_events::before {
  content:"";
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  background:rgba(0,0,0,0.5);
  z-index:1;
}

.hero_events-content {
  position:relative;
  z-index:2;
  color:#fff;
  text-align:center;
  padding: 20px;
  animation: fadeIn 1.5s ease-in-out;
}

.hero_events-content h1 { font-size:3rem; margin-bottom:20px; }
.hero_events-content h3 { font-size:1.5rem; margin-bottom:30px; }
.hero_events .cta-btn {
  background:#DA0000; color:#fff; padding:14px 30px;
  border-radius:6px; font-weight:bold; text-decoration:none;
}
.hero_events .cta-btn:hover { background:#b80000; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Modal */
.events-modal {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.8);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 20px;              /* Add padding to prevent content from touching edges */
  display: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  overflow-y: auto;           /* Allow scrolling if content is tall */
}

/* Upcoming modal specific wrappers */
.events-modal-content {
  width: auto;
  max-width: 420px;
  max-height: 90vh;
  height: auto;
  display: inline-flex;
  flex-direction: column;
  color:#fff;
  overflow: hidden;
  background: rgba(0,0,0,0.95);
  padding: 14px;
  border-radius: 8px;
  position: relative;
  gap: 12px;
}

.events-modal-content.single {
  align-items: flex-start;
}

.events-modal-content.double {
  flex-direction: row;
  gap: 18px;
  width: auto;
  max-width: none;
  justify-content: center;
  align-items: flex-start;
}

.events-modal-content.single .event-card-modal,
.events-modal-content.double .event-card-modal {
  width: 240px;
  flex: 0 0 auto;
}

.event-card-modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
  align-items: flex-start;
}

.event-card-modal img {
  width: 100% !important;
  height: 360px !important;
  aspect-ratio: 2 / 3 !important;
  object-fit: cover !important;
  object-position: center;
  border-radius:6px;
  margin: 0 0 8px 0 !important;
  display: block !important;
  flex-shrink: 0;
  align-self: flex-start;
}

.event-card-modal .price {
  float: none;
  margin-left: 8px;
  font-weight:bold;
  color:#DA0000;
  flex-shrink: 0;
}

.event-card-modal h3 {
  font-size: 1rem;
  margin: 4px 0;
  line-height: 1.3;
  width: 100%;
}

.event-card-modal p {
  font-size: 0.85rem;
  margin: 2px 0;
  line-height: 1.3;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  text-align: left;
}

.countdown {
  font-size:1rem;           /* Reduced font size */
  margin:6px 0;             /* Reduced margins */
  font-weight:bold;
  color:#fff;
  text-align: left;         /* Left align countdown */
  width: 100%;              /* Full width */
}

.event-card-modal .cta-btn {
  width: auto !important;    /* Auto width - not 100% */
  max-width: 90%;            /* Limit max width but allow flexibility */
  padding: 8px 20px;         /* Adequate padding */
  font-size: 0.9rem;         /* Smaller text */
  margin: 8px auto 0 auto;   /* Center button with top margin */
  text-align: center;        /* Center text inside button */
  display: block;            /* Block display for centering */
  transition: background 0.2s ease, transform 0.1s ease !important; /* Smooth transitions */
  box-shadow: none !important; /* Remove default box-shadow */
  align-self: center;        /* Center button within flex container */
}

.event-card-modal .cta-btn:hover {
  transform: scale(1.03) !important;    /* Minimal scale on hover - subtle growth */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important; /* Subtle shadow */
}

.close-modal {
  position:absolute;
  top:20px;
  right:30px;
  font-size:2rem;
  color:#fff;
  cursor:pointer;
}

.events-modal.show {
  display: flex;
  opacity: 1;
}
.events-modal.hide {
  opacity: 0;
}

/* Events grid */
.featured_events_section {
  padding:50px 20px;
  text-align:center;
}

.featured_events_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 tiles per row on large screens */
    gap: 20px;
    justify-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* 2 tiles per row on small screens */
@media screen and (max-width: 768px) {
    .featured_events_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

.featured_events_grid a{
    text-decoration: none;
}

.clear-search-btn-event {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  color: #aaa;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clear-search-btn-event:hover {
  color: #fff;
}

.event-tile {
  background: #fff;
  color: #000;
  padding: 15px;             /* Adjustable: reduce to make smaller */
  width: 100%;               /* Full width of grid cell */
  border-radius: 8px;
  text-align: left;
  transition: transform .3s, box-shadow .3s;
  display: block;            /* makes the <a> behave like a block tile */
  text-decoration: none;     /* remove underline */
  cursor: pointer;           /* show clickable cursor */
}

.event-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.event-tile h4 {
  margin: 8px 0;             /* Adjustable: reduce for tighter spacing */
  font-size: 1.5rem;           /* Adjustable: reduce for smaller text */
  font-weight: bold;
}

.event-tile p {
  margin: 4px 0;             /* Adjustable: reduce for tighter spacing */
  font-size: 1rem;        /* Adjustable: reduce for smaller text */
}


.event-tile img.event-thumb {
  width: 100%;
  aspect-ratio: 2 / 3;       /* Portrait 2:3 aspect ratio */
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 8px;        /* Adjustable: reduce for tighter spacing */
}

.event-card-modal img.upcoming_event-thumb{
  width: 100% !important;
  height: 360px !important;
  aspect-ratio: 2 / 3 !important;
  object-fit: cover !important;
  object-position: center;
  border-radius: 10px;
  margin: 0 0 8px 0 !important;
  display: block !important;
  flex-shrink: 0;
}

.event-desc {
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.event-tile .cta-btn.small {
  background:#DA0000; padding:8px 16px; font-size:.9rem;
  display:inline-block; margin-top:10px;
}
.pagination { margin-top:30px; display:flex; gap:10px; justify-content:center; }

/* Reviews inherits shop.css */

.upcoming-badge {
  background: #28a745;
  color: #fff;
  font-size: 0.8rem;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}












/* View Event Page */
.view-event-container {
  max-width: 1200px;
  margin: auto;
  padding: 20px;
  margin-top: 70px;
  color: white;
  font-family: 'Inter', sans-serif;
}

/* Top Section */
.event-top-section {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  justify-content: center; /* Center the big divisions */
  margin-bottom: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px; /* Match container padding for alignment with event-details */
}

.event-poster-section {
  flex: 0 0 350px;
  max-width: 350px;
  overflow: hidden;
}

.event-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

/* Tablet styles - reduce poster size and center layout */
@media screen and (min-width: 641px) and (max-width: 1024px) {
  .event-top-section {
    justify-content: center; /* Center the big divisions */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    gap: 30px;
    padding: 0 20px; /* Match container padding */
  }

  .event-poster-section {
    flex: 0 0 300px;
    max-width: 300px;
  }

  .event-info-section {
    flex: 0 1 400px;
    max-width: 500px;
  }

  .event-details-section {
    padding: 0 20px; /* Match the padding to align with thumbnail start */
  }
}

.event-info-section {
  flex: 0 1 400px;
  max-width: 500px;
  padding: 0 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.event-info-section h2 {
  font-size: 28px;
  margin-bottom: 15px;
}

.event-price {
  font-size: 20px;
  margin: 10px 0;
}

.event-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Buttons */
.add-to-cart-btn {
  width: 100%;
  max-width: 200px;
  background: #DA0000;
  color: white;
  border: none;
  padding: 12px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.3s ease, transform 0.1s ease;
}

.add-to-cart-btn:hover {
  background: #a30000;
}

.view-highlights-btn,
.review-event-btn {
  text-decoration: none;
  display: inline-block;
}

.button-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.button-container.column {
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.view-cart-btn {
  background: #444 !important;
}

/* Event Details */
.event-details-section {
  margin-top: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px; /* Match the padding of view-event-container */
}

.event-details-section h2 {
  margin-bottom: 15px;
  text-align: left;
  font-size: 24px;
}

.event-details-section p {
  margin-bottom: 10px;
  text-align: left;
  font-size: 16px;
}

.badge {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: bold;
  margin-left: 10px;
}

.badge.upcoming { background: green; color: #fff; }
.badge.past { background: red; color: #fff; }

/* Event Highlights */
.event-highlights {
  margin-top: 40px;
  text-align: center;
  position: relative;
}

.event-highlights h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

.highlights-carousel-wrapper {
  max-width: 80%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.highlights-carousel {
  display: flex;
  gap: 20px;
  will-change: transform;
}

.highlight_tile {
  flex: 1 0 calc((100% - 40px) / 3);
  max-width: calc((100% - 40px) / 3);
  background: #1c1c1c;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  cursor: pointer;
}

.highlight-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.highlight-caption {
  font-size: 14px;
  color: #ccc;
  margin-top: 10px;
  line-height: 1.4;
  min-height: 40px;
}

.no-highlights {
  font-size: 16px;
  color: #ccc;
  text-align: center;
  margin: 20px 0;
}

/* Carousel Controls */
.carousel-controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.event-carousel-btn {
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 10px;
  transition: color 0.3s ease;
  z-index: 10;
}

.event-carousel-btn:hover {
  color: #DA0000;
}

.event-carousel-btn.prev {
  position: absolute;
  left: 40px;
}

.event-carousel-btn.next {
  position: absolute;
  right: 40px;
}

.event-carousel-btn svg {
  width: 28px;
  height: 28px;
  display: block;
}

.event-highlights-carousel-btn {
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 10px;
  transition: color 0.3s ease;
  z-index: 10;
}

.event-highlights-carousel-btn:hover {
  color: #DA0000;
}

.event-highlights-carousel-btn.prev {
  position: absolute;
  left: 10px;
}

.event-highlights-carousel-btn.next {
  position: absolute;
  right: 10px;
}

.event-highlights-carousel-btn svg {
  width: 28px;
  height: 28px;
  display: block;
}

/* Review Modal */
.review-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.review-modal.show {
  display: flex;
}

.review-modal-content {
  background: #1c1c1c;
  padding: 20px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  position: relative;
}

.review-modal-close {
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}

.review-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.review-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-form-group label {
  font-size: 14px;
  font-weight: 500;
}

.review-form-group select,
.review-form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #444;
  border-radius: 6px;
  background: #2a2a2a;
  color: #fff;
  font-size: 14px;
}

.review-form-group select:focus,
.review-form-group textarea:focus {
  outline: none;
  border-color: #DA0000;
}

.review-form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.review-submit-btn {
  background: #DA0000;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.review-submit-btn:hover {
  background: #a30000;
}

/* Slideshow Modal */
.slideshow-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.slideshow-modal.show {
  display: flex;
}

.slideshow-modal-content {
  position: relative;
  max-width: 800px;
  width: 90%;
  text-align: center;
}

.slideshow-image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
}

.slideshow-caption {
  color: #fff;
  font-size: 16px;
  margin-top: 10px;
}

.slideshow-btn {
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 10px;
  transition: color 0.3s ease;
  z-index: 10;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.slideshow-btn:hover {
  color: #DA0000;
}

.slideshow-btn.prev {
  left: -40px;
}

.slideshow-btn.next {
  right: -40px;
}

.slideshow-btn svg {
  width: 28px;
  height: 28px;
  display: block;
}

.slideshow-modal-close {
  position: absolute;
  top: -30px;
  right: -30px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
  .events-modal {
    padding: 10px;            /* Reduced padding on mobile */
    align-items: flex-start;  /* Align to top on mobile */
    padding-top: 60px;        /* Space for close button */
  }

  .events-modal-content {
    width: 90vw;              /* Wider on mobile */
    max-width: 90vw;
    max-height: 80vh;         /* Limit height to 80% of viewport */
    padding: 15px;            /* Reduced padding */
  }

  .events-modal-content.double {
    width: 95vw;              /* Nearly full width on mobile */
    max-width: 95vw;
    flex-direction: row;      /* Keep side by side on mobile */
    gap: 10px;                /* Smaller gap on mobile */
    max-height: 85vh;         /* Limit height */
    overflow: hidden;         /* Prevent scrolling */
  }

  .events-modal-content.double .event-card-modal {
    width: min(45vw, 220px);  /* Keep cards narrow to remove extra space */
    flex: 0 0 auto;
  }

  .event-card-modal img {
    width: 100% !important;       /* Full width within card */
    height: 300px !important;     /* Slightly shorter height on mobile */
    aspect-ratio: 2 / 3 !important; /* Maintain 2:3 portrait aspect ratio */
    object-fit: cover !important; /* Cover to fill the space */
    object-position: center;      /* Center the image within the frame */
    display: block !important;    /* Block display */
    margin: 0 0 6px 0 !important; /* No left margin, bottom margin only */
    flex-shrink: 0;               /* Prevent image from shrinking */
    align-self: stretch;          /* Use full width */
  }

  .event-card-modal h3 {
    font-size: 0.9rem;        /* Even smaller on mobile */
  }

  .event-card-modal p {
    font-size: 0.75rem;       /* Even smaller on mobile */
  }

  .countdown {
    font-size: 0.9rem;        /* Smaller countdown on mobile */
  }

  .close-modal {
    top: 10px;                /* Adjust close button position on mobile */
    right: 15px;
    font-size: 1.5rem;        /* Smaller close button on mobile */
  }

  .event-top-section {
    flex-direction: row; /* Keep side-by-side on tablet */
    gap: 30px;
    justify-content: center; /* Center the big divisions */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  .event-poster-section {
    max-width: 300px;
    margin: 0;
    flex: 0 0 300px; /* Fixed width, don't grow/shrink */
  }

  .event-info-section {
    flex: 0 1 400px; /* Allow some flexibility but maintain size */
    max-width: 500px;
  }

  .event-poster {
    aspect-ratio: 2 / 3;
  }

  .event-info-section {
    padding: 0;
    align-items: center;
    text-align: center;
  }

  .event-actions {
    flex-direction: column;
    gap: 10px;
  }

  .add-to-cart-btn {
    max-width: 100%;
  }

  .highlights-carousel-wrapper {
    max-width: 90%;
  }

  .highlight_tile {
    flex: 1 0 calc((100% - 40px) / 2);
    max-width: calc((100% - 40px) / 2);
  }

  .event-highlights-carousel-btn.prev {
    left: 5px;
  }

  .event-highlights-carousel-btn.next {
    right: 5px;
  }

  .event-carousel-btn.prev {
    left: 30px;
  }

  .event-carousel-btn.next {
    right: 30px;
  }

  .slideshow-modal-content {
    max-width: 95%;
  }

  .slideshow-btn.prev {
    left: 10px;
  }

  .slideshow-btn.next {
    right: 10px;
  }
}

@media (max-width: 768px) {
  .event-top-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 0 !important; /* Remove bottom margin completely */
    gap: 0 !important; /* Remove gap between flex items */
  }

  .event-poster-section {
    max-width: 100%;
    width: 100%;
    margin: 0 auto !important; /* Remove all margins */
    order: 1;
    overflow: visible; /* Prevent image from being cut */
    padding-bottom: 0 !important; /* Remove bottom padding */
    margin-bottom: 0 !important; /* Remove bottom margin */
  }

  .event-poster {
    aspect-ratio: 2 / 3;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    height: auto; /* Allow natural height based on aspect ratio */
    object-fit: cover; /* Ensure image covers the area */
  }

  .event-info-section {
    order: 2;
    width: 100%;
    text-align: center;
    align-items: center;
    padding: 0 !important; /* Remove all padding */
    margin-bottom: 0 !important; /* Remove bottom margin */
    margin-top: 0 !important; /* Remove top margin */
  }

  .event-details-section {
    margin-top: 0 !important; /* Remove space between event-info and event-details */
    padding: 0 15px; /* Add side padding for mobile */
  }

  .event-info-section h2 {
    font-size: 24px;
  }

  .event-details-section h2,
  .event-highlights h3 {
    font-size: 20px;
  }

  .highlights-carousel-wrapper {
    max-width: 95%;
  }

  .highlight_tile {
    flex: 1 0 calc((100% - 20px) / 1);
    max-width: calc((100% - 20px) / 1);
  }

  .event-highlights-carousel-btn.prev {
    left: 5px;
  }

  .event-highlights-carousel-btn.next {
    right: 5px;
  }

  .event-carousel-btn.prev {
    left: 20px;
  }

  .event-carousel-btn.next {
    right: 20px;
  }

  .review-form-group label,
  .review-form-group select,
  .review-form-group textarea {
    font-size: 13px;
  }

  .review-submit-btn {
    font-size: 14px;
  }
}









/* Checkout Page */
.checkout-wrap {
    max-width: 1200px;
    margin: 70px auto 40px;
    padding: 0 16px;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.checkout-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.checkout-main {
    background: #151515;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.checkout-main h2 {
  padding-bottom: 10px;
  text-align: center;
}

.checkout-main h3 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.checkout-aside {
    position: sticky;
    top: 90px;
    align-self: start;
}

.checkout-order-summary {
    background: #111;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* Mobile collapsible */
.checkout-order-summary-collapsible {
    display: none;
    background: #111;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.checkout-order-summary-collapsible h1 {
  margin-top: 20px;
}

.checkout-order-summary-collapsible > summary {
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}

.checkout-order-summary-collapsible > summary:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.checkout-order-summary-collapsible > summary::after {
    content: '▼';
    font-size: 14px;
    transition: transform 0.3s ease;
}

.checkout-order-summary-collapsible[open] > summary::after {
    content: '▲';
    transform: rotate(180deg);
}

.checkout-order-summary-body {
    padding: 12px 16px;
    border-top: 1px solid #222;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}

.checkout-order-summary-collapsible[open] .checkout-order-summary-body {
    max-height: 5000px;
    opacity: 1;
    padding: 12px 16px;
}

.checkout-order-summary-collapse h1 {
  margin-top: 20px;
}

/* Blocks */
.checkout-block {
    background: #101010;
    border: 1px solid #1f1f1f;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 18px;
    color: #fff;
}

.checkout-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    top: 80px;
}

.checkout-grid-2 .checkout-full {
    grid-column: 1 / -1;
}

.checkout-label {
    display: block;
    font-size: 12px;
    color: #aaa;
    margin-bottom: 6px;
}

.checkout-input, .checkout-select {
    width: 100%;
    background: #0b0b0b;
    color: #fff;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
}

.checkout-input:focus, .checkout-select:focus {
    outline: none;
    border-color: #DA0000;
}

/* Payment Tabs */
.checkout-tabs {
    display: flex;
    gap: 8px;
    margin: 8px 0 12px;
}

.checkout-tab {
    flex: 0 0 auto;
    border: 1px solid #2a2a2a;
    background: #0b0b0b;
    color: #fff;
    border-radius: 999px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.2s, border-color 0.2s;
}

.checkout-tab.active {
    background: #DA0000;
    border-color: #DA0000;
}

.checkout-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkout-tab-content {
    display: none;
}

.checkout-tab-content.active {
    display: block;
}

.checkout-input-like {
    background: #0b0b0b;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 14px;
    min-height: 48px;
}

.checkout-error {
    color: #ff6b6b;
    margin-top: 10px;
    font-size: 12px;
}

/* Buttons */
.checkout-cta-btn {
    width: 100%;
    background: #DA0000;
    color: #fff;
    border: none;
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    font-size: 16px;
    transition: background 0.2s;
}

.checkout-cta-btn:hover {
    background: #a30000;
}

.checkout-small-btn {
    background: #222;
    color: #fff;
    border: none;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

.checkout-small-btn:hover {
    background: #333;
}

.checkout-remove-btn {
  background: #DA0000;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.checkout-remove-btn:hover {
  background: #a30000;
}

/* Order list */
.checkout-cart-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #1e1e1e;
}

.checkout-line-title {
    display: flex;
    gap: 12px;
    max-width: 60%;
}

.checkout-cart-item-thumbnail {
    width: 60px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
}

.checkout-cart-item-desc {
    font-size: 12px;
    color: #9a9a9a;
    margin: 4px 0;
}

.checkout-cart-item-type, .checkout-cart-item-variant {
    font-size: 12px;
    color: #aaa;
}

.checkout-line-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.checkout-line-price {
    min-width: 80px;
    text-align: right;
    font-size: 14px;
}

.checkout-cart-quantity {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkout-qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #222;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    line-height: 28px;
}

.checkout-qty-btn:hover {
    background: #333;
}

.checkout-qty-static {
    color: #aaa;
    font-size: 14px;
}

/* Coupon & totals */
/*To use the ones for cart.php*/

.checkout-totals {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

.checkout-totals > div {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.checkout-totals .checkout-grand {
    font-size: 18px;
    font-weight: 800;
    border-top: 1px dashed #333;
    padding-top: 8px;
}

.checkout-empty-cart {
    text-align: center;
    color: #9a9a9a;
    font-size: 16px;
    padding: 20px;
}

/* Saved address dropdown */
.address-select { margin: 10px 0; }
.address-select select {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    background: #0b0b0b;
    color: #fff;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
}

/* Red highlight for country dropdown items */
.choices__list--dropdown .choices__item--choice.is-highlighted {
    background-color: #DA0000 !important;
    color: #fff !important;
}

/* Ensure text is readable when selected */
.choices__item--selectable.is-highlighted {
    background-color: #DA0000 !important;
    color: #fff !important;
}

.coupon-wrapper { margin: 12px 0; }
.coupon-message { margin-top: 8px; }
.coupon-message:empty { display: none; }
.coupon-remove {
    background: none; border: none; color: #DA0000; margin-left: 8px; cursor: pointer; font-size: 12px;
}
.coupon-remove:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 992px) {
    .checkout-wrap {
        margin-top: 0 !important;
    }
    .checkout-grid {
        grid-template-columns: 1fr;
    }
    .checkout-aside {
        display: none;
    }
    .checkout-order-summary-collapsible {
        display: block;
    }
    .checkout-main {
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .checkout-grid-2 {
        grid-template-columns: 1fr;
    }
    .checkout-tabs {
        flex-wrap: wrap;
    }
    .checkout-tab {
        flex: 1;
        text-align: center;
    }
}












/* My Programs Section */
.my_programs_section {
    text-align: center;
    padding: 50px 20px;
    width: 96%;
    margin: auto;
}

.my_programs_section h3 {
    font-size: 2rem;
    margin-bottom: 40px;
    text-transform: uppercase;
    color: white;
}

.my_programs-programs-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.my_programs-program-tile {
    flex: 0 1 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.my_programs-program-tile.inactive {
    opacity: 0.7;
}

.my_programs-program-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.my_programs-thumbnail {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 ratio */
    overflow: hidden;
}

.my_programs-thumbnail img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
}

.my_programs-program-tile:hover .my_programs-thumbnail img {
    filter: brightness(70%);
}

.my_programs-play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 30px;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    cursor: pointer;
}

.my_programs-details {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.my_programs-details h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 36px; /* Uniform height for titles */
}

.my_programs-desc {
    margin: 5px 0;
    min-height: 40px; /* Uniform height for descriptions */
}

.my_programs-category {
    font-size: 14px;
    color: #666;
    margin: 5px 0;
}

.my_programs-type {
    font-size: 14px;
    color: #666;
    margin: 5px 0;
}

.my_programs-duration-status {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #333;
    margin: 10px 0;
}

.my_programs-dot {
    margin: 0 8px;
}

.my_programs-status {
    font-weight: bold;
}

/* Update status color rules */
.my_programs-status.active {
    color: green;
}

.my_programs-status:not(.active) {
    color: red;
}

.my_programs-progress-bar {
    background-color: #e0e0e0;
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
    position: relative;
    margin: 10px 0;
}

.my_programs-progress {
    background-color: #DA0000;
    height: 100%;
    transition: width 0.3s ease;
    position: absolute;
    top: 0;
    left: 0;
}

.my_programs-progress-bar:hover::after {
    content: attr(data-progress);
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
}

.my_programs-action-btn {
    margin-top: auto;
    width: 100%;
    padding: 10px;
    background-color: #DA0000;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.my_programs-action-btn:hover {
    background-color: #b30000;
}

.my_programs-empty {
    font-size: 18px;
    color: #888;
    text-align: center;
    width: 100%;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .my_programs-program-tile {
        flex: 0 1 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 768px) {
    .my_programs-program-tile {
        flex: 0 1 100%;
        max-width: 100%;
    }
    .my_programs-details h4 {
        font-size: 16px;
    }
}

/* Modal Styles (same as combat.php) */
.video-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
}

.video-modal.show {
  display: flex;
}

.video-modal-content {
  position: relative;
  width: 75vw; /* 3/4 of window width */
  height: 75vh; /* 3/4 of window height */
}

.video-modal-content iframe {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.video-modal-close {
  position: absolute;
  top: -30px;
  right: -30px;
  font-size: 40px;
  color: white;
  cursor: pointer;
}











/* Warrior Program Page */
/* program_vimeo.css - minimal, focused on layout + fixes */


/* User Program Error Section */
.user-program-error {
    text-align: center;
    padding: 40px 20px;
    max-width: 600px;
    margin: 40px auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.user-program-error-message {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 24px;
    line-height: 1.6;
}

.user-program-action-btn {
    display: inline-block;
    padding: 12px 32px;
    background: #DA0000;
    color: white;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.user-program-action-btn:hover {
    background: #b30000;
}

/* Film Error Styles */
/* Add padding-top to maincontainer to show black background in spacing area */
.maincontainer:has(> .user-film-error) {
    padding-top: 70px !important; /* Top padding for space below navbar - shows black background */
}

.maincontainer > .user-film-error,
.nav + .user-film-error {
    margin-top: 0 !important; /* Remove margin since padding handles spacing */
}

.user-film-error {
    text-align: center;
    padding: 40px 20px;
    max-width: 600px;
    margin: 0 auto 40px auto; /* No top margin - padding on maincontainer handles it */
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.user-film-error-message {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 24px;
    line-height: 1.6;
}

.user-film-action-btn {
    display: inline-block;
    padding: 12px 32px;
    background: #DA0000;
    color: white;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.user-film-action-btn:hover {
    background: #b30000;
}

/* Program Container */
.user-program-container {
    display: flex;
    padding: 20px;
    gap: 20px;
    background: #1a1a1a;
    border-radius: 8px;
    width: 96%;
    max-width: 100%;
    margin: 20px auto;
    box-sizing: border-box;
    align-items: flex-start;
}

/* Left main area */
.user-program-main {
    flex: 0 0 70%;
    max-width: 70%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Video wrapper */
.user-program-video {
    width: 100%;
    min-width: 0;
}

/* Video player wrapper */
.user-program-video-player {
    position: relative;
    padding-top: 56.25%;
    width: 100%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Iframe */
#user-program-video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Poster image */
.user-program-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.user-program-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Play button */
.user-program-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 36px;
    border: none;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.2s ease;
}

.user-program-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Title and actions */
.user-program-title {
    font-size: 28px;
    margin: 14px 0 8px;
    color: #fff;
    font-weight: 600;
}

.user-program-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Review and Share buttons */
.user-program-review-btn, .user-program-share-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.user-program-review-btn {
    background: #DA0000;
    color: #fff;
}

.user-program-review-btn:hover:not(.disabled) {
    background: #b30000;
}

.user-program-review-btn.disabled {
    background: #666;
    cursor: not-allowed;
    pointer-events: auto; /* Allow clicks to fire so we can show message */
    opacity: 0.6;
}

.user-program-share-btn {
    background: linear-gradient(135deg, #DA0000, #b30000);
    color: #fff;
}

.user-program-share-btn:hover {
    background: linear-gradient(135deg, #b30000, #8b0000);
}

.remove-image-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.remove-image-label {
    font-size: 14px;
    cursor: pointer;
}

/* Playlist */
.user-program-playlist {
    flex: 0 0 30%;
    max-width: 30%;
    max-height: 72vh;
    overflow-y: auto;
    background: #222;
    border-radius: 8px;
    padding: 12px;
    box-sizing: border-box;
}

/* Hide any unintended images or iframes in playlist */
.user-program-playlist img[role="presentation"], .user-program-playlist picture, .user-program-playlist iframe {
    display: none !important;
}

/* Video tile */
.user-program-video-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-bottom: 1px solid #333;
    cursor: pointer;
    position: relative;
    transition: background 0.3s ease;
}

.user-program-video-tile:hover {
    background: #2a2a2a;
}

.user-program-video-tile.active {
    background: #333;
    border-left: 4px solid #DA0000;
}

.user-program-video-tile.locked {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Thumbnail */
.user-program-video-thumbnail {
    flex: 0 0 80px;
    width: 80px;
    height: 45px;
    overflow: hidden;
    border-radius: 4px;
    position: relative;
}

.user-program-video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
}

/* Locked overlay */
.user-program-video-locked {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.user-program-video-tile.locked:hover .user-program-video-locked {
    opacity: 1;
}

.user-program-video-locked .fa-lock {
    color: #fff;
    font-size: 16px;
}

/* Locked message */
.user-program-locked-message {
    display: none;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10;
}

.user-program-video-tile.locked:hover .user-program-locked-message {
    display: block;
}

/* Info button */
.user-program-info-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    padding: 6px 8px;
    transition: background 0.2s ease;
}

.user-program-info-btn:hover {
    background: rgba(255,255,255,0.2);
}

/* Video details */
.user-program-video-details {
    flex: 1;
    color: #fff;
}

/* Video details */
.user-program-video-details h4 {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-program-video-week {
    margin: 4px 0 0;
    color: #aaa;
    font-size: 12px;
}

/* Meta area */
.user-program-video-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.completed-icon {
    color: #28a745;
    font-size: 16px;
    font-weight: 700;
}

/* Progress bar */
.user-program-video-tile .progress-bar {
    display: inline-block;
    width: 28px;
    height: 6px;
    background: #2b2b2b;
    border-radius: 3px;
    position: relative;
}

.user-program-video-tile .progress-bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: #DA0000;
    border-radius: 3px;
    width: 100%;
}

/* Modal */
.user-program-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
}

.user-program-modal.show {
    display: flex;
}

.user-program-modal-content {
    background: #222;
    padding: 25px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    color: #fff;
}

.user-program-modal-close {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10003;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 26px;
    cursor: pointer;
    color: #aaa;
    font-weight: bold;
    transition: all 0.2s ease;
}

.user-program-modal-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* Share options */
.user-program-share-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    padding: 10px 0;
}

.user-program-share-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #333;
    color: #fff;
    border-radius: 8px;
    text-align: left;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s ease, transform 0.2s ease;
}

.user-program-share-option:hover {
    background: #444;
    transform: translateY(-2px);
}

.user-program-share-option i {
    font-size: 18px;
}

/* Share notification */
.user-program-share-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
}

.user-program-share-notification.show {
    opacity: 1;
}

.user-program-share-notification.success {
    background: #28a745;
    color: #fff !important;
}

.user-program-share-notification.error {
    background: #ff0000;
    color: #fff !important;
}

/* Review Modal */
.user-program-review-modal-content {
    max-height: 80vh;
    overflow-y: auto;
    background: #222;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    width: 90%;
    max-width: 600px;
    color: #fff;
    scrollbar-width: thin;
    scrollbar-color: #555 #333;
}

.user-program-review-modal-content::-webkit-scrollbar {
    width: 8px;
}

.user-program-review-modal-content::-webkit-scrollbar-track {
    background: #333;
    border-radius: 4px;
}

.user-program-review-modal-content::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

.user-program-review-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.user-program-review-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.user-program-review-field label {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

.user-program-review-field select,
.user-program-review-field textarea,
.user-program-review-field input[type="file"] {
    padding: 10px;
    border: 1px solid #444;
    border-radius: 6px;
    background: #2a2a2a;
    color: #fff;
    font-size: 14px;
}

.user-program-review-field select:focus,
.user-program-review-field textarea:focus,
.user-program-review-field input[type="file"]:focus {
    outline: none;
    border-color: #DA0000;
    box-shadow: 0 0 0 2px rgba(218, 0, 0, 0.3);
}

.user-program-review-field textarea {
    min-height: 120px;
    resize: vertical;
}

/* User Program Remove Image Review Area */
.user-program-remove-image-btn {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.user-program-remove-image-btn:hover {
    background-color: #c82333;
}
.user-program-review-image-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.user-program-review-image {
    max-width: 200px;
    max-height: 200px;
    margin-top: 10px;
}

/* Review Modal Image */
.user-program-review-image,
.user-program-review-image-preview img {
    width: 100%;
    max-width: 200px;
    height: auto;
    margin-top: 10px;
    border-radius: 6px;
    object-fit: contain;
}

.user-program-review-submit {
    background: #DA0000;
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.user-program-review-submit:hover {
    background: #b30000;
}

/* Active Video Title */
.user-program-active-video-title {
    font-size: 20px;
    margin: 8px 0;
    color: #fff;
    font-weight: 500;
    line-height: 1.3;
}

/* Responsive */
@media (max-width: 1024px) {
    .user-program-container {
        flex-direction: column;
        padding: 10px;
        width: 100%;
        margin: 10px 0;
    }
    .user-program-main {
        flex: 1;
        max-width: 100%;
        min-width: 0;
        width: 100%;
        order: 1;
    }
    .user-program-video {
        order: 1;
        width: 100%;
    }
    .user-program-video-player {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .user-program-title {
        order: 2;
    }
    .user-program-active-video-title {
        order: 3;
    }
    .user-program-playlist {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        order: 4;
        max-height: 40vh;
        margin-top: 12px;
    }
    .user-program-actions {
        order: 5;
        margin-top: 10px;
    }
}

@media (max-width: 768px) {
    .user-program-container {
        padding: 8px;
        margin: 8px 0;
        width: 100%;
    }
    .user-program-main {
        width: 100%;
    }
    .user-program-video {
        width: 100%;
    }
    .user-program-video-player {
        width: 100%;
    }
    .user-program-video-thumbnail {
        flex: 0 0 70px;
        width: 70px;
        height: 39px;
    }
    .user-program-title {
        font-size: 22px;
    }
    .user-program-actions {
        flex-direction: column;
        gap: 8px;
    }
    .user-program-review-btn, .user-program-share-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    /* Exception: User program container needs top spacing - override nav + * rule */
    .maincontainer > .nav + .user-program-container,
    .maincontainer .user-program-container {
        margin-top: 0 !important;
        padding-top: 8px !important; /* Professional spacing below navbar */
    }
    
    .user-program-container {
        padding: 5px;
        margin: 5px 0;
        width: 100%;
        border-radius: 4px;
    }
    .user-program-video-player {
        border-radius: 4px;
    }
}










/*Warrior Profile Page*/
.profile-container, .shipping-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.profile-container h2, .shipping-container h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: white;
    text-align: center;
}

.profile-details, .shipping-addresses, .profile-edit, .address-edit {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.profile-details {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.profile-image img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ddd;
}

.profile-info p {
    margin: 0.5rem 0;
    font-size: 1rem;
    color: #444;
}

.profile-info strong {
    font-weight: 600;
    color: #222;
}

.edit-btn, .edit-address-btn, .add-address-btn {
    background: #c00;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.3s;
}

.edit-btn:hover, .edit-address-btn:hover, .add-address-btn:hover {
    background: #a00;
}

.delete-address-btn {
    background: #666;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.3s;
    margin-left: 0.5rem;
}

.delete-address-btn:hover {
    background: #555;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.3rem;
    color: #333;
}

.form-group input, .form-group select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.phone-field {
    display: flex;
    gap: 0.5rem;
}

.phone-code-input {
    width: 80px;
    background: #f5f5f5;
}

.form-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.form-actions button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.form-actions button[type="submit"] {
    background: #c00;
    color: #fff;
}

.form-actions button[type="submit"]:hover {
    background: #a00;
}

.form-actions button[type="button"] {
    background: #666;
    color: #fff;
}

.form-actions button[type="button"]:hover {
    background: #555;
}

.success {
    color: green;
    margin-bottom: 1rem;
}

.error {
    color: red;
    margin-bottom: 1rem;
}

.feedback {
    font-size: 0.85rem;
    margin-top: 0.3rem;
}

.username-suggestions {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}

.suggestion-item {
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    background: #f5f5f5;
    margin-bottom: 0.2rem;
    border-radius: 4px;
}

.suggestion-item:hover {
    background: #e5e5e5;
}

.emailuserverify {
    max-width: 400px;
    margin: 1rem auto;
    text-align: center;
}

.emailverify-instructions, .emailverify-note {
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.emailuserverifyform input {
    padding: 0.5rem;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.emailuserverifyform button {
    background: #c00;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
}

.emailuserverifyform button:hover {
    background: #a00;
}

.shipping-addresses {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.address-tile {
    flex: 1 1 300px;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    position: relative;
}

.address-tile p {
    margin: 0.3rem 0;
    font-size: 0.9rem;
}

.note {
    font-size: 0.9rem;
    color: #ccc;
    margin-bottom: 1rem;
}

.loader {
    margin-left: 1rem;
}

/* ====================== CLIENT PROFILE EMAIL SUBSCRIPTIONS ====================== */
.client-profile-email-subscriptions-container {
    max-width: 800px;
    margin: 30px auto;
    padding: 0 20px;
}

.client-profile-email-subscriptions-container h2 {
    font-size: 1.8rem;
    margin-bottom: 16px;
    color: #fff;
    font-weight: 600;
    text-align: center;
}

.client-profile-email-subscriptions-card {
    background: #1e1e1e;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    border: 1px solid #333;
    margin-bottom: 12px;
}

.client-profile-email-subscriptions-summary p {
    margin: 6px 0;
    color: #ddd;
    font-size: 0.95rem;
}

.client-profile-email-subscriptions-summary strong {
    color: #4ade80;
}

.client-profile-email-subscriptions-edit-btn {
    background: #4ade80;
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.client-profile-email-subscriptions-edit-btn:hover {
    background: #22c55e;
    transform: translateY(-1px);
}

.client-profile-email-subscriptions-empty {
    text-align: center;
    padding: 30px;
    background: #1a1a1a;
    border-radius: 12px;
    border: 1px dashed #444;
}

.client-profile-email-subscriptions-empty p {
    color: #aaa;
    margin: 8px 0;
}

.client-profile-email-subscriptions-subscribe-link {
    color: #4ade80;
    text-decoration: underline;
    font-weight: 500;
}

.client-profile-email-subscriptions-subscribe-link:hover {
    color: #22c55e;
}

@media (max-width: 600px) {
    .profile-details {
        flex-direction: column;
        align-items: flex-start;
    }
    .profile-image img {
        width: 80px;
        height: 80px;
    }
    .address-tile {
        flex: 1 1 100%;
    }
}











/* Client Orders Page Layout */
.orders-page {
    max-width: 1200px;
    margin: 70px auto 40px auto;
    padding: 0 20px;
    color: white;
    font-family: 'Inter', sans-serif;
}

.orders-page h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
    font-weight: 600;
}

.orders-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.tab-btn {
    background: #2a2a2a;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s ease;
    will-change: background;
}

.tab-btn.active,
.tab-btn:hover {
    background: #DA0000;
}

.orders-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.orders-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 20px;
    justify-content: center;
}

.order-item {
    display: flex;
    align-items: flex-start;
    background: #1c1c1c;
    border-radius: 12px;
    padding: 15px;
    gap: 20px;
    max-width: 580px;
    width: 100%;
    box-sizing: border-box;
}

.order-item-thumbnail img {
    width: 100px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.order-item-details {
    flex: 1;
    min-width: 0;
}

.order-item-details h3 {
    margin: 0 0 8px 0;
    font-size: 20px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-item-desc {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.order-item-type,
.order-item-status,
.order-item-variant {
    font-size: 13px;
    margin-bottom: 5px;
    color: #aaa;
}

.order-item-meta {
    text-align: right;
    min-width: 120px;
    flex-shrink: 0;
}

.order-item-quantity,
.order-item-price {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 10px;
}

.review-btn,
.details-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 8px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 8px;
    transition: background 0.2s ease;
    will-change: background;
}

.review-btn {
    background: #DA0000;
    color: #fff;
    text-decoration: none;
}

.review-btn:hover {
    background: #b30000;
}

.details-btn {
    background: #444;
    color: #fff;
    text-decoration: none;
}

.details-btn:hover {
    background: #666;
}

.orders-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.pagination-btn {
    background: #2a2a2a;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease;
    will-change: background;
}

.pagination-btn:hover,
.pagination-btn.active {
    background: #DA0000;
}

.empty-orders {
    text-align: center;
    font-size: 18px;
    margin-top: 40px;
    color: #ccc;
}

.orders-error {
    background: #DA0000;
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 15px;
    text-align: center;
    opacity: 0;
    animation: fadeIn 0.3s ease-in forwards;
}

.orders-success {
    background: #4CAF50;
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 15px;
    text-align: center;
    opacity: 0;
    animation: fadeIn 0.3s ease-in forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Responsive */
@media (max-width: 768px) {
    .orders-page {
        padding: 0 15px !important; /* Professional spacing on mobile */
        margin: 60px auto 40px auto !important; /* Adjust for mobile navbar */
    }
    
    .orders-list {
        grid-template-columns: 1fr;
        gap: 15px;
        width: 100%;
        box-sizing: border-box;
    }
    
    .order-item {
        max-width: 100%;
        width: 100%;
        flex-direction: row;
        align-items: flex-start;
        padding: 12px;
        gap: 12px;
        box-sizing: border-box;
    }
    
    .order-item-thumbnail img {
        width: 100px;
        height: 150px;
    }
    
    .order-item-meta {
        text-align: right;
        min-width: 100px;
    }
    
    .orders-tabs {
        flex-direction: row;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .tab-btn {
        flex: 1;
        min-width: 120px;
    }
}

/* Mobile phone screens - additional spacing */
@media screen and (max-width: 640px) {
    .orders-page {
        padding: 0 15px !important; /* Professional spacing on mobile */
        margin: 60px auto 20px auto !important; /* Adjust for mobile navbar */
    }
    
    .orders-list {
        gap: 12px;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    
    .order-item {
        max-width: 100% !important;
        width: 100% !important;
        padding: 12px !important;
        gap: 10px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    
    .order-item-thumbnail img {
        width: 80px !important;
        height: 120px !important;
    }
    
    .order-item-details {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }
    
    .order-item-details h3 {
        font-size: 16px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-wrap: break-word !important;
    }
    
    .order-item-meta {
        min-width: 90px;
        flex-shrink: 0;
        text-align: right;
    }
    
    .order-item-quantity,
    .order-item-price {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    
    .review-btn,
    .details-btn {
        font-size: 12px !important;
        padding: 6px 10px !important;
        margin-bottom: 5px !important;
    }
}












/* Product Reviews Page Layout */
.review-page {
    max-width: 800px;
    margin: 70px auto 40px auto;
    padding: 0 20px;
    color: white;
    font-family: 'Inter', sans-serif;
}

.review-page h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 600;
}

.order-info {
    background: #1c1c1c;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.order-info h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
    color: #fff;
    text-align: center;
}

.order-desc {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 10px;
    text-align: center;
}

.order-image {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: 8px;
    margin-top: 10px;
}

.client-product-reviews-back-btn {
    display: inline-block;
    background: #444;
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    margin-bottom: 20px;
    margin-top: 20px;
    transition: background 0.2s ease;
    will-change: background;
}

.client-product-reviews-back-btn:hover {
    background: #666;
}

.review-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.review-tab-btn {
    background: #2a2a2a;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
    will-change: background;
}

.review-tab-btn.active,
.review-tab-btn:hover:not(.disabled) {
    background: #DA0000;
}

.review-tab-btn.disabled {
    background: #444;
    color: #888;
    cursor: not-allowed;
    opacity: 0.6;
    position: relative;
}

.review-tab-btn.disabled:hover {
    background: #444;
    opacity: 0.7;
}

.review-tab-btn.disabled i {
    margin-left: 5px;
    font-size: 12px;
    opacity: 0.8;
}

.review-guidelines {
    margin-bottom: 15px;
}

.review-guidelines p {
    font-size: 14px;
    color: #ccc;
    text-align: center;
}

.review-message {
    position: relative;
    padding: 10px 30px 10px 10px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 15px;
    text-align: center;
    opacity: 0;
    animation: fadeIn 0.3s ease-in forwards;
}

.review-error {
    background: #DA0000;
    color: #fff;
}

.review-success {
    background: #4CAF50;
    color: #fff;
}

.message-close {
    position: absolute;
    top: 6px;
    right: 10px;
    font-size: 18px;
    cursor: pointer;
    color: #fff;
    transition: color 0.2s ease;
}

.message-close:hover {
    color: #000;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.review-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #222;
    padding: 20px;
    border-radius: 12px;
}

.review-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.review-field label {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

.review-field select,
.review-field textarea,
.review-field input[type="file"] {
    padding: 10px;
    border: 1px solid #444;
    border-radius: 6px;
    background: #2a2a2a;
    color: #fff;
    font-size: 14px;
}

.review-field select:focus,
.review-field textarea:focus,
.review-field input[type="file"]:focus {
    outline: none;
    border-color: #DA0000;
    box-shadow: 0 0 0 2px rgba(218, 0, 0, 0.3);
}

.review-field textarea {
    min-height: 120px;
    resize: vertical;
}

.review-image,
.review-image-preview img {
    width: 100%;
    max-width: 200px;
    height: auto;
    margin-top: 10px;
    border-radius: 6px;
    object-fit: contain;
}

.remove-image-btn {
    background: #666;
    color: #fff;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s ease;
    will-change: background;
}

.remove-image-btn:hover {
    background: #DA0000;
}

.review-submit {
    background: #DA0000;
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
    will-change: background;
}

.review-submit:hover {
    background: #b30000;
}

.review-submit:disabled {
    background: #666;
    cursor: not-allowed;
}

.form-help-text {
    font-size: 12px;
    color: #aaa;
    margin-top: 4px;
}

/* Delivery Confirmation Section */
.delivery-confirmation-section {
    background: linear-gradient(135deg, #1c1c1c 0%, #2a2a2a 100%);
    border: 2px solid #DA0000;
    border-radius: 12px;
    padding: 25px;
    margin: 25px 0;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    box-shadow: 0 4px 15px rgba(218, 0, 0, 0.15);
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.delivery-confirmation-section:hover {
    box-shadow: 0 6px 20px rgba(218, 0, 0, 0.25);
    transform: translateY(-2px);
}

.delivery-confirmation-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: rgba(218, 0, 0, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #DA0000;
    border: 2px solid #DA0000;
}

.delivery-confirmation-content {
    flex: 1;
    min-width: 0;
}

.delivery-confirmation-title {
    margin: 0 0 12px 0;
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.delivery-confirmation-text {
    margin: 0 0 20px 0;
    font-size: 15px;
    line-height: 1.6;
    color: #ccc;
    font-family: 'Inter', sans-serif;
}

.delivery-confirmation-text strong {
    color: #DA0000;
    font-weight: 600;
}

.delivery-confirmation-form {
    display: inline-block;
}

.delivery-confirmation-btn {
    background: linear-gradient(135deg, #DA0000 0%, #a30000 100%);
    color: #fff;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 2px 8px rgba(218, 0, 0, 0.3);
}

.delivery-confirmation-btn:hover {
    background: linear-gradient(135deg, #ff1a1a 0%, #DA0000 100%);
    box-shadow: 0 4px 12px rgba(218, 0, 0, 0.4);
    transform: translateY(-2px);
}

.delivery-confirmation-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(218, 0, 0, 0.3);
}

.delivery-confirmation-btn i {
    font-size: 18px;
}

@media (max-width: 600px) {
    .delivery-confirmation-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }
    
    .delivery-confirmation-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
    
    .delivery-confirmation-title {
        font-size: 20px;
    }
    
    .delivery-confirmation-text {
        font-size: 14px;
    }
    
    .delivery-confirmation-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
    }
}

.error-message {
    text-align: center;
    font-size: 18px;
    margin-top: 40px;
    color: #DA0000;
}

/* Responsive */
@media (max-width: 768px) {
    .review-page {
        padding: 0 10px;
    }
    .review-tabs {
        flex-direction: row;
        gap: 10px;
        flex-wrap: wrap;
    }
    .review-tab-btn {
        flex: 1;
        min-width: 120px;
    }
    .order-image {
        max-width: 150px;
    }
}












/* Client Order Details Page */
.client-order-details-container {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem;
    padding-top: 20px;
    font-family: 'Inter', sans-serif;
}

.client-order-details-back-btn {
    display: inline-block;
    margin-bottom: 1.5rem;
    padding: 0.5rem 1rem;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 500;
    transition: background-color 0.3s;
}

.client-order-details-back-btn:hover {
    background-color: #555;
}

.client-order-details-section,
.client-order-items-section,
.client-order-payment-info-section,
.client-order-delivery-info-section {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.client-order-details-section h2,
.client-order-items-section h2,
.client-order-payment-info-section h2,
.client-order-delivery-info-section h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}

.client-order-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* On desktop and tablet, adjust grid to prevent overlap */
@media (min-width: 768px) {
    .client-order-details-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
    }
    
    /* Move the second column (Order No. and Total Amount Paid) to the right by 80px */
    .client-order-details-grid .client-order-detail-item:nth-child(2),
    .client-order-details-grid .client-order-detail-item:nth-child(5) {
        padding-left: 80px;
    }
}

@media (min-width: 1024px) {
    .client-order-details-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
    }
    
    /* Ensure proper spacing on larger screens */
    .client-order-details-grid .client-order-detail-item:nth-child(2),
    .client-order-details-grid .client-order-detail-item:nth-child(5) {
        padding-left: 80px;
    }
}

.client-order-payment-info-grid,
.client-order-delivery-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.client-order-detail-item,
.client-order-payment-info-item,
.client-order-delivery-info-item {
    display: flex;
    flex-direction: column;
}

.client-order-details-label {
    font-weight: 500;
    color: #555;
    margin-bottom: 0.25rem;
}

.client-order-details-value {
    color: #333;
}

.client-order-payment-info-item.client-order-payment-total {
    font-weight: 600;
    border-top: 1px solid #eee;
    padding-top: 0.5rem;
}

.client-order-item {
    display: grid;
    grid-template-columns: 100px 1fr 150px;
    gap: 1rem;
    padding: 1rem 0;
}

.client-order-item-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    object-fit: cover;
}

.client-order-item-details h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.client-order-item-details .client-order-item-description {
    color: #666;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.client-order-item-details p {
    margin: 0.25rem 0;
}

.client-order-item-action {
    display: flex;
    align-items: center;
}

.client-order-buy-again-btn {
    background-color: #c00;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s;
}

.client-order-buy-again-btn:hover {
    background-color: #a00;
}

.client-order-item-status {
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
}

.client-order-item-status p {
    margin: 0.25rem 0;
}

.client-order-status {
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
}

.client-order-status.completed {
    background-color: #e6f4ea;
    color: #2e7d32;
}

.client-order-status.cancelled {
    background-color: #ffebee;
    color: #d32f2f;
}

.client-order-status.pending,
.client-order-status.paid,
.client-order-status.shipped {
    background-color: #fff3e0;
    color: #f57c00;
}

@media (max-width: 768px) {
    .maincontainer > .nav + .client-order-details-container {
        padding-top: 20px !important; /* Professional space below navbar - override nav + * rule */
    }
    
    .client-order-details-container {
        margin-top: 0 !important; /* Reset margin since maincontainer handles navbar spacing */
        padding-top: 20px !important; /* Professional space below navbar */
        padding-left: 15px !important; /* Professional spacing on left */
        padding-right: 15px !important; /* Professional spacing on right */
    }

    .client-order-item {
        grid-template-columns: 80px 1fr;
        grid-template-areas: 
            "image details"
            "action action";
        gap: 0.5rem;
    }

    .client-order-item-image {
        grid-area: image;
    }

    .client-order-item-details {
        grid-area: details;
    }

    .client-order-item-action {
        grid-area: action;
        justify-content: flex-start;
    }

    .client-order-details-grid,
    .client-order-payment-info-grid,
    .client-order-delivery-info-grid {
        grid-template-columns: 1fr;
    }

    .client-order-details-section,
    .client-order-items-section,
    .client-order-payment-info-section,
    .client-order-delivery-info-section {
        padding: 1.2rem 18px !important; /* Professional spacing inside tiles - more space on left/right */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media screen and (max-width: 640px) {
    .maincontainer > .nav + .client-order-details-container {
        padding-top: 20px !important; /* Professional space below navbar - override nav + * rule */
    }
    
    .client-order-details-container {
        margin-top: 0 !important; /* Reset margin since maincontainer handles navbar spacing */
        padding-top: 20px !important; /* Professional space below navbar */
        padding-left: 40px !important; /* More professional spacing on left for mobile */
        padding-right: 40px !important; /* More professional spacing on right for mobile */
    }

    .client-order-details-section,
    .client-order-items-section,
    .client-order-payment-info-section,
    .client-order-delivery-info-section {
        padding: 1rem 20px !important; /* More professional spacing inside tiles on mobile - increased left/right */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 480px) {
    .client-order-details-container {
        margin-top: 60px !important; /* Professional space below mobile navbar */
        padding: 15px 12px !important; /* Professional spacing on left and right */
    }

    .client-order-details-section h2,
    .client-order-items-section h2,
    .client-order-payment-info-section h2,
    .client-order-delivery-info-section h2 {
        font-size: 1.25rem;
    }

    .client-order-item-image img {
        width: 60px;
    }

    .client-order-buy-again-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }

    .client-order-details-section,
    .client-order-items-section,
    .client-order-payment-info-section,
    .client-order-delivery-info-section {
        padding: 0.9rem !important; /* Professional spacing inside tiles */
    }
}












/* Share and Favourites Icon Styles */
.program-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
    z-index: 5; /* Ensure above other elements */
}

.favourite-icon, .share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; /* No background by default */
    border: none; /* Remove border for minimal design */
    font-size: 24px;
    line-height: 24px;
    cursor: pointer;
    color: #fff; /* White icon color */
    transition: color 0.3s ease, background 0.3s ease;
    padding: 8px; /* Padding to ensure clickable area */
    border-radius: 50%; /* Maintain hover effect shape */
    position: relative; /* For tooltip positioning */
}

.favourite-icon:hover, .share-icon:hover {
    color: #DA0000; /* Red on hover */
    background: rgba(255, 255, 255, 0.1); /* Subtle background on hover */
}

.favourite-icon.favourited {
    color: #DA0000; /* Red when favourited */
    background: rgba(255, 255, 255, 0.1); /* Match hover background */
}

.favourite-icon i, .share-icon i {
    font-size: 24px;
    line-height: 24px;
}

/* Tooltips */
.favourite-icon::after, .share-icon::after {
    content: attr(aria-label); /* Use aria-label for tooltip text */
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333; /* Dark background for tooltip */
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10;
}

.favourite-icon:hover::after, .share-icon:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Notification Styles */
.action-notification {
    position: fixed;
    top: 80px; /* Just below navbar (70px) + 10px gap */
    left: 50%;
    transform: translateX(-50%) translateY(-100px); /* Start above viewport */
    padding: 14px 24px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                visibility 0.4s ease, 
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999; /* Below modals but above navbar */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    text-align: center;
    min-width: 200px;
    max-width: calc(100% - 40px); /* Responsive max-width with padding */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    word-wrap: break-word;
}

.action-notification.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* Slide down to position */
    pointer-events: auto;
}

.action-notification.success {
    background: #22c55e; /* Green for success */
}

.action-notification.error {
    background: #ef4444; /* Red for error */
}

/* Mobile: Adjust position and styling for smaller navbar (60px) */
@media screen and (max-width: 640px) {
    .action-notification {
        top: 70px; /* Just below mobile navbar (60px) + 10px gap */
        padding: 12px 20px;
        font-size: 14px;
        min-width: 180px;
        max-width: calc(100% - 20px); /* More padding on mobile */
        white-space: normal; /* Allow text wrapping on mobile */
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* Share Modal Styles */
.share-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.share-modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    text-align: center;
}

.share-modal-close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
}

.share-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.share-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #f5f5f5;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    font-size: 16px;
    transition: background 0.3s ease;
}

.share-option:hover {
    background: #e0e0e0;
}











/* Hero section - Films */
.hero_films {
    margin-top: 70px;
    position: relative;
    width: 100%;
    height: calc(100vh - 70px);
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../Images/films/films_hero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.hero_films-content {
    position: relative;
    z-index: 2; /* must be above the overlay */
    max-width: 800px;
    color: white;
    animation: fadeIn 1.2s ease-out forwards;
    opacity: 0;
}

.hero_films h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero_films h3 {
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 2rem;
}

/* Films Section */
.films_section {
    text-align: center;
    padding: 50px 20px;
    width: 96%;
    margin: auto;
}

.films_section h3 {
    font-size: 2rem;
    margin-bottom: 40px;
    margin-top: 40px;
    text-transform: uppercase;
    color: white;
}

.films-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* center items horizontally */
    gap: 20px;
}

.films-tile {
    flex: 0 1 300px;   /* each tile has a max width ~300px, shrinks if needed */
    max-width: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.films-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.films-thumbnail {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 ratio */
    overflow: hidden;
}

.films-thumbnail img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
}

.films-tile:hover .films-thumbnail img {
    filter: brightness(70%);
}

.films-play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 30px;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    cursor: pointer;
}

.films-details {
    padding: 15px;
    display: flex;
    flex-direction: column;
}

.films-details h4 {
    font-size: 18px;
    font-weight: 600;
    min-height: 36px; /* Uniform height for titles */
}

.films-details p {
    min-height: 40px; /* Uniform height for descriptions */
}

.films-details .short-description {
    font-size: 0.95rem;
    color: #333;
    margin: 0 0 8px;
    line-height: 1.3;
    min-height: 40px; /* Match existing min-height for descriptions */
}

.films-details .duration-price {
    font-size: 0.95rem;
    color: #333;
    margin: 0;
}

.films-details .price {
    font-weight: bold;
    color: #333;
}

.films-view-btn {
    margin-top: auto;
    width: 100%;
    padding: 10px;
    background-color: #DA0000; /* Your theme red */
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.films-view-btn:hover {
    background-color: #b30000;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .films-details h4 {
        font-size: 16px;
    }
}

/* Modal Styles */
.video-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
}

.video-modal.show {
  display: flex;
}

.video-modal-content {
  position: relative;
  width: 75vw; /* 3/4 of window width */
  height: 75vh; /* 3/4 of window height */
}

.video-modal-content iframe {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.video-modal-close {
  position: absolute;
  top: -30px;
  right: -30px;
  font-size: 40px;
  color: white;
  cursor: pointer;
}











/* View Film Section */
.view-film-container {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    margin-top: 70px;
    color: white;
}

.film-video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    border-radius: 8px;
    overflow: hidden;
}

/* Film Top Section */
.film-top-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Video Section */
.film-video-section {
    flex: 1 1 600px;
    position: relative;
    max-width: 600px;
}

.film-thumbnail-container,
.film-video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.film-video-player {
    display: none; /* hidden until play */
}

.film-thumbnail-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: filter 0.3s ease;
}

.play-button-view-film {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    color: white;
    background: rgba(0,0,0,0.5);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 10px 20px;
    transition: background 0.3s ease, filter 0.3s ease;
}

.play-button-view-film:hover {
    background: rgba(0,0,0,0.7);
}

.film-video-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

/* Film Info Section */
.film-info-section {
    flex: 1 1 400px;
    display: block;
    padding-top: 20px;
}

.film-info-inner {
    text-align: center;
}

.film-price {
    font-size: 20px;
    margin: 10px 0;
}

.add-to-cart-btn {
    width: 100%;
    background: #DA0000;
    color: white;
    border: none;
    padding: 12px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}

.add-to-cart-btn:hover {
    background: #a30000;
}

/* Film Actions */
.film-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

@media (max-width: 480px) {
    .film-actions {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

.favourite-icon:hover, .share-icon:hover {
    color: #DA0000; /* Red on hover */
    background: rgba(255, 255, 255, 0.1); /* Subtle background on hover */
}

.favourite-icon.favourited {
    color: #DA0000; /* Red when favourited */
    background: rgba(255, 255, 255, 0.1); /* Match hover background */
}

.favourite-icon i, .share-icon i {
    font-size: 24px;
    line-height: 24px;
}

/* Film Details Section */
.film-details-section {
    margin-top: 40px;
}

.film-details-section h2 {
    margin-bottom: 10px;
    text-align: left;
}

.film-details-section p {
    margin-bottom: 10px;
    text-align: left;
}

/* Share Modal */
.share-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
}

.share-modal[aria-hidden="false"] {
    display: flex;
}

.share-modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    position: relative;
    max-width: 400px;
    width: 90%;
    text-align: center;
}

.share-modal-close {
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
}

.share-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.share-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #f0f0f0;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.3s ease;
}

.share-option:hover {
    background: #e0e0e0;
}

/* Notification */
/* Duplicate .action-notification removed - using consolidated style above */

/* Responsive adjustments */
@media (max-width: 768px) {
    .film-top-section {
        flex-direction: column;
        align-items: center;
        gap: 0 !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }

    .film-video-section {
        margin: 0 !important;
        padding: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        flex: 0 0 auto !important; /* Override flex: 1 1 600px */
        width: 100% !important;
        line-height: 0 !important;
    }

    .film-video-wrapper {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        height: auto !important;
        line-height: 0 !important;
    }

    .film-thumbnail-container,
    .film-video-player {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        top: auto !important;
        left: auto !important;
    }

    .film-thumbnail-container img,
    .film-video-player iframe {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        border-radius: 8px;
        display: block;
        margin: 0 !important;
        padding: 0 !important;
        top: auto !important;
        left: auto !important;
        vertical-align: top !important;
    }
    
    .film-info-section {
        padding-top: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        flex: 0 0 auto !important; /* Override flex: 1 1 400px to fit content */
        display: block !important;
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        align-self: flex-start !important; /* Align to start, don't stretch */
    }
    
    .film-info-inner {
        margin-top: 0 !important;
        padding-top: 0 !important;
        width: 100% !important;
        display: block !important;
    }
    
    .film-actions {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    .film-details-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* Film View Mobile Spacing Adjustments - Following product.php pattern */
@media (max-width: 480px) {
    /* Container spacing - same as product.php */
    .view-film-container {
        margin-top: 0 !important;
        padding-top: 20px !important; /* Professional spacing inside maincontainer */
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Remove gap between video and info sections - use direct child selector for specificity */
    .view-film-container > .film-top-section {
        gap: 0 !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }
    
    .film-top-section {
        gap: 0 !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }
    
    /* Remove all spacing from film video section - comprehensive override */
    .film-video-section {
        margin: 0 !important;
        padding: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        flex: 0 0 auto !important; /* Override flex: 1 1 600px */
        max-width: 100% !important; /* Override max-width: 600px */
        width: 100% !important;
        position: relative !important;
        line-height: 0 !important;
    }
    
    .film-video-wrapper {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        height: auto !important;
        line-height: 0 !important;
        position: relative !important;
    }
    
    /* Remove spacing from thumbnail container - override absolute positioning */
    .film-thumbnail-container {
        position: relative !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        line-height: 0 !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
    }
    
    .film-video-player {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .film-thumbnail-container img {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        vertical-align: top !important;
        object-fit: contain !important;
    }
    
    .film-video-player iframe {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Remove any spacing from play button */
    .play-button-view-film {
        margin: 0 !important;
    }
    
    /* Remove padding-top from film info section - make it fit content height exactly */
    .film-info-section {
        padding-top: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 15px !important; /* Just enough space before film-details-section */
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        flex: 0 0 auto !important; /* Override flex: 1 1 400px to fit content */
        display: block !important;
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        align-self: flex-start !important; /* Align to start, don't stretch */
    }
    
    .film-info-inner {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        width: 100% !important;
        display: block !important;
    }
    
    /* Remove spacing from br tags in film info */
    .film-info-inner br {
        display: none !important;
        line-height: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
    }
    
    /* Remove all margins on film info elements */
    .film-info-inner h2 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .film-info-inner p {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .film-info-inner .short-description {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .film-info-inner .film-price,
    .film-price {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .film-info-inner .film-price strong,
    .film-price strong {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Add professional spacing above and below add to cart button */
    .film-info-inner .add-to-cart-btn,
    .film-info-section .add-to-cart-btn,
    .view-film-container .add-to-cart-btn {
        margin-top: 20px !important; /* Professional spacing above button after price */
        margin-bottom: 20px !important; /* Professional spacing below button before actions */
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        text-decoration: none !important; /* Remove text underline */
        display: block !important; /* Ensure block display for proper spacing */
    }
    
    .film-info-inner .add-to-cart-btn:hover,
    .film-info-inner .add-to-cart-btn:focus,
    .film-info-inner .add-to-cart-btn:active {
        text-decoration: none !important; /* Remove text underline on hover/focus/active */
    }
    
    /* Remove margin-top from film actions - this creates space after cart button */
    .film-actions {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Remove margin-top from film details section - minimal spacing from film-info-section */
    .view-film-container > .film-details-section {
        margin-top: 0 !important; /* Spacing handled by film-info-section margin-bottom */
        padding-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .film-details-section {
        margin-top: 0 !important; /* Spacing handled by film-info-section margin-bottom */
        padding-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .film-details-section h2 {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }
    
    .film-details-section p {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }
}

/* Program View Mobile Spacing Adjustments - Following view_film.php pattern */
@media (max-width: 480px) {
    /* Container spacing - same as view_film.php */
    .view-combat-program-container {
        margin-top: 0 !important;
        padding-top: 20px !important; /* Professional spacing inside maincontainer */
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Remove gap between video and info sections */
    .view-combat-program-container > .program-top-section {
        gap: 0 !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }
    
    .program-top-section {
        gap: 0 !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }
    
    /* Remove spacing from program video section */
    .program-video-section {
        margin: 0 !important;
        padding: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        width: 100% !important;
    }
    
    .program-video-wrapper {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
    }
    
    .program-video-wrapper {
        position: relative !important;
        width: 100% !important;
        aspect-ratio: 16 / 9 !important; /* Landscape aspect ratio for videos */
        overflow: hidden !important;
    }
    
    .program-thumbnail-container,
    .program-video-player {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .program-thumbnail-container img,
    .program-video-player iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 8px !important;
    }
    
    /* Remove padding-top from program info section - add minimal bottom spacing */
    .program-info-section {
        padding-top: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 15px !important; /* Just enough space before program-details-section */
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        flex: 0 0 auto !important;
        display: block !important;
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        align-self: flex-start !important;
    }
    
    .program-info-inner {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        width: 100% !important;
        display: block !important;
    }
    
    /* Remove spacing from br tags in program info */
    .program-info-inner br {
        display: none !important;
        line-height: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
    }
    
    /* Remove all margins on program info elements */
    .program-info-inner h2 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .program-info-inner p {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .program-info-inner .short-description {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .program-info-inner .program-price,
    .program-price {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .program-info-inner .program-price strong,
    .program-price strong {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Add spacing above and below add to cart button */
    .program-info-inner .add-to-cart-btn,
    .program-info-section .add-to-cart-btn,
    .view-combat-program-container .add-to-cart-btn {
        margin-top: 15px !important; /* Space above button after price */
        margin-bottom: 15px !important; /* Space below button before actions */
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        display: block !important; /* Ensure block display for proper spacing */
    }
    
    /* Ensure spacing is applied even when button comes after price with br tag */
    .program-info-inner .program-price + br + .add-to-cart-btn,
    .program-info-inner .program-price + .add-to-cart-btn {
        margin-top: 15px !important;
    }
    
    /* Add spacing for program actions */
    .program-actions {
        margin-top: 15px !important; /* Space above actions after button */
        padding-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Ensure spacing before program actions when they come after add-to-cart button */
    .program-info-inner .add-to-cart-btn + .program-actions,
    .program-info-inner .add-to-cart-btn + br + .program-actions {
        margin-top: 15px !important;
    }
    
    /* Remove margin-top from program details section - spacing handled by program-info-section margin-bottom */
    .view-combat-program-container > .program-details-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .program-details-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .program-details-section h2 {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }
    
    .program-details-section p {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }
}











/* Warrior Film Page */
.user-film-container {
    padding: 20px;
    background: #1a1a1a;
    border-radius: 8px;
    width: 96%;
    margin: 20px auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.user-film-main {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.user-film-video-player {
    position: relative;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

#user-film-video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.user-film-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.user-film-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.user-film-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 36px;
    border: none;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.2s ease;
}

.user-film-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.user-film-title {
    font-size: 28px;
    margin: 14px 0 8px;
    color: #fff;
    font-weight: 600;
    text-align: center;
}

.user-film-short-description {
    font-size: 16px;
    color: #aaa;
    margin: 0;
    text-align: center;
}

.user-film-description {
    font-size: 14px;
    color: #ccc;
    margin: 10px 0;
    line-height: 1.6;
    text-align: justify;
}

.user-film-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.user-film-review-btn, .user-film-share-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.user-film-review-btn {
    background: #DA0000;
    color: #fff;
}

.user-film-review-btn:hover {
    background: #b30000;
}

.user-film-share-btn {
    background: linear-gradient(135deg, #DA0000, #b30000);
    color: #fff;
}

.user-film-share-btn:hover {
    background: linear-gradient(135deg, #b30000, #8b0000);
}

.user-film-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
}

.user-film-modal.show {
    display: flex;
}

.user-film-modal-content {
    background: #222;
    padding: 25px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    color: #fff;
}

.user-film-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
    color: #fff;
}

.user-film-share-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    padding: 10px 0;
}

.user-film-share-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #333;
    color: #fff;
    border-radius: 8px;
    text-align: left;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s ease, transform 0.2s ease;
}

.user-film-share-option:hover {
    background: #444;
    transform: translateY(-2px);
}

.user-film-share-option i {
    font-size: 18px;
}

.user-film-share-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #fff;
}

.user-film-share-notification.show {
    opacity: 1;
}

.user-film-share-notification.success {
    background: #28a745;
}

.user-film-share-notification.error {
    background: #ff0000;
}

.user-film-review-modal-content {
    max-height: 80vh;
    overflow-y: auto;
    background: #222;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    width: 90%;
    max-width: 600px;
    color: #fff;
    scrollbar-width: thin;
    scrollbar-color: #555 #333;
}

.user-film-review-modal-content::-webkit-scrollbar {
    width: 8px;
}

.user-film-review-modal-content::-webkit-scrollbar-track {
    background: #333;
    border-radius: 4px;
}

.user-film-review-modal-content::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

.user-film-review-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.user-film-review-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.user-film-review-field label {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

.user-film-review-field select,
.user-film-review-field textarea {
    padding: 10px;
    border: 1px solid #444;
    border-radius: 6px;
    background: #2a2a2a;
    color: #fff;
    font-size: 14px;
}

.user-film-review-field select:focus,
.user-film-review-field textarea:focus {
    outline: none;
    border-color: #DA0000;
    box-shadow: 0 0 0 2px rgba(218, 0, 0, 0.3);
}

.user-film-review-field textarea {
    min-height: 120px;
    resize: vertical;
}

.user-film-review-submit {
    background: #DA0000;
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.user-film-review-submit:hover {
    background: #b30000;
}

@media (max-width: 768px) {
    .user-film-container {
        padding: 10px;
    }
}

/* Mobile phone spacing for film.php - add space below navigation bar */
@media (max-width: 480px) {
    /* Exception: User film container needs top spacing - override nav + * rule */
    .maincontainer > .nav + .user-film-container,
    .maincontainer .user-film-container {
        margin-top: 0 !important;
        padding-top: 8px !important; /* Professional spacing below navbar - increased for visibility */
    }

    .user-film-main {
        max-width: 100%;
    }

    .user-film-title {
        font-size: 22px;
    }

    .user-film-main {
        max-width: 100%;
    }

    .user-film-title {
        font-size: 22px;
    }

    .user-film-short-description {
        font-size: 14px;
    }

    .user-film-description {
        font-size: 13px;
    }

    .user-film-actions {
        flex-direction: column;
        gap: 8px;
    }

    .user-film-review-btn, .user-film-share-btn {
        width: 100%;
    }
}











/* Film Error Mobile Styles */
@media (max-width: 480px) {
    /* Ensure maincontainer has padding-top for black background spacing */
    .maincontainer:has(> .user-film-error) {
        padding-top: 20px !important; /* Top padding for space below navbar on mobile - shows black background */
    }
    
    .user-film-error {
        margin-top: 0 !important; /* No top margin - padding on maincontainer handles spacing */
        margin-left: 15px !important;
        margin-right: 15px !important;
        margin-bottom: 40px !important;
        padding: 30px 20px;
        max-width: calc(100% - 30px); /* Account for left/right margins */
    }
}

/* My Favourites Page - Professional & Responsive */
.favourites-page {
    max-width: 1200px;
    margin: 70px auto 40px auto;
    padding: 0 20px;
    color: white;
    font-family: 'Inter', sans-serif;
}

.favourites-page h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
    font-weight: 600;
}

.empty-favourites {
    text-align: center;
    font-size: 18px;
    color: #ccc;
    margin: 40px 0;
}

.category-section {
    margin-bottom: 40px;
}

.category-section h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #fff;
    border-bottom: 1px solid #DA0000;
    padding-bottom: 8px;
}

.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 20px;
    justify-content: center;
}

.favourite-item {
    display: flex;
    align-items: flex-start;
    background: #1c1c1c;
    border-radius: 12px;
    padding: 15px;
    gap: 20px;
    max-width: 580px;
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.favourite-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(218, 0, 0, 0.2);
}

.my-favourites-item-thumbnail img {
    width: 100px;
    height: auto;
    aspect-ratio: 2 / 3; /* Portrait aspect ratio for all items - uniform, professional, elegant */
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: #333;
}

.item-details {
    flex: 1;
    min-width: 0;
}

.item-details h4 {
    margin: 0 0 8px 0;
    font-size: 20px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-desc {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-type,
.item-variant {
    font-size: 13px;
    color: #aaa;
    margin-bottom: 5px;
}

.item-price {
    font-weight: 600;
    font-size: 16px;
    color: #DA0000;
    margin-top: 8px;
}

.item-actions {
    text-align: right;
    min-width: 100px;
    flex-shrink: 0;
}

.action-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.1s ease;
    will-change: background, transform;
}

.action-btn:hover {
    transform: translateY(-1px);
}

.action-btn.primary {
    background: #DA0000;
    color: #fff;
}

.action-btn.primary:hover {
    background: #b30000;
}

.action-btn.success {
    background: #4CAF50;
    color: #fff;
}

.action-btn.success:hover {
    background: #3d8b40;
}

.action-btn.warning {
    background: #FFC107;
    color: #000;
}

.action-btn.warning:hover {
    background: #e0a800;
}

/* Responsive */
@media (max-width: 768px) {
    .items-grid {
        grid-template-columns: 1fr;
    }

    .favourite-item {
        max-width: 100%;
        flex-direction: row;
        align-items: flex-start;
    }

    .my-favourites-item-thumbnail img {
        width: 100px;
        height: auto;
        aspect-ratio: 2 / 3; /* Portrait aspect ratio for all items - uniform, professional, elegant */
    }

    .item-actions {
        min-width: 90px;
    }

    .action-btn {
        padding: 8px;
        font-size: 13px;
    }
}

.action-btn + form {
    margin-top: 8px;
}

.action-btn.remove {
    background: #444;
    color: #fff;
}

.action-btn.remove:hover {
    background: #666;
}

.favourites-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.pagination-btn {
    background: #2a2a2a;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease;
    will-change: background;
}

.pagination-btn:hover {
    background: #DA0000;
}

.favourites-error {
    background: #DA0000;
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 15px;
    text-align: center;
    opacity: 0;
    animation: fadeIn 0.3s ease-in forwards;
    transition: opacity 0.3s ease-out;
}

.favourites-success {
    background: #4CAF50;
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 15px;
    text-align: center;
    opacity: 0;
    animation: fadeIn 0.3s ease-in forwards;
    transition: opacity 0.3s ease-out;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

@media screen and (max-width: 640px) {
    .favourite-item {
        display: grid;
        grid-template-columns: 100px 1fr;
        grid-template-areas: 
            "thumbnail details"
            "actions actions";
        gap: 15px;
        align-items: start;
    }

    .my-favourites-item-thumbnail {
        grid-area: thumbnail;
        align-self: start;
    }

    .my-favourites-item-thumbnail img {
        width: 100px;
        height: auto;
        aspect-ratio: 2 / 3; /* Portrait aspect ratio for all items - uniform, professional, elegant */
        object-fit: cover;
        border-radius: 8px;
    }

    .item-details {
        grid-area: details;
        flex: 1;
        min-width: 0;
    }

    .item-details h4 {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-wrap: break-word;
        font-size: 16px;
        margin-bottom: 6px;
    }

    .item-desc {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .item-type,
    .item-variant {
        font-size: 12px;
        margin-bottom: 4px;
    }

    .item-price {
        font-size: 16px;
        font-weight: 600;
        margin-top: 8px;
    }

    .item-actions {
        grid-area: actions;
        text-align: center;
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0px;
        margin-top: 0;
        padding: 0; /* Professional left and right margins */
        box-sizing: border-box;
    }

    .action-btn {
        width: 100%;
        margin: 0;
    }
}










/* My Events Page Layout */
.events-page {
    max-width: 1200px;
    margin: 70px auto 40px auto;
    padding: 0 20px;
    color: white;
    font-family: 'Inter', sans-serif;
}

.events-page h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
    font-weight: 600;
}

.events-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.events-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 20px;
    justify-content: center;
}

.event-item {
    display: flex;
    align-items: flex-start;
    background: #1c1c1c;
    border-radius: 12px;
    padding: 15px;
    gap: 20px;
    max-width: 580px;
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.event-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(218, 0, 0, 0.2);
}

.event-item-thumbnail img {
    width: 100px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: #333;
}

.event-item-details {
    flex: 1;
    min-width: 0;
}

.event-item-details h3 {
    margin: 0 0 8px 0;
    font-size: 20px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-item-short-desc {
    font-size: 16px;
    color: #ccc;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-item-long-desc {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-item-category,
.event-item-datetime,
.event-item-venue,
.event-item-charges {
    font-size: 13px;
    margin-bottom: 5px;
    color: #aaa;
}

.event-item-charges {
    font-weight: 600;
    color: #DA0000;
}

.event-item-meta {
    text-align: right;
    min-width: 100px;
    flex-shrink: 0;
}

.view-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    background: #DA0000;
    color: #fff;
    transition: background 0.2s ease, transform 0.1s ease;
    will-change: background, transform;
}

.view-btn:hover {
    background: #b30000;
    transform: translateY(-1px);
}

.events-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.pagination-btn {
    background: #2a2a2a;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease;
    will-change: background;
}

.pagination-btn:hover {
    background: #DA0000;
}

.empty-events {
    text-align: center;
    font-size: 18px;
    margin-top: 40px;
    color: #ccc;
}

/* Responsive */
@media (max-width: 768px) {
    .events-list {
        grid-template-columns: 1fr;
    }
    .event-item {
        max-width: 100%;
        flex-direction: row;
        align-items: flex-start;
    }
    .event-item-thumbnail img {
        width: 100px;
        aspect-ratio: 2 / 3;
    }
    .event-item-meta {
        min-width: 90px;
    }
    .view-btn {
        padding: 8px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .event-item {
        flex-direction: column;
        align-items: stretch;
    }
    .event-item-thumbnail {
        align-self: center;
    }
    .event-item-thumbnail img {
        width: 100%;
        max-width: 200px;
        aspect-ratio: 2 / 3;
    }
    .event-item-meta {
        text-align: center;
        margin-top: 10px;
    }
}












/* Feedback Page Layout */
.feedback-page {
    max-width: 800px;
    margin: 70px auto 40px auto;
    padding: 0 20px;
    color: white;
    font-family: 'Inter', sans-serif;
}

.feedback-page h2 {
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
}

.feedback-instructions {
    text-align: center;
    font-size: 16px;
    color: #ccc;
    margin-bottom: 30px;
    line-height: 1.5;
}

.feedback-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #1c1c1c;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.feedback-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feedback-form-group label {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.feedback-form-group input,
.feedback-form-group textarea,
.feedback-form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #444;
    border-radius: 6px;
    background: #2a2a2a;
    color: #fff;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.3s ease;
}

.feedback-form-group input:focus,
.feedback-form-group textarea:focus,
.feedback-form-group select:focus {
    outline: none;
    border-color: #DA0000;
}

.feedback-form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.feedback-form-group select {
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201L6%206L11%201%22%20stroke%3D%22%23ccc%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

.feedback-submit-btn {
    background: #DA0000;
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.1s ease;
    align-self: center;
    width: 100%;
    max-width: 200px;
}

.feedback-submit-btn:hover {
    background: #b30000;
}

.feedback-success {
    background: #4CAF50;
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 15px;
    text-align: center;
    opacity: 0;
    animation: fadeIn 0.3s ease-in forwards;
    transition: opacity 0.3s ease-out;
}

.feedback-error {
    background: #DA0000;
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 15px;
    text-align: center;
    opacity: 0;
    animation: fadeIn 0.3s ease-in forwards;
    transition: opacity 0.3s ease-out;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Responsive */
@media (max-width: 768px) {
    .feedback-page {
        padding: 0 15px;
    }

    .feedback-form {
        padding: 20px;
    }

    .feedback-submit-btn {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .feedback-page h2 {
        font-size: 24px;
    }

    .feedback-instructions {
        font-size: 14px;
    }

    .feedback-form-group label {
        font-size: 13px;
    }

    .feedback-form-group input,
    .feedback-form-group textarea,
    .feedback-form-group select {
        font-size: 13px;
    }
}













/* Main Reviews Page CSS */

/* Hero */
.main-reviews-page-hero {
    text-align: center;
    padding: 60px 20px;
    color: #ffffff;
}

.main-reviews-page-hero h1 {
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0;
}

/* Filter Bar */
.main-reviews-page-filter-bar {
    padding: 20px;
    position: sticky;
    top: 70px;
    z-index: 10;
    transition: top 0.3s ease;
}

.main-reviews-page-filter-bar.main-reviews-page-hide {
    top: -60px;
}

.main-reviews-page-search-guideline {
    color: #ffffff;
    font-size: 1rem;
    margin: 0 0 10px;
    text-align: center;
    font-family: 'Inter', sans-serif;
}

.main-reviews-page-filter-form {
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 70%;
    margin: auto;
}

.main-reviews-page-search-wrapper {
    position: relative;
    flex: 1;
}

.main-reviews-page-filter-form-row {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.main-reviews-page-search-input {
    width: 100%;
    padding: 12px 40px 12px 15px;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    background: #2e3536;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
}

.main-reviews-page-clear-search-btn {
    position: absolute;
    right: 12px;
    top: 45%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: #aaaaaa;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-reviews-page-clear-search-btn:hover {
    color: #ffffff;
}

.main-reviews-page-category-select {
    padding: 12px;
    border: none;
    border-radius: 25px;
    background: #2e3536;
    color: #ffffff;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
}

.main-reviews-page-search-btn {
    background: #DA0000;
    color: #ffffff;
    border: none;
    padding: 12px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    gap: 5px;
}

.main-reviews-page-search-btn:hover {
    background: #b30000;
}

/* Main reviews info button */
.main-reviews-page-info-btn {
    background: transparent;
    border: none;
    color: #DA0000;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 10px;
    transition: color 0.3s;
}
.main-reviews-page-info-btn:hover {
    color: #b30000;
}
.main-reviews-page-info-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.main-reviews-page-info-modal.main-reviews-page-active {
    display: flex;
}

.main-reviews-page-info-modal-content {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    max-width: 500px;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.main-reviews-page-info-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
}
.main-reviews-page-info-modal-content h4 {
    margin-bottom: 10px;
    font-size: 1.1rem;
}
.main-reviews-page-info-modal-content ol {
    margin: 0;
    padding-left: 20px;
    font-size: 0.95rem;
    color: #333;
}
.main-reviews-page-info-modal-content li {
    margin-bottom: 8px;
}

/* Content Section */
.main-reviews-page-content-section {
    padding: 40px 20px;
    max-width: 1200px;
    margin: auto;
}

/* Items Grid (Search Results) */
.main-reviews-page-items-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.main-reviews-page-item-tile {
    background: #1c2526;
    color: #ffffff;
    border-radius: 12px;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.main-reviews-page-item-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.main-reviews-page-item-tile h4 {
    font-size: 1.25rem;
    margin: 10px 0;
    font-weight: 600;
}

.main-reviews-page-item-tile p {
    font-size: 0.9rem;
    color: #cccccc;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Selected Item */
.main-reviews-page-selected-item {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
}

.main-reviews-page-item-details {
    max-width: 400px;
    margin: 0 auto 40px;
    text-align: center;
    background: #1c2526;
    padding: 20px;
    border-radius: 12px;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.main-reviews-page-item-short-desc {
    font-size: 0.9rem;
    color: #cccccc;
    margin: 10px 0;
}

.main-reviews-page-item-category {
    font-size: 1rem;
    text-transform: capitalize;
    margin: 10px 0;
}

.main-reviews-page-item-average-rating {
    font-size: 1rem;
    margin: 10px 0;
}

.main-reviews-page-average-star {
    color: #DA0000;
}

.main-reviews-page-item-price {
    font-size: 1rem;
    font-weight: 600;
    margin: 10px 0;
}

.main-reviews-page-view-item-btn {
    width: 100%;
    padding: 12px;
    background: #DA0000;
    color: #ffffff;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1rem;
    text-decoration: none;
    transition: background 0.3s;
}

.main-reviews-page-view-item-btn:hover {
    background: #b30000;
}

/* Reviews Grid/Section */
.main-reviews-page-reviews-section h3 {
    font-size: 2rem;
    margin: 40px 0 20px;
    text-transform: uppercase;
    color: #ffffff;
    text-align: center;
    font-weight: 700;
}

.main-reviews-page-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}

.main-reviews-page-review_tile {
    background: #ffffff;
    padding: 25px;
    box-sizing: border-box;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 233px; /* Fixed height for no image */
    min-height: 233px;
    overflow: hidden;
}

.main-reviews-page-review_tile.main-reviews-page-has-image,
.main-reviews-page-review_tile:has(.main-reviews-page-review_image_placeholder) {
    height: 483px; /* Fixed height for has image or placeholder */
    min-height: 483px;
}

.main-reviews-page-user_pic {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 12px auto;
    border: 2px solid #DA0000;
    flex: 0 0 auto;
    object-fit: cover;
}

.main-reviews-page-stars .main-reviews-page-star {
    font-size: 20px;
    color: #e0e0e0;
}

.main-reviews-page-stars .main-reviews-page-star.main-reviews-page-filled {
    color: #DA0000 !important; /* Reinforce red shading */
}

.main-reviews-page-review_text {
    font-style: italic;
    color: #333333;
    font-size: 0.95rem;
    margin: 14px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color 0.2s ease;
    height: 2.8em; /* Fixed 2 lines */
    min-height: 2.8em;
    flex-grow: 0;
}

.main-reviews-page-review_text:hover {
    color: #DA0000;
}

.main-reviews-page-username {
    font-weight: 600;
    color: #333333;
    font-size: 0.9rem;
    margin-top: auto;
    flex: 0 0 auto;
}

.main-reviews-page-review_tile:not(:has(.main-reviews-page-review_uploaded_image)):not(:has(.main-reviews-page-review_image_placeholder)) {
    justify-content: flex-start;
    gap: 0;
}

.main-reviews-page-review_tile:not(:has(.main-reviews-page-review_uploaded_image)):not(:has(.main-reviews-page-review_image_placeholder)) .main-reviews-page-username {
    margin-top: 0;
}

.main-reviews-page-review_tile:not(:has(.main-reviews-page-review_uploaded_image)):not(:has(.main-reviews-page-review_image_placeholder)) .main-reviews-page-review_text {
    margin-bottom: 0;
}

.main-reviews-page-review_uploaded_image {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center;
    margin-top: 10px;
    border-radius: 12px;
    flex: 0 0 auto;
    aspect-ratio: 2 / 3 !important;
}

.main-reviews-page-reviews-grid .main-reviews-page-review_uploaded_image {
    aspect-ratio: 2 / 3 !important;
}

/* Main Reviews Page Image Placeholder */
.main-reviews-page-review_image_placeholder {
    width: 100%;
    height: 240px;
    min-height: 240px;
    max-height: 240px;
    margin-top: 10px;
    border-radius: 12px;
    flex: 0 0 240px;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e0e0;
    position: relative;
    overflow: hidden;
}

.main-reviews-page-review_image_placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.3) 10px,
        rgba(255, 255, 255, 0.3) 20px
    );
    opacity: 0.3;
}

.main-reviews-page-review_image_placeholder svg {
    width: 56px;
    height: 56px;
    opacity: 0.4;
    position: relative;
    z-index: 1;
}

.main-reviews-page-review_image_placeholder svg path {
    fill: #999;
    stroke: #999;
}

/* Category Sections (Default View) */
.main-reviews-page-category-section {
    margin-bottom: 60px;
}

.main-reviews-page-category-section h3 {
    font-size: 2rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: #ffffff;
    text-align: center;
    font-weight: 700;
}

/* NEW: Full-width container for carousel + buttons */
.main-reviews-page-carousel-container {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

/* Carousel wrapper - now 80% centered */
.main-reviews-page-reviews-carousel-wrapper {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
}

.main-reviews-page-reviews-carousel {
    display: flex;
    gap: 20px;
    transition: transform 600ms ease-in-out;
    width: 100%;
}

.main-reviews-page-reviews-carousel .main-reviews-page-review_tile {
    flex: 0 0 calc(33.333% - 13.333px);
}

/* Buttons positioned in the 10% gaps on each side */
.main-reviews-page-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 2rem;
    color: white;
    transition: color 0.3s ease;
    z-index: 10;
    display: none; /* Hidden by default, shown via JavaScript when needed */
}

.main-reviews-page-carousel-btn:hover {
    color: #DA0000;
}

.main-reviews-page-carousel-btn.main-reviews-page-prev {
    left: 5%;
}

.main-reviews-page-carousel-btn.main-reviews-page-next {
    right: 5%;
}

.main-reviews-page-view-more {
    text-align: center;
    margin-top: 20px;
}

.main-reviews-page-view-more-btn {
    background: #DA0000;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
}

.main-reviews-page-view-more-btn:hover {
    background: #b30000;
}

/* Pagination */
.main-reviews-page-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.main-reviews-page-pag-btn {
    background: #DA0000;
    color: #ffffff;
    padding: 10px 15px;
    border-radius: 25px;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
}

.main-reviews-page-pag-btn.main-reviews-page-disabled {
    background: #666666;
    cursor: not-allowed;
}

.main-reviews-page-pag-btn:hover:not(.main-reviews-page-disabled) {
    background: #b30000;
}

/* REVIEW MODAL */
.main-reviews-page-review-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.main-reviews-page-review-modal.main-reviews-page-active {
    display: flex;
}

.main-reviews-page-review-modal-content {
    background: #ffffff;
    border-radius: 12px;
    max-width: 600px;
    max-height: 80vh;
    width: 100%;
    position: relative;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.main-reviews-page-review-modal-close {
    position: absolute;
    top: 12px;
    right: 20px;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.main-reviews-page-review-modal-close:hover {
    background: #f0f0f0;
    color: #DA0000;
}

.main-reviews-page-review-modal-title {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 20px;
    font-weight: 600;
}

.main-reviews-page-review-modal-text {
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    white-space: pre-wrap;
    max-height: 400px;
    overflow-y: auto;
}

/*  Main Table Reviews*/
.main-reviews-page-reviews-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 30px;
}

.main-reviews-page-review-cell {
    padding: 25px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-bottom: 30px; /* Increased space between reviews */
}

.main-reviews-page-no-reviews {
    text-align: center;
    color: #666666;
    font-size: 1rem;
}

.main-reviews-page-review-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 15px;
}

.main-reviews-page-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-reviews-page-user-pic-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #DA0000;
    object-fit: cover;
}

.main-reviews-page-user-name {
    font-weight: 600;
    color: #333333;
    font-size: 1rem;
    margin: 0;
}

.main-reviews-page-user-country {
    font-size: 0.85rem;
    color: #666666;
    margin: 0;
}

.main-reviews-page-review-stars {
    display: flex;
    gap: 2px;
}

.main-reviews-page-review-stars .main-reviews-page-star {
    font-size: 20px;
    color: #e0e0e0;
}
.main-reviews-page-review-stars .main-reviews-page-star.main-reviews-page-filled {
    color: #DA0000;
}

.main-reviews-page-review-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.main-reviews-page-review-comment {
    font-style: italic;
    color: #333333;
    font-size: 0.95rem;
    flex: 1;
    margin: 0;
}

.main-reviews-page-review-date {
    font-size: 0.85rem;
    color: #666666;
    text-align: right;
    white-space: nowrap;
    margin: 0;
}

.main-reviews-page-review-uploaded_image{
    height: 200px; /* Fixed height */
    width: auto; /* Variable width */
    display: block;
    margin: 15px auto 0; /* Centered, with top space */
}

/* Responsive */
/* Tablet: 2 tiles per view (641px - 1024px) */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    .main-reviews-page-items-grid,
    .main-reviews-page-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-reviews-page-reviews-carousel-wrapper {
        width: 90%;
    }

    .main-reviews-page-reviews-carousel .main-reviews-page-review_tile {
        flex: 0 0 calc(50% - 10px);
    }

    .main-reviews-page-carousel-btn.main-reviews-page-prev {
        left: 2%; /* Position outside tiles */
    }

    .main-reviews-page-carousel-btn.main-reviews-page-next {
        right: 2%; /* Position outside tiles */
    }
}

/* Mobile: 1 tile per view (<=640px) */
@media screen and (max-width: 640px) {
    .main-reviews-page-items-grid,
    .main-reviews-page-reviews-grid {
        grid-template-columns: 1fr;
    }

    .main-reviews-page-reviews-carousel-wrapper {
        width: 70%; /* Reduced width to leave space for navigation controls */
        margin: 0 auto;
    }

    .main-reviews-page-reviews-carousel {
        gap: 25px;
    }

    .main-reviews-page-reviews-carousel .main-reviews-page-review_tile {
        flex: 0 0 100%; /* 1 tile visible on mobile */
        padding: 25px 25px 35px 25px; /* Increased bottom padding to prevent overflow */
        height: auto; /* Allow height to adjust on small screens */
        min-height: 250px; /* Ensure adequate height on small screens */
    }
    
    .main-reviews-page-reviews-carousel .main-reviews-page-review_tile.main-reviews-page-has-image {
        height: auto; /* Allow height to adjust on small screens */
        min-height: 500px; /* Adequate height for tiles with images on small screens */
    }

    .main-reviews-page-carousel-btn.main-reviews-page-prev {
        left: 2%; /* Positioned outside wrapper */
    }

    .main-reviews-page-carousel-btn.main-reviews-page-next {
        right: 2%; /* Positioned outside wrapper */
    }

    .main-reviews-page-hero h1 {
        font-size: 2rem;
    }

    .main-reviews-page-filter-form {
        max-width: 90%;
        flex-direction: column; /* Stack elements vertically on small screens */
        gap: 12px; /* Reduced gap for vertical layout */
    }
    
    .main-reviews-page-search-wrapper {
        width: 100%; /* Full width search bar on top */
        order: 1; /* First element */
    }
    
    .main-reviews-page-filter-form-row {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        order: 2; /* Second row below search */
    }
    
    .main-reviews-page-category-select {
        flex: 1; /* Take available space */
        font-size: 0.9rem; /* Responsive font size */
        padding: 10px;
    }
    
    .main-reviews-page-search-btn {
        font-size: 0.9rem; /* Responsive font size */
        padding: 10px 16px;
        white-space: nowrap; /* Prevent text wrapping */
    }
    
    .main-reviews-page-info-btn {
        font-size: 1.1rem; /* Slightly smaller on mobile */
        padding: 8px;
        flex-shrink: 0; /* Don't shrink */
    }
    
    .main-reviews-page-search-guideline {
        font-size: 0.9rem; /* Responsive font size */
    }
    
    .main-reviews-page-search-input {
        font-size: 0.9rem; /* Responsive font size */
        padding: 10px 35px 10px 12px;
    }

    .main-reviews-page-item-tile h4 {
        font-size: 1.1rem;
    }

    .main-reviews-page-item-tile p {
        font-size: 0.8rem;
    }

    .main-reviews-page-item-details h4 {
        font-size: 1.2rem;
    }

    .main-reviews-page-item-short-desc {
        font-size: 0.8rem;
    }

    .main-reviews-page-user-name {
        font-size: 0.9rem;
    }

    .main-reviews-page-review-comment {
        font-size: 0.85rem;
    }

    .main-reviews-page-review-date {
        font-size: 0.75rem;
    }
}

/* Updated Item Tile Content */
.main-reviews-page-item-tile {
    background: #1c2526;
    color: #ffffff;
    border-radius: 12px;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.main-reviews-page-item-tile-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: #1c2526;
    border-radius: 12px;
    color: #ffffff;
    text-align: center;
    height: 100%;
}

/* Thumbnail Styling for 2:3 Aspect Ratio */
.main-reviews-page-item-thumbnail {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 15px;
    image-rendering: optimizeQuality;
    border: none;
    padding: 0;
}

/* Item Title */
.main-reviews-page-item-title {
    font-size: 1.25rem;
    margin: 10px 0;
    font-weight: 600;
    color: #ffffff;
}

/* Short Description */
.main-reviews-page-item-short-desc {
    font-size: 0.9rem;
    color: #cccccc;
    margin: 10px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Category */
.main-reviews-page-item-category {
    font-size: 1rem;
    text-transform: capitalize;
    margin: 10px 0;
    color: #cccccc;
}

/* Average Rating */
.main-reviews-page-item-average-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 1rem;
    margin: 10px 0;
    color: #ffffff;
}

.main-reviews-page-average-star {
    color: #DA0000;
    font-size: 1.2rem;
}

/* Price */
.main-reviews-page-item-price {
    font-size: 1rem;
    font-weight: 600;
    margin: 10px 0;
    color: #ffffff;
}

/* View Button */
.main-reviews-page-view-item-btn {
    width: 100%;
    max-width: 200px;
    padding: 12px;
    background: #DA0000;
    color: #ffffff;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 15px; /* Space from bottom edge */
    transition: background 0.3s;
    font-family: 'Inter', sans-serif;
}

.main-reviews-page-view-item-btn:hover {
    background: #b30000;
}

/* Ensure Uniform Heights in Grid */
.main-reviews-page-items-grid .main-reviews-page-item-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Update Selected Item Details for Consistency */
.main-reviews-page-item-details {
    max-width: 400px;
    margin: 0 auto 40px;
    text-align: center;
    background: #1c2526;
    border-radius: 12px;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #333; /* Professional outer border */
    padding: 25px; /* Increased padding */
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .main-reviews-page-item-thumbnail {
        max-width: 250px;
    }

    .main-reviews-page-item-title {
        font-size: 1.1rem;
    }

    .main-reviews-page-item-short-desc,
    .main-reviews-page-item-category,
    .main-reviews-page-item-price {
        font-size: 0.9rem;
    }

    .main-reviews-page-item-average-rating {
        font-size: 0.9rem;
    }

    .main-reviews-page-average-star {
        font-size: 1.1rem;
    }

    .main-reviews-page-view-item-btn {
        max-width: 180px;
        padding: 10px;
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .main-reviews-page-item-thumbnail {
        max-width: 200px;
    }

    .main-reviews-page-item-title {
        font-size: 1rem;
    }

    .main-reviews-page-item-short-desc,
    .main-reviews-page-item-category,
    .main-reviews-page-item-price {
        font-size: 0.8rem;
    }

    .main-reviews-page-item-average-rating {
        font-size: 0.8rem;
    }

    .main-reviews-page-average-star {
        font-size: 1rem;
    }

    .main-reviews-page-view-item-btn {
        max-width: 160px;
        padding: 8px;
        font-size: 0.8rem;
    }
}













/* about-page.css - Dedicated styles for about.php */

/* General Reset & Base */
.about-page-hero-section,
.about-page-benefits-section,
.about-page-mission-section,
.about-page-values-section,
.about-page-contact-section,
.about-page-founders-section,
.about-page-faq-section {
    padding: 60px 20px;
    text-align: center;
}

.about-page-section-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 40px;
    color: #fff;
    position: relative;
}

.about-page-section-title::after {
    content: '';
    width: 80px;
    height: 4px;
    background: #DA0000;
    display: block;
    margin: 15px auto 0;
    border-radius: 2px;
}

/* 1. Hero with cover image */
.about-page-hero-section {
    position: relative;
    width: 100%;
    height: 65vh;
    background-image:
        linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
        url('../Images/about_hero.webp');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    margin-top: 70px;               /* same as index.php */
}

.about-page-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    color: white;
    animation: fadeIn 1.2s ease-out forwards;
    opacity: 0;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.about-page-hero-content p {
    font-size: 1.5rem;
    line-height: 1.8;
    margin: 12px 0;
    font-weight: 500;
}

.about-page-hero-content strong {
    color: #fff;
    font-weight: 800;
}

.about-page-hero-content p {
    font-size: 1.5rem;
    line-height: 1.8;
    margin: 12px 0;
    font-weight: 500;
}

.about-page-hero-content strong {
    color: #fff;
    font-weight: 800;
}

/* 2. Benefits Grid */
.about-page-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

.about-page-benefit-tile {
    background: #fff;
    padding: 30px 20px;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-page-benefit-icon {
    font-size: 2.8rem;
    color: #000;
    margin-bottom: 18px;
}

.about-page-benefit-tile h3 {
    font-size: 1.4rem;
    margin: 15px 0 12px;
    color: #000;
    font-weight: 600;
}

.about-page-benefit-tile p {
    color: #333;
    font-size: 1rem;
    line-height: 1.6;
}

/* 3. Mission */
.about-page-mission-text {
    font-size: 1.35rem;
    max-width: 800px;
    margin: 0 auto;
    color: #ddd;
    line-height: 1.8;
    font-style: italic;
}

/* 4. Core Values Grid */
.about-page-values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.about-page-value-tile {
    background: #fff;
    padding: 35px 25px;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.about-page-value-icon {
    font-size: 2.6rem;
    color: #000;
    margin-bottom: 16px;
}

.about-page-value-tile h3 {
    font-size: 1.35rem;
    margin: 12px 0;
    color: #000;
    font-weight: 600;
}

.about-page-value-tile p {
    color: #222;
    font-weight: 500;
    line-height: 1.6;
}

/* 5. Contact Section */
.about-page-contact-info {
    margin-bottom: 40px;
    font-size: 1.1rem;
    color: #ccc;
}

.about-page-contact-info a {
    color: #DA0000;
    text-decoration: none;
}

.about-page-contact-info a:hover {
    text-decoration: underline;
}

.about-page-contact-form {
    max-width: 600px;
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.about-page-form-group input,
.about-page-form-group textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #444;
    background: #111;
    color: #fff;
    border-radius: 8px;
    font-size: 1rem;
    transition: border 0.3s ease;
}

.about-page-form-group input:focus,
.about-page-form-group textarea:focus {
    outline: none;
    border-color: #b30000;
}

.about-page-form-group select {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #444;
    background: #111;
    color: #fff;
    border-radius: 8px;
    font-size: 1rem;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23aaa" d="M0 0l6 8 6-8z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 18px center;
    transition: border 0.3s ease;
}

.about-page-form-group select:focus {
    outline: none;
    border-color: #b30000;
}

.about-page-submit-btn {
    background: #DA0000;
    color: #fff;
    border: none;
    padding: 14px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
    justify-self: center;
}

.about-page-submit-btn:hover {
    background: #b30000;
}

.about-page-success {
    color: #0f0;
    margin: 10px 0;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.about-page-error {
    color: #f00;
    margin: 10px 0;
    opacity: 1;
    transition: opacity 0.5s ease;
}

#form-feedback {
    min-height: 20px;
    margin-bottom: 18px;
}

/* 6. Founders */
.about-page-founder {
    display: flex;
    align-items: center;
    max-width: 1000px;
    margin: 50px auto;
    gap: 40px;
    background: #111;
    padding: 30px;
    border-radius: 16px;
    flex-wrap: wrap;
}

.about-page-founder-1 { flex-direction: row; }
.about-page-founder-2 { flex-direction: row-reverse; }

.about-page-founder-image img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.about-page-founder-story {
    flex: 1;
    color: #ddd;
    text-align: left;
}

.about-page-founder-story h3 {
    font-size: 1.6rem;
    color: #DA0000;
    margin-bottom: 15px;
}

.about-page-founder-story p {
    line-height: 1.8;
    font-size: 1.05rem;
}

/* 7. FAQs */
.about-page-faq-container {
    max-width: 900px;
    margin: 0 auto;
}

.about-page-faq-item {
    margin-bottom: 12px;
    border-bottom: 1px solid #333;
}

.about-page-faq-question {
    background: #111;
    color: #fff;
    padding: 18px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    border-radius: 8px;
    transition: background 0.3s ease;
    user-select: none;
}

.about-page-faq-question:hover {
    background: #222;
}

.about-page-faq-icon {
    transition: transform 0.3s ease;
    font-size: 1.1rem;
}

.about-page-faq-answer {
    max-height: 0;
    overflow: hidden;
    background: #0a0a0a;
    padding: 0 20px;
    transition: max-height 0.4s ease, padding 0.4s ease;
    border-radius: 0 0 8px 8px;
}

.about-page-faq-answer p {
    padding: 20px 0;
    color: #aaa;
    line-height: 1.7;
    text-align: left;
}

.about-page-no-faq {
    color: #888;
    font-style: italic;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .about-page-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .about-page-values-grid {
        grid-template-columns: 1fr;
    }
    .about-page-founder {
        flex-direction: column !important;
        text-align: center;
    }
    .about-page-founder-story {
        text-align: center;
    }
    .about-page-founder-2 .about-page-founder-image {
        order: -1;
    }
}

@media (max-width: 600px) {
    .about-page-benefits-grid {
        grid-template-columns: 1fr;
    }
    .about-page-hero-content p {
        font-size: 1.3rem;
    }
    .about-page-section-title {
        font-size: 1.8rem;
    }
    .about-page-founder-image img {
        max-width: 220px;
    }
}














/* ========== NEWSLETTER SECTION ========== */

/* ============================================================= */
/*  NEWSLETTER – INLINE FORM (Email + Subscribe Button)         */
/* ============================================================= */
.newsletter-wrapper {
    color: #eee;
    padding: 40px 20px 20px;
}

.newsletter-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.newsletter-container p {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #fff;
}

/* Form layout */
.newsletter-inline-form {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

/* Email Input – exact match to your original */
.newsletter-container input[type="email"],
#newsletterInlineEmail {
    padding: 10px;
    width: 250px;
    border: none;
    border-radius: 5px;
    font-size: 0.95rem;
    outline: none;
}

/* Subscribe Button – exact match to your original */
.newsletter-container button,
#newsletterInlineBtn {
    padding: 10px 20px;
    background-color: #DA0000;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 0.95rem;
}

.newsletter-container button:hover,
#newsletterInlineBtn:hover {
    background-color: #B60000;
}

#newsletterInlineBtn:disabled {
    background-color: #666;
    cursor: not-allowed;
}

/* ============================================================= */
/*  INLINE ERROR MESSAGE (above form) – 10s auto-hide + close   */
/* ============================================================= */
.newsletter-inline-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #440000;
    color: #ff6b6b;
    padding: 10px 16px;
    border-radius: 6px;
    margin: 15px auto;
    max-width: 380px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.newsletter-inline-close {
    background: none;
    border: none;
    color: #ff6b6b;
    font-size: 1.3rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

/* ============================================================= */
/*  MODAL – Keeps modern dark theme, consistent with site      */
/* ============================================================= */
.newsletter-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
}

.newsletter-modal[style*="display: flex"] .newsletter-close,
.newsletter-modal[style*="display:flex"] .newsletter-close,
.statements-page-modal[style*="display: flex"] .newsletter-close,
.statements-page-modal[style*="display:flex"] .newsletter-close,
.user-program-modal[style*="display: flex"] .newsletter-close,
.user-program-modal[style*="display:flex"] .newsletter-close {
    display: flex;
}

.newsletter-modal-content {
    background: #1c2526;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
    padding-right: 10px;
    color: #fff;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.newsletter-close {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10003;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 26px;
    cursor: pointer;
    color: #aaa;
    font-weight: bold;
    transition: all 0.2s ease;
}

.newsletter-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* Modal Steps */
.newsletter-step h3 {
    margin: 0 0 18px;
    font-size: 1.5rem;
    color: #fff;
    text-align: center;
}

.newsletter-step input[type="email"],
.newsletter-step input[type="text"] {
    width: 100%;
    padding: 12px;
    margin: 12px 0;
    border-radius: 8px;
    border: none;
    background: #2d3436;
    color: #fff;
    font-size: 1rem;
    box-sizing: border-box;
}

.newsletter-step input::placeholder {
    color: #aaa;
}

.newsletter-step button {
    background: #DA0000;
    color: #fff;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    width: 100%;
    margin-top: 10px;
    transition: background 0.3s;
}

.newsletter-step button:hover {
    background: #B60000;
}

.newsletter-error {
    color: #ff6b6b;
    min-height: 20px;
    margin: 10px 0 0;
    font-size: 0.9rem;
    text-align: center;
}

.newsletter-loader {
    text-align: center;
    font-size: 1.2rem;
    margin: 20px 0;
    color: #ddd;
}

/* Resend OTP Button */
#resendOTP {
    background: transparent;
    border: 1px solid #DA0000;
    color: #DA0000;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-top: 12px;
    cursor: pointer;
    width: 100%;
}

#resendOTP:hover {
    background: rgba(218, 0, 0, 0.1);
}

/* Checkboxes */
.newsletter-step label {
    display: block;
    margin: 12px 0;
    font-size: 0.95rem;
    cursor: pointer;
    user-select: none;
}

.newsletter-step label input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.1);
}

/* Success Step */
#stepSuccess {
    text-align: center;
    padding: 20px 0;
}

#stepSuccess h3 {
    color: #00d4aa;
    margin-bottom: 10px;
}












/* Order Confirmation Page */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #fff;
    border-top: 5px solid #ff0000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.confirmation-wrap {
    max-width: 800px;
    margin: 40px auto 0 auto; /* Add top spacing below navigation */
    padding: 20px;
    color: #fff;
    background: #1a1a1a;
    border-radius: 8px;
}
.confirmation-wrap h2 {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}
.confirmation-wrap .confirmation-text {
    font-size: 16px;
    margin-bottom: 10px;
    text-align: center;
}
.confirmation-item {
    border-bottom: 1px solid #333;
    padding: 20px 0;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.confirmation-item:last-child {
    border-bottom: none;
}
.item-thumbnail {
    width: 120px;
    height: 120px; /* Square images on desktop */
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    border: 1px solid #444;
    background-color: #2a2a2a;
    display: block; /* Ensure image displays */
}
.item-thumbnail-placeholder {
    width: 120px;
    height: 120px; /* Square placeholder on desktop */
    background-color: #2a2a2a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 12px;
    text-align: center;
    flex-shrink: 0;
}
.item-content {
    flex: 1;
    min-width: 0;
}
.confirmation-item h4 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #fff;
}
.confirmation-item p {
    margin: 5px 0;
    color: #aab7c4;
    font-size: 14px;
}
.item-price {
    font-size: 18px;
    font-weight: bold;
    color: #ff0000;
    margin-top: 10px;
}
.confirmation-shipping-address {
    background: #1c1c1c;
    border-radius: 12px;
    padding: 20px;
    margin: 30px 0;
    color: #fff;
}

.confirmation-shipping-address h3 {
    margin: 0 0 15px 0;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    border-bottom: 2px solid #DA0000;
    padding-bottom: 10px;
}

.confirmation-shipping-address p {
    margin: 0;
    line-height: 1.8;
    font-size: 15px;
    color: #ccc;
}

.confirmation-totals {
    margin-top: 20px;
    font-size: 16px;
    color: #fff;
}
@media (max-width: 600px) {
    .confirmation-item {
        flex-direction: column;
    }
    .item-thumbnail {
        width: 120px !important;
        height: 120px !important; /* Square on mobile, same as desktop */
        max-width: 120px !important;
        margin: 0 !important; /* Reset margin */
        display: block !important; /* Ensure image displays on mobile */
        object-fit: cover !important; /* Ensure image covers the area */
    }
    .item-thumbnail-placeholder {
        width: 120px !important;
        height: 120px !important; /* Square on mobile, same as desktop */
        max-width: 120px !important;
        margin: 0 !important; /* Reset margin */
        display: flex !important; /* Keep flex for placeholder content */
    }
}
.confirmation-buttons {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.confirmation-btn {
    padding: 10px 20px;
    background: #ff0000;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
}
.confirmation-btn:hover {
    background: #cc0000;
}
.confirmation-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.confirmation-error {
    color: #ff6b6b;
    margin-top: 10px;
    display: none;
}
@media (max-width: 600px) {
    .confirmation-wrap {
        padding: 15px;
        margin-top: 20px; /* Professional spacing on mobile */
    }
    .confirmation-btn {
        width: 100%;
        text-align: center;
    }
}

/* ========== FINAL TABLET OVERRIDE FOR PRODUCT CONTROLS ========== */
/* Ensure product controls are visible on tablet screens - maximum specificity */
@media screen and (max-width: 1024px) and (min-width: 641px) {
    .product-tile_shop {
        overflow: visible !important;
    }
    
    .variant-slideshow_shop {
        overflow: visible !important;
    }
    
    .product-tile_shop .slideshow-nav-shop,
    .product-tile_shop:hover .slideshow-nav-shop {
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
        display: block !important;
    }
    
    /* Make navigation buttons smaller and more subtle on tablet - use more specific selector */
    .product-tile_shop .slideshow-nav-shop,
    .variant-slideshow_shop .slideshow-nav-shop,
    .slideshow-nav-shop {
        padding: 2px 4px !important;
        font-size: 11px !important;
        background: rgba(0, 0, 0, 0.35) !important;
        border-radius: 3px !important;
        min-width: auto !important;
        min-height: auto !important;
        width: auto !important;
        height: auto !important;
    }
    
    .product-tile_shop .slideshow-nav-shop:hover,
    .variant-slideshow_shop .slideshow-nav-shop:hover,
    .slideshow-nav-shop:hover {
        background: rgba(0, 0, 0, 0.55) !important;
        color: #fff !important;
    }
    
    .product-tile_shop .slideshow-nav-shop.prev,
    .variant-slideshow_shop .slideshow-nav-shop.prev,
    .slideshow-nav-shop.prev { left: 3px !important; }
    .product-tile_shop .slideshow-nav-shop.next,
    .variant-slideshow_shop .slideshow-nav-shop.next,
    .slideshow-nav-shop.next { right: 3px !important; }
    
    .product-tile_shop .add-to-cart-overlay,
    .product-tile_shop:hover .add-to-cart-overlay {
        display: flex !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10 !important;
    }
}

/* ========== CRITICAL TABLET OVERRIDE FOR NAVIGATION BUTTON SIZE ========== */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    /* Force smaller navigation buttons on tablet - maximum specificity */
    button.slideshow-nav-shop,
    .product-tile_shop button.slideshow-nav-shop,
    .variant-slideshow_shop button.slideshow-nav-shop,
    .product-tile_shop .variant-slideshow_shop button.slideshow-nav-shop {
        padding: 2px 4px !important;
        font-size: 11px !important;
        background: rgba(0, 0, 0, 0.35) !important;
        border-radius: 3px !important;
        min-width: auto !important;
        min-height: auto !important;
        width: auto !important;
        height: auto !important;
        line-height: 1 !important;
    }
    
    button.slideshow-nav-shop:hover,
    .product-tile_shop button.slideshow-nav-shop:hover,
    .variant-slideshow_shop button.slideshow-nav-shop:hover {
        background: rgba(0, 0, 0, 0.55) !important;
        color: #fff !important;
    }
    
    button.slideshow-nav-shop.prev,
    .product-tile_shop button.slideshow-nav-shop.prev,
    .variant-slideshow_shop button.slideshow-nav-shop.prev {
        left: 3px !important;
    }
    
    button.slideshow-nav-shop.next,
    .product-tile_shop button.slideshow-nav-shop.next,
    .variant-slideshow_shop button.slideshow-nav-shop.next {
        right: 3px !important;
    }
}

/* Touch device override - tablets have touch */
@media (hover: none) and (pointer: coarse) {
    .product-tile_shop .slideshow-nav-shop {
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
        display: block !important;
    }
    
    .product-tile_shop .add-to-cart-overlay {
        display: flex !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }
}

/* No Reviews Message */
.no-reviews-message {
    text-align: center;
    color: #ccc;
    font-size: 18px;
    margin: 40px 0;
    padding: 20px;
    font-family: 'Inter', sans-serif;
}

/* ============================================
   STATEMENTS PAGE - Payment Statements & Refunds
   ============================================ */

.maincontainer-statements-page {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: calc(100vh - 200px);
}

.statements-page-container {
    width: 100%;
}

.statements-page-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 30px;
    text-align: center;
}

.statements-page-message {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
}

.statements-page-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.statements-page-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.statements-page-section {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid #333;
}

.statements-page-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
}

.statements-page-section-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.statements-page-download-btn {
    padding: 10px 20px;
    background: #DA0000;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.3s ease;
}

.statements-page-download-btn:hover {
    background: #b80000;
}

.statements-page-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.statements-page-action-btn {
    padding: 12px 24px;
    background: #DA0000;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.3s ease;
}

.statements-page-action-btn:hover {
    background: #b80000;
}

.statements-page-table-container {
    overflow-x: auto;
    margin-top: 20px;
}

.statements-page-table {
    width: 100%;
    border-collapse: collapse;
    background: #0a0a0a;
    border-radius: 8px;
    overflow: hidden;
}

.statements-page-table thead {
    background: #DA0000;
}

.statements-page-table th {
    padding: 15px;
    text-align: left;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
}

.statements-page-table td {
    padding: 15px;
    color: #ccc;
    border-bottom: 1px solid #333;
    font-size: 0.9rem;
}

.statements-page-table tbody tr:hover {
    background: #1a1a1a;
}

.statements-page-table tbody tr:last-child td {
    border-bottom: none;
}

.statements-page-status {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
}

.statements-page-status-completed {
    background: #d4edda;
    color: #155724;
}

.statements-page-status-pending {
    background: #fff3cd;
    color: #856404;
}

.statements-page-status-approved {
    background: #d1ecf1;
    color: #0c5460;
}

.statements-page-status-rejected {
    background: #f8d7da;
    color: #721c24;
}

.statements-page-status-processing {
    background: #cce5ff;
    color: #004085;
}

.statements-page-status-cancelled {
    background: #e2e3e5;
    color: #383d41;
}

.statements-page-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.statements-page-pagination-btn {
    padding: 8px 16px;
    background: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.3s ease;
}

.statements-page-pagination-btn:hover {
    background: #DA0000;
}

.statements-page-pagination-info {
    color: #ccc;
    font-weight: 600;
}

.statements-page-empty {
    text-align: center;
    color: #888;
    padding: 40px 20px;
    font-size: 1.1rem;
}

/* Modal Styles */
.statements-page-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}

/* Mobile modal padding - reduced for wider modals */
@media (max-width: 768px) {
    .statements-page-modal {
        padding: 10px;
    }
}

.statements-page-modal-content {
    background: #1a1a1a;
    margin: 30px auto;
    max-width: 900px;
    border-radius: 12px;
    border: 1px solid #333;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: statements-page-modal-fade-in 0.3s ease;
    position: relative;
}

/* Refund Details Modal - Wider and better centered */
#refundDetailsModal .statements-page-modal-content {
    max-width: 700px;
    width: 90%;
}

@keyframes statements-page-modal-fade-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.statements-page-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid #333;
}

.statements-page-modal-header h2 {
    margin: 0;
    color: #fff;
    font-size: 1.5rem;
}

.statements-page-modal-close {
    background: none;
    border: none;
    color: #ccc;
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.statements-page-modal-close:hover {
    color: #DA0000;
}

.statements-page-modal-body {
    padding: 30px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* Filter Section */
.statements-page-filter-section {
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #333;
}

.statements-page-filter-section h3 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.25rem;
}

.statements-page-filter-form {
    width: 100%;
}

.statements-page-filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.statements-page-filter-group {
    display: flex;
    flex-direction: column;
    position: relative;
}

.statements-page-filter-group label {
    color: #ccc;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.statements-page-filter-group input,
.statements-page-filter-group select {
    padding: 10px;
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 6px;
    color: #fff;
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
}

/* Date input specific styling for better mobile display */
.statements-page-filter-group input[type="date"] {
    width: 100%;
    min-width: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color-scheme: dark;
    color: #fff;
}

/* Placeholder text when date input is empty (desktop) */
.statements-page-filter-group input[type="date"]:invalid::-webkit-datetime-edit {
    color: #999;
}

.statements-page-filter-group input[type="date"]:invalid::-webkit-datetime-edit-fields-wrapper {
    color: #999;
}

.statements-page-filter-group input[type="date"]:invalid::-webkit-datetime-edit-text {
    color: #999;
}

.statements-page-filter-group input[type="date"]:invalid::-webkit-datetime-edit-month-field,
.statements-page-filter-group input[type="date"]:invalid::-webkit-datetime-edit-day-field,
.statements-page-filter-group input[type="date"]:invalid::-webkit-datetime-edit-year-field {
    color: #999;
}

/* When date has a value (desktop) */
.statements-page-filter-group input[type="date"]:valid::-webkit-datetime-edit {
    color: #fff;
}

.statements-page-filter-group input[type="date"]:valid::-webkit-datetime-edit-fields-wrapper {
    color: #fff;
}

.statements-page-filter-group input[type="date"]:valid::-webkit-datetime-edit-text {
    color: #ccc;
}

.statements-page-filter-group input[type="date"]:valid::-webkit-datetime-edit-month-field,
.statements-page-filter-group input[type="date"]:valid::-webkit-datetime-edit-day-field,
.statements-page-filter-group input[type="date"]:valid::-webkit-datetime-edit-year-field {
    color: #fff;
}

/* Calendar picker icon - make it white using brightness(0) invert(1) */
.statements-page-filter-group input[type="date"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(1);
    cursor: pointer;
    opacity: 1 !important;
    background-color: transparent !important;
    padding: 5px;
    margin-left: 5px;
    width: 20px;
    height: 20px;
}

/* Firefox date picker icon - make it white */
.statements-page-filter-group input[type="date"]::-moz-calendar-picker-indicator {
    filter: brightness(0) invert(1);
    cursor: pointer;
    opacity: 1 !important;
    width: 20px;
    height: 20px;
}

.statements-page-filter-group input[type="date"]::-webkit-inner-spin-button,
.statements-page-filter-group input[type="date"]::-webkit-clear-button {
    display: none;
}

.statements-page-filter-group input:focus,
.statements-page-filter-group select:focus {
    outline: none;
    border-color: #DA0000;
}

.statements-page-filter-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-top: 0;
    flex-wrap: wrap;
    width: 100%;
}

.statements-page-filter-btn {
    padding: 12px 30px;
    background: #DA0000;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.statements-page-filter-btn:hover {
    background: #b80000;
}

.statements-page-filter-clear {
    padding: 12px 30px;
    background: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    white-space: nowrap;
    text-align: center;
    flex: 1;
    min-width: 0;
}

.statements-page-filter-clear:hover {
    background: #444;
}

/* Payment List */
.statements-page-payment-list h3 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.25rem;
}

.statements-page-payment-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.statements-page-payment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.statements-page-payment-item:hover {
    background: #1a1a1a;
    border-color: #DA0000;
    transform: translateX(5px);
}

.statements-page-payment-item-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.statements-page-payment-item-info strong {
    color: #fff;
    font-size: 1rem;
}

.statements-page-payment-item-info span {
    color: #DA0000;
    font-weight: 600;
    font-size: 1.1rem;
}

.statements-page-payment-item-info small {
    color: #888;
    font-size: 0.85rem;
}

.statements-page-payment-item i {
    color: #888;
    font-size: 1.2rem;
}

/* Refund Form */
.statements-page-refund-form {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #333;
}

.statements-page-form-group {
    margin-bottom: 20px;
}

.statements-page-form-group label {
    display: block;
    color: #ccc;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.95rem;
}

.statements-page-required {
    color: #DA0000;
}

.statements-page-form-group input,
.statements-page-form-group select,
.statements-page-form-group textarea {
    width: 100%;
    padding: 12px;
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 6px;
    color: #fff;
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
}

.statements-page-form-group input:focus,
.statements-page-form-group select:focus,
.statements-page-form-group textarea:focus {
    outline: none;
    border-color: #DA0000;
}

.statements-page-form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.statements-page-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.statements-page-selected-payment {
    padding: 15px;
    background: #0a0a0a;
    border: 1px solid #DA0000;
    border-radius: 6px;
    color: #fff;
}

.statements-page-selected-payment strong {
    color: #DA0000;
    font-size: 1.1rem;
}

.statements-page-method-fields {
    margin-top: 15px;
    padding: 20px;
    background: #0a0a0a;
    border-radius: 6px;
    border: 1px solid #333;
}

.statements-page-form-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-top: 25px;
    flex-wrap: wrap;
}

.statements-page-submit-btn {
    padding: 12px 30px;
    background: #DA0000;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.statements-page-submit-btn:hover {
    background: #b80000;
}

.statements-page-cancel-btn {
    padding: 12px 30px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.statements-page-cancel-btn:hover {
    background: #444;
}

.statements-page-view-btn {
    padding: 6px 12px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.statements-page-view-btn:hover {
    background: #DA0000;
}

/* Refund Details */
.statements-page-refund-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0; /* Allow content to shrink if needed */
}

/* Ensure refund details modal content is properly sized */
#refundDetailsModal .statements-page-modal-body {
    min-width: 0;
    overflow-x: auto;
}

.statements-page-detail-row {
    padding: 12px 0;
    border-bottom: 1px solid #333;
    color: #ccc;
}

.statements-page-detail-row:last-child {
    border-bottom: none;
}

.statements-page-detail-row strong {
    color: #fff;
    display: block;
    margin-bottom: 5px;
}

.statements-page-detail-row p {
    margin: 8px 0 0 0;
    color: #aaa;
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .maincontainer-statements-page {
        padding: 20px 15px;
    }
    
    .statements-page-section-title {
        font-size: 1.5rem;
        flex-wrap: wrap;
    }
    
    .refund-info-tooltip {
        min-width: 280px;
        max-width: 90vw;
        left: 0;
        transform: translateX(0) translateY(10px);
    }
    
    .refund-info-tooltip.show {
        transform: translateX(0) translateY(0);
    }
    
    .refund-info-tooltip::before {
        left: 20px;
        transform: translateX(0);
    }
    
    .refund-info-tooltip-content {
        padding: 15px;
    }
    
    .refund-info-tooltip-content h3 {
        font-size: 1rem;
    }
    
    .refund-info-tooltip-content ul li {
        font-size: 0.85rem;
    }
    
    .statements-page-title {
        font-size: 2rem;
    }
    
    .statements-page-section {
        padding: 20px;
    }
    
    .statements-page-section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .statements-page-table {
        font-size: 0.85rem;
    }
    
    .statements-page-table th,
    .statements-page-table td {
        padding: 10px 8px;
    }
    
    /* Modal - Wider on mobile with minimal padding */
    .statements-page-modal {
        padding: 5px;
    }
    
    .statements-page-modal-content {
        margin: 5px auto;
        max-width: calc(100% - 10px);
        width: calc(100% - 10px);
        border-radius: 8px;
    }
    
    /* Refund Details Modal and Apply for Refund Modal - Wider on mobile */
    #refundDetailsModal .statements-page-modal-content,
    #refundModal .statements-page-modal-content {
        max-width: calc(100% - 10px);
        width: calc(100% - 10px);
        margin: 5px auto;
    }
    
    .statements-page-modal-header,
    .statements-page-modal-body {
        padding: 15px;
    }
    
    .statements-page-modal-header {
        padding: 15px;
    }
    
    .statements-page-modal-header h2 {
        font-size: 1.25rem;
    }
    
    .statements-page-filter-row {
        grid-template-columns: 1fr;
    }
    
    /* Ensure date inputs are full width on mobile */
    .statements-page-filter-group {
        width: 100%;
    }
    
    .statements-page-filter-group {
        position: relative;
    }
    
    .statements-page-filter-group input[type="date"] {
        width: 100%;
        min-width: 100%;
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 12px 45px 12px 12px; /* Extra right padding for calendar icon */
        color: #fff;
        background-color: #0a0a0a;
        position: relative;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 20px 20px;
    }
    
    /* Placeholder text when date input is empty - mobile */
    .statements-page-filter-group input[type="date"]:not([value])::-webkit-datetime-edit,
    .statements-page-filter-group input[type="date"][value=""]::-webkit-datetime-edit,
    .statements-page-filter-group input[type="date"]:invalid::-webkit-datetime-edit {
        color: #999 !important;
        opacity: 1 !important;
    }
    
    .statements-page-filter-group input[type="date"]:not([value])::-webkit-datetime-edit-fields-wrapper,
    .statements-page-filter-group input[type="date"][value=""]::-webkit-datetime-edit-fields-wrapper,
    .statements-page-filter-group input[type="date"]:invalid::-webkit-datetime-edit-fields-wrapper {
        color: #999 !important;
        opacity: 1 !important;
    }
    
    .statements-page-filter-group input[type="date"]:not([value])::-webkit-datetime-edit-text,
    .statements-page-filter-group input[type="date"][value=""]::-webkit-datetime-edit-text,
    .statements-page-filter-group input[type="date"]:invalid::-webkit-datetime-edit-text {
        color: #999 !important;
        opacity: 1 !important;
    }
    
    .statements-page-filter-group input[type="date"]:not([value])::-webkit-datetime-edit-month-field,
    .statements-page-filter-group input[type="date"]:not([value])::-webkit-datetime-edit-day-field,
    .statements-page-filter-group input[type="date"]:not([value])::-webkit-datetime-edit-year-field,
    .statements-page-filter-group input[type="date"][value=""]::-webkit-datetime-edit-month-field,
    .statements-page-filter-group input[type="date"][value=""]::-webkit-datetime-edit-day-field,
    .statements-page-filter-group input[type="date"][value=""]::-webkit-datetime-edit-year-field,
    .statements-page-filter-group input[type="date"]:invalid::-webkit-datetime-edit-month-field,
    .statements-page-filter-group input[type="date"]:invalid::-webkit-datetime-edit-day-field,
    .statements-page-filter-group input[type="date"]:invalid::-webkit-datetime-edit-year-field {
        color: #999 !important;
        opacity: 1 !important;
    }
    
    /* When date has a value - mobile */
    .statements-page-filter-group input[type="date"]:valid:not([value=""])::-webkit-datetime-edit,
    .statements-page-filter-group input[type="date"][value]:not([value=""])::-webkit-datetime-edit {
        color: #fff !important;
        opacity: 1 !important;
    }
    
    .statements-page-filter-group input[type="date"]:valid:not([value=""])::-webkit-datetime-edit-fields-wrapper,
    .statements-page-filter-group input[type="date"][value]:not([value=""])::-webkit-datetime-edit-fields-wrapper {
        color: #fff !important;
        opacity: 1 !important;
    }
    
    .statements-page-filter-group input[type="date"]:valid:not([value=""])::-webkit-datetime-edit-text,
    .statements-page-filter-group input[type="date"][value]:not([value=""])::-webkit-datetime-edit-text {
        color: #ccc !important;
        opacity: 1 !important;
    }
    
    .statements-page-filter-group input[type="date"]:valid:not([value=""])::-webkit-datetime-edit-month-field,
    .statements-page-filter-group input[type="date"]:valid:not([value=""])::-webkit-datetime-edit-day-field,
    .statements-page-filter-group input[type="date"]:valid:not([value=""])::-webkit-datetime-edit-year-field,
    .statements-page-filter-group input[type="date"][value]:not([value=""])::-webkit-datetime-edit-month-field,
    .statements-page-filter-group input[type="date"][value]:not([value=""])::-webkit-datetime-edit-day-field,
    .statements-page-filter-group input[type="date"][value]:not([value=""])::-webkit-datetime-edit-year-field {
        color: #fff !important;
        opacity: 1 !important;
    }
    
    /* Calendar picker icon on mobile - hide default black icon, custom white icon shown via background */
    .statements-page-filter-group input[type="date"]::-webkit-calendar-picker-indicator {
        opacity: 0 !important;
        position: absolute;
        right: 0;
        top: 0;
        width: 45px !important;
        height: 100% !important;
        cursor: pointer;
        z-index: 2;
    }
    
    /* Firefox mobile - make it white */
    .statements-page-filter-group input[type="date"]::-moz-calendar-picker-indicator {
        filter: brightness(0) invert(1);
        opacity: 1 !important;
        cursor: pointer;
        width: 24px;
        height: 24px;
    }
    
    /* Ensure placeholder text is visible on mobile */
    .statements-page-filter-group input[type="date"]:invalid::-webkit-datetime-edit {
        color: #999 !important;
        opacity: 1 !important;
    }
    
    .statements-page-filter-group input[type="date"]:invalid::-webkit-datetime-edit-fields-wrapper {
        color: #999 !important;
        opacity: 1 !important;
    }
    
    .statements-page-filter-group input[type="date"]:invalid::-webkit-datetime-edit-text {
        color: #999 !important;
        opacity: 1 !important;
    }
    
    .statements-page-filter-group input[type="date"]:invalid::-webkit-datetime-edit-month-field,
    .statements-page-filter-group input[type="date"]:invalid::-webkit-datetime-edit-day-field,
    .statements-page-filter-group input[type="date"]:invalid::-webkit-datetime-edit-year-field {
        color: #999 !important;
        opacity: 1 !important;
    }
    
    /* Ensure filter action buttons are full width on mobile */
    .statements-page-filter-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .statements-page-filter-btn,
    .statements-page-filter-clear {
        width: 100%;
    }
    
    .statements-page-form-row {
        grid-template-columns: 1fr;
    }
    
    .statements-page-form-actions {
        flex-direction: column;
    }
    
    .statements-page-submit-btn,
    .statements-page-cancel-btn {
        width: 100%;
    }
    
    .statements-page-buttons {
        flex-direction: column;
    }
    
    .statements-page-action-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .statements-page-title {
        font-size: 1.75rem;
    }
    
    .statements-page-table {
        font-size: 0.8rem;
    }
    
    .statements-page-table th,
    .statements-page-table td {
        padding: 8px 5px;
    }
    
    .statements-page-payment-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ==================== WALLET PAGE STYLES ==================== */
.wallet-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 20px 0 20px;
}

/* Exception: Wallet container needs top spacing on all screen sizes */
.maincontainer > .nav + .wallet-container,
.nav + .wallet-container {
    padding-top: 2rem !important; /* Professional space below navbar */
}

.wallet-header {
    background: linear-gradient(135deg, #DA0000 0%, #b30000 100%);
    color: white;
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.wallet-balance {
    font-size: 48px;
    font-weight: bold;
    margin: 10px 0;
}

.wallet-label {
    font-size: 14px;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.wallet-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.wallet-stat-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.wallet-stat-card h3 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wallet-stat-value {
    font-size: 32px;
    font-weight: bold;
    color: #DA0000;
}

.wallet-withdraw-section {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.wallet-withdraw-section h2 {
    margin-top: 0;
    color: #333;
}

.wallet-form-group {
    margin-bottom: 20px;
}

.wallet-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.wallet-form-group input,
.wallet-form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
}

.wallet-form-group input:focus,
.wallet-form-group select:focus {
    outline: none;
    border-color: #DA0000;
}

.wallet-btn-withdraw {
    background: #DA0000;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.wallet-btn-withdraw:hover {
    background: #b30000;
}

.wallet-btn-withdraw:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.wallet-alert {
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.wallet-alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.wallet-alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.wallet-alert-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.wallet-table-section {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.wallet-table-section h2 {
    margin-top: 0;
    color: #333;
}

.wallet-table-section table {
    width: 100%;
    border-collapse: collapse;
}

.wallet-table-section th,
.wallet-table-section td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.wallet-table-section th {
    background: #f8f9fa;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.wallet-status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.wallet-status-pending {
    background: #fff3cd;
    color: #856404;
}

.wallet-status-processing {
    background: #cfe2ff;
    color: #084298;
}

.wallet-status-completed {
    background: #d1e7dd;
    color: #0f5132;
}

.wallet-status-failed {
    background: #f8d7da;
    color: #842029;
}

.wallet-text-right {
    text-align: right;
}

.wallet-text-center {
    text-align: center;
}

.wallet-link-button {
    color: #DA0000;
    text-decoration: none;
    font-weight: 600;
}

.wallet-link-button:hover {
    text-decoration: underline;
    color: #b30000;
}

.wallet-no-payment-method {
    background: #fff3cd;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.wallet-no-data {
    text-align: center;
    padding: 40px;
    color: #666;
}

.wallet-amount-credit {
    color: #0f5132;
}

.wallet-amount-debit {
    color: #842029;
}

.wallet-sub-label {
    font-size: 14px;
    opacity: 0.9;
}

.wallet-transaction-pending-text {
    color: #999;
}

.wallet-failure-reason {
    color: #dc3545;
}

/* ==================== REFERRAL LINK SECTION STYLES ==================== */
.referral-content {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.referral-item {
    margin-bottom: 25px;
}

.referral-item:last-of-type {
    margin-bottom: 0;
}

.referral-label {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.referral-input-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.referral-input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    background: #f9f9f9;
    color: #000;
    font-family: monospace;
}

.referral-input:focus {
    outline: none;
}

.referral-code-input {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    color: #000;
}

.referral-code-input:focus {
    outline: none;
}

.referral-copy-btn {
    padding: 12px 18px;
    background: #DA0000;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
}

.referral-copy-btn:hover {
    background: #b30000;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(218, 0, 0, 0.3);
}

.referral-copy-btn:active {
    transform: translateY(0);
}

.referral-share-section {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #eee;
}

.referral-share-btn {
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #DA0000 0%, #b30000 100%);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.referral-share-btn:hover {
    background: linear-gradient(135deg, #b30000 0%, #8a0000 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(218, 0, 0, 0.4);
}

.referral-share-btn:active {
    transform: translateY(0);
}

.referral-info-btn {
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    cursor: pointer;
    color: #DA0000;
    font-size: 18px;
    flex-shrink: 0;
}

.referral-info-btn:hover {
    background: rgba(218, 0, 0, 0.1);
}

#referral-info-modal-content {
    color: #fff;
    padding-right: 20px;
}

#referral-info-modal-content ul {
    list-style-type: disc;
    margin-left: 20px;
    padding-left: 0;
}

#referral-info-modal-content li {
    margin-bottom: 8px;
}

#referral-info-modal-content p {
    color: #fff;
}

#referral-info-modal-content strong {
    color: #fff;
}

@media (max-width: 768px) {
    .referral-content {
        padding: 20px;
    }
    
    .referral-input-group {
        flex-direction: column;
        gap: 10px;
    }
    
    .referral-input {
        width: 100%;
        text-align: center;
    }
    
    .referral-copy-btn {
        width: 100%;
    }
    
    .referral-share-section {
        margin-top: 20px;
        padding-top: 20px;
    }
}

@media (max-width: 768px) {
    .wallet-container {
        padding: 0 15px;
        margin: 20px auto;
    }
    
    .wallet-header {
        padding: 20px;
    }
    
    .wallet-balance {
        font-size: 36px;
    }
    
    .wallet-stats {
        grid-template-columns: 1fr;
    }
    
    .wallet-withdraw-section,
    .wallet-table-section {
        padding: 20px;
    }
    
    .wallet-table-section table {
        font-size: 0.9rem;
    }
    
    .wallet-table-section th,
    .wallet-table-section td {
        padding: 8px;
    }
}

@media (max-width: 480px) {
    .wallet-balance {
        font-size: 28px;
    }
    
    .wallet-stat-value {
        font-size: 24px;
    }
    
    .wallet-table-section {
        overflow-x: auto;
    }
    
    .wallet-table-section table {
        font-size: 0.85rem;
    }
}

/* Wallet View More Button */
.wallet-view-more-container {
    margin-top: 20px;
    text-align: center;
}

.wallet-view-more-btn {
    background: #DA0000;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wallet-view-more-btn:hover {
    background: #b80000;
}

.wallet-view-more-btn i {
    font-size: 12px;
}

/* Wallet Modal */
.wallet-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
    animation: wallet-modal-fade-in 0.3s ease;
}

@keyframes wallet-modal-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.wallet-modal-content {
    background-color: #1a1a1a;
    margin: 2% auto;
    border-radius: 8px;
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    animation: wallet-modal-slide-in 0.3s ease;
}

@keyframes wallet-modal-slide-in {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.wallet-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid #333;
}

.wallet-modal-header h2 {
    margin: 0;
    color: #fff;
    font-size: 24px;
}

.wallet-modal-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.wallet-modal-close:hover,
.wallet-modal-close:focus {
    color: #DA0000;
    background: rgba(218, 0, 0, 0.1);
}

.wallet-modal-body {
    padding: 30px;
    overflow-y: auto;
    flex: 1;
}

/* Wallet Modal Search */
.wallet-modal-search {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #333;
}

.wallet-search-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 15px;
    align-items: end;
}

.wallet-search-group {
    display: flex;
    flex-direction: column;
}

.wallet-search-group label {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.wallet-search-group input[type="date"] {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #fff;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
    transition: border-color 0.3s ease;
}

.wallet-search-group input[type="date"]:focus {
    outline: none;
    border-color: #DA0000;
}

.wallet-search-group input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

.wallet-search-actions {
    display: flex;
    gap: 10px;
    flex-direction: row;
    justify-content: flex-end;
}

.wallet-search-btn,
.wallet-clear-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.wallet-search-btn {
    background: #DA0000;
    color: #fff;
}

.wallet-search-btn:hover {
    background: #b80000;
}

.wallet-clear-btn {
    background: #444;
    color: #fff;
}

.wallet-clear-btn:hover {
    background: #555;
}

/* Wallet Modal Results */
.wallet-modal-results {
    position: relative;
    min-height: 200px;
}

.wallet-loading {
    text-align: center;
    padding: 40px;
    color: #fff;
}

.wallet-loading i {
    font-size: 24px;
    margin-right: 10px;
}

.wallet-modal-results table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.wallet-modal-results table thead {
    background: #DA0000;
}

.wallet-modal-results table th {
    padding: 12px;
    text-align: left;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.wallet-modal-results table td {
    padding: 12px;
    border-bottom: 1px solid #333;
    color: #fff;
    font-size: 14px;
}

.wallet-modal-results table tbody tr:hover {
    background: #252525;
}

.wallet-modal-results table tbody tr:last-child td {
    border-bottom: none;
}

/* Wallet Modal Pagination */
.wallet-modal-pagination {
    margin-top: 20px;
}

.wallet-modal-pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 20px 0;
}

.wallet-pagination-btn {
    background: #DA0000;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.wallet-pagination-btn:hover {
    background: #b80000;
}

.wallet-pagination-info {
    color: #fff;
    font-size: 14px;
}

/* Responsive Wallet Modal */
@media (max-width: 768px) {
    .wallet-modal-content {
        width: 95%;
        margin: 5% auto;
        max-height: 85vh;
    }
    
    .wallet-modal-header {
        padding: 15px 20px;
    }
    
    .wallet-modal-header h2 {
        font-size: 20px;
    }
    
    .wallet-modal-body {
        padding: 20px;
    }
    
    .wallet-search-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .wallet-search-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .wallet-search-btn,
    .wallet-clear-btn {
        width: 100%;
        justify-content: center;
    }
    
    .wallet-modal-results {
        overflow-x: auto;
    }
    
    .wallet-modal-results table {
        font-size: 12px;
        min-width: 600px;
    }
    
    .wallet-modal-results table th,
    .wallet-modal-results table td {
        padding: 8px;
    }
    
    .wallet-modal-pagination-controls {
        flex-direction: column;
        gap: 10px;
    }
    
    .wallet-pagination-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .wallet-modal-content {
        width: 100%;
        margin: 0;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .wallet-modal-header {
        padding: 12px 15px;
    }
    
    .wallet-modal-header h2 {
        font-size: 18px;
    }
    
    .wallet-modal-body {
        padding: 15px;
    }
    
    .wallet-modal-results table {
        font-size: 11px;
        min-width: 500px;
    }
    
    .wallet-modal-results table th,
    .wallet-modal-results table td {
        padding: 6px;
    }
}