:root {
    --lm_1: #FFFFFF;
    --lm_2: #f9f9f9; /*#ebebeb*/
    --lm_3: #D6D6D6;
    --lm_4: #CECAC2;
    --dm_1: #121212;
    --dm_2: #1e1e1e; 
    --dm_3: #ffffff;
    --dm_4: #CECAC2;

    --x: 0;
	--y: 0;
	--xp: 0;
	--yp: 0;
	--hue: 0;
	--bg_d: hsla(0, 0%, 21%, 1);
    --bg_l: hsla(0, 0%, 82%, 1);
    --glow_color: hsla(90, 60%, 45%, 1);
	--size: 120px;
	--glow: radial-gradient(50% 50% at center,
			var(--glow_color),
			var(--glow_color),
			transparent) calc((var(--x) * 1px) - (var(--size) * 0.5)) calc((var(--y) * 1px) - (var(--size) * 0.5)) / var(--size) var(--size) no-repeat fixed;

}


/* Background */
.dark body {
    background-color: var(--dm_1);
    color: var(--lm_2);
    transition: background-color 0.3s;
}

.light body {
    background-color: var(--lm_1);
    color: var(--dm_2);
    transition: background-color 0.3s;
}
/*/ Background */


/* Hero */

.dark .hero-overlay{
    background-color: rgba(0, 0, 0, 0.3);
}

.light .hero-overlay{
    background-color: rgba(0, 0, 0, 0);
}
/*/ Hero */


/* Navbar*/ 
.dark .navbar {
    background-color: rgba(87, 87, 87, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #f1f1f1;
    text-align: center;
    padding: 0.5rem 0;
    transition: background-color 0.3s;
}

.light .navbar {
    background-color: rgba(224, 224, 224, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #f1f1f1;
    text-align: center;
    padding: 0.5rem 0;
    transition: background-color 0.3s;
}
/*/ Navbar*/ 


/* Theme Switch */
.theme-switch {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

.theme-switch .slider-container {
    display: flex;
    align-items: center;
}

.theme-switch input {
    display: none;
}

.slider {
    width: 50px;
    height: 25px;
    border-radius: 50px;
    position: relative;
    cursor: pointer;
    background-color: #888; /* Default background to prevent icon flash */
    background-repeat: no-repeat;
    background-size: 19px 19px;
    transition: background-color 0.3s;
    border: 1px solid #ccc;
    /* Embed SVGs as Data URIs to prevent flash on load */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23D6D6D6'%3e%3cpath d='M600-640 480-760l120-120 120 120-120 120Zm200 120-80-80 80-80 80 80-80 80ZM483-80q-84 0-157.5-32t-128-86.5Q143-253 111-326.5T79-484q0-146 93-257.5T409-880q-18 99 11 193.5T520-521q71 71 165.5 100T879-410q-26 144-138 237T483-80Z'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px' fill='%23888'%3e%3cpath d='M479.77-288Q400-288 344-344.23q-56-56.22-56-136Q288-560 344.23-616q56.22-56 136-56Q560-672 616-615.77q56 56.22 56 136Q672-400 615.77-344q-56.22 56-136 56ZM216-444H48v-72h168v72Zm696 0H744v-72h168v72ZM444-744v-168h72v168h-72Zm0 696v-168h72v168h-72ZM269-642 166-742l51-55 102 104-50 51Zm474 475L642-268l49-51 103 101-51 51ZM640-691l102-101 51 49-100 103-53-51ZM163-217l105-99 49 47-98 104-56-52Z'/%3e%3c/svg%3e");
    background-position: 4px center, calc(100% - 3px) center;
}

/* Light Mode Styles - Now based on .light class */
.light .slider {
    background-color: #f0f0f0;
}

/* Dark Mode Styles - Now based on .dark class */
.dark .slider {
    background-color: #333;
}

.slider::before {
    content: "";
    position: absolute;
    width: 21px;
    height: 21px;
    left: 3px; /* "Off" position */
    top: 1px;
    background-color: #888;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    transition: left 0.3s, background-color 0.3s; /* Animate the 'left' property */
    z-index: 2;
}

.dark .slider::before {
    background-color: var(--dm_4);
}

/* This rule handles the user clicking the toggle */
input:checked + .slider::before {
    left: 26px; /* "On" position */
}

/* This rule handles the initial page load */
.dark .slider::before {
    left: 26px; /* "On" position */
}
/*/ Theme Switch */


/* Blok Background */
.dark .blok,
.dark .info-blok {
    background-color: #1e1e1e;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(12px);
    transition: background-color 0.3s;
}

.light .blok,
.light .info-blok {
    background-color: #f9f9f9;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(12px);
    transition: background-color 0.3s;
}

/* Promo Section Colors - Green Theme to match Hero Button */
.light .promo-section {
    background-color: #f0f9e6; /* Light green background */
    color: #4a7c2a; /* Dark green text for readability */
    border: 1px solid #c5e5a3; /* Light green border */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.dark .promo-section {
    background-color: #2a3f1c; /* Dark green background */
    color: #b8d99a; /* Light green text */
    border: 1px solid #4a7c2a; /* Medium green border */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Section Headers Dark Mode */
.dark .main-section-header,
.dark .accessories-section-header {
    background-color: var(--dm_2);
    transition: background-color 0.3s;
}

.light .main-section-header,
.light .accessories-section-header {
    transition: background-color 0.3s;
}

.dark .main-section-subtitle,
.dark .accessories-section-subtitle {
    color: #ccc;
    transition: color 0.3s;
}

.light .main-section-subtitle,
.light .accessories-section-subtitle {
    transition: color 0.3s;
}

.dark .action-divider {
    background-color: #444;
    transition: background-color 0.3s;
}

.light .action-divider {
    transition: background-color 0.3s;
}
/*/ Blok Background */

.dark .glow_button {
    color: var(--lm_2);
	border: 0.15rem solid transparent;
	border-radius: 1rem;
	box-shadow: 0 1px hsl(0 0% 100% / 0.15) inset;
	cursor: pointer;
    background:
        linear-gradient(var(--bg_d), var(--bg_d)) padding-box,
        var(--glow),
        linear-gradient(rgba(87, 87, 87, 0), rgba(87, 87, 87, 0)) border-box;
	transition: background-size 0.3s;
	touch-action: none;
	position: relative;
}

.light .glow_button {
    color: var(--dm_1);
    border: 0.15rem solid transparent;
    border-radius: 1rem;
    box-shadow: 0 1px hsl(0 0% 100% / 0.15) inset;
    cursor: pointer;
    background:
        linear-gradient(var(--bg_l), var(--bg_l)) padding-box,
        var(--glow),
        linear-gradient(rgba(87, 87, 87, 0), rgba(87, 87, 87, 0)) border-box;
    transition: background-size 0.3s;
    touch-action: none;
	position: relative;

}

/* Footer */
.dark .footer {
    background-color: var(--dm_2); /* Tmavě šedé pozadí pro dark mode */
    color: var(--lm_2); /* Světlá barva textu pro dark mode */
    transition: background-color 0.3s, color 0.3s;
}

.light .footer {
    background-color: var(--lm_2); /* Světle šedé pozadí pro light mode */
    color: var(--dm_1); /* Tmavá barva textu pro light mode */
    transition: background-color 0.3s, color 0.3s;
}

/* Footer odkazy */
.dark .footer-section ul li a {
    color: var(--lm_3);
    transition: color 0.3s;
}

.light .footer-section ul li a {
    color: var(--dm_1);
    transition: color 0.3s;
}

.dark .footer-section ul li a:hover,
.dark .social-link:hover {
    color: #7CB342; /* Green accent on hover in dark mode */
}

.light .footer-section ul li a:hover {
    color: #7CB342; /* Standardní zelená na hover v light mode */
}

.dark .social-icon {
    filter: invert(1);
    transition: filter 0.3s;
}

.dark .social-link:hover .social-icon {
    filter: invert(1) drop-shadow(0 0 8px #7CB342);
    transition: filter 0.3s;
}

.light .social-icon {
    transition: filter 0.3s;
}

.light .social-link:hover .social-icon {
    filter: drop-shadow(0 0 8px #7CB342);
    transition: filter 0.3s;
}

/* Spodní oddělovač */
.dark .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.3s;
}

.light .footer-bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s;
}

/* Mobile Theme Toggle Button */
.mobile-theme-toggle {
    background: transparent;
    border: 1px solid transparent; /* Initially transparent */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.mobile-theme-toggle img {
    width: 24px;
    height: 24px;
}

/* Add border colors for different themes */
.dark .mobile-theme-toggle {
    border-color: rgba(255, 255, 255, 0.2);
}

.light .mobile-theme-toggle {
    border-color: rgba(0, 0, 0, 0.2);
}

/* Contact Section Dark Mode */
.dark .contact-info {
    background-color: var(--dm_2);
    transition: background-color 0.3s;
}

.light .contact-info {
    background-color: #f8f9fa;
    transition: background-color 0.3s;
}

.dark .contact-info-item h3 {
    color: var(--lm_2);
    transition: color 0.3s;
}

.light .contact-info-item h3 {
    color: var(--dm_2);
    transition: color 0.3s;
}

.dark .contact-info-item p {
    color: var(--lm_3);
    transition: color 0.3s;
}

.light .contact-info-item p {
    color: var(--text-color, #444);
    transition: color 0.3s;
}

.dark .contact-info-item a {
    color: #7CB342;
    transition: color 0.3s;
}

.light .contact-info-item a {
    color: #7CB342;
    transition: color 0.3s;
}

.dark .contact-description {
    color: var(--lm_3);
    transition: color 0.3s;
}

.light .contact-description {
    color: var(--text-secondary, #666);
    transition: color 0.3s;
}

.dark .contact-description {
    color: var(--lm_3);
}

.light .contact-description {
    color: var(--text-secondary, #666);
}

/* Contact Form Inputs - Dark Mode (exclude submit button) */
.dark .form-group input:not([type="submit"]),
.dark .form-group textarea {
    background: var(--dm_2, #1e1e1e);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--lm_2, #f9f9f9);
}

.dark .form-group input:not([type="submit"]):focus,
.dark .form-group textarea:focus {
    border-color: #5a8c32;
    box-shadow: 0 0 0 3px rgba(90, 140, 50, 0.25);
    outline: none;
}

.dark .form-group label {
    color: var(--lm_2, #f9f9f9);
}