@font-face {
    font-family: 'CA Mystery Girl';
    src: url('../fonts/CAMysteryGirl-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

:root {
    --primary-color: #bb0b2f;
    --text-color: #ffffff;
    --bg-color: #1a1a1a;
    --input-bg: #2a2a2a;
    --input-border: #444;
}

/* Dark scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: #555 #2a2a2a;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: #2a2a2a;
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background: #777;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    /* Fallback for body text */
    background-color: var(--bg-color);
    color: var(--text-color);
    background-image: url('../img/fuego_con_negro.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#app {
    flex: 1;
}

h1,
h2,
h3,
h4 {
    font-family: 'CA Mystery Girl', sans-serif;
    color: var(--primary-color);
    font-weight: normal;
}

h3,
h4 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 40px;
    margin-top: 20px;
    /* 'CA Mystery Girl' is an all-caps face: most lowercase codepoints map to
       cap-height glyphs, but 'i' keeps a true lowercase form (narrow, short,
       with a tittle). Uppercasing selects the matching capital glyph so every
       heading renders with one consistent set. */
    text-transform: uppercase;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

header {
    padding: 20px 0;
    text-align: center;
}

.logo {
    max-width: 150px;
}

/* Steps Management */
.step {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.step.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   Step 1: Landing / Hero
   ========================================= */
#step-landing {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

#landing-hero {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background-color: #000;
}

/* Landing Mode (Full Screen, No Scroll) */
body.landing-mode {
    overflow: hidden;
    height: 100vh;
}

body.landing-mode header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: transparent;
}

/* --- Background video: full bleed, always centered, never letterboxed --- */
.hero-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    /* scale(1.02) hides sub-pixel edges while the viewport is being resized */
    transform: translate(-50%, -50%) scale(1.02);
    object-fit: cover;
    object-position: center center;
    display: block;
    pointer-events: none;
    transition: opacity 0.45s ease-in-out;
}

/* Softens the cut when the clip restarts so the loop reads as continuous */
.hero-bg.is-looping {
    opacity: 0.62;
}

/* Darkening layer: enough contrast for the copy, the meat stays visible */
.hero-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.28) 35%,
            rgba(0, 0, 0, 0.28) 62%,
            rgba(0, 0, 0, 0.6) 100%),
        rgba(0, 0, 0, 0.16);
    pointer-events: none;
}

/* --- Hero composition: title > subtitle > card > CTA --- */
.hero-container {
    position: relative;
    z-index: 1;
    /* the column below is the full viewport height, so .container's own
       vertical padding would offset it against the viewport */
    padding-top: 0;
    padding-bottom: 0;
}

.landing-centered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    /* light top padding against a heavy bottom one lifts the block above the
       mathematical centre, so the group reads as optically centred */
    padding: clamp(12px, 2vh, 40px) 20px clamp(48px, 8vh, 130px);
    gap: clamp(24px, 4.5vh, 52px);
    position: relative;
    z-index: 1;
    text-align: center;
}

.landing-titles {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 1.4vh, 18px);
    max-width: 900px;
}

/* Enlace de pedido que ya no sirve. Va sobre el hero, que es oscuro y con
   video detrás: necesita fondo propio para poder leerse. */
.landing-aviso {
    max-width: 520px;
    margin: 0;
    padding: 12px 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: center;
}

.main-title-center {
    font-size: clamp(2.4rem, 7.2vw, 5.5rem);
    line-height: 1;
    color: var(--primary-color);
    letter-spacing: 0.01em;
    margin-bottom: 0;
    font-weight: normal;
    text-shadow: 0 6px 28px rgba(0, 0, 0, 0.55);
    opacity: 0;
    animation: heroRise 0.8s ease-out 0.15s forwards;
}

.sub-title-center {
    font-size: clamp(1rem, 2.3vw, 1.85rem);
    line-height: 1.2;
    color: #fff;
    font-weight: 300;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.6);
    opacity: 0;
    animation: heroRise 0.8s ease-out 0.35s forwards;
}

.landing-card-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(26px, 5vh, 56px);
    width: 100%;
    position: relative;
}

/* ~20% larger than the previous 450px; the 72vh term keeps the whole
   composition inside short viewports without changing the proportion */
.hero-card-center {
    width: min(100%, 540px, 72vh);
    height: auto;
    border-radius: 18px;
    filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.65));
    transition: transform 0.4s ease;
    opacity: 0;
    animation: heroRise 0.9s ease-out 0.5s forwards;
    z-index: 1;
}

.hero-card-center:hover {
    transform: translateY(-4px) scale(1.02);
}

.btn.btn-cta-center {
    padding: clamp(14px, 1.9vh, 20px) clamp(48px, 9vw, 84px);
    font-size: clamp(1.05rem, 1.9vw, 1.6rem);
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(187, 11, 47, 0.45);
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    opacity: 0;
    animation: heroRise 0.8s ease-out 0.8s forwards;
    z-index: 2;
}

.btn.btn-cta-center:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 34px rgba(187, 11, 47, 0.55);
}

.btn.btn-cta-center:active {
    transform: translateY(-1px) scale(1);
}

/* Entry animation. Uses the `translate` property (not `transform`) so the
   retained end state never blocks the hover transforms above. */
@keyframes heroRise {
    from {
        opacity: 0;
        translate: 0 24px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* --- Hero responsive --- */
@media (max-width: 900px) {
    .landing-centered {
        gap: clamp(22px, 3.8vh, 40px);
    }

    .landing-card-container {
        gap: clamp(24px, 4.2vh, 42px);
    }

    .hero-card-center {
        width: min(100%, 470px, 66vh);
    }
}

@media (max-width: 600px) {
    .landing-centered {
        padding: clamp(10px, 1.6vh, 24px) 18px clamp(40px, 7.6vh, 100px);
        gap: 22px;
    }

    .landing-card-container {
        gap: 26px;
    }

    .hero-card-center {
        width: min(100%, 420px);
        border-radius: 14px;
    }

    .btn.btn-cta-center {
        padding: 15px 38px;
        font-size: 1.05rem;
        letter-spacing: 1.5px;
    }
}

/* Short screens (landscape phones): keep the whole block inside the viewport */
@media (max-height: 480px) {
    .landing-centered {
        gap: clamp(12px, 2.4vh, 22px);
        padding: clamp(8px, 1.6vh, 16px) 20px clamp(28px, 7.6vh, 56px);
    }

    .landing-card-container {
        gap: clamp(14px, 3vh, 26px);
    }

    .main-title-center {
        font-size: clamp(1.5rem, 5vw, 2.6rem);
    }

    .sub-title-center {
        font-size: clamp(0.8rem, 1.8vw, 1.05rem);
    }

    .hero-card-center {
        width: min(100%, 420px, 46vh);
    }

    .btn.btn-cta-center {
        padding: 10px 32px;
        font-size: 0.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .main-title-center,
    .sub-title-center,
    .hero-card-center,
    .btn.btn-cta-center {
        animation: none;
        opacity: 1;
        translate: none;
    }

    .hero-card-center,
    .btn.btn-cta-center,
    .hero-bg {
        transition: none;
    }
}

/* =========================================
   NEW FLOW STYLES (Overlay/Blur & Boxes)
   ========================================= */

/* Blur Overlay Background */
.blur-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 5;
}

/* Container for the flow steps to center content over the blur */
.flow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: none;
    /* Toggled by JS */
    overflow-y: auto;
    padding: 20px;
}

.flow-container.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The Main Card Box */
.flow-card {
    background: rgba(20, 20, 20, 0.98);
    /* Darker background */
    border: 1px solid #333;
    border-radius: 15px;
    /* Slightly sharper */
    padding: 25px;
    /* Reduced padding to fit screen */
    width: 100%;
    max-width: 900px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    position: relative;
    z-index: 11;
    color: #fff;
    max-height: 95vh;
    /* Ensure it fits in viewport */
    overflow-y: auto;
    /* Scroll if needed inside card */
}

.flow-card.wide-card {
    max-width: 1100px;
}

.flow-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 20px;
    font-family: 'CA Mystery Girl', sans-serif;
    color: var(--primary-color);
    letter-spacing: 1px;
    font-weight: normal;
}

/* Grid Layout for Details Step */
.flow-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.flow-amount {
    justify-content: flex-start;
}

.flow-amount .amount-grid {
    flex: 1;
    align-content: center;
}

.flow-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Reduced gap */
}

.flow-col h3 {
    margin-bottom: 15px;
    margin-top: 0;
}

/* Input Boxes */
.box-input label {
    display: block;
    margin-bottom: 25px;
    /* Same margin as others */
    text-align: left;
}

.flow-input {
    width: 100%;
    padding: 10px 5px;
    border: none;
    border-bottom: 2px solid #555;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 1.2rem;
    font-family: 'Poppins', sans-serif;
    transition: border-color 0.3s ease;
}

.flow-input:focus {
    outline: none;
    border-bottom-color: var(--primary-color);
}

/* Amount Grid */
.amount-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    flex: 1;
}

.amount-box {
    background: #333;
    border: 1px solid #444;
    padding: 15px 10px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'CA Mystery Girl', sans-serif;
    font-size: 1.1rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.amount-box:hover {
    background: #444;
}

.amount-box.selected {
    border-color: var(--primary-color);
    background: #222;
    color: var(--primary-color);
}

/* Notification Row */
.flow-row.flow-notification {
    grid-column: 1 / -1;
    border-top: 1px solid #444;
    padding-top: 20px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Unify Titles */
.flow-col h3,
.box-input label,
.flow-row h3 {
    display: block;
    margin-bottom: 15px;
    font-family: 'CA Mystery Girl', sans-serif;
    color: var(--primary-color);
    font-size: 2.5rem;
    text-transform: uppercase;
    text-align: left;
    line-height: 1;
    font-weight: normal;
}

/* Specific overrides if needed */
.box-input label {
    margin-bottom: 10px;
}

.notification-methods {
    display: flex;
    gap: 20px;
}

.notify-option {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    background: transparent;
    padding: 5px 0;
    border-radius: 0;
    border: none;
    transition: color 0.2s;
}

/* With a single channel the radio no longer chooses anything, so only the
   label is shown. Add a second .notify-option and the dots come back. */
.notification-methods:has(.notify-option:only-child) input[type="radio"] {
    display: none;
}

.notify-option .icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.notify-option:hover {
    color: var(--primary-color);
}

/* Style for selected state via JS or checked input sibling selector if possible, 
   but currently reliance is on radio input being visible. 
   User asked to remove "redondo de fondo", likely means make it boxy.
   So border-radius reduced. */

.notify-option input {
    margin: 0;
    accent-color: var(--primary-color);
}

.contact-input-wrapper {
    width: 100%;
    margin-top: 10px;
}

/* Actions */
.flow-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    /* both buttons together are wider than a 320px screen */
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

.btn {
    padding: 10px 30px;
    border-radius: 5px;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #fff;
}

.btn-secondary {
    background-color: #555;
    color: #fff;
}

.btn:hover {
    opacity: 0.9;
}

/* Personalize Step Styles */
.personalize-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    gap: 20px;
}

/* Grid items default to min-width:auto, which stops the columns shrinking
   below their content and pushed the design column past the card on phones */
.personalize-grid>* {
    min-width: 0;
}

/* =========================================
   Giftcard component
   Shared by the design thumbnails and the preview. Every inner element is
   sized in cqw (percentage of the card's own width), so the composition
   scales with the card instead of needing per-resolution offsets.
   ========================================= */
.giftcard {
    position: relative;
    display: block;
    width: 100%;
    /* every card is the same shape, so artwork with a different intrinsic
       ratio can never change the size of one card against the others */
    aspect-ratio: 1.55;
    padding: 0;
    overflow: hidden;
    /* closes the card: nothing inside can cross the rounded edge */
    border-radius: 15px;
    background-color: #1a1a1a;
    container-type: inline-size;
}

/* Layer 1: artwork, filling the card and cropped by it */
.giftcard__bg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: inherit;
}

/* Layer 2: Frigomas logo, centred on both axes, never distorted */
.giftcard__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 55cqw;
    height: auto;
    object-fit: contain;
    opacity: 1;
    pointer-events: none;
    z-index: 2;
}

/* --- Thumbnails --- */
.col-design {
    container-type: inline-size;
}

.design-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* exactly the three designs at whatever width the column has: each card
       is 100cqw wide over the shared aspect ratio, plus the two gaps. A
       fourth design scrolls instead of stretching the dialog. */
    max-height: calc(3 * (100cqw / 1.55) + 20px);
    overflow-y: auto;
}

.design-thumb {
    width: 100%;
    flex-shrink: 0;
    border: 3px solid transparent;
    border-radius: 10px;
    background: none;
    cursor: pointer;
    transition: transform 0.2s;
}

.design-thumb:hover {
    transform: scale(1.02);
}

.design-thumb.selected {
    border-color: var(--primary-color);
}

.col-message textarea {
    width: 100%;
    height: 150px;
    background: #2a2a2a;
    border: 1px solid #555;
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    resize: none;
}

/* --- Preview --- */
/* The box is capped at the same 400px as the artwork; when it was wider, the
   width:100% overlay reached past the card and pushed the price and the
   message panel outside it. */
.card-preview-box {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.giftcard--preview {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Layer 4: personalised information, inside a proportional safe area */
.preview-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 5.5cqw;
    border-radius: inherit;
    pointer-events: none;
    /* the card reads the same wherever it is mounted, independently of the
       text-align of the screen around it */
    text-align: left;
}

/* Layer 3: readability scrim, clipped by the card like everything else */
.preview-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0) 30%,
            rgba(0, 0, 0, 0.12) 55%,
            rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

.preview-text {
    max-width: 100%;
    min-width: 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    font-weight: bold;
    overflow-wrap: break-word;
}

.preview-text.amount {
    align-self: flex-end;
    /* Push to top */
    margin-bottom: auto;
    font-size: clamp(11px, 6.4cqw, 26px);
    line-height: 1.15;
    /* stays on one line: 6.4cqw leaves room for far longer amounts than
       Gs. 1.000.000 inside the 89cqw of usable width */
    white-space: nowrap;
    color: #fff;
}

.preview-text.to {
    font-size: clamp(9px, 4.4cqw, 18px);
    line-height: 1.25;
}

.preview-text.from {
    font-size: clamp(8px, 3.9cqw, 16px);
    line-height: 1.25;
}

.preview-text.msg {
    margin-top: 2.4cqw;
    font-style: italic;
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
    font-size: clamp(8px, 3.5cqw, 15px);
    line-height: 1.35;
    background: rgba(0, 0, 0, 0.3);
    padding: 2cqw 2.6cqw;
    border-radius: 2cqw;
    /* long words break instead of pushing the panel past the card edge */
    word-break: break-word;
}

.preview-text.msg:empty {
    display: none;
}

.hidden {
    display: none;
}

/* Responsive fixes */
@media (max-width: 768px) {
    .flow-grid {
        grid-template-columns: 1fr;
    }

    .personalize-grid {
        grid-template-columns: 1fr;
    }

    .design-list {
        flex-direction: row;
        overflow-x: auto;
    }

    .design-thumb {
        width: 100px;
    }
}

/* Wizard Styles */
.hidden {
    display: none !important;
}

.wizard-container {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.wizard-form {
    width: 100%;
    max-width: 800px;
}

.wizard-step {
    display: none;
    /* Hidden by default */
    text-align: center;
    animation: fadeInStep 0.5s ease-out;
}

.wizard-step.active {
    display: block;
}

.wizard-title {
    font-size: 3.5rem;
    margin-bottom: 40px;
    color: white;
}

.wizard-input-group {
    margin-bottom: 40px;
}

.wizard-input {
    background: transparent;
    border: none;
    border-bottom: 2px solid #666;
    border-radius: 0;
    font-size: 2.5rem;
    padding: 10px 0;
    color: white;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    width: 100%;
    transition: all 0.3s ease;
}

.wizard-input:focus {
    outline: none;
    border-bottom-color: var(--primary-color);
    box-shadow: none;
    background: transparent;
}

.wizard-input::placeholder {
    color: #555;
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
}

.wizard-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

/* Amount Selection Cards */
.amount-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
    width: 100%;
}

.amount-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    border-radius: 15px;
    padding: 30px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'CA Mystery Girl', sans-serif;
    font-size: 2rem;
    color: white;
    font-weight: normal;
}

.amount-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
    border-color: rgba(187, 11, 47, 0.5);
}

.amount-card.selected {
    background: rgba(187, 11, 47, 0.2);
    border-color: var(--primary-color);
    box-shadow: 0 0 20px rgba(187, 11, 47, 0.3);
}

.amount-value {
    pointer-events: none;
}

/* Custom Radio for Wizard */
.radio-group-centered {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    padding: 15px 30px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.radio-option input {
    display: none;
}

.radio-option.selected {
    border-color: var(--primary-color);
    background: rgba(187, 11, 47, 0.1);
    color: var(--primary-color);
}

.radio-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

@keyframes fadeInStep {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .wizard-title {
        font-size: 2rem;
    }

    .wizard-input {
        font-size: 1.5rem;
    }
}

/* Buttons */

/* Buttons */
.btn {
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    font-size: 1.2rem;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    transition: transform 0.2s, background 0.2s;
}

.btn-primary {
    background-color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-color) 0%, #900824 100%);
    box-shadow: 0 4px 15px rgba(187, 11, 47, 0.4);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #d30e36 0%, #a00928 100%);
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 6px 20px rgba(187, 11, 47, 0.6);
}

.btn-secondary {
    background-color: #444;
    color: white;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: #555;
    transform: translateY(-2px);
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

input,
select,
textarea {
    width: 100%;
    padding: 12px;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 5px;
    color: white;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(187, 11, 47, 0.2);
    background-color: #333;
}

.radio-group label {
    display: inline-block;
    margin-right: 20px;
    font-weight: normal;
    cursor: pointer;
}

/* Stepper */
.stepper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
}

.step-indicator {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #444;
    color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border: 2px solid #666;
}

.step-indicator.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.step-indicator.completed {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}

.line {
    width: 50px;
    height: 3px;
    background-color: #444;
    margin: 0 10px;
}

.line.active,
.line.completed {
    background-color: var(--primary-color);
    /* Or green if completed */
}

/* Design Selection */
.designs {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.design-option {
    width: 100px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 3px solid transparent;
    opacity: 0.7;
    transition: all 0.2s;
}

.design-option.selected {
    border-color: var(--primary-color);
    opacity: 1;
    transform: scale(1.1);
}

/* Preview */
.preview-container {
    background-color: #333;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.card-preview {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    text-shadow: 1px 1px 3px black;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
}

.card-amount {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: right;
    margin-bottom: 20px;
}

.card-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    position: relative;
    z-index: 1;
}

.card-from,
.card-to {
    font-size: 1rem;
    margin-bottom: 5px;
}

.card-msg {
    font-style: italic;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
    font-size: 0.9rem;
    margin-top: 10px;
    max-width: 45%;
    margin-right: 10px;
    margin-bottom: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.card-logo {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100px;
    height: auto;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
    z-index: 2;
}

.card-code {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    z-index: 2;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.qr-code {
    width: 80px;
    height: 80px;
    background: white;
    padding: 2px;
    border-radius: 5px;
    margin-bottom: 5px;
}

.coupon-code {
    font-family: 'Courier New', monospace;
    background: transparent;
    color: black;
    padding: 2px 5px;
    font-weight: bold;
    font-size: 0.9rem;
    text-shadow: none;
}

/* ============================================
   Paso 4: pago
   Dos medios en la misma pantalla. El formulario de tarjeta lo dibuja
   Bancard dentro de un iframe, así que su caja va en claro: es lo único
   del flujo que no controlamos con este CSS.
   ============================================ */

.pay-card {
    max-width: 620px;
}

.pay-summary {
    background: #222;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 22px;
}

.pay-line,
.pay-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 8px;
}

.pay-line-soft {
    color: #a8a8a8;
    font-size: 0.9rem;
}

.pay-line-soft span:last-child {
    color: #ddd;
    text-align: right;
    overflow-wrap: anywhere;
}

.pay-total {
    font-weight: bold;
    font-size: 1.25rem;
    border-top: 1px solid #444;
    padding-top: 12px;
    margin: 12px 0 0;
    color: var(--primary-color);
}

.pay-block {
    margin-bottom: 24px;
}

.pay-block h3 {
    margin: 0 0 14px;
}

.pay-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
}

.pay-fields .box-input label {
    margin-bottom: 8px;
}

.pay-fields .box-input label small {
    color: #888;
    font-size: 0.72rem;
    letter-spacing: 0;
}

/* Medios de pago */
.pay-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pay-option {
    display: block;
    cursor: pointer;
}

.pay-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.pay-option-body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #444;
    border-radius: 10px;
    background: #222;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.pay-option-body .bi {
    font-size: 1.5rem;
    color: #999;
    transition: color 0.25s ease;
}

.pay-option-body strong {
    display: block;
    font-size: 0.98rem;
}

.pay-option-body small {
    display: block;
    color: #9a9a9a;
    font-size: 0.82rem;
    margin-top: 2px;
}

.pay-option:hover .pay-option-body {
    border-color: #666;
}

/* El medio elegido se marca por el borde y el icono, no por un punto suelto */
.pay-option input:checked + .pay-option-body {
    border-color: var(--primary-color);
    background: rgba(187, 11, 47, 0.12);
}

.pay-option input:checked + .pay-option-body .bi {
    color: var(--primary-color);
}

.pay-option input:focus-visible + .pay-option-body {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Formulario de tarjeta de Bancard */
.pay-gateway {
    margin-top: 4px;
}

#bancard-container {
    min-height: 420px;
    background: #fff;
    border-radius: 10px;
    padding: 6px;
    overflow: hidden;
}

#bancard-container iframe {
    display: block;
    width: 100%;
    border: 0;
}

.pay-secure {
    margin: 12px 0 0;
    font-size: 0.82rem;
    color: #9a9a9a;
    text-align: center;
}

.pay-secure .bi {
    color: var(--primary-color);
    margin-right: 5px;
}

/* ============================================
   Paso 4b: transferencia bancaria
   ============================================ */

.transfer-card {
    max-width: 620px;
    text-align: center;
}

.confirm-check.pending {
    border-color: #d9a521;
    background: rgba(217, 165, 33, 0.14);
    color: #d9a521;
}

.bank-accounts {
    display: grid;
    gap: 12px;
    margin: 6px 0 26px;
    text-align: left;
}

.bank-account {
    background: #222;
    border: 1px solid #383838;
    border-radius: 10px;
    padding: 14px 16px;
}

.bank-account p {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 6px;
    font-size: 0.92rem;
}

.bank-account p span {
    color: #9a9a9a;
}

.bank-account p strong {
    text-align: right;
    overflow-wrap: anywhere;
}

.receipt-form {
    border-top: 1px solid #383838;
    padding-top: 20px;
    text-align: left;
}

.receipt-form h3 {
    margin: 0 0 14px;
    text-align: left;
}

.receipt-fields {
    display: grid;
    gap: 14px;
    margin-bottom: 16px;
}

.receipt-form input[type="file"] {
    font-size: 0.9rem;
    padding: 10px 0;
    border-bottom: 2px solid #555;
    color: #ddd;
}

.receipt-form input[type="file"]::file-selector-button {
    font: inherit;
    font-size: 0.85rem;
    margin-right: 12px;
    padding: 8px 14px;
    border: 1px solid #555;
    border-radius: 6px;
    background: #2a2a2a;
    color: #fff;
    cursor: pointer;
}

/* Con el comprobante ya enviado el formulario deja de aceptar otro */
.receipt-form.enviado .receipt-fields,
.receipt-form.enviado #receipt-button {
    display: none;
}

.receipt-form.enviado .payment-feedback {
    border-color: rgba(80, 180, 120, 0.5);
    background: rgba(80, 180, 120, 0.12);
    color: #a8e6bf;
}

/* Código de canje en la pantalla final */
.confirm-code {
    margin: 20px auto 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 24px;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: 10px;
}

.confirm-code-label {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9a9a9a;
}

.confirm-code-value {
    font-family: 'Courier New', monospace;
    font-size: 1.35rem;
    font-weight: bold;
    letter-spacing: 0.18em;
    color: #fff;
}

@media (max-width: 620px) {
    .pay-fields {
        grid-template-columns: 1fr;
    }

    .pay-option-body {
        padding: 12px 14px;
    }

    #bancard-container {
        min-height: 460px;
    }
}

/* Section specific */
#step-details p,
#step-personalize p {
    margin-bottom: 20px;
}

footer {
    text-align: center;
    padding: 4px 0;
    font-size: 0.8rem;
    background-color: var(--primary-color);
    color: white;
    margin-top: 20px;
    border-top: none;
}

.ebiz-link {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: opacity 0.3s;
}

.ebiz-link:hover {
    opacity: 0.8;
}


/* Animation Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Button animation */
.landing-text .btn-lg {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 1s forwards;
    /* Much faster delay */
}
/* =========================================
   Step 5: Purchase confirmation
   ========================================= */
.confirmation-card {
    max-width: 640px;
    text-align: center;
}

.confirm-check {
    width: 74px;
    height: 74px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    background: rgba(187, 11, 47, 0.14);
    color: var(--primary-color);
    font-size: 2.5rem;
    line-height: 1;
    animation: confirmPop 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

.confirmation-card .flow-title {
    margin-bottom: 12px;
    animation: confirmRise 0.5s ease-out 0.16s both;
}

.confirm-lead {
    font-size: 1.15rem;
    color: #fff;
    margin-bottom: 6px;
    animation: confirmRise 0.5s ease-out 0.24s both;
}

.confirm-note {
    font-size: 0.92rem;
    color: #b0b0b0;
    margin-bottom: 28px;
    animation: confirmRise 0.5s ease-out 0.32s both;
}

/* Slightly larger than in the personalization column: here the card is the
   subject of the screen. Everything inside is sized in cqw, so it scales. */
.confirmation-card .card-preview-box {
    max-width: 430px;
    animation: confirmRise 0.55s ease-out 0.4s both;
}

.confirm-sent {
    margin-top: 22px;
    font-weight: bold;
    color: #fff;
    animation: confirmRise 0.5s ease-out 0.5s both;
}

.confirm-sent .bi {
    color: var(--primary-color);
    margin-right: 6px;
}

.confirm-target {
    margin-top: 5px;
    font-size: 0.88rem;
    color: #9a9a9a;
    overflow-wrap: break-word;
    animation: confirmRise 0.5s ease-out 0.56s both;
}

/* Take the card with you. It sits right under the preview and above the
   navigation, because saving the giftcard is what the screen is for. */
.confirm-download {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    animation: confirmRise 0.5s ease-out 0.62s both;
}

.confirm-download .btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    /* .btn-secondary brings a margin of its own; the gap already spaces the
       group */
    margin-right: 0;
}

.confirm-download .bi {
    font-size: 1.05em;
    line-height: 1;
}

/* the rule above outweighs the browser default for [hidden], and the share
   button is hidden wherever the system cannot share a file */
.confirm-download .btn[hidden] {
    display: none;
}

/* both take a whole line of the group, wherever the buttons wrapped */
.confirm-download-note,
.download-feedback {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.86rem;
}

.confirm-download-note {
    color: #9a9a9a;
}

.download-feedback {
    color: #ffc2cc;
}

.confirm-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
    animation: confirmRise 0.5s ease-out 0.72s both;
}

@keyframes confirmPop {
    from {
        opacity: 0;
        transform: scale(0.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* uses `translate` rather than `transform` so button hovers still apply */
@keyframes confirmRise {
    from {
        opacity: 0;
        translate: 0 14px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* Payment result feedback (declined / error / cancelled) */
.payment-feedback {
    margin-top: 16px;
    padding: 11px 15px;
    border: 1px solid rgba(187, 11, 47, 0.55);
    border-radius: 8px;
    background: rgba(187, 11, 47, 0.12);
    color: #ffc2cc;
    font-size: 0.92rem;
    text-align: center;
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (max-width: 520px) {
    /* trims the stacked paddings so the card keeps most of the screen width */
    .confirmation-card {
        padding: 22px 16px;
    }

    .confirm-check {
        width: 62px;
        height: 62px;
        font-size: 2rem;
        margin-bottom: 16px;
    }

    .confirmation-card .flow-title {
        font-size: 1.9rem;
    }

    .confirm-lead {
        font-size: 1rem;
    }

    .confirm-note {
        margin-bottom: 22px;
    }

    /* stacked, so neither label wraps on a narrow screen */
    .confirm-download,
    .confirm-actions {
        flex-direction: column;
    }

    .confirm-download {
        align-items: stretch;
    }

    .confirm-download .btn {
        width: 100%;
        justify-content: center;
    }

    /* flex-basis is a height once the group stacks */
    .confirm-download-note,
    .download-feedback {
        flex-basis: auto;
        text-align: center;
    }

    .confirm-actions .btn {
        width: 100%;
        margin-right: 0;
    }
}

/* Desktop: stacked, the composition needs 720px of height, so any window
   shorter than about 758px hit .flow-card's 95vh cap and scrolled. Two
   columns bring it to ~410px without resizing a single element. */
@media (min-width: 1024px) {
    .confirmation-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 430px;
        grid-template-rows: repeat(8, auto);
        align-items: center;
        column-gap: 56px;
        max-width: 1100px;
        text-align: left;
        /* the panel fits now, so it no longer needs its own scroller;
           .flow-container still scrolls if a window is extremely short, so
           nothing is ever cut off */
        max-height: none;
        overflow: visible;
    }

    .confirm-check {
        grid-column: 1;
        grid-row: 1;
        margin: 0 0 16px;
    }

    .confirmation-card .flow-title {
        grid-column: 1;
        grid-row: 2;
        margin-bottom: 10px;
        /* .flow-title centres itself by default, which broke the alignment
           of the left column */
        text-align: left;
    }

    .confirm-lead {
        grid-column: 1;
        grid-row: 3;
    }

    .confirm-note {
        grid-column: 1;
        grid-row: 4;
        /* this margin separated the copy from the card underneath; the card
           sits beside it now, so it was dead height */
        margin-bottom: 0;
    }

    .confirm-sent {
        grid-column: 1;
        grid-row: 5;
        margin-top: 26px;
    }

    .confirm-target {
        grid-column: 1;
        grid-row: 6;
    }

    .confirm-download {
        grid-column: 1;
        grid-row: 7;
        justify-content: flex-start;
        margin-top: 26px;
    }

    .confirm-actions {
        grid-column: 1;
        grid-row: 8;
        justify-content: flex-start;
        margin-top: 18px;
    }

    /* right column: same size as before, centred against the whole text block */
    .confirmation-card .card-preview-box {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: center;
        justify-self: center;
    }
}

@media (prefers-reduced-motion: reduce) {

    .confirm-check,
    .confirmation-card .flow-title,
    .confirm-lead,
    .confirm-note,
    .confirmation-card .card-preview-box,
    .confirm-sent,
    .confirm-target,
    .confirm-download,
    .confirm-actions {
        animation: none;
        opacity: 1;
        translate: none;
        transform: none;
    }
}