/* ═══════════════════════════════════════════════════════════
   app.css  — Ammarati Web Portal
   All custom styles. Zero Bootstrap. Works with Tailwind + DaisyUI.
   ═══════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Cairo', 'Tajawal', sans-serif; background: #f0f4f8; }

/* ── DaisyUI theme tokens ─────────────────────────────── */
[data-theme="ammarati"] {
    --p: 245 58% 51%;   --pf: 244 55% 41%;   --pc: 0 0% 100%;
    --a: 271 76% 53%;   --af: 271 76% 43%;   --ac: 0 0% 100%;
    --b1: 220 20% 97%;  --b2: 220 15% 94%;   --b3: 220 13% 91%;
    --bc: 220 20% 15%;
    --s: 142 76% 36%;   --e: 0 72% 50%;
    --wa: 38 92% 50%;   --in: 199 89% 48%;
}

/* ── Gradients ────────────────────────────────────────── */
.hero-gradient {
    background: linear-gradient(135deg,#0f172a 0%,#1e3a8a 40%,#7c3aed 75%,#0ea5e9 100%);
}
.cover-gradient { background: linear-gradient(135deg,#1e3a8a,#7c3aed); }

/* ── Glass navbar ─────────────────────────────────────── */
.nav-glass {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(255,255,255,.88);
    border-bottom: 1px solid rgba(0,0,0,.06);
}

/* ── Pill badges ──────────────────────────────────────── */
.pill {
    display: inline-flex; align-items: center;
    border-radius: 9999px; padding: 2px 10px;
    font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.pill-primary { background: hsl(var(--p)/.12); color: hsl(var(--p)); }
.pill-success  { background: hsl(var(--s)/.12); color: hsl(var(--s)); }

/* ── Card hover lift ──────────────────────────────────── */
.card-lift {
    display: block; transition: transform .2s ease, box-shadow .2s ease;
}
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,.1); }

/* ── Post image cursor ────────────────────────────────── */
.post-img { cursor: zoom-in; display: block; width: 100%; }

/* ── Manual Carousel ──────────────────────────────────── */
.cm-slides {
    display: flex;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}
.cm-slides img { flex-shrink: 0; width: 100%; max-height: 440px; object-fit: cover; }

/* ── 3D Carousel ──────────────────────────────────────── */
.c3d-scene  { perspective: 1200px; height: 340px; position: relative; }
.c3d-track  {
    transform-style: preserve-3d;
    width: 100%; height: 100%; position: relative;
    transition: transform .5s ease;
}
.c3d-slide {
    position: absolute; top: 0; left: 50%;
    width: 220px; margin-left: -110px;
    transform-origin: center center;
    border-radius: 16px; overflow: hidden;
    transition: transform .5s ease;
    background: white; box-shadow: 0 8px 30px rgba(0,0,0,.12);
}

/* ── Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: hsl(var(--p)/.3); border-radius: 9999px; }