/* ==========================================================================
   Nivua Agenda — base compartilhada
   --------------------------------------------------------------------------
   Este arquivo define a marca e os componentes que aparecem em toda parte:
   site de produto, vitrine da profissional e painel. O site tem os blocos dele
   em landing.css, que carrega depois deste.

   Três públicos, um sistema:

     - Quem está avaliando a Nivua para assinar. Vê a raiz do site uma vez e
       decide em quinze segundos se aquilo parece coisa séria.
     - A cliente da profissional. Vem do link da bio no celular, quer marcar
       um horário e ir embora.
     - A profissional. Abre o painel todo dia, com pressa, entre atendimentos.

   A cor de destaque (--accent) vem do banco por profissional; a cor de marca
   (--brand-*) é da Nivua e não muda. É a diferença entre a página dela e o
   produto.
   ========================================================================== */

/* ==========================================================================
   1. Fichas de design
   ========================================================================== */

:root {
    /* --- Marca ---------------------------------------------------------
       Toda a escala sai do roxo da logo (--brand-500, #A792CA) e do salmão
       que acompanha o símbolo. Os tons foram gerados misturando com branco e
       com o tom de tinta, e conferidos um a um contra branco.

       O detalhe que manda aqui: o roxo da logo tem contraste 2,76 sobre
       branco. É bonito e é insuficiente — texto branco em cima dele fica
       ilegível para muita gente, e reprova em qualquer checagem de
       acessibilidade. Por isso ele fica no decorativo (fundos suaves, bordas,
       gradientes) e quem assume botão e texto é o --brand-700, com 4,53.

       Marca e cor de interface não precisam ser o mesmo tom. Precisam ser da
       mesma família. */
    --brand-50:   #F9F8FB;
    --brand-100:  #F2EFF7;
    --brand-200:  #E4DEEF;
    --brand-300:  #CDC1E1;
    --brand-400:  #B8A7D4;
    --brand-500:  #A792CA;   /* o roxo da logo */
    --brand-600:  #9481B3;   /* 3,45 — só botão grande */
    --brand-700:  #7F6E99;   /* 4,53 — texto e botão */
    --brand-800:  #625476;   /* 6,82 */
    --brand-900:  #463A52;   /* 10,48 */

    /* --- Salmão da logo -------------------------------------------------
       O círculo de confirmação do símbolo. Entra como segunda cor em
       gradiente e destaque; nunca sozinho atrás de texto, porque tem
       contraste 1,68 sobre branco. */
    --warm-100:   #FBF1F0;
    --warm-300:   #EABDB9;   /* o salmão da logo */
    --warm-600:   #BE918D;
    --warm-700:   #A97C77;

    /* --- Neutros -------------------------------------------------------
       Puxados para o quente, não para o cinza puro. Cinza neutro sobre
       fundo creme parece sujo; estes têm o mesmo fundo de vermelho do
       creme e assentam junto. */
    --ink:        #241C29;
    --ink-2:      #4A404F;
    --ink-3:      #6E6474;
    --ink-4:      #968C9B;
    --ink-5:      #BDB4C0;

    --paper:      #FFFFFF;
    --paper-2:    #FDFBFC;
    --sand:       #F7F3F5;
    --sand-2:     #EFE9ED;

    --line:       #EAE3E8;
    --line-2:     #DCD3DA;
    --line-3:     #C7BCC6;

    /* --- Semânticas ---------------------------------------------------- */
    --ok:         #2F6B4F;
    --ok-bg:      #E9F3EE;
    --ok-line:    #BFDCCC;

    --warn:       #8A5A20;
    --warn-bg:    #FBF2E5;
    --warn-line:  #EBD5B0;

    --danger:     #963F38;
    --danger-bg:  #FAECEA;
    --danger-line:#EFC9C4;

    /* Cor de destaque padrão. Cada profissional sobrescreve a dela.
       Aponta para o tom legível, não para o da logo: é esta variável que
       pinta botão com texto branco em cima. */
    --accent:      var(--brand-700);
    --accent-soft: var(--brand-100);
    --accent-line: var(--brand-200);
    --accent-deep: var(--brand-800);

    /* A segunda cor da profissional, e a cor do texto que fica por cima da
       primeira. A tinta não é escolha de ninguém: partials/accent.php mede o
       contraste e decide, porque branco sobre dourado é ilegível — e quem
       paga por isso é a cliente que não consegue ler o horário. Aqui ficam só
       os valores de quem não tem profissional: o site do produto. */
    --accent-2:      var(--accent);
    --accent-2-deep: var(--accent-deep);
    --accent-2-soft: var(--accent-soft);
    --accent-ink:    #fff;
    --accent-2-ink:  #fff;

    /* --- Tipografia -----------------------------------------------------
       Sem fonte de terceiro: uma requisição a mais para um servidor externo
       é uma coisa a mais para cair, e a hospedagem é compartilhada. O peso
       visual vem da escala e do espaçamento, que é onde a maioria das
       interfaces amadoras erra — não da fonte. */
    --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
    --serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype",
             "Times New Roman", serif;
    --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Fluida: cresce com a tela sem precisar de ponto de quebra. */
    --text-xs:   .75rem;
    --text-sm:   .875rem;
    --text-base: 1rem;
    --text-md:   1.0625rem;
    --text-lg:   clamp(1.125rem, 1.05rem + .35vw, 1.3rem);
    --text-xl:   clamp(1.35rem, 1.2rem + .7vw, 1.7rem);
    --text-2xl:  clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem);
    --text-3xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);

    /* --- Espaço --------------------------------------------------------- */
    --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
    --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4.5rem;
    --sp-9: 6.5rem;

    /* --- Formas --------------------------------------------------------- */
    --r-sm:   10px;
    --r-md:   14px;
    --r-lg:   20px;
    --r-xl:   28px;
    --r-pill: 999px;

    /* --- Profundidade ---------------------------------------------------
       Em camadas, com a sombra colorida em vez de preta. Sombra preta sobre
       fundo quente cria uma auréola cinza; esta some no papel. */
    --shadow-sm: 0 1px 2px rgba(43, 30, 54, .06);
    --shadow:    0 1px 2px rgba(43, 30, 54, .05),
                 0 6px 16px -8px rgba(43, 30, 54, .14);
    --shadow-md: 0 2px 4px rgba(43, 30, 54, .05),
                 0 12px 28px -12px rgba(43, 30, 54, .20);
    --shadow-lg: 0 4px 8px rgba(43, 30, 54, .05),
                 0 24px 56px -20px rgba(43, 30, 54, .26);

    --ring: 0 0 0 3px var(--accent-soft);

    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* O menu fixo do site não pode cobrir o título da seção quando um link
       de âncora salta para ela. */
    scroll-padding-top: 5rem;
}

/* A rolagem animada é boa no site do produto, onde a pessoa clica em "Ver
   preços" e o movimento mostra que ela continua na mesma página.
   Na vitrine ela mente: cada passo do agendamento é uma página nova, e o
   link do serviço termina em #horario para a agenda abrir junto do dedo.
   Com a animação ligada, esse salto vira uma rolagem visível a cada toque —
   e o que a cliente sente é a página "se mexendo sozinha". Sem ela, a página
   simplesmente já abre no lugar certo. */
.no-smooth { scroll-behavior: auto; }

body {
    margin: 0;
    background: var(--sand);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--text-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-800); }

h1, h2, h3, h4 {
    margin: 0 0 var(--sp-2);
    line-height: 1.18;
    font-weight: 600;
    letter-spacing: -.015em;
    text-wrap: balance;   /* evita a última linha do título sozinha */
}

h1 { font-family: var(--serif); font-size: var(--text-2xl); letter-spacing: -.022em; }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-md); }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 5px;
}

::selection { background: var(--brand-200); color: var(--brand-900); }

hr { border: 0; height: 1px; background: var(--line); margin: var(--sp-5) 0; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   3. Marca
   ========================================================================== */

/* A altura manda, e a largura acompanha: assim a logo ocupa sempre a mesma
   faixa vertical do cabeçalho, seja qual for o arquivo servido. */
.logo {
    height: 2.2rem;
    width: auto;
    display: block;
}

.logo--lg { height: 3.4rem; }

.logo-mark {
    height: 2rem;
    width: 2rem;
    flex: none;
    display: block;
}

@media (max-width: 26rem) {
    .logo { height: 1.9rem; }
}

/* ==========================================================================
   4. Estrutura
   ========================================================================== */

.shell {
    max-width: 34rem;
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-4) var(--sp-8);
}

.shell--wide { max-width: 62rem; }

.stack > * + * { margin-top: var(--gap, var(--sp-4)); }
.stack--tight  { --gap: var(--sp-2); }
.stack--loose  { --gap: var(--sp-6); }

.row { display: flex; gap: var(--sp-3); align-items: center; }
.row--between { justify-content: space-between; }
.row--wrap    { flex-wrap: wrap; }
.row--top     { align-items: flex-start; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 30rem) { .grid-2 { grid-template-columns: 1fr; } }

.muted  { color: var(--ink-3); }
.faint  { color: var(--ink-4); }
.small  { font-size: var(--text-sm); }
.tiny   { font-size: var(--text-xs); }
.strong { font-weight: 600; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt-0   { margin-top: 0; }
.mb-0   { margin-bottom: 0; }

/* Números que mudam (horas, preços, contadores) com largura fixa por dígito:
   sem isso a linha "pula" quando o valor muda. */
.tabular { font-variant-numeric: tabular-nums; }

.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
}

.card--flat  { box-shadow: none; }
.card--raised{ box-shadow: var(--shadow-md); border-color: transparent; }
.card--tight { padding: var(--sp-4); }

.divider { height: 1px; background: var(--line); border: 0; margin: var(--sp-5) 0; }

/* ==========================================================================
   5. Botões
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center; justify-content: center;
    gap: .45rem;
    padding: .78rem 1.35rem;
    min-height: 46px;            /* alvo confortável para o dedo com pressa */
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--accent-ink);
    font: 600 var(--text-sm)/1 var(--sans);
    letter-spacing: .005em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: transform .16s var(--ease), box-shadow .16s var(--ease),
                background .16s var(--ease), border-color .16s var(--ease);
}

.btn:hover  { color: var(--accent-ink); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn--lg    { padding: 1rem 1.75rem; min-height: 54px; font-size: var(--text-base); }
.btn--small { padding: .48rem .9rem;  min-height: 36px; font-size: var(--text-xs); border-radius: var(--r-sm); }
.btn--block { display: flex; width: 100%; }

.btn--ghost {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--line-2);
}
.btn--ghost:hover { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); }

.btn--quiet {
    background: none;
    color: var(--ink-3);
    border-color: transparent;
    box-shadow: none;
    padding-inline: .7rem;
}
.btn--quiet:hover { color: var(--accent-deep); background: var(--accent-soft); box-shadow: none; transform: none; }

.btn--danger { background: var(--danger); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ==========================================================================
   6. Formulários
   ========================================================================== */

.field { display: block; margin-bottom: var(--sp-4); }

.field__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: .38rem;
    color: var(--ink-2);
}

.field__hint {
    display: block;
    font-size: var(--text-xs);
    color: var(--ink-4);
    margin-top: .35rem;
    line-height: 1.5;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="date"], input[type="time"], input[type="number"], input[type="url"],
select, textarea {
    width: 100%;
    padding: .72rem .85rem;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--paper);
    color: var(--ink);
    /* 16px exatos: abaixo disso o Safari do iPhone dá zoom ao focar e a
       página inteira salta. */
    font: 16px/1.4 var(--sans);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

textarea { min-height: 5.5rem; resize: vertical; }

input::placeholder, textarea::placeholder { color: var(--ink-5); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
}

input[type="color"] {
    width: 3.2rem; height: 2.75rem; padding: 3px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--paper);
    cursor: pointer;
}

.check {
    display: flex; gap: .6rem; align-items: flex-start;
    font-size: var(--text-sm);
    cursor: pointer;
    color: var(--ink-2);
}

.check input {
    margin: .2rem 0 0;
    width: 1.1rem; height: 1.1rem;
    accent-color: var(--accent);
    flex: none;
}


/* Escolha de cor com o nome do que ela faz ao lado. O campo de cor sozinho,
   sem rótulo, não diz onde a cor vai parar — e com duas na tela, adivinhar
   qual é qual passa a ser trabalho da profissional. */
.swatch {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    cursor: pointer;
}

.swatch input[type="color"] {
    flex: none;
    width: 2.6rem; height: 2.6rem;
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: none;
    cursor: pointer;
}

/* O Chrome desenha uma moldura própria dentro do campo; sem tirá-la, a
   amostra fica menor que o quadrado e as duas parecem de tamanhos
   diferentes. */
.swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.swatch input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 6px; }
.swatch input[type="color"]::-moz-color-swatch { border: 0; border-radius: 6px; }

.swatch > span { display: block; min-width: 0; }
.swatch strong { display: block; font-size: var(--text-sm); }
.swatch .tiny  { display: block; margin-top: .1rem; line-height: 1.35; }

/* ==========================================================================
   7. Avisos e etiquetas
   ========================================================================== */

.flash {
    padding: .85rem 1.05rem;
    border-radius: var(--r-md);
    border: 1px solid;
    font-size: var(--text-sm);
    margin-bottom: var(--sp-4);
    line-height: 1.5;
}

.flash--success { background: var(--ok-bg);     border-color: var(--ok-line);     color: var(--ok); }
.flash--error   { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.flash--info    { background: var(--warn-bg);   border-color: var(--warn-line);   color: var(--warn); }

.tag {
    display: inline-flex; align-items: center;
    padding: .2rem .6rem;
    border-radius: var(--r-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    border: 1px solid;
    white-space: nowrap;
}

.tag--confirmed { background: var(--ok-bg);     border-color: var(--ok-line);     color: var(--ok); }
.tag--cancelled { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.tag--no_show   { background: var(--warn-bg);   border-color: var(--warn-line);   color: var(--warn); }
.tag--done      { background: var(--sand-2);    border-color: var(--line-2);      color: var(--ink-3); }
.tag--off       { background: var(--sand-2);    border-color: var(--line-2);      color: var(--ink-4); }
.tag--brand     { background: var(--brand-100); border-color: var(--brand-200);   color: var(--brand-700); }

.empty {
    text-align: center;
    padding: var(--sp-7) var(--sp-4);
    color: var(--ink-4);
    background: var(--paper);
    border-radius: var(--r-lg);
    border: 1px dashed var(--line-2);
}

.empty h3 { color: var(--ink-2); margin-bottom: .3rem; }
.empty p  { margin-bottom: var(--sp-4); }

/* ==========================================================================
   8. Vitrine da profissional
   ========================================================================== */

/* --- Quem atende ----------------------------------------------------------
   A cliente chega do link da bio e a primeira coisa que faz é conferir se
   caiu no lugar certo. Antes, o nome e a foto eram um bloco pequeno no canto
   direito e o título dizia "Agende seu horário" — a página abria parecendo um
   formulário, e a marca da profissional ficava do tamanho de uma legenda.

   Agora é uma capa: faixa colorida sangrando até as bordas, retrato redondo
   montado sobre ela e o nome em serifa. A cor da faixa é a --accent dela, o
   que faz a mesma página parecer de dono diferente para cada profissional
   sem uma linha de CSS por cliente.

   O padding negativo cancela a margem do .shell para o fundo ir de ponta a
   ponta no celular. */

.cover {
    position: relative;
    margin: calc(var(--sp-5) * -1) calc(var(--sp-4) * -1) var(--sp-5);
    padding: 0 var(--sp-4) var(--sp-5);
    text-align: center;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(var(--paper), var(--sand));
}

/* A faixa é um elemento próprio, e não o fundo do cabeçalho, porque o retrato
   precisa montar por cima dela: metade na cor, metade no papel. */
.cover__band {
    height: 7.5rem;
    margin: 0 calc(var(--sp-4) * -1);
    background:
        radial-gradient(90% 130% at 20% 0%, rgba(255, 255, 255, .38), transparent 60%),
        linear-gradient(115deg, var(--accent), var(--accent-2));
}

.cover__photo {
    width: 104px; height: 104px;
    margin: -3.25rem auto var(--sp-3);
    position: relative;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--paper);
    box-shadow: var(--shadow-md);
    background: var(--accent-soft);
}

.cover__photo--letter {
    display: grid; place-items: center;
    font-family: var(--serif);
    font-size: 2.6rem;
    line-height: 1;
    color: var(--accent-deep);
    background: var(--accent-soft);
}

.cover__eyebrow {
    margin: 0 0 .15rem;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
}

.cover__name {
    font-family: var(--serif);
    font-size: var(--text-2xl);
    margin: 0;
    letter-spacing: -.022em;
}

.cover__headline {
    margin: .3rem auto 0;
    max-width: 26rem;
    color: var(--ink-3);
    font-size: var(--text-sm);
}

/* Endereço e Instagram, quando existem. Numa linha só e discretos: são a
   confirmação de que é a pessoa certa, não o assunto da página. */
.cover__facts {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .35rem .75rem;
    list-style: none;
    margin: var(--sp-3) 0 0;
    padding: 0;
}

.fact {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: var(--text-xs);
    color: var(--ink-4);
}

.fact svg { width: .9rem; height: .9rem; flex: none; color: var(--accent); }
.fact a   { color: var(--ink-3); text-decoration: none; }
.fact a:hover { color: var(--accent-deep); text-decoration: underline; }

/* Na tela larga a capa não encosta em borda nenhuma, então ela vira um
   cartão: sem os cantos arredondados, a faixa de cor fica pendurada no topo
   da janela como um banner de anúncio. */
@media (min-width: 36rem) {
    .cover {
        margin-top: 0;
        border: 1px solid var(--line);
        border-radius: var(--r-xl);
        overflow: hidden;
    }
}

@media (max-width: 24rem) {
    .cover__band  { height: 6rem; }
    .cover__photo { width: 84px; height: 84px; margin-top: -2.6rem; }
    .cover__photo--letter { font-size: 2.1rem; }
}

/* --- Título do passo ------------------------------------------------------ */

.step-title {
    font-family: var(--serif);
    font-size: var(--text-lg);
    margin: var(--sp-5) 0 .7rem;
    letter-spacing: -.015em;
}

/* --- Trilha de passos -----------------------------------------------------
   Bolinha com ícone, ligada por uma linha. O passo cumprido vira um visto: a
   cliente vê o que já resolveu, e não só onde está. */

.track {
    display: flex;
    margin: 0 0 var(--sp-5);
    padding: 0;
    list-style: none;
    counter-reset: track;
}

.track__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    position: relative;
    color: var(--ink-4);
    font-size: var(--text-xs);
    text-align: center;
}

/* A linha nasce da bolinha e vai até a próxima, sem passar por baixo dela. */
.track__item::before {
    content: '';
    position: absolute;
    top: 1rem;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--line);
}

.track__item:first-child::before { display: none; }

.track__dot {
    width: 2rem; height: 2rem;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--paper);
    border: 2px solid var(--line);
    color: var(--ink-4);
    position: relative;
    z-index: 1;
    transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

.track__dot svg { width: 1rem; height: 1rem; }

.track__label { line-height: 1.25; }

.track__item.is-current .track__dot {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.track__item.is-current { color: var(--accent-deep); font-weight: 600; }

.track__item.is-done .track__dot {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--accent-deep);
}
.track__item.is-done { color: var(--ink-3); }
.track__item.is-done::before,
.track__item.is-current::before { background: var(--accent-line); }

/* --- Título de bloco ------------------------------------------------------ */

.field-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-2);
    margin: var(--sp-5) 0 .6rem;
}

/* --- Escolha (serviço) ----------------------------------------------------
   Cartão com marca de seleção à esquerda e preço à direita. O escolhido fica
   preenchido, não apenas contornado: num relance, dá para ver o que já foi
   decidido sem precisar procurar a borda mais grossa. */

.pick {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    padding: 1rem 1.05rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease),
                background .16s var(--ease), transform .16s var(--ease);
}

.pick:hover, .pick:focus-visible {
    color: inherit;
    border-color: var(--accent-line);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.pick__mark {
    width: 1.4rem; height: 1.4rem;
    flex: none;
    border-radius: 50%;
    border: 2px solid var(--line-3);
    display: grid; place-items: center;
    color: transparent;
    transition: border-color .16s var(--ease), background .16s var(--ease);
}

.pick__mark svg { width: .85rem; height: .85rem; }

.pick__body { flex: 1; min-width: 0; }

.pick__name { display: block; font-weight: 600; font-size: var(--text-md); line-height: 1.3; }
.pick__meta { display: block; font-size: var(--text-xs); color: var(--ink-4); margin-top: .1rem; }
.pick__desc { display: block; font-size: var(--text-xs); color: var(--ink-4); margin-top: .25rem; }

/* O preço numa pastilha, não solto: ele é a informação que a cliente procura
   primeiro, e destacá-la assim deixa a coluna da direita legível de relance
   numa lista de oito serviços. */
.pick__price {
    flex: none;
    align-self: flex-start;
    padding: .25rem .6rem;
    border-radius: var(--r-pill);
    background: var(--sand);
    border: 1px solid var(--line);
    font-weight: 700;
    font-size: var(--text-xs);
    color: var(--accent-deep);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* O escolhido */
.pick.is-on {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    box-shadow: var(--shadow-md);
}

.pick.is-on:hover { color: var(--accent-ink); }
.pick.is-on .pick__mark {
    background: var(--accent-ink); border-color: var(--accent-ink); color: var(--accent);
}
/* Opacidade em vez de branco translúcido: o texto secundário precisa
   desbotar na direção da tinta que estiver valendo. Com uma cor principal
   clara, o branco a 80% simplesmente sumia. */
.pick.is-on .pick__meta,
.pick.is-on .pick__desc { color: var(--accent-ink); opacity: .82; }

.pick.is-on .pick__price {
    color: var(--accent-ink);
    /* A primeira linha é a reserva de quem não tem color-mix; a segunda
       ganha onde ele existe, e aí a pastilha acompanha a tinta. */
    background: rgba(255, 255, 255, .18);
    background: color-mix(in srgb, var(--accent-ink) 16%, transparent);
    border-color: rgba(255, 255, 255, .28);
    border-color: color-mix(in srgb, var(--accent-ink) 26%, transparent);
}

/* Um brilho de cima para baixo tira a chapadez do bloco de cor: sem ele, o
   cartão escolhido é um retângulo liso, e é justamente o elemento que deveria
   parecer o mais acabado da tela. */
.pick.is-on {
    background:
        linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 60%),
        var(--accent);
}

/* --- Período do dia -------------------------------------------------------
   Separa manhã, tarde e noite. A contagem à direita responde "quanto ainda
   tem?" sem a cliente precisar contar os botões. */

.period {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: var(--sp-4) 0 .5rem;
}

.period::after {
    content: '';
    flex: 1;
    order: 1;
    height: 1px;
    background: var(--line-2);
}

.period__label {
    order: 0;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    /* A versão escurecida, não a original: MANHÃ em dourado puro sobre fundo
       claro é decoração ilegível. */
    color: var(--accent-2-deep);
}

.period__count { order: 2; font-size: var(--text-xs); color: var(--ink-4); }

/* --- A agenda, colada no serviço escolhido --------------------------------
   Com muitos serviços, este bloco no fim da página ficava fora do campo de
   visão: a cliente tocava num serviço, nada mudava perto do dedo dela, e não
   havia motivo para rolar procurando algo que ela não sabia que existia.
   Agora ele nasce embaixo do cartão escolhido, e os dois leem como uma peça
   só — o cartão perde os cantos de baixo e este perde os de cima. */

.when {
    /* O tom suave da secundária: claro o bastante para o texto do sistema
       continuar legível em cima, e o suficiente para a segunda cor aparecer
       na parte da tela onde a cliente passa mais tempo. */
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(255, 255, 255, .7), transparent 70%),
        var(--accent-2-soft);
    border: 1px solid var(--accent);
    border-top: 0;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    padding: var(--sp-4);
    margin-top: -1px;   /* engole a borda do cartão de cima */
    box-shadow: var(--shadow);

    /* O link do serviço aponta para cá. Sem esta folga, o bloco encostaria no
       topo da tela e o cartão escolhido ficaria escondido acima — a cliente
       veria horários sem ver a que serviço pertencem. */
    scroll-margin-top: 5rem;
}

/* O cartão escolhido sempre é seguido pela agenda — quando há serviço
   escolhido, o passo é sempre o de horário. */
.pick.is-on { border-radius: var(--r-lg) var(--r-lg) 0 0; }

.when__empty {
    background: var(--paper);
    border: 1px dashed var(--line-2);
    border-radius: var(--r-sm);
    padding: var(--sp-4);
    text-align: center;
    color: var(--ink-3);
}

@media (prefers-reduced-motion: no-preference) {
    .when { animation: when-in .28s var(--ease) both; }
}

@keyframes when-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* --- Escolha do dia -------------------------------------------------------
   As setas pulam para o próximo dia que tem vaga, não para o dia seguinte no
   calendário. Numa agenda de terça a sexta, avançar de um em um faria a
   cliente bater em três dias vazios antes de achar horário. */

.daypick {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: var(--paper);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    padding: .35rem;
    box-shadow: var(--shadow-sm);
}

.daypick__arrow {
    width: 2.4rem; height: 2.4rem;
    flex: none;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    color: var(--accent-deep);
    text-decoration: none;
    font-size: 1.4rem;
    line-height: 1;
    transition: background .14s var(--ease);
}

.daypick__arrow:hover { background: var(--accent-soft); color: var(--accent-deep); }
.daypick__arrow.is-off { color: var(--ink-5); pointer-events: none; }

.daypick__label {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    font-weight: 600;
    font-size: var(--text-sm);
    text-align: center;
}

.daypick__label svg { width: 1rem; height: 1rem; color: var(--accent); flex: none; }

/* O mês inteiro, escondido atrás de um clique. */
.monthbox { margin-top: .6rem; }

.monthbox summary {
    cursor: pointer;
    font-size: var(--text-xs);
    color: var(--ink-4);
    padding: .3rem 0;
    list-style: none;
    text-align: center;
}

.monthbox summary::-webkit-details-marker { display: none; }
.monthbox summary::after { content: ' ▾'; }
.monthbox[open] summary::after { content: ' ▴'; }

.monthbox[open] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: .3rem .75rem .75rem;
    margin-top: .5rem;
}

/* --- Resumo antes de confirmar -------------------------------------------
   Última tela antes de o horário ficar reservado. O dia e a hora ganham peso
   próprio no topo, em vez de virarem mais uma linha igual às outras: o erro
   que dói aqui é a cliente confirmar terça achando que era quarta, e ele se
   evita com hierarquia, não com mais texto. */

.summary {
    background: var(--paper);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-lg);
    margin-bottom: var(--sp-4);
    overflow: hidden;
    box-shadow: var(--shadow);
}

/* Aqui vai texto por cima, e por isso o fundo é uma cor só.
   O degradê de duas cores é bonito na faixa da capa, que não tem nada
   escrito em cima; num bloco com texto ele é uma armadilha: com dourado numa
   ponta e azul na outra, não existe tinta que sirva para as duas. Cor sólida
   significa que --accent-ink está sempre certa. O brilho continua, em cima da
   própria tinta, para o bloco não ficar chapado. */
.summary__head {
    background:
        radial-gradient(90% 140% at 15% 0%, rgba(255, 255, 255, .18), transparent 60%),
        var(--accent);
    color: var(--accent-ink);
    padding: var(--sp-4);
}

.summary__service {
    display: block;
    font-size: var(--text-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .82;
}

.summary__when {
    display: block;
    font-family: var(--serif);
    font-size: var(--text-lg);
    line-height: 1.25;
    margin-top: .15rem;
}

.summary__rows { padding: var(--sp-3) var(--sp-4) 0; }

.summary__row {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .4rem 0;
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--line);
}

.summary__row:last-child { border-bottom: 0; }

/* --ink-3, e não o mais claro: são poucas palavras, mas são as que dizem o
   que cada linha significa na última tela antes de confirmar. */
.summary__label { color: var(--ink-3); }
.summary__value { font-weight: 600; text-align: right; }

.summary__change {
    display: block;
    padding: .7rem var(--sp-4) var(--sp-4);
    font-size: var(--text-xs);
    color: var(--ink-3);
}

/* --- Calendário ----------------------------------------------------------- */

.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }

.calendar__head {
    font-size: var(--text-xs);
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-4); text-align: center; padding-bottom: .35rem;
}

.calendar__month {
    grid-column: 1 / -1;
    font-size: var(--text-xs);
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-4);
    padding: var(--sp-4) 0 .2rem;
}

.day {
    aspect-ratio: 1;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    background: var(--sand-2);
    color: var(--ink-5);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: border-color .14s var(--ease), background .14s var(--ease);
}

.day--free {
    background: var(--paper); border-color: var(--line-2);
    color: var(--ink); font-weight: 600;
}
.day--free:hover, .day--free:focus-visible {
    color: var(--accent-deep); border-color: var(--accent); background: var(--accent-soft);
}

.day--selected { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.day--selected:hover { color: var(--accent-ink); background: var(--accent); }
.day--today:not(.day--selected) { box-shadow: inset 0 0 0 1.5px var(--accent-line); }
.day--empty { background: none; border: 0; }

/* --- Horários ------------------------------------------------------------- */

/* Quatro colunas no celular: é o que cabe sem apertar o alvo do dedo, e faz a
   grade de horários caber na tela sem rolagem na maioria dos dias. */
.slots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .45rem;
    margin-top: .75rem;
}

@media (max-width: 21rem) { .slots { grid-template-columns: repeat(3, 1fr); } }

.slot {
    display: block; text-align: center;
    padding: .8rem .2rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    /* O leve degradê dá volume ao botão sem sombra pesada: cada horário lê
       como algo para tocar, não como uma célula de tabela. */
    background: linear-gradient(var(--paper), var(--sand));
    color: var(--ink);
    font-weight: 700;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: border-color .14s var(--ease), background .14s var(--ease),
                color .14s var(--ease), transform .14s var(--ease),
                box-shadow .14s var(--ease);
}

.slot:hover, .slot:focus-visible {
    color: var(--accent-ink);
    border-color: var(--accent);
    background: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* --- Comprovante ---------------------------------------------------------- */

.receipt {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.receipt__top {
    background: linear-gradient(160deg, var(--accent-soft), var(--paper));
    border-bottom: 1px solid var(--accent-line);
    padding: var(--sp-6) var(--sp-5);
    text-align: center;
}

.receipt__check {
    width: 3.2rem; height: 3.2rem;
    margin: 0 auto var(--sp-3);
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    display: grid; place-items: center;
    font-size: 1.5rem;
    box-shadow: var(--shadow);
}

.receipt__body { padding: var(--sp-5); }

.receipt__line {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--text-sm);
}

.receipt__line:last-child { border-bottom: 0; }
.receipt__line dt { color: var(--ink-4); margin: 0; }
.receipt__line dd { margin: 0; font-weight: 600; text-align: right; }

.receipt__code { font-family: var(--mono); letter-spacing: .08em; }

/* --- No celular, tudo um ponto menor -------------------------------------
   A vitrine foi desenhada olhando para uma janela de 375px larga e 800 de
   altura. No aparelho de verdade, com a barra de status e a do navegador
   comendo o topo, sobrava menos — e o resultado é que um serviço com
   descrição ocupava quase a tela inteira: a cliente rolava três vezes só
   para ver que existem outros.

   O ajuste vem em dois níveis. O primeiro é a raiz: 15px em vez de 16px
   encolhe de uma vez tudo que é medido em rem — texto, espaço, cantos —
   mantendo as proporções que já estavam certas. O segundo são os apertos
   pontuais abaixo, nos blocos que continuavam grandes mesmo depois disso.

   O que NÃO encolhe é o alvo do dedo: os 46px de altura do .btn e a grade
   de horários estão em px justamente para não seguirem essa escala. Tela
   pequena é onde o dedo erra mais, não menos. */

@media (max-width: 30rem) {
    html { font-size: 93.75%; }

    /* A capa: a faixa e o retrato menores começavam só em 24rem, e entre
       24 e 30rem — que é a largura da maioria dos celulares — o cabeçalho
       tomava um terço da primeira tela. */
    .cover__band  { height: 6.25rem; }
    .cover__photo { width: 88px; height: 88px; margin-top: -2.75rem; }
    .cover__photo--letter { font-size: 2.2rem; }
    .cover        { padding-bottom: var(--sp-4); }

    /* O cartão do serviço. O nome volta ao corpo do texto: em text-md ele
       quebrava em duas linhas em nome nenhum de tamanho incomum. */
    .pick        { padding: .8rem .9rem; gap: .7rem; }
    .pick__name  { font-size: var(--text-base); }

    /* A descrição em duas linhas, com reticências. Ela ajuda a escolher,
       mas o parágrafo inteiro empurra os outros serviços para fora da tela
       — e o que a cliente precisa ver primeiro é que há outros. */
    .pick__desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* A agenda colada no serviço escolhido. */
    .when            { padding: .8rem; }
    .daypick         { padding: .25rem; }
    .daypick__arrow  { width: 2.1rem; height: 2.1rem; }
    .monthbox[open]  { padding: .25rem .5rem .5rem; }
    .calendar        { gap: .25rem; }
    .calendar__month { padding-top: var(--sp-3); }

    /* Horário: menos altura, mesma área de toque confortável. */
    .slot  { padding: .7rem .2rem; }
    .slots { gap: .4rem; }
}

/* ==========================================================================
   9. Painel
   ========================================================================== */


.topbar {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 30;
}

.topbar__inner {
    max-width: 62rem; margin: 0 auto;
    padding: .7rem var(--sp-4);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}

.topbar__who { min-width: 0; }

.topbar__name {
    font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topbar__role { font-size: var(--text-xs); color: var(--ink-4); }

.nav {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    position: sticky; top: 3.6rem; z-index: 25;
    /* A barra de rolagem horizontal no meio da navegação é feia e não ajuda:
       arrastar já é descoberto sozinho. */
    scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav__inner { max-width: 62rem; margin: 0 auto; padding: 0 var(--sp-4); display: flex; gap: .1rem; }

.nav__link {
    padding: .85rem .75rem;
    font-size: var(--text-sm);
    color: var(--ink-3);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .14s var(--ease), border-color .14s var(--ease);
}

.nav__link:hover { color: var(--ink); }
.nav__link.is-active { color: var(--accent-deep); border-bottom-color: var(--accent); font-weight: 600; }

/* --- Agenda do dia -------------------------------------------------------- */

.daybar {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: .5rem .5rem .5rem 1rem;
    box-shadow: var(--shadow-sm);
}

.daybar__label { font-weight: 600; }

.appointment {
    display: grid; grid-template-columns: 4.4rem 1fr; gap: var(--sp-4);
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    box-shadow: var(--shadow-sm);
}

.appointment--cancelled { border-left-color: var(--line-3); opacity: .6; }
.appointment--no_show   { border-left-color: var(--warn); }
.appointment--done      { border-left-color: var(--ok); }

.appointment__time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--text-lg); }
.appointment__end  { font-size: var(--text-xs); color: var(--ink-4); font-weight: 400; }
.appointment__name { font-weight: 600; }
.appointment__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }

/* --- Editor de horários --------------------------------------------------- */

.weekday {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    padding: var(--sp-4);
    box-shadow: var(--shadow-sm);
}

.weekday__name { font-weight: 600; margin-bottom: .6rem; }

.interval {
    display: grid; grid-template-columns: 1fr auto 1fr auto;
    gap: .5rem; align-items: center; margin-bottom: .5rem;
}

.interval__sep { color: var(--ink-4); font-size: var(--text-sm); }

/* --- Listas --------------------------------------------------------------- */

.list { display: grid; gap: .6rem; }

.list__item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
    text-decoration: none; color: inherit;
    box-shadow: var(--shadow-sm);
    transition: border-color .14s var(--ease), transform .14s var(--ease), box-shadow .14s var(--ease);
}

.list__item:hover {
    color: inherit; border-color: var(--accent-line);
    transform: translateY(-1px); box-shadow: var(--shadow);
}

.stat-row {
    display: flex; gap: 1.1rem; flex-wrap: wrap;
    font-size: var(--text-xs); color: var(--ink-4);
    margin-top: .3rem;
}

/* --- Linha de serviço, com a ordem à esquerda -----------------------------
   As setas ficam na frente do nome porque, depois que os serviços já estão
   cadastrados, mexer na ordem é o motivo mais frequente de abrir esta tela.
   Numa coluna própria elas também não disputam espaço com Editar e Esconder,
   que no celular já quebram para a linha de baixo. */

.service-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.service-row--off { opacity: .65; }

.service-row__body    { flex: 1; min-width: 10rem; }
.service-row__actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

.order {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: none;
    /* Alinha o par de setas com a primeira linha do nome, não com o meio do
       cartão: com descrição e preço embaixo, o meio fica longe do nome. */
    margin-top: -2px;
}

.order form { display: contents; }

.order__btn {
    width: 2rem; height: 1.6rem;
    display: grid; place-items: center;
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--paper);
    color: var(--ink-3);
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
    transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease);
}

.order__btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--accent-deep);
}

/* A ponta da lista: a seta continua ocupando o lugar dela, para o par não
   pular de posição entre uma linha e outra. */
.order__btn.is-off {
    color: var(--ink-5);
    background: var(--sand);
    border-color: var(--line);
    cursor: default;
}

/* --- Painéis de número ---------------------------------------------------- */

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .6rem; }

.metric {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-4);
}

.metric__value {
    font-family: var(--serif);
    font-size: var(--text-xl);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.metric__label { font-size: var(--text-xs); color: var(--ink-4); margin-top: .2rem; }

/* --- Copiável ------------------------------------------------------------- */

.copyable {
    display: flex; gap: .5rem; align-items: center;
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: .45rem .45rem .45rem .8rem;
    font-size: var(--text-sm);
}

.copyable code {
    flex: 1; min-width: 0;
    overflow-x: auto; white-space: nowrap;
    font-family: var(--mono);
    font-size: var(--text-xs);
    color: var(--ink-3);
    scrollbar-width: none;
}
.copyable code::-webkit-scrollbar { display: none; }

/* ==========================================================================
   10. Rodapé curto (vitrine e painel)
   ========================================================================== */

.footer {
    text-align: center;
    padding: var(--sp-7) var(--sp-4) var(--sp-5);
    font-size: var(--text-xs);
    color: var(--ink-4);
}

.footer a { color: var(--ink-3); }

.footer__brand {
    display: inline-flex; align-items: center; gap: .4rem;
    text-decoration: none; color: var(--ink-3);
}

.footer__brand svg { width: 1.1rem; height: 1.1rem; border-radius: 4px; }

/* ==========================================================================
   11. Preferências do sistema
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    .topbar, .nav, .btn, .footer, .steps { display: none !important; }
    body { background: #fff; }
    .receipt, .card { box-shadow: none; border-color: #ccc; }
}