/* *****************************************************

    TakeDark custom overrides (rebuilt 2026-07-31)

    1. Base sizing (kept from the original package)
    2. Lagom order form (our cart) — dark variable mapping
    3. WHMCS "Recommended for you" / MarketConnect widgets — dark
    4. Restore Bootstrap grid inside module content
    5. ModulesGarden Layers UI (SolusVM2) — dark

***************************************************** */

html {
    font-size: 14px;
}

/* ── 2. Lagom order form, dark ─────────────────────────────
   html:root outranks the :root in Lagom variables.css
   regardless of stylesheet order. */

html:root {
    /* page shell */
    --body-bg: #0b1019;
    --main-top-bg: #0e1422;
    --main-footer-bg: #0e1422;
    --main-body-sidebar-content-bg: #111726;
    --app-nav-left-bg: #0e1422;
    --app-nav-top-bg: #0e1422;
    --mob-app-nav-header-bg: #0e1422;
    --breadcrumb-bg: transparent;

    /* blocks and controls */
    --ui-block-bg: #111726;
    --dropdown-bg: #161d2e;
    --popover-bg: #161d2e;
    --tooltip-bg: #161d2e;
    --select-option-bg: #161d2e;
    --input-bg: #0e1422;
    --input-hover-bg: #111a2b;
    --input-focus-bg: #111a2b;
    --icheck-bg: #0e1422;
    --primary-block-input-bg: #111a2b;
    --loader-light-bg: #111726;
    --badge-active-bg: #1d2536;
    --code-bg: #1a2233;

    /* gray scale, inverted for dark */
    --gray-base: #c3ccdd;
    --gray-darker: #f8fafc;
    --gray-lighter: #8693a8;
    --gray-lighter-2: #3a465e;
    --gray-lighter-3: #2a3349;
    --gray-lighter-4: #1d2536;
    --gray-faded: #131a2a;

    /* pale brand tints -> dark tints (alert/section backgrounds) */
    --brand-primary-lighter-3: #16233f;
    --brand-primary-lighter-4: #121b30;
    --brand-info-lighter-3: #16233f;
    --brand-success-lighter-2: #12301c;
    --brand-success-lighter-3: #102818;
    --brand-success-lighter-4: #0e2215;
    --brand-warning-lighter-2: #33270e;
    --brand-warning-lighter-3: #2b210d;
    --brand-warning-lighter-4: #241c0c;
    --brand-danger-lighter-2: #371417;
    --brand-danger-lighter-3: #2d1114;
    --brand-danger-lighter-4: #260f11;

    --btn-default-hover-bg: #1d2536;
    --btn-disabled-bg: #1d2536;
    --btn-disabled-color: #5c6880;
}

#lagom-one-step-order .bg-white,
#lagom-one-step-order .loader-panel,
#lagom-one-step-order .theme-switcher-content,
#lagom-one-step-order .theme-switcher-footer,
#lagom-one-step-order .theme-switcher-footer .btn-default,
#lagom-one-step-order .table td,
#lagom-one-step-order .table th {
    background-color: #111726 !important;
    color: #c3ccdd;
}

#lagom-one-step-order {
    color: #c3ccdd;
}

/* ── 3. "Recommended for you" / MarketConnect widgets ────── */

.product-recommendations-container,
.product-recommendations {
    background: transparent;
}

.product-recommendations .product-recommendation,
.panel-market-item,
.panel-market-account,
#recommendationsModal .modal-content,
#recommendationsModal .modal-header,
#recommendationsModal .modal-footer,
#recommendationsModal .product-added-panel .panel-body {
    background-color: #111726 !important;
    border-color: #94a3b817 !important;
    color: #c3ccdd !important;
}

.product-recommendations .product-recommendation,
.product-recommendations .product-recommendation *:not(.btn):not(a),
.panel-market-item *:not(.btn):not(a) {
    color: #c3ccdd;
}

.product-recommendations .product-recommendation .headline,
.product-recommendations .product-recommendation .price,
#recommendationsModal .product-added-panel .price,
#recommendationsModal .modal-header {
    color: #f8fafc !important;
}

.product-recommendations .product-recommendation .cta,
.product-recommendations .product-recommendation .cta * {
    color: #5c8aff;
}

/* ── 4. Restore Bootstrap grid inside content areas ────────
   takedark.css applies `gap:1.5rem; margin:0` to EVERY .row in
   the logged-in layout (meant only for the outer page shell).
   The added gap makes col-4 + col-8 exceed 100%, wrapping every
   value onto its own line and wrecking all server-module pages
   (VirtFusion, SolusVM2, dedicated). Nested rows get stock
   Bootstrap behaviour back. */

html body.tdk-loggedin #main-body .row .row {
    display: flex;
    gap: 0;
    margin-right: -15px;
    margin-left: -15px;
    padding: 0;
    border-bottom: 0;
}

/* ── 5. ModulesGarden Layers UI (SolusVM2), dark ─────────── */

#layers2 {
    color: #c3ccdd;
}
#layers2 h1, #layers2 h2, #layers2 h3, #layers2 h4, #layers2 h5, #layers2 h6,
#layers2 .lu-widget__title, #layers2 .lu-tile__title,
#layers2 .lu-table th, #layers2 .lu-modal__title {
    color: #f8fafc;
}
#layers2 .lu-form-control {
    color: #e6ebf5;
}
#layers2 .lu-table td {
    color: #c3ccdd;
}

#layers2 .drop .lu-dropdown__arrow:after,
#layers2 .drop-arrow:after,
#layers2 .lu-alert--outline,
#layers2 .lu-app-main__actions,
#layers2 .lu-dropdown,
#layers2 .lu-form-control,
#layers2 .lu-input-group,
#layers2 .lu-mob-dropdown,
#layers2 .lu-modal__content,
#layers2 .lu-nav--arrow .lu-nav__item.is-active .lu-nav__link:after,
#layers2 .lu-nav--h .lu-nav--sub,
#layers2 .lu-navbar,
#layers2 .lu-navbar--v-thin .lu-navbar__nav .lu-nav:not(.lu-nav--sub) > .lu-nav__item .lu-nav--sub,
#layers2 .lu-navbar--v-thin .lu-navbar__nav .lu-nav:not(.lu-nav--sub) > .lu-nav__item > .lu-nav--sub,
#layers2 .lu-navbar.lu-off-canvas-responsive .lu-navbar__nav .lu-nav--sub,
#layers2 .lu-off-canvas,
#layers2 .lu-selectize-control,
#layers2 .lu-selectize-control .lu-selectize-dropdown,
#layers2 .lu-t-c__body--boxed,
#layers2 .lu-tile,
#layers2 .lu-tree-view .lu-list-group__top .lu-toggle-icon,
#layers2 .lu-widget,
#layers2-body .drop .lu-dropdown__arrow:after,
#layers2-body .drop-arrow:after,
#layers2-body .lu-alert--outline,
#layers2-body .lu-dropdown,
#layers2-body .lu-mob-dropdown {
    background-color: #111726 !important;
}

#layers2 .lu-app-main__actions,
#layers2 .lu-badge,
#layers2 .lu-badge--default,
#layers2 .lu-badge--outline,
#layers2 .lu-badge--outline.lu-badge--default,
#layers2 .lu-block--auth .lu-block__actions,
#layers2 .lu-block--auth .lu-block__body.lu-left-arrow:before,
#layers2 .lu-block__sidebar--condensed .lu-widget .lu-form-control,
#layers2 .lu-block__sidebar--condensed .lu-widget .lu-selectize-input,
#layers2 .lu-btn--outline.lu-btn--default,
#layers2 .lu-btn--outline.lu-btn--default.drop-enabled,
#layers2 .lu-btn--outline.lu-btn--default.is-active,
#layers2 .lu-btn--outline.lu-btn--default:active,
#layers2 .lu-btn--outline.lu-btn--default:focus,
#layers2 .lu-btn--outline.lu-btn--default:hover,
#layers2 .lu-btn--outline.lu-btn--plain,
#layers2 .lu-btn__text .lu-badge,
#layers2 .lu-form-control,
#layers2 .lu-form-control:hover,
#layers2 .lu-has-dark-background .lu-selectize-input,
#layers2 .lu-input-group,
#layers2 .lu-input-group:hover,
#layers2 .lu-label--outline,
#layers2 .lu-label--outline.lu-label--default,
#layers2 .lu-list-group,
#layers2 .lu-list-group__item,
#layers2 .lu-modal__body,
#layers2 .lu-nav--arrow .lu-nav__item.is-active .lu-nav__link:after,
#layers2 .lu-preloader:before,
#layers2 .lu-t-c__footer,
#layers2 .lu-t-c__top,
#layers2 .lu-table tbody td,
#layers2 .lu-table tbody th,
#layers2 .lu-table tfoot td,
#layers2 .lu-table tfoot th,
#layers2 .lu-table thead td,
#layers2 .lu-table thead th,
#layers2 .lu-tabs-container,
#layers2 .lu-tile,
#layers2 .lu-top.lu-top--tools .lu-top__toolbar .lu-has-dropdown,
#layers2 .lu-widget,
#layers2 .lu-widget--dashed .lu-widget__body,
#layers2 .lu-widget--dashed .lu-widget__header,
#layers2 .lu-widget__actions,
#layers2 .lu-widget__body,
#layers2 .lu-widget__header,
#layers2 .lu-widget__top,
#layers2 hr {
    border-color: #94a3b826 !important;
}

/* Lagom cart rows are first-level under #main-body, so the theme's
   row-gap rule breaks its grid too — restore stock behaviour there. */
html body #main-body #lagom-one-step-order .row {
    display: flex;
    gap: 0;
    margin-right: -15px;
    margin-left: -15px;
    padding: 0;
    border-bottom: 0;
}

/* ── 6. Markdown editor (tickets), dark ──────────────────── */

.CodeMirror {
    background: #0e1422 !important;
    color: #e6ebf5 !important;
    border-color: #94a3b826 !important;
}
.CodeMirror-cursor { border-left-color: #e6ebf5 !important; }
.CodeMirror-selected { background: #2a3349 !important; }
.editor-toolbar {
    background: #111726 !important;
    border-color: #94a3b826 !important;
    opacity: 1 !important;
}
.editor-toolbar a,
.editor-toolbar button {
    color: #c3ccdd !important;
}
.editor-toolbar a.active, .editor-toolbar a:hover,
.editor-toolbar button.active, .editor-toolbar button:hover {
    background: #1d2536 !important;
    border-color: #94a3b826 !important;
}
.editor-statusbar {
    background: #111726 !important;
    color: #8693a8 !important;
    border-color: #94a3b826 !important;
}
.editor-preview, .editor-preview-side {
    background: #0e1422 !important;
    color: #c3ccdd !important;
}
.attachments-wrapper .custom-file-label,
.custom-file-label {
    background-color: #0e1422;
    color: #c3ccdd;
    border-color: #94a3b826;
}
.custom-file-label::after {
    background-color: #1d2536;
    color: #c3ccdd;
}

/* ── 7. WHMCS bootstrap-markdown ticket editor, dark ───────
   (the ticket reply editor is bootstrap-markdown: .md-*) */

.md-editor {
    background: #0e1422 !important;
    border-color: #94a3b826 !important;
    color: #c3ccdd;
}
.md-editor > .md-header,
.md-editor .md-footer {
    background: #111726 !important;
    color: #8693a8 !important;
}
.md-editor > textarea.md-input,
.md-editor textarea {
    background: #0e1422 !important;
    color: #e6ebf5 !important;
    border-color: transparent !important;
}
.md-editor .md-preview {
    background: #0e1422 !important;
    color: #c3ccdd !important;
}
.md-editor.active {
    border-color: #2e6bff !important;
    box-shadow: none !important;
}

/* ── 8. Auth pages (thehost design) fill the whole canvas ──
   login / password reset use thehost's templates and
   stylesheets; strip takedark's chrome so the video background
   covers the entire viewport. */

body.tdk-pg-login #header,
body[class*="tdk-pg-password-reset"] #header,
body.tdk-pg-login .master-breadcrumb,
body[class*="tdk-pg-password-reset"] .master-breadcrumb,
body.tdk-pg-login #footer,
body[class*="tdk-pg-password-reset"] #footer {
    display: none !important;
}

body.tdk-pg-login #main-body,
body[class*="tdk-pg-password-reset"] #main-body {
    padding: 0 !important;
    margin: 0 !important;
}

body.tdk-pg-login #main-body .container,
body[class*="tdk-pg-password-reset"] #main-body .container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.tdk-pg-login .auth-page,
body[class*="tdk-pg-password-reset"] .auth-page {
    min-height: 100vh;
    width: 100%;
}

/* ── 9. Lagom checkout: readable text in billing panels ────
   (panel/address text uses literal dark colors meant for white
   panels — force readable colors on our dark surfaces) */

#lagom-one-step-order .panel-body,
#lagom-one-step-order .panel-body address,
#lagom-one-step-order .address-item,
#lagom-one-step-order .check-content,
#lagom-one-step-order .check-content span,
#lagom-one-step-order .panel-heading label,
#lagom-one-step-order .section-body label,
#lagom-one-step-order .form-control,
#lagom-one-step-order .panel-title {
    color: #c3ccdd !important;
}
#lagom-one-step-order .section-title,
#lagom-one-step-order .panel-heading .check-content strong {
    color: #f8fafc !important;
}

/* ── 10. MarketConnect upsell banners ("Recommended for you") */

.promo-banner {
    background-color: #111726 !important;
    color: #c3ccdd !important;
    border-color: #94a3b826;
}
.promo-banner .content,
.promo-banner .content p,
.promo-banner span,
.promo-banner li {
    color: #c3ccdd !important;
}
.promo-banner h1, .promo-banner h2, .promo-banner h3,
.promo-banner h4, .promo-banner h5, .promo-banner strong {
    color: #f8fafc !important;
}

/* Auth pages: pin the video layer to the viewport and remove every
   wrapper inset so the background covers the whole screen on any
   display (no gray corners/strips). */
body.tdk-pg-login #main-body,
body[class*="tdk-pg-password-reset"] #main-body {
    padding: 0 !important;
}
body.tdk-pg-login .primary-content,
body[class*="tdk-pg-password-reset"] .primary-content,
body.tdk-pg-login #main-body .container > div,
body[class*="tdk-pg-password-reset"] #main-body .container > div {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
}
body.tdk-pg-login .tdk-app,
body[class*="tdk-pg-password-reset"] .tdk-app {
    padding: 0 !important;
    margin: 0 !important;
}
body.tdk-pg-login .auth-page,
body[class*="tdk-pg-password-reset"] .auth-page {
    min-height: 100dvh;
    width: 100%;
}
body.tdk-pg-login .auth-page .video-bg-wrapper,
body[class*="tdk-pg-password-reset"] .auth-page .video-bg-wrapper {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw;
    height: 100dvh;
    z-index: 0;
}
body.tdk-pg-login .grain,
body[class*="tdk-pg-password-reset"] .grain {
    display: none;
}

/* ── 11. Stock Bootstrap components the theme never darkened ──
   (announcement lists, modals, collapsible sidebar cards,
   pagination — same family as the ticket editor issue) */

.list-group-item {
    background-color: #111726 !important;
    color: #c3ccdd !important;
    border-color: #94a3b817 !important;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: #1d2536 !important;
    color: #f8fafc !important;
}
.list-group-item-action:active {
    background-color: #232c42 !important;
    color: #f8fafc !important;
}
.list-group-item.active {
    background-color: #16233f !important;
    border-color: #2e6bff !important;
    color: #f8fafc !important;
}

.modal-content {
    background-color: #111726 !important;
    color: #c3ccdd;
    border-color: #94a3b826;
}
.modal-header, .modal-footer {
    border-color: #94a3b817 !important;
}
.modal-header .close {
    color: #c3ccdd;
    text-shadow: none;
}

.collapsable-card-body,
.card .card-body .collapsable-card-body {
    background-color: transparent;
    color: #c3ccdd;
}

.page-link {
    background-color: #111726 !important;
    border-color: #94a3b826 !important;
    color: #c3ccdd !important;
}
.page-item.active .page-link {
    background-color: #2e6bff !important;
    border-color: #2e6bff !important;
    color: #fff !important;
}
.page-item.disabled .page-link {
    background-color: #0e1422 !important;
    color: #5c6880 !important;
}

/* ── 13. Order page (Lagom store): OS option dropdown expands
   in-flow instead of floating transparently over the section
   below (which blocked clicks on the next options) */

#lagom-one-step-order .row--osBox .panel-actions .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    transform: none !important;
    box-shadow: none;
    margin-top: 8px;
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}
#lagom-one-step-order .row--osBox > div.open .panel-actions .dropdown-menu,
#lagom-one-step-order .row--osBox > div.show .panel-actions .dropdown-menu,
#lagom-one-step-order .row--osBox .panel-actions .dropdown-menu.show {
    display: block !important;
}
#lagom-one-step-order .row--osBox .dropdown-menu .radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: #c3ccdd;
}
#lagom-one-step-order .row--osBox .dropdown-menu .radio-label:hover {
    background: #1d2536;
    color: #f8fafc;
}

/* ── 14. Dashboard: account balance tile ─────────────────── */

.dash-stats {
    grid-template-columns: repeat(5, 1fr) !important;
}
@media (max-width: 1100px) {
    .dash-stats { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px) {
    .dash-stats { grid-template-columns: 1fr !important; }
}
.ds-ic.ds-green {
    background: #12301c;
    color: #4ade80;
}
.ds-num-money {
    font-size: 1.15rem;
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── 15. Dashboard flair: rewards summary + badges ────────── */

.dash-flair {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 1.5rem;
    padding: 14px 16px;
    background: linear-gradient(135deg, #131a2ae6, #111726f2);
    border: 1px solid #94a3b81f;
    border-radius: 14px;
}
.dash-flair-rewards {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    padding: 8px 14px 8px 10px;
    border-radius: 11px;
    background: #16233f;
    border: 1px solid #2e6bff59;
    transition: border-color .15s, background .15s;
}
.dash-flair-rewards:hover {
    background: #1a2a4d;
    border-color: #2e6bff;
}
.dfr-ic {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #2e6bff2b;
    color: #5c8aff;
    font-size: 16px;
}
.dfr-tx { display: inline-flex; flex-direction: column; line-height: 1.25; }
.dfr-points { color: #f8fafc; font-weight: 700; }
.dfr-sub { color: #8693a8; font-size: 12px; }
.dfr-go { color: #5c8aff; margin-left: 4px; }

.dash-flair-badges {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dash-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: #eaf0fa;
    background: #1d2536;
    border: 1px solid #94a3b833;
    cursor: default;
}
.dash-badge i { color: #22d3ee; font-size: 12px; }
.dash-badge-neutral i { color: #8693a8; }
.dash-badge-locked {
    color: #77839b;
    background: #131a2a;
    border-style: dashed;
}
.dash-badge-locked i { color: #5c6880; }
.dash-badge-locked em { font-style: normal; font-weight: 400; color: #5c6880; }

/* ── 16. Auth pages on phones: center the form, no overlap ── */

body.tdk-pg-login .auth-page .container-fluid,
body[class*="tdk-pg-password-reset"] .auth-page .container-fluid {
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    overflow-x: hidden;
}
body.tdk-pg-login .nt-auth-form,
body[class*="tdk-pg-password-reset"] .nt-auth-form,
body[class*="tdk-pg-password-reset"] .auth-page form {
    width: 100% !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}
body.tdk-pg-login .auth-page .page-content,
body[class*="tdk-pg-password-reset"] .auth-page .page-content {
    width: 100%;
    padding: 32px 0;
    box-sizing: border-box;
}

@media (max-width: 820px) {
    /* quick links flow below the form instead of overlapping it */
    body.tdk-pg-login .auth-page .float-links,
    body[class*="tdk-pg-password-reset"] .auth-page .float-links {
        position: static !important;
        margin: 2.5rem auto 1.5rem;
        width: 100%;
        text-align: center;
    }
}

/* ── 17. Lagom cart on phones ─────────────────────────────── */

@media (max-width: 767.98px) {
    /* negative row margins overflow the narrow viewport — drop them */
    html body #main-body #lagom-one-step-order .row,
    html body.tdk-loggedin #main-body .row .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #lagom-one-step-order,
    #lagom-one-step-order .main-body {
        max-width: 100vw;
        overflow-x: hidden;
    }
    /* tighter page gutters so cards use the width */
    body.tdk-pg-viewcart .tdk-app #main-body,
    body.tdk-pg-checkout .tdk-app #main-body {
        padding: 10px 8px !important;
    }
    #lagom-one-step-order .panel-body {
        padding-left: 14px;
        padding-right: 14px;
    }
    /* section titles and price rows stay readable */
    #lagom-one-step-order .section-title {
        font-size: 1.15rem;
    }
    #lagom-one-step-order .inline-form.flex-column-sm {
        flex-direction: column;
        gap: 10px;
    }
    #lagom-one-step-order .inline-form.flex-column-sm .inline-form-element {
        width: 100% !important;
        margin-right: 0;
    }
}

/* ── 18. Services grid: type chips + location flags ───────── */

.svc-type {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-right: auto;
    margin-left: 8px;
}
.svc-type-vps       { background: #16233f; color: #5c8aff; border: 1px solid #2e6bff4d; }
.svc-type-dedicated { background: #241b3a; color: #b18aff; border: 1px solid #8a5cff4d; }
.svc-type-hosting   { background: #0e2a28; color: #2dd4bf; border: 1px solid #2dd4bf4d; }
.svc-type-game      { background: #2a1d10; color: #fbbf24; border: 1px solid #fbbf244d; }

.svc-ic-dedicated { background: #241b3a; color: #b18aff; }
.svc-ic-hosting   { background: #0e2a28; color: #2dd4bf; }
.svc-ic-game      { background: #2a1d10; color: #fbbf24; }

.svc-flag {
    display: inline-block;
    vertical-align: baseline;
    margin-right: 8px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px #94a3b833;
    transform: scale(1.15);
    transform-origin: left center;
}

/* ── 19. Core-rendered pages (service renewals, etc.):
   Bootstrap cards default to white — darken the family ────── */

.card {
    background-color: #111726;
    border-color: #94a3b81f;
    color: #c3ccdd;
}
.card .card-header,
.card .card-footer {
    background-color: #0e1422;
    border-color: #94a3b817;
}
.card .card-title { color: #f8fafc; }
.bg-white  { background-color: #111726 !important; }
.bg-light  { background-color: #0e1422 !important; }
.text-dark { color: #e6ebf5 !important; }

/* ── 20. Order page: generalize the dropdown-overlay fix ────
   Every config option's dropdown expands in-flow; closed ones
   are fully removed so no transparent layer can block sliders
   or other controls below. Slider panels also sit above any
   remaining overlay (Lagom uses z-index 15 for open cards). */

#lagom-one-step-order .panel--main .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    transform: none !important;
    box-shadow: none;
    margin-top: 8px;
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}
#lagom-one-step-order .panel--main .open .dropdown-menu,
#lagom-one-step-order .panel--main .show .dropdown-menu,
#lagom-one-step-order .panel--main div.open > .dropdown-menu,
#lagom-one-step-order .panel--main .dropdown-menu.show {
    display: block !important;
}
#lagom-one-step-order .panel--main.has-slider,
#lagom-one-step-order .panel--main.has-slider .panel-body {
    position: relative;
    z-index: 16;
}

/* ── 21. Services page: toolbar, grouped sections ─────────── */

.svc-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 1.4rem;
}
.svc-search {
    position: relative;
    flex: 1;
    max-width: 420px;
}
.svc-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #5c6880;
    font-size: 13px;
}
.svc-search input {
    width: 100%;
    background: #0e1422;
    border: 1px solid #94a3b833;
    border-radius: 10px;
    color: #e6ebf5;
    padding: 10px 14px 10px 38px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.svc-search input:focus {
    border-color: #2e6bff;
    box-shadow: 0 0 0 3px #2e6bff2e;
}
.svc-search input::placeholder { color: #5c6880; }
.svc-total {
    color: #8693a8;
    font-size: 13px;
    white-space: nowrap;
}

.svc-group { margin-bottom: 2rem; }
.svc-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 .9rem;
}
.svc-group-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0;
    white-space: nowrap;
}
.svc-group-title i { font-size: .85rem; }
.svc-group-vps i       { color: #5c8aff; }
.svc-group-dedicated i { color: #b18aff; }
.svc-group-hosting i   { color: #2dd4bf; }
.svc-group-game i      { color: #fbbf24; }
.svc-group-count {
    background: #1d2536;
    border: 1px solid #94a3b833;
    color: #aab6c9;
    border-radius: 999px;
    padding: 1px 10px;
    font-size: 12px;
    font-weight: 700;
}
.svc-group-line {
    flex: 1;
    height: 1px;
    background: #94a3b81f;
}
.svc-no-results {
    text-align: center;
    color: #8693a8;
    padding: 2.5rem 0;
}

/* ── 22. Order page: Swiper product carousel geometry ───────
   (guard against theme .row rules leaking into the carousel) */

#lagom-one-step-order .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin-left: 1px !important;
    margin-right: 0 !important;
}
#lagom-one-step-order .swiper-slide {
    flex-shrink: 0 !important;
}
#lagom-one-step-order .swiper-container,
#lagom-one-step-order .swiper {
    overflow: hidden !important;
}

/* Swiper claims the products .row at runtime — the theme's flex
   wrap/gap rules on .row must never apply to an active carousel. */
#lagom-one-step-order [class*="swiper-container"],
#lagom-one-step-order .swiper-initialized {
    display: block !important;
    gap: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
    padding: 4px 2px;
}
#lagom-one-step-order [class*="swiper-container"] > .swiper-wrapper,
#lagom-one-step-order .swiper-initialized > .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 0 !important;
}
/* Swiper's own multi-row mode legitimately wraps — allow it there */
#lagom-one-step-order .swiper-container-multirow > .swiper-wrapper {
    flex-wrap: wrap !important;
}

/* ── 23. Service power dots + quick actions menu ──────────── */

.svc-power {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 2px;
    flex: none;
}
.svc-power-running { background: #4ade80; box-shadow: 0 0 6px #4ade8080; }
.svc-power-stopped { background: #f87171; box-shadow: 0 0 6px #f8717180; }

.svc-menu-btn {
    position: relative;
    margin-left: 8px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #8693a8;
    flex: none;
    cursor: pointer;
}
.svc-menu-btn:hover { background: #1d2536; color: #f8fafc; }
.svc-menu {
    display: none;
    position: absolute;
    top: 32px;
    right: 0;
    z-index: 30;
    min-width: 190px;
    background: #161d2e;
    border: 1px solid #94a3b833;
    border-radius: 11px;
    padding: 6px;
    box-shadow: 0 12px 32px #00000073;
}
.svc-menu-btn.open .svc-menu { display: block; }
.svc-menu a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 7px;
    color: #c3ccdd !important;
    font-size: 13px;
    text-decoration: none !important;
}
.svc-menu a:hover { background: #1d2536; color: #f8fafc !important; }

/* ── 24. Dashboard: billing strip + rewards progress ──────── */

.dash-billing-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 1.2rem;
    padding: 13px 16px;
    border-radius: 13px;
    background: #241c0cd9;
    border: 1px solid #fbbf2440;
    text-decoration: none !important;
    transition: border-color .15s;
}
.dash-billing-strip:hover { border-color: #fbbf24; }
.dash-billing-strip.is-overdue {
    background: #2d1114d9;
    border-color: #f8717159;
}
.dash-billing-strip.is-overdue:hover { border-color: #f87171; }
.dbs-ic { color: #fbbf24; font-size: 18px; }
.is-overdue .dbs-ic { color: #f87171; }
.dbs-tx { color: #e8dcc0; flex: 1; font-size: 14px; }
.is-overdue .dbs-tx { color: #f1d5d7; }
.dbs-credit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    color: #4ade80;
    font-size: 12.5px;
    font-weight: 600;
}
.dbs-pay {
    background: #fbbf24;
    color: #241c0c;
    font-weight: 700;
    border-radius: 9px;
    padding: 8px 16px;
    white-space: nowrap;
}
.is-overdue .dbs-pay { background: #f87171; color: #2d1114; }

.dfr-bar {
    width: 190px;
    height: 5px;
    background: #1d2536;
    border-radius: 999px;
    margin-top: 6px;
    overflow: hidden;
    display: block;
}
.dfr-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #2e6bff, #22d3ee);
    transition: width .4s;
}
.dfr-bar-fill.is-ready { background: linear-gradient(90deg, #16a34a, #4ade80); }
.dfr-redeem {
    background: #16a34a;
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    padding: 6px 14px;
    border-radius: 8px;
}

/* ── 25. API keys page ────────────────────────────────────── */

.thapi-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; }
@media (max-width: 991px) { .thapi-grid { grid-template-columns: 1fr; } }
.thapi-card { margin-bottom: 1.2rem; }
.thapi-token-alert {
    background: #12301c !important;
    border: 1px solid #4ade8059 !important;
    color: #d9f5e2 !important;
    border-radius: 12px;
}
.thapi-token-alert code {
    display: block;
    background: #0e2215;
    color: #a7f3c4;
    padding: 10px 12px;
    border-radius: 8px;
    margin: 8px 0;
    font-size: 14px;
    word-break: break-all;
    user-select: all;
}
.thapi-scope {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    margin-right: 4px;
}
.thapi-scope-read  { background: #16233f; color: #5c8aff; }
.thapi-scope-order { background: #2a1d10; color: #fbbf24; }
.thapi-table td, .thapi-table th { vertical-align: middle; }
.thapi-pre {
    background: #0e1422;
    border: 1px solid #94a3b826;
    color: #c3ccdd;
    border-radius: 10px;
    padding: 12px;
    font-size: 12px;
    overflow-x: auto;
}
.thapi-h { font-weight: 700; color: #f8fafc; margin-top: 1rem; }
.thapi-base code { word-break: break-all; }
.thapi-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.thapi-check input { margin-top: 3px; }

/* Mass Pay: totals rows shipped with a light background */
.masspay-total,
tr.masspay-total td,
.masspay-total td {
    background-color: #111726 !important;
    color: #e6ebf5 !important;
    border-color: #94a3b81f !important;
}
.masspay-total td:first-child { color: #8693a8 !important; }

/* Services card: tidy header row now that it holds icon, dot,
   flag, status and menu; the card is a div so make it behave
   like the link it replaces. */
.svc-card { cursor: pointer; }
.svc-card .svc-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
}
.svc-top-spacer { flex: 1; }
.svc-card .svc-status { white-space: nowrap; }
.svc-card .svc-flag { transform: scale(1.05); }
.svc-card .svc-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* API page extras + DDoS page */
.thapi-full { grid-column: 1 / -1; }
.thapi-snips { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 991px) { .thapi-snips { grid-template-columns: 1fr; } }
.thapi-small { font-size: 12px; margin-top: 6px; }
.thddos-form { max-width: 480px; }
.thddos-st {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
}
.thddos-pending  { background: #33270e; color: #fbbf24; }
.thddos-done     { background: #12301c; color: #4ade80; }
.thddos-rejected { background: #371417; color: #f87171; }

/* ── 26. No scrollbars inside cards ───────────────────────────
   Stock theme CSS caps .client-home-cards list groups at 170px
   and sets overflow:auto on several card bodies, so content
   scrolls inside the box instead of the box growing. Let cards
   size to their content; the page scrolls, not the card. */

.client-home-cards .card-body,
.client-home-cards .list-group,
.client-home-cards .content,
.primary-content .content,
.promo-banner,
.card .card-body {
    max-height: none !important;
    overflow: visible !important;
}

/* Tables and code blocks may still scroll horizontally — that is
   deliberate and must not be broken by the rule above. */
.table-responsive,
.thapi-pre,
pre {
    overflow-x: auto !important;
}

/* ── 27. Select dropdowns must escape their card ──────────────
   An open .tdk-sel menu is absolutely positioned; if any ancestor
   clips or scrolls, the options end up inside a scroll area
   ("scroll down to see the other options"). Keep containers
   unclipped and lift the open control above its neighbours. */

.card,
.card .card-body,
.thapi-card,
.thddos-form,
.form-group {
    overflow: visible !important;
}
.tdk-sel { position: relative; }
.tdk-sel.open { z-index: 1200; }
.tdk-sel-menu {
    max-height: min(320px, 60vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* rDNS page */
.thrdns-inline { display: flex; gap: 8px; align-items: center; max-width: 420px; }
.thrdns-inline .form-control { flex: 1; }
.thrdns-table td { vertical-align: middle; }
.thrdns-link { margin-left: 10px; font-size: 12.5px; }
.thrdns-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #16233f;
    border: 1px solid #2e6bff40;
    border-radius: 11px;
    padding: 12px 14px;
    color: #c3ccdd;
    font-size: 13px;
    margin: 0 0 1.1rem;
}
.thrdns-note i { color: #5c8aff; margin-top: 2px; }
.thrdns-hint { display: block; font-size: 11.5px; color: #8693a8; margin-top: 5px; }
.thrdns-current { font-size: 12px; color: #8693a8; margin-top: 5px; }

/* API page: hero, stats, webhook rows */
.thapi-hero {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 22px 24px;
    margin-bottom: 1.2rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #16233fe6, #111726f2);
    border: 1px solid #2e6bff33;
}
.thapi-hero-tx { flex: 1; min-width: 260px; }
.thapi-hero h1 { font-size: 1.55rem; margin: 0 0 .35rem; color: #f8fafc; }
.thapi-hero p { margin: 0; color: #aab6c9; max-width: 640px; }
.thapi-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.thapi-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.2rem;
}
@media (max-width: 767px) { .thapi-stats { grid-template-columns: repeat(2, 1fr); } }
.thapi-stat {
    background: #111726;
    border: 1px solid #94a3b81f;
    border-radius: 13px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ts-n { font-size: 1.5rem; font-weight: 700; color: #f8fafc; line-height: 1.2; }
.ts-l { font-size: 12px; color: #8693a8; }
.thapi-hookform { display: flex; gap: 10px; flex-wrap: wrap; }
.thapi-hookform .form-control { flex: 1; min-width: 260px; }
.thapi-hookbtns form { display: inline-flex; gap: 6px; }

/* ── 28. Incident banner ──────────────────────────────────── */

.tdk-incidents { margin: 0 auto 1rem; display: grid; gap: 8px; }
.tdk-inc {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 15px;
    border-radius: 12px;
    text-decoration: none !important;
    font-size: 13.5px;
    border: 1px solid;
}
.tdk-inc-tx { flex: 1; }
.tdk-inc-tx em { font-style: normal; opacity: .85; }
.tdk-inc-state {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .4px;
    opacity: .85;
    white-space: nowrap;
}
.tdk-inc-critical { background: #2d1114; border-color: #f8717159; color: #f8b4b8; }
.tdk-inc-major    { background: #2b1a0d; border-color: #fb923c59; color: #fbc79a; }
.tdk-inc-minor    { background: #2b210d; border-color: #fbbf2440; color: #f0d9a0; }
.tdk-inc-maintenance { background: #16233f; border-color: #2e6bff59; color: #b9cbff; }

/* ── 29. API page rhythm — even spacing, no random gaps ───── */

.thapi > .card,
.thapi .thapi-card { margin-bottom: 1rem; }
.thapi-grid { align-items: start; gap: 1rem; margin-bottom: 0; }
.thapi .card-body > p:first-child { margin-top: 0; }
.thapi .card-body > *:last-child { margin-bottom: 0; }
.thapi .thapi-h { margin: 1.1rem 0 .45rem; font-size: .82rem; text-transform: uppercase;
                  letter-spacing: .5px; color: #8693a8; }
.thapi .thapi-pre { margin-bottom: .6rem; }
.thapi .table { margin-bottom: .8rem; }
.thapi-routes td { padding: 6px 8px; }
.thapi-hero { margin-bottom: 1rem; }
.thapi-stats { margin-bottom: 1rem; }
.thapi .alert { margin-bottom: 1rem; }
.thapi-create .form-group { margin-bottom: .85rem; }
/* Sticky reference column so the left stack never leaves a dead gap */
@media (min-width: 992px) {
    .thapi-docs { position: sticky; top: 84px; }
}
.thapi-main > .card:last-child { margin-bottom: 0; }

/* ── 30. Network status page ──────────────────────────────── */

.thst-headline {
    display: flex; align-items: center; gap: 14px;
    padding: 20px 22px; border-radius: 16px; margin-bottom: 1.2rem;
    background: #111726; border: 1px solid #94a3b81f;
}
.thst-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.thst-ok .thst-dot          { background: #4ade80; box-shadow: 0 0 10px #4ade8080; }
.thst-minor .thst-dot       { background: #fbbf24; box-shadow: 0 0 10px #fbbf2480; }
.thst-major .thst-dot       { background: #fb923c; box-shadow: 0 0 10px #fb923c80; }
.thst-critical .thst-dot    { background: #f87171; box-shadow: 0 0 10px #f8717180; }
.thst-maintenance .thst-dot { background: #5c8aff; box-shadow: 0 0 10px #5c8aff80; }
.thst-hl-tx { flex: 1; }
.thst-hl-tx h2 { margin: 0; font-size: 1.3rem; color: #f8fafc; font-weight: 700; }
.thst-hl-tx p { margin: 3px 0 0; font-size: 13px; color: #8693a8; }
.thst-sec {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .6px;
    color: #8693a8; margin: 1.4rem 0 .7rem;
}
.thst-inc {
    background: #111726; border: 1px solid #94a3b81f; border-left: 3px solid #94a3b84d;
    border-radius: 13px; padding: 15px 17px; margin-bottom: .7rem;
}
.thst-b-critical    { border-left-color: #f87171; }
.thst-b-major       { border-left-color: #fb923c; }
.thst-b-minor       { border-left-color: #fbbf24; }
.thst-b-maintenance { border-left-color: #5c8aff; }
.thst-inc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.thst-inc h4 { margin: 0; font-size: 1.02rem; color: #f8fafc; }
.thst-inc p { margin: 7px 0 0; font-size: 14px; line-height: 1.55; color: #c3ccdd; }
.thst-badge {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    padding: 3px 10px; border-radius: 999px;
}
.thst-bg-critical    { background: #371417; color: #f87171; }
.thst-bg-major       { background: #33210e; color: #fb923c; }
.thst-bg-minor       { background: #33270e; color: #fbbf24; }
.thst-bg-maintenance { background: #16233f; color: #5c8aff; }
.thst-bg-state       { background: #1d2536; color: #aab6c9; }
.thst-bg-yours       { background: #12301c; color: #4ade80; }
.thst-when { font-size: 12px; color: #8693a8; margin-left: auto; }
.thst-timeline { border-left: 2px solid #94a3b826; margin: 12px 0 0 3px; padding-left: 14px; }
.thst-tl-item { font-size: 13px; margin-bottom: 9px; color: #c3ccdd; }
.thst-tl-time { display: block; font-size: 11.5px; color: #8693a8; }
.thst-empty {
    background: #111726; border: 1px solid #94a3b81f; border-radius: 13px;
    padding: 18px; color: #aab6c9; font-size: 14px;
}
.thst-empty i { color: #4ade80; margin-right: 8px; }
.thst-resolved { background: #111726; border: 1px solid #94a3b81f; border-radius: 13px; overflow: hidden; }
.thst-res-row {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; border-bottom: 1px solid #94a3b814; font-size: 13.5px;
}
.thst-res-row:last-child { border-bottom: 0; }
.thst-res-title { color: #c3ccdd; }

/* ── 31. Dropdown stacking: the open menu must sit above every
   sibling (card footers, following cards, sticky bars). Cards
   create their own stacking contexts, so lift the whole card
   while one of its selects is open. */

.card:has(.tdk-sel.open),
.card-body:has(.tdk-sel.open),
fieldset:has(.tdk-sel.open),
.form-group:has(.tdk-sel.open) {
    position: relative;
    z-index: 1300;
    overflow: visible !important;
}
.tdk-sel.open { z-index: 1400; }
.tdk-sel.open .tdk-sel-menu { z-index: 1500; }
.card-footer { position: relative; z-index: 0; }

/* Language & currency entry in the account menu */
.tdk-acct-flag { margin-right: 8px; vertical-align: -1px; border-radius: 2px; }
.tdk-acct-locale { display: block; margin-left: 24px; font-size: 11.5px; color: #8693a8; }

/* ── 32. Announcements: excerpt box was light grey with light text ── */

.announcements .announcement article,
.announcement article,
article {
    background-color: #0e1422 !important;
    border-left: 3px solid #2e6bff !important;
    border-radius: 10px;
    color: #c3ccdd !important;
    padding: 14px 16px !important;
}
.announcement article * { color: inherit !important; background: transparent !important; }
.announcement h1, .announcement h2, .announcement h3, .announcement h1 a {
    color: #5c8aff;
}
.announcement h1 a:hover { color: #8fb0ff; }
.kb-article-item:hover { background-color: #1d2536 !important; }

/* pasted content sometimes carries its own light colours */
.announcement [style*="background"],
.kbarticle [style*="background"] { background: transparent !important; }
.announcement [style*="color:#000"],
.announcement [style*="color: #000"],
.announcement [style*="color:#333"] { color: #c3ccdd !important; }

/* ── 33. Guest navbar dropdowns: solid, readable ─────────────── */

.navbar .dropdown-menu,
.takedark-nav .dropdown-menu,
#header .dropdown-menu {
    background-color: #131a2a !important;
    border: 1px solid #94a3b833 !important;
    border-radius: 12px;
    box-shadow: 0 16px 40px #00000066;
    padding: 6px;
    backdrop-filter: none;
}
.navbar .dropdown-item,
.takedark-nav .dropdown-item,
#header .dropdown-item {
    color: #dbe3f0 !important;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 500;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus,
.takedark-nav .dropdown-item:hover,
#header .dropdown-item:hover {
    background-color: #24304a !important;
    color: #ffffff !important;
}
.navbar .dropdown-header,
#header .dropdown-header {
    color: #8693a8 !important;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.navbar .dropdown-divider,
#header .dropdown-divider { border-color: #94a3b826 !important; }

/* ── 34. Every dropdown menu, guest or logged in ─────────────
   (the "More" menu uses .collapsable-dropdown-menu, the Store
   menu plain .dropdown-menu — cover them all in one place) */

.dropdown-menu,
.collapsable-dropdown-menu,
.dropdown-menu.show {
    background-color: #131a2a !important;
    border: 1px solid #94a3b833 !important;
    border-radius: 12px;
    box-shadow: 0 16px 40px #00000066;
    padding: 6px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.dropdown-item,
.collapsable-dropdown-menu .dropdown-item,
.dropdown-menu a:not(.btn) {
    color: #dbe3f0 !important;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 500;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-menu a:not(.btn):hover {
    background-color: #24304a !important;
    color: #ffffff !important;
}
.dropdown-item.disabled, .dropdown-item:disabled { color: #5c6880 !important; }
.dropdown-header { color: #8693a8 !important; }
.dropdown-divider { border-color: #94a3b826 !important; }

/* ── 35. Additional IPs panel on the product page ─────────── */

.eip-panel {
    background: #111726;
    border: 1px solid #94a3b81f;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 1.2rem;
}
.eip-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eip-ic {
    width: 38px; height: 38px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; background: #16233f; color: #5c8aff; font-size: 15px;
}
.eip-tx { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 200px; }
.eip-tx strong { color: #f8fafc; }
.eip-tx span { color: #8693a8; font-size: 12.5px; }
.eip-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid #94a3b814;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.eip-list li {
    display: inline-flex; align-items: center; gap: 8px;
    background: #0e1422; border: 1px solid #94a3b826;
    border-radius: 999px; padding: 5px 12px; font-size: 13px;
}
.eip-list code { color: #e6ebf5; background: transparent; }
.eip-muted { color: #8693a8; }
.eip-badge {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; padding: 2px 8px; border-radius: 999px;
}
.eip-ok { background: #12301c; color: #4ade80; }
.eip-wait { background: #33270e; color: #fbbf24; }
.eip-primary { background: #16233f; color: #5c8aff; }
.eip-list-tight { margin-top: 8px; padding-top: 8px; }

/* server IP on the service card */
.svc-ip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    font-size: 12.5px;
    color: #8693a8;
}
.svc-ip code {
    color: #c3ccdd;
    background: #0e1422;
    border: 1px solid #94a3b826;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 12.5px;
}
.svc-ip-copy {
    background: transparent;
    border: 0;
    color: #5c6880;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    border-radius: 5px;
}
.svc-ip-copy:hover { color: #5c8aff; background: #1d2536; }
.eip-pay { font-size: 12px; color: #5c8aff; margin-left: 2px; }
.eip-rm-form { display: inline; }
.eip-rm {
    background: transparent; border: 0; color: #7a8699; cursor: pointer;
    padding: 1px 4px; border-radius: 5px; line-height: 1; font-size: 11px;
}
.eip-rm:hover { background: #371417; color: #f87171; }
.eip-note { color: #8693a8; font-size: 12px; margin: 10px 0 0; }
.eip-prim {
    background: transparent; border: 0; color: #7a8699; cursor: pointer;
    padding: 1px 4px; border-radius: 5px; line-height: 1; font-size: 11px;
}
.eip-prim:hover { background: #33270e; color: #fbbf24; }

/* ── 36. Addon pages: full mobile responsiveness ──────────────
   Tables, code blocks and inline forms are the usual culprits for
   horizontal page scroll. Nothing may exceed the viewport; wide
   content scrolls inside its own box instead. */

.thapi, .thddos, .thrdns, .thst {
    max-width: 100%;
    overflow-x: hidden;
}

/* wide tables scroll in their own container, not the page */
.thapi .table, .thddos .table, .thrdns .table,
.thapi-table, .thrdns-table {
    width: 100%;
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}
.thapi-table thead, .thrdns-table thead { white-space: nowrap; }

/* code samples: wrap instead of forcing the page wide */
.thapi-pre {
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}
.thapi-base code, .thapi code, .thddos code, .thrdns code {
    word-break: break-all;
    white-space: normal;
}

@media (max-width: 767.98px) {
    /* single column everywhere */
    .thapi-grid, .thapi-snips, .thapi-stats { grid-template-columns: 1fr !important; }

    /* hero + headers stack cleanly */
    .thapi-hero { flex-direction: column; align-items: flex-start; gap: .9rem; }
    .thapi-hero-actions { width: 100%; }
    .thapi-hero-actions .btn { flex: 1; text-align: center; }
    .thapi-hero h1 { font-size: 1.3rem; }

    /* forms go full width and stack */
    .thddos-form, .thrdns-inline, .thapi-hookform,
    .thapi-create, .thrdns-form { max-width: 100% !important; width: 100%; }
    .thrdns-inline { flex-direction: column; align-items: stretch; }
    .thrdns-inline .btn { width: 100%; }
    .thapi-hookform { flex-direction: column; }
    .thapi-hookform .form-control, .thapi-hookform .btn { width: 100%; min-width: 0; }

    /* action buttons inside tables stop forcing width */
    .thapi-hookbtns form { display: flex; flex-wrap: wrap; gap: 6px; }
    .thapi-hookbtns .btn { flex: 1 1 auto; }

    /* card padding tightened so content gets the width */
    .thapi .card-body, .thddos .card-body, .thrdns .card-body { padding: 14px; }
    .thapi-card { border-radius: 12px; }

    /* status page + notes */
    .thst-headline { flex-wrap: wrap; }
    .thst-hl-btn { width: 100%; margin-top: 8px; }
    .thrdns-note, .thapi-small { font-size: 12px; }

    /* the IP panel on product pages */
    .eip-head { flex-direction: column; align-items: flex-start; }
    .eip-head form { width: 100%; }
    .eip-head form .btn { width: 100%; }
    .eip-list li { max-width: 100%; flex-wrap: wrap; }
}

/* never let any page scroll sideways */
html, body { max-width: 100%; overflow-x: hidden; }

/* long unbroken tokens (API base URL, keys, hostnames) must never widen
   the page on a phone */
.thapi code, .thapi-base code, .thapi-pre,
.thddos code, .thrdns code, .eip-list code, .svc-ip code {
    overflow-wrap: anywhere;
    word-break: break-word;
}
@media (max-width: 767.98px) {
    .thapi-pre { font-size: 11px; line-height: 1.5; }
    .thapi-routes td { white-space: normal; }
    .thapi-table td, .thrdns-table td { white-space: normal; }
}

/* ── 37. Two-factor shortcut in the client menu ───────────── */

.tdk-sb-link .tdk-2fa-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #fbbf24; box-shadow: 0 0 6px #fbbf2480;
    margin-left: auto; flex: none;
}
.tdk-2fa-tag {
    float: right;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .3px; padding: 1px 7px; border-radius: 999px;
}
.tdk-2fa-tag.on  { background: #12301c; color: #4ade80; }
.tdk-2fa-tag.off { background: #33270e; color: #fbbf24; }

/* ── 38. TakeHost AI advisor — mini chat + full page ───────── */

.thai {
    display: flex;
    flex-direction: column;
    background: #111726;
    border: 1px solid #1f2937;
    border-radius: 14px;
    overflow: hidden;
}

/* message stream */
.thai-stream {
    flex: 1;
    min-height: 0;
    padding: 16px 16px 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: #2b364d transparent;
}
.thai-compact .thai-stream { height: 300px; }
.thai-page .thai-stream { height: min(58vh, 560px); }
.thai-stream::-webkit-scrollbar { width: 6px; }
.thai-stream::-webkit-scrollbar-thumb { background: #2b364d; border-radius: 999px; }

/* rows + bubbles */
.thai-row { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.thai-row.thai-me { justify-content: flex-end; }
.thai-avatar {
    width: 28px; height: 28px; flex: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #2e6bff, #22d3ee);
    color: #061020;
    font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 2px;
}
.thai-bubble {
    max-width: 78%;
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.62;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.thai-ai .thai-bubble {
    background: #1a2333;
    color: #dbe3f0;
    border-bottom-left-radius: 5px;
}
.thai-me .thai-bubble {
    background: linear-gradient(135deg, #2e6bff, #1d4ed8);
    color: #fff;
    border-bottom-right-radius: 5px;
}
.thai-bubble strong { color: #fff; font-weight: 600; }
.thai-ai .thai-bubble code {
    background: #0d1421; color: #7dd3fc;
    padding: 1px 5px; border-radius: 5px; font-size: 12.5px;
}
.thai-h { display: block; font-weight: 700; color: #fff; margin: 8px 0 2px; }
.thai-li { display: block; padding-left: 14px; position: relative; }
.thai-li::before {
    content: '•'; position: absolute; left: 2px; color: #22d3ee;
}
.thai-link { color: #7dd3fc; text-decoration: underline; }
.thai-order {
    display: inline-flex; align-items: center; gap: 6px;
    background: #2e6bff; color: #fff !important;
    border-radius: 8px; padding: 5px 11px;
    font-size: 12.5px; font-weight: 600;
    margin: 5px 4px 2px 0; text-decoration: none !important;
}
.thai-order:hover { background: #1d4ed8; }

/* typing dots */
.thai-dots { display: inline-flex; gap: 4px; padding: 2px 0; }
.thai-dots i {
    width: 6px; height: 6px; border-radius: 50%;
    background: #7f8da8; display: block;
    animation: thaiBlink 1.2s infinite ease-in-out;
}
.thai-dots i:nth-child(2) { animation-delay: .18s; }
.thai-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes thaiBlink {
    0%, 60%, 100% { opacity: .28; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-2px); }
}

/* inline notices inside the stream */
.thai-note {
    align-self: center;
    max-width: 92%;
    text-align: center;
    font-size: 12.5px;
    color: #f1d5d7;
    background: #2d1114;
    border: 1px solid #f8717140;
    border-radius: 10px;
    padding: 7px 12px;
}
.thai-note .fa-check-circle { color: #4ade80; }

/* starter chips */
.thai-starters {
    display: flex; flex-wrap: wrap; gap: 7px;
    padding: 2px 16px 10px;
}
.thai-chip {
    background: #16203200;
    border: 1px solid #2b364d;
    color: #9fb0cc;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.thai-chip:hover { border-color: #2e6bff; color: #cfe0ff; }

/* composer */
.thai-composer {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #1f2937;
    background: #0e1422;
}
.thai-input {
    flex: 1;
    background: #111726;
    border: 1px solid #2b364d;
    border-radius: 18px;
    color: #e6edf7;
    font-size: 13.5px;
    line-height: 1.5;
    padding: 9px 14px;
    resize: none;
    max-height: 110px;
    outline: none;
    transition: border-color .15s;
}
.thai-input:focus { border-color: #2e6bff; }
.thai-input::placeholder { color: #6b7a94; }
.thai-input:disabled { opacity: .55; }
.thai-send {
    flex: none;
    width: 38px; height: 38px;
    border: 0; border-radius: 50%;
    background: linear-gradient(135deg, #2e6bff, #1d4ed8);
    color: #fff; font-size: 13px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .15s;
}
.thai-send:hover { opacity: .88; }
.thai-send:disabled { opacity: .35; cursor: not-allowed; }

/* footer strip */
.thai-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 7px 14px 9px;
    background: #0e1422;
    border-top: 1px solid #16203200;
}
.thai-left { font-size: 11.5px; color: #6b7a94; }
.thai-left.low { color: #fbbf24; }
.thai-human {
    background: none;
    border: 1px solid #2b364d;
    color: #9fb0cc;
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
}
.thai-human:hover { border-color: #22d3ee; color: #a5f3fc; }
.thai-human:disabled { opacity: .5; cursor: not-allowed; }

/* dashboard card wrapper */
.dash-ai {
    margin: 0 0 1.2rem;
}
.dash-ai-head {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 10px;
}
.dash-ai-head h3 {
    margin: 0; font-size: 15px; font-weight: 700; color: #e6edf7;
}
.dash-ai-head .dash-ai-sub {
    font-size: 12px; color: #7f8da8; display: block; font-weight: 400; margin-top: 1px;
}
.dash-ai-badge {
    margin-left: auto;
    font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase;
    color: #22d3ee; background: #0d2a33;
    border-radius: 999px; padding: 3px 9px;
}
.dash-ai-full {
    font-size: 12px; color: #7dd3fc; text-decoration: none; white-space: nowrap;
}
.dash-ai-full:hover { text-decoration: underline; }

/* full page */
.thai-page-wrap { max-width: 900px; }
.thai-disclaimer {
    font-size: 11.5px; color: #6b7a94; text-align: center; margin: 10px 0 0;
}

@media (max-width: 767px) {
    .thai-compact .thai-stream { height: 260px; }
    .thai-page .thai-stream { height: 52vh; }
    .thai-bubble { max-width: 88%; font-size: 13px; }
    .thai-foot { flex-wrap: wrap; }
    .thai-starters { padding: 2px 12px 8px; }
}

/* ── 39. AI triage above the ticket form ──────────────────── */

.thai-triage {
    margin: 0 0 1.4rem;
    padding: 16px 16px 12px;
    border-radius: 14px;
    background: #0f1728;
    border: 1px solid #1f2937;
}
.thai-triage .dash-ai-head { margin-bottom: 12px; }
.thai-triage .thai { background: #111726; }
.thai-triage-note {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 12px 0 0;
    font-size: 12.5px; line-height: 1.6;
    color: #9fb0cc;
}
.thai-triage-note .fa-headset { color: #22d3ee; margin-top: 2px; }

/* ── 40. Ticket view: conversation layout ─────────────────── */

.tkt { max-width: 940px; }

/* header */
.tkt-head {
    display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
    padding: 18px 20px;
    background: #111726;
    border: 1px solid #1f2937;
    border-radius: 14px;
    margin-bottom: 1rem;
}
.tkt-head-main { flex: 1; min-width: 220px; }
.tkt-id { font-size: 11.5px; font-weight: 700; letter-spacing: .5px; color: #6b7a94; }
.tkt-subject {
    margin: 2px 0 9px;
    font-size: 19px; font-weight: 700; line-height: 1.35; color: #e6edf7;
    word-break: break-word;
}
.tkt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.tkt-meta-i { font-size: 12px; color: #7f8da8; }
.tkt-meta-i i { color: #4a5a75; margin-right: 3px; }
.tkt-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    padding: 3px 10px; border-radius: 999px;
}
.tkt-pill-open   { background: #0d2a1a; color: #4ade80; }
.tkt-pill-open .fa-circle { font-size: 6px; }
.tkt-pill-closed { background: #1d2536; color: #9fb0cc; }
.tkt-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.tkt-btn {
    display: inline-flex; align-items: center; gap: 7px;
    border-radius: 9px; padding: 8px 15px;
    font-size: 13px; font-weight: 600;
    border: 1px solid transparent; cursor: pointer;
    text-decoration: none !important; white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}
.tkt-btn-primary { background: #2e6bff; color: #fff !important; }
.tkt-btn-primary:hover { background: #1d4ed8; }
.tkt-btn-ghost { background: transparent; border-color: #2b364d; color: #9fb0cc !important; }
.tkt-btn-ghost:hover { border-color: #4a5a75; color: #dbe3f0 !important; }

.tkt-closed-note {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 15px; margin-bottom: 1rem;
    border-radius: 11px;
    background: #1d2536; border: 1px solid #2b364d;
    color: #9fb0cc; font-size: 13px;
}

/* conversation */
.tkt-thread { display: flex; flex-direction: column; gap: 14px; margin-bottom: 1.4rem; }
.tkt-msg { display: flex; gap: 11px; align-items: flex-start; }
.tkt-msg.is-me { flex-direction: row-reverse; }
.tkt-ava {
    width: 34px; height: 34px; flex: none;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.is-staff .tkt-ava { background: linear-gradient(135deg, #2e6bff, #22d3ee); color: #061020; }
.is-me    .tkt-ava { background: #232d42; color: #9fb0cc; }
.tkt-body { flex: 1; min-width: 0; max-width: calc(100% - 45px); }
.is-me .tkt-body { display: flex; flex-direction: column; align-items: flex-end; }

.tkt-by {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-bottom: 5px; font-size: 12px;
}
.tkt-by-name { font-weight: 600; color: #dbe3f0; }
.tkt-by-date { color: #6b7a94; }
.tkt-by-role {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    padding: 2px 8px; border-radius: 999px;
    background: #1d2536; color: #9fb0cc;
}
.tkt-by-role.tkt-role-staff,
.tkt-by-role.tkt-role-admin,
.tkt-by-role.tkt-role-operator { background: #0d2a33; color: #22d3ee; }

.tkt-bubble {
    background: #1a2333;
    border: 1px solid #232d42;
    border-radius: 14px;
    border-top-left-radius: 5px;
    padding: 13px 16px;
    color: #dbe3f0;
    font-size: 13.8px; line-height: 1.68;
    word-wrap: break-word; overflow-wrap: anywhere;
}
.is-me .tkt-bubble {
    background: #16223d;
    border-color: #22345c;
    border-top-left-radius: 14px;
    border-top-right-radius: 5px;
}
.tkt-bubble p:last-child { margin-bottom: 0; }
.tkt-bubble a { color: #7dd3fc; }
.tkt-bubble pre, .tkt-bubble code {
    background: #0d1421; color: #7dd3fc;
    border-radius: 7px;
}
.tkt-bubble pre { padding: 11px 13px; overflow-x: auto; border: 1px solid #1f2937; }
.tkt-bubble code { padding: 1px 5px; font-size: 12.5px; }
.tkt-bubble pre code { padding: 0; background: none; }
.tkt-bubble img { max-width: 100%; height: auto; border-radius: 8px; }
.tkt-bubble table { width: 100%; margin: 8px 0; font-size: 13px; }
.tkt-bubble blockquote {
    border-left: 3px solid #2e6bff; padding-left: 12px; margin: 8px 0; color: #9fb0cc;
}

/* attachments */
.tkt-files { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.tkt-file {
    display: inline-flex; align-items: center; gap: 7px;
    background: #111726; border: 1px solid #2b364d;
    border-radius: 8px; padding: 5px 11px;
    font-size: 12px; color: #9fb0cc !important; text-decoration: none !important;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tkt-file:hover { border-color: #2e6bff; color: #cfe0ff !important; }
.tkt-file.is-gone { opacity: .55; text-decoration: line-through !important; }
.tkt-files-note { font-size: 11.5px; color: #6b7a94; align-self: center; }

.tkt-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    margin-top: 7px; font-size: 11.5px; color: #6b7a94;
}
.tkt-rate em, .tkt-rated em { font-style: normal; margin-right: 6px; }
.tkt-rate .rating, .tkt-rated .rating-done { display: inline-block; vertical-align: middle; }

/* reply box */
.tkt-reply {
    background: #111726;
    border: 1px solid #1f2937;
    border-radius: 14px;
    padding: 16px 18px 18px;
}
.tkt-reply-head {
    font-size: 14px; font-weight: 700; color: #e6edf7;
    margin-bottom: 12px;
}
.tkt-reply-head i { color: #2e6bff; margin-right: 7px; }
.tkt-reply textarea.form-control { min-height: 150px; }
.tkt-attach label { font-size: 12.5px; color: #9fb0cc; font-weight: 600; }
.tkt-attach-note { font-size: 11.5px; color: #6b7a94; margin-top: 5px; }
.tkt-reply-actions { display: flex; gap: 9px; margin-top: 14px; }

@media (max-width: 767px) {
    .tkt-head { padding: 15px 15px; }
    .tkt-subject { font-size: 17px; }
    .tkt-head-actions { width: 100%; }
    .tkt-head-actions .tkt-btn { flex: 1; justify-content: center; }
    .tkt-body { max-width: calc(100% - 45px); }
    .tkt-bubble { font-size: 13.2px; padding: 11px 13px; }
    .tkt-reply { padding: 14px; }
    .tkt-reply-actions .tkt-btn { flex: 1; justify-content: center; }
}

/* ── 41. AI advisor, full page ────────────────────────────── */

.thai-shell {
    display: flex;
    flex-direction: column;
    max-width: 940px;
    margin: 0 auto;
}

/* header */
.thai-shell-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 16px 16px 0 0;
    background:
        radial-gradient(120% 160% at 0% 0%, #1b2b52 0%, transparent 60%),
        linear-gradient(135deg, #131c30, #0f1728);
    border: 1px solid #1f2937;
    border-bottom: 0;
}
.thai-shell-ava {
    width: 44px; height: 44px; flex: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #2e6bff, #22d3ee);
    color: #061020; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px -6px #2e6bffaa;
}
.thai-shell-txt { flex: 1; min-width: 0; }
.thai-shell-txt h1 {
    margin: 0; font-size: 18px; font-weight: 700; color: #e9eff9; line-height: 1.3;
}
.thai-shell-txt p {
    margin: 2px 0 0; font-size: 12.5px; color: #8595b0; line-height: 1.45;
}
.thai-shell-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.thai-shell-live {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: #22d3ee; background: #0d2a33;
    border-radius: 999px; padding: 4px 10px;
}
.thai-shell-live .fa-circle { font-size: 5px; animation: thaiPulse 2.4s infinite; }
@keyframes thaiPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.thai-shell-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: transparent; border: 1px solid #2b364d; color: #9fb0cc;
    border-radius: 9px; padding: 7px 13px;
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.thai-shell-btn:hover { border-color: #2e6bff; color: #cfe0ff; }

/* the chat itself joins onto the header */
.thai-shell .thai-page {
    border-radius: 0 0 16px 16px;
    border-top: 0;
    background: linear-gradient(180deg, #0f1728 0%, #111726 120px);
}
.thai-shell .thai-page .thai-stream { padding: 18px 20px 8px; }
.thai-shell .thai-page .thai-starters { padding: 4px 20px 12px; }
.thai-shell .thai-page .thai-composer { padding: 12px 16px; background: #0d1422; }
.thai-shell .thai-page .thai-foot { padding: 8px 18px 12px; background: #0d1422; }
.thai-shell .thai-page .thai-bubble { font-size: 14px; }
.thai-shell .thai-page .thai-input { font-size: 14px; padding: 11px 16px; }
.thai-shell .thai-page .thai-send { width: 42px; height: 42px; }

.thai-disclaimer {
    font-size: 11.5px; color: #6b7a94; text-align: center; margin: 12px 0 0;
}

@media (max-width: 767px) {
    .thai-shell-head { padding: 13px 14px; gap: 11px; border-radius: 14px 14px 0 0; }
    .thai-shell-ava { width: 38px; height: 38px; border-radius: 12px; font-size: 15px; }
    .thai-shell-txt h1 { font-size: 16px; }
    .thai-shell-txt p { font-size: 11.5px; }
    .thai-shell-btn span { display: none; }
    .thai-shell-btn { padding: 7px 10px; }
    .thai-shell .thai-page { border-radius: 0 0 14px 14px; }
    .thai-shell .thai-page .thai-stream { padding: 14px 14px 6px; }
    .thai-shell .thai-page .thai-starters { padding: 4px 14px 10px; }
}

/* ── 42. AI chat: reliable scrolling + button polish ──────── */

/* the stream lives in its own positioned box so the jump button can float */
.thai-scroll {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.thai-scroll > .thai-stream {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;            /* height comes from the flex parent, never inline */
    -webkit-overflow-scrolling: touch;
}
/* full page: the widget itself is sized to the viewport by JS */
.thai-page { height: 60vh; }
.thai-page > .thai-scroll > .thai-stream { height: auto; }
/* dashboard / ticket page keep a fixed mini height */
.thai-compact > .thai-scroll { height: 300px; flex: none; }
.thai-compact > .thai-scroll > .thai-stream { height: 100%; }

/* jump-to-latest */
.thai-jump {
    position: absolute;
    right: 14px; bottom: 10px;
    width: 34px; height: 34px;
    border: 1px solid #2b364d;
    border-radius: 50%;
    background: #1a2333;
    color: #cfe0ff;
    font-size: 12px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .15s, transform .15s, visibility .15s;
    box-shadow: 0 6px 16px -6px #000a;
    z-index: 3;
}
.thai-jump.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.thai-jump:hover { border-color: #2e6bff; background: #16223d; }

/* every button in the chat inherits the page font and sizes predictably */
.thai button,
.thai-shell button {
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.35;
}
.thai-chip, .thai-human, .thai-send, .thai-jump, .thai-shell-btn { flex: none; }
.thai-chip:focus-visible,
.thai-human:focus-visible,
.thai-send:focus-visible,
.thai-shell-btn:focus-visible,
.thai-jump:focus-visible { outline: 2px solid #2e6bff; outline-offset: 2px; }
.thai-foot { border-top: 1px solid #16203a; }
.thai-human i { margin-right: 1px; }

@media (max-width: 767px) {
    .thai-compact > .thai-scroll { height: 260px; }
    .thai-jump { right: 10px; bottom: 8px; }
}

/* ── 43. Advisor page: edge-to-edge, full-height app layout ── */

body.thai-immersive #main-body { padding: 0; }
body.thai-immersive #main-body > .container {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
body.thai-immersive .primary-content { padding: 0; }
body.thai-immersive .master-breadcrumb { display: none; }
body.thai-immersive #footer { display: none; }

body.thai-immersive .thai-shell {
    max-width: none;
    margin: 0;
}
body.thai-immersive .thai-shell-head {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
}
body.thai-immersive .thai-page {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}
body.thai-immersive .thai-disclaimer {
    margin: 0;
    padding: 8px 16px 10px;
    background: #0d1422;
    border-top: 1px solid #16203a;
}

/* the conversation itself stays readable on ultrawide screens */
body.thai-immersive .thai-stream > .thai-row,
body.thai-immersive .thai-note {
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
body.thai-immersive .thai-composer,
body.thai-immersive .thai-foot,
body.thai-immersive .thai-starters {
    max-width: 932px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
body.thai-immersive .thai-shell-head > * { max-width: none; }
body.thai-immersive .thai-jump { right: max(14px, calc((100% - 900px) / 2)); }

@media (max-width: 767px) {
    body.thai-immersive .thai-disclaimer { padding: 7px 12px 9px; font-size: 11px; }
}