/* =============================================================================
   theme-modern.css — indigo_fusion modern purple re-skin
   -----------------------------------------------------------------------------
   Loaded LAST (after main.css, custom.css and color.php) so it wins the cascade.

   What it does:
     1. Defines a purple palette as CSS custom properties (5 purple variants
        + white) and repairs the undefined --main variable used by custom.css.
     2. Re-builds the button system on top of that palette:
          .btn--base        solid gradient purple  (the main CTA, ~98 usages)
          .btn--primary     solid mid purple
          .btn--info        light purple
          .btn--dark        deep purple
          .btn--secondary   soft lavender (purple text on tint)
          .btn--light       WHITE with purple text + hairline purple border
          .btn--white       same, for explicit white buttons
          .btn-outline--*   purple outlines
     3. Modernises the shape: 10px radius, 600 weight, soft purple glow,
        hover lift, focus ring, smoother transitions.
     4. Re-points the utility colours (.text--primary, .bg--primary,
        .badge--primary, .text--info …) away from violet-blue / cyan.
   ========================================================================== */


:root {
    /* --- purple variants ------------------------------------------------- */
    --pv-950: #2e1065;   /* deepest  – dark surfaces                     */
    --pv-900: #4c1d95;   /* deep     – hover on dark                     */
    --pv-800: #5b21b6;   /* dark     – pressed / gradient end            */
    --pv-700: #6d28d9;   /* strong   – primary buttons                   */
    --pv-600: #7c3aed;   /* main     – brand accent                      */
    --pv-500: #8b5cf6;   /* bright   – hover                             */
    --pv-400: #a78bfa;   /* light    – info / soft accents               */
    --pv-300: #c4b5fd;   /* pale     – borders                           */
    --pv-200: #ddd6fe;
    --pv-100: #ede9fe;   /* tint     – soft button background            */
    --pv-50:  #f5f3ff;   /* wash                                   */

    /* --- white variant --------------------------------------------------- */
    --pv-white: #ffffff;

    /* --- composed -------------------------------------------------------- */
    --pv-brand:        var(--pv-600);
    --pv-brand-strong: var(--pv-700);
    --pv-grad:         linear-gradient(135deg, var(--pv-500) 0%, var(--pv-700) 100%);
    --pv-grad-soft:    linear-gradient(135deg, var(--pv-600) 0%, var(--pv-800) 100%);
    --pv-glow:         0 6px 18px -4px rgba(124, 58, 237, .45);
    --pv-glow-hi:      0 10px 26px -6px rgba(124, 58, 237, .55);

    /* custom.css references hsl(var(--main)) but nothing ever defined it,
       so .base-color was silently rendering as inherited colour. */
    --main: var(--base-h), var(--base-s), var(--base-l);

    /* main.css :root left --black on a cyan hue (196); re-tint the hairlines
       to the same purple family. */
    --black-h: 262;
    --black-s: 60%;
    --black-l: 8%;

    /* --- Bootstrap (assets/global) ships #0d6efd blue for links, primary
       buttons, checked checkboxes and focus rings. Re-point the whole token
       set at purple so every one of them follows without touching
       bootstrap.min.css. */
    --bs-link-color:          var(--pv-700);
    --bs-link-hover-color:    var(--pv-800);
    --bs-link-rgb:            124, 58, 237;
    --bs-primary:             #7c3aed;
    --bs-primary-rgb:         124, 58, 237;
    --bs-focus-ring-color:    rgba(124, 58, 237, .35);
    --bs-body-link:           var(--pv-700);
}


/* =============================================================================
   1. Button base — modern shape
   ========================================================================== */

.btn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: .01em;
    border: 1px solid transparent;
    transition: background-color .25s ease, color .25s ease,
                border-color .25s ease, box-shadow .25s ease,
                transform .2s ease;
}

.btn:focus-visible,
.btn:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, .35) !important;
}

.btn:active {
    transform: translateY(1px);
}


/* =============================================================================
   2. Solid purple variants
   ========================================================================== */

/* --- main CTA ---------------------------------------------------------- */
.btn--base {
    background: var(--pv-grad) !important;
    background-color: var(--pv-600) !important;   /* fallback if gradient dies */
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: var(--pv-glow);
}

.btn--base:hover,
.btn--base:focus,
.btn--base:active {
    background: var(--pv-grad-soft) !important;
    background-color: var(--pv-700) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: var(--pv-glow-hi);
    transform: translateY(-2px);
}

.btn--base:active {
    transform: translateY(0);
}

/* --- primary ----------------------------------------------------------- */
.btn--primary {
    background: var(--pv-grad) !important;
    background-color: var(--pv-600) !important;
    border-color: var(--pv-600) !important;
    color: #fff !important;
    box-shadow: var(--pv-glow);
}

.btn--primary:hover,
.btn--primary:focus,
.btn--primary:active {
    background: var(--pv-grad-soft) !important;
    background-color: var(--pv-700) !important;
    border-color: var(--pv-700) !important;
    color: #fff !important;
    box-shadow: var(--pv-glow-hi);
    transform: translateY(-2px);
}

/* --- info → light purple variant --------------------------------------- */
.btn--info {
    background-color: var(--pv-500) !important;
    color: #fff !important;
    border-color: var(--pv-500) !important;
}

.btn--info:hover,
.btn--info:focus,
.btn--info:active {
    background-color: var(--pv-600) !important;
    color: #fff !important;
    border-color: var(--pv-600) !important;
}

/* --- dark → deep purple ------------------------------------------------ */
.btn--dark {
    background-color: var(--pv-950) !important;
    color: #fff !important;
    border-color: var(--pv-950) !important;
}

.btn--dark:hover,
.btn--dark:focus,
.btn--dark:active {
    background-color: var(--pv-900) !important;
    color: #fff !important;
    border-color: var(--pv-900) !important;
}

/* --- secondary → soft lavender (purple text on tint) ------------------- */
.btn--secondary {
    background-color: var(--pv-100) !important;
    color: var(--pv-800) !important;
    border-color: var(--pv-200) !important;
}

.btn--secondary:hover,
.btn--secondary:focus,
.btn--secondary:active {
    background-color: var(--pv-200) !important;
    color: var(--pv-800) !important;
    border-color: var(--pv-300) !important;
}


/* =============================================================================
   3. WHITE variants
   (the global [class*="btn--"] rule forces #fff text, so colour uses !important)
   ========================================================================== */

.btn--light,
.btn--white {
    background-color: var(--pv-white) !important;
    color: var(--pv-700) !important;
    border-color: var(--pv-300) !important;
    box-shadow: 0 2px 8px -2px rgba(46, 16, 101, .18);
}

.btn--light:hover,
.btn--light:focus,
.btn--light:active,
.btn--white:hover,
.btn--white:focus,
.btn--white:active {
    background-color: var(--pv-50) !important;
    color: var(--pv-800) !important;
    border-color: var(--pv-400) !important;
    box-shadow: 0 6px 16px -6px rgba(46, 16, 101, .30);
    transform: translateY(-2px);
}

/* white text button sitting on a purple field */
.btn--on-brand {
    background-color: var(--pv-white) !important;
    color: var(--pv-700) !important;
    border-color: var(--pv-white) !important;
}


/* =============================================================================
   4. Outline variants
   ========================================================================== */

/* already driven by hsl(var(--base)) — now purple — just modernise the hover */
.btn-outline--base {
    color: var(--pv-700) !important;
    border-color: var(--pv-500) !important;
    background-color: transparent !important;
}

.btn-outline--base:hover,
.btn-outline--base:focus {
    background-color: var(--pv-600) !important;
    border-color: var(--pv-600) !important;
    color: #fff !important;
    box-shadow: var(--pv-glow);
    transform: translateY(-2px);
}

.btn-outline--primary {
    color: var(--pv-700) !important;
    border-color: var(--pv-500) !important;
    background-color: transparent !important;
}

.btn-outline--primary:hover,
.btn-outline--primary:focus {
    background-color: var(--pv-600) !important;
    border-color: var(--pv-600) !important;
    color: #fff !important;
}

.btn-outline--secondary {
    color: var(--pv-800) !important;
    border-color: var(--pv-300) !important;
}

.btn-outline--secondary:hover,
.btn-outline--secondary:focus {
    background-color: var(--pv-100) !important;
    border-color: var(--pv-400) !important;
    color: var(--pv-800) !important;
}

.btn-outline--info {
    color: var(--pv-600) !important;
    border-color: var(--pv-400) !important;
}

.btn-outline--info:hover,
.btn-outline--info:focus {
    background-color: var(--pv-600) !important;
    border-color: var(--pv-600) !important;
    color: #fff !important;
}

/* the stock .btn-outline--light turned white text on a white-ish fill */
.btn-outline--light {
    color: var(--pv-700) !important;
    border-color: var(--pv-300) !important;
    background-color: var(--pv-white) !important;
}

.btn-outline--light:hover,
.btn-outline--light:focus {
    background-color: var(--pv-50) !important;
    color: var(--pv-800) !important;
    border-color: var(--pv-400) !important;
}

.btn-outline--dark {
    color: var(--pv-950) !important;
    border-color: var(--pv-400) !important;
}

.btn-outline--dark:hover,
.btn-outline--dark:focus {
    background-color: var(--pv-950) !important;
    border-color: var(--pv-950) !important;
    color: #fff !important;
}

/* --- link button ------------------------------------------------------- */
.btn--link {
    color: var(--pv-700) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none;
}

.btn--link:hover {
    color: var(--pv-500) !important;
    text-decoration: underline;
}

/* --- soft shadow accents (main.css ships violet-blue glows) -------------- */
.btn-shadow--primary {
    box-shadow: 0 0 8px 1px rgba(124, 58, 237, .35) !important;
}


/* =============================================================================
   5. Gradient / header buttons (transition groups in main.css)
   ========================================================================== */

.header-base-button {
    background: var(--pv-grad) !important;
    background-color: var(--pv-600) !important;
    color: #fff !important;
    border-radius: 10px;
    box-shadow: var(--pv-glow);
    transition: box-shadow .25s ease, transform .2s ease;
}

.header-base-button:hover,
.header-base-button:active {
    background: var(--pv-grad-soft) !important;
    background-color: var(--pv-700) !important;
    color: #fff !important;
    box-shadow: var(--pv-glow-hi);
    transform: translateY(-2px);
}


/* =============================================================================
   6. Utility colours — retire the violet-blue / cyan
   ========================================================================== */

.text--primary {
    color: var(--pv-700) !important;
}

.bg--primary {
    background-color: var(--pv-600) !important;
}

.border--primary {
    border-color: var(--pv-600) !important;
}

/* was #1e9ff2 (blue) */
.text--info {
    color: var(--pv-600) !important;
}

.bg--info {
    background-color: var(--pv-600) !important;
}

/* --- badges ------------------------------------------------------------ */
.badge--primary {
    background-color: rgba(124, 58, 237, .15) !important;
    border: 1px solid var(--pv-600) !important;
    color: var(--pv-700) !important;
}

.badge--info {
    background-color: rgba(139, 92, 246, .15) !important;
    border: 1px solid var(--pv-500) !important;
    color: var(--pv-700) !important;
}

.badge--light {
    background-color: var(--pv-100) !important;
    border: 1px solid var(--pv-200) !important;
    color: var(--pv-800) !important;
}

/* --- surface blocks ---------------------------------------------------- */
.bg--base {
    background: var(--pv-grad) !important;
    background-color: var(--pv-600) !important;
    color: #fff !important;
}


/* =============================================================================
   7. Accent details — links, focus rings, checkbox, selections
   ========================================================================== */

/* NOTE: the global `a:hover { color: hsl(var(--base)) }` in main.css already
   follows base_color, which is now purple — no extra link rule needed here so
   component hover colours (footer, sidebar, dropdown) are left alone. */

.form--control:focus,
.form--control:focus~.input-group-text {
    border-color: var(--pv-500) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .22) !important;
}

.form--control:focus {
    color: var(--pv-950);
}

/* dark surfaces keep white typing text on focus — the rule above targets
   light forms; without this, typing turns dark-on-dark (invisible) */
.account-form .form--control:focus,
.subscribe-form .form--control:focus {
    color: #fff !important;
}

/* agree-line separators (", " between the policy links) inherit body grey —
   unreadable on the dark panel */
.account-form label[for="agree"] + span {
    color: rgba(255, 255, 255, .75);
}

/* password visibility toggle (markup lives in the auth blades) */
.pw-wrap {
    position: relative;
}

.pw-wrap .form--control {
    padding-right: 44px;
}

.account-form .pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 8px;
    color: rgba(255, 255, 255, .65);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.account-form .pw-toggle:hover,
.account-form .pw-toggle:focus-visible {
    color: #fff;
}

.pw-match-hint {
    display: block;
    margin-top: 6px;
    font-size: .82rem;
    color: #c81e1e;
}

.account-form .pw-match-hint {
    color: #ff8f8a;
}

.custom--checkbox input:checked+label,
.custom--checkbox label.is-checked {
    background-color: var(--pv-600);
    border-color: var(--pv-600);
}

::selection {
    background: rgba(124, 58, 237, .25);
    color: var(--pv-950);
}

/* select2 / dropdown highlight (matches custom.css base highlight) */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--pv-600) !important;
}

/* pagination / active pill */
.page-item.active .page-link {
    background-color: var(--pv-600) !important;
    border-color: var(--pv-600) !important;
    color: #fff !important;
}

.page-link {
    color: var(--pv-700);
}

.page-link:hover {
    color: var(--pv-600);
    background-color: var(--pv-50);
}


/* =============================================================================
   8. Bootstrap de-bluing (assets/global/css/bootstrap.min.css)
   Bootstrap hard-codes #0d6efd in several places instead of reading a
   variable, so those need explicit overrides. All use !important to beat
   Bootstrap's own !important utilities.
   ========================================================================== */

/* --- utility colours --------------------------------------------------- */
.text-primary {
    color: var(--pv-600) !important;
}

/* Bootstrap hard-codes .text-muted to #6c757d (4.28:1 on the --pv-50 table
   stripes this theme introduces). Darken it on light surfaces; §10.3 lifts it
   again where the container is dark. */
.text-muted {
    color: #5b6169 !important;
}

.bg-primary {
    background-color: var(--pv-600) !important;
}

.border-primary {
    border-color: var(--pv-600) !important;
}

.link-primary,
a.link-primary {
    color: var(--pv-700) !important;
}

.link-primary:hover,
a.link-primary:hover {
    color: var(--pv-800) !important;
}

/* --- buttons ----------------------------------------------------------- */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--pv-600);
    --bs-btn-border-color: var(--pv-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--pv-700);
    --bs-btn-hover-border-color: var(--pv-700);
    --bs-btn-focus-shadow-rgb: 124, 58, 237;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--pv-800);
    --bs-btn-active-border-color: var(--pv-800);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .15);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--pv-600);
    --bs-btn-disabled-border-color: var(--pv-600);
}

.btn-outline-primary {
    --bs-btn-color: var(--pv-700);
    --bs-btn-border-color: var(--pv-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--pv-600);
    --bs-btn-hover-border-color: var(--pv-600);
    --bs-btn-focus-shadow-rgb: 124, 58, 237;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--pv-700);
    --bs-btn-active-border-color: var(--pv-700);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .15);
}

/* --- form focus glow (was #86b7fe / rgba(13,110,253,.25)) -------------- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--pv-500) !important;
    box-shadow: 0 0 0 .25rem rgba(124, 58, 237, .25) !important;
    outline: 0 !important;
}

/* --- checked checkbox / radio ----------------------------------------- */
.form-check-input:checked {
    background-color: var(--pv-600) !important;
    border-color: var(--pv-600) !important;
}

.form-check-input:focus {
    border-color: var(--pv-500) !important;
    box-shadow: 0 0 0 .25rem rgba(124, 58, 237, .25) !important;
}

/* Bootstrap paints the tick/radio dot with an inline SVG that carries its
   own colour, so re-issue those two data-URIs in purple. */
.form-check-input:focus[type="checkbox"],
.form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a78bfa'/%3e%3c/svg%3e") !important;
}

.form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 3l1.5 1.5L5 1'/%3e%3c/svg%3e") !important;
}

.form-check-radio .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

/* Default link colour: overriding the Bootstrap token in :root (above)
   already re-points every plain <a>, so component rules like `.footer a`
   keep their own (light-on-dark) colours untouched. */

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    background-color: var(--pv-100);
    border-color: var(--pv-300);
    color: var(--pv-700);
}


/* =============================================================================
   9. Last blue stragglers hard-coded in main.css / custom.css
   ========================================================================== */

/* amount / operator pills: background: #00a3f5 when :checked */
.fixed-amount-item:has(input:checked),
.suggested-amount-item:has(input:checked),
.modal .operator-wrapper .single-operator:has(input:checked) {
    background: var(--pv-600) !important;
    border-color: var(--pv-600) !important;
    color: #fff !important;
}

.fixed-amount-item:hover,
.suggested-amount-item:hover {
    border-color: var(--pv-400) !important;
}

/* zebra stripes: #e7f7ff (icy blue) */
.table-responsive--md tbody tr:nth-child(odd),
.table-responsive--sm tbody tr:nth-child(odd) {
    background-color: var(--pv-50) !important;
}

.custom--table tbody tr:nth-child(odd) {
    background-color: var(--pv-50);
}

/* light surface: #eef4ff → purple wash */
.bg--light {
    background-color: var(--pv-50) !important;
}

/* dark navy surfaces → deep purple */
.text--dark {
    color: var(--pv-950) !important;
}

.bg--dark {
    background-color: var(--pv-950) !important;
}

/* cookies bar card in custom.css (grey bg, #1E2337 text) */
.cookies-card {
    background-color: var(--pv-white) !important;
    color: var(--pv-950) !important;
    box-shadow: 0 12px 32px -12px rgba(46, 16, 101, .45);
    border: 1px solid var(--pv-200);
}


/* =============================================================================
   10. Accents that land on DARK surfaces (WCAG AA guard)
   -----------------------------------------------------------------------------
   The theme paints three kinds of backdrop:

       light  white / --pv-50 wash ................. brand purple  5.7:1  ok
       band   full-bleed --pv-600 sections ......... white         5.7:1  ok
       dark   #2e1065 solids, and photographs carrying a 75–80% secondary
              overlay: header bar, hero / inner hero, auth panels, footer,
              .section--bg2, .choose-card, .overview-section,
              .subscribe-section, table heads, mobile drop-downs …

   On the third backdrop the brand purple only reaches 2.7:1 (and main.css'
   #ea5455 danger red 4.3:1) — both below AA, so every accent that can land
   there is re-pointed at two dedicated tokens:

       --pv-on-dark   #c4b5fd   8.2:1 on solid #2e1065
       --pv-on-image  #ddd6fe   5.2:1 even on a white photograph under a
                                75% overlay — used wherever the backdrop is,
                                or may be, a photograph

   Deliberately NOT done by redefining --base-* inside those containers: the
   same variable also paints .service-section, .testimonial-item,
   .plan-card__header and the custom radio/checkbox fills, where lightening
   it would put white text on a pale background.
   ========================================================================== */

:root {
    --pv-on-dark:     #c4b5fd;   /* accent text on #2e1065              */
    --pv-on-image:    #ddd6fe;   /* accent text on photo + dark overlay  */
    --pv-danger-dark: #ff8f8a;   /* 6.9:1 on #2e1065 (#ea5455 is 4.3:1)  */
}


/* --- 10.1 header bar: hsla(secondary, .5) over a dark hero, solid when
       scrolled into a light section -------------------------------------- */
.header .main-menu li a:hover,
.header .main-menu li a:focus,
.header .main-menu li a.active,
.header .main-menu li.menu_has_children > a::before,
.header .main-menu li.menu_has_children:hover > a::before {
    color: var(--pv-on-dark) !important;
}

/* Drop-downs stay a white panel on desktop (purple is fine there) and only
   turn solid #2e1065 below 1200px. */
@media (max-width: 1199.98px) {
    .header .main-menu li .sub-menu li a:hover,
    .header .main-menu li .sub-menu li a:focus,
    .header .main-menu li .sub-menu li a.active {
        color: var(--pv-on-dark) !important;
    }
}


/* --- 10.2 footer --------------------------------------------------------- */
.footer a:hover,
.footer a i:hover {
    /* main.css writes this one with !important, so it needs to answer back */
    color: var(--pv-on-dark) !important;
}

.footer .text--base {
    color: var(--pv-on-dark) !important;
}

.footer .text--danger {
    color: var(--pv-danger-dark) !important;
}


/* --- 10.3 solid dark containers ------------------------------------------
   Links and the .text--* utilities inside them. Buttons are excluded —
   their colour is already handled by the button rules in §2–§4. */
:is(
    .section--bg2, .bg--one, .choose-card, .overview-section,
    .testimonial-section, .trust-section, .subscribe-section, .how-work-card__step,
    .plan-card .fdr-badge, .custom--table thead, .bottom-menu,
    .registration-wrapper .top-content, .account-wrapper .left
) :is(a:not(.btn), .text--base, .text-muted) {
    color: var(--pv-on-dark) !important;
}

:is(
    .section--bg2, .bg--one, .choose-card, .overview-section,
    .testimonial-section, .trust-section, .subscribe-section, .how-work-card__step,
    .plan-card .fdr-badge, .custom--table thead, .bottom-menu,
    .registration-wrapper .top-content, .account-wrapper .left
) :is(a:not(.btn):hover, a:not(.btn):focus) {
    color: var(--pv-on-image) !important;
    text-decoration: underline;
}

:is(
    .section--bg2, .bg--one, .choose-card, .overview-section,
    .testimonial-section, .trust-section, .subscribe-section, .how-work-card__step,
    .plan-card .fdr-badge, .custom--table thead, .bottom-menu,
    .registration-wrapper .top-content, .account-wrapper .left
) .text--danger {
    color: var(--pv-danger-dark) !important;
}


/* --- 10.4 section headers over photograph + dark overlay ------------------ */
.dark--overlay :is(.section-top-title, .text--base, .text-muted),
.dark--overlay-two :is(.section-top-title, .text--base, .text-muted) {
    color: var(--pv-on-image) !important;
}


/* --- 10.5 auth panels -----------------------------------------------------
   Right panel: solid #2e1065 on desktop, photograph + overlay below 1200px,
   so both sides use the photo-safe token. Plain anchors only — .social_login
   links and .account-logo keep their own styling. */
.account-section-right :is(a:not([class]), .forgot-pass, .text--base, .text-muted),
.account-section-left :is(a:not([class]), .text--base, .text-muted) {
    color: var(--pv-on-image) !important;
}

.account-section .text--danger {
    color: var(--pv-danger-dark) !important;
}

/* "Back to Home" sits on the photograph (worst case 1.2:1), not the panel. */
.account-section-left .btn-outline--base {
    color: var(--pv-on-image) !important;
    border-color: var(--pv-on-dark) !important;
}

.account-section-left .btn-outline--base:hover,
.account-section-left .btn-outline--base:focus {
    /* solid purple fill takes over again on hover → white back */
    background-color: var(--pv-600) !important;
    border-color: var(--pv-600) !important;
    color: #fff !important;
}


/* --- 10.6 icons & glyphs on dark surfaces (3:1 non-text contrast) --------- */
.choose-card__icon i,
.overview-card__icon i {
    color: var(--pv-on-dark) !important;
}

.subscribe-form .form--control:focus ~ i {
    color: var(--pv-on-dark) !important;
}


/* =============================================================================
   12. Hero motion — subtle life (gated behind prefers-reduced-motion)
   Layers, slowest first: the photo pans on a 26s loop, the two wave PNGs
   drift against each other, and the title/sub/button cascade in (delays live
   in home.blade.php — WOW copies data-wow-delay to inline style, so CSS
   cannot stagger them). Nothing here touches colour or layout, so contrast
   and the audit are unaffected.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    /* photo: slow vertical pan (position-only = cheapest repaint) */
    .hero.bg_img {
        animation: hero-pan 26s ease-in-out infinite alternate;
    }

    @keyframes hero-pan {
        from {
            background-position: 50% 35%;
        }
        to {
            background-position: 50% 65%;
        }
    }

    /* waves: 4% overscan so the sideways drift never exposes an edge */
    .hero__wave-shape img {
        transform: scale(1.04);
        animation: wave-drift 12s ease-in-out infinite alternate;
    }

    .hero__wave-shape.two img {
        animation-duration: 17s;
        animation-direction: alternate-reverse;
    }

    @keyframes wave-drift {
        from {
            translate: 0 0;
        }
        to {
            translate: -1.5% 0;
        }
    }
}


/* =============================================================================
   11. Feature cards — modern polish
   Upstream: white 8px cards, pale-purple hex icon chip, purple corner blob;
   hover floods the card purple and flips the chip to solid white (glyph stays
   brand purple, so it survives). Kept — just modernised:
     - 16px radius + deeper resting shadow to match the 10px button language
     - hover lift + purple glow
     - gradient icon chip with white glyph at rest (upstream's white-chip
       hover rule still applies, so the glyph MUST flip back to brand purple
       on hover or it vanishes — see the :hover rule below)
     - stronger title in deep purple (13.9:1 on white), tighter rhythm
   ========================================================================== */

.feature-card {
    border-radius: 16px !important;
    padding: 34px 24px;
    box-shadow: 0 12px 32px -10px rgba(46, 16, 101, .18);
    transition: transform .35s ease, box-shadow .35s ease;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px -12px rgba(124, 58, 237, .45);
}

.feature-card .icon {
    width: 84px;
    height: 72px;
    background: linear-gradient(135deg, var(--pv-500), var(--pv-700));
    color: #fff;
    font-size: 28px;
    margin-bottom: 6px;
}

.feature-card:hover .icon {
    /* chip goes solid white on hover (upstream) → glyph back to brand */
    color: var(--pv-600);
}

.feature-card .title {
    font-weight: 700;
    color: var(--pv-950);
    margin: 14px 0 10px;
}

.feature-card p {
    font-size: .95rem;
    margin-bottom: 0;
}

/* corner blob: softer resting tint (hover flood unchanged) */
.feature-card::after {
    background-color: rgba(124, 58, 237, .12);
    width: 44px;
    height: 44px;
    bottom: -12px;
    right: -12px;
}


/* =============================================================================
   13. About section — modern cards + link-free floating badge
   The YouTube lightbox anchor is gone from about.blade.php (lightcase with
   it — it was used nowhere else). In its place: a glass badge pinned to the
   image, gently floating. No link, no video, no third-party embed.
   ========================================================================== */

.about-thumb {
    border-radius: 20px !important;
    box-shadow: 0 24px 60px -20px rgba(46, 16, 101, .45);
}

.about-thumb img {
    transition: transform .6s ease;
}

.about-thumb:hover img {
    transform: scale(1.04);
}

.about-float {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 12px;
    border-radius: 14px;
    color: #fff;
    background: rgba(46, 16, 101, .55);
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 30px -8px rgba(46, 16, 101, .5);
}

.about-float__icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 22px;
    color: #fff;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--pv-500), var(--pv-700));
}

.about-float__text strong {
    display: block;
    font-size: .95rem;
    line-height: 1.25;
}

.about-float__text small {
    color: var(--pv-200);
    font-size: .78rem;
}

.about-card {
    background: #fff;
    border: 1px solid rgba(124, 58, 237, .12);
    border-radius: 16px;
    padding: 20px 22px;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.about-card:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, .35);
    box-shadow: 0 16px 36px -12px rgba(124, 58, 237, .4);
}

.about-card__icon {
    background: linear-gradient(135deg, var(--pv-500), var(--pv-700)) !important;
    border-radius: 14px !important;
}

.about-card__content .title {
    font-weight: 700;
    color: var(--pv-950);
}

@media (prefers-reduced-motion: no-preference) {
    .about-float {
        animation: about-float 5s ease-in-out infinite;
    }

    @keyframes about-float {
        0%, 100% {
            translate: 0 0;
        }
        50% {
            translate: 0 -8px;
        }
    }
}


/* =============================================================================
   14. Service cards — modern polish (cards ONLY)
   The purple band (.service-section) and the white .top-wave overlap above
   and below are upstream structure and are NOT touched here — only the white
   cards: 18px radius, gradient icon chips with white glyphs (consistent with
   §§11/13), deep-purple titles, hover lift + glow. Shadow is tuned dark for
   the purple backdrop.
   ========================================================================== */

.service-card {
    border-radius: 18px !important;
    padding: 2.25rem 1.75rem;
    box-shadow: 0 18px 44px -14px rgba(46, 16, 101, .55);
    transition: transform .35s ease, box-shadow .35s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 54px -14px rgba(46, 16, 101, .65);
}

.service-card__icon {
    width: 84px !important;
    height: 84px !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 2.25rem !important;
    color: #fff !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, var(--pv-500), var(--pv-700)) !important;
    box-shadow: 0 10px 24px -8px rgba(124, 58, 237, .6);
}

.service-card__content {
    margin-top: 1.375rem;
}

.service-card__content .title {
    font-weight: 700;
    color: var(--pv-950);
}

.service-card__content p {
    font-size: .95rem;
    margin-bottom: 0;
}


/* =============================================================================
   15. Why-choose band — modern cards + CTA
   Dark photo band with white bottom wave: neither is touched. The cards stay
   deep-dark but gain 18px radius, a hairline light border and hover lift;
   the CTA uses the shared .btn--base gradient (blade) instead of the flat
   bg--base, so it matches every other primary button on the site.
   ========================================================================== */

.choose-card {
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .55);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.choose-card:hover {
    transform: translateY(-6px);
    border-color: rgba(196, 181, 253, .45);
    box-shadow: 0 26px 54px -14px rgba(0, 0, 0, .65);
}

.choose-card__icon {
    width: 76px;
    height: 76px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--pv-500), var(--pv-700));
    box-shadow: 0 10px 24px -8px rgba(124, 58, 237, .6);
}

.choose-card__icon i {
    color: #fff !important;
    font-size: 2.25rem !important;
}


/* =============================================================================
   16. How-it-works steps — modern circles
   Numbered circles stay deep but go gradient (blob + white ring kept), with
   a soft glow and a hover pop on the number. Titles match the other sections
   (700 weight, deep purple). The grey connector arrows are untouched.
   NOTE: the digits are automatic ($loop->iteration) — step order follows the
   admin's element order, nothing is stored per step.
   ========================================================================== */

.how-work-card__step {
    background: linear-gradient(135deg, var(--pv-500), var(--pv-800));
    box-shadow: 0 14px 30px -10px rgba(124, 58, 237, .55);
    transition: transform .35s ease, box-shadow .35s ease;
}

.how-work-card:hover .how-work-card__step {
    transform: scale(1.07);
    box-shadow: 0 18px 38px -10px rgba(124, 58, 237, .65);
}

.how-work-card .title {
    font-weight: 700;
    color: var(--pv-950);
}

.how-work-card p {
    font-size: .95rem;
}


/* =============================================================================
   17. Overview counters — modern panel
   White panel on the purple band: 20px radius, deeper shadow; bare glyphs
   become gradient chips with white icons; numbers go deep-purple 700.
   The count-up itself lives in overview.blade.php (@push('script')).
   ========================================================================== */

.overview-area {
    border-radius: 20px !important;
    padding: 2.5rem 1.875rem;
    box-shadow: 0 24px 60px -18px rgba(46, 16, 101, .5);
}

.overview-card__icon {
    width: 68px;
    height: 68px;
    flex-shrink: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.9rem !important;
    line-height: 1 !important;
    color: #fff !important;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--pv-500), var(--pv-700));
    box-shadow: 0 10px 24px -8px rgba(124, 58, 237, .6);
}

.overview-card__icon i {
    color: #fff !important;
}

.overview-card {
    /* upstream wraps: the longest label ("Online, branch-free onboarding")
       drops the whole text block under the icon. Single row instead; the
       text wraps *inside* its own box (min-width: 0 lets the flex item
       shrink). Small screens keep the stacked upstream layout (below). */
    flex-wrap: nowrap;
}

.overview-card__content {
    min-width: 0;
}

.overview-card__content .couter-number {
    font-weight: 700;
    color: var(--pv-950);
}


/* =============================================================================
   18. Trust band (replaces the testimonial slider on Home)
   Deep-dark strip: white titles, --pv-on-dark subs (8.2:1, the audited
   on-dark token), gradient icon chips. Eyebrow reuses the §10 on-dark rule.
   ========================================================================== */

.trust-section {
    background-color: var(--pv-950);
}

.trust-lead {
    color: var(--pv-on-dark);
    margin-top: 1rem;
    margin-bottom: 0;
}

.trust-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 22px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    transition: transform .35s ease, border-color .35s ease;
}

.trust-item:hover {
    transform: translateY(-4px);
    border-color: rgba(196, 181, 253, .45);
}

.trust-item__icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 24px;
    color: #fff;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--pv-500), var(--pv-700));
    box-shadow: 0 10px 24px -8px rgba(124, 58, 237, .6);
}

.trust-item .title {
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 4px;
}

.trust-item p {
    color: var(--pv-on-dark);
    font-size: .9rem;
    margin-bottom: 0;
}


/* =============================================================================
   20. Subscribe pill + footer
   Subscribe form becomes a glass pill (input and button share one capsule).
   Footer: Quick Links mirror the menu (blade), social row renders only when
   links exist (blade), policy links move to the bottom bar (below).
   ========================================================================== */

.subscribe-form {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    padding: 6px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .45);
}

.subscribe-form .custom-icon-field {
    flex: 1;
    min-width: 0;
}

.subscribe-form .form--control {
    border: none !important;
    background: transparent !important;
    border-radius: 999px !important;
    height: 48px;
}

.subscribe-form .btn {
    border-radius: 999px !important;
    white-space: nowrap;
    margin-left: 6px;
}

@media (max-width: 420px) {
    .subscribe-form {
        border-radius: 18px;
    }

    .subscribe-form .custom-icon-field {
        width: 100%;
    }

    .subscribe-form .btn {
        width: 100%;
        margin-left: 0;
        margin-top: 6px;
    }
}

.footer-widget__title {
    font-weight: 700;
}


/* =============================================================================
   22. Header + footer — near-black purple (#100722)
   One colour for both bands; every text/link token stays as audited (white
   and pale-lavender only gain contrast — ~13-18:1). The resting header keeps
   a translucent wash so the hero photo still breathes through it; scrolled
   and mobile states go solid. Borders, cards and the subscribe band above
   the footer are untouched.
   ========================================================================== */

.footer {
    background-color: #100722 !important;
}

.header__bottom {
    background-color: rgba(16, 7, 34, .55);
}

.header.menu-fixed .header__bottom {
    background-color: #100722;
}

@media (max-width: 991px) {
    .header__bottom {
        background-color: #100722;
    }
}

.short-link-list li:last-child {
    border-bottom: none;
}

.footer-policy-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    justify-content: flex-end;
    margin-top: 10px;
    padding: 0;
    list-style: none;
}

.footer-policy-links a {
    color: var(--pv-on-dark);
    font-size: .85rem;
}

.footer-policy-links a:hover {
    color: #fff;
}

@media (max-width: 575px) {
    .footer-policy-links {
        justify-content: center;
    }
}


/* =============================================================================
   21. Partner logo marquee — uniform sizing + seamless loop
   All 8 marks are full wordmark lockups at a fixed 44px height (one level,
   no overlap). The blade duplicates the set once; the track below then
   translates -50% and wraps invisibly. Even 60px gaps come from the cell
   margins, which duplicate with the set. Pauses on hover; static when the
   user prefers reduced motion.
   ========================================================================== */

.brand-item {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-item img {
    height: 44px !important;
    width: auto !important;
    max-width: 160px !important;
    transition: transform .35s ease;
}

.brand-item:hover img {
    transform: scale(1.08);
}

.brand-marquee {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand-viewport {
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.brand-track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.brand-track .brand-cell {
    margin: 0 30px;
}

/* prev/next steppers: quiet outline circles, purple on hover */
.brand-nav {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(124, 58, 237, .35);
    background: #fff;
    color: var(--pv-700);
    font-size: 18px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease, transform .3s ease;
    z-index: 2;
}

.brand-nav:hover {
    background: var(--pv-600);
    border-color: var(--pv-600);
    color: #fff;
    transform: scale(1.06);
}

@media (max-width: 575px) {
    .brand-nav {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .brand-track .brand-cell {
        margin: 0 18px;
    }
}


/* =============================================================================
   19. FAQ accordion — modern polish
   Upstream open state (purple fill, white text) already passes contrast, so
   only shape and rhythm change: 12px radius, softer borders, semibold deep
   questions, brand chevron, glow on the open item.
   ========================================================================== */

.custom--accordion .accordion-item {
    border-radius: 12px !important;
    overflow: hidden;
    border-color: rgba(124, 58, 237, .25) !important;
}

.custom--accordion .accordion-item + .accordion-item {
    margin-top: 1rem;
}

.custom--accordion .accordion-button {
    font-weight: 600;
    color: var(--pv-950);
}

.custom--accordion .accordion-button::after {
    color: var(--pv-600);
}

.custom--accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: var(--pv-600) !important;
    box-shadow: 0 14px 30px -12px rgba(124, 58, 237, .4);
}

@media (max-width: 575px) {
    .overview-card {
        flex-wrap: wrap;
    }
}


/* =============================================================================
   23. CTA band (about page — sections/cta.blade.php)
   Gradient panel, white title/text, solid-white primary + white-outline
   secondary button. White on the gradient measures ~7:1.
   ========================================================================== */

.cta-card {
    background: linear-gradient(135deg, var(--pv-500), var(--pv-800));
    border-radius: 24px;
    padding: 64px 32px;
    box-shadow: 0 24px 60px -18px rgba(124, 58, 237, .55);
}

.cta-card__title {
    color: #fff;
    font-weight: 700;
    margin-bottom: 12px;
}

.cta-card__text {
    color: rgba(255, 255, 255, .85);
    font-size: 1.1rem;
    max-width: 560px;
    margin: 0 auto;
}

.cta-card__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 28px;
}

.btn-outline-white {
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, .7) !important;
    background: transparent !important;
    border-radius: 10px;
    font-weight: 600;
    transition: all .3s ease;
}

.btn-outline-white:hover,
.btn-outline-white:focus {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--pv-700) !important;
}


/* =============================================================================
   26. Semantic colours on LIGHT surfaces (WCAG guard)
   Upstream's success/danger/warning greens/reds/ambers and the #6f6f6f table
   ink all fail on white/zebra. Darken them where the backdrop is light.
   Dark-container variants live in §10 and win there (later, tied or higher
   specificity is avoided by scoping this block to light components only).
   ========================================================================== */

.badge--success {
    background-color: rgba(22, 101, 52, .2);
    border-color: #166534;
    color: #166534;
}

.badge--danger {
    background-color: rgba(185, 28, 28, .1);
    border-color: #b91c1c;
    color: #b91c1c;
}

.badge--warning {
    background-color: rgba(180, 83, 9, .12);
    border-color: #b45309;
    color: #b45309;
}

.custom--table tbody td {
    color: #3f3f3f;
}

.custom--table :is(.text--success, .text--danger, .text--warning),
.table :is(.text--success, .text--danger, .text--warning) {
    font-weight: 600;
}

.custom--table .text--success,
.table .text--success {
    color: #166534 !important;
}

.custom--table .text--danger,
.table .text--danger {
    color: #b91c1c !important;
}

.custom--table .text--warning,
.table .text--warning {
    color: #b45309 !important;
}


/* =============================================================================
   25. User panel shell — admin-style sidebar layout
   All 59 account views render inside layouts/master, so this restyles the
   whole user area at once: fixed dark sidebar, sticky white topbar, light
   content well. Marketing header/hero/footer are absent by construction
   (master.blade.php). Off-canvas on mobile via body.user-sidebar-open.
   ========================================================================== */

/* The rail is position:fixed (out of flow) and the content column is offset
   with margin-left, so the rail stays full height on long views without
   forcing the well to stretch. min-height:100vh keeps the page filling the
   window, and the well is pure WHITE (not the old pale lavender) so on a
   short view the leftover area reads as ordinary page whitespace instead of
   a distinct empty lavender panel. The footer pins to the window bottom
   (§29) to close it off.

   min-height:100dvh (after a 100vh fallback for older engines) matters
   here: 100vh is the *largest* viewport, so on a mobile browser it includes
   the strip behind the collapsing URL bar. The panel then renders taller
   than the visible area and, once scrolled to the bottom, leaves a band of
   empty space under the footer. dvh tracks the real visible height and
   removes that band. Identical to vh on desktop. */
.user-panel {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: #fff;
}

.user-sidebar {
    width: 264px;
    flex-shrink: 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1d0b3d 0%, #100722 100%);
    z-index: 1040;
}

.user-sidebar__brand {
    display: block;
    padding: 22px 24px 18px;
}

.user-sidebar__brand img {
    max-height: 44px;
    max-width: 100%;
}

.user-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: 6px 14px 14px;
}

.user-sidebar__label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
    margin: 18px 10px 8px;
}

.user-sidebar__nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 2px;
    border-radius: 12px;
    color: rgba(255, 255, 255, .78);
    font-weight: 500;
    font-size: .93rem;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease;
}

.user-sidebar__nav a i {
    font-size: 20px;
    width: 24px;
    text-align: center;
    color: rgba(255, 255, 255, .55);
}

.user-sidebar__nav a:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.user-sidebar__nav a:hover i {
    color: #fff;
}

.user-sidebar__nav a.active {
    background: linear-gradient(135deg, var(--pv-500), var(--pv-700));
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 20px -8px rgba(124, 58, 237, .7);
}

.user-sidebar__nav a.active i {
    color: #fff;
}

.user-sidebar__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.user-chip {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.user-chip__avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pv-500), var(--pv-700));
    color: #fff;
    font-weight: 700;
}

.user-chip__meta {
    min-width: 0;
}

.user-chip__meta strong {
    display: block;
    color: #fff;
    font-size: .85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-chip__meta small {
    display: block;
    color: rgba(255, 255, 255, .55);
    font-size: .72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-logout {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .75);
    font-size: 18px;
}

.user-logout:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.user-sidebar__overlay {
    display: none;
}

.user-panel__main {
    flex: 1;
    min-width: 0;
    margin-left: 264px;
    display: flex;
    flex-direction: column;
}

.user-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 28px;
    background: #fff;
    box-shadow: 0 2px 18px -6px rgba(46, 16, 101, .12);
}

.user-topbar__burger {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--pv-950);
    padding: 4px;
}

.user-topbar__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pv-950);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-topbar__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-balance {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(124, 58, 237, .1);
    color: var(--pv-800);
    font-weight: 700;
    text-decoration: none;
    transition: background-color .3s ease;
}

.user-balance:hover {
    background: rgba(124, 58, 237, .18);
    color: var(--pv-800);
}

.user-avatar-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--pv-500), var(--pv-700));
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
}

/* Content well is NOT flex:1 — it sizes to its content so short views do not
   pad out a full screen of empty well. The document ends after the footer
   (see the fixed-rail note in §25). */
.user-panel__content {
    padding: 28px 28px 8px;
}

.user-panel__content > .container-fluid {
    padding: 0;
}

/* =============================================================================
   29. Panel footer — closes the bottom of every account view.
   margin-top:auto + .user-panel's min-height:100vh pins this bar to the
   window bottom, so a short view reads as a complete page (content, white
   space, footer) with nothing hanging below the fold. Because the well is
   white (§25) that leftover area blends with the page instead of showing as
   an empty tinted block.
   ============================================================================= */

.user-panel__footer {
    margin-top: auto;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 18px;
    padding: 12px 28px;
    background: #fff;
    border-top: 1px solid rgba(46, 16, 101, .08);
}

.user-panel__copy {
    margin: 0;
    font-size: .8rem;
    color: #5b6169;
}

.user-panel__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
}

.user-panel__links a {
    color: var(--pv-700);
    font-weight: 500;
    text-decoration: none;
}

.user-panel__links a:hover {
    color: var(--pv-600);
    text-decoration: underline;
}

/* Separator is decorative (aria-hidden) so WCAG exempts it, but keep it
   compliant anyway so the contrast audit stays green. */
.user-panel__sep {
    color: #6b7280;
}

/* iziToast's wrapper is appended to <body> *after* .main-wrapper, so the
   flash banner is a direct sibling of the panel. iziToast positions it
   fixed, but if that stylesheet ever fails to load (or a future version
   changes the wrapper) it falls into normal flow and stacks up underneath
   the footer as a tall empty band — the exact "big white space after the
   footer" symptom. Pin it so it can never take part in layout. */
body > .iziToast-wrapper {
    position: fixed !important;
    top: 20px;
    right: 20px;
    z-index: 1090;
}

@media (max-width: 991px) {
    /* Rail is fixed on every breakpoint now, so the content column only needs
       the offset on desktop. */
    .user-panel__main {
        margin-left: 0;
    }

    .user-sidebar {
        position: fixed;
        left: 0;
        transform: translateX(-105%);
        transition: transform .35s ease;
        box-shadow: 24px 0 60px -20px rgba(16, 7, 34, .5);
    }

    body.user-sidebar-open .user-sidebar {
        transform: none;
    }

    body.user-sidebar-open .user-sidebar__overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(16, 7, 34, .5);
        z-index: 1035;
    }

    .user-topbar__burger {
        display: block;
    }

    .user-topbar {
        padding: 12px 16px;
    }

    .user-topbar__title {
        font-size: 1.05rem;
    }

    .user-balance span {
        display: none;
    }

    .user-balance {
        padding: 8px 12px;
    }

    .user-panel__content {
        padding: 18px 14px 6px;
    }

    .user-panel__footer {
        padding: 10px 14px;
        justify-content: center;
        text-align: center;
    }
}


/* =============================================================================
   24. User dashboard — modern widgets
   Balance hero becomes a gradient panel with quick actions; stat widgets get
   18px radius, gradient icon chips and hover glow. Numbers, links, tables
   and module gating are untouched — pure presentation.
   ========================================================================== */

.balance-hero {
    background: linear-gradient(135deg, var(--pv-500), var(--pv-800)) !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 44px -14px rgba(124, 58, 237, .5);
    padding: 34px 30px;
}

.balance-hero .d-number {
    font-size: 2.5rem;
    font-weight: 700;
}

.balance-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.btn-hero-action {
    background: rgba(30, 10, 70, .45) !important;
    border: 1px solid rgba(255, 255, 255, .3) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-weight: 600;
    padding: 8px 20px;
    transition: background-color .3s ease, transform .3s ease;
}

.btn-hero-action:hover,
.btn-hero-action:focus {
    background: #fff !important;
    color: var(--pv-700) !important;
    transform: translateY(-2px);
}

.d-widget {
    border-radius: 18px !important;
    border: 1px solid rgba(124, 58, 237, .1);
}

.d-widget:hover {
    border-color: rgba(124, 58, 237, .3);
    box-shadow: 0 18px 40px -12px rgba(124, 58, 237, .35);
}

.d-widget__icon {
    width: 60px !important;
    height: 60px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--pv-500), var(--pv-700));
    box-shadow: 0 10px 22px -8px rgba(124, 58, 237, .55);
}

.d-widget__icon i {
    font-size: 26px !important;
    color: #fff;
}


/* =============================================================================
   27. User dashboard chart card — mirrors admin's area chart, user-scoped
   Same 18px radius / border language as the §24 stat widgets; header holds
   the title + range label. Chart series colours live in the blade (Apex
   options) and reuse the §26 semantic greens/reds.
   ========================================================================== */

.chart-card {
    border-radius: 18px !important;
    border: 1px solid rgba(124, 58, 237, .1);
    overflow: hidden;
}

.chart-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    background: transparent;
    border-bottom: 1px solid rgba(124, 58, 237, .1);
    padding: 18px 22px 14px;
}

.chart-card__head h5 {
    font-weight: 700;
    color: var(--pv-950);
}

.chart-card__sub {
    font-size: .8rem;
    font-weight: 600;
    color: var(--pv-700);
}


/* =============================================================================
   28. Crypto QR "mark paid" block — button + caution note under the QR.
   Note ink meets contrast on the light card; button reuses .btn--base.
   ========================================================================== */

.mark-paid {
    margin-top: 6px;
}

.mark-paid .form-group {
    margin-bottom: 8px;
}

.mark-paid .form--control {
    margin-bottom: 2px;
}

.mark-paid__note {
    max-width: 420px;
    margin: 8px auto 4px;
    font-size: .83rem;
    line-height: 1.55;
    color: #3f3f3f;
}

.mark-paid button[type="submit"] {
    margin-top: 4px;
    margin-bottom: 2px;
}

/* Upstream shipped this caption as .text-white inside .custom--card, i.e.
   white on white — it rendered invisible on the QR page. Re-ink it. */
.custom--card .crypto-scan {
    color: var(--pv-950) !important;
}

/* iziToast ships its own #a2a2a2 body ink, which measures 2.55:1 on the
   white toast. Third-party widget, but the text is customer-facing, so
   re-ink the message while leaving its accent bar/close button alone. */
.iziToast-message {
    color: #4b5563 !important;
}

/* Same §26 rationale: .custom--card is always white (main.css:2297), so the
   upstream success/danger/warning inks fail here too (e.g. the crypto QR
   amount/address). Dark-container §10 variants are untouched. */

.custom--card .text--success,
.pv-card .text--success {
    color: #166534 !important;
}

.custom--card .text--danger,
.pv-card .text--danger {
    color: #b91c1c !important;
}

.custom--card .text--warning,
.pv-card .text--warning {
    color: #b45309 !important;
}

/* Disabled base buttons: Bootstrap's blanket 65% opacity turns them an
   unintentional-looking wash (white on #b798f0 = 2.4:1). Disabled controls
   are WCAG-exempt, but a solid muted plum reads as deliberately inactive. */

.btn--base:disabled,
.btn--base.disabled {
    opacity: 1 !important;
    background-color: #8b5cf6 !important;
    cursor: not-allowed;
}


/* =============================================================================
   30. Shared panel card — one white-card language for every user-panel form
   and detail page (transfer, deposit/withdraw, KYC, FDR/DPS/loan, support).
   Same 16px radius / border / shadow as the KYC status card; replaces the
   stock .custom--card, which upstream never restyled. Table lists stay bare
   (they sit directly in the §25 white well, like transfer history).
   ========================================================================== */

.pv-card {
    background: #fff;
    border: 1px solid rgba(46, 16, 101, .09);
    border-radius: 16px;
    box-shadow: 0 10px 26px -18px rgba(16, 7, 34, .45);
}

.pv-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(46, 16, 101, .08);
}

.pv-card__title {
    margin: 0;
    font-size: .98rem;
    font-weight: 600;
    color: var(--pv-950, #2e1065);
}

.pv-card__body {
    padding: 20px;
}

/* Pages that keep Bootstrap's .card-body inside a pv-card get the same inset. */
.pv-card .card-body {
    padding: 20px;
}

.pv-card__footer {
    padding: 14px 20px;
    border-top: 1px solid rgba(46, 16, 101, .08);
    border-radius: 0 0 16px 16px;
}