/**
 * Gravity Forms Selectize Style Overrides
 * 
 * Based on Selectize Bootstrap 5 theme with GF compatibility
 */

/* ============================================================================
   HIDE ORIGINAL SELECT
   ========================================================================= */

.gfield-selectize-enabled select.selectized {
    position: absolute !important;
    left: -9999px !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ============================================================================
   SELECTIZE CONTAINER - MATCH GF INPUT STRUCTURE
   ========================================================================= */

.gfield-selectize-enabled .selectize-control {
    width: 100% !important;
    max-width: none !important;
    position: relative;
}

/* Remove GF's max-width constraints */
.gfield-selectize-enabled .ginput_container {
    max-width: none !important;
}

/* ============================================================================
   SELECTIZE INPUT - MATCH GF INPUT STYLING
   ========================================================================= */

.gfield-selectize-enabled .selectize-input {
    /* Match GF input dimensions */
    min-height: 38px !important;
    padding: 4px 12px !important;

    /* Match GF borders and colors */
    border: 1px solid #73767D !important;
    border-radius: 4px !important;
    background: #fff !important;

    /* Typography */
    font-size: 18px !important;
    line-height: 28px !important;
    color: #343a40 !important;

    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    width: 100% !important;
    box-sizing: border-box !important;

    /* Interaction */
    cursor: text !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}


.gform-theme--framework .gfield_error.gfield-selectize-enabled .selectize-input {
    border-color: var(--gf-ctrl-border-color-error) !important;
}

.gfield-selectize-enabled .selectize-input input[type="select-one"] {
    height: auto;
}

/* Multi-select padding adjustment */
.gfield-selectize-enabled .selectize-control.multi .selectize-input.has-items {
    padding: 4px 12px !important;
}

/* ============================================================================
   FOCUS STATE - MATCH GF FOCUS
   ========================================================================= */

.gfield-selectize-enabled .selectize-input.focus {
    border-color: var(--gf-ctrl-border-color-focus) !important;
    outline: 0 !important;
    box-shadow: 4px 0 0 0 #ced6ea, -4px 0 0 0 #ced6ea, 0 0 0 4px #ced6ea !important;
}

/* ============================================================================
   DROPDOWN ACTIVE STATE
   ========================================================================= */

.gfield-selectize-enabled .selectize-input.dropdown-active {
    border-radius: 4px 4px 0 0 !important;
    border-bottom-color: transparent !important;
}

.gfield-selectize-enabled .selectize-input.dropdown-active::before {
    display: none !important;
}

/* ============================================================================
   SELECTIZE DROPDOWN - MATCH GF STYLING
   ========================================================================= */

.gfield-selectize-enabled .selectize-dropdown {
    position: absolute !important;
    border: 1px solid #73767D !important;
    border-top: 0 none !important;
    border-radius: 0 0 4px 4px !important;
    background: #fff !important;
    box-shadow: 0 5px 0 0 transparent, 3px 1px 0 1px transparent, -3px 1px 0 1px transparent !important;
    z-index: 10000 !important;
    margin-top: -1px !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.gfield-selectize-enabled .selectize-dropdown.is-open {
    border-color: var(--gf-ctrl-border-color-focus) !important;
    box-shadow: 0 4px 0 0 #ced6ea, 2px 2px 0 2px #ced6ea, -2px 2px 0 2px #ced6ea !important;
}

.gfield_error.gfield-selectize-enabled .selectize-input + .selectize-dropdown.is-open {
    border-color: var(--gf-ctrl-border-color-error) !important;
}


/* Dropdown content scrolling */
.gfield-selectize-enabled .selectize-dropdown-content {
    max-height: 200px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 5px 0 !important;
}

/* ============================================================================
   DROPDOWN OPTIONS
   ========================================================================= */

.gfield-selectize-enabled .selectize-dropdown .option {
    padding: 4px 12px !important;
    cursor: pointer !important;
    color: #343a40 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* Hover state */
.gfield-selectize-enabled .selectize-dropdown .option:hover,
.gfield-selectize-enabled .selectize-dropdown .option.active:not(.selected) {
    background: #EBF1FF !important;
    color: #1e2125 !important;
}

/* Selected state */
.gfield-selectize-enabled .selectize-dropdown .option.selected,
.gfield-selectize-enabled .selectize-dropdown .option.active.selected {
    background: #3c5daa !important;
    color: #fff !important;
}

/* Disabled option */
.gfield-selectize-enabled .selectize-dropdown [data-disabled],
.gfield-selectize-enabled .selectize-dropdown .option.disabled {
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}

/* ============================================================================
   MULTI-SELECT ITEMS (TAGS) - MATCH GF PRIMARY COLOR
   ========================================================================= */

.gfield-selectize-enabled .multi .selectize-input .item {
    display: inline-flex !important;
    align-items: center !important;
    padding: 1px 5px !important;
    margin: 0 !important;
    background: #D3DBEE !important;
    color: #050505 !important;
    border: 1px solid #4A5C86 !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* Active item */
.gfield-selectize-enabled .multi .selectize-input .item.active {
    background: #D3DBEE !important;
    color: #050505 !important;
}

/* ============================================================================
   REMOVE BUTTON ON ITEMS
   ========================================================================= */

.gfield-selectize-enabled .selectize-control.plugin-remove_button .item {
    padding-right: 0 !important;
}

.gfield-selectize-enabled .selectize-control.plugin-remove_button .item .remove {
    color: inherit !important;
    text-decoration: none !important;
    display: inline-block !important;
    padding: 1px 5px !important;
    margin-left: 5px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 0 2px 2px 0 !important;
    cursor: pointer !important;
    background: transparent !important;
}

.gfield-selectize-enabled .selectize-control.plugin-remove_button .item .remove:hover {
    background: rgba(0, 0, 0, 0.1) !important;
}

/* ============================================================================
   INPUT FIELD INSIDE SELECTIZE
   ========================================================================= */

.gfield-selectize-enabled .selectize-input input {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    font-size: 18px !important;
    line-height: 28px !important;
    color: #343a40 !important;
    flex: 1 1 auto !important;
    min-width: 100px !important;
    outline: none !important;
}

.gfield-selectize-enabled .selectize-input input::placeholder {
    color: #6c757d !important;
    opacity: 1 !important;
}

/* ============================================================================
   DISABLED STATE
   ========================================================================= */

.gfield-selectize-enabled .selectize-input.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background-color: #f8f9fa !important;
    pointer-events: none !important;
}

.gfield-selectize-enabled .selectize-control.multi .selectize-input.disabled .item {
    background: #878787 !important;
    color: white !important;
    border-color: white !important;
}

/* ============================================================================
   VALIDATION ERROR STATE - MATCH GF ERROR STYLING
   ========================================================================= */

.gfield_error .gfield-selectize-enabled .selectize-input {
    border-color: #c02b0a !important;
    background-color: #fff !important;
}

.gfield_error .gfield-selectize-enabled .selectize-input.focus {
    border-color: #c02b0a !important;
    box-shadow: 0 0 0 0.25rem rgba(192, 43, 10, 0.25) !important;
}

/* ============================================================================
   SINGLE SELECT ARROW
   ========================================================================= */

.gfield-selectize-enabled .selectize-control.single .selectize-input:after {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='%23686E77'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: calc(50% - 8px) !important;
    transition: transform 300ms;
    right: calc(0.25rem + 5px) !important;
    margin-top: 0 !important;
    width: 16px !important;
    height: 16px !important;
    border: none !important;
}

.gfield-selectize-enabled .selectize-control.single .selectize-input.dropdown-active:after {
    margin-top: 0 !important;
    border: none !important;
    transform: rotate(180deg);
}

/* ============================================================================
   DRAG & DROP PLUGIN
   ========================================================================= */

.gfield-selectize-enabled .selectize-control.plugin-drag_drop .ui-sortable-helper {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

.gfield-selectize-enabled .selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
    visibility: visible !important;
    background: rgba(0, 0, 0, 0.06) !important;
    border: 0 none !important;
    box-shadow: inset 0 0 12px 4px #fff !important;
}

/* ============================================================================
   NO RESULTS / CREATE NEW
   ========================================================================= */

.gfield-selectize-enabled .selectize-dropdown .no-results,
.gfield-selectize-enabled .selectize-dropdown .create {
    padding: 3px 0.75rem !important;
    color: #6c757d !important;
}

.gfield-selectize-enabled .selectize-dropdown .create {
    font-style: italic !important;
    cursor: pointer !important;
}

.gfield-selectize-enabled .selectize-dropdown .create:hover {
    background: #EBF1FF !important;
    color: #1e2125 !important;
}

/* ============================================================================
   OPTGROUP STYLING
   ========================================================================= */

.gfield-selectize-enabled .selectize-dropdown .optgroup-header {
    padding: 3px 0.75rem !important;
    color: #6c757d !important;
    background: #fff !important;
    font-weight: 600 !important;
    cursor: default !important;
}

.gfield-selectize-enabled .selectize-dropdown .optgroup:before {
    display: block !important;
    height: 0 !important;
    margin: 0.5rem 0 !important;
    border-top: 1px solid #dee2e6 !important;
    margin-left: -0.75rem !important;
    margin-right: -0.75rem !important;
}

.gfield-selectize-enabled .selectize-dropdown .optgroup:first-child:before {
    display: none !important;
}

/* ============================================================================
   LOADING STATE
   ========================================================================= */

.gfield-selectize-enabled .selectize-input.loading::after {
    content: '' !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #3c5daa !important;
    border-right-color: transparent !important;
    border-radius: 50% !important;
    animation: selectize-spin 0.6s linear infinite !important;
    margin-left: 8px !important;
}

@keyframes selectize-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================================================
   MOBILE RESPONSIVENESS
   ========================================================================= */

@media screen and (max-width: 640px) {
    .gfield-selectize-enabled .selectize-input {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }

    .gfield-selectize-enabled .selectize-dropdown-content {
        max-height: 200px !important;
    }
}

/* ============================================================================
   HIGH SPECIFICITY OVERRIDES FOR STUBBORN GF STYLES
   ========================================================================= */

body .gform_wrapper .gform_body .gform_fields .gfield.gfield-selectize-enabled select.selectized {
    display: none !important;
    visibility: hidden !important;
}

body .gform_wrapper .gform_body .gform_fields .gfield.gfield-selectize-enabled .ginput_container {
    max-width: none !important;
}

body .gform_wrapper .gform_body .gform_fields .gfield.gfield-selectize-enabled .selectize-control {
    width: 100% !important;
}

/* Ensure dropdown appears above other elements */
body .gform_wrapper .selectize-dropdown {
    z-index: 10000 !important;
}