/* ============================================================
   Design Your Closet — Multi-Step Request Form
   ============================================================ */

/* ── Wizard Container ──────────────────────────────────────── */
.dyc-wizard {
    --dyc-card-border: var(--cc-border-color, #dee2e6);
    --dyc-card-border-selected: var(--cc-primary, #d35338);
    --dyc-card-bg: #fff;
    --dyc-card-bg-selected: #fff9f9;
    --dyc-card-radius: 0.5rem;
    --dyc-transition: 0.15s ease;
}

/* ── Progress Bar (6-segment) ───────────────────────────────── */
.dyc-progress-segment {
    height: 5px;
    flex: 1 1 0;
    border-radius: 999px;
    background-color: var(--cc-gray-200, #e9ecef);
    transition: background-color var(--dyc-transition);
}

.dyc-progress-segment-complete,
.dyc-progress-segment-current {
    background-color: var(--cc-primary, #d35338);
}

/* ── Steps ──────────────────────────────────────────────────── */
.dyc-step {
    display: none;
}

.dyc-step.active {
    display: block;
}

/* ── Choice Card (homeowner / professional) ────────────────── */
.dyc-card {
    padding: 1.25rem 1rem;
    border: 2px solid var(--dyc-card-border);
    border-radius: var(--dyc-card-radius);
    background: var(--dyc-card-bg);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        border-color var(--dyc-transition),
        background-color var(--dyc-transition),
        box-shadow var(--dyc-transition);
}

.dyc-card:hover,
.dyc-card:focus-visible {
    border-color: var(--cc-primary, #d35338);
    box-shadow: 0 0 0 3px rgba(211, 83, 56, 0.15);
    outline: none;
}

.dyc-card.dyc-card-selected {
    border-color: var(--dyc-card-border-selected);
    box-shadow: 0 0 0 3px rgba(211, 83, 56, 0.2);
}

.dyc-card-check {
    display: none !important;
    top: 0.625rem;
    right: 0.625rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--dyc-card-border-selected);
    font-size: 0.6875rem;
}

.dyc-card.dyc-card-selected .dyc-card-check {
    display: flex !important;
}

.dyc-storage-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 36px;
    margin: 0 auto 0.625rem;
}

.dyc-storage-icon img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.dyc-storage-card-horizontal {
    gap: 1.25rem;
}

.dyc-storage-card-horizontal .dyc-storage-icon {
    width: 88px;
    height: 88px;
    margin: 0;
}

/* Capped multi-select ("choose up to N") */
.dyc-card.dyc-card-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.dyc-select-group-counter {
    font-size: 0.8125rem;
    color: var(--cc-body-secondary-color, #6c757d);
}

/* Wide card with image wrap + description (Mounting) */
.dyc-card.dyc-card-wide {
    padding-bottom: 0.875rem;
}

.dyc-card-img-wrap {
    height: 110px;
    border-radius: calc(var(--dyc-card-radius) - 2px);
    background-color: var(--cc-gray-200, #e0e0e0);
}

.dyc-card-wide .dyc-card-img-wrap {
    height: 120px;
}

.dyc-card-desc {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--cc-body-secondary-color, #6c757d);
}

/* Finish material swatch */
.dyc-finish-swatch {
    border-radius: calc(var(--dyc-card-radius) - 2px);
    height: 110px;
}

/* Finish cards specifically — tighter side padding so "Harmony White" fits on one line. */
.dyc-card.dyc-card-finish {
    padding: 1rem 0.75rem;
}

/* Step 1 space-type photo (source images are 220x150 / 400x300 for high-density screens) */
.dyc-card-icon {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 220 / 150;
    margin-inline: auto;
    border-radius: calc(var(--dyc-card-radius) - 2px);
    overflow: hidden;
    background-color: var(--cc-gray-100, #f8f8f6);
}

.dyc-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ── Wall Diagram ───────────────────────────────────────────── */
.dyc-diagram {
    max-width: 23rem;
}

.dyc-diagram img {
    width: 100%;
    height: auto;
}

.dyc-diagram-placeholder {
    border: 2px dashed var(--dyc-card-border);
    border-radius: var(--dyc-card-radius);
    background: var(--cc-gray-100, #f8f8f6);
    min-height: 8rem;
    padding: 2rem 1rem;
}

/* U-Shaped diagram overlay: measurement fields positioned on top of the diagram image */
.dyc-diagram-field {
    position: absolute;
    width: 6rem;
    padding: 0.25rem 0.375rem;
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--dyc-card-border);
    border-radius: calc(var(--dyc-card-radius) - 2px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Wider variant for fields with a longer label (e.g. "Available Wall Width") that would
   otherwise wrap onto multiple lines inside the default 6rem box. */
.dyc-diagram-field-wide {
    width: 7.5rem;
}

/* Extra-wide variant for Reach-In's "Wall / Closet Width" label specifically. */
.dyc-diagram-field-extra-wide {
    width: 8rem;
}

.dyc-diagram-field .form-label {
    font-size: 0.6875rem;
    margin-bottom: 0.125rem;
}

.dyc-diagram-field .form-control {
    padding: 0.25rem 0.375rem;
    font-size: 0.8125rem;
}

.dyc-diagram-field .input-group-text {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    font-size: 0.75rem;
}

.dyc-diagram-field input[type="number"] {
    -moz-appearance: textfield;
    min-width: 0;
}

.dyc-diagram-field input[type="number"]::-webkit-outer-spin-button,
.dyc-diagram-field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Optional measurement fields (see design-your-closet-form.js — data-required-when-shown never sets
   the native `required` attribute) are technically ":valid" the moment .was-validated is applied,
   just by being empty with no constraints to violate. Bootstrap can't tell "optional, untouched"
   apart from "correctly filled in," so by default it paints both with the same green checkmark.
   Suppress that green state for optional fields; :invalid is left alone so a genuinely malformed
   value (e.g. a negative number) can still be flagged in red. */
.dyc-wizard .was-validated .form-control:optional:valid,
.dyc-wizard .was-validated textarea.form-control:optional:valid {
    background-image: none;
    border-color: #ced4da;
    padding-right: 0.75rem;
}

.dyc-wizard .was-validated .form-control:optional:valid:focus {
    border-color: var(--cc-primary, #d35338);
    box-shadow: 0 0 0 3px rgba(211, 83, 56, 0.15);
}

.dyc-wizard .was-validated .dyc-diagram-field .form-control:optional:valid {
    padding-right: 0.375rem;
}

.dyc-diagram-field-left {
    left: 15px;
    top: 30%;
    transform: translateY(-50%);
}

.dyc-diagram-field-top {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.dyc-diagram-field-right {
    right: 15px;
    top: 30%;
    transform: translateY(-50%);
}

/* Laundry Side-by-Side's wall-distance diagram specifically — percentage-based so the two
   fields stay clear of the appliance in the middle on narrow (mobile) widths too. */
.dyc-diagram-field-distance-left {
    left: 9%;
    top: 30%;
    transform: translateY(-50%);
}

.dyc-diagram-field-distance-right {
    right: 9%;
    top: 30%;
    transform: translateY(-50%);
}

/* U-Shaped Walk-In's Wall A / Wall E — the two short walls at the mouth of the U. */
.dyc-diagram-field-left-bottom {
    left: 85px;
    bottom: 12%;
}

.dyc-diagram-field-right-bottom {
    right: 85px;
    bottom: 12%;
}

.dyc-diagram-field-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Laundry Closet's front-elevation diagram — exact placements tuned against that specific SVG. */
.dyc-diagram-field-lc-wall-width {
    top: 2%;
    left: 50%;
    min-width: 8rem;
    transform: translateX(-50%);
}

.dyc-diagram-field-lc-ceiling {
    top: 30%;
    left: 17%;
}

/* Walk-In / Reach-In diagram highlight layers (wall shading + dimension arrows), inlined so we can
   target them by id. Shared across all the diagram-overlay branches — each one's own
   .dyc-diagram-overlay-wrap only ever contains the ids it actually defines. Hidden by default;
   .dyc-active-a/b/c/length/distance/depth/ceiling (set in JS on field focus) reveals the matching
   wall + arrow. */
.dyc-diagram-overlay-wrap #wall-a,
.dyc-diagram-overlay-wrap #wall-b,
.dyc-diagram-overlay-wrap #wall-c,
.dyc-diagram-overlay-wrap #wall-length,
.dyc-diagram-overlay-wrap #wall--left-bottom,
.dyc-diagram-overlay-wrap #wall--left,
.dyc-diagram-overlay-wrap #wall--top,
.dyc-diagram-overlay-wrap #wall--right,
.dyc-diagram-overlay-wrap #wall--right-bottom,
.dyc-diagram-overlay-wrap #arrow-a,
.dyc-diagram-overlay-wrap #arrow-b,
.dyc-diagram-overlay-wrap #arrow-c,
.dyc-diagram-overlay-wrap #arrow-wall-length,
.dyc-diagram-overlay-wrap #arrow--left-bottom,
.dyc-diagram-overlay-wrap #arrow--left,
.dyc-diagram-overlay-wrap #arrow--top,
.dyc-diagram-overlay-wrap #arrow-right,
.dyc-diagram-overlay-wrap #arrow--right,
.dyc-diagram-overlay-wrap #arrow--left1,
.dyc-diagram-overlay-wrap #arrow--right-bottom,
.dyc-diagram-overlay-wrap #distancebetween-walls,
.dyc-diagram-overlay-wrap #arrow--distance-between-walls,
.dyc-diagram-overlay-wrap #line-distancebetween,
.dyc-diagram-overlay-wrap #line-distancebetween1,
.dyc-diagram-overlay-wrap #arrow-ceiling,
.dyc-diagram-overlay-wrap #line-ceiling,
.dyc-diagram-overlay-wrap #line-ceiling1,
.dyc-diagram-overlay-wrap #arrow--wall-width,
.dyc-diagram-overlay-wrap #arrow--appliance-width,
.dyc-diagram-overlay-wrap #arrow--appliance-height,
.dyc-diagram-overlay-wrap #arrow--appliance-depth {
    display: none;
}

.dyc-diagram-overlay-wrap.dyc-active-a #wall-a,
.dyc-diagram-overlay-wrap.dyc-active-a #arrow-a {
    display: inline;
}

.dyc-diagram-overlay-wrap.dyc-active-b #wall-b,
.dyc-diagram-overlay-wrap.dyc-active-b #arrow-b {
    display: inline;
}

.dyc-diagram-overlay-wrap.dyc-active-c #wall-c,
.dyc-diagram-overlay-wrap.dyc-active-c #arrow-c {
    display: inline;
}

/* Position-named wall/arrow ids — the shared vocabulary the client is repainting all diagrams
   with, so these classes are reused across every diagram that adopts it (not just U-Shaped). */
.dyc-diagram-overlay-wrap.dyc-active-left-bottom #wall--left-bottom,
.dyc-diagram-overlay-wrap.dyc-active-left-bottom #arrow--left-bottom {
    display: inline;
}

.dyc-diagram-overlay-wrap.dyc-active-left #wall--left,
.dyc-diagram-overlay-wrap.dyc-active-left #arrow--left {
    display: inline;
}

.dyc-diagram-overlay-wrap.dyc-active-top #wall--top,
.dyc-diagram-overlay-wrap.dyc-active-top #arrow--top {
    display: inline;
}

.dyc-diagram-overlay-wrap.dyc-active-right #wall--right,
.dyc-diagram-overlay-wrap.dyc-active-right #arrow-right,
.dyc-diagram-overlay-wrap.dyc-active-right #arrow--right,
.dyc-diagram-overlay-wrap.dyc-active-right #arrow--left1 {
    display: inline;
}

.dyc-diagram-overlay-wrap.dyc-active-right-bottom #wall--right-bottom,
.dyc-diagram-overlay-wrap.dyc-active-right-bottom #arrow--right-bottom {
    display: inline;
}

.dyc-diagram-overlay-wrap.dyc-active-length #wall-length,
.dyc-diagram-overlay-wrap.dyc-active-length #arrow-wall-length {
    display: inline;
}

/* Opposing Walls' Wall C: the arrow across the back plus the back-wall shading. */
.dyc-diagram-overlay-wrap.dyc-active-distance #wall--top,
.dyc-diagram-overlay-wrap.dyc-active-distance #distancebetween-walls,
.dyc-diagram-overlay-wrap.dyc-active-distance #arrow--distance-between-walls,
.dyc-diagram-overlay-wrap.dyc-active-distance #line-distancebetween,
.dyc-diagram-overlay-wrap.dyc-active-distance #line-distancebetween1 {
    display: inline;
}

.dyc-diagram-overlay-wrap.dyc-active-ceiling #arrow-ceiling,
.dyc-diagram-overlay-wrap.dyc-active-ceiling #line-ceiling,
.dyc-diagram-overlay-wrap.dyc-active-ceiling #line-ceiling1 {
    display: inline;
}

/* Laundry Closet's single front-elevation diagram — one dedicated arrow per field, all on the
   same view (no wall-by-wall focus switching needed since it's a single small closet nook). */
.dyc-diagram-overlay-wrap.dyc-active-wall-width #arrow--wall-width {
    display: inline;
}

.dyc-diagram-overlay-wrap.dyc-active-appliance-width #arrow--appliance-width {
    display: inline;
}

.dyc-diagram-overlay-wrap.dyc-active-appliance-height #arrow--appliance-height {
    display: inline;
}

.dyc-diagram-overlay-wrap.dyc-active-appliance-depth #arrow--appliance-depth {
    display: inline;
}

/* Wall letter badges drawn inside each diagram SVG (viewBox units, so they scale with the drawing).
   A / E sit on the front walls; B / C / D on the wall cut along the top outline. Desktop labels the
   walls through the overlaid fields, so these only show on phones — see the responsive block below. */
.dyc-diagram-letters {
    display: none;
}

.dyc-diagram-letters circle {
    fill: var(--cc-primary, #d35338);
}

.dyc-diagram-letters text {
    fill: #fff;
    font-size: 40px;
    font-weight: 600;
    text-anchor: middle;
}

/* "How to Measure Your Space" trigger — opens #dyc-measure-guide-modal (see _DesignYourClosetMeasureGuide) */
.dyc-measure-guide-trigger {
    border: 1px solid var(--dyc-card-border);
    border-radius: var(--dyc-card-radius);
    background: var(--dyc-card-bg);
    color: inherit;
    transition: border-color var(--dyc-transition), box-shadow var(--dyc-transition);
}

.dyc-measure-guide-trigger .ci-info-circle {
    color: var(--cc-primary, #d35338);
}

.dyc-measure-guide-trigger:hover,
.dyc-measure-guide-trigger:focus-visible {
    border-color: var(--cc-primary, #d35338);
    box-shadow: 0 0 0 3px rgba(211, 83, 56, 0.15);
    outline: none;
}

/* Door-type card illustration — uses the Step 1 .dyc-card-icon frame (220x150); this only sizes the
   placeholder outline. See _DesignYourClosetDoorTypeIllustration. */
.dyc-door-type-illustration {
    color: var(--cc-gray-500, #adb5bd);
}

.dyc-door-type-illustration svg {
    width: auto;
    height: 60%;
}

/* ── Wizard Footer ──────────────────────────────────────────── */
.dyc-wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dyc-wizard-footer .dyc-next-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── File Dropzone ──────────────────────────────────────────── */
.dyc-dropzone {
    border: 2px dashed var(--dyc-card-border);
    border-radius: var(--dyc-card-radius);
    background: var(--cc-gray-100, #f8f8f6);
    transition: border-color var(--dyc-transition), background-color var(--dyc-transition);
    padding: 2rem 1rem;
}

.dyc-dropzone.dyc-dropzone-active {
    border-color: var(--cc-primary, #d35338);
    background-color: var(--dyc-card-bg-selected);
}

.dyc-measurement-sketch-dropzone {
    display: flex;
    align-items: stretch;
    padding: 1.25rem;
}

.dyc-measurement-sketch-preview {
    flex: 0 0 45%;
    padding: 0 2rem 0 1rem;
    border-right: 1px solid var(--dyc-card-border);
}

.dyc-measurement-sketch-preview img {
    width: 100%;
    max-width: 17rem;
    height: auto;
}

.dyc-measurement-sketch-upload {
    align-self: center;
    padding: 1rem;
}

@media (max-width: 767.98px) {
    .dyc-measurement-sketch-dropzone {
        flex-direction: column;
    }

    .dyc-measurement-sketch-preview {
        padding: 0 0 1.25rem;
        border-right: 0;
        border-bottom: 1px solid var(--dyc-card-border);
    }

    .dyc-measurement-sketch-upload {
        padding: 1.25rem 0 0;
    }
}

/* ── Success State ──────────────────────────────────────────── */
.dyc-success-icon {
    width: 4rem;
    height: 4rem;
    background-color: var(--dyc-card-bg-selected);
    color: var(--cc-primary, #d35338);
    font-size: 2rem;
}

.dyc-step-number {
    width: 1.75rem;
    height: 1.75rem;
    background-color: var(--dyc-card-bg-selected);
    color: var(--cc-primary, #d35338);
    font-size: 0.875rem;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .dyc-card {
        padding: 1rem 0.75rem;
    }

    /* Diagram measurement fields: on a phone the drawing is too small for fields overlaid on top
       of it — they pile up on each other and hide the diagram. Take them out of the overlay and
       lay them out as a static 2-column grid under the drawing instead. The fields are direct
       children of the wrap, so this needs no markup change, and the focus -> .dyc-active-* wall
       highlight (see JS) works the same in either layout. Field order = DOM order (A, B, C … Ceiling). */
    .dyc-diagram-overlay-wrap {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .dyc-diagram-overlay-wrap > svg {
        grid-column: 1 / -1;
    }

    /* The fields (and their "Wall A" labels) now sit under the drawing — mark the walls on it instead. */
    .dyc-diagram-letters {
        display: inline;
    }

    /* B / C / D sit on the wall cut along the drawing's top edge, so the C badge pokes above the
       SVG box — let it draw outside and leave room for it above the diagram. */
    .dyc-diagram-overlay-wrap > svg {
        overflow: visible;
    }

    .dyc-diagram-overlay-wrap:has(.dyc-diagram-letters) {
        padding-top: 0.75rem;
    }

    .dyc-diagram-overlay-wrap > .dyc-diagram-field {
        position: static;
        width: auto;
        min-width: 0;
        transform: none;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }

    .dyc-diagram-overlay-wrap > .dyc-diagram-field .form-label {
        font-size: 0.8125rem;
    }

    /* 16px keeps iOS Safari from zooming the page when an input is focused. */
    .dyc-diagram-overlay-wrap > .dyc-diagram-field .form-control {
        font-size: 1rem;
    }
}