/*!
* MDB Override
* Copyright: SRS Fintech
* https://srsfintech.in/
*
* Contact: contact@srsfintech.in
*
*/
:root
{
    --transition: all 0.4s ease;
    --card-radius: 0.75rem;
    --cellW: 10px;                /* JS will set to fit width */
    --cellH: 11px;                /* ~1.2× height (JS updates too) */
    --gap:   1px;                 /* 1–2px visual gap */
    --monthGap: 16px;             /* spacing between months */
}

:root,
[data-mdb-theme=light] {
    --mdb-red: #dc3545;
    --mdb-pink: #d63384; /* Changed to match your accent-color */
    --mdb-purple: #6f42c1; /* Changed to match your secondary-color */
    --mdb-indigo: #6610f2; /* Changed to match your primary-color */
    --mdb-blue: #0d6efd;
    --mdb-cyan: #0dcaf0;
    --mdb-teal: #20c997;
    --mdb-green: #198754;
    --mdb-yellow: #ffc107;
    --mdb-orange: #fd7e14;
    --mdb-white: #fff;
    --mdb-black: #000;
    --mdb-gray: #6c757d; /* Changed to match your text-secondary */
    --mdb-gray-dark: #343a40; /* Darker version of your text-secondary */
    --mdb-gray-50: #f8f9fa; /* Changed to match your background-color */
    --mdb-gray-100: #f8f9fa; /* Changed to match your surface-color */
    --mdb-gray-200: #e9ecef; /* Slightly darker than surface-color */
    --mdb-gray-300: #dee2e6; /* Changed to match your border-color */
    --mdb-gray-400: #ced4da; /* Lighter than text-secondary */
    --mdb-gray-500: #adb5bd; /* Changed to match your text-secondary */
    --mdb-gray-600: #6c757d; /* Darker than text-secondary */
    --mdb-gray-700: #495057; /* Darker still */
    --mdb-gray-800: #343a40; /* Changed to match your text-color */
    --mdb-gray-900: #212529; /* Darker than text-color */
    --mdb-primary: #0d6efd; /* Changed to match your primary-color */
    --mdb-secondary: #6c757d; /* Changed to match your secondary-color */
    --mdb-success: #198754;
    --mdb-danger: #dc3545;
    --mdb-warning: #ffc107;
    --mdb-info: #0dcaf0;
    --mdb-light: #f8f9fa; /* Changed to match your background-color */
    --mdb-dark: #212529; /* Changed to match your text-color */
    --mdb-primary-rgb: 13, 110, 253; /* Updated to match primary-color */
    --mdb-secondary-rgb: 108, 117, 125; /* Updated to match secondary-color */
    --mdb-success-rgb: 25, 135, 84;
    --mdb-danger-rgb: 220, 53, 69;
    --mdb-warning-rgb: 255, 193, 7;
    --mdb-info-rgb: 13, 202, 240;
    --mdb-light-rgb: 248, 249, 250; /* Updated to match background-color */
    --mdb-dark-rgb: 33, 37, 41; /* Updated to match text-color */
    --mdb-primary-text-emphasis: #052c65; /* Darker version of primary-color */
    --mdb-secondary-text-emphasis: #2b2e32; /* Darker version of secondary-color */
    --mdb-success-text-emphasis: #0a3621;
    --mdb-info-text-emphasis: #055160;
    --mdb-warning-text-emphasis: #664d03;
    --mdb-danger-text-emphasis: #58151c;
    --mdb-light-text-emphasis: #495057;
    --mdb-dark-text-emphasis: #dee2e6;
    --mdb-primary-bg-subtle: #cee2fe; /* Lighter version of primary-color */
    --mdb-secondary-bg-subtle: #e1e3e5; /* Lighter version of secondary-color */
    --mdb-success-bg-subtle: #d1edcc;
    --mdb-info-bg-subtle: #cef4fc;
    --mdb-warning-bg-subtle: #fff3cd;
    --mdb-danger-bg-subtle: #f8d7da;
    --mdb-light-bg-subtle: #f8f9fa; /* Changed to match your surface-color */
    --mdb-dark-bg-subtle: #ced4da;
    --mdb-primary-border-subtle: #9ec5fe; /* Lighter version of primary-color */
    --mdb-secondary-border-subtle: #c4c8cb; /* Lighter version of secondary-color */
    --mdb-success-border-subtle: #a3cfbb;
    --mdb-info-border-subtle: #9eeaf9;
    --mdb-warning-border-subtle: #ffe69c;
    --mdb-danger-border-subtle: #f1aeb5;
    --mdb-light-border-subtle: #e9ecef; /* Changed to match your border-color */
    --mdb-dark-border-subtle: #adb5bd;
    --mdb-white-rgb: 255, 255, 255;
    --mdb-black-rgb: 0, 0, 0;
    --mdb-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --mdb-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --mdb-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --mdb-body-font-family: var(--mdb-font-roboto);
    --mdb-body-font-size: 1rem;
    --mdb-body-font-weight: 400;
    --mdb-body-line-height: 1.6;
    --mdb-body-color: #212529; /* Changed to match your text-color */
    --mdb-body-color-rgb: 33, 37, 41; /* Updated to match text-color */
    --mdb-body-bg: #fff; /* Changed to match your background-color */
    --mdb-body-bg-rgb: 255, 255, 255; /* Updated to match background-color */
    --mdb-emphasis-color: #000;
    --mdb-emphasis-color-rgb: 0, 0, 0;
    --mdb-secondary-color: #6c757d; /* Changed to match your text-secondary */
    --mdb-secondary-color-rgb: 108, 117, 125; /* Updated to match text-secondary */
    --mdb-secondary-bg: #e9ecef; /* Changed to match your surface-color */
    --mdb-secondary-bg-rgb: 233, 236, 239; /* Updated to match surface-color */
    --mdb-tertiary-color: rgba(108, 117, 125, 0.5); /* Based on text-secondary */
    --mdb-tertiary-color-rgb: 108, 117, 125;
    --mdb-tertiary-bg: #f8f9fa; /* Changed to match your background-color */
    --mdb-tertiary-bg-rgb: 248, 249, 250; /* Updated to match background-color */
    --mdb-heading-color: inherit;
    --mdb-link-color: #0d6efd; /* Changed to match your primary-color */
    --mdb-link-color-rgb: 13, 110, 253; /* Updated to match primary-color */
    --mdb-link-decoration: none;
    --mdb-link-hover-color: #0a58ca; /* Darker version of primary-color */
    --mdb-link-hover-color-rgb: 10, 88, 202;
    --mdb-link-hover-decoration: none;
    --mdb-code-color: #d63384; /* Changed to match your accent-color */
    --mdb-highlight-color: #212529; /* Changed to match your text-color */
    --mdb-highlight-bg: #fff3cd;
    --mdb-border-width: 1px;
    --mdb-border-style: solid;
    --mdb-border-color: #dee2e6; /* Changed to match your border-color */
    --mdb-border-color-translucent: rgba(0, 0, 0, 0.175);
    --mdb-border-radius: 0.25rem;
    --mdb-border-radius-sm: 0.25rem;
    --mdb-border-radius-lg: 0.5rem;
    --mdb-border-radius-xl: 1rem;
    --mdb-border-radius-xxl: 2rem;
    --mdb-border-radius-2xl: var(--mdb-border-radius-xxl);
    --mdb-border-radius-pill: 50rem;
    --mdb-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Changed to match your shadow */
    --mdb-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --mdb-box-shadow-lg: 0 0 15px 0 rgba(124, 65, 243, 0.4);
    --mdb-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --mdb-focus-ring-width: 0.25rem;
    --mdb-focus-ring-opacity: 0.25;
    --mdb-focus-ring-color: rgba(13, 110, 253, 0.25); /* Updated to match primary-color */
    --mdb-form-valid-color: #198754;
    --mdb-form-valid-border-color: #198754;
    --mdb-form-invalid-color: #dc3545;
    --mdb-form-invalid-border-color: #dc3545
}
[data-mdb-theme=dark] {
    color-scheme: dark;
    --mdb-body-color: #dee2e6; /* Changed to match your dark text-color */
    --mdb-body-color-rgb: 222, 226, 230; /* Updated to match dark text-color */
    --mdb-body-bg: #212529; /* Changed to match your dark background-color */
    --mdb-body-bg-rgb: 33, 37, 41; /* Updated to match dark background-color */
    --mdb-emphasis-color: #fff;
    --mdb-emphasis-color-rgb: 255, 255, 255;
    --mdb-secondary-color: rgba(222, 226, 230, 0.75); /* Changed to match your dark text-secondary */
    --mdb-secondary-color-rgb: 222, 226, 230; /* Updated to match dark text-secondary */
    --mdb-secondary-bg: #343a40; /* Changed to match your dark surface-color */
    --mdb-secondary-bg-rgb: 52, 58, 64; /* Updated to match dark surface-color */
    --mdb-tertiary-color: rgba(222, 226, 230, 0.5); /* Based on dark text-secondary */
    --mdb-tertiary-color-rgb: 222, 226, 230;
    --mdb-tertiary-bg: rgb(42.5, 47.5, 52.5); /* Changed to match your dark surface-color */
    --mdb-tertiary-bg-rgb: 43, 48, 53; /* Updated to match dark surface-color */
    --mdb-primary-text-emphasis: #6da8fd; /* Lighter version of primary-color for dark mode */
    --mdb-secondary-text-emphasis: #a6acb1; /* Lighter version of secondary-color for dark mode */
    --mdb-success-text-emphasis: #75b798;
    --mdb-info-text-emphasis: #6ddff6;
    --mdb-warning-text-emphasis: #ffd96a;
    --mdb-danger-text-emphasis: #ea858f;
    --mdb-light-text-emphasis: #f8f9fa;
    --mdb-dark-text-emphasis: #dee2e6;
    --mdb-primary-bg-subtle: #021632; /* Darker version of primary-color for dark mode */
    --mdb-secondary-bg-subtle: #151719; /* Darker version of secondary-color for dark mode */
    --mdb-success-bg-subtle: #051b10;
    --mdb-info-bg-subtle: #022830;
    --mdb-warning-bg-subtle: #332601;
    --mdb-danger-bg-subtle: #2c0a0e;
    --mdb-light-bg-subtle: #343a40; /* Changed to match your dark surface-color */
    --mdb-dark-bg-subtle: #1a1d20;
    --mdb-primary-border-subtle: #074297; /* Darker version of primary-color for dark mode */
    --mdb-secondary-border-subtle: #40464b; /* Darker version of secondary-color for dark mode */
    --mdb-success-border-subtle: #0f5132;
    --mdb-info-border-subtle: #077990;
    --mdb-warning-border-subtle: #997304;
    --mdb-danger-border-subtle: #841f29;
    --mdb-light-border-subtle: #495057; /* Changed to match your dark border-color */
    --mdb-dark-border-subtle: #343a40;
    --mdb-heading-color: inherit;
    --mdb-link-color: #8185f3; /* Lighter version of primary-color for dark mode */
    --mdb-link-hover-color: #8a8df4; /* Even lighter version for hover */
    --mdb-link-color-rgb: 129, 133, 243;
    --mdb-link-hover-color-rgb: 138, 141, 244;
    --mdb-code-color: #f278a1;
    --mdb-highlight-color: #fff;
    --mdb-highlight-bg: #f9a825;
    --mdb-border-color: #374151; /* Changed to match your dark border-color */
    --mdb-border-color-translucent: rgba(255, 255, 255, 0.15);
    --mdb-form-valid-color: #75b798;
    --mdb-form-valid-border-color: #75b798;
    --mdb-form-invalid-color: #ea858f;
    --mdb-form-invalid-border-color: #ea858f
}

/* START: Dark Theme Accordion Override */
[data-mdb-theme=dark] .accordion-button.collapsed {
  color: #d1d5db !important; /* A lighter gray for better contrast on dark backgrounds */
}
/* END: Dark Theme Accordion Override */


:root,
[data-mdb-theme=light] {
    --mdb-font-roboto: "Roboto", sans-serif;
    --mdb-font-roboto-slab: "Roboto Slab", serif; /* Added Roboto Slab */
    --mdb-bg-opacity: 1;
    --mdb-text-hover-opacity: 0.8;
    --mdb-surface-color: #1f2937; /* Changed to match your text-color */
    --mdb-surface-color-rgb: 31, 41, 55;
    --mdb-surface-bg: #f1f5f9; /* Changed to match your surface-color */
    --mdb-surface-inverted-color: #fff;
    --mdb-surface-inverted-color-rgb: 255, 255, 255;
    --mdb-surface-inverted-bg: #334155; /* Darker shade for inverted surfaces */
    --mdb-divider-color: #cbd5e1; /* Changed to match your border-color */
    --mdb-divider-blurry-color: #6b7280; /* Changed to match your text-secondary */
    --mdb-highlight-bg-color: #f1f5f9; /* Changed to match your surface-color */
    --mdb-scrollbar-rail-bg: #f1f5f9; /* Changed to match your surface-color */
    --mdb-scrollbar-thumb-bg: #6b7280; /* Changed to match your text-secondary */
    --mdb-picker-header-bg: #6366f1; /* Changed to match your primary-color */
    --mdb-timepicker-clock-face-bg: #f1f5f9; /* Changed to match your surface-color */
    --mdb-sidenav-backdrop-opacity: 0.1;
    --mdb-input-focus-border-color: #6366f1; /* Changed to match your primary-color */
    --mdb-input-focus-label-color: #6366f1; /* Changed to match your primary-color */
    --mdb-form-control-border-color: #cbd5e1; /* Changed to match your border-color */
    --mdb-form-control-label-color: #6b7280; /* Changed to match your text-secondary */
    --mdb-form-control-disabled-bg: #e2e8f0; /* Light gray for disabled state */
    --mdb-box-shadow-color: #000;
    --mdb-box-shadow-color-rgb: 0, 0, 0;
    --mdb-stepper-mobile-bg: #f8fafc; /* Changed to match your background-color */
}


[data-mdb-theme=dark] {
    color-scheme: dark;
    --mdb-surface-color: #f9fafb; /* Changed to match your text-color */
    --mdb-surface-color-rgb: 249, 250, 251;
    --mdb-surface-bg: #1f2937; /* Changed to match your surface-color */
    --mdb-surface-inverted-color: #f9fafb; /* Changed to match your text-color */
    --mdb-surface-inverted-color-rgb: 249, 250, 251;
    --mdb-surface-inverted-bg: #0f172a; /* Darker shade for inverted surfaces */
    --mdb-divider-color: rgba(55, 65, 81, 0.12); /* Using your border-color with opacity */
    --mdb-divider-blurry-color: #9ca3af; /* Changed to match your text-secondary */
    --mdb-highlight-bg-color: #1f2937; /* Changed to match your surface-color */
    --mdb-scrollbar-rail-bg: #374151; /* Changed to match your border-color */
    --mdb-scrollbar-thumb-bg: #9ca3af; /* Changed to match your text-secondary */
    --mdb-picker-header-bg: #111827; /* Changed to match your background-color */
    --mdb-timepicker-clock-face-bg: #1f2937; /* Changed to match your surface-color */
    --mdb-sidenav-backdrop-opacity: 0.5;
    --mdb-form-control-border-color: rgba(156, 163, 175, 0.7); /* Using your text-secondary with opacity */
    --mdb-form-control-label-color: #9ca3af; /* Changed to match your text-secondary */
    --mdb-form-control-disabled-bg: #374151; /* Changed to match your border-color */
    --mdb-box-shadow-color: #000;
    --mdb-box-shadow-color-rgb: 0, 0, 0;
    --mdb-stepper-mobile-bg: #111827; /* Changed to match your background-color */
}

h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
    background: linear-gradient(to right, var(--mdb-primary), var(--mdb-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-family: var(--mdb-font-roboto-slab);
}

.btn-primary {
  background-image: linear-gradient(to right, var(--mdb-primary), var(--mdb-secondary));
}

.btn-outline-primary {
  transition: all 0.2s ease-in-out;
}

.btn-outline-primary:hover {
  background-image: linear-gradient(to right, var(--mdb-primary), var(--mdb-secondary));
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.p-10 {
    padding: 6rem !important
}

.py-10 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

/* Hero Section */
.hero {
    position: relative;
    padding: 5rem 0;
    text-align: center;
    overflow: hidden;
    background: none; /* Remove direct background image */
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    background: url('../images/bg.png') no-repeat center center;
    background-size: cover;
    opacity: 0.3;
    z-index: 0;
    pointer-events: none;
}

.hero > * {
    position: relative;
    z-index: 1; /* Puts actual content above overlay */
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(to right, var(--mdb-primary), var(--mdb-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.hero p {
    font-size: 1.25rem;
    color: var(--mdb-surface-color);
    max-width: 60%;
    margin: 0 auto 2rem;
}

.card {
    background: var(--mdb-body-bg);
    position: relative;
    overflow: hidden;
    border-radius: var(--card-radius);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--mdb-box-shadow-lg);
    transition: var(--transition);
}

.tab-content img {
    max-width: 100%;
    height: auto;
}

@media(min-width: 576px) {

    .hero p {
        max-width: 540px
    }
}

@media(min-width: 768px) {

    .hero p {
        max-width: 720px
    }
}

@media(min-width: 992px) {

    .hero p {
        max-width: 960px
    }
}

@media(min-width: 1200px) {

    .hero p {
        max-width: 1140px
    }
}

@media(min-width: 1400px) {

    .hero p {
        max-width: 1320px
    }
}

@media(min-width: 1600px) {

    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 80%;
    }

    .hero p {
        max-width: 40%
    }
}

/* Reset heading gradient for accordion buttons */
/* Override the accordion button chevron */
.accordion-button::after {
    /* Remove default chevron */
    background-image: none !important;
    
    /* Add custom SVG */
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23FDFEFF' d='M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM239 377l-80-80c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l39 39 0-150.1c0-13.3 10.7-24 24-24s24 10.7 24 24l0 150.1 39-39c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-80 80c-9.4 9.4-24.6 9.4-33.9 0z'/%3E%3C/svg%3E") !important;
    
    /* Set size */
    width: 1.25rem !important;
    height: 1.25rem !important;
    
    /* Position and alignment */
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(0deg) !important;
    transition: transform 0.2s ease-in-out !important;
}

/* Expanded state - rotate chevron to point down */
.accordion-button:not(.collapsed)::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236366F1' d='M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM239 377l-80-80c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l39 39 0-150.1c0-13.3 10.7-24 24-24s24 10.7 24 24l0 150.1 39-39c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-80 80c-9.4 9.4-24.6 9.4-33.9 0z'/%3E%3C/svg%3E") !important;
    transform: translateY(-50%) rotate(-180deg) !important;
}

.accordion-button {
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
    font-family: var(--mdb-font-roboto, sans-serif) !important;
}

.accordion-button:hover {
    transform: translateX(5px);
    box-shadow: 0 0 15px 0 rgba(124, 65, 243, 0.4);
    transition: var(--transition);
}

.accordion-button.collapsed {
  color: var(--mdb-secondary-color) !important; 
}


.accordion-button:not(.collapsed) {
  color: var(--mdb-primary) !important;
}

.accordion .accordion-item {
  border: none;
  border-radius: var(--mdb-border-radius-lg) !important; 
  margin-bottom: 1rem; 
  box-shadow: 0 2px 15px -3px rgba(var(--mdb-box-shadow-color-rgb), 0.07), 0 10px 20px -2px rgba(var(--mdb-box-shadow-color-rgb), 0.04);
}

.accordion > .accordion-item + .accordion-item {
    border-top-width: 0;
}

.accordion .accordion-button {
    border-radius: var(--mdb-border-radius-lg);
}

.accordion .accordion-button:not(.collapsed) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: transparent; /* Add this line */
    box-shadow: none; /* Add this line */
}

.accordion .accordion-collapse {
    border-bottom-left-radius: var(--mdb-border-radius-lg);
    border-bottom-right-radius: var(--mdb-border-radius-lg);
}

.feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: var(--mdb-primary-bg-subtle);
    background-clip: border-box;
    border: 1px solid var(--mdb-border-color);
    border-radius: var(--mdb-border-radius-lg);
    box-shadow: var(--mdb-box-shadow);
    transition: var(--transition);
    padding: 1rem; /* default card padding */
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--mdb-box-shadow-lg);
    transition: var(--transition);
}

.feature-card > .feature-card-body {
    flex: 1 1 auto;
    padding: 1rem 1.5rem;
    color: var(--mdb-body-color);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--mdb-primary), var(--mdb-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

.feature-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--mdb-body-color);
}

.feature-description {
    color: var(--mdb-secondary-text);
    font-size: 1rem;
}

/* Optional: Card header and footer structure resembling MDBootstrap */
.feature-card-header,
.feature-card-footer {
    padding: 0.75rem 1.25rem;
    background-color: var(--mdb-card-bg);
    border-bottom: 1px solid var(--mdb-border-color);
    font-weight: 500;
    color: var(--mdb-body-color);
}



/* Privacy Policy Specific Styles */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--mdb-primary), var(--mdb-secondary)) !important;
}

.privacy-hero {
    position: relative;
    overflow: hidden;
}

.privacy-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    z-index: 1;
}

.privacy-hero .container {
    position: relative;
    z-index: 2;
}

.sticky-sidebar {
    position: sticky;
    top: 2rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}

.list-group-item {
    transition: all 0.3s ease;
    border: none;
    border-left: 3px solid transparent;
}

.list-group-item:hover {
    background-color: var(--mdb-primary-bg-subtle);
    border-left-color: var(--mdb-primary);
    transform: translateX(5px);
}

.list-group-item.active {
    background-color: var(--mdb-primary-bg-subtle);
    border-left-color: var(--mdb-primary);
    color: var(--mdb-secondary);
}

/* Crossfade tab pane transitions (previous fades out, then current fades in) */
.tab-pane {
    transition: opacity 90ms cubic-bezier(.2,.8,.2,1), transform 110ms cubic-bezier(.2,.8,.2,1);
    will-change: opacity, transform;
}
.tab-pane.fade {
    opacity: 0;
    transform: translateY(4px);
}
/* Incoming pane: delay its fade-in slightly so the outgoing pane can fade out first */
.tab-pane.fade.show,
.tab-pane.show {
    transition-delay: 30ms; /* much shorter delay for snappier switching */
    opacity: 1;
    transform: translateY(0);
}
/* Ensure only the visible pane is interactive */
.tab-pane:not(.show) {
    pointer-events: none;
}

/* Helper classes for JS-driven crossfade sequencing */
.tab-pane.is-fading-out {
    opacity: 0 !important;
    transform: translateY(4px) !important;
    transition: opacity 70ms cubic-bezier(.2,.8,.2,1), transform 80ms cubic-bezier(.2,.8,.2,1);
}
.tab-pane.is-fading-in {
    opacity: 0 !important;
    transform: translateY(4px) !important;
    /* no delay here; JS will add .show then trigger reflow to animate to visible */
}

/* Make list-group item state transitions slightly snappier and smooth background change */
.list-group-item {
    transition: background-color 200ms ease, border-left-color 200ms ease, transform 180ms ease, color 200ms ease;
}
.list-group-item.active {
    transition: background-color 260ms ease, border-left-color 260ms ease, transform 200ms ease, color 260ms ease;
}

.card-header h4 {
    background: linear-gradient(to right, var(--mdb-primary), var(--mdb-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-family: var(--mdb-font-roboto-slab);
}

.privacy-section {
    scroll-margin-top: 2rem;
}

.alert {
    border-radius: 0.75rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.btn-floating {
    border-radius: 50%;
    width: 56px;
    height: 56px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.btn-floating:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.privacy-icon-box {
    transition: all 0.3s ease;
    border-radius: 0.75rem;
}

.privacy-icon-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.rights-item {
    transition: all 0.3s ease;
    padding: 1rem;
    border-radius: 0.5rem;
}

.rights-item:hover {
    background-color: var(--mdb-light-bg-subtle);
    transform: translateX(5px);
}

@media (max-width: 991.98px) {
    .sticky-sidebar {
        position: static;
        max-height: none;
    }
    
    .privacy-hero h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 767.98px) {
    .privacy-hero h1 {
        font-size: 2rem;
    }
    
    .feature-card {
        margin-bottom: 1rem;
    }
}

/*
    ======================================
    PRICING TOGGLE BUTTONS
    ======================================
    This section styles the 'Monthly', 'Quarterly', and 'Yearly' buttons.
*/

.pricing-toggle-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.pricing-toggle {
    display: inline-flex;
    background-color: var(--mdb-surface-bg);
    border-radius: 2rem;
    padding: 0.25rem;
    box-shadow: var(--mdb-box-shadow);
    border: 1px solid var(--mdb-border-color);
}

.pricing-toggle-option {
    padding: 0.75rem 1.5rem;
    border-radius: 1.5rem;
    font-weight: 500;
    color: var(--mdb-secondary-color);
    cursor: pointer;
    transition: var(--transition);
    border: none;
    background: none;
}

.pricing-toggle-option.active {
    /* The gradient background for the active button. */
    background: linear-gradient(135deg, var(--mdb-primary), var(--mdb-secondary-color));
    color: white;
    box-shadow: 0 4px 10px -2px rgba(99, 102, 241, 0.3);
}

.pricing-toggle-option:hover:not(.active) {
    color: var(--mdb-primary);
}

.discount-badge {
    display: inline-block;
    background-color: var(--mdb-pink);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}


/*
    ======================================
    PRICING CARDS & FEATURES
    ======================================
    These rules control the appearance of the individual plan cards and their content.
*/

.pricing {
    padding: 4rem 0;
    background-color: var(--mdb-secondary-bg);
}

.pricing-card {
    background-color: var(--mdb-primary-bg-subtle);
    border-radius: 0.5rem;
    padding: 2rem;
    box-shadow: var(--mdb-box-shadow);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    height: 100%;
}

.pricing-card em {
    font-size: 0.75rem;
    color: var(--mdb-secondary-color);
    margin-top: auto;
    padding-top: 0.5rem;
    margin-bottom: 1rem;
}

/* Styles for the "Most Popular" ribbon */
.pricing-card.featured {
    border: 2px solid var(--mdb-primary);
}
.pricing-card.featured::before {
    content: 'Most Popular';
    position: absolute;
    top: 15px;
    right: -30px;
    background: linear-gradient(135deg, var(--mdb-primary), var(--mdb-secondary-color));
    color: white;
    padding: 0.25rem 2rem;
    transform: rotate(45deg);
    font-size: 0.75rem;
    font-weight: 600;
}

.pricing-card:hover {
    transform: translateY(-5px);
}

.plan-name {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.plan-price {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.plan-price span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--mdb-secondary-color);
}

.plan-features {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
}

.plan-feature {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    color: var(--mdb-secondary-color);
}

.plan-feature i {
    color: var(--mdb-primary);
    margin-right: 0.5rem;
}

/* Styles for the check and x-mark icons */
.plan-feature i.fa-circle-check {
    color: #10b981; /* Green color */
}

.plan-feature i.fa-circle-xmark {
    color: #ef4444; /* Red color */
}


/*
    ======================================
    BUTTON STYLES
    ======================================
    These are the styles for the "Get Started" buttons inside the pricing cards.
*/

.btn-outline-custom {
    background-color: transparent;
    color: var(--mdb-primary);
    border: 1px solid var(--mdb-primary);
    padding: 0.5rem 1.2rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: var(--transition);
}

.btn-outline-custom:hover {
    background-color: var(--mdb-primary);
    color: white;
}

.btn-primary-custom {
    background: linear-gradient(135deg, var(--mdb-primary), var(--mdb-secondary-color));
    color: white;
    padding: 0.5rem 1.2rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: var(--transition);
}

.btn-primary-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3);
}

.alert {
  transition: opacity 0.3s ease;
  opacity: 1;
}

.alert.fade-out {
  opacity: 0;
  pointer-events: none; /* Optional: prevent interaction during fade-out */
}

/* weekday strip is removed */
#calendar-day-labels { display:none !important; }

/* months row uses full width with inner padding on all sides */
#calendar-heatmap.calendar-container{
  display:flex;
  gap: var(--monthGap);
  overflow:hidden;              /* no scrollbars */
  align-items:flex-start;
  width:100%;
  box-sizing:border-box;
  padding: 8px 12px;            /* subtle margin-like breathing room */
}

/* each month tile */
.calendar-month{
  flex:0 0 auto;
  min-width:0;
}
.calendar-month-label{
  font-size:12px;
  color:#8b8f98;
  margin: 0 0 6px 0;
  white-space:nowrap;
}

/* TOP→DOWN then LEFT flow; 7 rows; auto-fit columns */
.calendar-grid{
  display:grid;
  grid-auto-flow: column;                     /* dates fill top-down */
  grid-template-rows: repeat(7, var(--cellH));
  grid-auto-columns: var(--cellW);
  gap: var(--gap);
}

/* day cells */
.calendar-day-square{
  width: var(--cellW);
  height: var(--cellH);
  border-radius: 2px;
  box-sizing: border-box;
}

/* === HEATMAP COLORS === */

/* PROFIT */
.day-profit {
    background-color: #00c853;   /* Max profit */
}
.day-profit.min {
    background-color: #b2f5cb;   /* Min profit */
}

/* LOSS */
.day-loss {
    background-color: #ff4d4f;   /* Max loss */
}
.day-loss.min {
    background-color: #ffcccc;   /* Min loss */
}

/* BREAK-EVEN */
.day-breakeven {
    background-color: #dcdcdc !important;
}

/* NO TRADE */
.day-no-trade {
    background-color: var(--mdb-gray-300) !important;
}

/* Empty placeholder before month starts */
.day-empty {
    background-color: transparent;
}

/* legend (unchanged, compact) */
.calendar-legend{
  display:flex; gap:24px; margin-top:10px;
  color:#8b8f98; font-size:12px;
}
.calendar-legend .legend-item{ display:flex; align-items:center; gap:6px; }
.calendar-legend .legend-swatch{ width:12px; height:12px; border-radius:2px; }

.table td.text-end,
.table th.text-end {
    text-align: right !important;
}

/* Tooltip */
.calendar-tooltip{
  position: fixed;
  pointer-events: none;
  background: rgba(20,22,30,0.96);
  color: #cbd5e1;
  border: 1px solid rgba(148,163,184,0.25);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.35;
  z-index: 1000;
  box-shadow: 0 6px 22px rgba(0,0,0,0.35);
  /* auto width with a soft cap */
  width: max-content;
  max-width: 360px;
  white-space: normal;        /* allow wrapping if needed */
}

.calendar-tooltip .trow{
  display:flex; 
  align-items:center; 
  gap:12px;
  margin: 2px 0;
}

.calendar-tooltip .k{
  color:#9aa4b2;
  text-align:left;
  flex: 1 1 auto;            /* expand label area */
}

.calendar-tooltip .v{
  font-weight:600;
  text-align:right;          /* right-align numbers */
  min-width: 110px;          /* keeps column tidy */
  flex: 0 0 auto;
}

.calendar-tooltip .v.pos { color:#00c853; }
.calendar-tooltip .v.neg { color:#ff4d4f; }
.calendar-tooltip .v.chg { color:#ffb300; }    /* amber */
.calendar-tooltip .v.count { color:#6366f1; }  /* themed */
.calendar-tooltip .date { color:#9aa4b2; margin-bottom:4px; }