/* ===========================
   TWINKLE DARK THEME — FULL CSS (FINAL / STABLE)
   под твои классы:
   app-wrapper, wrapper, navbar*, products-container, product-cards, product-card,
   modal*, product-modal*, amount-control*, banner-elem, banner-item-link
   =========================== */

:root{
  --bg0:#07040e;
  --bg1:#0b0614;
  --bg2:#12081f;

  --card: rgba(18, 9, 33, .78);
  --card2: rgba(28, 12, 52, .86);

  --text:#f5f3ff;
  --muted: rgba(245,243,255,.65);

  --violet:#a855f7;
  --violet2:#7c3aed;
  --pink:#ec4899;

  --border: rgba(168,85,247,.18);
  --border2: rgba(236,72,153,.16);

  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --shadow2: 0 28px 90px rgba(0,0,0,.70);

  --glow: 0 0 40px rgba(168,85,247,.45);
  --glow2: 0 0 55px rgba(236,72,153,.35);

  --r-xl: 26px;
  --r-lg: 20px;
  --r-md: 14px;
}

/* ===== GLOBAL ===== */
*{ box-sizing:border-box; }
html, body{
  background:
    radial-gradient(1100px 650px at 78% 20%, rgba(168,85,247,.20), transparent 60%),
    radial-gradient(900px 520px at 20% 78%, rgba(236,72,153,.12), transparent 62%),
    radial-gradient(700px 420px at 55% 55%, rgba(124,58,237,.10), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0)) !important;
  color: var(--text);
}
a{ color: inherit; text-decoration:none; }
img{ display:block; max-width:100%; height:auto; }

/* ===== APP WRAPPER ===== */
.app-wrapper{
  background-image:
    radial-gradient(1100px 650px at 78% 20%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(900px 520px at 20% 78%, rgba(236,72,153,.10), transparent 62%) !important;
  background-color: transparent !important;
  background-repeat: repeat !important;
  color: var(--text);
}

/* ===== TOAST ===== */
.toast-container{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 99999;
}

/* ===== WRAPPER ===== */
.wrapper{ background: transparent !important; }

/* ===== NAVBAR ===== */
.navbar{
  background: linear-gradient(180deg, rgba(24,10,45,.78), rgba(12,6,26,.68)) !important;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.navbar-mobile{ padding: 12px 14px; }
.navbar-brand{
  font-weight: 900;
  letter-spacing: .4px;
  color: var(--text) !important;
}
.navbar-links{ border-top: 1px solid rgba(255,255,255,.06); }
.navbar-nav{ list-style:none; padding:0; margin:0; }
.auth-btns{ gap: 10px; }

.auth-btn,
.profile-btn,
.balance-btn{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(168,85,247,.14) !important;
  color: var(--text) !important;
  border-radius: 999px !important;
  padding: 10px 12px !important;
  transition: transform .15s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  backdrop-filter: blur(10px);
}
.auth-btn:hover,
.profile-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(168,85,247,.35) !important;
  box-shadow: var(--glow);
}
.balance-btn{
  font-weight: 900;
  background: linear-gradient(135deg, rgba(168,85,247,.22), rgba(236,72,153,.14)) !important;
}
.language-switcher .lang-label{
  display:flex;
  align-items:center;
  gap:8px;
}
.navbar-toggler{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  color: var(--text) !important;
}
.navbar-toggler-icon{ opacity:.85; }

/* ===== BANNER TOP ===== */
.banner{
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(168,85,247,.10);
}
.banner img{ width:100%; height:auto; filter:saturate(1.05) contrast(1.03); }

/* ===== GRID ===== */
.grid-wrapper{ gap: 18px !important; }
.left-column,.right-column{ background: transparent !important; }

/* ===== PRODUCTS CONTAINER ===== */
.products-container{
  background: linear-gradient(180deg, rgba(24,10,45,.70), rgba(11,6,22,.62)) !important;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 16px !important;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

/* ===== CATEGORY BUTTONS ===== */
.products-types-buttons{ gap: 10px !important; flex-wrap: wrap !important; }

.app-button.app-button--primary{
  position: relative;
  overflow: hidden;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(168,85,247,.14) !important;
  color: var(--text) !important;
  transition: transform .15s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.app-button.app-button--primary::after{
  content:"";
  position:absolute;
  inset:-50px;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-70%) rotate(12deg);
  opacity: 0;
  transition: opacity .25s ease, transform .55s ease;
  pointer-events:none;
}
.app-button.app-button--primary:hover{
  transform: translateY(-2px);
  border-color: rgba(168,85,247,.34) !important;
  box-shadow: var(--glow);
  background: rgba(168,85,247,.10) !important;
}
.app-button.app-button--primary:hover::after{
  opacity: 1;
  transform: translateX(70%) rotate(12deg);
}
.app-button--active{
  background: linear-gradient(135deg, var(--violet), var(--pink)) !important;
  border-color: transparent !important;
  box-shadow: var(--glow), var(--glow2);
}
.app-button--bold{ font-weight: 900 !important; }

/* ===== SEARCH INPUT ===== */
.search-input{
  margin-top: 12px !important;
  width: 100%;
  background: rgba(10,6,18,.75) !important;
  border: 1px solid rgba(168,85,247,.16) !important;
  color: var(--text) !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.40);
  transition: box-shadow .25s ease, border-color .25s ease, transform .15s ease;
  outline: none;
}
.search-input::placeholder{ color: var(--muted); }
.search-input:focus{
  border-color: rgba(168,85,247,.45) !important;
  box-shadow: 0 0 0 4px rgba(168,85,247,.18), 0 20px 60px rgba(0,0,0,.55);
  transform: translateY(-1px);
}

/* ===== PRODUCT GRID ===== */
.product-cards{
  margin-top: 14px !important;
  gap: 14px !important;
}

/* НЕ ломаем цвета внутри списка */
.product-cards, .product-cards *{ color: inherit; }

/* ===== PRODUCT CARD ===== */
.product-card{
  position: relative;
  display: block;
  background: linear-gradient(180deg, rgba(32,14,62,.72), rgba(12,6,26,.70)) !important;
  background-color: rgba(12,6,26,.70) !important;
  border: 1px solid rgba(168,85,247,.16) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden;
  box-shadow: var(--shadow);
  transform: translateZ(0);
  will-change: transform, box-shadow, filter;
  transition: transform .22s cubic-bezier(.2,.85,.2,1), box-shadow .25s ease, filter .25s ease;
}
.product-card::before{
  content:"";
  position:absolute;
  inset:-70px;
  background:
    radial-gradient(520px 260px at 25% 20%, rgba(168,85,247,.22), transparent 60%),
    linear-gradient(120deg, transparent 35%, rgba(255,255,255,.20) 50%, transparent 65%);
  transform: translateX(-70%) rotate(12deg);
  opacity: 0;
  transition: opacity .25s ease, transform .65s ease;
  pointer-events:none;
}
.product-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  border: 1px solid rgba(236,72,153,0);
  transition: border-color .25s ease;
  pointer-events:none;
}
.product-card:hover{
  transform: translateY(-7px) scale(1.01);
  box-shadow: 0 35px 95px rgba(168,85,247,.30), 0 40px 120px rgba(0,0,0,.70);
  filter: saturate(1.06);
}
.product-card:hover::before{
  opacity: 1;
  transform: translateX(70%) rotate(12deg);
}
.product-card:hover::after{
  border-color: rgba(236,72,153,.22);
}

.product-card-labels{ color: var(--muted) !important; }

/* ===== IMAGE CONTAINER ===== */
.product-card-image-container{
  border-radius: 18px !important;
  margin: 12px 12px 0 12px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.55) !important;
  overflow: hidden;
  position: relative;
  background-color: rgba(255,255,255,.02) !important;
  background-blend-mode: multiply !important;
  background-size: cover !important;
  background-position: center !important;
}
.product-card-image-container::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(520px 260px at 35% 20%, rgba(255,255,255,.20), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.25), transparent 60%);
  opacity: .9;
  pointer-events:none;
}
.product-card-image-container img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1);
  transition: transform .45s cubic-bezier(.2,.95,.2,1);
  will-change: transform;
}
.product-card:hover .product-card-image-container img{ transform: scale(1.10); }

/* ===== FOOTER OF CARD ===== */
.product-card-footer{
  padding: 12px 14px 14px 14px !important;
  background: linear-gradient(180deg, rgba(18,9,33,.35), rgba(10,6,18,.05)) !important;
  background-color: rgba(12,6,26,.55) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
.product-card-name{
  margin: 0 !important;
  font-weight: 900 !important;
  color: var(--text) !important;
  letter-spacing: .2px;
}
.product-card-price{
  margin: 8px 0 0 0 !important;
  font-weight: 900 !important;
  color: #c084fc !important;
}

/* ===========================
   JS SUPPORT (НЕ ПРЯЧЕТ ТОВАРЫ)
   =========================== */
.js-on .product-card{
  opacity: 1;
  transform: translateY(0);
}
.js-on .product-card.is-anim{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.85,.2,1);
}
.js-on .product-card.is-revealed{
  opacity: 1;
  transform: translateY(0);
}

/* плавная загрузка картинок */
.js-on .product-card-image-container img{ opacity: 1; }
.js-on .product-card-image-container img.is-loading{
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.95,.2,1);
}
.js-on .product-card-image-container img.is-loaded{
  opacity: 1;
  transform: scale(1);
}

/* Ripple слой */
.product-card ._ripple{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  border-radius: inherit;
}
.product-card ._ripple span{
  position:absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(168,85,247,.55), rgba(236,72,153,.18), transparent 70%);
  animation: twRipple .55s ease-out forwards;
}
@keyframes twRipple{
  from{ opacity: 1; transform: translate(-50%,-50%) scale(1); }
  to{ opacity: 0; transform: translate(-50%,-50%) scale(22); }
}

/* Glow слой */
.product-card ._glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition: opacity .18s ease;
  mix-blend-mode: screen;
  background: radial-gradient(240px 180px at var(--gx,50%) var(--gy,35%),
    rgba(168,85,247,.35), rgba(236,72,153,.12), transparent 60%);
}

/* ===========================
   RIGHT SIDE BANNERS
   =========================== */
.banner-elem{
  background: linear-gradient(180deg, rgba(32,14,62,.75), rgba(12,6,26,.75)) !important;
  border: 1px solid rgba(168,85,247,.16) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .25s ease;
}
.banner-elem:hover{
  transform: translateY(-4px);
  box-shadow: 0 30px 90px rgba(168,85,247,.25), var(--shadow2);
}
.bunner-title{ color: var(--text) !important; font-weight: 900 !important; }
.banner-content{ color: var(--muted) !important; }

/* ✅ FIX: banner-item-link не белый */
.banner-item-link{
  display:block;
  background: transparent !important;
  color: inherit !important;
  border-radius: var(--r-xl);
}
.banner-item-link:hover{ background: transparent !important; }
.banner-item-link *{ background: transparent !important; }

/* ===== FOOTER ===== */
.footer{ background: transparent !important; color: var(--muted) !important; }
.footer-link a, .footer-links a{ color: rgba(245,243,255,.72) !important; }
.footer-link a:hover, .footer-links a:hover{
  color:#fff !important;
  text-shadow: 0 0 22px rgba(168,85,247,.45);
}

/* ===========================
   MODAL — CENTER + NO PAGE SCROLL
   =========================== */
.modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 3, 10, 0.75);
  backdrop-filter: blur(8px);
  overflow: hidden;
}

.modal-content{
  width: min(560px, 92vw) !important;
  max-height: calc(100vh - 36px) !important;

  border-radius: 26px;
  background: linear-gradient(180deg, rgba(24,10,45,0.92), rgba(12,5,30,0.92));
  border: 1px solid rgba(168,85,247,0.22);
  box-shadow: 0 30px 90px rgba(0,0,0,0.65), 0 25px 70px rgba(168,85,247,0.22);
  color: var(--text);
  padding: 20px;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  overflow: hidden !important; /* чтоб не “листалось” окно целиком */
}

.product-modal{
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center !important;
  min-height: 0;
}

.product-modal-title{
  width: 100% !important;
  text-align: center !important;
  margin: 0;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--text);
  text-shadow: 0 0 12px rgba(168,85,247,0.45);
}

.product-modal-gallery{
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;

  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  box-shadow: 0 15px 45px rgba(0,0,0,0.5);
}
.product-modal-gallery::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(450px 220px at 35% 20%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,0.28), transparent 55%);
  opacity: 0.85;
}
.product-modal-gallery img{
  width: 100%;
  height: min(340px, 34vh) !important;
  object-fit: contain;
  padding: 12px;
}

.product-modal-description{
  width: 100% !important;
  text-align: center !important;

  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(168,85,247,0.16);
  color: var(--muted);
  line-height: 1.45;

  max-height: min(170px, 18vh);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.product-modal-inputs{
  width: 100% !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center !important;
}

.amount-control{
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 12px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(168,85,247,0.18);
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
}

.amount-control-counter{
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(12,6,26,0.5);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 6px 12px;
}
.amount-control-counter-button{
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(168,85,247,0.2);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.22s ease;
}
.amount-control-counter-button:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(168,85,247,0.16), 0 15px 50px rgba(168,85,247,0.18);
}
.amount-control-count{
  min-width: 36px;
  text-align: center;
  font-weight: 900;
  color: var(--text);
}

/* ✅ ЧИТАЕМАЯ ЦЕНА: RUB 25 */
.amount-control-total{
  display: flex;
  align-items: baseline;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 14px;

  background: rgba(0,0,0,.28);
  border: 1px solid rgba(168,85,247,.22);

  color: #fff !important;
  font-weight: 900 !important;
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
}
.amount-control-total-rub{
  margin: 0 !important;
  font-weight: 900 !important;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(245,243,255,.75) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.amount-control-total *{ color: inherit; }

/* footer buttons */
.modal-footer-buttons{
  width: 100% !important;
  display: flex;
  justify-content: center !important;
  gap: 12px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(12,6,26,0.35), rgba(0,0,0,0));
  position: static !important;
  inset: auto !important;
}

.modal-close-button,
.modal-primary-button{
  border-radius: 18px;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 900;
  transition: transform 0.14s ease, box-shadow 0.25s ease, filter 0.25s ease;
  max-width: 240px;
  width: 100%;
}

.modal-close-button{
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
.modal-close-button:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.modal-primary-button{
  border: 0;
  background: linear-gradient(135deg, rgba(168,85,247,0.95), rgba(236,72,153,0.88));
  color: #fff;
  box-shadow: 0 20px 70px rgba(168,85,247,0.3), 0 25px 90px rgba(0,0,0,0.55);
}
.modal-primary-button:hover{
  transform: translateY(-2px);
  filter: saturate(1.05);
  box-shadow: 0 30px 110px rgba(168,85,247,0.4), 0 40px 130px rgba(0,0,0,0.65);
}

/* lock page scroll when modal open (класс добавляет JS) */
body.modal-lock{
  overflow: hidden !important;
  height: 100%;
  touch-action: none;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--violet), var(--pink));
  border-radius: 10px;
}