/* ColorfulGarden Reserve Lite - clean card UI + month calendar + upsell */
.cgrl-wrap{ max-width: 980px; margin: 24px auto; padding: 0 12px; font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif; }
.cgrl-header{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.cgrl-title{ font-size: 20px; font-weight: 800; letter-spacing: .02em; }
.cgrl-steps{ display:flex; gap:10px; align-items:center; }
.cgrl-step{ display:flex; gap:8px; align-items:center; padding:6px 10px; border:1px solid #e5e7eb; border-radius:999px; background:#fff; opacity:.6; }
.cgrl-step.is-active{ opacity:1; border-color:#c7d2fe; box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.cgrl-step.is-done{ opacity:1; border-color:#bbf7d0; }
.cgrl-step-num{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; background:#f3f4f6; }
.cgrl-step.is-active .cgrl-step-num{ background:#eef2ff; }
.cgrl-step.is-done .cgrl-step-num{ background:#dcfce7; }
.cgrl-step-label{ font-size:12px; font-weight:700; }

.cgrl-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:14px; }
@media (max-width: 820px){ .cgrl-grid{ grid-template-columns:1fr; } }

.cgrl-card{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:14px; box-shadow: 0 1px 0 rgba(0,0,0,.04); }

.cgrl-cal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.cgrl-cal-title{ font-weight:800; }
.cgrl-cal-nav{ width:36px; height:36px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; }
.cgrl-cal-nav:hover{ background:#f9fafb; }

.cgrl-cal-dow{ display:grid; grid-template-columns: repeat(7,1fr); gap:6px; font-size:12px; color:#6b7280; margin-bottom:8px; }
.cgrl-cal-dow > div{ text-align:center; padding:4px 0; }

.cgrl-cal-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; }
.cgrl-day{ aspect-ratio: 1 / 1; border-radius:12px; border:1px solid #eef2f7; background:#fff; display:flex; }
.cgrl-day.is-empty{ border:none; background:transparent; }
.cgrl-daybtn{ width:100%; height:100%; border:none; background:transparent; cursor:pointer; border-radius:12px; display:flex; align-items:flex-start; justify-content:flex-start; padding:8px; }
.cgrl-daybtn:disabled{ cursor:not-allowed; opacity:.35; }
.cgrl-daynum{ font-weight:900; font-size:14px; }
.cgrl-day.is-available .cgrl-daybtn:hover{ background:#f9fafb; }
.cgrl-day.is-selected{ border-color:#a5b4fc; background:#eef2ff; }
.cgrl-day.is-disabled{ background:#f3f4f6; border-color:#e5e7eb; }
.cgrl-cal-hint{ margin-top:10px; font-size:12px; color:#6b7280; }

.cgrl-course{ margin-bottom:10px; padding:12px; border-radius:12px; background:#fafafa; border:1px solid #eee; }
.cgrl-course-name{ font-weight:900; }
.cgrl-course-price{ margin-top:4px; color:#111827; }

.cgrl-selected{ display:flex; align-items:baseline; gap:10px; padding:10px 12px; border:1px dashed #e5e7eb; border-radius:12px; background:#fafafa; margin-bottom:12px; }
.cgrl-selected-label{ font-size:12px; color:#6b7280; }
.cgrl-selected-date{ font-size:16px; font-weight:900; }

.cgrl-form{ display:flex; flex-direction:column; gap:10px; }
.cgrl-field{ display:flex; flex-direction:column; gap:6px; }
.cgrl-field-label{ font-size:13px; font-weight:800; }
.cgrl-field input, .cgrl-field select{
  width:100%;
  max-width: 520px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
}
.cgrl-field input:focus, .cgrl-field select:focus{ outline:none; border-color:#a5b4fc; box-shadow: 0 0 0 3px rgba(165,180,252,.25); }
.cgrl-field-help{ font-size:12px; color:#6b7280; }

.cgrl-upsell{ margin-top:4px; padding:12px; border-radius:12px; border:1px solid #e5e7eb; background:#fff; }
.cgrl-upsell-title{ font-weight:900; margin-bottom:8px; }
.cgrl-upsell-list{ display:flex; flex-direction:column; gap:8px; }
.cgrl-check{ display:flex; gap:10px; align-items:flex-start; padding:10px; border-radius:12px; border:1px solid #eef2f7; background:#fafafa; cursor:pointer; }
.cgrl-check:hover{ background:#f3f4f6; }
.cgrl-check input{ margin-top:3px; }
.cgrl-check-main{ display:flex; justify-content:space-between; width:100%; gap:12px; }
.cgrl-check-label{ font-weight:800; }
.cgrl-check-price{ font-weight:900; color:#111827; white-space:nowrap; }

.cgrl-total{ margin-top:10px; display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:12px; background:#111827; color:#fff; }
.cgrl-total-label{ font-weight:800; opacity:.9; }
.cgrl-total-value{ font-weight:900; font-size:16px; }

.cgrl-btn{
  max-width: 260px;
  padding:11px 14px;
  border-radius:12px;
  border:1px solid #111827;
  background:#111827;
  color:#fff;
  cursor:pointer;
  font-weight:900;
}
.cgrl-btn:hover{ filter: brightness(1.05); }
.cgrl-note{ font-size:12px; color:#6b7280; margin-top:2px; }

.cgrl-msg{ margin-top:12px; padding:10px 12px; border-radius:12px; font-weight:800; }
.cgrl-msg.is-success{ background:#ecfdf5; border:1px solid #bbf7d0; color:#065f46; }
.cgrl-msg.is-error{ background:#fef2f2; border:1px solid #fecaca; color:#7f1d1d; }

.cgrl-paybox{ margin-top:10px; padding:10px 12px; border-radius:12px; border:1px solid #e5e7eb; background:#fafafa; font-weight:700; }
.cgrl-paylink{ display:inline-block; margin-left:8px; padding:8px 10px; border-radius:10px; background:#111827; color:#fff; text-decoration:none; }
.cgrl-paylink:hover{ filter: brightness(1.05); }