/* =====================================================
   Digilatics ROI Calculator – v2.0 stylesheet
   ===================================================== */

.digi-roi-wrap *,
.digi-roi-wrap *::before,
.digi-roi-wrap *::after { box-sizing: border-box; }

.digi-roi-wrap {
  font-family: 'Inter','Segoe UI',system-ui,sans-serif;
  background:#111111;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.digi-roi-inner {
  width:100%; max-width:960px;
  margin:0 auto;
  position:relative; z-index:1;
}

/* ══════════════════════════════════════
   GRID
══════════════════════════════════════ */
.digi-roi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 24px;
}

/* ══════════════════════════════════════
   CARDS
══════════════════════════════════════ */
.digi-roi-card {
  background: #111111;
  border-radius: 22px;
  padding: 28px 26px;
  box-shadow: 0 8px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  border: 1px solid #222222;
  position: relative;
  overflow: hidden;
}
.digi-roi-card-glow {
  position:absolute; top:-50px; right:-50px;
  width:200px; height:200px;
  background:radial-gradient(circle,rgba(255,165,0,.12),transparent 70%);
  pointer-events:none;
}

/* Section title */
.digi-roi-stitle {
  display:flex; align-items:center; gap:10px;
  margin-bottom:18px;
}
.digi-roi-stitle-bar {
  width:3px; height:20px;
  background:linear-gradient(180deg,#FFA500,#FF6B00);
  border-radius:99px;
  box-shadow:0 0 10px rgba(255,140,0,.6);
  flex-shrink:0;
}
.digi-roi-stitle span {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size:14px; font-weight:700; color:#F0F4FF; letter-spacing:.1px;
}

/* Toggle */
.digi-roi-toggle-wrap {
      display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-direction: column;
    gap: 10px;
  /* display:flex; justify-content:space-between; align-items:center;
  margin-bottom:20px; */
}
.digi-roi-toggle {
  display: flex;
    gap: 3px;
    background: #222222;
    border-radius: 10px;
    padding: 3px;
    border: 1px solid #333333;
    flex-direction: row;
    width: 100%;
}
.digi-roi-toggle button {
    padding: 8px 18px !important;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all .2s;
    background: transparent;
    color: #A8B8D8;
    position: relative;
    overflow: hidden;
    width: 50%;
}
.digi-roi-toggle button::before {
  content:''; position:absolute; top:50%; left:50%;
  width:0; height:0; border-radius:50%;
  background:rgba(255,255,255,.3);
  transform:translate(-50%, -50%);
  pointer-events:none;
}
.digi-roi-toggle button:active::before {
  animation:digi-ripple .6s ease-out;
}
.digi-roi-toggle button.active {
  background:linear-gradient(135deg,#FFA500,#FF6B00);
  color:#fff;
  box-shadow:0 4px 16px rgba(255,140,0,.45);
}
/* @keyframes digi-ripple {
  0% { width:0; height:0; opacity:1; }
  100% { width:300px; height:300px; opacity:0; }
} */

/* ══════════════════════════════════════
   INDUSTRY BUTTONS
══════════════════════════════════════ */
.digi-roi-field { margin-bottom:20px; }
.digi-roi-label {
  display:block; font-family: 'Plus Jakarta Sans', sans-serif; font-size:11px; font-weight:700;
  color:#A8B8D8; letter-spacing:.5px; text-transform:uppercase;
  margin-bottom:8px;
}
.digi-ind-grid {
  display:flex; flex-wrap:wrap;
  gap:8px; margin-bottom:4px;
}
.digi-ind-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 12px 14px 12px 16px !important;
    background: #222222 !important;
    border: 1.5px solid #333333;
    border-radius: 100px;
    overflow: visible;
    cursor: pointer;
    transition: all .18s;
    color: #A8B8D8 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .2px !important;
    text-align: left !important;
    line-height: 1.3 !important;
    justify-content: flex-start;
    min-width: 133px;
    max-width: 200px;
   
}

.digi-ind-btn:hover {
    border-color: rgb(255 140 0 / 30%);
    background: rgb(255 140 0 / 3%) !important;
    color: #F0F4FF !important;
    transform: translateY(-1px);
}
.digi-ind-btn.active {
  border-color: rgb(255 140 0);
    background: rgb(255 140 0 / 10%) !important;
    color: #F0F4FF !important;
    transform: translateY(-1px);
}
.digi-ind-icon { font-size:22px; line-height:1; flex-shrink:0; display:flex; align-items:center; }
.digi-ind-icon img.emoji { width:22px; height:22px; flex-shrink:0; }
.digi-ind-label { font-size:10.5px; font-weight:700; }

/* Validation error */
.digi-field-error {
  font-size:11.5px; color:#F87171; margin:6px 0 0;
  display:flex; align-items:center; gap:4px;
  animation:digi-shake .3s ease;
}
@keyframes digi-shake {
  0%,100%{ transform:translateX(0); }
  25%    { transform:translateX(-4px); }
  75%    { transform:translateX(4px); }
}

/* ══════════════════════════════════════
   SLIDERS
══════════════════════════════════════ */
.digi-roi-slider-field { margin-bottom:22px; }
.digi-roi-slider-header {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:3px;
}
.digi-roi-slider-val { font-size:17px; font-weight:800; color:#FF8C00; letter-spacing:-.5px; }
.digi-roi-slider-desc { font-size:11px; color:#A8B8D8; margin-bottom:10px; }
.digi-roi-track {
  position:relative; height:6px; background:#222222;
  border-radius:99px; margin-bottom:6px; border:1px solid #333333;
}
.digi-roi-track-fill {
  position:absolute; left:0; top:0; height:100%;
  background:linear-gradient(135deg,#FFA500,#FF6B00);
  border-radius:99px; box-shadow:0 0 10px rgba(255,140,0,.4);
  pointer-events:none; transition:width .1s;
}
.digi-roi-track input[type=range] {
  position:absolute; inset:0; width:100%;
  opacity:0; cursor:pointer; height:100%; margin:0;
}
.digi-roi-thumb {
  position:absolute; top:50%;
  width:20px; height:20px;
  background:linear-gradient(135deg,#FFA500,#FF6B00);
  border-radius:50%;
  box-shadow:0 0 0 3px #0F1729,0 0 14px rgba(255,140,0,.6);
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:left .1s;
}
.digi-roi-range-labels {
  display:flex; justify-content:space-between; font-size:10px; color:#A8B8D8;
}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.digi-roi-btn-primary {
  width:100%; padding:15px;
  background:linear-gradient(135deg,#FFA500,#FF6B00);
  color:#fff; font-weight:800; font-size:15px;
  border-radius:13px; border:none; cursor:pointer;
  box-shadow:0 6px 28px rgba(255,140,0,.4);
  letter-spacing:.3px; transition:transform .15s,box-shadow .15s;
}
.digi-roi-btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 36px rgba(255,140,0,.5);
}
.digi-roi-btn-primary:disabled {
  opacity:.7; cursor:not-allowed; transform:none;
}
.digi-calc-note {
  font-size:11px; color:#A8B8D8; text-align:center;
  margin:10px 0 0;
}
.digi-roi-cta-wrap { text-align:center; margin-bottom:20px; }
.digi-roi-btn-cta {
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 44px;
  background:linear-gradient(135deg,#FFA500,#FF6B00);
  color:#fff !important; font-weight:800; font-size:16px;
  border-radius:50px; border:none; cursor:pointer;
  box-shadow:0 8px 36px rgba(255,140,0,.34);
  letter-spacing:.3px; text-decoration:none;
}

/* ══════════════════════════════════════
   METRIC CARDS
══════════════════════════════════════ */
.digi-roi-metrics-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:12px; margin-bottom:12px;
}
.digi-roi-mcard {
  background:#222222; border-radius:14px; padding:16px;
  border:1px solid #333333; position:relative; overflow:hidden;
}
/* .digi-roi-mcard::before {
  content:''; position:absolute; top:-18px; right:-18px;
  width:64px; height:64px;
  background:radial-gradient(circle,rgba(255,165,0,.1),transparent);
  pointer-events:none;
} */
.digi-roi-mcard-lbl { font-family: 'Plus Jakarta Sans', sans-serif; font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:#A8B8D8; font-weight:700; margin-bottom:7px; }
.digi-roi-mcard-val { font-size:22px; font-weight:900; color:#F0F4FF; line-height:1; }
.digi-roi-mcard-sub { font-size:11px; color:#C8D5ED; margin-top:6px; font-weight:500; }
.digi-roi-mcard-sub .green { color:#22C55E; font-weight:700; }

/* ROI bar */
.digi-roi-bar {
  background:#0A0F23; border-radius:14px; padding:18px 20px;
  border:1px solid #1E2D50;
  display:flex; justify-content:space-between; align-items:center;
}
.digi-roi-bar.highlight {
  background:linear-gradient(135deg,rgba(255,165,0,.12),rgba(255,107,0,.06));
  border-color:rgba(255,140,0,.4);
  box-shadow:0 4px 24px rgba(255,140,0,.15);
}
.digi-roi-bar-lbl { font-family: 'Plus Jakarta Sans', sans-serif; font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:#FF8C00; font-weight:700; margin-bottom:6px; }
.digi-roi-bar-val {
  font-size:38px; font-weight:900; letter-spacing:-2px; line-height:1;
  background:linear-gradient(135deg,#FFA500,#FF6B00);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.digi-roi-bar-sub { font-size:12px; color:#A8B8D8; margin-bottom:6px; text-align:right; }
.digi-roi-bar-icon {
  width:44px; height:44px;
  background:rgba(255,140,0,.12); border:1px solid rgba(255,140,0,.3);
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-left:auto;
}
.digi-roi-disclaimer { font-size:10px; color:#A8B8D8; text-align:center; margin-top:10px; }

/* Locked state */
.digi-roi-locked { position:relative; }
.digi-roi-locked-blur { filter:blur(7px); pointer-events:none; opacity:.35; }
.digi-roi-lock-overlay {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.digi-roi-lock-box {
  background:#222222; border:1px solid rgba(255,140,0,.35);
  border-radius:18px; padding:28px 26px;
  text-align:center; max-width:230px;
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(255,140,0,.11);
}
.digi-roi-lock-icon { font-size:28px; margin-bottom:12px; }
.digi-roi-lock-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size:16px; font-weight:700; color:#F0F4FF; margin-bottom:8px; }
.digi-roi-lock-desc { font-size:12px; color:#A8B8D8; line-height:1.6; }
.digi-roi-lock-desc strong { color:#FF8C00; }

/* ══════════════════════════════════════
   MODAL
══════════════════════════════════════ */
.digi-roi-modal-bg {
  position:fixed; inset:0;
  background:rgba(0,0,0,.7);
  display:flex; align-items:center; justify-content:center;
  z-index:99999; padding:16px;
  backdrop-filter:blur(8px);
}
.digi-roi-modal {
  background:#222222;
  border:1px solid rgba(255,140,0,.35);
  border-radius:24px; padding:24px;
  width:100%; max-width:460px;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 50px rgba(255,140,0,.11);
  position:relative;
  max-height:92vh; overflow-y:auto;
}
.digi-roi-modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 20px !important;
    cursor: pointer;
    padding: 10px 12px !important;
    border-radius: 100px;
    line-height: 1 !important;
}
.digi-roi-modal-icon {
  width:56px; height:56px;
  background:rgba(255,140,0,.11); border:1px solid rgba(255,140,0,.27);
  border-radius:16px; display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px; font-size:26px;
  box-shadow:0 0 20px rgba(255,140,0,.2);
}
.digi-roi-modal-title { text-align:center; margin-bottom:20px; }
.digi-roi-modal-title h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size:20px; font-weight:800; color:#F0F4FF; margin:0 0 6px; }
.digi-roi-modal-title p  { font-size:13px; color:#A8B8D8; line-height:1.6; margin:0; }

/* Form fields */
.digi-roi-form-field { margin-bottom:13px; }
.digi-roi-form-label {
  display:block; font-family: 'Plus Jakarta Sans', sans-serif; font-size:11px; font-weight:700;
  color:#A8B8D8; margin-bottom:5px;
  letter-spacing:.4px; text-transform:uppercase;
}
.digi-roi-form-label .req { color:#FF8C00; }
.digi-roi-form-input {
    width: 100% !important;
    padding: 10px !important;
    background: #222222 !important;
    border: 1px solid #333333 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    color: #F0F4FF !important;
    outline: none !important;
    transition: border-color .2s !important;
    height: 40px !important;
}
.digi-roi-form-input::placeholder { color:#fff !important; opacity:0.5 !important; }
.digi-roi-form-input:focus { border-color:#FF8C00; }
.digi-roi-form-input.error { border-color:#F87171; }
.digi-roi-form-error { color:#F87171; font-size:12px; margin-bottom:8px; }
.digi-modal-privacy { font-size:11px; color:#A8B8D8; text-align:center; margin-top:10px; }
.digi-recaptcha-v2-wrap { display:flex; justify-content:center; margin:14px 0 4px; }
.digi-recaptcha-v2-wrap iframe { border-radius:4px; }

/* Spinner */
.digi-spinner {
  display:inline-block; width:14px; height:14px;
  border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
  border-radius:50%; animation:digi-spin .7s linear infinite;
  vertical-align:middle; margin-right:6px;
}
@keyframes digi-spin { to { transform:rotate(360deg); } }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 680px) {
  .digi-roi-grid { grid-template-columns:1fr; }
  .digi-hero-headline { font-size:26px; }
  .digi-hero-stats { flex-wrap:wrap; justify-content:center; padding:12px 20px; }
  .digi-hero-stat-div { display:none; }
  .digi-roi-btn-cta { font-size:14px; padding:14px 28px; }
  .digi-modal-snap-grid { grid-template-columns:1fr; }
  .digi-roi-modal { padding:24px 18px; }

  .digi-ind-grid { gap:6px; }
  .digi-ind-btn { padding:10px 12px 10px 14px !important; gap:6px; font-size:10px !important;  }
  .digi-ind-icon { font-size:24px; }
  .digi-ind-icon img.emoji { width:24px; height:24px; }
  .digi-ind-label { font-size:10px; }
  
}

@media (max-width: 400px) {
  .digi-ind-grid { gap:5px; }
  .digi-ind-btn { padding:10px 10px 10px 14px !important; gap:5px; font-size:9.5px !important;  }
  .digi-ind-icon { font-size:22px; }
  .digi-ind-icon img.emoji { width:22px; height:22px; }
  .digi-roi-card { padding: 16px; }
  .digi-roi-metrics-grid {grid-template-columns: 1fr;}
}