/* ──────────────────────────────────────────────────────────────
   Vinebuilders – brand tokens + scoped utilities (Elementor-first)
   Elementor Site Settings should control all global fonts/colors.
   ────────────────────────────────────────────────────────────── */

/* Design tokens */
:root{
  --vb-primary:#c52184;
  --vb-ink:#111;
  --vb-ink-dim:#444;

  --vb-bg:#f8f8fa;
  --vb-card:#fff;

  --vb-radius-lg:16px;
  --vb-radius-sm:10px;
  --vb-shadow:0 10px 20px rgba(0,0,0,.08);

  /* Optional body size token if you need it in custom CSS */
  --vb-font-size:16px;
}

/* Portal wrapper + header */
.vb-portal{background:var(--vb-bg);min-height:60vh}
.vb-portal__hdr{max-width:1200px;margin:24px auto;padding:0 24px}
.vb-portal__hdr h1{margin:0 0 6px;line-height:1.15}
.vb-portal__hdr p{margin:0;color:var(--vb-ink-dim)}

/* Grid & tiles */
.vb-grid{
  max-width:1200px;margin:0 auto 32px;display:grid;
  grid-template-columns:repeat(3,1fr);gap:24px;padding:0 24px
}
@media (max-width:1024px){.vb-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.vb-grid{grid-template-columns:1fr}}

.vb-tile{
  display:flex;gap:16px;align-items:center;background:var(--vb-card);
  padding:20px;border-radius:var(--vb-radius-lg);box-shadow:var(--vb-shadow);
  text-decoration:none;color:var(--vb-ink);
  transition:transform .1s ease, box-shadow .2s ease
}
.vb-tile:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.12)}
.vb-tile__ic{width:44px;height:44px;border-radius:12px;background:var(--vb-primary);opacity:.12}
.vb-tile__txt h3{margin:0 0 4px;font-size:18px}
.vb-tile__txt p{margin:0;color:var(--vb-ink-dim)}

/* Buttons */
.vb-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--vb-radius-sm);text-decoration:none}
.vb-btn--primary{background:var(--vb-primary);color:#fff}

/* Card */
.vb-card{
  max-width:820px;margin:0 auto 48px;background:#fff;border-radius:var(--vb-radius-lg);
  box-shadow:var(--vb-shadow);padding:24px
}
.vb-card__title{margin:0 0 4px}
.vb-card__subtitle{margin:0 0 16px;color:var(--vb-ink-dim)}

/* Fluent Forms inside cards */
.vb-card .fluentform .ff-el-group{margin-bottom:16px}
.vb-card .fluentform input[type="text"],
.vb-card .fluentform input[type="email"],
.vb-card .fluentform input[type="tel"],
.vb-card .fluentform textarea,
.vb-card .fluentform select{
  border:1px solid #ddd;border-radius:var(--vb-radius-sm);padding:12px 14px
}
.vb-card .ff_submit_btn_wrapper .ff-btn-submit{
  background:var(--vb-primary);border:0;border-radius:var(--vb-radius-sm);padding:12px 18px;color:#fff
}

/* Elementor shortcode wrapper */
.elementor-widget-shortcode .vb-card{box-shadow:none;padding:0}
.elementor-widget-shortcode .vb-card > *:first-child{margin-top:0}

/* Progress bar polish (scoped) */
.portal-progress .vbpp-bar__track { background:#eee }
.portal-progress .vbpp-bar__fill  { background:#111 } /* Change to brand if desired */

/* ──────────────────────────────────────────────────────────────
   NOTE: Removed global typography (h1–h6, .lead, .small, .has-*).
   Define sizes & families in Elementor → Site Settings instead.
   If you ever need utility text sizes, add NEW prefixed classes,
   e.g., .vb-text-lead { font-size: 18px; line-height: 1.5; }.
   ────────────────────────────────────────────────────────────── */