/* Customer-only responsive corrections. Load after component and brand styles.
   Content may grow for long names, expanded details, zoom and the keyboard;
   do not clip a payment detail or an action to force a one-screen layout. */
#customer-view .prepaid-shell,
#customer-view .prepaid-shell > *,
#customer-view .station-summary > div,
#customer-view .member-option > span,
#customer-view .bank-transfer > div,
#customer-view .live-stats > div {
  min-width: 0;
}
#customer-view .station-summary > div { flex: 1; }
#customer-view .station-facts { flex-wrap: wrap; }
#customer-view #customer-rate { margin-left: auto; }
#customer-view #customer-name,
#customer-view #customer-error,
#customer-view #customer-readiness,
#customer-view #member-start-reason,
#customer-view #member-final-status,
#customer-view #topup-site,
#customer-view #topup-status,
#customer-view .bank-transfer strong,
#customer-view .bank-transfer p,
#customer-view .receipt-lines b {
  overflow-wrap: anywhere;
}
#customer-view .prepaid-shell .station-summary h1 {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
#customer-view .bank-transfer > .bank-icon { flex-shrink: 0; }
#customer-view .bank-transfer strong { display: block; line-height: 1.45; }
#customer-view .bank-transfer p { line-height: 1.6; }
#customer-view .receipt-lines > div { align-items: baseline; gap: 12px; }
#customer-view .receipt-lines b { text-align: right; }
#customer-view .live-stats b { overflow-wrap: anywhere; }
#customer-view .member-option { align-items: center; }
#customer-view .member-option > .ui-icon { flex-shrink: 0; }
#customer-view .member-option b,
#customer-view .member-option small { overflow-wrap: anywhere; }
#customer-view .prepaid-shell > .member-journey { position: relative; bottom: auto; }
#customer-view #customer-details > summary,
#customer-view #customer-notice > summary { min-height: 44px; }

/* The compact information icon has a full touch target beside the title. */
#customer-view .prepaid-shell:not([data-view="membership-choice"]) #customer-details:not([open]) {
  top: 8px;
  right: 9px;
  width: 44px;
  height: 44px;
  min-height: 44px;
}
#customer-view .prepaid-shell:not([data-view="membership-choice"]) #customer-details:not([open]) > summary {
  width: 44px;
  height: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#customer-view .prepaid-shell:not([data-view="membership-choice"]) .station-summary h1 { padding-right: 42px; }
#customer-view .prepaid-shell .button.full { min-height: 48px; font-size: 14px; }
#customer-view .prepaid-shell .text-button { min-height: 44px; }
#customer-view .prepaid-shell #member-signout,
#customer-view .prepaid-shell #budget-presets-back,
#customer-view .prepaid-shell #phone-resume { font-size: 12px; }
#customer-view .prepaid-shell .budget-choice { min-height: 44px; }
#customer-view .prepaid-shell #custom-budget { font-size: 13px; }
#customer-view .prepaid-shell .budget-choice small { font-size: 11px; }
#customer-view .prepaid-shell .pane-copy { font-size: 12px; line-height: 1.65; }
#customer-view .prepaid-shell .credit-card > span,
#customer-view .prepaid-shell .credit-card > small { font-size: 12px; line-height: 1.5; }
#customer-view .prepaid-shell .upload-slip small { font-size: 12px; line-height: 1.5; }
#customer-view .prepaid-shell .upload-slip > span { min-width: 0; }
#customer-view .prepaid-shell .bank-transfer p { font-size: 12px; }
#customer-view .prepaid-shell #copy-account { min-height: 44px; font-size: 14px; }
#customer-view .prepaid-shell .member-journey > div { font-size: 10px; line-height: 1.4; }
#customer-view .prepaid-shell .member-journey > div > span { overflow-wrap: anywhere; }
#customer-view .prepaid-shell .member-welcome { align-items: center; }
#customer-view .prepaid-shell #member-greeting { min-width: 0; }
#customer-view .prepaid-shell #member-signout { flex-shrink: 0; }
#customer-view #topup-panel > h2 { padding-left: 0; }

/* These panels are moved into SweetAlert by the existing modal controller. */
#member-pin-dialog,
#phone-otp-dialog,
#customer-support-dialog { min-width: 0; max-width: 100%; }
#member-pin-dialog #pin-description,
#member-pin-dialog #pin-error,
#phone-otp-dialog #phone-sent,
#phone-otp-dialog #phone-otp-status { overflow-wrap: anywhere; }
#member-pin-dialog .pin-pad { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#member-pin-dialog .pin-pad > button { min-height: 48px; max-width: 100%; }
#member-pin-dialog #pin-description,
#member-pin-dialog #pin-error,
#phone-otp-dialog .otp-fields legend,
#phone-otp-dialog #phone-otp-status { font-size: 12px; }
#phone-otp-dialog #phone-otp-close { min-height: 44px; font-size: 14px; }
#phone-otp-dialog .otp-inputs { min-width: 0; }
#phone-otp-dialog .otp-inputs input { max-width: 100%; }
#phone-otp-dialog .button { min-height: 48px; }
#customer-support-dialog .customer-help-heading > div,
#customer-support-dialog .customer-help-detail-heading > div { min-width: 0; }
#customer-support-dialog .customer-help-heading,
#customer-support-dialog .customer-help-detail-heading { align-items: flex-start; }
#customer-support-dialog .customer-help-heading h2,
#customer-support-dialog .customer-help-heading p,
#customer-support-dialog .customer-help-detail-heading h3,
#customer-support-dialog .customer-help-case small,
#customer-support-dialog .customer-help-case em { overflow-wrap: anywhere; }
#customer-support-dialog .customer-help-list-heading { flex-wrap: wrap; }
#customer-support-dialog .customer-help-tabs button { min-height: 48px; }
#customer-support-dialog .customer-help-auto,
#customer-support-dialog .customer-help-context,
#customer-support-dialog .customer-help-case small,
#customer-support-dialog .customer-help-timeline time { font-size: 12px; }
#customer-support-dialog .customer-help-categories label { min-width: 0; }
#customer-support-dialog .customer-help-categories label > span { min-width: 0; overflow-wrap: anywhere; }
#customer-support-dialog .customer-help-current { padding: 16px; }
.customer-wallet-history { min-width: 0; max-width: 100%; }
.customer-wallet-history .credit-report-row,
.customer-wallet-history .credit-history-row { align-items: baseline; gap: 12px; min-width: 0; }
.customer-wallet-history .credit-report-row { min-height: 52px; }
.customer-wallet-history .credit-report-row > span,
.customer-wallet-history .credit-history-row > span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.customer-wallet-history .credit-report-row > b,
.customer-wallet-history .credit-history-row > b { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.customer-wallet-history .credit-report-row small,
.customer-wallet-history .credit-history-row small { font-size: 12px; line-height: 1.5; }

@media (max-width: 700px) {
  #customer-view > header { gap: 12px; }
  #customer-view > header .brand { min-width: 0; }
  #customer-view > header .brand img { max-width: 100%; }
  #customer-view > header #customer-help { flex-shrink: 0; }
  #customer-view .prepaid-shell .member-journey { padding-bottom: 4px; }
  #customer-view .prepaid-shell #customer-error:not(:empty) { margin: 10px 0; }
}
@media (max-width: 370px) {
  #customer-view > header { padding-left: 14px; padding-right: 14px; }
  #customer-view .prepaid-shell .phone-inputs { column-gap: 2px; }
  #customer-view .prepaid-shell .phone-inputs input { border-radius: 6px; }
  #customer-view .prepaid-shell .phone-separator { font-size: 12px; }
  #customer-view #customer-details .station-equipment-card { align-items: flex-start; }
  #customer-view #customer-details .station-equipment-picture,
  #customer-view #customer-equipment-image .charger-visual { width: 72px; min-width: 72px; flex-basis: 72px; }
  #customer-view #customer-equipment-image .charger-image-frame { width: 72px; height: 88px; }
  #customer-support-dialog .customer-help-categories > div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) and (max-height: 600px) {
  #customer-view .prepaid-shell .member-welcome { min-height: 36px; }
  #customer-view .prepaid-shell .member-welcome .text-button { padding-top: 6px; padding-bottom: 6px; }
  #customer-view .prepaid-shell .credit-card { margin-top: 4px; margin-bottom: 7px; padding-top: 6px; padding-bottom: 6px; }
  #customer-view .prepaid-shell .budget-presets { gap: 6px; margin-top: 6px; margin-bottom: 6px; }
  #customer-view .prepaid-shell #funding-summary { margin-top: 5px; margin-bottom: 5px; }
  #customer-view .prepaid-shell > .member-journey { padding-top: 9px; }
  #customer-view .prepaid-shell #member-final-status { margin-top: 12px; margin-bottom: 12px; padding: 12px; }
}
@media (max-height: 460px) {
  #member-pin-dialog { padding-top: 8px; }
  #member-pin-dialog .otp-symbol { display: none; }
  #member-pin-dialog .pin-pad { row-gap: 6px; }
  #phone-otp-dialog .otp-symbol { margin-bottom: 9px; }
}