/* LissWood OrderV2 — vanilla datepicker (port of the template's shadcn/react-day-picker
   calendar; see LissWoodFeRedesign components/ui/calendar.tsx + landing-page.tsx).
   Standalone stylesheet on purpose: not part of the Tailwind build, themed via the
   same CSS tokens as order-v2.css so wedding/other themes work automatically. */

[data-v2-datepicker] {
    position: relative;
}

/* ── Trigger (the field) — mirrors the template's date trigger button ── */
.v2dp-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border));
    background: hsl(210 20% 98%);
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.v2dp-trigger.v2dp-has-value {
    color: hsl(var(--foreground));
    font-weight: 500;
}

.v2dp-trigger.v2dp-open {
    border-color: hsl(var(--primary));
}

.v2dp-trigger.v2dp-invalid {
    border-color: hsl(var(--destructive));
}

.v2dp-trigger-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: hsl(var(--muted-foreground));
}

/* ── Calendar panel (inline card below the trigger, like the template modal) ── */
.v2dp-panel {
    margin-top: 0.5rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    overflow: hidden;
    padding: 0.75rem;
}

.v2dp-panel.v2dp-hidden {
    display: none;
}

/* react-day-picker: --cell-size: 2rem, w-fit, mx-auto */
.v2dp-cal {
    width: fit-content;
    margin: 0 auto;
}

/* ── Header: centered caption, absolute prev/next (rdp nav) ── */
.v2dp-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
}

.v2dp-caption {
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    user-select: none;
}

.v2dp-nav-btn {
    position: absolute;
    top: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: hsl(var(--foreground));
    cursor: pointer;
    padding: 0;
}

.v2dp-nav-btn:hover {
    background: hsl(var(--secondary));
}

.v2dp-nav-btn svg {
    width: 1rem;
    height: 1rem;
}

.v2dp-nav-prev { left: 0; }
.v2dp-nav-next { right: 0; }

/* ── Weekday header ── */
.v2dp-weekdays {
    display: flex;
    margin-top: 0.25rem;
}

.v2dp-weekday {
    flex: 1;
    min-width: 2rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 400;
    color: hsl(var(--muted-foreground));
    user-select: none;
}

/* ── Day grid ── */
.v2dp-week {
    display: flex;
    margin-top: 0.5rem;
}

.v2dp-day {
    flex: 1;
    min-width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    padding: 0;
    font: inherit;
    font-size: 0.875rem;
    line-height: 1;
    color: hsl(var(--foreground));
    cursor: pointer;
    user-select: none;
}

.v2dp-day:hover:not(:disabled):not(.v2dp-selected) {
    background: hsl(var(--secondary));
}

.v2dp-day:disabled {
    color: hsl(var(--muted-foreground));
    opacity: 0.5;
    cursor: default;
}

.v2dp-day.v2dp-outside {
    color: hsl(var(--muted-foreground));
}

.v2dp-day.v2dp-today {
    background: hsl(var(--secondary));
}

.v2dp-day.v2dp-selected {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}