/*==============================================================
    Paynload — Modern UI Layer (2024 refresh)
    ------------------------------------------------------------
    Loaded AFTER style.css. Restyles the existing markup with a
    contemporary fintech look: soft neutral canvas, layered
    elevation, large radii, refined type scale and a redesigned
    dashboard. No class names were removed, so every legacy page
    keeps working — it just looks current.
==============================================================*/

/*--------------------------------------------------------------
    [ ## Design tokens ]
--------------------------------------------------------------*/
:root {
    /* --primary-color is injected by the admin panel (header-asset). */
    --brand: var(--primary-color, #4f46e5);
    --brand-strong: color-mix(in srgb, var(--brand) 82%, #000 18%);
    --brand-soft: color-mix(in srgb, var(--brand) 12%, #ffffff 88%);
    --brand-softer: color-mix(in srgb, var(--brand) 6%, #ffffff 94%);
    --brand-ring: color-mix(in srgb, var(--brand) 28%, transparent);
    --brand-grad: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 55%, #7c3aed 45%) 100%);

    --ink: #0d1220;
    --ink-2: #3d4661;
    --ink-3: #6b7490;
    --ink-4: #9aa1b6;

    --canvas: #f6f7fb;
    --surface: #ffffff;
    --surface-2: #fbfcfe;
    --line: #e7e9f2;
    --line-2: #eef0f7;

    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;

    --r-xs: 10px;
    --r-sm: 14px;
    --r-md: 18px;
    --r-lg: 24px;
    --r-xl: 32px;
    --r-pill: 999px;

    --sh-xs: 0 1px 2px rgba(13, 18, 32, .05);
    --sh-sm: 0 2px 8px rgba(13, 18, 32, .05), 0 1px 2px rgba(13, 18, 32, .04);
    --sh-md: 0 12px 28px -12px rgba(13, 18, 32, .16), 0 2px 6px rgba(13, 18, 32, .04);
    --sh-lg: 0 28px 60px -24px rgba(13, 18, 32, .22), 0 4px 12px rgba(13, 18, 32, .05);
    --sh-brand: 0 14px 30px -12px var(--brand-ring);

    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Graceful fallback where color-mix() is unsupported. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --brand-soft: #eef1ff;
        --brand-softer: #f7f8ff;
        --brand-ring: rgba(79, 70, 229, .28);
        --brand-strong: var(--brand);
        --brand-grad: linear-gradient(135deg, var(--brand) 0%, #7c3aed 100%);
    }
}

/*--------------------------------------------------------------
    [ ## Base ]
--------------------------------------------------------------*/
body {
    background: var(--canvas);
    color: var(--ink-2);
    font-family: 'Outfit', 'IBM Plex Sans Condensed', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.title {
    font-family: 'Outfit', 'IBM Plex Sans Condensed', system-ui, sans-serif;
    color: var(--ink);
    letter-spacing: -.02em;
    line-height: 1.18;
    font-weight: 700;
}

h1 { font-size: clamp(2.4rem, 4.6vw, 3.9rem); }
h2 { font-size: clamp(1.85rem, 3vw, 2.65rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.02rem; }
h6 { font-size: .9rem; }

p { color: var(--ink-3); }

a { transition: color .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease); }

::selection { background: var(--brand); color: #fff; }

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: 6px;
}

.container.custom-container { max-width: 1320px; }

/* Softer vertical rhythm than the old fixed 80px blocks. */
.ptb-80 { padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(56px, 7vw, 104px); }
.pb-80 { padding-bottom: clamp(56px, 7vw, 104px); }
.ptb-40 { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); }

/*--------------------------------------------------------------
    [ ## Buttons ]
--------------------------------------------------------------*/
.btn--base,
.btn--base.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--brand-grad);
    border: 0;
    border-radius: var(--r-pill);
    color: #fff;
    padding: 12px 26px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.35;
    box-shadow: var(--sh-brand);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}

.btn--base:hover,
.btn--base:focus {
    color: #fff;
    transform: translateY(-2px);
    filter: saturate(1.08);
    box-shadow: 0 18px 36px -14px var(--brand-ring);
}

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

.btn--base i { position: static; font-size: 1em; }

.btn--base.active,
.btn--outline {
    background: transparent;
    color: var(--brand);
    border: 1.5px solid var(--brand-ring);
    box-shadow: none;
}

.btn--base.active:hover,
.btn--outline:hover {
    background: var(--brand-soft);
    color: var(--brand-strong);
}

.btn--base.bg--danger {
    background: linear-gradient(135deg, #f0525d, #d92d3d);
    box-shadow: 0 14px 30px -12px rgba(217, 45, 61, .45);
}

/*--------------------------------------------------------------
    [ ## Forms ]
--------------------------------------------------------------*/
.form--control,
.form-control,
input[type=text].form--control,
input[type=number].form--control,
input[type=email].form--control,
input[type=password].form--control,
textarea.form--control,
select.form--control {
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-size: 15px;
    padding: 13px 16px;
    height: auto;
    box-shadow: var(--sh-xs);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.form--control::placeholder { color: var(--ink-4); }

.form--control:focus,
.form-control:focus {
    background: var(--surface);
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-ring);
    outline: 0;
}

label,
.form-label {
    color: var(--ink-2);
    font-weight: 500;
}

/* select2 + nice-select brought in line with the native inputs. */
.select2-container--default .select2-selection--single,
.nice-select {
    background: var(--surface);
    border: 1.5px solid var(--line) !important;
    border-radius: var(--r-sm) !important;
    height: auto !important;
    min-height: 52px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    box-shadow: var(--sh-xs);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--ink);
    line-height: 34px;
    padding-left: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; }

.select2-dropdown {
    border: 1px solid var(--line) !important;
    border-radius: var(--r-sm) !important;
    box-shadow: var(--sh-lg);
    overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--brand); }

.nice-select .list {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-lg);
}

/*--------------------------------------------------------------
    [ ## Header ]
--------------------------------------------------------------*/
.header-section.two .header-bottom-area {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line-2);
    box-shadow: none;
    transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
}

.header-section.header-fixed .header-bottom-area,
.header-section.two.header-fixed .header-bottom-area {
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--sh-md);
}

.header-menu-content { padding: 10px 0; }

.site-logo img { max-height: 44px; width: auto; }

.navbar-nav.main-menu > li > a {
    color: var(--ink-2);
    font-weight: 500;
    font-size: 15px;
    padding: 9px 16px;
    border-radius: var(--r-pill);
    transition: all .18s var(--ease);
}

.navbar-nav.main-menu > li > a:hover {
    color: var(--brand-strong);
    background: var(--brand-soft);
}

.navbar-nav.main-menu > li > a.active {
    color: var(--brand-strong);
    background: var(--brand-soft);
    font-weight: 600;
}

.navbar-toggler {
    border: 1.5px solid var(--line);
    border-radius: var(--r-xs);
    padding: 8px 12px;
    color: var(--ink);
}

.navbar-toggler:focus { box-shadow: 0 0 0 4px var(--brand-ring); }

.header-language .nice-select,
.header-language .select2-container--default .select2-selection--single {
    min-height: 42px;
    border-radius: var(--r-pill) !important;
    background: var(--surface-2);
    font-size: 14px;
}

/* Account dropdown */
.dashboard-dropdown-btn .profile-action-btn img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 2px var(--brand-ring);
    transition: box-shadow .2s var(--ease);
}

.dashboard-dropdown-btn .profile-action-btn:hover img { box-shadow: 0 0 0 4px var(--brand-ring); }

.dashboard-dropdown-btn .dropdown-btn-list {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    padding: 8px;
    min-width: 236px;
    overflow: hidden;
}

.dashboard-dropdown-btn .dropdown-list-item li { border: 0; }

.dashboard-dropdown-btn .dropdown-list-item .title-area a {
    display: block;
    padding: 10px 14px;
    border-radius: var(--r-xs);
    color: var(--ink-2);
    font-size: 14.5px;
    font-weight: 500;
}

.dashboard-dropdown-btn .dropdown-list-item .title-area a:hover {
    background: var(--brand-soft);
    color: var(--brand-strong);
}

.dashboard-dropdown-btn .dropdown-list-item .title-area a.logout-btn { color: var(--danger); }
.dashboard-dropdown-btn .dropdown-list-item .title-area a.logout-btn:hover { background: rgba(239, 68, 68, .08); }

/*--------------------------------------------------------------
    [ ## Hero / banner ]
--------------------------------------------------------------*/
.banner-section {
    background:
        radial-gradient(1100px 520px at 88% -8%, var(--brand-soft) 0%, transparent 62%),
        radial-gradient(760px 420px at -6% 12%, #eef2ff 0%, transparent 60%),
        var(--canvas);
    padding-top: clamp(72px, 10vw, 132px);
    padding-bottom: clamp(64px, 9vw, 116px);
    overflow: hidden;
}

.banner-section .banner-content .title {
    font-size: clamp(2.4rem, 4.6vw, 3.9rem);
    font-weight: 700;
    letter-spacing: -.035em;
    color: var(--ink);
    margin-bottom: 18px;
}

.banner-section .banner-content > p {
    font-size: clamp(1.02rem, 1.3vw, 1.18rem);
    color: var(--ink-3);
    max-width: 46ch;
}

.banner-section .banner-btn.mt-40 { margin-top: 32px; }

.banner-section .banner-btn .btn--base { padding: 15px 34px; font-size: 16px; }

/* The old clip-path cut the artwork off; present it as a card instead. */
.banner-img {
    position: relative;
    width: 100%;
    height: auto;
    clip-path: none;
    -webkit-clip-path: none;
}

.banner-slider .banner-img img,
.banner-img img {
    width: 100%;
    height: auto;
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    opacity: 1;
}

@media only screen and (max-width: 1199px) {
    .banner-img { width: 100%; opacity: 1; }
    .banner-slider .banner-img img { border-radius: var(--r-lg); opacity: 1; }
}

@media only screen and (max-width: 991px) {
    .banner-slider .banner-img img { opacity: 1; }
}

/* style.css makes the slider a flex row, which shrink-wraps the swiper wrapper
   and knocks the hero out of alignment with every other section. */
.banner-slider {
    display: block;
    width: 100%;
}

.banner-slider .swiper-slide { width: 100%; }

.banner-slider .slider-prev,
.banner-slider .slider-next,
.plan-slider .slider-prev,
.plan-slider .slider-next {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: var(--sh-sm);
    transition: all .2s var(--ease);
}

.banner-slider .slider-prev:hover,
.banner-slider .slider-next:hover,
.plan-slider .slider-prev:hover,
.plan-slider .slider-next:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: var(--sh-brand);
}

/*--------------------------------------------------------------
    [ ## Section furniture ]
--------------------------------------------------------------*/
/* The legacy wrapper was itself a white shadowed box; the pill is the badge now. */
.section-tag {
    display: inline-block;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    margin-bottom: 14px;
}

.section-tag span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    border: 1px solid var(--brand-ring);
    border-radius: var(--r-pill);
    padding: 7px 16px 7px 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.section-tag img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface);
    padding: 3px;
}

.section-header-area .section-title .title { margin-bottom: 14px; }

.section-header-area .section-sub-title p,
.section-title p {
    font-size: 1.05rem;
    color: var(--ink-3);
    max-width: 62ch;
}

/*--------------------------------------------------------------
    [ ## Services / quick links slider ]
--------------------------------------------------------------*/
.project-plan { background: transparent; }

.project-plan .plan-slider-wrapper {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    padding: 28px 26px;
}

.project-plan .swiper-slide a {
    display: block;
    padding: 18px 10px;
    border-radius: var(--r-md);
    transition: background-color .2s var(--ease), transform .2s var(--ease);
}

.project-plan .swiper-slide a:hover { background: var(--brand-softer); transform: translateY(-3px); }

.project-plan .plan-item {
    width: 68px;
    height: 68px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    border-radius: var(--r-md);
}

.project-plan .plan-item img { width: 34px; height: 34px; object-fit: contain; }

.project-plan .swiper-slide p {
    color: var(--ink);
    font-weight: 600;
    font-size: 15px;
    margin: 0;
}

/*--------------------------------------------------------------
    [ ## How it works ]
--------------------------------------------------------------*/
.how-it-work { background: var(--surface); }

.how-it-work > .container > .row { align-items: center; }

.how-it-work-img img {
    width: 100%;
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
}

.how-it-work .working-list {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    padding: 20px 22px;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.how-it-work .working-list:hover {
    transform: translateY(-3px);
    border-color: var(--brand-ring);
    box-shadow: var(--sh-md);
}

.how-it-work .working-list .number {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-grad);
    color: #fff;
    border-radius: 14px;
    box-shadow: var(--sh-brand);
}

.how-it-work .working-list .number .title {
    color: #fff;
    font-size: 17px;
    margin: 0;
}

.how-it-work .working-list .work-content { background: transparent; border: 0; padding: 0; }
.how-it-work .working-list .work-content::before,
.how-it-work .working-list .work-content::after { display: none; }
.how-it-work .working-list .work-content p { margin: 0; color: var(--ink-2); }

/*--------------------------------------------------------------
    [ ## Statistics ]
--------------------------------------------------------------*/
.statistics-section { background: transparent; }

.statistics-section .counter {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: 34px 24px;
    height: 100%;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}

.statistics-section .counter:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }

.statistics-section .counter .icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: var(--r-md);
}

.statistics-section .counter .odo-title {
    font-size: clamp(2rem, 3.2vw, 2.9rem);
    color: var(--ink);
    margin-bottom: 4px;
}

.statistics-section .counter .title {
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-3);
    letter-spacing: 0;
}

/*--------------------------------------------------------------
    [ ## Security ]
--------------------------------------------------------------*/
.security-system { background: var(--surface); }

.security-system .security-item {
    height: 100%;
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    padding: 28px 26px;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}

.security-system .security-item:hover {
    transform: translateY(-4px);
    border-color: var(--brand-ring);
    box-shadow: var(--sh-md);
    background: var(--surface);
}

.security-system .security-item .icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: var(--r-md);
    margin-bottom: 18px;
}

.security-system .security-item .security-content .title {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

/* Legacy rule paints this as a solid brand chip; soften it so it reads. */
.security-system .security-content span,
.security-system .security-item .security-content .title span {
    background: var(--brand-soft);
    color: var(--brand-strong);
    border-radius: var(--r-xs);
    padding: 2px 10px;
    margin-left: 6px;
    display: inline-block;
}
.security-system .security-item .security-content p { margin: 0; }

/*--------------------------------------------------------------
    [ ## About ]
--------------------------------------------------------------*/
.about-img img {
    width: 100%;
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
}

.about-details .title { margin: 18px 0 14px; }

/*--------------------------------------------------------------
    [ ## FAQ ]
--------------------------------------------------------------*/
.faq-section { background: transparent; }

.faq-img img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--sh-lg); }

.faq-wrapper .faq-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-xs);
    margin-bottom: 14px;
    overflow: hidden;
    transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.faq-wrapper .faq-item:hover { border-color: var(--brand-ring); box-shadow: var(--sh-sm); }

.faq-wrapper .faq-item .faq-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    margin: 0;
    font-size: 1.03rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}

/* The +/- glyph is drawn with two white ::before/::after bars in style.css,
   so the bar colour has to flip with the toggle state. */
.faq-wrapper .faq-item .faq-title .right-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: block;
    border-radius: 50%;
    background: var(--brand-soft);
    transition: background-color .2s var(--ease);
}

.faq-wrapper .faq-item .right-icon::before,
.faq-wrapper .faq-item .right-icon::after { background: var(--brand); }

.faq-wrapper .faq-item.open .faq-title .right-icon,
.faq-wrapper .faq-item.active .faq-title .right-icon { background: var(--brand); }

.faq-wrapper .faq-item.open .right-icon::before,
.faq-wrapper .faq-item.open .right-icon::after,
.faq-wrapper .faq-item.active .right-icon::before,
.faq-wrapper .faq-item.active .right-icon::after { background: #ffffff; }

.faq-wrapper .faq-item .faq-content { padding: 0 22px 20px; }
.faq-wrapper .faq-item .faq-content p { margin: 0; }

/*--------------------------------------------------------------
    [ ## App download ]
--------------------------------------------------------------*/
.app-section { background: var(--surface); }

.app-img img { width: 100%; border-radius: var(--r-xl); }

/* Legacy paints this card brand-coloured with white text throughout, so keep
   the dark-on-brand direction and just modernise the shape and elevation. */
.app-btn-wrapper .app-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--brand-grad);
    border: 0;
    border-radius: var(--r-md);
    padding: 14px 18px;
    box-shadow: var(--sh-brand);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

.app-btn-wrapper .app-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -16px var(--brand-ring);
}

.app-btn-wrapper .app-btn .app-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .16);
    border-radius: 14px;
    padding-right: 0;
}

.app-btn-wrapper .app-btn .app-icon i { font-size: 24px; }
.app-btn-wrapper .app-btn span { font-size: 12.5px; color: rgba(255, 255, 255, .8); }
.app-btn-wrapper .app-btn .content { flex: 1 1 auto; }
.app-btn-wrapper .app-btn .title { font-size: 1rem; margin: 0; color: #fff; white-space: nowrap; }
.app-btn-wrapper .app-btn .icon { border-radius: var(--r-xs); }

/*--------------------------------------------------------------
    [ ## Footer ]
--------------------------------------------------------------*/
.footer-section {
    background: #0d1220;
    background-image:
        radial-gradient(700px 320px at 12% -20%, color-mix(in srgb, var(--brand) 30%, transparent) 0%, transparent 70%),
        linear-gradient(180deg, #131a2c 0%, #0b101c 100%);
    color: #b4bbd0;
    padding-top: clamp(56px, 7vw, 88px);
}

.footer-section::before,
.footer-section::after { display: none; }

.footer-section .footer-logo img { max-height: 48px; margin-bottom: 22px; }

.footer-section .footer-content p { color: #98a1ba; max-width: 62ch; margin: 0 auto; }

.footer-social-icon { display: flex; justify-content: center; gap: 12px; margin-bottom: 22px; }

.footer-social-icon a {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #dbe0ee;
    font-size: 16px;
    transition: all .2s var(--ease);
}

.footer-social-icon a:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    transform: translateY(-3px);
}

.footer-section .copyright-area {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin-top: 48px;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
}

.footer-section .copyright-area p,
.footer-section .copyright-area a { color: #98a1ba; font-size: 14.5px; }
.footer-section .copyright-area a:hover { color: #fff; }

.footer-section .page-link-item {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Cookie banner */
.cookie-main-wrapper {
    background: rgba(13, 18, 32, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
}

.cookie-main-wrapper .cookie-btn { border-radius: var(--r-pill); background: var(--brand); border: 0; color: #fff; padding: 9px 20px; }
.cookie-main-wrapper .cookie-btn-cross { border-radius: var(--r-pill); background: transparent; border: 1px solid rgba(255,255,255,.25); color: #dbe0ee; padding: 9px 20px; }

/*==============================================================
    [ ## DASHBOARD ]
==============================================================*/
.profile-section { background: transparent; padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(24px, 3vw, 40px); }

/* ---- Greeting row ---- */
.dash-greeting { margin-bottom: 24px; }

.dash-greeting .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-3);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.dash-greeting .title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 0; }

/* ---- Balance card ---- */
.balance-card {
    position: relative;
    overflow: hidden;
    background: var(--brand-grad);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    color: #fff;
    padding: clamp(24px, 3vw, 34px);
    height: 100%;
}

.balance-card::after {
    content: "";
    position: absolute;
    inset: auto -60px -110px auto;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    pointer-events: none;
}

.balance-card::before {
    content: "";
    position: absolute;
    inset: -90px auto auto -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    pointer-events: none;
}

.balance-card > * { position: relative; z-index: 1; }

.balance-card .balance-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, .82);
    margin-bottom: 10px;
}

.balance-card .balance-figure {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.balance-card .balance-figure .amount {
    font-size: clamp(2.1rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -.03em;
    color: #fff;
    line-height: 1.05;
}

.balance-card .balance-figure .currency {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .16);
    border-radius: var(--r-pill);
    padding: 4px 12px;
}

.balance-card .balance-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
}

.balance-card .balance-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.balance-card .balance-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--r-pill);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 9px 18px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: all .2s var(--ease);
}

.balance-card .balance-links a:hover { background: rgba(255, 255, 255, .24); transform: translateY(-2px); }

/* ---- Generic dashboard panel ---- */
.dash-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: clamp(20px, 2.4vw, 28px);
    height: 100%;
}

.dash-card .dash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.dash-card .dash-card-head .title { font-size: 1.08rem; margin: 0; }
.dash-card .dash-card-head .hint { font-size: 13.5px; color: var(--ink-4); margin: 0; }

/* ---- Add money form ---- */
.add-money-form .input-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.add-money-form .input-row .form--control { flex: 1 1 auto; min-width: 0; }
.add-money-form .input-row .btn--base { flex: 0 0 auto; white-space: nowrap; padding-inline: 24px; }

@media only screen and (max-width: 480px) {
    .add-money-form .input-row { flex-direction: column; }
}

/* Legacy overlay layout, if the old markup is still rendered somewhere. */
.profile-section .profile-section-area .user-profile .reacharge-opestion .reacharge-amount .btn--base {
    border-radius: var(--r-pill);
    padding: 11px 24px;
    top: 5px;
    right: 5px;
    position: absolute;
}

/* ---- Quick amount chips ---- */
.quick-reacharge {
    display: block;
    margin-top: 22px;
}

.quick-reacharge .quick-recharge-tag label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 10px;
    display: block;
}

.quick-reacharge .quick-reacharge-amount {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.quick-reacharge .recharge-amount .recharge--amount p {
    margin: 0;
    padding: 9px 18px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s var(--ease);
}

.quick-reacharge .recharge-amount .recharge--amount:hover p {
    border-color: var(--brand-ring);
    background: var(--brand-soft);
    color: var(--brand-strong);
}

.quick-reacharge .recharge-amount .hide-input:checked ~ label p {
    background: var(--brand-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--sh-brand);
    display: block;
}

/* ---- Stat tiles ---- */
.stat-grid { display: grid; gap: 16px; }

.stat-tile {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: 20px 22px;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.stat-tile:hover { transform: translateY(-3px); border-color: var(--brand-ring); box-shadow: var(--sh-md); }

.stat-tile .stat-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: var(--r-md);
}

.stat-tile .stat-body .stat-value {
    display: block;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -.02em;
}

.stat-tile .stat-body .stat-label { margin: 0; font-size: 14px; color: var(--ink-3); }

/* Legacy .available-balance tiles get the same treatment. */
.profile-section .profile-section-area .user-balance-details .available-balance {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: 20px 22px;
}

.profile-section .profile-section-area .user-balance-details .available-balance .left span {
    font-size: 1.5rem;
    color: var(--ink);
}

.profile-section .profile-section-area .user-balance-details .available-balance .right {
    font-size: 22px;
    width: 52px;
    height: 52px;
    line-height: 52px;
    border-radius: var(--r-md);
    background: var(--brand-soft);
    color: var(--brand);
}

/* Legacy circular balance widget → readable card. */
.profile-section .profile-section-area .user-profile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: clamp(22px, 3vw, 34px);
}

/* ---- Shortcut tiles ---- */
.shortcut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.shortcut-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    padding: 18px;
    color: var(--ink);
    font-weight: 600;
    font-size: 14.5px;
    transition: all .2s var(--ease);
}

.shortcut-tile:hover {
    transform: translateY(-3px);
    background: var(--surface);
    border-color: var(--brand-ring);
    box-shadow: var(--sh-md);
    color: var(--brand-strong);
}

.shortcut-tile i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 13px;
}

/*--------------------------------------------------------------
    [ ## Offers / bundles ]
--------------------------------------------------------------*/
.myoffer-section { background: transparent; padding-top: clamp(20px, 3vw, 36px); }

.myoffer-area {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
    padding: clamp(22px, 3vw, 36px);
}

/* style.css pins this to a centred 200px block; align it with every other
   section heading instead. */
.myoffer-area .section-tag {
    display: inline-block;
    width: auto;
    text-align: left;
    margin: 0 0 20px !important;
}

.offer-page-area-header { margin-bottom: 6px; }

.offer-page-area-header .title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 8px;
}

.offer-page-details { margin-top: 10px; }

.bundel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.bundel-list::-webkit-scrollbar { width: 8px; }
.bundel-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); }

.bundel-list .offer-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    padding: 20px;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.bundel-list .offer-item:hover {
    transform: translateY(-3px);
    background: var(--surface);
    border-color: var(--brand-ring);
    box-shadow: var(--sh-md);
}

/* Legacy rule reserves 200px for a side-by-side buy button; the cards stack now. */
.offer-page-details .offer-item .bundel-offer,
.bundel-list .offer-item .bundel-offer { width: 100%; }

.bundel-list .offer-item .bundel-offer p {
    margin: 0;
    color: var(--ink);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
}

.bundel-list .offer-item .bundel-offer.inst-text p { color: var(--ink-4); font-weight: 500; }

.bundel-list .offer-item form { width: 100%; margin-top: auto; }
.bundel-list .offer-item .bundel-buy .btn--base { width: 100%; }

/* Placeholder / empty state row spans the grid. */
.bundel-list > .offer-item:only-child { grid-column: 1 / -1; align-items: center; }

.spinner-border { color: var(--brand); }

/*--------------------------------------------------------------
    [ ## Breadcrumb ]
--------------------------------------------------------------*/
.breadcrumb-section,
.dashboard-breadcrumb {
    background: transparent;
    padding-top: 26px;
}

.breadcrumb-wrapper,
.dashboard-breadcrumb .breadcrumb-wrapper {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-xs);
    padding: 16px 22px;
}

.breadcrumb-wrapper .title { font-size: 1.15rem; margin: 0; }

.breadcrumb-wrapper ul li,
.breadcrumb-wrapper ul li a { color: var(--ink-3); font-size: 14px; }
.breadcrumb-wrapper ul li a:hover { color: var(--brand); }

/*--------------------------------------------------------------
    [ ## Tables & cards used across user pages ]
--------------------------------------------------------------*/
.custom-table,
.table {
    border-collapse: separate;
    border-spacing: 0;
    color: var(--ink-2);
}

.custom-table thead th,
.table thead th {
    background: var(--surface-2);
    color: var(--ink-3);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
    padding: 14px 16px;
}

.custom-table tbody td,
.table tbody td {
    border-bottom: 1px solid var(--line-2);
    padding: 16px;
    vertical-align: middle;
}

.custom-table tbody tr:hover { background: var(--brand-softer); }

.card {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}

.badge,
.badge--base {
    border-radius: var(--r-pill);
    font-weight: 600;
    padding: 5px 12px;
    font-size: 12.5px;
}

/*--------------------------------------------------------------
    [ ## Misc ]
--------------------------------------------------------------*/
.scroll-to-top {
    background: var(--brand-grad);
    border-radius: 50%;
    box-shadow: var(--sh-brand);
    color: #fff;
    border: 0;
}

.modal-alert.card { border-radius: var(--r-lg); box-shadow: var(--sh-lg); }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/*--------------------------------------------------------------
    [ ## Dashboard shell ]
--------------------------------------------------------------*/
.section-wrapper {
    background: var(--canvas);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: none;
    padding: clamp(24px, 3vw, 40px) 0;
}

.inner-wrapper {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 32px);
}

/*--------------------------------------------------------------
    [ ## Auth pages ]
--------------------------------------------------------------*/
.login-account-section {
    background: var(--canvas);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 24px);
}

.login-account-section .login-section-area {
    min-height: auto;
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
}

.login-account-section .login-section-area form,
.login-account-section .login-section-area .account-form {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    padding: clamp(28px, 4vw, 44px);
    width: 100%;
}

.login-account-section .login-section-area form .form-logo,
.login-account-section .login-section-area .account-form .form-logo {
    width: 110px;
    height: auto;
    margin: 0 auto 24px;
    text-align: center;
}

.login-account-section .login-section-area form .form-logo img,
.login-account-section .login-section-area .account-form .form-logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.login-account-section .login-section-area .form-header,
.login-account-section .login-section-area .account-form .form-header {
    text-align: center;
    margin-bottom: 24px;
}

.login-account-section .login-section-area .form-header .title,
.login-account-section .login-section-area .account-form .form-header .title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px;
}

.login-account-section .login-section-area .form-header p,
.login-account-section .login-section-area .account-form .form-header p {
    color: var(--ink-3);
    font-size: 15px;
    margin: 0;
}

.login-account-section .login-section-area form .account-number,
.login-account-section .login-section-area .account-form .account-number {
    margin-top: 14px;
    position: relative;
}

.login-account-section .login-section-area form .account-number label,
.login-account-section .login-section-area .account-form .account-number label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2);
}

.login-account-section .login-section-area form .account-number input,
.login-account-section .login-section-area .account-form .account-number input {
    padding-left: 44px;
}

.login-account-section .login-section-area form .account-number .mobile-icon,
.login-account-section .login-section-area .account-form .account-number .mobile-icon {
    position: absolute;
    top: 42px;
    left: 14px;
    font-size: 20px;
    color: var(--ink-3);
}

.login-account-section .login-section-area .account-passwoard label,
.login-account-section .login-section-area .account-form .account-passwoard label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2);
}

.login-account-section .login-section-area .account-passwoard input,
.login-account-section .login-section-area .account-form .account-passwoard input {
    padding-right: 44px;
}

.login-account-section .login-section-area .account-passwoard .show-pass,
.login-account-section .login-section-area .account-form .account-passwoard .show-pass {
    right: 16px;
    color: var(--ink-3);
}

.login-account-section .login-section-area .login-btn,
.login-account-section .login-section-area form .login-btn,
.login-account-section .login-section-area .account-form .login-btn,
.login-account-section .login-section-area form button[type="submit"],
.login-account-section .login-section-area .account-form button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--brand-grad);
    border: 0;
    border-radius: var(--r-pill);
    color: #fff;
    padding: 13px 28px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    box-shadow: var(--sh-brand);
    width: 100%;
    margin-top: 8px;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}

.login-account-section .login-section-area .login-btn:hover,
.login-account-section .login-section-area form button[type="submit"]:hover,
.login-account-section .login-section-area .account-form button[type="submit"]:hover {
    transform: translateY(-2px);
    filter: saturate(1.08);
    box-shadow: 0 18px 36px -14px var(--brand-ring);
    color: #fff;
}

.login-account-section .login-section-area .login-btn:active,
.login-account-section .login-section-area form button[type="submit"]:active,
.login-account-section .login-section-area .account-form button[type="submit"]:active {
    transform: translateY(0);
}

.login-account-section .login-section-area .register-page .account-item {
    text-align: center;
    margin-top: 20px;
    font-size: 14.5px;
    color: var(--ink-3);
}

.login-account-section .login-section-area .register-page .account-item a {
    color: var(--brand-strong);
    font-weight: 600;
    transition: color .18s var(--ease);
}

.login-account-section .login-section-area .register-page .account-item a:hover {
    color: var(--brand);
}

.custom-check-group label::before {
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: 6px;
    padding: 8px;
    transition: all .18s var(--ease);
}

.custom-check-group input:checked + label::before {
    background: var(--brand);
    border-color: var(--brand);
}

.custom-check-group input:checked + label::after {
    top: 5px;
    left: 7px;
}

.login-account-section .login-section-area .forgot-item label {
    margin-bottom: 0;
    font-size: 14px;
    color: var(--ink-3);
    cursor: pointer;
}

.login-account-section .login-section-area .forgot-item a {
    color: var(--brand-strong);
    font-weight: 500;
    transition: color .18s var(--ease);
}

.login-account-section .login-section-area .forgot-item a:hover {
    color: var(--brand);
}

.login-account-section .login-section-area .note {
    color: var(--brand);
    padding-top: 14px;
    text-align: center;
    font-size: 14px;
}

.login-account-section .login-section-area .back-btn {
    color: var(--brand);
    padding-top: 18px;
    font-size: 18px;
    font-weight: 700;
    transition: color .18s var(--ease);
}

.login-account-section .login-section-area .back-btn:hover {
    color: var(--brand-strong);
}

.login-account-section .login-section-area .back-btn i {
    font-size: 22px;
    position: relative;
    top: 2px;
}

/*--------------------------------------------------------------
    [ ## User page cards ]
--------------------------------------------------------------*/
.custom-card .card-body {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: clamp(20px, 2.4vw, 28px);
}

.tow-fa-security .card-body {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: clamp(20px, 2.4vw, 28px);
}

.info-area,
.dashboard-area {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: clamp(20px, 2.4vw, 28px);
}

/*--------------------------------------------------------------
    [ ## RTL touch-ups ]
--------------------------------------------------------------*/
.rtl .balance-card::after { inset: auto auto -110px -60px; }
.rtl .balance-card::before { inset: -90px -70px auto auto; }

.rtl .profile-section .profile-section-area .user-profile .reacharge-opestion .reacharge-amount .btn--base {
    border-radius: var(--r-pill);
    right: auto;
    left: 5px;
}