/**
 * Khaleej Host - Register a New Domain page.
 * Scoped entirely under .kh-domainreg-page so nothing here leaks into
 * the rest of the site, and none of the real WHMCS domain-checker
 * ids/classes (frmDomainChecker, DomainSearchResults, spotlightTlds,
 * btn-add-to-cart, domain-pricing, etc.) are touched - only new classes
 * are layered alongside them for styling.
 */

.kh-domainreg-page,
.kh-domainreg-page * {
    box-sizing: border-box;
    font-family: "Urbanist", sans-serif;
}

.kh-domainreg-page {
    color: var(--kh-text, #16231f);
    background: #ffffff;
}

.kh-domainreg-page a {
    text-decoration: none;
    color: inherit;
}

.kh-domainreg-page svg {
    width: 1em;
    height: 1em;
}

.kh-domainreg-page button {
    font-family: inherit;
}

/* ===== HERO + SEARCH ===== */
/* Full-bleed: this page's content still sits inside WHMCS's centered
   Bootstrap .container, so the hero needs the same vw-breakout used on
   the plans/login pages to span the true viewport width. */
.kh-dr-hero {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    background:
        radial-gradient(circle at 82% 18%, rgba(242, 185, 15, .16), transparent 30%),
        linear-gradient(135deg, #eaf8f3 0%, #f7fcfa 48%, #fff7df 100%);
    padding: 56px 24px 48px;
    border-bottom: 1px solid #e1eee9;
    overflow: hidden;
}

#main-body:has(.kh-domainreg-page) {
    padding: 0 !important;
}

body:has(.kh-domainreg-page) {
    overflow-x: hidden;
}

.kh-dr-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1120px;
    margin: auto;
    text-align: center;
}

/* Matches the login page's eyebrow pill exactly - translucent white
   background, brand-green text, gold dot - now the one shared style for
   every small label-above-a-heading across the site. */
.kh-dr-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, .75);
    color: var(--kh-green, #33d693);
    border: 1px solid rgba(51, 214, 147, .18);
    box-shadow: 0 8px 25px rgba(4, 60, 45, .04);
    padding: 9px 15px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.kh-dr-label::before {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--kh-gold, #e8b71c);
    border-radius: 50%;
}

/* Shared "premium button" icon badge: every primary gold pill button's
   trailing arrow icon sits inside a small translucent circle, matching
   the site's reference button style. Purely decorative CSS on top of the
   real existing <i> icons already in each button - no markup changes,
   no effect on buttons that don't carry an icon. */
.kh-dr-search-btn i,
.kh-cfg-continue-btn i,
.kh-cd-continue-btn i,
.kh-cart-checkout-btn i,
.kh-checkout-submit-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .28);
}

.kh-dr-h1 {
    margin: 18px 0 12px;
    color: var(--kh-dark, #111a19);
    font-size: clamp(34px, 4.5vw, 54px);
    line-height: 1.08;
    letter-spacing: -1.5px;
    font-weight: 800;
}

.kh-dr-h1 span {
    color: var(--kh-green, #07865f);
}

.kh-dr-sub {
    max-width: 620px;
    margin: 0 auto 30px;
    color: var(--kh-muted, #697873);
    font-size: 15px;
    line-height: 1.7;
}

.kh-dr-search-container {
    max-width: 820px;
    margin: 0 auto;
}

.kh-dr-search {
    padding: 7px;
    background: #fff;
    border: 1px solid #dce2e7;
    border-radius: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    box-shadow: 0 14px 40px rgba(16, 24, 32, .08);
}

.kh-dr-search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    width: 100%;
}

.kh-dr-input {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px 0 14px;
}

.kh-dr-input-icon {
    display: flex;
    font-size: 18px;
    color: var(--kh-green, #07865f);
    flex-shrink: 0;
}

.kh-dr-input input {
    width: 100%;
    border: 0;
    outline: 0;
    padding: 15px 4px;
    font-size: 14px;
    color: var(--kh-dark, #111a19);
    background: transparent;
}

.kh-dr-search-btn {
    height: 48px;
    border: 0;
    padding: 0 26px;
    border-radius: var(--kh-btn-radius);
    background: var(--kh-gold, #e8b71c);
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: .2s ease;
}

.kh-dr-search-btn:hover {
    background: #000;
    color: #fff;
}

.kh-dr-captcha-row {
    width: 100%;
    padding: 10px 8px 4px;
}

/* ===== TRANSFER PAGE - domain field + button ===== */
.kh-dr-transfer-search {
    max-width: 100%;
}

/* Real "epp" field kept in the form for correct serialization, but not
   shown - WHMCS's own Authorization Code popup collects it later in the
   normal cart-configuration step if the registrar requires one. */
.kh-dr-hidden-field {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Authorization Code popup - plain custom overlay (not a Bootstrap
   modal - this theme's modal CSS rendered the backdrop above the
   dialog, making it unclickable and washed out). */
.kh-dr-epp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(9, 20, 17, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.kh-dr-epp-overlay.open {
    display: flex;
}

.kh-dr-epp-box {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
}

.kh-dr-epp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--kh-border, #e5ebe8);
}

.kh-dr-epp-header h5 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-dr-epp-close {
    border: 0;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: #8a9893;
    cursor: pointer;
}

.kh-dr-epp-body {
    padding: 20px 22px;
}

.kh-dr-epp-body p {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--kh-muted, #697873);
}

.kh-dr-epp-body label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 12.5px;
    color: var(--kh-text, #16231f);
}

.kh-dr-epp-body input {
    width: 100%;
    height: 46px;
    border: 1px solid #dce2e7;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 14px;
    outline: none;
}

.kh-dr-epp-body input:focus {
    border-color: var(--kh-green, #07865f);
    box-shadow: 0 0 0 3px rgba(8, 127, 91, .1);
}

.kh-dr-epp-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    background: #fafcfb;
    border-top: 1px solid var(--kh-border, #e5ebe8);
}

.kh-dr-epp-footer button {
    height: 42px;
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

#khEppModalConfirm {
    background: var(--kh-green, #07865f);
    color: #fff;
}

#khEppModalConfirm:hover {
    background: var(--kh-green-dark, #063f32);
}

#khEppModalCancel {
    background: #fff;
    border: 1px solid #dce2e7;
    color: var(--kh-text, #16231f);
}

#khEppModalCancel:hover {
    background: #f4f6f5;
}

.kh-dr-transfer-unavailable {
    max-width: 820px;
    margin: 14px auto 0;
    border-radius: 10px;
}

.kh-dr-popular {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: var(--kh-muted, #697873);
}

.kh-dr-popular-tld {
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 30px;
    color: var(--kh-green-dark, #063f32);
    font-weight: 700;
    transition: .15s ease;
}

.kh-dr-popular-tld:hover {
    border-color: var(--kh-green, #07865f);
    background: var(--kh-green-soft, #eaf8f3);
}

/* ===== SEARCH RESULTS PANEL (real, AJAX-populated) ===== */
.kh-dr-results {
    max-width: 820px;
    margin: 26px auto 0;
    text-align: left;
}

.kh-dr-result-headline {
    background: #fff;
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 10px 30px rgba(16, 24, 32, .06);
}

.kh-dr-result-headline .domain-searching {
    color: var(--kh-muted, #697873);
    font-size: 13.5px;
}

/* When the domain is available, #primaryLookupResult's two real children
   (.domain-available, .domain-price) are laid out as one row: badge+name
   on the left, price+button on the right - matching a reference design.
   Every other real child (.domain-unavailable/.domain-invalid/etc.) is
   mutually exclusive with these two (WHMCS's own JS shows only one state
   at a time), so this flex row only ever applies to the available state. */
#primaryLookupResult {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 16px;
    column-gap: 24px;
}

.kh-dr-result-headline .domain-available {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    color: var(--kh-muted, #697873);
}

.kh-dr-result-headline .domain-available::before {
    content: "AVAILABLE";
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 20px;
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green-dark, #063f32);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .04em;
    order: -1;
}

.kh-dr-result-headline .domain-available strong {
    font-size: 20px;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-dr-result-headline .domain-unavailable,
.kh-dr-result-headline .domain-tld-unavailable,
.kh-dr-result-headline .domain-invalid,
.kh-dr-result-headline .domain-error {
    color: #b5432f;
    font-weight: 700;
    font-size: 15px;
}

.kh-dr-result-headline .domain-length-restrictions {
    display: block;
    margin-top: 4px;
    font-weight: 400;
    font-size: 12px;
    color: var(--kh-muted, #697873);
}

.kh-dr-result-headline .domain-contact-support {
    margin-top: 10px;
}

.kh-dr-idn-note {
    flex-basis: 100%;
    margin: 0;
    font-size: 12.5px;
    color: var(--kh-muted, #697873);
}

.kh-dr-domain-price {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.kh-dr-domain-price .price {
    font-size: 24px;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
    white-space: nowrap;
}

.kh-dr-result-headline .btn-add-to-cart {
    height: 48px;
    padding: 0 30px;
    border: 0;
    border-radius: var(--kh-btn-radius);
    background: var(--kh-gold, #e8b71c);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

.kh-dr-result-headline .btn-add-to-cart:hover {
    background: #000;
    color: #fff;
}

@media (max-width: 560px) {
    #primaryLookupResult {
        flex-direction: column;
        align-items: flex-start;
    }
    .kh-dr-domain-price {
        width: 100%;
        justify-content: space-between;
    }
}

/* Spotlight TLDs (shown alongside a searched name) */
.kh-dr-spotlight {
    margin-top: 16px;
}

.kh-dr-spotlight-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kh-dr-spotlight-item {
    flex: 1 1 150px;
}

.kh-dr-spotlight-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-dr-spotlight-badge {
    position: absolute;
    top: -8px;
    right: 10px;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--kh-gold, #f2b90c);
    color: #171200;
    font-size: 8.5px;
    font-weight: 800;
    text-transform: uppercase;
}

.kh-dr-spotlight-tld {
    font-size: 15px;
    margin-bottom: 6px;
}

.kh-dr-spotlight-card .price {
    color: var(--kh-green, #07865f);
    font-weight: 800;
}

.kh-dr-spotlight-card .btn-add-to-cart {
    margin-top: 8px;
    width: 100%;
    height: 36px;
    border: 0;
    border-radius: var(--kh-btn-radius);
    background: var(--kh-gold, #e8b71c);
    color: #fff;
    font-weight: 700;
    font-size: 11.5px;
    cursor: pointer;
    transition: .2s ease;
}

.kh-dr-spotlight-card .btn-add-to-cart:hover {
    background: #000;
    color: #fff;
}

/* Suggestions */
.kh-dr-suggestions {
    margin-top: 18px;
    background: #fff;
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 14px;
    overflow: hidden;
}

.kh-dr-suggestions-head {
    padding: 14px 20px;
    font-weight: 800;
    font-size: 13px;
    border-bottom: 1px solid var(--kh-border, #e5ebe8);
    background: #fafcfb;
}

.kh-dr-suggestions-list .domain-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 20px;
    border-bottom: 1px solid #f0f2f1;
    font-size: 13px;
}

.kh-dr-suggestions-list .actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kh-dr-suggestions-list .btn-add-to-cart {
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--kh-btn-radius);
    background: var(--kh-gold, #e8b71c);
    color: #fff;
    font-weight: 700;
    font-size: 11.5px;
    cursor: pointer;
    transition: .2s ease;
}

.kh-dr-suggestions-list .btn-add-to-cart:hover {
    background: #000;
    color: #fff;
}

.kh-dr-more-suggestions {
    padding: 12px;
    text-align: center;
    font-size: 12.5px;
    border-top: 1px solid var(--kh-border, #e5ebe8);
}

.kh-dr-more-suggestions a {
    color: var(--kh-green, #07865f);
    font-weight: 700;
}

.kh-dr-suggestions-warning {
    padding: 10px 20px 16px;
    font-size: 11px;
    color: var(--kh-muted, #697873);
}

/* ===== COMMON SECTION WRAPPER ===== */
.kh-dr-section,
.kh-dr-pricing-section,
.kh-dr-action-section {
    max-width: 1120px;
    margin: 0 auto;
    padding: 44px 24px;
}

.kh-dr-heading {
    text-align: center;
    margin-bottom: 26px;
}

.kh-dr-heading span {
    color: var(--kh-green, #07865f);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.kh-dr-heading h2 {
    margin: 8px 0 0;
    color: var(--kh-dark, #111a19);
    font-size: 28px;
    letter-spacing: -.6px;
}

/* ===== FEATURED TLD CARDS ===== */
.kh-dr-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.kh-dr-card {
    background: #fff;
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(16, 24, 32, .05);
    transition: .2s ease;
}

.kh-dr-card:hover {
    transform: translateY(-4px);
    border-color: #b8d9cf;
    box-shadow: 0 14px 30px rgba(16, 24, 32, .1);
}

.kh-dr-card-top {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kh-green-soft, #eaf8f3);
}

.kh-dr-card-top img {
    max-height: 56px;
    max-width: 70%;
}

.kh-dr-card-body {
    padding: 16px;
    text-align: center;
    border-top: 1px solid var(--kh-border, #e5ebe8);
}

.kh-dr-card-tld {
    font-weight: 800;
    font-size: 15px;
    color: var(--kh-dark, #111a19);
    margin-bottom: 6px;
}

.kh-dr-card-price strong {
    color: var(--kh-dark, #111a19);
    font-size: 19px;
    font-weight: 800;
}

.kh-dr-card-price em {
    color: var(--kh-muted, #697873);
    font-style: normal;
    font-size: 12.5px;
}

.kh-dr-card-na {
    color: var(--kh-muted, #697873);
    font-size: 12px;
}

/* ===== PRICING TABLE ===== */
.kh-dr-pricing-box {
    background: #fff;
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(16, 24, 32, .05);
}

.kh-dr-table-top {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid var(--kh-border, #e5ebe8);
}

.kh-dr-view-filter {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kh-dr-view-label {
    color: var(--kh-muted, #697873);
    font-size: 13px;
    font-weight: 600;
}

.kh-domainreg-page .kh-dropdown {
    position: relative;
}

.kh-domainreg-page .kh-dropdown-btn {
    height: 38px;
    min-width: 130px;
    padding: 0 12px;
    border: 1px solid #c9d0d6;
    border-radius: 7px;
    background: #fff;
    color: var(--kh-text, #16231f);
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.kh-domainreg-page .kh-dropdown-btn:hover,
.kh-domainreg-page .kh-dropdown.open .kh-dropdown-btn {
    border-color: var(--kh-green, #07865f);
}

.kh-domainreg-page .kh-dropdown-arrow {
    font-size: 10px;
    display: flex;
    transition: transform .18s ease;
}

.kh-domainreg-page .kh-dropdown.open .kh-dropdown-arrow {
    transform: rotate(180deg);
}

.kh-domainreg-page .kh-dropdown-menu {
    position: absolute;
    z-index: 50;
    top: calc(100% + 5px);
    left: 0;
    min-width: 220px;
    max-height: 340px;
    overflow-y: auto;
    padding: 6px 0;
    background: #fff;
    border: 1px solid #d9dee3;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(16, 24, 32, .14);
    display: none;
}

.kh-domainreg-page .kh-dropdown.open .kh-dropdown-menu {
    display: block;
}

.kh-domainreg-page .kh-dropdown-option {
    display: block;
    width: 100%;
    padding: 9px 14px;
    border: 0;
    background: #fff;
    color: var(--kh-text, #16231f);
    text-align: left;
    font-size: 12.5px;
    cursor: pointer;
}

.kh-domainreg-page .kh-dropdown-option:hover {
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green-dark, #063f32);
}

.kh-domainreg-page .kh-dropdown-option.active {
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green-dark, #063f32);
    font-weight: 700;
}

.kh-filter-count {
    margin-left: 4px;
    color: #8a94a3;
    font-weight: 500;
}

.kh-dr-ext-search {
    height: 38px;
    width: 230px;
    max-width: 100%;
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 8px;
    padding: 0 13px;
    outline: 0;
    font-size: 12px;
}

.kh-dr-table-wrap {
    overflow-x: auto;
}

.kh-dr-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

.kh-dr-table th {
    padding: 14px 20px;
    text-align: left;
    background: var(--kh-dark, #111a19);
    color: #fff;
    font-size: 10.5px;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.kh-dr-table th:not(:first-child) {
    text-align: center;
}

.kh-dr-table td {
    padding: 15px 20px;
    border-bottom: 1px solid #eef0f2;
    font-size: 12.5px;
}

.kh-dr-table td:not(:first-child) {
    text-align: center;
    color: var(--kh-muted, #697873);
}

.kh-dr-table tr:hover td {
    background: #fffdf4;
}

.kh-dr-domain-name {
    color: var(--kh-dark, #111a19);
    font-weight: 800;
    font-size: 13.5px;
}

.kh-dr-hot {
    display: inline-block;
    margin-left: 7px;
    padding: 3px 7px;
    border-radius: 20px;
    background: var(--kh-gold-soft, #fff7d9);
    color: #9a7000;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.kh-dr-no-tlds {
    padding: 30px 20px;
    text-align: center;
    color: var(--kh-muted, #697873);
    font-size: 13px;
}

/* ===== QUICK ACTIONS ===== */
.kh-dr-action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.kh-dr-action-card {
    position: relative;
    padding: 28px 30px;
    border: 1px solid #e2e8e5;
    border-radius: 16px;
    background: linear-gradient(145deg, #ffffff 0%, #f9fcfb 100%);
    box-shadow: 0 10px 28px rgba(16, 24, 32, .05);
    overflow: hidden;
    transition: .2s ease;
}

.kh-dr-action-card:hover {
    transform: translateY(-4px);
    border-color: #b9ded1;
    box-shadow: 0 16px 36px rgba(16, 24, 32, .09);
}

.kh-dr-action-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green, #07865f);
    font-size: 30px;
    margin-bottom: 16px;
}

.kh-dr-action-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: var(--kh-green, #07865f);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.kh-dr-action-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kh-gold, #f2b90c);
}

.kh-dr-action-card h3 {
    margin: 0 0 8px;
    color: var(--kh-dark, #111a19);
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.3px;
}

.kh-dr-action-card p {
    margin: 0 0 18px;
    color: var(--kh-muted, #697873);
    font-size: 12.5px;
    line-height: 1.65;
}

.kh-dr-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: var(--kh-btn-radius);
    background: var(--kh-green, #07865f);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    transition: .2s ease;
}

.kh-dr-action-btn:hover {
    background: var(--kh-gold, #f2b90c);
    color: #171200;
}

.kh-dr-action-btn.secondary {
    background: var(--kh-gold, #f2b90c);
    color: #171200;
}

.kh-dr-action-btn.secondary:hover {
    background: var(--kh-green, #07865f);
    color: #fff;
}

.kh-dr-action-note {
    display: block;
    margin-top: 12px;
    color: #98a1ad;
    font-size: 10px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .kh-dr-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .kh-dr-action-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .kh-dr-hero {
        padding: 44px 18px;
    }
    .kh-dr-search-form {
        flex-direction: column;
        align-items: stretch;
    }
    .kh-dr-search-btn {
        width: 100%;
        justify-content: center;
    }
    .kh-dr-cards {
        grid-template-columns: 1fr;
    }
    .kh-dr-table-top {
        flex-direction: column;
        align-items: stretch;
    }
    .kh-dr-ext-search {
        width: 100%;
    }
}

/* =========================================================
   CONFIGURE DOMAINS PAGE
========================================================= */
.kh-cfg-hero {
    padding: 50px 24px 70px;
}

.kh-cfg-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 40px;
    text-align: left;
}

.kh-cfg-hero-text .kh-dr-label {
    margin: 0 0 0;
}

.kh-cfg-hero-text .kh-dr-h1 {
    text-align: left;
}

.kh-cfg-sub {
    margin: 0;
    text-align: left;
    max-width: 480px;
}

.kh-cfg-illustration {
    position: relative;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kh-cfg-illus-panel {
    width: 300px;
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 20px 45px rgba(16, 24, 32, .15);
}

.kh-cfg-illus-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--kh-green-soft, #eaf8f3);
    border-radius: 30px;
    padding: 8px 14px;
    color: var(--kh-green, #07865f);
    font-size: 12px;
}

.kh-cfg-illus-search svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.kh-cfg-illus-lines {
    margin-top: 14px;
}

.kh-cfg-illus-line {
    height: 8px;
    border-radius: 4px;
    background: #eef2f0;
    margin-bottom: 8px;
}

.kh-cfg-illus-line.short {
    width: 60%;
}

.kh-cfg-illus-shield {
    position: absolute;
    left: 12%;
    bottom: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kh-green, #07865f);
    color: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 25px rgba(7, 134, 95, .3);
}

.kh-cfg-illus-shield svg {
    width: 26px;
    height: 26px;
}

.kh-cfg-illus-globe {
    position: absolute;
    right: 6%;
    bottom: -6px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--kh-green, #07865f);
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(16, 24, 32, .15);
}

.kh-cfg-illus-globe svg {
    width: 22px;
    height: 22px;
}

.kh-cfg-illus-tag {
    position: absolute;
    padding: 6px 12px;
    background: var(--kh-green, #07865f);
    color: #fff;
    border-radius: 8px;
    font-weight: 800;
    font-size: 12px;
    box-shadow: 0 10px 20px rgba(16, 24, 32, .12);
}

.kh-cfg-illus-tag.gold {
    background: var(--kh-gold, #f2b90c);
    color: #171200;
}

.kh-cfg-illus-tag:nth-of-type(1) {
    top: -6px;
    right: 18%;
}

.kh-cfg-illus-tag:nth-of-type(2) {
    top: 30%;
    right: -4%;
}

.kh-cfg-illus-tag:nth-of-type(3) {
    bottom: 22%;
    right: 30%;
}

.kh-cfg-body {
    max-width: 1200px;
    margin: 0 auto 60px;
    padding: 48px 24px 0;
    position: relative;
    z-index: 2;
}

.kh-cfg-card {
    background: #fff;
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(16, 24, 32, .04);
    padding: 22px 26px;
    margin-bottom: 20px;
}

.kh-cfg-details-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.kh-cfg-details-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 180px;
}

.kh-cfg-details-main {
    flex: 1 1 260px;
}

.kh-cfg-details-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green, #07865f);
    font-size: 19px;
}

.kh-cfg-details-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--kh-muted, #697873);
    margin-bottom: 3px;
}

.kh-cfg-domain-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-cfg-details-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--kh-text, #16231f);
}

.kh-cfg-status-good {
    color: var(--kh-green, #07865f);
}

.kh-cfg-status-bad {
    color: #c0392b;
}

.kh-cfg-details-epp {
    flex: 1 1 100%;
    align-items: flex-start;
    border-top: 1px solid var(--kh-border, #e5ebe8);
    padding-top: 16px;
}

.kh-cfg-epp-field {
    flex: 1;
}

.kh-cfg-epp-field .kh-cfg-details-label {
    display: block;
}

.kh-cfg-epp-help {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--kh-muted, #697873);
}

.kh-cfg-input {
    width: 100%;
    height: 46px;
    border: 1px solid #dce2e7;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 14px;
    outline: none;
    background: #fff;
    color: var(--kh-dark, #111a19);
}

.kh-cfg-input:focus {
    border-color: var(--kh-green, #07865f);
    box-shadow: 0 0 0 3px rgba(8, 127, 91, .1);
}

/* Addons - real checkboxes toggled via WHMCS's own iCheck-based JS
   (.addon-products / .panel-addon / .panel-add / .panel-price kept
   exactly, so the click-to-toggle + totals recalculation still work) */
.kh-cfg-addon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.kh-cfg-addon-card {
    background: #fff;
    border: 1px solid var(--kh-border, #e5ebe8);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(16, 24, 32, .06);
    cursor: pointer;
    transition: .2s ease;
}

.kh-cfg-addon-card:hover {
    border-color: #b9ded1;
    box-shadow: 0 14px 34px rgba(16, 24, 32, .1);
}

.kh-cfg-addon-card.panel-addon-selected {
    border-color: var(--kh-green, #07865f);
}

.kh-cfg-addon-body {
    padding: 20px 22px 16px;
}

.kh-cfg-addon-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.kh-cfg-addon-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
}

.kh-cfg-addon-icon-green {
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green, #07865f);
}

.kh-cfg-addon-icon-gold {
    background: var(--kh-gold-soft, #fff7d9);
    color: #9a7000;
}

.kh-cfg-addon-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
    margin: 0;
}

.kh-cfg-addon-desc {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--kh-muted, #697873);
}

.kh-cfg-addon-price {
    padding: 9px 22px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--kh-text, #16231f);
    background: var(--kh-green-soft, #eaf8f3);
}

.kh-cfg-addon-card:has(.kh-cfg-addon-icon-gold) .kh-cfg-addon-price {
    background: var(--kh-gold-soft, #fff7d9);
}

.kh-cfg-addon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    background: var(--kh-gold, #e8b71c);
    transition: .2s ease;
}

.kh-cfg-addon-card:hover .kh-cfg-addon-btn,
.kh-cfg-addon-btn:hover {
    background: #000;
    color: #fff;
}

.kh-cfg-fields-card {
    display: grid;
    gap: 12px;
}

.kh-cfg-field-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f2f1;
    font-size: 13px;
}

.kh-cfg-field-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.kh-cfg-field-label {
    color: var(--kh-muted, #697873);
    font-weight: 700;
}

.kh-cfg-field-value {
    color: var(--kh-text, #16231f);
    text-align: right;
}

.kh-cfg-ns-heading {
    margin-bottom: 18px;
    align-items: flex-start;
}

.kh-cfg-ns-title {
    font-size: 18px;
}

.kh-cfg-ns-desc {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--kh-muted, #697873);
    font-weight: 400;
}

.kh-cfg-ns-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.kh-cfg-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--kh-text, #16231f);
}

.kh-cfg-continue-row {
    text-align: center;
    margin-top: 10px;
}

.kh-cfg-continue-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: var(--kh-btn-radius);
    background: var(--kh-gold, #e8b71c);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}

.kh-cfg-continue-btn:hover {
    background: #000;
    color: #fff;
}

@media (max-width: 900px) {
    .kh-cfg-hero-inner {
        grid-template-columns: 1fr;
    }
    .kh-cfg-illustration {
        display: none;
    }
    .kh-cfg-hero-text .kh-dr-h1,
    .kh-cfg-sub {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .kh-cfg-hero-text {
        text-align: center;
    }
    .kh-cfg-ns-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .kh-cfg-ns-grid {
        grid-template-columns: 1fr;
    }
    .kh-cfg-details-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
   SHOPPING CART PAGE
========================================================= */
.kh-cart-trust-row {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
}

.kh-cart-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kh-cart-trust-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--kh-green, #07865f);
    font-size: 16px;
    box-shadow: 0 6px 16px rgba(16, 24, 32, .08);
}

.kh-cart-trust-item strong {
    display: block;
    font-size: 12.5px;
    color: var(--kh-dark, #111a19);
}

.kh-cart-trust-item small {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    color: var(--kh-muted, #697873);
}

.kh-cart-illustration {
    height: 200px;
}

.kh-cart-illus-cart {
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--kh-green, #07865f);
    font-size: 56px;
    box-shadow: 0 20px 45px rgba(16, 24, 32, .15);
}

.kh-cart-illustration .kh-cfg-illus-tag:nth-of-type(2) {
    top: -6px;
    right: 14%;
}

.kh-cart-illustration .kh-cfg-illus-tag:nth-of-type(3) {
    top: 34%;
    right: -6%;
}

.kh-cart-illustration .kh-cfg-illus-tag:nth-of-type(4) {
    bottom: 18%;
    right: 26%;
}

.kh-cart-illustration .kh-cfg-illus-globe {
    left: -8%;
    top: 10%;
}

.kh-cart-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}

/* Explicit resets: this orderform's own base style.css has old
   float/percentage-width rules for .secondary-cart-body/-sidebar that
   would otherwise conflict with this grid layout - kh-cart-main/
   kh-cart-sidebar are deliberately NOT reusing those class names. */
.kh-cart-main,
.kh-cart-sidebar {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

.kh-cart-sidebar {
    position: sticky !important;
    top: 20px;
    align-self: start;
    z-index: 5;
}

.kh-cart-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 3px solid var(--kh-gold, #f2b90c);
}

.kh-cart-card-title svg {
    width: 20px;
    height: 20px;
    color: var(--kh-green, #07865f);
}

.kh-cart-table-head {
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
    margin-top: 10px;
    background: var(--kh-green-soft, #eaf8f3);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--kh-green-dark, #063f32);
}

.kh-cart-items {
    display: flex;
    flex-direction: column;
}

.kh-cart-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 4px;
    border-bottom: 1px solid #f0f2f1;
}

.kh-cart-item.kh-cart-subitem {
    padding-left: 40px;
    background: #fafcfb;
}

.kh-cart-item-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green, #07865f);
    font-size: 17px;
}

.kh-cart-item-main {
    flex: 1;
    min-width: 0;
}

.kh-cart-item-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-cart-item-sub {
    font-size: 12px;
    color: var(--kh-muted, #697873);
    margin-top: 2px;
}

.kh-cart-item-domain {
    font-size: 12.5px;
    color: var(--kh-green, #07865f);
    font-style: italic;
    margin-top: 2px;
}

.kh-cart-item-options {
    display: block;
    color: var(--kh-muted, #697873);
    margin-top: 3px;
}

.kh-cart-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: #f4f6f5;
    color: var(--kh-text, #16231f);
    cursor: pointer;
    flex-shrink: 0;
}

.kh-cart-icon-btn svg {
    width: 14px;
    height: 14px;
}

.kh-cart-icon-btn:hover {
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green, #07865f);
}

.kh-cart-remove-btn:hover {
    background: #fdeceb;
    color: #c0392b;
}

.kh-cart-item-qty {
    width: 90px;
    flex-shrink: 0;
    text-align: center;
}

.kh-cart-qty-input {
    width: 100%;
    height: 34px;
    text-align: center;
    border: 1px solid #dce2e7;
    border-radius: 6px;
    margin-bottom: 4px;
}

.kh-cart-qty-update {
    width: 100%;
    height: 26px;
    border: 0;
    border-radius: 6px;
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green-dark, #063f32);
    font-size: 10.5px;
    cursor: pointer;
}

.kh-cart-item-price {
    flex-shrink: 0;
    width: 160px;
    text-align: right;
    font-size: 14px;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-cart-item-price small,
.kh-cart-item-price .kh-cart-renewal {
    display: block;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--kh-muted, #697873);
}

.kh-cart-cycle {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--kh-muted, #697873);
}

.kh-cart-period-dropdown {
    display: inline-block;
}

.kh-cart-period-btn {
    height: 26px;
    padding: 0 10px;
    border: 1px solid #dce2e7;
    border-radius: 6px;
    background: #fff;
    font-size: 11px;
    cursor: pointer;
}

.kh-cart-credit-row {
    background: var(--kh-gold-soft, #fff7d9);
    border-radius: 8px;
    padding: 10px 12px;
}

.kh-cart-empty {
    padding: 40px 0;
    text-align: center;
    color: var(--kh-muted, #697873);
    font-size: 14px;
}

.kh-cart-actions-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--kh-border, #e5ebe8);
}

.kh-cart-actions-left {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kh-cart-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border: 1px solid #dce2e7;
    border-radius: var(--kh-btn-radius);
    background: #fff;
    color: var(--kh-text, #16231f);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.kh-cart-action-btn svg {
    width: 15px;
    height: 15px;
}

.kh-cart-action-btn:hover {
    border-color: var(--kh-green, #07865f);
    color: var(--kh-green, #07865f);
}

.kh-cart-action-danger {
    color: #c0392b;
    border-color: #f3d7d3;
}

.kh-cart-action-danger:hover {
    background: #fdeceb;
    border-color: #e6b6af;
    color: #c0392b;
}

.kh-cart-action-primary {
    background: var(--kh-gold, #e8b71c);
    border-color: var(--kh-gold, #e8b71c);
    color: #fff;
}

.kh-cart-action-primary:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}

.kh-cart-tax-panel {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--kh-border, #e5ebe8);
}

.kh-cart-tax-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 560px;
    margin: 0 auto 16px;
}

.kh-cart-promo-card {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.kh-cart-promo-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green, #07865f);
    font-size: 19px;
}

.kh-cart-promo-text {
    flex: 1 1 220px;
}

.kh-cart-promo-text strong {
    display: block;
    font-size: 13.5px;
    color: var(--kh-dark, #111a19);
}

.kh-cart-promo-text small {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--kh-muted, #697873);
}

.kh-cart-promo-form {
    flex: 1 1 320px;
}

.kh-cart-promo-inline {
    display: flex;
    gap: 10px;
}

.kh-cart-promo-inline .kh-cfg-input {
    flex: 1;
}

.kh-cart-promo-applied {
    display: inline-block;
    margin-right: 10px;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green-dark, #063f32);
    font-weight: 700;
    font-size: 12.5px;
}

/* Order summary sidebar */
.kh-cart-summary-card {
    border-radius: 16px !important;
    overflow: hidden;
}

.kh-cart-summary-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 24px 16px;
    background: transparent;
    color: var(--kh-dark, #111a19);
    font-size: 18px;
    font-weight: 800;
    border-bottom: 3px solid var(--kh-gold, #f2b90c);
}

.kh-cart-summary-head svg {
    width: 18px;
    height: 18px;
    color: var(--kh-green, #07865f);
}

.kh-cart-summary-body {
    padding: 22px 24px 24px;
    position: relative;
}

#orderSummaryLoader {
    position: absolute;
    top: 14px;
    right: 20px;
    color: var(--kh-green, #07865f);
}

.kh-cart-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    font-size: 13px;
    color: var(--kh-text, #16231f);
}

.kh-cart-summary-bordered {
    border-top: 1px solid var(--kh-border, #e5ebe8);
    border-bottom: 1px solid var(--kh-border, #e5ebe8);
    margin: 4px 0;
}

.kh-cart-summary-totals {
    font-weight: 700;
}

.kh-cart-recurring {
    text-align: right;
}

.kh-cart-recurring span {
    display: block;
    font-size: 12px;
    color: var(--kh-muted, #697873);
}

.kh-cart-recurring .cost {
    color: var(--kh-dark, #111a19);
    font-weight: 700;
}

.kh-cart-total-due {
    margin-top: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--kh-green-soft, #eaf8f3);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kh-cart-total-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--kh-green-dark, #063f32);
}

.kh-cart-total-amt {
    font-size: 26px;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-cart-express {
    margin-top: 16px;
}

.kh-cart-or-separator {
    text-align: center;
    margin: 10px 0;
    font-size: 11px;
    color: var(--kh-muted, #697873);
}

.kh-cart-checkout-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    margin-top: 18px;
    border: none;
    border-radius: var(--kh-btn-radius);
    background: var(--kh-gold, #e8b71c);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}

.kh-cart-checkout-btn:hover {
    background: #000;
    color: #fff;
}

.kh-cart-checkout-btn.disabled {
    opacity: .5;
    pointer-events: none;
}

@media (max-width: 960px) {
    .kh-cart-grid {
        grid-template-columns: 1fr;
    }
    .kh-cart-sidebar {
        position: static;
    }
}

@media (max-width: 700px) {
    .kh-cart-illustration {
        display: none;
    }
    .kh-cart-item {
        flex-wrap: wrap;
    }
    .kh-cart-item-price {
        width: auto;
        text-align: left;
        margin-left: 54px;
    }
    .kh-cart-table-head {
        display: none;
    }
    .kh-cart-tax-row {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   CHOOSE A DOMAIN (product configuration) PAGE
========================================================= */
.kh-cd-card {
    max-width: 900px;
    margin: 0 auto;
}

.kh-cd-heading {
    margin: 0 0 20px;
    font-size: 24px;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-cd-options {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 10px;
}

/* Flat by default - no border/shadow on an option until it's the
   selected one, matching the reference's minimal look. */
.kh-cd-option {
    border-radius: 10px;
    transition: .15s ease;
}

.kh-cd-option.option-selected {
    background: #fafcfb;
    border: 1px solid var(--kh-border, #e5ebe8);
    overflow: hidden;
}

.kh-cd-option-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 6px;
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--kh-text, #16231f);
}

.kh-cd-option.option-selected .kh-cd-option-label {
    padding: 16px 18px;
    font-weight: 700;
    color: var(--kh-dark, #111a19);
}

/* Recolor the real radio (iCheck's own sprite skin can't be recolored,
   so its background image is swapped for a plain CSS-drawn ring/dot -
   the input keeps working exactly as before, iCheck isn't disabled). */
.kh-cd-option-label .iradio_square-blue {
    width: 20px;
    height: 20px;
    background: none !important;
    border: 2px solid #c9d0d6;
    border-radius: 50%;
    box-sizing: border-box;
}

.kh-cd-option-label .iradio_square-blue.checked {
    border-color: var(--kh-green-dark, #063f32);
    background: var(--kh-green-dark, #063f32) !important;
    box-shadow: inset 0 0 0 3px #fff;
}

.kh-cd-input-group {
    padding: 0 18px 18px;
}

.kh-cd-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.kh-cd-domain-input-plain {
    flex: 1;
    min-width: 200px;
    height: 46px;
}

.kh-cd-select {
    height: 46px;
    min-width: 110px;
}

.kh-cd-select-wide {
    height: 46px;
    flex: 1;
}

.kh-cd-btn {
    height: 46px;
    padding: 0 26px;
    flex-shrink: 0;
    white-space: nowrap;
    margin-top: 0;
}

.kh-cd-btn-green {
    border: 0;
    border-radius: var(--kh-btn-radius);
    background: var(--kh-gold, #e8b71c);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.kh-cd-btn-green:hover {
    background: #000;
    color: #fff;
}

.kh-cd-continue-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;
    padding: 0 26px;
    border-radius: var(--kh-btn-radius);
}

.kh-cd-free-note {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--kh-muted, #697873);
    text-align: center;
}

.kh-cd-results {
    margin-top: 20px;
}

.kh-cd-result-box {
    padding: 18px;
    border-radius: 12px;
    background: #fafcfb;
    border: 1px solid var(--kh-border, #e5ebe8);
    text-align: center;
}

.kh-cd-result-box .headline {
    font-size: 15px;
    font-weight: 700;
}

.kh-cd-result-box .domain-available.headline {
    color: var(--kh-green, #07865f);
}

.kh-cd-result-box .domain-unavailable.headline,
.kh-cd-result-box .domain-invalid .headline {
    color: #b5432f;
}

.kh-cd-idn-note {
    margin: 14px auto 8px;
    max-width: 480px;
    font-size: 12.5px;
    color: var(--kh-muted, #697873);
}

.kh-cd-price {
    margin-top: 12px;
    font-size: 20px;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-cd-continue-row {
    text-align: center;
    margin-top: 20px;
}

@media (max-width: 700px) {
    .kh-cd-illustration {
        display: none;
    }
    .kh-cd-row {
        flex-direction: column;
        align-items: stretch;
    }
    .kh-cd-select,
    .kh-cd-btn {
        width: 100%;
    }
}

/* Safety net: WHMCS's real "w-hidden" utility class (used to show/hide
   AJAX-controlled elements like #btnDomainContinue, #DomainSearchResults,
   spotlight/suggestion panels) sets plain "display:none" with no
   !important, same as our own button classes below setting plain
   "display:flex" - a same-specificity tie that stylesheet load order
   was resolving in our favour, keeping things like #btnDomainContinue
   visible from page load even though it should start hidden. Fixed
   with a slightly more specific (but still non-!important) compound
   selector, so the real .show()/.removeClass() calls those buttons
   depend on later still work exactly as before (an inline style from
   .show() always wins over any non-!important class rule anyway). */
.kh-cart-checkout-btn.w-hidden,
.kh-cart-action-btn.w-hidden,
.kh-dr-search-btn.w-hidden,
.kh-cart-icon-btn.w-hidden,
.kh-cd-btn-green.w-hidden,
.kh-cd-continue-btn.w-hidden {
    display: none;
}

/* =========================================================
   CONFIGURE PRODUCT (billing cycle) PAGE
   Order Summary sidebar intentionally reuses .kh-cart-summary-*
   classes as-is - same component as the cart page, not a new design.
========================================================= */
.kh-cp-order-card {
    padding: 0;
    overflow: hidden;
}

.kh-cp-order-section {
    padding: 22px 24px;
    border-top: 1px solid var(--kh-border, #e5ebe8);
}

.kh-cp-order-section-first {
    border-top: none;
}

.kh-cp-service-title {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-cp-cycle-section {
    padding-top: 30px;
}

.kh-cp-cycle-divider {
    position: relative;
    text-align: center;
    margin-bottom: 22px;
}

.kh-cp-cycle-divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--kh-border, #e5ebe8);
}

.kh-cp-cycle-divider span {
    position: relative;
    display: inline-block;
    padding: 0 16px;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--kh-muted, #697873);
}

.kh-cp-spec-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
    padding: 16px 20px;
    border: 1.5px solid var(--kh-gold, #e8b71c);
    border-radius: 10px;
}

.kh-cp-spec-item {
    display: flex;
    flex-direction: column;
    min-width: 90px;
}

.kh-cp-spec-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--kh-muted, #697873);
    margin-bottom: 4px;
}

.kh-cp-spec-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--kh-dark, #111a19);
}

.kh-cp-spec-note {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--kh-muted, #697873);
    margin-top: 2px;
}

@media (max-width: 700px) {
    .kh-cp-spec-row {
        gap: 14px 24px;
    }
}

.kh-cp-cfgopt-header {
    margin-bottom: 16px;
}

.kh-cp-cfgopt-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-cp-cfgopt-sub {
    margin: 0;
    font-size: 13px;
    color: var(--kh-muted, #697873);
}

.kh-cp-select-wrap {
    position: relative;
}

.kh-cp-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 14px 44px 14px 16px;
    border: 1.5px solid var(--kh-border, #e5ebe8);
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--kh-dark, #111a19);
    cursor: pointer;
    transition: border-color .15s ease;
}

.kh-cp-select:focus {
    outline: none;
    border-color: var(--kh-green-dark, #063f32);
}

.kh-cp-select-chevron {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
    color: var(--kh-muted, #697873);
}

.kh-cp-select-chevron svg {
    width: 100%;
    height: 100%;
}

.kh-cp-feature-subgroup {
    margin-top: 4px;
}

.kh-cp-feature-subheading {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-cp-feature-row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 10px 0;
}

.kh-cp-feature-row + .kh-cp-feature-row {
    border-top: 1px solid var(--kh-border, #e5ebe8);
}

.kh-cp-feature-label {
    flex: 0 0 180px;
    font-size: 14px;
    font-weight: 700;
    color: var(--kh-dark, #111a19);
}

.kh-cp-feature-select-wrap {
    flex: 1;
    max-width: 480px;
}

.kh-cp-feature-select-wrap .kh-cp-select {
    padding-top: 11px;
    padding-bottom: 11px;
    font-weight: 500;
}

@media (max-width: 600px) {
    .kh-cp-feature-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .kh-cp-feature-label {
        flex-basis: auto;
    }

    .kh-cp-feature-select-wrap {
        max-width: none;
    }
}

.kh-cp-login-username {
    font-size: 14px;
    color: var(--kh-muted, #697873);
}

.kh-cp-login-password-row {
    align-items: flex-start;
}

.kh-cp-login-password-col {
    flex: 1;
    max-width: 480px;
}

.kh-cp-generate-pw-link {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--kh-green-dark, #063f32);
    text-decoration: underline;
    cursor: pointer;
}

.kh-cp-password-input-wrap {
    position: relative;
}

.kh-cp-password-input {
    width: 100%;
    padding: 14px 44px 14px 16px;
    border: 1.5px solid var(--kh-border, #e5ebe8);
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    color: var(--kh-dark, #111a19);
    transition: border-color .15s ease;
}

.kh-cp-password-input:focus {
    outline: none;
    border-color: var(--kh-green-dark, #063f32);
}

.kh-cp-password-toggle {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: none;
    color: var(--kh-muted, #697873);
    cursor: pointer;
}

.kh-cp-password-toggle svg {
    width: 100%;
    height: 100%;
}

.kh-cp-password-error {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: #d9364f;
}

.kh-cp-password-notes {
    margin: 12px 0 0;
    padding-left: 18px;
    font-size: 12px;
    color: var(--kh-muted, #697873);
}

.kh-cp-password-notes li {
    margin-bottom: 4px;
}

@media (max-width: 600px) {
    .kh-cp-login-password-col {
        max-width: none;
    }
}

/* Region picker: map illustration beside continent tabs + priced region
   list, side by side. The map is only vertically centered against the
   (taller) picker column, not centered as its own standalone block. */
.kh-cp-region-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

/* Contabo's own region-configurator SVG (svg/region-map.svg), used as-is
   rather than a hand-built oval + positioned labels. */
.kh-cp-region-map {
    flex: 0 0 320px;
    max-width: 320px;
}

.kh-cp-region-map-img {
    width: 100%;
    height: auto;
    display: block;
}

.kh-cp-region-picker {
    flex: 1;
    min-width: 0;
}

.kh-cp-region-tabs {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid var(--kh-border, #e5ebe8);
    margin-bottom: 16px;
}

.kh-cp-region-tab {
    background: none;
    border: none;
    padding: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--kh-muted, #697873);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    outline: none;
    box-shadow: none;
}

.kh-cp-region-tab:focus,
.kh-cp-region-tab:focus-visible,
.kh-cp-region-tab:active {
    outline: none;
    box-shadow: none;
}

.kh-cp-region-tab.active {
    color: var(--kh-green-dark, #063f32);
    border-bottom-color: var(--kh-green-dark, #063f32);
}

.kh-cp-region-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kh-cp-region-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border: 1.5px solid var(--kh-border, #e5ebe8);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s ease;
}

.kh-cp-region-row input[type="radio"] {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.kh-cp-region-row:has(input[type="radio"]:checked) {
    border-color: var(--kh-green-dark, #063f32);
}

.kh-cp-region-name-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kh-cp-region-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--kh-dark, #111a19);
}

.kh-cp-region-latency {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--kh-muted, #697873);
}

.kh-cp-region-latency:empty {
    display: none;
}

.kh-cp-region-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--kh-green-dark, #063f32);
}

.kh-cp-region-cycle {
    font-weight: 500;
    color: var(--kh-muted, #697873);
}

@media (max-width: 700px) {
    .kh-cp-region-layout {
        flex-direction: column;
        align-items: stretch;
    }

    .kh-cp-region-map {
        flex: 0 0 auto;
        max-width: 320px;
        margin: 0 auto;
    }
}

.kh-cp-cycle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.kh-cp-cycle-item {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

.kh-cp-cycle-box {
    position: relative;
    height: 100%;
    padding: 18px 14px;
    border: 1.5px solid var(--kh-border, #e5ebe8);
    border-radius: 10px;
    text-align: center;
    background: #fff;
    transition: .15s ease;
}

.kh-cp-cycle-box input[type="radio"] {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.kh-cp-cycle-radio {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0 auto 10px;
    border: 2px solid #c9d0d6;
    border-radius: 50%;
    box-sizing: border-box;
}

.kh-cp-cycle-box input[type="radio"]:checked ~ .kh-cp-cycle-radio,
.kh-cp-cycle-box:has(input[type="radio"]:checked) .kh-cp-cycle-radio {
    border-color: var(--kh-green-dark, #063f32);
    background: var(--kh-green-dark, #063f32);
    box-shadow: inset 0 0 0 3px #fff;
}

.kh-cp-cycle-box:has(input[type="radio"]:checked) {
    border-color: var(--kh-green-dark, #063f32);
    background: var(--kh-green-soft, #eaf8f3);
}

/* Safety net: the site-wide iCheck plugin (base.js/scripts.js) is meant to
   skip inputs with .no-icheck, but if it still wraps this radio in its own
   markup, force it hidden so only our single .kh-cp-cycle-radio circle
   shows - never two indicators stacked on the same option. */
.kh-cp-cycle-box .icheckbox_square-blue,
.kh-cp-cycle-box .iradio_square-blue,
.kh-cp-cycle-box ins.iCheck-helper {
    display: none !important;
}

.kh-cp-cycle-title {
    display: block;
    font-weight: 800;
    font-size: 14px;
    color: var(--kh-dark, #111a19);
    margin-bottom: 4px;
}

.kh-cp-cycle-cost {
    display: block;
    font-size: 13px;
    color: var(--kh-green-dark, #063f32);
    font-weight: 700;
}

.kh-cp-save-badge {
    position: absolute;
    top: -10px;
    right: 10px;
    z-index: 2;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--kh-gold, #f2b90c);
    color: #171200;
    font-size: 10.5px;
    font-weight: 800;
}

.kh-cp-summary-container {
    padding: 0;
    color: var(--kh-text, #16231f);
}

.kh-cp-summary-container b,
.kh-cp-summary-container strong {
    color: var(--kh-dark, #111a19);
    font-weight: 800;
}

/* Overrides all.css's #order-standard_cart .summary-container (loads
   before this file, so equal-specificity rules here win on source order) -
   that stock rule crams everything into 10px padding at 0.8em font, which
   reads too small/cramped in this narrower sidebar. #producttotal's actual
   content is WHMCS's own raw fragment (see cleanupOrderSummary() in the
   .tpl), stripped down to just the plan price, setup fee and total. */
#order-standard_cart .summary-container {
    /* Stretched to the full card width (matching the yellow header divider
       above it) via negative margins that cancel out .kh-cart-summary-body's
       own 24px side padding, rather than removing that padding globally -
       the Continue button below it should keep its current inset look. */
    margin-left: -24px;
    margin-right: -24px;
    padding: 18px 24px;
    border-radius: 0;
    background: var(--kh-bg-soft, #f6f8f7);
    font-size: 15px;
    line-height: 1.5;
}

#order-standard_cart .summary-container .clearfix {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--kh-border, #e5ebe8);
}

/* Per-selection breakdown rows (Location, Storage, OS, etc. - WHMCS marks
   these with a leading "»") - compact/muted so they read as a nested
   detail under the plan price above them, not another full line item. */
#order-standard_cart .summary-container .clearfix.kh-cp-summary-item-row {
    padding: 4px 0;
    border-bottom: none;
    font-size: 12px;
    color: var(--kh-muted, #697873);
}

#order-standard_cart .summary-container .kh-cp-summary-item-row .pull-left.float-left {
    padding-left: 6px;
}

#order-standard_cart .summary-container .kh-cp-summary-item-row .pull-right.float-right {
    font-weight: 500;
    color: var(--kh-muted, #697873);
}

/* Restore the border only on the last itemized row, so the group as a
   whole still separates cleanly from Setup Fees/Monthly below it. */
#order-standard_cart .summary-container .kh-cp-summary-item-row:last-of-type {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--kh-border, #e5ebe8);
}

#order-standard_cart .summary-container .pull-right.float-right {
    white-space: nowrap;
    font-weight: 700;
    color: var(--kh-dark, #111a19);
}

#order-standard_cart .summary-container .summary-totals {
    margin: 4px 0 0;
    padding: 0;
    border: none;
}

#order-standard_cart .summary-container .summary-totals .clearfix:last-child {
    border-bottom: none;
    font-weight: 800;
    font-size: 16px;
}

#order-standard_cart .summary-container .total-due-today {
    display: flex;
    flex-direction: row-reverse;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 2px solid var(--kh-gold, #f2b90c);
}

#order-standard_cart .summary-container .total-due-today span {
    display: inline;
    text-align: left;
}

#order-standard_cart .summary-container .total-due-today .amt {
    font-size: 24px;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

@media (max-width: 700px) {
    .kh-cp-cycle-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* =========================================================
   CHECKOUT PAGE
   No sidebar on this page (removed per request) - full width,
   single-column reading flow. Every id/name/class from the
   original template (form action, field names, gateway radios
   with their real data-* attributes, #btnCompleteOrder's literal
   <i class="fas fa-arrow-circle-right">, etc.) is preserved as-is;
   only the surrounding markup is reorganized into cards.
========================================================= */
.kh-checkout-wrap {
    max-width: 820px;
    margin: 0 auto;
}

.kh-checkout-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
}

.kh-checkout-topbar-text {
    margin: 0;
    font-size: 13.5px;
    color: var(--kh-muted, #697873);
}

.kh-checkout-topbar-actions {
    display: flex;
    gap: 10px;
}

.kh-checkout-card {
    padding: 28px 30px;
}

.kh-checkout-section-label {
    position: relative;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--kh-border, #e5ebe8);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--kh-dark, #111a19);
}

.kh-checkout-card > .kh-checkout-section-label:not(:first-child) {
    margin-top: 26px;
}

.kh-checkout-payment-card .kh-checkout-total-due {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
    padding: 16px 20px;
    border-radius: 12px;
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green-dark, #063f32);
    font-size: 13.5px;
    font-weight: 700;
}

.kh-checkout-total-due strong {
    font-size: 20px;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-checkout-gateways {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 18px;
}

.kh-checkout-gateway-item {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 9px 16px;
    border: 1.5px solid var(--kh-border, #e5ebe8);
    border-radius: 50px;
    background: #fff;
    font-weight: 700;
    font-size: 13px;
    color: var(--kh-text, #16231f);
    white-space: nowrap;
    cursor: pointer;
    transition: .15s ease;
}

.kh-checkout-gateway-item:has(.iradio_square-blue.checked) {
    border-color: var(--kh-green-dark, #063f32);
    background: var(--kh-green-soft, #eaf8f3);
}

/* Recolor iCheck's own sprite skin, same technique used on the
   "choose a domain" options page - the payment radios keep their
   real ifChecked/ifUnchecked events (gateway switching depends on
   them), only their visual skin changes. */
.kh-checkout-gateway-item .iradio_square-blue {
    width: 16px;
    height: 16px;
    background: none !important;
    border: 2px solid #c9d0d6;
    border-radius: 50%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.kh-checkout-gateway-item .iradio_square-blue.checked {
    border-color: var(--kh-green-dark, #063f32);
    background: var(--kh-green-dark, #063f32) !important;
    box-shadow: inset 0 0 0 2px #fff;
}

.kh-checkout-payment-card .existing-cc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

/* The real CVV-help popover trigger (Bootstrap ".btn.btn-default",
   untouched markup/behavior) was inheriting an oversized dark button
   look from this page's general button styling. Scoped back down to
   a small neutral circular info icon - same real data-toggle/
   data-content popover attributes, purely a size/color fix. */
.kh-checkout-payment-card .input-group {
    display: flex;
    align-items: stretch;
}

.kh-checkout-payment-card .input-group .field.form-control {
    flex: 1;
}

.kh-checkout-payment-card .input-group-btn.input-group-append {
    display: flex;
    margin-left: 8px;
}

.kh-checkout-payment-card .input-group-btn .btn.btn-default {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1f3f2;
    border: 1px solid var(--kh-border, #e5ebe8);
    color: var(--kh-muted, #697873);
    font-weight: 800;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.kh-checkout-payment-card .input-group-btn .btn.btn-default:hover {
    background: var(--kh-gold, #e8b71c);
    border-color: var(--kh-gold, #e8b71c);
    color: #fff;
}

/* Recolor the "Enter New Card Information" radio the same
   sprite-swap way as every other iCheck-driven radio on this page -
   was showing iCheck's unstyled default blue skin. */
.kh-checkout-payment-card ul .iradio_square-blue {
    width: 19px;
    height: 19px;
    background: none !important;
    border: 2px solid #c9d0d6;
    border-radius: 50%;
    box-sizing: border-box;
}

.kh-checkout-payment-card ul .iradio_square-blue.checked {
    border-color: var(--kh-green-dark, #063f32);
    background: var(--kh-green-dark, #063f32) !important;
    box-shadow: inset 0 0 0 3px #fff;
}

.kh-checkout-final {
    margin-top: 26px;
    text-align: center;
}

.kh-checkout-tos {
    display: block;
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--kh-muted, #697873);
}

.kh-checkout-submit-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    border: 0;
    border-radius: var(--kh-btn-radius);
    background: var(--kh-gold, #e8b71c);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}

.kh-checkout-submit-btn:hover {
    background: #000;
    color: #fff;
}

.kh-checkout-submit-btn.disabled,
.kh-checkout-submit-btn[disabled] {
    opacity: .5;
    pointer-events: none;
}

.kh-checkout-ssl-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 12.5px;
    color: var(--kh-muted, #697873);
    text-align: center;
}

.kh-checkout-ssl-note svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--kh-green, #07865f);
}

.marketing-email-optin h4 {
    margin-top: 0;
}

@media (max-width: 700px) {
    .kh-checkout-card {
        padding: 22px 18px;
    }
}

/* ===== Product Addons page (addons.tpl) =====
   Was completely unstyled stock WHMCS markup - a plain serif h1, a khaki
   Bootstrap 3 alert box, a grey button, and bare bordered product cards.
   Scoped under .kh-addons-page (wraps #order-standard_cart on this page
   only) so nothing here touches the cart/checkout/domain pages, which
   already have their own styling elsewhere in this file. */
.kh-addons-page,
.kh-addons-page * {
    font-family: "Urbanist", sans-serif;
    box-sizing: border-box;
}

.kh-addons-page svg {
    width: 1em;
    height: 1em;
}

.kh-addons-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5ebe8;
}

.kh-addons-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green, #33d693);
}

.kh-addons-header-icon svg {
    width: 19px;
    height: 19px;
}

.kh-addons-header h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #111a19;
}

.kh-addons-empty {
    max-width: 480px;
    margin: 40px auto;
    padding: 40px 30px;
    text-align: center;
    background: #fff;
    border: 1px solid #e5ebe8;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(16, 24, 32, .05);
}

.kh-addons-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--kh-gold-soft, #fff7d9);
    color: var(--kh-gold-dark, #dca400);
}

.kh-addons-empty-icon svg {
    width: 24px;
    height: 24px;
}

.kh-addons-empty p {
    margin: 0 0 22px;
    color: #5b6b7a;
    font-size: 14px;
    line-height: 1.6;
}

.kh-addons-return-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    border-radius: var(--kh-btn-radius);
    background: var(--kh-gold, #e8b71c);
    color: #fff !important;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none !important;
    transition: .15s ease;
}

.kh-addons-return-btn svg {
    width: 14px;
    height: 14px;
}

.kh-addons-return-btn:hover {
    background: #000;
    color: #fff !important;
}

/* --- Addon product cards (when addons ARE available) --- */
#order-standard_cart.kh-addons-page .products .product.kh-addon-card,
.kh-addons-page #order-standard_cart .products .product.kh-addon-card {
    background: #fff !important;
    border: 1px solid #e5ebe8 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(16, 24, 32, .05);
    padding: 0 0 16px !important;
    overflow: hidden;
    transition: .15s ease;
}

#order-standard_cart.kh-addons-page .products .product.kh-addon-card:hover,
.kh-addons-page #order-standard_cart .products .product.kh-addon-card:hover {
    border-color: var(--kh-gold, #e8b71c) !important;
    box-shadow: 0 14px 28px rgba(16, 24, 32, .08);
}

.kh-addons-page .products .product.kh-addon-card header {
    display: flex !important;
    align-items: center;
    gap: 12px;
    background: #f9fbfa !important;
    border-bottom: 1px solid #e5ebe8;
    border-radius: 16px 16px 0 0 !important;
    padding: 16px 20px !important;
}

.kh-addons-page .products .product.kh-addon-card header span:not(.kh-addon-card-icon) {
    font-size: 15px !important;
    font-weight: 800;
    color: #111a19;
}

.kh-addon-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green, #33d693);
}

.kh-addon-card-icon svg {
    width: 16px;
    height: 16px;
}

.kh-addons-page .products .product div.product-desc {
    font-size: 13px;
    color: #5b6b7a;
    line-height: 1.6;
}

.kh-addons-page .products .product .form-control {
    height: 42px;
    border-radius: 9px;
    border: 1.5px solid #e5ebe8;
    font-size: 13px;
}

.kh-addons-page .products .product .form-control:focus {
    border-color: var(--kh-green, #33d693);
    box-shadow: none;
}

.kh-addons-page .products .product div.product-pricing span.price {
    font-size: 15px !important;
    font-weight: 800;
    color: #111a19;
}

.kh-addon-order-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px !important;
    border-radius: var(--kh-btn-radius) !important;
    background: var(--kh-gold, #e8b71c) !important;
    border-color: var(--kh-gold, #e8b71c) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 12.5px !important;
}

.kh-addon-order-btn:hover {
    background: #000 !important;
    border-color: #000 !important;
}

/* ===== Domain Renewals page (domain-renewals.tpl) =====
   Was completely unstyled stock markup - a plain serif h1, bare bordered
   list rows with a raw Bootstrap 3 label, a grey "Order Summary" box, and
   default-blue "View Cart"/black "Add to Cart" buttons. Scoped under
   .kh-renewals-page (wraps #order-standard_cart on this page only) so it
   can't affect viewcart/checkout/domain pages, which keep their own
   styling elsewhere in this file. Every real id (#domainRenewals,
   #renewalPricing{id}, #renewDomain{id}, #orderSummary, #btnGoToCart,
   #scrollingPanelContainer) and the recalculateRenewalTotals()/sticky-
   summary JS that depends on them is untouched - only new classes and
   icon spans are layered on top. */
.kh-renewals-page,
.kh-renewals-page * {
    font-family: "Urbanist", sans-serif;
    box-sizing: border-box;
}

.kh-renewals-page svg {
    width: 1em;
    height: 1em;
}

.kh-renewals-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5ebe8;
}

.kh-renewals-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green, #33d693);
}

.kh-renewals-header-icon svg {
    width: 19px;
    height: 19px;
}

.kh-renewals-header h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #111a19;
}

.kh-renewals-filter-wrap {
    margin-left: auto;
}

.kh-renewals-filter-wrap .domain-renewals-filter {
    height: 42px;
    border-radius: 9px;
    border: 1.5px solid #e5ebe8;
    font-size: 13px;
    min-width: 220px;
}

.kh-renewals-filter-wrap .domain-renewals-filter:focus {
    border-color: var(--kh-green, #33d693);
    box-shadow: none;
}

.kh-renewals-showing {
    margin-bottom: 14px;
    font-size: 13px;
    color: #5b6b7a;
}

.kh-renewals-showing a {
    color: var(--kh-green, #07865f);
    font-weight: 700;
}

/* --- Empty state --- */
.kh-renewals-empty {
    max-width: 480px;
    margin: 40px auto;
    padding: 40px 30px;
    text-align: center;
    background: #fff;
    border: 1px solid #e5ebe8;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(16, 24, 32, .05);
}

.kh-renewals-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--kh-gold-soft, #fff7d9);
    color: var(--kh-gold-dark, #dca400);
}

.kh-renewals-empty-icon svg {
    width: 24px;
    height: 24px;
}

.kh-renewals-empty p {
    margin: 0 0 22px;
    color: #5b6b7a;
    font-size: 14px;
    line-height: 1.6;
}

.kh-renewals-return-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    border-radius: var(--kh-btn-radius);
    background: var(--kh-gold, #e8b71c);
    color: #fff !important;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none !important;
    transition: .15s ease;
}

.kh-renewals-return-btn svg {
    width: 14px;
    height: 14px;
}

.kh-renewals-return-btn:hover {
    background: #000;
    color: #fff !important;
}

/* --- Each domain renewal row ---
   The real markup is 6 flat sibling elements (icon we add, the status
   label div, the <h3> domain name, the expiry <p>, the renewal-period
   <form>, and the button's wrapper div) - NOT flex here. An earlier pass
   made the whole row `display:flex`, which squeezed all 6 into one line
   and wrapped both the expiry date and the "Add to Cart" button text
   badly. Simpler and robust instead: absolutely-position the icon out of
   flow, pad the row to clear it, and let everything else stack normally
   (block) - the status label keeps WHMCS/Bootstrap's own `float-right`
   (no override needed), and the button's own `.text-right` wrapper
   right-aligns it on its own line. */
.kh-renewals-page .domain-renewals .domain-renewal.kh-renewal-item,
.kh-renewals-page .domain-renewals .domain-renewal.kh-renewal-item:nth-child(even) {
    position: relative;
    margin: 0 0 14px !important;
    padding: 20px 22px 20px 74px !important;
    background: #fff !important;
    border: 1px solid #e5ebe8 !important;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(16, 24, 32, .04);
    transition: .15s ease;
    overflow: hidden;
}

.kh-renewals-page .domain-renewals .domain-renewal.kh-renewal-item:hover {
    border-color: var(--kh-gold, #e8b71c) !important;
    box-shadow: 0 10px 24px rgba(16, 24, 32, .07);
}

.kh-renewal-item-icon {
    position: absolute;
    left: 20px;
    top: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--kh-green-soft, #eaf8f3);
    color: var(--kh-green, #33d693);
}

.kh-renewal-item-icon svg {
    width: 17px;
    height: 17px;
}

.kh-renewals-page .domain-renewal.kh-renewal-item h3 {
    font-size: 16px !important;
    font-weight: 800;
    color: #111a19;
}

.kh-renewals-page .domain-renewal.kh-renewal-item p {
    font-size: 12.5px;
    color: #5b6b7a;
    margin-bottom: 8px;
}

.kh-renewals-page .domain-renewal.kh-renewal-item .pull-right.float-right {
    margin-left: 12px;
}

.kh-renewals-page .domain-renewal.kh-renewal-item .text-right {
    margin-top: 12px;
}

/* Real semantic classes WHMCS assigns per status - restyled as rounded
   pills instead of square Bootstrap 3 labels, same colour language as
   every other status pill on the site. */
.kh-renewals-page .label {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700;
    text-transform: none;
    white-space: nowrap;
}

.kh-renewals-page .label-success {
    background: var(--kh-green-soft, #eaf8f3) !important;
    color: var(--kh-green-dark, #063f32) !important;
}

.kh-renewals-page .label-warning {
    background: var(--kh-gold-soft, #fff7d9) !important;
    color: var(--kh-gold-dark, #dca400) !important;
}

.kh-renewals-page .label-danger {
    background: #fdecec !important;
    color: #c0392b !important;
}

.kh-renewals-page .label-info,
.kh-renewals-page .label-grey {
    background: #eef1f0 !important;
    color: #5b6b7a !important;
}

.kh-renewal-select {
    height: 40px !important;
    border-radius: 9px !important;
    border: 1.5px solid #e5ebe8 !important;
    font-size: 12.5px !important;
}

.kh-renewal-select:focus {
    border-color: var(--kh-green, #33d693) !important;
    box-shadow: none !important;
}

.kh-renewals-page .domain-renewal.kh-renewal-item .control-label {
    font-size: 12px !important;
    color: #5b6b7a !important;
}

.kh-renewal-add-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 18px !important;
    border-radius: var(--kh-btn-radius) !important;
    border: none !important;
    background: var(--kh-gold, #e8b71c) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

.kh-renewal-add-btn .to-add,
.kh-renewal-add-btn .added {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.kh-renewal-add-btn:hover {
    background: #000 !important;
}

.kh-renewal-add-btn .added {
    color: var(--kh-green-dark, #063f32) !important;
}

/* --- Sticky "Order Summary" sidebar --- */
.kh-renewals-summary {
    position: sticky;
    top: 18px;
}

.kh-renewals-page .order-summary {
    background: #fff !important;
    border: 1px solid #e5ebe8 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(16, 24, 32, .05);
    overflow: hidden;
}

.kh-renewals-page .order-summary h2 {
    background: #111a19 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    padding: 16px !important;
}

.kh-renewals-page .summary-container {
    background: #fff !important;
    font-size: 12.5px !important;
}

.kh-renewals-page .order-summary .total-due-today .amt {
    color: var(--kh-gold-dark, #dca400) !important;
}

.kh-renewals-cart-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px !important;
    padding: 0 !important;
    border-radius: var(--kh-btn-radius) !important;
    border: none !important;
    background: var(--kh-gold, #e8b71c) !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 13px !important;
}

.kh-renewals-cart-btn:hover {
    background: #000 !important;
    color: #fff !important;
}

@media (max-width: 700px) {
    .kh-renewals-header {
        flex-wrap: wrap;
    }
    .kh-renewals-filter-wrap {
        margin-left: 0;
        width: 100%;
    }
    .kh-renewals-filter-wrap .domain-renewals-filter {
        width: 100%;
    }
    .kh-renewals-page .domain-renewals .domain-renewal.kh-renewal-item {
        flex-wrap: wrap;
    }
}

/* Image section (Operating System + License grouped as OS/Panels tabs) */
.kh-cp-image-tabs {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid var(--kh-border, #e5ebe8);
    margin-bottom: 16px;
}

.kh-cp-image-tab {
    background: none;
    border: none;
    padding: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--kh-muted, #697873);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    outline: none;
    box-shadow: none;
}

.kh-cp-image-tab:focus,
.kh-cp-image-tab:focus-visible,
.kh-cp-image-tab:active {
    outline: none;
    box-shadow: none;
}

.kh-cp-image-tab.active {
    color: var(--kh-green-dark, #063f32);
    border-bottom-color: var(--kh-green-dark, #063f32);
}

.kh-cp-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.kh-cp-image-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--kh-border, #e5ebe8);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s ease;
}

.kh-cp-image-card input[type="radio"] {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.kh-cp-image-card:has(input[type="radio"]:checked) {
    border-color: var(--kh-green-dark, #063f32);
}

/* OS family cards - a UI filter, not a real input, so "selected" state
   comes from the .active class (set by JS) rather than :has(:checked). */
.kh-cp-image-family {
    cursor: pointer;
}

.kh-cp-image-family.active {
    border-color: var(--kh-green-dark, #063f32);
}

.kh-cp-image-family .kh-cp-image-price {
    color: var(--kh-muted, #697873);
    font-weight: 600;
}

.kh-cp-image-family.active .kh-cp-image-price {
    color: var(--kh-green-dark, #063f32);
}

/* cPanel/Plesk only run on Linux - locked out while Windows Server is the
   selected OS, since Contabo has no real combined "Windows + cPanel/Plesk"
   product to actually deliver. */
.kh-cp-image-family-disabled {
    cursor: not-allowed;
    opacity: 0.45;
    pointer-events: none;
}

.kh-cp-image-version-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.kh-cp-image-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    color: var(--kh-green-dark, #063f32);
}

.kh-cp-image-icon svg,
.kh-cp-image-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.kh-cp-image-title {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: var(--kh-dark, #111a19);
}

.kh-cp-image-price {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--kh-green-dark, #063f32);
    text-align: right;
}

@media (max-width: 600px) {
    .kh-cp-image-grid {
        grid-template-columns: 1fr;
    }
}

/* Image version modal (Popular/OS family cards -> pick a specific version) */
.kh-cp-image-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 26, 25, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.kh-cp-image-modal {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 20px 50px rgba(16, 24, 32, 0.25);
}

.kh-cp-image-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.kh-cp-image-modal-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    color: var(--kh-green-dark, #063f32);
}

.kh-cp-image-modal-icon svg,
.kh-cp-image-modal-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.kh-cp-image-modal-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--kh-dark, #111a19);
}

.kh-cp-image-modal-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--kh-dark, #111a19);
}

.kh-cp-image-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    margin-top: 24px;
}

.kh-cp-image-modal-skip {
    font-size: 14px;
    font-weight: 700;
    color: var(--kh-muted, #697873);
    cursor: pointer;
}

.kh-cp-image-modal-confirm {
    padding: 11px 22px;
    border: none;
    border-radius: 8px;
    background: var(--kh-green-dark, #063f32);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

/* Non-VPS products: features ki seedhi list (CPU/RAM labels sirf VPS pe) — StalwartMail 2026-10-14 */
.kh-cp-plain-features {
    list-style: none;
    margin: 0;
    padding: 16px 20px;
    border: 1.5px solid var(--kh-gold, #e8b71c);
    border-radius: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px 24px;
}

.kh-cp-plain-features li {
    position: relative;
    padding-left: 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--kh-dark, #111a19);
}

.kh-cp-plain-features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--kh-green-dark, #063f32);
    font-weight: 800;
}

/* Non-VPS custom fields (jaise "First email address") */
.kh-cp-cf-input input[type="text"],
.kh-cp-cf-input input[type="password"],
.kh-cp-cf-input select,
.kh-cp-cf-input textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--kh-border, #e5ebe8);
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    color: var(--kh-dark, #111a19);
}

.kh-cp-cf-input input:focus,
.kh-cp-cf-input select:focus,
.kh-cp-cf-input textarea:focus {
    outline: none;
    border-color: var(--kh-green-dark, #063f32);
}

.kh-cp-cf-help {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--kh-muted, #697873);
}

.kh-cp-cf-required {
    color: #c62828;
}

/* Quantity options (Titan users, email accounts) — number box (2026-10-15) */
.kh-cp-qty-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.kh-cp-qty-input {
    width: 120px;
    padding: 12px 14px;
    border: 1.5px solid var(--kh-border, #e5ebe8);
    border-radius: 10px;
    background: #fff;
    font-size: 16px;
    font-weight: 700;
    color: var(--kh-dark, #111a19);
}

.kh-cp-qty-input:focus {
    outline: none;
    border-color: var(--kh-green-dark, #063f32);
}

.kh-cp-qty-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--kh-muted, #697873);
}

.kh-cp-yesno {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    cursor: pointer;
}