/* UI 3 — «Сервисы и инструменты» ( theme/ui3/inc/offers.php )
   One calm panel with category tabs ( radio + label, no JS ). Each category
   has one accent: --ga on dark grounds, --ga-d on light ones. Used on the
   public bio page ( follows the page theme ) and on the payment page /r/. */

.ofr{
  --o-ink:var(--ink,#0d1f1a); --o-ink2:var(--ink-3,#5d6d66);
  --o-panel:var(--surface,#fff); --o-rule:rgba(13,31,26,.09); --o-hover:rgba(13,31,26,.035);
  container-type:inline-size; container-name:ofr;
  position:relative; width:100%; margin-top:18px; text-align:start; color:var(--o-ink);
}
.ofr *{box-sizing:border-box}

.bio3 .ofr{
  --o-ink:var(--bi); --o-ink2:var(--bi2);
  --o-panel:color-mix(in srgb,#080c0b 62%,transparent); --o-rule:rgba(255,255,255,.09); --o-hover:rgba(255,255,255,.045);
  margin-top:22px;
}
.bio3:is(.bt-champagne,.bt-pearl,.bt-light,.bt-ocean,.bt-sunset,.bt-mono) .ofr{
  --o-panel:rgba(255,255,255,.9); --o-rule:color-mix(in srgb,var(--bi) 10%,transparent); --o-hover:color-mix(in srgb,var(--bi) 4%,transparent);
}

/* accents per category */
.ofr-g--crypto    { --ga:#6fe0a8; --ga-d:#1d6b47; }
.ofr-g--earn      { --ga:#f2c46b; --ga-d:#7a5410; }
.ofr-g--freelance { --ga:#8fc2f5; --ga-d:#22578c; }
.ofr-g--privacy   { --ga:#7fd8d4; --ga-d:#11646a; }
.ofr-g--growth    { --ga:#c9a8f5; --ga-d:#5e3f91; }
.ofr :is(.ofr-tab,.ofr-panel){--gx:var(--ga-d)}
.bio3 .ofr :is(.ofr-tab,.ofr-panel){--gx:var(--ga)}
.bio3:is(.bt-champagne,.bt-pearl,.bt-light,.bt-ocean,.bt-sunset,.bt-mono) .ofr :is(.ofr-tab,.ofr-panel){--gx:var(--ga-d)}

/* ---------------------------------------------------------------- heading */
.ofr-head{margin:0 0 12px}
.ofr-title{margin:0;color:var(--o-ink);font:650 clamp(19px,5vw,22px)/1.15 var(--serif,Georgia,serif);letter-spacing:-.02em}
.ofr-sub{margin:4px 0 0;color:var(--o-ink2);font:500 12.5px/1.45 var(--font)}

/* ---------------------------------------------------------------- tabs */
.ofr-radio{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.ofr-tabs{display:flex;gap:5px;margin:0 -2px;padding:2px;overflow-x:auto;scrollbar-width:none;
}
@container ofr (max-width:500px){
  .ofr-tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
}
.ofr-tabs::-webkit-scrollbar{display:none}
.ofr-tab{display:inline-flex;align-items:center;gap:6px;flex:none;height:30px;padding:0 10px 0 8px;border-radius:999px;
  border:1px solid var(--o-rule);color:var(--o-ink2);font:650 12px/1 var(--font);white-space:nowrap;cursor:pointer;user-select:none;
  transition:background .18s,border-color .18s,color .18s}
.ofr-tab svg.i{width:13px;height:13px;color:var(--gx);opacity:.75}
.ofr-tab:hover{color:var(--o-ink);border-color:color-mix(in srgb,var(--gx) 40%,var(--o-rule))}

/* ---------------------------------------------------------------- panels */
.ofr-panels{display:grid;margin-top:10px;border:1px solid var(--o-rule);border-radius:16px;background:var(--o-panel);overflow:hidden}
.ofr-panel{grid-area:1/1;margin:0;padding:4px;list-style:none;visibility:hidden;opacity:0;transform:translateY(4px);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.ofr-panel > li{margin:0;padding:0}
.ofr-panel > li + li{border-top:1px solid var(--o-rule);margin-inline:12px}
.ofr-panel > li + li .ofr-row{margin-inline:-12px}

.ofr-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border-radius:12px;
  color:var(--o-ink);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background .16s}
.ofr-row:hover{background:var(--o-hover);color:var(--o-ink)}
.ofr-row:focus-visible{outline:2px solid var(--gx);outline-offset:-2px;color:var(--o-ink)}

.ofr-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:color-mix(in srgb,var(--gx) 15%,transparent);color:var(--gx)}
.ofr-ic svg.i{width:18px;height:18px}

.ofr-copy{display:grid;gap:2px;min-width:0}
.ofr-t{color:var(--o-ink);font:700 14px/1.25 var(--font);letter-spacing:-.005em}
.ofr-d{color:var(--o-ink2);font:500 12.5px/1.4 var(--font);text-wrap:pretty}

.ofr-go{display:flex;align-items:center;gap:8px;min-width:0}
.ofr-dom{color:var(--o-ink2);font:600 11px/1 var(--font);white-space:nowrap}
.ofr-arr{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--o-rule);color:var(--o-ink2);
  transition:background .16s,border-color .16s,color .16s}
.ofr-arr svg.i{width:13px;height:13px}
.ofr-row:is(:hover,:focus-visible) .ofr-arr{background:var(--gx);border-color:var(--gx);color:#fff}
.bio3 .ofr-row:is(:hover,:focus-visible) .ofr-arr{color:#0b100f}
.bio3:is(.bt-champagne,.bt-pearl,.bt-light,.bt-ocean,.bt-sunset,.bt-mono) .ofr-row:is(:hover,:focus-visible) .ofr-arr{color:#fff}

/* active tab + panel */
#ofr-t-crypto:checked    ~ .ofr-tabs [for="ofr-t-crypto"],
#ofr-t-earn:checked      ~ .ofr-tabs [for="ofr-t-earn"],
#ofr-t-freelance:checked ~ .ofr-tabs [for="ofr-t-freelance"],
#ofr-t-privacy:checked   ~ .ofr-tabs [for="ofr-t-privacy"],
#ofr-t-growth:checked    ~ .ofr-tabs [for="ofr-t-growth"]{
  background:color-mix(in srgb,var(--gx) 14%,transparent);border-color:color-mix(in srgb,var(--gx) 45%,transparent);color:var(--o-ink)}
#ofr-t-crypto:checked    ~ .ofr-tabs [for="ofr-t-crypto"] svg.i,
#ofr-t-earn:checked      ~ .ofr-tabs [for="ofr-t-earn"] svg.i,
#ofr-t-freelance:checked ~ .ofr-tabs [for="ofr-t-freelance"] svg.i,
#ofr-t-privacy:checked   ~ .ofr-tabs [for="ofr-t-privacy"] svg.i,
#ofr-t-growth:checked    ~ .ofr-tabs [for="ofr-t-growth"] svg.i{opacity:1}
#ofr-t-crypto:focus-visible    ~ .ofr-tabs [for="ofr-t-crypto"],
#ofr-t-earn:focus-visible      ~ .ofr-tabs [for="ofr-t-earn"],
#ofr-t-freelance:focus-visible ~ .ofr-tabs [for="ofr-t-freelance"],
#ofr-t-privacy:focus-visible   ~ .ofr-tabs [for="ofr-t-privacy"],
#ofr-t-growth:focus-visible    ~ .ofr-tabs [for="ofr-t-growth"]{outline:2px solid var(--gx);outline-offset:2px}
#ofr-t-crypto:checked    ~ .ofr-panels .ofr-p--crypto,
#ofr-t-earn:checked      ~ .ofr-panels .ofr-p--earn,
#ofr-t-freelance:checked ~ .ofr-panels .ofr-p--freelance,
#ofr-t-privacy:checked   ~ .ofr-panels .ofr-p--privacy,
#ofr-t-growth:checked    ~ .ofr-panels .ofr-p--growth{visibility:visible;opacity:1;transform:none;transition-delay:0s}

/* tabs without icons when space is short */
@container ofr (max-width:560px){
  .ofr-tab{padding:0 11px}
  .ofr-tab svg.i{display:none}
}
/* narrow: drop the domain, keep the arrow */
@container ofr (max-width:420px){
  .ofr-dom{display:none}
  .ofr-row{gap:11px;padding:11px 10px}
  .ofr-ic{width:36px;height:36px}
  .ofr-t{font-size:13.5px}
  .ofr-d{font-size:12px}
}

/* ---------------------------------------------------------------- Adgora unit */
.ofr .ofr-ad-slot{margin-top:8px;min-height:1px}
.ofr .ofr-ad{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:0;margin:0;padding:11px 12px;
  border:1px dashed var(--o-rule);border-radius:16px;background:transparent;color:var(--o-ink);text-decoration:none;overflow-wrap:break-word}
.ofr .ofr-ad[hidden]{display:none}
.ofr .ofr-ad:hover{background:var(--o-hover);color:var(--o-ink)}
.ofr .ofr-ad:focus-visible{outline:2px solid var(--o-ink2);outline-offset:2px}
.ofr .ofr-ad .bio3-promo-icon.is-ad{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;overflow:hidden;background:var(--o-hover);color:var(--o-ink2)}
.ofr .ofr-ad .bio3-promo-icon img{width:100%;height:100%;object-fit:cover}
.ofr .ofr-ad .bio3-ad-label{display:block;margin-bottom:2px;color:var(--o-ink2);font:700 9.5px/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase}
.ofr .ofr-ad strong{display:block;color:var(--o-ink);font:700 13.5px/1.25 var(--font)}
.ofr .ofr-ad small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:2px;color:var(--o-ink2);font:500 12px/1.4 var(--font)}
.ofr .ofr-ad small[hidden]{display:none}
.ofr .ofr-ad .bio3-promo-arrow{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--o-rule);color:var(--o-ink2)}
.ofr .ofr-ad .bio3-promo-arrow svg.i{width:13px;height:13px}

/* ---------------------------------------------------------------- payment page */
.pp3-ofr{width:100%;margin:16px 0 0}
.pp3-ofr .ofr{margin-top:0;padding:18px 16px 16px;border:1px solid var(--gold-line,#e6d3a5);border-radius:24px;background:var(--surface,#fff);box-shadow:var(--sh-2,0 10px 30px -20px rgba(0,0,0,.3))}
.pp3-ofr .ofr-panels{--o-panel:var(--surface-2,#fdfaf3)}
@media (max-width:420px){.pp3-ofr .ofr{padding:16px 12px 12px;border-radius:22px}}

@media (prefers-reduced-motion:reduce){
  .ofr-panel,.ofr-row,.ofr-arr,.ofr-tab{transition:none}
}

/* ---------------------------------------------------------------- tool pages ( ui3_offers_band / download steps ) */
.tl3-ofr{margin-top:0}
.section-sm:has(+ .tl3-ofr){padding-bottom:clamp(20px,3vw,32px)}
.tl3-ofr .ofr{margin-top:0;padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:var(--r-lg,24px);background:var(--surface);
  --o-panel:transparent;--o-rule:var(--line);--o-hover:color-mix(in srgb,var(--ink) 4%,transparent)}
.tl3-ofr .ofr-head{margin-bottom:18px}
.tl3-ofr .ofr-title{font-size:clamp(24px,3vw,32px)}
.tl3-ofr .ofr-sub{margin-top:8px;font-size:14.5px;color:var(--ink-3)}
.tl3-ofr .ofr-tab{height:34px;padding:0 14px 0 12px;font-size:13px}
.tl3-ofr .ofr-panels{margin-top:14px;border:0;border-radius:0;overflow:visible}
@container ofr (min-width:700px){
  .tl3-ofr .ofr-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;padding:0}
  .tl3-ofr .ofr-panel > li + li{border-top:0;margin-inline:0}
  .tl3-ofr .ofr-panel > li + li .ofr-row{margin-inline:0}
  .tl3-ofr .ofr-row{height:100%;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2,transparent)}
  .tl3-ofr .ofr-row:hover{border-color:color-mix(in srgb,var(--gx) 45%,var(--line))}
  .tl3-ofr .ofr-row{grid-template-columns:auto minmax(0,1fr);align-items:start;row-gap:12px}
  .tl3-ofr .ofr-go{grid-column:2;justify-content:space-between;align-self:end}
}
@container ofr (max-width:699px){
  .tl3-ofr .ofr-panels{border:1px solid var(--line);border-radius:16px;overflow:hidden}
}
:root[data-theme="dark"] .tl3-ofr .ofr :is(.ofr-tab,.ofr-panel){--gx:var(--ga)}
:root[data-theme="dark"] .tl3-ofr .ofr-row:is(:hover,:focus-visible) .ofr-arr{color:#0b100f}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tl3-ofr .ofr :is(.ofr-tab,.ofr-panel){--gx:var(--ga)}
  :root:not([data-theme="light"]) .tl3-ofr .ofr-row:is(:hover,:focus-visible) .ofr-arr{color:#0b100f}
}
.tl3-ofr-band{padding-top:clamp(28px,4vw,56px)}