/**
 * Creatrr Date Range Picker Styles
 *
 * Two side-by-side calendars for start/end date selection.
 * Uses --cr-* design tokens exclusively. Theme-aware.
 *
 * @package Creatrr\Platform
 */

/* ── Range Picker Container ── */
.cr-daterange {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: start;
}

/* ── Column ── */
.cr-daterange-col {
    min-width: 0;
}

/* ── Label ── */
.cr-daterange-label {
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-medium);
    color: var(--cr-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--cr-space-1);
}

/* ── Display: formatted date shown above each calendar ── */
.cr-daterange-display {
    font-size: var(--cr-font-size-sm);
    font-weight: var(--cr-font-weight-semibold);
    color: var(--cr-text-tertiary);
    margin-bottom: var(--cr-space-3);
    min-height: 20px;
}
.cr-daterange-display.has-value {
    color: var(--cr-text-primary);
}

/* ── Divider ── */
.cr-daterange-divider {
    width: 1px;
    background: var(--cr-border);
    align-self: stretch;
    margin: 0 var(--cr-space-4);
}

/* ── Range highlighting on day cells ── */
.cr-dp-day.in-range:not(.empty) {
    background: color-mix(in srgb, var(--cr-text-primary) 8%, transparent);
    border-radius: 0;
}
.cr-dp-day.range-start {
    border-radius: var(--cr-radius-sm) 0 0 var(--cr-radius-sm);
}
.cr-dp-day.range-end {
    border-radius: 0 var(--cr-radius-sm) var(--cr-radius-sm) 0;
}
.cr-dp-day.range-start.range-end {
    border-radius: var(--cr-radius-sm);
}
.cr-dp-day.in-range.selected {
    background: var(--cr-text-primary);
    color: var(--cr-bg-primary);
    border-radius: var(--cr-radius-sm);
}

/* ── Responsive: stack on narrow viewports ── */
@media (max-width: 480px) {
    .cr-daterange {
        grid-template-columns: 1fr;
        gap: var(--cr-space-4);
    }
    .cr-daterange-divider {
        width: 100%;
        height: 1px;
        margin: 0;
    }
}