@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
.cookie-banner.hidden {
  display: none;
} 
.navbar-item {
  display: inline-flex;
  align-items: center;
  height: 100%;
  text-align: center;
  justify-content: center;
  width: 80px; /* Adjust this value based on your needs */
}

@media (min-width: 1440px) {
  .product-image-container {
    width: 90%;
  }
}

@media 
(-webkit-min-device-pixel-ratio: 2) and (min-width: 1440px),
(min-resolution: 192dpi) and (min-width: 1440px) {
  .product-image-container {
    width: 90%;  /* Slightly smaller for retina to ensure crisp edges */
  }
}

@media 
(-webkit-min-device-pixel-ratio: 3) and (min-width: 1440px),
(min-resolution: 288dpi) and (min-width: 1440px) {
  .product-image-container {
    width: 60%;  /* Even smaller for 3x retina displays */
  }
}
/*! Flickity v2.3.0
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:hsla(0,0%,100%,.75);border:none;color:#333}.flickity-button:hover{background:#fff;cursor:pointer}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

.pagination {
  @apply flex justify-center items-center space-x-2 mt-4;
}

.pagination a, .pagination span.page.current {
  @apply px-3 py-1 rounded border border-gray-300 text-sm;
}

.pagination a {
  @apply text-blue-500 hover:bg-blue-50;
}

.pagination span.page.current {
  @apply bg-blue-500 text-white font-semibold;
}


/* Dark mode global overrides */
.dark,
.dark body,
html.dark {
  background-color: #111827 !important; /* gray-900 */
  color: #f9fafb !important; /* gray-50 */
}

.dark .bg-white,
.dark main {
  background-color: #111827 !important; /* gray-900 */
}

/* Only override specific card-like elements, not all divs or rounded elements */
.dark .shadow-lg,
.dark .shadow-md {
  background-color: #1f2937 !important; /* gray-800 for cards */
}

.dark .text-gray-900 {
  color: #f9fafb !important; /* gray-50 */
}

.dark .text-gray-800 {
  color: #e5e7eb !important; /* gray-200 */
}

.dark .text-gray-700 {
  color: #d1d5db !important; /* gray-300 */
}

.dark .border-gray-300 {
  border-color: #4b5563 !important; /* gray-600 */
}

.dark .border-gray-200 {
  border-color: #374151 !important; /* gray-700 */
}

/* Contact page prose styling for dark mode */
.dark .prose p {
  color: #e5e7eb !important; /* gray-200 */
}

.dark .prose strong {
  color: #f9fafb !important; /* gray-50 */
}

/* About page and general prose styling for dark mode */
.dark .prose a {
  color: #60a5fa !important; /* blue-400 */
}

.dark .prose a:hover {
  color: #93c5fd !important; /* blue-300 */
}

.dark .prose u {
  color: #e5e7eb !important; /* gray-200 */
}

.dark .prose em {
  color: #d1d5db !important; /* gray-300 */
}

.dark .prose b,
.dark .prose strong {
  color: #f9fafb !important; /* gray-50 */
}

.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6 {
  color: #f9fafb !important; /* gray-50 */
}

/* Handle all HTML elements within prose content containers */
.dark .text-gray-700 h1,
.dark .text-gray-700 h2,
.dark .text-gray-700 h3,
.dark .text-gray-700 h4,
.dark .text-gray-700 h5,
.dark .text-gray-700 h6 {
  color: #f9fafb !important; /* gray-50 */
}

.dark .text-gray-700 a {
  color: #60a5fa !important; /* blue-400 */
}

.dark .text-gray-700 a:hover {
  color: #93c5fd !important; /* blue-300 */
}

.dark .text-gray-700 strong,
.dark .text-gray-700 b {
  color: #f9fafb !important; /* gray-50 */
}

.dark .text-gray-700 em,
.dark .text-gray-700 i {
  color: #d1d5db !important; /* gray-300 */
}

.dark .text-gray-700 u {
  color: #e5e7eb !important; /* gray-200 */
}

/* Blog content styling for dark mode */
.dark .text-black {
  color: #e5e7eb !important; /* gray-200 */
}

/* Handle any hardcoded text colors in blog content */
.dark .text-black p,
.dark .text-black div,
.dark .text-black span,
.dark .text-black h1,
.dark .text-black h2,
.dark .text-black h3,
.dark .text-black h4,
.dark .text-black h5,
.dark .text-black h6 {
  color: #e5e7eb !important; /* gray-200 */
}

.dark .text-black strong,
.dark .text-black b {
  color: #f9fafb !important; /* gray-50 */
}

.dark .text-black a {
  color: #60a5fa !important; /* blue-400 */
}

.dark .text-black a:hover {
  color: #93c5fd !important; /* blue-300 */
}

/* Theme Toggle Switch Styles - CodePen Design */
.checkbox {
  opacity: 0;
  position: absolute;
}

.checkbox-label {
  background-color: #111;
  width: 50px;
  height: 26px;
  border-radius: 50px;
  position: relative;
  padding: 5px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s ease;
}

/* Different background in dark mode for better contrast */
.dark .checkbox-label {
  background-color: #374151; /* gray-700 - lighter than page background */
  border: 1px solid #4b5563; /* gray-600 border for definition */
}

.fa-moon {
  color: #f1c40f;
  width: 14px;
  height: 14px;
  display: inline-block;
}

.fa-sun {
  color: #f39c12;
  width: 14px;
  height: 14px;
  display: inline-block;
}

/* Prevent layout shifts in main container */
main.container {
  min-height: 60vh; /* Ensure minimum height to prevent shifts */
  /* Critical mobile optimizations */
  will-change: transform;
  content-visibility: auto;
  contain-intrinsic-size: 0 1000px;
}

/* Reserve space for content loading to prevent layout shifts */
main.container.mx-auto.mt-21.flex-grow {
  contain: layout style size;
  min-height: calc(100vh - 280px); /* Account for navbar (112px) and footer (168px) */
  display: block; /* Ensure block layout */
  overflow: hidden; /* Prevent content overflow causing shifts */
  position: relative;
  transform: translateZ(0); /* Force hardware acceleration */
  backface-visibility: hidden;
}

/* Prevent layout shifts in flex containers */
.flex.items-center {
  min-height: 1.5rem; /* Prevent collapse during loading */
}

/* Specific navbar height to prevent shifts */
nav .flex.items-center {
  min-height: 2rem;
}

/* Mobile menu items stable height */
.mobile-menu .flex.items-center {
  min-height: 2.5rem;
}

/* Trust seal and external images - prevent layout shifts */
img[src*="positivessl.com"] {
  display: block !important;
  width: 167px !important;
  height: 42px !important;
  max-width: none !important; /* Override any responsive image CSS */
  object-fit: contain;
}

/* Ensure all images have explicit dimensions to prevent layout shifts */
img:not([width]):not([height]) {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Force layout stability for carousel images */
.best-selling-carousel img {
  width: 100% !important;
  height: 288px !important; /* 18rem = 288px */
  object-fit: cover;
}

/* Social media icons in footer - prevent layout shifts */
.fa-facebook, .fa-instagram, .fa-pinterest {
  width: 32px;
  height: 32px;
  display: inline-block;
}

.fa-cookie-bite {
  width: 12px;
  height: 12px;
  display: inline-block;
}

.checkbox-label .ball {
  background-color: #fff;
  width: 22px;
  height: 22px;
  position: absolute;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  transition: transform 0.2s linear;
}

.checkbox:checked + .checkbox-label .ball {
  transform: translateX(24px);
}

/* Mobile menu performance optimizations */
@media (max-width: 768px) {
  /* Prevent mobile menu from causing layout shifts */
  [data-mobile-menu-target="menu"] {
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: opacity, visibility;
  }
  
  /* Optimize mobile navbar height */
  nav .h-28 {
    height: 6rem; /* 96px - consistent navbar height */
    min-height: 6rem;
  }

  /* Mobile container optimizations */
  main.container {
    contain: layout style;
    transform: translateZ(0);
  }
  
  /* Fast mobile font loading */
  body {
    font-display: swap;
  }
}