/**
 * TW Cart Enhancer - Frontend Stylesheet
 * 
 * Clean, modular, and theme-aware CSS for WHMCS Lagom2 Cart Enhancement.
 * Covers collapsible package card, tab navigation, smart OS distro cards,
 * version dropdowns, option icon badges, and RTL / responsive adaptations.
 *
 * Version: 1.2.9
 * Author: Tarweig Digital Ltd.
 *
 * TABLE OF CONTENTS:
 * 1. DESIGN TOKENS & CSS VARIABLES
 * 2. PRODUCT CONFIG COLLAPSIBLE CARD (ChemiCloud Style)
 * 3. CONFIGURATION TABS NAVIGATION (OS / CP / Apps / Location)
 * 4. OPTION ICONS & BADGES (56px Circle, 36px SVG, Text Alignment)
 * 5. SMART OS DISTRIBUTION CARDS (Hetzner Cloud & Windows RDP)
 * 6. VERSION DROPDOWN SELECTOR & RADIO ALIGNMENT
 * 7. SECTION SPACING & UTILITIES
 * 8. RESPONSIVE DESIGN & RTL SUPPORT
 */

/* ==========================================================================
   1. DESIGN TOKENS & CSS VARIABLES
   ========================================================================== */
:root {
    /* Brand & Primary Palette (Lagom2 Native Variables) */
    --twce-primary: var(--brand-primary, var(--text-primary-color, var(--btn-primary-bg, var(--primary, #b6202a))));
    --twce-primary-border: var(--brand-primary, var(--btn-primary-border, var(--primary, #b6202a)));
    --twce-primary-color: var(--btn-primary-color, #ffffff);
    --twce-primary-rgb: var(--brand-primary-rgb, 182, 32, 42);

    /* Surfaces & Backgrounds (Lagom2 Native Variables) */
    --twce-card-bg: var(--ui-block-bg, var(--card-bg, var(--panel-bg, #ffffff)));
    --twce-card-bg-hover: var(--ui-block-hover-bg, var(--table-bg-hover, rgba(0, 0, 0, 0.02)));
    --twce-input-bg: var(--input-bg, var(--primary-block-input-bg, rgba(125, 125, 125, 0.05)));

    /* Borders (Lagom2 Native Variables) */
    --twce-card-border: var(--ui-block-border-color, var(--ui-block-border, var(--border-color, rgba(0, 0, 0, 0.08))));
    --twce-card-border-strong: var(--ui-block-active-border-color, var(--brand-primary, var(--border-color-default, rgba(0, 0, 0, 0.15))));
    --twce-border-faded: var(--ui-block-divider-color, var(--border-color-faded, rgba(125, 125, 125, 0.12)));

    /* Typography (Lagom2 Native Variables) */
    --twce-heading-color: var(--text-heading-color, var(--ui-block-title-color, #2c2f36));
    --twce-body-color: var(--text-body-color, #6b7280);
    --twce-muted-color: var(--text-lighter-color, var(--text-faded-color, #9ca3af));
    --twce-icon-color: var(--twce-primary, var(--brand-primary, #b6202a));

    /* Collapse Component Specific Tokens (Lagom2 Native Variables) */
    --twce-collapse-border: var(--ui-block-border-color, var(--border-color, rgba(0, 0, 0, 0.08)));
    --twce-collapse-border-active: var(--ui-block-active-border-color, var(--brand-primary, var(--primary, #b6202a)));
    --twce-collapse-btn-color: var(--brand-primary, var(--primary, var(--btn-primary-bg, #b6202a)));

    /* Radii (Lagom2 Native Variables) */
    --twce-radius-card: var(--ui-block-border-radius-lg, var(--cards-border-radius, var(--border-radius-lg, 10px)));
    --twce-radius-btn: var(--btn-border-radius, var(--border-radius-md, 6px));
    --twce-radius-sm: var(--ui-block-border-radius, var(--border-radius-sm, 4px));

    /* Shadows */
    --twce-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);
    --twce-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.02);
    --twce-shadow-checked: 0 3px 10px rgba(0, 0, 0, 0.04);

    /* OS Card Spacing & Dimensions (Compact & Symmetrical) */
    --twce-os-card-pad-block: 12px;
    --twce-os-card-pad-inline: 14px;
    --twce-os-card-gap-v: 12px;
    --twce-os-card-inner-gap: 8px;
}

/* Backward compatibility for legacy --tw-* variables */
#productConfigurableOptions,
.tw-config-tabs {
    --tw-card-bg: var(--twce-card-bg);
    --tw-card-bg-hover: var(--twce-card-bg-hover);
    --tw-card-border: var(--twce-card-border);
    --tw-card-border-strong: var(--twce-card-border-strong);
    --tw-heading-color: var(--twce-heading-color);
    --tw-body-color: var(--twce-body-color);
    --tw-primary-bg: var(--twce-primary);
    --tw-primary-border: var(--twce-primary-border);
    --tw-primary-color: var(--twce-primary-color);
    --tw-shadow-sm: var(--twce-shadow-sm);
    --tw-shadow-md: var(--twce-shadow-md);
}

/* ==========================================================================
   2. PRODUCT CONFIG COLLAPSIBLE CARD (ChemiCloud Style)
   ========================================================================== */
/* NOTE ON !important USAGE (Collapsible Card & Panels):
   Lagom2 theme enforces high-specificity Bootstrap card and panel styles 
   (.page-configureproduct .panel, .panel-body, .card). The !important flags 
   are strictly necessary to override theme borders, backgrounds, paddings, 
   and box-shadows to provide a seamless ChemiCloud-style collapsible container. */
.page-configureproduct .product-config-info {
    border: 1px solid var(--twce-collapse-border) !important;
    border-radius: var(--twce-radius-card);
    background: var(--twce-card-bg) !important;
    margin-bottom: 24px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}

.page-configureproduct .product-config-info:hover,
.page-configureproduct .product-config-info.custom-border {
    border-color: var(--twce-collapse-border-active) !important;
    box-shadow: 0 0 0 1px var(--twce-collapse-border-active) inset, 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

.page-configureproduct .product-config-info .panel-body {
    padding: 0 !important;
}

.page-configureproduct .product-config-info .configure-product-collapse {
    width: 100%;
}

.page-configureproduct .product-config-info .configure-product-collapse .card {
    border: none !important;
    background: transparent !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

.page-configureproduct .product-config-info .configure-product-collapse .collapse-header {
    cursor: pointer;
    padding: 18px 24px;
    border-radius: var(--twce-radius-card);
    user-select: none;
    background: transparent !important;
}

.page-configureproduct .product-config-info .configure-product-collapse .collapse-header:hover {
    background: transparent !important;
}

.page-configureproduct .product-config-info .configure-product-collapse .collapse-header .collapse-heading {
    margin: 0 !important;
    font-weight: 700;
    padding-left: 36px;
    position: relative;
    font-size: 22px;
    line-height: 30px;
    color: var(--twce-heading-color);
    display: flex;
    align-items: center;
}

/* NOTE ON !important USAGE (Collapse Indicator Plus/Minus Icons):
   Overrides default Lagom2 accordion chevron / pseudo-elements, fixing the 
   plus/minus geometric icon border and primary background color across states. */
.page-configureproduct .product-config-info .configure-product-collapse .collapse-header .collapse-heading .collapse-heading-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    border: 2px solid var(--twce-collapse-btn-color) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    box-sizing: border-box;
}

.page-configureproduct .product-config-info .configure-product-collapse .collapse-header .collapse-heading .collapse-heading-icon .rect {
    position: absolute;
    top: 7px;
    left: 3px;
    display: block;
    height: 2px;
    width: 10px;
    background: var(--twce-collapse-btn-color) !important;
    border-radius: 1px;
}

.page-configureproduct .product-config-info .configure-product-collapse .collapse-header .collapse-heading .collapse-heading-icon .rect-movable {
    position: absolute;
    height: 10px;
    width: 2px;
    top: 3px;
    left: 7px;
    background: var(--twce-collapse-btn-color) !important;
    transition: transform 0.25s ease;
    border-radius: 1px;
}

/* Expanded state: horizontal minus icon */
.page-configureproduct .product-config-info .configure-product-collapse .collapse-header:not(.collapsed) .collapse-heading .collapse-heading-icon .rect-movable {
    transform: rotate(90deg);
}

/* Collapsed state: vertical plus icon */
.page-configureproduct .product-config-info .configure-product-collapse .collapse-header.collapsed .collapse-heading .collapse-heading-icon .rect-movable {
    transform: rotate(0deg);
}

.page-configureproduct .product-config-info .configure-product-collapse .collapse-panel.twce-collapsed-hidden {
    display: none;
}

/* NOTE ON !important USAGE (Collapsible Features List):
   Overrides WHMCS/Lagom default ul/li list bullet points, margins, and 
   collapsible panel container paddings. */
.page-configureproduct .product-config-info .configure-product-collapse .collapse-panel .collapse-body {
    padding: 16px 20px !important;
}

.page-configureproduct .product-config-info .configure-product-collapse .collapse-panel .collapse-body .package__features-group {
    padding-top: 4px;
}

.page-configureproduct .product-config-info .configure-product-collapse .collapse-panel .collapse-body .package__features-group .package__list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px;
}

.page-configureproduct .product-config-info .configure-product-collapse .collapse-panel .collapse-body .package__features-group .package__list .list-item {
    margin: 0 !important;
    flex: 0 1 calc(33.333% - 6px);
    min-width: 170px;
    border: 1px solid var(--border-color, var(--input-border-color, #e5e7eb)) !important;
    padding: 7px 12px !important;
    border-radius: var(--twce-radius-sm, 6px);
    background: var(--twce-card-bg, #ffffff) !important;
    font-size: 13px;
    line-height: 1.4;
    color: var(--twce-body-color, #4b5563);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-configureproduct .product-config-info .configure-product-collapse .collapse-panel .collapse-body .package__features-group .package__list .list-item:hover {
    border-color: var(--twce-primary, var(--brand-primary, #b6202a)) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.page-configureproduct .product-config-info .configure-product-collapse .collapse-panel .collapse-body .package__features-group .package__list .list-item span,
.page-configureproduct .product-config-info .configure-product-collapse .collapse-panel .collapse-body .package__features-group .package__list .list-item .p-4 {
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    text-align: center;
}

.page-configureproduct .product-config-info .configure-product-collapse .collapse-panel .collapse-body .package__features-group .package__list .list-item strong {
    font-weight: 700;
    color: var(--twce-heading-color, #1f2937);
}

.page-configureproduct .product-config-info .configure-product-collapse .collapse-panel .collapse-body .package__features-group .package__list .list-item i {
    color: var(--twce-primary, var(--brand-primary, #b6202a)) !important;
    font-size: 14px;
    opacity: 0.95;
}

/* ==========================================================================
   3. CONFIGURATION TABS NAVIGATION (OS / CP / Apps / Location)
   ========================================================================== */
.tw-config-tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin: 45px auto 32px;
    padding: 10px;
    background: var(--twce-card-bg);
    border: 1px solid var(--twce-card-border);
    border-radius: var(--twce-radius-card);
    box-shadow: var(--twce-shadow-md);
    box-sizing: border-box;
}

.tw-config-tab-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--twce-card-border);
    outline: none;
    cursor: pointer;
    padding: 13px 24px;
    min-height: 48px;
    border-radius: var(--twce-radius-btn);
    background: var(--twce-card-bg);
    color: var(--twce-heading-color);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tw-config-tab-btn:hover,
.tw-config-tab-btn:focus-visible {
    background: var(--twce-card-bg-hover);
    border-color: var(--twce-card-border-strong);
    color: var(--twce-primary);
    transform: translateY(-1px);
    text-decoration: none;
}

/* NOTE ON !important USAGE (Active Navigation Tab):
   Overrides theme-level button states and focus/hover specificity to ensure 
   the active configuration tab maintains primary brand background, border, and text color. */
.tw-config-tab-btn.is-active {
    color: var(--twce-primary-color) !important;
    background: var(--twce-primary) !important;
    border-color: var(--twce-primary-border) !important;
    transform: translateY(0);
}

@keyframes twFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* NOTE ON !important USAGE (Tab Panel Display & Header Margins):
   Guarantees clean tab switching by strictly suppressing inactive option sections 
   (display: none) and displaying active ones (display: block) overriding WHMCS 
   core section display rules, while resetting default top margins on inner titles. */
.tw-config-tab-target,
.section.tw-config-tab-target,
#productConfigurableOptions .tw-config-tab-target {
    display: none !important;
    clear: both !important;
    margin-top: 20px !important;
}

.tw-config-tab-target.is-active,
.section.tw-config-tab-target.is-active,
#productConfigurableOptions .tw-config-tab-target.is-active {
    display: block !important;
    animation: twFadeInUp 0.35s ease-out forwards;
}

.tw-config-tab-target>.section-header,
.tw-config-tab-target>.section-body,
.tw-config-tab-target .section-header .section-title {
    margin-top: 0 !important;
}

/* ==========================================================================
   4. OPTION ICONS & BADGES (56px Circle, 36px SVG, Text Alignment)
   ========================================================================== */
/* NOTE ON !important USAGE (Option Grid, Titles, & Icon Badge Dimensions):
   Prevents Lagom2 check label flex layouts from disrupting the grid, overrides 
   theme check-title minimum heights, and enforces strict 56px circular badge 
   and 36px SVG icon dimensions against theme image max-width rules. */
.tw-option-with-icon {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    direction: ltr;
}

.tw-option-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tw-option-with-icon.is-rtl .tw-option-text {
    direction: rtl;
    text-align: right;
}

.tw-option-with-icon.is-ltr .tw-option-text {
    direction: ltr;
    text-align: left;
}

.tw-option-text .check-title {
    margin: 0 !important;
    display: block !important;
    min-height: auto !important;
    color: var(--twce-heading-color);
}

.tw-option-text .check-subtitle {
    margin-top: 4px;
    color: var(--twce-body-color);
}

.tw-option-text .check-title,
.tw-option-text .check-subtitle {
    overflow-wrap: anywhere;
}

/* Server Location in English (LTR): Radio on Left -> Name in Middle (Left-Aligned) -> Flag on Right */
html:not([dir="rtl"]) #productConfigurableOptions .panel-check:not(.tw-os-card) .check>label {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

html:not([dir="rtl"]) #productConfigurableOptions .panel-check:not(.tw-os-card) .check>label>.radio-styled,
html:not([dir="rtl"]) #productConfigurableOptions .panel-check:not(.tw-os-card) .check>label>.iradio_square-blue,
html:not([dir="rtl"]) #productConfigurableOptions .panel-check:not(.tw-os-card) .check>label>input[type="radio"] {
    position: absolute !important;
    left: var(--panel-check-padding, 16px) !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

html:not([dir="rtl"]) #productConfigurableOptions .panel-check:not(.tw-os-card) .tw-option-with-icon {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 56px !important;
    column-gap: 12px !important;
    align-items: center !important;
    direction: ltr !important;
    width: 100% !important;
}

html:not([dir="rtl"]) #productConfigurableOptions .panel-check:not(.tw-os-card) .tw-option-text {
    order: 1 !important;
    text-align: left !important;
    direction: ltr !important;
    min-width: 0 !important;
}

html:not([dir="rtl"]) #productConfigurableOptions .panel-check:not(.tw-os-card) .check-title {
    text-align: left !important;
    direction: ltr !important;
}

html:not([dir="rtl"]) #productConfigurableOptions .panel-check:not(.tw-os-card) .tw-option-icon-badge {
    order: 2 !important;
    justify-self: end !important;
}

/* Server Location in Arabic (RTL): Badge on Left -> Name in Middle (Left-Aligned next to Badge) -> Radio on Right */
html[dir="rtl"] #productConfigurableOptions .panel-check:not(.tw-os-card) .tw-option-text,
html[dir="rtl"] #productConfigurableOptions .panel-check:not(.tw-os-card) .check-title {
    text-align: left !important;
    direction: ltr !important;
}

.tw-option-icon-badge {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: var(--twce-card-bg) !important;
    border: 1px solid var(--twce-card-border) !important;
    box-shadow: var(--twce-shadow-sm) !important;
}

.tw-option-icon {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    object-fit: contain !important;
    display: block !important;
}

/* ==========================================================================
   5. SMART OS DISTRIBUTION CARDS (Hetzner Cloud & Windows RDP)
   ========================================================================== */
.tw-os-card {
    position: relative;
    cursor: pointer;
    background: var(--twce-card-bg);
    border: 1px solid var(--twce-card-border);
    border-radius: var(--twce-radius-card);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: var(--twce-os-card-gap-v);
}

.tw-os-card:hover {
    border-color: var(--twce-primary);
}

/* NOTE ON !important USAGE (OS Smart Distribution Cards & Top Half):
   Overrides Lagom2 .panel-check structure and internal paddings to establish 
   a two-row card (top: OS + badge + radio; bottom: version dropdown). Ensures 
   2px primary border on selection and locks 56px/36px badge/icon geometry. */
.tw-os-card.checked {
    border: 2px solid var(--twce-primary) !important;
    box-shadow: var(--twce-shadow-checked);
}

.tw-os-card .check {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: var(--twce-os-card-pad-block) var(--twce-os-card-pad-inline) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Base Top-Half Layout */
.tw-os-card .tw-os-top-half {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
}

.tw-os-card .tw-os-top-half .check-title {
    margin: 0 !important;
    display: block !important;
    min-height: auto !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--twce-heading-color);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left !important;
    direction: ltr !important;
}

/* ==========================================================================
   6. VERSION DROPDOWN SELECTOR & RADIO ALIGNMENT (English & Arabic)
   ========================================================================== */
#productConfigurableOptions .panel-check:not(.tw-os-card) .check>label>.checkbox-styled,
#productConfigurableOptions .panel-check:not(.tw-os-card) .check>label>.radio-styled {
    top: 40% !important;
}

/* --- ENGLISH (LTR): Dot on Left -> Name in Middle (Left-Aligned) -> Badge on Right --- */
html:not([dir="rtl"]) .tw-os-card .tw-os-top-half {
    direction: ltr !important;
    padding-left: 32px !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

html:not([dir="rtl"]) .tw-os-card .tw-os-top-half .radio-styled,
html:not([dir="rtl"]) .tw-os-card .tw-os-top-half .iradio_square-blue,
html:not([dir="rtl"]) .tw-os-card .tw-os-top-half input[type="radio"] {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 5 !important;
}

html:not([dir="rtl"]) .tw-os-card .check-content,
html:not([dir="rtl"]) .tw-os-card .tw-os-top-half .check-content,
html:not([dir="rtl"]) .tw-os-card .tw-os-top-half .tw-option-with-icon {
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
}

html:not([dir="rtl"]) .tw-os-card .tw-os-top-half .tw-option-with-icon {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 56px !important;
    column-gap: 12px !important;
    align-items: center !important;
    direction: ltr !important;
}

html:not([dir="rtl"]) .tw-os-card .tw-os-top-half .tw-option-text {
    order: 1 !important;
    text-align: left !important;
    direction: ltr !important;
    min-width: 0 !important;
}

html:not([dir="rtl"]) .tw-os-card .tw-os-top-half .tw-option-icon-badge {
    order: 2 !important;
    justify-self: end !important;
}

/* --- ARABIC (RTL): Match Server Location (Badge on Left -> Name in Middle -> Radio on Right) --- */
html[dir="rtl"] .tw-os-card .tw-os-top-half {
    direction: rtl !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html[dir="rtl"] .tw-os-card .tw-os-top-half .radio-styled,
html[dir="rtl"] .tw-os-card .tw-os-top-half .iradio_square-blue,
html[dir="rtl"] .tw-os-card .tw-os-top-half input[type="radio"] {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 5 !important;
}

html[dir="rtl"] .tw-os-card .check-content,
html[dir="rtl"] .tw-os-card .tw-os-top-half .check-content,
html[dir="rtl"] .tw-os-card .tw-os-top-half .tw-option-with-icon {
    margin-right: 30px !important;
    margin-left: 0 !important;
    margin-inline: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: calc(100% - 30px) !important;
}

html[dir="rtl"] .tw-os-card .tw-os-top-half .tw-option-with-icon {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    align-items: center !important;
    direction: ltr !important;
}

html[dir="rtl"] .tw-os-card .tw-os-top-half .tw-option-text,
html[dir="rtl"] .tw-os-card .tw-os-top-half .check-title {
    text-align: left !important;
    direction: ltr !important;
}

/* Direct child fallback if radio is placed directly under .check */
html:not([dir="rtl"]) .tw-os-card>.check>.radio-styled,
html:not([dir="rtl"]) .tw-os-card>.check>.iradio_square-blue {
    position: absolute !important;
    top: calc(var(--twce-os-card-pad-block) + 28px) !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 5 !important;
    left: var(--twce-os-card-pad-inline) !important;
    right: auto !important;
}

html[dir="rtl"] .tw-os-card>.check>.radio-styled,
html[dir="rtl"] .tw-os-card>.check>.iradio_square-blue {
    position: absolute !important;
    top: calc(var(--twce-os-card-pad-block) + 28px) !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 5 !important;
    right: var(--twce-os-card-pad-inline) !important;
    left: auto !important;
}

/* Dropdown in the lower half of the OS card */
.tw-os-card .tw-os-bottom-half {
    width: 100%;
    margin-top: var(--twce-os-card-inner-gap);
    padding-top: var(--twce-os-card-inner-gap);
    border-top: 1px solid var(--twce-border-faded);
    position: relative;
    z-index: 10;
}

.select-os-version,
select.select-os-version,
.tw-os-card .select-os-version {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    line-height: 32px !important;
    padding: 0 28px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--twce-heading-color) !important;
    background-color: var(--twce-input-bg) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 8px 5px !important;
    border: 1px solid var(--twce-card-border) !important;
    border-radius: var(--twce-radius-btn) !important;
    cursor: pointer !important;
    text-align: center !important;
    text-align-last: center !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

.select-os-version:hover,
select.select-os-version:hover,
.tw-os-card:hover .select-os-version {
    border-color: var(--twce-primary) !important;
    background-color: var(--twce-card-bg) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
}

.select-os-version:focus,
select.select-os-version:focus {
    border-color: var(--twce-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(var(--twce-primary-rgb), 0.12) !important;
}

.tw-os-card.checked .select-os-version,
.tw-os-card.checked select.select-os-version {
    border-color: rgba(var(--twce-primary-rgb), 0.35) !important;
    color: var(--twce-primary) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23b91c1c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
}

.tw-os-card.checked .select-os-version:hover,
.tw-os-card.checked select.select-os-version:hover,
.tw-os-card.checked:hover .select-os-version {
    border-color: var(--twce-primary) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23b91c1c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   7. SECTION SPACING & UTILITIES
   ========================================================================== */
#productConfigurableOptions {
    margin-bottom: 32px;
}

/* NOTE ON !important USAGE (Configurable Option Section Spacing):
   Enforces consistent 36px vertical margin separation between major 
   configurable options sections (Location, OS, Addons), overriding 
   Lagom2 theme default collapsible container margins. */
.tw-config-location-section,
.section[data-config-option-id="20"],
.section[data-config-option-id="23"] {
    margin-top: 36px !important;
}

.tw-config-location-section>.section-header,
.section[data-config-option-id="20"]>.section-header,
.section[data-config-option-id="23"]>.section-header {
    margin-top: 8px;
    margin-bottom: 18px;
}

.tw-config-os-section,
.section[data-config-option-id="22"],
.tw-config-location-section+.section {
    margin-top: 36px !important;
}

.tw-config-os-section>.section-header,
.section[data-config-option-id="22"]>.section-header {
    margin-top: 8px;
    margin-bottom: 18px;
}

.section[data-config-option-id="24"] {
    margin-top: 36px !important;
}

.section[data-config-option-id="24"]>.section-header {
    margin-top: 8px;
    margin-bottom: 18px;
}

/* ==========================================================================
   8. RESPONSIVE DESIGN & RTL SUPPORT
   ========================================================================== */
/* NOTE ON !important USAGE (RTL Layout Alignment Overrides):
   WHMCS and Lagom2 RTL stylesheets apply asymmetrical padding and positioning. 
   These !important declarations mirror icon positions and header padding to the right 
   in Arabic/RTL contexts without layout shifts. */
[dir="rtl"] .page-configureproduct .product-config-info .configure-product-collapse .collapse-header .collapse-heading,
.lagom-rtl .page-configureproduct .product-config-info .configure-product-collapse .collapse-header .collapse-heading {
    padding-right: 36px !important;
    padding-left: 0 !important;
}

[dir="rtl"] .page-configureproduct .product-config-info .configure-product-collapse .collapse-header .collapse-heading .collapse-heading-icon,
.lagom-rtl .page-configureproduct .product-config-info .configure-product-collapse .collapse-header .collapse-heading .collapse-heading-icon {
    right: 0 !important;
    left: auto !important;
}

[dir="rtl"] .page-configureproduct .product-config-info .configure-product-collapse .collapse-panel .collapse-body .package__features-group .package__list,
.lagom-rtl .page-configureproduct .product-config-info .configure-product-collapse .collapse-panel .collapse-body .package__features-group .package__list {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* ==========================================================================
   RTL & LTR Dropdown Arrow Alignment & Hover Stability
   ========================================================================== */
html[dir="rtl"] .select-os-version,
html[dir="rtl"] .select-os-version:hover,
html[dir="rtl"] .select-os-version:focus,
html[dir="rtl"] .select-os-version:active,
html[dir="rtl"] .tw-os-card .select-os-version,
html[dir="rtl"] .tw-os-card:hover .select-os-version,
html[dir="rtl"] .tw-os-card.checked .select-os-version,
html[dir="rtl"] .tw-os-card.checked:hover .select-os-version,
html[dir="rtl"] .tw-os-card.checked .select-os-version:focus,
[dir="rtl"] .select-os-version,
[dir="rtl"] .select-os-version:hover,
[dir="rtl"] .select-os-version:focus,
.lagom-rtl .select-os-version,
.lagom-rtl .select-os-version:hover,
.lagom-rtl .select-os-version:focus {
    background-position: left 12px center !important;
    background-repeat: no-repeat !important;
    background-size: 8px 5px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

html:not([dir="rtl"]) .select-os-version,
html:not([dir="rtl"]) .select-os-version:hover,
html:not([dir="rtl"]) .select-os-version:focus,
html:not([dir="rtl"]) .select-os-version:active,
html:not([dir="rtl"]) .tw-os-card .select-os-version,
html:not([dir="rtl"]) .tw-os-card:hover .select-os-version,
html:not([dir="rtl"]) .tw-os-card.checked .select-os-version,
html:not([dir="rtl"]) .tw-os-card.checked:hover .select-os-version,
html:not([dir="rtl"]) .tw-os-card.checked .select-os-version:focus {
    background-position: right 12px center !important;
    background-repeat: no-repeat !important;
    background-size: 8px 5px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Responsive: Tablets & Mid Screens */
@media (max-width: 991px) {
    .page-configureproduct .product-config-info .configure-product-collapse .collapse-panel .collapse-body .package__features-group .package__list .list-item {
        flex: 0 1 calc(50% - 12px);
    }
}

/* Responsive: Mobile Screens (< 768px) */
@media (max-width: 767px) {
    .tw-config-tabs {
        gap: 8px;
        padding: 12px;
        width: 100%;
    }

    .tw-config-tab-btn {
        font-size: 13px;
        padding: 10px 16px;
        min-height: 44px;
        flex-grow: 1;
    }

    .tw-option-with-icon {
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 12px;
    }

    .tw-option-icon-badge {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }

    .tw-option-icon {
        width: 28px;
        height: 28px;
    }
}

/* Responsive: Small Mobile Screens (< 640px) */
/* NOTE ON !important USAGE (Small Mobile Screen Layout Overrides):
   On viewports < 640px, paddings must be compacted and features list must 
   flow full-width to prevent overflow and maintain touch target ergonomics. */
@media (max-width: 640px) {
    .page-configureproduct .product-config-info .configure-product-collapse .collapse-header {
        padding: 14px 16px;
    }

    .page-configureproduct .product-config-info .configure-product-collapse .collapse-header .collapse-heading {
        font-size: 18px;
        line-height: 24px;
        padding-left: 30px !important;
    }

    [dir="rtl"] .page-configureproduct .product-config-info .configure-product-collapse .collapse-header .collapse-heading,
    .lagom-rtl .page-configureproduct .product-config-info .configure-product-collapse .collapse-header .collapse-heading {
        padding-right: 30px !important;
        padding-left: 0 !important;
    }

    .page-configureproduct .product-config-info .configure-product-collapse .collapse-panel .collapse-body {
        padding: 0 16px 16px 16px !important;
    }

    .page-configureproduct .product-config-info .configure-product-collapse .collapse-panel .collapse-body .package__features-group .package__list {
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 8px;
    }

    .page-configureproduct .product-config-info .configure-product-collapse .collapse-panel .collapse-body .package__features-group .package__list .list-item {
        flex: 1 1 100%;
        min-width: 100%;
    }
}