/* ==========================================================================
   CUSTOM STYLES FOR FLORIAL DELIVERY DATETIME BLOCK
   
   This file contains customizable styles that you can modify to match
   your theme and design preferences. This file is separate from the
   main plugin styles so your changes won't be overwritten during updates.
   ========================================================================== */

/* CUSTOM COLOR SCHEME
   Modify these CSS variables to quickly change the entire color scheme */
   :root {
    --florial-primary-color: #007cba;
    --florial-success-color: #46b450;
    --florial-error-color: #dc3232;
    --florial-background-color: #fff;
    --florial-border-color: #e0e0e0;
    --florial-text-color: #333;
}

/* CONTAINER CUSTOMIZATIONS */
.florial-delivery-datetime {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: inherit !important;
}

/* REMOVE ALL COLORS */
.florial-field input[type="text"],
.florial-field select {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}

.florial-field input[type="text"]:focus,
.florial-field select:focus {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.florial-field input[type="text"]:hover,
.florial-field select:hover {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Remove validation colors */
.florial-field.error input,
.florial-field.error select {
    border-color: transparent !important;
    box-shadow: none !important;
}

.florial-field.success input,
.florial-field.success select {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Hide error messages */
.florial-error-message {
    display: none !important;
}

/* Hide success messages */
.florial-success-message {
    display: none !important;
}

/* DISABLE LOADING OVERLAY */
.florial-delivery-datetime.loading {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.florial-delivery-datetime.loading:after {
    display: none !important;
}

/* MAKE TEXT VISIBLE */
.florial-delivery-datetime h3,
.florial-field label {
    color: #333 !important;
    font-weight: 300;
}

.florial-field label {
    margin-bottom: 0 !important;   
}

.florial-field input[type="text"],
.florial-field select {
    color: #333 !important;
}

/* FLATPICKR CUSTOM STYLING */
.florial-field input[type="text"] {
    /* Basic input styling for date picker */
    font-size: 14px !important;
    width: 100% !important;
    cursor: pointer !important;
    font-weight: 400;
}

.florial-field {
    background-color: #f6f4f2;
    padding: 8px;
}

.florial-field input,
.florial-field select {
    background-color: none;
    height: 40px;
    padding: 4px 10px;
}

/* Flatpickr calendar customization */
.flatpickr-calendar {
    font-family: inherit !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    border: none !important;
}

.flatpickr-calendar.open {
    z-index: 9999 !important;
}

/* Make flatpickr responsive */
@media (max-width: 768px) {
    .flatpickr-calendar {
        width: 90vw !important;
        max-width: 320px !important;
    }
}

/* TITLE CUSTOMIZATIONS */
.florial-delivery-datetime h3 {
    /* Customize the title styling */
    font-family: 'Helvetica', Arial, sans-serif;
    letter-spacing: 0.5px;
    /* color: var(--florial-primary-color); */
    /* border-bottom: 2px solid var(--florial-border-color); */
    /* padding-bottom: 10px; */
}

/* FIELD CUSTOMIZATIONS */
.florial-field input[type="text"],
.florial-field select {
    /* Customize input field styling */
    border-radius: 8px;
    /* font-family: 'Georgia', serif; */
    /* background: #f9f9f9; */
}

/* CUSTOM HOVER EFFECTS */
.florial-field input[type="text"]:hover,
.florial-field select:hover {
    /* transform: translateY(-1px); */ /* Subtle lift effect */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
}

/* MOBILE CUSTOMIZATIONS */
@media (max-width: 768px) {
    .florial-delivery-datetime {
        /* border-radius: 0; */ /* Remove border radius on mobile */
        /* margin: 0 -15px; */ /* Full width on mobile */
    }
}

/* THEME-SPECIFIC CUSTOMIZATIONS */

/* For Twenty Twenty-Three theme */
.wp-block-group .florial-delivery-datetime {
    /* margin-top: 2rem; */
}

/* For WooCommerce Storefront theme */
.storefront .florial-delivery-datetime {
    /* border: 2px solid #efefef; */
}

/* For Astra theme */
.ast-container .florial-delivery-datetime {
    /* font-family: inherit; */
}

/* ADVANCED CUSTOMIZATIONS */

/* Custom loading animation */
.florial-delivery-datetime.loading:after {
    /* border-color: var(--florial-primary-color); */
    /* border-top-color: transparent; */
}

/* CUSTOM ICONS (using CSS) */
/* Uncomment and modify these if you want custom icons instead of emojis */

/*
.florial-delivery-datetime h3:before {
    content: "";
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMgN0g3VjNINVY1SDNWNyIgZmlsbD0iYmxhY2siLz4KPC9zdmc+');
    width: 20px;
    height: 20px;
    background-size: contain;
    margin-right: 8px;
}

.florial-field label[for*="date"]:before {
    content: "";
    background-image: url('calendar-icon.svg');
    width: 16px;
    height: 16px;
    background-size: contain;
}

.florial-field label[for*="time"]:before {
    content: "";
    background-image: url('clock-icon.svg');
    width: 16px;
    height: 16px;
    background-size: contain;
}
*/

/* PRINT STYLES */
@media print {
    .florial-delivery-datetime {
        border: 1px solid #000;
        box-shadow: none;
        background: #fff;
    }
}

/* ACCESSIBILITY ENHANCEMENTS */
@media (prefers-reduced-motion: reduce) {
    .florial-delivery-datetime * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 
   CUSTOM DATE PICKER OPTION
   ========================
   
   If you want full control over the calendar appearance, you can replace 
   the native date picker with a JavaScript library like:
   
   1. Flatpickr (lightweight): https://flatpickr.js.org/
   2. Pikaday (simple): https://pikaday.com/
   3. Date Range Picker: https://www.daterangepicker.com/
   
   To implement:
   1. Hide the native input: .florial-field input[type="text"] { display: none; }
   2. Add the library to your theme
   3. Replace with custom HTML + JS
   
   Example with Flatpickr:
   <input type="text" id="delivery_date_custom" placeholder="Select date">
   
   $('.delivery_date_custom').flatpickr({
       dateFormat: "Y-m-d",
       minDate: "today",
       theme: "material_blue"  // or your custom theme
   });
*/

/* 
   ADD YOUR CUSTOM STYLES BELOW THIS LINE
   ====================================== 
*/

/* Custom Florial Delivery DateTime Styles */

/* Remove focus/active borders */
#delivery_date:focus,
#delivery_date:active,
.flatpickr-input:focus,
.flatpickr-input:active {
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Override Flatpickr blue theme with custom brown color #603a16 */

/* Calendar header (month/year selector) */
.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    background-color: #603a16 !important;
    color: white !important;
}

/* Month and year text */
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper input {
    background-color: #603a16 !important;
    color: white !important;
}

/* Navigation arrows */
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: white !important;
}

/* Weekday headers */
.flatpickr-weekdays {
    background-color: #603a16 !important;
}

.flatpickr-weekday {
    background-color: #603a16 !important;
    color: white !important;
}

/* Today's date highlight */
.flatpickr-day.today {
    background-color: #603a16 !important;
    color: white !important;
    border-color: #603a16 !important;
}

/* Selected date */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background-color: #603a16 !important;
    color: white !important;
    border-color: #603a16 !important;
}

/* Hovered date */
.flatpickr-day:hover {
    background-color: rgba(96, 58, 22, 0.3) !important;
    color: #603a16 !important;
    border-color: #603a16 !important;
}

/* Range dates (if applicable) */
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange {
    background-color: rgba(96, 58, 22, 0.2) !important;
    color: #603a16 !important;
    border-color: #603a16 !important;
}

/* Start and end range dates */
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background-color: #603a16 !important;
    color: white !important;
    border-color: #603a16 !important;
}

/* Active/focused day */
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: none !important;
}

/* Time picker (if enabled) */
.flatpickr-time {
    border-top-color: #603a16 !important;
}

.flatpickr-calendar:after {
    border-bottom-color: #603a16 !important;
}

.flatpickr-time .numInputWrapper span.arrowUp:after,
.flatpickr-time .numInputWrapper span.arrowDown:after {
    border-bottom-color: #603a16 !important;
    border-top-color: #603a16 !important;
}

/* Remove any blue remnants */
.flatpickr-calendar * {
    color: inherit;
}

/* Ensure calendar container has proper styling */
.flatpickr-calendar {
    border: 1px solid #603a16 !important;
}

/* Make sure disabled dates don't interfere */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
    color: #ccc !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

/* Month dropdown */
.flatpickr-monthDropdown-months option {
    background-color: #603a16 !important;
    color: white !important;
}

/* Input field border when calendar is open */
.flatpickr-input.open {
    border-color: #603a16 !important;
}