/**
 * Public styles for Yandex Centers Map
 */

.ycm-map-container {
    margin: 20px 0;
}

.ycm-map {
    width: 100%;
    height: 500px; /* Default height, can be overridden by shortcode */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    overflow: hidden;
}

/* Balloon styles */
.ycm-balloon {
    padding: 10px;
}

.ycm-balloon-header {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.ycm-balloon-content {
    font-size: 14px;
    line-height: 1.4;
}

.ycm-stat-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 5px;
}

.ycm-stat-table th, 
.ycm-stat-table td {
    text-align: left;
    padding: 5px;
    border-bottom: 1px solid #eee;
}

.ycm-stat-table th {
    font-weight: bold;
    color: #666;
}

/* Custom placemark styles */
.ycm-placemark-low {
    color: green;
}

.ycm-placemark-medium {
    color: orange;
}

.ycm-placemark-high {
    color: red;
}

/* Responsive styles */
@media screen and (max-width: 768px) {
    .ycm-map {
        height: 400px; /* Default mobile height, can be overridden by shortcode */
        touch-action: manipulation; /* Improve touch handling */
    }
    
    .ycm-balloon {
        max-width: 250px;
        font-size: 14px;
    }
    
    /* Improved zoom controls for mobile */
    .ycm-zoom-controls {
        position: absolute;
        bottom: 20px;
        right: 10px;
        z-index: 100;
        display: flex;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 8px;
        padding: 5px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    .ycm-zoom-btn {
        width: 44px;
        height: 44px;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 50%;
        margin: 5px 0;
        font-size: 22px;
        line-height: 44px;
        text-align: center;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.2s, transform 0.1s;
    }
    
    .ycm-zoom-btn:active {
        background-color: #f0f0f0;
        transform: scale(0.95);
    }
    
    .ycm-zoom-reset {
        font-size: 18px;
    }
}

/* Extra small mobile devices */
@media screen and (max-width: 480px) {
    .ycm-map {
        height: 350px;
    }
    
    .ycm-zoom-controls {
        bottom: 15px;
        right: 5px;
    }
    
    .ycm-zoom-btn {
        width: 36px;
        height: 36px;
        font-size: 18px;
        line-height: 36px;
        margin: 3px 0;
    }
    
    .ycm-balloon {
        max-width: 220px;
        font-size: 13px;
    }
    
    .ycm-stat-table th, 
    .ycm-stat-table td {
        padding: 3px;
    }
}