/* ── Interactive Distributors – Public Styles ─────────────────────────────── */

/* Default CSS variables — scoped to .id-wrapper so multiple instances work.
   The Divi module overrides these per-instance via scoped inline <style>. */
.id-wrapper {
    --id-accent:      #2563eb;
    --id-bg:          transparent;
    --id-text:        #1f2937;
    --id-link:        #2563eb;
    --id-font-size:   14px;
    --id-font-family: inherit;
    --id-radius:      6px;
    --id-shadow:      0 1px 4px rgba(0,0,0,0.08);
    --id-map-height:  500px;
    --id-muted:       #6b7280;
    --id-border:      #e5e7eb;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.id-wrapper {
    font-family: var(--id-font-family);
    font-size:   var(--id-font-size);
    color:       var(--id-text);
    background:  var(--id-bg);
    line-height: 1.6;
    max-width:   100%;
}

/* ── Country Selector ────────────────────────────────────────────────────── */
.id-selector-row {
    display:     flex;
    align-items: center;
    gap:         16px;
    flex-wrap:   wrap;
    margin-bottom: 28px;
}

.id-label {
    font-weight: 600;
    white-space: nowrap;
    color:       var(--id-text);
}

.id-select-wrap {
    position: relative;
    display:  inline-block;
}

.id-select {
    appearance:   none;
    -webkit-appearance: none;
    background:   var(--id-bg);
    border:       1.5px solid var(--id-border);
    border-radius: var(--id-radius);
    padding:      10px 42px 10px 14px;
    font-size:    var(--id-font-size);
    font-family:  var(--id-font-family);
    color:        var(--id-text);
    cursor:       pointer;
    min-width:    220px;
    transition:   border-color 0.15s ease, box-shadow 0.15s ease;
}

.id-select:focus {
    outline:      none;
    border-color: var(--id-accent);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--id-accent) 15%, transparent);
}

.id-select-arrow {
    position:      absolute;
    right:         14px;
    top:           50%;
    transform:     translateY(-50%);
    pointer-events: none;
    color:         var(--id-muted);
    font-size:     10px;
}

/* ── Two-column layout ────────────────────────────────────────────────────── */
.id-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:    28px;
    align-items: start;
}

.id-list-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Distributor Card ─────────────────────────────────────────────────────── */
.id-card {
    background:    var(--id-bg);
    border-radius: var(--id-radius);
    box-shadow:    var(--id-shadow);
    border:        1px solid var(--id-border);
    border-left:   4px solid var(--id-accent);
    padding:       16px 18px;
    transition:    box-shadow 0.2s ease, transform 0.15s ease;
}

.id-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    transform:  translateY(-1px);
}

.id-card-name {
    font-size:     calc(var(--id-font-size) + 1px);
    font-weight:   700;
    margin:        0 0 6px;
    line-height:   1.3;
}

.id-card-name a {
    color:           var(--id-link);
    text-decoration: none;
}

.id-card-name a:hover {
    text-decoration: underline;
}

.id-card-address {
    color:      var(--id-text);
    margin:     0 0 8px;
    font-style: normal;
    line-height: 1.55;
}

.id-card-phone,
.id-card-email {
    display:     flex;
    align-items: center;
    gap:         6px;
    color:       var(--id-muted);
    font-size:   calc(var(--id-font-size) - 1px);
    margin:      3px 0;
}

.id-card-phone a,
.id-card-email a {
    color:           inherit;
    text-decoration: none;
}

.id-card-phone a:hover,
.id-card-email a:hover {
    color: var(--id-link);
}

.id-card-icon {
    width:  14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.6;
}

.id-see-map {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    margin-top:      12px;
    padding:         6px 12px;
    border:          1.5px solid var(--id-accent);
    border-radius:   calc(var(--id-radius) - 2px);
    color:           var(--id-accent);
    font-size:       calc(var(--id-font-size) - 1px);
    font-weight:     600;
    text-decoration: none;
    cursor:          pointer;
    background:      transparent;
    font-family:     var(--id-font-family);
    transition:      background 0.15s, color 0.15s;
}

.id-see-map:hover,
.id-see-map.id-active {
    background: var(--id-accent);
    color:      #fff;
}

/* ── Map column ───────────────────────────────────────────────────────────── */
.id-map-container {
    position:      relative;
    border-radius: var(--id-radius);
    overflow:      hidden;
    border:        1px solid var(--id-border);
    box-shadow:    var(--id-shadow);
    background:    #f9fafb;
    height:        var(--id-map-height);
}

/* Leaflet map canvas fills the container */
.id-leaflet-map {
    width:   100%;
    height:  100%;
}

/* Leaflet z-index fix for Divi */
.id-leaflet-map .leaflet-pane,
.id-leaflet-map .leaflet-control {
    z-index: 1 !important;
}
.id-leaflet-map .leaflet-top,
.id-leaflet-map .leaflet-bottom {
    z-index: 2 !important;
}

/* Custom popup styles */
.id-leaflet-popup {
    font-family: var(--id-font-family);
    font-size:   var(--id-font-size);
    line-height: 1.55;
    color:       var(--id-text);
}

.id-leaflet-popup strong {
    display:       block;
    margin-bottom: 4px;
    color:         var(--id-text);
}

.id-leaflet-popup a {
    color:           var(--id-link);
    text-decoration: none;
}

.id-leaflet-popup a:hover {
    text-decoration: underline;
}

/* Custom pin – no extra CSS needed, uses divIcon inline SVG */
.id-leaflet-pin {
    background: transparent !important;
    border:     none !important;
}

.id-map-placeholder {
    position:        absolute;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    color:           var(--id-muted);
    text-align:      center;
    padding:         24px;
    pointer-events:  none;
}

.id-map-placeholder svg {
    opacity: 0.3;
}

.id-map-placeholder p {
    margin:    0;
    font-size: calc(var(--id-font-size) - 1px);
}

.id-map-placeholder.id-hidden {
    display: none;
}

/* ── Loading / Empty states ───────────────────────────────────────────────── */
.id-loading {
    display:         flex;
    justify-content: center;
    padding:         32px;
}

.id-spinner {
    width:        32px;
    height:       32px;
    border:       3px solid var(--id-border);
    border-top:   3px solid var(--id-accent);
    border-radius: 50%;
    animation:    id-spin 0.7s linear infinite;
    display:      block;
}

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

.id-empty {
    text-align:  center;
    color:       var(--id-muted);
    padding:     40px;
    font-size:   calc(var(--id-font-size) + 1px);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media ( max-width: 768px ) {
    .id-columns {
        grid-template-columns: 1fr;
    }

    .id-map-col {
        order: -1;
    }

    .id-map-container {
        height: 280px;
    }

    .id-selector-row {
        flex-direction: column;
        align-items:    flex-start;
    }

    .id-select {
        width: 100%;
        min-width: unset;
    }
}

/* ── Divi builder override: ensure full width ─────────────────────────────── */
.et_pb_widget .id-wrapper,
.et_pb_section .id-wrapper {
    max-width: 100% !important;
}