/*
 * Dynamic deposit promotion + calculation UI.
 *
 * Suggested amount design:
 * - 5 amount buttons per row
 * - top-right red bonus strip
 * - selected red border/text
 * - selected bottom-right red corner
 * - white check mark
 */


/* =========================================
   SUGGESTED DEPOSIT AMOUNT GRID
   ========================================= */

.s-amounts {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: calc(14 * var(--v));

  align-items: stretch;

  overflow: visible;
}


/* =========================================
   AMOUNT BUTTON
   ========================================= */

.s-amounts button {
  position: relative;

  overflow: hidden;

  min-width: 0;

  min-height:
    calc(102 * var(--v));

  padding:
    calc(27 * var(--v))
    calc(5 * var(--v))
    calc(10 * var(--v));

  border:
    1px solid #eadcde;

  border-radius:
    calc(12 * var(--v));

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fffdfd 100%
    );

  color:
    #4f4f4f;

  box-shadow:
    none;

  font:
    700
    max(9px, calc(32 * var(--v)))
    / 1
    Arial,
    sans-serif;

  text-align:
    center;

  isolation:
    isolate;

  -webkit-tap-highlight-color:
    transparent;
}


.s-amounts button:active {
  transform:
    none;
}


/* =========================================
   MAIN AMOUNT TEXT
   ========================================= */

.s-amounts .s-amount-main {
  position:
    relative;

  z-index:
    2;

  display:
    block;

  width:
    100%;

  white-space:
    nowrap;
}


/* =========================================
   TOP BONUS STRIP
   ========================================= */

.s-amount-bonus {
  position:
    absolute;

  z-index:
    3;

  top:
    0;

  right:
    0;

  width:
    62%;

  height:
    calc(27 * var(--v));

  min-height:
    10px;

  padding:
    0
    calc(5 * var(--v));

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  border-radius:
    0
    calc(11 * var(--v))
    0
    calc(15 * var(--v));

  background:
    linear-gradient(
      180deg,
      #ff9aa0 0%,
      #f25a62 48%,
      #e94149 100%
    );

  color:
    #ffffff;

  font:
    800
    max(7px, calc(21 * var(--v)))
    / 1
    Arial,
    sans-serif;

  letter-spacing:
    0;

  white-space:
    nowrap;

  box-shadow:
    none;

  pointer-events:
    none;
}


/* =========================================
   SELECTED AMOUNT
   ========================================= */

.s-amounts button.selected {
  border-color:
    #ef4b55 !important;

  color:
    #e72f3a !important;

  background:
    #ffffff;

  box-shadow:
    inset
    0
    0
    0
    1px
    rgba(
      239,
      75,
      85,
      0.08
    );
}


.s-amounts button.selected
.s-amount-main {
  color:
    #e72f3a;
}


.s-amounts button.selected
.s-amount-bonus {
  background:
    linear-gradient(
      180deg,
      #ff898f 0%,
      #f24b55 50%,
      #df303b 100%
    );
}


/* =========================================
   SELECTED RED CORNER
   ========================================= */

.s-amounts button.selected::after {
  content:
    '';

  position:
    absolute;

  z-index:
    4;

  right:
    0;

  bottom:
    0;

  width:
    0;

  height:
    0;

  border-style:
    solid;

  border-width:
    0
    0
    calc(29 * var(--v))
    calc(29 * var(--v));

  border-color:
    transparent
    transparent
    #ef3c47
    transparent;

  pointer-events:
    none;
}


/* =========================================
   SELECTED WHITE CHECK
   ========================================= */

.s-amounts button.selected::before {
  content:
    '✓';

  position:
    absolute;

  z-index:
    5;

  right:
    calc(2 * var(--v));

  bottom:
    calc(1 * var(--v));

  color:
    #ffffff;

  font:
    900
    max(7px, calc(20 * var(--v)))
    / 1
    Arial,
    sans-serif;

  transform:
    rotate(-5deg);

  pointer-events:
    none;
}


/* =========================================
   MANUAL AMOUNT INPUT
   ========================================= */

.s-amount-input {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  gap:
    calc(25 * var(--v));

  min-height:
    calc(100 * var(--v));

  margin-top:
    calc(28 * var(--v));

  padding:
    calc(19 * var(--v))
    calc(27 * var(--v));

  overflow:
    hidden;
}


.s-amount-input input {
  min-width:
    0;

  flex:
    1;

  border:
    none;

  outline:
    none;

  background:
    none;

  color:
    #242424;

  font:
    700
    max(13px, calc(45 * var(--v)))
    / 1.2
    Arial,
    sans-serif;
}


.s-amount-input input::placeholder {
  color:
    #a0a1a1;
}


/* =========================================
   CAMPAIGN / BONUS SECTION
   ========================================= */

.s-campaign-option {
  align-items:
    flex-start !important;

  min-height:
    calc(130 * var(--v)) !important;
}


.s-campaign-option > input {
  margin-top:
    calc(5 * var(--v));
}


.s-campaign-copy {
  min-width:
    0;

  flex:
    1;

  display:
    grid;

  gap:
    calc(9 * var(--v));
}


.s-campaign-title-row {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    calc(10 * var(--v));

  font-weight:
    700;

  color:
    #3a3a3a;
}


.s-campaign-title-row b {
  min-width:
    0;

  flex:
    1;
}


.s-campaign-title-row span {
  margin-left:
    auto;

  color:
    #e1303c;

  font-weight:
    700;

  white-space:
    nowrap;
}


/* =========================================
   CAMPAIGN DETAILS
   ========================================= */

.s-campaign-details {
  margin-top:
    calc(5 * var(--v));

  padding-top:
    calc(11 * var(--v));

  border-top:
    1px solid
    rgba(
      220,
      80,
      92,
      0.16
    );

  color:
    #777777;

  line-height:
    1.55;

  font-size:
    max(
      9px,
      calc(27 * var(--v))
    );
}


.s-campaign-details strong {
  color:
    #d72d39;
}


.s-campaign-details ol {
  margin:
    calc(8 * var(--v))
    0
    0;

  padding-left:
    calc(42 * var(--v));
}


.s-campaign-details li {
  margin:
    calc(5 * var(--v))
    0;
}


.s-campaign-warning {
  margin-top:
    calc(10 * var(--v));

  color:
    #d72d39;

  font-size:
    max(
      9px,
      calc(27 * var(--v))
    );

  font-weight:
    700;
}


/* =========================================
   PAYMENT SUMMARY
   ========================================= */

.s-payment-summary {
  margin-top:
    calc(116 * var(--v));

  padding-top:
    calc(30 * var(--v));

  border-top:
    calc(18 * var(--v))
    solid
    #efefef;
}


.s-payment-summary h2 {
  margin-bottom:
    calc(24 * var(--v))
    !important;
}


.s-payment-summary-box {
  border:
    1px solid
    #ececec;

  border-radius:
    calc(14 * var(--v));

  overflow:
    hidden;

  background:
    #ffffff;
}


.s-payment-summary-row {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    calc(20 * var(--v));

  min-height:
    calc(92 * var(--v));

  padding:
    0
    calc(24 * var(--v));

  border-bottom:
    1px solid
    #f0f0f0;

  color:
    #8a8a8a;

  font-size:
    max(
      10px,
      calc(31 * var(--v))
    );
}


.s-payment-summary-row:last-child {
  border-bottom:
    0;
}


.s-payment-summary-row strong {
  color:
    #666666;

  white-space:
    nowrap;
}


.s-payment-summary-row.bonus strong {
  color:
    #0b9c70;
}


.s-payment-summary-row.credit strong {
  color:
    #e52c35;
}


/* =========================================
   DEPOSIT REQUEST LOADER
   ========================================= */

.s-deposit-request-loader {
  position:
    fixed;

  z-index:
    100001;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  pointer-events:
    auto;
}


.s-deposit-request-card {
  width:
    min(
      calc(465 * var(--v)),
      78vw
    );

  min-height:
    calc(220 * var(--v));

  padding:
    calc(28 * var(--v));

  border-radius:
    calc(12 * var(--v));

  background:
    rgba(
      54,
      54,
      54,
      0.92
    );

  color:
    #ffffff;

  display:
    grid;

  place-items:
    center;

  align-content:
    center;

  gap:
    calc(22 * var(--v));

  text-align:
    center;

  box-shadow:
    0
    calc(12 * var(--v))
    calc(34 * var(--v))
    rgba(
      0,
      0,
      0,
      0.22
    );
}


.s-deposit-request-card strong {
  font-size:
    max(
      11px,
      calc(33 * var(--v))
    );

  line-height:
    1.4;
}


.s-deposit-request-spinner {
  width:
    calc(76 * var(--v));

  height:
    calc(76 * var(--v));

  min-width:
    28px;

  min-height:
    28px;

  border-radius:
    50%;

  border:
    2px solid
    rgba(
      255,
      255,
      255,
      0.45
    );

  border-top-color:
    #ffffff;

  animation:
    s-deposit-request-spin
    0.8s
    linear
    infinite;
}


@keyframes s-deposit-request-spin {
  to {
    transform:
      rotate(360deg);
  }
}


@media (prefers-reduced-motion: reduce) {
  .s-deposit-request-spinner {
    animation-duration:
      1.6s;
  }
}