/* Бутони */
button{
    padding:8px 15px;
    margin-right:10px;
    margin-bottom:15px;
    border:none;
    background:#fbb633;
    color:white;
    border-radius:6px;
    cursor:pointer;
}

button:hover{
    opacity:0.8;
}

/* Таблица */
table{
    width:100%;
    border-collapse: collapse;
    margin-bottom:40px;
}

th, td{
    padding:10px;
    border:1px solid #ccc;
    text-align:center;
}

th{
    background:#fbb633;
    color:white;
}

/* Секция текст + диаграма */
.info-section{
    display:flex;
    gap:40px;
    align-items:flex-start;
    margin-top:40px;
}

.text{
    flex:1;
}

.chart-container{
    flex:1;
}

canvas{
    width:100% !important;
}

/* Респонсив */
@media(max-width:768px){

    table, thead, tbody, th, td, tr{
        display:block;
    }

    thead{
        display:none;
    }

    tr{
        margin-bottom:15px;
        border:1px solid #ddd;
        padding:10px;
        border-radius:10px;
        background:#f9f9f9;
    }

    td{
        border:none;
        text-align:left;
        padding:8px 5px;
    }

    td:before{
        font-weight:bold;
        display:block;
        margin-bottom:3px;
    }

    td:nth-of-type(1):before { content: "Име на ждрелото"; }
    td:nth-of-type(2):before { content: "Дължина (м)"; }
    td:nth-of-type(3):before { content: "Средна височина (м)"; }
    td:nth-of-type(4):before { content: "Начало"; }
    td:nth-of-type(5):before { content: "Край"; }

    .info-section{
        flex-direction:column;
    }
}