/* VK Form Styles v2 */
:root {
  --vk-green:  #2d7a4f;
  --vk-dark:   #1a2e22;
  --vk-light:  #f4f9f6;
  --vk-border: #d4e8db;
  --vk-red:    #d63031;
  --vk-r:      12px;
}


/* .vk-wrap { font-family:'Segoe UI',system-ui,sans-serif; max-width:980px; margin:0 auto; padding:24px 16px; }
 */
/* Progress */
.vk-progress { display:flex; align-items:center; justify-content:center; margin-bottom:36px; }
.vk-progress-line { flex:1; height:3px; background:var(--vk-border); max-width:100px; transition:.4s; }
.vk-progress-step { display:flex; flex-direction:column; align-items:center; gap:6px; }
.vk-step-num { width:38px;height:38px;border-radius:50%;background:#e6f0ea;color:#aaa;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;border:2px solid var(--vk-border);transition:.3s; }
.vk-step-label { font-size:12px; color:#888; font-weight:500; }
.vk-progress-step.active .vk-step-num { background:var(--vk-green);color:#fff;border-color:var(--vk-green); }
.vk-progress-step.active .vk-step-label { color:var(--vk-green);font-weight:700; }
.vk-progress-step.done .vk-step-num { background:var(--vk-green);color:#fff;border-color:var(--vk-green); }

/* Loading */
.vk-loading { text-align:center; padding:60px 0; color:#888; }
.vk-spinner { width:40px;height:40px;border:4px solid var(--vk-border);border-top-color:var(--vk-green);border-radius:50%;margin:0 auto 16px;animation:vkSpin 1s linear infinite; }
@keyframes vkSpin { to { transform:rotate(360deg); } }
.vk-load-error { text-align:center;padding:40px;color:var(--vk-red);background:#fff5f5;border-radius:var(--vk-r);border:1px solid #fcc; }

/* Pages */
.vk-page { display:none; animation:vkFadeIn .3s ease; }
.vk-page.active { display:block; }
@keyframes vkFadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* Section title */
.vk-section-title { font-size:22px;font-weight:700;color:var(--vk-dark);margin:0 0 28px;display:flex;align-items:center;gap:10px;border-bottom:2px solid var(--vk-border);padding-bottom:14px; }
.vk-icon { font-size:26px; }

/* Field group */
.vk-field-group { margin-bottom:32px; transition:opacity .2s; }
.vk-cond-hidden { display:none !important; }
.vk-applies-hidden { display:none !important; }
.vk-group-label { display:block;font-size:15px;font-weight:600;color:var(--vk-dark);margin-bottom:14px; }
.req { color:var(--vk-red); }

/* Card grid */
.vk-card-grid { display:grid; gap:14px; }
.vk-grid-2 { grid-template-columns:repeat(2,1fr); }
.vk-grid-3 { grid-template-columns:repeat(3,1fr); }
.vk-grid-4 { grid-template-columns:repeat(4,1fr); }

/* Card */
.vk-card { position:relative;cursor:pointer;border-radius:var(--vk-r);border:2px solid var(--vk-border);background:#fff;transition:all .2s;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.04); }
.vk-card:hover { border-color:var(--vk-green);transform:translateY(-2px);box-shadow:0 6px 20px rgba(45,122,79,.12); }
.vk-card.selected { border-color:var(--vk-green);background:#f0faf4;box-shadow:0 0 0 3px rgba(45,122,79,.18); }
.vk-card-img { width:100%;overflow:hidden;background:#f0f0f0; }
.vk-card-img img { width:100%;height:100%;object-fit:cover;display:block;transition:.3s; }
.vk-card:hover .vk-card-img img { transform:scale(1.04); }
.vk-card-body { padding:10px 12px 12px;display:flex;flex-direction:column;gap:3px; }
.vk-card-body strong { font-size:16px;color:var(--vk-dark); }
.vk-price { font-size:15px;font-weight:700;color:var(--vk-green); }
.vk-price-incl { font-size:12px;color:#888; }
.vk-check { position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--vk-green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;opacity:0;transform:scale(.5);transition:.2s; }
.vk-card.selected .vk-check { opacity:1;transform:scale(1); }

/* No options */
.vk-no-options { color:#888;font-style:italic;padding:12px;background:#fafafa;border-radius:8px;border:1px dashed var(--vk-border); }

/* Toggle */
.vk-toggle-group { display:flex;gap:12px;flex-wrap:wrap; }
.vk-toggle-btn { cursor:pointer;border:2px solid var(--vk-border);border-radius:8px;padding:14px 20px;background:#fff;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;transition:.2s;flex:1;min-width:200px; }
.vk-toggle-btn:hover { border-color:var(--vk-green);background:#f0faf4; }
.vk-toggle-btn.selected { border-color:var(--vk-green);background:#f0faf4;color:var(--vk-green);font-weight:700; }

/* Total bar */
.vk-total-bar { background:linear-gradient(135deg,var(--vk-dark),var(--vk-green));color:#fff;border-radius:var(--vk-r);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;font-size:16px;margin:24px 0; }
.vk-total-bar strong { font-size:26px;font-weight:800; }

/* Nav */
.vk-nav { display:flex;justify-content:space-between;align-items:center;margin-top:32px;padding-top:20px;border-top:1px solid var(--vk-border); }

/* Buttons */
.vk-btn { padding:13px 28px;border-radius:8px;border:none;cursor:pointer;font-size:15px;font-weight:600;transition:.2s; }
.vk-btn-next,.vk-btn-submit { background:var(--vk-green);color:#fff;box-shadow:0 4px 14px rgba(45,122,79,.3); }
.vk-btn-next:hover,.vk-btn-submit:hover { background:var(--vk-dark);transform:translateY(-1px); }
.vk-btn-prev { background:#f1f5f3;color:var(--vk-dark); }
.vk-btn-prev:hover { background:var(--vk-border); }

/* Form inputs */
.vk-form-row { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px; }
.vk-form-col,.vk-form-group { margin-bottom:16px; }
.vk-label { display:block;font-size:14px;font-weight:600;color:var(--vk-dark);margin-bottom:6px; }
.vk-input { width:100%;padding:11px 14px;border-radius:8px;border:2px solid var(--vk-border);font-size:14px;transition:.2s;box-sizing:border-box;color:var(--vk-dark);font-family:inherit; }
.vk-input:focus { outline:none;border-color:var(--vk-green);box-shadow:0 0 0 3px rgba(45,122,79,.12); }
.vk-textarea { min-height:100px;resize:vertical; }
.vk-select { appearance:none; }

/* Error */
.vk-error { color:var(--vk-red);font-size:13px;margin-top:6px;display:none; }
.vk-error.visible { display:block; }

/* Recap */
.vk-recap { background:var(--vk-light);border-radius:var(--vk-r);padding:20px;margin:24px 0;border:1px solid var(--vk-border); }
.vk-recap h3 { margin:0 0 16px;font-size:16px;color:var(--vk-dark); }
.vk-recap-row { display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--vk-border);font-size:14px; }
.vk-recap-row:last-child { border:none; }
.vk-recap-label { color:#555; }
.vk-recap-val { font-weight:600;color:var(--vk-dark);text-align:right; }
.vk-recap-total { margin-top:14px;padding-top:12px;border-top:2px solid var(--vk-border);font-size:16px;font-weight:700;text-align:right;color:var(--vk-green); }

/* Success */
.vk-hidden { display:none !important; }
.vk-success { text-align:center;padding:60px 20px;animation:vkFadeIn .5s ease; }
.vk-success-icon { font-size:64px;margin-bottom:16px; }
.vk-success h2 { color:var(--vk-green);font-size:26px;margin-bottom:12px; }
.vk-success p { color:#555;font-size:16px; }

/* Responsive */
@media(max-width:768px) {
  .vk-grid-4 { grid-template-columns:1fr 1fr; }
  .vk-grid-3 { grid-template-columns:1fr 1fr; }
  .vk-form-row { grid-template-columns:1fr; }
  .vk-toggle-group { flex-direction:column; }
}
@media(max-width:480px) {
  .vk-grid-2,.vk-grid-3,.vk-grid-4 { grid-template-columns:1fr; }
}


/* ============================================================
   LIGHTBOX / IMAGE ZOOM
   ============================================================ */

/* Zoom hint on card images */
.vk-card-img {
  position: relative;
}
.vk-card-img::after {
  content: '🔍';
  position: absolute;
     top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 30px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
  line-height: 28px;
  text-align: center;
}
.vk-card:hover .vk-card-img::after {
  opacity: 1;
}

/* Lightbox backdrop */
#vk-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
}
#vk-lightbox.active {
  display: block;
}
#vk-lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.88);
  cursor: zoom-out;
  animation: vkLbFadeIn .22s ease;
}
@keyframes vkLbFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Lightbox box */
#vk-lightbox-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.95);
  max-width: 90vw;
  max-height: 90vh;
  text-align: center;
  animation: vkLbZoomIn .25s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes vkLbZoomIn {
  from { transform: translate(-50%, -50%) scale(.85); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}

#vk-lightbox-img {
  display: block;
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  background: #111;
}

#vk-lightbox-caption {
  margin: 12px 0 0;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* Close button */
#vk-lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s, transform .18s;
  z-index: 2;
  line-height: 1;
}
#vk-lightbox-close:hover {
  background: var(--vk-red, #d63031);
  transform: rotate(90deg) scale(1.1);
}

/* Expand cursor on images */
.vk-card-img img {
  cursor: zoom-in;
}


/* ============================================================
   SPONSOR / PARRAIN CODE FIELD
   ============================================================ */

.vk-sponsor-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vk-sponsor-badge {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.vk-sponsor-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.vk-sponsor-input {
  font-family: 'Courier New', monospace !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding-right: 42px !important;
  border-color: #d4e8db !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.vk-sponsor-input:focus {
  border-color: var(--vk-green, #2d7a4f) !important;
  box-shadow: 0 0 0 3px rgba(45,122,79,.12) !important;
}
.vk-sponsor-input.vk-sponsor-valid {
  border-color: var(--vk-green, #2d7a4f) !important;
  background: #f0faf4 !important;
}
.vk-sponsor-icon {
  position: absolute;
  right: 14px;
  color: var(--vk-green, #2d7a4f);
  font-size: 18px;
  font-weight: 700;
  pointer-events: none;
}
.vk-sponsor-hint {
  display: block;
  margin-top: 6px;
  color: #888;
  font-size: 13px;
  font-style: italic;
}

/* Body lock when lightbox open */
body.vk-lb-open {
  overflow: hidden;
}