/* ============================================================
   Washeej UI Components CSS
   Extracted from app.blade.php inline styles
   Date: 2026-02-21
   
   Components:
   1. Language Switcher (line ~50-266)
   2. Sidebar Badges (line ~268-351)
   3. Notification Bell (line ~353-545)
   4. Audio Message Player (line ~547-602)
   5. Action Dropdown (line ~2526-2588)
   6. Overflow Fix (line ~2515-2525)
   ============================================================ */

/* ============================================================
   ROOT FIX: Override main.css pale-green variables for light mode
   
   main.css defines:
     --body-color: 144 67% 92%  (pale green — invisible on white)
     --heading-color: 144 67% 92%  (same)
   
   This override loads AFTER main.css, fixing ALL 80+ references
   at once: body, p, h1-h6, nav links, form labels, footer, etc.
   ============================================================ */
:root {
    --body-color: 220 9% 35%;
    --heading-color: 220 9% 12%;
}

/* Restore original pale-green for dark-background containers */
.dashboard .sidebar-menu {
    --body-color: 144 67% 92%;
    --heading-color: 144 67% 92%;
}

/* Bottom footer social bar has hardcoded #161d19 dark background */
.bottom-footer .social-list {
    --body-color: 0 0% 90%;
    --heading-color: 0 0% 95%;
}

/* Popular pricing card has dark green gradient background */
.pricing-card.popular {
    --body-color: 0 0% 100%;
    --heading-color: 0 0% 100%;
}

/* ========================================
   1. Language Switcher
======================================== */
.lang-switcher-wrapper {
    position: relative;
    z-index: 1000;
}

.lang-switcher-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: hsl(var(--wj-surface, 0 0% 96%));
    border: 1px solid hsl(var(--wj-border, 220 13% 91%));
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: hsl(var(--wj-text, 220 9% 46%));
    font-size: 14px;
    font-weight: 500;
}

.lang-switcher-btn:hover {
    background: hsl(var(--wj-surface-3, 220 14% 92%));
    border-color: hsl(var(--wj-border-strong, 220 13% 80%));
}

.lang-switcher-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px hsl(var(--wj-accent, 142 70% 49%) / 0.15);
}

.lang-switcher-flag {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lang-switcher-flag img {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.lang-switcher-name {
    white-space: nowrap;
}

.lang-switcher-arrow {
    font-size: 10px;
    transition: transform 0.2s ease;
    opacity: 0.7;
}

.lang-switcher-wrapper.open .lang-switcher-arrow {
    transform: rotate(180deg);
}

/* Language Switcher Dropdown Menu */
.lang-switcher-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 150px;
    background: hsl(var(--wj-surface, 0 0% 100%));
    border-radius: 8px;
    box-shadow: var(--wj-shadow-lg, 0 4px 20px rgba(0, 0, 0, 0.12));
    border: 1px solid hsl(var(--wj-border, 220 13% 91%));
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: 1001;
}

[dir="rtl"] .lang-switcher-menu {
    right: auto;
    left: 0;
}

.lang-switcher-wrapper.open .lang-switcher-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-switcher-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: hsl(var(--wj-text, 220 9% 46%));
}

.lang-switcher-item:hover {
    background: hsl(var(--wj-surface-3, 220 14% 96%));
}

.lang-switcher-item .lang-switcher-flag img {
    width: 20px;
    height: 14px;
}

.lang-switcher-item .lang-switcher-name {
    font-size: 13px;
    font-weight: 500;
    color: hsl(var(--wj-text, 220 9% 46%));
}

/* Dashboard Header (Dark Background) — Language Switcher */
.dashboard-header .lang-switcher-btn {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.dashboard-header .lang-switcher-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.25);
}

.dashboard-header .lang-switcher-btn:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

/* Frontend Header (Light Background) — Language Switcher */
.header .lang-switcher-btn {
    background: hsl(var(--wj-surface, 0 0% 100%));
    border-color: hsl(var(--wj-border, 220 13% 91%));
    color: hsl(var(--wj-text, 220 9% 46%));
}

.header .lang-switcher-btn:hover {
    background: hsl(var(--wj-surface-3, 220 14% 96%));
    border-color: hsl(var(--wj-border-strong, 220 13% 80%));
}

/* Simple Language Switch Button (for 2 languages only) */
.lang-switch-simple {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.lang-switch-simple:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    text-decoration: none;
}

.lang-switch-flag {
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.lang-switch-text {
    white-space: nowrap;
}

/* Frontend Header — Simple Language Switch */
.header .lang-switch-simple {
    background: hsl(var(--wj-surface, 0 0% 100%));
    border-color: hsl(var(--wj-border, 220 13% 91%));
    color: hsl(var(--wj-text, 220 9% 46%));
}

.header .lang-switch-simple:hover {
    background: hsl(var(--wj-surface-3, 220 14% 96%));
    border-color: hsl(var(--wj-border-strong, 220 13% 80%));
    color: hsl(var(--wj-text, 233 12% 13%));
}

/* Dashboard Header — Language Switch White Text */
.dashboard-header .lang-switch-simple {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff !important;
}

.dashboard-header .lang-switch-simple:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff !important;
}

.dashboard-header .lang-switch-simple .lang-switch-text {
    color: #fff !important;
}

/* Dashboard Header — Notification Badge White Text */
.dashboard-header .notification-bell-badge {
    color: #fff !important;
}

/* Mobile Responsive — Language Switcher */
@media (max-width: 575px) {
    .lang-switch-simple {
        padding: 6px 10px;
        gap: 6px;
    }

    .lang-switch-simple .lang-switch-text {
        display: none;
    }

    .lang-switcher-btn {
        padding: 6px 10px;
        gap: 6px;
    }

    .lang-switcher-btn .lang-switcher-name {
        display: none;
    }

    .lang-switcher-flag img {
        width: 20px;
        height: 14px;
    }

    .lang-switcher-menu {
        min-width: 130px;
    }
}

/* ========================================
   2. Sidebar Badges
======================================== */
.inbox-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: #dc3545;
    border-radius: 10px;
    margin-inline-start: auto;
}

.sidebar-v2-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: #dc3545;
    border-radius: 10px;
    margin-inline-start: auto;
    transition: all 0.3s ease;
}

/* When sidebar is collapsed, show badge as dot */
.sidebar-v2.is-collapsed .sidebar-v2-badge {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    min-width: 8px;
    height: 8px;
    padding: 0;
    font-size: 0;
    border-radius: 50%;
}

/* Ensure badge is visible in collapsed state */
.sidebar-v2.is-collapsed .sidebar-v2-list__item a {
    position: relative;
}

/* Sidebar V2 Section Badge (for dropdown header) */
.sidebar-v2-section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: #dc3545;
    border-radius: 10px;
    margin-inline-start: 8px;
    transition: all 0.3s ease;
}

/* When sidebar is collapsed, show section badge as dot on icon */
.sidebar-v2.is-collapsed .sidebar-v2-section-badge {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    min-width: 10px;
    height: 10px;
    padding: 0;
    font-size: 0;
    border-radius: 50%;
    margin: 0;
}

/* Ensure section header has relative position for badge */
.sidebar-v2.is-collapsed .sidebar-v2-section__header {
    position: relative;
}

/* ========================================
   3. Notification Bell
======================================== */
.notification-bell-wrapper {
    position: relative;
}

.notification-bell-btn {
    background: transparent;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    position: relative;
    color: #fff;
    font-size: 18px;
    transition: all 0.2s;
}

.notification-bell-btn:hover {
    opacity: 0.8;
}

.notification-bell-badge {
    position: absolute;
    top: 2px;
    inset-inline-end: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: #dc3545;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-dropdown {
    position: absolute;
    top: 100%;
    inset-inline-end: 0;
    width: 320px;
    max-height: 400px;
    background: hsl(var(--wj-surface, 0 0% 100%));
    border-radius: 8px;
    box-shadow: var(--wj-shadow-lg, 0 4px 20px rgba(0, 0, 0, 0.15));
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.notification-bell-wrapper.open .notification-dropdown {
    display: block;
}

.notification-dropdown__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid hsl(var(--wj-border, 0 0% 93%));
}

.notification-dropdown__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: hsl(var(--wj-text, 0 0% 20%));
}

.notification-dropdown__link {
    font-size: 12px;
    color: hsl(var(--base));
    text-decoration: none;
}

.notification-dropdown__body {
    max-height: 320px;
    overflow-y: auto;
}

.notification-dropdown__empty {
    padding: 40px 20px;
    text-align: center;
    color: hsl(var(--wj-text-muted, 0 0% 60%));
}

.notification-dropdown__empty i {
    font-size: 32px;
    margin-bottom: 10px;
    display: block;
}

.notification-dropdown__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid hsl(var(--wj-border, 0 0% 96%));
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    color: inherit;
}

.notification-dropdown__item:hover {
    background: hsl(var(--wj-surface-3, 0 0% 97%));
    text-decoration: none;
    color: inherit;
}

.notification-dropdown__item.unread {
    background: hsl(var(--wj-accent, 142 70% 49%) / 0.05);
}

.notification-dropdown__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: hsl(var(--base) / 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--base));
    font-size: 16px;
    flex-shrink: 0;
}

.notification-dropdown__content {
    flex: 1;
    min-width: 0;
}

.notification-dropdown__sender {
    font-size: 13px;
    font-weight: 600;
    color: hsl(var(--wj-text, 0 0% 20%));
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-dropdown__message,
.notification-dropdown__preview {
    font-size: 12px;
    color: hsl(var(--wj-text-muted, 0 0% 40%));
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-dropdown__time {
    font-size: 11px;
    color: hsl(var(--wj-text-muted, 0 0% 60%));
}

.notification-dropdown__account {
    font-size: 10px;
    color: hsl(var(--base));
    background: hsl(var(--base) / 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
    display: inline-block;
}

.notification-dropdown__loading {
    text-align: center;
    padding: 30px;
    color: hsl(var(--wj-text-muted, 0 0% 60%));
}

.notification-dropdown__loading i {
    font-size: 24px;
}

/* Notification Mute Button */
.notification-dropdown__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-mute-btn {
    background: transparent;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    color: hsl(var(--wj-text-muted, 0 0% 40%));
    font-size: 14px;
    border-radius: 4px;
    transition: all 0.2s;
}

.notification-mute-btn:hover {
    background: hsl(var(--wj-surface-3, 0 0% 94%));
    color: hsl(var(--wj-text, 0 0% 20%));
}

.notification-mute-btn.muted {
    color: #dc3545;
}

.notification-mute-btn.muted:hover {
    background: hsl(0 80% 97%);
}

/* ========================================
   3b. Theme Toggle Button
======================================== */
.theme-toggle-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 8px 12px;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Show moon icon in light mode, sun icon in dark mode */
.theme-icon-light {
    display: none;
}

.theme-icon-dark {
    display: inline;
}

[data-theme="dark"] .theme-icon-light {
    display: inline;
}

[data-theme="dark"] .theme-icon-dark {
    display: none;
}

/* Frontend header variant (light background) */
.header .theme-toggle-btn {
    background: hsl(var(--wj-surface, 0 0% 100%));
    border-color: hsl(var(--wj-border, 220 13% 91%));
    color: hsl(var(--wj-text, 220 9% 46%));
}

.header .theme-toggle-btn:hover {
    background: hsl(var(--wj-surface-3, 220 14% 96%));
    border-color: hsl(var(--wj-border-strong, 220 13% 80%));
}

/* ========================================
   4. Audio Message Player
======================================== */
.audio-message-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    background: hsl(var(--wj-surface-3, 0 0% 97%) / 0.5);
    border-radius: 8px;
    min-width: 250px;
    max-width: 100%;
}

.audio-player {
    width: 100%;
    height: 40px;
    border-radius: 20px;
}

.audio-player::-webkit-media-controls-panel {
    background: linear-gradient(to right, #e8f5e9, #f1f8e9);
}

.audio-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.audio-filename {
    font-size: 12px;
    color: hsl(var(--wj-text-muted, 0 0% 40%));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.audio-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: hsl(var(--base) / 0.1);
    color: hsl(var(--base));
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.2s;
}

.audio-download-btn:hover {
    background: hsl(var(--base));
    color: #fff;
}

.audio-download-btn i {
    font-size: 14px;
}

/* RTL Support for Audio Player */
[dir="rtl"] .audio-info {
    flex-direction: row-reverse;
}

/* ========================================
   5. Action Dropdown
======================================== */
.action-btn {
    position: relative;
}

.action-dropdown {
    position: absolute;
    z-index: 1050;
    min-width: 180px;
    background: hsl(var(--wj-surface, 0 0% 100%));
    border: 1px solid hsl(var(--wj-border, 220 13% 91%));
    border-radius: 8px;
    box-shadow: var(--wj-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
    padding: 8px 0;
    list-style: none;
    margin: 0;
    visibility: hidden;
    opacity: 0;
    transform: scale(0.95);
    transition: 0.2s ease;
}

.action-dropdown.show {
    visibility: visible !important;
    opacity: 1 !important;
    transform: scale(1) !important;
}

.action-dropdown__item {
    list-style: none;
}

.action-dropdown__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: hsl(var(--wj-text, 220 9% 23%));
    text-decoration: none;
    transition: background 0.2s;
    border: none;
    background: none;
    width: 100%;
    text-align: start;
    cursor: pointer;
    font-size: 14px;
}

.action-dropdown__link:hover {
    background: hsl(var(--wj-surface-3, 220 14% 96%));
    color: hsl(var(--wj-text, 220 9% 7%));
}

.action-dropdown__link i {
    font-size: 16px;
    width: 20px;
}

/* RTL support for dropdown */
[dir="rtl"] .action-dropdown {
    right: 0;
    left: auto;
}

[dir="ltr"] .action-dropdown {
    right: 0;
    left: auto;
}

/* Flip classes */
.action-dropdown.dropdown-flip-y {
    margin-bottom: 5px;
}

/* ========================================
   6. Overflow Fix
======================================== */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

.dashboard-container__body {
    overflow-x: auto;
}

.dashboard-table {
    overflow-x: visible;
}

/* ========================================
   7. Dark Mode Overrides for Components
======================================== */
[data-theme="dark"] .notification-dropdown {
    background: hsl(var(--wj-surface, 222 47% 8%));
    border-color: hsl(var(--wj-border, 217 33% 17%));
}

[data-theme="dark"] .notification-dropdown__header {
    border-bottom-color: hsl(var(--wj-border, 217 33% 17%));
}

[data-theme="dark"] .notification-dropdown__title {
    color: hsl(var(--wj-text, 210 40% 98%));
}

[data-theme="dark"] .notification-dropdown__sender {
    color: hsl(var(--wj-text, 210 40% 98%));
}

[data-theme="dark"] .notification-dropdown__item {
    border-bottom-color: hsl(var(--wj-border, 217 33% 17%));
}

[data-theme="dark"] .notification-dropdown__item:hover {
    background: hsl(var(--wj-surface-3, 223 47% 14%));
}

[data-theme="dark"] .notification-dropdown__item.unread {
    background: hsl(var(--wj-accent, 142 70% 49%) / 0.08);
}

[data-theme="dark"] .lang-switcher-menu {
    background: hsl(var(--wj-surface, 222 47% 8%));
    border-color: hsl(var(--wj-border, 217 33% 17%));
}

[data-theme="dark"] .lang-switcher-item {
    color: hsl(var(--wj-text, 210 40% 98%));
}

[data-theme="dark"] .lang-switcher-item:hover {
    background: hsl(var(--wj-surface-3, 223 47% 14%));
}

[data-theme="dark"] .action-dropdown {
    background: hsl(var(--wj-surface, 222 47% 8%));
    border-color: hsl(var(--wj-border, 217 33% 17%));
}

[data-theme="dark"] .action-dropdown__link {
    color: hsl(var(--wj-text, 210 40% 98%));
}

[data-theme="dark"] .action-dropdown__link:hover {
    background: hsl(var(--wj-surface-3, 223 47% 14%));
}

[data-theme="dark"] .audio-message-container {
    background: hsl(var(--wj-surface-3, 223 47% 14%) / 0.5);
}

[data-theme="dark"] .notification-mute-btn {
    color: hsl(var(--wj-text-muted, 215 20% 65%));
}

[data-theme="dark"] .notification-mute-btn:hover {
    background: hsl(var(--wj-surface-3, 223 47% 14%));
    color: hsl(var(--wj-text, 210 40% 98%));
}

/* ============================================================
   FRONTEND LIGHT MODE FIXES
   
   Root variable override (at top of this file) fixes most text.
   This section handles elements that need EXTRA fixes beyond
   variable colors: backgrounds, borders, hardcoded --white text.
   ============================================================ */

/* ========================================
   F1. Header Background — Light Mode
   main.css uses --body-bg (nearly black) for header bg
======================================== */
.header {
    background-color: hsl(0 0% 100%) !important;
    border-bottom: 1px solid hsl(220 13% 91%);
}

.header.fixed-header {
    background-color: hsl(0 0% 100%) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid hsl(220 13% 91%);
}

@media screen and (max-width: 991px) {
    .header {
        background-color: hsl(0 0% 100%) !important;
    }
}

/* ========================================
   F2. Navbar Toggler — uses hardcoded --white
======================================== */
.navbar-toggler.header-button {
    color: hsl(220 9% 25%) !important;
}

/* ========================================
   F3. Login Button (btn--base-two) — pale green bg
======================================== */
.header .btn--base-two {
    background-color: transparent !important;
    border: 2px solid hsl(var(--base)) !important;
    color: hsl(var(--base)) !important;
    box-shadow: none !important;
}

.header .btn--base-two:hover,
.header .btn--base-two:focus {
    background-color: hsl(var(--base)) !important;
    border-color: hsl(var(--base)) !important;
    color: hsl(0 0% 100%) !important;
}

/* ========================================
   F4. Hero CTA button style
======================================== */
.banner-content__button .btn--base {
    box-shadow: 0 4px 14px hsl(var(--base) / 0.3);
}

.banner-content__button .btn--base-two {
    background-color: transparent !important;
    border: 2px solid hsl(var(--base)) !important;
    color: hsl(var(--base)) !important;
}

.banner-content__button .btn--base-two:hover {
    background-color: hsl(var(--base)) !important;
    color: hsl(0 0% 100%) !important;
}

/* ========================================
   F5. Testimonials / Feedback — Light Mode
   main.css uses hsl(var(--white)) for text = white on light bg = INVISIBLE
   These are hardcoded to --white, NOT --body-color, so root override doesn't fix them
======================================== */
.feedback-content__text {
    color: hsl(220 9% 20%) !important;
}

.feedback-content .name {
    color: hsl(220 9% 12%) !important;
}

.feedback-content .title {
    color: hsl(220 9% 30%) !important;
}

.feedback-content__bottom .type {
    color: hsl(220 9% 40%) !important;
}

.feedback-content__icon {
    background-color: hsl(var(--base) / 0.1) !important;
    color: hsl(var(--base)) !important;
}

/* ========================================
   F6. Footer Fixes — Light Mode
   Bottom footer social bar has hardcoded #161d19 dark bg
   Footer description and copyright text need contrast
======================================== */
.bottom-footer .social-list {
    background: hsl(220 13% 95%) !important;
}

.bottom-footer .social-list__link {
    color: hsl(220 9% 30%) !important;
}

.bottom-footer .social-list__link:hover {
    color: hsl(var(--base)) !important;
}

.bottom-footer .bottom-footer-text {
    color: hsl(220 9% 40%) !important;
}

.footer-item__desc {
    color: hsl(220 9% 35%) !important;
}

.search-wrapper__text {
    color: hsl(220 9% 40%) !important;
}

/* Footer input placeholder */
.search-wrapper .search-form .form--control::placeholder {
    color: hsl(220 9% 55%) !important;
}

.search-wrapper .search-form .form--control::-webkit-input-placeholder {
    color: hsl(220 9% 55%) !important;
}

/* ========================================
   F7. Pricing Card Top Toggle Text
======================================== */
.pricing-card-top__text {
    color: hsl(220 9% 30%) !important;
}

/* ========================================
   F8. Blog Details Social Links — uses --body-color
======================================== */
.blog-details .social-list__link {
    color: hsl(220 9% 35%) !important;
}

.blog-details .social-list__link:hover {
    color: hsl(var(--base)) !important;
}

/* ========================================
   F9. Header border in light mode
   main.css: .header border uses --body-color opacity
======================================== */
.header.fixed-header,
.header {
    border-bottom-color: hsl(220 13% 91%) !important;
}

/* ========================================
   F10. Theme Toggle Button — RTL Spacing Fix
======================================== */
.top-button .theme-toggle-btn {
    margin-inline-start: 10px;
    margin-inline-end: 10px;
}

[dir="rtl"] .top-button .theme-toggle-btn {
    margin-right: 10px;
    margin-left: 10px;
}

/* ========================================
   F11. Cookie Consent — Light Mode
======================================== */
.cookies-card {
    background-color: hsl(0 0% 100%);
    border: 1px solid hsl(220 13% 91%);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

.cookies-card p {
    color: hsl(220 9% 35%);
}

/* ========================================
   F12. Key Feature Wrapper — Light Mode
   main.css uses hsl(var(--body-color) / 0.1) for bg — now produces
   a subtle dark tint instead of pale green. Override for cleaner look.
======================================== */
.key-feature-wrapper {
    background-color: hsl(210 20% 97%) !important;
    border-color: hsl(220 13% 91%) !important;
}

.key-feature-wrapper__top {
    background-color: hsl(210 20% 94%) !important;
}

/* ========================================
   F13. Management Wrapper (Customer Management) — Light Mode
   main.css uses #dcf8e71a which is very transparent
======================================== */
.management-wrapper {
    background: hsl(142 40% 96%) !important;
}

/* ========================================
   F14. CTA Section — Light Mode
======================================== */
.cta-section {
    background-color: hsl(var(--base) / 0.08) !important;
}

/* ============================================================
   FRONTEND DARK MODE OVERRIDES
   Restore dark-friendly colors when dark mode is active
   ============================================================ */

/* Header */
[data-theme="dark"] .header {
    background-color: hsl(224 71% 5%) !important;
    border-bottom-color: hsl(222 47% 14%) !important;
}

[data-theme="dark"] .header.fixed-header {
    background-color: hsl(224 71% 5%) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    border-bottom-color: hsl(222 47% 14%) !important;
}

@media screen and (max-width: 991px) {
    [data-theme="dark"] .header {
        background-color: hsl(224 71% 4%) !important;
    }
}

/* Nav Links - dark */
@media (min-width: 992px) {
    [data-theme="dark"] .nav-menu .nav-item .nav-link {
        color: hsl(215 20% 75%) !important;
    }
}

@media (max-width: 991px) {
    [data-theme="dark"] .nav-item .nav-link {
        color: hsl(215 20% 75%) !important;
    }
}

/* Navbar Toggler - dark */
[data-theme="dark"] .navbar-toggler.header-button {
    color: hsl(0 0% 100%) !important;
}

/* Login Button - dark */
[data-theme="dark"] .header .btn--base-two {
    background-color: transparent !important;
    border-color: hsl(var(--base)) !important;
    color: hsl(142 70% 55%) !important;
}

[data-theme="dark"] .header .btn--base-two:hover {
    background-color: hsl(var(--base)) !important;
    color: hsl(0 0% 100%) !important;
}

/* Banner - dark */
[data-theme="dark"] .banner-content__title {
    color: hsl(210 40% 95%) !important;
}

[data-theme="dark"] .banner-content__desc {
    color: hsl(215 20% 70%) !important;
}

/* Section Headings - dark */
[data-theme="dark"] .section-heading__title,
[data-theme="dark"] .section-heading h2,
[data-theme="dark"] .section-heading h3 {
    color: hsl(210 40% 95%) !important;
}

[data-theme="dark"] .section-heading p,
[data-theme="dark"] .section-heading__desc {
    color: hsl(215 20% 65%) !important;
}

/* Feature Items - dark */
[data-theme="dark"] .feature-item__title,
[data-theme="dark"] .feature-card__title {
    color: hsl(210 40% 95%) !important;
}

[data-theme="dark"] .feature-item__desc,
[data-theme="dark"] .feature-card__desc,
[data-theme="dark"] .feature-item p,
[data-theme="dark"] .feature-card p {
    color: hsl(215 20% 65%) !important;
}

/* Pricing - dark */
[data-theme="dark"] .pricing-card__title,
[data-theme="dark"] .pricing-item__title,
[data-theme="dark"] .pricing-card .price,
[data-theme="dark"] .pricing-item .price {
    color: hsl(210 40% 95%) !important;
}

[data-theme="dark"] .pricing-card li,
[data-theme="dark"] .pricing-item li {
    color: hsl(215 20% 70%) !important;
}

[data-theme="dark"] .pricing-card-top__text {
    color: hsl(215 20% 75%) !important;
}

/* FAQ - dark */
[data-theme="dark"] .custom--accordion .accordion-button {
    color: hsl(210 40% 95%) !important;
}

[data-theme="dark"] .custom--accordion .accordion-body {
    color: hsl(215 20% 70%) !important;
}

/* Testimonials / Feedback - dark: restore light text */
[data-theme="dark"] .feedback-content__text {
    color: hsl(210 40% 95%) !important;
}

[data-theme="dark"] .feedback-content .name {
    color: hsl(210 40% 98%) !important;
}

[data-theme="dark"] .feedback-content .title {
    color: hsl(215 20% 75%) !important;
}

[data-theme="dark"] .feedback-content__bottom .type {
    color: hsl(215 20% 65%) !important;
}

[data-theme="dark"] .feedback-content__icon {
    background-color: hsl(222 47% 12%) !important;
    color: hsl(var(--base)) !important;
}

/* Blog - dark */
[data-theme="dark"] .blog-card h5 a,
[data-theme="dark"] .blog-item h5 a {
    color: hsl(210 40% 95%) !important;
}

[data-theme="dark"] .blog-card p,
[data-theme="dark"] .blog-item p {
    color: hsl(215 20% 65%) !important;
}

[data-theme="dark"] .blog-details .social-list__link {
    color: hsl(215 20% 65%) !important;
}

/* Footer - dark */
[data-theme="dark"] .footer-item__title {
    color: hsl(210 40% 95%) !important;
}

[data-theme="dark"] .footer-menu__link {
    color: hsl(215 20% 70%) !important;
}

[data-theme="dark"] .footer-menu__link:hover {
    color: hsl(142 70% 55%) !important;
}

[data-theme="dark"] .footer-contact-menu__item-content,
[data-theme="dark"] .footer-contact-menu__item-content a {
    color: hsl(215 20% 70%) !important;
}

[data-theme="dark"] .footer-item__desc {
    color: hsl(215 20% 65%) !important;
}

[data-theme="dark"] .search-wrapper__text {
    color: hsl(215 20% 55%) !important;
}

[data-theme="dark"] .bottom-footer .social-list {
    background: hsl(222 47% 6%) !important;
}

[data-theme="dark"] .bottom-footer .social-list__link {
    color: hsl(215 20% 70%) !important;
}

[data-theme="dark"] .bottom-footer .bottom-footer-text {
    color: hsl(215 20% 55%) !important;
}

/* Contact - dark */
[data-theme="dark"] .contact-info-item h5 {
    color: hsl(210 40% 95%) !important;
}

[data-theme="dark"] .contact-info-item p {
    color: hsl(215 20% 65%) !important;
}

/* Auth Pages - dark */
[data-theme="dark"] .login-form h4,
[data-theme="dark"] .register-form h4,
[data-theme="dark"] .auth-form h4 {
    color: hsl(210 40% 95%) !important;
}

/* Key Feature Wrapper - dark */
[data-theme="dark"] .key-feature-wrapper {
    background-color: hsl(222 47% 8%) !important;
    border-color: hsl(222 47% 14%) !important;
}

[data-theme="dark"] .key-feature-wrapper__top {
    background-color: hsl(222 47% 12%) !important;
}

/* Management Wrapper - dark */
[data-theme="dark"] .management-wrapper {
    background: hsl(222 47% 8%) !important;
}

/* CTA Section - dark */
[data-theme="dark"] .cta-section {
    background-color: hsl(var(--base) / 0.15) !important;
}

/* Cookie Consent - dark */
[data-theme="dark"] .cookies-card {
    background-color: hsl(222 47% 8%) !important;
    border-color: hsl(222 47% 16%) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .cookies-card p {
    color: hsl(215 20% 70%) !important;
}