/* ── Fix HTML hidden attribute being overridden by display rules ── */
[hidden] { display: none !important; }

/* ── Layout ─────────────────────────────────────────────── */
.feed-wrap {
    margin-top: -16px;
}

.index-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.feed-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    max-width: 800px;
}

.feed-title-row--guest {
    margin-bottom: 18px;
}

/* ── Right sidebar ───────────────────────────────────────── */
.feed-sidebar {
    flex: 0 0 auto;
    width: min(376px, max(232px, calc(100% - 792px)));
    margin-right: -32px;
    margin-top: 5px;
    position: sticky;
    top: var(--sidebar-sticky-top, 0px);
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-bottom: 9px;
    padding-right: 9px;
}

.feed-sidebar__block {
    height: 318px;
    background: rgb(248, 248, 249);
    border: none;
    border-radius: 12px;
    padding: 13px 16px 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.feed-sidebar__block-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: #1f2933;
    margin: 0;
    flex-shrink: 0;
}

/* ── Sidebar boat carousels ("Новые лодки" / "Популярные лодки") ──── */
/* One big photo at a time, not a fixed-height list — let the card's own
   content set the height instead of stretching to fill 318px. */
.feed-sidebar__block--carousel {
    height: auto;
}

.boat-carousel__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.boat-carousel__all-link {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    white-space: nowrap;
}
.boat-carousel__all-link:hover { color: #0b1f33; }

.boat-carousel__viewport {
    position: relative;
    margin-top: 10px;
}

/* Fades the peeking next card's photo/name into the block's own background
   instead of hard-cutting them mid-word — the block's bg color is the same
   rgb(248,248,249) on desktop and (per the mobile override further down)
   once this block gets relocated into the feed. */
.boat-carousel__viewport::after {
    content: "";
    position: absolute;
    top: 0;
    /* Matches the sliver the peeking next card actually occupies (card is
       88% wide, 12% left over minus the gap between cards) — any wider and
       the fade creeps onto the in-focus card's own photo. */
    right: 0;
    bottom: 0;
    width: calc(12% - 10px);
    background: linear-gradient(to right, rgba(248, 248, 249, 0), rgb(248, 248, 249));
    pointer-events: none;
    z-index: 1;
}

.boat-carousel__track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.boat-carousel__track::-webkit-scrollbar { display: none; }

.boat-carousel__card {
    flex: 0 0 88%;
    min-width: 0;
    scroll-snap-align: start;
    text-decoration: none;
    display: block;
}

.boat-carousel__photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    overflow: hidden;
    background: #e4ecf4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boat-carousel__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.boat-carousel__placeholder { font-size: 28px; line-height: 1; color: #9ca3af; }

.boat-carousel__name {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1f2933;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.boat-carousel__card:hover .boat-carousel__name { color: #0b1f33; }

/* "Новые фото на карте": the author's avatar + nick instead of a boat name. */
.boat-carousel__name--author { display: flex; align-items: center; gap: 8px; }
.boat-carousel__avatar {
    width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.boat-carousel__avatar--placeholder {
    display: inline-flex; align-items: center; justify-content: center;
    background: #e4ecf4; color: #374151; font-size: 12px; font-weight: 600;
}
.boat-carousel__author-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A map photo's caption, laid over the bottom of the photo rather than as a
   line under it — cards in a carousel share one height, so a caption line on
   some would leave an empty gap under all the others. */
.boat-carousel__photo { position: relative; }
.boat-carousel__caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 18px 10px 7px;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6));
    color: #fff; font-size: 12.5px; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.boat-carousel__arrow {
    position: absolute;
    top: 44%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: #1f2933;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 2;
}
.boat-carousel__arrow:hover { background: #fff; }
.boat-carousel__arrow--prev { left: 6px; }
.boat-carousel__arrow--next { right: 6px; }

/* Matches the breakpoint where index.html's own JS relocates these blocks
   into the feed column (see the mobile-interleave script) — arrows make no
   sense once touch/swipe is the only input in that layout. */
@media (max-width: 900px) {
    .boat-carousel__arrow { display: none !important; }
}

/* ── Sidebar popular authors ─────────────────────────────── */
/* Unlike the boats lists, items here don't scale to fill extra space
   (fixed-size avatar + text), so stretching them to match the fixed
   318px block height just inflates the gaps between rows. Size the
   block to its content instead, so there's no dead space below the
   last item but the row spacing stays as designed. The sidebar's total
   height feeds into the sticky bottom-offset math in index.html (see
   updateSidebarTop) — shrinking this block shrinks that total, which
   nudges the sticky sidebar's resting position. Make up the difference
   with margin so the page's overall scroll/sticky feel is unchanged. */
.feed-sidebar__block--authors {
    height: auto;
    margin-bottom: 28px;
}

.sidebar-authors-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
    overflow: hidden;
}

.sidebar-author-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.sidebar-author-item__avatar-wrap {
    flex-shrink: 0;
    line-height: 0;
}

.sidebar-author-item__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

.sidebar-author-item__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #0B1F33;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 50%;
    line-height: 1;
}

.sidebar-author-item__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.sidebar-author-item__name {
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.sidebar-author-item__name:hover { color: #0b1f33; }

.sidebar-author-item__boat {
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.sidebar-author-item__boat:hover { color: #6b7280; }

.sidebar-author-item__stats {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 3px;
}

.sidebar-author-item__stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #9ca3af;
    text-decoration: none;
}

a.sidebar-author-item__stat:hover { color: #6b7280; }

/* ── Sidebar popular posts ───────────────────────────────── */
.sidebar-posts-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.sidebar-post-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.sidebar-post-item__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sidebar-post-item__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e4ecf4;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
}

.sidebar-post-item__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.sidebar-post-item__title {
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    line-height: 1.3;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-post-item__title:hover { color: #0b1f33; }

.sidebar-post-item__author {
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.sidebar-post-item__author:hover { color: #6b7280; }

.sidebar-post-item__stats {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 3px;
}

.sidebar-post-item__stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #9ca3af;
    text-decoration: none;
}

a.sidebar-post-item__stat:hover { color: #6b7280; }

.feed-heading {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px;
    color: #1f2933;
}

.feed-empty {
    color: #9ca3af;
    font-size: 15px;
    margin-top: 32px;
}

/* ── Feed header row (tabs + settings button) ───────────── */
.feed-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.feed-sidebar__topbar {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: 2px;
    padding-right: 15px;
    min-height: 35px;
    margin-bottom: 10px;
}

.feed-sidebar__add-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    background: #f97316;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    font-family: inherit;
    line-height: 1;
}
.feed-sidebar__add-btn:hover { background: #ea6c0b; color: #fff; }

@media (min-width: 901px) {
    .feed-sidebar__add-btn--guest { background: #0b4f7a; }
    .feed-sidebar__add-btn--guest:hover { background: #0d6199; }
}

.profile-add-post-btn {
    display: inline-flex; align-items: center; margin-left: auto; margin-right: 20px;
    padding: 10px 14px; background: #f97316; color: #fff;
    border: none; border-radius: 10px; font-size: 13px; font-weight: 600;
    cursor: pointer; white-space: nowrap; font-family: inherit; line-height: 1;
    transition: background 0.15s;
}
.profile-add-post-btn:hover { background: #ea6c0b; }

/* ── Feed tabs ──────────────────────────────────────────── */
.feed-tabs {
    display: flex;
    gap: 8px;
}

.feed-tab {
    padding: 5px 12px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(11, 42, 72, 0.75);
    text-decoration: none;
    border-radius: 8px;
    background: rgb(248, 248, 249);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.feed-tab:hover { background: #edeef0; color: #010b18; }
.feed-tab--active { background: #0b2a48; color: #fff; }
.feed-tab--active:hover { background: #0b2a48; color: #fff; }

/* ── Settings button ────────────────────────────────────── */
.feed-toolbar {
    display: flex;
    align-items: center;
}

.feed-settings-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: rgba(11, 42, 72, 0.75);
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.15s;
}
.feed-settings-btn:hover { color: #0b2a48; }
.feed-settings-btn--active { color: #0b2a48; }

.feed-filters-badge {
    min-width: 16px;
    height: 16px;
    background: #f97316;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    margin-left: 2px;
}

/* ── Shared filter-bar components (used on boat_detail, profile) ── */
.filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.fb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: #ffffff;
    border: 1.5px solid #c8d9ea;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #1f2933;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s;
    font-family: inherit;
    line-height: 1.4;
    flex-shrink: 0;
}
.fb-btn:hover { border-color: #6b96b8; background-color: #ffffff; }
.fb-btn--active { border-color: #f97316; }
.fb-btn--active:hover { border-color: #f97316; }

.fb-select {
    display: inline-block;
    width: auto;
    padding: 7px 28px 7px 12px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
    border: 1.5px solid #c8d9ea;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #1f2933;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background-color 0.15s;
    font-family: inherit;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
}
.fb-btn:hover,
.fb-select:hover { border-color: #6b96b8; background-color: #ffffff; }
.fb-btn--active,
.fb-select--active { border-color: #f97316; background-color: #ffffff; }
.fb-btn--active:hover,
.fb-select--active:hover { border-color: #f97316; }

.fb-filter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f97316;
    flex-shrink: 0;
    margin-right: 4px;
}
.fb-arrow {
    color: #9ca3af;
    margin-left: 4px;
    flex-shrink: 0;
    vertical-align: middle;
}

.fb-item {
    position: relative;
    flex-shrink: 0;
}

.fb-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1.5px solid #d5e3f0;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 6px 0;
    z-index: 300;
}

.fb-panel__select-all {
    display: block;
    width: 100%;
    padding: 6px 12px;
    background: none;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #0B1F33;
    cursor: pointer;
    margin-bottom: 4px;
    font-family: inherit;
}
.fb-panel__select-all:hover { background: #f0f4f8; }

.fb-panel__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
    color: #1f2933;
    cursor: pointer;
    user-select: none;
}
.fb-panel__option:hover { background: #f0f4f8; }
.fb-panel__option--active { font-weight: 600; color: #0B1F33; background: #eef3fa; }
.fb-panel__option input { accent-color: #0B1F33; cursor: pointer; flex-shrink: 0; }

.fb-cascade-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.fb-select--clearable { padding-right: 32px; }
.fb-no-arrow { background-image: none !important; }

.fb-x {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    padding: 3px;
    line-height: 1;
    transition: color 0.15s;
}
.fb-x:hover { color: #1f2933; }

.fb-sep { display: inline-block; width: 0; }

.fb-apply {
    display: inline-block;
    padding: 7px 18px;
    background: #f97316;
    color: #fff;
    border: 1.5px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    white-space: nowrap;
    min-width: 140px;
    text-align: center;
    box-sizing: border-box;
}
.fb-apply:hover { background: #ea6c0b; }

.fb-reset {
    padding: 7px 12px;
    margin-left: -8px;
    color: #6b7280;
    font-size: 13px;
    text-decoration: none;
    border-radius: 20px;
    transition: color 0.15s;
    white-space: nowrap;
}
.fb-reset:hover { color: #0B1F33; }

/* ── Modal custom dropdowns ─────────────────────────────── */
.fm-dd {
    flex: 1;
}

.fm-dd__btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    background: #fff;
    border: 1.5px solid #c8d9ea;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #1f2933;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    transition: border-color 0.15s;
    font-family: inherit;
    line-height: 1.4;
    text-align: left;
    box-sizing: border-box;
}
.fm-dd__btn:hover { border-color: #6b96b8; }
.fm-dd__btn--active { border-color: #c8d9ea; }

.fm-dd__btn-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-dd__arrow {
    color: #9ca3af;
    flex-shrink: 0;
}

.fm-dd__panel {
    margin-top: 4px;
    background: #fff;
    border: 1.5px solid #d5e3f0;
    border-radius: 10px;
    padding: 6px 0;
    max-height: 180px;
    overflow-y: auto;
}

.fm-dd__option {
    padding: 7px 12px;
    font-size: 13px;
    color: #1f2933;
    cursor: pointer;
    transition: background 0.1s;
}
.fm-dd__option:hover { background: #f0f4f8; }
.fm-dd__option--active { font-weight: 600; color: #0B1F33; background: #eef3fa; }

/* ── Filter modal ────────────────────────────────────────── */
.feed-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feed-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
}

.feed-modal__box {
    position: relative;
    background: #fff;
    border-radius: 16px;
    width: 480px;
    max-width: calc(100vw - 32px);
    height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    overflow: hidden;
}

.feed-modal__header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 2px 6px 0;
    flex-shrink: 0;
}

.feed-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    transition: color 0.15s;
}
.feed-modal__close:hover { color: #1f2933; }

.feed-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.fm-section:first-child { padding-top: 10px; }

.feed-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
}

/* ── Modal sections ──────────────────────────────────────── */
.fm-section {
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
}
.fm-section:last-child { border-bottom: none; }

.fm-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.fm-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.fm-section-header .fm-label { margin-bottom: 0; }

.fm-toggle-all {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: #6b7280;
    font-family: inherit;
    padding: 0;
    transition: color 0.15s;
}
.fm-toggle-all:hover { color: #1f2933; }

/* Источник pills */
.fm-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fm-pill {
    padding: 6px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 400;
    color: #4b5563;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.fm-pill:hover { border-color: #9ca3af; }
.fm-pill--active { border-color: #111827; background: #111827; color: #fff; }

/* Категории */
.fm-cats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.fm-cat-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 400;
    color: #4b5563;
    cursor: pointer;
    user-select: none;
    text-align: center;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.fm-cat-item:hover { border-color: #9ca3af; }
.fm-cat-item:has(input:checked) { border-color: #111827; background: #111827; color: #fff; }
.fm-cat-item input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Rows */
.fm-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fm-select {
    width: 100%;
    padding: 8px 28px 8px 12px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.fm-select:hover { border-color: #9ca3af; }
.fm-select:focus { outline: none; border-color: #6b96b8; }

.fm-cascade {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fm-cascade .fm-select { flex: 1; }

.fm-x {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #9ca3af;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.fm-x:hover { background: #e5e7eb; color: #1f2933; }

/* Footer buttons */
.fm-reset {
    padding: 8px 16px;
    color: #6b7280;
    font-size: 14px;
    text-decoration: none;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
}
.fm-reset:hover { color: #1f2933; background: #f3f4f6; }

.fm-apply {
    padding: 8px 20px;
    background: #f97316;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.fm-apply:hover { background: #ea6c0b; }

/* ── Add-post modal ─────────────────────────────────────── */
.feed-modal__box--auto {
    height: auto;
    max-height: calc(100vh - 64px);
}

.apm-header {
    justify-content: space-between;
    padding: 14px 16px 12px 20px;
    border-bottom: 1px solid #f3f4f6;
}

.apm-header__title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2933;
}

.apm-body {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.apm-choice {
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s;
}
.apm-choice:hover { border-color: #c8d9ea; }
.apm-choice--active { border-color: #0b2a48; }
.apm-choice--active:hover { border-color: #0b2a48; }
.apm-choice--disabled { opacity: 0.7; cursor: default; pointer-events: none; }
.apm-choice--disabled .apm-radio { cursor: default; }
.apm-choice--disabled a { pointer-events: auto; }

.apm-choice__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
}

.apm-radio {
    flex-shrink: 0;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: #0b2a48;
    cursor: pointer;
}

.apm-choice__content {
    flex: 1;
    cursor: pointer;
}

.apm-choice__title {
    font-size: 14px;
    font-weight: 600;
    color: #0b2a48;
    margin-bottom: 3px;
}

.apm-choice__desc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.45;
}

.apm-boat-section {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.apm-boat-section .fb-item {
    width: 100%;
}

.apm-boat-dd-btn {
    width: 100%;
    justify-content: space-between;
}

.apm-boat-dd-panel {
    max-height: 220px;
    overflow-y: auto;
}

.apm-boat-hint {
    color: #9ca3af;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}
.apm-boat-hint a { color: #9ca3af; text-decoration: underline; }
.apm-boat-hint a:hover { color: #6b7280; }

.apm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    background: #f97316;
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
    border: none;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
}
.apm-btn:hover { background: #ea6c0b; color: #fff; }
.apm-btn--full { width: 100%; }

/* ── Post card ──────────────────────────────────────────── */
.feed-card {
    position: relative;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
    display: flex;
    flex-direction: row;
    height: 255px;
    transition: background 0.15s;
}
.feed-card:hover {
    background: var(--card-hover-bg);
}

.feed-card__body {
    flex: 1;
    min-width: 0;
    padding: 20px 20px 16px;
    display: flex;
    flex-direction: column;
}

.feed-card__images {
    flex: 0 0 auto;
    align-self: stretch;
    padding: 12px 12px 12px 0;
}
.feed-card__img {
    width: 300px;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

.feed-card__title {
    margin: 0 0 4px;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.25;
}
.feed-card__title a {
    color: #1f2933;
    text-decoration: none;
    transition: color 0.15s;
}
.feed-card__title a:hover { color: #0B1F33; }
.feed-card--draft { opacity: 0.7; }
.feed-card--draft .feed-card__title { padding-right: 90px; }
.feed-card__draft-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 4px;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

.feed-card__excerpt {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    margin: 10px 0 0;
    font-size: 15px;
    color: #6b7280;
    line-height: 1.5;
}
.feed-card__excerpt .geo-embed-link { vertical-align: top; }

.feed-card__info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    overflow: hidden;
}
.feed-card__author-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 80px;
    flex-shrink: 1;
    overflow: hidden;
}
.feed-card__author-avatar-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.feed-card__info-avatar {
    width: 25px;
    height: 25px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
    border: 1px solid #e5e7eb;
}
.feed-card__info-avatar--placeholder {
    background: #0B1F33;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}
.feed-card__author {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s;
    min-width: 0;
}
.feed-card__author:hover { color: #0B1F33; }
.feed-card__subject-thumb {
    flex-shrink: 0;
    display: block;
    text-decoration: none;
}
.feed-card__subject-img {
    height: 25px;
    width: auto;
    aspect-ratio: 16 / 9;
    border-radius: 5px;
    object-fit: cover;
    display: block;
}
.feed-card__subject-img--placeholder {
    height: 25px;
    aspect-ratio: 16 / 9;
    border-radius: 5px;
    background: #e4ecf4;
    display: flex;
    align-items: center;
    justify-content: center;
}
.feed-card__boat-name {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s;
    flex: 1;
    min-width: 0;
}
.feed-card__boat-name:hover { color: #0B1F33; }

.feed-card__read-more {
    display: none;
    font-size: 13px;
    font-weight: 600;
    color: #0B1F33;
    text-decoration: none;
    transition: color 0.15s;
    white-space: nowrap;
}
.feed-card__read-more:hover { color: #1a3a5c; }

.feed-card__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 10px;
    margin-top: auto;
    flex-wrap: nowrap;
    overflow: hidden;
}
.feed-card__stats {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.feed-card__draft-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 11px;
    font-weight: 500;
    color: #c2410c;
    background: #fff7ed;
    border-radius: 6px;
    padding: 2px 8px;
    pointer-events: none;
}
.feed-card__stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #9ca3af;
}
a.feed-card__stat { text-decoration: none; }
a.feed-card__stat:hover { color: #6b7280; }
.feed-card__time {
    font-size: 12px;
    color: #9ca3af;
}
.feed-card__category {
    font-size: 12px;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 6px;
    padding: 2px 8px;
}

/* ── Load more ──────────────────────────────────────────── */
.feed-more-wrap {
    display: flex;
    justify-content: center;
    margin: 8px 0 32px;
}
.feed-more-btn {
    padding: 10px 32px;
    background: #e4ecf4;
    border: 1.5px solid #c8d9ea;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.feed-more-btn:hover { background: #d5e3f0; border-color: #a8c4dc; }
.feed-more-btn:disabled { opacity: 0.6; cursor: default; }

/* ── Hero (guest only) ──────────────────────────────────── */
.hero {
    position: relative;
    margin: -32px -32px 52px;
    height: auto;
    aspect-ratio: 1920 / 768; /* matches hero-desktop.webp/.jpg exactly — no cropping at typical widths */
    min-height: 340px;
    max-height: 620px; /* uncropped up to ~1550px viewport width, covers common 13"/14" laptop resolutions */
    display: flex;
    align-items: center;
    overflow: hidden;
    font-family: 'Manrope', system-ui, sans-serif;
}
/* Added by a small script (see index.html) once .index-layout below actually
   hits its 1200px cap (wide screens) — swaps the default -32px bleed for
   centering at the same cap, so the hero never outgrows the feed+sidebar
   content. Below the cap the plain bleed above already lines the hero up
   with that content's real edges (including .feed-sidebar's own -32px bleed
   to .content's true edge), so no JS involvement is needed there — auto
   margins can't produce that bleed themselves (they collapse to 0 instead of
   going negative once the box is wider than its container), which is why
   this needs a class swap rather than a single calc()/max() expression. */
.hero--capped {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
}
.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 58%;
    display: block;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(5,16,32,0.90) 0%,
        rgba(5,16,32,0.68) 36%,
        rgba(5,16,32,0.16) 62%,
        transparent 82%
    );
}

.hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0 56px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.hero__left { max-width: 500px; }

.hero__eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #f97316;
    margin-bottom: 20px;
}

.hero__headline {
    font-size: clamp(34px, 3.6vw, 56px);
    font-weight: 800;
    line-height: 1.08;
    color: #fff;
    margin: 0 0 22px;
    letter-spacing: -0.025em;
}

.hero__sub {
    font-size: 16px;
    line-height: 1.75;
    color: rgba(255,255,255,0.68);
    margin: 0 0 38px;
    font-weight: 400;
}

.hero__cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
    background: none;
    box-sizing: border-box;
}

.hero__btn--primary {
    background: #f97316;
    color: #fff;
    border-color: #f97316;
}
.hero__btn--primary:hover { background: #ea6c0b; border-color: #ea6c0b; }

.hero__btn--ghost {
    color: rgba(255,255,255,0.88);
    border-color: rgba(255,255,255,0.32);
}
.hero__btn--ghost:hover { border-color: rgba(255,255,255,0.72); color: #fff; }

.hero__btn--mobile { display: none; }
@media (max-width: 768px) {
    .hero__btn--desktop { display: none; }
    .hero__btn--mobile  { display: inline-flex; }
}

/* Floating card */
.hero__card {
    background: #fff;
    border-radius: 18px;
    padding: 22px 24px 18px;
    width: 252px;
    flex-shrink: 0;
    box-shadow: 0 16px 48px rgba(0,0,0,0.16);
}

.hero__card-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #9ca3af;
    margin: 0 0 16px;
}

.hero__card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.hero__card-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}
.hero__card-item:first-child { padding-top: 0; }
.hero__card-item:last-child { border-bottom: none; padding-bottom: 0; }

.hero__card-link {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    text-decoration: none;
    line-height: 1.45;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero__card-link:hover { color: #f97316; }

.hero__card-stat {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #9ca3af;
    flex-shrink: 0;
    margin-top: 2px;
}

.hero__card-more {
    display: block;
    margin-top: 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.15s;
}
.hero__card-more:hover { color: #0b2a48; }

@media (max-width: 900px) {
    .hero {
        margin: -32px -32px 36px;
        height: 42vh;
        min-height: 280px;
        align-items: flex-end;
    }
    .hero__inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 32px 52px;
        gap: 0;
    }
    .hero__card { display: none; }
    .hero__left { max-width: 100%; }
    .hero__sub br { display: none; }
}

@media (max-width: 480px) {
    .hero { margin: -12px -12px 28px; }
    .hero__inner { padding: 0 20px 44px; }
    .hero__headline { font-size: 31px; }
    .hero__sub { font-size: 15px; margin-bottom: 28px; }
    .hero__btn { padding: 13px 22px; font-size: 14px; }
}

/* Matches the <picture> breakpoint that switches to hero-mobile.webp (portrait crop) */
@media (max-width: 640px) {
    .hero { height: auto; aspect-ratio: 820 / 874; min-height: 320px; max-height: 480px; }
}

/* Desktop guest boat-add modal — reuses .reg-modal-overlay/.reg-modal-box (see app.css),
   vertically centered instead of pinned to the top of the viewport (where it
   collided with the topbar). Fixed height (sized for step 2 — the "Сохраните
   свою лодку" registration screen, the tallest of the two steps, with room for
   every field's validation error showing at once) so the box never resizes
   itself as the user moves between steps or triggers/clears errors — only its
   content scrolls internally if it doesn't fit. */
.reg-modal-overlay--boat { align-items: center; }
.reg-modal-box--boat { max-width: 900px; height: 640px; max-height: calc(100vh - 32px); }
.boat-guest-modal__iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 900px) {
    .feed-sidebar { display: none; }
    .feed-sidebar__block { display: none; }
    .feed-sidebar__block--placed { display: block; }
}