/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Force page to start at top */
html {
    scroll-behavior: smooth;
    /* Fix for notifications - only restrict overflow-x */
    overflow-x: visible !important;
}

html, body {
    scroll-padding-top: 0;
    overscroll-behavior: none;
}

:root {
    --primary-yellow: #F7D542;
    --dark-navy: #2D3142;
    --light-navy: #3A4458;
    --white: #FFFFFF;
    --light-gray: #F8F9FA;
    --text-gray: #6B7280;
    --border-gray: #E5E7EB;
    --accent-gold: #FFD700;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--dark-navy);
    background-color: var(--white);
    /* overflow-x: hidden; - Removed to fix notification positioning */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Global Animation Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Header Styles */
.header {
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    min-height: 60px;
}

.header.scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transform: translateY(0);
}

.header.scrolled .logo h1,
.header.scrolled .main-nav a {
    color: var(--dark-navy);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

.header-content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
    padding: 0.5rem 0;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    transition: padding 0.3s ease;
}

.logo {
    animation: fadeInLeft 0.8s ease-out;
}

.logo a {
    text-decoration: none;
    color: inherit;
}

.logo h1 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--dark-navy);
    transition: all 0.3s ease;
    cursor: pointer;
    margin: 0;
    line-height: 1.2;
}

.logo h1:hover {
    transform: scale(1.01);
}

.logo span {
    color: var(--primary-yellow);
    margin-left: 0.1rem;
    display: inline-block;
    transition: transform 0.3s ease;
}

.logo:hover span {
    transform: scale(1.05);
}

.main-nav {
    justify-self: center;
    animation: slideIn 0.8s ease-out 0.2s both;
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    align-items: center;
}

.main-nav a {
    text-decoration: none;
    color: var(--dark-navy);
    font-weight: 500;
    font-size: 1rem;
    position: relative;
    padding: 0.5rem 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.main-nav a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(135deg, var(--primary-yellow), #F4C842);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
}

.main-nav a:hover::before,
.main-nav a.active::before {
    width: 100%;
}

.main-nav a:hover {
    color: var(--primary-yellow);
    transform: translateY(-2px);
}

.main-nav a.active {
    color: var(--primary-yellow);
    font-weight: 600;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-self: end;
    animation: fadeInRight 0.8s ease-out 0.4s both;
}



.auth-buttons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.auth-buttons span,
.auth-buttons .login-btn,
.auth-buttons {
    color: var(--dark-navy);
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    font-size: 0.95rem;
}

.register-btn {
    color: var(--white);

}

.auth-buttons span:hover,
.auth-buttons .login-btn:hover,
.auth-buttons .register-btn:hover {
    background: var(--light-gray);
    transform: translateY(-1px);
}

.user-menu {
    position: relative;
}

.user-menu-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--dark-navy);
}

.user-menu-btn:hover {
    background: var(--light-gray);
    transform: translateY(-1px);
}

.cart-icon {
    position: relative;
    background: var(--primary-yellow);
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--dark-navy);
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.cart-icon:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(247, 213, 66, 0.4);
    border-color: var(--dark-navy);
}

.cart-icon.active {
    background: var(--dark-navy);
    color: var(--primary-yellow);
    animation: pulse 2s infinite;
}

.cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--dark-navy);
    color: var(--white);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    border: 2px solid var(--white);
    animation: pulse 1.5s infinite;
}

/* Hero Section Improvements */
.hero {
    background: linear-gradient(135deg, var(--dark-navy) 0%, var(--light-navy) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 80px;
    overflow: hidden;
    background-image: url('https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=1920&h=1080&fit=crop&auto=format');
    background-size: cover;
    background-position: center;
    /* Removed background-attachment: fixed to prevent scroll issues */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 7, 69, 0.9) 0%, rgba(45, 49, 66, 0.8) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    animation: fadeInUp 1s ease-out;
    padding-left: 2rem;
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 1.5rem;
    line-height: 1.2;
    animation: fadeInUp 1.2s ease-out 0.3s both;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--white);
    opacity: 0.9;
    margin-bottom: 2.5rem;
    line-height: 1.6;
    animation: fadeInUp 1.2s ease-out 0.6s both;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    animation: fadeInUp 1.2s ease-out 0.9s both;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.hero-btn.primary {
    background: var(--primary-yellow);
    color: var(--dark-navy);
}

.hero-btn.primary:hover {
    background: transparent;
    border-color: var(--primary-yellow);
    color: var(--primary-yellow);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(215, 179, 53, 0.3);
}

.hero-btn.secondary {
    background: transparent;
    border-color: var(--white);
    color: var(--white);
}

.hero-btn.secondary:hover {
    background: var(--white);
    color: var(--dark-navy);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}

.hero-visual {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    animation: fadeInRight 1.2s ease-out 0.6s both;
}

.hero-image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.hero-main-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.hero-image:hover .hero-main-image {
    transform: scale(1.05);
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.stat-item {
    text-align: center;
    padding: 1.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-yellow);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--white);
    opacity: 0.9;
}

/* Features Section */
.features-section {
    padding: 6rem 0;
    background: var(--light-gray);
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dark-navy);
    margin-bottom: 1rem;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 60px;
    height: 4px;
    background: var(--primary-yellow);
    transform: translateX(-50%);
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--text-gray);
    max-width: 600px;
    margin: 0 auto;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: var(--white);
    padding: 2.5rem 2rem;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--primary-yellow), #F4C842);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.feature-card:hover::before {
    transform: translateX(0);
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-yellow), #F4C842);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: var(--dark-navy);
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, var(--dark-navy), var(--light-navy));
    color: var(--primary-yellow);
}

.feature-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 1rem;
}

.feature-description {
    color: var(--text-gray);
    line-height: 1.6;
}

/* Product Categories Section */
.product-categories {
    padding: 6rem 0;
    background: var(--white);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.category-card-link {
    text-decoration: none;
    color: inherit;
}

.category-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.category-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.category-image {
    position: relative;
    height: 280px;
    overflow: hidden;
}

.category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.category-card:hover .category-image img {
    transform: scale(1.1);
}

.category-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 7, 69, 0.8), rgba(45, 49, 66, 0.6));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.category-card:hover .category-overlay {
    opacity: 1;
}

.category-overlay .category-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--primary-yellow);
    color: var(--dark-navy);
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    transform: translateY(20px);
    transition: transform 0.3s ease 0.1s;
}

.category-card:hover .category-overlay .category-button {
    transform: translateY(0);
}

.category-content {
    padding: 2rem;
}

.category-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 1rem;
}

.category-content p {
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.category-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.feature-tag {
    background: var(--light-gray);
    color: var(--dark-navy);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Showcase Section */
.showcase-section {
    padding: 6rem 0;
    background: var(--light-gray);
}

.showcase-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.showcase-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dark-navy);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.showcase-description {
    font-size: 1.125rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.showcase-points {
    margin-bottom: 2.5rem;
}

.point-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.point-item i {
    color: var(--primary-yellow);
    font-size: 1.25rem;
}

.point-item span {
    color: var(--dark-navy);
    font-weight: 500;
}

.showcase-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--primary-yellow);
    color: var(--dark-navy);
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.showcase-btn:hover {
    background: var(--dark-navy);
    color: var(--primary-yellow);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 7, 69, 0.3);
}

.showcase-visual {
    position: relative;
}

.showcase-image-main {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.showcase-image-main img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.showcase-image-accent {
    position: absolute;
    top: -2rem;
    right: -2rem;
    width: 200px;
    height: 150px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    border: 4px solid var(--white);
}

.showcase-image-accent img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Animation Improvements */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

[data-animate].animate {
    opacity: 1;
    transform: translateY(0);
}

[data-animate][data-delay="100"].animate {
    transition-delay: 0.1s;
}

[data-animate][data-delay="200"].animate {
    transition-delay: 0.2s;
}

[data-animate][data-delay="300"].animate {
    transition-delay: 0.3s;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .showcase-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .showcase-visual {
        order: -1;
    }
}

@media (max-width: 768px) {
    .hero {
        padding-top: 100px;
        min-height: 80vh;
    }
    
    .hero-content {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .hero-stats {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .features-section,
    .product-categories,
    .showcase-section {
        padding: 4rem 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .showcase-title {
        font-size: 2rem;
    }
    
    .categories-grid {
        grid-template-columns: 1fr;
    }
    
    .showcase-image-accent {
        position: static;
        width: 100%;
        height: 200px;
        margin-top: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-content {
        padding-left: 0;
        padding-right: 0;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.875rem;
    }
    
    .stat-item {
        padding: 1rem 0.5rem;
    }
    
    .feature-card {
        padding: 2rem 1.5rem;
    }
    
    .category-content {
        padding: 1.5rem;
    }
}

/* Page Hero (for commercial and hardware pages) */
.page-hero {
    background: linear-gradient(135deg, var(--dark-navy) 0%, var(--light-navy) 100%);
    min-height: 50vh;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 60px;
    background-image: url('https://images.unsplash.com/photo-1564013434775-f71db2d249b5?w=1920&h=1080&fit=crop&overlay=true');
    background-size: cover;
    background-position: center;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(45, 49, 66, 0.9) 0%, rgba(58, 68, 88, 0.8) 100%);
}

.page-hero .hero-background {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}

.page-hero .hero-content {
    text-align: center;
    color: var(--white);
    max-width: 800px;
    margin: 0 auto;
    padding: 4rem 0;
}

.page-hero .hero-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.page-hero .hero-content p {
    font-size: 1.25rem;
    opacity: 0.9;
    line-height: 1.6;
}

/* Welcome Section */
.welcome-section {
    padding: 5rem 0;
    background-color: var(--white);
    text-align: center;
}

.welcome-content {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.welcome-content.animate {
    opacity: 1;
    transform: translateY(0);
}

.welcome-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: var(--dark-navy);
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
}

.welcome-content h2::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(45deg, transparent, rgba(247, 213, 66, 0.1), transparent);
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.welcome-content:hover h2::before {
    opacity: 1;
}

.subtitle {
    font-style: italic;
    font-size: 1.2rem;
    color: var(--text-gray);
    margin-bottom: 2rem;
    animation: fadeInUp 0.8s ease-out 0.3s both;
}

.description {
    font-size: 1.1rem;
    color: var(--text-gray);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
    animation: fadeInUp 0.8s ease-out 0.6s both;
}

/* Featured Banner */
.featured-banner {
    background: linear-gradient(135deg, var(--primary-yellow) 0%, #F4C842 100%);
    padding: 4rem 0;
    text-align: center;
}

.banner-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: var(--dark-navy);
    margin-bottom: 1rem;
}

.banner-content p {
    font-size: 1.2rem;
    color: var(--dark-navy);
    margin-bottom: 2rem;
}

.cta-button {
    background: var(--dark-navy);
    color: var(--white);
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: inline-block;
    animation: fadeInUp 0.8s ease-out 1.2s both;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.cta-button:hover::before {
    left: 100%;
}

.cta-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px rgba(45, 49, 66, 0.4);
    background: linear-gradient(135deg, var(--dark-navy), var(--light-navy));
}

/* Main Categories */
.main-categories {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--primary-yellow) 0%, #F4C842 100%);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.categories-grid.animate {
    opacity: 1;
    transform: translateY(0);
}

.category-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.category-card-link.animate {
    opacity: 1;
    transform: translateY(0);
}

.category-card-link:nth-child(1) { transition-delay: 0.1s; }
.category-card-link:nth-child(2) { transition-delay: 0.2s; }
.category-card-link:nth-child(3) { transition-delay: 0.3s; }
.category-card-link:nth-child(4) { transition-delay: 0.4s; }

.category-card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    position: relative;
    border: 2px solid transparent;
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, var(--primary-yellow), #F4C842);
    opacity: 0;
    border-radius: 16px;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.category-card-link:hover .category-card {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    border-color: var(--primary-yellow);
}

.category-card-link:hover .category-card::before {
    opacity: 0.1;
}

.category-image {
    height: 250px;
    overflow: hidden;
    position: relative;
}

.category-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(247, 213, 66, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.category-card:hover .category-image::after {
    opacity: 1;
}

.category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-card:hover .category-image img {
    transform: scale(1.08) rotate(1deg);
}

.category-content {
    padding: 2rem;
    position: relative;
}

.category-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: var(--dark-navy);
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.category-card:hover .category-content h3 {
    color: var(--primary-yellow);
}

.category-content p {
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    transition: color 0.3s ease;
}

.category-button {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    padding: 0.875rem 1.75rem;
    border-radius: 10px;
    font-weight: 600;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

.category-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.category-card-link:hover .category-button::before {
    left: 100%;
}

.category-card-link:hover .category-button {
    background: var(--dark-navy);
    color: var(--primary-yellow);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(45, 49, 66, 0.3);
    border-color: var(--primary-yellow);
}

/* Product Categories */
.product-categories {
    padding: 5rem 0;
    background: var(--light-gray);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.product-card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
}

.product-card.animate {
    opacity: 1;
    transform: translateY(0);
}

.product-card:nth-child(1) { transition-delay: 0.1s; }
.product-card:nth-child(2) { transition-delay: 0.2s; }
.product-card:nth-child(3) { transition-delay: 0.3s; }
.product-card:nth-child(4) { transition-delay: 0.4s; }
.product-card:nth-child(5) { transition-delay: 0.5s; }
.product-card:nth-child(6) { transition-delay: 0.6s; }

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(247, 213, 66, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 16px;
}

.product-card:hover::before {
    opacity: 1;
}

.product-card.featured {
    background: linear-gradient(135deg, var(--primary-yellow), #F4C842);
    transform: translateY(-12px) scale(1.02);
    border-color: var(--dark-navy);
    animation: pulse 3s infinite ease-in-out;
}

.product-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    border-color: var(--primary-yellow);
}

.product-image {
    height: 180px;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card h4 {
    padding: 1.5rem;
    font-size: 1.2rem;
    color: var(--dark-navy);
    text-align: center;
    font-weight: 600;
}

/* Door Specifications */
.door-specifications {
    padding: 5rem 0;
    background: var(--white);
}

.door-specifications h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: var(--dark-navy);
    text-align: center;
    margin-bottom: 3rem;
}

.specifications-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: start;
}

.spec-image img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.spec-section {
    margin-bottom: 2.5rem;
}

.spec-section h3 {
    font-size: 1.5rem;
    color: var(--dark-navy);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

/* Removed - option-grid now consistently uses 3 columns */

.option-card {
    background: var(--light-gray);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.option-card:hover {
    background: var(--primary-yellow);
}

.option-image {
    height: 80px;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    overflow: hidden;
}

.option-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.option-card span {
    font-weight: 500;
    color: var(--dark-navy);
}

.frame-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.radio-option:hover {
    background: var(--light-gray);
}

.radio-option input[type="radio"] {
    accent-color: var(--primary-yellow);
}

/* Footer */
.footer {
    background: var(--dark-navy);
    color: var(--white);
    padding: 3rem 0 1rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 2rem;
}

.footer-brand h2 {
    font-family: 'Playfair Display', serif;
    color: var(--primary-yellow);
    margin-bottom: 1rem;
}

.footer-brand p {
    color: var(--white);
    opacity: 0.8;
    line-height: 1.6;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: var(--white);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.footer-links a:hover {
    opacity: 1;
    color: var(--primary-yellow);
}

.footer-social h4 {
    color: var(--primary-yellow);
    margin-bottom: 1rem;
}

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icons a {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.social-icons a:hover {
    transform: translateY(-2px);
}

.footer-bottom {
    border-top: 1px solid var(--light-navy);
    padding-top: 1rem;
    text-align: center;
}

.footer-bottom p {
    opacity: 0.6;
}

/* Final CTA */
.final-cta {
    background: linear-gradient(135deg, var(--dark-navy) 0%, var(--light-navy) 100%);
    padding: 4rem 0;
    text-align: center;
}

.final-cta h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: var(--white);
    margin-bottom: 1rem;
}

.final-cta p {
    font-size: 1.2rem;
    color: var(--white);
    opacity: 0.9;
    margin-bottom: 2rem;
}

.final-cta .cta-button {
    background: var(--primary-yellow);
    color: var(--dark-navy);
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 1rem;
    }
    
    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    
    .header-actions {
        order: -1;
        width: 100%;
        justify-content: space-between;
    }
    
    .search-box input {
        width: 200px;
    }
    
    .hero-text h2 {
        font-size: 2.5rem;
    }
    
    .page-hero .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .welcome-content h2 {
        font-size: 2rem;
    }
    
    .banner-content h2 {
        font-size: 2rem;
    }
    
    .categories-grid {
        grid-template-columns: 1fr;
    }
    
    .specifications-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .final-cta h2 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .hero-text h2 {
        font-size: 2rem;
    }
    
    .hero-text p {
        font-size: 1.1rem;
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .option-grid {
        grid-template-columns: 1fr;
    }
}

/* Cart Page Styles */
.cart-main {
    padding-top: 6rem;
    padding-bottom: 3rem;
    min-height: 70vh;
}

.cart-main h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: var(--dark-navy);
    margin-bottom: 2rem;
    text-align: center;
}

.empty-cart {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-cart i {
    font-size: 4rem;
    color: var(--text-gray);
    margin-bottom: 1rem;
}

.empty-cart h2 {
    color: var(--dark-navy);
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
}

.empty-cart p {
    color: var(--text-gray);
    margin-bottom: 2rem;
}

.cart-items {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;
}

/* Old cart-item styling removed to prevent conflicts with cart page grid layout */

.qty-btn {
    background: var(--primary-yellow);
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 600;
    color: var(--dark-navy);
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-btn:hover {
    transform: scale(1.1);
}

.remove-btn {
    background: #EF4444;
    color: white;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.cart-summary {
    background: var(--light-gray);
    padding: 2rem;
    border-radius: 12px;
    height: fit-content;
    position: sticky;
    top: 100px;
}

.cart-summary h3 {
    color: var(--dark-navy);
    margin-bottom: 1.5rem;
    font-family: 'Playfair Display', serif;
}

.cart-summary .summary-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
    width: 100%;
}

.cart-summary .summary-line:last-of-type {
    border-top: 2px solid var(--dark-navy);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--dark-navy);
    margin-top: 1rem;
    padding-top: 1rem;
}

.checkout-btn {
    width: 100%;
    background: var(--primary-yellow);
    color: var(--dark-navy);
    border: none;
    padding: 1rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.checkout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(247, 213, 66, 0.3);
}

.logo a {
    text-decoration: none;
    color: inherit;
}

/* Responsive cart styles */
@media (max-width: 768px) {
    .cart-items {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .cart-item {
        flex-direction: column;
        text-align: center;
    }
    
    .cart-item-quantity {
        justify-content: center;
    }
    
    .cart-summary {
        position: relative;
        top: auto;
    }
}

/* Category and Product Pages */
.breadcrumb {
    background: var(--light-gray);
    padding: 1rem 0;
    padding-top: calc(1rem + 70px);
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.breadcrumb-nav a {
    color: var(--primary-yellow);
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb-nav span {
    color: var(--text-gray);
}

.page-header {
    background: var(--white);
    padding: 1rem 0;
    text-align: center;
}

.page-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--dark-navy);
    margin-bottom: 0.3rem;
}

.page-header p {
    font-size: 1rem;
    color: var(--text-gray);
    max-width: 600px;
    margin: 0 auto;
}

.product-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.product-info {
    padding: 1.5rem;
}

.product-info h4 {
    font-size: 1.4rem;
    color: var(--dark-navy);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.product-price {
    color: var(--primary-yellow);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.product-description {
    color: var(--text-gray);
    font-size: 0.9rem;
    line-height: 1.5;
}

.product-card-link:hover .product-card {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* Why Choose Section */
.why-choose {
    background: var(--light-gray);
    padding: 4rem 0;
}

.why-choose h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: var(--dark-navy);
    text-align: center;
    margin-bottom: 3rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
}

.feature-card h3 {
    color: var(--dark-navy);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.feature-card p {
    color: var(--text-gray);
    line-height: 1.6;
}

/* Active navigation link */
.main-nav a.active {
    color: var(--primary-yellow);
    font-weight: 600;
}

/* Mobile responsive updates */
@media (max-width: 768px) {
    .page-header h1 {
        font-size: 2rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
}

/* Product Detail Page */
.product-details {
    padding: 3rem 0;
    background: var(--white);
}

.product-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.product-images {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.main-image {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.main-image img {
    width: 100%;
    height: auto;
    display: block;
}

.thumbnail-images {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.thumbnail-images img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.thumbnail-images img:hover {
    border-color: var(--primary-yellow);
}

.product-info-section h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: var(--dark-navy);
    margin-bottom: 1rem;
}

.product-rating {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stars {
    color: var(--primary-yellow);
}

.stars i {
    margin-right: 0.2rem;
}

.product-rating span {
    color: var(--text-gray);
    font-size: 0.9rem;
}

.price-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.current-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark-navy);
}

.original-price {
    font-size: 1.2rem;
    color: var(--text-gray);
    text-decoration: line-through;
}

.discount {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.product-description {
    margin-bottom: 2rem;
}

.product-description p {
    color: var(--text-gray);
    line-height: 1.6;
    font-size: 1.1rem;
}

.product-features {
    margin-bottom: 2rem;
}

.product-features h3 {
    color: var(--dark-navy);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.product-features ul {
    list-style: none;
    padding: 0;
}

.product-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-gray);
}

.product-features li i {
    color: var(--primary-yellow);
    font-size: 0.9rem;
}

.add-to-cart-section {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
}

.quantity-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.quantity-selector label {
    color: var(--dark-navy);
    font-weight: 600;
}

.qty-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 2px solid var(--border-gray);
    border-radius: 8px;
    padding: 0.5rem;
}

.qty-controls .qty-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--dark-navy);
    cursor: pointer;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.qty-controls .qty-btn:hover {
    background: var(--primary-yellow);
}

.qty-controls span {
    font-weight: 600;
    min-width: 30px;
    text-align: center;
    color: var(--dark-navy);
}

.add-to-cart-btn {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    border: none;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.add-to-cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(247, 213, 66, 0.3);
}

.size-options select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-gray);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--dark-navy);
    background: var(--white);
}

.color-options {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.color-swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.color-swatch:hover {
    transform: scale(1.1);
}

.color-swatch.selected {
    border-color: var(--primary-yellow);
    box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-yellow);
}

/* Technical Specifications */
.tech-specs {
    background: var(--light-gray);
    padding: 3rem 0;
}

.tech-specs h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: var(--dark-navy);
    text-align: center;
    margin-bottom: 3rem;
}

.specs-table {
    max-width: 600px;
    margin: 0 auto;
    background: var(--white);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-gray);
}

.spec-row:last-child {
    border-bottom: none;
}

.spec-label {
    font-weight: 600;
    color: var(--dark-navy);
}

.spec-value {
    color: var(--text-gray);
    text-align: right;
}

/* Product page responsive */
@media (max-width: 768px) {
    .product-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .product-info-section h1 {
        font-size: 2rem;
    }
    
    .price-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .add-to-cart-section {
        flex-direction: column;
        align-items: stretch;
    }
    
    .add-to-cart-btn {
        justify-content: center;
    }
    
    .thumbnail-images {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }
    
    .specs-table {
        margin: 0 1rem;
    }
    
    .spec-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .spec-value {
        text-align: left;
    }
}

/* Product Configurator Styles */
.product-selection {
    background: var(--light-gray);
    padding: 1.2rem 0;
}

.product-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.product-tab {
    background: var(--white);
    border: 3px solid transparent;
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 150px;
}

.product-tab img {
    width: 100px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}

.product-tab span {
    font-weight: 600;
    color: var(--dark-navy);
    text-align: center;
}

.product-tab:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.product-tab.active {
    border-color: var(--primary-yellow);
    background: var(--primary-yellow);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(247, 213, 66, 0.3);
}

.product-tab.active span {
    color: var(--dark-navy);
    font-weight: 700;
}

.product-configurator {
    padding: 1.5rem 0;
    background: var(--white);
}

.configurator-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2rem;
    align-items: start;
}

.product-display {
    position: sticky;
    top: 100px;
}

.product-main-image {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

.product-main-image img {
    width: 100%;
    height: auto;
    display: block;
}

.product-main-info h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    color: var(--dark-navy);
    margin-bottom: 1rem;
}

.price-display {
    margin-bottom: 1rem;
}

.price-display .current-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark-navy);
}

.sku-display {
    padding: 1rem;
    background: var(--light-gray);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.sku-display span {
    color: var(--text-gray);
}

.sku-display strong {
    color: var(--dark-navy);
    font-family: 'Courier New', monospace;
}

.configuration-options {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    position: sticky;
    bottom: 20px;
    z-index: 1000;
}

.config-section {
    background: var(--light-gray);
    padding: 1rem;
    border-radius: 12px;
}

.config-section h3 {
    font-size: 1.2rem;
    color: var(--dark-navy);
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.8rem;
}

.config-option {
    background: var(--white);
    border: 2px solid var(--border-gray);
    border-radius: 8px;
    padding: 0.6rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    min-height: 60px;
}

.config-option img {
    width: 60px;
    height: 45px;
    object-fit: cover;
    border-radius: 4px;
}

.config-option span {
    font-weight: 500;
    color: var(--dark-navy);
    font-size: 0.9rem;
}

.config-option:hover {
    border-color: var(--primary-yellow);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(247, 213, 66, 0.2);
}

.config-option.selected {
    border-color: var(--primary-yellow);
    background: var(--primary-yellow);
    color: var(--dark-navy);
}

.config-option.selected span {
    font-weight: 600;
    color: var(--dark-navy);
}

.size-selection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.size-option {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.size-option label {
    font-weight: 600;
    color: var(--dark-navy);
}

.size-option select,
#hardware-addon {
    padding: 0.75rem;
    border: 2px solid var(--border-gray);
    border-radius: 8px;
    background: var(--white);
    color: var(--dark-navy);
    font-size: 1rem;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.size-option select:focus,
#hardware-addon:focus {
    border-color: var(--primary-yellow);
    outline: none;
}

.add-to-cart-section {
    background: var(--white);
    border: 2px solid var(--primary-yellow);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(247, 213, 66, 0.3);
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.quantity-controls label {
    font-weight: 600;
    color: var(--dark-navy);
}

.qty-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 2px solid var(--border-gray);
    border-radius: 8px;
    padding: 0.5rem;
}

.qty-wrapper .qty-btn {
    background: var(--primary-yellow);
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 600;
    color: var(--dark-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.qty-wrapper .qty-btn:hover {
    transform: scale(1.1);
}

.qty-wrapper input[type="number"] {
    min-width: 60px;
    width: 60px;
    text-align: center;
    font-weight: 600;
    color: var(--dark-navy);
    border: none;
    background: transparent;
    font-size: 1rem;
    padding: 0.2rem;
    border-radius: 4px;
    outline: none;
}

.qty-wrapper input[type="number"]:focus {
    background: var(--light-gray);
}

.add-to-cart-btn {
    width: 100%;
    background: var(--primary-yellow);
    color: var(--dark-navy);
    border: none;
    padding: 1.2rem;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.add-to-cart-btn:hover {
    background: var(--dark-navy);
    color: var(--primary-yellow);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(45, 49, 66, 0.3);
}

/* Configurator responsive */
@media (max-width: 768px) {
    .product-tabs {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .product-tab {
        min-width: auto;
        padding: 0.75rem;
    }
    
    .product-tab img {
        width: 60px;
        height: 40px;
    }
    
    .configurator-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .product-display {
        position: relative;
        top: auto;
    }
    
    .option-grid {
        grid-template-columns: 1fr;
    }
    
         .quantity-controls {
         justify-content: center;
     }
}

/* Admin Dashboard Styles */
html.admin-html, 
body.admin-body {
    margin: 0 !important;
    padding: 0 !important;
    scroll-padding-top: 0 !important;
    overflow-x: hidden;
    position: relative;
}

.admin-body {
    background: #f5f5f5 !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-padding-top: 0 !important;
    overflow-x: hidden;
    top: 0 !important;
    left: 0 !important;
}

.admin-header {
    background: var(--dark-navy);
    color: var(--white);
    position: fixed;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 10000; /* Increased z-index to ensure header is always on top */
    height: 70px;
    margin: 0 !important;
    padding: 0;
}

.admin-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    height: 100%;
}

.admin-logo h1 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin: 0;
}

.admin-logo span {
    color: var(--primary-yellow);
}

.admin-user {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.back-to-site {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    transition: transform 0.3s ease;
}

.back-to-site:hover {
    transform: translateY(-2px);
}

.admin-sidebar {
    position: fixed;
    left: 0px;
    padding-left: 5px;
    top: 70px;
    width: 250px;
    height: calc(100vh - 70px);
    background: var(--white);
    border-right: 1px solid var(--border-gray);
    overflow-y: auto; /* Shows scrollbar only when content overflows */
    overscroll-behavior: contain; /* Prevent scroll chaining */
}

.admin-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-nav li {
    border-bottom: 1px solid var(--border-gray);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    color: var(--dark-navy);
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-link:hover {
    background: var(--light-gray);
    color: var(--primary-yellow);
}

.nav-link.active {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    font-weight: 600;
}

.nav-link i {
    width: 20px;
    text-align: center;
}

.admin-main {
    margin-left: 250px;
    margin-top: 70px;
    padding: 1rem 2rem 2rem 2rem;
    padding-top: 1.5rem;
    position: relative; /* Ensure proper stacking context */
    z-index: 1; /* Below header but above background */
}

.admin-section {
    display: none;
}

.admin-section.active {
    display: block;
}

.admin-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    margin-top: 0; /* Ensure header starts at the top of the section */
}

.admin-section-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: var(--dark-navy);
    margin: 0;
}

.add-product-btn {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.3s ease;
}

.add-product-btn:hover {
    transform: translateY(-2px);
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--white);
    padding: 1.5rem 1.5rem 1.5rem 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--primary-yellow);
}

.stat-content h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark-navy);
    margin: 0 0 0.5rem 0;
}

.stat-content p {
    color: var(--text-gray);
    margin: 0;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

.admin-product-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.admin-product-card:hover {
    transform: translateY(-5px);
}

.admin-product-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.product-info {
    padding: 1rem;
}

.product-info h4 {
    color: var(--dark-navy);
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
}

.product-price {
    color: var(--primary-yellow);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0.25rem 0;
}

.product-stock {
    color: var(--text-gray);
    font-size: 0.9rem;
    margin: 0;
}

.product-actions {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    border-top: 1px solid var(--border-gray);
}

.edit-btn, .delete-btn {
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.edit-btn {
    background: var(--primary-yellow);
    color: var(--dark-navy);
}

.delete-btn {
    background: #EF4444;
    color: white;
}

.edit-btn:hover, .delete-btn:hover {
    transform: scale(1.1);
}

/* Admin responsive */
@media (max-width: 768px) {
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .admin-main {
        margin-left: 0;
    }
    
    .admin-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .dashboard-stats {
        grid-template-columns: 1fr;
    }
    
         .products-grid {
         grid-template-columns: 1fr;
     }
}

/* Configuration Breakdown Styles */
.configuration-breakdown {
    background: var(--light-gray);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-gray);
}

.configuration-breakdown h3 {
    color: var(--dark-navy);
    margin-bottom: 0.8rem;
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
}

.sku-section {
    background: var(--white);
    padding: 0.6rem;
    border-radius: 6px;
    margin-bottom: 0.6rem;
}

.sku-section h4 {
    margin: 0;
    color: var(--dark-navy);
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.sku-section span {
    color: var(--primary-yellow);
    font-weight: 700;
}

.options-breakdown {
    background: var(--white);
    padding: 0.8rem;
    border-radius: 6px;
    margin-bottom: 0.6rem;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-gray);
    font-size: 0.9rem;
}

.breakdown-item:last-child {
    border-bottom: none;
}

.breakdown-label {
    font-weight: 600;
    color: var(--dark-navy);
}

.breakdown-value {
    color: var(--text-gray);
    text-align: right;
}

.breakdown-value.exact-size {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--primary-yellow);
}

.price-breakdown {
    background: var(--white);
    padding: 0.8rem;
    border-radius: 6px;
}

.price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.price-item.total {
    border-top: 2px solid var(--dark-navy);
    padding-top: 1rem;
    margin-top: 1rem;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--dark-navy);
}

.price-item.addon {
    color: var(--text-gray);
    font-size: 0.9rem;
}

/* Door Opening Modal Styles - REMOVED - See AGGRESSIVE MODAL FIX section */

/* Override any modals that use inline styles */
.modal[style],
#add-option-modal[style],
#edit-option-modal[style],
#add-category-modal[style],
#add-hardware-modal[style],
#edit-hardware-modal[style],
#door-opening-modal[style],
#commercial-door-opening-modal[style],
.popup-options-modal[style],
.customer-details-modal[style],
.custom-modal-overlay[style] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.door-opening-modal-content {
    background: var(--white);
    border-radius: 12px;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-gray);
}

.modal-header h3 {
    margin: 0;
    color: var(--dark-navy);
    font-family: 'Playfair Display', serif;
}

.close {
    color: var(--text-gray);
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close:hover {
    color: var(--dark-navy);
}

.modal-body {
    padding: 1.5rem;
}

.door-opening-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.door-option {
    background: var(--light-gray);
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    border: 3px solid transparent;
}

.door-option:hover {
    border-color: var(--primary-yellow);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(247, 213, 66, 0.3);
}

.door-option.selected {
    border-color: var(--primary-yellow);
    background: var(--primary-yellow);
}

.door-diagram {
    position: relative;
    margin-bottom: 1rem;
}

.door-diagram img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

.door-labels {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    pointer-events: none;
}

.label {
    background: rgba(45, 49, 66, 0.9);
    color: var(--white);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.door-option h4 {
    margin: 0;
    color: var(--dark-navy);
    font-weight: 600;
}

.modal-note {
    background: var(--light-gray);
    padding: 1rem 1rem 1rem 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--primary-yellow);
}

.modal-note p {
    margin: 0;
    color: var(--text-gray);
    line-height: 1.6;
}

.config-option small {
    display: block;
    font-size: 0.75rem;
    color: var(--text-gray);
    margin-top: 0.25rem;
    font-style: italic;
}

/* Mobile responsive for new elements */
@media (max-width: 768px) {
    .door-opening-options {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .breakdown-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .breakdown-value {
        text-align: left;
    }
    
         .door-opening-modal-content {
         width: 95%;
         margin: 1rem;
     }
}

/* Admin Configuration Management Styles */
.config-management {
    max-width: 1200px;
    margin: 0 auto;
}

.config-categories {
    display: grid;
    gap: 2rem;
}

.config-category {
    background: var(--white);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}

.config-category h3 {
    color: var(--dark-navy);
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
    border-bottom: 2px solid var(--primary-yellow);
    padding-bottom: 0.5rem;
}

.config-options {
    display: grid;
    gap: 1rem;
}

.config-option-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    background: var(--light-gray);
    border-radius: 8px;
}

.config-option-item label {
    font-weight: 600;
    color: var(--dark-navy);
}

.config-option-item input {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-gray);
    border-radius: 4px;
    font-size: 0.9rem;
    width: 120px;
}

.save-option-btn {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.save-option-btn:hover {
    background: var(--dark-navy);
    color: var(--white);
}

/* Admin Image Management Styles */
.image-management {
    max-width: 1200px;
    margin: 0 auto;
}

.product-image-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.image-category {
    background: var(--white);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}

.image-category h3 {
    color: var(--dark-navy);
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
    text-align: center;
}

.image-upload-area {
    text-align: center;
}

.current-image {
    position: relative;
    margin-bottom: 1rem;
    border-radius: 8px;
    overflow: hidden;
}

.current-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(45, 49, 66, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.current-image:hover .image-overlay {
    opacity: 1;
}

.change-image-btn {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.change-image-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(247, 213, 66, 0.4);
}

.upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--dark-navy);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.upload-btn:hover {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    transform: translateY(-2px);
}

/* Admin Section Navigation */
.admin-section {
    display: none;
}

.admin-section.active {
    display: block;
}

.admin-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    color: var(--dark-navy);
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.admin-nav .nav-link:hover,
.admin-nav .nav-link.active {
    background: var(--primary-yellow);
    color: var(--dark-navy);
}

.nav-section-title {
    color: var(--dark-navy);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 1.5rem 1.5rem 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    border-bottom: 2px solid var(--primary-yellow);
}

/* Product Admin Tabs */
.product-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-gray);
}

.product-admin-tab {
    background: none;
    border: none;
    padding: 1rem 1.5rem;
    color: var(--text-gray);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.product-admin-tab:hover {
    color: var(--dark-navy);
}

.product-admin-tab.active {
    color: var(--dark-navy);
    border-bottom-color: var(--primary-yellow);
}

/* Product Admin Content */
.product-admin-content {
    max-width: 1200px;
    margin: 0 auto;
}

.product-overview {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.product-image-section {
    background: var(--white);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}

.product-image-section h4 {
    color: var(--dark-navy);
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
}

.product-image-preview {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.product-details {
    background: var(--white);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}

.product-details h4 {
    color: var(--dark-navy);
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem 0.75rem 1.5rem;
    border-bottom: 1px solid var(--border-gray);
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 600;
    color: var(--dark-navy);
}

.detail-value {
    color: var(--text-gray);
}

.edit-detail-btn {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    border: none;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 0.75rem;
}

.edit-detail-btn:hover {
    background: var(--dark-navy);
    color: var(--white);
}

/* Configuration Categories in Admin */
.admin-config-categories {
    display: grid;
    gap: 2rem;
}

.admin-config-category {
    background: var(--white);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}

.admin-config-category h4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--dark-navy);
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
    border-bottom: 2px solid var(--primary-yellow);
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
}

.add-option-btn {
    background: var(--dark-navy);
    color: var(--white);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-option-btn:hover {
    background: var(--primary-yellow);
    color: var(--dark-navy);
}

.admin-option-list {
    display: grid;
    gap: 1rem;
}

.admin-option-item {
    display: grid;
    grid-template-columns: 1fr auto auto auto auto auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    background: var(--light-gray);
    border-radius: 8px;
}

.option-info {
    display: flex;
    flex-direction: column;
}

.option-name {
    font-weight: 600;
    color: var(--dark-navy);
}

.option-type {
    font-size: 0.8rem;
    color: var(--text-gray);
}

.option-price {
    font-weight: 600;
    color: var(--dark-navy);
    font-family: 'Courier New', monospace;
}

.option-sku {
    font-family: 'Courier New', monospace;
    color: var(--text-gray);
    font-size: 0.9rem;
}

.edit-option-btn {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.edit-option-btn:hover {
    background: var(--dark-navy);
    color: var(--white);
}

.delete-option-btn {
    background: #dc3545;
    color: var(--white);
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.delete-option-btn:hover {
    background: #c82333;
}

/* Move buttons styling */
.move-option-up, .move-option-down,
.move-category-up, .move-category-down {
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f3f4f6;
    color: #374151;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
    line-height: 1;
}

.move-option-up:hover, .move-option-down:hover,
.move-category-up:hover, .move-category-down:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.option-order-controls {
    display: inline-flex;
    gap: 4px;
    margin-left: 8px;
}

/* Option Modal Styles */
.option-modal-content {
    background: var(--white);
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--dark-navy);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    font-size: 1rem;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-yellow);
    box-shadow: 0 0 0 3px rgba(247, 213, 66, 0.1);
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
}

.cancel-btn {
    background: var(--border-gray);
    color: var(--text-gray);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cancel-btn:hover {
    background: var(--text-gray);
    color: var(--white);
}

.save-btn {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.save-btn:hover {
    background: var(--dark-navy);
    color: var(--white);
}

/* Admin Sidebar Color Fix */
.admin-sidebar {
    background: var(--light-gray);
    color: var(--dark-navy);
}

.admin-sidebar .admin-nav ul {
    list-style: none;
    padding: 1rem 0;
    margin: 0;
}

.admin-sidebar .admin-nav li {
    margin: 0;
}

/* Mobile responsive for admin sections */
@media (max-width: 768px) {
    .config-option-item {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        text-align: center;
    }
    
    .config-option-item input {
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
    }
    
    .product-image-categories {
        grid-template-columns: 1fr;
    }
    
    .product-overview {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .admin-option-item {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        text-align: center;
    }
    
    .product-tabs {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
         .product-admin-tab {
         padding: 0.75rem 1rem;
         font-size: 0.9rem;
     }
}

/* Hardware Category Styles */
.hardware-categories {
    padding: 4rem 0;
    background: var(--light-gray);
}

.category-tabs {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.category-tab {
    background: var(--white);
    border: none;
    border-radius: 12px;
    padding: 1.5rem;
    min-width: 200px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
    text-align: center;
}

.category-tab:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(247, 213, 66, 0.3);
    border: 2px solid var(--primary-yellow);
}

.category-tab.active {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(247, 213, 66, 0.4);
}

.category-tab i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

.category-tab span {
    font-weight: 600;
    font-size: 1rem;
}

.hardware-products-display {
    margin-top: 3rem;
}

.hardware-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.hardware-product-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
    transition: all 0.3s ease;
}

.hardware-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(45, 49, 66, 0.15);
}

.hardware-product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.hardware-product-info {
    padding: 1.5rem;
}

.hardware-product-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 0.5rem;
}

.hardware-product-description {
    color: var(--text-gray);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.hardware-product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-yellow);
    margin-bottom: 1rem;
}

.hardware-product-sku {
    font-size: 0.8rem;
    color: var(--text-gray);
    font-family: 'Courier New', monospace;
    margin-bottom: 1rem;
}

.hardware-add-to-cart {
    width: 100%;
    background: var(--dark-navy);
    color: var(--white);
    border: none;
    padding: 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hardware-add-to-cart:hover {
    background: var(--primary-yellow);
    color: var(--dark-navy);
}

/* Hardware Admin Styles */
.hardware-category-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-gray);
}

.hardware-tab {
    background: none;
    border: none;
    padding: 1rem 1.5rem;
    color: var(--text-gray);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.hardware-tab:hover {
    color: var(--dark-navy);
}

.hardware-tab.active {
    color: var(--dark-navy);
    border-bottom-color: var(--primary-yellow);
}

.hardware-admin-content {
    max-width: 1200px;
    margin: 0 auto;
}

.hardware-products-admin-grid {
    display: grid;
    gap: 1rem;
}

.hardware-admin-item {
    display: grid;
    grid-template-columns: 80px 1fr auto auto auto auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}

.hardware-admin-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
}

.hardware-admin-info {
    display: flex;
    flex-direction: column;
}

.hardware-admin-name {
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 0.25rem;
}

.hardware-admin-description {
    font-size: 0.9rem;
    color: var(--text-gray);
    margin-bottom: 0.25rem;
}

.hardware-admin-category {
    font-size: 0.8rem;
    color: var(--primary-yellow);
    font-weight: 600;
}

.hardware-admin-price {
    font-weight: 700;
    color: var(--dark-navy);
    font-size: 1.1rem;
}

.hardware-admin-sku {
    font-family: 'Courier New', monospace;
    color: var(--text-gray);
    font-size: 0.9rem;
}

.add-product-btn {
    background: var(--dark-navy);
    color: var(--white);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.add-product-btn:hover {
    background: var(--primary-yellow);
    color: var(--dark-navy);
}

.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
}

.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-yellow);
    box-shadow: 0 0 0 3px rgba(247, 213, 66, 0.1);
}

/* Mobile responsive for hardware */
@media (max-width: 768px) {
    .category-tabs {
        gap: 1rem;
    }
    
    .category-tab {
        min-width: 150px;
        padding: 1rem;
    }
    
    .hardware-products-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .hardware-admin-item {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        text-align: center;
    }
    
    .hardware-category-tabs {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .hardware-tab {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
}

/* Contact Page Styles */
.contact-hero {
    background: linear-gradient(135deg, var(--dark-navy) 0%, var(--light-navy) 100%);
    min-height: 50vh;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 60px;
    background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1920&h=1080&fit=crop&overlay=true');
    background-size: cover;
    background-position: center;
}

.contact-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(45, 49, 66, 0.9) 0%, rgba(58, 68, 88, 0.8) 100%);
}

.contact-hero .hero-background {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}

.contact-hero .hero-content {
    text-align: center;
    color: var(--white);
    max-width: 800px;
    margin: 0 auto;
    padding: 4rem 0;
}

.contact-hero .hero-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.contact-section {
    padding: 5rem 0;
    background: var(--white);
}

.contact-header {
    text-align: center;
    margin-bottom: 4rem;
}

.contact-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: var(--dark-navy);
    margin-bottom: 1rem;
}

.contact-header p {
    font-size: 1.25rem;
    color: var(--text-gray);
}

.contact-content {
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 5rem;
}

.contact-form-container {
    background: var(--white);
    padding: 3rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(45, 49, 66, 0.1);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 600;
    color: var(--dark-navy);
    font-size: 1rem;
}

.form-group input,
.form-group textarea {
    padding: 1rem 1.5rem;
    border: 2px solid var(--border-gray);
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-yellow);
    box-shadow: 0 0 0 3px rgba(247, 213, 66, 0.1);
}

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

.send-message-btn {
    background: var(--dark-navy);
    color: var(--white);
    padding: 1.25rem 3rem;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: center;
    min-width: 200px;
}

.send-message-btn:hover {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(45, 49, 66, 0.2);
}

.contact-info-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto 5rem;
}

.contact-card {
    background: var(--light-gray);
    padding: 3rem 2rem;
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(45, 49, 66, 0.1);
}

.contact-icon {
    background: var(--dark-navy);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.contact-icon i {
    font-size: 2rem;
    color: var(--primary-yellow);
}

.contact-details h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}

.contact-details p {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark-navy);
    letter-spacing: 0.5px;
}

.map-section {
    margin-top: 3rem;
}

.map-container {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(45, 49, 66, 0.1);
}

.map-container iframe {
    width: 100%;
    height: 450px;
    border: none;
}

/* Contact Form Success Message */
.form-success-message {
    background: #10B981;
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: 600;
}

.form-error-message {
    background: #EF4444;
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: 600;
}

/* Contact Page Mobile Responsive */
@media (max-width: 768px) {
    .contact-hero .hero-content h1 {
        font-size: 2.5rem;
    }

    .contact-header h2 {
        font-size: 2rem;
    }

    .contact-form-container {
        padding: 2rem;
        margin: 0 1rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .contact-info-cards {
        grid-template-columns: 1fr;
        margin: 0 1rem 3rem;
    }

    .contact-card {
        padding: 2rem 1.5rem;
    }

    .send-message-btn {
        width: 100%;
    }
}

/* Contact Settings Admin Styles */
.contact-settings-content {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.contact-info-section,
.contact-form-section,
.contact-map-section {
    background: var(--white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}

.contact-info-section h3,
.contact-form-section h3,
.contact-map-section h3 {
    color: var(--dark-navy);
    margin-bottom: 0.5rem;
    font-family: 'Playfair Display', serif;
    border-bottom: 2px solid var(--primary-yellow);
    padding-bottom: 0.5rem;
}

.contact-info-section p,
.contact-form-section p,
.contact-map-section p {
    color: var(--text-gray);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.contact-settings-grid .form-group {
    margin-bottom: 1.5rem;
}

.contact-settings-grid .form-group small {
    color: var(--text-gray);
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: block;
}

.contact-form-test {
    background: var(--light-gray);
    padding: 2rem;
    border-radius: 12px;
    margin-top: 2rem;
}

.contact-form-test h3 {
    color: var(--dark-navy);
    margin-bottom: 0.5rem;
    font-family: 'Playfair Display', serif;
}

.contact-form-test p {
    color: var(--text-gray);
    margin-bottom: 1.5rem;
}

.test-form-container {
    background: var(--white);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(45, 49, 66, 0.05);
}

.test-form-btn {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.test-form-btn:hover {
    background: var(--dark-navy);
    color: var(--white);
}

/* Contact Settings Mobile Responsive */
@media (max-width: 768px) {
    .contact-settings-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .contact-info-section,
    .contact-form-section,
    .contact-map-section {
        padding: 1.5rem;
    }

    .contact-form-test {
        padding: 1.5rem;
    }

    .test-form-container {
        padding: 1.5rem;
    }
}

/* Authentication System Styles */
.auth-buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.auth-logged-out {
    display: flex;
    gap: 0.5rem;
}

.login-btn, .register-btn {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.login-btn {
    color: var(--dark-navy);
    background: transparent;
}

.login-btn:hover, .login-btn.active {
    background: var(--primary-yellow);
    color: var(--dark-navy);
}

.register-btn {
    background: var(--dark-navy);
    color: var(--white);
}

.register-btn:hover, .register-btn.active {
    background: var(--primary-yellow);
    color: var(--dark-navy);
}

/* User Menu Styles */
.user-menu {
    position: relative;
}

.user-menu-btn {
    background: var(--light-gray);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.user-menu-btn:hover {
    background: var(--primary-yellow);
    color: var(--dark-navy);
}

.user-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.user-type {
    font-size: 0.8rem;
    color: var(--text-gray);
    background: var(--white);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
}

.user-type.admin {
    background: linear-gradient(135deg, #EF4444, #F87171);
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid #DC2626;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.user-menu-btn:hover .user-type.admin {
    background: linear-gradient(135deg, #DC2626, #EF4444);
    color: white !important;
    border: 1px solid #B91C1C;
    box-shadow: 0 3px 12px rgba(220, 38, 38, 0.5);
}

.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(45, 49, 66, 0.15);
    min-width: 200px;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.user-menu:hover .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--dark-navy);
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.user-dropdown a:hover, .user-dropdown a.active {
    background: var(--light-gray);
}

.user-dropdown a i {
    width: 16px;
    text-align: center;
}

/* Auth Pages Styles */
.auth-section {
    padding: 8rem 0 4rem;
    background: var(--light-gray);
    min-height: 100vh;
}

.auth-container {
    max-width: 600px;
    margin: 0 auto;
}

.auth-header {
    text-align: center;
    margin-bottom: 3rem;
}

.auth-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: var(--dark-navy);
    margin-bottom: 1rem;
}

.auth-header p {
    color: var(--text-gray);
    font-size: 1.1rem;
}

.auth-form-container {
    background: var(--white);
    padding: 3rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(45, 49, 66, 0.1);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.auth-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -0.5rem 0;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.remember-me input[type="checkbox"] {
    width: auto;
}

.forgot-password {
    color: var(--primary-yellow);
    text-decoration: none;
    font-size: 0.9rem;
}

.forgot-password:hover {
    text-decoration: underline;
}

.auth-submit-btn {
    background: var(--dark-navy);
    color: var(--white);
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.auth-submit-btn:hover {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(45, 49, 66, 0.2);
}

.auth-divider {
    text-align: center;
    margin: 2rem 0;
    position: relative;
}

.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-gray);
}

.auth-divider span {
    background: var(--white);
    padding: 0 1rem;
    color: var(--text-gray);
    position: relative;
}

.auth-alternative {
    text-align: center;
}

.auth-alternative a {
    color: var(--primary-yellow);
    text-decoration: none;
    font-weight: 600;
}

.auth-alternative a:hover {
    text-decoration: underline;
}

.auth-benefits {
    margin-top: 2rem;
    padding: 2rem;
    background: var(--light-gray);
    border-radius: 12px;
}

.auth-benefits h3 {
    color: var(--dark-navy);
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
}

.auth-benefits ul {
    list-style: none;
    padding: 0;
}

.auth-benefits li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-gray);
}

.auth-benefits li i {
    color: var(--primary-yellow);
    width: 16px;
}

/* Account Type Info Styles */
.account-type-info {
    margin: 2rem 0;
    padding: 2rem;
    background: var(--light-gray);
    border-radius: 12px;
}

.account-type-info h3 {
    color: var(--dark-navy);
    margin-bottom: 1.5rem;
    font-family: 'Playfair Display', serif;
}

.account-types {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.account-type {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 8px;
    border: 2px solid transparent;
}

.account-type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.account-type h4 {
    color: var(--dark-navy);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.account-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.account-badge.default {
    background: var(--primary-yellow);
    color: var(--dark-navy);
}

.account-badge.contractor {
    background: #10B981;
    color: white;
}

.account-badge.builder {
    background: #3B82F6;
    color: white;
}

.account-badge.admin {
    background: linear-gradient(135deg, #EF4444, #F87171);
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid #DC2626;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.account-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-gray);
    margin-top: 1rem;
    padding: 1rem;
    background: var(--white);
    border-radius: 8px;
}

.account-note i {
    color: var(--primary-yellow);
    margin-top: 0.2rem;
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.checkbox-group input[type="checkbox"] {
    margin-top: 0.2rem;
}

.checkbox-group label {
    flex: 1;
    cursor: pointer;
}

.checkbox-group a {
    color: var(--primary-yellow);
    text-decoration: none;
}

.checkbox-group a:hover {
    text-decoration: underline;
}

/* Account Page Styles */
.account-section {
    padding: 8rem 0 4rem;
    background: var(--light-gray);
    min-height: 100vh;
}

.account-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.account-sidebar {
    background: var(--white);
    border-radius: 16px;
    padding: 2rem;
    height: fit-content;
    box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}

.account-user-info {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-gray);
}

.account-avatar {
    width: 80px;
    height: 80px;
    background: var(--primary-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2rem;
    color: var(--dark-navy);
}

.account-details h3 {
    color: var(--dark-navy);
    margin-bottom: 0.5rem;
}

.account-details p {
    color: var(--text-gray);
    margin-bottom: 1rem;
}

.account-type-badge .badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge.basic {
    background: var(--light-gray);
    color: var(--dark-navy);
}

.badge.contractor {
    background: #10B981;
    color: white;
}

.badge.builder {
    background: #3B82F6;
    color: white;
}

.badge.admin {
    background: linear-gradient(135deg, #EF4444, #F87171);
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid #DC2626;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.account-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.account-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    color: var(--text-gray);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
}

.account-nav-link:hover, .account-nav-link.active {
    background: var(--primary-yellow);
    color: var(--dark-navy);
}

.account-nav-link i {
    width: 16px;
    text-align: center;
}

.account-content {
    background: var(--white);
    border-radius: 16px;
    padding: 3rem;
    box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}

.account-section-content {
    display: none;
}

.account-section-content.active {
    display: block;
}

.section-header {
    margin-bottom: 3rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-gray);
}

.section-header h2 {
    color: var(--dark-navy);
    font-family: 'Playfair Display', serif;
    margin-bottom: 0.5rem;
}

.section-header p {
    color: var(--text-gray);
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-submit-btn {
    background: var(--dark-navy);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
}

.form-submit-btn:hover {
    background: var(--primary-yellow);
    color: var(--dark-navy);
}

/* Account Type Cards */
.current-account-type {
    margin-bottom: 3rem;
}

.account-type-card {
    background: var(--light-gray);
    padding: 2rem;
    border-radius: 12px;
    border: 2px solid transparent;
    margin-bottom: 1rem;
}

.account-type-card.current {
    border-color: var(--primary-yellow);
    background: var(--white);
}

.account-type-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.upgrade-btn {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.upgrade-btn:hover {
    background: var(--dark-navy);
    color: var(--white);
}

.account-benefits h4, .account-benefits h5 {
    color: var(--dark-navy);
    margin: 1rem 0 0.5rem;
}

.account-benefits ul {
    list-style: none;
    padding: 0;
}

.account-benefits li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    color: var(--text-gray);
    font-size: 0.9rem;
}

.account-benefits li i {
    color: var(--primary-yellow);
    width: 14px;
}

.upgrade-options h3 {
    color: var(--dark-navy);
    margin-bottom: 1.5rem;
    font-family: 'Playfair Display', serif;
}

.upgrade-requirements {
    background: var(--light-gray);
    padding: 2rem;
    border-radius: 12px;
}

.upgrade-requirements h3 {
    color: var(--dark-navy);
    margin-bottom: 1.5rem;
    font-family: 'Playfair Display', serif;
}

.requirements-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.requirement-item h4 {
    color: var(--dark-navy);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.requirement-item ul {
    list-style: none;
    padding: 0;
}

.requirement-item li {
    color: var(--text-gray);
    margin-bottom: 0.5rem;
    padding-left: 1rem;
    position: relative;
}

.requirement-item li::before {
    content: '•';
    color: var(--primary-yellow);
    position: absolute;
    left: 0;
}

/* Orders Styles */
.orders-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.order-item {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 2rem;
    align-items: center;
    background: var(--light-gray);
    padding: 1.5rem;
    border-radius: 12px;
}

.order-info h4 {
    color: var(--dark-navy);
    margin-bottom: 0.25rem;
}

.order-info p {
    color: var(--text-gray);
    font-size: 0.9rem;
}

.status {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status.delivered {
    background: #10B981;
    color: white;
}

.status.pending {
    background: #F59E0B;
    color: white;
}

.status.cancelled {
    background: #EF4444;
    color: white;
}

.order-total p {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark-navy);
}

.order-details-btn {
    background: var(--dark-navy);
    color: var(--white);
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.order-details-btn:hover {
    background: var(--primary-yellow);
    color: var(--dark-navy);
}

.empty-orders {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-gray);
}

.empty-orders i {
    font-size: 3rem;
    color: var(--primary-yellow);
    margin-bottom: 1rem;
}

.empty-orders h3 {
    color: var(--dark-navy);
    margin-bottom: 0.5rem;
}

.browse-products-btn {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    margin-top: 1rem;
    transition: all 0.3s ease;
}

.browse-products-btn:hover {
    background: var(--dark-navy);
    color: var(--white);
}

/* Settings Styles */
.settings-group {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-gray);
}

.settings-group:last-child {
    border-bottom: none;
}

.settings-group h3 {
    color: var(--dark-navy);
    margin-bottom: 1.5rem;
    font-family: 'Playfair Display', serif;
}

.preferences-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.preference-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--light-gray);
    border-radius: 8px;
}

.preference-info h4 {
    color: var(--dark-navy);
    margin-bottom: 0.25rem;
}

.preference-info p {
    color: var(--text-gray);
    font-size: 0.9rem;
}

/* Toggle Switch */
.toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--primary-yellow);
}

input:checked + .slider:before {
    transform: translateX(26px);
}

/* Danger Zone */
.danger-zone {
    border: 2px solid #EF4444;
    border-radius: 12px;
    padding: 2rem;
    background: #FEF2F2;
}

.danger-zone h3 {
    color: #EF4444;
}

.danger-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.danger-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.danger-info h4 {
    color: #EF4444;
    margin-bottom: 0.25rem;
}

.danger-info p {
    color: #7F1D1D;
    font-size: 0.9rem;
}

.danger-btn {
    background: #EF4444;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.danger-btn:hover {
    background: #DC2626;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .auth-form .form-row {
        grid-template-columns: 1fr;
    }

    .account-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .account-sidebar {
        order: 2;
    }

    .account-content {
        order: 1;
        padding: 2rem;
    }

    .account-user-info {
        display: flex;
        align-items: center;
        gap: 1rem;
        text-align: left;
    }

    .account-avatar {
        margin: 0;
    }

    .account-nav ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .account-type-cards {
        grid-template-columns: 1fr;
    }

    .requirements-info {
        grid-template-columns: 1fr;
    }

    .order-item {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
    }

    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .account-types {
        gap: 1rem;
    }
}

/* Pricing Display Styles */
.login-required-price {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-gray);
    font-size: 0.9rem;
}

.login-required-price i {
    color: var(--primary-yellow);
}

.login-required-price a {
    color: var(--primary-yellow);
    text-decoration: none;
    font-weight: 600;
}

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

.tiered-pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.original-price {
    font-size: 0.9rem;
    color: var(--text-gray);
    text-decoration: line-through;
    opacity: 0.7;
}

.discounted-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-navy);
}

.discount-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.discount-badge.contractor {
    background: #10B981;
    color: white;
}

.discount-badge.builder {
    background: #3B82F6;
    color: white;
}

.login-required-message {
    text-align: center;
    padding: 2rem;
    background: var(--light-gray);
    border-radius: 8px;
    color: var(--text-gray);
}

.login-required-message i {
    font-size: 2rem;
    color: var(--primary-yellow);
    margin-bottom: 1rem;
}

.login-required-message p {
    margin-bottom: 1rem;
}

.login-required-message a {
    color: var(--primary-yellow);
    text-decoration: none;
    font-weight: 600;
}

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

/* Login Required Overlay */
.login-required-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.login-required-content {
    background: var(--white);
    padding: 3rem;
    border-radius: 16px;
    text-align: center;
    max-width: 400px;
    margin: 2rem;
}

.login-required-content i {
    font-size: 3rem;
    color: var(--primary-yellow);
    margin-bottom: 1rem;
}

.login-required-content h3 {
    color: var(--dark-navy);
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
}

.login-required-content p {
    color: var(--text-gray);
    margin-bottom: 2rem;
}

.login-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.login-action-btn, .register-action-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.login-action-btn {
    background: var(--dark-navy);
    color: var(--white);
}

.login-action-btn:hover {
    background: var(--primary-yellow);
    color: var(--dark-navy);
}

.register-action-btn {
    background: var(--primary-yellow);
    color: var(--dark-navy);
}

.register-action-btn:hover {
    background: var(--dark-navy);
    color: var(--white);
}

/* Customer Management Styles */
.customers-header {
    margin-bottom: 2rem;
    margin-top: 0; /* Ensure no negative margin */
}

.customers-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Fix white text issue in customer stats */
.customers-stats .stat-card .stat-number {
    color: var(--dark-navy);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.customers-stats .stat-card .stat-label {
    color: var(--text-gray);
    font-size: 0.9rem;
    opacity: 1;
}

.customers-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.search-controls {
    display: flex;
    gap: 1rem;
    flex: 1;
}

.search-controls input, .search-controls select {
    padding: 0.5rem;
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    font-size: 0.9rem;
}

.search-controls input {
    min-width: 250px;
}

.action-controls {
    display: flex;
    gap: 1rem;
}

.export-btn {
    background: #10B981;
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.export-btn:hover {
    background: #059669;
    transform: translateY(-1px);
}

.customers-table-container {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}

.customers-table {
    width: 100%;
    border-collapse: collapse;
}

.customers-table th,
.customers-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-gray);
}

.customers-table th {
    background: var(--light-gray);
    font-weight: 600;
    color: var(--dark-navy);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.customers-table tr:hover {
    background: #F8F9FA;
}

.customer-info {
    display: block;
    padding: 0;
}

.customer-details {
    display: flex;
    flex-direction: column;
}

.customer-name {
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 0.25rem;
}

.customer-email {
    font-size: 0.9rem;
    color: var(--text-gray);
    margin-bottom: 0.25rem;
}

.customer-phone {
    font-size: 0.8rem;
    color: var(--text-gray);
}

.account-type-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.account-type-badge.basic {
    background: var(--light-gray);
    color: var(--dark-navy);
}

.account-type-badge.contractor {
    background: #10B981;
    color: white;
}

.account-type-badge.admin {
    background: #dc2626;
    color: white;
}

.customer-company {
    color: var(--text-gray);
    font-style: italic;
}

.registration-date {
    color: var(--text-gray);
    font-size: 0.9rem;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.active {
    background: #10B981;
    color: white;
}

.status-badge.pending {
    background: #F59E0B;
    color: white;
}

.status-badge.approved {
    background: #10B981;
    color: white;
}

.status-badge.rejected {
    background: #EF4444;
    color: white;
}

.customer-actions {
    display: flex;
    gap: 0.5rem;
}

.action-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.view-btn {
    background: #3B82F6;
    color: white;
}

.view-btn:hover {
    background: #2563EB;
}

.approve-btn {
    background: #10B981;
    color: white;
}

.approve-btn:hover {
    background: #059669;
}

.reject-btn {
    background: #EF4444;
    color: white;
}

.reject-btn:hover {
    background: #DC2626;
}

.edit-btn {
    background: #F59E0B;
    color: white;
}

.edit-btn:hover {
    background: #D97706;
}

.delete-btn {
    background: #EF4444;
    color: white;
}

.delete-btn:hover {
    background: #DC2626;
}

.no-customers {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-state {
    color: var(--text-gray);
}

.empty-state i {
    font-size: 3rem;
    color: var(--primary-yellow);
    margin-bottom: 1rem;
}

.empty-state h3 {
    color: var(--dark-navy);
    margin-bottom: 0.5rem;
}

/* Customer Details Modal */
.customer-details-modal {
    /* Remove conflicting styles - they're now on modal-content */
}

/* Fix customer details modal positioning */
.modal.customer-details-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 99999 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    transform: none !important;
}

.modal.customer-details-modal .modal-content {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 900px !important;
    width: 90% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    background: var(--white) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    z-index: 100000 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure modal has proper background overlay in admin */
.admin-body .modal {
    background-color: rgba(0, 0, 0, 0.8) !important;
    z-index: 9999 !important;
}

.customer-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.detail-section {
    background: var(--light-gray);
    padding: 1.5rem;
    border-radius: 8px;
}

.detail-section h4 {
    color: var(--dark-navy);
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-gray);
}

.detail-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.detail-label {
    font-weight: 600;
    color: var(--dark-navy);
}

.detail-value {
    color: var(--text-gray);
    text-align: right;
}

.customer-actions-footer {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 2rem;
    border-top: 1px solid var(--border-gray);
}

.customer-actions-footer .action-btn {
    width: auto;
    height: auto;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .customers-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .search-controls {
        flex-direction: column;
    }

    .search-controls input {
        min-width: 0;
    }

    .action-controls {
        justify-content: center;
    }

    .customers-table-container {
        overflow-x: auto;
    }

    .customers-table {
        min-width: 800px;
    }

    .customer-details-grid {
        grid-template-columns: 1fr;
    }

    .customer-actions-footer {
        flex-direction: column;
    }

    .customer-actions {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Admin Panel 3-Tier Pricing Styles */
.pricing-detail {
    flex-direction: column;
    align-items: stretch !important;
}

.pricing-inputs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1rem 0;
}

.price-tier {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.price-tier label {
    font-weight: 600;
    color: var(--dark-navy);
    font-size: 0.9rem;
}

.price-input {
    padding: 0.5rem;
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    font-size: 0.9rem;
}

.save-pricing-btn {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.save-pricing-btn:hover {
    background: var(--dark-navy);
    color: var(--white);
}

.option-pricing {
    min-width: 250px;
}

.pricing-tiers {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tier-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.tier-label {
    font-weight: 500;
    color: var(--text-gray);
}

.tier-value {
    font-weight: 600;
    color: var(--dark-navy);
}

.pricing-group .pricing-inputs {
    background: var(--light-gray);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 0.5rem;
}

/* Mobile responsive for pricing */
@media (max-width: 768px) {
    .pricing-inputs {
        grid-template-columns: 1fr;
    }
    
    .tier-price {
        justify-content: space-between;
        padding: 0.25rem 0;
    }
}

/* Custom Modal System */
.custom-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity 0.3s ease;
}

.custom-modal-overlay.show {
    opacity: 1;
}

.custom-modal {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    position: relative !important;
    z-index: 10001 !important;
}

.custom-modal-overlay.show .custom-modal {
    transform: scale(1);
}

.custom-modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-gray);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom-modal-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dark-navy);
    margin: 0;
}

.custom-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-gray);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.3s ease;
}

.custom-modal-close:hover {
    color: var(--dark-navy);
}

.custom-modal-body {
    padding: 1.5rem;
}

.custom-modal-message {
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.custom-modal-input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-gray);
    border-radius: 8px;
    font-size: 1rem;
    margin-bottom: 1rem;
    transition: border-color 0.3s ease;
}

.custom-modal-input:focus {
    outline: none;
    border-color: var(--primary-yellow);
}

.custom-modal-actions,
.modal-footer {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding: 1.5rem;
    border-top: 1px solid var(--border-gray);
}

.custom-modal-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.custom-modal-btn.primary {
    background: var(--primary-yellow);
    color: var(--dark-navy);
}

.custom-modal-btn.primary:hover {
    background: var(--dark-navy);
    color: var(--white);
}

.custom-modal-btn.secondary {
    background: var(--light-gray);
    color: var(--text-gray);
}

.custom-modal-btn.secondary:hover {
    background: var(--text-gray);
    color: var(--white);
}

.custom-modal-btn.danger {
    background: #EF4444;
    color: white;
}

.custom-modal-btn.danger:hover {
    background: #DC2626;
}

.custom-modal-btn.success {
    background: #10B981;
    color: white;
}

.custom-modal-btn.success:hover {
    background: #059669;
}

/* Ensure custom modals appear on top of regular modals */
#add-category-modal ~ .custom-modal-overlay {
    z-index: 1000001 !important;
}

/* Alert Modal Specific */
.alert-modal .custom-modal-body {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.alert-icon {
    font-size: 2rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.alert-icon.info {
    color: #3B82F6;
}

.alert-icon.success {
    color: #10B981;
}

.alert-icon.warning {
    color: #F59E0B;
}

.alert-icon.error {
    color: #EF4444;
}

/* Rejection Notification */
.rejection-notification {
    background: linear-gradient(135deg, #FEF3F2 0%, #FEE2E2 100%);
    border: 2px solid #FCA5A5;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    position: relative;
}

.rejection-notification-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.rejection-notification-icon {
    font-size: 1.5rem;
    color: #EF4444;
}

.rejection-notification-title {
    font-weight: 600;
    color: #7F1D1D;
    font-size: 1.1rem;
}

.rejection-notification-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #7F1D1D;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.3s ease;
}

.rejection-notification-close:hover {
    color: #991B1B;
}

.rejection-notification-message {
    color: #7F1D1D;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.rejection-notification-reason {
    background: var(--white);
    border: 1px solid #FCA5A5;
    border-radius: 8px;
    padding: 1rem;
    color: #7F1D1D;
    font-style: italic;
}

.rejection-notification-actions {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
}

.rejection-notification-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.rejection-notification-btn.primary {
    background: #EF4444;
    color: white;
}

.rejection-notification-btn.primary:hover {
    background: #DC2626;
}

.rejection-notification-btn.secondary {
    background: var(--white);
    color: #7F1D1D;
    border: 1px solid #FCA5A5;
}

.rejection-notification-btn.secondary:hover {
    background: #FEF3F2;
}

/* Category Management Styles */
.add-category-section {
    background: var(--light-gray);
    border: 2px dashed var(--border-gray);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    margin-top: 2rem;
    transition: all 0.3s ease;
}

.add-category-section:hover {
    border-color: var(--primary-yellow);
    background: rgba(247, 213, 66, 0.1);
}

.add-category-btn {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    border: none;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.add-category-btn:hover {
    background: var(--dark-navy);
    color: var(--primary-yellow);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(45, 49, 66, 0.3);
}

.add-category-btn i {
    font-size: 1.1rem;
}

.delete-category-btn {
    background: #EF4444;
    color: var(--white);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 10px;
}

.delete-category-btn:hover {
    background: #DC2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.delete-category-btn i {
    font-size: 0.875rem;
}

/* Category Modal Specific Styles */
/* Add Category Modal - Special handling to preserve form values */
#add-category-modal {
    z-index: 999999 !important;
}

#add-category-modal.modal[style*="display: block"],
#add-category-modal.modal[style*="display: flex"] {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
}

#add-category-modal .option-modal-content {
    position: relative !important;
    margin: auto !important;
    background: white !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
}

#add-category-modal .form-group small {
    display: block;
    margin-top: 0.5rem;
    color: var(--text-gray);
    font-style: italic;
    line-height: 1.4;
}

#add-category-modal .form-group input:not([type="checkbox"]) {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-gray);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

#add-category-modal .form-group input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
    transform: scale(1.2);
    cursor: pointer;
}

#add-category-modal .form-group input:not([type="checkbox"]):focus {
    outline: none;
    border-color: var(--primary-yellow);
    box-shadow: 0 0 0 3px rgba(247, 213, 66, 0.1);
}

/* Enhanced admin config category header */
.admin-config-category h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1rem 1rem 1.5rem;
    background: var(--light-gray);
    border-radius: 8px;
    border-left: 4px solid var(--primary-yellow);
}

.admin-config-category h4 > span:first-child {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dark-navy);
    flex: 1;
}

.admin-config-category h4 .button-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Responsive adjustments for category management */
@media (max-width: 768px) {
    .add-category-section {
        padding: 1.5rem;
        margin-top: 1.5rem;
    }
    
    .add-category-btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }
    
    .delete-category-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        margin-left: 0;
        margin-top: 0.5rem;
    }
    
    .admin-config-category h4 {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .admin-config-category h4 .button-group {
        width: 100%;
        justify-content: space-between;
    }
}

/* Scroll Triggered Animations */
.fade-in-section {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Enhanced Page Transitions */
.page-transition {
    opacity: 0;
    animation: pageEnter 0.6s ease-out forwards;
}

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

/* Loading States */
.loading-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* Enhanced Interactive Elements */
.interactive-element {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.interactive-element:hover {
    transform: translateY(-2px);
}

.interactive-element:active {
    transform: translateY(0) scale(0.98);
}

/* Staggered Animation Classes */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* Mobile Optimized Animations */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 768px) {
    .header-content {
        gap: 1rem;
        padding: 0.4rem 0;
    }
    
    .search-box input {
        width: 180px;
    }
    
    .search-box input:focus {
        width: 200px;
    }
    
    .main-nav ul {
        gap: 1.5rem;
    }
    
    .hero-text h2 {
        font-size: 2.5rem;
    }
    
    .categories-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .category-card-link:hover .category-card {
        transform: translateY(-4px) scale(1.01);
    }
    
    .product-card:hover {
        transform: translateY(-5px) scale(1.02);
    }
}

/* Login link styling - make all login links yellow to match website theme */
.login-required-price a,
.price-item.login-required a,
.hardware-product-price a {
    color: var(--primary-yellow) !important;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.login-required-price a:hover,
.price-item.login-required a:hover,
.hardware-product-price a:hover {
    color: var(--accent-gold) !important;
    text-decoration: underline;
}

/* Ensure icon is yellow too */
.login-required-price i,
.price-item.login-required i,
.hardware-product-price i {
    color: var(--primary-yellow);
    margin-right: 8px;
}

/* Orders Section Styles */
.orders-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card.order-stat {
    background: var(--white);
    padding: 1.5rem 1.5rem 1.5rem 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
    border-left: 4px solid var(--primary-yellow);
}

.stat-content.order-stat h3 {
    font-size: 2rem;
    color: var(--dark-navy);
    margin-bottom: 0.5rem;
}

.stat-content.order-stat p {
    color: var(--text-gray);
    font-size: 0.9rem;
}

.orders-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.orders-controls .search-controls,
.inventory-controls .search-controls {
    display: flex;
    gap: 1rem;
    flex: 1;
}

.orders-controls .search-controls input,
.inventory-controls .search-controls input,
.orders-controls .search-controls select,
.inventory-controls .search-controls select {
    padding: 0.5rem;
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    font-size: 0.9rem;
}

.orders-controls .search-controls input,
.inventory-controls .search-controls input {
    min-width: 250px;
}

.orders-controls .filter-controls,
.inventory-controls .filter-controls {
    display: flex;
    gap: 1rem;
}

.refresh-orders-btn {
    background: #3B82F6;
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.refresh-orders-btn:hover {
    background: #2563eb;
}

.orders-controls .add-product-btn,
.inventory-controls .add-product-btn {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.orders-controls .add-product-btn:hover,
.inventory-controls .add-product-btn:hover {
    background: #e6c445;
}

/* Status filter styling handled by general .search-controls select rules */

/* Duplicate refresh button styling removed - using the customer-style version above */

.orders-table-container {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
    overflow-x: auto;
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.orders-table th,
.orders-table td {
    padding: 1.25rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-gray);
    vertical-align: middle;
}

.orders-table th {
    background: #F8F9FA;
    color: var(--dark-navy);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
}

.orders-table tbody tr {
    transition: background-color 0.2s ease;
}

.orders-table tbody tr:hover {
    background: rgba(247, 213, 66, 0.08);
}

.customer-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.customer-name {
    font-weight: 600;
    color: var(--dark-navy);
}

.customer-email {
    font-size: 0.875rem;
    color: var(--text-gray);
}

.order-total {
    font-weight: 700;
    color: var(--dark-navy);
    font-size: 1rem;
}

.order-status-select {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border-gray);
    font-size: 0.875rem;
    font-weight: 500;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

.order-status-select:focus {
    outline: none;
    border-color: var(--primary-yellow);
    box-shadow: 0 0 0 3px rgba(247, 213, 66, 0.1);
}

.payment-status {
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: capitalize;
    display: inline-block;
}

.payment-status.paid {
    background: #D1FAE5;
    color: #065F46;
}

.payment-status.pending {
    background: #FEF3C7;
    color: #92400E;
}

.payment-status.failed {
    background: #FEE2E2;
    color: #991B1B;
}

.order-details-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.order-item-detail {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-gray);
}

/* Shipping Settings Styles */
.shipping-settings-content {
    max-width: 1200px;
    margin: 0 auto;
}

.shipping-form-container {
    background: var(--white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
    margin-bottom: 2rem;
}

.shipping-form-container h3 {
    color: var(--dark-navy);
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
    border-bottom: 2px solid var(--primary-yellow);
    padding-bottom: 0.5rem;
}

.shipping-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.save-shipping-btn {
    background: var(--dark-navy);
    color: var(--white);
    border: none;
    padding: 1rem 2rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.save-shipping-btn:hover {
    background: var(--primary-yellow);
    color: var(--dark-navy);
}

.promo-codes-section {
    background: var(--white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}

.promo-codes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.add-promo-btn {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-promo-btn:hover {
    background: var(--dark-navy);
    color: var(--white);
}

.promo-codes-list {
    display: grid;
    gap: 1rem;
}

.promo-code-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--light-gray);
    border-radius: 8px;
}

.promo-info h4 {
    color: var(--dark-navy);
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.promo-info p {
    color: var(--text-gray);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.promo-value {
    font-weight: 600;
    color: var(--primary-yellow);
    font-size: 1.1rem;
}

#orders-empty-state,
#promo-empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-gray);
}

#orders-empty-state i,
#promo-empty-state i {
    font-size: 3rem;
    color: var(--border-gray);
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .orders-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .orders-stats {
        grid-template-columns: 1fr;
    }
    
    .shipping-form-grid {
        grid-template-columns: 1fr;
    }
    
    .promo-codes-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .promo-code-item {
        flex-direction: column;
        text-align: center;
    }
}

/* Cart Page Enhancements */
.cart-table-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 0.5fr;
    padding: 1.25rem 1rem;
    border-bottom: 2px solid var(--border-gray);
    font-weight: 600;
    color: var(--dark-navy);
    background: var(--light-gray);
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.cart-table-header span {
    text-align: center;
}

.cart-table-header span:first-child {
    text-align: left;
}

.cart-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 3rem;
}

.cart-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.shipping-section,
.cart-summary {
    background: var(--white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
    display: block;
}

.shipping-section h3,
.cart-summary h3 {
    margin-bottom: 1.5rem;
    color: var(--dark-navy);
    font-size: 1.3rem;
}

.shipping-form .form-group {
    margin-bottom: 1rem;
}

.shipping-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--dark-navy);
}

#shipping-address {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-gray);
    border-radius: 8px;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

#shipping-address:focus {
    border-color: var(--primary-yellow);
    outline: none;
}

.locate-btn {
    margin-top: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    background: var(--primary-yellow);
    color: var(--dark-navy);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.locate-btn:hover {
    background: var(--dark-navy);
    color: var(--primary-yellow);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.locate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.shipping-options {
    margin-top: 1.5rem;
}

.shipping-options h4 {
    margin-bottom: 1rem;
    color: var(--dark-navy);
}

.shipping-option {
    margin-bottom: 1rem;
}

.shipping-option label {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 2px solid var(--border-gray);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.shipping-option input[type="radio"]:checked + label {
    border-color: var(--primary-yellow);
    background: rgba(247, 213, 66, 0.1);
}

.shipping-option label:hover {
    border-color: var(--primary-yellow);
}

.shipping-option input[type="radio"] {
    margin-right: 1rem;
}

.option-name {
    flex: 1;
    font-weight: 600;
    color: var(--dark-navy);
}

.option-time {
    color: var(--text-gray);
    font-size: 0.9rem;
    margin: 0 1rem;
}

.option-price {
    font-weight: 700;
    color: var(--primary-yellow);
}

.cart-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border-gray);
}

.clear-cart-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.clear-cart-btn:hover {
    background: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.continue-shopping {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-yellow);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.continue-shopping:hover {
    transform: translateX(-5px);
}

.promo-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-gray);
}

.promo-input {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

#promo-code {
    flex: 1;
    padding: 0.75rem;
    border: 2px solid var(--border-gray);
    border-radius: 8px;
    font-family: inherit;
    text-transform: uppercase;
    transition: border-color 0.3s ease;
}

#promo-code:focus {
    border-color: var(--primary-yellow);
    outline: none;
}

#promo-code:disabled {
    background: var(--light-gray);
    cursor: not-allowed;
}

#apply-promo {
    padding: 0.75rem 1.5rem;
    background: var(--primary-yellow);
    color: var(--dark-navy);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

#apply-promo:hover:not(:disabled) {
    background: var(--dark-navy);
    color: var(--primary-yellow);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#apply-promo:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.promo-discount {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    color: #28a745;
    font-weight: 600;
}

#cart-list .cart-item {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr 1fr 0.5fr;
    align-items: center;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--border-gray);
    transition: all 0.3s ease;
    background: white;
    min-height: 120px;
}

#cart-list .cart-item:hover {
    background-color: rgba(247, 213, 66, 0.05);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#cart-list {
    background: white;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.item-product {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.item-product img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-gray);
    flex-shrink: 0;
}

.item-details h4 {
    margin-bottom: 0.5rem;
    color: var(--dark-navy);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
}

.item-details p {
    color: var(--text-gray);
    font-size: 0.85rem;
    margin: 0.25rem 0;
    line-height: 1.4;
}

.item-details p:first-of-type {
    font-weight: 500;
    color: var(--dark-navy);
    opacity: 0.7;
}

.config-details {
    font-size: 0.85rem;
    color: var(--text-gray);
    font-style: italic;
}

.item-price {
    font-weight: 600;
    color: var(--dark-navy);
    font-size: 1.1rem;
    text-align: center;
}

.item-total {
    font-weight: 700;
    color: var(--dark-navy);
    font-size: 1.1rem;
    text-align: center;
}

.item-action {
    display: flex;
    justify-content: center;
    align-items: center;
}

.remove-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.remove-btn:hover {
    background: #b91c1c;
    transform: scale(1.1);
}

.item-quantity {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.qty-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-yellow);
    color: var(--dark-navy);
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.qty-btn:hover {
    background: var(--dark-navy);
    color: var(--primary-yellow);
    transform: scale(1.1);
}

.qty {
    font-weight: 600;
    min-width: 40px;
    text-align: center;
    font-size: 1rem;
    color: var(--dark-navy);
}

.payment-methods {
    margin-top: 2rem;
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-gray);
}

.payment-methods p {
    color: var(--text-gray);
    margin-bottom: 1rem;
}

.payment-icons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.payment-icons i {
    font-size: 2rem;
    color: var(--text-gray);
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.payment-icons i:hover {
    opacity: 1;
}

/* Recommended Products Section Fix */
.recommended-products {
    padding: 4rem 0;
    background: var(--light-gray);
}

.recommended-products h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: var(--dark-navy);
}

.recommended-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.recommended-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.recommended-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.recommended-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.recommended-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.recommended-card:hover .recommended-image img {
    transform: scale(1.05);
}

.recommended-content {
    padding: 1.5rem;
}

.recommended-content h4 {
    margin-bottom: 0.5rem;
    color: var(--dark-navy);
    font-size: 1.2rem;
}

.recommended-content .price {
    color: var(--primary-yellow);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.add-recommended {
    width: 100%;
    padding: 0.75rem;
    background: var(--primary-yellow);
    color: var(--dark-navy);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-recommended:hover {
    background: var(--dark-navy);
    color: var(--primary-yellow);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Responsive Cart Styles */
@media (max-width: 968px) {
    .cart-content-wrapper {
        grid-template-columns: 1fr;
    }
    
    .cart-sidebar {
        position: relative;
        top: 0;
    }
}

@media (max-width: 768px) {
    .cart-table-header {
        display: none;
    }
    
    #cart-list .cart-item {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.5rem;
        border: 1px solid var(--border-gray);
        border-radius: 8px;
        margin-bottom: 1rem;
        min-height: auto;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    
    .item-product {
        flex-direction: column;
        text-align: center;
    }
    
    .item-quantity {
        padding: 0.5rem 0;
    }
    
    .cart-actions {
        flex-direction: column;
        gap: 1rem;
    }
    
    .clear-cart-btn,
    .continue-shopping {
        width: 100%;
        justify-content: center;
    }
    
    .recommended-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== GLOBAL POPUP & NOTIFICATION POSITIONING FIXES ===== */
/* Ensuring all modals, popups, and notifications use viewport-relative positioning */

/* Fix any form success/error messages to appear at top of viewport */
.form-success-message,
.form-error-message {
    position: fixed !important;
    top: 100px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10000 !important;
    max-width: 500px !important;
    width: 90% !important;
    animation: slideDown 0.3s ease !important;
}

/* Ensure all message notifications appear at top right of viewport */
.message,
.notification,
.toast,
.alert-notification,
[data-snb-notification] {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 999999 !important;
    transform: none !important;
    margin: 0 !important;
}

/* Fix rejection notifications to appear at top of viewport */
.rejection-notification {
    position: fixed !important;
    top: 100px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    max-width: 600px !important;
    width: 90% !important;
}

/* Ensure all modals are properly centered in viewport */
.modal,
.custom-modal-overlay,
.option-modal,
.door-opening-modal,
.category-modal,
.customer-details-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10000 !important;
}

/* Ensure modal content is centered */
.modal-content,
.custom-modal,
.option-modal-content,
.door-opening-modal-content,
.category-modal-content {
    position: relative !important;
    margin: auto !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
}

/* Fix any absolute positioned alerts to use fixed */
.alert,
.alert-box,
.notification-box,
.message-container {
    position: fixed !important;
    z-index: 10000 !important;
}

/* Animation for notifications sliding down from top */
@keyframes slideDown {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* Ensure dropdowns stay relative to viewport when near edges */
.user-dropdown,
.dropdown-menu {
    position: absolute;
    z-index: 9999;
}

/* Special handling for admin panel modals */
.admin-body .modal,
.admin-body .custom-modal-overlay {
    z-index: 10001 !important; /* Higher than admin sidebar */
}

/* Mobile responsive adjustments for fixed elements */
@media (max-width: 768px) {
    .form-success-message,
    .form-error-message,
    .rejection-notification {
        top: 80px !important;
        width: 95% !important;
    }
    
    .message,
    .notification,
    .toast {
        top: 80px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
    }
    
    .modal-content,
    .custom-modal,
    .option-modal-content,
    .door-opening-modal-content {
        width: 95% !important;
        margin: 0 !important;
    }
}



/* Cart message notifications */
.cart-message {
    position: fixed !important;
    top: 100px !important;
    right: 20px !important;
    z-index: 10000 !important;
}

/* Login required overlay fix */
.login-required-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9998 !important;
}

/* ===== EMERGENCY CART NOTIFICATION FIX ===== */
/* Maximum specificity to override any conflicting styles */
body .cart-message,
body div.cart-message,
.cart-message {
    position: fixed !important;
    top: 100px !important;
    right: 20px !important;
    z-index: 999999 !important;
    /* Ensure it's not being pushed by any transforms or margins */
    margin: 0 !important;
    transform: none !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Override any parent container styles that might affect positioning */
body > .cart-message {
    position: fixed !important;
}

/* Critical fix for fixed positioning to work properly */
html, body {
    transform: none !important;
    /* DO NOT use position: relative as it breaks fixed positioning */
}

/* Allow vertical scrolling but ensure fixed elements work */
html {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* Apply overflow-x hidden to a wrapper to prevent horizontal scroll without breaking fixed positioning */
.overflow-wrapper,
main,
.main-content {
    overflow-x: hidden;
    width: 100%;
}

/* Debug helper - this will make the notification have a red border if it's working */
.cart-message {
    /* border: 3px solid red !important; */
}

/* ===== POPUP OPTIONS MODAL STYLES ===== */
.popup-options-modal .modal-content {
    max-width: 600px;
    width: 90%;
}

.popup-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    padding: 1rem 0;
}

.popup-option {
    background: var(--white);
    border: 2px solid var(--light-gray);
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.popup-option:hover {
    border-color: var(--primary-yellow);
    box-shadow: 0 4px 12px rgba(247, 213, 66, 0.2);
    transform: translateY(-2px);
}

.popup-option h4 {
    margin: 0 0 0.5rem 0;
    color: var(--dark-navy);
    font-size: 1.1rem;
}

.popup-option p {
    margin: 0;
    color: var(--text-gray);
    font-size: 0.9rem;
}

/* Config option with popup type */
.config-option[data-type="popup"] {
    position: relative;
}

.config-option[data-type="popup"] i {
    margin-left: 0.5rem;
    font-size: 0.9em;
    opacity: 0.7;
}

/* Sub-options in Admin Panel */
.suboptions-section {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--light-gray);
    border-radius: 8px;
}

.suboptions-section h4 {
    margin: 0 0 1rem 0;
    color: var(--dark-navy);
}

.sub-option-item {
    background: var(--white);
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.sub-option-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.sub-option-header h5 {
    margin: 0;
    color: var(--dark-navy);
    font-size: 1rem;
}

.remove-suboption-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

.remove-suboption-btn:hover {
    background: #c82333;
}

.sub-option-fields {
    display: grid;
    gap: 0.75rem;
}

.sub-option-fields input,
.sub-option-fields textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
}

.sub-option-fields textarea {
    resize: vertical;
    min-height: 60px;
}

.suboption-pricing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.add-suboption-btn {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.add-suboption-btn:hover {
    background: #e6c453;
}

/* ===== REMOVED OLD MODAL RULES - SEE NEW AGGRESSIVE FIX ABOVE ===== */

/* Prevent body scrolling when modal is open */
body.modal-open {
    overflow: hidden !important;
}

/* Fix for admin page modals specifically */
.admin-body .modal {
    position: fixed !important;
    inset: 0 !important;
}

/* REMOVED - See SIMPLE MODAL FIX section at end of file */

/* Ensure Clear Cart modal from cart page is centered */
.clear-cart-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: none;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10000 !important;
}

/* Style for sub-option images in popup */
.popup-option-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* Sub-option image field styling */
.sub-option-image-field {
    margin: 10px 0;
}

.sub-option-image-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
}

.sub-option-image-field input[type="file"] {
    width: 100%;
    padding: 5px;
    border: 1px solid var(--border-gray);
    border-radius: 4px;
}

.sub-option-image-field small {
    display: block;
    color: var(--text-gray);
    font-size: 0.85em;
    margin-top: 5px;
}

.suboption-preview {
    display: block;
    margin-top: 10px;
    border-radius: 4px;
    border: 1px solid var(--border-gray);
}

/* ===== REMOVED OLD POSITIONING RULES - SEE AGGRESSIVE MODAL FIX ===== */

/* ===== FIX ADMIN PAGE LAYOUT ISSUES ===== */
/* Remove horizontal scroll and fix vertical scroll */
html.admin-html {
    overflow-x: hidden !important; /* Only prevent horizontal scroll */
    overflow-y: auto !important; /* Allow vertical scroll when needed */
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
}

body.admin-body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    min-height: 100vh !important;
    background-color: #F8F9FA !important; /* Match admin background color */
}

/* Ensure admin main content doesn't overflow */
.admin-main {
    overflow-x: hidden !important;
    max-width: calc(100vw - 250px) !important;
    box-sizing: border-box !important;
    padding-bottom: 2rem !important; /* Add bottom padding for content */
}

/* Fix any wide tables or content */
.admin-main table {
    max-width: 100% !important;
    table-layout: fixed !important;
}

.admin-main .admin-section-header {
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

/* Ensure all admin sections don't overflow */
.admin-section {
    overflow-x: hidden !important;
    max-width: 100% !important;
    padding-top: 3.5rem !important; /* Increased padding to prevent content being cut off by header */
}



/* Ensure first elements in admin sections have proper spacing */
.admin-section > *:first-child {
    margin-top: 0 !important;
}

.admin-section .customers-header,
.admin-section .dashboard-stats,
.admin-section .orders-stats {
    padding-top: 0 !important; /* Remove additional padding since parent has enough */
}



/* Fix modal buttons in header that might cause overflow */
.admin-section-header > div {
    flex-wrap: wrap !important;
    max-width: 100% !important;
}

/* Remove any white box at top */
body.admin-body::before,
html.admin-html::before,
.admin-header::before {
    display: none !important;
}

/* Ensure no elements push outside viewport */
.admin-main * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Specific fix for product tabs */
.product-tabs {
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Fix for option grids */
.option-grid {
    max-width: 100% !important;
}

/* Fix for long text in tables */
.admin-option-item,
.customers-table td,
.orders-table td {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* Responsive adjustments for admin */
@media (max-width: 1200px) {
    .admin-main {
        max-width: calc(100vw - 250px) !important;
        padding: 1rem !important;
    }
}

@media (max-width: 768px) {
    .admin-main {
        max-width: 100vw !important;
        padding: 1rem !important;
    }
    
    .admin-section-header > div {
        width: 100% !important;
        justify-content: flex-start !important;
    }
    
    .admin-section-header button {
        margin: 0.5rem 0 !important;
    }
}

/* ===== SIMPLE MODAL FIX - VIEWPORT CENTERING ===== */

/* Admin edit option modal */
#edit-option-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.8) !important;
    z-index: 999999 !important;
    display: none;
}

#edit-option-modal .modal-content {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 600px !important;
    max-width: 90% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    background: white !important;
    border-radius: 12px !important;
    z-index: 1000000 !important;
}

/* Admin add option modal */
#add-option-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.8) !important;
    z-index: 999999 !important;
    display: none;
}

#add-option-modal .modal-content {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 600px !important;
    max-width: 90% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    background: white !important;
    border-radius: 12px !important;
    z-index: 1000000 !important;
}

/* All other modals */
.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.8) !important;
    z-index: 999999 !important;
    display: none;
}

.modal .modal-content,
.modal .option-modal-content,
.modal .popup-options-content {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 90% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    background: white !important;
    border-radius: 12px !important;
    z-index: 1000000 !important;
}

/* Body when modal is open */
body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

/* ABSOLUTE FINAL OVERRIDE - Force ALL elements with modal in ID to be fixed */
[id*="modal"] {
    position: fixed !important;
}

/* Ensure all modal content is also fixed positioned */
[id*="modal"] > div,
[id*="modal"] .modal-content,
[id*="modal"] [class*="modal-content"] {
    position: fixed !important;
}

/* Remove ALL transforms from body and html that break fixed positioning */
html,
body,
.admin-html,
.admin-body {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    will-change: auto !important;
    contain: none !important;
    backdrop-filter: none !important;
}

/* Cart item pricing styles */
.price-unavailable {
    color: #9CA3AF;
    font-style: italic;
    font-size: 0.9rem;
}

/* Promo Code Section */
.promo-code-section {
    margin: 1.5rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--border-gray);
    border-bottom: 1px solid var(--border-gray);
}

.promo-code-input {
    display: flex;
    gap: 0.5rem;
}

#promo-code-input {
    flex: 1;
    padding: 0.75rem;
    border: 2px solid var(--border-gray);
    border-radius: 6px;
    font-size: 1rem;
    text-transform: uppercase;
}

#promo-code-input:focus {
    outline: none;
    border-color: var(--primary-yellow);
}

#promo-code-input:disabled {
    background: var(--light-gray);
    cursor: not-allowed;
}

.apply-promo-btn {
    padding: 0.75rem 1.5rem;
    background: var(--primary-yellow);
    color: var(--dark-navy);
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.apply-promo-btn:hover {
    background: #e6c63d;
    transform: translateY(-2px);
}

.promo-message {
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    display: none;
}

.promo-message.success {
    display: block;
    background: #D1FAE5;
    color: #065F46;
    border: 1px solid #A7F3D0;
}

.promo-message.error {
    display: block;
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

.promo-message.info {
    display: block;
    background: #E0E7FF;
    color: #3730A3;
    border: 1px solid #C7D2FE;
}

.discount-row {
    color: #059669;
    font-weight: 600;
}

.discount-amount {
    color: #059669;
}

/* Admin Promo Code Display */
.promo-code-item {
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    padding: 1.5rem;
    background: var(--white);
    margin-bottom: 1rem;
    transition: box-shadow 0.3s ease;
    position: relative;
}

.promo-code-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.promo-code-item.expired {
    opacity: 0.6;
    background: #F9FAFB;
}

.promo-info h4 {
    font-size: 1.1rem;
    color: var(--dark-navy);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.expired-badge {
    background: #EF4444;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.promo-details {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.promo-details span {
    font-size: 0.875rem;
    color: var(--text-gray);
}

.promo-value {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
}

.promo-minimum {
    color: #F59E0B;
}

.promo-usage {
    color: #3B82F6;
}

.promo-code-item .delete-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* Order Details Modal */
.order-details-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.8) !important;
    z-index: 999999 !important;
    display: none;
}

.order-details-modal .modal-content {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 800px !important;
    max-width: 90% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    background: white !important;
    border-radius: 12px !important;
    z-index: 1000000 !important;
}

.order-details-header {
    padding: 2rem;
    border-bottom: 2px solid var(--border-gray);
    position: relative;
}

.order-details-header h3 {
    font-size: 1.5rem;
    color: var(--dark-navy);
    margin-bottom: 0.5rem;
}

.order-details-header .order-id {
    color: var(--text-gray);
    font-size: 0.875rem;
}

.order-details-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 1.5rem;
    color: var(--text-gray);
    cursor: pointer;
    transition: color 0.3s ease;
    background: none;
    border: none;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.order-details-close:hover {
    color: var(--dark-navy);
    background: var(--light-gray);
}

.order-details-body {
    padding: 2rem;
}

.order-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-gray);
}

.order-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.order-section h4 {
    font-size: 1.1rem;
    color: var(--dark-navy);
    margin-bottom: 1rem;
    font-weight: 600;
}

.order-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.order-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.order-info-label {
    font-size: 0.875rem;
    color: var(--text-gray);
    font-weight: 500;
}

.order-info-value {
    font-size: 1rem;
    color: var(--dark-navy);
    font-weight: 500;
}

.order-items-table {
    width: 100%;
    margin-top: 1rem;
}

.order-items-table thead {
    background: #F8F9FA;
}

.order-items-table th,
.order-items-table td {
    padding: 0.75rem;
    text-align: left;
}

.order-items-table th {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--dark-navy);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.order-items-table tbody tr {
    border-bottom: 1px solid var(--border-gray);
}

.order-items-table tbody tr:last-child {
    border-bottom: none;
}

.order-item-name {
    font-weight: 500;
    color: var(--dark-navy);
}

.order-item-sku {
    font-size: 0.875rem;
    color: var(--text-gray);
}

.order-pricing-summary {
    background: #F8F9FA;
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 1rem;
}

.pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.pricing-row:last-child {
    margin-bottom: 0;
    padding-top: 0.75rem;
    border-top: 2px solid var(--border-gray);
}

.pricing-label {
    font-weight: 500;
    color: var(--text-gray);
}

.pricing-value {
    font-weight: 600;
    color: var(--dark-navy);
}

.pricing-row.total .pricing-label,
.pricing-row.total .pricing-value {
    font-size: 1.1rem;
    color: var(--dark-navy);
}

.order-status-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: capitalize;
}

.order-status-badge.pending {
    background: #FEF3C7;
    color: #92400E;
}

.order-status-badge.processing {
    background: #DBEAFE;
    color: #1E40AF;
}

.order-status-badge.shipped {
    background: #E0E7FF;
    color: #3730A3;
}

.order-status-badge.delivered {
    background: #D1FAE5;
    color: #065F46;
}

.order-status-badge.cancelled {
    background: #FEE2E2;
    color: #991B1B;
}

@media (max-width: 768px) {
    .order-details-modal .modal-content {
        width: 95% !important;
        margin: 1rem;
    }
    
    .order-info-grid {
        grid-template-columns: 1fr;
    }
    
    .order-details-header {
        padding: 1.5rem;
    }
    
    .order-details-body {
        padding: 1.5rem;
    }
    
    .order-items-table {
        font-size: 0.875rem;
    }
    
    .order-items-table th,
    .order-items-table td {
        padding: 0.5rem;
    }
}

/* Mandatory Category Styling */
.mandatory-indicator {
    color: #EF4444;
    font-weight: bold;
    font-size: 1.1em;
    margin-left: 4px;
}

.config-section.mandatory-category {
    border: 2px solid #FEE2E2;
    background: linear-gradient(135deg, #FEF2F2, #FFFFFF);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.config-section.mandatory-category h3 {
    color: #EF4444;
    margin-bottom: 1rem;
}

.config-section.mandatory-category:hover {
    border-color: #EF4444;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1);
}

/* Admin mandatory badge styling */
.mandatory-badge {
    background: #EF4444;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Search Dropdown Styles */
.search-box {
    position: relative;
    transition: all 0.3s ease;
}

.search-box:hover {
    transform: scale(1.02);
}

.search-box input {
    padding: 0.6rem 3rem 0.6rem 1.2rem;
    border: 2px solid var(--border-gray);
    border-radius: 25px;
    width: 220px;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--white);
    font-size: 0.95rem;
}

.search-box input:focus {
    border-color: var(--primary-yellow);
    box-shadow: 0 0 0 3px rgba(247, 213, 66, 0.1);
    width: 280px;
}

.search-box input::placeholder {
    color: var(--text-gray);
    transition: color 0.3s ease;
}

.search-box input:focus::placeholder {
    color: transparent;
}

/* Search icon removed for cleaner interface */

.search-box button {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-yellow);
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--dark-navy);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.search-box button:hover {
    background: var(--dark-navy);
    color: var(--primary-yellow);
    transform: translateY(-50%) scale(1.1);
}

/* Search Dropdown */
.search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(45, 49, 66, 0.15);
    border: 1px solid var(--border-gray);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.search-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-dropdown-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-gray);
    background: var(--light-gray);
    border-radius: 12px 12px 0 0;
}

.search-dropdown-header h4 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-gray);
    font-weight: 500;
}

.search-results-list {
    padding: 0.5rem 0;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid transparent;
}

.search-result-item:hover {
    background: var(--light-gray);
    border-bottom-color: var(--border-gray);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item.sku-result {
    background: linear-gradient(135deg, var(--primary-yellow), #fde047);
    border: 1px solid var(--primary-yellow);
    border-radius: 8px;
    margin: 0.25rem 0.5rem;
}

.search-result-item.sku-result:hover {
    background: linear-gradient(135deg, #fde047, var(--primary-yellow));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(247, 213, 66, 0.3);
}

.search-result-item.sku-result .search-result-title {
    color: var(--dark-navy);
    font-weight: 700;
}

.search-result-item.sku-result .search-result-category {
    color: var(--dark-navy);
    font-weight: 600;
    opacity: 0.8;
}

.search-result-image {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--light-gray);
    border: 1px solid var(--border-gray);
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-weight: 600;
    color: var(--dark-navy);
    margin: 0 0 0.25rem 0;
    font-size: 0.9rem;
    line-height: 1.3;
}

.search-result-category {
    font-size: 0.8rem;
    color: var(--text-gray);
    margin: 0;
}

.search-result-price {
    font-weight: 600;
    color: var(--primary-yellow);
    font-size: 0.9rem;
    white-space: nowrap;
}

.search-no-results {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-gray);
}

.search-no-results i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.search-no-results h4 {
    margin: 0 0 0.5rem 0;
    color: var(--dark-navy);
}

.search-no-results p {
    margin: 0;
    font-size: 0.9rem;
}

.search-loading {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-gray);
}

.search-loading i {
    animation: spin 1s linear infinite;
    margin-right: 0.5rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive search dropdown */
@media (max-width: 768px) {
    .search-dropdown {
        left: -50px;
        right: -50px;
        max-height: 300px;
    }
    
    .search-result-item {
        padding: 1rem;
    }
    
    .search-result-image {
        width: 35px;
        height: 35px;
    }
}

/* ==========================================
   GROUP MANAGEMENT STYLES
   ========================================== */

.groups-overview {
    margin-bottom: 2rem;
}

.groups-stats-compact {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--light-bg);
    border-radius: 8px;
    border: 1px solid var(--border-gray);
}

.groups-stats-compact span {
    color: var(--text-gray);
    font-size: 0.95rem;
}

.groups-stats-compact strong {
    color: var(--dark-navy);
    font-size: 1.1rem;
}

.groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.group-card {
    background: white;
    border: 2px solid var(--border-gray);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.group-card:hover {
    border-color: var(--primary-yellow);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.group-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.group-header h4 {
    margin: 0;
    color: var(--dark-navy);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.default-badge {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

.group-actions {
    display: flex;
    gap: 0.5rem;
}

.group-actions .edit-btn {
    background: var(--primary-yellow);
    border: none;
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--dark-navy);
}

.group-actions .edit-btn:hover {
    background: #e6c445;
    transform: scale(1.1);
}

.group-description {
    color: var(--text-gray);
    margin-bottom: 1rem;
    line-height: 1.4;
    min-height: 1.4em;
}

.group-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.stat-item {
    text-align: center;
    padding: 0.75rem;
    background: var(--light-bg);
    border-radius: 8px;
}

.stat-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-gray);
    margin-bottom: 0.25rem;
}

.stat-value {
    display: block;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--dark-navy);
}

.pricing-preview {
    text-align: center;
    padding: 0.75rem;
    background: linear-gradient(135deg, var(--primary-yellow)10%, var(--light-bg)90%);
    border-radius: 8px;
    border: 1px solid var(--border-gray);
}

.pricing-preview small {
    color: var(--dark-navy);
    font-weight: 600;
}

.group-users-section {
    margin-top: 3rem;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    border: 2px solid var(--border-gray);
}

.group-users-section h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--dark-navy);
    border-bottom: 2px solid var(--primary-yellow);
    padding-bottom: 0.5rem;
}

.user-assignment-controls {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1rem;
    margin-bottom: 2rem;
    align-items: end;
}

.user-assignment-controls .form-control {
    padding: 0.75rem;
    border: 2px solid var(--border-gray);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.user-assignment-controls .form-control:focus {
    outline: none;
    border-color: var(--primary-yellow);
    box-shadow: 0 0 0 3px rgba(247, 213, 66, 0.1);
}

.assignments-table {
    display: grid;
    gap: 0.5rem;
}

.assignments-header {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 1rem;
    padding: 1rem;
    background: var(--dark-navy);
    color: white;
    border-radius: 8px;
    font-weight: bold;
}

.assignment-row {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 1rem;
    padding: 1rem;
    background: var(--light-bg);
    border-radius: 8px;
    border: 1px solid var(--border-gray);
    transition: all 0.2s ease;
}

.assignment-row:hover {
    background: white;
    border-color: var(--primary-yellow);
}

.user-info strong {
    display: block;
    color: var(--dark-navy);
    margin-bottom: 0.25rem;
}

.user-info small {
    color: var(--text-gray);
    font-size: 0.85rem;
}

.group-info {
    align-self: center;
    font-weight: 600;
    color: var(--dark-navy);
}

.assignment-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.remove-btn {
    background: #ef4444;
    border: none;
    border-radius: 4px;
    padding: 0.5rem;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.remove-btn:hover {
    background: #dc2626;
    transform: scale(1.1);
}

.no-assignments {
    text-align: center;
    color: var(--text-gray);
    font-style: italic;
    padding: 2rem;
    background: var(--light-bg);
    border-radius: 8px;
    border: 2px dashed var(--border-gray);
}

/* Pricing section in modals */
.pricing-section {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: var(--light-bg);
    border-radius: 8px;
    border: 1px solid var(--border-gray);
}

.pricing-section h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--dark-navy);
}

.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pricing-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(247, 213, 66, 0.1);
    border-radius: 6px;
    border: 1px solid var(--primary-yellow);
}

.pricing-note i {
    color: var(--primary-yellow);
}

.pricing-note span {
    font-size: 0.9rem;
    color: var(--dark-navy);
}

/* Per-Product Pricing Styles */
.per-product-pricing-section {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: var(--light-bg);
    border-radius: 8px;
    border: 1px solid var(--border-gray);
}

.per-product-pricing-section h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--dark-navy);
    border-bottom: 2px solid var(--primary-yellow);
    padding-bottom: 0.5rem;
}

.section-description {
    font-size: 0.9rem;
    color: var(--text-gray);
    margin-bottom: 1rem;
}

.product-pricing-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--white);
    border-radius: 6px;
    border: 1px solid var(--border-gray);
}

.product-pricing-controls select {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--border-gray);
    border-radius: 4px;
    font-size: 0.9rem;
}

.product-pricing-controls select optgroup {
    font-weight: bold;
    color: var(--dark-navy);
    background: var(--light-bg);
    padding: 0.25rem;
}

.product-pricing-controls select option {
    padding: 0.25rem 0.5rem;
    color: var(--text-gray);
}

.add-product-pricing-btn {
    background: var(--primary-yellow);
    color: var(--dark-navy);
    border: none;
    padding: 0.6rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.add-product-pricing-btn:hover {
    background: #e6c200;
    transform: translateY(-1px);
}

.product-pricing-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.no-product-pricing {
    text-align: center;
    color: var(--text-gray);
    font-style: italic;
    padding: 2rem;
    background: var(--white);
    border-radius: 6px;
    border: 1px dashed var(--border-gray);
}

.product-pricing-item {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    padding: 1rem;
    position: relative;
}

.product-info {
    margin-bottom: 1rem;
}

.product-info h5 {
    margin: 0 0 0.25rem 0;
    color: var(--dark-navy);
    font-size: 1rem;
}

.product-id {
    font-size: 0.75rem;
    color: var(--text-gray);
    font-family: 'Courier New', monospace;
    background: var(--light-bg);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}

.product-pricing-type-section {
    margin-bottom: 1.5rem;
}

.product-type-header {
    font-size: 0.9rem;
    color: var(--dark-navy);
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, var(--primary-yellow), #e6c200);
    border-radius: 6px;
    border-left: 4px solid var(--dark-navy);
}

.product-pricing-type-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pricing-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pricing-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pricing-input-group label {
    font-size: 0.9rem;
    color: var(--dark-navy);
    font-weight: 600;
    min-width: 60px;
}

.pricing-input-group input {
    flex: 1;
    padding: 0.4rem;
    border: 1px solid var(--border-gray);
    border-radius: 4px;
    font-size: 0.9rem;
    text-align: right;
}

.pricing-input-group span {
    color: var(--text-gray);
    font-weight: 600;
}

.pricing-preview {
    font-size: 0.85rem;
    color: var(--primary-yellow);
    font-weight: 600;
    background: rgba(255, 193, 7, 0.1);
    padding: 0.5rem;
    border-radius: 4px;
    border-left: 3px solid var(--primary-yellow);
}

.remove-product-pricing-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: #ef4444;
    color: white;
    border: none;
    padding: 0.4rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.8rem;
}

.remove-product-pricing-btn:hover {
    background: #dc2626;
    transform: scale(1.05);
}

/* Modal enhancements for group management */
.option-modal-content {
    max-width: 600px;
}

#create-group-modal .modal-content,
#edit-group-modal .modal-content {
    max-width: 700px;
}

/* Account status section in customer edit modal */
.account-status-section {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: var(--light-bg);
    border-radius: 8px;
    border: 1px solid var(--border-gray);
}

.account-status-section h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--dark-navy);
    border-bottom: 2px solid var(--primary-yellow);
    padding-bottom: 0.5rem;
}

.current-account-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.account-badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.account-badge.basic {
    background: #e5e7eb;
    color: #374151;
}

.account-badge.contractor {
    background: var(--primary-yellow);
    color: var(--dark-navy);
}

.account-badge.admin {
    background: #dc2626;
    color: white;
}

.contractor-request-pending {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #f59e0b;
    font-weight: 500;
}

.contractor-request-pending i {
    animation: pulse 2s infinite;
}

.contractor-approval-section {
    margin-top: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    border: 2px solid #f59e0b;
}

.contractor-approval-section h5 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--dark-navy);
    font-size: 1rem;
}

.contractor-approval-section p {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--dark-navy);
}

/* Account type controls */
.account-type-controls {
    margin: 1rem 0;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    border: 1px solid var(--border-gray);
}

.account-type-controls label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--dark-navy);
}

.account-type-select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-gray);
    border-radius: 6px;
    font-size: 1rem;
    background: white;
    transition: border-color 0.3s ease;
}

.account-type-select:focus {
    outline: none;
    border-color: var(--primary-yellow);
    box-shadow: 0 0 0 3px rgba(247, 213, 66, 0.1);
}

.account-type-controls small {
    display: block;
    margin-top: 0.5rem;
    color: var(--text-gray);
    font-size: 0.9rem;
}

.approval-actions {
    display: flex;
    gap: 1rem;
}

.custom-modal-btn.success {
    background: #10b981;
    color: white;
}

.custom-modal-btn.success:hover {
    background: #059669;
}

.custom-modal-btn.danger {
    background: #ef4444;
    color: white;
}

.custom-modal-btn.danger:hover {
    background: #dc2626;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Responsive design for group management */
@media (max-width: 768px) {
    .groups-grid {
        grid-template-columns: 1fr;
    }
    
    .user-assignment-controls {
        grid-template-columns: 1fr;
    }
    
    .assignments-header,
    .assignment-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .assignments-header {
        display: none; /* Hide header on mobile, use card-style layout */
    }
    
    .assignment-row {
        padding: 1rem;
        border-radius: 12px;
    }
    
    .user-info,
    .group-info {
        margin-bottom: 0.5rem;
    }
    
    .assignment-actions {
        justify-self: end;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    .approval-actions {
        flex-direction: column;
    }
}

/* ==========================================
   CART SHARING STYLES
   ========================================== */

.share-cart-info {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--light-bg);
    border-radius: 8px;
    border: 1px solid var(--border-gray);
}

.share-cart-info .cart-summary {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    font-weight: 600;
    color: var(--dark-navy);
}

.share-link-section {
    margin-bottom: 1.5rem;
}

.share-link-section label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--dark-navy);
}

.share-link-group {
    display: flex;
    gap: 0.5rem;
}

.share-url-input {
    flex: 1;
    padding: 0.75rem;
    border: 2px solid var(--border-gray);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--light-bg);
    color: var(--dark-navy);
}

.copy-btn {
    padding: 0.75rem 1rem;
    background: var(--primary-yellow);
    color: var(--dark-navy);
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.copy-btn:hover {
    background: #e6c445;
    transform: scale(1.05);
}

.share-methods h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--dark-navy);
}

.share-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
}

.share-btn {
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}

.share-btn.email {
    background: #3b82f6;
    color: white;
}

.share-btn.email:hover {
    background: #2563eb;
}

.share-btn.whatsapp {
    background: #25d366;
    color: white;
}

.share-btn.whatsapp:hover {
    background: #22c55e;
}

.share-btn.admin {
    background: #dc2626;
    color: white;
}

.share-btn.admin:hover {
    background: #b91c1c;
}

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Cart sharing button in cart page */
.cart-share-btn {
    background: linear-gradient(135deg, var(--primary-yellow), #f4c842);
    color: var(--dark-navy);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.cart-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(247, 213, 66, 0.3);
}

.cart-share-btn:active {
    transform: translateY(0);
}

/* Responsive design for sharing modal */
@media (max-width: 768px) {
    .share-link-group {
        flex-direction: column;
    }
    
    .share-buttons {
        grid-template-columns: 1fr;
    }
    
    .cart-summary {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ==========================================
   INVENTORY MANAGEMENT STYLES
   ========================================== */

.inventory-overview {
    margin-bottom: 2rem;
}

.inventory-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.inventory-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.inventory-table-container {
    overflow-x: auto;
    margin-top: 2rem;
}

.inventory-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.inventory-table th,
.inventory-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-gray);
}

.inventory-table th {
    background: var(--light-gray);
    color: var(--dark-navy);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

.inventory-table tbody tr:hover {
    background: rgba(247, 213, 66, 0.08);
}

.product-info strong {
    display: block;
    color: var(--dark-navy);
    margin-bottom: 0.25rem;
}

.product-info small {
    color: var(--text-gray);
    text-transform: capitalize;
}

.stock-level {
    font-weight: bold;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
    min-width: 50px;
    text-align: center;
}

.stock-level.in-stock {
    background: #d1fae5;
    color: #065f46;
}

.stock-level.low-stock {
    background: #fef3c7;
    color: #92400e;
}

.stock-level.out-of-stock {
    background: #fee2e2;
    color: #991b1b;
}

.stock-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
}

.stock-status.in-stock {
    background: #10b981;
    color: white;
}

.stock-status.low-stock {
    background: #f59e0b;
    color: white;
}

.stock-status.out-of-stock {
    background: #ef4444;
    color: white;
}

.inventory-actions {
    display: flex;
    gap: 0.5rem;
}

/* Configuration options in modals only */
.modal .configuration-options,
.custom-modal .configuration-options {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    padding: 1rem;
    background: var(--light-bg);
}

.config-category {
    margin-bottom: 1.5rem;
}

.config-category:last-child {
    margin-bottom: 0;
}

.config-category h4 {
    margin: 0 0 0.75rem 0;
    color: var(--dark-navy);
    font-size: 1rem;
    border-bottom: 1px solid var(--border-gray);
    padding-bottom: 0.5rem;
}

.config-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
}

.config-option-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.config-option-label:hover {
    border-color: var(--primary-yellow);
    background: rgba(247, 213, 66, 0.1);
}

.config-option-label input[type="radio"] {
    margin: 0;
}

.config-info {
    color: var(--text-gray);
    font-style: italic;
    text-align: center;
    padding: 2rem;
    margin: 0;
}

/* Stock adjustment controls */
.stock-adjustment {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 0.5rem;
    align-items: end;
}

.stock-adjustment select,
.stock-adjustment input {
    padding: 0.5rem;
    border: 1px solid var(--border-gray);
    border-radius: 4px;
}

/* Readonly info display */
.readonly-info {
    padding: 1rem;
    background: var(--light-bg);
    border-radius: 8px;
    border: 1px solid var(--border-gray);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Form row layout */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Responsive design for controls */
@media (max-width: 1024px) {
    .orders-controls,
    .inventory-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .orders-controls .search-controls,
    .inventory-controls .search-controls {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .orders-controls .search-controls,
    .inventory-controls .search-controls {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .orders-controls .search-controls input,
    .inventory-controls .search-controls input {
        min-width: auto;
        width: 100%;
    }
    
    .orders-controls .filter-controls,
    .inventory-controls .filter-controls {
        justify-content: center;
    }
}

/* Responsive design for inventory */
@media (max-width: 768px) {
    .inventory-stats {
        grid-template-columns: 1fr;
    }
    
    .inventory-table-container {
        font-size: 0.85rem;
    }
    
    .inventory-table th,
    .inventory-table td {
        padding: 0.75rem;
    }
    
    .config-options {
        grid-template-columns: 1fr;
    }
    
    .stock-adjustment {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .inventory-actions {
        flex-direction: column;
    }
}