/**
 * Special Accessibility Themes (Sayt ranglari)
 * Inspired by Agrobank & WCAG Accessibility Standards
 */

/* Dropdown Container adjustments */
header .container .wrap .colRight .item.specialFeatured .specialFeaturedBlock,
.item.specialFeatured .specialFeaturedBlock {
    min-width: 270px !important;
    width: max-content !important;
    max-width: 320px !important;
    padding: 24px 20px 20px 20px !important;
    position: absolute !important;
    top: 60px !important;
    right: 0 !important;
    left: auto !important;
    z-index: 1000 !important;
    background-color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    border: 1px solid #e0e0e0 !important;
}

.specialFeaturedBlockWraps {
    position: relative !important;
}

/* Close button in dropdown */
.closeSpecialBlock {
    position: absolute;
    top: -14px;
    right: -10px;
    width: 26px;
    height: 26px;
    font-size: 22px;
    line-height: 22px;
    text-align: center;
    color: #777777;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.closeSpecialBlock:hover {
    color: #000000;
    background-color: #f0f0f0;
}

/* Title labels */
header .container .wrap .colRight .item.specialFeatured .specialFeaturedBlock .specialFeaturedBlockWraps span,
.specialFeaturedBlockWraps span.featureTitle {
    font-family: 'Mulish', 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #212529 !important;
    display: block !important;
    margin-bottom: 10px !important;
    letter-spacing: 0.2px !important;
}

/* 5 Site Color Buttons Container */
.typeSiteColors {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 6px 0 22px 0 !important;
    padding: 0 !important;
}

/* Color Buttons Common */
.typeSiteColors .color-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    font-family: 'Roboto', 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 19px !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, outline 0.15s ease !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    user-select: none !important;
    text-align: center !important;
}

.typeSiteColors .color-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

/* Active indicator matching Agrobank */
.typeSiteColors .color-btn.active {
    outline: 2px solid #00a651 !important;
    outline-offset: 2px !important;
}

/* 1. Default (White background, Dark text) */
.typeSiteColors .color-btn-1 {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #232636 !important;
}
.typeSiteColors .color-btn-1:hover {
    background-color: #f5f5f5 !important;
}

/* 2. Dark Navy / Black (Dark background, White text) */
.typeSiteColors .color-btn-2 {
    background-color: #232636 !important;
    color: #ffffff !important;
    border: 1px solid #232636 !important;
}
.typeSiteColors .color-btn-2:hover {
    background-color: #383b4a !important;
}

/* 3. Light Blue (Light blue background, Dark blue text) */
.typeSiteColors .color-btn-3 {
    background-color: #9dd1ff !important;
    color: #063462 !important;
    border: 1px solid #7cb9f2 !important;
}
.typeSiteColors .color-btn-3:hover {
    background-color: #b7ddff !important;
}

/* 4. Sand / Beige (Warm beige background, Dark brown text) */
.typeSiteColors .color-btn-4 {
    background-color: #e8d8be !important;
    color: #3b2716 !important;
    border: 1px solid #c4a484 !important;
}
.typeSiteColors .color-btn-4:hover {
    background-color: #dfcbaf !important;
}

/* 5. Dark Brown / Lime (Dark brown background, Lime green text) */
.typeSiteColors .color-btn-5 {
    background-color: #3b2716 !important;
    color: #adff2f !important;
    border: 1px solid #3b2716 !important;
}
.typeSiteColors .color-btn-5:hover {
    background-color: #553920 !important;
}

/* Reset settings button */
.siteResetWrap {
    margin-top: 18px !important;
    padding-top: 14px !important;
    border-top: 1px solid #eef0f2 !important;
    text-align: left !important;
}

.btnResetSiteSettings {
    display: inline-block !important;
    color: #e53935 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease, color 0.2s ease !important;
}

.btnResetSiteSettings:hover {
    opacity: 0.8 !important;
    color: #c62828 !important;
}

/* ==========================================================================
   THEME PALETTES & GLOBAL SITE COLOR OVERRIDES
   ========================================================================== */

/* Theme 2: Dark / Black & White */
html.theme-mode-2, body.theme-mode-2 {
    --vi-bg: #121212;
    --vi-card-bg: #1e1e1e;
    --vi-header-bg: #181818;
    --vi-footer-bg: #181818;
    --vi-text: #ffffff;
    --vi-text-muted: #b5b5b5;
    --vi-border: #3d3d3d;
    --vi-link: #82b1ff;
    --vi-input-bg: #242424;
}

/* Theme 3: Light Blue */
html.theme-mode-3, body.theme-mode-3 {
    --vi-bg: #cbe4fc;
    --vi-card-bg: #e2f0fd;
    --vi-header-bg: #b6daf7;
    --vi-footer-bg: #b6daf7;
    --vi-text: #063462;
    --vi-text-muted: #1b4b7c;
    --vi-border: #8ec2f2;
    --vi-link: #022044;
    --vi-input-bg: #ffffff;
}

/* Theme 4: Sand / Beige */
html.theme-mode-4, body.theme-mode-4 {
    --vi-bg: #f4eee1;
    --vi-card-bg: #faf6ee;
    --vi-header-bg: #ecdcc3;
    --vi-footer-bg: #ecdcc3;
    --vi-text: #3b2716;
    --vi-text-muted: #5e4026;
    --vi-border: #c9b193;
    --vi-link: #23150a;
    --vi-input-bg: #ffffff;
}

/* Theme 5: Dark Brown / Lime */
html.theme-mode-5, body.theme-mode-5 {
    --vi-bg: #3b2716;
    --vi-card-bg: #4a321d;
    --vi-header-bg: #281a0e;
    --vi-footer-bg: #281a0e;
    --vi-text: #adff2f;
    --vi-text-muted: #c7ff66;
    --vi-border: #5e3f24;
    --vi-link: #d8ff85;
    --vi-input-bg: #281a0e;
}

/* ---------------- Global Theme Application ---------------- */

body.theme-mode-2,
body.theme-mode-3,
body.theme-mode-4,
body.theme-mode-5 {
    background-color: var(--vi-bg) !important;
    color: var(--vi-text) !important;
}

/* Layout Wrappers & Sections */
body.theme-mode-2 #panel, body.theme-mode-2 .page, body.theme-mode-2 main, body.theme-mode-2 section,
body.theme-mode-2 [class*="section"], body.theme-mode-2 .wrapper, body.theme-mode-2 .mainPage,
body.theme-mode-2 .container, body.theme-mode-2 .pageOffice,
body.theme-mode-3 #panel, body.theme-mode-3 .page, body.theme-mode-3 main, body.theme-mode-3 section,
body.theme-mode-3 [class*="section"], body.theme-mode-3 .wrapper, body.theme-mode-3 .mainPage,
body.theme-mode-3 .container, body.theme-mode-3 .pageOffice,
body.theme-mode-4 #panel, body.theme-mode-4 .page, body.theme-mode-4 main, body.theme-mode-4 section,
body.theme-mode-4 [class*="section"], body.theme-mode-4 .wrapper, body.theme-mode-4 .mainPage,
body.theme-mode-4 .container, body.theme-mode-4 .pageOffice,
body.theme-mode-5 #panel, body.theme-mode-5 .page, body.theme-mode-5 main, body.theme-mode-5 section,
body.theme-mode-5 [class*="section"], body.theme-mode-5 .wrapper, body.theme-mode-5 .mainPage,
body.theme-mode-5 .container, body.theme-mode-5 .pageOffice {
    background-color: var(--vi-bg) !important;
}

/* Header, Navigation & Footer */
body.theme-mode-2 header, body.theme-mode-2 header nav, body.theme-mode-2 footer,
body.theme-mode-2 .mobileMenu, body.theme-mode-2 .header-top, body.theme-mode-2 .nav-bar,
body.theme-mode-3 header, body.theme-mode-3 header nav, body.theme-mode-3 footer,
body.theme-mode-3 .mobileMenu, body.theme-mode-3 .header-top, body.theme-mode-3 .nav-bar,
body.theme-mode-4 header, body.theme-mode-4 header nav, body.theme-mode-4 footer,
body.theme-mode-4 .mobileMenu, body.theme-mode-4 .header-top, body.theme-mode-4 .nav-bar,
body.theme-mode-5 header, body.theme-mode-5 header nav, body.theme-mode-5 footer,
body.theme-mode-5 .mobileMenu, body.theme-mode-5 .header-top, body.theme-mode-5 .nav-bar {
    background-color: var(--vi-header-bg) !important;
    color: var(--vi-text) !important;
}

/* Cards, Content Blocks, Popups, Dropdowns */
body.theme-mode-2 .card, body.theme-mode-2 [class*="card"], body.theme-mode-2 .dropdown-content,
body.theme-mode-2 .item, body.theme-mode-2 .wraps, body.theme-mode-2 .advantageBlock,
body.theme-mode-2 .section2__item, body.theme-mode-2 .tabContent, body.theme-mode-2 .block,
body.theme-mode-2 .calculatorCredit, body.theme-mode-2 .formCalculate,
body.theme-mode-3 .card, body.theme-mode-3 [class*="card"], body.theme-mode-3 .dropdown-content,
body.theme-mode-3 .item, body.theme-mode-3 .wraps, body.theme-mode-3 .advantageBlock,
body.theme-mode-3 .section2__item, body.theme-mode-3 .tabContent, body.theme-mode-3 .block,
body.theme-mode-3 .calculatorCredit, body.theme-mode-3 .formCalculate,
body.theme-mode-4 .card, body.theme-mode-4 [class*="card"], body.theme-mode-4 .dropdown-content,
body.theme-mode-4 .item, body.theme-mode-4 .wraps, body.theme-mode-4 .advantageBlock,
body.theme-mode-4 .section2__item, body.theme-mode-4 .tabContent, body.theme-mode-4 .block,
body.theme-mode-4 .calculatorCredit, body.theme-mode-4 .formCalculate,
body.theme-mode-5 .card, body.theme-mode-5 [class*="card"], body.theme-mode-5 .dropdown-content,
body.theme-mode-5 .item, body.theme-mode-5 .wraps, body.theme-mode-5 .advantageBlock,
body.theme-mode-5 .section2__item, body.theme-mode-5 .tabContent, body.theme-mode-5 .block,
body.theme-mode-5 .calculatorCredit, body.theme-mode-5 .formCalculate {
    background-color: var(--vi-card-bg) !important;
    color: var(--vi-text) !important;
}

/* Typography */
body.theme-mode-2 h1, body.theme-mode-2 h2, body.theme-mode-2 h3, body.theme-mode-2 h4, body.theme-mode-2 h5, body.theme-mode-2 h6,
body.theme-mode-2 p, body.theme-mode-2 span:not(.closeSpecialBlock), body.theme-mode-2 li, body.theme-mode-2 dt, body.theme-mode-2 dd,
body.theme-mode-2 td, body.theme-mode-2 th, body.theme-mode-2 label, body.theme-mode-2 strong, body.theme-mode-2 b,
body.theme-mode-3 h1, body.theme-mode-3 h2, body.theme-mode-3 h3, body.theme-mode-3 h4, body.theme-mode-3 h5, body.theme-mode-3 h6,
body.theme-mode-3 p, body.theme-mode-3 span:not(.closeSpecialBlock), body.theme-mode-3 li, body.theme-mode-3 dt, body.theme-mode-3 dd,
body.theme-mode-3 td, body.theme-mode-3 th, body.theme-mode-3 label, body.theme-mode-3 strong, body.theme-mode-3 b,
body.theme-mode-4 h1, body.theme-mode-4 h2, body.theme-mode-4 h3, body.theme-mode-4 h4, body.theme-mode-4 h5, body.theme-mode-4 h6,
body.theme-mode-4 p, body.theme-mode-4 span:not(.closeSpecialBlock), body.theme-mode-4 li, body.theme-mode-4 dt, body.theme-mode-4 dd,
body.theme-mode-4 td, body.theme-mode-4 th, body.theme-mode-4 label, body.theme-mode-4 strong, body.theme-mode-4 b,
body.theme-mode-5 h1, body.theme-mode-5 h2, body.theme-mode-5 h3, body.theme-mode-5 h4, body.theme-mode-5 h5, body.theme-mode-5 h6,
body.theme-mode-5 p, body.theme-mode-5 span:not(.closeSpecialBlock), body.theme-mode-5 li, body.theme-mode-5 dt, body.theme-mode-5 dd,
body.theme-mode-5 td, body.theme-mode-5 th, body.theme-mode-5 label, body.theme-mode-5 strong, body.theme-mode-5 b {
    color: var(--vi-text) !important;
}

/* Links */
body.theme-mode-2 a:not(.btn):not(.color-btn):not(.btnResetSiteSettings),
body.theme-mode-3 a:not(.btn):not(.color-btn):not(.btnResetSiteSettings),
body.theme-mode-4 a:not(.btn):not(.color-btn):not(.btnResetSiteSettings),
body.theme-mode-5 a:not(.btn):not(.color-btn):not(.btnResetSiteSettings) {
    color: var(--vi-link) !important;
}

/* Borders */
body.theme-mode-2 *:not(.color-btn),
body.theme-mode-3 *:not(.color-btn),
body.theme-mode-4 *:not(.color-btn),
body.theme-mode-5 *:not(.color-btn) {
    border-color: var(--vi-border) !important;
}

/* Inputs & Form Controls */
body.theme-mode-2 input:not([type="radio"]):not([type="checkbox"]),
body.theme-mode-2 select, body.theme-mode-2 textarea,
body.theme-mode-3 input:not([type="radio"]):not([type="checkbox"]),
body.theme-mode-3 select, body.theme-mode-3 textarea,
body.theme-mode-4 input:not([type="radio"]):not([type="checkbox"]),
body.theme-mode-4 select, body.theme-mode-4 textarea,
body.theme-mode-5 input:not([type="radio"]):not([type="checkbox"]),
body.theme-mode-5 select, body.theme-mode-5 textarea {
    background-color: var(--vi-input-bg) !important;
    color: var(--vi-text) !important;
    border-color: var(--vi-border) !important;
}

/* Dropdown popups in accessibility mode */
body.theme-mode-2 .specialFeaturedBlock,
body.theme-mode-3 .specialFeaturedBlock,
body.theme-mode-4 .specialFeaturedBlock,
body.theme-mode-5 .specialFeaturedBlock {
    background-color: var(--vi-card-bg) !important;
    border: 1px solid var(--vi-border) !important;
}

/* Preserve fixed identity colors for dropdown buttons in ALL modes */
.typeSiteColors .color-btn-1 {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #232636 !important;
}
.typeSiteColors .color-btn-2 {
    background-color: #232636 !important;
    color: #ffffff !important;
    border: 1px solid #232636 !important;
}
.typeSiteColors .color-btn-3 {
    background-color: #9dd1ff !important;
    color: #063462 !important;
    border: 1px solid #7cb9f2 !important;
}
.typeSiteColors .color-btn-4 {
    background-color: #e8d8be !important;
    color: #3b2716 !important;
    border: 1px solid #c4a484 !important;
}
.typeSiteColors .color-btn-5 {
    background-color: #3b2716 !important;
    color: #adff2f !important;
    border: 1px solid #3b2716 !important;
}

/* Grayscale images in Theme 2 (Black and White) */
body.theme-mode-2 img {
    filter: grayscale(100%) !important;
}