/* Styles for VersMarketing Order Calculator (extracted) */
.vm-calculator {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  max-width: 2200px;
  margin: 0 auto;
  padding: 24px;
  background: #f7f7f9;
  border-radius: 16px;
  color: #000000;
}
.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;
  margin-bottom: 4px;
  color: #000000;
}
.vmc-subtitle {
  font-size: 0.95rem;
  color: #000000;
  margin-bottom: 16px;
}
.vmc-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
  border: 1px solid #e3e3e8;
  color: #000000;
}
.vmc-card h3 { margin: 0 0 8px; font-size: 1.05rem; color: #000000; }
.vmc-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 600px) { .vmc-options { grid-template-columns: 1fr; } }
.vmc-option {
  position: relative; border-radius: 10px; border: 1px solid #dcdde4; padding: 10px 12px;
  cursor: pointer; font-size: 0.9rem; background: #f2fbff; transition: all 0.15s ease; color: #000000;
}
.vmc-option:hover { border-color: #418ce1; }
.vmc-option input { position: absolute; opacity: 0; pointer-events: none; }
.vmc-option span.vmc-label { display:block; font-weight:600; margin-bottom:4px; color:#000000; }
.vmc-option span.vmc-price { color:#000000; font-size:0.85rem; }
.vmc-option.vmc-selected { background:#418ce1; 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; }
.vmc-toggle input { width:18px; height:18px; cursor:pointer; }
.vmc-note { font-size:0.8rem; color:#000000; margin-top:4px; }
.vmc-hidden { display:none; }

.vmc-summary { background:#418ce1; color:#f9fafb; border-radius:16px; padding:20px 18px 10px; position:sticky; top:10px; align-self:flex-start; }
.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.95rem; margin:3px 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:1.05rem; font-weight:700; }
.vmc-summary-hint { font-size:0.8rem; color:#e5e7eb; margin-top:6px; }
.vmc-summary-badge { display:inline-block; font-size:0.75rem; padding:3px 8px; border-radius:999px; background:#22c55e; color:#052e16; margin-bottom:4px; }
.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 { margin:8px 0; }
.vmc-input-group label { display:block; font-size:0.85rem; margin-bottom:2px; 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 input::placeholder { color:#6b7280; }
.vmc-btn { width:100%; margin-top:10px; 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; margin-top:6px; 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; }

/* 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; }
.vmc-pay-chip.vmc-disabled { opacity:0.5; cursor:not-allowed; }

@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:8px 10px; }
}