/* =====================================================================
   Vinho pöytävaraus – asiakasnäkymä
   Kaikki luokat alkavat .vv- jotta teeman tyylit eivät sekoitu.
   ===================================================================== */

.vv-app {
	--vv-bg:        #ffffff;
	--vv-surface:   #ffffff;
	--vv-surface-2: #f6f3ef;
	--vv-ink:       #1e1b18;
	--vv-ink-2:     #5b544c;
	--vv-ink-3:     #8b8378;
	--vv-line:      #e4ded6;
	--vv-line-2:    #cec5b9;

	--vv-brand:     #6e1f2e;
	--vv-brand-2:   #591825;
	--vv-brand-soft:#f4e8ea;

	--vv-ok:        #2e6b4f;
	--vv-ok-soft:   #e5f1ea;
	--vv-warn:      #9a6a0d;
	--vv-warn-soft: #fbf0da;
	--vv-danger:    #9c2f2f;
	--vv-danger-soft:#fae9e7;
	--vv-info:      #2a5b86;
	--vv-info-soft: #e7eff6;

	--vv-radius:    10px;
	--vv-radius-lg: 16px;

	max-width: 720px;
	margin: 0 auto;
	color: var(--vv-ink);
	font-size: 16px;
	line-height: 1.5;
	box-sizing: border-box;
}
.vv-app *, .vv-app *::before, .vv-app *::after { box-sizing: border-box; }

.vv-app h2 { font-size: 1.5rem; margin: 0 0 .4rem; line-height: 1.25; }
.vv-app h3 { font-size: 1.05rem; margin: 1.4rem 0 .5rem; }
.vv-app p  { margin: 0 0 .9rem; }

.vv-muted  { color: var(--vv-ink-2); }
.vv-small  { font-size: .9rem; }
.vv-tiny   { font-size: .78rem; }
.vv-center { text-align: center; }
.vv-hidden { display: none !important; }
.vv-spacer { flex: 1 1 auto; }
.vv-opt    { font-weight: 400; color: var(--vv-ink-3); }

/* --- Testibanneri ----------------------------------------------------- */
.vv-testbanner {
	max-width: 720px;
	margin: 0 auto 1rem;
	padding: .7rem 1rem;
	background: repeating-linear-gradient(45deg, #fff6e0, #fff6e0 12px, #fdf0d2 12px, #fdf0d2 24px);
	border: 1px solid #e8cf95;
	border-radius: 10px;
	font-size: .88rem;
	color: #6a4c07;
	line-height: 1.45;
}
.vv-testbanner strong {
	display: inline-block;
	background: #9a6a0d;
	color: #fff;
	padding: .1rem .5rem;
	border-radius: 999px;
	font-size: .72rem;
	letter-spacing: .08em;
	margin-right: .5rem;
	vertical-align: 1px;
}

/* --- Kielivalitsin ---------------------------------------------------- */
.vv-langbar { display: flex; justify-content: flex-end; margin-bottom: .6rem; }
.vv-lang-switch { display: flex; border: 1px solid var(--vv-line-2); border-radius: var(--vv-radius); overflow: hidden; }
.vv-lang-switch button {
	padding: .25rem .6rem; font: inherit; font-size: .78rem; font-weight: 600;
	background: #fff; border: 0; cursor: pointer; color: var(--vv-ink-2); margin: 0;
}
.vv-lang-switch button.vv-active { background: var(--vv-brand); color: #fff; }

/* --- Kortit ja askeleet ------------------------------------------------ */
.vv-card {
	background: var(--vv-surface);
	border: 1px solid var(--vv-line);
	border-radius: var(--vv-radius-lg);
	padding: 1.4rem;
}
.vv-steps { display: flex; gap: .4rem; margin-bottom: 1rem; }
.vv-step { flex: 1; height: 4px; border-radius: 2px; background: var(--vv-line); }
.vv-step.vv-done { background: var(--vv-brand); }
.vv-step.vv-active { background: var(--vv-brand); opacity: .5; }

/* --- Lomake ------------------------------------------------------------ */
.vv-field { margin-bottom: 1rem; }
.vv-app label {
	display: block; font-size: .82rem; font-weight: 600;
	color: var(--vv-ink-2); margin-bottom: .3rem;
}
.vv-app input[type=text], .vv-app input[type=email], .vv-app input[type=tel],
.vv-app input[type=date], .vv-app input[type=number], .vv-app textarea, .vv-app select {
	width: 100%;
	padding: .62rem .7rem;
	font: inherit; font-size: .95rem;
	color: var(--vv-ink);
	background: #fff;
	border: 1px solid var(--vv-line-2);
	border-radius: var(--vv-radius);
	margin: 0;
}
.vv-app textarea { resize: vertical; min-height: 4.2rem; }
.vv-app input:focus, .vv-app textarea:focus, .vv-app select:focus {
	outline: none; border-color: var(--vv-brand);
	box-shadow: 0 0 0 3px var(--vv-brand-soft);
}
.vv-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .vv-row2 { grid-template-columns: 1fr; gap: 0; } }

.vv-check {
	display: flex; gap: .55rem; align-items: flex-start;
	font-size: .9rem; font-weight: 400; color: var(--vv-ink); margin: .5rem 0;
}
.vv-check input { width: auto; margin-top: .2rem; flex: none; }

/* hunajapurkki */
.vv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Napit ------------------------------------------------------------- */
.vv-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
	padding: .62rem 1.1rem;
	font: inherit; font-size: .93rem; font-weight: 600;
	color: var(--vv-ink); background: #fff;
	border: 1px solid var(--vv-line-2); border-radius: var(--vv-radius);
	cursor: pointer; text-decoration: none;
}
.vv-btn:hover:not(:disabled) { background: var(--vv-surface-2); color: var(--vv-ink); }
.vv-btn:disabled { opacity: .45; cursor: not-allowed; }
.vv-btn-primary { background: var(--vv-brand); border-color: var(--vv-brand); color: #fff; }
.vv-btn-primary:hover:not(:disabled) { background: var(--vv-brand-2); color: #fff; }
.vv-btn-danger { color: var(--vv-danger); border-color: #e6c6c2; background: var(--vv-danger-soft); }
.vv-btn-ghost { border-color: transparent; background: transparent; }
.vv-btn-sm { padding: .34rem .7rem; font-size: .82rem; }
.vv-btn-block { width: 100%; }

/* --- Seurueen koko ----------------------------------------------------- */
.vv-party { display: flex; flex-wrap: wrap; gap: .4rem; }
.vv-party button {
	min-width: 46px; padding: .5rem .55rem; margin: 0;
	font: inherit; font-weight: 600; font-size: .95rem;
	border: 1px solid var(--vv-line-2); background: #fff;
	border-radius: var(--vv-radius); cursor: pointer;
}
.vv-party button:hover { border-color: var(--vv-brand); color: var(--vv-brand); }
.vv-party button.vv-selected { background: var(--vv-brand); border-color: var(--vv-brand); color: #fff; }

/* --- Aikaslotit -------------------------------------------------------- */
.vv-slot-group + .vv-slot-group { margin-top: 1.2rem; }
.vv-slot-group h4 {
	margin: 0 0 .5rem; font-size: .95rem; font-weight: 600;
	display: flex; align-items: baseline; gap: .5rem;
}
.vv-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: .45rem; }
.vv-slot {
	padding: .55rem .3rem; margin: 0;
	font: inherit; font-size: .92rem; font-weight: 600;
	border: 1px solid var(--vv-line-2); background: #fff;
	border-radius: var(--vv-radius); cursor: pointer;
}
.vv-slot:hover:not(:disabled) { border-color: var(--vv-brand); color: var(--vv-brand); background: var(--vv-brand-soft); }
.vv-slot.vv-selected { background: var(--vv-brand); border-color: var(--vv-brand); color: #fff; }
.vv-slot:disabled {
	color: var(--vv-ink-3); background: var(--vv-surface-2);
	border-color: var(--vv-line); cursor: not-allowed;
	text-decoration: line-through; opacity: .65;
}

/* --- Yhteenveto -------------------------------------------------------- */
.vv-summary {
	display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; align-items: center;
	padding: .8rem 1rem; margin: 1rem 0;
	background: var(--vv-surface-2); border-radius: var(--vv-radius);
	font-size: .9rem;
}
.vv-summary .vv-item { display: flex; gap: .4rem; align-items: baseline; }
.vv-summary .vv-lbl {
	color: var(--vv-ink-3); font-size: .72rem;
	text-transform: uppercase; letter-spacing: .05em;
}

/* --- Ilmoitukset ------------------------------------------------------- */
.vv-alert {
	padding: .8rem 1rem; margin: 0 0 1rem;
	border-radius: var(--vv-radius); border: 1px solid var(--vv-line);
	background: var(--vv-surface-2); font-size: .9rem;
}
.vv-alert p:last-child { margin-bottom: 0; }
.vv-alert-error { background: var(--vv-danger-soft); border-color: #eec9c4; color: #7c2a2a; }
.vv-alert-ok    { background: var(--vv-ok-soft);     border-color: #cfe4d8; color: #22513c; }
.vv-alert-warn  { background: var(--vv-warn-soft);   border-color: #eddcb4; color: #78530a; }
.vv-alert-info  { background: var(--vv-info-soft);   border-color: #c9dced; color: #1f4767; }

.vv-badge {
	display: inline-block; padding: .12rem .5rem;
	font-size: .74rem; font-weight: 600; border-radius: 999px;
	background: var(--vv-surface-2); color: var(--vv-ink-2);
	border: 1px solid var(--vv-line);
}
.vv-badge-ok     { background: var(--vv-ok-soft);     color: var(--vv-ok);     border-color: #cfe4d8; }
.vv-badge-warn   { background: var(--vv-warn-soft);   color: var(--vv-warn);   border-color: #eddcb4; }
.vv-badge-danger { background: var(--vv-danger-soft); color: var(--vv-danger); border-color: #eec9c4; }
.vv-badge-info   { background: var(--vv-info-soft);   color: var(--vv-info);   border-color: #c9dced; }

.vv-done-check {
	font-size: 2.4rem; line-height: 1; text-align: center;
	color: var(--vv-ok); margin-bottom: .4rem;
}

.vv-spinner {
	width: 18px; height: 18px; border-radius: 50%;
	border: 2px solid var(--vv-line-2); border-top-color: var(--vv-brand);
	animation: vv-spin .7s linear infinite; display: inline-block;
	vertical-align: -3px; margin-right: .4rem;
}
@keyframes vv-spin { to { transform: rotate(360deg); } }

/* --- Modaali ----------------------------------------------------------- */
.vv-modal-backdrop {
	position: fixed; inset: 0; background: rgba(30,27,22,.5);
	display: flex; align-items: flex-start; justify-content: center;
	padding: 2rem 1rem; overflow-y: auto; z-index: 100000;
}
.vv-modal {
	background: #fff; border-radius: var(--vv-radius-lg);
	width: 100%; max-width: 480px; margin: auto 0;
	box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.vv-modal-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--vv-line); font-weight: 600; }
.vv-modal-body { padding: 1.25rem; }
.vv-modal-foot {
	display: flex; gap: .6rem; justify-content: flex-end;
	padding: 1rem 1.25rem; border-top: 1px solid var(--vv-line);
	background: var(--vv-surface-2);
	border-radius: 0 0 var(--vv-radius-lg) var(--vv-radius-lg);
}

/* --- Tapahtumat -------------------------------------------------------- */
.vv-event {
	border: 1px solid var(--vv-line); border-radius: var(--vv-radius);
	padding: .8rem 1rem; margin-bottom: .6rem; background: var(--vv-surface-2);
}
.vv-event-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.vv-event-head b { font-size: 1.02rem; }
.vv-event p { margin: .35rem 0 0; }
.vv-event-foot {
	display: flex; align-items: center; gap: .8rem; margin-top: .5rem;
}
.vv-event-foot .vv-btn { margin-left: auto; }

/* =====================================================================
   Vinhon brändi-ilme: keltainen (#efc800) + musta, Lato-kirjasin.
   (Ohittaa yllä olevat oletusvärit – pidetään viimeisenä tiedostossa.)
   ===================================================================== */
.vv-app, .vv-testbanner {
	font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
}
.vv-app {
	--vv-brand:      #111111;
	--vv-brand-2:    #000000;
	--vv-brand-soft: #fdf6d8;
	--vv-yellow:     #efc800;
	--vv-ink:        #111111;
}
.vv-app h3 { font-style: italic; font-weight: 700; letter-spacing: .01em; }

/* Otsikko: musta versaali ja keltainen tussiveto alla */
.vv-app h2 {
	position: relative; display: inline-block; z-index: 0;
	padding: 0 .08em .3em;
	font-style: normal; font-weight: 900;
	text-transform: uppercase; letter-spacing: .09em;
	font-size: 1.4rem;
}
.vv-app h2::after {
	content: ""; position: absolute; z-index: -1;
	left: -2%; right: -4%; bottom: -.1em; height: .55em;
	background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2014%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23efc800%22%20d%3D%22M2%209%20C30%204%2070%207%20100%205%20C135%203%20170%206%20198%204%20L197%2010%20C165%2012%20130%209%2098%2011%20C65%2013%2030%2012%203%2013%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center / 100% 100%;
}

/* Ensisijaiset napit: keltainen pohja, musta teksti – hoverissa musta/keltainen */
.vv-app .vv-btn-primary {
	background: var(--vv-yellow); border-color: var(--vv-yellow); color: #111;
	font-weight: 700;
}
.vv-app .vv-btn-primary:hover:not(:disabled) {
	background: #111; border-color: #111; color: var(--vv-yellow);
}
.vv-app .vv-btn-primary:disabled { background: #f3e08a; border-color: #f3e08a; color: #6b6b6b; }

/* Valinnat (seurue, aikaruudut): keltainen + musta */
.vv-party button.vv-selected,
.vv-slot.vv-selected {
	background: var(--vv-yellow); border-color: #111; color: #111; font-weight: 700;
}
.vv-party button:hover:not(:disabled):not(.vv-selected),
.vv-slot:hover:not(:disabled):not(.vv-selected) { border-color: #111; }

/* Kielivalitsin */
.vv-lang-switch button.vv-active { background: #111; color: var(--vv-yellow); }

/* Vaiheindikaattori */
.vv-step.vv-done { background: #111; }
.vv-step.vv-active { background: var(--vv-yellow); opacity: 1; }

/* Tapahtumakortit ja korostukset */
.vv-event { border-left: 4px solid var(--vv-yellow); }
.vv-app a { color: #111; text-decoration-color: var(--vv-yellow); text-decoration-thickness: 2px; }
.vv-app input:focus, .vv-app select:focus, .vv-app textarea:focus {
	outline: 2px solid var(--vv-yellow); outline-offset: 1px; border-color: #111;
}

/* =====================================================================
   PALAUTESIVU (?palaute=1) – oma riisuttu sivu ilman teemaa
   Tavoite: arvostelu näkyy heti myös puhelimessa, ilman vierittämistä.
   ===================================================================== */
body.vv-fbpage {
	margin: 0;
	background: #f6f3ef;
	font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
	color: #1e1b18;
	-webkit-text-size-adjust: 100%;
}
.vv-fbwrap {
	min-height: 100vh;
	display: flex; flex-direction: column; justify-content: center;
	max-width: 560px; padding: 1rem 1rem 1.2rem;
}
@supports (min-height: 100dvh) { .vv-fbwrap { min-height: 100dvh; } }
.vv-fbwrap .vv-langbar { margin-bottom: .5rem; }
.vv-fbtest { margin-bottom: .6rem; padding: .35rem .7rem; font-size: .8rem; text-align: center; }
.vv-fbtest span { display: none; }
.vv-fbwrap #vv-footerInfo { margin: .9rem 0 0; }

.vv-fbcard {
	text-align: center;
	padding: 1.5rem 1.2rem 1.6rem;
	border-radius: var(--vv-radius-lg);
}
.vv-fbtitle {
	font-size: 1.45rem; font-weight: 700; font-style: italic;
	line-height: 1.25; margin: 0 0 .25rem;
}
.vv-fbvisit { color: var(--vv-ink-3); font-size: .88rem; margin: 0 0 1.2rem; }
.vv-fbq { font-size: 1.02rem; color: var(--vv-ink-2); margin: 0 0 .5rem; }

/* Tähdet: isot kosketuskohteet, ei omaa nappityyliä. */
.vv-fbstars { display: flex; justify-content: center; gap: .15rem; }
.vv-fbstar {
	font: inherit; font-size: 2.6rem; line-height: 1;
	padding: .25rem .3rem; min-width: 52px; min-height: 52px;
	background: none; border: 0; border-radius: 12px;
	color: #d9cec1; cursor: pointer; touch-action: manipulation;
	transition: transform .08s ease, color .12s ease;
	-webkit-tap-highlight-color: transparent;
}
.vv-fbstar:hover { color: #c2a56a; }
.vv-fbstar:active { transform: scale(.92); }
.vv-fbstar.vv-on { color: #efc800; text-shadow: 0 1px 0 rgba(0,0,0,.06); }
.vv-fbstar:focus-visible { outline: 2px solid var(--vv-brand); outline-offset: 2px; }

.vv-fblabel {
	min-height: 1.4em; margin: .35rem 0 0;
	font-weight: 700; color: var(--vv-brand); font-size: .98rem;
}

.vv-fbrest { margin-top: 1rem; text-align: left; }
.vv-fblowtitle { font-weight: 700; color: var(--vv-ink); font-size: 1rem; margin: 0 0 .5rem; }
.vv-fbnudge { color: var(--vv-brand); font-size: .9rem; font-weight: 600; margin: .35rem 0 0; }
.vv-fbmore { margin: 0 0 1.1rem; }
.vv-fbmore .vv-btn { width: 100%; }
.vv-fbrest .vv-field { margin-bottom: .8rem; }
.vv-fbrest textarea { min-height: 84px; }
.vv-btn.vv-fbsend { width: 100%; padding: .85rem 1rem; font-size: 1rem; }

/* Kiitosnäkymä */
.vv-fbdone { padding: 2rem 1.3rem; }
.vv-fbcheck {
	width: 56px; height: 56px; margin: 0 auto .9rem;
	display: flex; align-items: center; justify-content: center;
	border-radius: 999px; background: var(--vv-ok-soft); color: var(--vv-ok);
	font-size: 1.9rem; line-height: 1;
}
.vv-fbthanks { font-size: 1.05rem; margin: 0 0 1rem; }
.vv-fbinvite { color: var(--vv-ink-2); font-size: .95rem; margin: 0 0 .8rem; }
.vv-fbdone .vv-btn { display: inline-block; }

@media (max-width: 430px) {
	.vv-fbwrap { padding: .7rem .7rem 1rem; }
	.vv-fbcard { padding: 1.2rem .9rem 1.3rem; }
	.vv-fbtitle { font-size: 1.28rem; }
	.vv-fbvisit { margin-bottom: .9rem; }
	.vv-fbstar { font-size: 2.35rem; min-width: 48px; padding: .2rem .18rem; }
}
/* Matala ruutu (esim. puhelin vaakatasossa): tiiviimmin. */
@media (max-height: 620px) {
	.vv-fbwrap { justify-content: flex-start; }
	.vv-fbcard { padding: 1rem .9rem 1.1rem; }
	.vv-fbtitle { font-size: 1.15rem; }
	.vv-fbvisit { margin-bottom: .6rem; }
	.vv-fbstar { font-size: 2.1rem; min-width: 44px; min-height: 44px; }
}

/* Tapahtuman varaama aika varauslomakkeella */
.vv-slot.vv-slot-event:disabled { background: repeating-linear-gradient(135deg, var(--vv-surface-2, #f3f0eb) 0 6px, #fff 6px 12px); text-decoration: none; }
.vv-eventnote { margin-top: 1rem; }
.vv-eventnote-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: .45rem; }
/* Päivämääräkenttä: koko kenttä on klikattava, kursori kertoo sen */
#vv-booking-app input[type="date"], #vv-manage-app input[type="date"] { cursor: pointer; }