/* ============================================================
   SITS Search Widget – frontend styles
   All default colours live as CSS variables on the wrapper so
   Elementor's "clear colour" control can override them cleanly.
   ============================================================ */

/* ---------- Per-widget design tokens (all defaults here) ---------- */
.sitsel-search-widget {
    /* Input */
    --sitsel-input-color:           #333333;
    --sitsel-input-placeholder:     #9ca3af;
    --sitsel-input-bg:              #ffffff;
    --sitsel-input-border:          #e0e0e0;
    --sitsel-input-border-width:    2px;
    --sitsel-input-radius:          6px;
    --sitsel-input-font-size:       15px;
    --sitsel-input-padding:         12px 50px 12px 18px;

    /* Input focus (intentionally empty – inherits normal border when not set) */
    --sitsel-input-focus-border:    inherit;
    --sitsel-focus-border-width:    var(--sitsel-input-border-width);
    --sitsel-input-focus-shadow:    none;

    /* Button */
    --sitsel-btn-bg:                #4f46e5;
    --sitsel-btn-bg-hover:          #4338ca;
    --sitsel-btn-color:             #ffffff;
    --sitsel-btn-icon-size:         18px;
    --sitsel-btn-padding:           0 14px;
    --sitsel-btn-radius:            0 6px 6px 0;

    /* Dropdown */
    --sitsel-dropdown-bg:           #ffffff;
    --sitsel-dropdown-border:       #e5e7eb;
    --sitsel-result-title-color:    #111827;
    --sitsel-result-excerpt-color:  #6b7280;
    --sitsel-result-hover-bg:       #f5f3ff;

    position: relative;
    width: 100%;
    font-family: inherit;
    box-sizing: border-box;
}

/* ---------- Form ---------- */
.sitsel-search-form {
    display: flex;
    align-items: stretch;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* ---------- Input ---------- */
.sitsel-search-input {
    width: 100%;
    min-width: 0;
    padding: var(--sitsel-input-padding);
    font-size: var(--sitsel-input-font-size);
    line-height: 1.5;
    color: var(--sitsel-input-color);
    background-color: var(--sitsel-input-bg);
    border: var(--sitsel-input-border-width) solid var(--sitsel-input-border);
    border-radius: var(--sitsel-input-radius);
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.sitsel-search-input::placeholder {
    color: var(--sitsel-input-placeholder);
}

/* Focus – beats Elementor kit rule at any specificity level */
.sitsel-search-widget .sitsel-search-input:focus,
[class*="elementor-kit-"] .sitsel-search-widget .sitsel-search-input:focus {
    border-color:     var(--sitsel-input-focus-border);
    border-width:     var(--sitsel-focus-border-width);
    border-style:     solid;
    border-radius:    var(--sitsel-input-radius);
    background-color: var(--sitsel-input-bg);
    color:            var(--sitsel-input-color);
    box-shadow:       var(--sitsel-input-focus-shadow);
    outline:          none;
    outline-offset:   0;
    accent-color:     unset;
}

.sitsel-search-widget .sitsel-search-input:focus-visible,
[class*="elementor-kit-"] .sitsel-search-widget .sitsel-search-input:focus-visible {
    outline: none;
}

/* ---------- Submit button ---------- */
.sitsel-search-button {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    padding: var(--sitsel-btn-padding);
    background: var(--sitsel-btn-bg);
    border: none;
    border-radius: var(--sitsel-btn-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease, opacity 0.2s ease;
    color: var(--sitsel-btn-color);
    font-size: 16px;
    line-height: 1;
    min-width: 44px;
    box-sizing: border-box;
}

.sitsel-search-button:hover {
    background: var(--sitsel-btn-bg-hover);
    opacity: 0.95;
}

.sitsel-search-button svg {
    width: var(--sitsel-btn-icon-size);
    height: var(--sitsel-btn-icon-size);
    color: inherit;
    fill: currentColor;
    pointer-events: none;
    display: block;
    flex-shrink: 0;
}

.sitsel-search-button .elementor-icon          { color: inherit; }
.sitsel-search-button .elementor-icon svg,
.sitsel-search-button .elementor-icon i        { color: inherit; fill: currentColor; }
.sitsel-search-button .elementor-icon svg path,
.sitsel-search-button svg path                 { fill: currentColor; stroke: currentColor; }

.sitsel-search-button .sitsel-default-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sitsel-search-button .sitsel-custom-icon {
    width: var(--sitsel-btn-icon-size);
    height: var(--sitsel-btn-icon-size);
    display: block;
    object-fit: contain;
    pointer-events: none;
}

.sitsel-search-button.sitsel-icon-only { padding: var(--sitsel-btn-padding); }

/* ---------- Button text ---------- */
.sitsel-search-button-text {
    margin-left: 8px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Live-results dropdown ---------- */
.sitsel-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--sitsel-dropdown-bg);
    border: 1px solid var(--sitsel-dropdown-border);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    max-height: min(420px, 60vh);
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    display: none;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    box-sizing: border-box;
}

.sitsel-search-results::-webkit-scrollbar       { width: 5px; }
.sitsel-search-results::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

.sitsel-search-results.sitsel-results-open { display: block; }

/* ---------- Result item ---------- */
.sitsel-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s ease;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f3f4f6;
    min-width: 0;
    overflow: hidden;
}

.sitsel-result-item:last-child { border-bottom: none; }

.sitsel-result-item:hover,
.sitsel-result-item.sitsel-result-active {
    background: var(--sitsel-result-hover-bg);
}

/* Thumbnail */
.sitsel-result-thumb {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sitsel-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sitsel-result-thumb .sitsel-no-thumb { color: #9ca3af; font-size: 20px; }

/* Text */
.sitsel-result-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.sitsel-result-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--sitsel-result-title-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    margin-bottom: 2px;
    display: block;
}

.sitsel-result-excerpt {
    font-size: 12px;
    color: var(--sitsel-result-excerpt-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    display: block;
}

.sitsel-result-type-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ---------- Status / loading ---------- */
.sitsel-search-status {
    padding: 14px 16px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.sitsel-search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    font-size: 13px;
    color: #6b7280;
}

.sitsel-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #e5e7eb;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: sitsel-spin 0.65s linear infinite;
    flex-shrink: 0;
}

@keyframes sitsel-spin { to { transform: rotate(360deg); } }

/* ---------- "View all results" footer ---------- */
.sitsel-results-footer {
    display: block;
    text-align: center;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #4f46e5;
    border-top: 1px solid #f3f4f6;
    transition: background 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sitsel-results-footer:hover { background: #f5f3ff; color: #4338ca; }

/* ---------- Style variants ---------- */

/* Pill */
.sitsel-search-style-rounded .sitsel-search-input  { border-radius: 50px; padding-left: 22px; }
.sitsel-search-style-rounded .sitsel-search-button { border-radius: 0 50px 50px 0; }

/* Minimal underline */
.sitsel-search-style-minimal .sitsel-search-input {
    border: none;
    border-bottom: 2px solid var(--sitsel-input-border);
    border-radius: 0;
    padding-left: 4px;
    background: transparent;
}
.sitsel-search-style-minimal .sitsel-search-input:focus {
    border-bottom-color: var(--sitsel-input-focus-border);
    box-shadow: none;
}
.sitsel-search-style-minimal .sitsel-search-button {
    background: transparent;
    color: var(--sitsel-btn-bg);
    border-radius: 0;
}
.sitsel-search-style-minimal .sitsel-search-button:hover {
    background: transparent;
    color: var(--sitsel-btn-bg-hover);
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
    .sitsel-search-widget { width: 100%; }

    .sitsel-search-input {
        font-size: 14px;
        padding-right: 46px;
    }

    .sitsel-search-button-text              { display: none; }
    .sitsel-search-button.sitsel-icon-only,
    .sitsel-search-button                   { padding: 0 12px; min-width: 42px; }

    .sitsel-search-results { left: 0; right: 0; max-height: 55vh; }
    .sitsel-result-thumb   { width: 40px; height: 40px; }
    .sitsel-result-type-badge { display: none; }
}