/*
  Smartfill public layer
  - Purpose: minimal overrides/additions for the marketing site.
  - Keep it small: rely on WowDash (Bootstrap + style.css) for most styling.
*/

:root {
  /* Subtle brand tweaks; keep WowDash palette intact */
  --sf-hero-overlay: rgba(10, 18, 32, 0.55);
  --sf-topbar-height: 76px;
}

body {
  /* Reserve space for the fixed top bar */
  padding-top: var(--sf-topbar-height);
}

/* --- Top navigation (modern, glassy) --- */
.sf-topbar {
  /* Always visible during scroll */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] .sf-topbar {
  background: rgba(17, 24, 39, 0.72);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.sf-brand-word {
  color: var(--text-primary-light);
  letter-spacing: 0.2px;
}

/*
  Card background gradients:
  Use WowDash built-in gradient background utilities (e.g. bg-gradient-purple)
  instead of custom gradients here.
*/

/* --- Hover / motion --- */
.sf-card-hover {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.sf-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  border-color: rgba(72, 127, 255, 0.35) !important;
}

/* --- Page header background (subtle high‑tech glow) --- */
.sf-page-hero {
  position: relative;
  overflow: hidden;
}

.sf-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(72, 127, 255, 0.18), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(72, 127, 255, 0.12), transparent 55%);
  pointer-events: none;
}

.sf-page-hero > * {
  position: relative;
}

.sf-hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

/* --- Brand HERO background (smartfill.hu blue behind PNG pattern) --- */
.sf-hero--brand {
  background: #2849be;
}

.sf-hero--brand .sf-hero__overlay {
  background: linear-gradient(90deg, rgba(40, 73, 190, 0.85), rgba(40, 73, 190, 0.55));
}

.sf-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}

.sf-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--sf-hero-overlay), rgba(10, 18, 32, 0.25));
}

.sf-hero__content {
  position: relative;
}

.sf-card-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

/* Consistent small inline icons for list items */
.sf-inline-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  line-height: 1;
}

.sf-inline-icon i {
  font-size: 16px;
  line-height: 1;
}

.sf-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-size: 0.9rem;
}

.sf-table {
  overflow-x: auto;
}

/* Pricing: highlight the recommended plan like the WowDash demo */
.sf-pricing-featured {
  position: relative;
  z-index: 2;
  box-shadow: 0 36px 80px rgba(2, 6, 23, 0.18);
}

@media (min-width: 992px) {
  .sf-pricing-featured {
    /* Lift the recommended plan noticeably (WowDash-like) */
    transform: translateY(-80px);
  }
}

html[data-theme="dark"] .sf-pricing-featured {
  box-shadow: 0 36px 80px rgba(0, 0, 0, 0.55);
}

/* Markdown rendering (GDPR/ÁSZF) */
.markdown {
  line-height: 1.65;
}

.markdown h1,
.markdown h2,
.markdown h3 {
  margin-top: 1.2em;
  margin-bottom: 0.5em;
  font-weight: 700;
}

.markdown p {
  margin-bottom: 0.9em;
}

.markdown ul,
.markdown ol {
  margin-bottom: 0.9em;
  padding-left: 1.2rem;
}

.markdown code {
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.06);
}

.markdown pre code {
  display: block;
  padding: 0.9rem;
  overflow-x: auto;
}

/* Accessibility helpers */
.visually-hidden-focusable:active,
.visually-hidden-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

/* ------------------------------ */
/* Trial CTA: keep dark but readable */
.sf-trial-cta {
  background: #1a2640; /* dark, but lighter than pure black */
}

/* Trial CTA headings: keep section headings white, but not the form card */
.sf-trial-cta h1,
.sf-trial-cta h2,
.sf-trial-cta .h1,
.sf-trial-cta .h2 {
  color: #ffffff !important;
}

/* If you have a title outside the card that is h3, keep it white like this: */
/* .sf-trial-cta .sf-trial-cta-title { color:#fff !important; } */


.sf-trial-cta .opacity-75 {
  opacity: 0.9 !important;
}

/* ------------------------------ */
/* Icon consistency (Remix Icons) */
i[class^="ri-"],
i[class*=" ri-"] {
  line-height: 1;
  vertical-align: -0.1em;
}

.sf-card-icon i {
  font-size: 20px;
  line-height: 1;
}

/* Trial request card: force readable dark text even inside dark/gradient sections */
.sf-trial-form-card,
.sf-trial-form-card * {
  color: #0f172a !important;
}

.sf-trial-form-card .btn,
.sf-trial-form-card .btn * {
  color: #fff !important;
}

.sf-step-card{
  overflow: hidden;
  padding-top: 56px; /* hogy ne ütközzön a badge a tartalommal */
}

.sf-step-badge{
  position: absolute;
  top: 12px;
  left: 12px;

  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;

  border-radius: 10px;

  /* szám: bold, sötétkék */
  font-weight: 800;
  font-size: 0.95rem;
  color: #1e3a8a;

  /* buborék: világoskék */
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.28);

  letter-spacing: 0.2px;
}