/**
 * Sidebar — TODO.TODAY
 *
 * Owns EVERY sidebar style: the sidebar box, hero, Daily Digest, digest
 * buttons and the preferences popup. Extracted from front.css so the sidebar
 * has a single owner (styles were previously spread across front.css,
 * home-page.css and tt-cards.css).
 *
 * Rendered by todo-core: app/view/front/home-sidebar.phtml
 * Layout/grid (sidebar vs feed) is NOT here — that's the shell, in
 * todo-today-home-page/assets/css/home-page.css.
 *
 * Breakpoint: 1023/1024px, matching the rest of the frontend.
 */


/* ── LEGACY SIDEBAR BOXES ─────────────────────────────────────────────
 * .event_sidebar (home page) and .td-sidebar (category, place, search,
 * my-events, community, single event, public channel) are the OLD box
 * classes. New standard: the shared page shell (.tt-page-shell__side in
 * tt-ui.css) owns the box — padding, sticky, divider — and this file only
 * styles the contents (hero, digest, popup). Life Stream migrated first;
 * as each page moves onto the shell, drop its class here. Both blocks
 * die when the last page migrates. */

/* Home page box. Divider lives on .tt-listing-feed (home-page.css). */
.event_sidebar {
    padding: 15px;
}

/* Box on the not-yet-migrated event pages (category, place, …). */
.td-sidebar {
    position: sticky;
    top: 0;
    overflow-y: auto;
    padding: 15px 15px 15px 0px;
    border-right: 1px solid #f0eeea;
    background: #ffffff;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}
/* Admin bar: adjust sticky sidebar top position */
body.admin-bar .td-sidebar {
    top: 32px;
}
@media (max-width: 782px) {
    body.admin-bar .td-sidebar {
        top: 46px;
    }
}
.td-sidebar::-webkit-scrollbar { width: 4px; }
.td-sidebar::-webkit-scrollbar-track { background: transparent; }
.td-sidebar::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* ── HERO / BRAND BAND ─────────────────────────────────────────────────
 * Markup: todo-core/app/view/front/sidebar-body.phtml (#ttHero)
 * ONE element, two layouts — no duplicated markup:
 *   >= 1024px : 110px rounded card inside the 300px sidebar.
 *               Logo mark + chevron hidden; gear pinned top-right.
 *   <  1024px : full-width sticky band, 106px tall, collapsing to 53px on
 *               scroll (js/tt-brand-band.js adds .is-compact). Logo mark and
 *               chevron appear; everything sits on one row.
 */
.tt-hero {
    position: relative;
    overflow: hidden;
    animation: tdFadeUp 0.5s ease both;
}
.tt-hero__img,
.tt-hero__img--fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tt-hero__img--fallback {
    background: linear-gradient(135deg, #3b0764 0%, #7c2d12 55%, #b45309 100%);
}
.tt-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.55) 100%);
}
.tt-hero__inner {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    /* Self-padded so the band can sit full-bleed below 1024px — see BAND
       GUTTERS in todo-today-home-page/assets/css/home-page.css. */
    padding: 0 var(--tt-gutter, 15px);
}
.tt-hero__logo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    transition: width .22s ease-out, height .22s ease-out;
}
.tt-hero__meta {
    min-width: 0;
    flex: 1 1 auto;
}
.tt-hero__brand {
    display: block;
    font-size: 13px;
    letter-spacing: .02em;
    line-height: 1;
    color: #fff;
    margin-bottom: 6px;
}
.tt-hero__brand b { font-weight: 700; }
/* A <button> since it opens the preferences popup (data-open-preferences,
   bound in front.js). It sits outside #tt-app, so no shared button reset
   reaches it — strip the native chrome here. */
.tt-hero__place {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.tt-hero__location {
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 6px rgba(0,0,0,.25);
    transition: font-size .22s ease-out;
}
.tt-hero__chevron {
    width: 14px;
    height: 14px;
    flex: none;
    color: rgba(255,255,255,.7);
}
.tt-hero__gear {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background-color .15s ease, transform .15s ease;
}
.tt-hero__gear:hover { background: rgba(255,255,255,.25); }
.tt-hero__gear:active { transform: scale(.95); }
.tt-hero__gear svg { width: 16px; height: 16px; }

/* ── Mobile / tablet: sticky collapsing brand band (< 1024px) ──────────
   Scroll-native collapse: the height is a CONSTANT 106px and `top: -53px`
   lets the top half scroll away naturally, pinning the bottom 53px — the
   collapse tracks the scroll pixel-for-pixel with no thresholds.
   The old version toggled height 106↔53 (with a transition) at scrollY > 53,
   which reflowed the entire feed by 53px at the flip — the visible "jump"
   when scrolling back up — and could oscillate around the boundary because
   the height change itself moved the positions the threshold compared.
   .is-compact (tt-brand-band.js) now only restyles the INNER content for the
   pinned state; it must never touch the outer height. */
@media (max-width: 1023px) {
    .tt-hero {
        position: sticky;
        top: -53px;
        z-index: 40;
        width: 100%;
        /* Tablet: the band caps at the single-column width like every other
           band, so the whole page reads as one centered phone column. On
           phones (< 600px) the cap has no effect — still full-bleed. */
        max-width: var(--tt-single-col-max, 600px);
        margin-inline: auto;
        height: 106px;
        transition: box-shadow .22s ease-out;
    }
    /* No admin-bar offset here: the bar is hidden below 1024px
       (see theme-base.css), so the band sits flush at top: 0. */

    .tt-hero.is-compact {
        box-shadow: 0 1px 3px rgba(0,0,0,.08);
    }
    /* Pinned: content becomes a single row inside the visible bottom 53px.
       The inner box is absolute, so this reflows nothing outside the hero. */
    .tt-hero.is-compact .tt-hero__inner {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 53px;
    }
    .tt-hero.is-compact .tt-hero__logo { width: 32px; height: 32px; }
    .tt-hero.is-compact .tt-hero__brand { display: none; }
    .tt-hero.is-compact .tt-hero__chevron { display: none; }
    .tt-hero.is-compact .tt-hero__location { font-size: 15px; }
}

/* ── Desktop: rounded card in the sidebar (>= 1024px) ────────────────── */
@media (min-width: 1024px) {
    .tt-hero {
        height: 170px;
        border-radius: 16px;
        margin-bottom: 20px;
    }
    /* Card layout: brand + location stacked at the bottom-left. */
    .tt-hero__inner {
        display: block;
        padding: 16px 56px 16px 16px;
    }
    .tt-hero__meta {
        position: absolute;
        left: 16px;
        right: 56px;
        bottom: 14px;
    }
    .tt-hero__brand {
        font-size: 10px;
        font-weight: 500;
        letter-spacing: .14em;
        color: rgba(255,255,255,.8);
        margin-bottom: 6px;
    }
    .tt-hero__location { font-size: 17px; }

    /* Mobile-only affordances */
    .tt-hero__logo,
    .tt-hero__chevron { display: none; }

    /* Gear pinned to the card's top-right */
    .tt-hero__gear {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        background: rgba(0,0,0,.4);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .tt-hero__gear:hover { background: rgba(0,0,0,.5); }
    .tt-hero__gear svg { width: 18px; height: 18px; }
}
/* ── DAILY DIGEST ──────────────────────────────────────────────────────
 * Markup: todo-core/app/view/front/digest.phtml (single source, all 9 pages).
 * Channels render as a 3-up grid of mini-cards: coloured round icon above a
 * two-line label. auto-fit so 1 or 2 configured channels still fill the row.
 */
.tt-digest {
    background: var(--tt-muted, #f5f5f5);
    border: 1px solid var(--tt-border, #e5e5e5);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 15px;
    animation: tdFadeUp 0.5s ease both;
    animation-delay: 0.1s;
}

.tt-digest__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.tt-digest__bell {
    font-size: 16px; /* tt_icon svgs are sized in em */
    color: var(--tt-muted-foreground, #666666);
    flex: none;
}
.tt-digest__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tt-foreground, #171717);
}

.tt-digest__desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.375;
    color: var(--tt-muted-foreground, #666666);
}
.tt-digest__desc-dim { opacity: .75; }

.tt-digest__channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.tt-digest__channel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 9px 4px 8px;
    border-radius: 12px;
    background: var(--tt-background, #ffffff);
    border: 1px solid var(--tt-border, #e5e5e5);
    text-decoration: none;
    transition: border-color .15s ease;
}
.tt-digest__channel:hover,
.tt-digest__channel:focus-visible {
    border-color: rgba(23, 23, 23, .4);
    text-decoration: none;
}
.tt-digest__channel:active { transform: scale(.97); }

.tt-digest__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: #ffffff;
    font-size: 18px; /* tt_icon svgs are sized in em */
}
.tt-digest__icon--whatsapp { background: #25D366; }
.tt-digest__icon--telegram { background: #229ED9; }

.tt-digest__label {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: var(--tt-foreground, #171717);
    opacity: .8;
}

/* POPUP */
.td-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000; /* Above bottom nav (z-index: 9999) */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.td-popup-overlay--active { opacity: 1; pointer-events: auto; }
.td-popup-overlay--active .td-popup-card { transform: translateY(0) scale(1); opacity: 1; }

.td-popup-card {
    background: #fff;
    border-radius: 24px;
    width: 500px;
    max-width: 92vw;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
    transform: translateY(16px) scale(0.97);
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
    display: flex;
    flex-direction: column;
}
.td-popup__header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px 10px;
    border-bottom: 1px solid #f0eeea;
}
.td-popup__close {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none; background: transparent;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
    color: #1a1a1a; font-size: 16px;
    margin: 0;
    padding: 0;
}
.td-popup__close:hover { background: #f0f0f0; }
.td-popup__close .td-popup__icon--back { display: none !important; }
.td-popup__close .td-popup__icon--close { display: inline-block !important; }
.td-popup__title { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; }

/* Full-screen slide-up sheet on PHONES only (< 600px, the single-column
   cap — media queries can't read --tt-single-col-max). Tablets keep the
   desktop centered card: a 100%-wide sheet looks broken next to the capped
   600px page column. */
@media (max-width: 599px) {
    /* On mobile: slide up from bottom */
    .td-popup-overlay {
        align-items: flex-end;
        justify-content: center;
    }
    .td-popup-card {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        transform: translateY(100%);
        opacity: 1;
    }
    .td-popup-overlay--active .td-popup-card {
        transform: translateY(0);
    }
    .td-popup__close .td-popup__icon--back { display: inline-block !important; }
    .td-popup__close .td-popup__icon--close { display: none !important; }
    /* Safe area padding for footer save button */
    .td-popup__footer {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

.td-popup__tabs { display: flex; gap: 8px; padding: 14px 24px; border-bottom: 1px solid var(--tt-border, #e5e5e5); }
/* Pill tab. NB: vertical padding is load-bearing — the old rule had
   `padding: 0 20px` and relied on Flatsome's global button height, so when
   the parent theme was removed the pill collapsed onto its text. */
.td-popup__tab {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0;
    padding: 10px 18px;
    border: 0; border-radius: 999px;
    font-size: 14px; font-weight: 600; line-height: 1.2;
    background: var(--tt-secondary, #f5f5f5); color: var(--tt-foreground, #171717);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.td-popup__tab:hover { background: var(--tt-border, #e5e5e5); }
.td-popup__tab svg { width: 15px; height: 15px; flex: none; }
.td-popup__tab--active { background: var(--tt-primary, #171717); color: #fff; }
.td-popup__tab--active:hover { background: #2d2d2d; }

.td-popup__body {
    flex: 1; overflow-y: auto;
    padding: 4px 14px 16px;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}
.td-popup__tab-content { display: none; }
.td-popup__tab-content--active { display: block; }

.td-popup__country {
    display: flex; align-items: center;
    padding: 14px 10px;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
.td-popup__country:hover { background: #fafaf8; border-color: #1a1a1a; }
.td-popup__country:has(+ .td-popup__cities .td-popup__radio--selected) { background: #fafaf8; }
.td-popup__country-flag {
    width: 28px;
    height: 20px;
    margin-right: 14px;
    border-radius: 3px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.td-popup__country-info { flex: 1; }
.td-popup__country-name { font-size: 15px; font-weight: 600; }
.td-popup__country-meta { font-size: 13px; color: #666666; margin-top: 2px; }
.td-popup__country-chevron { font-size: 18px; color: #666666; transition: transform 0.3s ease; }
.td-popup__country--expanded .td-popup__country-chevron { transform: rotate(180deg); }

.td-popup__cities { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; }
.td-popup__cities--open { max-height: 500px; }

.td-popup__city {
    display: flex; align-items: center;
    padding: 12px 10px 12px 28px;
    cursor: pointer; border-radius: 8px;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
.td-popup__city:hover { background: #fafaf8; border-color: #1a1a1a; }
.td-popup__city:has(.td-popup__radio--selected) { background: #fafaf8; }
.td-popup__city-icon { font-size: 20px; margin-right: 12px; }
.td-popup__city-name { font-size: 14.5px; font-weight: 500; flex: 1; }
.td-popup__city-count { font-size: 13px; color: #9a9a9a; margin-right: 12px; }

.td-popup__radio {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid #d0d0d0;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.2s ease;
}
.td-popup__radio--selected { border-color: #1a1a1a; }
.td-popup__radio-inner {
    width: 12px; height: 12px;
    border-radius: 50%; background: #1a1a1a;
    transform: scale(0);
    transition: transform 0.2s cubic-bezier(0.16,1,0.3,1);
}
.td-popup__radio--selected .td-popup__radio-inner { transform: scale(1); }

.td-popup__vibes-placeholder { text-align: center; padding: 40px 20px; color: #9a9a9a; font-size: 14px; }

.td-popup__footer { padding: 16px 24px 22px; border-top: 1px solid #f0eeea; }
.td-popup__save {
    width: 100%; padding: 14px;
    border-radius: 14px;
    background: #1a1a1a; color: #fff;
    font-size: 15px; font-weight: 600;
    border: none; cursor: pointer;
    transition: all 0.25s ease;
    margin: 0;
    line-height: 1.4em;
}
.td-popup__save:hover { background: #333; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.15); }

@keyframes tdFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Was 900px — realigned to 1023px so the sidebar box drops its desktop
   border/sticky at the same width the layout goes single-column. */
@media (max-width: 1023px) {
    .td-sidebar {
        position: relative; height: auto;
        border-right: none;
        border-bottom: 1px solid #f0eeea;
    }
}