/* ============================================================
   Club Reservas — Public Styles
   ============================================================ */

:root {
  --crb-primary:       #1d4ed8;
  --crb-primary-hover: #1e40af;
  --crb-primary-light: #dbeafe;
  --crb-available-bg:  #dcfce7;
  --crb-available-fg:  #166534;
  --crb-reserved-bg:   #fee2e2;
  --crb-reserved-fg:   #991b1b;
  --crb-pending-bg:    #fef9c3;
  --crb-pending-fg:    #854d0e;
  --crb-closed-bg:     #f3f4f6;
  --crb-closed-fg:     #9ca3af;
  --crb-past-bg:       #f9fafb;
  --crb-past-fg:       #d1d5db;
  --crb-white:         #ffffff;
  --crb-gray-50:       #f9fafb;
  --crb-gray-100:      #f3f4f6;
  --crb-gray-200:      #e5e7eb;
  --crb-gray-400:      #9ca3af;
  --crb-gray-600:      #4b5563;
  --crb-gray-800:      #1f2937;
  --crb-border:        #e5e7eb;
  --crb-shadow:        0 4px 16px rgba(0,0,0,.08);
  --crb-shadow-sm:     0 2px 8px rgba(0,0,0,.05);
  --crb-radius:        14px;
  --crb-radius-sm:     8px;
  --crb-font:          system-ui, -apple-system, sans-serif;
}

/* Widget container */
.crb-widget {
  font-family:  var(--crb-font);
  max-width:    480px;
  margin:       0 auto 32px;
  color:        var(--crb-gray-800);
}

/* Header */
.crb-widget-header {
  text-align:    center;
  margin-bottom: 20px;
}

.crb-resource-image-wrap {
  margin-bottom: 12px;
  border-radius: var(--crb-radius);
  overflow:      hidden;
  box-shadow:    var(--crb-shadow-sm);
}

.crb-resource-image-wrap img,
.crb-widget-header .crb-resource-img {
  width:       100%;
  height:      auto;
  max-height:  220px;
  object-fit:  cover;
  display:     block;
  border-radius: var(--crb-radius);
}

.crb-resource-title {
  font-size:   1.25rem;
  font-weight: 700;
  margin:      0;
  color:       var(--crb-gray-800);
}

/* Calendar card */
.crb-calendar-wrap {
  background:    var(--crb-white);
  border-radius: var(--crb-radius);
  box-shadow:    var(--crb-shadow);
  padding:       20px;
  margin-bottom: 20px;
}

.crb-calendar {
  user-select: none;
}

/* Nav */
.crb-cal-nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   16px;
}

.crb-cal-title {
  font-size:   1rem;
  font-weight: 700;
  color:       var(--crb-gray-800);
  text-transform: capitalize;
}

.crb-nav-btn {
  background:    var(--crb-primary-light);
  border:        none;
  border-radius: 50%;
  width:         36px;
  height:        36px;
  font-size:     1.4rem;
  line-height:   1;
  cursor:        pointer;
  color:         var(--crb-primary);
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    background .15s;
}

.crb-nav-btn:hover {
  background: var(--crb-primary);
  color:      var(--crb-white);
}

.crb-nav-btn--disabled {
  background: var(--crb-gray-100);
  color:      var(--crb-gray-400);
  cursor:     not-allowed;
  border:     none;
  border-radius: 50%;
  width:      36px;
  height:     36px;
  font-size:  1.4rem;
  display:    flex;
  align-items: center;
  justify-content: center;
}

/* Grid */
.crb-cal-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   4px;
}

.crb-cal-header {
  text-align:  center;
  font-size:   .7rem;
  font-weight: 700;
  color:       var(--crb-gray-400);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding:     6px 0 8px;
}

.crb-cal-day {
  position:      relative;
  aspect-ratio:  1;
  display:       flex;
  align-items:   center;
  justify-content: center;
  border-radius: var(--crb-radius-sm);
  font-size:     .85rem;
  font-weight:   500;
  transition:    transform .1s, box-shadow .1s;
}

.crb-cal-day--empty { background: transparent; }

.crb-cal-day--available {
  background: var(--crb-available-bg);
  color:      var(--crb-available-fg);
}

.crb-cal-day--clickable {
  cursor: pointer;
}

.crb-cal-day--clickable:hover,
.crb-cal-day--clickable:focus {
  transform:  scale(1.12);
  box-shadow: 0 4px 12px rgba(22,163,74,.25);
  outline:    none;
  z-index:    1;
}

.crb-cal-day--reserved {
  background: var(--crb-reserved-bg);
  color:      var(--crb-reserved-fg);
}

.crb-cal-day--pending {
  background: var(--crb-pending-bg);
  color:      var(--crb-pending-fg);
}

.crb-cal-day--closed,
.crb-cal-day--unavailable {
  background: var(--crb-closed-bg);
  color:      var(--crb-closed-fg);
}

.crb-cal-day--past {
  background: var(--crb-past-bg);
  color:      var(--crb-past-fg);
}

.crb-cal-day--today::after {
  content:     '';
  position:    absolute;
  bottom:      4px;
  left:        50%;
  transform:   translateX(-50%);
  width:       4px;
  height:      4px;
  background:  currentColor;
  border-radius: 50%;
}

.crb-cal-day--selected {
  box-shadow: 0 0 0 2px var(--crb-primary);
}

/* Legend */
.crb-cal-legend {
  display:     flex;
  flex-wrap:   wrap;
  gap:         8px 16px;
  margin-top:  16px;
  padding-top: 14px;
  border-top:  1px solid var(--crb-border);
}

.crb-legend-item {
  font-size:   .72rem;
  font-weight: 600;
  display:     flex;
  align-items: center;
  gap:         5px;
}

.crb-legend-item::before {
  content:       '';
  width:         10px;
  height:        10px;
  border-radius: 3px;
  flex-shrink:   0;
}

.crb-legend-item--available::before { background: var(--crb-available-fg); }
.crb-legend-item--reserved::before  { background: var(--crb-reserved-fg); }
.crb-legend-item--pending::before   { background: var(--crb-pending-fg); }
.crb-legend-item--closed::before    { background: var(--crb-closed-fg); }

/* Slots section */
.crb-slots-section {
  background:    var(--crb-white);
  border-radius: var(--crb-radius);
  box-shadow:    var(--crb-shadow);
  padding:       20px;
  margin-bottom: 20px;
  animation:     crbFadeIn .2s ease;
}

.crb-slots-header {
  margin-bottom: 14px;
}

.crb-slots-title {
  font-size:   1rem;
  font-weight: 700;
  margin:      0;
  color:       var(--crb-gray-800);
}

.crb-selected-date-label {
  color:       var(--crb-primary);
}

.crb-slots-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap:                   8px;
}

.crb-slot-btn {
  background:    var(--crb-available-bg);
  color:         var(--crb-available-fg);
  border:        1.5px solid transparent;
  border-radius: var(--crb-radius-sm);
  padding:       10px 6px;
  font-size:     .85rem;
  font-weight:   600;
  cursor:        pointer;
  text-align:    center;
  transition:    all .15s;
  line-height:   1.3;
}

.crb-slot-btn:hover {
  background: var(--crb-available-fg);
  color:      var(--crb-white);
  transform:  translateY(-1px);
}

.crb-slot-btn--selected {
  background: var(--crb-primary);
  color:      var(--crb-white);
  border-color: var(--crb-primary);
}

.crb-slots-empty {
  text-align:  center;
  color:       var(--crb-gray-400);
  font-size:   .9rem;
  padding:     16px 0;
}

/* Form section */
.crb-form-section {
  background:    var(--crb-white);
  border-radius: var(--crb-radius);
  box-shadow:    var(--crb-shadow);
  padding:       24px;
  margin-bottom: 20px;
  animation:     crbFadeIn .2s ease;
}

.crb-form-header {
  margin-bottom: 20px;
}

.crb-form-title {
  font-size:   1rem;
  font-weight: 700;
  margin:      0 0 10px;
  color:       var(--crb-gray-800);
}

.crb-booking-summary {
  background:    var(--crb-primary-light);
  border-left:   3px solid var(--crb-primary);
  border-radius: 6px;
  padding:       10px 14px;
  font-size:     .88rem;
  color:         var(--crb-primary);
  font-weight:   500;
}

/* Fields */
.crb-fields {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.crb-fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.crb-field {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.crb-label {
  font-size:   .85rem;
  font-weight: 600;
  color:       var(--crb-gray-600);
}

.crb-required {
  color:       #dc2626;
  margin-left: 2px;
}

.crb-input,
.crb-textarea {
  border:        1.5px solid var(--crb-border);
  border-radius: var(--crb-radius-sm);
  padding:       10px 12px;
  font-size:     .9rem;
  font-family:   var(--crb-font);
  color:         var(--crb-gray-800);
  background:    var(--crb-gray-50);
  transition:    border .15s, box-shadow .15s;
  width:         100%;
  box-sizing:    border-box;
}

.crb-input:focus,
.crb-textarea:focus {
  outline:       none;
  border-color:  var(--crb-primary);
  background:    var(--crb-white);
  box-shadow:    0 0 0 3px rgba(29,78,216,.12);
}

.crb-input.crb-error,
.crb-textarea.crb-error {
  border-color: #dc2626;
}

.crb-captcha-input {
  max-width: 120px;
}

.crb-field--checkbox {
  flex-direction: row;
  align-items:    flex-start;
}

.crb-checkbox-label {
  display:     flex;
  align-items: flex-start;
  gap:         8px;
  font-size:   .85rem;
  cursor:      pointer;
  line-height: 1.5;
}

.crb-checkbox-label input[type=checkbox] {
  margin-top:  2px;
  flex-shrink: 0;
  width:       16px;
  height:      16px;
  accent-color: var(--crb-primary);
}

/* Buttons */
.crb-form-footer {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-top:      24px;
  gap:             12px;
}

.crb-btn-primary,
.crb-btn-secondary {
  border:        none;
  border-radius: var(--crb-radius-sm);
  padding:       11px 22px;
  font-size:     .9rem;
  font-weight:   600;
  cursor:        pointer;
  transition:    all .15s;
  font-family:   var(--crb-font);
}

.crb-btn-primary {
  background: var(--crb-primary);
  color:      var(--crb-white);
}

.crb-btn-primary:hover:not(:disabled) {
  background:  var(--crb-primary-hover);
  transform:   translateY(-1px);
  box-shadow:  0 4px 12px rgba(29,78,216,.3);
}

.crb-btn-primary:disabled {
  opacity: .6;
  cursor:  not-allowed;
}

.crb-btn-secondary {
  background: var(--crb-gray-100);
  color:      var(--crb-gray-600);
}

.crb-btn-secondary:hover {
  background: var(--crb-gray-200);
}

/* Success */
.crb-success-section {
  animation: crbFadeIn .3s ease;
}

.crb-success-box {
  background:    var(--crb-white);
  border-radius: var(--crb-radius);
  box-shadow:    var(--crb-shadow);
  padding:       40px 28px;
  text-align:    center;
}

.crb-success-icon {
  width:         60px;
  height:        60px;
  background:    var(--crb-available-bg);
  color:         var(--crb-available-fg);
  border-radius: 50%;
  font-size:     1.8rem;
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin:        0 auto 16px;
  font-weight:   700;
}

.crb-success-title {
  font-size:   1.2rem;
  font-weight: 700;
  margin:      0 0 8px;
  color:       var(--crb-available-fg);
}

.crb-success-msg {
  color:         var(--crb-gray-600);
  font-size:     .9rem;
  margin-bottom: 20px;
  line-height:   1.6;
}

/* Error */
.crb-error-section {
  animation: crbFadeIn .2s ease;
}

.crb-error-box {
  background:    var(--crb-white);
  border-radius: var(--crb-radius);
  box-shadow:    var(--crb-shadow);
  padding:       28px;
  border-left:   4px solid #dc2626;
}

.crb-error-msg {
  color:         #991b1b;
  font-size:     .9rem;
  margin-bottom: 14px;
}

/* Loading overlay */
.crb-loading-overlay {
  position:        absolute;
  inset:           0;
  background:      rgba(255,255,255,.75);
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   var(--crb-radius);
  z-index:         10;
}

.crb-spinner {
  width:        28px;
  height:       28px;
  border:       3px solid var(--crb-primary-light);
  border-top:   3px solid var(--crb-primary);
  border-radius: 50%;
  animation:    crbSpin .7s linear infinite;
}

.crb-calendar-wrap { position: relative; }

/* Animations */
@keyframes crbFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes crbSpin {
  to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 480px) {
  .crb-widget { max-width: 100%; }
  .crb-fields-row { grid-template-columns: 1fr; }
  .crb-form-footer { flex-direction: column-reverse; }
  .crb-btn-primary, .crb-btn-secondary { width: 100%; text-align: center; }
  .crb-cal-day { font-size: .78rem; }
}