/* =========================
   Misrota Transfer – Front CSS
   ========================= */

/* KART / CONTAINER */
.misrota-widget {
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 16px !important;
    padding: 16px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .06) !important;
    overflow: visible !important;
    position: relative !important;
}

/* ====== ÜST FORM SATIRI ======
   Kalkış | 📍 | Varış | Tarih | Araç | Hesapla  */
.misrota-grid {
    display: grid !important;
    grid-template-columns:
        minmax(220px, 2fr) 56px minmax(220px, 2fr) minmax(180px, 1.2fr) minmax(200px, 1.2fr) auto !important;
    gap: 16px !important;
    align-items: end !important;
    margin-bottom: 14px !important;
}

/* Taşma/üst üste binmeyi engelle */
.misrota-grid>* {
    min-width: 0 !important;
}

/* Tablet */
@media (max-width:1200px) {
    .misrota-grid {
        grid-template-columns: 1fr 56px 1fr 1fr !important;
    }

    .misrota-field--button {
        grid-column: 4 / 5 !important;
    }
}

/* Mobil - ÖNEMLİ: Lokasyon butonu kalkış ile yan yana */
@media (max-width:780px) {
    .misrota-grid {
        grid-template-columns: 1fr auto !important;
        gap: 8px !important;
    }

    .misrota-field:nth-child(1) {
        grid-column: 1 / 2 !important;
    }

    .misrota-field--loc {
        grid-column: 2 / 3 !important;
        grid-row: 1 !important;
    }

    .misrota-field:nth-child(3) {
        grid-column: 1 / -1 !important;
    }

    .misrota-field:nth-child(4),
    .misrota-field:nth-child(5),
    .misrota-field--button {
        grid-column: 1 / -1 !important;
    }
}

/* ====== ALANLAR ====== */
.misrota-field {
    display: flex !important;
    flex-direction: column !important;
}

.misrota-field label,
.misrota-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 0 6px 2px !important;
}

/* ====== INPUT / SELECT ====== */
.misrota-input {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1px solid #dfe3e6 !important;
    border-radius: 12px !important;
    background: #fff !important;
    font-size: 14px !important;
    min-height: 44px !important;
    height: 44px !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: all .15s ease !important;
    -webkit-appearance: none !important;
}

.misrota-input:focus {
    border-color: #2684ff !important;
    box-shadow: 0 0 0 3px rgba(38, 132, 255, .15) !important;
}

/* SELECT görünümü */
select.misrota-input,
#misrota-vehicle {
    color: #111 !important;
    padding-right: 36px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23909aa3' d='M6 8L0 0h12z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px 8px !important;
    background-color: #fff !important;
    cursor: pointer !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

select.misrota-input option,
#misrota-vehicle option {
    color: #111 !important;
    background: #fff !important;
    padding: 10px !important;
    font-size: 14px !important;
    display: block !important;
}

select.misrota-input option:disabled,
#misrota-vehicle option:disabled {
    color: #999 !important;
}

/* 📍 konum butonu */
#misrota-loc,
.misrota-pin {
    width: 56px !important;
    height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #dfe3e6 !important;
    border-radius: 12px !important;
    background: #fff !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
    flex-shrink: 0 !important;
}

#misrota-loc:hover,
.misrota-pin:hover {
    background: #f8f9fa !important;
    border-color: #2684ff !important;
}

#misrota-loc:active,
.misrota-pin:active {
    transform: scale(0.95) !important;
}

/* ====== BUTONLAR ====== */
.misrota-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    border: 1px solid #dfe3e6 !important;
    background: #fff !important;
    color: #111 !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    transition: all .15s ease !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

.misrota-btn--primary,
#misrota-calc {
    background: #ff7a00 !important;
    border-color: #ff7a00 !important;
    color: #fff !important;
}

.misrota-btn--primary:hover,
#misrota-calc:hover {
    filter: brightness(.95) !important;
}

#misrota-create {
    width: 100% !important;
    margin-top: 16px !important;
}

/* ====== HARİTA - CRITICAL FIX ====== */
.misrota-map,
#misrota-map {
    /* Sabit yükseklik - VH kullanma */
    height: 340px !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid #eee !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    opacity: 1 !important;
    /* KRITIK: Taşmayı engelle */
    z-index: 1 !important;
}

/* Mobilde harita */
@media (max-width:780px) {

    .misrota-map,
    #misrota-map {
        height: 280px !important;
    }
}

/* Yanlışlıkla eklenen inline stilleri iptal et */
#misrota-map[style*="display:none"],
#misrota-map[style*="display: none"] {
    display: block !important;
}

/* VH veya viewport birimlerini iptal et */
#misrota-map[style*="vh"],
#misrota-map[style*="vw"] {
    height: 340px !important;
    width: 100% !important;
}

@media (max-width:780px) {

    #misrota-map[style*="vh"],
    #misrota-map[style*="vw"] {
        height: 280px !important;
    }
}

/* ====== SONUÇ KARTI ====== */
.misrota-result {
    margin-top: 14px !important;
    position: relative !important;
    z-index: 2 !important;
}

.misrota-card {
    border: 1px solid #eee !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    background: #fafbfc !important;
}

.misrota-card .row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 6px !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.misrota-card .row:last-child {
    border-bottom: none !important;
}

.misrota-total {
    font-size: 20px !important;
    font-weight: 700 !important;
}

.misrota-hidden {
    display: none !important;
}

/* ====== GOOGLE PLACES DROPDOWN ====== */
.pac-container {
    z-index: 999999 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    margin-top: 4px !important;
    background: white !important;
    border: 1px solid #ddd !important;
    font-family: inherit !important;
    position: absolute !important;
    /* display: block kaldırıldı - Google yönetsin */
}

/* Sadece inline display:none varsa override et */
.pac-container[style*="display: none"][data-force-show],
.pac-container[style*="display:none"][data-force-show] {
    display: block !important;
}

.pac-item {
    padding: 10px 12px !important;
    cursor: pointer !important;
    border-bottom: 1px solid #eee !important;
    line-height: 1.4 !important;
    font-size: 14px !important;
}

.pac-item:hover {
    background: #f5f5f5 !important;
}

.pac-item:last-child {
    border-bottom: none !important;
}

.pac-item-query {
    font-size: 14px !important;
    color: #111 !important;
    font-weight: 600 !important;
}

.pac-matched {
    font-weight: 700 !important;
    color: #2271b1 !important;
}

.pac-icon {
    display: none !important;
}

/* ====== TARIH INPUT ====== */
#misrota-date {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23909aa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 40px !important;
}

/* ====== SONUÇ KARTI GÖRÜNÜRLÜKs ====== */
#misrota-result {
    color: #111 !important;
    opacity: 1 !important;
}

#misrota-result .misrota-card {
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 12px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important;
}

#misrota-result .misrota-card * {
    color: #111 !important;
}

#misrota-result,
#misrota-result .misrota-card {
    filter: none !important;
}

/* ====== FLATPICKR ====== */
.flatpickr-calendar {
    z-index: 99999 !important;
}

/* ====== MOBİL DÜZENLEMELERİ ====== */
@media (max-width:780px) {

    .misrota-input,
    .misrota-btn,
    #misrota-loc {
        min-height: 48px !important;
        height: 48px !important;
        font-size: 16px !important;
    }

    .misrota-label {
        font-size: 14px !important;
    }
}

/* ====== iOS Safari DÜZELTME ====== */
@media screen and (-webkit-min-device-pixel-ratio:0) {

    select.misrota-input,
    textarea.misrota-input,
    input.misrota-input {
        font-size: 16px !important;
    }
}

/* ====== YOOTHEME / UK FRAMEWORK FIX ====== */
.uk-container,
.uk-section,
.uk-panel {
    overflow: visible !important;
}

/* YooTheme gizli sınıflarını iptal et */
.uk-hidden>#misrota-map,
.uk-hidden .misrota-widget,
.uk-hidden .misrota-map {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ====== GENEL TEMİZLİK ====== */
/* Gereksiz yükseklik override'larını kaldır */
.misrota-map[style*="min-height"] {
    min-height: auto !important;
}

/* Viewport birimlerini zorla iptal et */
.misrota-map {
    min-height: 0 !important;
    max-height: 340px !important;
}

@media (max-width:780px) {
    .misrota-map {
        max-height: 280px !important;
    }
}