/**
 * Custom Flatpickr Styling for Antra Theme
 * Architecture & Interior Design Aesthetic
 */

/* Main Container */
.flatpickr-calendar {
    background: #fff;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid #E3E3E8;
    border-radius: 20px;
    padding: 20px;
    font-family: var(--e-global-typography-text-font-family, 'Golos Text', sans-serif);
    margin-top: 10px;
    width: 340px !important;
    z-index: 99999 !important;
}

.flatpickr-calendar:before,
.flatpickr-calendar:after {
    display: none !important;
}

/* Header & Month Navigation */
.flatpickr-months {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    margin-bottom: 15px !important;
}

.flatpickr-month {
    flex: 1 !important;
    height: 40px !important;
    text-align: center !important;
}

.flatpickr-current-month {
    font-family: var(--e-global-typography-secondary-font-family, 'Cal Sans', sans-serif) !important;
    font-weight: 400 !important;
    font-size: 105% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important; /* Reduced padding */
}

/* Month Dropdown styling */
.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-family: var(--e-global-typography-accent-font-family, 'Golos Text', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    appearance: none;
    background-color: #fff !important;
    border: 1px solid #E3E3E8 !important;
    border-radius: 12px !important;
    padding: 6px 30px 6px 15px !important;
    margin-right: 8px !important;
    cursor: pointer;
    height: 38px !important;
    color: var(--e-global-color-secondary, #1C1C1D) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23CAA05C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    border-color: var(--e-global-color-primary, #CAA05C) !important;
    box-shadow: 0 5px 15px rgba(202, 160, 92, 0.08) !important;
    transform: translateY(-1px);
}

/* Year Input */
.flatpickr-current-month .numInputWrapper {
    width: 75px !important;
    margin-left: 5px !important;
}

.flatpickr-current-month input.cur-year {
    font-family: var(--e-global-typography-secondary-font-family, 'Cal Sans', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    color: var(--e-global-color-secondary, #1C1C1D) !important;
    padding: 0 !important;
    height: auto !important;
    letter-spacing: 0.5px !important;
}

.numInputWrapper span {
    display: none !important;
}

/* Navigation Arrows */
.flatpickr-prev-month,
.flatpickr-next-month {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 34px !important;
    width: 34px !important;
    background: #f6f6f6 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: transparent !important; /* Hide default text arrows if any */
}

.flatpickr-prev-month { left: 0 !important; }
.flatpickr-next-month { right: 0 !important; }

/* CSS-based Arrows to replace SVGs that won't show */
.flatpickr-prev-month::after,
.flatpickr-next-month::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #1C1C1D;
    border-left: 2px solid #1C1C1D;
    transition: border-color 0.2s;
}

.flatpickr-prev-month::after {
    transform: rotate(-45deg);
    margin-left: 3px;
}

.flatpickr-next-month::after {
    transform: rotate(135deg);
    margin-right: 3px;
}

/* Hide the original SVGs as they are unreliable in this environment */
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    display: none !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: var(--e-global-color-primary, #CAA05C) !important;
}

.flatpickr-prev-month:hover::after,
.flatpickr-next-month:hover::after {
    border-color: #fff !important;
}

/* Weekdays */
.flatpickr-weekdays {
    height: 28px !important;
    margin-bottom: 5px;
}

span.flatpickr-weekday {
    font-family: var(--e-global-typography-text-font-family, 'Golos Text', sans-serif);
    color: var(--e-global-color-lighter, #9F9FA4);
    font-weight: 500;
    font-size: 13px;
    text-transform: none;
}

/* Days Container */
.flatpickr-days {
    width: 100% !important;
}

.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* Individual Day */
.flatpickr-day {
    border-radius: 50% !important;
    color: var(--e-global-color-text, #59585D);
    border: 1px solid transparent !important;
    transition: all 0.2s ease;
    height: 39px;
    line-height: 37px;
    max-width: 39px;
    margin: 2px auto;
}

.flatpickr-day:hover {
    background: #F6F6F6 !important;
    border-color: #F6F6F6 !important;
    color: var(--e-global-color-secondary, #1C1C1D) !important;
}

/* Today highlight */
.flatpickr-day.today {
    border-color: var(--e-global-color-primary, #CAA05C) !important;
    color: var(--e-global-color-primary, #CAA05C) !important;
    background: transparent !important;
}

.flatpickr-day.today:hover {
    background: var(--e-global-color-primary, #CAA05C) !important;
    color: #fff !important;
}

/* Selected highlight */
.flatpickr-day.selected {
    background: var(--e-global-color-primary, #CAA05C) !important;
    border-color: var(--e-global-color-primary, #CAA05C) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(202, 160, 92, 0.4) !important;
}

/* Input Field Integration */
input.antra-flatpickr-active {
    border-color: var(--e-global-color-border, #E3E3E8) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23CAA05C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    padding-right: 50px !important;
}

input.antra-flatpickr-active:focus {
    border-color: var(--e-global-color-primary, #CAA05C) !important;
    box-shadow: 0 0 0 4px rgba(202, 160, 92, 0.1) !important;
}