/* ==========================================================================
   «Бумажные» блоки: салфетка-квиз и чек-подвал.
   Общие для index.html и varianty.html. Всё на flex/grid + clamp.
   ========================================================================== */

.paper-scope{
  --paper:#F6F3EA;
  --ink:#1B1B1B;
}

/* ============================================================== САЛФЕТКА */
.nap{
  display:flex;
  justify-content:center;
  padding:clamp(6px,1.4vw,22px) 0;
}
.nap__sheet{
  position:relative;
  width:min(100%,700px);
  display:flex;
  flex-direction:column;
  gap:clamp(18px,2.4vw,30px);
  padding:clamp(30px,3.8vw,52px) clamp(26px,3.6vw,54px) clamp(26px,3vw,42px);
  background:var(--paper);
  color:var(--ink);
  transform:rotate(-0.8deg);
  /* Многослойная тень: у самой кромки — короткая и резкая, дальше всё мягче
     и шире. Одна тень даёт плоское пятно, лесенка из шести — объём. */
  box-shadow:
    0 1px 1px rgba(0,0,0,.22),
    0 3px 5px rgba(0,0,0,.19),
    0 9px 12px rgba(0,0,0,.18),
    0 19px 27px rgba(0,0,0,.20),
    0 40px 58px rgba(0,0,0,.26),
    0 78px 112px rgba(0,0,0,.40);
  overflow:hidden;
}
/* тиснёная кромка по периметру — как у бумажной салфетки */
.nap__sheet::after{
  content:'';
  position:absolute;
  inset:clamp(10px,1.2vw,16px);
  border:1px dashed rgba(27,27,27,.14);
  pointer-events:none;
}
/* следы сгиба: салфетку складывали вчетверо */
.nap__folds{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent calc(50% - 1px),rgba(27,27,27,.07) 50%,transparent calc(50% + 1px)),
    linear-gradient(180deg,transparent calc(50% - 1px),rgba(27,27,27,.06) 50%,transparent calc(50% + 1px));
}
/* след от кружки */
.nap__stain{
  position:absolute;
  right:clamp(30px,6vw,90px);
  bottom:clamp(-40px,-4vw,-20px);
  width:clamp(150px,20vw,240px);
  height:clamp(150px,20vw,240px);
  border:2px solid rgba(120,95,60,.13);
  border-radius:50%;
  pointer-events:none;
}
.nap__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-right:clamp(28px,3.4vw,50px);
  padding-bottom:clamp(12px,1.4vw,18px);
  border-bottom:1px solid rgba(27,27,27,.18);
  color:#8A8272;
}
.nap__head,.nap__hint,.nap__count,.nap__num,.nap__line-label{
  font-size:clamp(10px,0.82vw,12px);
  line-height:1.4;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.nap__count{color:#B0A794}
.nap__body{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:clamp(16px,2vw,26px);
}
.nap__q{
  font-size:clamp(24px,3.2vw,44px);
  line-height:1.05;
  font-weight:700;
  letter-spacing:-0.04em;
  text-wrap:balance;
}
.nap__options{display:flex;flex-direction:column;gap:clamp(4px,0.6vw,10px);list-style:none;margin:0;padding:0}
.nap__option{
  display:flex;
  align-items:baseline;
  gap:clamp(12px,1.6vw,22px);
  width:100%;
  padding:clamp(8px,1vw,14px) clamp(8px,1vw,14px);
  padding-left:0;
  background:none;
  border:0;
  border-bottom:1px dashed rgba(27,27,27,.22);
  color:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .16s ease,padding-left .16s ease;
}
.nap__option:hover{background:rgba(27,27,27,.05);padding-left:clamp(8px,1vw,14px)}
.nap__option:focus-visible{outline:1px solid var(--ink);outline-offset:-1px}
.nap__num{flex:none;color:#B0A794;transform:translateY(-2px)}
.nap__hand{
  font-family:'Caveat','Montserrat',cursive;
  font-size:clamp(24px,2.9vw,40px);
  line-height:1.12;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}
.nap__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-top:clamp(10px,1.4vw,18px);
  border-top:1px solid rgba(27,27,27,.18);
}
.nap__hint{color:#B0A794;margin-left:auto}
.nap__back{
  background:none;
  border:0;
  padding:0;
  font-size:clamp(12px,1vw,15px);
  letter-spacing:-0.02em;
  color:#6E6656;
  border-bottom:1px solid rgba(27,27,27,.3);
  cursor:pointer;
  transition:color .16s ease,border-color .16s ease;
}
.nap__back:hover{color:var(--ink);border-color:var(--ink)}

/* исписанная салфетка */
.nap__summary{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,20px);list-style:none;margin:0;padding:0}
.nap__line{display:flex;flex-direction:column;gap:2px}
.nap__line-label{
  font-size:clamp(9px,0.76vw,11px);
  font-weight:600;
  letter-spacing:.2em;
  color:#A79E8B;
}
.nap__line .nap__hand{font-size:clamp(21px,2.4vw,33px)}
/* прикидка цены на исписанной салфетке */
.nap__estimate{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:clamp(4px,0.8vw,10px);
  padding-top:clamp(12px,1.6vw,20px);
  border-top:1px solid rgba(27,27,27,.18);
}
.nap__estimate-label{
  font-size:clamp(9px,0.76vw,11px);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#A79E8B;
}
.nap__estimate-sum{
  font-size:clamp(24px,2.7vw,38px);
  line-height:1.05;
  font-weight:700;
  letter-spacing:-0.04em;
}
.nap__estimate-note{
  max-width:44ch;
  font-size:clamp(12px,1vw,15px);
  line-height:1.4;
  letter-spacing:-0.02em;
  color:#6E6656;
}

.nap__foot--done{align-items:center;gap:clamp(16px,2.4vw,32px)}
.nap__closing-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.nap__closing{
  font-size:clamp(19px,2.1vw,29px);
  line-height:1.25;
  color:#3A362E;
}
/* кнопка — та же, что на первом экране; на бумаге держим лёгкой рамкой */
.nap__btn{
  margin-left:auto;
  border:1px solid rgba(27,27,27,.16);
  box-shadow:
    0 1px 1px rgba(27,27,27,.10),
    0 4px 6px rgba(27,27,27,.09),
    0 10px 16px rgba(27,27,27,.10),
    0 21px 34px rgba(27,27,27,.12);
}
.nap__again{
  background:none;
  border:0;
  padding:0;
  font-size:clamp(11px,0.95vw,13px);
  letter-spacing:-0.02em;
  color:#8A8272;
  border-bottom:1px solid rgba(27,27,27,.25);
  cursor:pointer;
  transition:color .16s ease,border-color .16s ease;
}
.nap__again:hover{color:var(--ink);border-color:var(--ink)}

/* ==================================================================== ЧЕК */
.rcpt-block{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(34px,5vw,72px);
  align-items:start;
}
@media (min-width:900px){
  .rcpt-block{grid-template-columns:minmax(280px,340px) minmax(0,1fr)}
}
/* у чека рваная кромка, поэтому тень только фильтром — box-shadow дал бы
   прямоугольник. Слоёв меньше, чем у салфетки: drop-shadow дороже. */
.rcpt{
  filter:
    drop-shadow(0 2px 2px rgba(0,0,0,.24))
    drop-shadow(0 8px 11px rgba(0,0,0,.21))
    drop-shadow(0 21px 28px rgba(0,0,0,.26))
    drop-shadow(0 48px 64px rgba(0,0,0,.36));
}
.rcpt__paper{
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:clamp(20px,2.4vw,30px) clamp(18px,2.2vw,28px) clamp(16px,2vw,24px);
  background:var(--paper);
  /* PT Mono — тем же печатают настоящие чеки */
  font-family:'PT Mono','Courier New',monospace;
  font-size:clamp(11px,1.05vw,13.5px);
  line-height:1.62;
  letter-spacing:.01em;
  color:#262320;
}
.rcpt__edge{
  height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpath d='M0 0h20L10 12z' fill='%23F6F3EA'/%3E%3C/svg%3E") repeat-x;
}
.rcpt__edge--top{transform:rotate(180deg)}
.rcpt__brand{
  padding-bottom:2px;
  text-align:center;
  font-weight:700;
  letter-spacing:.34em;
  text-transform:uppercase;
}
.rcpt__meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#7C7365;
  font-size:.88em;
}
.rcpt__rule{margin:3px 0;border-top:1px dashed rgba(27,27,27,.35)}
.rcpt__rule--bold{border-top-style:solid;border-top-color:rgba(27,27,27,.5)}

.rcpt__row{display:flex;align-items:baseline;gap:8px;color:inherit}
/* точечная отбивка между названием и суммой — как в настоящем чеке */
.rcpt__row i{
  flex:1 1 auto;
  min-width:12px;
  height:.62em;
  border-bottom:1px dotted rgba(27,27,27,.4);
}
.rcpt__row span{flex:none}
.rcpt__row b{font-weight:700;text-align:right;flex:none}
.rcpt__row--total{font-weight:700;font-size:1.1em;padding:2px 0}
.rcpt__row--link{
  margin:0 -6px;
  padding:2px 6px;
  transition:background .16s ease;
}
.rcpt__row--link:hover{background:rgba(27,27,27,.07)}
.rcpt__row--link b{border-bottom:1px solid rgba(27,27,27,.35)}
.rcpt__row--link:hover b{border-bottom-color:var(--ink)}
.rcpt__row--mail{justify-content:space-between}
.rcpt__row--mail b{flex:1 1 auto;overflow-wrap:anywhere}

/* штрихкод */
.rcpt__barcode{
  height:42px;
  margin-top:8px;
  background-image:
    repeating-linear-gradient(90deg,#262320 0 2px,transparent 2px 6px),
    repeating-linear-gradient(90deg,#262320 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,#262320 0 3px,transparent 3px 13px);
}
.rcpt__code{
  padding-top:5px;
  text-align:center;
  font-size:.86em;
  letter-spacing:.26em;
  color:#6E6656;
}

/* правая часть подвала — Montserrat */
.rfoot{display:flex;flex-direction:column;gap:clamp(16px,2vw,26px)}
.rfoot__eyebrow,.rfoot__nav,.rfoot__legal{
  font-size:clamp(10px,0.82vw,12px);
  line-height:1.4;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.rfoot__eyebrow{color:#6A6A6A}
.rfoot__title{
  font-size:clamp(38px,6.4vw,92px);
  line-height:.94;
  font-weight:800;
  letter-spacing:-0.05em;
  text-transform:uppercase;
}
.rfoot__text{
  max-width:44ch;
  font-size:clamp(15px,1.35vw,20px);
  line-height:1.5;
  letter-spacing:-0.02em;
  color:#9A9A9A;
}
.rfoot__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(12px,2vw,24px);
  flex-wrap:wrap;
  margin-top:clamp(8px,1.4vw,20px);
  padding-top:clamp(14px,1.8vw,24px);
  border-top:1px solid rgba(255,255,255,.14);
}
.rfoot__nav{display:flex;flex-wrap:wrap;gap:clamp(12px,1.8vw,26px);color:#8A8A8A}
.rfoot__nav a{transition:color .18s ease}
.rfoot__nav a:hover{color:#fff}
.rfoot__legal{color:#4E4E4E;margin-left:auto}