/**
 * Date Picker Styling Fixes for kakofloral.com
 * Date: 2026-01-30
 *
 * Issue 1: "Select Date" button should be inside the date field box
 * Issue 2: Calendar should only show dates from 1 week from now
 */

/* ==========================================================================
   DATE PICKER FIELD STYLING
   Position the "Select Date" button inside the input field container
   ========================================================================== */

/* Container for the date field - make it a flex container */
.field.date .control {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

/* The date input field */
.field.date .control input.datetime-picker {
    flex: 1;
    min-width: 0;
    padding-right: 110px; /* Make room for the button */
    border-radius: 4px;
    border: 1px solid #ccc;
    height: 44px;
    padding-left: 12px;
}

/* The "Select Date" button - position inside the input */
.field.date .control .ui-datepicker-trigger {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    height: auto;
    min-height: 42px;
    padding: 8px 15px;
    margin: 0;
    border: none;
    border-left: 1px solid #ccc;
    border-radius: 0 3px 3px 0;
    background-color: #f5f5f5;
    color: #333;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.field.date .control .ui-datepicker-trigger:hover {
    background-color: #e8e8e8;
}

.field.date .control .ui-datepicker-trigger span {
    display: inline;
}

/* Hide the calendar icon image if present */
.field.date .control .ui-datepicker-trigger img {
    display: none;
}

/* Ensure the script tag doesn't affect layout */
.field.date .control script {
    display: none;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 767px) {
    .field.date .control input.datetime-picker {
        padding-right: 100px;
        font-size: 16px; /* Prevent iOS zoom */
    }

    .field.date .control .ui-datepicker-trigger {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* ==========================================================================
   DATEPICKER POPUP STYLING IMPROVEMENTS
   ========================================================================== */

.ui-datepicker {
    z-index: 9999 !important;
}

/* Style disabled/unavailable dates */
.ui-datepicker td.ui-state-disabled {
    opacity: 0.4;
}

.ui-datepicker td.ui-state-disabled span {
    color: #999;
}