/* ===== Clubs (theme-aware, no Bootstrap) ===== */
.clubs-page {
    margin-top: 14px;
}

/* Заглавия */
.clubs-h1 {
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--txt);
    line-height: 1.2;
}

.clubs-h2 {
    font-size: var(--fs-xl);
    font-weight: 800;
    color: var(--txt);
    line-height: 1.25;
    margin: 0 0 8px;
}

/* Header в списъка */
.clubs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.clubs-form {
    color: var(--txt);
}

/* Търсене */
.clubs-search {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.clubs-search-input {
    flex: 1;
}

/* Grid с клубове */
.clubs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.clubs-card {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px;
    color: inherit;
    text-decoration: none;
}

.clubs-logo {
    width: 76px;
    height: 76px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #fafafa;
}

.clubs-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.clubs-logo .ph {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #f7f7f7, #ececec);
}

.clubs-title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.2;
    font-weight: 800;
    color: var(--txt);
}

.clubs-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.clubs-desc {
    margin: 6px 0 0 0;
    color: var(--txt);
    line-height: 1.5;
    font-size: 0.75rem
}

/* Empty state */
.clubs-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30vh;
}

.clubs-empty-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 16px;
    text-align: center;
}

.clubs-empty-emoji {
    font-size: 2rem;
}

.clubs-empty-text {
    color: var(--txt-dim);
    margin-top: 6px;
}

/* Detail hero */
.clubs-hero {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px;
    margin-bottom: 12px;
}

.clubs-hero-logo {
    width: 112px;
    height: 112px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #fafafa;
}

.clubs-hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.clubs-hero-logo .ph {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #f7f7f7, #ececec);
}

.clubs-hero-info {
    min-width: 0;
}

.clubs-hero-desc {
    margin: 6px 0 0 0;
    color: var(--txt);
}

.clubs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.clubs-pro {
    background: #ffd166;
    color: #222;
    border-color: #e6b94f;
}

.clubs-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

/* Тяло */
.clubs-card-box {
    position: relative; /* важно за overlay/btn z-index логика */
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px;
}

.clubs-muted {
    color: var(--txt-dim);
}

/* Форма за създаване */
.clubs-form {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px;
    max-width: 720px;
}

.clubs-field {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
}

.clubs-label {
    font-weight: 700;
}

.clubs-error {
    color: #c54949;
    font-size: .92rem;
}

/* Clubs UI bits */
.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 4px;
    margin-top: 2px;
}

.form .form-row {
    margin: 8px 0;
}

.form .input {
    width: 100%;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    padding: 0 10px;
    color: var(--txt);
}

.form textarea.input {
    height: auto;
    min-height: 120px;
    padding: 8px 10px;
}

.club-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0 12px;
}

.news-list, .polls-list {
    display: grid;
    gap: 10px;
}

.news-card, .poll-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px;
}

.news-title {
    margin: 0 0 4px 0;
    font-size: 1.1rem;
}

.poll-q {
    margin: 0 0 6px 0;
    font-size: 1.1rem;
}

.poll-choices {
    display: grid;
    gap: 6px;
    margin: 8px 0;
}

.radio {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bar-row {
    display: grid;
    grid-template-columns: 3fr 4fr auto;
    gap: 8px;
    align-items: center;
}

.bar-label {
    text-align: right;
}

.bar {
    height: 10px;
    background: #f3f3f3;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.bar-fill {
    fill: var(--primary);
}

/* ---------------------------------------------------
   FIX: бутоните към форума да са имунни към overlay-и
   --------------------------------------------------- */

/* 1) Бутоните вътре в картата да „надделяват“ */
.clubs-card-box .btn,
.clubs-card-box .club-forum-link {
    position: relative;
    z-index: 3; /* над stretched-link/overlay */
    pointer-events: auto; /* гарантирано кликаеми */
}

/* 2) Типични overlay елементи да НЕ прихващат кликовете */
.clubs-card-box .stretched-link,
.clubs-card-box .card-overlay,
.clubs-card-box .overlay-link,
.clubs-card-box [data-overlay],
.clubs-card-box a.card-overlay,
.clubs-card-box a.stretched-link {
    pointer-events: none !important;
}

/* 3) Ако някой overlay е с абсолютна позиция – дръж го под бутоните */
.clubs-card-box .stretched-link,
.clubs-card-box .card-overlay,
.clubs-card-box .overlay-link,
.clubs-card-box [data-overlay] {
    position: absolute;
    inset: 0;
    z-index: 1; /* бутоните са z-index:3 */
}

/* 4) За всеки случай: линковете в clubs-card-box да не се „опъват“ върху целия контейнер */
.clubs-card-box a:not(.club-forum-link) {
    /* никакъв stretched effect тук */
    display: inline-flex;
    max-width: 100%;
    white-space: nowrap;
    text-decoration: none;
}

/* (опционално) ако имаш глобален стил, който прави .stretched-link в целия сайт –
   това ще го неутрализира само в clubs-card-box */
.clubs-card-box .stretched-link::after,
.clubs-card-box .stretched-link::before {
    content: none !important;
}

/* Кутията с бутона – нов stacking context, за да победи чужди z-index контексти */
.clubs-card-box {
    position: relative;
    isolation: isolate; /* създава нов контекст – полезно срещу външни overlays */
}

/* Бутоните към форума: по-висок z-index и кликаеми приоритетно */
.clubs-card-box .club-forum-link {
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

/* Типични stretched/overlay елементи вътре да не прихващат клика */
.clubs-card-box .stretched-link,
.clubs-card-box .card-overlay,
.clubs-card-box .overlay-link,
.clubs-card-box [data-overlay],
.clubs-card-box a.card-overlay,
.clubs-card-box a.stretched-link {
    pointer-events: none !important;
    z-index: 1;
}

.club-wrapper {
    background: #fff;
    border: 10px solid var(--primary);
    border-radius: 1rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
    padding: 0.5rem;
    margin: 1.5rem auto;
    max-width: 1200px;
}

.section-club-title {
    margin: 0 0 12px 0;
    font-size: 1.25rem;
    color: #2b2b2b;
    font-weight: 700;
}

/*.clubs-page .card-base{*/
/*  display: flex;               !* вертикален стък *!*/
/*  flex-direction: column;      !* <h1> над <form> *!*/
/*  align-items: center;         !* центриране по хоризонтала *!*/
/*  justify-content: flex-start; !* започва отгоре *!*/
/*}*/

/* Формата да е центрирана и с разумна ширина */
.clubs-page .clubs-form {
    width: min(720px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 12px; /* по избор – равномерни отстояния */
}

/* Заглавието – център (имаш го глобално, но за всеки случай) */
.clubs-page .clubs-h1 {
    text-align: center;
    margin: 0 0 16px 0;
}

.input {
    width: 100%;
}

/* layout */
/*.clubs-layout{*/
/*  display:grid;*/
/*  grid-template-columns: 250px 750px;*/
/*  gap: 20px;*/
/*  justify-content: center;    !* център в card-base *!*/
/*  align-items: start;*/
/*}*/

.clubs-sidebar {
    position: sticky;
    top: 1rem;
    align-self: start;
}

.clubs-side-title {
    margin: 0 0 .5rem 0;
    font-size: 1rem;
    font-weight: 600;
}

/* tabs list */
.my-clubs-tabs {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    gap: .4rem;
    max-height: calc(100vh - 100px);
    overflow: auto;
    padding-right: .25rem; /* за да не скрива скролът border-а */
}

.my-club-tab {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem .75rem;
    border: 1px solid var(--border, rgba(0, 0, 0, .08));
    border-radius: .75rem;
    background: var(--surface, #fff);
    text-decoration: none;
    line-height: 1.2;
    transition: border-color .15s ease, box-shadow .15s ease, transform .02s linear;
}

.my-club-tab:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.my-club-tab:active {
    transform: translateY(1px);
}

.my-club-tab img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: .35rem;
    flex: 0 0 24px;
}

.tab-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--primary);
    flex: 0 0 10px;
}

.tab-name {
    flex: 1 1 auto;
    font-size: .95rem;
    color: var(--text, #111);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tab-badge {
    font-size: .72rem;
    padding: .1rem .45rem;
    border-radius: .5rem;
    background: var(--primary);
    color: #fff;
    flex: 0 0 auto;
}

/* main column */
.clubs-main {
    min-width: 0;
}

/* за да работи ellipsis вътре */

/* responsive */
@media (max-width: 960px) {
    .clubs-layout {
        grid-template-columns: 1fr;
    }

    .clubs-sidebar {
        order: 2;
    }

    .clubs-main {
        order: 1;
    }
}


.pager {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: center;
    margin: 14px 0 4px;
}

.page-btn, .page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 .6rem;
    border: 1px solid var(--border);
    border-radius: .6rem;
    background: #fff;
    color: var(--txt);
    text-decoration: none;
    font-size: .95rem;
    box-shadow: var(--shadow);
}

.page-btn[aria-disabled="true"] {
    opacity: .45;
    pointer-events: none;
}

.page-num.is-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 20%, transparent);
    font-weight: 700;
}


/* ---------- ТЪРСАЧКА: да не се смачква ---------- */
.clubs-search {
    display: flex;
    flex-wrap: wrap; /* позволява пренасяне */
    gap: 8px;
    margin-bottom: 12px;
}

.clubs-search-input {
    flex: 1 1 260px; /* расте, но има разумен минимум */
    min-width: 0; /* критично, за да не избутва */
}

.clubs-search .btn {
    flex: 0 0 auto; /* бутоните не „ядат“ ширина от инпута */
}

/* На малък екран – всичко става на редове */
@media (max-width: 560px) {
    .clubs-search {
        display: grid;
        grid-template-columns: 1fr; /* всеки елемент на нов ред */
    }

    .clubs-search-input {
        width: 100%;
    }

    .clubs-search .btn {
        width: 100%;
    }

    /* бутоните на цяла ширина */
}

/* ---------- LAYOUT: grid areas, за да падне sidebar под търсачката на мобилно ---------- */

.clubs-page .card-base {
    display: block;
}

.clubs-layout {
    display: grid;
    grid-template-areas:
    "header header"
    "sidebar main";
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 16px 20px;
    align-items: start;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.clubs-header {
    grid-area: header;
}

.clubs-sidebar {
    grid-area: sidebar;
}

.clubs-main {
    grid-area: main;
}

.clubs-header,
.clubs-sidebar,
.clubs-main {
    min-width: 0;
}

.clubs-main {
    width: 100%;
}

.clubs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    width: 100%;
}

@media (max-width: 960px) {
    .clubs-layout {
        grid-template-areas:
      "header"
      "sidebar"
      "main";
        grid-template-columns: 1fr;
        max-width: none;
    }
}

/* привързване на елементите към зоните */
.clubs-header {
    grid-area: header;
}

.clubs-sidebar {
    grid-area: sidebar;
}

.clubs-main {
    grid-area: main;
}

/* мобилно – ред: търсачка → моите клубове → списък */
@media (max-width: 960px) {
    .clubs-layout {
        grid-template-areas:
      "header"
      "sidebar"
      "main";
        grid-template-columns: 1fr;
    }
}

/* дребни устойчивости срещу преливане */
.clubs-main, .clubs-header, .clubs-sidebar {
    min-width: 0;
}

.clubs-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clubs-desc {
    overflow-wrap: anywhere;
}

/* (по желание) олекоти fixed колоните на по-малки десктопи */
@media (max-width: 1200px) {
    .clubs-layout {
        /*grid-template-columns: minmax(200px, 240px) 1fr;*/
    }
}

/* --- Clubs: защити картите от overflow на тесни екрани --- */
.clubs-grid {
    align-items: stretch;
}

/* много важно за grid деца да могат да се свиват */
.clubs-card {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* и вътрешната колона да се свива */
.clubs-card .clubs-meta {
    min-width: 0;
}

/* дълги заглавия/думи да се чупят вместо да раздуват картата */
.clubs-title {
    overflow-wrap: anywhere; /* modern */
    word-break: break-word; /* fallback */
}

/* гарантирай, че описанието също не избутва */
.clubs-desc {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* на много тесни екрани – една колона и по-компактен thumb */
@media (max-width: 480px) {
    .clubs-grid {
        grid-template-columns: 1fr; /* вместо minmax(260px,1fr) */
    }

    .clubs-card {
        grid-template-columns: 64px 1fr; /* по-малка иконка + текст */
        gap: 8px;
        padding: 10px;
    }

    .clubs-logo {
        width: 64px;
        height: 64px;
    }
}

.clubs-page .btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
}


.club-members-chip {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.club-members-label,
.club-members-sep,
.club-members-comma {
    color: inherit;
}

.club-member-link,
.club-members-all-link {
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
    padding: 0 4px;
    transition: background-color .15s ease, color .15s ease, text-decoration-color .15s ease;
}

.club-member-link:hover,
.club-member-link:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    text-decoration: underline;
}

.club-members-all-link:hover,
.club-members-all-link:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    text-decoration: underline;
}

/* ===== Club detail hero mobile fix ===== */
@media (max-width: 640px) {

    .club-wrapper {
        padding: .35rem;
        margin: 1rem auto;
        border-width: 8px;
        border-radius: .85rem;
    }

    .clubs-page {
        margin-top: 8px;
    }

    .clubs-hero {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 14px 12px;
    }

    .clubs-hero-logo {
        width: min(220px, 100%);
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
    }

    .clubs-hero-logo img,
    .clubs-hero-logo .ph {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .clubs-hero-info {
        width: 100%;
        min-width: 0;
    }

    .clubs-h1 {
        margin: 0 0 10px 0;
        text-align: center;
        font-size: 2rem;
        line-height: 1.08;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .clubs-tags {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 6px;
    }

    .clubs-tags .chip {
        width: 100%;
        box-sizing: border-box;
        justify-content: flex-start;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .club-members-chip {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 2px;
        line-height: 1.3;
    }

    .club-members-label,
    .club-members-sep,
    .club-members-comma,
    .club-member-link,
    .club-members-all-link {
        display: inline;
        padding: 0;
    }

    .clubs-hero-desc {
        margin-top: 10px;
        text-align: center;
        line-height: 1.35;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .clubs-actions {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 12px;
    }

    .clubs-actions .btn,
    .clubs-actions form,
    .clubs-actions a,
    .clubs-actions button {
        width: 100%;
        box-sizing: border-box;
    }

    .clubs-actions form {
        display: block !important;
    }

    .clubs-actions .text-dim.small {
        display: block;
        text-align: center;
        line-height: 1.35;
    }
}

@media (max-width: 640px) {
    .club-actions .btn,
    .club-actions .btn-outline,
    .club-actions form,
    .club-actions a,
    .club-actions button {
        width: 100%;
        box-sizing: border-box;
        display: inline-flex;
        justify-content: center;
    }
}

.clubs-page--full {
    max-width: 100%;
}

.clubs-actions--hero {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: flex-start;
}

.clubs-page .club-forum-link {
    position: relative;
    z-index: 10;
    cursor: pointer;
}

.club-inline-form {
    display: inline-block;
}

.club-actions--manage {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.club-section--spaced {
    margin-top: 2rem;
}

.actions--spaced {
    margin-top: .5rem;
}

.bar-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.bar-fill {
    fill: var(--primary);
}

@media (max-width: 640px) {
    .bar-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .bar-label {
        text-align: left;
    }

    .bar-num {
        text-align: left;
    }
}

/* =========================================================
   Clubs editor pages: news / polls / confirm delete
   ========================================================= */

.clubs-editor-page,
.clubs-confirm-page {
    width: min(1120px, calc(100% - 24px));
    margin: 24px auto 44px;
}

.clubs-editor-card,
.clubs-confirm-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--primary);
    border-radius: 22px;
    box-shadow: 0 18px 46px var(--primary-soft);
    padding: clamp(18px, 3vw, 34px);
    color: var(--txt);
}

.clubs-editor-header {
    text-align: center;
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--primary);
}

.clubs-editor-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 8px;
    padding: 5px 12px;
    border: 1px solid var(--primary);
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 0.92rem;
    font-weight: 700;
}

.clubs-editor-title,
.clubs-confirm-title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.05;
    color: var(--txt);
    text-align: center;
}

.clubs-editor-subtitle {
    max-width: 680px;
    margin: 10px auto 0;
    color: var(--txt-dim);
    line-height: 1.45;
    font-size: 1rem;
}

.clubs-editor-form {
    max-width: 920px;
    margin: 0 auto;
}

.clubs-editor-field {
    display: grid;
    gap: 7px;
    margin-bottom: 16px;
}

.clubs-editor-field label {
    font-weight: 800;
    color: var(--txt);
    font-size: 0.98rem;
}

.clubs-editor-form .input,
.clubs-editor-form input[type="text"],
.clubs-editor-form input[type="search"],
.clubs-editor-form input[type="email"],
.clubs-editor-form input[type="url"],
.clubs-editor-form input[type="number"],
.clubs-editor-form textarea,
.clubs-editor-form select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--primary);
    border-radius: 14px;
    background: #fff;
    color: var(--txt);
    font: inherit;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02);
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.clubs-editor-form .input,
.clubs-editor-form input[type="text"],
.clubs-editor-form input[type="search"],
.clubs-editor-form input[type="email"],
.clubs-editor-form input[type="url"],
.clubs-editor-form input[type="number"],
.clubs-editor-form select {
    min-height: 46px;
    padding: 10px 13px;
}

.clubs-editor-form textarea,
.clubs-editor-form textarea.input {
    min-height: 180px;
    padding: 13px;
    resize: vertical;
    line-height: 1.5;
}

.clubs-editor-form .input:focus,
.clubs-editor-form input[type="text"]:focus,
.clubs-editor-form textarea:focus,
.clubs-editor-form select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-soft);
    background: #fff;
}

.clubs-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    margin-top: 12px;
}

.clubs-check-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    margin: 2px 0 18px;
    padding: 10px 13px;
    border: 1px solid var(--primary);
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--txt);
    font-weight: 700;
    cursor: pointer;
}

.clubs-check-row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--primary);
}

.clubs-editor-actions,
.clubs-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--primary);
}

.clubs-editor-actions--split {
    justify-content: space-between;
}

.clubs-editor-actions-main {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.clubs-editor-actions .btn,
.clubs-editor-actions button,
.clubs-editor-actions a,
.clubs-confirm-actions .btn,
.clubs-confirm-actions button,
.clubs-confirm-actions a {
    width: auto !important;
    min-width: 142px;
    min-height: 42px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
}

.btn-danger {
    background: #b42318;
    border: 1px solid #b42318;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(180, 35, 24, 0.18);
}

.btn-danger:hover,
.btn-danger:focus-visible {
    background: #912018;
    border-color: #912018;
    color: #fff !important;
}

.clubs-form-alert {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--primary);
    border-radius: 14px;
    background: var(--primary-soft);
    color: #912018;
    font-weight: 700;
}

.clubs-error {
    color: #b42318;
    font-size: 0.92rem;
    font-weight: 700;
}

/* Confirm delete */

.clubs-confirm-card {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.clubs-confirm-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary-soft);
    border: 1px solid var(--primary);
    color: #b42318;
    font-size: 2rem;
    font-weight: 900;
}

.clubs-confirm-text {
    max-width: 580px;
    margin: 16px auto 0;
    font-size: 1.08rem;
    line-height: 1.5;
}

.clubs-confirm-warning {
    max-width: 580px;
    margin: 12px auto 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--primary-soft);
    color: #7a271a;
    line-height: 1.45;
}

.clubs-confirm-actions {
    justify-content: center;
}

/* Detail cards polish */

.news-card,
.poll-card {
    padding: 16px 18px;
    border-radius: 18px;
}

.news-title,
.poll-q {
    font-size: 1.2rem;
    line-height: 1.25;
}

.news-body,
.poll-card {
    overflow-wrap: anywhere;
}

.news-body {
    margin-top: 10px;
    line-height: 1.5;
}

.news-card .actions,
.poll-card .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.news-card .actions .btn,
.poll-card .actions .btn {
    width: auto !important;
    min-width: 220px;
}

/* Mobile */

@media (max-width: 720px) {
    .clubs-editor-page,
    .clubs-confirm-page {
        width: min(100% - 18px, 1120px);
        margin-top: 16px;
    }

    .clubs-editor-card,
    .clubs-confirm-card {
        padding: 16px 13px;
        border-radius: 18px;
    }

    .clubs-editor-header {
        margin-bottom: 20px;
    }

    .clubs-editor-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .clubs-check-row {
        width: 100%;
        box-sizing: border-box;
        border-radius: 14px;
        align-items: flex-start;
    }

    .clubs-editor-actions,
    .clubs-editor-actions-main,
    .clubs-confirm-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .clubs-editor-actions .btn,
    .clubs-editor-actions button,
    .clubs-editor-actions a,
    .clubs-confirm-actions .btn,
    .clubs-confirm-actions button,
    .clubs-confirm-actions a {
        width: 100% !important;
    }

    .news-card .actions .btn,
    .poll-card .actions .btn {
        width: 100% !important;
        min-width: 0;
    }
}

/* =========================================================
   Club create/edit: logo/file input polish
   ========================================================= */

.clubs-current-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 10px;
    padding: 20px;
    border: 1px solid var(--primary);
    border-radius: 16px;
    background: var(--primary-soft);
}

.clubs-current-logo img {
    width: 74px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid var(--primary);
    background: transparent;
}

.clubs-current-logo div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.clubs-current-logo strong {
    color: var(--txt);
    font-size: 0.98rem;
}

.clubs-current-logo span {
    color: var(--txt-dim);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.clubs-file-box {
    padding: 12px;
    border: 1px dashed var(--primary);
    border-radius: 16px;
    background: var(--primary-soft);
    color: var(--txt);
    line-height: 1.6;
}

.clubs-file-box input[type="file"] {
    width: 100%;
    max-width: 100%;
    color: var(--txt);
}

.clubs-file-box input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    vertical-align: middle;
    margin: 0 5px 0 8px;
}

.clubs-file-box a {
    color: var(--primary);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.clubs-file-box a:hover {
    text-decoration: underline;
}

.clubs-file-input {
    width: 100%;
    max-width: 100%;
    font: inherit;
}

@media (max-width: 640px) {
    .clubs-current-logo {
        align-items: flex-start;
    }

    .clubs-current-logo img {
        width: 60px;
    }
}

/* =========================================================
   Club news cover image
   ========================================================= */

.news-card--with-cover {
    padding: 0;
    overflow: hidden;
}

.news-cover {
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: rgba(219, 96, 143, 0.08);
    border-bottom: 1px solid rgba(219, 96, 143, 0.18);
}

.news-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.news-card-content {
    padding: 16px 18px;
}

.clubs-current-news-cover {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 10px;
    padding: 12px;
    border: 1px solid rgba(219, 96, 143, 0.22);
    border-radius: 16px;
    background: rgba(219, 96, 143, 0.06);
}

.clubs-current-news-cover img {
    width: 132px;
    height: 78px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(219, 96, 143, 0.28);
    background: #fff;
}

.clubs-current-news-cover div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.clubs-current-news-cover strong {
    color: var(--txt);
    font-size: 0.98rem;
}

.clubs-current-news-cover span {
    color: var(--txt-dim);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.clubs-field-help {
    margin: -6px 0 0;
    color: var(--txt-dim);
    font-size: 0.9rem;
    line-height: 1.35;
}

@media (max-width: 640px) {
    .news-cover {
        aspect-ratio: 16 / 10;
    }

    .news-card-content {
        padding: 14px 13px;
    }

    .clubs-current-news-cover {
        align-items: flex-start;
    }

    .clubs-current-news-cover img {
        width: 92px;
        height: 62px;
    }
}

/*======= Частни клубове, кандидатстване/покана =========*/
.club-pending-chip {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--txt);
    font-weight: 800;
}

.club-access-list {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.club-access-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--primary);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow);
}

.club-access-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 640px) {
    .club-access-card {
        align-items: stretch;
        flex-direction: column;
    }

    .club-access-actions,
    .club-access-actions form,
    .club-access-actions .btn {
        width: 100%;
    }
}

/* =========================================================
   Club news comments
   ========================================================= */

.club-news-comments {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(219, 96, 143, 0.18);
}

.club-comments-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.club-comments-title {
    margin: 0;
    color: var(--txt);
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 800;
}

.club-comments-subtitle {
    margin: 3px 0 0;
    color: var(--txt-dim);
    font-size: 0.88rem;
    line-height: 1.35;
}

.club-comments-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.club-comments-count {
    min-width: 34px;
    justify-content: center;
    font-weight: 800;
}

.club-comments-locked {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--txt);
}

.club-comment-small-btn {
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: 0.86rem !important;
}

.club-comment-list {
    display: grid;
    gap: 10px;
    margin: 10px 0 12px;
}

.club-comment {
    padding: 10px 11px;
    border: 1px solid var(--primary);
    border-radius: 16px;
    background: var(--primary-soft);
}

.club-comment-main {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.club-comment-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--primary);
    background: #fff;
}

.club-comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.club-comment-content {
    min-width: 0;
}

.club-comment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    color: var(--txt-dim);
    font-size: 0.84rem;
    line-height: 1.35;
}

.club-comment-meta a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 800;
}

.club-comment-meta a:hover,
.club-comment-meta a:focus-visible {
    text-decoration: underline;
}

.club-comment-body {
    margin-top: 5px;
    color: var(--txt);
    line-height: 1.45;
    font-size: 0.94rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.club-comment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 7px;
}

.club-comment-delete-form {
    display: inline-flex;
}

.club-comment-action-link {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
    padding: 0;
    cursor: pointer;
}

.club-comment-action-link:hover,
.club-comment-action-link:focus-visible {
    text-decoration: underline;
}

.club-comment-delete-btn {
    color: #b42318;
}

.club-comments-empty,
.club-comments-locked-note {
    margin: 9px 0 12px;
    color: var(--txt-dim);
    font-size: 0.92rem;
    line-height: 1.4;
}

.club-comment-form {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.club-comment-input {
    width: 100%;
    min-height: 40px;
    resize: vertical;
    box-sizing: border-box;
}

.club-comment-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.club-comment-counter {
    color: var(--txt-dim);
    font-size: 0.86rem;
    font-weight: 700;
}

.club-comment-edit-form .club-comment-input {
    min-height: 140px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 640px) {
    .club-comments-head {
        display: grid;
        grid-template-columns: 1fr;
    }

    .club-comments-head-actions {
        justify-content: flex-start;
    }

    .club-comment-main {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px;
    }

    .club-comment-avatar {
        width: 34px;
        height: 34px;
    }

    .club-comment-form-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .club-comment-form-footer .btn {
        width: 100%;
    }
}