/* Location: D:\ironcore\frontend\nova-vibebeauty\assets\css\components\admin\admin-modal.css */
.admin-modal {
  position: fixed;
  inset: 0;
  z-index: var(--admin-modal-z-index);
}

.admin-modal[hidden] {
  display: none;
}

.admin-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--admin-modal-backdrop-bg);
  backdrop-filter: blur(var(--admin-modal-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--admin-modal-backdrop-blur));
}

.admin-modal__dialog {
  position: absolute;
  top: var(--admin-modal-top);
  left: 50%;
  width: min(calc(100% - 32px), var(--admin-modal-width));
  padding: var(--admin-modal-padding-y) var(--admin-modal-padding-x);
  border: 1px solid var(--admin-modal-border);
  border-radius: var(--admin-modal-radius);
  background: var(--admin-modal-bg);
  box-shadow: var(--admin-modal-shadow);
  backdrop-filter: blur(var(--admin-modal-blur));
  -webkit-backdrop-filter: blur(var(--admin-modal-blur));
  transform: translateX(-50%);
}

.admin-modal__close {
  position: absolute;
  top: var(--admin-modal-close-top);
  right: var(--admin-modal-close-right);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--admin-modal-close-size);
  height: var(--admin-modal-close-size);
  border: 1px solid var(--admin-modal-close-border);
  border-radius: 50%;
  background: var(--admin-modal-close-bg);
  color: var(--admin-modal-close-color);
  font-size: var(--admin-modal-close-font-size);
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.admin-modal__close:hover,
.admin-modal__close:focus-visible {
  background: var(--admin-modal-close-hover-bg);
  border-color: var(--admin-modal-close-hover-border);
  color: var(--admin-modal-close-hover-color);
  transform: rotate(90deg);
}

.admin-modal__close:focus-visible {
  outline: var(--admin-modal-close-focus-outline);
  outline-offset: var(--admin-modal-close-focus-offset);
}

.admin-modal__header {
  margin-bottom: var(--admin-modal-header-margin-bottom);
  padding-right: var(--admin-modal-header-padding-right);
}

.admin-modal__eyebrow {
  margin: 0 0 var(--admin-modal-eyebrow-margin-bottom) 0;
  font-family: "Inter", Arial, sans-serif;
  font-size: var(--admin-modal-eyebrow-font-size);
  font-weight: var(--admin-modal-eyebrow-font-weight);
  line-height: var(--admin-modal-eyebrow-line-height);
  letter-spacing: var(--admin-modal-eyebrow-letter-spacing);
  color: var(--admin-modal-eyebrow-color);
  text-transform: uppercase;
}

.admin-modal__title {
  margin: 0 0 var(--admin-modal-title-margin-bottom) 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: var(--admin-modal-title-font-size);
  font-weight: var(--admin-modal-title-font-weight);
  line-height: var(--admin-modal-title-line-height);
  letter-spacing: var(--admin-modal-title-letter-spacing);
  color: var(--admin-modal-title-color);
}

.admin-modal__description {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  font-size: var(--admin-modal-description-font-size);
  font-weight: var(--admin-modal-description-font-weight);
  line-height: var(--admin-modal-description-line-height);
  letter-spacing: var(--admin-modal-description-letter-spacing);
  color: var(--admin-modal-description-color);
}

.admin-modal__form {
  display: grid;
  gap: var(--admin-modal-form-gap);
}

.admin-modal__field {
  display: grid;
  gap: var(--admin-modal-field-gap);
}

.admin-modal__label {
  font-family: "Inter", Arial, sans-serif;
  font-size: var(--admin-modal-label-font-size);
  font-weight: var(--admin-modal-label-font-weight);
  line-height: var(--admin-modal-label-line-height);
  letter-spacing: var(--admin-modal-label-letter-spacing);
  color: var(--admin-modal-label-color);
}

.admin-modal__input {
  min-height: var(--admin-modal-input-height);
  padding: var(--admin-modal-input-padding-y) var(--admin-modal-input-padding-x);
  border: 1px solid var(--admin-modal-input-border);
  border-radius: var(--admin-modal-input-radius);
  background: var(--admin-modal-input-bg);
  color: var(--admin-modal-input-color);
  font-family: "Inter", Arial, sans-serif;
  font-size: var(--admin-modal-input-font-size);
  font-weight: var(--admin-modal-input-font-weight);
  line-height: 1.2;
  box-shadow: var(--admin-modal-input-shadow);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    opacity 0.18s ease;
}

.admin-modal__input::placeholder {
  color: var(--admin-modal-input-placeholder-color);
}

.admin-modal__input:hover,
.admin-modal__input:focus-visible {
  border-color: var(--admin-modal-input-hover-border);
  background: var(--admin-modal-input-hover-bg);
  box-shadow: var(--admin-modal-input-hover-shadow);
}

.admin-modal__input:focus-visible {
  outline: var(--admin-modal-input-focus-outline);
  outline-offset: var(--admin-modal-input-focus-offset);
}

.admin-modal__input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.admin-modal__hint {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  font-size: var(--admin-modal-hint-font-size);
  font-weight: var(--admin-modal-hint-font-weight);
  line-height: var(--admin-modal-hint-line-height);
  letter-spacing: var(--admin-modal-hint-letter-spacing);
  color: var(--admin-modal-hint-color);
}

.admin-modal__status {
  margin: 0;
  padding: var(--admin-modal-status-padding-y) var(--admin-modal-status-padding-x);
  border-radius: var(--admin-modal-status-radius);
  font-family: "Inter", Arial, sans-serif;
  font-size: var(--admin-modal-status-font-size);
  font-weight: var(--admin-modal-status-font-weight);
  line-height: var(--admin-modal-status-line-height);
  letter-spacing: var(--admin-modal-status-letter-spacing);
}

.admin-modal__status[hidden] {
  display: none;
}

.admin-modal__status[data-status-kind="info"] {
  border: 1px solid var(--admin-modal-status-info-border);
  background: var(--admin-modal-status-info-bg);
  color: var(--admin-modal-status-info-color);
}

.admin-modal__status[data-status-kind="success"] {
  border: 1px solid var(--admin-modal-status-success-border);
  background: var(--admin-modal-status-success-bg);
  color: var(--admin-modal-status-success-color);
}

.admin-modal__status[data-status-kind="warning"] {
  border: 1px solid var(--admin-modal-status-warning-border);
  background: var(--admin-modal-status-warning-bg);
  color: var(--admin-modal-status-warning-color);
}

.admin-modal__status[data-status-kind="error"] {
  border: 1px solid var(--admin-modal-status-error-border);
  background: var(--admin-modal-status-error-bg);
  color: var(--admin-modal-status-error-color);
}

.admin-modal__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--admin-modal-actions-gap);
  margin-top: var(--admin-modal-actions-margin-top);
}

.admin-modal__secondary,
.admin-modal__submit {
  min-height: var(--admin-modal-button-height);
  padding: var(--admin-modal-button-padding-y) var(--admin-modal-button-padding-x);
  border-radius: var(--admin-modal-button-radius);
  font-family: "Inter", Arial, sans-serif;
  font-size: var(--admin-modal-button-font-size);
  font-weight: var(--admin-modal-button-font-weight);
  letter-spacing: var(--admin-modal-button-letter-spacing);
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

.admin-modal__secondary {
  border: 1px solid var(--admin-modal-secondary-border);
  background: var(--admin-modal-secondary-bg);
  color: var(--admin-modal-secondary-color);
  box-shadow: var(--admin-modal-secondary-shadow);
}

.admin-modal__secondary:hover,
.admin-modal__secondary:focus-visible {
  border-color: var(--admin-modal-secondary-hover-border);
  background: var(--admin-modal-secondary-hover-bg);
  color: var(--admin-modal-secondary-hover-color);
}

.admin-modal__submit {
  border: 1px solid var(--admin-modal-submit-border);
  background: var(--admin-modal-submit-bg);
  color: var(--admin-modal-submit-color);
  box-shadow: var(--admin-modal-submit-shadow);
}

.admin-modal__submit:hover,
.admin-modal__submit:focus-visible {
  border-color: var(--admin-modal-submit-hover-border);
  background: var(--admin-modal-submit-hover-bg);
  color: var(--admin-modal-submit-hover-color);
  box-shadow: var(--admin-modal-submit-hover-shadow);
  transform: translateY(-1px);
}

.admin-modal__secondary:focus-visible,
.admin-modal__submit:focus-visible {
  outline: var(--admin-modal-button-focus-outline);
  outline-offset: var(--admin-modal-button-focus-offset);
}

.admin-modal__secondary:disabled,
.admin-modal__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 700px) {
  .admin-modal__dialog {
    top: var(--admin-modal-mobile-top);
    width: min(calc(100% - 20px), var(--admin-modal-mobile-width));
    padding: var(--admin-modal-mobile-padding-y) var(--admin-modal-mobile-padding-x);
  }

  .admin-modal__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .admin-modal__secondary,
  .admin-modal__submit {
    width: 100%;
  }
}