/*
Theme Name: Deeb Glass
Theme URI: https://techbook.com.eg
Author: TechBook
Author URI: https://techbook.com.eg
Description: Custom liquid-glass theme for Deeb Furniture — bilingual (AR/EN), light/dark, built for deebfurniture.com.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: deeb
*/

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #F1F1F3; direction: rtl; }
::selection { background: #F0B446; color: #201405; }
a { text-decoration: none; color: inherit; }
button { font: inherit; cursor: pointer; border: none; background: none; }
img { display: block; max-width: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.dfw { --bg:#F1F1F3; --surface:#ffffff; --surface-2:#E8E8EA; --text:#16161A; --text-muted:#6C6D74;
       --border:rgba(15,15,18,0.09); --accent:#F0B446; --accent-hi:#E8A227; --accent-ink:#191307; --accent-text:#A8620E;
       --shadow: 0 22px 44px -20px rgba(15,15,20,0.20);
       --glass-bg: rgba(255,255,255,0.32); --glass-bg-solid: rgba(255,255,255,0.6);
       --glass-border: rgba(255,255,255,0.85); --glass-shine: rgba(255,255,255,0.75); --glass-inset: rgba(255,255,255,0.8);
       --font-body: 'Cairo', sans-serif; --font-display: 'Cairo', sans-serif;
       font-family: var(--font-body); color: var(--text); background: var(--bg);
       transition: background .35s ease, color .35s ease; }
body.dfw.dark { --bg:#0B0C0E; --surface:#1A1B1F; --surface-2:#232428; --text:#F5F5F7; --text-muted:#9A9CA5;
            --border:rgba(255,255,255,0.10); --accent:#F0B446; --accent-hi:#FFC868; --accent-ink:#191307; --accent-text:#F0B446;
            --shadow: 0 22px 46px -18px rgba(0,0,0,0.65);
            --glass-bg: rgba(40,42,48,0.38); --glass-bg-solid: rgba(40,42,48,0.68);
            --glass-border: rgba(255,255,255,0.18); --glass-shine: rgba(255,255,255,0.15); --glass-inset: rgba(255,255,255,0.2); }
body.dfw.lang-en { --font-body: 'Plus Jakarta Sans', sans-serif; --font-display: 'Fraunces', serif; }

.kicker { font-size: 12.5px; letter-spacing: .16em; font-weight: 700; text-transform: uppercase; color: var(--accent-text); }
.h-disp { font-family: var(--font-display); }
.muted { color: var(--text-muted); }
.justify { text-align: justify; text-justify: inter-word; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px;
       padding: 15px 30px; font-weight: 700; font-size: 14.5px; letter-spacing: .01em; border: 1px solid transparent;
       transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn-gold { background: linear-gradient(135deg, rgba(255,255,255,.6), transparent 40%), linear-gradient(180deg, var(--accent-hi), var(--accent));
            color: var(--accent-ink); box-shadow: 0 14px 26px -14px rgba(15,15,20,.4), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -3px 6px rgba(0,0,0,.12); }
.btn-gold:hover { background: linear-gradient(135deg, rgba(255,255,255,.72), transparent 45%), linear-gradient(180deg, #ffd082, var(--accent-hi));
                   box-shadow: 0 18px 32px -12px rgba(15,15,20,.45), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -3px 6px rgba(0,0,0,.12); }
.btn-ghost { border-color: var(--glass-border); color: var(--text); background: linear-gradient(135deg, var(--glass-shine), transparent 55%); }
.btn-ghost:hover { border-color: var(--accent-text); color: var(--accent-text); }
.btn-sm { padding: 10px 18px; font-size: 13px; border-radius: 999px; }
.icon-btn { width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
            border: 1px solid rgba(255,255,255,0.16); background: linear-gradient(135deg, rgba(255,255,255,.2), transparent 55%), rgba(255,255,255,0.04);
            -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.14); color: #f4efe6; transition: all .2s ease; }
.icon-btn:hover { border-color: #F0B446; color: #F0B446; transform: translateY(-2px); }

.card { background: linear-gradient(135deg, var(--glass-shine), transparent 45%), var(--glass-bg);
        -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
        border: 1px solid var(--glass-border); border-radius: 20px; box-shadow: var(--shadow), inset 0 1px 0 var(--glass-inset); }
.section { padding: 60px 0; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.eyebrow-row { display:flex; align-items:center; gap:10px; }
.eyebrow-row .rule { width: 30px; height: 2px; background: var(--accent); border-radius: 2px; flex: none; }

.navlink { position: relative; font-weight: 600; font-size: 14.5px; color: #cfd3dc; padding: 6px 2px; transition: color .2s ease; }
.navlink:hover, .navlink.active { color: #ffffff; }
.navlink::after { content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: #F0B446;
                   transform: scaleX(0); transition: transform .25s ease; border-radius: 2px; }
.navlink:hover::after, .navlink.active::after { transform: scaleX(1); }

.hero-badge { display:inline-flex; align-items:center; gap:10px;
              background: linear-gradient(135deg, var(--glass-shine), transparent 50%), var(--glass-bg-solid);
              -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
              border:1px solid var(--glass-border); border-radius: 999px; padding: 8px 16px 8px 8px;
              box-shadow: var(--shadow), inset 0 1px 0 var(--glass-inset); }
.hero-badge .num { width:34px; height:34px; border-radius:999px;
                    background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.7), transparent 55%), var(--accent);
                    color: var(--accent-ink); box-shadow: inset 0 1px 2px rgba(255,255,255,.65), inset 0 -3px 5px rgba(0,0,0,.15);
                    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex:none; }

.collection-card { position: relative; overflow: hidden; border-radius: 22px; padding: 30px 24px; min-height: 200px;
                    display:flex; flex-direction:column; justify-content:flex-end; gap:10px; border:1px solid var(--glass-border);
                    -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
                    box-shadow: inset 0 1px 0 var(--glass-inset);
                    background: linear-gradient(180deg, rgba(240,180,70,.10), transparent 55%), linear-gradient(135deg, var(--glass-shine), transparent 45%), var(--glass-bg-solid);
                    transition: transform .3s ease, box-shadow .3s ease; }
.collection-card:hover { transform: translateY(-6px); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-inset); }
.collection-mark { position:absolute; top:24px; inset-inline-start:24px; font-family: var(--font-display); font-size: 54px; font-weight: 600;
                    opacity: .15; line-height: 1; }
body.dfw.dark .collection-mark{ opacity:.18; }

.project-card { border-radius: 20px; overflow: hidden; border: 1px solid var(--glass-border);
                 background: linear-gradient(135deg, var(--glass-shine), transparent 45%), var(--glass-bg-solid);
                 box-shadow: inset 0 1px 0 var(--glass-inset);
                 transition: transform .3s ease, box-shadow .3s ease; display:block; }
.project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-inset); }
.project-img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--surface-2); }
.project-img-wrap img { width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.project-card:hover .project-img-wrap img { transform: scale(1.06); }
.tag-pill { font-size: 11px; font-weight: 700; letter-spacing:.04em; padding: 5px 10px; border-radius: 999px;
            background: linear-gradient(135deg, var(--glass-shine), transparent 50%), var(--surface-2);
            color: var(--text-muted); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-inset); }

.tour-card { border-radius: 18px; border: 1px solid var(--glass-border);
             background: linear-gradient(135deg, var(--glass-shine), transparent 45%), var(--glass-bg-solid);
             box-shadow: inset 0 1px 0 var(--glass-inset); padding: 20px;
             display:flex; align-items:center; gap:16px; transition: all .25s ease; }
.tour-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-inset); }
.tour-ring { width: 54px; height:54px; border-radius:999px; flex:none; display:flex; align-items:center; justify-content:center;
             background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.6), transparent 55%), var(--glass-bg);
             -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
             color: var(--accent-text); border:1px solid var(--glass-border);
             box-shadow: inset 0 1px 2px var(--glass-inset); transition: transform .3s ease; }
.tour-card:hover .tour-ring { transform: scale(1.08) rotate(8deg); }

.stat-num { font-family: var(--font-display); font-size: 42px; font-weight: 700; color: var(--text); line-height:1; font-variant-numeric: tabular-nums; }

.quote-card { border-radius: 22px; border: 1px solid var(--glass-border);
              background: linear-gradient(135deg, var(--glass-shine), transparent 45%), var(--glass-bg);
              -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
              padding: 30px; box-shadow: var(--shadow), inset 0 1px 0 var(--glass-inset); }
.avatar { width: 46px; height:46px; border-radius:999px;
          background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.7), transparent 55%), var(--accent);
          color:var(--accent-ink); box-shadow: inset 0 1px 2px rgba(255,255,255,.65), inset 0 -3px 5px rgba(0,0,0,.15);
          display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex:none; }
.avatar-lg { width: 84px; height:84px; font-size: 26px; }

.why-icon { width: 50px; height:50px; border-radius:16px;
            background: radial-gradient(circle at 32% 28%, var(--glass-shine), transparent 55%), var(--glass-bg-solid);
            border:1px solid var(--glass-border); box-shadow: inset 0 1px 2px var(--glass-inset);
            display:flex; align-items:center; justify-content:center; color: var(--accent-text); flex:none; transition: transform .3s ease; }
.card:hover .why-icon { transform: scale(1.08) rotate(-4deg); }

.glass-chip { display:inline-flex; align-items:center; flex:none; padding: 7px 16px; border-radius:999px;
              font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
              background: linear-gradient(135deg, var(--glass-shine), transparent 55%), var(--glass-bg-solid);
              border: 1px solid var(--glass-border); color: var(--text); box-shadow: inset 0 1px 0 var(--glass-inset); }
.step-chip { text-transform: none; font-size: 13px; padding: 10px 18px 10px 10px; gap: 10px; }
.step-chip .n { width:24px; height:24px; border-radius:999px; background:var(--accent); color:var(--accent-ink);
                display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex:none; }

.marquee-track { display:flex; align-items:center; gap: 14px; animation: scroll 30s linear infinite; white-space: nowrap; width: max-content; }
body[dir="rtl"] .marquee-track { animation-direction: reverse; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.fab { position: fixed; bottom: 20px; z-index: 40; width: 54px; height:54px; border-radius:999px;
       background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.55), transparent 55%), #25D366;
       display:flex; align-items:center; justify-content:center;
       box-shadow: 0 16px 30px -10px rgba(37,211,102,.7), inset 0 1px 2px rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.15);
       transition: transform .25s ease; }
.fab:hover { transform: translateY(-3px) scale(1.05); }
body[dir="rtl"] .fab { left: 20px; right: auto; }
body[dir="ltr"] .fab { right: 20px; left: auto; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16,.8,.24,1), transform .7s cubic-bezier(.16,.8,.24,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
@keyframes heroFade { from { opacity:0; transform: translateY(16px);} to { opacity:1; transform:none; } }
.hero-anim { animation: heroFade .85s cubic-bezier(.16,.8,.24,1) both; }
.hero-anim.d2 { animation-delay: .1s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in-view, .hero-anim { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; }
}

.grid-why .card, .grid-collections .collection-card, .grid-projects .project-card, .grid-tours .tour-card,
.grid-diff .card, .grid-team .card, .grid-machines .card {
  opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease;
}
.reveal.in-view .grid-why .card,
.reveal.in-view .grid-collections .collection-card,
.reveal.in-view .grid-projects .project-card,
.reveal.in-view .grid-tours .tour-card,
.reveal.in-view .grid-diff .card,
.reveal.in-view .grid-team .card,
.reveal.in-view .grid-machines .card { opacity: 1; transform: translateY(0); }
.grid-why .card:nth-child(1), .grid-collections .collection-card:nth-child(1), .grid-projects .project-card:nth-child(1), .grid-tours .tour-card:nth-child(1), .grid-diff .card:nth-child(1), .grid-team .card:nth-child(1), .grid-machines .card:nth-child(1) { transition-delay: .03s; }
.grid-why .card:nth-child(2), .grid-collections .collection-card:nth-child(2), .grid-projects .project-card:nth-child(2), .grid-tours .tour-card:nth-child(2), .grid-diff .card:nth-child(2), .grid-team .card:nth-child(2), .grid-machines .card:nth-child(2) { transition-delay: .08s; }
.grid-why .card:nth-child(3), .grid-collections .collection-card:nth-child(3), .grid-projects .project-card:nth-child(3), .grid-tours .tour-card:nth-child(3), .grid-diff .card:nth-child(3), .grid-team .card:nth-child(3), .grid-machines .card:nth-child(3) { transition-delay: .13s; }
.grid-why .card:nth-child(4), .grid-collections .collection-card:nth-child(4), .grid-projects .project-card:nth-child(4), .grid-tours .tour-card:nth-child(4), .grid-diff .card:nth-child(4), .grid-team .card:nth-child(4) { transition-delay: .18s; }
.grid-why .card:nth-child(5), .grid-collections .collection-card:nth-child(5), .grid-projects .project-card:nth-child(5), .grid-tours .tour-card:nth-child(5), .grid-team .card:nth-child(5) { transition-delay: .23s; }
.grid-why .card:nth-child(6), .grid-collections .collection-card:nth-child(6), .grid-projects .project-card:nth-child(6), .grid-tours .tour-card:nth-child(6), .grid-team .card:nth-child(6) { transition-delay: .28s; }
.grid-collections .collection-card:nth-child(7) { transition-delay: .33s; }
.grid-team .card:nth-child(7) { transition-delay: .33s; }
.grid-team .card:nth-child(8) { transition-delay: .38s; }

.grid-hero { display:flex; flex-direction:column; gap:34px; }
.grid-about { display:flex; flex-direction:column; gap:34px; }
.grid-stats { display:grid; grid-template-columns: repeat(2,1fr); gap:20px 16px; }
.grid-why { display:grid; grid-template-columns: 1fr; gap:16px; }
.grid-collections { display:grid; grid-template-columns: 1fr; gap:16px; }
.grid-projects { display:grid; grid-template-columns: 1fr; gap:20px; }
.grid-tours { display:grid; grid-template-columns: 1fr; gap:14px; }
.grid-testi { display:grid; grid-template-columns: 1fr; gap:18px; }
.grid-footer { display:grid; grid-template-columns: 1fr; gap:32px; }
.grid-diff { display:grid; grid-template-columns: 1fr; gap:16px; }
.grid-team { display:grid; grid-template-columns: 1fr; gap:16px; }
.grid-machines { display:grid; grid-template-columns: 1fr; gap:16px; }
.cta-band-inner { display:flex; flex-direction:column; gap:24px; padding: 34px 24px; }
.cta-band-inner .cta-actions { display:flex; gap:12px; flex-wrap:wrap; }

.menu-btn { display: inline-flex; }
.mobile-nav-panel { display: none; flex-direction:column; gap:18px; padding:10px 20px 26px; border-top:1px solid rgba(255,255,255,.07); }
.mobile-nav-panel.open { display: flex; }
.hide-mobile { display: none !important; }

@media (min-width: 641px) {
  .grid-why { grid-template-columns: repeat(2,1fr); }
  .grid-collections { grid-template-columns: repeat(2,1fr); }
  .grid-projects { grid-template-columns: repeat(2,1fr); }
  .grid-tours { grid-template-columns: repeat(2,1fr); }
  .grid-testi { grid-template-columns: 1fr 1fr; }
  .grid-footer { grid-template-columns: 1fr 1fr; }
  .grid-diff { grid-template-columns: repeat(2,1fr); }
  .grid-team { grid-template-columns: repeat(2,1fr); }
  .grid-machines { grid-template-columns: repeat(3,1fr); }
}

@media (min-width: 901px) {
  .wrap { padding: 0 32px; }
  .section { padding: 96px 0; }
  .hide-mobile { display: inline-flex !important; }
  nav.hide-mobile { display: flex !important; }
  .menu-btn { display: none; }
  .mobile-nav-panel, .mobile-nav-panel.open { display: none !important; }
  .grid-hero { display:grid; grid-template-columns: 1.05fr .95fr; gap:56px; align-items:center; }
  .grid-about { display:grid; grid-template-columns: .85fr 1.15fr; gap:64px; align-items:center; }
  .grid-stats { grid-template-columns: repeat(4,1fr); gap:24px; }
  .grid-why { grid-template-columns: repeat(3,1fr); gap:22px; }
  .grid-collections { grid-template-columns: repeat(4,1fr); gap:22px; }
  .grid-tours { grid-template-columns: repeat(3,1fr); gap:18px; }
  .grid-footer { grid-template-columns: 1.3fr .8fr .8fr 1.1fr; gap:40px; }
  .grid-diff { grid-template-columns: repeat(4,1fr); gap:22px; }
  .grid-team { grid-template-columns: repeat(4,1fr); gap:20px; }
  .cta-band-inner { flex-direction:row; align-items:center; justify-content:space-between; padding: 56px; }
  .stat-num { font-size: 46px; }
}
@media (min-width: 1024px) {
  .grid-projects { grid-template-columns: repeat(3,1fr); gap:24px; }
}