/* =========================
   style3.css (new skin)
   Layout preserved
   ========================= */

:root{
  --bg: #0b1020;          /* общий фон */
  --bg2: #0f1730;         /* вторичный фон */
  --card: #111a33;        /* карточки */
  --card2: #0f1938;       /* альтернативный блок */
  --text: #eaf0ff;        /* основной текст */
  --muted: rgba(234,240,255,.72);
  --border: rgba(255,255,255,.10);

  --accent: #00e5ff;      /* акцент */
  --accent2: #b4ff39;     /* второй акцент */
  --danger: #ff3d6e;

  --shadow: 0 18px 55px rgba(0,0,0,.45);
  --shadowSm: 0 10px 28px rgba(0,0,0,.35);

  --radius: 14px;
  --radiusSm: 10px;
}

/* базовое */
html{ height: 100%; }
*, a:focus{ outline: none; }

body{
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  margin:0;
  padding:0;
  height: 100%;
  color: var(--text);

  /* новый фон */
  background:
    radial-gradient(1100px 680px at 15% -10%, rgba(0,229,255,.22), transparent 55%),
    radial-gradient(1000px 650px at 95% 0%, rgba(180,255,57,.12), transparent 55%),
    radial-gradient(900px 600px at 40% 110%, rgba(255,61,110,.10), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}

/* ссылки */
a{
  font-family: inherit;
  color: var(--text);
  text-decoration: none;
  transition: color .18s ease, opacity .18s ease;
}
a:hover{ opacity: .92; }

/* обертки как были */
.wrapper{ display: table; height: 100%; width:100% }
.wrapper2{ display: table-row; height: 100% }

/* HEADER */
.header{
  background: rgba(9, 12, 28, .70);
  height:60px;
  line-height: 60px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);

  /* “стекло” (не ломает верстку) */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.header2{
  max-width: 1200px;
  margin:0 auto;
  white-space: nowrap;
  overflow: hidden;
}

/* логотип */
.logo{ display:inline-block; cursor:pointer; margin-left:20px; margin-top:0; }
.logo img{ width:184px; filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); }

/* меню */
.menu{ float:right; color: white; font-size:14px; }
.menu a{ color: rgba(234,240,255,.9); }
.menu div{
  margin:0 18px;
  cursor:pointer;
  display: inline-block;
  padding: 0 10px;
  border-radius: 999px;
  transition: background-color .18s ease, transform .12s ease;
}
.menu div:hover{
  background: rgba(255,255,255,.07);
  transform: translateY(-1px);
}
.menu a:hover{ color: var(--accent2); }

/* поиск */
.search{
  margin-top:3px;
  margin-left:20px;
  float:left;
  cursor:pointer;
  margin-right:25px;
}
.searchpanel{ float:right; margin-top:-1px; }

.search2{
  margin-top:3px;
  margin-left:20px;
  float:right;
  cursor:pointer;

  width:200px;
  height:40px;

  /* новый вид */
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: rgba(234,240,255,.92);
  padding: 0 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.searchform{
  display:none;
  cursor:pointer;
  margin-right:20px;
  background:none;
  border:none;
  color:white;
  border-bottom: 1px solid rgba(255,255,255,.55);
  border-radius: 0;
  border-color: rgba(255,255,255,.55);
  outline: 0;
}
.searchon{
  display:none;
  margin-top:3px;
  float: left;
  margin-right:5px;
}

/* контент */
.content{
  margin:0 auto;
  padding:20px;
  margin-top:20px;
  max-width: 1200px;
}

/* заголовки */
h1{
  font-size:36px;
  font-weight:600;
  margin:0px;
  margin-left:30px;
  max-width:800px;
  letter-spacing: -0.02em;
}
h2{
  font-size:32px;
  font-weight:600;
  margin:0px;
  margin-left:30px;
  color: rgba(234,240,255,.95);
  max-width: 800px;
  letter-spacing: -0.02em;
}

/* правый оффер */
.offer{
  width: 320px;
  float:right;
  text-align:center;
  padding-left:10px;
}
.cards{ display: inline-block; }

/* звезды */
.stars img{ width:22px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.25)); }
.stars{ margin-top:10px; }
.offerscore{ margin-top:-5px; color: rgba(234,240,255,.75); }
.offertext{
  text-align:left;
  padding:5px;
  margin-top:15px;
  color: rgba(234,240,255,.72);
}

/* карточки списка (card1) */
.cardsarea{ margin:40px 0; }

.card1{
  background: linear-gradient(180deg, rgba(17,26,51,.92), rgba(15,25,56,.92));
  height:120px;
  margin:15px 0;

  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadowSm);
}
.card1:after{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  content: "";
}

.number{
  display:inline-block;
  width:150px;
  vertical-align: middle;
  text-align:center;
  font-size: 34px;

  /* градиентный текст (не влияет на верстку) */
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text{
  display:inline-block;
  vertical-align: middle;
  width:480px;
  padding:5px;
  color: rgba(234,240,255,.92);
}
.btn{
  display:inline-block;
  vertical-align: middle;
  padding-right:15px;
  width:200px;
}

/* кнопка */
.button{
  padding:12px 25px;
  text-align:center;
  font-weight:700;
  border-radius: 12px;
  cursor:pointer;
  font-size:16px;

  color: #04121a;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 100%);
  box-shadow: 0 14px 30px rgba(0,229,255,.18), 0 12px 26px rgba(180,255,57,.10);
  transition: transform .12s ease, filter .18s ease, box-shadow .18s ease;
}
.button:hover{
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow: 0 18px 40px rgba(0,229,255,.20), 0 14px 30px rgba(180,255,57,.12);
}
.button:active{
  transform: translateY(0px);
  filter: saturate(1.0);
}

/* текст в карточке */
.textheader{
  font-size:18px;
  font-weight:700;
  color: rgba(234,240,255,.96);
}

/* footer */
.footer{
  background: rgba(9,12,28,.85);
  width:100%;
  color: rgba(234,240,255,.62);
  text-align:center;
  padding-top:10px;
  padding-bottom:10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* каталог */
.catalog-container{ max-width: 100%; margin: 0 auto; padding: 0 20px; }

.search-container{ margin-bottom: 30px; text-align: center; }
.search-container input[type="text"]{
  padding: 12px 14px;
  font-size: 16px;
  width: 100%;
  max-width: 600px;

  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: rgba(234,240,255,.92);
  box-shadow: 0 12px 24px rgba(0,0,0,.25);
}
.search-container input[type="text"]::placeholder{ color: rgba(234,240,255,.55); }

.letter-nav{ text-align:center; margin-bottom:30px; }
.letter-nav a{
  margin: 0 5px;
  font-size: 18px;
  color: rgba(234,240,255,.86);
  text-decoration:none;
  border-bottom: 1px solid transparent;

  display:inline-block;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease;
}
.letter-nav a:hover{
  border-bottom: 1px solid transparent;
  background: rgba(0,229,255,.10);
  box-shadow: 0 16px 30px rgba(0,0,0,.25);
  transform: translateY(-1px);
}

.letter-section{
  margin-bottom:30px;
  padding:10px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadowSm);
}
.letter-section h2{
  font-size: 34px;
  color: rgba(234,240,255,.95);
  padding-bottom: 5px;
  margin-bottom: 10px;

  border-bottom: none;
  max-width:none;
  text-align:left;
  margin-left:30px;
  margin-right:30px;
  position: relative;
}
.letter-section h2:after{
  content:"";
  display:block;
  height: 3px;
  width: 90px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

/* список магазинов — расположение как было (grid), только стиль */
.store-list{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:15px;
  list-style-type:none;
  padding:0;
  margin:0;
}
.store-list li{
  padding: 0;
  background: linear-gradient(180deg, rgba(17,26,51,.88), rgba(15,25,56,.88));
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
.store-list li:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.32);
  border-color: rgba(0,229,255,.22);
}
.store-list li a{
  text-decoration:none;
  color: rgba(234,240,255,.92);
  transition: color .18s ease;
  display:block;
  padding: 10px 12px;
}
.store-list li a:hover{ color: var(--accent2); }

/* moreinfo — читаемо на темном */
.moreinfo{
  padding-top:20px;
  max-width:845px;
  font-size: 18px;
  color: rgba(234,240,255,.86);
}
.moreinfo p{
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 25px;
  color: rgba(234,240,255,.82);
}
.moreinfo h2{
  font-size: 28px;
  border-left: 5px solid var(--accent);
  padding-left: 15px;
  margin-top: 30px;
  margin-bottom: 20px;
  font-weight: 800;
  color: rgba(234,240,255,.95);
}
.moreinfo ul{ list-style-type: disc; padding-left:20px; margin:0; }
.moreinfo ul li{ margin-bottom:10px; line-height:1.5; }
.moreinfo ul li::marker{ color: var(--accent2); font-size:18px; }
.moreinfo ol{ list-style-type: decimal; padding-left:20px; margin:0; }
.moreinfo ol li{ margin-bottom:10px; line-height:1.5; }

.moreinfo table{ width:100%; border-collapse:collapse; }
.moreinfo th, td{
  border: 1px solid rgba(255,255,255,.12);
  padding: 8px;
  text-align:left;
}
.moreinfo th{
  background: rgba(255,255,255,.06);
  color: rgba(234,240,255,.92);
}
.moreinfo img{
  max-width:100%;
  height:auto;
  display:block;
  margin:10px 0;
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

@media (max-width: 768px){
  .moreinfo th, .moreinfo td{ padding:5px; font-size:14px; }
}

/* scroll up */
#scrollUp{
  display:none;
  position:fixed;
  bottom:20px;
  right:20px;
  border:none;
  padding:0;
  cursor:pointer;
  border-radius: 14px;
  font-size:24px;
  font-weight:bold;
  width:50px;
  height:50px;
  line-height:50px;

  color: #031219;
  background: linear-gradient(180deg, var(--accent2), var(--accent));
  box-shadow: var(--shadowSm);
}
#scrollUp:hover{
  filter: brightness(1.05);
}

/* рейтинг */
.rating{ display:flex; justify-content:center; position:relative; }
.rating input{ display:none; }
.rating label{
  font-size:2em;
  color: rgba(234,240,255,.28);
  cursor:pointer;
  position:relative;
  transition: transform .2s ease;
}
.rating .star{ color: rgba(234,240,255,.28); }
.rating .full{ color: var(--accent2); }
.rating .half{ position:relative; display:inline-block; }
.rating .half::before{
  content:'★';
  position:absolute;
  left:0;
  width:50%;
  overflow:hidden;
  color: var(--accent);
}
.rating label.active{ animation: pulse .3s ease; }

.rating-info{ text-align:center; color: rgba(234,240,255,.75); }

/* инпуты */
.form-control{
  padding: 10px 12px;
  margin-top:5px;
  box-sizing:border-box;
  font-size:14px;
  width:300px;
  border-radius: 12px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(234,240,255,.92);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form-control:focus{
  border-color: rgba(0,229,255,.55);
  box-shadow: 0 0 0 4px rgba(0,229,255,.12);
}

/* подписки */
.subscribe-form, .subscribe-form3{
  border-radius: 14px;
  padding: 20px;
  box-sizing:border-box;

  background: linear-gradient(180deg, rgba(17,26,51,.92), rgba(15,25,56,.92));
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;

  border-top: 6px solid var(--accent);
  margin: 20px 40px;
  border-left: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.subscribe-form h2, .subscribe-form3 h2{
  margin:0;
  padding:0;
  font-size:22px;
  color: rgba(234,240,255,.95);
  margin-bottom:10px;
}
.subscribe-form p, .subscribe-form3 p{
  font-size:14px;
  margin-bottom:20px;
  color: rgba(234,240,255,.70);
  text-align:center;
}
.subscribe-form input[type="email"], .subscribe-form3 input[type="email"]{
  width:100%;
  padding:12px;
  margin-bottom:15px;
  border-radius: 12px;
  box-sizing:border-box;
  font-size:14px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(234,240,255,.92);
  outline:none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.subscribe-form input[type="email"]::placeholder,
.subscribe-form3 input[type="email"]::placeholder{
  color: rgba(234,240,255,.55);
}
.subscribe-form input[type="email"]:focus, .subscribe-form3 input[type="email"]:focus{
  border-color: rgba(180,255,57,.55);
  box-shadow: 0 0 0 4px rgba(180,255,57,.12);
}
.subscribe-form button, .subscribe-form3 button{
  width:100%;
  padding:12px;
  border:none;
  border-radius: 12px;
  color: #04121a;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  transition: transform .12s ease, filter .18s ease;

  background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 100%);
  box-shadow: 0 14px 30px rgba(0,229,255,.18), 0 12px 26px rgba(180,255,57,.10);
}
.subscribe-form button:hover, .subscribe-form3 button:hover{
  transform: translateY(-1px);
  filter: saturate(1.06);
}
.subscribe-form button:active, .subscribe-form3 button:active{
  transform: translateY(0);
}

/* mobile subscribe2 */
.subscribe-form2{
  display:none;
  border-radius: 14px;
  padding: 20px;
  box-sizing:border-box;
  background: linear-gradient(180deg, rgba(17,26,51,.92), rgba(15,25,56,.92));
  box-shadow: var(--shadow);
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  border-top: 6px solid var(--accent);
  margin: 20px auto;
  max-width:520px;

  border-left: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.subscribe-form2 h2{
  margin:0;
  padding:0;
  font-size:22px;
  color: rgba(234,240,255,.95);
  margin-bottom:10px;
}
.subscribe-form2 p{
  font-size:14px;
  margin-bottom:20px;
  color: rgba(234,240,255,.70);
  text-align:center;
}
.subscribe-form2 input[type="email"]{
  width:100%;
  padding:12px;
  margin-bottom:15px;
  border-radius: 12px;
  box-sizing:border-box;
  font-size:14px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(234,240,255,.92);
  outline:none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.subscribe-form2 input[type="email"]::placeholder{ color: rgba(234,240,255,.55); }
.subscribe-form2 input[type="email"]:focus{
  border-color: rgba(0,229,255,.55);
  box-shadow: 0 0 0 4px rgba(0,229,255,.12);
}
.subscribe-form2 button{
  width:100%;
  padding:12px;
  border:none;
  border-radius: 12px;
  color: #04121a;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  transition: transform .12s ease, filter .18s ease;

  background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 100%);
  box-shadow: 0 14px 30px rgba(0,229,255,.18), 0 12px 26px rgba(180,255,57,.10);
}
.subscribe-form2 button:hover{ transform: translateY(-1px); filter: saturate(1.06); }
.subscribe-form2 button:active{ transform: translateY(0); }

/* карточки main (card2) */
.main{ margin:0 auto; text-align:center; }
.card2{
  background: linear-gradient(180deg, rgba(17,26,51,.92), rgba(15,25,56,.92));
  height:auto;
  padding:10px;
  max-width:300px;
  margin:4px;
  display:inline-block;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadowSm);
}
.number2{
  text-align:center;
  font-size: 34px;
  width:auto;
  margin:0 auto;
  display:block;

  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.text2{
  height:204px;
  width:auto;
  padding:10px 15px;
  margin:0 auto;
  display:block;
  text-align:left;
  color: rgba(234,240,255,.82);
}
.btn2{ width:auto; padding:10px 15px; margin:0 auto; display:block; }

/* shops */
.shops{ text-align:center; }
.shops img{
  margin:3px;
  border-radius: 10px;
  box-shadow: 0 10px 18px rgba(0,0,0,.25);
}

/* модальное окно */
.window{
  background-color: rgba(0,0,0,0.65);
  position: fixed;
  width:100%;
  height:100vh;
  z-index: 100;
  visibility: hidden;
}
.windowcontent{
  max-width:500px;
  background: linear-gradient(180deg, rgba(17,26,51,.95), rgba(15,25,56,.95));
  margin:auto;
  text-align:center;
  margin-top:20vh;
  padding:30px 10px;
  width:95%;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
}
.windowcontent a{ color: rgba(234,240,255,.92); }
.windowcontent h1{ margin:0; margin-bottom:10px; }
.windowcontent input{
  margin:20px 0;
  height:45px;
  border-radius: 12px;
  width:200px;
  padding-left:10px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(234,240,255,.92);
}
.windowcontent button{
  height:40px;
  font-size:18px;
  padding:0 32px;

  border: none;
  border-radius: 12px;
  cursor:pointer;
  color:#04121a;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.x{
  left:50%;
  position:absolute;
  width:20px;
  margin-left:235px;
  margin-top:-25px;
  cursor:pointer;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}

@media (max-width:400px){
  .windowcontent{ margin-top:10vh; }
  .windowcontent input{ width:150px; }
  .x{ right:8%; left:auto; }
}
@media (max-width:630px){
  .x{ right:3.5%; left:auto; }
}

/* поисковые результаты */
#results{
  background: linear-gradient(180deg, rgba(17,26,51,.98), rgba(15,25,56,.98));
  z-index: 100;
  line-height: normal;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  box-shadow: var(--shadowSm);
}
ul#results li a{ outline: none; text-decoration:none; }

h4#results-text{ display:none; }
ul#results{
  display:none;
  list-style-type:none;
  max-height: 204px;
  margin:2px 0 0;
  padding:2px 4px;
  overflow-y:auto;
}
ul#results li{
  margin:0;
  padding:10px 20px;
  cursor:pointer;
  border-top: 1px solid rgba(255,255,255,.08);
  transition: background-color .18s ease;
}
ul#results li:first-child{ border-top:none; }
ul#results li:hover{ background: rgba(0,229,255,.08); }

ul#results li h3, ul#results li h4{
  margin:2px 0 0;
  padding:0;
  color: rgba(234,240,255,.78);
  line-height: 1.2em;
  font-weight: normal;
  font-size:18px;
}
ul#results li h3{
  color: rgba(234,240,255,.80);
  font-family: Arial;
  font-size:13px;
}
ul#results li h4{ display:none; }

.result a:hover{ color: rgba(234,240,255,.70); }

.emailclass{ text-align:left; }
@media (max-width:640px){ .emailclass{ text-align:center; } }

/* анимация */
@keyframes pulse{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.2); }
  100%{ transform: scale(1); }
}

/* ====== media queries from original kept (layout) ====== */
@media (max-width: 1220px){
  .offer{ width:240px; }
  .text{ width:57%; }
  .header2{ max-width:1000px; }
  .content{ max-width:1000px; }
}
@media (max-width: 980px){
  .offer{
    width:100%;
    max-width:320px;
    float:none;
    margin:0 auto;
  }
  .text{ width:57%; }
  .btn{ padding:0; }
}
@media (max-width: 905px){
  .text,.number,.btn{
    width:auto;
    padding:10px 15px;
    margin:0 auto;
    display:block;
  }
  .card1:after{ display:block; height:auto; }
  .card1{
    height:auto;
    padding:10px;
    max-width:500px;
    margin:20px auto;
  }
  .cardsarea{ margin:50px auto; }
  .cards{ width:100%; }
  .offer{ width:100%; }
  .subscribe-form2{ display:flex; }
  .subscribe-form{ display:none; }
}
@media (max-width: 770px){
  .header{
    height:auto;
    line-height: normal;
    min-width:274px;
  }
  .menu div,.search,.searchon{ padding:15px; }
  .search,.searchon{
    line-height:30px;
    padding-right:0;
  }
  .menu,.menu div{ float:none; }
  .menu{
    margin:0 auto;
    text-align:center;
    display:none;
  }
  .searchform{ padding-top:23px; }
  .logo{ margin-top:12px; }
  h1{ font-size:32px; margin-left:15px; }
}
@media (max-width: 400px){
  .searchform,.searchon{
    float:left;
    margin-top:5px;
    padding-top:10px;
  }
  h1{ font-size:28px; margin-left:0px; }
}