* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, "Inter", sans-serif;
    background: #faf9f7;
    color: #1a1a1a;
    min-height: 100vh;
    overflow-x: hidden;
    font-size: 16px;
    line-height: 1.5;
    -webkit-overflow-scrolling: touch;
}
/* 120fps GPU compositing for all animated elements */
.location-card, .cert-card, .lead-card, .fly-to-cart,
.loc-transition-bg, .loc-transition-flash, .loc-transition-name,
.bottom-sheet, .modal, .cart-badge, .detail-back-btn,
.video-card, .ni-card, .sf-card, .bottom-sheet-overlay,
.video-modal, .not-interested-modal, .sale-form-modal {
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}
/* Smooth scrolling containers */
.carousel-wrap, .detail-gallery, .detail-video-wrap, .bottom-sheet {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
/* All images optimized */
img {
    image-rendering: optimizeQuality;
    -webkit-image-rendering: optimizeQuality;
}

/* ===== HEADER ===== */
.app-header {
    background: linear-gradient(135deg, hsl(177 56% 28%));
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-brand {
    height: 34px;
    display: flex;
    align-items: center;
}

    .header-brand img {
        height: 100%;
        width: auto;
    }

.header-sep {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.3);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb-badge {
    background: rgba(255,255,255,0.1);
    color: white;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

    .breadcrumb-badge:hover {
        background: rgba(255,255,255,0.2);
    }

.breadcrumb-plane {
    width: 14px;
    height: 12px;
    fill: rgba(255,255,255,0.5);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cart-btn {
    position: relative;
    cursor: pointer;
    padding: 4px;
}

    .cart-btn svg {
        width: 24px;
        height: 24px;
    }

.cart-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: hsl(177 81% 34%);
    color: white;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

    .cart-badge.show {
        display: flex;
    }

    .cart-badge.bounce {
        animation: badgeBounce 400ms ease;
    }

@keyframes badgeBounce {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.3);
    }

    50% {
        transform: scale(0.9);
    }

    75% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 600;
}

.signout-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.2s;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .signout-btn:hover {
        color: white;
    }

    .signout-btn svg {
        width: 20px;
        height: 20px;
    }

/* ===== SCREENS ===== */
.screen {
    display: none;
    padding: 24px;
    animation: fadeIn 300ms ease;
    overflow: hidden;
}

    .screen.active {
        display: block;
    }

#screenLocations.active {
    display: flex;
}

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

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

/* ===== LOCATIONS ===== */
#screenLocations {
    display: none;
    padding: 0;
    height: calc(100vh - 56px);
    overflow: hidden;
    background: linear-gradient(180deg, #f8f9fa 0%, #eef2f7 100%);
}

    #screenLocations.active {
        display: flex;
        flex-direction: column;
    }

.locations-header {
    padding: 28px 32px 20px;
    flex-shrink: 0;
}

.locations-greeting {
    font-size: 14px;
    color: #999;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.locations-title {
    font-size: 28px;
    color: #1a1a1a;
    margin-bottom: 0;
    font-weight: 300;
    flex-shrink: 0;
}

    .locations-title strong {
        font-weight: 700;
        color: hsl(177 56% 28%);
    }

.locations-grid {
    display: grid;
    /* auto-fit con minmax para que el grid se adapte al numero real de cards
               (4 ubicaciones -> 4 col, 5 -> 5 col, etc.) sin dejar huecos huerfanos */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
    padding: 0 32px 32px;
    flex: 1;
    align-content: center;
    justify-content: center;
}

.location-item {
    max-width: 220px;
    width: 100%;
    margin: 0 auto;
}

.location-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 400ms ease, opacity 400ms ease, filter 400ms ease;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}

    .location-card i {
        font-size: 48px;
        color: white;
        filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
        transition: transform 0.3s ease;
    }

    .location-card:hover i {
        transform: scale(1.1);
    }

    .location-card.has-photo {
        padding: 0;
        background: #0a1628;
        overflow: hidden;
    }

    .location-card .loc-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease;
    }

    .location-card:hover .loc-photo {
        transform: scale(1.05);
    }

    .location-card:active, .location-card.pressed {
        transform: scale(0.95);
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

.hotel-card {
    background: linear-gradient(135deg, #0b1628, #1a2d4a);
}

.cine-card {
    background: linear-gradient(135deg, #1a0a12, #2d1117);
}

.aeropuerto-card {
    background: linear-gradient(135deg, hsl(177 56% 28%), hsl(177 56% 28%));
}

.camionera-card {
    background: linear-gradient(135deg, #5ba3d9, #7dbce5);
}

.sales-card {
    background: linear-gradient(135deg, #0e3b2e, #1d7d62);
}

.default-card {
    background: linear-gradient(135deg, #3a4452, #5b6672);
}

.lead-tag-companion {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #155947;
    background: #d6efe2;
    border-radius: 10px;
    vertical-align: middle;
}

    .lead-tag-companion i {
        margin-right: 4px;
        font-size: 10px;
    }

.lead-card.is-companion {
    border-left: 3px solid #1d7d62;
}

.lead-badges {
    margin-top: 6px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.lead-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    line-height: 1.2;
}

    .lead-badge i {
        font-size: 10px;
    }

.lead-badge-reservation {
    color: #0b3b66;
    background: #d4e6f7;
}

.lead-badge-companion {
    color: #5b3a0d;
    background: #fce8c4;
}

.el-companion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    margin-bottom: 6px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fafafa;
}

.el-companion-name {
    font-weight: 600;
    font-size: 14px;
    color: #222;
}

.el-companion-meta {
    font-size: 12px;
    color: #777;
}

.el-companion-actions {
    display: flex;
    gap: 6px;
}

.el-cmp-btn {
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: #444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .el-cmp-btn:hover {
        background: #f0f0f0;
    }

.el-cmp-btn-danger {
    color: #c0392b;
}

    .el-cmp-btn-danger:hover {
        background: #fdecea;
    }

.nl-btn-add-companion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #d6efe2;
    color: #155947;
    border: 1px solid #b5e0c4;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .nl-btn-add-companion:hover {
        background: #c6e8d5;
    }

.location-card.expanding {
    z-index: 50;
}

.location-card.fading {
    opacity: 0;
    transform: scale(0.85);
    filter: blur(4px);
}
/* Fullscreen expansion overlay */
.loc-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    pointer-events: none;
    opacity: 0;
}

    .loc-transition-overlay.active {
        opacity: 1;
    }

.loc-transition-bg {
    position: absolute;
    border-radius: 16px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    will-change: left, top, width, height, border-radius;
}

    .loc-transition-bg.expand {
        border-radius: 0;
    }
/* White flash */
.loc-transition-flash {
    position: absolute;
    inset: 0;
    background: white;
    opacity: 0;
    transition: opacity 0.15s ease;
}

    .loc-transition-flash.flash {
        animation: locFlash 0.5s ease;
    }

@keyframes locFlash {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
    }
}
/* Location name that appears during transition */
.loc-transition-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    color: white;
    font-size: 42px;
    font-weight: 200;
    letter-spacing: 4px;
    opacity: 0;
    text-shadow: 0 2px 20px rgba(0,0,0,0.4);
    transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
    white-space: nowrap;
}

    .loc-transition-name.show {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

.location-card .label {
    display: none;
}

.location-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

    .location-item .loc-name {
        font-size: 16px;
        font-weight: 600;
        color: #1a1a1a;
        text-align: center;
        letter-spacing: 0.5px;
    }

.location-card .label {
    display: none;
}
/* ===== LEADS SCREEN ===== */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(50, 168, 82,0.08);
    border: 1px solid rgba(0,119,182,0.2);
    color: hsl(177 56% 28%);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 16px;
    transition: background 0.2s;
}

    .back-btn:hover {
        background: rgba(0,119,182,0.15);
    }

.filter-select {
    border: 1.5px solid hsl(177 56% 28%);
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 14px;
    color: #1a1a1a;
    background: white;
    outline: none;
    margin-bottom: 16px;
    margin-left: 12px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%230077b6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.lead-card {
    background: white;
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border-left: 4px solid hsl(177 56% 28%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(20px);
    animation: slideUp 400ms ease forwards;
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms;
}

    .lead-card:active {
        transform: scale(0.97);
        box-shadow: 0 1px 6px rgba(0,0,0,0.04);
    }

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

.lead-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lead-name {
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
}

.lead-name-link {
    text-decoration: underline;
    cursor: pointer;
}

.lead-details {
    font-size: 13px;
    color: #999;
}

.lead-cert-info {
    font-size: 12px;
    color: hsl(177 56% 28%);
    font-weight: 600;
    margin-top: 4px;
}

.lead-cert-line {
    line-height: 1.5;
}

.lead-actions {
    display: flex;
    gap: 14px;
    align-items: center;
}

.lead-action-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 200ms, background 200ms;
    background: none;
    color: #777;
    font-size: 20px;
}

    .lead-action-icon:active {
        transform: scale(0.9);
    }

    .lead-action-icon:hover {
        color: hsl(177 56% 28%);
    }

    .lead-action-icon.certs {
        color: hsl(177 56% 28%);
    }

/* ===== CERTIFICATES CAROUSEL ===== */
#screenCertificates {
    padding: 0;
    height: calc(100vh - 56px);
    display: none;
    flex-direction: column;
    background: linear-gradient(180deg, hsl(177 100% 25%) 0%, hsl(177 89% 28%) 40%, hsl(177 56% 28%) 100%);
    position: relative;
    overflow: hidden;
}

    #screenCertificates.active {
        display: flex;
    }

    #screenCertificates::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 30% 20%, rgba(0,180,216,0.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(0,119,182,0.06) 0%, transparent 50%);
        pointer-events: none;
    }

.carousel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    flex-shrink: 0;
    z-index: 2;
}

    .carousel-header .back-btn {
        color: rgba(255,255,255,0.8);
        border-color: rgba(255,255,255,0.2);
    }

        .carousel-header .back-btn:hover {
            background: rgba(255,255,255,0.1);
        }

        .carousel-header .back-btn svg {
            stroke: rgba(255,255,255,0.8);
        }

.lead-name-display {
    font-size: 18px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
}
/* Center label */
.carousel-center-label {
    text-align: center;
    flex-shrink: 0;
    z-index: 2;
    padding: 0 24px;
}

    .carousel-center-label h3 {
        font-size: 14px;
        font-weight: 400;
        color: rgba(255,255,255,0.5);
        letter-spacing: 3px;
        text-transform: uppercase;
    }

.carousel-wrap {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 24px;
    padding: 16px calc(50vw - 160px) 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    flex: 1;
    align-items: center;
    z-index: 2;
}

    .carousel-wrap::-webkit-scrollbar {
        display: none;
    }
/* Scroll indicator dots */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding-bottom: 20px;
    flex-shrink: 0;
    z-index: 2;
}

.carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}

    .carousel-dot.active {
        background: rgba(255,255,255,0.8);
        width: 20px;
        border-radius: 3px;
    }

.cert-card {
    flex: 0 0 340px;
    height: calc(100vh - 220px);
    max-height: 540px;
    min-height: 380px;
    border-radius: 24px;
    overflow: hidden;
    scroll-snap-align: center;
    position: relative;
    cursor: pointer;
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 400ms;
}

    .cert-card:active {
        transform: scale(0.97);
    }
    /* Voucher-style card interior */
    .cert-card .cert-bg {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    /* Top scenic band (gradient simulating destination photo) */
    .cert-card .cert-scene {
        height: 40%;
        position: relative;
        overflow: hidden;
        background-size: cover;
        background-position: center;
    }

        .cert-card .cert-scene::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40px;
            background: linear-gradient(0deg, rgba(255,255,255,0.95), transparent);
        }
        /* Shine sweep */
        .cert-card .cert-scene::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
            animation: cardShine 5s ease-in-out infinite;
            z-index: 1;
        }

@keyframes cardShine {
    0%, 100% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(100%);
    }
}
/* Bottom content area — white glass voucher */
.cert-card .cert-body {
    flex: 1;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}
    /* Perforated line between scene and body */
    .cert-card .cert-body::before {
        content: '';
        position: absolute;
        top: -1px;
        left: 8%;
        right: 8%;
        border-top: 2px dashed rgba(0,0,0,0.1);
    }
/* PHH Logo area */
.cert-card .cert-logo {
    font-size: 11px;
    font-weight: 700;
    color: hsl(177 56% 28%);
    letter-spacing: 3px;
    margin-bottom: 4px;
}

.cert-card .cert-logo-sub {
    font-size: 8px;
    color: #999;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
/* Nights/Days */
.cert-card .cert-duration {
    font-size: 13px;
    color: hsl(177 56% 28%);
    font-weight: 500;
    margin-bottom: 10px;
    letter-spacing: 1px;
}
/* Destination names */
.cert-card .cert-destinations {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.4;
    margin-bottom: 14px;
}
/* Description */
.cert-card .cert-desc-short {
    font-size: 12px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 16px;
}

    .cert-card .cert-desc-short strong {
        color: #1a1a1a;
    }
/* Regime badge */
.cert-card .cert-regime {
    font-size: 10px;
    font-weight: 600;
    color: hsl(177 56% 28%);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: rgba(0,119,182,0.08);
    padding: 6px 14px;
    border-radius: 20px;
    margin-top: auto;
}

.cert-card .cert-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    margin-bottom: 12px;
}

.cert-card .cert-price {
    font-size: 26px;
    font-weight: 800;
    color: hsl(177 56% 28%);
    margin-bottom: 2px;
    letter-spacing: -0.5px;
}

.cert-card .cert-deposit {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
    font-weight: 500;
}

.cert-card .cert-resorts {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    font-size: 13px;
    color: #444;
    line-height: 1.7;
}

    .cert-card .cert-resorts li {
        padding-left: 12px;
        position: relative;
    }

        .cert-card .cert-resorts li::before {
            content: '\2022';
            position: absolute;
            left: 0;
            color: hsl(177 56% 28%);
            font-weight: 700;
        }

.cert-card .cert-seasons {
    font-size: 11px;
    color: #777;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: auto;
    padding-top: 12px;
}
/* Center card glow */
.cert-card.in-view {
    transform: scale(1.04);
    box-shadow: 0 16px 48px rgba(0,0,0,0.25);
}

.cert-card:not(.in-view) {
    opacity: 0.5;
    transform: scale(0.88);
}

/* ===== FULLSCREEN DETAIL OVERLAY ===== */
.bottom-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0);
    z-index: 200;
    pointer-events: none;
    transition: background 0.4s ease;
    overflow: hidden;
}

    .bottom-sheet-overlay.show {
        background: rgba(0,0,0,0);
        pointer-events: auto;
        overflow: hidden;
    }

.bottom-sheet {
    background: white;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
    -webkit-overflow-scrolling: touch;
}

.bottom-sheet-overlay.show .bottom-sheet {
    transform: translateY(0);
}

.bottom-sheet-overlay.closing .bottom-sheet {
    transform: translateY(100%);
}

.bottom-sheet-overlay.closing {
    background: rgba(0,0,0,0);
}

/* Back button on detail */
.detail-back-btn {
    position: fixed;
    top: 58px;
    left: 14px;
    z-index: 250;
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

    .detail-back-btn:hover {
        background: rgba(0,0,0,0.55);
    }
/* Old floating back btn - hidden, now using frame bar back button instead */
.bottom-sheet-overlay.show .detail-back-btn {
    display: none;
}

.bottom-sheet-overlay.closing .detail-back-btn {
    display: none;
}

/* Sections */
.detail-section {
    padding: 28px 0 0;
}

.detail-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
    padding: 0 24px;
    letter-spacing: 0.5px;
}

.detail-section-line {
    width: 32px;
    height: 3px;
    background: hsl(177 56% 28%);
    border-radius: 2px;
    margin: 0 0 14px 24px;
}

/* Gallery / Room carousel */
.detail-gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 0 24px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .detail-gallery::-webkit-scrollbar {
        display: none;
    }

    .detail-gallery img {
        flex: 0 0 280px;
        width: 280px;
        height: 200px;
        border-radius: 16px;
        object-fit: cover;
        scroll-snap-align: start;
        background: #eee;
    }

/* Video carousel */
.detail-video-wrap {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding: 0 24px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .detail-video-wrap::-webkit-scrollbar {
        display: none;
    }

.video-card-wrap {
    flex: 0 0 calc(50% - 7px);
    scroll-snap-align: start;
}

.video-card {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
}

    .video-card video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .video-card .video-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        background: rgba(0,0,0,0.2);
        transition: opacity 0.3s ease;
    }

    .video-card .play-btn {
        width: 48px;
        height: 48px;
        background: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 24px rgba(0,0,0,0.35);
        transition: transform 0.2s ease;
    }

    .video-card:active .play-btn {
        transform: scale(0.95);
    }

    .video-card .play-btn svg {
        width: 20px;
        height: 20px;
        fill: hsl(177 56% 28%);
        margin-left: 4px;
    }

    .video-card .watch-label {
        background: rgba(0,0,0,0.55);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: white;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 2.5px;
        padding: 8px 20px;
        border-radius: 8px;
    }

.video-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    padding: 8px 0 0;
    line-height: 1.3;
}

/* Video fullscreen modal */
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(0,0,0,0);
    display: flex;
    flex-direction: column;
    pointer-events: none;
    transition: background 0.4s ease;
}

    .video-modal.show {
        background: rgba(0,0,0,0.92);
        pointer-events: auto;
    }

    .video-modal .vm-close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
        background: none;
        border: none;
        color: white;
        font-size: 28px;
        cursor: pointer;
        z-index: 5;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s;
    }

    .video-modal.show .vm-close {
        opacity: 0.7;
        visibility: visible;
    }

        .video-modal.show .vm-close:hover {
            opacity: 1;
        }

    .video-modal .vm-video-wrap {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        opacity: 0;
        transform: scale(0.9);
        transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
    }

    .video-modal.show .vm-video-wrap {
        opacity: 1;
        transform: scale(1);
    }

    .video-modal .vm-video-wrap video {
        width: 100%;
        max-height: 60vh;
        border-radius: 16px;
        object-fit: cover;
        background: #000;
    }

    .video-modal .vm-info {
        padding: 0 28px 32px;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
    }

    .video-modal.show .vm-info {
        opacity: 1;
        transform: translateY(0);
    }

    .video-modal .vm-subtitle {
        font-size: 12px;
        color: rgba(255,255,255,0.5);
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 6px;
    }

    .video-modal .vm-title {
        font-size: 24px;
        font-weight: 700;
        color: white;
        margin-bottom: 10px;
    }

    .video-modal .vm-desc {
        font-size: 15px;
        color: rgba(255,255,255,0.7);
        line-height: 1.6;
    }

/* Sticky bottom button */
/* Frame bar at top of certificate detail */
.detail-frame-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: linear-gradient(135deg, hsl(177 56% 28%), hsl(177 56% 28%));
    flex-shrink: 0;
}

.dfb-back {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

    .dfb-back:hover {
        background: rgba(255,255,255,0.25);
    }

    .dfb-back:active {
        transform: scale(0.9);
    }

.dfb-logo {
    height: 22px;
    width: auto;
}

.dfb-text {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    letter-spacing: 1px;
    font-weight: 500;
}

.dfb-lead {
    margin-left: auto;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    font-weight: 400;
}

.detail-sticky-btn {
    position: sticky;
    bottom: 0;
    padding: 14px 24px;
    background: white;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    z-index: 5;
    margin-top: 28px;
    display: flex;
    gap: 10px;
}

    .detail-sticky-btn .btn-add-cart {
        flex: 1;
        padding: 16px;
        border: none;
        border-radius: 14px;
        background: linear-gradient(135deg, hsl(177 56% 28%), hsl(177 56% 28%));
        color: white;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        transition: transform 200ms;
        font-family: inherit;
    }

        .detail-sticky-btn .btn-add-cart:active {
            transform: scale(0.97);
        }

    .detail-sticky-btn .btn-not-interested {
        flex: 1;
        padding: 16px;
        border: 1.5px solid #ddd;
        border-radius: 14px;
        background: white;
        color: #777;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: transform 200ms, border-color 200ms;
        font-family: inherit;
    }

        .detail-sticky-btn .btn-not-interested:active {
            transform: scale(0.97);
        }

        .detail-sticky-btn .btn-not-interested:hover {
            border-color: #e74c3c;
            color: #e74c3c;
        }

/* Not Interested Modal */
.not-interested-modal {
    position: fixed;
    inset: 0;
    z-index: 700;
    background: rgba(0,0,0,0);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background 0.3s ease;
}

    .not-interested-modal.show {
        background: rgba(0,0,0,0.5);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        pointer-events: auto;
    }

.ni-card {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 440px;
    padding: 28px;
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.not-interested-modal.show .ni-card {
    transform: scale(1);
    opacity: 1;
}

.ni-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.ni-card .ni-sub {
    font-size: 13px;
    color: #999;
    margin-bottom: 18px;
}

.ni-reasons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.ni-reason {
    padding: 12px 16px;
    border: 1.5px solid #eee;
    border-radius: 12px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    background: none;
    text-align: left;
}

    .ni-reason:hover {
        border-color: hsl(177 56% 28%);
        color: hsl(177 56% 28%);
    }

    .ni-reason.selected {
        border-color: hsl(177 56% 28%);
        background: rgba(0,119,182,0.06);
        color: hsl(177 56% 28%);
        font-weight: 600;
    }

.ni-notes {
    width: 100%;
    border: 1.5px solid #eee;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    font-family: inherit;
    resize: none;
    height: 80px;
    margin-bottom: 16px;
    outline: none;
    transition: border-color 0.2s;
}

    .ni-notes:focus {
        border-color: hsl(177 56% 28%);
    }

    .ni-notes::placeholder {
        color: #bbb;
    }

.ni-actions {
    display: flex;
    gap: 10px;
}

.ni-btn-cancel {
    flex: 1;
    padding: 14px;
    border: 1.5px solid #eee;
    border-radius: 12px;
    background: white;
    color: #777;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.ni-btn-send {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: hsl(177 56% 28%);
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.2s;
}

    .ni-btn-send:active {
        transform: scale(0.97);
    }

/* Sale Form Modal */
.sale-form-modal {
    position: fixed;
    inset: 0;
    z-index: 700;
    background: rgba(0,0,0,0);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background 0.3s ease;
}

    .sale-form-modal.show {
        background: rgba(0,0,0,0.5);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        pointer-events: auto;
    }

.sf-card {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px;
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.sale-form-modal.show .sf-card {
    transform: scale(1);
    opacity: 1;
}

.sf-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.sf-card .sf-sub {
    font-size: 13px;
    color: #999;
    margin-bottom: 20px;
}

.sf-field {
    margin-bottom: 16px;
}

    .sf-field label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: #555;
        margin-bottom: 6px;
        letter-spacing: 0.5px;
    }

    .sf-field input {
        width: 100%;
        padding: 14px 16px;
        border: 1.5px solid #eee;
        border-radius: 12px;
        font-size: 15px;
        font-family: inherit;
        outline: none;
        transition: border-color 0.2s;
    }

        .sf-field input:focus {
            border-color: hsl(177 56% 28%);
        }

    .sf-field select,
    .sf-field textarea {
        width: 100%;
        padding: 14px 16px;
        border: 1.5px solid #eee;
        border-radius: 12px;
        font-size: 15px;
        font-family: inherit;
        outline: none;
        transition: border-color 0.2s;
        background: #fff;
        color: #1a1a1a;
    }

    .sf-field textarea {
        resize: vertical;
        min-height: 60px;
    }

        .sf-field select:focus,
        .sf-field textarea:focus {
            border-color: hsl(177 56% 28%);
        }

.sf-row {
    display: flex;
    gap: 12px;
}

    .sf-row .sf-field {
        flex: 1;
    }

.sf-section-title {
    font-size: 12px;
    font-weight: 700;
    color: hsl(177 56% 28%);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 14px 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid hsl(177 56% 28%);
}

.sf-payment {
    border: 1.5px solid #eee;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    background: #fafbfc;
}

.sf-payment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.sf-payment-title {
    font-size: 12px;
    font-weight: 700;
    color: hsl(177 56% 28%);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sf-payment-remove {
    background: none;
    border: none;
    color: #c0392b;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 8px;
}

    .sf-payment-remove:hover {
        background: #fdecea;
    }

.sf-payments-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sf-add-payment {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1.5px dashed hsl(177 56% 28%);
    color: hsl(177 56% 28%);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 16px;
    border-radius: 12px;
    cursor: pointer;
}

    .sf-add-payment:hover {
        background: #f0f4f9;
    }

    .sf-add-payment:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

.sf-allocated {
    font-size: 13px;
    font-weight: 600;
    color: #666;
}

.sf-error {
    color: #c0392b;
    font-size: 13px;
    min-height: 18px;
    margin-bottom: 8px;
}

.sf-btn-accept:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sf-signature-label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.sf-signature-wrap {
    position: relative;
    border: 1.5px solid #eee;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 8px;
    background: #fafafa;
}

    .sf-signature-wrap canvas {
        width: 100%;
        height: 180px;
        display: block;
        cursor: crosshair;
        touch-action: none;
    }

.sf-signature-hint {
    font-size: 11px;
    color: #bbb;
    text-align: center;
    margin-bottom: 6px;
}

.sf-clear-sig {
    font-size: 12px;
    color: hsl(177 56% 28%);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    margin-bottom: 20px;
    display: block;
    text-decoration: underline;
    padding: 0;
}

    .sf-clear-sig:hover {
        color: hsl(177 56% 28%);
    }

.sf-terms {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 16px;
    user-select: none;
}

    .sf-terms input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.sf-terms-box {
    width: 22px;
    height: 22px;
    border: 1.5px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

    .sf-terms-box i {
        color: #fff;
        font-size: 12px;
        opacity: 0;
        transform: scale(0.5);
        transition: opacity 0.15s, transform 0.15s;
    }

.sf-terms input[type="checkbox"]:checked ~ .sf-terms-box {
    background: hsl(177 56% 28%);
    border-color: hsl(177 56% 28%);
}

    .sf-terms input[type="checkbox"]:checked ~ .sf-terms-box i {
        opacity: 1;
        transform: scale(1);
    }

.sf-terms-text {
    font-size: 13px;
    color: #555;
    font-weight: 500;
}

.sf-terms:hover .sf-terms-box {
    border-color: hsl(177 56% 28%);
}

.sf-actions {
    display: flex;
    gap: 10px;
}

.sf-btn-cancel {
    flex: 1;
    padding: 14px;
    border: 1.5px solid #eee;
    border-radius: 12px;
    background: white;
    color: #777;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.sf-btn-accept {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, hsl(177 56% 28%), hsl(177 56% 28%));
    color: white;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.2s;
}

    .sf-btn-accept:active {
        transform: scale(0.97);
    }
/* Lead marked as not interested */
.lead-card.not-interested {
    opacity: 0.5;
    border-left-color: #e74c3c;
}

    .lead-card.not-interested::after {
        content: 'No interesado';
        position: absolute;
        top: 8px;
        right: 12px;
        font-size: 10px;
        color: #e74c3c;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

/* Flying miniature to cart */
.fly-to-cart {
    position: fixed;
    border-radius: 10px;
    z-index: 500;
    pointer-events: none;
    transition: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

    .fly-to-cart.animating {
        transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.7s ease, width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 0.7s ease;
    }

/* ===== CART ===== */
.cart-passes {
    margin-bottom: 24px;
}

.boarding-pass {
    background: white;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    display: flex;
    margin-bottom: -8px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

    .boarding-pass:last-child {
        margin-bottom: 0;
    }

    .boarding-pass:nth-child(odd) {
        z-index: 2;
    }

.bp-left {
    flex: 1;
    padding: 16px 18px;
}

.bp-label {
    font-size: 9px;
    color: #999;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.bp-dest {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
}

.bp-guest {
    font-size: 13px;
    font-weight: 600;
    color: hsl(177 56% 28%);
    margin-bottom: 4px;
}

.bp-data {
    font-size: 12px;
    color: #777;
}

.bp-perforation {
    width: 1px;
    background: repeating-linear-gradient(180deg, #ddd 0, #ddd 4px, transparent 4px, transparent 8px);
}

.bp-right {
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.bp-seat-label {
    font-size: 9px;
    color: #999;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.bp-seat {
    font-size: 22px;
    font-weight: 700;
    color: hsl(177 56% 28%);
}

.bp-remove {
    margin-top: 6px;
    font-size: 10px;
    color: #e74c3c;
    cursor: pointer;
    border: none;
    background: none;
    font-weight: 600;
}

.summary-card {
    background: white;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    margin-top: 24px;
}

.summary-lead {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.summary-count {
    font-size: 13px;
    color: #777;
    margin-bottom: 12px;
}

.summary-divider {
    height: 1px;
    background: #eee;
    margin-bottom: 16px;
}

.btn-confirm {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, hsl(177 56% 28%), hsl(177 56% 28%));
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 200ms;
}

    .btn-confirm:active {
        transform: scale(0.97);
    }

/* ===== CONFIRMATION ===== */
.confirmation-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
}

.check-circle {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
}

    .check-circle circle {
        fill: none;
        stroke: hsl(177 56% 28%);
        stroke-width: 3;
        stroke-dasharray: 240;
        stroke-dashoffset: 240;
        animation: drawCircle 600ms ease forwards;
    }

    .check-circle path {
        fill: none;
        stroke: hsl(177 56% 28%);
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 50;
        stroke-dashoffset: 50;
        animation: drawCheck 400ms ease forwards 500ms;
    }

@keyframes drawCircle {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes drawCheck {
    to {
        stroke-dashoffset: 0;
    }
}

.confirm-title {
    font-size: 24px;
    font-weight: 700;
    color: hsl(177 56% 28%);
    margin-bottom: 8px;
}

.confirm-sub {
    font-size: 14px;
    color: #777;
    margin-bottom: 24px;
}

.btn-new-sale {
    padding: 12px 28px;
    border-radius: 12px;
    border: 1.5px solid hsl(177 56% 28%);
    background: transparent;
    color: hsl(177 56% 28%);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
/* Receipt card on confirmation */
.confirm-receipt {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    padding: 24px;
    width: 100%;
    max-width: 400px;
    text-align: left;
    margin-bottom: 24px;
}

    .confirm-receipt .receipt-row {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #555;
        margin-bottom: 10px;
    }

        .confirm-receipt .receipt-row .receipt-label {
            font-weight: 600;
            color: #1a1a1a;
        }

    .confirm-receipt .receipt-divider {
        height: 1px;
        background: #eee;
        margin: 14px 0;
    }

    .confirm-receipt .receipt-certs-title {
        font-size: 12px;
        font-weight: 600;
        color: #999;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 8px;
    }

    .confirm-receipt .receipt-cert-item {
        font-size: 14px;
        color: #1a1a1a;
        margin-bottom: 6px;
        padding-left: 12px;
        border-left: 3px solid hsl(177 56% 28%);
    }

    .confirm-receipt .receipt-signature-area {
        border: 1.5px dashed #ddd;
        border-radius: 12px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ccc;
        font-size: 13px;
        font-style: italic;
        margin-top: 8px;
    }

    .confirm-receipt .receipt-date {
        font-size: 12px;
        color: #999;
        text-align: right;
        margin-top: 10px;
    }

.sc-mail-block {
    margin-top: 20px;
    padding: 18px;
    background: #fafafa;
    border-radius: 16px;
    max-width: 420px;
    width: 100%;
}

    .sc-mail-block label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: #555;
        margin-bottom: 6px;
        letter-spacing: 0.5px;
    }

    .sc-mail-block input {
        width: 100%;
        padding: 12px 14px;
        border: 1.5px solid #e0e0e0;
        border-radius: 10px;
        font-size: 14px;
        font-family: inherit;
        outline: none;
        background: #fff;
    }

        .sc-mail-block input:focus {
            border-color: hsl(177 56% 28%);
        }

.sc-mail-error {
    font-size: 12px;
    min-height: 16px;
    margin: 6px 0 10px;
}

.sc-mail-actions {
    display: flex;
    gap: 10px;
}

.btn-finish,
.btn-send {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
}

.btn-finish {
    border: 1.5px solid #e0e0e0;
    background: #fff;
    color: #666;
}

.btn-send {
    border: none;
    background: linear-gradient(135deg, hsl(177 56% 28%), hsl(177 56% 28%));
    color: #fff;
}

    .btn-send:hover {
        opacity: 0.92;
    }

    .btn-send:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 300;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
    top: -10px;
    width: 8px;
    height: 14px;
    animation: confettiFall 3s ease-out forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* ===== MODAL ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 250;
    display: none;
    align-items: center;
    justify-content: center;
}

    .modal-overlay.show {
        display: flex;
    }

.modal {
    background: white;
    border-radius: 16px;
    width: 60%;
    max-width: 600px;
    padding: 28px;
    position: relative;
    animation: fadeIn 300ms ease;
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    font-size: 20px;
    cursor: pointer;
    color: #777;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .modal-close:hover {
        color: #e74c3c;
    }

.modal h2 {
    font-size: 20px;
    color: #1a1a1a;
    margin-bottom: 20px;
}

.docs-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.doc-card {
    background: #faf9f7;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: transform 200ms, box-shadow 200ms;
    border: 1px solid #eee;
    align-self: flex-start;
    width: 220px;
    max-width: 100%;
}

    .doc-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .doc-card i {
        font-size: 28px;
        color: #e74c3c;
        margin-bottom: 8px;
    }

    .doc-card p {
        font-size: 12px;
        color: #555;
        font-weight: 600;
    }

/* ===== EMPTY STATE ===== */
.empty-cart {
    text-align: center;
    padding: 40px;
    color: #999;
}

    .empty-cart i {
        font-size: 40px;
        margin-bottom: 12px;
        opacity: 0.4;
    }

    .empty-cart p {
        font-size: 14px;
    }

/* ===== DETAIL VOUCHER (Paradise Retreat style) ===== */
.detail-hero {
    width: 100%;
    height: 50vh;
    position: relative;
    background-size: cover;
    background-position: center;
}

    .detail-hero::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(0deg, white 0%, transparent 100%);
        pointer-events: none;
    }

.detail-voucher {
    width: calc(100% - 48px);
    max-width: 600px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 32px;
    margin: -80px auto 0;
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 40px rgba(0,0,0,0.1);
    text-align: center;
}

    .detail-voucher .dv-logo-img {
        height: 80px;
        margin-bottom: 8px;
    }

    .detail-voucher .dv-club {
        font-size: 10px;
        color: #888;
        letter-spacing: 3px;
        text-transform: uppercase;
        margin-bottom: 16px;
    }

    .detail-voucher .dv-dotted {
        border: none;
        border-top: 2px dotted #ddd;
        width: 60%;
        margin: 16px auto;
    }

    .detail-voucher .dv-duration {
        font-size: 15px;
        color: hsl(177 56% 28%);
        font-weight: 600;
        margin-bottom: 8px;
    }

    .detail-voucher .dv-dest-big {
        font-size: 26px;
        font-weight: 800;
        color: #1a1a1a;
        text-align: center;
        margin-bottom: 6px;
    }

    .detail-voucher .dv-package {
        font-size: 18px;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 16px;
    }

    .detail-voucher .dv-desc {
        font-size: 14px;
        color: #555;
        font-style: italic;
        line-height: 1.7;
        max-width: 480px;
        margin: 0 auto;
    }

/* ===== RESORT CARDS SECTION ===== */
.resort-cards-section {
    padding: 28px 0 0;
}

    .resort-cards-section .section-title {
        font-size: 24px;
        font-weight: 700;
        color: hsl(177 56% 28%);
        text-align: center;
        margin-bottom: 18px;
    }

.resort-cards-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 0 24px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .resort-cards-scroll::-webkit-scrollbar {
        display: none;
    }

.resort-card {
    flex: 0 0 300px;
    border-radius: 16px;
    background: white;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    overflow: hidden;
    scroll-snap-align: start;
}

.resort-card-img-wrap {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

    .resort-card-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 16px 16px 0 0;
    }

.resort-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: white;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 6px 12px;
    border-radius: 8px;
    text-transform: uppercase;
}

.resort-card-body {
    padding: 20px;
}

    .resort-card-body .rc-subtitle {
        font-size: 10px;
        color: #888;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 6px;
    }

    .resort-card-body .rc-name {
        font-size: 18px;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 8px;
    }

    .resort-card-body .rc-desc {
        font-size: 13px;
        color: #666;
        line-height: 1.5;
    }

/* ===== AMENITIES GRID ===== */
.amenities-section {
    padding: 28px 24px 0;
}

.amenities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 16px;
}

.amenity-item {
    text-align: center;
}

    .amenity-item i {
        font-size: 24px;
        color: hsl(177 56% 28%);
        margin-bottom: 8px;
        display: block;
    }

    .amenity-item .amenity-title {
        font-size: 14px;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 4px;
    }

    .amenity-item .amenity-desc {
        font-size: 12px;
        color: #777;
        line-height: 1.4;
    }