/* =========================================================================
 * Mobile Slide-Up Cart Review Drawer & Touch Ergonomics
 * ========================================================================= */

.patron-cart-drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.15s ease-out;
}

.patron-cart-drawer-sheet {
  background: #111827;
  border-top: 2.5px solid var(--primary);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 580px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.9);
  color: #f8fafc;
  animation: slideUpFade 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

/* Tactile Pill Drag Handle */
.drawer-drag-handle {
  width: 44px;
  height: 5px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  margin: 10px auto 2px auto;
  cursor: grab;
}

.patron-cart-header {
  padding: 12px 20px 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.patron-cart-header-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
}

.patron-cart-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 1.3rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.15s ease;
}

.patron-cart-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.patron-cart-body {
  padding: 10px 14px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Dining Mode Selector Bar */
.patron-cart-order-type-bar {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.patron-cart-type-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.patron-cart-type-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.order-type-chip-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-main);
  padding: 5px 4px;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s ease;
  min-height: 34px;
  white-space: nowrap;
}

.order-type-chip-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--primary);
}

.order-type-chip-btn.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 2px 10px var(--primary-glow);
  font-weight: 800;
}

/* Cart Items List & Cards */
.patron-cart-items-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.patron-cart-item-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.patron-cart-item-main-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.patron-cart-item-info {
  flex: 1;
}

.patron-cart-item-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.patron-cart-item-name {
  font-weight: 800;
  font-size: 0.95rem;
  color: #ffffff;
}

.patron-cart-portion-tag {
  background: rgba(255, 107, 0, 0.15);
  border: 1px solid rgba(255, 107, 0, 0.3);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
}

.patron-cart-item-modifiers {
  font-size: 0.75rem;
  color: #38bdf8;
  margin-top: 3px;
  line-height: 1.3;
}

.patron-cart-item-notes {
  font-size: 0.75rem;
  color: #facc15;
  margin-top: 2px;
  font-style: italic;
}

.patron-cart-item-total {
  font-weight: 900;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--primary);
  white-space: nowrap;
}

/* Actions Row: Edit, Stepper, Delete */
.patron-cart-item-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  gap: 8px;
}

.patron-cart-edit-btn {
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 6px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  transition: all 0.15s ease;
}

.patron-cart-edit-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  transform: translateY(-1px);
}

.patron-cart-qty-stepper {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
}

.patron-cart-stepper-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  width: 38px;
  height: 36px;
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.patron-cart-stepper-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--primary);
}

.patron-cart-stepper-btn:active {
  background: rgba(255, 255, 255, 0.25);
}

.patron-cart-stepper-val {
  min-width: 24px;
  text-align: center;
  font-weight: 900;
  font-size: 0.92rem;
  font-family: var(--font-mono);
  color: #ffffff;
}

.patron-cart-delete-btn {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: all 0.15s ease;
}

.patron-cart-delete-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  transform: scale(1.05);
}

/* Fiscal Total Card */
.patron-cart-fiscal-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.patron-cart-fiscal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #94a3b8;
}

.patron-cart-fiscal-row .fiscal-val {
  font-weight: 700;
  font-family: var(--font-mono);
  color: #e2e8f0;
}

.patron-cart-fiscal-row.fiscal-total-row {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 8px;
  margin-top: 4px;
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffffff;
}

.patron-cart-fiscal-row.fiscal-total-row .fiscal-total-val {
  color: #00e676;
  font-size: 1.25rem;
  font-family: var(--font-mono);
}

/* Action Footer with Safe-Area Padding */
.patron-cart-footer {
  padding: 14px 18px max(18px, env(safe-area-inset-bottom)) 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  gap: 12px;
}

.patron-cart-continue-btn {
  flex: 1;
  border-radius: 12px;
  font-weight: 800;
  min-height: 48px;
}

.patron-cart-submit-btn {
  flex: 2;
  font-weight: 900;
  border-radius: 12px;
  font-size: 0.95rem;
  min-height: 48px;
  box-shadow: 0 0 20px rgba(0, 230, 118, 0.35);
  background: linear-gradient(135deg, #00e676, #059669);
  border: none;
  color: #000000;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.patron-cart-submit-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 0 26px rgba(0, 230, 118, 0.55);
}

.patron-cart-submit-btn:active {
  transform: scale(0.98);
}

/* ==========================================================================
   🚨 DIGITAL COASTER PAGER & ZERO-COST READY ALERT OVERLAY
   ========================================================================== */
.patron-coaster-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(10px);
  padding: 16px;
  animation: coasterFadeIn 0.3s ease-out;
}

@keyframes coasterFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.patron-coaster-card {
  background: linear-gradient(145deg, #181c24, #10131a);
  border: 3px solid #ff9f0a;
  border-radius: 28px;
  max-width: 460px;
  width: 100%;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 0 50px rgba(255, 159, 10, 0.5), 0 20px 60px rgba(0, 0, 0, 0.9);
  animation: coasterBuzzShake 1.2s infinite ease-in-out;
}

@keyframes coasterBuzzShake {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-3px) rotate(-0.5deg); }
  75% { transform: translateY(3px) rotate(0.5deg); }
}

.patron-coaster-beacon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff9f0a 0%, #ff3b30 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  margin: 0 auto 18px auto;
  box-shadow: 0 0 30px rgba(255, 159, 10, 0.8);
  animation: beaconPulse 1.4s infinite ease-in-out;
}

@keyframes beaconPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 159, 10, 0.6); }
  50% { transform: scale(1.12); box-shadow: 0 0 45px rgba(255, 59, 48, 0.9); }
}

.patron-coaster-ack-btn {
  background: linear-gradient(135deg, #00e676, #059669);
  border: none;
  color: #000;
  font-weight: 950;
  font-size: 1.2rem;
  padding: 16px 28px;
  border-radius: 9999px;
  width: 100%;
  margin-top: 20px;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(0, 230, 118, 0.5);
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.5px;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.patron-coaster-ack-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 0 35px rgba(0, 230, 118, 0.7);
}

.patron-coaster-ack-btn:active {
  transform: scale(0.98);
}




/* =========================================================================
 * Smartphone Portrait Compact Rules (<= 480px real or simulated viewport)
 * Prevents header pill overflow and button clipping on narrow mobile screens
 * ========================================================================= */
@media (max-width: 480px) {
  .patron-container {
    padding: 6px 10px 8px !important;
  }
  .join-card {
    padding: 14px 14px 18px !important;
    gap: 10px !important;
  }
  .card-top-emblem-row {
    gap: 6px !important;
    padding-bottom: 8px !important;
  }
  .brand-emblem-badge {
    gap: 8px !important;
    min-width: 0;
    flex: 1 1 auto;
  }
  .lb-emblem-ring {
    width: 35px !important;
    height: 35px !important;
  }
  .lb-emblem-ring img {
    width: 18px !important;
    height: 18px !important;
  }
  .brand-title-group {
    min-width: 0;
    flex: 1 1 auto;
  }
  .brand-title-text {
    font-size: 1.05rem !important;
  }
  .brand-subtitle-text {
    font-size: 0.62rem !important;
    line-height: 1.15 !important;
    white-space: normal;
  }
  .patron-header-utils {
    gap: 4px !important;
    flex-shrink: 0;
  }
  .patron-util-pill-btn {
    padding: 4px 7px !important;
    font-size: 0.68rem !important;
    gap: 3px !important;
  }
  #patron-btn-submit {
    font-size: 0.88rem !important;
    padding: 12px 12px !important;
    gap: 8px !important;
  }
}

html.lb-portrait-phone .patron-container {
  padding: 6px 10px 8px !important;
}

html.lb-portrait-phone .join-card {
  padding: 14px 14px 18px !important;
  gap: 10px !important;
}

html.lb-portrait-phone .card-top-emblem-row {
  gap: 6px !important;
  padding-bottom: 8px !important;
}

html.lb-portrait-phone .brand-emblem-badge {
  gap: 8px !important;
  min-width: 0;
  flex: 1 1 auto;
}

html.lb-portrait-phone .lb-emblem-ring {
  width: 34px !important;
  height: 34px !important;
}

html.lb-portrait-phone .lb-emblem-ring img {
  width: 18px !important;
  height: 18px !important;
}

html.lb-portrait-phone .brand-title-group {
  min-width: 0;
  flex: 1 1 auto;
}

html.lb-portrait-phone .brand-title-text {
  font-size: 1.05rem !important;
}

html.lb-portrait-phone .brand-subtitle-text {
  font-size: 0.62rem !important;
  line-height: 1.15 !important;
  white-space: normal;
}

html.lb-portrait-phone .patron-header-utils {
  gap: 4px !important;
  flex-shrink: 0;
}

html.lb-portrait-phone .patron-util-pill-btn {
  padding: 4px 7px !important;
  font-size: 0.68rem !important;
  gap: 3px !important;
}

html.lb-portrait-phone #patron-btn-submit {
  font-size: 0.88rem !important;
  padding: 12px 12px !important;
  gap: 8px !important;
}

/* =========================================================================
 * Landscape Smartphone Join Layout (Option C: Brand Panel + Form)
 * Applies only to short landscape viewports (phones) while the join card is
 * visible (.patron-container.is-joining is toggled by renderPatronView).
 * ========================================================================= */
.patron-landscape-brand {
  display: none;
}

/* Toggled by initLandscapePhoneClass() (views_patron.js) from the real window
 * size, or from the dev viewport simulator size (which resizes #app only and so
 * cannot trigger CSS @media queries). Condition: width > height && height <= 500. */
html.lb-landscape-phone .patron-container.is-joining {
  display: grid;
  grid-template-columns: minmax(185px, 210px) 1fr;
  grid-template-rows: 1fr auto;
  gap: 0 10px;
  max-width: 960px;
  padding: 6px 10px;
  align-items: stretch;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

html.lb-landscape-phone .patron-container.is-joining > * {
  grid-column: 1 / -1;
}

/* Left: brand / wait panel (spans both rows; links sit cleanly inside its bottom) */
html.lb-landscape-phone .patron-container.is-joining > .patron-landscape-brand {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  text-align: center;
  background: linear-gradient(145deg, var(--bg-card), var(--bg-card-hover));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  padding: 10px 10px 66px;
  box-sizing: border-box;
  min-height: 0;
}

html.lb-landscape-phone .patron-landscape-brand-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

html.lb-landscape-phone .patron-landscape-brand-mark {
  width: 46px;
  height: 46px;
  background: #fff;
  border-radius: 12px;
  padding: 5px;
  box-sizing: border-box;
}

html.lb-landscape-phone .patron-landscape-brand-tagline {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--text-main);
}

html.lb-landscape-phone .patron-landscape-brand-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.3;
}

html.lb-landscape-phone .patron-landscape-ewt {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 6px 8px;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  background: rgba(0, 209, 178, 0.08);
  border: 1.5px solid rgba(0, 209, 178, 0.35);
}

html.lb-landscape-phone .patron-landscape-ewt-big {
  font-size: 1.25rem;
  font-weight: 900;
  font-family: var(--font-mono);
  line-height: 1.1;
}

html.lb-landscape-phone .patron-landscape-ewt-sub {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Footer links sit inside the bottom of the brand panel without overlapping pill border */
html.lb-landscape-phone .patron-container.is-joining > .patron-footer-links {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  z-index: 1;
  flex-direction: column;
  gap: 2px !important;
  margin: 0 0 8px !important;
  padding: 0 6px !important;
  font-size: 0.7rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html.lb-landscape-phone .patron-container.is-joining > .patron-footer-links .footer-separator {
  display: none;
}

html.lb-landscape-phone .patron-container.is-joining > .patron-footer-links a {
  color: #00d1b2;
  text-decoration: underline;
  padding: 1px 0;
}

/* Right: the form card */
html.lb-landscape-phone .patron-container.is-joining > #patron-join-card {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: none;
  margin: 0;
  padding: 6px 12px !important;
  gap: 0;
  overflow-y: auto;
  max-height: 100%;
}

html.lb-landscape-phone #patron-qr-notice {
  padding: 3px 8px !important;
  margin-bottom: 3px !important;
  font-size: 0.68rem !important;
  line-height: 1.2 !important;
}

html.lb-landscape-phone #patron-join-form {
  display: grid;
  grid-template-columns: 1fr minmax(185px, 215px);
  grid-auto-rows: min-content;
  column-gap: 10px;
  row-gap: 2px;
  flex: 1;
  align-content: space-between;
}

html.lb-landscape-phone #patron-join-form > * {
  grid-column: 1 / -1;
  margin-top: 0 !important;
  margin-bottom: 1px !important;
}

/* Keep Header Row (LineBuster + Theme & Language Pills) visible across top of form */
html.lb-landscape-phone #patron-card-header-row {
  display: flex !important;
  grid-column: 1 / -1;
  padding-bottom: 3px !important;
  margin-bottom: 1px !important;
}

html.lb-landscape-phone #patron-card-header-row .lb-emblem-ring {
  width: 28px !important;
  height: 28px !important;
}

html.lb-landscape-phone #patron-card-header-row .lb-emblem-ring img {
  width: 15px !important;
  height: 15px !important;
}

html.lb-landscape-phone #patron-card-header-row .brand-title-text {
  font-size: 0.96rem !important;
}

html.lb-landscape-phone #patron-card-header-row .brand-subtitle-text {
  font-size: 0.6rem !important;
}

html.lb-landscape-phone #patron-card-header-row .patron-util-pill-btn {
  padding: 2px 8px !important;
  min-height: 26px !important;
  font-size: 0.68rem !important;
}

/* Row 2: Patron Name + Offers on its own full-width line */
html.lb-landscape-phone #patron-name-group {
  grid-column: 1 / -1 !important;
}

/* Row 3: Venue ID + Near Me in Left Column, 6-Digit Entry Code in Right Column */
html.lb-landscape-phone #patron-venue-group {
  grid-column: 1 !important;
}

html.lb-landscape-phone #patron-input-pin-group {
  grid-column: 2 !important;
}

html.lb-landscape-phone #patron-join-form:has(#patron-input-pin-group[style*="display: none"]) #patron-venue-group,
html.lb-landscape-phone #patron-join-form:has(#patron-input-pin-group[style*="display:none"]) #patron-venue-group {
  grid-column: 1 / -1 !important;
}

#patron-name-group,
#patron-venue-group,
#patron-input-pin-group {
  gap: 0 !important;
}

html.lb-landscape-phone #patron-name-group > div:first-of-type,
html.lb-landscape-phone #patron-venue-group > div:first-of-type,
html.lb-landscape-phone #patron-input-pin-group > div:first-of-type {
  min-height: 17px !important;
  display: flex !important;
  align-items: center !important;
  margin-bottom: 2px !important;
}

html.lb-landscape-phone .btn-field-info {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  font-size: 0.65rem !important;
}

#patron-input-venue {
  text-transform: uppercase;
}

#patron-input-venue::placeholder {
  text-transform: none;
}

html.lb-landscape-phone #patron-input-pin {
  letter-spacing: 2px !important;
  padding: 2px 6px !important;
  height: 29px !important;
  min-height: 29px !important;
  box-sizing: border-box !important;
}

/* Compact centered Stadium Pill for Claim Ticket button in landscape */
html.lb-landscape-phone #patron-join-form > #patron-btn-submit {
  grid-column: 1 / -1;
  align-self: end;
  justify-self: center !important;
  width: fit-content !important;
  min-width: 250px;
  max-width: 100%;
  margin: 1px auto 0 !important;
  padding: 5px 22px !important;
  font-size: 0.84rem !important;
  min-height: 31px !important;
}

html.lb-landscape-phone #patron-join-form .form-label {
  font-size: 0.68rem !important;
  margin-bottom: 0 !important;
  white-space: nowrap;
}

html.lb-landscape-phone #patron-join-form .form-group,
html.lb-landscape-phone #patron-dynamic-intake-container .form-group {
  margin-bottom: 2px !important;
}

html.lb-landscape-phone #patron-dynamic-intake-container {
  margin-top: 0 !important;
  margin-bottom: 1px !important;
}

/* Compact multi-column grid for visible dynamic intake fields in Phone Landscape */
html.lb-landscape-phone #patron-dynamic-intake-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
}

html.lb-landscape-phone #patron-dynamic-intake-container > #container-field-order-type {
  flex: 1 1 100%;
}

html.lb-landscape-phone #patron-dynamic-intake-container > .intake-field-container:not(#container-field-order-type),
html.lb-landscape-phone #patron-dynamic-intake-container > .form-group:not(#container-field-order-type) {
  flex: 1 1 180px;
  min-width: 0;
  margin-bottom: 1px !important;
}

html.lb-landscape-phone #patron-join-form input.form-control,
html.lb-landscape-phone #patron-join-form textarea.form-control,
html.lb-landscape-phone #patron-join-form select.form-control {
  padding: 2px 8px !important;
  font-size: 0.8rem !important;
  height: 29px !important;
  min-height: 29px !important;
  box-sizing: border-box !important;
}

/* Keep Near Me & Offers text visible and compact in Phone Landscape */
html.lb-landscape-phone #patron-help-venue,
html.lb-landscape-phone #patron-pin-help {
  display: none !important;
}

html.lb-landscape-phone #patron-join-card .patron-dock-text {
  display: inline !important;
}

html.lb-landscape-phone #patron-btn-near-me,
html.lb-landscape-phone #patron-prejoin-saved-offers-btn {
  min-width: 84px !important;
  height: 29px !important;
  min-height: 29px !important;
  justify-content: center;
  padding: 0 10px !important;
  font-size: 0.72rem !important;
  box-sizing: border-box !important;
}

/* Valid wait time is shown big in the brand panel; errors stay inline */
html.lb-landscape-phone #patron-prejoin-ewt-banner.is-ewt {
  display: none !important;
}

/* Order type pills go single-row with inline icon */
html.lb-landscape-phone .patron-order-type-segmented {
  margin-top: 1px;
  gap: 5px;
}

html.lb-landscape-phone .patron-order-type-pill {
  flex-direction: row;
  min-height: 28px;
  padding: 2px 6px;
  gap: 5px;
}

/* =========================================================================
 * Phone Landscape (844×390): Active Ticket 2-Column Layout & Compact Demo Banner
 * ========================================================================= */
html.lb-landscape-phone #universal-demo-device-banner,
html.lb-landscape-phone #demo-countdown-banner {
  padding: 3px 10px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.72rem !important;
}

html.lb-landscape-phone #demo-countdown-banner > div {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

html.lb-landscape-phone .patron-segmented-tabs {
  padding: 3px;
  margin-bottom: 2px;
}

html.lb-landscape-phone .patron-tab-btn {
  flex-direction: row;
  min-height: 32px;
  padding: 4px 8px;
  font-size: 0.74rem;
  gap: 5px;
}

html.lb-landscape-phone .patron-tab-btn .patron-tab-icon {
  font-size: 0.95rem;
}

html.lb-landscape-phone .patron-tab-btn .patron-cart-badge {
  position: static;
  margin-left: 2px;
}

html.lb-landscape-phone .patron-container:not(.is-joining) > .patron-footer-links {
  display: none !important;
}

/* =========================================================================
 * Style B Graphic Progress Indicator (✓ — ✓ — [ 👨‍🍳 In Prep ] — 🏁)
 * ========================================================================= */
.order-progress-stepper.order-progress-style-b {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  background: rgba(11, 16, 29, 0.88) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  padding: 7px 12px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.order-progress-style-b .prog-b-status-heading {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
}

.order-progress-style-b .prog-style-b-capsule {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #090d16 !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 999px !important;
  padding: 3px 9px !important;
}

.order-progress-style-b .prog-b-connector {
  width: 8px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: rgba(148, 163, 184, 0.3) !important;
  flex-shrink: 0 !important;
}

.order-progress-style-b .prog-b-connector.done {
  background: #10b981 !important;
}

.order-progress-style-b .stepper-step-node {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

.order-progress-style-b .prog-b-check-dot {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: rgba(16, 185, 129, 0.2) !important;
  border: 1.5px solid #10b981 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.order-progress-style-b .prog-b-check-dot .step-node-icon {
  width: auto !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  color: #34d399 !important;
  font-size: 0.64rem !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

.order-progress-style-b .prog-b-check-dot .step-node-label,
.order-progress-style-b .prog-b-todo-ring .step-node-label {
  display: none !important;
}

.order-progress-style-b .prog-b-active-pill {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.24), rgba(234, 88, 12, 0.36)) !important;
  border: 1.5px solid #f97316 !important;
  color: #ffffff !important;
  padding: 2px 10px !important;
  border-radius: 999px !important;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.35) !important;
}

.order-progress-style-b .prog-b-active-pill .step-node-icon {
  width: auto !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  font-size: 0.76rem !important;
  box-shadow: none !important;
}

.order-progress-style-b .prog-b-active-pill .step-node-label {
  display: inline !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  text-transform: none !important;
  letter-spacing: 0.1px !important;
  white-space: nowrap !important;
}

.order-progress-style-b .prog-b-todo-ring {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 1.5px dashed #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.order-progress-style-b .prog-b-todo-ring .step-node-icon {
  width: auto !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  color: #94a3b8 !important;
  font-size: 0.62rem !important;
  box-shadow: none !important;
}

/* =========================================================================
 * Full-Height Expanded Inline Ticket Ad Stage + Docked Bottom Offer/CTA Bar
 * Consumes all available vertical space so the Ad image scales to full width
 * ========================================================================= */
html:not(.lb-landscape-phone):not(.lb-landscape-wide) #patron-ad-stage-box,
html:not(.lb-landscape-phone):not(.lb-landscape-wide) #patron-stellar-nav-ticket,
html:not(.lb-landscape-phone):not(.lb-landscape-wide) #patron-stellar-nav-ticket .stellar-nav-widget,
html:not(.lb-landscape-phone):not(.lb-landscape-wide) #patron-stellar-nav-ticket .stellar-nav-wrapper,
html:not(.lb-landscape-phone):not(.lb-landscape-wide) #patron-stellar-nav-ticket .stellar-nav-stage {
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

html:not(.lb-landscape-phone):not(.lb-landscape-wide) #patron-action-footer {
  margin-top: auto !important;
  flex-shrink: 0 !important;
}

#patron-stellar-nav-ticket .stellar-nav-slide.stellar-nav-slide-inline-ticket {
  position: relative !important;
  display: none !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#patron-stellar-nav-ticket .stellar-nav-slide.stellar-nav-slide-inline-ticket.active {
  display: flex !important;
}

#patron-stellar-nav-ticket .stellar-nav-inline-top-badges {
  position: relative !important;
  inset: auto !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 5px 8px !important;
  background: #0f172a !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

#patron-stellar-nav-ticket .stellar-nav-inline-media-box {
  position: relative !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 185px !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  background: #090d16 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html:not(.lb-landscape-phone):not(.lb-landscape-wide) #patron-stellar-nav-ticket .stellar-nav-inline-media-box {
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 220px !important;
  max-height: none !important;
}

#patron-stellar-nav-ticket .stellar-nav-inline-media-box .stellar-nav-media {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  position: relative !important;
  z-index: 2 !important;
}

#patron-stellar-nav-ticket .stellar-nav-inline-caption-bar {
  position: relative !important;
  inset: auto !important;
  z-index: 4 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  background: #0f172a !important;
  border-top: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 0 0 12px 12px !important;
  padding: 8px 11px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  flex-shrink: 0 !important;
}

#patron-stellar-nav-ticket .stellar-nav-inline-caption-bar .stellar-nav-title,
#patron-stellar-nav-ticket .stellar-nav-inline-caption-bar .stellar-nav-subtitle {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25 !important;
}

/* Portrait & Landscape Shared Bottom Action Row (Primary Arrival/Kiosk + Secondary Leave/Abandon) */
.patron-footer-integrated-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
}

.patron-footer-integrated-row #patron-timer-display,
.patron-footer-integrated-row #patron-ewt-display {
  display: none !important;
}

.patron-footer-integrated-row #patron-arrival-survey-container {
  grid-column: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.patron-footer-integrated-row .patron-btn-arrival {
  width: 100% !important;
  padding: 10px 10px !important;
  font-size: 0.78rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.patron-footer-integrated-row #btn-leave-queue {
  grid-column: 2 !important;
  padding: 10px 12px !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  border-radius: 11px !important;
  white-space: nowrap !important;
}

/* Portrait Notification Banner Single-Row Compact Layout */
html:not(.lb-landscape-phone):not(.lb-landscape-wide) #patron-notif-banner > div {
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

html:not(.lb-landscape-phone):not(.lb-landscape-wide) #patron-notif-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 0.72rem !important;
  line-height: 1.25 !important;
}

html:not(.lb-landscape-phone):not(.lb-landscape-wide) #patron-btn-enable-notif {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  padding: 5px 10px !important;
  font-size: 0.72rem !important;
}

/* =========================================================================
 * Landscape Phone (844x390) & Normal Desktop / Tablet Landscape (lb-landscape-wide):
 * Balanced 2-Column Side-by-Side Parity
 * Left Column  = Own-Line Venue Header + Style B Status + Alerts + Actions
 * Right Column = Full Uncovered Ad Stage Expanded Vertically + Docked Caption Bar
 * ========================================================================= */
html.lb-landscape-phone #patron-ticket-card:not([style*="display: none"]):not([style*="display:none"]),
html.lb-landscape-wide #patron-ticket-card:not([style*="display: none"]):not([style*="display:none"]) {
  display: grid !important;
  grid-template-columns: 314px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto 1fr !important;
  gap: 8px 12px !important;
  padding: 10px 12px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

html.lb-landscape-wide .patron-container:not(.is-joining) {
  max-width: 1120px !important;
  width: 100% !important;
  padding: 8px 20px 10px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

html.lb-landscape-wide #patron-ticket-card:not([style*="display: none"]):not([style*="display:none"]) {
  grid-template-columns: 420px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto 1fr !important;
  align-content: stretch !important;
  gap: 12px 18px !important;
  padding: 16px 20px !important;
  max-width: 1080px !important;
  flex: 1 1 auto !important;
  height: calc(100vh - 118px) !important;
  min-height: 480px !important;
  max-height: 760px !important;
  margin: 4px auto !important;
}

html.lb-landscape-phone #patron-ticket-card > *,
html.lb-landscape-wide #patron-ticket-card > * {
  grid-column: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Row 1 (Left Column): Venue Name on Line 1 + Ticket # & On-Site Pill on Line 2 */
html.lb-landscape-phone #patron-ticket-header,
html.lb-landscape-wide #patron-ticket-header {
  grid-column: 1 !important;
  grid-row: 1 !important;
  padding: 8px 10px !important;
  gap: 5px !important;
}

html.lb-landscape-wide #patron-ticket-header {
  padding: 14px 16px !important;
  gap: 10px !important;
}

/* Row 2 (Left Column): Style B Progress Indicator */
html.lb-landscape-phone #patron-stepper-container,
html.lb-landscape-wide #patron-stepper-container {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

html.lb-landscape-wide .order-progress-stepper.order-progress-style-b {
  padding: 12px 16px !important;
}

/* Row 3 (Left Column): Lockscreen Alerts Row */
html.lb-landscape-phone #patron-notif-banner,
html.lb-landscape-wide #patron-notif-banner {
  grid-column: 1 !important;
  grid-row: 3 !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
}

html.lb-landscape-wide #patron-notif-banner {
  padding: 12px 16px !important;
  border-radius: 12px !important;
}

html.lb-landscape-phone #patron-notif-banner[style*="display: none"],
html.lb-landscape-phone #patron-notif-banner[style*="display:none"],
html.lb-landscape-wide #patron-notif-banner[style*="display: none"],
html.lb-landscape-wide #patron-notif-banner[style*="display:none"] {
  display: none !important;
}

html.lb-landscape-phone #patron-notif-banner > div,
html.lb-landscape-wide #patron-notif-banner > div {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}

html.lb-landscape-phone #patron-notif-title,
html.lb-landscape-wide #patron-notif-title {
  font-size: 0.68rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html.lb-landscape-wide #patron-notif-title {
  font-size: 0.80rem !important;
  white-space: normal !important;
  line-height: 1.35 !important;
}

html.lb-landscape-phone #patron-btn-enable-notif,
html.lb-landscape-wide #patron-btn-enable-notif {
  padding: 4px 9px !important;
  font-size: 0.68rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

html.lb-landscape-wide #patron-btn-enable-notif {
  padding: 7px 13px !important;
  font-size: 0.78rem !important;
}

/* Row 4 (Left Column): Bottom Action Row (Arrived / Pay at Kiosk + Leave / Abandon) */
html.lb-landscape-phone #patron-action-footer,
html.lb-landscape-wide #patron-action-footer {
  grid-column: 1 !important;
  grid-row: 4 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  align-self: end !important;
}

html.lb-landscape-wide .patron-footer-integrated-row .patron-btn-arrival {
  padding: 13px 16px !important;
  font-size: 0.88rem !important;
}

html.lb-landscape-wide .patron-footer-integrated-row #btn-leave-queue {
  padding: 13px 18px !important;
  font-size: 0.84rem !important;
}

/* Column 2 (Right Column, Spanning All 4 Rows): Full Uncovered Ad Stage */
html.lb-landscape-phone #patron-ad-stage-box,
html.lb-landscape-wide #patron-ad-stage-box {
  grid-column: 2 !important;
  grid-row: 1 / span 4 !important;
  height: 100% !important;
  min-height: 220px !important;
  align-self: stretch !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

html.lb-landscape-wide #patron-ad-stage-box {
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
}

html.lb-landscape-phone #patron-stellar-nav-ticket,
html.lb-landscape-phone #patron-stellar-nav-ticket .stellar-nav-widget,
html.lb-landscape-phone #patron-stellar-nav-ticket .stellar-nav-wrapper,
html.lb-landscape-phone #patron-stellar-nav-ticket .stellar-nav-stage,
html.lb-landscape-phone #patron-stellar-nav-ticket .stellar-nav-slide.stellar-nav-slide-inline-ticket.active,
html.lb-landscape-wide #patron-stellar-nav-ticket,
html.lb-landscape-wide #patron-stellar-nav-ticket .stellar-nav-widget,
html.lb-landscape-wide #patron-stellar-nav-ticket .stellar-nav-wrapper,
html.lb-landscape-wide #patron-stellar-nav-ticket .stellar-nav-stage,
html.lb-landscape-wide #patron-stellar-nav-ticket .stellar-nav-slide.stellar-nav-slide-inline-ticket.active {
  height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

html.lb-landscape-phone #patron-stellar-nav-ticket .stellar-nav-inline-media-box,
html.lb-landscape-wide #patron-stellar-nav-ticket .stellar-nav-inline-media-box {
  aspect-ratio: auto !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 150px !important;
  max-height: none !important;
}

.patron-hero-ad-stage .stellar-nav-controls {
  display: none !important;
}


/* =========================================================================
 * Wide Landscape: Desktop & Landscape Tablet Join Layout
 * Applies when width >= 768px and in landscape (Desktop & Tablet Landscape)
 * Pillar 1: Proportional Breathing Room & Adaptive Spatial Balance
 * ========================================================================= */
html.lb-landscape-wide #patron-view.view-container {
  display: flex;
  align-items: safe center;
  justify-content: center;
  overflow-y: auto;
}

html.lb-landscape-wide .patron-container.is-joining {
  display: grid;
  grid-template-columns: 272px minmax(500px, 580px);
  grid-template-rows: 1fr auto;
  gap: 0 18px;
  max-width: 890px;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: auto;
  padding: 14px 16px 20px;
  align-items: stretch;
  align-self: center;
}

html.lb-landscape-wide .patron-container.is-joining > * {
  grid-column: 1 / -1;
}

/* Left: brand / wait panel */
html.lb-landscape-wide .patron-container.is-joining > .patron-landscape-brand {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: center;
  background: linear-gradient(145deg, var(--bg-card), var(--bg-card-hover));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  padding: 28px 20px 98px;
  box-sizing: border-box;
  min-height: 0;
  position: relative;
}

html.lb-landscape-wide .patron-landscape-brand-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

html.lb-landscape-wide .patron-landscape-brand-mark {
  width: 64px;
  height: 64px;
  background: #fff;
  border-radius: 16px;
  padding: 6px;
  box-sizing: border-box;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

html.lb-landscape-wide .patron-landscape-brand-tagline {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--text-main);
}

html.lb-landscape-wide .patron-landscape-brand-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

html.lb-landscape-wide .patron-landscape-ewt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  background: rgba(0, 209, 178, 0.08);
  border: 1.5px solid rgba(0, 209, 178, 0.35);
}

html.lb-landscape-wide .patron-landscape-ewt-big {
  font-size: 1.8rem;
  font-weight: 900;
  font-family: var(--font-mono);
  line-height: 1.1;
}

html.lb-landscape-wide .patron-landscape-ewt-sub {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Footer links sit inside the bottom of the brand panel */
html.lb-landscape-wide .patron-container.is-joining > .patron-footer-links {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  z-index: 1;
  flex-direction: column;
  gap: 4px !important;
  margin: 0 0 16px !important;
  padding: 0 8px !important;
  font-size: 0.75rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html.lb-landscape-wide .patron-container.is-joining > .patron-footer-links .footer-separator {
  display: none;
}

html.lb-landscape-wide .patron-container.is-joining > .patron-footer-links a {
  color: #00d1b2;
  text-decoration: underline;
  padding: 2px 0;
}

/* Right: the form card */
html.lb-landscape-wide .patron-container.is-joining > #patron-join-card {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: none;
  margin: 0;
  padding: 16px 22px 18px;
  gap: 10px;
  height: auto !important;
  min-height: 0;
  justify-content: flex-start;
}

html.lb-landscape-wide #patron-qr-notice {
  padding: 7px 12px !important;
  margin-bottom: 4px !important;
  font-size: 0.8rem !important;
  line-height: 1.35 !important;
}

html.lb-landscape-wide #patron-join-form {
  display: grid;
  grid-template-columns: 1fr 228px;
  grid-auto-rows: min-content;
  column-gap: 14px;
  row-gap: 10px;
  flex: 1;
  align-content: start;
}

html.lb-landscape-wide #patron-join-form > * {
  grid-column: 1 / -1;
  margin-bottom: 0 !important;
}

html.lb-landscape-wide #patron-name-group {
  grid-column: 1 / -1 !important;
}

html.lb-landscape-wide #patron-venue-group {
  grid-column: 1 !important;
}

html.lb-landscape-wide #patron-input-pin-group {
  grid-column: 2 !important;
}

html.lb-landscape-wide #patron-join-form:has(#patron-input-pin-group[style*="display: none"]) #patron-venue-group,
html.lb-landscape-wide #patron-join-form:has(#patron-input-pin-group[style*="display:none"]) #patron-venue-group {
  grid-column: 1 / -1 !important;
}

html.lb-landscape-wide #patron-name-group > div:first-of-type,
html.lb-landscape-wide #patron-venue-group > div:first-of-type,
html.lb-landscape-wide #patron-input-pin-group > div:first-of-type {
  min-height: 22px !important;
  display: flex !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}

html.lb-landscape-wide #patron-join-form input.form-control {
  height: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

html.lb-landscape-wide #patron-btn-near-me,
html.lb-landscape-wide #patron-prejoin-saved-offers-btn {
  height: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

html.lb-landscape-wide #patron-input-pin {
  letter-spacing: 2px !important;
  padding: 6px 8px !important;
}

html.lb-landscape-wide #patron-join-form > #patron-btn-submit {
  grid-column: 1 / -1;
  justify-self: center !important;
  width: fit-content !important;
  min-width: 300px;
  max-width: 100%;
  margin: 8px auto 0 !important;
  padding: 13px 34px !important;
}

/* Valid wait time is shown big in the brand panel; errors stay inline */
html.lb-landscape-wide #patron-prejoin-ewt-banner.is-ewt {
  display: none !important;
}

/* Order type pills in 4-column grid */
html.lb-landscape-wide .patron-order-type-segmented {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 6px;
}

html.lb-landscape-wide .patron-order-type-pill {
  flex-direction: row;
  min-height: 46px;
  padding: 8px 6px;
  gap: 6px;
}

/* =========================================================================
 * 6-DIGIT ENTRY CODE: SEGMENTED SLOTS (3-3) + FOCUS POPOVER NUMERIC KEYPAD
 * ========================================================================= */
.patron-pin-composite-group {
  position: relative;
}

.patron-pin-verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
  color: #00e676;
  background: rgba(0, 230, 118, 0.14);
  border: 1px solid rgba(0, 230, 118, 0.4);
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.2;
}

.patron-pin-slots-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 42px;
  min-height: 42px;
  padding: 4px 6px;
  box-sizing: border-box;
  background: rgba(10, 14, 23, 0.65);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.patron-pin-slots-bar:hover,
.patron-pin-slots-bar:focus,
.patron-pin-slots-bar.is-open {
  outline: none;
  border-color: var(--primary, #ff6b00);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.18);
}

.patron-pin-slots-bar.is-complete:not(.is-open) {
  border-color: rgba(0, 230, 118, 0.65);
  box-shadow: 0 0 0 2px rgba(0, 230, 118, 0.14);
}

.patron-pin-slots-bar.is-invalid {
  border-color: #ff4d4f !important;
  box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.25) !important;
}

.patron-pin-slot {
  flex: 1 1 0;
  max-width: 38px;
  min-width: 0;
  height: 30px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--text-main, #f0f6fc);
  transition: all 0.15s ease;
}

.patron-pin-slot.is-active {
  border-color: var(--primary, #ff6b00);
  background: rgba(255, 107, 0, 0.14);
  box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.28);
  color: #fff;
}

.patron-pin-slot.is-filled {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
}

.patron-pin-slot.is-complete {
  border-color: rgba(0, 230, 118, 0.6);
  background: rgba(0, 230, 118, 0.1);
  color: #00e676;
}

.patron-pin-slot-sep {
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--text-muted, #8b949e);
  padding: 0 1px;
  user-select: none;
}

.patron-pin-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  width: max(100%, 248px);
  max-width: calc(100vw - 32px);
  z-index: 95;
  padding: 8px;
  border-radius: 14px;
  background: #131926;
  border: 1.5px solid rgba(255, 107, 0, 0.6);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.patron-pin-popover.flip-up {
  top: auto;
  bottom: calc(100% + 6px);
}

.patron-pin-keypad-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}

.patron-pin-key {
  height: 36px;
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main, #f0f6fc);
  font-family: var(--font-main, sans-serif);
  font-size: 0.92rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s ease, border-color 0.15s ease, background 0.15s ease;
}

.patron-pin-key:hover {
  border-color: var(--primary, #ff6b00);
  background: rgba(255, 107, 0, 0.16);
}

.patron-pin-key:active {
  transform: scale(0.94);
}

.patron-pin-key-back {
  border-color: rgba(255, 107, 0, 0.55);
  background: rgba(255, 107, 0, 0.14);
  color: var(--primary, #ff6b00);
  font-size: 1rem;
}

.patron-pin-key-clear {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-muted, #8b949e);
}

/* Phone Landscape (844x390) Sizing */
html.lb-landscape-phone .patron-pin-slots-bar {
  height: 29px !important;
  min-height: 29px !important;
  padding: 2px 5px !important;
  gap: 3px !important;
  border-radius: 9px !important;
}

html.lb-landscape-phone .patron-pin-slot {
  height: 21px !important;
  min-width: 0 !important;
  font-size: 0.78rem !important;
  border-radius: 5px !important;
}

html.lb-landscape-phone .patron-pin-slot-sep {
  font-size: 0.72rem !important;
}

html.lb-landscape-phone .patron-pin-popover {
  padding: 6px !important;
  width: max(100%, 236px) !important;
}

html.lb-landscape-phone .patron-pin-key {
  height: 30px !important;
  min-height: 30px !important;
  font-size: 0.82rem !important;
}

html.lb-landscape-phone .patron-pin-key-clear {
  font-size: 0.66rem !important;
}

/* Wide Landscape (1024x768 & 1440x900) Sizing */
html.lb-landscape-wide .patron-pin-slots-bar {
  height: 44px !important;
  min-height: 44px !important;
  padding: 4px 8px !important;
  gap: 4px !important;
}

html.lb-landscape-wide .patron-pin-slot {
  height: 32px !important;
  font-size: 0.96rem !important;
}

/* Light Theme & E-Ink Theme Adaptations */
body.light-theme .patron-pin-slots-bar,
html[data-theme="daylight"] .patron-pin-slots-bar {
  background: #ffffff;
  border-color: #cbd5e1;
}

body.light-theme .patron-pin-slot,
html[data-theme="daylight"] .patron-pin-slot {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

body.light-theme .patron-pin-popover,
html[data-theme="daylight"] .patron-pin-popover {
  background: #ffffff;
  border-color: var(--primary, #ff6b00);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

body.light-theme .patron-pin-key,
html[data-theme="daylight"] .patron-pin-key {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

body.eink-mode .patron-pin-slots-bar,
html[data-theme="eink"] .patron-pin-slots-bar {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: none !important;
}

body.eink-mode .patron-pin-slot,
html[data-theme="eink"] .patron-pin-slot {
  background: #ffffff !important;
  border: 1.5px solid #000000 !important;
  color: #000000 !important;
  box-shadow: none !important;
}

body.eink-mode .patron-pin-slot.is-active,
html[data-theme="eink"] .patron-pin-slot.is-active {
  border-width: 2.5px !important;
  background: #e5e5e5 !important;
}

body.eink-mode .patron-pin-popover,
html[data-theme="eink"] .patron-pin-popover {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: 4px 4px 0 #000000 !important;
  backdrop-filter: none !important;
}

body.eink-mode .patron-pin-key,
html[data-theme="eink"] .patron-pin-key {
  background: #ffffff !important;
  border: 1.5px solid #000000 !important;
  color: #000000 !important;
}

/* =========================================================================
 * Landscape Optimization: Patron Menu Stage (#patron-menu-stage) & Coaster Pager
 * ========================================================================= */
@media (orientation: landscape) and (max-height: 540px) {
  .patron-container.patron-mode-menu {
    padding: 4px 10px 6px !important;
    gap: 4px !important;
  }

  .patron-container.patron-mode-menu #patron-segmented-tabs {
    padding: 2px !important;
    margin-bottom: 2px !important;
  }

  .patron-container.patron-mode-menu .patron-tab-btn {
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
    min-height: 26px !important;
  }

  #patron-menu-stage .truck-location-banner {
    margin-bottom: 4px !important;
    padding: 4px 10px !important;
    border-radius: 10px !important;
  }

  #patron-menu-stage .truck-location-banner > div > div > div:first-child {
    display: none !important;
  }

  #patron-menu-stage #patron-menu-sticky-nav-bar {
    display: grid !important;
    grid-template-columns: minmax(210px, 0.9fr) minmax(0, 1.3fr) !important;
    gap: 4px 8px !important;
    padding: 4px 8px !important;
    margin-bottom: 4px !important;
    align-items: center !important;
  }

  #patron-menu-stage .patron-search-voice-bar {
    padding: 2px 8px !important;
    min-height: 28px !important;
    margin: 0 !important;
  }

  #patron-menu-stage .patron-search-voice-bar input {
    font-size: 0.78rem !important;
    padding: 2px 4px !important;
  }

  #patron-menu-stage #patron-category-scroll-bar {
    margin: 0 !important;
    padding: 1px 0 !important;
    gap: 4px !important;
  }

  #patron-menu-stage #patron-subcategory-scroll-bar,
  #patron-menu-stage #patron-dietary-scroll-bar {
    grid-column: 1 / -1 !important;
    padding: 1px 0 !important;
    margin: 0 !important;
    gap: 4px !important;
  }

  #patron-menu-stage .portion-pill-btn {
    padding: 3px 8px !important;
    font-size: 0.72rem !important;
    min-height: 24px !important;
  }

  #patron-menu-stage .patron-fast-matrix-launcher-bar {
    padding: 2px 0 4px !important;
    gap: 6px !important;
  }

  #patron-menu-stage .patron-fast-matrix-launcher-bar .btn {
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
    min-height: 26px !important;
  }

  #patron-menu-stage .patron-food-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #patron-menu-stage .patron-food-card {
    padding: 8px 10px !important;
    border-radius: 10px !important;
  }

  #patron-menu-stage .patron-food-card > div:first-child {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 4px 8px !important;
    align-items: start !important;
  }

  #patron-menu-stage .patron-food-card-img-wrap {
    grid-row: 1 / span 3 !important;
    width: 64px !important;
    height: 64px !important;
    aspect-ratio: 1 / 1 !important;
    margin-bottom: 0 !important;
    border-radius: 8px !important;
  }

  #patron-menu-stage .patron-card-desc-box {
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    margin: 2px 0 !important;
    min-height: 0 !important;
  }

  #patron-menu-stage .portion-pills-row {
    grid-column: 1 / -1 !important;
    margin-top: 2px !important;
  }

  #patron-menu-stage .btn-dualtone-add {
    margin-top: 6px !important;
    min-height: 30px !important;
    height: 30px !important;
  }

  /* Digital Coaster Pager 2-Column Landscape Alert Card */
  #patron-coaster-modal.patron-coaster-modal-overlay {
    padding: 8px 16px !important;
  }

  #patron-coaster-modal .patron-coaster-card {
    max-width: min(760px, 95vw) !important;
    width: 100% !important;
    max-height: 92vh !important;
    padding: 14px 22px !important;
    display: grid !important;
    grid-template-columns: 0.85fr 1.25fr !important;
    gap: 18px !important;
    align-items: center !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  #patron-coaster-modal .patron-coaster-col-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-right: 1px solid rgba(255, 159, 10, 0.28) !important;
    padding-right: 14px !important;
  }

  #patron-coaster-modal .patron-coaster-beacon {
    width: 64px !important;
    height: 64px !important;
    font-size: 2.1rem !important;
    margin: 0 auto 8px auto !important;
  }

  #patron-coaster-modal .patron-coaster-ticket-pill {
    margin-bottom: 0 !important;
    padding: 4px 14px !important;
  }

  #patron-coaster-modal .patron-coaster-ticket-pill span {
    font-size: 1.35rem !important;
  }

  #patron-coaster-modal .patron-coaster-col-right {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  #patron-coaster-modal .patron-coaster-headline {
    font-size: clamp(1.25rem, 2.4vw, 1.65rem) !important;
    margin: 0 0 6px 0 !important;
  }

  #patron-coaster-modal .patron-coaster-subtext {
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
    margin: 0 0 10px 0 !important;
  }

  #patron-coaster-modal .patron-coaster-ack-btn {
    padding: 10px 16px !important;
    font-size: 0.98rem !important;
    margin-top: 2px !important;
  }

  #patron-coaster-modal .patron-coaster-footer-note {
    margin-top: 6px !important;
    font-size: 0.7rem !important;
  }
}

html.lb-landscape-wide #patron-coaster-modal .patron-coaster-card {
  max-width: min(760px, 92vw) !important;
  display: grid !important;
  grid-template-columns: 0.85fr 1.25fr !important;
  gap: 22px !important;
  align-items: center !important;
  text-align: left !important;
}

html.lb-landscape-wide #patron-coaster-modal .patron-coaster-col-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border-right: 1px solid rgba(255, 159, 10, 0.28) !important;
  padding-right: 18px !important;
}


/* ==========================================================================
   UI-Polish Dynamic Surface, Telemetry Pulse & Spring Micro-Interactions
   ========================================================================== */

@keyframes lbEwtTelemetryPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border-color: rgba(52, 211, 153, 0.36);
  }
  50% {
    box-shadow: 0 0 16px 2px rgba(52, 211, 153, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    border-color: rgba(52, 211, 153, 0.62);
  }
}

@keyframes lbPrimaryCtaSheen {
  0%, 82%, 100% {
    transform: translateX(-130%) skewX(-22deg);
  }
  94% {
    transform: translateX(230%) skewX(-22deg);
  }
}

/* 1. Multi-layer specular top-edge light catch on primary Patron cards */
#patron-join-card,
.patron-landscape-brand,
.stellar-navigator-container {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 14px 34px rgba(0, 0, 0, 0.42);
}

/* 2. Live emerald telemetry pulse & tabular numbers on EWT status boxes */
.patron-landscape-ewt,
#patron-prejoin-ewt-banner.is-ewt {
  font-variant-numeric: tabular-nums;
  animation: lbEwtTelemetryPulse 3.6s ease-in-out infinite;
}

.patron-landscape-ewt-value {
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(52, 211, 153, 0.28);
}

/* 3. Tactile spring physics on interactive Patron pills & action buttons */
.patron-order-type-pill,
#patron-btn-near-me,
#patron-prejoin-saved-offers-btn,
#patron-btn-browse-first,
#patron-btn-submit {
  transition:
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 180ms ease,
    background 180ms ease !important;
}

@media (hover: hover) {
  .patron-order-type-pill:hover,
  #patron-btn-near-me:hover,
  #patron-prejoin-saved-offers-btn:hover,
  #patron-btn-browse-first:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }

  #patron-btn-submit:hover {
    transform: translateY(-1.5px) scale(1.006);
    box-shadow: 0 10px 26px rgba(255, 107, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  }
}

.patron-order-type-pill:active,
#patron-btn-near-me:active,
#patron-prejoin-saved-offers-btn:active,
#patron-btn-browse-first:active,
#patron-btn-submit:active {
  transform: scale(0.975) !important;
}

/* 4. Subtle periodic specular sheen across primary "Claim Ticket" CTA */
#patron-btn-submit {
  position: relative;
  overflow: hidden;
}

#patron-btn-submit::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 38%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-130%) skewX(-22deg);
  animation: lbPrimaryCtaSheen 7.5s ease-in-out infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .patron-landscape-ewt,
  #patron-prejoin-ewt-banner.is-ewt,
  #patron-btn-submit::after,
  .stellar-slide.active,
  .stellar-nav-title.is-slot-flipping,
  .stellar-nav-progress-fill.is-animating {
    animation: none !important;
  }
}