* {
    box-sizing: border-box;
}

:root {
    --black: #151515;
    --gold: #b58a52;
    --gold-light: #d8bd91;
    --bg: #f2eee8;
    --white: #ffffff;
    --border: #ded7cc;
    --text: #222;
}


body {

    margin: 0;

    min-height: 100vh;

    background: var(--bg);

    font-family:
    "Montserrat",
    Arial,
    sans-serif;

    color: var(--text);

}


/* Основная карточка */

.page {

    width: min(900px, 94%);

    margin: 40px auto;

    background: var(--white);

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
    0 20px 50px rgba(0,0,0,.25);

}



/* Верх */

.hero {

    text-align: center;

    position: relative;

    padding-bottom: 35px;

}


.hero-top {

    height: 150px;

    background: var(--black);

    border-bottom:
    4px solid var(--gold);

}


.logo-wrap {

    margin-top: -75px;

}


.logo {

    width: 150px;

    height: 150px;

    object-fit: contain;

    background: white;

    border-radius: 50%;

    padding: 10px;

    box-shadow:
    0 10px 25px rgba(0,0,0,.25);

}



h1 {

    margin-top: 25px;

    margin-bottom: 5px;

    font-size: 38px;

    letter-spacing: 1px;

}



.subtitle {

    margin: 0;

    color: #777;

    font-size: 16px;

}



/* Форма */

form {

    padding: 40px;

}



label {

    display: block;

    margin-bottom: 8px;

    margin-top: 20px;

    font-weight: 600;

}



.grid2 {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;

}



input,
select,
textarea {


    width:100%;

    padding:15px;

    font-size:16px;

    border:

    1px solid var(--border);

    border-radius:12px;

    background:white;

    transition:.2s;

}



input:focus,
select:focus,
textarea:focus {

    outline:none;

    border-color:var(--gold);

    box-shadow:
    0 0 0 4px rgba(181,138,82,.15);

}



textarea {

    min-height:120px;

    resize:vertical;

}



/* Время */

#times {

    display:grid;

    grid-template-columns:
    repeat(5,1fr);

    gap:10px;

    margin-top:10px;

}



.time-btn {


    padding:12px 5px;

    border:

    1px solid var(--border);

    background:white;

    border-radius:10px;

    cursor:pointer;

    font-size:15px;

    transition:.2s;

}



.time-btn:hover {

    border-color:var(--gold);

    color:var(--gold);

}



.time-btn.selected {


    background:var(--gold);

    color:white;

    border-color:var(--gold);

}



.time-btn:disabled {


    background:#eee;

    color:#999;

    cursor:not-allowed;

}



/* Счётчик */

#charCounter {

    text-align:right;

    margin-top:5px;

    font-size:12px;

    color:#777;

}



/* Кнопка */

button[type="submit"] {


    width:100%;

    margin-top:30px;

    padding:17px;


    background:var(--black);


    color:white;


    border:none;


    border-radius:12px;


    font-size:18px;


    font-weight:700;


    letter-spacing:1px;


    cursor:pointer;


    transition:.25s;

}



button[type="submit"]:hover {

    background:var(--gold);

}



/* Телефон */

@media(max-width:700px){


    .page {

        width:95%;

        margin:15px auto;

    }


    form {

        padding:25px;

    }


    .grid2 {

        grid-template-columns:1fr;

    }


    #times {

        grid-template-columns:
        repeat(3,1fr);

    }


    h1 {

        font-size:30px;

    }


    .logo {

        width:120px;

        height:120px;

    }

}



@media(max-width:420px){


    #times {

        grid-template-columns:
        repeat(2,1fr);

    }


}
/* Thanks page */


.thanks-card {

    text-align:center;

    padding:30px 30px 25px;

}

.success-icon {

    width:55px;
    height:55px;

    margin:0 auto 20px;

    border-radius:50%;

    background:var(--gold);

    color:white;

    font-size:32px;

    line-height:55px;

    font-weight:bold;

}


.thanks-card h2 {

    margin-bottom:20px;

}


.contact-box {

    margin:30px auto;

    padding:20px;

    max-width:360px;

    background:#faf7f2;

    border:1px solid var(--border);

    border-radius:15px;

    line-height:2;

    font-size:15px;

}

.contact-box div {

    margin:10px 0;

    font-weight:400;

}


.contact-box a {

    color:var(--gold);

    text-decoration:none;

    font-weight:400;

}


.contact-box a:hover {

    color:var(--black);

}


.thanks-buttons {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    width:100%;

    margin-top:40px;

    padding-bottom:30px;

}


.thanks-btn {

    display:flex;

    justify-content:center;

    align-items:center;

    width:180px;

    height:45px;

    border-radius:10px;

    background:var(--black);

    color:white;

    text-decoration:none;

    font-weight:600;

    white-space:nowrap;

}


.thanks-btn.gold {

    background:var(--gold);

}

/* Compact header for thanks page */

.thanks-hero .hero-top {

    height:110px;

}


.thanks-hero .logo-wrap {

    margin-top:-55px;

}


.thanks-hero .logo {

    width:120px;

    height:120px;

}


.thanks-hero {

    padding-bottom:15px;

}


/* Booking form action buttons */
.form-buttons{
    display:flex;
    gap:12px;
    margin-top:30px;
}

.form-buttons button{
    flex:1;
    margin-top:0;
}

.cancel-button{
    background:#777;
    color:#fff;
    border:none;
    border-radius:12px;
    padding:17px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}

.cancel-button:hover{
    background:#555;
}

@media(max-width:700px){
    .form-buttons{
        flex-direction:column;
    }
}
.date-hint{
    margin-top:12px;
    margin-left:3px;
    color:#9b7446;      /*  золото */
    font-size:16px;     /* чуть крупнее */
    font-weight:600;
    line-height:1.3;
}
.required{
    color:#d8bd91;
    font-weight:700;
    font-size:1.1em;
}

/* =====================================
   FLATPICKR
===================================== */


.flatpickr-calendar{
    border:none;
    border-radius:16px;
    box-shadow:0 18px 45px rgba(0,0,0,.18);
    font-family:"Montserrat",sans-serif;
    overflow:hidden;

    width:360px !important;
    max-width:none;
}

.flatpickr-months{
    background:#151515;
}

.flatpickr-month{
    background:#151515;
    color:#fff;
    fill:#fff;
}

.flatpickr-current-month{
    color:#fff;
    font-weight:600;
    font-size:16px;
}

.flatpickr-current-month input.cur-year{
    color:#fff;
    font-weight:600;
}

.flatpickr-weekdays{
    background:#faf7f2;
}

span.flatpickr-weekday{
    color:#555;
    font-weight:600;
}

.flatpickr-day{
    border-radius:10px;
    transition:.18s;
}

.flatpickr-day:hover{
    background:#d8bd91;
    color:#151515;
    border-color:#d8bd91;
}

.flatpickr-day.today{
    border:2px solid #b58a52;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover{
    background:#ae7c3d !important;
    border-color:#b58a52 !important;
    color:#fff !important;
}

.flatpickr-day.today.selected{
    background:#b58a52 !important;
    border-color:#b58a52 !important;
    color:#fff !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg{
    fill:#ffffff;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg{
    fill:#d8bd91;
}

.flatpickr-day{
    transition:.15s ease;
}
.flatpickr-days{
    width:360px !important;
}

.dayContainer{
    width:360px !important;
    min-width:360px !important;
    max-width:360px !important;
}

.flatpickr-day{
    width:44px;
    max-width:44px;
    height:40px;
    line-height:40px;
}

.flatpickr-weekday{
    width:44px;
}