/*
 * The customer account and the admin screens added by the account work.
 *
 * Linked from layouts.public and layouts.admin straight after business-os.css, so
 * a rule here wins a tie with one there. Customer pages still need the same
 * body:not(.admin-body):not(.stylist-body) prefix (and at times !important) that
 * business-os.css uses to beat app.css; admin rules use cn-* classes.
 *
 * The booking hub, "Book this again", style history and loyalty with SheBraidedMe
 * are built in separate branches at the same time and merged, so each owns one
 * section below. Put your rules directly under your own section's name line,
 * above its five spacer lines, and never edit another section or any spacer:
 * those lines keep each branch's changes far enough apart to merge cleanly.
 */

/* foundation */

/* The "More" fold in the account navigation (account/_nav). Beside the other
   links on a wider screen; folded away on a phone, where the row already scrolls
   sideways. Exactly one of the two copies is ever displayed. */
.lq-accountnav__wide { display: contents; }
.lq-accountnav__more { display: none; }

@media (max-width: 479.98px) {
    .lq-accountnav__wide { display: none; }
    .lq-accountnav__more { display: block; flex: 0 0 auto; }
    body:not(.admin-body):not(.stylist-body) .lq-accountnav__more > summary {
        display: flex; align-items: center; min-height: 46px; padding: 0 16px;
        list-style: none; cursor: pointer; white-space: nowrap;
        color: var(--ink-45); font-family: var(--sans); font-size: 0.78rem;
        font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    }
    .lq-accountnav__more > summary::-webkit-details-marker { display: none; }
    body:not(.admin-body):not(.stylist-body) .lq-accountnav__more[open] > summary { color: var(--ink); }
    .lq-accountnav__more > summary:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -2px; }
    .lq-accountnav__morelinks { display: flex; flex-direction: column; padding-bottom: 8px; }
}

/* hub */

/* Payment, care and reschedule panels reuse the confirmation page's lq-bank,
   lq-receipt and lq-formsection rules as they are - only the live note the
   reschedule picker writes into needs its own small treatment, so it reads as
   information rather than an error. */
#reschedule-note:not(:empty) {
    color: var(--ink-55);
    font-size: 0.92rem;
    margin: 0;
}

body:not(.admin-body):not(.stylist-body) #reschedule-go:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* hub spacer 1 of 5 - the booking hub's rules go above this line */
/* hub spacer 2 of 5 */
/* hub spacer 3 of 5 */
/* hub spacer 4 of 5 */
/* hub spacer 5 of 5 */

/* rebook */
/* The account bookings list wraps each row plus its own action strip in
   .lq-row-wrap now, so "Book this again" can sit outside the row's <a>
   (nesting an anchor inside one is invalid HTML). .lq-row-wrap takes over the
   background and the filter chips' [hidden] toggle that .lq-row used to carry
   on its own; .lq-row itself goes transparent so nothing double-paints. */
.lq-row-wrap { background: var(--surface); }
.lq-row-wrap[hidden] { display: none; }
.lq-row-wrap .lq-row { background: transparent; }
.lq-row-actions { padding: 0 18px 16px; }
.lq-row-actions .lq-btn { padding: 8px 16px; font-size: 0.78rem; }
/* rebook spacer 1 of 5 - "Book this again" rules go above this line */
/* rebook spacer 2 of 5 */
/* rebook spacer 3 of 5 */
/* rebook spacer 4 of 5 */
/* rebook spacer 5 of 5 */

/* styles */

/* Style history cards (account/styles) and the photo grid shared with the
   booking hub's own photos panel (account.bookings.partials.hub-photos). */
.lq-stylecard img,
.lq-photogrid__item img {
    display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
    border-radius: 10px; margin: 10px 0;
}

.lq-photogrid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px; margin: 12px 0;
}

.lq-photogrid__item form { margin-top: 6px; }

/* styles spacer 1 of 5 - style history and redo reminder rules go above this line */
/* styles spacer 2 of 5 */
/* styles spacer 3 of 5 */
/* styles spacer 4 of 5 */
/* styles spacer 5 of 5 */

/* loyalty-series */
/* Loyalty progress and the SheBraidedMe agreement, on the customer pages
   (lq-*) and the admin booking/dashboard screens (cn-*). */
.lq-loyalty__bar {
    height: 8px; border-radius: 999px; background: rgba(198, 166, 100, 0.16);
    overflow: hidden; margin: 10px 0 4px;
}
.lq-loyalty__fill { display: block; height: 100%; background: var(--gold, #c6a664); border-radius: inherit; }
.lq-consentlist--terms { margin: 0 0 18px; padding-left: 20px; }
.lq-consentlist--terms li { margin-bottom: 10px; line-height: 1.55; }
.lq-video-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px; padding: 12px 0; border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.lq-video-row:first-child { border-top: none; }
.cn-loyalty__progress { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
/* loyalty-series spacer 1 of 5 - loyalty and SheBraidedMe rules go above this line */
/* loyalty-series spacer 2 of 5 */
/* loyalty-series spacer 3 of 5 */
/* loyalty-series spacer 4 of 5 */
/* loyalty-series spacer 5 of 5 */