.question-modal.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.question-modal.modal-overlay.show { opacity: 1; visibility: visible; }

.question-modal .modal-content {
  background: #fff;
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
  color: #333;
  overflow: hidden;
  border: 1px solid #e1e1e1;
}

.question-modal .modal-header { padding: 1rem 1.5rem; border-bottom: 1px solid #e2e2e2; background: #fff; }
.question-modal .question-modal__header-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}
.question-modal .question-modal__header-brand::after {
  content: '';
  width: 80px;
  height: 1px;
  visibility: hidden;
}
.question-modal .question-modal__header-brand .header__logo-img {
  max-width: 80px;
  height: auto;
}
.question-modal .modal-checkout-title {
  text-align: center;
  font-size: 1.8rem;
  color: #1c1c1c;
  flex: 1;
}
.question-modal .modal-scrollable { display: flex; flex-direction: column; overflow-y: auto; padding: 1.5rem 2rem; gap: 1.25rem; }
.question-modal .modal-buttons { padding: 1rem 1.5rem; display: flex; justify-content: space-between; gap: 1rem; background: #fff; border-top: 1px solid #e2e2e2; }

.question-modal .review-group h4 { margin-bottom: 0.5rem; font-weight: 700; border-bottom: 1px solid #eee; padding-bottom: 0.25rem; color: #444; }
.question-modal .review-group p { margin: 0; color: #333; }

.question-modal .answer-btn { 
  background-color: #f4f4f4; 
  color: #222; 
  border: 1px solid #ddd; 
  border-radius: 8px; 
  padding: 12px 14px; 
  font-weight: 600; 
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.05s ease;
}
.question-modal .answer-btn:hover { 
  background-color: #fff6d6; 
  border-color: #e4bc1c; 
}
.question-modal .answer-btn:focus { 
  outline: none; 
  background-color: #fffaf0; 
  border-color: #e4bc1c; 
}
.question-modal .answer-btn:active {
  transform: translateY(1px);
}

.question-modal .question-modal__cancel { 
  background-color: #e0e0e0; 
  color: #333; 
  border: 1px solid #d0d0d0; 
  border-radius: 6px; 
  padding: 10px 14px; 
  font-weight: 600; 
}
.question-modal .question-modal__cancel:hover {
  background-color: #f0f0f0; 
  border-color: #cfcfcf;
}
.question-modal .question-modal__cancel:focus { 
  outline: none; 
  border-color: #e4bc1c; 
  box-shadow: 0 0 0 3px rgba(228,188,28,0.25);
}

@media (max-width: 1024px) {
  .question-modal .modal-scrollable { padding: 1rem 1rem; }
  .question-modal .modal-buttons { flex-direction: column; }
}

body.modal-open { overflow: hidden; }

/* Dark mode adjustments */
body.dark-mode .question-modal .modal-content { 
  background-color: #2a2a2a; 
  border-color: #1f1f1f; 
  color: #fff; 
}
body.dark-mode .question-modal .modal-header,
body.dark-mode .question-modal .modal-buttons { 
  background-color: #1f1f1f; 
}
body.dark-mode .question-modal .review-group h4 { 
  color: #fff; 
  border-bottom-color: #333; 
}
body.dark-mode .question-modal .review-group p { color: #ddd; }
body.dark-mode .question-modal .answer-btn { 
  background-color: #2a2a2a; 
  color: #fff; 
  border-color: #3f3f3f; 
}
body.dark-mode .question-modal .answer-btn:hover { 
  background-color: #3a3933; 
  border-color: #e4bc1c; 
}
body.dark-mode .question-modal .answer-btn:focus { 
  background-color: #3a3933; 
  border-color: #e4bc1c; 
}
body.dark-mode .question-modal .question-modal__cancel { 
  background-color: #2a2a2a; 
  color: #fff; 
  border-color: #3f3f3f; 
}
body.dark-mode .question-modal .question-modal__cancel:hover { 
  background-color: #3a3a3a; 
  border-color: #4a4a4a; 
}
body.dark-mode .question-modal .question-modal__cancel:focus { 
  border-color: #e4bc1c; 
  box-shadow: 0 0 0 3px rgba(228,188,28,0.25); 
}