.hostilio-date-field{
    display:block;
    width:100%;
}

.hostilio-date-input{
    width:100%;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 14px;
    border:1px solid #d8bd8c;
    border-radius:12px;
    background:#fff;
    color:#211b16;
    font:inherit;
    font-weight:700;
    text-align:left;
    cursor:pointer;
}

.hostilio-date-input:hover,
.hostilio-date-input:focus-visible{
    border-color:#9e6a1d;
    outline:2px solid rgba(158,106,29,.16);
    outline-offset:1px;
}

.hostilio-date-input-icon{
    width:25px;
    height:25px;
    display:grid;
    place-items:center;
    color:#651c1b;
    font-size:19px;
}

.hostilio-datepicker-popover{
    position:absolute;
    z-index:10000;
    padding:13px;
    border:1px solid #bc9c69;
    border-radius:12px;
    background:#fffdf8;
    box-shadow:0 14px 34px rgba(52,38,22,.22);
}

.hostilio-datepicker-popover[hidden]{
    display:none!important;
}

.hostilio-datepicker-head{
    display:grid;
    grid-template-columns:34px 1fr 34px;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
}

.hostilio-datepicker-head strong{
    text-align:center;
    color:#581714;
}

.hostilio-datepicker-nav{
    border:0;
    background:transparent;
    color:#581714;
    font-size:27px;
    line-height:1;
    cursor:pointer;
}

.hostilio-datepicker-legend{
    display:flex;
    flex-wrap:wrap;
    gap:10px 15px;
    margin:4px 0 8px;
    font-size:12px;
    color:#625441;
}

.hostilio-datepicker-legend span{
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.hostilio-datepicker-legend i{
    width:12px;
    height:12px;
    border-radius:3px;
    display:inline-block;
}

.legend-hostilio{background:#4c4238}
.legend-external{background:#6f1d1b}

.hostilio-datepicker-status{
    min-height:28px;
    margin-bottom:7px;
    padding:6px 8px;
    border-radius:7px;
    background:#f6eddd;
    color:#5c4b35;
    font-size:12px;
}

.hostilio-datepicker-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:4px;
}

.hostilio-datepicker-weekday{
    padding:4px 0;
    text-align:center;
    color:#766650;
    font-size:11px;
    font-weight:700;
}

.hostilio-datepicker-empty{
    min-height:37px;
}

.hostilio-datepicker-day{
    position:relative;
    min-height:39px;
    border:1px solid transparent;
    border-radius:7px;
    background:transparent;
    color:#211b16;
    font-weight:700;
    cursor:pointer;
}

.hostilio-datepicker-day:hover:not(:disabled){
    background:#f4e4c7;
    border-color:#c79b50;
}

.hostilio-datepicker-day.occupied{
    background:#4c4238;
    color:#fff;
}

.hostilio-datepicker-day.external{
    background:#6f1d1b;
    color:#fff;
}

.hostilio-datepicker-day.locked{
    opacity:.68;
    cursor:not-allowed;
}

.hostilio-datepicker-day.external small{
    position:absolute;
    right:2px;
    bottom:2px;
    display:grid;
    place-items:center;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#fff1cf;
    color:#641b19;
    font-size:8px;
}

.hostilio-datepicker-day.selected-start,
.hostilio-datepicker-day.selected-end{
    background:#d4a427!important;
    border-color:#8e6811!important;
    color:#231b0d!important;
    opacity:1!important;
}

.hostilio-datepicker-day.selected-range{
    box-shadow:inset 0 0 0 2px #dfbd63;
}

@media(max-width:560px){
    .hostilio-datepicker-popover{
        width:calc(100vw - 20px)!important;
        left:10px!important;
    }
}