/* ==========================================================================
   DSL Pioneer / Unclaimed Badge
   ========================================================================== */

/**
 * Inline badge shown on listing cards and the single listing detail page.
 *
 * Sits right after the listing header (injected via Directorist action hooks).
 * Uses an amber colour palette so it stands out against the Directorist UI
 * without clashing with the category colour system.
 */
.dsl-pioneer-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    margin: 4px 0 6px;
    background: #fef3c7;
    /* amber-100 */
    color: #92400e;
    /* amber-800 */
    border: 1px solid #fcd34d;
    /* amber-300 */
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    text-decoration: none;
    /* when rendered as <a> */
    transition: background 0.2s, border-color 0.2s;
}

.dsl-pioneer-badge:hover {
    background: #fde68a;
    /* amber-200 */
    border-color: #f59e0b;
    /* amber-400 */
    color: #78350f;
    /* amber-900 */
}

.dsl-pioneer-badge__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: #d97706;
    /* amber-600 */
}

.dsl-pioneer-badge__icon svg {
    width: 11px;
    height: 11px;
    fill: currentColor;
}

/* Slightly larger on the single listing detail page */
.directorist-single-listing .dsl-pioneer-badge,
.directorist-single .dsl-pioneer-badge {
    font-size: 12px;
    padding: 4px 12px;
}


@media screen and (max-width: 550px) {
    .dsl-pioneer-badge__label {
        font-size: 8px;
    }
}


/* ==========================================================================
   DSL Unclaimed Map Pins  (Leaflet / OpenStreet)
   ========================================================================== */

/**
 * When the JS rewrites the data-card JSON, it wraps unclaimed cat_icon strings
 * with <span class="dsl-unclaimed-pin-inner">.  The Leaflet DivIcon then
 * renders as:
 *
 *   <div class="myDivIcon">            ← Leaflet outer wrapper
 *     <div class="atbd_map_shape">     ← Directorist pin container (has background-color, clip-path)
 *       <span class="dsl-unclaimed-pin-inner">
 *         <!-- original cat SVG icon -->
 *       </span>
 *     </div>
 *   </div>
 *
 * We piggy-back on the existing pin shape and tint it amber.
 */

/* Tint the pin shape for unclaimed listings */
.myDivIcon .atbd_map_shape:has(.dsl-unclaimed-pin-inner) {
    background-color: #d97706 !important;
    /* amber-600 */
    filter: none !important;
}

/* Add a small pulsing ring around unclaimed pins so they attract attention */
.myDivIcon:has(.dsl-unclaimed-pin-inner) {
    position: relative;
}

.myDivIcon:has(.dsl-unclaimed-pin-inner)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border: 2px solid #f59e0b;
    /* amber-400 */
    border-radius: 50%;
    opacity: 0.6;
    pointer-events: none;
    animation: dsl-pin-pulse 2s ease-in-out infinite;
    z-index: 0;
}

@keyframes dsl-pin-pulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(0.85);
        opacity: 0.6;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 0.15;
    }
}


/* ==========================================================================
   DSL Unclaimed Map Pins  (Google Maps)
   ========================================================================== */

/**
 * For Google Maps the pin is an AdvancedMarkerElement / custom Marker.
 * The .marker div has class "dsl-unclaimed" added by our PHP template override,
 * and the data-icon JSON wraps the SVG with <span class="dsl-unclaimed-pin-inner">.
 * The rendered pin HTML (inside Google's overlay) follows the same structure as
 * the Leaflet pin above, so the same :has() rules apply.
 *
 * Additionally target the Google Maps overlay wrapper class for the pulse ring.
 */
.gm-style .atbd_map_shape:has(.dsl-unclaimed-pin-inner) {
    background-color: #d97706 !important;
    filter: none !important;
}

/* Single listing page — body class set by DSL_Frontend::add_unclaimed_body_class().
 * No :has() needed; the body class is the unclaimed signal. */
body.dsl-unclaimed-listing .directorist-single-map .atbd_map_shape,
body.dsl-unclaimed-listing .directorist-widget__map .atbd_map_shape {
    background-color: #d97706 !important;
    filter: none !important;
}


/* ==========================================================================
   Unclaimed popup card badge  (inside map popups)
   ========================================================================== */

/**
 * The popup card for unclaimed listings gets the class dsl-unclaimed-popup.
 * Show a small "Unclaimed" ribbon at the top of the card image.
 */
.dsl-unclaimed-popup .map-listing-card-single__img {
    position: relative;
}

.dsl-unclaimed-popup .map-listing-card-single__img::after {
    content: 'Unclaimed';
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    background: #d97706;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
}