/* ============================================================================
   autodelivery.css — общий вид разделов автовыдачи: /stars и /premium-telegram.

   Вынесено из stars.php, когда премиум стал отдельной страницей: держать две
   копии одной вёрстки на этом проекте уже пробовали (panel-adm и panel-adm2),
   и они неизбежно разъезжаются.
   ========================================================================== */

/* Ширину берём от колонки сайта (750px), а не свою: при max-width:560px свитч
   и карточки не попадали в одну линию с поиском в шапке и страница смотрелась
   вставленной откуда-то ещё. Отступ 10px повторяет padding шапки, поэтому
   левый край совпадает с поисковой строкой. */
.starsWrap{width:100%;box-sizing:border-box;padding:0 10px;margin:0 auto;
    color:var(--text-color);}

/* Свитч: подложка-таблетка стоит под активным разделом. Это ссылки, а не
   вкладки — Stars и Premium теперь разные страницы, и таблетка не едет, а
   сразу отрисована на месте: анимировать нечего, переход перезагружает страницу.

   Контейнер именно flex, а НЕ grid: у абсолютно позиционированного элемента
   внутри грида точкой отсчёта становится ячейка, а не вся полоса, и проценты
   ширины со сдвигом считаются не от того — таблетка уезжала на треть пути.

   Скругление 30px — ровно такое же, как у поисковой строки в шапке; у
   вложенных элементов на 4px меньше, на толщину подложки, иначе углы
   таблетки не лягут в углы полосы. */
.prodSwitch{position:relative;display:flex;
    background:var(--secondary-bg-color);border-radius:30px;padding:4px;margin:2px 0 30px;}
.prodSwitch a{flex:1 1 0;min-width:0;position:relative;z-index:1;
    display:flex;align-items:center;justify-content:center;text-decoration:none;
    color:var(--hint-color);font-family:Roboto-Medium;font-size:14px;
    padding:11px 6px;border-radius:26px;cursor:pointer;transition:color .22s;}
.prodSwitch a.on{color:#fff;cursor:default;}
.prodPill{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);
    border-radius:26px;background:var(--button-color);}
.prodSwitch.p2 .prodPill{transform:translateX(100%);}

.starsHero{display:flex;justify-content:center;margin:6px 0 2px;}
.starsHero > div{width:132px;height:132px;}

.starsTitle{display:block;text-align:center;font-family:Roboto-Medium;
    font-size:22px;line-height:1.25;margin-bottom:8px;}
.starsLead{text-align:center;color:var(--hint-color);font-size:13.5px;
    line-height:1.5;margin:0 auto 22px;max-width:44ch;}

.starsLabel{display:flex;align-items:baseline;justify-content:space-between;
    gap:12px;margin:0 0 8px;}
.starsLabel b{font-family:Roboto-Medium;font-size:15px;}
.starsLabel a{color:var(--link-color);font-size:13px;text-decoration:none;cursor:pointer;}

.starsField{display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;
    margin-bottom:20px;border-radius:14px;background:var(--secondary-bg-color);
    border:1px solid transparent;transition:border-color .15s;}
.starsField:focus-within{border-color:var(--button-color);}
.starsField.bad{border-color:#e8453c;}
.starsField i{color:var(--hint-color);font-size:15px;}
.starsField .lot{width:24px;height:24px;flex:0 0 24px;}
.starsField input{flex:1 1 auto;min-width:0;background:none;border:0;outline:none;
    color:var(--text-color);font-family:Roboto-Regular;font-size:15px;}
.starsField input::placeholder{color:var(--hint-color);}
.starsField .fieldSum{color:var(--hint-color);font-size:14px;white-space:nowrap;
    font-variant-numeric:tabular-nums;}

/* Свой спиннер, а не иконка шрифта: у Font Awesome собственные правила
   отображения, они перебивали display:none и кольцо висело постоянно. */
.starsSpin{display:none;flex:0 0 18px;width:18px;height:18px;border-radius:50%;
    border:2px solid color-mix(in srgb, var(--hint-color) 32%, transparent);
    border-top-color:var(--button-color);
    animation:starsSpin .7s linear infinite;}
.starsField.busy .starsSpin{display:block;}
@keyframes starsSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){ .starsSpin{animation-duration:2.2s;} }

.starsOff{margin:0 0 18px;padding:12px 14px;border-radius:14px;font-size:13px;line-height:1.45;
    background:color-mix(in srgb, #e8a23c 14%, transparent);
    border:1px solid color-mix(in srgb, #e8a23c 34%, transparent);}

.starsErr{margin:-14px 0 18px;font-size:12.5px;line-height:1.45;color:#e8453c;display:none;}
.starsErr.on{display:block;}
.starsErr.warn{color:#e8a23c;}
/* Удачная покупка — тот же блок, что и ошибки: сообщение появляется
   там, где человек уже привык его искать. */
.starsErr.ok{color:#3ddc84;}

.recipCard{display:flex;align-items:center;gap:12px;height:62px;padding:0 10px 0 8px;
    margin-bottom:20px;border-radius:14px;background:var(--secondary-bg-color);
    border:1.5px solid var(--button-color);}
.recipCard[hidden]{display:none;}
.recipCard .ava{flex:0 0 42px;width:42px;height:42px;border-radius:50%;
    background:var(--bg-color) center/cover no-repeat;
    box-shadow:0 0 0 2px var(--button-color);}
.recipCard .who{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.recipCard .who b{font-family:Roboto-Medium;font-size:15px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;}
.recipCard .who span{font-size:13px;color:var(--hint-color);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;}
.recipCard .recipOk{color:var(--button-color);font-size:16px;flex:0 0 auto;}
.recipCard .recipClear{flex:0 0 32px;width:32px;height:32px;border:0;border-radius:50%;
    background:none;color:var(--hint-color);font-size:15px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;}
.recipCard .recipClear:hover{background:var(--bg-color);color:var(--text-color);}

.packs{display:flex;flex-direction:column;gap:8px;}
.pack{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
    background:var(--secondary-bg-color);border:1.5px solid transparent;
    cursor:pointer;user-select:none;transition:border-color .15s,background .15s;}
.pack:hover{background:color-mix(in srgb, var(--secondary-bg-color) 80%, #ffffff);}
.pack.on{border-color:var(--button-color);}
.pack .dot{flex:0 0 18px;width:18px;height:18px;border-radius:50%;
    border:2px solid var(--hint-color);position:relative;}
.pack.on .dot{border-color:var(--button-color);}
.pack.on .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;
    background:var(--button-color);}
.pack .ico{flex:0 0 auto;display:flex;align-items:center;}
.pack .ico img{width:19px;height:19px;display:block;}
.pack .ico img + img{margin-left:-7px;}
.pack .ico .tierIco{display:block;width:26px;height:26px;}
.pack .ico .tierIco svg{display:block;width:100%;height:100%;}
.pack .nm{flex:1 1 auto;font-family:Roboto-Medium;font-size:14.5px;}
.pack .nm small{display:block;font-family:Roboto-Regular;font-size:12px;
    color:var(--hint-color);margin-top:2px;}
.pack .pr{font-family:Roboto-Medium;font-size:14.5px;white-space:nowrap;
    font-variant-numeric:tabular-nums;}

.packMore{margin-top:8px;height:46px;border-radius:14px;background:var(--secondary-bg-color);
    color:var(--link-color);display:flex;align-items:center;justify-content:center;gap:8px;
    font-size:14px;cursor:pointer;user-select:none;}
.packHidden{display:none;}

.starsPay{margin:22px 0 10px;height:52px;width:100%;border:0;border-radius:14px;
    background:var(--button-color);color:var(--button-text-color);
    font-family:Roboto-Medium;font-size:15.5px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:opacity .15s;}
.starsPay[disabled]{opacity:.45;cursor:default;}

.starsNote{margin:0 0 28px;font-size:12.5px;line-height:1.5;color:var(--hint-color);
    text-align:center;}