/* ==========================================================================
   TB Studio — theme override (colorway + buttons ported from fcalculater 2.0)
   Loaded last on every page. Changes colors and button look only —
   layout, spacing, animations and images stay untouched.
   ========================================================================== */

:root {
  /* 2.0 palette */
  --bg: #060a1c;
  --bg-soft: #0a1128;
  --bg-raise: #0c1330;
  --bg-panel: #0c1330;
  --bg-panel-2: #101a3d;
  --bg-panel-strong: rgba(15, 24, 60, 0.88);
  --surface: rgba(255, 255, 255, 0.03);
  --surface-2: rgba(255, 255, 255, 0.055);
  --surface-strong: rgba(255, 255, 255, 0.055);
  --panel: rgba(255, 255, 255, 0.03);
  --panel-strong: rgba(255, 255, 255, 0.055);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f5f6f8;
  --muted: #8b93a1;
  --accent: #67e8f9;
  --accent-dim: rgba(103, 232, 249, 0.14);
  --accent-soft: rgba(103, 232, 249, 0.14);
  --glow: rgba(103, 232, 249, 0.14);
  --link: #67e8f9;
  color-scheme: dark;
}

/* ---- Page background: flat dark navy with one subtle cyan glow ---------- */
body {
  background-color: var(--bg) !important;
  background-image: radial-gradient(ellipse 760px 520px at 50% -260px, rgba(103, 232, 249, 0.07), transparent 65%) !important;
  background-repeat: no-repeat !important;
  color: var(--text);
}

.muted {
  color: var(--muted);
}

::selection {
  background: rgba(103, 232, 249, 0.25);
  color: #ffffff;
}

:focus-visible {
  outline: 2px solid rgba(103, 232, 249, 0.7);
  outline-offset: 3px;
}

html {
  scrollbar-color: rgba(139, 147, 161, 0.35) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
  background-color: rgba(139, 147, 161, 0.3);
}

/* ---- Buttons: 2.0 look ---------------------------------------------------
   Primary = solid light pill with dark text.
   Secondary/ghost = transparent pill with hairline border.               */

/* Primary buttons defined per page (weby, frh, freelancer-hub, kontakt) */
.button-primary {
  background: var(--text) !important;
  border: 0 !important;
  color: #0a0b0f !important;
  box-shadow: none !important;
}

.button-primary:hover {
  background: var(--text) !important;
  opacity: 0.92;
  box-shadow: none !important;
}

/* Primary Tailwind CTA buttons (index, kalkulacka, payment-success) */
a[class*="from-indigo-500"],
button[class*="from-indigo-500"] {
  background: var(--text) !important;
  color: #0a0b0f !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

a[class*="from-indigo-500"]:hover,
button[class*="from-indigo-500"]:hover {
  opacity: 0.92;
  box-shadow: none !important;
}

/* Secondary / ghost buttons */
.button-secondary,
.button:not(.button-primary):not(.button-secondary) {
  background: transparent !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.button-secondary:hover,
.button:not(.button-primary):not(.button-secondary):hover {
  background: var(--surface) !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
  box-shadow: none !important;
}

/* Ghost utility buttons in kalkulacka (reset, copy, …) */
button.glass:not([class*="yellow"]) {
  background: transparent !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 999px !important;
}

button.glass:not([class*="yellow"]):hover {
  background: var(--surface) !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
}

/* Feedback (yellow) button → single-accent scheme */
button.glass[class*="yellow"],
a.glass[class*="yellow"] {
  border-radius: 999px !important;
  border: 1px solid rgba(103, 232, 249, 0.3) !important;
}

/* Contact-page service chips: active state uses the accent */
.button.service-button.is-active,
.service-button.is-active {
  background: var(--accent-dim) !important;
  border-color: rgba(103, 232, 249, 0.4) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

.button.service-button.is-active:hover,
.service-button.is-active:hover {
  background: var(--accent-dim) !important;
  border-color: rgba(103, 232, 249, 0.4) !important;
  box-shadow: none !important;
}

/* Freelancer Hub hero CTAs → 2.0 buttons (buy = primary, rest = ghost) */
.hero-links a {
  background: transparent !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-size: 0.92rem !important;
  text-shadow: none !important;
}

.hero-links a:hover {
  background: var(--surface) !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
  box-shadow: none !important;
}

.hero-links a::after {
  display: none !important;
}

.hero-links a[data-open-payment] {
  background: var(--text) !important;
  border: 0 !important;
  color: #0a0b0f !important;
}

.hero-links a[data-open-payment]:hover {
  background: var(--text) !important;
  opacity: 0.92;
}

/* Freelancer Hub photos: no dark-blue boxes behind/inside the images */
.hero-media,
.hero-media img,
.hero-dark .hero-media,
.hero-dark .hero-media img,
.hero-dark-desktop-shot,
.hero-dark .hero-media .hero-dark-mobile-shot img,
.hero-light .hero-media,
.hero-light .hero-media img {
  background: transparent !important;
}

.hero-light {
  background: transparent !important;
}

/* frh.html standalone nav → same look as the global nav */
.site-nav .nav-links a {
  font-size: 0.85rem;
  font-weight: 500;
  color: #8b93a1;
}

.site-nav .nav-links a:hover,
.site-nav .nav-links a.is-active {
  color: #f5f6f8;
}

/* ---- Tailwind tint remaps → one cyan accent ------------------------------ */
.bg-indigo-500\/15,
.bg-emerald-500\/15,
.bg-emerald-500\/20,
.bg-cyan-500\/15,
.bg-yellow-500\/20 {
  background-color: var(--accent-dim) !important;
}

.bg-slate-500\/15 {
  background-color: var(--surface-2) !important;
}

.hover\:bg-yellow-500\/30:hover {
  background-color: rgba(103, 232, 249, 0.22) !important;
}

.border-indigo-300\/20,
.border-slate-300\/20 {
  border-color: var(--line) !important;
}

.border-emerald-300\/20,
.border-emerald-400\/30,
.border-cyan-300\/20 {
  border-color: rgba(103, 232, 249, 0.24) !important;
}

.text-indigo-200,
.text-emerald-200,
.text-emerald-300,
.text-yellow-300,
.text-yellow-400 {
  color: var(--accent) !important;
}

.shadow-indigo-500\/20 {
  --tw-shadow-color: transparent !important;
  box-shadow: none !important;
}