/* ====================================================================
   wowpilot — "coral consumer app" identity.

   Loaded AFTER app.css and overrides it. app.css IS byte-identical to
   the chaogolden engine so upstream fixes merge cleanly; everything that
   makes wowpilot look like wowpilot lives here.

   Direction: coral-rose primary, warm white ground, soft pink washes,
   big radii and pill shapes, floating shadowed cards, all-sans type
   (the --font-serif token is pointed at the sans stack so every serif
   heading in the engine turns sans without touching a view).
   ==================================================================== */

:root {
    /* ----- palette ----- */
    --color-primary:        #e5484d;
    --color-primary-dark:   #c93a3f;
    --color-primary-tint:   #fbd0d2;
    --color-primary-wash:   #fff0f0;

    --color-accent:         #ffb020;
    --color-accent-dark:    #e0951a;
    --color-accent-light:   #fff3d6;

    --color-peach:          #ffe1e3;
    --color-peach-light:    #fff5f5;
    --color-cream:          #fffafa;
    --color-paper:          #fff2f2;

    --color-text:           #231a1c;
    --color-text-muted:     #6e5d61;
    --color-text-faint:     #9d8d90;

    --color-bg:             #fffafa;
    --color-surface:        #ffffff;
    --color-surface-alt:    #fff4f4;
    --color-border:         #f5e1e2;
    --color-border-strong:  #ecc9cb;

    /* "dark" sections become coral gradients — tokens keep readable text on them */
    --color-dark-bg:        #d63f45;
    --color-dark-surface:   rgba(255,255,255,0.14);
    --color-dark-text:      #ffffff;
    --color-dark-muted:     #ffe3e4;
    --color-dark-border:    rgba(255,255,255,0.28);

    --color-danger:         #b42318;
    --color-danger-bg:      #fef3f2;
    --color-danger-border:  #fecdca;
    --color-success:        #1a9c5b;
    --color-success-bg:     #e8f8ef;
    --color-success-border: #bde9d0;

    /* ----- shape ----- */
    --radius-sm:   10px;
    --radius:      16px;
    --radius-lg:   22px;
    --radius-xl:   28px;

    --shadow-sm: 0 1px 2px rgba(120, 40, 44, 0.06);
    --shadow:    0 4px 12px rgba(120, 40, 44, 0.08), 0 1px 3px rgba(120, 40, 44, 0.05);
    --shadow-md: 0 10px 24px rgba(120, 40, 44, 0.10), 0 2px 6px rgba(120, 40, 44, 0.05);
    --shadow-lg: 0 24px 48px rgba(120, 40, 44, 0.14), 0 6px 14px rgba(120, 40, 44, 0.06);

    /* ----- type: Outfit (geometric, confident) for headlines, DM Sans for text and UI — both via config web_fonts_url ----- */
    --font-display: "Outfit", "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-sans:  "DM Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: var(--font-display);
}

body { background: var(--color-bg); }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; font-weight: 800; }
a { color: var(--color-primary); }

/* ----- buttons: chunkier pills, glowing primary ----- */
.btn { font-weight: 700; padding: 12px 24px; }
.btn-lg { padding: 15px 30px; }
.btn-sm { padding: 8px 16px; }
.btn-primary { box-shadow: 0 6px 16px rgba(229, 72, 77, 0.28); }
.btn-primary:hover { box-shadow: 0 8px 20px rgba(229, 72, 77, 0.34); transform: translateY(-1px); }
.btn-secondary { background: var(--color-primary-wash); color: var(--color-primary-dark); border-color: transparent; }
.btn-secondary:hover { background: var(--color-primary-tint); }
.btn-outline, .btn-outline-dark { border-radius: 999px; }
.btn-danger { background: var(--color-danger); border-color: transparent; }
.btn-danger:hover { background: #8f1c13; }

/* ----- forms ----- */
input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="url"], input[type="number"], select, textarea {
    border-radius: 14px;
}
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px var(--color-primary-wash); border-color: var(--color-primary); }

/* ----- alerts + generic card ----- */
.alert { border-radius: var(--radius); }
.card { border-radius: var(--radius-lg); border-color: var(--color-border); box-shadow: var(--shadow-sm); }

/* ====================================================================
   Header — white, blurred, search bar in the middle, pill links
   ==================================================================== */
.nav-v2 {
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--color-border);
}
.nav-v2-inner { padding: 12px 0; gap: var(--space-4); }
.nav-v2-brand { flex-shrink: 0; }
.nav-v2-brand img { height: 34px; } /* star wordmark is wider and shorter than the old lockup */
.nav-v2-search {
    background: var(--color-surface-alt);
    border-color: transparent;
    padding: 9px 16px;
    max-width: 420px;
}
.nav-v2-search:focus-within { background: #fff; border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-wash); }
.nav-v2-search svg { color: var(--color-primary); }
.nav-v2-links { gap: 4px; }
.nav-v2-links a { border-radius: 999px; font-weight: 600; padding: 8px 14px; }
.nav-v2-links a:hover { background: var(--color-primary-wash); color: var(--color-primary-dark); }
.nav-v2-links a.is-accent {
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
    padding: 7px 16px;
}
.nav-v2-links a.is-accent:hover { background: var(--color-primary); color: #fff; }
.nav-v2-links a.is-primary { padding: 8px 18px; box-shadow: 0 4px 12px rgba(229, 72, 77, 0.28); }
.nav-v2-lang-btn { border-radius: 999px; }
.nav-v2-lang-menu { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.nav-v2-mobile-toggle { border-radius: 999px; }
@media (max-width: 900px) {
    .nav-v2-search { display: flex; flex-basis: 100%; order: 3; max-width: none; }
}

/* ====================================================================
   Hero — two columns: copy + search on the left, a floating live
   review card on the right. Falls back to one centred column on mobile.
   ==================================================================== */
.hero-v2 {
    text-align: left;
    padding: var(--space-9) 0 var(--space-9);
    background:
        radial-gradient(900px 420px at 85% 0%, #ffd9db 0%, transparent 60%),
        radial-gradient(700px 360px at 0% 100%, #fff0f0 0%, transparent 60%),
        var(--color-cream);
}
.hero-v2 .container {
    display: grid; grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-8); align-items: center;
}
.hero-v2-copy { min-width: 0; }
.hero-v2 h1 {
    margin: 0 0 var(--space-4);
    max-width: 16ch;
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.02;
}
.hero-v2 h1 em { font-style: normal; color: var(--color-primary); }
.hero-v2-lede { margin: 0 0 var(--space-6); max-width: 40rem; }
.hero-v2-search {
    margin: 0 0 var(--space-4);
    border-radius: 999px;
    border-color: transparent;
    padding: 6px 6px 6px 8px;
    box-shadow: var(--shadow-md);
    max-width: 620px;
}
.hero-v2-search:focus-within { box-shadow: 0 0 0 5px var(--color-primary-wash), var(--shadow-md); }
.hero-v2-search-inner { padding: 10px 14px; }
.hero-v2-search-inner svg { color: var(--color-primary); }
.hero-v2-search button { border-radius: 999px; padding: 0 26px; font-weight: 700; }
.hero-v2-popular { justify-content: flex-start; margin: 0 0 var(--space-5); max-width: none; }
.hero-v2-popular a { background: var(--color-surface-alt); border-color: transparent; padding: 6px 12px; font-weight: 600; color: var(--color-text-muted); }
.hero-v2-popular a:hover { background: var(--color-primary-tint); color: var(--color-primary-dark); }
.hero-v2-trust { margin-bottom: var(--space-4); }
.hero-v2-ctas { justify-content: flex-start; }

/* the floating card stack */
.hero-v2-card { position: relative; margin: 18px 12px 18px 0; }
.hero-v2-card-main {
    position: relative; z-index: 2;
    background: #fff; border-radius: var(--radius-xl);
    padding: var(--space-5); box-shadow: var(--shadow-lg);
    transform: rotate(-1.5deg);
}
.hero-v2-card-main .review-card-head { margin-bottom: var(--space-3); }
.hero-v2-card-main .review-card-title { font-size: 19px; margin-bottom: 6px; }
.hero-v2-card-main .review-card-body { -webkit-line-clamp: 3; }
.hero-v2-card-main .review-card-foot { border-top: 0; padding-top: var(--space-3); }
.hero-v2-card-ghost {
    position: absolute; z-index: 1; inset: 0;
    background: var(--color-primary-tint); border-radius: var(--radius-xl);
    transform: rotate(4deg) translate(14px, 18px);
}
.hero-v2-card-stat {
    position: absolute; z-index: 3;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-radius: 999px;
    background: #fff; box-shadow: var(--shadow-md);
    font-size: 13px; font-weight: 700; color: var(--color-text);
}
.hero-v2-card-stat strong { color: var(--color-primary); font-size: 16px; }
.hero-v2-card-stat--tl { top: -18px; left: -18px; transform: rotate(-3deg); }
.hero-v2-card-stat--br { bottom: -16px; right: -10px; transform: rotate(2deg); }
.hero-v2-rating-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--color-primary); color: #fff; font-weight: 800; font-size: 14px;
}
@media (max-width: 960px) {
    .hero-v2 { text-align: center; }
    .hero-v2 .container { grid-template-columns: 1fr; }
    .hero-v2 h1 { margin-left: auto; margin-right: auto; }
    .hero-v2-lede { margin-left: auto; margin-right: auto; }
    .hero-v2-search { margin-left: auto; margin-right: auto; }
    .hero-v2-popular, .hero-v2-ctas { justify-content: center; }
    .hero-v2-card { display: none; }
}

/* ====================================================================
   Sections, tiles, cards
   ==================================================================== */
.section-v2 { padding: var(--space-10) 0; }
.section-v2--alt { background: var(--color-surface-alt); }
.section-v2--dark {
    background: linear-gradient(135deg, #e5484d 0%, #c93a3f 60%, #b3262c 100%);
    color: #fff;
}
.section-v2-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); }
.section-v2-head-link {
    padding: 8px 16px; border-radius: 999px;
    background: var(--color-primary-wash); color: var(--color-primary-dark);
}
.section-v2-head-link:hover { background: var(--color-primary-tint); text-decoration: none; }

/* category tiles → rounded app-style pills */
.cat-grid { gap: var(--space-3); }
.cat-tile {
    border-radius: 999px; padding: 10px 18px 10px 10px;
    border-color: transparent; background: #fff; box-shadow: var(--shadow-sm);
}
.cat-tile:hover { background: #fff; border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cat-tile-icon { border-radius: 999px; width: 42px; height: 42px; background: var(--color-primary-wash); color: var(--color-primary); }
.cat-tile-name { font-weight: 700; }
.cat-tile-arrow { color: var(--color-primary); }
.cat-sub-list a { border-color: transparent; background: #fff; box-shadow: var(--shadow-sm); font-weight: 600; }
.cat-sub-list a:hover { background: var(--color-primary-wash); }
.cat-sub-group h3 a { color: var(--color-primary-dark); }

/* business cards */
.biz-card {
    border-radius: var(--radius-lg); border-color: transparent;
    box-shadow: var(--shadow); padding: var(--space-5);
}
.biz-card:hover { border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.biz-card-logo { border-radius: 999px; width: 48px; height: 48px; border-color: transparent; background: var(--color-primary-wash); }
.biz-card-logo-favicon { border-radius: 999px; }
.biz-card-rating-num {
    font-size: 15px; min-width: 0;
    padding: 6px 12px; border-radius: 999px;
    background: var(--color-primary); color: #fff; font-weight: 800;
}
.biz-card-cta { color: var(--color-primary); }

/* review cards → chat bubbles */
.review-card {
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 6px;
    border-color: transparent; box-shadow: var(--shadow); padding: var(--space-5);
}
.review-card:hover { border-color: transparent; box-shadow: var(--shadow-lg); }
.review-card-avatar { box-shadow: 0 0 0 3px var(--color-primary-wash); }
.review-card-title { font-size: 17px; }
.review-card-foot { border-top-style: solid; border-top-color: var(--color-border); }

/* trust grid */
.trust-item { border-radius: var(--radius-lg); border-color: transparent; box-shadow: var(--shadow-sm); }
.trust-item-icon { border-radius: 999px; width: 44px; height: 44px; }

/* moderation flow on the coral band */
.mod-flow-step {
    background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.22);
    border-radius: var(--radius-lg); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.mod-flow-step-n { background: #fff; color: var(--color-primary); }
.section-v2--dark .btn-outline-dark { border-color: rgba(255,255,255,0.6); color: #fff; }
.section-v2--dark .btn-outline-dark:hover { background: #fff; color: var(--color-primary-dark); }

/* business CTA band */
.biz-cta {
    background: linear-gradient(120deg, #ff6b6f 0%, #e5484d 55%, #c93a3f 100%);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
}
.biz-cta p, .biz-cta-feature { color: #ffe3e4; }
.biz-cta-feature svg { color: #fff; }
.biz-cta-actions .btn-primary { background: #fff; color: var(--color-primary-dark); box-shadow: none; }
.biz-cta-actions .btn-primary:hover { background: #fff5f5; }
.biz-cta-actions .btn-secondary { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.35); }
.biz-cta-actions .btn-secondary:hover { background: rgba(255,255,255,0.22); }

/* ====================================================================
   Footer — light, rounded top, pink wash instead of a dark slab
   ==================================================================== */
.footer-v2 {
    background: var(--color-surface-alt); color: var(--color-text-muted);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-top: 1px solid var(--color-border);
}
.footer-v2-brand p { color: var(--color-text-muted); }
.footer-v2-social a { background: #fff; color: var(--color-primary); box-shadow: var(--shadow-sm); }
.footer-v2-social a:hover { background: var(--color-primary); color: #fff; }
.footer-v2-col h4 { color: var(--color-text); }
.footer-v2-col a { color: var(--color-text-muted); }
.footer-v2-col a:hover { color: var(--color-primary); }
.footer-v2-bar { border-top-color: var(--color-border); color: var(--color-text-faint); }

/* ====================================================================
   Page heroes: category index, category, business profile
   ==================================================================== */
.breadcrumbs { background: transparent; border-bottom: 0; }
.cat-index-hero, .cat-hero, .biz-profile-hero {
    background:
        radial-gradient(800px 320px at 90% 0%, #ffd9db 0%, transparent 60%),
        var(--color-cream);
    border-bottom: 0;
}
.cat-hero-icon, .cat-index-hero .cat-hero-icon { border-radius: 999px; }
.cat-hero-search, .cat-index-hero .cat-hero-search { border-radius: 999px; overflow: hidden; box-shadow: var(--shadow); }
.cat-hero-search button { border-radius: 999px; }

.biz-profile-hero { padding: var(--space-8) 0; }
.biz-profile-hero-grid {
    background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
    padding: var(--space-6);
}
.biz-profile-logo { border-radius: 24px; border-color: transparent; background: var(--color-primary-wash); }
.biz-profile-anchor {
    border-radius: 999px; border-color: transparent;
    background: var(--color-primary-wash); padding: 8px 18px 8px 8px;
}
.biz-profile-anchor-num {
    background: var(--color-primary); color: #fff;
    border-radius: 999px; padding: 6px 14px; font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    min-width: 0;
}
.biz-profile-actions .btn { border-radius: 999px; }
.biz-profile-card { border-radius: var(--radius-lg); border-color: transparent; box-shadow: var(--shadow-sm); }
.biz-profile-trust-item { border-radius: 999px; }
.profile-review, .review-list > * { border-radius: var(--radius-lg); }

/* rating pills that use the accent stars keep amber; numbers go coral */
.rating-stars-fill { color: var(--color-accent); }

/* admin / account shells inherit the tokens; just soften their corners */
.adm-table, .dash-panel, .acc-shell, .admin-shell, .acc-empty { border-radius: var(--radius-lg); }
.adm-pill { border-radius: 999px; }

/* hero card fallback (no reviews yet): category chips instead of a review */
.hero-v2-card-main--cats .review-card-title { margin: 0 0 6px; }
.hero-v2-card-main--cats .review-card-body { margin: 0 0 var(--space-4); }
.hero-v2-card-main--cats .cat-sub-list a { background: var(--color-primary-wash); box-shadow: none; }

/* ====================================================================
   Engine rules that hardcode the green instead of using a token — the
   dark sidebars of the account / business-dashboard / admin shells,
   their avatars, and a few focus rings. Overridden here so app.css can
   stay byte-identical to the engine.
   ==================================================================== */
.acc-side, .biz-dash-side { background: #1f1416; color: #f3e6e7; }
.acc-side-avatar, .acc-preview-avatar { background: linear-gradient(135deg, #c93a3f, #ff6b6f); }
.acc-side-email, .acc-side-toggle { color: #b39a9d; }
.acc-side-item, .biz-dash-item { color: #dcc9cb; }
.acc-side-item.is-active { background: linear-gradient(90deg, rgba(229,72,77,0.34), rgba(229,72,77,0.08)); }
.biz-dash-item.is-active { background: rgba(229,72,77,0.28); }
.field select:focus { box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.18); }
.media-slot[data-state="empty"]:focus-visible { box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.28); }
.compare-add-list a { background: rgba(229, 72, 77, 0.06); }

/* Google sign-in button: pill like every other wowpilot button */
.auth-v2-google { border-radius: 999px; border-color: var(--color-border); box-shadow: var(--shadow-sm); }
.auth-v2-google:hover { border-color: var(--color-primary); background: #fff; box-shadow: var(--shadow); }

.footer-v2-brand img { height: 36px; }

/* "What customers say" — coral card with the logo's stripe on the left edge (engine card is a plain sand box). */
.biz-profile-summary {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #fff1f1 0%, #fff8f7 55%, #ffffff 100%);
    border: 1px solid #f6c7c9; border-radius: 16px;
    padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 10px);
    box-shadow: 0 6px 24px rgba(229, 72, 77, 0.08);
}
.biz-profile-summary::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
    background: repeating-linear-gradient(180deg, #ff7a7e 0 10px, #e5484d 10px 20px, #b52d32 20px 30px);
}
.biz-profile-summary-head h2 {
    font-family: var(--font-sans); font-style: italic; font-weight: 800; font-size: 19px; letter-spacing: -0.01em;
    color: var(--color-primary-dark);
}
.biz-profile-summary-head h2 svg { color: var(--color-primary); }
.biz-profile-summary-text { color: #3b2a2b; font-size: 15px; }

/* Customer photo strip — same family as the summary card. */
.biz-profile-gallery { border-radius: var(--radius-lg); border-color: #f6c7c9; box-shadow: var(--shadow-sm); }
.biz-profile-gallery-head h2 { font-family: var(--font-sans); font-style: italic; font-weight: 800; font-size: 19px; color: var(--color-primary-dark); }
.biz-profile-gallery-item { border-radius: 14px; }

/* Grouped nav (config nav_menu) is wider than the engine's flat list: tighten
   between the hamburger breakpoint and ~1180px, and drop the inline search
   below 1100px (it is still in the mobile menu and on /search). */
@media (max-width: 1180px) and (min-width: 901px) {
    .nav-v2-search { max-width: 240px; padding: 8px 12px; }
    .nav-v2-links { gap: 2px; }
    .nav-v2-links a, .nav-v2-group-btn { padding: 8px 9px; font-size: 13.5px; }
    .nav-v2-links a.is-accent { padding: 7px 12px; }
    .nav-v2-links a.is-primary { padding: 8px 14px; }
}
@media (max-width: 1100px) and (min-width: 901px) { .nav-v2-search { display: none; } }
.nav-v2-group-btn { border-radius: 999px; font-weight: 600; }
.nav-v2-group-btn:hover, .nav-v2-group.is-open .nav-v2-group-btn { background: var(--color-primary-wash); color: var(--color-primary-dark); }
.nav-v2-group-menu { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.nav-v2-group-menu a:hover { background: var(--color-primary-wash); color: var(--color-primary-dark); }
/* Longer locales (de, fr) make the grouped nav wide: let the search give way first. */
.nav-v2-search { flex: 1 1 220px; min-width: 150px; }
.nav-v2-links { flex-shrink: 0; }
/* non-English labels are longer: below 1440px the inline search goes (still on /search and in the mobile menu) */
@media (min-width: 901px) and (max-width: 1439px) { html:not([lang="en"]) .nav-v2-search { display: none; } }
@media (min-width: 901px) and (max-width: 1440px) { .nav-v2-links a, .nav-v2-group-btn { padding-left: 10px; padding-right: 10px; } }