:root {
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #2a071a;
    color: #3b1328;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    font: inherit;
}

.app-shell {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 0;
    background:
        radial-gradient(circle at 20% 12%, rgba(255, 206, 229, .85), transparent 26rem),
        radial-gradient(circle at 90% 20%, rgba(255, 117, 166, .45), transparent 22rem),
        linear-gradient(145deg, #4b0b31 0%, #f9568d 48%, #ffd2df 100%);
}

.phone-frame {
    position: relative;
    width: min(100vw, 430px);
    min-height: 100dvh;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px),
        linear-gradient(160deg, #ffe7ef 0%, #fff7fa 40%, #ffc2d6 100%);
    background-size: 34px 34px, 34px 34px, auto;
    box-shadow: 0 0 80px rgba(34, 0, 22, .45);
}

.love-sky {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.floating-heart {
    position: absolute;
    left: calc((var(--i) * 37px) % 100%);
    bottom: -3rem;
    color: rgba(220, 25, 94, .26);
    font-size: calc(18px + (var(--i) % 5) * 4px);
    animation: heart-float calc(8s + (var(--i) % 7) * 1s) linear infinite;
    animation-delay: calc(var(--i) * -.55s);
    filter: drop-shadow(0 10px 16px rgba(255, 72, 132, .25));
}

.screen {
    min-height: 100dvh;
    padding: max(24px, env(safe-area-inset-top)) 20px max(26px, env(safe-area-inset-bottom));
}

.screen-pop {
    animation: pop-in .65s cubic-bezier(.16, 1, .3, 1) both;
}

.screen-slide {
    animation: love-slide .58s cubic-bezier(.2, .9, .2, 1) both;
}

.landing-screen,
.summary-screen,
.step-screen {
    min-height: calc(100dvh - 50px);
    display: flex;
    flex-direction: column;
}

.landing-screen {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cupid {
    position: fixed;
    top: -170px;
    left: 50%;
    width: 138px;
    height: 138px;
    z-index: 3;
    translate: -50% 0;
    animation: cupid-drop 2.7s cubic-bezier(.54, .01, .33, 1.02) .25s forwards;
}

.cupid-face {
    position: absolute;
    inset: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #fff 0 12%, #ffd3df 13% 100%);
    color: #d81861;
    font-size: 42px;
    box-shadow: 0 18px 42px rgba(121, 0, 58, .24);
}

.cupid-wing {
    position: absolute;
    top: 38px;
    width: 48px;
    height: 70px;
    border-radius: 50% 50% 12% 50%;
    background: rgba(255,255,255,.92);
    box-shadow: inset 0 -12px 0 rgba(255, 203, 219, .65);
}

.cupid-wing.left {
    left: 0;
    rotate: -24deg;
}

.cupid-wing.right {
    right: 0;
    rotate: 24deg;
    scale: -1 1;
}

.cupid-bow {
    position: absolute;
    right: 4px;
    bottom: 18px;
    color: #8b1745;
    font-size: 36px;
    rotate: 24deg;
}

.eyebrow,
.step-header span,
.summary-badge {
    align-self: center;
    margin: 0 0 14px;
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, .74);
    border-radius: 999px;
    background: rgba(255, 255, 255, .48);
    color: #9c124a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    box-shadow: 0 12px 30px rgba(181, 22, 86, .12);
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    max-width: 340px;
    margin-bottom: 14px;
    color: #75113b;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 16vw, 70px);
    line-height: .88;
    letter-spacing: -.07em;
    text-wrap: balance;
    text-shadow: 0 10px 28px rgba(255, 74, 137, .28);
}

.hero-copy,
.summary-copy,
.step-header p,
.movie-note {
    color: rgba(85, 24, 54, .74);
    line-height: 1.45;
}

.hero-copy {
    max-width: 260px;
    margin-bottom: 110px;
    font-size: 19px;
}

.primary-action,
.secondary-action {
    width: 100%;
    min-height: 58px;
    border: 0;
    border-radius: 22px;
    cursor: pointer;
    font-weight: 900;
    letter-spacing: -.01em;
    color: #fff;
    background: linear-gradient(135deg, #e91667, #ff6a96 52%, #ff9fba);
    box-shadow: 0 18px 32px rgba(228, 32, 103, .32), inset 0 1px 0 rgba(255,255,255,.45);
    transition: transform .2s ease, opacity .2s ease, filter .2s ease;
}

.primary-action:active,
.secondary-action:active {
    transform: translateY(2px) scale(.99);
}

.primary-action:disabled {
    cursor: not-allowed;
    opacity: .48;
    filter: grayscale(.3);
    box-shadow: none;
}

.delayed-action {
    opacity: 0;
    transform: translateY(18px);
    animation: show-start .65s ease 2.7s forwards;
}

.secondary-action {
    margin-top: auto;
    color: #9e164d;
    background: rgba(255,255,255,.74);
    box-shadow: 0 14px 28px rgba(143, 22, 78, .16);
}

.step-screen {
    gap: 18px;
}

.step-header {
    text-align: center;
}

.step-header h2,
.summary-screen h2 {
    margin-bottom: 8px;
    color: #6d1238;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 38px;
    letter-spacing: -.05em;
}

.step-header p {
    max-width: 330px;
    margin-inline: auto;
}

.date-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: auto;
}

.date-card {
    min-height: 134px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 24px;
    text-align: left;
    background: rgba(255,255,255,.55);
    box-shadow: 0 16px 30px rgba(109, 18, 56, .09);
}

.date-card span,
.date-card small,
.summary-card span {
    display: block;
    color: rgba(92, 30, 58, .62);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.date-card strong {
    display: block;
    margin: 4px 0 0;
    color: #5d1837;
    font-size: 42px;
    line-height: .9;
}

.date-card em {
    display: block;
    margin-top: 10px;
    color: rgba(87, 43, 64, .75);
    font-size: 12px;
    font-style: normal;
    line-height: 1.2;
}

.date-card.locked {
    color: #777;
    background: rgba(229, 226, 229, .72);
    filter: grayscale(.9);
}

.date-card.available {
    position: relative;
    border: 2px solid #ff2d76;
    background: linear-gradient(145deg, #fff 0%, #ffe4ee 52%, #ff8db1 100%);
    transform: scale(1.04);
    animation: selected-pulse 1.6s ease-in-out infinite;
}

.date-card.available::after {
    content: "elige esta ♥";
    position: absolute;
    top: -10px;
    right: 10px;
    padding: 6px 9px;
    border-radius: 999px;
    color: #fff;
    background: #d9145e;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.movie-step {
    overflow: hidden;
}

.carousel-status {
    align-self: center;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.6);
    color: #8f1647;
    font-size: 13px;
    font-weight: 850;
}

.carousel-status.busy {
    color: #7c6a73;
}

.movie-carousel {
    position: relative;
    height: min(54dvh, 430px);
    margin-inline: -20px;
    perspective: 900px;
    touch-action: pan-y;
    user-select: none;
}

.movie-card {
    position: absolute;
    left: 50%;
    top: 22px;
    width: min(56vw, 238px);
    height: 365px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-style: preserve-3d;
    transition: filter .2s ease;
    will-change: transform, opacity;
}

.movie-card a {
    position: relative;
    display: block;
    width: 100%;
    height: 298px;
    overflow: hidden;
    border: 5px solid rgba(255,255,255,.9);
    border-radius: 26px;
    color: #fff;
    background: linear-gradient(145deg, #601133, #e9226e);
    box-shadow: 0 28px 48px rgba(88, 8, 45, .28);
}

.movie-card img,
.restaurant-card img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.poster-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    line-height: 1;
}

.movie-card h3 {
    max-width: 210px;
    margin: 12px 0 3px;
    color: #68143a;
    font-size: 18px;
    text-align: center;
}

.movie-card p {
    color: rgba(92, 28, 58, .66);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.movie-card:not(.active) {
    filter: saturate(.72) brightness(.86);
}

.movie-note {
    min-height: 20px;
    margin: -10px 0 0;
    text-align: center;
    font-size: 13px;
}

.restaurant-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.restaurant-card {
    min-height: 220px;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 28px;
    text-align: left;
    background: rgba(255,255,255,.65);
    box-shadow: 0 18px 32px rgba(104, 20, 58, .11);
}

.restaurant-card img {
    height: 132px;
    background: linear-gradient(145deg, #ffdce8, #ff7aa4);
}

.restaurant-card span,
.restaurant-card small {
    display: block;
    padding-inline: 14px;
}

.restaurant-card span {
    margin-top: 12px;
    color: #6c143b;
    font-size: 20px;
    font-weight: 950;
}

.restaurant-card small {
    margin-top: 5px;
    color: rgba(89, 31, 60, .68);
    line-height: 1.25;
}

.restaurant-card:active,
.restaurant-card.selected {
    transform: scale(.98);
    border-color: #ff2d76;
}

.summary-screen {
    justify-content: center;
    text-align: center;
    gap: 12px;
}

.summary-badge {
    margin-bottom: 4px;
}

.summary-copy {
    margin-bottom: 20px;
}

.summary-card {
    padding: 18px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 24px;
    text-align: left;
    background: rgba(255,255,255,.62);
    box-shadow: 0 16px 28px rgba(107, 18, 58, .1);
}

.summary-card strong {
    display: block;
    margin-top: 4px;
    color: #6e123b;
    font-size: 22px;
}

#blazor-error-ui {
    display: none;
}

@keyframes heart-float {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
    12% { opacity: .8; }
    100% { transform: translate3d(calc(((var(--i) % 4) - 1.5) * 36px), -112dvh, 0) rotate(22deg); opacity: 0; }
}

@keyframes cupid-drop {
    0% { transform: translateY(-40px) rotate(-8deg); opacity: 0; }
    18% { opacity: 1; }
    72% { transform: translateY(58dvh) rotate(9deg); opacity: 1; }
    100% { transform: translateY(112dvh) rotate(18deg); opacity: 0; }
}

@keyframes show-start {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pop-in {
    from { opacity: 0; transform: scale(.96); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes love-slide {
    from { opacity: 0; transform: translateX(36px) rotate(1deg); filter: blur(8px); }
    to { opacity: 1; transform: translateX(0) rotate(0); filter: blur(0); }
}

@keyframes selected-pulse {
    0%, 100% { box-shadow: 0 20px 42px rgba(224, 23, 95, .22); }
    50% { box-shadow: 0 20px 46px rgba(224, 23, 95, .42), 0 0 0 8px rgba(255, 45, 118, .08); }
}

@media (min-width: 431px) {
    .phone-frame {
        min-height: 880px;
        border-radius: 38px;
        margin: 20px;
    }
}

@media (max-height: 740px) {
    .movie-carousel {
        height: 390px;
    }

    .movie-card {
        height: 330px;
    }

    .movie-card a {
        height: 260px;
    }
}