/* ===== Tabs wrapper ===== */

.tabs {
    margin-top: 15px;
    border-bottom: 2px solid #ddd;
}

/* ===== Header ===== */

.tabs-header {
    background: #f5f5f5;
    padding: 4px 6px;
    padding-left: 0px;
    font-weight: 600;
    font-size: 1.3rem;
    border-bottom: 1px solid #ddd;
}

/* ===== Tabs navigation bar ===== */

.tabs-nav {
    display: flex;
    gap: 5px;
    /* gap: 14px; */
    padding: 0 6px;

    overflow-x: auto;
    white-space: nowrap;

    -webkit-overflow-scrolling: touch;
    background: #fff;
}

/* hide scrollbar mobile */
.tabs-nav::-webkit-scrollbar {
    display: none;
}
.tabs-nav {
    scrollbar-width: none;
}

/* ===== Tab buttons ===== */

.tablink {
    flex: 0 0 auto;

    padding: 10px 4px 8px 4px;   /* по-компактно от оригинала */
    /* background: transparent; */
    border: none;

    font-size: 0.95rem;
    font-weight: 500;
    color: #555;

    cursor: pointer;

    transition: color 0.2s ease, border-bottom 0.2s ease;

    border-bottom: 3px solid transparent;

    /* 👇 Премахва оцветяването на бутона при докосване, което се прави от браузърите*/
    -webkit-tap-highlight-color: transparent;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background: none !important;
}

/* hover desktop */
.tablink:hover {
    color: #3498db;
}

/* ACTIVE TAB */
.tablink.active {
    color: #007bff;
    border-bottom: 3px solid #007bff;
}

/* ===== Tab content ===== */

.tabcontent {
    padding: 18px;
    margin-top: 10px;
    background: white;

    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* ===== Mobile tweak ===== */

@media (max-width: 600px) {

    .tabs-header {
        font-size: 1rem;
    }

    .tablink {
        padding: 9px 2px 7px 2px;
        font-size: 0.9rem;
    }

    .tabcontent {
        padding: 14px;
    }
}