/* ---- Starting Soon Ticker ----
   A compact, stock-ticker-style strip of Virtual/Telephone/Hybrid meetings
   in progress or starting soon. Uses .gam-card (gam-public.css) for the
   expanded panel, since it's rendered via the finder's own card builder. */

.gam-ticker {
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    border-radius: var(--gam-radius, 8px);
    overflow: hidden;
    box-shadow: var(--gam-shadow, 0 2px 8px rgba(0,0,0,.08));
    margin-bottom: 16px;
}
/* The filter dropdown is an overlay, so it isn't clipped by the bar's
   rounded-corner overflow:hidden. */
.gam-ticker--filters-open { overflow: visible; }

.gam-ticker__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--gam-navy, #1a2744);
    color: #fff;
    padding: 0 8px 0 14px;
    height: 44px;
}

.gam-ticker__label {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding-right: 12px;
    border-right: 1px solid rgba(255,255,255,.18);
}

.gam-ticker__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef5350;
    animation: gam-ticker-pulse 1.6s ease-in-out infinite;
}

@keyframes gam-ticker-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,83,80,.6); }
    50%      { opacity: .55; box-shadow: 0 0 0 4px rgba(239,83,80,0); }
}

.gam-ticker__counts {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding-right: 12px;
    border-right: 1px solid rgba(255,255,255,.18);
}

.gam-ticker__count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.85);
}
.gam-ticker__count--live { color: #ff8a80; }
.gam-ticker__count--live.has-items { background: rgba(255,82,82,.22); color: #ffcdd2; }
.gam-ticker__count--soon.has-items { background: rgba(255,213,79,.18); color: #ffe082; }
.gam-ticker__count-num { font-weight: 800; }

.gam-ticker__viewport {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.gam-ticker__track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
}

.gam-ticker__track--scroll {
    animation: gam-ticker-scroll linear infinite;
    animation-duration: calc(var(--gam-ticker-count, 6) * 4.5s);
}

.gam-ticker__track.is-paused { animation-play-state: paused; }

@keyframes gam-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.gam-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    font-size: 13px;
}

.gam-ticker__badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.gam-ticker__badge--virtual   { background: rgba(66,165,245,.22);  color: #90caf9; }
.gam-ticker__badge--telephone { background: rgba(255,167,38,.22);  color: #ffcc80; }
.gam-ticker__badge--hybrid    { background: rgba(186,104,200,.22); color: #ce93d8; }

.gam-ticker__status {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .5px;
    color: #ffd54f;
}
.gam-ticker__status--live { color: #ff5252; }

.gam-ticker__name { font-weight: 600; color: #fff; }

.gam-ticker__action {
    color: #80cbc4;
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
}
.gam-ticker__action:hover { text-decoration: underline; }

.gam-ticker__sep { color: rgba(255,255,255,.25); margin-left: 6px; }

.gam-ticker__empty {
    padding: 0 4px;
    font-size: 13px;
    color: rgba(255,255,255,.75);
}

.gam-ticker__retry {
    background: none;
    border: none;
    color: #80cbc4;
    text-decoration: underline;
    cursor: pointer;
    font-size: 13px;
    padding: 0;
}

.gam-ticker__controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding-left: 10px;
    border-left: 1px solid rgba(255,255,255,.18);
}

.gam-ticker__updated {
    font-size: 11px;
    color: rgba(255,255,255,.55);
    margin-right: 4px;
    white-space: nowrap;
}

/* Reset browser-native button chrome (Safari/Chrome render an unstyled
   <button> with its own gray/blue box + shadow otherwise, which swallows
   the SVG icon) and beat theme `button` rules with a scoped selector. */
.gam-ticker .gam-ticker__btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 6px;
    background-color: rgba(255,255,255,.12);
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    transition: background-color .15s;
}
.gam-ticker .gam-ticker__btn:hover  { background-color: rgba(255,255,255,.24); }
.gam-ticker .gam-ticker__btn:active { background-color: rgba(255,255,255,.3); }
.gam-ticker .gam-ticker__btn:focus-visible { outline: 2px solid #80cbc4; outline-offset: 2px; }
.gam-ticker .gam-ticker__btn svg {
    display: block;
    stroke: currentColor;
    fill: none;
    pointer-events: none;
}

.gam-ticker.is-loading .gam-ticker__refresh svg { animation: gam-ticker-spin .7s linear infinite; }
@keyframes gam-ticker-spin { to { transform: rotate(360deg); } }

.gam-ticker__expand svg { transition: transform .2s; }
.gam-ticker--expanded .gam-ticker__expand svg { transform: rotate(180deg); }

.gam-ticker__filter-toggle { position: relative; }
.gam-ticker__filter-toggle.has-filters { background-color: rgba(255,213,79,.28); color: #ffe082; }
.gam-ticker__filter-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--gam-red, #c8102e);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

/* ---- Filter dropdown ----
   A light popover anchored under the Filter button, styled with the
   finder's own .gam-chip so the filter controls look/behave the same
   as the Type filter on the Find a Meeting search form. */
.gam-ticker__filter-panel {
    position: absolute;
    top: 44px;
    right: 8px;
    z-index: 20;
    width: 260px;
    background: #fff;
    border: 1px solid var(--gam-border, #ddd);
    border-radius: var(--gam-radius, 8px);
    box-shadow: var(--gam-shadow, 0 2px 8px rgba(0,0,0,.08));
    padding: 16px;
}

.gam-ticker__filter-group { margin-bottom: 14px; }
.gam-ticker__filter-group:last-of-type { margin-bottom: 12px; }

.gam-ticker__filter-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--gam-text, #333);
}

.gam-ticker__filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.gam-ticker__filter-select {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--gam-border, #ddd);
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    color: var(--gam-text, #333);
}

.gam-ticker__filter-clear {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--gam-border, #ddd);
    border-radius: 6px;
    background: transparent;
    color: var(--gam-muted, #666);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.gam-ticker__filter-clear:hover { border-color: var(--gam-text, #333); color: var(--gam-text, #333); }

.gam-ticker__panel {
    background: #fff;
    border: 1px solid var(--gam-border, #ddd);
    border-top: none;
    padding: 16px;
}

.gam-ticker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

@media (max-width: 640px) {
    .gam-ticker__label-text { display: none; }
    .gam-ticker__updated    { display: none; }
}

@media (max-width: 480px) {
    .gam-ticker__count-label { display: none; } /* keep the number, drop "in progress"/"starting soon" */
}