/* Front de Reservas de Catas — Vinya Alforí */

.va-reservas {
	--va-gold: #b09a5f;
	--va-gold-d: #9c8852;
	--va-text: #3a3531;
	--va-muted: #6f6862;
	--va-soft: #8c857a;
	--va-bg: #f6f4ee;
	--va-line: #ece7db;
	font-family: 'Jost', sans-serif;
	color: var(--va-text);
	background: var(--va-bg);
	box-sizing: border-box;
}
.va-reservas *, .va-reservas *::before, .va-reservas *::after { box-sizing: border-box; }

/* Announcement */
.va-announce {
	background: #4a443f; color: #f3efe6; text-align: center;
	font-size: 13px; letter-spacing: .04em; font-weight: 300;
	padding: 11px 16px;
}

/* Hero */
.va-hero { text-align: center; padding: 54px 24px 36px; max-width: 720px; margin: 0 auto; }
.va-hero-kicker { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #a0926a; font-weight: 500; margin-bottom: 14px; }
.va-hero-title { font-family: 'Jost', sans-serif; font-size: 50px; line-height: 1.04; font-weight: 500; letter-spacing: -.025em; color: var(--va-text); margin: 0 0 20px; }
.va-hero-text { font-size: 15.5px; line-height: 1.7; font-weight: 300; color: var(--va-muted); margin: 0; }

/* Booking */
.va-booking { max-width: 1100px; margin: 0 auto; padding: 0 24px 64px; }
/* Sin hero: se deja aire arriba para que respire el fondo beige. */
.va-no-header .va-booking { padding-top: 48px; }
.va-booking-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; border-bottom: 1px solid #e0dacd; padding-bottom: 18px; margin-bottom: 24px; }
.va-count { font-size: 28px; font-weight: 500; }
.va-count strong { font-weight: 600; }
.va-months { display: flex; gap: 9px; flex-wrap: wrap; }
.va-month { font-family: 'Jost', sans-serif; font-size: 13px; letter-spacing: .05em; border-radius: 30px; padding: 9px 20px; cursor: pointer; background: transparent; color: var(--va-muted); border: 1px solid #d4cdbf; font-weight: 300; transition: all .15s; }
.va-month:hover { border-color: var(--va-gold); }
.va-month.is-active { background: var(--va-text); color: var(--va-bg); border-color: var(--va-text); }

/* Card list */
.va-list { display: flex; flex-direction: column; gap: 16px; }
.va-card { display: flex; align-items: center; gap: 24px; background: #fff; border: 1px solid var(--va-line); border-radius: 4px; padding: 20px 24px; box-shadow: 0 1px 2px rgba(60,53,45,.04); }
.va-card.va-status-full { opacity: .62; }

.va-card-date { flex: none; width: 110px; text-align: center; border-right: 1px solid var(--va-line); padding-right: 10px; }
.va-card-day { font-size: 44px; line-height: .9; font-weight: 500; }
.va-card-mon { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--va-muted); margin-top: 6px; }
.va-card-time { font-size: 13px; color: #a0926a; margin-top: 9px; }

.va-card-thumb { flex: none; width: 110px; height: 80px; border-radius: 3px; background: linear-gradient(135deg,#8a7d63,#5f5647); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.va-card-thumb span { font-size: 28px; color: rgba(255,255,255,.4); letter-spacing: .06em; }
.va-card-thumb img, .va-card-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.va-card-info { flex: 1; min-width: 0; }
.va-card-title { font-size: 23px; font-weight: 500; line-height: 1.1; margin-bottom: 8px; }
.va-card-statusline { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.va-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.va-status-text { font-size: 13px; font-weight: 500; letter-spacing: .03em; }
.va-card-meta { font-size: 13px; color: var(--va-soft); font-weight: 300; }

.va-card-cta { flex: none; width: 190px; text-align: right; }
.va-card-price { font-size: 25px; font-weight: 500; margin-bottom: 12px; }
.va-reserve-btn { font-family: 'Jost', sans-serif; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; border: none; border-radius: 3px; padding: 13px 30px; cursor: pointer; width: 100%; background: var(--va-gold); color: #fff; transition: background .2s; }
.va-reserve-btn:hover { background: var(--va-gold-d); }
.va-reserve-btn:disabled { background: #cfc9bd; cursor: not-allowed; }
.va-card-seats { font-size: 11.5px; letter-spacing: .04em; margin-top: 9px; color: #a39c90; min-height: 14px; }
.va-status-low .va-card-seats { color: #b0822f; }

.va-empty { text-align: center; color: var(--va-muted); font-weight: 300; padding: 40px 0; }

/* Modal — incluye sus propias variables porque se mueve al <body>, fuera de .va-reservas */
.va-modal-overlay {
	--va-gold: #b09a5f; --va-gold-d: #9c8852; --va-text: #3a3531;
	--va-muted: #6f6862; --va-soft: #8c857a; --va-bg: #f6f4ee; --va-line: #ece7db;
	position: fixed; inset: 0; background: rgba(40,34,28,.55); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 99999;
}
.va-modal-overlay * { box-sizing: border-box; }
.va-modal-overlay[hidden] { display: none; }
.va-modal { position: relative; width: 840px; max-width: 100%; max-height: 92vh; background: #fff; border-radius: 5px; overflow: hidden; box-shadow: 0 30px 80px rgba(40,34,28,.4); display: flex; font-family: 'Jost', sans-serif; }
.va-modal-close { position: absolute; top: 16px; right: 18px; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,.85); color: #6f6862; font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; }
.va-modal-photo { flex: none; width: 300px; background: linear-gradient(135deg,#8a7d63,#5f5647); display: flex; align-items: center; justify-content: center; }
.va-modal-photo span { font-size: 56px; color: rgba(255,255,255,.35); letter-spacing: .08em; }
.va-modal-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.va-modal-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 32px 34px 8px; }
.va-modal-kicker { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: #a0926a; font-weight: 500; margin-bottom: 10px; }
.va-modal-title { font-size: 26px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 12px; }
.va-modal-dateline { font-size: 14px; color: var(--va-muted); font-weight: 300; margin-bottom: 8px; }
.va-modal-statusline { display: flex; align-items: center; gap: 8px; }
.va-modal-desc { font-size: 14px; line-height: 1.6; font-weight: 300; color: var(--va-muted); white-space: pre-line; margin: 16px 0 0; }

.va-sep { border: none; border-top: 1px solid var(--va-line); margin: 22px 0; }
.va-attendees-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.va-field-label { font-size: 14px; color: var(--va-text); font-weight: 500; }
.va-note { font-size: 12px; color: #a39c90; font-weight: 300; margin-top: 3px; }
.va-stepper { display: flex; align-items: center; gap: 16px; }
.va-step { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #d4cdbf; background: #fff; color: var(--va-text); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.va-step:hover { border-color: var(--va-gold); }
.va-guests { font-size: 22px; font-weight: 500; min-width: 26px; text-align: center; }

.va-contact-title { margin-bottom: 14px; }
.va-form { display: flex; flex-direction: column; gap: 14px; }
.va-form-row { display: flex; gap: 12px; }
.va-form-row .va-label { flex: 1; }
.va-label { display: flex; flex-direction: column; gap: 6px; }
.va-label > span { font-size: 11.5px; letter-spacing: .04em; color: var(--va-soft); font-weight: 400; }
.va-label input { width: 100%; font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 400; color: #3a3531 !important; background: #fff !important; border: 1.5px solid #c4baa6 !important; border-radius: 6px !important; padding: 12px 13px !important; outline: none; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.va-label input:hover { border-color: #b3a98f !important; }
.va-label input:focus { border-color: #b09a5f !important; box-shadow: 0 0 0 3px rgba(176,154,95,.18) !important; }
/* Selección de texto visible (el tema la deja invisible en los inputs) */
.va-modal-overlay ::selection, .va-reservas ::selection { background: #b09a5f !important; color: #fff !important; }
.va-modal-overlay ::-moz-selection, .va-reservas ::-moz-selection { background: #b09a5f !important; color: #fff !important; }
.va-rights { display: flex; align-items: flex-start; gap: 11px; background: var(--va-bg); border-radius: 6px; padding: 13px 15px; cursor: pointer; font-size: 12.5px; line-height: 1.55; color: var(--va-muted); font-weight: 300; }
.va-rights input { margin-top: 3px; accent-color: var(--va-gold); }
.va-rights strong { color: var(--va-text); font-weight: 500; }

.va-modal-error { background: #f6e7e1; color: #9c3d22; font-size: 13px; border-radius: 6px; padding: 11px 14px; margin: 14px 0 4px; }

.va-modal-foot { flex: none; border-top: 1px solid #e0dacd; padding: 16px 34px 20px; background: #fff; }
.va-total-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.va-total-label { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--va-soft); }
.va-total { font-size: 28px; font-weight: 600; }
.va-foot-btns { display: flex; gap: 12px; }
.va-btn-ghost { font-family: 'Jost', sans-serif; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; border: 1px solid #ddd6c8; background: transparent; color: #a39c90; border-radius: 4px; padding: 14px 24px; cursor: pointer; transition: color .15s, border-color .15s; }
.va-btn-ghost:hover { color: #6f6862; border-color: #cfc7b7; }
.va-btn-gold { flex: 1; width: 100%; font-family: 'Jost', sans-serif; font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; border: none !important; background: #9c7d3f !important; color: #fff !important; border-radius: 4px; padding: 16px 26px; cursor: pointer; transition: background .2s, box-shadow .2s, transform .05s; box-shadow: 0 8px 20px rgba(124,98,52,.5); }
.va-btn-gold:hover { background: #8a6d34 !important; box-shadow: 0 10px 26px rgba(124,98,52,.6); }
.va-btn-gold:active { transform: translateY(1px); }
.va-btn-gold:disabled { background: #cfc9bd; box-shadow: none; cursor: default; }

/* Móvil */
@media (max-width: 820px) {
	.va-hero-title { font-size: 34px; }
	.va-card { flex-wrap: wrap; gap: 14px 16px; padding: 16px; position: relative; }
	.va-card-date { width: 64px; border-right: none; padding-right: 0; text-align: left; }
	.va-card-day { font-size: 34px; }
	.va-card-time { margin-top: 4px; }
	.va-card-thumb { width: 64px; height: 64px; }
	.va-card-info { flex: 1 1 60%; }
	.va-card-title { font-size: 19px; }
	.va-card-cta { width: 100%; text-align: left; border-top: 1px solid var(--va-line); padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
	.va-card-price { margin-bottom: 0; font-size: 21px; }
	.va-reserve-btn { width: auto; }
	.va-card-seats { width: 100%; margin-top: 0; }

	.va-modal-overlay { padding: 0; align-items: stretch; }
	.va-modal { flex-direction: column; width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
	.va-modal-photo { width: 100%; height: 96px; flex: none; }
	.va-modal-photo span { font-size: 34px; }
	.va-modal-main { flex: 1; min-height: 0; }
	.va-modal-body { flex: 1; min-height: 0; padding: 20px 20px 8px; }
	.va-modal-foot { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); }
	.va-form-row { flex-direction: column; }
}