.profile-page {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 50px 200px;
}

.profile-container,
.profile-bookings,
.profile-modal-content,
.booking-modal-content {
  background: var(--blackshade);
  backdrop-filter: blur(18px);

  border: 1px solid var(--bordercolor);
  border-radius: 20px;

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.profile-container {
  max-width: 400px;
  padding: 0 20px 20px;
}

.profile-bookings {
  min-width: 400px;
  padding: 0 20px 20px;
}

.profile-container h1,
.profile-bookings h2 {
  color: var(--primarycolor);
}

.profile-container strong,
.booking-list h3,
.booking-list strong {
  color: var(--secondarycolor);
}

.profile-container button,
.edit-profile-form button,
.change-password-form button,
.edit-booking-form button,
.booking-card button {
  min-width: 245px;
  margin-top: 20px;
  padding: 10px;

  border: none;
  border-radius: 10px;

  background-color: var(--primarycolorhover);
  color: var(--textcolor);

  cursor: pointer;
  transition: 0.3s ease;
}

.profile-container button:hover,
.edit-profile-form button:hover,
.change-password-form button:hover,
.edit-booking-form button:hover,
.booking-card button:hover {
  background-color: var(--primarycolor);
  color: white;

  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.booking-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.booking-card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  padding: 15px;
  background: var(--blackshade);
  color: white;
  border-radius: 10px;
}
.bookings-info {
  display: flex;
  flex-direction: column;
}
.booking-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.booking-actions button {
  min-width: unset;
  margin-top: 0;
}

.profile-modal,
.password-modal,
.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 999;

  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(0, 0, 0, 0.6);
}

.profile-modal.hidden,
.password-modal.hidden,
.booking-modal.hidden {
  display: none;
}

.profile-modal-content,
.booking-modal-content {
  position: relative;
  width: 400px;
  padding: 30px;

  color: white;
}
.profile-modal-content h2,
.booking-modal-content h2 {
  color: var(--secondarycolor);
}

.edit-profile-form,
.change-password-form,
.edit-booking-form {
  display: flex;
  flex-direction: column;
  gap: 20px;

  margin-top: 20px;
}

.edit-profile-form input,
.change-password-form input,
.edit-booking-form input {
  width: 100%;
  padding: 15px;

  border: 1px solid var(--bordercolor);
  border-radius: 14px;

  background: var(--elementshade);
  color: white;

  font-family: var(--font-jersey25);
  font-size: 18px;

  outline: none;
  box-sizing: border-box;
}

.edit-profile-form input::placeholder,
.change-password-form input::placeholder,
.edit-booking-form input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.edit-profile-form input:focus,
.change-password-form input:focus,
.edit-booking-form input:focus {
  border-color: var(--primarycolor);
  box-shadow: 0 0 18px rgba(142, 86, 255, 0.35);
}

.close-profile-modal-btn,
.close-password-modal-btn,
.close-modal-btn,
.close-booking-modal-btn {
  position: absolute;
  top: 15px;
  right: 15px;

  background: none;
  border: none;

  color: white;
  font-size: 20px;

  cursor: pointer;
}

@media screen and (max-width: 900px) {
  .profile-page {
    margin: 40px 20px;
  }

  .booking-list {
    grid-template-columns: 1fr;
  }

  .profile-container,
  .profile-bookings,
  .profile-modal-content {
    width: 100%;
    min-width: unset;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 480px) {
  .profile-page {
    margin: 30px 15px;
    gap: 25px;
  }

  .profile-container {
    padding: 0 15px 15px;
  }

  .profile-bookings {
    padding: 0 15px 15px;
  }

  .booking-list {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .booking-card {
    padding: 12px;
  }

  .profile-container button,
  .edit-profile-form button,
  .change-password-form button,
  .edit-booking-form button {
    min-width: 100%;
    width: 100%;
  }

  .profile-modal-content {
    width: 90%;
    max-width: 300px;
    padding: 20px;
  }

  .edit-profile-form input,
  .change-password-form input,
  .edit-booking-form input {
    padding: 12px;
    font-size: 15px;
  }
}