/* === GENEL REZERVASYON BARI KAPSAYICISI === */
.por-rezervasyon-bari-wrapper {
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}
.por-rezervasyon-bari-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    background: #fff;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    align-items: center;
}
.por-form-field {
    padding: 10px 20px;
    border-right: 1px solid #f0f0f0;
}
.por-form-field:last-of-type { border-right: none; }
.por-form-field label {
    font-size: 13px; color: #888; display: block; margin-bottom: 5px;
}
.por-form-field .dashicons {
    margin-right: 5px;
}
.por-form-field input, .por-form-field select {
    border: none; width: 100%; font-size: 16px; font-weight: bold; outline: none; background: transparent; padding: 5px 0;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.por-form-submit { padding-left: 10px; }
.por-form-submit .por-search-button {
    background: #111; color: #fff; border: none; border-radius: 50%; width: 55px; height: 55px; cursor: pointer; font-size: 24px; display: flex; align-items: center; justify-content: center;
    transition: background-color 0.3s;
}
.por-search-button:hover { background-color: #333; }

/* === MİSAFİR SEÇİM POPUP STİLLERİ === */
.por-guest-selector-wrapper { position: relative; cursor: pointer; }
#por-guest-summary-display { font-size: 16px; font-weight: bold; }
#por-guest-popup {
    position: absolute; top: 100%; left: 0; width: 300px; background: #fff; border: 1px solid #ddd;
    border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.15); padding: 15px; z-index: 10;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.por-guest-popup-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; }
.por-guest-popup-row span { font-weight: 500; }
.por-guest-popup-row small { display: block; color: #888; font-size: 12px; }
.por-guest-counter { display: flex; align-items: center; gap: 15px; }
.por-guest-counter .counter-btn {
    width: 28px; height: 28px; border-radius: 50%; border: 1px solid #ccc;
    background: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
.por-guest-counter .counter-btn:disabled { opacity: 0.5; cursor: not-allowed; }
#por-guest-popup-save {
    width: 100%; padding: 10px; background: #111; color: #fff; border: none;
    border-radius: 5px; font-size: 16px; cursor: pointer; margin-top: 10px;
}
.por-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.por-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: #2196F3; }
input:checked + .slider:before { transform: translateX(20px); }
.slider.round { border-radius: 24px; }
.slider.round:before { border-radius: 50%; }


/* === REZERVASYON SAYFASI GENEL === */
#por-rezervasyon-container { max-width: 1200px; margin: 40px auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.por-rezervasyon-content { display: grid; grid-template-columns: 320px 1fr; gap: 40px; margin-top: 30px; }
.por-sidebar, .por-main-content { width: 100%; }

/* İlerleme Çubuğu */
.por-progress-bar { display: flex; justify-content: space-between; align-items: flex-start; position: relative; width: 80%; margin: 0 auto 50px auto; }
.por-progress-bar::before { content: ''; position: absolute; top: 17px; left: 0; width: 100%; height: 3px; background-color: #e0e0e0; z-index: 1; }
.por-progress-step { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 2; color: #999; font-weight: 500; }
.por-progress-step span { width: 45px; height: 45px; line-height: 35px; display: block; background-color: #fff; border: 3px solid #e0e0e0; border-radius: 50%; margin-bottom: 15px; font-size: 22px; font-weight: bold; transition: all 0.4s ease; }
.por-progress-step.active span { background-color: #4a90e2; border-color: #4a90e2; color: #fff; }
.por-progress-step.active { color: #333; font-weight: bold; }
.por-progress-step.completed span { background-color: #28a745; border-color: #1bcb0d; color: #fff; font-size: 22px; }
.por-progress-step.completed span::after { content: '\2713'; font-size: 20px; display: block; color: #fff; line-height: 35px; width: 100%; height: 100%; }

/* Sol Panel */
.por-sidebar-widget { background: #f8f9fa; border: 1px solid #e9ecef; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
.por-sidebar-widget h4 { margin: 0 0 10px 0; font-size: 16px; color: #555; border-bottom: 1px solid #ddd; padding-bottom: 10px; }
.por-sidebar-widget p { margin: 0; font-size: 18px; font-weight: 500; color: #333; }
.por-order-details #por-selected-room-info p { font-size: 16px; }
.por-total { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 15px; border-top: 1px solid #ddd; }
.por-total span { font-size: 18px; font-weight: 500; }
.por-total strong { font-size: 22px; color: #005f9e; }

/* Sağ Panel */
.por-step-content.active { display: block; }
.por-step-content { display: none; }

/* Oda Listesi */
.por-oda-listesi .por-oda-item { display: grid; grid-template-columns: 220px 1fr auto; gap: 25px; padding: 20px; border: 1px solid #e9ecef; border-radius: 8px; margin-bottom: 20px; background: #fff; transition: box-shadow 0.3s; }
.por-oda-item:hover { box-shadow: 0 5px 25px rgba(0,0,0,0.08); }
.por-oda-gorsel img { width: 100%; height: 160px; object-fit: cover; border-radius: 5px; }
.por-oda-bilgileri h3 { margin: 0 0 10px 0; font-size: 22px; }
.por-oda-meta { display: flex; flex-wrap: wrap; gap: 15px; color: #555; margin: 10px 0; font-size: 14px; align-items: center; }
.por-oda-meta .dashicons { font-size: 18px; }
.por-more-info-trigger { color: #007bff; text-decoration: none; font-size: 14px; font-weight: 500; }
.por-oda-detayli-bilgi { display: none; margin-top: 15px; padding-top: 15px; border-top: 1px solid #f0f0f0; }
.por-oda-aciklama p { margin-top: 0; }
.por-oda-ozellikler { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 15px; font-size: 14px; }
.por-oda-ozellikler span { display: flex; align-items: center; }
.por-oda-ozellikler .dashicons { color: #28a745; margin-right: 5px; }
.por-oda-fiyat-secim { text-align: right; border-left: 1px solid #f0f0f0; padding-left: 25px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; }
.por-oda-fiyat-secim .por-oda-toplam-fiyat { display: block; font-size: 28px; font-weight: 700; color: #3b4b63; margin-bottom: 4px; }
.por-oda-fiyat-secim small { font-size: 14px; color: #777; margin-bottom: 20px; }
.por-oda-fiyat-secim .por-oda-sec-btn { background-color: #e74c3c; color: #fff; border: none; border-radius: 8px; padding: 14px 40px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background-color 0.3s, transform 0.2s; white-space: nowrap; }
.por-oda-fiyat-secim .por-oda-sec-btn:hover { background-color: #c0392b; transform: translateY(-2px); }

/* İletişim Formu */
#por-contact-form .por-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
#por-contact-form .por-form-group { margin-bottom: 20px; }
#por-contact-form label { display: block; margin-bottom: 8px; font-weight: 500; }
#por-contact-form input[type="text"], #por-contact-form input[type="email"], #por-contact-form input[type="tel"] { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 5px; }
.por-payment-group { margin-top: 30px; }
.por-payment-method-box { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.por-payment-method-header { background-color: #f8f9fa; padding: 15px 20px; font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #ddd; }
.por-payment-method-details { padding: 20px; background-color: #fff; }
.por-payment-method-details p { margin-top: 0; font-size: 14px; color: #555; }
.por-payment-method-details ul { list-style: none; padding: 0; margin: 15px 0 0 0; }
.por-payment-method-details li { padding: 6px 0; display: flex; font-size: 15px; }
.por-payment-method-details li strong { width: 120px; flex-shrink: 0; color: #333; }
.por-payment-method-details li span { color: #666; }

/* === GÜNCELLENMİŞ: Misafir Seçim Popup Stilleri === */

/* Artı/Eksi Butonlarını Düzeltme */
.por-guest-counter .counter-btn {
    display: flex;          /* Flexbox ile hizalamayı etkinleştir */
    align-items: center;    /* Dikeyde ortala */
    justify-content: center;/* Yatayda ortala */
    padding: 0;             /* Tarayıcının varsayılan boşluğunu kaldır */
    font-size: 20px;        /* İkonları biraz daha belirgin yap */
    font-weight: bold;      /* İkonları kalın yap */
    color: #555;            /* İkon rengini belirle */
}

/* Kaydet Butonunun Kapsayıcısı (Footer) */
.por-guest-popup-footer {
    display: flex;              /* Flexbox'ı etkinleştir */
    justify-content: flex-end;  /* İçeriği (butonu) sağa hizala */
    margin-top: 15px;           /* Üstündeki elemanla arasını aç */
    padding-top: 15px;          /* Üstüne bir ayırıcı çizgi ekle */
    border-top: 1px solid #f0f0f0;
}

/* Kaydet Butonunu Düzeltme */
#por-guest-popup-save {
    width: auto;            /* Genişliği otomatik ayarla (içeriğe göre) */
    padding: 8px 25px;      /* Butonun iç boşluğunu ayarla (daha küçük) */
    font-size: 14px;        /* Yazı boyutunu küçült */
    margin-top: 0;          /* Üst boşluğu footer'dan alacağı için sıfırla */
}

/* === YENİ: Rezervasyon Özeti (Adım 3) Stilleri === */

.por-summary-section {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 25px;
}

.por-summary-section h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 18px;
    color: #333;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.por-summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.por-summary-list li {
    display: flex;
    justify-content: flex-start;
    padding: 8px 0;
    font-size: 16px;
    color: #555;
}

.por-summary-list li strong {
    width: 150px; /* Tüm başlıkların aynı hizada durmasını sağlar */
    flex-shrink: 0; /* Genişliğin küçülmesini engeller */
    font-weight: 500;
    color: #222;
}

/* Toplam Tutar için özel stil */
.por-summary-list li .summary-final-price {
    font-size: 1.2em;
    font-weight: bold;
    color: #005f9e;
}

/* Navigasyon Butonları */
.por-form-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.por-form-navigation .button {
    padding: 12px 35px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 25px; /* Yuvarlak butonlar */
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
}

.por-form-navigation .button.button-primary {
    background-color: #c0392b; /* Kırmızı renk */
    border-color: #c0392b;
    color: #fff;
}

/* ========================================================================= */
/* === MOBİL UYUMLULUK (RESPONSIVE) STİLLERİ === */
/* ========================================================================= */

/* Ekran genişliği 768px veya daha az olduğunda bu kurallar geçerli olur */
@media (max-width: 768px) {

    /* === REZERVASYON BARI === */

    .por-rezervasyon-bari-form {
        /* Yatay grid yapısını iptal et, alt alta diz */
        grid-template-columns: 1fr; 
        gap: 15px; /* Elemanlar arasına dikey boşluk ekle */
        padding: 20px; /* İç boşluğu artır */
    }

    .por-form-field {
        /* Elemanlar arasındaki dikey çizgileri kaldır */
        border-right: none;
        padding: 0;
    }

    /* Misafir seçimi popup'ının konumunu düzelt */
    #por-guest-popup {
        left: 0;
        right: 0;
        width: auto; /* Genişliği otomatik yap, kapsayıcıya uysun */
    }

    /* Arama butonunu ortala ve tam genişlik yap */
    .por-form-submit {
        padding-left: 0;
        margin-top: 10px;
    }

    .por-form-submit .por-search-button {
        width: 100%;       /* Tam genişlik */
        border-radius: 8px; /* Daire yerine dikdörtgen yap */
        height: 50px;
    }
    .por-form-submit .por-search-button .dashicons {
        font-size: 28px; /* İkonu biraz büyüt */
    }


    /* === REZERVASYON SAYFASI === */

    .por-rezervasyon-content {
        /* Yan yana duran sol ve sağ paneli alt alta getir */
        grid-template-columns: 1fr;
    }

    .por-sidebar {
        width: 100%;
    }

    /* Oda listesi kartını dikey hale getir */
    .por-oda-item {
        grid-template-columns: 1fr; /* Tek sütunlu yapı */
        text-align: center; /* İçeriği ortala */
    }

    .por-oda-gorsel img {
        width: 100%; /* Görseli tam genişlik yap */
        height: 200px;
        margin-bottom: 15px;
    }
    
    .por-oda-fiyat-secim {
        border-left: none; /* Dikey çizgiyi kaldır */
        border-top: 1px solid #f0f0f0; /* Yatay ayırıcı çizgi ekle */
        padding-left: 0;
        padding-top: 20px;
        margin-top: 20px;
        align-items: center; /* Fiyat ve butonu ortala */
    }
}

/* Daha küçük telefon ekranları için ek ayar (isteğe bağlı) */
@media (max-width: 480px) {
    /* İletişim formundaki yan yana duran alanları alt alta getir */
    #por-contact-form .por-form-row {
        grid-template-columns: 1fr;
    }
}