/* =====================================================
   GKS Simulator CSS — WordPress用（テーマに干渉しない）
   すべてのスタイルは .gks-wrap スコープ内
===================================================== */
.gks-wrap *, .gks-wrap *::before, .gks-wrap *::after { box-sizing: border-box; }
.gks-wrap { font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; max-width: 540px; margin: 0 auto; background: #f0f4f8; }
.gks-initial-loading { text-align:center; padding:40px; color:#64748b; }
.gks-wrap h1, .gks-wrap h2, .gks-wrap h3, .gks-wrap p {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-transform: none !important;
}

/* ---- ヘッダーバナー ---- */
.gks-header-banner { background:#e65100; padding:10px 16px; text-align:center; }
.gks-header-banner-text { color:#fff; font-size:14px; font-weight:900; letter-spacing:.03em; display:flex; align-items:center; justify-content:center; gap:6px; margin:0; }
.gks-header-icon { display:inline-block; flex-shrink:0; }

/* ---- タイトルバー ---- */
.gks-title-bar { background:#fff; padding:14px 16px; text-align:center; border-bottom:2px solid #1565c0; }
.gks-main-title { font-size:22px; font-weight:900; color:#1a1a2e; margin:0 0 4px; line-height:1.2; }
.gks-title-accent { color:#1565c0; }
.gks-main-subtitle { font-size:12px; color:#94a3b8; margin:0; }

/* ---- プログレスバー ---- */
.gks-progress-bar-wrap { background:#fff; border-bottom:1px solid #c8daf5; padding:12px 16px; }
.gks-prog-steps { display:flex; align-items:flex-end; justify-content:space-between; gap:0; }
.gks-prog-step { display:flex; flex-direction:column; align-items:center; flex:1; }
.gks-prog-dot { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; border:2px solid transparent; transition:all .3s; }
.gks-dot-done   { background:#1565c0; border-color:#1565c0; color:#fff; }
.gks-dot-active { background:#e65100; border-color:#e65100; color:#fff; box-shadow:0 2px 8px rgba(230,81,0,.3); }
.gks-dot-idle   { background:#fff; border-color:#c8daf5; color:#94a3b8; }
.gks-prog-label { text-align:center; margin-top:4px; font-weight:700; font-size:10px; white-space:pre-line; line-height:1.3; }
.gks-prog-label-active { color:#e65100; }
.gks-prog-label-done   { color:#1565c0; }
.gks-prog-label-idle   { color:#94a3b8; }
.gks-prog-line { flex:1; height:2px; align-self:center; margin-bottom:24px; transition:background .3s; }
.gks-line-done { background:#1565c0; }
.gks-line-idle { background:#c8daf5; }

/* ---- メインカード ---- */
.gks-main-card-wrap { max-width:540px; margin:0 auto; padding:12px 12px 20px; }
.gks-main-card { background:#fff; border-radius:16px; box-shadow:0 2px 12px rgba(0,0,0,.08); border:1px solid #c8daf5; overflow:hidden; padding:20px; }
.gks-selected-badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.gks-sel-badge { font-size:12px; font-weight:700; color:#1565c0; background:#e3f0fc; padding:4px 10px; border-radius:999px; border:1px solid #c8daf5; }

/* ---- ステップヘッダー ---- */
.gks-step-header { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.gks-step-bubble { width:24px; height:24px; background:#1565c0; border-radius:4px; flex-shrink:0; }
.gks-step-num-badge { width:24px; height:24px; background:#1565c0; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; flex-shrink:0; }
.gks-step-label { font-size:14px; font-weight:900; color:#1a1a2e; }
.gks-step-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.gks-back-btn { font-size:12px; font-weight:700; color:#1565c0; background:none; border:none; cursor:pointer; padding:4px 0; display:flex; align-items:center; gap:4px; flex-shrink:0; }
.gks-back-btn:hover { color:#0d47a1; }

/* ---- STEP1 機種グリッド ---- */
.gks-console-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.gks-console-btn { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px; border:2px solid #1565c0; background:#fff; font-size:14px; font-weight:700; color:#1a1a2e; cursor:pointer; transition:all .15s; width:100%; text-align:left; }
.gks-console-btn:hover { background:#e3f0fc; }
.gks-console-btn-active { background:#1565c0; color:#fff; box-shadow:0 2px 8px rgba(21,101,192,.3); }
.gks-radio-dot { width:16px; height:16px; border-radius:50%; border:2px solid #1565c0; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.gks-radio-dot::after { content:''; display:block; width:8px; height:8px; background:#fff; border-radius:50%; transform:scale(0); transition:transform .15s; }
.gks-console-btn-active .gks-radio-dot::after { transform:scale(1); }

/* ---- STEP2/3 ラジオリスト ---- */
.gks-radio-list { display:flex; flex-direction:column; gap:8px; }
.gks-radio-btn { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px; border:2px solid #1565c0; background:#fff; font-size:14px; font-weight:700; color:#1a1a2e; cursor:pointer; transition:all .15s; width:100%; text-align:left; }
.gks-radio-btn:hover { background:#e3f0fc; }
.gks-radio-btn-active { background:#e3f0fc; box-shadow:0 2px 6px rgba(21,101,192,.15); }
.gks-radio-circle { width:20px; height:20px; border-radius:50%; border:2px solid #1565c0; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s; }
.gks-radio-circle-active { background:#1565c0; }
.gks-radio-inner { width:10px; height:10px; border-radius:50%; background:#fff; }
.gks-hidden { display:none !important; }
.gks-submit-wrap { margin-top:20px; }
.gks-submit-btn { width:100%; background:#e65100; color:#fff; font-size:18px; font-weight:900; padding:16px; border-radius:12px; border:none; cursor:pointer; box-shadow:0 4px 12px rgba(230,81,0,.3); transition:all .15s; }
.gks-submit-btn:hover { background:#bf360c; }

/* ---- AI算出アニメーション ---- */
.gks-calculating { background:linear-gradient(135deg,#0d47a1,#1565c0); border-radius:12px; padding:40px 24px; display:flex; flex-direction:column; align-items:center; gap:20px; }
.gks-spinner-wrap { position:relative; width:64px; height:64px; }
.gks-spinner { animation:gks-spin 1s linear infinite; }
@keyframes gks-spin { to { transform:rotate(360deg); } }
.gks-spinner-icon { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.gks-calc-text { text-align:center; color:#fff; }
.gks-calc-main { font-size:18px; font-weight:900; margin:0 0 4px; }
.gks-calc-sub { font-size:14px; color:rgba(255,255,255,.7); margin:0; }
.gks-progress-outer { width:100%; background:rgba(255,255,255,.2); border-radius:999px; height:8px; overflow:hidden; }
.gks-progress-inner { height:100%; background:linear-gradient(to right,#4fc3f7,#ffd54f); border-radius:999px; width:0; transition:width .1s linear; }

/* ---- 結果画面 ---- */
.gks-results { }

/* AI金額算出セクション */
.gks-est-section { background:linear-gradient(135deg,#0d47a1,#1565c0); border-radius:12px; overflow:hidden; margin-bottom:24px; padding:20px; color:#fff; }
.gks-est-title { text-align:center; font-size:18px; font-weight:900; margin:0 0 20px; color:#fff !important; background:transparent !important; padding:0 !important; }
.gks-est-price-wrap { text-align:center; margin-bottom:24px; }
.gks-est-price { font-size:48px; font-weight:900; line-height:1; margin:0 0 4px; }
.gks-est-sublabel { font-size:12px; color:rgba(255,255,255,.7); margin:0; }
.gks-est-info { background:rgba(255,255,255,.12); border-radius:8px; padding:12px; margin-bottom:16px; }
.gks-est-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.gks-est-row:last-child { margin-bottom:0; }
.gks-est-key { font-size:10px; font-weight:700; color:rgba(255,255,255,.6); width:56px; flex-shrink:0; }
.gks-est-val { font-size:12px; font-weight:700; color:#fff; }
.gks-est-note { font-size:10px; color:rgba(255,255,255,.6); margin:0; line-height:1.6; }

/* アラートバナー */
.gks-alert-banner { background:#fff8e1; border:2px solid #f59e0b; border-radius:12px; padding:14px 16px; display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.gks-alert-icon { width:36px; height:36px; background:#f59e0b; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.gks-alert-text { font-size:14px; font-weight:900; color:#92400e; margin:0; line-height:1.3; }

/* ランキングタイトル */
.gks-ranking-title-wrap { text-align:center; margin-bottom:20px; }
.gks-ranking-title { font-size:22px; font-weight:900; color:#1565c0; margin:0; line-height:1.3; }

/* ---- ディーラーカード ---- */
.gks-cards-list { display:flex; flex-direction:column; gap:20px; }
.gks-dealer-card { border-radius:8px; background:#fff; overflow:hidden; }
.gks-anim-in { animation:gks-fade-in .5s ease both; }
@keyframes gks-fade-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

/* カードヘッダー */
.gks-card-header { background:#fff; padding:12px 14px 8px; }
.gks-card-header-row { display:flex; align-items:flex-start; gap:12px; }
.gks-rank-badge { width:48px; height:48px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:12px; color:#fff; border-width:2px; border-style:solid; box-shadow:0 2px 4px rgba(0,0,0,.15); flex-shrink:0; line-height:1; text-align:center; }
.gks-dealer-name-wrap { flex:1; min-width:0; }
.gks-dealer-badge { display:inline-block; font-size:10px; font-weight:700; margin-bottom:4px; padding:2px 8px; border-radius:999px; background:#fef3c7; color:#92400e; border:1px solid #fbbf24; }
.gks-dealer-name { font-size:20px; font-weight:900; color:#1a1a2e; margin:0; line-height:1.2; display:block !important; padding:0 !important; border:none !important; background:transparent !important; }
.gks-stars-wrap { display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; }
.gks-stars { display:flex; gap:2px; }
.gks-rating-text { font-size:10px; color:#64748b; margin-top:2px; white-space:nowrap; }
.gks-dealer-subtitle { font-size:12px; color:#64748b; margin:8px 0 0; line-height:1.6; }

/* バナー */
.gks-banner { position:relative; height:160px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.gks-banner-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; }
.gks-banner-text { position:relative; z-index:1; text-align:center; font-size:36px; font-weight:900; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.3); line-height:1.1; }
.gks-banner-name { position:absolute; bottom:12px; right:16px; color:rgba(255,255,255,.8); font-weight:700; font-size:14px; }

/* 査定額セクション */
.gks-price-section { background:linear-gradient(135deg,#e3f0fc,#dbeafe); border-top:1px solid #c8daf5; border-bottom:1px solid #c8daf5; padding:16px; text-align:center; }
.gks-price-label { font-size:11px; font-weight:700; color:#64748b; margin:0 0 6px; }
.gks-price-hero { font-size:40px; font-weight:900; color:#1565c0; line-height:1; margin:0 0 10px; }
.gks-price-error { font-size:14px; color:#dc2626; font-weight:700; }
.gks-price-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:999px; font-weight:700; font-size:12px; background:#1565c0; color:#fff; }

/* 買取方法 */
.gks-methods-section { padding:12px 14px; border-top:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0; background:#f8fafc; }
.gks-methods-label { font-size:11px; font-weight:700; color:#64748b; margin:0 0 8px; }
.gks-methods-list { display:flex; flex-wrap:wrap; gap:8px; }
.gks-method-tag { display:inline-flex; align-items:center; gap:4px; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:700; background:#e3f0fc; color:#1565c0; border:1px solid #c8daf5; }

/* タブ */
.gks-tabs-bar { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid #e2e8f0; background:#f8fafc; }
.gks-tab-item { padding:10px 4px; font-size:11px; font-weight:700; color:#64748b; background:transparent; border:none; cursor:pointer; transition:all .15s; }
.gks-tab-item:hover:not(.gks-tab-active) { background:#e3f0fc; }
.gks-tab-active { background:#1565c0; color:#fff; }

/* タブコンテンツ */
.gks-tab-content { background:#fff; padding:14px; }
.gks-feat-desc { font-size:12px; color:#374151; line-height:1.7; margin:0 0 16px; }
.gks-features-list { display:flex; flex-direction:column; gap:16px; }
.gks-feature-item { display:flex; gap:12px; }
.gks-feature-icon { width:40px; height:40px; background:#1565c0; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; }
.gks-feature-title { font-size:13px; font-weight:900; color:#1565c0; margin:0 0 4px; line-height:1.3; }
.gks-feature-body  { font-size:12px; color:#374151; margin:0; line-height:1.6; }

/* 買取条件テーブル */
.gks-cond-table { border:1px solid #e2e8f0; border-radius:8px; overflow:hidden; }
.gks-cond-row { display:flex; align-items:stretch; border-bottom:1px solid #e2e8f0; }
.gks-cond-row:last-child { border-bottom:none; }
.gks-cond-label { font-size:12px; font-weight:700; color:#1565c0; padding:12px; width:100px; flex-shrink:0; border-right:1px solid #e2e8f0; background:#eef4fb; display:flex; align-items:center; }
.gks-cond-value { font-size:12px; color:#374151; padding:12px; flex:1; display:flex; align-items:center; }

/* 申込ステップ */
.gks-steps-list { display:flex; flex-direction:column; gap:12px; }
.gks-step-item { display:flex; gap:12px; align-items:flex-start; }
.gks-step-num { width:32px; height:32px; background:#1565c0; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:14px; flex-shrink:0; }
.gks-step-body { flex:1; background:#eef4fb; border:1px solid #c7ddf7; border-radius:8px; padding:10px 12px; }
.gks-step-title { font-size:13px; font-weight:900; color:#1565c0; margin:0 0 2px; }
.gks-step-desc  { font-size:12px; color:#374151; margin:0; line-height:1.6; }

/* 口コミ */
.gks-reviews-list { display:flex; flex-direction:column; gap:12px; }
.gks-review-item { background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:12px; }
.gks-review-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.gks-review-avatar { width:28px; height:28px; background:#1565c0; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex-shrink:0; }
.gks-review-user { font-size:12px; font-weight:700; color:#374151; }
.gks-review-stars { display:flex; gap:2px; margin-left:auto; }
.gks-review-comment { font-size:12px; color:#374151; margin:0; line-height:1.6; }

/* キャンペーンバナー */
.gks-campaign-bar { background:#0d3068; padding:12px 16px; display:flex; align-items:center; justify-content:center; gap:8px; }
.gks-campaign-bar span { color:#fff; font-size:14px; font-weight:700; }

/* CTAセクション */
.gks-cta-section { background:#fff; padding:12px 14px 8px; }
.gks-cta-btn { display:block; width:100%; text-align:center; font-weight:900; font-size:16px; color:#fff; border-radius:8px; padding:16px; text-decoration:none; letter-spacing:.02em; transition:opacity .15s; }
.gks-cta-btn:hover { opacity:.9; color:#fff; }
.gks-cta-note { text-align:center; font-size:11px; font-weight:700; color:#e53e3e; margin:8px 0 0; }

/* リセットボタン */
.gks-reset-wrap { margin-top:32px; padding-bottom:40px; }
.gks-reset-btn { width:100%; padding:14px; border-radius:8px; font-weight:700; font-size:14px; border:2px solid #1565c0; color:#1565c0; background:#fff; cursor:pointer; transition:all .15s; }
.gks-reset-btn:hover { background:#e3f0fc; }

/* レスポンシブ */
@media (max-width: 480px) {
  .gks-console-grid { grid-template-columns:1fr 1fr; }
  .gks-est-price { font-size:36px; }
  .gks-price-hero { font-size:32px; }
}
