/* Orbita Store: поверх общего стиля Orbita Stars — цвета товаров и элементы Steam/Nitro */

/* вкладки: голубой — Steam, фиолетовый Discord — Nitro */
.tabs::before { background-color: rgba(42, 157, 244, .2); border-color: rgba(102, 192, 244, .9);
  box-shadow: 0 0 22px rgba(42, 157, 244, .4), inset 0 0 14px rgba(42, 157, 244, .14); }
.tabs[data-active="nitro"]::before { translate: 100% 0; background-color: rgba(88, 101, 242, .26);
  border-color: rgba(140, 150, 255, .95); box-shadow: 0 0 22px rgba(88, 101, 242, .5), inset 0 0 14px rgba(88, 101, 242, .16); }

.presets-3 { grid-template-columns: repeat(3, 1fr); }
.input-row .avatar .pic { width: 20px; height: 20px; margin: 0; }
.nitro-hint { margin: -6px 0 16px; }
.period.basic { border-style: dashed; }
.period:disabled { opacity: .45; cursor: not-allowed; }

.demo-note { margin: 0 0 14px; padding: 10px 14px; border: 1px dashed rgba(255, 200, 61, .6); border-radius: 14px;
  color: #ffd66b; font-size: 14px; }
.gift-code { display: block; margin: 10px 0 14px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 16px;
  background: var(--glass-2); font-size: 14px; word-break: break-all; cursor: pointer; transition: border-color .25s ease; }
.gift-code:hover { border-color: var(--accent); }
.gift-code.copied { border-color: #3ddc84; }
.activate { padding-left: 22px; margin: 0 0 18px; color: var(--soft); display: grid; gap: 4px; }

/* тарифы Nitro: цвет по ценовой категории — серебро, синий, бирюза, фиолет, золото */
.plan { --tier: 160, 170, 190; position: relative; overflow: hidden;
  border-color: rgba(var(--tier), .28); background: linear-gradient(100deg, rgba(var(--tier), .10), rgba(var(--tier), .02) 60%);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.plan::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0;
  background: rgb(var(--tier)); box-shadow: 0 0 12px rgba(var(--tier), .8); }
.plan .price { color: rgb(var(--tier)); }
.plan:hover { border-color: rgba(var(--tier), .55); }
.plan.active { border-color: rgb(var(--tier)); background: linear-gradient(100deg, rgba(var(--tier), .22), rgba(var(--tier), .06) 70%);
  box-shadow: 0 0 22px rgba(var(--tier), .3), inset 0 0 14px rgba(var(--tier), .08); }
.plan[data-tier="basic"] { --tier: 176, 186, 204; }
.plan[data-tier="m1"] { --tier: 77, 163, 255; }
.plan[data-tier="m3"] { --tier: 45, 212, 191; }
.plan[data-tier="m6"] { --tier: 168, 120, 255; }
.plan[data-tier="m12"] { --tier: 255, 196, 61; }
.plan[data-tier="m12"] .price { text-shadow: 0 0 14px rgba(255, 196, 61, .45); }
.tier-badge { margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; vertical-align: .1em;
  color: #1b1300; background: linear-gradient(90deg, #ffe27a, #ffb52e); }
.plan.basic { border-style: solid; }