/* Styles for VersMarketing Order Calculator (extracted) */
.vm-calculator {
  max-width: 2200px;
  margin: 0 auto;
  padding: 24px;
  background: #fff;
  border-radius: 16px;
  color: #000000;
}
/* Use Nordique only for headings inside the calculator */
.vm-calculator h1,
.vm-calculator h2,
.vm-calculator h3,
.vm-calculator h4,
.vm-calculator h5,
.vm-calculator h6,
.vmc-option span.vmc-label {
  font-family: 'NordiqueProSemiBold', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Normalize and suppress line-spacing/margins coming from the theme/template */
.vm-calculator p,
.vm-calculator h1, .vm-calculator h2, .vm-calculator h3,
.vm-calculator h4, .vm-calculator h5, .vm-calculator h6,
.vm-calculator label,
.vm-calculator span,
.vm-calculator li,
.vm-calculator a {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1 !important;
  padding-bottom: 5px !important;
}
.vm-calculator .vmc-option,
.vm-calculator .vmc-option * {
  line-height: 1 !important;
}
.vmc-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr);
  gap: 24px;
}
@media (max-width: 800px) {
  .vmc-grid {
    grid-template-columns: 1fr;
  }
}
.vmc-section-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #000000;
  padding-bottom: 8px;
}
.vmc-subtitle {
  font-size: 0.95rem;
  color: #000000;
  
}
.vmc-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 12px;
  margin-bottom: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
  border: 1px solid #e3e3e8;
  color: #000000;
}
.vmc-card h3 { margin: 0; font-size: 1.05rem; color: #000000; padding-bottom: 8px;}
.vmc-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; margin-bottom: 12px; }
@media (max-width: 600px) { .vmc-options { grid-template-columns: 1fr; } }
.vmc-option {
  position: relative; border-radius: 10px; border: 1px solid #dcdde4; padding: 16px 18px;
  cursor: pointer; font-size: 0.9rem; background: #f2fbff; transition: all 0.15s ease; color: #000000;
  display: flex;
  flex-direction: column;
}
.vmc-option:hover { border-color: #6b6b6b; }
.vmc-option input { position: absolute; opacity: 0; pointer-events: none; padding-top: 8px; padding-bottom: 8px; }
.vmc-option span.vmc-label { display:block; font-weight:600; color:#000000; padding-bottom: 8px; }
.vmc-option span.vmc-price { color:#000000; font-size:0.85rem; }
.vmc-option span.vmc-price br { display:block; height:0; margin:0; }
.vmc-option span.vmc-price .vmc-note { display:block; font-size:0.78rem; }
.vmc-option.vmc-selected { background-image: linear-gradient(152deg, #141313 0%, #58509D 100%); color:#ffffff; border-color:#418ce1; }
.vmc-option.vmc-selected span.vmc-price, .vmc-option.vmc-selected span.vmc-label { color:#ffffff; }
.vmc-option.vmc-selected .vmc-note { color:#ffffff; }
.vmc-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.vmc-toggle-label { font-size:0.95rem; font-weight:500; color:#000000; }
.vmc-toggle { display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:0.9rem; color:#000000; padding-top: 8px; padding-bottom: 8px; }
.vmc-toggle input { width:18px; height:18px; cursor:pointer; }
.vmc-toggle span { font-size: 0.9rem; font-weight: bold; padding-bottom: 0px !important;}
.vmc-note { font-size:0.78rem; color:#000000; }
.vmc-hidden { display:none; }

/* Info icon + tooltip inside each option */
.vmc-option { overflow: visible; }
.vmc-info {
  /* place the info button on its own line inside the option and pin it to the bottom */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  align-self: flex-end;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #418ce1;
  color: #ffffff;
  border: none;
  font-weight: 700;
  cursor: pointer;
  font-size: 10px;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.vmc-info:hover { transform: scale(1.03); }
.vmc-info:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(65,140,225,0.16);
}

@media (max-width: 480px) {
  .vmc-info { width: 14px; height: 14px; min-width: 14px; min-height: 14px; font-size:9px; }
}
.vmc-tooltip {
  position: absolute;
  right: 8px;
  top: calc(100% + 6px);
  bottom: auto;
  min-width: 160px;
  max-width: 320px;
  background: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
  padding: 8px 10px 10px 10px;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  display: none;
  z-index: 40;
  font-size: 0.85rem;
}
.vmc-tooltip.visible { display: flex; flex-direction: column; }
.vmc-tooltip .vmc-tooltip-close {
  position: static;
  top: auto;
  right: auto;
  background: #418ce1;
  border: none;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  font-size: 12px;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: auto;
  margin-top: 8px;
  box-sizing: border-box;
}
.vmc-option.vmc-selected .vmc-tooltip { border-color: rgba(255,255,255,0.12); }

.vmc-summary { background-image: linear-gradient(152deg, #141313 0%, #58509D 100%); color:#f9fafb; border-radius:16px; padding:20px 18px 10px; position:sticky; top:10px; align-self:flex-start; }
.vmc-summary { background-image: linear-gradient(152deg, #141313 0%, #58509D 100%); color:#f9fafb; border-radius:16px; padding:20px 18px 10px; position:sticky; top:10px; align-self:flex-start; line-height:1.6; }
.vmc-summary > :last-child { margin-bottom:0; }
.vmc-summary h2 { margin:0 0 10px; font-size:1.2rem; color:#ffffff; }
.vmc-summary-row { display:flex; justify-content:space-between; font-size:0.85rem; margin:18px 0; color:#f9fafb; }
.vmc-summary-row span:last-child { font-weight:600; }
.vmc-summary-divider { border-top:1px solid rgba(249,250,251,0.35); margin:8px 0; }
.vmc-summary-total { font-size:0.85rem; font-weight:700; }
.vmc-summary-hint { font-size:0.7rem; color:#e5e7eb; margin-top:6px; }
.vmc-summary-badge { display:inline-block; font-size:0.75rem; font-weight:700; border-radius:999px; background:#22c55e; color:#052e16; padding: 5px 10px;}
.vmc-summary-badge.vmc-hidden { display:none; }
.vmc-badge-ff { display:none; background:#e5f3ff; color:#1d4ed8; margin-top:8px; }
.vmc-badge-ff.vmc-visible { display:inline-block; }
.vmc-input-group label { display:block; font-size:0.85rem; color:#f9fafb; }
.vmc-input-group input { width:100%; padding:7px 9px; border-radius:8px; border:1px solid #d1d5db; background:#ffffff; color:#111827; font-size:0.9rem; }
.vmc-input-group { margin: 10px 0; line-height: 1.6; }
.vmc-input-group label { display:block; font-size:0.95rem; color:#f9fafb; margin-bottom:6px; line-height:1.6; }
.vmc-input-group input,
.vmc-input-group textarea,
.vmc-input-group select {
  width:100%; padding:8px 10px; border-radius:8px; border:1px solid #d1d5db; background:#ffffff; color:#111827; font-size:0.95rem; line-height:1.6;
}
.vmc-input-group input::placeholder { color:#6b7280; }
.vmc-btn { width:100%; padding:10px 14px; border-radius:999px; border:none; background:#facc15; color:#111827; font-weight:700; font-size:0.95rem; cursor:pointer; transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease; }
.vmc-btn:hover { background:#eab308; box-shadow:0 8px 20px rgba(0,0,0,0.35); transform:translateY(-1px); }
.vmc-btn:active { transform:translateY(0); box-shadow:none; }

.vmc-pay-options { display:flex; gap:8px; flex-wrap:wrap; font-size:0.9rem; }
.vmc-pay-chip { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; border:1px solid #bfdbfe; cursor:pointer; background:rgba(15,23,42,0.1); color:#e5e7eb; font-size:13px; font-weight:700; height:40px; box-sizing:border-box; }
.vmc-pay-chip input { cursor:pointer; margin:0; }
.vmc-pay-chip span { color:#fff; }

/* Ensure textboxes always have white background */
.vm-calculator input[type="text"],
.vm-calculator input[type="email"],
.vm-calculator input[type="tel"],
.vm-calculator textarea,
.vm-calculator select { background: #ffffff; font-family: inherit; }

/* Ensure buttons and other controls inherit the page font */
.vm-calculator button,
.vm-calculator select,
.vm-calculator textarea { font-family: inherit; }
.vmc-pay-chip.vmc-disabled { opacity:0.5; cursor:not-allowed; }

/* Privacy checkbox row - align checkbox left and text to the right, matching input styling */
.vmc-privacy-row { display:flex; align-items:flex-start; gap:10px; }
.vmc-privacy-row input[type="checkbox"] { width:18px; height:18px; accent-color:#418ce1; }
.vmc-privacy-row label { display:block; color:#f9fafb; font-size:0.85rem; line-height:1.4; margin:0; }
.vmc-privacy-row a { color:#418ce1; text-decoration:underline; }

#vmc-once-before-line, #vmc-discount-amount, #vmc-once-line { text-align: right; }

@media (max-width: 800px) {
  .vmc-summary { position:static; margin-top:12px; }
}
@media (max-width: 500px) {
  .vmc-section-title { font-size:1.2rem; }
  .vmc-subtitle { font-size:0.9rem; }
  .vmc-card { padding:14px 14px; }
  .vmc-summary { padding:16px 14px 8px; }
  .vmc-summary-row { font-size:0.9rem; }
  .vmc-option { font-size:0.85rem; padding:6px 8px; }
}