/**
 *                          ___                   _       _         _
 *                         / __)                 | |     | |       | |
 *     _ _ _ _ _ _ _ _ _ _| |__ _____  ____ _   _| |  _  | |__   __| |
 *    | | | | | | | | | (_   __|____ |/ ___) | | | |_/ ) |  _ \ / _  |
 *    | | | | | | | | | | | |  / ___ | |   | |_| |  _ ( _| |_) | (_| |
 *     \___/ \___/ \___(_)|_|  \_____|_|   |____/|_| \_|_)____/ \____|
 *
 *
 * 	Author: MD OMAR FARUK
 * 	Author URI: www.faruk.bd
 * 	Author Contact: https://faruk.bd/#contact
 * 	Author Email: info@faruk.bd | farukmr@gmail.com
 * 	Copyright © 2026
 *                          ___                   _       _         _
 *                         / __)                 | |     | |       | |
 *     _ _ _ _ _ _ _ _ _ _| |__ _____  ____ _   _| |  _  | |__   __| |
 *    | | | | | | | | | (_   __|____ |/ ___) | | | |_/ ) |  _ \ / _  |
 *    | | | | | | | | | | | |  / ___ | |   | |_| |  _ ( _| |_) | (_| |
 *     \___/ \___/ \___(_)|_|  \_____|_|   |____/|_| \_|_)____/ \____|
 *
 *  Advertising, tips and gifts, as the visitor sees them.
 */

/* The boxes advertisements sit in are styled in the page itself, under names that change each day (see slotStyles() in plugin.php). */

/* -------------------------------------------------------- the panels */

.aio-panel {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(0, 0, 0, .55);
    display: grid;
    place-items: center;
    padding: 20px;
}
.aio-panel[hidden] { display: none; }

.aio-panel .box {
    width: 100%;
    max-width: 380px;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    position: relative;
}
.aio-panel .box.wide { max-width: 560px; }
.aio-panel .box h3 { margin: 0 0 4px; font-size: 18px; }
.aio-panel .box h4 {
    margin: 18px 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--muted);
}
.aio-panel .x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--ink);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.aio-panel input[type="number"],
.aio-panel input[type="text"] {
    width: 100%;
    margin: 10px 0 0;
    padding: 11px 12px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--bg-soft);
    color: var(--ink);
    font-size: 14px;
}
.aio-panel .amounts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 8px;
    margin-top: 14px;
}
.aio-panel .amounts button {
    padding: 11px 6px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--bg-soft);
    color: var(--ink);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.aio-panel .amounts button:hover,
.aio-panel .amounts button.on {
    border-color: var(--brand);
    color: var(--brand);
}
/* the same row of amounts on the Add money page */
.aio-amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin: 6px 0 8px; }
.aio-amounts button {
    min-height: 46px; padding: 10px 6px; border-radius: 11px; border: 1.5px solid var(--line, #2a3342);
    background: var(--bg-soft, rgba(127, 127, 127, .08)); color: var(--ink, inherit);
    font: inherit; font-weight: 700; font-size: 15px; letter-spacing: -.01em; cursor: pointer;
    transition: border-color .12s, background .12s, transform .08s, color .12s;
}
.aio-amounts button:hover { border-color: var(--brand, #2f6fed); color: var(--brand, #2f6fed); transform: translateY(-1px); }
.aio-amounts button.on {
    border-color: var(--brand, #2f6fed); background: var(--brand, #2f6fed); color: #fff;
    box-shadow: 0 8px 18px -10px var(--brand, #2f6fed);
}
.aio-amounts button:active { transform: translateY(0); }
.aio-topup .field > label { font-weight: 600; }
.aio-panel .btn.block { margin-top: 14px; }
.aio-panel .said { margin-top: 12px; font-size: 13.5px; min-height: 20px; }
.aio-panel .said.bad { color: #ef4444; }
.aio-panel .said.good { color: #22c55e; }

/* ------------------------------------------------------------- gifts */

.gifts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 10px;
}
.gift {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-soft);
    padding: 12px 6px 9px;
    cursor: pointer;
    text-align: center;
    transition: transform .12s, border-color .12s;
}
.gift:hover { transform: translateY(-2px); border-color: var(--gift, var(--brand)); }
.gift.busy { opacity: .5; pointer-events: none; }
.gift .face { display: block; font-size: 30px; line-height: 1.1; }
.gift .face img { width: 34px; height: 34px; object-fit: contain; }
.gift .name { display: block; font-size: 12px; margin-top: 5px; color: var(--ink); }
.gift .cost {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--gift, var(--brand));
}

/* the gift flying across the player */
.aio-gift-stage {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 90;
    overflow: hidden;
}
.aio-gift-fly {
    position: absolute;
    left: 50%;

    /* each new one sits a step higher, so two at once do not cover each other */
    bottom: calc(12% + var(--step, 0) * 54px);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--gift, #2f6fed);
    color: #fff;
    padding: 12px 18px;
    border-radius: 40px;
    font-weight: 600;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
    white-space: nowrap;
}
.aio-gift-fly .big { font-size: 26px; }
.aio-gift-fly img { width: 30px; height: 30px; object-fit: contain; }

.aio-gift-fly.float { animation: gift-float 3.2s ease-out forwards; }
.aio-gift-fly.pop   { animation: gift-pop 2.4s ease-out forwards; }
.aio-gift-fly.rise  { animation: gift-rise 3.6s ease-in forwards; }
.aio-gift-fly.shine { animation: gift-shine 4s ease-out forwards; }

@keyframes gift-float {
    0%   { opacity: 0; transform: translate(-50%, 30px); }
    12%  { opacity: 1; transform: translate(-50%, 0); }
    75%  { opacity: 1; transform: translate(-50%, -60px); }
    100% { opacity: 0; transform: translate(-50%, -120px); }
}
@keyframes gift-pop {
    0%   { opacity: 0; transform: translate(-50%, 0) scale(.4); }
    18%  { opacity: 1; transform: translate(-50%, 0) scale(1.25); }
    30%  { transform: translate(-50%, 0) scale(1); }
    85%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -30px) scale(1); }
}
@keyframes gift-rise {
    0%   { opacity: 0; bottom: 4%; transform: translate(-50%, 0) rotate(-4deg); }
    15%  { opacity: 1; }
    100% { opacity: 0; bottom: 92%; transform: translate(-50%, 0) rotate(4deg); }
}
@keyframes gift-shine {
    0%   { opacity: 0; transform: translate(-50%, 20px) scale(.7); }
    12%  { opacity: 1; transform: translate(-50%, 0) scale(1.1); box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
    45%  { box-shadow: 0 0 0 26px rgba(255, 255, 255, 0); }
    80%  { opacity: 1; transform: translate(-50%, -20px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -70px) scale(1); }
}

/* ------------------------------------------------- the supporter list */

.aio-gift-log { margin-top: 10px; }
.aio-gift-log .one {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--line);
    font-size: 13.5px;
}
.aio-gift-log .one img.pfp { width: 30px; height: 30px; border-radius: 50%; }
.aio-gift-log .one .what { flex: 1; min-width: 0; }
.aio-gift-log .one .cost { font-weight: 700; color: var(--brand); }