/* ============================================
   Elementor Search Widget — esw-style.css
   ============================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Mono&display=swap');

/* ── Custom Properties ──────────────────── */
.esw-wrapper {
    --esw-accent:      #1a6ef5;
    --esw-accent-dark: #1258cc;
    --esw-bg:          #ffffff;
    --esw-border:      #d1d5db;
    --esw-border-focus:#1a6ef5;
    --esw-text:        #111827;
    --esw-label:       #374151;
    --esw-muted:       #6b7280;
    --esw-radius:      10px;
    --esw-shadow:      0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06);
    --esw-font:        'DM Sans', sans-serif;

    font-family:  var(--esw-font);
    background:   var(--esw-bg);
    border:       1px solid var(--esw-border);
    border-radius: 16px;
    padding:      2rem 2rem 1.75rem;
    box-shadow:   var(--esw-shadow);
    max-width:    900px;
    margin:       0 auto;
}

/* ── Grid of 6 dropdowns ────────────────── */
.esw-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.25rem 1.5rem;
}

@media (max-width: 720px) {
    .esw-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .esw-grid { grid-template-columns: 1fr; }
}

/* ── Field group ────────────────────────── */
.esw-field-group {
    display:        flex;
    flex-direction: column;
    gap:            .4rem;
}

.esw-label {
    font-size:   .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--esw-label);
}

/* ── Select wrapper (for custom arrow) ─── */
.esw-select-wrap {
    position: relative;
}

.esw-select {
    appearance:    none;
    -webkit-appearance: none;
    width:         100%;
    padding:       .6rem .875rem;
    padding-right: 2.25rem;
    font-family:   var(--esw-font);
    font-size:     .9rem;
    color:         var(--esw-text);
    background:    #f9fafb;
    border:        1.5px solid var(--esw-border);
    border-radius: var(--esw-radius);
    cursor:        pointer;
    transition:    border-color .18s, box-shadow .18s, background .18s;
    outline:       none;
}

.esw-select:hover {
    border-color: #9ca3af;
    background:   #f3f4f6;
}

.esw-select:focus {
    border-color: var(--esw-border-focus);
    background:   #fff;
    box-shadow:   0 0 0 3px rgba(26,110,245,.15);
}

/* loading/disabled state */
.esw-select:disabled {
    opacity: .55;
    cursor:  not-allowed;
}

.esw-arrow {
    position:       absolute;
    right:          .75rem;
    top:            50%;
    transform:      translateY(-50%);
    font-size:      1.2rem;
    color:          var(--esw-muted);
    pointer-events: none;
    line-height:    1;
}

/* ── Button row ─────────────────────────── */
.esw-btn-row {
    margin-top: 1.5rem;
    display:    flex;
    justify-content: flex-end;
}

.esw-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            .5rem;
    padding:        .65rem 1.75rem;
    font-family:    var(--esw-font);
    font-size:      .95rem;
    font-weight:    600;
    color:          #fff;
    background:     var(--esw-accent);
    border:         none;
    border-radius:  var(--esw-radius);
    cursor:         pointer;
    transition:     background .18s, transform .12s, box-shadow .18s;
    box-shadow:     0 2px 8px rgba(26,110,245,.35);
    letter-spacing: .01em;
}

.esw-btn:hover {
    background:  var(--esw-accent-dark);
    box-shadow:  0 4px 16px rgba(26,110,245,.45);
    transform:   translateY(-1px);
}

.esw-btn:active {
    transform:   translateY(0);
    box-shadow:  0 2px 6px rgba(26,110,245,.3);
}

.esw-btn-icon {
    width:  16px;
    height: 16px;
    flex-shrink: 0;
}

.esw-btn.esw-loading .esw-btn-text::after {
    content: '…';
    animation: esw-dots 1s steps(3, end) infinite;
}

@keyframes esw-dots {
    0%  { content: '…'; }
    33% { content: ''; }
    66% { content: '.'; }
}

/* ── Results area ───────────────────────── */
.esw-results {
    margin-top:  1.75rem;
}

.esw-results-meta {
    font-size:   .82rem;
    color:       var(--esw-muted);
    margin-bottom: .875rem;
    font-family: 'DM Mono', monospace;
}

.esw-results-meta strong {
    color: var(--esw-text);
}

/* Results table */
.esw-table {
    width:           100%;
    border-collapse: separate;
    border-spacing:  0;
    font-size:       .875rem;
}

.esw-table th,
.esw-table td {
    padding:    .6rem .875rem;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
}

.esw-table thead th {
    font-size:      .72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          var(--esw-muted);
    background:     #f9fafb;
    border-top:     1px solid var(--esw-border);
    border-bottom:  1px solid var(--esw-border);
}

.esw-table thead th:first-child { border-radius: 8px 0 0 0; }
.esw-table thead th:last-child  { border-radius: 0 8px 0 0; }

.esw-table tbody tr:last-child td { border-bottom: none; }

.esw-table tbody tr:hover td {
    background: #f0f5ff;
}

.esw-table tbody td { color: var(--esw-text); }

.esw-badge {
    display:       inline-block;
    padding:       .2rem .6rem;
    border-radius: 999px;
    font-size:     .72rem;
    font-weight:   600;
}

.esw-badge-active   { background: #d1fae5; color: #065f46; }
.esw-badge-inactive { background: #f3f4f6; color: #6b7280; }

/* Empty / error messages */
.esw-msg {
    text-align:  center;
    color:       var(--esw-muted);
    font-size:   .9rem;
    padding:     2rem 0;
}

.esw-msg svg {
    display:      block;
    margin:       0 auto .75rem;
    opacity:      .35;
}

/* ── Spinner overlay on selects ─────────── */
.esw-loading-opts .esw-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right .7rem center;
    background-size:     16px;
    animation:           esw-spin .8s linear infinite;
}

@keyframes esw-spin { to { /* CSS on the select itself won't spin just the bg — handled in JS */ } }