/* Z Rental フロント予約 v2 */
#zr-booking-app { font-family: sans-serif; max-width: 680px; margin: 0 auto; }
.zr-loading { color: #888; padding: 20px 0; font-size: 14px; }
.zr-empty   { color: #888; font-size: 13px; }

/* 車種グリッド */
.zr-cat-grid  { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 20px; }
@media (min-width: 480px) { .zr-cat-grid { grid-template-columns: repeat(4,1fr); } }
.zr-cat-btn   { padding: 12px 8px; border-radius: 12px; border: 1px solid #ddd; background: #fff; cursor: pointer; text-align: center; }
.zr-cat-btn:hover { border-color: #aaa; }
.zr-cat-btn.zr-sel { border: 2px solid #1D9E75; background: #EAF3DE; }
.zr-cat-icon  { display: block; font-size: 26px; margin-bottom: 4px; }
.zr-cat-name  { display: block; font-size: 13px; font-weight: 600; color: #222; }
.zr-cat-btn.zr-sel .zr-cat-name { color: #27500A; }
.zr-cat-price    { display: block; font-size: 12px; color: #444; margin-top: 3px; font-weight: 500; }
.zr-cat-rate-sub { display: block; font-size: 11px; color: #666; margin-top: 1px; }
.zr-cat-hint     { display: block; font-size: 10px; color: #999; margin-top: 3px; }

/* 車両リスト */
.zr-section-label { font-size: 11px; font-weight: 600; color: #888; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; }
.zr-car-list  { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.zr-car-item  { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 12px; border: 1px solid #ddd; background: #fff; cursor: pointer; }
.zr-car-item:hover { border-color: #aaa; }
.zr-car-item.zr-sel { border: 2px solid #1D9E75; background: #EAF3DE; }
.zr-car-plate { font-size: 14px; font-weight: 600; color: #222; }
.zr-car-item.zr-sel .zr-car-plate { color: #27500A; }

/* カレンダー */
.zr-cal-wrap   { border: 1px solid #e0e0e0; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.zr-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.zr-cal-title  { font-size: 14px; font-weight: 600; color: #222; }
.zr-nav        { background: none; border: 1px solid #ddd; border-radius: 6px; width: 30px; height: 30px; cursor: pointer; font-size: 18px; line-height: 1; }
.zr-cal-grid   { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.zr-dow        { text-align: center; font-size: 11px; color: #999; padding: 4px 0; }
.zr-cell       { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 7px; font-size: 12px; }
.zr-cell:hover[style*="cursor:pointer"] { filter: brightness(.9); }
.zr-today      { outline: 2px solid #1D9E75; outline-offset: -2px; }
.zr-sel-s      { background: #1D9E75 !important; color: #fff !important; font-weight: 600; }
.zr-sel-r      { background: #9FE1CB !important; color: #085041 !important; }
.zr-cell-sub   { font-size: 9px; opacity: .8; }

/* 凡例 */
.zr-legend { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.zr-leg    { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #666; }
.zr-leg::before { content:''; display:inline-block; width:11px; height:11px; border-radius:3px; background:var(--lc,#EAF3DE); border:1px solid var(--lb,#97C45944); }

/* 空き結果 */
.zr-alert        { border-radius: 10px; padding: 14px 16px; font-size: 13px; margin-bottom: 14px; line-height: 1.7; }
.zr-alert-ok     { background: #EAF3DE; border: 1px solid #97C459; color: #27500A; }
.zr-alert-error  { background: #FCEBEB; border: 1px solid #F09595; color: #791F1F; }
.zr-rate-badge   { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 10px; font-weight: 500; margin-right: 4px; }
.zr-rate-weekly  { background: #FAEEDA; color: #633806; }
.zr-rate-monthly { background: #E6F1FB; color: #0C447C; }
.zr-adj-badge    { display: inline-block; font-size: 11px; background: #FCEBEB; color: #791F1F; padding: 2px 7px; border-radius: 10px; }

/* 料金内訳 */
.zr-price-breakdown { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; font-size: 13px; }
.zr-price-row   { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #eee; }
.zr-price-row:last-child { border-bottom: none; }
.zr-price-total { font-weight: 600; font-size: 15px; padding-top: 8px; margin-top: 2px; }

/* フォーム */
.zr-form-wrap  { border: 1px solid #e0e0e0; border-radius: 12px; padding: 18px; margin-bottom: 12px; }
.zr-form-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .zr-form-grid { grid-template-columns: 1fr; } }
.zr-field      { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.zr-field label { font-size: 13px; color: #555; font-weight: 500; }
.zr-field input { border: 1px solid #ccc; border-radius: 8px; padding: 9px 12px; font-size: 14px; }
.zr-field input:focus { outline: none; border-color: #1D9E75; box-shadow: 0 0 0 2px #9FE1CB44; }
.zr-select     { width: 100%; border: 1px solid #ccc; border-radius: 8px; padding: 9px 12px; font-size: 14px; background: #fff; }
.zr-select:focus { outline: none; border-color: #1D9E75; box-shadow: 0 0 0 2px #9FE1CB44; }
.zr-req        { color: #e24b4a; }
.zr-error      { background: #FCEBEB; border: 1px solid #F09595; border-radius: 8px; padding: 10px 14px; font-size: 13px; color: #791F1F; margin-bottom: 12px; }
.zr-submit-btn { width: 100%; padding: 14px; border-radius: 8px; background: #1D9E75; color: #fff; border: none; font-size: 15px; font-weight: 600; cursor: pointer; }
.zr-submit-btn:hover    { background: #0F6E56; }
.zr-submit-btn:disabled { background: #9FE1CB; cursor: not-allowed; }

/* 完了 */
.zr-complete      { text-align: center; padding: 40px 20px; }
.zr-complete-icon { font-size: 52px; color: #1D9E75; margin-bottom: 12px; }
.zr-complete h3   { font-size: 20px; margin-bottom: 8px; color: #222; }
.zr-complete p    { font-size: 14px; color: #555; margin-bottom: 6px; }

/* 日付選択ステータス表示 */
.zr-date-status         { border-radius: 10px; padding: 14px 16px; margin: 10px 0 12px; font-size: 14px; }
.zr-date-status-hint    { background: #f8f9fa; border: 1px dashed #ccc; color: #888; text-align: center; padding: 16px; }
.zr-date-status-start   { background: #FFF8E7; border: 1px solid #F5C842; }
.zr-date-status-both    { background: #EAF3DE; border: 1px solid #97C459; }
.zr-ds-row              { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.zr-ds-row:last-of-type { border-bottom: none; }
.zr-ds-label            { font-size: 12px; color: #666; min-width: 80px; }
.zr-ds-val              { font-size: 14px; font-weight: 600; color: #222; }
.zr-ds-price            { color: #0F6E56; font-size: 16px; }
.zr-ds-price small      { font-size: 11px; font-weight: 400; margin-left: 2px; }
.zr-ds-detail           { font-size: 11px; color: #666; }
.zr-ds-maint .zr-ds-val { font-size: 12px; color: #185FA5; font-weight: 500; }
.zr-ds-hint             { font-size: 12px; color: #7A5C00; margin-top: 8px; text-align: center; }
.zr-ds-sub              { padding: 0; border: none; }
.zr-ds-reset            { margin-top: 10px; width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #ccc; background: #fff; cursor: pointer; font-size: 12px; color: #666; }
.zr-ds-reset:hover      { background: #f5f5f5; }

/* 完了画面 */
.zr-complete-body { font-size:14px; color:#444; line-height:1.8; margin:12px 0 16px; text-align:left; }
.zr-complete-img  { text-align:center; margin:12px 0; }