/* ============================================================
   IZBA · Конкурс отзывов — «Полоса в герое» (вариант A)
   Префикс .izc- (izba contest). Токены взяты с боевой главной:
   чернила rgb(28,28,31) · золото rgb(253,203,77)→rgb(253,190,31)
   серый текст rgb(128,128,128) · рамка rgb(224,224,224) · шрифт Onest
   ============================================================ */

/* ---------- 1. Полоса в герое ---------- */
.izc-ribbon{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  width:100%;margin:0;text-align:left;font-family:inherit;color:#fff;cursor:pointer;
  background:rgba(28,28,31,.5);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid rgba(253,203,77,.45);border-radius:14px;padding:12px 14px;
  animation:izc-in .55s cubic-bezier(.2,.8,.25,1) .35s both;
  transition:border-color .2s ease, background .2s ease;
}
.izc-ribbon:hover{border-color:rgba(253,203,77,.85);background:rgba(28,28,31,.62)}
.izc-ribbon:focus-visible{outline:2px solid rgb(253,190,31);outline-offset:3px}

/* блик, проезжающий по полосе раз в 6 с */
.izc-shine{
  position:absolute;top:0;bottom:0;left:0;width:130px;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(253,203,77,.2) 50%,rgba(255,255,255,0) 100%);
  animation:izc-shimmer 6s ease-in-out infinite;
}
.izc-eyebrow{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgb(253,203,77)}
.izc-dot{width:7px;height:7px;border-radius:50%;background:rgb(253,190,31);
  animation:izc-pulse 2.4s ease-in-out infinite}
.izc-text{font-size:15px;font-weight:500;color:#fff}
.izc-date{font-size:13px;color:rgba(255,255,255,.6);white-space:nowrap}
.izc-cta{margin-left:auto;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  border-radius:10px;padding:9px 16px;font-size:14px;font-weight:600;color:rgb(28,28,31);
  background:linear-gradient(135deg,rgb(253,203,77),rgb(253,190,31));transition:filter .2s ease}
.izc-ribbon:hover .izc-cta{filter:brightness(1.05)}
.izc-arrow{display:none;width:30px;height:30px;border-radius:50%;flex-shrink:0;
  align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgb(253,203,77),rgb(253,190,31))}

/* мобильная раскладка полосы: две строки, кнопка заменяется стрелкой,
   тап по всей полосе открывает памятку */
@media (max-width:640px){
  .izc-ribbon{gap:10px;padding:12px 14px}
  .izc-eyebrow{order:1;font-size:10px}
  .izc-date{order:2;margin-left:auto}
  .izc-text{order:3;flex:1 1 100%;font-size:14px;line-height:1.35;padding-right:42px}
  .izc-cta{display:none}
  .izc-arrow{display:inline-flex;order:4;position:absolute;right:14px;bottom:12px}
}

/* ---------- 2. Памятка: шторка (ПК) / нижний лист (моб.) ---------- */
.izc-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:14px}
.izc-overlay[hidden]{display:none}
.izc-backdrop{position:absolute;inset:0;background:rgba(12,12,14,.6);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  animation:izc-fade .3s ease both;border:0;padding:0;cursor:pointer}
.izc-sheet{
  position:absolute;top:12px;right:12px;bottom:12px;
  width:min(520px,calc(100vw - 24px));
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border-radius:20px;box-shadow:0 40px 90px -34px rgba(0,0,0,.65);
  animation:izc-slide .4s cubic-bezier(.2,.8,.25,1) both;
}
@media (max-width:700px){
  .izc-sheet{top:auto;left:0;right:0;bottom:0;width:auto;max-height:88vh;
    border-radius:20px 20px 0 0;animation:izc-up .38s cubic-bezier(.2,.8,.25,1) both}
}
/* закрытие */
.izc-overlay.is-closing .izc-backdrop{animation:izc-fade .2s ease reverse both}
.izc-overlay.is-closing .izc-sheet{animation:izc-slide .24s ease reverse both}
@media (max-width:700px){.izc-overlay.is-closing .izc-sheet{animation:izc-up .24s ease reverse both}}

/* шапка памятки */
.izc-head{flex-shrink:0;position:relative;background:rgb(28,28,31);color:#fff;padding:22px 24px 20px}
.izc-head::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,rgb(253,203,77),rgb(253,190,31))}
.izc-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border:none;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;font-size:15px;line-height:1;cursor:pointer;
  transition:background .2s ease}
.izc-close:hover{background:rgba(255,255,255,.2)}
.izc-head h2{margin:0;font-size:24px;font-weight:600;line-height:1.2;max-width:22ch}
.izc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.izc-chip{font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff}
.izc-chip--gold{background:rgba(253,190,31,.18);color:rgb(253,203,77)}

/* тело памятки */
.izc-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:24px;display:flex;flex-direction:column;gap:22px}
.izc-p{margin:0;font-size:15px;line-height:1.6;color:rgb(74,74,78)}
.izc-group{display:flex;flex-direction:column;gap:12px}
.izc-h3{margin:0;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgb(28,28,31)}
.izc-step{display:flex;gap:14px;align-items:flex-start}
.izc-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:rgb(28,28,31);
  background:linear-gradient(135deg,rgb(253,203,77),rgb(253,190,31))}
.izc-step-body{display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.55;color:rgb(74,74,78)}
.izc-muted{font-size:14px;color:rgb(128,128,128)}
.izc-tags{display:flex;flex-wrap:wrap;gap:8px}
.izc-tag{font-size:13px;font-weight:500;padding:7px 14px;border-radius:999px;
  background:rgba(28,28,31,.06);color:rgb(28,28,31)}
.izc-panel{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:14px;
  background:rgb(248,248,248);border:1px solid rgb(234,234,234)}
.izc-list{display:flex;flex-direction:column;gap:7px;font-size:15px;line-height:1.5;color:rgb(74,74,78)}
.izc-prize{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;
  background:#fff;border:1px solid rgb(224,224,224)}
.izc-prize--1{background:linear-gradient(135deg,rgb(255,250,236),rgb(255,244,214));border-color:rgba(253,190,31,.5)}
.izc-prize-medal{font-size:22px;line-height:1}
.izc-prize-place{font-size:12px;font-weight:600;color:rgb(128,128,128)}
.izc-prize-name{font-size:15px;font-weight:600;line-height:1.35;color:rgb(28,28,31)}
.izc-ps{margin:0;font-size:13px;line-height:1.55;color:rgb(160,160,160)}

/* подвал памятки */
.izc-foot{flex-shrink:0;border-top:1px solid rgb(234,234,234);background:#fff;
  padding:14px 24px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.izc-foot-cta{flex:1 1 240px;display:flex;align-items:center;justify-content:center;gap:8px;
  border:none;cursor:pointer;border-radius:12px;padding:14px 22px;
  font-family:inherit;font-size:15px;font-weight:600;color:rgb(28,28,31);
  background:linear-gradient(135deg,rgb(253,203,77),rgb(253,190,31));transition:filter .2s ease}
.izc-foot-cta:hover{filter:brightness(1.05)}
.izc-foot-ghost{border:1px solid rgb(224,224,224);background:#fff;cursor:pointer;border-radius:12px;
  padding:13px 20px;font-family:inherit;font-size:15px;font-weight:600;color:rgb(28,28,31)}
.izc-foot-ghost:hover{background:rgb(248,248,248)}

/* блокировка прокрутки страницы, пока открыта памятка */
html.izc-noscroll,body.izc-noscroll{overflow:hidden}
/* IZBA 2026-09-22 (решение владельца): пока памятка открыта, кнопку и окно чата (/js/claude-chat-widget.js, .izx-chat) прячем */
html.izc-noscroll .izx-chat{display:none}

/* ---------- 3. Анимации ---------- */
@keyframes izc-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes izc-shimmer{0%{transform:translateX(-140%)}55%,100%{transform:translateX(320%)}}
@keyframes izc-pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}
@keyframes izc-fade{from{opacity:0}to{opacity:1}}
@keyframes izc-slide{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}}
@keyframes izc-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .izc-ribbon,.izc-shine,.izc-dot,.izc-sheet,.izc-backdrop{animation:none!important;transition:none!important}
}