.rental-calendar-container {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.rental-instructions {
    margin-bottom: 15px;
    font-size: 0.9em;
}

.calendar-wrapper {
    background: #fff;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.calendar-wrapper .ui-datepicker {
    width: 100%;
    display: block !important;
    position: relative !important;
    border: none;
}


/* Calendar Styling */
.ui-datepicker {
    width: 100% !important;
    padding: 0;
    border: none;
}

.ui-datepicker th {
    background: #f8f9fa;
    padding: 7px 0;
    color: #495057;
}

.ui-datepicker td {
    padding: 2px;
}

.ui-datepicker td a {
    text-align: center;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}




/* Make month/year dropdowns more visible */
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year {
    width: auto;
    padding: 2px;
    margin: 0 2px;
}


.ui-datepicker td.selected a {
    background: #bbdefb !important;
    color: #1976d2 !important;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ui-datepicker td.available a:hover {
    background: #c8e6c9 !important;
    transform: scale(1.1);
}

/* Date States */
.ui-datepicker td.available:not(.selected) a {
    background: #e8f5e9 !important;
    color: #2e7d32;
}
.ui-datepicker td.unavailable {
    text-decoration: line-through;
    opacity: 0.5;
}

.ui-datepicker td.unavailable a {
    background: #ffebee !important;
    color: #d32f2f !important;
    text-decoration: line-through;
    opacity: 0.7;
}

/* Style for two months side by side */
.ui-datepicker-multi-2 {
    width: 100% !important;
}

.ui-datepicker-group {
    width: 50% !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 8px;
    width: 1.8em;
    height: 1.8em;
    cursor: pointer;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-datepicker .ui-datepicker-prev {
    left: 2px;
}

.ui-datepicker .ui-datepicker-next {
    right: 2px;
}
/* Add icons for prev/next */
.ui-datepicker .ui-datepicker-prev:before {
    content: "←";
}

.ui-datepicker .ui-datepicker-next:before {
    content: "→";
}

/* Remove default images */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: none;
}

/* Hover states */
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background-color: #e9ecef;
    border-color: #dee2e6;
}

/* Month/Year dropdowns */
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: auto;
    height: auto;
    padding: 2px;
    margin: 0 2px;
    font-size: 14px;
}

/* Header styling */
.ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}
/* Rental Summary Styling */
.rental-summary {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 15px;
    margin-top: 20px;
}

.rental-details {
    margin-top: 10px;
}

.rental-details p {
    margin-bottom: 8px;
}

.rental-total {
    font-size: 1.2em;
    font-weight: bold;
    color: #1976d2;
}

/* Controls */
.rental-controls {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

#button-rental-cart {
    margin-top: 20px;
    width: 100%;
}