/* ============================================================
 * REFERRAL BANNER — WSPÓŁDZIELONY komponent step1 + step2.
 *
 * Wyciągnięty z inline <style> kadr_step1.html (2026-07) gdy step2 dostał
 * własny baner "Rabat X% z polecenia aktywny" nad kafelkami pakietów —
 * jeden komponent, jedna definicja (DRY, ten sam pattern co anim-picker.css
 * i reno-style-picker.css).
 *
 * Paleta: --kadr-referral-* z tokens.css (single source of truth).
 * Markup: .referral-info-banner > .banner-text > (.icon > img) + <span>.
 * Hidden by default (atrybut `hidden`) — unhide robi JS strony po
 * pozytywnej walidacji /api/referral/validate (false promise gorsze niż
 * brak banneru — brak optimistic show'u).
 *
 * Ikona "gift" — assets/icons/gift.svg ma hardcoded fill="#fcfcfc" white.
 * Na light amber tle white byłby niewidoczny, więc CSS mask zamienia ikonę
 * na sylwetkę z dark amber kolorem (--kadr-referral-text-strong — match
 * z tekstem). Standardowa technika single-color icon recoloring bez
 * modyfikacji SVG. UWAGA: url() względem TEGO pliku (css/) → ../assets/.
 * ============================================================ */

.referral-info-banner {
    background: var(--kadr-referral-card-bg);
    border: 1px solid var(--kadr-referral-card-border);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}
.referral-info-banner[hidden] {
    /* HTML5 boolean atrybut `hidden` jest semantically right, ale
       niektóre legacy stylesheety nadpisują display: flex — defensive. */
    display: none;
}
.referral-info-banner .banner-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--kadr-referral-text-strong);
    line-height: 1.4;
    text-align: left;
}
.referral-info-banner .banner-text strong {
    color: var(--kadr-referral-text-strong);
    font-weight: 700;
}
.referral-info-banner .banner-text .icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    /* SVG jako maska — pixele nieprzezroczyste maski biorą kolor
       `background-color`. Przebarwiamy ikonę z white (file default)
       na dark amber (--kadr-referral-text-strong). */
    -webkit-mask-image: url('../assets/icons/gift.svg');
    mask-image: url('../assets/icons/gift.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--kadr-referral-text-strong);
}
.referral-info-banner .banner-text .icon img {
    /* `<img>` w środku jest formalnie tagiem semantycznym (alt=""),
       ale faktyczna ikona idzie z mask-image na .icon. Schowaj img
       wizualnie żeby nie dublować. */
    display: none;
}

@media (min-width: 768px) {
    /* Same shape as cart banner, ale bez actions — padding'iem zostawiamy
       banner-text zaśrodkowany. Bez flex-direction: row (brak drugiej sekcji). */
    .referral-info-banner {
        padding: 16px 20px;
    }
}