/**
 * WCPC Date Picker Widget Styles
 * Companion to booking-date-picker.js
 */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */

.wcpc-dp-wrapper {
    font-family: inherit;
    font-size: 15px;
    color: #1a1a1a;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* Left column: list + staging + picker — grows with content, stays reasonable */
.wcpc-dp-left {
    flex: 1;
    min-width: 240px;
}

/* Right column: multi-month calendar — capped so 3 months feel comfortable */
.wcpc-dp-right {
    flex: 1;
    min-width: 0;
    max-width: 560px;
}

@media (max-width: 600px) {
    .wcpc-dp-wrapper {
        flex-direction: column;
    }
    .wcpc-dp-left {
        max-width: 100%;
    }
    .wcpc-dp-right {
        max-width: 100%;
    }
}

/* ── Labels ───────────────────────────────────────────────────────────────── */

.wcpc-dp-label {
    display: block;
    font-size: 16px;
    font-weight: 400;
    font-family: "Open Sans", sans-serif;
    color: #000;
    margin-bottom: 6px;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Inputs ───────────────────────────────────────────────────────────────── */

.wcpc-dp-input {
    display: block;
    width: 100%;
    padding: 12px;
    border: 1px solid #eaeaea;
    border-radius: 0;
    font-size: 16px;
    font-family: "Open Sans", sans-serif;
    color: #000;
    background: #fafafa;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.wcpc-dp-input:focus {
    outline: none;
    border-color: #34657f;
    box-shadow: none;
}

/* ── Bottom row: date input + recurrence toggle side by side ─────────────── */

.wcpc-dp-bottom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.wcpc-dp-anchor-row {
    flex: 1;
    min-width: 0;
}

/* The altInput flatpickr creates should look like a dashed "add" field */
.wcpc-dp-input--add,
.wcpc-dp-anchor-row .flatpickr-input.flatpickr-mobile,
.wcpc-dp-anchor-row input.form-control {
    border: 1.5px dashed #d0d5dd !important;
    background: #fafafa !important;
    color: #6b7280 !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    cursor: pointer;
}

.wcpc-dp-input--add:hover,
.wcpc-dp-anchor-row input.form-control:hover {
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
}

/* ── Recurrence toggle ────────────────────────────────────────────────────── */

.wcpc-dp-recurrence-toggle-row {
    flex-shrink: 0;
    margin-bottom: 0;
}

.wcpc-dp-recurrence-toggle {
    background: #f0f4f8 !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    color: #374151 !important;
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.wcpc-dp-recurrence-toggle:hover {
    background: #e0e7ef !important;
    border-color: #94a3b8 !important;
    color: #1e40af !important;
}

.wcpc-dp-recurrence-toggle--open {
    background: #dbeafe !important;
    border-color: #3b82f6 !important;
    color: #1e40af !important;
}

/* ── Recurrence panel ─────────────────────────────────────────────────────── */

.wcpc-dp-recurrence-panel {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin-top: 8px;
    margin-bottom: 16px;
}

.wcpc-dp-recurrence-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Day of week buttons */

.wcpc-dp-day-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wcpc-dp-day-label-text {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Frequency selector (Weekly / Monthly) ────────────────────────────────── */

.wcpc-dp-freq-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wcpc-dp-freq-buttons {
    display: flex;
    gap: 6px;
}

.wcpc-dp-freq-btn {
    padding: 6px 18px !important;
    border-radius: 20px !important;
    border: 1.5px solid #d0d5dd !important;
    background: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    box-shadow: none !important;
}

.wcpc-dp-freq-btn:hover {
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
    background: #fff !important;
}

.wcpc-dp-freq-btn--active {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #fff !important;
}

/* ── Monthly week-position buttons (1st/2nd/3rd/4th/Last) ─────────────────── */

.wcpc-dp-week-row,
.wcpc-dp-monthday-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wcpc-dp-week-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Week-position buttons are pill-shaped to distinguish from circular day buttons */
.wcpc-dp-week-btn {
    width: auto !important;
    height: auto !important;
    border-radius: 20px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
}

/* ── Section labels (shared) ──────────────────────────────────────────────── */

.wcpc-dp-section-label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wcpc-dp-day-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.wcpc-dp-day-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1.5px solid #d0d5dd !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.wcpc-dp-day-btn:hover {
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
    background: #fff !important;
}

.wcpc-dp-day-btn--active {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #fff !important;
}

.wcpc-dp-day-btn--active:hover {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}

/* End date row */

.wcpc-dp-end-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Action buttons inside panel */

.wcpc-dp-recurrence-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.wcpc-dp-btn {
    padding: 8px 18px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    border: 1.5px solid transparent !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.wcpc-dp-btn--primary {
    background: #3b82f6 !important;
    color: #fff !important;
    border-color: #3b82f6 !important;
}

.wcpc-dp-btn--primary:hover {
    background: #2563eb !important;
    border-color: #2563eb !important;
}

.wcpc-dp-btn--ghost {
    background: none !important;
    color: #6b7280 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-weight: 400 !important;
    font-size: 13px !important;
}

.wcpc-dp-btn--ghost:hover {
    color: #ef4444 !important;
    background: none !important;
}

/* ── Date list ────────────────────────────────────────────────────────────── */

.wcpc-dp-date-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.wcpc-dp-empty {
    font-size: 14px;
    color: #9ca3af;
    margin: 0;
    padding: 4px 0;
}

.wcpc-dp-date-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    transition: background 0.2s;
}

.wcpc-dp-date-text {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: #1a1a1a;
}

.wcpc-repeat-icon {
    color: #6b7280;
    flex-shrink: 0;
    position: relative;
    top: 1px;
}

.wcpc-dp-remove-btn {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    transition: color 0.15s;
    flex-shrink: 0;
}

.wcpc-dp-remove-btn:hover {
    color: #ef4444;
}

/* ── New-date highlight animation ─────────────────────────────────────────── */

@keyframes wcpc-date-added {
    0%   {
        background-color: #dbeafe;  /* soft blue */
        border-color: #93c5fd;
    }
    70%  {
        background-color: #dbeafe;
        border-color: #93c5fd;
    }
    100% {
        background-color: #f1f5f9;  /* matches normal state */
        border-color: #e2e8f0;
    }
}

.wcpc-dp-date-entry--new {
    animation: wcpc-date-added 1.2s ease-out forwards;
}

/* ── altInput override for anchor (flatpickr replaces the original input) ─── */

/* flatpickr's generated altInput inherits .wcpc-dp-input but we want the
   dashed "add" appearance. Target it via the sibling hidden original. */
.wcpc-dp-anchor-row .flatpickr-input[type="hidden"] + input,
.wcpc-dp-anchor-row .flatpickr-input.flatpickr-mobile {
    border: 1.5px dashed #d0d5dd !important;
    background: #fafafa !important;
    color: #6b7280 !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.wcpc-dp-anchor-row .flatpickr-input[type="hidden"] + input:hover {
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
}

/* ── Staging area ─────────────────────────────────────────────────────────── */

.wcpc-dp-staging-area {
    border: 1.5px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    padding: 12px 14px;
    margin-bottom: 10px;
}

.wcpc-dp-staging-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.wcpc-dp-staged-date {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1.5px solid #93c5fd;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 600;
    color: #1e40af;
    flex: 1;
    min-width: 0;
}

.wcpc-dp-staged-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Recurrence toggle inside staging area — inherits existing styles,
   but override margin/flex so it sits naturally in the header row */
.wcpc-dp-staging-header .wcpc-dp-recurrence-toggle {
    flex-shrink: 0;
}

/* ── Commit button ────────────────────────────────────────────────────────── */

.wcpc-dp-commit-btn {
    display: block;
    width: 100%;
    padding: 10px 18px !important;
    border-radius: 6px !important;
    border: none !important;
    background: #2563eb !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    transition: background 0.15s;
    box-shadow: none !important;
    margin-top: 12px;
}

.wcpc-dp-commit-btn:hover {
    background: #1d4ed8 !important;
}

/* ── Mini calendar panel ──────────────────────────────────────────────────── */

.wcpc-cal-panel {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    position: sticky;
    top: 20px;
    font-family: "Open Sans", sans-serif;
}

/* Header: month name + prev/next navigation */
.wcpc-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 10px;
    background: #34657f;
    color: #fff;
}

.wcpc-cal-month-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.wcpc-cal-nav {
    background: none !important;
    border: none !important;
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1 !important;
    cursor: pointer;
    padding: 0 6px !important;
    border-radius: 4px !important;
    opacity: 0.75;
    transition: opacity 0.15s, background 0.15s;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}

.wcpc-cal-nav:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.18) !important;
}

/* 7-column day grid */
.wcpc-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 8px 6px 4px;
    gap: 1px 0;
}

/* Day-of-week headers */
.wcpc-cal-dow {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 4px;
}

/* Individual day cells */
.wcpc-cal-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    color: #374151;
    border-radius: 50%;
    cursor: default;
    user-select: none;
}

.wcpc-cal-cell.wcpc-cal-empty {
    /* blank filler cell */
}

/* Today: underline indicator */
.wcpc-cal-cell.wcpc-cal-today {
    font-weight: 700;
    color: #34657f;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 3-column month grid — narrows responsively. Viewport breakpoints work because
   the right column tracks overall page width closely. */
.wcpc-cal-months {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 16px;
    padding: 10px 12px 4px;
}

@media (max-width: 480px) {
    .wcpc-cal-months { grid-template-columns: 1fr; }
}

/* Per-month block: label above the 7-column grid */
.wcpc-cal-month-block {
    min-width: 0;
}

.wcpc-cal-month-name {
    font-size: 10.5px;
    font-weight: 700;
    color: #34657f;
    text-align: center;
    padding: 0 0 5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Past dates: dimmed, not interactive */
.wcpc-cal-cell.wcpc-cal-past {
    color: #8ea8b8;
    cursor: default;
    opacity: 0.55;
}

/* Free (future, uncommitted) dates: pointer + hover highlight */
.wcpc-cal-cell:not(.wcpc-cal-empty):not(.wcpc-cal-past):not(.wcpc-cal-selected):not(.wcpc-cal-preview) {
    cursor: pointer;
}

.wcpc-cal-cell:not(.wcpc-cal-empty):not(.wcpc-cal-past):not(.wcpc-cal-selected):not(.wcpc-cal-preview):hover {
    background: #dbeafe;
    border-radius: 50%;
}

/* Committed date: solid fill — also clickable */
.wcpc-cal-cell.wcpc-cal-selected {
    background: #34657f;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.wcpc-cal-cell.wcpc-cal-selected:hover {
    background: #2a536a;
}

.wcpc-cal-cell.wcpc-cal-selected.wcpc-cal-today {
    background: #34657f;
    text-decoration: none;
    outline: 2px solid #f59e0b;
    outline-offset: 1px;
}

/* Staged / preview date: light tint (not yet committed) */
.wcpc-cal-cell.wcpc-cal-preview {
    background: #dbeafe;
    color: #1e40af;
    font-weight: 600;
}

.wcpc-cal-cell.wcpc-cal-preview.wcpc-cal-today {
    text-decoration: none;
    outline: 2px solid #f59e0b;
    outline-offset: 1px;
}

/* Footer: date count / status */
.wcpc-cal-footer {
    font-size: 11px;
    color: #6b7280;
    text-align: center;
    padding: 6px 10px 8px;
    border-top: 1px solid #f0f4f8;
    line-height: 1.4;
}

.wcpc-cal-footer--empty {
    font-style: italic;
    color: #aaa;
}

/* ── Click-to-highlight pulse on date list entries ────────────────────────── */

@keyframes wcpc-entry-pulse {
    0%   { background: #f1f5f9; border-color: #e2e8f0; box-shadow: none; }
    30%  { background: #dbeafe; border-color: #34657f; box-shadow: 0 0 0 3px rgba(52,101,127,0.18); }
    100% { background: #f1f5f9; border-color: #e2e8f0; box-shadow: none; }
}

.wcpc-dp-date-entry--pulse {
    animation: wcpc-entry-pulse 0.9s ease-out forwards;
}