/**
 * 複数ページで使う UI 部品（カート手続き・フォーム等）
 */

/* カート追加直後のフラッシュバナー（layouts でヘッダ直下に表示） */
.cart-added-banner {
  background: #f4f7f5;
  border-bottom: 1px solid #e5e5e5;
}
.cart-added-banner__close {
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 1;
}

@keyframes cartBadgePulse {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.28); }
  65% { transform: scale(1.06); }
}
#header-cart-count.cart-badge--pulse {
  animation: cartBadgePulse 0.45s ease-out 1;
  transform-origin: center;
}

.view-content { display: none; }
.view-content.active { display: block; animation: gnFadeIn 0.6s ease-out forwards; }
@keyframes gnFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.step-circle { width: 32px; height: 32px; border: 1px solid #E5E5E5; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: white; font-size: 11px; color: #E5E5E5; transition: all 0.3s; }
.step-item.active .step-circle { background: #8DA695; border-color: #8DA695; color: white; }
.step-item.completed .step-circle { background: #5E6B5E; border-color: #5E6B5E; color: white; }
.step-label { font-size: 10px; margin-top: 8px; letter-spacing: 0.1em; color: #E5E5E5; }
.step-item.active .step-label { color: #333333; font-weight: bold; }
.step-item.completed .step-label { color: #5E6B5E; }

.input-standard { border: 1px solid #E5E5E5; padding: 12px; font-size: 13px; width: 100%; border-radius: 4px; transition: all 0.2s; }
.input-standard:focus { outline: none; border-color: #8DA695; }
.btn-primary { background: #5E6B5E; color: white; width: 100%; padding: 18px; font-size: 13px; letter-spacing: 0.2em; transition: all 0.3s; border: none; cursor: pointer; }
.btn-primary:hover { background: #333333; }
.btn-outline { border: 1px solid #5E6B5E; color: #5E6B5E; width: 100%; padding: 18px; font-size: 13px; letter-spacing: 0.2em; transition: all 0.3s; background: transparent; cursor: pointer; }
.btn-outline:hover { background: #F4F7F5; }
.error-msg { color: #C53030; font-size: 11px; margin-top: 4px; display: none; }
.input-error { border-color: #C53030 !important; background-color: #FFF5F5 !important; }

.view-container { display: none; }
.view-container.active { display: block; }

.error-summary { background-color: #FFF5F5; border: 1px solid #FEB2B2; padding: 16px; margin-bottom: 24px; color: #C53030; font-size: 13px; }

.dashboard-card {
  border: 1px solid #f4f7f5;
  padding: 32px;
  transition: all 0.4s;
  cursor: pointer;
  background: white;
}
.dashboard-card:hover {
  border-color: #8da695;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}
a.dashboard-card {
  display: block;
  text-decoration: none;
  color: inherit;
}