@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@700&display=swap');

html, body {
    padding: 0;
    margin: 0;
    background-color: rgb(240, 240, 240);
    font-family: 'Inter', sans-serif;
    user-select: none;
    overflow-x: hidden;
}

img {
    vertical-align: top !important;
}

@media (max-width: 767px) {
    .row > [class*="col-"] {
        margin-bottom: 16px;
    }

    .row > [class*="col-"]:last-child {
        margin-bottom: 16px;
    }
}

body.modal-open {
    padding-right: 0 !important;
}

.header {
    width: 100%;
    height: 550px;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.0);
    overflow: hidden;
}

    .header .header-image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-image:
            linear-gradient(180deg, rgba(19, 67, 222, 0.18), rgba(19, 67, 222, 0)),
            url("../imgs/cdcwhite.png");
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        background-color: #e9eefb;
        filter: grayscale(0.6);
        opacity: 0.4;
    }

        .header .header-image::after {
            content: ' ';
            position: absolute;
            bottom: -200px;
            left: 0;
            width: 150%;
            height: 300px;
            background-color: rgb(240, 240, 240);
            transform: rotate(-3deg);
        }

    .header .container {
        z-index: 100;
        position: relative;
        text-align: center;
    }

.header .header-title {
    font-weight: 700;
    font-size: 50px; /* Default for PC */
    line-height: 1.1;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* For mobile devices */
@media (max-width: 768px) {
    .header .header-title {
        font-size: 30px;
    }
}

        .header .header-ctas {
            display: block;
            margin-top: 30px;
        }

.header .header-cta, .blue-cta {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
                border-radius: 7px;
                padding: 14px 47px;
                font-weight: 500;
                background: #1343DE;
                color: white;
                position: relative;
                transition: all 0.23s ease-in-out;
                appearance: none;
                border: none;
    outline: none;
}

.discover-header {
    height: 320px;
    overflow: visible;
}

.discover-header .header-image {
    background: linear-gradient(180deg, rgba(19, 67, 222, 0.12), rgb(240, 240, 240));
    filter: none;
    opacity: 1;
}

.discover-header .header-image::after {
    display: none;
}

.discover-header .header-title {
    font-size: 44px;
    margin-top: 10px;
    margin-bottom: 16px;
}

.discover-header .header-description {
    max-width: 520px;
}

.discover-header .discover-header-search {
    margin-top: 22px;
}

.settings-page .blue-cta {
    margin-right: 0;
}

.home-header-wrap {
    padding-top: 92px;
    margin-bottom: 32px;
}

.home-header {
    height: auto;
    min-height: 0;
    padding: 26px 0 30px;
    border-radius: 32px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.56));
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.14);
}

.home-header .home-header-inner {
    z-index: 100;
    position: relative;
    padding: 0 28px;
    text-align: center;
}

.home-header .header-image {
    border-radius: inherit;
    opacity: 0.5;
}

.home-header .header-image::after {
    display: none;
}

.home-header .promo-banner-shell {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.home-header .promo-banner-track {
    min-height: 0;
}

.home-header .promo-banner-slide {
    grid-template-columns: 1fr;
}

.home-header .promo-banner-copy {
    padding: 0;
    border-radius: 0;
    color: #111827;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

.home-header .promo-banner-eyebrow {
    margin-top: 12px;
    margin-bottom: 18px;
    color: rgba(17, 24, 39, 0.72);
}

.home-header .promo-banner-title {
    max-width: 760px;
    margin: 0 auto 24px;
    font-size: 50px;
    line-height: 1.1;
    font-weight: 700;
    text-align: center;
}

.home-header .promo-banner-body {
    max-width: 600px;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: #1f2937;
    text-align: center;
}

.home-header .promo-banner-meta {
    margin-top: 18px;
    color: rgba(17, 24, 39, 0.72);
    text-align: center;
}

.home-header .promo-banner-actions {
    margin-top: 30px;
    text-align: center;
}

.home-header .promo-banner-media {
    display: none;
}

.home-header .promo-banner-nav {
    justify-content: center;
    gap: 0;
    padding-top: 22px;
}

.home-header .promo-banner-arrow {
    display: none;
}

.home-header .promo-banner-dots {
    flex: 0 0 auto;
}

.home-header .promo-banner-dot {
    background: rgba(17, 24, 39, 0.16);
}

.home-header .promo-banner-dot.is-active {
    background: rgba(17, 24, 39, 0.65);
}

                .header .header-cta:hover, .blue-cta:hover {
                    cursor: pointer;
                    background: #11319c;
                }

                .header .header-cta i, .blue-cta i {
                    position: absolute;
                    right: 15px;
                    top: 50%;
                    transform: translateY(-50%);
                }

            .header .header-cta:last-child, .blue-cta:last-child {
                margin-right: 0px;
            }

            .header .header-description {
                max-width: 600px;
                text-align: center;
                margin: 0 auto;
                position: relative;
                font-weight: 500;
            }

form label {
    display: block;
    font-weight: 600;
    font-size: 14px;
}

    form label .required {
        color: #ff4757;
        font-size: 13px;
        vertical-align: top;
        display: inline-block;
    }

    form .formGroup {
        width: 100%;
        height: 45px;
        box-shadow: 0 0 0 1px transparent, inset 0 0 0 1px rgba(0, 0, 0, 0.05);
        position: relative;
        border-radius: 7px;
        margin-bottom: 20px;
        overflow: hidden;
        background: rgba(255, 255, 255)!important;
        transition: all 0.23s ease-in-out;
    }

        form .formGroup:focus-within {
            background: #1343DE10!important;
            box-shadow: 0 0 0 1px #1343DE50, inset 0 0 0 0px rgba(0, 0, 0, 0.05);
        }

form .formGroup input {
            display: inline-block;
            appearance: none;
            outline: none;
            border: none;
            background: rgba(0, 0, 0, 0)!important;
            padding: 0 15px;
            font-size: 15px;
            width: 100%;
            height: 45px;
        }

        form .divider {
            width: calc(100% + 48px);
            height: 1px;
            background: rgba(0, 0, 0, 0.0);
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: -24px;
        }

        form .prompt {
            margin-top: 25px;
            width: 100%;
            text-align: center;
            font-weight: 500;
            font-size: 15px;
        }

            form .prompt a {
                color: #1343DE;
                font-weight: 700;
            }

.contentTitle {
    width: 100%;
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 20px;
}

    .contentTitle .viewMore {
        display: inline-block;
        vertical-align: top;
        color: #1343DE;
        transition: all 0.23s ease-in-out;
        font-size: 16px;
        margin-top: 6px;
        float: right;
    }

        .contentTitle .viewMore:hover {
            color: #11319c;
            cursor: pointer;
        }

.post {
    width: 100%;
    height: 180px;
    background: rgba(0, 0, 0, 0.1);
    position: relative;
    display: block;
    margin-bottom: 30px;
    border-radius: 7px;
    overflow: hidden;
}

.col-md-6 .post {
    height: 390px;
}

.post-card {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    transition: background-size 0.35s ease;
}

.post-card .post-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.72) 100%);
}

.post-card .post-content {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    color: #ffffff;
    z-index: 1;
}

.post-card .post-meta {
    font-size: 12px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 6px;
}

.post-card .post-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}

.post-card.post-large .post-title {
    font-size: 24px;
}

.post-card .post-desc {
    font-size: 14px;
    line-height: 1.4;
    max-height: 2.8em;
    overflow: hidden;
}

.post-card.post-large .post-desc {
    font-size: 15px;
    max-height: 3em;
}

.post-link {
    display: block;
    text-decoration: none;
}

.post-link:hover {
    text-decoration: none;
}

.post-link:hover .post-card {
    background-size: 108% 108%;
}

.post-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 500;
}

.blog-page {
    max-width: 1100px;
    margin: 0 auto;
}

.blog-header {
    text-align: center;
    margin-bottom: 24px;
}

.blog-title {
    font-size: 40px;
    font-weight: 700;
}

.blog-subtitle {
    margin-top: 8px;
    font-weight: 500;
    opacity: 0.7;
}

.blog-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease-in-out;
    color: inherit;
}

.blog-card:hover {
    transform: none;
}

.blog-card-image {
    height: 190px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.blog-card-body {
    padding: 18px;
}

.blog-card-meta {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
    margin-bottom: 8px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.blog-card-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.blog-card-desc {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.75;
}

.blog-empty {
    text-align: center;
    padding: 30px;
    font-weight: 600;
    opacity: 0.7;
}

.blog-pagination {
    margin-top: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

.blog-page-links {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 24px rgba(0, 0, 0, 0.06);
}

.blog-page-link {
    padding: 8px 14px;
    border-radius: 10px;
    background: transparent;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 600;
}

.blog-page-link:hover {
    background: transparent;
    color: rgba(0, 0, 0, 1);
}

.blog-page a:hover {
    color: inherit;
}

.blog-page-link.is-active {
    color: #1343DE;
}

.blog-page-link.is-arrow {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.blog-page-link.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.blog-page-ellipsis {
    color: rgba(0, 0, 0, 0.5);
    font-weight: 700;
    padding: 0 2px;
}

.blog-page-status {
    font-weight: 600;
    opacity: 0.7;
}

@media (max-width: 900px) {
    .blog-list {
        grid-template-columns: 1fr;
    }
}

.article-hero {
    position: relative;
    min-height: 260px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.article-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.75) 100%);
}

.article-hero-inner {
    position: relative;
    z-index: 1;
    color: #ffffff;
    padding: 24px 24px;
    text-align: left;
}

.article-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-bottom: 12px;
}

.article-meta span + span::before {
    content: "|";
    margin-right: 12px;
    opacity: 0.6;
}

.article-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    max-width: 820px;
}

.article-description {
    margin-top: 16px;
    font-size: 18px;
    font-weight: 500;
    max-width: 720px;
    opacity: 0.9;
}

.article-author {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.article-author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #ffffff;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.article-author-avatar.is-fallback {
    background: linear-gradient(126deg, rgba(81, 129, 160, 1) 0%, rgba(78, 116, 121, 1) 100%);
}

.article-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-author-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.article-author-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
}

.article-author-name {
    font-weight: 600;
}

.article-page {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 24px;
    margin-top: 60px;
}

.article-shell {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px) saturate(140%);
}

.article-card {
    padding: 26px 24px;
    background: transparent;
}

.article-body {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(0, 0, 0, 0.8);
}

.article-body p {
    margin-bottom: 16px;
}

.article-back {
    text-align: center;
    margin-top: 12px;
    padding-bottom: 18px;
}

.article-back-outside {
    margin-bottom: 16px;
    text-align: left;
}
.article-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
    transition: all 0.2s ease-in-out;
}

.article-back-link:hover {
    color: rgba(0, 0, 0, 0.95);
}

@media (max-width: 768px) {
    .article-title {
        font-size: 34px;
    }

    .article-description {
        font-size: 16px;
    }

    .article-hero {
        min-height: 220px;
    }
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0px rgba(0, 0, 0, 0.3);
    padding: 0 !important;
}

    nav .nav-item {
        padding: 12px 7px;
        margin-left: 2px;
        transition: all 0.23s ease-in-out;
        box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0);
    }

        nav #nav-right .nav-item {
            box-shadow: none!important;
        }

        nav .nav-item a {
            color: rgba(0, 0, 0, 0.75);
            transition: all 0.23s ease-in-out;
        }

        nav .nav-item:hover {
            box-shadow: inset 0 -2px 0 0 #265c7f;
        }

            nav .nav-item:hover a {
                color: rgb(0, 0, 0);
            }

    nav .nav-link {
        font-weight: 500;
    }

@media (max-width: 768px) {
    nav {
        padding: 10px 0 !important;
    }

    nav .container {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    nav .navbar-toggler {
        border: none;
        padding: 6px 10px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 18px rgba(0, 0, 0, 0.08);
    }

    nav .navbar-toggler:focus {
        outline: none;
        box-shadow: inset 0 0 0 1px rgba(19, 67, 222, 0.3), 0 8px 18px rgba(0, 0, 0, 0.08);
    }

    nav .navbar-toggler-icon {
        width: 24px;
        height: 18px;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3e%3cpath stroke='rgba%280,0,0,0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M3 4h24M3 10h24M3 16h24'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

nav .navbar-collapse {
        margin-top: 10px;
        padding: 8px 0 12px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    nav .navbar-nav {
        gap: 4px;
    }

    nav .nav-item {
        padding: 6px 10px;
        margin-left: 0;
        border-radius: 10px;
    }

    nav .nav-item:hover {
        box-shadow: none;
        background: rgba(0, 0, 0, 0.06);
    }
}

.cookie-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 18px;
    z-index: 1040;
}

.cookie-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1030;
}

.cookie-open {
    overflow: hidden;
}

.cookie-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 40px rgba(12, 20, 46, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(12px) saturate(140%);
}

.cookie-bar-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 4px;
}

.cookie-bar-desc {
    color: #6b7280;
    font-size: 13px;
    max-width: 520px;
}

.cookie-bar-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cookie-bar-btn {
    border: none;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 13px;
}

.cookie-bar-primary {
    background: #1343de;
    color: #fff;
}

.cookie-bar-primary:hover {
    background: #11319c;
    color: #fff;
}

.cookie-bar-secondary {
    background: rgba(0, 0, 0, 0.08);
    color: #111;
}

.cookie-bar-secondary:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #111;
}

.cookie-settings-modal .modal-content {
    border-radius: 18px;
    padding: 8px 6px 12px;
}

.cookie-settings-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
}

.cookie-settings-desc {
    color: #6b7280;
    margin-bottom: 16px;
}

.cookie-settings-list {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.cookie-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.04);
}

.cookie-settings-row small {
    display: block;
    color: #6b7280;
}

.cookie-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 768px) {
    .cookie-bar-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .cookie-bar-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .cookie-bar-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

.dropdown-menu {
    border: none;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    min-width: 220px;
}

    form .formGroup select {
        display: inline-block;
        appearance: none;
        outline: none;
        border: none;
        background: rgba(0, 0, 0, 0)!important;
        padding: 0 15px;
        font-size: 15px;
        width: 100%;
        height: 45px;
    }

    form .formGroup.formGroup-textarea {
        height: auto;
        padding: 10px 0;
    }

    form .formGroup.formGroup-textarea textarea {
        display: block;
        appearance: none;
        outline: none;
        border: none;
        background: rgba(0, 0, 0, 0)!important;
        padding: 0 15px;
        font-size: 15px;
        width: 100%;
        resize: vertical;
        min-height: 140px;
    }

.dropdown-item {
    border-radius: 8px;
    padding: 8px 12px;
    color: rgba(0, 0, 0, 0.75);
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.dropdown-item i {
    opacity: 0.5;
    margin-right: 6px;
    transition: opacity 0.2s ease-in-out;
}

.dropdown-item:hover {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.95);
}

.dropdown-item:hover i {
    opacity: 0.8;
}

.dropdown-item.logout-item {
    color: #c0392b;
}

.dropdown-item.logout-item i {
    opacity: 0.65;
}

.dropdown-item.logout-item:hover {
    background: rgba(192, 57, 43, 0.12);
    color: #c0392b;
}

.dropdown-item.logout-item:hover i {
    opacity: 0.9;
}

.dropdown-divider {
    margin: 6px 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.navbar-brand {
    
}

.container {
    max-width: 1380px;
}

.content {
    min-height: 100vh;
}

@media (min-width: 768px) {
    .content {
        padding-bottom: 24px;
    }
}

.faq {
    max-width: 700px;
    position: relative;
    margin: 0 auto;
    margin-bottom: 20px;
}

    .faq .contentTitle {
        text-align: center;
    }

    .faq #accordion {
        border-radius: 12px;
    }

    .faq #accordion .card {
        background: rgba(255, 255, 255, 0.9)!important;
        border: none!important;
        border-radius: 12px;
        margin-bottom: 12px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
        overflow: hidden;
    }

    .faq #accordion .card-header {
        background: rgba(0, 0, 0, 0)!important;
        border: none!important;
        padding: 0!important;
    }

    .faq #accordion .card-header button {
        color: black;
        font-weight: 600;
        text-decoration: none;
        padding: 14px 18px!important;
        position: relative;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
        box-shadow: none;
    }

        .faq #accordion .card-header button::after {
            content: "";
            position: absolute;
            right: 18px;
            top: 50%;
            width: 8px;
            height: 8px;
            border-right: 2px solid rgba(0, 0, 0, 0.55);
            border-bottom: 2px solid rgba(0, 0, 0, 0.55);
            transform: translateY(-50%) rotate(45deg);
            transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
        }

        .faq #accordion .card-header button[aria-expanded="true"]::after {
            transform: translateY(-50%) rotate(-135deg);
        }

        .faq #accordion .card-header .btn:focus,
        .faq #accordion .card-header .btn.focus,
        .faq #accordion .card-header .btn:active,
        .faq #accordion .card-header .btn:focus-visible {
            outline: none !important;
            box-shadow: none !important;
            border: none !important;
        }

    .faq #accordion .card-body {
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        padding: 16px 20px !important;
        font-size: 15px;
        line-height: 1.6;
    }

    .faq #accordion .card:last-child .card-body {
            border-bottom: none!important;
        }
    
.faq.shop-faq {
    max-width: 1100px;
    margin-top: 40px;
}

.faq.shop-faq #accordion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.faq.shop-faq #accordion .card {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .faq.shop-faq #accordion {
        grid-template-columns: 1fr;
    }
}


.support-resources {
    padding: 40px 0 10px;
}

.support-resources-header {
    text-align: center;
    margin-bottom: 24px;
}

.support-resources-subtitle {
    max-width: 620px;
    margin: 6px auto 0;
    color: rgba(0, 0, 0, 0.65);
    font-weight: 500;
    font-size: 15px;
}

.support-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.support-card {
    --support-accent-rgb: 19, 67, 222;
    position: relative;
    padding: 18px 18px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.support-card::after {
    content: "";
    position: absolute;
    top: -46px;
    right: -46px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(var(--support-accent-rgb), 0.18), rgba(var(--support-accent-rgb), 0) 70%);
}

.support-card.support-childline {
    --support-accent-rgb: 255, 122, 182;
}

.support-card.support-samaritans {
    --support-accent-rgb: 90, 168, 90;
}

.support-card.support-nspcc {
    --support-accent-rgb: 255, 177, 74;
}

.support-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.support-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.3px;
    background: rgba(var(--support-accent-rgb), 0.16);
    color: rgb(var(--support-accent-rgb));
}

.support-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--support-accent-rgb), 0.18);
    color: rgb(var(--support-accent-rgb));
    font-size: 16px;
}

.support-card-desc {
    color: rgba(0, 0, 0, 0.7);
    font-size: 14px;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.support-card-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.support-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.75);
    text-decoration: none;
}

.support-card-link i {
    width: 18px;
    text-align: center;
    color: rgb(var(--support-accent-rgb));
}

.support-card-link:hover {
    color: rgba(0, 0, 0, 0.95);
    text-decoration: none;
}

@media (max-width: 768px) {
    .support-resources {
        padding: 30px 0 0;
    }

    .support-resources-header .contentTitle {
        font-size: 22px;
    }
}

.footer {
    width: 100%;
    min-height: 250px;
    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    position: relative;
    padding-top: 50px;
    padding-bottom: 24px;
}

    .footer img {
        height: 32px;
        filter: grayscale(0);
        display: block;
        margin-bottom: 20px;
    }

    .footer .footer-grid {
        display: grid;
        grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(160px, 1fr));
        gap: 24px;
        align-items: start;
    }

    .footer .footer-brand {
        max-width: 320px;
    }

    .footer .footer-tagline {
        font-size: 14px;
        line-height: 1.6;
        color: rgba(0, 0, 0, 0.7);
        margin-bottom: 12px;
    }

    .footer .footer-socials a {
        display: inline-block;
    }

    .footer .footer-title {
        font-weight: 700;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 12px;
        color: rgba(0, 0, 0, 0.7);
    }

    .footer .footer-links a {
        display: block;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.8);
        margin-bottom: 8px;
        transition: color 0.2s ease;
    }

    .footer .footer-links a:hover {
        color: #1343DE;
    }

    .footer .footer-bottom {
        margin-top: 26px;
        margin-bottom: -13px;
        padding-top: 14px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        font-size: 13px;
        color: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .footer .footer-credits {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }

    .footer .footer-sep {
        color: rgba(0, 0, 0, 0.35);
    }

    .footer .footer-credits a {
        color: #000000;
        font-weight: 600;
    }

    .footer .footer-credits a:hover {
        color: #000000;
    }

    .footer .footer-flag {
        width: 22px;
        height: 14px;
        border-radius: 4px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
        object-fit: cover;
        vertical-align: middle !important;
        margin-top: 18px;
    }

    .footer .social {
        display: inline-block;
        vertical-align: top;
        color: black;
        border-radius: 7px;
        width: 50px;
        height: 50px;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
        position: relative;
        margin-top: 10px;
        margin-bottom: 20px;
        transition: all 0.23s ease-in-out;
    }

        .footer .social:hover {
            background: rgba(0, 0, 0, 0.1);
        }

        .footer .social i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 22px;
        }

@media (max-width: 991px) {
    .footer .footer-grid {
        grid-template-columns: minmax(200px, 1fr) minmax(160px, 1fr);
    }
}

@media (max-width: 575px) {
    .footer .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer .footer-bottom {
        text-align: center;
        justify-content: center;
    }

    .footer .footer-credits {
        justify-content: center;
    }
}

a, a:hover {
    text-decoration: none!important;
}

/* CadetCard campaign homepage */
:root { --cc-navy:#002b4b; --cc-dark:#00243f; --cc-blue:#0788f7; --cc-yellow:#ffd400; }
.page-home .navbar { background:linear-gradient(180deg,rgba(0,24,43,.96),rgba(0,35,61,.9))!important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.12),0 12px 35px rgba(0,18,32,.16);-webkit-backdrop-filter:blur(16px) saturate(135%);backdrop-filter:blur(16px) saturate(135%); }
.page-home .navbar .nav-item > .nav-link { color:rgba(255,255,255,.86); }
.page-home .navbar .nav-item:hover { box-shadow:inset 0 -2px 0 #35b8ff; }
.page-home .navbar .nav-item:hover > .nav-link { color:#fff; }
/* Keep the homepage wordmark and menu contrast in sync with its dark header. */
.page-home .navbar-brand img,
.page-home .footer-brand img {
    content:url('../imgs/cdcwhite.png');
    width:auto;
    object-fit:contain;
}
.navbar .dropdown-menu { background:#fff; color:#17364d; }
.navbar .dropdown-menu .dropdown-item { color:#17364d; }
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus { background:#edf4fa; color:#002b4b; }
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:active { background:#086bb6; color:#fff; }
.navbar .dropdown-menu .dropdown-item.logout-item { color:#a52c23; }
.navbar .dropdown-menu .dropdown-item.logout-item:hover,
.navbar .dropdown-menu .dropdown-item.logout-item:focus { background:#fbecea; color:#a52c23; }
.navbar .dropdown-menu .dropdown-item:focus-visible { outline:2px solid #086bb6; outline-offset:-2px; }

.cc-home { color:#092f50; background:#f5fbff; }
.cc-home h1,.cc-home h2,.cc-home .cc-kicker,.cc-hero-note,.cc-splash,.cc-join { font-family:'Kalam','Inter',sans-serif; font-weight:700; }
.cc-hero { position:relative; min-height:530px; margin-top:49px; padding-bottom:20px; color:white; overflow:hidden; background:radial-gradient(circle at 20% 10%,#064f7b,#00243f 64%);clip-path:polygon(0 0,100% 0,100% 94%,96% 95%,91% 93.7%,86% 95.4%,80% 94.2%,74% 96%,67% 94.4%,60% 95.7%,53% 94.1%,47% 96.2%,39% 94.5%,31% 96%,24% 94.2%,17% 95.8%,10% 94%,4% 96%,0 95%); }
.cc-hero:after,.cc-deals:after,.cc-stories:after,.cc-footer:after { content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;background-image:repeating-radial-gradient(circle at 0 50%,transparent 0 18px,#56a4ce 19px 20px,transparent 21px 35px); }

.cc-hero-inner { position:relative;z-index:1;min-height:510px;display:flex;align-items:center;justify-content:space-between;padding-top:35px;padding-bottom:35px; }
.cc-hero-copy { max-width:585px;text-shadow:0 2px 12px rgba(0,25,45,.35); }
.cc-kicker { font-size:34px;line-height:1;transform:rotate(-2deg); }
.cc-hero h1 { font-size:58px;line-height:.95;text-transform:uppercase;margin:8px 0 18px;letter-spacing:-1px; }
.cc-hero h1 span { color:#22aefa; }
.cc-hero p { font-size:16px;line-height:1.55;font-weight:600; }
.cc-service-mini { display:flex;gap:0;margin:20px 0; }
.cc-service-mini span { min-width:64px;padding:0 11px;border-right:1px solid rgba(255,255,255,.35);text-align:center;font-size:11px; }
.cc-service-mini span:first-child { padding-left:0; }.cc-service-mini span:last-child{border:0}
.cc-service-mini .cc-drawn-icon { display:block;width:25px;height:25px;margin:0 auto 6px;color:#fff; }
.cc-actions { display:flex;gap:12px;flex-wrap:wrap; }
.cc-btn { display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:28px;font-size:13px;font-weight:800;transition:.2s; }
.cc-btn-primary { background:#078cff;color:#fff!important;box-shadow:0 8px 20px rgba(0,120,255,.25); }.cc-btn-primary:hover{background:#28a1ff;transform:translateY(-2px)}
.cc-btn-ghost { color:#fff!important;border:1px solid #fff;background:rgba(0,33,58,.4); }.cc-btn-ghost:hover{background:#fff;color:#003257!important}
.cc-hero-note { align-self:flex-end;margin-bottom:45px;font-size:21px;line-height:1.25;text-align:right;text-transform:uppercase;transform:rotate(-6deg); }
.cc-hero-note i { color:var(--cc-yellow);font-size:35px;margin-bottom:8px; }.cc-hero-note em{color:var(--cc-yellow);font-style:normal;font-size:26px}
.cc-paper { position:relative;background:#f8fcff; }
.cc-services { padding:34px 0 24px; }
.cc-service-layout { display:grid;grid-template-columns:360px 1fr;gap:42px;align-items:center; }
.cc-home h2 { text-transform:uppercase;font-size:29px;line-height:1;margin:0 0 4px; }
.cc-home h2:after { content:"";display:block;width:82px;height:10px;margin-top:2px;background:url('../imgs/pen-stroke-yellow.svg') center/100% 100% no-repeat;transform:rotate(-2deg); }
.cc-intro p,.cc-heading p { margin:0;font-size:14px; }
.cc-service-cards { display:grid;grid-template-columns:repeat(6,1fr);gap:10px; }
.cc-service-card { background:white;border:1px solid #d6e4ef;min-height:136px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 7px 18px rgba(0,42,74,.09);color:var(--service);position:relative;overflow:hidden;clip-path:polygon(3% 1%,96% 0,100% 5%,98% 94%,94% 100%,5% 98%,0 94%,1% 6%); }
.cc-service-card:after { content:"";position:absolute;bottom:8px;width:50px;height:5px;background:var(--service);transform:skew(-25deg) rotate(-5deg); }
.cc-service-icon { background:var(--service);color:#fff;width:52px;height:52px;clip-path:polygon(50% 0,94% 12%,88% 72%,50% 100%,12% 72%,6% 12%);display:grid;place-items:center;margin-bottom:8px; }.cc-service-icon .cc-drawn-icon{width:34px;height:34px;color:#fff}
.cc-drawn-icon { fill:none; stroke:currentColor; overflow:visible; }
.cc-drawn-icon path { fill:none; stroke:currentColor; }
.cc-service-card strong { font-size:12px;text-transform:uppercase; }.cc-service-card small{font-size:9px;text-transform:uppercase;font-weight:800}
.cc-categories { padding:34px 0 38px;border-top:1px solid #e4eff7; }
.cc-heading { display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px; }.cc-heading a{font-size:12px;font-weight:800;color:#0788f7!important}
.cc-category-grid { display:grid;grid-template-columns:repeat(6,1fr);gap:14px; }
.cc-category { height:164px;background-size:cover;background-position:center;position:relative;overflow:hidden;box-shadow:0 8px 20px rgba(0,30,54,.14);clip-path:polygon(2% 1%,97% 0,100% 4%,99% 96%,96% 100%,3% 99%,0 95%,1% 5%); }
.cc-category:before,.cc-deal:before,.cc-story:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,20,38,.3),transparent 60%)}
.cc-category span { position:absolute;z-index:1;bottom:0;left:0;right:0;height:52px;padding:0 11px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent),#fff 10%));color:white;display:flex;align-items:center;gap:9px;font-size:13px;font-weight:800; }
.cc-category span i { width:34px;height:34px;border:1px solid white;border-radius:50%;display:grid;place-items:center;font-size:15px; }.cc-category span b{margin-left:auto;font-size:18px}
.cc-deals,.cc-stories { position:relative;background:linear-gradient(110deg,#003556,#002640);color:white;padding:58px 0 60px;margin:-20px 0;overflow:hidden;clip-path:polygon(0 4%,6% 2.5%,13% 4.2%,20% 2.2%,27% 3.8%,35% 2%,43% 4%,51% 2.4%,59% 3.9%,67% 2%,75% 4%,83% 2.5%,91% 4%,100% 2.2%,100% 96%,93% 98%,85% 96%,77% 98.4%,69% 96.2%,61% 98%,53% 96.3%,45% 98.5%,37% 96%,29% 98%,21% 96.4%,13% 98.3%,6% 96.2%,0 98%); }
.cc-deals .container,.cc-stories .container,.cc-footer .container{position:relative;z-index:1}.cc-heading-light h2,.cc-heading-light p,.cc-heading-light a{color:#fff!important}.cc-heading-light h2 i{color:var(--cc-yellow)}
.cc-deal-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px; }
.cc-deal { height:190px;border:2px solid rgba(255,255,255,.35);background-size:cover;background-position:center;position:relative;overflow:hidden;color:#fff!important;box-shadow:0 10px 20px rgba(0,0,0,.25);clip-path:polygon(1% 3%,4% 0,96% 1%,100% 5%,99% 94%,96% 100%,4% 98%,0 95%); }
.cc-deal:before { background:linear-gradient(0deg,rgba(0,20,35,.95),transparent 72%); }
.cc-deal>div { position:absolute;z-index:1;left:13px;right:40px;bottom:10px; }.cc-deal strong{font-size:17px}.cc-deal p{margin:2px 0 0;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-offer { position:absolute;z-index:2;top:10px;left:10px;padding:6px 12px;border-radius:6px;background:var(--cc-yellow);color:#07314f;font-size:10px;font-weight:900; }.cc-round-arrow{position:absolute;z-index:2;right:10px;bottom:12px;width:30px;height:30px;border-radius:50%;background:white;color:#0a3554;display:grid;place-items:center}
.cc-benefits { padding:38px 0; }.cc-benefit-layout{display:grid;grid-template-columns:1.3fr repeat(3,1fr) 1.25fr;gap:20px;align-items:center}.cc-why p{font-size:13px;line-height:1.5;margin:8px 0 14px;max-width:245px}.cc-why .cc-btn{padding:10px 20px}
.cc-benefit{text-align:center;padding:10px;border-right:1px solid #c8dce9}.cc-benefit i{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 auto 9px;background:#9bdcff;color:#002d4c;font-size:23px}.cc-benefit:nth-child(4) i{background:var(--cc-yellow)}.cc-benefit strong{display:block;line-height:1.05}.cc-benefit small{display:block;margin-top:10px;font-size:11px}
.cc-splash{background:#00345a;color:#fff;padding:28px 20px;text-align:center;font-size:24px;line-height:1.1;transform:rotate(-3deg);clip-path:polygon(5% 6%,95% 0,100% 88%,7% 100%,0 48%)}.cc-splash em{font-style:normal;color:#20aef7;font-size:30px;text-transform:uppercase}
.cc-story-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.cc-story{height:155px;border:1px solid #6db8df;background-size:cover;background-position:center;position:relative;overflow:hidden;clip-path:polygon(2% 1%,97% 0,100% 5%,98% 97%,94% 100%,3% 98%,0 94%,1% 4%)}.cc-story:before{background:linear-gradient(0deg,rgba(0,25,43,.9),transparent)}.cc-story span{position:absolute;z-index:1;bottom:15px;left:14px;right:14px;color:white;font-family:'Kalam';font-size:16px;line-height:1.05}.cc-story span small{display:block;margin-top:6px;font:10px 'Inter',sans-serif}.cc-submit-toggle{border:0;background:transparent;color:#fff;font-size:12px;font-weight:800}.cc-crew-empty{padding:30px;border:1px dashed rgba(255,255,255,.4);text-align:center;color:#bcd5e5}.cc-crew-form{display:none;grid-template-columns:1fr 1fr 2fr auto;gap:12px;align-items:end;margin-top:20px;padding:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);clip-path:polygon(1% 2%,99% 0,100% 94%,98% 100%,1% 98%,0 8%)}.cc-crew-form.is-open{display:grid}.cc-crew-form label{color:#fff;font-size:11px}.cc-crew-form input,.cc-crew-form select{display:block;width:100%;height:42px;margin-top:5px;padding:0 10px;border:0;border-radius:7px;background:#fff}.cc-crew-form .cc-btn{white-space:nowrap}.cc-crew-form .cc-crew-consent{grid-column:1/-1;display:flex;align-items:center;gap:8px}.cc-crew-form .cc-crew-consent input{width:16px;height:16px;margin:0}.cc-crew-message{grid-column:1/-1;margin:0;color:#fff;font-size:12px}
.cc-footer { background:#002b4b!important;color:#fff!important;padding:0!important;min-height:0!important;border:0;box-shadow:none!important;position:relative;overflow:hidden}.cc-support-strip{min-height:100px;border-bottom:1px solid rgba(255,255,255,.3);display:grid;grid-template-columns:1.35fr repeat(6,1fr);align-items:center;gap:0}.cc-support-strip>strong{text-transform:uppercase;font-family:'Kalam';font-size:17px}.cc-support-strip>strong i{color:var(--cc-yellow);margin-left:8px}.cc-support-strip span{text-align:center;border-left:1px solid rgba(255,255,255,.25);font-size:11px;font-weight:800}.cc-support-strip span .cc-drawn-icon{display:block;width:28px;height:28px;margin:0 auto 6px;color:#fff}
.cc-footer-main{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding:32px 0 24px}.cc-footer .footer-brand img{height:30px!important;margin:0 0 10px}.cc-footer .footer-brand p{font-size:12px;color:#bfd4e3}.cc-footer .footer-title{color:#fff}.cc-footer .footer-links a{color:#bfd4e3;font-size:12px}.cc-footer .footer-links a:hover{color:#fff}.cc-join{text-align:center;text-transform:uppercase;font-size:23px;transform:rotate(-7deg)}.cc-join i{color:var(--cc-yellow);margin-left:9px}.cc-footer .footer-bottom{border-top:1px solid rgba(255,255,255,.25);color:#91b0c5;padding:17px 0;margin:0;font-size:10px}.cc-footer .footer-bottom a{color:#bfd4e3}.cc-footer .footer-socials{display:flex;gap:17px}.cc-footer .footer-socials a{color:#fff;font-size:15px}
@media(max-width:991px){.cc-hero-media{inset:0;opacity:.38}.cc-hero-note{display:none}.cc-service-layout{grid-template-columns:1fr}.cc-category-grid{grid-template-columns:repeat(3,1fr)}.cc-deal-grid,.cc-story-grid{grid-template-columns:repeat(2,1fr)}.cc-benefit-layout{grid-template-columns:repeat(3,1fr)}.cc-why,.cc-splash{grid-column:span 3}.cc-support-strip{grid-template-columns:repeat(3,1fr);gap:20px;padding:25px 0}.cc-support-strip>strong{grid-column:span 3}.cc-support-strip span{border:0}.cc-footer-main{grid-template-columns:2fr 1fr 1fr}.cc-join{display:none}}
@media(max-width:991px){.cc-crew-form{grid-template-columns:1fr 1fr}.cc-crew-form label:nth-child(3),.cc-crew-form .cc-btn{grid-column:span 2}}
body:not(.page-home) .cc-support-strip,body:not(.page-home) .cc-join{display:none}.footer:not(.cc-footer) .cc-footer-main{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}.footer:not(.cc-footer) .footer-brand p{font-size:13px;color:rgba(0,0,0,.65)}
@media(max-width:767px){.cc-hero{margin-top:59px;min-height:570px}.cc-hero-inner{min-height:550px}.cc-kicker{font-size:27px}.cc-hero h1{font-size:42px}.cc-hero p br{display:none}.cc-service-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.cc-service-mini span{border:0}.cc-service-cards{grid-template-columns:repeat(3,1fr)}.cc-category-grid{display:flex;overflow:auto}.cc-category{min-width:170px}.cc-deal-grid,.cc-story-grid{display:flex;overflow:auto}.cc-deal,.cc-story{min-width:270px}.cc-benefit-layout{grid-template-columns:1fr}.cc-why,.cc-splash{grid-column:auto}.cc-benefit{border:0}.cc-heading{align-items:flex-start;gap:12px}.cc-heading h2{font-size:24px}.cc-heading a{white-space:nowrap}.cc-footer-main{grid-template-columns:1fr 1fr}.cc-footer-main .footer-brand{grid-column:span 2}.cc-support-strip{grid-template-columns:repeat(2,1fr)}.cc-support-strip>strong{grid-column:span 2}.cc-footer .footer-bottom{flex-direction:column}.footer:not(.cc-footer) .cc-footer-main{grid-template-columns:1fr}.footer:not(.cc-footer) .cc-footer-main .footer-brand{grid-column:auto}}

/* Static homepage: clear hierarchy, generous spacing and a branded card. */
.page-home .content { padding-bottom:0; min-height:0; }
.cc-home { background:#f6f9fc; }
.cc-home h1, .cc-home h2 { font-family:'Inter',sans-serif; text-transform:none; letter-spacing:-.045em; }
.cc-home h2 { font-size:30px; line-height:1.18; margin-bottom:12px; }
.cc-home h2:after { display:none; }
.cc-hero { min-height:0; margin-top:0; padding:64px 0 0; clip-path:none; background:#002b4b; }
.cc-hero:after { z-index:2; opacity:.025; }
.cc-hero-track { position:relative; z-index:1; }
.cc-hero .cc-hero-slide { display:block; width:100%; min-height:540px; overflow:hidden; background:#002b4b; }
.cc-hero .cc-hero-slide:not(.is-active) { position:absolute; }
.cc-hero .cc-hero-slide.is-active { position:relative; }
.cc-hero-original { background:radial-gradient(circle at 78% 45%,#17668d 0,transparent 35%),radial-gradient(circle at 12% 10%,#064f7b 0,transparent 38%),#002b4b!important; }
.cc-hero-original:before { content:""; position:absolute; inset:0; opacity:.18; background:linear-gradient(115deg,transparent 55%,#36b7ff1f),repeating-linear-gradient(125deg,transparent 0 50px,#ffffff08 51px 52px); }
.cc-hero-inner { position:relative; z-index:2; min-height:540px; gap:56px; padding-top:54px; padding-bottom:76px; }
.cc-hero-copy { flex:1; min-width:0; max-width:650px; text-shadow:none; }
.cc-kicker { font-family:'Inter',sans-serif!important; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#a9d5e9; transform:none; margin-bottom:20px; }
.cc-hero h1 { font-size:clamp(38px,4.5vw,62px); line-height:1.08; margin:0 0 24px; }
.cc-hero h1 span { color:#72d2ff; }
.cc-hero p { font-weight:400; color:#c6dce9; line-height:1.7; }
.cc-service-mini { margin:26px 0; flex-wrap:wrap; row-gap:14px; }
.cc-service-mini span { color:#c6dce9; }
.cc-btn { min-height:48px; border-radius:10px; padding:14px 20px; transition:background .2s,transform .2s; }
.cc-hero .cc-btn { min-height:56px; padding:16px 28px; font-size:15px; }
.cc-btn-primary { background:#0879d4; box-shadow:none; }
.cc-btn-primary:hover { background:#086abb; }
.cc-btn-ghost { background:transparent; border-color:#57768e; }
.cc-hero-feature { flex:0 1 420px; min-width:0; padding:20px 0; }
.cc-member-card { position:relative; display:flex; flex-direction:column; justify-content:space-between; aspect-ratio:1.586; padding:28px; border:1px solid #6d96ad; border-radius:22px; background:linear-gradient(125deg,#326f90,#103b59 65%,#082f4a); box-shadow:0 30px 55px #001a2d66; transform:rotate(-6deg); overflow:hidden; }
.cc-member-card:before { content:""; position:absolute; width:320px; height:320px; border:1px solid #ffffff12; border-radius:50%; right:-100px; bottom:-200px; box-shadow:0 0 0 35px #ffffff04,0 0 0 70px #ffffff04; }
.cc-card-topline,.cc-card-bottomline { position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:11px; color:#d2e6f0; }
.cc-card-topline { letter-spacing:.12em; text-transform:uppercase; }
.cc-card-topline span:last-child { font-size:23px; }
.cc-card-wordmark { position:relative; width:100%; height:auto; margin:22px 0; }
.cc-card-bottomline { line-height:1.6; }
.cc-card-bottomline strong { color:#fff; font-weight:600; }
.cc-card-bottomline svg { width:32px; height:32px; color:#b3d6e8; }
.cc-hero .cc-card-caption { margin:32px 0 0; text-align:center; font-size:12px; letter-spacing:.02em; }
.cc-card-caption span { color:#ffd400; margin-right:8px; }
.cc-hero-managed:before { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(90deg,#001827f2 0%,#001827d9 34%,#00182782 60%,#0018271f 100%),linear-gradient(0deg,#00182799,transparent 58%); }
.cc-hero-backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.015); }
.cc-hero-managed .cc-hero-inner { justify-content:flex-start; }
.cc-hero-managed .cc-hero-copy { padding:0; border:0; background:transparent; box-shadow:none; }
.cc-hero-managed .cc-kicker { color:#fff; }
.cc-hero-managed h2 { max-width:660px; margin:0 0 24px; color:#fff; font-size:clamp(38px,4.5vw,62px); line-height:1.04; text-wrap:balance; text-shadow:0 3px 28px rgba(0,10,18,.38); }
.cc-hero-managed .cc-hero-copy p { max-width:590px; color:#e1edf4; text-shadow:0 2px 16px rgba(0,10,18,.55); }
.cc-hero-managed .cc-btn-primary { background:var(--hero-accent,#0879d4); box-shadow:0 10px 30px #00132266; }
.cc-hero-managed .cc-btn-primary:hover { filter:brightness(1.12); }
.cc-hero-meta { margin:20px 0; color:#d0e7f3; font-size:13px; font-weight:700; }
.cc-hero-managed.has-no-image { background:radial-gradient(circle at 78% 35%,color-mix(in srgb,var(--hero-accent),transparent 30%),transparent 32%),#002b4b; }
.cc-hero-managed-mark { display:grid; place-items:center; width:280px; height:280px; margin-left:auto; border:1px solid #ffffff2e; border-radius:50%; color:#ffffffa8; font-size:92px; background:#ffffff0d; box-shadow:0 0 0 34px #ffffff08,0 0 0 68px #ffffff05; }
.cc-hero-nav { position:absolute; z-index:4; right:0; bottom:28px; left:0; justify-content:flex-start; padding:0 15px; }
.cc-hero-nav .promo-banner-dots { flex:0 1 auto; }
.cc-hero-nav .promo-banner-arrow { width:38px; height:38px; border:1px solid #ffffff38; background:#001c316b; color:#fff; box-shadow:none; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.cc-hero-nav .promo-banner-arrow:hover { background:#ffffff2e; }
.cc-hero-nav .promo-banner-dot { width:28px; height:4px; border-radius:4px; background:#ffffff52; }
.cc-hero-nav .promo-banner-dot.is-active { background:#fff; transform:none; }
.cc-services,.cc-categories,.cc-benefits { padding:56px 0; }
.cc-service-layout { grid-template-columns:300px minmax(0,1fr); gap:40px; }
.cc-intro p,.cc-heading p { color:#596d7e; line-height:1.65; }
.cc-service-card { clip-path:none; border-radius:14px; box-shadow:0 4px 14px #002b4b05; min-height:140px; }
.cc-service-card:after { display:none; }
.cc-service-card small { margin-top:3px; color:#596d7e; }
.cc-heading { gap:24px; margin-bottom:26px; }
.cc-heading a { color:#086bb6!important; }
.cc-heading-light a { color:#a5dfff!important; }
.cc-category,.cc-deal,.cc-story { clip-path:none; border-radius:14px; transition:transform .2s,box-shadow .2s; }
.cc-category { height:190px; box-shadow:none; }
.cc-category span { background:#002b4be8; height:54px; }
.cc-category span i { border:0; width:20px; }
.cc-category:hover,.cc-deal:hover { transform:translateY(-4px); box-shadow:0 12px 24px #002b4b24; }
.cc-deals,.cc-stories { clip-path:none; margin:0; padding:56px 0; }
.cc-deals:after,.cc-stories:after,.cc-footer:after { opacity:.035; }
.cc-deal { height:225px; border:1px solid #ffffff33; box-shadow:none; background-color:#164966; }
.cc-deal>div { left:18px; bottom:18px; }
.cc-deal p { font-size:12px; white-space:normal; line-height:1.5; }
.cc-benefit small { font-size:12px; line-height:1.6; color:#596d7e; }
.cc-why p { line-height:1.7; }
.cc-story { height:210px; }
.cc-crew-empty { border-radius:14px; padding:40px 24px; }
.cc-home a:focus-visible,.cc-home button:focus-visible { outline:3px solid #e9b900; outline-offset:4px; }
@media(max-width:991px) {
 .cc-hero .cc-hero-slide,.cc-hero-inner { min-height:560px; }
 .cc-hero-inner { gap:28px; padding-top:52px; padding-bottom:82px; }
 .cc-hero-feature { flex-basis:310px; }
 .cc-member-card { padding:20px; }
 .cc-service-layout { grid-template-columns:1fr; gap:24px; }
 .cc-heading { flex-wrap:wrap; }
}
@media(max-width:767px) {
 .cc-hero { min-height:0; }
 .cc-hero .cc-hero-slide { min-height:670px; }
 .cc-hero-inner { min-height:670px; flex-direction:column; align-items:stretch; justify-content:center; padding-top:54px; padding-bottom:92px; gap:20px; }
 .cc-hero h1 { font-size:clamp(36px,8vw,52px); }
 .cc-service-mini { display:none; }
 .cc-actions { margin-top:24px; }
 .cc-hero .cc-btn { min-height:52px; padding:14px 22px; font-size:14px; }
 .cc-hero-feature { flex-basis:auto; width:min(100%,380px); align-self:center; padding:16px 14px 0; }
 .cc-hero-managed:before { background:linear-gradient(0deg,#001c31fa 0%,#001c31dc 62%,#001c3166 100%); }
 .cc-hero-backdrop { object-position:center top; }
 .cc-hero-managed .cc-hero-copy { margin-top:auto; padding:0; }
 .cc-hero-managed h2 { font-size:clamp(34px,9vw,46px); }
 .cc-hero-managed-mark { display:none; }
 .cc-hero-nav { bottom:18px; justify-content:center; }
 .cc-card-topline { font-size:9px; }
 .cc-hero .cc-card-caption { margin-top:24px; }
 .cc-services,.cc-categories,.cc-benefits,.cc-deals,.cc-stories { padding:36px 0; }
 .cc-home h2 { font-size:26px; }
 .cc-heading { gap:10px; margin-bottom:22px; }
 .cc-category-grid,.cc-deal-grid,.cc-story-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; overflow:visible; }
 .cc-category,.cc-deal,.cc-story { min-width:0; }
 .cc-category { height:170px; }
 .cc-category span { padding:0 10px; gap:6px; font-size:12px; }
 .cc-deal { height:210px; }
 .cc-deal strong { font-size:14px; }
 .cc-deal>div { left:12px; right:12px; bottom:45px; }
 .cc-benefit { display:grid; grid-template-columns:52px 1fr; column-gap:16px; text-align:left; padding:14px 0; }
 .cc-benefit i { grid-row:span 2; margin:0; }
 .cc-benefit strong { line-height:1.3; }
 .cc-benefit strong br { display:none; }
 .cc-benefit small { margin-top:4px; }
 .cc-why p { max-width:100%; }
}

/* Unified CadetCard public design system ---------------------------------- */
:root {
 --cc-navy:#002b4b;
 --cc-navy-deep:#001f37;
 --cc-blue:#086bb6;
 --cc-blue-bright:#1343de;
 --cc-blue-pale:#edf5fb;
 --cc-blue-line:#d5e5f0;
 --cc-page:#f7fafc;
 --cc-ink:#12344d;
 --cc-muted:#596d7e;
 --cc-card:#fff;
 --cc-card-radius:16px;
 --cc-card-shadow:0 12px 32px rgba(0,43,75,.07);
}
html,body{background:var(--cc-page);color:var(--cc-ink)}
body{background-image:radial-gradient(circle at 8% 12%,rgba(8,107,182,.055),transparent 24rem),radial-gradient(circle at 94% 38%,rgba(19,67,222,.035),transparent 28rem)}
.content.pageAjax{min-height:calc(100vh - 300px)}

/* The homepage navigation and footer now frame every public page. */
.navbar{background:rgba(0,43,75,.98)!important;border-bottom:1px solid rgba(255,255,255,.12)!important;box-shadow:0 7px 24px rgba(0,31,55,.13)!important;backdrop-filter:blur(14px)}
.navbar .nav-link,.navbar .navbar-toggler{color:#fff!important}.navbar .nav-link{border-radius:8px;font-weight:650}.navbar .nav-link:hover,.navbar .nav-item.show>.nav-link{background:rgba(255,255,255,.1)!important;color:#fff!important}.navbar .navbar-toggler-icon{filter:brightness(0) invert(1)}
.navbar .blue-cta,.navbar .btn-primary{background:#fff!important;color:var(--cc-navy)!important}
.footer.cc-footer{margin-top:64px!important;background:var(--cc-navy)!important;color:#fff!important}.footer.cc-footer a,.footer.cc-footer p,.footer.cc-footer .footer-title{color:#fff}.footer.cc-footer .footer-links a{opacity:.76}.footer.cc-footer .footer-links a:hover{opacity:1}.footer.cc-footer .footer-bottom{border-color:rgba(255,255,255,.16)}

/* Shared page typography and blue details. */
.pageAjax :is(.blog-title,.contentTitle,.settings-content-header h2,.id-check-title,.shop-section-title,.checkout-title,.tickets-title,.help-category-header .contentTitle,.giveaway-detail-title){color:var(--cc-ink);font-weight:780;letter-spacing:-.025em}
.pageAjax :is(.blog-subtitle,.settings-content-header p,.shop-section-subtitle,.help-category-header p,.id-check-subtitle){color:var(--cc-muted);line-height:1.65}
.pageAjax :is(.blog-header,.settings-content-header,.shop-section-header,.help-category-header,.id-check-header){position:relative}
.pageAjax :is(.blog-header,.settings-content-header,.shop-section-header,.help-category-header,.id-check-header):after{content:"";display:block;width:48px;height:3px;margin-top:15px;border-radius:99px;background:linear-gradient(90deg,var(--cc-blue),var(--cc-blue-bright))}
.pageAjax a:not(.btn):not(.nav-link):not(.dropdown-item){text-decoration-color:rgba(8,107,182,.35)}
.pageAjax a:not(.btn):not(.nav-link):not(.dropdown-item):hover{color:var(--cc-blue)}

/* Consistent surfaces across editorial, account, support and commerce. */
.pageAjax :is(.blog-card,.article-card,.help-category,.settings-sidebar,.settings-content,.settings-section,.settings-billing-card,.settings-address-card,.settings-card-item,.tickets-sidebar,.tickets-content,.id-check-card,.checkout-card,.checkout-summary,.product-panel,.product-details,.giveaway-detail-card,.crew-upload-panel,.card){border:1px solid var(--cc-blue-line);border-radius:var(--cc-card-radius);background:var(--cc-card);box-shadow:none}
.pageAjax :is(.blog-card,.help-category,.settings-address-card,.settings-card-item,.giveaway-card,.shop-product-card){transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.pageAjax :is(.blog-card,.help-category,.settings-address-card,.settings-card-item,.giveaway-card,.shop-product-card):hover{border-color:#abcbdc;box-shadow:var(--cc-card-shadow);transform:translateY(-2px)}
.blog-card-image,.article-hero,.giveaway-card-image,.shop-product-image{background-color:#dfeef7}
.blog-card-meta,.article-meta,.blog-page-status{color:var(--cc-blue)}
.blog-card-title,.article-title{color:var(--cc-ink)}
.article-card{overflow:hidden}.article-body a{color:var(--cc-blue)}

/* Form controls and actions share one interaction language. */
.pageAjax :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border:1px solid #bdcfdc!important;border-radius:10px!important;background:#fff;color:var(--cc-ink);box-shadow:none!important}
.pageAjax :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{border-color:var(--cc-blue)!important;outline:0!important;box-shadow:0 0 0 3px rgba(8,107,182,.11)!important}
.pageAjax :is(.blue-cta,.cc-btn-primary,.shop-cta,.giveaway-enter-btn,.settings-full-button,.id-check-submit){border:0!important;border-radius:10px!important;background:linear-gradient(135deg,var(--cc-blue),var(--cc-blue-bright))!important;color:#fff!important;box-shadow:0 7px 18px rgba(8,107,182,.18)!important}
.pageAjax :is(.blue-cta,.cc-btn-primary,.shop-cta,.giveaway-enter-btn,.settings-full-button,.id-check-submit):hover{filter:brightness(.96);transform:translateY(-1px);box-shadow:0 10px 22px rgba(8,107,182,.22)!important}
.pageAjax :is(input[type=checkbox],input[type=radio]){accent-color:var(--cc-blue)}

/* Account and support areas. */
.settings-page,.tickets-page,.id-check-page,.blog-page,.article-page,.crew-upload-page,.checkout-page,.product-page{padding-bottom:56px}
.settings-page .settings-sidebar{overflow:hidden}.settings-page .settings-nav-item{border-radius:9px}.settings-page .settings-nav-item:hover{background:var(--cc-blue-pale);color:var(--cc-blue)}.settings-page .settings-nav-item.active{background:var(--cc-navy)!important;color:#fff!important}.settings-page .settings-nav-item.active i{color:#fff!important}.settings-page .settings-avatar{box-shadow:0 0 0 4px var(--cc-blue-pale)}
.tickets-page .tickets-header,.settings-page .settings-content-header{border-color:var(--cc-blue-line)}
.help-category-icon,.id-check-icon{color:var(--cc-blue)!important;background:var(--cc-blue-pale)!important}.help-category{overflow:hidden}.help-category:hover{color:var(--cc-ink)}

/* Shop, checkout and giveaway pages receive the same pale-blue rhythm. */
.shop-page,.checkout-page{background:transparent}.shop-hero,.giveaways-header,.discover-header{background:linear-gradient(145deg,#edf5fb,#f7faff)!important;border-bottom:1px solid var(--cc-blue-line)}
.shop-filters,.checkout-panel{border:1px solid var(--cc-blue-line);border-radius:var(--cc-card-radius);background:#fff}.shop-filter-select{background-color:#fff}.shop-price,.product-price,.checkout-total{color:var(--cc-blue)!important}.shop-category-tile.is-active{border-color:var(--cc-blue)!important;background:var(--cc-blue-pale)!important}.giveaway-status,.shop-badge{background:var(--cc-navy)!important;color:#fff!important}
.discover-category-link,.discover-brand-card,.discover-discount-card,.category-brand,.category-feature{border-color:var(--cc-blue-line)}.discover-category-link:hover,.discover-brand-card:hover,.discover-discount-card:hover{border-color:#a9cddd}.discover-section-heading h2:after,.category-section-head h2:after{content:"";display:block;width:32px;height:2px;margin-top:7px;border-radius:9px;background:var(--cc-blue)}

/* Simple content pages no longer feel like unstyled documents. */
.pageAjax>.container:not(.discover-page):not(.settings-page):not(.blog-page):not(.article-page):not(.crew-upload-page){position:relative}
.page-privacy .pageAjax>.container,.page-terms .pageAjax>.container,.page-add-business .pageAjax>.container,.page-sign-up .pageAjax>.container{max-width:900px;padding:104px 32px 54px}
.page-privacy .pageAjax>.container>h1,.page-terms .pageAjax>.container>h1,.page-add-business .pageAjax>.container>h1,.page-sign-up .pageAjax>.container>h1{color:var(--cc-ink);font-weight:780;letter-spacing:-.03em}
.page-privacy .pageAjax>.container,.page-terms .pageAjax>.container{line-height:1.75}.page-privacy .pageAjax>.container h2,.page-terms .pageAjax>.container h2{margin-top:30px;color:var(--cc-navy);font-size:21px}

/* All public modals match the same calm blue system. */
body>.modal .modal-content{overflow:hidden;border:1px solid var(--cc-blue-line);border-radius:16px;box-shadow:0 28px 80px rgba(0,31,55,.22)}
body>.modal .modal-header{border-color:var(--cc-blue-line)}body>.modal .modal-title{color:var(--cc-ink);font-weight:750}body>.modal .modal-footer{border-color:var(--cc-blue-line);background:#f8fbfd}

@media(max-width:767px){.navbar{background:var(--cc-navy)!important}.footer.cc-footer{margin-top:38px!important}.crew-admin-summary{overflow-x:auto}.pageAjax :is(.blog-header,.settings-content-header,.shop-section-header,.help-category-header,.id-check-header):after{margin-top:11px}.page-privacy .pageAjax>.container,.page-terms .pageAjax>.container,.page-add-business .pageAjax>.container,.page-sign-up .pageAjax>.container{padding-left:18px;padding-right:18px}}
@media(prefers-reduced-motion:reduce) {
 .cc-home a { transition:none; }
 .cc-home a:hover { transform:none; }
}


.signupWindow {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    border-radius: 7px;
    position: relative;
    min-height: calc(100vh - 100px);
    margin-bottom: 20px;
    overflow: hidden;
}

    .signupWindow .col-xs-12 {
        min-height: calc(100vh - 100px);
        overflow: hidden;
    }

    .signupWindow .col-xs-12:first-child {
        box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.1);
        background: rgba(255, 255, 255, 0.55);
    }

    .signupWindow .col-xs-12:last-child {
        background: rgba(0, 0, 0, 0.05);
    }

    .signupWindow .signup-header {
        font-weight: 700;
        width: 100%;
        font-size: 28px;
        margin-bottom: 10px;
        text-align: center;
    }

    .signupWindow .signup-desc {
        width: 100%;
        text-align: center;
        font-weight: 600;
        font-size: 1rem;
        opacity: 1;
        margin-bottom: 30px;
    }

    .bankCard {
        --w: 340px;
        --h: 190px;
        width: var(--w);
        height: var(--h);
        border-radius: 18px;
        background: linear-gradient(135deg, #fefefe, #e6e6e6);
        box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.6);
        overflow: hidden;
        color: #111;
        letter-spacing: 0.4px;
        padding: 20px;
        box-sizing: border-box;
        filter: grayscale(1);
        display: inline-block;
        vertical-align: top;
        opacity: 0.5;
        flex: 0 0 auto;
        position: relative;
        border: 1px solid rgba(0, 0, 0, 0.08);
        background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(230, 230, 230, 0.9));
      }
      
      .bankCard .chip {
        width: 48px;
        height: 36px;
        border-radius: 6px;
        background: linear-gradient(180deg, #e8e8e8, #9e9e9e);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
      }
      
      .bankCard .card-number {
        font-size: 18px;
        letter-spacing: 3px;
        margin-top: 24px;
        font-weight: 600;
      }
      
      .bankCard .card-holder {
        font-size: 13px;
        text-transform: uppercase;
        margin-top: 18px;
        font-weight: 600;
      }
      
      .bankCard .expiry {
        font-size: 13px;
        margin-top: 4px;
      }
      
      .bankCard .brand {
        text-align: right;
        position: absolute;
        top: 19px;
        right: 0;
        padding: 4px 21px;
      }
      
      .bankCard .brand img {
        max-height: 32px;
        width: auto;
      }
      
      /* Hide scrollbars globally */
      .bankCardSection::-webkit-scrollbar {
        display: none;
      }
      .bankCardSection {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      
      /* Main wrapper for all rows */
      .bankCardsWrapper {
        display: flex;
        flex-direction: column;
        gap: 25px;
        overflow: hidden;
        width: 100%;
        top: 50%;
        transform: translateY(-50%) rotate(-6deg);
        position: absolute;
      }
      
      /* Each row container */
      .bankCardSection {
        position: relative;
        overflow: hidden;
        width: 100%;
        mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
      }
      
      /* The moving track of cards (two sets duplicated for seamless looping) */
      .bankCardsTrack {
        display: flex;
        gap: 20px;
        animation: scrollInfinite 30s linear infinite;
        will-change: transform;
      }
      
      /* The seamless animation (scroll half the length since duplicated) */
      @keyframes scrollInfinite {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }
      
      /* Different speed variations */
      .slow .bankCardsTrack {
        animation-duration: 60s;
        animation-delay: -10s;
      }
      .medium .bankCardsTrack {
        animation-duration: 60s;
        animation-delay: -20s;
      }

.help-category {
    transition: all 0.23s ease-in-out;
    border-radius: 10px;
    padding: 10px 20px;
    text-align: center;
    margin-bottom: 30px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(8px) saturate(140%);
}

    .help-category:hover {
        background: rgba(255, 255, 255, 0.95);
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.04);
        cursor: pointer;
    }

    .help-category-icon {
        font-size: 23px;
        width: 45px;
        height: 45px;
        border-radius: 8px;
        background: linear-gradient(135deg, rgba(199, 211, 249, 0.9), rgba(214, 232, 255, 0.8));
        display: inline-block;
        vertical-align: top;
        color: #1343DE;
        position: relative;
        margin-top: 10px;
        margin-bottom: 10px;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    }

        .help-category-icon i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

    .help-category-name {
        font-size: 20px;
        font-weight: 600;
        margin-top: 5px;
        margin-bottom: 10px;
    }
    
    .help-category-description {
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 10px;
        opacity: 0.8;
    }
    
.header-title-small {
    font-weight: 700;
    font-size: 42px;
    line-height: 1.1;
    margin-top: 30px;
    margin-bottom: 15px;
}

.header-description-small {
    max-width: 600px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    font-weight: 500;
    margin-bottom: 30px;
}

.help-header {
    margin-bottom: 25px;
    margin-left: 0px;
    margin-right: 0px;
}

.help-header-inner {
    text-align: center;
    padding: 28px 18px 22px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(8px) saturate(140%);
}

.help-header-inner .header-title-small {
    margin-top: 6px;
    margin-bottom: 10px;
    font-size: 40px;
}

.help-header-inner .header-description-small {
    margin-bottom: 10px;
    font-weight: 500;
    opacity: 0.8;
}

.help-back {
    display: flex;
    justify-content: center;
}

.help-back .blue-cta {
    padding: 10px 26px;
    font-size: 14px;
    background: rgba(19, 67, 222, 0.1);
    color: #1343DE;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.help-back .blue-cta:hover {
    background: rgba(19, 67, 222, 0.18);
    color: #0f2fa8;
}

.help-back .blue-cta i {
    position: static;
    transform: none;
}

.help-category-header {
    text-align: center;
    margin-bottom: 22px;
}

.help-category-header .contentTitle {
    margin-bottom: 8px;
    font-size: 26px;
}

.help-category-header p {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.help-ticket-cta {
    text-align: center;
    margin-bottom: 40px;
    padding: 24px 20px;
    border-radius: 14px;
    width: 100%;
}

.support-ticket-header {
    margin-bottom: 25px;
    margin-left: 0px;
    margin-right: 0px;
}

.support-ticket-header-inner {
    text-align: center;
    padding: 28px 18px 22px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(8px) saturate(140%);
}

.support-ticket-header-inner .header-title-small {
    margin-top: 6px;
    margin-bottom: 10px;
    font-size: 40px;
}

.support-ticket-header-inner .header-description-small {
    margin-bottom: 10px;
    font-weight: 500;
    opacity: 0.8;
}

.support-ticket-card {
    max-width: 760px;
    margin: 0 auto 40px;
    padding: 24px 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(8px) saturate(140%);
}

.support-ticket-card .support-ticket-form {
    margin: 0;
}

.support-ticket-modal .modal-content {
    border-radius: 16px;
    border: none;
}

.support-ticket-modal {
    max-width: 600px;
}

.support-ticket-modal .modal-body {
    padding: 16px 18px 20px;
}

.support-ticket-modal .support-ticket-modal-header {
    text-align: center;
    margin-bottom: 12px;
}

.support-ticket-modal .header-title-small {
    font-size: 28px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.support-ticket-card-header {
    font-weight: 600;
    font-size: 18px;
    padding: 13px 17px;
    margin: -16px -18px 16px;
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.support-ticket-success {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(30, 132, 73, 0.12);
    color: #1e8449;
    font-size: 13px;
    font-weight: 600;
}

.support-ticket-modal .support-ticket-row {
    margin-left: -8px;
    margin-right: -8px;
}

.support-ticket-modal .support-ticket-row .col-md-6,
.support-ticket-modal .support-ticket-row .col-xs-12 {
    padding-left: 8px;
    padding-right: 8px;
}

.id-check-page {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    padding-top: 40px;
}

.id-check-header {
    margin-bottom: 28px;
}

.id-check-title {
    font-weight: 700;
    font-size: 42px;
    line-height: 1.1;
    margin-top: 20px;
    margin-bottom: 12px;
}

.id-check-subtitle {
    font-weight: 500;
    max-width: 680px;
    margin: 0 auto;
    opacity: 0.8;
}

.id-check-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 26px 24px 30px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px) saturate(140%);
}

.id-check-status {
    padding: 14px 16px;
    border-radius: 12px;
    font-weight: 600;
    margin-bottom: 18px;
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.75);
}

.id-check-status.success {
    background: rgba(46, 204, 113, 0.12);
    color: #1e8449;
}

.id-check-status.processing {
    background: transparent;
    color: rgba(0, 0, 0, 0.75);
}

.id-check-status.declined {
    background: rgba(231, 76, 60, 0.14);
    color: #c0392b;
}

.id-check-status-link {
    display: inline-block;
    margin-left: 8px;
    color: inherit;
    text-decoration: underline;
}

.id-check-status-note {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
}

.id-check-tracker {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin: 20px auto 8px;
    max-width: 100%;
    width: 100%;
    padding: 6px 0;
    border-radius: 14px;
}

.id-check-step {
    position: relative;
    flex: 1;
    text-align: center;
    color: rgba(0, 0, 0, 0.65);
}

.id-check-step::after {
    content: "";
    position: absolute;
    top: 16px;
    left: calc(50% + 20px);
    width: calc(100% - 18px);
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.08));
    z-index: 0;
}

.id-check-step:last-child::after {
    display: none;
}

.id-check-step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.5);
    font-size: 13px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 1;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.id-check-step-label {
    font-size: 13px;
    font-weight: 600;
}

.id-check-step.complete .id-check-step-dot {
    background: rgba(46, 204, 113, 0.22);
    color: #1e8449;
}

.id-check-step.current .id-check-step-dot {
    background: rgba(19, 67, 222, 0.18);
    color: #1343DE;
}

.id-check-step.pending .id-check-step-dot {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.4);
}

.id-check-step.complete::after {
    background: linear-gradient(90deg, rgba(46, 204, 113, 0.6), rgba(46, 204, 113, 0.2));
}

.id-check-step.current::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.08));
}

@media (max-width: 640px) {
    .id-check-tracker {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .id-check-step {
        width: 100%;
        max-width: 260px;
    }

    .id-check-step::after {
        display: none;
    }
}

.id-check-card-title {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 18px;
}

.id-check-card-title.is-hidden {
    display: none;
}

.id-check-options {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 26px;
    flex-wrap: wrap;
    width: 100%;
}

.id-check-options.is-hidden {
    display: none;
}

.id-check-option {
    width: 220px;
    border: none;
    background: rgba(19, 67, 222, 0.08);
    color: #0f2fa8;
    border-radius: 14px;
    padding: 18px 16px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    transition: all 0.23s ease-in-out;
    box-shadow: inset 0 0 0 1px rgba(19, 67, 222, 0.2), 0 10px 22px rgba(0, 0, 0, 0.06);
}

.id-check-option:hover {
    cursor: pointer;
    background: rgba(19, 67, 222, 0.14);
    transform: translateY(-2px);
}

.id-check-option.is-selected {
    background: rgba(19, 67, 222, 0.18);
    box-shadow: inset 0 0 0 2px rgba(19, 67, 222, 0.5), 0 12px 24px rgba(0, 0, 0, 0.08);
}

.id-check-option-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #1343DE;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.id-check-option-text {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.8);
}

.id-check-upload {
    text-align: center;
}

.id-check-upload-title {
    font-weight: 600;
    margin-bottom: 6px;
}

.id-check-upload-subtitle {
    font-size: 14px;
    opacity: 0.7;
    margin-bottom: 16px;
}

.id-check-upload-area {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 22px 26px;
    border-radius: 14px;
    border: 1px dashed rgba(19, 67, 222, 0.45);
    background: rgba(19, 67, 222, 0.06);
    color: rgba(0, 0, 0, 0.75);
    width: 100%;
    transition: all 0.23s ease-in-out;
}

.id-check-upload-area:hover {
    cursor: pointer;
    background: rgba(19, 67, 222, 0.12);
    border-color: rgba(19, 67, 222, 0.7);
}

.id-check-upload-input {
    display: none;
}

.id-check-upload-icon {
    font-size: 24px;
    color: #1343DE;
}

.id-check-upload-text {
    font-weight: 600;
}

.id-check-upload-hint {
    font-size: 12px;
    opacity: 0.6;
}

.id-check-preview {
    margin-top: 16px;
    display: none;
    text-align: left;
}

.id-check-preview.is-visible {
    display: block;
}

.id-check-preview-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
}

.id-check-preview-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.04);
}

.id-check-preview-media {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.id-check-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.id-check-preview-image.is-visible {
    display: block;
}

.id-check-preview-icon {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.5);
    display: none;
}

.id-check-preview-icon.is-visible {
    display: block;
}

.id-check-preview-name {
    font-weight: 600;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.75);
    word-break: break-word;
}

.id-check-actions {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.id-check-submit {
    width: 100%;
    text-align: center;
}

.id-check-upload.is-hidden {
    display: none;
}

.id-check-actions.is-hidden {
    display: none;
}

.id-check-form.is-hidden {
    display: none;
}

@media (max-width: 640px) {
    .id-check-options {
        flex-direction: column;
        align-items: stretch;
    }

    .id-check-option {
        width: 100%;
    }
}

.id-check-submit i {
    position: static;
    transform: none;
}

.id-check-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 2px;
    border-radius: 10px;
    background: transparent;
    color: rgba(0, 0, 0, 0.65);
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

.id-check-secondary:hover {
    background: transparent;
    color: rgba(0, 0, 0, 0.9);
}

.id-check-help {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}

.id-check-prompt {
    margin-top: 12px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.75);
}

.id-check-prompt.error {
    color: #c0392b;
}

.id-check-prompt.success {
    color: #1e8449;
}

.settings-page .settings-sidebar {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(8px) saturate(140%);
}

.settings-page .settings-user {
    text-align: center;
    margin-bottom: 18px;
}

.settings-page .settings-avatar {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    margin: 0 auto 10px;
    overflow: hidden;
    background: linear-gradient(126deg, rgba(81, 129, 160, 1) 0%, rgba(78, 116, 121, 1) 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
}

.settings-page .settings-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
}

.settings-page .settings-avatar-text {
    line-height: 1;
}

.settings-page .settings-name {
    font-weight: 700;
    font-size: 18px;
}

.settings-page .settings-email {
    font-size: 13px;
    opacity: 0.65;
}

.settings-page .settings-nav-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.6;
    margin-bottom: 8px;
}

.settings-page .settings-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    color: rgba(0, 0, 0, 0.75);
    font-weight: 500;
    margin-bottom: 6px;
    transition: all 0.2s ease-in-out;
}

.settings-page .settings-nav-item i {
    width: 16px;
    text-align: center;
    opacity: 0.7;
    margin-right: 6px;
    transition: opacity 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.settings-page .settings-nav-divider {
    height: 1px;
    margin: 10px -20px 12px;
    width: calc(100% + 40px);
    background: rgba(0, 0, 0, 0.08);
}

.settings-page .settings-avatar-row {
    margin-left: -18px;
    margin-right: -18px;
    padding-left: 18px;
    padding-right: 18px;
}

.settings-page .settings-nav-item:hover,
.settings-page .settings-nav-item.active {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.95);
}

.settings-page .settings-nav-item:hover i,
.settings-page .settings-nav-item.active i {
    opacity: 0.8;
}

.settings-page .settings-content {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(8px) saturate(140%);
}

.settings-page .settings-content-header {
    margin-bottom: 12px;
}

.settings-page .settings-content-header h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}

.settings-page .settings-content-header p {
    font-size: 14px;
    opacity: 0.7;
    margin-bottom: 14px;
}

.settings-page .settings-section {
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 12px 14px;
    margin-bottom: 22px;
    background: rgba(255, 255, 255, 0.65);
}

.settings-page .settings-form {
    padding: 18px;
}

.settings-page .settings-avatar-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.settings-page .settings-avatar-row .settings-avatar {
    margin: 0;
}

.settings-page .settings-avatar-large {
    width: 72px;
    height: 72px;
    font-size: 20px;
}

.settings-page .settings-avatar-actions {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.settings-page .settings-avatar-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-page .settings-avatar-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 14px;
}

.settings-page .settings-avatar-button i {
    position: static;
    transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
    margin-top: 1px;
}

.settings-page .settings-avatar-remove {
    border: none;
    background: #c0392b;
    color: #ffffff;
    font-weight: 600;
    margin-left: 0;
    padding: 8px 16px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.settings-page .settings-avatar-remove:hover {
    background: #a93226;
    color: #ffffff;
    cursor: pointer;
}

.settings-page .settings-avatar-remove i {
    position: static;
    transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
    margin-top: 1px;
}

.settings-page .settings-avatar-hint {
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.6;
}

.settings-page .settings-avatar-input {
    display: none;
}

.settings-page .settings-form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.settings-page .settings-form-row + .settings-info-grid {
    margin-left: -18px;
    margin-right: -18px;
    padding-left: 18px;
    padding-right: 18px;
}

.settings-page .settings-field {
    flex: 1 1 220px;
}

.settings-page .settings-field-full {
    flex: 1 1 100%;
}

.settings-page .settings-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.settings-page .settings-field input {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 10px 12px;
    font-size: 14px;
    background: #ffffff;
}

.settings-page .settings-field select {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 10px 12px;
    font-size: 14px;
    background: #ffffff;
    appearance: none;
}


.settings-page .settings-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    padding: 12px 0 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 10px;
}

.settings-page .settings-info-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0.6;
    margin-bottom: 4px;
}

.settings-page .settings-info-value {
    font-weight: 600;
}

.settings-page .settings-form-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 10px;
}

.settings-page .settings-full-button {
    width: 100%;
    display: block;
}

.settings-page .settings-form-prompt {
    font-size: 13px;
    font-weight: 600;
    width: 100%;
    text-align: center;
    margin-top: 10px;
}

.settings-page .settings-form-prompt.error {
    color: #c0392b;
}

.settings-page .settings-form-prompt.success {
    color: #27ae60;
}

.settings-page .settings-billing,
.settings-page .settings-addresses {
    display: grid;
    gap: 18px;
}

.settings-page .settings-billing-card {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.settings-page .settings-billing-cta {
    text-align: center;
    padding: 24px 22px;
}

.settings-page .settings-billing-cta-icons {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.settings-page .settings-billing-cta-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}

.settings-page .settings-billing-cta-sub {
    font-size: 13px;
    opacity: 0.7;
    margin-bottom: 18px;
}

.settings-page .settings-billing-list .settings-billing-header {
    margin-bottom: 12px;
}

.settings-page .settings-billing-list .settings-card-item {
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
}

.settings-page .settings-billing-list .settings-card-thumb {
    width: 56px;
    height: 36px;
    border-radius: 10px;
}

.settings-page .settings-billing-list .settings-card-thumb img {
    width: 75%;
    height: 75%;
}

.settings-page .settings-address-card {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.settings-page .settings-address-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.settings-page .settings-link-button {
    border: none;
    background: transparent;
    color: #1343DE;
    font-weight: 600;
    font-size: 12px;
}

.settings-page .settings-link-button:hover {
    color: #11319c;
    cursor: pointer;
}


.settings-page .settings-billing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.settings-page .settings-billing-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 4px;
}

.settings-page .settings-billing-prompt {
    font-size: 13px;
    font-weight: 600;
    color: #c0392b;
    margin-bottom: 8px;
}

.settings-page .settings-card-list {
    display: grid;
    gap: 12px;
}

.settings-page .settings-card-options {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
}

.settings-page .settings-card-option {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: grid;
    gap: 12px;
    grid-template-rows: auto auto auto 1fr auto;
}

.settings-page .settings-card-option-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
}

.settings-page .settings-card-option-title {
    font-weight: 700;
    font-size: 16px;
}

.settings-page .settings-card-option-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(30, 132, 73, 0.12);
    color: #1e8449;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.settings-page .settings-card-option-pill.paid {
    background: rgba(19, 67, 222, 0.12);
    color: #1343DE;
}

.settings-page .settings-card-option-body {
    font-size: 13px;
    opacity: 0.75;
    min-height: 40px;
}

.settings-page .settings-card-price {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 16px;
    color: #0f2fa8;
    margin: 10px 0 14px;
}

.settings-page .settings-card-shipping {
    font-size: 12px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
}

.settings-page .settings-card-spacer {
    min-height: 34px;
}

.settings-page .settings-card-preview {
    border-radius: 16px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(19, 67, 222, 0.18), rgba(19, 67, 222, 0.05));
    border: 1px solid rgba(19, 67, 222, 0.2);
    color: #0f2fa8;
    display: grid;
    gap: 6px;
}

.settings-page .settings-card-preview-digital {
    padding: 0;
    background: transparent;
    border: none;
}

.settings-page .settings-card-image {
    width: 100%;
    max-width: 320px;
    margin: 10px auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.settings-page .settings-card-image-muted {
    filter: grayscale(0);
}

.settings-page .settings-digital-card {
    width: 100%;
    max-width: 320px;
    margin: 10px auto;
    opacity: 1;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.settings-page .settings-card-preview.physical {
    background: linear-gradient(135deg, rgba(17, 49, 156, 0.14), rgba(0, 0, 0, 0.05));
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.8);
}

.settings-page .settings-card-preview-title {
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 12px;
}

.settings-page .settings-card-preview-id {
    font-weight: 700;
    font-size: 18px;
}

.settings-page .settings-card-preview-name {
    font-size: 12px;
    opacity: 0.8;
}

.settings-page .settings-card-option .blue-cta i {
    margin-right: 6px;
}

.settings-page .settings-card-option .blue-cta,
.settings-page .settings-card-option .settings-card-link {
    min-height: 40px;
}

.settings-page .settings-card-link {
    border: none;
    background: transparent;
    color: #c0392b;
    font-weight: 600;
    font-size: 12px;
    text-align: left;
}

.settings-page .settings-card-link i {
    margin-right: 6px;
}

.settings-page .settings-card-link:hover {
    color: #a93226;
    cursor: pointer;
}

@media (min-width: 992px) {
    .settings-page .settings-card-options {
        grid-template-columns: 1fr 1fr;
    }
}

.settings-page .settings-card-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.settings-page .settings-card-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-page .settings-card-thumb {
    width: 64px;
    height: 40px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.settings-page .settings-card-thumb img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.settings-page .settings-card-meta {
    font-size: 13px;
    font-weight: 600;
}

.settings-page .settings-card-meta span {
    display: block;
    opacity: 0.6;
    font-weight: 500;
    margin-top: 2px;
}

.settings-page .settings-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-page .settings-card-default {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(30, 132, 73, 0.12);
    color: #1e8449;
}

.settings-page .settings-card-action {
    border: none;
    background: transparent;
    color: #c0392b;
    font-weight: 600;
    font-size: 12px;
}

.settings-page .settings-card-action:hover {
    color: #a93226;
    cursor: pointer;
}

.settings-page .settings-card-action.secondary {
    color: #1343DE;
}

.settings-page .settings-card-action.secondary:hover {
    color: #11319c;
}

.settings-card-element {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #ffffff;
    margin-bottom: 12px;
}

.settings-billing-modal .form-prompt {
    color: #c0392b;
    font-weight: 600;
    margin-bottom: 10px;
}
.settings-page .settings-billing-sub {
    font-size: 12px;
    opacity: 0.65;
}

.settings-page .settings-billing-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 8px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.settings-page .settings-billing-row:first-child {
    border-top: none;
    padding-top: 0;
}

.settings-page .settings-orders {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-page .settings-billing-history {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-page .settings-billing-history {
    gap: 8px;
}

.settings-page .settings-billing-table-wrap {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden;
}

.settings-page .settings-billing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.settings-page .settings-billing-table thead th {
    text-align: left;
    padding: 12px 14px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.04);
}

.settings-page .settings-billing-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    vertical-align: top;
}

.settings-page .settings-billing-row-toggle {
    cursor: pointer;
}

.settings-page .settings-billing-row-toggle:hover td {
    background: rgba(0, 0, 0, 0.025);
}

.settings-page .settings-billing-title {
    font-size: 14px;
    font-weight: 600;
}

.settings-page .settings-billing-sub {
    font-size: 12px;
    line-height: 1.3;
    opacity: 0.7;
    max-width: 460px;
}

.settings-page .settings-billing-date {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.7);
}

.settings-page .settings-billing-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1343DE;
    background: rgba(19, 67, 222, 0.08);
}

.settings-page .settings-billing-status-pill.is-paid {
    color: #0f2fa8;
    background: rgba(19, 67, 222, 0.12);
}

.settings-page .settings-billing-status-pill.is-pending {
    color: #8a5a00;
    background: rgba(255, 193, 7, 0.18);
}

.settings-page .settings-billing-amount {
    font-size: 14px;
    font-weight: 700;
    text-align: right;
}

.settings-page .settings-billing-details-row td {
    padding: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.settings-page .settings-billing-details {
    padding: 12px 14px 14px;
}

.settings-page .settings-billing-row {
    font-size: 12px;
    padding: 6px 0;
}

.settings-page .settings-billing-item {
    font-size: 12px;
}

.settings-page .settings-billing-method {
    font-size: 12px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
}

.settings-page .settings-billing-count {
    font-size: 12px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
}

.settings-page .settings-billing-amount.is-right,
.settings-page .settings-billing-table thead th.is-right {
    text-align: right;
}

.settings-page .settings-billing-history .collapsing {
    transition: height 0.25s ease;
}

.settings-2fa-card {
    margin-top: 16px;
}

.settings-2fa-enable-btn {
    display: inline-flex;
    margin: 0 auto;
    text-align: center;
    color: #ffffff !important;
}

.settings-2fa-modal .modal-content {
    border-radius: 18px;
    background:
        radial-gradient(240px 240px at 85% -10%, rgba(19, 67, 222, 0.18), rgba(19, 67, 222, 0) 70%),
        radial-gradient(220px 220px at -10% 20%, rgba(19, 67, 222, 0.12), rgba(19, 67, 222, 0) 70%),
        linear-gradient(180deg, rgba(247, 249, 255, 0.98) 0%, #ffffff 38%);
    box-shadow: 0 20px 50px rgba(12, 20, 46, 0.22);
    overflow: hidden;
    position: relative;
}

.settings-2fa-modal .modal-body,
.settings-2fa-modal-body {
    padding: 30px 30px 26px !important;
}

.settings-2fa-hero {
    text-align: center;
    margin-bottom: 18px;
}

.settings-2fa-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(19, 67, 222, 0.1);
    color: #1343de;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.settings-2fa-modal .modal-body h1 {
    font-size: 28px;
    margin-bottom: 6px;
    text-align: center;
}

.settings-2fa-modal .modal-body h4 {
    color: #5b637a;
    font-weight: 500;
    margin-bottom: 18px;
    text-align: center;
}

.settings-2fa-steps {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 4px 0 18px;
}

.settings-2fa-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.settings-2fa-step span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(12, 20, 46, 0.08);
}

.settings-2fa-step small {
    font-size: 11px;
    opacity: 0.75;
}

.settings-2fa-step.is-active {
    color: #1343de;
}

.settings-2fa-step.is-active span {
    border-color: rgba(19, 67, 222, 0.5);
    box-shadow: 0 10px 22px rgba(19, 67, 222, 0.18);
}

.settings-2fa-step.is-done {
    color: #0f2fa8;
}

.settings-2fa-step.is-done span {
    background: #1343de;
    color: #ffffff;
    border-color: #1343de;
    box-shadow: 0 10px 22px rgba(19, 67, 222, 0.18);
}

.settings-2fa-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 12px;
}

.twofa-step-1 .settings-2fa-step-2 {
    display: none;
}

.twofa-step-2 .settings-2fa-step-1 {
    display: none;
}

.settings-2fa-modal .settings-full-button {
    color: #ffffff !important;
}

.settings-2fa-modal input[type="text"],
.settings-2fa-modal input[type="password"] {
    width: 100%;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(19, 67, 222, 0.04);
}

.settings-2fa-modal input:focus {
    outline: none;
    border-color: rgba(19, 67, 222, 0.4);
    box-shadow: 0 0 0 2px rgba(19, 67, 222, 0.12);
}

.settings-2fa-modal .settings-2fa-setup {
    margin-top: 0;
    background: transparent;
    border: none;
    padding: 0;
}

.settings-2fa-modal .settings-2fa-qr-frame {
    margin: 0 auto;
    display: block;
}

.settings-2fa-qr-img {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
}

.settings-2fa-qr-loading {
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
}

.settings-2fa-qr-img canvas,
.settings-2fa-qr-img img {
    width: 100%;
    height: 100%;
}

.settings-2fa-modal .settings-2fa-secret {
    justify-content: space-between;
}

.settings-2fa-modal .settings-2fa-codes {
    justify-content: center;
}

.settings-2fa-modal .settings-2fa-actions {
    display: flex;
    justify-content: center;
}

.settings-2fa-modal .settings-form-actions {
    margin-top: 10px;
}

.settings-2fa-modal .settings-form-prompt {
    text-align: center;
    margin-top: 6px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
}

.settings-2fa-modal .settings-2fa-note {
    text-align: center;
}

.settings-2fa-step-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.55);
    margin-bottom: 4px;
}

.settings-2fa-step-sub {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.65);
    margin-bottom: 10px;
}

.settings-2fa-section {
    width: 100%;
    max-width: 420px;
    display: grid;
    gap: 14px;
    align-items: center;
    justify-items: center;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 14px;
    padding: 18px 18px 20px;
    box-shadow: 0 10px 22px rgba(12, 20, 46, 0.06);
}

.settings-2fa-heading {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #0f172a;
    text-align: center;
}

.settings-2fa-desc {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.62);
    text-align: center;
}

.settings-2fa-modal .settings-2fa-grid {
    justify-items: center;
    text-align: center;
}

.settings-2fa-modal .settings-2fa-panel {
    text-align: center;
}

.settings-2fa-modal .settings-2fa-block {
    text-align: center;
}

.settings-2fa-section {
    width: 100%;
    max-width: 420px;
    display: grid;
    gap: 14px;
    align-items: center;
    justify-items: center;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 14px;
    padding: 18px 18px 20px;
    box-shadow: 0 12px 26px rgba(12, 20, 46, 0.08);
}

.settings-2fa-modal .settings-2fa-panel {
    text-align: center;
}

.settings-2fa-modal .settings-2fa-block {
    text-align: center;
}

.settings-2fa-modal .settings-2fa-qr {
    justify-items: center;
    text-align: center;
}

.settings-2fa-manual {
    margin-top: 6px;
    width: 100%;
}

.settings-2fa-manual-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.55);
    margin-bottom: 6px;
}

.settings-2fa-manual-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    background: #f7f9fd;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: inset 0 0 0 1px rgba(19, 67, 222, 0.05);
}

.settings-2fa-manual-input {
    border: none;
    background: transparent;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: 13px;
    text-align: center;
    color: #0f172a;
    outline: none;
}

.settings-2fa-manual-copy {
    border: none;
    background: rgba(19, 67, 222, 0.1);
    color: #0f2fa8;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(12, 20, 46, 0.08);
}

.settings-2fa-manual-copy:hover {
    background: rgba(19, 67, 222, 0.16);
    color: #0b2382;
}

.settings-2fa-modal .settings-2fa-qr-img {
    display: block;
    margin: 0 auto;
    padding: 18px;
    box-sizing: border-box;
    border-radius: 0;
}

.settings-2fa-modal .settings-2fa-qr-img canvas,
.settings-2fa-modal .settings-2fa-qr-img img {
    display: block;
    border-radius: 0;
}

.settings-2fa-list {
    margin: 10px 0 0;
    padding-left: 18px;
    text-align: left;
    display: grid;
    gap: 6px;
    color: #4b5563;
    font-size: 13px;
}

.settings-2fa-small-list {
    font-size: 12px;
    color: rgba(75, 85, 99, 0.85);
    padding-left: 18px;
}

.settings-2fa-list li {
    line-height: 1.5;
}

.settings-2fa-code {
    margin-top: 10px;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.settings-2fa-code input {
    text-align: center;
    letter-spacing: 0;
    font-weight: 700;
    font-size: 20px;
    height: 54px;
    font-family: "SFMono-Regular", "Consolas", "Menlo", "Roboto Mono", monospace;
    background: #fff;
    border: 1px solid rgba(19, 67, 222, 0.18);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(19, 67, 222, 0.12), inset 0 0 0 1px rgba(19, 67, 222, 0.06);
}

.settings-2fa-code input::placeholder {
    color: rgba(0, 0, 0, 0.3);
}

.settings-2fa-modal .settings-2fa-code label {
    display: none;
}

.settings-2fa-modal .settings-full-button {
    width: 100%;
    display: block;
}

.settings-2fa-pin {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 4px;
}

.settings-2fa-digit {
    width: 48px;
    height: 58px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #ffffff;
    box-shadow: 0 6px 14px rgba(12, 20, 46, 0.06), inset 0 0 0 1px rgba(19, 67, 222, 0.05);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0;
    transition: all 0.12s ease;
}

.settings-2fa-digit:focus {
    outline: none;
    border-color: #1343de;
    box-shadow: 0 10px 22px rgba(19, 67, 222, 0.14), inset 0 0 0 1px rgba(19, 67, 222, 0.12);
}

.twofa-step-1 .js-2fa-enable {
    display: none;
}

.twofa-step-2 .js-2fa-enable {
    display: block;
}

.twofa-step-1 .js-2fa-next {
    display: block;
}

.twofa-step-2 .js-2fa-next {
    display: none;
}

.settings-2fa-flow.is-finished .settings-2fa-grid {
    opacity: 0.55;
    filter: saturate(0.65);
    pointer-events: none;
    transition: all 0.2s ease;
}

.settings-2fa-complete {
    margin-top: 16px;
    padding: 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(19, 67, 222, 0.12), rgba(19, 67, 222, 0.04));
    border: 1px solid rgba(19, 67, 222, 0.14);
    box-shadow: 0 14px 28px rgba(12, 20, 46, 0.08);
    text-align: center;
}

.settings-2fa-success {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: #0f2fa8;
    font-size: 16px;
    margin-bottom: 6px;
}

.settings-2fa-success i {
    font-size: 18px;
}

.settings-2fa-success-sub {
    color: #4b5563;
    margin-bottom: 12px;
    font-weight: 600;
}

.settings-2fa-complete .settings-2fa-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.settings-2fa-complete .settings-2fa-codes-box {
    margin-top: 8px;
}

.settings-2fa-secret-words {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(19, 67, 222, 0.08);
    color: #1f2b6c;
    font-weight: 600;
    font-size: 12px;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

.settings-2fa-codes-box {
    padding: 12px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 0 0 1px rgba(19, 67, 222, 0.04);
}

.settings-2fa-codes {
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-align: center;
    color: #111;
}

@media (max-width: 900px) {
    .settings-2fa-grid {
        grid-template-columns: 1fr;
    }
}

.settings-2fa-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.settings-2fa-title {
    font-weight: 700;
    font-size: 16px;
}

.settings-2fa-sub {
    font-size: 13px;
    color: #6b7280;
}

.settings-2fa-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.settings-2fa-status.is-enabled {
    color: #0f2fa8;
    background: rgba(19, 67, 222, 0.12);
}

.settings-2fa-status.is-disabled {
    color: #6b7280;
    background: rgba(0, 0, 0, 0.06);
}

.settings-2fa-setup,
.settings-2fa-reset {
    margin-top: 12px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.settings-2fa-qr {
    display: grid;
    gap: 10px;
}

.settings-2fa-qr-frame {
    width: 200px;
    height: 200px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 14px 28px rgba(12, 20, 46, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.settings-2fa-qr-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-2fa-block {
    margin-bottom: 12px;
}

.settings-2fa-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 6px;
}

.settings-2fa-secret {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 14px;
}

.settings-2fa-copy {
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: #111;
    padding: 6px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
}

.settings-2fa-codes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.settings-2fa-actions {
    margin-top: 8px;
}

.settings-2fa-download {
    border: none;
    background: rgba(19, 67, 222, 0.1);
    color: #1343de;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
}

.settings-2fa-download:hover {
    background: rgba(19, 67, 222, 0.18);
    color: #0f2fa8;
}

.settings-2fa-code {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.settings-2fa-note {
    font-size: 12px;
    color: #6b7280;
}

.settings-2fa-modal .settings-2fa-codes {
    display: block;
    text-align: center;
}

.settings-2fa-complete .settings-2fa-codes {
    display: block;
}

.settings-page .billing-history-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.settings-page .billing-history-filters {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 12px 22px rgba(12, 20, 46, 0.06);
    margin-bottom: 6px;
}

.settings-page .billing-filter-group {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) repeat(2, minmax(140px, 0.6fr));
    gap: 12px;
    width: 100%;
}

.settings-page .billing-filter-field label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.55);
    margin-bottom: 6px;
}

.settings-page .billing-filter-field input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    font-size: 13px;
}

.settings-page .billing-filter-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.settings-page .billing-filter-actions .blue-cta {
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    margin-right: 0;
}

.settings-page .billing-filter-reset {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}

.settings-page .billing-filter-reset:hover {
    color: #111;
}

.settings-page .billing-history-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 14px 26px rgba(12, 20, 46, 0.06);
    overflow: hidden;
}

.settings-page .billing-history-summary {
    width: 100%;
    border: none;
    background: transparent;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
}

.settings-page .billing-summary-main {
    display: grid;
    gap: 6px;
}

.settings-page .billing-summary-title {
    font-size: 16px;
    font-weight: 700;
    color: #111;
}

.settings-page .billing-summary-sub {
    font-size: 13px;
    color: #6b7280;
    max-width: 520px;
    line-height: 1.4;
}

.settings-page .billing-summary-meta {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.settings-page .billing-summary-dot {
    opacity: 0.4;
}

.settings-page .billing-summary-side {
    display: grid;
    justify-items: end;
    gap: 8px;
    text-align: right;
}

.settings-page .billing-summary-amount {
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

.settings-page .billing-summary-method {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
}

.settings-page .billing-card-icon {
    width: 28px;
    height: 18px;
    border-radius: 6px;
    background: #f3f4f8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 2px 4px;
}

.settings-page .billing-card-icon img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.settings-page .billing-history-details {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding: 18px 20px 20px;
}

.settings-page .billing-history-sections {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 18px;
}

.settings-page .billing-history-section {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 14px;
    padding: 14px 16px;
}

.settings-page .billing-section-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 10px;
}

.settings-page .billing-history-items {
    display: grid;
    gap: 8px;
}

.settings-page .billing-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.75);
}

.settings-page .billing-history-item.is-product {
    align-items: center;
}

.settings-page .billing-item-info {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.settings-page .billing-item-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #f3f4f8;
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #8b92a7;
    font-size: 16px;
    flex-shrink: 0;
}

.settings-page .billing-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-page .billing-item-name {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.settings-page .billing-history-item.total {
    font-weight: 700;
    color: #111;
}

.settings-page .billing-history-rows {
    display: grid;
    gap: 8px;
}

.settings-page .billing-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.7);
}

.settings-page .billing-history-row strong {
    font-weight: 700;
    color: #111;
}

@media (max-width: 900px) {
    .settings-page .billing-history-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .settings-page .billing-summary-side {
        justify-items: start;
        text-align: left;
    }

    .settings-page .billing-history-sections {
        grid-template-columns: 1fr;
    }

    .settings-page .billing-history-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .settings-page .billing-filter-group {
        grid-template-columns: 1fr;
    }

    .settings-page .billing-filter-actions {
        justify-content: space-between;
    }
}

.settings-page .settings-billing-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.settings-page .settings-billing-toggle {
    width: 100%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    text-align: left;
}

.settings-page .settings-billing-meta {
    display: grid;
    gap: 4px;
    text-align: right;
    font-size: 12px;
    opacity: 0.7;
}

.settings-page .settings-billing-amount {
    font-weight: 700;
    font-size: 15px;
    color: #111;
    opacity: 1;
}

.settings-page .settings-billing-status {
    text-transform: capitalize;
    font-weight: 600;
    color: #1343DE;
}

.settings-page .settings-billing-details {
    padding: 4px 18px 16px;
}

.settings-page .settings-billing-items {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.settings-page .settings-billing-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.75);
}

.settings-page .settings-billing-item.total {
    font-weight: 700;
    color: #111;
}

.settings-page .settings-order-card {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.settings-page .settings-order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.settings-page .settings-order-status-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.settings-page .settings-order-title {
    font-weight: 700;
    font-size: 16px;
}

.settings-page .settings-order-date {
    font-size: 12px;
    opacity: 0.6;
}

.settings-page .settings-order-status {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(19, 67, 222, 0.1);
    color: #1343DE;
    font-weight: 600;
    font-size: 12px;
    text-transform: capitalize;
}

.settings-page .settings-order-track {
    font-size: 12px;
    font-weight: 600;
    color: #1343DE;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.settings-page .settings-order-track i {
    font-size: 12px;
}

.settings-page .settings-order-tracker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.settings-page .settings-order-step {
    text-align: center;
    position: relative;
}

.settings-page .settings-order-step::after {
    content: "";
    position: absolute;
    top: 14px;
    right: -50%;
    width: 100%;
    height: 2px;
    background: rgba(0, 0, 0, 0.1);
}

.settings-page .settings-order-step:last-child::after {
    display: none;
}

.settings-page .settings-order-dot {
    width: 28px;
    height: 28px;
    border-radius: 100%;
    margin: 0 auto 8px;
    background: rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #ffffff;
    position: relative;
    z-index: 1;
}

.settings-page .settings-order-step.complete .settings-order-dot {
    background: #1e8449;
}

.settings-page .settings-order-step.complete .settings-order-dot i {
    color: #ffffff;
}

.settings-page .settings-order-step.complete::after {
    background: rgba(30, 132, 73, 0.4);
}

.settings-page .settings-order-step.current .settings-order-dot {
    background: #1e8449;
    box-shadow: 0 0 0 4px rgba(30, 132, 73, 0.15);
}

.settings-page .settings-order-step.pending .settings-order-dot {
    background: #ffffff;
    border: 2px solid rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.5);
}

.settings-page .settings-order-label {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.6;
}

.settings-page .settings-order-step.complete .settings-order-label {
    opacity: 1;
    color: #1e8449;
}

.settings-page .settings-order-step.current .settings-order-label {
    opacity: 1;
    color: #1e8449;
}

.settings-page .settings-order-items {
    display: grid;
    gap: 10px;
}

.settings-page .settings-order-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(19, 67, 222, 0.05);
}

.settings-page .settings-order-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(19, 67, 222, 0.12);
    color: #1343DE;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.settings-page .settings-order-item-text {
    flex: 1;
    font-weight: 600;
    font-size: 13px;
}

.settings-page .settings-order-item-price {
    font-weight: 700;
    font-size: 13px;
}

.settings-page .settings-order-total {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 2px;
}

.settings-page .settings-orders-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.settings-page .settings-orders-page {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.7);
}

.settings-page .settings-orders-page.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.settings-page .settings-orders-status {
    font-size: 12px;
    font-weight: 700;
    color: #111;
}

.settings-page .settings-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.settings-page .settings-row:first-child {
    border-top: none;
}

.settings-page .settings-row-label {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.75);
}

.settings-page .settings-row-value {
    font-weight: 500;
    text-align: right;
    color: rgba(0, 0, 0, 0.85);
}

.settings-page .settings-empty {
    text-align: center;
    padding: 18px 10px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
}

.settings-page .settings-device-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 0;
}

.settings-page .settings-device {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.settings-page .settings-device-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(19, 67, 222, 0.1);
    color: #1343DE;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: 0 0 auto;
}

.settings-page .settings-device-meta {
    flex: 1;
}

.settings-page .settings-device-name {
    font-weight: 700;
    margin-bottom: 2px;
}

.settings-page .settings-device-sub {
    font-size: 13px;
    opacity: 0.65;
}

.settings-page .settings-device-remove {
    border: none;
    background: transparent;
    color: #c0392b;
    font-size: 16px;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.settings-page .settings-device-remove:hover {
    background: rgba(192, 57, 43, 0.12);
    color: #a93226;
    cursor: pointer;
}

.settings-page .settings-danger {
    margin-top: 14px;
    background: rgba(255, 235, 235, 0.8);
    border: 1px solid rgba(192, 57, 43, 0.2);
    border-radius: 10px;
    padding: 12px 14px;
}

.settings-page .settings-danger-title {
    font-weight: 700;
    color: #c0392b;
    margin-bottom: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.settings-page .settings-danger-title i {
    margin-right: 8px;
}

.settings-page .settings-danger-button {
    width: 100%;
    border-radius: 8px;
    padding: 8px 12px;
    background: #c0392b;
    color: #ffffff;
    font-weight: 600;
    border: none;
    font-size: 13px;
}

.settings-page .settings-danger-button:hover {
    background: #a93226;
    cursor: pointer;
}

.settings-page .settings-danger-note {
    margin-top: 6px;
    font-size: 11px;
    color: rgba(192, 57, 43, 0.85);
}

.settings-cropper-modal .modal-content {
    border-radius: 16px;
    border: none;
}

.settings-cropper-modal .modal-body {
    padding: 20px 20px 10px;
}

.settings-cropper-modal .settings-cropper-header h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
    text-align: center;
}

.settings-cropper-modal .settings-cropper-header p {
    font-size: 13px;
    opacity: 0.7;
    text-align: center;
    margin-bottom: 16px;
}

.settings-cropper-modal .settings-cropper-canvas {
    width: 100%;
    max-height: 360px;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.05);
}

.settings-cropper-modal .settings-cropper-canvas img {
    width: 100%;
    max-height: 360px;
    display: block;
}

.settings-cropper-modal .settings-cropper-footer {
    padding: 12px 18px 18px;
    border-top: none;
    gap: 10px;
}

.settings-cropper-modal .settings-avatar-cancel {
    filter: grayscale(1);
    background: rgba(19, 67, 222, 0.1);
    color: #1343DE;
}

.settings-cropper-modal .settings-avatar-cancel:hover {
    background: rgba(19, 67, 222, 0.18);
    color: #0f2fa8;
}

.settings-delete-modal .settings-delete-note {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(192, 57, 43, 0.1);
    color: #c0392b;
    font-weight: 600;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.settings-delete-modal .settings-danger-action {
    background: #c0392b;
    color: #ffffff;
}

.settings-delete-modal .settings-danger-action:hover {
    background: #a93226;
    color: #ffffff;
}

.settings-delete-modal .modal-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-top: none;
}

.settings-delete-modal .settings-avatar-cancel {
    background: #1343DE;
    color: #ffffff;
    filter: grayscale(1);
}

.settings-delete-modal .settings-avatar-cancel:hover {
    background: #11319c;
    color: #ffffff;
}

.tickets-page .tickets-header {
    text-align: center;
    padding: 24px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(8px) saturate(140%);
    margin-bottom: 24px;
}

.tickets-page .tickets-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(8px) saturate(140%);
}

.tickets-page .tickets-shell {
    align-items: stretch;
    min-height: calc(100vh - 80px);
    margin-bottom: 20px;
}

.tickets-page .tickets-chat {
    height: calc(100vh - 150px);
    max-height: calc(100vh - 150px);
    display: flex;
    flex-direction: column;
}

.tickets-page .tickets-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.tickets-page .tickets-footer {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.92);
}

.settings-page .tickets-chat {
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

.settings-page .tickets-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(70vh - 140px);
}

.settings-page .tickets-footer {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.92);
}

.tickets-page .tickets-empty {
    text-align: center;
    padding: 30px 10px;
}

.tickets-page .tickets-empty-title {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 6px;
}

.tickets-page .tickets-empty-subtitle {
    font-size: 14px;
    opacity: 0.7;
}

.tickets-shell {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
}

.settings-page .tickets-shell {
    grid-template-columns: 320px 1fr;
    min-height: 640px;
}

.tickets-shell.is-guest {
    grid-template-columns: 1fr;
}

.tickets-shell.is-guest .tickets-sidebar {
    display: none;
}

.tickets-sidebar {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    min-height: 420px;
}

.settings-page .tickets-sidebar,
.settings-page .tickets-chat {
    min-height: 640px;
}

.tickets-sidebar-header {
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: grid;
    gap: 10px;
}

.settings-page .tickets-new {
    background: #1343DE;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 16px;
    border-radius: 10px;
    border: none;
}

.settings-page .tickets-new i {
    position: static;
    transform: none;
    margin-right: 8px;
}

.tickets-sidebar-list {
    overflow-y: auto;
    max-height: 560px;
}

.settings-page .tickets-sidebar-list {
    max-height: 620px;
}

.tickets-sidebar .ticket {
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.tickets-sidebar .ticket.selected {
    background: rgba(19, 67, 222, 0.08);
}

.tickets-sidebar .ticket .avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(19, 67, 222, 0.12);
    color: #0f2fa8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
}

.tickets-sidebar .ticket .text .name {
    font-weight: 600;
    font-size: 13px;
}

.tickets-sidebar .ticket .text .email {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
}

.tickets-chat {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 420px;
    overflow: hidden;
}

.tickets-chat .tickets-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tickets-chat .ticket-name {
    font-weight: 700;
}

.tickets-chat .ticket-status {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tickets-chat .tickets-body {
    padding: 18px;
    overflow-y: auto;
    min-height: 0;
}

.tickets-chat .message {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.tickets-chat .message.right {
    flex-direction: row-reverse;
    text-align: right;
}

.tickets-chat .message .avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
}

.tickets-chat .message .text {
    max-width: 75%;
}

.tickets-chat .message .message-details {
    font-size: 12px;
    font-weight: 600;
    display: flex;
    gap: 8px;
    align-items: center;
}

.tickets-chat .message .message-time {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.6;
}

.tickets-chat .message .text-content {
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.05);
    margin-top: 6px;
    line-height: 1.5;
}

.tickets-chat .message.right .text-content {
    background: rgba(19, 67, 222, 0.12);
}

.tickets-footer {
    padding: 14px 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.tickets-footer .message-input {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.tickets-footer .message-textarea {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 10px 12px;
    resize: none;
    min-height: 44px;
}

.tickets-footer .btn.btn-primary {
    border-radius: 10px;
    padding: 10px 16px;
}

.guest-ticket-notice {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 14px;
    background: linear-gradient(120deg, rgba(19, 67, 222, 0.12), rgba(255, 255, 255, 0.95));
    border: 1px solid rgba(19, 67, 222, 0.2);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
    margin-bottom: 18px;
}

.guest-ticket-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(19, 67, 222, 0.15);
    color: #1343de;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.guest-ticket-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
}

.guest-ticket-text {
    font-size: 13px;
    color: rgba(17, 17, 17, 0.7);
}

@media (max-width: 768px) {
    .tickets-shell {
        grid-template-columns: 1fr;
        display: block;
    }

    .tickets-sidebar {
        max-height: none;
        min-height: 0;
        overflow: visible;
        width: 100%;
        display: block;
        margin-bottom: 16px;
    }

    .settings-page .tickets-shell,
    .settings-page .tickets-sidebar,
    .settings-page .tickets-chat {
        min-height: auto;
    }

    .tickets-sidebar-list {
        max-height: none;
        overflow: visible;
        width: 100%;
        display: block;
    }

    .tickets-chat {
        min-height: auto;
        width: 100%;
        display: block;
    }
}

@media (max-width: 640px) {
    .tickets-page .tickets-header {
        padding: 18px 16px;
    }

    .tickets-chat .tickets-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .tickets-chat .message .text {
        max-width: 100%;
    }

    .tickets-footer .message-input {
        grid-template-columns: 1fr;
    }

    .tickets-footer .btn.btn-primary {
        width: 100%;
    }
}


.help-ticket-cta p {
    font-weight: 500;
    margin-bottom: 16px;
    opacity: 0.85;
}

.help-ticket-cta .blue-cta:hover {
    background: #11319c;
    color: #ffffff;
}

.settings-browse-discounts,
.settings-browse-discounts:hover {
    color: #ffffff;
}

.settings-browse-discounts {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.search-bar {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 30px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 14px;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    padding: 8px 12px;
}

    .search-bar i {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        color: rgba(0, 0, 0, 0.6);
    }

    .search-bar input {
        width: 100%;
        padding: 12px 42px;
        border-radius: 8px;
        border: none;
        font-size: 16px;
        color: #333;
        background: rgba(255, 255, 255, 0);
        appearance: none;
        outline: none;
    }

    .search-bar button {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        background: #1343DE;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 7px; 
        appearance: none;
        outline: none;
        cursor: pointer;
    }

.modal-footer button {
    width: calc(50% - 0px);
}

.modal-footer .btn-secondary {
    filter: grayscale(1);
}

.modal-content {
    border-radius: 10px;
    border: none!important;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}

.modal-body h1 {
    font-weight: 700;
    width: 100%;
    font-size: 28px;
    margin-bottom: 10px;
    text-align: center;
}

.modal-body h4 {
    width: 100%;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    opacity: 1;
    margin-bottom: 30px;
}

button {
    appearance: none;
    outline: none;
    border: none;
    box-shadow: none!important;
}

button:hover,
button:active,
button:focus,
button:focus-visible,
.blue-cta:hover,
.blue-cta:active,
.blue-cta:focus,
.blue-cta:focus-visible,
.header .header-cta:hover,
.header .header-cta:active,
.header .header-cta:focus,
.header .header-cta:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

a.blue-cta:hover,
a.blue-cta:active,
a.blue-cta:focus,
a.blue-cta:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.modal-content button.close {
    position: absolute;
    top: 14px;
    right: 14px;
    margin: 0;
    z-index: 10;
}

.login-modal .modal-content {
    border-radius: 18px;
    background:
        radial-gradient(160px 160px at 92% 0%, rgba(19, 67, 222, 0.22), rgba(19, 67, 222, 0) 70%),
        linear-gradient(180deg, rgba(247, 249, 255, 0.98) 0%, #ffffff 38%);
    box-shadow: 0 20px 50px rgba(12, 20, 46, 0.22);
    position: relative;
    overflow: hidden;
}

.login-modal {
    position: relative;
    overflow: visible;
}

.login-modal .modal-body {
    padding: 28px 28px 22px;
    position: relative;
}

.login-modal .modal-body h1 {
    font-size: 30px;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.login-modal .modal-body h4 {
    color: #5b637a;
    font-weight: 500;
    margin-bottom: 24px;
}

.login-modal form .formGroup {
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: inset 0 0 0 1px rgba(19, 67, 222, 0.12), 0 10px 22px rgba(12, 20, 46, 0.08);
}

.login-modal form .formGroup:focus-within {
    background: #1343DE10 !important;
    box-shadow: 0 0 0 1px rgba(19, 67, 222, 0.45), inset 0 0 0 1px rgba(19, 67, 222, 0.18);
}

.login-modal .blue-cta {
    width: 100%;
    border-radius: 12px;
    padding: 12px 22px;
    background: linear-gradient(135deg, #1343de 0%, #1f59ff 100%);
    box-shadow: 0 14px 26px rgba(19, 67, 222, 0.28);
}

.login-modal .blue-cta:hover {
    background: linear-gradient(135deg, #0f2fa8 0%, #1343de 100%);
}

.login-modal .prompt {
    margin-top: 18px;
    font-size: 14px;
    color: #6b7280;
}

.login-modal .prompt a {
    color: #1343de;
}

.login-modal .modal-content button.close {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(19, 67, 222, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1343de;
}

.login-modal .modal-content button.close:hover {
    background: rgba(19, 67, 222, 0.2);
}

.login-2fa {
    margin-bottom: 16px;
}

.login-2fa-help {
    font-size: 12px;
    color: #6b7280;
    margin: 6px 0 12px;
}

.login-2fa-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-2fa-back {
    border: none;
    background: transparent;
    font-weight: 600;
    color: #6b7280;
    padding: 10px 6px;
}

.login-2fa-back:hover {
    color: #111;
}

.login-2fa-active .login-options,
.login-2fa-active .js-login-submit {
    display: none !important;
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -4px 0 18px;
    flex-wrap: wrap;
}

.login-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 13px;
    color: #35405a;
    cursor: pointer;
    margin: 0;
}

.login-checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.login-checkbox-box {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid rgba(19, 67, 222, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: transparent;
    transition: all 0.2s ease;
}

.login-checkbox input:checked + .login-checkbox-box {
    background: #1343de;
    border-color: #1343de;
    color: #fff;
    box-shadow: 0 6px 14px rgba(19, 67, 222, 0.25);
}

.login-checkbox-box i {
    font-size: 10px;
}

.login-forgot {
    font-size: 13px;
    font-weight: 600;
    color: #1343de;
}

.login-forgot:hover {
    color: #0f2fa8;
}

.login-checkbox-standalone {
    margin: 6px 0 16px;
}

.forgot-password-modal .modal-content {
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(247, 249, 255, 0.98) 0%, #ffffff 38%);
    box-shadow: 0 20px 50px rgba(12, 20, 46, 0.22);
    overflow: hidden;
    position: relative;
}

.forgot-password-modal .modal-body {
    padding: 28px 28px 22px;
}

.forgot-password-modal .blue-cta {
    width: 100%;
    border-radius: 12px;
    padding: 12px 22px;
    margin-right: 0;
    background: linear-gradient(135deg, #1343de 0%, #1f59ff 100%);
    box-shadow: 0 14px 26px rgba(19, 67, 222, 0.28);
}

.forgot-password-modal .blue-cta:hover {
    background: linear-gradient(135deg, #0f2fa8 0%, #1343de 100%);
}

.forgot-step {
    display: none;
}

.forgot-step.is-active {
    display: block;
}

.forgot-password-modal .modal-body h1 {
    font-size: 28px;
    margin-bottom: 8px;
}

.forgot-password-modal .modal-body h4 {
    color: #5b637a;
    font-weight: 500;
    margin-bottom: 22px;
}

.forgot-code-inputs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.forgot-code-input {
    height: 50px;
    border-radius: 12px;
    border: 1px solid rgba(19, 67, 222, 0.18);
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #111;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(19, 67, 222, 0.06), 0 10px 18px rgba(12, 20, 46, 0.08);
}

.forgot-code-input:focus {
    outline: none;
    border-color: rgba(19, 67, 222, 0.45);
    box-shadow: 0 0 0 2px rgba(19, 67, 222, 0.15);
}

.forgot-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.forgot-link {
    background: none;
    border: none;
    padding: 0;
    color: #1343de;
    font-weight: 600;
    font-size: 13px;
}

.forgot-link.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.forgot-timer {
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
}

.forgot-prompt {
    margin-top: 12px;
    text-align: center;
    font-weight: 600;
    color: #c0392b;
}

@media (max-width: 540px) {
    .login-options {
        flex-direction: column;
        align-items: flex-start;
    }

    .forgot-code-inputs {
        gap: 8px;
    }
}

.discover-page {
    padding-top: 24px;
    padding-bottom: 40px;
    min-height: 100vh;
    overflow-x: hidden;
}

.discover-hero {
    text-align: center;
    margin-bottom: 30px;
}

.discover-hero-title {
    font-size: 42px;
    font-weight: 700;
}

.discover-hero-subtitle {
    margin-top: 8px;
    font-weight: 500;
    opacity: 0.7;
}

.discover-section {
    margin-bottom: 34px;
}

.discover-map-section .contentTitle {
    margin-bottom: 16px;
}

.discover-map-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:16px; }
.discover-map-heading .contentTitle { margin-bottom:4px; }
.discover-map-heading p { margin:0; color:#667085; font-size:13px; }
.discover-map-heading>span { flex:none; padding:7px 10px; border-radius:999px; color:#175cd3; background:#eff4ff; font-size:11px; font-weight:750; }

.discover-map-wrap {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
    min-height: 320px;
}

.discover-map {
    width: 100%;
    height: 360px;
}

.discover-map-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(240, 240, 240, 0.95));
}

.discover-map-wrap.is-ready.has-points .discover-map-empty {
    opacity: 0;
    pointer-events: none;
}

.discover-map-marker.is-cluster { background:var(--blue,#1343de); border-color:#fff; color:#fff; }
.discover-map-cluster-count { display:grid!important; place-items:center; width:100%; height:100%; color:#fff!important; font-size:13px; font-weight:800; }

/* Dedicated category storefronts */
.category-page { --category-accent:#1343de; --category-soft:#e8edff; padding:0 0 64px; background:#f7f8fa; overflow:visible; }
.category-hero { padding:122px 0 64px; color:#fff; background:linear-gradient(115deg,color-mix(in srgb,var(--category-accent),#06182d 42%),var(--category-accent)); overflow:hidden; }
.category-hero-inner { position:relative; display:flex; align-items:center; min-height:300px; }
.category-hero-copy { position:relative; z-index:2; max-width:690px; }
.category-back { display:inline-block; margin-bottom:30px; color:#ffffffbd; font-size:13px; font-weight:700; }
.category-back:before { content:'← '; }.category-back:hover { color:#fff; }
.category-kicker { display:flex; align-items:center; gap:9px; margin-bottom:14px; font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.category-hero h1 { max-width:680px; margin:0 0 16px; font-size:clamp(44px,6vw,76px); line-height:.98; letter-spacing:-.045em; font-weight:850; }
.category-hero p { max-width:570px; margin:0; color:#ffffffcf; font-size:18px; line-height:1.6; }
.category-hero-stats { display:flex; align-items:center; gap:10px; margin-top:28px; color:#ffffffc4; font-size:13px; }.category-hero-stats strong{color:#fff;font-size:20px}.category-hero-stats span{width:1px;height:18px;background:#ffffff4d}
.category-hero-mark { position:absolute; right:25px; display:grid; place-items:center; width:260px; height:260px; border:1px solid #ffffff32; border-radius:50%; color:#ffffff26; font-size:112px; box-shadow:0 0 0 42px #ffffff0b,0 0 0 84px #ffffff08; }
.category-nav { position:sticky; z-index:5; top:64px; background:#fff; border-bottom:1px solid #e6e8ec; }
.category-nav-track { display:flex; overflow:auto; scrollbar-width:none; }.category-nav-track::-webkit-scrollbar{display:none}.category-nav a{flex:none;display:flex;align-items:center;gap:7px;padding:18px 17px;color:#667085;font-size:13px;font-weight:700;border-bottom:3px solid transparent}.category-nav a.is-active{color:var(--category-accent);border-bottom-color:var(--category-accent)}
.category-content { padding-top:38px; }
.category-feature { position:relative; min-height:410px; margin-bottom:48px; border-radius:24px; overflow:hidden; background:var(--category-accent); background-position:center; background-size:cover; box-shadow:0 24px 60px #15213b20; }
.category-feature-shade { position:absolute; inset:0; background:linear-gradient(90deg,#071424f2 0%,#071424c9 47%,#0714241c 100%); }
.category-feature-copy { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; min-height:410px; max-width:590px; padding:52px; color:#fff; }
.category-feature-copy>span,.category-section-head>div>span { color:var(--category-accent); font-size:11px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }.category-feature-copy>span{align-self:flex-start;padding:7px 11px;border-radius:99px;background:#fff}.category-feature-copy small{margin-top:20px;color:#ffffffad;font-weight:700}.category-feature h2{margin:7px 0 12px;font-size:clamp(30px,4vw,48px);line-height:1.05}.category-feature p{color:#ffffffc7;line-height:1.6}.category-feature-cta{align-self:flex-start;margin-top:12px;padding:14px 20px;border:0;border-radius:10px;color:#fff;background:var(--category-accent);font-weight:800}.category-feature-cta b{margin-left:16px}
.category-section { margin-bottom:48px; }.category-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:19px}.category-section-head h2{margin:4px 0 0;color:#142033;font-size:28px;font-weight:800}.category-brand-rail{display:flex;gap:12px;overflow:auto;padding:2px 0 8px;scrollbar-width:none}.category-brand{flex:0 0 150px;display:grid;place-items:center;gap:10px;min-height:126px;padding:17px;border:1px solid #e8eaee;border-radius:16px;background:#fff;color:#1d2939}.category-brand img,.category-brand b{width:54px;height:54px;object-fit:contain;border-radius:12px}.category-brand b{display:grid;place-items:center;background:var(--category-soft);color:var(--category-accent);font-size:22px}.category-brand span{font-size:13px;font-weight:700}.category-brand.is-active{border-color:var(--category-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--category-accent),transparent 80%)}
.category-search{display:flex;align-items:center;gap:9px;width:min(320px,100%);padding:11px 14px;border:1px solid #e1e5eb;border-radius:12px;background:#fff;color:#98a2b3}.category-search input{width:100%;padding:0;border:0;outline:0;background:transparent}.category-deal-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.category-deal-grid .discover-discount-card{display:flex!important;border:1px solid #e9ebef;border-radius:16px;background:#fff;box-shadow:none}.category-deal-grid .discover-discount-image{height:180px}.category-card-brand{margin-bottom:7px;color:var(--category-accent);font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.category-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:14px;color:#667085;font-size:11px}.category-card-foot b{color:var(--category-accent)}.category-local-badge{position:absolute;right:10px;bottom:10px;padding:6px 9px;border-radius:99px;background:#fff;color:#344054;font-size:10px;font-weight:750;box-shadow:0 4px 14px #0002}.category-empty{grid-column:1/-1;padding:64px;text-align:center;border-radius:20px;background:var(--category-soft)}.category-empty>i{font-size:36px;color:var(--category-accent)}.category-empty h2{margin:14px 0 8px}
@media(max-width:991px){.category-deal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.category-hero-mark{right:-60px;opacity:.55}}
@media(max-width:600px){.category-hero{padding:100px 0 44px}.category-hero-mark{display:none}.category-nav{top:59px}.category-feature,.category-feature-copy{min-height:380px}.category-feature-copy{padding:30px}.category-section-head{align-items:flex-start;flex-direction:column}.category-search{width:100%}.category-deal-grid{grid-template-columns:1fr}.category-hero h1{font-size:46px}}

/* Category pages: compact catalogue treatment */
.category-page { background:#f8f9fb; }
.category-hero { padding:96px 0 28px; color:#172033; background:var(--category-soft); border-bottom:1px solid color-mix(in srgb,var(--category-accent),transparent 82%); }
.category-hero-inner { min-height:150px; justify-content:space-between; gap:32px; }
.category-hero-copy { max-width:620px; }
.category-back { margin-bottom:22px; color:#667085; }
.category-back:hover { color:#172033; }
.category-kicker { margin-bottom:9px; color:var(--category-accent); font-size:11px; }
.category-hero h1 { margin-bottom:8px; color:#172033; font-size:clamp(32px,4vw,46px); line-height:1.08; letter-spacing:-.025em; font-weight:780; }
.category-hero p { color:#667085; font-size:15px; line-height:1.5; }
.category-hero-count { flex:none; min-width:112px; padding:18px 20px; border:1px solid color-mix(in srgb,var(--category-accent),transparent 70%); border-radius:12px; background:#ffffffa8; text-align:center; }
.category-hero-count strong,.category-hero-count span { display:block; }.category-hero-count strong{color:var(--category-accent);font-size:28px;line-height:1}.category-hero-count span{margin-top:6px;color:#667085;font-size:11px;font-weight:700}
.category-inline-stats { display:flex; align-items:center; gap:9px; margin-top:16px; color:#667085; font-size:12px; }.category-inline-stats strong{color:var(--category-accent);font-size:15px}.category-inline-stats span{width:1px;height:14px;background:#cfd4dc}
.category-nav { top:64px; box-shadow:0 1px 5px #10182808; }
.category-nav a { padding:14px 15px; }
.category-nav a { padding:17px 19px; font-size:14px; }.category-nav a i{font-size:15px}
.category-content { padding-top:28px; }
.category-feature { display:grid; grid-template-columns:minmax(220px,38%) 1fr; min-height:0; margin-bottom:34px; border:1px solid #e5e8ed; border-radius:16px; background:#fff; box-shadow:none; }
.category-feature-image { min-height:245px; background:var(--category-soft); background-position:center; background-size:cover; }
.category-feature-copy { min-height:245px; max-width:none; padding:30px 36px; color:#172033; }
.category-feature-copy>span { padding:0; color:var(--category-accent); background:transparent; font-size:11px; letter-spacing:.06em; }
.category-feature-copy small { margin-top:10px; color:#667085; }
.category-feature h2 { margin:5px 0 8px; font-size:28px; line-height:1.15; }
.category-feature p { display:-webkit-box; overflow:hidden; margin-bottom:8px; color:#667085; line-height:1.5; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.category-feature-cta { margin-top:6px; padding:10px 15px; border:1px solid var(--category-accent); color:var(--category-accent); background:#fff; font-size:13px; }
.category-section { margin-bottom:34px; }
.category-section-head { margin-bottom:14px; }
.category-section-head h2 { margin:0; font-size:21px; font-weight:750; }
.category-brand { flex-basis:126px; min-height:96px; padding:12px; border-radius:12px; }
.category-brand img,.category-brand b { width:42px; height:42px; }
.category-deal-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.category-deal-grid .discover-discount-card { border-radius:12px; }
.category-deal-grid .discover-discount-image { height:150px; }
.category-deal-grid .discover-discount-body { padding:15px; }
.category-deal-grid .discover-discount-title { font-size:15px; }
.category-deal-grid .discover-discount-desc { font-size:12px; -webkit-line-clamp:2; }
@media(max-width:991px){.category-deal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.category-hero{padding:84px 0 22px}.category-hero-inner{min-height:125px;align-items:flex-end}.category-hero-count{min-width:88px;padding:14px 10px}.category-nav{top:59px}.category-content{padding-top:20px}.category-feature{grid-template-columns:1fr}.category-feature-image{min-height:175px}.category-feature-copy{min-height:0;padding:22px}.category-feature h2{font-size:23px}.category-section-head{align-items:center;flex-direction:row}.category-search{width:170px}.category-deal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.category-deal-grid .discover-discount-image{height:120px}.category-card-foot span{display:none}}

/* Shared public-site design language */
:root {
    --ui-blue:#1343de;
    --ui-ink:#172033;
    --ui-muted:#667085;
    --ui-bg:#f6f7f9;
    --ui-surface:#fff;
    --ui-border:#e4e7ec;
    --ui-radius:12px;
    --ui-shadow:0 8px 24px rgba(16,24,40,.06);
}
html,body { background:var(--ui-bg); color:var(--ui-ink); }
.promo-banner-eyebrow,.giveaways-hero-pill,.giveaway-detail-kicker,.crew-eyebrow,.shop-hero-kicker,.category-kicker,.cc-kicker { display:none!important; }
.header-title,.giveaways-hero-title,.shop-hero h1,.crew-upload-heading h1,.category-hero h1 { color:var(--ui-ink); font-family:'Inter',sans-serif; font-weight:750; letter-spacing:-.025em; }
.cc-home h1,.cc-home h2,.cc-heading h2,.cc-why h2 { font-family:'Inter',sans-serif; font-weight:750; letter-spacing:-.025em; }
.header-description,.giveaways-hero-subtitle,.shop-hero p,.crew-upload-heading p,.category-hero p { color:var(--ui-muted); line-height:1.6; }
.blue-cta,.cc-btn-primary,.shop-cta,.category-feature-cta { border-radius:10px; background:var(--ui-blue); box-shadow:none; font-weight:700; }
.blue-cta:hover,.cc-btn-primary:hover,.shop-cta:hover { filter:brightness(.94); box-shadow:none; transform:none; }
.discover-discount-card,.giveaway-card,.giveaway-detail-card,.shop-card,.shop-product-card,.crew-upload-panel,.category-feature,.category-brand { border:1px solid var(--ui-border); border-radius:var(--ui-radius); background:var(--ui-surface); box-shadow:none; }
.discover-discount-card:hover,.giveaway-card:hover,.shop-card:hover,.shop-product-card:hover,.category-brand:hover { border-color:#cdd3dc; box-shadow:var(--ui-shadow); transform:translateY(-2px); }
.discover-modal .modal-content,.giveaway-modal .modal-content { border:1px solid var(--ui-border); border-radius:var(--ui-radius); box-shadow:0 18px 45px rgba(16,24,40,.14); }
.contentTitle,.giveaways-section-title,.shop-section-title,.category-section-head h2 { color:var(--ui-ink); font-weight:750; letter-spacing:-.015em; }
input,select,textarea,.search-bar,.category-search { border-color:var(--ui-border); border-radius:10px; box-shadow:none; }
.category-card-brand { color:var(--ui-muted); font-size:12px; font-weight:650; letter-spacing:0; text-transform:none; }
.cc-category,.cc-deal,.cc-story,.cc-service-card { border-radius:var(--ui-radius); }
.cc-category,.cc-service-card { border:1px solid var(--ui-border); box-shadow:none; }
.category-hero { color:var(--ui-ink); }
.category-feature-copy>span { font-size:12px; font-weight:700; letter-spacing:0; text-transform:none; }
.crew-upload-page { color:var(--ui-ink); }
@media(max-width:767px){.header-title,.giveaways-hero-title,.category-hero h1,.crew-upload-heading h1{font-size:32px}}

/* Discover directory */
.discover-header { height:285px; background:#eef2f8; }
.discover-header .header-image { background:#eef2f8; }
.discover-header .container { text-align:left; }
.discover-header .header-title { max-width:720px; margin:8px 0 8px; font-size:40px; }
.discover-header .header-description { margin:0; }
.discover-header .discover-header-search { max-width:680px; margin-top:20px; }
.discover-header .search-bar { background:#fff; border:1px solid var(--ui-border); box-shadow:none; }
.discover-page { padding-top:32px; }
.discover-section-heading { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:15px; }
.discover-section-heading .contentTitle { margin:0; font-size:22px; }
.discover-section-heading p { margin:4px 0 0; color:var(--ui-muted); font-size:13px; }
.discover-category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.discover-category-link { display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:13px; min-height:92px; padding:16px; border:1px solid var(--ui-border); border-radius:var(--ui-radius); color:var(--ui-ink); background:#fff; transition:border-color .18s,transform .18s,box-shadow .18s; }
.discover-category-link:hover { color:var(--ui-ink); border-color:color-mix(in srgb,var(--category-accent),#fff 45%); box-shadow:var(--ui-shadow); transform:translateY(-2px); }
.discover-category-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:10px; color:var(--category-accent); background:var(--category-soft); font-size:18px; }
.discover-category-link strong,.discover-category-link small { display:block; }.discover-category-link strong{font-size:15px}.discover-category-link small{display:-webkit-box;overflow:hidden;margin-top:3px;color:var(--ui-muted);font-size:11px;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}.discover-category-arrow{color:#98a2b3;font-size:12px}
.discover-brand-card { min-width:145px; padding:14px; border:1px solid var(--ui-border); border-radius:var(--ui-radius); background:#fff; }
.discover-brand-avatar { width:52px; height:52px; margin-bottom:6px; border-radius:10px; }
.discover-map-wrap { border:1px solid var(--ui-border); border-radius:var(--ui-radius); box-shadow:none; }
.discover-discount-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.discover-discount-card { border-radius:var(--ui-radius); box-shadow:none; }
.discover-discount-image { height:165px; }
.discover-discount-body { padding:15px; }
@media(max-width:991px){.discover-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.discover-discount-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.discover-header{height:260px}.discover-header .header-title{font-size:32px}.discover-category-grid{grid-template-columns:1fr}.discover-category-link{min-height:82px}.discover-discount-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.discover-discount-image{height:120px}.discover-discount-body{padding:12px}.discover-brand-card{min-width:120px}}

@media (max-width: 768px) {
    .discover-map-heading { align-items:flex-start; flex-direction:column; }
    .discover-map {
        height: 280px;
    }
}

.discover-search {
    margin-bottom: 26px;
}

.discover-scroll {
    position: relative;
}

.discover-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: none;
    background: #111;
    color: #fff;
    border: 1px solid #111;
    backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.discover-scroll-btn.is-left {
    left: -8px;
}

.discover-scroll-btn.is-right {
    right: -8px;
}

.discover-scroll:hover .discover-scroll-btn {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 900px) {
    .discover-scroll-btn {
        display: none;
    }
}

.discover-brand-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.discover-brand-scroll::-webkit-scrollbar {
    height: 0;
}

.discover-brand-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    padding: 18px 16px;
    box-shadow: none;
    border: none;
    text-align: center;
    min-width: 180px;
    scroll-snap-align: start;
    appearance: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.discover-brand-card:focus,
.discover-brand-card:focus-visible,
.discover-brand-card:active {
    outline: none !important;
    box-shadow: none !important;
}

.discover-brand-card:hover {
    background: rgba(19, 67, 222, 0.08);
    box-shadow: none;
}

.discover-brand-card.is-active {
    background: rgba(19, 67, 222, 0.16);
    box-shadow: none;
}

.discover-brand-avatar {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(19, 67, 222, 0.12);
    color: #1343DE;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 700;
    margin-bottom: 8px;
}

.discover-brand-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.discover-brand-avatar span {
    display: none;
}

.discover-brand-avatar.is-empty span,
.discover-brand-avatar.is-broken span {
    display: inline-flex;
}

.discover-brand-avatar.is-broken img {
    display: none;
}

.discover-brand-name {
    font-weight: 600;
    font-size: 14px;
}

.discover-type-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.discover-type-list::-webkit-scrollbar {
    height: 0;
}

.discover-type-pill {
    padding: 11px 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.75);
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    box-shadow: none;
    scroll-snap-align: start;
    transition: background 0.2s ease;
    text-decoration: none;
}

.discover-type-pill:focus,
.discover-type-pill:focus-visible,
.discover-type-pill:active {
    outline: none !important;
    box-shadow: none !important;
}

.discover-brand-card,
.discover-type-pill {
    outline: 2px solid transparent !important;
    outline-offset: 2px;
}

.discover-type-pill:hover {
    background: rgba(19, 67, 222, 0.08);
    box-shadow: none;
}

.discover-type-pill.is-active {
    background: rgba(19, 67, 222, 0.18);
    color: #0f2fa8;
    box-shadow: none;
}

.discover-discount-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    align-items: stretch;
}

.discover-discount-card {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    height: 100%;
}

.discover-discount-card.is-hidden {
    display: none;
}

.discover-page.is-filtered .discover-discount-card.is-hidden {
    display: flex !important;
}

.discover-more {
    margin-top: 18px;
    text-align: center;
}

.discover-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    color: #0f2fa8;
    background: rgba(19, 67, 222, 0.12);
    border: 1px solid rgba(19, 67, 222, 0.25);
    box-shadow: 0 12px 26px rgba(19, 67, 222, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.discover-more-btn i {
    font-size: 14px;
}

.discover-more-btn:hover {
    background: rgba(19, 67, 222, 0.18);
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(19, 67, 222, 0.16);
    cursor: pointer;
}

.discover-discount-image {
    height: 160px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.discover-discount-image.is-empty,
.discover-discount-image.is-broken {
    background: linear-gradient(135deg, rgba(19, 67, 222, 0.35), rgba(8, 12, 28, 0.55));
}

.discover-discount-image-fallback {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(19, 67, 222, 0.18), rgba(0, 0, 0, 0.05));
}

.discover-discount-fallback-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0;
}

.discover-discount-image.is-empty .discover-discount-fallback-icon,
.discover-discount-image.is-broken .discover-discount-fallback-icon {
    opacity: 1;
}

.discover-discount-body {
    padding: 16px;
    display: grid;
    gap: 10px;
    grid-template-rows: auto auto 1fr auto;
    flex: 1;
}

.discover-discount-title {
    font-size: 18px;
    font-weight: 700;
}

.discover-discount-desc {
    font-size: 13px;
    opacity: 0.75;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.discover-discount-meta {
    margin-top: auto;
}

.discover-discount-meta {
    display: grid;
    gap: 10px;
    align-content: start;
}

.discover-brand-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.discover-brand-chip img,
.discover-brand-chip span {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.discover-brand-chip img {
    object-fit: contain;
    width: 36px;
    height: 36px;
}

.discover-brand-chip span {
    display: none;
}

.discover-brand-chip.is-empty span,
.discover-brand-chip.is-broken span {
    display: inline-flex;
}

.discover-brand-chip.is-broken img {
    display: none;
}

.discover-brand-text {
    font-weight: 600;
    font-size: 13px;
}

.discover-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.65);
    align-items: flex-start;
}

.discover-meta-chips span {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    align-self: flex-start;
}

.discover-location-chip i {
    font-size: 11px;
}

.discover-location-chip {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.discover-modal .modal-content {
    border-radius: 18px;
    border: none;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.discover-modal .modal-body {
    padding: 0;
}

.discover-modal-hero {
    height: 220px;
    position: relative;
}

.discover-modal-hero-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.discover-modal-hero-image.is-empty {
    background: linear-gradient(135deg, rgba(19, 67, 222, 0.45), rgba(8, 12, 28, 0.7));
}

.discover-modal-hero-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0;
}

.discover-modal-hero-image.is-empty .discover-modal-hero-fallback {
    opacity: 1;
}

.discover-modal-body {
    padding: 18px 20px 20px;
    display: grid;
    gap: 10px;
}

.discover-modal-title {
    font-size: 20px;
    font-weight: 700;
}

.discover-modal-desc {
    font-size: 14px;
    opacity: 0.75;
}

.discover-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.65);
}

.discover-modal-meta span {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
}

.discover-modal-terms {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
}

.discover-modal-alert {
    display: none;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    align-items: flex-start;
}

.discover-modal-alert.is-visible {
    display: flex;
}

.discover-modal-alert-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(19, 67, 222, 0.12);
    color: #0f2fa8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: 0 0 auto;
}

.discover-modal-alert-body {
    display: grid;
    gap: 6px;
}

.discover-modal-alert-title {
    font-weight: 700;
    font-size: 14px;
}

.discover-modal-alert-text {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.7);
}

.discover-modal-alert-actions {
    display: none;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.discover-modal-alert.is-login .discover-modal-alert-actions {
    display: flex;
}

.discover-modal-alert-secondary {
    font-weight: 600;
    color: #000000;
    text-decoration: none;
}

.discover-modal-alert-secondary:hover {
    color: #000000;
}

.discover-modal-alert a,
.discover-modal-alert a:hover {
    color: #000000;
}

.discover-modal-alert .discover-modal-alert-login,
.discover-modal-alert .discover-modal-alert-login:hover {
    color: #ffffff;
}

.discover-modal-code {
    display: none;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.discover-modal-code.is-visible {
    display: grid;
}

.discover-modal-code-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.discover-modal-code-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.discover-modal-code-value {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.16em;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(19, 67, 222, 0.08);
    color: #0f2fa8;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.discover-modal-copy {
    border: none;
    background: #1343DE;
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(19, 67, 222, 0.25);
    transition: background 0.2s ease, transform 0.2s ease;
}

.discover-modal-copy:hover {
    background: #11319c;
}

.discover-modal-copy:active {
    transform: translateY(1px);
}

.discover-modal-code-note {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.55);
}

.discover-modal-instore {
    display: none;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(19, 67, 222, 0.08);
    align-items: center;
}

.discover-modal-instore.is-visible {
    display: flex;
}

.discover-modal-locations {
    margin-top: 16px;
    display: none;
}

.discover-modal-locations.is-visible {
    display: block;
}

.discover-modal-locations-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
}

.discover-modal-locations-list {
    display: grid;
    gap: 8px;
}

.discover-modal-location {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.discover-modal-location.is-active {
    border-color: rgba(19, 67, 222, 0.4);
    background: rgba(19, 67, 222, 0.08);
}

.discover-modal-location-title {
    font-weight: 600;
}

.discover-modal-location-address {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
}

.discover-modal-claimed-location {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(19, 67, 222, 0.08);
    color: rgba(0, 0, 0, 0.75);
    font-size: 13px;
    font-weight: 600;
    display: none;
}

.discover-modal-claimed-location.is-visible {
    display: block;
}

.discover-map-open {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(19, 67, 222, 0.12);
    color: #1343de;
    cursor: pointer;
}

.discover-map-marker {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.discover-map-marker img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.discover-map-marker span {
    font-weight: 700;
    color: #1343de;
}

.discover-modal-instore-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(19, 67, 222, 0.15);
    color: #0f2fa8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.discover-modal-instore-title {
    font-weight: 700;
    font-size: 14px;
}

.discover-modal-instore-text {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.65);
}

.discover-modal-claim {
    width: 100%;
    text-align: center;
    margin-top: 14px;
}

.discover-modal-claim[disabled] {
    background: rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.6);
    cursor: not-allowed;
}

.discover-modal-redirect {
    width: 100%;
    text-align: center;
    margin-top: 14px;
    display: none;
}

.discover-modal-redirect.is-visible {
    display: inline-block;
}

.discover-modal .modal-content button.close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    text-shadow: none;
}

.giveaways-header {
    height: 270px;
    overflow: visible;
    position: relative;
}

.giveaways-header .header-image {
    background: radial-gradient(circle at top, rgba(19, 67, 222, 0.18), rgba(240, 240, 240, 1) 70%);
    filter: none;
    opacity: 1;
}

.giveaways-header .header-image::after {
    display: none;
}

.giveaways-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 90px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(240, 240, 240, 0), rgba(240, 240, 240, 1) 80%);
}

.giveaways-header-inner {
    padding-top: 100px;
}

.giveaway-detail-header {
    height: 320px;
}

.giveaway-detail-header .giveaways-header-inner {
    padding-top: 70px;
}

.giveaways-hero {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.giveaways-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(19, 67, 222, 0.12);
    color: #0f2fa8;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 18px;
}

.giveaways-hero-title {
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 10px;
}

.giveaways-hero-subtitle {
    font-size: 16px;
    font-weight: 500;
    opacity: 0.7;
}

.giveaways-page {
    padding-top: 24px;
    padding-bottom: 50px;
}

.giveaways-section {
    margin-bottom: 36px;
}

.giveaways-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.giveaways-section-title {
    font-size: 24px;
    font-weight: 700;
}

.giveaways-section-subtitle {
    font-size: 13px;
    opacity: 0.7;
    margin-top: 6px;
}

.giveaways-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.giveaways-carousel {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 6px 4px 10px;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.giveaways-carousel::-webkit-scrollbar {
    height: 0;
}

.giveaway-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    min-width: 250px;
    max-width: 280px;
}

.giveaway-card:hover {
    transform: none;
    box-shadow: none;
}

.giveaway-card-image {
    height: 170px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.giveaway-card-image.is-empty {
    background: linear-gradient(135deg, rgba(19, 67, 222, 0.28), rgba(0, 0, 0, 0.12));
}

.giveaway-card-image-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 32px;
    opacity: 0;
}

.giveaway-card-image.is-empty .giveaway-card-image-fallback {
    opacity: 1;
}

.giveaway-card-body {
    padding: 16px;
    display: grid;
    gap: 10px;
    flex: 1;
}

.giveaway-card-title {
    font-weight: 700;
    font-size: 18px;
}

.giveaway-card-desc {
    font-size: 13px;
    opacity: 0.7;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.giveaway-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.65);
    align-self: flex-start;
}

.giveaway-card-meta span {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
}

.giveaway-card-countdown {
    font-size: 13px;
    font-weight: 700;
    color: #0f2fa8;
    margin-top: auto;
}

.giveaway-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.giveaway-card-link:hover,
.giveaway-card-link:focus,
.giveaway-card-link:active {
    text-decoration: none;
    color: inherit;
}

.giveaway-card-actions {
    margin-top: auto;
}

.giveaway-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.7);
    font-weight: 600;
    border: none;
    width: 100%;
    gap: 8px;
}

.giveaway-secondary.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.giveaways-empty {
    padding: 24px;
    text-align: center;
    font-weight: 600;
    opacity: 0.6;
}

.giveaways-suggest-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.giveaways-suggest-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(19, 67, 222, 0.12);
    color: #1343de;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.giveaways-suggest-title {
    font-weight: 700;
    font-size: 18px;
}

.giveaways-suggest-subtitle {
    font-size: 13px;
    opacity: 0.7;
}

.giveaways-suggest-cta {
    margin-left: auto;
}

.giveaway-card-blank {
    cursor: default;
    pointer-events: none;
    min-height: 320px;
    background: #fff;
    border: 1px dashed rgba(0, 0, 0, 0.1);
    opacity: 0.5;
}

.giveaway-detail {
    padding-top: 120px;
    padding-bottom: 60px;
}

.giveaway-detail-shell {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.giveaway-detail-titlebar {
    text-align: center;
    display: grid;
    gap: 10px;
}

.giveaway-detail-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(19, 67, 222, 0.1);
    color: #0f2fa8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    min-height: 28px;
    width: fit-content;
    margin: 0 auto;
}

.giveaway-detail-title {
    font-size: 32px;
    font-weight: 700;
}

.giveaway-detail-subtitle {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
}

.giveaway-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
    gap: 24px;
    align-items: start;
    margin-bottom: 28px;
}

.giveaway-detail-card {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
    overflow: hidden;
}

.giveaway-detail-summary {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.giveaway-detail-hero {
    min-height: 260px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.giveaway-detail-hero.is-empty {
    background: linear-gradient(140deg, rgba(19, 67, 222, 0.4), rgba(0, 0, 0, 0.25));
}

.giveaway-detail-hero-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 40px;
    opacity: 0;
}

.giveaway-detail-hero.is-empty .giveaway-detail-hero-fallback {
    opacity: 1;
}

.giveaway-detail-body {
    padding: 20px 22px 24px;
    display: grid;
    gap: 12px;
}

.giveaway-detail-card-heading {
    display: grid;
    gap: 8px;
}

.giveaway-detail-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1343de;
    background: rgba(19, 67, 222, 0.12);
    border-radius: 999px;
    padding: 6px 12px;
    min-height: 28px;
    width: fit-content;
}

.giveaway-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.65);
}

.giveaway-detail-meta span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    min-height: 28px;
}

.giveaway-detail-meta span.is-hidden {
    display: none;
}

.giveaway-detail-countdowns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.giveaway-detail-countdown {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.05);
}

.giveaway-detail-countdown-label {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.65;
}

.giveaway-detail-countdown-value {
    margin-top: 6px;
    font-size: 18px;
    font-weight: 700;
}

.giveaway-detail-entry {
    display: grid;
    gap: 10px;
}

.giveaway-detail-entry-note {
    font-size: 12px;
    opacity: 0.7;
}

.giveaway-detail-enter {
    width: 100%;
    text-align: center;
}

.giveaway-detail-enter.is-disabled {
    background: #d9d9d9 !important;
    color: rgba(0, 0, 0, 0.6) !important;
    cursor: not-allowed;
    pointer-events: none;
}

.giveaway-detail-enter.is-disabled.is-login-cta {
    cursor: pointer;
    pointer-events: auto;
}

.giveaway-detail-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 16px;
    border-radius: 7px;
    border: 1px dashed rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.7);
    font-weight: 600;
    background: rgba(0, 0, 0, 0.04);
    text-decoration: none;
}

.giveaway-detail-buy.is-hidden {
    display: none;
}

.giveaway-detail-buy:hover {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.85);
    background: rgba(0, 0, 0, 0.06);
}

.giveaway-purchase-modal .modal-content {
    border-radius: 20px;
    border: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.giveaway-purchase-modal {
    max-width: 520px;
}

.modal-backdrop.show {
    opacity: 0.35 !important;
}

.modal.fade .modal-dialog {
    transition: transform 0.25s ease;
}

.giveaway-purchase-header {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
}

.giveaway-purchase-title {
    font-size: 20px;
    font-weight: 700;
}

.giveaway-purchase-subtitle {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.6);
}

.giveaway-purchase-summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.04);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
}

.giveaway-purchase-field label {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
    display: block;
}

.giveaway-entry-count {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    font-size: 14px;
}

.giveaway-purchase-price {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
}

.giveaway-purchase-cards {
    margin-top: 12px;
}

.giveaway-purchase-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.giveaway-purchase-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(19, 67, 222, 0.08);
    color: #0f2fa8;
    font-weight: 700;
    margin-top: 14px;
}

.giveaway-purchase-actions {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}

.giveaway-purchase-empty {
    padding: 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.04);
    font-weight: 600;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.6);
}

.giveaway-detail-alert {
    display: none;
    font-size: 12px;
    font-weight: 600;
    color: #1343de;
    background: rgba(19, 67, 222, 0.1);
    border-radius: 12px;
    padding: 10px 12px;
}

.giveaway-detail-alert.is-visible {
    display: block;
}

.giveaway-detail-card-title {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 12px;
}

.giveaway-detail-terms-body {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.75);
}

.giveaway-detail-accordion {
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.96);
    overflow: hidden;
}

.giveaway-accordion-toggle {
    width: 100%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    font-weight: 700;
    font-size: 18px;
    color: #111;
}

.giveaway-accordion-toggle i {
    transition: transform 0.2s ease;
}

.giveaway-accordion-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.giveaway-detail-accordion .giveaway-detail-terms-body {
    padding: 0 18px 16px;
}

.giveaway-detail-section {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
    padding: 18px 20px;
    margin-bottom: 18px;
}

.giveaway-detail .giveaways-section.giveaways-suggest {
    margin-top: 6px;
}

.giveaway-detail-entries {
    display: grid;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

.giveaway-detail-entry-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.05);
    font-size: 13px;
    font-weight: 600;
}

.giveaway-detail-entry-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.giveaway-detail-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(126deg, rgba(81, 129, 160, 1) 0%, rgba(78, 116, 121, 1) 100%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 700;
}

.giveaway-detail-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.giveaway-detail-avatar span {
    display: block;
}

.giveaway-detail-empty {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.7;
}

.giveaways-modal .modal-content {
    border-radius: 20px;
    overflow: hidden;
}

.giveaway-modal-hero {
    height: 220px;
    position: relative;
}

.giveaway-modal-hero-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.giveaway-modal-hero-image.is-empty {
    background: linear-gradient(135deg, rgba(19, 67, 222, 0.45), rgba(0, 0, 0, 0.6));
}

.giveaway-modal-hero-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 40px;
    opacity: 0;
}

.giveaway-modal-hero-image.is-empty .giveaway-modal-hero-fallback {
    opacity: 1;
}

.giveaway-modal-body {
    padding: 18px 22px 24px;
    display: grid;
    gap: 12px;
}

.giveaway-modal-status {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1343de;
    background: rgba(19, 67, 222, 0.12);
    border-radius: 999px;
    padding: 6px 12px;
    width: fit-content;
}

.giveaway-modal-title {
    font-size: 22px;
    font-weight: 700;
}

.giveaway-modal-desc {
    font-size: 14px;
    opacity: 0.7;
}

.giveaway-modal-meta {
    font-size: 13px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.65);
}

.giveaway-modal-countdowns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.giveaway-modal-countdown {
    padding: 12px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.04);
}

.giveaway-modal-countdown-label {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.6;
}

.giveaway-modal-countdown-value {
    font-size: 16px;
    font-weight: 700;
    margin-top: 6px;
}

.giveaway-modal-terms-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.giveaway-modal-terms-body {
    font-size: 13px;
    line-height: 1.6;
    opacity: 0.75;
}

.giveaway-modal-entry-note {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 8px;
}

.giveaway-modal-alert {
    display: none;
    font-size: 12px;
    font-weight: 600;
    color: #1343de;
    background: rgba(19, 67, 222, 0.1);
    border-radius: 12px;
    padding: 10px 12px;
}

.giveaway-modal-alert.is-visible {
    display: block;
}

@media (max-width: 768px) {
    .giveaways-hero-title {
        font-size: 32px;
    }

    .giveaways-suggest-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .giveaways-suggest-cta {
        width: 100%;
        text-align: center;
    }

    .giveaway-modal-countdowns {
        grid-template-columns: 1fr;
    }

    .giveaway-detail-title {
        font-size: 24px;
    }

    .giveaway-detail-summary {
        grid-template-columns: 1fr;
    }

    .giveaway-detail-countdowns {
        grid-template-columns: 1fr;
    }
}

.purchase-modal .modal-content {
    border-radius: 18px;
    border: none;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.purchase-modal .modal-body {
    padding: 20px 22px 24px;
}

.purchase-modal * {
    box-sizing: border-box;
}

.purchase-header {
    margin-bottom: 16px;
}

.purchase-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(192, 57, 43, 0.12);
    color: #c0392b;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}

.purchase-alert-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(192, 57, 43, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.purchase-prompt {
    display: none;
}

.purchase-alert-success {
    background: rgba(30, 132, 73, 0.12);
    color: #1e8449;
}

.purchase-alert-success .purchase-alert-icon {
    background: rgba(30, 132, 73, 0.2);
}

.purchase-title {
    font-size: 20px;
    font-weight: 700;
}

.purchase-subtitle {
    font-size: 13px;
    opacity: 0.7;
}

.purchase-step {
    display: none;
    gap: 12px;
}

.purchase-step.is-active {
    display: grid;
}

.purchase-step-title {
    font-size: 14px;
    font-weight: 700;
}

.purchase-form-row {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.purchase-field {
    display: grid;
    gap: 6px;
    width: 100%;
}

.purchase-field label {
    font-size: 12px;
    font-weight: 600;
    margin: 0;
}

.purchase-field input,
.purchase-field select {
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.8);
    outline: none;
    width: 100%;
}

.purchase-field-full {
    grid-column: span 2;
}

.purchase-link {
    border: none;
    background: transparent;
    color: #1343DE;
    font-weight: 600;
    font-size: 12px;
    text-align: left;
    padding: 0;
    margin-bottom: 4px;
    align-self: flex-start;
}

.purchase-card-list {
    display: grid;
    gap: 10px;
}

.purchase-card-item {
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.85);
}

.purchase-card-item input[type="radio"] {
    margin: 0;
}

.purchase-card-meta {
    font-weight: 600;
    font-size: 13px;
}

.purchase-card-sub {
    font-size: 12px;
    opacity: 0.65;
}

.purchase-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.purchase-card-prompt {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
}

.purchase-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
}

.purchase-back {
    filter: grayscale(1);
}

.purchase-prompt {
    font-size: 12px;
    color: #c0392b;
    flex: 1;
    text-align: center;
}

.purchase-review {
    display: grid;
    gap: 12px;
}

.purchase-review-accordion {
    display: grid;
    gap: 10px;
}

.purchase-review-item {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.purchase-review-toggle {
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 12px 14px;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.purchase-review-toggle i {
    transition: transform 0.2s ease;
}

.purchase-review-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.purchase-review-item .purchase-review-text {
    padding: 0 14px 12px;
}

.purchase-review-block {
    border-radius: 12px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.04);
}

.purchase-review-title {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.purchase-review-text {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.75);
}

.purchase-review-card {
    display: flex;
    align-items: center;
    gap: 10px;
}

.purchase-review-card img {
    width: 36px;
    height: 24px;
    object-fit: contain;
}

.purchase-review-card-title {
    font-weight: 600;
    font-size: 13px;
}

.purchase-review-card-sub {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
}

.purchase-review-order {
    background: rgba(19, 67, 222, 0.08);
}

.purchase-review-lines {
    display: grid;
    gap: 8px;
}

.purchase-review-line {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.75);
}

.purchase-review-line i {
    color: rgba(0, 0, 0, 0.45);
}

.purchase-review-line strong {
    font-weight: 700;
}

@media (max-width: 575px) {
    .purchase-form-row {
        grid-template-columns: 1fr;
    }

    .purchase-field-full {
        grid-column: span 1;
    }

    .purchase-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .purchase-card-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

.discover-empty {
    padding: 20px;
    text-align: center;
    font-weight: 600;
    opacity: 0.6;
}

@media (max-width: 900px) {
    .discover-hero-title {
        font-size: 32px;
    }
}

.form-prompt {
    color: #ff4757;
    font-size: 14px;
    margin-top: 5px;
}

.nav-avatar {
    width: 35px;
    height: 35px;
    border-radius: 100%;
    position: absolute;
    background: #5181A0;
    background: linear-gradient(126deg, rgba(81, 129, 160, 1) 0%, rgba(78, 116, 121, 1) 100%);
    text-align: center;
    font-size: 14px;
    color: rgb(255, 255, 255);
    display: inline-block;
    vertical-align: top;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    object-fit: cover;
}

.nav-icon {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: #1343de !important;
    margin-left: 10px;
    margin-top: 4px;
    font-size: 20px;
}

.nav-icon i {
    font-size: 20px;
}

.nav-icon.dropdown-toggle::after {
    display: none;
}

.nav-icon .basket-count {
    position: absolute;
    top: -4px;
    right: -4px;
    margin: 0;
}

.nav-icon.is-hidden,
.nav-icon.is-hidden .basket-count {
    display: none !important;
}

.basket-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: #1343de;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.shop-page {
    width: 100%;
    padding: 80px 0 60px;
    position: relative;
}

.shop-layout {
    margin-top: 10px;
}

.shop-filters {
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
    align-self: flex-start;
    height: max-content;
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 14px 30px rgba(12, 20, 46, 0.08);
}

.shop-filters-title {
    font-weight: 700;
    margin-bottom: 12px;
}

.shop-filters label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin-top: 10px;
}

.shop-section-title {
    font-size: 24px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: #111;
    margin: 14px 0 8px;
}

.shop-filter-select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    margin-bottom: 8px;
}

.shop-filter-hidden {
    display: none;
}

.shop-filter-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.shop-filter-swatch {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 2px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
    background: #fff;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.shop-filter-swatch.is-active {
    transform: scale(1.04);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35), 0 0 0 7px var(--swatch-color, #1343de);
    border-color: rgba(0, 0, 0, 0.18);
}

.shop-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}

.shop-category-scroll {
    margin-bottom: 16px;
}

.shop-category-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 4px 10px;
    scroll-behavior: smooth;
}

.shop-category-strip .shop-category-tile {
    min-width: 110px;
    box-shadow: none;
}

.shop-category-scroll .discover-scroll-btn {
    opacity: 1;
    pointer-events: auto;
}

.shop-category-tile {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 8px;
    background: #fff;
    display: grid;
    gap: 6px;
    text-align: center;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
    position: relative;
}

.shop-category-tile.is-active {
    border-color: rgba(19, 67, 222, 0.5);
    box-shadow: 0 10px 20px rgba(19, 67, 222, 0.12);
    background: rgba(19, 67, 222, 0.06);
}

.shop-category-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.45);
    background-color: rgba(0, 0, 0, 0.04);
    font-size: 18px;
    position: relative;
    overflow: hidden;
}

.shop-category-tile.is-active .shop-category-image {
    box-shadow: inset 0 0 0 2px rgba(19, 67, 222, 0.35);
}

.shop-category-tile.is-active .shop-category-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(19, 67, 222, 0.22), rgba(19, 67, 222, 0.04));
}

.shop-category-image-empty {
    background: linear-gradient(135deg, rgba(19, 67, 222, 0.15), rgba(19, 67, 222, 0.05));
    color: #1343de;
}

.shop-category-name {
    font-size: 11px;
    font-weight: 700;
    color: #111;
}

.shop-category-tile.is-active .shop-category-name {
    color: #1343de;
}

.shop-filter-reset {
    border: none;
    background: rgba(0, 0, 0, 0.08);
    color: #111;
    font-weight: 700;
    padding: 10px 12px;
    border-radius: 999px;
    width: 100%;
    margin-top: 10px;
}

.shop-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
    padding: 24px;
    border-radius: 18px;
    background: linear-gradient(120deg, #f3f6ff 0%, #ffffff 55%, #eef3ff 100%);
    box-shadow: 0 18px 40px rgba(12, 20, 46, 0.08);
}

.shop-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.shop-top .contentTitle {
    margin-bottom: 8px;
}

.shop-top-subtitle {
    color: #6b7280;
    font-weight: 500;
}

.shop-top-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.shop-top-secondary {
    background: #fff;
    color: #1343de;
    border: 1px solid rgba(19, 67, 222, 0.25);
}

.shop-top-secondary:hover {
    background: #fff;
    color: #0f2fa8;
}

.shop-hero.shop-hero-products {
    position: relative;
    overflow: hidden;
    padding: 32px;
    background: linear-gradient(135deg, rgba(10, 42, 150, 0.12) 0%, rgba(255, 255, 255, 0.92) 45%, rgba(19, 67, 222, 0.12) 100%);
}

.shop-hero.shop-hero-products::before,
.shop-hero.shop-hero-products::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    opacity: 0.35;
    background: radial-gradient(circle, rgba(19, 67, 222, 0.35), transparent 70%);
}

.shop-hero.shop-hero-products::before {
    width: 220px;
    height: 220px;
    top: -60px;
    right: 12%;
}

.shop-hero.shop-hero-products::after {
    width: 280px;
    height: 280px;
    bottom: -120px;
    left: 8%;
}

.shop-hero-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 1;
    max-width: 560px;
}

.shop-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(19, 67, 222, 0.85);
}

.shop-hero-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.shop-cta-light {
    background: rgba(255, 255, 255, 0.9);
    color: #1343de;
    border: 1px solid rgba(19, 67, 222, 0.25);
}

.shop-hero-panel {
    position: relative;
    z-index: 1;
    padding: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 12px 24px rgba(12, 20, 46, 0.08);
    min-width: 240px;
}

.shop-hero-panel-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 12px;
    color: #0f1730;
}

.shop-hero-panel-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shop-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(19, 67, 222, 0.1);
    color: #0f2fa8;
    font-size: 12px;
    font-weight: 600;
}

.shop-hero-pill i {
    opacity: 0.8;
}

.shop-hero h1 {
    font-size: 28px;
    margin: 0 0 6px;
}

.shop-hero p {
    margin: 0;
    color: #59627a;
}

.shop-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 999px;
    background: #1343de;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.shop-cta:hover {
    color: #fff;
    text-decoration: none;
}

.shop-cta-light:hover {
    background: #fff;
    color: #0f2fa8;
}

.shop-section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    margin: 18px 0 12px;
}

.shop-section-header .shop-section-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.shop-category-header .shop-section-title {
    margin-top: -24px;
}

.shop-section-subtitle {
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    color: #6b7280;
    font-weight: 500;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.shop-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.shop-results-bottom {
    margin-top: 20px;
    margin-bottom: 0;
}

.shop-results-count {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}

.shop-pagination {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.shop-pagination-link {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.7);
}

.shop-pagination-link.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.shop-pagination-status {
    font-size: 12px;
    font-weight: 700;
    color: #111;
}

.shop-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: none;
    overflow: hidden;
}

.shop-card-media img,
.shop-card-placeholder {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: #f3f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b92a7;
    font-size: 26px;
}

.shop-card-media {
    position: relative;
    background: radial-gradient(circle at top, rgba(19, 67, 222, 0.12), transparent 60%);
}

.shop-card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.shop-card-link {
    color: inherit;
    text-decoration: none;
}

.shop-card-link:hover {
    text-decoration: none;
    color: inherit;
}

.shop-card-title {
    font-weight: 700;
    font-size: 16px;
}

.shop-card-desc {
    color: #6d7487;
    font-size: 13px;
}

.shop-card-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(19, 67, 222, 0.1);
    color: #1343de;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    width: fit-content;
}

.shop-card-availability {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #6b7280;
}

.shop-card-variant-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.shop-card-variant-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    font-size: 11px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.65);
}

.shop-card-swatches {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.shop-card-swatch {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.shop-card-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: auto;
}

.shop-card-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}

.shop-card-price {
    font-weight: 700;
    color: #111;
}

.shop-card-btn {
    border: none;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 700;
}

.shop-card-btn.blue-cta {
    margin-right: 0;
    border-radius: 7px;
    width: 100%;
    text-align: center;
}

.shop-card-btn:disabled {
    background: rgba(0, 0, 0, 0.12) !important;
    color: rgba(0, 0, 0, 0.6) !important;
    cursor: not-allowed;
}

.shop-qty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.shop-qty-input {
    width: 54px;
    border: none;
    text-align: center;
    font-weight: 600;
    background: transparent;
    color: #111;
    font-size: 13px;
}

.shop-qty-btn {
    border: none;
    background: #1343de;
    width: 32px;
    height: 32px;
    font-weight: 700;
    color: #fff;
    border-radius: 999px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.shop-qty-btn:hover {
    background: #0f2fa8;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(19, 67, 222, 0.22);
}

.shop-qty-input:focus {
    outline: none;
}

.shop-qty-input::-webkit-outer-spin-button,
.shop-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.shop-qty-input {
    -moz-appearance: textfield;
}

.shop-qty-lg .shop-qty-input {
    width: 58px;
    font-size: 15px;
}

.shop-qty-lg .shop-qty-btn {
    width: 36px;
    height: 36px;
}

.shop-card-variants {
    display: flex;
    gap: 10px;
}

.shop-variant-select {
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    font-size: 13px;
}

.shop-variant-swatches {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.shop-variant-swatch {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 2px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
    background: #fff;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.shop-variant-swatch.is-active {
    transform: scale(1.04);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35), 0 0 0 7px var(--swatch-color, #1343de);
    border-color: rgba(0, 0, 0, 0.18);
}

.product-page .container {
    max-width: 1200px;
}

.product-back {
    margin-bottom: 18px;
}

.product-back-title {
    margin-bottom: 18px;
}

.product-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 28px;
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 18px 40px rgba(12, 20, 46, 0.1);
}

.product-gallery {
    display: grid;
    gap: 12px;
}

.product-main-scroll:not(.has-multiple) .discover-scroll-btn {
    display: none;
}

.product-thumbs-scroll:not(.has-multiple) .discover-scroll-btn {
    display: none;
}

.product-main {
    background: radial-gradient(circle at top, rgba(19, 67, 222, 0.12), transparent 60%);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-main-placeholder {
    width: 100%;
    height: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #8b92a7;
    background: #f3f4f8;
}

.product-thumbs {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
}

.product-thumb-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
}

.product-thumb-scroll::-webkit-scrollbar {
    height: 0;
}

.product-thumb {
    width: 68px;
    height: 68px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 0;
    background: #fff;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

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

.product-thumb.is-active {
    box-shadow: 0 6px 14px rgba(19, 67, 222, 0.18);
    border-color: rgba(19, 67, 222, 0.35);
}

.product-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-title {
    font-size: 24px;
    font-weight: 700;
}

.product-desc {
    color: #6d7487;
    font-size: 14px;
    line-height: 1.6;
}

.product-price {
    font-size: 22px;
    font-weight: 700;
}

.product-stock {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
}

.product-stock.in-stock {
    color: #1e824c;
}

.product-stock.out-of-stock {
    color: #c0392b;
}

.product-recommendations {
    margin-top: 28px;
    padding: 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(19, 67, 222, 0.12), rgba(255, 255, 255, 0.7));
    border: 1px solid rgba(19, 67, 222, 0.12);
}

.product-recommendations-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.product-recommendations-title {
    font-size: 20px;
    font-weight: 700;
}

.product-recommendations-subtitle {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
}

.product-recommendations-scroll {
    position: relative;
}

.product-recommendations-list {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 6px 4px 10px;
    scroll-behavior: smooth;
}

.product-recommendations-list::-webkit-scrollbar {
    height: 6px;
}

.product-recommendations-list::-webkit-scrollbar-thumb {
    background: rgba(19, 67, 222, 0.2);
    border-radius: 999px;
}

.shop-card.shop-card-compact {
    min-width: 220px;
    max-width: 240px;
    border-radius: 16px;
    box-shadow: none;
}

.shop-card.shop-card-compact .shop-card-body {
    gap: 8px;
}

.shop-card.shop-card-compact .shop-card-title {
    font-size: 15px;
}

.product-recommendations .discover-scroll-btn {
    background: #111;
    border: 1px solid #111;
    color: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
}

.product-recommendations-scroll .discover-scroll-btn {
    opacity: 1;
    pointer-events: auto;
}

.product-recommendations-scroll .discover-scroll-btn.is-left {
    left: 8px;
}

.product-recommendations-scroll .discover-scroll-btn.is-right {
    right: 8px;
}

.product-availability {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #6b7280;
}

.product-swatches {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.product-swatch {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.product-variants {
    display: grid;
    gap: 10px;
}

.product-variant-select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    font-size: 14px;
}

.product-variant-swatches {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.product-variant-swatch {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 2px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
    background: #fff;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.product-variant-swatch.is-active {
    transform: scale(1.04);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), 0 0 0 8px var(--swatch-color, #1343de);
    border-color: rgba(0, 0, 0, 0.18);
}

.shop-page .shop-qty-btn:hover {
    transform: none;
    box-shadow: none;
}

.shop-page .shop-variant-swatch.is-active,
.shop-page .product-variant-swatch.is-active {
    transform: none;
}

.product-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.product-add-btn {
    padding: 10px 20px;
}

@media (max-width: 900px) {
    .product-shell {
        grid-template-columns: 1fr;
    }
}

.shop-empty {
    padding: 30px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(12, 20, 46, 0.08);
    text-align: center;
}

.basket-grid,
.checkout-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.basket-list,
.checkout-section {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 14px 30px rgba(12, 20, 46, 0.08);
}

.basket-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.basket-row:last-child {
    border-bottom: none;
}

.basket-title {
    font-weight: 700;
}

.basket-desc {
    color: #6d7487;
    font-size: 13px;
}

.basket-meta {
    color: #8b92a7;
    font-size: 12px;
}

.basket-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.basket-qty {
    width: 70px;
    padding: 6px 8px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
}

.basket-line {
    font-weight: 700;
}

.basket-remove,
.basket-clear {
    border: none;
    background: none;
    color: #cc2b2b;
    font-weight: 600;
}

.basket-summary-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 14px 30px rgba(12, 20, 46, 0.08);
}

.basket-summary-title {
    font-weight: 700;
    margin-bottom: 12px;
}

.basket-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #59627a;
}

.basket-summary-row.total {
    color: #111;
    font-weight: 700;
    margin-top: 12px;
}

.basket-checkout {
    width: 100%;
    margin-top: 12px;
}

.checkout-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
    gap: 20px;
}

.checkout-main {
    display: grid;
    gap: 16px;
}

.checkout-summary {
    position: relative;
}

.checkout-summary-card {
    background: #fff;
    border-radius: 16px;
    padding: 18px 18px 16px;
    box-shadow: 0 14px 30px rgba(12, 20, 46, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 90px;
    display: grid;
    gap: 12px;
}

.checkout-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.checkout-summary-title {
    font-weight: 800;
    font-size: 16px;
}

.checkout-summary-sub {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
}

.checkout-summary-total {
    font-weight: 800;
    font-size: 18px;
}

.checkout-summary-list {
    display: grid;
    gap: 12px;
}

.checkout-summary-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
}

.checkout-summary-thumb {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: #f5f6fb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

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

.checkout-summary-thumb-fallback {
    font-weight: 800;
    color: #1343de;
}

.checkout-summary-meta {
    display: grid;
    gap: 4px;
}

.checkout-summary-name {
    font-weight: 700;
    font-size: 14px;
}

.checkout-summary-variant,
.checkout-summary-qty {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
}

.checkout-summary-price {
    font-weight: 700;
    font-size: 14px;
}

.checkout-summary-totals {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 10px;
    display: grid;
    gap: 8px;
}

.checkout-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

.checkout-summary-muted {
    color: rgba(0, 0, 0, 0.55);
}

.checkout-summary-row-total {
    font-weight: 800;
    font-size: 14px;
}

.checkout-summary-total-amount {
    font-size: 16px;
    font-weight: 800;
}

.checkout-panel {
    background: #fff;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 14px 30px rgba(12, 20, 46, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.checkout-panel + .checkout-panel {
    margin-top: 10px;
}

.checkout-accordion {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 12px 26px rgba(12, 20, 46, 0.08);
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.96);
}

.checkout-acc-btn {
    width: 100%;
    border: none;
    background: transparent;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: 700;
    font-size: 16px;
    color: #111;
}

.checkout-acc-btn i {
    transition: transform 0.2s ease;
}

.checkout-acc-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.checkout-panel--shipping,
.checkout-panel--billing {
    border: none;
    box-shadow: none;
}

.checkout-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.checkout-panel-title {
    font-weight: 800;
    font-size: 16px;
}

.checkout-panel-sub {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.65);
}

.checkout-step-pill {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(19, 67, 222, 0.08);
    color: #1343de;
}

.checkout-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.checkout-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.checkout-field-grid .settings-field {
    margin-bottom: 8px;
}

.checkout-field-grid .settings-field-full {
    grid-column: 1 / -1;
}

.checkout-field-grid .settings-field input,
.checkout-field-grid .settings-field select {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 10px 12px;
    font-size: 14px;
    background: #ffffff;
    box-shadow: none;
}

.checkout-field-grid .settings-field input:focus,
.checkout-field-grid .settings-field select:focus {
    outline: none;
    border-color: rgba(19, 67, 222, 0.4);
    box-shadow: 0 0 0 2px rgba(19, 67, 222, 0.12);
}

.checkout-field-grid .settings-field label {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 6px;
}

.checkout-note {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
    margin-top: 4px;
    text-align: left;
    width: 100%;
}

.checkout-card-list {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.checkout-card-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    cursor: pointer;
    background: #fafbff;
}

.checkout-card-item:hover {
    border-color: rgba(19, 67, 222, 0.35);
}

.checkout-card-item input {
    margin-top: 0;
}

.checkout-link-button {
    border: none;
    background: transparent;
    color: #1343de;
    font-weight: 700;
    padding: 8px 0 0;
}

.checkout-secure-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.checkout-secure-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(19, 67, 222, 0.08);
    color: #0f2fa8;
    font-weight: 700;
    font-size: 12px;
}

.checkout-help {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.65);
}

.checkout-help a {
    color: #1343de;
    font-weight: 700;
}

.checkout-fineprint {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
}

.checkout-submit {
    width: 100%;
    margin-top: 8px;
}

.checkout-success {
    margin-top: 12px;
    color: #1b7f3c;
    font-weight: 600;
    text-align: center;
}

.checkout-summary .checkout-accordion {
    margin-top: 14px;
}


@media (max-width: 900px) {
    .checkout-shell {
        grid-template-columns: 1fr;
    }

    .checkout-summary-card {
        position: relative;
        top: 0;
    }
}

.basket-modal .modal-content {
    border-radius: 22px;
    padding: 6px 4px 12px;
}

.basket-dropdown {
    min-width: 360px;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(12, 20, 46, 0.14);
    background: #fff;
}

.basket-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 12px;
    color: #111;
}

.basket-dropdown-count {
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
}

.basket-dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.basket-dropdown-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 80px 28px;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: 12px;
    background: #f8f9fc;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.basket-dropdown-thumb {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f3f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

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

.basket-dropdown-thumb-icon {
    color: #8b92a7;
    font-size: 16px;
}

.basket-dropdown-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.basket-dropdown-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.basket-dropdown-qty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.basket-qty-btn {
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #1343de 0%, #1f59ff 100%);
    color: #fff;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 6px 12px rgba(19, 67, 222, 0.25);
}

.basket-qty-value {
    min-width: 18px;
    text-align: center;
    font-weight: 700;
}

.basket-dropdown-name {
    font-weight: 600;
}

.basket-dropdown-variant {
    color: #6b7280;
    font-weight: 500;
    font-size: 12px;
}

.basket-dropdown-remove {
    border: none;
    background: transparent;
    color: rgba(0, 0, 0, 0.45);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.basket-dropdown-remove:hover {
    color: #111;
    background: rgba(0, 0, 0, 0.06);
}

.basket-dropdown-total {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    margin-bottom: 10px;
}

.basket-dropdown-summary {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.basket-dropdown-actions {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.basket-dropdown-actions .blue-cta,
.basket-dropdown-checkout {
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
    background: #1343de;
    color: #fff;
    border: none;
    width: 50%;
    justify-content: center;
    gap: 8px;
}

.basket-dropdown-checkout {
    display: inline-flex;
    align-items: center;
    background: #fff;
    color: #1343de;
    border: 1px solid rgba(19, 67, 222, 0.25);
}

.basket-dropdown-cta {
    display: inline-flex;
    margin-bottom: 0;
}

.basket-dropdown-clear {
    width: 50%;
}

.basket-dropdown-cta,
.basket-dropdown-clear {
    border-radius: 10px;
}

.basket-dropdown-price {
    font-weight: 600;
    color: #4b5563;
    text-align: right;
    min-width: 80px;
}

.basket-dropdown-actions .blue-cta:hover {
    background: #11319c;
    color: #fff;
}

.basket-dropdown-checkout:hover {
    background: #fff;
    color: #0f2fa8;
}

.basket-dropdown-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    background: #d63031;
    color: #fff;
    box-shadow: none;
}

.basket-dropdown-danger:hover {
    background: #b82020;
    color: #fff;
}

.basket-dropdown-empty {
    text-align: center;
    color: #6b7280;
}

.basket-modal {
    max-width: 540px;
}

.basket-modal .modal-body {
    padding: 26px 24px 18px;
}

.basket-modal-title {
    font-size: 22px;
    font-weight: 700;
}

.basket-modal-subtitle {
    color: #6b7280;
    margin-bottom: 16px;
}

.basket-modal-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 6px;
    margin-bottom: 16px;
}

.basket-modal-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.basket-modal-row:last-child {
    border-bottom: none;
}

.basket-modal-name {
    font-weight: 700;
}

.basket-modal-variant {
    color: #6b7280;
    font-size: 13px;
}

.basket-modal-meta {
    color: #8b92a7;
    font-size: 12px;
}

.basket-modal-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.basket-modal-line {
    font-weight: 700;
}

@media (max-width: 900px) {
    .basket-grid,
    .checkout-grid {
        grid-template-columns: 1fr;
    }

    .shop-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .shop-hero-panel {
        width: 100%;
    }

    .shop-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .shop-card-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .shop-card-variants {
        flex-direction: column;
    }

    .shop-filters {
        position: static;
    }
}

.promo-banner-shell {
    margin: 28px 0 36px;
    padding: 10px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top left, rgba(19, 67, 222, 0.18), transparent 34%),
        radial-gradient(circle at bottom right, rgba(15, 118, 110, 0.16), transparent 38%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 244, 255, 0.96));
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.promo-banner-track {
    position: relative;
    min-height: 320px;
}

.promo-banner-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: 22px;
    align-items: stretch;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.promo-banner-slide.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.promo-banner-copy {
    min-width: 0;
    padding: 34px;
    border-radius: 22px;
    color: #fff;
    background:
        linear-gradient(160deg, rgba(9, 14, 28, 0.92), rgba(17, 25, 52, 0.8)),
        linear-gradient(130deg, var(--promo-accent, #1343DE), rgba(255, 255, 255, 0));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.promo-banner-eyebrow {
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.promo-banner-title {
    font-size: 34px;
    line-height: 1.05;
    font-weight: 800;
}

.promo-banner-body {
    max-width: 560px;
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
}

.promo-banner-meta {
    margin-top: 16px;
    font-size: 13px;
    font-weight: 700;
    color: #cdd8ff;
}

.promo-banner-actions {
    margin-top: 24px;
}

.promo-banner-cta {
    margin-right: 0;
}

.promo-banner-media {
    min-width: 0;
    display: flex;
    align-items: stretch;
}

.promo-banner-image {
    width: 100%;
    min-height: 320px;
    border-radius: 22px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #dbe7ff;
    box-shadow: inset 0 0 0 1px rgba(19, 67, 222, 0.08);
}

.promo-banner-image-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
    color: rgba(19, 67, 222, 0.45);
    background:
        linear-gradient(135deg, rgba(19, 67, 222, 0.12), rgba(15, 118, 110, 0.1)),
        #f8fbff;
}

.promo-banner-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 10px 0;
}

.promo-banner-arrow {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #0f172a;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    transition: transform 0.2s ease, background 0.2s ease;
}

.promo-banner-arrow:hover {
    background: #fff;
    transform: translateY(-1px);
}

.promo-banner-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1;
}

.promo-banner-dot {
    width: 11px;
    height: 11px;
    border: none;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.16);
    transition: transform 0.2s ease, background 0.2s ease;
}

.promo-banner-dot.is-active {
    background: #1343DE;
    transform: scale(1.15);
}

.shop-personalisation,
.product-personalisation {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(19, 67, 222, 0.05);
    box-shadow: inset 0 0 0 1px rgba(19, 67, 222, 0.08);
}

.shop-personalisation label,
.product-personalisation label {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.shop-personalisation label span,
.product-personalisation label span {
    color: #5b6475;
    font-weight: 500;
}

.shop-personalisation input,
.product-personalisation input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: none;
    border-radius: 12px;
    outline: none;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.shop-personalisation input:focus,
.product-personalisation input:focus {
    box-shadow: inset 0 0 0 1px rgba(19, 67, 222, 0.5);
}

.shop-personalisation-note,
.product-personalisation-note,
.basket-modal-personalisation,
.basket-dropdown-personalisation,
.checkout-summary-personalisation,
.settings-order-item-sub {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: #5b6475;
}

.basket-dropdown-personalisation,
.basket-modal-personalisation,
.checkout-summary-personalisation {
    font-weight: 600;
}

.settings-order-item-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 991px) {
    .promo-banner-slide {
        grid-template-columns: 1fr;
    }

    .promo-banner-track,
    .promo-banner-image {
        min-height: 0;
    }

    .promo-banner-image {
        min-height: 220px;
    }
}

@media (max-width: 767px) {
    .home-header-wrap {
        padding-top: 78px;
        margin-bottom: 22px;
    }

    .home-header {
        min-height: 0;
        padding: 20px 0 24px;
        border-radius: 24px;
    }

    .home-header .home-header-inner {
        padding: 0 18px;
    }

    .home-header .promo-banner-title {
        font-size: 30px;
    }

    .home-header .promo-banner-body {
        font-size: 15px;
    }

    .promo-banner-shell {
        margin: 20px 0 28px;
        padding: 8px;
        border-radius: 22px;
    }

    .promo-banner-copy {
        padding: 24px;
    }

    .promo-banner-title {
        font-size: 28px;
    }

    .promo-banner-body {
        font-size: 14px;
    }

    .promo-banner-nav {
        gap: 12px;
    }
}

/* Crew gallery placeholders and dedicated photo submission. */
.cc-story-placeholder { display:flex; flex-direction:column; justify-content:space-between; padding:28px 20px 20px; background:linear-gradient(145deg,#234f6a,#123c57); border-color:#ffffff20; }
.cc-story-placeholder:before { display:none; }
.cc-story-placeholder > i { margin:auto; font-size:32px; color:#88aabd; }

/* Homepage media uses real images so mobile browsers can size, lazy-load and
   recover from failed assets consistently. */
.cc-category .cc-card-media,
.cc-deal .cc-card-media,
.cc-story .cc-card-media { position:absolute; z-index:0; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.cc-category:before,.cc-deal:before,.cc-story:before { z-index:1; }
.cc-category .cc-category-label,.cc-deal .cc-offer,.cc-deal>div:not(.cc-image-fallback),.cc-deal .cc-round-arrow,.cc-story>span { z-index:2; }
.cc-category-fallback,.cc-image-fallback { position:absolute; z-index:0; inset:0; display:none; place-items:center; background:#eef3f6; background:linear-gradient(145deg,color-mix(in srgb,var(--accent,#164966),#fff 82%),color-mix(in srgb,var(--accent,#164966),#fff 94%)); color:var(--accent,#164966); }
.cc-category-fallback i,.cc-image-fallback i { font-size:38px; }
.cc-category.is-image-missing .cc-category-fallback,.cc-deal.is-image-missing .cc-image-fallback,.cc-story.is-image-missing .cc-image-fallback { display:grid; }
.cc-deal .cc-image-fallback,.cc-story .cc-image-fallback { background:linear-gradient(145deg,#245570,#123d57);color:#8eb8ce; }
.cc-category .cc-category-label { position:absolute; }
.cc-placeholder-copy div { height:9px; width:88%; margin-top:9px; border-radius:5px; background:#ffffff24; }
.cc-placeholder-copy div:nth-child(2) { width:65%; }
.cc-placeholder-copy div:last-child { width:38%; height:6px; background:#ffffff15; }
.cc-gallery-invite { margin:22px 0 0; color:#c6dce9; font-size:14px; }
.crew-upload-page { padding-top:110px; padding-bottom:64px; color:#12344d; }
.crew-back { color:#38607d; font-size:14px; font-weight:600; }
.crew-upload-heading { max-width:720px; margin:32px 0 40px; }
.crew-eyebrow { font-size:11px; letter-spacing:.14em; color:#086bb6; font-weight:800; }
.crew-upload-heading h1 { font-size:clamp(32px,4vw,48px); font-weight:800; letter-spacing:-.04em; margin:12px 0 16px; }
.crew-upload-heading p { font-size:17px; line-height:1.7; color:#596d7e; }
.crew-upload-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:64px; align-items:start; }
.crew-upload-guide h2 { font-size:23px; font-weight:700; margin-bottom:28px; }
.crew-upload-guide ol { list-style:none; counter-reset:crew-step; padding:0; }
.crew-upload-guide li { counter-increment:crew-step; position:relative; padding-left:50px; margin-bottom:28px; }
.crew-upload-guide li:before { content:counter(crew-step,decimal-leading-zero); position:absolute; left:0; top:0; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#dfeef9; color:#086bb6; font-size:12px; font-weight:800; }
.crew-upload-guide li p { margin:6px 0 0; color:#596d7e; line-height:1.6; font-size:14px; }
.crew-upload-note { padding:20px; background:#e6eef5; border-radius:12px; font-size:13px; line-height:1.7; color:#496277; }
.crew-upload-panel { padding:32px; border:1px solid #dce5ec; border-radius:20px; background:#fff; box-shadow:0 16px 40px #002b4b08; }
.crew-upload-form > label,.crew-caption-label label { font-size:14px; font-weight:700; margin-bottom:10px; }
.crew-photo-picker { padding:22px; border:1px dashed #8aa8be; background:#f5f9fc; border-radius:12px; margin-bottom:26px; text-align:center; }
.crew-picker-hint i { display:block; color:#086bb6; font-size:30px; margin:0 0 14px; }
.crew-picker-hint strong { display:block; margin-bottom:18px; font-size:15px; }
.crew-photo-picker input { display:block; max-width:100%; margin:0 auto 12px; font-size:13px; }
.crew-photo-picker input::file-selector-button { border:0; border-radius:8px; background:#e0ecf5; color:#12344d; padding:10px 12px; margin-right:10px; cursor:pointer; }
.crew-photo-picker small { display:block; color:#596d7e; line-height:1.6; }
.crew-photo-preview img { width:100%; max-height:300px; object-fit:contain; border-radius:8px; margin-bottom:18px; }
.crew-upload-form select,.crew-upload-form textarea { width:100%; border:1px solid #bdcdd9; border-radius:9px; padding:12px; color:#12344d; background:#fff; font-size:15px; margin-bottom:24px; }
.crew-upload-form textarea { resize:vertical; min-height:100px; }
.crew-caption-label { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.crew-caption-count { color:#596d7e; white-space:nowrap; }
.crew-upload-form .crew-permission { display:flex; gap:12px; align-items:flex-start; font-size:13px; font-weight:400; line-height:1.6; }
.crew-permission input { flex-shrink:0; width:18px; height:18px; margin-top:2px; accent-color:#086bb6; }
.crew-upload-message { font-size:14px; color:#12344d; line-height:1.6; }
.crew-upload-message:empty { display:none; }
.crew-upload-form .cc-btn { border:0; margin-top:14px; }
.crew-upload-form button:disabled { opacity:.65; cursor:wait; }
.crew-review-note { display:block; color:#596d7e; margin-top:12px; }
.crew-upload-success,.crew-signin { text-align:center; padding:32px 8px; }
.crew-upload-success > i,.crew-signin > i { font-size:42px; color:#086bb6; margin-bottom:22px; }
.crew-upload-success h2,.crew-signin h2 { font-size:26px; font-weight:700; }
.crew-upload-success p,.crew-signin p { color:#596d7e; line-height:1.7; margin:18px 0; }
.crew-upload-another { display:block; border:0; background:none; color:#086bb6; margin:20px auto 0; padding:10px; font-weight:600; }
.crew-upload-page [hidden] { display:none!important; }
.crew-upload-page :is(a,button,input,select,textarea):focus-visible { outline:3px solid #086bb6; outline-offset:3px; }
@media(max-width:767px) {
 .crew-upload-page { padding-top:90px; padding-bottom:36px; }
 .crew-upload-heading { margin:24px 0; }
 .crew-upload-layout { grid-template-columns:1fr; gap:24px; }
 .crew-upload-guide ol { margin-bottom:0; }
 .crew-upload-panel { padding:22px 18px; }
 .crew-photo-picker { padding:18px 12px; }
}