/* ===== stelaraX Membership Dashboard - v1.6.2 ===== */

/* =====================================================
   DASHBOARD EIGENE SCHRIFTFARBEN
   Separiert: Header/Menu = weiß, Content = dunkel
===================================================== */

/* ===== CSS Variables ===== */
:root {
    --stx-bg: #ffffff;
    --stx-surface: #f8f9fa;
    --stx-card: #ffffff;
    --stx-card-hover: #f0f2f5;
    --stx-card-bg: #ffffff;
    --stx-text: #1a1a2e;
    --stx-text-secondary: #4a5568;
    --stx-text-muted: #718096;
    --stx-primary: #00d1ff;
    --stx-primary-hover: #00b8e0;
    --stx-danger: #e53e3e;
    --stx-success: #38a169;
    --stx-warning: #dd6b20;
    --stx-border: #e2e8f0;
    --stx-border-light: #edf2f7;
    --stx-btn-primary: #1a1a2e;
    --stx-btn-hover: #2d3748;
    --stx-input-bg: #f7fafc;
    --stx-icon-color: #4a5568;
}

/* =====================================================
   HEADER & NAVIGATION - WEISSE SCHRIFT (dunkler BG)
===================================================== */

/* Main Header - Alles weiß */
.stx-main-header,
.stx-main-header *,
.stx-main-header a,
.stx-main-header span,
.stx-main-header div {
    color: #ffffff !important;
}

/* Navigation Links */
.stx-main-nav-link,
.stx-main-nav-link:hover,
.stx-main-nav-link.is-active {
    color: #ffffff !important;
}

/* Mobile Hamburger Menu - Alles weiß */
.stx-mobile-nav,
.stx-mobile-nav *,
.stx-mobile-nav a,
.stx-mobile-nav span,
.stx-mobile-nav div {
    color: #ffffff !important;
}

.stx-mobile-nav-link,
.stx-mobile-nav-link:hover,
.stx-mobile-nav-link.is-active {
    color: #ffffff !important;
}

.stx-mobile-nav-label {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Mobile Nav Danger (Abmelden) */
.stx-mobile-nav-link.is-danger {
    color: #ef4444 !important;
}

/* Mega Menu - Weiß */
.stx-mega-panel,
.stx-mega-panel *,
.stx-mega-panel a,
.stx-mega-panel span {
    color: #ffffff !important;
}

.stx-mega-label {
    color: rgba(255, 255, 255, 0.5) !important;
}

.stx-mega-item-danger,
.stx-mega-item-danger * {
    color: #ef4444 !important;
}

/* User Dropdown - Weiß */
.stx-user-dropdown,
.stx-user-dropdown * {
    color: #ffffff !important;
}

/* =====================================================
   TAB-SPEZIFISCHES CSS - JEDER BEREICH EIGENE FARBEN
===================================================== */

/* ===== ALLGEMEINE REGELN ===== */
/* Cards haben immer hellen Hintergrund mit dunklem Text */
/* AUSNAHME: AI Tools (#stx-tab-single-area) haben dunkle Inputs */
.stx-card,
.stx-card * {
    color: #1a1a2e;
}

.stx-card .stx-card-title {
    color: #1a1a2e !important;
}

.stx-card .stx-card-subtitle {
    color: #64748b !important;
}

.stx-card label {
    color: #1a1a2e !important;
}

/* Card Inputs - NICHT in AI Tools */
.stx-card input,
.stx-card textarea,
.stx-card select {
    color: #1a1a2e !important;
}

/* AI Tools Override - höhere Spezifität */
#stx-tab-single-area .stx-card input,
#stx-tab-single-area .stx-card textarea,
#stx-tab-single-area .stx-card select,
.stx-area-fullscreen .stx-card input,
.stx-area-fullscreen .stx-card textarea,
.stx-area-fullscreen .stx-card select {
    color: #ffffff !important;
    background: #080C11 !important;
    background-color: #080C11 !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ===== 1. DASHBOARD (Overview) ===== */
#stx-tab-overview .stx-page-title {
    color: #1a1a2e !important;
}

#stx-tab-overview .stx-stat-card {
    color: #1a1a2e !important;
}

#stx-tab-overview .stx-stat-card * {
    color: #1a1a2e !important;
}

#stx-tab-overview .stx-stat-value.is-cyan {
    color: #22d3ee !important;
}

#stx-tab-overview .stx-stat-value.is-success {
    color: #10b981 !important;
}

#stx-tab-overview .stx-stat-value.is-primary {
    color: #00b8e0 !important;
}

/* Cards im Dashboard */
#stx-tab-overview .stx-card,
#stx-tab-overview .stx-card * {
    color: #1a1a2e !important;
}

#stx-tab-overview .stx-card-title {
    color: #1a1a2e !important;
}

#stx-tab-overview .stx-card-subtitle {
    color: #64748b !important;
}

/* Aktuelles Abonnement Card */
#stx-tab-overview .stx-subscription-details {
    color: #1a1a2e !important;
}

#stx-tab-overview .stx-subscription-detail-label {
    color: #718096 !important;
}

#stx-tab-overview .stx-subscription-detail-value {
    color: #1a1a2e !important;
}

/* Badge bleibt weiß */
#stx-tab-overview .stx-badge {
    color: #ffffff !important;
}

/* News Cards im Dashboard */
#stx-tab-overview .stx-news-card,
#stx-tab-overview .stx-news-card * {
    color: #1a1a2e !important;
}

#stx-tab-overview .stx-news-source {
    color: #00b8e0 !important;
}

/* ===== 2. AI TOOLS (Areas) ===== */
#stx-tab-areas .stx-page-title {
    color: #1a1a2e !important;
}

#stx-tab-areas .stx-area-card,
#stx-tab-areas .stx-area-card * {
    color: #1a1a2e !important;
}

#stx-tab-areas .stx-area-category {
    color: #00b8e0 !important;
}

/* Einzelne Area (Fullscreen/dunkler Hintergrund) */
#stx-tab-single-area {
    color: #ffffff !important;
}

#stx-tab-single-area * {
    color: #ffffff !important;
}

#stx-tab-single-area .stx-area-tabs .stx-tab-btn {
    color: #ffffff !important;
}

/* AI Tools Inputs - dunkel mit weißer Schrift - AGGRESSIVE OVERRIDE */
/* Für Content der via Shortcode/Page geladen wird */
#stx-tab-single-area input,
#stx-tab-single-area textarea,
#stx-tab-single-area select,
.stx-single-area-content input,
.stx-single-area-content textarea,
.stx-single-area-content select,
.stx-area-page-content input,
.stx-area-page-content textarea,
.stx-area-page-content select,
#stx-tab-single-area .stx-card input,
#stx-tab-single-area .stx-card textarea,
#stx-tab-single-area .stx-card select,
.stx-single-area-content .stx-card input,
.stx-single-area-content .stx-card textarea,
.stx-single-area-content .stx-card select,
.stx-area-page-content .stx-card input,
.stx-area-page-content .stx-card textarea,
.stx-area-page-content .stx-card select,
.stx-area-fullscreen input,
.stx-area-fullscreen textarea,
.stx-area-fullscreen select,
.stx-area-fullscreen .stx-card input,
.stx-area-fullscreen .stx-card textarea,
.stx-area-fullscreen .stx-card select,
body .stx-single-area-content input,
body .stx-single-area-content textarea,
body .stx-single-area-content select,
body .stx-area-page-content input,
body .stx-area-page-content textarea,
body .stx-area-page-content select,
html body .stx-single-area-content input,
html body .stx-single-area-content textarea,
html body .stx-single-area-content select {
    color: #ffffff !important;
    background: #080C11 !important;
    background-color: #080C11 !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    -webkit-text-fill-color: #ffffff !important;
}

#stx-tab-single-area input::placeholder,
#stx-tab-single-area textarea::placeholder,
.stx-single-area-content input::placeholder,
.stx-single-area-content textarea::placeholder,
.stx-area-page-content input::placeholder,
.stx-area-page-content textarea::placeholder,
.stx-area-fullscreen input::placeholder,
.stx-area-fullscreen textarea::placeholder {
    color: rgba(255,255,255,0.5) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.5) !important;
}

#stx-tab-single-area input:focus,
#stx-tab-single-area textarea:focus,
#stx-tab-single-area select:focus,
.stx-single-area-content input:focus,
.stx-single-area-content textarea:focus,
.stx-single-area-content select:focus,
.stx-area-page-content input:focus,
.stx-area-page-content textarea:focus,
.stx-area-page-content select:focus,
.stx-area-fullscreen input:focus,
.stx-area-fullscreen textarea:focus,
.stx-area-fullscreen select:focus {
    border-color: #22d3ee !important;
    outline: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Select Dropdown Optionen */
#stx-tab-single-area select option,
.stx-single-area-content select option,
.stx-area-page-content select option,
.stx-area-fullscreen select option {
    background: #080C11 !important;
    background-color: #080C11 !important;
    color: #ffffff !important;
}

#stx-tab-single-area label {
    color: #ffffff !important;
}

#stx-tab-single-area .stx-btn.is-primary {
    color: #ffffff !important;
}

/* ===== 3. STORE (Shop) ===== */
#stx-tab-shop .stx-page-title {
    color: #1a1a2e !important;
}

#stx-tab-shop .stx-product-card,
#stx-tab-shop .stx-product-card * {
    color: #1a1a2e !important;
}

/* Space Points Badge - weiße Schrift (dunkler Hintergrund) */
#stx-tab-shop .stx-product-points-badge {
    color: #ffffff !important;
}

#stx-tab-shop .stx-product-category {
    color: #00b8e0 !important;
}

#stx-tab-shop .stx-filter-btn {
    color: #1a1a2e !important;
}

#stx-tab-shop .stx-filter-btn.is-active {
    color: #ffffff !important;
}

/* Downloads Tab */
#stx-tab-downloads .stx-page-title {
    color: #1a1a2e !important;
}

#stx-tab-downloads .stx-download-card,
#stx-tab-downloads .stx-download-card * {
    color: #1a1a2e !important;
}

/* Cart Tab */
#stx-tab-cart .stx-page-title {
    color: #1a1a2e !important;
}

#stx-tab-cart .stx-cart-item,
#stx-tab-cart .stx-cart-item * {
    color: #1a1a2e !important;
}

/* Checkout Tab (dunkler Hintergrund rechts) */
#stx-tab-checkout .stx-checkout-form,
#stx-tab-checkout .stx-checkout-form * {
    color: #1a1a2e !important;
}

#stx-tab-checkout .stx-checkout-summary {
    color: #ffffff !important;
}

#stx-tab-checkout .stx-checkout-summary * {
    color: #ffffff !important;
}

#stx-tab-checkout .stx-checkout-summary input {
    color: #1a1a2e !important;
}

/* ===== 4. COMMUNITY ===== */
#stx-tab-community .stx-page-title {
    color: #1a1a2e !important;
}

#stx-tab-community .stx-post-card,
#stx-tab-community .stx-post-card * {
    color: #1a1a2e !important;
}

#stx-tab-community .stx-community-tabs .stx-tab-btn {
    color: #ffffff !important;
}

#stx-tab-community .stx-post-author {
    color: #00b8e0 !important;
}

/* ===== 5. ACADEMY ===== */
#stx-tab-academy .stx-page-title {
    color: #1a1a2e !important;
}

#stx-tab-academy .stx-academy-card,
#stx-tab-academy .stx-academy-card * {
    color: #1a1a2e !important;
}

#stx-tab-academy .stx-lesson-card,
#stx-tab-academy .stx-lesson-card * {
    color: #1a1a2e !important;
}

/* ===== 6. EINSTELLUNGEN (Settings) ===== */
#stx-tab-settings .stx-page-title {
    color: #1a1a2e !important;
}

#stx-tab-settings .stx-settings-nav a {
    color: #1a1a2e !important;
}

#stx-tab-settings .stx-settings-nav a.is-active {
    color: #00b8e0 !important;
}

/* Profil Card */
#stx-tab-settings .stx-profile-card,
#stx-tab-settings .stx-profile-card * {
    color: #1a1a2e !important;
}

/* Einstellungen Cards */
#stx-tab-settings .stx-card,
#stx-tab-settings .stx-card * {
    color: #1a1a2e !important;
}

#stx-tab-settings .stx-card .stx-card-subtitle {
    color: #64748b !important;
}

#stx-tab-settings .stx-card label {
    color: #1a1a2e !important;
}

/* Settings Sections - Überschriften und Texte */
#stx-tab-settings .stx-settings-section h3 {
    color: #1a1a2e !important;
}

#stx-tab-settings .stx-settings-section label {
    color: #00b8e0 !important;
}

#stx-tab-settings .stx-settings-section p {
    color: #4a5568 !important;
}

#stx-tab-settings .stx-settings-section span {
    color: #1a1a2e !important;
}

/* Card Titles und Headers */
#stx-tab-settings .stx-card-title {
    color: #1a1a2e !important;
}

#stx-tab-settings .stx-card-header h3 {
    color: #1a1a2e !important;
}

/* Form Labels - Cyan für bessere Sichtbarkeit */
#stx-tab-settings .stx-form-group label {
    color: #00b8e0 !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

/* Form Input Hints */
#stx-tab-settings .stx-input-hint,
#stx-tab-settings .stx-form-hint {
    color: #718096 !important;
}

/* Profile Status Info */
#stx-tab-settings .stx-profile-status-info span {
    color: #1a1a2e !important;
}

#stx-tab-settings .stx-profile-status-info p {
    color: #4a5568 !important;
}

/* Mitglied seit Badge */
#stx-tab-settings .stx-badge {
    color: #ffffff !important;
}

/* Username Display */
#stx-tab-settings .stx-username-display {
    color: #1a1a2e !important;
}

/* Checkbox Labels */
#stx-tab-settings .stx-checkbox-label,
#stx-tab-settings input[type="checkbox"] + label,
#stx-tab-settings input[type="checkbox"] + span {
    color: #1a1a2e !important;
}

/* Zahlungsinformationen */
#stx-tab-settings .stx-payment-info p {
    color: #4a5568 !important;
}

/* Letzte Aktivitäten */
#stx-tab-settings .stx-activity-item span {
    color: #1a1a2e !important;
}

#stx-tab-settings .stx-activity-date {
    color: #718096 !important;
}

/* Stat Cards (heller Hintergrund) */
#stx-tab-settings .stx-stat-card {
    color: #1a1a2e !important;
}

#stx-tab-settings .stx-stat-card * {
    color: #1a1a2e !important;
}

#stx-tab-settings .stx-stat-label {
    color: #718096 !important;
}

#stx-tab-settings .stx-stat-value {
    color: #1a1a2e !important;
}

/* Zahlungsmethoden */
#stx-tab-settings .stx-payment-methods p {
    color: #4a5568 !important;
}

/* Space Points Box (dunkler Hintergrund) - bleibt weiß */
#stx-tab-settings .stx-points-balance-card,
#stx-tab-settings .stx-points-balance-card * {
    color: #ffffff !important;
}

/* Rechnungen Tabelle */
#stx-tab-settings .stx-invoice-table th {
    color: #ffffff !important;
}

#stx-tab-settings .stx-invoice-table td {
    color: #1a1a2e !important;
}

/* Invoice Cards Mobile */
#stx-tab-settings .stx-invoice-card,
#stx-tab-settings .stx-invoice-card * {
    color: #1a1a2e !important;
}

/* ===== 7. SUBSCRIPTION ===== */
#stx-tab-subscription .stx-page-title {
    color: #1a1a2e !important;
}

#stx-tab-subscription .stx-plan-card,
#stx-tab-subscription .stx-plan-card * {
    color: #1a1a2e !important;
}

/* Subscription Tab - Alle Texte dunkel (heller Hintergrund) */
#stx-tab-subscription .stx-catalog-section-header h3 {
    color: #1a1a2e !important;
}

#stx-tab-subscription .stx-product-name {
    color: #1a1a2e !important;
}

#stx-tab-subscription .stx-product-price,
#stx-tab-subscription .stx-product-price .woocommerce-Price-amount,
#stx-tab-subscription .stx-product-price .woocommerce-Price-amount bdi,
#stx-tab-subscription .stx-product-price .amount {
    color: #1a1a2e !important;
}

#stx-tab-subscription .stx-product-desc {
    color: #4a5568 !important;
}

#stx-tab-subscription .stx-product-period {
    color: #718096 !important;
}

#stx-tab-subscription .stx-info-banner-content strong {
    color: #1a1a2e !important;
}

#stx-tab-subscription .stx-info-banner-content p {
    color: #4a5568 !important;
}

#stx-tab-subscription .stx-active-plan-details h4 {
    color: #1a1a2e !important;
}

#stx-tab-subscription .stx-active-plan-details p {
    color: #4a5568 !important;
}

#stx-tab-subscription .stx-addon-name {
    color: #1a1a2e !important;
}

#stx-tab-subscription .stx-addon-price {
    color: #718096 !important;
}

#stx-tab-subscription .stx-section-hint {
    color: #4a5568 !important;
}

#stx-tab-subscription .stx-section-badge {
    color: #4a5568 !important;
}

#stx-tab-subscription .stx-subscription-plan-name {
    color: #1a1a2e !important;
}

#stx-tab-subscription .stx-subscription-detail-value {
    color: #1a1a2e !important;
}

#stx-tab-subscription .stx-subscription-detail-label {
    color: #718096 !important;
}

#stx-tab-subscription .stx-card-title {
    color: #1a1a2e !important;
}

#stx-tab-subscription .stx-card-subtitle {
    color: #64748b !important;
}

/* Catalog Summary im Subscription Tab */
#stx-tab-subscription .stx-catalog-summary .stx-card-title,
#stx-tab-subscription .stx-catalog-summary h4 {
    color: #1a1a2e !important;
}

#stx-tab-subscription .stx-summary-item,
#stx-tab-subscription .stx-summary-item span {
    color: #1a1a2e !important;
}

#stx-tab-subscription .stx-summary-total,
#stx-tab-subscription .stx-summary-total span {
    color: #1a1a2e !important;
}

#stx-tab-subscription .stx-summary-total .stx-total-price {
    color: #10b981 !important;
}

#stx-tab-subscription .stx-summary-empty {
    color: #718096 !important;
}

#stx-tab-subscription .stx-summary-hint {
    color: #718096 !important;
}

/* Summary Box Texte im Subscription Tab */
#stx-tab-subscription .stx-summary-title {
    color: #1a1a2e !important;
}

#stx-tab-subscription .stx-summary-value {
    color: #1a1a2e !important;
}

#stx-tab-subscription .stx-summary-label {
    color: #718096 !important;
}

#stx-tab-subscription .stx-summary-total span {
    color: #1a1a2e !important;
}

#stx-tab-subscription .stx-summary-total strong {
    color: #00b8e0 !important;
}

#stx-tab-subscription .stx-legal-text {
    color: #718096 !important;
}

/* Welcome Banner im Subscription Tab */
#stx-tab-subscription .stx-welcome-banner h3 {
    color: #1a1a2e !important;
}

#stx-tab-subscription .stx-welcome-banner p {
    color: #4a5568 !important;
}

/* Onboarding Steps */
#stx-tab-subscription .stx-step-text {
    color: #1a1a2e !important;
}

/* Product Card Code Badge */
#stx-tab-subscription .stx-product-code {
    color: #00b8e0 !important;
}

/* Bundle Badge bleibt weiß (grüner Hintergrund) */
#stx-tab-subscription .stx-bundle-badge {
    color: #ffffff !important;
}

/* Purchased Badge */
#stx-tab-subscription .stx-purchased-badge {
    color: #ffffff !important;
}

/* ===== BUTTONS - UNIVERSELL ===== */
.stx-btn.is-primary {
    color: #ffffff !important;
}

.stx-btn.is-outline {
    color: #1a1a2e !important;
    border-color: #e2e8f0 !important;
}

/* Outline Buttons auf dunklem Hintergrund */
#stx-tab-single-area .stx-btn.is-outline,
.stx-checkout-summary .stx-btn.is-outline {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.3) !important;
}

/* ===== LINKS ===== */
.stx-card a:not(.stx-btn) {
    color: #00b8e0 !important;
}

/* ===== STATUS BADGES ===== */
.stx-badge.is-success {
    background: #10b981 !important;
    color: #ffffff !important;
}

.stx-badge.is-warning {
    background: #f59e0b !important;
    color: #ffffff !important;
}

.stx-badge.is-danger {
    background: #ef4444 !important;
    color: #ffffff !important;
}

/* ===== Theme Container Override ===== */
/* Entferne Padding von Theme-Containern wenn Dashboard aktiv */
.page_content_wrap:has(.stx-app-root),
.page_content_wrap.stx-no-padding {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ===== Full Width Dashboard Container ===== */

/* Override WordPress/Theme Container Restrictions */
body.stx-dashboard-page,
body.stx-dashboard-page #page,
body.stx-dashboard-page #content,
body.stx-dashboard-page #primary,
body.stx-dashboard-page #main,
body.stx-dashboard-page .site,
body.stx-dashboard-page .site-content,
body.stx-dashboard-page .content-area,
body.stx-dashboard-page .entry-content,
body.stx-dashboard-page .post-content,
body.stx-dashboard-page .page-content,
body.stx-dashboard-page article,
body.stx-dashboard-page .elementor,
body.stx-dashboard-page .elementor-section,
body.stx-dashboard-page .elementor-container,
body.stx-dashboard-page .elementor-widget-container,
body.stx-dashboard-page .e-con,
body.stx-dashboard-page .woocommerce,
body.stx-dashboard-page .woocommerce-MyAccount-content {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Fixe grauen Balken - alle Container zwischen Content und Footer */
body.stx-dashboard-page .page_content_wrap,
body.stx-dashboard-page .content_wrap,
body.stx-dashboard-page .sc_layouts_row,
body.stx-dashboard-page .vc_row,
body.stx-dashboard-page .wpb_row,
body.stx-dashboard-page > div,
body.stx-dashboard-page #wrapper,
body.stx-dashboard-page .wrapper,
body.stx-dashboard-page .main-content,
body.stx-dashboard-page .entry,
body.stx-dashboard-page .hentry,
body.stx-dashboard-page .type-page,
body.stx-dashboard-page section,
body.stx-dashboard-page main {
    /* Background handled by theme */
}

.stx-app-root {
    background: var(--stx-bg);
    color: #ffffff;
    font-family: inherit;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%);
    padding: 0;
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Verstecke WooCommerce Navigation */
.woocommerce-account .woocommerce-MyAccount-navigation {
    display: none !important;
}

/* Stelle sicher dass Box-Sizing konsistent ist */
.stx-app-root *,
.stx-app-root *::before,
.stx-app-root *::after {
    box-sizing: border-box;
}

/* Inner Container for content - zentrierter Inhalt */
.stx-dashboard-inner {
    max-width: 1400px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 32px 40px 40px 40px;
    position: relative;
    flex: 1;
}

/* Ensure all tab content uses full width */
.stx-tab-content,
.stx-dashboard-content {
    width: 100%;
}

/* Ensure cards use full width */
.stx-settings-section,
.stx-card {
    width: 100%;
}

@media (max-width: 1100px) {
    .stx-dashboard-inner {
        padding: 24px 24px 40px 24px;
    }
}

/* ===== Typography ===== */
.stx-app-root h1,
.stx-app-root h2,
.stx-app-root h3,
.stx-app-root h4 {
    margin: 0 0 16px 0;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.stx-app-root h1 { font-size: 28px; }
.stx-app-root h2 { font-size: 22px; }
.stx-app-root h3 { font-size: 18px; }
.stx-app-root h4 { font-size: 15px; }

.stx-app-root p {
    margin: 0 0 16px 0;
    color: var(--stx-text-secondary);
    font-size: 15px;
}

.stx-app-root a {
    color: var(--stx-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.stx-app-root a:hover {
    color: var(--stx-primary-hover);
}

/* ===== SVG Icons ===== */
.stx-icon {
    width: 20px;
    height: 20px;
    stroke: var(--stx-icon-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex-shrink: 0;
}

.stx-icon.is-large {
    width: 32px;
    height: 32px;
}

.stx-icon.is-small {
    width: 16px;
    height: 16px;
}

.stx-icon.is-primary { stroke: var(--stx-primary); }
.stx-icon.is-success { stroke: var(--stx-success); }
.stx-icon.is-danger { stroke: var(--stx-danger); }
.stx-icon.is-warning { stroke: var(--stx-warning); }
.stx-icon.is-white { stroke: var(--stx-text); }

/* ===== Dashboard Header ===== */
.stx-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--stx-border);
}

.stx-dashboard-welcome {
    display: flex;
    align-items: center;
    gap: 20px;
}

.stx-user-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--stx-btn-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ffffff;
    border: 2px solid var(--stx-border-light);
    overflow: hidden;
}

.stx-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stx-dashboard-welcome h1 {
    margin: 0 0 4px 0;
    font-size: 24px;
}

.stx-dashboard-welcome p {
    margin: 0;
    color: var(--stx-text-muted);
    font-size: 14px;
}

/* ===== Buttons ===== */
.stx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--stx-btn-primary);
    color: #ffffff;
    border: 1px solid var(--stx-border-light);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.stx-btn:hover {
    background: var(--stx-btn-hover);
    border-color: var(--stx-btn-hover);
    color: #ffffff;
}

.stx-btn:active {
    transform: translateY(1px);
}

.stx-btn .stx-icon {
    stroke: currentColor;
}

.stx-btn.is-primary {
    background: var(--stx-primary);
    color: #ffffff;
    border-color: var(--stx-primary);
    font-weight: 700;
}

.stx-btn.is-primary:hover {
    background: var(--stx-primary-hover);
    border-color: var(--stx-primary-hover);
    color: #ffffff;
}

.stx-btn.is-danger {
    background: var(--stx-danger);
    color: #fff;
    border-color: var(--stx-danger);
}

.stx-btn.is-danger:hover {
    background: #e6424e;
    border-color: #e6424e;
}

.stx-btn.is-success {
    background: var(--stx-success);
    color: #ffffff;
    border-color: var(--stx-success);
}

.stx-btn.is-outline {
    background: transparent;
    border-color: var(--stx-border-light);
    color: #ffffff;
}

.stx-btn.is-outline:hover {
    background: var(--stx-btn-primary);
    border-color: var(--stx-btn-hover);
}

.stx-btn.is-block {
    width: 100%;
}

.stx-btn.is-sm {
    padding: 8px 16px;
    font-size: 13px;
}

.stx-btn.is-lg {
    padding: 16px 32px;
    font-size: 16px;
}

.stx-btn.is-loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

.stx-btn.is-loading::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: stx-spin 0.8s linear infinite;
}

@keyframes stx-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

.stx-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== Tabs Navigation ===== */
.stx-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    padding-bottom: 8px;
    border-bottom: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--stx-border) transparent;
}

.stx-tabs::-webkit-scrollbar {
    height: 4px;
}

.stx-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.stx-tabs::-webkit-scrollbar-thumb {
    background: var(--stx-border);
    border-radius: 2px;
}

.stx-tab {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--stx-text-secondary);
    background: var(--stx-btn-primary);
    border: 1px solid var(--stx-border);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.stx-tab:hover {
    background: var(--stx-btn-hover);
    color: #ffffff;
    border-color: var(--stx-btn-hover);
}

.stx-tab.is-active {
    background: var(--stx-primary);
    color: #ffffff;
    border-color: var(--stx-primary);
}

.stx-tab .stx-icon {
    stroke: var(--stx-icon-color);
}

.stx-tab:hover .stx-icon {
    stroke: var(--stx-text);
}

.stx-tab.is-active .stx-icon {
    stroke: #001923;
}

.stx-tab-content {
    display: none;
}

.stx-tab-content.is-active {
    display: block;
    animation: stx-fade-in 0.3s ease;
}

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

/* ===== Cards ===== */
.stx-card {
    background: var(--stx-card);
    border: 1px solid var(--stx-border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.stx-card:hover {
    border-color: var(--stx-border-light);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
}

.stx-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--stx-border);
}

.stx-card-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #ffffff;
}

.stx-card-subtitle {
    font-size: 14px;
    color: var(--stx-text-muted);
    margin: 4px 0 0 0;
}

/* ===== Stat Cards ===== */
.stx-stat-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

@media (max-width: 1024px) {
    .stx-stat-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .stx-stat-cards { grid-template-columns: 1fr; }
}

.stx-stat-card {
    background: var(--stx-card);
    border: 1px solid var(--stx-border);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.stx-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.stx-stat-icon .stx-icon {
    width: 32px;
    height: 32px;
}

.stx-stat-label {
    font-size: 13px;
    color: var(--stx-text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.stx-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
}

.stx-stat-value.is-success { color: var(--stx-success); }
.stx-stat-value.is-danger { color: var(--stx-danger); }
.stx-stat-value.is-primary { color: var(--stx-primary); }
.stx-stat-value.is-cyan { color: #22d3ee; }

/* Space Points Card */
.stx-space-points-card {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%) !important;
    color: #fff !important;
    position: relative;
    overflow: hidden;
}

.stx-space-points-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.stx-space-points-card .stx-stat-icon {
    font-size: 28px;
}

.stx-space-points-card .stx-stat-label {
    color: rgba(255, 255, 255, 0.8) !important;
}

.stx-space-points-card .stx-stat-value {
    color: #22d3ee !important;
    font-size: 28px;
}

/* Space Points Section in Settings */
.stx-space-points-section {
    margin-bottom: 24px;
}

.stx-points-balance-card {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    margin-bottom: 16px;
}

.stx-points-balance-value {
    font-size: 36px;
    font-weight: bold;
    color: #ffffff !important;
}

.stx-points-balance-label {
    font-size: 14px;
    color: rgba(255,255,255,0.9) !important;
    opacity: 1;
}

.stx-points-balance-worth {
    font-size: 12px;
    margin-top: 4px;
    color: rgba(255,255,255,0.8) !important;
    opacity: 1;
}

.stx-points-icon {
    color: rgba(255,255,255,0.3);
}

.stx-points-icon svg {
    width: 48px;
    height: 48px;
    stroke: rgba(255,255,255,0.3);
}

.stx-points-info {
    font-size: 13px;
    color: var(--stx-text-muted);
    margin-bottom: 20px;
}

.stx-points-history-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #ffffff;
}

.stx-points-history {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stx-points-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--stx-bg);
    border-radius: 8px;
}

.stx-points-history-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stx-points-history-reason {
    font-size: 13px;
    color: #ffffff;
}

.stx-points-history-date {
    font-size: 11px;
    color: var(--stx-text-muted);
}

.stx-points-history-amount {
    font-weight: 600;
    font-size: 14px;
}

.stx-points-history-amount.is-positive {
    color: #10b981;
}

.stx-points-history-amount.is-negative {
    color: #ef4444;
}

.stx-points-empty {
    text-align: center;
    color: var(--stx-text-muted);
    padding: 20px;
}

/* ===== Form Elements ===== */
.stx-form-group {
    margin-bottom: 20px;
}

.stx-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 8px;
}

.stx-input,
.stx-select,
.stx-textarea {
    width: 100%;
    height: 48px;
    background: var(--stx-input-bg);
    border: 1px solid var(--stx-border);
    border-radius: 8px;
    color: #ffffff;
    padding: 12px 16px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.stx-input:focus,
.stx-select:focus,
.stx-textarea:focus {
    border-color: var(--stx-primary);
    box-shadow: 0 0 0 3px rgba(0, 209, 255, 0.15);
}

.stx-input::placeholder {
    color: var(--stx-text-muted);
}

.stx-textarea {
    height: auto;
    min-height: 120px;
    resize: vertical;
}

.stx-select {
    appearance: none;
    cursor: pointer;
    padding-right: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238a9bae' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.stx-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--stx-text-secondary);
}

.stx-checkbox input {
    width: 20px;
    height: 20px;
    accent-color: var(--stx-primary);
    cursor: pointer;
}

.stx-help {
    font-size: 13px;
    color: var(--stx-text-muted);
    margin-top: 8px;
}

/* ===== Status Badges ===== */
.stx-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

.stx-badge.is-success {
    background: rgba(17, 192, 122, 0.15);
    color: var(--stx-success);
}

.stx-badge.is-danger {
    background: rgba(255, 77, 90, 0.15);
    color: var(--stx-danger);
}

.stx-badge.is-warning {
    background: rgba(255, 170, 0, 0.15);
    color: var(--stx-warning);
}

.stx-badge.is-primary {
    background: rgba(0, 209, 255, 0.15);
    color: var(--stx-primary);
}

.stx-badge.is-muted {
    background: rgba(138, 155, 174, 0.15);
    color: var(--stx-text-muted);
}

/* ===== Status Indicator ===== */
.stx-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

.stx-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--stx-text-muted);
}

.stx-status.is-active .stx-status-dot { background: var(--stx-success); }
.stx-status.is-pending .stx-status-dot { background: var(--stx-warning); }
.stx-status.is-cancelled .stx-status-dot { background: var(--stx-danger); }
.stx-status.is-expired .stx-status-dot { background: var(--stx-text-muted); }

/* ===== Areas List ===== */
.stx-areas-list {
    display: grid;
    gap: 16px;
}

.stx-area-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    background: var(--stx-card);
    border: 1px solid var(--stx-border);
    border-radius: 12px;
    transition: all 0.2s;
}

.stx-area-item:hover {
    border-color: var(--stx-border-light);
    background: var(--stx-card-hover);
}

.stx-area-item.is-locked {
    opacity: 0.6;
}

.stx-area-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stx-area-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--stx-btn-primary);
    border: 1px solid var(--stx-border);
    border-radius: 10px;
}

.stx-area-icon .stx-icon {
    width: 24px;
    height: 24px;
}

.stx-area-icon.is-locked .stx-icon {
    stroke: var(--stx-danger);
}

.stx-area-icon.is-unlocked .stx-icon {
    stroke: var(--stx-success);
}

.stx-area-name {
    font-weight: 600;
    font-size: 16px;
    margin: 0 0 4px 0;
    color: #ffffff;
}

.stx-area-meta {
    font-size: 13px;
    color: var(--stx-text-muted);
    margin: 0;
}

/* ===== Subscription Card ===== */
.stx-subscription-card {
    background: var(--stx-card);
    border: 1px solid var(--stx-border);
    border-radius: 12px;
    padding: 28px;
}

.stx-subscription-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--stx-border);
    margin-bottom: 24px;
}

.stx-subscription-plan-name {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
}

.stx-subscription-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 600px) {
    .stx-subscription-details { grid-template-columns: 1fr; }
}

.stx-subscription-detail {
    padding: 16px 0;
}

.stx-subscription-detail-label {
    font-size: 12px;
    color: var(--stx-text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.stx-subscription-detail-value {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
}

/* Add-on Tags */
.stx-addon-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 209, 255, 0.1);
    color: var(--stx-primary);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-right: 6px;
    margin-bottom: 6px;
}

.stx-addon-tag .stx-icon {
    width: 12px;
    height: 12px;
}

.stx-subscription-actions {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--stx-border);
}

/* ===== Messages / Alerts ===== */
.stx-message {
    padding: 16px 20px;
    border: 1px solid var(--stx-border);
    background: var(--stx-card);
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-radius: 10px;
}

.stx-message-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stx-message-icon .stx-icon {
    width: 20px;
    height: 20px;
}

.stx-message-content {
    flex-grow: 1;
}

.stx-message-title {
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #ffffff;
}

.stx-message-text {
    font-size: 14px;
    color: var(--stx-text-secondary);
    margin: 0;
}

.stx-message.is-success {
    border-color: rgba(17, 192, 122, 0.4);
    background: rgba(17, 192, 122, 0.1);
}
.stx-message.is-success .stx-icon { stroke: var(--stx-success); }

.stx-message.is-danger {
    border-color: rgba(255, 77, 90, 0.4);
    background: rgba(255, 77, 90, 0.1);
}
.stx-message.is-danger .stx-icon { stroke: var(--stx-danger); }

.stx-message.is-warning {
    border-color: rgba(255, 170, 0, 0.4);
    background: rgba(255, 170, 0, 0.1);
}
.stx-message.is-warning .stx-icon { stroke: var(--stx-warning); }

.stx-message.is-info {
    border-color: rgba(0, 209, 255, 0.4);
    background: rgba(0, 209, 255, 0.1);
}
.stx-message.is-info .stx-icon { stroke: var(--stx-primary); }

/* ===== Plan Cards ===== */
.stx-plan-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 1024px) {
    .stx-plan-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .stx-plan-cards { grid-template-columns: 1fr; }
}

.stx-plan-card {
    background: var(--stx-card);
    border: 1px solid var(--stx-border);
    border-radius: 0;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: all 0.3s ease;
}

.stx-plan-card:hover {
    border-color: var(--stx-border-light);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.stx-plan-card.is-highlight {
    border-color: var(--stx-primary);
    position: relative;
}

.stx-plan-card.is-highlight::before {
    content: "EMPFOHLEN";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--stx-primary);
    color: #ffffff;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 20px;
}

.stx-plan-card.is-current {
    border-color: var(--stx-success);
}

.stx-plan-name {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
}

.stx-plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stx-plan-price-value {
    font-size: 42px;
    font-weight: 800;
    color: var(--stx-primary);
}

.stx-plan-price-currency {
    font-size: 20px;
    color: var(--stx-text-muted);
}

.stx-plan-price-period {
    font-size: 15px;
    color: var(--stx-text-muted);
}

.stx-plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

.stx-plan-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    font-size: 15px;
    color: var(--stx-text-secondary);
    border-bottom: 1px solid var(--stx-border);
}

.stx-plan-feature:last-child {
    border-bottom: none;
}

.stx-plan-feature-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.stx-plan-feature-icon .stx-icon {
    width: 16px;
    height: 16px;
    stroke: var(--stx-success);
}

.stx-plan-feature.is-locked .stx-plan-feature-icon .stx-icon {
    stroke: var(--stx-danger);
}

/* ===== Login Form ===== */
.stx-login-form {
    max-width: 420px;
    margin: 40px auto;
    padding: 40px;
    background: var(--stx-card);
    border: 1px solid var(--stx-border);
    border-radius: 16px;
}

.stx-login-header {
    text-align: center;
    margin-bottom: 32px;
}

.stx-login-header h2 {
    margin-bottom: 8px;
    font-size: 26px;
}

.stx-login-header p {
    color: var(--stx-text-muted);
    font-size: 15px;
}

.stx-login-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--stx-border);
    font-size: 14px;
    color: var(--stx-text-muted);
}

.stx-login-footer a {
    color: var(--stx-primary);
}

/* ===== Settings Section ===== */
.stx-settings-section {
    background: var(--stx-card);
    border: 1px solid var(--stx-border);
    border-radius: 12px;
    padding: 28px;
    margin-bottom: 24px;
}

.stx-settings-section h3 {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--stx-border);
    font-size: 18px;
}

.stx-settings-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 600px) {
    .stx-settings-row { grid-template-columns: 1fr; }
}

/* ===== Quick Actions ===== */
.stx-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.stx-quick-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: var(--stx-card);
    border: 1px solid var(--stx-border);
    border-radius: 12px;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s;
}

.stx-quick-action:hover {
    background: var(--stx-card-hover);
    border-color: var(--stx-border-light);
    color: #ffffff;
}

.stx-quick-action-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--stx-btn-primary);
    border-radius: 10px;
}

.stx-quick-action-icon .stx-icon {
    stroke: var(--stx-primary);
}

.stx-quick-action-text {
    font-weight: 600;
    font-size: 15px;
}

/* ===== Empty State ===== */
.stx-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.stx-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.stx-empty-icon .stx-icon {
    width: 56px;
    height: 56px;
    opacity: 0.4;
}

.stx-empty-state h3 {
    color: #ffffff;
    margin-bottom: 8px;
    font-size: 20px;
}

.stx-empty-state p {
    color: var(--stx-text-muted);
    max-width: 400px;
    margin: 0 auto 24px;
}

/* ===== Loading ===== */
.stx-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px;
    color: var(--stx-text-muted);
}

.stx-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--stx-border);
    border-top-color: var(--stx-primary);
    border-radius: 50%;
    animation: stx-spin 0.8s linear infinite;
}

/* Loading Spinner Container */
.stx-loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}

.stx-loading-spinner .stx-spinner {
    width: 40px;
    height: 40px;
}

.stx-loading-spinner p {
    color: var(--stx-text-muted);
    margin: 0;
}

/* Error Message */
.stx-error-message {
    padding: 30px;
    text-align: center;
    color: var(--stx-danger);
}

/* Area Content in Modal */
.stx-area-content {
    min-height: 200px;
}

.stx-area-description {
    color: #ffffff;
    line-height: 1.7;
}

.stx-area-link {
    padding-top: 20px;
    border-top: 1px solid var(--stx-border);
    margin-top: 20px;
}

/* ===== Tables ===== */
.stx-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--stx-border);
}

.stx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.stx-table th,
.stx-table td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid var(--stx-border);
}

.stx-table th {
    font-size: 12px;
    font-weight: 600;
    color: var(--stx-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--stx-btn-primary);
}

.stx-table tbody tr {
    background: var(--stx-card);
}

.stx-table tbody tr:hover {
    background: var(--stx-card-hover);
}

.stx-table tbody tr:last-child td {
    border-bottom: none;
}

/* ===== Modal ===== */
.stx-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.stx-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.stx-modal {
    background: var(--stx-card);
    border: 1px solid var(--stx-border);
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(20px);
    transition: transform 0.3s;
}

.stx-modal-overlay.is-open .stx-modal {
    transform: translateY(0);
}

.stx-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid var(--stx-border);
}

.stx-modal-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.stx-modal-close {
    background: transparent;
    border: none;
    color: var(--stx-text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.stx-modal-close:hover {
    color: #ffffff;
}

.stx-modal-body {
    padding: 24px;
}

.stx-modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 24px;
    border-top: 1px solid var(--stx-border);
}

/* ===== Area Modal (für Shortcode-Bereiche) ===== */
#stx-area-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#stx-area-modal .stx-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

#stx-area-modal .stx-modal-container {
    position: relative;
    z-index: 1;
    background: var(--stx-card);
    border: 1px solid var(--stx-border);
    border-radius: 16px;
    max-width: 800px;
    width: 90%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

#stx-area-modal .stx-modal-container.stx-modal-lg {
    max-width: 900px;
}

#stx-area-modal .stx-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--stx-border);
    flex-shrink: 0;
}

#stx-area-modal .stx-modal-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
}

#stx-area-modal .stx-modal-close {
    background: transparent;
    border: none;
    color: var(--stx-text-muted);
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

#stx-area-modal .stx-modal-close:hover {
    background: var(--stx-surface);
    color: #ffffff;
}

#stx-area-modal .stx-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* ===== Protected Content ===== */
.stx-protected-message,
.stx-protected-page {
    text-align: center;
    padding: 60px 40px;
    background: var(--stx-card, #121c28);
    border: 1px solid var(--stx-border, #1C2A38);
    border-radius: 16px;
    max-width: 600px;
    margin: 40px auto;
}

.stx-protected-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.stx-protected-icon svg {
    width: 64px;
    height: 64px;
    stroke: var(--stx-danger, #ef4444);
}

.stx-protected-icon.stx-icon-warning svg {
    stroke: var(--stx-warning, #f39c12);
}

.stx-protected-message h3,
.stx-protected-page h2 {
    font-size: 24px;
    color: var(--stx-text, #fff);
    margin-bottom: 12px;
}

.stx-protected-message p,
.stx-protected-page p {
    max-width: 400px;
    margin: 0 auto 16px;
    color: var(--stx-text-secondary, #9CA3AF);
}

.stx-protected-plans {
    background: rgba(0, 209, 255, 0.1);
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 24px !important;
}

.stx-protected-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

.stx-protected-actions .stx-btn {
    min-width: 140px;
}

/* ===== Utilities ===== */
.stx-text-muted { color: var(--stx-text-muted) !important; }
.stx-text-success { color: var(--stx-success) !important; }
.stx-text-danger { color: var(--stx-danger) !important; }
.stx-text-warning { color: var(--stx-warning) !important; }
.stx-text-primary { color: var(--stx-primary) !important; }
.stx-text-white { color: var(--stx-text) !important; }

.stx-mt-0 { margin-top: 0 !important; }
/* ===== Info Banner ===== */
.stx-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: rgba(0, 209, 255, 0.1);
    border: 1px solid rgba(0, 209, 255, 0.3);
    border-radius: 12px;
    padding: 16px 20px;
}

.stx-info-banner-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(0, 209, 255, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stx-info-banner-icon .stx-icon {
    stroke: var(--stx-primary);
    width: 20px;
    height: 20px;
}

.stx-info-banner-content {
    flex: 1;
}

.stx-info-banner-content strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
    margin-bottom: 4px;
}

.stx-info-banner-content p {
    color: var(--stx-text-secondary);
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

.stx-info-banner.is-warning {
    background: rgba(255, 170, 0, 0.1);
    border-color: rgba(255, 170, 0, 0.3);
}

.stx-info-banner.is-warning .stx-info-banner-icon {
    background: rgba(255, 170, 0, 0.15);
}

.stx-info-banner.is-warning .stx-info-banner-icon .stx-icon {
    stroke: var(--stx-warning);
}

/* ===== Utility Classes ===== */
.stx-mt-0 { margin-top: 0 !important; }
.stx-mt-1 { margin-top: 8px !important; }
.stx-mt-2 { margin-top: 16px !important; }
.stx-mt-3 { margin-top: 24px !important; }
.stx-mb-0 { margin-bottom: 0 !important; }
.stx-mb-1 { margin-bottom: 8px !important; }
.stx-mb-2 { margin-bottom: 16px !important; }
.stx-mb-3 { margin-bottom: 24px !important; }

.stx-text-center { text-align: center; }
.stx-text-right { text-align: right; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .stx-dashboard-inner {
        padding: 24px 16px;
    }
    
    .stx-dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .stx-tabs {
        gap: 6px;
    }
    
    .stx-tab {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .stx-subscription-actions {
        flex-direction: column;
    }
    
    .stx-subscription-actions .stx-btn {
        width: 100%;
    }
    
    .stx-card {
        padding: 20px;
    }
    
    .stx-login-form {
        padding: 28px 20px;
        margin: 20px auto;
    }
}

/* ===== Invoice Specific Styles ===== */
.stx-invoice-products {
    display: block;
    font-size: 14px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stx-invoice-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.stx-invoice-summary {
    padding-top: 24px;
    border-top: 1px solid var(--stx-border);
}

/* ===== Payment Methods ===== */
.stx-payment-methods {
    display: grid;
    gap: 12px;
}

.stx-payment-method {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--stx-surface);
    border: 1px solid var(--stx-border);
    border-radius: 10px;
    transition: all 0.2s;
}

.stx-payment-method:hover {
    border-color: var(--stx-border-light);
}

.stx-payment-method-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--stx-btn-primary);
    border-radius: 10px;
}

.stx-payment-method-icon .stx-icon {
    width: 24px;
    height: 24px;
}

.stx-payment-method-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.stx-payment-method-info strong {
    color: #ffffff;
}

/* ===== Subscription Management ===== */
.stx-subscription-manage {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--stx-border);
}

.stx-upgrade-card {
    background: linear-gradient(135deg, var(--stx-card) 0%, var(--stx-card-hover) 100%);
    border: 1px solid var(--stx-primary);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.stx-upgrade-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(0, 209, 255, 0.1) 0%, transparent 70%);
}

.stx-upgrade-card h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.stx-upgrade-card h3 .stx-icon {
    stroke: var(--stx-primary);
}

.stx-upgrade-card p {
    margin-bottom: 20px;
}

.stx-upgrade-features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.stx-upgrade-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--stx-text-secondary);
}

.stx-upgrade-feature .stx-icon {
    width: 16px;
    height: 16px;
    stroke: var(--stx-success);
}

/* ===== Active Plan Card ===== */
.stx-active-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
    background: var(--stx-surface);
    border: 1px solid var(--stx-success);
    border-radius: 12px;
    margin-bottom: 24px;
}

.stx-active-plan-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stx-active-plan-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 192, 122, 0.15);
    border-radius: 12px;
}

.stx-active-plan-icon .stx-icon {
    width: 28px;
    height: 28px;
    stroke: var(--stx-success);
}

.stx-active-plan-details h4 {
    font-size: 18px;
    margin: 0 0 4px 0;
}

.stx-active-plan-details p {
    margin: 0;
    font-size: 14px;
    color: var(--stx-text-muted);
}

.stx-active-plan-actions {
    display: flex;
    gap: 12px;
}

/* ===== Add-ons Section ===== */
.stx-addons-section {
    margin-top: 24px;
}

.stx-addon-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.stx-addon-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--stx-card);
    border: 1px solid var(--stx-border);
    border-radius: 12px;
    transition: all 0.2s;
}

.stx-addon-card:hover {
    border-color: var(--stx-border-light);
}

.stx-addon-card.is-active {
    border-color: var(--stx-success);
    background: rgba(17, 192, 122, 0.05);
}

.stx-addon-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--stx-btn-primary);
    border-radius: 10px;
    flex-shrink: 0;
}

.stx-addon-info {
    flex: 1;
    min-width: 0;
}

.stx-addon-name {
    font-weight: 600;
    font-size: 15px;
    margin: 0 0 4px 0;
    color: #ffffff;
}

.stx-addon-price {
    font-size: 13px;
    color: var(--stx-text-muted);
}

.stx-addon-action {
    flex-shrink: 0;
}

/* ===== Responsive Adjustments for New Sections ===== */
@media (max-width: 768px) {
    .stx-active-plan {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .stx-active-plan-actions {
        width: 100%;
    }
    
    .stx-active-plan-actions .stx-btn {
        flex: 1;
    }
    
    .stx-invoice-actions {
        flex-direction: column;
    }
    
    .stx-invoice-actions .stx-btn {
        width: 100%;
    }
    
    .stx-payment-method {
        flex-direction: column;
        text-align: center;
    }
    
    .stx-payment-method-info {
        flex-direction: column;
    }
}

/* ===== Tab Label on Mobile ===== */
@media (max-width: 600px) {
    .stx-tab {
        padding: 10px 12px;
        font-size: 12px;
    }
    
    .stx-tab .stx-icon {
        width: 16px;
        height: 16px;
    }
}

/* Hide tab text on very small screens, show only icons */
@media (max-width: 520px) {
    .stx-tab {
        padding: 10px;
    }
    
    .stx-tab-label {
        display: none;
    }
    
    .stx-tab .stx-icon {
        margin: 0;
    }
}

/* ===== Integrated Plan Catalog ===== */
.stx-plan-catalog {
    margin-top: 24px;
}

.stx-catalog-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

@media (max-width: 1024px) {
    .stx-catalog-layout {
        grid-template-columns: 1fr;
    }
    
    /* Summary NACH dem Main Content (unten) */
    .stx-catalog-summary {
        order: 1;
    }
    
    .stx-catalog-main {
        order: 0;
    }
}

.stx-catalog-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Catalog Section */
.stx-catalog-section {
    background: var(--stx-card);
    border: 1px solid var(--stx-border);
    border-radius: 0;
    overflow: hidden;
}

.stx-catalog-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--stx-surface);
    border-bottom: 1px solid var(--stx-border);
}

.stx-catalog-section-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
}

.stx-catalog-section-header h3 .stx-icon {
    width: 20px;
    height: 20px;
    stroke: var(--stx-primary);
}

.stx-section-hint {
    font-size: 12px;
    color: var(--stx-text-muted);
    background: rgba(0, 209, 255, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
}

/* Locked Badge für gesperrte Sektionen */
.stx-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.stx-section-badge .stx-icon {
    width: 12px;
    height: 12px;
}

.stx-badge-locked {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.stx-badge-locked .stx-icon {
    stroke: #ef4444;
}

/* Deaktivierte Sektionen */
.stx-catalog-section.is-disabled-section {
    position: relative;
}

.stx-catalog-section.is-disabled-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 15, 20, 0.3);
    border-radius: 0;
    pointer-events: none;
    z-index: 1;
}

.stx-catalog-section.is-disabled-section .stx-catalog-grid {
    position: relative;
}

/* Info Banner für aktiven Plan */
.stx-info-banner-warning {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.stx-info-banner-warning .stx-info-banner-icon .stx-icon {
    stroke: #ef4444;
}

.stx-catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 16px;
}

@media (max-width: 768px) {
    .stx-catalog-grid {
        grid-template-columns: 1fr;
    }
}

/* Product Cards */
.stx-product-card {
    position: relative;
    background: var(--stx-surface);
    border: 2px solid var(--stx-border);
    border-radius: 0;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stx-product-card:hover {
    border-color: var(--stx-border-light);
    background: var(--stx-card-hover);
}

.stx-product-card.is-selected {
    border-color: var(--stx-primary);
    background: rgba(0, 209, 255, 0.05);
}

.stx-product-card.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.stx-product-card.is-bundle {
    border-color: var(--stx-success);
}

.stx-product-card.is-bundle.is-selected {
    background: rgba(17, 192, 122, 0.1);
}

.stx-bundle-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    background: var(--stx-success);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.stx-product-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.stx-product-info {
    flex: 1;
    min-width: 0;
}

.stx-product-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
}

.stx-product-code {
    display: inline-block;
    font-size: 10px;
    background: rgba(0, 209, 255, 0.15);
    color: var(--stx-primary);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.stx-product-price {
    text-align: right;
    white-space: nowrap;
}

.stx-product-price .woocommerce-Price-amount {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

.stx-product-period {
    display: block;
    font-size: 12px;
    color: var(--stx-text-muted);
    font-weight: 400;
    margin-top: 2px;
}

.stx-product-desc {
    font-size: 13px;
    color: var(--stx-text-secondary);
    margin-bottom: 12px;
    line-height: 1.5;
}

/* Product Selection */
.stx-product-select {
    margin-top: 12px;
}

.stx-select-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: var(--stx-btn-primary);
    color: #ffffff;
    border: 1px solid var(--stx-border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    position: relative;
}

/* Input ist INNERHALB des Labels - komplett verstecken */
.stx-select-btn input[type="radio"],
.stx-select-btn input[type="checkbox"],
.stx-select-btn .stx-radio,
.stx-select-btn .stx-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.stx-select-btn .stx-icon {
    display: none;
}

.stx-select-btn:hover {
    background: var(--stx-btn-hover);
    border-color: var(--stx-btn-hover);
}

/* Checked State - Input ist innerhalb des Labels */
.stx-select-btn:has(input:checked) {
    background: var(--stx-primary);
    border-color: var(--stx-primary);
    color: #ffffff;
}

.stx-select-btn.is-addon:has(input:checked) {
    background: var(--stx-primary);
    border-color: var(--stx-primary);
    color: #ffffff;
}

.stx-select-btn.is-bundle {
    background: var(--stx-success);
    border-color: var(--stx-success);
    color: #ffffff;
}

.stx-select-btn.is-bundle:has(input:checked) {
    background: var(--stx-success);
    box-shadow: 0 0 0 3px rgba(17, 192, 122, 0.3);
}

/* Summary Box */
.stx-catalog-summary {
    position: sticky;
    top: 24px;
}

/* Auf Mobile: Kein sticky, da Summary unten ist */
@media (max-width: 1024px) {
    .stx-catalog-summary {
        position: static;
    }
}

.stx-summary-box {
    background: var(--stx-card);
    border: 1px solid var(--stx-border);
    border-radius: 16px;
    padding: 24px;
}

.stx-summary-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
}

.stx-summary-title .stx-icon {
    width: 20px;
    height: 20px;
}

.stx-summary-items {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px dashed var(--stx-border);
}

.stx-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.stx-summary-label {
    font-size: 14px;
    color: var(--stx-text-muted);
}

.stx-summary-value {
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    text-align: right;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stx-summary-totals {
    padding-top: 8px;
}

.stx-summary-totals .stx-summary-row {
    font-size: 14px;
}

.stx-summary-total {
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid var(--stx-border);
}

.stx-summary-total span {
    font-weight: 600;
    color: #ffffff;
}

.stx-summary-total strong {
    font-size: 20px;
    color: var(--stx-primary);
}

.stx-checkout-btn {
    margin-top: 20px;
}

.stx-checkout-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.stx-legal-text {
    margin-top: 16px;
    font-size: 11px;
    color: var(--stx-text-muted);
    text-align: center;
    line-height: 1.5;
}

/* Aktuelle Add-ons Liste */
.stx-addons-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.stx-addon-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f0f7f4;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.stx-addon-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 200, 150, 0.15);
    border-radius: 8px;
    color: #00c896;
}

.stx-addon-icon svg {
    width: 20px;
    height: 20px;
}

.stx-addon-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stx-addon-name {
    font-weight: 600;
    color: #1a1a2e;
}

.stx-addon-validity {
    font-size: 13px;
    color: #4a5568;
}

.stx-addon-validity strong {
    color: #00c896;
}

.stx-addon-badge .stx-badge.is-success {
    background: rgba(0, 200, 150, 0.15);
    color: #00c896;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

/* Bereits gekauftes Add-on Badge */
.stx-purchased-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 200, 150, 0.9);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 2;
}

.stx-product-card.is-purchased {
    position: relative;
    border-color: rgba(0, 200, 150, 0.3);
}

.stx-product-card.is-purchased .stx-select-btn {
    background: rgba(0, 200, 150, 0.1);
    border-color: rgba(0, 200, 150, 0.3);
    color: #00c896;
    cursor: default;
}

.stx-product-card.is-purchased .stx-select-btn:hover {
    background: rgba(0, 200, 150, 0.1);
    transform: none;
}

/* Invoice Action Buttons Fix */
.stx-invoice-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.stx-invoice-actions .stx-btn.is-outline {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.stx-invoice-actions .stx-btn.is-outline:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.stx-invoice-actions .stx-btn.is-sm {
    padding: 6px 10px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stx-invoice-actions .stx-btn svg {
    width: 16px;
    height: 16px;
}

/* PDF Download Button */
.stx-invoice-actions .stx-btn.is-pdf {
    background: #00c896;
    border-color: #00c896;
    color: #fff;
}

.stx-invoice-actions .stx-btn.is-pdf:hover {
    background: #00a67d;
    border-color: #00a67d;
}

/* Rechnungstabelle Ausrichtung */
.stx-table th:nth-child(1),
.stx-table td:nth-child(1) {
    text-align: left;
    width: 12%;
}

.stx-table th:nth-child(2),
.stx-table td:nth-child(2) {
    text-align: left;
    width: 15%;
}

.stx-table th:nth-child(3),
.stx-table td:nth-child(3) {
    text-align: left;
    width: 25%;
}

.stx-table th:nth-child(4),
.stx-table td:nth-child(4) {
    text-align: right;
    width: 15%;
}

.stx-table th:nth-child(5),
.stx-table td:nth-child(5) {
    text-align: center;
    width: 15%;
}

.stx-table th:nth-child(6),
.stx-table td:nth-child(6) {
    text-align: center;
    width: 10%;
}

/* Status Badge zentrieren */
.stx-table td:nth-child(5) .stx-badge {
    display: inline-block;
}

/* Settings Tab Erweiterungen */
.stx-settings-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 24px 0 16px 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stx-required {
    color: #00c896;
}

.stx-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 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

.stx-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    padding: 12px 16px;
    background: var(--stx-input-bg, #f7fafc);
    border: 1px solid var(--stx-border, #e2e8f0);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.stx-checkbox-label:hover {
    background: var(--stx-card-hover, #f0f2f5);
    border-color: var(--stx-border-light, #edf2f7);
}

.stx-checkbox {
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex-shrink: 0;
    accent-color: var(--stx-primary, #00c896);
    cursor: pointer;
    margin-top: 2px;
}

.stx-checkbox-text {
    color: var(--stx-text, #1a1a2e);
    font-size: 14px;
    line-height: 1.5;
    flex: 1;
}

/* Dark Theme Override für Checkout */
#stx-tab-checkout .stx-checkbox-label {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

#stx-tab-checkout .stx-checkbox-label:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

#stx-tab-checkout .stx-checkbox-text {
    color: #ffffff;
}

.stx-form-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 6px;
}

.stx-settings-section-header {
    margin-bottom: 20px;
}

.stx-settings-section-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stx-badge.is-small {
    font-size: 10px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    font-weight: 500;
}

#stx-business-fields {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Registrierungsformular */
.stx-register-form {
    max-width: 520px;
    margin: 40px auto;
    padding: 40px;
    background: var(--stx-card);
    border: 1px solid var(--stx-border);
    border-radius: 16px;
}

.stx-form-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--stx-border);
}

.stx-form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 20px;
    padding-bottom: 0;
}

.stx-form-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stx-form-row {
    display: flex;
    gap: 16px;
}

.stx-form-row .stx-form-group {
    flex: 1;
}

@media (max-width: 600px) {
    .stx-form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .stx-register-form {
        padding: 24px;
        margin: 20px auto;
    }
}

/* Login Footer erweitern */
.stx-login-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

.stx-login-footer a {
    color: #00c896;
    text-decoration: none;
}

.stx-login-footer a:hover {
    text-decoration: underline;
}

/* ===== Welcome Banner & Onboarding ===== */
.stx-welcome-banner {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: linear-gradient(135deg, rgba(0, 200, 150, 0.15), rgba(0, 200, 150, 0.05));
    border: 1px solid rgba(0, 200, 150, 0.3);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.stx-welcome-icon {
    width: 48px;
    height: 48px;
    background: var(--stx-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stx-welcome-icon svg {
    width: 24px;
    height: 24px;
    color: #fff;
}

.stx-welcome-content h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #fff;
}

.stx-welcome-content p {
    color: var(--stx-text-muted);
    font-size: 15px;
    margin: 0;
}

/* Onboarding Steps */
.stx-onboarding-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: var(--stx-card);
    border: 1px solid var(--stx-border);
    border-radius: 12px;
    padding: 24px 32px;
    margin-bottom: 32px;
}

.stx-step {
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0.4;
}

.stx-step.is-completed,
.stx-step.is-active {
    opacity: 1;
}

.stx-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--stx-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--stx-text-muted);
}

.stx-step.is-completed .stx-step-number {
    background: var(--stx-primary);
    color: #fff;
}

.stx-step.is-active .stx-step-number {
    background: var(--stx-primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(0, 200, 150, 0.2);
}

.stx-step-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--stx-text-muted);
}

.stx-step.is-completed .stx-step-text,
.stx-step.is-active .stx-step-text {
    color: #fff;
}

.stx-step-connector {
    width: 60px;
    height: 2px;
    background: var(--stx-border);
    margin: 0 16px;
}

@media (max-width: 768px) {
    .stx-onboarding-steps {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }
    
    .stx-step-connector {
        width: 2px;
        height: 20px;
        margin: 0;
    }
    
    .stx-welcome-banner {
        flex-direction: column;
        text-align: center;
    }
    
    .stx-welcome-icon {
        margin: 0 auto;
    }
}

/* ===== Registration Wizard ===== */
.stx-register-wizard {
    max-width: 1140px;
    margin: 40px auto;
    padding: 0;
}

.stx-wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 32px;
    background: var(--stx-card);
    border: 1px solid var(--stx-border);
    border-radius: 12px;
    margin-bottom: 24px;
}

.stx-wizard-step {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.4;
}

.stx-wizard-step.is-active,
.stx-wizard-step.is-completed {
    opacity: 1;
}

.stx-wizard-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--stx-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--stx-text-muted);
    transition: all 0.3s ease;
}

.stx-wizard-step.is-active .stx-wizard-step-number {
    background: var(--stx-primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(0, 200, 150, 0.2);
}

.stx-wizard-step.is-completed .stx-wizard-step-number {
    background: var(--stx-primary);
    color: #fff;
}

.stx-wizard-step-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--stx-text-muted);
}

.stx-wizard-step.is-active .stx-wizard-step-text,
.stx-wizard-step.is-completed .stx-wizard-step-text {
    color: #fff;
}

.stx-wizard-step-connector {
    width: 50px;
    height: 2px;
    background: var(--stx-border);
    margin: 0 12px;
}

.stx-wizard-panel {
    display: none;
    background: var(--stx-card);
    border: 1px solid var(--stx-border);
    border-radius: 16px;
    padding: 32px;
}

.stx-wizard-panel.is-active {
    display: block;
}

.stx-wizard-header {
    text-align: center;
    margin-bottom: 28px;
}

.stx-wizard-header h2 {
    font-size: 24px;
    margin-bottom: 8px;
}

.stx-wizard-header p {
    color: var(--stx-text-muted);
}

.stx-wizard-actions {
    display: flex;
    gap: 16px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--stx-border);
}

.stx-wizard-actions .stx-btn {
    flex: 1;
}

/* Plan Selection */
.stx-plan-selection {
    margin-bottom: 28px;
}

.stx-selection-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stx-selection-hint {
    color: var(--stx-text-muted);
    font-size: 14px;
    margin-bottom: 16px;
}

.stx-plan-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.stx-plan-card {
    background: var(--stx-bg);
    border: 2px solid var(--stx-border);
    border-radius: 0;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stx-plan-card:hover {
    border-color: var(--stx-primary);
}

.stx-plan-card.is-selected {
    border-color: var(--stx-primary);
    background: rgba(0, 200, 150, 0.1);
}

.stx-plan-card.is-bundle {
    border-color: #f0ad4e;
}

.stx-plan-card.is-bundle.is-selected {
    border-color: #f0ad4e;
    background: rgba(240, 173, 78, 0.1);
}

.stx-plan-card-header h4 {
    font-size: 16px;
    margin-bottom: 8px;
}

.stx-plan-card-price {
    margin-bottom: 12px;
}

.stx-price-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--stx-primary);
}

.stx-price-period {
    font-size: 14px;
    color: var(--stx-text-muted);
}

.stx-plan-card-body {
    font-size: 14px;
    color: var(--stx-text-muted);
    margin-bottom: 16px;
    min-height: 40px;
}

.stx-plan-card-footer .stx-btn {
    width: 100%;
}

.stx-plan-card.is-selected .stx-select-plan {
    background: var(--stx-primary);
    border-color: var(--stx-primary);
}

/* Addon List */
.stx-addon-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stx-addon-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--stx-bg);
    border: 1px solid var(--stx-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stx-addon-item:hover {
    border-color: var(--stx-primary);
}

.stx-addon-item input:checked + .stx-addon-info {
    color: var(--stx-primary);
}

.stx-addon-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}

.stx-addon-name {
    font-weight: 500;
}

.stx-addon-price {
    color: var(--stx-primary);
    font-weight: 600;
}

@media (max-width: 768px) {
    .stx-wizard-steps {
        flex-direction: column;
        gap: 12px;
        padding: 20px;
    }
    
    .stx-wizard-step-connector {
        width: 2px;
        height: 20px;
        margin: 0;
    }
    
    .stx-wizard-panel {
        padding: 20px;
    }
    
    .stx-wizard-actions {
        flex-direction: column;
    }
    
    .stx-plan-cards {
        grid-template-columns: 1fr;
    }
}

/* Skip Plan Link */
.stx-skip-plan {
    text-align: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--stx-border);
}

.stx-skip-link {
    color: var(--stx-text-muted);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.stx-skip-link:hover {
    color: var(--stx-primary);
}

.stx-skip-hint {
    color: var(--stx-text-muted);
    font-size: 12px;
    margin-top: 8px;
    opacity: 0.7;
}

/* ===== Profil & Status Section ===== */
.stx-profile-header-edit {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--stx-border);
}

.stx-profile-image-wrapper {
    text-align: center;
}

.stx-profile-image-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    margin-bottom: 12px;
    border: 3px solid var(--stx-border);
    transition: border-color 0.2s ease;
}

.stx-profile-image-preview:hover {
    border-color: var(--stx-primary);
}

.stx-profile-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stx-profile-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--stx-primary), #0d7377);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stx-profile-image-placeholder span {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
}

.stx-profile-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    padding: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.stx-profile-image-preview:hover .stx-profile-image-overlay {
    opacity: 1;
}

.stx-profile-image-edit-icon {
    font-size: 16px;
}

.stx-profile-image-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.stx-profile-status-info {
    flex: 1;
}

/* User Status Badge */
.stx-user-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 12px;
}

.stx-user-status-badge.is-silver {
    background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
    color: #333;
}

.stx-user-status-badge.is-gold {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #333;
}

.stx-user-status-badge.is-platinum {
    background: linear-gradient(135deg, #E5E4E2, #B8B8B8);
    color: #333;
}

.stx-user-status-badge.is-diamond {
    background: linear-gradient(135deg, #B9F2FF, #87CEEB);
    color: #333;
}

.stx-status-icon {
    font-size: 18px;
}

.stx-status-description {
    color: var(--stx-text-muted);
    font-size: 14px;
    margin-bottom: 8px;
}

.stx-status-next {
    color: var(--stx-primary);
    font-size: 13px;
    font-weight: 500;
}

/* Small Button Variant */
.stx-btn.is-small {
    padding: 6px 14px;
    font-size: 13px;
}

.stx-btn.is-danger {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

.stx-btn.is-danger:hover {
    background: #c82333;
    border-color: #c82333;
}

.stx-btn.is-danger.is-outline {
    background: transparent;
    border-color: #dc3545;
    color: #dc3545;
}

.stx-btn.is-danger.is-outline:hover {
    background: #dc3545;
    color: #fff;
}

@media (max-width: 768px) {
    .stx-profile-header-edit {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .stx-profile-status-info {
        text-align: center;
    }
    
    .stx-username-form {
        max-width: 100%;
    }
}

/* Username Input Improvements */
.stx-username-form {
    max-width: 450px;
}

.stx-username-form .stx-form-group {
    margin-bottom: 16px;
}

.stx-username-input-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

.stx-username-prefix {
    background: var(--stx-bg);
    border: 1px solid var(--stx-border);
    border-right: none;
    padding: 10px 14px;
    border-radius: 8px 0 0 8px;
    color: var(--stx-primary);
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
}

.stx-username-input {
    border-radius: 0 8px 8px 0 !important;
    flex: 1;
    padding-right: 100px !important;
}

.stx-username-status {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
}

.stx-username-status.is-checking {
    color: var(--stx-text-muted);
}

.stx-username-status.is-available {
    color: #28a745;
}

.stx-username-status.is-taken {
    color: #dc3545;
}

.stx-username-input.is-valid {
    border-color: #28a745 !important;
}

.stx-username-input.is-invalid {
    border-color: #dc3545 !important;
}

#stx-username-save-btn {
    display: inline-block;
    min-width: 200px;
    margin-top: 8px;
}

@media (max-width: 768px) {
    .stx-username-form {
        max-width: 100%;
    }
}

/* Success Button State */
.stx-btn.is-success {
    background: #28a745 !important;
    border-color: #28a745 !important;
    color: #fff !important;
    pointer-events: none;
}

/* ===== Community Styles ===== */
.stx-community {
    max-width: 100%;
}

.stx-community-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 20px;
    flex-wrap: wrap;
}

.stx-community-title h2 {
    font-size: 24px;
    margin: 0 0 6px;
}

.stx-community-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.stx-feed-tabs {
    display: flex;
    gap: 4px;
    background: transparent !important;
    border-radius: 10px;
    padding: 0;
}

.stx-feed-tab {
    background: #22d3ee !important;
    background-color: #22d3ee !important;
    border: none !important;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    color: #fff !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stx-feed-tab:hover {
    background: #06b6d4 !important;
    background-color: #06b6d4 !important;
    color: #fff !important;
}

.stx-feed-tab.is-active {
    background: #fff !important;
    background-color: #fff !important;
    color: #1e3a5f !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Hochspezifische Überschreibung für Community Tabs */
.stx-dashboard-content .stx-feed-tabs .stx-feed-tab,
.stx-community-section .stx-feed-tabs .stx-feed-tab,
body .stx-feed-tabs .stx-feed-tab {
    background: #22d3ee !important;
    background-color: #22d3ee !important;
    color: #fff !important;
    border: none !important;
}

.stx-dashboard-content .stx-feed-tabs .stx-feed-tab:hover,
.stx-community-section .stx-feed-tabs .stx-feed-tab:hover,
body .stx-feed-tabs .stx-feed-tab:hover {
    background: #06b6d4 !important;
    background-color: #06b6d4 !important;
    color: #fff !important;
}

.stx-dashboard-content .stx-feed-tabs .stx-feed-tab.is-active,
.stx-community-section .stx-feed-tabs .stx-feed-tab.is-active,
body .stx-feed-tabs .stx-feed-tab.is-active {
    background: #fff !important;
    background-color: #fff !important;
    color: #1e3a5f !important;
}

.stx-filter-dropdowns {
    display: flex;
    gap: 12px;
}

.stx-filter-dropdowns .stx-select {
    min-width: 140px;
}

/* Community Feed */
.stx-community-feed {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Post Card */
.stx-post-card {
    background: var(--stx-card-bg);
    border: 1px solid var(--stx-border);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.stx-post-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.stx-post-card-inner {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 0;
}

.stx-post-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.stx-post-card-image {
    position: relative;
    background: var(--stx-bg);
    min-height: 180px;
}

.stx-post-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.stx-post-card-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    opacity: 0.3;
}

/* Post Header */
.stx-post-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.stx-post-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.stx-post-type-badge.is-idea {
    background: #14b8a6;
    color: #fff;
}

.stx-post-type-badge.is-analyse {
    background: #8b5cf6;
    color: #fff;
}

.stx-post-type-badge.is-education {
    background: #f59e0b;
    color: #fff;
}

.stx-post-type-badge.is-resource {
    background: #3b82f6;
    color: #fff;
}

.stx-post-type-badge.is-webinar {
    background: #ec4899;
    color: #fff;
}

.stx-post-asset-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--stx-bg);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.stx-post-asset-tag .stx-asset-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffd700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.stx-post-direction {
    font-size: 16px;
}

.stx-post-direction.is-bullish { color: #22c55e; }
.stx-post-direction.is-bearish { color: #ef4444; }
.stx-post-direction.is-neutral { color: #6b7280; }

/* Post Title & Excerpt */
.stx-post-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.3;
}

.stx-post-excerpt {
    color: var(--stx-text-muted);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Post Footer */
.stx-post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--stx-border);
}

.stx-post-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stx-post-author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.stx-post-author-info {
    display: flex;
    flex-direction: column;
}

.stx-post-author-name {
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stx-post-author-status {
    font-size: 12px;
}

.stx-post-date {
    font-size: 12px;
    color: var(--stx-text-muted);
}

.stx-post-stats {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stx-post-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--stx-text-muted);
    background: none !important;
    background-color: transparent !important;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
}

.stx-post-stat:hover {
    color: var(--stx-text-primary);
}

.stx-post-stat:focus,
.stx-post-stat:active {
    outline: none;
    background: none !important;
}

.stx-post-stat svg {
    width: 16px;
    height: 16px;
}

.stx-post-stat.is-liked {
    color: #ef4444 !important;
    background: none !important;
}

.stx-post-stat.is-liked svg {
    fill: #ef4444;
}

/* Modal Styles */
.stx-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
}

.stx-modal.is-active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.stx-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.stx-modal-container {
    position: relative;
    background: var(--stx-card-bg);
    border-radius: 16px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.stx-modal-medium {
    width: 90%;
    max-width: 500px;
}

.stx-modal-large {
    width: 90%;
    max-width: 700px;
}

.stx-modal-xlarge {
    width: 95%;
    max-width: 1100px;
}

.stx-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--stx-border);
}

.stx-modal-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.stx-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--stx-text-muted);
    line-height: 1;
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.stx-modal-close:hover {
    background: var(--stx-bg);
    color: #ffffff;
}

.stx-modal-close-outside {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    z-index: 10;
}

.stx-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.stx-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--stx-border);
}

/* Post Type Selector */
.stx-post-type-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
}

.stx-post-type-option input {
    display: none;
}

.stx-post-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: var(--stx-bg);
    border: 2px solid var(--stx-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.stx-post-type-option input:checked + .stx-post-type-card {
    border-color: var(--stx-primary);
    background: rgba(20, 184, 166, 0.1);
}

.stx-post-type-icon {
    font-size: 24px;
    margin-bottom: 6px;
}

.stx-post-type-name {
    font-size: 12px;
    font-weight: 600;
}

/* Direction Options */
.stx-direction-options {
    display: flex;
    gap: 10px;
}

.stx-direction-option {
    flex: 1;
}

.stx-direction-option input {
    display: none;
}

.stx-direction-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    background: var(--stx-bg);
    border: 2px solid var(--stx-border);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.stx-direction-option.is-bullish input:checked + span {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.stx-direction-option.is-bearish input:checked + span {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.stx-direction-option.is-neutral input:checked + span {
    border-color: #6b7280;
    background: rgba(107, 114, 128, 0.1);
}

/* File Upload */
.stx-file-upload {
    position: relative;
    border: 2px dashed var(--stx-border);
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stx-file-upload:hover {
    border-color: var(--stx-primary);
    background: rgba(20, 184, 166, 0.05);
}

.stx-file-upload input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.stx-file-upload-icon {
    font-size: 32px;
    display: block;
    margin-bottom: 8px;
}

.stx-file-preview {
    margin-top: 16px;
}

.stx-file-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
}

/* Post Detail Modal */
.stx-post-detail {
    display: grid;
    grid-template-columns: 1fr 350px;
    min-height: 500px;
}

.stx-post-detail-main {
    padding: 24px;
}

.stx-post-detail-sidebar {
    background: var(--stx-bg);
    padding: 24px;
    border-left: 1px solid var(--stx-border);
    display: flex;
    flex-direction: column;
}

.stx-post-detail-image {
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
}

.stx-post-detail-image img {
    width: 100%;
    height: auto;
}

.stx-post-detail-header {
    margin-bottom: 20px;
}

.stx-post-detail-title {
    font-size: 24px;
    font-weight: 700;
    margin: 12px 0;
    line-height: 1.3;
}

.stx-post-detail-content {
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.stx-post-detail-content p {
    margin-bottom: 16px;
}

/* Author Sidebar */
.stx-author-card {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--stx-border);
}

.stx-author-avatar-large {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin-bottom: 12px;
    border: 3px solid var(--stx-border);
}

.stx-author-name-large {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.stx-author-username {
    color: var(--stx-text-muted);
    font-size: 14px;
    margin-bottom: 12px;
}

.stx-author-bio {
    font-size: 13px;
    color: var(--stx-text-muted);
    line-height: 1.5;
    margin-bottom: 16px;
}

.stx-follow-btn {
    width: 100%;
}

.stx-follow-btn.is-following {
    background: var(--stx-bg);
    border-color: var(--stx-border);
    color: #ffffff;
}

/* Tags */
.stx-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.stx-post-tag {
    padding: 6px 12px;
    background: var(--stx-bg);
    border-radius: 20px;
    font-size: 12px;
    color: var(--stx-text-muted);
}

/* Comments Section */
.stx-comments-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.stx-comments-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
}

.stx-comments-list {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 16px;
}

.stx-comment {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.stx-comment-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.stx-comment-content {
    flex: 1;
}

.stx-comment-author {
    font-weight: 600;
    font-size: 13px;
}

.stx-comment-text {
    font-size: 13px;
    line-height: 1.4;
    margin: 4px 0;
}

.stx-comment-date {
    font-size: 11px;
    color: var(--stx-text-muted);
}

.stx-comment-form {
    display: flex;
    gap: 10px;
}

.stx-comment-form input {
    flex: 1;
}

/* Loading Spinner */
.stx-loading-spinner {
    text-align: center;
    padding: 60px 20px;
}

.stx-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--stx-border);
    border-top-color: var(--stx-primary);
    border-radius: 50%;
    animation: stx-spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

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

/* Load More */
.stx-load-more-wrap {
    text-align: center;
    padding: 24px 0;
}

/* Empty State */
.stx-community-empty {
    text-align: center;
    padding: 60px 20px;
}

.stx-community-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* Responsive */
@media (max-width: 900px) {
    .stx-post-card-inner {
        grid-template-columns: 1fr;
    }
    
    .stx-post-card-image {
        min-height: 200px;
        order: -1;
    }
    
    .stx-post-detail {
        grid-template-columns: 1fr;
    }
    
    .stx-post-detail-sidebar {
        border-left: none;
        border-top: 1px solid var(--stx-border);
    }
}

@media (max-width: 640px) {
    .stx-community-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .stx-feed-tabs {
        width: 100%;
        justify-content: center;
    }
    
    .stx-filter-dropdowns {
        width: 100%;
    }
    
    .stx-filter-dropdowns .stx-select {
        flex: 1;
    }
    
    .stx-post-type-selector {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .stx-direction-options {
        flex-direction: column;
    }
}

/* ===== Community Redesign - Dashboard Style ===== */

/* Create Post Form */
.stx-create-post-form {
    padding: 24px;
}

.stx-form-section {
    margin-bottom: 28px;
}

.stx-post-type-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.stx-post-type-card-select input {
    display: none;
}

.stx-post-type-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 12px;
    background: var(--stx-bg);
    border: 2px solid var(--stx-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.stx-post-type-card-select input:checked + .stx-post-type-card-inner {
    border-color: var(--stx-primary);
    background: rgba(20, 184, 166, 0.1);
}

.stx-post-type-card-inner:hover {
    border-color: var(--stx-primary);
}

.stx-post-type-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.stx-post-type-name {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
}

.stx-post-type-desc {
    font-size: 11px;
    color: var(--stx-text-muted);
}

.stx-form-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
}

.stx-form-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.stx-direction-buttons {
    display: flex;
    gap: 10px;
}

.stx-direction-btn {
    flex: 1;
}

.stx-direction-btn input {
    display: none;
}

.stx-direction-btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: var(--stx-bg);
    border: 2px solid var(--stx-border);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
}

.stx-direction-btn.is-bullish input:checked + span {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.stx-direction-btn.is-bearish input:checked + span {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.stx-direction-btn.is-neutral input:checked + span {
    border-color: #6b7280;
    background: rgba(107, 114, 128, 0.15);
}

/* File Drop Zone */
.stx-file-drop {
    position: relative;
    border: 2px dashed var(--stx-border);
    border-radius: 12px;
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--stx-bg);
}

.stx-file-drop:hover {
    border-color: var(--stx-primary);
    background: rgba(20, 184, 166, 0.05);
}

.stx-file-drop input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.stx-file-drop-icon {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
}

.stx-file-drop-text {
    font-size: 13px;
    color: var(--stx-text-muted);
}

.stx-file-preview img {
    max-width: 100%;
    max-height: 150px;
    border-radius: 8px;
    margin-top: 12px;
}

.stx-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--stx-border);
}

/* Community Filters in Card */
.stx-community-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.stx-filter-selects {
    display: flex;
    gap: 12px;
}

.stx-filter-selects .stx-select {
    min-width: 150px;
}

/* Feed as Card Grid */
.stx-community-feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

/* Post Card redesigned */
.stx-post-card {
    background: var(--stx-card-bg);
    border: 1px solid var(--stx-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.stx-post-card:hover {
    border-color: var(--stx-primary);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.stx-post-card-inner {
    display: flex;
    flex-direction: column;
}

.stx-post-card-image {
    position: relative;
    background: var(--stx-bg);
    height: 180px;
    overflow: hidden;
}

.stx-post-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stx-post-card-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.stx-post-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.stx-post-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.stx-post-excerpt {
    color: var(--stx-text-muted);
    font-size: 13px;
    line-height: 1.5;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
}

.stx-post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--stx-border);
    margin-top: auto;
}

.stx-post-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stx-post-author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.stx-post-author-name {
    font-weight: 500;
    font-size: 12px;
}

.stx-post-date {
    font-size: 11px;
    color: var(--stx-text-muted);
}

.stx-post-stats {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stx-post-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--stx-text-muted);
    background: none !important;
    background-color: transparent !important;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s ease;
}

.stx-post-stat:hover {
    color: var(--stx-text-primary);
    background: none !important;
    background-color: transparent !important;
}

.stx-post-stat:focus,
.stx-post-stat:active {
    outline: none;
    background: none !important;
    background-color: transparent !important;
}

.stx-post-stat svg {
    width: 14px;
    height: 14px;
}

.stx-post-stat.is-liked {
    color: #ef4444;
    background: none !important;
    background-color: transparent !important;
}

.stx-post-stat.is-liked:hover {
    color: #dc2626;
}

/* Loading State */
.stx-loading-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
}

/* Load More */
.stx-load-more {
    margin-top: 24px;
}

.stx-btn.is-full-width {
    width: 100%;
}

/* Empty State */
.stx-community-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: var(--stx-card-bg);
    border: 1px solid var(--stx-border);
    border-radius: 12px;
}

@media (max-width: 900px) {
    .stx-post-type-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .stx-form-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .stx-community-feed {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .stx-post-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stx-community-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .stx-feed-tabs {
        justify-content: center;
    }
    
    .stx-filter-selects {
        width: 100%;
    }
    
    .stx-filter-selects .stx-select {
        flex: 1;
        min-width: 0;
    }
    
    .stx-direction-buttons {
        flex-direction: column;
    }
    
    .stx-form-actions {
        flex-direction: column;
    }
    
    .stx-form-actions .stx-btn {
        width: 100%;
    }
}

/* ===== Tags Input ===== */
.stx-tags-input-wrapper {
    background: var(--stx-bg);
    border: 1px solid var(--stx-border);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-height: 46px;
    transition: border-color 0.2s ease;
}

.stx-tags-input-wrapper:focus-within {
    border-color: var(--stx-primary);
}

.stx-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.stx-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--stx-primary);
    color: #fff;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}

.stx-tag-remove {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-size: 16px;
}

.stx-tag-remove:hover {
    color: #fff;
}

.stx-tags-input {
    flex: 1;
    min-width: 120px;
    border: none;
    background: transparent;
    padding: 4px 0;
    font-size: 14px;
    color: #ffffff;
    outline: none;
}

.stx-tags-input::placeholder {
    color: var(--stx-text-muted);
}

/* SVG Icons in Post Type Cards */
.stx-post-type-svg-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    color: var(--stx-primary);
}

.stx-post-type-svg-icon svg {
    width: 100%;
    height: 100%;
}

.stx-post-type-card-select input:checked + .stx-post-type-card-inner .stx-post-type-svg-icon {
    color: var(--stx-primary);
}

/* Direction Buttons with SVG */
.stx-direction-btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.stx-direction-btn span svg {
    width: 18px;
    height: 18px;
}

/* File Drop Icon as SVG */
.stx-file-drop-icon {
    width: 36px;
    height: 36px;
    margin: 0 auto 8px;
    color: var(--stx-text-muted);
}

.stx-file-drop-icon svg {
    width: 100%;
    height: 100%;
}

.stx-file-drop:hover .stx-file-drop-icon {
    color: var(--stx-primary);
}

/* ===== Post Detail Layout ===== */
.stx-post-detail-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    margin-top: 20px;
}

.stx-post-detail-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.stx-post-detail-image {
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.stx-post-detail-image img {
    width: 100%;
    height: auto;
    display: block;
}

.stx-post-detail-body {
    padding: 24px;
}

.stx-post-detail-title {
    font-size: 28px;
    font-weight: 700;
    margin: 16px 0;
    line-height: 1.3;
}

.stx-post-meta {
    display: flex;
    gap: 16px;
    color: var(--stx-text-muted);
    font-size: 13px;
    margin-bottom: 20px;
}

.stx-post-detail-content {
    font-size: 15px;
    line-height: 1.8;
    color: #ffffff;
    margin-bottom: 24px;
}

.stx-post-external,
.stx-post-attachment {
    margin-bottom: 20px;
}

.stx-post-actions-bar {
    display: flex;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid var(--stx-border);
}

.stx-post-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--stx-bg);
    border: 1px solid var(--stx-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #ffffff;
    transition: all 0.2s ease;
}

.stx-post-action-btn:hover {
    border-color: var(--stx-primary);
}

.stx-post-action-btn svg {
    width: 20px;
    height: 20px;
}

.stx-post-action-btn.is-liked {
    color: #ef4444;
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Author Card Sidebar */
.stx-post-detail-sidebar .stx-author-card {
    padding: 24px;
}

.stx-author-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.stx-author-avatar-lg {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.stx-author-name-lg {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.stx-author-username {
    color: var(--stx-text-muted);
    font-size: 14px;
}

/* Comments Card */
.stx-comments-card {
    padding: 0;
}

.stx-comments-card .stx-card-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--stx-border);
}

.stx-comments-list {
    padding: 20px 24px;
}

.stx-comment {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.stx-comment:last-child {
    margin-bottom: 0;
}

.stx-comment-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.stx-comment-body {
    flex: 1;
}

.stx-comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.stx-comment-author {
    font-weight: 600;
    font-size: 13px;
}

.stx-comment-date {
    font-size: 12px;
    color: var(--stx-text-muted);
}

.stx-comment-text {
    font-size: 14px;
    line-height: 1.5;
}

.stx-comment-form-wrap {
    padding: 16px 24px;
    border-top: 1px solid var(--stx-border);
}

.stx-add-comment-form {
    display: flex;
    gap: 12px;
}

.stx-add-comment-form input {
    flex: 1;
}

.stx-comments-empty {
    text-align: center;
    padding: 20px;
    color: var(--stx-text-muted);
}

/* Post Detail Actions Header */
.stx-post-detail-actions {
    display: flex;
    gap: 12px;
}

.stx-btn.is-danger {
    color: #ef4444;
    border-color: #ef4444;
}

.stx-btn.is-danger:hover {
    background: #ef4444;
    color: #fff;
}

/* Direction badges in detail */
.stx-post-direction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    font-weight: 700;
}

.stx-post-direction.is-bullish {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.stx-post-direction.is-bearish {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.stx-post-direction.is-neutral {
    background: rgba(107, 114, 128, 0.2);
    color: #6b7280;
}

@media (max-width: 900px) {
    .stx-post-detail-layout {
        grid-template-columns: 1fr;
    }
    
    .stx-post-detail-sidebar {
        order: -1;
    }
}

/* ===== Hide Theme Footer when Global Footer Active ===== */
body.stx-global-footer-active footer:not(.stx-global-footer),
body.stx-global-footer-active .site-footer,
body.stx-global-footer-active #footer,
body.stx-global-footer-active .footer:not(.stx-global-footer),
body.stx-global-footer-active .elementor-location-footer {
    display: none !important;
}

/* ===== HIDE THEME FOOTER ON DASHBOARD ===== */
body.stx-dashboard-page footer:not(.stx-global-footer):not(.stx-main-footer),
body.stx-dashboard-page .site-footer,
body.stx-dashboard-page #footer,
body.stx-dashboard-page #colophon,
body.stx-dashboard-page .footer-widgets,
body.stx-dashboard-page .footer:not(.stx-global-footer):not(.stx-main-footer),
body.stx-dashboard-page .elementor-location-footer {
    display: none !important;
}

/* ===== HIDE THEME HEADER ON DASHBOARD ===== */
body.stx-dashboard-page header:not(.stx-main-header),
body.stx-dashboard-page .site-header,
body.stx-dashboard-page #masthead,
body.stx-dashboard-page .main-header,
body.stx-dashboard-page .elementor-location-header {
    display: none !important;
}

/* ===== Dashboard Main Header ===== */
.stx-main-header {
    background: #1e2a3a !important;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
    z-index: 1000;
}

.stx-main-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 112.7px;
}

.stx-header-logo {
    flex-shrink: 0;
}

.stx-header-logo .stx-logo-img {
    height: 50px;
    width: auto;
}

.stx-header-logo .stx-logo-text {
    font-size: 24px;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none;
}

/* Main Navigation */
.stx-main-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 24px;
}

.stx-main-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700 !important;
    font-family: inherit !important;
    color: #fff !important;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.stx-main-nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1);
}

.stx-main-nav-link.is-active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.15);
}

.stx-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #10b981;
    color: #fff !important;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 16px;
    line-height: 1.2;
    margin-left: 4px;
}

/* Navigation Dropdown */
.stx-nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.stx-nav-dropdown > .stx-main-nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stx-nav-arrow {
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.stx-nav-dropdown:hover .stx-nav-arrow {
    transform: rotate(180deg);
}

.stx-nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    background: #1a2332;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    margin-top: 8px;
}

.stx-nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(255, 255, 255, 0.1);
}

.stx-nav-dropdown-menu::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #1a2332;
}

.stx-nav-dropdown:hover .stx-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.stx-nav-dropdown-menu .stx-nav-dropdown-item,
.stx-nav-dropdown-menu a.stx-nav-dropdown-item,
a.stx-nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 14px;
    transition: all 0.2s ease;
}

.stx-nav-dropdown-menu .stx-nav-dropdown-item:hover,
.stx-nav-dropdown-menu a.stx-nav-dropdown-item:hover,
a.stx-nav-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff !important;
}

.stx-nav-dropdown-menu .stx-nav-dropdown-item.is-active,
.stx-nav-dropdown-menu a.stx-nav-dropdown-item.is-active,
a.stx-nav-dropdown-item.is-active {
    color: #00d4ff !important;
    background: rgba(0, 212, 255, 0.1);
}

.stx-nav-dropdown-menu .stx-nav-dropdown-item svg,
.stx-nav-dropdown-menu .stx-nav-dropdown-item .stx-icon,
.stx-nav-dropdown-item svg,
.stx-nav-dropdown-item .stx-icon {
    width: 16px;
    height: 16px;
    color: #fff !important;
    stroke: #fff !important;
    fill: none;
}

.stx-nav-dropdown-menu .stx-nav-dropdown-item:hover svg,
.stx-nav-dropdown-menu .stx-nav-dropdown-item:hover .stx-icon,
.stx-nav-dropdown-item:hover svg,
.stx-nav-dropdown-item:hover .stx-icon {
    color: #fff !important;
    stroke: #fff !important;
}

.stx-nav-dropdown-menu .stx-nav-dropdown-item .stx-nav-badge,
.stx-nav-dropdown-item .stx-nav-badge {
    margin-left: auto;
}

/* Mobile Nav Group */
.stx-mobile-nav-group {
    margin: 0;
    padding: 0;
}

.stx-mobile-nav-label {
    display: block;
    padding: 8px 16px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Toggle ist jetzt ein a-Tag mit stx-mobile-nav-link Klasse - nur Chevron zusätzlich */
.stx-mobile-nav-toggle {
    justify-content: space-between !important;
}

.stx-mobile-nav-toggle.is-open {
    color: #00d1ff !important;
}

.stx-mobile-nav-chevron {
    width: 16px;
    height: 16px;
    stroke: rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: auto;
}

.stx-mobile-nav-toggle.is-open .stx-mobile-nav-chevron {
    transform: rotate(180deg);
    stroke: #00d1ff;
}

.stx-mobile-nav-submenu {
    display: none;
    overflow: hidden;
}

.stx-mobile-nav-submenu.is-open {
    display: block;
}

.stx-mobile-nav-sub {
    padding-left: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.stx-mobile-nav-sub:hover,
.stx-mobile-nav-sub.is-active {
    color: #00d1ff !important;
}

/* User Dropdown */
.stx-header-user {
    flex-shrink: 0;
}

/* Header Actions Container */
.stx-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Cart Icon */
.stx-header-cart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.stx-header-cart:hover {
    background: rgba(255, 255, 255, 0.1);
}

.stx-header-cart svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
}

.stx-cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #10b981;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
}

.stx-user-dropdown {
    position: relative;
}

.stx-user-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent !important;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #fff !important;
}

.stx-user-toggle:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* FontAwesome Astronaut Icon */
.stx-user-toggle .fas,
.stx-user-toggle .fa-user-astronaut {
    font-size: 24px;
    color: #fff !important;
}

.stx-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #1e2a3a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 0;
    min-width: 200px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1001;
}

.stx-user-dropdown.is-open .stx-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.stx-dropdown-header {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stx-dropdown-header strong {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.stx-dropdown-header span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.stx-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: background 0.2s ease;
}

.stx-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.stx-dropdown-item .stx-icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.stx-dropdown-item.is-danger {
    color: #ef4444;
}

.stx-dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 8px 0;
}

/* Mobile Toggle */
.stx-mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.stx-mobile-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    transition: all 0.3s ease;
}

.stx-mobile-toggle.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.stx-mobile-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.stx-mobile-toggle.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* =====================================================
   MOBILE FULLSCREEN OVERLAY NAVIGATION
   Exakte Kopie des Hauptseiten-Menüs
===================================================== */
.stx-mobile-overlay {
    position: fixed;
    top: 0 !important;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh !important;
    background: #000;
    z-index: 999999999;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.stx-mobile-overlay.is-open {
    display: flex;
}

/* WordPress Admin Bar verstecken wenn Overlay offen */
body.stx-overlay-open #wpadminbar {
    display: none !important;
}

body.stx-overlay-open {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.stx-overlay-open html {
    margin-top: 0 !important;
}

/* Overlay Header */
.stx-mobile-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px;
    flex-shrink: 0;
}

.stx-mobile-overlay-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.stx-mobile-overlay-logo img,
.stx-mobile-overlay-logo .stx-logo-img {
    height: 40px;
    width: auto;
}

.stx-mobile-overlay-logo .stx-logo-text {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
}

.stx-mobile-overlay-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.stx-mobile-overlay-close svg {
    width: 24px;
    height: 24px;
    stroke: #fff;
    stroke-width: 1.5;
}

/* Overlay Navigation */
.stx-mobile-overlay-nav {
    display: flex;
    flex-direction: column;
    padding: 40px 32px 40px;
    flex: 1;
}

.stx-mobile-overlay-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 22px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
    border: none;
    background: none;
}

.stx-mobile-overlay-link:hover,
.stx-mobile-overlay-link.is-active {
    color: #fff;
}

/* Submenu Toggle Arrow - horizontaler Pfeil direkt nach Text */
.stx-mobile-overlay-arrow {
    width: 18px;
    height: 18px;
    stroke: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

/* Submenu Item Wrapper */
.stx-mobile-overlay-item {
    display: flex;
    flex-direction: column;
}

/* Submenu */
.stx-mobile-overlay-submenu {
    display: none;
    flex-direction: column;
    padding-left: 24px;
    overflow: hidden;
}

.stx-mobile-overlay-item.is-open .stx-mobile-overlay-submenu {
    display: flex;
}

.stx-mobile-overlay-sub {
    display: block !important;
    width: 100% !important;
    font-size: 18px !important;
    padding: 8px 0 !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.stx-mobile-overlay-sub:hover,
.stx-mobile-overlay-sub.is-active {
    color: #fff !important;
}

/* Divider - nur EINE Linie */
.stx-mobile-overlay-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 32px 0 24px 0;
}

/* Responsive */
@media (max-width: 1100px) {
    .stx-main-nav-link {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .stx-main-header-inner {
        padding: 0 24px;
    }
}

@media (max-width: 900px) {
    .stx-main-nav {
        display: none;
    }
    
    .stx-header-user {
        display: none;
    }
    
    .stx-mobile-toggle {
        display: flex;
    }
}

/* Mobile Header Anpassungen */
@media (max-width: 768px) {
    .stx-main-header-inner {
        padding: 0 16px;
        height: 70px;
    }
    
    .stx-header-logo .stx-logo-img {
        height: 32px;
        width: auto;
    }
    
    .stx-header-logo .stx-logo-text {
        font-size: 20px;
    }
    
    .stx-mobile-overlay-header {
        padding: 24px;
    }
    
    .stx-mobile-overlay-nav {
        padding: 32px 24px;
    }
    
    .stx-mobile-overlay-link {
        font-size: 20px;
    }
    
    .stx-mobile-toggle {
        width: 40px;
        height: 40px;
        padding: 8px;
    }
    
    .stx-mobile-toggle span {
        height: 2px;
    }
    
    .stx-header-actions {
        gap: 8px;
    }
    
    .stx-header-cart {
        width: 40px;
        height: 40px;
    }
    
    .stx-header-cart svg {
        width: 22px;
        height: 22px;
    }
}

/* ===== Global Footer ===== */
.stx-global-footer,
.stx-dashboard-footer {
    background: var(--footer-bg, #0a0a0a);
    border-top: 1px solid var(--footer-border, #1f2937);
    color: var(--footer-text, #9ca3af);
    font-family: inherit;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%);
    position: relative;
    margin-top: auto;
}

.stx-global-footer {
    position: relative;
    z-index: 100;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%);
}

.stx-footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 40px;
}

.stx-footer-disclaimer {
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--footer-border, #1f2937);
    color: var(--footer-text, #9ca3af);
}

.stx-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.stx-footer-logo img {
    height: 32px;
    width: auto;
}

.stx-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.stx-footer-nav a {
    color: var(--footer-text, #9ca3af);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.stx-footer-nav a:hover {
    color: #fff;
}

.stx-footer-copyright {
    font-size: 13px;
    color: var(--footer-text, #9ca3af);
}

@media (max-width: 768px) {
    .stx-footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    
    .stx-footer-nav {
        justify-content: center;
    }
}

/* ===== Social Features ===== */

/* Tab Badge */
.stx-tab-badge {
    background: var(--stx-danger, #ef4444);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
}

.stx-tab.is-active .stx-tab-badge {
    background: #001923;
    color: var(--stx-primary);
}

/* Messages Layout */
.stx-messages-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    min-height: 500px;
}

.stx-conversations-list {
    border-right: 1px solid var(--stx-border);
    overflow-y: auto;
    max-height: 600px;
}

.stx-conversation-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid var(--stx-border);
}

.stx-conversation-item:hover,
.stx-conversation-item.is-active {
    background: var(--stx-bg);
}

.stx-conversation-item.has-unread {
    background: rgba(16, 185, 129, 0.05);
}

.stx-conv-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.stx-conv-info {
    flex: 1;
    min-width: 0;
}

.stx-conv-name {
    font-weight: 600;
    margin-bottom: 4px;
}

.stx-conv-username {
    font-weight: 400;
    color: var(--stx-text-muted);
    font-size: 13px;
}

.stx-conv-preview {
    font-size: 13px;
    color: var(--stx-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stx-conv-preview .stx-you {
    color: var(--stx-primary);
}

.stx-conv-badge {
    background: var(--stx-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

/* Chat Area */
.stx-chat-area {
    display: flex;
    flex-direction: column;
}

.stx-chat-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--stx-text-muted);
}

.stx-chat-placeholder .stx-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.stx-chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--stx-border);
}

.stx-chat-messages {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    max-height: 400px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stx-message-bubble {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.5;
}

.stx-message-bubble.is-own {
    background: var(--stx-primary);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.stx-message-bubble.is-partner {
    background: var(--stx-bg);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.stx-message-time {
    font-size: 11px;
    color: var(--stx-text-muted);
    margin-top: 4px;
}

.stx-message-bubble.is-own .stx-message-time {
    color: rgba(255,255,255,0.7);
}

.stx-chat-input {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid var(--stx-border);
}

.stx-chat-input input {
    flex: 1;
}

/* Friends */
.stx-friends-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.stx-friend-card {
    background: var(--stx-bg);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stx-friend-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.stx-friend-avatar-lg {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
}

.stx-friend-name {
    font-weight: 600;
    margin-bottom: 4px;
}

.stx-friend-username {
    font-size: 13px;
    color: var(--stx-text-muted);
    margin-bottom: 8px;
}

.stx-friend-status {
    font-size: 12px;
    margin-bottom: 12px;
}

.stx-friend-card-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* Friend Requests */
.stx-friend-requests-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stx-friend-request {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--stx-bg);
    border-radius: 12px;
}

.stx-friend-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.stx-friend-info {
    flex: 1;
}

.stx-friend-actions {
    display: flex;
    gap: 8px;
}

/* Profile Modal/Page */
.stx-profile-header {
    position: relative;
    margin-bottom: 24px;
}

.stx-profile-cover {
    height: 200px;
    background: linear-gradient(135deg, var(--stx-primary), #1a1a2e);
    border-radius: 12px 12px 0 0;
}

.stx-profile-info {
    display: flex;
    gap: 20px;
    padding: 0 24px;
    margin-top: -50px;
}

.stx-profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid var(--stx-card-bg);
    object-fit: cover;
}

.stx-profile-details {
    padding-top: 60px;
}

.stx-profile-name {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

.stx-profile-username {
    color: var(--stx-text-muted);
    margin-bottom: 12px;
}

.stx-profile-stats {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}

.stx-profile-stat {
    text-align: center;
}

.stx-profile-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--stx-primary);
}

.stx-profile-stat-label {
    font-size: 12px;
    color: var(--stx-text-muted);
}

.stx-profile-actions {
    display: flex;
    gap: 12px;
}

/* Star Rating */
.stx-star-rating {
    display: flex;
    gap: 4px;
}

.stx-star {
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: var(--stx-border);
    transition: color 0.2s;
}

.stx-star.is-filled,
.stx-star:hover {
    color: #fbbf24;
}

.stx-star-rating:hover .stx-star {
    color: #fbbf24;
}

.stx-star-rating:hover .stx-star:hover ~ .stx-star {
    color: var(--stx-border);
}

.stx-rating-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stx-rating-value {
    font-weight: 600;
}

.stx-rating-count {
    color: var(--stx-text-muted);
    font-size: 13px;
}

/* User Profile Link in Posts */
.stx-user-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.stx-user-link:hover {
    color: var(--stx-primary);
}

/* Responsive */
@media (max-width: 900px) {
    .stx-messages-layout {
        grid-template-columns: 1fr;
    }
    
    .stx-conversations-list {
        border-right: none;
        border-bottom: 1px solid var(--stx-border);
        max-height: 300px;
    }
    
    .stx-chat-area {
        min-height: 400px;
    }
    
    .stx-friends-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

/* Profile View Page (in Community) */
.stx-profile-view {
    max-width: 800px;
    margin: 0 auto;
}

.stx-profile-bio {
    color: var(--stx-text-muted);
    margin-bottom: 20px;
    line-height: 1.6;
}

.stx-profile-member-since {
    font-size: 13px;
    color: var(--stx-text-muted);
}

.stx-profile-posts {
    margin-top: 24px;
}

.stx-profile-posts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* ===== CRITICAL: Header Color Overrides ===== */
.stx-main-header,
body.stx-dashboard-page .stx-main-header,
.stx-dashboard-page .stx-main-header {
    background: #1e2a3a !important;
    background-color: #1e2a3a !important;
}

.stx-main-nav-link,
body.stx-dashboard-page .stx-main-nav-link,
.stx-main-header .stx-main-nav-link {
    color: #fff !important;
    font-weight: 700 !important;
    font-family: inherit !important;
}

.stx-user-toggle,
.stx-user-toggle i,
.stx-user-toggle .fas,
.stx-user-toggle .fa-user-astronaut {
    color: #fff !important;
}

/* ===== News Grid ===== */
.stx-news-section {
    margin-top: 32px;
}

.stx-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.stx-news-card {
    background: var(--stx-card);
    border: 1px solid var(--stx-border);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.stx-news-card:hover {
    border-color: var(--stx-primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.stx-news-image {
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: var(--stx-bg);
}

.stx-news-image.stx-news-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e2a3a 0%, #0A0F14 100%);
}

.stx-news-image.stx-news-placeholder i {
    font-size: 40px;
    color: var(--stx-text-muted);
    opacity: 0.5;
}

.stx-news-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.stx-news-source {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--stx-primary);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.stx-news-title {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 8px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.stx-news-summary {
    font-size: 13px;
    color: var(--stx-text-muted);
    margin: 0 0 12px 0;
    line-height: 1.5;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.stx-news-date {
    font-size: 11px;
    color: var(--stx-text-muted);
    opacity: 0.7;
}

.stx-news-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--stx-text-muted);
}

.stx-news-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.stx-news-empty p {
    margin: 0;
}

/* Responsive News Grid */
@media (max-width: 1024px) {
    .stx-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .stx-news-grid {
        grid-template-columns: 1fr;
    }
    
    .stx-news-image {
        height: 140px;
    }
}

/* Refresh Button Loading State */
#stx-refresh-news.is-loading {
    pointer-events: none;
    opacity: 0.7;
}

#stx-refresh-news.is-loading .stx-icon {
    animation: stx-spin 1s linear infinite;
}

@keyframes stx-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== Areas Accordion ===== */
.stx-areas-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stx-area-accordion-item {
    background: var(--stx-card);
    border: 1px solid var(--stx-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.stx-area-accordion-item.is-locked {
    opacity: 0.7;
}

.stx-area-accordion-item.is-open {
    border-color: var(--stx-primary);
}

.stx-area-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    cursor: default;
}

.stx-area-accordion-item.is-open .stx-area-accordion-header {
    border-bottom: 1px solid var(--stx-border);
}

.stx-area-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stx-area-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stx-area-icon.is-unlocked {
    background: rgba(16, 185, 129, 0.15);
    color: var(--stx-primary);
}

.stx-area-icon.is-locked {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.stx-area-icon svg {
    width: 24px;
    height: 24px;
}

.stx-area-name {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #ffffff;
}

.stx-area-meta {
    font-size: 13px;
    color: var(--stx-text-muted);
    margin: 0;
}

.stx-area-action {
    flex-shrink: 0;
}

/* Toggle Button */
.stx-area-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.stx-area-toggle .stx-toggle-icon {
    transition: transform 0.3s ease;
}

.stx-area-toggle .stx-toggle-icon svg {
    width: 16px;
    height: 16px;
}

.stx-area-accordion-item.is-open .stx-area-toggle .stx-toggle-icon {
    transform: rotate(180deg);
}

.stx-area-accordion-item.is-open .stx-area-toggle .stx-toggle-text::before {
    content: "Schließen";
}

.stx-area-accordion-item.is-open .stx-area-toggle .stx-toggle-text {
    font-size: 0;
}

.stx-area-accordion-item.is-open .stx-area-toggle .stx-toggle-text::before {
    font-size: 14px;
}

/* Accordion Content */
.stx-area-accordion-content {
    padding: 0;
    background: var(--stx-bg);
}

.stx-area-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--stx-text-muted);
    gap: 16px;
}

.stx-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--stx-border);
    border-top-color: var(--stx-primary);
    border-radius: 50%;
    animation: stx-spin 0.8s linear infinite;
}

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

/* Area Content Styles - Shortcode bekommt volle Breite */
.stx-area-accordion-content .stx-area-rendered {
    width: 100%;
    padding: 24px;
}

/* WICHTIG: Shortcode-Styles NICHT überschreiben */
.stx-area-rendered,
.stx-area-rendered * {
    box-sizing: border-box;
}

/* Volle Breite für alle Shortcode-Container */
.stx-area-rendered > div,
.stx-area-rendered > section,
.stx-area-rendered > form {
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Layouts im Shortcode */
.stx-area-rendered [class*="grid"],
.stx-area-rendered [class*="row"],
.stx-area-rendered [class*="columns"] {
    width: 100% !important;
}

/* Inputs und Selects volle Breite */
.stx-area-rendered input[type="text"],
.stx-area-rendered input[type="number"],
.stx-area-rendered select,
.stx-area-rendered textarea {
    max-width: 100%;
}

/* TradingView Widget Support */
.stx-area-rendered .tradingview-widget-container,
.stx-area-rendered .tv-lightweight-charts,
.stx-area-rendered iframe {
    width: 100% !important;
    max-width: 100% !important;
}

/* Signal Cards */
.stx-area-rendered .signal-card,
.stx-area-rendered [class*="signal"] {
    width: 100%;
}

/* Responsive */
@media (max-width: 600px) {
    .stx-area-accordion-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .stx-area-action {
        width: 100%;
    }
    
    .stx-area-action .stx-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Scroll to top button and similar widgets - hide on dashboard */
body.stx-dashboard-page .trx_addons_scroll_to_top,
body.stx-dashboard-page .scroll-to-top,
body.stx-dashboard-page .back-to-top,
body.stx-dashboard-page #scroll-top,
body.stx-dashboard-page .scrollup,
body.stx-dashboard-page [class*="scroll-to-top"],
body.stx-dashboard-page [class*="back-to-top"] {
    display: none !important;
}

/* Share buttons bar */
body.stx-dashboard-page .share_buttons,
body.stx-dashboard-page .social-share,
body.stx-dashboard-page .post-share,
body.stx-dashboard-page [class*="share-buttons"],
body.stx-dashboard-page [class*="social-share"] {
    display: none !important;
}

/* Comments section */
body.stx-dashboard-page #comments,
body.stx-dashboard-page .comments-area {
    display: none !important;
}

/* Post navigation */
body.stx-dashboard-page .post-navigation,
body.stx-dashboard-page .nav-links,
body.stx-dashboard-page .navigation {
    display: none !important;
}

/* ===== stelaraXcommerce - Shop Styles ===== */

/* Shop Filters */
.stx-shop-filters {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 16px;
    border-top: 1px solid var(--stx-border);
}

.stx-shop-filter-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.stx-shop-filter-group:first-child {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--stx-border);
}

.stx-shop-filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.stx-category-tabs {
    /* Kategorien etwas anders stylen */
}

.stx-filter-tab {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--stx-text-muted);
    background: var(--stx-bg);
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid var(--stx-border);
}

.stx-filter-tab:hover {
    color: #fff;
    border-color: var(--stx-primary);
}

.stx-filter-tab.is-active {
    background: var(--stx-primary);
    color: #fff;
    border-color: var(--stx-primary);
}

/* Kategorie-Tabs mit anderem Stil wenn nicht aktiv */
.stx-filter-tab.is-category {
    background: transparent;
    border-color: var(--stx-border);
}

.stx-filter-tab.is-category:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--stx-primary);
}

.stx-filter-tab.is-category.is-active {
    background: var(--stx-primary);
    color: #fff;
    border-color: var(--stx-primary);
}

/* Shop Search - Idle State Design */
.stx-shop-search {
    margin-left: auto;
}

.stx-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--stx-card, #1a2332);
    border: 1px solid var(--stx-border, rgba(255,255,255,0.1));
    border-radius: 12px;
    padding: 0 16px;
    min-width: 280px;
    transition: all 0.2s ease;
}

.stx-search-input-wrapper:focus-within {
    border-color: var(--stx-primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.stx-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--stx-text-muted, rgba(255,255,255,0.4));
    margin-right: 12px;
    flex-shrink: 0;
}

.stx-search-icon .stx-icon {
    width: 18px;
    height: 18px;
}

.stx-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 0;
    font-size: 14px;
    color: var(--stx-text, #ffffff);
    outline: none;
    min-width: 0;
}

.stx-search-input::placeholder {
    color: var(--stx-text-muted, rgba(255,255,255,0.4));
}

.stx-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: none;
    cursor: pointer;
    color: var(--stx-text-muted);
    margin-left: 8px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.stx-search-clear:hover {
    background: rgba(255,255,255,0.2);
    color: #ffffff;
}

.stx-search-clear .stx-icon {
    width: 14px;
    height: 14px;
}

/* Products Grid */
.stx-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 24px;
}

/* Product Card */
.stx-product-card {
    background: var(--stx-card);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--stx-border);
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.stx-product-card:hover {
    border-color: var(--stx-primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.stx-product-card.is-featured {
    border-color: var(--stx-primary);
}

.stx-product-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    z-index: 2;
}

.stx-product-badge.is-featured {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}

.stx-product-badge.is-free {
    background: var(--stx-primary);
    color: #fff;
}

.stx-product-badge.is-sale {
    background: #ef4444;
    color: #fff;
}

.stx-product-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #f0f2f5;
}

.stx-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.stx-product-card:hover .stx-product-image img {
    transform: scale(1.05);
}

.stx-product-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--stx-text-muted);
}

.stx-product-placeholder svg {
    width: 48px;
    height: 48px;
    opacity: 0.3;
}

.stx-product-content {
    padding: 20px;
}

.stx-product-category {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--stx-primary);
    font-weight: 500;
    margin-bottom: 8px;
}

.stx-product-category svg {
    width: 14px;
    height: 14px;
}

.stx-product-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.stx-product-description {
    font-size: 14px;
    color: var(--stx-text-muted);
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.stx-product-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--stx-text-muted);
    margin-bottom: 16px;
}

.stx-product-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stx-product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--stx-border);
}

.stx-product-price {
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.stx-price-free {
    color: var(--stx-primary);
}

.stx-price-old {
    color: var(--stx-text-muted);
    font-size: 14px;
    margin-right: 8px;
}

.stx-price-sale {
    color: #ef4444;
}

/* Space Points Badge auf Produkt-Cards */
.stx-product-points-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(30, 58, 95, 0.9);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 2;
    white-space: nowrap;
}

.stx-product-locked {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--stx-text-muted);
}

/* Downloads List */
.stx-downloads-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

.stx-download-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--stx-card);
    border-radius: 12px;
    border: 1px solid var(--stx-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.stx-download-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--stx-card);
}

.stx-download-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stx-download-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--stx-text-muted);
}

.stx-download-placeholder svg {
    width: 32px;
    height: 32px;
    opacity: 0.3;
}

.stx-download-info {
    flex: 1;
    min-width: 0;
}

.stx-download-category {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--stx-primary);
    font-weight: 500;
    margin-bottom: 4px;
}

.stx-download-category svg {
    width: 14px;
    height: 14px;
}

.stx-download-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b !important;
    margin: 0 0 8px 0;
}

.stx-download-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: #64748b !important;
}

.stx-download-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748b !important;
}

.stx-download-meta svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.stx-download-actions {
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .stx-shop-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .stx-shop-filter-group {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .stx-shop-filter-group:first-child {
        padding-bottom: 12px;
    }
    
    .stx-shop-filter-tabs {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }
    
    .stx-filter-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .stx-shop-search {
        width: 100%;
        margin-left: 0;
    }
    
    .stx-search-input-wrapper {
        width: 100%;
        min-width: unset;
    }
    
    .stx-products-grid {
        grid-template-columns: 1fr;
    }
    
    .stx-download-item {
        flex-direction: column;
        text-align: center;
    }
    
    .stx-download-meta {
        justify-content: center;
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .stx-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ================================
   Product Single Page
   ================================ */

.stx-product-single {
    padding: 0;
}

.stx-product-back {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.stx-product-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--stx-text-muted);
}

.stx-product-breadcrumb a {
    color: var(--stx-primary);
    text-decoration: none;
}

.stx-product-breadcrumb a:hover {
    text-decoration: underline;
}

.stx-product-breadcrumb span {
    color: var(--stx-text-muted);
}

.stx-product-single-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: var(--stx-card-bg);
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
}

/* Produktbild */
.stx-product-single-image {
    position: relative;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.stx-product-single-image img {
    max-width: 100%;
    max-height: 350px;
    object-fit: contain;
    border-radius: 8px;
}

.stx-product-single-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
}

.stx-product-single-placeholder svg {
    width: 120px;
    height: 120px;
}

.stx-product-discount-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    padding: 12px 16px;
    border-radius: 8px;
    text-align: center;
    line-height: 1.1;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
}

.stx-product-discount-badge small {
    font-size: 12px;
    font-weight: 600;
    display: block;
}

/* Produktdetails */
.stx-product-single-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stx-product-code {
    font-size: 12px;
    color: var(--stx-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stx-product-single-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--stx-primary);
    margin: 0;
    line-height: 1.3;
}

.stx-product-single-excerpt {
    font-size: 14px;
    color: var(--stx-text-muted);
    line-height: 1.6;
    margin: 0;
}

.stx-product-single-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--stx-border);
    border-bottom: 1px solid var(--stx-border);
}

.stx-product-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--stx-text-muted);
}

.stx-product-meta-item svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

/* Preis */
.stx-product-single-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 8px 0;
}

.stx-price-current {
    font-size: 36px;
    font-weight: 800;
    color: var(--stx-primary);
}

.stx-price-current.is-free {
    color: #10b981;
}

.stx-price-original {
    font-size: 20px;
    color: var(--stx-text-muted);
    text-decoration: line-through;
}

/* Space Points Reward */
.stx-product-points-reward {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #f3f4f6;
    padding: 10px 16px;
    border-radius: 8px;
    margin: 4px 0;
}

.stx-product-points-reward .stx-points-text {
    font-size: 13px;
    line-height: 1.4;
    color: #374151;
    text-align: center;
}

.stx-product-points-reward .stx-points-text strong {
    color: #1e3a5f;
    font-weight: 600;
}

/* Aktionen */
.stx-product-single-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0;
}

.stx-product-single-actions .stx-btn.is-large {
    padding: 16px 32px;
    font-size: 16px;
    justify-content: center;
}

.stx-product-owned-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 12px 16px;
    border-radius: 8px;
}

.stx-product-owned-badge svg {
    width: 18px;
    height: 18px;
}

.stx-product-locked-notice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    color: #ef4444;
}

.stx-product-locked-notice svg {
    width: 20px;
    height: 20px;
}

/* Info-Items */
.stx-product-single-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--stx-border);
}

.stx-product-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--stx-text-muted);
}

.stx-product-info-item svg {
    width: 18px;
    height: 18px;
    color: #10b981;
}

/* Beschreibung */
.stx-product-single-description {
    margin-top: 0;
}

.stx-product-description-content {
    font-size: 14px;
    line-height: 1.8;
    color: #ffffff;
}

.stx-product-description-content h2,
.stx-product-description-content h3,
.stx-product-description-content h4 {
    margin-top: 24px;
    margin-bottom: 12px;
    color: #ffffff;
}

.stx-product-description-content p {
    margin-bottom: 16px;
}

.stx-product-description-content ul,
.stx-product-description-content ol {
    margin-bottom: 16px;
    padding-left: 24px;
}

.stx-product-description-content li {
    margin-bottom: 8px;
}

/* Produktkarten Link */
.stx-product-image-link {
    display: block;
    text-decoration: none;
}

.stx-product-image-link:hover .stx-product-image {
    transform: scale(1.02);
}

.stx-product-image {
    transition: transform 0.3s ease;
}

.stx-product-title a {
    color: inherit;
    text-decoration: none;
}

.stx-product-title a:hover {
    color: var(--stx-primary);
}

/* Responsive */
@media (max-width: 992px) {
    .stx-product-single-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .stx-product-single-image {
        min-height: 300px;
    }
}

@media (max-width: 768px) {
    .stx-product-back {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .stx-product-single-content {
        padding: 20px;
    }
    
    .stx-product-single-title {
        font-size: 22px;
    }
    
    .stx-price-current {
        font-size: 28px;
    }
    
    .stx-product-discount-badge {
        font-size: 18px;
        padding: 10px 12px;
    }
}

/* ================================
   Store Dropdown Menu Override
   ================================ */
.stx-nav-dropdown-menu {
    background: #1a2332 !important;
}

.stx-nav-dropdown-menu a,
.stx-nav-dropdown-menu .stx-nav-dropdown-item,
a.stx-nav-dropdown-item,
.stx-nav-dropdown-item {
    color: #ffffff !important;
}

.stx-nav-dropdown-menu a:hover,
.stx-nav-dropdown-menu .stx-nav-dropdown-item:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.stx-nav-dropdown-menu a.is-active,
.stx-nav-dropdown-menu .stx-nav-dropdown-item.is-active {
    color: #00d4ff !important;
}

/* ================================
   Prevent white bars - full height layout
   ================================ */
body.stx-dashboard-page {
    min-height: 100vh;
    background: #ffffff !important;
}

body.stx-dashboard-page #page,
body.stx-dashboard-page #content,
body.stx-dashboard-page .site,
body.stx-dashboard-page .site-content {
    min-height: 100vh;
    background: #ffffff !important;
}

/* ================================
   AI Tools / Areas - Light Theme
   ================================ */
.stx-area-accordion-item {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.1) !important;
    border-radius: 0 !important;
}

.stx-area-accordion-item.is-open {
    border-color: #00d1ff !important;
}

.stx-area-accordion-item .stx-area-name {
    color: #1e293b !important;
}

.stx-area-accordion-item .stx-area-meta {
    color: #64748b !important;
}

.stx-area-accordion-header {
    border-color: rgba(0,0,0,0.1) !important;
}

.stx-area-accordion-item.is-open .stx-area-accordion-header {
    border-color: rgba(0,0,0,0.1) !important;
}

.stx-area-accordion-content {
    background: #f8fafc !important;
}

.stx-area-loading {
    color: #64748b !important;
}

.stx-spinner {
    border-color: rgba(0,0,0,0.1) !important;
    border-top-color: #00d1ff !important;
}

.stx-area-toggle {
    background: #f1f5f9 !important;
    color: #1e293b !important;
}

.stx-area-toggle:hover {
    background: #e2e8f0 !important;
}

/* AUTOSCAN und andere Area-Boxen */
.stx-area-accordion-content .stx-card,
.stx-area-rendered .stx-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: #1e293b !important;
}

.stx-area-rendered {
    color: #1e293b !important;
}

.stx-area-rendered h1,
.stx-area-rendered h2,
.stx-area-rendered h3,
.stx-area-rendered h4,
.stx-area-rendered h5,
.stx-area-rendered label,
.stx-area-rendered .stx-card-title {
    color: #1e293b !important;
}

.stx-area-rendered p,
.stx-area-rendered span,
.stx-area-rendered .stx-card-subtitle {
    color: #64748b !important;
}

.stx-area-rendered input,
.stx-area-rendered select,
.stx-area-rendered textarea {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.2) !important;
    color: #1e293b !important;
}

.stx-area-rendered input::placeholder,
.stx-area-rendered textarea::placeholder {
    color: #94a3b8 !important;
}

/* ================================
   Page Header / Titel
   ================================ */
.stx-page-header {
    margin-bottom: 24px;
}

.stx-page-title {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

/* ================================
   News Modal
   ================================ */
.stx-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    overflow-y: auto;
    padding: 20px;
}

.stx-modal.is-active {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.stx-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.stx-modal-container {
    position: relative;
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 800px;
    margin: 40px auto;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.stx-news-modal-container {
    max-width: 700px;
}

.stx-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.stx-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
}

.stx-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
}

.stx-modal-close:hover {
    background: #e2e8f0;
    color: #1a1a2e;
}

.stx-modal-close svg {
    width: 20px;
    height: 20px;
}

.stx-modal-body {
    padding: 24px;
    max-height: 60vh;
    overflow-y: auto;
}

.stx-news-modal-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 20px;
}

.stx-news-modal-content {
    color: #374151;
    font-size: 16px;
    line-height: 1.8;
}

.stx-news-modal-content p {
    margin-bottom: 16px;
}

.stx-news-modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #64748b;
    gap: 16px;
}

.stx-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 13px;
    color: #64748b;
}

.stx-news-modal-source {
    font-weight: 500;
}

/* News Card Clickable */
.stx-news-card {
    cursor: pointer;
    transition: all 0.3s ease;
}

.stx-news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* News Grid Updates */
.stx-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) {
    .stx-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .stx-news-grid {
        grid-template-columns: 1fr;
    }
    
    .stx-modal-container {
        margin: 20px;
    }
}

.stx-news-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.stx-news-image {
    height: 140px;
    background-size: cover;
    background-position: center;
    background-color: #f0f2f5;
}

.stx-news-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.stx-news-placeholder svg {
    width: 40px;
    height: 40px;
}

.stx-news-content {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.stx-news-source {
    font-size: 11px;
    font-weight: 600;
    color: #00d1ff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.stx-news-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 8px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.stx-news-summary {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 12px 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.stx-news-date {
    font-size: 12px;
    color: #94a3b8;
}

.stx-news-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}

.stx-news-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.stx-news-empty p {
    margin: 0 0 16px 0;
}

/* ================================
   News Reader (Onpage)
   ================================ */
.stx-news-reader {
    padding: 0;
}

.stx-news-reader-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--stx-border);
    background: var(--stx-surface);
}

.stx-news-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--stx-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
}

.stx-news-back-btn:hover {
    color: var(--stx-primary-hover);
}

.stx-news-back-btn svg {
    width: 18px;
    height: 18px;
}

.stx-news-reader-image {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
}

.stx-news-reader-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.stx-news-reader-content {
    padding: 24px 32px 32px;
}

.stx-news-reader-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.stx-news-reader-source {
    font-size: 12px;
    font-weight: 600;
    color: var(--stx-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stx-news-reader-date {
    font-size: 13px;
    color: var(--stx-text-muted);
}

.stx-news-reader-title {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin: 0 0 24px 0;
}

.stx-news-reader-body {
    font-size: 16px;
    line-height: 1.8;
    color: var(--stx-text-secondary);
}

.stx-news-reader-body p {
    margin-bottom: 16px;
}

.stx-news-reader-body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .stx-news-reader-content {
        padding: 20px;
    }
    
    .stx-news-reader-title {
        font-size: 22px;
    }
    
    .stx-news-reader-body {
        font-size: 15px;
    }
}

/* ================================
   News Pagination
   ================================ */
.stx-news-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 20px;
    border-top: 1px solid var(--stx-border);
}

.stx-pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--stx-surface);
    border: 1px solid var(--stx-border);
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.stx-pagination-btn:hover:not(.is-disabled) {
    background: var(--stx-primary);
    border-color: var(--stx-primary);
    color: #fff;
}

.stx-pagination-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.stx-pagination-btn svg {
    width: 16px;
    height: 16px;
}

.stx-pagination-info {
    font-size: 14px;
    color: var(--stx-text-muted);
}

/* News Card als Link */
a.stx-news-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

a.stx-news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

a.stx-news-card:hover .stx-news-title {
    color: var(--stx-primary);
}

/* ================================
   News Delete Button (Admin)
   ================================ */
.stx-news-reader-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stx-btn.is-danger {
    background: #e53e3e;
    border-color: #e53e3e;
    color: #fff;
}

.stx-btn.is-danger:hover {
    background: #c53030;
    border-color: #c53030;
}

/* Delete Icon auf News Card */
.stx-news-card {
    position: relative;
}

.stx-news-delete-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(229, 62, 62, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 10;
}

.stx-news-delete-icon svg {
    width: 14px;
    height: 14px;
}

.stx-news-card:hover .stx-news-delete-icon {
    opacity: 1;
}

.stx-news-delete-icon:hover {
    background: #c53030;
    transform: scale(1.1);
}

/* News Not Found */
.stx-news-not-found {
    text-align: center;
    padding: 60px 20px;
    color: var(--stx-text-muted);
}

.stx-news-not-found p {
    margin-bottom: 20px;
    font-size: 16px;
}

/* ================================
   News Loading State
   ================================ */
.stx-news-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--stx-text-muted);
}

.stx-news-loading .stx-spinner {
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
}

.stx-news-loading p {
    font-size: 14px;
}

/* News Card als div (nicht mehr a) */
.stx-news-card {
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Ensure news container has minimum height */
.stx-news-container {
    min-height: 300px;
}

/* ================================
   MODERN AUTH SYSTEM
   ================================ */

.stx-auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg, #1C2A38 0%, #1C2A38 100%);
}

.stx-auth-container {
    display: flex;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    max-width: 1000px;
    width: 100%;
    min-height: 600px;
}

/* Linke Seite: Bild */
.stx-auth-image {
    flex: 0 0 45%;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px;
    border-radius: 20px;
    margin: 12px;
}

.stx-auth-logo {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.stx-auth-logo svg {
    width: 50px;
    height: 50px;
}

.stx-auth-logo img {
    max-height: 50px;
    width: auto;
}

/* Rechte Seite: Formular */
.stx-auth-form-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.stx-auth-form-container {
    width: 100%;
    max-width: 400px;
}

/* Zurück Button */
.stx-auth-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #1a1a2e;
    margin-bottom: 24px;
    transition: all 0.2s ease;
}

.stx-auth-back:hover {
    color: #1C2A38;
}

/* Header */
.stx-auth-header {
    margin-bottom: 32px;
}

.stx-auth-title {
    font-size: 42px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 12px 0;
    line-height: 1.1;
}

.stx-auth-subtitle {
    font-size: 15px;
    color: #64748b;
    margin: 0;
}

.stx-auth-subtitle a {
    color: #1a1a2e;
    font-weight: 600;
    text-decoration: underline;
}

.stx-auth-subtitle a:hover {
    color: #1C2A38;
}

/* Form */
.stx-auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.stx-auth-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stx-auth-field label {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a2e;
}

.stx-auth-field input {
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
    border: 1px solid #e2e8f0;
    border-radius: 30px;
    background: #fff;
    color: #1a1a2e;
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.stx-auth-field input:focus {
    border-color: #1C2A38;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.stx-auth-field input::placeholder {
    color: #94a3b8;
}

/* Input Wrapper für Password */
.stx-auth-input-wrapper {
    position: relative;
}

.stx-auth-input-wrapper input {
    padding-right: 50px;
}

.stx-password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stx-password-toggle:hover {
    color: #64748b;
}

.stx-password-toggle svg {
    width: 20px;
    height: 20px;
}

/* Field Footer (Forgot Password) */
.stx-auth-field-footer {
    text-align: right;
    margin-top: 4px;
}

.stx-forgot-link {
    font-size: 13px;
    color: #1a1a2e;
    font-weight: 500;
    text-decoration: underline;
}

.stx-forgot-link:hover {
    color: #1C2A38;
}

/* Row für 2 Spalten */
.stx-auth-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Submit Button */
.stx-auth-submit {
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: #1a1a2e;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
}

.stx-auth-submit:hover {
    background: #2d2d4a;
    transform: translateY(-1px);
}

.stx-auth-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Spinner */
.stx-auth-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: stx-auth-spin 0.8s linear infinite;
}

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

/* Checkbox */
.stx-auth-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #64748b;
    cursor: pointer;
}

.stx-auth-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    accent-color: #1C2A38;
}

.stx-auth-checkbox a {
    color: #1a1a2e;
    font-weight: 600;
    text-decoration: underline;
}

/* Divider */
.stx-auth-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
}

.stx-auth-divider::before,
.stx-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.stx-auth-divider span {
    font-size: 13px;
    color: #94a3b8;
}

/* Social Login */
.stx-auth-social {
    display: flex;
    gap: 12px;
}

.stx-social-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a2e;
    text-decoration: none;
    transition: all 0.2s ease;
}

.stx-social-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.stx-social-btn svg {
    flex-shrink: 0;
}

/* Messages */
.stx-auth-message {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    margin-bottom: 16px;
}

.stx-auth-message.is-error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.stx-auth-message.is-success {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

/* Footer Links */
.stx-auth-footer-links {
    text-align: center;
    margin-top: 24px;
}

.stx-auth-footer-links a {
    font-size: 14px;
    color: #64748b;
    text-decoration: none;
}

.stx-auth-footer-links a:hover {
    color: #1C2A38;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .stx-auth-wrapper {
        padding: 0;
        background: #fff;
    }
    
    .stx-auth-container {
        flex-direction: column;
        border-radius: 0;
        box-shadow: none;
        min-height: 100vh;
    }
    
    .stx-auth-image {
        flex: none;
        height: 200px;
        border-radius: 0 0 24px 24px;
        margin: 0;
    }
    
    .stx-auth-form-wrapper {
        padding: 32px 24px;
    }
    
    .stx-auth-title {
        font-size: 32px;
    }
    
    .stx-auth-row {
        grid-template-columns: 1fr;
    }
    
    .stx-auth-social {
        flex-direction: column;
    }
}

/* ================================
   AUTH SYSTEM - HIGH SPECIFICITY
   Prevents theme override
   ================================ */
body .stx-auth-wrapper,
html body .stx-auth-wrapper {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    background: #ffffff !important; background-color: #ffffff !important; background-image: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

body .stx-auth-container,
html body .stx-auth-container {
    display: flex !important;
    background: #fff !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3) !important;
    max-width: 1000px !important;
    width: 100% !important;
    min-height: 600px !important;
}

body .stx-auth-image,
html body .stx-auth-image {
    flex: 0 0 45% !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 40px !important;
    border-radius: 20px !important;
    margin: 12px !important;
}

body .stx-auth-form-wrapper,
html body .stx-auth-form-wrapper {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px !important;
}

body .stx-auth-title,
html body .stx-auth-title {
    font-size: 42px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.1 !important;
}

body .stx-auth-submit,
html body .stx-auth-submit {
    width: 100% !important;
    padding: 16px 24px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: #1a1a2e !important;
    border: none !important;
    border-radius: 30px !important;
    cursor: pointer !important;
}

/* Hide old login form if both are present */
.stx-auth-wrapper ~ .stx-login-form,
.stx-auth-wrapper ~ .stx-app-root,
.stx-auth-wrapper + .stx-login-form,
.stx-auth-wrapper + .stx-app-root {
    display: none !important;
}

/* ========================================= */
/* Button Text Color Fixes (v3.0.8)         */
/* ========================================= */
.stx-btn.is-primary,
.stx-btn.is-success,
.stx-select-btn:has(input:checked) {
    color: #ffffff !important;
}

.stx-tab.is-active {
    color: #ffffff !important;
}

.stx-tab.is-active .stx-icon {
    stroke: #ffffff !important;
}

/* ========================================= */
/* Bundle Badge Visibility Fix              */
/* ========================================= */
.stx-bundle-badge {
    background: #ffffff !important;
    color: var(--stx-primary) !important;
    z-index: 10;
    position: relative;
}

.stx-product-card.is-bundle {
    overflow: visible;
    margin-top: 16px;
}

/* ========================================= */
/* Modal & Alert Background Fixes           */
/* ========================================= */
.stx-modal,
.stx-modal-content {
    background: #ffffff !important;
}

.stx-info-banner-warning {
    background: #fef3c7 !important;
    color: #92400e !important;
}

/* ========================================= */
/* Mollie Card Field Height Fix             */
/* ========================================= */
.mollie-component,
.mollie-field,
#mollie-cardHolder-component,
#mollie-cardNumber-component,
#mollie-expiryDate-component,
#mollie-verificationCode-component {
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
}

/* ========================================= */
/* MEGA-MENU - PURE CSS, KEIN OVERLAY       */
/* v3.2.6                                    */
/* ========================================= */

/* Mega-Menu Container */
.stx-nav-mega {
    position: static;
}

.stx-nav-mega > .stx-main-nav-link {
    position: relative;
}

/* Mega-Menu Panel - FULL WIDTH */
.stx-mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border-top: 3px solid var(--stx-primary, #10b981);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s;
    z-index: 1000;
    pointer-events: none;
}

/* Unsichtbare Brücke zwischen Link und Menu */
.stx-mega-menu::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 18px;
    background: transparent;
}

/* HOVER oder JS-Klasse öffnet */
.stx-nav-mega:hover .stx-mega-menu,
.stx-mega-menu.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.stx-nav-mega:hover > .stx-main-nav-link,
.stx-mega-menu.is-visible ~ .stx-main-nav-link {
    color: var(--stx-primary, #10b981);
}

.stx-nav-mega:hover .stx-nav-arrow {
    transform: rotate(180deg);
}

/* Inner Container */
.stx-mega-menu-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

/* Grid Layout */
.stx-mega-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Mega Item */
.stx-mega-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    transition: all 0.15s ease;
    color: #0f172a !important;
}

.stx-mega-item:hover {
    background: #f0fdf4;
    border-color: var(--stx-primary, #10b981);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    text-decoration: none;
}

/* Icon */
.stx-mega-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 8px;
}

.stx-mega-icon svg,
.stx-mega-icon .stx-icon {
    width: 22px;
    height: 22px;
    stroke: #10b981;
}

.stx-mega-item:hover .stx-mega-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.stx-mega-item:hover .stx-mega-icon svg,
.stx-mega-item:hover .stx-mega-icon .stx-icon {
    stroke: #ffffff;
}

/* Text */
.stx-mega-text {
    flex: 1;
    min-width: 0;
}

.stx-mega-text strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a !important;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.stx-mega-item:hover .stx-mega-text strong {
    color: var(--stx-primary, #10b981) !important;
}

.stx-mega-text span {
    display: block;
    font-size: 11px;
    color: #64748b !important;
    line-height: 1.4;
}

.stx-mega-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 10px;
}

/* Footer */
.stx-mega-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
    text-align: center;
}

.stx-mega-footer a {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a !important;
    text-decoration: none;
    padding: 8px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.stx-mega-footer a:hover {
    color: #ffffff !important;
    background: var(--stx-primary, #10b981);
    border-color: var(--stx-primary, #10b981);
}

/* Responsive */
@media (max-width: 1024px) {
    .stx-nav-mega .stx-mega-menu {
        display: none !important;
    }
    
    .stx-nav-mega .stx-nav-arrow {
        display: none;
    }
}

@media (max-width: 1200px) {
    .stx-mega-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================= */
/* SINGLE AREA FULLSCREEN VIEW - v3.3.6     */
/* ========================================= */

/* Container für Vollbild-Area */
.stx-area-fullscreen {
    padding: 0 !important;
    margin: 0 !important;
    background: #0A0F14 !important;
}

/* DARK MODE Override für Area-Fullscreen */
.stx-area-fullscreen,
.stx-area-fullscreen .stx-single-area-wrapper,
.stx-area-fullscreen .stx-single-area-content,
.stx-area-fullscreen .stx-single-area-header {
    --stx-bg: #0A0F14;
    --stx-surface: #0A0F14;
    --stx-card: #0A0F14;
    --stx-card-bg: #0A0F14;
    background: #0A0F14 !important;
}

/* Stelle sicher dass alles im Area dunkel ist */
.stx-dashboard-content:has(.stx-area-fullscreen) {
    background: #0A0F14 !important;
}

.stx-tab-content.stx-area-fullscreen {
    background: #0A0F14 !important;
}

.stx-single-area-wrapper {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px);
    background: #0A0F14 !important;
}

/* Area Header Bar */
.stx-single-area-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 0 0 0;
    background: #0A0F14 !important;
    border-bottom: none;
    flex-shrink: 0;
    margin-bottom: 24px;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
    padding-left: 16px;
}

@media (max-width: 1200px) {
    .stx-single-area-header {
        padding: 24px 24px 0 24px;
        flex-wrap: wrap;
    }
}

/* Area Buttons Container */
.stx-area-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Area Button - gleicher Style wie Zurück Button */
.stx-area-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff !important;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.15s ease;
    border: none;
}

.stx-area-btn:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Aktiver Area Button */
.stx-area-btn.is-active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.stx-area-btn.is-active:hover {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

/* Gesperrter Area Button (kein Zugriff) */
.stx-area-btn.is-locked {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
    opacity: 0.85;
}

.stx-area-btn.is-locked:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.stx-area-btn.is-locked.is-active {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

@media (max-width: 768px) {
    .stx-area-buttons {
        width: 100%;
        margin-top: 12px;
    }
    
    .stx-area-btn {
        font-size: 13px;
        padding: 8px 16px;
    }
}

/* Zurück Button */
.stx-single-area-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff !important;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.stx-single-area-back-btn:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.stx-single-area-back-btn svg {
    width: 18px;
    height: 18px;
    stroke: #ffffff;
}

/* Area Content - Vollflächig */
.stx-single-area-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: auto;
    background: #0A0F14 !important;
}

/* Content innerhalb Area auch dunkel */
.stx-single-area-content > * {
    background: transparent;
}

/* iFrame Vollbild */
.stx-area-iframe {
    flex: 1;
    width: 100%;
    min-height: calc(100vh - 120px);
    border: none;
    background: #0A0F14;
}

/* Seiten-Content */
.stx-area-page-content {
    padding: 24px;
    color: #ffffff;
}

/* Kein Content */
.stx-area-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
    background: #0A0F14;
}

.stx-area-empty-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    margin-bottom: 24px;
}

.stx-area-empty-icon svg {
    stroke: rgba(255, 255, 255, 0.3);
}

.stx-area-empty h2 {
    margin: 0 0 12px 0;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
}

.stx-area-empty p {
    margin: 0;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
}

/* Kein Zugriff */
.stx-area-no-access {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
    background: #0A0F14;
}

.stx-area-no-access-icon {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 50%;
    margin-bottom: 24px;
}

.stx-area-no-access-icon svg {
    stroke: #ef4444;
}

.stx-area-no-access h2 {
    margin: 0 0 12px 0;
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
}

.stx-area-no-access p {
    margin: 0 0 24px 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    max-width: 400px;
}

/* Responsive */
@media (max-width: 768px) {
    .stx-single-area-header {
        padding: 12px 16px;
    }
    
    .stx-single-area-back-btn {
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* ========================================= */
/* USER MEGA-MENU & EINSTELLUNGEN - v3.3.9  */
/* ========================================= */

/* User Mega-Menu Container */
.stx-user-mega {
    position: relative;
}

/* Trigger für Hover UND is-visible */
.stx-user-mega:hover .stx-mega-menu,
.stx-user-mega .stx-mega-menu.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* User Mega-Menu - BREAKOUT FULL WIDTH */
.stx-user-mega .stx-mega-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100vw;
    margin-right: calc(-50vw + 50%);
    background: #ffffff;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 1000;
}

/* Invisible Bridge für User Menu */
.stx-user-mega .stx-mega-menu::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 18px;
    background: transparent;
}

/* User Mega Menu Inner - zentriert */
.stx-user-mega .stx-mega-menu-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 24px 32px 32px 32px;
}

/* User Header im Mega-Menu */
.stx-user-mega-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 24px;
}

.stx-user-mega-avatar img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #10b981;
}

.stx-user-mega-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stx-user-mega-info strong {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a !important;
}

.stx-user-mega-info span {
    font-size: 14px;
    color: #64748b !important;
}

/* User Mega Grid - 4 Spalten wie andere Mega-Menus */
.stx-user-mega-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    padding: 0 !important;
}

/* Danger Item (Abmelden) */
.stx-mega-item-danger {
    border-color: #fecaca !important;
    background: #fef2f2 !important;
}

.stx-mega-item-danger:hover {
    background: #fee2e2 !important;
    border-color: #ef4444 !important;
    transform: translateY(-2px);
}

.stx-mega-item-danger .stx-mega-text strong {
    color: #dc2626 !important;
}

.stx-mega-item-danger .stx-mega-text span {
    color: #f87171 !important;
}

.stx-mega-icon-danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
}

.stx-mega-icon-danger svg {
    stroke: #ffffff !important;
}

.stx-mega-item-danger:hover .stx-mega-icon-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}

/* User Toggle Button */
.stx-user-mega .stx-user-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.15s ease;
}

.stx-user-mega .stx-user-toggle:hover {
    background: rgba(16, 185, 129, 0.2);
}

.stx-user-mega .stx-user-toggle i {
    font-size: 20px;
    color: #ffffff;
}

/* Responsive für User Mega */
@media (max-width: 1200px) {
    .stx-user-mega-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .stx-user-mega .stx-mega-menu {
        width: 100vw;
        margin-right: -16px;
    }
    
    .stx-user-mega .stx-mega-menu-inner {
        padding: 16px;
    }
    
    .stx-user-mega-grid {
        grid-template-columns: 1fr !important;
    }
    
    .stx-user-mega-avatar img {
        width: 56px;
        height: 56px;
    }
}

/* ========================================= */
/* AREA FULLSCREEN - FORCE DARK v3.3.9      */
/* ========================================= */

/* Force dark background auf ALLE Parent-Container */
.stx-app-root:has(.stx-area-fullscreen) {
    background: #0A0F14 !important;
}

.stx-app-root:has(.stx-area-fullscreen) .stx-dashboard-inner {
    background: #0A0F14 !important;
    padding: 0 !important;
    max-width: 100% !important;
}

.stx-app-root:has(.stx-area-fullscreen) .stx-dashboard-content {
    background: #0A0F14 !important;
}

/* WooCommerce Container auch dunkel */
body.woocommerce-account:has(.stx-area-fullscreen),
body.woocommerce-account:has(.stx-area-fullscreen) .woocommerce,
body.woocommerce-account:has(.stx-area-fullscreen) .woocommerce-MyAccount-content {
    background: #0A0F14 !important;
}

/* ========================================= */
/* DASHBOARD CHECKOUT - v3.4.8              */
/* ========================================= */

.stx-checkout-wrapper {
    width: 100%;
}

.stx-checkout-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;
    align-items: start;
}

/* Checkout Main */
.stx-checkout-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Warenkorb Cart Card */
.stx-checkout-cart {
    padding: 24px;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

.stx-checkout-cart .stx-card-header {
    padding: 0 0 16px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 0;
}

/* Warenkorb Items */
.stx-checkout-items {
    display: flex;
    flex-direction: column;
}

.stx-checkout-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.stx-checkout-item:last-child {
    border-bottom: none;
}

.stx-checkout-item-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
}

.stx-checkout-item-name {
    font-weight: 500;
    color: #1e293b !important;
    font-size: 15px;
}

.stx-checkout-item-qty {
    font-size: 13px;
    color: #64748b !important;
}

.stx-checkout-item-price {
    font-weight: 600;
    color: #1e293b !important;
    font-size: 16px;
    min-width: 80px;
    text-align: right;
}

/* Checkout Coupon */
.stx-checkout-coupon {
    padding: 16px 20px;
    border-top: 1px solid rgba(0,0,0,0.1);
    background: #f8fafc;
}

/* Checkout Coupon Card in Sidebar */
.stx-checkout-coupon-card {
    margin-bottom: 16px;
}

.stx-checkout-coupon-card .stx-card-header {
    padding: 16px 20px 12px;
}

.stx-checkout-coupon-inner {
    padding: 0 20px 20px;
}

.stx-checkout-coupon .stx-coupon-form,
.stx-checkout-coupon-inner .stx-coupon-form {
    display: flex;
    gap: 8px;
}

.stx-checkout-coupon .stx-coupon-input,
.stx-checkout-coupon-inner .stx-coupon-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    font-size: 14px;
    background: #ffffff;
    color: #1e293b !important;
}

.stx-checkout-coupon .stx-coupon-input::placeholder,
.stx-checkout-coupon-inner .stx-coupon-input::placeholder {
    color: #94a3b8;
}

.stx-checkout-coupon .stx-coupon-applied,
.stx-checkout-coupon-inner .stx-coupon-applied {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: 10px 14px;
}

/* Checkout Coupon Farben explizit setzen */
.stx-checkout-coupon-inner .stx-coupon-applied-code,
.stx-checkout-coupon .stx-coupon-applied-code {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #166534 !important;
    font-family: monospace;
    font-size: 14px;
}

.stx-checkout-coupon-inner .stx-coupon-applied-code svg,
.stx-checkout-coupon .stx-coupon-applied-code svg {
    color: #22c55e !important;
    stroke: #22c55e !important;
}

.stx-checkout-coupon-inner .stx-coupon-applied-discount,
.stx-checkout-coupon .stx-coupon-applied-discount {
    margin-left: auto;
    font-weight: 700;
    color: #15803d !important;
    font-size: 15px;
}

.stx-checkout-coupon-inner .stx-coupon-applied-discount *,
.stx-checkout-coupon .stx-coupon-applied-discount * {
    color: #15803d !important;
}

.stx-checkout-coupon-inner .stx-remove-coupon-btn,
.stx-checkout-coupon .stx-remove-coupon-btn {
    background: rgba(220, 38, 38, 0.1) !important;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.stx-checkout-coupon-inner .stx-remove-coupon-btn svg,
.stx-checkout-coupon .stx-remove-coupon-btn svg {
    color: #dc2626 !important;
    stroke: #dc2626 !important;
}

.stx-checkout-coupon-inner .stx-remove-coupon-btn:hover,
.stx-checkout-coupon .stx-remove-coupon-btn:hover {
    background: rgba(220, 38, 38, 0.2) !important;
}

.stx-checkout-coupon .stx-coupon-message,
.stx-checkout-coupon-inner .stx-coupon-message {
    margin-top: 8px;
    font-size: 13px;
}

.stx-checkout-remove {
    background: rgba(0,0,0,0.05);
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #64748b;
    border-radius: 0;
    transition: all 0.15s ease;
}

.stx-checkout-remove:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

/* Checkout Form - WICHTIG: Sichtbare Farben */
.stx-checkout-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
}

.stx-checkout-billing {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

.stx-checkout-billing .stx-card-header {
    padding: 24px 24px 16px 24px;
    margin-bottom: 0;
}

.stx-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.stx-checkout-form .stx-form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #00b8e0 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stx-checkout-form input,
.stx-checkout-form select {
    width: 100%;
    padding: 14px 16px !important;
    border: 1px solid #333333 !important;
    border-radius: 8px;
    font-size: 15px;
    background: #ffffff !important;
    color: #000000 !important;
    transition: all 0.15s ease;
    box-sizing: border-box;
    -webkit-text-fill-color: #000000 !important;
}

.stx-checkout-form input:-webkit-autofill,
.stx-checkout-form input:-webkit-autofill:hover,
.stx-checkout-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: #000000 !important;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
    background-color: #ffffff !important;
    border-color: #333333 !important;
}

.stx-checkout-form input::placeholder {
    color: rgba(0,0,0,0.5) !important;
    -webkit-text-fill-color: rgba(0,0,0,0.5) !important;
}

.stx-checkout-form input:focus,
.stx-checkout-form select:focus {
    outline: none;
    border-color: #10b981 !important;
    background: #ffffff !important;
}

.stx-checkout-form select option {
    background: #ffffff;
    color: #1e293b;
}

/* Checkout Sidebar */
.stx-checkout-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Payment Card */
.stx-checkout-payment-card {
    padding: 24px;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

.stx-checkout-payment-card .stx-card-header {
    padding: 0 0 16px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 16px;
}

/* WooCommerce Style Payment Methods */
.stx-payment-methods.stx-wc-style {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent !important;
}

.stx-wc-payment-method {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 16px 0;
}

.stx-wc-payment-method:last-child {
    border-bottom: none;
}

.stx-wc-payment-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    flex-wrap: wrap;
}

.stx-wc-payment-radio {
    width: 18px;
    height: 18px;
    accent-color: #10b981;
    cursor: pointer;
    flex-shrink: 0;
}

.stx-wc-payment-title {
    font-size: 15px;
    font-weight: 500;
    color: #1e293b;
}

.stx-wc-payment-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.stx-wc-payment-icons img {
    height: 24px;
    width: auto;
    max-width: 50px;
    object-fit: contain;
}

.stx-wc-payment-description {
    margin-top: 10px;
    padding-left: 30px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

.stx-wc-payment-description p {
    margin: 0 0 8px 0;
}

.stx-wc-payment-description p:last-child {
    margin-bottom: 0;
}

.stx-wc-payment-description a {
    color: #10b981;
    text-decoration: none;
}

.stx-wc-payment-description a:hover {
    text-decoration: underline;
}

/* Legacy Payment Method Styles (falls noch verwendet) */
.stx-payment-methods:not(.stx-wc-style) {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: transparent !important;
}

.stx-payment-method {
    cursor: pointer;
    display: block;
}

.stx-payment-method input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.stx-payment-method-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 2px solid rgba(255,255,255,0.15) !important;
    border-radius: 10px;
    transition: all 0.15s ease;
    background: #1a2332 !important;
}

.stx-payment-method:hover .stx-payment-method-inner {
    border-color: rgba(255,255,255,0.3) !important;
    background: #242f3f !important;
}

.stx-payment-method input:checked + .stx-payment-method-inner {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.2) !important;
}

.stx-payment-icon {
    height: 28px;
    width: auto;
    max-width: 50px;
    object-fit: contain;
}

.stx-payment-emoji {
    font-size: 24px;
    line-height: 1;
    width: 32px;
    text-align: center;
}

.stx-payment-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stx-payment-title {
    font-weight: 600;
    color: #ffffff !important;
    font-size: 14px;
}

.stx-payment-desc {
    font-size: 12px;
    color: #64748b;
    line-height: 1.3;
}

/* Zusammenfassung */
.stx-checkout-summary {
    padding: 24px;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

/* Alle Preise in der Checkout Zusammenfassung dunkel */
.stx-checkout-summary .stx-checkout-row span,
.stx-checkout-summary .stx-checkout-row .woocommerce-Price-amount,
.stx-checkout-summary .stx-checkout-row .woocommerce-Price-amount bdi,
.stx-checkout-summary .stx-checkout-row .amount,
.stx-checkout-summary .stx-checkout-totals span,
.stx-checkout-totals .woocommerce-Price-amount,
.stx-checkout-totals .woocommerce-Price-amount bdi,
.stx-checkout-totals .amount {
    color: #1e293b !important;
}

.stx-checkout-summary .stx-card-header {
    padding: 0 0 16px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 16px;
}

.stx-checkout-totals {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.stx-checkout-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #1e293b;
}

.stx-checkout-row span:last-child {
    color: #1e293b;
    font-weight: 500;
}

.stx-checkout-row.stx-checkout-total {
    padding-top: 16px;
    margin-top: 8px;
    border-top: 2px solid rgba(0,0,0,0.1);
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.stx-checkout-row.stx-checkout-total span:last-child {
    color: #10b981;
}

.stx-checkout-row.stx-checkout-discount span:last-child {
    color: #10b981;
}

/* Alle Preise im Checkout dunkel */
.stx-checkout-summary .woocommerce-Price-amount,
.stx-checkout-summary .amount,
.stx-checkout-totals .woocommerce-Price-amount,
.stx-checkout-totals .amount,
.stx-checkout-summary span.woocommerce-Price-amount,
.stx-checkout-summary bdi,
.stx-checkout-totals bdi,
.stx-checkout-summary .stx-checkout-row span span,
.stx-checkout-summary .stx-checkout-totals span span {
    color: #1e293b !important;
}

/* Gesamt-Preis grün */
.stx-checkout-row.stx-checkout-total span:last-child,
.stx-checkout-row.stx-checkout-total .woocommerce-Price-amount,
.stx-checkout-row.stx-checkout-total bdi {
    color: #10b981 !important;
}

/* Checkout Preis-Farben */
.stx-price-dark,
body .stx-price-dark,
html body .stx-price-dark,
.stx-checkout-summary .stx-price-dark,
.stx-checkout-totals .stx-price-dark,
.stx-checkout-row .stx-price-dark,
.stx-dashboard-content .stx-price-dark {
    color: #1e293b !important;
    font-weight: 500;
}

.stx-price-white,
body .stx-price-white,
html body .stx-price-white,
.stx-checkout-summary .stx-price-white,
.stx-checkout-totals .stx-price-white,
.stx-checkout-row .stx-price-white,
.stx-dashboard-content .stx-price-white {
    color: #1e293b !important;
    font-weight: 500;
}

.stx-price-green,
body .stx-price-green,
html body .stx-price-green,
.stx-checkout-summary .stx-price-green,
.stx-checkout-totals .stx-price-green,
.stx-checkout-row .stx-price-green,
.stx-dashboard-content .stx-price-green {
    color: #10b981 !important;
    font-weight: 600;
}

/* AGGRESSIVE: Alle Checkout Preise dunkel machen */
.stx-checkout-summary .stx-checkout-row span:nth-child(2),
.stx-checkout-totals .stx-checkout-row span:nth-child(2),
.stx-checkout-summary .stx-checkout-row > span:last-child,
.stx-checkout-totals .stx-checkout-row > span:last-child,
body .stx-checkout-row span:last-child,
body .stx-checkout-row span:last-child span,
body .stx-checkout-row span:last-child bdi,
body .stx-checkout-row span:last-child .woocommerce-Price-amount,
html body .stx-checkout-summary .stx-checkout-row span:last-child,
html body .stx-checkout-totals .stx-checkout-row span:last-child {
    color: #1e293b !important;
}

/* Gesamt explizit grün */
body .stx-checkout-row.stx-checkout-total span:last-child,
body .stx-checkout-row.stx-checkout-total span:last-child span,
body .stx-checkout-row.stx-checkout-total span:last-child bdi,
html body .stx-checkout-row.stx-checkout-total span:last-child {
    color: #10b981 !important;
}

/* AGB - gestylt wie Space Points Box */
.stx-checkout-terms {
    padding: 16px 20px;
    margin: 16px 0;
    background: #f8fafc;
    border-radius: 0;
    border: 1px solid rgba(0,0,0,0.1);
}

.stx-checkout-terms .stx-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.stx-checkout-terms input[type="checkbox"] {
    width: 18px !important;
    height: 18px;
    margin-top: 2px;
    accent-color: #10b981;
}

.stx-checkout-terms span {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

.stx-checkout-terms a {
    color: #10b981;
    text-decoration: underline;
}

/* Submit Button */
.stx-checkout-submit {
    width: 100%;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    padding: 16px 24px;
    margin-top: 8px;
}

.stx-checkout-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 12px;
    color: #64748b;
}

.stx-checkout-secure svg {
    width: 14px;
    height: 14px;
}

/* Empty Cart Actions */
.stx-empty-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

/* Responsive */
@media (max-width: 1000px) {
    .stx-checkout-grid {
        grid-template-columns: 1fr;
    }
    
    /* Main (Warenkorb + Rechnungsadresse) kommt ZUERST */
    .stx-checkout-main {
        order: 1;
    }
    
    /* Sidebar (Zahlungsmethode + Zusammenfassung + Button) kommt DANACH */
    .stx-checkout-sidebar {
        order: 2;
    }
}

@media (max-width: 600px) {
    .stx-form-row-2 {
        grid-template-columns: 1fr;
    }
    
    .stx-empty-actions {
        flex-direction: column;
    }
    
    .stx-checkout-form {
        padding: 16px;
    }
}

/* ========================================= */
/* LIGHT THEME - Checkout & Order           */
/* ========================================= */

/* Vollflächiger heller Hintergrund für Checkout & Order Received */
#stx-tab-checkout,
#stx-tab-order-received {
    background: #f8fafc !important;
    min-height: calc(100vh - 64px);
    margin: 0 !important;
    padding: 40px 20px !important;
}

/* Leerer Warenkorb zentrieren */
.stx-checkout-wrapper.stx-checkout-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
}

.stx-checkout-empty .stx-card {
    width: 100%;
    max-width: 500px;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

.stx-checkout-empty .stx-empty-state h3 {
    color: #1e293b !important;
}

.stx-checkout-empty .stx-empty-state p {
    color: #64748b !important;
}

/* Leerer Warenkorb - Outline Button dunkel */
.stx-checkout-empty .stx-btn.is-outline,
.stx-checkout-wrapper .stx-btn.is-outline,
#stx-tab-checkout .stx-btn.is-outline,
.stx-empty-actions .stx-btn.is-outline {
    color: #1e293b !important;
    border-color: rgba(0,0,0,0.3) !important;
    background: transparent !important;
}

.stx-checkout-empty .stx-btn.is-outline:hover,
.stx-checkout-wrapper .stx-btn.is-outline:hover,
#stx-tab-checkout .stx-btn.is-outline:hover,
.stx-empty-actions .stx-btn.is-outline:hover {
    background: rgba(0,0,0,0.05) !important;
    border-color: rgba(0,0,0,0.5) !important;
}

/* Warenkorb Preise müssen dunkel/lesbar sein */
.stx-checkout-item-price,
.stx-checkout-item-price *,
.stx-checkout-item-price .woocommerce-Price-amount,
.stx-checkout-item-price .woocommerce-Price-amount bdi,
.stx-checkout-item-price .amount,
.stx-checkout-wrapper .stx-checkout-item-price,
.stx-checkout-wrapper .stx-checkout-item-price *,
#stx-tab-checkout .stx-checkout-item-price,
#stx-tab-checkout .stx-checkout-item-price *,
#stx-tab-checkout .stx-checkout-item-price .woocommerce-Price-amount,
#stx-tab-checkout .stx-checkout-item-price .woocommerce-Price-amount bdi,
.stx-checkout-cart .stx-checkout-item-price,
.stx-checkout-cart .stx-checkout-item-price *,
.stx-checkout-cart .stx-checkout-item-price bdi,
.stx-checkout-cart .stx-checkout-item-price span {
    color: #1e293b !important;
}

/* Currency Symbol */
.stx-checkout-item-price .woocommerce-Price-currencySymbol,
#stx-tab-checkout .stx-checkout-item-price .woocommerce-Price-currencySymbol,
.stx-checkout-cart .woocommerce-Price-currencySymbol {
    color: #1e293b !important;
}

/* Auch den Dashboard Content für diese Tabs hell machen */
.stx-app-root:has(#stx-tab-checkout.is-active),
.stx-app-root:has(#stx-tab-order-received.is-active) {
    background: #f8fafc !important;
}

.stx-app-root:has(#stx-tab-checkout.is-active) .stx-dashboard-content,
.stx-app-root:has(#stx-tab-order-received.is-active) .stx-dashboard-content {
    background: #f8fafc !important;
}

.stx-app-root:has(#stx-tab-checkout.is-active) .stx-dashboard-inner,
.stx-app-root:has(#stx-tab-order-received.is-active) .stx-dashboard-inner {
    background: #f8fafc !important;
}

/* Checkout Wrapper - Erzwinge helles Theme */
.stx-checkout-wrapper {
    --stx-card: #ffffff;
    --stx-card-bg: #ffffff;
    --stx-text: #1e293b;
    --stx-text-secondary: #64748b;
    --stx-text-muted: #94a3b8;
    --stx-border: rgba(0,0,0,0.1);
    --stx-border-light: rgba(0,0,0,0.05);
}

.stx-checkout-wrapper .stx-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.1) !important;
}

.stx-checkout-wrapper .stx-card-header {
    border-color: rgba(0,0,0,0.1) !important;
}

.stx-checkout-wrapper .stx-card-title {
    color: #1e293b !important;
}

/* Alle Texte im Checkout */
.stx-checkout-wrapper,
.stx-checkout-wrapper span,
.stx-checkout-wrapper p,
.stx-checkout-wrapper label,
.stx-checkout-wrapper h3,
.stx-checkout-wrapper h4 {
    color: #1e293b !important;
}

.stx-checkout-wrapper .stx-form-group label {
    color: #00b8e0 !important;
}

/* Payment Methods */
.stx-checkout-wrapper .stx-payment-title {
    color: #1e293b !important;
}

.stx-checkout-wrapper .stx-payment-desc {
    color: #64748b !important;
}

.stx-checkout-wrapper .stx-payment-method-inner {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.1) !important;
}

.stx-checkout-wrapper .stx-payment-method:hover .stx-payment-method-inner {
    background: #f8fafc !important;
    border-color: rgba(0,0,0,0.2) !important;
}

.stx-checkout-wrapper .stx-payment-method input:checked + .stx-payment-method-inner {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: #10b981 !important;
}

/* Cart Items */
.stx-checkout-wrapper .stx-checkout-item-name {
    color: #1e293b !important;
}

.stx-checkout-wrapper .stx-checkout-item-price {
    color: #1e293b !important;
}

/* Summary Totals */
.stx-checkout-wrapper .stx-checkout-row {
    color: #1e293b !important;
}

.stx-checkout-wrapper .stx-checkout-row.stx-checkout-total {
    color: #1e293b !important;
    border-color: rgba(0,0,0,0.1) !important;
}

.stx-checkout-wrapper .stx-checkout-row.stx-checkout-total span:last-child {
    color: #10b981 !important;
}

/* AGB */
.stx-checkout-wrapper .stx-checkout-terms span {
    color: #64748b !important;
}

.stx-checkout-wrapper .stx-checkout-terms a {
    color: #10b981 !important;
}

/* ========================================= */
/* ORDER RECEIVED PAGE - v3.5.0 LIGHT       */
/* ========================================= */

/* Order Received - Erzwinge helles Theme */
.stx-order-received-wrapper {
    --stx-card: #ffffff;
    --stx-card-bg: #ffffff;
    --stx-text: #1e293b;
    --stx-border: rgba(0,0,0,0.1);
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
}

.stx-order-received-wrapper .stx-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.1) !important;
}

.stx-order-received-wrapper .stx-card-title {
    color: #1e293b !important;
}

/* Alle Texte in Order Received - mit !important */
.stx-order-received-wrapper h1,
.stx-order-received-wrapper h3,
.stx-order-received-wrapper h4,
.stx-order-received-wrapper p,
.stx-order-received-wrapper span,
.stx-order-received-wrapper .stx-success-title,
.stx-order-received-wrapper .stx-success-subtitle {
    color: #1e293b !important;
}

.stx-order-received-wrapper .stx-success-subtitle {
    color: #64748b !important;
}

.stx-order-received-wrapper .stx-order-address {
    color: #64748b !important;
}

/* Success Header - Text muss sichtbar sein */
.stx-order-success-header {
    text-align: center;
    padding: 40px 20px;
    margin-bottom: 32px;
    background: transparent;
}

.stx-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 50%;
    margin-bottom: 24px;
    animation: stx-success-bounce 0.6s ease;
}

.stx-success-icon.is-pending {
    background: rgba(245, 158, 11, 0.1);
}

.stx-success-icon.is-failed {
    background: rgba(239, 68, 68, 0.1);
}

@keyframes stx-success-bounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.stx-success-title {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff !important;
    margin: 0 0 12px 0;
}

.stx-success-subtitle {
    font-size: 16px;
    color: rgba(255,255,255,0.7) !important;
    margin: 0;
}

/* Order Details Grid */
.stx-order-details-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    margin-bottom: 32px;
}

/* Order Overview Card */
.stx-order-overview {
    padding: 24px;
}

.stx-order-overview .stx-card-header {
    padding: 0 0 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 20px;
}

/* Order Meta */
.stx-order-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.stx-order-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stx-order-meta-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.5);
}

.stx-order-meta-value {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

/* Order Status Badge */
.stx-order-status {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.stx-order-status-processing,
.stx-order-status-completed {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.stx-order-status-on-hold,
.stx-order-status-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.stx-order-status-failed,
.stx-order-status-cancelled {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Order Items */
.stx-order-items {
    margin-bottom: 24px;
}

.stx-order-items h4 {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stx-order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.stx-order-item:last-child {
    border-bottom: none;
}

.stx-order-item-name {
    font-size: 15px;
    color: #ffffff;
}

.stx-order-item-qty {
    color: rgba(255,255,255,0.5);
    margin-left: 8px;
}

.stx-order-item-total {
    font-weight: 600;
    color: #10b981;
}

/* Order Totals */
.stx-order-totals {
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.stx-order-total-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: rgba(255,255,255,0.7);
}

.stx-order-total-row span:last-child {
    color: #ffffff;
    font-weight: 500;
}

.stx-order-total-row.stx-order-total-final {
    padding-top: 16px;
    margin-top: 8px;
    border-top: 2px solid rgba(255,255,255,0.1);
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

.stx-order-total-row.stx-order-total-final span:last-child {
    color: #10b981;
}

/* Billing Card */
.stx-order-billing {
    padding: 24px;
    height: fit-content;
}

.stx-order-billing .stx-card-header {
    padding: 0 0 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 16px;
}

.stx-order-address {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255,255,255,0.8);
}

.stx-order-address strong {
    color: #ffffff;
}

/* Order Actions */
.stx-order-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding-top: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .stx-order-details-grid {
        grid-template-columns: 1fr;
    }
    
    .stx-order-meta {
        grid-template-columns: 1fr;
    }
    
    .stx-success-title {
        font-size: 22px;
    }
    
    .stx-order-actions {
        flex-direction: column;
    }
    
    .stx-order-actions .stx-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================= */
/* THEME OVERRIDE KILLER - Maximum Priority */
/* ========================================= */

/* Akzeptiere Theme-Hintergrund, mache Text schwarz */
#stx-tab-checkout input[type="text"],
#stx-tab-checkout input[type="text"]:focus,
#stx-tab-checkout input[type="text"].filled,
#stx-tab-checkout input[type="number"],
#stx-tab-checkout input[type="number"]:focus,
#stx-tab-checkout input[type="email"],
#stx-tab-checkout input[type="email"]:focus,
#stx-tab-checkout input[type="email"].filled,
#stx-tab-checkout input[type="url"],
#stx-tab-checkout input[type="url"]:focus,
#stx-tab-checkout input[type="tel"],
#stx-tab-checkout input[type="tel"]:focus,
#stx-tab-checkout input[type="search"],
#stx-tab-checkout input[type="search"]:focus,
#stx-tab-checkout input[type="password"],
#stx-tab-checkout input[type="password"]:focus,
#stx-tab-checkout select,
#stx-tab-checkout select:focus,
#stx-tab-checkout textarea,
#stx-tab-checkout textarea:focus,
.stx-checkout-wrapper input[type="text"],
.stx-checkout-wrapper input[type="text"]:focus,
.stx-checkout-wrapper input[type="text"].filled,
.stx-checkout-wrapper input[type="number"],
.stx-checkout-wrapper input[type="email"],
.stx-checkout-wrapper input[type="email"]:focus,
.stx-checkout-wrapper input[type="email"].filled,
.stx-checkout-wrapper select,
.stx-checkout-wrapper select:focus {
    color: #000000 !important;
    border-color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    padding: 14px 16px !important;
}

#stx-tab-checkout input:focus,
#stx-tab-checkout select:focus,
.stx-checkout-wrapper input:focus,
.stx-checkout-wrapper select:focus {
    border-color: #10b981 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
}

#stx-tab-checkout input::placeholder,
.stx-checkout-wrapper input::placeholder {
    color: rgba(0,0,0,0.5) !important;
    -webkit-text-fill-color: rgba(0,0,0,0.5) !important;
}

/* Kill select2 container styles */
#stx-tab-checkout .select2-container,
#stx-tab-checkout .select2-container--default,
#stx-tab-checkout .select2-selection,
#stx-tab-checkout .select2-selection--single,
.stx-checkout-wrapper .select2-container,
.stx-checkout-wrapper .select2-selection {
    color: #000000 !important;
}

/* Payment method inner - kill all theme styles */
#stx-tab-checkout .stx-payment-method-inner,
.stx-checkout-wrapper .stx-payment-method-inner,
.stx-payment-methods .stx-payment-method-inner {
    background: #1a2332 !important;
    background-color: #1a2332 !important;
    border: 2px solid rgba(255,255,255,0.15) !important;
}

#stx-tab-checkout .stx-payment-method:hover .stx-payment-method-inner,
.stx-checkout-wrapper .stx-payment-method:hover .stx-payment-method-inner {
    background: #242f3f !important;
    background-color: #242f3f !important;
    border-color: rgba(255,255,255,0.3) !important;
}

#stx-tab-checkout .stx-payment-method input:checked + .stx-payment-method-inner,
.stx-checkout-wrapper .stx-payment-method input:checked + .stx-payment-method-inner {
    background: rgba(16, 185, 129, 0.2) !important;
    background-color: rgba(16, 185, 129, 0.2) !important;
    border-color: #10b981 !important;
}

/* ========================================= */
/* THEME CSS VARIABLE OVERRIDE - NUCLEAR    */
/* ========================================= */
:root {
    --theme-color-input-dark: #000000 !important;
    --theme-color-input: #000000 !important;
}

/* Absolute final override für alle Inputs - AUSSER AI Tools */
input[type="text"],
input[type="text"]:focus,
input[type="text"].filled,
input[type="number"],
input[type="number"]:focus,
input[type="number"].filled,
input[type="email"],
input[type="email"]:focus,
input[type="email"].filled,
input[type="url"],
input[type="url"]:focus,
input[type="url"].filled,
input[type="tel"],
input[type="tel"]:focus,
input[type="tel"].filled,
input[type="search"],
input[type="search"]:focus,
input[type="search"].filled,
input[type="password"],
input[type="password"]:focus,
input[type="password"].filled,
select,
select:focus,
textarea,
textarea:focus,
textarea.filled {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* ========================================= */
/* AI TOOLS INPUT OVERRIDE - HÖCHSTE PRIO   */
/* ========================================= */
#stx-tab-single-area input,
#stx-tab-single-area input[type="text"],
#stx-tab-single-area input[type="number"],
#stx-tab-single-area input[type="email"],
#stx-tab-single-area input[type="password"],
#stx-tab-single-area select,
#stx-tab-single-area textarea,
.stx-single-area-content input,
.stx-single-area-content input[type="text"],
.stx-single-area-content input[type="number"],
.stx-single-area-content select,
.stx-single-area-content textarea,
.stx-area-page-content input,
.stx-area-page-content input[type="text"],
.stx-area-page-content input[type="number"],
.stx-area-page-content select,
.stx-area-page-content textarea,
.stx-area-fullscreen input,
.stx-area-fullscreen input[type="text"],
.stx-area-fullscreen input[type="number"],
.stx-area-fullscreen select,
.stx-area-fullscreen textarea,
#stx-tab-single-area input:focus,
#stx-tab-single-area select:focus,
#stx-tab-single-area textarea:focus,
.stx-single-area-content input:focus,
.stx-single-area-content select:focus,
.stx-single-area-content textarea:focus,
.stx-area-page-content input:focus,
.stx-area-page-content select:focus,
.stx-area-page-content textarea:focus,
.stx-area-fullscreen input:focus,
.stx-area-fullscreen select:focus,
.stx-area-fullscreen textarea:focus,
#stx-tab-single-area input.filled,
#stx-tab-single-area textarea.filled,
.stx-single-area-content input.filled,
.stx-single-area-content textarea.filled,
.stx-area-page-content input.filled,
.stx-area-page-content textarea.filled {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #080C11 !important;
    background-color: #080C11 !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}

/* ================================
   ACADEMY STYLES
================================ */

/* Academy Wrapper */
.stx-academy-wrapper {
    min-height: calc(100vh - 200px);
}

/* Locked State */
.stx-academy-locked {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 40px 20px;
}

.stx-academy-locked-card {
    background: var(--stx-card, #1a2332);
    border-radius: 16px;
    padding: 48px;
    max-width: 700px;
    text-align: center;
    border: 1px solid var(--stx-border, rgba(255,255,255,0.1));
}

.stx-academy-locked-icon {
    margin-bottom: 24px;
    color: var(--stx-text-muted, rgba(255,255,255,0.4));
}

.stx-academy-locked-icon svg {
    width: 80px;
    height: 80px;
}

.stx-academy-locked-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 16px 0;
    color: #ffffff;
}

.stx-academy-locked-text {
    font-size: 16px;
    color: var(--stx-text-muted, rgba(255,255,255,0.6));
    line-height: 1.6;
    margin: 0 0 32px 0;
}

/* Features Grid */
.stx-academy-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px;
    text-align: left;
}

.stx-academy-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
    min-height: 72px;
}

.stx-academy-feature-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 10px;
    color: #10b981;
}

.stx-academy-feature-icon svg {
    width: 20px;
    height: 20px;
}

.stx-academy-feature-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.stx-academy-feature-text strong {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    display: block !important;
    line-height: 1.3;
    visibility: visible !important;
    opacity: 1 !important;
}

.stx-academy-feature-text span {
    font-size: 12px;
    color: var(--stx-text-muted, rgba(255,255,255,0.5));
    display: block;
    line-height: 1.4;
}

/* Unlocked Content */
.stx-academy-content {
    padding: 0;
}

.stx-academy-header {
    margin-bottom: 24px;
}

.stx-academy-header .stx-card-title {
    font-size: 24px;
}

/* Categories Grid */
.stx-academy-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.stx-academy-category {
    padding: 32px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.stx-academy-category:hover {
    transform: translateY(-4px);
    border-color: var(--stx-primary, #10b981);
}

.stx-academy-category-icon {
    margin-bottom: 20px;
    color: var(--stx-primary, #10b981);
}

.stx-academy-category-icon svg {
    width: 48px;
    height: 48px;
}

.stx-academy-category h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: #000000;
}

.stx-academy-category p {
    font-size: 14px;
    color: var(--stx-text-muted, rgba(255,255,255,0.6));
    line-height: 1.5;
    margin: 0 0 16px 0;
}

.stx-academy-coming-soon {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    font-size: 12px;
    font-weight: 500;
    border-radius: 20px;
}

/* Large Button */
.stx-btn.is-large {
    padding: 16px 32px;
    font-size: 16px;
    gap: 10px;
}

/* Responsive */
@media (max-width: 992px) {
    .stx-academy-categories {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stx-academy-locked-card {
        padding: 32px 24px;
    }
    
    .stx-academy-locked-title {
        font-size: 22px;
    }
    
    .stx-academy-features {
        grid-template-columns: 1fr;
    }
    
    .stx-academy-categories {
        grid-template-columns: 1fr;
    }
    
    .stx-academy-category {
        padding: 24px;
    }
}

/* ================================
   ACADEMY - ERWEITERTE STYLES
================================ */

/* Kategorie als Link */
.stx-academy-category-link {
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.stx-academy-category-link:hover {
    transform: translateY(-4px);
    border-color: var(--stx-primary, #10b981);
}

/* Content Count Badge */
.stx-academy-content-count {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    font-size: 12px;
    font-weight: 500;
    border-radius: 20px;
}

/* Breadcrumb */
.stx-academy-breadcrumb {
    margin-bottom: 20px;
}

.stx-academy-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--stx-text-muted, rgba(0,0,0,0.6));
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.stx-academy-back:hover {
    color: var(--stx-primary, #10b981);
}

/* Category Header */
.stx-academy-cat-header {
    padding: 24px;
    margin-bottom: 24px;
}

.stx-academy-cat-header h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #000000;
}

.stx-academy-cat-header p {
    margin: 0;
    color: var(--stx-text-muted, rgba(0,0,0,0.6));
}

/* Content Grid */
.stx-academy-content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.stx-academy-content-card {
    display: block;
    text-decoration: none;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.stx-academy-content-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
    border-color: var(--stx-primary, #10b981);
}

.stx-academy-content-thumb {
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: #f5f5f5;
    position: relative;
}

.stx-academy-content-thumb.stx-no-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
}

.stx-academy-content-thumb.stx-no-thumb svg {
    width: 48px;
    height: 48px;
    opacity: 0.8;
}

.stx-video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.8);
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.stx-academy-content-info {
    padding: 16px;
}

.stx-academy-content-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--stx-text-muted, rgba(0,0,0,0.5));
}

.stx-content-type {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stx-content-type svg {
    width: 14px;
    height: 14px;
}

.stx-academy-content-info h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #000000;
    line-height: 1.4;
}

.stx-academy-content-info p {
    font-size: 13px;
    color: var(--stx-text-muted, rgba(0,0,0,0.6));
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.stx-academy-content-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
}

.stx-difficulty {
    font-weight: 500;
}

.stx-featured-badge {
    background: #fef3c7;
    color: #d97706;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}

/* Empty Category */
.stx-academy-empty-cat {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.1);
}

.stx-academy-empty-cat svg {
    color: rgba(0,0,0,0.2);
    margin-bottom: 16px;
}

.stx-academy-empty-cat p {
    font-size: 16px;
    color: #000000;
    margin: 0 0 8px 0;
}

.stx-academy-empty-cat span {
    font-size: 14px;
    color: var(--stx-text-muted, rgba(0,0,0,0.5));
}

/* Single Content View */
.stx-academy-single {
    max-width: 900px;
}

.stx-academy-single-header {
    margin-bottom: 24px;
}

.stx-academy-single-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.stx-category-badge {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.stx-difficulty-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.stx-difficulty-badge.stx-diff-beginner {
    background: rgba(39, 174, 96, 0.15);
    color: #27ae60;
}

.stx-difficulty-badge.stx-diff-intermediate {
    background: rgba(243, 156, 18, 0.15);
    color: #f39c12;
}

.stx-difficulty-badge.stx-diff-advanced {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

.stx-academy-single-header h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #000000;
    line-height: 1.3;
}

.stx-academy-single-excerpt {
    font-size: 16px;
    color: var(--stx-text-muted, rgba(0,0,0,0.6));
    margin: 0 0 16px 0;
    line-height: 1.6;
}

.stx-academy-single-info {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 14px;
    color: var(--stx-text-muted, rgba(0,0,0,0.5));
}

.stx-academy-single-info span {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Video Wrapper */
.stx-academy-video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    margin-bottom: 24px;
    border-radius: 12px;
    overflow: hidden;
    background: #000000;
}

.stx-academy-video-wrapper iframe,
.stx-academy-video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Single Thumbnail */
.stx-academy-single-thumb {
    margin-bottom: 24px;
    border-radius: 12px;
    overflow: hidden;
}

.stx-academy-single-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

/* Single Content */
.stx-academy-single-content {
    padding: 32px;
    margin-bottom: 24px;
    color: #000000;
    line-height: 1.7;
}

.stx-academy-single-content h2,
.stx-academy-single-content h3,
.stx-academy-single-content h4 {
    color: #000000;
    margin-top: 24px;
    margin-bottom: 12px;
}

.stx-academy-single-content p {
    margin-bottom: 16px;
}

.stx-academy-single-content ul,
.stx-academy-single-content ol {
    margin-bottom: 16px;
    padding-left: 24px;
}

.stx-academy-single-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Actions */
.stx-academy-single-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

/* Tags */
.stx-academy-single-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.stx-tag {
    background: rgba(0,0,0,0.05);
    color: rgba(0,0,0,0.6);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
}

/* Webinars Preview */
.stx-academy-webinars-preview .stx-card-header {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.stx-academy-webinar-list {
    padding: 0;
}

.stx-academy-webinar-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.stx-academy-webinar-item:last-child {
    border-bottom: none;
}

.stx-academy-webinar-date {
    width: 50px;
    text-align: center;
    flex-shrink: 0;
}

.stx-webinar-day {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #10b981;
    line-height: 1;
}

.stx-webinar-month {
    display: block;
    font-size: 12px;
    color: var(--stx-text-muted, rgba(0,0,0,0.5));
    text-transform: uppercase;
}

.stx-academy-webinar-info {
    flex: 1;
}

.stx-academy-webinar-info h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #000000;
}

.stx-academy-webinar-info p {
    font-size: 13px;
    color: var(--stx-text-muted, rgba(0,0,0,0.5));
    margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .stx-academy-content-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stx-academy-content-grid {
        grid-template-columns: 1fr;
    }
    
    .stx-academy-single-header h1 {
        font-size: 22px;
    }
    
    .stx-academy-single-info {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .stx-academy-webinar-item {
        flex-wrap: wrap;
    }
    
    .stx-academy-single-actions {
        flex-direction: column;
    }
}

/* ================================
   DASHBOARD WARENKORB
================================ */

.stx-cart-wrapper {
    max-width: 1200px;
}

.stx-cart-header-card {
    margin-bottom: 24px;
}

.stx-cart-header-card .stx-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stx-cart-header-card .stx-card-title svg {
    color: var(--stx-primary, #10b981);
}

/* Leerer Warenkorb */
.stx-cart-empty {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.1);
}

.stx-cart-empty-icon {
    color: rgba(0,0,0,0.15);
    margin-bottom: 20px;
}

.stx-cart-empty h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #000000;
}

.stx-cart-empty p {
    font-size: 14px;
    color: rgba(0,0,0,0.5);
    margin: 0 0 24px 0;
}

/* Warenkorb Inhalt */
.stx-cart-content {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
}

/* Warenkorb Items */
.stx-cart-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stx-cart-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.1);
    transition: border-color 0.2s ease;
}

.stx-cart-item:hover {
    border-color: rgba(0,0,0,0.2);
}

.stx-cart-item-image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
}

.stx-cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stx-cart-item-details {
    flex: 1;
    min-width: 0;
}

.stx-cart-item-name {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.stx-cart-item-name a {
    color: #000000;
    text-decoration: none;
}

.stx-cart-item-name a:hover {
    color: var(--stx-primary, #10b981);
}

.stx-cart-item-price {
    font-size: 13px;
    color: rgba(0,0,0,0.5);
}

/* Mengen-Steuerung */
.stx-cart-item-quantity {
    flex-shrink: 0;
}

.stx-qty-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    overflow: hidden;
}

.stx-qty-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: rgba(0,0,0,0.6);
    transition: all 0.2s ease;
}

.stx-qty-btn:hover {
    background: rgba(0,0,0,0.05);
    color: #000000;
}

.stx-qty-input {
    width: 40px;
    height: 36px;
    border: none;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    -moz-appearance: textfield;
}

.stx-qty-input::-webkit-outer-spin-button,
.stx-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.stx-cart-item-total {
    flex-shrink: 0;
    min-width: 80px;
    text-align: right;
    font-size: 15px;
    font-weight: 600;
    color: #000000;
}

.stx-cart-item-remove {
    flex-shrink: 0;
}

.stx-remove-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: rgba(0,0,0,0.4);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.stx-remove-item:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Warenkorb Zusammenfassung */
.stx-cart-summary .stx-card {
    position: sticky;
    top: 24px;
}

.stx-cart-totals {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 16px;
}

.stx-cart-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: rgba(0,0,0,0.7);
}

.stx-cart-total-row.stx-discount span:last-child {
    color: #10b981;
}

.stx-cart-total-row.stx-cart-grand-total {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.1);
}

/* Coupon */
.stx-cart-coupon {
    margin-bottom: 16px;
}

.stx-coupon-form {
    display: flex;
    gap: 8px;
}

.stx-coupon-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    font-size: 14px;
}

.stx-coupon-input:focus {
    outline: none;
    border-color: var(--stx-primary, #10b981);
}

.stx-coupon-message {
    margin-top: 8px;
    font-size: 13px;
}

/* Angewendeter Gutschein */
.stx-coupon-applied {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: 12px 16px;
}

.stx-coupon-applied-code {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #166534;
    font-family: monospace;
    font-size: 14px;
}

.stx-coupon-applied-code svg {
    color: #22c55e;
}

.stx-coupon-applied-discount {
    margin-left: auto;
    font-weight: 600;
    color: #15803d;
    font-size: 14px;
}

.stx-remove-coupon-btn {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #dc2626;
    opacity: 0.6;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stx-remove-coupon-btn:hover {
    opacity: 1;
}

/* Space Points im Warenkorb - Earned */
.stx-cart-points-earned {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 12px;
    margin: 12px 0;
    text-align: center;
}

.stx-cart-points-earned .stx-points-earned-label {
    font-size: 12px;
    color: #166534;
    margin-bottom: 4px;
}

.stx-cart-points-earned .stx-points-earned-value {
    font-size: 14px;
    color: #166534;
}

.stx-cart-points-earned .stx-points-earned-value strong {
    color: #15803d;
}

.stx-cart-points-earned .stx-points-euro-value {
    font-size: 12px;
    opacity: 0.8;
}

/* Space Points Einlösen */
.stx-cart-space-points {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

/* Space Points im Checkout (dunkles Theme) */
.stx-checkout-summary .stx-cart-space-points {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
}

.stx-checkout-summary .stx-space-points-title {
    color: #ffffff;
}

.stx-checkout-summary .stx-space-points-balance {
    color: rgba(255,255,255,0.7);
}

.stx-checkout-summary .stx-points-input {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #ffffff;
}

.stx-checkout-summary .stx-points-input:focus {
    border-color: #22d3ee;
}

.stx-checkout-summary .stx-points-euro-preview {
    color: rgba(255,255,255,0.7);
}

.stx-checkout-summary .stx-points-hint {
    color: rgba(255,255,255,0.5);
}

.stx-checkout-summary .stx-points-redeemed-info {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.stx-checkout-summary .stx-points-redeemed-text {
    color: #10b981;
}

.stx-space-points-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.stx-space-points-title {
    font-weight: 600;
    font-size: 14px;
    color: #1e3a5f;
}

.stx-space-points-balance {
    font-size: 12px;
    color: #64748b;
}

.stx-points-redeem-form {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
}

.stx-points-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.stx-points-input {
    flex: 1;
    min-width: 100px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
}

.stx-points-input:focus {
    outline: none;
    border-color: #22d3ee;
}

.stx-points-euro-preview {
    font-size: 14px;
    color: #64748b;
    white-space: nowrap;
}

.stx-points-hint {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 8px;
    text-align: center;
}

.stx-points-redeemed-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ecfdf5;
    border-radius: 6px;
    padding: 10px 12px;
}

.stx-points-redeemed-text {
    font-size: 13px;
    color: #059669;
    font-weight: 500;
}

.stx-remove-points-btn {
    color: #ef4444 !important;
    font-size: 12px !important;
}

.stx-points-discount {
    color: #059669;
}

.stx-points-discount span {
    color: #059669;
}

/* Checkout Button */
.stx-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.stx-btn.is-block {
    display: flex;
    width: 100%;
}

/* Sicherheits-Info */
.stx-cart-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 12px;
    color: rgba(0,0,0,0.5);
}

.stx-cart-security svg {
    color: #10b981;
}

/* Responsive */
@media (max-width: 992px) {
    .stx-cart-content {
        grid-template-columns: 1fr;
    }
    
    .stx-cart-summary .stx-card {
        position: static;
    }
}

@media (max-width: 768px) {
    .stx-cart-item {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .stx-cart-item-image {
        width: 60px;
        height: 60px;
    }
    
    .stx-cart-item-details {
        flex: 1 1 calc(100% - 90px);
    }
    
    .stx-cart-item-quantity,
    .stx-cart-item-total,
    .stx-cart-item-remove {
        flex: 0 0 auto;
    }
    
    .stx-cart-item-quantity {
        order: 1;
    }
    
    .stx-cart-item-total {
        order: 2;
        flex: 1;
    }
    
    .stx-cart-item-remove {
        order: 3;
    }
}

/* ================================
   NOTIFICATION TOAST
================================ */

.stx-notification {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 14px 24px;
    background: #1a2332;
    color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
}

.stx-notification.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.stx-notification-success {
    background: #10b981;
}

.stx-notification-error {
    background: #ef4444;
}

/* Spinner Animation */
.stx-spinner {
    animation: stx-spin 1s linear infinite;
}

@keyframes stx-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Success Button State */
.stx-btn.is-success {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
    pointer-events: none;
}

/* ================================
   MWST / TAX NOTE STYLES
================================ */

.stx-cart-tax-note,
.stx-checkout-tax-note,
.stx-order-tax-note {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* Light Theme Override */
.stx-cart-tax-note {
    color: rgba(0,0,0,0.5);
    border-top-color: rgba(0,0,0,0.1);
}

.stx-tax-row,
.stx-checkout-tax {
    color: rgba(255,255,255,0.6);
    font-size: 13px;
}

.stx-cart-totals .stx-tax-row {
    color: rgba(0,0,0,0.5);
}

/* ================================
   RESPONSIVE INVOICE TABLE/CARDS
================================ */

/* Desktop: Tabelle anzeigen, Mobile Cards verstecken */
.stx-invoices-desktop {
    display: block;
}

.stx-invoices-mobile {
    display: none;
}

/* Mobile Invoice Cards */
.stx-invoice-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.stx-invoice-card:last-child {
    margin-bottom: 0;
}

.stx-invoice-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.stx-invoice-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stx-invoice-card-number {
    font-weight: 700;
    font-size: 15px;
    color: #000000;
}

.stx-invoice-card-date {
    font-size: 13px;
    color: rgba(0,0,0,0.5);
}

.stx-invoice-card-body {
    padding: 12px 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.stx-invoice-card-products {
    font-size: 14px;
    color: rgba(0,0,0,0.7);
    line-height: 1.4;
}

.stx-invoice-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.stx-invoice-card-total {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
}

.stx-invoice-card-footer .stx-btn {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Responsive Breakpoint */
@media (max-width: 768px) {
    .stx-invoices-desktop {
        display: none;
    }
    
    .stx-invoices-mobile {
        display: block;
        padding: 16px;
    }
}

/* Invoice Summary Cards responsive */
@media (max-width: 768px) {
    .stx-invoice-summary .stx-stat-cards {
        grid-template-columns: 1fr !important;
    }
}

/* =====================================================
   MOBILE HAMBURGER MENU - FINALE ÜBERSCHREIBUNG
   Diese Regeln stehen am Ende und haben höchste Priorität
===================================================== */

/* Mobile Nav Container */
#stx-mobile-nav,
.stx-mobile-nav,
nav.stx-mobile-nav {
    background: #1e2a3a !important;
}

/* ALLE Elemente im Mobile Menu MÜSSEN weiß sein */
#stx-mobile-nav *,
.stx-mobile-nav *,
nav.stx-mobile-nav *,
#stx-mobile-nav a,
.stx-mobile-nav a,
#stx-mobile-nav span,
.stx-mobile-nav span,
#stx-mobile-nav div,
.stx-mobile-nav div {
    color: #ffffff !important;
}

/* Mobile Nav Links */
a.stx-mobile-nav-link,
.stx-mobile-nav a.stx-mobile-nav-link,
#stx-mobile-nav .stx-mobile-nav-link,
.stx-mobile-nav-link {
    color: #ffffff !important;
}

a.stx-mobile-nav-link:hover,
a.stx-mobile-nav-link:focus,
a.stx-mobile-nav-link:active,
a.stx-mobile-nav-link.is-active {
    color: #ffffff !important;
}

/* Mobile Nav Sub-Links */
a.stx-mobile-nav-sub,
.stx-mobile-nav-sub {
    color: #ffffff !important;
}

/* Mobile Nav Label (STORE etc.) */
span.stx-mobile-nav-label,
.stx-mobile-nav-label,
.stx-mobile-nav-group .stx-mobile-nav-label {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Abmelden - Rot */
a.stx-mobile-nav-link.is-danger,
.stx-mobile-nav-link.is-danger,
#stx-mobile-nav .stx-mobile-nav-link.is-danger {
    color: #ef4444 !important;
}

/* =====================================================
   AI TOOLS INPUT - ABSOLUTE FINALE ÜBERSCHREIBUNG
   Diese Regeln stehen GANZ AM ENDE und gewinnen IMMER
===================================================== */
#stx-tab-single-area input,
#stx-tab-single-area textarea,
#stx-tab-single-area select,
#stx-tab-single-area input[type="text"],
#stx-tab-single-area input[type="number"],
#stx-tab-single-area input[type="email"],
#stx-tab-single-area input[type="password"],
.stx-single-area-content input,
.stx-single-area-content textarea,
.stx-single-area-content select,
.stx-area-page-content input,
.stx-area-page-content textarea,
.stx-area-page-content select,
.stx-area-fullscreen input,
.stx-area-fullscreen textarea,
.stx-area-fullscreen select,
#stx-tab-single-area .stx-card input,
#stx-tab-single-area .stx-card textarea,
#stx-tab-single-area .stx-card select,
.stx-single-area-content .stx-card input,
.stx-single-area-content .stx-card textarea,
.stx-single-area-content .stx-card select,
body #stx-tab-single-area input,
body .stx-single-area-content input,
body .stx-area-page-content input,
html body #stx-tab-single-area input,
html body .stx-single-area-content input,
html body .stx-area-page-content input,
#stx-tab-single-area input:focus,
#stx-tab-single-area textarea:focus,
#stx-tab-single-area select:focus,
.stx-single-area-content input:focus,
.stx-single-area-content textarea:focus,
.stx-single-area-content select:focus,
.stx-area-page-content input:focus,
.stx-area-page-content textarea:focus,
.stx-area-page-content select:focus,
#stx-tab-single-area input.filled,
#stx-tab-single-area textarea.filled,
.stx-single-area-content input.filled,
.stx-single-area-content textarea.filled,
.stx-area-page-content input.filled,
.stx-area-page-content textarea.filled {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #080C11 !important;
    background-color: #080C11 !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}

#stx-tab-single-area input::placeholder,
#stx-tab-single-area textarea::placeholder,
.stx-single-area-content input::placeholder,
.stx-single-area-content textarea::placeholder,
.stx-area-page-content input::placeholder,
.stx-area-page-content textarea::placeholder {
    color: rgba(255,255,255,0.5) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.5) !important;
}

#stx-tab-single-area select option,
.stx-single-area-content select option,
.stx-area-page-content select option {
    background: #080C11 !important;
    background-color: #080C11 !important;
    color: #ffffff !important;
}

/* =====================================================
   CHECKOUT PREISE - FINALE ÜBERSCHREIBUNG
===================================================== */
.stx-checkout-wrapper .woocommerce-Price-amount,
.stx-checkout-wrapper .woocommerce-Price-amount bdi,
.stx-checkout-wrapper .woocommerce-Price-amount .woocommerce-Price-currencySymbol,
#stx-tab-checkout .woocommerce-Price-amount,
#stx-tab-checkout .woocommerce-Price-amount bdi,
.stx-checkout-item-price .woocommerce-Price-amount,
.stx-checkout-item-price .woocommerce-Price-amount bdi,
.stx-checkout-cart .woocommerce-Price-amount,
.stx-checkout-cart .woocommerce-Price-amount bdi {
    color: #ffffff !important;
}

/* Outline Buttons im Checkout */
.stx-checkout-wrapper .stx-btn.is-outline,
.stx-checkout-empty .stx-btn.is-outline,
.stx-empty-actions .stx-btn.is-outline,
#stx-tab-checkout .stx-btn.is-outline {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.5) !important;
}

/* Icons in Outline Buttons müssen auch weiß sein */
.stx-checkout-wrapper .stx-btn.is-outline .stx-icon,
.stx-checkout-wrapper .stx-btn.is-outline svg,
.stx-checkout-empty .stx-btn.is-outline .stx-icon,
.stx-checkout-empty .stx-btn.is-outline svg,
.stx-empty-actions .stx-btn.is-outline .stx-icon,
.stx-empty-actions .stx-btn.is-outline svg,
#stx-tab-checkout .stx-btn.is-outline .stx-icon,
#stx-tab-checkout .stx-btn.is-outline svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Space Points Input - Mobile */
@media (max-width: 480px) {
    .stx-points-redeem-form {
        gap: 8px;
    }
    
    .stx-points-input {
        min-width: 80px;
        padding: 10px 8px;
        font-size: 14px;
    }
    
    .stx-points-euro-preview {
        font-size: 13px;
    }
}

/* =====================================================
   LANGUAGE SWITCHER
===================================================== */
.stx-lang-switcher {
    position: relative;
}

.stx-lang-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stx-lang-btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.25);
}

.stx-flag {
    font-size: 20px;
    line-height: 1;
}

.stx-lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #1a2332;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 6px;
    min-width: 140px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.stx-lang-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.stx-lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.15s ease;
}

.stx-lang-option:hover {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
}

.stx-lang-option.is-active {
    background: rgba(34, 211, 238, 0.15);
    color: #22d3ee;
}

.stx-lang-option .stx-flag {
    font-size: 18px;
}

/* Mobile Nav Language Switcher */
.stx-mobile-lang-switcher {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 8px;
}

.stx-mobile-lang-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stx-mobile-lang-btn:hover {
    background: rgba(255,255,255,0.1);
}

.stx-mobile-lang-btn.is-active {
    background: rgba(34, 211, 238, 0.15);
    border-color: rgba(34, 211, 238, 0.3);
    color: #22d3ee;
}

/* =====================================================
   CHECKOUT - HELLES DESIGN (wie Warenkorb)
===================================================== */

/* Hintergrund hell */
.stx-app-root:has(#stx-tab-checkout.is-active),
.stx-app-root:has(#stx-tab-checkout.is-active) .stx-dashboard-content,
.stx-app-root:has(#stx-tab-checkout.is-active) .stx-dashboard-inner {
    background: #f8fafc !important;
}

/* Checkout Wrapper - Helles Theme */
#stx-tab-checkout .stx-checkout-wrapper {
    --stx-card: #ffffff;
    --stx-card-bg: #ffffff;
    --stx-text: #1e293b;
    --stx-text-secondary: #64748b;
    --stx-text-muted: #94a3b8;
    --stx-border: rgba(0,0,0,0.1);
}

/* Cards weiß */
#stx-tab-checkout .stx-card {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

#stx-tab-checkout .stx-card-header {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}

#stx-tab-checkout .stx-card-title {
    color: #1e293b !important;
}

/* Texte dunkel */
#stx-tab-checkout .stx-checkout-wrapper,
#stx-tab-checkout .stx-checkout-wrapper span,
#stx-tab-checkout .stx-checkout-wrapper p,
#stx-tab-checkout .stx-checkout-wrapper label,
#stx-tab-checkout .stx-checkout-wrapper h3,
#stx-tab-checkout .stx-checkout-wrapper h4,
#stx-tab-checkout .stx-checkout-row,
#stx-tab-checkout .stx-checkout-row span {
    color: #1e293b !important;
}

#stx-tab-checkout .stx-form-group label {
    color: #64748b !important;
}

/* Checkout Items */
#stx-tab-checkout .stx-checkout-item {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

#stx-tab-checkout .stx-checkout-item-name {
    color: #1e293b !important;
}

#stx-tab-checkout .stx-checkout-item-price,
#stx-tab-checkout .stx-checkout-item-price * {
    color: #1e293b !important;
}

/* Input Felder */
#stx-tab-checkout input[type="text"],
#stx-tab-checkout input[type="email"],
#stx-tab-checkout input[type="tel"],
#stx-tab-checkout input[type="number"],
#stx-tab-checkout select,
#stx-tab-checkout textarea {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.2) !important;
    color: #1e293b !important;
    -webkit-text-fill-color: #1e293b !important;
}

#stx-tab-checkout input::placeholder {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}

#stx-tab-checkout input:focus,
#stx-tab-checkout select:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

/* Zusammenfassung */
#stx-tab-checkout .stx-checkout-summary .stx-card {
    background: #ffffff !important;
}

#stx-tab-checkout .stx-checkout-totals {
    background: transparent !important;
}

#stx-tab-checkout .stx-checkout-row {
    border-color: rgba(0,0,0,0.1) !important;
}

#stx-tab-checkout .stx-checkout-total {
    color: #1e293b !important;
    font-weight: 700 !important;
}

#stx-tab-checkout .stx-checkout-total-amount {
    color: #10b981 !important;
}

/* Payment Methods */
#stx-tab-checkout .stx-wc-payment-method {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
}

#stx-tab-checkout .stx-wc-payment-method:hover {
    border-color: rgba(0,0,0,0.2) !important;
}

#stx-tab-checkout .stx-wc-payment-method.is-selected,
#stx-tab-checkout .stx-wc-payment-method:has(input:checked) {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.05) !important;
}

#stx-tab-checkout .stx-wc-payment-title {
    color: #1e293b !important;
}

#stx-tab-checkout .stx-wc-payment-description {
    color: #64748b !important;
}

#stx-tab-checkout .stx-wc-payment-description p {
    color: #64748b !important;
}

/* Space Points Box */
#stx-tab-checkout .stx-space-points-box {
    background: #f8fafc !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

#stx-tab-checkout .stx-space-points-title {
    color: #1e293b !important;
}

#stx-tab-checkout .stx-space-points-balance {
    color: #64748b !important;
}

#stx-tab-checkout .stx-points-input {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.2) !important;
    color: #1e293b !important;
}

#stx-tab-checkout .stx-points-euro-preview {
    color: #64748b !important;
}

#stx-tab-checkout .stx-points-hint {
    color: #94a3b8 !important;
}

#stx-tab-checkout .stx-points-redeemed-info {
    background: #ecfdf5 !important;
    border: 1px solid #10b981 !important;
}

#stx-tab-checkout .stx-points-redeemed-text {
    color: #059669 !important;
}

/* AGB Checkbox */
#stx-tab-checkout .stx-checkout-terms {
    background: #f8fafc !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

#stx-tab-checkout .stx-checkout-terms span {
    color: #64748b !important;
}

#stx-tab-checkout .stx-checkout-terms a {
    color: #10b981 !important;
}

/* Sichere Zahlung */
#stx-tab-checkout .stx-checkout-secure {
    color: #64748b !important;
}

/* Remove Button */
#stx-tab-checkout .stx-checkout-remove {
    background: rgba(0,0,0,0.05) !important;
    color: #64748b !important;
}

#stx-tab-checkout .stx-checkout-remove:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
}

/* Gutscheincode */
#stx-tab-checkout .stx-coupon-form input {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.2) !important;
    color: #1e293b !important;
}

/* MwSt Text */
#stx-tab-checkout .stx-checkout-vat,
#stx-tab-checkout .stx-text-muted {
    color: #64748b !important;
}

/* Discount/Rabatt grün */
#stx-tab-checkout .stx-checkout-discount span:last-child,
#stx-tab-checkout .stx-price-green {
    color: #10b981 !important;
}

/* Quantity Controls */
#stx-tab-checkout .stx-qty-btn {
    background: #f1f5f9 !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    color: #1e293b !important;
}

#stx-tab-checkout .stx-qty-btn:hover {
    background: #e2e8f0 !important;
}

#stx-tab-checkout .stx-qty-input {
    background: #ffffff !important;
    color: #1e293b !important;
}

/* Order Received auch hell */
.stx-app-root:has(#stx-tab-order-received.is-active),
.stx-app-root:has(#stx-tab-order-received.is-active) .stx-dashboard-content,
.stx-app-root:has(#stx-tab-order-received.is-active) .stx-dashboard-inner {
    background: #f8fafc !important;
}

#stx-tab-order-received .stx-card {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

#stx-tab-order-received .stx-card-title,
#stx-tab-order-received h3 {
    color: #1e293b !important;
}

#stx-tab-order-received span,
#stx-tab-order-received p {
    color: #64748b !important;
}

/* =====================================================
   STELARAX CHECKOUT FIXES - v4.5.4
   - Eckige Ecken (keine runden)
   - Helle Hintergründe
   - Lesbare dunkle Texte
===================================================== */

/* ===== GLOBALE ECKIGE ECKEN IM CHECKOUT ===== */
#stx-tab-checkout .stx-card,
#stx-tab-checkout .stx-checkout-cart,
#stx-tab-checkout .stx-checkout-billing,
#stx-tab-checkout .stx-checkout-payment-card,
#stx-tab-checkout .stx-checkout-summary,
#stx-tab-checkout .stx-checkout-item,
#stx-tab-checkout .stx-checkout-terms,
#stx-tab-checkout .stx-space-points-box,
#stx-tab-checkout .stx-wc-payment-method,
#stx-tab-checkout .stx-checkout-form input,
#stx-tab-checkout .stx-checkout-form select,
#stx-tab-checkout .stx-checkout-form textarea,
#stx-tab-checkout .stx-points-input,
#stx-tab-checkout .stx-coupon-form input,
#stx-tab-checkout .stx-btn,
#stx-tab-checkout .stx-checkout-submit,
#stx-tab-checkout .stx-checkout-remove,
#stx-tab-checkout .stx-qty-btn,
#stx-tab-checkout .stx-qty-input,
#stx-tab-checkout .stx-points-redeemed-info {
    border-radius: 0 !important;
}

/* ===== WARENKORB CARD - HELL ===== */
#stx-tab-checkout .stx-checkout-cart {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

#stx-tab-checkout .stx-checkout-cart .stx-card-header {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}

#stx-tab-checkout .stx-checkout-cart .stx-card-title {
    color: #1e293b !important;
}

/* Warenkorb Items - Border und Text dunkel */
#stx-tab-checkout .stx-checkout-item {
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    background: transparent !important;
}

#stx-tab-checkout .stx-checkout-item-qty {
    color: #64748b !important;
}

/* ===== RECHNUNGSADRESSE CARD - HELL ===== */
#stx-tab-checkout .stx-checkout-billing {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

#stx-tab-checkout .stx-checkout-billing .stx-card-header {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}

/* Labels für Formularfelder - gut lesbar */
#stx-tab-checkout .stx-checkout-form .stx-form-group label {
    color: #00b8e0 !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

/* ===== PAYMENT CARD - HELL ===== */
#stx-tab-checkout .stx-checkout-payment-card {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

#stx-tab-checkout .stx-checkout-payment-card .stx-card-header {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}

#stx-tab-checkout .stx-checkout-payment-card .stx-card-title {
    color: #1e293b !important;
}

/* Payment Methods Border */
#stx-tab-checkout .stx-wc-payment-method {
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    padding: 16px 0 !important;
    margin-bottom: 0 !important;
}

#stx-tab-checkout .stx-wc-payment-method:last-child {
    border-bottom: none !important;
}

/* ===== ZUSAMMENFASSUNG CARD - HELL ===== */
#stx-tab-checkout .stx-checkout-summary {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

#stx-tab-checkout .stx-checkout-summary .stx-card-header {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}

#stx-tab-checkout .stx-checkout-summary .stx-card-title {
    color: #1e293b !important;
}

/* Zwischensumme, MwSt, etc - DUNKEL LESBAR */
#stx-tab-checkout .stx-checkout-totals .stx-checkout-row,
#stx-tab-checkout .stx-checkout-totals .stx-checkout-row span,
#stx-tab-checkout .stx-checkout-summary .stx-checkout-row,
#stx-tab-checkout .stx-checkout-summary .stx-checkout-row span,
#stx-tab-checkout .stx-checkout-row span:first-child,
#stx-tab-checkout .stx-checkout-row span:last-child,
#stx-tab-checkout .stx-checkout-summary .woocommerce-Price-amount,
#stx-tab-checkout .stx-checkout-summary .woocommerce-Price-amount bdi,
#stx-tab-checkout .stx-checkout-summary .amount,
#stx-tab-checkout .stx-checkout-totals .woocommerce-Price-amount,
#stx-tab-checkout .stx-checkout-totals .woocommerce-Price-amount bdi,
#stx-tab-checkout .stx-checkout-totals .amount {
    color: #1e293b !important;
}

/* Gesamt-Betrag weiterhin grün */
#stx-tab-checkout .stx-checkout-row.stx-checkout-total span:last-child,
#stx-tab-checkout .stx-checkout-row.stx-checkout-total .woocommerce-Price-amount,
#stx-tab-checkout .stx-checkout-row.stx-checkout-total bdi,
#stx-tab-checkout .stx-checkout-total-amount {
    color: #10b981 !important;
}

/* Rabatt/Discount weiterhin grün */
#stx-tab-checkout .stx-checkout-row.stx-checkout-discount span:last-child {
    color: #10b981 !important;
}

/* Border oben bei Gesamt */
#stx-tab-checkout .stx-checkout-row.stx-checkout-total {
    border-top: 2px solid rgba(0,0,0,0.1) !important;
}

/* ===== SPACE POINTS BOX - HELL ===== */
#stx-tab-checkout .stx-space-points-box {
    background: #f8fafc !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

/* ===== AGB CHECKBOX - HELL ===== */
#stx-tab-checkout .stx-checkout-terms {
    background: #f8fafc !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

/* ===== SELECT OPTIONS ===== */
#stx-tab-checkout .stx-checkout-form select option {
    background: #ffffff !important;
    color: #1e293b !important;
}