/* Ze Certification Maps - Frontend CSS */

/* Map Wrapper */
.zcm-map-wrapper {
    width: 100%;
    margin: 20px 0;
    position: relative;
}

.zcm-map-display {
    width: 100%;
    height: 600px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

/* Leaflet tile loading fix - prevent WordPress theme CSS from breaking tiles */
.zcm-map-display img,
.leaflet-container img {
    max-width: none !important;
    max-height: none !important;
}

/* Filter Panel */
.zcm-filter-panel {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
}

/* v6.4.0: Stats line - simple, discrete, professional */
.zcm-stats-line {
    font-style: italic;
    color: #666;
    font-size: 14px;
    text-align: center;
    margin: 0 0 12px 0;
    padding: 0;
}

.zcm-filter-header {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
}

.zcm-filter-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.zcm-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.zcm-filter-item:hover {
    opacity: 0.85;
}

/* Active state - colors are set via JavaScript for custom styling */
.zcm-filter-item.active {
    /* Default fallback - overridden by inline styles */
}

.zcm-filter-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
}

.zcm-filter-icon img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.zcm-filter-name {
    font-size: 14px;
    font-weight: 500;
}

/* Custom Leaflet Icons */
.zcm-custom-icon {
    background: none !important;
    border: none !important;
    transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
}

/* Marker hidden state (when another marker is selected) */
.zcm-custom-icon.zcm-marker-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.5);
}

/* Marker selected state (highlighted) */
.zcm-custom-icon.zcm-marker-selected {
    transform: scale(1.25);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
    z-index: 10000 !important;
}

/* Popup Styles */
.leaflet-popup-content {
    margin: 15px;
    line-height: 1.6;
}

.leaflet-popup-content strong {
    font-size: 16px;
    color: #333;
}

.leaflet-popup-content a {
    color: #2563eb;
    text-decoration: none;
}

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

/* Buttons Container - side by side */
.zcm-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    justify-content: flex-start;
}

/* Popup Button Styles */
.zcm-popup-button {
    display: inline-block;
    padding: 8px 16px;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.2s;
    text-align: center;
    white-space: nowrap;
}

.zcm-popup-button:hover {
    opacity: 0.9;
    text-decoration: none;
}

.zcm-popup-button.small {
    padding: 6px 12px;
    font-size: 12px;
}

.zcm-popup-button.medium {
    padding: 8px 16px;
    font-size: 14px;
}

.zcm-popup-button.large {
    padding: 10px 20px;
    font-size: 16px;
}

.zcm-popup-button.rounded {
    border-radius: 20px;
}

.zcm-popup-button.square {
    border-radius: 0;
}

/* Map Style Filters */
.map-bw-filter {
    filter: grayscale(100%);
}

/* Responsive */
@media (max-width: 768px) {
    .zcm-filter-panel {
        padding: 12px;
    }

    .zcm-filter-items {
        gap: 8px;
    }

    .zcm-filter-item {
        padding: 6px 10px;
        font-size: 13px;
        flex-shrink: 1;
        min-width: 0;
    }

    .zcm-filter-name {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .zcm-map-display {
        height: 400px;
    }

    /* Geolocation button responsive - allow full width on its own row */
    .zcm-geolocation-btn {
        padding: 6px 10px;
        flex-basis: 100%;
        justify-content: center;
    }

    .zcm-geoloc-label {
        font-size: 13px;
    }

    /* Hide filter panel on mobile when coming from badge/direct link */
    .zcm-filter-hidden-direct {
        display: none !important;
    }
}

/* On desktop, still show filters even for direct access (more screen space) */
@media (min-width: 769px) {
    .zcm-filter-hidden-direct {
        /* Filters remain visible on desktop */
    }
}

@media (max-width: 480px) {
    .zcm-map-display {
        height: 300px;
    }

    /* On mobile, geolocation button takes full row */
    .zcm-geolocation-btn {
        padding: 8px 12px;
        gap: 8px;
    }

    .zcm-geoloc-label {
        font-size: 13px;
    }

    .zcm-filter-icon {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }
}

/* Loading State */
.zcm-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: #666;
    font-size: 16px;
    gap: 16px;
}

.zcm-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #2563eb;
    border-radius: 50%;
    animation: zcm-spin 1s linear infinite;
}

.zcm-loading p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

@keyframes zcm-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error State */
.zcm-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 30px 20px;
    background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
    border: 1px solid #feb2b2;
    border-radius: 12px;
    color: #c53030;
    text-align: center;
    gap: 12px;
}

.zcm-error-icon {
    font-size: 48px;
    line-height: 1;
}

.zcm-error-message {
    margin: 0;
    font-size: 16px;
    color: #c53030;
}

.zcm-error-hint {
    margin: 0;
    font-size: 13px;
    color: #9b2c2c;
    opacity: 0.8;
}

.zcm-offline-indicator {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: #fbd38d;
    border-radius: 4px;
    font-size: 12px;
    color: #744210;
}

.zcm-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 12px 24px;
    background: #2563eb;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.zcm-retry-btn:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.zcm-retry-btn:active {
    transform: translateY(0);
}

/* Empty State */
.zcm-empty {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

/* Accessibility */
.zcm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ==================== SIDE PANEL ==================== */

.zcm-side-panel {
    position: absolute;
    left: 0;
    top: 0;
    width: 320px;
    max-width: 85%;
    height: 100%;
    background: #ffffff;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.zcm-side-panel.active {
    transform: translateX(0);
}

.zcm-side-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.zcm-side-panel-title {
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.4;
}

.zcm-side-panel-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #6b7280;
    transition: all 0.2s;
    flex-shrink: 0;
    margin-left: 12px;
}

.zcm-side-panel-close:hover {
    background: #e5e7eb;
    color: #374151;
}

.zcm-side-panel-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

/* Layer Description */
.zcm-side-panel-description {
    margin-bottom: 20px;
    padding: 16px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-left: 4px solid #0284c7;
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    line-height: 1.7;
    color: #1e3a5f;
}

.zcm-side-panel-description p {
    margin: 0 0 12px 0;
}

.zcm-side-panel-description p:last-child {
    margin-bottom: 0;
}

.zcm-side-panel-description strong {
    color: #0369a1;
}

.zcm-side-panel-description a {
    color: #0284c7;
    text-decoration: underline;
}

.zcm-side-panel-description a:hover {
    color: #0369a1;
}

.zcm-side-panel-description ul,
.zcm-side-panel-description ol {
    margin: 8px 0;
    padding-left: 20px;
}

.zcm-side-panel-description li {
    margin-bottom: 4px;
}

.zcm-side-panel-address {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 24px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
}

.zcm-side-panel-address-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.zcm-side-panel-address-text {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.5;
}

/* Link Cards */
.zcm-link-cards {
    display: flex;
    flex-direction: column;
}

.zcm-link-card {
    display: block;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.zcm-link-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    text-decoration: none;
}

.zcm-link-card-content {
    display: flex;
    align-items: center;
    gap: 14px;
}

.zcm-link-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}

.zcm-link-card-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.zcm-link-card-info {
    flex: 1;
    min-width: 0;
}

.zcm-link-card-label {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
    line-height: 1.3;
    word-wrap: break-word;
}

.zcm-link-card-url {
    font-size: 12px;
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zcm-link-card-arrow {
    font-size: 18px;
    color: #9ca3af;
    transition: transform 0.2s;
}

.zcm-link-card:hover .zcm-link-card-arrow {
    transform: translateX(4px);
}

/* ==============================================
   LINK CARD SIZES
   ============================================== */

/* Small size */
.zcm-link-card-small {
    padding: 10px 12px;
}

.zcm-link-card-small .zcm-link-card-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
    border-radius: 8px;
}

.zcm-link-card-small .zcm-link-card-label {
    font-size: 13px;
}

.zcm-link-card-small .zcm-link-card-url {
    font-size: 11px;
}

/* Medium size (default) */
.zcm-link-card-medium {
    padding: 16px;
}

/* Large size */
.zcm-link-card-large {
    padding: 20px;
}

.zcm-link-card-large .zcm-link-card-icon {
    width: 56px;
    height: 56px;
    font-size: 26px;
    border-radius: 14px;
}

.zcm-link-card-large .zcm-link-card-label {
    font-size: 17px;
}

.zcm-link-card-large .zcm-link-card-url {
    font-size: 13px;
}

/* ==============================================
   LINK CARD SHAPES
   ============================================== */

/* Square shape */
.zcm-link-card-shape-square {
    border-radius: 0;
}

.zcm-link-card-shape-square .zcm-link-card-icon {
    border-radius: 0;
}

/* Rounded shape (default) */
.zcm-link-card-shape-rounded {
    border-radius: 12px;
}

.zcm-link-card-shape-rounded .zcm-link-card-icon {
    border-radius: 10px;
}

/* Pill shape */
.zcm-link-card-shape-pill {
    border-radius: 50px;
}

.zcm-link-card-shape-pill .zcm-link-card-icon {
    border-radius: 50%;
}

/* ==============================================
   PRIMARY BUTTON (FILLED STYLE)
   ============================================== */

.zcm-link-card-filled {
    border-width: 2px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.zcm-link-card-filled:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    filter: brightness(1.05);
}

.zcm-link-card-filled .zcm-link-card-icon-image {
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Primary card styling - Enhanced CTA */
.zcm-link-card-primary {
    position: relative;
    overflow: hidden;
    /* Pulsing glow effect */
    animation: zcm-glow-pulse 2.5s ease-in-out infinite;
}

/* Glow pulse animation around the primary button */
@keyframes zcm-glow-pulse {
    0%, 100% {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(255, 255, 255, 0);
    }
    50% {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.3);
    }
}

/* Shine animation - more visible sweep effect */
.zcm-link-card-primary.zcm-link-card-filled::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 20%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.1) 80%,
        transparent 100%
    );
    transform: skewX(-20deg);
    animation: zcm-shine 3.5s ease-in-out infinite;
}

@keyframes zcm-shine {
    0% {
        left: -100%;
    }
    60%, 100% {
        left: 200%;
    }
}

/* Arrow pulse animation for primary buttons - more bouncy */
.zcm-link-card-primary .zcm-link-card-arrow {
    animation: zcm-arrow-bounce 1.5s ease-in-out infinite;
    font-weight: bold;
}

@keyframes zcm-arrow-bounce {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.7;
    }
    50% {
        transform: translateX(8px);
        opacity: 1;
    }
}

/* Subtle scale pulse for extra attention */
.zcm-link-card-primary.zcm-link-card-filled {
    animation: zcm-glow-pulse 2.5s ease-in-out infinite, zcm-subtle-scale 4s ease-in-out infinite;
}

@keyframes zcm-subtle-scale {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* Disable animations on hover for cleaner interaction */
.zcm-link-card-primary:hover {
    animation: none;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.zcm-link-card-primary:hover .zcm-link-card-arrow {
    animation: none;
    transform: translateX(10px);
}

/* Active state */
.zcm-link-card-primary:active {
    transform: translateY(0) scale(0.98);
}

/* ==============================================
   MOBILE ENHANCEMENTS
   ============================================== */

@media (max-width: 480px) {
    /* Make link cards more prominent on mobile */
    .zcm-link-card {
        padding: 18px;
    }

    .zcm-link-card-filled {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

    /* Larger touch target on mobile */
    .zcm-link-card-primary {
        min-height: 70px;
    }

    .zcm-link-card-primary .zcm-link-card-icon {
        width: 52px;
        height: 52px;
    }

    .zcm-link-card-primary .zcm-link-card-label {
        font-size: 16px;
        font-weight: 700;
    }

    /* Large size on mobile */
    .zcm-link-card-large {
        padding: 22px;
        min-height: 80px;
    }

    .zcm-link-card-large .zcm-link-card-icon {
        width: 60px;
        height: 60px;
    }

    .zcm-link-card-large .zcm-link-card-label {
        font-size: 18px;
    }
}

/* Mobile responsive */
@media (max-width: 480px) {
    .zcm-side-panel {
        width: 100%;
        max-width: 100%;
    }

    .zcm-side-panel-header {
        padding: 16px;
    }

    .zcm-side-panel-body {
        padding: 16px;
    }

    .zcm-link-preview-iframe-container {
        height: 180px;
    }
}

/* ==================== SEARCH BAR ==================== */

.zcm-search-container {
    margin-bottom: 15px;
    position: relative;
}

.zcm-search-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.zcm-search-input {
    flex: 1;
    max-width: 320px;
    padding: 10px 14px;
    font-size: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 24px;
    outline: none;
    transition: all 0.2s;
    background: #f9fafb;
}

.zcm-search-input:focus {
    border-color: #2563eb;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.zcm-search-input::placeholder {
    color: #9ca3af;
}

/* Geolocation button - same style as filter items */
.zcm-geolocation-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    font-size: inherit;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.zcm-geolocation-btn:hover {
    opacity: 0.85;
}

.zcm-geolocation-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.zcm-geoloc-icon {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.zcm-geoloc-label {
    font-size: 14px;
    font-weight: 500;
}

/* Search Results Dropdown */
.zcm-search-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 380px;
    margin-top: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
}

.zcm-search-result {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s;
}

.zcm-search-result:last-child {
    border-bottom: none;
}

.zcm-search-result:hover {
    background: #f0f9ff;
}

.zcm-search-result-name {
    display: block;
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
    margin-bottom: 2px;
}

.zcm-search-result-address {
    display: block;
    font-size: 12px;
    color: #6b7280;
}

.zcm-search-no-results {
    padding: 20px 16px;
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
}

/* User Location Marker */
.zcm-user-marker {
    background: none !important;
    border: none !important;
}

.zcm-user-location {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    animation: zcm-pulse 2s infinite;
}

@keyframes zcm-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 99, 235, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }
}

/* ==================== DIRECTIONS BUTTON ==================== */

.zcm-directions-container {
    margin: 16px 0;
}

/* Position-specific styles */
.zcm-directions-pos-before-address {
    margin-top: 0;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.zcm-directions-pos-after-address {
    margin-top: 0;
    margin-bottom: 20px;
}

.zcm-directions-pos-before-link1 {
    margin-top: 0;
    margin-bottom: 16px;
}

.zcm-directions-pos-after-links {
    margin-top: 16px;
    margin-bottom: 0;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.zcm-directions-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.zcm-directions-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    text-decoration: none;
    color: #fff;
}

.zcm-directions-btn:active {
    transform: translateY(0);
}

.zcm-directions-icon {
    font-size: 18px;
}

/* Mobile responsive for search */
@media (max-width: 480px) {
    .zcm-search-wrapper {
        padding: 0 10px;
    }

    .zcm-search-input {
        max-width: none;
        padding: 8px 12px;
    }

    .zcm-search-results {
        max-width: calc(100% - 20px);
    }
}

/* ==================== SHARE BUTTON & TOAST ==================== */

.zcm-side-panel-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.zcm-share-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: #e0f2fe;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #0284c7;
    transition: all 0.2s;
}

.zcm-share-btn:hover {
    background: #bae6fd;
    color: #0369a1;
    transform: scale(1.1);
}

.zcm-share-btn:active {
    transform: scale(0.95);
}

/* Toast notification */
.zcm-share-toast {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: #fff;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 10001;
    white-space: nowrap;
}

.zcm-share-toast.active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

/* Adjust header for new actions container */
.zcm-side-panel-header {
    gap: 12px;
}

/* Remove old margin from close button since it's now in actions container */
.zcm-side-panel-header .zcm-side-panel-close {
    margin-left: 0;
}

/* ==================== PROGRESS GAUGE (LinkedIn-style) ==================== */

.zcm-gauge-container {
    margin: 16px 0 20px 0;
}

.zcm-gauge-title {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.zcm-gauge-bar {
    display: flex;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.zcm-gauge-segment {
    height: 100%;
    transition: all 0.3s ease;
    position: relative;
}

.zcm-gauge-segment.active {
    /* Color set inline */
}

.zcm-gauge-segment.inactive {
    background: #e5e7eb;
}

/* Segment separators */
.zcm-gauge-segment:not(:last-child) {
    border-right: 2px solid #ffffff;
}

/* Gauge labels (layer names with icons) */
.zcm-gauge-labels {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 8px;
    gap: 4px;
    position: relative; /* For tooltip positioning */
}

.zcm-gauge-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
    position: relative;
}

.zcm-gauge-label-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    margin-bottom: 4px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    background: #f3f4f6;
}

/* Active (completed) level - show image with configurable border (no checkmark) */
.zcm-gauge-label-icon.active {
    background: #fff;
    /* Border is set via scoped inline styles using layer's gauge_border_width and gauge_border_color */
}

/* Current level - configurable via inline styles */
.zcm-gauge-label-icon.current {
    background: #fff;
    /* border and animation set via scoped inline styles */
}

/* Inactive (future) level - grayscale */
.zcm-gauge-label-icon.inactive {
    background: #f3f4f6;
    filter: grayscale(100%);
    opacity: 0.6;
}

/* Icon images inside the badge */
.zcm-gauge-icon-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 50%;
}

.zcm-gauge-icon-emoji {
    font-size: 16px;
    line-height: 1;
}

.zcm-gauge-label-text {
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    text-align: center;
    line-height: 1.2;
    max-width: 60px;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zcm-gauge-label.current .zcm-gauge-label-text {
    /* Color set via scoped inline styles using layer's gauge_label_color */
    font-weight: 600;
}

/* Active (completed) level - keep standard gray text, no special highlight */
.zcm-gauge-label.active .zcm-gauge-label-text {
    color: #6b7280;
}

/* Info icon with tooltip */
.zcm-gauge-info-icon {
    font-size: 10px;
    color: #9ca3af;
    cursor: help;
    margin-top: 2px;
    transition: color 0.2s;
}

.zcm-gauge-info-icon:hover {
    color: #3b82f6;
}

/* ==================== CUSTOM CSS TOOLTIPS ==================== */

/* Custom tooltip for gauge labels (hover on pastille) - positioned BELOW to avoid clipping */
.zcm-gauge-label {
    cursor: pointer;
}

/* Shared tooltip for gauge labels - full width, positioned below labels */
.zcm-gauge-labels > .zcm-gauge-tooltip {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    background: #1f2937;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 12px 16px;
    border-radius: 10px;
    z-index: 10002;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    white-space: normal;
    text-align: left;
    line-height: 1.6;
    word-wrap: break-word;
}

/* No arrow needed for full-width tooltip */

/* Info icon in vignette (current level alert) */
.zcm-gauge-vignette-info {
    cursor: help;
    font-size: 16px;
    margin-left: auto;
    padding: 5px 5px 5px 10px; /* Extra padding to prevent flickering */
    position: static; /* Tooltip positioned by .zcm-gauge-current parent */
    transition: color 0.2s;
    /* Color set via inline styles from layer settings */
}

.zcm-gauge-vignette-info:hover {
    /* Remove opacity to not affect child tooltip */
    color: inherit;
}

/* Vignette tooltip (info icon ⓘ) - full width, positioned by .zcm-gauge-current */
.zcm-vignette-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #1f2937;
    background-color: #1f2937 !important;
    opacity: 1 !important;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 12px 16px;
    border-radius: 10px;
    z-index: 10002;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    white-space: normal;
    text-align: left;
    line-height: 1.6;
    word-wrap: break-word;
    pointer-events: none; /* Prevents flickering */
}

.zcm-gauge-vignette-info:hover .zcm-vignette-tooltip {
    display: block;
}

/* Mobile: adjust tooltips for smaller screens */
@media (max-width: 480px) {
    .zcm-gauge-labels > .zcm-gauge-tooltip {
        font-size: 12px;
        padding: 10px 12px;
    }

    .zcm-vignette-tooltip {
        font-size: 12px;
        padding: 10px 12px;
    }
}

/* Current level indicator (with position relative for tooltip) */
.zcm-gauge-current {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-left: 4px solid #2563eb;
    border-radius: 0 8px 8px 0;
    margin-top: 12px;
}

.zcm-gauge-current-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zcm-gauge-current-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 50%;
}

.zcm-gauge-current-emoji {
    font-size: 18px;
    line-height: 1;
}

.zcm-gauge-current-text {
    font-size: 13px;
    /* Color set via scoped inline styles */
}

.zcm-gauge-current-text strong {
    /* Color set via scoped inline styles */
}

/* Position variants */
.zcm-gauge-before-description {
    margin-top: 0;
    margin-bottom: 16px;
}

.zcm-gauge-after-description {
    margin-top: 16px;
    margin-bottom: 16px;
}

.zcm-gauge-before-address {
    margin-top: 0;
    margin-bottom: 16px;
}

/* ==================== ADDRESS POSITION CONTAINERS ==================== */

.zcm-address-after-description {
    margin-bottom: 16px;
}

.zcm-address-before-links {
    margin-bottom: 16px;
}

.zcm-address-after-links {
    margin-top: 16px;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .zcm-gauge-label-icon {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .zcm-gauge-label-text {
        font-size: 9px;
        max-width: 50px;
    }

    .zcm-gauge-current {
        padding: 8px 12px;
    }

    .zcm-gauge-current-text {
        font-size: 12px;
    }
}

/* ==================== MARKER CLUSTERS ==================== */

/* Override default MarkerCluster styles */
.zcm-cluster-marker {
    background: none !important;
    border: none !important;
}

.zcm-cluster-icon {
    /* Width, height, font-size, border, and colors are set inline via layer cluster settings */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.zcm-cluster-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}

/* Spiderfy leg styles (lines connecting markers when cluster is expanded) */
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* Animation for cluster expansion */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background: none !important;
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
    background: none !important;
}

/* Mobile adjustments for clusters */
@media (max-width: 480px) {
    .zcm-cluster-icon {
        /* Size is controlled via inline styles from layer settings */
        /* Optional: slightly reduce shadow on mobile */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
}

/* ==================== EXIT-INTENT POPUP ==================== */

.zcm-exit-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.zcm-exit-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.zcm-exit-popup {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 28px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.zcm-exit-popup-overlay.active .zcm-exit-popup {
    transform: scale(1) translateY(0);
}

/* Badge at top of popup */
.zcm-exit-popup-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.zcm-exit-popup-badge img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.zcm-exit-popup-badge-emoji {
    font-size: 56px;
    line-height: 1;
}

.zcm-exit-popup-header {
    margin-bottom: 20px;
}

.zcm-exit-popup-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.zcm-exit-popup-text {
    font-size: 14px;
    color: #4b5563;
    margin: 0;
    line-height: 1.5;
}

.zcm-exit-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* CTA Button - Card style like the main button */
.zcm-exit-popup-cta {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 18px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    text-align: left;
    gap: 14px;
    position: relative;
    overflow: hidden;
    /* Glow + subtle scale animation */
    animation: zcm-popup-cta-glow 2.5s ease-in-out infinite, zcm-popup-cta-scale 4s ease-in-out infinite;
}

@keyframes zcm-popup-cta-glow {
    0%, 100% {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(255, 255, 255, 0);
    }
    50% {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.3);
    }
}

@keyframes zcm-popup-cta-scale {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.015);
    }
}

/* Shine effect on CTA */
.zcm-exit-popup-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 20%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.1) 80%,
        transparent 100%
    );
    transform: skewX(-20deg);
    animation: zcm-popup-shine 3.5s ease-in-out infinite;
}

@keyframes zcm-popup-shine {
    0% {
        left: -100%;
    }
    60%, 100% {
        left: 200%;
    }
}

.zcm-exit-popup-cta:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    filter: brightness(1.05);
    animation: none;
}

.zcm-exit-popup-cta:hover::before {
    animation: none;
}

.zcm-exit-popup-cta:active {
    transform: translateY(0) scale(0.98);
}

/* Icon badge (circular) */
.zcm-exit-popup-cta-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    font-size: 20px;
    animation: zcm-popup-icon-bounce 0.6s ease 0.3s both;
}

.zcm-exit-popup-cta-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

@keyframes zcm-popup-icon-bounce {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Text content */
.zcm-exit-popup-cta-content {
    flex: 1;
    min-width: 0;
}

.zcm-exit-popup-cta-label {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zcm-exit-popup-cta-subtext {
    font-size: 12px;
    opacity: 0.85;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Arrow */
.zcm-exit-popup-cta-arrow {
    font-size: 18px;
    font-weight: bold;
    opacity: 0.8;
    animation: zcm-popup-arrow-bounce 1.5s ease-in-out infinite;
}

@keyframes zcm-popup-arrow-bounce {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.7;
    }
    50% {
        transform: translateX(6px);
        opacity: 1;
    }
}

.zcm-exit-popup-cta:hover .zcm-exit-popup-cta-arrow {
    animation: none;
    transform: translateX(8px);
    opacity: 1;
}

/* Dismiss button */
.zcm-exit-popup-dismiss {
    display: block;
    width: 100%;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.zcm-exit-popup-dismiss:hover {
    color: #374151;
    background: #f3f4f6;
}

/* Mobile optimizations for exit popup */
@media (max-width: 480px) {
    .zcm-exit-popup {
        padding: 20px;
        border-radius: 14px;
        max-width: 100%;
    }

    .zcm-exit-popup-header {
        margin-bottom: 16px;
    }

    .zcm-exit-popup-title {
        font-size: 18px;
    }

    .zcm-exit-popup-text {
        font-size: 13px;
    }

    .zcm-exit-popup-cta {
        padding: 12px 14px;
        gap: 12px;
    }

    .zcm-exit-popup-cta-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 18px;
    }

    .zcm-exit-popup-cta-label {
        font-size: 14px;
    }

    .zcm-exit-popup-cta-subtext {
        font-size: 11px;
    }

    .zcm-exit-popup-cta-arrow {
        font-size: 16px;
    }
}


/* ==================== SKELETON LOADER FOR INSTANT PREVIEW ==================== */

/* Skeleton animation */
@keyframes zcm-skeleton-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* Side panel in preview mode (before full data loads) */
.zcm-side-panel.preview .zcm-skeleton {
    display: block;
}

.zcm-side-panel.preview .zcm-full-content {
    display: none;
}

.zcm-side-panel:not(.preview) .zcm-skeleton {
    display: none;
}

.zcm-side-panel:not(.preview) .zcm-full-content {
    display: block;
}

/* Skeleton elements */
.zcm-skeleton-line {
    height: 14px;
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: zcm-skeleton-pulse 1.5s ease-in-out infinite;
}

.zcm-skeleton-line.short {
    width: 60%;
}

.zcm-skeleton-line.medium {
    width: 80%;
}

.zcm-skeleton-line.full {
    width: 100%;
}

.zcm-skeleton-title {
    height: 22px;
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: zcm-skeleton-pulse 1.5s ease-in-out infinite;
    margin-bottom: 8px;
}

.zcm-skeleton-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f8fafc;
    border-left: 4px solid #e5e7eb;
    border-radius: 0 8px 8px 0;
    margin-bottom: 16px;
}

.zcm-skeleton-badge-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    border-radius: 50%;
    animation: zcm-skeleton-pulse 1.5s ease-in-out infinite;
}

.zcm-skeleton-badge-text {
    flex: 1;
}

.zcm-skeleton-badge-text .zcm-skeleton-line {
    margin-bottom: 6px;
}

.zcm-skeleton-badge-text .zcm-skeleton-line:last-child {
    margin-bottom: 0;
    height: 12px;
}

.zcm-skeleton-card {
    padding: 16px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    margin-bottom: 12px;
}

.zcm-skeleton-card .zcm-skeleton-line {
    margin-bottom: 8px;
}

.zcm-skeleton-card .zcm-skeleton-line:last-child {
    margin-bottom: 0;
}

/* Preview header with actual POI name */
.zcm-side-panel.preview .zcm-side-panel-title {
    /* Title is real, from URL params */
}

/* Preview description box */
.zcm-preview-layer-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-left: 4px solid var(--preview-color, #3b82f6);
}

.zcm-preview-layer-icon {
    font-size: 20px;
}

.zcm-preview-layer-name {
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
}

.zcm-preview-loading-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    margin-top: 16px;
}

.zcm-preview-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: zcm-spin 0.8s linear infinite;
}

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

/* Dark mode support for skeleton */
@media (prefers-color-scheme: dark) {
    .zcm-skeleton-line,
    .zcm-skeleton-title,
    .zcm-skeleton-badge-icon {
        background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
        background-size: 200% 100%;
    }

    .zcm-skeleton-badge,
    .zcm-skeleton-card {
        background: #1f2937;
        border-color: #374151;
    }

    .zcm-preview-layer-badge {
        background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%);
    }

    .zcm-preview-layer-name {
        color: #f3f4f6;
    }

    .zcm-preview-loading-text {
        color: #9ca3af;
    }

    .zcm-preview-spinner {
        border-color: #4b5563;
        border-top-color: #60a5fa;
    }
}

/* =====================================================
   v7.1.1: Map Footer CTA - "Votre club n'est pas référencé ?"
   Tout le bloc est cliquable avec meilleure lisibilité
   ===================================================== */
.zcm-map-footer-cta {
    margin-top: 16px;
    text-align: center;
}

.zcm-not-listed-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.zcm-not-listed-link:hover {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border-color: #a5b4fc;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    transform: translateY(-1px);
}

.zcm-not-listed-icon {
    font-size: 20px;
}

.zcm-not-listed-text {
    color: #475569;
}

.zcm-not-listed-cta {
    color: #4f46e5;
    font-weight: 600;
    padding-left: 6px;
    border-left: 1px solid #cbd5e1;
}

.zcm-not-listed-link:hover .zcm-not-listed-cta {
    color: #4338ca;
}

/* v7.1.1: Website link icon in side panel header */
.zcm-website-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.zcm-website-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    transform: scale(1.1);
}

/* Dark mode for CTA and website button */
@media (prefers-color-scheme: dark) {
    .zcm-not-listed-link {
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        border-color: #475569;
    }

    .zcm-not-listed-link:hover {
        background: linear-gradient(135deg, #312e81 0%, #3730a3 100%);
        border-color: #6366f1;
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
    }

    .zcm-not-listed-text {
        color: #cbd5e1;
    }

    .zcm-not-listed-cta {
        color: #a5b4fc;
        border-left-color: #64748b;
    }

    .zcm-not-listed-link:hover .zcm-not-listed-cta {
        color: #c7d2fe;
    }

    .zcm-website-btn:hover {
        background: rgba(129, 140, 248, 0.15);
    }
}