/* ================================
   SONIC STORE — store.css (полная версия)
   Красивые поля + адаптация под мобилки
   ================================ */

/* Палитра и эффекты */
:root{
  --bg1:#081c2c;
  --bg2:#1d284d;
  --panel:#0f1628;
  --panel-2:#121b31;
  --text:#ffffff;
  --muted:#aee8ff;
  --accent:#00ffe7;
  --accent-2:#22f6ee;
  --yellow:#ffe53b;
  --danger:#ff6b6b;
  --ring:0 0 0 2px rgba(0,255,231,.28), 0 0 0 6px rgba(0,255,231,.12);
}

/* === База === */
*{box-sizing:border-box}
html,body{height:100%}
body{
  min-height:100vh;
  margin:0;
  background:
    url('/images/bg.png') no-repeat center center fixed,
    radial-gradient(ellipse at 60% 40%, var(--bg1) 0%, var(--bg2) 100%);
  background-size:cover;
  color:var(--text);
  font-family:'Orbitron', Arial, sans-serif;
  overflow-x:hidden;
}

/* === HEADER === */
.sonic-header{
  width:100%;
  background:linear-gradient(90deg, #10153e 60%, #1e284d 100%);
  box-shadow:0 2px 12px 0 #0ff3, 0 1px 0 #181b2f;
  min-height:64px;
  position:fixed; top:0; left:0; z-index:1000;
}
.header-content{
  display:flex; align-items:center; height:64px;
  max-width:1500px; margin:0 auto; justify-content:space-between; padding:0 24px;
}
.logo-animate{
  font-size:2.1rem; letter-spacing:2px; font-weight:900;
  background:linear-gradient(90deg,#00ffe7,#ff48ea,#ffef40,#00ffe7,#0a70ff,#00ffe7);
  background-size:500% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:logoRainbow 5s linear infinite;
  text-shadow:0 0 16px #0ff8, 0 0 44px #09f4;
  margin:0;
}
@keyframes logoRainbow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.burger{display:none}
.nav-links{display:flex; gap:2.2rem; align-items:center}
.nav-links a{
  color:#fff; text-decoration:none; font-size:1.18rem;
  padding:14px 32px; border-radius:24px;
  background:linear-gradient(120deg, #10194a 60%, #163782 100%);
  transition:background .2s, color .2s, transform .15s;
  box-shadow:0 0 18px #00ffe7a2;
}
.nav-links a.active, .nav-links a:hover{
  background:#10285a; color:var(--accent);
  transform:scale(1.08); box-shadow:0 0 26px #00ffe7e0;
}

/* === Блок приветствия / баланс SC === */
.sc-balance-block{
  margin:90px auto 26px;
  max-width:660px; text-align:center; position:relative;
  background:linear-gradient(90deg, #18233a 70%, #21e5e628 180%);
  border-radius:28px; border:2.5px solid #18f3e6;
  box-shadow:0 0 34px #19f8f444; padding:30px 22px 24px;
}
.sc-title-welcome{
  font-size:2.3rem; font-weight:900; letter-spacing:2px; margin:0 0 16px;
  background:linear-gradient(90deg, #00ffe7, #ffe53b);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 22px #00ffe7a9;
}
.sonic-coin{
  font-size:1.28rem; margin-bottom:6px;
  display:flex; align-items:center; justify-content:center; gap:9px;
}
#sonicCoinBalance{color:#12ffe7; font-weight:700; text-shadow:0 0 12px #18eaffbb; font-size:1.18em}
.how-to-earn{
  background:linear-gradient(90deg,#ffe53b,#00ffe7);
  color:#232f3b; border:none; padding:13px 48px; border-radius:18px;
  font-size:1.27rem; margin-top:22px; font-weight:700; cursor:pointer;
  box-shadow:0 0 26px #ffe53b88, 0 0 12px #19ffe2bb;
}
.how-to-earn:hover{background:#ffe53b; color:#171b45}
.skins-switch-btn{
  margin:24px auto 0; display:block;
  background:#12163c; border-radius:18px; font-size:1.38rem;
  color:#00ffe7; padding:14px 70px; box-shadow:0 0 20px #00ffe7c5;
  border:none; cursor:pointer; font-weight:800; letter-spacing:1px;
}
.skins-switch-btn:hover{
  background:linear-gradient(90deg,#18f3e6 0%, #ffe53b 100%);
  color:#1a1a1a; transform:scale(1.06);
}

/* === Категории / Сортировка === */
.category_row{
  display:flex; align-items:center; justify-content:center; gap:30px;
  margin:32px auto 28px; max-width:1300px;
}
.categories-select{
  font-size:1.22rem; border-radius:12px; padding:11px 32px 11px 20px;
  background:linear-gradient(90deg,#18233a 80%, #1bf0ff 180%);
  color:#0cf9ff; border:2.5px solid #18f3e6; min-width:140px; font-weight:700;
}
.sort-label{font-size:1.5rem; color:#ffe53b; font-weight:700; letter-spacing:1px}
.sort-select{
  font-size:1.22rem; border-radius:12px; padding:11px 34px 11px 18px;
  background:linear-gradient(90deg,#181f3a 60%, #0ff 120%);
  color:#0cf9ff; border:2.5px solid #18f3e6; font-weight:700;
}

/* === Сетка товаров === */
.products-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
  max-width:1420px; margin:0 auto 56px; padding:0 16px 16px; justify-items:center;
}
.product-card{
  background:linear-gradient(120deg, #162645 65%, #13373a 130%);
  border-radius:22px; border:3px solid #18f3e699;
  box-shadow:0 6px 38px #19f0e333, 0 0 0 2.5px #13faff88;
  overflow:hidden; display:flex; flex-direction:column; align-items:stretch;
  width:100%; max-width:320px; min-height:400px; position:relative;
  transition:transform .13s, box-shadow .13s;
}
.product-card:hover{transform:scale(1.035); box-shadow:0 10px 40px #0ff8, 0 0 0 3.5px #18f3e6cc}
.product-img-block{width:100%; min-height:168px; max-height:260px; height:70%;
  display:flex; align-items:center; justify-content:center; background:#11192c}
.product-img{width:100%; height:100%; object-fit:cover; border-radius:20px 20px 0 0; box-shadow:0 0 14px #00ffe7cc}
.product-info-block{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:8px 0}
.product-title{
  font-size:1.31rem; color:#ffe53b; font-weight:800; letter-spacing:1.4px;
  text-align:center; margin:10px 0 4px; text-shadow:0 0 14px #ffe53bbb; line-height:1.12em;
}
.product-price{font-size:1.13rem; color:#12ffe7; text-shadow:0 0 14px #12ffe7cc; text-align:center; margin-bottom:7px}
.product-btns-row{width:100%; display:flex; gap:10px; justify-content:center; margin-bottom:3px}
.details-btn,.add-btn{
  background:linear-gradient(90deg, #18f3e6 0%, #ffe53b 100%);
  color:#172e3c; font-size:1.03rem; font-weight:700; border:none; border-radius:14px;
  padding:12px 26px; margin:4px 0; box-shadow:0 0 18px #18f3e677; cursor:pointer;
}
.details-btn:hover,.add-btn:hover{background:#ffe53b; color:#132248}

/* === FAB корзины === */
.cart-fab{
  position:fixed; bottom:28px; right:32px; z-index:2020;
  background:linear-gradient(90deg, #13faff 0%, #ffe53b 100%);
  color:#0a2342; border:none; border-radius:50%; width:68px; height:68px;
  box-shadow:0 0 28px #19f8f477; display:flex; align-items:center; justify-content:center;
  font-size:2.42rem; cursor:pointer;
}
.cart-count-badge{background:#ffef40; color:#0a2342; font-weight:700; border-radius:50%;
  font-size:1.12rem; padding:6px 12px; margin-left:8px; box-shadow:0 0 10px #ffe53b99}

/* === Оверлеи модалок === */
.cart-modal-bg,.product-modal-bg{
  display:none; position:fixed; inset:0; z-index:2222;
  background:rgba(11,20,36,.90); justify-content:center; align-items:center; animation:fadeIn .19s;
}
.cart-modal-bg.active,.product-modal-bg.active{display:flex}
@keyframes fadeInUp{from{opacity:0; transform:translateY(40px)} to{opacity:1; transform:none}}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}

/* === Панели модалок === */
.cart-modal,.product-modal{
  background:linear-gradient(120deg, #18233a 92%, #00ffe722 160%);
  border-radius:22px; max-width:720px; width:min(720px, 96vw);
  padding:28px 18px 19px; box-shadow:0 6px 32px #00ffe7b2, 0 0 0 2.5px #18f3e6bb;
  position:relative; animation:fadeInUp .19s; text-align:center; max-height:88vh; overflow:auto;
}
.close-cart-btn{
  position:absolute; top:9px; right:15px; font-size:2.3rem; color:#19ffe2;
  background:none; border:none; cursor:pointer;
}
.cart-title{font-size:1.55rem; color:var(--accent); font-weight:700; margin-bottom:12px}
.cart-list{max-height:260px; overflow-y:auto; margin-bottom:14px; color:#fff; text-align:left}

/* === Красивые поля форм (универсально для всех форм в модалках) === */
.cart-modal label{font-size:.95rem; color:var(--muted)}
.cart-modal input[type="text"],
.cart-modal input[type="email"],
.cart-modal input[type="tel"],
.cart-modal input[type="number"],
.cart-modal select,
.cart-modal textarea{
  width:100%; padding:12px 14px; border-radius:14px;
  background:#0f1831; border:2px solid rgba(24,243,230,.35);
  color:#fff; outline:none; transition:border-color .15s, box-shadow .15s, background .15s;
}
.cart-modal textarea{min-height:96px; resize:vertical}
.cart-modal input::placeholder, .cart-modal textarea::placeholder{color:rgba(220,240,255,.55)}
.cart-modal input:focus, .cart-modal select:focus, .cart-modal textarea:focus{
  border-color:var(--accent); box-shadow:var(--ring); background:#132447;
}
/* number arrows аккуратно */
.cart-modal input[type="number"]{-moz-appearance:textfield}
.cart-modal input[type="number"]::-webkit-outer-spin-button,
.cart-modal input[type="number"]::-webkit-inner-spin-button{opacity:.7; height:28px}

/* === Строка по списанию SC === */
.order-sc-row{display:flex; align-items:center; gap:13px; margin:16px 0 14px; font-size:1.05rem; color:var(--accent-2)}
.order-sc-row input[type="checkbox"]{width:20px; height:20px; accent-color:#ffe53b}
.order-sc-row img{height:20px; margin-left:6px; filter:drop-shadow(0 0 6px #ffe53baa)}

/* === Резюме (итоги) === */
.cart-summary{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:12px 14px; text-align:left;
}
.cart-summary b{color:#fff}

/* === Кнопки действий === */
.cart-actions{margin-top:14px; text-align:center}
.checkout-btn,.buy-btn{
  font-size:1.18rem; padding:14px 46px; border-radius:17px; font-weight:700;
  background:linear-gradient(90deg, #ffe53b 0%, #22f6ee 100%); color:#1d2233; border:none;
  box-shadow:0 0 22px #22f6ee77; cursor:pointer;
}
.checkout-btn:hover,.buy-btn:hover{filter:brightness(1.12) drop-shadow(0 0 9px #ffe53baa); transform:translateY(-1px)}

/* === Product modal доп.стили === */
.modal-title{font-size:1.36rem; color:#ffe53b; font-weight:800; letter-spacing:1.2px; margin-bottom:10px}
.modal-img{width:100%; max-height:240px; object-fit:contain; border-radius:12px; margin-bottom:12px; background:#222e48}
.modal-content{max-height:210px; overflow-y:auto; text-align:left; font-size:1.02rem; padding:6px 3px 13px}
.modal-qty-row{display:flex; align-items:center; justify-content:center; gap:13px; margin:15px 0 2px}

/* === Формы (идентификаторы для совместимости) === */
#orderForm input, #orderForm select,
#guestOrderForm input, #guestOrderForm select{
  padding:13px 12px; border-radius:12px; border:2px solid rgba(24,243,230,.35);
  margin:0 0 10px; width:100%; font-size:1.05rem; background:#0f1831; color:#fff;
}
#orderForm input:focus, #orderForm select:focus,
#guestOrderForm input:focus, #guestOrderForm select:focus{
  outline:none; border-color:var(--accent); box-shadow:var(--ring); background:#132447;
}
/* сетка форм: десктоп — 2 колонки */
#guestOrderForm, #orderForm{display:grid; grid-template-columns:1fr 1fr; gap:12px}
#guestOrderForm button, #orderForm button{height:48px}

/* === Бейджи (если понадобятся) === */
.badge{font-size:.78em; padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.18)}

/* === Красивые чекбоксы опций в попапе товара === */
.modal-features-ul{padding-left:0;margin:0;list-style:none;max-height:130px;overflow-y:auto}
.modal-features-ul li{
  border:1.2px solid #1de9f3; border-radius:7px; padding:7px 8px; margin-bottom:7px;
  background:rgba(22,32,48,.17); display:flex; align-items:center; transition:border .16s;
}

/* === Прокрутка === */
::-webkit-scrollbar{width:7px; background:#192e48}
::-webkit-scrollbar-thumb{background:#13faff88; border-radius:7px}
::-webkit-scrollbar-thumb:hover{background:#ffe53baa}

/* === Бургер и мобильное меню === */
@media (max-width:900px){
  .burger{
    display:flex; width:40px; height:40px;
    flex-direction:column; justify-content:center; align-items:center;
    cursor:pointer; z-index:110; margin-left:auto;
  }
  .burger-bar{display:block; width:28px; height:4px; background:var(--accent); margin:3px 0; border-radius:3px; box-shadow:0 0 6px #00ffe7a7}
  .nav-links{
    position:fixed; left:0; top:64px; width:100vw;
    flex-direction:column; gap:0;
    background:linear-gradient(130deg, #151d38f2 80%, #0cf9ff11 100%);
    box-shadow:0 6px 30px #00ffe7aa; border-radius:0 0 18px 18px; z-index:120;
    padding:14px 0 10px; transform:translateY(-130%); opacity:0; pointer-events:none;
    transition:transform .27s cubic-bezier(.29,1.27,.61,.91), opacity .16s;
    justify-content:center; align-items:center;
  }
  .nav-links.open{transform:translateY(0); opacity:1; pointer-events:auto}
  .nav-links a{
    width:90vw; text-align:center; margin:0; padding:16px 0; border-radius:10px;
    font-size:1.14rem; box-shadow:none; background:none; border-bottom:1px solid rgba(255,255,255,.08)
  }
  .nav-links a:last-child{border-bottom:none}
}

/* === Адаптив сетки/панелей === */
@media (max-width:1200px){
  .products-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .category_row{flex-direction:column; align-items:flex-start; gap:17px}
  .sc-balance-block{max-width:96vw}
}
@media (max-width:700px){
  .products-grid{grid-template-columns:1fr 1fr; gap:13px}
  .sc-balance-block{margin-top:76px}
  .product-card{max-width:97vw; border-radius:18px}
  .cart-fab{width:56px; height:56px; font-size:1.7rem; right:11px; bottom:13px}
  .cart-modal,.product-modal{width:94vw; max-height:92vh; padding:20px 14px}
  #guestOrderForm, #orderForm{grid-template-columns:1fr}
}

/* Footer (Sonic Store) */
.sonic-footer{
  width:100%;
  background:linear-gradient(90deg,#171b2d 70%,#253479 100%);
  position:relative;
  box-shadow:0 -2px 16px #00ffe7a3;
  padding:12px 0 10px 0;
  font-size:1.02rem;
  color:#b6faff;
  text-align:center;
  letter-spacing:1px;
  margin-top:24px;
}