/* ============================================================
   Da Yan Fireplace — Ferrari Design System
   Chiaroscuro rhythm, Rosso Corsa #DA291C, precision 2px
   ============================================================ */

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #303030; }
::-webkit-scrollbar-thumb:hover { background: #DA291C; }

html { scroll-behavior: smooth; }

/* Ferrari: 2px border-radius default (not 0, not rounded) */
*, *::before, *::after {
    border-radius: 2px;
}

/* Selection */
::selection { background: #DA291C; color: #fff; }

/* ============================================================
   Button System — Ferrari Architecture
   ============================================================ */

/* Primary CTA (White) — "Configure" style */
.primary-btn {
    display: inline-block;
    background: #FFFFFF;
    color: #000000;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    letter-spacing: 1.28px;
    padding: 12px 10px;
    border: 1px solid #000000;
    border-radius: 2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}
.primary-btn:hover {
    background: #181818;
    color: #FFFFFF;
    border-color: #181818;
}

/* Subscribe CTA (Red) — Highest priority action */
.subscribe-btn {
    display: inline-block;
    background: #DA291C;
    color: #FFFFFF;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    letter-spacing: 1.28px;
    padding: 12px 10px;
    border: none;
    border-radius: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease;
}
.subscribe-btn:hover {
    background: #B01E0A;
}

/* Ghost Button — For dark backgrounds */
.ghost-btn {
    display: inline-block;
    background: transparent;
    color: #FFFFFF;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    letter-spacing: 1.28px;
    padding: 12px 10px;
    border: 1px solid #FFFFFF;
    border-radius: 2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}
.ghost-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   Product Cards (Editorial Card style)
   ============================================================ */
.product-card {
    transition: all 0.3s ease;
}
.product-card .product-image-container {
    overflow: hidden;
    position: relative;
}
.product-card .product-image-container img {
    transition: all 0.5s ease;
}
.product-card:hover .product-image-container img {
    transform: scale(1.05);
}

/* ============================================================
   Filter Buttons
   ============================================================ */
.filter-btn { transition: all 0.3s ease; }
.filter-btn.active {
    color: #181818;
    border-bottom-color: #DA291C !important;
    font-weight: 700;
}

/* ============================================================
   Modals
   ============================================================ */
#quote-modal:not(.hidden),
#product-modal:not(.hidden) {
    display: flex !important;
}

.shadow-modal {
    box-shadow: 0 2px 8px rgba(153, 153, 153, 0.3);
}

/* ============================================================
   Form Inputs
   ============================================================ */
input:focus, textarea:focus {
    border-color: #DA291C !important;
    outline: none;
}

/* ============================================================
   Text Links
   ============================================================ */
.text-link {
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.text-link:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.text-linkHover {
    color: #181818;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.text-linkHover:hover {
    color: #3860BE;
    text-decoration: none;
}

/* ============================================================
   Image Placeholder
   ============================================================ */
.image-placeholder {
    background: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   Overlay
   ============================================================ */
.overlay-dark {
    background: hsla(0, 0%, 7%, 0.8);
}

/* ============================================================
   Poster Carousel
   ============================================================ */
.poster-dot.active-dot {
    background: #FFFFFF !important;
}