/* =========================================================
   GameStores — Polished Dark UI (Drop-in override)
   - Visual system with CSS variables
   - Modern "glass" cards, softer radii, clear hierarchy
   - Accessible focus states and smoother interactions
   - Keeps original class names to avoid breaking markup
   ========================================================= */

@charset "UTF-8";

/* ---- Tokens ------------------------------------------------ */
:root{
  /* Colors */
  --bg-900:#0f1317;
  --bg-850:#141a1f;
  --bg-800:#171f26;
  --surface:#10151a;
  --card:rgba(255,255,255,.06);
  --card-strong:rgba(255,255,255,.12);
  --stroke:rgba(255,255,255,.09);
  --muted:rgba(255,255,255,.64);
  --text:rgba(255,255,255,.9);
  --accent:#0ea5e9;        /* primary accent (links, tabs) */
  --success:#5cb85c;       /* confirm/positive */
  --danger:#ef4444;
  --warning:#f59e0b;
  --info:#60a5fa;

  /* Radii & blur */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;
  --blur:14px;

  /* Shadows */
  --shadow-1:0 10px 24px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.02) inset;

  /* Motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-1:.15s;
  --dur-2:.28s;

  /* Typography */
  --h1: clamp(22px, 2.6vw, 28px);
  --h2: clamp(18px, 2.2vw, 22px);
  --label: 13px;
}

/* ---- Base -------------------------------------------------- */
.boxHeader.Shop-module__header { margin: 0 0 14px; } /* или 16–20px по вкусу */

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(14,165,233,.08), transparent 60%),
    radial-gradient(800px 600px at 120% 10%, rgba(92,184,92,.09), transparent 50%),
    var(--bg-900);
  color: var(--text);
  font: 400 15px/1.55 "Roboto Condensed", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Smooth links */
a{ color: var(--accent); text-decoration: none; }
a:hover{ opacity:.9; }
a:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }

/* ---- Cards & boxes ---------------------------------------- */
.boxHeader,
.boxBody,
.boxFooter,
.Widgets-module__widgetWrapper,
.Shop-module__wrapper,
.BasketContent-module__wrapper,
.HistoryContent-module__wrapper,
.container .ProfileNav-module__wrapper,
.container .ProfileContent-module__wrapper {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  /* border: 1px solid var(--stroke); */
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

/* Headers */
.boxHeader{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  font-weight: 800;
  font-size: var(--h1);
  line-height: 1.2;
  padding: 14px 18px;
  text-transform: none;
  letter-spacing: .3px;
  color: var(--text);
}

/* Bodies/Footers */
.boxBody{ padding: 16px; }
.boxFooter{ padding: 12px 16px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); }

/* ---- Header / Nav ----------------------------------------- */
.Header-module__wrapper{
  height: 56px;
  min-height: initial;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow-1);
}
.Header-module__wrapper .HeaderNav-module__link,
.Header-module__wrapper .PlayerMenu-module__profileLink,
.Header-module__wrapper .LangSwitcher-module__btn,
.Header-module__wrapper .PlayerBalance-module__btn{
  height:56px;
  display:flex; align-items:center; gap:10px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  transition: background var(--dur-2) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}
.Header-module__wrapper .HeaderNav-module__link:hover,
.Header-module__wrapper .PlayerMenu-module__profileLink:hover,
.Header-module__wrapper .LangSwitcher-module__btn:hover,
.Header-module__wrapper .PlayerBalance-module__btn:hover{
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}
.Header-module__nav{ margin-left: 0; }

/* Hide legacy logo wrapper by default (kept from original) */
.Header-module__logoWrapper{ display:none; }

/* ---- Search ------------------------------------------------ */
.Search-module__wrapper{ background: transparent; }
.Search-module__iconWrapper{
  background: rgba(255,255,255,.08);
  color: var(--muted);
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.Search-module__input{
  background: rgba(255,255,255,.04);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text);
  transition: box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.Search-module__input::placeholder{ color: var(--muted); }
.Search-module__input:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(14,165,233,.25);
  background: rgba(255,255,255,.06);
}

/* ---- Tabs / Pills ----------------------------------------- */
.Servers-module__server,
.Categories-module__category{
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.08);
  color: var(--muted);
  font-weight: 700;
  border: 1px solid transparent;
  transition: all var(--dur-2) var(--ease);
}
.Servers-module__server:hover,
.Categories-module__category:hover{ color: var(--text); transform: translateY(-1px); }
.Servers-module__server.Servers-module__active{
  background: linear-gradient(180deg, rgba(14,165,233,.85), rgba(14,165,233,.6));
  color: #08141a;
  border-color: transparent;
}
.Categories-module__category.Categories-module__active{
  background: linear-gradient(180deg, rgba(14,165,233,.85), rgba(14,165,233,.6));
  color: #08141a;
}

/* ---- Buttons ---------------------------------------------- */
.Button-module__btn{
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease), filter var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
  will-change: transform;
}
.Button-module__btn:hover{ transform: translateY(-1px); }
.Button-module__btn:active{ transform: translateY(0); }

.Button-module__btn.Button-module__accent{
  background: linear-gradient(180deg, var(--success), color-mix(in oklab, var(--success) 85%, black));
  color:#fff; border: 0; text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.Button-module__btn.Button-module__gray{
  background: rgba(255,255,255,.1);
  color: var(--text);
  border: 1px solid var(--stroke);
}
.Button-module__btn.Button-module__danger{ background: var(--danger); color:#fff; border:0; }

/* Shine on hover (accent only) */
.Button-module__btn.Button-module__accent::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 70%);
  transform: translateX(-120%);
  transition: transform .6s ease;
  pointer-events:none;
}
.Button-module__btn.Button-module__accent:hover::after{ transform: translateX(120%); }

/* ---- Widgets / Monitoring --------------------------------- */
.Widgets-module__widgetWrapper .MonitoringWidget-module__body.boxBody{
  background: rgba(255,255,255,.06);
  border-radius: var(--r-md);
  margin: 16px;
  padding: 12px;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.Widgets-module__widgetWrapper .MonitoringWidget-module__body.boxBody:hover{
  background: rgba(255,255,255,.08);
  transform: translateY(-2px);
}
.MonitoringServer-module__progressBarWrapper{
  height: 22px;
  background: rgba(255,255,255,.08);
  border-radius: var(--r-xs);
  overflow: hidden;
  position: relative;
}
.MonitoringServer-module__progressBarAnim{
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    color-mix(in oklab, var(--accent) 80%, white) 0 16px,
    color-mix(in oklab, var(--accent) 60%, black) 16px 32px
  );
  animation: progress-bar-stripes 2s linear infinite;
}
@keyframes progress-bar-stripes {
  from { background-position: 40px 0; } to { background-position: 0 0; }
}

/* ---- Products / Cards ------------------------------------- */
.Products-module__wrapper .Product-module__wrapper{
  border-radius: var(--r-md);
  background: rgba(255,255,255,.06);
  border:1px solid var(--stroke);
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.Products-module__wrapper .Product-module__wrapper:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.Products-module__wrapper .Product-module__wrapper .Product-module__name{
  background: rgba(255,255,255,.06);
  font-weight:700;
  padding: 8px 10px;
}
.Products-module__wrapper .Product-module__wrapper .Product-module__price{
  background: rgba(255,255,255,.1);
  font-weight:800;
}

/* ---- Tables (Basket & History) ----------------------------- */
.BasketTable-module__table .BasketTable-module__tableHeader,
.HistoryTable-module__table .HistoryTable-module__tableHeader{
  background: rgba(255,255,255,.06);
  text-transform: uppercase;
  letter-spacing:.4px;
}
.BasketTable-module__table .BasketTable-module__tableData .BasketTable-module__tableLine:nth-child(2n-1),
.HistoryTable-module__table .HistoryTable-module__tableData .HistoryTable-module__tableLine:nth-child(2n-1){
  background: var(--bg-800);
}
.BasketTable-module__table .Button-module__btn.Button-module__accent{
  background: linear-gradient(180deg, var(--success), color-mix(in oklab, var(--success) 85%, black));
  border:0; color:#fff;
}

/* ---- Select / Dropdown ------------------------------------ */
.Selector-module__dropDownWrapper .Selector-module__dropDownCurrentItem,
.Selector-module__dropDownWrapper .Selector-module__dropDownList{
  background: var(--bg-800);
  border:1px solid var(--stroke);
  border-radius: var(--r-sm);
}
.Selector-module__dropDownWrapper .Selector-module__dropDownList .Selector-module__dropDownItem:hover{
  background: rgba(255,255,255,.06);
}

/* ---- Profile ------------------------------------------------ */
.container .ProfileNav-module__wrapper .ProfileNav-module__navItem{
  background: rgba(255,255,255,.08);
  color: var(--muted);
  border: 1px solid transparent;
  transition: all var(--dur-2) var(--ease);
}
.container .ProfileNav-module__wrapper .ProfileNav-module__navItem:hover{
  color: var(--text);
  transform: translateX(2px);
}
.container .ProfileNav-module__wrapper .ProfileNav-module__navItem.ProfileNav-module__active{
  background: linear-gradient(180deg, rgba(14,165,233,.85), rgba(14,165,233,.6));
  color:#08141a;
}
.container .ProfileContent-module__wrapper .ProfileContent-module__infoWrapper.ProfileContent-module__box{
  background: var(--bg-800);
  border:1px solid var(--stroke);
}

/* ---- Mobile menu ------------------------------------------- */
.PlayerMenuMobile-module__menu{
  background: var(--bg-850);
  border:1px solid var(--stroke);
  border-radius: var(--r-md);
}

/* ---- Accessibility: keyboard focus ------------------------- */
:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--accent) 90%, white);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
/* ------------------------------------------------------------ */


/* ===================== Layering & Modals ================================ */
/* Header — stick, but send to back */
.Header-module__wrapper{
  position: sticky;
  top: 0;
  z-index: 0;             /* ниже контента */
  overflow: visible;
}

/* Контент — поверх хедера */
.Widgets-module__widgetWrapper,
.Products-module__wrapper,
.Shop-module__wrapper,
.BasketContent-module__wrapper,
.HistoryContent-module__wrapper,
.container .ProfileNav-module__wrapper,
.container .ProfileContent-module__wrapper{
  position: relative;
  z-index: 1;
}

/* LangSwitcher — поверх контента, независимо от слоя хедера */
.LangSwitcher-module__wrapper{ position: relative; z-index: 9000; }
.LangSwitcher-module__list{
  position: fixed;        /* выводим из контекста хедера */
  z-index: 9100;
  /* при необходимости задайте явные координаты */
  /* top: 56px; left: 16px; */
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  border-radius: 10px;
  overflow: hidden;
}

/* Модалка — по центру и выше всего */
.ModalLayout-module__positionWrapper[role="presentation"],
.ModalLayout-module__positionWrapper{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 100000;
  padding: 24px;
  pointer-events: none;
}
.ModalLayout-module__positionWrapper > *{
  pointer-events: auto;
  max-width: min(760px, 92vw);
  width: 100%;
}
/* ======================================================================= */


/* ===================== Modal spacing & overlay close patch ===================== */
/* Add bottom breathing room inside the modal */
.ModalLayout-module__positionWrapper > *::after{
  content:"";
  display:block;
  height:16px; /* отступ вниз, чтобы кнопка не прилипала к краю */
}

/* Make overlay clickable and add dim background */
.ModalLayout-module__positionWrapper[role="presentation"],
.ModalLayout-module__positionWrapper{
  pointer-events: auto; /* ловим клик по фону */
}
.ModalLayout-module__positionWrapper::before{
  content:"";
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Ensure inner modal content stays above the overlay layer */
.ModalLayout-module__positionWrapper > *{
  position: relative;
  z-index: 1;
}
/* ============================================================================= */


/* ===================== Remove Language Switcher ===================== */
.LangSwitcher-module__wrapper,
.LangSwitcher-module__btn,
.LangSwitcher-module__list{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* =================================================================== */


/* ===================== Remove "Сайт создан в системе GameStores" ===================== */
/* Hide the link itself */
a[href*="gamestores" i],
a[href*="gamestores.app" i]{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Hide common wrappers that include the badge 
:is(footer, .footer, .Footer, .Footer-module__wrapper, .Footer-module__copyright,
    [class*="Footer" i], [class*="footer" i], [class*="copyright" i], [class*="powered" i]
   ):has(a[href*="gamestores" i]){
  display:none !important;
}*/

/* If badge is a fixed block in a corner */
body :is([style*="position: fixed" i], .fixed, .corner):has(a[href*="gamestores" i]){
  display:none !important;
}
/* ===================================================================================== */




.container .ProfileContent-module__wrapper .ProfileContent-module__infoWrapper.ProfileContent-module__box{
  background: #343839;
  border:1px solid var(--stroke);
}