/**
 * Mobile / touch fixes — inputs, keyboards, overflow, overlays, touch targets.
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  max-width: 100%;
  /* iOS Safari: overflow-x: clip can cause hit-testing issues with fixed layers */
  overflow-x: hidden;
}

body {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* iOS: inputs below 16px zoom on focus; also helps keyboard reliability */
input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']):not([type='button']),
select,
textarea,
.form-input {
  font-size: 16px !important;
  line-height: 1.4;
  min-height: 2.75rem;
  touch-action: manipulation;
}

textarea {
  min-height: 5rem;
}

input[readonly],
textarea[readonly] {
  -webkit-user-select: text;
  user-select: text;
  cursor: default;
  opacity: 1;
  background-color: #f9fafb;
}

/* Overlays must not block taps when closed */
#email-popup.hidden,
#email-success.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#email-popup:not(.hidden),
#email-success:not(.hidden) {
  pointer-events: auto;
}

body.email-popup-open {
  overflow: hidden;
}

/* Touch-friendly controls */
.btn,
button[type='submit'],
button[type='button']:not(.p-2) {
  min-height: 2.75rem;
  touch-action: manipulation;
}

.cart-qty-stepper button {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

/* Prevent clipped / invisible button text */
.btn {
  overflow: visible;
  white-space: normal;
  text-align: center;
}

@media (max-width: 1023px) {
  .checkout-sticky-summary {
    position: static !important;
    top: auto !important;
    width: 100%;
  }

  .pdp-page {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0));
  }

  /* Sticky mobile CTA above safe area */
  .pdp-mobile-bar {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
  }
}

@media (max-width: 767px) {
  .navbar .flex.h-16 {
    gap: 0.25rem;
  }

  .navbar .text-2xl {
    font-size: 1.125rem;
    line-height: 1.3;
  }

  .navbar .flex-shrink-0 {
    min-width: 0;
    flex: 1 1 auto;
  }

  .navbar .flex.items-center.space-x-2 {
    flex-shrink: 0;
  }

  /* Grid children min-width 0 prevents horizontal blowout */
  .grid > * {
    min-width: 0;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Fallback if Tailwind build missed legacy color utilities */
.bg-herbal-green,
.bg-herbal-600 {
  background-color: #16a34a !important;
  color: #fff !important;
}
.bg-herbal-500 {
  background-color: #22c55e !important;
  color: #fff !important;
}
.bg-herbal-700 {
  background-color: #15803d !important;
  color: #fff !important;
}
.hover\:bg-herbal-dark:hover,
.hover\:bg-herbal-600:hover,
.hover\:bg-herbal-700:hover,
.bg-herbal-dark {
  background-color: #15803d !important;
}
.text-herbal-green,
.text-herbal-500 {
  color: #22c55e !important;
}
.text-herbal-600,
.text-herbal-700 {
  color: #16a34a !important;
}
.text-herbal-green:hover,
.hover\:text-herbal-dark:hover {
  color: #15803d !important;
}
.focus\:ring-herbal-green:focus,
.focus\:ring-herbal-500:focus {
  --tw-ring-color: #16a34a;
}
.border-herbal-green {
  border-color: #16a34a !important;
}

/* Checkout / payment CTAs — always visible green on mobile */
.checkout-submit-btn,
#checkout-submit,
#rzp-button {
  background: #16a34a !important;
  background-color: #16a34a !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  -webkit-appearance: none;
  appearance: none;
}

.checkout-submit-btn:disabled,
#checkout-submit:disabled {
  opacity: 0.65;
  color: #fff !important;
}

/* iOS Safari: disable shimmer overlay on primary CTA buttons */
.checkout-submit-btn::before,
#checkout-submit::before,
#rzp-button::before {
  display: none !important;
}