/* FMCG Barometer - Custom Design System */

/* @import url('style-header.css'); */
@import url('fonts.css');
@import url('icons.css');

:root {
    /* Brand Colors */
    --bs-primary: #FFC828;
    --bs-primary-rgb: 255, 200, 40;
    --bs-secondary: #3D3D49;
    --bs-secondary-rgb: 61, 61, 73;
    --bs-text-gray: #555555;

    /* Additional Palette */
    --bs-dark: #1A1B21;
    --bs-body-bg: #FFFFFF;
    --bs-body-color: #3D3D49;
    --bs-light: #F7F5F5;

    /* Typography */
    --bs-font-sans-serif: 'KantarBrownWeb', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-headings-font-family: var(--bs-font-sans-serif);
    --bs-headings-font-weight: 400;

    /* Components */
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 2px;
    --bs-border-radius-lg: 8px;

    /* Layout */
    --container-padding: 25px;
    --container-max-width: calc(100% - (var(--container-padding) * 2));

    /* Heading Font Sizes */
    --body-font-size: 16px;
    --h1-font-size: 26px;
    --h2-font-size: 24px;
    --h3-font-size: 20px;
    --h4-font-size: 16px;
    --h5-font-size: 14px;
    --h6-font-size: 12px;

    /* Form components */
    --bs-form-control-bg: transparent;
    --bs-form-check-input-checked-bg-color: var(--bs-secondary);
    --bs-form-check-input-checked-border-color: var(--bs-secondary);
    --bs-form-check-input-focus-border-color: var(--bs-secondary);
    --bs-form-check-input-focus-box-shadow: 0 0 0 0.25rem rgba(255, 200, 40, 0.25);

    /* Links */
    --bs-link-color: #3D3D49;
    --bs-link-color-rgb: 61, 61, 73;
    --bs-link-hover-color: #e5b021;
    --bs-link-hover-color-rgb: 229, 176, 33;
    --bs-white: #FFFFFF;
    --bs-black: #000000;
    /* Primary and Secondary States */
    --bs-primary-hover: #e5b021;
    --bs-primary-active: #d9a71e;
    --bs-secondary-hover: #2d2d36;
    --bs-secondary-active: #1e1e24;
    /* Grays */
    --bs-gray-light-medium: #BEBEBE;
    --bs-gray-light: #E6E6E6;
    --bs-gray-dark: #696969;
    --bs-gray-lightest: #fafafa;
    --bs-gray-90: #909090;
    /* Other Colors */
    --bs-brown-dark: #574104;
    --bs-red: #d32f2f;
    --bs-red-bright: #e31b23;
    --bs-pink: #d3145a;
    --bs-magenta-dark: #8b1d41;
    --bs-orange-light: #fac55e;
    --bs-orange: #ff8f1f;
    /* Alpha Colors */
    --bs-black-alpha-03: rgba(0, 0, 0, 0.03);
    --bs-black-alpha-04: rgba(0, 0, 0, 0.04);
    --bs-black-alpha-05: rgba(0, 0, 0, 0.05);
    --bs-black-alpha-08: rgba(0, 0, 0, 0.08);
    --bs-black-alpha-10: rgba(0, 0, 0, 0.1);
    --bs-black-alpha-16: rgba(0, 0, 0, 0.161);
    --bs-black-alpha-20: rgba(0, 0, 0, 0.2);
    --bs-black-alpha-25: rgba(0, 0, 0, 0.25);
    --bs-black-alpha-40: rgba(0, 0, 0, 0.4);
    --bs-black-alpha-65: rgba(0, 0, 0, 0.65);
    --bs-white-alpha-03: rgba(255, 255, 255, 0.03);
    --bs-white-alpha-04: rgba(255, 255, 255, 0.04);
    --bs-white-alpha-05: rgba(255, 255, 255, 0.05);
    --bs-white-alpha-06: rgba(255, 255, 255, 0.06);
    --bs-white-alpha-08: rgba(255, 255, 255, 0.08);
    --bs-white-alpha-20: rgba(255, 255, 255, 0.2);
    --bs-white-alpha-40: rgba(255, 255, 255, 0.4);
    --bs-white-alpha-65: rgba(255, 255, 255, 0.65);
    --bs-white-alpha-70: rgba(255, 255, 255, 0.7);
    --bs-white-alpha-75: rgba(255, 255, 255, 0.75);
    --bs-primary-alpha-10: rgba(255, 200, 40, 0.1);
    --bs-primary-alpha-25: rgba(255, 200, 40, 0.25);
    --bs-primary-hover-alpha-10: rgba(229, 176, 33, 0.1);
    --bs-dark-alpha-85: rgba(30, 31, 38, 0.85);
}

.bg-light {
    background-color: var(--bs-light) !important;
}

/* ===================== Start Bootstrap Overrides ===================== */
/* Base Styles */
body {
    font-family: var(--bs-font-sans-serif);
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    font-size: var(--body-font-size);
    line-height: 1.3;
    font-weight: 300;
}

img,
svg {
    max-width: 100%;
    height: auto;
}

.container,
.container-fluid {
    padding-left: var(--container-padding) !important;
    padding-right: var(--container-padding) !important;
}

.container {
    max-width: calc(var(--container-max-width) + (var(--container-padding) * 2)) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--bs-headings-font-weight);
}

.h1,
h1 {
    font-size: var(--h1-font-size);
}

.h2,
h2 {
    font-size: var(--h2-font-size);
}

.h3,
h3 {
    font-size: var(--h3-font-size);
}

.h4,
h4 {
    font-size: var(--h4-font-size);
}

.h5,
h5 {
    font-size: var(--h5-font-size);
}

.h6,
h6 {
    font-size: var(--h6-font-size);
}

.btn {
    --bs-btn-padding-y: 0.55rem;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-font-size: 16px;
    --bs-btn-font-weight: 400;
    --bs-btn-border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Visual offset to fix custom font vertical alignment */
    padding-top: calc(var(--bs-btn-padding-y) + 2px);
    padding-bottom: calc(var(--bs-btn-padding-y) - 0px);
    transition: all 0.3s ease;
}

.btn-primary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--bs-primary-hover);
    --bs-btn-hover-border-color: var(--bs-primary-hover);
    --bs-btn-active-color: var(--bs-secondary);
    --bs-btn-active-bg: var(--bs-primary-active);
    --bs-btn-active-border-color: var(--bs-primary-active);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-disabled-color: var(--bs-secondary);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary-hover);
    --bs-btn-hover-color: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-primary-hover);
    --bs-btn-active-color: var(--bs-secondary);
    --bs-btn-active-bg: var(--bs-primary-active);
    --bs-btn-active-border-color: var(--bs-primary-active);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-disabled-color: var(--bs-secondary);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-secondary {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-secondary-hover);
    --bs-btn-hover-border-color: var(--bs-secondary-hover);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-secondary-active);
    --bs-btn-active-border-color: var(--bs-secondary-active);
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--bs-secondary-hover);
    --bs-btn-disabled-border-color: var(--bs-secondary-hover);
}

.btn-white {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color: var(--bs-white);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-gray-light);
    --bs-btn-hover-border-color: var(--bs-gray-light);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-gray-light);
    --bs-btn-active-border-color: var(--bs-gray-light);
    --bs-btn-focus-shadow-rgb: 255, 255, 255;
}

.btn-outline-light {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-gray-light);
    --bs-btn-hover-bg: var(--bs-primary-hover);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-border-color: var(--bs-primary-hover);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-primary-active);
    --bs-btn-active-border-color: var(--bs-primary-active);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-disabled-border-color: var(--bs-gray-light);
}

.dropdown-menu-dark {
    --bs-dropdown-bg: var(--bs-secondary);
    --bs-dropdown-link-active-bg: var(--bs-primary);
}

/* Custom Dropdown Toggle Arrow */
.dropdown-toggle::after {
    content: "" !important;
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    border-right: 1px solid currentColor !important;
    border-bottom: 1px solid currentColor !important;
    border-top: 0 !important;
    border-left: 0 !important;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.3s ease;
    vertical-align: middle;
    margin-left: 0.65rem;
    margin-top: -2px;
}

.dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg) translateY(-1px);
}

/* Global Form Control Style */
.form-control {
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    border-radius: 0;
    padding: 14px 0 10px;
    font-weight: 300;
    font-size: var(--body-font-size);
    line-height: 1.2;
    background: var(--bs-form-control-bg);
    color: var(--bs-gray-dark);
}

.form-control:focus {
    box-shadow: none !important;
    border-bottom-color: var(--bs-primary);
    background: var(--bs-form-control-bg);
    color: var(--bs-body-color);
}

.form-control::placeholder {
    color: var(--bs-gray-dark);
    font-weight: 300;
    vertical-align: middle;
}

#filterSearch.form-control::placeholder,
#filterRegionSearch.form-control::placeholder,
#filterCountrySearch.form-control::placeholder {
    color: var(--bs-gray-light-medium);
    font-size: 1rem;
    font-style: italic;
}

.form-select {
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    border-radius: 0;
    padding: 14px 0 10px;
    font-weight: 300;
    font-size: var(--body-font-size);
    line-height: 1.2;
    color: var(--bs-gray-dark);
    transition: all 0.3s ease;
}

.form-select.border {
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    padding: 10px 15px;
}

.form-select.border.sm {
    font-size: 14px;
    padding: 6px 12px;
}

.form-select:focus {
    box-shadow: none;
    border-color: var(--bs-primary);
    color: var(--bs-body-color);
}

input[type="password"]::placeholder {
    transform: translateY(2px);
}



/* Form Check Overrides */
.form-check-input {
    margin-top: 2px;
}

.form-check-input:checked {
    background-color: var(--bs-form-check-input-checked-bg-color);
    border-color: var(--bs-form-check-input-checked-border-color);
}

.form-check-input:focus {
    border-color: var(--bs-form-check-input-focus-border-color);
    box-shadow: none;
}

/* Utility class to disable valid state styling for all input types (prevents green color) */
.no-valid-style.form-control:valid,
.was-validated .no-valid-style.form-control:valid,
.no-valid-style.form-select:valid,
.was-validated .no-valid-style.form-select:valid {
    border-color: var(--bs-border-color) !important;
    background-image: none !important;
    padding-right: 0 !important;
    color: var(--bs-gray-dark) !important;
}

.no-valid-style.form-control:valid:focus,
.was-validated .no-valid-style.form-control:valid:focus {
    border-bottom-color: var(--bs-primary) !important;
    box-shadow: none !important;
}

/* Specific logic for checkboxes and radio buttons to preserve checkmarks/dots */
.no-valid-style.form-check-input:valid,
.was-validated .no-valid-style.form-check-input:valid {
    border-color: var(--bs-black-alpha-25) !important;
}

.no-valid-style.form-check-input:valid:checked,
.was-validated .no-valid-style.form-check-input:valid:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%233D3D49' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

/* For radio button dot */
.no-valid-style.form-check-input[type="radio"]:valid:checked,
.was-validated .no-valid-style.form-check-input[type="radio"]:valid:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%233D3D49'/%3e%3c/svg%3e") !important;
}

.no-valid-style.form-check-input:valid~.form-check-label,
.was-validated .no-valid-style.form-check-input:valid~.form-check-label {
    color: inherit !important;
}

.modal {
    --bs-modal-zindex: 99999;
}

.modal-backdrop {
    --bs-backdrop-zindex: 9999;
}

/* ===================== End Bootstrap Overrides ===================== */

/* ===================== Start Global Scrollbar ===================== */
/* Webkit Browsers (Chrome, Safari, Edge, iOS) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(---bs-gray-light);
}

::-webkit-scrollbar-thumb {
    background: var(--bs-gray-light-medium);
    border-radius: 10px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bs-gray-dark);
}

/* Firefox Support */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--bs-gray-light-medium) var(---bs-gray-light);
}

/* Custom Scrollbar - For Light Backgrounds */
.scrollbar-light::-webkit-scrollbar {
    width: 5px;
}

.scrollbar-light::-webkit-scrollbar-track {
    background: var(--bs-black-alpha-05);
}

.scrollbar-light::-webkit-scrollbar-thumb {
    background: var(--bs-black-alpha-20);
    border-radius: 10px;
}

.scrollbar-light::-webkit-scrollbar-thumb:hover {
    background: var(--bs-primary);
}

.scrollbar-light {
    scrollbar-width: thin;
    scrollbar-color: var(--bs-black-alpha-20) var(--bs-black-alpha-05);
}

/* Custom Scrollbar - For Dark Backgrounds */
.scrollbar-dark::-webkit-scrollbar {
    width: 5px;
}

.scrollbar-dark::-webkit-scrollbar-track {
    background: var(--bs-white-alpha-05);
}

.scrollbar-dark::-webkit-scrollbar-thumb {
    background: var(--bs-white-alpha-20);
    border-radius: 10px;
}

.scrollbar-dark::-webkit-scrollbar-thumb:hover {
    background: var(--bs-primary);
}

.scrollbar-dark {
    scrollbar-width: thin;
    scrollbar-color: var(--bs-white-alpha-20) var(--bs-white-alpha-05);
}

/* ===================== End Global Scrollbar ===================== */

/* ===================== Start Header ===================== */
.header-main {
    box-shadow: 0px 3px 6px 0px var(--bs-black-alpha-16);
}

.navbar-main {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 76px;
    box-shadow: 0px 3px 4px 0px var(--bs-black-alpha-10);
    z-index: 1;
    position: relative;
}

.hamburger-menu {
    font-size: 18px;
}

.navbar-brand img {
    height: 25px;
}

/* Secondary Navigation Bar (Inside Header) */
.nav-bar-sub {
    position: relative;
}

.nav-bar-sub .nav-link {
    color: var(--bs-brown-dark);
    font-weight: 400;
    padding: 0.7rem 0;
    text-transform: none;
    font-size: 18px;
}

.nav-bar-sub .nav-item:not(:last-child) {
    margin-right: 3rem;
}

.nav-bar-sub .nav-link:hover {
    color: var(--bs-black);
}

.nav-bar-sub .nav-item.active .nav-link {
    font-weight: 700;
}

/* ===================== End Header ===================== */

/* ===================== Start Hero Section ===================== */
.hero-section {
    position: relative;
    background: url('../images/home-banner@2x.jpg') var(--bs-secondary) no-repeat center center;
    background-size: cover;
    padding: 40px 0;
    display: flex;
    align-items: center;
}

.hero-box {
    background-color: var(--bs-black-alpha-65);
    padding: 30px;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0px 3px 6px 0px var(--bs-black-alpha-16);
}

.hero-box ul {
    list-style: none;
    padding-left: 0;
}

.hero-box ul li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 2px;
}

.hero-box ul li::before {
    content: '';
    width: 6px;
    height: 6px;
    background-color: var(--bs-white);
    border-radius: 50px;
    position: absolute;
    left: 0;
    top: 5px;
}

.hero-map {
    max-width: 490px;
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
}

/* ===================== End Hero Section ===================== */

/* ===================== Start Offcanvas Main Menu Custom Styles ===================== */
.offcanvas {
    background-color: var(--bs-secondary);
    color: var(--bs-gray-light);
    --bs-offcanvas-width: 350px;
    --bs-offcanvas-zindex: 9999
}

.offcanvas-header {
    border-bottom: 1px solid var(--bs-white-alpha-20);
    padding: 30px 20px 20px 20px;
}

.offcanvas-title {
    color: var(--bs-gray-light);
    font-size: 12px;
    font-weight: 400;
}

.offcanvas .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 1;
}

.offcanvas-mainmenu-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Nav Link Wrapper for Dropdowns */
.nav-link-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.dropdown-arrow-toggle {
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 4px;
    line-height: 1;
    font-size: 12px;
}

.dropdown-arrow-toggle.no-toggle {
    cursor: default;
    pointer-events: none;
    height: auto;
}

.dropdown-arrow-toggle:not(.no-toggle):hover {
    background: var(--bs-white-alpha-05);
}

.icon-arrow {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;
}

[aria-expanded="true"] .icon-arrow {
    transform: rotate(90deg);
    color: var(--bs-primary);
}

.offcanvas-mainmenu-nav .nav-item {
    padding: 0 10px;
    transition: background-color 250ms ease;
}

.offcanvas-mainmenu-nav .nav-item .nav-icon {
    font-size: 18px;
}

.offcanvas-mainmenu-nav .nav-link {
    color: var(--bs-white-alpha-70);
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 300;
    padding: 14px 5px 14px 10px;
    border-bottom: 1px solid var(--bs-white-alpha-08);
    transition: all 0.3s ease;
}

.offcanvas-mainmenu-nav .nav-item:hover {
    background: var(--bs-white-alpha-05);
}

.offcanvas-mainmenu-nav .nav-item:hover .nav-link {
    color: var(--bs-white);
}

.offcanvas-mainmenu-nav .nav-item.active {
    background: var(--bs-white-alpha-05);
}

.offcanvas-mainmenu-nav .nav-item.active .nav-link {
    color: var(--bs-primary);
}

.offcanvas-body .menu-heading {
    font-size: 12px;
    font-weight: 400;
    color: var(--bs-gray-light);
    border-bottom: 1px solid var(--bs-white-alpha-05);
    padding: 0 15px 10px 15px;
    margin-bottom: 0;
}


.offcanvas-submenu {
    /* background: rgba(0, 0, 0, 0.15); */
    margin: 0;
    padding: 0;
    border-radius: 0;
    list-style: none;
}

.offcanvas-mainmenu-nav .dropdown-item {
    --bs-dropdown-link-color: var(--bs-white-alpha-75);
    --bs-dropdown-link-hover-color: var(--bs-primary);
    --bs-dropdown-link-hover-bg: var(--bs-white-alpha-05);
    --bs-dropdown-item-padding-y: 12px;
    --bs-dropdown-item-padding-x: 14px;
    --bs-dropdown-font-size: 15px;
    --bs-dropdown-font-weight: 300;
    --bs-dropdown-border-color: var(--bs-white-alpha-03);

    color: var(--bs-dropdown-link-color);
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    font-size: var(--bs-dropdown-font-size);
    font-weight: var(--bs-dropdown-font-weight);
    border-bottom: 1px solid var(--bs-dropdown-border-color);
    transition: all 0.3s ease;
}

.offcanvas-mainmenu-nav .dropdown-item:hover {
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg);
}

.offcanvas-mainmenu-nav .dropdown-header {
    font-size: 12px;
    font-weight: 400;
    padding-top: 20px;
    padding-bottom: 5px;
    padding-left: 14px;
}


/* Cinematic Background Blur Effect */
.offcanvas-backdrop {
    background-color: transparent !important;
}

.offcanvas-backdrop.show {
    opacity: 1 !important;
    backdrop-filter: blur(8px);
}

/* ===================== End Offcanvas Main Menu Custom Styles ===================== */


/* ===================== Start Country Coverage Framework ===================== */
.country-coverage-section {
    padding-top: 70px;
    padding-bottom: 70px;
}

.tab-row {
    box-shadow: 4px 4px 8px 0px var(--bs-black-alpha-10);
    border-radius: 5px;
    overflow: hidden;
}

.tab-menu-col {
    background-color: var(--bs-white);
    border-right: 2px solid var(--bs-gray-light);
    width: 392px;
}

.tab-content-col {
    background-color: var(--bs-gray-lightest);
    padding: 30px 40px 30px 50px;
    overflow-y: auto;
    max-height: 474px;
    display: flex;
    flex-direction: column;
}

.tab-content {
    overflow-y: auto;
}

.custom-vertical-tabs {
    margin: 0;
}

.custom-vertical-tabs .nav-link {
    color: var(--bs-gray-90);
    border-bottom: 2px solid var(--bs-gray-light);
    font-size: 20px;
    background-color: var(--bs-white);
    transition: none;
    border-radius: 0 !important;
    text-align: left;
    padding: 25px 22px !important;
    font-weight: 400;
    line-height: 1.2;
}

.custom-vertical-tabs .nav-link:last-child {
    border-bottom: none;
}

.custom-vertical-tabs .nav-link:hover {
    background-color: var(--bs-gray-light) !important;
}

.custom-vertical-tabs .nav-link.active {
    background-color: var(--bs-primary) !important;
    color: var(--bs-secondary) !important;
    font-weight: 700 !important;
    position: relative;
    border-bottom-color: var(--bs-primary);
}

/* The pointer triangle */
.custom-vertical-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid var(--bs-primary);
    z-index: 10;
}

.custom-vertical-tabs .nav-link .icon-box {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
}

.custom-vertical-tabs .nav-link .icon-box svg {
    width: 100%;
    height: 100%;
}

.custom-vertical-tabs .nav-link .icon-box svg path {
    transition: fill 0.3s ease;
}

.custom-vertical-tabs .nav-link.active .icon-box svg path[fill="#FFC828"],
.custom-accordion .accordion-button:not(.collapsed) .icon-box svg path[fill="#FFC828"] {
    fill: var(--bs-white);
}

/* Ensure mobile accordion is styled correctly */
.custom-accordion .accordion-item {
    border-width: 2px;
}


.custom-accordion .accordion-button {
    background-color: var(--bs-white);
    color: var(--bs-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    font-size: 0.95rem;
    padding: 1.25rem;
}

.custom-accordion .accordion-button:focus {
    box-shadow: none;
    background-color: var(--bs-white);
    color: var(--bs-secondary);
}

.custom-accordion .accordion-button:not(.collapsed) {
    background-color: var(--bs-primary) !important;
    color: var(--bs-secondary) !important;
    font-weight: 700;
}

.custom-accordion .accordion-collapse {
    max-height: 450px;
    overflow-x: hidden;
    overflow-y: auto;
}

.custom-accordion .icon-box {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}

.framework-content h3 {
    margin-bottom: 20px;
}

.framework-content ul {
    margin-bottom: 20px;
    padding: 0;
}

.framework-content ul>li {
    margin-bottom: 10px;
    list-style: none;
    padding: 0 0 0 20px;
    position: relative;
}

.framework-content ul>li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 8px;
    height: 10px;
    background-color: var(--bs-primary);
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

.framework-content ul li strong {
    font-weight: 400;
}

.framework-content ol {
    list-style-position: inside;
    padding: 0;
}

/* ===================== End Country Coverage Framework ===================== */

/* ===== Start Report Analyses Section ===== */
.report-analyses-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

.analyses-card .card-body {
    max-width: 230px;
}

.analyses-card .card-icon {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.analyses-card .card-icon img {
    width: 100%;
    height: 100%;
}

/* ===== End Report Analyses Section ===== */

/* ===== Start Explore Free Reports Section ===== */
.explore-section {
    padding-top: 50px;
    padding-bottom: 50px;
}

.exploration-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.exploration-card .card-body {
    max-width: 195px;
}

.exploration-card .card-icon {
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exploration-card .card-icon img {
    width: 100%;
    height: 100%;
}

/* ===== End Explore Free Reports Section ===== */


/* ==================Start Footer Styles================= */
.footer-accreditation {
    max-width: 319px;
    height: auto;
    width: 100%;
}

/* ==================End Footer Styles================= */

/* ===================== Start Insights Page Styles ===================== */

.insights-feature-card {
    background: var(--bs-white);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 10px 30px var(--bs-black-alpha-03);
    overflow: hidden;
    margin-bottom: 3rem;
    border: none;
}

.insights-feature-img-wrapper {
    overflow: hidden;
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
    height: 100%;
}

.insights-feature-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.insights-feature-content {
    padding: 25px;
}

.insights-feature-content p {
    color: var(--bs-text-gray);
}

.btn-read-more {
    max-width: 338px;
    width: 100%;
}

/* Insight Grid Cards */
.insights-section-title {
    margin-bottom: 20px !important;
}

.insight-grid-card {
    border: none;
    border-radius: 4px;
    box-shadow: 0 5px 20px var(--bs-black-alpha-04);
    transition: all 0.3s ease;
    overflow: hidden;
    height: 100%;
    background: var(--bs-white);
    position: relative;
}

.insight-grid-card:hover {
    box-shadow: 0 15px 35px var(--bs-black-alpha-10);
}

.insight-grid-card .card-image {
    padding-bottom: 67%;
    overflow: hidden;
    position: relative;
}

.insight-grid-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.insight-grid-card:hover img {
    transform: scale(1.05);
}

.insight-grid-card .card-body {
    padding: 1.75rem;
}

.insight-grid-card .card-title {
    color: var(--bs-secondary);
}

.insight-grid-card .card-text {
    color: var(--bs-text-gray);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.2;
}

/* Locked Content Styles */
.insight-locked {
    position: relative;
}

.insight-locked .insight-grid-card {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}

.locked-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.locked-box {
    background: var(--bs-dark-alpha-85);
    color: var(--bs-white);
    padding: 1rem 1.25rem;
    text-align: center;
    border-radius: 4px;
    min-width: 140px;
    transition: transform 0.3s ease;
}

.insight-locked:hover .locked-box {
    transform: scale(1.05);
}

.locked-box .premium-crown {
    margin-bottom: 0.25rem;
    display: block;
}

.locked-box span {
    font-size: 0.75rem;
    display: block;
    line-height: 1.3;
}

/* ===================== End Insights Page Styles ===================== */

/* ===================== Start Modal Styles ===================== */
.modal {
    --bs-modal-border-radius: 6px;
}

.modal-600 {
    --bs-modal-width: 600px;
}

.btn-getintouch {
    padding-top: 6px;
    padding-bottom: 6px;
    max-width: 230px;
    width: 100%;
}

.border-top-primary {
    border-top: 5px solid var(--bs-primary) !important;
}

.modal-content {
    border: none;
    box-shadow: 0 15px 50px var(--bs-black-alpha-10);
}

.modal-header .btn-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    opacity: 0.5;
    transition: opacity 0.3s;
    box-shadow: none;
    z-index: 1056;
}

.modal-login-footer {
    background-color: var(--bs-secondary);
    padding: 1.5rem 2.5rem;
    text-align: center;
    color: var(--bs-white);
    border-radius: 0 0 var(--bs-modal-border-radius) var(--bs-modal-border-radius);
}

.modal-title {
    font-size: 20px !important;
}

/* Custom Input Groups with Icons */
.modal-input-group {
    position: relative;
    margin-bottom: 2rem;
}

.modal-input-group .login-icon {
    position: absolute;
    left: 0;
    top: 20px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.modal-input-group .icon-email {
    background-image: url("../images/login-email-icon.svg");
}

.modal-input-group .icon-password {
    background-image: url("../images/login-password-icon.svg");
}

.modal-input-group .form-control {
    padding-left: 2.3rem;
}


.modal-backdrop {
    background-color: transparent !important;
}

.modal-backdrop.show {
    opacity: 1 !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ===================== End Modal Styles ===================== */

/* ===== Start Insights Detail Page ===== */
.insights-detail-content {
    padding-top: 40px;
    padding-bottom: 40px;
}

.insights-detail-card {
    background-color: var(--bs-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px var(--bs-black-alpha-05);
}

.insights-detail-hero img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--bs-border-radius);
}

.insights-detail-body {
    padding: 40px 30px;
}

.insights-detail-date {
    color: var(--bs-text-gray);
}

.insights-detail-title {
    margin-bottom: 30px;
    line-height: 1.1;
}

.standatd-content h3 {
    margin-bottom: 25px;
}

/* Sidebar */
.sidebar-title {
    font-size: 1.4rem;
    color: var(--bs-secondary);
    padding-bottom: 12px;
    margin-bottom: 25px;
    border-bottom: 4px solid var(--bs-primary);
}

.previous-releases-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.release-item {
    margin-bottom: 20px;
}

.release-link {
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    color: var(--bs-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
}

.release-link:hover {
    opacity: 0.8;
    color: var(--bs-primary);
}

.release-thumb {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.release-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Article Footer */
.insights-article-footer {
    margin-top: 50px;
    padding-top: 25px;
    padding-bottom: 25px;
    border-top: 4px solid var(--bs-primary);
    border-bottom: 1px solid var(--bs-primary);
}

.posted-by {
    font-size: 20px;
}

/* ===================== End Insights Detail Page ===================== */


/* ===================== Start Archive Page ===================== */

.archive-card {
    transition: all 0.3s ease;
    border-color: transparent !important;
}

.archive-card:hover {
    box-shadow: 0 4px 20px var(--bs-black-alpha-08) !important;
    border-color: var(--bs-primary) !important;
}

.archive-card .card-title {
    font-size: 14px;
}

.archive-card .card-icon {
    width: 24px;
    height: 24px;
}

/* ===================== End Archive Page ===================== */


/* ===================== Start Account Page ===================== */

.page-wrapper {
    background-color: var(--bs-light);
    min-height: calc(100vh - 120px);
    position: relative;
    overflow-x: hidden;
    --sidebar-width: 270px;
}

.page-sidebar {
    background-color: var(--bs-secondary);
    color: var(--bs-white);
    width: var(--sidebar-width);
    height: calc(100vh - 120px);
    position: fixed;
    left: 0;
    top: 120px;
    z-index: 1000;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-sidebar-inner {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 0;
}

body.sidebar-collapse .page-sidebar {
    left: calc((var(--sidebar-width) - 24px) * -1);
}

.page-content-area {
    padding: 40px var(--container-padding);
    margin-left: var(--sidebar-width);
    transition: margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-collapse .page-content-area {
    margin-left: 24px;
}

/* Sidebar Navigation */
.sidebar-nav {
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Nav group wrapper */
.sidebar-nav .nav-group {
    border-bottom: 1px solid var(--bs-white-alpha-06);
}

.sidebar-nav .nav-group:last-child {
    border-bottom: none;
}

/* Nav heading — acts as collapse toggle */
.sidebar-nav .nav-heading {
    padding: 25px 20px 15px 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--bs-primary);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--bs-white-alpha-06);
}

.sidebar-nav .nav-heading:hover {
    background-color: var(--bs-white-alpha-04);
}

.sidebar-nav .nav-heading>i:first-child {
    font-size: 22px;
    flex-shrink: 0;
}

/* Arrow icon inside heading */
.sidebar-nav .nav-heading .icon-arrow {
    font-size: 10px;
    flex-shrink: 0;
    color: var(--bs-white-alpha-40);
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease;
}

.sidebar-nav .nav-heading[aria-expanded="true"] .icon-arrow {
    transform: rotate(90deg);
    color: var(--bs-primary);
}

/* Nav links inside each group */
.sidebar-nav .nav-item {
    padding: 0 10px;
    transition: background-color 250ms ease;
}

.sidebar-nav .nav-link {
    padding: 11px 20px 11px 20px;
    color: var(--bs-white-alpha-65);
    font-size: 15px;
    font-weight: 300;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--bs-white-alpha-04);
    transition: all 0.2s ease;
}

.sidebar-nav .nav-link span {
    padding-right: 30px;
}

.sidebar-nav .nav-item:hover {
    background-color: var(--bs-white-alpha-05);
}

.sidebar-nav .nav-item:hover .nav-link {
    color: var(--bs-white);
}

.sidebar-nav .nav-item.active {
    background-color: var(--bs-white-alpha-05);
}

.sidebar-nav .nav-item.active .nav-link {
    color: var(--bs-primary);
}

.sidebar-nav .nav-link.locked {
    /*cursor: default;*/
}

.sidebar-nav .nav-link i.i-lock-fill {
    color: var(--bs-primary);
    font-size: 14px;
    opacity: 0.8;
    flex-shrink: 0;
}

.sidebar-nav .collapse li:last-child .nav-link {
    border-bottom: none;
}

/* Sidebar Toggle Button */
.sidebar-toggle-btn {
    --toggle-btn-width: 16px;
    position: absolute;
    width: var(--toggle-btn-width);
    height: 32px;
    background-color: var(--bs-gray-light);
    color: var(--bs-gray-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1001;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
    border: none;
    transform: translateX(-100%);
}

.sidebar-toggle-btn:hover {
    background-color: var(--bs-gray-dark);
    color: var(--bs-gray-light);
}

.sidebar-toggle-btn.sidebar-menu-toggle {
    top: 30px;
    left: calc(var(--sidebar-width) + var(--toggle-btn-width));
    border-radius: 0 6px 6px 0;
}

.sidebar-collapsed .sidebar-toggle-btn {}

.sidebar-toggle-btn i {
    font-size: 10px;
    transition: transform 0.4s ease;
}

.my-account-img {
    height: calc(100vh - 190px);
}

.my-account-img img {
    object-position: left;
}


/* My Account Profile Form */
.profile-form .form-control {
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 6px !important;
    padding: 10px 16px;
    background: var(--bs-white);
    color: var(--bs-text-gray);
}

.profile-form .form-control:not([readonly]):focus {
    border-color: var(--bs-primary) !important;
    background: var(--bs-white);
    box-shadow: none;
}

.profile-form .form-control[readonly] {
    background: transparent;
    cursor: default;
    color: var(--bs-gray-dark);
}

.profile-form .password-toggle {
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    display: flex;
    align-items: center;
}

.profile-form .password-toggle svg {
    display: block;
}

/* Password Requirements */
.password-requirements-box {
    background-color: var(--bs-white);
    border-radius: 6px;
    padding: 15px;
    margin-top: 10px;
    display: none;
    border: 1px solid var(--bs-border-color);
}

.password-requirements-box.show {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Password Toggle CSS Icons */
i.i-eye-open,
i.i-eye-close {
    display: inline-block;
    width: 21px;
    height: 13px;
    vertical-align: middle;
    background-color: currentColor;
}

i.i-eye-open {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 13' fill='none'%3E%3Cpath d='M10.36 12C14.36 12 17.82 9.78 19.6 6.5C17.82 3.22 14.36 1 10.36 1C6.36 1 2.9 3.22 1.12 6.5C2.9 9.78 6.36 12 10.36 12ZM10.36 0C14.92 0 18.86 2.65 20.72 6.5C18.86 10.35 14.92 13 10.36 13C5.8 13 1.86 10.35 0 6.5C1.86 2.65 5.8 0 10.36 0ZM10.36 2C12.86 2 14.86 4 14.86 6.5C14.86 9 12.86 11 10.36 11C7.86 11 5.86 9 5.86 6.5C5.86 4 7.86 2 10.36 2ZM10.36 3C9.43174 3 8.5415 3.36875 7.88513 4.02513C7.22875 4.6815 6.86 5.57174 6.86 6.5C6.86 7.42826 7.22875 8.3185 7.88513 8.97487C8.5415 9.63125 9.43174 10 10.36 10C11.2883 10 12.1785 9.63125 12.8349 8.97487C13.4913 8.3185 13.86 7.42826 13.86 6.5C13.86 5.57174 13.4913 4.6815 12.8349 4.02513C12.1785 3.36875 11.2883 3 10.36 3Z' fill='%23000' /%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 13' fill='none'%3E%3Cpath d='M10.36 12C14.36 12 17.82 9.78 19.6 6.5C17.82 3.22 14.36 1 10.36 1C6.36 1 2.9 3.22 1.12 6.5C2.9 9.78 6.36 12 10.36 12ZM10.36 0C14.92 0 18.86 2.65 20.72 6.5C18.86 10.35 14.92 13 10.36 13C5.8 13 1.86 10.35 0 6.5C1.86 2.65 5.8 0 10.36 0ZM10.36 2C12.86 2 14.86 4 14.86 6.5C14.86 9 12.86 11 10.36 11C7.86 11 5.86 9 5.86 6.5C5.86 4 7.86 2 10.36 2ZM10.36 3C9.43174 3 8.5415 3.36875 7.88513 4.02513C7.22875 4.6815 6.86 5.57174 6.86 6.5C6.86 7.42826 7.22875 8.3185 7.88513 8.97487C8.5415 9.63125 9.43174 10 10.36 10C11.2883 10 12.1785 9.63125 12.8349 8.97487C13.4913 8.3185 13.86 7.42826 13.86 6.5C13.86 5.57174 13.4913 4.6815 12.8349 4.02513C12.1785 3.36875 11.2883 3 10.36 3Z' fill='%23000' /%3E%3C/svg%3E") center / contain no-repeat;
}

i.i-eye-close {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 13' fill='none'%3E%3Cpath d='M10.36 12C14.36 12 17.82 9.78 19.6 6.5C17.82 3.22 14.36 1 10.36 1C6.36 1 2.9 3.22 1.12 6.5C2.9 9.78 6.36 12 10.36 12ZM10.36 0C14.92 0 18.86 2.65 20.72 6.5C18.86 10.35 14.92 13 10.36 13C5.8 13 1.86 10.35 0 6.5C1.86 2.65 5.8 0 10.36 0ZM10.36 2C12.86 2 14.86 4 14.86 6.5C14.86 9 12.86 11 10.36 11C7.86 11 5.86 9 5.86 6.5C5.86 4 7.86 2 10.36 2ZM10.36 3C9.43174 3 8.5415 3.36875 7.88513 4.02513C7.22875 4.6815 6.86 5.57174 6.86 6.5C6.86 7.42826 7.22875 8.3185 7.88513 8.97487C8.5415 9.63125 9.43174 10 10.36 10C11.2883 10 12.1785 9.63125 12.8349 8.97487C13.4913 8.3185 13.86 7.42826 13.86 6.5C13.86 5.57174 13.4913 4.6815 12.8349 4.02513C12.1785 3.36875 11.2883 3 10.36 3Z' fill='%23000' /%3E%3Cpath d='M2 1L19 12' stroke='%23000' stroke-width='1.5' stroke-linecap='round' /%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 13' fill='none'%3E%3Cpath d='M10.36 12C14.36 12 17.82 9.78 19.6 6.5C17.82 3.22 14.36 1 10.36 1C6.36 1 2.9 3.22 1.12 6.5C2.9 9.78 6.36 12 10.36 12ZM10.36 0C14.92 0 18.86 2.65 20.72 6.5C18.86 10.35 14.92 13 10.36 13C5.8 13 1.86 10.35 0 6.5C1.86 2.65 5.8 0 10.36 0ZM10.36 2C12.86 2 14.86 4 14.86 6.5C14.86 9 12.86 11 10.36 11C7.86 11 5.86 9 5.86 6.5C5.86 4 7.86 2 10.36 2ZM10.36 3C9.43174 3 8.5415 3.36875 7.88513 4.02513C7.22875 4.6815 6.86 5.57174 6.86 6.5C6.86 7.42826 7.22875 8.3185 7.88513 8.97487C8.5415 9.63125 9.43174 10 10.36 10C11.2883 10 12.1785 9.63125 12.8349 8.97487C13.4913 8.3185 13.86 7.42826 13.86 6.5C13.86 5.57174 13.4913 4.6815 12.8349 4.02513C12.1785 3.36875 11.2883 3 10.36 3Z' fill='%23000' /%3E%3Cpath d='M2 1L19 12' stroke='%23000' stroke-width='1.5' stroke-linecap='round' /%3E%3C/svg%3E") center / contain no-repeat;
}

i.i-filter {
    display: inline-block;
    width: 14px;
    height: 10px;
    vertical-align: middle;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M7.45455 7.82609C7.75579 7.82609 8 8.08888 8 8.41304C8 8.73721 7.75579 9 7.45455 9H4.54545C4.24421 9 4 8.73721 4 8.41304C4 8.08888 4.24421 7.82609 4.54545 7.82609H7.45455ZM9.63636 3.91304C9.93761 3.91304 10.1818 4.17583 10.1818 4.5C10.1818 4.82417 9.93761 5.08696 9.63636 5.08696H2.36364C2.06239 5.08696 1.81818 4.82417 1.81818 4.5C1.81818 4.17583 2.06239 3.91304 2.36364 3.91304H9.63636ZM11.4545 0C11.7558 0 12 0.262789 12 0.586957C12 0.911124 11.7558 1.17391 11.4545 1.17391H0.545455C0.244208 1.17391 0 0.911124 0 0.586957C0 0.262789 0.244208 0 0.545455 0H11.4545Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M7.45455 7.82609C7.75579 7.82609 8 8.08888 8 8.41304C8 8.73721 7.75579 9 7.45455 9H4.54545C4.24421 9 4 8.73721 4 8.41304C4 8.08888 4.24421 7.82609 4.54545 7.82609H7.45455ZM9.63636 3.91304C9.93761 3.91304 10.1818 4.17583 10.1818 4.5C10.1818 4.82417 9.93761 5.08696 9.63636 5.08696H2.36364C2.06239 5.08696 1.81818 4.82417 1.81818 4.5C1.81818 4.17583 2.06239 3.91304 2.36364 3.91304H9.63636ZM11.4545 0C11.7558 0 12 0.262789 12 0.586957C12 0.911124 11.7558 1.17391 11.4545 1.17391H0.545455C0.244208 1.17391 0 0.911124 0 0.586957C0 0.262789 0.244208 0 0.545455 0H11.4545Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
    font-family: inherit !important;
}

i.i-filter:before {
    content: none !important;
}

i.i-drag-to-zoom {
    display: inline-block;
    width: 26px;
    height: 26px;
    vertical-align: middle;
    font-family: inherit !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29' fill='none'%3E%3Cpath d='M2.97754 23.4912C3.17519 23.544 3.38377 23.5723 3.59961 23.5723H5.06445C5.39554 23.5725 5.66396 23.8407 5.66406 24.1719C5.66406 24.5031 5.39561 24.7722 5.06445 24.7725H3.59961C3.27824 24.7725 2.96577 24.73 2.66797 24.6504C2.34797 24.5649 2.15786 24.236 2.24316 23.916C2.32872 23.5959 2.65746 23.4058 2.97754 23.4912ZM0.599609 19.1074C0.93098 19.1074 1.19922 19.3766 1.19922 19.708V21.1719C1.19922 21.3877 1.22842 21.5963 1.28125 21.7939C1.36666 22.1139 1.17629 22.4426 0.856445 22.5283C0.536314 22.6139 0.206667 22.4236 0.121094 22.1035C0.0415361 21.8058 0 21.4932 0 21.1719V19.708C0 19.3766 0.268239 19.1074 0.599609 19.1074ZM0.599609 10.3213C0.93098 10.3213 1.19922 10.5905 1.19922 10.9219V13.8506C1.19901 14.1818 0.930854 14.4502 0.599609 14.4502C0.268365 14.4502 0.000204661 14.1818 0 13.8506V10.9219C0 10.5905 0.268239 10.3213 0.599609 10.3213ZM0.856445 2.24316C1.17626 2.32884 1.36655 2.65763 1.28125 2.97754C1.22842 3.17519 1.19922 3.38377 1.19922 3.59961V5.06445C1.19896 5.39561 0.930823 5.66406 0.599609 5.66406C0.268396 5.66406 0.000255172 5.39561 0 5.06445V3.59961C8.85721e-08 3.27826 0.041506 2.96576 0.121094 2.66797C0.206667 2.34784 0.536314 2.15759 0.856445 2.24316ZM23.916 2.24316C24.236 2.15786 24.5649 2.34797 24.6504 2.66797C24.73 2.96577 24.7725 3.27824 24.7725 3.59961V5.06445C24.7722 5.39561 24.5031 5.66406 24.1719 5.66406C23.8407 5.66396 23.5725 5.39554 23.5723 5.06445V3.59961C23.5723 3.38377 23.544 3.17519 23.4912 2.97754C23.4058 2.65746 23.5959 2.32872 23.916 2.24316ZM5.06445 0C5.39561 0.0002556 5.66406 0.268396 5.66406 0.599609C5.66406 0.930822 5.39561 1.19896 5.06445 1.19922H3.59961C3.38377 1.19922 3.17519 1.22842 2.97754 1.28125C2.65763 1.36655 2.32884 1.17626 2.24316 0.856445C2.15759 0.536314 2.34784 0.206667 2.66797 0.121094C2.96576 0.041506 3.27826 0 3.59961 0H5.06445ZM21.1719 0C21.4932 0 21.8058 0.041536 22.1035 0.121094C22.4236 0.206667 22.6139 0.536314 22.5283 0.856445C22.4426 1.17629 22.1139 1.36666 21.7939 1.28125C21.5963 1.22842 21.3877 1.19922 21.1719 1.19922H19.708C19.3766 1.19922 19.1074 0.93098 19.1074 0.599609C19.1074 0.268239 19.3766 0 19.708 0H21.1719ZM13.8506 0C14.1818 0.000205513 14.4502 0.268365 14.4502 0.599609C14.4502 0.930853 14.1818 1.19901 13.8506 1.19922H10.9219C10.5905 1.19922 10.3213 0.93098 10.3213 0.599609C10.3213 0.268239 10.5905 0 10.9219 0H13.8506Z' fill='%233D3D49'/%3E%3Cpath d='M24.6758 24.5207L14.0682 13.9131' stroke='%23FFC828' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21.2578 13.7228L13.8693 13.7228' stroke='%23FFC828' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.8722 21.1088L13.8722 13.7203' stroke='%23FFC828' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.3721 24.9053L24.7606 24.9053' stroke='%23FFC828' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24.7587 17.5193L24.7587 24.9078' stroke='%23FFC828' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

i.i-bookmark-color {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    font-family: inherit !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='20' viewBox='0 0 19 20' fill='none'%3E%3Cpath d='M7.56109 3.55808C8.19936 2.46226 9.78251 2.46228 10.4208 3.55808L12.4874 7.1054C12.5256 7.17099 12.5899 7.21822 12.664 7.23428L16.6765 8.10308C17.9157 8.37144 18.4051 9.87648 17.5606 10.8222L14.8244 13.8846C14.774 13.9412 14.75 14.0165 14.7577 14.0919L15.1704 18.1764C15.2982 19.4381 14.0174 20.3686 12.8569 19.8572L9.10044 18.2016C9.03106 18.171 8.95175 18.1711 8.88234 18.2016L5.12498 19.8572C3.96449 20.3686 2.68369 19.4381 2.81144 18.1764L3.22512 14.0919C3.23276 14.0164 3.208 13.9412 3.15752 13.8846L0.422193 10.8222C-0.422538 9.87656 0.0662405 8.37162 1.30543 8.10308L5.31875 7.23428C5.39284 7.21817 5.45633 7.17092 5.4945 7.1054L7.56109 3.55808ZM9.22482 4.25475C9.12057 4.07577 8.86232 4.07589 8.75797 4.25475L6.69137 7.80297C6.45758 8.20425 6.06555 8.48872 5.61166 8.58706L1.59834 9.45586C1.3961 9.49988 1.31628 9.74574 1.45414 9.90018L4.19037 12.9617C4.49974 13.308 4.64893 13.7687 4.60225 14.2307L4.18857 18.316C4.16783 18.5221 4.37754 18.6745 4.5671 18.5909L8.32356 16.9344C8.7486 16.7471 9.23327 16.7472 9.65833 16.9344L13.4157 18.5909C13.6052 18.6742 13.8141 18.522 13.7933 18.316L13.3796 14.2307C13.333 13.7686 13.483 13.308 13.7924 12.9617L16.5277 9.90018C16.6658 9.74567 16.5861 9.49971 16.3835 9.45586L12.3711 8.58706C11.9172 8.48877 11.5253 8.20418 11.2914 7.80297L9.22482 4.25475Z' fill='%233D3D49'/%3E%3Cpath d='M15.1306 0.553381V4.94067C15.1306 5.24648 15.3782 5.49403 15.684 5.49403C15.9898 5.49403 16.2374 5.24648 16.2374 4.94067V0.553381C16.2373 0.247592 15.9898 1.33514e-05 15.684 1.33514e-05C15.3782 1.33514e-05 15.1306 0.247592 15.1306 0.553381Z' fill='%23FFC828'/%3E%3Cpath d='M13.3152 4.03802C13.4595 4.30764 13.7954 4.40937 14.0651 4.26514L17.9153 2.20578C18.1848 2.06149 18.2866 1.72555 18.1424 1.45594C17.9981 1.18633 17.6622 1.08464 17.3925 1.22883L13.5423 3.28818C13.2727 3.43244 13.171 3.76838 13.3152 4.03802Z' fill='%23FFC828'/%3E%3Cpath d='M17.3925 4.26514C17.6622 4.40935 17.9981 4.30767 18.1424 4.03802C18.2866 3.76841 18.1848 3.43247 17.9153 3.28818L14.0651 1.22883C13.7954 1.08461 13.4595 1.18635 13.3152 1.45594C13.171 1.72558 13.2727 2.06152 13.5423 2.20578L17.3925 4.26514Z' fill='%23FFC828'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

i.i-print-color {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    font-family: inherit !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M0 7.97079V12.6546C0 14.2762 1.31404 15.5902 2.9356 15.5902H4.06691C4.39501 15.5902 4.66157 15.3246 4.66157 14.9965C4.66157 14.6684 4.39501 14.4028 4.06691 14.4028H2.9356C1.97024 14.4028 1.18739 13.62 1.18739 12.6546V7.97079C1.18753 7.00555 1.97033 6.22355 2.9356 6.22355H17.0644C18.0297 6.22355 18.8125 7.00555 18.8126 7.97079V12.6546C18.8126 13.62 18.0298 14.4028 17.0644 14.4028H15.9331C15.605 14.4028 15.3384 14.6684 15.3384 14.9965C15.3384 15.3246 15.605 15.5902 15.9331 15.5902H17.0644C18.686 15.5902 20 14.2762 20 12.6546V7.97079C19.9999 6.34935 18.6859 5.03519 17.0644 5.03519H2.9356C1.31412 5.03519 0.000142605 6.34935 0 7.97079Z' fill='%233D3D49'/%3E%3Cpath d='M16.8698 12.4676C17.1977 12.4674 17.4635 12.2019 17.4635 11.8739C17.4635 11.546 17.1977 11.2805 16.8698 11.2802H3.13067C2.80257 11.2802 2.53697 11.5458 2.53697 11.8739C2.53697 12.202 2.80257 12.4676 3.13067 12.4676H16.8698Z' fill='%233D3D49'/%3E%3Cpath d='M15.3388 18.2358C15.3388 18.5543 15.0801 18.8131 14.7615 18.8131H5.23822C4.91967 18.8131 4.66096 18.5543 4.66096 18.2358V14.8448C4.66096 13.5324 5.72527 12.4681 7.03768 12.4681H12.9621C14.2745 12.4681 15.3388 13.5324 15.3388 14.8448V18.2358ZM16.5262 14.8448C16.5262 12.8762 14.9307 11.2797 12.9621 11.2797H7.03768C5.06906 11.2797 3.47357 12.8762 3.47357 14.8448V18.2358C3.47357 19.2106 4.26346 20.0004 5.23822 20.0004H14.7615C15.7363 20.0004 16.5262 19.2106 16.5262 18.2358V14.8448Z' fill='%233D3D49'/%3E%3Cpath d='M11.561 14.9655C11.8891 14.9655 12.1556 14.6999 12.1556 14.3718C12.1556 14.0437 11.8891 13.7781 11.561 13.7781H8.43876C8.11066 13.7781 7.84506 14.0437 7.84506 14.3718C7.84506 14.6999 8.11066 14.9655 8.43876 14.9655H11.561Z' fill='%23FFC828'/%3E%3Cpath d='M11.561 17.4633C11.8891 17.4633 12.1556 17.1977 12.1556 16.8696C12.1556 16.5415 11.8891 16.2759 11.561 16.2759H8.43876C8.11066 16.2759 7.84506 16.5415 7.84506 16.8696C7.84506 17.1977 8.11066 17.4633 8.43876 17.4633H11.561Z' fill='%23FFC828'/%3E%3Cpath d='M5.00458 8.72102C5.33247 8.72078 5.59828 8.45528 5.59828 8.12733C5.59828 7.79938 5.33247 7.53388 5.00458 7.53363H3.13067C2.80257 7.53363 2.53697 7.79923 2.53697 8.12733C2.53697 8.45543 2.80257 8.72102 3.13067 8.72102H5.00458Z' fill='%233D3D49'/%3E%3Cpath d='M15.3388 2.93658C15.3386 4.09568 14.3986 5.03568 13.2395 5.03578H6.76014C5.60104 5.03568 4.66103 4.09568 4.66093 2.93658C4.66093 1.97133 5.4439 1.18837 6.40914 1.18837H13.5905C14.5558 1.18837 15.3388 1.97133 15.3388 2.93658ZM16.5261 2.93658C16.5261 1.31513 15.212 7.15256e-06 13.5905 7.15256e-06H6.40914C4.78769 7.15256e-06 3.47354 1.31513 3.47354 2.93658C3.47364 4.75188 4.94483 6.22307 6.76014 6.22318H13.2395C15.0549 6.22307 16.526 4.75188 16.5261 2.93658Z' fill='%233D3D49'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

i.i-download-color {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    font-family: inherit !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='20' viewBox='0 0 19 20' fill='none'%3E%3Cpath d='M4.4379 4.58975C4.71936 4.58995 4.9475 4.81785 4.9475 5.09936C4.9475 5.38087 4.71936 5.60876 4.4379 5.60896H1.97037L1.87326 5.61394C1.39403 5.66301 1.01981 6.06806 1.01921 6.56011V18.0295C1.01985 18.5543 1.44559 18.9792 1.97037 18.9798H16.0468C16.5713 18.9792 16.9969 18.5547 16.998 18.0303V6.56011L16.993 6.463C16.9439 5.98378 16.5389 5.60955 16.0468 5.60896H13.5793C13.2978 5.60875 13.0697 5.38086 13.0697 5.09936C13.0697 4.81785 13.2978 4.58996 13.5793 4.58975H16.0485C17.1353 4.59121 18.0157 5.47161 18.0172 6.55845V18.0303L18.0072 18.232C17.9054 19.2244 17.0675 19.9985 16.0485 19.9999H1.96871C0.881768 19.9984 0.00131278 19.1173 0 18.0303V6.55845C0.00147208 5.47161 0.881867 4.59123 1.96871 4.58975H4.4379Z' fill='%233D3D49'/%3E%3Cpath d='M8.49898 14.4474V0.509604C8.49898 0.227974 8.72695 0 9.00858 0C9.29022 0 9.51819 0.227974 9.51819 0.509604V14.4474C9.51816 14.729 9.2902 14.957 9.00858 14.957C8.72697 14.957 8.49901 14.729 8.49898 14.4474Z' fill='%23FFC828'/%3E%3Cpath d='M4.88526 10.3199C5.0844 10.1207 5.40654 10.1207 5.60568 10.3199L9.37378 14.0871C9.57256 14.2863 9.57281 14.6094 9.37378 14.8084C9.17476 15.0074 8.8517 15.0072 8.65253 14.8084L4.88526 11.0403C4.68611 10.8412 4.68612 10.519 4.88526 10.3199Z' fill='%23FFC828'/%3E%3Cpath d='M12.4173 10.3199C12.6164 10.1207 12.9394 10.1207 13.1386 10.3199C13.3372 10.5189 13.3372 10.8413 13.1386 11.0403L9.37045 14.8084C9.17141 15.007 8.84907 15.007 8.65003 14.8084C8.45089 14.6092 8.45089 14.2863 8.65003 14.0871L12.4173 10.3199Z' fill='%23FFC828'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

i.i-info-color {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    font-family: inherit !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M18.9189 10C18.9189 5.07422 14.9258 1.08108 10 1.08108C5.07422 1.08108 1.08108 5.07422 1.08108 10C1.08108 14.9258 5.07422 18.9189 10 18.9189C14.9258 18.9189 18.9189 14.9258 18.9189 10ZM20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10Z' fill='%233D3D49'/%3E%3Cpath d='M9.45946 14.9217V9.80874C9.45946 9.51021 9.70147 9.2682 10 9.2682C10.2985 9.2682 10.5405 9.51021 10.5405 9.80874V14.9217C10.5405 15.2202 10.2985 15.4622 10 15.4622C9.70147 15.4622 9.45946 15.2202 9.45946 14.9217Z' fill='%23FFC828'/%3E%3Cpath d='M10 7.63562C10.706 7.63562 11.2783 7.0633 11.2783 6.35731C11.2783 5.65133 10.706 5.07901 10 5.07901C9.29401 5.07901 8.72169 5.65133 8.72169 6.35731C8.72169 7.0633 9.29401 7.63562 10 7.63562Z' fill='%23FFC828'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* ===================== End Account Page ===================== */

/* ===================== Start Reports Layout ===================== */

.page-layout-fixed {
    min-height: calc(100vh - 120px);
    max-height: 700px;
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;
}

.page-layout-fixed .page-content-area {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.report-title {
    font-size: 20px !important;
}

.zoom-btn {
    border: none !important;
    font-size: 14px;
}

/* Value / Volume toggle buttons */
.btn-vv {
    font-size: 13px;
    font-weight: 400;
    padding: 5px 14px;
    border: none;
    background-color: var(--bs-gray-90);
    color: var(--bs-white);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-vv.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-secondary);
    font-weight: 500;
}

.btn-vv:hover:not(.active) {
    background-color: var(--bs-secondary);
    color: var(--bs-white);
}

.reports-card {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.reports-header,
.reports-chart-body,
.reports-footer {
    padding-left: 20px;
    padding-right: 20px;
}

.reports-header {
    padding-top: 25px;
    padding-bottom: 15px;
}

.reports-footer {
    padding-top: 15px;
    padding-bottom: 20px;
}

.reports-footer small {
    font-size: 0.75rem;
}

.filter-header,
.filter-body,
.filter-footer {
    padding-left: 20px;
    padding-right: 20px;
}

.filter-header {
    padding-top: 25px;
    padding-bottom: 15px;
}

.filter-footer {
    padding-top: 15px;
    padding-bottom: 20px;
}

.reports-filter-panel {
    width: 280px;
    background: var(--bs-white);
    flex-shrink: 0;
    display: flex !important;
    flex-direction: column;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s, border-color 0.3s;
    border-left: 1px solid var(--bs-border-color);
}

.reports-filter-panel>* {
    min-width: 280px;
}


.sidebar-toggle-btn.sidebar-filter-toggle {
    top: 36px;
    width: var(--toggle-btn-width) !important;
    min-width: var(--toggle-btn-width) !important;
    border-radius: 6px 0 0 6px;
}

.reports-filter-panel.collapsed {
    width: 0 !important;
    border-left-color: transparent !important;
}

.filter-header .form-control {
    padding: 12px 0 10px 25px !important;
}

.btn.btn-icon {
    width: 42px;
    height: 42px;
}

.btn-icon:hover i {
    filter: brightness(100);
}

/* Overlay for Mobile Off-canvas */
.filter-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bs-black-alpha-20);
    z-index: 1045;
    display: none;
}

.filter-panel-overlay.show {
    display: block;
}

/* IMPORTANT: Chart containers MUST NOT have CSS transitions 
   as they clash with the ResizeObserver/Highcharts engine redraw logic */
.reports-chart-body,
#shoppingFrequencyChart {
    transition: none !important;
}

/* Custom Checkboxes */
.custom-checkbox .form-check-input {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 3px;
    border-color: var(--bs-border-color);
    margin-top: 0.1rem;
}

.custom-checkbox .form-check-input:focus {
    box-shadow: none;
    border-color: var(--bs-border-color);
}

/* Methodology Modal */
.modal-methodology .modal-content {
    border-radius: 12px;
    padding: 20px;
}

.modal-methodology .modal-header .btn-close {
    position: absolute;
    top: 25px;
    right: 25px;
    opacity: 0.5;
    transition: opacity 0.2s;
    z-index: 10;
}

.modal-methodology .modal-header .btn-close:hover {
    opacity: 1;
}

.methodology-content ol,
.methodology-content ul {
    padding-left: 1rem;
}

.methodology-content li {
    margin-bottom: 1rem;
}

.methodology-content h3 {
    margin-bottom: 1rem;
}

/* Badges - Methodology Specific */
.badge.rounded-pill {
    padding: 0.4em 0.8em;
    font-weight: 500;
    vertical-align: baseline;
    margin: 0 2px;
}

.bg-yellow {
    background-color: var(--bs-orange-light) !important;
    color: var(--bs-secondary) !important;
}

.bg-orange {
    background-color: var(--bs-orange) !important;
}

.bg-red {
    background-color: var(--bs-red-bright) !important;
}

.bg-pink {
    background-color: var(--bs-pink) !important;
}

.bg-dark-pink {
    background-color: var(--bs-magenta-dark) !important;
}

.methodology-img {
    padding: 15px;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    margin-bottom: 20px;
}

/* === Start KPI Heatmap Specific === */
.kpi-dropdown .dropdown-toggle::after {
    display: none !important;
}

.kpi-dropdown .dropdown-menu {
    border-radius: 12px;
    overflow: visible;
    padding: 0;
    border: 1px solid var(--bs-black-alpha-05);
    box-shadow: 0 10px 25px var(--bs-black-alpha-10);
    margin-top: 10px !important;
}

.kpi-dropdown .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--bs-white);
}

.kpi-dropdown .dropdown-item {
    padding: 12px 25px;
    font-size: 14px;
    color: var(--bs-secondary);
    border-bottom: 0px;
    transition: all 0.2s;
    font-weight: 300;
}

/* Zebra striping for dropdown items */
.kpi-dropdown li:nth-child(even) .dropdown-item {
    background-color: var(--bs-gray-lightest);
}

.kpi-dropdown .dropdown-item:hover {
    background-color: var(--bs-primary) !important;
}

.dropdown-menu .dropdown-item.active {
    background-color: var(--bs-primary);
    font-weight: bold;
}

/* Heatmap specific tweaks */
#countriesHeatmap {
    cursor: crosshair;
    height: 70vh;
    /* Dynamic height based on viewport */
    min-height: 400px;
    /* Minimum height to maintain legibility */
    max-height: 800px;
    /* Prevent excessive stretching on ultra-wide screens */
    width: 100%;
}

@media (max-width: 768px) {
    #countriesHeatmap {
        height: 50vh;
        min-height: 350px;
    }
}

.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

/* === End KPI Heatmap Specific === */


/* === Start Reports Filter Panel Styling === */

.region-group {
    margin-bottom: 1.5rem;
}

.region-title {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.region-group,
.region-item,
.country-item {
    min-height: 26px;
}

.country-item,
.region-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.15rem;
}

.country-item {
    margin-bottom: 0;
}

/* Custom Checkboxes with Dynamic Colors */
.custom-checkbox {
    min-height: auto !important;
    padding-left: 24px;
}

.custom-radio {
    min-height: auto !important;
    padding-left: 26px;
}

.custom-radio .form-check-input {
    margin-left: -26px;
    margin-top: .2em;
    cursor: pointer;
    border-radius: 50% !important;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-white);
    transition: all 0.2s ease;
}

.custom-radio .form-check-input:checked {
    background-color: var(--cb-color, var(--bs-secondary)) !important;
    border-color: var(--cb-color, var(--bs-secondary)) !important;
    box-shadow: inset 0 0 0 3px var(--bs-white) !important;
    background-image: none !important;
}

.custom-radio .form-check-label {
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.2;
}

.custom-checkbox .form-check-input {
    width: 16px;
    height: 16px;
    margin-left: -24px;
    margin-top: 0;
    cursor: pointer;
    border-radius: 3px !important;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-white);
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.custom-checkbox .form-check-input:checked {
    background-color: var(--cb-color, var(--bs-secondary)) !important;
    border-color: var(--cb-color, var(--bs-secondary)) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.custom-checkbox .form-check-label {
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.2;
    padding-top: 0;
    display: block;
}

/* Region Master Toggles (Select All) */
.region-toggle {
    width: 18px;
    height: 18px;
    border-radius: 2px;
    cursor: pointer;
    display: inline-block;
    flex-shrink: 0;
    transition: transform 0.2s;
    background-color: var(--cb-color, var(--bs-secondary));
}

.region-toggle:hover {
    transform: scale(1.1);
}

.country-group {
    padding-left: 24px;
}

/* Bookmark Button Active State */
.btn-icon.active {
    color: #FFC828 !important;
    border-color: #FFC828 !important;
}

.btn-icon.active i {
    filter: brightness(100);
}

/* === End Reports Filter Panel Styling === */

/* === End Reports Layout === */

/* ===================== Start Password Setup & Modal Design ===================== */
.password-toggle {
    cursor: pointer;
    color: var(--bs-gray-light-medium);
    z-index: 10;
}

.password-toggle:hover {
    color: var(--bs-gray-dark);
}

.requirement-item span.small {
    font-weight: 300;
    font-size: 14px;
}

.requirement-item.met span.small {
    color: var(--bs-secondary);
}

.requirement-icon svg {
    transition: all 0.2s ease;
}

.success-icon-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: var(--bs-white);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.success-icon-circle svg {
    overflow: inherit;
}

/* Trigger animations ONLY when modal is shown */
.modal.show .success-circle {
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
    animation: circleDrawPremium 0.6s cubic-bezier(0.65, 0, 0.45, 1) 0.1s forwards;
}

.modal.show .success-checkmark {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    animation: checkmarkDrawPremium 0.25s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}

.modal.show .success-ring {
    animation: ringExpand 0.5s ease-out 0.5s forwards;
    transform-origin: center;
    opacity: 0;
}

.modal.show .success-ring-slow {
    animation: ringExpand 0.7s ease-out 0.55s forwards;
    transform-origin: center;
    opacity: 0;
}

.modal.show .success-icon-circle {
    animation: containerImpact 0.3s ease-out 0.8s;
}

@keyframes circleDrawPremium {
    0% {
        stroke-dashoffset: 340;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes checkmarkDrawPremium {
    0% {
        stroke-dashoffset: 80;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes ringExpand {
    0% {
        transform: scale(1);
        opacity: 0.5;
        stroke-width: 4;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
        stroke-width: 0;
    }
}

@keyframes containerImpact {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}



#activationSuccessModal .modal-content {
    border-top: 5px solid var(--bs-primary) !important;
    border-radius: 0;
}

/* ===================== End Password Setup & Modal Design ===================== */

/* ===================== Start Error Pages Style ======================*/

.error-page-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-light);
    padding: 2rem;
    font-family: var(--bs-font-sans-serif);
}

.error-container {
    max-width: 600px;
    width: 100%;
    text-align: center;
    animation: fadeIn 0.8s ease-out;
}

.error-logo {
    margin-bottom: 3rem;
}

.error-logo img {
    height: 45px;
    width: auto;
}

.error-code-display {
    position: relative;
    margin-bottom: 2rem;
}

.error-code {
    font-size: 10rem;
    font-weight: 800;
    line-height: 1;
    color: var(--bs-white);
    text-shadow: 10px 10px 0px var(--bs-primary-hover-alpha-10);
    margin: 0;
    letter-spacing: -5px;
}

.error-code-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    color: var(--bg-secondary);
    font-size: 2.5rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.error-icon-box {
    font-size: 4rem;
    color: var(--bs-primary);
    margin-bottom: 1.5rem;
}

.error-title {
    font-size: 2.25rem;
    font-weight: 400;
    margin-bottom: 1rem;
}

.error-description {
    font-size: 1.1rem;
    color: var(--bs-gray);
    margin-bottom: 3rem;
    line-height: 1.6;
}

.error-actions {
    padding: 0.8rem 0;
    font-weight: 500;
    border-radius: 8px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 576px) {
    .error-code {
        font-size: 6rem;
    }

    .error-code-overlay {
        font-size: 1.5rem;
    }

    .error-title {
        font-size: 1.75rem;
    }
}

@media print {
    body {
        padding: 0;
        margin: 0;
    }

    header {
        display: none !important;
    }

    .content {
        width: 95%;
    }

    .content .buttons {
        display: none;
    }

    p {
        font-size: 14px;
    }

    .title {
        border: none;
        padding: 10px;
    }

    h1 {
        font-size: 27px !important;
    }

    h1,
    h4 {
        color: #989898 !important;
    }

    footer {
        display: none !important;
    }

    .hide-on-print {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        clip: rect(0, 0, 0, 0);
    }

    #pageWrapper {
        background-color: #ffffff !important;
    }

    .reports-card {
        border: none !important;
        box-shadow: none !important;
    }

    @page {
        /*size: A4;*/
        size: landscape;
        /* 👈 landscape mode */
        margin: 0mm;
    }

    html,
    body {
        width: 100% !important;
    }

    .chart {
        width: 100% !important;
        max-width: 100% !important;
    }
}

.hide-on-print {
    display: none;
    visibility: hidden;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

/* ===================== End Error Pages Style ======================*/