/* Global background and festive theme */
body.bg-christmas {
    /* Deep winter sky: dark blue → mid blue (smooth, non-flag-like) */
    background: linear-gradient(
        180deg,
        /* midnight navy */
        #081a30 0%,
        /* deepen slightly to avoid a flat top */
        #0a2241 20%,
        /* rich blue */
        #0b2c59 50%,
        /* gentle transition toward a friendlier mid blue */
        #154a8e 75%,
        /* nice middle blue */
        #1e63b6 100%
    );
    min-height: 100vh;
}
/*!* font color of text *!*/
/*body {*/
/*    color: #ffffff;*/
/*}*/

.title {
    font-family: 'Fredericka the Great', cursive;
}

.text {
    font-family: 'Mountains of Christmas', cursive;
    text-align: center;
}

/* Hero */
.hero-title {
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 0 2px 0 rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.25);
    font-size: clamp(2rem, 3vw + 1rem, 3.25rem);
}

header {
    position: relative;
}

/* Snow layers */
.snow, .snow::before, .snow::after {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
}
.snow {
    /* Slightly denser, brighter flakes so they pop on dark blue */
    background-image:
        radial-gradient(3.5px 3.5px at 20px 30px, rgba(255,255,255,0.98) 50%, rgba(255,255,255,0) 52%),
        radial-gradient(5px 5px at 80px 120px, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 52%),
        radial-gradient(3px 3px at 200px 50px, rgba(255,255,255,0.96) 50%, rgba(255,255,255,0) 52%),
        radial-gradient(3.5px 3.5px at 150px 200px, rgba(255,255,255,0.98) 50%, rgba(255,255,255,0) 52%),
        radial-gradient(3px 3px at 260px 260px, rgba(255,255,255,0.96) 50%, rgba(255,255,255,0) 52%),
        radial-gradient(5px 5px at 40px 220px, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 52%);
    background-size: 180px 180px;
    animation: snow 16s linear infinite;
    opacity: .95;
}
.snow--2 { animation-duration: 26s; opacity: .8; }
.snow--3 { animation-duration: 36s; opacity: .65; }

@keyframes snow {
    from { background-position: 0 0, 0 0, 0 0; }
    to   { background-position: 0 300px, 0 300px, 0 300px; }
}

/* Reworked form headings: remove speech bubbles in favor of clean labels */
.speech,
.speech2 {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    text-align: left;
    margin-bottom: .25rem;
}
.speech p,
.speech2 p,
.speech label,
.speech2 label {
    margin: 0;
    color: #0a3622; /* deep evergreen for labels */
    font-weight: 700;
    letter-spacing: .3px;
    /* Increase size for better prominence, responsive across devices */
    font-size: clamp(1.125rem, 1.25vw + 0.75rem, 1.75rem);
}

/* Card and content styling */
.card-christmas {
    background: rgba(255,255,255,0.96);
    border-radius: 1rem;
    border: 1px solid rgba(0,0,0,0.06);
    position: relative; /* so it can layer above Santa */
    z-index: 2;
}

/* Festive blinking "Christmas lights" border around the form card */
.card-christmas::before,
.card-christmas::after,
.wish-card::before,
.wish-card::after,
.panel::before,
.panel::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: calc(1rem + 12px); /* follow card rounding while sitting outside */
    z-index: 3; /* render above the card background but non-interactive */
}

/* Top & bottom strands */
.card-christmas::before,
.wish-card::before,
.panel::before {
    /* sit slightly outside the card so it reads like a border */
    inset: -14px -16px; /* top/bottom, left/right */
    /* Build per-bulb multicolor rows using color stripes clipped by circular masks */
    /* Two color layers (top & bottom) + two wire layers */
    background:
        /* top color stripes (horizontal) */
        repeating-linear-gradient(to right,
            #ff4d4d 0 24px,   /* red */
            #ffd60a 24px 48px,/* yellow */
            #34d399 48px 72px,/* green */
            #60a5fa 72px 96px,/* blue */
            #f472b6 96px 120px,/* pink */
            #22d3ee 120px 144px /* cyan */
        ),
        /* bottom color stripes (horizontal) */
        repeating-linear-gradient(to right,
            #ff4d4d 0 24px,
            #ffd60a 24px 48px,
            #34d399 48px 72px,
            #60a5fa 72px 96px,
            #f472b6 96px 120px,
            #22d3ee 120px 144px
        ),
        /* subtle wire lines */
        linear-gradient(#0f2a1f, #0f2a1f) top center / 100% 2px no-repeat,
        linear-gradient(#0f2a1f, #0f2a1f) bottom center / 100% 2px no-repeat;

    /* Mask the two color layers into circular bulbs on top and bottom rows */
    -webkit-mask:
        radial-gradient(closest-side, #000 72%, transparent 74%) top center / 24px 20px repeat-x,
        radial-gradient(closest-side, #000 72%, transparent 74%) bottom center / 24px 20px repeat-x,
        none,
        none;
    mask:
        radial-gradient(closest-side, #000 72%, transparent 74%) top center / 24px 20px repeat-x,
        radial-gradient(closest-side, #000 72%, transparent 74%) bottom center / 24px 20px repeat-x,
        none,
        none;

    /* Soft twinkle animation only (no uniform hue-rotate) */
    animation: twinkle 2.6s ease-in-out infinite alternate;
}

/* Left & right strands */
.card-christmas::after,
.wish-card::after,
.panel::after {
    inset: -16px -14px;
    /* Two color layers (left & right) + two wire layers */
    background:
        /* left color stripes (vertical) */
        repeating-linear-gradient(to bottom,
            #ff4d4d 0 24px,
            #ffd60a 24px 48px,
            #34d399 48px 72px,
            #60a5fa 72px 96px,
            #f472b6 96px 120px,
            #22d3ee 120px 144px
        ),
        /* right color stripes (vertical) */
        repeating-linear-gradient(to bottom,
            #ff4d4d 0 24px,
            #ffd60a 24px 48px,
            #34d399 48px 72px,
            #60a5fa 72px 96px,
            #f472b6 96px 120px,
            #22d3ee 120px 144px
        ),
        /* wire lines */
        linear-gradient(#0f2a1f, #0f2a1f) left center / 2px 100% no-repeat,
        linear-gradient(#0f2a1f, #0f2a1f) right center / 2px 100% no-repeat;

    /* Mask the two color layers into circular bulbs on left and right columns */
    -webkit-mask:
        radial-gradient(closest-side, #000 72%, transparent 74%) left center / 20px 24px repeat-y,
        radial-gradient(closest-side, #000 72%, transparent 74%) right center / 20px 24px repeat-y,
        none,
        none;
    mask:
        radial-gradient(closest-side, #000 72%, transparent 74%) left center / 20px 24px repeat-y,
        radial-gradient(closest-side, #000 72%, transparent 74%) right center / 20px 24px repeat-y,
        none,
        none;

    /* Soft twinkle animation only */
    animation: twinkle 3.2s ease-in-out infinite alternate;
}

/* Removed global side-wide hue rotations so each bulb can have its own color */

/* Gentle blinking (twinkling) without being distracting */
@keyframes twinkle {
    0%   { opacity: .4; }
    50%  { opacity: 1; }
    100% { opacity: .4; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .card-christmas::before,
    .card-christmas::after,
    .wish-card::before,
    .wish-card::after,
    .panel::before,
    .panel::after {
        animation: none;
        filter: none;
    }
}

/* Tone down the left accent panel */
.bg-card-accent {
    background: transparent;
    color: inherit;
}

.santa-emoji {
    font-size: clamp(3rem, 8vw, 5.5rem);
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.2));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(4rem, 12vw, 6.25rem);
    height: clamp(4rem, 12vw, 6.25rem);
    background: #ffffff;
    border-radius: 50%;
    border: 3px solid rgba(12, 111, 60, 0.2);
}

/* Santa peeking image styling */
.santa-peek {
    position: relative;
    width: 200px;
    /* Taller to avoid cropping Santa's hat and allow a higher peek */
    height: 200px;
    /* Position Santa so he peeks over the white form card */
    margin: 0.5rem auto -2.25rem; /* allow the card to overlap Santa */
    overflow: visible; /* let the form card create the peek effect */
    z-index: 10; /* sit behind the card so it looks like peeking */
}
.santa-peek img {
    position: absolute;
    left: 50%;
    /* Show more of the hat, hide just a touch of the lower part */
    bottom: -19%; /* move down so he peeks over the card */
    transform: translateX(-50%);
    width: 112%;
    height: auto;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,0.25));
    /* No animation per request */
}

/* Removed snowy ledge effect per request */

@keyframes peek-bob {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -6px); }
}

.cta-btn {
    box-shadow: 0 0.5rem 1.25rem rgba(16, 101, 48, 0.28);
}
.cta-btn.btn-success {
    background-color: #c41e3a;
    border-color: #b01b34;
}
.cta-btn.btn-success:hover,
.cta-btn.btn-success:focus {
    background-color: #a61a30;
    border-color: #8f172a;
}

.result-text {
    color: #ffffff;
    font-size: clamp(1.25rem, 2vw + 1rem, 2rem);
}

/* Make the result block pop only when it has content */
.result-text:not(:empty) {
    display: inline-block;
    margin: 0 auto; /* center within the column */
    padding: 0.85rem 1.25rem;
    border-radius: 1rem;
    /* frosted glass over the dark blue sky */
    background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.22);
    /* soft festive glow so it stands out */
    box-shadow:
        0 6px 22px rgba(0,0,0,0.28), /* depth */
        0 0 0 3px rgba(255,255,255,0.06) inset,
        0 0 24px 6px rgba(255, 236, 153, 0.22); /* warm twinkle */
    text-shadow: 0 2px 6px rgba(0,0,0,0.35);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    animation: result-pop .35s ease-out both;
}

.result-text:not(:empty):hover {
    transform: translateY(-1px);
    box-shadow:
        0 10px 26px rgba(0,0,0,0.3),
        0 0 0 3px rgba(255,255,255,0.07) inset,
        0 0 28px 8px rgba(255, 236, 153, 0.28);
}

@keyframes result-pop {
    0%   { opacity: 0; transform: translateY(6px) scale(0.98); }
    60%  { opacity: 1; transform: translateY(0)   scale(1.01); }
    100% { opacity: 1; transform: translateY(0)   scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .result-text:not(:empty) {
        animation: none;
        transition: none;
    }
}

/* Input polish */
.card-christmas .form-control {
    border-radius: .75rem;
    border-color: rgba(12,111,60,0.35);
}
.card-christmas .form-control:focus {
    border-color: #0f8a47;
    box-shadow: 0 0 0 .25rem rgba(15, 138, 71, 0.25);
}

/* Footer readability enhancements */
footer.text-muted {
    /* Override Bootstrap's muted gray on dark gradient */
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Create a subtle frosted pill behind the message for consistent contrast */
footer.text-muted .container > span {
    display: inline-block;
    padding: .5rem .9rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.95) !important;
    background: rgba(255, 255, 255, 0.08);
    /* Removed border and drop shadow per feedback to reduce visual prominence */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
/* ---------- Shared site chrome (nav, panels, wishlists) ---------- */

.site-nav {
    position: relative;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    padding: .9rem 1rem 0;
}
.site-nav a {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    font-weight: 600;
    padding: .4rem .95rem;
    border-radius: 999px;
    border: 1px solid transparent;
}
.site-nav a:hover,
.site-nav a:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
.site-nav a[aria-current="page"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
}

main {
    position: relative;
    z-index: 2;
}

.status-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.15rem;
}

.cta-outline {
    color: #0a3622;
    font-weight: 600;
    border-radius: 999px;
    padding-inline: 1.5rem;
}

/* White content panels (forms, settings) */
.panel {
    /* Christmas-light border, same as the home page card (see .card-christmas::before/::after) */
    position: relative;
    overflow: hidden;
    display: block;
    background: rgba(255, 255, 255, 0.96);
    color: #1f2937;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.25);
}
.panel__title {
    font-family: 'Mountains of Christmas', cursive;
    font-weight: 700;
    color: #0a3622;
    font-size: 1.6rem;
    margin-bottom: .5rem;
    cursor: default;
}
summary.panel__title {
    cursor: pointer;
    margin-bottom: 0;
}
.panel .form-label {
    font-weight: 600;
    color: #0a3622;
    margin-bottom: .25rem;
}
.panel .form-control,
.panel .form-select {
    border-radius: .75rem;
    border-color: rgba(12, 111, 60, 0.35);
}
.panel .form-control:focus,
.panel .form-select:focus,
.wish-card .form-control:focus {
    border-color: #0f8a47;
    box-shadow: 0 0 0 .25rem rgba(15, 138, 71, 0.25);
}
.hint {
    color: #4b5563;
    font-size: .9rem;
}
.form-error {
    color: #b01b34;
    font-weight: 600;
    min-height: 0;
}
.form-error:empty {
    display: none;
}

/* Sign in / sign up tabs */
.tabs {
    display: flex;
    gap: .25rem;
    padding: .25rem;
    margin-bottom: 1.25rem;
    background: #eef3ef;
    border-radius: 999px;
}
.tabs button {
    flex: 1;
    border: 0;
    background: transparent;
    padding: .55rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    color: #374151;
}
.tabs button[aria-selected="true"] {
    background: #fff;
    color: #0a3622;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.hello {
    font-family: 'Mountains of Christmas', cursive;
    font-weight: 700;
    font-size: clamp(1.6rem, 2vw + 1rem, 2.25rem);
}

/* Wishlist cards */
.wish-card {
    background: rgba(255, 255, 255, 0.96);
    color: #1f2937;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.25);
    /* Christmas-light border, same as the home page card */
    position: relative;
    overflow: hidden;
}
.wish-card__title {
    font-family: 'Mountains of Christmas', cursive;
    font-weight: 700;
    color: #0a3622;
    font-size: 1.75rem;
    margin-bottom: .75rem;
}
.wish-person + .wish-person {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(10, 54, 34, 0.2);
}
.wish-person__name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #b01b34;
    margin-bottom: .35rem;
}
.wish-list {
    margin: 0;
    padding-left: 1.25rem;
}
.wish-list li {
    padding: .2rem 0;
}
.wish-list li::marker {
    content: '🎁  ';
    font-size: .9em;
}
.wish-list a {
    color: #0f6b3a;
    font-weight: 600;
}
.wish-list a::after {
    content: ' ↗';
    font-size: .85em;
}
.wish-empty {
    color: #6b7280;
    font-style: italic;
    margin-bottom: 0;
}

/* Editable list on the account page */
.wish-list--edit li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.wish-list--edit li:has(.wish-edit) {
    display: list-item;
}
.wish-text {
    flex: 1 1 12rem;
    overflow-wrap: anywhere;
}
.wish-actions {
    display: flex;
    gap: .35rem;
}
.wish-add {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}
.wish-add__fields {
    flex: 1 1 16rem;
    display: grid;
    gap: .5rem;
}
.wish-add .btn {
    align-self: flex-start;
}
.wish-add .form-error {
    flex-basis: 100%;
}

/* Home page: who you are gifting */
.giftee-name {
    display: inline-block;
    font-size: clamp(3rem, 8vw, 4.5rem);
    line-height: 1.1;
}
.giftee-note {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.05rem;
    margin: .75rem 0 .25rem;
}
.result-text .wish-list {
    display: inline-block;
    text-align: left;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.1rem;
}
.result-text .wish-list a {
    color: #ffe9a8;
}

/* Share links on the account page */
.share-box {
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px dashed rgba(10, 54, 34, 0.2);
}
.share-box .form-control[readonly] {
    background: #f6f8f7;
    font-size: .85rem;
}

/* Organizer draw panel */
.organizer-badge {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: .8rem;
    font-weight: 600;
    vertical-align: middle;
    background: #c41e3a;
}
.codes-table {
    max-width: 28rem;
}
.codes-table code {
    color: #0a3622;
    font-size: .95rem;
}
.year-input {
    max-width: 9rem;
}
.participants {
    display: grid;
    gap: .5rem;
}
.participants__household {
    padding: .5rem .75rem;
    border-radius: .75rem;
    background: #f3f6f4;
}
.participants__title {
    font-weight: 700;
    color: #0a3622;
    font-size: .9rem;
    margin-bottom: .15rem;
}

/* Home page signed-in view */
.signup-nudge {
    font-weight: 600;
}
.signup-nudge a {
    color: #b01b34;
}
.household-reveal {
    padding-top: 1rem;
    border-top: 1px dashed rgba(10, 54, 34, 0.2);
}

/* Admin page */
.admin-people {
    list-style: none;
    margin: 0;
    padding: 0;
}
.admin-person {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.admin-person:last-child {
    border-bottom: 0;
}
.admin-person--editing {
    display: block;
}
.admin-person__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}
.admin-person__name {
    font-weight: 700;
    margin-right: .25rem;
}
.admin-person__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.admin-badge {
    font-weight: 600;
    font-size: .72rem;
}
.admin-badge--adult { background: #0f6b3a; }
.admin-badge--kid { background: #1e63b6; }
.admin-badge--account { background: #6b7280; }
.admin-badge--muted { background: transparent; color: #6b7280; border: 1px solid #d1d5db; }
.admin-badge--draw { background: #b45309; }
.admin-badge--organizer { background: #c41e3a; }
.admin-add {
    padding-top: 1rem;
    border-top: 1px dashed rgba(10, 54, 34, 0.2);
}
.pairs-year {
    width: auto;
}
.pairs-table {
    max-width: 36rem;
}
/* Family-group cards sit inside a lit panel, so they stay plain */
.admin-group {
    background: #f6f8f7;
    border: 1px solid rgba(10, 54, 34, 0.12);
    border-radius: .85rem;
    padding: .85rem 1rem;
}
.admin-group__title {
    font-family: 'Mountains of Christmas', cursive;
    font-weight: 700;
    color: #0a3622;
    font-size: 1.4rem;
    margin-bottom: .25rem;
}
.family-code {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: .35rem;
    font-size: .9rem;
}
.family-code__label {
    color: #4b5563;
}
.family-code__value {
    color: #0a3622;
    background: #fff;
    border: 1px dashed rgba(10, 54, 34, 0.35);
    border-radius: .4rem;
    padding: .1rem .45rem;
    font-size: .95rem;
}

/* Bootstrap's .d-flex etc. use !important, which would beat the hidden attribute */
[hidden] {
    display: none !important;
}

/* In-page confirm/alert dialogs (common.js confirmDialog) */
.santa-dialog {
    border: 0;
    border-radius: 1rem;
    padding: 1.5rem;
    max-width: min(28rem, calc(100vw - 2rem));
    color: #1f2937;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.35);
}
.santa-dialog::backdrop {
    background: rgba(8, 26, 48, 0.6);
}
.santa-dialog__message {
    margin-bottom: 1.25rem;
    white-space: pre-line;
}
.santa-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}