/*
 * modern-payment-keypad.css — payment-confirmation dialog reference-entry +
 * numeric keypad, and the modify-payment menu. GLOBAL (skins the Bootstrap
 * #paymentConfirmationDialog rendered outside component scope). This is the
 * continuation of the payment-confirm dialog skin from modern-dialog-skins.css;
 * it lives in its own file only because the responsive/keyframes block sits
 * between the two in source order.
 *
 * Phase 6 split: peeled verbatim off the (post-tranche-3) end of modern-base.css
 * (was lines 11130-11440). Loaded via index.html AFTER modern-responsive.css
 * and BEFORE modern-orders.css — source order is load-bearing.
 */

body:has(.scale-modern-payment) #paymentConfirmationDialog.modal.show {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--scale-overlay) !important;
  font-family: var(--scale-font-sans) !important;
}

/* Dynamic width: the dialog stays compact for a plain method/reference list and
   only widens to fit the QWERTY reference keypad when it is actually shown
   (:has(.custom-keypad-container)). The width animates as the keypad toggles. */
body:has(.scale-modern-payment) #paymentConfirmationDialog .modal-dialog {
  width: min(96vw, 560px) !important;
  max-width: 560px !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 auto !important;
  transform: none !important;
  transition: width 160ms var(--scale-ease-out-ios), max-width 160ms var(--scale-ease-out-ios);
}

body:has(.scale-modern-payment) #paymentConfirmationDialog .modal-dialog:has(.custom-keypad-container) {
  width: min(96vw, 900px) !important;
  max-width: 900px !important;
}

body:has(.scale-modern-payment) #paymentConfirmationDialog .modal-content {
  height: auto !important;
  max-height: 96vh !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--scale-bg) !important;
  color: var(--scale-text) !important;
  box-shadow: var(--scale-shadow-sheet, 0 24px 60px rgba(0, 0, 0, 0.28)) !important;
  overflow: hidden !important;
}

/* Centred dialog — no drag-handle grabber. */
body:has(.scale-modern-payment) #paymentConfirmationDialog .modal-content::before {
  content: none;
}

body:has(.scale-modern-payment) #paymentConfirmationDialog .modal-header {
  min-height: 54px !important;
  padding: 2px 16px 12px !important;
  border: 0 !important;
  background: transparent !important;
  display: grid !important;
  grid-template-columns: 120px minmax(0, 1fr) 120px !important;
  align-items: center !important;
}

body:has(.scale-modern-payment) #paymentConfirmationDialog .scale-modern-sheet-cancel {
  width: fit-content;
  min-width: 78px;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--scale-primary);
  font-family: var(--scale-font-sans);
  font-size: var(--scale-type-body-size);
  font-weight: 500;
  text-align: left;
}

body:has(.scale-modern-payment) #paymentConfirmationDialog .scale-modern-sheet-done {
  justify-self: end;
}

body:has(.scale-modern-payment) #paymentConfirmationDialog .modal-title {
  margin: 0 !important;
  min-width: 0;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  text-align: center;
}

body:has(.scale-modern-payment) #paymentConfirmationDialog .modal-body {
  max-height: calc(96vh - 76px) !important;
  overflow-y: auto !important;
  padding: 16px 16px !important;
}

body:has(.scale-modern-payment) #paymentConfirmationDialog .modal-footer {
  display: none !important;
}

body:has(.scale-modern-payment) .scale-modern-payment-confirm {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* "Total: 7.000 KWD · Provider Cari" bar under the titlebar (same vocabulary
   as the split dialog's total line / delivery-tip bill line). */
body:has(.scale-modern-payment) .scale-modern-confirm-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

body:has(.scale-modern-payment) .scale-modern-confirm-total {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

body:has(.scale-modern-payment) .scale-modern-confirm-total em {
  font-style: normal;
  color: var(--scale-text-soft);
  font-size: var(--scale-fs-14);
  font-weight: 500;
}

body:has(.scale-modern-payment) .scale-modern-confirm-total strong {
  color: var(--scale-text);
  font-family: var(--scale-font-sans);
  font-size: var(--scale-fs-18);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

body:has(.scale-modern-payment) .scale-modern-confirm-total small {
  color: var(--scale-text-soft);
  font-size: var(--scale-fs-12);
  font-weight: 600;
  letter-spacing: var(--scale-tracking-caps);
  text-transform: uppercase;
}

body:has(.scale-modern-payment) .scale-modern-confirm-provider {
  color: var(--scale-text-mute);
  font-size: var(--scale-fs-14);
  font-weight: 500;
}

body:has(.scale-modern-payment) .scale-modern-confirm-provider b {
  color: var(--scale-primary);
  font-weight: 700;
}

body:has(.scale-modern-payment) .scale-modern-reference-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body:has(.scale-modern-payment) .scale-modern-reference-option {
  min-height: 50px;
  padding: 10px 12px;
  border: 1px solid var(--scale-border);
  border-radius: 12px;
  background: var(--scale-panel);
  color: var(--scale-text);
  box-shadow: var(--scale-shadow-tile);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--scale-type-subheadline-size);
  font-weight: 500;
  position: relative;
}

body:has(.scale-modern-payment) .scale-modern-reference-option.is-selected {
  border-color: var(--scale-primary);
  background: var(--scale-primary-soft);
  /* Second inset ring so the selected border reads 2px without layout shift. */
  box-shadow: inset 0 0 0 1px var(--scale-primary), var(--scale-shadow-tile);
  font-weight: 600;
}

body:has(.scale-modern-payment) .scale-modern-reference-option input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body:has(.scale-modern-payment) .scale-modern-reference-option__check {
  width: 22px;
  height: 22px;
  border: 2px solid color-mix(in srgb, var(--scale-text-soft) 70%, transparent);
  border-radius: 999px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

body:has(.scale-modern-payment) .scale-modern-reference-option.is-selected .scale-modern-reference-option__check {
  border-color: var(--scale-primary);
  background: var(--scale-primary);
}

/* Selected radio renders a white CHECKMARK inside the filled primary circle. */
body:has(.scale-modern-payment) .scale-modern-reference-option.is-selected .scale-modern-reference-option__check::after {
  content: "";
  width: 9px;
  height: 5px;
  margin-top: -2px;
  border-left: 2px solid var(--scale-text-on-primary);
  border-bottom: 2px solid var(--scale-text-on-primary);
  transform: rotate(-45deg);
}

/* "Reference No *" block: small label above the entry, red-tinted border while
   the required reference is still empty (same affordance as the feedback
   Details field and the add-customer phone field). */
body:has(.scale-modern-payment) .scale-modern-reference-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body:has(.scale-modern-payment) .scale-modern-reference-label {
  color: var(--scale-text-mute);
  font-size: var(--scale-fs-13);
  font-weight: 500;
  padding: 0 2px;
}

body:has(.scale-modern-payment) .scale-modern-reference-req {
  color: var(--scale-danger);
  font-weight: 700;
}

body:has(.scale-modern-payment) .scale-modern-reference-entry {
  border: 1px solid var(--scale-border);
  border-radius: 12px;
  background: var(--scale-panel);
  box-shadow: var(--scale-shadow-tile);
  overflow: hidden;
}

body:has(.scale-modern-payment) .scale-modern-reference-entry.is-required {
  border-color: color-mix(in srgb, var(--scale-danger) 45%, var(--scale-border));
}

body:has(.scale-modern-payment) .scale-modern-reference-entry input::placeholder {
  color: var(--scale-text-soft);
  font-size: var(--scale-fs-13);
  font-weight: 400;
}

body:has(.scale-modern-payment) .scale-modern-reference-entry .mud-input-control {
  margin: 0 !important;
}

body:has(.scale-modern-payment) .scale-modern-reference-entry .mud-input-root {
  padding: 0 14px !important;
  font-family: var(--scale-font-sans) !important;
  font-size: var(--scale-type-title-3-size) !important;
  font-weight: 500 !important;
}

body:has(.scale-modern-payment) #paymentConfirmationDialog .custom-keypad-container {
  margin-top: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* One shared 13-column grid (10 letters + 3 numbers) so every key is the SAME
   unit width across the alphabet and number pads. Each keypad spans its share;
   the single 6px wrapper gap between the two spans also matches the in-row gap. */
body:has(.scale-modern-payment) #paymentConfirmationDialog .keypad-wrapper {
  display: grid !important;
  grid-template-columns: repeat(13, minmax(0, 1fr)) !important;
  gap: 6px !important;
  align-items: start !important;
}

body:has(.scale-modern-payment) #paymentConfirmationDialog .alphabet-keypad,
body:has(.scale-modern-payment) #paymentConfirmationDialog .numeric-keypad {
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

body:has(.scale-modern-payment) #paymentConfirmationDialog .alphabet-keypad {
  grid-column: span 10 !important;
}

body:has(.scale-modern-payment) #paymentConfirmationDialog .numeric-keypad {
  grid-column: span 3 !important;
}

body:has(.scale-modern-payment) #paymentConfirmationDialog .keypad-row {
  display: grid !important;
  grid-auto-flow: column;
  gap: 6px !important;
  justify-content: stretch !important;
}

body:has(.scale-modern-payment) #paymentConfirmationDialog .alphabet-keypad .keypad-row {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

/* Row 2 (A–L, 9 keys) holds fewer keys than row 1, so a fractional grid would
   stretch them wider. Every key is sized to exactly one tenth-unit of the row
   (100% minus the nine 6px gaps of a 10-key row) and the row centres — the
   letter keys stay identical to row 1's. */
body:has(.scale-modern-payment) #paymentConfirmationDialog .alphabet-keypad .keypad-row:nth-child(2) {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 54px) / 10);
  justify-content: center !important;
}

/* Row 3: the seven letters keep the same tenth-unit width; Clear and backspace
   flex (1fr each) to absorb the leftover space so the row COMPLETES the full
   keyboard width, matching the design. */
body:has(.scale-modern-payment) #paymentConfirmationDialog .alphabet-keypad .keypad-row:nth-child(3) {
  grid-template-columns: minmax(0, 1fr) repeat(7, calc((100% - 54px) / 10)) minmax(0, 1fr);
}

/* Those two wider action keys must not force their row taller — they stretch
   to the square letters' height instead. (The numeric pad's backspace is a
   single unit, so the base square rule still applies to it.) */
body:has(.scale-modern-payment) #paymentConfirmationDialog .alphabet-keypad .action-btn {
  aspect-ratio: auto !important;
  align-self: stretch !important;
}

body:has(.scale-modern-payment) #paymentConfirmationDialog .numeric-keypad .keypad-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Last numeric row is 0 / . / backspace — three equal square keys. */
body:has(.scale-modern-payment) #paymentConfirmationDialog .numeric-keypad .keypad-row:last-child {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Square keys: height follows the grid-driven width instead of a fixed tall
   value, so every key is a square rather than a vertical rectangle. */
body:has(.scale-modern-payment) #paymentConfirmationDialog .keypad-btn {
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  border: 1px solid var(--scale-border) !important;
  border-radius: var(--scale-keypad-radius) !important;
  background: var(--scale-panel) !important;
  color: var(--scale-text) !important;
  box-shadow: var(--scale-shadow-tile) !important;
  font-family: var(--scale-font-sans) !important;
  font-size: var(--scale-type-body-size) !important;
  font-weight: 600 !important;
  padding: 0 6px !important;
  flex: 0 1 auto !important;
}

/* Clear and both backspaces are one square unit like every other key — no
   aspect-ratio exceptions; the base .keypad-btn square rule covers them all. */
body:has(.scale-modern-payment) #paymentConfirmationDialog .action-btn {
  background: color-mix(in srgb, var(--scale-primary) 9%, var(--scale-panel)) !important;
  color: var(--scale-primary) !important;
  min-width: 0 !important;
  font-size: var(--scale-type-subheadline-size) !important;
}

body:has(.scale-modern-payment) #paymentConfirmationDialog .action-btn i {
  font-size: var(--scale-fs-17) !important;
}

body:has(.scale-modern-payment) .scale-modern-modify-payment {
  display: inline-flex;
}

body:has(.scale-modern-payment) .scale-modern-modify-payment__trigger {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--scale-primary) 9%, var(--scale-panel));
  color: var(--scale-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body:has(.scale-modern-payment) .scale-modern-modify-payment__trigger i {
  font-size: var(--scale-fs-18);
}

body:has(.scale-modern-payment) .scale-modern-modify-payment__menu {
  min-width: 190px;
  padding: 6px;
  border: 0;
  border-radius: 12px;
  background: var(--scale-panel);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
}

body:has(.scale-modern-payment) .scale-modern-modify-payment__menu .dropdown-item {
  min-height: 38px;
  border-radius: 9px;
  color: var(--scale-text);
  display: flex;
  align-items: center;
  font-family: var(--scale-font-sans);
  font-size: var(--scale-type-subheadline-size);
  font-weight: 500;
}

body:has(.scale-modern-payment) .scale-modern-modify-payment__menu .dropdown-item:hover {
  background: var(--scale-primary-soft);
  color: var(--scale-primary);
}

.scale-modern-orders {
  width: 100%;
  height: 100vh;
  min-width: 1024px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--scale-bg);
  color: var(--scale-text);
  font-family: var(--scale-font-sans);
  font-size: var(--scale-type-body-size);
  font-weight: 400;
}