/* Modal overlay */
.modal {
  display: none;
  position: fixed;
  z-index: 400;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
  padding-top: 60px;
}

.modal.is-open { display: block; }

/* Modal panel */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 12px;
  width: 80%;
  max-width: 760px;
  animation: slideDown 0.3s ease;
  overflow: hidden;
  outline: none;
}

@keyframes slideDown {
  from { transform: translateY(-30px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* Close button */
.close {
  position: absolute;
  top: 10px; right: 16px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s;
}
.close:hover,
.close:focus {
  background: rgba(255,255,255,0.2);
  outline: 2px solid rgba(255,255,255,0.6);
}

.modal-header {
  padding: 16px 20px;
  background-color: var(--clr-primary);
  text-align: center;
  color: var(--clr-bg);
}
.modal-header h2 { margin: 0; color: inherit; }

.modal-body {
  display: flex;
  padding: 20px;
  gap: 20px;
}

.modal-text { flex: 1; }
.modal-text h3 { text-align: center; color: var(--clr-primary); }
.modal-text p  { text-align: center; color: var(--clr-primary); }

.modal-form { flex: 1; }
.modal-form form { text-align: center; }

.fields { display: flex; flex-direction: column; gap: 0; }

form input[type=text],
form input[type=email],
form textarea {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  display: block;
  border: 1px solid var(--clr-secondary);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
}
form input[type=text]:focus,
form input[type=email]:focus,
form textarea:focus {
  outline: 2px solid var(--clr-primary);
  outline-offset: 1px;
}

.button-area { margin-top: 12px; }

.modal-footer {
  padding: 12px 20px;
  background-color: var(--clr-primary);
  text-align: center;
  color: var(--clr-bg);
}
.modal-footer p { margin: 0; font-weight: 600; }

@media (max-width: 720px) {
  .modal { padding-top: 40px; }
  .modal-content { width: 92%; }
  .modal-body { flex-direction: column; }
}