/* ── Wagman Distributor Finder ─────────────────────────────────────────── */

#wdf-wrap {
    --wdf-primary:   #1b2a4a;
    --wdf-secondary: #9dc41a;
    --wdf-text:      #333;
    --wdf-bg:        #fff;
    --wdf-card-bg:   #f8f8f8;
    --wdf-radius:    6px;
    --wdf-font-size: 14px;
    --wdf-border:    #e0e0e0;

    font-family: inherit;
    font-size: var(--wdf-font-size);
    color: var(--wdf-text);
    background: var(--wdf-bg);
    box-sizing: border-box;
    max-width: 100%;
}
#wdf-wrap *, #wdf-wrap *::before, #wdf-wrap *::after { box-sizing: inherit; }

/* ── Search bar ─────────────────────────────────────────────────────────── */
#wdf-wrap .wdf-search-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--wdf-primary);
    padding: 16px 20px;
    border-radius: var(--wdf-radius) var(--wdf-radius) 0 0;
}
#wdf-wrap .wdf-search-inner {
    flex: 1 1 240px; display: flex; align-items: center;
    background: #fff; border-radius: var(--wdf-radius); overflow: hidden;
}
#wdf-wrap .wdf-search-icon { padding: 0 10px; color: #999; display: flex; align-items: center; flex-shrink: 0; }
#wdf-wrap .wdf-search-input { flex: 1; border: none; outline: none; padding: 11px 6px 11px 0; font-size: var(--wdf-font-size); background: transparent; color: var(--wdf-text); min-width: 0; }
#wdf-wrap .wdf-clear-btn { background: none; border: none; cursor: pointer; color: #aaa; padding: 0 10px; font-size: 17px; }
#wdf-wrap .wdf-radius-wrap { display: flex; align-items: center; gap: 8px; color: #fff; font-size: var(--wdf-font-size); white-space: nowrap; }
#wdf-wrap .wdf-radius-select { padding: 8px 10px; border: none; border-radius: var(--wdf-radius); font-size: var(--wdf-font-size); background: rgba(255,255,255,.15); color: #fff; cursor: pointer; outline: none; }
#wdf-wrap .wdf-radius-select option { color: #333; background: #fff; }
#wdf-wrap .wdf-search-btn { background: var(--wdf-secondary); color: #fff; border: none; border-radius: var(--wdf-radius); padding: 11px 22px; font-weight: 700; font-size: var(--wdf-font-size); cursor: pointer; white-space: nowrap; transition: opacity .15s; }
#wdf-wrap .wdf-search-btn:hover { opacity: .85; }
#wdf-wrap .wdf-search-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── Status bar ─────────────────────────────────────────────────────────── */
#wdf-wrap .wdf-status-bar { padding: 9px 18px; border-left: 4px solid var(--wdf-secondary); font-size: 13px; background: #fffbe6; color: #555; }
#wdf-wrap .wdf-status-bar.wdf-error { background: #fff0f0; border-color: #c00; color: #c00; }
#wdf-wrap .wdf-status-bar.wdf-warn  { background: #fff8e1; border-color: #f0a500; color: #7a4f00; }

/* ── Main layout ────────────────────────────────────────────────────────── */
#wdf-wrap .wdf-main {
    display: flex;
    border: 1px solid var(--wdf-border);
    border-top: none;
    border-radius: 0 0 var(--wdf-radius) var(--wdf-radius);
    overflow: hidden;
    /* Height set via inline <style> in shortcode */
}

/* ── List panel ─────────────────────────────────────────────────────────── */
#wdf-wrap .wdf-list-panel {
    width: 300px; flex-shrink: 0;
    border-right: 1px solid var(--wdf-border);
    display: flex; flex-direction: column;
    background: var(--wdf-bg);
    overflow: hidden;
    /* height set via inline <style> */
}
#wdf-wrap .wdf-list-count { padding: 9px 14px; font-size: 11px; color: #888; border-bottom: 1px solid var(--wdf-border); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
#wdf-wrap .wdf-list { flex: 1; overflow-y: auto; }
#wdf-wrap .wdf-list::-webkit-scrollbar { width: 4px; }
#wdf-wrap .wdf-list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

/* initial / empty message */
#wdf-wrap .wdf-initial-msg, #wdf-wrap .wdf-empty-msg { padding: 36px 20px; text-align: center; color: #bbb; }
#wdf-wrap .wdf-initial-msg svg, #wdf-wrap .wdf-empty-msg svg { display: block; margin: 0 auto 10px; opacity: .35; }
#wdf-wrap .wdf-initial-msg p, #wdf-wrap .wdf-empty-msg p { margin: 0; font-size: 13px; line-height: 1.5; }

/* spinner */
#wdf-wrap .wdf-loading { padding: 36px; text-align: center; color: #aaa; }
#wdf-wrap .wdf-spinner { width: 34px; height: 34px; border: 3px solid #e8e8e8; border-top-color: var(--wdf-secondary); border-radius: 50%; animation: wdfSpin .7s linear infinite; margin: 0 auto 10px; }
@keyframes wdfSpin { to { transform: rotate(360deg); } }

/* cards */
#wdf-wrap .wdf-card { padding: 13px 15px; border-bottom: 1px solid var(--wdf-border); cursor: pointer; transition: background .12s; position: relative; }
#wdf-wrap .wdf-card:last-child { border-bottom: none; }
#wdf-wrap .wdf-card:hover, #wdf-wrap .wdf-card.wdf-active { background: var(--wdf-card-bg); }
#wdf-wrap .wdf-card.wdf-active::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--wdf-secondary); border-radius:0 2px 2px 0; }
#wdf-wrap .wdf-card-name { font-weight: 700; color: var(--wdf-primary); margin-bottom: 4px; font-size: calc(var(--wdf-font-size) + 1px); }
#wdf-wrap .wdf-card-address { color: #666; font-size: calc(var(--wdf-font-size) - 1px); line-height: 1.45; margin-bottom: 5px; }
#wdf-wrap .wdf-card-meta { display: flex; flex-direction: column; gap: 3px; }
#wdf-wrap .wdf-card-meta a { color: var(--wdf-secondary); text-decoration: none; font-size: calc(var(--wdf-font-size) - 1px); display: flex; align-items: center; gap: 4px; }
#wdf-wrap .wdf-card-meta a:hover { text-decoration: underline; }
#wdf-wrap .wdf-card-dist { position: absolute; top: 13px; right: 13px; font-size: 11px; color: #999; background: var(--wdf-card-bg); padding: 1px 6px; border-radius: 20px; border: 1px solid var(--wdf-border); }

/* ── Map panel ──────────────────────────────────────────────────────────── */
#wdf-wrap .wdf-map-panel {
    flex: 1;
    position: relative;
    min-width: 0;
    overflow: hidden;
    /* height set via inline <style> */
}

/* The actual map div — height/min-height forced via inline <style> in shortcode
   so no CSS here can conflict */
#wdf-map {
    width: 100%;
    display: block;
    background: #e8e8e8;  /* visible while map loads */
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #wdf-wrap .wdf-main { flex-direction: column; min-height: auto !important; }
    #wdf-wrap .wdf-list-panel { width: 100%; height: 300px !important; max-height: 300px !important; border-right: none; border-bottom: 1px solid var(--wdf-border); }
    #wdf-wrap .wdf-map-panel { height: 320px !important; min-height: 320px !important; }
    #wdf-map { height: 320px !important; min-height: 320px !important; }
    #wdf-wrap .wdf-search-bar { border-radius: 0; padding: 12px 14px; }
    #wdf-wrap .wdf-search-btn { padding: 11px 14px; }
}

/* Multiple phone numbers — each on its own line */
#wdf-wrap .wdf-card-phone + .wdf-card-phone { margin-top: 2px; }