/*
 * My-Seedbox Design v3 — client workspace compatibility layer.
 *
 * This file intentionally contains only preview-scoped cascade repairs. It is
 * loaded after the main v3 styles and never changes the legacy experience.
 */

/* Filled actions use one legible foreground throughout the V3 workspace.
 * Keep neutral, outline and disabled controls on their component-specific ink;
 * those controls can sit on white or deliberately muted backgrounds. */
html.design-v3 .v3-account .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled),
html.design-v3 .v3-support .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled),
html.design-v3 .v3-payment-tokens .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled),
html.design-v3 .v3-payment-methods .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled),
html.design-v3 .seedbox-manager-v3 .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled),
html.design-v3 .v3-vpn-client-manager .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled),
html.design-v3 .v3-products-dashboard .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled),
html.design-v3 .v3-cart-page .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled),
html.design-v3 .v3-auth__panel .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled),
html.design-v3 body.v3-admin-page .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled) {
    color: var(--v3-white, #ffffff) !important;
}

/* Legacy icon rules sometimes assign their own dark foreground. Restrict the
 * inheritance repair to icon glyphs, leaving nested content such as the
 * Jellyfin gradient label untouched. */
html.design-v3 .v3-account .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled) .fa,
html.design-v3 .v3-account .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled) .glyphicon,
html.design-v3 .v3-support .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled) .fa,
html.design-v3 .v3-support .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled) .glyphicon,
html.design-v3 .v3-payment-tokens .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled) .fa,
html.design-v3 .v3-payment-methods .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled) .fa,
html.design-v3 .seedbox-manager-v3 .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled) .fa,
html.design-v3 .seedbox-manager-v3 .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled) .glyphicon,
html.design-v3 .v3-vpn-client-manager .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled) .fa,
html.design-v3 .v3-products-dashboard .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled) .fa,
html.design-v3 .v3-cart-page .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled) .fa,
html.design-v3 .v3-cart-page .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled) .glyphicon,
html.design-v3 .v3-auth__panel .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled) .fa,
html.design-v3 body.v3-admin-page .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled) .fa,
html.design-v3 body.v3-admin-page .btn-u:not(.btn-u-default):not(.btn-default):not(.btn-u-light):not(.btn-light):not(.btn-u-white):not(.btn-white):not(.btn-brd):not(.btn-link):not([class*="outline"]):not(.disabled):not([disabled]):not([aria-disabled="true"]):not(:disabled) .glyphicon {
    color: inherit !important;
}

/* Legacy scripts.js prepends this helper to every class containing "tabs". */
html.design-v3 .v3-account-profile .nav-tabs > span.text,
html.design-v3 .v3-support .nav-tabs > span.text,
html.design-v3 .v3-payment-tokens .nav-tabs > span.text,
html.design-v3 .v3-vpn-client-manager .nav-tabs > span.text,
html.design-v3 .seedbox-manager-v3 .nav-tabs > span.text {
    display: none !important;
}

html.design-v3 .v3-account-profile .nav-tabs::before,
html.design-v3 .v3-account-profile .nav-tabs::after,
html.design-v3 .v3-vpn-client-manager .nav-tabs::before,
html.design-v3 .v3-vpn-client-manager .nav-tabs::after,
html.design-v3 .v3-payment-tokens .nav-tabs::before,
html.design-v3 .v3-payment-tokens .nav-tabs::after {
    display: none !important;
    content: none !important;
}

/* Use type position: the injected span makes the older :nth-child mapping wrong. */
html.design-v3 .v3-account-profile .nav-tabs > li:nth-of-type(1) {
    grid-column: 1;
}

html.design-v3 .v3-account-profile .nav-tabs > li:nth-of-type(2) {
    grid-column: 2;
}

html.design-v3 .v3-account-profile .nav-tabs > li:nth-of-type(3) {
    grid-column: 3;
}

/* Profile: editable values must become real rows when the existing JS opens them. */
html.design-v3 .v3-account-profile .content.profile {
    overflow: visible;
}

/* The legacy profile-body paints a square grey inset over the rounded card.
 * Keep overflow visible for controls; let the tab strip and panel own their
 * corners instead of clipping the entire interactive profile. */
html.design-v3 .v3-account-profile .content.profile > .profile-body {
    padding: 0;
    border-radius: inherit;
    background: transparent;
}

html.design-v3 .v3-account-profile .content.profile > .profile-body > .tab-v1 {
    border-radius: inherit;
}

html.design-v3 .v3-account-profile .tab-v1 > .tab-content {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

html.design-v3 .v3-account-profile .dl-horizontal dd,
html.design-v3 .v3-account-profile .dl-horizontal dd > span {
    min-width: 0;
    max-width: 100%;
}

html.design-v3 .v3-account-profile .dl-horizontal dd > span[id^="affichevalu"][id$="input"][style*="display: initial"] {
    display: block !important;
    width: 100%;
}

html.design-v3 .v3-account-profile .dl-horizontal dd > span[id^="affichevalu"][id$="input"] input,
html.design-v3 .v3-account-profile .dl-horizontal dd > span[id^="affichevalu"][id$="input"] select {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

html.design-v3 .v3-account-profile .dl-horizontal dd > span:not([id$="input"]) {
    overflow-wrap: anywhere;
}

html.design-v3 .v3-account-profile .sky-form .toggle {
    position: relative;
    cursor: pointer;
}

html.design-v3 .v3-account-profile .sky-form .toggle > i,
html.design-v3 .v3-account-profile .sky-form .toggle > i::before,
html.design-v3 .v3-account-profile .sky-form .toggle > i::after {
    display: block;
}

html.design-v3 .v3-account-profile .sky-form .input > input,
html.design-v3 .v3-account-profile .sky-form .select > select {
    min-width: 0;
    max-width: 100%;
}

/*
 * Payment tabs are renamed by design-v3.js before the legacy generic tabs
 * initializer runs. Mirror the original panel styles under that safe class.
 */
html.design-v3 .v3-payment-tokens .v3-payment-switcher {
    overflow: visible;
    border: 1px solid var(--v3-payment-line, var(--v3-border, #dce4ed));
    border-radius: 18px;
    background: var(--v3-payment-panel, var(--v3-white, #ffffff));
    box-shadow: var(--v3-shadow, 0 16px 40px rgba(8, 17, 31, 0.09));
    font-size: 0;
}

html.design-v3 .v3-payment-tokens .v3-payment-switcher > legend {
    display: none;
}

html.design-v3 .v3-payment-tokens .v3-payment-switcher > .nav-tabs {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 12px 20px 0;
    border-bottom: 1px solid var(--v3-payment-line, var(--v3-border, #dce4ed));
    background: #edf3f8;
    border-radius: 17px 17px 0 0;
}

html.design-v3 .v3-payment-tokens .v3-payment-switcher > .nav-tabs > li {
    float: none;
    margin: 0;
}

html.design-v3 .v3-payment-tokens .v3-payment-switcher > .nav-tabs > li > a {
    margin: 0;
    padding: 12px 16px;
    border: 0;
    border-radius: 10px 10px 0 0;
    color: var(--v3-payment-muted, var(--v3-muted, #617186));
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

html.design-v3 .v3-payment-tokens .v3-payment-switcher > .nav-tabs > li.active > a,
html.design-v3 .v3-payment-tokens .v3-payment-switcher > .nav-tabs > li > a:hover {
    border: 0;
    background: var(--v3-payment-panel, var(--v3-white, #ffffff));
    color: var(--v3-payment-ink, var(--v3-text, #132033));
}

html.design-v3 .v3-payment-tokens .v3-payment-switcher .v3-payment-tab-content {
    overflow: visible;
    border-radius: 0 0 17px 17px;
}

html.design-v3 .v3-payment-tokens .v3-payment-switcher a:focus,
html.design-v3 .v3-payment-tokens .v3-payment-switcher a:focus-visible {
    position: relative;
    z-index: 2;
    border-radius: 5px;
    outline: 3px solid var(--v3-blue, #2f80ed);
    outline-offset: 2px;
}

html.design-v3 .v3-payment-tokens .v3-payment-input-group > .v3-payment-input {
    float: none;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

html.design-v3 .v3-payment-tokens .v3-payment-input-group > .input-group-btn {
    display: flex;
    flex: 0 0 auto;
    width: auto;
}

html.design-v3 .v3-payment-tokens .v3-payment-dedipass-widget {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

html.design-v3 .v3-payment-tokens .v3-payment-dedipass-host,
html.design-v3 .v3-payment-tokens .v3-payment-dedipass-host > iframe {
    max-width: 100%;
}

/* Keep dynamic legacy table wrappers as the sole horizontal scroll owner. */
html.design-v3 .v3-affiliate-history-column,
html.design-v3 .v3-affiliate-history-panel,
html.design-v3 .v3-billing-content,
html.design-v3 .v3-billing-panel,
html.design-v3 .v3-account-migration .col-md-9,
html.design-v3 .v3-account-compensation .col-md-9,
html.design-v3 .v3-products-dashboard .v3-products-table-wrap,
html.design-v3 .v3-products-dashboard .table-wrapper {
    min-width: 0;
    max-width: 100%;
}

html.design-v3 .v3-affiliate-history-panel > .table-wrapper,
html.design-v3 .v3-billing-panel > .table-wrapper,
html.design-v3 .v3-billing-table-wrap > .table-wrapper,
html.design-v3 .v3-account-migration .table-wrapper,
html.design-v3 .v3-account-compensation .table-wrapper,
html.design-v3 .v3-products-dashboard .v3-products-table-wrap > .table-wrapper,
html.design-v3 .v3-vpn-client-list__main > .table-wrapper,
html.design-v3 .v3-vpn-client-manager .table-wrapper,
html.design-v3 .seedbox-manager-v3 .table-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

html.design-v3 .v3-affiliate-history-panel > .table-wrapper,
html.design-v3 .v3-billing-panel > .table-wrapper,
html.design-v3 .v3-billing-table-wrap > .table-wrapper,
html.design-v3 .v3-account-migration .table-wrapper,
html.design-v3 .v3-account-compensation .table-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

html.design-v3 .v3-affiliate-history-panel,
html.design-v3 .v3-billing-panel {
    overflow: visible;
}

html.design-v3 .v3-affiliate-table,
html.design-v3 .v3-billing-table,
html.design-v3 .v3-billing-items-table,
html.design-v3 .v3-billing-transactions-table {
    max-width: none;
}

html.design-v3 .v3-affiliate-table th,
html.design-v3 .v3-affiliate-table td,
html.design-v3 .v3-billing-table th,
html.design-v3 .v3-billing-table td {
    overflow-wrap: anywhere;
}

/* One table algorithm keeps support/migration headers and body columns aligned. */
html.design-v3 .v3-support-index .table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

html.design-v3 .v3-support-index .support,
html.design-v3 .v3-account-migration .support,
html.design-v3 .v3-account-compensation .support {
    display: table;
    width: 100%;
    overflow: visible;
    table-layout: fixed;
}

html.design-v3 .v3-support-index .support thead,
html.design-v3 .v3-account-migration .support thead,
html.design-v3 .v3-account-compensation .support thead {
    display: table-header-group;
    width: auto;
    min-width: 0;
}

html.design-v3 .v3-support-index .support tbody,
html.design-v3 .v3-account-migration .support tbody,
html.design-v3 .v3-account-compensation .support tbody {
    display: table-row-group;
    width: auto;
    min-width: 0;
}

html.design-v3 .v3-support-index .support tr,
html.design-v3 .v3-account-migration .support tr,
html.design-v3 .v3-account-compensation .support tr {
    display: table-row;
}

html.design-v3 .v3-support-index .support th,
html.design-v3 .v3-support-index .support td,
html.design-v3 .v3-account-migration .support th,
html.design-v3 .v3-account-migration .support td,
html.design-v3 .v3-account-compensation .support th,
html.design-v3 .v3-account-compensation .support td {
    overflow-wrap: anywhere;
}

html.design-v3 .v3-support-index .v3-support-ticket__view {
    width: 64px;
}

html.design-v3 .v3-support-index .v3-support-ticket__actions {
    width: 72px;
}

html.design-v3 .v3-support-index thead .v3-support-ticket__view,
html.design-v3 .v3-support-index thead .v3-support-ticket__actions {
    white-space: nowrap;
}

html.design-v3 .v3-support .reg-page,
html.design-v3 .v3-support .control-group,
html.design-v3 .v3-support .form-control,
html.design-v3 .v3-support-answer .timeline-v2,
html.design-v3 .v3-support-answer .cbp_tmlabel {
    min-width: 0;
    max-width: 100%;
}

/* More specific than the legacy form-row reset, which removes the gap. */
html.design-v3 .v3-support-answer .reg-page .row.v3-support-answer__actions {
    margin-top: 16px;
}

/* Tables may safely overflow in X, but interactive tooltips must not be clipped. */
html.design-v3 .v3-support-index .support,
html.design-v3 .seedbox-manager-v3 .table {
    overflow: visible;
}

html.design-v3 .v3-support-index .v3-support-ticket__view,
html.design-v3 .v3-support-index .v3-support-ticket__actions,
html.design-v3 .v3-vpn-client-list .v3-vpn-client-actions,
html.design-v3 .seedbox-manager-v3 .tooltips {
    position: relative;
}

html.design-v3 .v3-support .tooltip,
html.design-v3 .v3-vpn-client-list .tooltip,
html.design-v3 .v3-vpn-client-manager .tooltip,
html.design-v3 .seedbox-manager-v3 .tooltip {
    z-index: 1080;
    pointer-events: none;
}

/* Seed/VPN service content: robust icons, long credentials and reachable dialogs. */
html.design-v3 .seedbox-manager-v3 .icon-line.fa {
    font-family: FontAwesome !important;
    font-style: normal;
}

html.design-v3 .v3-vpn-client-manager .v3-vpn-client-tool [class*="icon-"]:not(.fa) {
    font-family: "Simple-Line-Icons" !important;
    font-style: normal;
}

html.design-v3 .seedbox-manager-v3 .service_passwd,
html.design-v3 .seedbox-manager-v3 .service_login,
html.design-v3 .v3-vpn-client-manager .v3-vpn-client-location,
html.design-v3 .v3-vpn-client-manager .v3-vpn-client-location p {
    overflow-wrap: anywhere;
    word-break: break-word;
}

html.design-v3 .seedbox-manager-v3 .service-block .btn-u,
html.design-v3 .v3-vpn-client-manager .btn-u {
    max-width: 100%;
    white-space: normal;
}

html.design-v3 .seedbox-manager-v3 .progress.tooltips {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100%;
    max-width: none !important;
    margin: 8px 0 0 !important;
}

html.design-v3 .v3-vpn-client-manager__locations > hr + .btn-u {
    position: static !important;
    float: right;
    margin: 8px 0 0;
}

html.design-v3 .seedbox-manager-v3 .modal-dialog,
html.design-v3 .v3-vpn-client-modal .modal-dialog,
html.design-v3 .v3-products-dashboard .modal-dialog {
    max-width: calc(100% - 28px);
}

html.design-v3 .seedbox-manager-v3 .modal-content,
html.design-v3 .v3-vpn-client-modal .modal-content,
html.design-v3 .v3-products-dashboard .modal-content {
    overflow: visible;
}

html.design-v3 .seedbox-manager-v3 .modal-body,
html.design-v3 .v3-vpn-client-modal .modal-body,
html.design-v3 .v3-products-dashboard .modal-body {
    max-height: calc(100vh - 190px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

html.design-v3 .seedbox-manager-v3 .modal-header,
html.design-v3 .v3-vpn-client-modal .modal-header,
html.design-v3 .v3-products-dashboard .modal-header {
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

html.design-v3 .seedbox-manager-v3 .modal-footer,
html.design-v3 .v3-vpn-client-modal .modal-footer,
html.design-v3 .v3-products-dashboard .modal-footer {
    border-radius: inherit;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

@media (min-width: 600px) {
    html.design-v3 .seedbox-manager-v3 .table-wrapper {
        overflow: visible;
    }
}

@media (max-width: 1000px) {
    /* Card rows avoid a clipped tooltip/table at the intermediate shell width. */
    html.design-v3 .v3-support-index .table-wrapper {
        overflow: visible;
    }

    html.design-v3 .v3-support-index .support {
        display: block;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    html.design-v3 .v3-support-index .support thead {
        display: none;
    }

    html.design-v3 .v3-support-index .support tbody {
        display: grid;
        gap: 12px;
        width: 100%;
        min-width: 0;
    }

    html.design-v3 .v3-support-index .support .v3-support-ticket {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "ticket status"
            "category view"
            "date actions";
        gap: 10px 14px;
        align-items: center;
        padding: 16px;
        border: 1px solid var(--v3-support-line, var(--v3-border, #dce4ed));
        border-radius: 13px;
        background: var(--v3-support-panel, var(--v3-white, #ffffff));
        box-shadow: 0 8px 24px rgba(8, 17, 31, 0.055);
    }

    html.design-v3 .v3-support-index .support .v3-support-ticket > td {
        width: auto;
        padding: 0;
        border: 0;
        background: transparent;
        text-align: left !important;
    }

    html.design-v3 .v3-support-index .v3-support-ticket__view {
        grid-area: view;
        justify-self: end;
    }

    html.design-v3 .v3-support-index .v3-support-ticket__id {
        grid-area: ticket;
        font-size: 15px;
    }

    html.design-v3 .v3-support-index .v3-support-ticket__category {
        grid-area: category;
    }

    html.design-v3 .v3-support-index .v3-support-ticket__status {
        grid-area: status;
        justify-self: end;
    }

    html.design-v3 .v3-support-index .v3-support-ticket__date {
        grid-area: date;
    }

    html.design-v3 .v3-support-index .v3-support-ticket__actions {
        grid-area: actions;
        justify-self: end;
    }

    html.design-v3 .v3-support-index .v3-support-ticket__category::before,
    html.design-v3 .v3-support-index .v3-support-ticket__date::before {
        display: block;
        margin-bottom: 2px;
        color: var(--v3-support-muted, var(--v3-muted, #617186));
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.055em;
        text-transform: uppercase;
    }

    html.design-v3 .v3-support-index .v3-support-ticket__category::before {
        content: "Catégorie";
    }

    html.design-v3 .v3-support-index .v3-support-ticket__date::before {
        content: "Dernière activité";
    }
}

@media (max-width: 599px) {
    html.design-v3 .v3-account-profile .nav-tabs {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        overflow: visible;
        scroll-snap-type: none;
    }

    html.design-v3 .v3-account-profile .nav-tabs > li:nth-of-type(n) {
        grid-column: 1;
        width: auto;
    }

    html.design-v3 .v3-payment-tokens .v3-payment-switcher {
        border-radius: 14px;
    }

    html.design-v3 .v3-payment-tokens .v3-payment-switcher > .nav-tabs {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        padding: 8px 8px 0;
        border-radius: 13px 13px 0 0;
    }

    html.design-v3 .v3-payment-tokens .v3-payment-switcher > .nav-tabs > li,
    html.design-v3 .v3-payment-tokens .v3-payment-switcher > .nav-tabs > li > a {
        width: 100%;
        text-align: center;
    }

    html.design-v3 .v3-payment-tokens .v3-payment-input-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    html.design-v3 .v3-payment-tokens .v3-payment-input-group > .v3-payment-input,
    html.design-v3 .v3-payment-tokens .v3-payment-input-group > .input-group-btn,
    html.design-v3 .v3-payment-tokens .v3-payment-input-group .v3-payment-submit {
        display: flex;
        width: 100%;
    }

    html.design-v3 .v3-payment-tokens .v3-payment-input-group .v3-payment-submit {
        justify-content: center;
    }

    html.design-v3 .v3-affiliate-table,
    html.design-v3 .v3-billing-table {
        min-width: 650px;
    }

    html.design-v3 .v3-vpn-client-list__main > .table-wrapper,
    html.design-v3 .v3-products-dashboard .v3-products-table-wrap,
    html.design-v3 .v3-products-dashboard .v3-products-table-wrap > .table-wrapper,
    html.design-v3 .seedbox-manager-v3 .table-wrapper {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* The Seed overview is four label/value cells, so it can reflow without X scroll. */
    html.design-v3 .seedbox-manager-v3 .table-wrapper {
        overflow: visible;
    }

    html.design-v3 .seedbox-manager-v3 .table,
    html.design-v3 .seedbox-manager-v3 .table tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    html.design-v3 .seedbox-manager-v3 .table tr {
        display: grid;
        grid-template-columns: minmax(88px, 0.8fr) minmax(0, 1.2fr);
        width: 100%;
    }

    html.design-v3 .seedbox-manager-v3 .table td {
        display: block;
        width: auto;
        min-width: 0;
        padding: 11px 10px;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    html.design-v3 .seedbox-manager-v3 .table td[colspan] {
        grid-column: 1 / -1;
    }

    html.design-v3 .seedbox-manager-v3 .modal-dialog,
    html.design-v3 .v3-products-dashboard .modal-dialog {
        width: calc(100% - 28px);
        margin: 24px auto;
    }

    html.design-v3 .seedbox-manager-v3 .modal-body,
    html.design-v3 .v3-vpn-client-modal .modal-body,
    html.design-v3 .v3-products-dashboard .modal-body {
        max-height: calc(100vh - 150px);
    }
}