/* Shopify Product Reviews カスタムスタイル */

/* レビューコンテナ全体 */
.spr-container {
  font-family: "Noto Sans JP", sans-serif !important;
  margin-top: 40px !important;
}

/* レビューヘッダー */
.spr-header {
  border-bottom: 2px solid #e5e7eb !important;
  padding-bottom: 20px !important;
  margin-bottom: 30px !important;
}

.spr-header-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #333 !important;
  margin-bottom: 10px !important;
}

/* 星評価のスタイル */
.spr-icon-star {
  color: #ffb400 !important;
  font-size: 20px !important;
}

.spr-icon-star-empty {
  color: #e0e0e0 !important;
}

/* レビューを書くボタン */
.spr-summary-actions-newreview {
  background-color: #4caf50 !important;
  color: white !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: background-color 0.3s !important;
}

.spr-summary-actions-newreview:hover {
  background-color: #45a049 !important;
}

/* 個別レビュー */
.spr-review {
  background-color: #f9fafb !important;
  padding: 20px !important;
  border-radius: 12px !important;
  margin-bottom: 16px !important;
  border: 1px solid #e5e7eb !important;
}

/* レビュー投稿者情報 */
.spr-review-header {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

.spr-review-header-byline {
  font-size: 14px !important;
  color: #666 !important;
}

.spr-review-header-byline strong {
  color: #333 !important;
  font-weight: 600 !important;
}

/* レビュー本文 */
.spr-review-content-body {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #4b5563 !important;
  margin-top: 12px !important;
}

/* フォーム */
.spr-form {
  background-color: #ffffff !important;
  padding: 30px !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  margin-top: 20px !important;
}

.spr-form-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin-bottom: 20px !important;
}

/* フォーム入力フィールド */
.spr-form-input,
.spr-form-input-text,
.spr-form-input-email,
.spr-form-input-textarea {
  width: 100% !important;
  padding: 12px !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  transition: border-color 0.3s !important;
}

.spr-form-input:focus,
.spr-form-input-textarea:focus {
  border-color: #4caf50 !important;
  outline: none !important;
}

/* 送信ボタン */
.spr-button {
  background-color: #4caf50 !important;
  color: white !important;
  padding: 12px 32px !important;
  border-radius: 8px !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: background-color 0.3s !important;
}

.spr-button:hover {
  background-color: #45a049 !important;
}

/* キャンセルボタン */
.spr-button-cancel {
  background-color: #f3f4f6 !important;
  color: #374151 !important;
  margin-left: 12px !important;
}

.spr-button-cancel:hover {
  background-color: #e5e7eb !important;
}

/* ページネーション */
.spr-pagination {
  margin-top: 30px !important;
  text-align: center !important;
}

.spr-pagination a {
  padding: 8px 12px !important;
  margin: 0 4px !important;
  background-color: #f3f4f6 !important;
  color: #374151 !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: background-color 0.3s !important;
}

.spr-pagination a:hover {
  background-color: #e5e7eb !important;
}

.spr-pagination .spr-pagination-current {
  background-color: #4caf50 !important;
  color: white !important;
}

/* モバイルレスポンシブ */
@media (max-width: 768px) {
  .spr-container {
    padding: 0 16px !important;
  }

  .spr-form {
    padding: 20px !important;
  }

  .spr-review {
    padding: 16px !important;
  }
}

/* エラーメッセージ */
.spr-form-message-error {
  background-color: #fee2e2 !important;
  color: #dc2626 !important;
  padding: 12px !important;
  border-radius: 6px !important;
  margin-bottom: 16px !important;
  font-size: 14px !important;
}

/* 成功メッセージ */
.spr-form-message-success {
  background-color: #d1fae5 !important;
  color: #065f46 !important;
  padding: 12px !important;
  border-radius: 6px !important;
  margin-bottom: 16px !important;
  font-size: 14px !important;
}

/* Klaviyo Reviews Widget Integration */
.klaviyo-reviews-container {
  width: 100%;
}

/* Override Klaviyo default styles to match theme */
.klaviyo-product-reviews {
  font-family: "Noto Sans JP", sans-serif !important;
}

.klaviyo-reviews-container h2,
.klaviyo-reviews-container h3 {
  font-family: "Noto Sans JP", sans-serif !important;
  color: #333 !important;
}

.klaviyo-reviews-container .review-item {
  padding: 16px 0;
  border-bottom: 1px solid #e0e0e0;
}

.klaviyo-reviews-container .review-rating {
  margin-bottom: 8px;
}

.klaviyo-reviews-container .review-content {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

/* Ensure proper display in the left column */
.product-redesign__reviews-widget .klaviyo-reviews-container {
  max-width: 100%;
}

/* Force Klaviyo reviews to display in the media column */
.product-redesign__media .product-redesign__reviews-widget {
  display: block !important;
  width: 100% !important;
}

/* Override any Klaviyo default positioning */
.product-redesign__reviews-widget [data-klaviyo-reviews],
.product-redesign__reviews-widget .klaviyo-product-reviews {
  position: static !important;
  width: 100% !important;
}

/* Klaviyo review form styling */
.klaviyo-reviews-container .review-form {
  background-color: #f9fafb;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
}

.klaviyo-reviews-container .review-form input,
.klaviyo-reviews-container .review-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
}

.klaviyo-reviews-container .review-form button {
  background-color: #4caf50;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.klaviyo-reviews-container .review-form button:hover {
  background-color: #45a049;
}