/* ===== بيتزا بيكر - طبقة التجميل (تُحمَّل بعد motion.css) =====
   كل شي هنا فوق الستايل القديم؛ احذف الملف وسطر الربط بـ index.html لو بدك ترجع للشكل السابق. */
:root { --disp: "Cairo", "Tajawal", "Segoe UI", Tahoma, sans-serif; --gold: #ffc61a; }

/* 1) الخطوط: Cairo للعناوين والأسعار، Tajawal للنص */
.hero h1, .sec-title, .card h3, .price, .total, .info h2, .sheet-head h2, .itext, .cart-bar, .reorder p, .gal h2, .rvs h2 { font-family: var(--disp); }
.hero h1 { font-weight: 900; letter-spacing: -.5px; text-shadow: 0 6px 34px rgba(255,160,0,.28); }
.sec-title { font-weight: 900; }
.card h3 { font-weight: 800; letter-spacing: 0; }

/* 8) خلفية بعمق: توهّج دافئ + حبيبات خفيفة بدل الأسود المسطح */
html { background: #101010; }
body { background: transparent; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 88% -4%, rgba(255,170,0,.13), transparent 62%),
    radial-gradient(700px 520px at -5% 48%, rgba(214,40,40,.08), transparent 66%),
    radial-gradient(800px 600px at 105% 100%, rgba(255,198,26,.07), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .8 0 0 0 0 .3 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 0%, rgba(60,44,8,.85) 0%, rgba(16,16,16,0) 72%); }
.hero::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 60px; background: linear-gradient(to bottom, transparent, #101010); pointer-events: none; }
.hero-pizza { isolation: isolate; }
.hero-pizza::before { content: ""; position: absolute; z-index: -1; inset: -18% -34%; background: radial-gradient(circle, rgba(255,170,0,.30), rgba(255,120,0,.08) 45%, transparent 66%); filter: blur(8px); }
.btn.red { background: linear-gradient(180deg, #e63535, #c01f1f); box-shadow: 0 8px 22px rgba(214,40,40,.35); }
.btn.yellow { background: linear-gradient(180deg, #ffd23d, #ffb400); box-shadow: 0 8px 22px rgba(255,180,0,.28); }

/* 5) شريط الأقسام: زجاجي + مؤشر أصفر بينزلق */
.tabs { background: rgba(16,16,16,.78); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid rgba(255,198,26,.14); }
#tabs { position: relative; }
.tab { position: relative; z-index: 1; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); font-family: var(--disp); font-weight: 700; transition: color .25s; }
.tab.on { background: transparent; border-color: transparent; color: #151515; }
.tabind { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 0; pointer-events: none; border-radius: 99px; background: linear-gradient(180deg, #ffd23d, #ffb400); box-shadow: 0 5px 16px rgba(255,180,0,.38); transition: transform .38s cubic-bezier(.3,1.2,.4,1), width .38s cubic-bezier(.3,1.2,.4,1), height .2s; }
.tabind.first { transition: none; }

/* العناوين */
.sec-title { background: linear-gradient(270deg, rgba(34,34,34,.9), rgba(16,16,16,0)); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }

/* 2) بطاقات أفخم */
.card { position: relative; border-radius: 26px; border: 1px solid rgba(255,198,26,.16); background: linear-gradient(180deg, #232323 0%, #171717 100%); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 30px rgba(0,0,0,.45); }
.card .pw, .card .photo { border-radius: 25px 25px 0 0; }
.card .photo { filter: saturate(1.1) contrast(1.05) brightness(1.02); transition: opacity .5s; }
/* 4) توحيد الصور: تدرج دافئ + فينيت + اندماج مع البطاقة من تحت */
.pw::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, #1b1b1b 0%, rgba(27,27,27,0) 36%), radial-gradient(120% 95% at 50% 42%, transparent 58%, rgba(0,0,0,.38) 100%), linear-gradient(135deg, rgba(255,150,0,.10), transparent 45%); }
.price { background: var(--gold); color: #151515; padding: .1rem .95rem; border-radius: 99px; font-size: 1.3rem; box-shadow: 0 5px 16px rgba(255,198,26,.28); }
.size { background: #262626; border-color: rgba(255,255,255,.06); transition: border-color .2s, box-shadow .2s, background .2s; }
.size.on { box-shadow: 0 0 0 4px rgba(255,198,26,.14); }
.qty button { box-shadow: 0 4px 12px rgba(255,198,26,.25); }
.add { background: linear-gradient(180deg, #e63535, #c01f1f); box-shadow: 0 8px 20px rgba(214,40,40,.32), 0 1px 0 rgba(255,255,255,.25) inset; font-family: var(--disp); }
.card.sold .price { background: #3a3a3a; color: #aaa; box-shadow: none; }

/* 3) شارات الأصناف */
.bdg { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 6; display: flex; gap: .35rem; flex-wrap: wrap; max-width: 78%; pointer-events: none; }
.bdg i { font-style: normal; font-weight: 800; font-size: .82rem; line-height: 1.5; padding: .12rem .7rem; border-radius: 99px; box-shadow: 0 4px 12px rgba(0,0,0,.45); font-family: var(--disp); }
.b-best { background: linear-gradient(90deg, #ff8a00, #ff4d00); color: #fff; }
.b-new { background: #46d36d; color: #06260f; }
.b-hot { background: #d62828; color: #fff; }
.b-sale { background: var(--gold); color: #151515; }

/* 7) هياكل التحميل (Skeleton) */
@keyframes bShimmer { to { background-position: -200% 0; } }
.skg { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; padding-top: 1.6rem; }
.sk, .pw.ld { background: linear-gradient(110deg, #1c1c1c 30%, #2a2a2a 45%, #1c1c1c 60%); background-size: 200% 100%; animation: bShimmer 1.3s linear infinite; }
.sk { height: 380px; border-radius: 26px; }
.pw.ld .photo { opacity: 0; }

/* 6) السلة: ورقة سفلية */
.overlay { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); background: rgba(0,0,0,.6); }
.overlay.open { animation: ovIn .25s ease-out; }
.overlay.open .sheet { animation: sheetUp .42s cubic-bezier(.2,.9,.25,1); }
@keyframes ovIn { from { opacity: 0; } }
@keyframes sheetUp { from { transform: translateY(100%); } }
.sheet { border-radius: 30px 30px 0 0; background: linear-gradient(180deg, #202020, #141414); border-top: 1px solid rgba(255,198,26,.25); box-shadow: 0 -20px 60px rgba(0,0,0,.6); overscroll-behavior: contain; }
.sheet.dragging { transition: none; animation: none; }
.grab { width: 48px; height: 5px; border-radius: 9px; background: #4a4a4a; margin: -.35rem auto .9rem; }
.grab-zone { touch-action: none; }
.sheet-head { touch-action: none; }
.cart-bar { background: linear-gradient(180deg, #ffd23d, #ffb400); box-shadow: 0 12px 30px rgba(255,180,0,.35), 0 1px 0 rgba(255,255,255,.35) inset; }

/* معلومات + قسم الصور + آراء الزبائن */
.info .box { background: linear-gradient(180deg, #202020, #171717); border-color: rgba(255,198,26,.14); }
.gal, .rvs { max-width: 1100px; margin: 2rem auto 0; padding-inline: 1rem; }
.gal h2, .rvs h2 { font-size: 2rem; font-weight: 900; color: var(--gold); border-inline-start: 6px solid var(--red); padding-inline-start: 1rem; margin-bottom: 1rem; }
.strip { display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x proximity; padding: .4rem .2rem 1rem; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.gi { flex: none; width: 128px; text-align: center; scroll-snap-align: start; background: none; border: 0; color: #fff; }
.gi img { display: block; width: 128px; height: 128px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,198,26,.55); box-shadow: 0 10px 24px rgba(0,0,0,.5), 0 0 0 6px rgba(255,198,26,.08); background: #222; }
.gi span { display: block; margin-top: .55rem; font-size: .92rem; font-weight: 700; line-height: 1.3; font-family: var(--disp); }
.rvw { flex: none; width: min(78vw, 300px); scroll-snap-align: start; background: linear-gradient(180deg, #232323, #171717); border: 1px solid rgba(255,198,26,.16); border-radius: 22px; padding: 1rem 1.1rem; box-shadow: 0 10px 26px rgba(0,0,0,.4); }
.rvw .st5 { color: var(--gold); font-size: 1.25rem; letter-spacing: 2px; }
.rvw .st5 s { text-decoration: none; color: #4a4a4a; }
.rvw p { color: #e9e9e9; margin: .4rem 0 .6rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rvw b { color: var(--muted); font-size: .92rem; }
.rvsum { color: var(--muted); margin: -.4rem 0 .8rem; font-weight: 700; }
.rvsum b { color: var(--gold); font-size: 1.2rem; font-family: var(--disp); }

@media (prefers-reduced-motion: reduce) {
  .sk, .pw.ld { animation: none; }
  .overlay.open, .overlay.open .sheet { animation: none; }
  .tabind { transition: none; }
}