/* B2C traveler onboarding — preference quiz, curated feed, inspiration board, guided tour.
   Zero inline styles in the components; everything is driven from --antologa-* tokens.
   Mustard (--antologa-contrast) is intentionally NOT used prominently: the reward/loyalty
   system it signals is deferred to Phase 2. */

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes tp-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes tp-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Preference quiz (Screen 1) ──────────────────────────────────────────── */
.tp-quiz {
    max-width: 720px;
    margin: 0 auto;
    animation: tp-fade-up var(--timing-standard) var(--ease-bounce) both;
}
.tp-quiz-head { text-align: center; margin-bottom: 1.5rem; }
.tp-quiz-title {
    font-family: Georgia, serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--antologa-secondary);
}
.tp-quiz-sub {
    color: var(--antologa-gray-mid);
    font-size: 0.95rem;
    margin-top: 0.25rem;
}
.tp-quiz-progress {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}
.tp-quiz-dot {
    width: 32px;
    height: 4px;
    border-radius: 2px;
    background: var(--antologa-border);
    transition: background var(--timing-quick) var(--ease-standard);
}
.tp-quiz-dot--on { background: var(--antologa-primary); }

.tp-quiz-card {
    background: var(--antologa-pure-white);
    border: 1px solid var(--antologa-border);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}
.tp-quiz-q {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--antologa-dark);
    margin-bottom: 1.25rem;
    text-align: center;
}
.tp-quiz-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}
.tp-quiz-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border: 2px solid var(--antologa-border);
    border-radius: 12px;
    background: var(--antologa-surface-cool);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--antologa-dark);
    transition: border-color var(--timing-quick) var(--ease-standard),
                background   var(--timing-quick) var(--ease-standard),
                transform    var(--timing-micro) var(--ease-standard);
}
.tp-quiz-option:hover { border-color: var(--antologa-primary-tint); transform: translateY(-1px); }
.tp-quiz-option--selected {
    border-color: var(--antologa-primary);
    background: var(--antologa-primary-tint-50);
}
.tp-quiz-option-icon { font-size: 1.4rem; line-height: 1; }
.tp-quiz-option-label { font-size: 0.92rem; font-weight: 600; }

.tp-quiz-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
}
.tp-quiz-nav-right { display: flex; align-items: center; gap: 0.5rem; }

/* ── Curated welcome feed (Screen 2) ─────────────────────────────────────── */
.tp-feed { animation: tp-fade-in var(--timing-standard) var(--ease-standard) both; }
.tp-feed-head { margin-bottom: 1.25rem; }
.tp-feed-title {
    font-family: Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--antologa-secondary);
    line-height: 1.3;
}
.tp-feed-sub { color: var(--antologa-gray-mid); font-size: 0.95rem; margin-top: 0.2rem; }

.tp-feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}
.tp-feed-skel-card { border-radius: 14px; }
.tp-feed-loading-copy {
    text-align: center;
    color: var(--antologa-primary);
    font-weight: 600;
    margin-top: 1rem;
}

.tp-feed-card {
    border: 1px solid var(--antologa-border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--antologa-pure-white);
    cursor: pointer;
    transition: transform var(--timing-quick) var(--ease-bounce),
                box-shadow var(--timing-quick) var(--ease-standard);
    animation: tp-fade-up var(--timing-standard) var(--ease-bounce) both;
}
.tp-feed-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10); }
/* Entrance stagger — favorites cascade in rather than snapping at once. */
.tp-feed-card:nth-child(1) { animation-delay: 0.05s; }
.tp-feed-card:nth-child(2) { animation-delay: 0.12s; }
.tp-feed-card:nth-child(3) { animation-delay: 0.19s; }
.tp-feed-card:nth-child(4) { animation-delay: 0.26s; }
.tp-feed-card:nth-child(5) { animation-delay: 0.33s; }

.tp-feed-card-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.tp-feed-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-feed-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--antologa-surface-cool3);
    color: var(--antologa-slate-400);
}
.tp-feed-img--placeholder .mud-icon-root { font-size: 2.5rem; }
.tp-feed-card-type {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(7, 130, 130, 0.92);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}
.tp-feed-card-body { padding: 0.75rem 0.85rem 0.9rem; }
.tp-feed-card-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--antologa-dark);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tp-feed-card-loc {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--antologa-gray);
    margin-top: 0.25rem;
}
.tp-feed-card-loc .mud-icon-root { font-size: 0.9rem; }
.tp-feed-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.6rem;
}
.tp-feed-card-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--antologa-dark);
}
.tp-feed-card-rating .mud-icon-root { font-size: 0.95rem; color: var(--antologa-contrast); }
.tp-feed-card-rating--new { color: var(--antologa-primary); font-size: 0.78rem; }
.tp-feed-card-reviews { color: var(--antologa-gray); font-weight: 500; }
.tp-feed-card-price { font-weight: 700; font-size: 0.85rem; color: var(--antologa-primary); }

.tp-feed-empty-icon { font-size: 3rem; color: var(--antologa-light-gray); }
.tp-feed-empty-copy { color: var(--antologa-gray); text-align: center; max-width: 360px; }
.tp-feed-more { display: flex; justify-content: center; margin-top: 1.25rem; }

.tp-section-divider { margin: 2rem 0 1.5rem; }

/* ── Inspiration board (Screen 3) ────────────────────────────────────────── */
.tp-inspo {
    margin-top: 1rem;
    border: 1px solid var(--antologa-border-warm);
    border-radius: 16px;
    padding: 1.5rem;
    background: var(--antologa-surface-warm);
    animation: tp-fade-up var(--timing-standard) var(--ease-bounce) both;
}
.tp-inspo-head { margin-bottom: 1rem; }
.tp-inspo-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--antologa-primary);
}
.tp-inspo-title {
    font-family: Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--antologa-secondary);
    margin-top: 0.2rem;
}
.tp-inspo-sub { color: var(--antologa-gray-mid); font-size: 0.9rem; margin-top: 0.15rem; }
.tp-inspo-days { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.1rem; }
.tp-inspo-day {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    background: var(--antologa-pure-white);
    border: 1px solid var(--antologa-border);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
}
.tp-inspo-day-num {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--antologa-primary);
    border-radius: 6px;
    padding: 4px 8px;
    margin-top: 2px;
}
.tp-inspo-day-title { font-weight: 700; font-size: 0.92rem; color: var(--antologa-dark); }
.tp-inspo-day-detail { color: var(--antologa-gray-mid); font-size: 0.85rem; line-height: 1.5; }

/* ── Guided tour (spec §6) ───────────────────────────────────────────────── */
.tp-tour-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(40, 40, 40, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1400;
    padding: 1rem;
    animation: tp-fade-in var(--timing-micro) ease-in both;
}
.tp-tour-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--antologa-pure-white);
    border-radius: 16px;
    padding: 1.75rem 1.5rem 1.25rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    animation: tp-fade-up var(--timing-quick) var(--ease-bounce) both;
}
.tp-tour-close { position: absolute; top: 8px; right: 8px; }
.tp-tour-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--antologa-primary);
    background: var(--antologa-primary-tint-50);
    border-radius: 6px;
    padding: 3px 8px;
    margin-bottom: 0.6rem;
}
.tp-tour-title {
    font-family: Georgia, serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--antologa-secondary);
}
.tp-tour-body { color: var(--antologa-gray-mid); font-size: 0.92rem; line-height: 1.6; margin-top: 0.4rem; }
.tp-tour-dots { display: flex; gap: 0.4rem; margin: 1rem 0 0.5rem; }
.tp-tour-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--antologa-border); }
.tp-tour-dot--on { background: var(--antologa-primary); }
.tp-tour-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; }
.tp-tour-nav-right { display: flex; align-items: center; gap: 0.4rem; }

.tp-tour-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1300;
    animation: tp-fade-in var(--timing-standard) ease-in both;
}