/* Overrides for time slots UI (selection + disabled marking)
   Keep this file small and loaded AFTER styles.css so it wins the cascade. */

/* Promo slot: keep green, but make selection visible with an outline (no underlines). */
.time-slot.promotion.selected,
.time-slot-unified.promotion.selected,
.time-slot-expandable.promotion.selected,
.time-slot-single.promotion.selected {
  /* keep existing green background from styles.css, add brand outline */
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(163, 131, 107, 0.25);
}

/* Highlight block that is missing time selection */
.attention-missing {
  border: 2px solid #ef4444 !important;
  border-radius: var(--radius-medium) !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15) !important;
}

/* Hint above the disabled "ЗАПИСАТЬСЯ" button on masters screen */
.masters-select-time-hint {
  margin: 0 0 10px 0;
  padding: 10px 12px;
  text-align: center;
  color: #7b5e48;
  background: rgb(255 255 255);
  border: 1px solid rgba(163, 131, 107, 0.35);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 0 10px 22px -14px rgba(163, 131, 107, 0.55);
}

/* Variant C: lock icon on disabled button */
.masters-select-time-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.masters-select-time-btn .book-btn-lock {
  display: none;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 0.95;
}

.masters-select-time-btn.disabled .book-btn-lock,
.masters-select-time-btn:disabled .book-btn-lock {
  display: inline-flex;
}

/* Make disabled button a bit more “blocked” looking (still consistent with base styles) */
.masters-select-time-btn.disabled,
.masters-select-time-btn:disabled {
  background: rgb(163 131 107 / 44%) !important; /* brand #A3836B */
  color: #fff !important;
  border: none !important;
  box-shadow: 0 12px 26px -12px rgba(163, 131, 107, 0.65) !important;
  opacity: 0.85;
  cursor: not-allowed !important;
}

/* Booking confirm button should match primary color (styles.css overrides it to gray later) */
.booking-confirm-btn {
  background: var(--color-primary) !important;
}

/* Password visibility toggle (eye icon) */
.password-field {
  position: relative;
  width: 100%;
}

.password-field .form-input {
  padding-right: 56px;
}

.password-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-68%);
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(30, 41, 59, 0.55);
}

.password-toggle:active {
  opacity: 0.75;
}

.password-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.password-toggle .icon-eye-off {
  display: none;
}

.password-toggle.is-visible .icon-eye {
  display: none;
}

.password-toggle.is-visible .icon-eye-off {
  display: inline;
}

/* (booking CTA) keep in-page buttons visible; global "Продолжить запись" is shown only outside booking flow */