/* ===========================
   PROMOTIONS / BONUS PAGE
   =========================== */

#bonus-wrapper {
    padding: 0 8px 30px;
}

/* Top banner */
#bonus-top-banner {
    margin: 0 -8px 5px;
}

#bonus-top-banner img {
    width: 100%;
    display: block;
}

/* Category section */
.bonus-section {
    margin-bottom: 5px;
}

/* Section header - matches EZ7 category bar */
.bonus-category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, #232853, #1c1c1c);
    padding: 7px 0 7px 10px;
    margin: 12px 0 8px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

/* Left gold accent bar */
.bonus-category-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--gradient-style-1);
}

/* Right gold angular chevron */
.bonus-category-header::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 45px;
    background: var(--gradient-style-1);
    clip-path: polygon(45% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.bonus-category-header .cat-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
    flex-shrink: 0;
    margin-left: 4px;
}

.bonus-category-header .cat-label {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    font-family: var(--font-secondary);
    letter-spacing: 0.5px;
    flex: 1;
    line-height: 1;
}

/* 2-column bonus card grid */
.bonus-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Individual bonus card — 3 per row */
.bonus-card {
    flex: 0 0 calc((100% - 12px) / 3);
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 110px;
}

.bonus-card .card-bg {
    width: 100%;
    display: block;
    border-radius: 8px;
}

/* A bonus with its own promo art takes the whole row: the banners are wide
   (700x267) and unreadable at a third of the grid. Cards falling back to the
   angpao frame (300x360, portrait) keep the 3-up size above. */
.bonus-card--banner {
    flex: 0 0 100%;
    min-height: 0;
}

/* Overlay for title + button */
.bonus-card .card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* The card art bakes its own CLAIM button into the bottom ~20% of the
       frame (shared/angpao, animated), so the overlay's last child — the
       amount pill — landed on top of the word CLAIM. Bottom padding of 26%
       (percentages resolve against the card's WIDTH; the art is ~1:1.2, so
       26% of width ≈ 21% of height) parks it just above the button. */
    padding: 16% 5px 26%;
    border-radius: 8px;
}

/* Art the admin uploaded carries its own title and amount, so the overlay would
   redraw both on top of it. Keyed off `--art`, NOT `--banner`: square art keeps
   its artwork but loses the full-row treatment (demoteSquareArt), and hiding the
   overlay has to follow the artwork, not the width. Must come after the rule
   above, which has the same specificity and would otherwise win on source order. */
.bonus-card--art .card-overlay {
    display: none;
}

.bonus-card .card-title {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
    word-break: break-word;
    hyphens: auto;
}

.bonus-card .btn-claim {
    background: var(--gradient-style-1);
    color: #1c2043;
    font-size: 10px;
    font-weight: 800;
    border: none;
    border-radius: 4px;
    padding: 4px 0;
    cursor: pointer;
    text-transform: uppercase;
    font-family: var(--font-secondary);
    box-shadow: 0 2px 5px rgba(0,0,0,0.6);
    width: 85%;
    flex-shrink: 0;
}

.bonus-card:active .btn-claim,
.bonus-card:hover .btn-claim {
    filter: brightness(1.1);
}

/* Locked / ineligible card */
.bonus-card--locked {
    opacity: 0.55;
    cursor: default;
}

.bonus-card--locked .btn-claim {
    background: #444;
    color: #999;
    cursor: default;
}

.bonus-card--locked:active .btn-claim,
.bonus-card--locked:hover .btn-claim {
    filter: none;
}

/* Bonus footer image */
#bonus-footer-img {
    margin-top: 15px;
}

#bonus-footer-img img {
    width: 100%;
    border-radius: 5px;
}

/* ===========================
   BONUS MODAL
   =========================== */
#bonus-modal .modal-content {
    max-width: 400px;
    /* static + margin:auto centers within the flex .modal and keeps the top
       reachable when content is taller than the viewport */
    position: static;
    transform: none;
    margin: auto;
    padding: 20px 5px;
}

#bonus-modal .modal-content .content {
    padding: 5px;
}

#bonus-modal .title {
    font-size: 20px;
    font-weight: 700;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.65));
    background-image: var(--gradient-style-1);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    margin: 0 15px 10px;
    text-align: center;
}

#bonus-modal ul,
#bonus-modal ol {
    margin-left: 22px;
    width: calc(100% - 22px);
}

#bonus-modal li,
#bonus-modal b,
#bonus-modal p,
#bonus-modal span {
    color: white;
    font-size: 13px;
}

#bonus-modal li {
    margin-bottom: 3px;
}

#bonus-action-wrapper {
    display: flex;
    gap: 10px;
    margin: 15px 15px 5px;
}

#btn-close-bonus {
    flex: 1;
    padding: 10px;
    background: #444;
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}

#claim_button {
    flex: 1;
}

@keyframes white-glow {
    0%   { filter: drop-shadow(0 0 5px rgba(255,255,255,0)); }
    50%  { filter: drop-shadow(0 0 5px rgb(255,255,255)); }
    100% { filter: drop-shadow(0 0 5px rgba(255,255,255,0)); }
}

/* C (Web网 21 Aug): promo art must not fill the screen — admin-uploaded media
   is often square (e.g. Social Free Tasks), which at full row width covered a
   whole phone screen. Cap the banner height and centre-crop to a wide strip. */
.bonus-card--banner .card-bg{
    max-height: 160px;
    object-fit: contain;   /* letterbox, never crop; square art is demoted to a
                              normal 3-up card in the view (demoteSquareArt) */
    object-position: center;
}

/* C (Web网 21 Aug): bonus value shown on the card */
.bonus-card .card-amount{
    font-size: 12px;
    font-weight: 800;
    color: #ffd257;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    background: rgba(0, 0, 0, 0.45);
    border-radius: 20px;
    padding: 2px 10px;
    margin-top: 4px;
}