/* ==========================================================
   MANWA Beauty Salon – themes.css
   ثلاث مجموعات ألوان للموقع ولوحة التحكم.
   كل مستخدم بيختار الثيم اللي بناسبه (بينحفظ بكوكي على جهازه)، والافتراضي الوردي.
   الثيم بيتحط على <html data-theme="...">.
   الأسماء (--pink...) ضلّت زي ما هي عشان ما يتغيّر باقي الكود؛ قيمها بتتغيّر حسب الثيم.
   ========================================================== */

/* ---------- 1) الوردي (الحالي – الافتراضي) ---------- */
:root {
    --pink: #E9A0B5;
    --pink-dark: #943D5D;
    --pink-nav: #B85D7B;
    --pink-nav-dark: #9F4565;
    --pink-light: #FCEFF3;
    --pink-soft: #F7DFE7;
    --gray-bg: #FAF6F8;
    --border: #EADDE2;
    --bg: #F7F3F5;

    --tint-50: #FBF8F9;
    --tint-100: #F3EDF0;
    --tint-300: #DCC9D0;
    --tint-400: #B9A9B0;
    --accent-mid: #D98AA6;
    --accent-deep: #7E3150;

    /* نص ثانوي: أغمق شوي عشان يقرأ بوضوح (تباين ≥ 4.5) */
    --muted: #6E6C76;
    --gray-text: #6E6C76;

    /* صورة الهيرو (مسار مطلق عشان يشتغل من أي ملف CSS) */
    --hero-image: url('/images/hero-rose.svg');
}

/* ---------- 2) الموف (موف ترابي هادي – بديل البنفسجي) ---------- */
html[data-theme="mauve"] {
    --pink: #CFA6BF;
    --pink-dark: #704B62;
    --pink-nav: #93657F;
    --pink-nav-dark: #7C536B;
    --pink-light: #FBF5F8;
    --pink-soft: #F0E3EA;
    --gray-bg: #FAF7F9;
    --border: #EADFE5;
    --bg: #F7F2F5;

    --tint-50: #FBF8FA;
    --tint-100: #F2EBEF;
    --tint-300: #D9C8D2;
    --tint-400: #B7A5B0;
    --accent-mid: #C49CB4;
    --accent-deep: #5A3A4E;

    --muted: #625D67;
    --gray-text: #625D67;

    --hero-image: url('/images/hero-mauve.svg');
}
/* ---------- زر اختيار الألوان (مشترك للموقع ولوحة التحكم) ---------- */
.theme-switch {
    position: relative;
    font-family: "Tajawal", "Segoe UI", sans-serif;
}

.theme-switch-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: #fff;
    color: var(--pink-dark);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

    .theme-switch-btn svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .theme-switch-btn:hover {
        border-color: var(--pink);
    }

/* الموقع العام: زر عائم بالزاوية تحت على الشمال */
.theme-switch--floating {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 900;
}

    .theme-switch--floating .theme-switch-btn {
        width: 48px;
        height: 48px;
        border: 0;
        background: var(--pink-dark);
        color: #fff;
        box-shadow: 0 10px 24px color-mix(in srgb, var(--pink-dark) 35%, transparent);
    }

        .theme-switch--floating .theme-switch-btn:hover {
            transform: translateY(-2px);
        }

        .theme-switch--floating .theme-switch-btn svg {
            width: 22px;
            height: 22px;
        }

.theme-switch-menu {
    position: absolute;
    z-index: 950;
    width: 250px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(40, 30, 40, .18);
    text-align: right;
}

    .theme-switch-menu[hidden] {
        display: none;
    }

.theme-switch--floating .theme-switch-menu {
    left: 0;
    bottom: calc(100% + 10px);
}

.theme-switch--inline .theme-switch-menu {
    left: 0;
    top: calc(100% + 8px);
}

.theme-switch-title {
    display: block;
    padding: 4px 8px 8px;
    color: #42434B;
    font-size: 14px;
}

.theme-switch-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #42434B;
    font: inherit;
    text-align: right;
    cursor: pointer;
}

    .theme-switch-item:hover {
        background: var(--tint-50);
    }

    .theme-switch-item.active {
        background: var(--pink-light);
    }

.theme-switch-dot {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
}

.theme-switch-text {
    flex: 1;
    display: grid;
    line-height: 1.35;
}

    .theme-switch-text b {
        font-size: 14px;
    }

    .theme-switch-text small {
        color: #6E6C76;
        font-size: 11.5px;
    }

.theme-switch-check {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--pink-dark);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
}

.theme-switch-item.active .theme-switch-check {
    opacity: 1;
}

.theme-switch-note {
    display: block;
    padding: 6px 8px 2px;
    color: #8A8790;
    font-size: 11px;
}

/* شاشات صغيرة: قائمة لوحة التحكم بعرض الشاشة تحت الشريط العلوي (كانت تطلع برّا الشاشة) */
@media (max-width: 480px) {
    .theme-switch--inline .theme-switch-menu {
        position: fixed;
        top: 64px;
        left: 12px;
        right: 12px;
        width: auto;
    }
}

@media print {
    .theme-switch {
        display: none !important;
    }
}

/* ---------- 3) المحايد (بيج / رمادي دافي) ---------- */
html[data-theme="neutral"] {
    --pink: #C9B7A7;
    --pink-dark: #584D44;
    --pink-nav: #6B5F55;
    --pink-nav-dark: #574D45;
    --pink-light: #F4F0EB;
    --pink-soft: #E8E0D6;
    --gray-bg: #F8F6F3;
    --border: #E3DCD3;
    --bg: #F4F2EF;

    --tint-50: #FAF8F5;
    --tint-100: #EEEAE4;
    --tint-300: #D5CBC0;
    --tint-400: #ADA296;
    --accent-mid: #A89889;
    --accent-deep: #3F3731;

    --muted: #6A645E;
    --gray-text: #6A645E;

    --hero-image: url('/images/hero-neutral.svg');
}