/* ---------------------------------------------------------------------------
 * Rectangular pill ON/OFF switch used across the website builder (appearance,
 * header, footer, scroll & navigation, and homepage section config forms).
 * Bigger + pill-shaped, primary-colored when on, with check/x icons and a
 * sliding knob. Driven entirely by the hidden checkbox's :checked state, so
 * any existing reveal / autosave / form-submit JS keeps working.
 *
 * Shared so every context that renders the switch (the main builder page and
 * AJAX-rendered section config forms) gets identical styling from one source.
 * ------------------------------------------------------------------------- */
.wb-rect-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin: 0;
}
/* Inline variant: a descriptive label sits to the right of the pill
 * (theme/language switcher, header overlay, sitemap two-levels, section
 * options, ...). */
.wb-rect-switch--inline {
    gap: 0.5rem;
}
.wb-rect-switch__label {
    color: var(--text-secondary);
    line-height: 1.2;
}
/* The "Saved" flash anchors below the pill, not below the inline label. */
.wb-rect-switch--inline .wb-saved-indicator {
    left: 0;
}
/* "Saved" flash sits just below the switch, anchored to the track so it
 * never nudges surrounding controls (absolute = out of flow). */
.wb-rect-switch .wb-saved-indicator {
    position: absolute;
    top: calc(100% + 0.2rem);
    left: 0;
    margin-left: 0;
    white-space: nowrap;
    font-size: 0.7rem;
    line-height: 1;
}
/* Discrete helper line beneath a builder control (switch, color picker, preset
 * picker, ...). Sits low enough to clear the absolute "Saved" flash that floats
 * just under a switch pill (so the description no longer gets overwritten), and
 * stays visually quiet - smaller, dimmer, lighter weight - so it never competes
 * with the control label above it. Shared by every control-with-a-description in
 * the builder. */
.wb-field-desc {
    margin-top: 1.1rem;
    margin-bottom: 0.85rem;
    margin-left: 1.75rem;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--text-tertiary);
}
/* Animation Speed stage (shown only when the animation is pulse/glow/shimmer)
 * sits under the pill row's description. Share the same 1.75rem indent as
 * .wb-field-desc so the Speed label / slider / hint align in the control's
 * text column instead of running flush with the pills. Only the animation
 * intensity uses this .wb-intensity-stage wrapper; mesh/image intensity blocks
 * render flush by design. */
.wb-intensity-stage {
    margin-left: 1.75rem;
}
/* Shared slide reveal for control sub-content that turns on with a pill pick
 * (the divider Fill/Height/Flip block, and the animation Speed stage). Uses the
 * grid-template-rows 0fr->1fr technique so height animates without measuring in
 * JS; the single .wb-reveal-inner child clips its overflow while collapsed.
 * Toggled by adding/removing `.is-open` (see _homepage-item.php). The inner's
 * top padding (instead of a mt-* utility on the wrapper) collapses with the row
 * so there is no leftover gap when closed. */
.wb-divider-detail,
.wb-intensity-stage,
.wb-divider-custom {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .25s ease, opacity .2s ease;
}
.wb-divider-detail.is-open,
.wb-intensity-stage.is-open,
.wb-divider-custom.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}
.wb-reveal-inner {
    overflow: hidden;
    min-height: 0;
    padding-top: 0.5rem;
}
/* Per-control fade + slide inside a reveal block: each .wb-reveal-item drops in
 * once the parent gains .is-open. The divider detail's three stacked groups get
 * staggered nth-child delays for a light top-to-bottom cascade; the single
 * visible animation block just fades (no stagger needed). */
.wb-reveal-inner > .wb-reveal-item {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .25s ease, transform .25s ease;
}
.is-open > .wb-reveal-inner > .wb-reveal-item {
    opacity: 1;
    transform: none;
}
.wb-divider-detail.is-open > .wb-reveal-inner > .wb-reveal-item:nth-child(1) { transition-delay: .05s; }
.wb-divider-detail.is-open > .wb-reveal-inner > .wb-reveal-item:nth-child(2) { transition-delay: .12s; }
.wb-divider-detail.is-open > .wb-reveal-inner > .wb-reveal-item:nth-child(3) { transition-delay: .19s; }
/* Identity for an edge's detail content: a nested accent rail + indent so the
 * Fill / Height / Flip group visibly belongs to its Top/Bottom edge heading
 * instead of floating flush with the pills. Divider-only (the animation stage
 * keeps its flush single-control layout). The rail has zero height while the
 * block is collapsed, so it only shows once the edge is open. */
.wb-divider-detail > .wb-reveal-inner {
    margin-left: 0.15rem;
    padding-left: 0.85rem;
    border-left: 2px solid var(--border-default);
    /* Lay the Fill / Height / Flip groups out in a row (wrapping when the panel
     * is too narrow) instead of stacking them. Each group sizes to its content
     * (swatches / pills / switch). */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 2.75rem;
    row-gap: 0.5rem;
}
/* Pin each group to its content width (no grow/shrink) so the column-gap stays
 * the only spacing between them - i.e. the Fill->Height and Height->Flip gaps
 * are always equal and the groups pack left instead of one stretching. */
.wb-divider-detail > .wb-reveal-inner > .wb-reveal-item {
    flex: 0 0 auto;
}
/* Custom-draw sub-reveal: matches the edge detail's accent rail + indent so the
 * canvas visibly belongs to its Top/Bottom edge. Full-width (the canvas needs
 * room), so no flex row like the detail block above. */
.wb-divider-custom > .wb-reveal-inner {
    margin-left: 0.15rem;
    padding-left: 0.85rem;
    border-left: 2px solid var(--border-default);
}
.wb-divider-canvas {
    display: block;
    width: 100%;
    height: auto;
    /* Match the JS drawing buffer (1200x150) so pointer coords scale uniformly
     * and the drawn shape is not distorted at any panel width. */
    aspect-ratio: 8 / 1;
    max-height: 170px;
    background: var(--surface-muted, #f1f3f5);
    border: 1px dashed var(--border-default);
    border-radius: 0.5rem;
    cursor: crosshair;
    /* Keep a drag from scrolling the panel on touch devices. */
    touch-action: none;
}

/* Extra-small button (below Bootstrap's btn-sm) for the compact divider
 * Undo / Redo / Save / Clear controls - short height via tight vertical
 * padding. Spacing below the button rows is handled on their containers
 * (.wb-divider-labelrow / .wb-divider-toolbar) to keep the flex alignment. */
.wb-btn-xs {
    /* Match the 28px height of the .wb-divider-preset shape thumbnails so the
     * Undo/Redo/Save/Clear controls line up with them. */
    height: 28px;
    padding: 0 0.55rem;
    font-size: 0.72rem;
    line-height: 1;
    border-radius: 0.25rem;
}
/* Scoped (higher specificity than Bootstrap's `.btn { display:inline-block }`,
 * which can load after this file) so the icon + label are reliably centered
 * vertically within the fixed-height button. */
.wb-divider-labelrow .wb-btn-xs,
.wb-divider-toolbar .wb-btn-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Breathing room below the Undo/Redo/Save row and the transform/Clear row so
 * the buttons never sit flush against the canvas or the panel edge. */
.wb-divider-labelrow {
    margin-bottom: 0.6rem;
}
.wb-divider-toolbar {
    margin-bottom: 0.6rem;
}

/* Divider edit toolbar: icon-only transform buttons in segmented clusters. */
.wb-divider-toolbar .btn-group .btn {
    /* Keep the icon squares compact and uniform. */
    min-width: 2rem;
}
/* Start-from preset buttons hold a small live SVG preview of their shape. */
.wb-divider-preset {
    width: 52px;
    height: 28px;
    padding: 3px 4px;
    color: #6366f1; /* silhouette tint, matches the canvas + gallery thumbs */
}
.wb-divider-preset .wb-shape-thumb-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Persistent saved-state indicator next to the "Draw the edge" label. Always
 * shown: muted "Not saved" by default, green "Saved" when the current drawing is
 * in the library, red for a transient error message. */
.wb-divider-saved {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted, #868e96); /* default = Not saved */
    pointer-events: none;
}
.wb-divider-saved.is-saved {
    color: #2f9e44; /* success green */
}
.wb-divider-saved.is-error {
    color: #e03131; /* error red */
}

/* "My shapes" reusable-silhouette strip below the draw canvas. */
.wb-shape-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.wb-shape-gallery-empty {
    font-size: 12px;
    color: var(--text-muted, #868e96);
}
.wb-shape-thumb {
    position: relative;
    width: 72px;
    height: 32px;
    /* Same indigo the canvas paints its silhouette with. */
    color: #6366f1;
    background: var(--surface-muted, #f1f3f5);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.12s, transform 0.12s;
}
.wb-shape-thumb:hover {
    border-color: #6366f1;
    transform: translateY(-1px);
}
.wb-shape-thumb-svg {
    display: block;
    width: 100%;
    height: 100%;
}
.wb-shape-thumb-del {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(33, 37, 41, 0.85);
    color: #fff;
    font-size: 11px;
    line-height: 16px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s, background 0.12s;
}
/* Visible over the shape when the thumbnail is hovered... */
.wb-shape-thumb:hover .wb-shape-thumb-del {
    opacity: 1;
}
/* ...and red when the X itself is hovered. */
.wb-shape-thumb-del:hover {
    background: #e03131;
}
.wb-rect-switch__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}
.wb-rect-switch__track {
    position: relative;
    display: inline-block;
    width: 3.75rem;
    height: 1.65rem;
    border-radius: var(--radius-full);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    overflow: hidden;
    transition: var(--transition-colors);
}
.wb-rect-switch__knob {
    position: absolute;
    top: 50%;
    left: 0.2rem;
    width: 1.25rem;
    height: 1.25rem;
    transform: translateY(-50%);
    border-radius: var(--radius-full);
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: transform .18s ease;
}
.wb-rect-switch__on,
.wb-rect-switch__off {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    line-height: 1;
    transition: opacity .15s ease;
}
.wb-rect-switch__on {
    left: 0.5rem;
    color: #fff;
    opacity: 0;
}
.wb-rect-switch__off {
    right: 0.45rem;
    color: var(--text-tertiary, var(--text-secondary));
    opacity: 1;
}
/* Checked = ON: primary-color track, knob slides right, ON icon shows. */
.wb-rect-switch__input:checked ~ .wb-rect-switch__track {
    background-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
}
.wb-rect-switch__input:checked ~ .wb-rect-switch__track .wb-rect-switch__knob {
    transform: translate(2.05rem, -50%);
}
.wb-rect-switch__input:checked ~ .wb-rect-switch__track .wb-rect-switch__on {
    opacity: 1;
}
.wb-rect-switch__input:checked ~ .wb-rect-switch__track .wb-rect-switch__off {
    opacity: 0;
}
.wb-rect-switch__input:focus-visible ~ .wb-rect-switch__track {
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-500-rgb, 58, 168, 224), 0.35);
}
.wb-rect-switch:hover .wb-rect-switch__track {
    border-color: var(--color-primary-300);
}
[data-theme="dark"] .wb-rect-switch__track {
    background-color: var(--bg-secondary);
}
[data-theme="dark"] .wb-rect-switch__input:checked ~ .wb-rect-switch__track {
    background-color: var(--color-primary-300);
    border-color: var(--color-primary-200);
}
[data-theme="dark"] .wb-rect-switch__input:checked ~ .wb-rect-switch__track .wb-rect-switch__on {
    color: #fff;
}