/* Стилі для календаря зайнятості */
.availability-section {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.availability-title {
    font-size: 14px;
    color: #555;
    margin-bottom: 5px;
}

.availability-subtitle {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

.availability-calendar {
    margin-bottom: 20px;
}

.availability-row {
    display: flex;
    margin-bottom: 5px;
}

.month-item {
    width: 8.333%;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    border-radius: 4px;
    font-weight: bold;
    color: white;
    transition: all 0.2s ease;
    position: relative;
    padding: 5px;
}

.month-item:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.month-name {
    font-size: 14px;
    font-weight: bold;
}

.month-year {
    font-size: 20px;
    opacity: 0.85;
}

.checkbox-indicator {
    position: absolute;
    top: 3px;
    right: 3px;
    background: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.checkbox-indicator i {
    font-size: 10px;
    color: #5cb85c;
}

.month-item.selected .checkbox-indicator {
    opacity: 1;
}

/* Стани місяців */
.available {
    background-color: #5cb85c; /* Зелений для доступних */
}

.partially {
    background-color: #f0ad4e; /* Жовтий для частково доступних */
}

.booked {
    background-color: #d9534f; /* Червоний для зайнятих */
}

/* Кнопки */
.buy-button {
    background-color: #ff7043;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 12px;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
    display: none;
}

.buy-button:hover {
    background-color: #ff5722;
}

.sold-button {
    background-color: #ffab91;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 12px;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    cursor: not-allowed;
    text-align: center;
}

/* Адаптивність */
@media screen and (max-width: 768px) {
    .availability-row {
        flex-wrap: wrap;
    }
    
    .month-item {
        width: calc(16.666% - 5px);
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 480px) {
    .month-item {
        width: calc(25% - 5px);
    }
}

/* Стилі для сторінки оформлення замовлення */
.listeo-checkout-availability {
    margin-bottom: 30px;
}

/* Стилі для адміністративної панелі */
#listeo_availability_metabox .inside {
    padding: 0;
    margin: 0;
}

.availability-admin-controls {
    margin-top: 20px;
    padding: 15px;
    border-top: 1px solid #eee;
}

.availability-legend {
    display: flex;
    margin-bottom: 15px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

.color-box {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    border-radius: 3px;
}

.legend-item.available .color-box {
    background-color: #5cb85c;
}

.legend-item.partially .color-box {
    background-color: #f0ad4e;
}

.legend-item.booked .color-box {
    background-color: #d9534f;
}

.availability-month-statuses {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.month-status-control {
    margin-bottom: 10px;
}

.month-status-control label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.month-status-control select {
    width: 100%;
    padding: 5px;
}

/* Стилі для сторінки підтвердження бронювання */
.booking-confirmation {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 30px;
}

.booking-details {
    margin-top: 20px;
    padding: 15px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Стилі для сторінки редагування оголошення */
.form-section .availability-section {
    margin-top: 15px;
}