/* Checkout specific styles */

/* Wrapper for the flatpickr date range input */
.ef-date-range-wrapper {
    margin-bottom: 10px;
}

/* Style the visible text input */
#ef_date_range {
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--bg-color, #fff);
    color: var(--text-color, #1e293b);
    transition: all 0.2s ease;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

#ef_date_range:hover {
    border-color: #cbd5e1;
}

#ef_date_range:focus {
    outline: none;
    border-color: #eab308;
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.2);
}

/* Info text about setup/teardown days */
.ef-setup-teardown-info {
    margin-top: 8px;
    font-size: 0.85rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Ensure flatpickr calendar appears above other elements */
.flatpickr-calendar {
    z-index: 10000;
}