/*
Theme Name: Flatsome Child
Theme URI: https://flatsome3.uxthemes.com/
Description: Child theme for Flatsome
Author: UX Themes
Template: flatsome
Version: 1.0
*/

/* =========================
   GLOBAL DESKTOP
========================= */

/* CSS variables */
:root {
	/* Header */
	--header-icon-size: 24px;
	--header-icon-color: #000000;
	--header-icon-hover: red;
	/* Custom buttons */
	--custom-button-color-dark: #9C9C9C;
	--custom-button-border-dark: #9C9C9C;
	--custom-button-hover-dark: #EFEEEF;
	--custom-button-color-light: #ffffff;
	--custom-button-border-light: #ffffff;
	--custom-button-hover-light: #EFEEEF;
}

/* Font sizes
 * Headings */
h1 { font-size: 40px }
h2 { font-size: 32px }
h3 { font-size: 24px }
h4 { font-size: 20px }
/* Paragraphs */
p { font-size: 18px; }

/* Remove bottom column padding
 * Ignores header and footer section */
#main .col,
#main .columns {
  padding-bottom: 0;
}

/* Rounded image corners on all pages */
#main img {
	border-radius: 10px;
}

/* Custom button design */
.custom-button {
	background-color: transparent;
	border-radius: 10px;
	letter-spacing: 3px;
	font-weight: 500;
}

.dark-button,
.button.is-outline {
	border: 1px var(--custom-button-border-dark) solid;
	color: var(--custom-button-color-dark);
}

.dark-button:hover,
.button.is-outline:hover {
	border-color: var(--custom-button-hover-dark);
	background: var(--custom-button-hover-dark) !important;
	box-shadow: none !important;
	color: var(--custom-button-color-dark);
}

.light-button {
	border: 1px var(--custom-button-border-light) solid;
	color: var(--custom-button-color-light);
}

/* =========================
   STICKY HEADER
========================= */

/* Height adjustment */
body .stuck .header-main {
  height: 83px !important;
}

/* Background 100% fill */
.header-bg-color {
  background-color: #fff;
}

/* Shadow removal */
.header-shadow .header-wrapper, .header-wrapper.stuck, .layout-shadow #wrapper {
    box-shadow: none;
}

/* Bottom border animation */
.header-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(0,0,0,.1);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.8s ease;
}

.header-wrapper.stuck::after {
  transform: scaleX(1);
}

/* Fixed navigation border without scale-x animation for specific pages */
/* Bottom border is always visible, even without scrolling down */
/* Pages like o podjetju, splošni pogoji, ... */
.page-id-310 .header-wrapper::after,
.page-id-312 .header-wrapper::after {
    display: none;
}

.page-id-310 .header-wrapper,
.page-id-312 .header-wrapper {
	border-bottom: 1px rgba(0,0,0,0.1) solid;
}

/* =========================
   MENU ICONS
========================= */

/* Cart icon */
.header-main .header-nav .cart-img-icon {
 	width: var(--header-icon-size);
  	height: var(--header-icon-size);
}

/* User account icon */
.header-main .header-nav svg {
 	color: var(--header-icon-color);
}

/* =========================
   MENU LINKS
========================= */

/* Hide "Domov" link only from homepage */
.page-id-303 .header-nav li:first-child {
    display: none;
}

/* Spacing between links */
.header-main .header-nav .menu-item {
	margin: 0px 50px 0px 0px;
}

/* Letter spacing */
.header-main .header-nav .menu-item a {
 	letter-spacing: 3px;
}

/* =========================
   MY ACCOUNT
========================= */

/* Hide user id number */
.woocommerce-account .user-id {
    display: none;
}

/* Hide "account display name" field under edit profile */
p:has(#account_display_name) {
    display: none;
}

/* =========================
   HOMEPAGE - Icons section with benefits
========================= */

.benefit-icons h3 {
	line-height: 1.1;
}

/* =========================
   HOMEPAGE - Remote section
========================= */

/*Features list */
.features-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.features-list li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	margin-bottom: 10px;
	margin-left: 0px !important;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: #222;
	background: #fff;
}

.features-list li::before {
	content: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 stroke%3D%22%23222%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E%3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%2210%22%2F%3E%3Cpath d%3D%22m12 16 4-4-4-4%22%2F%3E%3Cpath d%3D%22M8 12h8%22%2F%3E%3C%2Fsvg%3E");
	font-size: 16px;
	color: #222;
	flex-shrink: 0;
	vertical-align: middle;
	line-height: 0;
}

/* =========================
   HOMEPAGE - Back to products CTA section
========================= */

/* Vertical center alignment */
#main .homepage-product-pick .row {
  align-items: center;
}

/* Bottom CTA margin removal */
#main .homepage-product-pick h2 {
	margin-bottom: 0px;
}

/* =========================
   FOOTER - Copyright section
========================= */

/* Adjust symmetric vertical padding */
.absolute-footer {
	padding: 20px 0px;
}

/* =========================
   TABLET ADJUSTMENTS
========================= */

@media (max-width: 1024px) {
	
	/* Reset column padding at the bottom */
	#main .col,
	#main .columns {
	  padding-bottom: 20px;
	}
	
	/* No opacity on full screen menu */
	.mfp-bg.off-canvas-center:not(.dark) {
		opacity: 1;
	}
	
	/* Full screen menu close button position adjustment */
	.off-canvas-center:not(.dark) .mfp-close {
		top: 20px;
		right: 20px;
	}
	
	/* Decrease section padding */
	.section.motives,
	.section.placements,
	.section.remote-control{
		padding-bottom: 76px !important;
	}
	
	/* Motives */
	.section.motives .col {
		display: flex;
	}

	.section.motives .col-inner {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.section.motives .col-inner .button {
		margin-top: auto;
	}
	
	/* Increase section padding */
	.section.homepage-product-pick {
		padding-bottom: 28px !important;
	}
	
}


/* =========================
   MOBILE ADJUSTMENTS
========================= */

@media (max-width: 767px) {
	
	/* Font sizes */
	h1 { font-size: 32px; }
	h2 { font-size: 26px; }
	h3 { font-size: 22px; }
	h4 { font-size: 18px; }
	p { font-size: 18px; }
	
	/* Reset column padding at the bottom */
	#main .col,
	#main .columns {
	  padding-bottom: 20px;
	}
	
	/* Remove image border radius */
	.page-id-303 #main .hero-banner img {
		border-radius: 0px;
	}
	
	/* Full screen menu close button position adjustments */
	.off-canvas-center:not(.dark) .mfp-close {
		top: 10px;
		right: 10px;
	}
	
	/* Hide "Domov" link from the full screen mobile menu */
	.page-id-303 .nav-sidebar li:first-child {
		display: none;
	}
	
	/* Adjust logo height */
	#header .logo img {
		height: 30px;
		width: auto;
	}
	
	/* Benefits icons text line height adjustment */
	.benefit-icons h2 {
		line-height: 1.1;
		padding-left: 5px;
	}
	
	.benefit-icons .col:nth-child(-n+3) .col-inner {
		border-bottom: 1px solid #e0e0e0;
		padding-bottom: 20px;
	}
	
	/* Remote control section padding adjustment */
	.section.remote-control {
		padding-bottom: 44px !important;
	}
	
	/* Remove slider banner background */
	.banner {
		background-color: transparent !important;
	}
	
	/* Add space below image */
	.banner img {
		margin-bottom: 20px;
	}
	
	/* Button font-size change */
	.banner .button {
		font-size: 18px;
        padding: 3px 10px;
		width: 100%;
	}
	
	/* Enable slider next/previous side buttons */
	.flickity-button {
		display: block !important;
		opacity: 1 !important;
	}
	
	/* Previous/next button position adjustment */
	.flickity-prev-next-button.previous {
		top: 0;
		left: 0;
	}
	
	.flickity-prev-next-button.next {
		top: 0;
		right: 0;
	}
	
	/* Previous/next button look */
	.slider-nav-circle .flickity-prev-next-button .arrow,
	.slider-nav-circle .flickity-prev-next-button svg {
		background-color: #000;
		color: #fff;
		border: 0px;
	}
	
	.slider-nav-circle .flickity-prev-next-button.previous svg {
		border-radius: 0px 5px 5px 0px;
	}

	.slider-nav-circle .flickity-prev-next-button.next svg {
		border-radius: 5px 0px 0px 5px;
	}
	
	.slider-nav-circle .flickity-prev-next-button:hover .arrow,
	.slider-nav-circle .flickity-prev-next-button:hover svg {
		background-color: #000;
		color: #fff;
	}
	
	/* Slides circle dots */	
	.flickity-page-dots .dot {
		width: 14px;
		height: 14px;
		background: transparent;
		border: 2px solid #999;
		opacity: 1;
		transform: none;
	}

	.flickity-page-dots .dot.is-selected {
		width: 14px;
		height: 14px;
		background: #555;
		border-color: #555;
		box-shadow: 0 0 0 3px #fff, 0 0 0 5px #555;
		transform: none;
	}
	
}

@media screen and (max-width: 549px) {
	
	/* Adjust sticky header menu height */
	body .stuck .header-main {
		height: 70px !important;
	}
	
	/* Disable slider bottom content position */
    .y100 {
		bottom: 0 auto !important;
        top: 0 !important;
    }
	
}