/* ================================================================
   Custom WooCommerce Booking System — Frontend Styles  v2.1.3
   Primary: #5C8984 (teal)
   New in 2.1.3: consent checkbox section styles
   ================================================================ */

:root {
  --cwb-primary:       #5C8984;
  --cwb-primary-light: #A8CFCB;
  --cwb-primary-dark:  #3D6B66;
  --cwb-primary-bg:    #EBF4F3;
  --cwb-bg:            #ffffff;
  --cwb-surface:       #f9fafb;
  --cwb-border:        #e5e7eb;
  --cwb-text:          #111827;
  --cwb-muted:         #6b7280;
  --cwb-error:         #dc2626;
  --cwb-error-bg:      #fef2f2;
  --cwb-error-bdr:     #fecaca;
  --cwb-radius:        14px;
  --cwb-radius-sm:     8px;
  --cwb-shadow:        0 4px 24px rgba(0,0,0,0.08);
  --cwb-trans:         0.18s ease;
}

/* ── Scope & reset ─────────────────────────────────────────────── */
.cwb-booking-wrap {
  margin: 32px 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
  font-size: 15px; line-height: 1.5; color: var(--cwb-text);
  box-sizing: border-box;
}
.cwb-booking-wrap *, .cwb-booking-wrap *::before, .cwb-booking-wrap *::after { box-sizing: inherit; }

/* ── Card ──────────────────────────────────────────────────────── */
.cwb-card {
  background: var(--cwb-bg);
  border: 1px solid var(--cwb-border);
  border-radius: var(--cwb-radius);
  box-shadow: var(--cwb-shadow);
  padding: 28px 28px 24px;
  max-width: 580px;
}

/* ── Title ─────────────────────────────────────────────────────── */
.cwb-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.15rem; font-weight: 700; color: var(--cwb-text);
  margin: 0 0 24px; padding-bottom: 16px;
  border-bottom: 2px solid var(--cwb-primary);
}
.cwb-title svg { color: var(--cwb-primary); flex-shrink: 0; }
.cwb-section-label {
  font-size: 0.78rem; font-weight: 700; color: var(--cwb-muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 12px;
}

/* ── Calendar ──────────────────────────────────────────────────── */
.cwb-calendar-wrapper { margin-bottom: 24px; }
.cwb-calendar-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.cwb-month-label {
  font-size: 1rem; font-weight: 700; color: var(--cwb-text);
  min-width: 160px; text-align: center;
}
.cwb-nav {
  background: none; border: 1.5px solid var(--cwb-border); border-radius: 50%;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1; color: var(--cwb-text); cursor: pointer;
  transition: all var(--cwb-trans); padding: 0;
}
.cwb-nav:hover { border-color: var(--cwb-primary); color: var(--cwb-primary); background: var(--cwb-primary-bg); }
.cwb-day-names { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; margin-bottom: 4px; }
.cwb-day-name { text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--cwb-muted); text-transform: uppercase; padding: 4px 0; }
.cwb-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }
.cwb-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: var(--cwb-radius-sm); font-size: 0.85rem; font-weight: 500;
  cursor: pointer; transition: all var(--cwb-trans);
  border: 1.5px solid transparent; background: var(--cwb-surface);
  color: var(--cwb-text); min-height: 38px; user-select: none;
}
.cwb-day:hover:not(.cwb-day--disabled):not(.cwb-day--empty) { background: var(--cwb-primary-bg); border-color: var(--cwb-primary-light); color: var(--cwb-primary-dark); }
.cwb-day--empty  { background: transparent; cursor: default; border: none; }
.cwb-day--disabled { color: #d1d5db; background: transparent; cursor: not-allowed; text-decoration: line-through; }
.cwb-day--today  { font-weight: 800; border-color: var(--cwb-primary-light); }
.cwb-day--selected { background: var(--cwb-primary) !important; border-color: var(--cwb-primary) !important; color: #fff !important; font-weight: 800; box-shadow: 0 2px 10px rgba(92,137,132,.45); }

/* ── Time Slots ────────────────────────────────────────────────── */
.cwb-slots-section { margin-bottom: 22px; }
.cwb-slots-loading { display: flex; align-items: center; gap: 10px; color: var(--cwb-muted); font-size: 0.9rem; padding: 10px 0; }
.cwb-slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px,1fr)); gap: 9px; }
.cwb-slot {
  border: 1.5px solid var(--cwb-border); border-radius: var(--cwb-radius-sm);
  padding: 10px 6px; text-align: center; cursor: pointer; transition: all var(--cwb-trans);
  font-size: 0.85rem; font-weight: 600; color: var(--cwb-text);
  background: var(--cwb-surface); user-select: none; line-height: 1.3;
}
.cwb-slot:hover { border-color: var(--cwb-primary); background: var(--cwb-primary-bg); color: var(--cwb-primary-dark); }
.cwb-slot--selected { background: var(--cwb-primary) !important; border-color: var(--cwb-primary) !important; color: #fff !important; box-shadow: 0 2px 10px rgba(92,137,132,.4); }
.cwb-slot small { display: block; font-size: 0.7rem; font-weight: 400; opacity: .85; margin-top: 2px; }
.cwb-no-slots { color: var(--cwb-muted); font-size: 0.9rem; padding: 10px 0; margin: 0; }

/* ── Summary banner ────────────────────────────────────────────── */
.cwb-summary { margin-bottom: 22px; }
.cwb-summary-inner {
  display: flex; align-items: center; gap: 10px;
  background: var(--cwb-primary-bg); border: 1.5px solid var(--cwb-primary-light);
  border-radius: var(--cwb-radius-sm); padding: 13px 16px;
  font-size: 0.95rem; font-weight: 600; color: var(--cwb-primary-dark); line-height: 1.4;
}
.cwb-summary-inner svg { flex-shrink: 0; color: var(--cwb-primary); }

/* ── Form grid ─────────────────────────────────────────────────── */
.cwb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.cwb-field--full { grid-column: 1 / -1; }
.cwb-field label { display: block; font-size: 0.82rem; font-weight: 700; color: var(--cwb-text); margin-bottom: 5px; letter-spacing: .01em; }
.cwb-req { color: var(--cwb-error); margin-left: 1px; }
.cwb-field input,
.cwb-field textarea,
.cwb-field select {
  width: 100%; padding: 10px 13px;
  border: 1.5px solid var(--cwb-border); border-radius: var(--cwb-radius-sm);
  font-size: 0.9rem; color: var(--cwb-text); background: var(--cwb-bg);
  transition: border-color var(--cwb-trans), box-shadow var(--cwb-trans);
  outline: none; -webkit-appearance: none; appearance: none; font-family: inherit;
}
.cwb-field input:focus,
.cwb-field textarea:focus,
.cwb-field select:focus { border-color: var(--cwb-primary); box-shadow: 0 0 0 3px rgba(92,137,132,.18); }
.cwb-field input::placeholder,
.cwb-field textarea::placeholder { color: #c4c4c4; }
.cwb-field textarea { resize: vertical; min-height: 80px; }

/* Custom field option groups */
.cwb-radio-group, .cwb-check-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cwb-radio-label, .cwb-check-item-label {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem;
  padding: 5px 12px; border: 1.5px solid var(--cwb-border); border-radius: 6px;
  cursor: pointer; transition: all var(--cwb-trans);
}
.cwb-radio-label:hover, .cwb-check-item-label:hover { border-color: var(--cwb-primary); background: var(--cwb-primary-bg); }
.cwb-radio-label input, .cwb-check-item-label input { accent-color: var(--cwb-primary); }

/* ── Consent checkboxes (v2.1.3) ───────────────────────────────── */
.cwb-consent-section {
  margin: 0 0 20px;
  padding: 18px;
  background: var(--cwb-primary-bg);
  border: 1.5px solid var(--cwb-primary-light);
  border-radius: var(--cwb-radius-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cwb-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  line-height: 1.5;
}

/* Custom checkbox appearance */
.cwb-consent-checkbox-wrap {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}
.cwb-consent-checkbox-wrap input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}
.cwb-consent-checkmark {
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--cwb-primary);
  border-radius: 4px;
  background: #fff;
  transition: all var(--cwb-trans);
  position: absolute;
  top: 0; left: 0;
}
.cwb-consent-checkbox-wrap input[type="checkbox"]:checked + .cwb-consent-checkmark {
  background: var(--cwb-primary);
  border-color: var(--cwb-primary);
}
.cwb-consent-checkbox-wrap input[type="checkbox"]:checked + .cwb-consent-checkmark::after {
  content: '';
  display: block;
  position: absolute;
  left: 5px; top: 2px;
  width: 6px; height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.cwb-consent-checkbox-wrap input[type="checkbox"]:focus + .cwb-consent-checkmark {
  box-shadow: 0 0 0 3px rgba(92,137,132,.25);
}

/* Error state: unchecked consent */
.cwb-consent-label.cwb-consent--error .cwb-consent-checkmark {
  border-color: var(--cwb-error);
  box-shadow: 0 0 0 3px rgba(220,38,38,.15);
}

.cwb-consent-text {
  font-size: 0.83rem;
  color: #374151;
  line-height: 1.55;
}
.cwb-consent-text a {
  color: var(--cwb-primary-dark);
  text-decoration: underline;
}
.cwb-consent-text a:hover { color: var(--cwb-primary); }

/* Consent validation error */
.cwb-consent-error {
  background: var(--cwb-error-bg);
  border: 1px solid var(--cwb-error-bdr);
  border-radius: var(--cwb-radius-sm);
  color: var(--cwb-error);
  padding: 9px 13px;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ── General error ─────────────────────────────────────────────── */
.cwb-error {
  background: var(--cwb-error-bg); border: 1px solid var(--cwb-error-bdr);
  border-radius: var(--cwb-radius-sm); color: var(--cwb-error);
  padding: 11px 15px; font-size: 0.88rem; margin-bottom: 14px; line-height: 1.5;
}

/* ── Book Now button ───────────────────────────────────────────── */
.cwb-book-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 20px;
  background: linear-gradient(135deg, var(--cwb-primary) 0%, var(--cwb-primary-dark) 100%);
  color: #fff; border: none; border-radius: var(--cwb-radius-sm);
  font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: transform var(--cwb-trans), box-shadow var(--cwb-trans), opacity var(--cwb-trans);
  letter-spacing: .02em; font-family: inherit;
}
.cwb-book-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(92,137,132,.42); }
.cwb-book-btn:active:not(:disabled) { transform: none; }
.cwb-book-btn:disabled { opacity: .62; cursor: not-allowed; transform: none; box-shadow: none; }
.cwb-btn-text, .cwb-btn-loading { display: flex; align-items: center; gap: 8px; }

/* ── Spinner ───────────────────────────────────────────────────── */
.cwb-spinner {
  display: inline-block; width: 17px; height: 17px;
  border: 2px solid rgba(92,137,132,.25); border-top-color: var(--cwb-primary);
  border-radius: 50%; animation: cwb-spin .65s linear infinite; flex-shrink: 0;
}
.cwb-spinner--white { border-color: rgba(255,255,255,.3); border-top-color: #fff; }
@keyframes cwb-spin { to { transform: rotate(360deg); } }

/* ── Thank you ─────────────────────────────────────────────────── */
.cwb-thankyou { margin-top: 30px; }
.cwb-thankyou-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--cwb-border); border-radius: var(--cwb-radius-sm); overflow: hidden; }
.cwb-thankyou-list li { padding: 10px 16px; border-bottom: 1px solid var(--cwb-border); font-size: .9rem; }
.cwb-thankyou-list li:last-child { border-bottom: none; }
.cwb-thankyou-list li strong { color: var(--cwb-primary-dark); margin-right: 6px; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .cwb-card { padding: 18px 16px; }
  .cwb-form-grid { grid-template-columns: 1fr; }
  .cwb-field--full { grid-column: 1; }
  .cwb-slots-grid { grid-template-columns: repeat(auto-fill, minmax(90px,1fr)); }
  .cwb-day { font-size: .78rem; min-height: 34px; }
  .cwb-month-label { font-size: .9rem; min-width: 130px; }
  .cwb-consent-section { padding: 14px; }
}