/* Event Randomizer styles */
.cms-page { max-width: 980px; margin: 2rem auto; padding: 1rem; }
.randomizer-form .panel { border: 1px solid rgba(255,255,255,0.08); padding: 14px; margin-bottom: 12px; border-radius: 12px; background: linear-gradient(180deg, rgba(20,6,6,0.35), rgba(0,0,0,0.6)); }
.randomizer-form label { display: block; margin: 8px 0; color: #e6e6e6; }
.randomizer-form .panel h2 { color: var(--yellow-soft); margin-bottom: 8px; }
.randomizer-form { display: grid; grid-template-columns: 1fr; gap: 12px; }
.race-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.race-grid.compact { gap: 6px; }
.small-row { margin-top: 8px; }
.form-row { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.combined-panel { border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
.combined-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.combined-panel .subhead { font-size:1rem; color: var(--yellow-soft); margin-bottom:8px; }
.combined-panel .filters-block { margin-top:8px; border-top:1px dashed rgba(255,255,255,0.04); padding-top:10px; }
.combined-panel .col label, .combined-panel .filters-block label { display:block; margin:6px 0; }

select, input[type="number"], input[type="text"], .randomizer-form select[multiple] {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border-radius: 10px;
	background: rgba(20,20,20,0.85);
	border: 1px solid rgba(255,255,255,0.10);
	color: #fff;
	font-size: 0.98rem;
	outline: none;
	transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
}
select[multiple] { min-height: 84px; }

select:focus, input[type="number"]:focus, input[type="text"]:focus, .randomizer-form select[multiple]:focus {
	box-shadow: 0 6px 26px rgba(255,120,0,0.08);
	border-color: rgba(255,160,0,0.18);
	transform: translateY(-1px);
}

/* Some browsers allow coloring option backgrounds via optgroup/option pseudo selectors, but
	 many native dropdowns are OS-rendered and ignore these styles. We keep select control contrast strong. */
select option { background: rgba(10,10,10,0.95); color: #fff; }

label input[type="checkbox"]{ margin-right:8px; transform: scale(1.02); }

/* make each race-type appear as a bordered tile for better scanning */
.race-grid label { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid rgba(255,255,255,0.04); border-radius:8px; background: rgba(255,255,255,0.01); }
.race-grid label input[type="checkbox"]{ margin:0; transform:scale(1); }
.race-grid label:hover { border-color: rgba(255,255,255,0.08); }

.combined-panel { padding:16px; }

/* Checkbox grids for brands and cars */
.checkbox-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px; margin-top:8px; }
.brand-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; }
.car-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap:6px; }

.distance-row { margin-top:10px; }
.distance-row label { display:block; }
.checkbox-grid .checkbox-tile { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid rgba(255,255,255,0.04); border-radius:8px; background: rgba(255,255,255,0.02); }
.checkbox-grid .checkbox-tile input[type="checkbox"]{ margin:0; transform:scale(1); }
.checkbox-grid .checkbox-tile:hover { border-color: rgba(255,255,255,0.08); }

/* Make the Any tiles stand out slightly */
#brandGrid .checkbox-tile:first-child, #carGrid .checkbox-tile:first-child { background: linear-gradient(90deg, rgba(255,215,40,0.06), rgba(255,120,0,0.03)); }
.actions { display:flex; gap:8px; margin-top:10px; }
.btn { background: linear-gradient(135deg, var(--orange), var(--red)); color:#140000; padding:10px 14px; border:none; border-radius:999px; cursor:pointer; font-weight:800; }
.btn-secondary { background: rgba(0,0,0,0.5); color: var(--yellow-soft); border:1px solid rgba(255,255,255,0.06); }
.modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.5); z-index:80; opacity:0; pointer-events:none; transition:opacity 160ms ease; }
.modal.show { opacity:1; pointer-events:auto; }
.modal .calendar-modal-inner { background:linear-gradient(180deg,#2a0b0b,#120808); padding:1.5rem 1.6rem; border-radius:16px; width:92%; max-width:980px; color:#fff; box-shadow: 0 36px 90px rgba(0,0,0,0.75), 0 8px 36px rgba(255,120,40,0.06) inset; transform: translateY(0); }
.calendar-modal-title { font-size:2rem; color:var(--yellow-soft); margin-bottom:0.6rem; letter-spacing:0.02em; text-shadow: 0 4px 18px rgba(0,0,0,0.6); }
.calendar-modal-when { font-weight:800; margin-bottom:0.6rem; font-size:1.05rem; color:#fff; }
.calendar-modal-desc { font-size:1.02rem; line-height:1.55; color:#f0f0f0; }
.calendar-modal p { margin:6px 0; }
.calendar-modal-body { padding: 6px 0; }
.modal .close-modal { position:absolute; right:8px; top:8px; background:transparent; border:none; font-size:20px; cursor:pointer; color:#fff }

@keyframes modalPop {
	0% { transform: translateY(10px) scale(0.96); opacity:0; }
	60% { transform: translateY(-6px) scale(1.02); opacity:1; }
	100% { transform: translateY(0) scale(1); opacity:1; }
}
.modal.show .calendar-modal-inner { animation: modalPop 360ms cubic-bezier(.2,.9,.25,1); }

/* Responsive adjustments for mobile */
@media (max-width: 900px) {
	.combined-grid { grid-template-columns: 1fr; }
	.brand-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; }
	.car-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; }
	.race-grid.compact { grid-template-columns: 1fr; gap:8px; }
	.checkbox-tile, .race-grid label { padding:10px; font-size:0.95rem; }
	.combined-panel { padding:14px; }
}

@media (max-width: 480px) {
	.brand-grid, .car-grid { grid-template-columns: 1fr; }
	.checkbox-tile, .race-grid label { padding:12px 10px; }
	select, input[type="number"], input[type="text"] { padding: 0.8rem 0.9rem; }
	.btn { width:48%; }
	.actions { display:flex; gap:6px; justify-content:space-between; }
	.modal .calendar-modal-inner { max-width: 96%; padding: 0.8rem; }
}