/* ========================================
   Sellityet – Hyperspeed System Design
   Transparente Container, helle Schrift
   ======================================== */

:root {
    --hs-text: #ffffff;
    --hs-text-soft: rgba(255, 255, 255, 0.88);
    --hs-text-muted: rgba(255, 255, 255, 0.68);
    --hs-blue: #60a5fa;
    --hs-blue-bg: rgba(8, 18, 52, 0.72);
    --hs-blue-bg-strong: rgba(12, 24, 68, 0.85);
    --hs-blue-field: rgba(15, 35, 85, 0.55);
    --hs-border: rgba(96, 165, 250, 0.28);
    --hs-border-focus: rgba(147, 197, 253, 0.55);
    --hs-overlay: transparent;
    --hs-text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
    --hs-text-shadow-strong: 0 2px 16px rgba(0, 0, 0, 0.95);
}

/* ---- Hintergrund-Layer ---- */
.hyperspeed-bg,
.landing-bg,
.shop-plan-fx {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: #000000;
}

.hyperspeed-bg canvas,
.landing-bg canvas,
.shop-plan-fx canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    pointer-events: none;
}

.hyperspeed-overlay,
.landing-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: var(--hs-overlay);
    pointer-events: none;
}

html:has(body.app-hyperspeed),
body.app-hyperspeed {
    background-color: #000000 !important;
}

/* Alle interaktiven Elemente sind IMMER klickbar */
body.app-hyperspeed button,
body.app-hyperspeed a,
body.app-hyperspeed input,
body.app-hyperspeed select,
body.app-hyperspeed textarea,
body.app-hyperspeed [role="button"],
body.app-hyperspeed [onclick],
body.app-hyperspeed .btn,
body.app-hyperspeed .btn-inquiry,
body.app-hyperspeed .modal-close,
body.app-hyperspeed .nav-item,
body.app-hyperspeed .user-menu,
body.app-hyperspeed .product-card,
body.app-hyperspeed .product-card-footer,
body.app-hyperspeed .modal-overlay.active,
body.app-hyperspeed .modal-overlay.active * {
    pointer-events: auto !important;
}

/* Alles oberhalb des Hintergrunds ist normal klickbar */
.app-shell,
.landing-page,
.landing-content,
.auth-page-content,
.dashboard {
    position: relative;
    z-index: 10;
}

#shop-body > :not(.hyperspeed-bg):not(.landing-bg):not(.shop-plan-fx):not(.hyperspeed-overlay):not(.landing-overlay):not(.modal-overlay):not(.inquiry-caption) {
    position: relative;
    z-index: 2;
}

body.app-hyperspeed .sidebar {
    z-index: 1000 !important;
}

body.app-hyperspeed .dashboard-portal-overlay.open,
body.app-hyperspeed #createShopOverlay:not([hidden]) {
    z-index: 70000 !important;
}

body.app-hyperspeed #productFormOverlay.open,
body.app-hyperspeed #telegramSetupOverlay.open,
body.app-hyperspeed #dangerActionOverlay.open {
    z-index: 70000 !important;
}

body.app-hyperspeed#shop-body > .shop-header {
    z-index: 300 !important;
}

body.app-hyperspeed#shop-body > .shop-main,
body.app-hyperspeed#shop-body > .shop-footer {
    position: relative;
    z-index: 20 !important;
}

body.app-hyperspeed#shop-body .modal-overlay {
    position: fixed !important;
    inset: 0;
    z-index: 60000 !important;
}

body.app-hyperspeed#shop-body .inquiry-caption {
    position: fixed !important;
    z-index: 55000 !important;
}

.landing-page {
    min-height: 100vh;
}

/* ---- Globale Tokens ---- */
body.app-hyperspeed {
    --bg: transparent;
    --surface: var(--hs-blue-bg);
    --surface-alt: var(--hs-blue-field);
    --border: var(--hs-border);
    --border-light: rgba(255, 255, 255, 0.12);
    --text-primary: var(--hs-text);
    --text-secondary: var(--hs-text-soft);
    --text-muted: var(--hs-text-muted);
    --primary-light: rgba(255, 255, 255, 0.08);
    --landing-gold: var(--hs-text);
    --landing-red: var(--hs-text);
    --landing-black: var(--hs-text-soft);

    background-color: #000000 !important;
    color: var(--hs-text);
    text-shadow: var(--hs-text-shadow);
}

/* Komplett helle Schrift */
body.app-hyperspeed,
body.app-hyperspeed h1,
body.app-hyperspeed h2,
body.app-hyperspeed h3,
body.app-hyperspeed h4,
body.app-hyperspeed h5,
body.app-hyperspeed h6,
body.app-hyperspeed p,
body.app-hyperspeed label,
body.app-hyperspeed span,
body.app-hyperspeed li,
body.app-hyperspeed td,
body.app-hyperspeed th,
body.app-hyperspeed .nav-link,
body.app-hyperspeed .nav-item,
body.app-hyperspeed .brand-text,
body.app-hyperspeed .dashboard-header-title,
body.app-hyperspeed .user-name,
body.app-hyperspeed .user-role,
body.app-hyperspeed .nav-label,
body.app-hyperspeed .settings-intro,
body.app-hyperspeed .text-muted,
body.app-hyperspeed .hero-subtitle,
body.app-hyperspeed .landing-t-gold,
body.app-hyperspeed .landing-t-red,
body.app-hyperspeed .landing-t-black,
body.app-hyperspeed .hero-rotate-word,
body.app-hyperspeed .hero-rotate-dot,
body.app-hyperspeed .browse-title,
body.app-hyperspeed .browse-subtitle,
body.app-hyperspeed .welcome-hero h1,
body.app-hyperspeed .welcome-lead,
body.app-hyperspeed .welcome-kicker,
body.app-hyperspeed .welcome-path h2,
body.app-hyperspeed .welcome-path-desc,
body.app-hyperspeed .welcome-path-label,
body.app-hyperspeed .welcome-path-features li,
body.app-hyperspeed .welcome-plans-header h2,
body.app-hyperspeed .welcome-plans-header p,
body.app-hyperspeed .welcome-plan-name,
body.app-hyperspeed .welcome-plan-tagline,
body.app-hyperspeed .welcome-plan-features li,
body.app-hyperspeed .welcome-plans-note,
body.app-hyperspeed .browse-title,
body.app-hyperspeed .browse-subtitle {
    color: var(--hs-text) !important;
    -webkit-text-fill-color: var(--hs-text);
    text-shadow: var(--hs-text-shadow-strong);
}

body.app-hyperspeed .welcome-lead,
body.app-hyperspeed .welcome-kicker,
body.app-hyperspeed .welcome-path-desc,
body.app-hyperspeed .welcome-path-label,
body.app-hyperspeed .welcome-plan-tagline,
body.app-hyperspeed .welcome-plans-header p,
body.app-hyperspeed .welcome-plans-note,
body.app-hyperspeed .welcome-plan-price .period,
body.app-hyperspeed .welcome-plan-price .yearly,
body.app-hyperspeed .browse-subtitle {
    color: var(--hs-text-soft) !important;
    -webkit-text-fill-color: var(--hs-text-soft);
    text-shadow: var(--hs-text-shadow);
}

body.app-hyperspeed a:not(.btn-primary):not(.btn) {
    color: var(--hs-text) !important;
    -webkit-text-fill-color: var(--hs-text);
}

body.app-hyperspeed a:not(.btn-primary):not(.btn):hover {
    color: #ffffff !important;
    opacity: 0.92;
}

body.app-hyperspeed .nav-link:hover,
body.app-hyperspeed .nav-item:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08);
}

body.app-hyperspeed .nav-item.active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12);
}

/* ---- Blaue Container ---- */
body.app-hyperspeed .card,
body.app-hyperspeed .modal,
body.app-hyperspeed .modal-overlay .modal,
body.app-hyperspeed .create-shop-modal,
body.app-hyperspeed .product-form-modal,
body.app-hyperspeed .danger-action-modal,
body.app-hyperspeed .welcome-path,
body.app-hyperspeed .welcome-plan,
body.app-hyperspeed .feature-card,
body.app-hyperspeed .shop-card,
body.app-hyperspeed .owner-shops-panel,
body.app-hyperspeed .plan-card,
body.app-hyperspeed .stat-card,
body.app-hyperspeed .settings-panel,
body.app-hyperspeed .account-settings-stack .card {
    background: var(--hs-blue-bg) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-color: var(--hs-border) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
    color: var(--hs-text);
}

body.app-hyperspeed .welcome-path,
body.app-hyperspeed .welcome-plan {
    border: 1px solid transparent !important;
    border-color: transparent !important;
}

body.app-hyperspeed .welcome-path::before {
    display: none;
}

body.app-hyperspeed .welcome-path-discover,
body.app-hyperspeed .welcome-path-create {
    background: var(--hs-blue-bg) !important;
}

body.app-hyperspeed .welcome-path-discover .welcome-path-icon {
    background: rgba(96, 165, 250, 0.35) !important;
    color: #ffffff !important;
}

body.app-hyperspeed .welcome-path-create .welcome-path-icon {
    background: rgba(52, 211, 153, 0.28) !important;
    color: #ffffff !important;
}

body.app-hyperspeed .welcome-path-features li::before {
    background: rgba(96, 165, 250, 0.2) !important;
    color: #93c5fd !important;
}

body.app-hyperspeed .welcome-path-stat {
    background: var(--hs-blue-field) !important;
    color: var(--hs-text) !important;
}

body.app-hyperspeed .welcome-path-stat-num {
    color: #93c5fd !important;
}

body.app-hyperspeed .welcome-path-cta {
    text-shadow: none;
}

body.app-hyperspeed .welcome-path-discover .welcome-path-cta {
    background: linear-gradient(135deg, #60a5fa, #3b82f6) !important;
    color: #ffffff !important;
}

body.app-hyperspeed .welcome-path-create .welcome-path-cta {
    background: linear-gradient(135deg, #34d399, #059669) !important;
    color: #ffffff !important;
}

body.app-hyperspeed .welcome-section-label {
    color: #93c5fd !important;
    -webkit-text-fill-color: #93c5fd;
    text-shadow: var(--hs-text-shadow);
}

body.app-hyperspeed .welcome-plan.plan-professional {
    background: var(--hs-blue-bg-strong) !important;
    border: 1px solid rgba(96, 165, 250, 0.45) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35) !important;
}

body.app-hyperspeed .welcome-plan.plan-basic,
body.app-hyperspeed .welcome-plan.plan-ultimate {
    background: var(--hs-blue-field) !important;
}

body.app-hyperspeed .welcome-plan-price .amount {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
}

body.app-hyperspeed .welcome-plan-features li::before {
    color: #93c5fd !important;
}

body.app-hyperspeed .welcome-plan-cta {
    text-shadow: none;
}

body.app-hyperspeed .welcome-plan.plan-basic .welcome-plan-cta,
body.app-hyperspeed .welcome-plan.plan-ultimate .welcome-plan-cta {
    background: rgba(96, 165, 250, 0.18) !important;
    color: #ffffff !important;
}

body.app-hyperspeed .welcome-plan.plan-professional .welcome-plan-cta {
    background: linear-gradient(135deg, #60a5fa, #3b82f6) !important;
    color: #ffffff !important;
}

body.app-hyperspeed .welcome-plan-badge.popular {
    background: linear-gradient(135deg, #60a5fa, #3b82f6) !important;
    color: #ffffff !important;
}

body.app-hyperspeed .sidebar,
body.app-hyperspeed .dashboard-header,
body.app-hyperspeed .shop-header,
body.app-hyperspeed .shop-nav,
body.app-hyperspeed .mobile-menu-btn,
body.app-hyperspeed .glossy-header,
body.app-hyperspeed .site-header {
    background: var(--hs-blue-bg-strong) !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-color: var(--hs-border) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
    color: var(--hs-text);
}

body.app-hyperspeed .dashboard,
body.app-hyperspeed .dashboard-main,
body.app-hyperspeed .dashboard-content,
body.app-hyperspeed .welcome-screen,
body.app-hyperspeed .shops-browse,
body.app-hyperspeed .browse-hero {
    background: transparent !important;
}

/* ---- Blaue Formularfelder ---- */
body.app-hyperspeed .form-control,
body.app-hyperspeed input.form-control,
body.app-hyperspeed textarea.form-control,
body.app-hyperspeed select.form-control,
body.app-hyperspeed .search-input,
body.app-hyperspeed .cs-field input,
body.app-hyperspeed .cs-field textarea,
body.app-hyperspeed .cs-field select,
body.app-hyperspeed .owner-field input,
body.app-hyperspeed .owner-field textarea,
body.app-hyperspeed .owner-field select,
body.app-hyperspeed .auth-page .form-group input,
body.app-hyperspeed input[type="text"],
body.app-hyperspeed input[type="email"],
body.app-hyperspeed input[type="password"],
body.app-hyperspeed input[type="number"],
body.app-hyperspeed input[type="search"],
body.app-hyperspeed input[type="tel"],
body.app-hyperspeed input[type="url"],
body.app-hyperspeed textarea,
body.app-hyperspeed select {
    background-color: var(--hs-blue-field) !important;
    border: 1px solid var(--hs-border) !important;
    color: var(--hs-text) !important;
    text-shadow: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

body.app-hyperspeed select.form-control,
body.app-hyperspeed .owner-field select,
body.app-hyperspeed .cs-field select,
body.app-hyperspeed select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 36px;
}

body.app-hyperspeed .search-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' opacity='0.55'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
}

body.app-hyperspeed .form-control:focus,
body.app-hyperspeed input:focus,
body.app-hyperspeed textarea:focus,
body.app-hyperspeed select:focus {
    border-color: var(--hs-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22) !important;
    outline: none;
}

body.app-hyperspeed .form-control::placeholder,
body.app-hyperspeed input::placeholder,
body.app-hyperspeed textarea::placeholder {
    color: var(--hs-text-muted) !important;
    opacity: 1;
}

body.app-hyperspeed .form-control:disabled,
body.app-hyperspeed input:disabled,
body.app-hyperspeed textarea:disabled,
body.app-hyperspeed select:disabled {
    background-color: rgba(8, 18, 52, 0.4) !important;
    color: var(--hs-text-muted) !important;
    opacity: 0.75;
}

body.app-hyperspeed .form-group label {
    color: var(--hs-text) !important;
    text-shadow: var(--hs-text-shadow);
}

body.app-hyperspeed .user-menu:hover {
    background: rgba(255, 255, 255, 0.06);
}

body.app-hyperspeed .table th {
    background: rgba(15, 35, 85, 0.45) !important;
    color: var(--hs-text) !important;
    border-color: var(--hs-border);
}

body.app-hyperspeed .table td {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--hs-text) !important;
}

body.app-hyperspeed .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Auth-Karten */
body.app-hyperspeed .auth-card,
body.app-hyperspeed .login-card,
body.app-hyperspeed .shop-page .auth-card,
body.app-hyperspeed .shop-page .account-card,
body.app-hyperspeed .search-card {
    background: var(--hs-blue-bg) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--hs-border) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.32);
    color: var(--hs-text) !important;
}

/* ---- Anfragen-Bubble: immer im Vordergrund ---- */
.dashboard-header-actions,
.shop-nav-actions,
.site-header .nav-actions,
.site-header .header-leading,
.header-content nav {
    position: relative;
    z-index: 200;
    overflow: visible;
    isolation: isolate;
}

.owner-bubble {
    position: relative;
    z-index: 201;
    overflow: visible;
    isolation: isolate;
}

body.app-hyperspeed .owner-bubble-trigger {
    background: var(--hs-blue-bg) !important;
    border-color: var(--hs-border) !important;
    color: var(--hs-text) !important;
}

body.app-hyperspeed .owner-bubble-menu {
    background: rgba(15, 35, 85, 0.96) !important;
    border-color: var(--hs-border) !important;
    color: var(--hs-text) !important;
}

body.app-hyperspeed .owner-bubble-item {
    color: var(--hs-text) !important;
}

body.app-hyperspeed .owner-bubble-item:hover {
    background: rgba(96, 165, 250, 0.12) !important;
}

body.app-hyperspeed .owner-bubble-divider {
    background: rgba(96, 165, 250, 0.25) !important;
}

.owner-bubble-count {
    z-index: 202;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    text-shadow: none;
}

.dashboard-header,
.shop-header,
.site-header {
    overflow: visible !important;
}

/* Shop storefront */
body.app-hyperspeed#shop-body {
    background: transparent !important;
    color: var(--hs-text);
}

body.app-hyperspeed#shop-body .shop-header-back,
body.app-hyperspeed#shop-body .shop-brand-name {
    color: var(--hs-text) !important;
}

body.app-hyperspeed#shop-body .shop-header-back:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
}

body.app-hyperspeed#shop-body .product-card,
body.app-hyperspeed#shop-body .shop-loading {
    background: var(--hs-blue-bg) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--hs-border);
    color: var(--hs-text);
}

body.app-hyperspeed#shop-body .slider-fade-left {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.75), transparent);
}

body.app-hyperspeed#shop-body .slider-fade-right {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.75), transparent);
}

body.app-hyperspeed#shop-body .shop-footer,
body.app-hyperspeed#shop-body .shop-footer a {
    color: var(--hs-text-soft) !important;
}

/* Embed-Vorschau: kein FX */
html.shop-embed body#shop-body .hyperspeed-bg,
html.shop-embed body#shop-body .shop-plan-fx,
html.shop-embed body#shop-body .hyperspeed-overlay {
    display: none !important;
}

html.shop-embed body#shop-body.app-hyperspeed {
    background: var(--bg, #FFFBF2) !important;
    color: var(--text-primary, #3D3428);
    text-shadow: none;
}

body.app-hyperspeed .welcome-screen::before,
body.app-hyperspeed .welcome-screen::after,
body.app-hyperspeed .browse-hero-glow,
body.app-hyperspeed .browse-hero-glow-2 {
    display: none;
}

body.app-hyperspeed .btn-ghost {
    background: var(--hs-blue-field) !important;
    border: 1px solid transparent !important;
    color: var(--hs-text) !important;
    text-shadow: var(--hs-text-shadow);
}

body.app-hyperspeed .btn-ghost:hover {
    background: var(--hs-blue-bg-strong) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

body.app-hyperspeed .hero-badge {
    background: var(--hs-blue-bg) !important;
    border-color: var(--hs-border) !important;
    color: var(--hs-text) !important;
}

body.app-hyperspeed .sidebar-plan-badge,
body.app-hyperspeed .plan-usage-summary,
body.app-hyperspeed .toolbar,
body.app-hyperspeed .settings-section {
    background: var(--hs-blue-field) !important;
}

/* Buttons behalten Füllung für Klickbarkeit */
body.app-hyperspeed .btn-primary {
    text-shadow: none;
}

/* ---- Shops-Browse: Suche blau, ohne äußere Ränder ---- */
body.app-hyperspeed .shops-browse .browse-search-box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.app-hyperspeed .shops-browse .browse-search-box:focus-within {
    border: none !important;
    box-shadow: none !important;
}

body.app-hyperspeed .shops-browse .shop-search,
body.app-hyperspeed .shops-browse #shopSearchInput {
    background-color: var(--hs-blue-field) !important;
    border: none !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    color: var(--hs-text) !important;
    border-radius: 100px;
    padding-left: 12px;
}

body.app-hyperspeed .shops-browse .shop-search:focus,
body.app-hyperspeed .shops-browse #shopSearchInput:focus {
    border: none !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22) !important;
    outline: none;
}

body.app-hyperspeed .shops-browse .shop-search::placeholder,
body.app-hyperspeed .shops-browse #shopSearchInput::placeholder {
    color: var(--hs-text-muted) !important;
}

body.app-hyperspeed .shops-browse .browse-search-icon {
    color: var(--hs-text-muted);
}

body.app-hyperspeed .shops-browse .shop-card {
    border: none !important;
}

body.app-hyperspeed .shops-browse .shop-footer {
    border-top: none !important;
}

body.app-hyperspeed .owner-shops-panel .owner-shop-item-desc,
body.app-hyperspeed .owner-shops-panel .owner-shop-add-text span,
body.app-hyperspeed .owner-shops-panel .owner-shop-item-meta {
    color: var(--hs-text-muted) !important;
}

body.app-hyperspeed .owner-shops-panel .owner-shop-item-head h4,
body.app-hyperspeed .owner-shops-panel .owner-shop-add-text strong {
    color: var(--hs-text) !important;
    text-shadow: var(--hs-text-shadow);
}

body.app-hyperspeed .owner-shop-add {
    background: rgba(255, 255, 255, 0.04) !important;
    border-top-color: var(--hs-border) !important;
}

body.app-hyperspeed .owner-shop-item + .owner-shop-item {
    border-top-color: var(--hs-border) !important;
}