/* Newsfeed giveaways: the giveaway attachment card (display + composer preview). Namespaced with .nfg- to
   avoid collisions; loaded globally via App.razor because scoped .razor.css does not load for Client (WASM)
   components in this app. Visual language matches newsfeed-polls (.nfp-): soft card, an eyebrow + status
   pill, and primary/ghost actions. All colour derives from --mud-palette tokens so light/dark both work. */

.nfg-card {
    position: relative;
    box-sizing: border-box;
    max-width: 480px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    overflow: hidden;
}

.nfg-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
}

/* Optional prize photo: a full-bleed banner at the top (the card's overflow:hidden clips it to the
   rounded corners). Negative margins reach the card edges through its 16px/18px padding. */
.nfg-image {
    margin: -16px -18px 14px;
}

.nfg-image img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.nfg-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}

/* ---- Header: GIVEAWAY eyebrow + status pill ---- */
.nfg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.nfg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
}

.nfg-eyebrow .mud-icon-root {
    font-size: 1rem;
}

.nfg-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent);
}

.nfg-status .mud-icon-root {
    font-size: 0.85rem;
}

.nfg-status--preview {
    color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
}

/* ---- Prize ---- */
.nfg-prize {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

/* ---- Meta row: eligibility chip + entry count ---- */
.nfg-metarow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.nfg-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.nfg-chip .mud-icon-root {
    font-size: 0.95rem;
}

.nfg-count {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* ---- Actions ---- */
.nfg-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.nfg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: filter .15s ease, background .15s ease;
}

.nfg-btn:disabled {
    cursor: default;
    opacity: 0.55;
}

.nfg-btn .mud-icon-root {
    font-size: 1.05rem;
}

.nfg-btn--primary {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.nfg-btn--primary:not(:disabled):hover {
    filter: brightness(1.06);
}

.nfg-btn--ghost {
    background: transparent;
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-lines-default);
}

.nfg-btn--ghost:not(:disabled):hover {
    background: var(--mud-palette-action-default-hover);
}

.nfg-entered {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-success);
}

.nfg-entered .mud-icon-root {
    font-size: 1.05rem;
}

/* ---- Winners ---- */
.nfg-youwon {
    margin-bottom: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 700;
    color: var(--mud-palette-primary-text);
    background: linear-gradient(to right, var(--mud-palette-primary), var(--mud-palette-secondary));
}

.nfg-winners-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
}

.nfg-winners {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.nfg-winner {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    color: var(--mud-palette-text-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.1);
}

.nfg-winner .mud-icon-root {
    font-size: 0.95rem;
    color: var(--mud-palette-warning);
}

.nfg-nowinners {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

/* ---- Rules + disclaimer ---- */
.nfg-rules {
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.nfg-rules > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    user-select: none;
}

.nfg-rules__body {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.nfg-disclaimer {
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--mud-palette-text-disabled);
}