/* ===========================================================================
   BLVCK MILK — tattoo consultation
   ---------------------------------------------------------------------------
   Loaded only by tattoo-booking.php. Namespaced .tb- throughout; the
   storefront's own .btn, .shell, .eyebrow and .lede are reused rather than
   restated, so the form is unmistakably part of the site rather than a widget
   dropped into it.

   The seven fieldsets are all in the document and the script shows one. Every
   rule below therefore has to look right whether or not that script ran: with
   it off, this is one long form, and it still has to read as a form.
   =========================================================================== */

.page-tattoo-booking .tb-head {
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
    text-align: center;
}

.tb-head h1 {
    margin: 1rem 0 1.25rem;
}

.tb-head em {
    font-style: italic;
}

.tb-head .lede {
    margin-inline: auto;
    max-width: 52ch;
}

/* ---------------------------------------------------------------- stepper */
.tb-steps {
    padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.tb-steps ol {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(.4rem, 2vw, 1.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
    /* Seven steps do not fit a phone. Scrolling the rail beats stacking it into
       a column that pushes the form off the screen. */
    overflow-x: auto;
    scrollbar-width: none;
}

.tb-steps ol::-webkit-scrollbar {
    display: none;
}

.tb-steps__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    flex: 0 0 auto;
    position: relative;
    padding-inline: clamp(.2rem, 1vw, .6rem);
}

/* The connector. Drawn on the item rather than between them so it cannot end
   up orphaned on the last one. */
.tb-steps__item + .tb-steps__item::before {
    content: '';
    position: absolute;
    top: 1.05rem;
    right: calc(100% + .1rem);
    width: clamp(.6rem, 2.4vw, 2rem);
    height: 1px;
    background: var(--rule-strong);
}

.tb-steps__n {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--rule-strong);
    border-radius: 50%;
    font-family: var(--font-display);
    font-style: italic;
    font-size: .9rem;
    color: var(--ink-faint);
    background: var(--paper);
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.tb-steps__label {
    font-size: .58rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    white-space: nowrap;
    transition: color .3s var(--ease);
}

.tb-steps__item.is-on .tb-steps__n,
.tb-steps__item.is-done .tb-steps__n {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.tb-steps__item.is-on .tb-steps__label {
    color: var(--ink);
}

/* ------------------------------------------------------------------- card */
.tb-wrap {
    padding-bottom: clamp(3rem, 8vw, 6rem);
    max-width: 62rem;
}

.tb-card {
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--paper-raised);
    padding: clamp(1.5rem, 4vw, 3rem);
    margin: 0 0 1.25rem;
    /* A <fieldset> brings its own margin, padding and min-width:min-content —
       the last of which stops the grid inside it from ever shrinking. */
    min-width: 0;
}

.tb-card[hidden] {
    display: none;
}

.tb-card__kicker {
    display: block;
    font-size: .62rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 1rem;
}

.tb-card__title {
    /* A <legend> is not a normal block: the browser lifts it out of flow and
       cuts it into the fieldset's top border, which put the title across the
       card's edge and above the "Step 01" kicker that precedes it in the
       markup. Floating it puts it back in the flow, in source order. */
    float: left;
    width: 100%;
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.15;
    color: var(--ink);
    padding: 0;
    margin: 0 0 .75rem;
}

.tb-card__title em {
    font-style: italic;
    color: var(--ink-soft);
}

.tb-card__note {
    clear: both;
    margin: 0 0 2rem;
    font-size: .88rem;
    line-height: 1.7;
    color: var(--ink-faint);
    max-width: 60ch;
}

/* ------------------------------------------------------------------ fields */
.tb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
}

.tb-field {
    display: block;
    margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

.tb-field__label {
    display: block;
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: .7rem;
}

/* The question number, greyed so it orders without competing with the words. */
.tb-field__label i {
    font-style: normal;
    color: var(--ink-faint);
    margin-right: .5rem;
}

.tb-field input[type='text'],
.tb-field input[type='email'],
.tb-field input[type='tel'],
.tb-field input[type='date'],
.tb-field textarea {
    width: 100%;
    padding: .95rem 1.1rem;
    background: var(--paper-sunken);
    border: 1px solid var(--rule);
    border-radius: 2px;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: .95rem;
    transition: border-color .25s var(--ease);
}

.tb-field textarea {
    resize: vertical;
    min-height: 7rem;
    line-height: 1.7;
}

.tb-field input:focus,
.tb-field textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.tb-field input::placeholder,
.tb-field textarea::placeholder {
    color: var(--ink-faint);
}

/* The browser's own indicator sits on a dark ground, so it has to be lifted. */
.tb-field input[type='date']::-webkit-calendar-picker-indicator {
    filter: invert(.75);
    cursor: pointer;
}

/* Only after a submit attempt, so a field is never red before it has been
   touched — :invalid alone marks every required field on first paint. */
.tb-form.is-checked :invalid {
    border-color: var(--danger);
}

/* -------------------------------------------------------------- choices */
.tb-choice {
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.tb-choice__row {
    display: grid;
    gap: .6rem;
}

.tb-choice__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tb-choice__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 560px) {
    .tb-choice__row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
   A real radio, visually hidden but still focusable, with the label as the
   control. That keeps arrow-key navigation, the required attribute and the
   form's own validity all working — none of which a div with a click handler
   would have.
*/
.tb-opt {
    position: relative;
    display: block;
}

.tb-opt input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

.tb-opt span {
    display: block;
    padding: .95rem 1rem;
    text-align: center;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--paper-sunken);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}

.tb-opt input:hover + span {
    border-color: var(--rule-strong);
    color: var(--ink);
}

.tb-opt input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.tb-opt input:checked + span {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

/* --------------------------------------------------------------- uploads */
.tb-drop {
    display: grid;
    place-items: center;
    gap: .5rem;
    padding: clamp(1.75rem, 5vw, 3rem);
    border: 1px dashed var(--rule-strong);
    border-radius: 3px;
    background: var(--paper-sunken);
    cursor: pointer;
    text-align: center;
    transition: border-color .25s var(--ease), background .25s var(--ease);
}

.tb-drop:hover,
.tb-drop.is-over {
    border-color: var(--accent);
    background: var(--accent-wash);
}

/* The input covers the whole label, so the entire panel is the target and the
   keyboard still lands on a real file control. */
.tb-drop input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.tb-drop__mark {
    font-size: 1.4rem;
    color: var(--ink-soft);
    line-height: 1;
}

.tb-drop__text {
    font-size: .9rem;
    color: var(--ink);
}

.tb-drop__meta {
    font-size: .72rem;
    color: var(--ink-faint);
}

.tb-drop__list {
    list-style: none;
    margin: .9rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.tb-drop__list li {
    font-size: .72rem;
    color: var(--ink-soft);
    background: var(--paper-sunken);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: .35rem .8rem;
}

/* -------------------------------------------------------------- payment */
.tb-deposit {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--paper-sunken);
    margin-bottom: 1.5rem;
}

.tb-deposit__amount {
    margin: .6rem 0 .4rem;
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1;
    color: var(--ink);
}

.tb-deposit__terms {
    margin: 0;
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.tb-rates dl,
.tb-bank dl,
.tb-review dl {
    margin: .8rem 0 0;
    display: grid;
    gap: 0;
}

.tb-rates dl > div,
.tb-bank dl > div,
.tb-review dl > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--rule);
}

.tb-rates dt,
.tb-bank dt,
.tb-review dt {
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.tb-rates dd,
.tb-bank dd,
.tb-review dd {
    margin: 0;
    font-size: .9rem;
    color: var(--ink);
    text-align: right;
    /* An IBAN is long and has nowhere to break; letting it wrap beats letting
       it push the panel wider than the page. */
    overflow-wrap: anywhere;
}

.tb-bank {
    margin-top: 1.5rem;
}

.tb-note {
    margin: 1.25rem 0 0;
    padding: .9rem 1.1rem;
    border-left: 2px solid var(--accent);
    background: var(--paper-sunken);
    font-size: .84rem;
    line-height: 1.65;
    color: var(--ink-soft);
}

.tb-note strong {
    color: var(--ink);
}

/* --------------------------------------------------------------- review */
.tb-review h3 {
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 2rem 0 .25rem;
}

.tb-review h3:first-child {
    margin-top: 0;
}

/* ---------------------------------------------------------------- nav */
.tb-nav {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1.75rem;
}

.tb-nav__spacer {
    flex: 1;
}

.tb-nav .btn {
    cursor: pointer;
}

/* site.css sets .btn { display: inline-block }, and an author display rule
   beats the browser's own [hidden] { display: none } — so the script was
   setting .hidden on Back and Confirm and nothing was happening. The step
   cards needed the same treatment for the same reason. */
.tb-nav .btn[hidden] {
    display: none;
}

/* ---------------------------------------------------------------- errors */
.tb-errors {
    border: 1px solid var(--danger);
    border-left-width: 2px;
    border-radius: 3px;
    background: var(--paper-raised);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: .88rem;
    color: var(--ink-soft);
}

.tb-errors strong {
    display: block;
    color: var(--ink);
    margin-bottom: .5rem;
}

.tb-errors ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* ------------------------------------------------------------------ done */
.tb-done {
    max-width: 44rem;
}

@media (prefers-reduced-motion: reduce) {
    .tb-steps__n,
    .tb-steps__label,
    .tb-opt span,
    .tb-drop,
    .tb-field input,
    .tb-field textarea {
        transition: none;
    }
}