:root {
    --sand-50:  #FAF6EE;
    --sand-100: #F1E8D4;
    --sand-200: #E6D7B3;
    --sand-300: #D2BE89;
    --sea-50:   #E7F1F2;
    --sea-200:  #A9CED2;
    --sea-500:  #3E7F87;
    --sea-700:  #28585E;
    --ink:      #1F2A2C;
    --ink-soft: #54636A;
    --accent:   #E08A4B;
    --success:  #3C7D5B;
    --danger:   #B24A3C;
    --gray-bg:  #F6F2E8;
    --radius:   10px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    color: var(--ink);
    background: var(--sand-50);
    font-family: -apple-system, "Segoe UI", Tahoma, sans-serif;
    font-size: 17px;
    line-height: 1.55;
}

a { color: var(--sea-500); }
a:hover { color: var(--sea-700); }

.container {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Hero */
.hero {
    background: linear-gradient(180deg, var(--sea-200) 0%, var(--sand-100) 85%);
    padding: 2.5rem 0 2rem;
    text-align: center;
}
.hero-inner { max-width: 780px; margin: 0 auto; padding: 0 1rem; }
.hero .brand {
    letter-spacing: .2em;
    text-transform: uppercase;
    font-size: .85rem;
    color: var(--sea-700);
    margin-bottom: .5rem;
}
.hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    margin: .25rem 0 .75rem;
    color: var(--ink);
    font-weight: 600;
}
.hero .sub {
    font-size: 1.1rem;
    color: var(--ink-soft);
    max-width: 620px;
    margin: 0 auto 1rem;
}
.hero .meta {
    color: var(--ink-soft);
    font-size: .95rem;
}
.hero .meta span { margin: 0 .25rem; }

/* Steps */
.step {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.step h2 {
    margin-top: 0;
    font-size: 1.2rem;
    color: var(--sea-700);
}
.hint { color: var(--ink-soft); font-size: .95rem; }

/* Calendar */
.cal-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0;
}
@media (max-width: 720px) { .cal-wrap { grid-template-columns: 1fr; } }

#month-cal {
    background: var(--sand-50);
    border: 1px solid var(--sand-200);
    border-radius: var(--radius);
    padding: .5rem;
}
#day-view {
    background: var(--sand-50);
    border: 1px solid var(--sand-200);
    border-radius: var(--radius);
    padding: .75rem 1rem;
}
#day-title { font-weight: 600; margin-bottom: .5rem; color: var(--sea-700); }

#slot-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .35rem;
    margin-bottom: .75rem;
}
.slot {
    padding: .5rem .25rem;
    text-align: center;
    border-radius: 6px;
    font-size: .85rem;
    cursor: pointer;
    border: 1px solid transparent;
    user-select: none;
}
.slot.free     { background: var(--sea-50);    color: var(--sea-700); border-color: var(--sea-200); }
.slot.free:hover { background: var(--sea-200); }
.slot.booked   { background: #D9D9D9; color: #6B6B6B; cursor: not-allowed; }
.slot.blocked  { background: #E7D7D4; color: #7F3F3A; cursor: not-allowed; }
.slot.closed   { background: #EFEAE0; color: #9C9485; cursor: not-allowed; }
.slot.past     { background: #F2EEE4; color: #B4AEA0; cursor: not-allowed; text-decoration: line-through; }
.slot.selected { background: var(--accent); color: #fff; border-color: var(--accent); }
.slot.partial-current { outline: 1px dashed var(--accent); }

.legend {
    margin-top: .5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    font-size: .85rem;
    color: var(--ink-soft);
}
.legend .sw {
    display: inline-block;
    width: 14px; height: 14px;
    vertical-align: middle;
    margin-right: .25rem;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.1);
}
.sw.free    { background: var(--sea-50);   border-color: var(--sea-200); }
.sw.booked  { background: #D9D9D9; }
.sw.blocked { background: #E7D7D4; }
.sw.closed  { background: #EFEAE0; }
.sw.past    { background: #F2EEE4; }
.sw.sel     { background: var(--accent); border-color: var(--accent); }

.summary {
    padding: .75rem 1rem;
    background: var(--gray-bg);
    border-radius: 8px;
    color: var(--ink);
    font-size: 1rem;
}

/* Form */
#booking-form label {
    display: block;
    margin: .75rem 0;
}
#booking-form input[type=text],
#booking-form input[type=email],
#booking-form input[type=tel],
#booking-form input:not([type]) {
    width: 100%;
    padding: .6rem .75rem;
    font-size: 1rem;
    border: 1px solid var(--sand-300);
    border-radius: 6px;
    background: var(--sand-50);
}
#booking-form .check {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .95rem;
    color: var(--ink-soft);
}
#booking-form .check input { margin-top: .25rem; }

.final-price {
    font-size: 1.15rem;
    margin-top: .5rem;
}

.cta {
    display: inline-block;
    padding: .75rem 1.25rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 1.05rem;
    cursor: pointer;
    text-decoration: none;
    margin-top: .5rem;
    transition: background-color .15s ease;
}
.cta:hover { background: #C97738; color: #fff; }

.error-box {
    background: #F6D9D3;
    color: #7A2E24;
    padding: .75rem 1rem;
    border-radius: 6px;
    margin-top: .75rem;
}

.info { padding: 2rem 0 1rem; color: var(--ink-soft); }
.info h2 { color: var(--sea-700); }

footer {
    margin-top: 3rem;
    padding: 1.25rem 0 2rem;
    background: var(--sand-100);
    color: var(--ink-soft);
    text-align: center;
    font-size: .9rem;
}

/* FullCalendar-Theme */
.fc { font-size: .95rem; }
.fc .fc-button {
    background: var(--sea-500) !important;
    border: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    padding: .25rem .6rem !important;
}
.fc .fc-button-active,
.fc .fc-button:not(:disabled):hover {
    background: var(--sea-700) !important;
}
.fc .fc-daygrid-day.has-bookings { background: var(--sand-100); }
.fc .fc-daygrid-day.closed { background: #F2EEE4; }
.fc .fc-daygrid-day.selected { background: var(--sand-200); }