/*
 * FlowGiveaways core styles.
 * Copyright (C) 2026 Flow Media Marketing. All rights reserved.
 * License: GNU General Public License version 2 or later
 *
 * Lane 0 scaffold: token surface + base layout only. The core ships
 * ZERO JavaScript (spec non-negotiable #2 - server authority) - see
 * media/js/.gitkeep.
 */

.fg-giveaway {
    --fg-accent: #2563eb;
    --fg-radius: 0.5rem;
    --fg-fg: #1f2933;
    --fg-bg: #ffffff;
    --fg-muted: #6b7280;

    color: var(--fg-fg);
    background-color: var(--fg-bg);
    border-radius: var(--fg-radius);
    box-sizing: border-box;
}

.fg-giveaway *,
.fg-giveaway *::before,
.fg-giveaway *::after {
    box-sizing: inherit;
}

.fg-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fg-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fg-field label {
    font-weight: 600;
}

.fg-field input,
.fg-field select,
.fg-field textarea {
    border-radius: var(--fg-radius);
    border: 1px solid var(--fg-muted);
    padding: 0.5rem;
}

.fg-button {
    display: inline-block;
    border: 0;
    border-radius: var(--fg-radius);
    background-color: var(--fg-accent);
    color: #ffffff;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.fg-button:hover,
.fg-button:focus {
    filter: brightness(0.92);
}

.fg-message {
    border-radius: var(--fg-radius);
    padding: 0.75rem 1rem;
    background-color: rgba(37, 99, 235, 0.08);
    color: var(--fg-fg);
}

.fg-rules {
    color: var(--fg-muted);
    font-size: 0.875rem;
}

.fg-header {
    margin-bottom: 0.75rem;
}

.fg-title {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    line-height: 1.25;
}

.fg-sponsor {
    margin: 0 0 0.5rem;
    color: var(--fg-muted);
    font-size: 0.8125rem;
}

.fg-description {
    margin-bottom: 0.75rem;
}

.fg-prize {
    margin-bottom: 0.75rem;
}

.fg-prize-text {
    margin: 0 0 0.25rem;
    font-weight: 600;
}

.fg-prize-arv {
    margin: 0;
    color: var(--fg-muted);
    font-size: 0.875rem;
}

.fg-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.fg-checkbox input {
    margin-top: 0.2rem;
}

/*
 * The honeypot wrapper: visually hidden, but never display:none / a
 * type="hidden" input - a genuine visitor's browser still lays this
 * out (a scripted bot that only checks computed visibility can be
 * fooled either way; this class deliberately uses the "clip" technique
 * so the field is technically present and focusable, matching how a
 * bona fide accessible visually-hidden utility class behaves).
 */
.fg-hp {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fg-winners {
    margin-top: 0.75rem;
}

.fg-winners-heading {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
}

.fg-winners-list {
    margin: 0;
    padding-left: 1.25rem;
}

.fg-privacy {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
}

.fg-winner-actions {
    display: flex;
    gap: 0.5rem;
}

.fg-button-secondary {
    background-color: transparent;
    border: 1px solid var(--fg-muted);
    color: var(--fg-fg);
}

/* Type disclosures: the facts a giveaway type publishes about its own
   mechanic (ticket counts, winning numbers). Quiet by default - they
   are reference, not the call to action. */
.fg-giveaway .fg-disclosures {
    list-style: none;
    margin: 0.75rem 0;
    padding: 0;
    font-size: 0.9375em;
}

.fg-giveaway .fg-disclosure {
    margin: 0.125rem 0;
}

.fg-giveaway .fg-disclosure-label {
    opacity: 0.75;
}

.fg-giveaway .fg-disclosure-value {
    font-weight: 600;
}

/* The entrant's own panel: their ticket numbers, and after a draw
   whether any of them came up. Set apart because it is the one part
   of the widget that is about THIS reader. */
.fg-giveaway .fg-entrant {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border: 1px solid currentColor;
    border-radius: var(--fg-radius, 6px);
    border-color: var(--fg-accent, currentColor);
}

.fg-giveaway .fg-entrant-heading {
    margin: 0 0 0.5rem;
    font-size: 1.0625em;
}

.fg-giveaway .fg-entrant-tickets,
.fg-giveaway .fg-entrant-winning,
.fg-giveaway .fg-entrant-result {
    margin: 0.25rem 0;
}

.fg-giveaway .fg-entrant-label {
    opacity: 0.75;
}

.fg-giveaway .fg-entrant-values {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Reveal presentations (D-W5).

   READ THIS BEFORE EDITING: the result text is NOT hidden here. It is
   hidden only under .fg-presentation-active, a class added by the
   script and never present in server markup. That ordering is the
   whole safety property - a reader without JavaScript, or with a
   script that failed to run, sees the result plainly. Moving the
   hiding rule out from under .fg-presentation-active would silently
   hide someone's win the first time the script errored. */
.fg-giveaway .fg-presentation {
    display: none;
}

.fg-giveaway .fg-presentation-active .fg-presentation,
.fg-giveaway.fg-presentation-active .fg-presentation {
    display: block;
    margin: 0.5rem 0;
}

.fg-giveaway .fg-outcome.fg-presentation-active .fg-outcome-result {
    display: none;
}

.fg-giveaway .fg-outcome.fg-presentation-active.fg-presentation-revealed .fg-outcome-result {
    display: block;
    animation: fg-outcome-in 320ms ease-out;
}

.fg-giveaway .fg-presentation-control {
    font: inherit;
    padding: 0.4rem 0.9rem;
    border-radius: var(--fg-radius, 6px);
    border: 1px solid var(--fg-accent, currentColor);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.fg-giveaway .fg-presentation-face {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 3px solid var(--fg-accent, currentColor);
}

.fg-giveaway .fg-presentation[data-fg-kind="reveal"] .fg-presentation-face,
.fg-giveaway .fg-presentation[data-fg-kind="scratch"] .fg-presentation-face {
    width: 160px;
    border-radius: var(--fg-radius, 6px);
}

.fg-giveaway .fg-presentation-running .fg-presentation-face {
    animation: fg-presentation-spin 1200ms ease-in-out;
}

@keyframes fg-presentation-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(1080deg); }
}

@keyframes fg-outcome-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* A reader who has asked their system for less motion is also handled
   in the script, which simply declines to enhance. This is the second
   layer, for a presentation activated some other way. */
@media (prefers-reduced-motion: reduce) {
    .fg-giveaway .fg-presentation-running .fg-presentation-face {
        animation: none;
    }

    .fg-giveaway .fg-outcome.fg-presentation-active.fg-presentation-revealed .fg-outcome-result {
        animation: none;
    }
}

/* The public giveaways list (0.6.0). */
.fg-giveaways-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fg-giveaways-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(127, 127, 127, 0.3);
}

.fg-giveaways-title {
    margin: 0 0 0.25rem;
    font-size: 1.25em;
}

.fg-giveaways-status {
    margin: 0 0 0.25rem;
    font-size: 0.9375em;
    opacity: 0.8;
}

.fg-giveaways-open {
    font-weight: 700;
    opacity: 1;
    color: var(--fg-accent, inherit);
}

.fg-giveaways-prize {
    margin: 0;
}

/* The facts strip: how long is left, how many have entered, how entering
   works. Quiet and horizontal - it frames the form rather than competing
   with it. */
.fg-giveaway .fg-facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0.75rem 0;
    padding: 0;
    font-size: 0.9375em;
}

.fg-giveaway .fg-fact {
    margin: 0;
    opacity: 0.85;
}

.fg-giveaway .fg-fact-closes {
    font-weight: 700;
    opacity: 1;
    color: var(--fg-accent, inherit);
}