/* ── Recurrence-specific styles ──────────────────────────────────────── */

/* Page title with repeat icon */
.ucp-recurrence-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
}

.ucp-recurrence-header .material-symbols-outlined {
    font-size: 28px;
    color: var(--ucp-primary);
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Days-of-week grid */
.ucp-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-top: 10px;
}

@media (max-width: 480px) {
    .ucp-days-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ucp-day-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    border: 2px solid var(--ucp-border);
    border-radius: var(--ucp-radius-sm, 8px);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
}

.ucp-day-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ucp-day-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ucp-text-secondary);
}

.ucp-day-toggle:has(.ucp-day-cb:checked) {
    border-color: var(--ucp-primary);
    background: var(--ucp-primary-light, rgba(27,175,82,.08));
}

.ucp-day-toggle:has(.ucp-day-cb:checked) .ucp-day-label {
    color: var(--ucp-primary);
}

/* Weekdays preset button */
.ucp-weekdays-preset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: var(--ucp-text-sm);
    font-weight: 600;
    color: var(--ucp-primary);
    background: var(--ucp-primary-light, rgba(27,175,82,.08));
    border: 1px solid var(--ucp-primary);
    border-radius: 9999px;
    cursor: pointer;
    transition: background .15s;
    margin-bottom: 8px;
}

.ucp-weekdays-preset-btn:hover {
    background: rgba(27, 175, 82, .16);
}

/* Recurrence card */
.ucp-recurrence-card {
    background: var(--ucp-card-bg);
    border: 1px solid var(--ucp-border);
    border-left: 4px solid var(--ucp-primary);
    border-radius: var(--ucp-radius);
    padding: 16px;
    margin-bottom: 12px;
}

.ucp-recurrence-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ucp-recurrence-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.ucp-rec-days-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Recurrence badge on trip cards */
.ucp-trip-recurrence-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .7rem;
    font-weight: 700;
    color: var(--ucp-primary);
    background: var(--ucp-primary-light, rgba(27,175,82,.08));
    border-radius: 9999px;
    padding: 2px 8px;
}

.ucp-trip-recurrence-badge .material-symbols-outlined {
    font-size: 13px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* Dark mode */
[data-ucp-theme="dark"] .ucp-day-toggle {
    border-color: var(--ucp-border);
}

[data-ucp-theme="dark"] .ucp-day-toggle:has(.ucp-day-cb:checked) {
    background: rgba(27, 175, 82, .15);
}

[data-ucp-theme="dark"] .ucp-recurrence-card {
    background: var(--ucp-card-bg);
    border-color: var(--ucp-border);
    border-left-color: var(--ucp-primary);
}