/* ==========================================================================
   maederlacke.ch — рейтинг, вариант «Wettschein» (бумажный купон).

   Это РЕЙТИНГ: купоны идут строками, по одному бренду сверху вниз. Внутри
   строки три зоны — бренд слева, предложение и данные в середине, отрывной
   корешок с кнопкой справа, отделённый пунктиром.

   Приём: рваный верхний край, моноширинные подписи, строки с отточием
   «Lizenz ......... Curaçao» и линия отреза. Отточие — редкий в вебе
   типографский приём, читается как документ, а не как реклама, и как раз
   вытягивает шесть плашек advantages, которые в обычной сетке — месиво.

   ВАЖНО: отдельный файл, а не часть бандла. На сайте есть opt-build.php,
   который пересобирает CSS с чисткой неиспользуемых классов и вырезал бы .ml-*.

   Палитра целиком от сайта: белая страница, чернила #18181B, фирменный
   шалфейный #9BC1BC и кнопки-капсулы со скруглением 30px. Бумага — тёплый
   оттенок белого, чтобы купон читался как вложенный объект.
   ========================================================================== */

.ml-rating{
  --ml-paper:#FBFAF7;
  --ml-ink:#18181B;
  --ml-ink-2:#4B4F4D;
  --ml-mut:#82877F;
  --ml-dot:#C8CEC9;        /* отточие */
  --ml-cut:#D5DAD5;        /* линия отреза */
  --ml-sage:#9BC1BC;
  --ml-sage-dk:#4F7C75;
  --ml-sage-lt:#EDF4F3;

  display:flex;
  flex-direction:column;
  gap:18px;
  margin:0 0 42px;
  text-align:left;
  font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
}

/* сброс тематических правил внутри блока */
.ml-rating p{margin:0;color:inherit;line-height:inherit}
.ml-rating ul,.ml-rating ol,.ml-rating li{margin:0;padding:0;list-style:none}
.ml-rating a{text-decoration:none}
.ml-rating img{max-width:100%;height:auto}

/* ------------------------------------------------------------------ купон */
.ml-s{
  position:relative;
  background:var(--ml-paper);
  color:var(--ml-ink);
  border-radius:5px;
  padding:18px 22px 20px;
  box-shadow:0 10px 30px -16px rgba(24,24,27,.26), 0 0 0 1px rgba(24,24,27,.05);
}
.ml-s--top{box-shadow:0 12px 34px -16px rgba(79,124,117,.4), 0 0 0 1.5px var(--ml-sage)}

/* рваный верхний край: два встречных пилообразных градиента */
.ml-s::before{
  content:'';position:absolute;left:0;right:0;top:-8px;height:9px;pointer-events:none;
  background:
    repeating-linear-gradient(135deg,var(--ml-paper) 0 7px,transparent 7px 14px),
    repeating-linear-gradient(45deg,var(--ml-paper) 0 7px,transparent 7px 14px);
  background-size:14px 14px;
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes ml-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
    .ml-s{animation:ml-in .5s cubic-bezier(.2,.7,.3,1) both;animation-timeline:view();animation-range:entry 0% cover 14%}
  }
}

/* штамп у лидера */
.ml-rating .ml-stamp{
  position:absolute;top:40px;right:-6px;transform:rotate(8deg);z-index:2;
  border:2px solid var(--ml-sage-dk);color:var(--ml-sage-dk);
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 9px;line-height:1;opacity:.92;background:rgba(251,250,247,.85);
}

/* ------------------------------------------------------------ шапка купона */
.ml-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:11px;margin-bottom:15px;border-bottom:1px solid var(--ml-cut);
}
.ml-rating .ml-no{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ml-ink);
}
.ml-rating .ml-dt{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:10px;color:var(--ml-mut);letter-spacing:.06em;
}

/* ------------------------------------------------- три зоны внутри строки */
.ml-body{
  display:grid;
  grid-template-columns:196px minmax(0,1fr) 206px;
  gap:0 24px;
  align-items:start;
}

/* --- бренд --- */
.ml-left{display:flex;flex-direction:column;gap:11px}
.ml-rating .ml-crest{
  width:100%;height:78px;background:#fff;border:1px solid var(--ml-cut);border-radius:4px;
  display:flex;align-items:center;justify-content:center;padding:10px;
  transition:border-color .2s ease;
}
.ml-rating .ml-crest:hover{border-color:var(--ml-sage)}
.ml-rating .ml-crest img{max-width:100%;max-height:100%;width:auto;object-fit:contain;display:block}
.ml-cb{min-width:0}
.ml-rating .ml-nm{
  font-family:'Plus Jakarta Sans',Inter,sans-serif;
  font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--ml-ink);
}
.ml-rating .ml-sub{margin-top:4px;font-size:11.5px;color:var(--ml-mut);line-height:1.35}

/* --- середина --- */
.ml-mid{min-width:0}

.ml-of{
  margin:0 0 13px;padding:11px 13px;
  background:var(--ml-sage-lt);border-left:3px solid var(--ml-sage);
}
.ml-rating .ml-of,
.ml-rating .ml-of *{
  font-family:'Plus Jakarta Sans',Inter,sans-serif;
  font-size:16px;font-weight:700;line-height:1.36;letter-spacing:-.015em;
  color:var(--ml-ink)!important;margin:0;
}
.ml-rating .ml-of .bonus-main{display:block}

.ml-promo{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;font-size:11.5px;color:var(--ml-mut)}
.ml-rating .ml-promo code{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:12.5px;font-weight:700;letter-spacing:.12em;
  background:#fff;border:1px dashed var(--ml-sage);color:var(--ml-sage-dk);padding:4px 10px;
}

/* ---- строки с отточием: две колонки, чтобы строка рейтинга не вытягивалась ---- */
.ml-rows{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.ml-l{
  display:flex;align-items:baseline;gap:7px;
  padding:4px 0;font-size:12.5px;color:var(--ml-ink-2);
}
.ml-rating .ml-l .k{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex:0 0 auto;
  font-family:Inter,sans-serif;font-size:12.5px;color:var(--ml-ink-2);
}
.ml-rating .ml-l .ml-i{width:13px;height:13px;flex:0 0 13px;color:var(--ml-sage-dk);display:block}
/* само отточие */
.ml-rating .ml-l .d{
  flex:1 1 auto;min-width:14px;align-self:center;
  border-bottom:1px dotted var(--ml-dot);
}
.ml-rating .ml-l b{
  flex:0 0 auto;white-space:nowrap;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:12.5px;font-weight:700;color:var(--ml-ink);font-variant-numeric:tabular-nums;
}
.ml-rating .ml-l b a{color:var(--ml-sage-dk);text-decoration:underline;text-underline-offset:2px}
/* строка с оценкой чуть крупнее — она главная в списке */
.ml-rating .ml-l--rate b{font-size:14.5px}
.ml-rating .ml-l--rate .k{font-weight:600;color:var(--ml-ink)}

/* линия отреза */
.ml-cut{border-top:1px dashed var(--ml-cut);margin:12px 0 11px}

/* ---- features из Strapi: эмодзи и разметка остаются как есть ---- */
.ml-ft{font-size:12.5px;line-height:1.7}
.ml-rating .ml-ft,
.ml-rating .ml-ft *{color:var(--ml-ink-2)!important;font-weight:400!important}
.ml-rating .ml-ft .bonus-features{display:flex;flex-wrap:wrap;gap:2px 20px}
.ml-rating .ml-ft .feature-item{display:inline-flex;align-items:center;gap:0}
.ml-rating .ml-ft p{margin:0}

/* ---- платёжные методы ---- */
.ml-pay{margin-top:9px;display:flex;flex-wrap:wrap;gap:5px 15px}
.ml-rating .ml-pay span{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--ml-mut)}
.ml-rating .ml-pay .ml-i{width:13px;height:13px;flex:0 0 13px;display:block;color:#A9B0AA}

/* ---- extraHtml ---- */
.ml-extra{margin-top:10px;font-size:12.5px;line-height:1.6}
.ml-rating .ml-extra,
.ml-rating .ml-extra *{color:var(--ml-ink-2)!important}
.ml-rating .ml-extra a{color:var(--ml-sage-dk)!important;text-decoration:underline;text-underline-offset:2px}

/* --------------------------------------------- отрывной корешок справа */
.ml-right{
  position:relative;
  padding-left:24px;
  display:flex;flex-direction:column;gap:10px;justify-content:center;
  align-self:stretch;
}
/* пунктир отреза между данными и корешком */
.ml-right::before{
  content:'';position:absolute;left:0;top:-2px;bottom:-2px;width:0;
  border-left:2px dashed var(--ml-cut);
}
.ml-rating .ml-go{
  display:block;text-align:center;
  background:var(--ml-sage);color:var(--ml-ink)!important;
  font-family:'Plus Jakarta Sans',Inter,sans-serif;
  font-weight:700;font-size:14.5px;letter-spacing:-.01em;
  padding:15px 12px;border-radius:30px;line-height:1.25;
  transition:background .2s ease,box-shadow .2s ease;
}
.ml-rating .ml-go:hover{background:#87B3AD;box-shadow:0 6px 16px -6px rgba(79,124,117,.55)}
.ml-rating .ml-go:focus-visible{outline:2px solid var(--ml-sage-dk);outline-offset:3px}

.ml-rg{text-align:center;font-size:10.5px;line-height:1.45}
.ml-rating .ml-rg,
.ml-rating .ml-rg *{color:var(--ml-mut)!important;font-size:10.5px;line-height:1.45;margin:0}

/* кнопка раскрытия — только мобильная, без JS */
.ml-more-t{position:absolute;opacity:0;width:0;height:0;pointer-events:none;margin:0}
.ml-more-b{display:none}

/* ==========================================================================
   Планшет: корешок уезжает под данные, пунктир становится горизонтальным
   ========================================================================== */
@media (max-width:1023px){
  .ml-body{grid-template-columns:170px minmax(0,1fr);gap:0 20px}
  .ml-rating .ml-crest{height:68px}
  .ml-rating .ml-nm{font-size:17px}
  .ml-right{
    grid-column:1 / -1;padding-left:0;margin-top:16px;padding-top:14px;
    flex-direction:row;align-items:center;gap:18px;
  }
  .ml-right::before{left:0;right:0;top:0;bottom:auto;width:auto;height:0;border-left:0;border-top:2px dashed var(--ml-cut)}
  .ml-rating .ml-go{flex:0 0 230px}
  .ml-rg{flex:1 1 auto;text-align:left}
}

/* ==========================================================================
   Мобильный: первый купон виден целиком, второй начинается на первом экране.
   Всё, кроме бренда и базового оффера, уходит под кнопку.
   ========================================================================== */
@media (max-width:640px){
  .ml-rating{gap:16px;margin-bottom:26px}

  .ml-s{padding:15px 15px 16px;border-radius:4px}
  .ml-rating .ml-stamp{top:34px;font-size:9px;padding:3px 7px}

  .ml-top{padding-bottom:9px;margin-bottom:12px}

  .ml-body{grid-template-columns:1fr;gap:0}
  .ml-left{flex-direction:row;align-items:center;gap:12px;margin-bottom:12px}
  .ml-rating .ml-crest{width:104px;flex:0 0 104px;height:58px;padding:7px}
  .ml-rating .ml-nm{font-size:16.5px}

  .ml-of{padding:10px 11px;margin-bottom:11px}
  .ml-rating .ml-of,
  .ml-rating .ml-of *{font-size:14.5px;line-height:1.4}

  .ml-rows{grid-template-columns:1fr;gap:0}

  .ml-right{
    margin-top:13px;padding-top:13px;flex-direction:column;gap:9px;
  }
  .ml-rating .ml-go{flex:none;padding:13px 12px;font-size:14px}
  .ml-rg{text-align:center}

  /* базовое предложение и кнопка видны всегда, остальное — под кнопкой */
  .ml-more-t:not(:checked) ~ .ml-rows,
  .ml-more-t:not(:checked) ~ .ml-cut,
  .ml-more-t:not(:checked) ~ .ml-ft,
  .ml-more-t:not(:checked) ~ .ml-pay,
  .ml-more-t:not(:checked) ~ .ml-extra,
  .ml-more-t:not(:checked) ~ .ml-promo{display:none}

  .ml-more-b{
    display:inline-flex;align-items:center;gap:7px;
    margin:0;padding:5px 0;
    font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
    font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
    color:var(--ml-sage-dk);cursor:pointer;user-select:none;
    border-bottom:1px solid var(--ml-sage);
  }
  .ml-more-b::before{content:'Details anzeigen'}
  .ml-more-b::after{content:'+';font-size:13px;letter-spacing:0}
  .ml-more-t:checked ~ .ml-more-b::before{content:'Ausblenden'}
  .ml-more-t:checked ~ .ml-more-b::after{content:'\2212'}
  .ml-more-t:focus-visible ~ .ml-more-b{outline:2px solid var(--ml-sage-dk);outline-offset:3px}
}

/* --------------------------------------------------------------------------
   Уплотнение первого экрана на телефоне: заголовок ближе к верху,
   меньше воздуха до рейтинга.
   -------------------------------------------------------------------------- */
@media only screen and (max-width:767px){
  .hero{padding-top:82px!important;padding-bottom:6px!important}
  .hero h1{font-size:25px!important;line-height:1.16!important;margin-bottom:8px!important}
  .hero p{font-size:13px!important;line-height:1.48!important}
}

@media (prefers-reduced-motion:reduce){
  .ml-s{animation:none}
  .ml-rating .ml-go,.ml-rating .ml-crest{transition:none}
}