.referral-alert {
  @apply fixed top-0 left-0 right-0 bg-primary text-on-primary p-4 z-50 text-center;
}
.referral-alert button {
  @apply ml-4 bg-transparent border-none font-bold cursor-pointer;
}
/* Referral alert bar styling with Automatic.css variables */
.referral-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    background-color: var(--accent);
    color: var(--base);
    font-size: var(--text-s);
    font-weight: var(--font-medium);

    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-s);

    box-shadow: var(--shadow-m);
    position: relative;
    z-index: 1000;
}

/* Text inside the banner */
.referral-alert span {
    flex: 1;
    line-height: var(--line-m);
}

/* Close button */
.referral-alert button {
    background: transparent;
    border: none;
    color: inherit;
    font-size: var(--text-m);
    cursor: pointer;
    line-height: 1;
    padding: 0 var(--space-2xs);
    transition: opacity var(--transition-s);
}

.referral-alert button:hover,
.referral-alert button:focus {
    opacity: 0.8;
}

/* Slide-in animation */
@keyframes referralSlideIn {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.referral-alert {
    animation: referralSlideIn var(--transition-m) ease-out;
}
[data-referral-hidden]{ display:none !important; }