/* menu.css — small supplements for /order/menu.
   The bulk of styling comes from the shared compiled screen.css (Tailwind utilities).
   Keep this file minimal. */

/* Accessible-but-hidden headings */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Add-to-cart toast */
#pj-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: #2b6a2f;            /* papaGreen */
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: 9999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 1000;
}
#pj-toast.pj-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- crust slider (dependency-free Swiper) ----------
   The markup reuses the legacy Swiper DOM (.swiper > .swiper-wrapper >
   .swiper-slide) for a 1:1 look, but Swiper.js is NOT loaded. We restore
   horizontal scrolling natively. Scoped via .pj-swiper so it never touches
   any other compiled Swiper styles. */
.pj-swiper.swiper {
  overflow-x: auto;
  overflow-y: visible;          /* let the +button overhang the top edge */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* .swiper-horizontal sets touch-action:pan-y which blocks horizontal
     touch-swipe; re-enable both axes so finger-swipe scrolls the track. */
  touch-action: pan-x pan-y;
  cursor: grab;
  /* Don't select card text while swiping/dragging. */
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.pj-swiper .swiper-slide img { -webkit-user-drag: none; user-drag: none; }

.pj-swiper.swiper.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;       /* free dragging; snap restored on release */
  scroll-behavior: auto;
}
.pj-swiper.swiper.is-dragging * { cursor: grabbing; }
.pj-swiper.swiper::-webkit-scrollbar { height: 0; }

.pj-swiper .swiper-wrapper {
  display: flex;
  flex-direction: row;
  transform: none !important;   /* kill any inline Swiper translate */
}
.pj-swiper .swiper-slide { scroll-snap-align: start; }
/* Make the whole card keyboard-focusable like a link. */
.pj-swiper [data-href]:focus-visible {
  outline: 2px solid rgb(45 93 42);
  outline-offset: 2px;
}

/* ---------- cart line thumbnails ----------
   Cart and checkout summary share renderCart() from menu.js. Keep thumbnails
   square and opt out of flex cross-axis stretching. */
body[data-app="pj-menu"] [data-cart-list] .pj-cart-line,
body[data-app="pj-checkout"] [data-cart-list] .pj-cart-line {
  align-items: flex-start;
}

body[data-app="pj-menu"] [data-cart-list] .pj-cart-image,
body[data-app="pj-checkout"] [data-cart-list] .pj-cart-image {
  display: block;
  width: 72px;
  height: 72px;
  min-width: 72px;
  max-width: 72px;
  flex: 0 0 72px;
  aspect-ratio: 1 / 1;
  align-self: flex-start;
  object-fit: cover;
  object-position: center;
  background: rgb(249 243 237);
}

/* ---------- pizza builder (card design, matches papajohns.com) ----------

   Brand colors taken from the compiled Tailwind palette (app.css):
     papaGreen-base rgb(45 93 42) · doughie-100 rgb(249 243 237)
     orange-base rgb(255 190 32) · maroon-base rgb(113 5 0)
     doughie-900 rgb(194 155 122) · black-50 rgb(249 249 249)
     black-300 rgb(209 209 209) · gray-500 rgb(107 114 128)            */

.bld-check { width: 16px; height: 16px; display: block; }

/* --- Size: horizontal cards with the orange S/M/L/XL badge --- */
.bld-size {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  cursor: pointer;
  padding: 12px 12px;
  border: 2px solid rgb(209 209 209);
  border-radius: 1rem;
  background: rgb(249 249 249);
  height: 128px;
  flex: 1 1 0;
  min-width: 0;
  transition: border-color .2s ease, background .2s ease;
  user-select: none;
}
@media (min-width: 768px) {
  .bld-size { flex: 0 0 auto; min-width: 96px; padding: 12px 16px; }
}
.bld-size:hover { border-color: rgb(45 93 42); }
.bld-size.is-active { background: rgb(249 243 237); border-color: rgb(45 93 42); font-weight: 700; }
.bld-size__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-top: 4px;
  background: rgb(255 190 32);
  border: 2px solid rgb(194 155 122);
  border-radius: 9999px;
  color: rgb(113 5 0);
  font-weight: 500;
  line-height: 1;
  font-size: 1.4rem;
}
.bld-size__slices {
  margin-top: 10px;
  color: rgb(18 20 18);
  font-size: 1.05rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.15;
}
.bld-size__delta {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: .8125rem;
  line-height: 1;
  color: rgb(107 114 128);
}
.bld-size__check {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  border: 2px solid #fff;
  background: rgb(45 93 42);
  align-items: center;
  justify-content: center;
  display: none;
}
.bld-size.is-active .bld-size__check { display: flex; }

/* --- Crust / Sauce: full-width selectable rows --- */
.bld-row {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  padding: 12px 16px;
  min-height: 80px;
  border: 2px solid rgb(209 209 209);
  border-radius: 1rem;
  background: rgb(249 249 249);
  transition: border-color .2s ease, background .2s ease;
  user-select: none;
}
.bld-row:hover { border-color: rgb(45 93 42); }
.bld-row.is-active { background: rgb(249 243 237); border-color: rgb(45 93 42); font-weight: 700; }
.bld-row.is-disabled { opacity: .45; pointer-events: none; }
.bld-row--plain { cursor: default; }
.bld-row--plain:hover { border-color: rgb(209 209 209); }
.bld-row__thumb {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 9999px;
  overflow: hidden;
  background: rgb(237 237 237);
}
.bld-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bld-row__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 0 12px; min-width: 0; }
.bld-row__name { color: rgb(18 20 18); font-size: 1rem; line-height: 1.2; }
.bld-row__cal { color: rgb(18 20 18); font-size: .8125rem; line-height: 1.4; font-weight: 400; }
.bld-row__price { flex: 0 0 auto; padding: 0 10px; color: rgb(107 114 128); font-size: .8125rem; line-height: 1; white-space: nowrap; }
.bld-radio {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  border: 1px solid rgb(209 209 209);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.bld-row.is-active .bld-radio { border: 2px solid rgb(45 93 42); background: rgb(45 93 42); }
.bld-radio .bld-check { display: none; }
.bld-row.is-active .bld-radio .bld-check { display: block; }

/* --- Toppings: segmented None / Regular / Extra control --- */
.bld-amt-group {
  flex: 0 0 auto;
  display: inline-flex;
  border: 1px solid rgb(209 209 209);
  border-radius: 9999px;
  overflow: hidden;
  background: #fff;
}
.bld-amt {
  font-family: inherit;
  font-size: .8125rem;
  line-height: 1;
  padding: 9px 13px;
  border: 0;
  border-left: 1px solid rgb(209 209 209);
  background: #fff;
  color: rgb(51 53 51);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.bld-amt:first-child { border-left: 0; }
.bld-amt:hover { background: rgb(249 243 237); }
.bld-amt.is-active { background: rgb(45 93 42); color: #fff; }