/* ==========================================================================
   Atelier — the customer's pages (docs/muzer-service/ui.md, stage 2).

   atelier.css holds the tokens and the shell; this file holds the pieces the
   customer's screens are built from: the discovery home, the barber tile, the
   barber page, booking, the bookings and one booking, profile and wallet,
   and the sign-in pages. Tokens only — a colour here is a token or a
   deliberate constant with a reason next to it.
   ========================================================================== */

/* ------------------------------------------------------------- utilities -- */

/* a chevron or arrow that points "forward": left in Persian, right in English */
[dir="ltr"] .icon-forward {
    display: inline-block;
    transform: scaleX(-1);
}

.num-latin {
    font-family: var(--font-latin);
}

/* ---------------------------------------------------------- section heads -- */

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-head-title {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 800;
    color: var(--brand-darker);
    margin: 0;
}

[data-bs-theme="dark"] .section-head-title {
    color: var(--ink);
}

.section-head-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--gold-ink);
    font-size: var(--fs-md);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.section-head-link:hover {
    color: var(--brand);
}

/* two links drawn as one small segmented control — map / list */
.seg-links {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
}

.seg-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
}

.seg-links a.is-active {
    background-color: var(--surface);
    color: var(--brand);
    box-shadow: var(--shadow-1);
}

/* -------------------------------------------------------------- search box -- */

.search-field {
    position: relative;
    display: flex;
    align-items: center;
}

.search-field > i {
    position: absolute;
    inset-inline-start: 1rem;
    color: var(--ink-faint);
    font-size: 1.1rem;
    pointer-events: none;
}

.search-field input {
    width: 100%;
    height: 54px;
    padding-inline: 2.9rem 3.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--surface);
    color: var(--ink);
    font-size: var(--fs-base);
    box-shadow: var(--shadow-1);
    outline: none;
}

.search-field input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.18);
}

.search-field-tool {
    position: absolute;
    inset-inline-end: 0.5rem;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* ------------------------------------------------------------- the home -- */

.home-discover {
    padding-block: 1.75rem 0.5rem;
    background:
        radial-gradient(60rem 18rem at 85% -4rem, rgba(var(--gold-rgb), 0.08), transparent 70%),
        var(--page);
}

.home-discover-head {
    margin-bottom: 1rem;
}

.home-discover-title {
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    font-weight: 800;
    color: var(--brand-darker);
    margin: 0;
}

[data-bs-theme="dark"] .home-discover-title {
    color: var(--ink);
}

.home-promo {
    padding: 1.35rem 1.35rem 1.25rem;
}

.home-promo-title {
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    font-weight: 800;
    margin: 0.35rem 0 0.4rem;
}

.home-promo-text {
    color: var(--deep-soft);
    font-size: var(--fs-md);
    line-height: 2;
    max-width: 38rem;
    margin-bottom: 1rem;
}

.home-section {
    padding-top: 2.25rem;
}

/* ---------------------------------------------------------------- the map -- */

.map-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    box-shadow: var(--shadow-1);
}

.map-box.is-home {
    height: 300px;
    border: 0;
    border-radius: 0;
}

.map-card-action {
    position: absolute;
    inset-block-end: 0.85rem;
    inset-inline-start: 50%;
    z-index: 500;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background-color: var(--surface);
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow-2);
    white-space: nowrap;
}

[dir="rtl"] .map-card-action {
    transform: translateX(50%);
}

/* the pin, redrawn: a navy drop with a champagne edge */
.landing-body .map-pin {
    background-color: var(--brand);
    color: var(--gold);
    border: 2px solid var(--gold);
}

[data-bs-theme="dark"] .landing-body .map-pin {
    background-color: var(--deep);
}

/* ------------------------------------------------------------ barber tile -- */

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: 1rem;
}

.barber-tile {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-areas:
        "photo body"
        "foot foot";
    gap: 0.85rem 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    box-shadow: var(--shadow-1);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.barber-tile:hover {
    border-color: var(--gold-line);
    box-shadow: var(--shadow-2);
}

.barber-tile-photo {
    grid-area: photo;
    position: relative;
    width: 96px;
    height: 112px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.barber-tile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.barber-tile-mono {
    font-size: 2rem;
    font-weight: 800;
    color: var(--brand);
}

.barber-tile-flag {
    position: absolute;
    inset-inline: 0.35rem;
    inset-block-end: 0.35rem;
    padding: 0.1rem 0.35rem;
    border-radius: 6px;
    background-color: rgba(var(--deep-rgb), 0.82);
    color: var(--deep-label);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-align: center;
}

.barber-tile-body {
    grid-area: body;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.barber-tile-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.barber-tile-name {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}

.barber-tile-name a {
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barber-tile-name a:hover {
    color: var(--brand);
}

.barber-tile-verified {
    color: var(--gold);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.rating-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background-color: var(--gold-soft);
    color: var(--gold-ink);
    font-size: var(--fs-sm);
    font-weight: 800;
    flex-shrink: 0;
}

.rating-chip i {
    font-size: 0.75rem;
}

.barber-tile-text {
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--fs-md);
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.barber-tile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.85rem;
    color: var(--ink-faint);
    font-size: var(--fs-sm);
}

.barber-tile-stats span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.barber-tile-stats b {
    color: var(--ink);
    font-weight: 700;
}

.barber-tile-foot {
    grid-area: foot;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line);
}

.barber-tile-fact {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.barber-tile-label {
    color: var(--ink-faint);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.barber-tile-value {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ink);
    font-size: var(--fs-md);
    font-weight: 800;
    white-space: nowrap;
}

.barber-tile-value i {
    color: var(--gold);
}

.barber-tile-value.is-muted {
    color: var(--ink-faint);
    font-weight: 600;
}

.barber-tile-value.is-price {
    font-size: var(--fs-base);
}

.barber-tile-cta {
    margin-inline-start: auto;
    min-height: 42px;
    padding-inline: 1rem;
    font-size: var(--fs-md);
}

@media (max-width: 575.98px) {
    .barber-tile-cta {
        width: 100%;
        margin-inline-start: 0;
    }
}

/* --------------------------------------------------------------- the work -- */

.work-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(13rem, 16rem);
    gap: 0.85rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.work-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--surface-2);
    scroll-snap-align: start;
    text-decoration: none;
    box-shadow: var(--shadow-1);
}

.work-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.work-card:hover img {
    transform: scale(1.04);
}

/* the wash keeps the white caption readable over any photo */
.work-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(var(--deep-rgb), 0.85) 0%, rgba(var(--deep-rgb), 0) 55%);
}

.work-card-tag {
    position: absolute;
    inset-block-start: 0.6rem;
    inset-inline-start: 0.6rem;
    z-index: 1;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background-color: rgba(var(--deep-rgb), 0.75);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.work-card-foot {
    position: absolute;
    inset-inline: 0.75rem;
    inset-block-end: 0.7rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: #fff;
}

.work-card-title {
    font-weight: 800;
    font-size: var(--fs-md);
}

.work-card-by {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--deep-eyebrow);
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* ----------------------------------------------------------- the gold note -- */

.gold-note-title {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 0.3rem;
    color: var(--brand-darker);
}

[data-bs-theme="dark"] .gold-note-title {
    color: var(--ink);
}

.gold-note p {
    color: var(--ink-muted);
    font-size: var(--fs-md);
    line-height: 2;
}

/* ------------------------------------------------------------ the list -- */

.list-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.list-bar-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-md);
}

/* a select drawn as one more chip in a chip row */
.landing-body .chip-select {
    width: auto;
    flex: 0 0 auto;
    min-height: 38px;
    padding-block: 0.3rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    font-weight: 600;
}

/* nothing to show: a quiet card, an icon, a sentence, maybe a way out */
.empty-card {
    padding: 2.5rem 1.5rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    color: var(--ink-muted);
    text-align: center;
}

.empty-card-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 0.85rem;
    border-radius: var(--radius-md);
    background-color: var(--surface-2);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.min-w-0 {
    min-width: 0;
}

/* a chip that only says something — a count beside the real chips */
.chip.is-static {
    cursor: default;
    box-shadow: none;
}

/* -------------------------------------------------------------- map page -- */

.map-stage {
    position: relative;
    height: calc(100vh - 70px);
    min-height: 32rem;
}

.map-box.is-stage {
    height: 100%;
    border: 0;
    border-radius: 0;
}

.map-overlay {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    z-index: 600;
    width: min(100%, 40rem);
    margin-inline: auto;
    padding: 1rem;
}

.map-overlay-note {
    margin-top: 0.4rem;
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-sm);
    background-color: var(--surface);
}

/* the picked barber's card, over the foot of the map */
.map-sheet {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 1rem;
    z-index: 650;
    width: min(calc(100% - 2rem), 34rem);
    margin-inline: auto;
    padding: 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    box-shadow: var(--shadow-2);
}

.map-sheet::before {
    content: "";
    position: absolute;
    inset-block-start: 0.45rem;
    inset-inline-start: 50%;
    width: 2.5rem;
    height: 4px;
    margin-inline-start: -1.25rem;
    border-radius: 99px;
    background-color: var(--line);
}

.map-sheet-close {
    position: absolute;
    inset-block-start: 0.6rem;
    inset-inline-end: 0.6rem;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
    color: var(--ink-muted);
}

.map-sheet-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-block: 0.5rem 1rem;
    padding-inline-end: 2.25rem;
}

.map-sheet-photo {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-sheet-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.map-sheet-name {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
}

.map-sheet-address {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    margin: 0.35rem 0 0;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
    line-height: 1.8;
}

/* a barber on the map — the map module's photo pin and label
   (map/base_map.css), redrawn: the photo a rounded square in the pin's
   champagne edge, the name a brand pill */
.landing-body .map-pin.is-photo {
    border-radius: 12px;
}

.landing-body .map-pin.is-photo img {
    border-radius: 0;
}

.landing-body .map-place .map-place-label {
    padding: 0.1rem 0.45rem;
    border: 0;
    background-color: var(--brand);
    color: var(--on-brand);
    font-weight: 700;
    box-shadow: var(--shadow-1);
}

@media (max-width: 991.98px) {
    .map-stage {
        height: calc(100vh - 70px - 4.75rem);
    }
}

/* Leaflet sets its own Helvetica; the labels on our maps are the page's
   text, and their digits follow the numerals setting */
.landing-body .leaflet-container {
    font-family: var(--font-text);
}

/* ------------------------------------------------------ the barber page -- */

.profile-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    box-shadow: var(--shadow-1);
}

.profile-card-photo {
    position: relative;
    width: 116px;
    height: 132px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-1);
}

.profile-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-card-body {
    align-self: center;
    min-width: 0;
}

.profile-card-name {
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 800;
    margin: 0 0 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--brand-darker);
}

[data-bs-theme="dark"] .profile-card-name {
    color: var(--ink);
}

.profile-card-text {
    color: var(--ink-muted);
    font-size: var(--fs-md);
    line-height: 1.9;
    margin: 0 0 0.35rem;
}

.profile-card-salons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 600;
}

.profile-card-salons i {
    color: var(--gold);
}

.profile-card-salons a {
    color: var(--brand);
    text-decoration: none;
}

.profile-card > .stat-trio,
.profile-card > .next-card,
.profile-card > .place-card {
    grid-column: 1 / -1;
}

/* three figures side by side, each on its own small card */
.stat-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}

.stat-trio-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--page);
    text-align: center;
}

.stat-trio-value {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink);
}

.stat-trio-value i {
    font-size: 0.95rem;
}

.stat-trio-label {
    color: var(--ink-faint);
    font-size: var(--fs-xs);
    font-weight: 600;
}

/* "the next free time" and "where": an icon, a line, an action */
.next-card,
.place-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--surface);
}

.next-card {
    background-color: var(--gold-soft);
    border-color: var(--gold-line);
}

.next-card-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background-color: color-mix(in srgb, var(--gold) 26%, var(--surface));
    color: var(--gold-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.next-card-icon.is-plain {
    background-color: var(--surface-2);
    color: var(--brand);
}

.next-card-when {
    display: block;
    margin-top: 0.1rem;
    font-size: 1.05rem;
    color: var(--ink);
}

.place-card-address {
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--fs-md);
    line-height: 1.8;
}

.next-card .btn,
.place-card .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .profile-card {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .profile-card-name,
    .profile-card-salons {
        justify-content: center;
    }

    .next-card,
    .place-card {
        width: 100%;
        flex-wrap: wrap;
        text-align: start;
    }
}

.profile-tabs {
    flex-wrap: nowrap;
}

/* the work as a grid of the same cards the home page scrolls */
.work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(46%, 12rem), 1fr));
    gap: 0.75rem;
}

/* a list of rows on one card: services, reviews, movements */
.list-group-title {
    font-size: var(--fs-base);
    font-weight: 800;
    color: var(--ink);
    margin: 1.25rem 0 0.6rem;
}

.line-list {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.line-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--line);
}

.line-item:last-child {
    border-bottom: 0;
}

.line-item-main {
    flex: 1 1 auto;
    min-width: 0;
}

.line-item-title {
    margin: 0 0 0.35rem;
    font-weight: 800;
    color: var(--ink);
}

.line-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.line-item-text {
    margin: 0.4rem 0 0;
    color: var(--ink-muted);
    font-size: var(--fs-md);
    line-height: 1.9;
}

.line-item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    flex-shrink: 0;
}

.line-item-price {
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background-color: var(--surface-2);
    color: var(--ink-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.review-reply {
    display: flex;
    gap: 0.4rem;
    margin: 0.6rem 0 0;
    padding: 0.6rem 0.75rem;
    border-inline-start: 3px solid var(--gold);
    border-radius: var(--radius-sm);
    background-color: var(--page);
    color: var(--ink-muted);
    font-size: var(--fs-md);
}

/* the way to book, at the foot of the screen — above the phone's tab bar */
.book-bar {
    position: sticky;
    inset-block-end: 0;
    z-index: 1020;
    padding-block: 0.75rem;
    background-color: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
}

.book-bar-note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--ok);
    font-size: var(--fs-sm);
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .book-bar {
        inset-block-end: calc(4.75rem + env(safe-area-inset-bottom));
    }
}

@media (max-width: 575.98px) {
    .book-bar-note {
        display: none;
    }

    .book-bar .btn {
        width: 100%;
    }
}

/* ------------------------------------------------------------- booking -- */

/* where a booking stands: choose, the barber confirms, pay */
.flow-steps {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.flow-steps li {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-bottom: 0.55rem;
    border-bottom: 3px solid var(--line);
    color: var(--ink-faint);
    font-size: var(--fs-sm);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
}

.flow-steps li span {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--surface-2);
    color: var(--ink-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
}

.flow-steps li.is-current,
.flow-steps li.is-done {
    border-color: var(--gold);
    color: var(--brand);
}

.flow-steps li.is-current span,
.flow-steps li.is-done span {
    background-color: var(--brand);
    color: var(--on-brand);
}

/* who the booking is with — a card linking to their page */
.with-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    box-shadow: var(--shadow-1);
    color: inherit;
    text-decoration: none;
}

.with-card:hover {
    border-color: var(--gold-line);
    color: inherit;
}

.with-card-photo {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.with-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.with-card-photo .barber-tile-mono {
    font-size: 1.5rem;
}

.with-card-name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1.05rem;
    color: var(--ink);
}

.with-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    margin-top: 0.3rem;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
    min-width: 0;
}

.book-step-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.75rem 0 0.85rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--brand-darker);
}

[data-bs-theme="dark"] .book-step-title {
    color: var(--ink);
}

.book-step-title i {
    color: var(--gold);
}

.book-step-aside {
    margin-inline-start: auto;
    color: var(--gold-ink);
    font-size: var(--fs-sm);
    font-weight: 700;
}

/* the services to choose from — one at a time, the chosen one edged in gold */
.pick-list {
    display: grid;
    gap: 0.6rem;
}

.pick-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pick-card:hover {
    border-color: var(--gold-line);
    color: inherit;
}

.pick-card.is-active {
    border-color: var(--gold);
    background-color: color-mix(in srgb, var(--gold) 5%, var(--surface));
    box-shadow: inset -4px 0 0 var(--gold), var(--shadow-1);
}

[dir="ltr"] .pick-card.is-active {
    box-shadow: inset 4px 0 0 var(--gold), var(--shadow-1);
}

.pick-card-check {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 0.1rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background-color: var(--surface);
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.pick-card.is-active .pick-card-check {
    border-color: var(--brand);
    background-color: var(--brand);
    color: var(--on-brand);
}

.pick-card-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.pick-card-main strong {
    font-size: var(--fs-base);
    color: var(--ink);
}

.pick-card-text {
    color: var(--ink-muted);
    font-size: var(--fs-sm);
    line-height: 1.8;
}

.pick-card-price {
    flex-shrink: 0;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
}

/* the days: a strip of small cards that scrolls sideways */
.date-strip {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    scrollbar-width: thin;
}

.date-cell {
    flex: 0 0 auto;
    width: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.6rem 0.25rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--surface);
    color: var(--ink-muted);
    text-decoration: none;
    text-align: center;
}

.date-cell:hover {
    border-color: var(--gold-line);
    color: var(--brand);
}

.date-cell-day {
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
}

.date-cell-num {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
}

.date-cell-month {
    font-size: var(--fs-xs);
    color: var(--ink-faint);
}

.date-cell.is-active {
    border-color: var(--brand);
    background-color: var(--brand);
    color: var(--on-brand);
    box-shadow: var(--shadow-cta);
}

.date-cell.is-active .date-cell-num,
.date-cell.is-active .date-cell-month {
    color: var(--on-brand);
}

/* the gold dash under the chosen day */
.date-cell.is-active::after {
    content: "";
    width: 16px;
    height: 3px;
    margin-top: 0.2rem;
    border-radius: 2px;
    background-color: var(--gold);
}

/* the free times, under their part of the day */
.shift-block + .shift-block {
    margin-top: 1rem;
}

.shift-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.shift-title i {
    color: var(--gold);
}

.time-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 0.5rem;
}

.time-chip {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

.time-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.time-chip span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.time-chip:hover span {
    border-color: var(--gold-line);
}

.time-chip input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.35);
}

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

.time-chip input:checked + span::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--gold);
}

/* an off-peak time: the barber's discount on the chip (roadmap 3.2) */
.time-chip.has-offer span {
    border-color: var(--gold-line);
}

.time-chip-offer {
    position: absolute;
    inset-block-start: -0.55rem;
    inset-inline-end: 0.3rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background-color: var(--gold-soft);
    color: var(--gold-ink);
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1.4;
    pointer-events: none;
}

.book-extra {
    margin-top: 1.25rem;
    padding: 0.85rem 1rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
    background-color: var(--surface);
}

.book-extra summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--brand);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.book-extra summary::-webkit-details-marker {
    display: none;
}

.book-aside {
    position: sticky;
    top: 5.5rem;
}

/* what is being asked for, and the one button that asks */
.summary-card {
    padding: 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    box-shadow: var(--shadow-2);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    color: var(--ink-muted);
    font-size: var(--fs-md);
}

.summary-row strong {
    color: var(--ink);
    text-align: end;
}

.summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.5rem 0 1rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--line);
    color: var(--ink-muted);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.summary-total strong {
    color: var(--brand-darker);
    font-size: 1.35rem;
    font-weight: 800;
}

[data-bs-theme="dark"] .summary-total strong {
    color: var(--ink);
}

/* ---------------------------------------------------------- my bookings -- */

.booking-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    gap: 0.85rem;
}

.booking-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    box-shadow: var(--shadow-1);
}

.booking-card-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.with-card-photo.is-sm {
    width: 48px;
    height: 48px;
    text-decoration: none;
}

.with-card-photo.is-sm .barber-tile-mono {
    font-size: 1.2rem;
}

.booking-card-title {
    display: block;
    font-weight: 800;
    color: var(--ink);
    text-decoration: none;
}

.booking-card-title:hover {
    color: var(--brand);
}

.booking-card-sub {
    display: block;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.booking-card-when {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.booking-card-when .meta-chip {
    font-size: var(--fs-sm);
    padding: 0.25rem 0.6rem;
    color: var(--ink);
}

.booking-card-note {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    background-color: var(--page);
    color: var(--ink-muted);
    font-size: var(--fs-sm);
    line-height: 1.8;
}

.booking-card-note.is-pay {
    background-color: var(--gold-soft);
    color: var(--warn);
    font-weight: 700;
}

.booking-card-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}

/* --------------------------------------------------------- one booking -- */

.ticket-card {
    position: relative;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    box-shadow: var(--shadow-1);
}

.ticket-top {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

.ticket-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-md);
    background-color: var(--page);
}

.ticket-code .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ticket-label {
    display: block;
    color: var(--ink-faint);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.ticket-code-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-darker);
    letter-spacing: 0.06em;
}

[data-bs-theme="dark"] .ticket-code-value {
    color: var(--ink);
}

.ticket-when {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 0.9rem;
}

.ticket-when strong {
    display: block;
    color: var(--ink);
}

.ticket-sub {
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

/* the dashed tear with a notch at each end, as on a paper ticket */
.ticket-tear {
    position: relative;
    height: 0;
    margin: 1.1rem -1.25rem;
    border-top: 2px dashed var(--line);
}

.ticket-tear::before,
.ticket-tear::after {
    content: "";
    position: absolute;
    top: -11px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--page);
    border: 1px solid var(--line);
}

.ticket-tear::before {
    inset-inline-start: -11px;
}

.ticket-tear::after {
    inset-inline-end: -11px;
}

.ticket-service strong {
    font-size: 1.05rem;
    color: var(--ink);
}

.ticket-note {
    display: flex;
    gap: 0.45rem;
    margin: 0.75rem 0 0;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    background-color: var(--page);
    color: var(--ink-muted);
    font-size: var(--fs-md);
}

.ticket-note.is-bad {
    background-color: var(--bad-soft);
    color: var(--bad);
}

.detail-aside {
    position: sticky;
    top: calc(var(--topbar-height) + 1rem);
}

.summary-row.is-good strong,
.summary-row.is-good span {
    color: var(--ok);
}

.summary-row.is-bad strong,
.summary-row.is-bad span {
    color: var(--bad);
}

.support-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--surface);
    color: var(--ink-muted);
    font-weight: 700;
    text-decoration: none;
}

.support-link:hover {
    color: var(--brand);
    border-color: var(--gold-line);
}

/* what can be done with a booking now */
.action-card {
    position: relative;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    box-shadow: var(--shadow-1);
}

.action-card.is-pay {
    border-color: var(--gold-line);
    box-shadow: var(--shadow-2);
}

.action-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 0.6rem;
    color: var(--ink);
}

.action-card-amount {
    margin-bottom: 1rem;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--brand-darker);
}

[data-bs-theme="dark"] .action-card-amount {
    color: var(--ink);
}

/* the site's promo code on the pay card (roadmap 3.2) */
.promo-box summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--brand);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.promo-box summary::-webkit-details-marker {
    display: none;
}

.promo-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--gold-line);
    border-radius: var(--radius-sm);
    background-color: var(--gold-soft);
    color: var(--gold-ink);
    font-weight: 700;
}

.choice-list {
    display: grid;
    gap: 0.4rem;
}

.choice-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.choice-row .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

.choice-row span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
}

.choice-row:has(input:checked) {
    border-color: var(--gold);
    background-color: color-mix(in srgb, var(--gold) 6%, var(--surface));
}

/* five stars to click: the inputs run 5 → 1 in the source and the row runs
   the other way, so "this star and every one before it" is a sibling rule */
.star-input {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 0.35rem;
}

.star-input input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.star-input label {
    font-size: 2rem;
    line-height: 1;
    color: var(--line);
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}

.star-input label:hover,
.star-input label:hover ~ label,
.star-input input:checked ~ label {
    color: var(--gold);
}

.star-input label:hover {
    transform: scale(1.1);
}

.star-input input:focus-visible + label {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
}

.refund-box {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    background-color: var(--page);
}

.refund-box-title {
    margin: 0 0 0.35rem;
    font-weight: 800;
    color: var(--ink);
}

.refund-box .summary-total {
    margin-bottom: 0.6rem;
}

/* a quiet red: a way out, not an alarm */
.btn-danger-soft {
    background-color: var(--bad-soft);
    border: 1px solid color-mix(in srgb, var(--bad) 25%, transparent);
    color: var(--bad);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: var(--radius-sm);
}

.btn-danger-soft:hover,
.btn-danger-soft:focus {
    background-color: var(--bad);
    border-color: var(--bad);
    color: #fff;
}

.action-card.is-done {
    text-align: center;
}

.done-mark {
    width: 56px;
    height: 56px;
    margin: 0.25rem auto 0.75rem;
    border-radius: var(--radius-md);
    background-color: var(--brand);
    color: var(--gold);
    border: 3px solid var(--gold-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.action-card.is-done .summary-total {
    text-align: start;
}

/* -------------------------------------------------------------- wallet -- */

.wallet-hero {
    padding: 1.35rem;
}

.wallet-hero-label {
    margin: 0.75rem 0 0.15rem;
    color: var(--deep-muted);
    font-size: var(--fs-md);
}

.wallet-hero-amount {
    font-size: clamp(1.8rem, 4vw, 2.3rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
}

.wallet-hero-rows {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.9rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.05);
}

.wallet-hero-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #c9d2e3;
    font-size: var(--fs-md);
}

.wallet-hero-row i {
    color: var(--deep-eyebrow);
}

.wallet-hero-row strong {
    margin-inline-start: auto;
    color: #fff;
}

.wallet-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.wallet-hero-actions .btn {
    min-height: 46px;
}

/* a quiet button on the navy card */
.btn-ink-ghost {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: var(--radius-sm);
}

.btn-ink-ghost:hover,
.btn-ink-ghost:focus {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.txn-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
    color: var(--ink-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.txn-icon.is-in {
    background-color: var(--gold-soft);
    color: var(--gold-ink);
}

.txn-amount {
    font-weight: 800;
    white-space: nowrap;
}

.txn-amount.is-in {
    color: var(--ok);
}

.txn-amount.is-out {
    color: var(--ink);
}

/* ------------------------------------------------------ profile & wallet -- */

.account-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    box-shadow: var(--shadow-1);
}

.account-card-photo {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--surface-2);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    border: 2px solid var(--gold-soft);
}

.account-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-card-name {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ink);
}

.account-card-phone {
    display: block;
    margin-top: 0.3rem;
    color: var(--ink-muted);
    font-size: var(--fs-md);
    letter-spacing: 0.04em;
}

/* the account's pages as one list — an icon, the page, a chevron */
.menu-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.menu-list a,
.menu-list button {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}

/* signing out is a POST (a form with its button), drawn like the other rows */
.menu-list button {
    width: 100%;
    border-width: 0 0 1px;
    border-style: solid;
    background: none;
    font: inherit;
    font-weight: 700;
    text-align: start;
    cursor: pointer;
}

.menu-list a:last-child,
.menu-list form:last-child button {
    border-bottom: 0;
}

.menu-list a:hover,
.menu-list button:hover {
    background-color: var(--page);
}

.menu-list a > i,
.menu-list button > i {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
    color: var(--gold-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.menu-list a > span,
.menu-list button > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.menu-list small {
    color: var(--ink-faint);
    font-size: var(--fs-sm);
    font-weight: 500;
}

/* the chevron at the end of every row */
.menu-list a::after,
.menu-list button::after {
    content: "\F284";
    font-family: bootstrap-icons;
    margin-inline-start: auto;
    color: var(--ink-faint);
    font-size: 0.8rem;
}

[dir="ltr"] .menu-list a::after,
[dir="ltr"] .menu-list button::after {
    content: "\F285";
}

.menu-list .is-danger,
.menu-list .is-danger > i {
    color: var(--bad);
}

.menu-list .is-danger > i {
    background-color: var(--bad-soft);
}

/* ---------------------------------------------------------- sign-in pages -- */

.landing-body .auth-hero {
    background: linear-gradient(160deg, var(--deep) 0%, var(--deep-end) 70%);
    color: var(--deep-text);
}

/* the template's wash was for its photograph; this panel has none */
.landing-body .auth-hero::after {
    background:
        radial-gradient(28rem 20rem at 85% 110%, rgba(197, 160, 89, 0.18), transparent 70%),
        radial-gradient(20rem 16rem at 0% 0%, rgba(197, 160, 89, 0.08), transparent 70%);
    pointer-events: none;
}

.auth-atelier {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2.5rem clamp(2rem, 4vw, 3.5rem);
}

.auth-atelier-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.auth-atelier-mark {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(233, 193, 118, 0.35);
    color: var(--deep-eyebrow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.auth-atelier-badge {
    position: absolute;
    inset-block-end: -6px;
    inset-inline-start: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #c5a059;
    color: #241a05;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
}

.auth-atelier-copy {
    margin-top: auto;
}

.auth-atelier-copy .eyebrow {
    color: var(--deep-eyebrow);
}

.auth-atelier-copy h2 {
    color: #fff;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 800;
    line-height: 1.6;
    margin: 0.4rem 0 0.6rem;
}

.auth-atelier-copy p {
    color: var(--deep-soft);
    line-height: 2;
    max-width: 30rem;
    margin: 0;
}

.auth-atelier-benefits {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.auth-atelier-benefits li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.04);
}

.auth-atelier-benefits li > span {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background-color: rgba(233, 193, 118, 0.16);
    color: var(--deep-eyebrow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.auth-atelier-benefits strong {
    display: block;
    color: #fff;
}

.auth-atelier-benefits small {
    color: var(--deep-muted);
    font-size: var(--fs-sm);
}

.auth-atelier-note {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: auto 0 0;
    color: #8f9bb3;
    font-size: var(--fs-sm);
}

/* the sign-in card, and the two ways in as a segmented control */
.landing-body .auth-panel .surface-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
}

.landing-body .auth-tabs {
    gap: 2px;
    padding: 4px;
    border-radius: var(--radius-md);
    background-color: var(--surface-2);
}

.landing-body .auth-tab {
    border-color: transparent;
    background-color: transparent;
}

.landing-body .auth-tab.active {
    background-color: var(--surface);
    border-color: var(--surface);
    color: var(--brand);
    box-shadow: var(--shadow-1);
}

/* a one-time code, written large and spaced like the design's boxes */
.landing-body input[name="activation_code"],
.landing-body input[name="code"] {
    height: 60px;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.6em;
    padding-inline-start: 0.6em;
    direction: ltr;
    font-variant-numeric: tabular-nums;
}

.landing-body .auth-panel .btn-brand {
    min-height: 48px;
}

/* the way back to the site, where the side panel is not drawn */
.landing-body .auth-panel-top {
    align-items: center;
    gap: 0.75rem;
}

.auth-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-inline-end: auto;
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
}

.auth-back > .bi {
    font-size: 1.15rem;
}

.auth-back-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--radius-sm);
    background-color: var(--brand);
    color: var(--gold);
}

.auth-back:hover {
    color: var(--gold-ink);
}

/* the code page: where it went, and a way back to fix the number (_17) */
.otp-sent {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--gold-line);
    border-radius: var(--radius-md);
    background-color: var(--gold-soft);
    color: var(--ink);
    font-size: var(--fs-md);
}

.otp-sent-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--gold-ink);
    font-size: 1.15rem;
}

.otp-sent p {
    flex: 1 1 auto;
    min-width: 0;
}

.otp-sent-to {
    font-weight: 800;
    letter-spacing: 0.04em;
}

.otp-sent-edit {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--ink);
    text-decoration: none;
}

.otp-sent-edit:hover {
    color: var(--gold-ink);
}

/* one box per digit (atelier.js, [data-otp-field]) — left to right, as the
   code reads, on a right-to-left page too */
.otp-boxes {
    display: flex;
    justify-content: center;
    gap: 0.55rem;
}

.otp-boxes[hidden] {
    display: none;
}

.landing-body .otp-box {
    width: 3.2rem;
    height: 3.7rem;
    padding: 0;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--surface);
    color: var(--ink);
    font-size: 1.7rem;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    caret-color: var(--gold-ink);
    box-shadow: var(--shadow-1);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.landing-body .otp-box:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.16);
}

.landing-body .otp-box.is-filled {
    border-color: var(--gold);
    background-color: var(--gold-soft);
}

.landing-body .otp-box.is-invalid {
    border-color: var(--bad);
}

@media (max-width: 400px) {
    .otp-boxes {
        gap: 0.4rem;
    }

    .landing-body .otp-box {
        width: 2.75rem;
        height: 3.25rem;
        font-size: 1.45rem;
    }
}

.resend-clock:not(:empty) {
    margin-inline-start: 0.35rem;
    font-variant-numeric: tabular-nums;
}

.auth-terms {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
    line-height: 1.8;
}

.auth-terms i {
    color: var(--gold-ink);
}

.auth-terms a {
    color: var(--brand);
    font-weight: 700;
}

/* a nameless account (opened by one-time code) is invited to add one */
.account-card-add {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--gold-ink);
    text-decoration: none;
}

/* a form or a single record that does not need the page's full width */
.form-narrow {
    max-width: 36rem;
}

/* ------------------------------------------------------------ the city -- */
/* The visitor's city (apps/city): a chip on the home page and in the
   header that opens the picker, and the picker itself — Divar's first
   screen: the city the browser is in, the popular ones, a search, every
   province's. */

.city-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 34px;
    padding: 0.25rem 0.75rem;
    margin-bottom: 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--gold-line);
    background-color: var(--gold-soft);
    color: var(--gold-ink);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
}

.city-chip .bi-chevron-down {
    font-size: 0.7em;
    opacity: 0.7;
}

.landing-header .nav-link.city-chip {
    margin-bottom: 0;
    padding: 0.25rem 0.75rem;
}

.city-picker {
    max-width: 46rem;
}

.city-picker-head {
    margin-bottom: 1.25rem;
    text-align: center;
}

.city-picker-title {
    font-size: clamp(1.4rem, 3.2vw, 2rem);
    font-weight: 800;
    color: var(--brand-darker);
    margin: 0.2rem 0 0.4rem;
}

[data-bs-theme="dark"] .city-picker-title {
    color: var(--ink);
}

.city-group {
    margin-top: 1.5rem;
}

.city-group-title {
    font-size: var(--fs-base);
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 0.75rem;
}

.city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.5rem;
}

.city-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background-color: var(--surface);
    color: var(--ink);
    font-weight: 600;
    text-align: start;
}

.city-option:hover,
.city-option:focus-visible {
    border-color: var(--gold);
    color: var(--brand);
}

.city-option.is-current {
    border-color: var(--gold);
    background-color: var(--gold-soft);
    color: var(--gold-ink);
}

.city-option .bi {
    color: var(--gold-ink);
}

.city-province {
    border-bottom: 1px solid var(--line);
    padding-block: 0.25rem;
}

.city-province > summary {
    padding: 0.6rem 0.25rem;
    font-weight: 700;
    cursor: pointer;
    list-style-position: inside;
}

.city-province[open] > .city-grid {
    padding-bottom: 0.75rem;
}

/* ------------------------------------------------ the UX review round ---- */
/* docs/muzer-service/ux_review_fa.md (2026-09-30). Shared by the customer's pages
   and the desk (desk.css reuses these): a reason in one tap, a destructive
   step that opens before it acts, "running late", a note under the wallet's
   button, a picture that failed to load. */

.reason-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.reason-chips legend {
    float: none;
    width: 100%;
    margin-bottom: 0.4rem;
}

.reason-chip {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.reason-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.reason-chip span {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background-color: var(--surface);
    color: var(--ink);
    font-size: var(--fs-md);
    font-weight: 600;
}

.reason-chip:hover span {
    border-color: var(--gold-line);
}

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

.reason-chip input:focus-visible + span {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.decline-box > summary {
    list-style: none;
    cursor: pointer;
}

.decline-box > summary::-webkit-details-marker {
    display: none;
}

.decline-box[open] > summary {
    opacity: 0.75;
}

.late-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
}

.late-picker .btn {
    min-height: 44px;
    padding-inline: 0.25rem;
    font-weight: 700;
}

.late-picker .btn.is-active {
    border-color: var(--gold);
    background-color: var(--gold-soft);
    color: var(--gold-ink);
}

.ticket-note.is-warn {
    background-color: var(--warn-soft);
    color: var(--warn);
}

.ticket-note.is-good {
    background-color: var(--ok-soft);
    color: var(--ok);
}

.wallet-hero-note {
    margin: 0.75rem 0 0;
    font-size: var(--fs-sm);
    opacity: 0.85;
}

/* a picture whose file is missing: a quiet frame, not its alt text spilling
   over the card (atelier.js marks it) */
.img-broken-frame {
    position: relative;
    background-color: var(--surface-2, var(--page));
}

.img-broken-frame::after {
    content: "\F42A";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-faint);
    font-family: "bootstrap-icons";
    font-size: 1.75rem;
    pointer-events: none;
}

img.is-broken {
    visibility: hidden;
}

/* The page's one action within the thumb's reach on a phone: a bar that
   rides above the tab bar until its place at the end of the page — the
   desk's "accept" on a request, the customer's "send" on the booking page
   and "pay" on an approved booking. Wide screens keep the side column. */
.sticky-actions {
    display: none;
}

@media (max-width: 1199.98px) {
    .sticky-actions {
        position: sticky;
        inset-block-end: calc(0.75rem + env(safe-area-inset-bottom));
        z-index: 1020;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-block: 1rem 0;
        padding: 0.6rem;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background-color: color-mix(in srgb, var(--surface) 94%, transparent);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow: var(--shadow-2);
    }

    .sticky-actions > form {
        flex: 1 1 auto;
        margin: 0;
    }

    .sticky-actions .btn {
        min-height: 48px;
        white-space: nowrap;
    }

    .sticky-actions-summary {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-width: 0;
        line-height: 1.35;
    }

    .sticky-actions-summary strong {
        color: var(--ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sticky-actions-summary span {
        color: var(--ink-muted);
        font-size: var(--fs-sm);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 991.98px) {
    body:has(.app-tabbar) .sticky-actions {
        inset-block-end: calc(5.25rem + env(safe-area-inset-bottom));
    }
}

/* the booking page: one service, a radio's look; the steps take focus as
   the page moves on (atelier.js), so they say where it is */
.pick-card.is-radio .pick-card-check {
    border-radius: 50%;
}

.pick-card.is-radio.is-active .pick-card-check {
    border-color: var(--brand);
    background-color: var(--surface);
    box-shadow: inset 0 0 0 5px var(--brand);
}

.book-step-title:focus {
    outline: none;
}

.book-step-title:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
    border-radius: 4px;
}

.book-times {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.book-times legend {
    float: none;
    width: 100%;
}

[data-book-page][aria-busy="true"] .pick-list,
[data-book-page][aria-busy="true"] .date-strip,
[data-book-page][aria-busy="true"] .book-times {
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.response-line {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.3rem;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.response-line i {
    color: var(--gold-ink);
}

.response-line.is-instant {
    color: var(--ok);
}

.response-line.is-instant i {
    color: var(--ok);
}

.barber-tile-stats .is-instant,
.barber-tile-stats .is-instant i {
    color: var(--ok);
    font-weight: 700;
}

/* the barber's off-peak discount (roadmap 3.2) */
.response-line.is-offer,
.response-line.is-offer i,
.barber-tile-stats .is-offer,
.barber-tile-stats .is-offer i {
    color: var(--gold-ink);
    font-weight: 700;
}

/* ------------------------------------------- the app, its notifications ---- */

/* apps/pwa: the desk home's card (pwa/desk/app_card.html), both apps' pages
   (pwa/components/app_panels.html) and the customer's push offer
   (pwa/site/push_offer.html). app.js only toggles `hidden` / `data-state`;
   everything it can show is styled here, in tokens, so each side wears its
   own palette. */
.app-card {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.app-card-icon,
.app-hero-icon {
    flex: none;
    border-radius: 22%;
    box-shadow: var(--shadow-1);
}

.app-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.app-card-title {
    margin: 0 0 0.25rem;
    font-size: var(--fs-base);
    font-weight: 800;
}

.app-card-text {
    margin: 0 0 0.35rem;
    color: var(--ink-muted);
    font-size: var(--fs-md);
    line-height: 1.9;
}

.app-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.app-card-actions .btn i,
.push-row .btn i,
.app-hero ~ div .btn i {
    margin-inline-end: 0.35rem;
}

.app-card-later {
    color: var(--ink-muted);
    text-decoration: none;
}

.app-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.app-steps {
    display: grid;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: app-step;
}

.app-steps li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--surface-2);
    counter-increment: app-step;
}

.app-steps li::before {
    content: counter(app-step);
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: var(--gold-soft);
    color: var(--gold-ink);
    font-size: var(--fs-sm);
    font-weight: 800;
    line-height: 1.6rem;
    text-align: center;
}

.app-steps li i {
    color: var(--gold-ink);
    font-size: 1.15rem;
}

.app-android {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
}

.app-android > i {
    color: var(--ok);
    font-size: 1.3rem;
}

.push-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.push-dot {
    flex: none;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background-color: var(--ink-faint);
}

.push-dot.is-on {
    background-color: var(--ok);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent);
}

.push-feedback {
    min-height: 1.5rem;
    margin-top: 0.5rem;
    font-size: var(--fs-md);
}

.push-category {
    cursor: pointer;
}

.push-category-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.push-category-label > i {
    margin-top: 0.2rem;
    color: var(--gold-ink);
    font-size: 1.15rem;
}

.device-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.device-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--surface-2);
}

.device-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius-sm);
    background-color: var(--gold-soft);
    color: var(--gold-ink);
    font-size: 1.15rem;
}

.device-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.device-name {
    font-weight: 700;
}

.device-meta {
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

.app-tips {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding-inline-start: 1.2rem;
    color: var(--ink-muted);
    font-size: var(--fs-md);
    line-height: 1.9;
}

/* the customer's push offer, under "waiting for the barber" */
.push-offer-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border: 1px dashed var(--gold-line);
    border-radius: var(--radius-md);
    background-color: var(--gold-soft);
    color: var(--ink);
    font-size: var(--fs-md);
    font-weight: 600;
}

.push-offer-row > i {
    color: var(--gold-ink);
    font-size: 1.1rem;
}

.push-offer-row .btn {
    min-height: 40px;
    white-space: nowrap;
}

.push-offer-row.is-on {
    border-style: solid;
    border-color: var(--ok);
    background-color: var(--ok-soft);
}

.push-offer-row.is-on > i {
    color: var(--ok);
}

.push-offer-row.is-muted {
    border-color: var(--line);
    background-color: transparent;
    color: var(--ink-muted);
}

/* ------------------------------------------ the customer's barbers (3.7) -- */

/* saved, or been to: a flag over the barber's card on "my barbers" */
.my-barber-flag {
    position: absolute;
    inset-block-start: 0.6rem;
    inset-inline-start: 0.6rem;
    z-index: 2;
}

.favorite-toggle.is-saved,
.favorite-toggle.is-saved i {
    color: var(--gold-ink);
}

/* the desk's page link and its QR code (3.7) */
.share-qr {
    display: block;
    width: min(240px, 100%);
    height: auto;
    margin-inline: auto;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background-color: #ffffff;
}

.share-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    font-weight: 700;
    overflow-wrap: anywhere;
}