/* CR Woo Frontend Styles - Compact Calendar Interface */

/* Simple Button (no container) */
.cr-booking-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* ===== ECHTE KALENDER MODAL CSS ===== */

/* Overlay */
.cr-booking-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cr-booking-overlay.active { opacity: 1; visibility: visible; }

/* Modal Container */
.cr-booking-modal {
    background: white;
    border-radius: 5px;
    max-width: 600px;
    width: 90vw;
    max-height: 90vh;
    overflow: hidden; /* keep edges clean */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.cr-booking-overlay.active .cr-booking-modal { transform: scale(1); }

/* Modal Header */
.cr-modal-header { display:flex; justify-content:space-between; align-items:center; padding:20px 25px; border-bottom:1px solid #e0e0e0; background:#f8f9fa; border-radius:5px 5px 0 0; }
.cr-modal-title { margin: 0; color: #2E4057; font-size: 20px; font-weight: 600; }
.cr-modal-close { background:none; border:none; font-size:24px; color:#666; cursor:pointer; padding:0; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:all .2s ease; }
.cr-modal-close:hover { background:#e0e0e0; color:#333; }

/* Modal Body */
.cr-modal-body { padding: 25px; }

/* Calendar Navigation */
.cr-calendar-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding:0 10px; }
.cr-prev-month, .cr-next-month { background:#A3B18A; color:#fff; border:none; padding:8px 12px; border-radius:5px; cursor:pointer; font-size:16px; transition:background .2s ease; }
.cr-prev-month:hover, .cr-next-month:hover { background:#8fa076; }
.cr-calendar-month { font-size:18px; font-weight:600; color:#2E4057; }

/* Theme tokens */
:root{ --cr-bg:#ffffff; --cr-surface:#ffffff; --cr-muted:#6b7280; --cr-text:#111827; --cr-border:#E5E7EB; --cr-accent:#00d659; --cr-accent-weak:#D1FAE5; --cr-accent-strong:#16A34A; --cr-today:#EEF2FF; --cr-selected:#DBEAFE; --cr-disabled:#E5E7EB; --cr-shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06); --cr-radius:12px; --cr-radius-sm:10px; --cr-gap:8px; --cr-primary:#A3B18A; }

/* Calendar grid */
.cr-calendar-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:var(--cr-gap); background:var(--cr-bg); padding:6px 12px 14px 6px; border-radius:12px; max-height:70vh; overflow-y:auto; overflow-x:visible; }

/* Weekday headers */
.cr-calendar-header{ text-align:center; font-weight:600; color:var(--cr-muted); padding:8px 0 6px; border:none; }

/* Day cell */
.cr-calendar-day{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; background:var(--cr-surface); border-radius:var(--cr-radius); padding:12px 8px; min-height:72px; box-shadow:var(--cr-shadow); border:none; transition:transform .12s ease, box-shadow .12s ease, background .12s ease; cursor:pointer; }
.cr-calendar-grid > div{ border:none; }
.cr-day-number{ font-size:14px; line-height:1; color:var(--cr-text); font-weight:600; }
.cr-calendar-day:hover{ transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.cr-calendar-day:focus-visible{ outline:2px solid var(--cr-selected); outline-offset:2px; }
.cr-calendar-day.today{ background:var(--cr-today); }
.cr-calendar-day.selected{ background:var(--cr-selected); box-shadow:0 4px 16px rgba(59,130,246,.15); }
.cr-calendar-day.other-month{ opacity:.45; filter:saturate(.7); cursor:default; }
.cr-calendar-day.other-month:hover{ transform:none; box-shadow:var(--cr-shadow); }
.cr-calendar-day.disabled, .cr-calendar-day:not(.available):not(.today):not(.selected){ opacity:.6; cursor:not-allowed; }
.cr-availability-indicator{ display:flex; align-items:center; gap:6px; margin-top:auto; }
.cr-availability-icon{ width:8px; height:8px; border-radius:999px; background:var(--cr-border); }
.cr-availability-icon.available{ background:var(--cr-accent); }
.cr-availability-count{ font-size:12px; line-height:1; color:var(--cr-muted); font-weight:600; }
.cr-calendar-day.available:hover{ background:linear-gradient(0deg, rgba(22,163,74,.05), rgba(22,163,74,.05)), var(--cr-surface); }
.cr-calendar-day.today.available .cr-availability-icon{ background:var(--cr-accent-strong); }

/* Responsive */
@media (max-width: 640px){ .cr-calendar-grid{ gap:4px; padding:4px 8px 10px 4px; } .cr-calendar-day{ padding:6px 2px; min-height:46px; border-radius:var(--cr-radius-sm); } .cr-day-number{ font-size:12px; } .cr-availability-count{ font-size:10px; } }

/* =========================
   Pax selector (Aantal personen) – minimal & centered
   ========================= */
.cr-pax-selection { display:none; background:transparent; padding:12px 0; border-radius:0; box-shadow:none; text-align:center; }
.cr-pax-selection.visible { display:block; }
.cr-pax-row { display:flex; align-items:center; justify-content:center; gap:10px; margin-left:auto; margin-right:auto; }
.cr-pax-label { font-weight:600; color:var(--cr-text); }

/* Input group: no pill, no border */
.cr-pax-input { display:inline-flex; align-items:center; gap:6px; background:transparent; padding:0; border:none; box-shadow:none; }
.cr-pax-input input[type="number"]{ width:48px; height:38px; text-align:center; border:none; outline:none; font-weight:700; font-size:15px; color:var(--cr-text); background:transparent; -moz-appearance:textfield; }
.cr-pax-input input[type="number"]::-webkit-outer-spin-button, .cr-pax-input input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Buttons: 5px radius; + uses submit color */
.cr-pax-input button{ width:38px; height:38px; border:none; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; font-size:18px; font-weight:800; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background .12s ease; }
.cr-pax-increase{ background:var(--cr-primary); color:#fff; box-shadow:none; }
.cr-pax-increase:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.12); }
.cr-pax-decrease{ background:#EEF2F7; color:#6B7280; }
.cr-pax-decrease:hover{ background:#E5EAF1; }
.cr-pax-input button:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* Max info: plain text */
.cr-pax-max-info{ margin-top:8px; padding:0; border:none; background:transparent; color:var(--cr-muted); font-weight:500; text-align:center; font-size:13px; }

/* =========================
   Allergens selector (Allergenen/opmerkingen) – minimal & centered
   ========================= */
.cr-allergens-selection { display:none; background:transparent; padding:12px 0; border-radius:0; box-shadow:none; text-align:center; }
.cr-allergens-selection.visible { display:block; }
.cr-allergens-row { display:flex; flex-direction:column; align-items:center; gap:8px; margin:0 auto; max-width:400px; }
.cr-allergens-label { font-weight:600; color:var(--cr-text); text-align:center; margin-bottom:4px; }
.cr-allergens-selection textarea{ width:100%; min-height:80px; padding:12px; border:2px solid var(--cr-border); border-radius:var(--cr-radius-sm); font-size:14px; font-family:inherit; resize:vertical; outline:none; transition:border-color .2s ease; }
.cr-allergens-selection textarea:focus{ border-color:var(--cr-primary); }
.cr-allergens-selection textarea::placeholder{ color:var(--cr-muted); }
.cr-allergens-info{ margin-top:4px; padding:0; border:none; background:transparent; color:var(--cr-muted); font-weight:400; text-align:center; font-size:12px; }

/* Mobile responsive for PAX */
@media (max-width: 768px){
  .cr-pax-selection{ 
    padding:8px 0; 
    text-align:center; 
  }
  .cr-pax-row{ 
    flex-direction:row; 
    align-items:center; 
    justify-content:center; 
    gap:8px; 
    margin:0 auto; 
  }
  .cr-pax-input{ 
    justify-content:center; 
    margin:0 auto; 
  }
  .cr-pax-input button{ 
    width:34px; 
    height:34px; 
  }
  .cr-pax-input input[type="number"]{ 
    width:44px; 
    height:34px; 
    font-size:14px; 
    text-align:center; 
  }
  .cr-pax-max-info{ 
    font-size:12px; 
    text-align:center; 
  }
	
	.cr-pax-label {
		text-align: center;
		width: 100%;
	}
	
	/* Mobile responsive for allergens */
	.cr-allergens-selection{ 
		padding:8px 0; 
		text-align:center; 
	}
	.cr-allergens-row{ 
		max-width:100%; 
		padding:0 10px; 
	}
	.cr-allergens-selection textarea{ 
		min-height:70px; 
		font-size:13px; 
		padding:10px; 
	}
	.cr-allergens-info{ 
		font-size:11px; 
		text-align:center; 
	}
}

/* Modal Actions */
.cr-modal-actions{ display:flex; gap:15px; justify-content:flex-end; padding:20px 25px; border-top:1px solid #e0e0e0; background:#f8f9fa; border-radius:0 0 5px 5px; }
.cr-btn-secondary, .cr-btn-primary{ padding:12px 24px; border:none; border-radius:5px; font-size:16px; font-weight:600; cursor:pointer; transition:all 0.2s ease; }
.cr-btn-secondary{ background:#6c757d; color:#fff; }
.cr-btn-secondary:hover{ background:#5a6268; }
.cr-btn-primary{ background:var(--cr-primary); color:#fff; }
.cr-btn-primary:hover:not(:disabled){ background:#8fa076; }
.cr-btn-primary:disabled{ background:#ccc; cursor:not-allowed; }

/* Accessibility */
.cr-calendar-day:focus{ outline:2px solid #A3B18A; outline-offset:2px; }
.cr-modal-close:focus{ outline:2px solid #A3B18A; outline-offset:2px; }

/* Smooth animations */
.cr-booking-modal * { transition: all 0.2s ease; }