/* ==========================================================================
   DIY Estimator by Kitchens Rx — Widget Styles  v2.0.0
   Fonts: Goudy Stout (hero) · Wedding Gothic ATF Wide (headers) · Be Vietnam Pro (body)
   Icons: Material Symbols Outlined
   Colors: Pink #EE428B · Teal #1EBEC8 · Orange #ffa037 · Dark #1b1c1c
   ========================================================================== */

/* ── Material Symbols icon font configuration ─────────────────────────────── */
.krx-estimator-widget .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-style:    normal;
    line-height:   1;
    letter-spacing: normal;
    text-transform: none;
    white-space:   nowrap;
    word-wrap:     normal;
    direction:     ltr;
    -webkit-font-smoothing: antialiased;
    display:       inline-block;
}

/* ── Custom Properties ────────────────────────────────────────────────────── */
.krx-estimator-widget {
    --krx-pink:          #EE428B;
    --krx-teal:          #1EBEC8;
    --krx-orange:        #ffa037;        /* CTA / primary action */
    --krx-orange-dark:   #8c5000;        /* CTA border accent */
    --krx-black:         #1b1c1c;
    --krx-white:         #FFFFFF;
    --krx-bg:            #fcf9f8;        /* warm off-white */
    --krx-gray-50:       #f6f3f2;
    --krx-gray-100:      #f0eded;
    --krx-gray-200:      #e4e2e1;
    --krx-gray-400:      #dac2b0;        /* outline-variant (warm tan) */
    --krx-gray-500:      #877463;
    --krx-gray-600:      #544436;        /* on-surface-variant */
    --krx-gray-800:      #1b1c1c;
    --krx-font-display:  'Wedding Gothic ATF Wide', sans-serif;
    --krx-font-goudy:    'Goudy Stout', serif;
    --krx-font-body:     'Be Vietnam Pro', sans-serif;
    --krx-radius:        8px;
    --krx-radius-md:     12px;
    --krx-radius-lg:     16px;
    --krx-radius-xl:     24px;
    --krx-radius-full:   9999px;
    --krx-transition:    160ms ease;
    --krx-shadow-sm:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --krx-shadow-md:     0 4px 16px rgba(0,0,0,0.08);
}

/* ── Fade-in ──────────────────────────────────────────────────────────────── */
@keyframes krxFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Widget Wrapper ───────────────────────────────────────────────────────── */
.krx-estimator-widget {
    font-family: var(--krx-font-body);
    font-size:   15px;
    line-height: 1.5;
    color:       var(--krx-black);
    background:  var(--krx-bg);
    max-width:   100%;
    margin:      0 auto;
    padding:     0;
    box-sizing:  border-box;
}

.krx-estimator-widget *,
.krx-estimator-widget *::before,
.krx-estimator-widget *::after { box-sizing: inherit; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.krx-hero,
.krx-estimator-widget .krx-hero {
    background-color: #0d0d0d !important;
    padding:          40px 24px 44px;
    text-align:       center;
    position:         relative;
    overflow:         hidden;
    border-radius:    var(--krx-radius-xl) var(--krx-radius-xl) 0 0;
}

/* Dark overlay + pink radial glow — layered so theme overrides can't strip the dark */
.krx-hero-gradient,
.krx-estimator-widget .krx-hero-gradient {
    position:         absolute !important;
    inset:            0 !important;
    background:
        radial-gradient(circle at center, rgba(238,66,139,0.18) 0%, transparent 65%),
        linear-gradient(rgba(13,13,13,0.95), rgba(13,13,13,0.95)) !important;
    pointer-events:   none !important;
    z-index:          0 !important;
}

.krx-hero .krx-estimate-wrapper {
    position:   relative;
    z-index:    1;
    display:    inline-block;
    min-width:  260px;
}

.krx-hero .krx-estimate-output {
    opacity:   0;
    animation: krxFadeUp 0.45s ease forwards;
}

.krx-hero .krx-estimate-inner {
    background: none;
    border:     none;
    padding:    0;
    text-align: center;
}

/* Hero logo */
.krx-hero-logo {
    display:    block;
    max-height: 64px;
    max-width:  220px;
    margin:     0 auto 16px;
    object-fit: contain;
}

/* Price display — Goudy Stout per Stitch */
.krx-hero .krx-total-range {
    font-family:    var(--krx-font-goudy);
    font-size:      clamp(40px, 8vw, 80px);
    font-weight:    400;
    color:          var(--krx-white);
    margin:         0 0 14px;
    letter-spacing: 0.02em;
    line-height:    1.1;
}

.krx-hero .krx-disclaimer {
    font-size:   13px;
    color:       var(--krx-orange);
    line-height: 1.7;
    margin:      0 0 10px;
}
.krx-hero .krx-disclaimer br { display: none; }
.krx-hero-adjust-hint br     { display: none; }

@media (max-width: 680px) {
    .krx-hero .krx-disclaimer br { display: block; }
    .krx-hero-adjust-hint br     { display: block; }
}

.krx-hero-adjust-hint {
    font-size:      14px;
    font-weight:    500;
    color:          rgba(255,255,255,0.55);
    letter-spacing: 0.01em;
    margin:         0 auto 10px;
    line-height:    1.5;
}

/* Estimate gate overlay */
.krx-hero .krx-estimate-gate {
    position:              absolute;
    inset:                 -20px;
    z-index:               2;
    display:               flex;
    align-items:           center;
    justify-content:       center;
    background:            rgba(13,13,13,0.22);
    backdrop-filter:       blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition:            opacity 0.35s ease;
}

.krx-hero .krx-estimate-gate[hidden] { display: none !important; }

.krx-hero .krx-estimate-gate-cta {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            12px;
    padding:        24px 32px;
    text-align:     center;
}

/* Material Symbols lock icon (v2.0) */
.krx-gate-lock-icon {
    font-size:  48px;
    color:      var(--krx-pink);
}

.krx-hero .krx-estimate-gate-msg {
    font-size:   15px;
    color:       rgba(255,255,255,0.88);
    margin:      0;
    font-weight: 500;
    max-width:   280px;
}

.krx-hero .krx-estimate-output.krx-is-locked .krx-estimate-inner {
    filter:         blur(16px);
    user-select:    none;
    pointer-events: none;
}

/* ── Range row (price + info icon) ───────────────────────────────────────── */
.krx-range-row {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    margin-bottom:   6px;
}

.krx-range-row .krx-total-range { margin: 0; }

/* ── Hero resubmit ───────────────────────────────────────────────────────── */
.krx-hero-resubmit-wrap {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            8px;
    margin-top:     14px;
}

.krx-hero-resubmit-wrap[hidden] { display: none !important; }

.krx-hero-resubmit-btn {
    padding:       10px 28px;
    background:    var(--krx-orange);
    color:         var(--krx-white);
    border:        none;
    border-radius: var(--krx-radius-full);
    font-family:   var(--krx-font-body);
    font-size:     14px;
    font-weight:   700;
    cursor:        pointer;
    transition:    background 0.15s, transform 0.1s;
}

.krx-hero-resubmit-btn:hover  { background: #d6357a; }
.krx-hero-resubmit-btn:active { transform: scale(0.97); }

.krx-hero-submit-status {
    font-size: 12px;
    color:     var(--krx-teal);
    margin:    0;
}

.krx-hero-submit-status[hidden] { display: none !important; }

/* ── Progress Indicator (circle + line stepper) ───────────────────────────── */
.krx-progress {
    background:    var(--krx-white);
    border-bottom: 1px solid var(--krx-gray-200);
    padding:       20px 24px;
    margin-bottom: 0;
}

.krx-progress-inner {
    display:     flex;
    align-items: flex-start;
    justify-content: center;
    max-width:   680px;
    margin:      0 auto;
}

/* Each step: column layout */
.krx-progress-step {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            8px;
    flex-shrink:    0;
    min-width:      64px;
}

/* Circle container */
.krx-progress-circle {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    border-radius:   50%;
    border:          2px solid var(--krx-gray-400);
    background:      var(--krx-white);
    transition:      border-color var(--krx-transition), background var(--krx-transition);
}

.krx-progress-check {
    display:     none;
    font-size:   16px;
    font-weight: 700;
    color:       var(--krx-white);
    line-height: 1;
}

.krx-progress-num {
    font-family: var(--krx-font-body);
    font-size:   14px;
    font-weight: 700;
    color:       var(--krx-gray-500);
}

.krx-progress-label {
    font-family:    var(--krx-font-display);
    font-size:      10px;
    font-weight:    400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--krx-gray-500);
    white-space:    nowrap;
    text-align:     center;
}

/* Connecting line between steps */
.krx-progress-line {
    flex:         1;
    height:       2px;
    background:   var(--krx-pink);
    margin-top:   19px;   /* aligns with center of 40px circle */
    min-width:    12px;
    transition:   background var(--krx-transition);
}

/* Active step */
.krx-progress-step.krx-progress-active .krx-progress-circle {
    background:   var(--krx-orange);
    border-color: var(--krx-orange);
    box-shadow:   0 0 0 4px rgba(255,160,55,0.20);
}

.krx-progress-step.krx-progress-active .krx-progress-num {
    color: var(--krx-white);
}

.krx-progress-step.krx-progress-active .krx-progress-label {
    color:       var(--krx-orange);
    font-weight: 700;
}

/* Completed step */
.krx-progress-step.krx-progress-complete .krx-progress-circle {
    background:   var(--krx-teal);
    border-color: var(--krx-teal);
}

.krx-progress-step.krx-progress-complete .krx-progress-num { display: none; }

.krx-progress-step.krx-progress-complete .krx-progress-check {
    display: block;
}

.krx-progress-step.krx-progress-complete .krx-progress-label {
    color: var(--krx-teal);
}

/* Completed step fills connecting line to its right */
.krx-progress-step.krx-progress-complete + .krx-progress-line {
    background: var(--krx-pink);
}

/* Mobile progress: compact text display */
.krx-progress-mobile { display: none; }

@media (max-width: 600px) {
    .krx-progress-inner  { display: none; }
    .krx-progress-mobile {
        display:         flex;
        align-items:     center;
        justify-content: center;
        gap:             12px;
        padding:         14px 0 2px;
    }
    .krx-progress-mobile-prev,
    .krx-progress-mobile-next {
        font-size:   20px;
        color:       var(--krx-gray-400);
        line-height: 1;
    }
    .krx-progress-mobile-text {
        font-family: var(--krx-font-display);
        font-size:   13px;
        font-weight: 400;
        color:       var(--krx-gray-800);
        text-align:  center;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
}

/* ── Section Cards ────────────────────────────────────────────────────────── */
.krx-card {
    background:    var(--krx-white);
    border:        1px solid var(--krx-gray-400);
    border-radius: var(--krx-radius-lg);
    padding:       32px;
    margin:        14px 0;
    box-shadow:    var(--krx-shadow-sm);
}

.krx-card-header {
    display:       flex;
    align-items:   center;
    gap:           14px;
    margin-bottom: 24px;
}

/* Step badge circle */
.krx-step-badge {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      var(--krx-pink);
    color:           var(--krx-white);
    font-family:     var(--krx-font-body);
    font-size:       15px;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.krx-step-badge--teal { background: var(--krx-teal); }

/* Section icon (Material Symbols) */
.krx-section-icon {
    font-size:   36px;
    color:       var(--krx-pink);
    flex-shrink: 0;
}

.krx-section-icon--teal { color: var(--krx-teal); }

/* Section title — Wedding Gothic ATF Wide */
.krx-card-title {
    font-family:    var(--krx-font-display);
    font-size:      clamp(22px, 3vw, 30px);
    font-weight:    400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--krx-black);
    margin:         0 0 4px;
    line-height:    1.1;
}

.krx-card-subtitle {
    font-size:   13px;
    color:       var(--krx-pink);
    margin:      0;
    line-height: 1.4;
}

/* ── Tier Cards ───────────────────────────────────────────────────────────── */
.krx-tier-cards {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   12px;
    margin-bottom:         32px;
}

.krx-tier-card {
    position:       relative;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            10px;
    padding:        24px 16px;
    border:         2px solid var(--krx-teal);
    border-radius:  var(--krx-radius-lg);
    background:     var(--krx-white);
    cursor:         pointer;
    text-align:     center;
    transition:     border-color var(--krx-transition), background var(--krx-transition),
                    transform 0.15s ease;
}

.krx-tier-card:hover:not(:disabled):not(.krx-disabled) {
    border-color: var(--krx-pink);
    transform:    scale(1.02);
}

.krx-tier-card.krx-active {
    border-color: var(--krx-orange);
    background:   rgba(255, 160, 55, 0.08);
}

.krx-tier-card.krx-disabled {
    opacity: 0.38;
    cursor:  not-allowed;
}

/* Tier icon */
.krx-tier-icon {
    font-size:   32px;
    color:       var(--krx-teal);
    transition:  color var(--krx-transition);
}

.krx-tier-card.krx-active .krx-tier-icon { color: var(--krx-orange); }

.krx-tier-heading {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
    justify-content: center;
}

.krx-tier-price-indicator {
    font-size:   18px;
    font-weight: 700;
    color:       var(--krx-teal);
    transition:  color var(--krx-transition);
}

.krx-tier-card.krx-active .krx-tier-price-indicator { color: var(--krx-orange); }

.krx-tier-name {
    font-family: var(--krx-font-display);
    font-size:   16px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color:       var(--krx-teal);
    line-height: 1.1;
}

.krx-tier-card.krx-active .krx-tier-name { color: var(--krx-orange); }

.krx-tier-desc-card {
    display:     block;
    font-size:   12px;
    color:       var(--krx-teal);
    line-height: 1.5;
}

.krx-tier-card.krx-active .krx-tier-desc-card { color: var(--krx-gray-600); }


/* ── Controls Row ─────────────────────────────────────────────────────────── */
.krx-controls-row {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     flex-start;
    justify-content: center;
    gap:             40px;
    padding-top:     24px;
}

.krx-controls-group {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    flex-shrink:    0;
}


/* Cabinet controls: two stacked grid rows */
.krx-controls-row--cab {
    display:        flex;
    flex-direction: column;
    flex-wrap:      nowrap;
    align-items:    stretch;
    gap:            0;
    padding-top:    20px;
}

.krx-cab-row {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   24px;
    justify-items:         center;
    align-items:           end;
    padding:               24px 0;
}

.krx-cab-row + .krx-cab-row {
    border-top: 1px solid var(--krx-gray-200);
}

.krx-controls-group--centered {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            10px;
    width:          100%;
}

.krx-controls-group--centered .krx-label { text-align: center; }
.krx-controls-group--centered .krx-btn-group { justify-content: center; }

/* Countertop controls: 4-col grid */
.krx-controls-row--ct {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   10px;
    padding-top:           26px;
}

.krx-ct-col {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding-top:    16px;
}

.krx-ct-col--addon { grid-column: span 2; }

.krx-ct-col .krx-controls-group {
    align-items: center;
    text-align:  center;
}

/* ── Square footage input with SQ FT suffix ───────────────────────────────── */
.krx-sqft-wrapper {
    position:    relative;
    display:     inline-flex;
    align-items: center;
}

.krx-sqft-wrapper .krx-text-input {
    padding-left:  58px;
    padding-right: 58px;
    width:         240px;
    text-align:    center !important;
}

.krx-sqft-unit {
    position:    absolute;
    right:       12px;
    font-size:   11px;
    font-weight: 700;
    color:       var(--krx-pink);
    letter-spacing: 0.05em;
    pointer-events: none;
}

/* ── Material Swatch Cards ────────────────────────────────────────────────── */
.krx-material-cards {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   10px;
    margin-bottom:         32px;
}

.krx-material-card {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       12px;
    border:        2px solid var(--krx-gray-400);
    border-radius: var(--krx-radius-lg);
    background:    var(--krx-white);
    cursor:        pointer;
    text-align:    left;
    transition:    border-color var(--krx-transition), background var(--krx-transition),
                   transform 0.15s ease;
    width:         100%;
}

.krx-material-card:hover {
    border-color: var(--krx-pink);
    transform:    scale(1.01);
}

.krx-material-card.krx-active {
    border-color: var(--krx-orange);
    background:   rgba(255, 160, 55, 0.08);
}

.krx-swatch {
    width:               44px;
    height:              44px;
    border-radius:       var(--krx-radius);
    flex-shrink:         0;
    display:             block;
    background-size:     cover;
    background-position: center;
}

.krx-material-text {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}

.krx-material-name {
    display:     block;
    font-size:   13px;
    font-weight: 700;
    color:       var(--krx-black);
    line-height: 1.2;
}

.krx-material-card.krx-active .krx-material-name { color: var(--krx-orange); }

/* Swatches disabled via admin */
.krx-no-swatches .krx-swatch              { display: none; }
.krx-no-swatches .krx-material-card       { justify-content: center; text-align: center; }
.krx-no-swatches .krx-material-text       { align-items: center; }

.krx-material-desc {
    display:     block;
    font-size:   11px;
    color:       var(--krx-teal);
    line-height: 1.4;
}

/* ── Expandable Flooring / Backsplash ─────────────────────────────────────── */
.krx-addl-cols {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   12px;
    margin:                0 0 14px;
}

.krx-addl-toggle {
    width:           100%;
    display:         flex;
    align-items:     center;
    gap:             14px;
    padding:         18px 20px;
    background:      var(--krx-white);
    border:          1px solid var(--krx-gray-400);
    border-radius:   var(--krx-radius-lg);
    cursor:          pointer;
    text-align:      left;
    transition:      border-color var(--krx-transition), background var(--krx-transition);
    box-shadow:      var(--krx-shadow-sm);
}

.krx-addl-toggle:hover {
    border-color: var(--krx-pink);
    background:   var(--krx-gray-50);
}

.krx-addl-toggle:focus {
    outline:        2px solid rgba(238, 66, 139, 0.35);
    outline-offset: 2px;
}

.krx-addl-toggle[aria-expanded="true"] {
    border-color:    var(--krx-orange);
    border-radius:   var(--krx-radius-lg) var(--krx-radius-lg) 0 0;
    background:      rgba(255,160,55,0.05);
}

/* Pink circle badge (v2.0 — replaces orange square) */
.krx-addl-step-icon {
    width:           48px;
    height:          48px;
    border-radius:   50%;
    background:      var(--krx-pink);
    color:           var(--krx-white);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    box-shadow:      0 4px 12px rgba(238,66,139,0.30);
    transition:      transform var(--krx-transition), background var(--krx-transition);
}

.krx-addl-step-icon .material-symbols-outlined {
    font-size:  24px;
}

.krx-addl-toggle[aria-expanded="true"] .krx-addl-step-icon {
    transform:  rotate(45deg);
    background: var(--krx-pink);
    box-shadow: 0 4px 12px rgba(238,66,139,0.30);
}

.krx-addl-toggle-inner {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            3px;
    min-width:      0;
}

.krx-addl-toggle-title {
    display:        block;
    font-family:    var(--krx-font-display);
    font-size:      17px;
    font-weight:    400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--krx-black);
    line-height:    1.1;
}

.krx-addl-toggle-hint {
    display:   block;
    font-size: 11px;
    color:     var(--krx-pink);
}

.krx-addl-step-label {
    font-family:    var(--krx-font-display);
    font-size:      10px;
    font-weight:    400;
    color:          var(--krx-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    flex-shrink:    0;
}


.krx-addl-body {
    padding:       20px;
    background:    var(--krx-white);
    border:        1px solid var(--krx-orange);
    border-top:    none;
    border-radius: 0 0 var(--krx-radius-lg) var(--krx-radius-lg);
}

.krx-addl-body[hidden] { display: none !important; }

/* Flooring / backsplash body centering — all viewports */
.krx-addl-body                             { text-align: center !important; }
.krx-addl-body .krx-input-group            { display: flex !important; flex-direction: column !important; align-items: center !important; }
.krx-addl-body .krx-btn-group              { justify-content: center !important; }
.krx-addl-body .krx-text-input--underline  { display: block !important; margin: 0 auto !important; }
.krx-addl-body .krx-controls-group        { align-items: center !important; }
.krx-addl-body .krx-label                 { text-align: center !important; }

/* Underline-style input for optional sections */
.krx-text-input--underline {
    border:        none !important;
    border-bottom: 2px solid var(--krx-gray-400) !important;
    border-radius: 0 !important;
    padding:       0 !important;
    height:        48px;
    font-size:     20px;
    font-weight:   700;
    width:         200px;
    box-shadow:    none !important;
    text-align:    center !important;
}

.krx-text-input--underline:focus {
    border-bottom-color: var(--krx-teal) !important;
    outline: none !important;
}

@media (max-width: 680px) {
    .krx-addl-cols { grid-template-columns: 1fr; }
}

/* ── Dark Form Section ────────────────────────────────────────────────────── */
.krx-dark-section {
    background:    #111111;
    border-radius: var(--krx-radius-xl);
    padding:       56px 48px;
    margin:        14px 0;
    box-shadow:    0 8px 32px rgba(0,0,0,0.20);
    overflow:      hidden;
    max-width:     100%;
}

.krx-dark-inner {
    display:               grid;
    grid-template-columns: 2fr 3fr;
    gap:                   56px;
    align-items:           start;
}

.krx-step5-badge {
    display:        inline-block;
    background:     rgba(255,255,255,0.08);
    color:          var(--krx-orange);
    font-family:    var(--krx-font-display);
    font-size:      11px;
    font-weight:    400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding:        6px 16px;
    border-radius:  var(--krx-radius-full);
    margin-bottom:  20px;
}

.krx-dark-headline {
    font-family:    var(--krx-font-display);
    font-size:      clamp(32px, 4vw, 52px);
    font-weight:    400;
    letter-spacing: 0.04em;
    color:          var(--krx-white);
    margin:         0 0 18px;
    line-height:    1.15;
    text-transform: uppercase;
}

.krx-dark-headline-pink { color: var(--krx-orange); }

.krx-dark-body {
    font-size:   16px;
    color:       rgba(255,255,255,0.55);
    line-height: 1.7;
    margin:      0 0 24px;
}

.krx-dark-bullets {
    list-style: none;
    margin:     0 0 32px;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        12px;
}

.krx-dark-bullets li {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    font-size:   15px;
    color:       rgba(255,255,255,0.75);
    line-height: 1.5;
}

.krx-bullet-dot {
    flex-shrink: 0;
    font-size:   10px;
    margin-top:  4px;
}

.krx-bullet-dot--teal   { color: var(--krx-teal); }
.krx-bullet-dot--orange { color: var(--krx-orange); }
.krx-bullet-dot--pink   { color: var(--krx-pink); }

/* Transparent Pricing callout box */
.krx-callout {
    display:     flex;
    align-items: center;
    gap:         16px;
    padding:     18px 20px;
    background:  rgba(255,255,255,0.06);
    border:      1px solid rgba(255,255,255,0.12);
    border-radius: var(--krx-radius-lg);
}

.krx-callout-icon {
    font-size:  40px;
    color:      var(--krx-pink);
    flex-shrink: 0;
}

.krx-callout-title {
    font-family: var(--krx-font-display);
    font-size:   15px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color:       var(--krx-white);
    margin:      0 0 3px;
    text-transform: uppercase;
}

.krx-callout-body {
    font-size:   12px;
    color:       rgba(255,255,255,0.50);
    margin:      0;
}

/* Dark form overrides */
.krx-dark-right .krx-form-row              { grid-template-columns: 1fr 1fr; }
.krx-dark-right .krx-form-row--single      { grid-template-columns: 1fr; }
.krx-dark-right .krx-form-row--address     { grid-template-columns: 2fr 1fr 1fr; }

.krx-label--dark { color: rgba(255,255,255,0.80); }

.krx-field-input--dark {
    background:   rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.14);
    color:        var(--krx-white);
}

.krx-field-input--dark::placeholder { color: rgba(255,255,255,0.28); }

.krx-field-input--dark:focus {
    border-color: var(--krx-teal);
    box-shadow:   0 0 0 3px rgba(30,190,200,0.18);
    background:   rgba(255,255,255,0.10);
}

.krx-field-input--dark.krx-error { border-color: #ff6b6b; }

.krx-radio-label.krx-radio-label--dark { color: var(--krx-teal); }

.krx-radio-label--dark input[type="radio"] {
    border-color: rgba(30,190,200,0.40);
}


.krx-dark-right .krx-field-error { color: #ff6b6b; }

.krx-dark-right .krx-form-status.krx-status-success {
    background: rgba(30,190,200,0.15);
    border-color: var(--krx-teal);
    color: var(--krx-teal);
}
.krx-dark-right .krx-form-status.krx-status-error {
    background:  rgba(211,47,47,0.15);
    border-color: #ff6b6b;
    color:       #ff6b6b;
}
.krx-dark-right .krx-form-status.krx-status-loading {
    background:  rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.15);
    color:       rgba(255,255,255,0.55);
}

.krx-dark-right .krx-resubmit-wrap {
    background:   rgba(255,160,55,0.12);
    border-color: rgba(255,160,55,0.35);
}
.krx-dark-right .krx-resubmit-msg { color: rgba(255,255,255,0.60); }

/* Subscribe row */
.krx-subscribe-row { margin-bottom: 14px; }
.krx-checkbox-label--dark {
    background:   transparent;
    border-color: rgba(255,255,255,0.18);
    color:        rgba(255,255,255,0.70);
}
.krx-checkbox-label--dark:has(.krx-checkbox:checked) {
    border-color: var(--krx-teal);
    background:   rgba(30,190,200,0.08);
    color:        var(--krx-teal);
}
.krx-checkbox-label--dark .krx-checkbox {
    border-color: rgba(255,255,255,0.30);
}

/* Force legible colors in dark context — prefixed for theme-override resistance */
.krx-estimator-widget .krx-dark-right .krx-label          { color: rgba(255,255,255,0.80); }
.krx-estimator-widget .krx-dark-right .krx-label--dark    { color: rgba(255,255,255,0.80); }
.krx-estimator-widget .krx-dark-right .krx-btn-opt        { color: rgba(255,255,255,0.80); border-color: rgba(255,255,255,0.20); background: transparent; }
.krx-estimator-widget .krx-dark-right .krx-btn-opt:hover:not(:disabled):not(.krx-disabled) { color: var(--krx-teal); border-color: var(--krx-teal); }
.krx-estimator-widget .krx-dark-right .krx-btn-opt.krx-active { color: var(--krx-teal); border-color: var(--krx-teal); background: rgba(30,190,200,0.10); }
.krx-estimator-widget .krx-dark-right .krx-checkbox-label { color: rgba(255,255,255,0.80); }
.krx-estimator-widget .krx-dark-right .krx-checkbox-text  { color: rgba(255,255,255,0.80); }
.krx-estimator-widget .krx-dark-right .krx-radio-label    { color: var(--krx-teal); }
.krx-estimator-widget .krx-dark-right p,
.krx-estimator-widget .krx-dark-right label               { color: rgba(255,255,255,0.80); }
.krx-estimator-widget .krx-dark-right .krx-field-input--dark { color: var(--krx-white); }

/* Post-reveal expectation panel */
.krx-expectation-hidden-radios {
    display: none;
}

.krx-expectation-panel {
    padding:    24px 0 16px;
}

/* ── Hero expectation panel variant ──────────────────────────────────────── */
.krx-expectation-panel--hero {
    margin-top:   20px;
    padding-top:  20px;
    border-top:   1px solid rgba(255,255,255,0.14);
}

.krx-expectation-options--grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   8px;
}

@media (max-width: 600px) {
    .krx-expectation-options--grid { grid-template-columns: 1fr; }
}

.krx-expectation-heading {
    font-family:    var(--krx-font-display);
    font-size:      14px;
    letter-spacing: 0.06em;
    color:          rgba(255,255,255,0.90);
    margin-bottom:  14px;
    text-transform: uppercase;
}

.krx-expectation-options {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.krx-expectation-btn {
    width:          100%;
    padding:        12px 16px;
    background:     transparent;
    border:         1px solid rgba(255,255,255,0.25);
    border-radius:  var(--krx-radius-md);
    color:          rgba(255,255,255,0.80);
    font-family:    var(--krx-font-body);
    font-size:      13px;
    text-align:     left;
    cursor:         pointer;
    transition:     border-color var(--krx-transition), background var(--krx-transition), color var(--krx-transition);
}

.krx-expectation-btn:hover {
    border-color: var(--krx-pink);
    color:        var(--krx-pink);
}

.krx-expectation-btn--selected {
    border-color: var(--krx-orange);
    background:   rgba(255,160,55,0.15);
    color:        var(--krx-orange);
    font-weight:  600;
}

.krx-expectation-thanks {
    font-size:   13px;
    color:       rgba(255,255,255,0.60);
    margin-top:  12px;
    font-style:  italic;
}

/* Submit button — full width orange CTA (v2.0) */
.krx-submit-btn--full {
    width:          100%;
    text-align:     center;
    display:        flex;
    align-items:    center;
    justify-content: center;
    gap:            10px;
    padding:        18px 32px;
    font-size:      16px;
    letter-spacing: 0.08em;
}


@media (max-width: 860px) {
    .krx-dark-section { padding: 36px 24px; }
    .krx-dark-inner   { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 680px) {
    .krx-dark-right .krx-form-row         { grid-template-columns: 1fr; }
    .krx-dark-right .krx-form-row--address { grid-template-columns: 1fr 1fr; }
    .krx-form-questions-row               { grid-template-columns: 1fr; }
}

/* ── Labels ───────────────────────────────────────────────────────────────── */
.krx-label {
    display:        block;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color:          var(--krx-gray-600);
    font-family:    var(--krx-font-display);
    margin-top:     0;
    margin-bottom:  0;
}

/* ── Numeric Stepper ──────────────────────────────────────────────────────── */
.krx-stepper {
    display:       flex;
    align-items:   center;
    border:        1px solid var(--krx-gray-400);
    width:         fit-content;
    background:    var(--krx-white);
    border-radius: var(--krx-radius-full);
    overflow:      hidden;
}

.krx-stepper-btn {
    width:        40px;
    height:       40px;
    background:   var(--krx-gray-50);
    border:       none;
    cursor:       pointer;
    font-size:    20px;
    font-weight:  300;
    color:        var(--krx-gray-600);
    transition:   background var(--krx-transition), color var(--krx-transition);
    line-height:  1;
    padding:      0;
    flex-shrink:  0;
    user-select:  none;
}

.krx-stepper-btn:hover {
    background: var(--krx-teal);
    color:      var(--krx-white);
}

.krx-stepper-btn:active { transform: scale(0.95); }

.krx-stepper-input {
    width:        56px;
    height:       40px;
    border:       none;
    border-left:  1px solid var(--krx-gray-400);
    border-right: 1px solid var(--krx-gray-400);
    text-align:   center;
    font-family:  var(--krx-font-body);
    font-size:    15px;
    font-weight:  600;
    color:        var(--krx-black);
    background:   var(--krx-white);
    outline:      none;
    -moz-appearance: textfield;
}

.krx-stepper-input::-webkit-outer-spin-button,
.krx-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.krx-stepper-input:focus {
    border-color: var(--krx-teal);
    box-shadow:   0 0 0 2px rgba(30,190,200,0.15);
}

/* ── Button Groups ────────────────────────────────────────────────────────── */
.krx-btn-group {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
}

/* Height buttons: pill style */
.krx-height-group .krx-btn-opt {
    border-radius: var(--krx-radius-full);
    padding:       7px 14px;
    font-weight:   700;
    font-size:     13px;
}

.krx-btn-opt {
    padding:       8px 14px;
    border:        1.5px solid var(--krx-gray-400);
    background:    var(--krx-white);
    color:         var(--krx-teal);
    font-family:   var(--krx-font-body);
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    border-color var(--krx-transition), color var(--krx-transition),
                   background var(--krx-transition), transform 0.1s;
    border-radius: var(--krx-radius);
    line-height:   1.2;
    white-space:   nowrap;
}

.krx-btn-opt:hover:not(:disabled):not(.krx-disabled) {
    border-color: var(--krx-pink);
    color:        var(--krx-pink);
    transform:    scale(1.02);
}

.krx-btn-opt:active:not(:disabled):not(.krx-disabled) {
    border-color: var(--krx-orange);
    color:        var(--krx-orange);
    background:   rgba(255, 160, 55, 0.12);
    transform:    scale(0.97);
}

.krx-btn-opt.krx-active {
    border-color: var(--krx-orange);
    color:        var(--krx-orange);
    background:   rgba(255, 160, 55, 0.10);
    font-weight:  700;
}

.krx-btn-opt.krx-disabled,
.krx-btn-opt:disabled {
    opacity:      0.32;
    cursor:       not-allowed;
    border-color: var(--krx-gray-200);
    color:        var(--krx-gray-400);
    background:   var(--krx-gray-100);
    transform:    none;
}

/* ── Checkbox Stack ───────────────────────────────────────────────────────── */
.krx-checkbox-stack { display: flex; flex-direction: column; gap: 8px; }

.krx-checkbox-stack--row {
    flex-direction: row;
    flex-wrap:      wrap;
    gap:            14px;
    align-items:    center;
}

.krx-checkbox-label {
    display:     flex;
    align-items: center;
    gap:         8px;
    cursor:      pointer;
    font-size:   13px;
    color:       var(--krx-gray-800);
    padding:     8px 14px;
    border:      1px solid var(--krx-gray-400);
    border-radius: var(--krx-radius-lg);
    transition:  border-color var(--krx-transition), background var(--krx-transition);
}

.krx-checkbox-label:has(.krx-checkbox:checked) {
    border-color: var(--krx-orange);
    background:   rgba(255,160,55,0.08);
    color:        var(--krx-orange);
}

.krx-checkbox {
    appearance:    none;
    -webkit-appearance: none;
    width:         18px;
    height:        18px;
    border:        2px solid var(--krx-gray-400);
    border-radius: var(--krx-radius);
    flex-shrink:   0;
    position:      relative;
    cursor:        pointer;
    transition:    border-color var(--krx-transition), background var(--krx-transition);
}

.krx-checkbox:checked {
    background:   var(--krx-orange);
    border-color: var(--krx-orange);
}

.krx-checkbox:checked::after {
    content:     '';
    position:    absolute;
    top:         2px;
    left:        5px;
    width:       5px;
    height:      9px;
    border:      2px solid var(--krx-white);
    border-top:  none;
    border-left: none;
    transform:   rotate(42deg);
}

.krx-checkbox:focus {
    outline:        2px solid rgba(30, 190, 200, 0.4);
    outline-offset: 2px;
}

/* ── Text Input ───────────────────────────────────────────────────────────── */
.krx-text-input {
    display:       block;
    width:         140px;
    max-width:     100%;
    height:        48px;
    padding:       0 14px;
    border:        1.5px solid var(--krx-gray-400);
    border-radius: var(--krx-radius-lg);
    font-family:   var(--krx-font-body);
    font-size:     16px;
    color:         var(--krx-black);
    background:    var(--krx-white);
    outline:       none;
    transition:    border-color var(--krx-transition), box-shadow var(--krx-transition);
    -moz-appearance: textfield;
}

.krx-text-input::-webkit-outer-spin-button,
.krx-text-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.krx-text-input:focus {
    border-color: var(--krx-teal);
    box-shadow:   0 0 0 3px rgba(30,190,200,0.12);
}


.krx-input-group  { margin-bottom: 16px; }
.krx-selector-group { margin-bottom: 14px; }

/* ── Splash CT prompt ─────────────────────────────────────────────────────── */
.krx-splash-ct-prompt {
    font-size:  12px;
    color:      var(--krx-gray-600);
    font-style: italic;
    margin:     6px 0 0;
}
.krx-splash-ct-prompt[hidden] { display: none !important; }

/* ── Lead Form ────────────────────────────────────────────────────────────── */
.krx-lead-form { margin-bottom: 0; }

.krx-form-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   12px;
    margin-bottom:         12px;
}

.krx-form-row--single  { grid-template-columns: 1fr; }
.krx-form-row--address { grid-template-columns: 2fr 1fr 1fr; }

@media (max-width: 480px) {
    .krx-form-row,
    .krx-form-row--address { grid-template-columns: 1fr; }
}

.krx-form-field { display: flex; flex-direction: column; }
.krx-form-field .krx-label { margin-bottom: 6px; }

.krx-required { color: var(--krx-pink); }

.krx-field-input {
    height:        48px;
    padding:       0 14px;
    border:        1.5px solid var(--krx-gray-400);
    border-radius: var(--krx-radius-lg);
    font-family:   var(--krx-font-body);
    font-size:     15px;
    color:         var(--krx-black);
    background:    var(--krx-white);
    outline:       none;
    width:         100%;
    max-width:     100%;
    transition:    border-color var(--krx-transition), box-shadow var(--krx-transition);
}

.krx-field-input:focus {
    border-color: var(--krx-teal);
    box-shadow:   0 0 0 3px rgba(30,190,200,0.15);
}

.krx-field-input.krx-error { border-color: #D32F2F; }

.krx-field-error {
    font-size:  11px;
    color:      #D32F2F;
    margin-top: 3px;
    min-height: 14px;
    display:    block;
}

.krx-form-actions { margin-top: 10px; }

/* ── Submit Button — Orange CTA (v2.0) ───────────────────────────────────── */
.krx-submit-btn {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    gap:            10px;
    padding:        14px 32px;
    background:     var(--krx-orange);
    color:          var(--krx-white);
    border:         none;
    border-bottom:  4px solid var(--krx-orange-dark);
    border-radius:  var(--krx-radius-lg);
    font-family:    var(--krx-font-display);
    font-size:      15px;
    font-weight:    400;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    cursor:         pointer;
    transition:     opacity var(--krx-transition), transform 0.1s;
    line-height:    1;
}

.krx-submit-btn .material-symbols-outlined { font-size: 22px; }

.krx-submit-btn:hover    { opacity: 0.90; }
.krx-submit-btn:active   { transform: scale(0.98); }
.krx-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ── Form Status ──────────────────────────────────────────────────────────── */
.krx-form-status {
    padding:       14px 18px;
    border-radius: var(--krx-radius-lg);
    font-size:     14px;
    line-height:   1.5;
    margin-bottom: 14px;
}

.krx-form-status[hidden] { display: none !important; }

.krx-form-status.krx-status-success {
    background: rgba(30,190,200,0.08);
    border:     1px solid var(--krx-teal);
    color:      #0a6e75;
}

.krx-form-status.krx-status-error {
    background: rgba(211,47,47,0.06);
    border:     1px solid #D32F2F;
    color:      #b71c1c;
}

.krx-form-status.krx-status-loading {
    background: rgba(0,0,0,0.03);
    border:     1px solid #ccc;
    color:      #666;
}

/* ── Resubmit ─────────────────────────────────────────────────────────────── */
.krx-resubmit-wrap {
    margin-top:    18px;
    padding:       18px;
    background:    rgba(255,160,55,0.08);
    border:        1px solid rgba(255,160,55,0.30);
    border-radius: var(--krx-radius-lg);
    text-align:    center;
}

.krx-resubmit-wrap[hidden] { display: none !important; }

.krx-resubmit-msg {
    margin:    0 0 12px;
    font-size: 14px;
    color:     var(--krx-gray-600);
}

.krx-resubmit-btn {
    display:       inline-block;
    padding:       10px 24px;
    background:    transparent;
    color:         var(--krx-orange);
    border:        2px solid var(--krx-orange);
    border-radius: var(--krx-radius-full);
    font-size:     14px;
    font-weight:   700;
    cursor:        pointer;
    transition:    background 0.15s, color 0.15s;
}

.krx-resubmit-btn:hover { background: var(--krx-orange); color: #fff; outline: none; }

/* ── Radio inputs ─────────────────────────────────────────────────────────── */
.krx-form-questions-row {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   12px 28px;
    margin-bottom:         16px;
}

.krx-form-question { margin-bottom: 0; }

.krx-radio-group {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin-bottom:  4px;
    margin-top:     10px;
}

.krx-radio-group--2col {
    display:               grid;
    grid-template-columns: 1fr 1fr;
}

.krx-radio-label {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    cursor:        pointer;
    font-size:     13px;
    color:         var(--krx-gray-800);
    line-height:   1.4;
    padding:       10px 14px;
    border:        1px solid var(--krx-gray-400);
    border-radius: var(--krx-radius-lg);
    transition:    border-color var(--krx-transition), background var(--krx-transition);
}

.krx-radio-label:has(input:checked) {
    border-color: var(--krx-orange);
    background:   rgba(255,160,55,0.08);
    color:        var(--krx-orange);
}

.krx-radio-label.krx-radio-label--dark {
    color:        var(--krx-teal);
    border-color: rgba(30,190,200,0.30);
}

.krx-radio-label.krx-radio-label--dark:has(input:checked) {
    border-color: var(--krx-orange);
    background:   rgba(255,160,55,0.12);
    color:        var(--krx-orange);
}

.krx-radio-label input[type="radio"] {
    appearance:         none;
    -webkit-appearance: none;
    width:              18px;
    height:             18px;
    border:             2px solid var(--krx-gray-400);
    border-radius:      50%;
    flex-shrink:        0;
    position:           relative;
    cursor:             pointer;
    margin-top:         1px;
    transition:         border-color var(--krx-transition);
}

.krx-radio-label input[type="radio"]:checked { border-color: var(--krx-orange); }

.krx-radio-label input[type="radio"]:checked::after {
    content:       '';
    position:      absolute;
    top:           50%;
    left:          50%;
    transform:     translate(-50%,-50%);
    width:         8px;
    height:        8px;
    background:    var(--krx-orange);
    border-radius: 50%;
}


/* ── Turnstile ────────────────────────────────────────────────────────────── */
.cf-turnstile { margin-bottom: 10px; }

/* ── Sticky Bar (mobile only) ─────────────────────────────────────────────── */
.krx-sticky-bar {
    display:               none;
    position:              fixed;
    bottom:                0;
    left:                  0;
    right:                 0;
    z-index:               9999;
    background:            rgba(252, 249, 248, 0.82);
    backdrop-filter:       blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top:            3px solid var(--krx-teal);
    padding:               12px 20px;
    font-size:             14px;
    font-weight:           500;
    color:                 var(--krx-black);
    box-shadow:            0 -4px 16px rgba(0,0,0,0.10);
}

@media (max-width: 768px) {
    .krx-sticky-bar:not([hidden]) { display: block; }
    /* Blur price until form submitted */
    .krx-sticky-bar-range {
        filter:     blur(3.5px);
        transition: filter 0.4s ease;
        display:    inline-block;
    }
    .krx-sticky-bar--revealed .krx-sticky-bar-range { filter: none; }
}

.krx-sticky-bar-label { color: var(--krx-gray-600); }
.krx-sticky-bar-range { color: var(--krx-orange); font-weight: 700; margin-left: 4px; }

/* ── Tier desc (hidden, JS still targets it) ──────────────────────────────── */
.krx-tier-desc[hidden] { display: none !important; }

/* ── Tablet tightening (768px) ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .krx-material-cards { grid-template-columns: 1fr 1fr; }
    .krx-tier-cards     { grid-template-columns: 1fr; }
}

/* ── Responsive line-break utility (hidden on wide, visible on mobile) ────── */
.krx-show-mobile { display: none; }
@media (max-width: 680px) { .krx-show-mobile { display: block; } }

/* ── Mobile tightening (680px) ────────────────────────────────────────────── */
@media (max-width: 680px) {
    .krx-controls-row     { gap: 12px; }
    .krx-controls-row--ct { grid-template-columns: 1fr; gap: 16px; }
    .krx-ct-col                      { align-items: center; text-align: center; width: 100%; }
    .krx-ct-col--addon               { grid-column: 1; }
    .krx-ct-col .krx-controls-group  { align-items: center; width: 100%; }
    .krx-ct-col .krx-sqft-wrapper    { display: flex; justify-content: center; }
    .krx-ct-col .krx-btn-group       { justify-content: center; }
    .krx-cab-row                     { grid-template-columns: 1fr; gap: 20px; }
    .krx-cab-row + .krx-cab-row      { border-top: none; }
    .krx-card                        { padding: 20px 16px; }
    .krx-hero                        { padding: 28px 16px 32px; border-radius: 0; }
    .krx-card-header                 { gap: 10px; }
}

/* ── Small mobile (480px) ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .krx-material-cards              { grid-template-columns: 1fr; }
    .krx-checkbox-stack--row         { flex-direction: column; gap: 8px; }
    .krx-submit-btn                  { width: 100%; }
    .krx-btn-opt                     { padding: 6px 10px; font-size: 12px; }
    .krx-dark-section                { padding: 28px 16px; border-radius: var(--krx-radius-lg); }
    .krx-sqft-wrapper .krx-text-input { width: 100%; }
}

/* ── Info Tooltip System ──────────────────────────────────────────────────── */
.krx-info-tip {
    position:       relative;
    display:        inline-flex;
    align-items:    center;
    vertical-align: middle;
}

.krx-info-btn {
    display:     inline-flex;
    align-items: center;
    background:  transparent;
    border:      none;
    padding:     0 0 0 3px;
    color:       var(--krx-pink);
    cursor:      pointer;
    line-height: 1;
    flex-shrink: 0;
    transition:  color 0.15s;
}

.krx-info-btn svg { display: block; }

.krx-range-row .krx-info-btn {
    color: var(--krx-pink);
}
.krx-range-row .krx-info-btn:hover {
    color: var(--krx-pink);
}
.krx-range-row .krx-info-bubble {
    left:  auto;
    right: 0;
    top:   auto;
    bottom: calc(100% + 8px);
}

.krx-info-bubble {
    position:       absolute;
    left:           0;
    top:            calc(100% + 8px);
    z-index:        200;
    min-width:      240px;
    max-width:      300px;
    background:     #1a1a1a;
    color:          rgba(255,255,255,0.85);
    font-size:      12px;
    font-weight:    400;
    line-height:    1.6;
    padding:        12px 16px;
    border-radius:  var(--krx-radius-lg);
    border:         1px solid rgba(255,255,255,0.12);
    pointer-events: none;
    opacity:        0;
    transition:     opacity 0.15s ease;
    text-align:     left;
    text-transform: none;
    letter-spacing: normal;
    font-family:    var(--krx-font-body);
}

.krx-info-tip:hover .krx-info-bubble,
.krx-info-tip.krx-tip-open .krx-info-bubble {
    opacity:        1;
    pointer-events: auto;
}

.krx-info-bubble--left {
    left:  auto;
    right: 0;
}

@media (max-width: 600px) {
    .krx-info-bubble {
        left:  auto;
        right: 0;
    }
}

/* ── Cabinet count guidance ───────────────────────────────────────────────── */
.krx-cab-count-guidance {
    font-size:   13px;
    color:       var(--krx-pink);
    line-height: 1.55;
    margin:      10px 0 0;
    text-align:  center;
}

/* ── Compatibility error message ─────────────────────────────────────────── */
.krx-compat-error {
    font-size:   12px;
    color:       #d32f2f;
    font-weight: 600;
    margin:      6px 0 0;
    text-align:  center;
    line-height: 1.4;
}

/* ── Reassurance text (above submit) ─────────────────────────────────────── */
.krx-reassurance-text {
    font-size:   12px;
    color:       rgba(255,255,255,0.35);
    text-align:  center;
    margin:      10px 0 6px;
}