/* LOCAL (see PATCHES.md patch 246): the "Tell us" bubble. Behaviour in public/js/tell-us.js. */
.tellus {
    --tu-navy: #0A1A3F;
    --tu-navy-2: #13275A;
    --tu-gold: #FFD800;
    --tu-ink: #0B1633;
    --tu-line: #E4E7EC;
    --tu-bar: 0px;
    --tu-x: 16px;
    --tu-y: 16px;
    position: fixed;
    inset: auto 0 0 auto;
    z-index: 1045;
    font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.tellus[hidden] { display: none !important; }
@media (max-width: 767.98px) {
    .tellus--bar { --tu-bar: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* The bubble. Placed by --tu-x (from the side it sits on) and --tu-y (from the bottom). */
.tellus-bubble {
    position: fixed;
    right: var(--tu-x);
    bottom: calc(var(--tu-y) + var(--tu-bar));
    width: 64px;
    height: 64px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, var(--tu-navy-2), var(--tu-navy) 70%);
    box-shadow: 0 8px 24px rgba(10, 26, 63, .35), 0 0 0 2px var(--tu-gold);
    color: var(--tu-gold);
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: transform .18s cubic-bezier(.16, 1, .3, 1), opacity .18s ease, box-shadow .18s ease;
}
.tellus.is-left .tellus-bubble { right: auto; left: var(--tu-x); }
.tellus-bubble:hover { transform: scale(1.05); }
.tellus-bubble:focus-visible { outline: 3px solid var(--tu-gold); outline-offset: 3px; }
.tellus.is-dragging .tellus-bubble { transition: none; transform: scale(1.08); cursor: grabbing; box-shadow: 0 14px 32px rgba(10, 26, 63, .45), 0 0 0 2px var(--tu-gold); }
.tellus.is-open .tellus-bubble { transform: scale(.6); opacity: 0; pointer-events: none; }
.tellus-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: tellus-spin 24s linear infinite; }
.tellus-ring text { fill: var(--tu-gold); font-family: Archivo, Manrope, system-ui, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .4px; }
.tellus-mark { position: absolute; left: 50%; top: 50%; width: 22px; height: auto; transform: translate(-50%, -50%); pointer-events: none; }
@keyframes tellus-spin { to { transform: rotate(360deg); } }

/* The box. Grows from the bubble's corner. */
.tellus-panel {
    position: fixed;
    right: var(--tu-x);
    bottom: calc(var(--tu-y) + var(--tu-bar));
    width: min(340px, calc(100vw - 32px));
    max-height: calc(100vh - var(--tu-bar) - 32px);
    overflow: auto;
    padding: 16px;
    border-radius: 18px;
    background: #fff;
    color: var(--tu-ink);
    box-shadow: 0 20px 48px rgba(10, 26, 63, .28), 0 0 0 1px rgba(10, 26, 63, .08);
    transform-origin: bottom right;
    animation: tellus-in .22s cubic-bezier(.16, 1, .3, 1);
}
.tellus.is-left .tellus-panel { right: auto; left: var(--tu-x); transform-origin: bottom left; }
.tellus.is-closing .tellus-panel { animation: tellus-out .2s cubic-bezier(.7, 0, .84, 0) forwards; }
@keyframes tellus-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes tellus-out { to { opacity: 0; transform: scale(.3); } }
.tellus-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.tellus-h { margin: 0; font-family: Archivo, Manrope, system-ui, sans-serif; font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--tu-navy); outline: none; }
.tellus-close { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -4px -4px 0 0; border: 0; border-radius: 50%; background: transparent; color: #5B6478; cursor: pointer; }
.tellus-close:hover, .tellus-close:focus-visible { background: #F1F3F7; color: var(--tu-navy); }
.tellus-kinds { display: flex; gap: 6px; margin: 0 0 10px; padding: 0; border: 0; }
.tellus-kinds label { flex: 1 1 0; margin: 0; }
.tellus-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.tellus-kinds span { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 4px; border: 1px solid var(--tu-line); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--tu-navy); cursor: pointer; white-space: nowrap; }
.tellus-kinds input:checked + span { border-color: var(--tu-navy); background: var(--tu-navy); color: #fff; }
.tellus-kinds input:focus-visible + span { outline: 3px solid var(--tu-gold); outline-offset: 2px; }
.tellus-form textarea, .tellus-guest input {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #CBD2DE;
    border-radius: 12px;
    font: inherit;
    font-size: 15px;
    color: var(--tu-ink);
    background: #fff;
}
.tellus-form textarea { min-height: 104px; resize: vertical; }
.tellus-form textarea:focus, .tellus-guest input:focus { outline: none; border-color: var(--tu-navy); box-shadow: 0 0 0 3px rgba(255, 216, 0, .55); }
.tellus-count { margin: 4px 2px 0; font-size: 12px; color: #5B6478; text-align: end; }
.tellus-guest { display: grid; gap: 4px; margin-top: 10px; }
.tellus-guest label { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--tu-navy); }
.tellus-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.tellus-captcha { margin-top: 10px; }
.tellus-err { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: #B42318; }
.tellus-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.tellus-send { min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--tu-gold); color: var(--tu-navy); font-weight: 800; font-size: 15px; cursor: pointer; }
.tellus-send:hover { filter: brightness(.96); }
.tellus-send:focus-visible { outline: 3px solid var(--tu-navy); outline-offset: 2px; }
.tellus-send[disabled] { opacity: .6; cursor: default; }
.tellus-restore { min-height: 32px; padding: 0; border: 0; background: none; color: var(--tu-navy); font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.tellus-thanks { margin: 8px 0 4px; font-size: 16px; font-weight: 700; color: var(--tu-navy); text-align: center; }

/* The ✕ that appears while dragging: drop the bubble on it to hide it. */
.tellus-drop {
    position: fixed;
    left: 50%;
    bottom: calc(24px + var(--tu-bar));
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-left: -30px;
    border-radius: 50%;
    background: rgba(10, 26, 63, .82);
    color: #fff;
    opacity: 0;
    transform: scale(.6);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s cubic-bezier(.16, 1, .3, 1), background-color .18s ease;
}
.tellus.is-dragging .tellus-drop { opacity: 1; transform: scale(1); }
.tellus.is-over-drop .tellus-drop { background: #B42318; transform: scale(1.15); }

/* The note after hiding, and the glow on the menu that now holds "Tell us". */
.tellus-toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + var(--tu-bar));
    width: max-content;
    max-width: calc(100vw - 32px);
    margin: 0;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--tu-navy);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 12px 32px rgba(10, 26, 63, .35);
    transform: translateX(-50%);
    animation: tellus-toast-in .25s cubic-bezier(.16, 1, .3, 1);
}
@keyframes tellus-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.tellus-glow { border-radius: 999px; animation: tellus-glow 1s ease-in-out 4; }
@keyframes tellus-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 216, 0, 0); }
    50% { box-shadow: 0 0 0 4px rgba(255, 216, 0, .95), 0 0 18px 4px rgba(255, 216, 0, .6); }
}

/* Right to left: the default corner is the left. */
[dir="rtl"] .tellus:not(.is-right):not(.is-left) .tellus-bubble,
[dir="rtl"] .tellus:not(.is-right):not(.is-left) .tellus-panel { right: auto; left: var(--tu-x); transform-origin: bottom left; }

@media (prefers-reduced-motion: reduce) {
    .tellus-ring { animation: none; }
    .tellus-panel, .tellus.is-closing .tellus-panel, .tellus-toast, .tellus-glow { animation: none; }
    .tellus-bubble, .tellus-drop { transition: none; }
}
@media print { .tellus { display: none !important; } }

/* LOCAL (see PATCHES.md patch 264): on a phone the bubble sits over the last
   80px of the screen, so at the end of a page it covered the footer's last
   line ("Operated by ... Alexandria, Egypt.") on the front page and /pricing.
   The site footer ends with room for it: 104px, the same room patch 261 left
   at the end of the athlete page. Only while the bubble is showing - this file
   loads only where it can - and only under 576px, where it overlaps. The
   footer's own py-5 is !important in Bootstrap, hence the !important here. */
@media (max-width: 575.98px) {
    body:has(.tellus:not([hidden])) footer.footer { padding-bottom: 104px !important; }
}