/*  custom/styles.css  -  the shared look of the eleven cushion designers.

    Loaded after stylesheet.css, so everything here is either new or a
    deliberate override. The site's own tokens do the colour work: nothing
    below hardcodes a hex, so a palette change in stylesheet.css moves these
    with it.

    The fabric picker is NOT styled here. .mats belongs to stylesheet.css
    because catalog.aspx and custom.aspx already draw the same control, and
    a second copy of those rules is a second thing to keep in step.        */


/*  THE TWO COLUMN FRAME

    Form on the left, the sticky summary on the right. The summary is the
    thing being watched while the numbers change, so it holds position
    rather than scrolling away at the point it becomes interesting.       */
.dsg { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(1.5rem,3vw,2.5rem); align-items:start; }

@media (max-width:1024px) {
    /*  One column, and the summary stops being sticky. Pinned to a short
        viewport it would sit over the fields it is summarising.          */
    .dsg { grid-template-columns:1fr; }
    .dsg_side { position:static !important; }
}


/*  ---- the form side ------------------------------------------------- */

.dsg_step { border:1px solid var(--line); background:var(--white); margin-bottom:1.25rem; }

.dsg_step > h2
{
    display:flex; align-items:center; gap:.6rem; margin:0;
    padding:.8rem 1.1rem; border-bottom:1px solid var(--line); background:var(--sand);
    font:600 .78rem/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--ink2);
}

/*  The step number as a counter rather than a hand typed digit, so adding
    or reordering a step cannot leave the sequence wrong.                 */
.dsg_form { counter-reset:dsgstep; }
.dsg_step > h2::before
{
    counter-increment:dsgstep; content:counter(dsgstep);
    flex:0 0 1.45rem; width:1.45rem; height:1.45rem;
    display:grid; place-items:center; border-radius:50%;
    background:var(--accent); color:var(--white); font-size:.72rem;
}

.dsg_body { padding:1.1rem; }
.dsg_body > .hint:first-child { margin-top:0; }


/*  ---- dimension fields ------------------------------------------------ */

/*  auto-fit rather than a fixed column count: a single cushion shows three
    fields and a two piece shows six, and neither should have to declare a
    different grid.                                                        */
.dsg_dims { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.9rem; }

.dsg_fld { display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.dsg_fld label { font:600 .68rem/1.2 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

/*  The inches mark sits inside the field rather than in the label, so the
    label can stay a short name and the unit is where the number is.      */
.dsg_in { position:relative; display:flex; align-items:center; }
.dsg_in input
{
    width:100%; padding:.55rem 1.9rem .55rem .6rem;
    border:1px solid var(--line); background:var(--white); color:var(--ink);
    font:inherit; font-size:.95rem;
}
.dsg_in input:focus { outline:none; border-color:var(--accent); }
.dsg_in::after
{
    content:'in'; position:absolute; right:.55rem; pointer-events:none;
    font-size:.72rem; color:var(--muted);
}

/*  A value the server clamped on the way through. Marked rather than
    silently corrected, because a dimension that changed itself between
    typing it and being quoted needs to be visible.                       */
.dsg_in input.clamped { border-color:var(--accent); background:var(--accent-soft); }

.dsg_note { font-size:.74rem; line-height:1.4; color:var(--muted); }
.dsg_note b { color:var(--ink2); font-weight:600; }


/*  A derived figure the customer does not type - overall length on a one
    piece, where it is the seat and back added together. Shown because it
    is the number that has to match their furniture.                      */
.dsg_derived
{
    margin-top:.9rem; padding:.6rem .75rem; border:1px dashed var(--line);
    background:var(--sand2); font-size:.82rem; color:var(--ink2);
}
.dsg_derived b { font-weight:700; }


/*  ---- the group heading on a two piece -------------------------------- */

.dsg_group + .dsg_group { margin-top:1.25rem; padding-top:1.1rem; border-top:1px solid var(--line-soft); }
.dsg_group > h3
{
    margin:0 0 .7rem; font:600 .72rem/1 var(--font-body);
    letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dk);
}


/*  ---- option lists (ties) ---------------------------------------------- */

/*  A column of choices rather than a select, because the labels are whole
    phrases and a dropdown hides every option but the chosen one at exactly
    the moment the customer is comparing them.                              */
.dsg_opts { list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }

.dsg_opts button
{
    width:100%; text-align:left; cursor:pointer;
    padding:.6rem .75rem; border:1px solid var(--line); background:var(--white);
    color:var(--ink); font:inherit; font-size:.86rem; line-height:1.3;
}
.dsg_opts button:hover { border-color:var(--muted); }
.dsg_opts button.active { border-color:var(--accent); background:var(--accent-soft); font-weight:600; }


/*  ---- the summary side ------------------------------------------------ */

.dsg_side { position:sticky; top:1rem; border:1px solid var(--line); border-top:3px solid var(--accent); background:var(--white); }

.dsg_side h2
{
    margin:0; padding:.8rem 1.1rem; border-bottom:1px solid var(--line); background:var(--sand);
    font:600 .78rem/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--ink2);
}

.dsg_sum { padding:1.1rem; }

.dsg_row { display:flex; justify-content:space-between; gap:1rem; padding:.35rem 0; font-size:.84rem; }
.dsg_row + .dsg_row { border-top:1px solid var(--line-soft); }
.dsg_row span:first-child { color:var(--muted); }
.dsg_row span:last-child { text-align:right; color:var(--ink); }

/*  The swatch beside the fabric name. Small on purpose - the picker above
    is where a fabric is chosen, this only confirms which one won.        */
.dsg_swatch { display:inline-block; width:2.2rem; height:1.65rem; border:1px solid var(--line); object-fit:cover; vertical-align:middle; margin-right:.4rem; }

.dsg_price
{
    margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--line);
    display:flex; align-items:baseline; justify-content:space-between; gap:.5rem;
}
.dsg_price .lbl { font:600 .7rem/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.dsg_price .amt { font-family:var(--font-display); font-size:1.75rem; color:var(--ink); }

/*  Waiting on the service. Dimmed rather than replaced with a spinner, so
    the previous figure stays readable while the next one is fetched and
    the box does not change height.                                        */
.dsg_price.busy .amt { opacity:.4; }

/*  No price is not zero. The handler refuses rather than returning 0.00,
    and this is what that refusal looks like.                              */
.dsg_price.none .amt { font-size:1rem; color:var(--muted); }

.dsg_err { margin-top:.8rem; padding:.6rem .7rem; border-left:3px solid #a35b5b; background:var(--sand2); font-size:.8rem; line-height:1.45; color:var(--ink2); }
.dsg_err[hidden] { display:none; }

.dsg_qty { display:flex; align-items:center; gap:.5rem; margin-top:.9rem; }
.dsg_qty label { font:600 .7rem/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.dsg_qty input { width:4.5rem; padding:.5rem .55rem; border:1px solid var(--line); background:var(--white); color:var(--ink); font:inherit; }

.dsg_add { width:100%; margin-top:.9rem; }
.dsg_add[disabled] { opacity:.45; cursor:not-allowed; }


/*  ---- the unfinished state -------------------------------------------- */

/*  What a designer looks like before its product codes have been filled in
    to designers.json. Loud on purpose: the page is reachable, the fields
    work, and nothing can be ordered - that needs saying rather than being
    discovered at the Add button.                                          */
.dsg_blocked
{
    margin-bottom:1.5rem; padding:.9rem 1.1rem;
    border:1px solid var(--accent); border-left-width:3px; background:var(--accent-soft);
    font-size:.86rem; line-height:1.5; color:var(--ink);
}
.dsg_blocked b { display:block; margin-bottom:.2rem; }