/* ============================================================
   KitchensRx Quote Form — Brand UI v2.0.0
   Light form body, dark action/total bars, Manrope body font.
   ============================================================ */

@font-face {
    font-family: 'Northwell';
    src: url('../fonts/Northwell.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Allura&family=Manrope:wght@400;500;600;700;800&family=Saira:ital,wght@0,300;0,400;0,500;0,600;0,700&display=swap');

/* ── Reset isolation: prevent theme bleed into the form ──── */
#krx-quote-wrap,
#krx-quote-wrap *,
#krx-quote-wrap *::before,
#krx-quote-wrap *::after {
    box-sizing: border-box;
}

#krx-quote-wrap input,
#krx-quote-wrap select,
#krx-quote-wrap textarea,
#krx-quote-wrap button,
#krx-quote-wrap label {
    font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
}

:root {
    --krx-pink:        #EE428B;
    --krx-pink-deep:   #C9326F;
    --krx-pink-lt:     #FBDDEA;
    --krx-pink-glow:   rgba(238,66,139,.25);
    --krx-teal:        #1EBEC8;
    --krx-teal-deep:   #169AA3;
    --krx-navy:        #222933;    /* action bar / total bar */
    --krx-navy-line:   #2e3641;   /* dividers inside dark bars */
    --krx-dark:        #222933;
    --krx-dark2:       #222933;
    --krx-dark3:       #1a1f28;
    --krx-border:      #E4E1DB;   /* warm hairline */
    --krx-border-ui:   #d6d9de;   /* input/control borders */
    --krx-text:        #14181C;
    --krx-muted:       #5a6471;
    --krx-green:       #7ed957;
    --krx-green-lt:    #d4edda;
    --krx-form-bg:     #f5f6f8;   /* light page body */
    --krx-card-bg:     #ffffff;
    --krx-label-color: #5a6471;
}

/* ── Blank canvas page + global WordPress dark-base override ─── */
body.krx-blank-page {
    background-color: #f5f6f8 !important;
    margin: 0;
    padding: 0;
}
/* When WordPress injects dark global-styles (no theme), force light
   backgrounds on every major KRX surface so nothing goes black.     */
.krx-quote-form,
.krx-hero,
.krx-card,
.krx-card-body,
.krx-card-header {
    color-scheme: light;
}

/* ── Outer wrapper ──────────────────────────────────────────── */
.krx-quote-form {
    font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    color: var(--krx-text);
    max-width: 95%;
    margin: 0 auto;
    background: var(--krx-form-bg);
    border-radius: 16px;
    padding: 0;
    /* No overflow:hidden — it breaks position:sticky on the price bar.
       Corner rounding is handled per-child (brand-header top, price-bar bottom). */
    box-shadow: 0 4px 24px rgba(20,24,28,.10), 0 1px 4px rgba(20,24,28,.06);
}

/* ── Brand header strip ─────────────────────────────────────── */
.krx-brand-header {
    background: #fff;
    padding: 14px 24px;
    border-bottom: 1px solid #E4E1DB;
    border-radius: 16px 16px 0 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.krx-brand-wordmark {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.krx-brand-wordmark strong {
    font-family: 'Saira', 'Wedding Gothic ATF Wide', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #14181C;
    line-height: 1;
}

.krx-brand-wordmark strong span {
    color: var(--krx-pink);
}

.krx-brand-wordmark small {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9aa3ad;
}

.krx-brand-sep {
    width: 1px;
    height: 28px;
    background: #E4E1DB;
    margin: 0 4px;
}

.krx-brand-doc-label {
    font-size: 12px;
    font-weight: 600;
    color: #9aa3ad;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.krx-brand-quote-num {
    margin-left: auto;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--krx-teal-deep, #169AA3);
    background: #D2F2F4;
    padding: 3px 10px;
    border-radius: 999px;
}

/* ── Inner padding wrapper ──────────────────────────────────── */
.krx-form-inner {
    padding: 0 0 0;  /* horizontal spacing applied per-element via margins */
}

/* ── Action bar ─────────────────────────────────────────────── */
.krx-action-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 18px;
    background: var(--krx-navy);
    border: none;
    border-radius: 10px 10px 0 0;
    margin: 18px 24px 0;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(20,24,28,.18);
}

.krx-action-bar .krx-quote-title {
    color: #fff;
    font-family: 'Saira', system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-right: auto;
}

/* ── Collapsed summary row ──────────────────────────────────── */
.krx-collapsed-summary {
    display: none;
    flex: 1;
    padding: 0 16px;
    min-width: 0;
}
.krx-card.krx-collapsed .krx-collapsed-summary { display: flex; align-items: center; }
.krx-collapsed-summary .krx-field { flex: 1; min-width: 0; }
.krx-collapsed-summary input {
    border: 1px solid var(--krx-border-ui);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    width: 100%;
    font-family: inherit;
    background: #fff;
    color: var(--krx-text);
}
.krx-collapsed-summary input:focus {
    outline: none;
    border-color: var(--krx-pink);
    box-shadow: 0 0 0 3px rgba(238,66,139,.12);
}
.krx-summary-pill {
    font-size: 13px;
    font-weight: 500;
    color: var(--krx-text);
    background: rgba(238,66,139,.08);
    border: 1px solid rgba(238,66,139,.18);
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.krx-summary-sep {
    font-size: 14px;
    color: var(--krx-muted);
    padding: 0 6px;
    flex-shrink: 0;
}

/* ── Collapsible cards ──────────────────────────────────────── */
.krx-collapse-btn {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.krx-collapse-btn:hover { opacity: 0.8; }
.krx-collapse-icon {
    width: 28px;
    height: 28px;
    display: block;
    transition: opacity .15s;
}
.krx-card.krx-collapsed .krx-card-body { display: none; }

/* ── Cards ──────────────────────────────────────────────────── */
.krx-card {
    background: var(--krx-card-bg);
    border-radius: 14px;
    margin: 14px 24px;
    box-shadow: 0 1px 0 rgba(20,24,28,.04), 0 1px 4px rgba(20,24,28,.06), 0 4px 16px rgba(20,24,28,.05);
    overflow: hidden;
    transition: box-shadow .2s;
}

.krx-card:hover {
    box-shadow: 0 1px 0 rgba(20,24,28,.04), 0 2px 8px rgba(20,24,28,.08), 0 8px 24px rgba(20,24,28,.08);
}

.krx-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 26px;
    border-bottom: 1px solid #ebedf0;
    background: var(--krx-card-bg);
}

.krx-section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--krx-pink);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.krx-card-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--krx-pink);
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.2;
}

.krx-card-header .krx-card-subtitle {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--krx-pink);
    font-weight: 400;
    line-height: 1.3;
}

.krx-card-body {
    padding: 26px 32px 30px;
}

/* ── Grid helpers ───────────────────────────────────────────── */
.krx-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
}

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

@media (max-width: 780px) {
    .krx-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .krx-grid-2,
    .krx-grid-3 { grid-template-columns: 1fr; }
}

.krx-full { grid-column: 1 / -1; }

/* ── Field labels & inputs ──────────────────────────────────── */
.krx-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.krx-label-note {
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--krx-muted);
    margin-left: 4px;
}

.krx-field > label:first-child,
.krx-field > .krx-field-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--krx-pink);
}

.krx-field input[type="text"],
.krx-field input[type="number"],
.krx-field input[type="email"],
.krx-field input[type="date"],
.krx-field select,
.krx-field textarea {
    border: 1px solid var(--krx-border-ui);
    border-radius: 8px;
    padding: 11px 13px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    color: var(--krx-text);
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.krx-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23EE428B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.krx-field input:focus,
.krx-field select:focus,
.krx-field textarea:focus {
    outline: none;
    border-color: var(--krx-pink);
    box-shadow: 0 0 0 3px rgba(238,66,139,.12);
}

.krx-field small {
    color: var(--krx-muted);
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Section dividers inside cards ─────────────────────────── */
.krx-section-divider {
    margin: 24px -32px 28px;   /* full-bleed relative to card-body 32px padding */
    border: none;
    border-top: 1px solid #ebedf0;
}

.krx-card-body h3 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--krx-pink);
    margin: 20px 0 12px;
}

.krx-card-body h3:first-child { margin-top: 0; }

/* ── Toggle (checkbox) ──────────────────────────────────────── */
.krx-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--krx-text) !important;
}

.krx-toggle input[type="checkbox"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--krx-pink);
    flex-shrink: 0;
    border-radius: 4px;
}

/* ── Stepper (+/−) ──────────────────────────────────────────── */
.krx-stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--krx-border-ui);
    border-radius: 8px;
    overflow: hidden;
    width: fit-content;
    transition: border-color .15s, box-shadow .15s;
}

.krx-stepper:focus-within {
    border-color: var(--krx-pink);
    box-shadow: 0 0 0 3px rgba(238,66,139,.12);
}

.krx-stepper button {
    background: #f9fafb;
    border: none;
    width: 34px;
    height: 36px;
    font-size: 16px;
    font-weight: 700;
    color: var(--krx-navy);
    cursor: pointer;
    transition: background .12s, color .12s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
}

.krx-stepper button:hover:not(:disabled) {
    background: var(--krx-pink);
    color: #fff;
}

.krx-stepper button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.krx-stepper input[type="number"] {
    border: none !important;
    border-left: 1px solid var(--krx-border-ui) !important;
    border-right: 1px solid var(--krx-border-ui) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 52px !important;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    padding: 0 4px !important;
    height: 36px;
    color: var(--krx-text);
    -moz-appearance: textfield;
    background: #fff !important;
}

.krx-stepper input[type="number"]::-webkit-inner-spin-button,
.krx-stepper input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── Buttons ────────────────────────────────────────────────── */
.krx-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: opacity .15s, transform .12s, box-shadow .15s;
    letter-spacing: .01em;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1;
}

.krx-btn:hover:not(:disabled) {
    opacity: .9;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.krx-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

.krx-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }

.krx-btn-white {
    background: rgba(255,255,255,.12);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.22);
    backdrop-filter: blur(4px);
}
.krx-btn-white:hover:not(:disabled) {
    background: rgba(255,255,255,.2);
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

.krx-btn-pink {
    background: linear-gradient(135deg, var(--krx-pink) 0%, #c0136a 100%);
    color: #fff;
    box-shadow: 0 2px 10px var(--krx-pink-glow);
}

.krx-btn-teal {
    background: linear-gradient(135deg, var(--krx-teal) 0%, #0e8570 100%);
    color: #fff;
    box-shadow: 0 2px 10px rgba(23,165,137,.3);
}

/* DocuSign variant — outlined version of its sibling colour */
.krx-btn-ds {
    opacity: .78;
    box-shadow: none !important;
    outline: 2px solid rgba(255,255,255,.35);
    outline-offset: -3px;
}
.krx-btn-ds:hover:not(:disabled) {
    opacity: 1;
}

.krx-btn-ghost {
    background: transparent;
    color: var(--krx-muted);
    border: 1px solid var(--krx-border-ui);
}

.krx-btn-ghost:hover:not(:disabled) {
    background: #f5f6f8;
    color: var(--krx-text);
    border-color: #b0b5bc;
}

/* Pink outline pill — "+ Add" buttons in cabinet tables */
.krx-btn-add-pill {
    background: transparent;
    color: var(--krx-pink);
    border: 1px solid var(--krx-pink);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
}
.krx-btn-add-pill:hover:not(:disabled) {
    background: var(--krx-pink-lt);
    box-shadow: none;
    transform: none;
}

/* ── Status select ──────────────────────────────────────────── */
#krx-status-select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ── Save notice ────────────────────────────────────────────── */
#krx-save-notice {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #6ee7b7;
    border-radius: 10px;
    padding: 12px 18px;
    margin: 14px 24px -4px;
    color: #064e3b;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Price bar (sticky bottom) ──────────────────────────────── */
#krx-price-bar {
    position: sticky;
    bottom: 0;
    z-index: 100;
    background: var(--krx-navy);
    border: none;
    border-radius: 0 0 10px 10px;
    padding: 16px 24px 14px;
    box-shadow: 0 -4px 20px rgba(20,24,28,.20);
    margin: 0 24px 18px;
    /* sticky is already a containing block for position:absolute children */
}

/* Collapse/expand toggle button */
#krx-pricebar-toggle {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    color: rgba(255,255,255,.45);
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 5px 9px;
    transition: background .15s, color .15s;
    z-index: 1;
}
#krx-pricebar-toggle:hover {
    background: rgba(255,255,255,.16);
    color: rgba(255,255,255,.9);
}

/* State 1 — compact: total only, hide breakdown items and payments */
#krx-price-bar.krx-compact {
    padding: 12px 60px 12px 24px;
    border-radius: 0 0 10px 10px;
}
#krx-price-bar.krx-compact .krx-price-bar-items,
#krx-price-bar.krx-compact .krx-price-bar-payments {
    display: none !important;
}

/* State 2 — collapsed: hide everything, show only a thin strip with toggle */
#krx-price-bar.krx-collapsed {
    padding: 6px 60px 6px 24px;
}
#krx-price-bar.krx-collapsed .krx-price-bar-main,
#krx-price-bar.krx-collapsed .krx-price-bar-payments {
    display: none !important;
}
#krx-price-bar.krx-collapsed #krx-pricebar-toggle {
    top: 50%;
    transform: translateY(-50%);
}

.krx-price-bar-main {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: center;
    justify-content: space-between;
}

.krx-price-bar-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
}

.krx-price-bar-items span {
    font-size: 12px;
    color: #9aa3ad;
}

.krx-price-bar-items strong {
    color: rgba(255,255,255,.85);
    font-weight: 600;
    border-bottom: 2px solid var(--krx-pink);
    padding-bottom: 1px;
}

.krx-price-total-wrap {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.krx-price-total-label {
    font-size: 11px;
    color: rgba(255,255,255,.4);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

#pb-total {
    font-size: 34px;
    font-weight: 800;
    color: var(--krx-green);   /* #7ed957 */
    letter-spacing: -.03em;
    line-height: 1;
}

#pb-discount-wrap {
    color: var(--krx-pink) !important;
    font-size: 13px;
    font-weight: 600;
}

.krx-price-bar-payments {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--krx-navy-line);
    font-size: 12px;
    color: #9aa3ad;
}

.krx-price-bar-payments strong { color: rgba(255,255,255,.75); font-weight: 600; }

/* ── Layout import panel ────────────────────────────────────── */
.krx-import-panel {
    background: #f8f9fb;
    border: 1.5px dashed var(--krx-border-ui);
    border-radius: 10px;
    padding: 18px;
}

.krx-import-results {
    background: #fff;
    border: 1px solid var(--krx-border);
    border-radius: 10px;
    padding: 16px;
    margin-top: 14px;
}

.krx-import-counts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.krx-import-count-badge {
    background: var(--krx-pink-lt);
    color: var(--krx-pink);
    font-weight: 700;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(233,25,124,.2);
}

#ir-items-wrap { overflow: hidden; border-radius: 8px; border: 1px solid var(--krx-border); }
#ir-items-wrap table { font-size: 12px; width: 100%; border-collapse: collapse; }
#ir-items-wrap th { background: #f3f4f6; padding: 6px 10px; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--krx-muted); }
#ir-items-wrap td { padding: 5px 10px; border-bottom: 1px solid #f3f4f6; }

/* ── Misc items ─────────────────────────────────────────────── */
.krx-misc-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.krx-misc-row input[type="text"] {
    flex: 1;
    border: 1px solid var(--krx-border-ui);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--krx-text);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.krx-misc-row input[type="text"]:focus {
    outline: none;
    border-color: var(--krx-pink);
    box-shadow: 0 0 0 3px rgba(238,66,139,.12);
}

/* ── Access denied ──────────────────────────────────────────── */
.krx-access-denied {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 10px;
    padding: 18px 22px;
    font-size: 15px;
}

/* ── Read-only notice ───────────────────────────────────────── */
.krx-readonly-notice {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    padding: 12px 18px;
    margin: 14px 24px -4px;
    color: #92400e;
    font-weight: 600;
    font-size: 13px;
}

/* ── Number field (non-stepper) ─────────────────────────────── */
.krx-number {
    width: 110px !important;
}

/* ── Unplaced codes banner ──────────────────────────────────── */
.krx-unplaced-banner {
    background: #fffbeb;
    border: 1.5px solid #f59e0b;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
}

.krx-unplaced-label {
    font-size: 12px;
    font-weight: 700;
    color: #92400e;
    display: block;
    margin-bottom: 6px;
}

.krx-unplaced-code {
    display: inline-block;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    color: #78350f;
    font-size: 12px;
    font-weight: 700;
    font-family: "Courier New", Courier, monospace;
    padding: 2px 8px;
    border-radius: 4px;
}

/* ── Cabinet by-size tables ─────────────────────────────────── */
.krx-cabinet-group {
    margin-bottom: 18px;
}

/* Flex row: section h3 on left, DWE toggle on right */
.krx-cab-group-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.krx-cab-group-hdr h3 {
    margin: 0;
}

/* DWE toggle label (checkbox + text) */
.krx-dwe-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--krx-pink);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.krx-dwe-toggle-wrap input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--krx-pink);
    cursor: pointer;
    flex-shrink: 0;
}

.krx-cabinet-table {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse;
    font-size: 13px;
    border: 1px solid #ebedf0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 6px;
}

.krx-cabinet-table thead { display: table-header-group !important; }
.krx-cabinet-table tbody { display: table-row-group !important; }
.krx-cabinet-table tr   { display: table-row !important; }
.krx-cabinet-table th,
.krx-cabinet-table td   { display: table-cell !important; vertical-align: middle !important; }

/* Column widths are set via inline style on <th> elements in the PHP template —
   that approach is immune to nth-child miscounts when DWE cols are hidden.
   Only centering is applied here for non-code/desc columns. */
.krx-cabinet-table th:not(:first-child):not(:nth-child(2)),
.krx-cabinet-table td:not(:first-child):not(:nth-child(2)) { text-align: center; }

/* Option checkbox styling */
.krx-cab-opt {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--krx-teal);
}

.krx-cabinet-table thead th {
    background: #f4f5f7;
    padding: 7px 10px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .10em;
    color: #7c8694;
    border-bottom: 1px solid #ebedf0;
    white-space: nowrap;
    overflow: hidden;
}

.krx-cabinet-table tbody tr:nth-child(even) { background: #fafbfc; }

.krx-cabinet-table td {
    padding: 4px 8px;
    border-bottom: 1px solid #f0f1f3;
}

.krx-cabinet-table tbody tr:last-child td { border-bottom: none; }

.krx-cab-code {
    width: 100%;
    border: 1px solid var(--krx-border-ui);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 13px;
    font-family: "Courier New", Courier, monospace;
    background: #fff;
    color: var(--krx-text);
    transition: border-color .15s, box-shadow .15s;
}

.krx-cab-code:focus {
    outline: none;
    border-color: var(--krx-pink);
    box-shadow: 0 0 0 2px rgba(238,66,139,.1);
}

.krx-cab-desc {
    width: 100%;
    border: 1px solid var(--krx-border-ui);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 13px;
    background: #fff;
    color: var(--krx-text);
    transition: border-color .15s, box-shadow .15s;
}

.krx-cab-desc:focus {
    outline: none;
    border-color: var(--krx-teal);
    box-shadow: 0 0 0 2px rgba(30,190,200,.1);
}

.krx-cab-qty {
    width: 56px;
    border: 1px solid var(--krx-border-ui);
    border-radius: 6px;
    padding: 5px 6px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    background: #fff;
    color: var(--krx-text);
    -moz-appearance: textfield;
    display: block;
    margin: 0 auto;
    transition: border-color .15s;
}

.krx-cab-qty::-webkit-inner-spin-button,
.krx-cab-qty::-webkit-outer-spin-button { -webkit-appearance: none; }

.krx-cab-qty:focus {
    outline: none;
    border-color: var(--krx-pink);
    box-shadow: 0 0 0 2px rgba(238,66,139,.1);
}

.krx-deco-type {
    width: 100%;
    border: 1px solid var(--krx-border-ui);
    border-radius: 6px;
    padding: 5px 28px 5px 8px;
    font-size: 13px;
    font-family: inherit;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235a6471' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    color: var(--krx-text);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color .15s;
}

.krx-deco-type:focus {
    outline: none;
    border-color: var(--krx-pink);
    box-shadow: 0 0 0 2px rgba(238,66,139,.1);
}

.krx-remove-deco {
    background: none;
    border: none;
    color: var(--krx-muted);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
    transition: background .12s, color .12s;
}

.krx-remove-deco:hover { background: #fee2e2; color: #dc2626; }

.krx-remove-cab {
    background: none;
    border: none;
    color: var(--krx-muted);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
    transition: background .12s, color .12s;
}

.krx-remove-cab:hover { background: #fee2e2; color: #dc2626; }

/* ── File input ─────────────────────────────────────────────── */
input[type="file"]#krx-layout-file {
    display: none; /* hidden — label below triggers it */
}
.krx-file-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--krx-teal);
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.krx-file-trigger:hover { background: #148a72; }
.krx-file-chosen {
    font-size: 13px;
    color: var(--krx-navy);
    font-style: italic;
}

/* ── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 700px) {
    .krx-quote-form { border-radius: 0; }
    .krx-brand-header { padding: 14px 16px 13px; border-radius: 0; }
    .krx-action-bar { margin: 12px 12px 0; border-radius: 8px 8px 0 0; }
    .krx-card { margin: 10px 12px; border-radius: 10px; }
    .krx-card-header { padding: 14px 18px; }
    .krx-card-body { padding: 18px 18px 22px; }
    .krx-section-divider { margin: 16px -18px 20px; }
    #pb-total { font-size: 26px; }
    #krx-price-bar { padding: 14px 16px 12px; margin: 0 12px 12px; border-radius: 0 0 8px 8px; }
    #krx-save-notice { margin: 10px 12px -2px; }
}

@media (max-width: 480px) {
    .krx-brand-wordmark strong { font-size: 15px; }
    .krx-brand-sep,
    .krx-brand-doc-label { display: none; }
}

/* ── Legacy Capstone panel ───────────────────────────────────── */
.krx-legacy-panel {
    margin-top: 0;
}

/* ── Preview row: door · color · hardware side by side ──────────── */
.krx-preview-row {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: nowrap;
    align-items: stretch;
}
/* Each card in the row — equal width, never smaller than the image */
.krx-preview-card {
    flex: 1 1 0;
    min-width: 120px;
    max-width: 220px;
}
/* Base swatch wrapper (used both inside preview-row and standalone in Tribeca panel) */
.krx-swatch-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-align: center;
}
.krx-swatch-img {
    width: 100%;
    max-width: 160px;
    height: 120px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #cbd5e1;
}
.krx-swatch-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--krx-text);
    line-height: 1.4;
}
/* Color chips are square — flat color samples */
.krx-color-swatch-wrap .krx-swatch-img {
    height: 80px;
    object-fit: cover;
}
/* Hardware images are landscape product shots */
.krx-hw-swatch-wrap .krx-swatch-img {
    height: 120px;
    object-fit: contain;
    background: #f1f5f9;
}

/* Two-tone "(Accent)" / "(Second Color)" tag in field labels */
.krx-tt-tag {
    font-size: 11px;
    font-weight: 500;
    color: #7c3aed;
    background: #ede9fe;
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 4px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Advisory notes */
.krx-legacy-advisories {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
}
.krx-advisory {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
}
.krx-advisory-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}
.krx-advisory-warn {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

/* Searchable dropdown */
.krx-searchable-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.krx-search-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--krx-border-ui);
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
}
.krx-search-input:focus {
    outline: none;
    border-color: var(--krx-pink);
    box-shadow: 0 0 0 2px rgba(238,66,139,.12);
}
.krx-search-list {
    width: 100%;
    border: 1px solid var(--krx-border-ui);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    padding: 4px 0;
    height: 130px;
    overflow-y: auto;
}
.krx-search-list option {
    padding: 5px 10px;
    cursor: pointer;
}
.krx-search-list option:checked {
    background: var(--krx-pink);
    color: #fff;
}

/* Legacy panel — 4-column single-row layout */
.krx-legacy-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--krx-gap);
    align-items: start;
}

/* Door style column: position:relative so the floating list stays anchored to the input */
.krx-legacy-door-field {
    position: relative;
}
.krx-legacy-door-field .krx-searchable-wrap {
    position: relative;
}
/* Float the door list absolutely so it doesn't stretch the grid row height */
.krx-legacy-door-field .krx-search-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    margin-top: 2px;
}
@media (max-width: 900px) {
    .krx-legacy-grid { grid-template-columns: repeat(2, 1fr); }
    .krx-legacy-door-field .krx-search-list { position: static; margin-top: 0; }
}
@media (max-width: 520px) {
    .krx-legacy-grid { grid-template-columns: 1fr; }
}

/* Door attribute chips — appear below the legacy grid */
.krx-door-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    min-height: 0;
}
.krx-door-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .02em;
}
.krx-chip-fo {
    background: #dbeafe;
    color: #1e40af;
}
.krx-chip-so {
    background: #fef3c7;
    color: #92400e;
}
.krx-chip-mitered {
    background: #ede9fe;
    color: #5b21b6;
}
.krx-chip-tier {
    background: var(--krx-navy);
    color: #fff;
}

/* ── Hardware cascade ────────────────────────────────────────────── */
.krx-hardware-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--krx-gap);
    align-items: start;
}
@media (max-width: 600px) {
    .krx-hardware-grid { grid-template-columns: 1fr; }
}

/* ── Pricing mode toggle ──────────────────────────────────────────── */
.krx-pricing-mode-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 10px 14px;
    background: #f5f6f8;
    border: 1px solid var(--krx-border);
    border-radius: 8px;
}
.krx-pricing-toggle {
    display: inline-flex;
    border: 1px solid var(--krx-border-ui);
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}
.krx-toggle-btn {
    padding: 5px 16px;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    color: var(--krx-muted);
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s;
    line-height: 1.4;
}
.krx-toggle-btn + .krx-toggle-btn {
    border-left: 1px solid var(--krx-border-ui);
}
.krx-toggle-btn.active {
    background: var(--krx-navy);
    color: #fff;
}
.krx-toggle-btn:hover:not(.active) {
    background: #f5f6f8;
    color: var(--krx-text);
}
.krx-pricing-mode-label {
    font-size: 12px;
    color: var(--krx-muted);
}

/* ── Deluxe Wood Ends — inline table columns ─────────────────────── */
/* DWE columns hidden by default; each cabinet group gets .krx-dwe-active when its toggle is on */
.krx-dwe-col { display: none; }
#krx-cab-group-wall.krx-dwe-active .krx-dwe-col,
#krx-cab-group-base.krx-dwe-active .krx-dwe-col,
#krx-cab-group-tall.krx-dwe-active .krx-dwe-col { display: table-cell; }

/* Group header row — "DELUXE WOOD ENDS" spanning label */
.krx-thead-group-row th {
    padding: 0;
    border-bottom: none;
}
.krx-dwe-group-th {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--krx-pink);
    text-align: center;
    padding: 4px 6px 2px !important;
    border-bottom: 1px solid rgba(238,66,139,.2) !important;
    white-space: nowrap;
}

/* Left / Right sub-headers */
.krx-dwe-side-th {
    text-align: center;
    font-size: 11px;
    color: var(--krx-muted);
    width: 42px;
    min-width: 42px;
}

/* Checkbox cells — centered */
.krx-dwe-cell {
    text-align: center;
    width: 42px;
    min-width: 42px;
}
.krx-dwe-cell input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--krx-pink);
}

/* ── Modification column ─────────────────────────────────────────── */
.krx-mod-th {
    font-size: 11px;
    color: var(--krx-muted);
    text-align: left;
    white-space: nowrap;
}

.krx-mod-cell {
    width: 140px;
    min-width: 140px;
    padding: 4px 6px !important;
}

/* Checkbox + text side-by-side inside the cell */
.krx-mod-cell {
    display: table-cell; /* keep table layout */
}

.krx-mod-cell input[type="checkbox"].krx-mod-check {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--krx-pink);
    vertical-align: middle;
    flex-shrink: 0;
    margin-right: 4px;
}

.krx-mod-cell input[type="text"].krx-mod-note {
    width: calc(100% - 24px);
    font-size: 11px;
    padding: 2px 4px;
    border: 1px solid var(--krx-border, #ddd);
    border-radius: 3px;
    vertical-align: middle;
    min-width: 0;
}

/* ── Granular pricing flags ──────────────────────────────────────── */
.krx-granular-flags {
    background: #fffbeb;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    color: #92400e;
    margin-bottom: 16px;
}
.krx-granular-flags strong {
    color: #78350f;
}
.krx-flag-list {
    margin: 6px 0 0 18px;
    padding: 0;
    list-style: disc;
    font-size: 12px;
    color: #78350f;
}
.krx-flag-list li {
    margin-bottom: 2px;
}
.krx-flag-list code {
    font-family: "SFMono-Regular", Consolas, monospace;
    background: #fef3c7;
    padding: 0 4px;
    border-radius: 3px;
}
.krx-flags-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.krx-btn-retry {
    margin-left: auto;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #78350f;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.4;
}
.krx-btn-retry:hover {
    background: #fde68a;
}

/* ── Hero proposal block ─────────────────────────────────────── */
.krx-hero {
    position: relative;
    margin: 0 24px;
    padding: 20px 36px 40px;
    background-color: #ffffff !important;
    border: 1px solid #E4E1DB;
    border-top: none;
    border-radius: 0 0 14px 14px;
    text-align: center;
}

.krx-hero-text {
    display: inline-block;
}

.krx-hero-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--krx-pink);
    margin-bottom: 20px;
}

.krx-hero-title {
    font-family: 'Saira', system-ui, sans-serif;
    font-size: 52px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--krx-pink);
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0 0 10px;
    word-break: break-word;
}
.krx-hero-name-script {
    font-family: 'Northwell', 'Allura', cursive;
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.15em;
    vertical-align: middle;
    color: var(--krx-teal);
}

.krx-hero-byline {
    font-family: 'Northwell', 'Allura', cursive;
    font-size: 28px;
    color: var(--krx-muted);
    margin: 0;
    position: absolute;
    bottom: 16px;
    right: 28px;
    text-align: right;
    white-space: nowrap;
    line-height: 1.3;
}

.krx-byline-prep {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
}

.krx-hero-price-block {
    flex-shrink: 0;
    text-align: right;
}

.krx-hero-price-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9aa3ad;
    margin-bottom: 4px;
}

.krx-hero-price {
    font-family: 'Saira', system-ui, sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #14181C;
    letter-spacing: -0.03em;
    line-height: 1;
}

.krx-hero-price-note {
    font-size: 11px;
    color: #9aa3ad;
    margin-top: 5px;
    max-width: 180px;
    line-height: 1.4;
    text-align: right;
}

/* ── Client info strip ───────────────────────────────────────── */
.krx-client-strip {
    display: flex;
    margin: 10px 24px 0;
    padding: 14px 24px;
    background: #fff;
    border: 1px solid #E4E1DB;
    border-radius: 14px;
    flex-wrap: wrap;
    gap: 12px 0;
}

.krx-client-chip {
    flex: 1 1 auto;
    padding: 0 20px;
    border-right: 1px solid #E4E1DB;
    min-width: 100px;
}

.krx-client-chip:first-child { padding-left: 0; }
.krx-client-chip:last-child  { padding-right: 0; border-right: none; }

.krx-chip-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9aa3ad;
    margin-bottom: 4px;
}

.krx-chip-val {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #14181C;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* ── Swatch combined row ─────────────────────────────────────── */
/* Outer container: single flex row that both bars' cards flow into.
   Both child bars use display:contents so their .krx-swatch-wrap
   elements participate directly in this container's flex layout. */
#krx-swatch-combined {
    display: flex;
    gap: 0;
    justify-content: space-evenly; /* single-color: 3 cards evenly spaced */
    align-items: stretch;
    flex-wrap: nowrap;
    margin-top: 20px;
}

/* Two-color: 5 cards pack left with a consistent gap */
#krx-swatch-combined.krx-tt-active {
    justify-content: flex-start;
    gap: 14px;
}

/* Bar 1 is always a transparent passthrough */
#krx-swatch-preview-bar {
    display: contents;
}

/* Bar 2 hidden by default (single-color mode).
   JS adds .krx-tt-active when two-tone is enabled → becomes transparent passthrough. */
#krx-swatch-preview-bar-2 {
    display: none;
}
#krx-swatch-combined.krx-tt-active #krx-swatch-preview-bar-2 {
    display: contents;
}

/* Hardware always floats to the end of the combined row */
#krx-hw-swatch-wrap {
    order: 100;
}

/* ── Swatch preview cards — enlarged ────────────────────────── */
.krx-preview-row {
    gap: 14px;
    margin-top: 20px;
}

.krx-preview-card {
    min-width: 140px;
    max-width: 260px;
}

.krx-swatch-wrap {
    padding: 14px 14px 10px;
    border-radius: 12px;
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    gap: 6px;
}

.krx-swatch-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
}

.krx-hw-swatch-wrap .krx-swatch-img {
    height: 140px;
    object-fit: contain;
    background: #f1f5f9;
}

.krx-color-swatch-wrap .krx-swatch-img {
    height: 100px;
    object-fit: cover;
}

/* Category label above each swatch image via ::before */
.krx-swatch-wrap::before {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9aa3ad;
    margin-bottom: 2px;
}
#krx-legacy-swatch-wrap::before,
#krx-tribeca-swatch-wrap::before        { content: 'Door Style'; }
#krx-legacy-color-swatch-wrap::before   { content: 'Finish Color'; }
#krx-hw-swatch-wrap::before             { content: 'Hardware'; }
#krx-nl-swatch-wrap::before             { content: 'Cabinet Color'; }

/* Bar-2 accent card labels */
#krx-legacy-swatch-wrap-2::before,
#krx-tribeca-swatch-wrap-2::before      { content: 'Door Style'; }
#krx-legacy-color-swatch-wrap-2::before { content: 'Finish Color'; }
#krx-nl-swatch-wrap-2::before           { content: 'Cabinet Color'; }

.krx-swatch-label {
    font-size: 12px;
    font-weight: 600;
    color: #14181C;
    line-height: 1.3;
    text-align: center;
}

/* ── Door meta tier chips — refined ─────────────────────────── */
.krx-door-chip {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 999px;
    line-height: 1;
}

.krx-chip-tier {
    background: var(--krx-navy);
    color: rgba(255,255,255,.9);
}

/* ── Responsive hero ─────────────────────────────────────────── */
@media (max-width: 700px) {
    .krx-hero {
        margin: 0 12px;
        padding: 24px 20px 52px;
    }
    .krx-hero-title  { font-size: 36px; }
    .krx-hero-byline { font-size: 20px; bottom: 12px; right: 16px; }
}