/* Оформление распродажи: палитра и графика zagadai-zhelanie-11-11. */
:root { --sale-banner-height:154px; }
html { scroll-padding-top:calc(var(--sale-banner-height) + 16px); }
body { padding-top:var(--sale-banner-height); }
.sale-banner { position:fixed; top:0; left:0; right:0; z-index:9000; isolation:isolate; overflow:hidden; padding:10px 0; color:#fff; background:#0b102b; box-shadow:0 6px 24px #090c251c; }
.sale-banner::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#0b102b22,#0b102b99),url('assets/sale-11-11/sky.webp') center 48%/cover; opacity:.8; }
.sale-banner__inner { display:grid; grid-template-columns:144px minmax(0,1fr) auto; align-items:center; gap:28px; padding:18px 24px; border:1px solid #c78cff77; border-radius:18px; background:linear-gradient(105deg,#9d5cf518,#14112a66 70%); box-shadow:inset 0 1px 0 #f1d6ff18,inset 0 0 26px #9a55e80b; }
.sale-banner__digits { position:relative; display:grid; place-items:center; width:144px; height:86px; border:1px solid #d9b1ff66; border-radius:15px; background:linear-gradient(145deg,#ab70ee29,#35205a55); box-shadow:inset 0 1px 1px #f4ddff55,0 8px 20px #05081740; }
.sale-banner__digits>span { display:block; font-size:52px; line-height:1; font-weight:800; letter-spacing:-.07em; padding-right:3px; color:#ead0ff; background:linear-gradient(175deg,#ffffff 4%,#e1c2ff 35%,#ae78ec 51%,#f1d9ff 58%,#b07aea 90%); background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 2px 0 #543073); }
.sale-banner__digits::before,.sale-banner__digits::after { content:""; position:absolute; width:10px; height:10px; background:#e9ccff; clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); }
.sale-banner__digits::before { top:7px; right:9px; }
.sale-banner__digits::after { bottom:7px; left:10px; width:7px; height:7px; }
.sale-banner__copy { margin:0; min-width:0; }
.sale-banner__copy .sale-banner__title { display:block; margin:0 0 7px; color:#e4c5ff; font-size:32px; line-height:1.1; font-weight:700; letter-spacing:-.025em; }
.sale-banner__subtitle { margin:0; color:#f0eaf7; font-size:16px; line-height:1.45; font-weight:500; text-wrap:pretty; }
.sale-banner__button { display:flex; align-items:center; justify-content:center; gap:18px; flex:none; min-height:58px; padding:16px 24px; border:1px solid #ce9cff; border-radius:14px; color:#fff; text-decoration:none; font-size:16px; font-weight:700; background:linear-gradient(110deg,#b76aff,#8345ef 42%,#4e28bf); box-shadow:inset 1px 2px 10px #f5ceff70,inset 0 -2px 13px #9c55ff; }
.sale-banner__button:hover { filter:brightness(1.12); }
.sale-banner__button:focus-visible { outline:3px solid #ffe2ba; outline-offset:4px; }
.sale-banner__button svg { width:24px; height:24px; flex:none; }
#tariffs { scroll-margin-top:0; }
.sale-offer { display:flex; justify-content:space-between; align-items:center; gap:24px; margin:0 0 28px; padding:24px 28px; border:1px solid #b88ae64d; border-radius:14px; color:#fff; background:radial-gradient(ellipse at 0 0,#402065 0,transparent 70%),#0b102b; }
.sale-offer__copy { display:flex; align-items:flex-start; flex-direction:column; gap:12px; min-width:0; }
.sale-day { display:inline-block; max-width:100%; padding:8px 14px; border:1px solid #ddb1ff66; border-radius:8px; background:linear-gradient(135deg,#ad64f9,#7634d8); box-shadow:inset 0 1px 8px #edcaff60; font-size:16px; font-weight:700; line-height:1.4; text-wrap:balance; }
.sale-offer .sale-deadline { margin:0; color:#fff; font-size:24px; font-weight:700; text-wrap:balance; }
.sale-timer { width:240px; flex:none; }
.sale-timer[hidden] { display:none; }
.sale-offer .sale-timer__heading { margin:0 0 8px; color:#ded1f1; font-size:14px; font-weight:600; text-align:center; }
.sale-clock { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; padding:8px 16px; border:1px solid #9e62ec26; border-radius:14px; background:linear-gradient(120deg,#2b234dca,#1d1c3ad9); box-shadow:inset 0 2px 13px #a873ff29; font-size:32px; font-weight:700; font-variant-numeric:tabular-nums; text-align:center; }
.sale-clock b { color:#b880f1; padding:0 6px; }
.sale-clock-labels { display:grid; grid-template-columns:repeat(3,1fr); color:#c9b5ef; font-size:12px; text-align:center; margin-top:4px; }
.tariff-grid .price span.sale-discount { justify-self:start; display:inline-block; margin:4px 0 10px; padding:8px 18px; border:1px solid #bf90ed; border-radius:10px; color:#fff; background:linear-gradient(115deg,#9947ee,#6421d3); font-size:24px; font-weight:700; line-height:1.2; }
.sale-gifts { display:flex; align-items:flex-start; gap:14px; padding:18px; margin:18px 0 4px; border:1px solid #d7c3ef; border-radius:12px; background:#f6efff; color:#291747; }
.sale-gifts img { width:48px; height:52px; object-fit:contain; flex:none; }
.sale-gifts h4 { margin:0 0 7px; font-size:16px; font-weight:700; }
.sale-gifts p { margin:0; font-size:16px; line-height:1.5; text-wrap:pretty; }
.tariff-grid .featured-vip .sale-gifts { color:#fff; background:#183dbb; border-color:#9ab4ff70; }
.tariff-grid .featured-vip .sale-gifts p { color:#f0f3ff; }
@media (max-width:900px) {
  .sale-banner__inner { grid-template-columns:112px minmax(0,1fr) auto; gap:18px; padding:16px 18px; }
  .sale-banner__digits { width:112px; height:80px; }
  .sale-banner__digits>span { font-size:42px; }
  .sale-banner__copy .sale-banner__title { font-size:28px; }
  .sale-banner__subtitle { font-size:14px; }
  .sale-banner__button { padding:14px 16px; font-size:14px; gap:10px; }
}
@media (max-width:680px) {
  :root { --sale-banner-height:206px; }
  .sale-banner { padding:8px 0; }
  .sale-banner__inner { width:calc(100% - 20px); grid-template-columns:82px minmax(0,1fr); gap:12px; padding:14px; border-radius:14px; }
  .sale-banner__digits { width:82px; height:72px; border-radius:12px; }
  .sale-banner__digits>span { font-size:32px; }
  .sale-banner__copy .sale-banner__title { font-size:24px; margin-bottom:5px; }
  .sale-banner__subtitle { font-size:13px; line-height:1.4; }
  .sale-banner__button { grid-column:1/-1; width:100%; min-height:44px; padding:10px 12px; font-size:14px; }
  .sale-offer { flex-direction:column; align-items:stretch; padding:22px; gap:22px; }
  .sale-day { font-size:14px; }
  .sale-offer .sale-deadline { font-size:21px; }
  .sale-timer { width:240px; max-width:100%; align-self:center; }
  .sale-gifts { padding:14px; gap:10px; }
  .sale-gifts p { font-size:15px; }
}