/* ==============================================
   SWIPER NAVIGATION BUTTONS
   ============================================== */
.swiper-button-next,
.swiper-button-prev {
   width: 44px;
   height: 44px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
   color: white;
   cursor: pointer;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {

   transform: scale(1.05);
}


.swiper-button-next {
   right: 16px;
}

.swiper-button-prev {
   left: 16px;
}

/* Dark mode */
.dark .swiper-button-next,
.dark .swiper-button-prev {
   background: rgba(34, 197, 94, 0.8);
}

.dark .swiper-button-next:hover,
.dark .swiper-button-prev:hover {
   background: rgba(34, 197, 94, 1);
}

/* ==============================================
   MOBILE DRAWER STYLES
   ============================================== */
#mobile-drawer {
   position: fixed;
   inset: 0;
   z-index: 50;
}

#mobile-drawer.hidden {
   display: none !important;
   pointer-events: none;
}

#mobile-drawer:not(.hidden) {
   display: flex !important;
   pointer-events: auto;
}

#mobile-drawer-backdrop {
   background: rgba(0, 0, 0, 0.5);
}

/* ==============================================
   MENU & BUTTONS
   ============================================== */
#menu-toggle {
   cursor: pointer;
   min-width: 44px;
   min-height: 44px;
}

#menu-toggle:active {
   opacity: 0.8;
}

#mobile-drawer-close {
   cursor: pointer;
}

/* ==============================================
   DESKTOP DROPDOWN MENU - UL/LI/A STRUCTURE
   ============================================== */
.nav-dropdown {
   position: relative;
   display: inline-block;
}

.nav-dropdown-trigger {
   cursor: pointer;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
}

.nav-dropdown-menu {
   /* Position & Layout */
   position: absolute;
   top: calc(100% + 0px);
   left: 0;
   min-width: 224px;
   z-index: 40;

   /* Visibility */
   opacity: 0;
   visibility: hidden;
   pointer-events: none;

   /* Animation */
   transition: opacity 0.3s ease, visibility 0.3s ease;

   /* List reset */
   list-style: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
}

.nav-dropdown-menu li {
   margin: 0;
   padding: 0;
}

.nav-dropdown-menu a {
   display: block;
   text-decoration: none;
   color: inherit;
}

/* Show menu on parent hover */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu.show {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
}

/* ==============================================
   MOBILE DROPDOWN MENU - UL/LI/A STRUCTURE
   ============================================== */
.mobile-dropdown {
   position: relative;
}

.mobile-dropdown-trigger {
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-decoration: none;
   color: inherit;
}

.mobile-dropdown-menu {
   list-style: none;
   margin: 0;
   padding: 0;
}

.mobile-dropdown-menu li {
   margin: 0;
   padding: 0;
}

.mobile-dropdown-menu a {
   display: block;
   text-decoration: none;
   color: inherit;
}

.mobile-dropdown-menu.show {
   display: block !important;
}

/* ==============================================
   LIGHTBOX STYLES
   ============================================== */
#lightbox {
   backdrop-filter: blur(2px);
}

#lightbox img {
   user-select: none;
}

/* ==============================================
   GENERAL STYLES
   ============================================== */
html {
   scroll-padding-top: 5.5rem;
}

a,
button {
   transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

:focus-visible {
   outline: 2px solid theme('colors.primary.600');
   outline-offset: 2px;
}

/* ==============================================
   PRODUCT GALLERY THUMBNAILS
   ============================================== */
.product-gallery-thumb {
   @apply transition-all duration-200;
}

.product-gallery-thumb.active {
   @apply border-2 border-primary-500;
}

.product-gallery-thumb img {
   @apply transition-transform duration-300;
}

.product-gallery-thumb:hover img {
   @apply scale-105;
}

/* ==============================================
   PASSWORD PROTECTION FORM
   ============================================== */
form.post-password-form {
   @apply bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 md:p-8 shadow-soft mb-8;
}

form.post-password-form label {
   @apply block text-sm font-semibold text-gray-900 dark:text-white mb-2;
}

form.post-password-form input[type="password"] {
   @apply w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white mb-4 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition;
}

form.post-password-form input[type="submit"] {
   @apply inline-flex items-center justify-center gap-2 bg-primary-600 hover:bg-primary-700 text-white px-6 py-3 rounded-lg transition font-semibold;
}

form.post-password-form input[type="submit"]:active {
   @apply scale-95;
}

.post-password-form::before {
   content: '';
   @apply block w-16 h-16 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-700 flex items-center justify-center mb-4 mx-auto;
}

/* Password protected post content */
.post-password-required {
   @apply bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-6 md:p-8 mb-8;
}

.post-password-required::before {
   @apply block w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 grid place-items-center mx-auto mb-4;
   content: '🔒';
   font-size: 24px;
}

.post-password-required p {
   @apply text-center text-gray-700 dark:text-gray-300 mb-0;
}

/* Sticky form styles */
.password-protected-notice {
   @apply inline-flex items-center gap-2 px-3 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs font-medium rounded-full mb-4;
}

.password-protected-notice::before {
   @apply block w-4 h-4 rounded-full bg-blue-500;
   content: '';
}