/**
 * Component Styles - ECレビュー・アシスト Landing Page
 * ボタン、カード、フォームなどのコンポーネント
 */

/* ========================================
   ボタン
   ======================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-weight: var(--font-medium);
  font-size: var(--text-base);
  line-height: 1;
  text-align: center;
  cursor: pointer;
  border: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}

/* ボタンサイズ */
.button-sm {
  height: var(--button-height-sm);
  padding: 0 var(--button-padding-x-sm);
  font-size: var(--text-sm);
}

.button-md {
  height: var(--button-height-md);
  padding: 0 var(--button-padding-x-md);
}

.button-lg {
  height: var(--button-height-lg);
  padding: 0 var(--button-padding-x-lg);
  font-size: var(--text-lg);
}

/* プライマリボタン */
.button-primary {
  background: var(--color-primary);
  color: #FFFFFF;
  box-shadow: var(--shadow-button);
}

.button-primary:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-button-hover);
  transform: translateY(-1px);
}

.button-primary:active {
  background: var(--color-primary-dark);
  transform: translateY(0);
}

.button-primary:disabled {
  background: var(--color-text-muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* セカンダリボタン */
.button-secondary {
  background: rgba(255, 255, 255, 0.5);
  color: var(--color-primary);
  border: none;
  box-shadow: var(--shadow-xs), var(--lg-rim-light);
}

.button-secondary:hover {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15), var(--lg-rim-light);
}

/* アウトラインボタン */
.button-outline {
  background: transparent;
  color: var(--color-primary);
  border: none;
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

.button-outline:hover {
  background: var(--color-primary);
  color: #FFFFFF;
  box-shadow: none;
}

/* ========================================
   カード
   ======================================== */

.card {
  background: var(--lg-glass-L1);
  -webkit-backdrop-filter: blur(var(--lg-blur-L1));
  backdrop-filter: blur(var(--lg-blur-L1));
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card), var(--lg-rim-light);
  transition: all var(--transition-slow);
}

.card:hover {
  box-shadow: var(--shadow-card-hover), var(--lg-rim-light-strong);
  transform: translateY(-2px);
}

.card-highlighted {
  background: var(--lg-glass-L1);
  -webkit-backdrop-filter: blur(var(--lg-blur-L1));
  backdrop-filter: blur(var(--lg-blur-L1));
  border: none;
  box-shadow: var(--shadow-card), var(--lg-rim-light-strong), inset 0 0 0 2px var(--color-primary);
}

.card-secondary {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  box-shadow: none;
}

.card-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-3);
  color: var(--color-text-primary);
}

.card-description {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* ========================================
   フォーム
   ======================================== */

.form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.form-input {
  width: 100%;
  height: var(--button-height-md);
  padding: 0 var(--space-4);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  color: var(--input-text-default);
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  box-shadow: var(--lg-rim-light);
}

.form-input::placeholder {
  color: var(--input-text-placeholder);
}

.form-input:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.form-input:disabled {
  background-color: var(--input-bg-disabled);
  color: var(--input-text-disabled);
  cursor: not-allowed;
}

/* エラー状態 */
.form-input.error {
  box-shadow: 0 0 0 2px var(--color-danger), var(--lg-rim-light);
  background-color: var(--input-bg-error);
}

.form-input.error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
}

/* 成功状態 */
.form-input.success {
  border-color: var(--input-border-success);
}

.form-input.success:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* エラーメッセージ */
.error-message {
  background: rgba(239, 68, 68, 0.08);
  -webkit-backdrop-filter: blur(var(--lg-blur-L1));
  backdrop-filter: blur(var(--lg-blur-L1));
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: #DC2626;
  font-size: var(--text-sm);
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  animation: slideDown 0.3s ease;
  box-shadow: var(--shadow-xs), var(--lg-rim-light);
}

.error-message.hidden {
  display: none !important;
}

.error-message::before {
  content: '⚠️';
  font-size: var(--text-lg);
}

/* 成功メッセージ */
.success-message {
  background: rgba(16, 185, 129, 0.08);
  -webkit-backdrop-filter: blur(var(--lg-blur-L1));
  backdrop-filter: blur(var(--lg-blur-L1));
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: #059669;
  font-size: var(--text-sm);
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  animation: slideDown 0.3s ease;
  box-shadow: var(--shadow-xs), var(--lg-rim-light);
}

.success-message.hidden {
  display: none !important;
}

.success-message::before {
  content: '✓';
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
}

/* ========================================
   アニメーション
   ======================================== */

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ローディングスピナー */
.button-primary:disabled::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid #FFFFFF;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: var(--space-2);
}