@use '../styles/variables' as *;

.pay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-4;

  &__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
  }

  &__panel {
    position: relative;
    z-index: 1;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: $radius-xl;
    box-shadow: $shadow-xl;
    width: 100%;
    max-width: 460px;
    overflow: hidden;
  }

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: $spacing-4 $spacing-6;
    background: linear-gradient(135deg, $primary-700, $primary-500);
    color: #fff;
  }

  &__header-left { display: flex; align-items: center; gap: $spacing-3; }
  &__header-icon { opacity: 0.9; }

  &__title {
    font-size: $font-size-lg;
    font-weight: $font-weight-semibold;
    color: #fff;
  }

  &__close {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    padding: $spacing-1;
    border-radius: $radius-base;
    display: flex;
    align-items: center;
    transition: color $transition-fast;

    &:hover { color: #fff; }
  }

  &__summary {
    padding: $spacing-4 $spacing-6;
    background: var(--clr-surface-raised, #{$gray-50});
    border-bottom: 1px solid var(--clr-border);
  }

  &__summary-label {
    font-size: $font-size-xs;
    font-weight: $font-weight-semibold;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--clr-text-muted);
    margin-bottom: $spacing-2;
  }

  &__summary-row {
    display: flex;
    justify-content: space-between;
    font-size: $font-size-sm;
    color: var(--clr-text-secondary);
    padding: $spacing-1 0;

    &--total {
      margin-top: $spacing-3;
      padding-top: $spacing-3;
      border-top: 1px solid var(--clr-border);
      font-weight: $font-weight-semibold;
      color: var(--clr-text);
    }
  }

  &__deposit-amt {
    font-size: $font-size-lg;
    font-weight: $font-weight-bold;
    color: var(--clr-primary);
  }

  &__form {
    padding: $spacing-6;
    display: flex;
    flex-direction: column;
    gap: $spacing-4;
  }

  &__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: $spacing-4;
  }

  &__field { display: flex; flex-direction: column; gap: $spacing-2; }

  &__label {
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
    color: var(--clr-text);
  }

  &__input {
    padding: $spacing-3 $spacing-4;
    background: var(--clr-surface-raised, #{$gray-50});
    border: 1px solid var(--clr-border);
    border-radius: $radius-base;
    font-size: $font-size-sm;
    font-family: $font-family-base;
    color: var(--clr-text);
    outline: none;
    transition: border-color $transition-fast, box-shadow $transition-fast;

    &::placeholder { color: var(--clr-text-muted); }

    &:focus {
      border-color: $primary-400;
      box-shadow: 0 0 0 3px rgba($primary-400, 0.18);
    }

    &:disabled { opacity: 0.55; cursor: not-allowed; }

    &--error {
      border-color: $color-error;
      &:focus { box-shadow: 0 0 0 3px rgba($color-error, 0.18); }
    }
  }

  &__error { font-size: $font-size-xs; color: $color-error; }

  &__pay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: $spacing-2;
    padding: $spacing-4;
    background: var(--clr-primary);
    color: #fff;
    border: none;
    border-radius: $radius-base;
    font-size: $font-size-base;
    font-weight: $font-weight-semibold;
    font-family: $font-family-base;
    cursor: pointer;
    transition: background $transition-fast;
    margin-top: $spacing-2;

    &:hover:not(:disabled) { background: var(--clr-primary-hover); }
    &:disabled { opacity: 0.55; cursor: not-allowed; }
  }

  &__spinner { animation: pay-spin 0.8s linear infinite; }

  &__secure-note {
    text-align: center;
    font-size: $font-size-xs;
    color: var(--clr-text-muted);
  }

  // Payment method tabs
  &__methods {
    display: flex;
    border-bottom: 1px solid var(--clr-border);
  }

  &__method-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: $spacing-2;
    padding: $spacing-3 $spacing-2;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
    font-family: $font-family-base;
    color: var(--clr-text-secondary);
    cursor: pointer;
    transition: color $transition-fast, border-color $transition-fast;

    &:hover:not(:disabled) { color: var(--clr-text); }
    &:disabled { opacity: 0.5; cursor: not-allowed; }

    &--active {
      color: var(--clr-primary);
      border-bottom-color: var(--clr-primary);
    }
  }

  // Google Pay preview
  &__gpay-preview {
    background: var(--clr-surface-raised, #{$gray-50});
    border: 1px solid var(--clr-border);
    border-radius: $radius-lg;
    padding: $spacing-5;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: $spacing-2;
    align-items: center;
  }

  &__gpay-logo {
    font-size: $font-size-xl;
    font-family: $font-family-base;
    letter-spacing: 0;
  }

  &__gpay-account {
    font-size: $font-size-sm;
    color: var(--clr-text-secondary);
  }

  &__gpay-card {
    font-size: $font-size-xs;
    color: var(--clr-text-muted);
  }

  &__pay-btn--gpay {
    background: #1a73e8;
    &:hover:not(:disabled) { background: #1557b0; }
  }

  // Bank transfer info
  &__bank-info {
    background: var(--clr-surface-raised, #{$gray-50});
    border: 1px solid var(--clr-border);
    border-radius: $radius-lg;
    overflow: hidden;
  }

  &__bank-label {
    font-size: $font-size-xs;
    font-weight: $font-weight-semibold;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--clr-text-muted);
    padding: $spacing-3 $spacing-4;
    background: var(--clr-border);
  }

  &__bank-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: $spacing-2 $spacing-4;
    font-size: $font-size-sm;
    border-bottom: 1px solid var(--clr-border);
    gap: $spacing-4;

    &:last-child { border-bottom: none; }

    span:first-child {
      color: var(--clr-text-secondary);
      flex-shrink: 0;
    }
    span:last-child {
      color: var(--clr-text);
      text-align: right;
    }

    &--total {
      font-weight: $font-weight-semibold;
      background: var(--clr-surface);
    }
  }

  &__bank-mono {
    font-family: $font-family-mono;
    font-size: $font-size-xs !important;
  }

  // Done state
  &__done {
    padding: $spacing-10 $spacing-6;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: $spacing-3;
  }

  &__done-icon { color: $accent-500; }

  &__done-title {
    font-size: $font-size-xl;
    font-weight: $font-weight-semibold;
    color: var(--clr-text);
  }

  &__done-sub { font-size: $font-size-sm; color: var(--clr-text-secondary); }
}

@keyframes pay-spin { to { transform: rotate(360deg); } }
