/* ===============================================================
   CarAPI Frontend — Pixel Perfect Design System
   Inspired by: bydrive.com reference screenshot
   =============================================================== */

/* ── Variables ────────────────────────────────────────────────── */
:root {
    --c-black:    #0a0a0a;
    --c-dark:     #1a1a1a;
    --c-grey-900: #262626;
    --c-grey-700: #525252;
    --c-grey-500: #737373;
    --c-grey-300: #d4d4d4;
    --c-grey-200: #e5e5e5;
    --c-grey-100: #f5f5f5;
    --c-grey-50:  #fafafa;
    --c-white:    #ffffff;
    --c-accent:   #2563eb;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --radius-sm:  0.375rem;
    --radius-md:  0.625rem;
    --radius-lg:  1rem;
    --radius-xl:  1.5rem;
    --radius-full: 9999px;

    --shadow-sm:  0 1px 2px rgba(0,0,0,.05);
    --shadow-md:  0 4px 12px rgba(0,0,0,.08);
    --shadow-lg:  0 12px 40px rgba(0,0,0,.12);
    --shadow-xl:  0 25px 60px rgba(0,0,0,.15);

    --transition: .25s cubic-bezier(.4,0,.2,1);
}

/* ── Reset for our pages ──────────────────────────────────────── */
body.carapi-page {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    color: var(--c-dark);
    background: var(--c-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

body.carapi-page *,
body.carapi-page *::before,
body.carapi-page *::after {
    box-sizing: border-box;
}

body.carapi-page img {
    max-width: 100%;
    height: auto;
}

.carapi-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ═════════════════════════════════════════════════════════════════
   HEADER (single nav bar)
   ═════════════════════════════════════════════════════════════════ */
.carapi-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--c-grey-200);
}

/* WP Admin Toolbar fix */
body.admin-bar .carapi-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .carapi-header {
        top: 46px;
    }
}

.carapi-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.carapi-logo {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: var(--c-black);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -.02em;
    flex-shrink: 0;
}

.carapi-logo svg {
    color: var(--c-black);
}

/* Global logo image size — overrides all inline width/height */
.carapi-logo img,
.carapi-logo-img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain;
}

/* Footer logo (inverted, slightly smaller) */
.carapi-footer .carapi-logo-img {
    width: 20px !important;
    height: 20px !important;
}

/* Nav */
.carapi-nav {
    display: flex;
    gap: 2rem;
}

.carapi-nav a {
    text-decoration: none;
    color: var(--c-grey-700);
    font-size: .85rem;
    font-weight: 500;
    transition: color var(--transition);
    position: relative;
}

.carapi-nav a:hover,
.carapi-nav a.active {
    color: var(--c-black);
}

.carapi-nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--c-black);
    transition: width var(--transition);
}

.carapi-nav a:hover::after,
.carapi-nav a.active::after {
    width: 100%;
}

/* Header actions */
.carapi-header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

/* Login / Register Buttons */
.carapi-btn-login {
    text-decoration: none;
    color: var(--c-grey-700);
    font-size: .85rem;
    font-weight: 500;
    padding: .5rem 1rem;
    border-radius: var(--radius-full);
    transition: all var(--transition);
}

.carapi-btn-login:hover {
    color: var(--c-black);
    background: var(--c-grey-100);
}

.carapi-btn-register {
    text-decoration: none;
    color: var(--c-white);
    background: var(--c-black);
    font-size: .85rem;
    font-weight: 600;
    padding: .5rem 1.25rem;
    border-radius: var(--radius-full);
    transition: all var(--transition);
}

.carapi-btn-register:hover {
    background: var(--c-grey-900);
}

/* Account Dropdown */
.carapi-account-dropdown {
    position: relative;
}

.carapi-account-btn {
    display: flex;
    align-items: center;
    gap: .35rem;
    background: var(--c-grey-100);
    border: none;
    border-radius: var(--radius-full);
    padding: .4rem .75rem .4rem .5rem;
    cursor: pointer;
    font-family: var(--font);
    font-size: .85rem;
    font-weight: 500;
    color: var(--c-grey-700);
    transition: all var(--transition);
}

.carapi-account-btn:hover {
    background: var(--c-grey-200);
    color: var(--c-black);
}

.carapi-account-btn .material-symbols-rounded {
    font-size: 20px;
}

.carapi-account-chevron {
    font-size: 18px !important;
    transition: transform .2s ease;
}

.carapi-account-dropdown.open .carapi-account-chevron {
    transform: rotate(180deg);
}

.carapi-account-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dropdown menu */
.carapi-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.1);
    padding: .5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all .2s ease;
    z-index: 10000;
}

.carapi-account-dropdown.open .carapi-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.carapi-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    text-decoration: none;
    color: var(--c-grey-700);
    font-size: .85rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all .15s ease;
}

.carapi-dropdown-menu a:hover {
    background: var(--c-grey-100);
    color: var(--c-black);
}

.carapi-dropdown-menu a .material-symbols-rounded {
    font-size: 20px;
    color: var(--c-grey-500);
}

.carapi-dropdown-divider {
    height: 1px;
    background: var(--c-grey-200);
    margin: .35rem 0;
}

.carapi-dropdown-logout {
    color: #dc2626 !important;
}

.carapi-dropdown-logout .material-symbols-rounded {
    color: #dc2626 !important;
}

/* Hamburger toggle */
.carapi-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: .5rem;
    width: 36px;
    height: 36px;
}

.carapi-menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--c-black);
    border-radius: 2px;
    transition: all .3s ease;
    transform-origin: center;
}

.carapi-menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.carapi-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.carapi-menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu overlay */
.carapi-mobile-menu {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--c-white);
    z-index: 9998;
    padding: 2rem;
    flex-direction: column;
    gap: 2rem;
    animation: mobileMenuIn .3s ease;
}

@keyframes mobileMenuIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.carapi-mobile-menu.active {
    display: flex;
}

.carapi-mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.carapi-mobile-nav a {
    text-decoration: none;
    color: var(--c-black);
    font-size: 1.1rem;
    font-weight: 600;
    padding: 1rem 0;
    border-bottom: 1px solid var(--c-grey-100);
    transition: color var(--transition);
}

.carapi-mobile-nav a:hover {
    color: var(--c-accent);
}

.carapi-mobile-account {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding-top: 1rem;
}

.carapi-mobile-account .carapi-btn-login,
.carapi-mobile-account .carapi-btn-register {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.5rem;
    font-size: 1rem;
    text-align: center;
}

/* ═════════════════════════════════════════════════════════════════
   HERO — Absolute positioning for full control
   ═════════════════════════════════════════════════════════════════ */
.carapi-hero {
    position: relative;
    height: 100vh;
    min-height: 700px;
    max-height: 1000px;
    background: var(--c-white);
    overflow: visible;
}

/* Top 60% grey, bottom 40% white — hard transition */
.carapi-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        #efefef 0%,
        #efefef 53%,
        #ffffff 55%,
        #ffffff 100%);
    z-index: 0;
}

body.admin-bar .carapi-hero {
    height: calc(100vh - 32px);
}

/* Text block — top center */
.carapi-hero-text {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    text-align: center;
    width: 100%;
    max-width: 700px;
    padding: 0 2rem;
}

body.admin-bar .carapi-hero-text {
    top: calc(18% + 32px);
}

@media screen and (max-height: 850px) {
    .carapi-hero-text {
        top: 12%; 
    }
    body.admin-bar .carapi-hero-text {
        top: calc(12% + 32px);
    }
}

.carapi-hero-eyebrow {
    display: inline-block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--c-accent);
    font-weight: 600;
    margin-bottom: 1rem;
}

.carapi-hero-headline {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1.05;
    color: var(--c-black);
    margin: 0 0 1.5rem;
}

.carapi-hero-headline em {
    font-style: normal;
    color: var(--c-grey-500);
}

.carapi-hero-cta {
    display: inline-block;
    padding: .875rem 2.25rem;
    background: var(--c-black);
    color: var(--c-white);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    transition: all var(--transition);
    border: 2px solid var(--c-black);
}

.carapi-hero-cta:hover {
    background: var(--c-white);
    color: var(--c-black);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Car image — absolute, bottom center */
.carapi-hero-car {
    position: absolute;
    bottom: 00px; /* space for search bar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 100%;
    max-width: 1000px;
    pointer-events: none;
}

.carapi-hero-car-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Search bar — absolute, bottom of hero */
.carapi-hero-search {
    position: absolute;
    bottom: 75px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: 90%;
    max-width: 760px;
}

.carapi-hero-search .carapi-demo-widget {
    box-shadow: var(--shadow-xl);
    background: var(--c-white);
}

/* ═════════════════════════════════════════════════════════════════
   HERO ANIMATED DEMO CARDS (one at a time, chat-like)
   ═════════════════════════════════════════════════════════════════ */
.carapi-hero-cards {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1000px;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.carapi-demo-card {
    position: absolute;
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: 12px;
    padding: .85rem 1.1rem;
    min-width: 180px;
    max-width: 210px;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
    opacity: 0;
}

/* Left cards — slide in from left edge of 1000px container */
.carapi-demo-card--left { left: 12%; }
.carapi-demo-card--1 { bottom: 340px; animation: chatSlideLeft 30s ease infinite 0s; }
.carapi-demo-card--2 { bottom: 290px; animation: chatSlideLeft 30s ease infinite 10s; }
.carapi-demo-card--3 { bottom: 240px; animation: chatSlideLeft 30s ease infinite 20s; }

/* Right cards — slide in from right edge of 1000px container */
.carapi-demo-card--right { right: 12%; }
.carapi-demo-card--4 { bottom: 370px; animation: chatSlideRight 30s ease infinite 5s; }
.carapi-demo-card--5 { bottom: 310px; animation: chatSlideRight 30s ease infinite 15s; }
.carapi-demo-card--6 { bottom: 260px; animation: chatSlideRight 30s ease infinite 25s; }

@keyframes chatSlideLeft {
    0%   { opacity: 0; transform: translateX(-20px); }
    2%   { opacity: 1; transform: translateX(0); }
    13%  { opacity: 1; transform: translateX(0); }
    16%  { opacity: 0; transform: translateX(10px); }
    100% { opacity: 0; }
}

@keyframes chatSlideRight {
    0%   { opacity: 0; transform: translateX(20px); }
    2%   { opacity: 1; transform: translateX(0); }
    13%  { opacity: 1; transform: translateX(0); }
    16%  { opacity: 0; transform: translateX(-10px); }
    100% { opacity: 0; }
}

/* Card inner elements */
.carapi-demo-card-badge {
    display: inline-block;
    background: rgba(0,0,0,.05);
    color: var(--c-grey-500);
    font-size: .6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: .15rem .45rem;
    border-radius: 4px;
    margin-bottom: .4rem;
}

.carapi-demo-card-badge--green {
    background: rgba(22,101,52,.08);
    color: #166534;
}

.carapi-demo-card-title {
    font-size: .85rem;
    font-weight: 700;
    color: var(--c-black);
    margin-bottom: .35rem;
    letter-spacing: -.3px;
}

.carapi-demo-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .15rem 0;
    border-top: 1px solid rgba(0,0,0,.04);
    gap: 1rem;
}

.carapi-demo-card-row span {
    font-size: .6rem;
    color: var(--c-grey-500);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.carapi-demo-card-row strong {
    font-size: .75rem;
    font-weight: 600;
    color: var(--c-grey-700);
}

.carapi-demo-card-code {
    margin-top: .2rem;
}

.carapi-demo-card-code code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: .6rem;
    line-height: 1.5;
    color: var(--c-grey-500);
    display: block;
}

/* ═════════════════════════════════════════════════════════════════
   BRAND LOGO SLIDER (infinite scroll, container-constrained)
   ═════════════════════════════════════════════════════════════════ */
.carapi-brand-slider-section {
    padding: 5rem 0 3rem;
    background: var(--c-white);
}

.carapi-brand-slider-fade {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.carapi-brand-slider-track {
    display: flex;
    width: max-content;
    animation: brandScroll 30s linear infinite;
}

.carapi-brand-slide {
    flex-shrink: 0;
    width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
}

.carapi-brand-slide img {
    height: auto;
    max-height: 18px;
    max-width: 70px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .45;
    transition: all var(--transition);
}

.carapi-brand-slide img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

@keyframes brandScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ═════════════════════════════════════════════════════════════════
   EXAMPLE SECTION (Grid + Mock Popover)
   ═════════════════════════════════════════════════════════════════ */
.carapi-example-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    align-items: start;
    margin-top: 4rem;
}

.carapi-example-data .carapi-result-tab-content {
    max-height: none;
    overflow: visible;
}

@media (max-width: 900px) {
    .carapi-example-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ═════════════════════════════════════════════════════════════════
   GENERIC SECTIONS
   ═════════════════════════════════════════════════════════════════ */
.carapi-section {
    padding: 6rem 0;
}

.carapi-section--light {
    background: var(--c-grey-50);
}

.carapi-section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 3.5rem;
}

.carapi-section-eyebrow {
    display: inline-block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--c-accent);
    font-weight: 700;
    margin-bottom: .75rem;
}

.carapi-data-coming-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: var(--c-grey-900);
    color: var(--c-white);
    padding: .4rem 1rem;
    border-radius: 999px;
    margin: .5rem 0 1rem;
}

.carapi-section-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--c-black);
    letter-spacing: -1px;
    margin: 0 0 .75rem;
}

.carapi-section-header p {
    color: var(--c-grey-500);
    font-size: 1.1rem;
}

/* ═════════════════════════════════════════════════════════════════
   FEATURES GRID
   ═════════════════════════════════════════════════════════════════ */
.carapi-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.carapi-feature-card {
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: var(--radius-xl);
    padding: 2.5rem 2rem;
    transition: all var(--transition);
}

.carapi-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.carapi-feature-icon {
    margin-bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--c-grey-100);
    border-radius: var(--radius-lg);
    color: var(--c-black);
}

.carapi-feature-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    color: var(--c-black);
}

.carapi-feature-card p {
    color: var(--c-grey-500);
    font-size: .95rem;
    margin: 0;
    line-height: 1.6;
}

/* Coming-soon variant */
.carapi-feature-card--coming-soon {
    border-style: dashed;
    opacity: .75;
    pointer-events: none;
}

.carapi-feature-card--coming-soon:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--c-grey-200);
}

/* Nav badge (Bald) */
.carapi-nav-badge {
    display: inline-block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    background: var(--c-grey-900);
    color: var(--c-white);
    padding: .15rem .45rem;
    border-radius: 4px;
    line-height: 1.4;
    font-family: var(--font);
}

/* Feature card badge (Demnächst) */
.carapi-feature-badge {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    background: var(--c-grey-100);
    color: var(--c-grey-500);
    padding: .15rem .5rem;
    border-radius: 4px;
    line-height: 1.4;
    vertical-align: middle;
    font-family: var(--font);
    border: 1px solid var(--c-grey-200);
}

/* ═════════════════════════════════════════════════════════════════
   DEMO WIDGET (Horizontal Pill)
   ═════════════════════════════════════════════════════════════════ */
.carapi-demo-widget {
    max-width: 760px;
    margin: 0 auto;
    background: transparent;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    padding: .4rem .4rem .4rem .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Animated Search Border */
.carapi-demo-widget::after {
    content: '';
    position: absolute;
    inset: 2px; /* Border thickness */
    background: var(--c-white);
    border-radius: inherit;
    z-index: -1;
}

.carapi-demo-widget::before {
    content: '';
    position: absolute;
    width: 2000px;
    height: 2000px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    background: conic-gradient(from 0deg, transparent 70%, var(--c-accent) 100%);
    animation: carapiSpinBorder 3s linear infinite;
    z-index: -2;
}

@keyframes carapiSpinBorder {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Pill Tabs */
.carapi-widget-tabs {
    display: flex;
    background: var(--c-grey-100);
    border-radius: var(--radius-full);
    padding: .2rem;
    flex-shrink: 0;
}

.carapi-widget-tab {
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    padding: .65rem 1.15rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--c-grey-500);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    font-family: var(--font);
}

.carapi-widget-tab.active {
    background: var(--c-white);
    color: var(--c-black);
    box-shadow: var(--shadow-sm);
}

/* Tab Content Areas */
.carapi-widget-panel {
    display: none;
    flex: 1;
    min-width: 0;
}

.carapi-widget-panel.active {
    display: flex;
    align-items: center;
    gap: .5rem;
    animation: fadeSlide .3s ease;
}

@keyframes fadeSlide {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Inputs */
.carapi-widget-input {
    flex: 1;
    min-width: 0;
    padding: .75rem 1rem;
    border: none;
    background: transparent;
    font-size: .95rem;
    color: var(--c-black);
    outline: none;
    font-family: var(--font);
    border-radius: var(--radius-full);
}

.carapi-widget-input::placeholder {
    color: var(--c-grey-300);
}

.carapi-widget-input:focus {
    background: var(--c-grey-50);
    border-radius: var(--radius-full);
}

.carapi-widget-input--short {
    max-width: 130px;
    text-transform: uppercase;
}

/* Search Button */
.carapi-widget-btn {
    background: var(--c-black);
    color: var(--c-white);
    border: none;
    border-radius: var(--radius-full);
    padding: .75rem 1.75rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    font-family: var(--font);
    margin-left: auto;
}

.carapi-widget-btn:hover {
    background: #000;
    transform: scale(1.03);
    box-shadow: var(--shadow-md);
}

/* Loading Spinner */
.carapi-widget-loading {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.carapi-widget-loading.visible {
    display: flex;
}

.carapi-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid var(--c-grey-200);
    border-top-color: var(--c-black);
    border-radius: 50%;
    animation: spin .6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Results — popover below search bar */
#carapi-results:empty {
    display: none;
}

#carapi-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    z-index: 9999;
}

.carapi-result-card {
    width: 100%;
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.12);
    animation: popoverIn .35s cubic-bezier(.16,1,.3,1);
}

@keyframes popoverIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Spec icon */
.carapi-spec-icon {
    font-size: 16px;
    vertical-align: -3px;
    margin-right: 4px;
    color: var(--c-accent);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.carapi-result-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--c-grey-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.carapi-result-header h3 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--c-black);
    letter-spacing: -.3px;
}

.carapi-result-header-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

.carapi-result-header-left {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}

.carapi-result-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.carapi-result-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--c-grey-100);
    border-radius: 50%;
    cursor: pointer;
    color: var(--c-grey-500);
    transition: all .2s ease;
}

.carapi-result-close:hover {
    background: var(--c-grey-200);
    color: var(--c-black);
}

.carapi-result-years {
    display: inline-block;
    margin-top: .3rem;
    font-size: .8rem;
    color: var(--c-grey-500);
    font-weight: 500;
}

.carapi-result-badge {
    background: var(--c-grey-100);
    padding: .35rem .75rem;
    border-radius: var(--radius-sm);
    font-size: .75rem;
    font-weight: 700;
    color: var(--c-grey-700);
    letter-spacing: .5px;
    white-space: nowrap;
}

/* Result tabs */
.carapi-result-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--c-grey-200);
    padding: 0 2rem;
}

.carapi-result-tab {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .85rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--font);
    font-size: .82rem;
    font-weight: 600;
    color: var(--c-grey-500);
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}

.carapi-result-tab .material-symbols-rounded {
    font-size: 18px;
}

.carapi-result-tab:hover {
    color: var(--c-black);
}

.carapi-result-tab.active {
    color: var(--c-black);
    border-bottom-color: var(--c-black);
}

/* Tab content panels */
.carapi-result-tab-content {
    display: none;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.carapi-result-tab-content::-webkit-scrollbar { width: 6px; }
.carapi-result-tab-content::-webkit-scrollbar-track { background: var(--c-grey-50); }
.carapi-result-tab-content::-webkit-scrollbar-thumb { background: var(--c-grey-200); border-radius: 10px; }
.carapi-result-tab-content::-webkit-scrollbar-thumb:hover { background: var(--c-grey-300); }

.carapi-result-tab-content.active {
    display: block;
    animation: fadeSlide .25s ease;
}

.carapi-result-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.carapi-result-spec {
    padding: 1rem 1.25rem;
    border-right: 1px solid var(--c-grey-100);
    border-bottom: 1px solid var(--c-grey-100);
}

.carapi-result-spec:nth-child(3n) {
    border-right: none;
}

.carapi-result-spec dt {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .75px;
    color: var(--c-grey-500);
    margin-bottom: .2rem;
}

.carapi-result-spec dd {
    margin: 0;
    font-size: .9rem;
    font-weight: 700;
    color: var(--c-black);
}

/* Fitments table */
.carapi-result-fitments {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--c-grey-200);
}

.carapi-result-fitments h4 {
    margin: 0 0 .75rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .75px;
    color: var(--c-grey-500);
}

.carapi-result-fitments table {
    width: 100%;
    border-collapse: collapse;
}

.carapi-result-fitments th {
    text-align: left;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-grey-500);
    padding: .4rem 0;
    border-bottom: 1px solid var(--c-grey-200);
}

.carapi-result-fitments td {
    padding: .5rem 0;
    font-size: .85rem;
    color: var(--c-black);
    border-bottom: 1px solid var(--c-grey-100);
}

/* Gutachten / Wheel Fitment Groups */
.carapi-wheel-group { 
    background: #fff; 
    border: 1px solid var(--c-grey-200); 
    border-radius: 12px; 
    margin-bottom: 1rem; 
}
.carapi-wheel-header { 
    display: flex; 
    align-items: center; 
    gap: .75rem; 
    padding: 1rem 1.25rem; 
    background: var(--c-grey-50); 
    border-bottom: 1px solid var(--c-grey-200); 
    cursor: pointer; 
    user-select: none; 
    transition: background .2s ease;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}
.carapi-wheel-header:hover { background: var(--c-grey-100); }
.carapi-wheel-group:not(.open) .carapi-wheel-header {
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
    border-bottom: none;
}
.carapi-wheel-header h4 { margin: 0; font-size: 1rem; flex: 1; display:flex; align-items:center; gap: .3rem; font-weight:800; letter-spacing: -.2px;}
.carapi-wheel-header .carapi-wheel-meta { font-size: .75rem; font-weight: 500; color: var(--c-grey-500); }
.carapi-wheel-header .carapi-toggle { font-size: 1.25rem; color: var(--c-grey-400); transition: transform 0.2s; }
.carapi-wheel-group.open .carapi-toggle { transform: rotate(180deg); color: var(--c-black); }
.carapi-wheel-body { display: none; padding: 0; }
.carapi-wheel-group.open .carapi-wheel-body { display: block; animation: fadeSlide .25s ease; }

.carapi-et-variant { padding: 1rem 1.25rem; border-bottom: 1px solid var(--c-grey-100); }
.carapi-et-variant:last-child { border-bottom: none; }
.carapi-et-label { font-size: .85rem; font-weight: 700; color: var(--c-black); margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; }
.carapi-et-label .carapi-src { font-size: .7rem; color: var(--c-grey-400); font-weight: 500; padding: .1rem .4rem; background: var(--c-grey-50); border: 1px solid var(--c-grey-200); border-radius: 4px; }

.carapi-tire-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.carapi-tire { display: inline-flex; align-items: center; gap: .25rem; background: var(--c-grey-50); border: 1px solid var(--c-grey-200); border-radius: 6px; padding: .2rem .5rem; font-size: .75rem; font-family: monospace; font-weight:600;}
.carapi-axle { font-size: .6rem; font-weight: 800; border-radius: 4px; padding: .1rem .3rem; text-transform: uppercase; font-family: var(--font); }
.carapi-axle.va { background: #e0f2fe; color: #0284c7; } /* Blue for front */
.carapi-axle.ha { background: #ffe4e6; color: #e11d48; } /* Rose for rear */
.carapi-axle.va-ha { background: #dcfce7; color: #166534; } /* Green for both */

/* Tooltips for codes */
.carapi-tire-codes {
    margin-left: .25rem;
    display: inline-flex;
    gap: 3px;
    align-items: center;
}
.carapi-code-tooltip {
    position: relative;
    font-size: .55rem;
    color: var(--c-grey-600);
    background: var(--c-grey-200);
    padding: 2px 4px;
    border-radius: 4px;
    cursor: help;
    font-weight: 700;
    font-family: var(--font);
}
.carapi-code-tooltip:hover {
    background: var(--c-grey-300);
    color: var(--c-black);
}
.carapi-code-tooltip::before,
.carapi-code-tooltip::after {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: all .2s ease;
    z-index: 9999;
    pointer-events: none;
}
.carapi-code-tooltip::before {
    content: '';
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent transparent;
    border-top-color: var(--c-black);
}
.carapi-code-tooltip::after {
    content: attr(data-tooltip);
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--c-black);
    color: var(--c-white);
    padding: .5rem .75rem;
    border-radius: 6px;
    font-size: .65rem;
    font-weight: 500;
    white-space: pre-wrap;
    width: max-content;
    max-width: 260px;
    line-height: 1.4;
    text-align: left;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}
.carapi-code-tooltip:hover::before,
.carapi-code-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.carapi-result-error {
    max-width: 760px;
    margin: 2rem auto 0;
    padding: 1rem 1.5rem;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: var(--radius-md);
    text-align: center;
    font-size: .9rem;
    animation: fadeSlide .3s ease;
}

/* ═════════════════════════════════════════════════════════════════
   PRICING
   ═════════════════════════════════════════════════════════════════ */
.carapi-pricing-section {
    text-align: center;
}

.carapi-pricing-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--c-black);
    letter-spacing: -1px;
    margin: 0 0 .5rem;
}

.carapi-pricing-header p {
    color: var(--c-grey-500);
    font-size: 1.05rem;
    margin: 0 0 2rem;
}

/* Toggle */
.carapi-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 3rem;
}

.carapi-toggle-label {
    font-size: .9rem;
    font-weight: 500;
    color: var(--c-grey-700);
}

.carapi-switch {
    position: relative;
    width: 48px;
    height: 26px;
}

.carapi-switch input { opacity: 0; width: 0; height: 0; }

.carapi-switch .slider {
    position: absolute;
    inset: 0;
    background: var(--c-grey-300);
    border-radius: 26px;
    cursor: pointer;
    transition: background var(--transition);
}

.carapi-switch .slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: var(--c-white);
    border-radius: 50%;
    transition: transform var(--transition);
    box-shadow: var(--shadow-sm);
}

.carapi-switch input:checked + .slider {
    background: var(--c-black);
}

.carapi-switch input:checked + .slider::before {
    transform: translateX(22px);
}

.carapi-badge-discount {
    background: #dcfce7;
    color: #166534;
    font-size: .7rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: var(--radius-full);
}

/* Cards */
.carapi-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: center;
}

.carapi-pricing-card {
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: var(--radius-xl);
    padding: 2.5rem 2rem;
    text-align: left;
    position: relative;
    transition: all var(--transition);
}

.carapi-pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.carapi-pricing-card--featured {
    border: 2px solid var(--c-black);
    box-shadow: var(--shadow-md);
    transform: scale(1.04);
    z-index: 2;
}

.carapi-pricing-card--featured:hover {
    transform: scale(1.04) translateY(-6px);
}

.carapi-pricing-popular {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-black);
    color: var(--c-white);
    padding: .3rem 1.1rem;
    border-radius: var(--radius-full);
    font-size: .75rem;
    font-weight: 700;
}

.carapi-pricing-card h3 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    color: var(--c-black);
}

.carapi-pricing-amount {
    display: flex;
    align-items: baseline;
    gap: .15rem;
    margin-bottom: .75rem;
}

.carapi-pricing-currency {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-black);
}

.carapi-pricing-value {
    font-size: 3.25rem;
    font-weight: 900;
    color: var(--c-black);
    letter-spacing: -2px;
    line-height: 1;
    transition: opacity .3s ease;
}

.carapi-pricing-value--custom {
    font-size: 2.25rem;
}

.carapi-pricing-period {
    font-size: .9rem;
    color: var(--c-grey-500);
    margin-left: .25rem;
}

.carapi-pricing-desc {
    color: var(--c-grey-500);
    font-size: .9rem;
    margin-bottom: 1.5rem;
    min-height: 42px;
}

.carapi-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.carapi-pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .45rem 0;
    font-size: .9rem;
    color: var(--c-grey-700);
}

.carapi-pricing-features li svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #16a34a;
    margin-top: 2px;
}

.carapi-pricing-btn {
    display: block;
    width: 100%;
    padding: .85rem 0;
    text-align: center;
    border-radius: var(--radius-full);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition);
    cursor: pointer;
    font-family: var(--font);
}

.carapi-pricing-btn--outline {
    background: transparent;
    color: var(--c-black);
    border: 1.5px solid var(--c-grey-300);
}

.carapi-pricing-btn--outline:hover {
    border-color: var(--c-black);
    background: var(--c-grey-50);
}

.carapi-pricing-btn--dark {
    background: var(--c-black);
    color: var(--c-white);
    border: 1.5px solid var(--c-black);
}

.carapi-pricing-btn--dark:hover {
    background: var(--c-white);
    color: var(--c-black);
}

/* ═════════════════════════════════════════════════════════════════
   API DOCS
   ═════════════════════════════════════════════════════════════════ */
.carapi-docs-section {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 3rem;
}

.carapi-docs-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.carapi-docs-sidebar h4 {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--c-grey-500);
    margin: 0 0 1rem;
}

.carapi-docs-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.carapi-docs-sidebar ul ul {
    padding-left: 1rem;
    margin-top: .35rem;
}

.carapi-docs-sidebar li {
    margin-bottom: .35rem;
}

.carapi-docs-sidebar a {
    text-decoration: none;
    color: var(--c-grey-500);
    font-size: .85rem;
    font-weight: 500;
    transition: color var(--transition);
}

.carapi-docs-sidebar a:hover {
    color: var(--c-black);
}

.carapi-docs-content h2 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--c-black);
    margin: 0 0 .75rem;
}

.carapi-docs-content > p {
    color: var(--c-grey-500);
    font-size: 1rem;
}

.carapi-divider {
    border: 0;
    border-top: 1px solid var(--c-grey-200);
    margin: 2.5rem 0;
}

.carapi-endpoint-card {
    border: 1px solid var(--c-grey-200);
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
    overflow: hidden;
    background: var(--c-white);
}

.carapi-endpoint-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.25rem;
    background: var(--c-grey-50);
    border-bottom: 1px solid var(--c-grey-200);
    font-family: 'Fira Code', 'JetBrains Mono', monospace;
    font-size: .9rem;
}

.carapi-method {
    padding: .2rem .6rem;
    border-radius: var(--radius-sm);
    font-size: .75rem;
    font-weight: 700;
    color: var(--c-white);
}

.carapi-method-get { background: #16a34a; }
.carapi-method-post { background: #2563eb; }

.carapi-endpoint-card > p,
.carapi-endpoint-card > h4,
.carapi-endpoint-card > .carapi-code-block,
.carapi-endpoint-card > .carapi-docs-table {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}

.carapi-code-block {
    background: var(--c-dark);
    color: #e5e5e5;
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    margin: 1rem 0;
}

.carapi-code-block pre {
    margin: 0;
    font-family: 'Fira Code', 'JetBrains Mono', monospace;
    font-size: .85rem;
    line-height: 1.7;
}

.carapi-code-block .json-key { color: #7dd3fc; }
.carapi-code-block .json-string { color: #86efac; }
.carapi-code-block .json-number { color: #fde68a; }

.carapi-docs-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.carapi-docs-table th,
.carapi-docs-table td {
    padding: .65rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--c-grey-200);
    font-size: .9rem;
}

.carapi-docs-table th {
    background: var(--c-grey-50);
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-grey-700);
}

.carapi-docs-table code {
    background: var(--c-grey-100);
    padding: .15rem .4rem;
    border-radius: var(--radius-sm);
    font-size: .85rem;
}

.carapi-required {
    color: #dc2626;
    font-weight: 700;
}

/* ═════════════════════════════════════════════════════════════════
   FAQ SECTION
   ═════════════════════════════════════════════════════════════════ */
.carapi-faq-section {
    background: var(--c-white);
}

.carapi-faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.carapi-faq-item {
    border-bottom: 1px solid var(--c-grey-200);
}

.carapi-faq-item:first-child {
    border-top: 1px solid var(--c-grey-200);
}

.carapi-faq-item summary {
    list-style: none;
}

.carapi-faq-item summary::-webkit-details-marker {
    display: none;
}

.carapi-faq-item summary::marker {
    display: none;
    content: '';
}

.carapi-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 0;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--c-black);
    transition: color var(--transition);
    user-select: none;
}

.carapi-faq-question:hover {
    color: var(--c-accent);
}

.carapi-faq-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--c-grey-100);
    border-radius: 50%;
    transition: all var(--transition);
}

.carapi-faq-icon .material-symbols-rounded {
    font-size: 20px;
    color: var(--c-grey-500);
    transition: transform .3s ease;
}

.carapi-faq-item[open] .carapi-faq-icon {
    background: var(--c-black);
}

.carapi-faq-item[open] .carapi-faq-icon .material-symbols-rounded {
    color: var(--c-white);
    transform: rotate(45deg);
}

.carapi-faq-answer {
    padding: 0 0 1.5rem;
    animation: faqFadeIn .3s ease;
}

.carapi-faq-answer p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--c-grey-500);
    max-width: 90%;
}

@keyframes faqFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═════════════════════════════════════════════════════════════════
   FOOTER
   ═════════════════════════════════════════════════════════════════ */
.carapi-footer {
    background: var(--c-black);
    color: var(--c-grey-300);
    padding: 5rem 0 2rem;
}

.carapi-footer-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.carapi-logo-text {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--c-white);
    letter-spacing: -.02em;
}

.carapi-footer-brand p {
    color: var(--c-grey-500);
    font-size: .9rem;
    margin: .75rem 0 0;
    max-width: 300px;
}

.carapi-footer-links h4 {
    color: var(--c-white);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 1rem;
}

.carapi-footer-links a {
    display: block;
    color: var(--c-grey-500);
    text-decoration: none;
    font-size: .9rem;
    padding: .25rem 0;
    transition: color var(--transition);
}

.carapi-footer-links a:hover {
    color: var(--c-white);
}

.carapi-footer-bottom {
    border-top: 1px solid var(--c-grey-900);
    padding-top: 1.5rem;
    text-align: center;
}

.carapi-footer-bottom p {
    font-size: .8rem;
    color: var(--c-grey-500);
    margin: 0;
}

/* ═════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .carapi-features-grid,
    .carapi-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }

    .carapi-pricing-card--featured {
        transform: none;
    }

    .carapi-pricing-card--featured:hover {
        transform: translateY(-6px);
    }

    .carapi-footer-inner {
        grid-template-columns: 1fr 1fr;
    }
}

/* ═════════════════════════════════════════════════════════════════
   ACCOUNT DASHBOARD
   ═════════════════════════════════════════════════════════════════ */
.carapi-account {
    padding: 100px 0 4rem;
    min-height: 100vh;
    background: var(--c-grey-50);
}

.carapi-account-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.carapi-account-header h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--c-black);
    margin: 0;
    letter-spacing: -.5px;
}

.carapi-account-header p {
    color: var(--c-grey-500);
    margin: .25rem 0 0;
    font-size: .9rem;
}

/* Stats cards */
.carapi-account-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.carapi-stat-card {
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: box-shadow .2s ease;
}

.carapi-stat-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.05);
}

.carapi-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--c-grey-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.carapi-stat-icon .material-symbols-rounded {
    font-size: 22px;
    color: var(--c-accent);
}

.carapi-stat-label {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-grey-500);
    margin-bottom: .25rem;
}

.carapi-stat-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--c-black);
}

.carapi-stat-sub {
    font-size: .75rem;
    color: var(--c-grey-500);
    margin-top: .25rem;
    display: block;
}

/* Usage bar */
.carapi-usage-bar {
    width: 100%;
    height: 6px;
    background: var(--c-grey-200);
    border-radius: 3px;
    overflow: hidden;
    margin-top: .35rem;
}

.carapi-usage-fill {
    height: 100%;
    background: var(--c-accent);
    border-radius: 3px;
    transition: width .5s ease;
}

/* Account sections */
.carapi-account-section {
    margin-bottom: 2rem;
    scroll-margin-top: 80px;
}

.carapi-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.carapi-section-title .material-symbols-rounded {
    font-size: 22px;
    color: var(--c-grey-500);
}

.carapi-section-title h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--c-black);
    margin: 0;
}

.carapi-account-card {
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: 14px;
    padding: 1.75rem;
}

/* Plan info */
.carapi-plan-info {
    margin-bottom: 1.5rem;
}

.carapi-plan-badge {
    display: inline-block;
    padding: .35rem 1rem;
    border-radius: var(--radius-full);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .5px;
    background: var(--c-grey-100);
    color: var(--c-grey-700);
}

.carapi-plan-badge--pro {
    background: var(--c-accent);
    color: var(--c-white);
}

.carapi-plan-badge--enterprise {
    background: var(--c-black);
    color: var(--c-white);
}

.carapi-plan-expiry {
    margin: .75rem 0 0;
    font-size: .85rem;
    color: var(--c-grey-500);
}

.carapi-plan-desc {
    margin: .5rem 0 0;
    font-size: .9rem;
    color: var(--c-grey-700);
    line-height: 1.5;
}

.carapi-plan-actions {
    display: flex;
    gap: .75rem;
    align-items: center;
}

.carapi-btn-cancel {
    background: none;
    border: 1px solid var(--c-grey-300);
    color: var(--c-grey-500);
    cursor: pointer;
    font-family: var(--font);
}

/* API Keys */
.carapi-key-row {
    margin-bottom: 1.25rem;
}

.carapi-key-row:last-of-type {
    margin-bottom: 1rem;
}

.carapi-key-field label {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-grey-500);
    margin-bottom: .4rem;
    font-weight: 600;
}

.carapi-key-value {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--c-grey-50);
    border: 1px solid var(--c-grey-200);
    border-radius: 10px;
    padding: .6rem 1rem;
}

.carapi-key-value code {
    flex: 1;
    font-size: .85rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--c-black);
    word-break: break-all;
}

.carapi-key-masked {
    color: var(--c-grey-500) !important;
    letter-spacing: 2px;
}

.carapi-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c-grey-500);
    padding: .25rem;
    border-radius: 6px;
    transition: all .15s ease;
    display: flex;
    align-items: center;
}

.carapi-copy-btn:hover {
    background: var(--c-grey-200);
    color: var(--c-black);
}

.carapi-copy-btn .material-symbols-rounded {
    font-size: 18px;
}

.carapi-key-hint {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    color: var(--c-grey-500);
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: .6rem 1rem;
}

.carapi-key-hint .material-symbols-rounded {
    font-size: 18px;
    color: #f59e0b;
}

/* Settings form */
.carapi-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.carapi-form-group label {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-grey-500);
    margin-bottom: .35rem;
    font-weight: 600;
}

.carapi-form-group input {
    width: 100%;
    padding: .7rem 1rem;
    border: 1px solid var(--c-grey-200);
    border-radius: 10px;
    font-family: var(--font);
    font-size: .9rem;
    color: var(--c-black);
    background: var(--c-white);
    transition: border-color .2s ease;
    box-sizing: border-box;
}

.carapi-form-group input:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}

.carapi-form-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: .5rem;
}

.carapi-form-actions .carapi-btn-register {
    border: none;
    cursor: pointer;
    font-family: var(--font);
}

@media (max-width: 768px) {
    /* Header: hide desktop nav & auth, show hamburger */
    .carapi-nav { display: none; }
    .carapi-btn-login,
    .carapi-btn-register { display: none; }
    .carapi-account-name { display: none; }
    .carapi-menu-toggle { display: flex; }

    .carapi-hero {
        height: auto;
        min-height: auto;
        max-height: none;
        padding-top: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body.admin-bar .carapi-hero {
        height: auto;
        padding-top: 92px;
    }

    /* Mobile demo cards — tiny, at screen edges */
    .carapi-hero-cards {
        display: block;
    }

    .carapi-demo-card {
        min-width: 55px;
        max-width: 65px;
        padding: .2rem .3rem;
        border-radius: 5px;
        font-size: .35rem;
    }

    .carapi-demo-card-badge { font-size: .25rem; padding: .05rem .2rem; }
    .carapi-demo-card-title { font-size: .35rem; margin: .1rem 0; }
    .carapi-demo-card-row { gap: .05rem; margin-bottom: .03rem; }
    .carapi-demo-card-row span { font-size: .28rem; }
    .carapi-demo-card-row strong { font-size: .28rem; }
    .carapi-demo-card-code { margin-top: .1rem; }
    .carapi-demo-card-code code { font-size: .24rem; padding: .05rem .15rem; }

    .carapi-demo-card--left { left: 15%; }
    .carapi-demo-card--right { right: 15%; }

    .carapi-hero-text {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        padding: 2rem 1.5rem 0;
    }

    body.admin-bar .carapi-hero-text {
        top: auto;
    }

    .carapi-hero-headline {
        font-size: 2.25rem;
        letter-spacing: -1px;
    }

    .carapi-hero-car {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        max-width: 100%;
    }

    .carapi-hero-search {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        width: 95%;
        margin: -1rem auto 1.5rem;
        z-index: 9999;
    }

    .carapi-hero-search .carapi-demo-widget {
        flex-direction: column;
        border-radius: var(--radius-xl);
        padding: .75rem;
    }

    .carapi-hero-search .carapi-widget-panel.active {
        flex-direction: column;
    }

    .carapi-hero-search .carapi-widget-input--short {
        max-width: none;
    }

    .carapi-hero-search .carapi-widget-btn {
        width: 100%;
    }

    /* Brand slider smaller */
    .carapi-brand-slider-section {
        padding: 3rem 0 2rem;
    }

    .carapi-brand-slide {
        width: 80px;
        padding: 0 1rem;
    }

    .carapi-brand-slide img {
        height: 24px;
    }

    .carapi-docs-section {
        grid-template-columns: 1fr;
    }

    .carapi-docs-sidebar {
        position: static;
    }

    .carapi-section {
        padding: 4rem 0;
    }

    .carapi-footer-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .carapi-result-specs {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Account dashboard mobile */
    .carapi-account-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .carapi-account-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .carapi-form-row {
        grid-template-columns: 1fr;
    }

    .carapi-plan-actions {
        flex-direction: column;
        width: 100%;
    }

    .carapi-plan-actions .carapi-btn-register,
    .carapi-plan-actions .carapi-btn-cancel {
        width: 100%;
        text-align: center;
    }
}

/* ═════════════════════════════════════════════════════════════════
   WordPress Content Pages (Impressum, Datenschutz, AGB etc.)
   ═════════════════════════════════════════════════════════════════ */
.carapi-wp-content {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--c-grey-700);
}

.carapi-wp-content h2 {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--c-black);
    margin: 2.5rem 0 1rem;
}

.carapi-wp-content h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--c-black);
    margin: 2rem 0 .75rem;
}

.carapi-wp-content p {
    margin: 0 0 1.25rem;
}

.carapi-wp-content a {
    color: var(--c-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.carapi-wp-content a:hover {
    color: var(--c-black);
}

.carapi-wp-content ul,
.carapi-wp-content ol {
    margin: 0 0 1.25rem 1.5rem;
}

.carapi-wp-content li {
    margin-bottom: .4rem;
}

.carapi-wp-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.carapi-wp-content th,
.carapi-wp-content td {
    text-align: left;
    padding: .6rem .8rem;
    border-bottom: 1px solid var(--c-grey-200);
}

.carapi-wp-content th {
    font-weight: 700;
    color: var(--c-black);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.carapi-wp-content blockquote {
    border-left: 3px solid var(--c-accent);
    padding: .5rem 1.5rem;
    margin: 1.5rem 0;
    color: var(--c-grey-600);
    font-style: italic;
}

.carapi-content-page {
    padding-bottom: 4rem;
}

/* ═════════════════════════════════════════════════════════════════
   NAV DROPDOWN (Daten)
   ═════════════════════════════════════════════════════════════════ */
.carapi-nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.carapi-nav-dropdown-trigger {
    text-decoration: none;
    color: var(--c-grey-700);
    font-size: .85rem;
    font-weight: 500;
    transition: color var(--transition);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    cursor: pointer;
}

.carapi-nav-dropdown-trigger:hover,
.carapi-nav-dropdown-trigger.active {
    color: var(--c-black);
}

.carapi-nav-dropdown-trigger::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--c-black);
    transition: width var(--transition);
}

.carapi-nav-dropdown-trigger:hover::after,
.carapi-nav-dropdown-trigger.active::after {
    width: 100%;
}

.carapi-nav-dropdown-trigger .material-symbols-rounded {
    transition: transform .2s ease;
}

.carapi-nav-dropdown:hover .carapi-nav-dropdown-trigger .material-symbols-rounded {
    transform: rotate(180deg);
}

.carapi-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 16px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    min-width: 220px;
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.1);
    padding: .5rem;
    opacity: 0;
    visibility: hidden;
    transition: all .2s ease;
    z-index: 10000;
}

.carapi-nav-dropdown:hover .carapi-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.carapi-nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    text-decoration: none;
    color: var(--c-grey-700);
    font-size: .85rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all .15s ease;
    white-space: nowrap;
}

.carapi-nav-dropdown-menu a:hover {
    background: var(--c-grey-100);
    color: var(--c-black);
}

.carapi-nav-dropdown-menu a .material-symbols-rounded {
    font-size: 20px;
    color: var(--c-grey-500);
}

/* Mobile Dropdown */
.carapi-mobile-dropdown {
    border-bottom: 1px solid var(--c-grey-100);
}

.carapi-mobile-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: .25rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-family: var(--font);
    text-decoration: none;
    color: var(--c-black);
    font-size: 1.1rem;
    font-weight: 600;
    padding: 1rem 0;
    cursor: pointer;
    transition: color var(--transition);
}

.carapi-mobile-dropdown-trigger .material-symbols-rounded {
    transition: transform .2s ease;
}

.carapi-mobile-dropdown.open .carapi-mobile-dropdown-trigger .material-symbols-rounded {
    transform: rotate(180deg);
}

.carapi-mobile-dropdown-menu {
    display: none;
    padding: 0 0 .5rem 1rem;
}

.carapi-mobile-dropdown.open .carapi-mobile-dropdown-menu {
    display: block;
}

.carapi-mobile-dropdown-menu a {
    display: block;
    text-decoration: none;
    color: var(--c-grey-700);
    font-size: 1rem;
    font-weight: 500;
    padding: .6rem 0;
    transition: color var(--transition);
}

.carapi-mobile-dropdown-menu a:hover {
    color: var(--c-accent);
}

/* ═════════════════════════════════════════════════════════════════
   DATA PAGES
   ═════════════════════════════════════════════════════════════════ */
.carapi-data-page {
    padding-top: 0;
}

/* ── Data Hero ── */
.carapi-data-hero {
    padding: calc(60px + 5rem) 0 5rem;
    text-align: center;
    background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

body.admin-bar .carapi-data-hero {
    padding-top: calc(92px + 5rem);
}

.carapi-data-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(37,99,235,.04) 0%, transparent 70%);
    pointer-events: none;
}

.carapi-data-hero-headline {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1.05;
    color: var(--c-black);
    margin: .5rem 0 1.5rem;
}

.carapi-data-hero-headline em {
    font-style: normal;
    color: var(--c-grey-500);
}

.carapi-data-hero-sub {
    font-size: 1.1rem;
    color: var(--c-grey-500);
    max-width: 600px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

/* ── Stat Counters ── */
.carapi-data-stats {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
}

.carapi-data-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carapi-data-stat-number {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -2px;
    color: var(--c-black);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.carapi-data-stat-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--c-grey-500);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: .5rem;
}

/* ── Data Fields Grid ── */
.carapi-data-fields-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.carapi-data-field-card {
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: all var(--transition);
}

.carapi-data-field-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.carapi-data-field-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--c-grey-100);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    color: var(--c-black);
}

.carapi-data-field-icon .material-symbols-rounded {
    font-size: 22px;
}

.carapi-data-field-card h3 {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 .35rem;
    color: var(--c-black);
    letter-spacing: -.3px;
}

.carapi-data-field-card p {
    font-size: .8rem;
    color: var(--c-grey-500);
    margin: 0;
    line-height: 1.5;
}

/* ── JSON Preview ── */
.carapi-data-json-preview {
    max-width: 700px;
    margin: 0 auto;
    background: var(--c-dark);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.carapi-data-json-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.5rem;
    background: rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.carapi-data-json-method {
    display: inline-block;
    background: rgba(34,197,94,.15);
    color: #22c55e;
    font-size: .7rem;
    font-weight: 700;
    padding: .2rem .5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.carapi-data-json-header code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: .78rem;
    color: var(--c-grey-300);
}

.carapi-data-json-code {
    padding: 1.5rem;
    margin: 0;
    overflow-x: auto;
}

.carapi-data-json-code code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: .78rem;
    line-height: 1.8;
    color: var(--c-grey-300);
    display: block;
    white-space: pre;
}

/* ── Auflagen Cards ── */
.carapi-data-auflagen-example {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.carapi-data-auflage-card {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    transition: all var(--transition);
}

.carapi-data-auflage-card:hover {
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.carapi-data-auflage-code {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 36px;
    background: var(--c-grey-100);
    color: var(--c-black);
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: .8rem;
    font-weight: 700;
    border-radius: 6px;
    padding: 0 .6rem;
}

.carapi-data-auflage-text {
    font-size: .9rem;
    color: var(--c-grey-700);
    line-height: 1.6;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .carapi-data-fields-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .carapi-nav-dropdown {
        display: none;
    }

    .carapi-data-hero {
        padding: 4rem 0 3rem;
    }

    .carapi-data-hero-sub {
        font-size: 1rem;
    }

    .carapi-data-stats {
        gap: 2rem;
    }

    .carapi-data-stat-number {
        font-size: 2.25rem;
    }

    .carapi-data-fields-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .carapi-data-field-card {
        padding: 1.25rem;
    }

    .carapi-data-auflage-card {
        flex-direction: column;
        gap: .75rem;
    }
}

@media (max-width: 480px) {
    .carapi-data-fields-grid {
        grid-template-columns: 1fr;
    }

    .carapi-data-stats {
        flex-direction: column;
        gap: 1.5rem;
    }
}