/* Πάνελ κράτησης — βήματα, επιλογή ημέρας, σύνοψη. */

.fx-steps {
	display: flex;
	margin-bottom: var(--fx-space-5);
	background: var(--fx-surface);
	border: 1px solid var(--fx-border);
	border-radius: var(--fx-radius);
	box-shadow: var(--fx-shadow-sm);
	overflow: hidden;
}

.fx-step {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--fx-space-3);
	padding: var(--fx-space-4);
	min-width: 0;
	transition: background var(--fx-mid);
}

.fx-step + .fx-step { border-left: 1px solid var(--fx-border); }
.fx-step.is-active { background: linear-gradient(180deg, #fffaf5, var(--fx-orange-tint)); }
.fx-step.is-done { background: var(--fx-surface-alt); }

.fx-step__num {
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--fx-radius-xs);
	background: #eeebe7;
	box-shadow: var(--fx-inset);
	color: var(--fx-text-faint);
	font-family: var(--fx-font-display);
	font-weight: 800;
	font-size: var(--fx-size-sm);
	transition: background var(--fx-mid), color var(--fx-mid), box-shadow var(--fx-mid);
}

.fx-step.is-active .fx-step__num { background: var(--fx-grad-orange); color: #fff; box-shadow: var(--fx-key-orange); }
.fx-step.is-done .fx-step__num { background: var(--fx-grad-key); color: #fff; box-shadow: var(--fx-key-dark); }

.fx-step__text { min-width: 0; }

.fx-step__label {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: var(--fx-track-wide);
	font-weight: 700;
	color: var(--fx-text-faint);
}

.fx-step__value {
	display: block;
	font-size: var(--fx-size-sm);
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 1px;
}

.fx-panel--locked { opacity: 0.45; pointer-events: none; }

/* --- Επιλογή ημέρας --- */

.fx-picker__head { display: flex; align-items: center; gap: var(--fx-space-3); margin-bottom: var(--fx-space-4); }

.fx-picker__month {
	flex: 1;
	font-family: var(--fx-font-display);
	font-weight: 800;
	font-size: var(--fx-size-md);
	letter-spacing: var(--fx-track-tight);
	text-align: center;
}

.fx-picker__nav {
	width: 40px;
	height: 40px;
	border: 1px solid var(--fx-border);
	border-radius: var(--fx-radius-xs);
	background: var(--fx-surface);
	font-size: var(--fx-size-md);
	font-weight: 700;
	cursor: pointer;
	color: var(--fx-text);
	box-shadow: var(--fx-edge), var(--fx-shadow-sm);
	transition: transform var(--fx-fast), box-shadow var(--fx-mid);
}

.fx-picker__nav:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--fx-edge), var(--fx-shadow); }
.fx-picker__nav:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--fx-inset); }
.fx-picker__nav:disabled { opacity: 0.3; cursor: not-allowed; }

.fx-picker__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }

.fx-picker__dow {
	text-align: center;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fx-text-faint);
	padding: 4px 0 6px;
}

.fx-pday {
	position: relative;
	aspect-ratio: 1;
	min-height: 44px;
	border: 1px solid var(--fx-border);
	border-radius: var(--fx-radius-xs);
	background: var(--fx-surface);
	font-family: var(--fx-font-display);
	font-size: var(--fx-size-base);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--fx-text);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	box-shadow: var(--fx-edge), var(--fx-shadow-sm);
	transition: transform var(--fx-fast), box-shadow var(--fx-mid), background var(--fx-fast);
}

.fx-pday::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.fx-pday.is-available::after { background: var(--fx-free); }

/* Πρόγνωση καιρού στη γωνία της ημέρας. */
.fx-pday__w {
	position: absolute;
	top: 3px;
	right: 4px;
	font-size: 11px;
	line-height: 1;
	opacity: 0.9;
	pointer-events: none;
}

.fx-pday:disabled .fx-pday__w { opacity: 0.4; }

.fx-pday:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--fx-edge), var(--fx-shadow); z-index: 1; }

.fx-pday:disabled {
	background: #f2f0ed;
	color: var(--fx-text-faint);
	border-color: transparent;
	box-shadow: var(--fx-inset);
	cursor: not-allowed;
}

.fx-pday.is-blocked { background: repeating-linear-gradient(45deg, #f4f2ef, #f4f2ef 5px, #ebe8e4 5px, #ebe8e4 10px); }

.fx-pday.is-selected {
	background: var(--fx-grad-orange);
	border-color: transparent;
	color: #fff;
	box-shadow: var(--fx-key-orange);
	transform: translateY(-1px);
	z-index: 2;
}

.fx-pday.is-selected::after { background: rgba(255, 255, 255, 0.85); }
.fx-pday.is-today:not(.is-selected) { box-shadow: var(--fx-edge), var(--fx-shadow-sm), 0 0 0 2px var(--fx-orange); }

.fx-picker__legend { display: flex; gap: var(--fx-space-4); flex-wrap: wrap; margin-top: var(--fx-space-4); font-size: var(--fx-size-xs); color: var(--fx-text-faint); }
.fx-picker__legend span { display: flex; align-items: center; gap: 7px; }
.fx-picker__legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.fx-picker__legend i.free { background: var(--fx-surface); box-shadow: 0 0 0 1px var(--fx-border), inset 0 -4px 0 -2px var(--fx-free); }
.fx-picker__legend i.taken { background: #f2f0ed; }
.fx-picker__legend i.sel { background: var(--fx-grad-orange); }

/* --- Σύνοψη --- */

.fx-summary {
	position: relative;
	background: var(--fx-grad-dark);
	color: #fff;
	padding: var(--fx-space-5);
	border-radius: var(--fx-radius-lg);
	overflow: hidden;
	box-shadow: var(--fx-shadow-dark);
}

.fx-summary::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--fx-noise);
	opacity: 0.04;
	pointer-events: none;
}

.fx-summary::after {
	content: "";
	position: absolute;
	top: -90px;
	right: -50px;
	width: 260px;
	height: 260px;
	background: radial-gradient(circle, rgba(244, 124, 27, 0.36), transparent 66%);
	pointer-events: none;
}

.fx-summary > * { position: relative; z-index: 1; }

.fx-app .fx-summary h2 {
	color: #fff;
	font-size: var(--fx-size-md);
	margin-bottom: var(--fx-space-4);
}

.fx-summary__row {
	display: flex;
	justify-content: space-between;
	gap: var(--fx-space-4);
	padding: 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	font-size: var(--fx-size-sm);
}

.fx-summary__row span:first-child {
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: var(--fx-track-wide);
	font-weight: 700;
}

.fx-summary__row span:last-child { font-weight: 700; text-align: right; }
.fx-summary__row.is-empty span:last-child { color: rgba(255, 255, 255, 0.3); font-weight: 400; }

.fx-summary .fx-btn:disabled {
	opacity: 1;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.38);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
	filter: none;
}

/* --- Εναλλακτικές --- */

.fx-alts {
	border-radius: var(--fx-radius-sm);
	background: linear-gradient(180deg, #fdf7ea, #f9efd9);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.8), var(--fx-shadow-sm), 0 0 0 1px rgba(160,106,0,.2);
	padding: var(--fx-space-4);
	margin-top: var(--fx-space-4);
}

.fx-alts__title { font-family: var(--fx-font-display); font-weight: 800; font-size: var(--fx-size-base); margin-bottom: var(--fx-space-2); }
.fx-alt { display: flex; align-items: center; gap: var(--fx-space-3); padding: 10px 0; border-top: 1px solid rgba(0, 0, 0, 0.07); flex-wrap: wrap; }
.fx-alt__date { flex: 1; min-width: 140px; font-weight: 700; font-size: var(--fx-size-sm); }
.fx-alt__when { font-size: var(--fx-size-xs); color: var(--fx-text-muted); font-weight: 400; }

/* --- Καρτέλες προβολής --- */

.fx-cal-tabs {
	display: inline-flex;
	background: var(--fx-surface);
	border: 1px solid var(--fx-border);
	border-radius: var(--fx-radius-sm);
	box-shadow: var(--fx-edge), var(--fx-shadow-sm);
	padding: 4px;
	gap: 3px;
}

.fx-cal-tabs a {
	padding: 8px 18px;
	border-radius: var(--fx-radius-xs);
	font-size: var(--fx-size-sm);
	font-weight: 700;
	color: var(--fx-text-muted);
	transition: background var(--fx-fast), color var(--fx-fast), box-shadow var(--fx-mid);
}

.fx-cal-tabs a:hover { background: var(--fx-surface-alt); text-decoration: none; color: var(--fx-text); }
.fx-cal-tabs a.is-active { background: var(--fx-grad-orange); color: #fff; box-shadow: var(--fx-key-orange); }

@media (max-width: 760px) {
	.fx-steps { flex-direction: column; }
	.fx-step + .fx-step { border-left: 0; border-top: 1px solid var(--fx-border); }
	.fx-pday { min-height: 40px; font-size: var(--fx-size-sm); }
	.fx-cars { max-width: 100%; width: 100%; }
}