/* ==========================================================================
   Employee PERK "EP" Pass Selection — Mt. Rose Ski Tahoe
   ========================================================================== */

:root {
    --ep-navy:      #0f1d35;
    --ep-blue:      #1c3a6e;
    --ep-sky:       #7cb6e8;
    --ep-sky-2:     #cfe6f7;
    --ep-snow:      #f7fbff;
    --ep-red:       #c8102e;
    --ep-gold:      #ffc72c;
    --ep-ink:       #1d2733;
    --ep-muted:     #37465a;
    --ep-line:      #dbe4ee;
    --ep-ok:        #17795e;

    /* Scrim strength over the background photo. The illustration is busy, so
       the page needs a veil to keep form text and the white cards readable.
       Turn these DOWN to show more of the artwork, UP for more contrast. */
    --ep-scrim-top:    0.52;
    --ep-scrim-bottom: 0.70;

    /* Card translucency — you should be able to make out the artwork through
       the cards. Two things fight that, so keep both low:
         alpha  - at 0.90 only a tenth of the backdrop shows: looks opaque
         blur   - heavy blur erases the picture even at low alpha, leaving a
                  frosted smear rather than something you can see through
       --ep-muted was also darkened for this: the old grey measured ~2.5:1
       against a translucent card, well under the 4.5:1 minimum.
       Inputs and the signature pad stay fully opaque on purpose. */
    --ep-card-alpha:   0.66;
    --ep-panel-alpha:  0.45;
    --ep-card-blur:    3px;
}

/* The fallback colour lives on html so the fixed background layer below
   (z-index -1) paints above it and beneath all page content. */
html {
    background: var(--ep-navy);
}

body {
    background: transparent;
    color: var(--ep-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* room for the fixed slope at the bottom of the viewport */
    padding-bottom: 90px;
}

/* ==========================================================================
   BACKGROUND PHOTO
   Illustrated collage of Mt. Rose departments. A fixed layer rather than
   background-attachment:fixed on body, which iOS Safari refuses to honour.
   ========================================================================== */

.ep-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url("/pass/assets/img/mtrose-departments.jpg");
    background-size: cover;
    background-position: center 18%;
    background-repeat: no-repeat;
    /* source is 1024x1024, so soften the upscale on wide monitors */
    filter: saturate(0.92);
    pointer-events: none;
}

.ep-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(15, 29, 53, var(--ep-scrim-top))    0%,
        rgba(20, 40, 72, 0.70)                   45%,
        rgba(15, 29, 53, var(--ep-scrim-bottom)) 100%
    );
}

/* Very wide viewports crop the square source hard; nudge the framing so the
   ridgeline stays visible behind the header. */
@media (min-aspect-ratio: 2/1) {
    .ep-bg { background-position: center 10%; }
}

/* ==========================================================================
   HERO  — sky, parallax ridgelines, sun
   ========================================================================== */

.ep-hero {
    position: relative;
    overflow: hidden;
    /* Translucent so the photo's ridgeline reads through the header. The dark
       top band keeps the headline legible whatever is behind it. */
    background: linear-gradient(
        180deg,
        rgba(15, 29, 53, 0.78) 0%,
        rgba(28, 58, 110, 0.55) 45%,
        rgba(124, 182, 232, 0.30) 78%,
        rgba(207, 230, 247, 0.18) 100%
    );
    color: #fff;
    padding: 2.25rem 1rem 5.5rem;
    text-align: center;
    isolation: isolate;
}

/* Official Mt. Rose lockup, reversed to white for the dark header. Source is
   200x60, so it's rendered below native width to stay sharp. */
.ep-logo {
    display: inline-block;
    width: auto;
    height: clamp(34px, 5vw, 46px);
    max-width: 78vw;
    filter: drop-shadow(0 2px 6px rgba(15, 29, 53, 0.55));
}

.ep-hero h1 {
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    font-size: clamp(1.5rem, 4.2vw, 2.4rem);
    text-shadow: 0 2px 12px rgba(15, 29, 53, 0.35);
}

.ep-hero .ep-sub {
    font-size: clamp(0.95rem, 2.2vw, 1.1rem);
    opacity: 0.95;
    margin-top: 0.4rem;
}

.ep-season-chip {
    display: inline-block;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(3px);
    border-radius: 999px;
    padding: 0.3rem 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-top: 0.85rem;
    font-size: 0.9rem;
}

/* sun */
.ep-sun {
    position: absolute;
    top: 18px;
    right: 8%;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff8dc 35%, var(--ep-gold) 70%, rgba(255,199,44,0) 72%);
    box-shadow: 0 0 42px 14px rgba(255, 199, 44, 0.45);
    animation: ep-sun-pulse 6s ease-in-out infinite;
    z-index: 0;
}

@keyframes ep-sun-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.92; }
    50%      { transform: scale(1.08); opacity: 1; }
}

/* layered ridgelines */
.ep-ridge {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 0;
    pointer-events: none;
}
/* Softened now that the photo supplies its own ridgeline — these read as a
   snow silhouette easing the header into the content instead of competing. */
.ep-ridge.back  { opacity: 0.20; transform: translateY(6px); }
.ep-ridge.mid   { opacity: 0.34; transform: translateY(3px); }

/* ==========================================================================
   FALLING SNOW
   ========================================================================== */

.ep-snowfall {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.ep-flake {
    position: absolute;
    top: -12px;
    color: #fff;
    opacity: 0;
    text-shadow: 0 0 4px rgba(124, 182, 232, 0.9);
    animation-name: ep-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform, opacity;
}

@keyframes ep-fall {
    0%   { transform: translate3d(0, -5vh, 0) rotate(0deg);      opacity: 0; }
    10%  {                                                        opacity: 0.9; }
    90%  {                                                        opacity: 0.7; }
    100% { transform: translate3d(var(--ep-drift, 30px), 106vh, 0) rotate(360deg); opacity: 0; }
}

/* ==========================================================================
   THE SLOPE  — skier + snowboarder glide across the bottom of the viewport
   ========================================================================== */

.ep-slope {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 78px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(247,251,255,0) 0%, #ffffff 42%, #eef6fd 100%);
    border-top: 2px solid #fff;
}

.ep-slope::before {
    /* the snow surface line */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    height: 3px;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(28, 58, 110, 0.12);
}

.ep-rider {
    position: absolute;
    bottom: 26px;
    left: -140px;
    width: 92px;
    will-change: transform;
}

.ep-rider.skier {
    animation: ep-glide 14s linear infinite;
}

.ep-rider.boarder {
    animation: ep-glide 18s linear infinite;
    animation-delay: 6.5s;
    width: 86px;
}

@keyframes ep-glide {
    0%   { transform: translateX(0)               translateY(0)    rotate(-2deg); }
    22%  { transform: translateX(26vw)            translateY(-7px) rotate(2deg); }
    46%  { transform: translateX(52vw)            translateY(0)    rotate(-3deg); }
    72%  { transform: translateX(78vw)            translateY(-5px) rotate(1deg); }
    100% { transform: translateX(calc(100vw + 200px)) translateY(0) rotate(-2deg); }
}

/* powder spray trailing the riders */
.ep-puff {
    position: absolute;
    bottom: 22px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    opacity: 0;
    animation: ep-puff 14s linear infinite;
}
.ep-puff.p2 { animation-duration: 18s; animation-delay: 6.5s; }

@keyframes ep-puff {
    0%   { transform: translateX(-20px) scale(0.4); opacity: 0; }
    8%   { opacity: 0.75; }
    50%  { transform: translateX(50vw) scale(1.5);  opacity: 0.35; }
    100% { transform: translateX(calc(100vw + 120px)) scale(2.1); opacity: 0; }
}

/* ==========================================================================
   CARDS / FORM
   ========================================================================== */

.ep-wrap {
    position: relative;
    z-index: 3;
    max-width: 900px;
    margin: -3.75rem auto 2rem;
    padding: 0 1rem;
}

.ep-card {
    background: rgba(255, 255, 255, var(--ep-card-alpha));
    -webkit-backdrop-filter: blur(var(--ep-card-blur)) saturate(1.05);
    backdrop-filter: blur(var(--ep-card-blur)) saturate(1.05);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(15, 29, 53, 0.28);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.ep-card-header {
    background: linear-gradient(90deg, rgba(15, 29, 53, 0.86), rgba(28, 58, 110, 0.78));
    color: #fff;
    font-weight: 700;
    padding: 0.75rem 1.1rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.ep-card-header .ep-step {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex: 0 0 auto;
}

.ep-card-body { padding: 1.15rem; }

.ep-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ep-navy);
    margin-bottom: 0.3rem;
}

.ep-hint {
    font-size: 0.82rem;
    color: var(--ep-muted);
}

.form-control:focus, .form-select:focus {
    border-color: var(--ep-sky);
    box-shadow: 0 0 0 0.2rem rgba(124, 182, 232, 0.3);
}

/* identity summary strip */
.ep-idcard {
    background: linear-gradient(135deg, rgba(234, 244, 253, 0.52), rgba(247, 251, 255, 0.44));
    border: 1px solid rgba(207, 227, 246, 0.9);
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.ep-idcard .k {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ep-muted);
    font-weight: 700;
}
.ep-idcard .v {
    font-weight: 700;
    color: var(--ep-navy);
}

/* ==========================================================================
   PERK CHOICE  — two big selectable tiles with an OR between them
   ========================================================================== */

.ep-choice-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.85rem;
    align-items: stretch;
}

@media (max-width: 700px) {
    .ep-choice-grid { grid-template-columns: 1fr; }
}

.ep-or {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-style: italic;
    color: var(--ep-muted);
    font-size: 1.1rem;
}

.ep-choice {
    position: relative;
    display: block;
    border: 2px solid var(--ep-line);
    border-radius: 12px;
    padding: 1rem 1rem 1rem 2.85rem;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s, background 0.15s;
    background: rgba(255, 255, 255, var(--ep-panel-alpha));
    height: 100%;
}

.ep-choice:hover {
    border-color: var(--ep-sky);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(28, 58, 110, 0.1);
}

.ep-choice input[type="radio"] {
    position: absolute;
    top: 1.15rem;
    left: 1rem;
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
}

.ep-choice .t {
    font-weight: 800;
    color: var(--ep-navy);
    font-size: 1.05rem;
}

.ep-choice .d {
    font-size: 0.85rem;
    color: var(--ep-muted);
    margin-top: 0.2rem;
}

.ep-choice.selected {
    border-color: var(--ep-blue);
    background: rgba(242, 248, 254, 0.82);
    box-shadow: 0 8px 20px rgba(28, 58, 110, 0.14);
}

.ep-choice .ep-choice-icon {
    font-size: 1.5rem;
    color: var(--ep-blue);
}

/* conditional panel */
.ep-conditional {
    border-left: 3px solid var(--ep-sky);
    background: rgba(246, 251, 255, 0.50);
    border-radius: 0 10px 10px 0;
    padding: 1rem;
    margin-top: 0.9rem;
}

/* ==========================================================================
   DEPENDENTS
   ========================================================================== */

.ep-dep-row {
    border: 1px solid var(--ep-line);
    border-radius: 10px;
    padding: 0.9rem;
    margin-bottom: 0.75rem;
    background: rgba(252, 254, 255, 0.50);
    position: relative;
}

.ep-dep-row .ep-dep-num {
    position: absolute;
    top: -9px;
    left: 12px;
    background: var(--ep-blue);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.08rem 0.6rem;
}

.ep-age-badge {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #e8f5f0;
    color: var(--ep-ok);
    white-space: nowrap;
}
.ep-age-badge.bad { background: #fdeaec; color: var(--ep-red); }

.ep-empty-deps {
    text-align: center;
    color: var(--ep-muted);
    font-size: 0.9rem;
    padding: 1rem;
    border: 1px dashed var(--ep-line);
    border-radius: 10px;
    background: rgba(251, 253, 255, 0.32);
}

/* ==========================================================================
   SIGNATURE
   ========================================================================== */

.ep-sig-wrap {
    position: relative;
    border: 2px dashed #b9cfe6;
    border-radius: 10px;
    background: #fff;
    height: 170px;
    touch-action: none;   /* let the canvas own touch events */
    overflow: hidden;
}

.ep-sig-wrap.signed { border-style: solid; border-color: var(--ep-ok); }
.ep-sig-wrap.invalid { border-color: var(--ep-red); }

.ep-sig-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

.ep-sig-baseline {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 38px;
    border-bottom: 1px solid #cdd9e6;
    pointer-events: none;
}

.ep-sig-x {
    position: absolute;
    left: 18px;
    bottom: 40px;
    color: var(--ep-muted);
    font-weight: 700;
    pointer-events: none;
    font-size: 1.1rem;
}

.ep-sig-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9db3c9;
    font-size: 0.9rem;
    pointer-events: none;
}
.ep-sig-wrap.has-ink .ep-sig-placeholder { display: none; }

/* ==========================================================================
   GUIDELINES (back of the paper form)
   ========================================================================== */

.ep-guidelines {
    font-size: 0.86rem;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--ep-line);
    border-radius: 10px;
    padding: 1rem;
    background: rgba(252, 253, 255, 0.58);
}
.ep-guidelines h6 {
    font-weight: 800;
    color: var(--ep-navy);
    margin-top: 0.9rem;
}
.ep-guidelines h6:first-child { margin-top: 0; }
.ep-guidelines dt { color: var(--ep-navy); font-weight: 800; }
.ep-guidelines dd { margin-bottom: 0.6rem; color: #34455a; }

/* ==========================================================================
   VALIDATION / ALERTS
   ========================================================================== */

.ep-errors { border-left: 4px solid var(--ep-red); }

.ep-required::after {
    content: " *";
    color: var(--ep-red);
    font-weight: 700;
}

.btn-ep {
    background: linear-gradient(135deg, var(--ep-blue), var(--ep-navy));
    color: #fff;
    font-weight: 700;
    border: none;
    padding: 0.7rem 1.6rem;
    border-radius: 10px;
    transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}
.btn-ep:hover:not(:disabled) {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15, 29, 53, 0.28);
    filter: brightness(1.08);
}
/* Reading as disabled shouldn't mean being unreadable — dimming the gradient
   with opacity washed the label out, so use a flat muted fill instead. */
.btn-ep:disabled,
.btn-ep:disabled:hover {
    opacity: 1;
    background: rgba(70, 86, 107, 0.62);
    color: rgba(255, 255, 255, 0.78);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    filter: none;
}

/* success screen */
.ep-success-icon {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: linear-gradient(135deg, #17795e, #2bb08a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    margin: 0 auto 1rem;
    box-shadow: 0 10px 26px rgba(23, 121, 94, 0.35);
    animation: ep-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ep-pop {
    0%   { transform: scale(0.4); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

/* "Visit HR to collect" call-out on the confirmation page. This is the one
   action the employee still has to take, so it gets real visual weight. */
.ep-collect {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(23, 121, 94, 0.14), rgba(43, 176, 138, 0.10));
    border: 1px solid rgba(23, 121, 94, 0.35);
    border-left: 5px solid var(--ep-ok);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}

.ep-collect-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ep-ok);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.ep-collect-title {
    font-weight: 800;
    color: #0e5c47;
    font-size: 1.05rem;
    line-height: 1.25;
}

.ep-collect-sub {
    font-size: 0.9rem;
    color: var(--ep-ink);
    margin-top: 0.15rem;
}

.ep-collect-list {
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 0;
    padding-left: 1.15rem;
}

.ep-collect-list li + li { margin-top: 0.35rem; }

.ep-receipt-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--ep-line);
    font-size: 0.92rem;
}
.ep-receipt-row:last-child { border-bottom: none; }
.ep-receipt-row .k { color: var(--ep-muted); }
.ep-receipt-row .v { font-weight: 700; color: var(--ep-navy); text-align: right; }

/* ==========================================================================
   OUT-OF-CARD TEXT
   The page background is now a dark photo, so anything not sitting on a white
   card has to be light. Bootstrap's .text-muted is a dark grey and would
   otherwise disappear against it.
   ========================================================================== */

.ep-page-footer {
    position: relative;
    z-index: 3;
}

/* A text-shadow alone wasn't enough — the footer can land over any part of the
   collage, including the pale snow panels. Give it its own backdrop so it
   reads regardless of what's behind it. */
.ep-page-footer > small {
    display: inline-block;
    background: rgba(15, 29, 53, 0.58);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    line-height: 1.4;
}

.ep-page-footer small,
.ep-page-footer .text-muted {
    color: rgba(255, 255, 255, 0.92) !important;
}

.ep-page-footer a.text-muted {
    color: #fff !important;
    text-decoration: underline;
}

/* ==========================================================================
   ACCESSIBILITY — kill the motion for anyone who asked for less of it
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ep-flake,
    .ep-rider,
    .ep-puff,
    .ep-sun,
    .ep-success-icon { animation: none !important; }

    .ep-snowfall { display: none; }
    .ep-rider.skier   { left: 12%;  transform: none; }
    .ep-rider.boarder { left: 68%;  transform: none; }
    .ep-choice:hover, .btn-ep:hover:not(:disabled) { transform: none; }
}

@media print {
    /* The confirmation page is meant to be printed — drop the photo and the
       scenery so it comes out as a clean document, not a poster. */
    .ep-snowfall, .ep-slope, .ep-hero .ep-sun, .ep-bg, .ep-ridge { display: none; }
    .ep-card { box-shadow: none; border-color: #999; }
    html, body { padding-bottom: 0; background: #fff; }
    .ep-hero { background: none; color: var(--ep-ink); padding-bottom: 1rem; }
    /* the logo is white, so it would vanish on paper — print it as black */
    .ep-logo { filter: brightness(0); }
    .ep-hero h1, .ep-hero .ep-sub { text-shadow: none; }
    .ep-season-chip { border-color: #999; background: none; }
    .ep-wrap { margin-top: 1rem; }
    .ep-page-footer > small {
        background: none; border: none; padding: 0; backdrop-filter: none;
    }
    .ep-page-footer small,
    .ep-page-footer .text-muted { color: #444 !important; }
}