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

/* ==========================================
   Modal Backdrop
   ========================================== */

   .modal {
    position: fixed;
    z-index: var(--z-modal-backdrop);
    inset: 0;
    display: none;
    overflow: auto;
    background-color: var(--overlay-dark);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  /* ==========================================
     Modal Container
     ========================================== */
  
  .modal-content {
    width: 95%;
    max-width: 500px;
    margin: var(--spacing-4) auto;
    padding: var(--spacing-4);
    border: var(--border-width-2) solid var(--background);
    border-radius: var(--radius-lg);
    background: var(--color-white);
  }
  
  /* Modal Header */
  .modal-content h2 {
    margin-bottom: var(--spacing-4);

    color: var(--text-inverse);
  }
  
  /* Close Button */
  .modal-content .close {
    float: right;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--text-inverse);
    cursor: pointer;
  }
  
  /* ==========================================
     Form Elements
     ========================================== */
  
  .modal-content form {
    display: flex;
    flex-direction: column;
  }
  
  .modal-content form label {
    margin: var(--spacing-4) 0;

    font-weight: var(--font-medium);
    color: var(--text-inverse);
  }
  
  /* Form Inputs */
  .modal-content form input,
  .modal-content form textarea {
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-4);
    border: var(--border-width) solid var(--background);
    border-radius: var(--radius-sm);

    color: var(--text-inverse);
    background: var(--color-white);
    transition: border-color var(--transition-fast);
  }
  
  .modal-content form input:focus,
  .modal-content form textarea:focus {
    border-color: var(--primary);
    outline: none;
  }
  
  .modal-content form textarea {
    min-height: 8rem;
    max-height: 20rem;
    resize: vertical;
  }
  
  /* Submit Button */
  .modal-content form button.btn {
    align-self: center;
    margin-top: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-8);
    border: var(--border-width-2) solid var(--background);
    border-radius: var(--radius-lg);

    font-weight: var(--font-medium);
    text-transform: uppercase;
    color: var(--text-primary);
    background: var(--background);
    cursor: pointer;
    transition: all var(--transition-fast);
  }
  
  .modal-content form button.btn:active {
    transform: translateY(1px);
  }
  
  .modal-content form button.btn:focus-visible {
    outline: var(--border-width-3) solid var(--primary);
    outline-offset: 2px;
  }
  
  /* ==========================================
     Interactive States
     ========================================== */
  
  /* Progressive Enhancement for Hover */
  @media (hover: hover) and (pointer: fine) {
    .modal-content form button.btn:hover {
      color: var(--background);
      background: var(--text-primary);
      transform: translateY(-2px);
    }
  }
  
  /* Body State */
  body.modal-open {
    overflow: hidden;
  }
  
  /* ==========================================
     Responsive Design - Tablet (768px+)
     ========================================== */
  
  @media (min-width: 768px) {
    .modal-content {
      width: 90%;
      margin: var(--spacing-10) auto;
      padding: var(--spacing-6);
    }
  }