/*
Theme Name: Alpaka Child
Template: alpk2
Text Domain: alpakachildtheme
*/

/* Light theme */
.light-theme {
  --shadow-color: 15, 13, 10; /* Альтернативный цвет теней */
}

/* Dark theme */
.dark-theme {
  --shadow-color: 50, 50, 50; /* Альтернативный цвет теней для темной темы */
}

body[class*="term-"] #secondary, body.post-type-archive  #secondary {margin-top:3rem;} /* так как для терминов мы перенесли крошки в секцию, опускаем сайдбар */
body {
	font-family: 'Open Sans', system-ui, sans-serif;
}
#alpaka-toc a.active  {
  font-weight: 600;
  color: var(--text);
}
#intro nav, #archive-intro nav { /* мб отключить совсем классы для пединга и мержина для крошек */
	padding:0;margin:0!important;
}
#archive-intro > * {
	display: flex;
	flex-direction: column;
	gap:1.5rem;
}
#alpaka-toc nav {
	padding-top:.75rem;
	padding-bottom:.75rem;

}
#alpaka-toc {
	top: var(--header-height);
	z-index: 99;
	width: auto;
}

/* 
=========================
IMG
=========================
*/
.rounded-img {
  border-radius: 50%;
  border: 2px solid var(--bg);
  box-shadow: 0 4px 8px rgba(var(--shadow-color), 0.1), 0 0 15px rgba(var(--shadow-color), 0.1);
}
#alpaka-post-header-container img {
	width:150px;
	height:150px;
}

/* 
=========================
Sticky footer banner
=========================
*/
#sticky-footer-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  box-shadow: 0 -2px 5px rgba(var(--shadow-color), 0.2); /* Используем переменную для основного цвета теней */
}
.has-sticky-footer-banner #colophon {
	padding-bottom: 6rem; 
}
/* FOOTER BANNER COPY CODE */
#sticky-footer-banner .item-code-container .copy,
#sticky-footer-banner .copy-icon {
  padding: 0;
}
#sticky-footer-banner .item-code {
  border: 0;
}
#sticky-footer-banner .item-code-title {
  display: none; /* Отключаем подпись код промо... */
}
#sticky-footer-banner  .item-code-container .copy + svg {
	position: relative;
	right: unset;
}

/* 
=========================
SINGLE ONLINE CASINOS
=========================
*/
.single-online-casinos .commentblock {
	border: 0;
	margin: 0;
	padding: 0;
}
.single-online-casinos #comments + #commentsection {
	border-top: 1px solid var(--border);
	padding-top: 3rem;
} 
.single-online-casinos #comments-section > * > * {
	max-width: 824px;
}

/* 
=========================
ITEMS
=========================
*/
ul.loop .item .count {
  border-radius: 50%;
left:1rem;
  width: 2rem;
  height: 2rem;
}

/* 
=========================
CASINO GAMES
=========================
*/
.loop.casino-games .item img {
	width: 100%; /* Изображение занимает всю ширину контейнера */
    aspect-ratio: 4 / 3;
	object-fit: cover; /* Обрезка изображения, если оно не подходит по размеру */
}
ul.casino-games a {
	text-decoration: none; /* МБ создать класс? */
}
.casino-games.columns-5,
.casino-games.columns-4 {
    grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: 719px) {
.casino-games.columns-5{
    grid-template-columns: repeat(5, 1fr);
	}
.casino-games.columns-4{
    grid-template-columns: repeat(4, 1fr);
	}
}

/* 
=========================
CASINOS ITEM TEMPLATE 1
=========================
*/
ul.online-casinos .template-1 .count {
  color: #555;
}
ul.online-casinos .template-1 .badge {
  color: #2a2c36;
}
ul.online-casinos .template-1 .item-code-container .smallest {
  background: var(--bg-3) !important;
}
ul.online-casinos .template-1:nth-child(1) article {
  border: 1px solid #a5bbe4;
}
ul.online-casinos .template-1:first-child .badge, ul.online-casinos .template-1:first-child .count {
  background: #a5bbe4;
}
ul.online-casinos .template-1:nth-child(2) .badge, ul.online-casinos .template-1:nth-child(2) .count {
  background: #fece56;
}
ul.online-casinos .template-1:nth-child(3) .badge, ul.online-casinos .template-1:nth-child(3) .count {
  background: #ecb0d4;
}

/* 
=========================
ACCORDION
=========================
*/
.accordion-item {
  padding: .75rem;
  transition: background-color 0.3s ease; /* Плавный ховер-эффект */
}
.accordion-item-title {
  padding-right: 2rem; /* Оставляем место для иконки */
}
.accordion-item-title::after {
  content: "▼"; /* Иконка стрелки вниз */
  position: absolute;
  top: 50%; /* Выравнивание по вертикали */
  right: 0; /* Расположение иконки в правом углу заголовка */
  transform: translateY(-50%); /* Центрирование иконки по вертикали */
  transition: transform 0.3s ease; /* Плавное изменение поворота */
}
.accordion-item.active .accordion-item-title::after {
  transform: translateY(-50%) rotate(180deg); /* Поворот иконки при активном состоянии аккордеона */
}
.accordion-item.active .accordion-item-content {
  display: block; /* Контент активного аккордеона отображается */
}

/* 
=========================
STAR
=========================
*/
.star {
  color: var(--bg-4);
}
.star.active {
  color: #ffc107;
}

/* 
=========================
PROMOCODE
=========================
*/
.item-code-container .item-code {
  border: 1px dotted var(--link);
  color: var(--link);
}
.item-code-container .item-code-title {
  top: -8.5px;
  left: 0;
  right: 0;
}
.item-code-container .item-code-title > span {
  color: var(--link);
  padding: 0 1rem;
}
.item-code-container .label-1 > *,
.item-code-container .label-2 > * {
  top: auto;
  bottom: 100%;
}
.item-code-container .label-2 span {
	flex-wrap: nowrap; /* Чтобы галочка не переносилась */
}
.item-code-container .copy-icon {
  padding-top: calc(.75rem - 1px);
  padding-bottom: calc(.75rem - 1px);
  cursor: copy;
  flex-wrap: nowrap;
}
.item-code-container .copy {
  font-family: monospace;
  white-space: nowrap;
  padding: 0 1.75rem 0 0.75rem;
  line-height: 26px; /* 16px x 1.5 + 2px */
  font-size: 14px;
}
.item-code-container .copy + svg {
  right: 0.75rem;
}

/* 
=========================
WIDGET
=========================
*/
#secondary .widget-title {
	display:flex;
	align-items: center;
	gap:.5rem;
}
#secondary .widget-title .svg-bg {
	width:32px;
	height:32px;
	border-radius:50%;
}
#secondary .widget-title svg {
	fill:var(--link)!important;
}
#secondary .widget_nav_menu ul.menu {
	padding-left: 2.5rem!important;
}

/* 
=========================
IFRAME
=========================
*/
.box {
  padding-top: 56.25%;
  border: 2px solid var(--border);
}
.box .wp-block-button,
.box .button-block-ov,
.box iframe {
  left: 0;
  right: 0;
  top: 0;
}
.box iframe {
  position: absolute;
  height: 100%;
  width: 100%;
}
.box .button-block-ov {
  opacity: 0.06;
}
#iframebutton {
  border: 1px solid #e4e6e9;
}

/* 
=========================
TAB
=========================
*/
.tabcontainer {
  white-space: nowrap;
}
.tab button.active {
	background-color: var(--bg);
	color:var(--text)!important;
}

/* 
=========================
CASINO POST META
=========================
*/
#casino-post-meta {
  flex-wrap: nowrap;
  text-wrap: nowrap;
}
#casino-post-meta li {
  flex-flow: nowrap;
  white-space: nowrap; /* Без этого не работает на айфоне */
}
#games-info th {
	white-space:nowrap;
}

/* 
=========================
ALPAKA TOC
=========================
*/
#alpaka-toc ul {    
	flex-wrap: nowrap;
}
#alpaka-toc li {
	white-space: nowrap;
}

/* 
=========================
Breadcrumbs (FOR SEO PLUGIN)
=========================
*/
#breadcrumbs {
    flex-wrap: nowrap;
}
#breadcrumbs li {
	white-space: nowrap;
}
#breadcrumbs a {
	text-decoration:underline;
	color:var(--link);
}

/* 
=========================
BIG LIST (FOR FAQ)
=========================
*/
ol.big-list li {
  counter-increment: section;
  padding-left: 3.5rem;
	position:relative;
}
ol.big-list li:before {
  content: counter(section);
  display: flex;
  position: absolute;
  left: 0;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-weight: 700;
  background: var(--link);
  border-radius: 50%;
  color: white;
}

/* 
=========================
OTHER
=========================
*/
.taxonomy-terms-list {
  column-count: 3;
}
#info-section, #iframe-section {
  box-shadow: 0 2px 5px rgba(var(--shadow-color), 0.2); /* Тень сверху */
}
section {
	scroll-margin-top: calc(var(--header-height) + 54px + 1rem); /* Высота липкого хедера */
}

/* 
=========================
HOVER
=========================
*/
@media (hover: hover) {
	#breadcrumbs a:hover {
		text-decoration:none;
	}
	.accordion-item:hover {
		background-color: var(--bg-4); /* Цвет фона при наведении */
	}
	.casino-games a:hover h3 {
		text-decoration: underline;
	}
	.item-code-container .copy-icon:hover ~ .labels {
		display: block;
	}
	.tab button:hover {
		background-color: var(--bg-4);
	}
	#alpaka-toc a:hover {
		text-decoration:none;
		color:var(--text);
	}
}
@media (hover: none) {
  .item-code-container .label-1 {
    display: none !important; /* CSS to hide .label-1 on devices without hover */
  }
}

@media (max-width: 480px) {
    .casino-post-meta-container,
	.single-online-casinos #breadcrumbs-container, 	
	.single-casino-bonuses #breadcrumbs-container,
	#sticky-footer-banner 	.casino-games-softwares {
        display: none;
    }
	#alpaka-post-header-container img {
		width:108px;
		height:108px;
	}
	.box {
		padding-top: calc(100vh - var(--header-height) - 2rem);
	}
	#sticky-footer-banner a.wp-block-button__link,	
	#sticky-footer-banner .play-for-money {
		font-size:12.5px
	}
	#sticky-footer-banner .wp-block-button__link {
		padding: .75rem .5rem;
	}
}

@media screen and (min-width: 719px) {	
	/* 
	=========================
	IFRAME
	=========================
	*/	
	#iframe-section {
		padding: 1rem;
	}
	#iframe-section > *
	{	
		border-radius:var(--border-radius-1);
	}	
	/* 
	=========================
	CASINO TEMPLATE 1
	=========================
	*/
	.online-casinos .template-1:nth-child(n+2) {
		margin-top: 2rem;
	}
	.online-casinos .template-1:nth-child(1) { order: 2; }
	.online-casinos .template-1:nth-child(2) { order: 1; }
	.online-casinos .template-1:nth-child(3) { order: 3; }
	.online-casinos .template-1:nth-child(1) .t-1-bottom-block {
		min-height: calc(296px + 2rem);
	}
	.online-casinos .template-1 .t-1-bottom-block {
		min-height: 296px;
	}
	/* 	
	=========================
	ROW ADAPTIVE
	=========================
	*/	
	#alpaka-post-header-container,
	#hero-banner,
	#hero-banner .link-section,
	.template-2 .item-columns {		
		flex-direction: row;		
	}
	/* 	
	=========================
	HERO BANNER
	=========================
	*/
	#hero-banner {
		text-align: left;
	}
	#hero-banner .link-container {
		width:auto;
	}
	#hero-banner .link-section > * {
		width:248px;	
	}
	/* 
	=========================
	Sticky footer banner
	=========================
	*/
	#sticky-footer-banner h2 {	
		font-size: 24px;
	}
	#sticky-footer-banner .banner-thumb,
	#sticky-footer-banner .text-muted,
	#sticky-footer-banner .text-muted-2,
	#sticky-footer-banner .smallest {
		display:block;
	}
	/* 
	=========================
	CASINO TEMPLATE 2
	=========================
	*/
	.template-2 .item-columns .col-2 {
		text-align: left;
		align-items: start;
	}
	/* 
	=========================
	OTHER
	=========================
	*/
	.info-section {
		grid-template-columns: 300px minmax(0px, 1fr); 
	}
}