/* SPANA Booking Form CSS v2.1.0 */

/* ページタイトル非表示 */
h1.entry-title,h1.page-title,h1.post-title,.entry-title,.page-title,.post-title,
.article-title,.l-article__title,body .page-title,body h1.page-title,html body .page-title {
  display:none!important;visibility:hidden!important;height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;
}

:root {
  --sbk-primary:#b08d57;--sbk-primary-light:#f5efe6;--sbk-primary-dark:#8a6d3b;
  --sbk-text:#333;--sbk-text-light:#888;--sbk-border:#e0d5c5;--sbk-bg:#fdfaf5;
  --sbk-radius:12px;--sbk-font:'Noto Sans JP',sans-serif;
}

.spana-booking-wrap {font-family:var(--sbk-font);color:var(--sbk-text);max-width:800px;margin:40px auto;padding:20px;line-height:1.6;}

/* 事前査定チェック */
.sbk-precheck-box {background:#fff8ee;border:2px solid var(--sbk-primary);border-radius:var(--sbk-radius);padding:24px 28px;margin-bottom:28px;text-align:center;}
.sbk-precheck-notice {font-size:1.15rem;font-weight:700;color:#7a5a20;margin:0 0 16px;line-height:1.7;}
.sbk-precheck-label {display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:1rem;font-weight:600;color:#c0392b;}
.sbk-precheck-label input[type="checkbox"] {width:22px;height:22px;accent-color:var(--sbk-primary);cursor:pointer;}

/* ヘッダー */
.sbk-form-header {text-align:center;margin-bottom:32px;}
.sbk-main-title {font-size:clamp(1.3rem,3vw,1.8rem);font-weight:800;color:#2c2c2c;letter-spacing:.05em;margin:0 0 10px;}
.sbk-title-accent {width:50px;height:3px;background:var(--sbk-primary);margin:0 auto 14px;border-radius:2px;}
.sbk-sub-title {font-size:.9rem;color:var(--sbk-text-light);margin:0;}

/* ステップ */
.sbk-steps {display:flex;align-items:center;justify-content:center;margin-bottom:32px;}
.sbk-step {display:flex;flex-direction:column;align-items:center;gap:6px;}
.sbk-step-num {width:36px;height:36px;border-radius:50%;background:#e0d5c5;color:#fff;font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:all .3s;}
.sbk-step.active .sbk-step-num {background:var(--sbk-primary);}
.sbk-step.completed .sbk-step-num {background:var(--sbk-primary-dark);}
.sbk-step-label {font-size:.72rem;color:var(--sbk-text-light);white-space:nowrap;}
.sbk-step.active .sbk-step-label {color:var(--sbk-primary);font-weight:600;}
.sbk-step-line {flex:1;height:2px;background:#e0d5c5;max-width:60px;margin-bottom:20px;transition:background .3s;}
.sbk-step-line.completed {background:var(--sbk-primary-dark);}

/* パネル */
.sbk-panel {display:none;}
.sbk-panel.active {display:block;}

/* カード */
.sbk-card {background:#fff;border:1px solid var(--sbk-border);border-radius:var(--sbk-radius);padding:24px;margin-bottom:16px;box-shadow:0 2px 12px rgba(0,0,0,.04);}

/* カレンダー */
.sbk-calendar-header {display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.sbk-cal-month {font-size:1.1rem;font-weight:700;color:#2c2c2c;}
.sbk-cal-nav {background:var(--sbk-primary-light)!important;border:1px solid var(--sbk-primary)!important;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--sbk-primary)!important;font-size:22px;font-weight:bold;line-height:1;transition:all .2s;padding:0;}
.sbk-cal-nav:hover {background:var(--sbk-primary)!important;color:#fff!important;}
.sbk-calendar-grid {display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.sbk-cal-dayname {text-align:center;font-size:.75rem;font-weight:600;color:var(--sbk-text-light);padding:4px 0;}
.sbk-cal-dayname.sun {color:#e74c3c;} .sbk-cal-dayname.sat {color:#2980b9;}
.sbk-cal-cell {text-align:center;padding:8px 4px;border-radius:8px;font-size:.85rem;cursor:pointer;transition:all .15s;min-height:36px;display:flex;align-items:center;justify-content:center;}
.sbk-cal-cell:not(.disabled):not(.empty):hover {background:var(--sbk-primary-light);color:var(--sbk-primary);font-weight:600;}
.sbk-cal-cell.selected {background:var(--sbk-primary);color:#fff!important;font-weight:700;}
.sbk-cal-cell.disabled {color:#ccc;cursor:not-allowed;background:#fafafa;}
.sbk-cal-cell.sun {color:#e74c3c;} .sbk-cal-cell.sat {color:#2980b9;}

/* 時間グリッド */
.sbk-time-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;}
.sbk-time-btn {background:var(--sbk-bg);border:1px solid var(--sbk-border);border-radius:8px;padding:10px 4px;font-size:.85rem;font-family:var(--sbk-font);cursor:pointer;transition:all .15s;color:var(--sbk-text);}
.sbk-time-btn:hover {background:var(--sbk-primary-light);border-color:var(--sbk-primary);color:var(--sbk-primary);}
.sbk-time-btn.selected {background:var(--sbk-primary);border-color:var(--sbk-primary);color:#fff;font-weight:700;}
.sbk-time-note {font-size:.78rem;color:var(--sbk-text-light);margin:4px 0 0;}

/* 選択日時バー */
.sbk-selected-info {background:var(--sbk-primary-light);border:1px solid var(--sbk-primary);border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:10px;font-weight:600;color:var(--sbk-primary-dark);margin-bottom:16px;font-size:.95rem;}

/* フォーム */
.sbk-form-group {margin-bottom:20px;}
.sbk-form-group label {display:block;font-weight:600;font-size:.92rem;margin-bottom:8px;color:#2c2c2c;}
.sbk-input {width:100%;padding:11px 14px;border:1px solid var(--sbk-border);border-radius:8px;font-size:.95rem;font-family:var(--sbk-font);color:var(--sbk-text);background:#fff;box-sizing:border-box;transition:border-color .2s,box-shadow .2s;outline:none;}
.sbk-input:focus {border-color:var(--sbk-primary);box-shadow:0 0 0 3px rgba(176,141,87,.15);}

/* 連絡先トグル */
.sbk-contact-toggle {display:flex;gap:8px;margin-bottom:12px;}
.sbk-toggle-btn {flex:1;padding:10px;border:1px solid var(--sbk-border);border-radius:8px;background:#fff;font-family:var(--sbk-font);font-size:.88rem;cursor:pointer;color:var(--sbk-text-light);transition:all .2s;}
.sbk-toggle-btn.active {background:var(--sbk-primary);border-color:var(--sbk-primary);color:#fff;font-weight:700;}
.sbk-contact-field {display:none;}
.sbk-contact-field.active {display:block;}

/* バッジ */
.required-badge {background:var(--sbk-primary);color:#fff;font-size:.7rem;padding:2px 7px;border-radius:4px;margin-left:6px;vertical-align:middle;font-weight:600;}
.optional-badge {background:#f0f0f0;color:#888;font-size:.7rem;padding:2px 7px;border-radius:4px;margin-left:6px;vertical-align:middle;}
.sbk-note {font-size:.78rem;color:var(--sbk-text-light);margin:6px 0 0;}

/* ボタン */
.sbk-btn-row {display:flex;justify-content:flex-end;gap:12px;margin-top:8px;}
.sbk-btn {padding:13px 28px;border-radius:10px;font-size:.95rem;font-family:var(--sbk-font);font-weight:700;cursor:pointer;border:none;transition:all .2s;}
.sbk-btn-primary {background:var(--sbk-primary);color:#fff;}
.sbk-btn-primary:hover {background:var(--sbk-primary-dark);transform:translateY(-1px);box-shadow:0 4px 14px rgba(176,141,87,.35);}
.sbk-btn-primary:disabled {opacity:.6;cursor:not-allowed;transform:none;}
.sbk-btn-secondary {background:#fff;border:1px solid var(--sbk-border)!important;color:var(--sbk-text);min-width:100px;}
.sbk-btn-secondary:hover {background:var(--sbk-primary-light);border-color:var(--sbk-primary)!important;color:var(--sbk-primary);}

/* 確認テーブル */
.sbk-confirm-table {width:100%;border-collapse:collapse;font-size:.92rem;}
.sbk-confirm-table th,.sbk-confirm-table td {padding:11px 14px;border-bottom:1px solid var(--sbk-border);text-align:left;word-break:break-all;overflow-wrap:anywhere;}
.sbk-confirm-table th {width:120px;color:var(--sbk-text-light);font-weight:600;white-space:nowrap;}

/* 完了 */
.sbk-complete {text-align:center;padding:40px 0;}
.sbk-complete-icon {width:70px;height:70px;background:var(--sbk-primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 25px;}
.sbk-complete-icon svg {width:36px;height:36px;stroke:var(--sbk-primary);stroke-width:2.5;fill:none;}
.sbk-complete h3 {font-size:22px;font-weight:800;color:#2c2c2c;margin-bottom:16px;}
.sbk-complete p {font-size:14px;color:var(--sbk-text-light);line-height:1.8;}

/* アラート・エラー */
.sbk-alert {display:none;padding:14px 18px;border-radius:8px;font-size:14px;margin-bottom:20px;}
.sbk-alert.visible {display:block;}
.sbk-alert-error {background:#fdeaea;border:1px solid #f5c6c6;color:#c0392b;}
.sbk-error-msg {display:none;color:#c0392b;font-size:.82rem;margin-top:6px;}

/* スピナー */
.sbk-spinner {display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sbk-spin .7s linear infinite;vertical-align:middle;margin-right:6px;}
@keyframes sbk-spin{to{transform:rotate(360deg);}}

/* レスポンシブ */
@media(max-width:600px){
  .spana-booking-wrap{padding:12px;margin:20px auto;}
  .sbk-card{padding:16px;}
  .sbk-time-grid{grid-template-columns:repeat(3,1fr);}
  .sbk-btn{padding:12px 18px;font-size:.88rem;}
  .sbk-step-label{display:none;}
  .sbk-confirm-table th{width:80px;white-space:nowrap;}
  .sbk-confirm-table td{word-break:break-all;overflow-wrap:anywhere;max-width:0;}
  .sbk-precheck-notice{font-size:1rem;}
  .sbk-contact-toggle{flex-direction:column;}
}