/*
    The opening-hours and shop-colour pickers, shared by the signup form (_SetupLayout) and the
    editor's settings page (_ShopLayout).

    A file of their own because the two pages load different stylesheets. These rules lived in
    storefront.css, which the signup form never loads, so the pickers rendered there as bare browser
    checkboxes, buttons and radios - reported from testing as "this setup page design is broken".
    Every layout that renders a picker links this file, and PickerStylesTests holds it to that.

    Unthemed: every colour is a token, and both layouts define them - the storefront from its theme,
    the signup form from its own fixed palette.
*/

/*
    The opening-hours picker, shared by signup and settings.

    Seven boxes drawn as chips, so a week is seen at a glance rather than read out of a dropdown;
    the presets under them are shortcuts. The per-day rows sit in a disclosure that opens itself
    when a day already has its own hours, and stays shut for the shop that has none.
*/
.dayset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.dayset__legend { padding: 0; font-size: 14px; font-weight: 600; }

.daychips { display: flex; flex-wrap: wrap; gap: 6px; }

.daychip { position: relative; }

.daychip input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.daychip span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 40px;
    padding: 0 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-xl);
    background: var(--white);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.daychip input:checked + span { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }

.daychip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.daypresets { display: flex; flex-wrap: wrap; gap: 6px; }

.daypreset {
    border: 0;
    font-family: inherit;
    min-height: 32px;
    padding: 0 10px;
    border-radius: var(--r-xl);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.dayshared { display: flex; gap: 10px; }

.dayshared .field { flex: 1; }

/*
    The per-day hours, in a disclosure.

    It sat flush against the Opens/Closes row above it and gave no sign it could be opened at all:
    `display: flex` on a summary removes the browser's own disclosure triangle, and nothing replaced
    it. So there is room above it now, a tinted bar that reads as something to press, and a chevron
    that turns over when it opens.
*/
.dayown {
    margin-top: 14px;
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    background: var(--white);
    overflow: hidden;
}

.dayown summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface-2);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

/* Safari draws its own triangle from this, on top of the chevron below. */
.dayown summary::-webkit-details-marker { display: none; }

.dayown summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* The chevron: two sides of a box, turned. Down when shut, up when open. */
.dayown summary::after {
    content: "";
    margin-left: auto;
    flex: none;
    width: 8px;
    height: 8px;
    margin-bottom: 3px;
    border: solid var(--meta);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform 150ms ease;
}

.dayown[open] summary::after { transform: rotate(-135deg); margin: 3px 0 0; }

.dayown[open] summary { border-bottom: 1px solid var(--border-2); }

.dayown__hint { margin: 12px 12px 8px; }

.dayown__row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; }

/* Room under the last row, which otherwise sits on the container's own edge. */
.dayown__row:last-of-type { padding-bottom: 14px; }

.dayown__label { flex: none; width: 34px; font-size: 13px; font-weight: 600; }

.dayown__row select { flex: 1; min-width: 0; }


/*
    The shop's colour, as colours.

    Nine of these drawn as radio rows would be most of a phone screen spent on one question, and the
    swatch - the only part a merchant is actually reading - sat at the end of each row. A grid puts
    the answer first: the chosen one is ringed in its own colour and ticked in whatever the theme
    already works out is readable on top of it.
*/
.themeset { border: 0; margin: 0; padding: 0; }

.themeset__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 10px;
}

.themepick { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }

.themepick input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.themepick__dot {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 0 1px rgba(27, 25, 22, 0.12) inset;
}

/* The ring, drawn outside the dot so it does not shrink the colour it is marking. */
.themepick input:checked + .themepick__dot {
    box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--ring, var(--ink));
}

.themepick input:focus-visible + .themepick__dot {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
}

/* The tick: two sides of a box, turned, in the theme's own on-brand colour. */
.themepick input:checked + .themepick__dot::after {
    content: "";
    position: absolute;
    inset: 15px auto auto 19px;
    width: 7px;
    height: 13px;
    border: solid var(--tick, #FFFFFF);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.themepick__name { font-size: 12px; font-weight: 600; color: var(--meta); }

.themepick input:checked ~ .themepick__name { color: var(--ink); }