/* Attendance UI shared by the conference page and conference lists:
   - tooltips (.ap-tip) and the Follow / Register / My Conference pop-ups (js/attendance-popups.js)
   - the Follow / Registered? control on conference cards (js/attendance-buttons.js) */

/* ===== Tooltips (attendance pop-ups and the My Conference tab button) ===== */
.ap-has-tip {
    position: relative;
}

.ap-tip {
    position: absolute;
    z-index: 20;
    left: 50%;
    bottom: calc(100% + 10px);
    width: max-content;
    max-width: 210px;
    padding: 8px 11px;
    border-radius: 10px;
    background: #0f2f2c;
    color: rgba(226, 242, 239, 0.86);
    font-size: 0.76rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: center;
    white-space: normal;
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 4px) scale(0.96);
    transform-origin: 50% 100%;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
    pointer-events: none;
}

.ap-tip strong {
    display: block;
    margin-bottom: 2px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
}

.ap-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #0f2f2c;
}

.ap-has-tip:hover > .ap-tip,
.ap-has-tip:focus-visible > .ap-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
    transition: opacity 0.18s ease 0.08s, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s, visibility 0s linear 0.08s;
}

/* Below the element, right-aligned (the tab button sits at the right edge) */
.ap-tip.ap-tip--below {
    bottom: auto;
    top: calc(100% + 10px);
    left: auto;
    right: 0;
    max-width: 240px;
    text-align: left;
    transform: translateY(-4px) scale(0.96);
    transform-origin: calc(100% - 20px) 0;
}

.ap-tip.ap-tip--below::after {
    top: auto;
    bottom: 100%;
    left: auto;
    right: 14px;
    margin-left: 0;
    border-top-color: transparent;
    border-bottom-color: #0f2f2c;
}

.ap-has-tip:hover > .ap-tip.ap-tip--below,
.ap-has-tip:focus-visible > .ap-tip.ap-tip--below {
    transform: none;
}

@media (hover: none) {
    .ap-tip {
        display: none;
    }
}

/* ===== Attendance pop-ups: Follow / Register / locked My Conference =====
   (presentAttendancePopup() in js/conference.js). Above the sticky header (50000),
   like the confirmation pop-ups. The page underneath is scroll-locked. */
html.ap-locked {
    overflow: hidden !important;
    scrollbar-gutter: stable;
}

.ap-overlay {
    position: fixed;
    inset: 0;
    z-index: 55000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(4, 34, 31, 0.5);
    -webkit-backdrop-filter: blur(6px) saturate(115%);
    backdrop-filter: blur(6px) saturate(115%);
    overscroll-behavior: contain;
    font-family: 'Inter', 'Inter Fallback', sans-serif;
    opacity: 0;
    /* Closing timing; .is-open sets the opening one */
    transition: opacity 0.24s ease-in;
}

.ap-overlay.is-open {
    opacity: 1;
    transition: opacity 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ap-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(440px, 100%);
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 32px 80px -24px rgba(2, 40, 36, 0.6), 0 2px 6px rgba(2, 40, 36, 0.08);
    outline: none;
    opacity: 0;
    transform: translateY(26px) scale(0.94);
    transition: transform 0.22s ease-in, opacity 0.2s ease-in;
}

.ap-overlay.is-open .ap-dialog {
    opacity: 1;
    transform: none;
    transition: transform 0.55s cubic-bezier(0.2, 1.25, 0.35, 1), opacity 0.28s ease-out;
}

.ap-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ap-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ap-close svg {
    width: 16px;
    height: 16px;
}

.ap-close:hover {
    background: rgba(255, 255, 255, 0.32);
    transform: rotate(90deg);
}

.ap-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Hero banner: the conference logo on a medal, floating feature chips, sparkles */
.ap-hero {
    position: relative;
    height: 156px;
    overflow: hidden;
    background:
        radial-gradient(120% 95% at 50% 0%, rgba(77, 208, 190, 0.55) 0%, rgba(77, 208, 190, 0) 62%),
        linear-gradient(135deg, #12a594 0%, #00897b 48%, #0a5d55 100%);
}

.ap-hero--registered {
    background:
        radial-gradient(120% 95% at 50% 0%, rgba(110, 231, 183, 0.5) 0%, rgba(110, 231, 183, 0) 62%),
        linear-gradient(135deg, #10b39b 0%, #059384 45%, #075e54 100%);
}

.ap-hero--locked {
    background:
        radial-gradient(120% 95% at 50% 0%, rgba(148, 196, 189, 0.45) 0%, rgba(148, 196, 189, 0) 62%),
        linear-gradient(135deg, #5d847f 0%, #426763 50%, #2c4744 100%);
}

/* Faint dot grid */
.ap-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.2px);
    background-size: 16px 16px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.15));
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.15));
}

.ap-orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 70%);
}

.ap-orb--a {
    width: 180px;
    height: 180px;
    left: -60px;
    bottom: -90px;
}

.ap-orb--b {
    width: 140px;
    height: 140px;
    right: -40px;
    top: -70px;
}

.ap-chip {
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    color: #00796b;
    box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.4);
    rotate: var(--rot, 0deg);
    opacity: 0;
    transform: translateY(12px) scale(0.4);
}

.ap-chip svg {
    width: 21px;
    height: 21px;
}

.ap-hero--locked .ap-chip {
    background: rgba(255, 255, 255, 0.82);
    color: #6b8582;
}

.ap-overlay.is-open .ap-chip {
    animation:
        apChipIn 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) calc(0.18s + var(--i) * 0.07s) forwards,
        apFloat 4.6s ease-in-out calc(0.9s + var(--i) * 0.35s) infinite;
}

@keyframes apChipIn {
    to { opacity: 1; transform: none; }
}

@keyframes apFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -7px; }
}

.ap-sparkle {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    color: rgba(255, 255, 255, 0.95);
    opacity: 0;
}

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

.ap-hero--registered .ap-sparkle {
    color: #fde68a;
}

.ap-overlay.is-open .ap-sparkle {
    animation: apTwinkle 2.8s ease-in-out calc(0.5s + var(--d)) infinite;
}

@keyframes apTwinkle {
    0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(90deg); }
}

.ap-medal {
    position: absolute;
    left: 50%;
    top: 52%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    margin: -43px 0 0 -43px;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(255, 255, 255, 0.18);
    opacity: 0;
    transform: scale(0.55);
}

.ap-overlay.is-open .ap-medal {
    animation: apMedalIn 0.65s cubic-bezier(0.2, 1.5, 0.4, 1) 0.08s forwards;
}

@keyframes apMedalIn {
    to { opacity: 1; transform: none; }
}

/* Pulse ring around the medal */
.ap-medal::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 32px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    opacity: 0;
}

.ap-overlay.is-open .ap-medal::before {
    animation: apPulse 2.6s ease-out 0.9s infinite;
}

@keyframes apPulse {
    0% { opacity: 0.9; transform: scale(1); }
    70%, 100% { opacity: 0; transform: scale(1.35); }
}

.ap-medal-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    color: #00897b;
}

.ap-medal-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 14px;
}

.ap-medal-logo > svg {
    width: 36px;
    height: 36px;
}

.ap-badge {
    position: absolute;
    right: -10px;
    bottom: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    box-sizing: border-box;
    border: 3px solid #fff;
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.35);
    transform: scale(0);
}

.ap-badge svg {
    width: 16px;
    height: 16px;
}

.ap-badge--following { background: linear-gradient(135deg, #ffcd57 0%, #f59e0b 100%); }
.ap-badge--registered { background: linear-gradient(135deg, #4ade80 0%, #059669 100%); }
.ap-badge--locked { background: linear-gradient(135deg, #9fb2b0 0%, #4f6866 100%); }

.ap-overlay.is-open .ap-badge {
    animation: apBadgeIn 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.45s forwards;
}

@keyframes apBadgeIn {
    to { transform: scale(1); }
}

.ap-overlay.is-open .ap-badge--following svg {
    transform-origin: 50% 10%;
    animation: apRing 0.9s ease-in-out 0.95s 2;
}

@keyframes apRing {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(18deg); }
    30% { transform: rotate(-15deg); }
    45% { transform: rotate(11deg); }
    60% { transform: rotate(-7deg); }
    75% { transform: rotate(3deg); }
}

.ap-overlay.is-open .ap-badge--locked svg {
    animation: apShake 0.5s ease-in-out 1s;
}

@keyframes apShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px) rotate(-8deg); }
    75% { transform: translateX(2px) rotate(8deg); }
}

/* Confetti burst (register) from behind the medal */
.ap-confetti {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 0;
    height: 0;
}

.ap-confetti i {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--w);
    height: 11px;
    margin: -5px 0 0 -3px;
    border-radius: 2px;
    background: var(--c);
    opacity: 0;
}

.ap-overlay.is-open .ap-confetti i {
    animation: apConfetti 1.4s cubic-bezier(0.12, 0.7, 0.3, 1) calc(0.3s + var(--d)) forwards;
}

@keyframes apConfetti {
    0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(0.5); }
    75% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); }
}

/* Body */
.ap-body {
    padding: 22px 26px 4px;
    text-align: center;
}

.ap-title {
    margin: 0 0 6px;
    color: #0d2b28;
    font-size: 1.42rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.ap-lead {
    margin: 0 0 18px;
    color: #5b6f6c;
    font-size: 0.95rem;
    line-height: 1.5;
}

.ap-lead strong {
    color: #0d2b28;
    font-weight: 600;
}

.ap-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.ap-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid #e2eeec;
    border-radius: 14px;
    background: #f6fbfa;
    opacity: 0;
    transform: translateY(8px);
}

.ap-overlay.is-open .ap-list li {
    animation: apRise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.26s + var(--i) * 0.06s) forwards;
}

@keyframes apRise {
    to { opacity: 1; transform: none; }
}

.ap-list-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(135deg, #e3f5f2 0%, #cdebe6 100%);
    color: #00796b;
}

.ap-list-icon svg {
    width: 19px;
    height: 19px;
}

.ap-list-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.ap-list-text strong {
    color: #10302d;
    font-size: 0.92rem;
    font-weight: 600;
}

.ap-list-text span {
    color: #66807c;
    font-size: 0.82rem;
}

/* Follow pop-up: what registering would add */
.ap-upsell {
    margin-top: 14px;
    padding: 14px 14px 12px;
    border: 1px dashed #9ed2ca;
    border-radius: 16px;
    background: linear-gradient(135deg, #fffaf0 0%, #f2faf8 100%);
    opacity: 0;
    transform: translateY(8px);
}

.ap-overlay.is-open .ap-upsell {
    animation: apRise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.48s forwards;
}

.ap-upsell-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 11px;
    color: #2f4f4b;
    font-size: 0.88rem;
    line-height: 1.35;
}

.ap-upsell-head strong {
    color: #0d2b28;
    font-weight: 600;
}

.ap-upsell-lock {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffcd57 0%, #f59e0b 100%);
    color: #fff;
}

.ap-upsell-lock svg {
    width: 13px;
    height: 13px;
}

.ap-upsell-icons {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ap-upsell-icons li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #dcebe8;
    border-radius: 12px;
    background: #fff;
    color: #3f9c90;
    cursor: default;
    outline: none;
    transition: transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1), color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ap-upsell-icons li > svg {
    width: 20px;
    height: 20px;
}

.ap-upsell-icons li:hover,
.ap-upsell-icons li:focus-visible {
    transform: translateY(-3px);
    border-color: #80cbc4;
    color: #00796b;
    box-shadow: 0 8px 16px -8px rgba(0, 121, 107, 0.5);
}

/* Register pop-up: where to find My Conference later */
.ap-note {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
    color: #66807c;
    font-size: 0.82rem;
}

.ap-note-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #14a594 0%, #00796b 100%);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 600;
}

.ap-note-pill svg {
    width: 12px;
    height: 12px;
}

/* Actions */
.ap-actions {
    display: flex;
    gap: 10px;
    padding: 16px 26px 22px;
    padding-bottom: max(22px, env(safe-area-inset-bottom));
}

.ap-btn {
    position: relative;
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    overflow: hidden;
    border: 0;
    border-radius: 13px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.ap-btn svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ap-btn--ghost {
    background: #f0f4f3;
    color: #34504c;
}

.ap-btn--ghost:hover {
    background: #e3eceb;
    color: #1d3a37;
}

.ap-btn--primary {
    background: linear-gradient(135deg, #14a594 0%, #00796b 100%);
    color: #fff;
    box-shadow: 0 10px 22px -10px rgba(0, 121, 107, 0.85);
}

.ap-btn--primary:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 14px 26px -10px rgba(0, 121, 107, 0.9);
}

a.ap-btn--primary:hover svg {
    transform: translateX(3px);
}

.ap-btn:active {
    transform: scale(0.97);
}

.ap-btn:focus-visible {
    outline: 3px solid rgba(0, 150, 136, 0.35);
    outline-offset: 2px;
}

/* One shine across the main button once the pop-up has settled */
.ap-btn--primary::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    transform: skewX(-20deg);
    pointer-events: none;
}

.ap-overlay.is-open .ap-btn--primary::after {
    animation: apShine 1s ease 1.1s;
}

@keyframes apShine {
    to { left: 130%; }
}

#ap-registered-overlay .ap-btn--primary {
    flex-grow: 1.25;
}

/* Phones: a bottom sheet that slides up */
@media (max-width: 520px) {
    .ap-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .ap-dialog {
        width: 100%;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        border-radius: 24px 24px 0 0;
        opacity: 1;
        transform: translateY(100%);
        transition: transform 0.26s cubic-bezier(0.4, 0, 1, 1);
    }

    .ap-overlay.is-open .ap-dialog {
        transform: none;
        transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.25, 1);
    }

    /* Grab handle */
    .ap-hero::after {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        width: 40px;
        height: 4px;
        margin-left: -20px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.5);
    }

    .ap-hero {
        height: 136px;
    }

    .ap-chip {
        width: 34px;
        height: 34px;
        margin: -17px 0 0 -17px;
        border-radius: 10px;
    }

    .ap-chip svg {
        width: 18px;
        height: 18px;
    }

    .ap-medal {
        width: 76px;
        height: 76px;
        margin: -38px 0 0 -38px;
        border-radius: 23px;
    }

    .ap-medal-logo {
        width: 60px;
        height: 60px;
    }

    .ap-body {
        padding: 18px 18px 4px;
    }

    .ap-title {
        font-size: 1.28rem;
    }

    .ap-lead {
        margin-bottom: 14px;
        font-size: 0.9rem;
    }

    .ap-list li {
        padding: 8px 10px;
    }

    .ap-actions {
        padding: 14px 18px 18px;
        padding-bottom: max(18px, env(safe-area-inset-bottom));
    }

    .ap-btn--ghost {
        flex: 0 0 auto;
        padding: 0 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* A (near-)instant transition remains: the script waits for transitionend */
    .ap-overlay,
    .ap-overlay.is-open,
    .ap-dialog,
    .ap-overlay.is-open .ap-dialog {
        transition-duration: 0.01ms;
    }

    .ap-dialog {
        transform: none;
    }

    .ap-overlay .ap-chip,
    .ap-overlay .ap-medal,
    .ap-overlay .ap-badge,
    .ap-overlay .ap-list li,
    .ap-overlay .ap-upsell {
        opacity: 1;
        transform: none;
    }

    .ap-overlay.is-open *,
    .ap-overlay.is-open *::before,
    .ap-overlay.is-open *::after {
        animation: none !important;
    }

    .ap-confetti,
    .ap-sparkle {
        display: none;
    }
}

/* ===== Compact pop-up (unregister confirmation): no hero, a warning badge on top ===== */
.ap-dialog--compact {
    width: min(400px, 100%);
}

.ap-dialog--compact .ap-close {
    background: #f1f5f4;
    color: #50625f;
}

.ap-dialog--compact .ap-close:hover {
    background: #e3eceb;
}

.ap-dialog--compact .ap-close:focus-visible {
    outline-color: #009688;
}

.ap-dialog--compact .ap-body {
    padding-top: 30px;
}

.ap-warn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, #fff4e0 0%, #ffe4c2 100%);
    color: #d97706;
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.1);
    transform: scale(0.6);
    opacity: 0;
}

.ap-overlay.is-open .ap-warn-icon {
    animation: apMedalIn 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) 0.08s forwards;
}

.ap-warn-icon svg {
    width: 28px;
    height: 28px;
}

.ap-dialog--compact .ap-lead {
    margin-bottom: 4px;
}

.ap-btn--danger {
    color: #b42318;
}

.ap-btn--danger:hover {
    background: #fdecea;
    color: #912018;
}

@media (prefers-reduced-motion: reduce) {
    .ap-overlay .ap-warn-icon {
        opacity: 1;
        transform: none;
    }
}

/* ===== Follow / Registered? control on conference cards (js/attendance-buttons.js) =====
   A segmented pill: Follow | Registered?. The chosen side fills with teal; while
   registered, Follow shows as an included (locked) "Following". */
.att-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    box-sizing: border-box;
    padding: 2px;
    border: 1px solid #c6e3de;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 79, 72, 0.06);
    font-family: 'Inter', 'Inter Fallback', sans-serif;
    line-height: 1;
    white-space: nowrap;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.att-toggle:hover {
    border-color: #9fd0c8;
    box-shadow: 0 4px 12px -6px rgba(0, 121, 107, 0.35);
}

.att-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-sizing: border-box;
    height: 28px;
    min-height: 0;
    margin: 0;
    padding: 0 11px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #0f766e;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.att-btn:hover {
    background: #eaf6f4;
    color: #0b5f56;
}

.att-btn:active {
    transform: scale(0.95);
}

.att-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 150, 136, 0.45);
}

.att-btn-icon {
    position: relative;
    display: inline-flex;
    width: 14px;
    height: 14px;
}

.att-btn-icon svg {
    position: absolute;
    inset: 0;
    width: 14px;
    height: 14px;
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
}

/* The check takes the place of the bell / ticket once that side is on */
.att-btn-icon .att-icon-on {
    opacity: 0;
    transform: scale(0.4) rotate(-30deg);
}

.att-btn.is-on .att-icon-off {
    opacity: 0;
    transform: scale(0.4) rotate(30deg);
}

.att-btn.is-on .att-icon-on {
    opacity: 1;
    transform: none;
}

.att-btn.is-on {
    background: linear-gradient(135deg, #14a594 0%, #00796b 100%);
    color: #fff;
    box-shadow: 0 4px 10px -4px rgba(0, 121, 107, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.att-btn.is-on:hover {
    color: #fff;
    background: linear-gradient(135deg, #12998a 0%, #006b5f 100%);
}

/* Just switched on: a quick pop */
.att-btn.just-on {
    animation: attPop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1);
}

@keyframes attPop {
    0% { transform: scale(0.9); }
    50% { transform: scale(1.07); }
    100% { transform: scale(1); }
}

/* Following comes with the registration: shown, but not a separate choice */
.att-btn.is-included,
.att-btn.is-included:hover {
    background: #e6f4f1;
    color: #4a8b82;
    box-shadow: none;
    cursor: default;
    transform: none;
}

.att-btn.is-included .att-icon-off {
    opacity: 0;
}

.att-btn.is-included .att-icon-on {
    opacity: 1;
    transform: none;
}

.att-toggle.is-loading .att-btn {
    pointer-events: none;
}

.att-toggle.is-loading {
    opacity: 0.6;
}

.att-toggle.is-ended {
    border-color: #e1e7e6;
    background: #f6f8f8;
    box-shadow: none;
}

.att-toggle.is-ended .att-btn,
.att-toggle.is-ended .att-btn:hover {
    background: transparent;
    color: #9aa8a6;
    box-shadow: none;
    cursor: default;
    transform: none;
}

/* ===== Floating tooltip for the control (positioned by the script, so scrolling lists
   and clipped containers cannot cut it off) ===== */
.att-tip {
    position: fixed;
    z-index: 56000;
    top: 0;
    left: 0;
    max-width: 230px;
    padding: 8px 11px;
    border-radius: 10px;
    background: #0f2f2c;
    color: rgba(226, 242, 239, 0.86);
    font-family: 'Inter', 'Inter Fallback', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px) scale(0.96);
    transform-origin: var(--att-tip-arrow-x, 50%) 100%;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.att-tip.is-below {
    transform: translateY(-4px) scale(0.96);
    transform-origin: var(--att-tip-arrow-x, 50%) 0;
}

.att-tip.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.att-tip strong {
    display: block;
    margin-bottom: 2px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
}

.att-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: var(--att-tip-arrow-x, 50%);
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #0f2f2c;
}

.att-tip.is-below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #0f2f2c;
}

@media (prefers-reduced-motion: reduce) {
    .att-btn,
    .att-btn-icon svg,
    .att-tip {
        transition: none;
    }

    .att-btn.just-on {
        animation: none;
    }
}