/**
 * Map Marker Block Styles
 *
 * @package Mapthread
 */

// Editor styles
.wp-block-mapthread-map-marker {
    .mapthread-map-marker-editor {
        padding: 1rem;
        border: 1px solid #ddd;
        border-left: 4px solid #2271b1;
        border-radius: 2px;
        background: #f9f9f9;
    }

    .mapthread-map-marker-display {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .mapthread-map-marker-icon {
        font-size: 1.5rem;
        color: #2271b1;

        .dashicons {
            width: 1.5rem;
            height: 1.5rem;
            font-size: 1.5rem;
        }
    }

    .mapthread-map-marker-info {
        flex: 1;
    }

    .mapthread-map-marker-title {
        display: block;
        font-size: 1rem;
        font-weight: 600;
        color: #1e1e1e;
        margin-bottom: 0.25rem;
    }

    .mapthread-map-marker-title-empty {
        color: #757575;
        font-style: italic;
    }

    .mapthread-map-marker-coords {
        font-size: 0.875rem;
        color: #757575;
        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    }

    .mapthread-map-marker-address {
        color: #555;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    }

    // Notices
    .components-notice {
        margin-bottom: 0.75rem;
    }

    // Inspector controls styling
    .components-panel__body {
        .components-base-control {
            margin-bottom: 1rem;
        }

        .components-base-control__help {
            font-size: 0.75rem;
            color: #757575;
            margin-top: 0.25rem;
        }
    }
}

// Address Search Component Styles
.mapthread-address-search {
    position: relative;
    margin-bottom: 16px;

    &__loading {
        display: flex;
        justify-content: center;
        padding: 8px;
    }

    &__results {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 100;
        margin: 0;
        padding: 0;
        list-style: none;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        max-height: 250px;
        overflow-y: auto;
    }

    &__result {
        padding: 10px 12px;
        cursor: pointer;
        border-bottom: 1px solid #eee;
        transition: background-color 0.15s ease;

        &:last-child {
            border-bottom: none;
        }

        &:hover,
        &:focus {
            background: #f0f0f0;
            outline: none;
        }
    }

    &__result-name {
        display: block;
        font-size: 13px;
        color: #1e1e1e;
        line-height: 1.4;
    }

    &__result-type {
        display: block;
        font-size: 11px;
        color: #757575;
        text-transform: capitalize;
        margin-top: 2px;
    }

    &__no-results {
        padding: 12px;
        text-align: center;
        color: #757575;
        font-size: 13px;
        background: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-top: 4px;
    }

    &__preview {
        margin-top: 12px;
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid #ddd;
    }

    &__map {
        position: relative;
        width: 256px;
        height: 180px;
        overflow: hidden;
        background: #f0f0f0;
    }

    &__tile {
        width: 256px;
        height: 256px;
        display: block;
        margin-top: -38px; // Center the tile vertically in preview
    }

    &__marker {
        position: absolute;
        width: 12px;
        height: 12px;
        background: #e74c3c;
        border: 2px solid #fff;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        transform: translate(-50%, -50%);
        pointer-events: none;
    }
}

// Frontend styles (minimal — main styles in mapthread-frontend.scss)
.mapthread-marker {
    // Invisible scroll anchor; styled by frontend stylesheet
    display: block;
    height: 0;
    overflow: hidden;
}