/* Additive layout corrections only; existing colors and desktop CSS stay intact. */
@media (max-width: 768px) {
  /* 100% content widths previously added padding outside the viewport. */
  .login-container,
  .find-account-container,
  .register-box,
  .register-box .input-group input {
    box-sizing: border-box;
    max-width: 100%;
  }

  .register-box {
    width: 390px;
  }

  /* The writer lacked a mobile stack; detail's 100% panels added padding. */
  .review-container {
    flex-direction: column;
  }

  .review-container > .book-info,
  .review-container > .review-content,
  .review-container .review-box,
  .review-container .review-text {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  .review-container > .book-info,
  .review-container > .review-content {
    width: 100%;
  }

  /* Keep every rating/action/input visible by wrapping, never clipping. */
  .review-container .review-header,
  .review-container .review-rating-container,
  .review-container .review-actions,
  .review-container .stars,
  .review-container .comment-input-container,
  .review-container .comment-content {
    flex-wrap: wrap;
  }

  .review-container #comment-input {
    box-sizing: border-box;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  .review-container #comment-username {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .review-container .comment-info {
    flex: 1 1 140px;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .review-container #book-title,
  .review-container #review-author,
  .review-container #review-text {
    overflow-wrap: anywhere;
  }
}