/* =============================================
   FXPOINT Trading Team — Custom Styles
   ============================================= */

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  background: #f0f0f0;
  color: #333;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

a {
  text-decoration: none;
}

/* ── Brand colours ── */
.metal-text { color: #333; }
.gold-text  { color: #ff8c00; }

/* ── Cards ── */
.card-bg {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.gold-border { border: 1px solid #ff8c00; }
.soft-shadow { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); }

/* ── Mobile menu ── */
.mobile-menu        { display: none; }
.mobile-menu.open   { display: block; }

/* ── Social icon buttons ── */
.social-icon-btn {
  color: #666;
  border: 1px solid #ddd;
  background-color: #fff;
  transition: color .2s, border-color .2s;
}
.social-icon-btn:hover {
  color: #ff8c00;
  border-color: #ff8c00;
}

/* ── Input / textarea focus ── */
input:focus,
textarea:focus {
  border-color: #ff8c00 !important;
  box-shadow: 0 0 0 1px #ff8c00;
}

/* ── Language switcher ── */
.lang-btn {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #999;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  background: transparent;
  letter-spacing: .05em;
  transition: color .2s, border-color .2s, background .2s;
  line-height: 1.6;
}
.lang-btn.active {
  color: #ff8c00;
  border-color: #ff8c00;
  background: #fff8f0;
}
.lang-btn:hover:not(.active) {
  color: #ff8c00;
  border-color: #ff8c00;
}

/* ── Honeypot (anti-spam) — must be invisible to humans ── */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  pointer-events: none;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* ── Form states ── */
#submitBtn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ════════════════════════════════════════════
   DARK MODE — manuální přepínač (třída html.dark)
   Default: světlý režim pro všechny.
   Přepínač slunce/měsíc v navigaci ukládá volbu do localStorage.
   ════════════════════════════════════════════ */

/* Plynulý přechod při přepnutí */
html { transition: background .25s, color .25s; }

html.dark body {
  background: #0f172a !important;
  color: #e2e8f0;
}

/* ── Text utility třídy ── */
html.dark .text-gray-900 { color: #f1f5f9 !important; }
html.dark .text-gray-800 { color: #e2e8f0 !important; }
html.dark .text-gray-700 { color: #cbd5e1 !important; }
html.dark .text-gray-600 { color: #94a3b8 !important; }
html.dark .text-gray-500 { color: #64748b !important; }
html.dark .text-gray-400 { color: #475569 !important; }
html.dark .metal-text    { color: #e2e8f0 !important; }

/* ── Pozadí sekcí ── */
html.dark .bg-white    { background-color: #1e293b !important; }
html.dark .bg-gray-50  { background-color: #111827 !important; }
html.dark .bg-gray-100 { background-color: #0d1117 !important; }

/* ── Citát sekce (béžové pozadí #d8d4cf) ── */
html.dark [class*="d8d4cf"] { background-color: #1c1917 !important; }

/* ── Borders ── */
html.dark .border-gray-200              { border-color: #334155 !important; }
html.dark .border-gray-300              { border-color: #475569 !important; }
html.dark .border-b,
html.dark .border-t,
html.dark .border-y                     { border-color: #1e293b !important; }

/* ── Header ── */
html.dark header {
  background-color: rgba(15, 23, 42, 0.97) !important;
  border-color: #1e293b !important;
}

/* ── Mobilní menu ── */
html.dark #mobileMenu {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
}
html.dark #mobileMenu a { color: #cbd5e1 !important; }

/* ── Karty ── */
html.dark .card-bg {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
html.dark .soft-shadow { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important; }

/* ── Formulář — pole ── */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="tel"],
html.dark textarea {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #475569 !important; }
html.dark select {
  background-color: #111827 !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}
html.dark .border-r-2    { border-color: #334155 !important; }
html.dark #consentLabel  { border-color: #334155 !important; }
html.dark input:focus,
html.dark textarea:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 1px #f97316 !important;
}

/* ── Pro koho — červené/zelené karty ── */
html.dark .bg-red-50        { background-color: rgba(127, 29, 29, 0.25) !important; }
html.dark .bg-green-50      { background-color: rgba(20, 83, 45, 0.25)  !important; }
html.dark .border-red-200   { border-color: rgba(185, 28, 28, 0.5)      !important; }
html.dark .border-green-200 { border-color: rgba(22, 101, 52, 0.5)      !important; }
html.dark .text-red-700     { color: #fca5a5 !important; }
html.dark .text-green-700   { color: #86efac !important; }
html.dark .text-red-500     { color: #f87171 !important; }
html.dark .text-green-500   { color: #4ade80 !important; }

/* ── Sociální tlačítka ── */
html.dark .social-icon-btn {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

/* ── Language switcher ── */
html.dark .lang-btn {
  border-color: #334155 !important;
  color: #64748b !important;
}
html.dark .lang-btn.active {
  color: #f97316 !important;
  border-color: #f97316 !important;
  background: #1c1008 !important;
}

/* ── Dark mode tlačítko ── */
#darkModeBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  background: transparent;
  cursor: pointer;
  color: #999;
  transition: color .2s, border-color .2s;
}
#darkModeBtn:hover { color: #ff8c00; border-color: #ff8c00; }
html.dark #darkModeBtn { border-color: #334155 !important; color: #64748b !important; }
html.dark #darkModeBtn:hover { color: #f97316 !important; border-color: #f97316 !important; }

/* ── Patička ── */
html.dark footer {
  background-color: #0d1117 !important;
  border-color: #1e293b !important;
}

/* ── Právní sekce ── */
html.dark #pravni { background-color: #0d1117 !important; }