/* css/style.css - Elegant Interior Design Theme */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root {
    /* 🎨 Elegant Color Palette */
    --accent: #2C2C2C;           /* Deep Charcoal for primary actions */
    --accent-hover: #4A4A4A;     
    --accent-light: #F4F1ED;     /* Warm taupe/beige for soft backgrounds */
    --muted: #737373;            /* Elegant grey for secondary text */
    --bg: #FCFCFC;               /* Warm off-white background */
    --surface: #FFFFFF;          /* Pure white for cards */
    --border: #E8E6E1;           /* Soft border color */
    --text-main: #1A1A1A;        /* Near black for high readability */
    
    --max-width: 1200px;
    --border-radius: 4px;        /* Sharper, more premium corners */
}

* {
    box-sizing: border-box;
}

/* Form controls and buttons use the browser's own font unless told otherwise,
   so a real <button> showed up in the OS font while links next to it were in
   Inter. Inheriting the page font keeps every interactive element consistent. */
button, input, select, textarea {
    font-family: inherit;
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    color: var(--text-main);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    color: var(--accent);
    line-height: 1.3;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* 📣 Top Highlight Bar */
.highlight-bar {
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.highlight-bar .container {
    display: flex;
    gap: 32px;
    padding: 10px 16px;
    justify-content: center;
}

.highlight {
    color: #e0e0e0;
}

/* 🏔️ Header Navigation */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
}

.logo {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 26px;
    color: var(--accent);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Direct children only. Scoping this to top level links keeps it from bleeding
   into everything inside the dropdown panels - these rules outrank .btn and
   .dropdown-content a on specificity, and were stripping the buttons in the
   My Config panel down to plain text. */
.main-nav > a:not(.login-link):not(.cart-btn),
.dropbtn {
    padding: 8px 12px;
    text-decoration: none;
    color: var(--accent);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    /* A button does not inherit the page font, which made "Curtain Types" look
       smaller and different from the plain links next to it. */
    font-family: inherit;
    font-weight: 500;
    letter-spacing: 0.03em;
    transition: color 0.3s;
}

.main-nav > a:not(.login-link):not(.cart-btn):hover,
.dropbtn:hover {
    color: var(--muted);
}

/* 🏗️ Core Buttons */
.btn {
    display: inline-block;
    background: var(--accent);
    color: var(--surface);
    padding: 14px 28px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background 0.3s ease, transform 0.2s ease;
    border: 1px solid var(--accent);
    cursor: pointer;
    text-align: center;
}

.btn:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--surface);
}

/* Disabled primary button, e.g. Book Appointment before the config is valid. */
.btn:disabled {
    background: var(--border);
    border-color: var(--border);
    color: var(--muted);
    cursor: not-allowed;
    transform: none;
}

.btn.secondary:hover {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
}

/* Secondary buttons sit next to primary ones on the product cards, where the
   old very light border made "View Installations" almost invisible. The accent
   border keeps it clearly secondary without competing with the filled button. */
.btn.secondary {
    background: var(--surface);
    color: var(--accent);
    border: 1px solid var(--accent);
}

.btn.secondary:hover {
    background: var(--accent-light);
    border-color: var(--border);
}

/* 🔑 Login Link (Overriding old blue style) */
.login-link, 
.main-nav .login-link {
    background: transparent !important;
    color: var(--accent) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--border-radius) !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em !important;
    font-size: 12px !important;
    transition: all 0.3s ease !important;
}

.login-link:hover, 
.main-nav .login-link:hover {
    background: var(--accent-light) !important;
}

/* 🏛️ Hero Section */
.hero {
    padding: 80px 0;
    background: var(--accent-light);
}

.hero-inner {
    display: flex;
    gap: 48px;
    align-items: center;
}

.hero-text {
    flex: 1;
}

.hero-text h1 {
    font-size: 42px;
    margin: 0 0 20px;
    color: var(--text-main);
}

.hero-text p {
    color: var(--muted);
    font-size: 18px;
    margin: 0 0 32px;
    max-width: 90%;
}

.hero-image img {
    max-width: 450px;
    border-radius: 0; /* Boxy, elegant images */
    box-shadow: 15px 15px 0px rgba(44, 44, 44, 0.05); /* Architectural shadow */
    display: block;
}

/* Hero trust line: small, quiet, keeps the page from reading like a form funnel.
   Selector includes .hero-text so it outranks the generic ".hero-text p" size. */
.hero-text .hero-trust {
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--text-main);
    margin: 0 0 14px;
    max-width: 100%;
}

/* English consultation notice - a quiet chip, not a warning banner. */
.hero-lang {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 26px;
    padding: 7px 14px;
    font-size: 13px;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.hero-lang::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex: none;
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* HOW IT WORKS */
.how-it-works {
    padding: 56px 0 8px;
}

.how-it-works h2 {
    margin: 0 0 8px;
}

.how-it-works-intro {
    margin: 0 0 28px;
    font-size: 15px;
    color: var(--muted);
}

.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px;
}

.step {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 22px 20px;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    font-family: 'Playfair Display', serif;
    font-size: 14px;
}

.step h3 {
    margin: 0 0 6px;
    font-size: 17px;
}

.step p {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}

/* MID-PAGE APPOINTMENT BAND */
.cta-band {
    margin: 48px 0 0;
    background: var(--accent-light);
}

.cta-band-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 36px 24px;
    flex-wrap: wrap;
}

.cta-band h2 {
    margin: 0 0 6px;
    font-size: 24px;
}

.cta-band p {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
}

/* Room for the floating appointment widget so it never covers the footer. */
.has-floating-cta {
    padding-bottom: 0;
}

/* 📱 Footer */
.site-footer {
    background: var(--accent);
    color: #e0e0e0;
    padding: 60px 0 40px;
    margin-top: 60px;
}

.footer-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
}

.footer-inner .col h4 {
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.footer-inner .col a, 
.footer-inner .col p {
    color: #a3a3a3;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 12px;
    display: block;
    transition: color 0.3s;
}

.footer-inner .col a:hover {
    color: #fff;
}

/* Update your floating-appointment-widget styles */
.floating-appointment-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #2C2C2C; /* Replaced gradient with solid elegant charcoal */
    color: white;
    padding: 16px 24px;
    border-radius: 4px; /* Flatter corners */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 300px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

.floating-appointment-widget:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.widget-icon {
    font-size: 24px; /* Slightly smaller, more refined */
    background: rgba(255,255,255,0.1); /* Subtle circle background */
    padding: 10px;
    border-radius: 50%;
}

/* 🛍️ Product Grid Updates */
.grid .item, .fabric-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 16px;
    text-align: center;
    box-shadow: none;
    transition: border-color 0.3s, transform 0.3s;
}

.grid .item:hover, .fabric-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.grid img {
    border-radius: var(--border-radius);
    margin-bottom: 12px;
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
}

/* Update standard inputs and selects */
select, input[type="text"], input[type="number"], input[type="email"], textarea {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 12px 16px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-main);
    transition: border-color 0.3s;
}

select:focus, input:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
}

/* ============================================
   DROPDOWN MENUS (Main Menu & User)
   ============================================ */
.dropdown, .user-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Elegant shadow */
    min-width: 200px;
    z-index: 1000;
    border-radius: var(--border-radius);
    padding: 0;
    margin-top: 12px; /* Creates spacing */
}

/* Invisible bridge to prevent dropdown from closing when cursor moves */
.dropdown::before, .user-dropdown::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 15px;
    background: transparent;
    z-index: 999;
}

.dropdown-content a {
    display: block;
    padding: 14px 20px;
    color: var(--text-main);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.dropdown-content a:hover {
    background: var(--accent-light);
    color: var(--accent);
}

.dropdown:hover .dropdown-content, .user-dropdown:hover .dropdown-content {
    display: block;
}

/* ============================================
   CART DROPDOWN
   ============================================ */
.cart-dropdown {
    position: relative;
    display: inline-block;
}

.cart-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--accent);
    font-size: 14px;
    border-radius: var(--border-radius);
    transition: background 0.2s;
}

.cart-btn:hover {
    background: var(--accent-light);
}

.cart-count {
    background: var(--accent);
    color: var(--surface);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    min-width: 20px;
    text-align: center;
}

.cart-count.empty {
    background: var(--muted);
}

.cart-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    min-width: 320px;
    z-index: 1001;
    border-radius: var(--border-radius);
    margin-top: 12px;
}

.cart-dropdown::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 15px;
    background: transparent;
}

.cart-dropdown:hover .cart-dropdown-content,
.cart-dropdown-content.visible {
    display: block;
}

.cart-dropdown-header { padding: 16px; border-bottom: 1px solid var(--border); font-weight: 600; }
.cart-dropdown-items { max-height: 300px; overflow-y: auto; }
.cart-dropdown-item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.cart-item-image { width: 50px; height: 50px; border-radius: var(--border-radius); object-fit: cover; }
.cart-item-info { flex: 1; }
.cart-item-name { font-weight: 500; font-size: 14px; margin: 0 0 4px 0; }
.cart-dropdown-footer { padding: 16px; border-top: 1px solid var(--border); background: var(--bg); }
/* Empty state - was used by cartDropdown.js but never styled, so the panel
   rendered as unstyled text. */
.cart-dropdown-empty {
    padding: 28px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

.cart-dropdown-empty p {
    margin: 0 0 14px 0;
}

.cart-dropdown-items-more {
    padding: 10px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    border-top: 1px solid var(--border);
}

/* The cart panel opens leftwards from the right edge and used to sit on top of
   the account menu. Show the account menu above it instead - the two are also
   kept from being open at the same time in header.js. */
.user-dropdown .dropdown-content {
    z-index: 1002;
}

/* ============================================
   PRODUCT CARD (curtain-types) - shared look
   ============================================ */
.card-image-container {
    overflow: hidden;
    border-radius: var(--border-radius);
    margin-bottom: 12px;
}

.card-image {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: var(--accent-light);
    transition: transform 0.4s ease;
}

/* Clicking the picture opens the configurator, so show that it is clickable. */
.card-image.clickable-image {
    cursor: pointer;
}

.fabric-card:hover .card-image {
    transform: scale(1.04);
}

.card-type {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 4px 0 8px;
}

.card-price {
    color: var(--accent);
    font-weight: 500;
    margin: 0;
}

.card-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0;
    justify-content: center;
}

.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
}

/* Cards are packed tightly, so use a slightly smaller button inside them. */
.card-actions .btn {
    padding: 10px 18px;
    font-size: 12px;
}

.cart-dropdown-actions { display: flex; gap: 8px; margin-top: 16px; }

/* User Avatar Bubble */
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--surface);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

/* ============================================
   BEST SELLERS CAROUSEL (Horizontal Scroll)
   ============================================ */
.best-sellers {
    padding: 40px 0;
}

.best-sellers h2 {
    margin-bottom: 24px;
}

.carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--surface);
    color: var(--text);
    font-size: 28px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    line-height: 1;
}

.carousel-nav:hover {
    background: var(--accent);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
    left: -22px;
}

.carousel-next {
    right: -22px;
}

@media (max-width: 768px) {
    .carousel-nav {
        display: none;
    }
}

.carousel {
    flex: 1;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 0 20px 0;
    -webkit-overflow-scrolling: touch; /* iOS momentum scroll */
    scroll-behavior: smooth;
    
    /* Smooth native snapping on scroll */
    scroll-snap-type: x mandatory; 
    
    /* Hide scrollbar for a clean UI */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.carousel::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.carousel .card {
    min-width: 260px; /* Width of the cards */
    flex: 0 0 auto; /* Stop them from squishing */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 16px;
    text-align: left;
    scroll-snap-align: start; /* Snaps cards to the edge when you stop scrolling */
    transition: border-color 0.3s, transform 0.3s;
}

.carousel .card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.carousel img {
    width: 100%;
    height: 240px; /* ⬅️ Fixed uniform height for all carousel images */
    object-fit: cover; /* Cropped natively so aspect ratios don't warp */
    border-radius: var(--border-radius);
    margin-bottom: 16px;
}

/* ============================================
   INSTALLATION PHOTO GALLERY (homepage marquee + gallery page)
   ============================================ */
.installations {
    padding: 40px 0;
}

.installations-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.installations-header h2 {
    margin: 0;
}

.installation-marquee {
    overflow: hidden;
    position: relative;
}

.installation-track {
    display: flex;
    width: max-content;
    animation: installation-scroll 30s linear infinite;
}

.installation-marquee:hover .installation-track {
    animation-play-state: paused;
}

@keyframes installation-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.installation-card {
    flex: 0 0 auto;
    width: 300px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--text-main);
    display: block;
}

.installation-track .installation-card {
    margin-right: 20px;
}

.installation-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

.installation-caption {
    padding: 10px 14px;
    font-size: 14px;
    color: var(--muted);
}

/* Gallery cards: the picture is clickable, so show that and keep a dedicated
   control for enlarging the photo. */
.installation-card-image {
    position: relative;
}

.installation-grid .installation-card img {
    cursor: pointer;
}

.installation-zoom {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--accent);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.installation-card:hover .installation-zoom,
.installation-zoom:focus-visible {
    opacity: 1;
}

.installation-card-action {
    padding: 0 14px 14px;
}

.installation-card-action .btn {
    width: 100%;
    padding: 11px 14px;
    font-size: 12px;
}

/* One entry per linked style, so a photo showing several fabrics no longer
   needs a modal in between. */
.installation-card-styles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 14px 14px;
}

.style-chip {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 12px;
    color: var(--accent);
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--border-radius);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.style-chip:hover {
    background: var(--accent);
    color: var(--surface);
}

.style-chip-more {
    flex: 0 0 auto;
    color: var(--muted);
    border-color: var(--border);
}

/* Gallery page grid */
.installation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.installation-grid .installation-card {
    width: 100%;
}

@media (max-width: 768px) {
    .installation-track .installation-card { width: 240px; }
    .installation-track .installation-card img { height: 180px; }
}

@media (max-width: 480px) {
    .installation-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Responsive: homepage
   The page had no mobile rules at all, so the hero stayed a
   two-column row and the highlight bar overflowed on small screens.
   ============================================================ */

@media (max-width: 900px) {
    .hero-inner {
        flex-direction: column;
        gap: 32px;
    }

    .hero-image img {
        max-width: 100%;
        width: 100%;
    }

    .hero-text h1 { font-size: 34px; }
}

@media (max-width: 768px) {
    .highlight-bar .container {
        flex-wrap: wrap;
        gap: 6px 16px;
        padding: 8px 16px;
        font-size: 11px;
        line-height: 1.4;
    }

    .hero { padding: 40px 0; }

    .hero-text h1 {
        font-size: 30px;
        margin-bottom: 14px;
    }

    .hero-text p {
        font-size: 16px;
        margin-bottom: 18px;
        max-width: 100%;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        width: 100%;
        padding: 14px 20px;
    }

    .how-it-works { padding: 36px 0 0; }
    .how-it-works-intro { margin-bottom: 20px; }

    .steps {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .step { padding: 18px 18px; }
    .step p { font-size: 14px; }

    .cta-band { margin-top: 32px; }
    .cta-band-inner { padding: 28px 24px; }
    .cta-band h2 { font-size: 21px; }
    .cta-band .btn { width: 100%; text-align: center; }

    /* Keep the floating widget from covering the last rows of content. */
    .has-floating-cta { padding-bottom: 76px; }
}

@media (max-width: 480px) {
    .hero-text h1 { font-size: 26px; }
    .has-floating-cta { padding-bottom: 68px; }
}