/* Essential WHMCS Utility Classes */
/* Essential WHMCS Utility Classes for Cart & Checkout Forms */
#order-standard_cart .w-hidden,
.checkout-card .w-hidden,
fieldset.w-hidden,
div.form-group.w-hidden {
    display: none;
}
#order-standard_cart .d-none {
    display: none !important;
}
#DomainSearchResults:not(.w-hidden),
#DomainSearchResults[style*="display: block"],
#primaryLookupResult:not(.w-hidden),
#primaryLookupResult[style*="display: block"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure DataTables in Client Area are never hidden */
table.table-list,
table#tableInvoicesList,
.table-container table {
    display: table !important;
}

/* ========================================================
   KhanRDP Modern High-Resolution Wide Fluid Layout
   Eliminates huge side whitespace and expands store & client area
   ======================================================== */
.container,
.main-body-container,
#khanrdp-nav-wrapper .header-area .container,
#khanrdp-nav-wrapper .menu .container,
nav.master-breadcrumb .container,
#main-body > .container,
#main-body > .container-fluid,
#order-standard_cart,
#order-khanrdp_cart,
footer#footer .container,
.footer .container {
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 1200px) {
    .container,
    .main-body-container,
    #khanrdp-nav-wrapper .header-area .container,
    #khanrdp-nav-wrapper .menu .container,
    nav.master-breadcrumb .container,
    #main-body > .container,
    #main-body > .container-fluid,
    #order-standard_cart,
    #order-khanrdp_cart,
    footer#footer .container,
    .footer .container {
        max-width: 1680px !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
}

@media (min-width: 1440px) {
    .container,
    .main-body-container,
    #khanrdp-nav-wrapper .header-area .container,
    #khanrdp-nav-wrapper .menu .container,
    nav.master-breadcrumb .container,
    #main-body > .container,
    #main-body > .container-fluid,
    #order-standard_cart,
    #order-khanrdp_cart,
    footer#footer .container,
    .footer .container {
        max-width: 1760px !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
}

@media (min-width: 1920px) {
    .container,
    .main-body-container,
    #khanrdp-nav-wrapper .header-area .container,
    #khanrdp-nav-wrapper .menu .container,
    nav.master-breadcrumb .container,
    #main-body > .container,
    #main-body > .container-fluid,
    #order-standard_cart,
    #order-khanrdp_cart,
    footer#footer .container,
    .footer .container {
        max-width: 1840px !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* Store Page (products.tpl) Modern Lagom Styling */
.store-hero-header {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 24px 30px !important;
    margin-bottom: 28px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
}

.store-hero-badge {
    background-color: #DF3626 !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    display: inline-block !important;
    margin-bottom: 10px !important;
}

.khanrdp-plan-card {
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 14px !important;
    padding: 28px 24px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.khanrdp-plan-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08) !important;
    border-color: #CBD5E1 !important;
}

.khanrdp-plan-card.featured {
    border: 2px solid #DF3626 !important;
    box-shadow: 0 8px 24px rgba(223, 54, 38, 0.12) !important;
}

.plan-popular-pill {
    position: absolute !important;
    top: -12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #DF3626 !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    padding: 4px 16px !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 10px rgba(223, 54, 38, 0.35) !important;
    white-space: nowrap !important;
}

.khanrdp-plan-card .plan-card-header {
    text-align: center !important;
    border-bottom: 1px solid #F1F5F9 !important;
    padding-bottom: 18px !important;
    margin-bottom: 18px !important;
}

.khanrdp-plan-card .plan-icon-wrapper {
    width: 54px !important;
    height: 54px !important;
    border-radius: 12px !important;
    background: rgba(223, 54, 38, 0.08) !important;
    color: #DF3626 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    margin-bottom: 12px !important;
}

.khanrdp-plan-card .plan-name {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    margin-bottom: 4px !important;
    letter-spacing: -0.2px !important;
}

.khanrdp-plan-card .plan-group {
    font-size: 13px !important;
    color: #64748B !important;
}

.khanrdp-plan-card .plan-card-pricing {
    text-align: center !important;
    background: #F8FAFC !important;
    border-radius: 10px !important;
    padding: 16px 12px !important;
    margin-bottom: 20px !important;
    border: 1px solid #F1F5F9 !important;
}

.khanrdp-plan-card .price-val {
    font-size: 32px !important;
    font-weight: 900 !important;
    color: #DF3626 !important;
    line-height: 1 !important;
}

.khanrdp-plan-card .price-cycle {
    font-size: 14px !important;
    color: #64748B !important;
    font-weight: 600 !important;
    margin-left: 2px !important;
}

.khanrdp-plan-card .features-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    flex-grow: 1 !important;
}

.khanrdp-plan-card .features-list li,
.khanrdp-plan-card .plan-desc-text li {
    font-size: 13.5px !important;
    color: #334155 !important;
    padding: 8px 0 !important;
    border-bottom: 1px dashed #F1F5F9 !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1.4 !important;
}

.khanrdp-plan-card .features-list li:last-child,
.khanrdp-plan-card .plan-desc-text li:last-child {
    border-bottom: none !important;
}

.btn-khanrdp-plan {
    background: linear-gradient(135deg, #DF3626 0%, #c32f21 100%) !important;
    border: none !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    padding: 14px 20px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 14px rgba(223, 54, 38, 0.3) !important;
    display: block !important;
    text-align: center !important;
    text-decoration: none !important;
}

.btn-khanrdp-plan:hover {
    background: linear-gradient(135deg, #c32f21 0%, #a9271a 100%) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(223, 54, 38, 0.45) !important;
}

/* Clean Checkout Inputs (No Icon Overlap) */
#order-standard_cart .form-control,
#order-standard_cart select.form-control,
#order-standard_cart select.custom-select {
    padding: 11px 16px !important;
    height: 46px !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 8px !important;
    font-size: 14.5px !important;
    color: #0F172A !important;
    background-color: #FFFFFF !important;
}

#order-standard_cart .form-control:focus {
    border-color: #DF3626 !important;
    box-shadow: 0 0 0 3.5px rgba(223, 54, 38, 0.15) !important;
    outline: none !important;
}

/* Phone input remains separate with 92px padding */
#order-standard_cart .iti input.form-control,
#order-standard_cart #inputPhone,
#order-standard_cart .phone-input-field,
#order-standard_cart input[name="phonenumber"] {
    padding-left: 92px !important;
}


/* ========================================================
   KhanRDP Modern Cart & Store Complete Stylesheet
   ======================================================== */

:root {
    --khanrdp-red: #DF3626;
    --khanrdp-red-hover: #c32f21;
    --khanrdp-dark: #373B42;
    --khanrdp-border: #E2E8F0;
    --khanrdp-bg-card: #FFFFFF;
    --khanrdp-text-main: #0F172A;
    --khanrdp-text-muted: #64748B;
}

/* Base Container */
#order-standard_cart,
.lagom-style-cart {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: #334155;
    padding-top: 15px;
    padding-bottom: 40px;
}

/* White Card Containers */
.lagom-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.02) !important;
    transition: all 0.2s ease !important;
}

.lagom-card-header {
    border-bottom: 1px solid #F1F5F9 !important;
    padding-bottom: 14px !important;
    margin-bottom: 18px !important;
}

.lagom-card-header h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin: 0 !important;
}

.lagom-card-header p {
    font-size: 13px !important;
    color: #64748B !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

/* Product Hero Card */
.product-hero-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
    border: 1px solid #E2E8F0 !important;
    border-left: 5px solid #DF3626 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

.product-hero-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    border-radius: 12px !important;
    background: rgba(223, 54, 38, 0.08) !important;
    color: #DF3626 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
}

.product-hero-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    margin: 0 !important;
}

/* Specs Badge Grid for Product Description */
.product-hero-desc ul,
.product-info ul,
.product-desc-content ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin: 14px 0 0 0 !important;
}

.product-hero-desc ul li,
.product-info ul li,
.product-desc-content ul li {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
}

.product-hero-desc ul li::before,
.product-info ul li::before,
.product-desc-content ul li::before {
    content: "•";
    color: #DF3626;
    font-weight: bold;
    margin-right: 6px;
    font-size: 16px;
}

/* Billing Cycle Cards (Lagom Style) */
.lagom-cycles-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin-bottom: 8px !important;
}

.lagom-cycle-item {
    flex: 1 1 180px !important;
    max-width: 260px !important;
    min-width: 140px !important;
}

.lagom-cycle-box {
    position: relative !important;
    background: #FFFFFF !important;
    border: 2px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 20px 16px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none !important;
    height: 100% !important;
    min-height: 105px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}

.lagom-cycle-box:hover {
    border-color: #94A3B8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06) !important;
}

.lagom-cycle-box.active {
    border-color: #DF3626 !important;
    background: #FFF8F7 !important;
    box-shadow: 0 0 0 1px #DF3626, 0 6px 20px rgba(223, 54, 38, 0.12) !important;
}

.lagom-cycle-box .cycle-check {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    font-size: 16px !important;
    color: #CBD5E1 !important;
    transition: color 0.2s ease !important;
}

.lagom-cycle-box.active .cycle-check {
    color: #DF3626 !important;
}

.lagom-cycle-box .cycle-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    margin-bottom: 6px !important;
}

.lagom-cycle-box.active .cycle-name {
    color: #0F172A !important;
}

.lagom-cycle-box .cycle-amount {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #DF3626 !important;
}

.lagom-cycle-box .cycle-badge {
    position: absolute !important;
    top: -11px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #DF3626 !important;
    color: #FFFFFF !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(223, 54, 38, 0.3) !important;
}

/* Configurable Options Interactive OS Cards */
.config-option-cards {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -6px !important;
    margin-right: -6px !important;
}

.config-option-cards > div {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.lagom-config-card {
    background: #FFFFFF !important;
    border: 2px solid #E2E8F0 !important;
    border-radius: 10px !important;
    padding: 13px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
    min-height: 56px !important;
    height: 100% !important;
}

.lagom-config-card:hover {
    border-color: #94A3B8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}

.lagom-config-card.active {
    border-color: #DF3626 !important;
    background: #FFF8F7 !important;
    box-shadow: 0 0 0 1px #DF3626, 0 4px 14px rgba(223, 54, 38, 0.12) !important;
}

.lagom-config-card .config-card-os-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    flex-shrink: 0 !important;
}

.lagom-config-card .config-card-title {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    flex-grow: 1 !important;
    line-height: 1.35 !important;
}

.lagom-config-card.active .config-card-title {
    color: #0F172A !important;
    font-weight: 700 !important;
}

.lagom-config-card .config-card-icon {
    font-size: 16px !important;
    color: #CBD5E1 !important;
    flex-shrink: 0 !important;
    transition: color 0.2s ease !important;
}

.lagom-config-card.active .config-card-icon {
    color: #DF3626 !important;
}

/* Sticky Order Summary Sidebar */
.lagom-sticky-summary {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 20px !important;
}

.order-summary-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-top: 4px solid #DF3626 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
}

.order-summary-card .summary-header,
#orderSummary .header,
.panel-order-summary .panel-heading {
    background: #373B42 !important;
    color: #FFFFFF !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid #4B5563 !important;
}

.order-summary-card .summary-header h3,
#orderSummary .header h2,
#orderSummary .header h3 {
    color: #FFFFFF !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.order-summary-card .summary-body {
    padding: 20px !important;
    font-size: 14px !important;
}

.order-summary-card .summary-body .product-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin-bottom: 10px !important;
}

.order-summary-card .summary-body .summary-total,
#orderSummary .total-due-today {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #DF3626 !important;
}

/* Red Checkout & Continue Buttons */
#btnCompleteOrder,
.lagom-continue-btn,
#orderSummary .btn-primary,
.btn-checkout,
#checkout {
    background-color: #DF3626 !important;
    border-color: #DF3626 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(223, 54, 38, 0.25) !important;
}

#btnCompleteOrder:hover,
.lagom-continue-btn:hover,
#orderSummary .btn-primary:hover,
.btn-checkout:hover,
#checkout:hover {
    background-color: #c32f21 !important;
    border-color: #c32f21 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(223, 54, 38, 0.35) !important;
}

/* Trust Badges Card */
.trust-badges-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    padding: 14px 10px !important;
    margin-top: 16px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
}

.trust-badges-card i {
    color: #DF3626 !important;
}

/* Store Product Plan Cards (products.tpl) */
.khanrdp-plan-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 24px 20px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.02) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.khanrdp-plan-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.08) !important;
    border-color: #CBD5E1 !important;
}

.khanrdp-plan-card.featured {
    border: 2px solid #DF3626 !important;
    box-shadow: 0 8px 24px rgba(223, 54, 38, 0.12) !important;
}

.khanrdp-plan-card .popular-ribbon {
    position: absolute !important;
    top: 16px !important;
    right: -34px !important;
    transform: rotate(45deg) !important;
    background: #DF3626 !important;
    color: #FFFFFF !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    padding: 4px 36px !important;
    text-align: center !important;
    box-shadow: 0 2px 6px rgba(223, 54, 38, 0.3) !important;
}

.khanrdp-plan-card .plan-card-header {
    text-align: center !important;
    border-bottom: 1px solid #F1F5F9 !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
}

.khanrdp-plan-card .plan-icon-wrapper {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: rgba(223, 54, 38, 0.08) !important;
    color: #DF3626 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    margin-bottom: 10px !important;
}

.khanrdp-plan-card .plan-name {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    margin-bottom: 4px !important;
}

.khanrdp-plan-card .plan-card-pricing {
    text-align: center !important;
    padding: 10px 0 16px 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    margin-bottom: 16px !important;
}

.khanrdp-plan-card .price-val {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #DF3626 !important;
}

.khanrdp-plan-card .price-cycle {
    font-size: 14px !important;
    color: #64748B !important;
}

.khanrdp-plan-card .features-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.khanrdp-plan-card .features-list li,
.khanrdp-plan-card .plan-desc-text li {
    font-size: 13.5px !important;
    color: #334155 !important;
    padding: 7px 0 !important;
    border-bottom: 1px dashed #F1F5F9 !important;
    display: flex !important;
    align-items: center !important;
}

.khanrdp-plan-card .features-list li:last-child,
.khanrdp-plan-card .plan-desc-text li:last-child {
    border-bottom: none !important;
}

/* li:before removed to avoid double checkmark */

.khanrdp-plan-card .plan-desc-text ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.btn-khanrdp-plan {
    background: #DF3626 !important;
    border: 1px solid #DF3626 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    padding: 12px 18px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 6px rgba(223, 54, 38, 0.2) !important;
}

.btn-khanrdp-plan:hover {
    background: #c32f21 !important;
    border-color: #c32f21 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(223, 54, 38, 0.35) !important;
}

/* Hide ONLY Actions Sidebar (Renew Domains, View Cart) */
[menuItemName="Actions"],
#panelActions,
.panel-sidebar[menuitemname="Actions"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Categories Sidebar KhanRDP Styling */
#panelCategories .panel-heading,
.panel-sidebar[menuitemname="Categories"] .panel-heading {
    background: #373B42 !important;
    color: #FFFFFF !important;
    border-radius: 8px 8px 0 0 !important;
    border-bottom: 2px solid #DF3626 !important;
    padding: 12px 16px !important;
}

#panelCategories .panel-title,
.panel-sidebar[menuitemname="Categories"] .panel-title {
    color: #FFFFFF !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

#panelCategories .list-group-item.active,
.panel-sidebar[menuitemname="Categories"] .list-group-item.active {
    background-color: #DF3626 !important;
    border-color: #DF3626 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

#panelCategories .list-group-item:hover:not(.active),
.panel-sidebar[menuitemname="Categories"] .list-group-item:hover:not(.active) {
    background-color: #F8FAFC !important;
    color: #DF3626 !important;
}

/* Hidden Native Select Dropdowns */

select[id*="inputConfigOption"].d-none {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

#billingCycleContainer,
#billingSelectWrapper,
#inputBillingcycle,
select[name="billingcycle"],
div#billingCycleContainer,
div#billingSelectWrapper,
select#inputBillingcycle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

#billingCycleCards,
div#billingCycleCards {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

/* ========================================================
   KhanRDP Premium Lagom-Style Checkout Styling
   ======================================================== */

#order-standard_cart,
.lagom-style-cart {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: #1E293B !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    padding-top: 15px !important;
    padding-bottom: 50px !important;
}

#order-standard_cart .cart-sidebar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

#order-standard_cart .cart-body {
    float: none !important;
    width: 100% !important;
    max-width: 960px !important;
    margin: 0 auto !important;
}

/* Hide legacy floating .field-icon that broke input layouts */
.field-icon:not(.field-icon-inside),
label.field-icon,
#inputStateIcon,
#inputCountryIcon {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Modern Lagom Cards */
.lagom-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 24px 28px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease !important;
}

.lagom-card-header {
    border-bottom: 1px solid #F1F5F9 !important;
    padding-bottom: 16px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
}

.lagom-card-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 10px !important;
    background: rgba(223, 54, 38, 0.08) !important;
    color: #DF3626 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    margin-right: 14px !important;
}

.lagom-card-header h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin: 0 !important;
    letter-spacing: -0.2px !important;
}

.lagom-card-header p {
    font-size: 13px !important;
    color: #64748B !important;
    margin-top: 3px !important;
    margin-bottom: 0 !important;
}

/* Account Banner ("Already Registered?") */
.checkout-account-banner {
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-left: 5px solid #DF3626 !important;
    border-radius: 12px !important;
    padding: 20px 24px !important;
}

.account-banner-avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    background: rgba(223, 54, 38, 0.08) !important;
    color: #DF3626 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
}

.account-banner-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin: 0 !important;
}

.account-banner-desc {
    font-size: 13.5px !important;
    color: #64748B !important;
    margin: 0 !important;
}

/* Modern Form Labels */
.form-label,
label.form-label {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 7px !important;
    display: block !important;
}

/* Input Fields & Modern Icon Inside Input */
.input-with-icon {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

.input-with-icon .field-icon-inside {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94A3B8 !important;
    font-size: 14px !important;
    pointer-events: none !important;
    z-index: 4 !important;
    line-height: 1 !important;
    transition: color 0.2s ease !important;
}

.input-with-icon:focus-within .field-icon-inside {
    color: #DF3626 !important;
}

#order-standard_cart .form-control,
#order-standard_cart select.form-control,
#order-standard_cart select.custom-select {
    height: 46px !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 8px !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: #0F172A !important;
    background-color: #FFFFFF !important;
    padding: 10px 14px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.input-with-icon .form-control,
.input-with-icon select.form-control,
.input-with-icon select.custom-select {
    padding-left: 42px !important;
}

#order-standard_cart .form-control:hover,
#order-standard_cart select.form-control:hover {
    border-color: #CBD5E1 !important;
}

#order-standard_cart .form-control:focus,
#order-standard_cart select.form-control:focus {
    border-color: #DF3626 !important;
    box-shadow: 0 0 0 3.5px rgba(223, 54, 38, 0.15) !important;
    outline: none !important;
    background-color: #FFFFFF !important;
}

#order-standard_cart textarea.form-control {
    height: auto !important;
    padding: 12px 14px !important;
}

/* Phone Input Fix (intl-tel-input: NEVER OVERLAP!) */
.phone-input-wrapper {
    position: relative !important;
    width: 100% !important;
}

.iti,
.iti--allow-dropdown,
.iti--separate-dial-code {
    width: 100% !important;
    display: block !important;
    position: relative !important;
}

#order-standard_cart .iti input.form-control,
#order-standard_cart #inputPhone,
#order-standard_cart .phone-input-field,
#order-standard_cart input[name="phonenumber"],
#order-standard_cart input[name="domaincontactphonenumber"] {
    width: 100% !important;
    padding-left: 92px !important;
    padding-right: 14px !important;
    height: 46px !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 8px !important;
    font-size: 14.5px !important;
    color: #0F172A !important;
    background-color: #FFFFFF !important;
}

#order-standard_cart .iti input.form-control:focus,
#order-standard_cart #inputPhone:focus,
#order-standard_cart .phone-input-field:focus {
    border-color: #DF3626 !important;
    box-shadow: 0 0 0 3.5px rgba(223, 54, 38, 0.15) !important;
}

.iti__flag-container {
    position: absolute !important;
    top: 1px !important;
    bottom: 1px !important;
    left: 1px !important;
    padding: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
}

.iti__selected-flag {
    height: calc(100% - 2px) !important;
    padding: 0 10px 0 12px !important;
    border-radius: 7px 0 0 7px !important;
    background: #F8FAFC !important;
    border-right: 1.5px solid #E2E8F0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.iti__selected-flag:hover {
    background: #F1F5F9 !important;
}

.iti__country-list {
    z-index: 1050 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #E2E8F0 !important;
}

/* Total Due Today Card */
.checkout-total-card,
#totalDueToday {
    background: linear-gradient(135deg, #FFF8F7 0%, #FFFFFF 100%) !important;
    border: 2px solid #DF3626 !important;
    border-radius: 12px !important;
    padding: 20px 26px !important;
    margin: 20px 0 !important;
    box-shadow: 0 4px 14px rgba(223, 54, 38, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.checkout-total-label {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.checkout-total-sub {
    font-size: 13px !important;
    color: #64748B !important;
}

.checkout-total-price,
#totalCartPrice {
    font-size: 32px !important;
    font-weight: 900 !important;
    color: #DF3626 !important;
    line-height: 1 !important;
}

/* Payment Gateways Grid (Lagom Style) */
.payment-methods-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 16px !important;
    margin-top: 14px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.payment-method-card {
    position: relative !important;
    background: #FFFFFF !important;
    border: 2px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    min-height: 76px !important;
    width: 100% !important;
}

.payment-method-card:hover {
    border-color: #94A3B8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
}

.payment-method-card.active,
.payment-method-card:has(input:checked) {
    border-color: #DF3626 !important;
    background: #FFF8F7 !important;
    box-shadow: 0 0 0 1px #DF3626, 0 6px 20px rgba(223, 54, 38, 0.12) !important;
}

.payment-method-card input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.payment-method-content {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
}

.payment-method-radio-custom {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 50% !important;
    border: 2px solid #CBD5E1 !important;
    background: #FFFFFF !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.payment-method-card.active .payment-method-radio-custom,
.payment-method-card:has(input:checked) .payment-method-radio-custom {
    border-color: #DF3626 !important;
    background: #DF3626 !important;
}

.payment-method-card.active .payment-method-radio-custom::after,
.payment-method-card:has(input:checked) .payment-method-radio-custom::after {
    content: "" !important;
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.payment-method-name {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    line-height: 1.4 !important;
    flex-grow: 1 !important;
}

@media (max-width: 767px) {
    .payment-methods-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Complete Order Button */
#btnCompleteOrder {
    background: linear-gradient(135deg, #DF3626 0%, #c32f21 100%) !important;
    border: none !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    padding: 16px 40px !important;
    border-radius: 10px !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 16px rgba(223, 54, 38, 0.35) !important;
    cursor: pointer !important;
    min-width: 280px !important;
}

#btnCompleteOrder:hover {
    background: linear-gradient(135deg, #c32f21 0%, #a9271a 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(223, 54, 38, 0.45) !important;
}

#btnCompleteOrder:active {
    transform: translateY(0) !important;
}

/* Password Strength Meter */
.password-strength-meter .progress {
    height: 8px !important;
    border-radius: 4px !important;
    background-color: #E2E8F0 !important;
    overflow: hidden !important;
    margin-bottom: 6px !important;
}

.password-strength-meter .progress-bar {
    transition: width 0.3s ease !important;
}

/* Existing Account Selection */
#containerExistingAccountSelect .account {
    border: 2px solid #E2E8F0 !important;
    border-radius: 10px !important;
    padding: 16px !important;
    margin-bottom: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    background: #FFFFFF !important;
}

#containerExistingAccountSelect .account.active,
#containerExistingAccountSelect .account:has(input:checked) {
    border-color: #DF3626 !important;
    background: #FFF8F7 !important;
}

.checkout-security-msg {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    color: #64748B !important;
    border-radius: 8px !important;
    margin-top: 24px !important;
}

/* Extra Review & Edit Cart Styling */
.cart-review-page {
    padding: 10px 0 40px 0;
}
.cart-review-page .lagom-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
}
.cart-review-page .lagom-card-header {
    background: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 16px 22px !important;
}
.cart-review-page .lagom-card-body {
    padding: 22px !important;
}
.cart-product-item {
    padding: 20px 22px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    transition: background 0.2s ease !important;
}
.cart-product-item:last-child {
    border-bottom: none !important;
}
.cart-product-item:hover {
    background-color: #FAFAFA !important;
}
.cart-item-name {
    font-size: 16.5px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
}
.cart-item-group {
    font-size: 12px !important;
    background: #F1F5F9 !important;
    color: #475569 !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
}
.cart-opt-pill {
    display: inline-block !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    color: #475569 !important;
    font-size: 11.5px !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    margin: 2px 4px 2px 0 !important;
}
.cart-price-today {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #DF3626 !important;
    line-height: 1.2 !important;
}
.cart-summary-sticky {
    position: sticky !important;
    top: 24px !important;
    z-index: 10 !important;
}
.cart-total-box {
    background: #FFF8F7 !important;
    border: 1.5px solid rgba(223, 54, 38, 0.25) !important;
    border-radius: 10px !important;
    padding: 16px !important;
    margin: 18px 0 !important;
    text-align: center !important;
}
.cart-total-box .total-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #64748B !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 4px !important;
}
.cart-total-box .total-amt {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #DF3626 !important;
    line-height: 1.1 !important;
}
.btn-checkout-primary {
    background-color: #DF3626 !important;
    border-color: #DF3626 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(223, 54, 38, 0.3) !important;
    transition: all 0.2s ease !important;
}
.btn-checkout-primary:hover {
    background-color: #C52B1C !important;
    border-color: #C52B1C !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(223, 54, 38, 0.4) !important;
}
.btn-cart-action {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
}
.btn-cart-empty {
    color: #EF4444 !important;
    background: #FEF2F2 !important;
    border: 1px solid #FECACA !important;
}
.btn-cart-empty:hover {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
}
.promo-applied-badge {
    background: #ECFDF5 !important;
    border: 1px solid #A7F3D0 !important;
    color: #065F46 !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
}

/* Clean Single Checkmark Plan Features */
.khanrdp-plan-card .features-list li,
.khanrdp-plan-card .plan-desc-text li,
.plan-feature-row {
    list-style: none !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    padding: 9px 0 !important;
    border-bottom: 1px dashed #F1F5F9 !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1.4 !important;
}
.khanrdp-plan-card .features-list li:before,
.khanrdp-plan-card .plan-desc-text li:before,
.plan-feature-row:before {
    display: none !important;
    content: "" !important;
}
.plan-feature-row i {
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

/* Mobile & Tablet Responsive Order Flow */
@media (max-width: 991.98px) {
    .lagom-sticky-summary,
    .order-summary,
    #orderSummary {
        position: static !important;
        top: auto !important;
    }
}

@media (max-width: 767.98px) {
    .lagom-card-header {
        padding: 16px 18px !important;
    }
    .lagom-card-body {
        padding: 18px !important;
    }
    .lagom-page-header h1 {
        font-size: 22px !important;
    }
    .lagom-page-header p {
        font-size: 14px !important;
    }
}

@media (max-width: 575.98px) {
    .khanrdp-plan-card .plan-header,
    .khanrdp-plan-card .plan-pricing,
    .khanrdp-plan-card .plan-body,
    .khanrdp-plan-card .plan-footer {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .khanrdp-plan-card .price-val {
        font-size: 26px !important;
    }
    .plan-specs-bar {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        padding: 10px !important;
    }
    .lagom-cycles-grid {
        gap: 10px !important;
    }
    .lagom-cycle-item {
        flex: 0 0 calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        min-width: 0 !important;
    }
    .lagom-cycle-box {
        padding: 14px 10px !important;
        min-height: 92px !important;
    }
    .lagom-cycle-box .cycle-title {
        font-size: 12.5px !important;
    }
    .lagom-cycle-box .cycle-price {
        font-size: 15px !important;
    }
    .checkout-summary-card .checkout-header-actions {
        width: 100% !important;
    }
    .checkout-summary-card .checkout-header-actions .btn {
        flex: 1 1 auto !important;
        text-align: center !important;
    }
    #totalCartPrice {
        font-size: 24px !important;
    }
    #btnCompleteOrder,
    .btn-checkout-primary {
        min-width: 0 !important;
        width: 100% !important;
        padding: 14px 18px !important;
        font-size: 15px !important;
    }
    .lagom-payment-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}