/**
 * PersoNailit — shop panel (phones): backdrop, spotlight over the lit card,
 * the panel and its rows of options. Height: --pi-ls-sheet-height
 * ("Phone panel height").
 */

/* The lit card above its neighbours while zoomed. */
.personailit-ls-lit {
    z-index: 60;
}

/* Its price shows in the bar instead. */
.personailit-ls-price-hidden {
    visibility: hidden !important;
}

.personailit-ls-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99998;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

.personailit-ls-spotlight {
    position: absolute;
    border-radius: 12px;
    box-shadow: 0 0 0 3px #fff, 0 0 0 200vmax rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* Spotlight off (data-personailit-spotlight="off" around the card): no
   dimming, and taps and scrolling reach the page (the script closes the
   panel on a tap outside it or when the page scrolls away). */
.personailit-ls-sheet-backdrop.is-plain {
    pointer-events: none;
}

.personailit-ls-sheet-backdrop.is-plain .personailit-ls-spotlight {
    display: none;
}

.personailit-ls-sheet-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

/* --- The panel (left / right set by the script) -------------------------- */

.personailit-ls-sheet {
    --pi-ls-size: 34px;
    --pi-ls-ring: #1d1d1f;

    position: fixed;
    right: 16px;
    bottom: 0;
    left: 16px;
    z-index: 99999;
    box-sizing: border-box;
    height: var(--pi-ls-sheet-height, auto); /* Global Settings → "Phone panel height" */
    max-height: 90vh;
    overflow-y: auto;
    padding: 0 var(--pi-panel-pad) calc(20px + env(safe-area-inset-bottom));
    border: 1px solid var(--pi-panel-border);
    border-bottom: 0;
    border-radius: var(--pi-panel-radius) var(--pi-panel-radius) 0 0;
    background: var(--pi-panel-surface);
    color: #1d1d1f;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform var(--pi-panel-motion) var(--pi-panel-ease), visibility var(--pi-panel-motion);
    overscroll-behavior: contain;
}

.personailit-ls-sheet.is-open {
    transform: translateY(0);
    visibility: visible;
}

.personailit-ls-sheet.is-dragging {
    transition: none; /* follows the finger */
}

.personailit-ls-sheet:focus {
    outline: none;
}

/* Spotlight mode only: the page is locked while the card is lit. */
html.personailit-ls-sheet-open {
    overflow: hidden;
}

/* --- One row per element ------------------------------------------------ */

.personailit-ls-sheet-label {
    margin: 4px 0 9px;
    color: #555;
    font-size: 13px;
}

/* "Title: Chosen". */
.personailit-ls-sheet-label span + b {
    margin-left: 0.3em;
}

.personailit-ls-sheet-label b {
    color: #1d1d1f;
}

.personailit-ls-sheet-options {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-bottom: 16px;
}

.personailit-ls-sheet .personailit-ls-swatch {
    display: inline-flex;
}

.personailit-ls-sheet .personailit-ls-swatch--color {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* The panel keeps its own look: ring outline, square thumbnails. */
.personailit-ls-sheet .personailit-ls-swatch--color.is-selected,
.personailit-ls-sheet .personailit-ls-swatch--image.is-selected {
    outline: 2px solid var(--pi-ls-ring);
    outline-offset: 3px;
}

.personailit-ls-sheet .personailit-ls-swatch--color.is-selected {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.personailit-ls-sheet .personailit-ls-swatch--image {
    width: calc(var(--pi-ls-size) + 8px);
    height: calc(var(--pi-ls-size) + 8px);
    border-radius: 4px;
    box-shadow: 0 0 0 2px #fff, 0 1px 3px 2px rgba(0, 0, 0, 0.18);
}

.personailit-ls-sheet .personailit-ls-swatch--image.is-selected {
    outline-offset: 2px;
}

.personailit-ls-sheet .personailit-ls-swatch--text {
    min-height: 40px;
    padding: 9px 16px;
    border-color: #ccc;
    background: #fff;
    font-size: 14px;
    box-shadow: none;
}

.personailit-ls-sheet .personailit-ls-swatch--text.is-selected {
    border-color: var(--pi-ls-ring);
    box-shadow: inset 0 0 0 1px var(--pi-ls-ring);
}

@media (prefers-reduced-motion: reduce) {
    .personailit-ls-sheet,
    .personailit-ls-sheet-backdrop {
        transition: none;
    }
}