/* ======================================================
Honey Shop — Classic Pro UI (RTL) ألوان كلاسيكية: Ivory + Navy + Emerald + Rose متوافق مع الكلاسات القديمة + فوتر وهيدر محسّنين للجوال ====================================================== */ /* ========== المتغيرات ========== */ :root {
    /* لوحة ألوان جديدة */ --ivory-50:#faf9f7;
    --ivory-100:#f6f3ef;
    --ink-900:#0f172a;
    /* أسود مزرق عميق */ --navy-800:#1f2a44;
    /* كحلي أساسي */ --navy-700:#2b3a5f;
    --emerald-600:#2e7d6b;
    /* زمردي احترافي */ --emerald-500:#3c907d;
    --rose-500:#c75c6f;
    /* وردي معتّق أنيق */ --rose-600:#b44e61;
    --slate-700:#2f3947;
    --slate-500:#64748b;
    --slate-300:#cbd5e1;
    --bg:var(--ivory-50);
    --surface:#ffffff;
    --surface-2:#f2f4f7;
    --text:#1e293b;
    --muted:#6b7280;
    --border:#e5e7eb;
    --ring:rgba(60,144,125,.25);
    /* من الزمردي */ --shadow-sm:0 4px 10px rgba(0,0,0,.05);
    --shadow-md:0 12px 28px rgba(0,0,0,.10);
    --shadow-lg:0 18px 44px rgba(0,0,0,.14);
    --radius:14px;
    --radius-sm:10px;
    --container:1120px;
    --gap:16px;
    --transition:.22s cubic-bezier(.2,.6,.2,1);
    /* هيدر فاتح رصين */ --nav-bg:linear-gradient(135deg,#ffffff, #f5f7fb 75%);
    --nav-fg:#1f2a44;
    /* ألوان الأزرار */ --primary-600:var(--navy-800);
    --primary-500:#334569;
    --accent-600:var(--emerald-600);
    --accent-500:var(--emerald-500);
    --cta-600:var(--rose-600);
    --cta-500:var(--rose-500);
}
/* وضع داكن اختياري */ html[data-theme="dark"] {
    --bg:#0f1217;
    --surface:#111827;
    --surface-2:#0b1220;
    --text:#e5e7eb;
    --muted:#a3aab7;
    --border:#1f2937;
    --ring:rgba(60,144,125,.3);
    --nav-bg:linear-gradient(135deg,#0f172a,#111827 80%);
    --nav-fg:#e5e7eb;
    --primary-600:#94a3b8;
    /* أزرار أفتح في الدارك */ --primary-500:#aab7cc;
}
/* ========== الأساسيات ========== */ * {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Kufi Arabic",Tahoma,Arial,sans-serif;
    line-height:1.6;
    direction:rtl;
}
a {
    color:inherit;
    text-decoration:none;
    transition:opacity var(--transition), color var(--transition)
}
a:hover {
    opacity:.9
}
.container {
    max-width:var(--container);
    margin-inline:auto;
    padding:24px
}
/* تركيز وصولي */ :where(a,button,input,select,textarea):focus-visible {
    outline:2px solid transparent;
    box-shadow:0 0 0 4px var(--ring);
    border-radius:10px;
}
/* ========== الهيدر / النافبار ========== */ .nav {
    position:sticky;
    top:0;
    z-index:1000;
    background:var(--nav-bg);
    color:var(--nav-fg);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    backdrop-filter:saturate(1.05) blur(6px);
}
.nav .container {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-block:14px;
}
.brand {
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:900;
    letter-spacing:.2px
}
.brand img {
    height:48px;
    width:auto;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.08))
}
/* القوائم (نفس اسمك القديم .links) */ .nav .links {
    display:flex;
    align-items:center;
    gap:10px
}
.nav .links a {
    padding:9px 14px;
    border-radius:12px;
    font-weight:700;
    transition:background var(--transition), color var(--transition), transform var(--transition);
}
.nav .links a:hover {
    background:rgba(31,42,68,.08);
    color:var(--navy-800);
    transform:translateY(-1px);
}
/* زر الهاتف/الدعوة بلون وردي معتّق */ .phone-link {
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:800;
    padding:10px 14px;
    border-radius:12px;
    background:var(--cta-500);
    color:#fff !important;
    border:1px solid rgba(0,0,0,.04);
    box-shadow:0 3px 0 rgba(0,0,0,.05);
    transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.phone-link:hover {
    background:var(--cta-600);
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(199,92,111,.35)
}
/* أزرار عامة */ .btn {
    display:inline-block;
    padding:10px 16px;
    border-radius:12px;
    background:var(--primary-600);
    color:#fff;
    border:1px solid rgba(0,0,0,0);
    box-shadow:0 3px 6px rgba(31,42,68,.18);
    transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn:hover {
    background:var(--primary-500);
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(31,42,68,.28)
}
.btn:active {
    transform:translateY(0)
}
.btn.outline {
    background:transparent;
    color:var(--navy-800);
    border:1px solid var(--navy-800)
}
.btn.ghost {
    background:transparent;
    color:var(--navy-800)
}
.btn.dark {
    background:var(--navy-800)
}
.btn.block {
    display:block;
    width:100%
}
.btn.success {
    background:var(--accent-600)
}
.btn.warn {
    background:#b45309
}
.btn.danger {
    background:#b91c1c
}
/* ========== هامبرجر بدون JS ========== */ .nav-toggle {
    display:none
}
.nav-burger {
    display:none;
    width:44px;
    height:44px;
    border-radius:10px;
    border:1px solid rgba(0,0,0,.06);
    background:rgba(255,255,255,.7);
    backdrop-filter:blur(4px);
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.nav-burger span, .nav-burger::before, .nav-burger::after {
    content:"";
    display:block;
    width:22px;
    height:2px;
    background:#394867;
    margin:3px 0;
    border-radius:2px;
    transition:transform var(--transition), opacity var(--transition);
}
.nav-toggle:checked + .nav-burger span {
    opacity:0
}
.nav-toggle:checked + .nav-burger::before {
    transform:translateY(5px) rotate(45deg)
}
.nav-toggle:checked + .nav-burger::after {
    transform:translateY(-5px) rotate(-45deg)
}
/* ظهور/إخفاء المينيو على الجوال */ @media (max-width: 900px) {
    .nav .container {
        flex-wrap:wrap
    }
    .nav-burger {
        display:flex
    }
    .nav .links {
        display:none;
        width:100%;
        order:3;
        padding:8px;
        gap:8px;
        flex-wrap:wrap;
        background:#fff;
        border:1px solid var(--border);
        border-radius:12px;
        box-shadow:var(--shadow-sm)
    }
    .nav-toggle:checked ~ .links {
        display:flex
    }
    .nav .links a {
        flex:1 1 auto;
        text-align:center;
        background:var(--surface-2);
        border-radius:10px
    }
    .nav .links a:hover {
        background:#e9eef6
    }
    .phone-link {
        width:100%;
        justify-content:center
    }
}
/* ========== عناوين ونصوص ========== */ h1,h2,h3 {
    margin:0 0 10px
}
h1 {
    font-size:clamp(22px,2.2vw + 12px,36px);
    font-weight:900
}
h2 {
    font-size:clamp(18px,1.6vw + 10px,26px);
    font-weight:800;
    margin-top:18px
}
h3 {
    font-size:18px;
    font-weight:800
}
.note {
    font-size:13px;
    color:var(--muted)
}
/* ========== بطاقات + شبكة منتجات ========== */ .card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:16px;
    box-shadow:var(--shadow-sm);
    transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover {
    transform:translateY(-3px);
    box-shadow:var(--shadow-md)
}
.card img {
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:12px;
    margin-bottom:10px;
    background:#eef2f6
}
.grid {
    display:grid;
    gap:var(--gap);
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr))
}
/* السعر والشارة */ .price {
    font-weight:900;
    font-size:18px;
    letter-spacing:.2px
}
.price del {
    opacity:.6;
    margin-inline-start:8px
}
.badge {
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:linear-gradient(135deg, var(--surface-2), var(--surface));
    border:1px solid var(--border);
    border-radius:999px;
    padding:6px 10px;
    font-size:12px;
    font-weight:800;
}
.badge::before {
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--accent-600);
    box-shadow:0 0 0 3px rgba(46,125,107,.18);
}
/* ========== الجداول (لوحة الإدارة) ========== */ .table-responsive {
    overflow:auto;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface);
    box-shadow:var(--shadow-sm)
}
table {
    width:100%;
    border-collapse:collapse;
    min-width:720px
}
th,td {
    padding:12px 14px;
    border-bottom:1px solid var(--border);
    text-align:right;
    vertical-align:middle;
    white-space:nowrap
}
th {
    background:var(--surface-2);
    font-weight:900
}
tr:hover td {
    background:#f8fafc
}
html[data-theme="dark"] tr:hover td {
    background:rgba(255,255,255,.04)
}
/* ========== الفورمات ========== */ form input, form select, form textarea {
    width:100%;
    padding:12px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    border-radius:10px;
    transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
form textarea {
    min-height:110px;
    resize:vertical
}
form input:focus, form select:focus, form textarea:focus {
    border-color:var(--accent-600);
    box-shadow:0 0 0 4px var(--ring)
}
label {
    display:block;
    font-size:13px;
    color:var(--muted);
    margin:6px 2px
}
input[type="file"] {
    border:1px dashed var(--border);
    background:var(--surface-2);
    padding:10px;
    border-radius:10px;
    cursor:pointer
}
input[type="file"]:hover {
    border-color:var(--accent-600);
    background:var(--surface)
}
/* شريط أدوات الإدارة */ .admin-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:16px
}
.admin-top .btn {
    padding:9px 12px
}
/* ========== الفوتر (تحسين قوي للجوال) ========== */ .footer {
    background:var(--surface);
    color:var(--text);
    border-top:1px solid var(--border);
    margin-top:60px;
}
.footer .container {
    padding-top:32px;
    padding-bottom:18px
}
/* شبكة مرنة تحترم أسماءك القديمة */ .footer-grid {
    display:grid;
    gap:22px;
    align-items:flex-start;
    grid-template-columns:repeat(12,1fr);
}
/* أعمدة متوافقة قديمًا وحديثًا */ .footer-col {
    grid-column:span 3
}
.footer-col.wide {
    grid-column:span 6
}
.footer-about {
    grid-column:span 6
}
/* توافق مع كلاس قديم */ .footer-links {
    grid-column:span 3
}
.footer-contact {
    grid-column:span 3
}
/* عناوين وروابط */ .footer h3 {
    margin:0 0 10px;
    font-size:20px;
    color:var(--navy-800)
}
.footer h4 {
    margin:0 0 10px;
    color:var(--slate-700);
    font-size:16px;
    font-weight:800
}
.footer p {
    margin:0 0 10px;
    color:var(--text)
}
.footer-links ul {
    list-style:none;
    padding:0;
    margin:0
}
.footer-links li {
    margin-bottom:10px
}
.footer a {
    color:var(--navy-800)
}
.footer a:hover {
    color:var(--accent-600);
    text-decoration:underline
}
/* شرائط فاصلة للجوال */ .footer .section {
    padding:10px 0;
    border-bottom:1px dashed var(--border);
}
.footer .section:last-child {
    border-bottom:none
}
/* شريط سفلي */ .footer-bottom {
    text-align:center;
    padding:14px 0;
    border-top:1px solid var(--border);
    font-size:13px;
    color:var(--muted);
}
/* تحسين روابط الهاتف */ .footer :where(a[href^="tel:"]) {
    font-weight:800;
    color:var(--accent-600) !important;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent;
}
/* ========== استجابة الشاشات ========== */ @media (max-width: 1200px) {
    .container {
        padding:20px
    }
    .brand img {
        height:44px
    }
}
@media (max-width: 900px) {
    .grid {
        grid-template-columns:repeat(2,1fr)
    }
    .footer-grid {
        grid-template-columns:repeat(6,1fr);
        gap:18px;
    }
    .footer-about {
        grid-column:span 6
    }
    .footer-links {
        grid-column:span 3
    }
    .footer-contact {
        grid-column:span 3
    }
}
@media (max-width: 600px) {
    .container {
        padding:16px
    }
    .grid {
        grid-template-columns:1fr
    }
    .brand img {
        height:40px
    }
    .card img {
        height:160px
    }
    /* الفوتر يصبح عمودًا واحدًا + فواصل واضحة */ .footer-grid {
        grid-template-columns:repeat(2,1fr);
        gap:12px;
        background:var(--surface);
    }
    .footer-about, .footer-links, .footer-contact {
        grid-column:span 2;
        padding:12px 0;
        border-bottom:1px dashed var(--border);
    }
    .footer-contact {
        border-bottom:none
    }
    .footer h3 {
        font-size:18px
    }
    .footer h4 {
        font-size:15px
    }
    .footer-links li a {
        display:inline-block;
        padding:6px 0
    }
    /* مساحات نقر أكبر */
}
/* احترام تقليل الحركة */ @media (prefers-reduced-motion: reduce) {
    * {
        transition:none !important;
        animation:none !重要
    }
}
/* ===== Fix: وضوح رقم الجوال في الهيدر على الجوال ===== */ /* اجعل لون روابط الهيدر داكن واضح دائمًا */ .nav .links a {
    color: var(--navy-800) !important;
}
/* اجبر زر الهاتف على تباين قوي في كل الحالات */ .phone-link {
    background: var(--cta-600) !important;
    /* وردي معتّق أغمق */ color:#fff !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.15);
    /* يزيد الوضوح فوق الخلفيات الفاتحة */
}
/* Hover/Focus أكثر وضوحًا */ .phone-link:hover, .phone-link:focus-visible {
    background: var(--cta-600) !important;
    /* ثبّت اللون على hover */ box-shadow: 0 0 0 4px rgba(199,92,111,.22) !important;
    /* حلقة تركيز مرئية */
}
/* على الشاشات الصغيرة: اجبر الزر أن يكون عريض وواضح */ @media (max-width: 900px) {
    .nav .links {
        background:#fff !important;
        /* يجعل الخلفية فاتحة جدًا خلف النص */ border:1px solid var(--border) !important;
    }
    .nav .links .phone-link {
        width:100% !important;
        justify-content:center !important;
        font-weight:900 !important;
        letter-spacing:.2px;
    }
}
/* لو كنت تستخدم .btn.dark للهاتف بدل .phone-link */ .nav .links .btn.dark {
    background: var(--navy-800) !important;
    color:#fff !important;
    border-color: rgba(0,0,0,.12) !important;
}
/* تنسيق القائمة المنسدلة */ .dropdown  {
    position: relative;
    display: inline-block;
}
.dropbtn  {
    background-color: #4CAF50;
    /* لون الخلفية */ color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropbtn:hover  {
    background-color: #3e8e41;
    /* لون الخلفية عند التمرير */
}
.dropdown-content  {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
}
.dropdown-content a  {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover  {
    background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content  {
    display: block;
}
table  {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
th, td  {
    text-align: left;
    padding: 8px;
}
@media screen and (max-width: 768px)  {
    table  {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}