/**
 * Make My Door — Product-specific Styles
 *
 * Shared layout, buttons, inputs, pricing, and preview styles are
 * provided by Core Make My (core-configurator.css).
 * This file contains only door-specific UI components.
 */

/* =========================================
   Door-specific Field Overrides
   ========================================= */

.door-field {
    margin-bottom: 12px;
}

.door-field:last-child {
    margin-bottom: 0;
}

/* Door width/height inputs locked (readonly) while a face frame is enabled —
   the leaf size is derived from the cabinet fields, so the inputs are a
   read-only readout of the derived value. */
.door-input--locked {
    background: var(--rule);
    color: var(--ink-muted);
    cursor: not-allowed;
}

/* `.door-field input[type="number"]` / `select` share Core's `.core-input` box
   model and focus ring — they are comma-joined onto those rules in
   core-configurator.css rather than re-declared here (efficiency #223). */

.door-field-hint {
    display: block;
    margin-top: 4px;
    font-size: var(--fs-12);
    color: var(--ink-soft);
}

/* =========================================
   Config Mode (Custom / Pre-defined)
   ========================================= */

/* The block leads the Dimensions step, so it needs a rule under it to separate
   the "how do I specify size" choice from the size fields it governs — without
   one it reads as just another field in the list. */
.door-config-mode-wrapper {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rule);
}

/* The cascading selects only appear in pre-defined mode; inset them so they
   read as consequences of the segmented control above rather than siblings. */
.door-predefined-options {
    margin-top: 12px;
    padding-left: 12px;
    border-left: 2px solid var(--rule);
}

.door-predef-note {
    margin: 8px 0 0;
    font-size: var(--fs-12);
    color: var(--ink-soft);
}

/* =========================================
   Validation Messages
   ========================================= */

/* =========================================
   2D Drawing Container
   min-height / position / overflow come from .core-2d-container
   (Core, core-configurator.css), and so does the surface colour — do NOT
   override `background` here, or the punched-hole fills below (which track
   --core-preview-bg) stop matching the surface the moment it is retinted.
   No border, matching Core's preview containers — the drawing sits on the
   same surface as the panel around it, so a frame drew a box round nothing.
   No bottom margin either: it dated from the accordion layout, where controls
   sat under the drawing. In the stepper this container is the LAST child of
   .core-preview-container, which already carries 20px of padding, so the
   margin only widened the gap below the drawing in 2D mode.
   Keep Door-specific bits: hidden by default (toggled by .door-preview--2d
   below) and the grab/grabbing pan cursors.
   ========================================= */

.door-2d-container {
    display: none;
}

.door-2d-container svg {
    display: block;
    width: 100%;
    height: 500px;
    cursor: grab;
}

.door-2d-container svg:active {
    cursor: grabbing;
}

/* Chrome comes from `.core-btn .core-btn--overlay` in core-controls.css
   (efficiency #229) — this was a second copy of Core's model-state button
   body, down to the 92%-Paper fill, the 6px/12px padding and the
   `--rule-interactive` border. Only the corner it pins to is Door's.

   The hover no longer inverts to a solid Coal fill: the shared variant
   reserves that treatment for the pressed state, and a hover identical to
   "on" was why a Reset Zoom under the cursor read as engaged. */
.door-2d-reset-zoom {
    bottom: var(--sp-3);
    right: var(--sp-3);
}

.door-preview--2d .door-3d-container {
    display: none;
}

.door-preview--2d .door-2d-container {
    display: block;
}

/* Dimension lines, labels and arrowheads are Core's one annotation style
   (core-dimension-annotation.js + the .core-dim-* rules in
   core-configurator.css, Design.md §11.7). */

.door-2d-drawing .door-outline {
    stroke: var(--ink);
    stroke-width: 1;
    fill: none;
}

.door-2d-drawing .feature-line {
    stroke: var(--ink);
    stroke-width: 0.5;
    fill: none;
}

.door-2d-drawing .hole-circle {
    stroke: var(--ink);
    stroke-width: 0.5;
    /* Match the (now white) preview surface so holes read as a punched-through
       outline rather than a filled grey disc — tracks --core-preview-bg. */
    fill: var(--core-preview-bg);
}

.door-2d-drawing .pilot-hole {
    stroke: var(--ink);
    stroke-width: 0.5;
    fill: var(--rule-strong);
}

.door-2d-drawing .view-title {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: var(--fw-semibold);
    fill: var(--ink);
    text-anchor: middle;
}

/* =========================================
   Custom Panel Height Inputs (Shaker)
   ========================================= */

.door-custom-panel-heights .door-field {
    margin-bottom: 8px;
}

.door-custom-panel-heights .door-auto-panel-height {
    background: var(--paper-sunk);
    color: var(--ink-soft);
}

/* =========================================
   Door-specific 3D container overrides
   ========================================= */

.door-3d-container {
    margin-bottom: 20px;
}

/* =========================================
   Stepped step-count picker
   ========================================= */

/* Narrows the shared .core-segmented picker to fit the small "2 / 3 / 4 / 5"
 * labels (Stepped-only markup, class-stepped-door-admin.php). The hook sits on
 * the field wrapper — the renderer's `wrapper_class` — so the pill is its
 * descendant. The option rule is the same specificity as Core's
 * `.core-segmented .core-segmented__option` and wins only by printing second —
 * this sheet's `door-styles` handle declares `core-configurator` as a dep,
 * which enforces that order. */
.door-stepped-stepcount .core-segmented {
    max-width: 240px;
}

.door-stepped-stepcount .core-segmented__option {
    flex: 1 1 auto;
    text-align: center;
}