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

/*
 * Global Typography Baseline
 * Ensures consistent font rendering across all pages
 */
@layer base {
  [x-cloak] {
    display: none !important;
  }

  html {
    font-family: 'Ruddy', 'Poppins', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  body {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-weight: 400;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Ruddy', system-ui, -apple-system, sans-serif;
    font-weight: 700;
  }
}

/*
 * Custom font utilities to ensure proper font-weight mapping
 * This ensures font-medium (500) uses Poppins-Medium.ttf correctly
 */
@layer utilities {
  .font-poppins {
    font-family: 'Poppins', sans-serif;
  }
  
  .font-ruddy {
    font-family: 'Ruddy', sans-serif;
  }
  
  /* Map font-inter to Poppins for backward compatibility */
  .font-inter {
    font-family: 'Poppins', sans-serif;
  }
  
  /* Ensure font-medium uses weight 500 (Poppins-Medium.ttf) */
  .font-medium {
    font-weight: 500;
  }
  
  /* Ensure font-normal uses weight 400 (Poppins-Regular.ttf) */
  .font-normal {
    font-weight: 400;
  }
  
  /* weight 600 — requires Poppins-SemiBold.ttf in fonts.css.erb (otherwise the browser fakes 600 and looks too bold vs Figma) */
  .font-semibold {
    font-weight: 600;
  }
  
  /* Ensure font-bold uses weight 700 */
  .font-bold {
    font-weight: 700;
  }

  /*
   * Video / combo slider: guaranteed so desktop video shows without Tailwind CDN.
   * Compiled build can omit aspect-video; this ensures the about-section video has height.
   */
  .aspect-video {
    aspect-ratio: 16 / 9;
  }

  /* Horizontal scroll areas (combo slider, signatures, categories); always in compiled CSS without CDN or per-partial styles */
  .scrollbar-hide,
  .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar,
  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }
}

/*
 * Big Brand Motion - Smooth transitions and micro-interactions
 * Uses GPU-friendly transforms (opacity, transform) instead of layout properties
 * Respects prefers-reduced-motion for accessibility
 */
@layer components {
  /* Button hover/active states - subtle scale + shadow */
  .btn-motion {
    @apply transition-all duration-200 ease-out;
    transform: translateZ(0); /* GPU acceleration */
  }
  
  .btn-motion:hover:not(:disabled) {
    transform: translateZ(0) scale(1.02);
  }
  
  .btn-motion:active:not(:disabled) {
    transform: translateZ(0) scale(0.98);
  }
  
  /* Card hover elevation (desktop only) */
  .card-motion {
    @apply transition-all duration-300 ease-out;
    transform: translateZ(0);
  }
  
  @media (hover: hover) and (pointer: fine) {
    .card-motion:hover {
      transform: translateZ(0) translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }
  
  /* Modal/Drawer/Bottom sheet smooth open/close */
  .modal-enter {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  
  .modal-enter-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .modal-exit {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  
  .modal-exit-active {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.2s ease-in, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Bottom sheet specific (slides up from bottom) */
  .bottom-sheet-enter {
    opacity: 0;
    transform: translateY(100%);
  }
  
  .bottom-sheet-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .bottom-sheet-exit {
    opacity: 1;
    transform: translateY(0);
  }
  
  .bottom-sheet-exit-active {
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.2s ease-in, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Fade in for page/section reveals */
  .fade-in {
    opacity: 0;
    animation: fadeIn 0.6s ease-out forwards;
  }
  
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }
  
  /* Respect reduced motion preference */
  @media (prefers-reduced-motion: reduce) {
    .btn-motion,
    .card-motion,
    .modal-enter-active,
    .modal-exit-active,
    .bottom-sheet-enter-active,
    .bottom-sheet-exit-active,
    .fade-in {
      transition: none !important;
      animation: none !important;
      transform: none !important;
    }
    
    .btn-motion:hover:not(:disabled),
    .btn-motion:active:not(:disabled) {
      transform: none;
    }
    
    @media (hover: hover) and (pointer: fine) {
      .card-motion:hover {
        transform: none;
        box-shadow: none;
      }
    }
  }
}

/*
 * Storefront card and modal parts used by several partials. Plain classes
 * rather than utility strings, because these partials are re-rendered in
 * every cart Turbo Stream and the same ~300 bytes would repeat per render.
 */
@layer components {
  /* The size selector (menu cards, signature strip, checkout rows), after the
     Figma chip: 4px / 8px padding, 4px radius, #EEEEEE at 93.33% (the EE
     alpha), 18px tall. The label is 8px, not the reference 6.9px: the
     smallest size that keeps "200g" / "4pcs" legible and still fits
     "Medium 8pcs" beside a 3-digit price. ::after, beneath the label, extends
     the tap area 7px up and down into the gaps around it. */
  .size-chip {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #EEEEEEEE;
    color: #1B0101;
    font-family: 'Poppins', sans-serif;
    font-size: 8px;
    font-weight: 500;
    line-height: 10px;
    letter-spacing: -0.18px;
    text-align: left;
    cursor: pointer;
  }
  .size-chip::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -7px 0;
  }
  .size-chip:focus-visible {
    outline: 2px solid #03773C;
    outline-offset: 2px;
  }

  /* The heart in a card's 13px icon row: a 13px-high icon with an invisible
     33px tap area beneath it. */
  .card-heart img {
    display: block;
    height: 13px;
    width: auto;
  }
  .card-heart :is(a, button) {
    position: relative;
    isolation: isolate;
    display: block;
  }
  .card-heart :is(a, button)::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -10px;
  }

  /* Item-details modal. The fixed overlay is the scroll container; this
     column is at least as tall as it, centres the card when it fits and lets
     the overlay scroll when it does not, clear of the notch and home
     indicator. */
  .item-modal-column {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  }
  /* Close rides the bottom of the visible area while the card is taller than
     it, instead of waiting below the last size. */
  .item-modal-close {
    position: sticky;
    bottom: max(12px, env(safe-area-inset-bottom));
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
  .item-modal-close:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
  }
}

/*
@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}
*/
/*
 * Phase 4a (Cart Instant UX) - the stable cart line shell's state visibility.
 *
 * WHY THIS RULE EXISTS
 * The shell renders BOTH states - Add and stepper - and the SERVER chooses which
 * one is shown by putting the HTML `hidden` attribute on the other. Tailwind's
 * Preflight already ships `[hidden] { display: none }`, so that looked
 * sufficient. It is not:
 *
 *     [hidden] { display: none }    <- Preflight, specificity 0-1-0
 *     .flex    { display: flex }    <- utility,   specificity 0-1-0
 *
 * The stepper carries `flex` for its own layout. Equal specificity means SOURCE
 * ORDER decides, Tailwind emits utilities after Preflight, and so `.flex` won:
 * a hidden stepper computed to `display: flex` and a cart line at quantity 0
 * showed the Add button and an "- 00 +" stepper at the same time.
 *
 * Scoped to the shell's state elements and marked !important on purpose. This is
 * the one construct that cannot be beaten by a display utility, whatever its
 * specificity and whatever order it is emitted in - which is the property the
 * shell needs, because a state element is free to carry flex, grid or any other
 * display class for its own layout.
 *
 * The server still decides. This only makes `hidden` mean hidden.
 */
[data-cart-line-state][hidden] {
  display: none !important;
}

/*
 * Phase 5 - the cart badge, for exactly the same reason.
 *
 * The badge became a stable shell so an optimistic count could flip it without
 * fabricating its styling, and its class list carries `flex`. That is the same
 * collision as above, so it needs the same rule: without it a hidden badge
 * computes to display:flex and an empty red dot sits over the cart icon.
 */
[data-cart-count-badge][hidden] {
  display: none !important;
}
/* Custom styling for ComboVariantItemsField to match Administrate UI */

.combo-variant-items-field {
  width: 100%;
  max-width: 100%;
}

.combo-variant-items-field .field-unit__label {
  margin-bottom: 8px;
}

.combo-variant-items-field .field-unit__label label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.combo-variant-items-field .field-unit__field {
  width: 100%;
  max-width: 100%;
}

/* Section styling */
.combo-items-section {
  margin-bottom: 2rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.combo-items-section__header {
  padding: 12px 16px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.combo-items-section__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.combo-items-section__body {
  padding: 16px;
}

.combo-items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.combo-items-section__footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

/* Item row styling */
.combo-item-row {
  display: grid;
  grid-template-columns: 1fr 100px 120px;
  gap: 12px;
  align-items: start;
  padding: 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  transition: background-color 0.15s ease-in-out;
}

.combo-item-row:hover {
  background: #f3f4f6;
}

.combo-item-row__field {
  display: flex;
  flex-direction: column;
}

.combo-item-row__field--item {
  min-width: 0; /* Allow flex shrinking */
}

.combo-item-row__field--quantity {
  flex-shrink: 0;
}

.combo-item-row__actions {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Form inputs */
.combo-variant-items-field .form__input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background-color: #ffffff;
  font-size: 14px;
  line-height: 1.5;
  color: #111827;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.combo-variant-items-field .form__input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Choices.js styling */
.combo-variant-items-field .choices {
  margin-bottom: 0;
  width: 100%;
}

.combo-variant-items-field .choices__inner {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background-color: #ffffff;
  font-size: 14px;
  min-height: 38px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.combo-variant-items-field .choices.is-focused .choices__inner,
.combo-variant-items-field .choices.is-open .choices__inner {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.combo-variant-items-field .choices__input {
  font-size: 14px;
  padding: 4px 0;
  margin: 0;
}

.combo-variant-items-field .choices__input--cloned {
  padding: 4px 0;
  margin: 0;
}

.combo-variant-items-field .choices__list--dropdown {
  border: 1px solid #d1d5db;
  border-radius: 4px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  margin-top: 4px;
  z-index: 1000;
}

.combo-variant-items-field .choices__list--dropdown .choices__item {
  padding: 8px 12px;
  font-size: 14px;
}

.combo-variant-items-field .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #eff6ff;
  color: #1e40af;
}

.combo-variant-items-field .choices__placeholder {
  color: #9ca3af;
  opacity: 1;
}

.combo-variant-items-field .choices__button {
  background-color: transparent;
  border: none;
  padding: 0;
  margin-left: 4px;
  opacity: 0.5;
  transition: opacity 0.15s ease-in-out;
}

.combo-variant-items-field .choices__button:hover {
  opacity: 1;
}

/* Button styling */
.combo-variant-items-field .button {
  display: inline-block;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  text-decoration: none;
  background-color: #3b82f6;
  color: #ffffff;
}

.combo-variant-items-field .button:hover {
  background-color: #2563eb;
}

.combo-variant-items-field .button--danger {
  background-color: #ef4444;
  color: #ffffff;
}

.combo-variant-items-field .button--danger:hover {
  background-color: #dc2626;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .combo-item-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .combo-item-row__actions {
    justify-content: flex-start;
  }
}
@font-face {
    font-family: 'Poppins';
    src: url(/assets/Poppins/Poppins-Regular-4132d2d2b9443d42422ebb2769b3113c157e0cf08c91cfe555a6da5ac0a9c762.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'Poppins';
    src: url(/assets/Poppins/Poppins-Medium-a0b175e6a264afe1ce1dd92dfed7dce5dc11456840b0485ba483b2af54814baf.ttf) format('truetype');
    font-weight: 500;
    font-style: normal;
  }

  @font-face {
    font-family: 'Poppins';
    src: url(/assets/Poppins/Poppins-SemiBold-a27799af8da2e1b65bc12769eb5f8da47b0689e24f5cf655a4fb58db80bd90b7.ttf) format('truetype');
    font-weight: 600;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Poppins';
    src: url(/assets/Poppins/Poppins-Bold-542ca15de37ab3bcf41f3ee5fdb9a8a4ba3346a27998196101a9a01a0f4ce0d8.ttf) format('truetype');
    font-weight: bold;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Ruddy';
    src: url(/assets/Ruddy/Ruddy-Bold-0adf6362811fe3b85ac42afd3d464d2addaeb73273a185d27bba1997822ba6d5.ttf) format('truetype');
    font-weight: bold;
    font-style: normal;
  }
  
/* P8C-3 - the subtle pending state for a lazy item-modal trigger.
 *
 * Opening a modal used to be instant because the markup was already on the
 * page. It is now fetched, so the tap needs an acknowledgement or a slow
 * connection makes the button look dead - the same failure P8C-2 removed from
 * category taps. This is the whole treatment: no spinner, no skeleton, no
 * overlay, and no new component. One attribute, set for the duration of the
 * request and cleared on every terminal path.
 *
 * Plain CSS rather than a Tailwind arbitrary variant, because the attribute is
 * added at runtime by JavaScript and never appears in a template for Tailwind's
 * scanner to find - a `data-[...]` utility would simply never be generated.
 *
 * Picked up automatically: application.css is a manifest with `require_tree .`.
 */
[data-item-modal-pending] {
  opacity: 0.6;
  cursor: wait;
}

@media (prefers-reduced-motion: no-preference) {
  [data-item-modal-pending] {
    transition: opacity 120ms ease-out;
  }
}
/*
 * 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.
 *


 */