/* ==========================================================================
   SONAI Love Landing Page (v1.2.1)
   Subject: Vietnamese love/marriage/family counseling
   Signature: Live chat preview in hero
   ========================================================================== */

/* ==========================================================================
   Hide theme header/footer/title when landing shortcode is on page.
   Targets Astra (the user's current theme) + common WP themes.
   ========================================================================== */
body.sonai-love-landing-page header[role="banner"],
body.sonai-love-landing-page #masthead,
body.sonai-love-landing-page .site-header,
body.sonai-love-landing-page .ast-above-header,
body.sonai-love-landing-page .ast-below-header,
body.sonai-love-landing-page .main-header-bar-wrap,
body.sonai-love-landing-page footer[role="contentinfo"],
body.sonai-love-landing-page #colophon,
body.sonai-love-landing-page .site-footer,
body.sonai-love-landing-page .ast-footer-overlay,
body.sonai-love-landing-page .footer-sml-layout-1,
body.sonai-love-landing-page .ast-small-footer,
body.sonai-love-landing-page .entry-header,
body.sonai-love-landing-page .page-header,
body.sonai-love-landing-page .entry-title,
body.sonai-love-landing-page .post-title,
body.sonai-love-landing-page .ast-breadcrumbs-wrapper,
body.sonai-love-landing-page .breadcrumbs,
body.sonai-love-landing-page .ast-archive-description,
body.sonai-love-landing-page .entry-meta,
body.sonai-love-landing-page .post-thumbnail {
    display: none !important;
}

/* Stretch content to full width — landing has its own sections */
body.sonai-love-landing-page .site,
body.sonai-love-landing-page #page,
body.sonai-love-landing-page .site-content,
body.sonai-love-landing-page #content,
body.sonai-love-landing-page #primary,
body.sonai-love-landing-page .content-area,
body.sonai-love-landing-page .ast-container,
body.sonai-love-landing-page .ast-article-single,
body.sonai-love-landing-page .ast-article-post,
body.sonai-love-landing-page .entry-content,
body.sonai-love-landing-page article.post,
body.sonai-love-landing-page article.page {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.sonai-love-landing-page {
    margin: 0 !important;
    padding: 24px 0 !important;
    background: #fff;
}

/* On mobile keep some breathing room but smaller */
@media (max-width: 560px) {
    body.sonai-love-landing-page {
        padding: 16px 0 !important;
    }
}

/* Remove default <p> margins inside Astra entry content that wrap our shortcode */
body.sonai-love-landing-page .entry-content > p:empty {
    display: none;
}

.slp-root {
    /* Palette */
    --slp-pink:       #d63384;
    --slp-pink-dark:  #7c2d52;
    --slp-pink-light: #fdf2f8;
    --slp-coral:      #fb7185;
    --slp-plum:       #1f1023;
    --slp-text:       #2b1e2a;
    --slp-muted:      #6b5566;
    --slp-cream:      #fefaf6;
    --slp-border:     #ecd6e3;

    --slp-display: 'Playfair Display', 'Georgia', serif;
    --slp-body:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    font-family: var(--slp-body);
    color: var(--slp-text);
    line-height: 1.6;
    font-size: 16px;
    margin: 0;
}

/* Reset some theme inheritance to keep landing consistent */
.slp-root * { box-sizing: border-box; }
.slp-root h1, .slp-root h2, .slp-root h3, .slp-root h4 {
    font-family: var(--slp-display);
    color: var(--slp-plum);
    margin: 0 0 0.5em;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.slp-root p { margin: 0 0 0.8em; }
.slp-root img { max-width: 100%; height: auto; }

.slp-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============== Common typography ============== */
.slp-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    margin-bottom: 16px;
}
.slp-eyebrow-dark {
    color: var(--slp-pink);
}

.slp-h1 {
    font-size: clamp(36px, 5.5vw, 64px);
    font-weight: 900;
    color: #fff;
}
.slp-h1 em {
    font-style: italic;
    font-weight: 700;
    color: #ffd6e7;
}
.slp-h2 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
}
.slp-lead {
    font-size: clamp(17px, 1.5vw, 20px);
    color: rgba(255,255,255,0.92);
    max-width: 520px;
    margin: 0 0 28px;
}

/* ============== Buttons ============== */
.slp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    font-family: var(--slp-body);
    font-size: 15px;
    font-weight: 600;
    border: 2px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    line-height: 1;
}
.slp-btn-primary {
    background: linear-gradient(135deg, #ff4d94 0%, #d63384 55%, #b32a6a 100%);
    color: #fff !important;
    box-shadow:
        0 10px 30px -8px rgba(214,51,132,0.55),
        0 0 0 0 rgba(255,77,148,0.45),
        inset 0 1px 0 rgba(255,255,255,0.25);
    position: relative;
    overflow: hidden;
}
.slp-btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 40%);
    pointer-events: none;
}
.slp-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 16px 40px -8px rgba(214,51,132,0.75),
        0 0 0 4px rgba(255,77,148,0.18),
        inset 0 1px 0 rgba(255,255,255,0.3);
}
.slp-btn-ghost {
    background: transparent;
    color: #fff !important;
    border-color: rgba(255,255,255,0.4);
}
.slp-btn-ghost:hover {
    background: rgba(255,255,255,0.1);
    border-color: #fff;
}
.slp-btn-large {
    padding: 18px 36px;
    font-size: 17px;
    animation: slp-btn-pulse 2.6s ease-in-out infinite;
}
.slp-btn-large:hover { animation: none; }

@keyframes slp-btn-pulse {
    0%, 100% {
        box-shadow:
            0 10px 30px -8px rgba(214,51,132,0.55),
            0 0 0 0 rgba(255,77,148,0.5),
            inset 0 1px 0 rgba(255,255,255,0.25);
    }
    50% {
        box-shadow:
            0 10px 30px -8px rgba(214,51,132,0.55),
            0 0 0 14px rgba(255,77,148,0),
            inset 0 1px 0 rgba(255,255,255,0.25);
    }
}
.slp-btn-icon { font-size: 1.1em; }

/* ============== Sections base ============== */
.slp-section {
    padding: clamp(60px, 8vw, 110px) 0;
}
.slp-section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}
.slp-section-head .slp-eyebrow { color: var(--slp-pink); }

/* ============== HERO ============== */
.slp-hero {
    position: relative;
    background: linear-gradient(135deg, #4a1538 0%, #7c2d52 35%, #d63384 100%);
    overflow: hidden;
    padding: clamp(70px, 9vw, 130px) 0;
    color: #fff;
}
.slp-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,182,217,0.25), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(251,113,133,0.2), transparent 50%);
    pointer-events: none;
}
.slp-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
}
.slp-hero-left { z-index: 2; }
.slp-hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.slp-free-tag {
    background: rgba(255,255,255,0.2);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 4px;
}
.slp-trust-row {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
}

/* Chat preview - the signature element */
.slp-chat-preview {
    background: rgba(255,255,255,0.97);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.4);
    transform: rotate(1deg);
    color: var(--slp-text);
    max-width: 420px;
    margin-left: auto;
}
.slp-chat-prev-header {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--slp-border);
    margin-bottom: 12px;
}
.slp-chat-prev-avatar {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--slp-pink), var(--slp-pink-dark));
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}
.slp-chat-prev-avatar-photo {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    text-indent: -9999px;
    color: transparent;
}
.slp-chat-prev-name { font-weight: 700; font-size: 14px; }
.slp-chat-prev-status {
    font-size: 12px;
    color: var(--slp-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}
.slp-dot {
    width: 7px; height: 7px;
    background: #22c55e;
    border-radius: 50%;
    display: inline-block;
    animation: slp-pulse 1.8s infinite;
}
@keyframes slp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.slp-chat-prev-msgs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.slp-chat-prev-msg {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    max-width: 85%;
    line-height: 1.45;
}
.slp-chat-prev-user {
    background: var(--slp-pink);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.slp-chat-prev-bot {
    background: var(--slp-pink-light);
    color: var(--slp-text);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}
.slp-typing-bubble {
    display: inline-flex;
    gap: 4px;
    padding: 14px 16px;
    width: fit-content;
}
.slp-typing-bubble span {
    width: 7px; height: 7px;
    background: var(--slp-muted);
    border-radius: 50%;
    animation: slp-bounce 1.2s infinite ease-in-out;
}
.slp-typing-bubble span:nth-child(2) { animation-delay: 0.15s; }
.slp-typing-bubble span:nth-child(3) { animation-delay: 0.3s; }
@keyframes slp-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ============== HOW IT WORKS ============== */
.slp-how { background: var(--slp-cream); }
.slp-how-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.slp-how-steps li {
    background: #fff;
    padding: 36px 28px;
    border-radius: 18px;
    box-shadow: 0 4px 20px -8px rgba(124,45,82,0.15);
    position: relative;
}
.slp-step-num {
    display: inline-block;
    font-family: var(--slp-display);
    font-size: 48px;
    font-weight: 700;
    color: var(--slp-pink);
    line-height: 1;
    opacity: 0.6;
    margin-bottom: 12px;
}
.slp-how-steps h3 {
    font-size: 22px;
    margin-bottom: 10px;
}
.slp-how-steps p {
    color: var(--slp-muted);
    margin: 0;
}

/* ============== TOPICS ============== */
.slp-topics { background: #fff; }
.slp-topics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.slp-topic-card {
    padding: 28px 20px;
    background: var(--slp-pink-light);
    border-radius: 14px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.slp-topic-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px -10px rgba(214,51,132,0.25);
}
.slp-topic-icon {
    font-size: 32px;
    display: block;
    margin-bottom: 10px;
}
.slp-topic-card h4 {
    font-size: 16px;
    margin-bottom: 4px;
    font-family: var(--slp-body);
    font-weight: 700;
}
.slp-topic-card p {
    font-size: 13px;
    color: var(--slp-muted);
    margin: 0;
}

/* ============== EXPERT SPOTLIGHT ============== */
.slp-expert {
    background: linear-gradient(135deg, #fdf2f8 0%, #fff 50%, #fef0f7 100%);
}
.slp-expert-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 60px;
    align-items: center;
}
.slp-expert-photo-wrap {
    position: relative;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}
.slp-expert-photo-frame {
    aspect-ratio: 3 / 4;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(124,45,82,0.35),
                0 8px 16px -8px rgba(0,0,0,0.15);
    position: relative;
    background: #1a0e16;
}
.slp-expert-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.6s ease;
}
.slp-expert-photo-frame:hover .slp-expert-photo {
    transform: scale(1.02);
}
.slp-expert-photo-fallback {
    background: linear-gradient(135deg, var(--slp-pink), var(--slp-pink-dark));
    color: #fff;
    font-family: var(--slp-display);
    font-size: 140px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
}
/* Tagline below photo - matches the gold/beige plaque in the photo */
.slp-expert-tagline {
    margin-top: 18px;
    background: linear-gradient(135deg, #d4a574 0%, #b8895a 100%);
    color: #2a1a0e;
    padding: 12px 20px;
    border-radius: 10px;
    text-align: center;
    font-family: var(--slp-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.06em;
    box-shadow: 0 8px 20px -8px rgba(184, 137, 90, 0.4),
                inset 0 1px 0 rgba(255,255,255,0.3);
    text-transform: uppercase;
}
.slp-tagline-sep {
    color: rgba(42,26,14,0.5);
    margin: 0 4px;
}
.slp-expert-title-line {
    font-size: 17px;
    color: var(--slp-pink);
    font-weight: 600;
    margin-bottom: 16px;
}
.slp-expert-bio {
    font-size: 16px;
    color: var(--slp-text);
    max-width: 600px;
    margin-bottom: 20px;
}
.slp-expert-creds {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}
.slp-expert-creds li {
    position: relative;
    padding: 6px 0 6px 28px;
    font-size: 15px;
}
.slp-expert-creds li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #16a34a;
    font-weight: 700;
}
.slp-expert-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.slp-expert-actions .slp-btn-ghost {
    color: var(--slp-plum) !important;
    border-color: var(--slp-plum);
}
.slp-expert-actions .slp-btn-ghost:hover {
    background: var(--slp-plum);
    color: #fff !important;
}

/* ============== PRICING ============== */
.slp-pricing { background: var(--slp-cream); }
.slp-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}
.slp-pkg {
    background: #fff;
    border-radius: 20px;
    padding: 36px 28px;
    border: 2px solid var(--slp-border);
    position: relative;
    display: flex;
    flex-direction: column;
}
.slp-pkg-featured {
    border-color: var(--slp-pink);
    background: linear-gradient(180deg, #fff, #fdf2f8);
    transform: scale(1.04);
    box-shadow: 0 20px 50px -20px rgba(214,51,132,0.4);
}
.slp-pkg-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--slp-pink);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 999px;
    letter-spacing: 0.05em;
}
.slp-pkg-name {
    font-size: 22px;
    margin-bottom: 4px;
}
.slp-pkg-sub {
    color: var(--slp-muted);
    font-size: 14px;
    margin-bottom: 24px;
}
.slp-pkg-price {
    margin-bottom: 24px;
    color: var(--slp-pink-dark);
}
.slp-pkg-amount {
    font-family: var(--slp-display);
    font-size: 42px;
    font-weight: 700;
}
.slp-pkg-unit { font-size: 18px; margin-left: 4px; }
.slp-pkg-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    flex: 1;
}
.slp-pkg-features li {
    padding: 8px 0 8px 26px;
    position: relative;
    font-size: 14px;
}
.slp-pkg-features li::before {
    content: "♡";
    position: absolute;
    left: 0;
    color: var(--slp-pink);
    font-size: 18px;
    line-height: 1;
    top: 8px;
}
.slp-pkg-cta {
    width: 100%;
}
.slp-pricing-foot {
    text-align: center;
    font-size: 13px;
    color: var(--slp-muted);
    margin: 0;
}

/* ============== TESTIMONIALS ============== */
.slp-testimonials { background: var(--slp-plum); color: #fff; }
.slp-testimonials .slp-h2 { color: #fff; }
.slp-testimonials .slp-eyebrow { color: var(--slp-coral); }
.slp-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.slp-testimonial {
    background: rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 28px;
    margin: 0;
    border: 1px solid rgba(255,255,255,0.1);
}
.slp-quote-mark {
    font-family: var(--slp-display);
    font-size: 56px;
    line-height: 1;
    color: var(--slp-pink);
    display: block;
    margin-bottom: -10px;
}
.slp-testimonial p {
    font-size: 15px;
    color: rgba(255,255,255,0.92);
    margin-bottom: 20px;
    font-style: italic;
}
.slp-testimonial footer strong {
    display: block;
    font-style: normal;
    font-size: 14px;
    color: #fff;
}
.slp-testimonial footer span {
    font-size: 12px;
    color: var(--slp-coral);
    letter-spacing: 0.04em;
}
.slp-testimonial-note {
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin-top: 32px;
}

/* ============== FAQ ============== */
.slp-faq { background: #fff; }
.slp-faq-list {
    max-width: 760px;
    margin: 0 auto;
}
.slp-faq-item {
    border-bottom: 1px solid var(--slp-border);
    padding: 20px 0;
}
.slp-faq-item summary {
    font-family: var(--slp-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--slp-plum);
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 32px;
}
.slp-faq-item summary::-webkit-details-marker { display: none; }
.slp-faq-item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 0;
    font-size: 26px;
    color: var(--slp-pink);
    font-family: var(--slp-body);
    font-weight: 300;
    transition: transform 0.2s;
}
.slp-faq-item[open] summary::after {
    transform: rotate(45deg);
}
.slp-faq-item p {
    margin-top: 14px;
    color: var(--slp-muted);
    font-size: 15px;
}

/* ============== CRISIS BAND ============== */
.slp-crisis-band {
    background: #7f1d1d;
    color: #fff;
    padding: 28px 0;
}
.slp-crisis-content {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.slp-crisis-icon { font-size: 32px; flex-shrink: 0; }
.slp-crisis-content strong { font-size: 17px; display: block; margin-bottom: 4px; }
.slp-crisis-content p { margin: 4px 0; font-size: 14px; color: rgba(255,255,255,0.9); }
.slp-crisis-numbers {
    display: flex !important;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px !important;
}
.slp-crisis-numbers span {
    background: rgba(255,255,255,0.12);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
}

/* ============== FINAL CTA ============== */
.slp-final-cta {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255,77,148,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(214,51,132,0.10) 0%, transparent 50%),
        linear-gradient(135deg, #fff5fb 0%, #fefaf6 50%, #fdf2f8 100%);
    color: var(--slp-text);
    text-align: center;
    padding: clamp(60px, 8vw, 110px) 0;
    position: relative;
    overflow: hidden;
}
.slp-final-inner { max-width: 600px; position: relative; z-index: 1; }
.slp-final-h {
    color: var(--slp-plum) !important;
    margin-bottom: 12px;
}
.slp-final-cta p {
    color: var(--slp-muted);
    font-size: 17px;
    margin-bottom: 28px;
}
.slp-final-foot {
    font-size: 13px;
    color: var(--slp-muted);
    margin-top: 16px !important;
    opacity: 0.8;
}

/* ============== RESPONSIVE ============== */
@media (max-width: 960px) {
    .slp-hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .slp-hero-right { order: -1; }
    .slp-chat-preview { transform: none; margin: 0 auto; }
    .slp-how-steps { grid-template-columns: 1fr; }
    .slp-topics-grid { grid-template-columns: repeat(2, 1fr); }
    .slp-expert-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .slp-expert-photo-wrap { max-width: 320px; }
    .slp-expert-creds { display: inline-block; text-align: left; }
    .slp-expert-actions { justify-content: center; }
    .slp-pricing-grid { grid-template-columns: 1fr; }
    .slp-pkg-featured { transform: none; }
    .slp-testimonials-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .slp-topics-grid { grid-template-columns: 1fr; }
    .slp-hero-ctas .slp-btn { width: 100%; }
    .slp-trust-row { gap: 12px; font-size: 12px; }
    .slp-crisis-content { flex-direction: column; gap: 10px; }
}