/* SwagPOD Designer - personalisation controls within product modals */

.pod-designer-canvas {
    border: 1px solid var(--store-primary, #e2e8f0);
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f5f5f5;
}

.pod-designer-canvas canvas {
    display: block;
    max-width: 100%;
}

/* Personalisation controls below canvas */
.pod-personalise {
    margin-top: 1rem;
}

.pod-personalise .pod-field-group {
    margin-bottom: 0.75rem;
}

.pod-personalise .pod-field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--store-primary, #1e293b);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.pod-personalise .pod-field-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.pod-personalise .pod-field-input:focus {
    border-color: var(--store-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.pod-personalise .pod-field-hint {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 0.15rem;
}

/* Font selector */
.pod-font-select {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    background: white;
    outline: none;
}

.pod-font-select:focus {
    border-color: var(--store-primary, #3b82f6);
}

/* Colour swatches */
.pod-colour-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.375rem;
    /* The custom picker carries a "Custom" caption underneath, making it taller than the
       plain palette circles. Align to the top so every circle still sits on one line
       instead of the palette drifting down to centre against the taller item. */
    align-items: flex-start;
}

.pod-colour-swatch {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
}

.pod-colour-swatch:hover {
    transform: scale(1.1);
}

.pod-colour-swatch.active {
    border-color: var(--store-primary, #1e293b);
    box-shadow: 0 0 0 2px rgba(30, 41, 59, 0.2);
}

/* Custom-colour picker: a native <input type="color"> carrying .pod-colour-swatch.
   Strip the input's default chrome so its colour swatch fills the round swatch
   (otherwise it renders as a small square inside the circular border). */
.pod-colour-custom {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    background: none;
}
.pod-colour-custom::-webkit-color-swatch-wrapper { padding: 0; }
.pod-colour-custom::-webkit-color-swatch { border: none; border-radius: 50%; }
.pod-colour-custom::-moz-color-swatch { border: none; border-radius: 50%; }

/* Round6 B3: resting state (no colour picked via this control yet) reads "pick any
   colour" via a conic-gradient rainbow ring on the input itself. podActivateColourSwatch
   (Shop.aspx) adds .active to whichever .pod-colour-swatch — palette button or this
   input — is the current pick, exactly mirroring "a colour has been picked here".
   While resting we also blank the native colour-swatch pseudo-element (it defaults to
   the input's value, e.g. #000000, and would otherwise sit opaque on top and hide the
   gradient) so the rainbow shows through; once .active, the pseudo-element paints the
   real picked colour again and the gradient rule below no longer applies (specificity:
   ":not(.active)" beats the plain ".pod-colour-custom" background rule above) — the
   picked colour fully REPLACES the gradient, it is never layered under/over it. */
/* The wheel is painted on a REAL element (the wrapper span), not on the input and not on
   a vendor pseudo-element. Three attempts at styling the native <input type="color"> all
   failed the same way: its ::-webkit-color-swatch paints the current value over whatever
   is behind it, and the rule to suppress that kept being discarded. Drawing the wheel on
   an ordinary span sidesteps the native control's rendering entirely — nothing about
   ::-webkit-/::-moz- can reach it.
   Layer order matters: the radial is listed first so it paints ON TOP of the conic,
   punching the pale centre that makes it read as a wheel rather than a disc. */
.pod-colour-custom-face {
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, #fdfdfd 0 34%, rgba(255,255,255,0) 35%),
        conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
}

/* While no colour has been picked, the input itself is invisible so the wheel behind it
   shows; it stays fully clickable (opacity does not affect hit-testing), so the OS colour
   dialog still opens. Once picked, .active restores it and the chosen colour covers the
   wheel — the same "picked colour REPLACES the gradient" behaviour as before. */
.pod-colour-custom:not(.active) {
    opacity: 0;
}
/* The native swatch pseudo-element paints the input's current value (#000000) OVER the
   gradient above, so without this the control renders as a plain BLACK circle and the
   rainbow is never seen — which is exactly what the client was looking at when they
   reported the eye-dropper was "hard to see when the colour is set to black". The
   previous rule set `background: transparent` with no !important and lost to the
   browser's own swatch styling. background-color AND background, both !important, and
   the wrapper too, because Chrome paints the wrapper's padding box as well. */
/* ⚠️ NEVER group -webkit- and -moz- pseudo-elements in one selector list. A browser
   discards the WHOLE rule if any selector in the group is unrecognised, so Chrome threw
   this away because of the ::-moz- half — which is why the rainbow was never once
   visible, and why the black circle survived two attempts at "fixing" it. The two
   unprefixed rules further up survive only because they were already written separately.
   One rule per vendor prefix. */
.pod-colour-custom:not(.active)::-webkit-color-swatch {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}
.pod-colour-custom:not(.active)::-moz-color-swatch {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}
.pod-colour-custom:not(.active)::-webkit-color-swatch-wrapper {
    padding: 0 !important;
    background: transparent !important;
}

/* "Custom" caption under the wheel, as the client asked. Column wrapper so the caption
   sits under its own control only — .pod-colour-swatches is align-items:flex-start so the
   extra height doesn't drag the palette circles out of line. */
.pod-colour-custom-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    line-height: 1;
}

.pod-colour-custom-label {
    font-size: 0.625rem;
    color: #64748b;
    user-select: none;
}

/* R7 9a gave the eye-dropper a white glyph + dark halo so it reads on a black PICK.
   The resting wheel now has a pale centre, where a white glyph would disappear, so the
   resting state gets a dark glyph instead. !important because the glyph carries the
   picked-colour treatment as an inline style, which would otherwise win. */
.pod-colour-custom:not(.active) + .pod-colour-custom-icon {
    color: #334155 !important;
    text-shadow: none !important;
}

/* Responsive: stack on mobile */
@media (max-width: 640px) {
    .pod-personalise .pod-field-input {
        font-size: 1rem;
        padding: 0.625rem 0.75rem;
    }
}

/* Full-screen personalise mode: the product dialog expands into a configurator
   workspace when the customer clicks "Personalise". The existing md:flex-row
   split (preview left / details right) becomes the configurator layout. */
dialog.personalise-mode .pod-modal-panel {
    max-width: 100vw;
    width: 100vw;
}

dialog.personalise-mode .pod-modal-body {
    max-height: 90vh;   /* was: min-height: 88vh — cap so body never exceeds viewport */
    overflow: hidden;   /* prevent the outer body itself from scrolling */
}

/* Layout A: two-column grid in personalise mode.
   Canvas column takes remaining space (visual focus); rail is fixed ~360px.
   Both existing column divs gain .pod-pe-canvas / .pod-pe-rail classes in markup. */
dialog.personalise-mode .pod-modal-body {
    display: grid;
    grid-template-columns: 1fr 360px;
    grid-template-rows: auto;
    align-items: start;
}

dialog.personalise-mode .pod-pe-canvas {
    /* Override the Tailwind w-5/12 sizing — let the grid column control width */
    width: 100% !important;
    /* min-height: 60vh removed — was pushing thumbnails off-screen */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

dialog.personalise-mode .pod-pe-canvas .aspect-square,
dialog.personalise-mode .pod-pe-canvas .relative.rounded-lg {
    /* Cap the square by WIDTH (not height) so it fits the viewport height while
       preserving its aspect ratio. A max-height on an aspect-square/ratio box with
       width:100% squashes it into a short, wide box — that crushed wrap products
       (e.g. a mug). Sizing by max-width keeps the square square; centre it. */
    width: 100%;
    /* Fit the viewport height (small laptops) AND cap absolutely (~700px) so the
       product never dominates a large monitor. Verified live on the demo cup. */
    max-width: min(calc(90vh - 120px), 700px);
    margin-left: auto;
    margin-right: auto;
}

dialog.personalise-mode .pod-pe-rail {
    /* Override the Tailwind w-7/12 sizing — let the grid column control width */
    width: 100% !important;
    /* Must fit INSIDE the body's 90vh + p-8 (2rem top/bottom) content box — at
       88vh the rail's bottom edge sat under the body's overflow:hidden clip, so
       its own scrollbar bottomed out with the Go to Cart / Continue Shopping
       links still hidden (F1). */
    max-height: calc(90vh - 4rem);
    overflow-y: auto;
    /* The markup's justify-between pins the controls block to the rail's bottom
       edge; inside a scroll container that fights the scrollbar — top-align. */
    justify-content: flex-start;
    padding-left: 1.25rem;
    box-sizing: border-box;
    border-left: 1px solid #e2e8f0;
}

/* Narrow screens: single column, rail becomes a full-width bottom drawer */
@media (max-width: 768px) {
    dialog.personalise-mode .pod-modal-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        /* Stacked canvas + rail exceed the 90vh cap; the rail no longer scrolls
           itself on mobile, so the body must scroll or everything below the cap
           is unreachable (F1). */
        overflow-y: auto;
    }

    dialog.personalise-mode .pod-pe-canvas {
        min-height: unset;
    }

    dialog.personalise-mode .pod-pe-rail {
        width: 100% !important;
        max-height: none;
        overflow-y: unset;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid #e2e8f0;
        padding-top: 1rem;
        margin-top: 0.5rem;
    }
}