/**
 * Post-trip payment modal (rider)
 */

#ddg-payment-modal.modal-overlay {
  z-index: 300;
  background: rgba(8, 12, 18, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#ddg-payment-modal .payment-modal-card {
  max-width: 24rem;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--ddg-surface-elevated);
  color: var(--ddg-text);
  border: 1px solid var(--ddg-border);
  box-shadow: 0 12px 40px rgba(15, 20, 25, 0.28);
}

.payment-modal__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.payment-modal__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background: rgba(var(--ddg-yellow-rgb, 245, 197, 24), 0.22);
  border: 1px solid rgba(var(--ddg-yellow-rgb, 245, 197, 24), 0.35);
  color: var(--ddg-accent-gold, #c9a000);
  font-size: 0.95rem;
}

.payment-modal__head-copy {
  min-width: 0;
}

#ddg-payment-modal .payment-modal-card h3 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--ddg-sage-dark);
}

.payment-modal-lead {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ddg-text-muted);
}

.payment-modal-amount-wrap {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  text-align: center;
  border-radius: var(--radius-md);
  background: rgba(var(--ddg-yellow-rgb, 245, 197, 24), 0.12);
  border: 1px solid rgba(var(--ddg-yellow-rgb, 245, 197, 24), 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.payment-modal-amount-label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ddg-text-muted);
}

.payment-modal-amount {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--ddg-sage-dark);
}

.payment-method-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.payment-method-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 3.5rem;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  text-align: left;
  color: var(--ddg-text);
  background: var(--ddg-surface-warm);
  border: 1px solid var(--ddg-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

.payment-method-btn:hover {
  border-color: rgba(var(--ddg-edge-rgb, 46, 125, 110), 0.55);
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 20, 25, 0.08);
}

.payment-method-btn:active {
  transform: scale(0.99);
}

.payment-method-btn:focus-visible {
  outline: 2px solid var(--ddg-accent-gold);
  outline-offset: 2px;
}

.payment-method-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.payment-method-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  padding: 0.38rem;
  box-shadow: 0 2px 10px rgba(15, 20, 25, 0.14);
}

.payment-method-mark--cash {
  background: #e8f5ec;
  color: #2e7d51;
}

.payment-method-mark--cash_app {
  background: #00d632;
}

.payment-method-mark--venmo {
  background: #008cff;
}

.payment-method-mark--apple_cash {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 0.28rem 0.32rem;
}

.payment-method-mark--stripe {
  background: #635bff;
}

.payment-method-mark__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.payment-method-mark__img--invert {
  filter: brightness(0) invert(1);
}

html[data-theme='dark'] .payment-method-mark--apple_cash {
  background: #f5f5f7;
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme='dark'] .payment-method-mark--cash {
  background: rgba(46, 125, 81, 0.35);
  color: #8fd4a8;
}

.payment-method-btn__text {
  flex: 1;
  min-width: 0;
}

.payment-method-btn__name {
  display: block;
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.25;
}

.payment-method-btn__hint {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ddg-text-muted);
}

.payment-method-btn__chev {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--ddg-text-muted);
  opacity: 0.65;
}

.payment-method-btn--cash:hover {
  border-color: rgba(46, 125, 51, 0.45);
}

.payment-method-btn--cash_app:hover {
  border-color: rgba(0, 214, 50, 0.5);
}

.payment-method-btn--venmo:hover {
  border-color: rgba(0, 140, 255, 0.5);
}

.payment-method-btn--apple_cash:hover {
  border-color: rgba(29, 29, 31, 0.35);
}

.payment-method-btn--stripe:hover {
  border-color: rgba(99, 91, 255, 0.5);
}

[data-payment-picker][hidden] {
  display: none !important;
}

[data-payment-picker]:not([hidden]) {
  display: block;
}

.payment-panel {
  display: none;
}

.payment-panel.is-active {
  display: block;
}

.payment-panel__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  padding: var(--space-1) 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ddg-sage);
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}

.payment-panel__back:hover,
.payment-panel__back:focus-visible {
  color: var(--ddg-sage-dark);
  outline: none;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.payment-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--ddg-border);
}

.payment-panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--ddg-sage-dark);
}

.payment-panel__copy {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ddg-text-muted);
}

#stripe-payment-element {
  margin-bottom: var(--space-3);
  min-height: 2.5rem;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--ddg-surface-warm);
  border: 1px solid var(--ddg-border);
}

.payment-stripe-note {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--ddg-text-muted);
  background: var(--ddg-surface-warm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--ddg-border);
}

.payment-modal-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.payment-modal-actions .btn-primary,
.payment-modal-actions .btn-secondary {
  width: 100%;
}

.payment-modal-actions .btn-apple-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--btn-h);
  padding: 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: #fff;
  background: #000;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.payment-modal-actions #ddg-pay-apple {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--btn-h);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
}

.payment-modal-actions .btn-apple-pay:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.payment-unavailable {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ddg-text-muted);
  background: var(--ddg-surface-warm);
  border-radius: var(--radius-md);
  border: 1px solid var(--ddg-border);
}

html[data-theme='dark'] #ddg-payment-modal .payment-modal-card {
  background: var(--ddg-sheet-elevated);
  color: var(--ddg-text-on-dark);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme='dark'] #ddg-payment-modal .payment-modal-card h3,
html[data-theme='dark'] #ddg-payment-modal .payment-panel__title {
  color: var(--ddg-text-on-dark);
}

html[data-theme='dark'] #ddg-payment-modal .payment-modal-amount {
  color: var(--ddg-accent-gold-light);
}

html[data-theme='dark'] #ddg-payment-modal .payment-modal-amount-wrap {
  background: rgba(var(--ddg-yellow-rgb, 245, 197, 24), 0.14);
  border-color: rgba(var(--ddg-yellow-rgb, 245, 197, 24), 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme='dark'] #ddg-payment-modal .payment-modal-lead,
html[data-theme='dark'] #ddg-payment-modal .payment-panel__copy,
html[data-theme='dark'] #ddg-payment-modal .payment-stripe-note,
html[data-theme='dark'] #ddg-payment-modal .payment-unavailable {
  color: var(--ddg-text-muted-on-dark);
}

html[data-theme='dark'] #ddg-payment-modal .payment-method-btn {
  color: var(--ddg-text-on-dark);
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme='dark'] #ddg-payment-modal .payment-method-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(var(--ddg-yellow-rgb, 245, 197, 24), 0.45);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

html[data-theme='dark'] #ddg-payment-modal .payment-method-btn__hint,
html[data-theme='dark'] #ddg-payment-modal .payment-method-btn__chev {
  color: var(--ddg-text-muted-on-dark);
}

html[data-theme='dark'] #ddg-payment-modal .payment-panel__head {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

html[data-theme='dark'] #ddg-payment-modal #stripe-payment-element {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.1);
}