/* ==========================================================================
   5-Piece Canvas — configurator restyle to the MagicPath design

   WHAT THIS IS
   The existing Laravel configurator (five-piece-configurator.blade.php, with
   its engine at public/assets/js/five-piece-configurator.js) carries the DOM
   contract that server pricing, the upload pipeline, per-panel crop export and
   add-to-cart all depend on. Rebuilding it to the MP25 design would mean new
   pricing inputs and new cart fields, so it was kept exactly as it is and
   restyled instead.

   THIS FILE CHANGES APPEARANCE ONLY.
   No markup, no ids, no state classes, no layout. Specifically it emits:
     - NO `display` on anything           (`.is-hidden{display:none!important}`
                                            is the engine's visibility contract)
     - NO `position`, `aspect-ratio`, `grid-template` or `flex-direction`
     - NO `width`/`height` on any button  (five-piece-configurator.css:2050
                                            sets width/height:auto specifically
                                            to defend against style.css:1620
                                            `button{width:100px;height:40px}` —
                                            re-declaring them here would break
                                            every button in the configurator)
     - nothing on `.fp-configurator__preview-col` (it becomes `display:contents`
       at <=767 to flatten the mobile grid areas)
     - nothing on the preview geometry: `__room-stage`, `__room-backdrop`,
       `__panels-wall`, `__wall-panel*`, `__panel-face img`, 3D stage canvas.
       The engine measures those boxes and writes inline left/top/width/height.

   HOW IT WINS
   The partial self-injects five-piece-configurator.css through a preload/swap
   link, which resolves late and unpredictably, so source order cannot be
   relied on. Every rule here is therefore scoped `.fpc-page .fp-configurator`
   (0,2,0) or tighter, which outranks that sheet's (0,1,x) selectors on
   specificity rather than on order. Where the base sheet uses !important,
   so does this one, at higher specificity.

   WHY IT IS MOSTLY VARIABLES
   The configurator is fully tokenised on .fp-configurator. Its palette is cool
   slate (#0f172a / #64748b / rgba(15,23,42,…)) with 16px and 10px radii and
   Inter. The design is warm, square, Playfair + DM Sans. Redefining the tokens
   does most of the work and cannot break layout. Only the handful of rules
   that hardcode past the tokens need a direct override; each is marked below.

   Load AFTER five-piece-canvas-v2.css. Scoped to .fpc-page, so no other
   product page is affected.
   ========================================================================== */


/* ============================ 1. the tokens ==============================
   Redefining the base sheet's own custom properties. Everything downstream
   recolours with no specificity fight. --fp-price-bar-space is deliberately
   NOT redefined: the root's bottom padding and the mobile chatbot offset are
   both derived from it. */

.fpc-page .fp-configurator {
    /* surfaces — design: page #f7f4ee, card #fffefa, raised #fffdf8 */
    --fp-bg:               #f7f4ee;
    --fp-surface:          #fffefa;
    --fp-surface-elevated: #fffdf8;
    --fp-input-bg:         #fbf8f1;

    /* hairlines — design: #e5ddd1 card border, #ddd2bf stronger rule */
    --fp-border:        #e5ddd1;
    --fp-border-strong: #ddd2bf;

    /* text — design ink and warm grey, replacing slate */
    --fp-text:  #211f1a;
    --fp-muted: #8a8073;

    /* gold — design: #b68d4d primary, #967137 hover, #f4ead8 selected fill.
       The base sheet's #b8860b is a yellower gold and reads differently. */
    --fp-accent:       #b68d4d;
    --fp-accent-hover: #967137;
    --fp-accent-soft:  #f4ead8;

    /* status — design greens and clay, replacing the saturated defaults */
    --fp-success: #537547;
    --fp-warn:    #b07a28;
    --fp-danger:  #9c3328;

    /* the design is almost entirely square (MP21 §4.6) */
    --fp-radius:    2px;
    --fp-radius-sm: 2px;

    /* soft warm shadows in place of the cool slate ones */
    --fp-shadow:    0 1px 2px rgba(33, 31, 26, .05);
    --fp-shadow-lg: 0 10px 34px rgba(33, 31, 26, .09);

    /* the base sheet sets Inter directly on this element, not through a token */
    font-family: var(--fpc-sans, "DM Sans", Arial, Helvetica, sans-serif);
}


/* ========================== 2. display type ==============================
   The design puts Playfair Display on every heading and on prices.
   !important is required: single-product-detail.css sets
       h1,h2,h3,h4,h5,h6,p,span,label,a { font-family: inherit !important }
   which is the single reason the old page rendered in one typeface. */

.fpc-page .fp-configurator :is(h1, h2, h3, h4),
.fpc-page .fp-configurator .fp-configurator__price-discounted,
.fpc-page .fp-configurator .fp-configurator__price-original,
.fpc-page .fp-configurator .fp-configurator__from-price strong {
    font-family: var(--fpc-serif, "Playfair Display", Georgia, serif) !important;
    font-weight: 500;
    letter-spacing: -.4px;
}

/* Section labels: the design's letter-spaced uppercase micro-label.
   11px floor — the design's own 6-8px is a canvas-preview artefact. */
.fpc-page .fp-configurator .fp-configurator__section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fp-muted);
}


/* ============================ 3. buttons =================================
   The base primary is a gradient with a coloured glow:
       background: linear-gradient(180deg,#c9a227,#b8860b);
       box-shadow: 0 4px 14px rgba(184,134,11,.35);
   The design's is flat, square and shadowless. A token cannot remove a
   gradient or a shadow, so these are direct overrides.
   No width/height/min-height here — see the header note. */

.fpc-page .fp-configurator .fp-btn {
    border-radius: 2px;
    font-weight: 700;
    letter-spacing: .04em;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.fpc-page .fp-configurator .fp-btn--primary {
    background: var(--fp-accent);
    background-image: none;
    box-shadow: none;
    color: #fff;
}

.fpc-page .fp-configurator .fp-btn--primary:hover:not(:disabled) {
    background: var(--fp-accent-hover);
    background-image: none;
    box-shadow: none;
    transform: none;   /* the design does not lift its buttons */
}

.fpc-page .fp-configurator .fp-btn--secondary,
.fpc-page .fp-configurator .fp-btn--ghost {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: 2px;
}

.fpc-page .fp-configurator .fp-btn--ghost.is-active {
    border-color: var(--fp-accent);
    background: var(--fp-accent-soft);
    color: #7a5b2c;
}

/* Focus ring. mobile.css:411 removes outlines site-wide, so this is kept out
   of :where() and given its own specificity. */
.fpc-page .fp-configurator .fp-btn:focus-visible,
.fpc-page .fp-configurator .fp-configurator__select:focus-visible,
.fpc-page .fp-configurator input:focus-visible {
    outline: 2px solid #bd9657;
    outline-offset: 2px;
}


/* ====================== 4. the add-to-cart button ========================
   REAL FIX, not cosmetic.

   The engine (updateCartButtonState) toggles two classes on one element:
       .fp-configurator__upload-cta   not ready — label "Begin Your Design"
       .upload-now                    ready     — label "Add To Cart"
   `.upload-now` is the dispatch key for the delegated handler in
   single-product-detail.blade.php:2535, so the two must stay distinguishable
   and the element must never leave the click path. Nothing here sets
   display, visibility or pointer-events.

   The base sheet's only disabled rule for this button is
       .single-product-hero--five-piece .upload-now:disabled
   which is scoped to the OLD page host and is inert on .fpc-page — so on the
   new page the cart button had no disabled styling at all. It does now.

   `.upload-now` also picks up global styling from style.css (9118, 9700) and
   mobile.css (259, 2741, 3173, 3408) the moment the engine adds the class.
   These rules sit at (0,3,0)+ to stay above those. */

.fpc-page .fp-configurator .fp-configurator__cart-btn {
    border-radius: 2px;
    background: var(--fp-accent);
    background-image: none;
    box-shadow: none;
    color: #fff;
    letter-spacing: .06em;
}

.fpc-page .fp-configurator .fp-configurator__cart-btn:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--fp-accent-hover);
    background-image: none;
}

/* ready to add — the engine has swapped in .upload-now */
.fpc-page .fp-configurator .fp-configurator__cart-btn.upload-now {
    background: var(--fp-accent);
    background-image: none;
    color: #fff;
}

/* not ready yet — quieter, so the two states read differently */
.fpc-page .fp-configurator .fp-configurator__cart-btn.fp-configurator__upload-cta {
    background: #2b2721;
    background-image: none;
    color: #f4e4c4;
}

.fpc-page .fp-configurator .fp-configurator__cart-btn.fp-configurator__upload-cta:hover:not(:disabled) {
    background: #413a30;
    background-image: none;
}

/* the missing disabled state */
.fpc-page .fp-configurator .fp-configurator__cart-btn:disabled,
.fpc-page .fp-configurator .fp-configurator__cart-btn[aria-disabled="true"] {
    background: #ded5c6;
    background-image: none;
    color: #8a8073;
    box-shadow: none;
    cursor: not-allowed;
}


/* ======================= 5. panels, cards, inputs ======================== */

.fpc-page .fp-configurator .fp-configurator__section {
    border-radius: 2px;
}

.fpc-page .fp-configurator .fp-configurator__select {
    border-radius: 2px;
    background-color: var(--fp-input-bg);
    border: 1px solid var(--fp-border);
    color: var(--fp-text);
}

/* Range sliders: accent-color restyles track and thumb together without
   needing ::-webkit-slider-thumb, which would require re-declaring
   -webkit-appearance and risks blanking the control. */
.fpc-page .fp-configurator input[type="range"] {
    accent-color: #aa8244;
}

.fpc-page .fp-configurator input[type="number"] {
    border-radius: 2px;
    background-color: var(--fp-input-bg);
    border: 1px solid var(--fp-border);
    color: var(--fp-text);
}


/* ===================== 6. rules that hardcode past the tokens =============
   Everything above recolours through variables. These four do not: the base
   sheet writes literal values with !important, so they are matched here at
   higher specificity with !important. */

/* room tabs — base: border-radius 999px, bg/colour via tokens but !important */
.fpc-page .fp-configurator .fp-configurator__room-tabs button {
    border-radius: 2px;
    background: var(--fp-surface) !important;
    color: var(--fp-muted) !important;
}

.fpc-page .fp-configurator .fp-configurator__room-tabs button.is-active {
    background: var(--fp-accent-soft) !important;
    color: #7a5b2c !important;
    border-color: var(--fp-accent);
}

/* width chips — base: `background:#fff !important`, `color:var(--fp-text)
   !important`, border-radius 8px */
.fpc-page .fp-configurator .fp-configurator__width-chip,
.fpc-page .fp-configurator .fp-configurator__width-grid button {
    border-radius: 2px;
    background: var(--fp-surface) !important;
    color: var(--fp-text) !important;
}

.fpc-page .fp-configurator .fp-configurator__width-chip:hover,
.fpc-page .fp-configurator .fp-configurator__width-grid button:hover {
    border-color: #c9b38d;
}

/* selected size — design uses #ac8548 for the size border */
.fpc-page .fp-configurator .fp-configurator__width-chip.is-active,
.fpc-page .fp-configurator .fp-configurator__width-grid button.is-active {
    background: var(--fp-accent-soft) !important;
    color: #7a5b2c !important;
    border-color: #ac8548;
}

/* The 8 colour swatches are deliberately left alone: each carries an inline
   `style="--swatch:#…;background-color:#…"`, so recolouring them would mean
   !important on top of an inline value, and they are meant to show their own
   colour anyway. They stay circular; the design's square rule is about
   controls, not colour dots. */


/* ========================= 7. selected states ============================
   The design marks selection with a gold border, not a fill. Each of these
   keeps a clear on/off delta, which the engine's state classes depend on. */

.fpc-page .fp-configurator .fp-configurator__layout-grid button {
    border-radius: 2px;
}

.fpc-page .fp-configurator .fp-configurator__layout-grid button.is-active {
    border-color: #b18a4c;          /* design: selected layout border */
    background: var(--fp-accent-soft);
}

.fpc-page .fp-configurator .fp-configurator__size-tier {
    border-radius: 2px;
}

.fpc-page .fp-configurator .fp-configurator__size-tier.is-active {
    border-color: #ac8548;          /* design: selected size border */
    background: var(--fp-accent-soft);
}


/* ===================== 8. quality / status panels ========================
   Design: quality panel #f2f3e9 on #e0e3d3 with headline #4e6341;
   success #edf3e9 on #dce8d4; error #fff1ef on #efc7c1 with text #9c3328.
   The is-* dot classes are left untouched so each level stays distinct. */

.fpc-page .fp-configurator .fp-configurator__quality {
    background: #f2f3e9;
    border-color: #e0e3d3;
    border-radius: 2px;
}

.fpc-page .fp-configurator .fp-configurator__quality-warning {
    background: #fff1ef;
    border-color: #efc7c1;
    color: #9c3328;
    border-radius: 2px;
}


/* ========================== 9. the price bar ============================= */

.fpc-page .fp-configurator .fp-configurator__price-bar {
    background: var(--fp-surface);
    border-top: 1px solid var(--fp-border);
    box-shadow: 0 -2px 14px rgba(33, 31, 26, .06);
}

.fpc-page .fp-configurator .fp-configurator__price-discounted {
    color: var(--fp-text);
}

.fpc-page .fp-configurator .fp-configurator__price-original {
    color: #9d9283;        /* design strikethrough grey */
}

.fpc-page .fp-configurator .fp-configurator__discount-pill {
    background: var(--fp-accent-soft);
    color: #7a5b2c;
    border-radius: 2px;
}


/* ========================== 10. journey rail ============================= */

.fpc-page .fp-configurator .fp-configurator__journey-list li.is-active {
    color: #b38b4d;        /* design step-number gold */
}

.fpc-page .fp-configurator .fp-configurator__journey-list li.is-complete {
    color: #66845d;        /* design completed-step green */
}


/* ====================== 11. upload zone + builder ======================== */

.fpc-page .fp-configurator .fp-configurator__upload-zone {
    background: var(--fp-surface);
    border-radius: 2px;
}

.fpc-page .fp-configurator .fp-configurator__upload-zone.is-dragover {
    border-color: var(--fp-accent);
    background: var(--fp-accent-soft);
}

.fpc-page .fp-configurator .fp-configurator__builder-size-chip {
    border-radius: 2px;
}

.fpc-page .fp-configurator .fp-configurator__builder-size-chip.is-selected {
    border-color: #ac8548;
    background: var(--fp-accent-soft);
}


/* ============================ 12. motion ================================= */

@media (prefers-reduced-motion: reduce) {
    .fpc-page .fp-configurator .fp-btn,
    .fpc-page .fp-configurator .fp-configurator__cart-btn {
        transition: none;
    }
}


/* ===================== 13. 3D preview loading state ======================
   Opening "View in 3D" downloads Three.js and builds the scene, which takes a
   noticeable moment on a phone. Until now the stage sat empty with no sign
   anything was happening.

   This is CSS only and needs no JS hook: the engine injects a <canvas> into
   .fp-preview3d__stage when the scene is ready, so `:not(:has(canvas))` is
   true exactly while it is still loading and false the instant it is not.

   It is an INDETERMINATE indicator, deliberately. The engine reports no
   progress figure, so a percentage or a filling bar would be invented — it
   would move at a rate unrelated to the actual work and mislead on a slow
   connection. A moving sweep says "working" without claiming to know how far.

   Browsers without :has() support simply see no indicator, exactly as today. */

.fpc-page .fp-preview3d__stage:not(:has(canvas)) {
    position: relative;
}

.fpc-page .fp-preview3d__stage:not(:has(canvas))::after {
    content: "Preparing 3D preview\2026";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(230px, 72%);
    padding-top: 30px;
    text-align: center;
    font: 500 12px/1.4 var(--fpc-sans, "DM Sans", Arial, sans-serif);
    letter-spacing: .04em;
    color: var(--fp-muted, #8a8073);
    /* the sweep: a gold band travelling along a hairline track */
    background:
        linear-gradient(90deg, transparent, #b68d4d, transparent) 0 0 / 40% 2px no-repeat,
        linear-gradient(#e5ddd1, #e5ddd1) 0 0 / 100% 2px no-repeat;
    animation: fpc3dSweep 1.15s linear infinite;
}

@keyframes fpc3dSweep {
    from { background-position: -45% 0, 0 0; }
    to   { background-position: 105% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fpc-page .fp-preview3d__stage:not(:has(canvas))::after {
        animation: none;
        background: linear-gradient(#e5ddd1, #e5ddd1) 0 0 / 100% 2px no-repeat;
    }
}