/**
 * IWELABI AFRICA – BRAND & UI STYLING
 * Complete Brand System for Children's Reading Platform
 * 
 * NEW COLOR PALETTE (FINAL):
 * - Sunny Peach (#FFB88C) = Primary CTAs, highlights, attention
 * - Lagoon Teal (#4CB5AE) = Secondary accent, links on light, success/progress
 * - Warm Cocoa Brown (#5E4B3C) = Header/footer backgrounds, structure
 * - Creamy Vanilla (#FFF8E1) = Page backgrounds, canvas
 * - Charcoal Gray (#4A4A4A) = Text, headings (never pure black)
 * - White (#FFFFFF) = Cards, content blocks, modals
 *
 * DESIGN RULES:
 * - Max 3 colors visible per screen (excluding illustrations)
 * - Maintain WCAG AA contrast
 * - Warm, friendly, calm tone
 */

/* ============================================
   IWELABI DESIGN TOKENS
   ============================================ */

:root {
    /* ========================================
       BRAND COLORS - IWELABI AFRICA PALETTE
       ======================================== */
    
    /* Primary Action Color (CTAs) */
    --iw-primary: #FFB88C;           /* Sunny Peach */
    --iw-primary-hover: #E8A67D;     /* Peach hover (10% darker) */
    --iw-primary-active: #D4966F;    /* Peach pressed */
    
    /* Secondary Accent / Links */
    --iw-teal: #4CB5AE;              /* Lagoon Teal */
    --iw-teal-hover: #3A9A94;        /* Teal hover (darker) */
    
    /* Header & Footer Background */
    --iw-cocoa: #5E4B3C;             /* Warm Cocoa Brown */
    --iw-cocoa-dark: #4A3B2F;        /* Darker cocoa for hover states */
    
    /* Background */
    --iw-vanilla: #FFF8E1;           /* Creamy Vanilla */
    
    /* Text / Headings */
    --iw-charcoal: #4A4A4A;          /* Charcoal Gray */
    --iw-charcoal-muted: rgba(74, 74, 74, 0.70); /* 70% opacity */
    
    /* Legacy aliases for backward compatibility */
    --iw-green: var(--iw-teal);      /* Alias: use teal for success */
    --iw-blue: var(--iw-teal);       /* Alias: use teal for links */
    --iw-ivory: var(--iw-vanilla);   /* Alias: vanilla replaces ivory */
    --iw-ink: var(--iw-charcoal);    /* Alias: charcoal replaces ink */
    
    /* Semantic Colors */
    --iw-success: var(--iw-teal);    /* Lagoon Teal for success/progress */
    --iw-info: var(--iw-teal);       /* Lagoon Teal for info */
    --iw-warning: var(--iw-primary); /* Sunny Peach for highlights */
    --iw-error: #D64545;             /* Red only if necessary */
    
    /* Text Colors */
    --iw-text: var(--iw-charcoal);   /* Charcoal Gray */
    --iw-text-muted: var(--iw-charcoal-muted);
    --iw-text-on-dark: var(--iw-vanilla);      /* Creamy Vanilla on dark bg */
    --iw-text-on-peach: var(--iw-cocoa);       /* Cocoa on Peach buttons */
    --iw-heading: var(--iw-charcoal);          /* Charcoal Gray headings */
    --iw-link: var(--iw-teal);                 /* Lagoon Teal links */
    
    /* Link Colors - Light Surfaces (white/vanilla backgrounds) */
    --iw-link-light: #4CB5AE;        /* Lagoon Teal */
    --iw-link-light-hover: #3A9A94;  /* Darker teal */
    
    /* Link Colors - Dark Surfaces (cocoa backgrounds) */
    --iw-link-dark: #FFF8E1;         /* Creamy Vanilla - readable on cocoa */
    --iw-link-dark-hover: #FFB88C;   /* Sunny Peach on hover */
    
    /* Surface Colors */
    --iw-bg: var(--iw-vanilla);      /* Creamy Vanilla background */
    --iw-bg-alt: #FFFFFF;            /* White for cards/modals */
    --iw-surface: #FFFFFF;           /* White cards */
    --iw-surface-dark: var(--iw-cocoa);
    
    /* Borders & Dividers */
    --iw-border: rgba(94, 75, 60, 0.12);       /* Cocoa-based border */
    --iw-border-strong: rgba(94, 75, 60, 0.25);
    --iw-divider: rgba(74, 74, 74, 0.10);      /* Charcoal-based divider */
    
    /* Shadows */
    --iw-shadow-sm: 0 2px 8px rgba(94, 75, 60, 0.08);
    --iw-shadow: 0 10px 30px rgba(94, 75, 60, 0.10);
    --iw-shadow-lg: 0 20px 50px rgba(94, 75, 60, 0.15);
    
    /* UI State Tints */
    --iw-success-tint: rgba(76, 181, 174, 0.12);  /* Teal tint */
    --iw-info-tint: rgba(76, 181, 174, 0.10);     /* Teal tint */
    --iw-warning-tint: rgba(255, 184, 140, 0.18); /* Peach tint */
    --iw-error-tint: rgba(214, 69, 69, 0.10);
    
    /* Focus Ring */
    --iw-focus-ring: rgba(255, 184, 140, 0.40);   /* Peach focus */
    
    /* Border Radius - Child-friendly rounded corners */
    --iw-radius-btn: 16px;           /* Buttons: 14-18px range */
    --iw-radius-card: 18px;
    --iw-radius-input: 14px;
    --iw-radius-pill: 999px;
    --iw-radius-sm: 8px;
    
    /* Spacing */
    --iw-section-py: 64px;
    --iw-section-py-mobile: 40px;
    --iw-card-padding: 24px;
    --iw-card-padding-sm: 16px;
}

/* ============================================
   DARK THEME VARIANT
   ============================================ */

.dark-theme,
[data-theme="dark"] {
    --iw-bg: var(--iw-cocoa);            /* Warm Cocoa Brown */
    --iw-bg-alt: #4A3B2F;                /* Darker cocoa */
    --iw-surface: #4A3B2F;
    --iw-surface-dark: #3A2E24;
    --iw-text: var(--iw-vanilla);        /* Creamy Vanilla text */
    --iw-text-muted: rgba(255, 248, 225, 0.70);
    --iw-heading: var(--iw-vanilla);
    --iw-border: rgba(255, 248, 225, 0.15);
    --iw-border-strong: rgba(255, 248, 225, 0.25);
    --iw-divider: rgba(255, 248, 225, 0.10);
    --iw-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.20);
    --iw-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    --iw-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.35);
    
    /* Links in dark theme use Sunny Peach */
    --iw-link: var(--iw-link-dark);
}

/* ============================================
   GLOBAL BASE STYLES
   ============================================ */

body {
    background-color: var(--iw-bg);
    color: var(--iw-text);
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--iw-heading);
}

/* ============================================
   LINK STYLES
   ============================================ */

/* Links on light surfaces (default) - Lagoon Teal */
a {
    color: var(--iw-link-light);      /* Lagoon Teal #4CB5AE */
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

a:visited {
    color: var(--iw-link-light);
}

a:hover {
    color: var(--iw-link-light-hover); /* Darker teal */
    text-decoration: underline;        /* Underline on hover for accessibility */
}

/* ============================================
   LINKS ON DARK SURFACES
   Uses Soft Ivory for readability on Deep Cocoa
   Override Pitnik template styles with !important
   ============================================ */

/* Dark section helper class - Topbar navigation links */
.section-dark a,
.section-dark a:visited,
.topbar a,
.topbar a:visited,
.topbar .nav-list > li > a,
.topbar .nav-list > li > a:visited,
.topbar.transperent .nav-list > li > a,
.topbar .logo a,
.top-area > ul > li > a,
footer a,
footer a:visited,
.navbar-dark a,
.navbar-dark a:visited,
.footer a,
.footer a:visited,
.bg-cocoa a,
.bg-cocoa a:visited {
    color: var(--iw-link-dark) !important;
}

.section-dark a:hover,
.topbar a:hover,
.topbar .nav-list > li > a:hover,
.topbar .nav-list > li:hover > a,
.topbar.transperent .nav-list > li > a:hover,
.topbar .logo a:hover,
.top-area > ul > li > a:hover,
footer a:hover,
.navbar-dark a:hover,
.footer a:hover,
.bg-cocoa a:hover {
    color: var(--iw-link-dark-hover) !important;
    text-decoration: underline;
}

/* Topbar navigation icons */
.topbar .nav-list > li > a > i,
.topbar.transperent .nav-list > li > a > i {
    color: var(--iw-link-dark) !important;
}

.topbar .nav-list > li:hover > a > i {
    color: var(--iw-link-dark-hover) !important;
}

/* ============================================
   FRONTEND HEADER - TOPBAR OVERRIDES
   Ensure all text/icons are Soft Ivory on Cocoa
   ============================================ */

.topbar,
.topbar.transperent,
.topbar.transperent.is_stuck {
    background: var(--iw-cocoa) !important; /* Warm Cocoa Brown #5E4B3C */
    padding-top: 0 !important; /* Remove top padding that shows body background */
}

/* Logo vertical alignment fix */
.topbar .logo {
    display: inline-flex;
    align-items: center;
    height: 55px;
    line-height: normal;
}

.topbar .logo a {
    display: inline-flex;
    align-items: center;
    height: 100%;
}

.topbar .logo img {
    display: block;
    max-height: 40px;
    width: auto;
    vertical-align: middle;
}

/* All text in topbar should be Creamy Vanilla */
.topbar,
.topbar *,
.topbar .nav-list > li > a,
.topbar.transperent .nav-list > li > a {
    color: var(--iw-vanilla) !important; /* #FFF8E1 */
}

/* Hover state - Sunny Peach */
.topbar .nav-list > li:hover > a,
.topbar .nav-list > li > a:hover,
.topbar.transperent .nav-list > li:hover > a,
.topbar.transperent .nav-list > li > a:hover {
    color: var(--iw-primary) !important; /* Sunny Peach #FFB88C */
}

/* Icons in topbar */
.topbar .nav-list > li > a > i,
.topbar .nav-list > li > a > svg,
.topbar.transperent .nav-list > li > a > i,
.topbar.transperent .nav-list > li > a > svg,
.top-area > ul > li > a > i,
.top-area > ul > li > a > svg {
    color: var(--iw-vanilla) !important;
    stroke: var(--iw-vanilla) !important;
}

.topbar .nav-list > li:hover > a > i,
.topbar .nav-list > li:hover > a > svg,
.top-area > ul > li:hover > a > i,
.top-area > ul > li:hover > a > svg {
    color: var(--iw-primary) !important; /* Sunny Peach on hover */
    stroke: var(--iw-primary) !important;
}

/* Main menu icon */
.topbar .main-menu,
.topbar .main-menu svg {
    color: var(--iw-vanilla) !important;
    stroke: var(--iw-vanilla) !important;
}

/* User name in topbar */
.topbar .user-img > h5 {
    color: var(--iw-vanilla) !important;
}

/* Search input placeholder */
.topbar .top-search form input::placeholder {
    color: rgba(255, 248, 225, 0.7) !important; /* Creamy Vanilla 70% */
}

.topbar .top-search form input {
    color: var(--iw-vanilla) !important;
}

/* ============================================
   FOOTER STYLES
   Dark background with readable gold links
   ============================================ */

footer,
footer.style2,
footer.dark {
    background: var(--iw-cocoa) !important; /* Warm Cocoa Brown #5E4B3C */
    color: var(--iw-vanilla) !important;    /* Creamy Vanilla #FFF8E1 */
}

footer a,
footer a:visited,
footer .nav-links a,
footer .share-article a {
    color: var(--iw-vanilla) !important;    /* Creamy Vanilla default */
}

footer a:hover,
footer .nav-links a:hover,
footer .share-article a:hover {
    color: var(--iw-primary) !important;    /* Sunny Peach on hover */
    text-decoration: underline;
}

footer .copyright-content,
footer .copyright-content span,
footer .copyright-content sub {
    color: rgba(255, 248, 225, 0.8) !important; /* Creamy Vanilla 80% */
}

/* Dark theme - all links use warm gold */
.dark-theme a,
.dark-theme a:visited,
[data-theme="dark"] a,
[data-theme="dark"] a:visited {
    color: var(--iw-link-dark);
}

.dark-theme a:hover,
[data-theme="dark"] a:hover {
    color: var(--iw-link-dark-hover);
    text-decoration: underline;
}

/* Utility class for dark backgrounds */
.bg-cocoa {
    background-color: var(--iw-cocoa);
    color: var(--iw-text-on-dark);
}

/* ============================================
   IWELABI BUTTON CLASSES
   ============================================ */

/* Primary Button (Sunny Peach) - Main CTAs */
.btn-iw-primary,
a.main-btn,
button.main-btn,
.main-btn {
    background: var(--iw-primary) !important;      /* Sunny Peach #FFB88C */
    color: var(--iw-cocoa) !important;             /* Warm Cocoa Brown text */
    border: 1px solid var(--iw-primary) !important;
    border-radius: var(--iw-radius-btn);           /* 16px - child-friendly */
    font-weight: 700;
    padding: 12px 24px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-iw-primary:hover,
a.main-btn:hover,
button.main-btn:hover,
.main-btn:hover {
    background: var(--iw-primary-hover) !important; /* 10% darker peach */
    border-color: var(--iw-primary-hover) !important;
    color: var(--iw-cocoa) !important;
    text-decoration: none;
}

.btn-iw-primary:active,
a.main-btn:active,
button.main-btn:active,
.main-btn:active {
    background: var(--iw-primary-active) !important;
    border-color: var(--iw-primary-active) !important;
}

.btn-iw-primary:focus,
a.main-btn:focus,
button.main-btn:focus,
.main-btn:focus {
    box-shadow: 0 0 0 3px var(--iw-focus-ring);    /* Peach focus ring */
    outline: none;
}

/* Navbar main-btn vertical centering */
nav .main-btn,
.topbar nav .main-btn {
    margin-top: 12px;
}

/* Secondary Button (Lagoon Teal) - Secondary actions */
.btn-iw-secondary,
.btn-iw-teal {
    background: var(--iw-teal) !important;         /* Lagoon Teal #4CB5AE */
    color: #FFFFFF !important;
    border: 1px solid var(--iw-teal) !important;
    border-radius: var(--iw-radius-btn);
    font-weight: 700;
    padding: 12px 24px;
    transition: all 0.2s ease;
}

.btn-iw-secondary:hover,
.btn-iw-teal:hover {
    background: var(--iw-teal-hover) !important;   /* Darker teal */
    border-color: var(--iw-teal-hover) !important;
    color: #FFFFFF !important;
}

/* Outline Button (Cocoa outline) */
.btn-iw-outline,
a.main-btn2,
button.main-btn2,
.main-btn2 {
    background: transparent !important;
    color: var(--iw-cocoa) !important;
    border: 2px solid var(--iw-cocoa) !important;
    border-radius: var(--iw-radius-btn);
    font-weight: 700;
    padding: 11px 23px;
    transition: all 0.2s ease;
}

.btn-iw-outline:hover,
a.main-btn2:hover,
button.main-btn2:hover,
.main-btn2:hover {
    background: var(--iw-cocoa) !important;
    color: var(--iw-vanilla) !important;           /* Creamy Vanilla text */
}

/* Legacy Blue Button - Now uses Teal */
.btn-iw-blue {
    background: var(--iw-teal);                    /* Lagoon Teal */
    color: #FFFFFF;
    border: 1px solid var(--iw-teal);
    border-radius: var(--iw-radius-btn);
    font-weight: 700;
    padding: 12px 24px;
    transition: all 0.2s ease;
}

.btn-iw-blue:hover {
    background: var(--iw-teal-hover);
    border-color: var(--iw-teal-hover);
    color: #FFFFFF;
}

/* Tertiary Button (Low emphasis) */
.btn-iw-tertiary {
    background: transparent;
    color: var(--iw-cocoa);
    border: none;
    font-weight: 600;
    padding: 12px 18px;
    transition: all 0.2s ease;
}

.btn-iw-tertiary:hover {
    background: rgba(59, 47, 47, 0.08);
    text-decoration: underline;
}

/* ============================================
   NAVIGATION & TOPBAR OVERRIDES
   ============================================ */

.topbar {
    background: var(--iw-cocoa) !important;
}

.topbar.transperent.is_stuck {
    background: rgba(59, 47, 47, 0.95) !important;
}

/* Footer */
footer,
.footer,
.copyrights {
    background: var(--iw-cocoa);
    color: var(--iw-text-on-dark);
}

footer a,
.footer a {
    color: var(--iw-ivory);
}

footer a:hover,
.footer a:hover {
    color: var(--iw-primary);
}

/* ============================================
   CARDS & SURFACES
   ============================================ */

.iw-card,
.central-meta {
    background: var(--iw-surface);
    border: 1px solid var(--iw-border);
    border-radius: var(--iw-radius-card);
    box-shadow: var(--iw-shadow-sm);
}

.iw-card-title {
    color: var(--iw-heading);
    font-weight: 700;
}

.iw-card-body {
    color: var(--iw-text);
}

/* ============================================
   PILLS / TAGS
   ============================================ */

.iw-tag,
.pit-tags > a {
    background: rgba(255, 184, 140, 0.20);        /* Sunny Peach tint */
    color: var(--iw-cocoa);                       /* Warm Cocoa Brown text */
    border-radius: var(--iw-radius-pill);
    padding: 6px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background 0.2s ease;
}

.iw-tag:hover,
.pit-tags > a:hover {
    background: rgba(255, 184, 140, 0.35);        /* Stronger peach tint */
    color: var(--iw-cocoa);
    text-decoration: none;
}

/* ============================================
   PROGRESS BARS
   ============================================ */

.iw-progress {
    background: rgba(94, 75, 60, 0.12);           /* Cocoa-based track */
    border-radius: var(--iw-radius-pill);
    height: 8px;
    overflow: hidden;
}

.iw-progress-bar {
    background: var(--iw-teal);                   /* Lagoon Teal for success/progress */
    height: 100%;
    border-radius: var(--iw-radius-pill);
    transition: width 0.3s ease;
}

.iw-progress-milestone {
    background: var(--iw-primary);                /* Sunny Peach for highlights */
}

/* ============================================
   ALERTS & STATES
   ============================================ */

/* Success - Lagoon Teal */
.iw-alert-success,
.alert-success {
    background: var(--iw-success-tint);           /* Teal tint */
    border: 1px solid var(--iw-teal);
    color: #3A9A94;                               /* Darker teal for text */
    border-radius: var(--iw-radius-sm);
    padding: 16px;
}

/* Info - Lagoon Teal */
.iw-alert-info,
.alert-info {
    background: var(--iw-info-tint);              /* Teal tint */
    border: 1px solid var(--iw-teal);
    color: #3A9A94;
    border-radius: var(--iw-radius-sm);
    padding: 16px;
}

/* Warning - Sunny Peach background with Cocoa text */
.iw-alert-warning,
.alert-warning {
    background: var(--iw-warning-tint);           /* Peach tint */
    border: 1px solid var(--iw-primary);
    color: var(--iw-cocoa);                       /* Warm Cocoa Brown text */
    border-radius: var(--iw-radius-sm);
    padding: 16px;
}

/* Error - Red (only error state uses red) */
.iw-alert-error,
.alert-danger {
    background: var(--iw-error-tint);
    border: 1px solid var(--iw-error);
    color: var(--iw-error);
    border-radius: var(--iw-radius-sm);
    padding: 16px;
}

/* ============================================
   FORM INPUTS
   ============================================ */

.iw-input,
input.form-control,
textarea.form-control,
select.form-control {
    border: 1px solid var(--iw-border);
    border-radius: var(--iw-radius-input);
    background: var(--iw-surface);
    color: var(--iw-text);
    padding: 12px 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.iw-input:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
    border-color: var(--iw-primary);
    box-shadow: 0 0 0 3px var(--iw-focus-ring);
    outline: none;
}

/* ============================================
   HERO SECTIONS
   ============================================ */

.iw-hero-overlay {
    background: rgba(59, 47, 47, 0.45);
}

.iw-hero-overlay-warm {
    background: rgba(244, 180, 26, 0.10);
}

.iw-hero-title {
    color: var(--iw-ivory);
}

.iw-hero-subtitle {
    color: var(--iw-text-on-dark);
}

/* Gallery Hero Text */
.big-gallery-name > h3 {
    color: var(--iw-ivory);
}

.big-gallery-name > i {
    color: var(--iw-ivory);
}

/* ============================================
   SECTION BACKGROUNDS
   ============================================ */

/* Background - Creamy Vanilla (default page bg) */
.bg-iw-vanilla,
.bg-vanilla,
.bg-iw-ivory,
.bg-ivory {
    background-color: var(--iw-vanilla) !important; /* #FFF8E1 */
}

/* Background - White (cards, modals) */
.bg-iw-white,
.bg-white {
    background-color: #FFFFFF !important;
}

/* Background - Warm Cocoa Brown (header/footer) */
.bg-iw-cocoa,
.bg-cocoa {
    background-color: var(--iw-cocoa) !important;   /* #5E4B3C */
    color: var(--iw-text-on-dark);                  /* Creamy Vanilla text */
}

/* Background - Sunny Peach (highlights) */
.bg-iw-primary,
.bg-iw-peach,
.bg-peach,
.bg-gold {
    background-color: var(--iw-primary) !important; /* #FFB88C */
    color: var(--iw-cocoa);                         /* Cocoa text */
}

/* Background - Lagoon Teal */
.bg-iw-teal,
.bg-teal {
    background-color: var(--iw-teal) !important;    /* #4CB5AE */
    color: #FFFFFF;
}

/* Gray background override to Creamy Vanilla */
.gray-bg {
    background-color: var(--iw-vanilla) !important;
}

/* ============================================
   DARK MODE TOGGLE BUTTON
   ============================================ */

.dark-mode-toggle {
    background: transparent;
    border: 2px solid var(--iw-border-strong);
    border-radius: var(--iw-radius-pill);
    padding: 8px 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.dark-mode-toggle:hover {
    background: var(--iw-border);
}

.dark-mode-toggle .icon-sun,
.dark-mode-toggle .icon-moon {
    font-size: 1rem;
}

.dark-theme .dark-mode-toggle .icon-sun {
    display: none;
}

.dark-mode-toggle .icon-moon {
    display: none;
}

.dark-theme .dark-mode-toggle .icon-moon {
    display: inline;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text Colors */
.text-iw-primary { color: var(--iw-primary) !important; }   /* Sunny Peach */
.text-iw-peach { color: var(--iw-primary) !important; }     /* Alias */
.text-iw-teal { color: var(--iw-teal) !important; }         /* Lagoon Teal */
.text-iw-cocoa { color: var(--iw-cocoa) !important; }       /* Warm Cocoa Brown */
.text-iw-vanilla { color: var(--iw-vanilla) !important; }   /* Creamy Vanilla */
.text-iw-charcoal { color: var(--iw-charcoal) !important; } /* Charcoal Gray */
.text-iw-green { color: var(--iw-teal) !important; }        /* Legacy: use teal */
.text-iw-blue { color: var(--iw-teal) !important; }         /* Legacy: use teal */
.text-iw-ivory { color: var(--iw-vanilla) !important; }     /* Legacy: use vanilla */
.text-iw-ink { color: var(--iw-charcoal) !important; }      /* Legacy: use charcoal */
.text-iw-muted { color: var(--iw-text-muted) !important; }

/* Borders */
.border-iw { border-color: var(--iw-border) !important; }
.border-iw-strong { border-color: var(--iw-border-strong) !important; }

/* Shadows */
.shadow-iw-sm { box-shadow: var(--iw-shadow-sm) !important; }
.shadow-iw { box-shadow: var(--iw-shadow) !important; }
.shadow-iw-lg { box-shadow: var(--iw-shadow-lg) !important; }

/* Border Radius */
.rounded-iw-btn { border-radius: var(--iw-radius-btn) !important; }
.rounded-iw-card { border-radius: var(--iw-radius-card) !important; }
.rounded-iw-pill { border-radius: var(--iw-radius-pill) !important; }

/* ============================================
   LEFT SIDEBAR - FIXED SIDEBAR
   IWELABI MENU COLOR SYSTEM
   Light neutral background with warm orange accents
   ============================================ */

/* Sidebar Menu Color Variables */
:root {
    /* Menu Item Colors */
    --iw-menu-text: #4B5563;              /* Cool neutral gray - normal state */
    --iw-menu-icon: #6B7280;              /* Slightly lighter gray for icons */
    --iw-menu-text-disabled: #9CA3AF;     /* Disabled text */
    --iw-menu-icon-disabled: #D1D5DB;     /* Disabled icons */
    
    /* Primary Brand Color for Menu (Iwelabi Orange) */
    --iw-menu-primary: #F59E0B;           /* Warm orange for hover/active */
    --iw-menu-hover-bg: rgba(245, 158, 11, 0.08);   /* Primary @ 8% */
    --iw-menu-active-bg: rgba(245, 158, 11, 0.14);  /* Primary @ 14% */
}

/* Left Sidebar Background - Light Neutral */
.fixed-sidebar.left,
.fixed-sidebar.left .menu-left {
    background: #FFFFFF !important;       /* Clean white background */
    border-right: 1px solid #E5E7EB !important; /* Subtle border */
}

/* Left Menu Icons - Normal State */
.fixed-sidebar.left .left-menu > li > a,
.fixed-sidebar.left .left-menu > li > a span {
    color: var(--iw-menu-text) !important;  /* #4B5563 cool gray */
    background: transparent !important;
    transition: all 0.2s ease;
}

.fixed-sidebar.left .left-menu > li > a i,
.fixed-sidebar.left .left-menu > li > a svg {
    color: var(--iw-menu-icon) !important;  /* #6B7280 lighter gray */
    fill: var(--iw-menu-icon) !important;
    transition: all 0.2s ease;
}

/* Left Menu Icons - Hover State */
.fixed-sidebar.left .left-menu > li > a:hover,
.fixed-sidebar.left .left-menu > li > a:hover span,
.fixed-sidebar.left .left-menu > li:hover > a,
.fixed-sidebar.left .left-menu > li:hover > a span {
    color: var(--iw-menu-primary) !important;  /* Warm orange #F59E0B */
    background: var(--iw-menu-hover-bg) !important; /* Primary @ 8% */
}

.fixed-sidebar.left .left-menu > li > a:hover i,
.fixed-sidebar.left .left-menu > li > a:hover svg,
.fixed-sidebar.left .left-menu > li:hover > a i,
.fixed-sidebar.left .left-menu > li:hover > a svg {
    color: var(--iw-menu-primary) !important;  /* Warm orange */
    fill: var(--iw-menu-primary) !important;
}

/* Left Menu Icons - Active/Selected State (MOST IMPORTANT) */
.fixed-sidebar.left .left-menu > li.active > a,
.fixed-sidebar.left .left-menu > li.active > a span,
.fixed-sidebar.left .left-menu > li.selected > a,
.fixed-sidebar.left .left-menu > li.selected > a span {
    color: var(--iw-menu-primary) !important;
    background: var(--iw-menu-active-bg) !important; /* Primary @ 14% */
    font-weight: 500;
    border-left: 3px solid var(--iw-menu-primary) !important; /* Left indicator */
}

.fixed-sidebar.left .left-menu > li.active > a i,
.fixed-sidebar.left .left-menu > li.active > a svg,
.fixed-sidebar.left .left-menu > li.selected > a i,
.fixed-sidebar.left .left-menu > li.selected > a svg {
    color: var(--iw-menu-primary) !important;
    fill: var(--iw-menu-primary) !important;
}

/* Left Menu - Disabled State */
.fixed-sidebar.left .left-menu > li.disabled > a,
.fixed-sidebar.left .left-menu > li.disabled > a span {
    color: var(--iw-menu-text-disabled) !important; /* #9CA3AF */
    cursor: not-allowed;
    opacity: 0.6;
}

.fixed-sidebar.left .left-menu > li.disabled > a i,
.fixed-sidebar.left .left-menu > li.disabled > a svg {
    color: var(--iw-menu-icon-disabled) !important; /* #D1D5DB */
    fill: var(--iw-menu-icon-disabled) !important;
}

/* Menu Toggle Button - Light Theme */
.fixed-sidebar.left .menu-small,
.fixed-sidebar.left .menu-small i {
    color: var(--iw-menu-icon) !important;
}

.fixed-sidebar.left .menu-small:hover,
.fixed-sidebar.left .menu-small:hover i {
    color: var(--iw-menu-primary) !important;
}

/* Expanded Left Menu (Full Width Panel) - Light Theme */
.fixed-sidebar.left .left-menu-full,
.left-menu-full {
    background: #FFFFFF !important;       /* Clean white background */
    border-right: 1px solid #E5E7EB !important;
}

/* Expanded Menu - Links Normal State */
.left-menu-full .menu-slide > li > a,
.left-menu-full .menu-slide > li > a span {
    color: var(--iw-menu-text) !important;  /* #4B5563 */
    background: transparent !important;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.left-menu-full .menu-slide > li > a i,
.left-menu-full .menu-slide > li > a svg {
    color: var(--iw-menu-icon) !important;  /* #6B7280 */
    fill: var(--iw-menu-icon) !important;
}

/* Expanded Menu - Link Hover */
.left-menu-full .menu-slide > li > a:hover,
.left-menu-full .menu-slide > li > a:hover span,
.left-menu-full .menu-slide > li:hover > a,
.left-menu-full .menu-slide > li:hover > a span {
    color: var(--iw-menu-primary) !important;  /* Warm orange */
    background: var(--iw-menu-hover-bg) !important;
}

.left-menu-full .menu-slide > li > a:hover i,
.left-menu-full .menu-slide > li > a:hover svg,
.left-menu-full .menu-slide > li:hover > a i,
.left-menu-full .menu-slide > li:hover > a svg {
    color: var(--iw-menu-primary) !important;
    fill: var(--iw-menu-primary) !important;
}

/* Expanded Menu - Active State */
.left-menu-full .menu-slide > li.active > a,
.left-menu-full .menu-slide > li.active > a span {
    color: var(--iw-menu-primary) !important;
    background: var(--iw-menu-active-bg) !important;
    font-weight: 500;
    border-left: 3px solid var(--iw-menu-primary) !important;
}

.left-menu-full .menu-slide > li.active > a i,
.left-menu-full .menu-slide > li.active > a svg {
    color: var(--iw-menu-primary) !important;
    fill: var(--iw-menu-primary) !important;
}

/* Submenu Background - Light Theme */
.left-menu-full .menu-slide .submenu {
    background: #F8F9FB !important;       /* Very light gray */
}

/* Submenu Links */
.left-menu-full .menu-slide .submenu li a {
    color: var(--iw-menu-text) !important; /* #4B5563 */
}

/* Submenu Links - Hover */
.left-menu-full .menu-slide .submenu li a:hover,
.left-menu-full .menu-slide .submenu li:hover > a {
    color: var(--iw-menu-primary) !important;
    background: var(--iw-menu-hover-bg) !important;
}

/* Close Menu Button - Light Theme */
.left-menu-full .closd-f-menu,
.left-menu-full .closd-f-menu i,
.left-menu-full .closd-f-menu svg {
    color: var(--iw-menu-icon) !important;
}

.left-menu-full .closd-f-menu:hover,
.left-menu-full .closd-f-menu:hover i,
.left-menu-full .closd-f-menu:hover svg {
    color: var(--iw-menu-primary) !important;
}

/* Scrollbar Styling for Left Menu - Light Theme */
.fixed-sidebar.left .ps-scrollbar-y-rail,
.left-menu-full .ps-scrollbar-y-rail {
    background: rgba(0, 0, 0, 0.05) !important;
}

.fixed-sidebar.left .ps-scrollbar-y,
.left-menu-full .ps-scrollbar-y {
    background: var(--iw-menu-primary) !important; /* Orange scrollbar */
}

/* ============================================
   SIDEBAR WIDGETS (Right/Content Sidebars)
   Also uses the new menu color system
   ============================================ */

/* Sidebar Widget Background */
.sidebar .widget {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
}

/* Widget Title */
.sidebar .widget-title {
    color: var(--iw-menu-text) !important;
    border-bottom-color: #E5E7EB !important;
}

.sidebar .widget-title::before {
    background: var(--iw-menu-primary) !important; /* Orange accent bar */
}

/* Widget Navigation Links - Normal */
.sidebar .widget li > a,
.sidebar .widget .navi li > a,
ul.navi > li > a {
    color: var(--iw-menu-text) !important;  /* #4B5563 */
    transition: all 0.2s ease;
}

.sidebar .widget li > a i,
.sidebar .widget li > a svg,
.sidebar .widget .navi li > a i,
ul.navi > li > a i,
ul.navi > li svg {
    color: var(--iw-menu-icon) !important;  /* #6B7280 */
}

/* Widget Navigation Links - Hover */
.sidebar .widget li > a:hover,
.sidebar .widget .navi li > a:hover,
ul.navi > li > a:hover {
    color: var(--iw-menu-primary) !important;
    background: var(--iw-menu-hover-bg) !important;
    padding-left: 5px;
}

.sidebar .widget li > a:hover i,
.sidebar .widget li > a:hover svg,
.sidebar .widget .navi li > a:hover i,
ul.navi > li > a:hover i,
ul.navi > li:hover svg {
    color: var(--iw-menu-primary) !important;
}

/* Widget Navigation Links - Active */
.sidebar .widget li.active > a,
.sidebar .widget .navi li.active > a,
ul.navi > li.active > a,
.sidebar .widget li > a.active,
ul.navi > li > a.active {
    color: var(--iw-menu-primary) !important;
    background: var(--iw-menu-active-bg) !important;
    font-weight: 500;
    border-left: 3px solid var(--iw-menu-primary) !important;
}

.sidebar .widget li.active > a i,
.sidebar .widget li.active > a svg,
ul.navi > li.active > a i,
ul.navi > li > a.active i {
    color: var(--iw-menu-primary) !important;
}

/* ============================================
   NAV TABS (Vertical) - Settings Page
   ============================================ */

.nav-tabs--vertical .nav-item .nav-link {
    color: var(--iw-menu-text) !important;
    background: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    transition: all 0.2s ease;
}

.nav-tabs--vertical .nav-item .nav-link i {
    color: var(--iw-menu-icon) !important;
    margin-right: 10px;
}

.nav-tabs--vertical .nav-item .nav-link:hover {
    color: var(--iw-menu-primary) !important;
    background: var(--iw-menu-hover-bg) !important;
}

.nav-tabs--vertical .nav-item .nav-link:hover i {
    color: var(--iw-menu-primary) !important;
}

.nav-tabs--vertical .nav-item .nav-link.active {
    color: var(--iw-menu-primary) !important;
    background: var(--iw-menu-active-bg) !important;
    font-weight: 500;
    border-left: 3px solid var(--iw-menu-primary) !important;
}

.nav-tabs--vertical .nav-item .nav-link.active i {
    color: var(--iw-menu-primary) !important;
}

/* ============================================
   USER PROFILE HEADER COMPONENT
   Brand colors for profile section
   ============================================ */

/* Cover Photo Container - Fixed Height */
.user-profile > figure {
    min-height: 350px;
    max-height: 360px;
    height: 370px;
    overflow: hidden;
    position: relative;
}

.user-profile > figure > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Responsive Cover Photo Heights */
@media (max-width: 991px) {
    .user-profile > figure {
        min-height: 180px;
        max-height: 280px;
        height: 220px;
    }
}

@media (max-width: 576px) {
    .user-profile > figure {
        min-height: 150px;
        max-height: 220px;
        height: 180px;
    }
}

/* Profile Section Background */
.user-profile .profile-section {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
}

/* Profile Author Name */
.user-profile .profile-author .author-name {
    color: var(--iw-menu-text) !important; /* #4B5563 */
    transition: color 0.2s ease;
    text-decoration: none !important;
}

.user-profile .profile-author .author-name:hover {
    color: var(--iw-menu-primary) !important; /* #F59E0B */
    text-decoration: none !important;
}

/* Profile Author Country/Email */
.user-profile .profile-author .country {
    color: var(--iw-menu-icon) !important; /* #6B7280 */
}

/* Profile Menu - Normal State */
.user-profile .profile-menu > li > a {
    color: var(--iw-menu-text) !important; /* #4B5563 */
    background: transparent !important;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
    text-decoration: none !important;
}

/* Profile Menu - Hover State */
.user-profile .profile-menu > li > a:hover {
    color: var(--iw-menu-primary) !important; /* #F59E0B */
    background: var(--iw-menu-hover-bg) !important;
    border-bottom-color: var(--iw-menu-primary) !important;
    text-decoration: none !important;
}

/* Profile Menu - Active State */
.user-profile .profile-menu > li > a.active {
    color: var(--iw-menu-primary) !important; /* #F59E0B */
    background: var(--iw-menu-active-bg) !important;
    font-weight: 500;
    border-bottom: 2px solid var(--iw-menu-primary) !important;
    text-decoration: none !important;
}

/* Profile Controls (icons on cover) */
.user-profile .profile-controls > li > a {
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--iw-menu-text) !important; /* #4B5563 */
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.user-profile .profile-controls > li > a:hover {
    background: var(--iw-menu-primary) !important; /* #F59E0B */
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.user-profile .profile-controls > li > a i,
.user-profile .profile-controls > li > a svg {
    color: inherit !important;
}

/* Edit Setting Dropdown */
.user-profile .edit-seting {
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--iw-menu-text) !important;
}

.user-profile .edit-seting:hover {
    background: var(--iw-menu-primary) !important;
    color: #FFFFFF !important;
}

.user-profile .edit-seting i,
.user-profile .edit-seting svg {
    color: inherit !important;
}

/* More Dropdown Menu */
.user-profile .more-dropdown {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.user-profile .more-dropdown > li > a {
    color: var(--iw-menu-text) !important; /* #4B5563 */
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.user-profile .more-dropdown > li > a:hover {
    color: var(--iw-menu-primary) !important; /* #F59E0B */
    background: var(--iw-menu-hover-bg) !important;
    text-decoration: none !important;
}

/* Edit Profile Photo / Cover Photo Buttons */
.user-profile .edit-pp .fileContainer,
.user-profile .edit-dp .fileContainer {
    background: transparent !important;
    color: #FFFFFF !important;
    transition: all 0.2s ease;
}

.user-profile .edit-pp .fileContainer:hover,
.user-profile .edit-dp .fileContainer:hover {
    background: transparent !important;
}

.user-profile .edit-pp .fileContainer i,
.user-profile .edit-dp .fileContainer i,
.user-profile .edit-pp .fileContainer svg,
.user-profile .edit-dp .fileContainer svg {
    color: var(--iw-menu-primary) !important; /* #F59E0B */
}

/* Hide the file input */
.user-profile .edit-pp input[type="file"],
.user-profile .edit-dp input[type="file"] {
    background: transparent !important;
}

/* Profile Author Thumb Border */
.user-profile .profile-author-thumb img {
    border: 3px solid var(--iw-menu-primary) !important; /* #F59E0B */
}

/* ============================================
   PROFILE UPLOAD MODALS
   ============================================ */

#avatarModal .modal-content,
#coverPhotoModal .modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

#avatarModal .modal-header,
#coverPhotoModal .modal-header {
    background: linear-gradient(135deg, var(--iw-menu-primary) 0%, #e8900b 100%);
    color: #FFFFFF;
    border-radius: 12px 12px 0 0;
    border-bottom: none;
    padding: 1rem 1.5rem;
}

#avatarModal .modal-header .modal-title,
#coverPhotoModal .modal-header .modal-title {
    color: #FFFFFF !important;
    font-weight: 600;
}

#avatarModal .modal-header .close,
#coverPhotoModal .modal-header .close {
    color: #FFFFFF;
    opacity: 0.8;
    text-shadow: none;
}

#avatarModal .modal-header .close:hover,
#coverPhotoModal .modal-header .close:hover {
    opacity: 1;
    color: #FFFFFF;
}

#avatarModal .modal-body,
#coverPhotoModal .modal-body {
    padding: 1.5rem;
}

#avatarModal .modal-footer,
#coverPhotoModal .modal-footer {
    border-top: 1px solid #eee;
    padding: 1rem 1.5rem;
}

#avatarModal .form-control,
#coverPhotoModal .form-control {
    border-radius: 8px;
    padding: 10px 12px;
    border: 1px solid #ddd;
}

#avatarModal .form-control:focus,
#coverPhotoModal .form-control:focus {
    border-color: var(--iw-menu-primary);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

#avatarModal .btn-primary,
#coverPhotoModal .btn-primary {
    background-color: var(--iw-menu-primary) !important;
    border-color: var(--iw-menu-primary) !important;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 500;
}

#avatarModal .btn-primary:hover,
#coverPhotoModal .btn-primary:hover {
    background-color: #e8900b !important;
    border-color: #e8900b !important;
}

#avatarModal .btn-secondary,
#coverPhotoModal .btn-secondary {
    border-radius: 8px;
    padding: 10px 20px;
}

/* ============================================
   PROFILE TAB NAVIGATION (LINKS-TAB)
   ============================================ */

/* Active tab arrow indicator - use brand teal */
.links-tab li.nav-item > a.active:after {
    border-bottom-color: var(--iw-teal) !important;
}

/* Active tab text color */
.links-tab li.nav-item > a.active {
    color: var(--iw-teal) !important;
}

/* Tab hover state */
.links-tab li.nav-item > a:hover {
    color: var(--iw-teal) !important;
}

/* Tab link normal state */
.links-tab li.nav-item > a {
    color: var(--iw-charcoal) !important;
    text-decoration: none !important;
}

/* ============================================
   USER DROPDOWN MENU (TOPBAR)
   ============================================ */

/* User setting dropdown links */
.user-setting .seting-title {
    color: var(--iw-charcoal) !important;
}

.user-setting .seting-title a {
    color: var(--iw-teal) !important;
}

.user-setting .chat-setting li a,
.user-setting .log-out li a {
    color: var(--iw-charcoal) !important;
    text-decoration: none !important;
}

.user-setting .chat-setting li a:hover,
.user-setting .log-out li a:hover {
    color: var(--iw-teal) !important;
}

.user-setting .log-out li a i {
    color: var(--iw-cocoa) !important;
}

/* ============================================
   Z-INDEX FIXES
   ============================================ */

/* Ensure sticky topbar stays above pricing cards */
.topbar.is_stuck,
.topbar.transperent.is_stuck {
    z-index: 99999 !important;
    position: fixed !important;
}

/* Ensure pricing cards don't overlap navbar */
.pricing-card,
.pricing-card.popular {
    z-index: 0 !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    :root {
        --iw-section-py: var(--iw-section-py-mobile);
        --iw-card-padding: var(--iw-card-padding-sm);
    }
    
    .btn-iw-primary,
    .btn-iw-outline,
    .main-btn {
        padding: 10px 20px;
        font-size: 0.9375rem;
    }
}