/* =====================================================================
   TABLETA DIN MAGAZIE

   Foaie separată, nu un bloc în admin.css. Ecranul ăsta n-are nimic
   comun cu panoul: nici bară, nici tabele, nici câmpuri mici. Iar
   tableta îl ţine deschis toată ziua — o foaie de 4 KB se ia o dată şi
   rămâne în memorie, în loc să care 90 KB de reguli pentru ecrane pe
   care nu le va deschide niciodată.

   REGULA DE FOND: nimic sub 18px, nicio ţintă sub 64px, niciun element
   care se mişcă. Se apasă în picioare, cu mâinile ude, uneori cu
   mănuşi.
   ===================================================================== */

:root {
  --ch-fond:   #F6F4F1;
  --ch-cerneala: #151518;
  --ch-alb:    #FFFFFF;
  --ch-rosu:   #B3401F;
  --ch-verde:  #2F7A5A;
  --ch-gri:    rgba(21, 21, 24, .55);
  --ch-linie:  rgba(0, 0, 0, .1);
}

* { box-sizing: border-box; }

body.ch {
  margin: 0;
  background: var(--ch-fond);
  color: var(--ch-cerneala);
  font: 400 18px/1.45 Figtree, system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }

/* ---------- mesajul de sus ---------- */

.ch-vorba {
  padding: 1rem 1.2rem;
  font-size: 1.05rem; font-weight: 600;
  text-align: center;
  color: #fff;
}
.ch-vorba--success { background: var(--ch-verde); }
.ch-vorba--error   { background: var(--ch-rosu); }

/* ---------- ecranul cu cifre ---------- */

.ch-pin {
  max-width: 30rem; margin: 0 auto;
  padding: 2rem 1.2rem 1.2rem;
  text-align: center;
}
.ch-pin__cap h1 { margin: .6rem 0 .2rem; font-size: 1.8rem; font-weight: 700; }
.ch-pin__cap p  { margin: 0 0 1.6rem; color: var(--ch-gri); }

.ch-ic { display: inline-block; color: var(--ch-cerneala); }
.ch-ic svg { display: block; width: 44px; height: 44px; }
.ch-ic--mare svg { width: 72px; height: 72px; }

.ch-pad__puncte {
  display: flex; justify-content: center; gap: 1.1rem;
  margin: 0 0 2rem;
}
.ch-pad__puncte span {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--ch-cerneala); opacity: .35;
}
.ch-pad__puncte span.is-plin { background: var(--ch-cerneala); opacity: 1; }

.ch-pad__taste {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
}
.ch-tasta {
  min-height: 78px;
  background: var(--ch-alb);
  border-radius: 14px;
  font-size: 2rem; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.ch-tasta:active { background: #ece7e2; }
.ch-tasta--gol { font-size: 1.6rem; color: var(--ch-gri); }
.ch-tasta--ok  { background: var(--ch-verde); color: #fff; }
.ch-tasta--ok:disabled { background: #cfcac5; color: #fff; }

.ch-pauza {
  background: var(--ch-alb); border-inline-start: 5px solid var(--ch-rosu);
  border-radius: 12px; padding: 1.2rem; text-align: start; font-size: 1.05rem;
}
.ch-pauza strong { display: block; margin-bottom: .2rem; }

.ch-jos { margin: 2rem 0 0; font-size: .9rem; color: var(--ch-gri); }

/* ---------- capul ecranelor de lucru ---------- */

.ch-cap {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 1.2rem .6rem;
}
.ch-cap h1 { margin: .1rem 0 0; font-size: 1.5rem; font-weight: 700; }
.ch-cap__salut { margin: 0; font-size: .95rem; color: var(--ch-gri); }
.ch-cap__dr { display: flex; gap: .6rem; flex-shrink: 0; }

.ch-iesire {
  min-height: 52px; padding: 0 1.1rem;
  background: var(--ch-alb); border-radius: 12px;
  font-size: .95rem; font-weight: 600; color: var(--ch-gri);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.ch-iesire--tare { background: var(--ch-cerneala); color: #fff; }

/* ---------- secţiile ---------- */

.ch-sect { max-width: 52rem; margin: 0 auto; }

.ch-grila {
  display: grid; gap: .9rem; padding: .6rem 1.2rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.ch-grila__f { display: contents; }

.ch-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .7rem; width: 100%; min-height: 148px; padding: 1.2rem .8rem;
  background: var(--ch-alb); border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.09);
}
.ch-card:active { background: #ece7e2; }
.ch-card__t { font-size: 1.05rem; font-weight: 600; text-align: center; line-height: 1.25; }

/* Câte o culoare de secţie. Nu ca decor: după a treia folosire, mâna
   merge la culoare înainte ca ochiul să citească numele — şi asta e
   toată diferenţa pentru cine citeşte greu. */
.ch-card--curatenie .ch-ic { color: #2F6FA8; }
.ch-card--bucatarie .ch-ic { color: #B3401F; }
.ch-card--pizza     .ch-ic { color: #C8791F; }
.ch-card--bar       .ch-ic { color: #6B3FA0; }
.ch-card--sala      .ch-ic { color: #2F7A5A; }
.ch-card--protectie .ch-ic { color: #A8912F; }

/* ---------- produsele ---------- */

.ch-prod { max-width: 52rem; margin: 0 auto; padding-bottom: 2rem; }

.ch-cauta {
  display: block; width: calc(100% - 2.4rem); margin: .4rem 1.2rem 1rem;
  min-height: 58px; padding: 0 1rem;
  background: var(--ch-alb); border: 1px solid var(--ch-linie); border-radius: 12px;
}

.ch-lista { display: grid; gap: .6rem; padding: 0 1.2rem; }

.ch-p {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; min-height: 72px; padding: .9rem 1.1rem;
  background: var(--ch-alb); border-radius: 12px; text-align: start;
  box-shadow: 0 1px 2px rgba(0,0,0,.07);
}
.ch-p:active { background: #ece7e2; }
.ch-p__n { font-size: 1.08rem; font-weight: 600; line-height: 1.25; }
.ch-p__s { flex-shrink: 0; font-size: .95rem; color: var(--ch-gri); font-variant-numeric: tabular-nums; }

.ch-p.is-jos  { box-shadow: inset 4px 0 0 var(--ch-rosu), 0 1px 2px rgba(0,0,0,.07); }
.ch-p.is-jos .ch-p__s { color: var(--ch-rosu); font-weight: 600; }
.ch-p.is-zero { opacity: .55; }
.ch-p__zero { color: var(--ch-rosu); font-weight: 600; }

.ch-gol { margin: 2rem 1.2rem; color: var(--ch-gri); }

/* ---------- ce a luat adineauri ---------- */

.ch-acum { margin: 2rem 1.2rem 0; padding-top: 1rem; border-top: 1px solid var(--ch-linie); }
.ch-acum h2 { margin: 0 0 .5rem; font-size: .95rem; font-weight: 600; color: var(--ch-gri); }
.ch-acum ul { list-style: none; margin: 0; padding: 0; }
.ch-acum li {
  display: flex; gap: .8rem; justify-content: space-between;
  padding: .45rem 0; font-size: .92rem;
  border-top: 1px solid var(--ch-linie);
}
.ch-acum li:first-child { border-top: 0; }
.ch-acum__c { color: var(--ch-gri); }
.ch-acum__o { color: var(--ch-gri); font-variant-numeric: tabular-nums; }

/* ---------- fereastra: câte, şi pentru ce ---------- */

.ch-modal { position: fixed; inset: 0; z-index: 50; background: rgba(21,21,24,.5); }
.ch-modal[hidden] { display: none; }

.ch-modal__in {
  position: absolute; inset-inline: 0; bottom: 0;
  max-height: 92vh; overflow-y: auto;
  background: var(--ch-fond);
  border-radius: 20px 20px 0 0;
  padding: 1.2rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom));
}
@media (min-width: 720px) {
  .ch-modal__in {
    inset: 50% auto auto 50%; transform: translate(-50%, -50%);
    width: min(92vw, 34rem); border-radius: 20px;
  }
}

.ch-modal__cap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.2rem;
}
.ch-modal__cap strong { font-size: 1.25rem; line-height: 1.25; }
.ch-x { min-width: 52px; min-height: 52px; font-size: 1.3rem; color: var(--ch-gri); }

.ch-pas__t { margin: 0 0 .8rem; font-size: 1rem; color: var(--ch-gri); }

.ch-cant {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.4rem;
}
.ch-cant__b {
  width: 84px; height: 84px; flex-shrink: 0;
  background: var(--ch-alb); border-radius: 16px;
  font-size: 2.4rem; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.ch-cant__b:active { background: #ece7e2; }
.ch-cant__v { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ch-cant__v small { font-size: 1rem; font-weight: 500; color: var(--ch-gri); }

.ch-mare {
  display: block; width: 100%; min-height: 68px;
  background: var(--ch-cerneala); color: #fff;
  border-radius: 14px; font-size: 1.1rem; font-weight: 600;
}
.ch-mare:active { background: #33333a; }

.ch-scopuri { display: grid; gap: .7rem; margin-bottom: 1rem; }
.ch-scop {
  width: 100%; min-height: 76px; padding: .9rem 1.1rem;
  background: var(--ch-alb); border-radius: 14px; text-align: start;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.ch-scop:active { background: #ece7e2; }
.ch-scop__n { display: block; font-size: 1.05rem; font-weight: 600; }
.ch-scop__l { display: block; margin-top: .15rem; font-size: .9rem; color: var(--ch-gri); }

.ch-text {
  display: block; width: 100%; min-height: 62px; margin-bottom: .9rem;
  padding: 0 1rem; background: var(--ch-alb);
  border: 1px solid var(--ch-linie); border-radius: 12px;
}

.ch-geo {
  margin: 1rem 1.2rem; padding: .9rem 1.1rem;
  background: var(--ch-alb); border-inline-start: 5px solid var(--ch-rosu);
  border-radius: 12px; font-size: .95rem;
}
.ch-geo[hidden] { display: none; }