/**
 * accordiondoor.com / Bricks theme uses a 10px root font-size, not the browser default 16px
 * (see accordiondoor-css-rem-base memory). Every value below is in px for exactly that reason
 * -- no rem anywhere in this file, so nothing here can silently shrink ~37% on the real site.
 * Visual language (orange headers, card boxes, alternating backgrounds) matched against Ed's
 * screenshots of the live prod configurator, 2026-08-24.
 */
:root {
    --dcfg-orange: #FF6B35;
    --dcfg-border: #e9ecef;
    --dcfg-bg-a: #fff9f5;
    --dcfg-bg-b: #F8F9F9;   /* client review 2026-09-03: fields below Finishing Configuration */
    --dcfg-text: #555;
}

/* Shell: landing.css already ships prod's `.configurator-container` (grid 2fr 1fr)
   and `.configurator-form-section`, so the markup carries those class names and
   only the bits prod has as INLINE styles are restated here. */
/* Prod caps the grid at 1400px (`.configurator-container { max-width:1400px }`).
   This was previously left unset because at a 1440 viewport both come out at
   1360 -- the section's 40px padding, not the cap, is what binds there. The
   difference only shows on wider screens: at 1920 prod stays 1400 while an
   uncapped grid stretched to 1840. Measure at >1400 when checking this. */
.dcfg-configurator { font-size: 14px; max-width: 1400px; margin-left: auto; margin-right: auto; }

/* Bricks' theme typography would otherwise render these headings at fluid sizes
   several times larger than prod (the sidebar "Live Pricing" came out as a 40px
   h3). Prod's own values, measured off /configurator.php. */
.dcfg-configurator .dcfg-form-title { color: #2c3e50; font-size: 28px; font-weight: 700; margin: 0 0 25px; }
.dcfg-configurator .config-form-group > h4 { color: #FF6B35; font-size: 16px; font-weight: 700; margin: 0 0 15px; }
.dcfg-configurator__pricing h4 { color: #2c3e50; font-size: 16px; font-weight: 700; margin: 0 0 15px; }

/* Cards alternate cream/grey down the column exactly as prod does. */
.dcfg-card { padding: 20px; border-radius: 12px; margin-bottom: 20px; border: 1px solid var(--dcfg-border); }
.dcfg-card--a { background: var(--dcfg-bg-a); }
.dcfg-card--b { background: var(--dcfg-bg-b); }

.dcfg-field { margin-bottom: 16px; }
.dcfg-field label { display: block; color: var(--dcfg-text); font-weight: 600; margin-bottom: 8px; }
.dcfg-field select, .dcfg-field input[type="number"] { width: 100%; padding: 10px; border: 2px solid var(--dcfg-border); border-radius: 6px; font-size: 14px; }
/* Required-field flags appear ONLY after a failed Add-to-Cart click (client
   request 2026-09-03) -- nothing glows on load. */
.dcfg-field-card.is-missing, .config-form-group.is-missing { border-color: #dc3545; box-shadow: 0 0 0 1px #dc3545; }
.dcfg-field-card.is-missing select, .config-form-group.is-missing select { border-color: #dc3545; background: #fff8f8; }
.dcfg-missing-hint { color: #dc3545; font-size: 13px; margin: 8px 0 0; display: none; }
.dcfg-hint:empty { display: none; }   /* JS leaves it empty until a size is entered */
.dcfg-hint { display: inline-block; margin-top: 6px; padding: 3px 10px; background: #fff3e6; color: #e05a00; font-size: 11px; font-weight: 600; border-radius: 12px; border: 1px solid #ffd9b3; }
.dcfg-tooltip { display: block; font-size: 12px; color: #888; margin-bottom: 6px; }
.dcfg-field-note { font-size: 12px; color: #666; margin: -4px 0 6px; }
.dcfg-note { font-size: 12px; color: #888; margin: -8px 0 20px; }
.dcfg-dim-error[hidden] { display: none; }
.dcfg-dim-error { margin: 8px 0 0; padding: 8px 12px; background: #fdecea; color: #b3261e; border: 1px solid #f5c2c0; border-radius: 8px; font-size: 13px; line-height: 1.45; }
.dcfg-dim-error strong { font-weight: 700; }
.dcfg-field.dcfg-field--invalid input { border-color: #d93025; box-shadow: 0 0 0 2px rgba(217, 48, 37, 0.15); }
.dcfg-field.dcfg-field--invalid .dcfg-hint { background: #fdecea; color: #b3261e; border-color: #f5c2c0; }
/* Matches buildersunitedsales.com's blue notice style, not AD's older amber
 * warning look (client, 2026-09-15) -- same colors as .woodfold-clearance-notice. */
.dcfg-clearance-note { background: #f0f4ff; border: 1px solid #c7d2fe; border-left: 3px solid #6b8cff; border-radius: 6px; padding: 12px 15px; font-size: 12px; color: #444; margin-bottom: 20px; }

/* Manufacturer Sizing note (2026-09-05, prod parity) -- teal info card,
   distinct from the yellow clearance warning above it. */
/* buildersunitedsales.com's "Order Dimensions (Rounded Up)" blue notice
 * (client, 2026-09-15) -- same colors/format as .woodfold-dim-notice--rounding. */
.dcfg-manufacturer-sizing-note { background: #eef4ff; border: 1px solid #b8d0f9; border-left: 4px solid #4a80e8; border-radius: 6px; padding: 12px 15px; font-size: 13px; color: #1a3a6b; margin-bottom: 20px; }
.dcfg-manufacturer-sizing-title { display: flex; align-items: center; gap: 7px; font-weight: 700; color: #1a3a6b; margin-bottom: 6px; }
.dcfg-manufacturer-sizing-note p { margin: 4px 0 0; line-height: 1.5; }
.dcfg-manufacturer-sizing-body { font-size: 0.97em; }
.dcfg-manufacturer-sizing-sub { font-size: 0.88em; color: #3a5a9a; opacity: 0.9; }
/* Quantity/pocket sub-fields live INSIDE their field card (since 0.15.0) — they
   need breathing room below the select, not the old negative tuck-in. */
.dcfg-qty-field, .dcfg-pocket-field { margin-top: 14px; margin-bottom: 4px; }
.dcfg-qty-field label, .dcfg-pocket-field label { display: block; color: var(--dcfg-text); font-weight: 600; margin-bottom: 6px; }
.dcfg-qty-field input, .dcfg-pocket-field input { max-width: 120px; }
/* The dims rows sit INSIDE the "Opening Dimensions" card on prod, so they are
   plain two-column grids rather than cards of their own. */
.dcfg-dims-group { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.dcfg-dims-group .dcfg-field { margin-bottom: 0; }

/* JS-generated field groups are cards. Per client review 2026-09-03 the fields
   below Finishing Configuration no longer alternate -- they all sit on --dcfg-bg-b. */
#dcfg-dynamic-fields > .dcfg-field, #dcfg-custom-finishing-fields > .dcfg-field {
    background: var(--dcfg-bg-b);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid var(--dcfg-border);
}
#dcfg-dynamic-fields .dcfg-field-head > label,
#dcfg-custom-finishing-fields .dcfg-field-head > label { color: var(--dcfg-orange); font-size: 16px; margin-bottom: 15px; }
.dcfg-field-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dcfg-field-head label { flex: 1 1 auto; }

/* Per-series info card with tabs (prod's #product-info-section: blue-tinted card,
   orange left rail, underline tabs that go orange when active). */
.dcfg-info-card { background: #f0f7ff; border: 1px solid #cce5ff; border-left: 4px solid var(--dcfg-orange); }
.dcfg-info-tabs { display: flex; border-bottom: 2px solid #e9ecef; margin-bottom: 14px; }
.dcfg-info-tab {
    padding: 12px 20px; border: none; background: transparent; color: #666;
    font-weight: 600; font-size: 15px; cursor: pointer;
    border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all 0.3s;
}
.dcfg-info-tab.is-active { color: var(--dcfg-orange); border-bottom-color: var(--dcfg-orange); }
.dcfg-info-pane h4 { color: var(--dcfg-orange); font-size: 18px; font-weight: 700; margin: 0 0 10px; }
.dcfg-info-pane p { color: #555; font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
.dcfg-info-pane p:last-child { margin-bottom: 0; }

/* Material badge (prod parity: "Metal" / "Aluminum" pill next to the label). */
.dcfg-material-badge {
    background: var(--dcfg-orange); color: #fff; padding: 4px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
}

/* ⓘ Information tooltip toggle + popup (mirrors prod's addTooltip). */
.dcfg-info-tip { position: relative; margin: -6px 0 10px; }
.dcfg-info-tip button {
    background: none; border: none; color: var(--dcfg-orange); cursor: pointer;
    padding: 4px 0; font-size: 12px; text-decoration: underline;
    display: inline-flex; align-items: center; gap: 4px;
}
.dcfg-info-tip-content {
    display: none; position: absolute; top: 100%; left: 0; z-index: 1000; margin-top: 6px;
    padding: 12px; background: #fff; border: 1px solid #ddd; border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); max-width: 300px; font-size: 12px;
    color: var(--dcfg-text); line-height: 1.5; font-weight: 400; text-transform: none;
}

/* Field notes render as notices (prod's yellow box), not plain text. */
.dcfg-notice {
    margin: 0 0 10px; padding: 10px 12px; background: #fff3cd; border: 1px solid #ffc107;
    border-radius: 6px; font-size: 13px; color: #664d03; line-height: 1.5;
}
.dcfg-subtle-note { font-size: 13px; color: #666; margin: -6px 0 12px; line-height: 1.5; }

/* "View Illustration" accordion (mirrors prod's createIllustrationAccordion). */
.dcfg-illustration-accordion { margin-bottom: 15px; }
.dcfg-illustration-toggle {
    width: 100%; padding: 10px 15px; background: #f0f7ff; border: 1px solid #cce5ff;
    border-radius: 6px; cursor: pointer; display: flex; align-items: center;
    justify-content: space-between; font-size: 14px; color: var(--dcfg-orange);
    font-weight: 600; transition: all 0.3s;
}
.dcfg-illustration-toggle svg { transition: transform 0.3s; }
.dcfg-illustration-content {
    display: none; margin-top: 10px; padding: 15px; background: #fff;
    border: 1px solid #cce5ff; border-radius: 6px; overflow: hidden;
}
.dcfg-illustration-content img { width: 100%; height: auto; display: block; }
.dcfg-illustration-content img + img { margin-top: 15px; }

/* Track capacity notice for H3100/H4100 (prod's validateTrackWidth styling). */
.dcfg-track-validation { margin-top: 8px; padding: 8px 12px; border-radius: 4px; font-size: 13px; }
.dcfg-track-validation.is-ok { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
.dcfg-track-validation.is-ok .dcfg-track-check { color: #28a745; margin-right: 6px; }
.dcfg-track-validation.is-short { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
.dcfg-track-short-title { font-weight: 700; color: #dc3545; margin-bottom: 8px; }
.dcfg-track-short-body { font-size: 12px; line-height: 1.4; margin-bottom: 8px; }
.dcfg-track-short-body:last-child { margin-bottom: 0; }

/* Finish Selection: one labelled block per category, 3 across (client review
   2026-09-03). Pattern categories flow tighter, like prod. */
.dcfg-swatch-grid { display: grid; gap: 14px; }
.dcfg-finish-group { margin-bottom: 25px; }
.dcfg-finish-group-title { display: block; color: var(--dcfg-text); font-weight: 600; margin-bottom: 10px; }
.dcfg-finish-grid { grid-template-columns: repeat(3, 1fr); }
.dcfg-finish-grid--pattern { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.dcfg-swatch { border: 2px solid var(--dcfg-border); border-radius: 6px; padding: 6px; background: #fff; cursor: pointer; text-align: center; transition: border-color 0.15s; }
.dcfg-swatch img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; }
.dcfg-swatch span { display: block; font-size: 12px; margin-top: 5px; color: var(--dcfg-text); }
.dcfg-swatch.is-selected { border-color: var(--dcfg-orange); }

.dcfg-swatch-grid--round { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
.dcfg-color-swatch { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--dcfg-border); cursor: pointer; background-size: cover; background-position: center; transition: transform 0.15s, border-color 0.15s; }
/* White/Black/Gray are colour swatches sitting in the SAME grid as the image
   swatches, so they fill their cell at the same 1:1 ratio and the rows align.
   The `--round` picker (panel connector colours) keeps its small fixed circles. */
.dcfg-swatch-grid:not(.dcfg-swatch-grid--round) .dcfg-color-swatch {
    width: 100%; height: auto; aspect-ratio: 1 / 1;
}
.dcfg-color-swatch:hover { transform: scale(1.08); border-color: var(--dcfg-orange); }
.dcfg-color-swatch.is-selected { border-color: var(--dcfg-orange); box-shadow: 0 0 0 2px var(--dcfg-orange) inset; }

/* Stack Configuration: 3 across so the cards read as a set rather than
   dominating the column at 2-up. */
.dcfg-stack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dcfg-stack-option { border: 2px solid var(--dcfg-border); border-radius: 6px; padding: 15px; background: #fff; cursor: pointer; text-align: left; transition: border-color 0.15s, transform 0.15s; }
.dcfg-stack-option:hover { border-color: var(--dcfg-orange); transform: translateY(-2px); }
.dcfg-stack-option img { width: 100%; height: auto; margin-bottom: 10px; border-radius: 4px; }
.dcfg-stack-option strong { display: block; color: var(--dcfg-text); }
.dcfg-stack-option span { font-size: 12px; color: #666; }
.dcfg-stack-option .dcfg-stack-price { display: block; font-size: 12px; font-weight: 600; margin-top: 4px; }
.dcfg-stack-option .dcfg-stack-price.is-included { color: #2e7d32; }
.dcfg-stack-option .dcfg-stack-price.is-priced { color: #c0392b; }
.dcfg-stack-option.is-selected { border-color: var(--dcfg-orange); }

/* Prod's pricing card is a grey gradient, not flat white. */
.dcfg-configurator__pricing { border: 1px solid var(--dcfg-border); border-radius: 12px; padding: 20px; align-self: start; position: sticky; top: 16px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); }
.dcfg-price-row { display: flex; justify-content: space-between; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,.06); }
.dcfg-price-total { border-top: 1px solid var(--dcfg-border); padding-top: 10px; font-size: 16px; font-weight: 700; }
.dcfg-price-note { font-size: 11px; color: #888; }
.dcfg-buy-now { width: 100%; padding: 12px; background: var(--dcfg-orange); color: #fff; border: none; border-radius: 6px; font-weight: 600; font-size: 14px; cursor: pointer; }
.dcfg-buy-now:hover:not(:disabled) { opacity: 0.9; }
.dcfg-buy-now:disabled { background: #ccc; cursor: not-allowed; }

@media (max-width: 780px) {
    .dcfg-configurator { grid-template-columns: 1fr; }
    .dcfg-swatch-grid { grid-template-columns: repeat(2, 1fr); }
    .dcfg-stack-grid { grid-template-columns: 1fr; }
    .dcfg-configurator__pricing { position: static; }
    .dcfg-dims-group { grid-template-columns: 1fr; }
    /* Room for the fixed mobile pricing bar so it never overlaps the last field. */
    body { padding-bottom: 76px; }
    /* Floating cart toggle (from a different plugin) sits at the very bottom
       by default and gets covered by / overlaps the sticky pricing bar above
       it -- bump it up clear of the bar (Ed, 2026-09-05). */
    button.acd-toggle { bottom: 75px; }
}

/* Mobile sticky pricing footer (2026-09-05) -- prod parity, rebuilt from
   screenshots (see class-shortcode.php's markup comment for why). Hidden
   entirely above the breakpoint where the desktop sidebar card is visible. */
.dcfg-mobile-pricing-bar {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9998; /* below #dcfg-modal-root (100000), above normal content */
    background: #fff;
    border-top: 1px solid var(--dcfg-border);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
}
@media (max-width: 780px) {
    .dcfg-mobile-pricing-bar { display: block; }
}
.dcfg-mobile-pricing-collapsed {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; gap: 12px;
}
.dcfg-mobile-pricing-total { display: flex; flex-direction: column; line-height: 1.3; }
.dcfg-mobile-pricing-label { font-size: 11px; color: #888; }
.dcfg-mobile-pricing-total strong { font-size: 20px; font-weight: 700; color: #2e7d32; }
.dcfg-mobile-pricing-collapsed-actions { display: flex; align-items: center; gap: 10px; }
.dcfg-mobile-pricing-toggle {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: var(--dcfg-orange); color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s ease;
}
.dcfg-mobile-pricing-bar.is-expanded .dcfg-mobile-pricing-toggle { transform: rotate(180deg); }
.dcfg-mobile-pricing-expanded {
    padding: 0 16px 14px; border-top: 1px solid rgba(0,0,0,.06);
}
.dcfg-mobile-pricing-expanded .dcfg-price-row { margin: 10px 0 0; padding-bottom: 8px; }
.dcfg-mobile-pricing-expanded-actions {
    display: flex; gap: 8px; margin-top: 10px;
}
.dcfg-mobile-btn {
    flex: 1 1 0; min-width: 0; padding: 12px 6px; border: none; border-radius: 8px;
    color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dcfg-mobile-btn:hover:not(:disabled) { opacity: 0.9; }
.dcfg-mobile-btn:disabled { background: #ccc; cursor: not-allowed; }
.dcfg-mobile-btn--cart { background: #17a2b8; }
.dcfg-mobile-btn--proposal { background: var(--dcfg-orange); }
.dcfg-mobile-btn--buy { background: #28a745; }
.dcfg-mobile-pricing-collapsed-actions .dcfg-mobile-btn--buy { flex: 0 0 auto; padding: 10px 20px; }
/* Expanded state's action row already has its own Buy Now -- don't show it twice. */
.dcfg-mobile-pricing-bar.is-expanded .dcfg-mobile-pricing-collapsed-actions #dcfg-mobile-buy-now { display: none; }


/* --- Multi-door cart in the pricing sidebar ------------------------------
   Mirrors prod's saved-doors list: one row per saved door with its price and
   Copy / Edit / Remove, then a combined total above the checkout button. */
/* Action row: Add to Cart and Buy Now share one grid. Collapsing a column to
   0fr (rather than display:none) is what makes the switch between full-width and
   2-up animate smoothly instead of snapping. */
.dcfg-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 15px;
    transition: grid-template-columns .32s cubic-bezier(.4, 0, .2, 1);
}
.dcfg-actions.is-add-only { grid-template-columns: 1fr 0fr; }
.dcfg-actions.is-buy-only { grid-template-columns: 0fr 1fr; }
.dcfg-actions.is-none     { grid-template-columns: 0fr 0fr; }

.dcfg-actions > button {
    min-width: 0;               /* let the 0fr column actually collapse */
    overflow: hidden;
    white-space: nowrap;
    margin-top: 0;
    opacity: 1;
    transition: opacity .22s ease, background .15s, color .15s;
}
/* Collapsed buttons must not be clickable or focusable while hidden. */
.dcfg-actions.is-buy-only > .dcfg-add-another,
.dcfg-actions.is-none     > .dcfg-add-another,
.dcfg-actions.is-add-only > .dcfg-buy-now,
.dcfg-actions.is-none     > .dcfg-buy-now {
    opacity: 0; pointer-events: none; padding-left: 0; padding-right: 0; border-width: 0;
}

.dcfg-add-another {
    width: 100%; padding: 10px; cursor: pointer;
    background: #fff; color: var(--dcfg-orange);
    border: 2px solid var(--dcfg-orange); border-radius: 6px;
    font-weight: 600; font-size: 14px;
}
.dcfg-add-another:hover { background: var(--dcfg-orange); color: #fff; }

/* Sits directly UNDER the checkout button (Ed, 2026-08-28) so it is the last
   thing read before clicking Buy Now, not something scrolled past earlier. */
.dcfg-unadded-hint { margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: #e05a00; font-weight: 600; text-align: center; }
.dcfg-saved-doors { margin-top: 16px; border-top: 1px solid var(--dcfg-border); padding-top: 12px; }
.dcfg-saved-doors h5 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #2c3e50; text-transform: uppercase; letter-spacing: .03em; }

.dcfg-door {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
    background: #fff; border: 1px solid var(--dcfg-border);
    border-left: 3px solid var(--dcfg-orange);
    border-radius: 6px; padding: 10px; margin-bottom: 8px;
}
.dcfg-door.is-editing { border-color: #17a2b8; border-left-color: #17a2b8; background: #f0f9ff; }
.dcfg-door-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dcfg-door-info strong { font-size: 13px; color: #2c3e50; }
.dcfg-door-info span { font-size: 12px; color: #555; }
.dcfg-door-info .dcfg-door-price { font-weight: 700; color: #2e7d32; margin-top: 2px; }
.dcfg-door-actions { display: flex; gap: 4px; flex-shrink: 0; }
.dcfg-door-actions button {
    background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px;
    padding: 4px 8px; font-size: 11px; cursor: pointer; color: #495057;
}
.dcfg-door-actions button:hover { background: #e9ecef; }
.dcfg-door-actions .dcfg-door-del { color: #c0392b; }

.dcfg-saved-total-row {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid var(--dcfg-border); padding-top: 10px; margin-top: 4px;
    font-size: 16px; font-weight: 700; color: #2c3e50;
}

@media (prefers-reduced-motion: reduce) {
    .dcfg-actions, .dcfg-actions > button { transition: none; }
}

/* Proposal: a quieter, tertiary action -- it must not compete with checkout. */
.dcfg-get-proposal {
    width: 100%; margin-top: 14px; padding: 10px; cursor: pointer;
    background: transparent; color: #2c3e50;
    border: 1px solid var(--dcfg-border); border-radius: 6px;
    font-weight: 600; font-size: 13px; transition: border-color .15s, color .15s;
}
.dcfg-get-proposal:hover { border-color: var(--dcfg-orange); color: var(--dcfg-orange); }
.dcfg-proposal-note { margin: 6px 0 0; font-size: 11px; color: #888; text-align: center; }

/* Checkout: contact modal + legal review overlay. */
#dcfg-modal-root { position: fixed; inset: 0; z-index: 100000; }
.dcfg-overlay-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.dcfg-overlay-panel { position: relative; max-width: 640px; margin: 40px auto; background: #fff; border-radius: 12px; padding: 32px; max-height: 85vh; overflow-y: auto; font-size: 14px; }
.dcfg-overlay-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 28px; cursor: pointer; line-height: 1; color: #999; }
.dcfg-overlay-panel h2 { margin-top: 0; color: var(--dcfg-orange); }

.dcfg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.dcfg-form-grid label, .dcfg-full-width { display: block; font-weight: 600; font-size: 14px; margin-bottom: 16px; color: var(--dcfg-text); }
.dcfg-form-grid input, .dcfg-form-grid select, .dcfg-full-width input, .dcfg-full-width textarea { display: block; width: 100%; margin-top: 4px; padding: 10px; border: 2px solid var(--dcfg-border); border-radius: 6px; font-weight: 400; }
.dcfg-checkbox-row { margin-bottom: 16px; font-size: 14px; }
.dcfg-checkbox-row label { font-weight: 400; }
.dcfg-form-error { background: #fdecea; color: #b71c1c; border: 1px solid #f5c6cb; border-radius: 6px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }

.dcfg-review-rows { border: 1px solid var(--dcfg-border); border-radius: 6px; margin-bottom: 20px; }
/* Header for each door when reviewing a multi-door cart. */
.dcfg-review-door-head { display: flex; justify-content: space-between; align-items: baseline;
    font-weight: 700; color: #2c3e50; font-size: 15px; margin: 18px 0 6px; }
.dcfg-review-door-head span { color: #2e7d32; }
.dcfg-review-row { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.dcfg-review-row:last-child { border-bottom: none; }
.dcfg-review-pricing { background: var(--dcfg-bg-b); }
.dcfg-review-total { font-size: 18px; font-weight: 700; }
.dcfg-notices { background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px; padding: 16px; margin-bottom: 16px; }
.dcfg-notices h4 { margin-top: 0; color: #856404; }
.dcfg-notices p { font-size: 13px; margin: 6px 0; }
.dcfg-agreement-checkbox { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }

@media (max-width: 600px) {
    .dcfg-form-grid { grid-template-columns: 1fr; }
    .dcfg-overlay-panel { margin: 16px; padding: 20px; }
}

/* Admin Quick-Proposal mode banner (?admin=patrick) -- see initAdminMode() in
   configurator.js. Deliberately loud: it must be obvious that the proposal is
   being generated against AccordionDoor's own contact details, not a customer's. */
.dcfg-admin-badge {
    background: #2c3e50;
    color: #fff;
    padding: 8px 16px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 4px;
    margin-bottom: 12px;
}