/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import "tailwind/application.css";

/* Screen reader only utility class */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Global button cursor styles - buttons and all their children must always show pointer */
button,
button *,
input[type="submit"],
input[type="submit"] *,
input[type="button"],
input[type="button"] *,
input[type="reset"],
input[type="reset"] *,
.btn,
.btn *,
[role="button"],
[role="button"] * {
  cursor: pointer !important;
}

/* Ensure all clickable elements have pointer cursor */
a,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn,
[role="button"],
[onclick],
[data-action]:not(input):not(textarea):not(select):not(form):not(.product-item):not(.modal-content):not(#product-details-modal):not(#product-picker-modal):not([data-controller]) {
  cursor: pointer;
}

/* Ensure all text elements inside links show pointer cursor */
a,
a *,
a p,
a span,
a div,
a h1,
a h2,
a h3,
a h4,
a h5,
a h6 {
  cursor: pointer !important;
}

/* Ensure all elements inside clickable labels show pointer cursor (only labels with inputs or for attribute, not all labels) */
label[for],
label:has(input[type="radio"]),
label:has(input[type="checkbox"]),
label[for] *,
label:has(input[type="radio"]) *,
label:has(input[type="checkbox"]) *,
label[for] p,
label[for] span,
label[for] div,
label:has(input[type="radio"]) p,
label:has(input[type="radio"]) span,
label:has(input[type="radio"]) div,
label:has(input[type="checkbox"]) p,
label:has(input[type="checkbox"]) span,
label:has(input[type="checkbox"]) div {
  cursor: pointer !important;
}

/* Remove pointer cursor from product items themselves (not buttons) */
.product-item {
  cursor: default !important;
}

/* Remove pointer cursor from modal containers */
#product-details-modal,
#product-picker-modal {
  cursor: default !important;
}

/* Remove pointer cursor from modal content areas */
#product-details-modal .modal-content,
#product-picker-modal .modal-content {
  cursor: default !important;
}

/* Ensure all interactive elements inside modals have pointer cursor */
.product-item button,
.product-item a,
#product-details-modal button,
#product-details-modal a,
#product-details-modal img[data-action],
#product-details-modal [onclick],
#product-details-modal .cursor-pointer,
#product-details-modal #product-details-thumbnail-container img,
#product-details-modal #fullscreenThumbnailContainer img,
#product-picker-modal button,
#product-picker-modal a {
  cursor: pointer !important;
}

/* Text elements should show I-beam cursor for selection (only inline text elements) */
#product-details-modal p,
#product-details-modal span:not([role="button"]):not(.btn),
#product-details-modal h1,
#product-details-modal h2,
#product-details-modal h3,
#product-details-modal h4,
#product-details-modal h5,
#product-details-modal h6,
#product-details-modal label:not([for]),
#product-details-modal #product-details-description,
#product-details-modal #product-details-brand,
#product-details-modal #product-details-name,
#product-picker-modal p,
#product-picker-modal span:not([role="button"]):not(.btn),
#product-picker-modal h1,
#product-picker-modal h2,
#product-picker-modal h3,
#product-picker-modal h4,
#product-picker-modal h5,
#product-picker-modal h6,
#product-picker-modal label:not([for]),
.product-item .text-sm.font-medium {
  cursor: text;
}

/* Override: Links and clickable labels should always show pointer cursor (must come after text cursor rules) */
a p,
a span,
a div,
a h1,
a h2,
a h3,
a h4,
a h5,
a h6 {
  cursor: pointer !important;
}

/* Buttons must always show pointer cursor, overriding any text cursor rules */
button p,
button span,
button div,
button h1,
button h2,
button h3,
button h4,
button h5,
button h6,
.btn p,
.btn span,
.btn div,
[role="button"] p,
[role="button"] span,
[role="button"] div {
  cursor: pointer !important;
}

/* Input field sharp corners */
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  border-radius: 0 !important;
}

/* Button sharp corners */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn {
  border-radius: 0 !important;
}

/* Hide native number input spinners */
.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.no-spinners[type=number] {
  -moz-appearance: textfield;
}


/* Disabled stepper button styles */
button.disabled,
button[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

button.disabled:hover,
button[disabled]:hover {
  background-color: inherit !important;
  color: inherit !important;
}

/* Fix unwanted margin underneath increment buttons */
.flex.items-center button:last-child {
  margin-bottom: 0 !important;
  align-self: stretch !important;
}

/* Remove rounded corners from product modals */
#productModal .modal-content {
  border-radius: 0 !important;
}

/* Remove top, left, and right padding from modal content for full width */
#productModal .modal-content {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Light grey background for modal title - full width and to top */
#productModal .border-b.border-gray-200 {
  background-color: #f9fafb !important; /* Very light grey */
  margin: 0 !important;
  width: 100% !important;
  border-radius: 0 !important;
}

/* Remove rounded corners from subscription price containers */
#modalSubscriptionPricing {
  border-radius: 0 !important;
}

/* Remove pointer cursor from subscription card itself and all its children by default */
.subscription-card,
.subscription-card * {
  cursor: default !important;
}

/* Ensure interactive elements inside subscription cards still have pointer cursor */
.subscription-card a,
.subscription-card button:not([disabled]),
.subscription-card input[type="checkbox"],
.subscription-card input[type="submit"],
.subscription-card input[type="button"],
.subscription-card label {
  cursor: pointer !important;
}

/* Subtle scrollbar for subscription cards */
.subscription-card .max-h-64.overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: rgba(156,163,175,0.4) transparent;
}
.subscription-card .max-h-64.overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}
.subscription-card .max-h-64.overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
}
.subscription-card .max-h-64.overflow-y-auto::-webkit-scrollbar-thumb {
  background-color: rgba(156,163,175,0.4);
  border-radius: 0;
}

/* Safe area modal positioning for mobile browsers */
.modal-safe-area {
  top: env(safe-area-inset-top, 0);
  right: env(safe-area-inset-right, 0);
  bottom: env(safe-area-inset-bottom, 0);
  left: env(safe-area-inset-left, 0);
}

/* Modal container that respects safe areas */
.modal-container-safe {
  padding-top: 0;
  padding-right: max(1rem, env(safe-area-inset-right, 0));
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0));
  padding-left: max(1rem, env(safe-area-inset-left, 0));
}

/* Modal height that accounts for safe areas */
.modal-height-safe {
  max-height: calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0) - 2rem);
}

/* Mobile full-screen modal */
@media (max-width: 768px) {
  .modal-height-safe {
    max-height: 100vh;
    height: 100vh;
    max-width: 100vw;
    width: 100vw;
  }
  
  .modal-container-safe {
    padding: 0;
  }
  
  /* Full width on mobile only - applies to both productModal and product-details-modal */
  #productModal .modal-content,
  #product-details-modal > div.modal-content {
    max-width: 100vw !important;
    width: 100vw !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important; /* Dynamic viewport height - accounts for browser UI */
    max-height: 100dvh !important;
  }
  
  /* Modal header stays at top */
  #productModal .flex-shrink-0,
  #product-details-modal .flex-shrink-0 {
    flex-shrink: 0 !important;
  }
  
  /* Content area takes remaining space */
  #productModal .flex-1.overflow-y-auto,
  #product-details-modal .flex-1.overflow-y-auto {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important; /* Allow flexbox to shrink */
  }
  
  /* Fixed bottom section stays at bottom with compact sizing */
  #productModal .border-t.border-gray-200.bg-white.flex-shrink-0,
  #product-details-modal #product-details-cart-section {
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    min-height: 140px !important; /* Compact height for small devices */
    margin-top: auto !important;
  }
  
  /* Minimal padding for small devices with safe area support */
  #productModal #modalAddToCartForm,
  #product-details-modal #product-details-cart-form {
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0)) !important;
    min-height: 100px !important; /* Compact form height */
  }
  
  /* Ensure product details modal cart button has safe area padding */
  #product-details-modal #product-details-add-to-cart {
    margin-bottom: 0 !important; /* Remove margin since form handles padding */
  }
  
  /* Product details modal specific adjustments */
  #product-details-modal {
    /* Use dynamic viewport height to account for browser UI */
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  
  /* Ensure the modal backdrop respects safe areas on mobile */
  #product-details-modal.modal-safe-area {
    top: 0 !important;
    bottom: 0 !important;
  }
  
  /* Full-screen image modal mobile optimization */
  #imageModal {
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
  }
  
  #imageModal .relative.max-w-6xl {
    max-height: 100dvh !important;
    height: 100dvh !important;
  }
  
  #imageModal #modalImage {
    max-height: calc(100dvh - 8rem) !important; /* Account for nav buttons and thumbnails */
  }
  
  #imageModal #fullscreenThumbnailContainer {
    bottom: max(1rem, env(safe-area-inset-bottom, 0)) !important;
  }
  
  #imageModal button[onclick="closeImageModal()"] {
    top: max(1rem, env(safe-area-inset-top, 0)) !important;
    right: max(1rem, env(safe-area-inset-right, 0)) !important;
  }
}

/* Body safe area padding to prevent content from being cut off */
body {
  padding-top: env(safe-area-inset-top, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
}

/* Safe area utilities for specific elements */
.safe-top {
  padding-top: max(0.5rem, env(safe-area-inset-top, 0));
}

.safe-bottom {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0));
}

.safe-left {
  padding-left: max(0.5rem, env(safe-area-inset-left, 0));
}

.safe-right {
  padding-right: max(0.5rem, env(safe-area-inset-right, 0));
}

/* Fixed positioning that respects safe areas */
.fixed-safe-bottom {
  bottom: env(safe-area-inset-bottom, 0);
}

.fixed-safe-top {
  top: env(safe-area-inset-top, 0);
}

/* Mobile-optimized button spacing and sizing */
@media (max-width: 768px) {
  /* Ensure buttons have adequate touch targets */
  button, .btn, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Better spacing for mobile buttons */
  .btn-group button + button,
  .flex button + button,
  .space-x-2 button + button,
  .space-x-3 button + button,
  .space-x-4 button + button {
    margin-left: 0.75rem;
  }
  
  /* Mobile-friendly modal padding */
  .modal-content {
    padding: 1rem;
  }
  
  /* Adjust modal positioning on mobile - position at top instead of center */
  .modal-container-safe {
    padding-top: 0 !important;
    align-items: flex-start !important;
  }
  
  /* Product details modal container alignment on mobile */
  #product-details-modal.modal-container-safe {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  
  /* Ensure modal buttons have proper spacing from bottom */
  .modal-content button:last-child,
  #modalAddToCartButton {
    margin-bottom: max(1rem, env(safe-area-inset-bottom, 0) + 0.5rem);
  }
  
  /* Ensure modal add to cart form has adequate bottom padding */
  #modalAddToCartForm {
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0) + 0.5rem) !important;
  }
  
  /* No additional spacing rules needed - standardized HTML structure handles spacing */
  
  /* Ensure sticky elements respect safe areas */
  .sticky {
    top: calc(env(safe-area-inset-top, 0) + var(--sticky-offset, 0px));
  }
  
  /* Fixed bottom elements (like cart buttons) */
  .fixed.bottom-0 {
    bottom: env(safe-area-inset-bottom, 0);
    padding-bottom: 0.5rem;
  }
  
  /* Prevent horizontal overflow on mobile */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Better mobile form spacing */
  .space-y-4 > * + * {
    margin-top: 1.25rem;
  }
  
  /* Improved mobile modal sizing */
  .max-w-4xl {
    max-width: calc(100vw - env(safe-area-inset-left, 0) - env(safe-area-inset-right, 0) - 2rem);
  }
  
  /* Mobile-friendly input sizing */
  input[type="number"], input[type="text"], input[type="email"], 
  input[type="password"], input[type="tel"], textarea, select {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
  }

  /* Address form specific mobile optimizations */
  #address-form input, #address-form select, #address-form textarea {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 16px;
  }

  /* Better button touch targets on mobile */
  #address-form button, #address-form .btn {
    min-height: 48px;
    padding: 12px 24px;
    font-size: 16px;
  }
  
  /* Cart-specific mobile improvements */
  .cart-item-row {
    padding: 1rem;
  }
  
  .cart-quantity-input {
    width: 3.5rem;
    text-align: center;
    font-size: 14px;
  }
  
  .cart-remove-btn {
    padding: 0.5rem;
    border-radius: 0.5rem;
  }
  
  .cart-remove-btn:hover {
    background-color: rgba(239, 68, 68, 0.1);
  }
  
  /* Improve cart summary on mobile */
  .cart-summary {
    position: sticky;
    bottom: env(safe-area-inset-bottom, 0);
  }
  
  /* Consistent page container styling */
  .page-container {
    padding-left: max(1rem, env(safe-area-inset-left, 0));
    padding-right: max(1rem, env(safe-area-inset-right, 0));
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0));
  }
  
  /* Mobile-first button group styling */
  .button-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  @media (min-width: 640px) {
    .button-group {
      flex-direction: row;
      align-items: center;
    }
  }
  
  /* Ensure consistent mobile table behavior */
  .mobile-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Mobile navigation improvements */
  .mobile-nav-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .mobile-nav-tabs::-webkit-scrollbar {
    display: none;
  }
}

/* Component Classes for Repeated Patterns */
/* Text shadow for hero sections */
.text-shadow-dark {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Subtle overlay with backdrop blur */
.overlay-subtle {
  background-color: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(1px);
}

/* Overlay for images (conditional darkness) */
.overlay-light {
  background-color: rgba(0, 0, 0, 0.2);
}

.overlay-dark {
  background-color: rgba(0, 0, 0, 0.5);
}

/* FINAL OVERRIDE: Buttons, links, and clickable labels and all their children must always show pointer cursor, overriding any text cursor rules */
/* This must come at the very end to override Tailwind base styles and any other rules */
button *,
button p,
button span,
button div,
button h1,
button h2,
button h3,
button h4,
button h5,
button h6,
.btn *,
.btn p,
.btn span,
.btn div,
.btn h1,
.btn h2,
.btn h3,
.btn h4,
.btn h5,
.btn h6,
[role="button"] *,
[role="button"] p,
[role="button"] span,
[role="button"] div,
[role="button"] h1,
[role="button"] h2,
[role="button"] h3,
[role="button"] h4,
[role="button"] h5,
[role="button"] h6,
input[type="submit"] *,
input[type="button"] *,
input[type="reset"] *,
a *,
a p,
a span,
a div,
a h1,
a h2,
a h3,
a h4,
a h5,
a h6,
label[for],
label[for] *,
label[for] p,
label[for] span,
label[for] div,
label:has(input[type="radio"]),
label:has(input[type="radio"]) *,
label:has(input[type="radio"]) p,
label:has(input[type="radio"]) span,
label:has(input[type="radio"]) div,
label:has(input[type="checkbox"]),
label:has(input[type="checkbox"]) *,
label:has(input[type="checkbox"]) p,
label:has(input[type="checkbox"]) span,
label:has(input[type="checkbox"]) div {
  cursor: pointer !important;
}