/* kn-v10-rewards.css - Krunker Box Office: what the v10.0.2 page needs for the signup rewards, the
 * register rewards popup and the Gift Battlepass form (client/src/ui/v10_rewards.c,
 * battlepass_ui.c) that css/svelte.css cannot give the in-house engine.
 *
 * 1. The nested rules of _39408's component CSS (svelte-1v6b0qm: "& p {...}" inside
 *    .rewards-side-panel-title / -description), flattened.
 * 2. The global .io-popup / .io-button rules v10 injects at runtime (a <style> element of its
 *    Svelte runtime, not a file of the page; values as captured from the offline v10 sandbox).
 */
.rewards-side-panel-title.svelte-1v6b0qm p.svelte-1v6b0qm { color: #fff; font-size: 11px; }
.rewards-side-panel-description.svelte-1v6b0qm p.svelte-1v6b0qm { color: #fff; line-height: 22px; } /* the reference's line box */
.signupRewardsPop p { margin: 0; }

.io-popup-container { background-color: #242424; box-shadow: 0 0 8px rgba(0, 0, 0, 0.7); color: #fff; overflow: hidden; border-radius: 4px; }
.io-popup-container p { color: #fff; }
.io-popup-content { padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.io-popup-header { background-color: rgba(0, 0, 0, 0.7); padding: 10px; color: #fff; width: 100%; text-align: center; font-size: 30px;
    font-weight: 600; margin-bottom: 0; box-sizing: border-box; position: relative; letter-spacing: 0.5px; line-height: 1.8; }
.io-button { cursor: pointer; padding: 8px 15px; border-radius: 4px; background-color: #363636; color: #fff; text-align: center;
    font-weight: 600; font-size: 1.05em; line-height: 1.7; border: 2px solid #494949; font-family: inherit; }
.io-button:hover { background-color: #4a4a4a; }
.io-button--accept { background-color: #29c90d; border: 2px solid #36e017; color: #fff; }
.io-button--accept:hover { background-color: #31e610; }
.io-button-group { display: flex; gap: 15px; justify-content: center; width: 100%; margin: 10px 0; }

/* 3. css/main.css's nested battle pass rules ("span {...}" inside .bpLevelNum, .bpCardRarityLabel,
 *    .bpBtn, .bpSeasonTime, .bpLevelText, .bpClaimB), flattened for the engine */
.bpLevelNum span { color: #fff; padding-top: 8px; text-align: center; font-size: 16px; font-style: normal; font-weight: 400; line-height: 120%;
    letter-spacing: 0.8px; text-shadow: -1px -1px 0 #202020, 1px -1px 0 #202020, -1px 1px 0 #202020, 1px 1px 0 #202020,
    -2px -2px 0 #202020, 2px -2px 0 #202020, -2px 2px 0 #202020, 2px 2px 0 #202020; }
.bpCardRarityLabel span { padding-top: 4px; color: #fff; text-align: center; font-size: 12px; font-style: normal; font-weight: 400;
    line-height: 100%; letter-spacing: 0.3px; text-shadow: -1px -1px 0 #202020, 1px -1px 0 #202020, -1px 1px 0 #202020, 1px 1px 0 #202020,
    -1px -2px 0 #202020, 2px -2px 0 #202020, -2px 2px 0 #202020, 2px 2px 0 #202020; }
.bpBtn span { font-size: 14px; font-style: normal; font-weight: 400; line-height: 120%; letter-spacing: 0.7px; }
.bpSeasonTime span { font-size: 12px; font-style: normal; font-weight: 400; line-height: 120%; color: #A8A8A8 !important; text-align: center; }
.bpLevelText span { color: #fff; font-size: 22px; font-style: normal; font-weight: 400; line-height: 120%; letter-spacing: 1.1px; }
.bpClaimB span { padding-top: 2px; color: #fff; font-size: 12px; font-style: normal; font-weight: 400; letter-spacing: 0.6px; }

/* 4. the Gift Battlepass form (selectBPGift's _6696 form modal) in #genericPop, centred like v10's modals */
#genericPop.genericFormPop { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 520px; pointer-events: all; }
.genericFormPop .io-popup-content p { font-size: 16px; margin: 0; }
.genericFormPop .accountInput { width: calc(100% - 20px); margin: 0; }