/* YouStable client-area sidebar customization */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
    --primary-block-bg: rgb(23, 21, 40);
    --secondary-block-bg: rgb(23, 21, 40);
    --app-nav-left-bg: rgb(23, 21, 40);
    --box-shadow: 0 0 32.4px rgba(19, 66, 137, .07);
}

.btn-primary {
    background: var(--brand-primary, #7b5cff)
}

.alert {
    margin-bottom: 0px;
}

body {
    background: #F4F4F8;
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
}

.list-group,
.bottom-action-sticky,
.panel,
.table-container {
    border-radius: 14px;
    box-shadow: var(--box-shadow);
}

.main-body {
    margin-bottom: 30px;
}

.sidebar-sticky .panel-heading,
.panel-heading,
.page-clientareaproductdetails .billing-overview-card .billing-overview-body {
    padding: 0px 24px;
}

.sidebar-sticky .panel-heading {
    border-bottom: 1px solid rgb(245, 244, 250) !important;
}

.section-hook-output .section-title,
.section-hook-output>h3,
.section .section-title,
.section>h3 {
    font-weight: 500;
}

.panel-summary .panel-heading+#producttotal .panel-body,
.panel-summary .panel-heading+#producttotal .panel-body .order-summary-list:first-child,
.panel-summary .panel-heading+.panel-body,
.panel-summary .panel-heading+.panel-body .order-summary-list:first-child {
    padding-top: 12px;
}

.banner-title,
.main-header-title {
    font-size: 36px !important;
}

th {
    font-size: 13px !important;
    color: #000 !important;
    font-weight: 600 !important;
}

.form-control,
.btn {
    border-radius: 10px !important;
}

.main-header-title+p {
    margin: 0px;
}

.alert-content p {
    font-size: 15px;
    font-weight: 700 !important;
}

.alert-content .desc {
    font-size: 14px;
    color: #000;
}

.label {
    border-radius: 8px !important;
    font-size: 12px !important;
    padding: 4px 11px !important;
}

.domain-renewal-content,
.service-renewal-content {
    align-items: center !important;
}

.domain-renewal-title,
.service-renewal-title {
    font-size: 20px;
    font-weight: 800;
}

.domain-renewal-expiry-label {
    color: #1f2129;
    font-weight: 700;
}

.domain-renewal-expiry-date {
    font-weight: 400;
}

.dropdown-menu.dropdown-lazy.has-scroll.dropdown-menu-right.show {
    background: #fff !important;
}

.search-group-lg .search-group-btn .btn {
    height: 45px;
}

.search-group-combined {
    border-radius: 14px;
}


.search-group-lg .search-field .form-control {
    height: auto;
}

.search-group-lg .search-field-icon {
    top: 10px;
}

/* Custom dropdown, replacing native <select>s whose own open option list
   can't be restyled cross-browser (rounded rows, a checkmark on the active
   row, etc.) — built in whmcs-custom.js and reused on both the Domain
   Renewals period picker (.select-renewal-pricing) and the Configure
   Product page's configurable-option dropdowns (Control Panel, Auto
   Installer, Premium Support, Operating System, etc., inside
   #productConfigurableOptions). Themed to this site's own palette (white
   card + brand purple), matching the existing Account dropdown's "clean
   white rounded card" treatment above, rather than a reference image's
   dark/orange colors. */
.custom-select-native {
    display: none;
}

.custom-select {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    color: #1f2129;
    text-align: left;
    cursor: pointer;
}

.custom-select.open .custom-select-trigger {
    border-color: var(--brand-primary, #7b5cff);
    box-shadow: 0 0 0 3px rgba(108, 85, 240, .12);
}

.custom-select-trigger i.ls-caret {
    color: #9ca3af;
    transition: transform .15s ease;
}

.custom-select.open .custom-select-trigger i.ls-caret {
    transform: rotate(180deg);
}

.custom-select-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--box-shadow);
    padding: 6px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid rgb(230, 228, 240);
}

.custom-select.open .custom-select-menu {
    display: block;
}

.custom-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    color: #1f2129;
    cursor: pointer;
}

.custom-select-option:hover {
    background: #f3f4f6;
}

.custom-select-option.is-selected {
    background: var(--brand-primary, #7b5cff);
    color: #fff;
}

.custom-select-option.is-selected i.ls-check {
    color: #fff;
}

.lagom-layout-left-wide .main-sidebar+.main-content,
body:not(.lagom-layout-left-wide) .main-sidebar+.main-content,
.main-content {
    max-width: 100%;
}

/* Make the top-right header bar (cart/notifications/account) sticky so it
   stays visible on scroll. */
.main-top {
    background: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(230, 228, 240);
    height: 64px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: 0px;
    z-index: 10;
    box-shadow: var(--box-shadow);
}

/* Stock theme already hides .main-top below 992px on pages with a
   .lagom-layout-left/-left-wide body class (it's replaced there by the
   mobile drawer's own top bar, .app-nav-header) — but that stock rule has
   no !important and our own rule above has no layout-class qualifier, so
   on any page missing those body classes (e.g. one-page/checkout flows)
   nothing was hiding this bar on mobile, and its forced sticky/height/flex
   could collide with .app-nav-header's own fixed mobile bar. Force it off
   on mobile unconditionally so that can't happen regardless of page. */
@media (max-width: 991.98px) {
    .main-top {
        display: none !important;
    }
}

/* Make the mobile menu actually behave/look like an off-canvas drawer.
   This site's active mobile mode is "nav-mobile-dropdown" (confirmed via
   theme.css: ".menu-open.nav-mobile-dropdown .app-nav-menu" is the rule
   that fires) — stock behavior for that mode is a rounded, inset "card"
   that fades in below the header (margin on both sides, border-radius,
   opacity/visibility only) rather than a full-height panel sliding in
   from the edge. Strip the card look and add an edge-to-edge slide. */
@media (max-width: 991.98px) {
    .nav-mobile-dropdown .app-nav-menu {
        left: 0 !important;
        margin: 0 !important;
        width: var(--mob-app-nav-width, 270px) !important;
        max-width: 85vw !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease !important;
        top: 74px !important;
        background: var(--secondary-block-bg) !important;
    }

    .menu-open.nav-mobile-dropdown .app-nav-menu {
        transform: translateX(0) !important;
    }

    /* The soft glow/pill seen right under the mobile header was its own
       box-shadow (meant to lift the old rounded "card" off the page) —
       with the card look already removed above, this shadow just reads
       as a stray highlight band at the header/menu seam. */
    .app-nav-header {
        box-shadow: none !important;
    }

    /* Drawer background is now dark (above) — the menu-eyebrow's default
       light-on-dark color (further down in this file) already fits, so
       no per-mobile override is needed here. Link/caret text, which
       otherwise default to the site's dark heading color, need their own
       light-on-dark override to stay legible against the dark drawer. */
    .app-nav-menu .menu>li>a:not(.btn) {
        color: hsla(0, 0%, 100%, .85) !important;
    }

    .app-nav-menu .menu>li>a:not(.btn) .ls-caret {
        color: hsla(0, 0%, 100%, .45) !important;
    }

    .lagom-layout-left-wide .app-nav-secondary .menu>li.dropdown-extended ul.dropdown-menu>li>a .menu-item-content .menu-item-title,
    .app-nav-menu .dropdown-menu>li>a {
        color: #fff !important;
    }

    /* Submenu rows (My Domains, Domain Renewals...) each paint their own
       background via --mob-dropdown-nav-list-bg — a light gray meant for
       the old white drawer. Clear it so they sit flush/transparent on the
       new dark drawer instead of showing as washed-out light boxes. */
    .nav-mobile-dropdown .app-nav-menu .menu>li .dropdown-menu li,
    .nav-mobile-dropdown .app-nav-menu .menu>li .dropdown-menu .dropdown-menu-parent .nav-header,
    .nav-mobile-dropdown .app-nav-menu .menu>li .dropdown-menu-arrow {
        background: transparent !important;
    }

    /* Divider line between submenu rows (e.g. My Domains / Domain Renewals)
       was a light gray hairline meant for the old white drawer — remove it
       entirely rather than recolor it. */
    .nav-mobile-dropdown .app-nav-menu .menu>li .dropdown-menu li.nav-divider {
        display: none !important;
    }

    .nav-mobile-dropdown .app-nav-menu .menu>li>a:not(.btn)>.item-text,
    .nav-mobile-dropdown .app-nav-menu .menu>li:not(.dropdown).active>a:not(.btn) .item-text {
        color: #fff !important;
    }


    .nav-mobile-dropdown .app-nav-menu .menu>li>a:not(.btn)>img {
        max-width: 20px !important;
    }

    /* Each submenu (Domains, Billing, Support...) repeats its own group
       name again as a heading inside the expanded dropdown-list
       (.dropdown-header) — redundant with the parent link's own label
       right above it. Hide it on mobile only. */
    .app-nav-menu .dropdown-header {
        display: none !important;
    }


}

.menu-primary-mobile-dropdown .dropdown-menu {
    background: transparent !important;
}

/* The "Upgrade to VPS hosting" promo card at the bottom of the desktop
   sidebar was also showing inside the mobile menu (it lives in the same
   .app-nav container as the menu, just after it) — hide it on mobile. */
@media (max-width: 991.98px) {
    .sidebar-upgrade-card {
        display: none !important;
    }
}

/* The stock "Order Summary" sticky sidebar (.sidebar-sticky, e.g. on
   Configure Product / checkout pages) doesn't know about the .main-top
   bar above being made sticky (that's this site's own customization, not
   stock behavior for this left-nav layout) — its own sticky "top" offset
   only accounts for the theme's normal small gap
   (--main-sidebar-sticky-top), not .main-top's 64px height. Once it
   sticks, its top edge (the "Order Summary" panel-heading) lands exactly
   under .main-top and gets visually covered by it (.main-top has a
   higher z-index and an opaque background). Add .main-top's height to
   the sticky offset so it sticks just below the header instead of behind
   it, and shrink the matching max-height calc by the same amount so the
   panel doesn't overflow off the bottom of the viewport. */
.sidebar-sticky {
    top: calc(var(--main-sidebar-sticky-top) + 64px) !important;
}

.sidebar-sticky-summary {
    max-height: calc(100vh - 2 * var(--main-sidebar-sticky-top) - 64px) !important;
}

/* Active nav item: rounded highlighted pill + bold label.
   The stock theme only paints the active background via
   "li.active:not(.open) > a" — but items with a submenu (Hosting, Domains,
   Billing, Support) get BOTH .active and .open at the same time when
   they're the current section, so that rule never fired for them. Force
   the background here (with !important) so it applies regardless of
   whether the item also has children/.open. */
.app-nav-menu .menu>li.active>a:not(.btn),
#main-menu .menu>li.active>a:not(.btn) {
    background: rgba(108, 85, 240, 0.28) !important;
    margin: 0px 14px !important;
    border-radius: 10px !important;
    font-weight: 600;
    padding: 12px 24px 12px 13px;
}

/* The submenu-arrow on the CURRENTLY ACTIVE section's own row (e.g.
   Support/Domain, when you're on one of their sub-pages — the one item
   that's both .active and .open at once, per the note above) goes
   missing on desktop. A first attempt just forced its color to white
   (in case it was a low-contrast purple-on-purple issue against the
   active pill background) — that alone didn't fix it, so this covers
   every other way an icon can effectively disappear (display, size,
   the icon font's own ::before content) with maximum specificity,
   using the real tag (<b class="ls ls-caret">, see includes/navbar.tpl)
   instead of just the class. */
@media (min-width: 992px) {

    .app-nav-menu .menu>li.active>a>b.ls-caret,
    .app-nav-menu .menu>li.open>a>b.ls-caret,
    #main-menu .menu>li.active>a>b.ls-caret,
    #main-menu .menu>li.open>a>b.ls-caret {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #fff !important;
        font-size: 14px !important;
        width: auto !important;
        height: auto !important;
        line-height: normal !important;
        overflow: visible !important;
    }

    .app-nav-menu .menu>li.active>a>b.ls-caret::before,
    .app-nav-menu .menu>li.open>a>b.ls-caret::before,
    #main-menu .menu>li.active>a>b.ls-caret::before,
    #main-menu .menu>li.open>a>b.ls-caret::before {
        content: "\e902" !important;
        color: #fff !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Submenu row icons (My Domains, Domain Renewals...) are lazyloaded
   <img class="lazyload hidden" data-src="...">, normally unhidden by the
   stock theme's show.bs.dropdown/mouseenter handlers once you actually
   open/hover the dropdown — whmcs-custom.js now does the same (sets src
   from data-src, strips "hidden") for the section we auto-open on page
   load, but that's a JS step that has to actually run first. Belt-and-
   suspenders: force the stock ".hidden{display:none!important}" rule to
   not apply to these icons at all inside an active/open submenu, so
   they're never blocked purely by CSS regardless of JS timing. */
@media (min-width: 992px) {

    .app-nav-menu .menu>li.open>.dropdown-menu img.lazyload.hidden,
    .app-nav-menu .menu>li.active>.dropdown-menu img.lazyload.hidden,
    #main-menu .menu>li.open>.dropdown-menu img.lazyload.hidden,
    #main-menu .menu>li.active>.dropdown-menu img.lazyload.hidden {
        display: inline-block !important;
    }
}

/* Expand the active group's submenu inline, even when the "Left" (non-wide)
   layout is selected, so it matches the "Left Wide" inline behaviour.
   Desktop-only (min-width: 992px): below that, the sidebar becomes the
   stock off-canvas mobile drawer (see the mobile-breakage fix note further
   down) and forcing every submenu open there fights its own accordion/
   layout instead of just matching a desktop inline variant. */
@media (min-width: 992px) {

    .lagom-layout-left .app-nav-menu .menu>li.open>.dropdown-menu,
    .lagom-layout-left .app-nav-menu .menu>li.active>.dropdown-menu {
        position: static;
        display: block;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }
}

/* Kill every hover/active/open transition, transform and animation on the
   sidebar menu ITEMS (icon "jump up" on hover, etc.) — blanket + !important
   so it wins regardless of which stock rule/selector is driving it.
   Deliberately does NOT include the `.app-nav-menu` container itself (see
   the mobile-breakage fix note further down for why that was a bug) —
   only descendants, so the mobile hamburger toggle animation in the
   header is left alone either way. */
.app-nav-menu *,
.app-nav-menu *::before,
.app-nav-menu *::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

/* The actual "hover animation": the stock theme force-sets padding-left to a
   fixed 26px on hover (in a min-width:992px media query), which doesn't match
   the item's resting padding, so the row visibly slides right on hover. Reset
   it back to the same padding used at rest so nothing shifts. */
@media (min-width: 992px) {

    .lagom-layout-left-wide .app-nav-menu .menu>li:not(.open)>a:not(.btn):hover,
    .lagom-layout-left .app-nav-menu .menu>li:not(.open)>a:not(.btn):hover {
        padding-left: var(--app-nav-left-wide-link-padding-h) !important;
    }
}

/* "CLIENT AREA" eyebrow label above the primary menu */
.app-nav-menu .menu-eyebrow {
    display: block;
    padding: 0 20px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: hsla(0, 0%, 100%, .45);
}

/* Small circular notification badge on primary nav items (e.g. Support) */
.app-nav-menu .menu>li>a .badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--brand-primary, #7b5cff);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    margin-left: auto;
}

/* Bottom "Upgrade" promo card inside the sidebar */
.app-nav .sidebar-upgrade-card {
    margin: 12px 16px;
    padding: 12px;
    border-radius: 10px;
    background: hsla(0, 0%, 100%, .06);
    color: #fff;
}

.app-nav .sidebar-upgrade-card .sidebar-upgrade-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
}

.app-nav .sidebar-upgrade-card .sidebar-upgrade-desc {
    font-size: 11px;
    line-height: 1.4;
    opacity: .7;
    margin-bottom: 10px;
}

.app-nav .sidebar-upgrade-card .btn-upgrade {
    display: block;
    width: 100%;
    text-align: center;
    padding: 6px 10px;
    border-radius: 7px;
    background: var(--brand-primary, #7b5cff);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border: 0;
}

/* Copyright line pinned at the bottom of the sidebar */
.app-nav .sidebar-copyright {
    padding: 12px 20px 20px;
    font-size: 11px;
    color: hsla(0, 0%, 100%, .35);
    text-align: center;
    display: none;
}

/* Top-right bar: icon-only Cart/Notifications (no "View Cart"/"Notifications"
   text label), a divider before the account item, and an initials avatar +
   name/email stack instead of the plain icon + name. */
.top-nav li[menuitemname="View Cart"] .item-text,
.top-nav li[menuitemname="Notifications"] .item-text,
.top-nav li[menuitemname="Notifications"] .item-text-badge {
    display: none;
}

.top-nav li[menuitemname="Account"] {
    margin-left: 8px;
    padding-left: 14px;
    border-left: 1px solid rgba(0, 0, 0, .12);
}

/* Currency selector pill (e.g. "INR") in the top navbar - was using the
   theme's default blue, recolored to brand purple. */
.currency-badge {
    background: rgba(108, 85, 240, .12);
    color: var(--brand-primary, #6c55f0);
    border-radius: 999px;
    padding: 3px 10px;
    font-weight: 600;
}

/* Notifications dropdown (.client-alerts) - was completely unstyled stock
   theme output (plain icon + text row, no spacing/hover). Give each alert
   an icon-circle badge like the rest of the site's alert cards; the badge
   background uses currentColor so it auto-tints per severity, since the
   icon's own color already comes from the theme's existing
   .text-primary/.text-info/.text-danger/etc classes. */
.client-alerts {
    padding: 6px;
}

.client-alerts>li>a:not(.btn) {
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    color: #1f2129;
}

.client-alerts>li>a:not(.btn):hover {
    background: #f9fafb;
}

.client-alerts>li>a:not(.btn)>i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 15%, white);
    font-size: 15px;
    flex: none;
    padding-top: 0;
}

.client-alerts>li:not(:last-of-type):after {
    display: none;
}

/* Product Details page - SSL status icon (clientareaproductdetails.tpl)
   used class="m-r-8" expecting an 8px right-margin utility class that was
   never actually defined anywhere in the stylesheet, so the icon sat
   flush against "No SSL Detected"/etc with no gap at all. */
.m-r-8 {
    margin-right: 8px;
}

.client-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.top-nav .active-client {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.top-nav .active-client .item-text {
    font-weight: 600;
    font-size: 13px;
    color: #1f2129 !important;
}

.top-nav .active-client .active-client-email {
    font-size: 11px;
    font-weight: 400;
    color: #9ca3af !important;
}

/* The trigger link defaults to the theme's link color (purple) — force the
   name + chevron back to a neutral dark/gray so only real links look
   "linky". */
.top-nav li[menuitemname="Account"]>a.dropdown-toggle,
.top-nav li[menuitemname="Account"]>a.dropdown-toggle .ls-caret {
    color: #6b7280 !important;
}

/* Account dropdown menu — clean white rounded card, icon + label rows */
.top-nav li[menuitemname="Account"]>.dropdown-menu {
    border: none !important;
    border-radius: 14px !important;
    box-shadow: var(--box-shadow) !important;
    padding: 8px !important;
    min-width: 220px;
}

/* Redundant with the name/email already shown on the trigger — remove it
   instead of just shrinking it. */
.top-nav li[menuitemname="Account"]>.dropdown-menu>li.dropdown-header--account {
    display: none !important;
}

/* The divider that used to sit right under that header is now a stray line
   with a big empty gap above it — remove that one specifically (leave the
   other group dividers further down alone). */
.top-nav li[menuitemname="Account"]>.dropdown-menu>li.dropdown-header--account+li.nav-divider {
    display: none !important;
}

/* Consistent, tighter spacing for the remaining group dividers */
.top-nav li[menuitemname="Account"]>.dropdown-menu>li.nav-divider {
    height: 0;
    margin: 6px 8px !important;
    padding: 0 !important;
    border-top: 1px solid #eee !important;
}

/* Zero out the theme's default <li> spacing so every row's gap comes only
   from the <a> padding below — this is what was making the gap after
   "Account Details" look bigger/uneven compared to the rest. */
.top-nav li[menuitemname="Account"]>.dropdown-menu>li {
    margin: 0 !important;
}

.top-nav li[menuitemname="Account"]>.dropdown-menu>li>a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 8px 12px !important;
    border-radius: 10px;
    font-size: 14px;
    color: #1f2129;
}

.top-nav li[menuitemname="Account"]>.dropdown-menu>li>a>i {
    font-size: 16px;
    width: 18px;
    text-align: center;
    color: #6b7280;
}

.top-nav li[menuitemname="Account"]>.dropdown-menu>li>a:hover,
.top-nav li[menuitemname="Account"]>.dropdown-menu>li>a:focus {
    background: #f3f4f6;
    color: #1f2129;
}

.top-nav li[menuitemname="Account"]>.dropdown-menu>li:not(:last-child):not(.dropdown-header--account) {
    margin-bottom: 2px;
}


/* ===== Dashboard (clientareahome.tpl) — restyle only, real data untouched ===== */

/* The 4 stat tiles (Services / Domains / Unpaid Invoices / Tickets) */
.tiles .tile {
    display: block;
    position: relative;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--box-shadow);
    background: #fff;
    min-height: auto;
}

.tiles .tile-icon-absolute {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(108, 85, 240, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.tiles .tile-icon-absolute i.icon-default,
.tiles .tile-icon-absolute>i {
    color: #6c55f0;
}

.tiles .tile-icon-absolute i.icon-alert {
    color: #ef4444 !important;
}

.tiles .tile-stat {
    font-size: 30px;
    font-weight: 700;
    color: #1f2129;
    margin-top: 6px;
    text-align: left;
}

.tiles .tile-stat.text-danger {
    color: #ef4444 !important;
}

.tiles .tile-title {
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
    margin-top: 2px;
}

.alert.alert-domain-renewals .alert-content p {
    margin-bottom: 0px;
}

/* Home alerts (Overdue/Unpaid Invoices, Domains Expiring Soon) redesigned
   as flat white cards with a colored left accent, icon circle, title +
   description stack, and a solid pill action button - instead of the
   theme's default tinted "alert-warning" box. */
.client-home-alerts.alert-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.client-home-alerts {
    box-shadow: none;
}

.client-home-alert.alert.alert-lagom {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-left: 4px solid var(--alert-accent, #f59e0b);
    border-radius: 12px;
    box-shadow: var(--box-shadow);
    padding: 14px 16px;
    margin-bottom: 0;
}

.client-home-alert.client-home-alert-invoice {
    --alert-accent: #f59e0b;
}

.client-home-alert.client-home-alert-domain {
    --alert-accent: #6c55f0;
}

/* Configure Product page's "correct the following errors" validation
   alert (configureproduct.tpl) - same card shell, red accent since these
   are hard errors blocking checkout. */
.client-home-alert.client-home-alert-product-errors {
    --alert-accent: var(--brand-danger, #dc2626);
    margin-bottom: 32px;
}

/* Checkout page's "secure environment / IP address logged" notice
   (viewcart.tpl) - same card shell, amber accent since it's informational
   rather than an error. */
.client-home-alert.client-home-alert-security-notice {
    --alert-accent: var(--brand-warning, #f59e0b);
}

/* Order confirmation page (complete.tpl) - "Order Placed #X" success
   card, green accent since it's a success state. */
.client-home-alert.client-home-alert-order-complete {
    --alert-accent: var(--brand-success, #16a34a);
}

.client-home-alert.client-home-alert-order-complete .btn-alert-order-complete {
    background: var(--brand-success, #16a34a);
}

.client-home-alert.client-home-alert-order-complete .btn-alert-order-complete:hover {
    background: color-mix(in srgb, var(--brand-success, #16a34a) 85%, black);
    color: #fff;
}

/* Overdue variant (as opposed to merely unpaid) - red accent + red button,
   reusing the same card shell as the dashboard alert cards. */
.client-home-alert.client-home-alert-invoice-overdue {
    --alert-accent: var(--brand-danger, #dc2626);
}

.client-home-alert.client-home-alert-invoice-overdue .btn-alert-invoice {
    background: var(--brand-danger, #dc2626);
}

.client-home-alert.client-home-alert-invoice-overdue .btn-alert-invoice:hover {
    background: color-mix(in srgb, var(--brand-danger, #dc2626) 85%, black);
    color: #fff;
}

.client-home-alert .alert-icon-circle {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    background: color-mix(in srgb, var(--alert-accent) 15%, white);
    color: var(--alert-accent);
}

.client-home-alert .alert-body {
    flex: 1 1 auto;
    min-width: 0;
}

.client-home-alert .alert-title {
    font-weight: 700;
    font-size: 14px;
    color: #1f2129;
}

.client-home-alert .alert-desc {
    font-size: 13px;
    color: #6b7280;
    margin-top: 2px;
}

.client-home-alert .alert-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.client-home-alert .btn-alert-action {
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    padding: 8px 16px;
    color: #fff;
}

.client-home-alert .btn-alert-invoice {
    background: var(--brand-warning, #f59e0b);
}

.client-home-alert .btn-alert-invoice:hover {
    background: color-mix(in srgb, var(--brand-warning, #f59e0b) 85%, black);
    color: #fff;
}

.client-home-alert .btn-alert-domain {
    background: var(--brand-primary, #6c55f0);
}

.client-home-alert .btn-alert-domain:hover {
    background: color-mix(in srgb, var(--brand-primary, #6c55f0) 85%, black);
    color: #fff;
}

.client-home-alert .btn-close-alert {
    background: transparent;
    color: #9ca3af;
}

/* Domain Renewals page - "Renew Your Domains" banner, restyled to match the
   dashboard alert cards with a solid action button and the same rounded
   corners used across the rest of the redesigned cards (domain rows below
   it, dashboard tiles, department cards) instead of the theme's default
   --border-radius-sm (4px). */
.alert.alert-domain-renewals {
    border-radius: 16px;
    overflow: hidden;
}

/* Small icon circle, same treatment as the dashboard alert cards
   (.client-home-alert .alert-icon-circle) instead of the old 64px svg. */
.alert.alert-domain-renewals .alert-icon-circle {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    background: color-mix(in srgb, var(--brand-primary) 15%, white);
    color: var(--brand-primary);
}

.alert.alert-domain-renewals .alert-action .btn-primary-faded {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}

.alert.alert-domain-renewals .alert-action .btn-primary-faded:hover {
    background: color-mix(in srgb, var(--brand-primary) 85%, black);
    color: #fff;
}

/* Order Summary sidebar's "domains enter the Grace Period..." disclaimer
   (domain-renewals.tpl) - now uses the same .client-home-alert card shell
   (icon circle + accent border) as the dashboard/checkout alerts, instead
   of its own one-off tinted box. */
.client-home-alert.client-home-alert-grace-period {
    --alert-accent: var(--brand-primary, #6c55f0);
    align-items: flex-start;
}

/* Dashboard panel order: Active Products/Services before Recent Support
   Tickets. Done here with flex order (visual only) rather than the
   backend hook's Item::setOrder() - WHMCS's Menu\Item class is
   ionCube-encoded so its ordering behavior can't actually be inspected,
   and changing it there made the Active Services panel disappear
   entirely instead of just reordering. .client-home-panels is a
   Bootstrap .row (flex), so this is safe and purely presentational. */
.client-home-panels [data-panels-grid-item]:has(.panel-active-services) {
    order: -1;
}

/* Recent Support Tickets panel */
.panel-support-tickets>.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-sticky .panel-heading .panel-title,
.panel-support-tickets>.panel-heading>.panel-title {
    font-size: 18px;
    font-weight: 600;
}

/* "View all" link (set via the panel's btn-link/btn-text extras in
   hooks.php) — restyle the stock button markup as a plain text link */
.panel-support-tickets>.panel-heading .pull-right {
    float: none !important;
}

.panel-support-tickets>.panel-heading .pull-right .btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #6c55f0;
    font-size: 13px;
    font-weight: 600;
}

.panel-support-tickets>.panel-heading .pull-right .btn:hover {
    text-decoration: underline;
}

.panel-support-tickets .list-group.has-scroll {
    padding: 4px;
}

.panel-support-tickets .list-group-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid rgb(245, 244, 250);
}

.panel-support-tickets .list-group-item:hover {
    background: #f9fafb;
}

/* Status dot, ticket subject/meta block — built by JS in whmcs-custom.js
   from the same data WHMCS already renders (ticket number, subject,
   status, last-updated), just restructured into this layout. */
.panel-support-tickets .ticket-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #6c55f0;
}

.panel-support-tickets .ticket-dot.ticket-dot-closed {
    background: #d1d5db;
}

.panel-support-tickets .ticket-info {
    flex: 1 1 auto;
    min-width: 0;
}

.panel-support-tickets .ticket-subject {
    font-weight: 600;
    font-size: 14px;
    color: #1f2129;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-support-tickets .ticket-meta {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}

.panel-support-tickets .status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: rgb(139, 135, 166);
    background: rgb(240, 238, 248);
    flex-shrink: 0;
}

/* Dashboard greeting header ("Good morning, Alekh" + Open ticket/New service) */
.dashboard-greeting-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.dashboard-greeting-header .wave-emoji {
    display: inline-block;
}

.dashboard-greeting-desc {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 14px;
}

.dashboard-greeting-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}


/* Active Products/Services panel — same clean list-row treatment as the
   ticket list, using the panel's existing stock data (no new queries). */
.panel-active-services>.panel-heading>.panel-title {
    font-size: 16px;
    font-weight: 600;
}

/* Removes a small icon-only button that persists in the top-right corner
   of this panel's heading regardless of the theme's own btn-link/btn-text
   extras being blanked out in hooks.php - hidden directly via CSS since
   its exact PHP source wasn't worth chasing further. */
.panel-active-services>.panel-heading .pull-right {
    display: none !important;
}

.panel-active-services .list-group.has-scroll {
    padding: 4px;
}

.panel-active-services .list-group-item {
    padding: 10px 20px !important;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.panel-active-services .list-group-item:hover {
    background: #f9fafb;
}

.panel-active-services .status-modern .status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--status-color, #9ca3af);
}

.panel-active-services .status-expiry {
    font-size: 12px;
    font-weight: 600;
    margin-left: auto;
}

/* Dashboard "Active Products/Services" rows built from real structured
   data (domain/price/due-date/status - see the ClientAreaHomepage hook,
   section 7c in hooks.php) instead of WHMCS's opaque pre-built label
   HTML, so the icon/domain/price/button below can each be styled
   independently. */
.dashboard-service-row {
    text-decoration: none;
}

.dashboard-service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 15px;
    flex: none;
}

.dashboard-service-icon-hosting {
    background: rgba(108, 85, 240, .1);
    color: #6c55f0;
}

.dashboard-service-icon-wordpress {
    background: rgba(34, 113, 177, .1);
    color: #2271b1;
}

.dashboard-service-icon-vps {
    background: rgba(245, 158, 11, .12);
    color: #b45309;
}

.dashboard-service-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dashboard-service-name {
    font-size: 14px;
    font-weight: 600;
    color: #1f2129;
}

.dashboard-service-domain {
    font-size: 12px;
    color: #9ca3af;
}

.dashboard-service-right {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    flex: none;
}

.dashboard-service-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.dashboard-service-renews {
    font-size: 12px;
    color: #6b7280;
}

.dashboard-service-price {
    font-size: 11px;
    color: #9ca3af;
}

.dashboard-service-expiry {
    font-size: 12px;
    font-weight: 600;
    color: #dc2626;
}

.dashboard-services-list .status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    flex: none;
}

.dashboard-services-list .status-active {
    background: #dcfce7;
    color: #16a34a;
}

.dashboard-services-list .status-suspended {
    background: #fee2e2;
    color: #dc2626;
}

.dashboard-services-list .status-pending {
    background: #fef3c7;
    color: #b45309;
}

.dashboard-services-list .status-renewaldue {
    background: #fef3c7;
    color: #b45309;
}

.dashboard-service-btn {
    flex: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    padding: 6px 14px;
}

/* "My Products & Services" page — card grid (clientareaproducts.tpl),
   replacing the stock sortable DataTable. Uses the exact same per-service
   data (product, group, domain, pricing, next due date, status) the
   table used to render, just restructured. See CUSTOMIZATIONS.md for the
   DataTables trade-off this involved. */
.services-toolbar {
    margin-bottom: 16px;
}

.services-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.services-filter-pills .filter-pill {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.services-filter-pills .filter-pill.active {
    background: #6c55f0;
    border-color: #6c55f0;
    color: #fff;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.service-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px;
    padding: 18px;
    box-shadow: var(--box-shadow);
}

.service-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.service-card .service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(108, 85, 240, .1);
    color: #6c55f0;
    font-size: 16px;
}

.service-card .status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.service-card .status-active {
    background: #dcfce7;
    color: #16a34a;
}

.service-card .status-cancelled,
.service-card .status-terminated,
.service-card .status-fraud {
    background: #f3f4f6;
    color: #6b7280;
}

.service-card .status-suspended,
.service-card .status-overdue {
    background: #fee2e2;
    color: #dc2626;
}

.service-card .status-pending {
    background: #fef3c7;
    color: #b45309;
}

.service-card-title {
    font-size: 15px;
}

.service-card-title b {
    color: #1f2129;
}

.service-card-title .service-group {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #9ca3af;
}

.service-domain-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    background: #f3f4f6;
    color: #4b5563;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    text-decoration: none;
}

.service-domain-chip:hover {
    background: #e5e7eb;
    color: #1f2129;
}

.service-card-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
}

.service-meta-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9ca3af;
}

.service-meta-value {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1f2129;
    margin-top: 2px;
}

.service-meta-sub {
    display: block;
    font-size: 11px;
    color: #9ca3af;
}

.service-card .service-manage-btn {
    margin-top: 4px;
    border-radius: 8px;
    font-weight: 600;
}

/* Breadcrumb: the linked segment ("Client Area") and the current-page
   segment were rendering in the same muted gray — color the link so it
   reads as a link, per a reference image, and keep the current page
   segment muted. */
.main-header .breadcrumb li a {
    color: #6c55f0 !important;
    font-weight: 500;
}

.breadcrumb>li+li:before {
    color: #000;
}


.services-count {
    margin-top: 16px;
    font-size: 12px;
    color: #9ca3af;
}

/* ===== Announcements page (announcements.tpl) — month filter pills +
   card grid, replacing the sidebar "By Month" list + plain list-group
   rows. Real data throughout (title/date/excerpt/links are the same
   Smarty fields the old markup used) except the colored category tag,
   which is inferred from title keywords — see the comment in the .tpl
   for why. ===== */

/* The "Announcements Months" sidebar panel is kept in the Menu tree
   (core/hooks/sidebar.php) — announcements.tpl reads its real children to
   build the pills/RSS button above — but the panel's own rendered HTML
   (from includes/sidebar.tpl) is redundant now, so hide it visually only. */
[menuitemname="Announcements Months"] {
    display: none !important;
}

.announcements-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.announcements-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.announcements-filter-pills .filter-pill {
    display: inline-block;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.announcements-filter-pills .filter-pill:hover {
    color: #1f2129;
    border-color: #d1d5db;
}

.announcements-filter-pills .filter-pill.active {
    background: #6c55f0;
    border-color: #6c55f0;
    color: #fff;
}

.announcements-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.announcement-card {
    padding: 20px 22px;
    cursor: pointer;
}

.announcement-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.announcement-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.announcement-tag-security {
    background: #fee2e2;
    color: #dc2626;
}

.announcement-tag-maintenance {
    background: #fef3c7;
    color: #b45309;
}

.announcement-tag-update {
    background: #dcfce7;
    color: #16a34a;
}

.announcement-tag-general {
    background: #f3f4f6;
    color: #6b7280;
}

.announcement-date {
    font-size: 12.5px;
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.announcement-card-title {
    font-size: 17px;
    font-weight: 700;
    color: #1f2129;
    margin: 0 0 8px;
}

.announcement-card-text {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 12px;
}

.announcement-card-text img {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
}

.announcement-card-footer {
    display: flex;
    align-items: center;
    gap: 12px;
}

.announcement-readmore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6c55f0;
    font-weight: 600;
    font-size: 13.5px;
}



.announcements-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.announcements-pagination .pagination-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.announcements-pagination .pagination-pill:hover {
    border-color: #d1d5db;
    color: #1f2129;
}

.announcements-pagination .pagination-pill.active {
    background: #6c55f0;
    border-color: #6c55f0;
    color: #fff;
}

.announcements-pagination .pagination-pill[disabled] {
    opacity: .4;
    pointer-events: none;
}

/* Single announcement view (viewannouncement.tpl) — same card language as
   the list page (.announcement-tag/.announcement-date reused as-is),
   plus readable typography for the raw announcement HTML body and a
   cleaner footer row. The "Edit" button (admin-only) was dropped, same
   as on the list page. */
.announcement-view-card {
    width: 100%;
}

.announcement-view-card .announcement-card-meta {
    margin-bottom: 16px;
}

.announcement-view-content {
    font-size: 14.5px;
    line-height: 1.7;
    color: #374151;
}

.announcement-view-content p {
    margin: 0 0 14px;
}

.announcement-view-content ul,
.announcement-view-content ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

.announcement-view-content li {
    margin-bottom: 4px;
}

.announcement-view-content code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: .92em;
}

.article-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #f3f4f6;
}


/* Backend theme config (Navigation > Layout > Sidebar > Base - Width) is
   set to 248px, but that setting isn't actually wired to anything here —
   the "Left Wide" sidebar width and its .app-main margin both still read
   the stock 280px default (--app-nav-left-wide-width). A blanket
   `.app-main { margin-left: 248px !important }` used to patch this, but
   !important also steamrolled the stock theme's own exceptions for pages
   with no real sidebar (.page-type-full, e.g. login) and the collapsed
   logo-only sidebar state — those pages got a stray 248px left gap with
   nothing beside it. Overriding the variable itself instead keeps those
   stock exceptions (lower-specificity but theme-authored) intact, since
   they set margin-left directly rather than through this var. */
:root {
    --app-nav-left-wide-width: 248px;
}

/* ===== Additions below: catching this file up with fixes that were made
   in default/depth/futuristic while this file was intentionally not being
   synced (see CUSTOMIZATIONS.md "core/styles/modern has diverged"). These
   are pure additions — nothing above this line was touched. ===== */

/* Submenu-expand broadened to explicitly cover both layout variants +
   an unconditional #main-menu fallback, all !important — this file only
   had the older, narrower version further up. Desktop-only (min-width:
   992px) — see the "Mobile sidebar/header breakage — fixed" note further
   down; the unconditional #main-menu fallback here used to apply on
   mobile too and force every submenu permanently open inside the mobile
   drawer regardless of viewport. */
@media (min-width: 992px) {

    .lagom-layout-left-wide .app-nav-menu .menu>li.open>.dropdown-menu,
    .lagom-layout-left-wide .app-nav-menu .menu>li.active>.dropdown-menu,
    #main-menu .menu>li.open>.dropdown-menu,
    #main-menu .menu>li.active>.dropdown-menu {
        position: static !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .lagom-layout-left-wide .app-nav-menu .menu>li>a:not(.btn)>img,
    .lagom-layout-left-wide .app-nav-menu .menu>li>a:not(.btn)>svg {
        width: 20px !important;
    }
}

/* Re-enable a smooth transition for the active-pill's background/color
   specifically (the blanket transition:none above kills it otherwise). */
.app-nav-menu .menu>li>a {
    transition: background-color .25s ease, color .25s ease, border-radius .25s ease !important;
}

/* Empty secondary-sidebar column (after Support/Actions panels were
   removed site-wide) no longer reserves blank space next to the content. */
.main-content.main-content-full-width {
    max-width: 100% !important;
    flex: 1 1 100% !important;
}

/* Search box relocated from the page header into the table's own toolbar
   row (.table-top) — layout for its new position, plus the fix for the
   flash/jump it caused before being moved by JS. */
.table-top.table-top-with-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.table-top.table-top-with-search .search-field {
    max-width: 280px;
    /* width: 100%; */
    margin-left: auto;
}

body:has(.table-top) .main-header-top .search-group .search-field {
    visibility: hidden;
}


.dropdown-menu>li>a>img {
    height: 18px !important;
    margin-right: 8px !important;
}

/* "Register a New Domain" page (domainregister.tpl / tld-pricing.tpl /
   featured-tlds.tpl) — redesigned per a reference: dark hero card instead
   of the stock illustration banner, flatter featured-TLD cards, and the
   category filter rebuilt as single-select pill buttons instead of a
   selectize multi-select dropdown (real $categoriesWithCounts data,
   just rendered differently — see whmcs-custom.js for the filtering). */
.banner-domain-register {
    background: #ffffff;
    padding: 48px 24px;
    margin: 48px 42px;
}

.banner-domain-register .domain-hero-card {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.main-banner .banner-title {
    margin-bottom: 5px !important;
}

.banner-domain-register .domain-hero-subtitle {
    font-size: 14px;
    margin-bottom: 24px;
}

.banner-domain-register .domain-search-input {
    max-width: 100%;
}

.banner-domain-register .domain-hero-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 18px;
    font-size: 13px;
    color: hsla(0, 0%, 100%, .75);
}

.banner-domain-register .domain-hero-badges i {
    color: #a78bfa;
    margin-right: 4px;
}

/* Featured TLD cards (.online / .com / .in) — per a reference design: no
   TLD logo image, just the TLD name as text + a "Register" button on one
   row, with the price below — instead of the stock centered-logo card
   with a price+button row under a divider line. See featured-tlds.tpl for
   the matching markup change. */
.featured-tld {
    border: 1px solid #e5e7eb;
    box-shadow: none;
    border-radius: 14px;
    overflow: visible;
}

.featured-tld-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
}

.featured-tld-name {
    font-size: 18px;
    font-weight: 700;
    color: #1f2129;
}

.featured-tld-name span {
    color: #1f2129;
}

.featured-tld-price {
    padding: 0 !important;
    border-top: none !important;
    justify-content: flex-start !important;
    font-size: 13px;
    color: #9ca3af;
}

.btn-register-domain {
    background: #fff !important;
    border: 1px solid #6c55f0 !important;
    color: #6c55f0 !important;
    font-weight: 600;
}

.btn-register-domain:hover {
    background: #6c55f0 !important;
    color: #fff !important;
}

.tld-table thead th {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: .03em;
}

.tld-showing-count {
    margin-top: 16px;
    font-size: 13px;
    color: #9ca3af;
}

/* Open Ticket - Department Selection page redesign */

/* Knowledgebase search banner ("Need Help? Start Here") - hidden for now
   per request. To bring it back, delete this rule (or better: use the
   page's own admin-configurable "Hide Knowledgebase Searchbar" checkbox in
   the WHMCS Page Builder instead, which does the same thing natively). */
.page-supportticketsubmit-stepone .main-content>.section:first-child {
    display: none;
}

/* Force sidebar to the right, mirroring the theme's own .main-sidebar-right
   rule, since the sidebarOnRight layout config isn't taking effect on this
   page for reasons outside this template's control. */
.page-supportticketsubmit-stepone .main-grid .main-sidebar {
    order: 2;
    margin-left: var(--main-sidebar-spacing-h);
    margin-right: 0;
}

.page-supportticketsubmit-stepone .panel-department-box {
    border-radius: 16px !important;
    transition: box-shadow .15s ease, transform .15s ease;
}

.page-supportticketsubmit-stepone .panel-department-box:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

.page-supportticketsubmit-stepone .dept-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    margin-bottom: 14px;
    font-size: 20px;
}

.page-supportticketsubmit-stepone .dept-icon img {
    max-width: 24px;
    max-height: 24px;
}

.page-supportticketsubmit-stepone .panel-support .support-title {
    font-weight: 700;
}

.page-supportticketsubmit-stepone .dept-tint .dept-icon {
    background: var(--brand-primary-lighter-3);
    color: var(--brand-primary);
}

.page-supportticketsubmit-stepone .dept-response-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-success);
    margin: 10px 0 4px;
}

.page-supportticketsubmit-stepone .dept-response-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-success);
    display: inline-block;
    flex: none;
}

.page-supportticketsubmit-stepone .btn-dept-open {
    margin-top: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    font-weight: 600;
}

/* Recent Tickets / tip box - now in the right-hand sidebar on this page */

/* Turn each ticket row into its own white card with an icon square, a
   colored status pill, and a chevron - all pure CSS, no markup changes.
   The .status element with a --status-color custom property is confirmed
   by includes/sidebar.tpl (it rewrites WHMCS's own inline
   style="color:..." into class="status" style="--status-color:...") and
   by the same pattern in supportticketslist.tpl, so this isn't a guess. */
.page-supportticketsubmit-stepone .main-sidebar [menuitemname="Recent Tickets"] .list-group-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border: none !important;
    border-radius: 12px;
    margin-bottom: 8px;
    padding: 14px 32px 14px 14px !important;
    position: relative;
}

/* Real <img> icon (built server-side in core/hooks/sidebar.php, section 9)
   pointing at assets/img/quick-shortcuts/tickets.svg, replacing the earlier
   icon-font ::before approach. */
.page-supportticketsubmit-stepone .main-sidebar [menuitemname="Recent Tickets"] .recent-ticket-icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--brand-primary-lighter-3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-supportticketsubmit-stepone .main-sidebar [menuitemname="Recent Tickets"] .recent-ticket-icon img {
    max-width: 18px;
    max-height: 18px;
}

/* .page-supportticketsubmit-stepone .main-sidebar [menuitemname="Recent Tickets"] a.list-group-item::after {
    content: "\203A";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
    color: #9ca3af;
} */

/* Matches the .recent-ticket-redesigned markup built server-side in
   core/hooks/sidebar.php (section 9), which splits WHMCS's single
   "#109342 - test subject" text node into separate elements so this 3-line
   layout is actually possible. */
.page-supportticketsubmit-stepone .recent-ticket-redesigned {
    flex: 1;
    min-width: 0;
}

.page-supportticketsubmit-stepone .recent-ticket-top {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

.page-supportticketsubmit-stepone .recent-ticket-num {
    font-weight: 700;
    color: var(--brand-primary);
    font-size: 13px;
}

.page-supportticketsubmit-stepone .recent-ticket-subject {
    font-weight: 700;
    color: #1f2129;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-supportticketsubmit-stepone .recent-ticket-date {
    font-size: 12px;
    color: #9ca3af;
}

.page-supportticketsubmit-stepone .main-sidebar [menuitemname="Recent Tickets"] .list-group-item .status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: var(--brand-primary-lighter-3);
    background: color-mix(in srgb, var(--status-color, var(--brand-primary)) 15%, white);
    color: var(--status-color, var(--brand-primary));
}

/* Matches the dashboard alert cards (.client-home-alert): white bg, left
   accent border, icon in a tinted circle, bold title + lighter desc. */
.page-supportticketsubmit-stepone .tip-box-open-ticket {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-left: 4px solid var(--brand-warning, #f59e0b);
    border-radius: 12px;
    box-shadow: var(--box-shadow);
    padding: 14px 18px;
    margin-bottom: 20px;
}

.page-supportticketsubmit-stepone .tip-box-icon-circle {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    background: color-mix(in srgb, var(--brand-warning, #f59e0b) 15%, white);
    color: var(--brand-warning, #f59e0b);
}

.page-supportticketsubmit-stepone .tip-box-body {
    flex: 1 1 auto;
    min-width: 0;
}

.page-supportticketsubmit-stepone .tip-box-title {
    font-weight: 700;
    font-size: 14px;
    color: #1f2129;
    margin-bottom: 2px;
}

.page-supportticketsubmit-stepone .tip-box-desc {
    margin-bottom: 0;
    font-size: 13px;
    color: #6b7280;
}

/* 
@media (min-width: 992px) {
    .main-sidebar {
        width: 320px !important;
    }
} */

/* Product Details page redesign (clientareaproductdetails.tpl + the cPanel
   overview.tpl override). Covers the generic path (VPS/Virtualizor,
   DirectAdmin, addon-only products, etc.) and cPanel; Plesk is untouched. */

.page-clientareaproductdetails .page-product-details-row {
    display: flex;
    flex-wrap: wrap;
}

/* Hero banner */
.page-clientareaproductdetails .hero-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: var(--primary-block-bg, rgb(23, 21, 40));
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 20px;
    color: #fff;
}

.page-clientareaproductdetails .hero-banner-main {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-clientareaproductdetails .hero-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .1);
    flex: none;
}

.page-clientareaproductdetails .hero-icon svg,
.page-clientareaproductdetails .hero-icon img {
    max-width: 32px;
    max-height: 32px;
}

.page-clientareaproductdetails .hero-icon-sitejet {
    overflow: hidden;
}

.page-clientareaproductdetails .hero-icon-sitejet img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none;
    max-height: none;
}

.page-clientareaproductdetails .hero-product-name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.page-clientareaproductdetails .hero-product-name .product-group-name {
    font-weight: 400;
    opacity: .7;
}

.page-clientareaproductdetails .hero-domain-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
}

.page-clientareaproductdetails .hero-domain-chip a {
    color: rgba(255, 255, 255, .85);
}

.page-clientareaproductdetails .hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.page-clientareaproductdetails .btn-hero-action {
    background: var(--brand-primary, #5e3add);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
}

.page-clientareaproductdetails .btn-hero-action:hover {
    opacity: .9;
    color: #fff;
}

/* Status pill - reuses the exact color scheme already established for
   .service-card .status-active/-suspended/-pending/etc. (custom.css, My
   Products & Services card grid), just re-scoped to this page's hero. */
.page-clientareaproductdetails .hero-info .status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.page-clientareaproductdetails .hero-info .status-active {
    background: rgba(220, 252, 231, .9);
    color: #16a34a;
}

.page-clientareaproductdetails .hero-info .status-cancelled,
.page-clientareaproductdetails .hero-info .status-terminated,
.page-clientareaproductdetails .hero-info .status-fraud {
    background: rgba(243, 244, 246, .9);
    color: #4b5563;
}

.page-clientareaproductdetails .hero-info .status-suspended,
.page-clientareaproductdetails .hero-info .status-overdue {
    background: rgba(254, 226, 226, .9);
    color: #dc2626;
}

.page-clientareaproductdetails .hero-info .status-pending {
    background: rgba(254, 243, 199, .9);
    color: #b45309;
}

/* Disk/Bandwidth usage stat tiles - hidden for now, per request. Note:
   .stat-tiles-updated is deliberately NOT hidden here - it's shared with
   the disk/bandwidth over-limit warning message (red text + upgrade link)
   on accounts actually near/over their limit, which should keep showing. */
.page-clientareaproductdetails .stat-tiles-row {
    display: none;
}

/* Usage stat tiles (Disk/Bandwidth) - restyles the existing jquery.knob
   dial into a compact card, doesn't touch the JS/data attributes driving
   it. */
.page-clientareaproductdetails .stat-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px;
    padding: 16px;
    box-shadow: var(--box-shadow);
    margin-bottom: 16px;
}

.page-clientareaproductdetails .stat-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex: none;
    font-size: 18px;
}

.page-clientareaproductdetails .stat-tile-tint-0 .stat-tile-icon {
    background: var(--brand-primary-lighter-3);
    color: var(--brand-primary);
}

.page-clientareaproductdetails .stat-tile-tint-1 .stat-tile-icon {
    background: var(--brand-info-lighter-3);
    color: var(--brand-info);
}

.page-clientareaproductdetails .stat-tile-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.page-clientareaproductdetails .stat-tile-label {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.page-clientareaproductdetails .stat-tile-dial-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-clientareaproductdetails .stat-tile-value {
    font-size: 13px;
    color: #4b5563;
    white-space: nowrap;
}

.page-clientareaproductdetails .stat-tiles-updated {
    margin-bottom: 20px;
    font-size: 12px;
    color: #9ca3af;
}

/* Quick Shortcuts (cPanel only) - reskins the existing shortcut links
   (same hrefs/icons) into icon-square tiles. */
.page-clientareaproductdetails .quick-shortcut-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 12px;
    padding: 14px;
    /* margin-bottom: 16px; */
    font-size: 13px;
    font-weight: 600;
    color: #1f2129;
    transition: box-shadow .15s ease, transform .15s ease;
}

.page-clientareaproductdetails .quick-shortcut-tile:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
    color: #1f2129;
}

.page-clientareaproductdetails .quick-shortcut-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--brand-primary-lighter-3);
    color: var(--brand-primary);
    font-size: 15px;
}

.page-clientareaproductdetails .quick-shortcut-icon img {
    max-width: 18px;
    max-height: 18px;
}

.page-clientareaproductdetails .quick-create-email-card {
    border-radius: 14px;
}

.page-clientareaproductdetails .quick-create-email-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.page-clientareaproductdetails .quick-create-email-header .section-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.page-clientareaproductdetails .quick-create-email-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--brand-primary, #7b5cff);
    color: #fff;
    font-size: 16px;
    flex: none;
}

/* The site-wide ".form-control { border-radius: 10px !important; }" rule
   rounds all 4 corners of the email-prefix input, which breaks its flush
   join with the "@domain" addon next to it (visible gap/seam). Scoped to
   just the email+domain field specifically (.input-group-domain), NOT the
   password field's plain .input-group next to it - that one has no addon,
   so the same fix would leave its right edge flat/borderless instead. */
.page-clientareaproductdetails .quick-create-email-card .input-group-domain {
    display: flex;
    align-items: stretch;
}

.page-clientareaproductdetails .quick-create-email-card .input-group-domain .form-control {
    border-radius: 10px 0 0 10px !important;
    border-right: none;
}

.page-clientareaproductdetails .quick-create-email-card .input-group-addon {
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-left: none;
    border-radius: 0 10px 10px 0;
    color: #6b7280;
    font-size: 14px;
    white-space: nowrap;
}

.page-clientareaproductdetails .quick-create-email-submit-row {
    margin-top: 14px;
}

/* Modern tabs - today these are 100% unstyled stock Bootstrap nav-tabs on
   this page; applies to both the generic path's .nav-tabs and the cPanel
   override's .panel-tabs (same tab-content/tab-pane markup underneath). */
.page-clientareaproductdetails .panel-tabs-modern .nav-tabs,
.page-clientareaproductdetails .panel-tabs-modern .panel-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    padding: 0 16px;
    background: transparent;
}

.page-clientareaproductdetails .panel-tabs-modern .nav-tabs>li>a,
.page-clientareaproductdetails .panel-tabs-modern .panel-tabs>li>a {
    border: none;
    background: transparent;
    color: #9ca3af;
    font-weight: 600;
    font-size: 13px;
    padding: 14px 4px;
    margin-right: 20px;
    border-radius: 0;
    border-bottom: 2px solid transparent;
}

.page-clientareaproductdetails .panel-tabs-modern .nav-tabs>li>a.active,
.page-clientareaproductdetails .panel-tabs-modern .panel-tabs>li>a.active {
    color: var(--brand-primary);
    /* border-bottom-color: var(--brand-primary); */
    background: transparent;
}

/* Domain tab (cPanel) - icon + domain name + "Primary domain" subtitle on
   the left, Visit Website / Manage Domain buttons on the right. */
.page-clientareaproductdetails .domain-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.page-clientareaproductdetails .domain-info-main {
    display: flex;
    align-items: center;
}

.page-clientareaproductdetails .domain-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--brand-primary-lighter-3);
    color: var(--brand-primary);
    font-size: 18px;
    flex: none;
}

.page-clientareaproductdetails .domain-info-name {
    font-size: 15px;
    font-weight: 700;
    color: #1f2129;
}

.page-clientareaproductdetails .domain-info-sub {
    font-size: 12px;
    color: #9ca3af;
}

.page-clientareaproductdetails .domain-info-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.page-clientareaproductdetails .domain-info-visit-btn {
    background: var(--brand-primary, #7b5cff);
    color: #fff;
}

.page-clientareaproductdetails .domain-info-visit-btn:hover {
    opacity: .9;
    color: #fff;
}

/* Billing Overview right column */
.page-clientareaproductdetails .page-product-details-sidebar {
    margin-bottom: 20px;
}

.page-clientareaproductdetails .billing-overview-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px;
    box-shadow: var(--box-shadow);
    position: sticky;
    top: 84px;
}

.page-clientareaproductdetails .billing-overview-header h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.page-clientareaproductdetails .billing-overview-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.page-clientareaproductdetails .billing-overview-row:last-child {
    border-bottom: none;
}

.page-clientareaproductdetails .billing-overview-label {
    font-size: 12px;
    color: #9ca3af;
}

.page-clientareaproductdetails .billing-overview-value {
    font-size: 14px;
    color: #1f2129;
    font-weight: 600;
}

.page-clientareaproductdetails .billing-overview-renew-btn {
    display: block;
    text-align: center;
    background: #17151f;
    color: #fff;
    border-radius: 10px;
    padding: 12px;
    margin-top: 16px;
    font-weight: 600;
    font-size: 14px;
}

.page-clientareaproductdetails .billing-overview-renew-btn:hover {
    background: #000;
    color: #fff;
}

.page-clientareaproductdetails .billing-overview-back-link {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
    color: var(--brand-primary);
}

@media (max-width: 991.98px) {
    .page-clientareaproductdetails .billing-overview-card {
        position: static;
    }
}

.billing-overview-header {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

/* ============================================================
   Domain Details page redesign (clientareadomaindetails.tpl)
   ============================================================ */

.page-clientareadomaindetails .client-home-alert {
    margin-bottom: 20px;
}

.page-clientareadomaindetails .hero-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: var(--primary-block-bg, rgb(23, 21, 40));
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 20px;
    color: #fff;
}

.page-clientareadomaindetails .hero-banner-main {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-clientareadomaindetails .hero-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .1);
    flex: none;
}

.page-clientareadomaindetails .hero-icon svg,
.page-clientareadomaindetails .hero-icon img {
    max-width: 32px;
    max-height: 32px;
}

.page-clientareadomaindetails .hero-eyebrow {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
    margin-bottom: -13px;
}

.page-clientareadomaindetails .hero-product-name {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.page-clientareadomaindetails .hero-product-name a {
    color: #fff;
}

.page-clientareadomaindetails .hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.page-clientareadomaindetails .btn-hero-action,
.page-clientareadomaindetails .btn-hero-action-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
}

.page-clientareadomaindetails .btn-hero-action {
    background: var(--brand-primary, #5e3add);
    color: #fff;
    border: none;
}

.page-clientareadomaindetails .btn-hero-action:hover {
    opacity: .9;
    color: #fff;
}

.page-clientareadomaindetails .btn-hero-action-outline {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
}

.page-clientareadomaindetails .btn-hero-action-outline:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

/* Status pill - same color scheme used across service cards/product details */
.page-clientareadomaindetails .status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.page-clientareadomaindetails .hero-banner .status {
    font-size: 12px;
    padding: 3px 12px;
}

.page-clientareadomaindetails .status-active {
    background: var(--brand-success-lighter-3);
    color: var(--brand-success);
}

.page-clientareadomaindetails .status-cancelled,
.page-clientareadomaindetails .status-transferredaway,
.page-clientareadomaindetails .status-fraud {
    background: rgba(243, 244, 246, .9);
    color: #4b5563;
}

.page-clientareadomaindetails .status-expired,
.page-clientareadomaindetails .status-suspended {
    background: var(--brand-danger-lighter-3);
    color: var(--brand-danger);
}

.page-clientareadomaindetails .status-pendingtransfer,
.page-clientareadomaindetails .status-pending {
    background: var(--brand-warning-lighter-3);
    color: var(--brand-warning);
}

/* Stat tiles row (Next Due Date / Recurring Amount / SSL Certificate) -
   height:100% makes each tile fill its column, which Bootstrap's .row
   already stretches to the tallest column's content (e.g. SSL Certificate
   wrapping to 2 lines) - without it a tile just hugs its own shorter
   content and the row reads as uneven. */
.page-clientareadomaindetails .stat-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px;
    padding: 18px;
    box-shadow: var(--box-shadow);
    margin-bottom: 20px;
    height: calc(100% - 20px);
}

.page-clientareadomaindetails .stat-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex: none;
    font-size: 17px;
}

.page-clientareadomaindetails .stat-tile-tint-0 .stat-tile-icon {
    background: var(--brand-primary-lighter-3);
    color: var(--brand-primary);
}

.page-clientareadomaindetails .stat-tile-tint-1 .stat-tile-icon {
    background: var(--brand-warning-lighter-3);
    color: var(--brand-warning);
}

.page-clientareadomaindetails .stat-tile-tint-2 .stat-tile-icon {
    background: var(--brand-success-lighter-3);
    color: var(--brand-success);
}

.page-clientareadomaindetails .stat-tile-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.page-clientareadomaindetails .stat-tile-label {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.page-clientareadomaindetails .stat-tile-value {
    font-size: 16px;
    font-weight: 700;
    color: #1f2129;
}

.page-clientareadomaindetails .stat-tile-sub {
    font-size: 12px;
    color: #9ca3af;
}

/* Domain Overview / SSL Certificate / "Do Today" cards */
.page-clientareadomaindetails .domain-overview-panel {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px;
    box-shadow: var(--box-shadow);
    margin-bottom: 20px;
    overflow: hidden;
}

.page-clientareadomaindetails .domain-overview-panel .panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    padding: 16px 20px;
}

.page-clientareadomaindetails .domain-overview-panel .panel-title {
    font-size: 15px;
    font-weight: 700;
    color: #1f2129;
    margin: 0;
}

.page-clientareadomaindetails .domain-overview-panel .panel-body {
    padding: 20px;
}

.page-clientareadomaindetails .badge-secured {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--brand-success-lighter-3);
    color: var(--brand-success);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
}

.page-clientareadomaindetails .overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 16px;
}

.page-clientareadomaindetails .overview-grid-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.page-clientareadomaindetails .overview-grid-label {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.page-clientareadomaindetails .overview-grid-value {
    font-size: 14px;
    color: #1f2129;
    font-weight: 600;
    word-break: break-word;
}

.page-clientareadomaindetails .overview-grid-item.ssl-required .overview-grid-value {
    color: var(--brand-danger);
}

/* "What would you like to do today?" action grid */
.page-clientareadomaindetails .today-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.page-clientareadomaindetails .today-action-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 12px;
    padding: 14px 16px;
    color: #1f2129;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.page-clientareadomaindetails .today-action-card:hover {
    border-color: var(--brand-primary, #5e3add);
    box-shadow: var(--box-shadow);
    color: #1f2129;
}

.page-clientareadomaindetails .today-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--brand-primary-lighter-3);
    color: var(--brand-primary);
    flex: none;
    font-size: 15px;
}

.page-clientareadomaindetails .today-action-text {
    font-size: 13px;
    font-weight: 600;
    flex: 1;
}

.page-clientareadomaindetails .today-action-arrow {
    color: #9ca3af;
    font-size: 12px;
}

@media (max-width: 767.98px) {

    .page-clientareadomaindetails .overview-grid,
    .page-clientareadomaindetails .today-actions-grid {
        grid-template-columns: 1fr;
    }
}

/* Left "Manage" / "Actions" sidebar - restyled to match the card look used
   throughout the rest of this page's redesign (white bg, border, shadow,
   rounded corners) instead of the theme's default flat/transparent panel.
   Targeted via the stable WHMCS menu-item identifiers (menuItemName=
   "Domain Details Management"/"Domain Details Actions") rather than a page
   body class, since these panels are shared across every domain-management
   page (Contact Info, Private Nameservers, DNS Management, Get EPP Code,
   Lock/Unlock, etc.), not just clientareadomaindetails.tpl itself. */
.panel-sidebar[menuitemname="Domain Details Management"],
.panel-sidebar[menuitemname="Domain Details Actions"] {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px;
    box-shadow: var(--box-shadow);
    padding: 20px;
    margin-bottom: 20px;
}

.panel-sidebar[menuitemname="Domain Details Management"] .panel-heading,
.panel-sidebar[menuitemname="Domain Details Actions"] .panel-heading {
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    padding: 0 0 14px;
    margin-bottom: 10px;
}

.panel-sidebar[menuitemname="Domain Details Management"] .panel-title,
.panel-sidebar[menuitemname="Domain Details Actions"] .panel-title {
    font-size: 15px;
    font-weight: 700;
    color: #1f2129;
}

.panel-sidebar[menuitemname="Domain Details Management"] .list-group,
.panel-sidebar[menuitemname="Domain Details Actions"] .list-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.panel-sidebar[menuitemname="Domain Details Management"] .list-group-item,
.panel-sidebar[menuitemname="Domain Details Actions"] .list-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    padding: 9px 10px;
    border-radius: 10px;
    background: transparent;
}

.panel-sidebar[menuitemname="Domain Details Management"] .list-group-item i,
.panel-sidebar[menuitemname="Domain Details Actions"] .list-group-item i {
    color: #9ca3af;
    width: 16px;
    text-align: center;
    font-size: 14px;
}

.panel-sidebar[menuitemname="Domain Details Management"] .list-group-item-icon-img,
.panel-sidebar[menuitemname="Domain Details Actions"] .list-group-item-icon-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.panel-sidebar[menuitemname="Domain Details Management"] .list-group-item:hover,
.panel-sidebar[menuitemname="Domain Details Actions"] .list-group-item:hover {
    background: #f7f7f8;
    color: #1f2129;
}

.panel-sidebar[menuitemname="Domain Details Management"] .list-group-item.active,
.panel-sidebar[menuitemname="Domain Details Actions"] .list-group-item.active {
    background: var(--brand-primary-lighter-3);
    color: var(--brand-primary);
    font-weight: 600;
}

.panel-sidebar[menuitemname="Domain Details Management"] .list-group-item.active i,
.panel-sidebar[menuitemname="Domain Details Actions"] .list-group-item.active i {
    color: var(--brand-primary);
}

/* Addons tab - the "package" upsell cards default to a dark hero-style
   background (fine on their own, but it clashes with the light card design
   used everywhere else on this page). Restyle to match. */
.page-clientareadomaindetails #Addons .package {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px;
    box-shadow: var(--box-shadow);
    padding: 28px 24px;
    color: #1f2129;
}

.page-clientareadomaindetails #Addons .package-title {
    color: #1f2129;
    font-size: 15px;
    font-weight: 700;
}

.page-clientareadomaindetails #Addons .package-content p {
    color: #6b7280;
    font-size: 13px;
}

.page-clientareadomaindetails #Addons .package-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--brand-primary-lighter-3);
    --svg-icon-color-1: var(--brand-primary);
    --svg-icon-color-2: var(--brand-primary);
    --svg-icon-color-3: var(--gray-darker, #17191c);
    --svg-icon-color-4: var(--brand-primary);
}

.page-clientareadomaindetails #Addons .package-icon svg {
    width: 32px;
    height: 32px;
}

.page-clientareadomaindetails #Addons .package-price .price {
    color: #1f2129;
}

.page-clientareadomaindetails #Addons .package-footer,
.page-clientareadomaindetails #Addons .package-content+.package-actions {
    border-top: 1px solid rgba(0, 0, 0, .06);
    margin-top: 16px;
    padding-top: 16px;
}

/* Contact Information page - the Registrant/Technical/Billing/Admin blocks
   were using the theme's default dense/borderless form styling. Give each
   one proper card framing and breathing room to match the rest of the
   redesign, and turn the "existing contact vs custom" radio choice into a
   clearer two-row toggle instead of cramped inline text. */
.page-clientareadomaincontactinfo .section {
    margin-bottom: 20px;
}

.page-clientareadomaincontactinfo>.section:first-child {
    margin-bottom: 4px;
}

.page-clientareadomaincontactinfo>.section:first-child .section-body {
    padding: 0;
    margin: 0;
    min-height: 0;
}

.page-clientareadomaincontactinfo form.section {
    margin-top: 0;
    padding-top: 0;
}

.section-header-with-icon {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.section-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--brand-primary-lighter-3);
    color: var(--brand-primary);
    font-size: 15px;
    flex: none;
    margin-top: 2px;
}

.section-header-icon img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.section-header-with-icon .section-title,
.page-clientareadomaincontactinfo .section-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2129;
    margin-bottom: 2px;
}

.page-clientareadomaincontactinfo form .section-header {
    margin-bottom: 14px;
}

.panel-group-condensed {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    column-gap: 32px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px;
    box-shadow: var(--box-shadow);
}

/* Payment method gateway logos (Razorpay/PayPal) - uploaded at raw sizes
   (1280x312, 1896x401) with nothing constraining them, and centered
   vertically against the radio via the label's own flex row rather than
   the (now text-less) .check-content spacer. */
#paymentGatewaysContainer .check-icon img {
    height: 32px;
    width: auto;
    object-fit: contain;
}

#paymentGatewaysContainer .panel-check .check>label {
    align-items: center;
}

/* Let each radio option's own wrapper disappear from layout so its header
   and body can be placed independently on the shared grid below - headers
   side by side on row 1, whichever body is active spans the full width
   underneath, instead of two separate stacked full-width panels. */
.panel-check {
    display: contents;
}

/* Domain addon boxes on cart.php?a=confdomains ("Assign Addons to the
   Domain") use .panel.panel-check just for its base look, not for the
   grid-accordion layout above - display:contents on the rule above would
   strip their own box entirely, silently killing the border/background
   set on them. Give them a real box back. */
.domain-info-addons .panel-check {
    display: block;
}

.panel-check .panel-heading.check {
    grid-row: 1;
    padding: 0;
    background: transparent !important;
}

.panel-check:nth-of-type(1) .panel-heading.check {
    grid-column: 1;
    justify-self: start;
}

.panel-check:nth-of-type(2) .panel-heading.check {
    grid-column: 2;
    justify-self: start;
}

/* Full-width divider between the radio row and whichever body is active -
   lives on .panel-collapse (already spanning the full grid width) rather
   than on the individual headers, so it's one clean edge-to-edge line
   instead of two short segments with a gap between them. */
.panel-check .panel-collapse {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(0, 0, 0, .06);
    padding: 24px 26px;
}

/* On pages like Nameservers/Bulk Domain Management the theme already
   renders its own complete radio widget here (the ".radio-styled" div that
   wraps the real, JS-hidden <input> - see assets/css/theme.css). Recolor it
   to brand purple there instead of leaving it the default theme green. */
.panel-check .radio-styled.checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* Contact Information doesn't render a visible ".radio-styled" widget for
   its existing/custom toggle, so it needs its own from-scratch indicator -
   scoped to this page only so it doesn't double up with .radio-styled on
   the pages above. */
.page-clientareadomaincontactinfo .panel-check .check-content::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #cbd0dc;
    background: #fff;
    flex: none;
    box-sizing: border-box;
    transition: border-color .15s ease, border-width .15s ease;
}

.page-clientareadomaincontactinfo .panel-check input:checked~.check-content::before {
    border-color: var(--brand-primary);
    border-width: 5px;
}

.panel-check .check-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.panel-check .check-content span {
    font-size: 13px;
    font-weight: 600;
    color: #1f2129;
}

.panel-check .panel-body {
    padding: 0;
}

/* Nameservers tab - the 5 nameserver fields used to stack in a single
   narrow (.m-w-sm) column, leaving the whole right half of the card empty.
   Lay them out 2-per-row instead, same field width/spacing language as the
   Contact Information grid. */
.ns-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
}

@media (max-width: 767.98px) {
    .ns-fields-grid {
        grid-template-columns: 1fr;
    }
}

.page-clientareadomaincontactinfo .panel-body .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
}

.page-clientareadomaincontactinfo .panel-body .row .col-md-6 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    padding: 0 12px;
    box-sizing: border-box;
}

.page-clientareadomaincontactinfo .form-group {
    margin-bottom: 16px;
}

.page-clientareadomaincontactinfo .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1f2129;
    margin-bottom: 6px;
}

@media (max-width: 767.98px) {
    .panel-group-condensed {
        grid-template-columns: 1fr;
    }

    .panel-check:nth-of-type(2) .panel-heading.check {
        grid-column: 1;
    }

    .page-clientareadomaincontactinfo .panel-body .row .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.page-clientareadomaincontactinfo .form-control {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .1);
    padding: 9px 12px;
    font-size: 13px;
    height: auto;
}

.page-clientareadomaincontactinfo .form-actions {
    margin-top: 4px;
}

/* Get EPP Code page - the raw success alert used to just dump plain text
   ("The EPP Code for your domain is: ...") in a green box. Give it a proper
   card with a labelled, copyable code field instead. */
.epp-code-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px;
    box-shadow: var(--box-shadow);
    padding: 20px;
    max-width: 480px;
}

.epp-code-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 10px;
}

.epp-code-row {
    display: flex;
    gap: 10px;
}

.epp-code-value {
    flex: 1;
    border: 1px dashed rgba(123, 92, 255, .4);
    border-radius: 10px;
    background: var(--brand-primary-lighter-3);
    color: var(--brand-primary, #7b5cff) !important;
    font-family: monospace;
    font-size: 15px;
    font-weight: 700 !important;
    padding: 10px 14px;
}

.epp-code-copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    white-space: nowrap;
}

.epp-code-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 12px;
    color: #9ca3af;
}

.panel-sidebar:not(.panel-summary):not(.panel-styled-group) .list-group>a.list-group-item:hover {
    padding-left: 0px;
    padding-right: 0px;
}

/* ------------------------------------------------------------------
   "Choose a Domain" order step (configureproductdomain, boxed variant):
   Register / Transfer / Use Own Domain options as full-width rows —
   visible radio dot, icon, title (+ badge pill) and description all
   in one line, with the corner-ribbon checkmark swapped out in favor
   of the radio dot + a tinted row background for the selected state.
   ------------------------------------------------------------------ */

/* Desktop: option rows on the left, domain search on the right as two
   independent cards side by side (the base theme only ever stacks these -
   .panel-domain-option above .panel-domain-search - at every width, so the
   2-column split and each side's own card chrome are both new here, not
   overriding an existing rule). Below 992px they fall back to the
   theme's native stacked single-column layout. */
@media (min-width: 992px) {
    .panel-choose-domain-boxed {
        display: flex;
        align-items: flex-start;
        gap: 24px;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .panel-choose-domain-boxed .panel-domain-option {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
        background: #fff;
        border: 1px solid rgba(0, 0, 0, .06);
        border-radius: 16px;
        box-shadow: var(--box-shadow);
    }

    .panel-choose-domain-boxed .panel-domain-search {
        flex: 1;
        min-width: 0;
        border-radius: 16px;
        box-shadow: var(--box-shadow);
    }

    .panel-choose-domain-boxed .panel-domain-search-primary {
        border-top: none;
        border: 1px solid rgba(0, 0, 0, .06);
    }
}

.panel-choose-domain-boxed .panel-domain-option {
    padding: 20px;
}

.panel-choose-domain-boxed .panel-domain-option .content {
    flex-direction: column;
    row-gap: 14px;
}

.panel-choose-domain-boxed .panel-domain-option .content-1,
.panel-choose-domain-boxed .panel-domain-option .content-2,
.panel-choose-domain-boxed .panel-domain-option .content-3,
.panel-choose-domain-boxed .panel-domain-option .content-4,
.panel-choose-domain-boxed .panel-domain-option .content-5 {
    width: 100%;
}

.panel-choose-domain-boxed .panel-domain-option .radio {
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 14px;
    overflow: visible;
}

.panel-choose-domain-boxed .panel-domain-option .radio .radio-styled {
    display: flex;
    position: static;
    flex: none;
}

.panel-choose-domain-boxed .panel-domain-option .radio .box {
    flex: 1;
    flex-direction: row;
    align-items: center;
    width: auto;
    height: auto;
    column-gap: 16px;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 14px;
    background: #fff;
    padding: 16px 20px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.panel-choose-domain-boxed .panel-domain-option .radio .box:hover,
.panel-choose-domain-boxed .panel-domain-option .radio .box:focus-visible {
    border-color: var(--brand-primary);
    outline: none;
}

.panel-choose-domain-boxed .panel-domain-option .radio .box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-primary-lighter-4, #f2effe);
    flex: none;
}

.panel-choose-domain-boxed .panel-domain-option .radio .box-icon .svg-icon {
    width: 26px;
    height: 26px;
}

.panel-choose-domain-boxed .panel-domain-option .radio .box-text {
    align-items: flex-start;
    row-gap: 2px;
}

.panel-choose-domain-boxed .panel-domain-option .radio .box-text-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #1f2129;
    margin: 0;
    text-align: left;
}

.panel-choose-domain-boxed .panel-domain-option .radio .box-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--brand-primary);
    background: var(--brand-primary-lighter-3, #e8dff6);
    border-radius: 999px;
    padding: 2px 8px;
}

.panel-choose-domain-boxed .panel-domain-option .radio .box-text-subtitle {
    color: #9ca3af;
    text-align: left;
}

/* Selected row: tint the row background and let the visible radio dot
   (native icheck styling) carry the selected state — the old corner
   ribbon/checkmark is dropped in favor of the plain radio indicator. */
.panel-choose-domain-boxed .panel-domain-option .radio .radio-styled.checked+div {
    background: var(--brand-primary-lighter-4, #f2effe);
    border-color: var(--brand-primary);
}

.panel-choose-domain-boxed .panel-domain-option .radio .radio-styled.checked+div:before,
.panel-choose-domain-boxed .panel-domain-option .radio .radio-styled.checked+div:after {
    display: none;
}

@media (max-width: 767.98px) {
    .panel-choose-domain-boxed .panel-domain-option .radio {
        align-items: flex-start;
    }

    .panel-choose-domain-boxed .panel-domain-option .radio .radio-styled {
        margin-top: 14px;
    }

    .panel-choose-domain-boxed .panel-domain-option .radio .box {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 8px;
    }
}

/* Dark hero banner + floating "Selected Product" card for the
   "Choose a Domain" step header (see includes/overwrites/pageheader.tpl
   and the configureproductdomain block in the main-menu layouts).
   Styled on the inner ".domain-step-hero-wrap" (a plain child of
   ".container", added specifically for this) rather than on
   ".container" itself — ".container" carries the layout's own
   max-width + gutter padding used to inset the white panel below, and
   painting the background directly on it ignored that gutter. A
   width:100% child naturally respects the parent's padding instead. */
.page-configureproductdomain .domain-step-hero-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    background: linear-gradient(135deg, #1c1533 0%, #0d0b16 100%);
    border-radius: 20px;
    padding: 32px;
    box-sizing: border-box;
    width: 100%;
}

.page-configureproductdomain .domain-step-hero-text .main-header-title {
    color: #fff;
}

.page-configureproductdomain .domain-step-hero-desc {
    color: rgba(255, 255, 255, .6);
    font-size: 14px;
    line-height: 1.5;
    margin: 10px 0 0;
    max-width: 520px;
}

.page-configureproductdomain .domain-step-product-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    padding: 14px 20px;
    min-width: 220px;
    margin-top: 0;
}

.page-configureproductdomain .domain-step-product-eyebrow {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .5);
}

.page-configureproductdomain .domain-step-product-name {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}

.page-configureproductdomain .domain-step-product-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

.page-configureproductdomain .main-content {
    margin-top: -20px;
}

@media (max-width: 767.98px) {
    .page-configureproductdomain .domain-step-hero-wrap {
        flex-direction: column;
        padding: 24px;
        margin-bottom: 20px;
    }

    .page-configureproductdomain .domain-step-product-card {
        width: 100%;
    }
}

/* "Find your new domain" - the whole register search bar is now a
   fully stacked, labelled form (Domain Name / Extension / Check button,
   each its own full-width line) instead of the original one-line
   input+dropdown+button row, so every child is forced onto its own row
   via flex-basis:100% and the parent wraps. */
.domain-search-form.inline-form,
.domain-search-form {
    flex-wrap: wrap;
}

.domain-search-form .domain-search-heading {
    order: -1;
    flex: 1 0 100%;
    color: #1f2129;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0;
}

.domain-search-form .domain-search-divider {
    order: -1;
    flex: 1 0 100%;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, .06);
    margin: 16px 0 20px;
}

.domain-search-form .domain-field-label {
    display: block;
    flex: 1 0 100%;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9ca3af;
    margin: 0 0 8px;
}

/* "Domain Name" and "Extension" side by side in one row instead of each
   taking its own full-width line - .domain-field-row is the flex row
   (a full-width item within .domain-search-form's own wrap), and each
   .domain-field-group is a plain block column so its label/field still
   just stack normally inside that half. */
.domain-search-form .domain-field-row {
    flex: 1 0 100%;
    display: flex;
    gap: 24px;
}

.domain-search-form .domain-field-group {
    flex: 1;
    min-width: 0;
}

/* Domain Name gets most of the row, Extension shrinks to a fixed narrower
   column - was an even 50/50 split before, making the extension dropdown
   unnecessarily wide next to the (usually longer) domain name input.
   Applies to all three tabs sharing this markup (Register/Transfer/Use
   Own Domain). */
.domain-search-form .domain-field-group:first-child {
    flex: 2.5;
}

.domain-search-form .domain-field-group:last-child {
    flex: none;
    width: 160px;
}

.domain-search-form .inline-form-element {
    flex: 1 0 100%;
    margin-right: 0;
    margin-bottom: 18px;
}

.domain-search-form .inline-form-element .btn {
    width: 100%;
    justify-content: center;
    height: 52px;
    font-size: 15px;
}

/* Now that the search card itself is white (see the inline style on
   .panel-domain-search-primary), the input/dropdown need their own
   visible border+fill again or they blend invisibly into the card
   background - the "-primary" theme override that used to do this
   wasn't reliably applying, so this is scoped to our own
   guaranteed-matching .domain-search-form class instead. */
.domain-search-form .dropdown .tld-select {
    background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0, .1) !important;
    color: #1f2129 !important;
    height: 52px !important;
    box-sizing: border-box !important;
}

.domain-search-form .inline-form-element>.form-control {
    border: 1px solid rgba(0, 0, 0, .1) !important;
    color: #1f2129 !important;
    height: 52px !important;
    box-sizing: border-box !important;
}

.domain-search-form .dropdown .tld-select .caret {
    color: #6b7280 !important;
}

#domainregister .domain-search-popular {
    order: 3;
    flex: 1 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

#domainregister .domain-search-popular-label {
    color: #9ca3af;
    font-size: 12px;
}

#domainregister .domain-search-popular-chip {
    border: none;
    background: var(--brand-primary-lighter-3, #ece7fd);
    color: var(--brand-primary, #5e3add);
    font-size: 12px;
    font-weight: 600;
    padding: 0px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s ease;
}

#domainregister .domain-search-popular-chip:hover,
#domainregister .domain-search-popular-chip:focus-visible {
    background: var(--brand-primary-lighter-4, #ddd6fe);
    outline: none;
}

/* Light search-box card (switched away from the dark purple/black
   gradient per updated direction) — re-themes the TLD dropdown and
   input, which otherwise assume a dark backdrop via the theme's
   "html:not(.lagom-dark-mode) .panel-domain-search-primary ..." rules.
   !important because the base theme's var(--primary-block-bg-h) gradient
   kept winning in practice despite this selector's higher specificity. */
.panel-choose-domain-boxed .panel-domain-search-primary {
    background: #fff !important;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

html:not(.lagom-dark-mode) .panel-choose-domain-boxed .panel-domain-search-primary .inline-form-element>.form-control {
    border-color: rgba(0, 0, 0, .08);
    background-color: #f4f4f8;
    color: #1f2129;
}

html:not(.lagom-dark-mode) .panel-choose-domain-boxed .panel-domain-search-primary .inline-form-element>.form-control::placeholder {
    color: #9ca3af;
}

html:not(.lagom-dark-mode) .panel-choose-domain-boxed .panel-domain-search-primary .dropdown.show .tld-select,
html:not(.lagom-dark-mode) .panel-choose-domain-boxed .panel-domain-search-primary .dropdown.show .tld-select:focus,
html:not(.lagom-dark-mode) .panel-choose-domain-boxed .panel-domain-search-primary .dropdown.show .tld-select:hover,
html:not(.lagom-dark-mode) .panel-choose-domain-boxed .panel-domain-search-primary .dropdown .tld-select,
html:not(.lagom-dark-mode) .panel-choose-domain-boxed .panel-domain-search-primary .dropdown .tld-select:focus,
html:not(.lagom-dark-mode) .panel-choose-domain-boxed .panel-domain-search-primary .dropdown .tld-select:hover {
    color: #1f2129;
    background: #fff;
    border-color: rgba(0, 0, 0, .1);
}

html:not(.lagom-dark-mode) .panel-choose-domain-boxed .panel-domain-search-primary .dropdown.show .tld-select .caret,
html:not(.lagom-dark-mode) .panel-choose-domain-boxed .panel-domain-search-primary .dropdown .tld-select .caret {
    color: #6b7280;
}

#domainregister .srd_dstrt_dom_chk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (min-width: 992px) {
    .domain-info-addons {
        padding-left: 0px;
    }
}

.domain-info-addons:not(.domain-info-addons-extended) .domain-addons-title {
    display: block;
    color: #000;
}

/* The theme's non-extended addon variant stacks the checkbox row's own
   .check>label as flex-direction:column (theme.css) - built for a taller,
   description-heavy card. That reads as an oversized box with the title
   and price centered on top of each other instead of a single compact
   row. Put it back to a left-to-right row: checkbox, title/description,
   price - matching the rest of the cart's addon/option rows. */
.domain-info-addons:not(.domain-info-addons-extended) .panel-check .check>label {
    flex-direction: row;
    align-items: center;
    padding: 0;
}

.domain-info-addons:not(.domain-info-addons-extended) .panel-check .check-subtitle {
    margin-left: 0;
}


#paymentGatewaysContainer .check-icon {
    max-width: 113px;
    margin-left: 16px !important;
}

.label-info {
    background-color: #e8dff6 !important;
    color: #5e3add !important;
}