/* ================================ CSS CUSTOM PROPERTIES FOR RESPONSIVE VALUES ================================ */
:root {
  /* Breakpoints (for JS access) */
  --breakpoint-sm: 480px;
  --breakpoint-md: 600px;
  --breakpoint-lg: 768px;
  --breakpoint-xl: 1024px;
  --breakpoint-xxl: 1200px;
  
  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 15px;
  --spacing-md: 20px;
  --spacing-lg: 30px;
  --spacing-xl: 40px;
  --spacing-xxl: 50px;
  
  /* Touch targets */
  --touch-target-min: 44px;
  --touch-target-optimal: 48px;
  
  /* Typography */
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --line-height-base: 1.5;
  --line-height-tight: 1.3;
  --line-height-loose: 1.8;
  
  /* Heading sizes (mobile-first) */
  --font-size-h1: 2rem;
  --font-size-h2: 1.75rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  --font-size-h5: 1.125rem;
  --font-size-h6: 1rem;
  
  /* Transitions */
  --transition-fast: 0.15s;
  --transition-base: 0.3s;
  --transition-slow: 0.5s;
  
  /* Z-index layers */
  --z-header: 1000;
  --z-menu: 9999;
  --z-overlay: 9998;
  --z-modal: 10000;
  
  /* Container widths */
  --container-mobile: 100%;
  --container-tablet: 720px;
  --container-desktop: 960px;
  --container-wide: 1200px;
  
  /* Grid gaps */
  --grid-gap-mobile: 15px;
  --grid-gap-tablet: 20px;
  --grid-gap-desktop: 24px;
  
  /* Border radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Adjust spacing for different screen sizes */
@media (min-width: 768px) {
  :root {
    --spacing-base: var(--spacing-md);
  }
}

@media (max-width: 767px) {
  :root {
    --spacing-base: var(--spacing-sm);
  }
}

/* ================================ BASE MOBILE STYLES (320px-479px) ================================ */

/* Mobile-first base styles - these apply to all screen sizes and are overridden by larger breakpoints */
body {
  margin-bottom: 0 !important;
  font-size: 16px; /* Minimum font size to prevent iOS zoom - Requirement 5.1 */
  overflow-x: hidden; /* Prevent horizontal scroll - Requirement 8.1 */
  width: 100%;
  position: relative;
}

/* Ensure all containers don't cause horizontal overflow */
* {
  box-sizing: border-box;
}

/* Main containers with consistent padding - Requirement 8.1 */
.container,
.content-area,
.site-main,
main {
  padding-left: 15px;
  padding-right: 15px;
}

/* Additional mobile-first container styles for smallest screens (320px-479px) */
@media (max-width: 479px) {
  /* Consistent padding on all main containers - Requirements 5.4, 8.1 */
  .container,
  .content-area,
  .site-main,
  main,
  .header-container,
  .subpage-group,
  .footer-kontakt,
  .header-text,
  .subpage-text,
  .archive-posts,
  .shop-columns,
  .produkty-layout,
  .footer-prio-columns {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Ensure body doesn't overflow */
  body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }
  
  /* Ensure all direct children of body don't overflow */
  body > * {
    max-width: 100%;
  }
  
  /* Prevent any element from causing horizontal scroll */
  html {
    overflow-x: hidden;
    width: 100%;
  }
  
  /* Additional overflow prevention for common problematic elements */
  img,
  video,
  iframe,
  table,
  pre,
  code {
    max-width: 100%;
  }
  
  /* Ensure rows and columns don't overflow */
  .row,
  [class*="col-"] {
    margin-left: 0;
    margin-right: 0;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Increase padding for larger mobile devices (480px-767px) */
@media (min-width: 480px) and (max-width: 767px) {
  .container,
  .content-area,
  .site-main,
  main {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  /* Apply 20px padding to other main containers */
  .header-container,
  .subpage-group,
  .footer-kontakt,
  .header-text,
  .subpage-text,
  .archive-posts {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ================================ RESPONSIVE TYPOGRAPHY SYSTEM ================================ */

/* Mobile-first typography - base styles for all screen sizes */
body {
  font-size: var(--font-size-base); /* 16px minimum */
  line-height: var(--line-height-base); /* 1.5 */
}

/* Heading sizes - mobile-first approach */
h1, .h1 {
  font-size: var(--font-size-h1); /* 2rem = 32px */
  line-height: 1.2;
  margin-bottom: 1rem;
}

h2, .h2 {
  font-size: var(--font-size-h2); /* 1.75rem = 28px */
  line-height: 1.3;
  margin-bottom: 0.875rem;
}

h3, .h3 {
  font-size: var(--font-size-h3); /* 1.5rem = 24px */
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

h4, .h4 {
  font-size: var(--font-size-h4); /* 1.25rem = 20px */
  line-height: 1.4;
  margin-bottom: 0.625rem;
}

h5, .h5 {
  font-size: var(--font-size-h5); /* 1.125rem = 18px */
  line-height: 1.4;
  margin-bottom: 0.5625rem;
}

h6, .h6 {
  font-size: var(--font-size-h6); /* 1rem = 16px */
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

/* Paragraph styles */
p {
  line-height: 1.5;
  margin-bottom: 1rem;
}

/* Word breaking for long words and URLs - Requirement 5.6 */
p, div, span, li, td, th {
  word-wrap: break-word; /* Legacy property */
  overflow-wrap: break-word; /* Modern property - breaks long words */
}

/* Prevent long URLs from breaking layout */
a {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all; /* Allow breaking anywhere for URLs */
}

/* Hyphens for better text flow on mobile */
@media (max-width: 767px) {
  p, li {
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
  }
}

/* Scale up typography for larger screens */
@media (min-width: 768px) {
  h1, .h1 {
    font-size: 2.5rem; /* 40px */
  }
  
  h2, .h2 {
    font-size: 2rem; /* 32px */
  }
  
  h3, .h3 {
    font-size: 1.75rem; /* 28px */
  }
}

@media (min-width: 1024px) {
  h1, .h1 {
    font-size: 3rem; /* 48px */
  }
  
  h2, .h2 {
    font-size: 2.25rem; /* 36px */
  }
  
  h3, .h3 {
    font-size: 2rem; /* 32px */
  }
  
  body {
    font-size: 18px;
  }
}

/* Z POLA I LASU test test*/

.front-menu-wrapper {
	border-bottom: solid 18px brown;
	border-image: linear-gradient(
90deg, rgb(23, 19, 18) 50%, rgb(157, 106, 59) 50% ) 9;
	overflow: hidden;
	display: grid;
	grid-template-columns: 100% 2fr;
	justify-items: right;
}

.front-menu-column {
	display: grid;
}

.front-menu-group  {
	float: right;
	background-color: rgba(255, 255, 255, 0.3);
	height: 100%;
	right: 0;
	top: 0;
	grid-area: 1 / 1 / 1 / 1;
	z-index: 1;
}

#bs-navbarNav, #bs-pageNavbarNav {
	font-family: Open Sans;
	line-height: 3rem;
	text-align: center;
	margin: auto;
}

.front-menu-group .front-page-nav li {
	list-style: none;
}

.front-menu-group .front-page-nav a {
	text-decoration: none;
	color: #17293A;
}

.front-menu a:hover {
	background-color: #C4C4C4;
}

.front-menu ul, ol {
	margin: 0 auto !important;
}

.front-menu li:hover {
	background-color: rgba(255, 255, 255, 0.3);
}

var {
	font-family: Dosis;
}

.entry-content {
	margin-top: 0 !important;
}

/*-------------------------------------- MENU ----------------------------------*/





















.sticky-container.scrolled {
  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.8);
}

.sticky-container {
  position: fixed;
  width: 100%;
  z-index: 1000; 
}

.sticky-container.scrolled {
  background-color: #fff;
  color: black;
}

/*------ SUBPAGE MENU --------*/
.subpages-menu-class .nav-item-static {
  color: black;
}

/* Mega Menu Styles */

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0 0 .375rem .375rem;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-menu .list-group-item {
  border: 0;
  padding: .5rem 1rem;
}

.dropdown-menu .list-group-item-action {
  padding: .5rem 1rem;
}

/* Mega Menu Container */
.dropdown-menu .container {
  width: 100%;
}

.dropdown-menu .row {
  margin: 0;
}

.dropdown-menu .col-md-6 {
  padding: 0;
}

.dropdown-menu .list-group-item.text-uppercase {
  font-weight: bold;
}

.nav-item .dropdown {
  position: relative;
}

.menu-item-type-custom,
.menu-item-type-post_type {
  padding-right: 20px;
  padding-left: 20px;
}

.about-us-container {
  max-width: 700px;
}

/* MENU NA CAŁĄ SZEROKOŚĆ */

.sticky-container > nav > .container,
.top-menu-container.container {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Rozciągnięcie menu */
.navbar-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  margin: 0;
  padding-left: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  gap: 32px; /* odstęp między elementami menu */
}

.navbar-nav > li {
  list-style: none;
}

.navbar-nav > li > a {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: inherit;
}

/* Stylizacja linku z logo */
.nav-link span {
  color: #40724F;
  font-size: 28px;
  font-family: 'Josefin Sans', sans-serif;
}

.menu-container {
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

@media (max-width: 752px) {
  .menu-container {
    display: none;
  }
  .custom-logo-link {
    display: none;
  }
}

@media (max-width: 1400px) {
  .container {
    min-width: 100%;
  }
  .header-logo {
    padding-right: 0 !important;
    padding-top: 0 !important;
  }
  .header-title {
    padding-left: 0 !important;
  }

}

@media (max-width: 1200px) {
  .mr-3 {
    display: none;
  }
  .header-text-p {
    padding-right: 100px;
    padding-left: 100px;
  }
}

@media (max-width: 1115px) {
  .navbar-nav {
    flex-wrap: wrap;
  }
}


/* Kontener menu na 100% szerokości */
.sticky-container > nav,
.sticky-container > nav > .container,
.top-menu-container,
.top-menu-container .container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  justify-content: center;
}

/* Wycentrowanie menu */
.navbar-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px; /* odstęp między elementami */
  margin: 0 auto;
  padding: 0 32px;
  list-style: none;
  flex-wrap: wrap;
  width: auto; /* ważne: nie 100%, żeby nie rozciągać sztucznie */
}

/* Usunięcie marginesów, które mogą zaburzać centrowanie */
.navbar-nav > li {
  margin: 0;
}

/* Logo kontener – niewidoczne przed scrollem, ale rezerwuje miejsce */
.logo-container {
  width: 160px; /* ustalona szerokość, dopasuj do logo */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

.sticky-container.scrolled .logo-container {
  opacity: 1;
  visibility: visible;
}



@media (max-width: 1000px) {
  .footer-contact-columns {
    display: block !important;
  }
  .header-title {
    padding-bottom: 0 !important;
  }
}

/*-------------------------------------- MULTILEVEL HAMBURGER MENU --------------------------------*/
.dropdown-submenu-main {
  position: relative;
}

.dropdown-submenu-main > a:after {
  content: "\f0da";
  float: right;
  border: none;
  font-family: 'FontAwesome';
}

.dropdown-submenu-main > .dropdown-level2 {
  top: 0;
  left: 100%;
  margin-top: 0px;
  margin-left: 0px;
}

code {
  color: #B06AB3;
  background: #fff;
  padding: 0.1rem 0.2rem;
  border-radius: 0.2rem;
}

@media (min-width: 753px) {
  .menu-hamburger1b {
    display: none !important;
  }
}


/* Stylizacja Sticky Menu */
.sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.sticky-container {
  background-color: white;
}

.d-none {
  display: none !important;
}

.d-lg-block {
  display: block !important;
}

/* Hamburger Menu */
.navbar-toggler {
  border-color: transparent;
}

.dropdown-level1,
.dropdown-level2 {
  background-color: white;
  border-radius: 0.25rem;
}



/* Responsive */
@media (min-width: 991px) {
  .menu-toggle {
    display: none;
  }
}

@media (max-width: 929px) {
  #menu-primary-menu {
    gap: 0;
  }
}

@media (max-width: 929px) {
  #menu-primary-menu li a{
    padding: 0;
  }
}




.dropdown-level1,
.dropdown-level2 {
  display: none;
  position: absolute;
  z-index: 1000;
}

/* Pokaż menu rozwijane na hover lub kliknięcie */
.dropdown-main:hover > .dropdown-level1,
.dropdown-submenu-main:hover > .dropdown-level2 {
  display: block;
}

/* Stylizacja ikony hamburgera */
.navbar-toggler {
  border: none; 
}

.navbar-toggler .navbar-toggler-icon {
  color: black;
}

.navbar-toggler:focus {
  outline: none;
}

/* Stylizacja ikony hamburgera */
.navbar-toggler {
  border: none; 
}

.navbar-toggler .navbar-toggler-icon {
  background-color: transparent;
  border: none; 
}

.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after {
  content: "";
  display: block;
  width: 30px; 
  height: 3px; 
  background-color: black !important; 
  margin: 6px 0; 
}

.navbar-toggler.collapsed .navbar-toggler-icon::before,
.navbar-toggler.collapsed .navbar-toggler-icon::after {
  background-color: black !important; 
}

/*-------------------------------------- HEADER --------------------------------*/
.header-container {
  padding-top: 60px; 
  max-width: 1200px;
  margin: 0 auto;
  font-family: Josefin Sans;
  font-size: 20px;
}


.pagination {
  text-align: center;
  margin: 0 !important;
  padding: 0 !important;
}

.pagination .page-numbers {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 5px;
  background-color: #333;
  color: white;
  text-decoration: none;
}

.pagination .current {
  background-color: #333;
  color: #fff;
}


/*---------------------------------------- PODSTRONY --------------------------------------*/
.subpage-contener
{
	padding-top: 70px;
}

.subpage-top {
	   width: 100%;
	   height: 400px;
	   background-size: cover;
}  

.subpage-header {
	height: 400px;
	background-size: cover;
	position: relative;
}

.subpage-title {
	color: white;
	font-family: "Playfair Display", serif;
	font-size: 28px !important;
	text-transform: uppercase;
	position: relative;
	background: linear-gradient(183deg, rgba(2,0,34,0) 0%, rgba(0,0,0,0.37160801820728295) 72%, rgba(0,0,0,1) 100%);
	height: 100%;
	padding-left: 80px;
}

.subpage-text {
	margin: 0 auto;
	font-size: 20px;
	font-family: 'Open Sans';
	min-height: 600px;
}  

.subpage-title h1 {
  	bottom: 15px;
	position: absolute;
  	font-size: 3.2rem;
}

@media (max-width: 768px) {
  .subpage-title h1 {
    font-size: 2rem;
    padding: 0 15px;
  }
  
  .subpage-title {
    padding-left: 20px;
  }
} 

.subpage-contener {
	padding-bottom: 100px;
}

table {
  max-width: 900px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  overflow-x: auto;
  display: block;
}

@media (max-width: 768px) {
  table {
    font-size: 14px;
  }
}

.archive-posts {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 20px; /* Dodatkowy odstęp na górze */
}

@media (max-width: 768px) {
  .archive-posts {
    max-width: 100%;
    padding: 20px 15px;
  }
}

.archive-post {
  display: flex;
  margin-bottom: 20px;
  padding-top: 50px;
}

@media (max-width: 768px) {
  .archive-post {
    flex-direction: column;
    padding-top: 30px;
  }
}

.archive-post-border {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
}

.archive-post-thumbnail {
  flex: 0 0 auto;
  margin-right: 20px;
}

.archive-post-thumbnail img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .archive-post-thumbnail {
    margin-right: 0;
    margin-bottom: 15px;
  }
}

.archive-post-content {
  flex: 1 1 auto;
}

.entry-title a {
  color: #1E74A9;
  font-weight: bold;
  text-decoration: none;
}

.entry-meta {
  margin-bottom: 10px;
}

.entry-summary {
  margin-top: 10px;
}

.page-title {
  text-align: center !important;
}

.pagination {
  display: block !important;
  margin-top: 20px;
  text-align: center;
  width: 100%; /* Rozciągnięcie na całą szerokość */
  padding-bottom: 50px;
}

.pagination .page-numbers {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 5px;
  border: 1px solid #ccc;
}

.pagination .page-numbers.current {
  color: #fff;
}

.page-numbers {
  background: none;
  text-decoration: none;
}

/*------------------------- WPISY -----------------------------*/

/* Main Content Area */
.content-area {
    max-width: 800px;
    margin: 0 auto;
    padding: 150px 20px 20px 20px;
    background-color: #fff;
}

@media (max-width: 768px) {
  .content-area {
    padding: 100px 15px 20px 15px;
  }
}

/* Article Styling */
article {
    margin-bottom: 40px;
}

.entry-header {
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e2e2;
    padding-bottom: 10px;
}

.entry-title {
    font-size: 2.5em;
    margin: 0;
    color: #333;
}

.entry-meta {
    font-size: 0.9em;
    color: #999;
}

.entry-content {
    margin-top: 20px;
    font-size: 1.2em;
    line-height: 1.8;
}

.entry-content img {
    max-width: 100%;
    height: auto;
}

.entry-content a {
    color: #0073aa;
    text-decoration: none;
}

.entry-content a:hover {
    text-decoration: underline;
}

.entry-footer {
    margin-top: 20px;
    font-size: 0.9em;
    color: #999;
    border-top: 1px solid #e2e2e2;
    padding-top: 10px;
}

/* Comments Section */
.comments-area {
    margin-top: 40px;
}

.comment-list {
    list-style: none;
    padding: 0;
}

.comment {
    margin-bottom: 20px;
}

.comment .comment-author {
    font-weight: bold;
}

.comment .comment-metadata {
    font-size: 0.9em;
    color: #999;
}

.comment .comment-content {
    margin-top: 10px;
}

/* Sidebar */
.sidebar {
    margin-top: 40px;
}

.widget-title {
    font-size: 1.5em;
    margin-bottom: 10px;
    border-bottom: 2px solid #e2e2e2;
    padding-bottom: 5px;
}

/*------------------------- PODSTRONY -----------------------------*/

.subpage-group {
  max-width: 1000px;
	margin: 0 auto;
}

@media (max-width: 768px) {
  .subpage-group {
    max-width: 100%;
    padding: 0 15px;
  }
}

/* ------------------------------------------------------------------- MOJE ZMIANY --------------------------------------------------------*/

/*------------------------------------ MENU ----------------------*/
.sticky-top { 
  max-height: 70px;
}

.menu-logo {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Ukryj logo na stronie głównej */
.custom-logo-wrapper.logo-hidden {
  display: none;
}

/* Pokaż logo po scrollu */
body.home.scrolled .custom-logo-wrapper.logo-hidden {
  display: block;
}




/* Usuń padding boczny tylko dla menu */
.sticky-container > nav.navbar {
  padding-left: 0;
  padding-right: 0;
}

/* Ustaw elementy w środku menu na pełną szerokość */
.sticky-container > nav .container {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Dotyczy również top menu */
.top-menu-container > nav .container {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Usunięcie marginesu z logo */
.sticky-container .mr-3 {
  margin-right: 0;
}


.menu-item a i.fab.fa-facebook-f {
  background-color: #1877f2;
  color: white;
  font-size: 14px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
}
.menu-item a i.fab.fa-facebook-f:hover {
  background-color: #145dbf;
}



/*------------------------------------ Header TEXT ----------------------*/
.header-text {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 100px;
  padding-bottom: 100px;
}

@media (max-width: 768px) {
  .header-text {
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

.header-text-p {
  font-family: Josefin Sans;
}

@media (max-width: 768px) {
  .header-text-p {
    padding-right: 20px;
    padding-left: 20px;
    font-size: 16px;
  }
}

.header-logo {
  padding-right: 305px;
  padding-top: 50px;
}

@media (max-width: 768px) {
  .header-logo {
    padding-right: 0;
    padding-top: 20px;
    text-align: center;
  }
  
  .header-logo img {
    max-width: 200px;
  }
}

.header-title {
  padding-bottom: 170px;
  padding-left: 120px;
}

@media (max-width: 768px) {
  .header-title {
    padding-bottom: 50px;
    padding-left: 20px;
    text-align: center;
  }
}

.edare-title div {
  padding-left: 130px;
}

@media (max-width: 768px) {
  .edare-title div {
    padding-left: 20px;
  }
}


@media (max-width: 767px) {
  .sticky-container {
    display: none;
  }
}

/*------------------------------------ Products List ----------------------*/
.product-list-title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 27px;
  font-weight: bold;
}

.wp-block-woocommerce-product-categories ul {
  font-family: 'Josefin Sans', sans-serif;
  margin: 0;
  font-size: 22px;
  color: black;
}

/*------------------------------------ Sklep ----------------------*/

.shop-container {
  min-height: 700px;
}

.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-80{
  -webkit-mask-image: linear-gradient(transparent, black) !important;
}

.shop-columns {
  max-width: 80%;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .shop-columns {
    max-width: 95%;
  }
}

.shop-product-list {
  min-height: 100%;
}




.products li {
  background-color: white;
  border-radius: 10px;
  box-shadow: 2px 2px 10px #535252;
  text-align: center !important;
}

/* ================================ PRODUCT IMAGES RESPONSIVE - Task 3.2 ================================ */
/* Requirements 1.3, 7.1, 7.2 - Make product images responsive with aspect-ratio preservation */

/* All product images - base responsive styles */
.products li img,
.products .product img,
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img,
.woocommerce div.product div.images img,
.woocommerce #content div.product div.images img,
.woocommerce-page div.product div.images img,
.woocommerce-page #content div.product div.images img {
  max-width: 100% !important; /* Requirement 7.1 - Never exceed container width */
  height: auto !important; /* Requirement 7.2 - Maintain aspect ratio */
  width: 100%;
  object-fit: cover; /* Requirement 1.3 - Consistent sizing */
  aspect-ratio: 1 / 1; /* Square aspect ratio for product grid images */
  display: block;
  border-radius: 8px 8px 0 0; /* Match card styling */
}

/* Product thumbnail images in cart/checkout */
.woocommerce table.shop_table img,
.woocommerce-page table.shop_table img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover;
}

/* Product gallery images - preserve natural aspect ratio */
.woocommerce div.product div.images .woocommerce-product-gallery__image img,
.woocommerce #content div.product div.images .woocommerce-product-gallery__image img {
  aspect-ratio: auto; /* Allow natural aspect ratio for gallery */
  object-fit: contain; /* Show full image in gallery */
}

/* Fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .products li img,
  .products .product img,
  .woocommerce ul.products li.product img,
  .woocommerce-page ul.products li.product img {
    height: 250px; /* Fixed height fallback for desktop */
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .products li {
    margin-bottom: 20px;
  }
  
  /* Adjust image height for mobile - fallback */
  @supports not (aspect-ratio: 1 / 1) {
    .products li img,
    .products .product img,
    .woocommerce ul.products li.product img,
    .woocommerce-page ul.products li.product img {
      height: 200px;
    }
  }
  
  /* Ensure product images don't overflow on mobile */
  .woocommerce div.product div.images,
  .woocommerce-page div.product div.images {
    margin-bottom: 20px;
  }
  
  .woocommerce div.product div.images img,
  .woocommerce-page div.product div.images img {
    border-radius: 8px;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  @supports not (aspect-ratio: 1 / 1) {
    .products li img,
    .products .product img {
      height: 220px; /* Medium height for tablets */
    }
  }
}

/* Ensure image containers don't cause overflow */
.products li .woocommerce-loop-product__link,
.products .product .woocommerce-loop-product__link {
  display: block;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

/* Product image hover effects - maintain aspect ratio */
.products li img:hover,
.products .product img:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* Ensure image wrapper maintains aspect ratio */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce-page ul.products li.product .woocommerce-loop-product__link {
  position: relative;
  display: block;
  overflow: hidden;
}

/* Loading state for images */
.products li img[loading="lazy"],
.products .product img[loading="lazy"] {
  background: #f0f0f0;
  min-height: 200px;
}

@media (max-width: 768px) {
  .products li img[loading="lazy"],
  .products .product img[loading="lazy"] {
    min-height: 180px;
  }
}

.woocommerce-loop-product__title {
  margin: 0 auto !important;
  max-width: 80% !important;
  text-align: center !important;
}

@media (max-width: 768px) {
  .woocommerce-loop-product__title {
    font-size: 16px;
    max-width: 90% !important;
  }
}

.add_to_cart_button {
  margin: 0 auto !important;
  max-width: 80% !important;
}

.products .product  a {
  margin: 0 auto !important;
  max-width: 80% !important;
  text-align: center !important;
}

.products .product  a a {
  margin: 0 auto !important;
  max-width: 80% !important;
  text-align: center !important;
}

.product .woocommerce-loop-product__link {
  min-width: 100% !important;
}



/* --- Layout: dwa panele obok siebie --- */
.produkty-layout {
  display: flex;
  flex-wrap: wrap;
  padding-right: 100px;
  padding-left: 100px;
  min-height: 1000px;         /* ← wysokość domyślna */
  box-sizing: border-box;
  position: relative;
  padding-top: 60px;
}

@media (max-width: 768px) {
  .produkty-layout {
    padding-right: 20px;
    padding-left: 20px;
    min-height: auto;
  }
}

/* Lewa kolumna - Kategorie */
#product-categories {
  padding-right: 30px;
  width: 25%;
}

#product-categories ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#product-categories li {
  margin-bottom: 8px;
}

.category-button {
  display: block;
  width: 100%;
  padding: 10px;
  min-height: 44px; /* Touch target minimum - Requirements 1.5, 11.1 */
  background-color: #f0f0f0;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: 4px;
  transition: background-color 0.3s;
  font-size: 16px; /* Prevent iOS zoom */
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.category-button:hover {
  background-color: #e0e0e0;
}

.category-button.active {
  background-color: #d4d4d4;
  font-weight: bold;
}

/* Mobile: vertical stack with adequate spacing - Requirements 1.4, 1.5 */
@media (max-width: 767px) {
  #product-categories ul {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Adequate spacing between buttons */
  }
  
  #product-categories li {
    margin-bottom: 0; /* Remove margin, use gap instead */
  }
  
  .category-button {
    text-align: center;
    justify-content: center;
    padding: 12px 15px;
    min-height: 48px; /* Optimal touch target */
  }
}

/* Prawa kolumna - Produkty */
#products-display {
  width: 75%;
  transition: opacity 0.3s ease;
  position: relative;
}

/* Produkty jako siatka - Mobile First Approach */
/* Base mobile styles: single column - Requirements 1.1, 1.2 */
.products {
  display: grid;
  grid-template-columns: 1fr; /* Single column on mobile */
  gap: 20px; /* Responsive gap */
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100%; /* Prevent overflow */
}

/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .products {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
  .products {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding-left: 30px;
  }
}

/* Reset WooCommerce domyślnych stylów */
.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  display: block;
  max-width: 100%; /* Prevent overflow - Requirement 1.2 */
  overflow: hidden; /* Ensure content doesn't overflow */
  box-sizing: border-box; /* Include padding and border in width */
}

/* Usuń clear: both z WooCommerce klas */
.products li.first,
.products li.last {
  clear: none !important;
}

/* Ukryj domyślne przedrostki WooCommerce */
ul.products::before {
  display: none !important;
}

/* Styl dla stanu ładowania */
#products-display.loading {
  min-height: 500px;
}

#products-display.loading::after {
  content: "Ładowanie produktów...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 1.2em;
  color: #555;
  z-index: 1;
  background: white;
  padding: 20px 40px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

/* --- RESPONSYWNOŚĆ --- */

/* Tablet: kolumny pod sobą, produkty w 2 kolumnach */
@media (max-width: 1024px) {
  .produkty-layout {
    flex-direction: column;
    min-height: auto;
  }

  #product-categories,
  #products-display {
    width: 100%;
  }

  #product-categories {
    background: #f9f9f9;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  #product-categories ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  #product-categories li {
    flex: 1 1 calc(50% - 10px);
  }

  .category-button {
    text-align: center;
    font-size: 14px;
    min-height: 44px; /* Maintain touch target */
  }

  .products {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Telefon: 1 kolumna produktów i przycisków */
@media (max-width: 600px) {
  #product-categories li {
    flex: 1 1 100%;
  }

  .products {
    grid-template-columns: 1fr;
    padding-left: 0;
  }

  #products-display {
    padding: 0 10px;
  }
}

.category-button.active {
  background-color: #d4d4d4;
  font-weight: bold;
}


.wc-block-grid__product-add-to-cart a{
  max-height: 40px;
}

/*------------------------------------ FORMULARZ ----------------------*/
.linia-formularza .wpforms-field-label {
  float: left;
  min-width: 200px;
}

.linia-formularza .wpforms-field-medium {
  background-color: #EDE9E6;
}

.linia-formularza {
  font-family: 'Josefin Sans', sans-serif;
  display: flex;
}

@media (max-width: 768px) {
  .linia-formularza {
    flex-direction: column;
  }
  
  .linia-formularza .wpforms-field-label {
    float: none;
    min-width: 100%;
    margin-bottom: 10px;
  }
  
  .linia-formularza .wpforms-field-medium {
    width: 100%;
  }
}
/*------------------------------------ FOOTER ----------------------*/

.footer-prio-columns {
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .footer-prio-columns {
    max-width: 100%;
    padding: 0 15px;
  }
}

.footer-contact-columns {
  padding-top: 50px;
}

.footer-kontakt {
  max-width: 80%;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .footer-kontakt {
    max-width: 100%;
    padding: 0 15px;
  }
}

section{
  margin-bottom: 0 !important;
}

.footer-copyright-text {
  margin-bottom: 0 !important;
}

/*------------------------------------ PODSTRONY ----------------------*/

.content-area {
  max-width: 100%;
  width: 100%;
  padding: 20px;
}

.site-main {
  max-width: 100%;
  width: 100%;
}

.custom-logo-link img {
  max-width: 150px;
}


/*------------------------------------ ZAKŁADKI ----------------------*/



/* ================================ IMAGE AND MEDIA MOBILE OPTIMIZATION - Task 10 ================================ */

/* ================================ 10.1 Implement Responsive Image Styles ================================ */
/* Requirements 7.1, 7.2, 7.7, 11.5 - All images responsive with aspect ratio preservation and alt text */

/* Base responsive image styles - apply to ALL images */
img {
  max-width: 100% !important; /* Requirement 7.1 - Never exceed container width */
  height: auto !important; /* Requirement 7.2 - Maintain aspect ratio */
  display: block;
  border: 0; /* Remove default border */
}

/* Ensure images in content areas are responsive */
.entry-content img,
.post-content img,
.page-content img,
.comment-content img,
.widget img,
.site-content img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto; /* Center images */
}

/* WordPress alignment classes */
.alignleft,
.alignright,
.aligncenter {
  max-width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  /* Force center alignment on mobile for better UX */
  .alignleft,
  .alignright {
    float: none;
    margin: 0 auto 1rem auto;
    display: block;
  }
  
  .aligncenter {
    margin: 0 auto 1rem auto;
    display: block;
  }
}

/* WordPress caption styling */
.wp-caption {
  max-width: 100% !important;
  height: auto;
}

.wp-caption img {
  max-width: 100%;
  height: auto;
  display: block;
}

.wp-caption-text {
  font-size: 14px;
  line-height: 1.5;
  padding: 8px 0;
  text-align: center;
  color: #666;
}

/* Featured images */
.post-thumbnail img,
.entry-thumbnail img,
.featured-image img {
  max-width: 100%;
  height: auto;
  display: block;
  width: 100%;
}

/* Ensure linked images are responsive */
a img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Image loading states */
img[loading="lazy"] {
  background: #f0f0f0;
  min-height: 100px;
}

img:not([src]) {
  visibility: hidden;
}

/* Prevent image overflow in flex containers */
.flex-container img,
.d-flex img {
  max-width: 100%;
  height: auto;
  flex-shrink: 0;
}

/* Prevent image overflow in grid containers */
.grid-container img,
.d-grid img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* Avatar images */
.avatar,
.comment-author img {
  max-width: 100%;
  height: auto;
  border-radius: 50%;
}

/* Logo images */
.site-logo img,
.custom-logo,
.header-logo img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .site-logo img,
  .custom-logo,
  .header-logo img {
    max-width: 200px; /* Reasonable max size on mobile */
  }
}

/* Thumbnail images */
.thumbnail img,
.post-thumbnail img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* Image hover effects - maintain aspect ratio */
img:hover {
  transform: scale(1.02);
  transition: transform 0.3s ease;
}

/* Disable hover effect on touch devices */
@media (hover: none) and (pointer: coarse) {
  img:hover {
    transform: none;
  }
}

/* Ensure images don't break layout */
figure {
  max-width: 100%;
  margin: 0 0 1rem 0;
}

figure img {
  max-width: 100%;
  height: auto;
  display: block;
}

figcaption {
  font-size: 14px;
  line-height: 1.5;
  padding: 8px 0;
  color: #666;
  text-align: center;
}

/* Responsive image sizes for different screen sizes */
@media (max-width: 480px) {
  /* Very small screens - optimize image display */
  img[loading="lazy"] {
    min-height: 80px;
  }
  
  .post-thumbnail img,
  .entry-thumbnail img {
    border-radius: 8px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  /* Medium mobile screens */
  img[loading="lazy"] {
    min-height: 100px;
  }
}

/* Ensure images in tables are responsive */
table img {
  max-width: 100%;
  height: auto;
}

/* Ensure images in lists are responsive */
li img {
  max-width: 100%;
  height: auto;
}

/* Image accessibility - ensure alt text is present */
/* This is a visual indicator for development - remove in production */
img:not([alt]) {
  outline: 2px dashed red; /* Visual indicator for missing alt text */
  outline-offset: 2px;
}

/* For production, just ensure proper styling */
img[alt=""] {
  /* Decorative images with empty alt are fine */
  outline: none;
}

/* Responsive image srcset support */
img[srcset] {
  max-width: 100%;
  height: auto;
}

/* Picture element support */
picture {
  display: block;
  max-width: 100%;
}

picture img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ================================ 10.2 Create Responsive Image Gallery ================================ */
/* Requirement 7.3 - CSS Grid galleries: 1 column ≤480px, 2 columns 481-768px, 3+ columns >768px */

/* Base gallery styles - WordPress default galleries */
.gallery {
  display: grid;
  gap: 15px; /* Consistent gaps - Requirement 7.3 */
  margin: 0 0 1.5rem 0;
  padding: 0;
  list-style: none;
}

/* Gallery item */
.gallery-item {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.gallery-item img {
  max-width: 100%;
  height: auto;
  display: block;
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

/* Gallery caption */
.gallery-caption {
  font-size: 13px;
  line-height: 1.5;
  padding: 8px;
  text-align: center;
  color: #666;
  background: #f9f9f9;
  margin-top: 5px;
  border-radius: 4px;
}

/* Mobile: 1 column at ≤480px - Requirement 7.3 */
@media (max-width: 480px) {
  .gallery,
  .gallery-columns-1,
  .gallery-columns-2,
  .gallery-columns-3,
  .gallery-columns-4,
  .gallery-columns-5,
  .gallery-columns-6,
  .gallery-columns-7,
  .gallery-columns-8,
  .gallery-columns-9 {
    grid-template-columns: 1fr !important; /* Single column */
    gap: 15px;
  }
  
  .gallery-item {
    width: 100%;
  }
}

/* Large mobile/small tablet: 2 columns at 481px-768px - Requirement 7.3 */
@media (min-width: 481px) and (max-width: 768px) {
  .gallery,
  .gallery-columns-2,
  .gallery-columns-3,
  .gallery-columns-4,
  .gallery-columns-5,
  .gallery-columns-6,
  .gallery-columns-7,
  .gallery-columns-8,
  .gallery-columns-9 {
    grid-template-columns: repeat(2, 1fr) !important; /* 2 columns */
    gap: 20px;
  }
  
  /* Single column galleries stay single */
  .gallery-columns-1 {
    grid-template-columns: 1fr !important;
  }
}

/* Tablet and above: 3+ columns at >768px - Requirement 7.3 */
@media (min-width: 769px) {
  .gallery-columns-1 {
    grid-template-columns: 1fr;
  }
  
  .gallery-columns-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .gallery-columns-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  
  .gallery-columns-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  
  .gallery-columns-5 {
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
  }
  
  .gallery-columns-6 {
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
  }
  
  .gallery-columns-7 {
    grid-template-columns: repeat(7, 1fr);
    gap: 20px;
  }
  
  .gallery-columns-8 {
    grid-template-columns: repeat(8, 1fr);
    gap: 20px;
  }
  
  .gallery-columns-9 {
    grid-template-columns: repeat(9, 1fr);
    gap: 20px;
  }
}

/* WordPress Block Gallery (Gutenberg) */
.wp-block-gallery {
  display: grid;
  gap: 15px;
  margin: 0 0 1.5rem 0;
  padding: 0;
  list-style: none;
}

/* Mobile: 1 column */
@media (max-width: 480px) {
  .wp-block-gallery {
    grid-template-columns: 1fr !important;
    gap: 15px;
  }
  
  .wp-block-gallery.columns-2,
  .wp-block-gallery.columns-3,
  .wp-block-gallery.columns-4,
  .wp-block-gallery.columns-5,
  .wp-block-gallery.columns-6,
  .wp-block-gallery.columns-7,
  .wp-block-gallery.columns-8,
  .wp-block-gallery.columns-9 {
    grid-template-columns: 1fr !important;
  }
}

/* Large mobile: 2 columns */
@media (min-width: 481px) and (max-width: 768px) {
  .wp-block-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px;
  }
  
  .wp-block-gallery.columns-2,
  .wp-block-gallery.columns-3,
  .wp-block-gallery.columns-4,
  .wp-block-gallery.columns-5,
  .wp-block-gallery.columns-6,
  .wp-block-gallery.columns-7,
  .wp-block-gallery.columns-8,
  .wp-block-gallery.columns-9 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .wp-block-gallery.columns-1 {
    grid-template-columns: 1fr !important;
  }
}

/* Desktop: respect column settings */
@media (min-width: 769px) {
  .wp-block-gallery.columns-1 {
    grid-template-columns: 1fr;
  }
  
  .wp-block-gallery.columns-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .wp-block-gallery.columns-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .wp-block-gallery.columns-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .wp-block-gallery.columns-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  
  .wp-block-gallery.columns-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  
  .wp-block-gallery.columns-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  
  .wp-block-gallery.columns-8 {
    grid-template-columns: repeat(8, 1fr);
  }
  
  .wp-block-gallery.columns-9 {
    grid-template-columns: repeat(9, 1fr);
  }
}

/* Block gallery items */
.wp-block-gallery .blocks-gallery-item,
.wp-block-gallery .wp-block-image {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wp-block-gallery .blocks-gallery-item img,
.wp-block-gallery .wp-block-image img {
  max-width: 100%;
  height: auto;
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* WooCommerce product gallery */
.woocommerce-product-gallery {
  display: grid;
  gap: 15px;
}

@media (max-width: 480px) {
  .woocommerce-product-gallery {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .woocommerce-product-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 769px) {
  .woocommerce-product-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* Custom gallery classes for flexibility */
.image-grid {
  display: grid;
  gap: 15px;
  margin: 0 0 1.5rem 0;
}

@media (max-width: 480px) {
  .image-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 769px) {
  .image-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  
  .image-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .image-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .image-grid.cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Masonry-style gallery (optional enhancement) */
.gallery-masonry {
  display: grid;
  gap: 15px;
  grid-auto-flow: dense;
}

@media (max-width: 480px) {
  .gallery-masonry {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .gallery-masonry {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 769px) {
  .gallery-masonry {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* Gallery loading state */
.gallery.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Lightbox support (if using lightbox plugin) */
.gallery-item a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.gallery-item a::after {
  content: '🔍';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.gallery-item a:hover::after {
  opacity: 1;
}

/* Disable hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
  .gallery-item a::after {
    display: none;
  }
}

/* ================================ 10.3 Make Embedded Media Responsive ================================ */
/* Requirement 7.4 - Videos and iframes responsive, prevent horizontal overflow, responsive wrapper */

/* Base styles for all embedded media */
iframe,
embed,
object,
video {
  max-width: 100% !important; /* Requirement 7.4 - Never exceed container */
  height: auto;
  display: block;
  border: 0;
}

/* Responsive video wrapper - maintains 16:9 aspect ratio */
.video-wrapper,
.embed-container,
.responsive-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin: 0 0 1.5rem 0;
  background: #000;
  border-radius: 8px;
}

.video-wrapper iframe,
.video-wrapper object,
.video-wrapper embed,
.video-wrapper video,
.embed-container iframe,
.embed-container object,
.embed-container embed,
.embed-container video,
.responsive-video iframe,
.responsive-video object,
.responsive-video embed,
.responsive-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* WordPress embedded content */
.wp-block-embed,
.wp-block-embed__wrapper {
  max-width: 100%;
  overflow: hidden;
}

.wp-block-embed iframe,
.wp-block-embed video {
  max-width: 100% !important;
  height: auto;
}

/* Responsive embed wrapper for WordPress */
.wp-block-embed.is-type-video,
.wp-block-embed.is-type-rich {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.wp-block-embed.is-type-video iframe,
.wp-block-embed.is-type-rich iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* YouTube embeds */
.youtube-player,
iframe[src*="youtube.com"],
iframe[src*="youtu.be"] {
  max-width: 100% !important;
  width: 100%;
}

/* Vimeo embeds */
iframe[src*="vimeo.com"] {
  max-width: 100% !important;
  width: 100%;
}

/* Twitter embeds */
.twitter-tweet,
iframe[src*="twitter.com"] {
  max-width: 100% !important;
  width: 100%;
  margin: 0 auto !important;
}

/* Instagram embeds */
.instagram-media,
iframe[src*="instagram.com"] {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Facebook embeds */
.fb-post,
.fb-video,
iframe[src*="facebook.com"] {
  max-width: 100% !important;
  width: 100%;
}

/* Google Maps embeds */
iframe[src*="google.com/maps"],
iframe[src*="maps.google.com"] {
  max-width: 100% !important;
  width: 100%;
  min-height: 300px;
  border-radius: 8px;
}

@media (max-width: 767px) {
  iframe[src*="google.com/maps"],
  iframe[src*="maps.google.com"] {
    min-height: 250px;
  }
}

/* HTML5 video element */
video {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  width: 100%;
  border-radius: 8px;
}

video::-webkit-media-controls-panel {
  background: rgba(0, 0, 0, 0.8);
}

/* Audio element */
audio {
  max-width: 100%;
  width: 100%;
  display: block;
  margin: 0 0 1rem 0;
}

/* WordPress video shortcode */
.wp-video {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 0 1.5rem 0;
}

.wp-video video {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}

/* WordPress audio shortcode */
.wp-audio-shortcode {
  max-width: 100%;
  width: 100%;
  margin: 0 0 1rem 0;
}

/* Embedded content in posts */
.entry-content iframe,
.entry-content embed,
.entry-content object,
.entry-content video {
  max-width: 100% !important;
  margin: 0 0 1.5rem 0;
}

/* Prevent overflow in content areas */
.post-content,
.page-content,
.comment-content {
  overflow-x: hidden; /* Prevent horizontal overflow - Requirement 7.4 */
}

.post-content iframe,
.post-content embed,
.post-content object,
.post-content video,
.page-content iframe,
.page-content embed,
.page-content object,
.page-content video,
.comment-content iframe,
.comment-content embed,
.comment-content object,
.comment-content video {
  max-width: 100% !important;
}

/* Mobile-specific adjustments */
@media (max-width: 767px) {
  /* Reduce padding for video wrappers on mobile */
  .video-wrapper,
  .embed-container,
  .responsive-video {
    margin: 0 0 1rem 0;
    border-radius: 4px;
  }
  
  /* Ensure iframes don't cause horizontal scroll */
  iframe {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Video controls sizing for mobile */
  video::-webkit-media-controls-panel {
    font-size: 14px;
  }
  
  /* Embedded content spacing */
  .entry-content iframe,
  .entry-content embed,
  .entry-content object,
  .entry-content video {
    margin: 0 0 1rem 0;
  }
}

/* 4:3 aspect ratio wrapper (for older content) */
.video-wrapper-4-3,
.embed-container-4-3 {
  padding-bottom: 75%; /* 4:3 aspect ratio */
}

/* 21:9 aspect ratio wrapper (for ultrawide content) */
.video-wrapper-21-9,
.embed-container-21-9 {
  padding-bottom: 42.857%; /* 21:9 aspect ratio */
}

/* Square aspect ratio wrapper */
.video-wrapper-1-1,
.embed-container-1-1 {
  padding-bottom: 100%; /* 1:1 aspect ratio */
}

/* Vertical video wrapper (9:16 for mobile videos) */
.video-wrapper-9-16,
.embed-container-9-16 {
  padding-bottom: 177.778%; /* 9:16 aspect ratio */
  max-width: 400px;
  margin: 0 auto 1.5rem auto;
}

@media (max-width: 767px) {
  .video-wrapper-9-16,
  .embed-container-9-16 {
    max-width: 100%;
  }
}

/* Embedded content loading state */
iframe[loading="lazy"],
video[loading="lazy"] {
  background: #f0f0f0;
  min-height: 200px;
}

/* Prevent embedded content from breaking layout */
.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: "";
  padding-top: 56.25%; /* 16:9 default */
}

.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Accessibility - ensure embedded content is keyboard accessible */
iframe:focus,
video:focus {
  outline: 2px solid #0073aa;
  outline-offset: 2px;
}

/* Print styles for embedded media */
@media print {
  iframe,
  embed,
  object,
  video {
    display: none;
  }
  
  .video-wrapper::after,
  .embed-container::after {
    content: "Video content not available in print";
    display: block;
    padding: 20px;
    background: #f0f0f0;
    text-align: center;
    color: #666;
  }
}

/* ================================ 10.4 Style Background Images for Mobile ================================ */
/* Requirements 7.5, 7.6 - background-size: cover, reduce hero height to max 300px on mobile */

/* Base background image styles - apply to all elements with background images */
[style*="background-image"],
.has-background-image,
.bg-image,
.background-image {
  background-size: cover !important; /* Requirement 7.5 - Cover scaling */
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}

/* Hero sections - general styling */
.hero,
.hero-section,
.hero-banner,
.page-hero,
.site-hero {
  background-size: cover !important;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Desktop hero height */
@media (min-width: 768px) {
  .hero,
  .hero-section,
  .hero-banner,
  .page-hero,
  .site-hero {
    min-height: 400px;
    height: 60vh;
    max-height: 600px;
  }
}

/* Mobile hero height - Requirement 7.6: max 300px */
@media (max-width: 767px) {
  .hero,
  .hero-section,
  .hero-banner,
  .page-hero,
  .site-hero {
    height: 300px !important; /* Requirement 7.6 - Maximum 300px on mobile */
    max-height: 300px !important;
    min-height: 250px;
  }
  
  /* Smaller screens get even more compact */
  @media (max-width: 480px) {
    .hero,
    .hero-section,
    .hero-banner,
    .page-hero,
    .site-hero {
      height: 250px !important;
      max-height: 250px !important;
      min-height: 200px;
    }
  }
}

/* Subpage header with background image */
.subpage-header,
.subpage-top {
  background-size: cover !important;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
}

/* Desktop subpage header */
@media (min-width: 768px) {
  .subpage-header,
  .subpage-top {
    height: 400px;
  }
}

/* Mobile subpage header - Requirement 7.6 */
@media (max-width: 767px) {
  .subpage-header,
  .subpage-top {
    height: 300px !important; /* Max 300px on mobile */
    max-height: 300px !important;
  }
}

@media (max-width: 480px) {
  .subpage-header,
  .subpage-top {
    height: 250px !important;
    max-height: 250px !important;
  }
}

/* Page header with background */
.page-header,
.entry-header {
  background-size: cover !important;
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 767px) {
  .page-header.has-background,
  .entry-header.has-background {
    height: 300px !important;
    max-height: 300px !important;
  }
}

/* Section backgrounds */
section[style*="background-image"],
.section-background,
.bg-section {
  background-size: cover !important;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll; /* Better performance on mobile */
}

/* Parallax backgrounds - disable on mobile for performance */
@media (max-width: 767px) {
  .parallax,
  .parallax-background,
  [data-parallax] {
    background-attachment: scroll !important; /* Disable parallax on mobile */
    background-size: cover !important;
  }
}

/* Full-width background sections */
.full-width-bg,
.fullwidth-background {
  background-size: cover !important;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  padding: 60px 20px;
}

@media (max-width: 767px) {
  .full-width-bg,
  .fullwidth-background {
    padding: 40px 15px;
  }
}

/* Background overlay for better text readability */
.hero::before,
.hero-section::before,
.subpage-header::before,
.has-background-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3); /* Dark overlay */
  z-index: 1;
  pointer-events: none;
}

/* Content above overlay */
.hero > *,
.hero-section > *,
.subpage-header > *,
.has-background-overlay > * {
  position: relative;
  z-index: 2;
}

/* Gradient overlays */
.hero-gradient::before,
.gradient-overlay::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
}

/* WordPress cover block with background image */
.wp-block-cover,
.wp-block-cover-image {
  background-size: cover !important;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}

@media (max-width: 767px) {
  .wp-block-cover,
  .wp-block-cover-image {
    min-height: 250px !important;
    max-height: 300px !important;
  }
}

/* Background image positioning options */
.bg-top {
  background-position: center top !important;
}

.bg-bottom {
  background-position: center bottom !important;
}

.bg-left {
  background-position: left center !important;
}

.bg-right {
  background-position: right center !important;
}

/* Background size options */
.bg-contain {
  background-size: contain !important;
  background-repeat: no-repeat;
}

.bg-auto {
  background-size: auto !important;
}

/* Fixed background - disable on mobile */
.bg-fixed {
  background-attachment: fixed;
}

@media (max-width: 767px) {
  .bg-fixed {
    background-attachment: scroll !important; /* Better performance */
  }
}

/* Card backgrounds */
.card-background,
.box-background {
  background-size: cover !important;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 200px;
  border-radius: 8px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .card-background,
  .box-background {
    min-height: 150px;
  }
}

/* Banner backgrounds */
.banner,
.promo-banner {
  background-size: cover !important;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 40px 20px;
}

@media (max-width: 767px) {
  .banner,
  .promo-banner {
    padding: 30px 15px;
    min-height: auto;
  }
}

/* Call-to-action backgrounds */
.cta-section,
.call-to-action {
  background-size: cover !important;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 60px 20px;
  text-align: center;
}

@media (max-width: 767px) {
  .cta-section,
  .call-to-action {
    padding: 40px 15px;
  }
}

/* Testimonial backgrounds */
.testimonial-background,
.quote-background {
  background-size: cover !important;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 40px 20px;
}

@media (max-width: 767px) {
  .testimonial-background,
  .quote-background {
    padding: 30px 15px;
  }
}

/* Background image lazy loading */
[data-bg-image] {
  background-size: cover !important;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #f0f0f0; /* Placeholder color */
}

/* Loading state for background images */
.bg-loading {
  background-color: #f0f0f0;
  animation: bg-pulse 1.5s ease-in-out infinite;
}

@keyframes bg-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Ensure text is readable over background images */
.has-background-image,
.bg-image,
[style*="background-image"] {
  color: #fff; /* Default to white text */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Subtle shadow for readability */
}

/* Dark text option for light backgrounds */
.bg-light-image {
  color: #333 !important;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5) !important;
}

/* Responsive background images using picture element approach */
@media (max-width: 480px) {
  /* Small mobile - could use smaller images via data attributes */
  [data-bg-mobile] {
    background-image: var(--bg-mobile) !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  /* Tablet - could use medium images */
  [data-bg-tablet] {
    background-image: var(--bg-tablet) !important;
  }
}

@media (min-width: 769px) {
  /* Desktop - use full size images */
  [data-bg-desktop] {
    background-image: var(--bg-desktop) !important;
  }
}

/* Optimize background images for retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  [data-bg-retina] {
    background-image: var(--bg-retina) !important;
  }
}

/* Print styles - remove background images */
@media print {
  [style*="background-image"],
  .has-background-image,
  .bg-image,
  .hero,
  .hero-section,
  .subpage-header {
    background-image: none !important;
    background-color: #f0f0f0 !important;
  }
}

/* Accessibility - ensure sufficient contrast */
.has-background-image:not(.bg-light-image) {
  /* Ensure minimum contrast for text over images */
  --text-color: #ffffff;
  --link-color: #ffffff;
}

/* Performance optimization - will-change for animated backgrounds */
.animated-background {
  will-change: background-position;
}

/* Remove will-change after animation */
.animated-background:not(:hover):not(:focus) {
  will-change: auto;
}

/* ================================ DODATKOWE POPRAWKI RESPONSYWNOŚCI ================================ */

/* Ogólne poprawki dla urządzeń mobilnych */
@media (max-width: 768px) {
  /* Ukryj sticky container na małych ekranach jeśli powoduje problemy */
  body {
    overflow-x: hidden;
  }
  
  /* Poprawki dla kontenerów */
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  /* Poprawki dla menu */
  .navbar-nav {
    gap: 15px;
    padding: 0 15px;
  }
  
  /* Poprawki dla nagłówków */
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.75rem;
  }
  
  h3 {
    font-size: 1.5rem;
  }
  
  h4 {
    font-size: 1.25rem;
  }
  
  /* Poprawki dla przycisków */
  .button, .btn, button {
    padding: 10px 15px;
    font-size: 14px;
  }
  
  /* Poprawki dla WooCommerce */
  .woocommerce .products ul,
  .woocommerce-page .products ul {
    margin: 0;
    padding: 0;
  }
  
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
    width: 100%;
    margin: 0 0 20px 0;
  }
  
  /* Poprawki dla koszyka */
  .woocommerce table.cart,
  .woocommerce-page table.cart {
    font-size: 12px;
  }
  
  .woocommerce table.cart td,
  .woocommerce-page table.cart td {
    padding: 5px;
  }
  
  /* Poprawki dla checkout */
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 {
    width: 100%;
    float: none;
  }
  
  /* Poprawki dla formularzy WooCommerce */
  .woocommerce form .form-row {
    padding: 3px;
  }
  
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea {
    padding: 8px;
  }
  
  /* Poprawki dla sidebara */
  .sidebar {
    margin-top: 30px;
    padding: 0 15px;
  }
  
  /* Poprawki dla galerii */
  .gallery-columns-2,
  .gallery-columns-3,
  .gallery-columns-4,
  .gallery-columns-5,
  .gallery-columns-6 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Poprawki dla video */
  iframe,
  video {
    max-width: 100%;
    height: auto;
  }
  
  /* Poprawki dla tabel */
  table {
    font-size: 12px;
  }
  
  table td,
  table th {
    padding: 5px;
  }
}

/* Dodatkowe poprawki dla bardzo małych ekranów */
@media (max-width: 480px) {
  .header-container {
    padding-top: 30px;
  }
  
  .subpage-contener {
    padding-top: 50px;
  }
  
  .subpage-text {
    font-size: 16px;
    padding: 0 10px;
  }
  
  .entry-title {
    font-size: 1.75em;
  }
  
  .entry-content {
    font-size: 1em;
  }
  
  /* Galeria na 1 kolumnę */
  .gallery-columns-2,
  .gallery-columns-3,
  .gallery-columns-4,
  .gallery-columns-5,
  .gallery-columns-6 {
    grid-template-columns: 1fr;
  }
  
  /* Menu hamburger zawsze widoczne */
  .navbar-toggler {
    display: block !important;
  }
  
  /* Ukryj desktop menu */
  .navbar-collapse {
    background: white;
    padding: 15px;
  }
}

/* Poprawki dla tabletów w orientacji poziomej - Requirement 1.6 */
@media (min-width: 769px) and (max-width: 1024px) {
  .produkty-layout {
    padding-right: 50px;
    padding-left: 50px;
  }
  
  /* Ensure 2-column product grid on tablets */
  .products {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  /* Adjust product card spacing */
  .products li {
    margin-bottom: 20px;
  }
  
  /* Category buttons in 2 columns on tablet */
  #product-categories ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .category-button {
    min-height: 44px;
    padding: 12px 15px;
  }
  
  /* Header adjustments for tablet */
  .header-text {
    padding-top: 75px;
    padding-bottom: 75px;
  }
  
  .header-logo {
    padding-right: 150px;
  }
  
  .header-title {
    padding-left: 60px;
    padding-bottom: 100px;
  }
}

/* Poprawki dla bardzo dużych ekranów */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

/* Poprawki dla orientacji poziomej na telefonach */
@media (max-height: 500px) and (orientation: landscape) {
  .header-container {
    padding-top: 20px;
  }
  
  .subpage-header {
    height: 250px;
  }
  
  .subpage-title h1 {
    font-size: 2rem;
  }
}

/* Poprawki dla dostępności - większe obszary klikalne na mobile */
@media (max-width: 768px) {
  a, button, .button, .btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .navbar-nav li a {
    padding: 12px 15px;
  }
}

/* Poprawki dla WooCommerce na mobile - koszyk i checkout */
@media (max-width: 768px) {
  .woocommerce .cart-collaterals .cart_totals,
  .woocommerce-page .cart-collaterals .cart_totals {
    width: 100%;
    float: none;
  }
  
  .woocommerce ul.cart_list li,
  .woocommerce ul.product_list_widget li {
    padding: 10px 0;
  }
  
  .woocommerce .quantity .qty {
    width: 60px;
    padding: 5px;
  }
  
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary {
    width: 100%;
    float: none;
  }
  
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0;
  }
  
  .woocommerce div.product .woocommerce-tabs ul.tabs li {
    display: block;
    margin: 0;
    border-bottom: 1px solid #ddd;
  }
}

/* Poprawki dla slide menu na mobile */
@media (max-width: 768px) {
  #slide-menu {
    width: 280px;
    left: -280px;
  }
  
  #menu-toggle {
    display: block;
    z-index: 100000;
  }
  
  #slide-menu.open {
    box-shadow: 2px 0 10px rgba(0,0,0,0.3);
  }
}

/* Poprawki dla sticky menu na mobile */
@media (max-width: 768px) {
  .sticky-container {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
  }
  
  .sticky-top {
    max-height: 60px;
  }
  
  .logo-container img {
    max-width: 120px;
  }
}

/* ================================ CHECKOUT PAGE MOBILE EXPERIENCE - Task 6 ================================ */
/* Requirements 3.1-3.7, 6.1-6.7 - Comprehensive checkout page mobile optimization */

/* ================================ 6.1 Single-Column Checkout Form Layout ================================ */
/* Requirements 3.1, 6.2 - Stack billing and shipping forms vertically, labels above inputs, full-width fields */

@media (max-width: 767px) {
  /* Force single column layout for checkout forms */
  .woocommerce-checkout .col2-set,
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2,
  .woocommerce form.checkout .col2-set .col-1,
  .woocommerce form.checkout .col2-set .col-2 {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Stack billing and shipping sections vertically */
  .woocommerce-billing-fields,
  .woocommerce-shipping-fields {
    width: 100%;
    margin-bottom: 30px;
  }
  
  /* Ensure form rows are full width */
  .woocommerce form .form-row {
    width: 100% !important;
    float: none !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
  }
  
  /* Labels above inputs - Requirement 6.2 */
  .woocommerce form .form-row label {
    display: block !important;
    width: 100% !important;
    margin-bottom: 8px !important;
    font-weight: 600;
    float: none !important;
  }
  
  /* Full-width form fields */
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  
  /* Remove any column-based layouts */
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last,
  .woocommerce form .form-row-wide {
    width: 100% !important;
    float: none !important;
  }
  
  /* Checkout page container */
  .woocommerce-checkout {
    padding: 15px;
  }
  
  /* Checkout form wrapper */
  .woocommerce form.checkout {
    display: flex;
    flex-direction: column;
  }
}

/* ================================ 6.2 Style Form Inputs for Mobile ================================ */
/* Requirements 3.2, 6.1, 6.4 - Minimum 44px height, 16px font-size, adequate padding, native controls */

@media (max-width: 767px) {
  /* All text inputs - Requirement 3.2 */
  .woocommerce form .form-row input[type="text"],
  .woocommerce form .form-row input[type="email"],
  .woocommerce form .form-row input[type="tel"],
  .woocommerce form .form-row input[type="number"],
  .woocommerce form .form-row input[type="password"],
  .woocommerce form .form-row textarea,
  .woocommerce-checkout input.input-text,
  .woocommerce-checkout textarea {
    min-height: 44px !important; /* Touch target minimum */
    padding: 12px !important; /* Adequate padding */
    font-size: 16px !important; /* Prevent iOS zoom - Requirement 6.1 */
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    width: 100%;
    line-height: 1.5;
    -webkit-appearance: none; /* Remove iOS default styling */
    appearance: none;
  }
  
  /* Textarea specific styling */
  .woocommerce form .form-row textarea,
  .woocommerce-checkout textarea {
    min-height: 100px !important;
    resize: vertical;
  }
  
  /* Select dropdowns - native controls - Requirement 6.4 */
  .woocommerce form .form-row select,
  .woocommerce-checkout select {
    min-height: 44px !important;
    padding: 12px !important;
    font-size: 16px !important; /* Prevent iOS zoom */
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    background-color: white;
    /* Use native mobile select controls */
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    appearance: menulist !important;
    background-image: none; /* Remove custom dropdown arrow */
  }
  
  /* Focus states for better UX */
  .woocommerce form .form-row input:focus,
  .woocommerce form .form-row textarea:focus,
  .woocommerce form .form-row select:focus,
  .woocommerce-checkout input:focus,
  .woocommerce-checkout textarea:focus,
  .woocommerce-checkout select:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
    border-color: #0073aa;
  }
  
  /* Input field containers */
  .woocommerce form .form-row .input-text,
  .woocommerce form .form-row .select2-container {
    width: 100% !important;
  }
  
  /* Remove Select2 custom styling on mobile - use native */
  .woocommerce-checkout .select2-container {
    display: none !important;
  }
  
  .woocommerce-checkout select {
    display: block !important;
  }
}

/* ================================ 6.3 Position Order Review Section ================================ */
/* Requirement 3.3 - Place order review below form fields with clear separation */

@media (max-width: 767px) {
  /* Order review section positioning */
  #order_review_heading,
  #order_review {
    width: 100%;
    clear: both;
    margin-top: 30px !important; /* Clear separation - minimum 20px, using 30px for better spacing */
    padding-top: 20px;
    border-top: 2px solid #e0e0e0; /* Visual separation */
  }
  
  /* Ensure order review comes after form fields */
  .woocommerce form.checkout {
    display: flex;
    flex-direction: column;
  }
  
  .woocommerce form.checkout #order_review_heading {
    order: 10; /* Place after form fields */
  }
  
  .woocommerce form.checkout #order_review {
    order: 11; /* Place after heading */
  }
  
  /* Order review heading */
  #order_review_heading {
    font-size: 1.5rem;
    margin-bottom: 15px;
    font-weight: 600;
  }
  
  /* Order review table */
  .woocommerce-checkout-review-order {
    width: 100%;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-sizing: border-box;
  }
  
  /* Order review table styling */
  .woocommerce-checkout-review-order-table {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .woocommerce-checkout-review-order-table th,
  .woocommerce-checkout-review-order-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
  }
  
  /* Order total */
  .order-total {
    font-size: 1.25rem;
    font-weight: bold;
  }
}

/* ================================ 6.4 Style Payment Method Options ================================ */
/* Requirement 3.4 - Minimum 44px height for radio containers, adequate spacing, easily tappable labels */

@media (max-width: 767px) {
  /* Payment methods container */
  .woocommerce-checkout #payment,
  .woocommerce-checkout #payment ul.payment_methods {
    width: 100%;
    margin: 20px 0;
    padding: 0;
    list-style: none;
  }
  
  /* Individual payment method */
  .woocommerce-checkout #payment ul.payment_methods li {
    width: 100%;
    margin: 0 0 12px 0 !important; /* Adequate spacing between options */
    padding: 0;
    list-style: none;
  }
  
  /* Payment method label container - Requirement 3.4 */
  .woocommerce-checkout #payment ul.payment_methods li label {
    display: flex !important;
    align-items: center;
    min-height: 44px !important; /* Touch target minimum */
    padding: 12px 15px !important;
    background: #f9f9f9;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
  }
  
  /* Radio button styling */
  .woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    min-height: 24px;
    margin: 0 12px 0 0 !important;
    flex-shrink: 0;
    cursor: pointer;
  }
  
  /* Make entire label tappable */
  .woocommerce-checkout #payment ul.payment_methods li label {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }
  
  /* Active/selected state */
  .woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:checked + label,
  .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input:checked ~ label {
    background: #e8f4f8;
    border-color: #0073aa;
    font-weight: 600;
  }
  
  /* Hover/focus states for better feedback */
  .woocommerce-checkout #payment ul.payment_methods li label:hover {
    background: #f0f0f0;
    border-color: #999;
  }
  
  .woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:focus + label {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
  }
  
  /* Payment method description */
  .woocommerce-checkout #payment div.payment_box {
    width: 100%;
    margin: 10px 0 0 0;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
  }
  
  /* Payment method images */
  .woocommerce-checkout #payment ul.payment_methods li img {
    max-height: 24px;
    width: auto;
    margin-left: 8px;
    vertical-align: middle;
  }
}

/* ================================ 6.5 Style "Place Order" Button ================================ */
/* Requirement 3.5 - Full-width on mobile, minimum 48px height, prominent styling */

@media (max-width: 767px) {
  /* Place Order button */
  .woocommerce-checkout #payment #place_order,
  .woocommerce-checkout .place-order button,
  .woocommerce-checkout button#place_order {
    width: 100% !important; /* Full-width - Requirement 3.5 */
    min-height: 48px !important; /* Optimal touch target */
    padding: 15px 20px !important;
    font-size: 18px !important; /* Prominent text */
    font-weight: 600 !important;
    background-color: #0073aa !important; /* Prominent color */
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    margin-top: 20px !important;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
  }
  
  /* Hover/active states for touch feedback */
  .woocommerce-checkout #payment #place_order:hover,
  .woocommerce-checkout button#place_order:hover {
    background-color: #005a87 !important;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
  }
  
  .woocommerce-checkout #payment #place_order:active,
  .woocommerce-checkout button#place_order:active {
    background-color: #004a6f !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
  }
  
  /* Focus state for accessibility */
  .woocommerce-checkout #payment #place_order:focus,
  .woocommerce-checkout button#place_order:focus {
    outline: 3px solid #ffa500;
    outline-offset: 2px;
  }
  
  /* Disabled state */
  .woocommerce-checkout #payment #place_order:disabled,
  .woocommerce-checkout button#place_order:disabled {
    background-color: #ccc !important;
    cursor: not-allowed;
    opacity: 0.6;
  }
  
  /* Place order container */
  .woocommerce-checkout .place-order {
    width: 100%;
    padding: 0;
    margin: 20px 0 0 0;
  }
  
  /* Terms and conditions checkbox */
  .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 20px;
  }
  
  .woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text {
    font-size: 14px;
    line-height: 1.6;
  }
  
  .woocommerce-checkout input#terms {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
  }
}

/* ================================ 6.6 Form Validation Error Styling ================================ */
/* Requirement 3.6 - Position errors adjacent to fields, clear visual styling, visible and readable */

@media (max-width: 767px) {
  /* Error messages */
  .woocommerce .woocommerce-error,
  .woocommerce .woocommerce-message,
  .woocommerce .woocommerce-info,
  .woocommerce-checkout .woocommerce-error,
  .woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error {
    width: 100%;
    padding: 15px;
    margin: 0 0 20px 0 !important;
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    box-sizing: border-box;
  }
  
  /* Error state */
  .woocommerce .woocommerce-error,
  .woocommerce-checkout .woocommerce-error {
    background: #f8d7da !important;
    border-color: #dc3545 !important;
    color: #721c24 !important;
  }
  
  /* Success state */
  .woocommerce .woocommerce-message {
    background: #d4edda !important;
    border-color: #28a745 !important;
    color: #155724 !important;
  }
  
  /* Info state */
  .woocommerce .woocommerce-info {
    background: #d1ecf1 !important;
    border-color: #17a2b8 !important;
    color: #0c5460 !important;
  }
  
  /* Field-level validation errors - adjacent to fields */
  .woocommerce form .form-row.woocommerce-invalid label {
    color: #dc3545 !important;
  }
  
  .woocommerce form .form-row.woocommerce-invalid input,
  .woocommerce form .form-row.woocommerce-invalid select,
  .woocommerce form .form-row.woocommerce-invalid textarea {
    border-color: #dc3545 !important;
    background: #fff5f5 !important;
  }
  
  /* Inline error message below field */
  .woocommerce form .form-row.woocommerce-invalid .woocommerce-error,
  .woocommerce form .form-row.woocommerce-invalid-required-field .woocommerce-error {
    display: block;
    margin: 5px 0 0 0 !important; /* Adjacent to field - Requirement 3.6 */
    padding: 8px 12px;
    background: #f8d7da;
    border: 1px solid #dc3545;
    border-radius: 4px;
    font-size: 13px;
    color: #721c24;
    line-height: 1.4;
  }
  
  /* Error icon */
  .woocommerce .woocommerce-error::before,
  .woocommerce-checkout .woocommerce-error::before {
    content: "⚠ ";
    font-size: 16px;
    margin-right: 5px;
  }
  
  /* Error list styling */
  .woocommerce .woocommerce-error li,
  .woocommerce-checkout .woocommerce-error li {
    margin: 5px 0;
    list-style: none;
  }
  
  /* Ensure errors are visible and readable */
  .woocommerce-checkout .woocommerce-NoticeGroup {
    margin-bottom: 20px;
  }
  
  /* Scroll to error on validation failure */
  .woocommerce form .form-row.woocommerce-invalid {
    scroll-margin-top: 100px; /* Account for sticky header */
  }
}

/* ================================ Additional Checkout Mobile Enhancements ================================ */

@media (max-width: 767px) {
  /* Checkout page title */
  .woocommerce-checkout h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    font-weight: 600;
  }
  
  /* Coupon form */
  .woocommerce-form-coupon-toggle,
  .checkout_coupon {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .woocommerce-form-coupon {
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
  }
  
  .woocommerce-form-coupon input[type="text"] {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .woocommerce-form-coupon button {
    width: 100%;
    min-height: 44px;
  }
  
  /* Login form on checkout */
  .woocommerce-form-login {
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 20px;
  }
  
  .woocommerce-form-login input[type="text"],
  .woocommerce-form-login input[type="password"] {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .woocommerce-form-login button {
    width: 100%;
    min-height: 44px;
  }
  
  /* Checkbox styling */
  .woocommerce-checkout input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
  }
  
  /* Ship to different address toggle */
  .woocommerce-checkout .woocommerce-shipping-fields h3 label {
    display: flex;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
  }
  
  .woocommerce-checkout .woocommerce-shipping-fields h3 input[type="checkbox"] {
    margin-right: 10px;
  }
  
  /* Additional information section */
  .woocommerce-additional-fields {
    width: 100%;
    margin-top: 20px;
  }
  
  .woocommerce-additional-fields textarea {
    width: 100%;
    min-height: 100px;
  }
  
  /* Privacy policy */
  .woocommerce-privacy-policy-text {
    font-size: 13px;
    line-height: 1.6;
    margin: 15px 0;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 4px;
  }
  
  /* Loading overlay */
  .woocommerce-checkout .blockUI.blockOverlay {
    background: rgba(255, 255, 255, 0.9) !important;
  }
  
  /* Ensure all checkout elements are touch-friendly */
  .woocommerce-checkout a,
  .woocommerce-checkout button,
  .woocommerce-checkout input[type="submit"],
  .woocommerce-checkout input[type="button"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
  }
}

/* Tablet adjustments for checkout */
@media (min-width: 768px) and (max-width: 1024px) {
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 {
    width: 100%;
    float: none;
  }
  
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row select,
  .woocommerce form .form-row textarea {
    font-size: 16px;
    min-height: 44px;
    padding: 12px;
  }
}


/* ================================ MOBILE NAVIGATION MENU - Task 7.2 ================================ */
/* Requirements 4.1, 4.2 - Slide-in animation, minimum 44px height, adequate spacing, submenu expansion */

/* ================================ 7.2 Mobile Menu Base Styles ================================ */

/* Menu toggle button styling */
#menu-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 100001; /* Above menu overlay */
  width: 48px;
  height: 48px; /* Optimal touch target */
  background-color: #333;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 24px;
  cursor: pointer;
  display: none; /* Hidden by default, shown on mobile */
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  touch-action: manipulation; /* Prevent double-tap zoom */
}

#menu-toggle:hover {
  background-color: #444;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#menu-toggle:active {
  transform: scale(0.95);
  background-color: #222;
}

#menu-toggle:focus {
  outline: 3px solid #ffa500;
  outline-offset: 2px;
}

/* Hamburger icon animation */
#menu-toggle.active {
  background-color: #0073aa;
}

/* Show menu toggle on mobile */
@media (max-width: 767px) {
  #menu-toggle {
    display: flex;
  }
}

/* Hide on desktop */
@media (min-width: 768px) {
  #menu-toggle {
    display: none !important;
  }
}

/* ================================ Mobile Menu Container ================================ */

#slide-menu {
  position: fixed;
  top: 0;
  left: -100%; /* Hidden off-screen initially */
  width: 280px;
  max-width: 85vw; /* Responsive width */
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile browsers */
  background-color: #ffffff;
  z-index: 100000;
  overflow-y: auto;
  overflow-x: hidden;
  transition: left 0.3s ease-in-out; /* Slide-in animation - Requirement 4.2 */
  box-shadow: none;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Menu open state - slide in from left */
#slide-menu.open {
  left: 0;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);
}

/* Menu overlay when open */
body.menu-open::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

body.menu-open::before {
  opacity: 1;
  visibility: visible;
}

/* ================================ Menu Items Styling ================================ */

/* Menu navigation container */
#slide-menu nav {
  padding: 80px 0 20px 0; /* Top padding for close button area */
}

/* Menu list */
#slide-menu .menu,
#slide-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Menu items - Requirement 4.1: minimum 44px height */
#slide-menu .menu-item {
  position: relative;
  border-bottom: 1px solid #e0e0e0;
}

#slide-menu .menu-item:last-child {
  border-bottom: none;
}

/* Menu item links - Requirement 4.1: minimum 44px height, adequate spacing */
#slide-menu .menu-item > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px; /* Touch target minimum - Requirement 4.1 */
  padding: 12px 20px; /* Adequate spacing */
  color: #333;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
}

/* Hover/active states for touch feedback */
#slide-menu .menu-item > a:hover {
  background-color: #f5f5f5;
  color: #0073aa;
}

#slide-menu .menu-item > a:active {
  background-color: #e8f4f8;
  transform: scale(0.98);
}

#slide-menu .menu-item > a:focus {
  outline: 2px solid #0073aa;
  outline-offset: -2px;
  background-color: #f5f5f5;
}

/* Current menu item */
#slide-menu .menu-item.current-menu-item > a,
#slide-menu .menu-item.current_page_item > a {
  color: #0073aa;
  font-weight: 600;
  background-color: #e8f4f8;
}

/* ================================ Submenu Styling - Requirement 4.2 ================================ */

/* Submenu indicator (arrow) */
#slide-menu .menu-item-has-children > a .submenu-indicator {
  margin-left: auto;
  padding-left: 10px;
  font-size: 12px;
  transition: transform 0.3s ease;
  color: #666;
}

/* Rotate arrow when submenu is open */
#slide-menu .menu-item-has-children.active > a .submenu-indicator {
  transform: rotate(180deg);
  color: #0073aa;
}

/* Submenu container */
#slide-menu .sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0; /* Hidden by default */
  overflow: hidden;
  transition: max-height 0.3s ease-in-out; /* Smooth expansion animation */
  background-color: #f9f9f9;
}

/* Submenu items */
#slide-menu .sub-menu .menu-item {
  border-bottom: 1px solid #e8e8e8;
}

#slide-menu .sub-menu .menu-item:last-child {
  border-bottom: none;
}

/* Submenu links - indented and slightly smaller */
#slide-menu .sub-menu .menu-item > a {
  min-height: 44px; /* Maintain touch target */
  padding: 10px 20px 10px 40px; /* Indented for hierarchy */
  font-size: 15px;
  font-weight: 400;
  color: #555;
}

#slide-menu .sub-menu .menu-item > a:hover {
  background-color: #efefef;
  color: #0073aa;
  padding-left: 45px; /* Slight indent on hover */
}

#slide-menu .sub-menu .menu-item > a:active {
  background-color: #e0e0e0;
}

/* Current submenu item */
#slide-menu .sub-menu .menu-item.current-menu-item > a,
#slide-menu .sub-menu .menu-item.current_page_item > a {
  color: #0073aa;
  font-weight: 600;
  background-color: #e8f4f8;
}

/* Nested submenus (third level) */
#slide-menu .sub-menu .sub-menu .menu-item > a {
  padding-left: 60px; /* Further indented */
  font-size: 14px;
}

#slide-menu .sub-menu .sub-menu .menu-item > a:hover {
  padding-left: 65px;
}

/* ================================ Menu Header/Footer ================================ */

/* Menu header (optional - for logo or title) */
#slide-menu .menu-header {
  padding: 20px;
  background-color: #f5f5f5;
  border-bottom: 2px solid #e0e0e0;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* Menu footer (optional - for additional links) */
#slide-menu .menu-footer {
  padding: 20px;
  background-color: #f5f5f5;
  border-top: 2px solid #e0e0e0;
  text-align: center;
  margin-top: auto;
}

/* ================================ Scrollbar Styling ================================ */

/* Custom scrollbar for menu */
#slide-menu::-webkit-scrollbar {
  width: 6px;
}

#slide-menu::-webkit-scrollbar-track {
  background: #f1f1f1;
}

#slide-menu::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

#slide-menu::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* ================================ Body Scroll Lock - Requirement 4.3 ================================ */

/* Prevent body scroll when menu is open */
body.menu-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* ================================ Responsive Adjustments ================================ */

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
  #slide-menu {
    width: 320px;
  }
}

/* Very small screens */
@media (max-width: 360px) {
  #slide-menu {
    width: 260px;
  }
  
  #slide-menu .menu-item > a {
    padding: 10px 15px;
    font-size: 15px;
  }
  
  #slide-menu .sub-menu .menu-item > a {
    padding: 8px 15px 8px 35px;
    font-size: 14px;
  }
}

/* Landscape orientation on mobile */
@media (max-width: 767px) and (orientation: landscape) {
  #slide-menu {
    width: 260px;
  }
  
  #slide-menu nav {
    padding-top: 60px;
  }
  
  #slide-menu .menu-item > a {
    min-height: 40px;
    padding: 8px 15px;
  }
  
  #slide-menu .sub-menu .menu-item > a {
    min-height: 40px;
    padding: 6px 15px 6px 35px;
  }
}

/* ================================ Accessibility Enhancements ================================ */

/* Focus visible for keyboard navigation */
#slide-menu .menu-item > a:focus-visible {
  outline: 3px solid #0073aa;
  outline-offset: -3px;
  background-color: #e8f4f8;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  #slide-menu,
  #slide-menu .sub-menu,
  #slide-menu .menu-item > a,
  #menu-toggle,
  body.menu-open::before {
    transition: none !important;
  }
  
  #slide-menu .menu-item-has-children > a .submenu-indicator {
    transition: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  #slide-menu {
    border-right: 2px solid #000;
  }
  
  #slide-menu .menu-item {
    border-bottom: 2px solid #000;
  }
  
  #slide-menu .menu-item > a {
    border: 1px solid transparent;
  }
  
  #slide-menu .menu-item > a:focus {
    border-color: #000;
  }
}

/* ================================ Touch Feedback Enhancements ================================ */

/* Add ripple effect on touch (optional enhancement) */
@media (hover: none) and (pointer: coarse) {
  #slide-menu .menu-item > a {
    position: relative;
    overflow: hidden;
  }
  
  #slide-menu .menu-item > a::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(0, 115, 170, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
  }
  
  #slide-menu .menu-item > a:active::after {
    width: 300px;
    height: 300px;
  }
}

/* ================================ Menu Icons Support (Optional) ================================ */

/* If menu items have icons */
#slide-menu .menu-item > a .menu-icon {
  margin-right: 12px;
  font-size: 18px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ================================ Menu Badge Support (Optional) ================================ */

/* For notification badges on menu items */
#slide-menu .menu-item > a .menu-badge {
  margin-left: auto;
  padding: 2px 8px;
  background-color: #dc3545;
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  min-width: 20px;
  text-align: center;
}

/* ================================ Animation Classes ================================ */

/* Fade in animation for menu */
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Apply animation when menu opens */
#slide-menu.open {
  animation: slideInLeft 0.3s ease-out;
}

/* ================================ Print Styles ================================ */

/* Hide mobile menu in print */
@media print {
  #menu-toggle,
  #slide-menu {
    display: none !important;
  }
}


/* ================================ STICKY HEADER FOR MOBILE - Task 7.3 ================================ */
/* Requirements 4.5, 4.6 - Position sticky/fixed, maximum 60px height, stays visible on scroll */

/* ================================ 7.3 Sticky Header Implementation ================================ */

/* Base sticky header styles */
.sticky-container {
  position: fixed; /* Fixed positioning for mobile - Requirement 4.6 */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background-color: #ffffff;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Mobile-specific sticky header styles */
@media (max-width: 767px) {
  .sticky-container {
    max-height: 60px; /* Maximum height limit - Requirement 4.5 */
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
  }
  
  /* Navbar within sticky container */
  .sticky-container .navbar {
    height: 100%;
    max-height: 60px;
    padding: 0;
    margin: 0;
  }
  
  /* Container within navbar */
  .sticky-container .navbar .container {
    height: 100%;
    max-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
  }
  
  /* Logo container in sticky header */
  .sticky-container .logo-container {
    height: 100%;
    max-height: 50px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  
  /* Navbar toggler (hamburger) in sticky header */
  .sticky-container .navbar-toggler {
    height: 40px;
    width: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    flex-shrink: 0;
  }
  
  /* Navbar toggler icon */
  .sticky-container .navbar-toggler-icon {
    width: 24px;
    height: 20px;
  }
  
  /* Collapsed navbar menu */
  .sticky-container .navbar-collapse {
    position: fixed;
    top: 60px; /* Below sticky header */
    left: 0;
    right: 0;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 15px;
    z-index: 999;
  }
  
  /* Navbar nav items in mobile */
  .sticky-container .navbar-nav {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
  
  .sticky-container .navbar-nav .nav-item {
    width: 100%;
    border-bottom: 1px solid #e0e0e0;
  }
  
  .sticky-container .navbar-nav .nav-item:last-child {
    border-bottom: none;
  }
  
  .sticky-container .navbar-nav .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 12px 15px;
    color: #333;
    font-size: 16px;
  }
  
  /* Ensure sticky header stays visible on scroll - Requirement 4.6 */
  .sticky-container.sticky {
    position: fixed;
    top: 0;
  }
  
  /* Add shadow when scrolled */
  .sticky-container.scrolled {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }
  
  /* Prevent content from being hidden under sticky header */
  body {
    padding-top: 60px; /* Match sticky header height */
  }
  
  /* Adjust for admin bar if present */
  body.admin-bar {
    padding-top: 106px; /* 60px header + 46px admin bar */
  }
  
  body.admin-bar .sticky-container {
    top: 46px; /* Below admin bar */
  }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
  .sticky-container {
    max-height: 70px;
    height: 70px;
  }
  
  .sticky-container .navbar {
    max-height: 70px;
  }
  
  .sticky-container .navbar .container {
    max-height: 70px;
  }
  
  body {
    padding-top: 70px;
  }
  
  body.admin-bar {
    padding-top: 116px; /* 70px header + 46px admin bar */
  }
}

/* Desktop - allow taller header */
@media (min-width: 1025px) {
  .sticky-container {
    max-height: none; /* No height restriction on desktop */
    height: auto;
  }
  
  body {
    padding-top: 0; /* No padding needed on desktop */
  }
}

/* ================================ Sticky Header Enhancements ================================ */

/* Smooth scroll behavior when navigating to anchors */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px; /* Account for sticky header */
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: 60px;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  .sticky-container {
    transition: none;
  }
}

/* ================================ Sticky Header States ================================ */

/* Header when menu is open */
body.menu-open .sticky-container {
  z-index: 99998; /* Below menu overlay but above content */
}

/* Header in different page contexts */
.home .sticky-container {
  /* Home page specific styles if needed */
}

.single .sticky-container,
.page .sticky-container {
  /* Single post/page specific styles if needed */
}

.woocommerce .sticky-container,
.woocommerce-page .sticky-container {
  /* WooCommerce page specific styles if needed */
}

/* ================================ Sticky Header Accessibility ================================ */

/* Skip to content link for keyboard users */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 0;
  background: #0073aa;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  z-index: 100001;
  transition: top 0.3s ease;
}

.skip-to-content:focus {
  top: 0;
  outline: 3px solid #ffa500;
  outline-offset: 2px;
}

/* Focus trap for sticky header navigation */
.sticky-container:focus-within {
  outline: 2px solid #0073aa;
  outline-offset: -2px;
}

/* ================================ Sticky Header Performance ================================ */

/* Use transform for better performance */
.sticky-container {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Optimize repaints */
.sticky-container * {
  will-change: auto;
}

/* ================================ Sticky Header Print Styles ================================ */

@media print {
  .sticky-container {
    position: static !important;
    box-shadow: none !important;
  }
  
  body {
    padding-top: 0 !important;
  }
}

/* ================================ Sticky Header Landscape Orientation ================================ */

@media (max-width: 767px) and (orientation: landscape) {
  .sticky-container {
    max-height: 50px;
    height: 50px;
  }
  
  .sticky-container .navbar {
    max-height: 50px;
  }
  
  .sticky-container .navbar .container {
    max-height: 50px;
  }
  
  .sticky-container .logo-container {
    max-height: 40px;
  }
  
  .sticky-container .navbar-toggler {
    height: 36px;
    width: 36px;
  }
  
  body {
    padding-top: 50px;
  }
  
  html {
    scroll-padding-top: 50px;
  }
}

/* ================================ Sticky Header with Transparent Background ================================ */

/* For pages with hero sections that want transparent header initially */
.has-transparent-header .sticky-container {
  background-color: transparent;
  box-shadow: none;
}

.has-transparent-header .sticky-container.scrolled {
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ================================ Sticky Header Animation ================================ */

/* Slide down animation when header appears */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.sticky-container.animate-in {
  animation: slideDown 0.3s ease-out;
}

/* ================================ Sticky Header Z-Index Management ================================ */

/* Ensure proper stacking context */
.sticky-container {
  z-index: var(--z-header, 1000);
}

#slide-menu {
  z-index: var(--z-menu, 9999);
}

#menu-toggle {
  z-index: calc(var(--z-menu, 9999) + 2);
}

body.menu-open::before {
  z-index: calc(var(--z-menu, 9999) - 1);
}


/* ================================ LOGO SCALING FOR MOBILE HEADER - Task 7.4 ================================ */
/* Requirement 4.7 - Maximum logo width 120px, proportional scaling */

/* ================================ 7.4 Logo Scaling Implementation ================================ */

/* Base logo styles */
.custom-logo-link,
.logo-container a {
  display: inline-block;
  line-height: 0;
  transition: opacity 0.3s ease;
}

.custom-logo,
.custom-logo-link img,
.logo-container img {
  height: auto;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain; /* Maintain aspect ratio */
}

/* Mobile logo scaling - Requirement 4.7 */
@media (max-width: 767px) {
  .custom-logo,
  .custom-logo-link img,
  .logo-container img,
  .sticky-container .custom-logo,
  .sticky-container .custom-logo-link img,
  .sticky-container .logo-container img {
    max-width: 120px !important; /* Maximum width - Requirement 4.7 */
    max-height: 50px; /* Maintain proportions within header height */
    width: auto;
    height: auto;
    object-fit: contain; /* Ensure proportional scaling */
  }
  
  /* Logo container sizing */
  .logo-container,
  .custom-logo-link {
    max-width: 120px;
    max-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Sticky header logo */
  .sticky-container .logo-container,
  .sticky-container .custom-logo-link {
    max-width: 120px;
    max-height: 50px;
  }
  
  /* Ensure logo doesn't overflow */
  .sticky-container .navbar .logo-container,
  .sticky-container .navbar .custom-logo-link {
    overflow: hidden;
  }
}

/* Very small screens - further reduce logo size */
@media (max-width: 360px) {
  .custom-logo,
  .custom-logo-link img,
  .logo-container img,
  .sticky-container .custom-logo,
  .sticky-container .custom-logo-link img,
  .sticky-container .logo-container img {
    max-width: 100px !important;
    max-height: 40px;
  }
  
  .logo-container,
  .custom-logo-link {
    max-width: 100px;
    max-height: 40px;
  }
}

/* Landscape orientation on mobile - reduce logo height */
@media (max-width: 767px) and (orientation: landscape) {
  .custom-logo,
  .custom-logo-link img,
  .logo-container img,
  .sticky-container .custom-logo,
  .sticky-container .custom-logo-link img,
  .sticky-container .logo-container img {
    max-width: 100px !important;
    max-height: 35px;
  }
  
  .logo-container,
  .custom-logo-link {
    max-width: 100px;
    max-height: 35px;
  }
}

/* Tablet logo scaling */
@media (min-width: 768px) and (max-width: 1024px) {
  .custom-logo,
  .custom-logo-link img,
  .logo-container img,
  .sticky-container .custom-logo,
  .sticky-container .custom-logo-link img,
  .sticky-container .logo-container img {
    max-width: 150px;
    max-height: 60px;
  }
  
  .logo-container,
  .custom-logo-link {
    max-width: 150px;
    max-height: 60px;
  }
}

/* Desktop logo - no restrictions */
@media (min-width: 1025px) {
  .custom-logo,
  .custom-logo-link img,
  .logo-container img {
    max-width: 200px;
    max-height: 80px;
  }
  
  .logo-container,
  .custom-logo-link {
    max-width: 200px;
    max-height: 80px;
  }
}

/* ================================ Logo Visibility States ================================ */

/* Logo hidden state (for home page before scroll) */
.logo-container.logo-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Logo visible state */
.logo-container:not(.logo-hidden),
.sticky-container.scrolled .logo-container {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Home page logo behavior */
body.home .sticky-container .logo-container {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

body.home .sticky-container.scrolled .logo-container {
  opacity: 1;
  visibility: visible;
}

/* Subpages - logo always visible */
body:not(.home) .sticky-container .logo-container {
  opacity: 1;
  visibility: visible;
}

/* ================================ Logo Loading States ================================ */

/* Logo loading placeholder */
.custom-logo-link::before {
  content: '';
  display: inline-block;
  width: 120px;
  height: 50px;
  background: #f0f0f0;
  border-radius: 4px;
  position: absolute;
  z-index: -1;
}

.custom-logo-link img {
  position: relative;
  z-index: 1;
}

/* Hide placeholder when logo is loaded */
.custom-logo-link img[src] ~ ::before {
  display: none;
}

/* ================================ Logo Accessibility ================================ */

/* Ensure logo link is keyboard accessible */
.custom-logo-link:focus,
.logo-container a:focus {
  outline: 3px solid #0073aa;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Logo alt text styling (if image fails to load) */
.custom-logo-link img[alt] {
  font-size: 14px;
  color: #333;
  text-align: center;
  padding: 10px;
}

/* ================================ Logo Retina Display Support ================================ */

/* Ensure crisp logo on high-DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .custom-logo,
  .custom-logo-link img,
  .logo-container img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ================================ Logo Animation ================================ */

/* Fade in animation for logo */
@keyframes logoFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.sticky-container.scrolled .logo-container {
  animation: logoFadeIn 0.3s ease-out;
}

/* Disable animation for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .sticky-container.scrolled .logo-container {
    animation: none;
  }
}

/* ================================ Logo Print Styles ================================ */

@media print {
  .custom-logo,
  .custom-logo-link img,
  .logo-container img {
    max-width: 150px !important;
    max-height: 60px !important;
  }
}

/* ================================ Logo Fallback Styles ================================ */

/* If logo image fails to load, show site title */
.custom-logo-link:empty::after {
  content: attr(title);
  font-size: 18px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  display: inline-block;
}

@media (max-width: 767px) {
  .custom-logo-link:empty::after {
    font-size: 16px;
    max-width: 100px;
  }
}

/* ================================ Logo Hover Effects ================================ */

/* Subtle hover effect for logo */
.custom-logo-link:hover img,
.logo-container a:hover img {
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.custom-logo-link:active img,
.logo-container a:active img {
  opacity: 0.7;
  transform: scale(0.98);
}

/* Disable hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
  .custom-logo-link:hover img,
  .logo-container a:hover img {
    opacity: 1;
  }
}

/* ================================ Logo Aspect Ratio Preservation ================================ */

/* Ensure logo maintains aspect ratio in all scenarios */
.custom-logo,
.custom-logo-link img,
.logo-container img {
  aspect-ratio: attr(width) / attr(height);
  object-fit: contain;
}

/* Fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .custom-logo,
  .custom-logo-link img,
  .logo-container img {
    width: auto;
    height: auto;
  }
}

/* ================================ Logo Container Flexbox Alignment ================================ */

/* Ensure logo is properly centered in container */
.logo-container,
.custom-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ================================ Logo SVG Support ================================ */

/* Specific styles for SVG logos */
.custom-logo-link svg,
.logo-container svg {
  max-width: 120px;
  max-height: 50px;
  width: auto;
  height: auto;
}

@media (max-width: 767px) {
  .custom-logo-link svg,
  .logo-container svg {
    max-width: 120px !important;
    max-height: 50px;
  }
}

/* Ensure SVG fills container properly */
.custom-logo-link svg,
.logo-container svg {
  display: block;
  fill: currentColor;
}

/* ================================ Logo Dark Mode Support (Optional) ================================ */

/* If site supports dark mode */
@media (prefers-color-scheme: dark) {
  .custom-logo-link img,
  .logo-container img {
    filter: brightness(0.9);
  }
  
  .custom-logo-link:empty::after {
    color: #ffffff;
  }
}

/* ================================ Logo Performance Optimization ================================ */

/* Optimize logo rendering */
.custom-logo,
.custom-logo-link img,
.logo-container img {
  will-change: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Lazy load logo if below fold */
.custom-logo[loading="lazy"],
.custom-logo-link img[loading="lazy"],
.logo-container img[loading="lazy"] {
  content-visibility: auto;
}

/* ================================================================================================ */
/* ================================ TASK 8: FORM AND INPUT MOBILE ENHANCEMENTS ==================== */
/* ================================================================================================ */

/* ================================ 8.1 Style All Form Inputs for Mobile ================================ */
/* Requirements 6.1, 6.2 - Minimum 44px height, labels above inputs, adequate spacing and padding */

@media (max-width: 767px) {
  /* Universal form input styling - applies to ALL forms, not just WooCommerce */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  textarea,
  select {
    min-height: 44px !important; /* Touch target minimum - Requirement 6.1 */
    padding: 12px !important; /* Adequate padding */
    font-size: 16px !important; /* Prevent iOS zoom - Requirement 6.1 */
    line-height: 1.5;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    width: 100%;
    background-color: #fff;
    -webkit-appearance: none; /* Remove iOS default styling */
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  
  /* Labels above inputs - Requirement 6.2 */
  label {
    display: block !important;
    width: 100% !important;
    margin-bottom: 8px !important;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    float: none !important;
  }
  
  /* Form field containers */
  .form-group,
  .form-field,
  .field-wrapper,
  p.form-row,
  .wpforms-field {
    width: 100% !important;
    margin-bottom: 15px !important;
    float: none !important;
  }
  
  /* Focus states for better UX */
  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="tel"]:focus,
  input[type="number"]:focus,
  input[type="password"]:focus,
  input[type="url"]:focus,
  input[type="search"]:focus,
  input[type="date"]:focus,
  input[type="time"]:focus,
  input[type="datetime-local"]:focus,
  input[type="month"]:focus,
  input[type="week"]:focus,
  textarea:focus,
  select:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
  }
  
  /* Disabled state */
  input:disabled,
  textarea:disabled,
  select:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.6;
  }
  
  /* Error state */
  input.error,
  textarea.error,
  select.error,
  input:invalid,
  textarea:invalid,
  select:invalid {
    border-color: #d63638;
  }
  
  input.error:focus,
  textarea.error:focus,
  select.error:focus {
    outline-color: #d63638;
    box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.1);
  }
  
  /* Success state */
  input.success,
  textarea.success,
  select.success,
  input:valid {
    border-color: #00a32a;
  }
  
  /* Placeholder styling */
  input::placeholder,
  textarea::placeholder {
    color: #757575;
    opacity: 1;
  }
  
  /* Remove spinner from number inputs on mobile */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  input[type="number"] {
    -moz-appearance: textfield;
  }
  
  /* Search input specific styling */
  input[type="search"] {
    -webkit-appearance: none;
    border-radius: 20px;
  }
  
  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>') no-repeat center;
    background-size: 20px 20px;
    cursor: pointer;
  }
  
  /* Select dropdown styling - native controls */
  select {
    /* Use native mobile select controls - Requirement 6.4 */
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    appearance: menulist !important;
    background-image: none; /* Remove custom dropdown arrow */
    padding-right: 30px !important; /* Space for native arrow */
  }
  
  /* Multiple select */
  select[multiple] {
    min-height: 120px !important;
    padding: 8px !important;
  }
  
  /* File input */
  input[type="file"] {
    padding: 8px !important;
    border: 2px dashed #ddd;
    background-color: #f9f9f9;
    cursor: pointer;
  }
  
  input[type="file"]:focus {
    border-color: #0073aa;
    background-color: #f0f8ff;
  }
  
  /* Color input */
  input[type="color"] {
    min-height: 44px !important;
    padding: 4px !important;
    border: 1px solid #ddd;
    cursor: pointer;
  }
  
  /* Range input */
  input[type="range"] {
    min-height: 44px !important;
    padding: 0 !important;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
  }
  
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: #0073aa;
    cursor: pointer;
    border-radius: 50%;
  }
  
  input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: #0073aa;
    cursor: pointer;
    border-radius: 50%;
    border: none;
  }
  
  input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: #ddd;
    border-radius: 4px;
  }
  
  input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    background: #ddd;
    border-radius: 4px;
  }
  
  /* Fieldset and legend */
  fieldset {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
  }
  
  legend {
    font-weight: 600;
    font-size: 16px;
    padding: 0 10px;
    color: #333;
  }
  
  /* Form validation messages */
  .error-message,
  .validation-error,
  .field-error,
  span.error {
    display: block;
    color: #d63638;
    font-size: 14px;
    margin-top: 5px;
    font-weight: 500;
  }
  
  .success-message,
  .validation-success,
  span.success {
    display: block;
    color: #00a32a;
    font-size: 14px;
    margin-top: 5px;
    font-weight: 500;
  }
  
  /* Help text */
  .help-text,
  .field-description,
  small.description {
    display: block;
    color: #757575;
    font-size: 13px;
    margin-top: 5px;
    line-height: 1.4;
  }
  
  /* Required field indicator */
  .required,
  abbr[title="required"],
  span.required {
    color: #d63638;
    font-weight: bold;
    text-decoration: none;
  }
  
  /* Input groups (input with button/icon) */
  .input-group {
    display: flex;
    width: 100%;
    margin-bottom: 15px;
  }
  
  .input-group input {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0 !important;
  }
  
  .input-group button,
  .input-group .button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-bottom: 0 !important;
  }
  
  /* Inline form fields (rare on mobile, but handle gracefully) */
  .form-inline {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .form-inline .form-group,
  .form-inline .form-field {
    width: 100% !important;
  }
}

/* ================================ 8.2 Style Radio Buttons and Checkboxes ================================ */
/* Requirement 6.5 - Minimum 44x44px touch targets, adequate spacing, easily tappable labels */

@media (max-width: 767px) {
  /* Radio button and checkbox containers */
  .radio-wrapper,
  .checkbox-wrapper,
  .woocommerce-form__label,
  .woocommerce-form__label-for-checkbox,
  label.radio,
  label.checkbox,
  .form-check,
  .wpforms-field-radio,
  .wpforms-field-checkbox {
    display: flex;
    align-items: center;
    min-height: 44px !important; /* Touch target minimum - Requirement 6.5 */
    padding: 8px 0;
    margin-bottom: 12px !important;
    cursor: pointer;
    position: relative;
  }
  
  /* Hide default radio and checkbox */
  input[type="radio"],
  input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 44px;
    height: 44px;
    margin: 0;
    cursor: pointer;
    z-index: 1;
  }
  
  /* Custom radio button styling */
  input[type="radio"] + label,
  input[type="radio"] + span,
  label.radio,
  .radio-label {
    position: relative;
    padding-left: 50px !important; /* Space for custom radio */
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.5;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  input[type="radio"] + label::before,
  input[type="radio"] + span::before,
  label.radio::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 2px solid #666;
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.2s ease;
  }
  
  input[type="radio"] + label::after,
  input[type="radio"] + span::after,
  label.radio::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #0073aa;
    transition: transform 0.2s ease;
  }
  
  /* Checked state */
  input[type="radio"]:checked + label::before,
  input[type="radio"]:checked + span::before,
  label.radio.checked::before {
    border-color: #0073aa;
    background-color: #fff;
  }
  
  input[type="radio"]:checked + label::after,
  input[type="radio"]:checked + span::after,
  label.radio.checked::after {
    transform: translateY(-50%) scale(1);
  }
  
  /* Focus state */
  input[type="radio"]:focus + label::before,
  input[type="radio"]:focus + span::before {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
  }
  
  /* Hover state (for devices that support hover) */
  @media (hover: hover) {
    input[type="radio"]:hover + label::before,
    input[type="radio"]:hover + span::before {
      border-color: #0073aa;
    }
  }
  
  /* Custom checkbox styling */
  input[type="checkbox"] + label,
  input[type="checkbox"] + span,
  label.checkbox,
  .checkbox-label {
    position: relative;
    padding-left: 50px !important; /* Space for custom checkbox */
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.5;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  input[type="checkbox"] + label::before,
  input[type="checkbox"] + span::before,
  label.checkbox::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 2px solid #666;
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.2s ease;
  }
  
  input[type="checkbox"] + label::after,
  input[type="checkbox"] + span::after,
  label.checkbox::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg) scale(0);
    width: 8px;
    height: 14px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transition: transform 0.2s ease;
  }
  
  /* Checked state */
  input[type="checkbox"]:checked + label::before,
  input[type="checkbox"]:checked + span::before,
  label.checkbox.checked::before {
    border-color: #0073aa;
    background-color: #0073aa;
  }
  
  input[type="checkbox"]:checked + label::after,
  input[type="checkbox"]:checked + span::after,
  label.checkbox.checked::after {
    transform: translateY(-50%) rotate(45deg) scale(1);
  }
  
  /* Focus state */
  input[type="checkbox"]:focus + label::before,
  input[type="checkbox"]:focus + span::before {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
  }
  
  /* Hover state (for devices that support hover) */
  @media (hover: hover) {
    input[type="checkbox"]:hover + label::before,
    input[type="checkbox"]:hover + span::before {
      border-color: #0073aa;
    }
  }
  
  /* Disabled state */
  input[type="radio"]:disabled + label,
  input[type="radio"]:disabled + span,
  input[type="checkbox"]:disabled + label,
  input[type="checkbox"]:disabled + span {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  input[type="radio"]:disabled + label::before,
  input[type="radio"]:disabled + span::before,
  input[type="checkbox"]:disabled + label::before,
  input[type="checkbox"]:disabled + span::before {
    background-color: #f5f5f5;
    border-color: #ccc;
  }
  
  /* Radio/Checkbox groups */
  .radio-group,
  .checkbox-group,
  .wpforms-field-radio ul,
  .wpforms-field-checkbox ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .radio-group li,
  .checkbox-group li,
  .wpforms-field-radio li,
  .wpforms-field-checkbox li {
    margin-bottom: 12px;
  }
  
  /* Inline radio/checkbox groups (convert to vertical on mobile) */
  .radio-group-inline,
  .checkbox-group-inline {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  /* WooCommerce specific radio/checkbox styling */
  .woocommerce-form__label-for-checkbox {
    display: flex !important;
    align-items: center;
    min-height: 44px !important;
    padding: 8px 0;
    cursor: pointer;
  }
  
  .woocommerce-form__label-for-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 44px;
    height: 44px;
    margin: 0;
    cursor: pointer;
  }
  
  .woocommerce-form__label-for-checkbox span {
    padding-left: 50px !important;
    position: relative;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 16px;
  }
  
  /* Payment method radio buttons */
  .woocommerce-checkout .wc_payment_method {
    min-height: 44px !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
  }
  
  .woocommerce-checkout .wc_payment_method label {
    min-height: 44px !important;
    display: flex !important;
    align-items: center;
    cursor: pointer;
    padding-left: 50px !important;
    font-size: 16px;
    font-weight: 600;
  }
  
  .woocommerce-checkout .wc_payment_method input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 44px;
    height: 44px;
    margin: 0;
    cursor: pointer;
  }
  
  .woocommerce-checkout .wc_payment_method.payment_method_selected {
    background-color: #e8f4f8;
    border-color: #0073aa;
  }
  
  /* Terms and conditions checkbox */
  .woocommerce-terms-and-conditions-wrapper {
    margin: 20px 0;
  }
  
  .woocommerce-terms-and-conditions-checkbox-text {
    padding-left: 50px !important;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 16px;
  }
  
  /* Switch/Toggle styling (bonus) */
  .switch,
  .toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin-right: 10px;
  }
  
  .switch input,
  .toggle input {
    opacity: 0;
    width: 60px;
    height: 34px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
  }
  
  .switch .slider,
  .toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 34px;
  }
  
  .switch .slider::before,
  .toggle .slider::before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
  }
  
  .switch input:checked + .slider,
  .toggle input:checked + .slider {
    background-color: #0073aa;
  }
  
  .switch input:checked + .slider::before,
  .toggle input:checked + .slider::before {
    transform: translateX(26px);
  }
  
  .switch input:focus + .slider,
  .toggle input:focus + .slider {
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.2);
  }
}

/* ================================ 8.3 Style Form Buttons ================================ */
/* Requirement 6.6 - Full-width or prominently sized, minimum height, touch feedback */

@media (max-width: 767px) {
  /* Universal form button styling */
  button[type="submit"],
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .button,
  .btn,
  .wp-block-button__link,
  .wpforms-submit,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce a.button,
  .woocommerce-Button {
    width: 100% !important; /* Full-width on mobile - Requirement 6.6 */
    min-height: 48px !important; /* Minimum height for touch */
    padding: 14px 20px !important;
    font-size: 16px !important;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    border: none;
    border-radius: 4px;
    background-color: #0073aa;
    color: #fff !important;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    display: block;
    margin: 15px 0 !important;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation; /* Prevent double-tap zoom */
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Touch feedback - active state - Requirement 6.6 */
  button[type="submit"]:active,
  input[type="submit"]:active,
  input[type="button"]:active,
  input[type="reset"]:active,
  .button:active,
  .btn:active,
  .wp-block-button__link:active,
  .wpforms-submit:active,
  .woocommerce button.button:active,
  .woocommerce input.button:active,
  .woocommerce a.button:active,
  .woocommerce-Button:active {
    transform: scale(0.98);
    background-color: #005a87;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  /* Focus state */
  button[type="submit"]:focus,
  input[type="submit"]:focus,
  input[type="button"]:focus,
  input[type="reset"]:focus,
  .button:focus,
  .btn:focus,
  .wp-block-button__link:focus,
  .wpforms-submit:focus,
  .woocommerce button.button:focus,
  .woocommerce input.button:focus,
  .woocommerce a.button:focus,
  .woocommerce-Button:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.2);
  }
  
  /* Hover state (for devices that support hover) */
  @media (hover: hover) {
    button[type="submit"]:hover,
    input[type="submit"]:hover,
    input[type="button"]:hover,
    input[type="reset"]:hover,
    .button:hover,
    .btn:hover,
    .wp-block-button__link:hover,
    .wpforms-submit:hover,
    .woocommerce button.button:hover,
    .woocommerce input.button:hover,
    .woocommerce a.button:hover,
    .woocommerce-Button:hover {
      background-color: #005a87;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
  }
  
  /* Disabled state */
  button[type="submit"]:disabled,
  input[type="submit"]:disabled,
  input[type="button"]:disabled,
  input[type="reset"]:disabled,
  .button:disabled,
  .btn:disabled,
  .button.disabled,
  .btn.disabled,
  .wpforms-submit:disabled,
  .woocommerce button.button:disabled,
  .woocommerce input.button:disabled,
  .woocommerce a.button.disabled,
  .woocommerce-Button:disabled {
    background-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed;
    opacity: 0.6;
    transform: none !important;
    box-shadow: none !important;
  }
  
  /* Secondary button style */
  button.secondary,
  input.secondary,
  .button.secondary,
  .btn.secondary,
  .button-secondary,
  .btn-secondary {
    background-color: #fff !important;
    color: #0073aa !important;
    border: 2px solid #0073aa !important;
  }
  
  button.secondary:active,
  input.secondary:active,
  .button.secondary:active,
  .btn.secondary:active,
  .button-secondary:active,
  .btn-secondary:active {
    background-color: #f0f8ff !important;
    border-color: #005a87 !important;
  }
  
  @media (hover: hover) {
    button.secondary:hover,
    input.secondary:hover,
    .button.secondary:hover,
    .btn.secondary:hover,
    .button-secondary:hover,
    .btn-secondary:hover {
      background-color: #f0f8ff !important;
      border-color: #005a87 !important;
    }
  }
  
  /* Danger/Delete button style */
  button.danger,
  input.danger,
  .button.danger,
  .btn.danger,
  .button-danger,
  .btn-danger,
  button.delete,
  .button.delete {
    background-color: #d63638 !important;
    color: #fff !important;
  }
  
  button.danger:active,
  input.danger:active,
  .button.danger:active,
  .btn.danger:active,
  .button-danger:active,
  .btn-danger:active,
  button.delete:active,
  .button.delete:active {
    background-color: #b32d2e !important;
  }
  
  @media (hover: hover) {
    button.danger:hover,
    input.danger:hover,
    .button.danger:hover,
    .btn.danger:hover,
    .button-danger:hover,
    .btn-danger:hover,
    button.delete:hover,
    .button.delete:hover {
      background-color: #b32d2e !important;
    }
  }
  
  /* Success button style */
  button.success,
  input.success,
  .button.success,
  .btn.success,
  .button-success,
  .btn-success {
    background-color: #00a32a !important;
    color: #fff !important;
  }
  
  button.success:active,
  input.success:active,
  .button.success:active,
  .btn.success:active,
  .button-success:active,
  .btn-success:active {
    background-color: #008a20 !important;
  }
  
  @media (hover: hover) {
    button.success:hover,
    input.success:hover,
    .button.success:hover,
    .btn.success:hover,
    .button-success:hover,
    .btn-success:hover {
      background-color: #008a20 !important;
    }
  }
  
  /* Small buttons (still meet minimum touch target) */
  button.small,
  input.small,
  .button.small,
  .btn.small,
  .button-small,
  .btn-small {
    min-height: 44px !important; /* Still meet touch target */
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
  
  /* Large buttons */
  button.large,
  input.large,
  .button.large,
  .btn.large,
  .button-large,
  .btn-large {
    min-height: 56px !important;
    padding: 18px 24px !important;
    font-size: 18px !important;
  }
  
  /* Icon buttons */
  button.icon-button,
  .button.icon-button,
  .btn.icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  
  button.icon-button svg,
  .button.icon-button svg,
  .btn.icon-button svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
  }
  
  /* Button group */
  .button-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  
  .button-group button,
  .button-group .button,
  .button-group .btn {
    margin: 0 !important;
  }
  
  /* Inline button group (convert to vertical on mobile) */
  .button-group-inline {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  /* Loading state */
  button.loading,
  .button.loading,
  .btn.loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
  }
  
  button.loading::after,
  .button.loading::after,
  .btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: button-spin 0.6s linear infinite;
  }
  
  @keyframes button-spin {
    to { transform: rotate(360deg); }
  }
  
  /* WooCommerce specific buttons */
  .woocommerce .cart .button,
  .woocommerce .cart input.button {
    width: 100% !important;
    margin-top: 10px !important;
  }
  
  .woocommerce #respond input#submit,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button {
    width: 100% !important;
  }
  
  .woocommerce #respond input#submit.alt,
  .woocommerce a.button.alt,
  .woocommerce button.button.alt,
  .woocommerce input.button.alt {
    background-color: #00a32a !important;
  }
  
  .woocommerce #respond input#submit.alt:active,
  .woocommerce a.button.alt:active,
  .woocommerce button.button.alt:active,
  .woocommerce input.button.alt:active {
    background-color: #008a20 !important;
  }
  
  /* Place order button - extra prominent */
  #place_order,
  .woocommerce-checkout #place_order {
    background-color: #00a32a !important;
    min-height: 56px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-top: 20px !important;
  }
  
  #place_order:active,
  .woocommerce-checkout #place_order:active {
    background-color: #008a20 !important;
  }
  
  /* Update cart button */
  button[name="update_cart"],
  input[name="update_cart"] {
    background-color: #fff !important;
    color: #0073aa !important;
    border: 2px solid #0073aa !important;
  }
  
  /* Coupon apply button */
  button[name="apply_coupon"],
  input[name="apply_coupon"] {
    width: auto !important;
    min-width: 120px;
    margin-left: 10px !important;
  }
  
  /* Add to cart buttons */
  .add_to_cart_button,
  .single_add_to_cart_button {
    width: 100% !important;
    background-color: #00a32a !important;
  }
  
  .add_to_cart_button:active,
  .single_add_to_cart_button:active {
    background-color: #008a20 !important;
  }
  
  /* Reset button styling */
  button[type="reset"],
  input[type="reset"] {
    background-color: #f0f0f0 !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
  }
  
  button[type="reset"]:active,
  input[type="reset"]:active {
    background-color: #e0e0e0 !important;
  }
  
  /* Link styled as button */
  a.button,
  a.btn {
    display: block !important;
    text-decoration: none !important;
  }
  
  /* Button with icon and text */
  .button-with-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  
  .button-with-icon::before {
    content: attr(data-icon);
    font-size: 20px;
  }
}

/* ================================ 8.4 Style Textarea Fields ================================ */
/* Requirement 6.7 - Minimum 100px height, full-width on mobile */

@media (max-width: 767px) {
  /* Textarea specific styling - Requirement 6.7 */
  textarea,
  .woocommerce textarea,
  .wpforms-field-textarea textarea,
  textarea.input-text {
    min-height: 100px !important; /* Minimum height - Requirement 6.7 */
    width: 100% !important; /* Full-width - Requirement 6.7 */
    padding: 12px !important;
    font-size: 16px !important; /* Prevent iOS zoom */
    line-height: 1.5;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    resize: vertical; /* Allow vertical resize only */
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  
  /* Larger textarea for comments, messages, etc. */
  textarea.large,
  textarea[rows="10"],
  textarea[rows="15"],
  textarea[rows="20"],
  #comment,
  .comment-form-comment textarea,
  .woocommerce-order-comments textarea {
    min-height: 150px !important;
  }
  
  /* Extra large textarea */
  textarea.extra-large {
    min-height: 200px !important;
  }
  
  /* Small textarea (still meets minimum) */
  textarea.small {
    min-height: 100px !important; /* Still meet minimum requirement */
  }
  
  /* Focus state */
  textarea:focus,
  .woocommerce textarea:focus,
  .wpforms-field-textarea textarea:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
  }
  
  /* Disabled state */
  textarea:disabled,
  .woocommerce textarea:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.6;
    resize: none;
  }
  
  /* Error state */
  textarea.error,
  textarea:invalid,
  .woocommerce textarea.error {
    border-color: #d63638;
  }
  
  textarea.error:focus,
  textarea:invalid:focus {
    outline-color: #d63638;
    box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.1);
  }
  
  /* Success state */
  textarea.success,
  textarea:valid {
    border-color: #00a32a;
  }
  
  /* Placeholder styling */
  textarea::placeholder {
    color: #757575;
    opacity: 1;
  }
  
  /* Character counter for textarea */
  .textarea-wrapper {
    position: relative;
    width: 100%;
  }
  
  .textarea-counter {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 12px;
    color: #757575;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: none;
  }
  
  .textarea-counter.warning {
    color: #d63638;
  }
  
  /* Textarea with label */
  .textarea-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
  }
  
  /* Textarea help text */
  .textarea-field .help-text,
  .textarea-field small {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: #757575;
    line-height: 1.4;
  }
  
  /* WooCommerce order notes textarea */
  .woocommerce-checkout .woocommerce-additional-fields textarea,
  #order_comments {
    min-height: 120px !important;
    width: 100% !important;
  }
  
  /* Contact form textarea */
  .contact-form textarea,
  .wpforms-container textarea {
    min-height: 150px !important;
  }
  
  /* Textarea in modal/popup */
  .modal textarea,
  .popup textarea,
  .dialog textarea {
    min-height: 100px !important;
    max-height: 300px;
  }
  
  /* Textarea with fixed height (no resize) */
  textarea.no-resize {
    resize: none !important;
  }
  
  /* Textarea with horizontal resize disabled */
  textarea.resize-vertical {
    resize: vertical !important;
  }
  
  /* Auto-expanding textarea (JavaScript enhanced) */
  textarea.auto-expand {
    overflow: hidden;
    resize: none;
  }
  
  /* Textarea in grid layout */
  .form-grid textarea {
    grid-column: 1 / -1; /* Span full width in grid */
  }
  
  /* Rich text editor fallback */
  .wp-editor-area,
  .mce-content-body {
    min-height: 150px !important;
    padding: 12px !important;
    font-size: 16px !important;
  }
  
  /* Textarea validation message */
  textarea + .error-message,
  textarea + .validation-error {
    display: block;
    margin-top: 5px;
    color: #d63638;
    font-size: 14px;
  }
  
  textarea + .success-message,
  textarea + .validation-success {
    display: block;
    margin-top: 5px;
    color: #00a32a;
    font-size: 14px;
  }
  
  /* Textarea required indicator */
  .textarea-field.required label::after,
  label[for] + textarea[required] {
    content: ' *';
    color: #d63638;
  }
  
  /* Textarea in table (rare but handle it) */
  td textarea,
  th textarea {
    min-height: 100px !important;
    width: 100% !important;
  }
  
  /* Textarea with icon */
  .textarea-with-icon {
    position: relative;
  }
  
  .textarea-with-icon textarea {
    padding-right: 40px !important;
  }
  
  .textarea-with-icon .icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    pointer-events: none;
  }
  
  /* Textarea in dark mode (if supported) */
  @media (prefers-color-scheme: dark) {
    textarea {
      background-color: #1e1e1e;
      color: #fff;
      border-color: #444;
    }
    
    textarea::placeholder {
      color: #999;
    }
    
    textarea:focus {
      border-color: #0073aa;
      background-color: #2a2a2a;
    }
  }
}

/* ================================ End of Task 8: Form and Input Mobile Enhancements ================================ */


/* ================================ LAYOUT AND SPACING MOBILE REFINEMENTS - Task 11 ================================ */
/* Requirements 8.1-8.7 - Comprehensive layout and spacing improvements for mobile */

/* ================================ 11.1 Implement Consistent Content Padding ================================ */
/* Requirement 8.1 - Set 15-20px padding on main containers, ensure consistent spacing across pages */

@media (max-width: 767px) {
  /* Main content containers - consistent 15-20px padding */
  .site-content,
  .content-area,
  .site-main,
  main,
  .main-content,
  .page-content,
  .post-content,
  .entry-content,
  article,
  .woocommerce,
  .woocommerce-page {
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box;
  }
  
  /* Container classes */
  .container,
  .container-fluid,
  .wrap,
  .wrapper,
  .inner-container {
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box;
  }
  
  /* WordPress content wrappers */
  .wp-block-group__inner-container,
  .wp-block-cover__inner-container,
  .wp-block-columns {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Header containers */
  .site-header,
  .header-container,
  .page-header,
  .entry-header {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Footer containers */
  .site-footer,
  .footer-container,
  .footer-widgets,
  .footer-content {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Widget areas */
  .widget-area,
  .sidebar,
  .widget {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* WooCommerce specific containers */
  .woocommerce-page .content-area,
  .woocommerce .content-area,
  .woocommerce-cart,
  .woocommerce-checkout,
  .woocommerce-account,
  .shop-container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Product pages */
  .single-product .product,
  .woocommerce div.product {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Archive pages */
  .archive .site-main,
  .blog .site-main,
  .search .site-main {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Custom page templates */
  .page-template .site-main,
  .single .site-main {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Ensure nested containers don't double padding */
  .container .container,
  .content-area .content-area {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Larger mobile devices (480px-767px) - increase to 20px */
@media (min-width: 480px) and (max-width: 767px) {
  .site-content,
  .content-area,
  .site-main,
  main,
  .container,
  .header-container,
  .footer-container,
  .woocommerce,
  .woocommerce-page {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ================================ 11.2 Add Section Vertical Spacing ================================ */
/* Requirement 8.2 - Ensure minimum 30px between sections, use consistent margin/padding */

@media (max-width: 767px) {
  /* Section elements - minimum 30px vertical spacing */
  section,
  .section,
  .content-section,
  .page-section {
    margin-bottom: 30px !important;
  }
  
  section:last-child,
  .section:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Add spacing between major content blocks */
  .entry-content > *,
  .post-content > *,
  .page-content > * {
    margin-bottom: 20px;
  }
  
  .entry-content > *:last-child,
  .post-content > *:last-child,
  .page-content > *:last-child {
    margin-bottom: 0;
  }
  
  /* Spacing between content sections */
  .content-area + .widget-area,
  .site-main + .sidebar,
  article + article {
    margin-top: 30px !important;
  }
  
  /* WooCommerce sections */
  .woocommerce-products-header,
  .woocommerce-result-count,
  .woocommerce-ordering,
  .products,
  .woocommerce-pagination,
  .related.products,
  .upsells.products,
  .cross-sells {
    margin-bottom: 30px !important;
  }
  
  /* Product sections */
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce div.product .related,
  .woocommerce div.product .upsells {
    margin-top: 30px !important;
  }
  
  /* Cart sections */
  .woocommerce-cart .cart-collaterals,
  .woocommerce-cart .cross-sells {
    margin-top: 30px !important;
  }
  
  /* Checkout sections */
  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields,
  .woocommerce-checkout .woocommerce-additional-fields,
  .woocommerce-checkout #order_review {
    margin-bottom: 30px !important;
  }
  
  /* Widget sections */
  .widget {
    margin-bottom: 30px !important;
  }
  
  .widget:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Footer sections */
  .footer-widgets .widget-area {
    margin-bottom: 30px !important;
  }
  
  .footer-widgets .widget-area:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Header sections */
  .site-header,
  .page-header {
    margin-bottom: 30px !important;
  }
  
  /* Archive sections */
  .archive-header,
  .page-header {
    margin-bottom: 30px !important;
  }
  
  /* Comment sections */
  .comments-area,
  .comment-respond {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  
  /* Navigation sections */
  .post-navigation,
  .posts-navigation,
  .pagination {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
}

/* ================================ 11.3 Stack Footer Columns Vertically ================================ */
/* Requirement 8.3 - Convert footer columns to block display, add adequate spacing between columns */

@media (max-width: 767px) {
  /* Footer columns container */
  .site-footer,
  .footer-widgets,
  .footer-columns,
  .footer-widget-area,
  .footer-prio-columns,
  .footer-contact-columns {
    display: block !important;
    width: 100% !important;
  }
  
  /* Individual footer columns - stack vertically */
  .footer-column,
  .footer-widget,
  .footer-widget-area .widget-area,
  .site-footer .widget-area,
  .footer-widgets .widget-area,
  .footer-prio-columns > div,
  .footer-contact-columns > div {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 30px !important; /* Adequate spacing between columns */
  }
  
  /* Last footer column - no bottom margin */
  .footer-column:last-child,
  .footer-widget:last-child,
  .footer-widget-area .widget-area:last-child,
  .site-footer .widget-area:last-child,
  .footer-widgets .widget-area:last-child,
  .footer-prio-columns > div:last-child,
  .footer-contact-columns > div:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Footer column content */
  .footer-column .widget,
  .footer-widget .widget {
    margin-bottom: 20px;
  }
  
  .footer-column .widget:last-child,
  .footer-widget .widget:last-child {
    margin-bottom: 0;
  }
  
  /* Footer menus */
  .footer-menu,
  .footer-navigation {
    display: block !important;
    width: 100% !important;
    margin-bottom: 20px;
  }
  
  .footer-menu ul,
  .footer-navigation ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  .footer-menu li,
  .footer-navigation li {
    width: 100%;
    margin: 0;
  }
  
  .footer-menu a,
  .footer-navigation a {
    display: block;
    padding: 10px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  
  /* Footer social icons */
  .footer-social,
  .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-bottom: 20px;
  }
  
  .footer-social a,
  .social-links a {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Footer copyright */
  .site-info,
  .footer-copyright,
  .copyright-text {
    display: block;
    width: 100%;
    text-align: center;
    padding: 20px 15px;
    margin-top: 30px;
    border-top: 1px solid #e0e0e0;
  }
  
  /* Remove any flexbox or grid layouts from footer */
  .site-footer .row,
  .footer-widgets .row {
    display: block !important;
  }
  
  .site-footer [class*="col-"],
  .footer-widgets [class*="col-"] {
    width: 100% !important;
    float: none !important;
    display: block !important;
    margin-bottom: 30px !important;
  }
  
  .site-footer [class*="col-"]:last-child,
  .footer-widgets [class*="col-"]:last-child {
    margin-bottom: 0 !important;
  }
}

/* ================================ 11.4 Position Sidebar Below Main Content ================================ */
/* Requirement 8.4 - Ensure sidebar appears after main content on mobile, add clear visual separation */

@media (max-width: 767px) {
  /* Primary content area - ensure proper order */
  .site-content,
  .content-area-wrapper,
  .main-content-wrapper {
    display: flex;
    flex-direction: column;
  }
  
  /* Main content first */
  .site-main,
  .content-area,
  .main-content,
  #primary {
    order: 1;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding-bottom: 30px;
  }
  
  /* Sidebar second - below main content */
  .sidebar,
  .widget-area,
  #secondary,
  aside {
    order: 2;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding-top: 30px !important; /* Clear visual separation */
    border-top: 2px solid #e0e0e0; /* Visual separator */
  }
  
  /* Multiple sidebars */
  #secondary {
    order: 2;
  }
  
  #tertiary {
    order: 3;
    padding-top: 30px !important;
    border-top: 2px solid #e0e0e0;
  }
  
  /* WooCommerce sidebar */
  .woocommerce-page .sidebar,
  .woocommerce .sidebar {
    order: 2;
    margin-top: 30px !important;
    padding-top: 30px !important;
    border-top: 2px solid #e0e0e0;
  }
  
  /* Remove any float-based layouts */
  .site-content::after,
  .content-area-wrapper::after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Ensure sidebar widgets have proper spacing */
  .sidebar .widget,
  .widget-area .widget {
    margin-bottom: 25px;
  }
  
  .sidebar .widget:last-child,
  .widget-area .widget:last-child {
    margin-bottom: 0;
  }
  
  /* Sidebar headings */
  .sidebar .widget-title,
  .widget-area .widget-title {
    font-size: 1.25rem;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
  }
}

/* ================================ 11.5 Convert Multi-Column Layouts to Single Column ================================ */
/* Requirement 8.5 - Transform all multi-column layouts to single column on mobile, ensure proper stacking order */

@media (max-width: 767px) {
  /* CSS columns - convert to single column */
  .columns,
  .multi-column,
  [style*="column-count"],
  [style*="columns"] {
    column-count: 1 !important;
    columns: 1 !important;
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
  }
  
  /* Flexbox multi-column layouts */
  .flex-columns,
  .flex-row,
  .d-flex {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  
  .flex-columns > *,
  .flex-row > *,
  .d-flex > * {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px;
  }
  
  .flex-columns > *:last-child,
  .flex-row > *:last-child,
  .d-flex > *:last-child {
    margin-bottom: 0;
  }
  
  /* Grid multi-column layouts */
  .grid-columns,
  .grid-layout,
  [class*="grid-cols-"] {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  
  /* Bootstrap columns */
  .row {
    display: flex;
    flex-direction: column;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  [class*="col-"],
  [class*="col-xs-"],
  [class*="col-sm-"],
  [class*="col-md-"],
  [class*="col-lg-"],
  [class*="col-xl-"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-bottom: 20px;
  }
  
  [class*="col-"]:last-child {
    margin-bottom: 0;
  }
  
  /* WordPress columns block */
  .wp-block-columns {
    flex-direction: column !important;
    gap: 20px;
  }
  
  .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 20px;
  }
  
  .wp-block-column:last-child {
    margin-bottom: 0;
  }
  
  /* WooCommerce columns */
  .woocommerce .col2-set,
  .woocommerce-page .col2-set {
    display: flex;
    flex-direction: column;
  }
  
  .woocommerce .col2-set .col-1,
  .woocommerce .col2-set .col-2,
  .woocommerce-page .col2-set .col-1,
  .woocommerce-page .col2-set .col-2 {
    width: 100% !important;
    float: none !important;
    margin-bottom: 20px;
  }
  
  .woocommerce .col2-set .col-2:last-child,
  .woocommerce-page .col2-set .col-2:last-child {
    margin-bottom: 0;
  }
  
  /* Product columns */
  .products.columns-2,
  .products.columns-3,
  .products.columns-4,
  .products.columns-5,
  .products.columns-6 {
    grid-template-columns: 1fr !important;
  }
  
  /* Custom multi-column layouts */
  .two-column,
  .three-column,
  .four-column {
    display: flex;
    flex-direction: column;
  }
  
  .two-column > *,
  .three-column > *,
  .four-column > * {
    width: 100% !important;
    margin-bottom: 20px;
  }
  
  .two-column > *:last-child,
  .three-column > *:last-child,
  .four-column > *:last-child {
    margin-bottom: 0;
  }
  
  /* Ensure proper stacking order */
  .column-reverse {
    flex-direction: column-reverse !important;
  }
  
  /* Remove column gaps that are too large */
  .has-column-gap {
    column-gap: 0 !important;
  }
}

/* ================================ 11.6 Handle Tables on Mobile ================================ */
/* Requirement 8.6 - Add overflow-x: auto to table containers OR transform to card layout, add visual scroll indicators */

@media (max-width: 767px) {
  /* Table container with horizontal scroll */
  .table-wrapper,
  .table-container,
  .responsive-table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
    position: relative;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
  }
  
  /* Visual scroll indicator - shadow on right side */
  .table-wrapper::after,
  .table-container::after,
  .responsive-table::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  
  /* Hide indicator when scrolled to end */
  .table-wrapper.scrolled-end::after,
  .table-container.scrolled-end::after,
  .responsive-table.scrolled-end::after {
    opacity: 0;
  }
  
  /* Wrap tables that aren't already in containers */
  table {
    width: 100%;
    min-width: 500px; /* Minimum width to trigger scroll */
    border-collapse: collapse;
    font-size: 14px;
  }
  
  /* If table is not in a wrapper, add overflow to parent */
  .entry-content table,
  .post-content table,
  .page-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Table cells - reduce padding for mobile */
  table th,
  table td {
    padding: 8px 10px;
    white-space: nowrap;
    border: 1px solid #e0e0e0;
  }
  
  /* Table headers - sticky on scroll */
  table thead th {
    position: sticky;
    top: 0;
    background-color: #f5f5f5;
    font-weight: 600;
    z-index: 10;
  }
  
  /* Alternative: Card layout for simple tables */
  table.card-table {
    min-width: 100%;
    display: block;
  }
  
  table.card-table thead {
    display: none; /* Hide headers in card layout */
  }
  
  table.card-table tbody,
  table.card-table tr,
  table.card-table td {
    display: block;
    width: 100%;
  }
  
  table.card-table tr {
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #f9f9f9;
  }
  
  table.card-table td {
    padding: 8px 0;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    white-space: normal;
  }
  
  table.card-table td:last-child {
    border-bottom: none;
  }
  
  /* Add data labels in card layout */
  table.card-table td::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    display: inline-block;
    margin-right: 10px;
    min-width: 100px;
  }
  
  /* WooCommerce tables */
  .woocommerce table.shop_table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 100%;
  }
  
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td {
    padding: 8px;
    font-size: 13px;
  }
  
  /* Cart table - special handling */
  .woocommerce-cart table.cart {
    display: block;
    overflow-x: auto;
  }
  
  .woocommerce-cart table.cart th,
  .woocommerce-cart table.cart td {
    min-width: 100px;
    padding: 10px 8px;
  }
  
  /* Checkout review table */
  .woocommerce-checkout-review-order-table {
    width: 100%;
    min-width: 100%;
  }
  
  .woocommerce-checkout-review-order-table th,
  .woocommerce-checkout-review-order-table td {
    padding: 10px;
    white-space: normal;
  }
  
  /* Pricing tables */
  .pricing-table {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .pricing-table .pricing-column {
    width: 100%;
    margin-bottom: 20px;
  }
  
  /* Comparison tables - force scroll */
  .comparison-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .comparison-table table {
    min-width: 600px;
  }
}

/* ================================ 11.7 Reduce Header Padding on Mobile ================================ */
/* Requirement 8.7 - Decrease header padding compared to desktop, preserve screen space */

@media (max-width: 767px) {
  /* Site header - reduced padding */
  .site-header {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Header container */
  .header-container {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Page header */
  .page-header,
  .entry-header {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Archive header */
  .archive-header {
    padding: 20px 15px !important;
  }
  
  /* Hero header */
  .hero-header,
  .page-hero {
    padding: 30px 15px !important;
  }
  
  /* Subpage header */
  .subpage-header {
    padding: 20px 15px !important;
  }
  
  .subpage-title {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Header text sections */
  .header-text {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Header logo area */
  .header-logo {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Header title area */
  .header-title {
    padding-top: 15px !important;
    padding-bottom: 30px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Sticky header - minimal padding */
  .sticky-container .site-header,
  .sticky-container .header-container {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  
  /* WooCommerce page headers */
  .woocommerce-products-header {
    padding: 20px 15px !important;
  }
  
  /* Post/page title headers */
  .entry-header {
    padding: 15px !important;
    margin-bottom: 20px;
  }
  
  .entry-title {
    margin-top: 0;
    margin-bottom: 10px;
  }
  
  /* Header meta information */
  .entry-meta {
    padding: 0 !important;
    margin-bottom: 15px;
  }
}

/* Very small screens - even more compact */
@media (max-width: 480px) {
  .site-header,
  .header-container {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  
  .page-header,
  .entry-header {
    padding: 15px 10px !important;
  }
  
  .header-text {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

/* Desktop - normal padding for comparison */
@media (min-width: 768px) {
  .site-header {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  
  .header-container {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  
  .page-header,
  .entry-header {
    padding: 40px 20px;
  }
  
  .header-text {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

/* ================================ END OF LAYOUT AND SPACING MOBILE REFINEMENTS ================================ */


/* ===== FOOTER - Block Template Part Styles ===== */
footer#colophon .wp-block-group {
    font-family: 'Poppins', sans-serif;
}

footer#colophon .wp-block-group a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.15s ease;
}

footer#colophon .wp-block-group a:hover {
    color: #F5B895;
}

footer#colophon .wp-block-list {
    list-style: none;
    padding-left: 0;
}

footer#colophon .wp-block-list li {
    margin-bottom: 0.5rem;
}

footer#colophon .wp-block-social-links .wp-social-link {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    width: 44px;
    height: 44px;
    transition: all 0.15s ease;
}

footer#colophon .wp-block-social-links .wp-social-link:hover {
    background: #F5B895;
}

footer#colophon .wp-block-social-links .wp-social-link:hover svg {
    fill: #2D2B3F;
}

/* Footer responsive */
@media (max-width: 768px) {
    footer#colophon .wp-block-columns {
        flex-direction: column;
        text-align: center;
    }
    
    footer#colophon .wp-block-social-links {
        justify-content: center;
    }
    
    footer#colophon .wp-block-group[style*="justify-content"] {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
}


/* ===== Section Tags / Badges - fit width to content ===== */
.wp-block-group p.has-background[style*="border-radius:9999px"],
.wp-block-group p.has-background[style*="border-radius: 9999px"] {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}


/* ===== Menu action buttons (Wesprzyj + Platforma) ===== */
#menu-item-12 > a,
#menu-item-146 > a,
.menu-btn-support > a,
.nav-item > a[href*="wesprzyj"],
.landing-nav__link[href*="wesprzyj"] {
    background: #FF6B6B !important;
    color: #FFFFFF !important;
    border-radius: 1rem;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600;
    transition: all 0.15s ease;
    line-height: 1;
}

#menu-item-12 > a:hover,
#menu-item-146 > a:hover,
.menu-btn-support > a:hover,
.nav-item > a[href*="wesprzyj"]:hover,
.landing-nav__link[href*="wesprzyj"]:hover {
    background: #FF5252 !important;
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.4);
    color: #FFFFFF !important;
}

#menu-item-12 > a span,
#menu-item-146 > a span,
.menu-btn-support > a span,
.nav-item > a[href*="wesprzyj"] span {
    color: #FFFFFF !important;
}

#menu-item-92 > a,
.nav-item > a[href*="platforma"],
.landing-nav__link[href*="platforma"] {
    background: linear-gradient(135deg, #F5B895 0%, #E89B6E 100%) !important;
    color: #3F3D56 !important;
    border-radius: 1rem;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600;
    transition: all 0.15s ease;
    line-height: 1;
}

#menu-item-92 > a:hover,
.nav-item > a[href*="platforma"]:hover,
.landing-nav__link[href*="platforma"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(245, 184, 149, 0.4);
    color: #3F3D56 !important;
}

#menu-item-92 > a span,
.nav-item > a[href*="platforma"] span {
    color: #3F3D56 !important;
}


/* ===== Pricing cards - align buttons to bottom ===== */
.pricing-columns > .wp-block-column.pricing-card {
    display: flex;
    flex-direction: column;
}

.pricing-card .pricing-features {
    flex: 1;
}

.pricing-card .pricing-cta {
    margin-top: auto !important;
}


/* ===== Pricing Starter button - force white border ===== */
.pricing-card .is-style-outline .wp-block-button__link {
    border: 2px solid #ffffff !important;
    background: transparent !important;
    color: #ffffff !important;
}


/* ===== Tutor LMS course pages - dark theme ===== */
body.single-courses,
body.post-type-archive-courses {
    background: #3F3D56;
    color: #fff;
}

/* Hide default Bootstrap navbar on course pages, show landing-style header instead */
body.single-courses .sticky-container,
body.single-courses .top-menu-container,
body.single-courses #menu-toggle,
body.single-courses #slide-menu,
body.post-type-archive-courses .sticky-container,
body.post-type-archive-courses .top-menu-container,
body.post-type-archive-courses #menu-toggle,
body.post-type-archive-courses #slide-menu {
    display: none !important;
}

body.single-courses .tutor-course-details-page,
body.single-courses .tutor-single-course-content,
body.single-courses .tutor-wrap {
    background: #3F3D56;
}

body.single-courses .edukaczka-course-header,
body.post-type-archive-courses .edukaczka-course-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(63, 61, 86, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 0;
}

body.single-courses .edukaczka-course-header nav ul,
body.post-type-archive-courses .edukaczka-course-header nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.single-courses .edukaczka-course-header nav a,
body.post-type-archive-courses .edukaczka-course-header nav a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
    transition: color 0.15s;
    white-space: nowrap;
}

body.single-courses .edukaczka-course-header nav a:hover,
body.post-type-archive-courses .edukaczka-course-header nav a:hover {
    color: #fff;
}

/* Push content below fixed header */
body.single-courses .tutor-wrap {
    padding-top: 80px;
}


/* ===== Blog page - Query Loop cards & category filters ===== */
body.landing-dark-theme .blog-category-filters {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

body.landing-dark-theme .blog-category-filters li {
    list-style: none;
}

body.landing-dark-theme .blog-category-filters a {
    display: inline-block;
    background: #35334A;
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
}

body.landing-dark-theme .blog-category-filters a:hover,
body.landing-dark-theme .blog-category-filters .current-cat a {
    background: #F5B895;
    color: #3F3D56;
    border-color: #F5B895;
}

/* Blog post cards in Query Loop */
body.landing-dark-theme .wp-block-query .wp-block-post-featured-image {
    margin: 0;
    overflow: hidden;
}

body.landing-dark-theme .wp-block-query .wp-block-post-featured-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

body.landing-dark-theme .wp-block-query .wp-block-post-title a {
    color: #fff !important;
    text-decoration: none;
}

body.landing-dark-theme .wp-block-query .wp-block-post-title a:hover {
    color: #F5B895 !important;
}

body.landing-dark-theme .wp-block-query .wp-block-post-excerpt__more-text {
    color: #F5B895;
    font-weight: 600;
    text-decoration: none;
}

body.landing-dark-theme .blog-card-category a {
    background: rgba(135,206,235,0.15);
    color: #87CEEB !important;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    text-decoration: none;
    font-size: 0.6875rem;
}

/* Query pagination dark theme */
body.landing-dark-theme .wp-block-query-pagination {
    gap: 0.5rem;
}

body.landing-dark-theme .wp-block-query-pagination-numbers .page-numbers {
    background: #35334A;
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.75rem;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    font-size: 0.875rem;
}

body.landing-dark-theme .wp-block-query-pagination-numbers .page-numbers.current {
    background: #F5B895;
    color: #3F3D56;
    border-color: #F5B895;
}

body.landing-dark-theme .wp-block-query-pagination-previous,
body.landing-dark-theme .wp-block-query-pagination-next {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.875rem;
}


/* ===== Single Article - Dark Theme ===== */
body.landing-dark-theme .edukaczka-article-hero {
    padding: calc(80px + 3rem) 0 0;
    background: linear-gradient(180deg, #2D2B3F 0%, #3F3D56 100%);
}

body.landing-dark-theme .edukaczka-article-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}

body.landing-dark-theme .edukaczka-blog-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

body.landing-dark-theme .edukaczka-breadcrumb {
    margin-bottom: 2rem;
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.5);
}

body.landing-dark-theme .edukaczka-breadcrumb a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
}

body.landing-dark-theme .edukaczka-breadcrumb a:hover {
    color: #F5B895;
}

body.landing-dark-theme .edukaczka-breadcrumb span {
    margin: 0 0.5rem;
}

body.landing-dark-theme .edukaczka-breadcrumb__current {
    color: rgba(255,255,255,0.7);
}

body.landing-dark-theme .edukaczka-article-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

body.landing-dark-theme .edukaczka-category-pill {
    background: rgba(245,184,149,0.2);
    color: #F5B895;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    text-decoration: none;
}

body.landing-dark-theme .edukaczka-article-date {
    color: rgba(255,255,255,0.5);
    font-size: 0.8125rem;
}

body.landing-dark-theme .edukaczka-article-title {
    font-size: 2.5rem;
    color: #fff;
    font-family: var(--wp--preset--font-family--quicksand, 'Quicksand', sans-serif);
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

body.landing-dark-theme .edukaczka-article-excerpt {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    margin-bottom: 2rem;
}

body.landing-dark-theme .edukaczka-author-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

body.landing-dark-theme .edukaczka-author-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

body.landing-dark-theme .edukaczka-author-avatar {
    width: 48px;
    height: 48px;
    background: #35334A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

body.landing-dark-theme .edukaczka-author-name {
    color: #fff;
    font-weight: 600;
    font-size: 0.9375rem;
    margin: 0;
}

body.landing-dark-theme .edukaczka-author-org {
    color: rgba(255,255,255,0.5);
    font-size: 0.8125rem;
    margin: 0;
}

body.landing-dark-theme .edukaczka-share-buttons {
    display: flex;
    gap: 0.5rem;
}

body.landing-dark-theme .edukaczka-share-btn {
    width: 36px;
    height: 36px;
    background: #35334A;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s;
}

body.landing-dark-theme .edukaczka-share-btn:hover {
    background: #F5B895;
    color: #3F3D56;
    border-color: #F5B895;
}

/* Featured image */
body.landing-dark-theme .edukaczka-article-image {
    padding: 2.5rem 0;
    background: #3F3D56;
}

body.landing-dark-theme .edukaczka-featured-img {
    width: 100%;
    height: auto;
    border-radius: 1.5rem;
    display: block;
}

/* Article content */
body.landing-dark-theme .edukaczka-article-content {
    padding: 0 0 3rem;
    background: #3F3D56;
}

body.landing-dark-theme .edukaczka-article-content p {
    color: rgba(255,255,255,0.7);
    font-size: 1.0625rem;
    line-height: 1.9;
    margin-bottom: 1.5rem;
}

body.landing-dark-theme .edukaczka-article-content h2 {
    color: #fff;
    font-family: var(--wp--preset--font-family--quicksand, 'Quicksand', sans-serif);
    font-size: 1.75rem;
    margin: 3rem 0 1rem;
}

body.landing-dark-theme .edukaczka-article-content h3 {
    color: #F5B895;
    font-family: var(--wp--preset--font-family--quicksand, 'Quicksand', sans-serif);
    font-size: 1.25rem;
    margin: 2rem 0 1rem;
}

body.landing-dark-theme .edukaczka-article-content ul,
body.landing-dark-theme .edukaczka-article-content ol {
    color: rgba(255,255,255,0.7);
    padding-left: 1.5rem;
    margin-bottom: 2rem;
}

body.landing-dark-theme .edukaczka-article-content li {
    margin-bottom: 0.75rem;
}

body.landing-dark-theme .edukaczka-article-content strong {
    color: #fff;
}

body.landing-dark-theme .edukaczka-article-content a {
    color: #87CEEB;
}

/* Highlight box (Group block with class highlight-box) */
body.landing-dark-theme .edukaczka-article-content .highlight-box,
body.landing-dark-theme .edukaczka-article-content .wp-block-group.highlight-box {
    background: #35334A;
    border-left: 4px solid #F5B895;
    border-radius: 0 1rem 1rem 0;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
}

/* Tags */
body.landing-dark-theme .edukaczka-article-tags {
    padding: 0 0 3rem;
    background: #3F3D56;
}

body.landing-dark-theme .edukaczka-tags-list {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 2rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

body.landing-dark-theme .edukaczka-tag-pill {
    background: #35334A;
    color: rgba(255,255,255,0.7);
    font-size: 0.75rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.1);
    text-decoration: none;
}

body.landing-dark-theme .edukaczka-tag-pill:hover {
    color: #F5B895;
    border-color: #F5B895;
}

/* Related posts */
body.landing-dark-theme .edukaczka-related {
    padding: 3rem 0 5rem;
    background: #35334A;
}

body.landing-dark-theme .edukaczka-related-title {
    color: #fff;
    font-family: var(--wp--preset--font-family--quicksand, 'Quicksand', sans-serif);
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
}

body.landing-dark-theme .edukaczka-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

body.landing-dark-theme .edukaczka-related-card {
    background: #3F3D56;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 1.5rem;
    overflow: hidden;
}

body.landing-dark-theme .edukaczka-related-thumb {
    height: 140px;
    overflow: hidden;
}

body.landing-dark-theme .edukaczka-related-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.landing-dark-theme .edukaczka-related-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #4A4862 0%, #3F3D56 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    opacity: 0.5;
}

body.landing-dark-theme .edukaczka-related-body {
    padding: 1.25rem;
}

body.landing-dark-theme .edukaczka-related-date {
    color: rgba(255,255,255,0.5);
    font-size: 0.75rem;
}

body.landing-dark-theme .edukaczka-related-card-title {
    color: #fff;
    font-family: var(--wp--preset--font-family--quicksand, 'Quicksand', sans-serif);
    font-size: 1rem;
    margin: 0.5rem 0;
    line-height: 1.3;
}

body.landing-dark-theme .edukaczka-related-card-title a {
    color: #fff;
    text-decoration: none;
}

body.landing-dark-theme .edukaczka-related-card-title a:hover {
    color: #F5B895;
}

body.landing-dark-theme .edukaczka-related-link {
    color: #F5B895;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

/* Responsive article */
@media (max-width: 768px) {
    body.landing-dark-theme .edukaczka-article-title {
        font-size: 1.75rem;
    }
    body.landing-dark-theme .edukaczka-author-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    body.landing-dark-theme .edukaczka-related-grid {
        grid-template-columns: 1fr;
    }
}


/* ===== Unified Mobile Menu - Dark Theme ===== */
body.landing-dark-theme #menu-toggle {
    display: none;
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 10001;
    background: rgba(63,61,86,0.95);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.75rem;
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
    body.landing-dark-theme #menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

body.landing-dark-theme #slide-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100vh;
    background: #2D2B3F;
    z-index: 10000;
    padding: 5rem 2rem 2rem;
    transition: right 0.3s ease;
    overflow-y: auto;
    border-left: 1px solid rgba(255,255,255,0.1);
}

body.landing-dark-theme #slide-menu.open {
    right: 0;
}

body.landing-dark-theme #slide-menu nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.landing-dark-theme #slide-menu nav li {
    margin-bottom: 0;
}

body.landing-dark-theme #slide-menu nav a {
    display: block;
    padding: 1rem 0;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: color 0.15s;
}

body.landing-dark-theme #slide-menu nav a:hover {
    color: #F5B895;
}

/* Slide menu overlay */
.slide-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    backdrop-filter: blur(2px);
}

.slide-menu-overlay.is-visible {
    display: block;
}

body.menu-open {
    overflow: hidden;
}


/* ===== Global dark theme background for posts ===== */
body.single-post.landing-dark-theme,
body.blog.landing-dark-theme,
body.archive.landing-dark-theme {
    background: #3F3D56;
    color: rgba(255,255,255,0.7);
}

body.single-post.landing-dark-theme .site-footer,
body.blog.landing-dark-theme .site-footer,
body.archive.landing-dark-theme .site-footer {
    background: transparent;
}

/* Mobile menu - show on ALL dark theme pages including front page */
body.landing-dark-theme #menu-toggle {
    display: none;
}

@media (max-width: 768px) {
    body.landing-dark-theme #menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* Fix article content area - remove white background */
body.single-post.landing-dark-theme .content-area {
    background: transparent;
    max-width: none;
    padding: 0;
}

body.single-post.landing-dark-theme .subpage-contener {
    padding-top: 0;
    padding-bottom: 0;
}

/* Ensure green bar from Tutor/other plugins doesn't show */
body.single-post.landing-dark-theme .tutor-wrap {
    display: none;
}


/* ===== Landing hamburger also triggers slide menu ===== */
body.landing-dark-theme .landing-hamburger {
    cursor: pointer;
    z-index: 10001;
    position: relative;
}

/* Slide menu works on front page too */
body.home.landing-dark-theme #slide-menu,
body.page.landing-dark-theme #slide-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100vh;
    background: #2D2B3F;
    z-index: 10000;
    padding: 5rem 2rem 2rem;
    transition: right 0.3s ease;
    overflow-y: auto;
    border-left: 1px solid rgba(255,255,255,0.1);
}

body.home.landing-dark-theme #slide-menu.open,
body.page.landing-dark-theme #slide-menu.open {
    right: 0;
}

body.home.landing-dark-theme #slide-menu nav ul,
body.page.landing-dark-theme #slide-menu nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.home.landing-dark-theme #slide-menu nav li,
body.page.landing-dark-theme #slide-menu nav li {
    margin-bottom: 0;
}

body.home.landing-dark-theme #slide-menu nav a,
body.page.landing-dark-theme #slide-menu nav a {
    display: block;
    padding: 1rem 0;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

body.home.landing-dark-theme #slide-menu nav a:hover,
body.page.landing-dark-theme #slide-menu nav a:hover {
    color: #F5B895;
}


/* ===== OVERRIDE: Dark theme slide menu (fix conflicts with base styles) ===== */
body.landing-dark-theme #slide-menu {
    left: -100% !important;
    right: auto !important;
    width: 300px;
    max-width: 85vw;
    background: #2D2B3F !important;
    border-right: 1px solid rgba(255,255,255,0.1);
    border-left: none;
    padding: 5rem 2rem 2rem;
}

body.landing-dark-theme #slide-menu.open {
    left: 0 !important;
    box-shadow: 2px 0 20px rgba(0,0,0,0.5);
}

body.landing-dark-theme #slide-menu nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.landing-dark-theme #slide-menu nav li {
    margin: 0 !important;
    padding: 0 !important;
}

body.landing-dark-theme #slide-menu nav a {
    display: block !important;
    padding: 1rem 0 !important;
    color: rgba(255,255,255,0.7) !important;
    text-decoration: none !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

body.landing-dark-theme #slide-menu nav a:hover {
    color: #F5B895 !important;
}

/* Dark theme menu toggle button */
body.landing-dark-theme #menu-toggle {
    background: rgba(63,61,86,0.95) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 0.75rem !important;
    backdrop-filter: blur(10px);
    left: 1.25rem;
    top: 1.25rem;
}

/* Overlay for dark theme */
body.landing-dark-theme.menu-open::before {
    background: rgba(0,0,0,0.6) !important;
}


/* ===== FINAL OVERRIDE: Mobile slide menu for dark theme ===== */
body.landing-dark-theme #slide-menu {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    right: auto !important;
    width: 85vw !important;
    max-width: 320px !important;
    height: 100vh !important;
    background: #2D2B3F !important;
    z-index: 100000 !important;
    padding: 5rem 2rem 2rem !important;
    transition: left 0.3s ease !important;
    overflow-y: auto !important;
    border-right: 1px solid rgba(255,255,255,0.1) !important;
}

body.landing-dark-theme #slide-menu.open {
    left: 0 !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.5) !important;
}

body.landing-dark-theme #slide-menu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.landing-dark-theme #slide-menu li {
    margin: 0 !important;
    padding: 0 !important;
}

body.landing-dark-theme #slide-menu a {
    display: block !important;
    padding: 1rem 0 !important;
    color: rgba(255,255,255,0.8) !important;
    text-decoration: none !important;
    font-size: 1.0625rem !important;
    font-weight: 500 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

body.landing-dark-theme #slide-menu a:hover {
    color: #F5B895 !important;
}

/* Overlay when menu is open */
body.landing-dark-theme.menu-open::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.6) !important;
    z-index: 99999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* When menu is NOT open, hide overlay */
body.landing-dark-theme:not(.menu-open)::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* ===== KILL overlay mask - menu is fullscreen, no mask needed ===== */
body.menu-open::before,
body.landing-dark-theme.menu-open::before {
    display: none !important;
    content: none !important;
}