/**


 * FuelGuard Overlapping Badge Widget Styles


 * @package FuelGuard


 * @version 1.0.0


 */





@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;800;900&display=swap');





/* Outer Wrapper (resim + badge) */


.badge-outer-wrapper {


    text-align: center;


}





/* Badge Images Row */


.badge-images-row {


    display: flex;


    justify-content: center;


    align-items: center;


    gap: 0.5rem;


    margin-bottom: 0.5rem;


    width: 100%;


    max-width: 100%;


    padding: 0;


}





.badge-image {


    width: 60px;


    height: 60px;


    display: flex;


    align-items: center;


    justify-content: center;


    overflow: hidden;


    border-radius: 8px;


    background: #f8f9fa;


    box-shadow: 0 2px 8px rgba(0,0,0,0.1);


    transition: transform 0.3s ease;


}





.badge-image:hover {


    transform: scale(1.05);


}





.badge-image img {


    width: 100%;


    height: 100%;


    object-fit: cover;


}





.badge-image-placeholder {


    width: 60px;


    height: 60px;


    visibility: hidden;


}





/* Ana Kapsayıcı */


.mini-overlapping-badge-wrapper {


    display: flex;


    flex-direction: column;


    justify-content: flex-start;


    align-items: center;


    min-height: 180px; 


    background-color: #ffffff;


    padding: 20px 10px;


    position: relative; 


    max-width: 200px; 


    margin: 15px auto;


    overflow: visible;


    box-sizing: border-box;


}





.mini-overlapping-badge-circles {


    display: flex;


    justify-content: center;


    align-items: flex-end;


}


/* Tekil Rozet Alanı (Daire) */


.mini-overlapping-badge-circle {


    width: 90px; 


    height: 90px;


    border-radius: 50%;


    display: flex;


    flex-direction: column;


    align-items: center;


    justify-content: center;


    color: white;


    font-family: 'Montserrat', sans-serif;


    font-weight: 800;


    font-size: 1em;


    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);


    border: 2px solid white;


    transition: transform 0.3s ease, z-index 0s, box-shadow 0.3s ease;


    position: relative; 


    z-index: 10; 


    text-align: center;


    margin-left: -10px;


    text-decoration: none;


    cursor: pointer;


    overflow: visible;


    padding: 8px;


}





/* Badge Image Inside Circle */


.badge-image-inner {


    width: 35px;


    height: 35px;


    min-width: 35px;


    min-height: 35px;


    display: block;


    margin-bottom: 2px;


    border-radius: 6px;


    overflow: hidden;


    position: relative;


    z-index: 2;


    background: rgba(255, 255, 255, 0.9);


    flex-shrink: 0;


}





.badge-image-inner img {


    width: 100%;


    height: 100%;


    object-fit: contain;


    display: block;


    position: relative;


    z-index: 2;


}





/* İlk rozetin sol marjini sıfırlanmalı */


.mini-overlapping-badge-circle:first-child {


    margin-left: 0;


}





/* Fare üzerine gelindiğinde */


.mini-overlapping-badge-circle:hover {


    transform: scale(1.1) translateY(-5px); 


    z-index: 50 !important;


    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);


}





/* Link olduğunda hover efekti */


a.mini-overlapping-badge-circle:hover {


    color: white;


}





/* Rozet Metin İçeriği */


.mini-badge-text-content {


    display: flex; 


    flex-direction: column;


    justify-content: center;


    align-items: center;


    padding: 5px;


    position: relative;


    z-index: 1;


}





/* Ana Başlık */


.mini-badge-main-text {


    display: block;


    font-size: 0.55em; 


    line-height: 1.1;


    font-weight: 800;


    padding: 0 3px;


    flex-shrink: 1;


}





.mini-badge-sub-text {


    display: none; 


}





/* Responsive */


@media (max-width: 768px) {


    .mini-overlapping-badge-circle {


        width: 70px;


        height: 70px;


        font-size: 0.85em;


    }


    


    .mini-badge-main-text {


        font-size: 0.55em;


    }


    


    .mini-overlapping-badge-wrapper {


        max-width: 120px;


        min-height: 100px;


    }


}