/* Varauslomake — kelo-sävyt mockupin mukaan. */

.dsv-form {
    --dsv-bg: #f6f3ec;
    --dsv-card: #fffdf9;
    --dsv-line: #ddd6c6;
    --dsv-line-soft: #e3ddd0;
    --dsv-green: #2c4a38;
    --dsv-green-dark: #22382c;
    --dsv-text: #2a2a26;
    --dsv-muted: #6d6759;
    --dsv-label: #8a8272;
    --dsv-busy: #ece5d6;
    --dsv-busy-text: #a89e8b;
    --dsv-range: #dfe9df;
    --dsv-disabled: #b9b2a2;

    box-sizing: border-box;
    background: var(--dsv-bg);
    color: var(--dsv-text);
    font-family: "DM Sans", "Inter", system-ui, -apple-system, sans-serif;
    padding: 36px 40px 40px;
    border-radius: 14px;
}

.dsv-form *,
.dsv-form *::before,
.dsv-form *::after { box-sizing: inherit; }

.dsv-head { margin-bottom: 28px; }
.dsv-eyebrow {
    font: 600 11px/1.2 "Inter", system-ui, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dsv-label);
    margin-bottom: 6px;
}
.dsv-form .dsv-title {
    font: 700 30px/1.15 "Outfit", "Inter", system-ui, sans-serif;
    color: var(--dsv-green-dark);
    margin: 0 0 6px;
}
.dsv-lead { font-size: 15px; color: var(--dsv-muted); margin: 0; }

.dsv-body { display: flex; flex-direction: column; gap: 28px; }
.dsv-step { display: flex; flex-direction: column; gap: 10px; }
.dsv-step__title {
    font: 600 13px/1.3 "Inter", system-ui, sans-serif;
    color: var(--dsv-green-dark);
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}
.dsv-step__row { display: flex; align-items: center; justify-content: space-between; }

/* Hunajapurkki */
.dsv-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* 1 · Mökit */
.dsv-cabins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dsv-cabin {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--dsv-card);
    border: 1.5px solid var(--dsv-line-soft);
    color: var(--dsv-text);
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s;
}
.dsv-cabin:hover { border-color: var(--dsv-green); }
.dsv-cabin.is-selected { background: var(--dsv-green); border-color: var(--dsv-green); color: #fff; }
.dsv-cabin__name { font: 600 14px/1.3 "Inter", system-ui, sans-serif; }
.dsv-cabin__beds { font-size: 12px; opacity: .75; }

/* 2 · Kalenteri */
.dsv-nav { display: flex; gap: 6px; }
.dsv-navbtn {
    width: 34px; height: 34px;
    border-radius: 8px;
    border: 1px solid var(--dsv-line);
    background: var(--dsv-card);
    color: var(--dsv-green-dark);
    font-size: 16px; line-height: 1;
    cursor: pointer;
}
.dsv-navbtn:disabled { opacity: .4; cursor: default; }

.dsv-months { display: flex; gap: 24px; flex-wrap: wrap; }
.dsv-loading { color: var(--dsv-muted); font-size: 14px; margin: 0; }
.dsv-month { display: flex; flex-direction: column; gap: 8px; }
.dsv-month__name {
    font: 600 14px/1.2 "Inter", system-ui, sans-serif;
    color: var(--dsv-green-dark);
    padding-left: 2px;
}
.dsv-grid { display: grid; grid-template-columns: repeat(7, 46px); gap: 3px; }
.dsv-wd { font-size: 11px; color: var(--dsv-label); text-align: center; padding: 4px 0; }

.dsv-day {
    height: 46px;
    border-radius: 8px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font: 600 14px/1 "Inter", system-ui, sans-serif;
    background: var(--dsv-card);
    color: var(--dsv-text);
    border: 1px solid var(--dsv-line);
    cursor: pointer;
    user-select: none;
    font-family: inherit;
    padding: 0;
}
.dsv-day__price { font-size: 9px; font-weight: 500; opacity: .75; margin-top: 1px; }
.dsv-day--empty { background: transparent; border-color: transparent; cursor: default; }
.dsv-day--past { background: transparent; border-color: transparent; color: #c8c1b2; cursor: default; }
.dsv-day--busy {
    background: var(--dsv-busy);
    border-color: var(--dsv-busy);
    color: var(--dsv-busy-text);
    text-decoration: line-through;
    cursor: default;
}
.dsv-day--range { background: var(--dsv-range); border-color: var(--dsv-range); color: var(--dsv-green-dark); }
.dsv-day--edge { background: var(--dsv-green); border-color: var(--dsv-green); color: #fff; }

.dsv-legend {
    display: flex; gap: 16px; align-items: center;
    font-size: 12px; color: var(--dsv-muted);
    padding-top: 2px; flex-wrap: wrap;
}
.dsv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dsv-legend__note { margin-left: auto; }
.dsv-swatch { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.dsv-swatch--free { background: var(--dsv-card); border: 1px solid var(--dsv-line); }
.dsv-swatch--busy { background: var(--dsv-busy); }
.dsv-swatch--pick { background: var(--dsv-green); }

.dsv-summary {
    background: var(--dsv-card);
    border: 1px solid var(--dsv-line-soft);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.dsv-summary__main { font: 600 14px/1.4 "Inter", system-ui, sans-serif; color: var(--dsv-green-dark); }
.dsv-summary__sub { font-size: 13px; color: var(--dsv-muted); }

/* 3 · Yhteystiedot */
.dsv-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dsv-fields input,
.dsv-fields textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--dsv-line);
    background: var(--dsv-card);
    font: 400 14px/1.4 "Inter", system-ui, sans-serif;
    color: var(--dsv-text);
    outline: none;
}
.dsv-fields input:focus,
.dsv-fields textarea:focus { border-color: var(--dsv-green); }
.dsv-fields textarea { resize: vertical; min-height: 64px; }
.dsv-wide { grid-column: 1 / -1; }

.dsv-select { display: flex; align-items: center; gap: 10px; }
.dsv-select > span { font-size: 13px; color: var(--dsv-muted); flex: none; }
.dsv-select select {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--dsv-line);
    background: var(--dsv-card);
    font: 400 14px/1.4 "Inter", system-ui, sans-serif;
    color: var(--dsv-text);
}

.dsv-submit {
    margin-top: 4px;
    padding: 14px 22px;
    border: none;
    border-radius: 10px;
    font: 600 15px/1 "Inter", system-ui, sans-serif;
    color: #fff;
    background: var(--dsv-green);
    cursor: pointer;
    align-self: flex-start;
}
.dsv-submit:hover { opacity: .92; }
.dsv-submit:disabled { background: var(--dsv-disabled); cursor: default; opacity: 1; }

.dsv-fine { font-size: 12px; color: var(--dsv-label); margin: 8px 0 0; }

.dsv-msg {
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 14px;
    margin-bottom: 22px;
}
.dsv-msg--ok { background: #e7efe7; border: 1px solid #bcd2bf; color: var(--dsv-green-dark); }
.dsv-msg--error { background: #fbeceb; border: 1px solid #e4b7b4; color: #7d2b26; }

@media (max-width: 860px) {
    .dsv-form { padding: 24px 20px 28px; }
    .dsv-cabins { grid-template-columns: repeat(2, 1fr); }
    .dsv-months { gap: 20px; }
    .dsv-grid { grid-template-columns: repeat(7, 1fr); width: 100%; }
    .dsv-month { flex: 1 1 100%; }
    .dsv-day { height: 42px; }
    .dsv-fields { grid-template-columns: 1fr; }
    .dsv-legend__note { margin-left: 0; flex-basis: 100%; }
}

@media (max-width: 420px) {
    .dsv-cabins { grid-template-columns: 1fr; }
    .dsv-form .dsv-title { font-size: 25px; }
}