:root{--pink:#e9859f;--ink:#1c1b1b;--cream:#f6f1eb}
.bg-cream{background-color:var(--cream)}
.text-ink{color:var(--ink)}
.nav-link{padding:0.5rem 0.75rem;border-radius:999px}
.nav-link:hover{background:rgba(28,27,27,.06)}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1rem;border-radius:1rem;background:linear-gradient(180deg,#f2a6b8,#d86a88);color:#fff;font-weight:800;box-shadow:0 8px 24px rgba(216,106,136,.25)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1rem;border-radius:1rem;border:1px solid rgba(28,27,27,.15);background:#fff}
.btn-danger{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1rem;border-radius:1rem;background:#ef4444;color:#fff}
.link{color:#d86a88}
.link:hover{text-decoration:underline}
.link-danger{color:#ef4444}
.input{width:100%;background:#fff;border:1px solid rgba(28,27,27,.12);border-radius:1rem;padding:.8rem 1rem}
.card{background:#fff;border-radius:1.5rem;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.06)}
.card-img{width:100%;aspect-ratio:1/1;object-fit:cover}
.th{padding:0.9rem 1rem;text-align:right}
.td{padding:0.8rem 1rem}
.alert{background:#fee2e2;border:1px solid #ef4444;color:#991b1b;border-radius:1rem;padding:.75rem 1rem;margin-bottom:1rem}
.section-title{font-size:1.5rem;font-weight:900;margin-bottom:1rem}
.cat-tile{display:flex;align-items:center;justify-content:center;height:96px;border-radius:1rem;background:linear-gradient(180deg,rgba(233,133,159,.15),rgba(233,133,159,.05));border:1px solid rgba(28,27,27,.06);font-weight:800}
.cat-tile-icon{display:flex;align-items:center;justify-content:center;padding:1rem;background:#fff;border-radius:1rem;box-shadow:0 4px 12px rgba(0,0,0,.05);font-weight:700;gap:.75rem}
.cat-tile-icon .icon-wrap{width:40px;height:40px;background:#f6f1eb;border-radius:999px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* التعديل الجديد لإصلاح توافق السلايدر في الهواتف */
@media (max-width: 767px) {
    #hero-slider {
        /* إجبار السلايدر على أخذ كامل العرض في الهواتف */
        width: 100%; 
        /* تعديل الهامش لعدم الضغط على الأطراف */
        margin-top: 2.5rem; 
    }
}