/*
 * The help form — /store/help
 *
 * Pushed only by store/help/index.blade.php, the same way store-landing.css and
 * store-dashboard.css are pushed by their one page. Every color reads a --sd-* token
 * printed into the head by the layout, so a studio that is not Barberito gets its own
 * brand here without this file changing.
 *
 * Sizes worth knowing before you edit:
 *   - Controls are 44px tall, not Bootstrap's 38. This is the one page on the store that
 *     is mostly filled in on a phone, one-handed, and 44px is the smallest target that
 *     is comfortable there. Deliberate; do not "tidy" it back to the default.
 *   - The card matches store-brand.css exactly (14px radius, #e3e8ef, the same shadow),
 *     because it sits beside cards from every other store page in the same session.
 */

/* ---------- the navy band ----------
   Rendered INSIDE <header> via @section('banner'), so it continues the studio's own
   header rather than stacking a second navy block under it. Deliberately NOT a <section>
   and not .banner-section: store.scss forces 0.75rem/1rem padding on both of those. */
.store-body .sh-banner {
    padding: 0.25rem 0 1.9rem;
}

.store-body .sh-title {
    font-size: clamp(1.7rem, 3.6vw, 2.3rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
    margin-bottom: 0.4rem;
}

.store-body .sh-sub {
    font-size: 1.02rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
    max-width: 34rem;
    text-wrap: pretty;
    margin-bottom: 1.1rem;
}

/* Office hours: a fact, up here where it answers "when will I hear back?" */
.store-body .sh-hours {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 0.42rem 0.9rem;
    font-size: 0.86rem;
    font-weight: 500;
    color: #fff;
}
.store-body .sh-hours i { color: var(--sd-cta); }

/* The gold rule that closes every branded band in this app. */
.store-body .sh-rule { height: 2px; background: var(--sd-cta); }

/* ---------- the card ---------- */
.store-body .sh-card {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 6px 18px rgba(16, 24, 40, .04);
    padding: 1.85rem 2rem 2rem;
}

@media (max-width: 575.98px) {
    .store-body .sh-card { padding: 1.35rem 1.15rem 1.5rem; }
}

/* ---------- the three steps ----------
   Numbered because this genuinely is an order: what you need, then which child, then
   where we reply. Not decoration. */
.store-body .sh-step {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}

.store-body .sh-step-n {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    background: var(--sd-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}

.store-body .sh-step-h {
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--sd-primary);
    letter-spacing: -0.01em;
    margin: 0;
}

/* Step copy lines up with the FIELDS below it, not with the heading above. Indenting it
   under the heading text left it hanging to the right of everything else on the card. */
.store-body .sh-step-note {
    margin: -0.35rem 0 1rem;
    font-size: 0.86rem;
    line-height: 1.5;
    color: #6c757d;
    max-width: 36rem;
}

.store-body .sh-hr { height: 1px; background: #eef1f6; border: 0; margin: 1.75rem 0; opacity: 1; }

/* ---------- the reason tiles ----------
   The one change that matters most on this page. This used to be a <select> at the
   tenth field: a parent scrolled past nine boxes before reaching the thing they came to
   say. They are still radios — same name, same values, same server-side check. */
.store-body .sh-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 767.98px) {
    .store-body .sh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.store-body .sh-tile { margin: 0; cursor: pointer; }

/* Off-screen rather than display:none, so it keeps its place in the tab order and still
   carries the browser's own "please choose one" message on submit. */
.store-body .sh-tile-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.store-body .sh-tile-face {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    height: 100%;
    min-height: 78px;
    padding: 0.9rem 0.9rem 0.85rem;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    background: #fff;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}

.store-body .sh-tile:hover .sh-tile-face { border-color: #c9d3e2; }

.store-body .sh-tile-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--sd-primary);
    font-size: 1.15rem;
    line-height: 1;
    opacity: .72;
}

.store-body .sh-tile-t {
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.3;
    color: #333;
}

/* The tick only exists once something is chosen. */
.store-body .sh-tile-tick { display: none; font-size: 1rem; opacity: 1; }

.store-body .sh-tile-input:checked ~ .sh-tile-face {
    border-color: var(--sd-primary);
    background: var(--sd-tint);
    box-shadow: inset 0 0 0 1px var(--sd-primary);
}
.store-body .sh-tile-input:checked ~ .sh-tile-face .sh-tile-top { opacity: 1; }
.store-body .sh-tile-input:checked ~ .sh-tile-face .sh-tile-tick { display: block; }
.store-body .sh-tile-input:checked ~ .sh-tile-face .sh-tile-t {
    color: var(--sd-primary);
    font-weight: 600;
}

/* Keyboard users get the same ring the rest of the store uses. */
.store-body .sh-tile-input:focus-visible ~ .sh-tile-face {
    outline: 2px solid var(--sd-cta);
    outline-offset: 2px;
}

/* ---------- fields ---------- */
.store-body .sh-card .form-control,
.store-body .sh-card .form-select {
    min-height: 44px;
    border-radius: 8px;
}

.store-body .sh-card textarea.form-control { min-height: 118px; }

.store-body .sh-card .form-label {
    font-size: 0.845rem;
    font-weight: 500;
    color: var(--sd-primary);
    margin-bottom: 0.35rem;
}

.store-body .sh-req { color: #b3403c; font-weight: 600; }

/* ---------- the photo box ---------- */
.store-body .sh-file {
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #fcfcfd;
    padding: 0.9rem 1rem;
}

/* ---------- submit ---------- */
.store-body .sh-send {
    background: var(--sd-cta);
    border: 1px solid var(--sd-cta);
    color: var(--sd-on-cta);
    border-radius: 8px;
    padding: 0.72rem 1.9rem;
    font-size: 1rem;
    font-weight: 600;
}
.store-body .sh-send:hover,
.store-body .sh-send:focus {
    background: var(--sd-cta);
    border-color: var(--sd-cta);
    color: var(--sd-on-cta);
    filter: brightness(1.07);
}

@media (max-width: 575.98px) {
    .store-body .sh-send { width: 100%; }
}

/* ---------- the footer facts ---------- */
.store-body .sh-foot-k {
    font-family: 'Oswald', 'Segoe UI', sans-serif;
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sd-primary);
    margin-bottom: 0.5rem;
}

.store-body .sh-foot-v {
    font-size: 0.86rem;
    line-height: 1.7;
    color: #6c757d;
}

/* "(optional)" hides itself the moment its field becomes required — a red star and the
   word "optional" must never sit on the same label. Toggled by the page's own script. */
.store-body .sh-opt { color: #6c757d; font-weight: 400; }