/* ==========================================================================
   Component: Modal
   ========================================================================== */

/* Import subcomponents */
@import "header.css";
@import "body.css";
@import "footer.css";

/* Dialog Element (Native <dialog>) */
.c-modal {
  background: transparent;
  border: none;
  left: 50%;
  margin: 0;
  max-height: 90vh;
  max-width: 90vw;
  overflow: visible;
  padding: 0;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-index-modal);
}

/* Backdrop (Native ::backdrop) */
.c-modal::backdrop {
  animation: modal-backdrop-fade-in var(--transition-base);
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--z-index-modal-backdrop);
}

/* Modal Content Container */
.c-modal__content {
  animation: modal-fade-in var(--transition-base);
  background-color: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}

/* Size Variants */
.c-modal--sm .c-modal__content {
  width: 400px;
}

.c-modal--md .c-modal__content {
  width: 600px;
}

.c-modal--lg .c-modal__content {
  width: 800px;
}

.c-modal--xl .c-modal__content {
  width: 1000px;
}

.c-modal--full .c-modal__content {
  max-height: 95vh;
  width: 95vw;
}

/* Animations */
@keyframes modal-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes modal-backdrop-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Ensure modal is hidden when not open */
.c-modal:not([open]) {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .c-modal--sm .c-modal__content,
  .c-modal--md .c-modal__content,
  .c-modal--lg .c-modal__content,
  .c-modal--xl .c-modal__content {
    width: 95vw;
  }

  .c-modal__header,
  .c-modal__body,
  .c-modal__footer {
    padding: var(--space-md);
  }
}