:root {
    /* Colors - Wapim Premium Purple */
    --color-text-main: #0f172a;
    --color-text-light: #475569;
    --color-background: #ffffff;
    --color-background-soft: #f8fafc;
    --color-background-accent: #f5f3ff; /* Pale purple */
    
    /* Premium Violet Theme */
    --color-primary: #7c3aed;
    --color-primary-hover: #6d28d9;
    
    --color-secondary: #0f172a;
    --color-border: #e2e8f0;
    --color-white: #ffffff;

    /* Typography */
    --font-family-sans: 'Inter', sans-serif;
    --font-family-heading: 'Outfit', sans-serif;
    
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-h1: 52px;
    --font-size-h2: 36px;
    --font-size-h3: 24px;

    /* Spacing */
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 48px;
    --container-width: 1240px;
    --header-height: 80px;

    /* UI */
    --border-radius: 8px;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-glow: 0 0 20px rgba(124, 58, 237, 0.3);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animations */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    color: var(--color-text-main);
    background-color: var(--color-background);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-family-heading);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-main);
}

h1 {
    font-size: var(--font-size-h1);
    letter-spacing: -1px;
}

h2 {
    font-size: var(--font-size-h2);
    letter-spacing: -0.5px;
}

h3 {
    font-size: var(--font-size-h3);
}

p {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-light);
}

/* Layout */
.container {
    width: 92%;
    max-width: var(--container-width);
    margin: 0 auto;
}

.section {
    padding: 100px 0;
}

/* Grid System Fix: Ensure all grids have display property */
.grid,
.grid-2,
.grid-3,
.grid-4 {
    display: grid;
    gap: 30px;
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.flex {
    display: flex;
}

.gap-md {
    gap: 16px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-weight: 600;
    font-size: 15px;
    border-radius: 50px; /* Pill shape */
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-family: var(--font-family-sans);
}

.btn-primary {
    background-color: var(--color-primary);
    color: white;
    box-shadow: 0 4px 14px 0 rgba(124, 58, 237, 0.39);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.23);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
}

.btn-outline:hover {
    background-color: var(--color-background-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Header */
.site-header {
    height: var(--header-height);
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    z-index: 100;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}


/* Text Logo Styles */
.text-logo {
    font-family: var(--font-family-heading);
    font-weight: 800;
    font-size: 24px;
    color: var(--color-text-main);
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.brand-highlight {
    color: var(--color-primary);
}

/* Smaller, refined logo */

.nav-links {
    display: flex;
    gap: 40px;
}

.nav-links a {
    font-size: 14px;
    font-weight: 500;
    color: #111;
    letter-spacing: 0.3px;
}

.nav-links a:hover {
    color: var(--color-primary);
}

.header-icons {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-icons .btn-primary {
    padding: 10px 24px;
    font-size: 14px;
}

.mobile-menu-btn {
    display: none;
    /* Hidden by default on Desktop */
}

/* Accordion / FAQ */
.accordion {
    border-top: 1px solid var(--color-border);
}

.accordion-item {
    border-bottom: 1px solid var(--color-border);
}

.accordion-header {
    width: 100%;
    text-align: left;
    padding: 24px 0;
    /* More breathing room */
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-family-sans);
    font-size: 18px;
    /* Larger text */
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-main);
    transition: color 0.2s ease;
    -webkit-appearance: none;
    /* Remove default button styling */
    appearance: none;
}

.accordion-header:hover {
    color: var(--color-primary);
}

.accordion-header .icon {
    font-size: 24px;
    font-weight: 400;
    transition: transform 0.3s ease;
    line-height: 1;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    color: var(--color-text-light);
}

.accordion-content p {
    padding-bottom: 24px;
    margin: 0;
    line-height: 1.6;
    max-width: 90%;
}

.accordion-item.active .accordion-header {
    color: var(--color-primary);
}

.accordion-item.active .accordion-content {
    max-height: 500px;
    /* Sufficient height */
}

.accordion-item.active .icon {
    transform: rotate(45deg);
}

/* Hero */
.hero {
    padding: 80px 0;
    overflow: hidden;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

/* More space for image */
.hero-text h1 {
    margin-bottom: 24px;
}

.hero-text p {
    font-size: 18px;
    margin-bottom: 32px;
    max-width: 480px;
}

.hero-image img {
    border-radius: 8px;
}

/* Trust Badges - Icon Strip */
.trust-strip {
    padding: 60px 0;
    background-color: #ffffff;
}

/* Explicitly force 4 columns on Desktop */
.trust-strip .grid-4 {
    display: grid;
    /* Force grid display */
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    padding: 30px 20px;
    border: 1px solid var(--color-border);
    /* "fcadr dyalha" - In its own frame */
    border-radius: 8px;
    transition: all 0.3s ease;
    animation: fadeUp 0.6s ease-out backwards;
    background-color: #fff;
}

/* Stagger animations */
.trust-item:nth-child(1) {
    animation-delay: 0.1s;
}

.trust-item:nth-child(2) {
    animation-delay: 0.2s;
}

.trust-item:nth-child(3) {
    animation-delay: 0.3s;
}

.trust-item:nth-child(4) {
    animation-delay: 0.4s;
}

.trust-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.trust-item:hover .trust-icon svg {
    stroke: var(--color-primary);
    transform: scale(1.1);
}

.trust-icon svg {
    width: 28px;
    /* Slightly larger */
    height: 28px;
    stroke: #1a1a1a;
    stroke-width: 1.5px;
    transition: all 0.3s ease;
}

.trust-text {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    /* Wider spacing for cleaner look */
    color: var(--color-text-main);
}

/* Product Grid */
.product-card {
    background: transparent;
    border: none;
    border-radius: 0;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: block;
}

.product-image {
    background: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 1;
    margin-bottom: 16px;
}

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

.product-card:hover .product-image img {
    transform: scale(1.05);
}

.product-title {
    font-size: 16px;
    margin-bottom: 6px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-price {
    font-size: 15px;
    color: #111;
    font-weight: 500;
}

.add-btn-sm {
    font-size: 12px;
    padding: 6px 16px;
    border-radius: 40px;
}

/* Quick Picks (Categories) */
.category-card {
    height: 400px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: white;
}

.category-title {
    color: white;
    margin-bottom: 8px;
}

.link-arrow {
    color: white;
    text-decoration: underline;
    font-size: 14px;
    font-weight: 600;
}

/* Features */
.feature-box {
    background: var(--color-background-accent);
    padding: 50px 30px;
    border-radius: 8px;
    text-align: center;
}

.feature-icon {
    font-size: 30px;
    display: block;
    margin-bottom: 20px;
    margin-top: 10px;
}

.feature-box h3 {
    font-size: 18px;
    margin-bottom: 12px;
}

.feature-box p {
    font-size: 14px;
    color: #555;
}

/* Footer */
.site-footer {
    background: #fafafa;
    padding-top: 80px;
    padding-bottom: 40px;
    margin-top: 100px;
    border-top: 1px solid var(--color-border);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    /* Brand | Shop | Support | Newsletter */
    gap: 40px;
    margin-bottom: 60px;
}

.footer-heading {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

.footer-links a {
    font-size: 14px;
    color: #666;
    display: block;
    margin-bottom: 12px;
}

.footer-brand p {
    font-size: 14px;
    max-width: 250px;
    margin-top: 16px;
}

/* Mobile */
@media (max-width: 900px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 30px;
    }

    .hero-content .flex {
        justify-content: center;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: white;
        flex-direction: column;
        padding: 80px 40px;
        z-index: 1001;
        transition: 0.3s;
        box-shadow: -10px 0 20px rgba(0, 0, 0, 0.1);
    }

    .nav-links.active {
        right: 0;
    }

    .grid-4,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    /* Mobile Grid for Trust Strip - "Wa7da te7t wa7da" (One below another) */
    .trust-strip .grid-4 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .product-grid .grid-3,
    .product-grid .grid-4 {
        grid-template-columns: 1fr 1fr;
        /* Keep products 2x2 */
        gap: 20px 10px;
    }

    .header-icons .btn-primary {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
        margin-right: 16px;
        cursor: pointer;
    }

    /* Footer Mobile Stack */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .footer-brand p {
        margin: 16px auto 0;
        /* Center text */
    }

    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}

/* Product Page Specifics */
.product-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 80px;
}

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

.main-image-container {
    background: #f4f4f4;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.thumbnail-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.thumb {
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.thumb:hover,
.thumb.active {
    border-color: var(--color-primary);
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1;
}

/* Info Column */
.product-info-col {
    padding-top: 20px;
}

.p-title {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 12px;
}

.p-price {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 16px;
}

.p-subtitle {
    font-size: 18px;
    color: var(--color-text-light);
    margin-bottom: 24px;
}

.p-bullets {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 30px;
    color: var(--color-text-light);
}

.p-bullets li {
    margin-bottom: 8px;
}

/* Add to Cart Box */
.add-to-cart-box {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.qty-selector {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #fff;
    height: 50px;
}

.qty-btn {
    width: 40px;
    height: 100%;
    border: none;
    background: none;
    font-size: 18px;
    cursor: pointer;
}

#qtyInput {
    width: 40px;
    border: none;
    text-align: center;
    margin: 0;
    padding: 0;
    font-weight: 600;
}

.btn-add-cart {
    flex: 1;
    height: 50px;
    font-size: 16px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shipping-micro-text {
    font-size: 13px;
    color: #666;
    text-align: center;
    margin-bottom: 30px;
}

/* Product Trust Icons Block */
.p-trust-icons {
    background: var(--color-background-soft);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.p-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.p-trust-item .icon-box {
    width: 40px;
    height: 40px;
    /* circle or box */
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-trust-item .icon-box svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-text-main);
}

/* Content Sections */
.product-sections-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 800px;
    /* restrict width for readability like reference */
    margin-left: auto;
    /* Push to right side on desktop if needed, 
                       but reference implies centered or right aligned content? 
                       Actually ref image shows Sections in RIGHT column on desktop? 
                       Wait, the ref image shows "Why You'll Love It" BELOW the sidebar? 
                       No, looking closely at ref image 1:
                       Left: Images. 
                       Right: Info -> Why Love It -> Before/After -> Details -> Reviews -> FAQ.
                       Everything is in the right column!
                       
                       Ah, re-reading the image "Desktop (1440px)":
                       It seems to be a 2 column layout where the Left is sticky images, and Right is scrollable content.
                       */
}

.p-section-box {
    background: var(--color-background-soft);
    border-radius: 12px;
    padding: 32px;
}

.p-section-box.no-bg {
    background: transparent;
    padding: 32px 0;
}

.p-section-box h3 {
    font-size: 20px;
    margin-bottom: 20px;
}

/* Before / After Grid */
.before-after-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ba-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.ba-item img {
    width: 100%;
    display: block;
}

.ba-label {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.ba-label.black {
    background: #000;
}

/* Reviews */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.review-card {
    background: #fff;
    border: 1px solid var(--color-border);
    padding: 20px;
    border-radius: 8px;
}

.stars {
    color: #ffd700;
    margin-bottom: 12px;
}

.review-text {
    font-size: 14px;
    margin-bottom: 12px;
    line-height: 1.5;
}

.reviewer {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-light);
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .product-top-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 40px;
    }

    .product-gallery {
        position: static;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
        /* Stack reviews on mobile */
    }

    .p-title {
        font-size: 28px;
    }

    .p-trust-icons {
        padding: 16px;
    }

    /* Reference Mobile: Carousel dots? 
       For now keeping grid of thumbnails but could be improved later.
       Reference shows a carousel. Sticking to simple replacement first.
    */
}

/* Product Page Styles */
/* Shop Page New Design */
.shop-page-wrapper {
    background-color: #fff;
    padding-top: 40px;
}

.shop-header {
    margin-bottom: 40px;
}

.shop-subtitle {
    color: var(--color-text-light);
    margin-top: 8px;
    margin-bottom: 24px;
}

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

.breadcrumbs {
    font-size: 14px;
    color: var(--color-text-light);
}

.breadcrumbs a {
    color: var(--color-text-light);
    text-decoration: none;
}

/* Filter Bar (Pills) */
.filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

.filter-pills {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pill {
    padding: 10px 20px;
    border-radius: 40px;
    border: none;
    background: #f4f4f4;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--color-text-main);
}

.pill:hover {
    background: #e0e0e0;
}

.pill.active {
    background: #1a1a1a;
    /* Dark active state like reference */
    color: white;
}

/* Sort Select Minimal */
.sort-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--color-text-light);
}

.minimal-select {
    border: 1px solid #ddd;
    border-radius: 40px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    color: var(--color-text-main);
}

/* New Product Grid 4 Col */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* New Product Card Style */
.product-card-new {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.p-card-image {
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: #f9f9f9;
}

.p-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.product-card-new:hover .p-card-image img {
    transform: scale(1.05);
}

.p-card-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.p-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0;
}

.p-card-tag {
    font-size: 13px;
    color: var(--color-text-light);
    margin: 0;
}

.p-card-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-main);
    margin-top: 4px;
    margin-bottom: 8px;
}

.p-card-actions {
    display: flex;
    gap: 10px;
}

.btn-view {
    flex: 1;
    background: var(--color-primary);
    /* Green from ref */
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
}

.btn-view:hover {
    opacity: 0.9;
}

.btn-heart {
    width: 42px;
    height: 42px;
    /* square-ish icon button */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--color-text-main);
}

.btn-heart:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Mobile Responsive */
@media (max-width: 1100px) {
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .filter-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-pills {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 10px;
        flex-wrap: nowrap;
        /* Horizontal scroll pills */
    }

    .pill {
        white-space: nowrap;
    }
}

@media (max-width: 600px) {

    /* Per reference mobile image: cards are stacked or 2 col? 
       Reference image 1 shows nice big cards in 1 column actually? 
       Wait, "Mobile (390px)" screenshot 1 shows GRID 2 columns.
       Screenshot 2 shows LIST. 
       Let's stick to 2 columns for shop grid on mobile as it's standard and space efficient.
       Actually ref image 2 shows small cards 2 per row.
    */
    .grid-4 {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .btn-view {
        font-size: 12px;
        padding: 8px 4px;
        /* Compress padding to fit */
    }

    .btn-heart {
        width: 36px;
        height: 36px;
    }
}

/* Shop Page Layout */
.page-title {
    margin-bottom: 40px;
}

.shop-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    align-items: start;
}

/* Sidebar Styles */
.shop-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-right: 20px;
    /* Spacing from grid */
    border-right: 1px solid var(--color-border);
    /* Vertical separation line */
}

/* Encadre (Framed) Filter Groups */
.filter-group {
    border: 1px solid var(--color-border);
    /* Frame each group */
    border-radius: 8px;
    /* Rounded corners */
    padding: 20px;
    background: #fff;
    /* Remove bottom border since we have a full box now */
    border-bottom: 1px solid var(--color-border);
}

.filter-group:last-child {
    border-bottom: 1px solid var(--color-border);
    /* Keep border on last child too */
}

.filter-title {
    font-size: 16px;
    margin-bottom: 16px;
    font-weight: 700;
}

.category-list li {
    margin-bottom: 10px;
}

.category-list a {
    font-size: 14px;
    color: var(--color-text-light);
}

.category-list a:hover,
.category-list a.active {
    color: var(--color-primary);
    font-weight: 500;
}

/* Price Inputs */
.price-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.price-field {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 8px 12px;
    background: #fff;
    flex: 1;
}

.price-field span {
    font-size: 14px;
    color: #999;
    margin-right: 4px;
}

.price-field input {
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    outline: none;
    font-size: 14px;
}

.separator {
    color: #999;
}

/* Custom Select */
.custom-select-wrapper {
    position: relative;
}

.custom-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-text-main);
}

/* Shop Grid Adjustments */
.product-grid-gap {
    row-gap: 40px;
    column-gap: 24px;
}

.load-more-container {
    margin-top: 60px;
    text-align: center;
}

.btn-wide {
    padding-left: 60px;
    padding-right: 60px;
}

/* Mobile Shop */
@media (max-width: 900px) {
    .shop-layout {
        grid-template-columns: 1fr;
    }

    .shop-sidebar {
        display: none;
        /* Hidden on mobile for Phase 1 as requested */
    }
}

/* Hero Decorative Line */
.hero-underline {
    width: 60px;
    height: 3px;
    background-color: var(--color-primary);
    margin: 0 auto 20px;
    border-radius: 2px;
}

.hero-text-wrapper {
    position: relative;
}

.breadcrumbs .current {
    color: var(--color-primary);
    font-weight: 600;
}

.breadcrumbs .separator {
    margin: 0 4px;
    color: #ccc;
}

/* Secondary Pages Styles */
.policy-container {
    max-width: 800px;
    margin: 0 auto;
}

.policy-content {
    margin-top: 40px;
}

.policy-content h3 {
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 12px;
}

.policy-content p,
.policy-content li {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-light);
    margin-bottom: 16px;
}

.policy-content ul {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 20px;
}

/* Contact & Track Forms */
.form-container-centered {
    max-width: 500px;
    margin: 40px auto 0;
    padding: 32px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-main);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 15px;
    color: var(--color-text-main);
    outline: none;
    transition: border-color 0.2s;
    /* Ensure box-sizing is border-box usually set globally but let's be safe */
    box-sizing: border-box;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--color-primary);
}

.btn-full {
    width: 100%;
    justify-content: center;
    padding: 14px;
    font-size: 16px;
}

.form-helper-text {
    text-align: center;
    font-size: 13px;
    color: var(--color-text-light);
    margin-top: 16px;
}

.support-info {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--color-border);
}

.support-info h3 {
    margin-bottom: 16px;
}

.support-info p {
    color: var(--color-text-light);
    margin-bottom: 8px;
}

.support-info a {
    color: var(--color-primary);
    text-decoration: none;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .mobile-container-sm {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Checkout Page Styles */
.checkout-section {
    background-color: #fff;
    padding-top: 40px;
}

.checkout-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: start;
}

/* Shipping Form */
.checkout-header-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-group.half {
    flex: 1;
}

.btn-large-checkout {
    margin-top: 10px;
    background-color: #4CAF50;
    font-weight: 600;
    border-color: #4CAF50;
    color: #fff;
}

.btn-large-checkout:hover {
    background-color: #43a047;
}

.redirect-text {
    text-align: center;
    font-size: 13px;
    color: var(--color-text-light);
    margin-top: 12px;
    margin-bottom: 30px;
}

/* Trust Badges Checkout */
.checkout-trust {
    text-align: center;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.trust-item-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    margin-bottom: 16px;
    color: var(--color-text-main);
}

.icon-lock {
    stroke: var(--color-text-main);
    stroke-width: 2;
}

.trust-row-bottom {
    display: flex;
    justify-content: center;
    gap: 24px;
    font-size: 13px;
    color: var(--color-text-light);
}

.trust-row-bottom span {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Order Summary Card */
.order-summary-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.order-summary-card h2 {
    font-size: 18px;
    margin-bottom: 20px;
}

.summary-product {
    display: flex;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.sum-img {
    width: 64px;
    height: 64px;
    background: #f4f4f4;
    border-radius: 6px;
    overflow: hidden;
}

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

.sum-info {
    flex: 1;
}

.sum-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.4;
}

.sum-qty {
    font-size: 13px;
    color: var(--color-text-light);
}

.sum-price {
    font-weight: 600;
    font-size: 14px;
}

.summary-totals {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sum-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.total-row {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid #eee;
    font-weight: 700;
    font-size: 18px;
}

/* Responsive Checkout */
@media (max-width: 900px) {
    .checkout-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .checkout-sidebar {
        grid-row: 2;
    }

    .checkout-main {
        grid-row: 1;
    }
}

/* Large Inputs for Checkout */
.input-lg {
    padding: 16px 16px;
    height: 52px;
    font-size: 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 100%;
    outline: none;
    transition: border-color 0.2s;
    background: #fff;
    color: var(--color-text-main);
}

.input-lg:focus {
    border-color: var(--color-primary);
}

.input-lg::placeholder {
    color: #999;
}

.select-arrow {
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23666%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

/* ADMIN DASHBOARD STYLES */
.admin-body {
    background-color: #f4f6f8;
    height: 100vh;
    overflow-x: hidden;
}

.admin-wrapper {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: 250px;
    background-color: #fff;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    padding: 24px;
    position: fixed;
    height: 100vh;
    top: 0;
    left: 0;
}

.admin-logo {
    margin-bottom: 40px;
}

.admin-logo img {
    height: 32px;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.admin-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    color: #637381;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s;
}

.admin-link:hover,
.admin-link.active {
    background-color: #EDF7F6;
    /* Light green/teal tint */
    color: var(--color-primary);
}

.mt-auto {
    margin-top: auto;
}

.admin-main {
    flex: 1;
    margin-left: 250px;
    /* Sidebar width */
    padding: 24px 32px;
}

.admin-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.avatar-circle {
    /* Basic avatar placeholder */
    color: #637381;
}

.logout-link {
    color: #637381;
    text-decoration: none;
    font-size: 14px;
}

/* Dashboard Grid */
.stats-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    /* Fixed width for stats overview, detailed table takes rest */
    gap: 24px;
}

/* WAIT - Reference image grid logic:
   Top Row: [Dashboard Overview (4 items)] [Orders List (Table)]
   Actually, looking closer at Reference Desktop 1440px:
   Left Panel: 'Dashboard Overview' with 4 large numbers in a 2x2.
   Right Panel: 'Orders List' table.
   Bottom Row: 'Order Details' (Left) and 'Products Page' (Right).
   My previous assumption was correct.
*/

.stat-card,
.orders-list-panel,
.detail-card,
.products-panel {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #eef0f2;
}

.stat-card h3,
.orders-list-panel h3,
.detail-card h3,
.products-panel h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #212B36;
}

.stat-row {
    display: flex;
    gap: 24px;
}

.stat-item {
    flex: 1;
    background: #FAFBFC;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
}

.stat-item label {
    font-size: 13px;
    color: #637381;
    display: block;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #212B36;
}

/* Tables */
.table-controls {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.admin-search {
    border: 1px solid #e0e0e0;
    padding: 8px 12px;
    border-radius: 6px;
    width: 200px;
    font-size: 13px;
}

.admin-filter {
    border: 1px solid #e0e0e0;
    padding: 8px;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.admin-table th {
    text-align: left;
    color: #637381;
    font-weight: 600;
    padding: 12px 8px;
    border-bottom: 1px solid #f1f3f5;
}

.admin-table td {
    padding: 12px 8px;
    border-bottom: 1px solid #f9fafb;
    color: #212B36;
    vertical-align: middle;
}

/* Badges */
.badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.badge-paid,
.badge-active {
    background-color: #EBF8F2;
    color: #00AB55;
}

.badge-processing {
    background-color: #e3f2fd;
    color: #1976d2;
}

.badge-shipped {
    background-color: #efe7fd;
    color: #673ab7;
}

.badge-review,
.badge-inactive {
    background-color: #fff8e1;
    color: #ffc107;
}

/* Details Grid */
.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.detail-header {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 600;
}

.detail-row {
    display: flex;
    margin-bottom: 20px;
    gap: 24px;
}

.detail-col {
    flex: 1;
}

.detail-col strong {
    display: block;
    font-size: 12px;
    color: #637381;
    margin-bottom: 8px;
}

.detail-col p {
    font-size: 13px;
    margin-bottom: 4px;
    line-height: 1.5;
}

.action-buttons {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}

.btn-admin {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.btn-processing {
    background-color: #2e7d32;
    color: #fff;
}

.btn-shipped {
    background-color: #fff;
    border: 1px solid #2e7d32;
    color: #2e7d32;
}

.btn-review {
    background-color: #fff8e1;
    color: #ffab00;
}

.prod-thumb {
    width: 32px;
    height: 32px;
    background: #eee;
    border-radius: 4px;
}

/* Admin Responsive */
@media (max-width: 1100px) {

    .stats-grid,
    .details-grid {
        grid-template-columns: 1fr;
    }

    .admin-main {
        margin-left: 0;
        padding: 16px;
    }

    .admin-sidebar {
        display: none;
        /* Hide for now or hamburger */
    }
}



/* ============================
   AI Store Assistant Widget
   ============================ */
.ai-widget-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99999;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Launcher Button */
.ai-launcher {
    width: 65px;
    height: 65px;
    background: #111;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    border: 3px solid #fff;
}

.ai-launcher:hover {
    transform: scale(1.08) translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    background: #000;
}

.ai-icon {
    font-size: 32px;
    line-height: 1;
}

.ai-tooltip {
    position: absolute;
    right: 80px;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ai-tooltip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent transparent #000;
}

.ai-launcher:hover .ai-tooltip {
    opacity: 1;
    transform: translateX(0);
}

/* Chat Window */
.ai-chat-window {
    position: absolute;
    bottom: 90px;
    right: 0;
    width: 380px;
    height: 600px;
    max-height: 80vh;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transform-origin: bottom right;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Header */
.ai-header {
    background: #fff;
    padding: 18px 24px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    z-index: 10;
}

.ai-header-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ai-avatar-current {
    width: 42px;
    height: 42px;
    background: #f5f5f7;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border: 1px solid #eee;
}

.ai-title {
    display: flex;
    flex-direction: column;
}

.ai-title h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.3px;
}

.ai-status {
    font-size: 12px;
    color: #10B981;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ai-status::before {
    content: '';
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
}

.ai-close {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 8px;
    margin-right: -8px;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-close:hover {
    background: #f5f5f5;
    color: #333;
}

.ai-close svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

/* Body Area */
.ai-body {
    flex: 1;
    overflow-y: auto;
    background: #fff;
    position: relative;
    /* Scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}

.ai-body::-webkit-scrollbar {
    width: 6px;
}

.ai-body::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
}

/* Agents Grid */
.ai-agents-grid {
    padding: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-content: start;
}

.ai-agent-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.ai-agent-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: transparent;
    transition: background 0.2s;
}

.ai-agent-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    border-color: #000;
}

/* Specific hover colors */
.ai-agent-card:hover::before {
    background: #000;
}

.ai-agent-icon {
    font-size: 36px;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.ai-agent-card span {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-align: center;
}

/* Chat Messages Area */
.ai-messages {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* IMPORTANT for correct bubble sizing */
    align-items: flex-start;
}

.ai-msg {
    max-width: 85%;
    padding: 12px 18px;
    font-size: 15px;
    line-height: 1.5;
    position: relative;
    word-wrap: break-word;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.ai-msg-bot {
    background: #f4f4f4;
    color: #1a1a1a;
    border-radius: 18px 18px 18px 4px;
    align-self: flex-start;
}

.ai-msg-user {
    background: #111;
    color: #fff;
    border-radius: 18px 18px 4px 18px;
    align-self: flex-end;
}

/* Typing Indicator Animation */
@keyframes blink {
    0% {
        opacity: .2;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: .2;
    }
}

.typing span {
    animation: blink 1.4s infinite both;
}

.typing span:nth-child(2) {
    animation-delay: .2s;
}

.typing span:nth-child(3) {
    animation-delay: .4s;
}

/* AI Product Cards */
.ai-recommendations {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.prod-card {
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
}

.prod-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.prod-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
}

.prod-header strong {
    color: #2c3e50;
}

.badge {
    background: #e1f5fe;
    color: #0288d1;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;
}

.reasoning {
    font-size: 12px;
    color: #555;
    margin-bottom: 10px;
    background: #fff8e1;
    padding: 6px;
    border-radius: 4px;
    border-left: 3px solid #ffc107;
}

.prod-metrics {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
    background: #f8f9fa;
    padding: 6px;
    border-radius: 4px;
}

.profit {
    color: #27ae60;
    font-weight: bold;
}

.btn-add-store {
    width: 100%;
    padding: 8px;
    background: #3498db;
    /* Default Blue */
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
}

.btn-add-store:hover {
    background: #2980b9;
}

.ai-message .btn-add-store {
    margin-top: 5px;
}

/* Input Area */
.ai-input-area {
    padding: 16px 20px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 12px;
    align-items: center;
    background: #fff;
    position: relative;
}

.ai-back-btn {
    background: #f5f5f5;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    transition: all 0.2s;
}

.ai-back-btn:hover {
    background: #e5e5e5;
    color: #000;
}

.ai-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.ai-input-area input {
    width: 100%;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
    background: #fcfcfc;
    color: #333;
}

.ai-input-area input:focus {
    border-color: #111;
    background: #fff;
}

.ai-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #111;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ai-send-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.ai-send-btn:active {
    transform: translateY(0);
}

.ai-send-btn svg {
    width: 20px;
    height: 20px;
    margin-left: 2px;
    /* Visual balance */
}