/* Vaaradhi Calculators — Frontend Styles.
 * Uses CSS vars set inline by shortcode for branding.
 */

.vc-wrap {
  --vc-primary: #1B3A6B;
  --vc-secondary: #C8972B;
  --vc-accent: #F5F0E4;
  --vc-text: #1a1a1a;
  --vc-muted: #6b7280;
  --vc-error: #B02A2A;
  --vc-radius: 12px;
  --vc-shadow: 0 4px 20px rgba(27,58,107,0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--vc-text);
  line-height: 1.5;
  max-width: 780px;
  margin: 0 auto;
  padding: 32px 20px;
}

.vc-container {
  background: #fff;
  border-radius: var(--vc-radius);
  box-shadow: var(--vc-shadow);
  padding: 40px 32px;
}

/* Progress */
.vc-progress-wrap { display:flex; align-items:center; gap:16px; margin-bottom:32px; }
.vc-progress-bar { flex:1; height:6px; background:#e5e7eb; border-radius:999px; overflow:hidden; }
.vc-progress-fill { height:100%; background:linear-gradient(90deg,var(--vc-primary),var(--vc-secondary)); border-radius:999px; width:0%; transition: width .3s ease; }
.vc-progress-label { font-size:13px; color:var(--vc-muted); font-variant-numeric: tabular-nums; }

/* Slides */
.vc-slides { min-height: 260px; }
.vc-slide { display:none; animation: vcFade .3s ease; }
.vc-slide.vc-active { display:block; }
@keyframes vcFade { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform: translateY(0);} }

.vc-slide-cat { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--vc-secondary); font-weight:600; margin-bottom:8px; }
.vc-slide-q { font-size:22px; font-weight:600; color:var(--vc-primary); margin: 0 0 24px; line-height:1.35; }

/* Inputs */
.vc-input, .vc-select {
  width:100%; box-sizing:border-box; padding:14px 16px;
  border: 2px solid #e5e7eb; border-radius: 10px;
  font-size: 16px; color: var(--vc-text); background:#fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vc-input:focus, .vc-select:focus { outline:none; border-color:var(--vc-primary); box-shadow: 0 0 0 3px rgba(27,58,107,0.12); }
.vc-input.vc-invalid, .vc-select.vc-invalid { border-color: var(--vc-error); }

/* International tel */
.vc-tel-wrap { display:flex; gap:8px; }
.vc-tel-country { flex: 0 0 130px; }
.vc-tel-number  { flex: 1; }

/* Radio options */
.vc-options { display:grid; gap:10px; }
.vc-option {
  display:flex; align-items:center; gap:12px;
  padding: 14px 16px; border:2px solid #e5e7eb; border-radius: 10px;
  cursor: pointer; transition: all .15s ease;
  font-size: 16px; background:#fff;
}
.vc-option:hover { border-color: var(--vc-secondary); background: rgba(200,151,43,0.05); }
.vc-option.vc-selected { border-color: var(--vc-primary); background: rgba(27,58,107,0.06); }
.vc-option input[type=radio] { accent-color: var(--vc-primary); width:18px; height:18px; margin:0; }

/* Nav */
.vc-nav { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:32px; }
.vc-btn {
  padding:12px 24px; border-radius:10px; font-size:15px; font-weight:600;
  cursor:pointer; border:none; transition:all .15s ease; font-family:inherit;
}
.vc-btn-primary { background: var(--vc-primary); color:#fff; }
.vc-btn-primary:hover { background: color-mix(in srgb, var(--vc-primary) 88%, black); transform: translateY(-1px); }
.vc-btn-secondary { background:#f3f4f6; color: var(--vc-text); }
.vc-btn-secondary:hover { background:#e5e7eb; }
.vc-btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; }

.vc-error { margin-top:16px; padding:12px 16px; background: #fee2e2; color: var(--vc-error); border-radius:8px; font-size:14px; }
.vc-field-error { color: var(--vc-error); font-size:13px; margin-top:6px; display:none; }
.vc-field-error.vc-show { display:block; }

/* Hide the WordPress page title on calculator pages when the setting is on.
 * Covers Astra, Kadence, GeneratePress, Blocksy, Divi, OceanWP, Elementor,
 * block themes (Twenty Twenty-Three onwards), and the classic default patterns.
 */
body.vc-page-hide-title .entry-title,
body.vc-page-hide-title h1.entry-title,
body.vc-page-hide-title h1.page-title,
body.vc-page-hide-title h1.post-title,
body.vc-page-hide-title .wp-block-post-title,
body.vc-page-hide-title .site-main > .entry-header .entry-title,
body.vc-page-hide-title .content-area .entry-header .entry-title,
body.vc-page-hide-title .ast-single-post-order,
body.vc-page-hide-title .ast-page-title-bar,
body.vc-page-hide-title .kadence-post-title,
body.vc-page-hide-title .entry-hero-container-inner h1,
body.vc-page-hide-title .blocksy-post-title,
body.vc-page-hide-title .ct-container > .entry-header,
body.vc-page-hide-title .et_pb_title_container,
body.vc-page-hide-title .gp-entry-title,
body.vc-page-hide-title .generate-post-title,
body.vc-page-hide-title #page-header-title {
  display: none !important;
}

/* Welcome slide */
.vc-welcome { text-align:center; padding: 12px 8px 4px; }
.vc-welcome-heading {
  font-size: 30px; font-weight: 700; color: var(--vc-primary);
  margin: 8px 0 14px; line-height: 1.25;
}
.vc-welcome-sub {
  font-size: 15px; color: var(--vc-muted); max-width: 520px;
  margin: 0 auto 24px; line-height: 1.55;
}
.vc-welcome-bullets {
  list-style: none; padding: 0; margin: 0 auto 28px;
  display: inline-block; text-align: left;
}
.vc-welcome-bullet {
  padding: 8px 0; font-size: 14.5px; color: var(--vc-text);
  border-bottom: 1px solid #f0f0f0;
}
.vc-welcome-bullet:last-child { border-bottom: none; }
.vc-welcome-actions { margin: 8px 0 14px; }
.vc-btn-large {
  padding: 16px 40px !important; font-size: 17px !important;
  box-shadow: 0 4px 14px rgba(27,58,107,0.18);
}
.vc-welcome-footer {
  font-size: 13px; color: var(--vc-muted); margin-top: 8px; font-style: italic;
}

/* Results */
.vc-results { margin-top:24px; }
.vc-results-inner {
  background:#fff; border-radius: var(--vc-radius); box-shadow: var(--vc-shadow);
  padding: 40px 32px; text-align:center;
}
.vc-result-title { font-size:14px; color:var(--vc-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.vc-result-score {
  font-size:72px; font-weight:800; color: var(--vc-primary); line-height:1; margin:16px 0 8px;
}
.vc-result-band { font-size:22px; font-weight:700; margin-bottom:20px; }
.vc-result-narrative { font-size:16px; color:var(--vc-muted); max-width:520px; margin: 0 auto 28px; }
.vc-download-btn {
  display:inline-block; padding:14px 32px; background: var(--vc-primary); color:#fff !important;
  text-decoration:none; border-radius:10px; font-weight:600; font-size:16px;
  transition: all .15s ease; border:none; cursor:pointer;
}
.vc-download-btn:hover { transform:translateY(-1px); box-shadow: 0 8px 16px rgba(27,58,107,0.2); }
.vc-cta-secondary { display:block; margin-top:16px; color: var(--vc-muted); font-size:14px; }
.vc-cta-secondary a { color: var(--vc-primary); text-decoration:none; }

/* Hub */
.vc-hub { max-width:1000px; margin:0 auto; padding:32px 20px; font-family: inherit; }
.vc-hub-header { text-align:center; margin-bottom:32px; }
.vc-hub-header h2 { color: var(--vc-primary); margin:0 0 6px; font-size:28px; }
.vc-hub-tagline { color: var(--vc-muted); font-size:15px; }
.vc-hub-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:20px; }
.vc-hub-card {
  background:#fff; border-radius: var(--vc-radius); box-shadow: var(--vc-shadow);
  padding: 28px 24px; text-decoration:none; color: var(--vc-text);
  transition: all .2s ease; display:block; text-align:center;
}
.vc-hub-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(27,58,107,0.12); }
.vc-hub-icon { font-size:40px; margin-bottom:12px; }
.vc-hub-title { font-size:18px; font-weight:700; color: var(--vc-primary); margin-bottom:8px; }
.vc-hub-desc  { font-size:14px; color: var(--vc-muted); margin-bottom:16px; }
.vc-hub-cta   { color: var(--vc-secondary); font-weight:600; font-size:14px; }

/* Menu shortcode */
.vc-nav-menu { list-style:none; padding:0; margin:0; display:inline-block; }
.vc-nav-parent { position:relative; }
.vc-nav-parent > a { padding: 8px 16px; color: var(--vc-primary); text-decoration:none; font-weight:600; display:inline-block; }
.vc-nav-sub {
  display:none; position:absolute; top:100%; left:0;
  list-style:none; padding: 8px 0; margin:0; min-width: 220px;
  background:#fff; border-radius:8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 999;
}
.vc-nav-parent:hover .vc-nav-sub { display:block; }
.vc-nav-sub li a { display:block; padding: 10px 16px; color: var(--vc-text); text-decoration:none; }
.vc-nav-sub li a:hover { background: rgba(27,58,107,0.06); color: var(--vc-primary); }

@media (max-width: 640px) {
  .vc-wrap { padding: 16px 12px; }
  .vc-container { padding: 24px 20px; }
  .vc-slide-q { font-size:18px; }
  .vc-result-score { font-size:56px; }
  .vc-tel-country { flex: 0 0 110px; }
}