/* Movaros Leads — Modal + Form
   Brand: #FF3B09 orange · #121e29 navy · #DB9740 gold · #faf9f5 off-white
   Pattern: Material Design elevation + Inter typography
*/

/* ── Overlay ─────────────────────────────────────── */

.ml-overlay {
	position:         fixed;
	inset:            0;
	background:       rgba(10, 18, 32, 0.75);
	backdrop-filter:  blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index:          9999;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	padding:          1rem;
}

.ml-overlay[hidden] { display: none; }

/* ── Modal shell ─────────────────────────────────── */

.ml-modal {
	background:    #ffffff;
	border-radius: 16px;
	width:         100%;
	max-width:     540px;
	max-height:    92vh;
	overflow-y:    auto;
	padding:       2rem 2rem 1.75rem;
	position:      relative;
	box-shadow:
		0 4px 6px rgba(18, 30, 41, 0.06),
		0 12px 28px rgba(18, 30, 41, 0.16),
		0 32px 64px rgba(18, 30, 41, 0.1);
}

/* ── Close button ────────────────────────────────── */

.ml-close {
	position:        absolute;
	top:             1rem;
	right:           1rem;
	width:           2.25rem;
	height:          2.25rem;
	border:          none;
	background:      transparent;
	font-size:       1.5rem;
	line-height:     1;
	color:           #8a9aa8;
	cursor:          pointer;
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      background 0.15s, color 0.15s;
}
.ml-close:hover { background: #f0f3f6; color: #121e29; }

/* ── Form header (h2 + p live inside #ml-form) ───── */

#ml-form > h2 {
	font-size:     1.375rem;
	font-weight:   700;
	color:         #121e29;
	margin:        0 0 0.25rem;
	padding-right: 2.5rem;
	line-height:   1.25;
}

#ml-form > p {
	font-size:  0.875rem;
	color:      #5a6b79;
	margin:     0 0 1.5rem;
}

/* ── Form fields ─────────────────────────────────── */

.ml-row {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   0.875rem;
}

.ml-field {
	display:        flex;
	flex-direction: column;
	gap:            0.375rem;
	margin-bottom:  1rem;
}

.ml-field label {
	font-size:      0.8125rem;
	font-weight:    600;
	color:          #121e29;
	letter-spacing: 0.01em;
}

.ml-req { color: #FF3B09; }

.ml-field input,
.ml-field select {
	width:           100%;
	padding:         0.65rem 0.9rem;
	border:          1.5px solid #dde4ea;
	border-radius:   8px;
	font-size:       0.9375rem;
	font-family:     inherit;
	color:           #121e29;
	background:      #f9fafb;
	transition:      border-color 0.15s, box-shadow 0.15s, background 0.15s;
	appearance:      none;
	-webkit-appearance: none;
	box-sizing:      border-box;
}

.ml-field input:focus,
.ml-field select:focus {
	outline:      none;
	border-color: #FF3B09;
	background:   #fff;
	box-shadow:   0 0 0 3px rgba(255, 59, 9, 0.12);
}

.ml-field input.is-invalid,
.ml-field select.is-invalid {
	border-color: #d32f2f;
	box-shadow:   0 0 0 3px rgba(211, 47, 47, 0.1);
}

.ml-field select {
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a9aa8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 0.75rem center;
	padding-right:       2.5rem;
	cursor:              pointer;
}

.ml-err {
	font-size:  0.75rem;
	color:      #d32f2f;
	min-height: 1rem;
}

/* ── Form-level error ────────────────────────────── */

.ml-form-error {
	background:    #fff5f3;
	border:        1.5px solid rgba(255, 59, 9, 0.25);
	border-radius: 8px;
	padding:       0.625rem 0.9rem;
	font-size:     0.875rem;
	color:         #c62828;
	margin-bottom: 1rem;
}

/* ── Submit button ───────────────────────────────── */

.ml-submit {
	width:         100%;
	padding:       0.9rem 1.5rem;
	background:    #FF3B09;
	color:         #fff;
	border:        none;
	border-radius: 8px;
	font-size:     1rem;
	font-weight:   700;
	font-family:   inherit;
	cursor:        pointer;
	margin-top:    0.25rem;
	letter-spacing: 0.01em;
	box-shadow:    0 2px 8px rgba(255, 59, 9, 0.3);
	transition:    background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.ml-submit:hover:not(:disabled) {
	background:  #e53100;
	box-shadow:  0 4px 16px rgba(255, 59, 9, 0.4);
}
.ml-submit:active:not(:disabled) { transform: scale(0.99); }
.ml-submit:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

.ml-note {
	font-size:  0.775rem;
	color:      #9aa6b0;
	text-align: center;
	margin:     0.75rem 0 0;
}

/* ── Success state ───────────────────────────────── */

.ml-success {
	text-align: center;
	padding:    0.5rem 0 0.25rem;
}

.ml-success[hidden] { display: none; }

.ml-success__check {
	width:           4rem;
	height:          4rem;
	border-radius:   50%;
	background:      #FF3B09;
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin:          0 auto 1.25rem;
	box-shadow:      0 4px 16px rgba(255, 59, 9, 0.35);
}

.ml-success__confirm {
	font-size:  0.875rem;
	color:      #5a6b79;
	margin:     0 0 0.75rem;
}

.ml-success__title {
	font-size:   1.25rem;
	font-weight: 700;
	color:       #121e29;
	margin:      0 0 1rem;
}

/* ── Booking card (used in both success + return states) ── */

.ml-book-card {
	display:         block;
	text-decoration: none;
	background:      #fff;
	border-radius:   12px;
	overflow:        hidden;
	box-shadow:
		0 2px 4px rgba(18, 30, 41, 0.06),
		0 8px 24px rgba(18, 30, 41, 0.1);
	border:          1.5px solid #e8ecf0;
	transition:      box-shadow 0.2s, transform 0.15s;
}
.ml-book-card:hover {
	box-shadow:
		0 4px 8px rgba(18, 30, 41, 0.08),
		0 16px 40px rgba(18, 30, 41, 0.14);
	transform: translateY(-1px);
}

/* Dark header strip */
.ml-book-card__header {
	background:  linear-gradient(135deg, #121e29 0%, #1c2f42 100%);
	padding:     0.875rem 1.125rem;
	display:     flex;
	align-items: center;
	gap:         0.75rem;
}

.ml-book-card__cal-icon {
	width:           2.25rem;
	height:          2.25rem;
	border-radius:   50%;
	background:      rgba(255, 59, 9, 0.15);
	border:          1px solid rgba(255, 59, 9, 0.35);
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           #FF3B09;
	flex-shrink:     0;
}

.ml-book-card__chips {
	display:   flex;
	gap:       0.375rem;
	flex-wrap: wrap;
}

.ml-book-card__chip {
	background:     rgba(255, 255, 255, 0.1);
	border:         1px solid rgba(255, 255, 255, 0.15);
	color:          rgba(255, 255, 255, 0.85);
	font-size:      0.6875rem;
	font-weight:    600;
	padding:        2px 8px;
	border-radius:  100px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* Info section */
.ml-book-card__body {
	padding:    0.875rem 1.125rem 0.75rem;
	text-align: left;
}

.ml-book-card__name {
	font-size:   1rem;
	font-weight: 700;
	color:       #121e29;
	margin:      0 0 0.25rem;
}

.ml-book-card__sub {
	font-size: 0.8125rem;
	color:     #5a6b79;
	margin:    0;
}

/* CTA strip */
.ml-book-card__cta {
	display:         block;
	background:      #FF3B09;
	color:           #fff;
	text-align:      center;
	padding:         0.875rem 1.25rem;
	font-size:       0.9375rem;
	font-weight:     700;
	letter-spacing:  0.01em;
	text-decoration: none;
	transition:      background 0.15s;
}
.ml-book-card:hover .ml-book-card__cta { background: #e53100; }

/* ── Return visitor state ────────────────────────── */

.ml-return {
	text-align: center;
	padding:    0.5rem 0 0;
}

.ml-return[hidden] { display: none; }

.ml-return__icon {
	width:           4.5rem;
	height:          4.5rem;
	border-radius:   50%;
	background:      #FF3B09;
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin:          0 auto 1.375rem;
	box-shadow:      0 4px 20px rgba(255, 59, 9, 0.35);
}

.ml-return__title {
	font-size:   1.375rem;
	font-weight: 700;
	color:       #121e29;
	margin:      0 0 0.4rem;
}

.ml-return__sub {
	font-size: 0.9375rem;
	color:     #5a6b79;
	margin:    0 0 1.5rem;
	line-height: 1.55;
}

.ml-return__later {
	display:     block;
	width:       100%;
	margin-top:  1.125rem;
	background:  transparent;
	border:      none;
	font-size:   0.875rem;
	color:       #9aa6b0;
	cursor:      pointer;
	padding:     0.5rem;
	font-family: inherit;
	transition:  color 0.15s;
}
.ml-return__later:hover { color: #5a6b79; }

/* ── Mobile ──────────────────────────────────────── */

@media (max-width: 540px) {
	.ml-modal { padding: 1.5rem 1.25rem 1.25rem; }
	.ml-row   { grid-template-columns: 1fr; gap: 0; }
	.ml-book-card__chips { gap: 0.25rem; }
}

/* ── Reduced motion ──────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.ml-field input,
	.ml-field select,
	.ml-submit,
	.ml-close,
	.ml-book-card { transition: none; }
}