/* ==============================================
   Life Horoscope - WCPA DOB / DateTime Picker UI
   ============================================== */

/* Hide native browser datetime picker on any leftover basic inputs */
.wcpa_form_outer input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.wcpa_form_outer input[type="date"]::-webkit-calendar-picker-indicator,
.wcpa_form_outer input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Custom picker text input (flatpickr altInput / readonly) */
.wcpa_form_outer .wcpa_type_datetime-local input,
.wcpa_form_outer .wcpa_type_date input,
.wcpa_form_outer .wcpa_type_time input,
.wcpa_form_outer .wcpa-fp-input,
.wcpa_form_outer input.wcpa-fp-input {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 44px 0 16px !important;
    font-size: 15px !important;
    color: #34495e !important;
    background: #f9fafc 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='%23c0392b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat right 14px center !important;
    background-size: 20px !important;
    border: 1.5px solid #dce1e7 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.wcpa_form_outer .wcpa_type_datetime-local input:focus,
.wcpa_form_outer .wcpa_type_date input:focus,
.wcpa_form_outer .wcpa-fp-input:focus {
    border-color: #c0392b !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12) !important;
    outline: none !important;
}

/* Popup calendar - Life Horoscope brand */
.wcpa-fp-outer {
    border-radius: 14px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #e8ecf1 !important;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.wcpa-fp-outer .wcpa-fp-day.selected,
.wcpa-fp-outer .wcpa-fp-day.startRange,
.wcpa-fp-outer .wcpa-fp-day.endRange,
.wcpa-fp-outer .wcpa-fp-day.selected:hover,
.wcpa-fp-outer .wcpa-fp-day.startRange:hover,
.wcpa-fp-outer .wcpa-fp-day.endRange:hover {
    background: #c0392b !important;
    border-color: #c0392b !important;
    color: #ffffff !important;
}

.wcpa-fp-outer .wcpa-fp-day.today {
    color: #c0392b !important;
    font-weight: 700 !important;
}

.wcpa-fp-outer .wcpa-fp-day.today:hover,
.wcpa-fp-outer .wcpa-fp-day.today:focus {
    background: #fdecea !important;
    border-color: #fdecea !important;
    color: #c0392b !important;
}

.wcpa-fp-outer .wcpa-fp-day:hover,
.wcpa-fp-outer .wcpa-fp-day:focus {
    background: #fdecea !important;
    border-color: #fdecea !important;
}

.wcpa-fp-outer ul li.selected {
    background: #fdecea !important;
    color: #c0392b !important;
    font-weight: 600 !important;
}

/* Month + year header.
   The picker is rendered inside the product form, so it inherits the form's
   field sizing. Give the month dropdown and year box their own compact sizing
   and enough room in the header bar, otherwise they get clipped out of sight. */
.wcpa-fp-outer .wcpa-fp-months,
.wcpa-fp-outer .wcpa-fp-months .wcpa-fp-month {
    height: auto !important;
    min-height: 32px !important;
    overflow: visible !important;
}

.wcpa-fp-outer .wcpa-fp-current-month {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: auto !important;
    padding: 0 !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
}

.wcpa-fp-outer .wcpa-fp-current-month select.wcpa-fp-monthDropdown-months,
.wcpa-fp-outer .wcpa-fp-current-month input.cur-year {
    display: inline-block !important;
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    border: 1.5px solid #dce1e7 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #2c3e50 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    clip: auto !important;
    cursor: pointer !important;
}

.wcpa-fp-outer .wcpa-fp-current-month input.cur-year {
    width: 6.5ch !important;
    text-align: center !important;
    cursor: text !important;
    -moz-appearance: textfield !important;
}

.wcpa-fp-outer .wcpa-fp-current-month .numInputWrapper {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
}

/* Arrows sit over the year box, so keep the header clear of them */
.wcpa-fp-outer .wcpa-fp-months .wcpa-fp-prev-month,
.wcpa-fp-outer .wcpa-fp-months .wcpa-fp-next-month {
    z-index: 5 !important;
}

.wcpa-fp-outer .wcpa-fp-time-wrap {
    border-color: #e8ecf1 !important;
    border-radius: 0 0 14px 14px !important;
}

.wcpa-fp-outer .wcpa-fp-time .wcpa-fp-time-wrap-mob select {
    border: 1.5px solid #dce1e7 !important;
    border-radius: 8px !important;
    min-height: 44px !important;
    font-size: 15px !important;
    padding: 8px 12px !important;
    background: #f9fafc !important;
}

/* Mobile: stack calendar + time vertically, full width */
@media (max-width: 520px) {
    .wcpa-fp-outer {
        width: calc(100vw - 24px) !important;
        max-width: 360px !important;
        left: 12px !important;
        right: auto !important;
    }

    .wcpa-fp-outer .wrap {
        flex-direction: column !important;
    }

    .wcpa-fp-calendar {
        max-width: 100% !important;
        padding: 16px !important;
    }

    .wcpa-fp-outer .wcpa-fp-time-wrap {
        width: 100% !important;
        border-left: none !important;
        border-top: 1px solid #e8ecf1 !important;
    }
}