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

@mixin control-base {
  width: 100%;
  padding: $spacing-3 $spacing-4;
  background: var(--clr-surface-raised, #{$gray-50});
  border: 1px solid var(--clr-border, #{$color-border});
  border-radius: $radius-base;
  font-size: $font-size-sm;
  color: var(--clr-text, #{$color-text-primary});
  transition: border-color $transition-fast, box-shadow $transition-fast, background $transition-fast;
  outline: none;

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

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

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

@mixin btn-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: $spacing-2;
  padding: $spacing-3 $spacing-6;
  border-radius: $radius-base;
  font-size: $font-size-sm;
  font-weight: $font-weight-semibold;
  font-family: $font-family-base;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background $transition-fast, color $transition-fast, border-color $transition-fast;

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

// ── Block ─────────────────────────────────────────────────────────────────────
.booking-form {
  background: var(--clr-surface, #{$color-surface});
  border-radius: $radius-xl;
  box-shadow: $shadow-md;
  border: 1px solid var(--clr-border, #{$color-border});
  overflow: hidden;
  width: 100%;
  max-width: 680px;
  margin-inline: auto;

  // ── Elements ────────────────────────────────────────────────────────────────
  &__header {
    display: flex;
    align-items: center;
    gap: $spacing-4;
    padding: $spacing-6 $spacing-8;
    background: linear-gradient(135deg, $primary-700, $primary-500);
    color: #fff;
  }

  &__icon { flex-shrink: 0; opacity: 0.9; }

  &__title {
    font-size: $font-size-xl;
    font-weight: $font-weight-semibold;
    color: #fff;
    margin-bottom: $spacing-1;
  }

  &__subtitle {
    font-size: $font-size-sm;
    color: rgba(255, 255, 255, 0.8);
  }

  &__banner {
    display: flex;
    align-items: center;
    gap: $spacing-3;
    padding: $spacing-3 $spacing-8;
    font-size: $font-size-sm;
    border-bottom: 1px solid transparent;

    &--success {
      background: $accent-50;
      color: $accent-700;
      border-bottom-color: $accent-200;
    }

    &--error {
      background: #fef2f2;
      color: #991b1b;
      border-bottom-color: #fecaca;
    }
  }

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

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

    @media (max-width: $bp-sm) { grid-template-columns: 1fr; }
  }

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

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

  &__label-icon { color: $primary-500; }

  &__required { color: $color-error; margin-left: $spacing-1; }

  &__optional {
    font-size: $font-size-xs;
    font-weight: $font-weight-normal;
    color: var(--clr-text-muted, #{$color-text-muted});
    margin-left: $spacing-2;
  }

  &__select-wrapper {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      right: $spacing-4;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid $gray-500;
      pointer-events: none;
    }
  }

  &__select {
    @include control-base;
    appearance: none;
    padding-right: $spacing-10;
    cursor: pointer;

    &--error {
      border-color: $color-error;

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

  &__input {
    @include control-base;
    font-family: $font-family-base;

    &::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; }

    &--error {
      border-color: $color-error;

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

  &__textarea {
    @include control-base;
    resize: vertical;
    min-height: 100px;
    line-height: $line-height-relaxed;
    font-family: $font-family-base;
  }

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

  &__hint {
    font-size: $font-size-xs;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: $radius-base;
    padding: $spacing-2 $spacing-3;
  }

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

    @media (max-width: $bp-sm) { flex-direction: column-reverse; }
  }

  &__btn {
    @include btn-base;

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

      &:hover:not(:disabled) {
        background: var(--clr-primary-hover, #{$color-primary-hover});
        border-color: var(--clr-primary-hover, #{$color-primary-hover});
      }
    }

    &--secondary {
      background: transparent;
      color: var(--clr-text-secondary, #{$color-text-secondary});
      border-color: var(--clr-border, #{$color-border});

      &:hover:not(:disabled) {
        background: var(--clr-surface-raised, #{$gray-100});
        color: var(--clr-text, #{$color-text-primary});
      }
    }
  }

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

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