/*
Theme Name: DevCore 11-24
*/
* { margin: 0; padding: 0;  box-sizing: border-box; }

html, body {
    font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #191919;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    height: 100%;
}

/*--------------------------------------------------------------
# Testing styles
--------------------------------------------------------------*/ 

 /*.container > * {border:1px solid #000; box-sizing: border-box;}*/
/* main, aside {overflow:hidden;} 
этот код наоборот нужно открыть перед запуском проекта, его сокрытие- это и есть тестовый режим*/
/*--------------------------------------------------------------
# Grid
--------------------------------------------------------------*/
.container {
    max-width: 1280px;
    height: 100vh;    
    margin: 0 auto;
	margin-top:10px;
    padding:0px 8px;
    display: grid;
    grid-template-rows: 40px auto auto 100px;
    grid-gap: 10px;
}
.container-sb-both{
    grid-template-columns: 150px 5fr minmax(200px,2fr);
    grid-template-areas:
        "nav nav nav" 	
        "header header header"
        "left-aside central-part right-aside"
        "footer footer footer";
}
.container-sb-none{
    grid-template-columns: 1fr 10fr 1fr;
    grid-template-areas:
        "nav nav nav"        
        "header header header"
        ". central-part ."
        "footer footer footer";    
}
.container-sb-left{
    grid-template-columns: 150px 3fr;
    grid-template-areas:
        "nav nav"        
        "header header"
        "left-aside central-part"
        "footer footer";    
}
.container-sb-right{
    grid-template-columns: 8fr minmax(200px, 3fr);
    grid-template-areas:
        "nav nav"        
		"header header"
        "central-part right-aside"
        "footer footer";    
}
.header {grid-area: header;}
.nav {grid-area: nav;}
.central-part {grid-area: central-part;}
.left-aside {grid-area: left-aside;}  
.right-aside {grid-area: right-aside;}
.footer {grid-area: footer;}

/*--------------------------------------------------------------
# FlexBox arhive
--------------------------------------------------------------*/
.index-page-grid-items {
    display: flex;
    flex-wrap: wrap; /* Позволяем элементам переноситься */
    gap: 10px; /* Расстояние между элементами */
}

.item-content {
    flex: 1 1 22%; /* Устанавливаем начальную ширину 22%, элементы занимают всю строку */
    min-width: 220px; /* Минимальная ширина каждого элемента */
    background-color: #fbfbfb;
    padding: 5px;
    text-align: center;
    box-sizing: border-box; /* Чтобы padding и border не увеличивали размер элемента */
	max-height:300px;
	overflow:hidden;  
}

/* .item-content:nth-child(4n) { flex: 1 1 56%;}
.item-content:nth-child(5n) > img.object-thumb {display: none;} */

.table {
  font-size: 0.8rem;
  font-weight: bold;
  display: flex;
  gap: 12px;
  flex-direction: column;
  width: 100%;
  margin-bottom:3rem;
}
.row {}

.main-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
  position: relative;
}

.main-row > * {text-align: center;   flex: 1;}

.logo {
 
}
.table .logo img { width: 75% !important; max-height:35px;}

.main-row .badge {
  position: absolute;
  top: 3px;
  left:3px;
  border: 1px solid #183100;
  color: white;
  font-size: 0.45rem;
  padding: 2px 5px;
  border-radius: 5px; 
}
.main-row .cypis {  background-color: #629C44; /* Зеленый фон */}
.main-row .offshore {  background-color: #DC4C18; /* Зеленый фон */}

.rating, .comments { font-size: 1rem;   flex-basis: 9%; flex-grow: 0;}

.rating span, .comments span {  font-size: 1.3rem;}


.bonus {
  padding: 12px 15px; /* Увеличенные отступы */
  background-color: #FEF8A0; /* Светло-желтый фон */
  border: 1px dashed #183100; /* Пунктирная рамка */
  border-radius: 20px; /* Сильное закругление */
  margin-right: 10px; /* Отступ между бонусом и промокодом */
  line-height: 1.2;
    display: flex;
  align-items: center;       /* Вертикальное выравнивание по центру */
  justify-content: space-between; /* Элементы занимают крайние стороны */
}
.bonus .mainbns {
  flex-grow: 1;             /* Заставляет текст занимать оставшееся пространство */
  text-align: center;       /* Центрирование текста внутри блока */
}

.promocode {
  background-color: #DFEDD6; /* Светло-зеленый фон */
  border: 1px solid #183100; /* Очень темная рамка */
  padding: 12px 15px; /* Увеличенные отступы */
  border-radius: 20px; /* Сильное закругление */
  line-height: 1.2;
  position: relative;
  display: flex;
  align-items: center;       /* Вертикальное выравнивание по центру */
  justify-content: space-between; /* Элементы занимают крайние стороны */

}

.promocode .mainpc {
  flex-grow: 1;             /* Заставляет текст занимать оставшееся пространство */
  text-align: center;       /* Центрирование текста внутри блока */
}



.promocode:hover {cursor:pointer; background-color:#9dab93;}

.promocode::after {
  content: 'Промокод скопирован!';
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: #183100;
  color: #fff;
  font-size: 0.8rem;
  padding: 5px 10px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.promocode.copied::after {
  opacity: 1; /* Показываем текст при копировании */
}


.review, .site {
   font-size: 1rem;
  text-decoration: none;
    color:#191919;
	flex-basis: 12%; flex-grow: 0;
}

.review:hover, .site:hover {
  text-decoration: underline;
}

.dropdown {
  font-size: 1rem;
  color: #191919;
  flex-basis: 3%; /* Уменьшенная ширина */
  flex-grow: 0;
  cursor: pointer;
  user-select: none; /* Отключить выделение текста */
  font-stretch:ultra-expanded;
}

.dropdown:hover {
  color: #000;
}

.details {
  display: none; /* Скрыто по умолчанию */
  background-color: #f9f9f9;
  padding: 10px;
  border: 1px solid #ccc;
  border-top: none;
  overflow:hidden;
}

.table .icon {
  flex-shrink: 0;           /* Предотвращает сжатие значка */
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
.nav {    display: flex;
    align-items: center;
    justify-content: space-between;

}
 
.nav .logo img {
    height: 50px;
    width: auto;
  }	

.nav .menu ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
	border: 1px solid #232323;
	border-radius:3px;
  }
.nav .menu ul li {	border-right: 1px solid #232323;}
.nav .menu ul li:last-child {
	border-right: none;
  }
  
.nav .menu ul li a {
    display: block;
    padding: 5px 10px;
    text-decoration: none;
    color: #000;
  } 

.nav .menu ul li a:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }  
  

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
img, .wp-caption {width: 100%!important;}
aside .widget {margin:0 0 30px 0;    background-color: #fbfbfb;}


/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1 {
    text-shadow: rgba(0, 0, 0, 0.35) 1px 1px 2px;
    margin: 0.67rem 0;
    line-height: 1.2;
	font-size:1.8rem;
}

h2, h3, h4, h5, h6, .object-title {
    text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px;
    line-height: 1.2;
	margin: 3rem 0 1rem;
}

.object-title {
    font-size: 1.2rem;
    font-weight: bold;
}

p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

dfn, cite, em, i {
    font-style: italic;
    color: #555;
}

blockquote {
    margin: 0 1.5rem;
    padding: 0.5rem 1rem;
    border-left: 3px solid #ddd;
    color: #666;
    font-style: italic;
}

address {
    margin: 0 0 1.5rem;
    font-style: normal;
}

pre {
    background: #f5f5f5;
    border-radius: 5px;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.6rem;
    max-width: 100%;
    overflow: auto;
    padding: 1.6rem;
    white-space: pre-wrap;
}

code, kbd, tt, var {
    font-family: monospace;
    font-size: 0.9375rem;
    background: #eee;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
}

abbr, acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
    text-decoration: none;
}

mark, ins {
    background: #fffae3;
    padding: 0.1rem 0.2rem;
    text-decoration: none;
}

big {
    font-size: 125%;
    font-weight: bold;
}

a {
    text-decoration: none;
}

main.hentry a {
    text-decoration: underline;
}
/*--------------------------------------------------------------
# Mobile View 
--------------------------------------------------------------*/
@media (max-width: 769px) {
	p {font-size:18px;}
    .container {
        grid-template-rows: 40px 1fr auto auto 100px;
        grid-template-columns: 1fr;
        grid-template-areas:
            "nav"
            "central-part"
            "right-aside"
            "left-aside"            
            "footer";
    }
    .header {display:none;} 
}