/* =========================================================
   Visit Cameroon – Tour Booking Form  v1.1.0
   Full clamp() font system · A− / A / A+ controls
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Lato:wght@300;400;700&display=swap');

/* ── CSS custom property scales ─────────────────────────
   data-fontsize on .vc-book-wrap switches between scales.
────────────────────────────────────────────────────────── */
.vc-book-wrap {
  /* DEFAULT */
  --bk-title:    clamp(20px, 2.2vw, 26px);
  --bk-sub:      clamp(13px, 1.38vw, 16px);
  --bk-body:     clamp(13px, 1.38vw, 16px);
  --bk-sm:       clamp(12px, 1.22vw, 14px);
  --bk-xs:       clamp(10px, 1.05vw, 12px);
  --bk-step-icon:clamp(28px, 3.0vw,  36px);
  --bk-step-num: clamp(11px, 1.15vw, 13px);
  --bk-step-lbl: clamp(10px, 1.02vw, 12px);
  --bk-card-name:clamp(12px, 1.28vw, 15px);
  --bk-card-sub: clamp(10px, 1.05vw, 12px);
  --bk-label:    clamp(12px, 1.22vw, 14px);
  --bk-input:    clamp(13px, 1.38vw, 16px);
  --bk-btn:      clamp(13px, 1.38vw, 16px);
  --bk-success:  clamp(22px, 2.5vw,  30px);

  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  font-family: 'Lato', sans-serif;
  background: #fff;
  border-radius: 18px;
  border: 1px solid #d6e4d0;
  overflow: hidden;
}

.vc-book-wrap[data-fontsize="sm"] {
  --bk-title:    clamp(16px, 1.7vw,  21px);
  --bk-sub:      clamp(10px, 1.08vw, 13px);
  --bk-body:     clamp(10px, 1.08vw, 13px);
  --bk-sm:       clamp(9px,  0.95vw, 11px);
  --bk-xs:       clamp(8px,  0.85vw, 10px);
  --bk-step-icon:clamp(22px, 2.35vw, 28px);
  --bk-step-num: clamp(9px,  0.95vw, 11px);
  --bk-step-lbl: clamp(8px,  0.85vw, 10px);
  --bk-card-name:clamp(10px, 1.05vw, 12px);
  --bk-card-sub: clamp(9px,  0.92vw, 11px);
  --bk-label:    clamp(9px,  0.95vw, 11px);
  --bk-input:    clamp(11px, 1.12vw, 13px);
  --bk-btn:      clamp(11px, 1.12vw, 13px);
  --bk-success:  clamp(18px, 1.95vw, 24px);
}

.vc-book-wrap[data-fontsize="lg"] {
  --bk-title:    clamp(24px, 2.65vw, 32px);
  --bk-sub:      clamp(15px, 1.62vw, 19px);
  --bk-body:     clamp(15px, 1.62vw, 19px);
  --bk-sm:       clamp(13px, 1.42vw, 16px);
  --bk-xs:       clamp(12px, 1.25vw, 15px);
  --bk-step-icon:clamp(34px, 3.6vw,  44px);
  --bk-step-num: clamp(13px, 1.38vw, 16px);
  --bk-step-lbl: clamp(12px, 1.25vw, 15px);
  --bk-card-name:clamp(14px, 1.52vw, 18px);
  --bk-card-sub: clamp(12px, 1.25vw, 15px);
  --bk-label:    clamp(14px, 1.48vw, 17px);
  --bk-input:    clamp(15px, 1.62vw, 19px);
  --bk-btn:      clamp(15px, 1.62vw, 19px);
  --bk-success:  clamp(26px, 2.95vw, 36px);
}

.vc-book-wrap[data-fontsize="xl"] {
  --bk-title:    clamp(28px, 3.2vw,  40px);
  --bk-sub:      clamp(17px, 1.88vw, 23px);
  --bk-body:     clamp(17px, 1.88vw, 23px);
  --bk-sm:       clamp(15px, 1.65vw, 20px);
  --bk-xs:       clamp(14px, 1.48vw, 18px);
  --bk-step-icon:clamp(40px, 4.3vw,  54px);
  --bk-step-num: clamp(15px, 1.62vw, 20px);
  --bk-step-lbl: clamp(14px, 1.48vw, 18px);
  --bk-card-name:clamp(16px, 1.78vw, 22px);
  --bk-card-sub: clamp(14px, 1.48vw, 18px);
  --bk-label:    clamp(16px, 1.72vw, 21px);
  --bk-input:    clamp(17px, 1.88vw, 22px);
  --bk-btn:      clamp(17px, 1.88vw, 22px);
  --bk-success:  clamp(30px, 3.5vw,  44px);
}

/* ── Font controls bar ────────────────────────────────── */
.vc-bk-font-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: clamp(8px,1vw,12px) clamp(16px,1.9vw,26px) 0;
  flex-wrap: wrap;
}
.vc-bk-fc-label {
  font-size: var(--bk-xs);
  color: #7a8e7a;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-right: 4px;
}
.vc-bk-fc-btn {
  padding: clamp(3px,.42vw,6px) clamp(9px,1.08vw,14px);
  font-size: var(--bk-xs);
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  border: 1.5px solid #c8ddc0;
  border-radius: 6px;
  background: transparent;
  color: #2a5a2a;
  cursor: pointer;
  transition: all .15s;
  line-height: 1.3;
}
.vc-bk-fc-btn:hover       { background: #e8f5e4; border-color: #3d7a3d; }
.vc-bk-fc-btn.vc-bk-fc-on { background: #1e5c1e; color: #fff; border-color: #1e5c1e; }
.vc-bk-fc-current {
  font-size: var(--bk-xs);
  color: #8a9e8a;
  min-width: 58px;
}

/* ── Progress bar ─────────────────────────────────────── */
.vc-progress-bar  { height: 4px; background: #e8f0e5; }
.vc-progress-fill { height: 100%; background: #1e5c1e; transition: width .45s cubic-bezier(.4,0,.2,1); width: 25%; }

/* ── Step indicators ──────────────────────────────────── */
.vc-step-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: clamp(14px,1.7vw,22px) clamp(18px,2.2vw,28px) 4px;
  position: relative;
}
.vc-step-indicators::before {
  content: '';
  position: absolute;
  top: calc(clamp(14px,1.7vw,22px) + clamp(12px,1.4vw,18px));
  left: 25%; right: 25%;
  height: 1px;
  background: #d6e4d0;
  z-index: 0;
}
.vc-step-dot { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; position: relative; z-index: 1; cursor: pointer; }
.vc-step-dot span {
  width: clamp(24px,2.8vw,34px);
  height: clamp(24px,2.8vw,34px);
  border-radius: 50%;
  background: #e8f0e5;
  border: 2px solid #c8ddc0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--bk-step-num);
  font-weight: 700;
  color: #8a9e8a;
  transition: all .25s;
}
.vc-step-dot em {
  font-size: var(--bk-step-lbl);
  font-style: normal;
  color: #8a9e8a;
  white-space: nowrap;
  font-weight: 400;
  transition: color .25s;
}
.vc-step-dot.active span { background: #1e5c1e; border-color: #1e5c1e; color: #fff; }
.vc-step-dot.active em   { color: #1e5c1e; font-weight: 700; }
.vc-step-dot.done span   { background: #3d7a3d; border-color: #3d7a3d; color: #fff; font-size: 0; }
.vc-step-dot.done span::after { content: '✓'; font-size: var(--bk-step-num); }

/* ── Form body ────────────────────────────────────────── */
.vc-form-body { padding: clamp(18px,2.2vw,28px) clamp(18px,2.2vw,28px) 0; }
.vc-step       { display: none; }
.vc-step.active{ display: block; }

/* ── Step header ──────────────────────────────────────── */
.vc-step-header { text-align: center; margin-bottom: clamp(16px,1.9vw,24px); }
.vc-step-icon   { font-size: var(--bk-step-icon); display: block; margin-bottom: clamp(8px,.95vw,12px); }
.vc-step-header h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--bk-title);
  font-weight: 700;
  color: #1a2e1a;
  margin: 0 0 6px;
  line-height: 1.15;
}
.vc-step-header p {
  font-size: var(--bk-sub);
  color: #5a6b5a;
  margin: 0;
  font-weight: 300;
  line-height: 1.5;
}

/* ── Checkbox card grid ───────────────────────────────── */
.vc-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(150px,18vw,210px), 1fr));
  gap: clamp(8px,1vw,13px);
  max-height: clamp(300px,40vw,420px);
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 8px;
}
.vc-checkbox-grid::-webkit-scrollbar       { width: 4px; }
.vc-checkbox-grid::-webkit-scrollbar-thumb { background: #c8ddc0; border-radius: 4px; }

.vc-interest-grid { grid-template-columns: repeat(auto-fill, minmax(clamp(140px,16vw,195px), 1fr)); }

.vc-check-card {
  position: relative;
  display: flex;
  align-items: center;
  background: #fafcf9;
  border: 1.5px solid #d6e4d0;
  border-radius: 10px;
  padding: clamp(9px,1.05vw,14px) clamp(10px,1.15vw,15px);
  cursor: pointer;
  transition: border-color .18s, background .18s;
  overflow: hidden;
}
.vc-check-card input[type="checkbox"] { display: none; }
.vc-check-card:hover { border-color: #3d7a3d; background: #f0f7ee; }
.vc-check-card:has(input:checked) { border-color: #1e5c1e; background: #e8f5e4; }
.vc-check-inner { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.vc-check-icon  { font-size: clamp(16px,1.78vw,22px); line-height: 1; margin-bottom: 3px; }
.vc-check-name  { font-size: var(--bk-card-name); font-weight: 700; color: #1a2e1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-check-sub   { font-size: var(--bk-card-sub); color: #7a8e7a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-check-tick  {
  position: absolute; top: 6px; right: 8px;
  width: clamp(16px,1.78vw,21px); height: clamp(16px,1.78vw,21px);
  border-radius: 50%; background: #1e5c1e; color: #fff;
  font-size: clamp(9px,.98vw,12px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.6); transition: opacity .18s, transform .18s;
}
.vc-check-card:has(input:checked) .vc-check-tick { opacity: 1; transform: scale(1); }

/* ── Fields ───────────────────────────────────────────── */
.vc-field-group { display: flex; flex-direction: column; gap: clamp(12px,1.4vw,18px); }
.vc-field-row   { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px,1.4vw,18px); }
@media (max-width: 520px) { .vc-field-row { grid-template-columns: 1fr; } }

.vc-field       { display: flex; flex-direction: column; gap: clamp(4px,.5vw,7px); }
.vc-field label { font-size: var(--bk-label); font-weight: 700; color: #2a3e2a; letter-spacing: .01em; }
.vc-req         { color: #c0392b; }

.vc-field input,
.vc-field select,
.vc-field textarea {
  width: 100%;
  padding: clamp(9px,1.05vw,13px) clamp(11px,1.25vw,15px);
  font-size: var(--bk-input);
  font-family: 'Lato', sans-serif;
  border: 1.5px solid #d0dece;
  border-radius: 8px;
  background: #fafcf9;
  color: #1a2e1a;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.vc-field input:focus,
.vc-field select:focus,
.vc-field textarea:focus { border-color: #1e5c1e; box-shadow: 0 0 0 3px rgba(30,92,30,.1); }
.vc-field textarea { resize: vertical; min-height: clamp(70px,8vw,100px); }

.vc-consent-label { display: flex; align-items: flex-start; gap: 10px; font-size: var(--bk-sm); color: #4a5a4a; line-height: 1.55; cursor: pointer; }
.vc-consent-label input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.vc-consent-label a { color: #1e5c1e; }

/* ── Navigation row ───────────────────────────────────── */
.vc-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(16px,1.9vw,24px) clamp(18px,2.2vw,28px);
  border-top: 1px solid #eef2ec;
  margin-top: clamp(16px,1.9vw,24px);
}
.vc-nav-right { display: flex; align-items: center; gap: clamp(10px,1.2vw,16px); margin-left: auto; }
.vc-step-count{ font-size: var(--bk-xs); color: #8a9e8a; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.vc-btn-back {
  background: transparent;
  border: 1.5px solid #c8ddc0;
  color: #5a6b5a;
  padding: clamp(8px,.95vw,12px) clamp(16px,1.85vw,22px);
  border-radius: 8px;
  font-size: var(--bk-btn);
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s;
}
.vc-btn-back:hover { border-color: #3d7a3d; color: #1e5c1e; background: #f0f7ee; }

.vc-btn-next,
.vc-btn-submit {
  background: #1e5c1e;
  color: #fff;
  border: none;
  padding: clamp(9px,1.05vw,13px) clamp(18px,2.1vw,26px);
  border-radius: 8px;
  font-size: var(--bk-btn);
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, transform .1s;
  letter-spacing: .02em;
}
.vc-btn-next:hover,
.vc-btn-submit:hover   { background: #174e17; transform: translateY(-1px); }
.vc-btn-submit:active  { transform: scale(.98); }
.vc-btn-submit:disabled{ background: #8aaa8a; cursor: not-allowed; transform: none; }

/* ── Success state ────────────────────────────────────── */
.vc-success { text-align: center; padding: clamp(36px,4.5vw,56px) clamp(24px,3vw,40px) clamp(30px,3.8vw,46px); animation: vc-success-in .5s ease; }
@keyframes vc-success-in { from{opacity:0;transform:scale(.95) translateY(12px)} to{opacity:1;transform:scale(1) translateY(0)} }
.vc-success-icon  { font-size: clamp(44px,5.5vw,62px); margin-bottom: clamp(14px,1.7vw,22px); display: block; }
.vc-success-title { font-family: 'Playfair Display', serif; font-size: var(--bk-success); color: #1a2e1a; margin: 0 0 clamp(10px,1.2vw,16px); }
.vc-success-msg   { font-size: var(--bk-body); color: #4a5a4a; line-height: 1.68; max-width: 440px; margin: 0 auto clamp(20px,2.5vw,32px); }
.vc-success-links { display: flex; gap: clamp(8px,1vw,14px); justify-content: center; flex-wrap: wrap; }
.vc-btn-green     { display: inline-block; background: #1e5c1e; color: #fff; text-decoration: none; padding: clamp(9px,1.05vw,13px) clamp(18px,2.1vw,26px); border-radius: 8px; font-size: var(--bk-btn); font-weight: 700; }
.vc-btn-outline   { display: inline-block; border: 1.5px solid #3d7a3d; color: #1e5c1e; text-decoration: none; padding: clamp(9px,1.05vw,13px) clamp(18px,2.1vw,26px); border-radius: 8px; font-size: var(--bk-btn); font-weight: 700; }

/* ── Validation errors ────────────────────────────────── */
.vc-field-error { font-size: var(--bk-xs); color: #c0392b; margin-top: 3px; }
.vc-field input.error,
.vc-field select.error { border-color: #e24b4a; box-shadow: 0 0 0 3px rgba(226,75,74,.1); }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 580px) {
  .vc-form-body           { padding: clamp(14px,1.7vw,20px) clamp(14px,1.7vw,20px) 0; }
  .vc-nav-row             { padding: clamp(12px,1.5vw,18px); }
  .vc-checkbox-grid       { grid-template-columns: repeat(2, 1fr); }
  .vc-bk-font-controls    { justify-content: center; }
}