/* ============================================
   Tripino SaaS — Skin System
   Selectable via Tripino SaaS → Nastavení
   ============================================ */

/* ─── SKIN: Nature (default) ─── */
.tripsaas-skin-nature {
    --skin-bg: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 30%, #fff 60%, #fafaf9 100%);
    --skin-surface: #fff;
    --skin-surface-alt: #f0fdf4;
    --skin-primary: #16a34a;
    --skin-primary-dark: #15803d;
    --skin-primary-light: #dcfce7;
    --skin-primary-pale: #f0fdf4;
    --skin-accent: #f97316;
    --skin-accent-dark: #ea580c;
    --skin-accent-light: #fff7ed;
    --skin-text: #1c1917;
    --skin-text-muted: #57534e;
    --skin-text-light: #78716c;
    --skin-border: #d6d3d1;
    --skin-border-light: #e7e5e4;
    --skin-heading: #1a3a2a;
    --skin-card-shadow: 0 4px 16px rgba(22,163,74,.08);
    --skin-btn-shadow: 0 2px 8px rgba(22,163,74,.2);
    --skin-marker: #16a34a;
    --skin-success: #16a34a;
    --skin-glow: rgba(34,197,94,.15);
    --skin-loading-bg: rgba(240,253,244,.95);
    --skin-intro-gradient: linear-gradient(135deg, #15803d 0%, #166534 40%, #14532d 100%);
    --skin-intro-text: #fff;
    --skin-intro-accent: #4ade80;
}

/* ─── SKIN: Ocean ─── */
.tripsaas-skin-ocean {
    --skin-bg: linear-gradient(180deg, #eff6ff 0%, #dbeafe 30%, #fff 60%, #f8fafc 100%);
    --skin-surface: #fff;
    --skin-surface-alt: #eff6ff;
    --skin-primary: #2563eb;
    --skin-primary-dark: #1d4ed8;
    --skin-primary-light: #dbeafe;
    --skin-primary-pale: #eff6ff;
    --skin-accent: #f97316;
    --skin-accent-dark: #ea580c;
    --skin-accent-light: #fff7ed;
    --skin-text: #0f172a;
    --skin-text-muted: #475569;
    --skin-text-light: #64748b;
    --skin-border: #cbd5e1;
    --skin-border-light: #e2e8f0;
    --skin-heading: #1e3a5f;
    --skin-card-shadow: 0 4px 16px rgba(37,99,235,.08);
    --skin-btn-shadow: 0 2px 8px rgba(37,99,235,.2);
    --skin-marker: #2563eb;
    --skin-success: #16a34a;
    --skin-glow: rgba(59,130,246,.15);
    --skin-loading-bg: rgba(239,246,255,.95);
    --skin-intro-gradient: linear-gradient(135deg, #1e40af 0%, #1e3a8a 40%, #172554 100%);
    --skin-intro-text: #fff;
    --skin-intro-accent: #60a5fa;
}

/* ─── SKIN: Sunset ─── */
.tripsaas-skin-sunset {
    --skin-bg: linear-gradient(180deg, #fff7ed 0%, #fef3c7 30%, #fff 60%, #fffbeb 100%);
    --skin-surface: #fff;
    --skin-surface-alt: #fff7ed;
    --skin-primary: #ea580c;
    --skin-primary-dark: #c2410c;
    --skin-primary-light: #fed7aa;
    --skin-primary-pale: #fff7ed;
    --skin-accent: #dc2626;
    --skin-accent-dark: #b91c1c;
    --skin-accent-light: #fef2f2;
    --skin-text: #1c1917;
    --skin-text-muted: #57534e;
    --skin-text-light: #78716c;
    --skin-border: #d6d3d1;
    --skin-border-light: #e7e5e4;
    --skin-heading: #431407;
    --skin-card-shadow: 0 4px 16px rgba(234,88,12,.08);
    --skin-btn-shadow: 0 2px 8px rgba(234,88,12,.2);
    --skin-marker: #ea580c;
    --skin-success: #16a34a;
    --skin-glow: rgba(249,115,22,.15);
    --skin-loading-bg: rgba(255,247,237,.95);
    --skin-intro-gradient: linear-gradient(135deg, #c2410c 0%, #9a3412 40%, #7c2d12 100%);
    --skin-intro-text: #fff;
    --skin-intro-accent: #fb923c;
}

/* ─── SKIN: Dark Forest ─── */
.tripsaas-skin-darkforest {
    --skin-bg: linear-gradient(180deg, #1a2e1a 0%, #1c2e1c 30%, #162016 60%, #0f170f 100%);
    --skin-surface: #1e301e;
    --skin-surface-alt: #243624;
    --skin-primary: #4ade80;
    --skin-primary-dark: #22c55e;
    --skin-primary-light: #14532d;
    --skin-primary-pale: #1a2e1a;
    --skin-accent: #fbbf24;
    --skin-accent-dark: #f59e0b;
    --skin-accent-light: #422006;
    --skin-text: #e8f5e8;
    --skin-text-muted: #a3c4a3;
    --skin-text-light: #7da37d;
    --skin-border: #2d4a2d;
    --skin-border-light: #365036;
    --skin-heading: #bbf7d0;
    --skin-card-shadow: 0 4px 16px rgba(0,0,0,.3);
    --skin-btn-shadow: 0 2px 8px rgba(74,222,128,.2);
    --skin-marker: #4ade80;
    --skin-success: #4ade80;
    --skin-glow: rgba(74,222,128,.15);
    --skin-loading-bg: rgba(26,46,26,.95);
    --skin-intro-gradient: linear-gradient(135deg, #14532d 0%, #052e16 40%, #022c22 100%);
    --skin-intro-text: #dcfce7;
    --skin-intro-accent: #86efac;
}

/* ─── SKIN: Lavender ─── */
.tripsaas-skin-lavender {
    --skin-bg: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 30%, #fff 60%, #faf5ff 100%);
    --skin-surface: #fff;
    --skin-surface-alt: #f5f3ff;
    --skin-primary: #7c3aed;
    --skin-primary-dark: #6d28d9;
    --skin-primary-light: #ddd6fe;
    --skin-primary-pale: #f5f3ff;
    --skin-accent: #ec4899;
    --skin-accent-dark: #db2777;
    --skin-accent-light: #fdf2f8;
    --skin-text: #1e1b4b;
    --skin-text-muted: #6b7280;
    --skin-text-light: #9ca3af;
    --skin-border: #d8b4fe;
    --skin-border-light: #e9d5ff;
    --skin-heading: #3b0764;
    --skin-card-shadow: 0 4px 16px rgba(124,58,237,.08);
    --skin-btn-shadow: 0 2px 8px rgba(124,58,237,.2);
    --skin-marker: #7c3aed;
    --skin-success: #16a34a;
    --skin-glow: rgba(124,58,237,.15);
    --skin-loading-bg: rgba(245,243,255,.95);
    --skin-intro-gradient: linear-gradient(135deg, #6d28d9 0%, #5b21b6 40%, #4c1d95 100%);
    --skin-intro-text: #fff;
    --skin-intro-accent: #a78bfa;
}


/* ============================================
   Apply skin vars to all SaaS components
   ============================================ */

/* Body / fullscreen background */
.tripsaas-fullscreen[class*="tripsaas-skin-"] {
    background: var(--skin-bg);
}

/* Editor overrides */
[class*="tripsaas-skin-"] .tripsaas-container {
    background: var(--skin-bg);
    color: var(--skin-text);
}
[class*="tripsaas-skin-"] .tripsaas-header h1,
[class*="tripsaas-skin-"] .tripsaas-header h2 { color: var(--skin-heading); }
[class*="tripsaas-skin-"] .tripsaas-subtitle { color: var(--skin-text-muted); }

[class*="tripsaas-skin-"] .tripsaas-btn {
    background: var(--skin-primary);
    box-shadow: var(--skin-btn-shadow);
}
[class*="tripsaas-skin-"] .tripsaas-btn:hover { background: var(--skin-primary-dark); }
[class*="tripsaas-skin-"] .tripsaas-btn:disabled { background: var(--skin-border); box-shadow: none; }

[class*="tripsaas-skin-"] .tripsaas-btn-pay { background: var(--skin-accent); }
[class*="tripsaas-skin-"] .tripsaas-btn-pay:hover { background: var(--skin-accent-dark); }

[class*="tripsaas-skin-"] .tripsaas-btn-sm { background: var(--skin-surface); border-color: var(--skin-border); color: var(--skin-text); }
[class*="tripsaas-skin-"] .tripsaas-btn-sm:hover { border-color: var(--skin-primary); background: var(--skin-primary-pale); }

[class*="tripsaas-skin-"] .tripsaas-btn-back { border-color: var(--skin-border); color: var(--skin-text-muted); }
[class*="tripsaas-skin-"] .tripsaas-btn-back:hover { border-color: var(--skin-text); color: var(--skin-text); }

[class*="tripsaas-skin-"] .tripsaas-search-bar input { border-color: var(--skin-border); background: var(--skin-surface); color: var(--skin-text); }
[class*="tripsaas-skin-"] .tripsaas-search-bar input:focus { border-color: var(--skin-primary); box-shadow: 0 0 0 3px var(--skin-glow); }

[class*="tripsaas-skin-"] .tripsaas-badge { background: var(--skin-primary-light); color: var(--skin-primary-dark); }

[class*="tripsaas-skin-"] .tripsaas-point-item { background: var(--skin-surface); border-color: var(--skin-border-light); }
[class*="tripsaas-skin-"] .tripsaas-point-item:hover { border-color: var(--skin-primary); box-shadow: var(--skin-card-shadow); }
[class*="tripsaas-skin-"] .tripsaas-point-num { background: var(--skin-primary); box-shadow: 0 1px 3px var(--skin-glow); }
[class*="tripsaas-skin-"] .tripsaas-point-name input { color: var(--skin-text); border-color: var(--skin-border-light); }
[class*="tripsaas-skin-"] .tripsaas-point-name input:focus { border-color: var(--skin-primary); }

[class*="tripsaas-skin-"] .tripsaas-theme-card { background: var(--skin-surface); border-color: var(--skin-border-light); }
[class*="tripsaas-skin-"] .tripsaas-theme-card:hover { border-color: var(--skin-primary); box-shadow: 0 4px 16px var(--skin-glow); }
[class*="tripsaas-skin-"] .tripsaas-theme-card.tripsaas-selected { border-color: var(--skin-primary); background: var(--skin-primary-pale); box-shadow: 0 0 0 3px var(--skin-glow); }
[class*="tripsaas-skin-"] .tripsaas-theme-label { color: var(--skin-heading); }

[class*="tripsaas-skin-"] .tripsaas-field label { color: var(--skin-heading); }
[class*="tripsaas-skin-"] .tripsaas-field input { border-color: var(--skin-border); background: var(--skin-surface); color: var(--skin-text); }
[class*="tripsaas-skin-"] .tripsaas-field input:focus { border-color: var(--skin-primary); box-shadow: 0 0 0 3px var(--skin-glow); }
[class*="tripsaas-skin-"] .tripsaas-free-badge { background: var(--skin-primary-light); color: var(--skin-primary-dark); }

[class*="tripsaas-skin-"] .tripsaas-price-card { background: var(--skin-surface); border-color: var(--skin-border-light); }
[class*="tripsaas-skin-"] .tripsaas-price-card:hover { border-color: var(--skin-primary); }
[class*="tripsaas-skin-"] .tripsaas-price-card.tripsaas-selected { border-color: var(--skin-primary); background: var(--skin-primary-pale); box-shadow: 0 0 0 3px var(--skin-glow); }
[class*="tripsaas-skin-"] .tripsaas-price-amount { color: var(--skin-heading); }
[class*="tripsaas-skin-"] .tripsaas-price-unit { color: var(--skin-text-muted); }
[class*="tripsaas-skin-"] .tripsaas-price-desc { color: var(--skin-text-light); }
[class*="tripsaas-skin-"] .tripsaas-pricing-divider span { background: var(--skin-primary-pale); color: var(--skin-primary); }
[class*="tripsaas-skin-"] .tripsaas-price-business { border-color: var(--skin-primary); }
[class*="tripsaas-skin-"] .tripsaas-price-extras { color: var(--skin-primary); }

[class*="tripsaas-skin-"] .tripsaas-summary { background: var(--skin-surface); border-color: var(--skin-border-light); }
[class*="tripsaas-skin-"] .tripsaas-summary-row { border-color: var(--skin-primary-pale); }

[class*="tripsaas-skin-"] .tripsaas-success-card { background: var(--skin-surface); border-color: var(--skin-border-light); box-shadow: var(--skin-card-shadow); }
[class*="tripsaas-skin-"] .tripsaas-success-card h2 { color: var(--skin-primary); }
[class*="tripsaas-skin-"] .tripsaas-game-link-box input { border-color: var(--skin-border); background: var(--skin-surface-alt); color: var(--skin-text); }
[class*="tripsaas-skin-"] .tripsaas-expires { color: var(--skin-text-muted); }

[class*="tripsaas-skin-"] .tripsaas-loading { background: var(--skin-loading-bg); }
[class*="tripsaas-skin-"] .tripsaas-spinner { border-color: var(--skin-primary-light); border-top-color: var(--skin-primary); }
[class*="tripsaas-skin-"] .tripsaas-loading p { color: var(--skin-heading); }

[class*="tripsaas-skin-"] .tripsaas-marker { background: var(--skin-marker); box-shadow: 0 2px 8px var(--skin-glow); }

/* ─── Payment return page skin overrides ─── */
[class*="tripsaas-skin-"] .tripsaas-return-body {
    background: var(--skin-bg);
    color: var(--skin-text);
}
[class*="tripsaas-skin-"] .tripsaas-return-card {
    background: var(--skin-surface);
    box-shadow: var(--skin-card-shadow);
}
[class*="tripsaas-skin-"] .tripsaas-return-card h2 { color: var(--skin-heading); }
[class*="tripsaas-skin-"] .tripsaas-return-card p { color: var(--skin-text-muted); }
[class*="tripsaas-skin-"] .tripsaas-return-btn { background: var(--skin-accent); color: #fff; }
[class*="tripsaas-skin-"] .tripsaas-return-btn:hover { background: var(--skin-accent-dark); }
[class*="tripsaas-skin-"] .tripsaas-return-spinner { border-color: var(--skin-border-light); border-top-color: var(--skin-primary); }