/* AURELION_OFFICE_TOPUPS_EQUAL_PANELS_V424_CSS_START */
/* Equalize topup panels and prevent payment button clipping. CSS-only part. */

body.aurelion-office-shell-v124 .office-main-pane.active .office-topup-grid,
body.aurelion-office-shell-v124 .office-main-pane .office-topup-grid,
body.aurelion-office-shell-v124 .office-topup-grid {
  align-items: stretch !important;
}

/* Both white cards should have the same visual height */
body.aurelion-office-shell-v124 .office-topup-grid > .office-card,
body.aurelion-office-shell-v124 .office-topup-grid > .topup-panel,
body.aurelion-office-shell-v124 .office-topup-grid > .topup-history-panel,
body.aurelion-office-shell-v124 .office-topup-grid > .office-topup-panel,
body.aurelion-office-shell-v124 .office-topup-grid > .office-topup-history-panel {
  min-height: 540px !important;
  height: 100% !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
}

/* History list stays compact at the top, it should not stretch rows */
body.aurelion-office-shell-v124 .office-topup-grid .office-topups-list-compact-v422,
body.aurelion-office-shell-v124 .office-topup-grid .office-topups-list-equal-v424,
body.aurelion-office-shell-v124 .office-topup-grid .topup-history-list,
body.aurelion-office-shell-v124 .office-topup-grid .office-topup-history-list {
  flex: 0 0 auto !important;
  align-self: stretch !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 430px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Slightly taller compact rows so the payment button is not clipped */
body.aurelion-office-shell-v124 .office-topups-row-compact-v422,
body.aurelion-office-shell-v124 .office-topups-row-equal-v424,
body.aurelion-office-shell-v124 .office-row.office-topup-row,
body.aurelion-office-shell-v124 .office-topup-row {
  height: 78px !important;
  min-height: 78px !important;
  max-height: 78px !important;
  flex: 0 0 78px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* Do not clip inner button/date block */
body.aurelion-office-shell-v124 .office-topups-row-compact-v422 > div,
body.aurelion-office-shell-v124 .office-topups-row-equal-v424 > div,
body.aurelion-office-shell-v124 .office-topup-row > div {
  min-height: 0 !important;
  max-height: 58px !important;
  overflow: visible !important;
}

body.aurelion-office-shell-v124 .office-topups-row-compact-v422 > div:last-child,
body.aurelion-office-shell-v124 .office-topups-row-equal-v424 > div:last-child,
body.aurelion-office-shell-v124 .office-topup-row > div:last-child {
  max-height: 58px !important;
  gap: 6px !important;
  overflow: visible !important;
}

body.aurelion-office-shell-v124 .office-topups-row-compact-v422 a,
body.aurelion-office-shell-v124 .office-topups-row-equal-v424 a,
body.aurelion-office-shell-v124 .office-topup-row a {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  line-height: 32px !important;
  padding: 0 14px !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

@media (max-width: 980px) {
  body.aurelion-office-shell-v124 .office-topup-grid > .office-card,
  body.aurelion-office-shell-v124 .office-topup-grid > .topup-panel,
  body.aurelion-office-shell-v124 .office-topup-grid > .topup-history-panel,
  body.aurelion-office-shell-v124 .office-topup-grid > .office-topup-panel,
  body.aurelion-office-shell-v124 .office-topup-grid > .office-topup-history-panel {
    min-height: 0 !important;
    height: auto !important;
  }

  body.aurelion-office-shell-v124 .office-topups-row-compact-v422,
  body.aurelion-office-shell-v124 .office-topups-row-equal-v424,
  body.aurelion-office-shell-v124 .office-row.office-topup-row,
  body.aurelion-office-shell-v124 .office-topup-row {
    height: auto !important;
    min-height: 86px !important;
    max-height: none !important;
  }
}
/* AURELION_OFFICE_TOPUPS_EQUAL_PANELS_V424_CSS_END */