@import url('https://fonts.googleapis.com/css2?family=Aboreto&family=Nunito:wght@400;600;700&display=swap');

#vmc-calendar-root { 
    max-width: 100%; 
    margin: 0 auto; 
    padding: 0.5em;
}

.vmc-calendar-header {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 1.5em; 
    gap: 1em;
    font-family: "Aboreto", cursive;
    color: #84807D;
    padding: 0 0.5em;
}

/* Mobile Calendar Header Layout */
@media (max-width: 768px) {
    .vmc-calendar-header {
        flex-direction: column;
        align-items: center;
        gap: 0;
        margin-bottom: 1.5em;
        text-align: center;
        padding: 0;
        background: none;
        border-radius: 0;
        margin: 0;
    }
    
    /* Villa Name Section */
    .vmc-header-center {
        order: -1;
        width: 100%;
        margin-bottom: 1em;
        padding: 1em;
        background: linear-gradient(135deg, #F5E9DD 0%, #f8f2e8 100%);
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(126, 110, 72, 0.1);
    }
    
    .vmc-header-center span {
        font-size: 1.2em !important;
        font-weight: 600 !important;
        color: #7E6E48 !important;
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin: 0;
    }
    
    /* Year and Navigation Row */
    .vmc-mobile-year-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 1em 1.5em;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 10px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 1em;
        border: 1px solid rgba(126, 110, 72, 0.1);
    }
    
    .vmc-header-left {
        order: 2;
        flex: none;
        width: auto;
    }
    
    .vmc-header-left span {
        font-size: 1.2em !important;
        font-weight: 700 !important;
        color: #7E6E48 !important;
    }
    
    .vmc-header-right {
        order: 3;
        flex: none;
        width: auto;
        display: flex !important;
        gap: 0.8em;
    }
    
    .vmc-header-right button {
        padding: 0.6em 1.2em !important;
        font-size: 1em !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        min-width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.vmc-header-left, .vmc-header-center, .vmc-header-right { 
    flex: 1; 
    text-align: center; 
}
.vmc-header-left { text-align: left; }
.vmc-header-right { text-align: right; justify-content: flex-end !important; }

.vmc-header-left select,
.vmc-header-left span,
.vmc-header-center span {
    font-family: "Aboreto", cursive;
    color: #84807D;
    font-size: clamp(1em, 2.5vw, 1.3em);
    background: none;
    border: none;
    font-weight: 400;
}

.vmc-header-right button {
    background: #7E6E48;
    border: none;
    color: #fff;
    font-size: clamp(0.9em, 2vw, 1.1em);
    padding: 0.6em 1.2em;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Nunito", sans-serif;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(126, 110, 72, 0.2);
}
.vmc-header-right button:hover {
    background: #F5E9DD;
    color: #7E6E48;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(126, 110, 72, 0.3);
}

.vmc-header-right button svg {
    fill: #fff;
    transition: fill 0.3s;
}
.vmc-header-right button:hover svg {
    fill: #7E6E48;
}

/* Modern Horizontal Slider Calendar */
.vmc-calendar-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 1.5em;
    padding: 1em 0 1.5em 0.5em;
    margin: 0 -0.5em;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
}

.vmc-calendar-grid::-webkit-scrollbar {
    display: none;
}

.vmc-month {
    background: linear-gradient(135deg, #F5E9DD 0%, #f8f2e8 100%);
    border-radius: 16px;
    padding: 1.2em;
    min-width: 280px;
    flex: 0 0 280px;
    box-shadow: 0 4px 12px rgba(126, 110, 72, 0.1);
    transition: all 0.3s ease;
    scroll-snap-align: start;
    border: 1px solid rgba(126, 110, 72, 0.08);
	border-radius:8px;
}

.vmc-month:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(126, 110, 72, 0.15);
}

.vmc-month-title {
    font-weight: 600;
    text-align: center;
    margin-bottom: 1em;
    font-family: "Aboreto", cursive;
    color: #7E6E48;
    font-size: clamp(1.1em, 2.5vw, 1.3em);
    text-transform: uppercase;
    letter-spacing: 0.5px;
	border-radius:8px;
}

.vmc-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    max-width: 100%;
	border-radius:8px;
}

.vmc-day {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: clamp(0.8em, 1.8vw, 0.9em);
    cursor: default;
    font-family: "Nunito", sans-serif;
    color: #84807D;
    background: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
    font-weight: 500;
    min-height: 28px;
}

.vmc-day:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.05);
}

.vmc-booked {
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.vmc-booked:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

/* Add end spacing */
.vmc-calendar-grid::after {
    content: '';
    flex: 0 0 1em;
    height: 1px;
}

/* Desktop Grid Layout */
@media (min-width: 1200px) {
    .vmc-calendar-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 1.5em;
        padding: 1em;
        margin: 0;
        overflow: visible;
        scroll-snap-type: none;
    }
    
    .vmc-month {
        min-width: auto;
        flex: none;
    }
    
    .vmc-calendar-grid::after {
        display: none;
    }
}

/* Tablet Layout */
@media (min-width: 900px) and (max-width: 1199px) {
    .vmc-calendar-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.2em;
        padding: 1em;
        margin: 0;
        overflow: visible;
        scroll-snap-type: none;
    }
    
    .vmc-month {
        min-width: auto;
        flex: none;
    }
    
    .vmc-calendar-grid::after {
        display: none;
    }
}

/* Mobile and Small Tablet Slider */
@media (max-width: 899px) {
    .vmc-calendar-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 1.2em !important;
        padding: 0.5em 0 1em 0.5em !important;
        margin: 0 -0.5em !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        scroll-snap-type: x mandatory !important;
        flex-wrap: nowrap !important;
    }

    .vmc-calendar-grid::-webkit-scrollbar {
        display: none !important;
    }
    
    .vmc-month {
        min-width: 260px !important;
        flex: 0 0 260px !important;
        scroll-snap-align: start !important;
    }
    
    .vmc-day {
        min-height: 26px;
        font-size: 0.8em;
    }
    
    /* Override any grid behavior on mobile */
    .vmc-calendar-grid {
        grid-template-rows: none !important;
    }
}

/* Legend styles */
.vmc-legend {
    display: flex;
    align-items: center;
    gap: 2em;
    margin-top: 1.5em;
    font-family: "Nunito", sans-serif;
    color: #84807D;
    font-size: clamp(0.9em, 2vw, 1em);
    justify-content: center;
    padding: 1em;
    background: rgba(245, 233, 221, 0.3);
    border-radius: 12px;
    flex-wrap: wrap;
}

.vmc-legend-item {
    display: flex;
    align-items: center;
    gap: 0.6em;
    font-weight: 500;
}

.vmc-legend-color {
    width: 1.2em;
    height: 1.2em;
    border-radius: 6px;
    display: inline-block;
    border: 1px solid rgba(126, 110, 72, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Mobile Calendar Improvements */
@media (max-width: 899px) {
    .vmc-legend {
        gap: 1.5em;
        margin-top: 1em;
        padding: 0.8em;
    }
    
    .vmc-legend-item {
        gap: 0.4em;
        font-size: 0.85em;
    }
    
    .vmc-legend-color {
        width: 1em;
        height: 1em;
    }
}

/* Calendar scroll hint for mobile */
@media (max-width: 899px) {
    #vmc-calendar-root::after {
        content: "← Swipe to view all months →";
        display: block;
        text-align: center;
        color: #999;
        font-size: 0.8em;
        margin-top: 1em;
        font-style: italic;
        font-family: "Nunito", sans-serif;
    }
}