/* Varaussivu ja ylläpito. Värit ja fontit tulevat style.css:n :root-muuttujista. */

.vr{background:var(--cream)}
.vr [hidden]{display:none!important}
.vr .top{background:var(--teal)}
.vr-back{color:#fff;text-decoration:none;font:600 .9rem/1 var(--sans);opacity:.85}
.vr-back:hover{opacity:1}
.vr-main{padding-top:clamp(7rem,14vh,9rem);padding-bottom:6rem;max-width:56rem}
.vr-title{font-size:clamp(3rem,8vw,6rem);line-height:.95;letter-spacing:-.04em}

.vr-form{margin-top:clamp(2.5rem,6vh,4rem);display:grid;gap:1.2rem}
.vr-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.vr-step{
  border:0;margin:0;padding:clamp(1.3rem,3vw,2.2rem);
  background:var(--cream-2);border-radius:calc(var(--r) * 1.2);
  box-shadow:0 20px 50px -35px rgba(1,57,70,.35);
  min-width:0;transition:opacity .3s;
}
.vr-step[disabled]{opacity:.45}
.vr-step legend{
  float:left;width:100%;display:flex;align-items:center;gap:.8rem;margin-bottom:1.3rem;
  font:500 clamp(1.4rem,1.1rem + 1vw,1.9rem)/1.1 var(--serif);letter-spacing:-.02em;color:var(--ink);
}
.vr-step legend + *{clear:both}
.vr-num{
  flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;
  background:var(--teal);color:#fff;font:600 .9rem/1 var(--sans);letter-spacing:0;
}
.vr-loading{color:var(--slate)}

/* Viikot ja laskuri */
.vr-weeks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.vr-week__days{font-size:.82rem;color:var(--taupe);margin-top:-.3rem}
.vr-week{
  position:relative;display:grid;gap:.45rem;padding:1.1rem 1.2rem 1.2rem;cursor:pointer;
  border:1.5px solid rgba(150,132,72,.45);border-radius:var(--r);background:#fff;
  transition:border-color .2s,box-shadow .2s,transform .2s var(--ease);
}
.vr-week:hover{transform:translateY(-2px)}
.vr-week input{position:absolute;opacity:0;pointer-events:none}
.vr-week:has(input:checked){border-color:var(--teal);box-shadow:0 0 0 2px var(--teal)}
.vr-week:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:3px}
.vr-week__dates{font:500 1.6rem/1.1 var(--serif);letter-spacing:-.02em}
.vr-week__count{color:var(--slate);font-size:.92rem}
.vr-week__count b{font:600 1.7rem/1 var(--sans);color:var(--teal);margin-right:.15rem;font-variant-numeric:tabular-nums}
.vr-week__bar{height:5px;border-radius:9px;background:var(--mist-2);overflow:hidden}
.vr-week__bar i{display:block;height:100%;background:var(--teal);border-radius:inherit}
.vr-week.is-extra .vr-week__count b{color:var(--gold-ink)}
.vr-week.is-extra .vr-week__bar i{background:var(--gold)}
.vr-week.is-full .vr-week__count{color:var(--gold-ink);font-weight:600}
.vr-week.is-full .vr-week__count b{display:none}
.vr-week.is-closed{cursor:not-allowed;opacity:.55}
.vr-week.is-closed:hover{transform:none}
.vr-week.is-closed .vr-week__count b{display:none}

.vr-jono{margin-top:1rem;padding:1rem 1.2rem;border-radius:var(--r);background:var(--blush);color:var(--ink);font-size:.98rem}

/* Valinnat */
.vr-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.7rem}
.vr-choices--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vr-choice{
  position:relative;display:flex;gap:.8rem;align-items:flex-start;padding:1rem 1.1rem;cursor:pointer;
  border:1.5px solid rgba(150,132,72,.4);border-radius:var(--r);background:#fff;transition:border-color .2s,box-shadow .2s;
}
.vr-choice input{margin:.3rem 0 0;accent-color:var(--teal);flex:none;width:1.05rem;height:1.05rem}
.vr-choice span{display:grid;gap:.15rem}
.vr-choice strong{font-weight:600}
.vr-choice small{color:var(--slate);font-size:.88rem;line-height:1.4}
.vr-choice .vr-price{color:var(--gold-ink);font-weight:600}
.vr-choice:has(input:checked){border-color:var(--teal);box-shadow:0 0 0 1.5px var(--teal)}
.vr-choice.is-full{opacity:.5;cursor:not-allowed}

.vr-sub{margin-top:1.5rem}
.vr-q{font-weight:600;margin-bottom:.7rem}
.vr-help{color:var(--slate);font-size:.9rem;margin:.8rem 0 0}

.vr-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.3rem 1rem;margin-top:.8rem}
.vr-check{display:flex;gap:.6rem;align-items:flex-start;margin-top:.9rem;cursor:pointer;line-height:1.45}
.vr-checks .vr-check{margin-top:.4rem}
.vr-check input{margin:.2rem 0 0;accent-color:var(--teal);width:1.05rem;height:1.05rem;flex:none}

/* Kentät */
.vr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}
.vr-field{display:grid;gap:.35rem;margin-top:1rem}
.vr-field label{font-weight:600;font-size:.95rem}
.vr-field abbr{text-decoration:none;color:var(--gold-ink)}
.vr-field input,.vr-field textarea,.vr-field select{
  width:100%;font:inherit;color:var(--ink);background:#fff;
  border:1.5px solid rgba(74,90,94,.3);border-radius:.8rem;padding:.75rem .9rem;transition:border-color .2s;
}
.vr-field textarea{resize:vertical;min-height:3.2rem}
.vr-field input:focus,.vr-field textarea:focus,.vr-field select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(1,57,70,.12)}

.is-invalid input,.is-invalid.vr-field input,.is-invalid textarea{border-color:#B3261E}
.vr-weeks.is-invalid,.vr-choices.is-invalid{outline:2px solid #B3261E;outline-offset:6px;border-radius:var(--r)}
.vr-error{color:#B3261E;font-weight:600}

.vr-submit{display:grid;gap:.8rem;margin-top:.6rem}
.vr-submit .btn{font-size:1.05rem}
.vr-submit .btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.vr-done{margin-top:3rem;padding:clamp(1.6rem,4vw,3rem);border-radius:calc(var(--r) * 1.4);background:var(--teal);color:#fff;display:grid;gap:1rem;justify-items:start}
.vr-done:focus{outline:none}
.vr-done h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.vr-done p{color:rgba(255,255,255,.86);max-width:40rem}
.vr-done__btn{width:auto;background:var(--cream);color:var(--teal)}
.vr-done__btn:hover{background:#fff}

@media (max-width:760px){.vr-weeks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  .vr-choices--2,.vr-grid{grid-template-columns:1fr}
  .vr-back{font-size:.82rem}
  .vr .brand__ts{display:none}
}

/* ---------- Ylläpito (/hallinta) ---------- */
.hl-main{padding:clamp(6.5rem,12vh,8rem) clamp(1rem,3vw,2.5rem) 4rem;max-width:110rem;margin-inline:auto}
.hl-user{display:flex;align-items:center;gap:1rem;color:#fff;font-weight:600;font-size:.9rem}
.hl-h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:.5rem}
.hl-h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.8rem);margin-bottom:.8rem}
.hl-h3{font:600 .74rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:1.3rem 0 .5rem}
.hl-login{max-width:26rem;margin:4rem auto;display:grid;gap:1rem}
.hl-login .btn{margin-top:.5rem}

.hl-tabs{display:flex;gap:.4rem;margin-bottom:1.4rem;border-bottom:1.5px solid rgba(150,132,72,.35)}
.hl-tabs button{font:600 1rem/1 var(--sans);background:none;border:0;padding:.9rem 1.1rem;cursor:pointer;color:var(--slate);border-bottom:3px solid transparent;margin-bottom:-1.5px}
.hl-tabs button[aria-selected=true]{color:var(--teal);border-bottom-color:var(--teal)}

.hl-filters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.hl-filters select,.hl-filters input{font:inherit;font-size:.95rem;padding:.6rem .8rem;border-radius:.7rem;border:1.5px solid rgba(74,90,94,.3);background:#fff;color:var(--ink)}
.hl-filters input{flex:1 1 16rem}
.hl-btn{background:#fff;color:var(--teal);border-color:rgba(1,57,70,.3)}
.hl-btn--primary{background:var(--teal);color:#fff}
.hl-btn--danger{color:#B3261E;border-color:rgba(179,38,30,.35)}
.hl-count{color:var(--slate);font-size:.9rem;margin:.9rem 0 .5rem}

.hl-table-wrap{overflow-x:auto;background:#fff;border-radius:var(--r);box-shadow:0 20px 50px -35px rgba(1,57,70,.35)}
.hl-table{width:100%;border-collapse:collapse;font-size:.9rem;line-height:1.4}
.hl-table th{text-align:left;font:600 .7rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);padding:.9rem .8rem;border-bottom:1px solid var(--mist);white-space:nowrap;background:var(--cream-2)}
.hl-table td{padding:.75rem .8rem;border-bottom:1px solid var(--mist-2);vertical-align:top;min-width:6rem}
.hl-table td small{display:block;color:var(--slate);font-size:.82rem;margin-top:.15rem}
.hl-table td .hl-note{color:var(--gold-ink);font-style:italic}
.hl-table tr.is-cancelled td{opacity:.45;text-decoration:line-through}
.hl-table tr.is-cancelled td.hl-c,.hl-table tr.is-cancelled td:last-child{text-decoration:none;opacity:1}
.hl-table .hl-c{text-align:center;min-width:0}
.hl-table input[type=checkbox]{width:1.15rem;height:1.15rem;accent-color:var(--teal);cursor:pointer}
.hl-table--form td{min-width:0}
.hl-table--form input:not([type=checkbox]){font:inherit;width:100%;min-width:7rem;padding:.45rem .6rem;border:1.5px solid rgba(74,90,94,.3);border-radius:.6rem}
.hl-table--form .hl-num{min-width:4.5rem;width:5rem}
.hl-empty{text-align:center;color:var(--slate);padding:2rem!important}
.hl-tag{display:inline-block;font:600 .68rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;background:var(--blush);color:var(--ink);padding:.3rem .5rem;border-radius:99px;vertical-align:middle;text-decoration:none}
.hl-link{background:none;border:0;padding:0;font:600 .9rem/1.3 var(--sans);color:var(--teal);text-decoration:underline;cursor:pointer}

.hl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1rem}
.hl-card{display:grid;gap:.6rem;align-content:start}
.hl-big{color:var(--slate)}
.hl-big b{font:600 2.2rem/1 var(--sans);color:var(--teal);font-variant-numeric:tabular-nums}
.hl-stats li{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px dashed var(--mist);font-size:.92rem}
.hl-stats b{font-variant-numeric:tabular-nums}

.hl-settings{display:grid;gap:1rem}
.hl-settings .btn--small{margin-top:1rem}
.hl-save{display:flex;justify-content:flex-end;align-items:center;gap:1rem}
.hl-save .btn{width:auto;padding-inline:2rem}
.hl-saved{color:var(--slate);font-weight:600}

.hl-dialog{border:0;border-radius:calc(var(--r) * 1.2);padding:clamp(1.2rem,3vw,2rem);width:min(46rem,calc(100vw - 2rem));max-height:calc(100vh - 2rem);background:var(--cream-2);color:var(--ink);box-shadow:0 40px 80px -30px rgba(1,57,70,.5)}
.hl-dialog::backdrop{background:rgba(13,42,49,.45)}
.hl-dialog .vr-field select{appearance:auto}
.hl-dialog__actions{display:flex;gap:.6rem;align-items:center;margin-top:1.4rem;flex-wrap:wrap}
.hl-dialog__actions span{flex:1}

/* ---------- Varausohje (/varaa) ---------- */
.vr-code{
  margin-top:2.2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.2rem;
  padding:1.2rem 1.4rem;border-radius:calc(var(--r) * 1.2);background:var(--teal);color:#fff;
}
.vr-code > div{display:grid;gap:.2rem;margin-right:auto}
.vr-code__label{font:600 .72rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lt)}
.vr-code__value{font:500 clamp(1.8rem,1.4rem + 1.6vw,2.6rem)/1 var(--serif);letter-spacing:.04em}
.vr-code .hl-btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.vr-code__go{width:auto;background:var(--cream);color:var(--teal);padding:.95rem 1.6rem}
.vr-code__go:hover{background:#fff}

.vr-main > .vr-sec{margin-top:1.2rem}
.vr-code + .vr-sec{margin-top:2.4rem}
.vr-sec h2{display:flex;align-items:center;gap:.8rem;font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);line-height:1.1;margin-bottom:1rem}
.vr-sec > p{max-width:42rem;margin-bottom:1rem}
.vr-sec > .btn{margin-top:1.2rem}
.vr-sec em{color:inherit;font-style:italic}

.vr-weeklist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin:1.2rem 0 .8rem}
.vr-weeklist li{padding:.9rem 1rem;border-radius:var(--r);background:#fff;border:1.5px solid rgba(150,132,72,.4);text-align:center}
.vr-weeklist b{font:600 1.2rem/1.1 var(--sans);color:var(--teal);font-variant-numeric:tabular-nums}
.vr-arrive{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.vr-arrive div{display:grid;gap:.1rem;padding:.8rem 1rem;border-radius:var(--r);background:var(--mist-2)}
.vr-arrive span{color:var(--slate);font-size:.9rem}

.vr-table th small{display:block;font-weight:400;letter-spacing:0;text-transform:none;color:var(--slate);font-size:.82rem;margin-top:.2rem}
.vr-table tbody th{text-align:left;font:600 .92rem/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);white-space:normal;background:none;min-width:12rem;padding:.75rem .8rem;border-bottom:1px solid var(--mist-2);vertical-align:top}
.vr-table tbody th small{font-weight:400;color:var(--slate);font-size:.84rem;line-height:1.45;margin-top:.25rem}
.vr-table td{min-width:5.5rem}
.vr-prices td,.vr-treat td{white-space:nowrap}
.vr-s{display:none}
.vr-prices td{font-variant-numeric:tabular-nums;font-weight:600;color:var(--teal)}
.vr-prices .vr-group th{background:var(--cream-2);font:600 .74rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);padding-top:1rem}
.vr-treat td{color:var(--teal);font-weight:600}

.vr-who{grid-template-columns:repeat(3,minmax(0,1fr))}
.vr-who .vr-choice{font:inherit;text-align:left;color:inherit}
.vr-who .vr-choice[aria-selected=true]{border-color:var(--teal);box-shadow:0 0 0 1.5px var(--teal);background:var(--mist-2)}
.vr-answer{margin-top:1rem;padding:1.2rem 1.4rem;border-radius:var(--r);background:#fff;border-left:4px solid var(--gold)}
.vr-ways{list-style:decimal;padding-left:1.3rem;display:grid;gap:.9rem;margin-top:.6rem}

.vr-howto{list-style:none;counter-reset:a;display:grid;gap:.8rem;margin-top:.4rem}
.vr-howto li{counter-increment:a;position:relative;padding-left:2.6rem;max-width:44rem}
.vr-howto li::before{content:counter(a);position:absolute;left:0;top:-.05rem;width:1.8rem;height:1.8rem;border-radius:50%;display:grid;place-items:center;background:var(--gold-lt);color:var(--teal);font:600 .85rem/1 var(--sans)}
.vr-go{width:auto;padding-inline:2rem}

.vr-faq details{border-bottom:1px solid var(--mist);padding:.9rem 0}
.vr-faq summary{cursor:pointer;font-weight:600;list-style-position:outside}
.vr-faq details p{margin-top:.5rem;color:var(--slate);max-width:42rem}

.vr-end{margin-top:2.4rem;padding:clamp(1.6rem,4vw,3rem);border-radius:calc(var(--r) * 1.4);background:var(--teal);color:#fff;display:grid;gap:1rem;justify-items:start}
.vr-end h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.vr-end em{color:var(--gold-lt)}
.vr-end p{color:rgba(255,255,255,.86)}
.vr-end__btn{background:var(--cream);color:var(--teal)}
.vr-end__help{font-size:.9rem}

@media (max-width:760px){
  .vr-who{grid-template-columns:1fr}
  .vr-weeklist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .vr-sec{padding:1.2rem 1rem}
  .vr-l{display:none}.vr-s{display:inline}
  .vr-table tbody th{min-width:6.5rem;font-size:.86rem;hyphens:auto}
  .vr-table td{min-width:0}
  .vr-table td,.vr-table th{padding:.6rem .45rem;font-size:.86rem}
}
@media (max-width:480px){
  .vr-arrive{grid-template-columns:1fr}
  .vr-code__go,.vr-code .hl-btn{flex:1 1 auto}
}
.vr-arrive .is-rec{background:#fff;box-shadow:0 0 0 1.5px var(--gold)}
.vr-rec{justify-self:start;margin-top:.3rem;font:600 .68rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--teal);background:var(--gold-lt);padding:.3rem .5rem;border-radius:99px}
.vr-table tbody th small.vr-by{color:var(--gold-ink);font-weight:600}
.vr-terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.vr-terms > div{min-width:0;display:grid;gap:.4rem;align-content:start;padding:1.3rem 1.3rem 1.4rem;border-radius:var(--r);background:#fff}
.vr-terms > div::before{content:"";width:2rem;height:2px;background:var(--gold);margin-bottom:.5rem}
.vr-terms__label{font:600 .74rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.vr-terms__big{font:400 clamp(1.3rem,1rem + .8vw,1.55rem)/1.15 var(--serif);color:var(--teal);margin-top:.15rem;overflow-wrap:anywhere}
.vr-terms p{color:var(--slate);font-size:.95rem;margin:0}
@media (max-width:760px){.vr-terms{grid-template-columns:1fr}}

/* Viikon ohjelma */
.al-intro{margin:0 0 1.4rem;padding:.8rem 1rem;border-left:2px solid var(--gold);background:#fff;border-radius:0 var(--r) var(--r) 0;color:var(--slate)}
.al-day + .al-day{margin-top:1.6rem}
.al-day h3{font:600 1.15rem/1.2 var(--sans);color:var(--teal);display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.al-day h3 small{font-weight:400;color:var(--slate);font-size:.9rem}
.al-list{list-style:none;margin:.6rem 0 0;padding:0;border-top:1px solid rgba(1,57,70,.12)}
.al-list > li{display:grid;grid-template-columns:6.2rem 1fr;gap:.8rem;padding:.7rem 0;border-bottom:1px solid rgba(1,57,70,.12)}
.al-t{font:600 .95rem/1.4 var(--sans);color:var(--teal);font-variant-numeric:tabular-nums}
.al-what b{font-weight:600;color:var(--ink)}
.al-what span{display:block;color:var(--slate);font-size:.9rem}
.is-meal .al-what b{font-weight:400;color:var(--slate)}
.is-key .al-what b{color:var(--teal)}
.al-end{margin:1.4rem 0 0;color:var(--slate);font-size:.9rem;font-style:italic}
@media (max-width:620px){.al-list > li{grid-template-columns:4.6rem 1fr;gap:.6rem}}
.vr-table tbody th small.vr-huom{margin-top:.9rem}