@charset "utf-8";
/* ============================================================
   DEMO MODE CUSTOMIZER
   Loaded only while DEMO_MODE is on (head.php). People evaluating WISECP inspect the admin panel
   too, so this lets them drop in their own logo and colours and see the panel wearing their brand.
   Preview only: colours travel in cookies (head.php applies them server-side, so there is no
   repaint flash) and the logo in localStorage as a data URL, which is too large for a cookie.

   Ported 1:1 from the WStyle theme's customizer — class names, geometry and behaviour are the
   theme's; only the custom properties are swapped for the admin token layer and the z-index comes
   from the admin scale instead of a bare number.
   ============================================================ */

/* Edge tab pinned to the middle of the inline-end edge: an icon slot plus a label that collapses to
   zero width and grows inward on hover/focus. Round on the inline-start end, flush on the edge.
   The label comes BEFORE the icon in the markup so the icon stays against the edge and the label
   opens toward the page — reversed, the label ends up under the scrollbar. */
.customizer-launcher{
    position:fixed;inset-block-start:50%;inset-inline-end:0;translate:0 -50%;
    z-index:var(--wcp-z-float-menu);
    display:inline-flex;align-items:stretch;block-size:2.75rem;padding:0;border:0;
    background-color:var(--wcp-brand-primary);color:#fff;
    border-start-start-radius:50rem;border-end-start-radius:50rem;
    border-start-end-radius:0;border-end-end-radius:0;
    box-shadow:var(--wcp-shadow-lg);overflow:hidden;cursor:pointer;
    transition:background-color .4s linear, color .4s linear;
}
/* Pinned to the viewport edge, so Bootstrap's body padding never reaches it: a modal
   opening removes the reserved scrollbar and the launcher rides along by that width.
   Move the anchor, the same way default.css does for #scrollTopBtn. */
body.modal-open .customizer-launcher{inset-inline-end:var(--wcp-scrollbar-w, 0px)}
.customizer-launcher:hover,
.customizer-launcher:focus-visible,
.customizer-launcher.is-nudging{
    background-color:color-mix(in srgb, var(--wcp-brand-primary) 16%, var(--wcp-surface-bg));
    color:var(--wcp-primary-text);
}
/* Every size below is derived from --wcp-font-size-base (13px), not from rem. WStyle's own values
   were rem-fixed against a 16px root, so ported as-is they came out oversized here — the colour row
   labels landed at 13.6px, larger than the panel's own body text. */
.customizer-launcher-ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;inline-size:2.75rem;block-size:2.75rem;font-size:calc(var(--wcp-font-size-base) * 1.4)}
.customizer-launcher-label{
    display:inline-flex;align-items:center;max-inline-size:0;padding-inline-start:0;
    overflow:hidden;white-space:nowrap;font-size:calc(var(--wcp-font-size-base) * .9);font-weight:600;opacity:0;
    transition:max-inline-size .4s linear, padding-inline-start .4s linear, opacity .4s linear;
}
.customizer-launcher:hover .customizer-launcher-label,
.customizer-launcher:focus-visible .customizer-launcher-label,
.customizer-launcher.is-nudging .customizer-launcher-label{max-inline-size:12rem;padding-inline-start:1rem;opacity:1}

/* Spotlight veil: one element serves both triggers (label revealed, or the panel open) through
   plain sibling selectors — the veil is printed AFTER the launcher and the panel (footer.php).
   Hover only dims — clicks pass through; an open panel also fields the click, which is the
   click-outside-to-close people expect.
   NOT body:has(): a body-scoped :has() with a dynamic pseudo made Chromium re-evaluate
   has-invalidation on every DOM insertion, and ApexCharts inserts hundreds of SVG nodes while
   drawing the dashboard — the chart pass measured 1.6-1.9s with that rule, ~0.25s without
   (A/B, 2026-08-23). Sibling invalidation is scoped and cheap. */
.customizer-veil{
    position:fixed;inset:0;z-index:calc(var(--wcp-z-float-menu) - 5);
    background-color:rgba(0,0,0,.3);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
    opacity:0;pointer-events:none;transition:opacity .4s linear;
}
.customizer-launcher:hover ~ .customizer-veil,
.customizer-launcher:focus-visible ~ .customizer-veil{opacity:1}
#customizer-panel.show ~ .customizer-veil{opacity:1;pointer-events:auto}

@media (prefers-reduced-motion:reduce){
    .customizer-launcher,.customizer-launcher-label,.customizer-veil{transition:none}
}
/* Mobile: the centred tab collides with page content, so pin it above the scroll-to-top button */
@media (max-width:991.98px){
    .customizer-launcher{inset-block-start:auto;inset-block-end:5.5rem;translate:none}
}

.customizer-panel{max-inline-size:20rem;z-index:calc(var(--wcp-z-float-menu) + 5)}
/* Panel sections as soft cards (compact: the panel must not scroll) */
.customizer-section{background-color:var(--wcp-body-bg);border:1px solid var(--wcp-border-color);border-radius:var(--wcp-radius);padding:.75rem}
.customizer-section-title{font-size:calc(var(--wcp-font-size-base) * .8);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--wcp-muted-color);margin-block-end:.5rem}

/* Click-to-upload logo area, and the framed preview that replaces it once a logo is in */
.customizer-logo-drop{
    display:flex;flex-direction:column;align-items:center;gap:.125rem;padding:.75rem;
    border:1px dashed color-mix(in srgb, var(--wcp-muted-color) 45%, transparent);
    border-radius:var(--wcp-radius);background-color:var(--wcp-surface-bg);
    text-align:center;cursor:pointer;transition:border-color .2s ease, background-color .2s ease;
}
.customizer-logo-drop:hover{border-color:var(--wcp-primary-text);background-color:var(--wcp-primary-subtle)}
.customizer-logo-drop .bi{font-size:calc(var(--wcp-font-size-base) * 1.5);color:var(--wcp-primary-text)}
.customizer-logo-preview-row{
    position:relative;display:flex;align-items:center;justify-content:center;
    min-block-size:4.25rem;padding:.65rem 2.25rem;
    border:1px solid var(--wcp-border-color);border-radius:var(--wcp-radius);background-color:var(--wcp-surface-bg);
}
/* The preview itself is the replace affordance: a label wired to the file input, so clicking the
   current logo opens the browse dialog directly instead of forcing a delete first. */
.customizer-logo-swap{display:flex;align-items:center;justify-content:center;min-inline-size:0;padding:.25rem .4rem;border-radius:calc(var(--wcp-radius) * .7);cursor:pointer;transition:background-color .2s ease, box-shadow .2s ease}
.customizer-logo-swap:hover{background-color:var(--wcp-primary-subtle);box-shadow:var(--wcp-focus-ring)}
/* An explicit block-size, not just a max: the preview is a flex item, and a logo whose intrinsic
   width is undefined (SVG with a viewBox but no width/height — the shape most brand logos ship in)
   resolves its flex basis to zero and collapses to a 0x0 box. Measured: complete=true, natural
   300x73, rendered 0x0 — the frame stayed visibly empty. Height plus auto width lets the aspect
   ratio do the rest, and object-fit keeps it from stretching. */
.customizer-logo-preview{block-size:2.5rem;inline-size:auto;max-inline-size:100%;flex:0 0 auto;object-fit:contain}
.customizer-logo-remove{position:absolute;inset-block-start:.3rem;inset-inline-end:.3rem}

/* Round colour swatches */
.customizer-color-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-block:.25rem}
.customizer-color-row .form-label{margin:0;font-size:var(--wcp-font-size-base)}
.customizer-panel .form-control-color{inline-size:2rem;block-size:2rem;flex-shrink:0;padding:.15rem;border-radius:50%;border-color:var(--wcp-border-color)}
.customizer-panel .form-control-color::-webkit-color-swatch{border-radius:50%;border:none}
.customizer-panel .form-control-color::-moz-color-swatch{border-radius:50%;border:none}

/* Premium notice: the panel has to say up front that nothing here reaches the installation without
   the Whitelabel package, and give the way to get it. Warning tone, matching the Premium badge the
   Logo/Branding rail already uses. */
.customizer-premium{display:flex;align-items:flex-start;gap:.6rem;padding:.75rem;
    border:1px solid color-mix(in srgb, var(--bs-warning) 40%, transparent);
    border-radius:var(--wcp-radius);background:var(--bs-warning-bg-subtle)}
.customizer-premium > .bi{font-size:calc(var(--wcp-font-size-base) * 1.3);color:var(--wcp-warning-text);flex-shrink:0;line-height:1.3}
.customizer-premium-title{font-weight:600;font-size:calc(var(--wcp-font-size-base) * .95);color:var(--wcp-heading-color)}
.customizer-premium-desc{font-size:calc(var(--wcp-font-size-base) * .88);color:var(--wcp-body-color);margin:.15rem 0 .6rem;line-height:1.45}

/* Menu orientation is admin-specific — WStyle has no equivalent — so it keeps the panel's own
   section language rather than inventing a control style. */
.customizer-orientation{display:flex;gap:.4rem}
.customizer-orientation .btn{flex:1}