@charset "utf-8";
*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;}
html, body {scrollbar-gutter: stable;}
html {position: relative; height: 100%; scroll-behavior: smooth;}

:root {
    --font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-awesome:"Font Awesome 7 Pro";
    /* Фоны */
    --bg: #161616;
    --header:#272727;
    --footer:#272727;
    --bg-2:#22222287;
    --bg-card: #242424;
    --bg-card-2: #3e3e3e;
    --bg-card-3: #3a3a3a;
    --bg-soft: rgba(255,255,255,0.03);
    --bg-soft-2: rgba(255,255,255,0.05);

    /* Границы */
    --border: rgb(255 255 255 / 10%);
    --border-2: rgb(255 255 255 / 19%);
    --box-shadow: #00000047;

    /* инпуты */
    --bg-input:#373737;
    --border-input:rgb(255 255 255 / 10%);
    --input-shadow:#22222242;
    --input-focus: rgb(200 255 0 / 41%);

    /* Текст */
    --text: #fff;
    --text-muted: rgb(255 255 255 / 65%);
    --text-dim: rgba(255,255,255,0.4);
    --mob-menu-text:rgba(255, 255, 255, 0.748);

    /* Акцент — лайм (основной) */
    --lime: #D6FF00;
    --lime-soft: rgba(214,255,0,0.08);
    --lime-soft-2: rgba(214,255,0,0.12);
    --top-menu-lime: #D6FF00;

    /* Ховеры */
    --hover-1:#323232;
    --hover-btn:#d6ff00e0;

    /* Дополнительные акценты */
    --cyan: #4DD8E5;
    --green: #5BE584;
    --orange: #FFB547;
    --purple: #B794F4;
    --pink: #FF8FB1;

    /* Радиусы скругления */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* success colors */
    --danger: #ff3838; 
    --danger-soft: rgba(255,92,92,0.12);
    --success: var(--green);
    --warning: var(--orange);
}

/* === СВЕТЛАЯ ТЕМА === */
html[data-theme="light"] {
    /* Фоны */
    --bg: #ececec;
    --header:#ffffff;
    --footer:#f9f9f9;
    --bg-2:#ffffff69;
    --bg-card: #ffffff;
    --bg-card-2: #efefef;
    --bg-card-3: #272f37;
    --bg-soft: rgba(255,255,255,0.03);
    --bg-soft-2: rgba(255,255,255,0.05);

    /* Границы */
    --border: rgb(0 0 0 / 10%);
    --border-2: rgb(0 0 0 / 35%);
    --box-shadow: #00000024;
    --box-shadow-light:#cccccc75;
    
    /* Толщина иконок */
    --top-menu-icon:600;

    /* инпуты */
    --bg-input:#f4f4f48c;
    --border-input:rgb(0 0 0 / 76%);
    --input-shadow:#181b2100;
    --input-focus: rgb(195 233 0);

    /* Текст */
    --text: #000000;
    --text-muted: rgb(0 0 0 / 72%);
    --text-dim: rgb(0 0 0 / 49%);
    --mob-menu-text:#000000;

    /* Акцент — лайм (основной) */
    --lime: #c3e900;
    --lime-soft: rgba(214,255,0,0.08);
    --lime-soft-2: rgba(214,255,0,0.12);
    --top-menu-lime: #797979;

    /* Ховеры */
    --hover-1:#edeeeb;
    --hover-btn:#d6ff00e0;

    /* Дополнительные акценты */
    --cyan: #0BAEC2;
    --green: #16A34A;
    --orange: #D97706;
    --purple: #7C3AED;
    --pink: #DB2777;

    /* success colors */
    --danger: #ff3f3f; 
    --danger-soft: rgba(255,92,92,0.12);
    --success: var(--green);
    --warning: var(--orange);
   
}
html[data-theme="light"] .logo img,
html[data-theme="light"] .foot-logo img {
  content: url('../img/logo-black.svg');
}

body {
      width: 100%;
      min-width: 320px;
      font-family: var(--font-family);
      font-size:16px;
      -webkit-text-size-adjust: none;
      color:var(--text);
      background:var(--bg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     }

.wrapper {position:relative;}
header, main, footer {padding:0px;}
main {margin-top:50px;}
a {transition: all 0.3s; color:var(--lime);}
p {line-height:1.5;}

section {position:relative; padding:80px 0 0 0;}
main > section:last-child {padding-bottom:80px;}
.create-section {background:var(--bg-2);}
.container {margin:0 auto;max-width:1280px;padding:0px 40px 0px 40px;position:relative;}
.full {max-width:1920px;}
/************************/
.section-title {margin-bottom:32px;text-align:center; position:relative;
               display:flex; flex-direction:column; gap:10px;} 
.section-title h2, .section-title h1 {margin: 0;padding: 0;font-size: 38px;font-weight: 500; line-height:1.2; 
  color:var(--text); text-wrap:balance; 
}
.section-title h1 {font-size:60px; max-width:900px; margin:0 auto 10px auto; line-height:1; }
.section-title h3 {font-size: 36px;}

.section-title p {display: block;font-size: 16px;color: var(--text-muted); 
                  text-wrap:balance; margin:0 auto; 
  max-width:900px;line-height:1.4;}
p.text-eyebrow {color: var(--cyan);font-size: 13px; font-weight: 500;
  text-transform: uppercase;letter-spacing: 0.14em ;line-height:1.5;}
.section-title small {color:var(--text-dim); font-size:13px; margin-top:10px;}
.section-title-left {text-align:left;}
.section-title-left h1, .section-title-left h2, .section-title-left p {margin:0; }
.section-title-left h1 {margin-bottom:10px;}
.text-left {text-align: left;}
.flex-block-wrapper {display:flex; flex-direction:column; gap:30px;}
.flex-center {justify-content:center;}
.flex-right {justify-content:right;}
.title-left {align-items:start; text-align:left;}
.title-left p {margin:0;}
.lime {color:var(--lime);}

.page-content {display:flex; flex-direction:column; gap:20px;}
.page-content h2 {font-size:36px;}
.page-content p {color:var(--text-muted); font-size:14px;}
.page-content small {color:var(--text-dim); font-size:12px; border-top:1px solid var(--border); padding-top:20px;}
/**** dropdown-block ****/
.dropdown-block {position:relative;}
.dropdown-btn {cursor:pointer;}
.dropdown-btn i {transition: all 0.3s;}
.lang-picker .dropdown-btn i {font-size:10px; margin-right:-4px;}
.dropdown-item {opacity: 0;visibility: hidden;transform: translateY(-6px);
    transition: opacity .22s ease,transform .25s cubic-bezier(.4,0,.2,1),visibility 0s linear .22s;
               box-shadow:0px 5px 20px var(--box-shadow); }
.dropdown-block.is-open .dropdown-item {opacity: 1;visibility: visible;transform: translateY(0);transition-delay: 0s;}
.dropdown-block.is-open .dropdown-btn > i {transform: rotate(180deg);}
.lang-picker {position:inherit;}
.lang-picker .dropdown-btn, .theme-toggle {color:var(--text-muted); display:flex; align-items:center; gap:6px;
                           border-radius:20px; border:1px solid var(--border-2); padding:0px 14px;
                                          height:36px; cursor:pointer;
                                          background:#00000008}
.lang-picker .dropdown-btn span {border-radius:2px;}
.lang-picker .dropdown-item {position:absolute; margin-top:8px; z-index:2; overflow:hidden;
               background:var(--bg-card); border-radius: var(--radius-md); padding:6px; 
                             border:1px solid var(--border);
                            display: grid; grid-template-columns: repeat(1, 1fr); 
                             gap:0px 0px; right:0;}
.lang-picker .dropdown-item a {display:flex; gap:8px; align-items:center;
                              padding:10px 12px; text-decoration:none; font-size:14px;
                              color:var(--text-muted); border-radius:8px;}
.lang-picker .dropdown-item a span {border-radius:2px;}

/******** FOR THEME  *********/
.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun  { display: inline-block; }
html[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: inline-block; }


/****** LAYOUTS *******/
.layout-block {border-radius:var(--radius-lg); padding:30px;
             background:var(--bg-card);
             border: 1px solid var(--border);
             box-shadow:0px 10px 20px var(--box-shadow-light); 
             }
.cont-center {text-align:center;} 

.page-link {display:flex; flex-wrap:wrap; gap:0px 10px;}
.page-link a, .page-link button {padding-bottom: 1px; cursor: pointer; transition: color .15s; text-decoration: none; 
                                 color: var(--lime); transition:all 0.3s; font-size:inherit; }
.page-link a span, .page-link button span {border-bottom: 1px dashed currentColor; }
.page-link a i, .page-link button i {margin-left:6px; display:inline-block; top:1px; position:relative;}

@media (min-width: 1200px) {
    .for-mobile {display:none;} 
    .page-link a:hover, .page-link button:hover {opacity:0.8;}
}    
/*********  accordion  *********/
.accordion-wrapper {display:flex; flex-direction:column; gap:8px; max-width:880px;}
.accordion-item {background:var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow:0px 10px 20px var(--box-shadow-light); 
          display:flex; flex-direction:column; gap:0px;}
.acc-title {display:flex; justify-content:space-between; cursor:pointer; align-items:start; gap:30px;
            padding:18px 24px; }
.acc-title h3 {font-size:16px; color:var(--text); font-weight:500;}
.acc-title i {position:relative; top:3px; left:4px; transition: all 0.3s; font-size: 14px; color: var(--lime);}
html[data-theme="light"] .acc-title i {color: var(--text);}
.acc-content {
              max-height: 0;
              overflow: hidden;
              transition: all 0.3s;
              color:var(--text-muted);
              padding:0px 24px 0px 24px;
              box-sizing:border-box;
    font-size:14px; 
              }
.acc-content p:first-child {margin-top:-4px !important;}
.acc-content p:last-child {margin-bottom:18px !important;}
.acc-title i.rotate {color: var(--lime);}
.acc-title i {transition: transform 0.3s ease;}
.acc-title i.fa-minus {transform: rotate(180deg);}

/*** TABS ***/
/*** icon telegram ***/
.fa-paper-plane {display: inline-block; transform: scaleY(0.9); transform-origin: center; }

/* --- Цвета тиров --- */
.tier-bronze i { color: #cd7f32; }
.tier-silver i { color: #a0a8b0; }
.tier-gold i { color: #fbbf24; }
.tier-platinum i { color: #67e8f9; }

/*** Pagination ***/
.pagination {display:flex; gap:6px; margin-top:0px; align-items:center; justify-content:center; font-size:14px;}
.pagination button, .pagination span, .pagination a {border:0; width:36px; height:36px;
  background:var(--bg-card); display:flex; justify-content:center; align-items:center; border-radius:6px; cursor:pointer;
                                             color:var(--text-muted); transition:all 0.3s;
                                                    text-decoration:none;}
.pagination button i {font-size:10px;}
.pagination button:disabled {color:#828282; cursor:default;}
.pagination span.active {background:#494949; }
.pagination strong {padding:0 6px; color:#999;}
.mini-pagination {display:flex; gap:6px;  align-items:center; justify-content:center; color:#ccc; font-size:14px;
                }
.mini-pagination button, .mini-pagination a {border:0; background:#3b3b3b; display:flex; justify-content:center; align-items:center; 
                          border-radius:6px; cursor:pointer; color:#ccc; transition:all 0.3s;  
                         gap:6px; font-size:12px; height:40px; width:40px; text-decoration:none;}
.mini-pagination .paginate-pages {margin:0 10px; }
.mini-pagination .paginate-pages b {font-weight:400;}
.mini-pagination button i, .mini-pagination a i {font-size:12px;}
.mini-pagination button:disabled {color:#828282; cursor:default;}

.for-desktop {display:flex;}
.for-mobile {display:none;}

.content-scroll { overflow-y: auto;
  scroll-behavior: smooth; 
  padding-right:4px;}

.content-scroll::-webkit-scrollbar { width: 14px;  }
.content-scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }  /* стрелки */
.content-scroll::-webkit-scrollbar-track  { background: #86868600; }
.content-scroll::-webkit-scrollbar-thumb  { background: #cccccc85; border-radius: 30px;
                                         border:5px solid var(--bg-card);}
/****** HOVERS *******/
@media (min-width: 1200px){   
.lang-picker .dropdown-item a:hover {background:var(--hover-1); color:var(--text);}
.pagination button:hover, .pagination span:hover, .pagination a:hover {background:var(--hover-1); display:flex; color:var(--text-muted); }
.pagination span.active:hover {background:#494949; }    
.pagination button:disabled:hover {background:#242424; color:#828282;}
}    
/***************/

@media (max-width: 800px) {
   .for-desktop {display:none;}
   .for-mobile {display:flex;}
}

@media (max-width: 640px) {
 section {position:relative; padding:50px 0 0 0;}
 main > section:last-child {padding-bottom:50px;}   
 .container {padding:0px 20px;}
 .section-title {margin-bottom:20px;} 
 .section-title h2 {font-size:26px; line-height:1.2;}
 .section-title h1 {font-size:28px; line-height:1.2;} 
 .page-content h2 {font-size:24px; line-height:1.2;}   
 .lang-picker .dropdown-item a {padding:8px 10px;}
 .layout-block {padding:16px;}      

    html[data-theme="light"] {
    --bg: #e9e9e9;
    --box-shadow-light:#7a7a7a38;
    }
    
}

@media (max-width: 370px) {
  .lang-picker .dropdown-item {grid-template-columns: repeat(2, 1fr);}
}

/* === breadcrumbs === */
nav.breadcrumb {padding:26px 0 20px 0; margin-bottom:-40px; position:relative; z-index:1; background:var(--bg)}
.breadcrumb-list { display: flex; align-items: center; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; 
                  -ms-overflow-style: none; font-size:14px; gap:8px;}
.breadcrumb-list::-webkit-scrollbar { display: none; }
.breadcrumb-list > * { flex-shrink: 0; white-space: nowrap; }
.breadcrumb-list a {color:var(--text-muted); transition:all 0.3s; text-decoration:none;}
.breadcrumb-list i {font-size:10px; margin-top:0px; display:inline-block; color:var(--text-dim);}
.breadcrumb-list span {color:var(--text-dim);}

@media (min-width: 1200px) { 
    .breadcrumb-list a:hover {color:var(--text);}
}
@media (max-width: 1000px){
 .breadcrumb-list i {margin-top:3px;}   
}

@media (max-width: 640px) {
    nav.breadcrumb {padding:24px 0 20px 0; margin-bottom:-20px;}
}