/**
 * Bayi Harita Widget CSS (BASE)
 * 
 * Tüm layout'larda ortak kullanılan stiller
 * Layout-specific stiller ayrı dosyalarda:
 * - assets/css/layouts/default-layout.css
 * - assets/css/layouts/floating-layout.css
 * 
 * @package Bayiler_Plugin
 * @version 2.0.0
 */

/* ========================================
   GENEL STILLER (Tüm Layout'larda Ortak)
   ======================================== */

/**
 * Harita Container
 */
.bayi-harita-container {
    margin-bottom: 30px;
    position: relative;
}

/**
 * Harita
 */
.bayi-harita {
    width: 100%;
    height: 400px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

/**
 * Yakınlık Bilgi Mesajı
 * loadBayiler() ve loadNearbyBayiler() tarafından ekleniyor
 */
.bayi-yakin-bilgi {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    border-radius: 4px;
    color: #856404;
    font-size: 14px;
    line-height: 1.4;
}

/* ========================================
   INFO WINDOW (Marker Popup)
   ======================================== */

/**
 * Google Maps Info Window Override
 */
.gm-style-iw-chr {
    position: absolute;
    right: -12px;
    top: -12px;
}

.gm-style .gm-style-iw-c {
    padding: 0;
}

.gm-style .gm-style-iw-d {
    min-height: 250px !important;
    max-height: min(60vh, 420px) !important;
    overflow: auto !important;
    display: flex;
    align-items: flex-end;
}

/**
 * Info Window Content
 */
.bayi-info-window {
    min-width: 200px;
    max-width: 265px;
    padding: 15px;
}

.bayi-info-window h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #333;
}

.bayi-info-window p {
    margin-bottom: 3px;
    line-height: 1.2;
}

/**
 * Tür Badge'leri
 */
.bayi-info-window .bayi-info-types,
.bayi-info-window .bayi-info-type {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.type-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background-color: #666;
    line-height: 1.4;
}

.type-badge:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/**
 * Dinamik Tür Renkleri
 * JS tarafından type-{typeId} class'ı ekleniyor
 */
.type-bayi {
    background-color: #009DA9;
}

.type-bayi:before {
    content: "\f5e4";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 12px;
    color: #fff;
    margin-right: 5px;
}

.type-servis {
    background-color: #000000;
}

.type-servis:before {
    content: "\f7d9";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 12px;
    color: #fff;
    margin-right: 5px;
}

.type-satis {
    background-color: #4caf50;
}

/**
 * Info Window Butonları
 */
.bayi-info-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
    font-weight: 600;
    justify-content: center;
}

.bayi-info-button {
    display: inline-block;
    padding: 8px 12px;
    background-color: #2271b1;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    flex: 1;
    min-width: 70px;
    transition: background-color 0.3s ease;
}

.bayi-info-button:hover {
    background-color: #135e96;
    color: #fff;
    text-decoration: none;
}

.bayi-info-button.bayi-info-directions {
    background-color: #4caf50 !important;
}

.bayi-info-button.bayi-info-call {
    background-color: red !important;
    flex-basis: 100%;
}

/**
 * Font Awesome İkonlar
 */
.bayi-info-button:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    text-rendering: auto;
    line-height: 1;
    padding-right: 5px;
}

.bayi-info-button.bayi-info-more:before {
    content: "\f129";
}

.bayi-info-button.bayi-info-directions:before {
    content: "\f5eb";
}

.bayi-info-button.bayi-info-call:before {
    content: "\f879";
}

/* ========================================
   RESPONSIVE (Ortak)
   ======================================== */

@media (max-width: 768px) {
    /* Info Window */
    .bayi-info-buttons {
        flex-direction: column;
    }

    .bayi-info-button {
        width: 100%;
    }

    .bayi-info-window p {
        margin-bottom: 4px;
    }

    .gm-style .gm-style-iw.gm-style-iw-c {
        min-width: 220px !important;
    }
}

/* ========================================
   NOT: Layout-Specific Stiller
   ======================================== */

/**
 * Default Layout Stilleri:
 * @see assets/css/layouts/default-layout.css
 * 
 * Floating Layout Stilleri:
 * @see assets/css/layouts/floating-layout.css
 * 
 * List-Map Layout Stilleri (gelecek):
 * @see assets/css/layouts/list-map-layout.css
 */