/* ═══════════════════════════════════════════════════════════════
   Palm reading — intro, details sheet, full-screen scan flow,
   unlock CTA & major lock. Web port of the KundliChat app screens.
   ═══════════════════════════════════════════════════════════════ */

/* Shared yellow CTA (app #E9D000 pill) */
.palm-scan-cta {
    display: inline-block;
    min-width: 240px;
    padding: 15px 32px;
    border: none;
    border-radius: 30px;
    background: #E9D000;
    color: #111;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(233, 208, 0, 0.35);
    transition: transform 0.15s ease;
}
.palm-scan-cta:hover { transform: translateY(-2px); color: #111; }

/* ══════════════ INTRO (keeps site header/footer) ══════════════ */
.palm-landing-wrap { padding-bottom: 40px; }

.palm-intro {
    position: relative;
    text-align: center;
    padding: 34px 20px 34px;
    border-radius: 22px;
    color: #fff;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(18,0,42,0.80), rgba(26,0,51,0.80) 55%, rgba(7,0,21,0.94)),
        url('/assets/palm/palm-intro-bg.png') center/cover no-repeat,
        #1A0033;
}
.palm-intro-inner { position: relative; z-index: 2; max-width: 560px; margin: 0 auto; }
.palm-intro-title { font-size: 27px; font-weight: 800; margin: 0; color: #fff; }
.palm-intro-sub { margin: 14px 0 4px; color: rgba(255,255,255,0.72); font-size: 15px; }
.palm-intro-topics { margin: 0; color: rgba(255,255,255,0.9); font-size: 16px; font-weight: 600; }

.palm-intro-visual {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 30px auto;
    cursor: pointer;
}
.palm-intro-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: palmIntroSpin 12s linear infinite;
    filter: drop-shadow(0 0 22px rgba(168, 85, 247, 0.45));
}
.palm-intro-hand {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 2;
}
@keyframes palmIntroSpin { to { transform: rotate(360deg); } }

.palm-intro-tips { list-style: none; padding: 0; margin: 6px 0 26px; display: flex; flex-direction: column; gap: 6px; }
.palm-intro-tips li { color: rgba(255,255,255,0.72); font-size: 14px; }

.palm-sticky-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
    z-index: 1200;
}
.palm-sticky-cta.is-visible { display: flex; }
.palm-sticky-cta-text { font-weight: 700; color: #1E1A08; font-size: 0.95rem; }
@media (min-width: 992px) { .palm-sticky-cta { display: none !important; } }

/* ══════════════ DETAILS BOTTOM SHEET ══════════════ */
.palm-sheet-root { position: fixed; inset: 0; z-index: 3000; visibility: hidden; }
.palm-sheet-root.is-open { visibility: visible; }
.palm-sheet-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0; transition: opacity 0.25s ease;
}
.palm-sheet-root.is-open .palm-sheet-backdrop { opacity: 1; }
.palm-sheet {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-width: 560px; margin: 0 auto;
    background: #F7F2EE;
    border-radius: 22px 22px 0 0;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.palm-sheet-root.is-open .palm-sheet { transform: translateY(0); }
.palm-sheet-grabber { width: 40px; height: 4px; border-radius: 10px; background: rgba(0,0,0,0.16); margin: 0 auto 10px; }
.palm-sheet-title { text-align: center; font-size: 18px; font-weight: 700; color: #1a1a1a; margin: 0 0 14px; }
.palm-sheet-row { display: flex; gap: 8px; }
.palm-sheet-row .palm-field { flex: 1; }
.palm-field { margin-bottom: 12px; }
.palm-field label { display: block; font-size: 11.5px; color: #555; margin-bottom: 4px; }
.palm-field input,
.palm-field select {
    width: 100%; height: 42px;
    border: none; border-radius: 10px;
    background: #fff; padding: 0 12px;
    font-size: 14px; color: #1a1a1a;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    -webkit-appearance: none; appearance: none;
}
.palm-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
.palm-chips { display: flex; gap: 8px; }
.palm-chip {
    flex: 1; padding: 10px 6px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 12px; background: #fff;
    font-size: 13.5px; font-weight: 600; color: #333;
    cursor: pointer;
}
.palm-chip.is-active { background: #E9D000; border-color: transparent; color: #111; }
.palm-sheet-continue {
    width: 100%; margin-top: 6px;
    padding: 14px; border: none; border-radius: 28px;
    background: #E9D000; color: #111;
    font-size: 16.5px; font-weight: 800; cursor: pointer;
}

/* ══════════════ FULL-SCREEN SHELL ══════════════ */
html, body.palm-fullscreen-body { height: 100%; }
body.palm-fullscreen-body { margin: 0; background: #02020F; overflow: hidden; }
.palm-fs { position: fixed; inset: 0; background: #02020F; overflow: hidden; }
.palm-fs-step { position: absolute; inset: 0; display: none; }
.palm-fs-step.is-active { display: block; }

/* ══════════════ CAMERA CAPTURE ══════════════ */
.palm-cam { position: absolute; inset: 0; background: #000; overflow: hidden; }
.palm-cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.palm-cam-center {
    position: absolute; inset: 0; z-index: 4;
    display: flex; align-items: center; justify-content: center; background: #000;
}
.palm-cam-stars {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(circle at 15% 15%, rgba(255,255,255,0.35) 1.6px, transparent 2px),
        radial-gradient(circle at 78% 22%, rgba(255,255,255,0.35) 1.6px, transparent 2px),
        radial-gradient(circle at 36% 47%, rgba(255,255,255,0.35) 1.6px, transparent 2px),
        radial-gradient(circle at 92% 58%, rgba(255,255,255,0.35) 1.6px, transparent 2px),
        radial-gradient(circle at 52% 72%, rgba(255,255,255,0.35) 1.6px, transparent 2px);
}
.palm-cam-outline {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(138vw, 560px);
    max-height: 82vh; height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1) drop-shadow(0 0 25px rgba(255,255,255,0.05));
    opacity: 0.9; pointer-events: none;
}
.palm-cam-hint {
    position: absolute; left: 50%; bottom: 17%;
    transform: translateX(-50%);
    padding: 10px 18px; max-width: 92%;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 14px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    color: #fff; font-size: 14.5px; text-align: center; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.palm-cam-shutter {
    position: absolute; left: 50%; bottom: calc(45px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: 70px; height: 70px; padding: 5px;
    border: none; border-radius: 50%;
    background: linear-gradient(135deg, #00E5D0, #7D2BFF);
    box-shadow: 0 0 22px rgba(0, 229, 208, 0.45);
    cursor: pointer;
}
.palm-cam-shutter-inner {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; border-radius: 50%; background: #000;
}
.palm-cam-shutter-inner .material-icons { color: #fff; font-size: 26px; }
.palm-cam-round {
    position: absolute; top: calc(28px + env(safe-area-inset-top));
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff; cursor: pointer; z-index: 6;
}
.palm-cam-round .material-icons { font-size: 19px; color: #fff; }
.palm-cam-back { left: 18px; }
.palm-cam-torch { right: 18px; }
.palm-cam-fallback {
    position: absolute; inset: 0; z-index: 7;
    display: none; flex-direction: column; gap: 16px;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,0.85); color: #fff; text-align: center; padding: 24px;
}

/* infer loader */
.palm-infer-loader {
    position: fixed; inset: 0; z-index: 3500;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.75);
}
.palm-infer-loader .processing-spinner { border-top-color: #fff; }

/* ══════════════ PROCESSING (full screen) ══════════════ */
.palm-fs .palm-processing-host {
    position: absolute; inset: 0;
    min-height: 0; max-height: none; height: 100%;
    border-radius: 0; background: #000;
}
.palm-fs .palm-processing-canvas { min-height: 0; height: 100%; }
.palm-proc-back { left: 10px; top: calc(10px + env(safe-area-inset-top)); background: rgba(0,0,0,0.35); border: none; z-index: 20; }

/* ══════════════ RESULT ══════════════ */
.palm-result-scroll {
    position: absolute; inset: 0; z-index: 1;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: #02020F;
    padding-bottom: 60px;
}
.palm-result-scroll.is-locked { overflow: hidden; }
.palm-result-back {
    position: absolute; left: 10px; top: calc(10px + env(safe-area-inset-top));
    background: rgba(0,0,0,0.4); border: none; z-index: 30;
}
.palm-done-actions {
    text-align: center; padding: 8px 16px 40px;
    display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.palm-done-secondary { color: #C4B5FD; text-decoration: none; font-weight: 600; }

/* ══════════════ MAJOR LOCK OVERLAY ══════════════ */
.palm-major-lock { position: absolute; inset: 0; z-index: 5; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pml-scrim {
    position: absolute; inset: 0;
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    background: linear-gradient(180deg, rgba(2,2,15,0.08), rgba(2,2,15,0.28) 30%, rgba(18,8,40,0.55) 62%, rgba(2,2,15,0.78));
}
.pml-card {
    position: relative;
    max-width: 460px; margin: 0 auto;
    top: calc(14px + env(safe-area-inset-top));
    padding: 18px;
    background: rgba(13,16,32,0.85);
    border: 1px solid rgba(232,201,122,0.38);
    border-radius: 24px;
    box-shadow: 0 0 32px 2px rgba(232,201,122,0.12);
    text-align: center;
    margin-bottom: 40px;
}
.pml-ready {
    display: inline-block; padding: 6px 12px;
    background: rgba(134,239,172,0.12);
    border: 1px solid rgba(134,239,172,0.35);
    border-radius: 20px;
    color: rgba(134,239,172,0.95); font-size: 11px; font-weight: 800;
}
.pml-title {
    margin-top: 12px; font-size: 26px; font-weight: 700; line-height: 1.05;
    background: linear-gradient(90deg, #FDE68A, #E8C97A, #F472B6);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pml-teaser { margin-top: 8px; color: rgba(240,234,255,0.92); font-size: 13.5px; line-height: 1.45; font-weight: 500; }
.pml-showcase { display: flex; gap: 12px; margin-top: 14px; text-align: left; }
.pml-hero {
    width: 118px; height: 154px; flex-shrink: 0; border-radius: 20px; overflow: hidden;
    border: 1px solid rgba(232,201,122,0.35);
    box-shadow: 0 0 24px -4px rgba(168,85,247,0.4);
}
.pml-hero img { width: 100%; height: 100%; object-fit: cover; }
.pml-lines { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.pml-lines-badge {
    padding: 4px 8px; border-radius: 10px; text-align: center;
    background: rgba(232,201,122,0.1); border: 1px solid rgba(232,201,122,0.28);
    color: rgba(253,230,138,0.95); font-size: 9px; font-weight: 800; margin-bottom: 2px;
}
.pml-line-row {
    display: flex; align-items: center; gap: 6px; flex: 1;
    padding: 0 6px; border-radius: 10px;
    background: rgba(2,2,15,0.42);
    border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
    min-height: 26px;
}
.pml-line-bar { width: 3px; height: 14px; border-radius: 2px; background: var(--c); }
.pml-line-txt { flex: 1; font-size: 9px; font-weight: 700; color: rgba(240,234,255,0.92); }
.pml-line-ok { font-size: 11px; color: rgba(134,239,172,0.95); }
.pml-line-lock { font-size: 9px; }
.pml-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.pml-chip {
    padding: 10px; border-radius: 20px;
    background: rgba(2,2,15,0.45); border: 1px solid rgba(232,201,122,0.34);
    color: rgba(240,234,255,0.92); font-size: 10px; font-weight: 700; text-align: center;
}

/* ══════════════ UNLOCK CTA (FOMO bar) ══════════════ */
.palm-unlock-cta-host { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; }
.puc {
    max-width: 560px; margin: 0 auto;
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(59,18,88,0.98), #02020F);
    border-top: 0.8px solid rgba(232,201,122,0.45);
    box-shadow: 0 -4px 16px rgba(232,201,122,0.1);
    color: #F0EAFF;
}
.puc.is-urgent { border-top-color: rgba(239,68,68,0.55); box-shadow: 0 -4px 16px rgba(239,68,68,0.1); }
.puc-activity {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px; border-radius: 10px;
    background: rgba(134,239,172,0.08); border: 1px solid rgba(134,239,172,0.25);
}
.puc-dot { width: 6px; height: 6px; border-radius: 50%; background: #86EFAC; animation: pucBlink 0.7s ease-in-out infinite alternate; }
@keyframes pucBlink { to { opacity: 0.2; } }
.puc-activity-msg { flex: 1; font-size: 10px; font-weight: 600; color: rgba(134,239,172,0.95); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.puc-head { text-align: center; margin-top: 6px; font-size: 14.5px; font-weight: 900; color: #F0EAFF; }
.puc.is-urgent .puc-head { color: #FCA5A5; }
.puc-sub { text-align: center; margin-top: 3px; font-size: 10.5px; color: rgba(138,143,168,0.98); }
.puc-rating { text-align: center; margin-top: 5px; font-size: 9.5px; font-weight: 800; color: rgba(253,230,138,0.92); }
.puc-testi-slot { margin-top: 6px; }
.puc-testi {
    display: flex; gap: 8px; padding: 8px;
    background: rgba(2,2,15,0.45); border: 1px solid #1E2035; border-radius: 12px;
}
.puc-testi-avatar {
    width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(168,85,247,0.55), rgba(232,201,122,0.35));
    color: #F0EAFF; font-size: 9px; font-weight: 900;
}
.puc-testi-body { flex: 1; min-width: 0; }
.puc-testi-top { display: flex; justify-content: space-between; align-items: center; }
.puc-testi-top b { font-size: 11px; font-weight: 800; color: #F0EAFF; }
.puc-stars { color: #E8C97A; font-size: 9px; }
.puc-testi-city { font-size: 9px; color: rgba(138,143,168,0.95); font-weight: 600; }
.puc-testi-quote { font-size: 10.5px; font-style: italic; color: rgba(240,234,255,0.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.puc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 6px; }
.puc-chip { display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 900; }
.puc-chip .material-icons { font-size: 11px; }
.puc-chip-timer { color: #E8C97A; background: rgba(232,201,122,0.12); border: 1px solid rgba(232,201,122,0.45); }
.puc.is-urgent .puc-chip-timer { color: #EF4444; background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.45); }
.puc-chip-slots { color: rgba(249,168,212,0.95); background: rgba(249,168,212,0.1); border: 1px solid rgba(249,168,212,0.35); }
.puc-chip-save { color: #FCD34D; background: rgba(252,211,77,0.12); border: 1px solid rgba(252,211,77,0.4); }
.puc-trust { text-align: center; margin-top: 5px; font-size: 9px; font-weight: 600; color: rgba(138,143,168,0.92); }
.puc-btn-wrap { position: relative; margin-top: 8px; }
.puc-btn {
    display: flex; align-items: center; gap: 5px; width: 100%;
    padding: 16px; border: none; border-radius: 28px; cursor: pointer;
    background: linear-gradient(90deg, #FDE68A, #E8C97A, #B8860B);
    box-shadow: 0 4px 16px rgba(232,201,122,0.4);
    animation: pucPulse 1.2s ease-in-out infinite alternate;
}
@keyframes pucPulse { to { transform: scale(0.985); } }
.puc.is-urgent .puc-btn { background: linear-gradient(90deg, #EF4444, #DC2626); box-shadow: 0 4px 16px rgba(239,68,68,0.4); }
.puc-btn-label { flex: 1; text-align: left; color: #02020F; font-size: 14.5px; font-weight: 900; }
.puc-btn-mrp { color: rgba(2,2,15,0.42); font-size: 11px; font-weight: 600; text-decoration: line-through; }
.puc-btn-price { color: #02020F; font-size: 15px; font-weight: 900; }
.puc-btn-off { padding: 2px 4px; border-radius: 5px; background: rgba(22,163,74,0.92); color: #fff; font-size: 7.5px; font-weight: 900; }
.puc-badge {
    position: absolute; top: -7px; right: 4px;
    padding: 2px 7px; border-radius: 8px;
    background: linear-gradient(90deg, #1A0F2E, #3D1F5C);
    border: 1px solid rgba(232,201,122,0.7);
    color: #FDE68A; font-size: 7px; font-weight: 900; letter-spacing: 0.6px;
}
.puc.is-urgent .puc-badge { background: linear-gradient(90deg, #B91C1C, #EF4444); border-color: #FCA5A5; color: #fff; }
.puc-upi { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 6px; background: rgba(240,234,255,0.92); border-radius: 24px; padding: 4px 10px; width: fit-content; margin-left: auto; margin-right: auto; }
.puc-upi img { height: 14px; }
.puc-count { text-align: center; margin-top: 4px; font-size: 9px; font-weight: 600; color: rgba(240,234,255,0.72); }

/* keep celestial report clear of the fixed CTA when locked */
.palm-result-scroll.is-locked .palm-celestial { margin-bottom: 0; }
.palm-fs .palm-celestial { margin-top: 0; margin-bottom: 24px; }