/* Metabox Styles for AutoPromote */

/* General metabox styling */
.pixel-apfw-metabox .description {
    margin-top: 5px;
}

/* Coupon dropdown and edit button */
#pixel_apfw_edit_coupon_btn {
    margin-left: 8px;
    vertical-align: middle;
}

#pixel_apfw_edit_coupon_btn .dashicons {
    margin-top: 3px;
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: text-top;
}

/* Image preview */
.pixel-apfw-image-preview {
    margin-top: 10px;
}

.pixel-apfw-remove-button {
    margin-left: 8px;
}

/* Fallback options */
.pixel-apfw-fallback-options {
    border-left: 2px solid #eee;
    padding-left: 20px;
    margin-top: 10px;
}

/* Date picker conflict styles */
.flatpickr-day.unavailable {
    background-color: #ffdddd !important;
    color: #999 !important;
    text-decoration: line-through;
    pointer-events: none; /* Prevent selection */
}

.flatpickr-day.partially-unavailable {
    background-color: #fff9dd !important;
    position: relative;
}

.partial-day-indicator {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ff9800;
}

/* Tooltip styling for better readability */
.flatpickr-calendar .flatpickr-day[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: pre;
    z-index: 1000;
    width: max-content;
    max-width: 250px;
}

/* Promotion date picker legend */
.pixel-apfw-datepicker-legend {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
}

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

.pixel-apfw-legend-color {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    border-radius: 3px;
}

.pixel-apfw-legend-available .pixel-apfw-legend-color {
    background-color: #fff;
    border: 1px solid #e6e6e6;
}

.pixel-apfw-legend-unavailable-date .pixel-apfw-legend-color {
    background-color: #ffdddd;
    text-decoration: line-through;
}

.pixel-apfw-legend-partially-unavailable .pixel-apfw-legend-color {
    background-color: #fff9dd;
    position: relative;
}

.pixel-apfw-legend-partially-unavailable .pixel-apfw-legend-color::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #ff9800;
}

/* Override WP default readonly background for flatpickr inputs */
.pixel-apfw-metabox .pixel-apfw-datetime-picker.flatpickr-input {
    background-color: #fff !important; /* Override default grey for readonly */
}