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

.rs {
  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; }
  }

  &__body {
    padding: $spacing-6;
    display: flex;
    flex-direction: column;
    gap: $spacing-5;
  }

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

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

  &__label {
    display: flex;
    align-items: center;
    gap: $spacing-2;
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
    color: var(--clr-text);
  }

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

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

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

  &__slots {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-2;
  }

  &__slot {
    padding: $spacing-2 $spacing-3;
    background: var(--clr-surface-raised, #{$gray-50});
    border: 1px solid var(--clr-border);
    border-radius: $radius-base;
    font-size: $font-size-xs;
    font-family: $font-family-base;
    color: var(--clr-text-secondary);
    cursor: pointer;
    transition: background $transition-fast, border-color $transition-fast, color $transition-fast;

    &:hover:not(:disabled) {
      background: $primary-50;
      border-color: $primary-300;
      color: $primary-700;
    }

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

    &--active {
      background: var(--clr-primary);
      border-color: var(--clr-primary);
      color: #fff;
    }
  }

  &__footer {
    display: flex;
    justify-content: flex-end;
    gap: $spacing-3;
    padding-top: $spacing-2;
    border-top: 1px solid var(--clr-border);
  }

  &__cancel-btn {
    padding: $spacing-2 $spacing-5;
    background: transparent;
    border: 1px solid var(--clr-border);
    border-radius: $radius-base;
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
    font-family: $font-family-base;
    color: var(--clr-text-secondary);
    cursor: pointer;
    transition: background $transition-fast;

    &:hover:not(:disabled) { background: var(--clr-surface-raised); }
    &:disabled { opacity: 0.5; cursor: not-allowed; }
  }

  &__confirm-btn {
    display: inline-flex;
    align-items: center;
    gap: $spacing-2;
    padding: $spacing-2 $spacing-5;
    background: var(--clr-primary);
    color: #fff;
    border: none;
    border-radius: $radius-base;
    font-size: $font-size-sm;
    font-weight: $font-weight-semibold;
    font-family: $font-family-base;
    cursor: pointer;
    transition: background $transition-fast, opacity $transition-fast;

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

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

  // 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);
    margin-bottom: $spacing-3;
  }
}

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