@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');

h1,h2,h3,h4,h5,h6,button,span, a, strong, b, ::placeholder {
   font-family: "Public Sans", sans-serif;
}

p, ul:not(.menu-list):not(.nav-list), li:not(.menu-item):not(.nav-item) {
   font-family: "Lato", sans-serif;
}

/* Menu lists use Public Sans */
.menu-list, .nav-list, .menu-item, .nav-item {
   font-family: "Public Sans", sans-serif;
}

header{
   border-bottom: 1px solid #cdcdcd87;
}

.cardContentGrid {
   border:1px solid #cdcdcd87;
}

.buttonProductFooter {
   background-color: #cdcdcd4a;
}

button.is-checked {
   background-color: #3e5b6c;
   color: #fff;
}

button.button {
   border:1px solid #0f6b7b21;
}

.burgerMenu button span {
   display: block;
   height: 3px;
   background-color: #000;
   border: 1px solid #000;
   width: 30px;
}

.burgerMenu button span.center {
   margin:5px 0
}

/* Burger Menu Animation */
.burgerMenu button {
   cursor: pointer;
   transition: all 0.3s ease;
}

.burgerMenu button.active span:nth-child(1) {
   transform: rotate(45deg) translate(5px, 5px);
}

.burgerMenu button.active span:nth-child(2) {
   opacity: 0;
}

.burgerMenu button.active span:nth-child(3) {
   transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile Drawer Styles */
#mobileDrawer {
   z-index: 9999;
}

#mobileDrawer.hidden {
   display: none;
}

/* Prevent body scroll when drawer is open */
body.drawer-open {
   overflow: hidden;
}

.card {
box-shadow: 1px -28px 29px -29px rgba(39,174,255,1);
-webkit-box-shadow: 1px -28px 29px -29px rgba(39,174,255,1);
-moz-box-shadow: 1px -28px 29px -29px rgba(39,174,255,1);
}

/* the slides */
.slick-slide {
   margin: 0 15px;
}

/* the parent */
.slick-list {
   margin: 0 -15px;
}

.follow-btn {
   border: 1px solid #dadada;
}

.slick-prev-custom,
.slick-next-custom {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: #fff;
   color: #254651;
   border: 1px solid #ccc;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   font-size: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 50;
   transition: 0.2s ease;
}

.slick-prev-custom:hover,
.slick-next-custom:hover {
   background: #254651;
   color: white;
}

.slick-prev-custom { left: -10px; }
.slick-next-custom { right: -10px; }

@media(max-width:600px) {

.slick-prev-custom {
   left: 120px;
   top: 100%;
}
.slick-next-custom {
   right: 120px;
   top: 100%;
}
}

/* Cart and Checkout Styles */
.cart-item input[type="number"]::-webkit-inner-spin-button,
.cart-item input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.cart-item input[type="number"] {
   -moz-appearance: textfield;
}

/* Form focus styles */
input:focus,
select:focus,
textarea:focus {
   box-shadow: 0 0 0 3px rgba(62, 91, 108, 0.1);
}

/* Checkout radio and checkbox styles */
input[type="radio"]:checked,
input[type="checkbox"]:checked {
   accent-color: #3e5b6c;
}

/* Button hover effects */
.btn-hover {
   transition: all 0.3s ease;
}

.btn-hover:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(62, 91, 108, 0.2);
}

/* Loading spinner for cart updates */
.loading {
   display: inline-block;
   width: 20px;
   height: 20px;
   border: 3px solid rgba(62, 91, 108, 0.3);
   border-radius: 50%;
   border-top-color: #3e5b6c;
   animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
   to { transform: rotate(360deg); }
}

/* Mobile Responsive Improvements */
@media (max-width: 768px) {
   .cart-item {
      flex-direction: column;
      gap: 1rem;
   }

   .cart-item .flex-1 {
      width: 100%;
   }

   .cardContentGrid {
      margin: 0 auto 20px;
   }

   /* Better spacing for mobile forms */
   input, select, textarea {
      font-size: 16px; /* Prevents zoom on iOS */
   }
}

@media (max-width: 640px) {
   /* Stack checkout columns on mobile */
   .lg\\:col-span-2 {
      grid-column: span 1;
   }

   /* Improve touch targets */
   button, .btn-hover {
      min-height: 44px;
   }

   /* Better mobile spacing */
   .space-y-6 > * + * {
      margin-top: 1.5rem;
   }
}