/* =============================================================
   onboarding.css
   This file styles:
   1. The first-visit welcome tour (onboarding overlay + cards)
   2. The sign-in / auth prompt popup
   3. The trust strip on the homepage (three reassurance cards)
   4. Page intro panels on inner pages
   Each section is labeled so non-coders can find things quickly.
   ============================================================= */

/* ---------------------------------------------------------------
   SECTION: HOME TRUST STRIP
   Three cards near the top of the homepage that quickly tell
   visitors what makes Rate The Plate trustworthy.
--------------------------------------------------------------- */






/* ---------------------------------------------------------------
   SECTION: SHARED BUTTON STYLES
   Used by the onboarding tour, the auth prompt, and other
   call-to-action areas throughout the site.
--------------------------------------------------------------- */
.rtp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 24px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 0.95rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    letter-spacing: 0.01em;
}

/* Primary: filled teal-to-blue gradient button */
.rtp-btn-primary {
    background: linear-gradient(135deg, #0f766e 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.28);
}

.rtp-btn-primary:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.2);
}

/* Ghost: subtle transparent button for secondary actions */
.rtp-btn-ghost {
    background: rgba(15, 23, 42, 0.07);
    color: #334155;
    box-shadow: none;
}

.rtp-btn-ghost:hover {
    background: rgba(15, 23, 42, 0.12);
    color: #111827;
}


/* ---------------------------------------------------------------
   SECTION: AUTH PROMPT POPUP
   This popup appears when a visitor tries to do something that
   requires being signed in (like leaving a review). It slides in
   over a blurred backdrop and asks them to sign in or register.
--------------------------------------------------------------- */
.rtp-auth-prompt {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 24px;
    /* dark translucent backdrop behind the card */
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(10px);
    animation: rtp-fade-in 0.25s ease;
}

.rtp-auth-prompt-card {
    width: min(100%, 420px);
    padding: 36px 32px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.24);
    text-align: center;
    animation: rtp-slide-up 0.3s ease;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

/* Small uppercase label above the headline (e.g. "Join the community") */
.rtp-auth-prompt-kicker {
    margin: 0 0 10px;
    color: #0f766e;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.rtp-auth-prompt-card h2 {
    margin: 0 0 22px;
    color: #111827;
    font-size: 1.3rem;
    line-height: 1.35;
}

.rtp-auth-prompt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}


/* ---------------------------------------------------------------
   SECTION: ONBOARDING TOUR
   A 3-step welcome modal shown once per browser on the homepage.
   It explains what Rate The Plate is and how to get started.
   After the user completes or skips it, it never shows again.
--------------------------------------------------------------- */

/* Prevent the page from scrolling while the tour is open */
body.onboarding-open {
    overflow: hidden;
}

/* Full-screen backdrop behind the onboarding card */
.onboarding-overlay {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(12px);
    animation: rtp-fade-in 0.3s ease;
}

/* The white card that contains the tour steps */
.onboarding-card {
    position: relative;
    width: min(100%, 480px);
    padding: 44px 36px 34px;
    border-radius: 24px;
    /* subtle gradient background so it doesn't look flat */
    background: #ffffff;
    /* decorative top accent bar */
    border-top: 4px solid transparent;
    background-clip: padding-box;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.06),
        0 40px 100px rgba(15, 23, 42, 0.28),
        0 8px 24px rgba(15, 23, 42, 0.1);
    text-align: center;
    animation: rtp-slide-up 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

/* Rainbow top accent stripe on the card */
.onboarding-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0f766e, #2563eb, #7c3aed);
    border-radius: 24px 24px 0 0;
}

/* "Skip tour" button in the top-right corner */
.onboarding-skip {
    position: absolute;
    top: 16px;
    right: 18px;
    border: 0;
    background: transparent;
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: color 0.15s ease, background 0.15s ease;
}

.onboarding-skip:hover {
    color: #0f766e;
    background: rgba(15, 118, 110, 0.08);
}

/* Step progress dots at the top of the card (● ○ ○) */
.onboarding-progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

/* Individual inactive step dot */
.onboarding-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    transition: width 0.25s ease, background 0.25s ease;
}

/* Active step: wider pill shape with gradient color */
.onboarding-dot.active {
    width: 28px;
    background: linear-gradient(90deg, #0f766e, #2563eb);
}

/* Big emoji/icon above each step title */
.onboarding-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    /* subtle animated pulse so it draws the eye */
    animation: rtp-icon-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    display: block;
}

/* Small uppercase label above the step title (e.g. "WELCOME") */
.onboarding-kicker {
    margin: 0 0 6px;
    color: #0f766e;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Main heading for each step */
.onboarding-card h2 {
    margin: 0 0 14px;
    color: #111827;
    font-size: 1.6rem;
    line-height: 1.2;
    font-weight: 800;
}

/* Description text below the heading */
.onboarding-body {
    margin: 0 0 28px;
    color: #64748b;
    font-size: 1rem;
    line-height: 1.65;
}

/* Row of buttons (Back + Continue/Start exploring) */
.onboarding-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Hide the "Back" button on the first step (JS uses hidden attribute) */
.onboarding-actions [hidden] {
    display: none !important;
}


/* ---------------------------------------------------------------
   SECTION: PAGE INTRO PANELS
   These are the explanatory boxes at the top of inner pages
   (like Explore, Compare, etc.) that briefly explain the page.
--------------------------------------------------------------- */
.page-intro-panel {
    margin-top: 28px;
    padding: 28px 30px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(14px);
}

.page-intro-panel .inner-page-title {
    margin-bottom: 10px;
}

.page-intro-panel p {
    max-width: 640px;
    margin: 0;
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.6;
}

.page-intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}


/* ---------------------------------------------------------------
   SECTION: KEYFRAME ANIMATIONS
   These are reusable animations used by the popups above.
--------------------------------------------------------------- */

/* Gentle fade from transparent to fully visible */
@keyframes rtp-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Slide upward while fading in - used for popup cards */
@keyframes rtp-slide-up {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.97);
    }

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

/* Quick pop for the step icon emoji */
@keyframes rtp-icon-pop {
    from {
        opacity: 0;
        transform: scale(0.6);
    }

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


/* ---------------------------------------------------------------
   SECTION: DARK MODE
   When the user turns on dark mode, these rules swap light
   backgrounds for dark ones throughout this file.
--------------------------------------------------------------- */

body.dark-mode .home-trust-strip {
    background: rgba(15, 23, 42, 0.5);
    border-bottom-color: rgba(148, 163, 184, 0.15);
}

body.dark-mode .rtp-btn-ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

body.dark-mode .rtp-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.14);
}

body.dark-mode .rtp-auth-prompt-card,
body.dark-mode .onboarding-card,
body.dark-mode .page-intro-panel {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.15);
}

body.dark-mode .onboarding-card h2,
body.dark-mode .rtp-auth-prompt-card h2 {
    color: #f8fafc;
}

body.dark-mode .onboarding-body,
body.dark-mode .page-intro-panel p {
    color: #94a3b8;
}

body.dark-mode .onboarding-kicker,
body.dark-mode .rtp-auth-prompt-kicker {
    color: #34d399;
}

body.dark-mode .onboarding-dot {
    background: rgba(148, 163, 184, 0.3);
}

body.dark-mode .onboarding-skip {
    color: #64748b;
}

body.dark-mode .onboarding-skip:hover {
    color: #34d399;
    background: rgba(52, 211, 153, 0.1);
}