/**
 * Fix Multiple Dropdown Arrows Bug
 * Ensures only one arrow appears on select dropdowns
 */

/* Remove any ::after pseudo elements that might be adding extra arrows */
.tk-setting select::after,
.tk-setting select::before,
.tk-input-setting select::after,
.tk-input-setting select::before,
.tk-select::after,
.tk-select::before,
.tk-select p::after,
.tk-select p::before {
    display: none !important;
    content: none !important;
}

/* Ensure select elements only have one arrow from background-image */
.tk-setting select,
.tk-input-setting select {
    /* Reset any conflicting styles */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    
    /* Single arrow using background image */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5em 1.5em !important;
    padding-right: 3rem !important;
}

/* Different color on hover */
.tk-setting select:hover,
.tk-input-setting select:hover {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2310b981' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

/* Different color on focus */
.tk-setting select:focus,
.tk-input-setting select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23059669' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

/* Fix for any select wrappers that might have arrows */
.tk-select-wrap::after,
.tk-select-wrap::before,
.select-wrapper::after,
.select-wrapper::before {
    display: none !important;
}

/* Ensure no duplicate arrows from parent containers */
.tk-setting:has(select)::after,
.tk-setting:has(select)::before,
.tk-input-setting:has(select)::after,
.tk-input-setting:has(select)::before {
    display: none !important;
}

/* Remove arrows from any rich select elements */
.tk-rich-select p::after,
.tk-rich-select p::before {
    display: none !important;
}

/* Clean up select styling */
.tk-area-settings select {
    /* Ensure clean appearance */
    background-color: #ffffff !important;
    cursor: pointer !important;
}

/* RTL support - arrow on left */
[dir="rtl"] .tk-setting select,
[dir="rtl"] .tk-input-setting select {
    background-position: left 0.75rem center !important;
    padding-right: 1rem !important;
    padding-left: 3rem !important;
}