/* ═══════════════════════════════════════════════════════════
   SASHOME — CSS ADDITIONS
   Add this file as: assets/css/additions.css
   Include in header.php AFTER style.css and dynamic.css
═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   INTERIOR PROJECTS — Special Styling
───────────────────────────────────────────────────────────  */

/* Interior detail layout — same as product-detail */
.interior-detail {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(40px, 6vw, 88px);
    padding: 60px 0;
}

/* Interior badge */
.interior-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(201, 168, 76, 0.1);
    border: 1px solid rgba(201, 168, 76, 0.3);
    color: var(--g2);
    padding: 6px 16px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

/* Book Your Design button — replaces price */
.interior-book-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--g2);
    color: var(--ink);
    padding: 16px 40px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 28px;
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.interior-book-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}
.interior-book-btn:hover::after { transform: translateX(100%); }
.interior-book-btn:hover {
    background: var(--g1);
    box-shadow: 0 0 40px rgba(201,168,76,0.3);
    color: var(--ink);
}

/* Interior booking form */
.interior-form {
    border-color: rgba(201, 168, 76, 0.2);
    background: rgba(201, 168, 76, 0.03);
}
.interior-book-submit {
    background: #25D366;
    clip-path: none;
}
.interior-book-submit:hover { background: #1ea855; }

/* Interior price tag (in cards) */
.interior-price-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--g2);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: 1px solid rgba(201,168,76,0.3);
    padding: 6px 14px;
    transition: all 0.2s;
}
.interior-price-tag i { font-size: 12px; }

/* Interior card overlay */
.interior-img { aspect-ratio: 16/10 !important; }

.interior-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.2) 60%, transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20px;
    opacity: 0;
    transition: opacity 0.35s;
    z-index: 3;
}
.interior-card:hover .interior-card-overlay { opacity: 1; }

.interior-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--g2);
    color: var(--ink);
    padding: 10px 22px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
}

/* Interior grid — wider cards */
.interior-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* Interior hero CTA banner */
.interior-hero-cta {
    background: linear-gradient(135deg, rgba(201,168,76,0.07), rgba(201,168,76,0.03));
    border-bottom: 1px solid rgba(201,168,76,0.12);
    padding: clamp(28px,4vw,48px) 0;
}
.interior-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}
.interior-cta-text h2 {
    font-size: clamp(22px,3vw,36px);
    font-weight: 200;
    color: var(--snow);
    margin-bottom: 8px;
}
.interior-cta-text p {
    color: var(--ash);
    font-size: 14px;
    font-weight: 300;
    max-width: 500px;
    line-height: 1.75;
}

/* Interior bottom CTA */
.interior-bottom-cta {
    text-align: center;
    margin-top: 80px;
    padding: clamp(48px,6vw,80px) 40px;
    border: 1px solid rgba(201,168,76,0.12);
    background: rgba(201,168,76,0.03);
    position: relative;
}
.interior-bottom-cta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--g2), transparent);
    opacity: 0.4;
}
.interior-bottom-cta h3 {
    font-size: clamp(22px,3.5vw,38px);
    font-weight: 200;
    margin: 10px 0 14px;
}
.interior-bottom-cta p {
    color: var(--ash);
    font-size: 14px;
    font-weight: 300;
    max-width: 460px;
    margin: 0 auto 32px;
    line-height: 1.85;
}
.interior-bottom-cta .btn-primary { margin: 0 auto; }

/* Product features grid */
.product-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(201,168,76,0.08);
    margin-top: 24px;
}
.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: var(--carbon);
    transition: background 0.2s;
}
.feature-item:hover { background: var(--graphite); }
.feature-item i {
    color: var(--g2);
    font-size: 16px;
    width: 20px;
    flex-shrink: 0;
    opacity: 0.8;
}
.feature-item strong {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--pearl);
    letter-spacing: 0.05em;
}
.feature-item span {
    display: block;
    font-size: 11px;
    color: var(--ash);
    margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────
   SOCIAL MEDIA — Instagram & Facebook in settings
   (already in footer via facebook_url / instagram_url settings)
   These styles ensure icons look correct
───────────────────────────────────────────────────────────  */
.social-link,
.footer-social a {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(201,168,76,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ash);
    font-size: 14px;
    text-decoration: none;
    transition: all 0.18s;
}
.social-link:hover,
.footer-social a:hover { border-color: var(--g2); color: var(--g2); background: var(--ga); }

/* Platform-specific hover colors */
.social-link.fb:hover,
.footer-social a.fb:hover { border-color: #1877f2; color: #1877f2; background: rgba(24,119,242,0.08); }
.social-link.ig:hover,
.footer-social a.ig:hover { border-color: #e4405f; color: #e4405f; background: rgba(228,64,95,0.08); }
.social-link.wa:hover,
.footer-social a.wa:hover { border-color: #25D366; color: #25D366; background: rgba(37,211,102,0.08); }

/* ─────────────────────────────────────────────────────────
   FILTER BAR
───────────────────────────────────────────────────────────  */
.filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 36px;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(201,168,76,0.07);
}
.filter-count {
    color: var(--ash);
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.06em;
}
.filter-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--ash);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.filter-select {
    background: var(--carbon);
    border: 1px solid rgba(201,168,76,0.18);
    color: var(--snow);
    padding: 8px 14px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.18s;
    appearance: none;
    padding-left: 32px;
}
.filter-select:focus { border-color: var(--g2); }

/* ─────────────────────────────────────────────────────────
   MOBILE FIXES — Comprehensive responsive improvements
───────────────────────────────────────────────────────────  */

/* ── Tablet (≤ 1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
    /* Interior detail becomes single column */
    .interior-detail {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 40px 0;
    }
    .interior-cta-inner {
        flex-direction: column;
        text-align: center;
    }
    .interior-cta-text p { margin: 0 auto; }
    .product-features { grid-template-columns: 1fr 1fr; }

    /* Category page padding */
    .category-page .container { padding: 40px 20px; }

    /* Product detail */
    .product-detail { padding: 36px 0; gap: 28px; }
}

/* ── Mobile (≤ 768px) ───────────────────────────────────── */
@media (max-width: 768px) {

    /* Hero — fix font and padding */
    .hero { min-height: 100svh; }
    .hero-content { padding: 0 20px; }
    .hero h1 { font-size: clamp(36px, 10vw, 52px); line-height: 1.0; }
    .hero p { font-size: 14px; margin-bottom: 36px; max-width: 100%; }
    .hero-tag { font-size: 9px; letter-spacing: 0.35em; margin-bottom: 20px; }
    .hero-tag::before, .hero-tag::after { width: 20px; }
    .hero-btns { gap: 10px; width: 100%; }
    .btn-primary, .btn-outline {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
        clip-path: none;
    }
    .hero-controls { bottom: 24px; gap: 12px; }
    .hero-scroll { display: none; }
    .hero::before, .hero::after { display: none; }

    /* Navbar */
    .navbar { height: 60px; padding: 0 16px; }
    .navbar.scrolled { height: 52px; }
    .nav-logo img { height: 32px; }
    .cart-btn { padding: 8px 14px; font-size: 10px; clip-path: none; }
    .cart-btn i { display: none; }

    /* Section spacing */
    .section { padding: clamp(48px,8vw,80px) 0; }
    .section-header { margin-bottom: 36px; }
    .section-title { font-size: clamp(24px,6vw,38px); }

    /* Categories grid */
    .categories-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 180px;
        gap: 2px;
    }
    .category-card:nth-child(1) {
        grid-column: 1 / -1;
        min-height: 220px;
    }
    .category-card:nth-child(n+2) {
        grid-column: span 1;
        min-height: 180px;
    }
    .category-name { font-size: 14px; }

    /* Products grid */
    .products-grid { grid-template-columns: repeat(2,1fr); gap: 2px; }
    .interior-grid { grid-template-columns: 1fr; }
    .product-name { font-size: 14px; }
    .price-main { font-size: 16px; }
    .product-info { padding: 14px 14px 16px; }
    .product-category-tag { font-size: 8.5px; }

    /* About strip */
    .about-strip { padding: clamp(50px,8vw,80px) 0; }
    .about-grid { grid-template-columns: 1fr; gap: 32px; }
    .about-image { display: none; }
    .about-text h2 { font-size: clamp(24px,6vw,36px); }
    .about-stats { grid-template-columns: repeat(3,1fr); gap: 1px; }
    .stat-num { font-size: clamp(24px,6vw,36px); }
    .stat-item { padding: 20px 8px; }
    .about-text .section-tag { justify-content: flex-start; }

    /* CTA section */
    .cta-section { padding: clamp(50px,8vw,80px) 0; }
    .cta-section p { margin-bottom: 32px; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-col h4 { margin-bottom: 14px; }
    footer { padding: clamp(40px,6vw,60px) 0 0; }

    /* Category page */
    .category-hero { height: 32vh; min-height: 240px; margin-top: 60px; }
    .category-hero-content h1 { font-size: clamp(24px,6vw,40px); }
    .filter-bar { gap: 10px; }

    /* Product detail */
    .product-detail, .interior-detail { grid-template-columns: 1fr; padding: 28px 0; }
    .gallery-thumbs { grid-template-columns: repeat(4,1fr); gap: 6px; }
    .product-detail-title { font-size: clamp(20px,5vw,32px); }
    .product-detail-price { font-size: 26px; }
    .order-form { padding: 20px; }
    .product-features { grid-template-columns: 1fr 1fr; }

    /* Interior */
    .interior-hero-cta { padding: 24px 0; }
    .interior-book-btn { clip-path: none; padding: 14px 28px; width: 100%; justify-content: center; }
    .interior-cta-inner { text-align: center; }
    .interior-bottom-cta { padding: 36px 20px; }

    /* Cart sidebar */
    .cart-sidebar { width: 100%; border-left: none; border-top: 1px solid rgba(201,168,76,0.12); }

    /* Drawer */
    .mobile-drawer { width: min(290px,88vw); }

    /* WhatsApp float */
    .whatsapp-float { width: 46px; height: 46px; font-size: 20px; bottom: 20px; right: 16px; }
    body.rtl .whatsapp-float { right: auto; left: 16px; }

    /* Alerts */
    .flash-message { padding: 12px 16px; font-size: 12px; }

    /* Pagination */
    .pagination { gap: 6px; margin-top: 36px; }
    .page-link { width: 36px; height: 36px; font-size: 13px; }
}


/* ── Fix: touch-friendly card size on mobile ────────────── */
@media (max-width: 480px) {
    .product-action-btn { padding: 14px 8px; font-size: 10px !important; }
    .product-img { aspect-ratio: 4/3; }
    .interior-img { aspect-ratio: 16/10; }
}