/* cloud-osgb-all-styles.css */

/* Hesaplama Tablosu Stili */
.cloud-osgb-hesaplama-container table {
    width: 100%;
    border: 1px solid #999;
    border-collapse: collapse;
    margin-top: 20px;
}

.cloud-osgb-hesaplama-container th,
.cloud-osgb-hesaplama-container td {
    border: 1px solid #999;
    padding: 10px;
    text-align: left;
}

.cloud-osgb-hesaplama-container th {
    background-color: #f2f2f2;
}

.cloud-osgb-hesaplama-container input[type="text"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    box-sizing: border-box; /* Border ve padding genişliğe dahil edilir */
}

/* Hesapla Butonu Stili - margin: auto ve display: block */
/* Shortcode içindeki buton için daha spesifik seçici */
.cloud-osgb-hesaplama-container button#hesapla_button,
/* Popup açma butonu için */
button.cloud-osgb-open-popup {
    background: var(--fs-color-primary);
    border: 0;
    color: white;
    border-radius: 10px;
    cursor: pointer;
    padding: 5px 10px;
}
 /* Butonun ID'si ile hedefliyoruz */
    #hesapla_button:hover {
		border:1px solid var(--fs-color-primary) !important;
        background: var(--fs-color-secondary) !important; 
        color: var(--fs-color-primary) !important;       
    }
    #hesapla_button {
        transition: background 0.3s ease, color 0.3s ease; /* Geçiş süresi ve tipi */
    }
/* Shortcode içindeki hesapla butonu için özel ortalama */
.cloud-osgb-hesaplama-container button#hesapla_button {
     margin: 10px auto; /* Yatayda ortalama, üst ve altta 10px boşluk */
     display: block; /* Kendi satırını kaplasın */
     width: auto; /* display:block olunca genişliği auto yapalım */
     min-width: 150px; /* Minimum genişlik */
     text-align: center; /* Metni ortala */
}

.cloud-osgb-hesaplama-container .answer-label {
    font-weight: bold;
}

/* Popup Modal Stili */
/* Modal Arka Planı */
.cloud-osgb-modal {
    display: none; /* BU KALMALI - CSS ile başlangıçta gizle */
    position: fixed; /* Sabit konumlandırma */
    z-index: 9999; /* Üstte olması için yüksek z-index */
    left: 0;
    top: 0;
    width: 100%; /* Tam genişlik */
    height: 100%; /* Tam yükseklik */
    overflow-y: auto; /* İçerik taştığında dikey kaydırma çubuğu modalın kendisinde */
    overflow-x: hidden; /* Yatay kaydırmayı engelle */
    background-color: rgba(0,0,0,0.6); /* Karartılmış arka plan */
    align-items: center;
    justify-content: center;
    padding: 20px; /* Kenarlardan boşluk */
    box-sizing: border-box; /* Padding dahil */
    /* JS addClass ile .show-modal ekleyecek */
}

/* Modal Açıkken Body Kaydırmayı Engelle - Mobil Sorunları İçin Önemli! */
body.cloud-osgb-modal-open {
    overflow: hidden !important; /* Diğer stilleri geçersiz kılmak için */
    position: fixed; /* iOS safari için kaydırma sorunlarını çözmeye yardımcı olabilir */
    width: 100%;
}

/* Modal gösterildiğinde kullanılacak sınıf */
.cloud-osgb-modal.show-modal {
    display: flex !important; /* !!! Bu kural JS addClass ile eklenecek ve çok yüksek önceliğe sahip olacak */
}


/* Modal İçeriği */
.cloud-osgb-modal-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    width: 90%; /* Varsayılan genişlik */
    max-width: 600px; /* Maksimum genişlik */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    position: relative; /* Kapatma butonu için */
    box-sizing: border-box; /* Padding ve border genişliğe dahil edilir */
    overflow-y: auto; /* Modal içeriği kendi içinde kaydırılabilir olsun */
    max-height: calc(100vh - 40px); /* Ekran yüksekliğinden padding kadar az */
}

/* Kapatma Butonu */
.cloud-osgb-close-button {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    position: absolute; /* Modal içeriğine göre konumlanır */
    top: 10px;
    right: 20px;
    cursor: pointer;
    z-index: 10; /* Kapatma butonunun üstte olmasını sağla */
    background: transparent; /* Arka planı şeffaf yap */
    border: none; /* Kenarlığı kaldır */
    padding: 5px; /* Tıklama alanını genişlet */
    line-height: 1; /* Dikey hizalamayı ayarla */
}

.cloud-osgb-close-button:hover,
.cloud-osgb-close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Responsive Tasarım İçin */
@media screen and (max-width: 768px) {
    .cloud-osgb-hesaplama-container table {
      /* Tablonun mobil görünümde taşmasını engellemek için kaydırılabilir container */
      display: block; /* Tabloyu blok element gibi davranmaya zorla */
      width: 100%; /* Genişliği tam yap */
      overflow-x: auto; /* Yatay kaydırma çubuğu ekle */
      -webkit-overflow-scrolling: touch; /* iOS'ta daha akıcı kaydırma */
      /* white-space: nowrap; */ /* İsteğe bağlı: Hücre içeriğinin tek satırda kalmasını sağlar */
    }

     /* Tablo hücreleri ve başlıkları için mobil stiller (isteğe bağlı, data-label kullanmıyorsanız silebilirsiniz) */
    .cloud-osgb-hesaplama-container th,
    .cloud-osgb-hesaplama-container td {
        /* Eğer tabloyu sadece kaydırılabilir yapmak istiyorsanız, bu kısmı değiştirmeyin veya kaldırın */
    }

    /* Data-label kullanarak mobil görünümde başlıkları eklemek (isteğe bağlı) */
    /* HTML yapısınıza data-label="Başlık Adı" şeklinde öznitelik eklemeniz gerekir */
    /* .cloud-osgb-hesaplama-container thead { display: none; } */ /* Başlık satırını gizle */
    /* .cloud-osgb-hesaplama-container td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
        margin-right: 10px;
    } */
}

/* Çok küçük ekranlar için daha fazla düzenleme yapılabilir */
@media screen and (max-width: 480px){
     /* Eğer 768px kuralı yeterli gelmezse ek stiller eklenebilir */
}