@font-face {
    font-family: "Vazirmatn";
    src: url("/templates/lagom2/assets/fonts/Vazirmatn-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap
}

body {
    text-align: right
}

:root {
    --simba-ui-font: "Vazirmatn",Tahoma,"Segoe UI Variable","Segoe UI",Roboto,Arial,sans-serif;
    --simba-brand: #096fc7;
    --simba-brand-hover: #075da8;
    --simba-navy: #071a35;
    --simba-surface: #fff;
    --simba-surface-soft: #f5f8fc;
    --simba-border: #dfe7f1;
    --simba-copy: #526176;
    --simba-success: #24b47e
}

@media (max-width: 767px) {
    .app-nav-toggle.navbar-toggle {
        min-width: 44px;
        width: 44px;
        min-height: 44px;
        height: 44px;
        display: inline-flex!important;
        align-items: center;
        justify-content: center;
        padding: 0!important
    }
}

.btn,.form-control,.lagom,.mg-wrapper,.mg-wrapper .tpx-select2-container,.modal,.site,.tooltip,.usage-dial,body,button,input,select,textarea {
    font-family: var(--simba-ui-font)!important;
    font-feature-settings: "kern" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

ul.top-nav #languageChooserContent {
    left: 8px;
    right: auto!important
}

.annoucements .announcement-title:before {
    margin-left: 12px;
    margin-right: 0!important
}

@media (min-width: 768px) {
    .col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9 {
        float:right!important
    }
}

.client-alerts {
    margin-right: -160px;
    margin-left: auto!important
}

.promo-slider-more>i {
    margin-left: 8px;
    margin-right: auto!important
}

.site .check-features .lm-check {
    margin-left: 16px;
    margin-right: auto!important;
    float: right
}

.site .banner-graphic .promo-slider-icon {
    left: -152px;
    right: auto!important
}

.site .banner-actions .btn+.btn {
    margin-right: 16px;
    margin-left: auto!important
}

.site .feature-left .feature-icon {
    margin: 0 0 0 24px!important
}

.site .slider-actions {
    direction: ltr
}

.alert-body,.site .cycle-switcher .btn-group .cycle-change.active {
    float: right
}

.site .browser-lg .browser-actions {
    margin-left: 10px;
    margin-right: auto!important
}

.site .browser-lg .browser-searchbar {
    padding-right: 10px;
    padding-left: auto!important
}

.package-actions>*+:not(.package-learn-more) {
    margin-right: 16px;
    margin-left: auto!important
}

.site .package-slider-summary-item:not(:last-of-type):after {
    left: 0;
    right: auto!important
}

.site .package-slider-summary-item {
    margin-left: 24px;
    margin-right: auto!important
}

.store-actions .btn+.btn {
    margin-right: 16px;
    margin-left: auto!important
}

.page-clientareahome .client-home-alerts .alert-actions {
    left: 16px;
    right: auto!important
}

.alert .alert-icon+.alert-body {
    padding-right: 24px;
    padding-left: 0!important
}

#tableDomainsList .ssl-info>* {
    margin-left: 5px;
    margin-right: auto!important
}

.m-l-8 {
    margin-right: 8px;
    margin-left: 0!important
}

.m-r-8 {
    margin-left: 8px!important;
    margin-right: 0!important
}

.site .news-box .news-desc {
    padding: 0 24px 20px 0!important
}

.site .news-box .news-date {
    padding-right: 24px;
    padding-left: auto!important
}

.site .news-box .news-date i {
    margin-left: 12px;
    margin-right: auto!important
}

.site .testimonials-avatar {
    margin-left: 32px;
    margin-right: 0!important
}

.site .m-w-md {
    direction: ltr;
    text-align: right
}

@media (min-width: 992px) {
    .lagom-layout-left-wide .app-nav .navbar-main .navbar-nav>li .dropdown-menu>li {
        padding-right:7px;
        padding-left: 0!important
    }
}

.site .site-subnav .nav li {
    margin-left: 45px;
    margin-right: 0!important
}

.nav {
    padding-right: 0!important
}

.site .section-desc .check-list li .lm-check {
    right: 0;
    left: auto!important
}

.site .section-desc .check-list li {
    padding-right: 40px;
    padding-left: 0!important
}

@media (min-width: 768px) {
    .site .section-graphic-right {
        padding-right:64px;
        padding-left: 0!important
    }

    .site .section-graphic:not(.section-graphic-right) {
        padding-left: 64px;
        padding-right: 0!important
    }
}

.package-horizontal .package-footer .package-price {
    text-align: right
}

.site .package-slider-actions form+form {
    margin-right: 15px;
    margin-left: 0!important
}

.store-choose-domain .domain-validation>i {
    margin-left: 16px;
    margin-right: 0!important;
    float: right
}

.btn i.ls-caret {
    margin: 0 6px 0-6px
}

.selectize-control.form-control .selectize-input:before {
    left: 7px;
    right: auto!important
}

.selectize-control.form-control .selectize-input.items>div .remove:before {
    right: 5px;
    left: 0!important
}

.selectize-control.form-control.custom-multiselect .selectize-input {
    padding: 8px 16px 4px 28px
}

.annoucements {
    direction: ltr
}

.annoucements .announcement-title {
    direction: rtl
}

.annoucements .announcement-details {
    margin-left: auto;
    margin-right: 0!important
}

.dropdown-header--account .client-avatar {
    margin-left: var(--spacing-2x)
}

.password-content .progress {
    margin: 0 12px 0 0
}

.lagom-layout-condensed .top-nav .dropdown-menu {
    left: 0!important;
    right: auto!important
}

.dropdown-menu .dropdown-menu-item a,.dropdown-menu>li>a {
    white-space: normal
}

@media (max-width: 991.98px) {
    .app-nav-menu .menu>li>a:not(.btn)>svg {
        margin-left:var(--ui-nav-link-icon-spacing-lg)
    }
}

.dropdown-menu-right {
    right: auto;
    left: 0
}

.label.pull-right.float-right {
    float: left!important
}

.table-top [data-inactive-services] .switch {
    margin-left: initial;
    margin-right: var(--spacing-1x)
}

.table-masspay .masspay-title>i,ul.top-nav>li:not(.nav-item-icon-only)>a>i:not(.ls-caret) {
    margin-right: initial;
    margin-left: var(--spacing-1x)
}

.client-alerts-header {
    text-align: right
}

#order-standard_cart .prepend-icon .field {
    padding-left: initial;
    padding-right: 36px
}

.btn .fa,.btn .fas,.btn .lm,.btn .ls,.btn i,input[type=button]:not(.btn) .fa,input[type=button]:not(.btn) .fas,input[type=button]:not(.btn) .lm,input[type=button]:not(.btn) .ls,input[type=button]:not(.btn) i,input[type=submit]:not(.btn) .fa,input[type=submit]:not(.btn) .fas,input[type=submit]:not(.btn) .lm,input[type=submit]:not(.btn) .ls,input[type=submit]:not(.btn) i {
    margin-left: initial;
    margin-right: var(--btn-base-icon-spacing)
}

#order-standard_cart label,#order-standard_cart p.domain-renewal-desc,.service-renewals .div-renewal-period-label {
    margin-left: initial;
    margin-right: 10px
}

/* SimbaServer product-list experience */
.page-products .main-header {
    height: auto;
    padding-block: 32px;
    border-bottom: 1px solid #e8eef5;
    background: linear-gradient(135deg,#f7fbff 0%,#f3f6fa 100%)
}

.page-products .main-header-title {
    letter-spacing: -.02em
}

.page-products .simba-store-v2 {
    display: block;
    width: 100%;
    max-width: 1240px;
    margin-inline: auto
}

.page-products .simba-store-v2>.main-sidebar,
.page-products .simba-store-v2 .categories-collapsed {
    display: none!important
}

.page-products .simba-store-v2>.main-content {
    width: 100%!important;
    max-width: none!important;
    min-width: 0;
    flex-basis: 100%!important
}

.simba-store-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr);
    align-items: stretch;
    gap: 18px;
    margin: 0 0 22px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid #d8e5f0;
    border-radius: 18px;
    background: linear-gradient(135deg,#071a35 0%,#0a315f 62%,#0d426f 100%);
    box-shadow: 0 18px 48px rgba(10,42,77,.16)
}

.simba-store-hero:after {
    position: absolute;
    inset-inline-start: 26px;
    inset-block: 20px;
    width: 1px;
    content: "";
    background: rgba(255,255,255,.16)
}

.simba-store-hero-copy {
    position: relative;
    z-index: 1;
    min-width: 0
}

.simba-store-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    color: #dcecff;
    background: rgba(255,255,255,.08);
    font-size: 12px;
    font-weight: 800
}

.simba-store-eyebrow:before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    content: "";
    background: #24b47e;
    box-shadow: 0 0 0 4px rgba(36,180,126,.14)
}

.simba-store-hero h2 {
    max-width: 650px;
    margin: 0;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.55
}

.simba-store-hero p {
    max-width: 680px;
    margin: 10px 0 0;
    color: #bfd0e3;
    font-size: 15px;
    line-height: 2
}

.simba-store-proof {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px
}

.simba-store-proof span {
    min-width: 0;
    min-height: 86px;
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 13px;
    background: rgba(255,255,255,.075)
}

.simba-store-proof strong {
    color: #fff;
    font-size: 14px;
    font-weight: 900
}

.simba-store-proof small {
    color: #a9bfd8;
    font-size: 12px;
    line-height: 1.6
}

.simba-store-route {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
    margin-top: 3px
}

.simba-store-route span {
    min-width: 0;
    display: grid;
    gap: 2px;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px;
    background: rgba(4,15,31,.22)
}

.simba-store-route small {
    color: #91a7c1;
    font-size: 11px;
    font-weight: 800
}

.simba-store-route strong {
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.6;
    text-overflow: ellipsis;
    white-space: nowrap
}

.simba-service-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    padding: 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    border: 1px solid #e3eaf2;
    border-radius: 14px;
    background: #fff
}

.simba-service-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 9px 17px;
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #40566f;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    text-decoration: none!important;
    transition: color .18s ease,background-color .18s ease,border-color .18s ease
}

.simba-service-tab:hover {
    color: #0b4f92;
    background: #f4f8fc
}

.simba-service-tab.is-active {
    color: #073d73;
    border-color: #c9def3;
    background: #eaf4ff
}

.simba-service-tab:focus-visible,
.simba-plan-card .btn-order-now:focus-visible {
    outline: 3px solid rgba(10,111,219,.28);
    outline-offset: 2px
}

.simba-plans-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 18px
}

.simba-plans-heading h2 {
    margin: 3px 0 0;
    color: #102a43;
    font-size: 24px;
    line-height: 1.45
}

.simba-plans-eyebrow {
    color: #54728f;
    font-size: 13px;
    font-weight: 600
}

.simba-plans-count {
    padding: 7px 11px;
    white-space: nowrap;
    border: 1px solid #dfe8f1;
    border-radius: 999px;
    color: #425f79;
    background: #f8fafc;
    font-size: 13px;
    font-variant-numeric: tabular-nums
}

.simba-plans-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px
}

.simba-dataforest-store .simba-billing-switch {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    min-width: 0;
    padding: 3px;
    border: 1px solid #dce6ef;
    border-radius: 11px;
    background: #f5f8fb
}

.simba-dataforest-store .simba-billing-switch button {
    min-width: 86px;
    min-height: 44px;
    padding: 7px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #4a647c;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    transition: color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease
}

.simba-dataforest-store .simba-billing-switch button:hover {
    color: #164f7e;
    background: #edf4fa
}

.simba-dataforest-store .simba-billing-switch button.is-active {
    color: #fff;
    border-color: #126ab0;
    background: #126ab0;
    box-shadow: 0 4px 12px rgba(18,106,176,.18)
}

.simba-dataforest-store .simba-billing-switch button:focus-visible {
    outline: 3px solid rgba(10,111,219,.28);
    outline-offset: 2px
}

.simba-dataforest-store .simba-plan-item[hidden] {
    display: none!important
}

.simba-dataforest-store .simba-hourly-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 3px;
    color: #6b7f93;
    font-size: 13px
}

.simba-dataforest-store .simba-hourly-price strong {
    color: #0b2f55;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
    font-variant-numeric: tabular-nums
}

.simba-dataforest-store .simba-hourly-price small {
    width: 100%;
    margin-top: 4px;
    color: #6b7f93;
    font-size: 12px
}

.simba-dataforest-store .simba-hourly-note {
    margin: -4px 0 18px;
    padding: 11px 14px;
    border: 1px solid #dbe7f1;
    border-radius: 11px;
    color: #3e5b73;
    background: #f7fafc;
    font-size: 13px;
    line-height: 1.75
}

.simba-dataforest-store .simba-hourly-note[hidden] {
    display: none!important
}

.page-products .simba-store-v2 .section.products {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 18px;
    width: 100%;
    height: auto;
    margin: 0
}

.page-products .simba-store-v2 .section.products>.row {
    display: contents!important
}

.page-products .simba-store-v2 .section.products>.row>.simba-plan-item {
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
    float: none!important
}

.simba-plan-card.package {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 445px;
    margin: 0;
    padding: 24px;
    overflow: hidden;
    border: 1px solid #e2e9f1;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(18,50,78,.06);
    transition: border-color .2s ease,box-shadow .2s ease,transform .2s ease
}

.simba-plan-card.package:hover {
    border-color: #bed7ef;
    box-shadow: 0 16px 36px rgba(18,50,78,.1);
    transform: translateY(-2px)
}

.simba-plan-card.package-featured {
    border-color: #8fc1ef;
    box-shadow: 0 14px 34px rgba(18,96,164,.12)
}

.simba-plan-card .package-side-left {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0
}

.simba-plan-card .package-header {
    height: auto;
    min-height: 0;
    padding: 0 0 16px;
    border-bottom: 1px solid #edf1f5;
    text-align: right
}

.simba-plan-card .package-title {
    min-height: 49px;
    margin: 0 0 10px;
    color: #102a43;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45
}

.simba-plan-card .package-header .package-price {
    margin: 0
}

.simba-plan-card .price-amount {
    color: #0b2f55;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
    font-variant-numeric: tabular-nums
}

.simba-plan-card .price-cycle {
    margin-top: 4px;
    color: #6b7f93;
    font-size: 12px
}

.simba-plan-card .package-body {
    display: block;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    margin: 15px 0 0;
    padding: 0
}

.simba-plan-card .package-content {
    height: auto;
    min-height: 0;
    color: #42566a;
    font-size: 15px;
    line-height: 1.75;
    text-align: right
}

.simba-plan-summary {
    display: -webkit-box;
    min-height: 51px;
    margin: 0 0 13px;
    overflow: hidden;
    color: #53697e;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.simba-plan-specs {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none
}

.simba-plan-specs li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
    padding: 5px 0;
    border-bottom: 1px dashed #e5ebf1;
    color: #607488;
    font-size: 13.5px
}

.simba-plan-specs li:last-child {
    border-bottom: 0
}

.simba-plan-specs strong {
    color: #173a5e;
    font-weight: 700;
    text-align: left;
    font-variant-numeric: tabular-nums
}

.simba-plan-specs .simba-spec-benefit {
    position: relative;
    justify-content: flex-start;
    padding-right: 20px;
    color: #425d75
}

.simba-plan-specs .simba-spec-benefit:before {
    position: absolute;
    right: 1px;
    top: 50%;
    width: 8px;
    height: 5px;
    content: '';
    border-right: 2px solid #25835e;
    border-bottom: 2px solid #25835e;
    transform: translateY(-62%) rotate(45deg)
}

.simba-plan-card .package-footer {
    width: 100%;
    height: auto;
    margin-top: auto;
    padding: 17px 0 0
}

.simba-plan-card .package-footer .package-price {
    display: none!important
}

.simba-plan-card .btn-order-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0!important;
    min-height: 48px;
    padding: 11px 16px;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: none
}

.simba-store-deep-info {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
    margin: 28px 0 0
}

.simba-store-info-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid #e1e9f2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(18,50,78,.05)
}

.simba-store-info-card span {
    display: inline-flex;
    margin-bottom: 9px;
    color: #b45309;
    font-size: 12px;
    font-weight: 900
}

.simba-store-info-card h3 {
    margin: 0;
    color: #102a43;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.65
}

.simba-store-info-card p {
    margin: 7px 0 0;
    color: #5c7187;
    font-size: 14px;
    line-height: 2
}

.simba-store-assurances {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    margin: 28px 0 0;
    padding: 16px;
    border: 1px solid #e3eaf1;
    border-radius: 16px;
    background: #f8fbfd
}

.simba-assurance {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 7px 8px
}

.simba-assurance>svg {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    color: #1d5b91
}

.simba-assurance>span {
    display: grid;
    gap: 2px;
    min-width: 0
}

.simba-assurance strong {
    color: #183c5d;
    font-size: 14px
}

.simba-assurance small {
    color: #6a7f92;
    font-size: 12px
}

@media (max-width:1199.98px) {
    .page-products .simba-store-v2 .section.products {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .simba-plan-card.package {
        min-height: 420px
    }

    .simba-store-hero {
        grid-template-columns:1fr
    }

    .simba-store-proof {
        grid-template-columns:repeat(4,minmax(0,1fr))
    }

    .simba-store-route {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

@media (max-width:767.98px) {
    .page-products .main-header {
        padding-block:24px
    }

    .page-products .main-header-title {
        font-size:28px;
        line-height:1.45
    }

    .simba-service-tabs {
        margin-bottom:18px;
        padding:4px
    }

    .simba-service-tab {
        min-height:44px;
        padding-inline:14px;
        font-size:13.5px
    }

    .simba-store-hero {
        margin-bottom:18px;
        padding:20px;
        border-radius:16px
    }

    .simba-store-hero:after {
        display:none
    }

    .simba-store-hero h2 {
        font-size:23px
    }

    .simba-store-hero p {
        font-size:14px;
        line-height:1.9
    }

    .simba-store-proof {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px
    }

    .simba-store-proof span {
        min-height:78px;
        padding:12px
    }

    .simba-store-proof strong {
        font-size:13px
    }

    .simba-store-proof small {
        font-size:11px
    }

    .simba-store-route {
        grid-template-columns:1fr;
        gap:7px
    }

    .simba-store-route span {
        padding:11px 12px
    }

    .simba-plans-heading {
        align-items:flex-start;
        flex-wrap:wrap;
        margin-bottom:14px
    }

    .simba-plans-tools {
        width:100%;
        justify-content:space-between
    }

    .simba-dataforest-store .simba-billing-switch {
        flex:1 1 auto
    }

    .simba-dataforest-store .simba-billing-switch button {
        width:100%;
        min-width:0;
        min-height:44px
    }

    .simba-plans-heading h2 {
        font-size:20px
    }

    .simba-plans-eyebrow {
        display:none
    }

    .page-products .simba-store-v2 .section.products {
        grid-template-columns:1fr;
        gap:14px
    }

    .simba-plan-card.package {
        min-height:0;
        padding:20px;
        border-radius:15px
    }

    .simba-plan-card .package-title {
        min-height:0;
        font-size:18px
    }

    .simba-plan-card .price-amount {
        font-size:27px
    }

    .simba-plan-card .package-content,
    .simba-plan-card .btn-order-now {
        font-size:16px
    }

    .simba-plan-summary {
        min-height:0;
        -webkit-line-clamp:3
    }

    .simba-plan-specs li {
        min-height:35px;
        font-size:14px
    }

    .simba-store-assurances {
        display:flex;
        gap:8px;
        padding:10px;
        overflow-x:auto;
        scrollbar-width:thin
    }

    .simba-assurance {
        min-width:190px;
        flex:0 0 190px
    }

    .simba-store-deep-info {
        grid-template-columns:1fr;
        gap:10px;
        margin-top:22px
    }

    .simba-store-info-card {
        padding:17px;
        border-radius:14px
    }
}

@media (prefers-reduced-motion:reduce) {
    .simba-service-tab,
    .simba-plan-card.package,
    .simba-dataforest-store .simba-billing-switch button {
        transition:none
    }

    .simba-plan-card.package:hover {
        transform:none
    }
}

#order-standard_cart .prepend-icon .field-icon {
    line-height: 47px
}

select.form-control {
    padding-inline-end:24px;padding-right: 11px
}

select.form-control,select.form-control:hover {
    background-position: center left 11px
}

.panel-switch .panel-body .switch-label {
    text-align: right;
    padding-left: initial;
    padding-right: var(--ui-block-padding-base);
    display: flex;
    gap: 1em;
    align-items: center
}

.intl-tel-input.separate-dial-code .selected-dial-code {
    direction: ltr
}

.btn .fa,.btn .fas,.btn .lm,.btn .ls,.btn i,input[type=button]:not(.btn) .fa,input[type=button]:not(.btn) .fas,input[type=button]:not(.btn) .lm,input[type=button]:not(.btn) .ls,input[type=button]:not(.btn) i,input[type=submit]:not(.btn) .fa,input[type=submit]:not(.btn) .fas,input[type=submit]:not(.btn) .lm,input[type=submit]:not(.btn) .ls,input[type=submit]:not(.btn) i {
    margin-right: initial;
    margin-left: var(--btn-base-icon-spacing)
}

/* SimbaServer UI refresh — Phase 1 */
.lagom :where(a,button,input,select,textarea,.btn):focus-visible {
    outline: 3px solid rgba(9,111,199,.28);
    outline-offset: 2px
}

.lagom .form-control {
    border-color: var(--simba-border);
    transition: border-color .18s ease,box-shadow .18s ease,background-color .18s ease
}

.lagom .form-control:focus {
    border-color: var(--simba-brand);
    box-shadow: 0 0 0 3px rgba(9,111,199,.12)
}

.page-configureproduct .main-grid {
    align-items: flex-start;
    gap: 28px
}

.page-configureproduct .main-content>.section,
.page-configureproduct .main-content>#productAddonsContainer>.section {
    margin-bottom: 24px
}

.page-configureproduct .section-header {
    margin-bottom: 12px
}

.page-configureproduct .section-title {
    color: var(--simba-navy);
    font-size: 19px;
    font-weight: 850;
    letter-spacing: -.01em
}

.page-configureproduct .product-config-info {
    overflow: hidden;
    border: 1px solid rgba(9,111,199,.22);
    border-radius: 18px;
    background:
        radial-gradient(circle at 12% 18%,rgba(36,167,220,.15),transparent 34%),
        linear-gradient(135deg,#071a35 0%,#0b2e58 58%,#096fc7 145%);
    box-shadow: 0 18px 45px rgba(7,26,53,.14)
}

.page-configureproduct .product-config-info .panel-body {
    padding: 28px 30px
}

.page-configureproduct .product-config-info h2,
.page-configureproduct .product-config-info .product-info,
.page-configureproduct .product-config-info .product-info * {
    color: #fff
}

.page-configureproduct .product-config-info h2 {
    margin-bottom: 12px;
    font-size: clamp(22px,2.5vw,30px);
    font-weight: 900;
    line-height: 1.45
}

.page-configureproduct .product-config-info .product-info {
    max-width: 820px;
    color: #c9d8e8;
    font-size: 14.5px;
    line-height: 1.9
}

/* `.product-config-info` is excluded because it is ALSO a .panel-form, and this rule
   sits AFTER the dark-hero rule at identical (0,2,0) specificity - so it won on source
   order and painted the hero white, leaving its #fff title and #c9d8e8 body text at 1:1
   and 1.45:1. That hit every visitor on the configure step, signed in or not. */
.page-configureproduct .panel-form:not(.product-config-info),
.page-configureproduct .panel-check {
    border: 1px solid var(--simba-border);
    border-radius: 16px;
    background: var(--simba-surface);
    box-shadow: 0 10px 28px rgba(15,31,54,.055)
}

.page-configureproduct .panel-form .panel-body {
    padding: 24px
}

.page-configureproduct .form-group>label,
.page-configureproduct .control-label {
    margin-bottom: 8px;
    color: #173a5e;
    font-size: 13.5px;
    font-weight: 750
}

.page-configureproduct .form-control {
    min-height: 48px;
    border-radius: 11px;
    background-color: #fbfdff;
    color: #102a43
}

.page-configureproduct .help-block {
    margin-top: 8px;
    color: #6b7f93;
    font-size: 12.5px;
    line-height: 1.75
}

.page-configureproduct .simba-os-field {
    position: relative;
    padding: 18px;
    border: 1px solid rgba(9,111,199,.2);
    border-radius: 14px;
    background: linear-gradient(135deg,rgba(9,111,199,.055),rgba(36,167,220,.035))
}

.page-configureproduct .simba-os-field:before {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    margin-bottom: 10px;
    padding: 3px 9px;
    content: "تمپلت رسمی";
    border: 1px solid rgba(36,180,126,.24);
    border-radius: 999px;
    background: rgba(36,180,126,.09);
    color: #1b7955;
    font-size: 11px;
    font-weight: 800
}

.page-configureproduct .main-sidebar .panel-summary {
    overflow: hidden;
    border: 1px solid rgba(9,111,199,.2);
    border-top: 4px solid var(--simba-brand);
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(7,26,53,.1)
}

.page-configureproduct .main-sidebar .panel-summary .panel-heading {
    border-bottom: 1px solid var(--simba-border);
    background: linear-gradient(180deg,#fff,#f8fbff)
}

.page-configureproduct .main-sidebar .panel-summary .panel-title {
    color: var(--simba-navy);
    font-weight: 850
}

.page-configureproduct #containerProductValidationErrors {
    border-radius: 14px
}

.page-configureproduct .section-module-output:empty {
    display: none
}

.lagom-dark-mode {
    --simba-surface: #0c1d31;
    --simba-surface-soft: #071524;
    --simba-border: #203a55;
    --simba-copy: #a8b8ca
}

.lagom-dark-mode .simba-service-tab,
.lagom-dark-mode .simba-plan-card.package,
.lagom-dark-mode .simba-store-info-card,
.lagom-dark-mode .simba-assurance,
.lagom-dark-mode.page-configureproduct .panel-form,
.lagom-dark-mode.page-configureproduct .panel-check,
.lagom-dark-mode.page-configureproduct .main-sidebar .panel-summary {
    border-color: var(--simba-border);
    background: var(--simba-surface);
    color: #dbe6f2;
    box-shadow: 0 16px 38px rgba(0,0,0,.18)
}

.lagom-dark-mode .simba-service-tab,
.lagom-dark-mode .simba-plans-heading h2,
.lagom-dark-mode .simba-plan-card .package-title,
.lagom-dark-mode .simba-plan-card .price-amount,
.lagom-dark-mode .simba-plan-specs strong,
.lagom-dark-mode .simba-store-info-card h3,
.lagom-dark-mode.page-configureproduct .section-title,
.lagom-dark-mode.page-configureproduct .form-group>label,
.lagom-dark-mode.page-configureproduct .control-label,
.lagom-dark-mode.page-configureproduct .main-sidebar .panel-summary .panel-title {
    color: #f1f6fb
}

.lagom-dark-mode .simba-plan-card .package-header,
.lagom-dark-mode .simba-plan-specs li,
.lagom-dark-mode.page-configureproduct .main-sidebar .panel-summary .panel-heading {
    border-color: var(--simba-border)
}

.lagom-dark-mode .simba-plan-card .package-content,
.lagom-dark-mode .simba-plan-summary,
.lagom-dark-mode .simba-plan-specs li,
.lagom-dark-mode .simba-store-info-card p,
.lagom-dark-mode .simba-assurance p,
.lagom-dark-mode.page-configureproduct .help-block {
    color: #a8b8ca
}

.lagom-dark-mode.page-configureproduct .form-control {
    border-color: #294762;
    background-color: #0a192a;
    color: #f1f6fb
}

.lagom-dark-mode.page-configureproduct .simba-os-field {
    border-color: rgba(86,197,239,.24);
    background: rgba(9,111,199,.11)
}

@media (max-width:991.98px) {
    .page-configureproduct .main-grid {
        gap: 18px
    }

    .page-configureproduct .product-config-info .panel-body,
    .page-configureproduct .panel-form .panel-body {
        padding: 20px
    }
}

@media (max-width:575.98px) {
    .page-configureproduct .product-config-info {
        border-radius: 15px
    }

    .page-configureproduct .product-config-info .panel-body {
        padding: 21px 18px
    }

    .page-configureproduct .product-config-info h2 {
        font-size: 22px
    }

    .page-configureproduct .panel-form .panel-body {
        padding: 17px
    }
}

/* SimbaServer phase 2: shared header, auth and client-area shell */

/* ---------------------------------------------------------------------------
   1. Shell tokens
   Every surface colour below is a token so the dark-mode block only has to
   re-declare variables instead of restating each rule.
   --------------------------------------------------------------------------- */
:root {
    --simba-shell-bg: #f4f7fb;
    --simba-shell-panel: #fff;
    --simba-shell-panel-alt: #f9fbfe;
    --simba-shell-border: #dce6f1;
    --simba-shell-border-soft: #e7edf4;
    --simba-shell-muted: #64748b;
    --simba-shell-copy: #43536a;
    --simba-shell-title: #071a35;
    --simba-shell-blue: #0875d1;
    --simba-shell-blue-dark: #055da8;
    --simba-shell-blue-soft: #eaf4ff;
    --simba-shell-blue-line: #d8eaff;
    --simba-shell-cyan: #21b8e8;
    --simba-shell-hover: #f1f7ff;
    --simba-shell-thead: #f5f8fc;
    --simba-shell-row-hover: #f7fbff;
    --simba-shell-field: #fff;
    --simba-shell-field-border: #cfdae7;
    --simba-shell-radius: 18px;
    --simba-shell-radius-sm: 12px;
    --simba-shell-shadow: 0 14px 38px rgba(7, 26, 53, .08);
    --simba-shell-shadow-pop: 0 20px 46px rgba(7, 26, 53, .14);
    --simba-shell-focus: rgba(8, 117, 209, .38);
    --simba-shell-focus-dark: rgba(120, 205, 255, .75)
}

/* ---------------------------------------------------------------------------
   2. Focus visibility
   Phase 1 sets a low-alpha ring via `.lagom :where(...)`. That ring is close to
   invisible on the navy login background and on dark-mode panels, so both cases
   get a stronger, higher-contrast ring here. Nothing removes an outline.
   --------------------------------------------------------------------------- */
.page-user-logged :is(a, button, input, select, textarea, .btn, summary):focus-visible,
.page-login :is(a, button, input, select, textarea, .btn, summary):focus-visible {
    outline: 3px solid var(--simba-shell-focus);
    outline-offset: 2px
}

.page-login :is(a, button, input, select, textarea, .btn):focus-visible,
.lagom-dark-mode.page-user-logged :is(a, button, input, select, textarea, .btn):focus-visible,
.page-user-logged .app-nav-menu .menu > li.active > a:focus-visible,
.page-user-logged .btn-primary:focus-visible,
.page-user-logged .tile:focus-visible {
    outline-color: var(--simba-shell-focus-dark)
}

.page-user-logged .tile:focus-visible {
    outline-offset: 3px
}

/* ---------------------------------------------------------------------------
   3. Public header
   `:not(.page-user-logged)` is required: `.lagom-not-portal:not(.page-login)`
   scores (0,3,0) and would otherwise outrank `.page-user-logged .app-nav`
   (0,2,0) and repaint the client-area sidebar with public-header styling.
   --------------------------------------------------------------------------- */
.lagom-not-portal:not(.page-login):not(.page-user-logged) .app-nav {
    border-bottom: 1px solid rgba(7, 26, 53, .08);
    background: #fff;
    box-shadow: 0 10px 30px rgba(7, 26, 53, .06)
}

.lagom-not-portal:not(.page-login):not(.page-user-logged) .app-nav-header {
    border-bottom: 1px solid #edf2f7;
    background: #f8fafc
}

.lagom-not-portal:not(.page-login):not(.page-user-logged) .app-nav-menu {
    background: #fff
}

.lagom-not-portal:not(.page-login):not(.page-user-logged) .app-nav-menu .logo-img {
    max-width: 188px;
    height: auto
}

.lagom-not-portal:not(.page-login):not(.page-user-logged) .app-nav-menu .menu > li > a:not(.btn) {
    min-height: 44px;
    padding-inline: 14px;
    border-radius: 11px;
    color: #26384f;
    font-weight: 700;
    transition: color .18s ease, background-color .18s ease
}

.lagom-not-portal:not(.page-login):not(.page-user-logged) .app-nav-menu .menu > li > a:not(.btn):hover,
.lagom-not-portal:not(.page-login):not(.page-user-logged) .app-nav-menu .menu > li.active > a:not(.btn) {
    color: var(--simba-shell-blue);
    background: var(--simba-shell-blue-soft)
}

.lagom-not-portal:not(.page-login):not(.page-user-logged) .top-nav > li > a,
.lagom-not-portal:not(.page-login):not(.page-user-logged) .top-nav > li > label {
    min-height: 42px;
    border-radius: 10px
}

.lagom-not-portal:not(.page-login):not(.page-user-logged) .app-nav .dropdown-menu {
    padding: 8px;
    border: 1px solid var(--simba-shell-border);
    border-radius: 16px;
    background: var(--simba-shell-panel);
    box-shadow: var(--simba-shell-shadow-pop)
}

.lagom-not-portal:not(.page-login):not(.page-user-logged) .app-nav .dropdown-menu a {
    min-height: 40px;
    border-radius: 10px
}

.lagom-not-portal:not(.page-login):not(.page-user-logged) .app-nav .nav-item-login > a,
.lagom-not-portal:not(.page-login):not(.page-user-logged) .app-nav .nav-item-register > a {
    min-height: 44px;
    padding-inline: 18px;
    border-radius: 11px;
    font-weight: 700
}

.lagom-not-portal:not(.page-login):not(.page-user-logged) .app-nav .nav-item-login > a {
    color: #fff;
    background: linear-gradient(135deg, var(--simba-shell-blue), #1269d8);
    box-shadow: 0 9px 20px rgba(8, 117, 209, .2)
}

/* ---------------------------------------------------------------------------
   4. Logged-in client shell
   --------------------------------------------------------------------------- */
.page-user-logged {
    color: #26384f;
    background: var(--simba-shell-bg)
}

/* `border-inline-end` is the inner edge of the rail in both directions:
   RTL rail sits right (inner edge left), LTR rail sits left (inner edge right).
   The shadow is non-directional so it stays correct when the sheet is reused
   on an LTR language. */
.page-user-logged .app-nav {
    border-inline-end: 1px solid var(--simba-shell-border);
    background: var(--simba-shell-panel);
    box-shadow: 0 0 34px rgba(7, 26, 53, .07)
}

.page-user-logged .app-nav-header {
    min-height: 88px;
    border-bottom: 1px solid var(--simba-shell-border-soft);
    background: var(--simba-shell-panel)
}

.page-user-logged .app-nav-header .logo-img,
.page-user-logged .app-nav .logo-img {
    max-width: 178px;
    height: auto
}

.page-user-logged .app-nav-menu {
    padding: 16px 12px 26px
}

.page-user-logged .app-nav-menu .menu > li {
    margin-block: 3px
}

.page-user-logged .app-nav-menu .menu > li > a:not(.btn) {
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid transparent;
    border-radius: var(--simba-shell-radius-sm);
    color: var(--simba-shell-copy);
    font-weight: 700;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease
}

.page-user-logged .app-nav-menu .menu > li > a:not(.btn):hover {
    color: var(--simba-shell-blue);
    border-color: var(--simba-shell-blue-line);
    background: var(--simba-shell-hover)
}

/* An expanded parent (`.open`) is a disclosure state, not the current page, so
   it gets the soft treatment and only `.active` gets the solid fill. */
.page-user-logged .app-nav-menu .menu > li.open > a:not(.btn) {
    color: var(--simba-shell-blue);
    border-color: var(--simba-shell-blue-line);
    background: var(--simba-shell-hover)
}

/* Hovering the current page used to paint brand blue onto the blue pill
   (simba-ui-r34-activehover). Lagom ships
     .lagom-layout-top .app-nav-menu .menu > li.active > a:hover:not(.btn)
   at specificity (0,6,2), setting the label to
   --app-nav-top-menu-link-hover-color (#065CFE) and setting no background. The
   rule here was (0,5,2), so Lagom took the white label away while our blue
   fill stayed put - blue text on a blue pill. Carrying `:hover` in the
   selector list lifts this to the same (0,6,2), and theme-custom.css loads
   after theme-rtl.css, so the tie goes to us. Do not drop the `:hover`
   duplicate thinking it is redundant - it is the whole fix. */
.page-user-logged .app-nav-menu .menu > li.active > a:not(.btn),
.page-user-logged .app-nav-menu .menu > li.active > a:not(.btn):hover {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #086fc8, #1269d8);
    box-shadow: 0 9px 22px rgba(8, 117, 209, .18)
}

/* The current page still has to feel pressable, so the fill deepens rather
   than the label changing colour. */
.page-user-logged .app-nav-menu .menu > li.active > a:not(.btn):hover {
    background: linear-gradient(135deg, #0763b3, #0f5cc2);
    box-shadow: 0 11px 24px rgba(8, 117, 209, .26)
}

.page-user-logged .app-nav-menu .dropdown-menu {
    margin-block: 6px 10px;
    padding: 6px;
    border: 1px solid var(--simba-shell-border-soft);
    border-radius: var(--simba-shell-radius-sm);
    background: var(--simba-shell-panel-alt)
}

.page-user-logged .app-nav-menu .dropdown-menu a {
    min-height: 39px;
    border-radius: 9px;
    color: #53647b
}

/* Sticky utility bar. No backdrop-filter: it creates a containing block for
   fixed-position descendants and a new stacking context, which traps Lagom and
   third-party module dropdowns. An opaque background gives the same result. */
.page-user-logged .main-top {
    position: sticky;
    top: 0;
    z-index: 15;
    min-height: 58px;
    padding-block: 6px;
    border-bottom: 1px solid rgba(7, 26, 53, .09);
    background: var(--simba-shell-panel);
    box-shadow: 0 8px 26px rgba(7, 26, 53, .04)
}

.page-user-logged .main-top .top-nav > li > a,
.page-user-logged .main-top .top-nav > li > label {
    min-height: 44px;
    border-radius: 11px
}

.page-user-logged .main-header {
    height: auto;
    min-height: 126px;
    padding-block: 34px 24px;
    border-bottom: 1px solid var(--simba-shell-border);
    background:
        radial-gradient(circle at 15% 10%, rgba(33, 184, 232, .12), transparent 28%),
        linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%)
}

/* No negative letter-spacing: it degrades Arabic-script joining and
   diacritic placement in Persian. */
.page-user-logged .main-header-title,
.page-user-logged .main-header h1 {
    color: var(--simba-shell-title);
    letter-spacing: 0;
    font-weight: 800
}

.page-user-logged .main-header .breadcrumb {
    color: var(--simba-shell-muted)
}

.page-user-logged .main-body {
    padding-block: 30px 44px;
    background: var(--simba-shell-bg)
}

.page-user-logged .main-body > .container {
    max-width: 1240px
}

.page-user-logged .main-grid {
    gap: 24px
}

/* ---------------------------------------------------------------------------
   5. Panels, tables, tiles
   `overflow: hidden` is deliberately NOT used on panels, tables or alerts.
   It clips row-action dropdowns, selectize/select2 menus, tooltips and date
   pickers that WHMCS and its modules open from inside these containers.
   Corner rounding is achieved by rounding the first/last child instead.
   --------------------------------------------------------------------------- */
.page-user-logged .panel:not(.product-config-info),
.page-user-logged .tile,
.page-user-logged .table-container,
.page-user-logged .client-home-alerts .alert {
    border-color: var(--simba-shell-border);
    background: var(--simba-shell-panel);
    box-shadow: var(--simba-shell-shadow)
}

.page-user-logged .panel {
    border-radius: var(--simba-shell-radius)
}

.page-user-logged .panel-heading {
    min-height: 58px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--simba-shell-border-soft);
    background: var(--simba-shell-panel-alt)
}

.page-user-logged .panel > .panel-heading:first-child {
    border-top-left-radius: var(--simba-shell-radius);
    border-top-right-radius: var(--simba-shell-radius)
}

.page-user-logged .panel-title {
    color: var(--simba-shell-title);
    font-weight: 800
}

.page-user-logged .panel-body {
    padding: 20px
}

.page-user-logged .panel-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--simba-shell-border-soft);
    background: var(--simba-shell-panel-alt)
}

.page-user-logged .panel > .panel-footer:last-child {
    border-bottom-left-radius: var(--simba-shell-radius);
    border-bottom-right-radius: var(--simba-shell-radius)
}

.page-user-logged .tiles {
    margin-bottom: 24px
}

.page-user-logged .tile {
    min-height: 150px;
    padding: 20px;
    border-width: 1px;
    border-radius: 17px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease
}

.page-user-logged .tile:hover {
    transform: translateY(-3px);
    border-color: #9dcdf8;
    box-shadow: 0 20px 40px rgba(7, 26, 53, .12)
}

.page-user-logged .tile-icon,
.page-user-logged .tile-icon-absolute {
    color: var(--simba-shell-blue)
}

.page-user-logged .tile-stat {
    color: var(--simba-shell-title);
    font-weight: 800
}

.page-user-logged .tile-title {
    color: var(--simba-shell-muted);
    font-weight: 600
}

.page-user-logged .client-home-alerts .alert,
.page-user-logged .alert-lagom {
    padding: 18px 20px;
    border-radius: 15px
}

.page-user-logged .table-container {
    padding: 18px;
    border: 1px solid var(--simba-shell-border);
    border-radius: var(--simba-shell-radius)
}

.page-user-logged .table-top {
    margin-bottom: 14px
}

.page-user-logged .table-list {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0
}

.page-user-logged .table-list thead th {
    padding-block: 14px;
    border-bottom: 1px solid var(--simba-shell-border);
    color: var(--simba-shell-copy);
    background: var(--simba-shell-thead);
    font-weight: 700
}

.page-user-logged .table-list tbody td {
    padding-block: 15px;
    border-bottom-color: var(--simba-shell-border-soft)
}

.page-user-logged .table-list tbody tr:hover td {
    background: var(--simba-shell-row-hover)
}

/* Explicit status classes only. The previous `[class*="status-"]` substring
   match also caught wrappers such as `.invoice-status-block`, turning full
   containers into pills. */
.page-user-logged .label,
.page-user-logged .badge,
.page-user-logged .status,
.page-user-logged .tag {
    border-radius: 999px;
    font-weight: 700
}

.page-user-logged .form-control,
.page-user-logged .selectize-input {
    min-height: 46px;
    border-color: var(--simba-shell-field-border);
    border-radius: 11px;
    background-color: var(--simba-shell-field);
    transition: border-color .18s ease, box-shadow .18s ease
}

.page-user-logged .form-control:focus,
.page-user-logged .selectize-input.focus {
    border-color: #7bbbf1;
    box-shadow: 0 0 0 4px rgba(8, 117, 209, .1)
}

.page-user-logged .btn {
    min-height: 44px;
    border-radius: 11px;
    font-weight: 700
}

.page-user-logged .btn-primary {
    border-color: transparent;
    background: linear-gradient(135deg, var(--simba-shell-blue), #1269d8);
    box-shadow: 0 9px 20px rgba(8, 117, 209, .16)
}

.page-user-logged .btn-primary:hover,
.page-user-logged .btn-primary:focus {
    background: linear-gradient(135deg, var(--simba-shell-blue-dark), #075cbf)
}

.page-user-logged .main-footer {
    border-top: 1px solid var(--simba-shell-border);
    background: var(--simba-shell-panel)
}

/* ---------------------------------------------------------------------------
   6. Dashboard layout
   Content takes the leading column (right in RTL, left in LTR) so the reading
   order starts with the account's own data; the summary takes the trailing
   column, away from the fixed navigation rail. Swap the two `grid-column`
   values below to reverse this.
   --------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .page-clientareahome.page-user-logged .main-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
        align-items: start;
        gap: 24px
    }

    .page-clientareahome.page-user-logged .main-content {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        width: auto !important;
        margin: 0 !important
    }

    .page-clientareahome.page-user-logged .main-sidebar {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        width: auto !important;
        margin: 0 !important
    }
}

/* Two-column tile grid between 992px and 1599px. Swiper writes inline
   `transform`, `width` and `transition` on the wrapper and slides, so these
   overrides need `!important` to win. `height: auto` and `overflow: visible`
   are what stop the second row being clipped by the carousel viewport. */
@media (min-width: 992px) and (max-width: 1599.98px) {
    .page-clientareahome.page-user-logged .main-content .tiles.swiper,
    .page-clientareahome.page-user-logged .main-content .tiles.swiper-container,
    .page-clientareahome.page-user-logged .main-content .tiles .swiper,
    .page-clientareahome.page-user-logged .main-content .tiles .swiper-container {
        overflow: visible !important
    }

    .page-clientareahome.page-user-logged .main-content .tiles .swiper-wrapper {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--simba-tile-gap);
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        transform: none !important;
        transition: none !important
    }

    .page-clientareahome.page-user-logged .main-content .tiles .swiper-slide {
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important
    }

    /* Carousel affordances only. Every tile is visible in the grid, so no
       account action is hidden by these two rules. */
    .page-clientareahome.page-user-logged .main-content .tiles .swiper-pagination,
    .page-clientareahome.page-user-logged .main-content .tiles .swiper-button-next,
    .page-clientareahome.page-user-logged .main-content .tiles .swiper-button-prev {
        display: none !important
    }
}

/* ---------------------------------------------------------------------------
   7. Authentication screens
   --------------------------------------------------------------------------- */
.page-login {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at 18% 16%, rgba(33, 184, 232, .22), transparent 30%),
        radial-gradient(circle at 86% 86%, rgba(8, 117, 209, .2), transparent 34%),
        linear-gradient(145deg, #06172f 0%, #092854 100%);
    background-attachment: fixed
}

.page-login .app-main {
    min-height: 100vh;
    min-height: 100dvh;
    padding-block: 32px;
    background: transparent
}

.page-login .login {
    width: min(100%, 460px)
}

.page-login .login-header {
    margin-bottom: 20px
}

/* simba-ui-r48-loginlogo / r49-logoartwork
   The logo Lagom serves on light chrome (logo_big.png) is 512x116 with ZERO
   transparency - measured: 75% of its pixels are opaque white - so on this dark
   screen it rendered as a white slab around the mark. No CSS can lift that; the
   white is in the file.

   THE RULE THAT USED TO SIT HERE NEVER MATCHED ANYTHING. It targeted
   `.logo-login-img`, a class that appears nowhere in Lagom login markup - the
   element is `.login-header a.logo > img`. It was a deliberate attempt to plate
   white behind the logo so the slab looked intentional, and it silently did
   nothing. A DOM probe confirmed nothing on the page sets a background on
   either the anchor or the image: the slab was purely the PNG.

   r49: artwork swapped again. The first fix used Lagom's stored inverse logo
   (logo_big_inverse.png, 76.5% transparent). It fit the dark background but its
   lion is a FLAT WHITE SILHOUETTE - the mane separations and the circuit detail
   are gone. Owner called it out, and a side-by-side against the header artwork
   confirmed it.

   logo-login.png is now built from the HEADER artwork instead, which has the
   detailed lion. Its palette is only three families, which is what made the
   recolour safe: ~76% white background, ~13% navy ink (G ~ 32), ~6% cyan traces
   (G ~ 192). White is converted to alpha by `alpha = 255 - min(r,g,b)`, the ink
   is unpremultiplied back to its true colour, and then the GREEN CHANNEL splits
   the two ink families - navy is driven to white, cyan is left untouched, with
   a ramp between G=90 and G=160 so antialiased edges do not band. Result:
   400x91, quantised to 128 colours, 5,594 bytes - smaller than the inverse
   version it replaces and 1% of the 576KB original.

   `content: url()` swaps the rendered image while leaving the <img> and its alt
   text in the markup, so it stays a real logo to a screen reader rather than a
   decorative background. Height is 45.5px, not 45: the artwork is 400x91, so
   200px wide is exactly 45.5 - rounding it squashes the mark by 1%. */
.page-login .login-header .logo img {
    content: url("/templates/lagom2/assets/img/logo/logo-login.png");
    width: 200px;
    height: 45.5px
}

/* No backdrop-filter here either: the wrapper contains the form, and a
   backdrop root would become the containing block for any fixed-position
   validation popover Lagom renders inside it. */
.page-login .login-wrapper {
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 26px;
    background: rgba(255, 255, 255, .11);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .28)
}

.page-login .login-body {
    padding: 32px;
    border-radius: 20px;
    background: #fff
}

.page-login .login-title {
    color: var(--simba-shell-title);
    font-size: clamp(25px, 4vw, 32px);
    letter-spacing: 0;
    font-weight: 800
}

.page-login .login-form .form-control {
    min-height: 52px;
    border-color: #cedae7;
    border-radius: var(--simba-shell-radius-sm);
    background: #f9fbfd
}

.page-login .login-form .form-control:focus {
    border-color: #74b9ef;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(8, 117, 209, .11)
}

.page-login .login-form .btn-primary {
    min-height: 52px;
    border: 0;
    border-radius: var(--simba-shell-radius-sm);
    background: linear-gradient(135deg, var(--simba-shell-blue), #1269d8);
    box-shadow: 0 12px 24px rgba(8, 117, 209, .22);
    font-weight: 800
}

.page-login .login-footer,
.page-login .login-footer a,
.page-login .login-language,
.page-login .login-language a {
    color: rgba(255, 255, 255, .86)
}

.page-login .login-footer a,
.page-login .login-language a {
    text-decoration: underline;
    text-underline-offset: 3px
}

.page-login .login-footer a:hover,
.page-login .login-language a:hover {
    color: #fff
}

/* The language menu on the auth screen renders on the dark field, so it needs
   its own light surface rather than inheriting the white-on-dark link colour. */
.page-login .login-language .dropdown-menu {
    border: 1px solid var(--simba-shell-border);
    border-radius: 14px;
    background: var(--simba-shell-panel);
    box-shadow: var(--simba-shell-shadow-pop)
}

.page-login .login-language .dropdown-menu a {
    min-height: 40px;
    border-radius: 9px;
    color: var(--simba-shell-copy);
    text-decoration: none
}

/* ---------------------------------------------------------------------------
   8. Dark mode
   Token overrides first, then the handful of surfaces that were still using
   literal light values in the light-mode rules above.
   --------------------------------------------------------------------------- */
.lagom-dark-mode.page-user-logged {
    --simba-shell-bg: #071524;
    --simba-shell-panel: #0d2035;
    --simba-shell-panel-alt: #0a1a2c;
    --simba-shell-border: #203a55;
    --simba-shell-border-soft: #1b3149;
    --simba-shell-muted: #9fb0c3;
    --simba-shell-copy: #cbd8e6;
    --simba-shell-title: #f1f6fb;
    --simba-shell-blue-soft: rgba(8, 117, 209, .18);
    --simba-shell-blue-line: rgba(86, 197, 239, .3);
    --simba-shell-hover: rgba(8, 117, 209, .14);
    --simba-shell-thead: #0a1a2c;
    --simba-shell-row-hover: rgba(86, 197, 239, .07);
    --simba-shell-field: #091a2c;
    --simba-shell-field-border: #294762;
    --simba-shell-shadow: 0 16px 40px rgba(0, 0, 0, .2);
    --simba-shell-shadow-pop: 0 20px 46px rgba(0, 0, 0, .34)
}

.lagom-dark-mode.page-user-logged {
    color: #dce7f3
}

.lagom-dark-mode.page-user-logged .app-nav,
.lagom-dark-mode.page-user-logged .main-top,
.lagom-dark-mode.page-user-logged .main-footer,
.lagom-dark-mode.page-user-logged .panel,
.lagom-dark-mode.page-user-logged .tile,
.lagom-dark-mode.page-user-logged .table-container {
    color: #dce7f3;
    border-color: var(--simba-shell-border);
    background: var(--simba-shell-panel)
}

.lagom-dark-mode.page-user-logged .app-nav-header,
.lagom-dark-mode.page-user-logged .panel-heading,
.lagom-dark-mode.page-user-logged .panel-footer,
.lagom-dark-mode.page-user-logged .table-list thead th {
    color: #dce7f3;
    border-color: var(--simba-shell-border);
    background: var(--simba-shell-panel-alt)
}

/* The light-mode header gradient is a literal, so it has to be replaced. */
.lagom-dark-mode.page-user-logged .main-header {
    border-bottom-color: var(--simba-shell-border);
    background:
        radial-gradient(circle at 15% 10%, rgba(33, 184, 232, .12), transparent 30%),
        linear-gradient(135deg, #0b1e33 0%, #0d2743 100%)
}

.lagom-dark-mode.page-user-logged .app-nav-menu .menu > li > a:not(.btn),
.lagom-dark-mode.page-user-logged .app-nav-menu .dropdown-menu a,
.lagom-dark-mode.page-user-logged .panel-title,
.lagom-dark-mode.page-user-logged .tile-stat {
    color: #e8f0f8
}

.lagom-dark-mode.page-user-logged .app-nav-menu .dropdown-menu,
.lagom-dark-mode.page-user-logged .form-control,
.lagom-dark-mode.page-user-logged .selectize-input {
    color: #e8f0f8;
    border-color: var(--simba-shell-field-border);
    background: var(--simba-shell-field)
}

.lagom-dark-mode.page-user-logged .tile:hover {
    border-color: rgba(86, 197, 239, .4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .3)
}

.lagom-dark-mode.page-user-logged .table-list tbody td {
    border-bottom-color: var(--simba-shell-border-soft)
}

/* Public header in dark mode. Without this the marketing header stays white
   while the rest of the page inverts. */
.lagom-dark-mode.lagom-not-portal:not(.page-login):not(.page-user-logged) .app-nav,
.lagom-dark-mode.lagom-not-portal:not(.page-login):not(.page-user-logged) .app-nav-menu {
    border-bottom-color: #1b3149;
    background: #0d2035;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28)
}

.lagom-dark-mode.lagom-not-portal:not(.page-login):not(.page-user-logged) .app-nav-header {
    border-bottom-color: #1b3149;
    background: #0a1a2c
}

.lagom-dark-mode.lagom-not-portal:not(.page-login):not(.page-user-logged) .app-nav-menu .menu > li > a:not(.btn) {
    color: #cbd8e6
}

.lagom-dark-mode.lagom-not-portal:not(.page-login):not(.page-user-logged) .app-nav-menu .menu > li > a:not(.btn):hover,
.lagom-dark-mode.lagom-not-portal:not(.page-login):not(.page-user-logged) .app-nav-menu .menu > li.active > a:not(.btn) {
    color: #7ecdf5;
    background: rgba(8, 117, 209, .18)
}

.lagom-dark-mode.lagom-not-portal:not(.page-login):not(.page-user-logged) .app-nav .dropdown-menu {
    border-color: #203a55;
    background: #0d2035
}

/* ---------------------------------------------------------------------------
   9. Responsive shell
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Lagom collapses the navigation below 992px, so the toggle must reach the
       44x44 target across the whole collapsed range. Scoping this to 767.98px
       left it at Lagom's default (~32.6 x 34px) between 768px and 991.98px.
       `!important` is required because Lagom sizes `.navbar-toggle` with
       padding and a font-size-derived box at higher specificity. */
    .app-nav-toggle.navbar-toggle,
    .page-user-logged .app-nav-toggle.navbar-toggle,
    .lagom-not-portal .app-nav-toggle.navbar-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border-radius: 11px
    }

    .page-user-logged .app-nav-header {
        min-height: 74px;
        border-bottom: 1px solid var(--simba-shell-border);
        background: var(--simba-shell-panel);
        box-shadow: 0 8px 24px rgba(7, 26, 53, .08)
    }

    .page-user-logged .app-nav-menu {
        padding: 14px 12px 24px;
        border-inline-end: 1px solid var(--simba-shell-border);
        background: var(--simba-shell-panel)
    }

    /* Static rather than sticky below 992px. The previous `top: 74px` assumed a
       fixed 74px header; `min-height` allows the header to grow, which would
       have left a gap or an overlap. */
    .page-user-logged .main-top {
        position: static;
        top: auto;
        z-index: auto;
        box-shadow: none
    }

    /* Account data before the account summary on small screens. */
    .page-clientareahome.page-user-logged .main-grid {
        display: flex;
        flex-direction: column
    }

    .page-clientareahome.page-user-logged .main-content {
        order: 1;
        width: auto !important
    }

    .page-clientareahome.page-user-logged .main-sidebar {
        order: 2;
        width: auto !important
    }

    .page-user-logged .main-header {
        min-height: 108px;
        padding-block: 26px 18px
    }

    .page-user-logged .main-body {
        padding-block: 26px 38px
    }
}

@media (max-width: 767.98px) {
    .page-user-logged .app-nav-header .logo,
    .lagom-not-portal:not(.page-user-logged) .app-nav-header .logo {
        min-height: 44px;
        display: inline-flex;
        align-items: center
    }

    .page-user-logged .app-nav-header .logo-img,
    .lagom-not-portal:not(.page-user-logged) .app-nav-header .logo-img {
        max-width: 142px;
        max-height: 34px
    }

    .page-user-logged .main-top .top-nav > li > a,
    .page-user-logged .main-top .top-nav > li > label,
    .page-user-logged .main-content .btn,
    .page-user-logged .main-sidebar .btn,
    .page-user-logged .table-top .btn,
    .page-user-logged .table-top input,
    .page-user-logged .table-top select {
        min-height: 44px
    }

    .page-user-logged .main-header > .container,
    .page-user-logged .main-body > .container {
        padding-inline: 16px
    }

    .page-user-logged .main-body {
        padding-block: 22px 34px
    }

    .page-user-logged .main-grid {
        gap: 18px
    }

    .page-user-logged .panel,
    .page-user-logged .table-container {
        border-radius: 15px
    }

    .page-user-logged .panel > .panel-heading:first-child {
        border-top-left-radius: 15px;
        border-top-right-radius: 15px
    }

    .page-user-logged .panel > .panel-footer:last-child {
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px
    }

    .page-user-logged .panel-heading,
    .page-user-logged .panel-body,
    .page-user-logged .panel-footer,
    .page-user-logged .table-container {
        padding-inline: 16px
    }

    .page-user-logged .tile {
        min-height: 82px;
        padding: 14px 16px;
        border-radius: 14px
    }

    .page-user-logged .table-top {
        gap: 10px
    }

    /* Padding lives on `.app-main`, not on the element carrying `min-height`,
       so the viewport-height rule cannot overflow. */
    .page-login .app-main {
        padding: 20px 14px
    }

    .page-login .login-wrapper {
        padding: 6px;
        border-radius: 22px
    }

    .page-login .login-body {
        padding: 26px 20px;
        border-radius: 17px
    }
}

@media (max-width: 575.98px) {
    .page-user-logged .main-header-title,
    .page-user-logged .main-header h1 {
        font-size: 25px
    }
}

/* ---------------------------------------------------------------------------
   10. Reduced motion
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .page-user-logged .tile,
    .page-user-logged .btn,
    .page-user-logged .form-control,
    .page-user-logged .selectize-input,
    .page-user-logged .app-nav-menu a,
    .page-login .login-form .form-control,
    .lagom-not-portal:not(.page-login):not(.page-user-logged) .app-nav-menu a {
        transition: none !important
    }

    .page-user-logged .tile:hover {
        transform: none !important
    }
}

/* ===========================================================================
   SimbaServer phase 3: client-area shell and dashboard composition
   ---------------------------------------------------------------------------
   Everything above this marker is unchanged from the phase-2 stylesheet.
   This block supersedes the phase-2 dashboard grid and Swiper overrides.

   Layout premise
   --------------
   `.app-nav` is a 280px fixed rail, so viewport-width media queries overstate
   the space the dashboard actually has. Usable width is roughly
   `viewport - 280 - container padding`. At a 1256px viewport that is ~896px,
   and phase 2 spent 304px of it on the account sidebar, leaving a 577px
   content column. Phase 3 therefore places the sidebar beside the content only
   from 1560px up (~876px of content) and otherwise reflows it beneath the
   content as a compact panel row.

   The rail width itself is deliberately NOT changed: Lagom sets the matching
   `.app-main` offset elsewhere, and altering one without the other would
   desynchronise the shell.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   3.1 Additional tokens
   --------------------------------------------------------------------------- */
:root {
    --simba-dash-gutter: 40px;
    --simba-dash-gap: 20px;
    --simba-dash-aside: 300px;
    --simba-dash-max: 1440px;
    --simba-dash-tile-icon: #eaf3fd;
    --simba-dash-accent: #0875d1;
    --simba-dash-accent-soft: rgba(8, 117, 209, .1);
    --simba-dash-warn: #b45309;
    --simba-dash-warn-soft: #fdf5e6;
    --simba-dash-warn-line: #f0d29a;
    --simba-dash-danger: #c0392b;
    --simba-dash-ok: #17a06e
}

.lagom-dark-mode {
    --simba-dash-tile-icon: rgba(86, 197, 239, .14);
    --simba-dash-accent: #56c5ef;
    --simba-dash-accent-soft: rgba(86, 197, 239, .14);
    --simba-dash-warn: #f0c274;
    --simba-dash-warn-soft: rgba(240, 194, 116, .12);
    --simba-dash-warn-line: rgba(240, 194, 116, .3);
    --simba-dash-danger: #ef8b80;
    --simba-dash-ok: #4fd3a3
}

/* ---------------------------------------------------------------------------
   3.2 Shell: utility bar, page header, content canvas
   `:not(.page-homepage)` keeps the custom logged-in landing page untouched.
   --------------------------------------------------------------------------- */
.lagom-layout-left-wide.page-user-logged:not(.page-homepage) .main-top {
    min-height: 52px;
    padding-block: 4px
}

/* The header is not a separate slab any more: it shares the body canvas so the
   title, breadcrumb and first card read as one surface. */
.lagom-layout-left-wide.page-user-logged:not(.page-homepage) .main-header {
    min-height: 0;
    padding-block: 26px 6px;
    border-bottom: 0;
    background: var(--simba-shell-bg)
}

.lagom-layout-left-wide.page-user-logged:not(.page-homepage) .main-header-top {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 20px
}

.lagom-layout-left-wide.page-user-logged:not(.page-homepage) .main-header-title {
    margin: 0;
    font-size: clamp(22px, 2.2vw, 29px);
    line-height: 1.5
}

.lagom-layout-left-wide.page-user-logged:not(.page-homepage) .main-header-bottom {
    margin-block-start: 6px
}

.lagom-layout-left-wide.page-user-logged:not(.page-homepage) .main-header .breadcrumb {
    margin: 0;
    padding: 0;
    background: none;
    font-size: 13px
}

.lagom-layout-left-wide.page-user-logged:not(.page-homepage) .main-body {
    padding-block: 16px 44px
}

/* Navigation rail: icon chips give the menu the scannable, tool-like rhythm of
   a control panel without any markup change. */
.lagom-layout-left-wide.page-user-logged .app-nav-menu .menu > li > a:not(.btn) > i,
.lagom-layout-left-wide.page-user-logged .app-nav-menu .menu > li > a:not(.btn) > svg {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--simba-dash-tile-icon);
    color: var(--simba-dash-accent);
    font-size: 15px;
    transition: background-color .18s ease, color .18s ease
}

.lagom-layout-left-wide.page-user-logged .app-nav-menu .menu > li.active > a:not(.btn) > i,
.lagom-layout-left-wide.page-user-logged .app-nav-menu .menu > li.active > a:not(.btn) > svg {
    background: rgba(255, 255, 255, .18);
    color: #fff
}

/* ---------------------------------------------------------------------------
   3.3 Dashboard container and main grid
   --------------------------------------------------------------------------- */
.page-clientareahome.page-user-logged .main-header > .container,
.page-clientareahome.page-user-logged .main-body > .container {
    max-width: var(--simba-dash-max);
    padding-inline: var(--simba-dash-gutter)
}

/* Default (and every width below 1560px): one full-width content column with
   the account panels reflowed underneath. */
.page-clientareahome.page-user-logged .main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 28px
}

.page-clientareahome.page-user-logged .main-content {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    width: auto !important;
    margin: 0 !important
}

.page-clientareahome.page-user-logged .main-sidebar {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    width: auto !important;
    margin: 0 !important
}

/* Below the content the sidebar becomes a horizontal panel row rather than a
   tall stack, so moving it does not lengthen the page. `display: contents`
   lifts the two `.sidebar` wrappers (and the optional sticky wrapper) out of
   the way so their panels join this grid directly. */
@media (max-width: 1559.98px) {
    .page-clientareahome.page-user-logged .main-sidebar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
        align-items: start;
        gap: var(--simba-dash-gap)
    }

    .page-clientareahome.page-user-logged .main-sidebar > .sidebar-sticky,
    .page-clientareahome.page-user-logged .main-sidebar .sidebar {
        display: contents
    }

    /* Sticky is meaningless once the region is a horizontal row; the JS may
       still write inline offsets, so they are overridden here. */
    .page-clientareahome.page-user-logged .main-sidebar .sidebar-sticky {
        position: static !important;
        top: auto !important;
        width: auto !important
    }

    .page-clientareahome.page-user-logged .main-sidebar .panel {
        margin-bottom: 0
    }
}

/* From 1560px the rail, sidebar and content all fit: usable width is ~1200px,
   leaving the content column ~876px. */
@media (min-width: 1560px) {
    .page-clientareahome.page-user-logged .main-grid {
        grid-template-columns: minmax(0, 1fr) var(--simba-dash-aside);
        gap: 24px
    }

    .page-clientareahome.page-user-logged .main-content {
        grid-column: 1;
        grid-row: 1
    }

    .page-clientareahome.page-user-logged .main-sidebar {
        grid-column: 2;
        grid-row: 1;
        display: grid;
        gap: var(--simba-dash-gap)
    }

    .page-clientareahome.page-user-logged .main-sidebar > .sidebar-sticky,
    .page-clientareahome.page-user-logged .main-sidebar .sidebar {
        display: grid;
        gap: var(--simba-dash-gap)
    }

    .page-clientareahome.page-user-logged .main-sidebar .panel {
        margin-bottom: 0
    }
}

@media (max-width: 1199.98px) {
    .page-clientareahome.page-user-logged .main-header > .container,
    .page-clientareahome.page-user-logged .main-body > .container {
        --simba-dash-gutter: 24px
    }
}

@media (max-width: 767.98px) {
    .page-clientareahome.page-user-logged .main-header > .container,
    .page-clientareahome.page-user-logged .main-body > .container {
        --simba-dash-gutter: 16px
    }

    .page-clientareahome.page-user-logged .main-grid {
        gap: 20px
    }
}

/* ---------------------------------------------------------------------------
   3.4 Alerts
   Compact, informative, with a status rail instead of a full colour wash.
   --------------------------------------------------------------------------- */
.page-clientareahome.page-user-logged .client-home-alerts {
    display: grid;
    gap: 10px;
    margin-bottom: 20px
}

.page-clientareahome.page-user-logged .client-home-alerts .alert.client-home-alert {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--simba-dash-warn-line);
    border-inline-start: 3px solid var(--simba-dash-warn);
    border-radius: 12px;
    background: var(--simba-dash-warn-soft);
    box-shadow: none
}

.page-clientareahome.page-user-logged .client-home-alerts .alert .alert-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--simba-dash-warn);
    background: rgba(180, 83, 9, .1);
    font-size: 16px
}

.page-clientareahome.page-user-logged .client-home-alerts .alert .alert-body {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--simba-shell-title);
    font-size: 14px;
    line-height: 1.75
}

.page-clientareahome.page-user-logged .client-home-alerts .alert .alert-body p {
    margin: 0
}

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

.page-clientareahome.page-user-logged .client-home-alerts .alert .alert-actions .btn {
    min-height: 38px;
    border-radius: 10px
}

.page-clientareahome.page-user-logged .client-home-alerts .alert .btn-close-alert {
    width: 38px;
    padding-inline: 0;
    border: 0;
    background: transparent;
    color: var(--simba-shell-muted)
}

.page-clientareahome.page-user-logged .client-home-alerts .alert .btn-close-alert:hover {
    color: var(--simba-shell-title);
    background: rgba(7, 26, 53, .06)
}

@media (max-width: 575.98px) {
    .page-clientareahome.page-user-logged .client-home-alerts .alert.client-home-alert {
        flex-wrap: wrap
    }

    .page-clientareahome.page-user-logged .client-home-alerts .alert .alert-body {
        flex: 1 1 100%;
        order: 3
    }

    .page-clientareahome.page-user-logged .client-home-alerts .alert .alert-actions {
        margin-inline-start: auto
    }
}

/* ---------------------------------------------------------------------------
   3.5 Statistic tiles
   CASCADE NOTE: the superseded phase-2 tile rule carries `.main-content`
   (specificity 0,5,0) and this block does not (0,4,0), so between 992px and
   1599.98px the older `repeat(2, ...)` outranked the intended column count
   regardless of source order. `grid-template-columns` therefore carries
   `!important` in all three tile rules below — and only that declaration — so
   the tile column count is single-sourced here and cannot be outranked. No
   other property in this block was changed.
   Swiper is neutralised at every width: four counters are a grid, not a
   carousel, and the carousel viewport was clipping and compressing them.
   Tiles are horizontal (icon chip / figure + label) so long Persian labels get
   the full remaining width instead of wrapping into a tall narrow stack.
   `!important` is required throughout: Swiper writes inline width, height,
   transform and transition on the wrapper and slides.
   --------------------------------------------------------------------------- */
/* One source for the space BETWEEN the cards (simba-ui-r33-nav). It has to be
   a token: the superseded phase-2 rule above carries `.main-content` (0,5,0)
   and the block below does not (0,4,0), so setting `gap` here on its own is
   silently ignored between 992px and 1599.98px - the very trap the column
   count hit. Both wrapper rules read this one value. 14px read as cramped at
   the tile height the r32 fix settled on. */
.page-clientareahome.page-user-logged {
    --simba-tile-gap: 24px
}

.page-clientareahome.page-user-logged .tiles {
    margin-bottom: 20px;
    overflow: visible !important
}

.page-clientareahome.page-user-logged .tiles.swiper,
.page-clientareahome.page-user-logged .tiles.swiper-container,
.page-clientareahome.page-user-logged .tiles .swiper,
.page-clientareahome.page-user-logged .tiles .swiper-container {
    overflow: visible !important
}

.page-clientareahome.page-user-logged .tiles .swiper-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--simba-tile-gap);
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    transition: none !important
}

.page-clientareahome.page-user-logged .tiles .swiper-slide {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    transform: none !important
}

.page-clientareahome.page-user-logged .tiles .swiper-pagination,
.page-clientareahome.page-user-logged .tiles .swiper-button-next,
.page-clientareahome.page-user-logged .tiles .swiper-button-prev,
.page-clientareahome.page-user-logged .tiles .swiper-scrollbar {
    display: none !important
}

@media (min-width: 480px) {
    .page-clientareahome.page-user-logged .tiles .swiper-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important
    }
}

@media (min-width: 1180px) {
    .page-clientareahome.page-user-logged .tiles .swiper-wrapper {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important
    }
}

.page-clientareahome.page-user-logged .tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
    min-height: 92px;
    height: 100%;

    /* Lagom still ships `margin-bottom: var(--ui-block-spacing-xlg)` on .tile
       from its old float layout. Spacing between the cards comes from the
       wrapper gap here, so that leftover 32px only ever inflated the tile -
       see the placement note in 3.5b below. */
    margin-bottom: 0;

    padding: 16px 18px;
    border: 1px solid var(--simba-shell-border);
    border-radius: 14px;
    background: var(--simba-shell-panel);
    box-shadow: 0 1px 2px rgba(7, 26, 53, .04);
    text-align: start;
    transition: border-color .18s ease, box-shadow .18s ease
}

.page-clientareahome.page-user-logged .tile:hover {
    transform: none;
    border-color: var(--simba-dash-accent);
    box-shadow: 0 10px 26px rgba(7, 26, 53, .08)
}

/* Lagom absolutely positions this icon; it becomes a normal flex item here. */
.page-clientareahome.page-user-logged .tile .tile-icon-absolute,
.page-clientareahome.page-user-logged .tile .tile-icon {
    position: static;
    inset: auto;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 12px;
    background: var(--simba-dash-tile-icon);
    color: var(--simba-dash-accent);
    font-size: 19px;
    opacity: 1;
    grid-column: 1;
    grid-row: 1;
    align-self: center
}

.page-clientareahome.page-user-logged .tile .tile-icon-absolute .text-danger,
.page-clientareahome.page-user-logged .tile .tile-icon-absolute .icon-alert {
    color: var(--simba-dash-danger)
}

.page-clientareahome.page-user-logged .tile .tile-stat {
    margin: 0;
    color: var(--simba-shell-title);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
    font-variant-numeric: tabular-nums
}

.page-clientareahome.page-user-logged .tile .tile-stat.text-danger {
    color: var(--simba-dash-danger)
}

.page-clientareahome.page-user-logged .tile .tile-title {
    margin: 0;
    color: var(--simba-shell-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6
}

/* 3.5b Tile alignment (simba-ui-r32-tiles)
   The stat number used to sit 19px above the icon chip, and the label was
   centred while the number was start-aligned, so each tile read as a diagonal
   instead of a row.

   The cause was the stray bottom margin removed above. The tile takes its
   height from `height: 100%`, so those 32px were counted into the swiper row
   and then handed straight back to the tile - it ended up 32px taller than its
   own content. `align-content` is at its initial `normal`, which stretches
   auto rows, so the grid split the 32px evenly between the two text rows: 16px
   above the number, 16px below the label, while the chip - spanning both rows -
   stayed centred between them. Measured before/after: 133.3px tile with rows
   60.5/36.8, versus 101.3px with rows 44.5/20.8.

   Placement is now stated explicitly on all three children. That is not
   decoration: below 768px Lagom sets `order: 2` on `.tile-stat`, which under
   auto-placement swapped the number and the label into each other's rows.
   Explicit `grid-area` makes `order` irrelevant at every width.

   The chip shares row 1 with the number, and `align-items: center` on the tile
   centres both in that track - so they stay level even when a long label wraps
   to two lines and the tile is stretched to match a taller neighbour. */
.page-clientareahome.page-user-logged .tile .tile-stat {
    grid-area: 1 / 2
}

/* Lagom centres `.tile-title` outright; the number only inherits `start` from
   the tile, so without this the two never shared an edge. */
.page-clientareahome.page-user-logged .tile .tile-title {
    grid-area: 2 / 2;
    text-align: start
}

/* ---------------------------------------------------------------------------
   3.6 Dashboard panel grid
   `.client-home-panels` is a Bootstrap `.row` driven by a masonry script
   (`data-panels-grid`, `data-panels-grid-item`, `.column-sizer`). The script's
   inline absolute positioning is neutralised rather than removed: the sizer
   stays measurable but is taken out of grid flow, so no script errors and no
   markup change.
   --------------------------------------------------------------------------- */
.page-clientareahome.page-user-logged .client-home-panels {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--simba-dash-gap);
    height: auto !important;
    margin: 0
}

.page-clientareahome.page-user-logged .client-home-panels > [data-panels-grid-item] {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    transform: none !important
}

/* Kept in the DOM and still measurable for the layout script, but removed from
   grid flow so it cannot occupy a cell. */
.page-clientareahome.page-user-logged .client-home-panels > .column-sizer {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 50%;
    height: 0;
    visibility: hidden;
    pointer-events: none
}

.page-clientareahome.page-user-logged .client-home-panels > [data-panels-grid-item] > .panel {
    height: 100%;
    margin-bottom: 0
}

@media (min-width: 768px) {
    .page-clientareahome.page-user-logged .client-home-panels {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    /* The template already marks full-width panels with `col-md-12`
       (Active Products/Services and any colspan panel); that intent is mapped
       onto the grid instead of being restated. */
    .page-clientareahome.page-user-logged .client-home-panels > .col-md-12[data-panels-grid-item] {
        grid-column: 1 / -1
    }
}

/* ---------------------------------------------------------------------------
   3.7 Panel interior: headings, list rows, status, empty states
   --------------------------------------------------------------------------- */
.page-clientareahome.page-user-logged .panel {
    display: flex;
    flex-direction: column;
    border-radius: 16px
}

.page-clientareahome.page-user-logged .panel-heading {
    min-height: 54px;
    padding: 14px 18px
}

.page-clientareahome.page-user-logged .panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    line-height: 1.6
}

.page-clientareahome.page-user-logged .panel-title > i {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--simba-dash-tile-icon);
    color: var(--simba-dash-accent);
    font-size: 14px
}

.page-clientareahome.page-user-logged .panel-title .pull-right,
.page-clientareahome.page-user-logged .panel-title .float-right {
    margin-inline-start: auto;
    float: none !important
}

.page-clientareahome.page-user-logged .panel-title .btn {
    min-height: 34px;
    padding-inline: 12px;
    border-radius: 9px;
    font-size: 12.5px
}

.page-clientareahome.page-user-logged .panel > .list-group {
    flex: 1 1 auto;
    margin: 0;
    border: 0
}

.page-clientareahome.page-user-logged .panel > .list-group > .list-group-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 12px 18px;
    border: 0;
    border-block-start: 1px solid var(--simba-shell-border-soft);
    border-radius: 0;
    background: transparent;
    color: var(--simba-shell-title);
    font-size: 14px;
    line-height: 1.7
}

.page-clientareahome.page-user-logged .panel > .list-group > .list-group-item:first-child {
    border-block-start: 0
}

.page-clientareahome.page-user-logged .panel > .list-group > a.list-group-item:hover,
.page-clientareahome.page-user-logged .panel > .list-group > a.list-group-item:focus-visible {
    background: var(--simba-shell-row-hover)
}

.page-clientareahome.page-user-logged .panel > .list-group > .list-group-item > i {
    flex: 0 0 auto;
    color: var(--simba-shell-muted)
}

.page-clientareahome.page-user-logged .status-modern {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-align: end
}

/* `--status-color` is supplied inline by the template. The flat fallback is
   declared first for engines without `color-mix()`. */
.page-clientareahome.page-user-logged .status-modern .status,
.page-clientareahome.page-user-logged .status-modern .label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--simba-dash-accent-soft);
    background: color-mix(in srgb, var(--status-color, #0875d1) 14%, transparent);
    color: var(--status-color, #0875d1);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap
}

.page-clientareahome.page-user-logged .status-expiry {
    flex: 0 0 auto;
    color: var(--simba-dash-danger);
    font-size: 12px;
    font-weight: 700
}

.page-clientareahome.page-user-logged .list-group-item .badge {
    flex: 0 0 auto;
    margin-inline-start: auto;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700
}

.page-clientareahome.page-user-logged .panel-body {
    flex: 1 1 auto;
    padding: 18px
}

.page-clientareahome.page-user-logged .panel-footer {
    padding: 12px 18px
}

/* Empty states */
.page-clientareahome.page-user-logged .no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 148px;
    padding: 18px;
    text-align: center
}

.page-clientareahome.page-user-logged .no-data-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    border-radius: 16px;
    background: var(--simba-dash-tile-icon);
    color: var(--simba-dash-accent)
}

.page-clientareahome.page-user-logged .no-data-icon svg,
.page-clientareahome.page-user-logged .no-data-icon img {
    width: 28px;
    height: 28px
}

.page-clientareahome.page-user-logged .no-data .text-light,
.page-clientareahome.page-user-logged .no-data .text-lighter {
    color: var(--simba-shell-muted);
    font-size: 13.5px
}

.page-clientareahome.page-user-logged .no-data > a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding-inline: 14px;
    border: 1px solid var(--simba-shell-border);
    border-radius: 10px;
    color: var(--simba-dash-accent);
    font-size: 13px;
    font-weight: 700
}

.page-clientareahome.page-user-logged .no-data > a:hover {
    border-color: var(--simba-dash-accent);
    background: var(--simba-dash-accent-soft)
}

/* Domain search panel */
.page-clientareahome.page-user-logged .panel-domain-register .panel-body form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.page-clientareahome.page-user-logged .panel-domain-register .panel-body .form-control {
    flex: 1 1 200px;
    min-width: 0
}

.page-clientareahome.page-user-logged .panel-domain-register .panel-body .btn {
    flex: 0 0 auto
}

.page-clientareahome.page-user-logged .panel-domain-register .panel-body > p {
    width: 100%;
    margin: 10px 0 0;
    color: var(--simba-shell-muted);
    font-size: 12.5px
}

/* ---------------------------------------------------------------------------
   3.8 Account sidebar panels
   --------------------------------------------------------------------------- */
.page-clientareahome.page-user-logged .main-sidebar .panel-sidebar {
    display: flex;
    flex-direction: column;
    border-radius: 16px
}

.page-clientareahome.page-user-logged .main-sidebar .client-avatar {
    display: flex;
    justify-content: center;
    margin-bottom: 12px
}

.page-clientareahome.page-user-logged .main-sidebar .client-avatar img {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    object-fit: cover
}

.page-clientareahome.page-user-logged .main-sidebar .panel-title .panel-minimise {
    margin-inline-start: auto;
    float: none !important;
    color: var(--simba-shell-muted);
    font-size: 12px
}

.page-clientareahome.page-user-logged .main-sidebar .list-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 18px;
    border: 0;
    border-block-start: 1px solid var(--simba-shell-border-soft);
    border-radius: 0;
    font-size: 13.5px
}

.page-clientareahome.page-user-logged .main-sidebar .list-group-item:first-child {
    border-block-start: 0
}

.page-clientareahome.page-user-logged .main-sidebar .list-group-item .badge,
.page-clientareahome.page-user-logged .main-sidebar .list-group-item .pull-right {
    margin-inline-start: auto;
    float: none !important
}

.page-clientareahome.page-user-logged .main-sidebar .panel-footer .btn-block {
    width: 100%;
    min-height: 42px
}

/* ---------------------------------------------------------------------------
   3.9 Dark mode additions
   --------------------------------------------------------------------------- */
.lagom-dark-mode.page-clientareahome.page-user-logged .main-header {
    background: var(--simba-shell-bg)
}

.lagom-dark-mode.page-clientareahome.page-user-logged .tile {
    border-color: var(--simba-shell-border);
    background: var(--simba-shell-panel);
    box-shadow: none
}

.lagom-dark-mode.page-clientareahome.page-user-logged .tile:hover {
    border-color: var(--simba-dash-accent);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28)
}

.lagom-dark-mode.page-clientareahome.page-user-logged .client-home-alerts .alert .alert-icon {
    background: rgba(240, 194, 116, .16)
}

.lagom-dark-mode.page-clientareahome.page-user-logged .client-home-alerts .alert .btn-close-alert:hover {
    background: rgba(255, 255, 255, .08)
}

.lagom-dark-mode.page-clientareahome.page-user-logged .panel > .list-group > .list-group-item,
.lagom-dark-mode.page-clientareahome.page-user-logged .main-sidebar .list-group-item {
    border-block-start-color: var(--simba-shell-border);
    color: #dce7f3
}

.lagom-dark-mode.page-clientareahome.page-user-logged .no-data > a {
    border-color: var(--simba-shell-border)
}

/* ---------------------------------------------------------------------------
   3.10 Focus, touch targets and reduced motion
   --------------------------------------------------------------------------- */
.page-clientareahome.page-user-logged .tile:focus-visible,
.page-clientareahome.page-user-logged .client-home-alerts .alert .btn:focus-visible,
.page-clientareahome.page-user-logged .panel > .list-group > a.list-group-item:focus-visible,
.page-clientareahome.page-user-logged .main-sidebar a.list-group-item:focus-visible,
.page-clientareahome.page-user-logged .no-data > a:focus-visible {
    outline: 3px solid var(--simba-shell-focus);
    outline-offset: 2px;
    border-radius: 10px
}

.lagom-dark-mode.page-clientareahome.page-user-logged .tile:focus-visible,
.lagom-dark-mode.page-clientareahome.page-user-logged .panel > .list-group > a.list-group-item:focus-visible,
.lagom-dark-mode.page-clientareahome.page-user-logged .main-sidebar a.list-group-item:focus-visible {
    outline-color: var(--simba-shell-focus-dark)
}

@media (max-width: 767.98px) {
    .page-clientareahome.page-user-logged .panel > .list-group > .list-group-item,
    .page-clientareahome.page-user-logged .main-sidebar .list-group-item {
        min-height: 48px
    }

    .page-clientareahome.page-user-logged .panel-domain-register .panel-body .btn,
    .page-clientareahome.page-user-logged .panel-domain-register .panel-body .form-control {
        flex: 1 1 100%;
        min-height: 46px
    }

    .page-clientareahome.page-user-logged .status-modern {
        margin-inline-start: auto
    }
}

@media (max-width: 359.98px) {
    .page-clientareahome.page-user-logged .tile {
        padding: 14px
    }

    .page-clientareahome.page-user-logged .tile .tile-stat {
        font-size: 23px
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-clientareahome.page-user-logged .tile,
    .page-clientareahome.page-user-logged .panel-title > i,
    .lagom-layout-left-wide.page-user-logged .app-nav-menu .menu > li > a:not(.btn) > i,
    .lagom-layout-left-wide.page-user-logged .app-nav-menu .menu > li > a:not(.btn) > svg {
        transition: none !important
    }
}

/* ===========================================================================
   SimbaServer phase 3, revision R3: balanced trailing dashboard panel
   ---------------------------------------------------------------------------
   Defect: `.client-home-panels` renders one full-width item followed by an
   arbitrary number of half-width items. With a fixed two-column grid an odd
   trailing half-width panel sits alone and leaves an empty cell beside it
   (live: a 431px hole at x=40, y=1101).

   Fix: the panel row switches from a two-column grid to a wrapping flex line.
   A flex item that ends up alone on the final line absorbs the free space and
   fills the row on its own, so the balancing is a property of the layout model
   rather than a counted selector. That means it needs no `:nth-child(... of S)`
   support, does not care that `.column-sizer` is the first child, and stays
   correct for any dynamic panel count or for full-width items appearing
   part-way through the sequence.

   Basis is `50% - half the gap - 4px`. The 4px is slack: at exactly
   `50% - gap/2` two items plus one gap total precisely 100%, and sub-pixel
   rounding can tip that over and wrap the row to one item per line. Three
   items still cannot fit (150% - 2px), so the row count is stable.

   NOTE for future edits: the R2 declarations `grid-template-columns` on this
   container and `grid-column: 1 / -1` on `.col-md-12` are now inert, because
   they only apply to grid containers. They are left in place so the ruleset
   still degrades to the R2 two-column grid if this block is ever removed.
   Below 768px the container remains the R2 single-column grid, unchanged.
   =========================================================================== */
@media (min-width: 768px) {
    .page-clientareahome.page-user-logged .client-home-panels {
        display: flex;
        flex-wrap: wrap
    }

    .page-clientareahome.page-user-logged .client-home-panels > [data-panels-grid-item] {
        flex: 1 1 calc(50% - (var(--simba-dash-gap) / 2) - 4px)
    }

    /* Full-width items keep their own line in every configuration. */
    .page-clientareahome.page-user-logged .client-home-panels > .col-md-12[data-panels-grid-item] {
        flex-basis: 100%
    }
}


/* ===========================================================================
   SimbaServer phase 4: plan-card patch  (simba-ui r4)
   BEGIN simba-ui-r4  --  to revert, delete everything from this marker down.
   Backup of the pre-patch file: theme-custom.css.simba-backup-r4-20260824
   =========================================================================== */

.simba-plan-card .label-corner {
    position: absolute !important;
    top: 18px;
    right: 24px;
    left: auto;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 5px 12px;
    transform: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    background: #e8f2fd;
    color: #0a5ba8;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    box-shadow: none
}

.simba-plan-card .label-corner:before {
    content: '\2605';
    font-size: 11px
}

.page-products .simba-plan-card.package {
    padding-top: 56px
}

.simba-plan-card.package-featured {
    border-color: #7fb6ea;
    background: linear-gradient(180deg, #f7fbff 0%, #fff 120px);
    box-shadow: 0 18px 40px rgba(12, 86, 160, .14)
}

.simba-plan-card .btn-order-now {
    border: 1.5px solid #cfe0f2;
    background: #fff;
    color: #0a5ba8
}

.simba-plan-card .btn-order-now:hover,
.simba-plan-card .btn-order-now:focus {
    border-color: #8fbfeb;
    background: #f2f8ff;
    color: #07477f
}

.simba-plan-card.package-featured .btn-order-now {
    border-color: #096fc7;
    background: #096fc7;
    color: #fff
}

.simba-plan-card.package-featured .btn-order-now:hover,
.simba-plan-card.package-featured .btn-order-now:focus {
    border-color: #075da8;
    background: #075da8;
    color: #fff
}

.simba-chips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 14px 0 4px
}

.simba-chips div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 4px;
    border: 1px solid #e6edf5;
    border-radius: 11px;
    background: #f8fbfe;
    text-align: center
}

.simba-chips b {
    color: #0d3a63;
    font-size: 13.5px;
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums
}

.simba-chips span {
    color: #7b8ea3;
    font-size: 10.5px
}

.package-featured .simba-chips div {
    border-color: #cfe4f8;
    background: #eef6fe
}

.simba-plan-card .simba-plan-summary {
    min-height: 44px
}

@media (max-width: 575px) {
    .page-products .simba-plan-card.package {
        padding-top: 52px
    }

    .simba-chips {
        gap: 6px
    }

    .simba-chips b {
        font-size: 12.5px
    }
}

.lagom-dark-mode .simba-chips div {
    border-color: #23364d;
    background: #16233a
}

.lagom-dark-mode .simba-chips b {
    color: #e6eef8
}

.lagom-dark-mode .simba-chips span {
    color: #8fa3ba
}

.lagom-dark-mode .simba-plan-card .label-corner {
    background: #17324f;
    color: #7fc0ff
}

.lagom-dark-mode .simba-plan-card .btn-order-now {
    border-color: #2b425e;
    background: transparent;
    color: #7fc0ff
}

.lagom-dark-mode .simba-plan-card.package-featured {
    background: linear-gradient(180deg, #12263f 0%, #0f1d30 120px);
    border-color: #2f5c8a
}

/* END simba-ui-r4 =========================================================== */


/* ===========================================================================
   SimbaServer phase 5: page canvas  (simba-ui r5)
   BEGIN simba-ui-r5-canvas  --  to revert, delete from this marker down.
   Backup of the pre-patch file: theme-custom.css.simba-backup-r5-20260825

   Cards were #fff sitting on a #fff page, so nothing separated them from the
   background except a hairline border. Tinting the canvas and leaving cards
   white is the same arrangement ParsPack uses (#f4f6fb behind white cards).

   #f2f6fc is not a new colour: it is the tone .sbx-sec--ice already applies
   on the homepage. Reused here so the palette stays cool-toned and matches
   the existing borders (#dfe7f1) and brand blue (#096fc7).
   =========================================================================== */

/* Login and other full-bleed pages paint their own background. */
body:not(.page-type-full) {
    background: #f2f6fc
}

/* The homepage alternated tinted and white sections, so half of its cards
   were white-on-white. Its CSS is inline in homepage.tpl, hence the extra
   specificity here. */
body.page-homepage .sbx-sec,
body.page-homepage .sbx-sec--ice {
    background: #f2f6fc
}

/* END simba-ui-r5-canvas ==================================================== */


/* ===========================================================================
   SimbaServer phase 6: footer contact + trust seal  (simba-ui r6)
   BEGIN simba-ui-r6-footer  --  to revert, delete from this marker down.
   Markup lives in core/layouts/footer/default/default.tpl.
   =========================================================================== */

.simba-footer-contact {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none
}

.simba-footer-contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #52627a;
    font-size: 13.5px;
    line-height: 1.7;
    text-decoration: none;
    transition: color .15s ease
}

.simba-footer-contact a:hover,
.simba-footer-contact a:focus {
    color: #096fc7
}

.simba-footer-contact svg {
    flex: 0 0 auto;
    color: #96a6ba
}

.simba-footer-contact a:hover svg {
    color: #096fc7
}

/* Digits stay Latin inside the LTR spans, so keep them evenly spaced. */
.simba-footer-contact span {
    font-variant-numeric: tabular-nums
}

/* eNamad requires its seal on a light background, hence the white tile. */
.simba-footer-seal {
    width: 84px;
    margin: 18px 0 0;
    padding: 8px;
    border: 1px solid #e2e9f1;
    border-radius: 12px;
    background: #fff;
    line-height: 0
}

.simba-footer-seal img {
    width: 100%;
    height: auto;
    display: block
}

/* Hidden by JS when the seal fails to load, so a broken-image icon never
   shows in its place. */
.simba-footer-seal[hidden] {
    display: none !important
}

/* END simba-ui-r6-footer ==================================================== */


/* ===========================================================================
   SimbaServer phase 7: store hero on mobile  (simba-ui r7)
   BEGIN simba-ui-r7-mobile  --  to revert, delete from this marker down.

   The hero ran 740px on a 390x900 screen, so plans only appeared after 1.34
   screens of scrolling. Two changes bring that to 0.96:

   1. .simba-store-proof is hidden. Its four badges repeat .simba-store-assurances
      at the foot of the same page - 'پرداخت امن / درگاه ریالی سایت' is word for
      word identical, the other three are reworded versions of the same claim.
   2. .simba-store-route goes two-up instead of four stacked rows.

   Selectors are child-combinator rather than plain class because vars/custom.css
   loads after this file and redeclares .simba-store-proof{display:grid}.
   =========================================================================== */

@media (max-width: 767px) {
    .simba-store-hero > .simba-store-proof {
        display: none
    }

    .simba-store-hero > .simba-store-route {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    /* Two-up columns are too narrow for the nowrap+ellipsis the desktop
       layout uses, which clipped 'CloudLinux + cPanel' to 'udLinux + cPanel'. */
    .simba-store-hero > .simba-store-route strong {
        overflow: visible;
        font-size: 13px;
        line-height: 1.55;
        text-overflow: clip;
        white-space: normal
    }

    .simba-store-v2 .simba-store-hero {
        gap: 14px;
        padding-top: 20px;
        padding-bottom: 20px
    }
}

/* END simba-ui-r7-mobile ==================================================== */


/* ===========================================================================
   SimbaServer phase 8: illustrations on the service cards  (simba-ui r8)
   BEGIN simba-ui-r8-paths  --  to revert, delete from this marker down.

   Icons are simba-icon-*.svg in assets/homepage/, drawn for this site.
   The service-*.webp files that were tried first are 360x360 with a solid
   white background (0% alpha), so they showed a white square on any surface
   that was not pure white. SVG also stays sharp on high-DPR screens and
   costs ~0.3-0.6KB against 4-6KB.

   Placed bottom-left: card text is right-aligned RTL, so that corner is free.
   Kept at low opacity so the feature list stays the thing you read first.
   =========================================================================== */

.sbx-path {
    position: relative;
    overflow: hidden
}

.sbx-path::after {
    position: absolute;
    bottom: 54px;
    left: -12px;
    width: 138px;
    height: 138px;
    content: '';
    opacity: .26;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease
}

.sbx-paths .sbx-path:nth-child(1)::after {
    background-image: url('/templates/lagom2/assets/homepage/simba-icon-hosting.svg')
}

.sbx-paths .sbx-path:nth-child(2)::after {
    background-image: url('/templates/lagom2/assets/homepage/simba-icon-vps.svg')
}

.sbx-paths .sbx-path:nth-child(3)::after {
    background-image: url('/templates/lagom2/assets/homepage/simba-icon-domain.svg')
}

.sbx-path:hover::after {
    opacity: .42;
    transform: translateY(-4px)
}

@media (max-width: 767px) {
    .sbx-path::after {
        width: 112px;
        height: 112px;
        opacity: .2
    }
}

@media (prefers-reduced-motion: reduce) {
    .sbx-path::after {
        transition: none
    }

    .sbx-path:hover::after {
        transform: none
    }
}

/* END simba-ui-r8-paths ===================================================== */


/* ===========================================================================
   SimbaServer phase 9: client-area dashboard width  (simba-ui r9)
   BEGIN simba-ui-r9-clientarea  --  to revert, delete from this marker down.

   On page-clientareahome the phase-3 block turns .main-grid into a single
   column and drops .main-sidebar underneath at full width. Lagom's stock rule

       @media (min-width: 1320px)
       .lagom-layout-left-wide .main-sidebar + .main-content {
           max-width: calc(100% - var(--main-sidebar-width) - var(--main-sidebar-spacing-h)) }

   still reserves 320px beside the content for a sidebar that is no longer
   there, so every dashboard row stopped 320px short of the grid.

   Scoped to the dashboard only. Pages that keep the two-column arrangement
   (invoices, account details) still need that reservation and are untouched.
   =========================================================================== */

@media (min-width: 992px) {
    .page-clientareahome.page-user-logged .main-grid > .main-content {
        width: 100%;
        max-width: none
    }
}

/* END simba-ui-r9-clientarea ================================================ */


/* ===========================================================================
   SimbaServer phase 10: client-area services list  (simba-ui r10)
   BEGIN simba-ui-r10-services  --  to revert, delete from this marker down.
   Markup is injected by assets/js/simba-ui-r5.js (initServices).
   =========================================================================== */

.simba-svc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px
}

.simba-svc-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 104px;
    padding: 14px 12px 12px;
    border: 1px solid #e2e9f1;
    border-radius: 16px;
    background: #fff;
    color: #5b6b80;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease
}

.simba-svc-tab:hover {
    border-color: #bcd8f2;
    color: #0a5ba8
}

.simba-svc-tab-ico {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #f2f6fc;
    color: #6b8098;
    transition: background .18s ease, color .18s ease
}

.simba-svc-tab:hover .simba-svc-tab-ico {
    background: #e8f2fd;
    color: #096fc7
}

.simba-svc-tab.is-active {
    border-color: #096fc7;
    background: #f5faff;
    color: #0a3f74;
    box-shadow: 0 6px 18px rgba(9, 111, 199, .12)
}

.simba-svc-tab.is-active .simba-svc-tab-ico {
    background: #096fc7;
    color: #fff
}

.simba-svc-tab-n {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #eef2f7;
    color: #5b6b80;
    font-size: 11.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums
}

.simba-svc-tab.is-active .simba-svc-tab-n {
    background: #096fc7;
    color: #fff
}

/* ---- rows ---- */
#tableServicesList tbody td {
    padding-top: 16px;
    padding-bottom: 16px;
    vertical-align: middle
}

#tableServicesList tbody tr td:first-child b {
    display: block;
    color: #102a43;
    font-size: 14px;
    line-height: 1.7
}

#tableServicesList tbody tr td:last-child {
    white-space: nowrap
}

.simba-manage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-end: 8px;
    padding: 8px 14px;
    border: 1px solid #cfe0f2;
    border-radius: 10px;
    background: #fff;
    color: #0a5ba8;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    vertical-align: middle;
    transition: background .16s ease, border-color .16s ease, color .16s ease
}

.simba-manage:hover,
.simba-manage:focus {
    border-color: #096fc7;
    background: #096fc7;
    color: #fff;
    text-decoration: none
}

/* ---- status pills ---- */
#tableServicesList tbody tr .status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700
}

#tableServicesList tbody tr .status-active { background: #e7f7ef; color: #12704f }
#tableServicesList tbody tr .status-pending { background: #fdf1e3; color: #9a5b12 }
#tableServicesList tbody tr .status-suspended { background: #fdeceb; color: #a33028 }
#tableServicesList tbody tr .status-terminated,
#tableServicesList tbody tr .status-cancelled { background: #f0f2f5; color: #66727f }

@media (max-width: 575px) {
    /* Three across keeps a lone third tab from stretching to full width. */
    .simba-svc-tab {
        flex: 0 1 calc(33.333% - 7px);
        min-width: 0
    }

    .simba-svc-tab-lbl {
        font-size: 11.5px;
        line-height: 1.4;
        text-align: center
    }

    .simba-svc-tab-ico {
        width: 34px;
        height: 34px
    }

    /* Lagom sets word-break:break-word, which snapped 'MohammadReza' across
       two lines once the actions column got wide. */
    #tableServicesList tbody td:first-child {
        overflow-wrap: normal;
        word-break: normal
    }

    #tableServicesList tbody td:last-child {
        width: 1%;
        padding-inline-start: 4px;
        white-space: nowrap
    }

    /* Shorter label, so the name column keeps the width instead. */
    .simba-manage {
        margin-inline-end: 2px;
        padding: 7px 10px;
        font-size: 12px;
        gap: 4px
    }

    .simba-manage span { display: none }
    .simba-manage::after { content: '\u0645\u062F\u06CC\u0631\u06CC\u062A' }
}

/* END simba-ui-r10-services ================================================= */


/* ===========================================================================
   SimbaServer phase 11: sidebar buy CTA  (simba-ui r11)
   BEGIN simba-ui-r11-cta  --  to revert, delete from this marker down.

   Lagom's client rail is a flat menu with no primary action, so ordering
   another service means hunting through it. ParsPack pins a dark button at
   the top of theirs; this is the same idea in Simba's palette.

   Target is /#sbx-plans rather than /store: WHMCS redirects /store to the
   first product group, while that anchor is the curated overview of all six
   services with prices.
   =========================================================================== */

.simba-buy-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 18px 6px;
    padding: 13px 16px;
    border-radius: 13px;
    background: #0b2545;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(11, 37, 69, .18);
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease
}

.simba-buy-cta:hover,
.simba-buy-cta:focus {
    background: #123a6b;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(11, 37, 69, .26)
}

.simba-buy-cta:active {
    transform: translateY(1px)
}

.simba-buy-cta svg {
    flex: 0 0 auto
}

@media (prefers-reduced-motion: reduce) {
    .simba-buy-cta {
        transition: none
    }

    .simba-buy-cta:active {
        transform: none
    }
}

/* END simba-ui-r11-cta ====================================================== */


/* ===========================================================================
   SimbaServer phase 12: dashboard money + empty states  (simba-ui r12)
   BEGIN simba-ui-r12-dashboard  --  to revert, delete from this marker down.

   Two problems this fixes, both measured on the live dashboard:

   1. The overdue-invoice alert carried the ONLY copy of the amount owed
      (2,105,000) buried mid-sentence, in Latin digits, with no pay button -
      it linked to the invoice list. The stat tile next to it showed '3',
      a count, which is the less useful of the two numbers. buildDebt() in
      simba-ui-r5.js promotes the amount into a proper card with a direct
      link to WHMCS's own /clientarea.php?action=masspay&all=true.

   2. The two empty side panels cost 267px and 239px to say 'nothing here',
      against 155px for the services panel that is the point of the page.
      The 148px floor comes from the phase-3 block, hence the extra
      specificity here.
   =========================================================================== */

.simba-debt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 16px;
    padding: 20px 24px;
    border: 1px solid #f0d9b5;
    border-radius: 16px;
    background: linear-gradient(180deg, #fffaf2 0%, #fff 100%);
    box-shadow: 0 8px 22px rgba(154, 91, 18, .07)
}

.simba-debt-main {
    display: grid;
    gap: 3px;
    min-width: 0
}

.simba-debt-label {
    color: #9a5b12;
    font-size: 12.5px;
    font-weight: 700
}

.simba-debt-amount {
    color: #7a4708;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.35;
    font-variant-numeric: tabular-nums
}

.simba-debt-amount small {
    font-size: 15px;
    font-weight: 700
}

.simba-debt-sub {
    color: #8a7a63;
    font-size: 12.5px
}

.simba-debt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.simba-debt-pay {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 12px;
    background: #b26a10;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: background .16s ease
}

.simba-debt-pay:hover,
.simba-debt-pay:focus {
    background: #8f540b;
    color: #fff;
    text-decoration: none
}

.simba-debt-view {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid #e6d3b4;
    border-radius: 12px;
    background: #fff;
    color: #7a4708;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background .16s ease
}

.simba-debt-view:hover,
.simba-debt-view:focus {
    background: #fdf6ec;
    color: #7a4708;
    text-decoration: none
}

@media (max-width: 575px) {
    .simba-debt { padding: 16px 18px }
    .simba-debt-amount { font-size: 25px }
    .simba-debt-actions { width: 100% }
    .simba-debt-pay { flex: 1 1 auto; justify-content: center }
}

/* ---- empty side panels: strip the illustration, keep phrase + action ---- */
.page-clientareahome.page-user-logged .client-home-panels .no-data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 0;
    padding: 2px 0;
    text-align: start
}

.page-clientareahome.page-user-logged .client-home-panels .no-data-icon {
    display: none
}

.page-clientareahome.page-user-logged .client-home-panels .no-data .text-light {
    flex: 1 1 auto;
    margin: 0;
    font-size: 13px
}

.page-clientareahome.page-user-logged .client-home-panels .no-data > a {
    flex: 0 0 auto;
    margin: 0
}

/* END simba-ui-r12-dashboard ================================================ */


/* ===========================================================================
   SimbaServer phase 13: narrower client rail  (simba-ui r13)
   BEGIN simba-ui-r13-rail  --  to revert, delete from this marker down.

   The left-wide rail shipped at 280px while its widest label ('سرویس ها')
   measures 74px and the buy CTA 163px — roughly 80px of the rail was empty.
   Lagom drives both the rail and the content offset from this one variable,
   so narrowing it moves them together; the content grid gains the 80px.

   Measured at 200px: no nav label clips, the CTA (a flex row) does not wrap,
   and nothing clips down to 190px, so there is headroom.
   Mobile is unaffected — the off-canvas rail uses --mob-app-nav-width.
   =========================================================================== */

:root {
    --app-nav-left-wide-width: 200px
}

/* END simba-ui-r13-rail ===================================================== */


/* ===========================================================================
   SimbaServer phase 14: nav unpaid counter  (simba-ui r14)
   BEGIN simba-ui-r14-navcount  --  to revert, delete from this marker down.
   Rendered by navCounters() in assets/js/simba-ui-r5.js from the meta tag that
   includes/hooks/simba_nav_counters.php emits.
   =========================================================================== */

.simba-nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    margin-inline-start: 8px;
    padding: 0 6px;
    border-radius: 50px;
    background: #fdeceb;
    color: #a33028;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
    font-variant-numeric: tabular-nums
}

/* END simba-ui-r14-navcount ================================================= */


/* ===========================================================================
   SimbaServer phase 15: top menu layout + dashboard trim  (simba-ui r21)
   BEGIN simba-ui-r21-top  --  to revert, delete from this marker down.

   The client area moved from `Left Wide` to the `Default` menu layout
   (body.lagom-layout-top), so the vertical rail is gone and the menu is a
   horizontal bar. Two consequences this block deals with.

   1. Header height. Phases 2-3 sized the menu for a vertical rail, where a
      46px row and 17px label read as comfortable. Laid out horizontally the
      same numbers stack into 353px of chrome above the first card, against
      280px on my.vareshcloud.com running the same layout near-stock:

          .app-nav-header    88px   vs  74px
          .app-nav-menu     124px   vs  76px
          .main-header      141px   vs 130px

      The menu wrapper is the bulk of it (16px/26px of padding around an
      82px list). Trimmed here rather than in the phase 2-3 rules, because
      those numbers are still right for the rail if the layout is ever
      switched back.

   2. Two dashboard panels that carry nothing. `ثبت دامنه جدید` is a 354px
      search box duplicating the store's own domain search, and `اخبار اخیر`
      renders a full-width panel to say there is no news. The register panel
      goes unconditionally; announcements go only when compactEmpty() in
      simba-ui-r5.js has flagged the column as empty, so publishing a real
      announcement brings the panel back on its own.

      `:has()` collapses the flex column. `#registerDomainPanel` is also
      hidden directly, so a browser without :has() support still loses the
      widget and only leaves an empty cell.

   The lone remaining half-width panel (تیکت های اخیر) needs no rule: the
   phase 3 R3 flex line already lets a trailing item absorb the free space.
   =========================================================================== */

/* ---- 1. header chrome, top layout only ---------------------------------- */
.lagom-layout-top.page-user-logged .app-nav-menu {
    padding-top: 8px;
    padding-bottom: 10px
}

/* Row height is Lagom's own token, not the link box:
       .lagom-layout-top .app-nav-menu .menu > li > a:not(.btn) {
           height: calc(2 * var(--app-nav-top-menu-link-padding-v) + var(--ui-height-base)) }
   With padding-v at its stock calc(2 * 8px) and --ui-height-base at 44px that
   is 76px, so capping min-height or padding on the link changes nothing. The
   token is what moves it: 4px gives 8 + 44 = 52px, and the menu wrapper lands
   on 76px - the same figure my.vareshcloud.com renders.

   Horizontal spacing (simba-ui-r33-nav). The list items carry no margin and
   the list had no gap, so the only thing separating two labels was twice the
   link padding - 24px, which read as one run-on strip. Measured on
   my.vareshcloud.com: their token is calc(3 * 8px) = 24px and their items are
   margin-free too, so their labels sit 48px apart. That is the target.

   It is bought with `column-gap` on the list rather than by widening the link,
   because the active item here is a filled pill: padding would have inflated
   it from 75px to 99px, while a gap leaves the pill alone and puts the air
   between the items where it belongs.

   The padding is still written from the token, because Lagom pulls the list
   back by `margin-left: calc(-1 * var(--app-nav-top-menu-link-padding-h))` to
   sit the first label flush with the container gutter. The old hardcoded 12px
   against Lagom stock -16px is why the menu overhung its own gutter by 4px;
   driving both from one token fixes that too. */
.lagom-layout-top.page-user-logged {
    --app-nav-top-menu-link-padding-v: 4px;
    --app-nav-top-menu-link-padding-h: 12px
}

.lagom-layout-top.page-user-logged .app-nav-menu .menu > li > a:not(.btn) {
    min-height: 40px;
    padding: 8px var(--app-nav-top-menu-link-padding-h);
    font-size: 15px
}

.lagom-layout-top.page-user-logged .app-nav-menu .menu {
    column-gap: 24px
}

/* The list is `flex-wrap: wrap`, so items that outgrow the row drop to a
   second line rather than scrolling. 992px is the narrowest width that still
   renders the horizontal menu - below it Lagom swaps in the drawer - and the
   full 24px leaves next to nothing there. Measured slack at 992px: gap 0 ->
   150px, 12 -> 74px, 16 -> 50px, 24 -> ~2px. So ease off to 12px under
   1200px: still twice the old separation, with room for another menu item. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .lagom-layout-top.page-user-logged .app-nav-menu .menu {
        column-gap: 12px
    }
}

.lagom-layout-top.page-user-logged .main-header {
    padding-top: 24px;
    padding-bottom: 18px
}

/* ---- 2. dashboard: drop the panels that carry nothing -------------------- */
.page-clientareahome.page-user-logged #registerDomainPanel {
    display: none
}

.page-clientareahome.page-user-logged .client-home-panels > *:has(#registerDomainPanel),
.page-clientareahome.page-user-logged .client-home-panels > .simba-panel-empty:has(#announcementsPanel) {
    display: none
}

/* ---- 3. title band aligned with the content ----------------------------- */
/* Phase 2 narrowed the body container to 1240px and left the header on the
   stock 1360px. In the left rail both sat inside the same column so the 60px
   step did not show; with the header band now running the full width of the
   page the title visibly overhangs the first card beneath it. Aligning on
   1240px rather than widening the body, so no table or grid changes width. */
.page-user-logged .main-header > .container {
    max-width: 1240px
}

/* END simba-ui-r21-top ====================================================== */


/* ===========================================================================
   SimbaServer phase 16: typography and brand colour  (simba-ui r24)
   BEGIN simba-ui-r24-look  --  to revert, delete from this marker down.

   1. THE PERSIAN FONT WAS NOT RENDERING.

      Line 13 of this file sets
          --simba-ui-font: "Vazirmatn",Tahoma,"Segoe UI Variable",...
      with Vazirmatn first, and applies it with !important. But
      includes/hooks/simba_homepage_seo.php emits an inline <style> in
      ClientAreaHeadOutput that redefines the same variable:
          :root{--simba-ui-font:"MacLike UI","Segoe UI Variable","Segoe UI",Tahoma,Vazirmatn,...}
      That <style> is head node 17, this file is node 16, so at equal
      specificity the inline block wins and Vazirmatn drops to FIFTH. On
      Windows "Segoe UI" matched, on macOS the system face did - the
      111KB Vazirmatn-Variable.woff2 was downloaded and then barely used.

      Fixed here with :root:root (specificity 0,2,0 beats the inline 0,1,0)
      rather than !important, and rather than editing the hook.

   2. ESTEDAD. Requested to match my.vareshcloud.com, which renders Estedad.
      The face below points at a file that is NOT on the server yet:
          templates/lagom2/assets/fonts/Estedad-Variable.woff2
      Until it is uploaded the src 404s, the family fails to load, and the
      stack falls through to Vazirmatn - which is now first among the fonts
      that DO exist, so the site already looks different. Dropping the woff2
      into that folder is all that is needed to switch it on.

   3. ONE BLUE, NOT TWO. Lagom's own primary is #065CFE (--btn-primary-bg and
      --link-color), while the Simba layer carried #096fc7 / #0875d1, which
      are duller and slightly greener. Buttons and links therefore did not
      match the shell accents. The Simba tokens are moved onto Lagom's blue.
      Only tokens are changed - the literal #096fc7 on the homepage plan
      cards is deliberately left alone, as that is marketing, not the client
      area.

   4. TITLE BAND. The page header carried a radial highlight over a diagonal
      gradient plus a bottom border. Varesh renders its title straight onto
      the page canvas. Flattened to the canvas colour so nav -> title ->
      cards reads as two surfaces instead of four.
   =========================================================================== */

@font-face {
    font-family: "Estedad";
    src: url("/templates/lagom2/assets/fonts/Estedad-Variable.woff2?v=7.3") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap
}

:root:root {
/* Vazirmatn deliberately dropped from the stack. A @font-face alone costs
   nothing, but naming the family in a stack lets the browser fetch it for any
   single glyph Estedad lacks - and it was doing exactly that, 109KB on every
   page view. Estedad v7.3 was measured against all 146 characters the site
   renders and covers every one, so the next stop is Tahoma, a system font
   that costs no download. The Vazirmatn face is left declared (here and in
   the simba_homepage_seo.php inline style) so the file stays usable if the
   font is ever switched back. */
    --simba-ui-font: "Estedad", Tahoma, "Segoe UI Variable", "Segoe UI", Roboto, Arial, sans-serif
}

:root {
    --simba-brand: #065CFE;
    --simba-brand-hover: #0546c9;
    --simba-shell-blue: #065CFE;
    --simba-shell-blue-dark: #0546c9;
    --simba-dash-accent: #065CFE;
    --simba-dash-accent-soft: rgba(6, 92, 254, .1)
}

.page-user-logged .main-header {
    border-bottom: 0;
    background: var(--simba-shell-bg)
}

/* ---- 5. the homepage was still on Vazirmatn ------------------------------
   `simba_homepage_seo.php` emits a ~16KB inline <style> whose very first rule
   is `.sbx-home { font-family: Vazirmatn, Tahoma, "Segoe UI", Arial, sans-serif }`
   - a stack hardcoded separately from --simba-ui-font. Everything inside the
   marketing page inherits it, so after the Estedad switch the site rendered in
   TWO fonts: Estedad in the client area, Vazirmatn on the homepage. Worse, the
   browser then downloaded both (115KB + 109KB) on a single page view.

   Only that one rule sets a family - the other .sbx-home selectors declare no
   font-family and inherit - so one override is enough. `.sbx-home.sbx-home`
   is specificity 0,2,0 against the inline rule's 0,1,0, which wins regardless
   of source order (that inline <style> is head node 25, after this file).

   Verified before switching: Estedad v7.3 covers all 146 measurable characters
   the site renders (Persian, Latin, both digit sets, currency, punctuation) -
   nothing falls back. Editing the hook would be the tidier fix, but .php
   writes are blocked here. */
.sbx-home.sbx-home {
    font-family: var(--simba-ui-font)
}

/* END simba-ui-r24-look ===================================================== */


/* ===========================================================================
   SimbaServer phase 17: Font Awesome subset  (simba-ui r28)
   BEGIN simba-ui-r28-icons  --  to revert, delete from this marker down.

   Font Awesome was 810KB, 51% of a 1,587KB dashboard:

       fa-solid-900.woff2     346KB
       fa-regular-400.woff2   416KB   <- fetched for ONE icon, far fa-folder
       fontawesome.min.css     43KB gz

   A crawl of 18 public and client pages found the whole site uses **15**
   Font Awesome icons. fa-subset.woff2 carries 188 of them - the 15 seen, 20
   more referenced only from Lagom/WHMCS JavaScript (the ticket editor
   toolbar), and a margin of standard WHMCS chrome for pages the crawl could
   not reach - in 15KB, cut from fa-solid-900 with pyftsubset.

   THE SUBSET DOES NOT REPLACE FONT AWESOME, IT SITS IN FRONT OF IT.
   It is a separate family, so per-character fallback still applies: an icon
   this subset lacks is fetched from the full font exactly as before. A page
   nobody sampled can never lose an icon - it just pays the old cost, once.

   Regular and Light resolve here too. Their glyphs are the same shapes at a
   different weight, and this subset is the only face in its family, so the
   browser uses it instead of pulling another 416KB / 454KB file. Outline
   icons render filled; across the whole site that is fa-folder and
   fa-paperclip.

   .fa-brands / .fab is deliberately UNTOUCHED. Brand glyphs live in
   "Font Awesome 6 Brands" and exist in no other face, so routing them here
   would turn the footer Telegram icon into tofu.

   Doubled selectors (.fas.fas) are specificity 0,2,0 against Font Awesome's
   own 0,1,0. That matters: fontawesome.min.css is loaded AFTER this file, so
   an equal-specificity rule would lose.
   =========================================================================== */

@font-face {
    font-family: "FA Subset";
    src: url("/templates/lagom2/assets/fonts/fa-subset.woff2?v=2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: block
}

.fa-classic.fa-classic, .fas.fas, .fa-solid.fa-solid,
.far.far, .fa-regular.fa-regular,
.fal.fal, .fa-light.fa-light,
.fat.fat, .fa-thin.fa-thin {
    font-family: "FA Subset", "Font Awesome 6 Pro"
}

/* The bare `fa` class picks its family from a custom property. */
.fa.fa {
    --fa-style-family: "FA Subset", "Font Awesome 6 Pro"
}

/* ---- brands, same pattern -----------------------------------------------
   The footer social link is `fab fa-telegram`, and it renders only for
   guests - the logged-in footer layout is the short one - so every visitor
   arriving from search paid 117KB for a single Telegram glyph.

   fa-brands-subset.woff2 is 2,920 bytes: telegram, the other socials a host
   plausibly links, the card marks WHMCS prints on invoices, and cPanel. The
   margin is kept tight on purpose - an unused glyph costs bytes on EVERY
   view, while a missing one costs a single fallback fetch on the one page
   that needs it, and "Font Awesome 6 Brands" is still second in the stack to
   catch exactly that. */
.fab.fab, .fa-brands.fa-brands {
    font-family: "FA Brands Subset", "Font Awesome 6 Brands"
}

@font-face {
    font-family: "FA Brands Subset";
    src: url("/templates/lagom2/assets/fonts/fa-brands-subset.woff2?v=1") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block
}

/* END simba-ui-r28-icons ==================================================== */

/* ===========================================================================
   simba-ui-r35-megamenu - the Store dropdown carried the theme author's logo

   Lagom renders a sidebar panel inside a mega dropdown and, when no image is
   set for that menu item in its Menu Manager, falls back to its OWN artwork:
   /templates/lagom2/assets/img/page-manager/logo-wide.svg. So the Lagom brand
   was sitting inside the client area of a hosting company. Measured before
   removal: one sidebar on the whole page (Store), 332x376px, holding that
   image and zero text nodes - nothing of ours was in it. The image is
   lazyloaded, so hiding the panel means it is never inserted into the DOM and
   never fetched.

   DO NOT also shrink the mega dropdown to close the gap the sidebar leaves.
   r35 first shipped with

       left: auto; right: var(--app-nav-top-menu-link-padding-h); width: auto

   and it broke the panel's position. `li.dropdown-mega` is `position: static`,
   so the dropdown's containing block is `#main-menu > .container`, NOT the
   menu item. `right: 12px` therefore pinned the panel 12px from the
   CONTAINER's right edge while the Store item sits on the far left - measured
   1031px adrift, and the menu appeared to open under a different item.
   Lagom's own `left`/`right: var(--layout-container-gutter)` works precisely
   because a mega panel is full-bleed by design and needs no anchoring.
   Anchoring it properly would mean positioning the li and choosing a side per
   item, which breaks again the moment the menu order changes. The panel stays
   full width; the space the sidebar used to fill is simply empty now.

   `white-space: nowrap` is kept: Lagom splits each column into two
   sub-columns (.dropdown-menu-parent > .dropdown-menu-cols >
   ul.dropdown-menu-list), and at 992px those are ~213px, narrow enough for
   Persian product names like "سرور مجازی ایران" to wrap. Note the nesting - a
   selector such as `.dropdown-menu-parent > * > li > a` misses, because
   .dropdown-menu-cols sits in between.

   Scoped to >=992px and .page-user-logged. The guest menu was checked and has
   zero sidebars (logged out uses the condensed/banner layout, no mega
   dropdown), so there was never a public branding leak.

   If the panel is ever wanted back, the supported route is Lagom addon ->
   Menu Manager -> the Store item, which is where that image is configured.
   =========================================================================== */
@media (min-width: 992px) {
    .page-user-logged .app-nav-menu .dropdown-menu-sidebar {
        display: none
    }

    .page-user-logged .app-nav-menu .menu > li.dropdown-mega .dropdown-menu-list > li > a {
        white-space: nowrap
    }
}

/* ===========================================================================
   simba-ui-r37-menuflags - country flags on the Store dropdown items

   The Store dropdown was rebuilt in the Lagom Menu Manager (Client Main Menu,
   menuId 2, the Store item) from a "Predefined List" of WHMCS product groups
   into seven manual Custom Links, so each one can carry its own icon - the
   same shape my.vareshcloud.com uses. Two things to know before editing it:

   1. An item's label lives in its `translation` JSON keyed by language, NOT
      in `name[custom]`. Writing the label to `name[custom]` saves nothing and
      the item comes back blank. The old "Domains" header rendered in English
      on a Persian site for exactly this reason - only its `english` key was
      filled, and `farsi` fell back to it. Both keys are filled for all seven.

   2. Varesh uploads a PNG per item into assets/img/page-manager/. We do not.
      Lagom's icon field takes a CSS CLASS (its own items use `ls ls-refresh`),
      so the class is set there and the artwork is painted here from Lagom's
      OWN flag set in assets/img/flags/. Nothing is duplicated and a Lagom
      update keeps the flags current. To add a country: one line below, plus
      the matching class on the menu item.

   Lagom emits the icon as `<i class="fas fa-test {our classes}">` - it always
   prepends a Font Awesome pair - so that inherited face has to be silenced or
   it paints a glyph box behind the flag. Hence `content: none` on both
   pseudo-elements and `font-size: 0`.

   Trade-off accepted with the owner: the list no longer follows WHMCS product
   groups automatically. A NEW PRODUCT GROUP WILL NOT APPEAR IN THIS MENU BY
   ITSELF - it has to be added in the Lagom Menu Manager.
   =========================================================================== */
.page-user-logged .app-nav-menu .menu i.simba-flag {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    display: inline-block;
    border-radius: 50%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    box-shadow: 0 0 0 1px rgba(7, 26, 53, .12);
    font-size: 0;
    line-height: 0
}

.page-user-logged .app-nav-menu .menu i.simba-flag::before,
.page-user-logged .app-nav-menu .menu i.simba-flag::after {
    content: none
}

.page-user-logged .app-nav-menu .menu i.simba-flag-ir {
    background-image: url("/templates/lagom2/assets/img/flags/farsi.svg")
}

.page-user-logged .app-nav-menu .menu i.simba-flag-tr {
    background-image: url("/templates/lagom2/assets/img/flags/turkish.svg")
}

.page-user-logged .app-nav-menu .menu i.simba-flag-de {
    background-image: url("/templates/lagom2/assets/img/flags/german.svg")
}

.page-user-logged .app-nav-menu .menu i.simba-flag-ua {
    background-image: url("/templates/lagom2/assets/img/flags/ukrainian.svg")
}

.page-user-logged .app-nav-menu .menu i.simba-flag-nl {
    background-image: url("/templates/lagom2/assets/img/flags/dutch.svg")
}

/* ===========================================================================
   simba-ui-r38-storegrid - lay the Store items out across the mega panel

   With the Predefined List replaced by seven manual items, Lagom renders them
   as ONE `.dropdown-menu-list` stretched to the full 1262px panel: seven rows
   hugging the right edge and the rest of the panel empty, 323px tall.

   The panel itself has to stay full-bleed - see the r35 note above for what
   happens when its position is touched - so the fix spreads the ITEMS rather
   than shrinking the panel. `auto-fit` with a 240px track gives four columns
   at 1440px and folds to fewer as the window narrows, with no breakpoint to
   keep in sync. Measured at 1440px: 1 column / 323px tall -> 4 columns / 130px.

   Scoped to >=992px; below that the menu is a drawer and one column is right.
   =========================================================================== */
@media (min-width: 992px) {
    .page-user-logged .app-nav-menu .menu > li.dropdown-mega .dropdown-menu-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        column-gap: 24px;
        row-gap: 2px
    }
}

/* ===========================================================================
   simba-ui-r39-storetype - the Store dropdown items read as fine print

   Lagom sets dropdown links at 14px/400 in the muted body colour. That is
   right for a plain list, but next to 26px flags in a full-width mega panel it
   looked like small print. Owner asked for bigger and bolder.

   16px/600 in the heading colour, flags 22px -> 26px. Checked against the
   r38 grid before committing: at 1440px the widest label needs 288px and the
   auto-fit track measures 287.5px at 15px, 16px and 17px alike, so nothing
   wraps and no column is dropped - the panel only grows 130px -> 132px even at
   17px. That headroom is why 16px was safe.

   Scoped to `.dropdown-mega` on purpose: the ordinary dropdowns (Services,
   Domains, Billing, Support) keep Lagom's 14px and stay visually secondary to
   the storefront.
   =========================================================================== */
@media (min-width: 992px) {
    .page-user-logged .app-nav-menu .menu > li.dropdown-mega .dropdown-menu-list > li > a {
        color: var(--simba-shell-title);
        font-size: 16px;
        font-weight: 600
    }

    .page-user-logged .app-nav-menu .menu > li.dropdown-mega i.simba-flag {
        width: 26px;
        height: 26px
    }
}

/* ===========================================================================
   simba-ui-r40-tileshape - flat strips glued to the panel below

   Two complaints, one block.

   1. There was NO gap between the tiles row and the panels under it - measured
      0px. `.page-clientareahome .tiles` carries `margin-bottom: 0 !important`
      in theme-rtl.css, which outranked the plain 20px set back in section 3.5,
      so that rule looked applied and did nothing. `!important` here is the
      answer to Lagom's `!important`, and the only reason it appears.

   2. The tiles were 318x101 - an aspect of 3.14, long flat strips. Measured
      my.vareshcloud.com for the target: 222x182, aspect 1.22, a centred column
      (flex-direction: column; justify-content: center; text-align: center)
      with a 62px figure over an 18px label.

      1.22 cannot be copied outright: our container is 1360px against their
      960px, so four columns are 318px wide here and aspect 1.22 would mean a
      260px-tall tile, pushing the real content off the fold. 208px gives 1.53
      - clearly square-ish, still calm. Measured alternatives at this width:
      min-height 180 -> 199px/1.60, 200 -> 208px/1.53, 220 -> 214px/1.48.

   The r32 grid (chip level with the figure) deliberately stays in force BELOW
   768px, where a full-width tile should read as a horizontal strip rather than
   a 208px block costing several screens of scrolling. This flex layout takes
   over only from 768px up; `display: flex` supersedes the grid there and the
   children's grid-area values fall inert, so DOM order - chip, figure, label -
   drives the stack.

   r41: icon back to the corner. Owner asked for a slightly smaller tile
   with the little category icon tucked into the TOP-RIGHT corner - which is
   what Lagom always intended (the class is literally `tile-icon-absolute`,
   and Varesh keeps it absolute at top:10 / right:16). Taking it out of the
   flex flow leaves only figure + label to centre, so the box drops from
   216px to 180px (aspect 1.47 -> 1.77) without looking empty. Chip 52->36,
   figure 52->46, label 15->14. `left: auto` is needed because Lagom sets a
   left offset for the LTR case.
   =========================================================================== */
.page-clientareahome.page-user-logged .tiles {
    margin-bottom: 20px !important
}

@media (min-width: 768px) {
    .page-clientareahome.page-user-logged .tiles {
        margin-bottom: 32px !important
    }

    .page-clientareahome.page-user-logged .tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 180px;
        padding: 22px 18px;
        text-align: center
    }

    .page-clientareahome.page-user-logged .tile .tile-icon-absolute,
    .page-clientareahome.page-user-logged .tile .tile-icon {
        position: absolute;
        top: 14px;
        right: 16px;
        left: auto;
        width: 36px;
        height: 36px;
        border-radius: 11px;
        font-size: 16px
    }

    .page-clientareahome.page-user-logged .tile .tile-stat {
        font-size: 46px;
        line-height: 1;
        text-align: center
    }

    .page-clientareahome.page-user-logged .tile .tile-title {
        font-size: 14px;
        line-height: 1.5;
        text-align: center
    }
}

/* ===========================================================================
   simba-ui-r43-debtbuttons - brand blue text on the amber "pay all" button

   The debt card is amber throughout (gradient #fffaf2, border #f0d9b5, amber
   figure) and both its buttons were painted amber to match - except the LABEL
   came out brand blue (#065CFE) at rest, and so did the border, because border
   colour falls back to currentColor.

   Cause is one specificity token. Lagom has
       a:not(.btn) { color: var(--link-color) }        -> (0,1,1)
   and the rules here were
       .simba-debt-pay { ... }                          -> (0,1,0)
   so the generic link colour outranked the button colour. The :hover rules
   were `.simba-debt-pay:hover` at (0,2,0) and DID win - which is exactly why
   the fault showed up most on hover: the label jumped from blue to white and
   the two states looked like different designs. That is how it was reported.

   Fixed with specificity rather than !important: `.simba-debt a.simba-debt-pay`
   is (0,2,1) and beats both. The colours are the ones the hover states already
   used, so rest and hover now belong to the same palette. Border colour is set
   explicitly so it can never inherit the link colour again.

   Rest fill is #a55f0e, not the #b26a10 the card had been using: white on
   #b26a10 measures 4.23:1, just under the 4.5:1 AA floor, and the label is
   14px - bold, but well below the 18.66px that would let it count as large
   text. #a55f0e measures 4.95:1 and is not visibly less amber. Hover stays
   #8f540b (6.1:1), so the press-state step is still obvious.
   =========================================================================== */
.simba-debt a.simba-debt-pay {
    color: #fff;
    background: #a55f0e;
    border-color: #a55f0e
}

.simba-debt a.simba-debt-pay:hover,
.simba-debt a.simba-debt-pay:focus {
    color: #fff;
    background: #8f540b;
    border-color: #8f540b
}

.simba-debt a.simba-debt-view {
    color: #7a4708;
    background: #fff;
    border-color: #e6d3b4
}

.simba-debt a.simba-debt-view:hover,
.simba-debt a.simba-debt-view:focus {
    color: #7a4708;
    background: #fdf6ec;
    border-color: #d9c096
}

/* ===========================================================================
   simba-ui-r45-domainpage - the domain management page was stock Lagom

   Every other client-area surface had been restyled; this one had not a single
   rule in this file, which is why it read as a different product. Measured
   before touching it:

     .product-icon (the blue tile)  396 x 401 - and the icon inside it is 48x48
     .product-info (the detail card) 396 x 401 - its content is only 277px tall
     each detail row                 45px, because `list-info-v` stacks the
                                     label ABOVE the value, both at the full
                                     332px column width

   So a row spent 45px and half the card width on a label plus a short value,
   and 124px of the card was dead space.

   The fix is the row itself: `flex-direction: row` with `space-between` puts
   the label at the RTL start and the value at the end on ONE line, with a
   dashed rule between rows. Label goes muted 13px, value 14px/700 in the
   heading colour, so the eye lands on the value. Row total 277px -> 240px, and
   the card now reads as a proper spec sheet rather than a stack of fragments.

   Cards get the dashboard treatment (1px border, 16px radius, panel bg, the
   same 1px shadow) so the page belongs to the rest of the panel.

   `.product-icon` is deliberately EXCLUDED from that card rule and only gets
   `border-radius` + `overflow: hidden`. It carries Lagom's blue gradient
   (#003cb2 -> #065cfe); a first attempt included it in the card selector, the
   white panel background painted over the gradient and the white domain name
   went invisible on white. Keep it out of any background rule.

   Scoped to the domain page only. The service details page
   (.page-clientareaproductdetails) uses the same `product-icon` /
   `list-info-v` markup, so widening the selector would style it too - not done
   here because it was not asked for.
   =========================================================================== */
.page-clientareadomaindetails.page-user-logged .list-info-v > li {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin: 0;
    padding: 9px 0;
    border-bottom: 1px dashed var(--simba-shell-border)
}

.page-clientareadomaindetails.page-user-logged .list-info-v > li:first-child {
    padding-top: 0
}

.page-clientareadomaindetails.page-user-logged .list-info-v > li:last-child {
    padding-bottom: 0;
    border-bottom: 0
}

.page-clientareadomaindetails.page-user-logged .list-info-v > li .list-info-title {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    color: var(--simba-shell-muted);
    font-size: 13px;
    font-weight: 500
}

.page-clientareadomaindetails.page-user-logged .list-info-v > li .list-info-text {
    width: auto;
    flex: 0 1 auto;
    margin: 0;
    color: var(--simba-shell-title);
    font-size: 14px;
    font-weight: 700;
    text-align: left
}

.page-clientareadomaindetails.page-user-logged .product-info {
    border: 1px solid var(--simba-shell-border);
    border-radius: var(--simba-shell-radius);
    background: var(--simba-shell-panel);
    box-shadow: var(--simba-shell-shadow)
}

.page-clientareadomaindetails.page-user-logged .product-info {
    padding: 20px 22px
}

.page-clientareadomaindetails.page-user-logged .panel-title {
    color: var(--simba-shell-title);
    font-weight: 700
}

.page-clientareadomaindetails.page-user-logged .product-icon {
    min-height: 0;
    border-radius: var(--simba-shell-radius);
    overflow: hidden
}

/* ===========================================================================
   simba-ui-r46-sidebarpad - r45 fallout: panel titles sat on the card edge

   Giving every `.panel` on this page a border and a background (r45 above)
   exposed a Lagom assumption. The `.panel-sidebar` variants - "مدیریت",
   "عملیات" and "امروز مایل هستید..." - were designed to sit on the page with
   NO card around them, so their chrome has no inset at all:

     .panel                 padding 0
     .panel-heading         padding 0 0 16px      (no top, no sides)
     .list-group-item       flush - measured 2px from the panel edge

   Measured from the panel box to the first glyph of the title: **-3px top and
   -7px right** - the heading was literally overhanging the card it now had.
   The plain `.panel-default` next to it (SSL) has `padding: 16px 20px` and
   measured +13 / +21, which is what the sidebar ones should have looked like.

   Fixing the heading alone was not enough: the list items were flush too, so
   the inset goes on the PANEL and the heading only keeps its bottom gap. After:
   title at +15 top / +13 right, items inset 22px - in line with the SSL panel.

   Scoped to this page because r45 is: elsewhere `.panel-sidebar` still has no
   card and its flush chrome is correct.
   =========================================================================== */
/* superseded by simba-ui-r47-panelchrome below - the overhang is site-wide, not
   specific to this page, so the rule that fixes it lives there. */

/* ===========================================================================
   simba-ui-r47-panelchrome - the title overhang is site-wide, and r45 had
   quietly forked the card style

   Two corrections, found while extending the domain-page work to the service
   details page.

   1. THE OVERHANG IS NOT PAGE-SPECIFIC. r46 fixed it only on the domain page,
      on the theory that giving panels a card there had caused it. Wrong: this
      file has styled `.page-user-logged .panel` as a card since section 3.x,
      so EVERY logged-in page already had cards, and every `.panel-sidebar`
      with a title already overhung it. Measured on the profile page, which
      nothing on this branch had touched: title glyph at -4px top, -8px right,
      panel padding 0, heading padding `0 0 16px`. Same on the service details
      page. r46 has been removed and the rule generalised here.

      `:has()` restricts it to sidebar panels that actually carry a title - the
      avatar panel is also `.panel-sidebar` but has no title and already sets
      its own `padding: 24px`, and must not be double-padded.

   2. r45 FORKED THE CARD STYLE. It gave the domain page `border-radius: 16px`
      with a 1px shadow while the rest of the panel uses `--simba-shell-radius`
      (18px) and `--simba-shell-shadow` (0 14px 38px). Being more specific, it
      won, and that one page drifted away from every other. The `.panel` half of
      that rule is gone; `.product-info` is not a `.panel` so it keeps a rule,
      but now built from the same tokens. Same for the hero radius.

   The service details page needs nothing else: its only `.list-info` is
   `list-info-50`, already horizontal, so the r45 row fix does not apply there.
   =========================================================================== */
.page-user-logged .panel-sidebar:has(> .panel-heading .panel-title) {
    padding: 18px 20px
}

.page-user-logged .panel-sidebar:has(> .panel-heading .panel-title) > .panel-heading {
    padding: 0 0 12px
}

.page-clientareaproductdetails.page-user-logged .product-icon {
    border-radius: var(--simba-shell-radius);
    overflow: hidden
}

/* ===========================================================================
   simba-ui-r50-loginlang - the language switcher read as a raw hyperlink

   Measured on the shipped markup: the toggle is a bare underlined link -
   `text-decoration: underline`, no background, no padding, no radius - at the
   same 14px/400 and the same colour as the "زبان:" label beside it. Nothing
   said it was a control. It is now a compact pill with its own border and fill,
   the label is dropped to 13px at 60% white so the value leads, and the
   underline is gone.

   THE LABEL ALSO READ "Persian" ON A PERSIAN SITE. That is not Lagom - it is
   WHMCS metadata. Every other language carries its native name (العربية,
   Català, 中文, Hrvatski) but farsi is registered as the English "Persian", and
   the toggle prints whatever that field holds. It is not reachable from CSS as
   text, so the text node is collapsed with `font-size: 0` and the native name
   is restored through `::before`, with the caret given its size back.

   SCOPED TO `html[lang="fa"]` DELIBERATELY. WHMCS sets lang="fa" when the site
   renders in Persian and lang="en" in English, so an English visitor still sees
   "English" rather than a hardcoded Persian word. Verified both by fetching
   /login and /login?language=english. If a third language is ever added, it
   keeps its own correct native name - only farsi is patched, because only farsi
   is wrong upstream.
   =========================================================================== */
/* r54: the hairline under the white card. Lagom puts
   `border-top: 1px solid var(--ui-block-divider-color)` on `.login-language`
   at (0,1,0) - a #efeff1 separator meant for a light panel. On this dark
   translucent footer it read as a stray pale line just below the white login
   body. Nothing else was drawing it: a walk over the whole wrapper found this
   as the only border in that position. The colour change between the white body
   and the dark strip already separates them, so the rule is simply switched off
   - this selector is (0,2,0) and wins without !important. */
.page-login .login-language {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 16px;
    border-top: 0
}

.page-login .login-language > span {
    color: rgba(255, 255, 255, .6);
    font-size: 13px
}

.page-login .login-language .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease
}

.page-login .login-language .dropdown-toggle:hover,
.page-login .login-language .dropdown-toggle:focus {
    border-color: rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .16);
    color: #fff;
    text-decoration: none
}

html[lang="fa"] .page-login .login-language .dropdown-toggle {
    font-size: 0
}

html[lang="fa"] .page-login .login-language .dropdown-toggle::before {
    content: "فارسی";
    font-size: 13px;
    font-weight: 600
}

html[lang="fa"] .page-login .login-language .dropdown-toggle .ls-caret {
    font-size: 11px
}

/* ===========================================================================
   simba-ui-r51-farsiname - "Persian" inside the language list itself

   r50 patched the language TOGGLE. The dropdown LIST still printed the English
   "Persian", which only became obvious once the list was cut to two entries.
   Same upstream cause: WHMCS registers farsi with an English name while every
   other language carries its own (العربية, Català, 中文, Deutsch, Русский).

   Unlike the r50 toggle rule this is NOT scoped to `html[lang="fa"]`, and that
   difference is deliberate:
     - the TOGGLE shows the CURRENT language, so on an English site it must say
       "English" - patching it unconditionally would be wrong.
     - a LIST ENTRY shows that language's own name, which is the same in every
       locale. Lagom already does this for the others, so farsi should read
       فارسی whatever the visitor is browsing in.

   Matched on `[data-value="farsi"]` rather than a page class so it also covers
   the switcher inside the client area, not just the login screen.
   =========================================================================== */
.dropdown-menu-item[data-value="farsi"] .language-text {
    font-size: 0
}

.dropdown-menu-item[data-value="farsi"] .language-text::before {
    content: "فارسی";
    font-size: 14px
}

/* ===========================================================================
   simba-ui-r52-navicons / r53-illustrations - icons in the top menu

   The icons were never missing. Every top-level item already had one assigned
   in the Lagom Menu Manager; `display[style][top][layout]` was `text`, which is
   what rendered `nav-item-text-only` and suppressed the mark. Flipping the six
   active items to `icon-text` was the whole change - no new asset, no extra
   request, the artwork was already in the markup.

   r53: owner wanted the illustrations back. They had briefly been swapped for
   Lagom's flat icon font (ls-dashboard, ls-hosting, ...) purely to buy width -
   the coloured illustrations render at 32x32 and pushed the row to 1028px of
   items, wrapping the support CTA onto a second line. He was right that the
   flat set is lifeless, and trading the look for width was the wrong call: the
   width is fixable, the personality is not. The illustrations are back and
   simply drawn smaller.

   22px is measured, not guessed. Item row at 1267px (his own viewport, menu box
   1171px): 32px icons = 1028px of items + 144px of gaps = 1172px, one pixel
   over, hence the wrap. At 22px with the label gap trimmed 16px -> 8px the row
   is 920px + 144px = 1064px, leaving ~107px spare.

   BELOW 1200px THE ICONS COME OFF ENTIRELY. At 992px the six items alone span
   896px of the 896px available, so the CTA wraps whatever the icon size is.
   Two things must go together there:
     1. hide the icon
     2. zero `.item-text`'s margin - it carries
        `margin-right: var(--ui-nav-link-icon-spacing-lg)` (16px) to separate it
        from the icon, and THAT MARGIN SURVIVES `display: none` on the icon:
        16px x 6 items = the exact 96px that kept the row overflowing.

   Both `svg` and `i` are matched: a predefined illustration renders as <svg>, an
   icon-font entry as <i>. An earlier version matched only `i` and silently
   stopped working the moment the illustrations came back.

   The `span` in `> span.item-text` is load-bearing. Lagom sets that margin from
   `.lagom-layout-top .app-nav-menu .menu > li:not(.nav-item-text-only) > a:not(.btn) ...`
   at (0,6,3); the obvious `> .item-text` is (0,6,2) and loses. The element
   selector makes it (0,6,3), and this file loads later, so the tie falls our way.
   =========================================================================== */
.lagom-layout-top.page-user-logged .app-nav-menu .menu > li > a:not(.btn) > svg {
    width: 22px;
    height: 22px
}

.lagom-layout-top.page-user-logged .app-nav-menu .menu > li > a:not(.btn) > span.item-text {
    margin: 0 8px 0 0
}

@media (max-width: 1199.98px) {
    .lagom-layout-top.page-user-logged .app-nav-menu .menu > li > a:not(.btn) > svg,
    .lagom-layout-top.page-user-logged .app-nav-menu .menu > li > a:not(.btn) > i {
        display: none
    }

    .lagom-layout-top.page-user-logged .app-nav-menu .menu > li > a:not(.btn) > span.item-text {
        margin: 0
    }
}

/* ==== BEGIN simba-ui-r56 ====================================================
   footer accordions: the h3[data-toggle] headers are not keyboard-focusable,
   so on mobile the collapsed columns are unreachable without a mouse. The
   proper fix needs the update-wiped core footer.tpl; cheapest safe fix is to
   keep the columns open on mobile. */
@media (max-width:767.98px){
  .main-footer .footer-nav.collapse{display:block!important;height:auto!important}
  .main-footer .footer-title{pointer-events:none}
  .main-footer .footer-title .footer-icon{display:none}
}
/* Lagom global focus ring is rgba(9,111,199,.28) ~1.5:1 - invisible. Solid. */
.lagom :where(a,button,input,select,textarea,.btn):focus-visible{outline:3px solid #0a6ce8;outline-offset:2px}
/* ==== END simba-ui-r56 ==== */

/* ==== BEGIN simba-ui-r58 ====================================================
   skip link (homepage only, printed from header.tpl) + a real touch target
   for the icon-only back-to-top link. a.simba-skip is doubled to (0,2,1) to
   beat Lagom a:not(.btn) - the r43/r41b armour rule. */
.simba-skip{position:absolute;top:-56px;inset-inline-start:8px;z-index:2000;
  background:#065CFE;font-weight:700;padding:12px 20px;border-radius:10px;transition:top .15s}
.lagom a.simba-skip,.lagom a.simba-skip:focus{color:#fff}
.simba-skip:focus{top:8px}
a[aria-label="بازگشت به بالا"]{min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center}
/* ==== END simba-ui-r58 ==== */

/* ==== BEGIN simba-ui-r64 ====================================================
   The thin utility strip above the main nav carries only «مشاهده کارت خرید»
   for a normal visitor - noise on a landing page nobody has shopped on yet.
   Hidden on the homepage ONLY, and brought back the moment it has something
   to say: a non-empty cart badge (Lagom drops .hidden from .nav-badge), or
   the staff «return to admin area» shortcut. */
@media (min-width:992px){
body.page-homepage .app-nav-header{display:none}
body.page-homepage .app-nav-header:has(.nav-item-cart .nav-badge:not(.hidden)),
body.page-homepage .app-nav-header:has(a[href*="returntoadmin"]){display:flex}
}

/* logo_big.png is a palette PNG with NO tRNS chunk, i.e. a solid white
   background. In the footer it sits on the --ice canvas (#f2f6fc) and reads as
   a white box around the mark. multiply against a near-white ground erases the
   white and leaves navy/cyan visually unchanged. Swap in a genuinely
   transparent PNG and this rule can be deleted. */
.footer-company-logo img{mix-blend-mode:multiply}
/* ==== END simba-ui-r64 ==== */

/* r75: the guard used to carry :not(.page-user-logged), copied from the shape
   of the r-series light-nav rules. That meant a signed-in customer landing on
   the homepage got the OLD white bar over the dark hero - the seam this whole
   block exists to remove. The landing page should look the same to everyone,
   so the exclusion is gone; a leading `body` keeps every rule one element
   heavier than the (0,6,2)/(0,7,2) light-nav rules it has to beat. */
/* ==== BEGIN simba-ui-r65 - landing navigation ==============================
   The nav used to be an opaque white bar whose bottom edge cut a hard seam
   across the top of the navy hero. On the landing page the header now floats
   ON the hero, dressed for a dark ground, driven by Lagom's own scroll-state
   body classes - no JS added:
     default          at rest on the hero   -> fully transparent
     body.scroll-up   revealed on scroll-up -> navy glass + blur
   (.scrolled-top is NOT usable as the rest state: Lagom only stamps it after
   the first scroll event, so on first paint the bar would render as glass.)
   Light logo is Lagom's own assets/img/logo/logo-login.png (400x91, palette
   +tRNS, 5KB); logo_big_inverse.png is the same art at 1748x395 / 590KB.
   The two breakpoints are genuinely different components:
     >=992px  #main-menu is the horizontal bar, #header a thin cart strip
     <992px   #header IS the navbar (toggle + logo + cart) and #main-menu is
              an off-canvas drawer - left completely alone so it keeps its
              default opaque panel and dark-on-white links.
   Guard matches the r-series nav rules' own (0,4,0)/(0,6,2) shape. */
body.lagom-not-portal.page-homepage:not(.page-login) header{position:absolute;inset-inline:0;top:0;z-index:1030}
/* THE bug behind "why is the bar grey": .app-nav is the wrapper around BOTH
   #header and #main-menu, and the r-series light-nav block paints it white at
   .lagom-not-portal:not(.page-login):not(.page-user-logged) .app-nav (0,4,1).
   Making only the children transparent left that white behind them, so the
   dark scrim composited over white and produced a grey gradient band instead
   of the hero. Needs .lagom in the compound to reach (0,4,2) and win. */
body.lagom.lagom-not-portal.page-homepage:not(.page-login) .app-nav{background-color:transparent}
/* Button SHAPE is shared by both breakpoints so the mark is consistent in the
   mobile drawer too; the COLOURS stay inside the per-breakpoint blocks because
   that drawer is an opaque white panel and needs the light treatment. */
body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-menu .menu > li > a.btn-outline,body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-menu .menu > li > a.btn-primary{border-radius:11px;font-size:14.5px;font-weight:700}
body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-toggle .icon-bar{background-color:#fff}

@media (min-width:992px){
  body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-menu{transition:background-color .28s ease,box-shadow .28s ease;
    box-shadow:none;background-color:transparent;
    /* a fully transparent bar leaves white labels at the mercy of whatever is
       behind them; this scrim fades to nothing so the seam never comes back */
    background-image:linear-gradient(to bottom,rgba(3,12,26,.38),rgba(3,12,26,0));
    --app-nav-left-link-hover-bg:rgba(255,255,255,.14)}
  body.lagom-not-portal.page-homepage:not(.page-login).scroll-up .app-nav-menu{background-color:rgba(6,23,47,.85);background-image:none;
    -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
    border-bottom:1px solid rgba(255,255,255,.10);box-shadow:0 10px 30px rgba(3,12,26,.28)}
  body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-header{background-color:transparent;border-bottom:1px solid rgba(255,255,255,.08)}
  body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-header a{color:rgba(255,255,255,.72)}
  body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-header a:hover{color:#fff}
  body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-menu .menu > li > a:not(.btn),
  body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-menu .menu > li > a:not(.btn) > .ls,
  body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-menu .menu > li > a:not(.btn) > .lm{color:rgba(255,255,255,.90)}
  /* The r-series light-nav block paints a:hover with var(--simba-shell-blue-soft)
     (#EAF4FF) at (0,7,2). On a 74px-tall transparent bar that is a full-height
     pale block, and with white labels on top it is unreadable - the "big ugly
     grey box" on hover. Replaced with a brighter label plus a short cyan rule
     under it; the guard here is (0,8,2) so it wins without !important. */
  body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-menu .menu > li > a:not(.btn):hover,
  body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-menu .menu > li > a:not(.btn):focus,
  body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-menu .menu > li.show > a:not(.btn){background:transparent;color:#fff}
  body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-menu .menu > li > a:not(.btn){position:relative}
  body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-menu .menu > li > a:not(.btn)::after{content:"";position:absolute;
    bottom:22px;inset-inline:14px;height:2px;border-radius:2px;background:#21b8e8;
    transform:scaleX(0);transition:transform .18s ease}
  body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-menu .menu > li > a:not(.btn):hover::after,
  body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-menu .menu > li.show > a:not(.btn)::after{transform:scaleX(1)}
  body.lagom-not-portal.page-homepage:not(.page-login) #main-menu .logo{background:url("/templates/lagom2/assets/img/logo/logo-login.png") no-repeat center/contain}
  body.lagom-not-portal.page-homepage:not(.page-login) #main-menu .logo img{visibility:hidden}
  /* The nav buttons were still Lagom defaults - 6px corners and 500-weight text
     - inside a page whose every other button is a 13px-radius, 700-weight pill
     (.sbx-btn). 11px on a 44px button is the same corner-to-height ratio the
     51px hero buttons get from 13px, so they read as one family without the
     nav copying the hero's size. */
  body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-menu .menu > li > a.btn-outline,body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-menu .menu > li > a.btn-primary{border-radius:11px;font-size:14.5px;font-weight:700;
    padding-inline:18px;transition:background-color .18s ease,border-color .18s ease,
    color .18s ease,box-shadow .18s ease}
  body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-menu .menu > li > a.btn-outline{background-color:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.30);color:#fff}
  body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-menu .menu > li > a.btn-outline:hover,body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-menu .menu > li > a.btn-outline:focus{background-color:rgba(255,255,255,.17);
    border-color:rgba(255,255,255,.55);color:#fff}
  /* the hero's 0 10px 24px glow is tuned for a 51px button; on a 44px nav
     button it reads as a blob, so it is pulled in and lightened */
  body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-menu .menu > li > a.btn-primary{box-shadow:0 6px 16px rgba(6,92,254,.32)}
  body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-menu .menu > li > a.btn-primary:hover,body.lagom-not-portal.page-homepage:not(.page-login) .app-nav-menu .menu > li > a.btn-primary:focus{background-color:#0546c9;
    border-color:#0546c9;box-shadow:0 8px 20px rgba(6,92,254,.42)}
  body.lagom-not-portal.page-homepage:not(.page-login) .sbx-hero{padding-block-start:154px}
}

@media (max-width:991.98px){
  body.lagom-not-portal.page-homepage:not(.page-login) #header{transition:background-color .28s ease;background-color:transparent;background-image:linear-gradient(to bottom,rgba(3,12,26,.38),rgba(3,12,26,0));
    border-bottom:0;box-shadow:none}
  body.lagom-not-portal.page-homepage:not(.page-login).scroll-up #header{background-color:rgba(6,23,47,.88);background-image:none;
    -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
    border-bottom:1px solid rgba(255,255,255,.10)}
  body.lagom-not-portal.page-homepage:not(.page-login) #header .logo{background:url("/templates/lagom2/assets/img/logo/logo-login.png") no-repeat center/contain}
  body.lagom-not-portal.page-homepage:not(.page-login) #header .logo img{visibility:hidden}
  body.lagom-not-portal.page-homepage:not(.page-login) #header .top-nav > li > a{color:rgba(255,255,255,.90)}
  /* Under 992px Lagom pins #header with position:fixed and compensates with
     body{padding-top:74px}. That padding is exactly why the mobile bar was a
     pale band: the hero began BELOW it, so the scrim composited over the
     --ice canvas instead of the hero. Dropping it on the landing page puts the
     hero under the bar, matching desktop; the hero's own top padding then has
     to clear the 74px bar itself. */
  /* Lagom sets this as body{padding-top:var(--mob-app-nav-header-height)!important}.
     Redefining the variable is NOT safe - it also sizes the fixed bar - so this
     is one of the few places an !important is the correct tool. */
  body.lagom.lagom-not-portal.page-homepage:not(.page-login){padding-top:0!important}
  body.lagom-not-portal.page-homepage:not(.page-login) .sbx-hero{padding-block-start:118px}
}
/* ==== END simba-ui-r65 ==== */

/* ==== BEGIN simba-ui-r68-footer ===========================================
   The page used to end limply: dark hero -> light content -> dark CTA band ->
   a footer with no ground of its own (transparent, so the --ice canvas showed
   through). The page appeared to end twice and the last thing a visitor saw
   was a washed-out block. The footer now sits on a navy DEEPER than the CTA
   band, which turns that band into a raised block and the footer into the
   page's foundation, and bookends the dark hero at the top of the page.
   All of this is CSS: the markup lives in core/layouts/footer/default/
   default.tpl, which a Lagom update overwrites, so nothing here depends on it
   beyond class names. Overrides the lighter simba-ui-r6-footer block above by
   source order plus a .main-footer prefix.
   NOTE: no letter-spacing anywhere - Persian is cursive and spacing breaks the
   letter joins. */
.main-footer{position:relative;color:rgba(255,255,255,.62);
  /* Lagom drives the entire footer off tokens, so redefining them here is far
     more robust than chasing each rule - it carries hover, icon and title
     states with it. The stock values are a light footer: link #4B4F58 at
     17px/300, title #17191C at 20px/400, which is why the columns read as
     sparse grey lists. */
  --main-footer-bg:#04101f;
  --main-footer-border-top:1px solid rgba(255,255,255,.07);
  --main-footer-extended-border-top:1px solid rgba(255,255,255,.07);
  --main-footer-link-color:rgba(255,255,255,.62);
  --main-footer-link-hover-color:#fff;
  --main-footer-link-icon-color:rgba(255,255,255,.55);
  --main-footer-link-icon-hover-color:#21b8e8;
  --main-footer-link-font-size:14.5px;
  --main-footer-link-font-weight:400;
  --main-footer-link-line-height:26px;
  --main-footer-extended-title-color:#fff;
  --main-footer-extended-title-font-size:16px;
  --main-footer-extended-title-font-weight:800;
  --main-footer-extended-desc-color:rgba(255,255,255,.55)}
/* .main-footer-extended.main-footer-extended-gray paints a light grey gradient
   at (0,2,0); match that weight and win on source order. */
.main-footer.main-footer-extended{
  background:radial-gradient(circle at 88% 0%,rgba(33,184,232,.10),transparent 46%),#04101f;
  border-top:1px solid rgba(255,255,255,.07)}
.main-footer .footer-top{padding-block:56px 38px}

/* the landing nav and the footer now close on the same light mark */
.main-footer .footer-company-logo{display:inline-block;
  background:url("/templates/lagom2/assets/img/logo/logo-login.png") no-repeat center/contain}
.main-footer .footer-company-logo img{visibility:hidden}
.main-footer .footer-company-desc{color:rgba(255,255,255,.55);font-size:13.5px;margin-top:14px}

/* social + contact share one chip language instead of three loose treatments */
/* Telegram used to be a lone 40px chip on a horizontal list with nothing
   beside it, while phone and email sat below as icon+label rows - so it read
   as both misaligned and unfinished. It is now the FIRST row of that same
   list: same 34px tile, same gap, and its own aria-label spelled out through
   attr() so any social item added later labels itself. */
/* .footer-nav-h carries margin-inline:-16px to offset its link padding; as a
   vertical list that pushed the row 16px past the contact rows below. */
.main-footer .footer-company-socials{display:grid;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.main-footer .footer-company-socials > li{display:block;margin:0}
.main-footer .footer-company-socials > li > a{display:inline-flex;align-items:center;gap:11px;
  width:auto;height:auto;padding:0;background:none;border:0;border-radius:0;
  color:rgba(255,255,255,.72);font-size:13.5px;line-height:1.7;
  transition:color .18s ease}
.main-footer .footer-company-socials > li > a::after{content:attr(aria-label)}
.main-footer .footer-company-socials > li > a > i{flex:0 0 auto;
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:11px;font-size:15px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.75);
  transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.main-footer .footer-company-socials > li > a:hover{color:#fff}
.main-footer .footer-company-socials > li > a:hover > i{background:rgba(33,184,232,.18);
  border-color:rgba(33,184,232,.50);color:#fff}
/* continues the same list rather than starting a new one */
.main-footer .simba-footer-contact{gap:10px;margin-top:10px}
/* the li is a block around an inline-flex link, so its line-height added 8px
   and broke the 44px rhythm the telegram row sets. */
.main-footer .simba-footer-contact > li{display:flex;margin:0}
.main-footer .simba-footer-contact a{gap:11px;color:rgba(255,255,255,.72);font-size:13.5px}
.main-footer .simba-footer-contact a:hover,
.main-footer .simba-footer-contact a:focus{color:#fff}
.main-footer .simba-footer-contact svg{width:34px;height:34px;padding:9px;border-radius:11px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.75);
  transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.main-footer .simba-footer-contact a:hover svg{background:rgba(33,184,232,.18);
  border-color:rgba(33,184,232,.50);color:#fff}

/* eNamad must sit on white; make it a deliberate badge, not a sticker */
.main-footer .simba-footer-seal{width:92px;margin-top:22px;padding:10px;
  border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.28)}

/* link columns: a short cyan rule carries the accent, since Persian headings
   cannot take letter-spacing */
.main-footer .footer-title{color:#fff;font-size:16px;font-weight:800;
  position:relative;padding-bottom:14px;margin-bottom:8px}
.main-footer .footer-title::after{content:"";position:absolute;bottom:0;
  inset-inline-start:0;width:22px;height:2px;border-radius:2px;background:#21b8e8}
/* Lagom targets .main-footer .footer-nav > li > a at (0,2,2); match the shape. */
.main-footer .footer-nav > li > a,.main-footer .footer-nav > li > a span{transition:color .16s ease}
.main-footer .footer-nav > li > a:hover span,.main-footer .footer-nav > li > a:focus span{color:#fff}
.main-footer .footer-site-map li{margin-bottom:3px}

/* bottom bar */
.main-footer .footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding-block:16px}
.main-footer .footer-copyright{color:rgba(255,255,255,.45);font-size:12.5px}
.main-footer .footer-bottom .footer-nav-h > li > a{color:rgba(255,255,255,.60);border-radius:10px;
  transition:background-color .18s ease,color .18s ease}
.main-footer .footer-bottom .footer-nav-h > li > a:hover{color:#fff;background:rgba(255,255,255,.08)}

/* mobile: r56 force-opens the columns because the h3 toggles are not keyboard
   reachable, which leaves a chevron that no longer does anything and a title
   that still swallows taps. Lagom re-enables both INSIDE .footer-site-map at
   (0,5,0)/(0,4,0) - beating the r56 rules - so match that depth here instead
   of reaching for !important. */
@media (max-width:767.98px){
  .main-footer.main-footer-extended .footer-top .footer-site-map .footer-title{pointer-events:none}
  .main-footer.main-footer-extended .footer-top .footer-site-map .footer-title .footer-icon{display:none}
  .main-footer .simba-footer-seal{width:82px;margin-top:18px}
}
/* ==== END simba-ui-r68-footer ==== */

/* ==== BEGIN simba-ui-r83-store ============================================
   Tidy-up pass on the /store/* pages. Five specific things, all measured:   */

/* 1. The info-card eyebrows were #B45309 - amber-700, from no palette this
      site uses. Brought back to the brand blue the homepage eyebrows use. */
.simba-store-v2 .simba-store-info-card > span{color:#065CFE}

/* 2. The hero ran a 4-column proof row and then a 2-column route row whose
      tiles were 447px wide - the ragged "4 then 2 then 2" look. Same four
      columns for both, so the hero reads as two even rows. */
.simba-store-v2 .simba-store-route{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:767.98px){
  .simba-store-v2 .simba-store-proof,
  .simba-store-v2 .simba-store-route{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 3. (r84) The summary-hiding rule that was here is GONE. vars/custom.css
      carries ".simba-store-v2 .simba-plan-card .simba-plan-summary" at (0,3,0)
      with the comment "restore product summaries hidden by theme-custom.css" -
      i.e. the summaries are deliberately wanted, clamped to 3 lines. That rule
      outweighs anything at (0,2,0), so the r83 rule was dead code. Removed
      rather than escalated: the clamp reads fine and the intent is explicit.
      NOTE for future edits: vars/custom.css is NOT empty. It is the stub from
      2026-08-25 plus a couple of store rules, and it can outrank this file. */

/* 4. The plan CTA was a pale outline (#0A5BA8 on white, #CFE0F2 border) - the
      weakest element on a card whose whole job is that click. Filled brand,
      matching the .sbx-btn language of the landing page. */
.simba-store-v2 .simba-plan-card .package-footer a.btn{background-color:#065CFE;
  border-color:#065CFE;color:#fff;border-radius:13px;font-weight:700;
  box-shadow:0 8px 20px rgba(6,92,254,.26);
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
.simba-store-v2 .simba-plan-card .package-footer a.btn:hover,
.simba-store-v2 .simba-plan-card .package-footer a.btn:focus{background-color:#0546c9;
  border-color:#0546c9;color:#fff;box-shadow:0 10px 24px rgba(6,92,254,.36)}

/* 5. The service tabs overflow (1066px of tabs in 951px) and were showing a
      raw scrollbar track under the row. Keep the scrolling, drop the bar. */
.simba-store-v2 .simba-service-tabs{scrollbar-width:none;-ms-overflow-style:none}
.simba-store-v2 .simba-service-tabs::-webkit-scrollbar{display:none}

/* and the cards pick up the landing page's hover behaviour so the grid feels
   as alive as the homepage one */
.simba-store-v2 .simba-plan-card{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.simba-store-v2 .simba-plan-item:hover .simba-plan-card{border-color:rgba(6,92,254,.45);
  box-shadow:0 16px 38px rgba(18,50,78,.12);transform:translateY(-3px)}
/* ==== END simba-ui-r83-store ==== */

/* ==== BEGIN simba-ui-r84-store ============================================
   Second polish pass on the plan cards, after looking at a card up close. */

/* The spec list read like a receipt: every row carried a 1px dashed rule under
   it. The green ticks already say "included" - the lines were pure noise. */
.simba-store-v2 .simba-plan-specs > li{border-bottom:0;padding-block:6px}

/* The three chips are the card's real comparison content - the numbers a buyer
   comes to compare - but at #F8FBFE on white they were nearly invisible. A
   brand tint makes them the thing the eye lands on after the price, and gives
   the card the accent colour it completely lacked. */
.simba-store-v2 .simba-chips > *{background-color:rgba(6,92,254,.05);
  border-color:rgba(6,92,254,.16)}
/* ==== END simba-ui-r84-store ==== */

/* r89: the r85 «پیشنهاد سیمبا» badge lived here. It duplicated a feature the
   theme already had - products.tpl renders "{if $product.isFeatured} package-featured{/if}"
   and WHMCS carries an isFeatured checkbox on every product - so the badge is
   now set from the admin, per product, and moves without touching CSS. One
   featured plan per group («استاندارد», «M» for the German cloud line); Ukraine
   keeps the two the owner had already chosen. */

/* ==== BEGIN simba-ui-r88-chip-overflow ====================================
   The chip row is grid-template-columns:repeat(3,1fr) and the chip value is
   white-space:nowrap. A 1fr track will not shrink below its min-content, so a
   long value - «AMD Epyc ۷۰۰۳» on the Ukraine plans - pushed the whole row
   past the card and the third chip («رم») was clipped at the card edge.
   minmax(0,1fr) lets the tracks actually divide the width; the value then
   wraps inside its own chip, which is what the extra line-height is for.
   Chips are grid items so they stretch to the tallest one and stay level. */
.simba-store-v2 .simba-chips{grid-template-columns:repeat(3,minmax(0,1fr))}
.simba-store-v2 .simba-chips b{white-space:normal;overflow-wrap:anywhere;line-height:1.45}
/* ==== END simba-ui-r88-chip-overflow ==== */

/* ==== BEGIN simba-ui-r90-service-tabs =====================================
   The service switcher held 8 tabs = 1280px of content in a 951px rail, so
   329px of it sat off-screen, cut mid-word at the edge. r83 had hidden the
   scrollbar to tidy the row, which removed the only hint that it scrolled at
   all - so the row just looked broken. These tabs are the store's primary
   navigation; nothing in them should be hidden. They wrap now, so every
   service is visible at once at any width and there is nothing to scroll.
   (The r83 scrollbar rule above is now moot but harmless.) */
.simba-store-v2 .simba-service-tabs{flex-wrap:wrap;overflow-x:visible;row-gap:10px}
/* ==== END simba-ui-r90-service-tabs ==== */

/* ==== BEGIN simba-ui-r92-innernav-hover ==== */
/* Inner pages: the r-series light-nav rule fills .menu > li > a:not(.btn) with
   --simba-shell-blue-soft on :hover AND on li.active. That link IS the full 114x74 nav
   cell, so the fill reads as a slab dropped behind the label rather than as a control.
   Lagom already ships a 3px underline via li.active > a::after in the very same #065CFE,
   so this drops the fill and promotes that underline to the hover indicator too, matching
   the homepage nav shipped in r65. Homepage and client area keep their own treatments.

   DESKTOP ONLY, and that is load-bearing: below 992px the nav collapses to a stacked
   drawer where the <a> is position:static, so an absolutely positioned ::after anchors to
   the <li> (234px tall, submenu included) instead of the link (56px) and paints a thick
   blue bar across the bottom of the whole expanded group. The drawer also genuinely wants
   a filled active row rather than an underline, so Lagom own treatment is left alone.
   Same trap as r64. */
@media (min-width:992px){
body.lagom.lagom-not-portal:not(.page-homepage):not(.page-login):not(.page-user-logged) .app-nav-menu .menu > li > a:not(.btn):hover,
body.lagom.lagom-not-portal:not(.page-homepage):not(.page-login):not(.page-user-logged) .app-nav-menu .menu > li.active > a:not(.btn){background:transparent;color:var(--simba-shell-blue)}
body.lagom.lagom-not-portal:not(.page-homepage):not(.page-login):not(.page-user-logged) .app-nav-menu .menu > li > a:not(.btn)::after{display:block;content:"";position:absolute;bottom:0;left:18px;right:18px;height:3px;border-radius:3px 3px 0 0;background:var(--simba-shell-blue);transform:scaleX(0);transition:transform .18s ease}
body.lagom.lagom-not-portal:not(.page-homepage):not(.page-login):not(.page-user-logged) .app-nav-menu .menu > li > a:not(.btn):hover::after,
body.lagom.lagom-not-portal:not(.page-homepage):not(.page-login):not(.page-user-logged) .app-nav-menu .menu > li.open > a:not(.btn)::after,
body.lagom.lagom-not-portal:not(.page-homepage):not(.page-login):not(.page-user-logged) .app-nav-menu .menu > li.show > a:not(.btn)::after,
body.lagom.lagom-not-portal:not(.page-homepage):not(.page-login):not(.page-user-logged) .app-nav-menu .menu > li.active > a:not(.btn)::after{transform:scaleX(1)}
}
@media (min-width:992px) and (prefers-reduced-motion:reduce){
body.lagom.lagom-not-portal:not(.page-homepage):not(.page-login):not(.page-user-logged) .app-nav-menu .menu > li > a:not(.btn)::after{transition:none}
}
/* ==== END simba-ui-r92-innernav-hover ==== */

/* ==== BEGIN simba-ui-r93-credit-panel ==== */
/* `.page-user-logged .panel` sets background:var(--simba-shell-panel) (#fff) at (0,2,0),
   outranking Lagom own .panel-summary-primary at (0,1,0). Because it uses the `background`
   SHORTHAND it also clears background-image, so the gradient Lagom paints there
   (--primary-block-bg, #003CB2 -> #065CFE) vanished while the panel inherited white text
   stayed white. The Add Funds balance card rendered as an empty white box: balance,
   minimum deposit and both maximums were all invisible at 1:1 contrast. Give it back.

   Only /clientarea.php?action=addfunds uses this class - checked every other client page.
   The cart summary is a plain .panel-summary (white card, dark text) and is left alone.
   The submit button on this page reads as transparent to a getComputedStyle().
   backgroundColor probe but is FINE - its blue fill is a gradient, so it lives in
   background-image. Do not "fix" it. */
.page-user-logged .panel.panel-summary-primary{background:var(--primary-block-bg)}
/* Lagom fades the labels to rgba(255,255,255,.56) = 2.6:1 against the light end of that
   gradient. Lift them clear of 4.5:1; hierarchy still reads because the balance is 26px
   bold against 12-13px labels. */
.page-user-logged .panel.panel-summary-primary .price .price-total,
.page-user-logged .panel.panel-summary-primary .list-item.faded,
.page-user-logged .panel.panel-summary-primary .list-item.faded .item-name,
.page-user-logged .panel.panel-summary-primary .list-item.faded .item-value{color:rgba(255,255,255,.92)}
/* The rows are flex/space-between/nowrap at 13px in a 184px content box. Persian digits
   with U+066C separators run wider than the Latin originals they replaced, so the
   maximum-balance row no longer fitted: label and value met at gap 0 and the text wrapped
   inside the span. Reserve a gap, stop the number breaking, and let the label shrink. */
.page-user-logged .panel.panel-summary-primary .summary-list .list-item{gap:10px}
.page-user-logged .panel.panel-summary-primary .summary-list .item-value{white-space:nowrap}
.page-user-logged .panel.panel-summary-primary .summary-list .item-name{min-width:0}
/* ==== END simba-ui-r93-credit-panel ==== */

/* ==== BEGIN simba-ui-r95-addfunds-tidy ==== */
/* 1. Lagom gives .summary-content overflow:auto + max-height:500px so a long cart summary
      can scroll inside the sidebar. On Add Funds that panel holds three rows, so the inner
      scroller buys nothing, and at some Windows / mobile font sizes it renders a thumb.
      In RTL a vertical scrollbar sits on the LEFT edge of the rows, which reads as a stray
      artefact rather than a control. Drop the inner scroll on this page only - the cart
      summary keeps it. */
.page-clientareaaddfunds .panel-summary .summary-content{overflow:visible;max-height:none}

/* 2. WHMCS injects the non-refundable notice into this sidebar from a PHP hook, so it is
      not in clientareaaddfunds.tpl (that tpl renders only the form) and the lang string
      cannot be overridden without writing a .php file, which this host refuses. Hidden.
      Scoped to the INFO alert inside the sidebar: real errors render .alert-danger in the
      main column and are never suppressed by this. */
.page-clientareaaddfunds .main-sidebar .alert-info.alert-panel{display:none}
/* ==== END simba-ui-r95-addfunds-tidy ==== */

/* ==== BEGIN simba-ui-r96-logged-in-white-out ==== */
/* `page-user-logged` is on the BODY OF EVERY PAGE once a visitor signs in - homepage and
   store included, not just the client area. Two client-area shell rules therefore reached
   pages they were never written for, and in both cases they replaced a dark background
   while the light text designed for it survived, giving 1:1 contrast.

   1. The footer. `.page-user-logged .main-footer{background:var(--simba-shell-panel)}` at
      (0,2,0) beat Lagom .main-footer at (0,1,0), so the whole redesigned footer went white
      while .footer-copyright stayed rgba(255,255,255,.45) - invisible on EVERY page for a
      logged-in visitor. The dark value is still right there in --main-footer-bg (#04101f,
      set on .main-footer itself), so point at the token rather than repeat the colour.
      The shell border-top would read as a seam on the dark ground, so it goes too.

   2. The configure-product hero. `.page-configureproduct .product-config-info` and
      `.page-user-logged .panel` are BOTH (0,2,0), so source order decided it and the white
      one is later. It is also excluded from `.page-configureproduct .panel-form`, which
      turned out to be the rule actually painting it white - so this one was NOT login
      dependent at all and had been broken for every visitor on the checkout step. Both
      exclusions beat duplicating that gradient in a second place. */
body.lagom.page-user-logged .main-footer{background:var(--main-footer-bg);border-top:0}
/* ==== END simba-ui-r96-logged-in-white-out ==== */


/* ==== BEGIN simba-ui-r103-cart-checkout ==== */
/* 1. Disabled primary buttons kept looking enabled. Lagom disables a button with
      `background-COLOR: var(--btn-disabled-bg)` plus grey text, but
      `.page-user-logged .btn-primary` sets the `background` SHORTHAND to a gradient, which
      lands in background-IMAGE and paints straight over that grey. So the empty-cart
      "ثبت سفارش" button stayed brand blue while its label went grey: 1.23:1, unreadable,
      and it read as clickable when it is not. Third time the shorthand has done this -
      see r93 (balance panel) and r96 (footer). Drop only the image so Lagom own disabled
      colours come through and the enabled gradient is untouched. */
body.lagom.page-user-logged .btn-primary:disabled,
body.lagom.page-user-logged .btn-primary.disabled{background-image:none}

/* 2. Same stray scrollbar the owner reported on Add Funds, still present in the cart
      summary: .summary-content is overflow:auto, and sub-pixel row heights make
      scrollHeight exceed clientHeight by a single pixel - enough for the browser to
      reserve a 15px gutter and paint a thumb that scrolls nothing. In RTL it sits on the
      LEFT of the totals, which is what made it look like a stray artefact. The sidebar is
      sticky and the page scrolls, so an inner scroller earns nothing here either. */
/* .page-order covers all three cart steps - the group listing, the configure step and
   the view/checkout step all carry it, while page-viewcart is only the last two. */
.page-order .panel-summary .summary-content{overflow:visible;max-height:none}
/* ==== END simba-ui-r103-cart-checkout ==== */