/*
 * aiod-overrides.css
 * AIoD Theme — custom CSS overrides
 *
 * Extracted verbatim from UmbracoProject1/Views/Master.cshtml <style> block.
 * All Razor @@ escapes converted to standard CSS @ syntax.
 * Load order: AFTER theme.min.css so these rules win.
 */

/* ─── Smooth scroll ─────────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth !important;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    scroll-behavior: smooth !important;
    padding-top: 0 !important;
}

/* ─── Video button ───────────────────────────────────────────────────────── */
.btn-video {
    color: #fff;
    background-color: rgba(99, 102, 241, 0.7) !important;
}

.btn-video:hover {
    text-decoration: none;
    box-shadow: 0 0 0 1rem rgba(64, 68, 238, 0.7);
}

a.btn-video:hover {
    color: rgba(64, 68, 238, 0.7) !important;
}

/* ─── SimpleBar fix ──────────────────────────────────────────────────────── */
.simplebar-content-wrapper {
    direction: inherit;
    box-sizing: border-box !important;
    position: relative;
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* ─── Event single / offcanvas ──────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .offcanvas-lg.showing,
    .offcanvas-lg.show:not(.hiding) {
        transform: none;
    }

    .offcanvas-lg.offcanvas-center {
        top: 0;
        right: 0;
        width: 22.5rem;
    }

    span.badge {
        color: white !important;
    }

    #blog-sidebar {
        background-color: #000000;
    }

    .btn-close {
        background-color: #6366f1 !important;
    }
}

/* ─── Utility overrides ──────────────────────────────────────────────────── */
.bg-success {
    background-color: #6366f1 !important;
}

.card-blog {
    color: white;
}

.media-tabs .nav-link.active {
    color: #fff !important;
    background-color: #6366f1 !important;
    box-shadow: 0 1.5rem 1.875rem rgb(99 102 241 / 16%),
                0 1.25rem 1rem -0.25rem rgb(99 102 241 / 10%),
                0 0.5rem 0.625rem rgb(99 102 241 / 8%),
                0 0.25rem 0.25rem rgb(99 102 241 / 5%);
}

.nav-link.active .c-icon {
    filter: invert(98%) sepia(2%) saturate(6%) hue-rotate(32deg) brightness(103%) contrast(103%);
}

.blockquote::before {
    color: #6366f1;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    border-color: #6366f1 !important;
}

/* ─── News cards ─────────────────────────────────────────────────────────── */
.card-hover-news:not(.bg-transparent):hover {
    transform: translateY(0px) !important;
    box-shadow: 0 0.275rem 0.75rem -0.0625rem rgb(43 75 156 / 6%),
                0 0.125rem 0.4rem -0.0625rem rgb(11 15 25 / 3%);
}

.card-hover-news {
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

.card-body-news {
    background-color: rgba(101, 101, 101, 1) !important;
}

/* ─── Event single glass cards ───────────────────────────────────────────── */
.bg-glass-event {
    background: linear-gradient(to left bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1));
    border-radius: 0.6rem;
}

.shadow-sm-event {
    box-shadow: 0 1.75rem 1.875rem rgb(0 0 0 / 8%),
                0 1.25rem 1rem rgb(0 0 0 / 5%),
                0 0.5rem 0.625rem rgb(0 0 0 / 4%),
                0 0.25rem 0.25rem rgb(30 33 44 / 3%) !important;
}

.glass-dark {
    background: linear-gradient(to left bottom, rgba(99, 102, 241, 0.7), rgba(99, 102, 241, 0.02));
    backdrop-filter: saturate(180%) blur(5px);
    border-radius: 0.6rem;
}

/* ─── FAQ cards ──────────────────────────────────────────────────────────── */
.accordion-button:not(.collapsed),
.accordion-button {
    filter: invert(37%) sepia(97%) saturate(1364%) hue-rotate(211deg) brightness(94%) contrast(100%) !important;
}

.card-faq {
    border-color: rgba(255, 255, 255, 0.14) !important;
    background-color: #585757 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 0.9rem !important;
}

.card-faq-body {
    flex: 1 1 auto !important;
    padding: 1.5rem !important;
}

.card-faq-hover:not(.bg-transparent):hover {
    transform: translateY(-0.25rem) !important;
    box-shadow: 0 0.275rem 0.75rem -0.0625rem rgba(43, 75, 156, 0.06),
                0 0.125rem 0.4rem -0.0625rem rgb(11 15 25 / 3%) !important;
}

.card-faq-hover:not(.bg-transparent) {
    transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out,
                background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

.card-faq.card-faq-hover:hover,
.card-faq.card-faq-active {
    box-shadow: 0 1.65rem 1.675rem rgb(99 102 241 / 8%),
                0 1.25rem 1rem rgb(99 102 241 / 5%),
                0 0.5rem 0.625rem rgb(99 102 241 / 4%),
                0 0.25rem 0.25rem rgb(30 33 44 / 3%) !important;
}

.card-faq a {
    text-decoration: none;
}

/* ─── AIoD TV / video section ────────────────────────────────────────────── */
@media (max-width: 1310px) {
    .video-section {
        height: 100vh;
    }

    video {
        height: 100%;
        object-fit: cover;
    }

    .card-video {
        max-width: 100%;
    }

    .card-video h2 { font-size: 28px; }
    .card-video h5 { font-size: 16px; }

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

.video-section {
    position: relative;
}

video {
    width: 100%;
    object-fit: cover;
}

.card-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%;
    max-height: 100%;
}

.card-video {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

@media screen and (max-width: 700px) {
    .scroll-body {
        display: flexbox;
        overflow-y: scroll !important;
        scroll-behavior: smooth;
        height: 100vh;
    }

    .scroll-body::-webkit-scrollbar {
        width: 0.15rem !important;
    }

    .card-body-video {
        padding-bottom: 3rem;
    }
}

@media screen and (min-width: 700px) {
    .card-video {
        top: 0;
        border: none;
    }
}

.wrap-content {
    width: 100vh;
    height: 100vh;
    position: center !important;
}

.wrap-content-inner {
    width: inherit;
    height: inherit;
    background-color: rgba(255, 255, 255, 0.03);
    scroll-behavior: smooth;
    backdrop-filter: blur(0.35rem);
}

.video-blur {
    width: inherit;
    height: inherit;
    background-color: rgba(255, 255, 255, 0.03);
    scroll-behavior: smooth;
    backdrop-filter: blur(0.35rem);
}

.wrap-card-bg {
    background-color: rgba(0, 0, 0, 0.85);
    border-radius: 0.6rem;
}

.lh {
    line-height: 170%;
}

/* ─── Hero section ───────────────────────────────────────────────────────── */
@media only screen and (min-width: 700px) {
    .join-btn {
        margin-left: 38.5rem !important;
    }
}

@media (max-width: 700px) {
    .text-hero {
        position: center;
        font-size: 30px !important;
        padding-top: 30px !important;
        font-family: 'Questrial';
    }

    .event-span {
        color: black !important;
    }
}

.btn-arrow:hover i {
    transform: translateX(15px);
    transition: ease-out 0.14s;
}

.bg-glass-hero {
    background-color: rgba(12, 11, 11, 0.4);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    backdrop-filter: saturate(185%) blur(10px);
    border-radius: 0.6rem;
    height: 100%;
}

.tns-pager.tns-pager-inverse [data-nav]::before {
    background-color: rgba(255, 255, 255, 0.4) !important;
}

.tns-pager.tns-pager-inverse [data-nav]::after {
    background-color: white !important;
}

.tns-pager.tns-pager-inverse [data-nav].tns-nav-active {
    color: white !important;
}

.tns-pager.tns-pager-inverse [data-nav] {
    color: rgba(255, 255, 255, 0.65) !important;
}

.text-hero {
    color: whitesmoke !important;
    font-weight: 400 !important;
    font-size: 2.688rem;
    font-family: 'Questrial', sans-serif;
    line-height: 135%;
}

/* ─── Jarallax ───────────────────────────────────────────────────────────── */
.jarallax {
    position: relative;
    z-index: 0;
}

.jarallax > .jarallax-img {
    position: absolute;
    object-fit: cover;
    font-family: 'object-fit: cover;';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* ─── Forms ──────────────────────────────────────────────────────────────── */
.form-control:focus {
    color: #424551;
    background-color: #fff;
    border-color: #6366f1 !important;
    outline: 0;
    -webkit-box-shadow: 5px 9px 18px -6px rgba(99, 102, 241, 0.71) !important;
    box-shadow: 5px 9px 18px -6px rgba(99, 102, 241, 0.71) !important;
}

.form-control:hover:not(:read-only) {
    border-color: #6366f1 !important;
}

/* .form-label rule removed — let Bootstrap inherit color from parent.
   Dark cards (bg-dark text-white) → white labels. Light cards → dark labels. */

/* ─── Custom scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 0.75rem !important;
}

::-webkit-scrollbar-track {
    background: #232323 !important;
}

::-webkit-scrollbar-thumb {
    background: #989898 !important;
}

/* ─── Page loading spinner ───────────────────────────────────────────────── */
.page-loading {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.4s 0.2s ease-in-out;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    z-index: 9999;
}

.page-loading.active {
    opacity: 1;
    visibility: visible;
}

.page-loading-inner {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
}

.page-loading.active > .page-loading-inner {
    opacity: 1;
}

.page-loading-inner > span {
    display: block;
    font-size: 1.5rem;
    font-weight: normal;
    color: #787a80;
}

.page-spinner {
    display: inline-block;
    width: 3.75rem;
    height: 3.75rem;
    margin-bottom: 0.75rem;
    vertical-align: text-bottom;
    background-color: #6366f1;
    border-radius: 50%;
    opacity: 0;
    animation: spinner 0.75s linear infinite;
}

@keyframes spinner {
    0%   { transform: scale(0); }
    50%  { opacity: 1; transform: none; }
}

/* ─── Global resets / typography ─────────────────────────────────────────── */
hr {
    content: '';
    margin-top: 0;
    margin-bottom: 0;
    height: 1px;
    background-color: #6366f1 !important;
}

a {
    color: white !important;
    text-decoration: none;
}

a:hover {
    color: #6366f1 !important;
    text-decoration: none;
}

a.btn-scroll-top:hover {
    color: #fff !important;
}

::selection {
    background: #0b17ac !important;
    color: whitesmoke;
}

.text-purple {
    color: #6366f1 !important;
}

/* ─── Member cards ───────────────────────────────────────────────────────── */
.member-logo {
    max-width: 150px !important;
    max-height: 150px !important;
    object-fit: scale-down !important;
}

.card-member:hover {
    transition-duration: 0.2s, 0.2s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: 0s, 0s;
    transition-property: border-color, box-shadow;
    box-shadow: 0 0.75rem 0.875rem rgba(255, 255, 255, 0.16),
                0 1.25rem 1rem rgba(255, 255, 255, 0.1),
                0 0.5rem 0.625rem rgba(255, 255, 255, 0.08),
                0 0.25rem 0.25rem rgba(30, 33, 44, 0.06) !important;
}

a.member-link {
    color: #6366f1 !important;
    text-decoration: none;
}

/* ─── Background helpers ─────────────────────────────────────────────────── */
.bg-royal-grey,
.bg-royal-black {
    background-color: #232323 !important;
}

/* ─── Navbar ─────────────────────────────────────────────────────────────── */
@media (min-width: 990px) {
    .navbar-expand-lg .dropdown-menu {
        background-color: rgba(12, 11, 11, 0.95) !important;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.75) !important;
        border: 0.5px solid rgba(99, 102, 241, 0.4);
    }
}

.navbar-nav .nav-item:hover > .nav-link,
.nav-link.active,
.navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: #6366f1 !important;
}

.navbar-stuck {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    animation: navbar-show 0.195s linear;
    background-color: rgba(12, 11, 11, 0.95) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75) !important;
    z-index: 1030;
}

.iodLogo {
    object-fit: contain;
}

.navbar-stuck .iodLogo {
    height: 55px;
    width: auto;
    object-fit: contain;
}

.navbar-toggler-icon,
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    background-color: white;
    z-index: 99999;
}

.navbar-collapse {
    padding-top: 0 !important;
    transition-duration: 0.3s !important;
    transition-timing-function: ease-out !important;
}

@media (max-width: 991px) {
    .navbar-collapse {
        background: linear-gradient(180deg, rgba(18,18,18,0.98) 0%, rgba(10,10,10,0.98) 100%) !important;
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        padding: 1.5rem 1.25rem 2rem;
        border-radius: 0 0 1rem 1rem;
        margin-top: 0.75rem;
        border: 1px solid rgba(99, 102, 241, 0.15);
        border-top: 1px solid rgba(99, 102, 241, 0.25);
        box-shadow: 0 1.5rem 2.5rem rgba(0,0,0,0.6), 0 0 1px rgba(99,102,241,0.2);
    }

    .navbar-collapse .navbar-brand {
        display: block;
        text-align: center;
        padding-bottom: 1.25rem;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .navbar-collapse .navbar-brand img {
        width: 90px;
        height: auto;
        object-fit: contain;
    }

    .navbar-collapse .navbar-nav {
        padding: 0.5rem 0;
    }

    .navbar-collapse .navbar-nav .nav-item {
        margin: 0.125rem 0;
    }

    .navbar-collapse .navbar-nav .nav-link {
        font-size: 0.95rem;
        padding: 0.6rem 1rem;
        border-radius: 0.5rem;
        color: rgba(255,255,255,0.8) !important;
        transition: all 0.15s ease;
    }

    .navbar-collapse .navbar-nav .nav-link:hover,
    .navbar-collapse .navbar-nav .nav-link:focus {
        background: rgba(99,102,241,0.1);
        color: #fff !important;
    }

    .navbar-collapse .navbar-nav .nav-link.active {
        background: rgba(99,102,241,0.15);
        color: #fff !important;
    }

    /* Divider before language + profile section */
    .navbar-collapse .d-flex.align-items-center {
        margin-top: 0.75rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255,255,255,0.08);
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .navbar-collapse .lang-switcher {
        border-color: rgba(255,255,255,0.2);
    }

    .navbar-collapse .navbar-tool {
        padding: 0.4rem 0.75rem;
        border-radius: 0.5rem;
        background: rgba(255,255,255,0.04);
        transition: background 0.15s ease;
    }

    .navbar-collapse .navbar-tool:hover {
        background: rgba(99,102,241,0.12);
    }

    .navbar-collapse .navbar-tool .navbar-tool-title {
        font-size: 0.85rem;
    }

    .navbar-collapse .navbar-tool .navbar-tool-icon {
        width: 36px;
    }
}

/* ─── Benefit cards ──────────────────────────────────────────────────────── */
.card-benefits {
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
}

.card-benefits:hover {
    transform: translateY(-0.25rem) !important;
    transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out,
                background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 1.75rem 1.875rem rgba(99, 102, 241, 0.16),
                0 1.25rem 1rem rgba(99, 102, 241, 0.1),
                0 0.5rem 0.625rem rgba(99, 102, 241, 0.08),
                0 0.25rem 0.25rem rgba(30, 33, 44, 0.06) !important;
}

/* ─── Generic hover card ─────────────────────────────────────────────────── */
.card-hover {
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card-hover:not(.bg-transparent):hover {
    transform: translateY(-0.25rem) !important;
}

.card-floating-links {
    background-color: rgba(99, 102, 241, 0.65) !important;
}

/* ─── Step indicators ────────────────────────────────────────────────────── */
.step .step-indicator::before {
    width: 5.25rem;
    height: 5.25rem;
    background-color: rgba(99, 102, 241, 0.12) !important;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.step .step-indicator::after {
    width: 7.3125rem;
    height: 7.3125rem;
    background-color: rgba(99, 102, 241, 0.06) !important;
    transition: transform 0.3s ease 0.1s, opacity 0.3s ease 0.1s;
}

.step:hover .step-indicator {
    color: #6366f1 !important;
    transition: 0.3s ease-in-out !important;
}

@media (max-width: 575.98px) {
    .step .step-indicator {
        color: #6366f1 !important;
    }

    .memberProfilePic {
        max-height: 450px;
        width: auto;
    }
}

/* ─── Rainbow animated border button ────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

@keyframes rotate {
    100% { transform: rotate(1turn); }
}

.rainbow {
    position: relative;
    z-index: 0;
    width: 15.5rem;
    height: 8.75rem;
    border-radius: 0.625rem;
    overflow: hidden;
    padding: 2rem;
}

.rainbow::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #6366f1;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#6366f1, #6366f1),
                      linear-gradient(#414ED4, #414ED4),
                      linear-gradient(#0D37B8, #0D37B8),
                      linear-gradient(#00229C, #00229C);
    animation: rotate 6s linear infinite;
}

.rainbow::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: #242424;
    border-radius: 5px;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary {
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.show {
    background-color: #4044ee !important;
    border-color: #4044ee !important;
    color: #fff !important;
}

.btn-translucent-primary:hover {
    color: white !important;
}

.btn-scroll-top {
    background-color: #6366f1 !important;
}

.btn-outline-primary {
    color: #151822 !important;
    border-color: #151822 !important;
}

.btn-outline-primary:hover {
    color: #000;
    background-color: #151822 !important;
    border-color: #151822 !important;
}

[class^='btn-outline-']:hover,
[class^='btn-outline-']:active,
[class^='btn-outline-'].active,
[class^='btn-outline-'].dropdown-toggle.show,
[class*=' btn-outline-']:hover,
[class*=' btn-outline-']:active,
[class*=' btn-outline-'].active,
[class*=' btn-outline-'].dropdown-toggle.show {
    color: #6366f1 !important;
}

/* ─── Tiny Slider controls ───────────────────────────────────────────────── */
.tns-controls-inverse [data-controls]:hover,
.tns-controls-outside [data-controls]:hover {
    background-color: #6366f1 !important;
    color: #fff !important;
}

.tns-controls-inverse [data-controls],
.tns-controls-outside [data-controls] {
    color: #6366f1;
}

.tns-thumbnails [data-nav].tns-nav-active {
    border-color: #6366f1 !important;
    opacity: 1;
}

/* ─── Portfolio / slide cards ────────────────────────────────────────────── */
.portfolio-card-img {
    height: 40vh;
}

.portfolio-card-slide .portfolio-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: 1.5rem;
    background-color: #6366f1 !important;
    text-align: center;
    transform: translateY(4.25rem);
    transition: transform 0.25s ease-in-out;
    will-change: transform;
}

.portfolio-card-slide:hover {
    text-decoration: none;
    box-shadow: 0 1.75rem 1.875rem rgb(99 102 241 / 16%),
                0 1.25rem 1rem -0.25rem rgb(99 102 241 / 10%),
                0 0.5rem 0.625rem rgb(99 102 241 / 8%),
                0 0.25rem 0.25rem rgb(30 33 44 / 5%);
}

/* ─── Misc helpers ───────────────────────────────────────────────────────── */
.s-link {
    color: #6366f1 !important;
    text-decoration: underline;
}

.s-link:hover {
    color: #6366f1 !important;
    text-decoration: none;
}

.color {
    color: #6366f1 !important;
}

.page-link:hover {
    color: #6366f1 !important;
}

.form-check-input:checked {
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
}

.bg-glass {
    background-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    backdrop-filter: saturate(115%) blur(8px);
    border-radius: 8px;
}

.border {
    border-color: #6366f1 !important;
}

.figure {
    height: 320px;
    display: inline-block;
}

.object-fit-cover {
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.auto {
    image-rendering: auto;
}

/* ─── Animated circles (contact form decoration) ────────────────────────── */
@media only screen and (min-width: 1340px) {
    .circle {
        width: 11.25rem;
        height: 11.25rem;
        background: radial-gradient(#6366f1, #4044ee);
        border-radius: 50%;
        position: absolute;
        animation: move-up 2.5s ease-in-out infinite alternate-reverse;
        z-index: -1;
    }

    .circle:nth-child(1) {
        top: -25px;
        left: -25px;
    }

    .circle:nth-child(2) {
        bottom: -25px;
        right: -25px;
        animation-name: move-down;
    }

    @keyframes move-up {
        to { transform: translateY(-25px) translateX(-25px); }
    }

    @keyframes move-down {
        to { transform: translateY(25px) translateX(25px); }
    }
}

/* ─── AOS disable on mobile ──────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
    [data-aos] {
        pointer-events: auto !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ─── Language Switcher ─────────────────────────────────────────────────── */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    overflow: hidden;
}

.lang-pill {
    display: inline-block;
    padding: 4px 14px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1.6;
    transition: all 0.25s ease;
}

.lang-pill:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.lang-pill.active {
    color: #fff !important;
    background: linear-gradient(135deg, #766df4, #5b4fcf);
    cursor: default;
    pointer-events: none;
}

/* ─── Payment pages — refined glass card ──────────────────────────────── */
.payment-card {
    background: linear-gradient(165deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.01) 60%, rgba(99,102,241,0.05) 100%);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1rem;
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.payment-status-icon {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    animation: payment-icon-pop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.payment-status-icon.success {
    background: rgba(46,212,126,0.1);
    border: 2px solid rgba(46,212,126,0.25);
    color: #2ed47e;
}

.payment-status-icon.danger {
    background: rgba(247,79,120,0.1);
    border: 2px solid rgba(247,79,120,0.25);
    color: #f74f78;
}

.payment-status-icon.warning {
    background: rgba(245,166,35,0.1);
    border: 2px solid rgba(245,166,35,0.25);
    color: #f5a623;
}

@keyframes payment-icon-pop {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.payment-title {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.payment-subtitle {
    color: rgba(255,255,255,0.55);
    font-size: 0.95rem;
    line-height: 1.6;
}

.payment-breakdown {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.payment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.325rem 0;
    color: rgba(255,255,255,0.75);
    font-size: 0.95rem;
}

.payment-row.label {
    color: rgba(255,255,255,0.45);
    font-size: 0.85rem;
}

.payment-row.total {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 0.4rem;
}

.payment-secure-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255,255,255,0.45);
    font-size: 0.8rem;
    padding: 0.4rem 0.85rem;
    background: rgba(255,255,255,0.03);
    border-radius: 2rem;
}

.payment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.9rem;
    font-size: 1rem;
    font-weight: 600;
    background: linear-gradient(135deg, #6366f1, #5b4fcf);
    color: #fff;
    border: none;
    border-radius: 0.6rem;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.02em;
}

.payment-btn:hover {
    background: linear-gradient(135deg, #766df4, #6366f1);
    box-shadow: 0 0.5rem 1.5rem rgba(99,102,241,0.35);
    transform: translateY(-1px);
    color: #fff;
}

.payment-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 0.6rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
}

.payment-btn-outline:hover {
    border-color: #6366f1;
    color: #6366f1;
    background: rgba(99,102,241,0.08);
}

.payment-amount-row {
    color: rgba(255, 255, 255, 0.85);
}

.payment-total-row {
    color: #fff;
    font-weight: 600;
}

/* Pay button loading state */
.btn-pay-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.85;
}

.btn-pay-loading::after {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
    vertical-align: middle;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* Legacy icon classes — keep for compat */
.payment-icon-success { color: #2ed47e; }
.payment-icon-danger  { color: #f74f78; }
.payment-icon-warning { color: #f5a623; }