/* ═══════════════════════════════════════
   MERHAB — GLOBAL ENHANCEMENTS v2
   Nav Lines · Proportional · Loader
   ═══════════════════════════════════════ */

/* ── ANTI HORIZONTAL SCROLL ── */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}
*, *::before, *::after {
    box-sizing: border-box !important;
}
body {
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    width: 100%;
    position: relative;
}
img { max-width: 100%; height: auto; }
section, .container, footer, nav, .hero-inner, .oo-hero-inner,
.brand-hero, .travel-hero, .pk-hero { 
    max-width: 100vw !important;
    overflow-x: hidden !important;
}
/* Hero clip-path and pseudo elements - contain them */
.oo-hero::before, .pk-hero::before, .travel-hero::after,
.brand-hero::before, .hero-ornament, .oo-hero-visual, .hero-visual {
    max-width: 100% !important;
}

/* ── NAVBAR LINE SEPARATOR STYLE ── */
.nav-links {
    gap: 0 !important;
    align-items: stretch !important;
}
.nav-links li {
    display: flex;
    align-items: center;
}
/* Vertical line separator between items */
.nav-links li + li::before {
    content: '';
    display: block;
    width: 1px;
    height: 16px;
    background: rgba(255,255,255,0.12);
    margin: 0 28px;
    flex-shrink: 0;
}
/* No line before CTA button and cart */
.nav-links li:has(.nav-cta)::before,
.nav-links li:has(.nav-cart)::before {
    display: none;
}

.nav-links a {
    padding: 6px 0 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.18em !important;
}
/* Remove underline animation - clean line style */
.nav-links a::after {
    bottom: 0px !important;
    height: 1.5px !important;
}
/* Active state - subtle glow */
.nav-links a.active {
    color: var(--gold-light, #D4AF37) !important;
    text-shadow: 0 0 20px rgba(184,150,64,0.2);
}

/* CTA button - more spacing from lines */
.nav-links li:has(.nav-cta) {
    margin-left: 12px;
}
.nav-links li:has(.nav-cart) {
    margin-left: 8px;
    margin-right: 8px;
}

/* Fallback for browsers without :has() */
@supports not (selector(:has(*))) {
    .nav-links li + li::before {
        content: '';
        display: block;
        width: 1px;
        height: 16px;
        background: rgba(255,255,255,0.12);
        margin: 0 24px;
    }
}

/* ── LOADING SCREEN ── */
.merhab-loader {
    position: fixed; inset: 0; z-index: 99999;
    background: #0A0A0A;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.merhab-loader.hide {
    opacity: 0; visibility: hidden; pointer-events: none;
}
.merhab-loader-logo {
    width: 60px; height: 60px;
    animation: loaderPulse 1.5s ease-in-out infinite;
}
.merhab-loader-text {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem; font-weight: 600;
    letter-spacing: 0.4em; color: #B89640;
    margin-top: 20px;
    animation: loaderFade 1.5s ease-in-out infinite;
}
.merhab-loader-bar {
    width: 120px; height: 2px;
    background: rgba(184,150,64,0.15);
    margin-top: 24px; border-radius: 2px;
    overflow: hidden;
}
.merhab-loader-bar::after {
    content: ''; display: block;
    width: 40%; height: 100%;
    background: #B89640;
    border-radius: 2px;
    animation: loaderSlide 1.2s ease-in-out infinite;
}
@keyframes loaderPulse { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.08);opacity:1} }
@keyframes loaderFade { 0%,100%{opacity:.6} 50%{opacity:1} }
@keyframes loaderSlide { 0%{transform:translateX(-100%)} 100%{transform:translateX(350%)} }

/* ── PAGE TRANSITION ── */
.page-transition { animation: pageEnter 0.5s ease-out; }
@keyframes pageEnter { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ── MICRO-INTERACTIONS ── */
/* Button press */
.btn-gold:active, .btn-outline:active, .btn-add-cart:active,
.btn-add-cart-modal:active, .product-order-btn:active, .nav-cta:active {
    transform: scale(0.97) !important;
    transition-duration: 0.1s !important;
}
/* Stagger reveal */
.product-grid > *:nth-child(1) { transition-delay: 0s !important; }
.product-grid > *:nth-child(2) { transition-delay: 0.08s !important; }
.product-grid > *:nth-child(3) { transition-delay: 0.16s !important; }
.product-grid > *:nth-child(4) { transition-delay: 0.24s !important; }
.product-grid > *:nth-child(5) { transition-delay: 0.32s !important; }
.product-grid > *:nth-child(6) { transition-delay: 0.40s !important; }

/* Lazy image fade */
img[loading="lazy"] { opacity: 0; transition: opacity 0.5s ease; }
img[loading="lazy"].loaded, img.loaded { opacity: 1; }

/* Focus accessibility */
input:focus, select:focus, textarea:focus, button:focus-visible {
    outline: 2px solid rgba(184,150,64,0.4);
    outline-offset: 2px;
}

/* Back to top */
.back-to-top {
    position: fixed; bottom: 28px; left: 28px; z-index: 799;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(26,26,26,0.8); color: #B89640;
    border: 1px solid rgba(184,150,64,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; cursor: pointer;
    opacity: 0; transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.25,1,0.5,1);
    backdrop-filter: blur(10px); text-decoration: none;
}
.back-to-top.show { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: #B89640; color: #fff; transform: translateY(-3px); }

/* ── PROPORTIONAL RESPONSIVE ── */

/* Container - always fits */
.container {
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
}

/* Large Desktop 1440+ */
@media (min-width: 1440px) {
    .container { max-width: 1320px !important; }
}

/* Desktop */
@media (max-width: 1280px) {
    .container { padding: 0 40px !important; }
    nav { padding: 0 40px !important; }
    .nav-links li + li::before { margin: 0 20px; }
}

/* Tablet landscape */
@media (max-width: 1024px) {
    .container { padding: 0 28px !important; }
    nav { padding: 0 28px !important; }
    
    /* Hide hero visual/ornament to prevent overflow */
    .oo-hero-visual, .hero-visual, .hero-ornament { display: none !important; }
    .oo-hero-content, .travel-hero-content, .pk-hero-content { 
        grid-template-columns: 1fr !important; 
    }
    .oo-hero::before, .pk-hero::before, .travel-hero::after {
        display: none !important;
    }
    
    .quality-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
    .craft-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
    .about-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
    .page-links-grid { grid-template-columns: 1fr !important; }
    
    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
    
    /* Modal responsive */
    .modal { grid-template-columns: 1fr !important; }
}

/* Tablet portrait + large phone */
@media (max-width: 900px) {
    .nav-links { display: none !important; }
    .hamburger { display: flex !important; }
    
    .services-grid { grid-template-columns: 1fr !important; }
    .collection-grid { grid-template-columns: 1fr !important; }
}

/* Tablet portrait */
@media (max-width: 768px) {
    nav { padding: 0 16px !important; height: 64px !important; }
    nav.scrolled { height: 58px !important; }
    .nav-brand-logo { height: 34px !important; }
    nav.scrolled .nav-brand-logo { height: 30px !important; }
    .nav-brand-text { font-size: 1.05rem !important; letter-spacing: 0.2em !important; }
    
    .container { padding: 0 20px !important; }
    
    /* Font proportional scaling */
    .page-title { font-size: clamp(1.8rem, 6vw, 2.6rem) !important; }
    .section-title { font-size: clamp(1.6rem, 5vw, 2.4rem) !important; }
    .page-subtitle, .section-desc { font-size: 0.92rem !important; }
    .section-label { font-size: 0.62rem !important; }
    
    /* Hero stats - stay horizontal */
    .hero-stats { 
        flex-direction: row !important; 
        gap: 20px !important;
        flex-wrap: wrap !important;
    }
    .hero-stat-num { font-size: 1.5rem !important; }
    .hero-stat-label { font-size: 0.6rem !important; }
    
    /* Buttons full width on mobile */
    .hero-actions { flex-direction: column !important; }
    .btn-gold, .btn-outline {
        padding: 13px 28px !important;
        font-size: 0.68rem !important;
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Products */
    .product-grid, .package-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
        gap: 18px !important;
    }
    .product-image-wrap, .product-img, .package-img { height: 240px !important; }
    
    /* Categories 2 columns */
    .categories-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .category-card { padding: 24px 16px !important; }
    .category-name { font-size: 1.1rem !important; }
    .category-icon { width: 48px !important; height: 48px !important; }
    
    /* Quality */
    .quality-visual { height: 360px !important; padding: 24px !important; }
    .quality-seal-circle { width: 130px !important; height: 130px !important; }
    
    /* Why grid */
    .why-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
    .why-card { padding: 24px 16px !important; }
    
    /* Testimoni */
    .testi-grid { grid-template-columns: 1fr !important; }
    .testi-card { padding: 24px !important; }
    
    /* CTA */
    .order-cta-inner, .cta-inner { padding: 36px 20px !important; }
    
    /* Footer */
    .footer-brand { font-size: 1.2rem !important; }
    .footer-brand-wrap img { height: 34px !important; }
    
    /* Page links */
    .page-link-card { padding: 20px 24px !important; gap: 16px !important; }
    .plc-icon { width: 48px !important; height: 48px !important; font-size: 1rem !important; }
    .plc-title { font-size: 1.2rem !important; }
    .plc-arrow { display: none !important; }
    
    /* WA Float */
    .wa-float { padding: 11px 18px !important; font-size: 0.72rem !important; bottom: 18px !important; right: 14px !important; }
    .back-to-top { left: 14px !important; bottom: 18px !important; width: 38px !important; height: 38px !important; }
    
    /* Gallery */
    .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    
    /* Marquee */
    .marquee-strip { padding: 16px 0 !important; }
    .marquee-item { font-size: 0.85rem !important; gap: 12px !important; }
    
    /* Heritage/Stats strip */
    .heritage-inner { justify-content: center !important; gap: 20px !important; }
    .heritage-value { font-size: 1.6rem !important; }
    .heritage-label { font-size: 0.6rem !important; max-width: 100px !important; }
    
    /* Process steps */
    .process-steps { grid-template-columns: repeat(2, 1fr) !important; gap: 32px 16px !important; }
    .process-timeline::before { display: none !important; }
    .process-circle { width: 64px !important; height: 64px !important; font-size: 1.3rem !important; }
    
    /* Fabric grid */
    .fabric-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* Phone */
@media (max-width: 480px) {
    nav { padding: 0 12px !important; }
    .nav-brand-text { font-size: 0.9rem !important; letter-spacing: 0.15em !important; }
    .nav-brand-logo { height: 28px !important; }
    .nav-brand { gap: 10px !important; }
    
    .container { padding: 0 16px !important; }
    
    .page-title { font-size: clamp(1.6rem, 7vw, 2rem) !important; }
    .section-title { font-size: clamp(1.5rem, 6vw, 1.8rem) !important; }
    .badge-arab, .badge-line { font-size: 0.52rem !important; padding: 6px 12px !important; }
    
    /* Stats compact */
    .hero-stats { gap: 16px !important; }
    .hero-stat-num { font-size: 1.3rem !important; }
    
    /* Cards single column */
    .product-grid, .package-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .product-image-wrap, .product-img, .package-img { height: 200px !important; }
    .product-details, .product-info, .package-info { padding: 18px !important; }
    .product-name-oo, .product-name, .package-name { font-size: 1.2rem !important; }
    .product-price-oo, .product-price, .package-price { font-size: 1.15rem !important; }
    
    /* Categories single */
    .categories-grid { grid-template-columns: 1fr !important; }
    
    /* Why single */
    .why-grid { grid-template-columns: 1fr !important; }
    
    /* Gallery single */
    .gallery-grid { grid-template-columns: 1fr !important; }
    
    /* Footer */
    .footer-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .footer-bottom { flex-direction: column !important; gap: 8px !important; text-align: center !important; }
    
    /* Modal */
    .modal-details { padding: 20px !important; }
    .modal-name { font-size: 1.3rem !important; }
    .measure-grid { grid-template-columns: 1fr !important; }
    .opt-pill { padding: 6px 12px !important; font-size: 0.7rem !important; }
    .carousel { min-height: 220px !important; }
    .modal-gallery { min-height: 220px !important; }
    
    /* Mobile nav */
    .mobile-nav a { font-size: 1.3rem !important; }
    
    /* Process single column */
    .process-steps { grid-template-columns: 1fr !important; }
    
    /* Services */
    .service-card { padding: 28px 20px !important; }
    .service-number { font-size: 2.5rem !important; }
    .service-title { font-size: 1.25rem !important; }
    
    /* Fabric */
    .fabric-grid { grid-template-columns: repeat(3, 1fr) !important; }
    
    /* Craft */
    .craft-visual { height: 300px !important; }
    .craft-item { grid-template-columns: 48px 1fr !important; gap: 16px !important; }
    .craft-num { font-size: 1.8rem !important; }
}

/* Very small phones */
@media (max-width: 360px) {
    .nav-brand-text { font-size: 0.8rem !important; }
    .nav-brand-logo { height: 24px !important; }
    .container { padding: 0 12px !important; }
    .hero-stats { flex-direction: column !important; gap: 12px !important; }
}

/* iPhone safe area */
@supports (padding-top: env(safe-area-inset-top)) {
    nav { padding-top: env(safe-area-inset-top) !important; }
    .wa-float { bottom: calc(18px + env(safe-area-inset-bottom)) !important; }
    .back-to-top { bottom: calc(18px + env(safe-area-inset-bottom)) !important; }
}

/* ── TESTIMONI IMAGE SLIDER ── */
.testi-slider{position:relative;overflow:hidden}
.testi-track{display:flex;transition:transform .5s cubic-bezier(.25,1,.5,1);gap:20px}
.testi-slide{min-width:100%;max-width:100%;flex-shrink:0}
@media(min-width:768px){.testi-slide{min-width:calc(50% - 10px);max-width:calc(50% - 10px)}}
@media(min-width:1100px){.testi-slide{min-width:calc(33.333% - 14px);max-width:calc(33.333% - 14px)}}
.testi-slide img{width:100%;border-radius:10px;display:block;border:1px solid var(--border-light,#F0EDE7);aspect-ratio:4/5;object-fit:cover}
.testi-controls{display:flex;justify-content:center;gap:12px;margin-top:28px}
.testi-arr{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--border,#E8E4DD);background:var(--bg-white,#fff);color:var(--text-main,#1A1A1A);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;font-size:.85rem}
.testi-arr:hover{background:var(--gold,#B89640);color:#fff;border-color:var(--gold,#B89640)}
.testi-dots{display:flex;align-items:center;gap:6px}
.testi-dot{width:8px;height:8px;border-radius:50%;background:var(--border,#E8E4DD);cursor:pointer;transition:all .3s}
.testi-dot.active{background:var(--gold,#B89640);width:24px;border-radius:4px}

/* ── PROMO BANNER SLIDER ── */
.promo-section{background:var(--bg-warm,#F6F4EF);padding:0;overflow:hidden;border-bottom:1px solid var(--border-light,#F0EDE7)}
.promo-slider{position:relative;overflow:hidden}
.promo-track{display:flex;transition:transform .6s cubic-bezier(.25,1,.5,1)}
.promo-slide{min-width:100%;flex-shrink:0;position:relative}
.promo-slide img{width:100%;height:clamp(200px,30vw,400px);object-fit:cover;display:block}
.promo-slide-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.3);color:#fff;text-align:center;padding:40px}
.promo-slide-text h3{font-family:'Cormorant Garamond',serif;font-size:clamp(1.5rem,4vw,3rem);font-weight:600;margin-bottom:12px}
.promo-slide-text p{font-size:clamp(.85rem,1.5vw,1.1rem);max-width:500px;opacity:.9}
.promo-nav{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5}
.promo-nav-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;border:none;transition:all .3s}
.promo-nav-dot.active{background:#fff}

/* ── PRINT ── */
@media print {
    nav, .wa-float, .back-to-top, .mobile-nav, .merhab-loader { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; }
}