/* Tudor Internet WHMCS portal compatibility — v1.2.7
 * Cart selectors are intentionally kept in order-form.css only.
 */

:root {
    --tn-navy-950: #07172f;
    --tn-navy-900: #0b2d63;
    --tn-navy-700: #1a4b85;
    --tn-blue-soft: #eaf2ff;
    --tn-teal-soft: #e9fbf8;
    --tn-orange-soft: #fff6df;
    --tn-purple: #7c3aed;
    --tn-ink: #07172f;
    --tn-surface: #ffffff;
    --tn-shadow-sm: 0 10px 24px rgba(7, 23, 47, 0.07);
    --tn-shadow: 0 18px 42px rgba(7, 23, 47, 0.10);
    --tn-radius: 1rem;
    --tn-pill: 999px;
}

body.tn-whmcs-portal { overflow-x: hidden; background: #f7f9fc; }

/* Bootstrap 5 utility compatibility for the public shell inside Twenty-One/Bootstrap 4. */
.fw-bold { font-weight: 700 !important; }
.rounded-4 { border-radius: 1rem !important; }
.text-md-end { text-align: right !important; }
.vstack { display: flex; flex: 1 1 auto; flex-direction: column; align-self: stretch; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.g-2 { margin: -.25rem; }
.g-2 > [class*="col-"] { padding: .25rem; }
.g-3 { margin: -.5rem; }
.g-3 > [class*="col-"] { padding: .5rem; }
.g-4 { margin: -.75rem; }
.g-4 > [class*="col-"] { padding: .75rem; }
.text-bg-primary { color: #fff !important; background-color: #0f5dff !important; }
@media (min-width: 992px) {
    .g-lg-5 { margin: -1.5rem; }
    .g-lg-5 > [class*="col-"] { padding: 1.5rem; }
    .justify-content-lg-end { justify-content: flex-end !important; }
}
@media (max-width: 767.98px) { .text-md-end { text-align: left !important; } }

/* Bootstrap 5 footer grid/container compatibility used by the public footer. */
.tn-site-footer .container-xxl {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}

.row-cols-1 > * { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 576px) {
    .row-cols-sm-2 > * { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 768px) {
    .row-cols-md-3 > * { flex: 0 0 33.333333%; max-width: 33.333333%; }
}
@media (min-width: 1200px) {
    .row-cols-xl-5 > * { flex: 0 0 20%; max-width: 20%; }
    .g-xl-3 { margin: -.5rem; }
    .g-xl-3 > [class*="col-"] ,
    .g-xl-3 > .col { padding: .5rem; }
}

/* Public shell compatibility. Asset URLs remain local to my.tudornet.uk. */
.tn-site-header .dropdown-menu { margin-top: .4rem; }
.tn-site-header .navbar-collapse.show { display: block; }
.tn-header-actions { gap: .5rem; }
.tn-site-footer.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.tn-footer-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

/* Customer Portal navbar. Search and basket remain one compact action group. */
.tn-portal-shell { position: relative; z-index: 1020; background: #fff; border-bottom: 1px solid #dce7f7; box-shadow: 0 8px 22px rgba(7,23,47,.06); }
.tn-account-navbar { min-height: 64px; padding: .55rem 0; }
.tn-account-navbar > .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
    grid-template-areas: "menu actions";
    align-items: center;
    gap: .75rem;
}
.tn-account-navbar .navbar-collapse { grid-area: menu; min-width: 0; }
.tn-account-navbar .navbar-nav { min-width: 0; }
.tn-account-navbar .navbar-nav .nav-link { color: #0b2d63 !important; font-weight: 700; border-radius: 999px; padding: .55rem .75rem; }
.tn-account-navbar .navbar-nav .nav-link:hover,
.tn-account-navbar .navbar-nav .nav-link:focus,
.tn-account-navbar .navbar-nav .active > .nav-link { background: #eef5ff; color: #0f5dff !important; }
.tn-account-toggler { grid-area: toggle; display: flex; align-items: center; gap: .5rem; color: #0b2d63; border: 1px solid #dce7f7; border-radius: 999px; white-space: nowrap; }
.tn-portal-nav-actions { grid-area: actions; display: flex; align-items: center; justify-self: end; width: 100%; min-width: 0; gap: .6rem; margin: 0; }
.tn-portal-search { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
.tn-portal-search .input-group { flex-wrap: nowrap; }
.tn-portal-search .form-control,
.tn-portal-search .btn,
.tn-portal-cart { min-height: 42px; height: 42px; }
.tn-portal-search .input-group-prepend .btn { border-radius: 999px 0 0 999px; }
.tn-portal-search .form-control { min-width: 0; border-radius: 0 999px 999px 0; }
.tn-portal-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    padding: 0;
    overflow: visible !important;
    border: 1px solid #dce7f7;
    border-radius: 50%;
    color: #0b2d63;
    background: #fff;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
}
.tn-portal-cart:hover,
.tn-portal-cart:focus {
    color: #0f5dff;
    background: #eef5ff;
    text-decoration: none;
}
.tn-portal-cart > i {
    display: block;
    margin: 0;
    font-size: 1rem;
    line-height: 1;
    transform: translateY(1px);
}
.tn-portal-cart #cartItemCount {
    position: absolute;
    top: -.55rem;
    right: -.5rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 .3rem;
    border: 2px solid #fff;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(7, 23, 47, .18);
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .tn-account-navbar > .container {
        grid-template-columns: auto minmax(300px, 460px);
        grid-template-areas: "toggle actions" "menu menu";
    }
    .tn-account-navbar .navbar-collapse { width: 100%; }
}

@media (max-width: 767.98px) {
    .tn-account-navbar > .container {
        grid-template-columns: 1fr;
        grid-template-areas: "toggle" "actions" "menu";
    }
    .tn-account-toggler { justify-self: start; }
    .tn-portal-nav-actions { justify-self: stretch; }
}

@media (max-width: 399.98px) {
    .tn-portal-nav-actions { gap: .4rem; }
}

.tn-portal-main { min-height: 48vh; padding: 2.25rem 0 3.25rem; background: #f7f9fc; }
.tn-portal-main .header-lined { margin-bottom: 1.5rem; }
.tn-portal-main .header-lined h1 { color: #07172f; }

/* Bootstrap-4 compatible switches for the shared cookie panel. */
.form-switch .form-check-input { width: 2.6rem; height: 1.35rem; margin: 0; cursor: pointer; appearance: none; border: 1px solid #b8c8dc; border-radius: 999px; background: #dce5f2; position: relative; transition: .15s ease; }
.form-switch .form-check-input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(7,23,47,.25); transition: .15s ease; }
.form-switch .form-check-input:checked { border-color: #0f5dff; background: #0f5dff; }
.form-switch .form-check-input:checked::before { transform: translateX(1.2rem); }

/* Content shell */
#main-body,
.main-body {
    padding-top: 2.25rem;
    padding-bottom: 3rem;
}

/* Keep the public header, Customer Portal bar, main content and footer on
 * the same Bootstrap 5-style container widths. Twenty-One uses Bootstrap 4,
 * which otherwise stops at 1140px while the public site reaches 1320px.
 */
.tn-site-header .container,
.tn-portal-shell .container,
#main-body > .container,
.main-body > .container,
.tn-site-footer .container,
.tn-site-footer .container-xxl {
    width: 100%;
}

@media (min-width: 1200px) {
    .tn-site-header .container,
    .tn-portal-shell .container,
    #main-body > .container,
    .main-body > .container,
    .tn-site-footer .container {
        max-width: 1140px !important;
    }
}

@media (min-width: 1400px) {
    .tn-site-header .container,
    .tn-portal-shell .container,
    #main-body > .container,
    .main-body > .container,
    .tn-site-footer .container,
    .tn-site-footer .container-xxl {
        max-width: 1320px !important;
    }
}

.main-content > h1:first-child,
.primary-content > h1:first-child,
.page-header h1 {
    margin-bottom: 1.4rem;
    font-size: clamp(1.8rem, 3vw, 2.45rem);
}

/* Cards, panels, tiles and sidebars */
.card,
.panel,
.list-group,
.sidebar .panel,
.sidebar .card,
.client-home-panels .panel,
.tiles .tile,
.home-domain-search,
.home-shortcuts,
.domain-checker-container,
.logincontainer,
.providerLinkingFeedback,
#registration,
.invoice-container,
.ticket-reply,
.ticket-reply.staff,
.affiliate-stat {
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius) !important;
    background: var(--tn-surface);
    box-shadow: var(--tn-shadow-sm);
}

.card-header,
.panel-heading,
.client-home-panels .panel-heading {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--tn-border);
    border-radius: var(--tn-radius) var(--tn-radius) 0 0 !important;
    color: var(--tn-ink);
    background: linear-gradient(135deg, #fff 0%, #f7faff 100%);
    font-weight: 750;
}

.card-body,
.panel-body {
    padding: 1.15rem;
}

.panel-footer,
.card-footer {
    border-top: 1px solid var(--tn-border);
    border-radius: 0 0 var(--tn-radius) var(--tn-radius) !important;
    background: #fbfdff;
}

.sidebar .list-group-item,
.list-group-item {
    border-color: var(--tn-border);
    background: transparent;
}

.sidebar .list-group-item:first-child {
    border-top-left-radius: var(--tn-radius);
    border-top-right-radius: var(--tn-radius);
}

.sidebar .list-group-item:last-child {
    border-bottom-left-radius: var(--tn-radius);
    border-bottom-right-radius: var(--tn-radius);
}

.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus,
.list-group-item.active {
    border-color: var(--tn-blue);
    color: #fff;
    background: linear-gradient(135deg, var(--tn-blue) 0%, var(--tn-blue-dark) 100%);
}

.tiles .tile,
.home-shortcuts .col-6 > a,
.home-shortcuts .col-md-4 > a,
.home-shortcuts li a {
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.tiles .tile:hover,
.home-shortcuts .col-6 > a:hover,
.home-shortcuts .col-md-4 > a:hover,
.home-shortcuts li a:hover {
    transform: translateY(-2px);
    border-color: #b8cff5;
    box-shadow: var(--tn-shadow);
}

.tiles .tile .icon,
.home-shortcuts .fas,
.home-shortcuts .far,
.home-shortcuts .fa,
.client-home-panels .panel-heading .fas,
.client-home-panels .panel-heading .far {
    color: var(--tn-blue);
}

/* Buttons */
.btn {
    border-radius: var(--tn-pill);
    font-weight: 700;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

.btn:hover,
.btn:focus {
    transform: none;
}

.btn-primary,
.btn-success,
.btn-info,
.label-primary,
.badge-primary,
.bg-primary {
    border-color: var(--tn-blue) !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--tn-blue) 0%, var(--tn-blue-dark) 100%) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus,
.btn-info:hover,
.btn-info:focus {
    border-color: var(--tn-blue-dark) !important;
    color: #fff !important;
    background: var(--tn-blue-dark) !important;
    box-shadow: 0 8px 20px rgba(15, 93, 255, 0.22);
}

.btn-outline-primary {
    border-color: var(--tn-blue);
    color: var(--tn-blue-dark);
    background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    border-color: var(--tn-blue);
    color: #fff;
    background: var(--tn-blue);
}

.btn-default,
.btn-secondary,
.btn-light {
    border-color: var(--tn-border);
    color: var(--tn-navy-900);
    background: #fff;
}

.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-light:hover,
.btn-light:focus {
    border-color: #bad0f2;
    color: var(--tn-navy-900);
    background: var(--tn-blue-soft);
}

.btn-danger {
    border-color: #dc3545;
}

.btn-link {
    border-radius: 0;
}

/* Forms */
.form-control,
.custom-select,
.input-group-text,
select.form-control,
textarea.form-control {
    min-height: 2.75rem;
    border-color: #cbd9ed;
    border-radius: 0.72rem;
    color: var(--tn-ink);
    background-color: #fff;
    box-shadow: none;
}

textarea.form-control {
    min-height: 7rem;
}

.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child),
.input-group > .input-group-prepend + .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.form-control:focus,
.custom-select:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: var(--tn-blue);
    box-shadow: 0 0 0 0.2rem rgba(15, 93, 255, 0.14);
}

label,
.control-label {
    color: var(--tn-ink);
    font-weight: 650;
}

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--tn-blue);
    background-color: var(--tn-blue);
}

/* Tables */
.table-responsive {
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius);
    background: #fff;
    box-shadow: var(--tn-shadow-sm);
}

.table {
    margin-bottom: 0;
    color: var(--tn-ink);
}

.table thead th {
    border-top: 0;
    border-bottom: 1px solid var(--tn-border);
    color: var(--tn-navy-900);
    background: #f2f7ff;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.015em;
    text-transform: none;
}

.table td,
.table th {
    border-color: #e7eef8;
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: #f7faff;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-color: #cbd9ed;
    border-radius: var(--tn-pill);
}

.page-item .page-link,
.pagination > li > a,
.pagination > li > span {
    margin: 0 0.15rem;
    border: 1px solid var(--tn-border);
    border-radius: 0.6rem !important;
    color: var(--tn-navy-900);
}

.page-item.active .page-link,
.pagination > .active > a,
.pagination > .active > span {
    border-color: var(--tn-blue);
    color: #fff;
    background: var(--tn-blue);
}

/* Alerts and badges */
.alert {
    border-width: 1px;
    border-radius: var(--tn-radius);
    box-shadow: 0 8px 18px rgba(7, 23, 47, 0.045);
}

.alert-info {
    border-color: #bcd5ff;
    color: #0b3f91;
    background: var(--tn-blue-soft);
}

.alert-success {
    border-color: #aee9dd;
    color: #096a5e;
    background: var(--tn-teal-soft);
}

.alert-warning {
    border-color: #f6d78b;
    color: #805500;
    background: var(--tn-orange-soft);
}

.alert-danger {
    border-color: #f4b9bf;
    color: #8f1d29;
    background: #fff0f2;
}

.badge,
.label {
    border-radius: var(--tn-pill);
    font-weight: 750;
}

/* Login, password reset and registration */
.logincontainer,
#registration,
.providerLinkingFeedback {
    overflow: hidden;
    padding: 1.35rem;
}

.logincontainer::before,
#registration::before {
    display: block;
    width: 3.2rem;
    height: 0.28rem;
    margin: -0.15rem auto 1.2rem;
    border-radius: var(--tn-pill);
    background: linear-gradient(90deg, var(--tn-blue), var(--tn-teal), var(--tn-purple));
    content: "";
}

.logincontainer .header-lined h1,
#registration .header-lined h1 {
    text-align: center;
}

/* Domain search and portal home */
.home-domain-search,
.domain-checker-container {
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
    color: #fff;
    background:
        radial-gradient(circle at 12% 15%, rgba(15, 93, 255, 0.30), transparent 32%),
        radial-gradient(circle at 88% 15%, rgba(20, 184, 166, 0.18), transparent 34%),
        linear-gradient(135deg, var(--tn-navy-700) 0%, var(--tn-navy-900) 58%, var(--tn-navy-950) 100%);
}

.home-domain-search h2,
.home-domain-search h3,
.domain-checker-container h2,
.domain-checker-container h3,
.home-domain-search label,
.domain-checker-container label {
    color: #fff;
}

.home-domain-search .form-control,
.domain-checker-container .form-control {
    border-color: rgba(255, 255, 255, 0.45);
}

/* Tickets and invoices */
.ticket-reply,
.ticket-reply.staff {
    overflow: hidden;
}

.ticket-reply .date,
.ticket-reply .user {
    color: var(--tn-muted);
}

.ticket-reply.staff .user,
.ticket-reply.staff .date {
    color: var(--tn-navy-900);
}

.invoice-container {
    padding: 1.5rem;
}

/* Accessibility and responsive content spacing. */
a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible, .custom-select:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(15,93,255,.34); outline-offset: 2px; }
@media (max-width: 767.98px) {
    #main-body, .main-body { padding-top: 1.4rem; padding-bottom: 2.25rem; }
    .card-body, .panel-body, .logincontainer, #registration, .invoice-container { padding: 1rem; }
    .table-responsive { border-radius: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* =========================================================
   v1.2.0 — typography, navigation colour and account menu
   ========================================================= */

html {
    font-size: 16px;
}

body.tn-whmcs-portal {
    font-size: 1rem;
    line-height: 1.6;
}

.tn-portal-main,
.tn-portal-shell,
.tn-portal-main .card,
.tn-portal-main .panel,
.tn-portal-main .table,
.tn-portal-main .form-control,
.tn-portal-main .btn {
    font-family: inherit;
}

.tn-portal-main {
    font-size: 1rem;
}

.tn-portal-main p,
.tn-portal-main li,
.tn-portal-main label,
.tn-portal-main input,
.tn-portal-main select,
.tn-portal-main textarea,
.tn-portal-main button,
.tn-portal-main .btn,
.tn-portal-main .list-group-item {
    font-size: 1rem;
}

.tn-portal-main small,
.tn-portal-main .small,
.tn-portal-main .small-text {
    font-size: .875rem;
}

.tn-portal-main .header-lined h1,
.tn-portal-main .page-header h1,
.tn-portal-main > .container > h1:first-child,
.tn-portal-main .primary-content > h1:first-child {
    font-size: clamp(1.8rem, 3vw, 2.45rem) !important;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.tn-portal-main h2 { font-size: 1.5rem; line-height: 1.25; }
.tn-portal-main h3 { font-size: 1.25rem; line-height: 1.3; }
.tn-portal-main h4 { font-size: 1.1rem; line-height: 1.35; }
.tn-portal-main h5 { font-size: 1rem; line-height: 1.4; }
.tn-portal-main h6 { font-size: .95rem; line-height: 1.4; }

/* Match the public tudornet.uk header navigation exactly. */
.tn-site-header .tn-navbar .navbar-nav > .nav-item > .nav-link {
    color: rgba(255, 255, 255, .84) !important;
    opacity: 1 !important;
    font-size: 1rem;
    font-weight: 800;
}

.tn-site-header .tn-navbar .navbar-nav > .nav-item > .nav-link:hover,
.tn-site-header .tn-navbar .navbar-nav > .nav-item > .nav-link:focus,
.tn-site-header .tn-navbar .navbar-nav > .nav-item > .nav-link.active,
.tn-site-header .tn-navbar .navbar-nav > .nav-item.show > .nav-link {
    color: #fff !important;
    background: rgba(255, 255, 255, .12) !important;
}

/* Logged-in WHMCS account menu now lives in the public header action area. */
.tn-header-account-dropdown {
    position: relative;
}

.tn-header-account-button {
    min-width: 9.75rem;
}

.tn-header-account-dropdown .dropdown-menu {
    right: 0;
    left: auto;
    min-width: 17rem;
    max-height: min(70vh, 34rem);
    overflow-y: auto;
}

.tn-header-account-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: .35rem;
    white-space: normal;
}

.tn-header-account-dropdown .dropdown-item .badge {
    margin-left: auto !important;
}

/* Sidebar actions/categories should be readable, not heavy bold. */
.tn-portal-main .sidebar .list-group-item,
.tn-portal-main .sidebar a.list-group-item,
.tn-portal-main .sidebar .panel .list-group-item,
.tn-portal-main .sidebar .card .list-group-item,
.tn-portal-main .sidebar .list-group-item-action {
    font-size: .95rem;
    font-weight: 500 !important;
    line-height: 1.45;
}

.tn-portal-main .sidebar .list-group-item .badge,
.tn-portal-main .sidebar .list-group-item strong {
    font-weight: 700;
}

.tn-account-navbar .navbar-nav .nav-link {
    font-size: .95rem;
}

.tn-portal-search .form-control,
.tn-portal-cart {
    font-size: .95rem;
}

@media (max-width: 991.98px) {
    .tn-header-account-dropdown,
    .tn-header-account-button {
        width: 100%;
    }

    .tn-header-account-dropdown .dropdown-menu {
        position: static !important;
        width: 100%;
        max-height: none;
        margin-top: .5rem;
        transform: none !important;
    }
}


/* =========================================================
   v1.2.2 — footer currency selection with flags
   ========================================================= */

.tn-footer-meta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
}

.tn-footer-currency-menu {
    position: relative;
    display: inline-block;
    margin: 0;
    color: inherit;
}

.tn-footer-currency-menu > summary {
    list-style: none;
}

.tn-footer-currency-menu > summary::-webkit-details-marker {
    display: none;
}

.tn-footer-currency-trigger {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    min-height: 1.75rem;
    padding: .18rem .48rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .08);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tn-footer-currency-trigger:hover,
.tn-footer-currency-trigger:focus {
    color: #fff;
    border-color: rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .14);
    outline: none;
}

.tn-footer-currency-trigger:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .82);
    outline-offset: 3px;
}

.tn-footer-currency-flag {
    display: block;
    width: 22px;
    height: 16px;
    flex: 0 0 22px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(7, 23, 47, .12);
}

.tn-footer-currency-code {
    letter-spacing: .025em;
}

.tn-footer-currency-prefix {
    color: rgba(255, 255, 255, .65);
    font-weight: 500;
}

.tn-footer-currency-chevron {
    width: 10px;
    height: 7px;
    margin-left: .08rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    transition: transform .15s ease;
}

.tn-footer-currency-menu[open] .tn-footer-currency-chevron {
    transform: rotate(180deg);
}

.tn-footer-currency-dropdown {
    position: absolute;
    right: 0;
    bottom: calc(100% + .65rem);
    z-index: 1060;
    width: max-content;
    min-width: 14rem;
    padding: .5rem;
    border: 1px solid var(--tn-border, #dce7f7);
    border-radius: 1rem;
    color: var(--tn-text, #253a59);
    background: #fff;
    box-shadow: 0 18px 50px rgba(7, 23, 47, .24);
    text-align: left;
}

.tn-footer-currency-heading {
    padding: .4rem .55rem .5rem;
    color: var(--tn-muted, #526173);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.tn-footer-currency-option-form {
    margin: 0;
}

.tn-footer-currency-option {
    display: flex;
    align-items: center;
    width: 100%;
    gap: .65rem;
    padding: .62rem .65rem;
    border: 0;
    border-radius: .72rem;
    color: var(--tn-text, #253a59);
    background: transparent;
    font: inherit;
    font-size: .88rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.tn-footer-currency-option:hover,
.tn-footer-currency-option:focus,
.tn-footer-currency-option.is-active {
    color: var(--tn-blue-dark, #0b2d63);
    background: #eef5ff;
    outline: none;
}

.tn-footer-currency-option:focus-visible {
    outline: 2px solid var(--tn-blue, #0f5dff);
    outline-offset: -2px;
}

.tn-footer-currency-option-text {
    display: flex;
    align-items: baseline;
    flex: 1 1 auto;
    gap: .45rem;
    min-width: 0;
}

.tn-footer-currency-option-code {
    font-weight: 700;
    letter-spacing: .02em;
}

.tn-footer-currency-option-prefix {
    color: var(--tn-muted, #526173);
    font-size: .8rem;
    font-weight: 500;
}

.tn-footer-currency-check {
    color: var(--tn-blue, #0f5dff);
    font-weight: 800;
}

@media (max-width: 767.98px) {
    .tn-footer-meta-actions {
        justify-content: flex-start;
    }

    .tn-footer-currency-dropdown {
        right: auto;
        left: 0;
    }
}