/* =====================================================
   ZFLASH VEHICLE SELECTOR – Live Refined
   Dark / Cyan / OEM+ / Unlock / Metadata
   ===================================================== */

/* ---------------- Wrapper ---------------- */
#zflash-vehicle-selector,
.zflash-vehicle-selector{
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background: transparent;
  color: #e7eef3;
}

/* ---------------- Form ---------------- */
#zflash-selector-form label{
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 10px 0 6px;
  color: #ffffff;
}

#zflash-selector-form select{
  appearance: none;
  width: 100%;
  min-height: 44px;
  padding: 12px 40px 12px 14px;
  background: #0f1418;
  color: #ffffff;
  border-radius: 10px;
  border: 1px solid #2a3a44;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
  background-image:
    linear-gradient(45deg, transparent 50%, #00c9ff 50%),
    linear-gradient(135deg, #00c9ff 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

#zflash-selector-form select:focus{
  outline: none;
  border-color: #00c9ff;
  box-shadow: 0 0 0 1px rgba(0,201,255,.25);
}

#zflash-selector-form select:disabled{
  background: rgba(15,20,24,.6);
  color: rgba(231,238,243,.45);
  cursor: not-allowed;
}

/* ---------------- Primary button ---------------- */
#zflash-submit{
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg,#00c9ff,#009dff);
  color: #001018;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
  box-shadow: 0 10px 24px rgba(0,201,255,.12);
}

#zflash-submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,201,255,.18);
}

#zflash-submit:disabled{
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ---------------- Result container ---------------- */
#zflash-result{
  margin-top: 18px;
}

/* ---------------- Result card ---------------- */
.zflash-result-card{
  padding: 16px;
  background: #0b1116;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  color: #e7eef3;
  box-shadow:
    0 14px 34px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.02);
}

.zflash-title{
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 12px;
  color: #ffffff;
}

.zflash-result-card p{
  margin: 0 0 10px 0;
  line-height: 1.6;
  color: rgba(231,238,243,.9);
}

/* =====================================================
   PERFORMANCE / METRICS
   ===================================================== */

.zflash-performance,
.zflash-performance-grid{
  margin-top: 6px;
  margin-bottom: 10px;
}

.zflash-metric,
.zflash-perf-row{
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.zflash-metric:last-child,
.zflash-perf-row:last-child{
  border-bottom: none;
}

.zflash-label,
.zflash-perf-label{
  font-size: 13px;
  font-weight: 600;
  color: rgba(231,238,243,.8);
}

.zflash-value,
.zflash-perf-value{
  margin-top: 3px;
  font-size: 15px;
  color: #ffffff;
  line-height: 1.45;
}

.zflash-value strong,
.zflash-perf-value strong{
  color: #ffffff;
  font-weight: 800;
}

.zflash-gain{
  color: #39d98a;
  font-weight: 800;
}

/* ---------------- Vehicle metadata block ---------------- */
.zflash-vehicle-meta{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,201,255,.18);
  background:
    linear-gradient(180deg, rgba(0,201,255,.06), rgba(0,201,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.zflash-vehicle-meta .zflash-perf-row{
  padding: 8px 0;
}

.zflash-vehicle-meta .zflash-perf-label{
  color: #7fe7ff;
  font-weight: 700;
  letter-spacing: .01em;
}

.zflash-vehicle-meta .zflash-perf-value{
  font-size: 14px;
}

.zflash-bench-card .zflash-vehicle-meta{
  margin: 14px 0 2px;
}

/* ---------------- Contact / warning ---------------- */
.zflash-contact-warning{
  margin: 10px 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(231,238,243,.96);
  font-weight: 700;
}

.zflash-unlock-warning{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,179,0,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  color: #ffe2a3;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.zflash-unlock-note{
  margin-top: 10px;
  color: rgba(255,239,199,.82);
  font-size: 13px;
  line-height: 1.45;
}

/* ---------------- Price ---------------- */
.zflash-price,
.zflash-price-row{
  margin-top: 10px;
  font-size: 15px;
}

.zflash-price strong,
.zflash-price-label{
  color: rgba(231,238,243,.72);
  font-weight: 600;
}

.zflash-price-value{
  color: #ffffff;
  font-weight: 800;
}

.zflash-price-row--dynamic{
  transition: opacity .15s ease;
}

/* ---------------- Actions ---------------- */
.zflash-actions{
  margin-top: 12px;
}

/* =====================================================
   INLINE LINK / SUBHEADING
   ===================================================== */

.zflash-subheading{
  margin-top: 10px;
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}

.zflash-inline-link-wrap{
  margin: 18px 0 24px 0;
}

.zflash-inline-link{
  color: #00c9ff;
  font-weight: 600;
  text-decoration: none;
}

.zflash-inline-link:hover{
  text-decoration: underline;
}

/* =====================================================
   VICTRON UPSELL
   ===================================================== */

.zf-upsell{
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,201,255,.25);
  background: rgba(0,0,0,.20);
}

.zf-upsell__row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.zf-upsell__row.is-disabled{
  opacity: .6;
  cursor: not-allowed;
}

.zf-upsell__row input[type="checkbox"]{
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: #00c9ff;
}

.zf-upsell__text{
  display: block;
  line-height: 1.15;
}

.zf-upsell__title{
  display: block;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
}

.zf-upsell__sub{
  display: block;
  margin-top: 4px;
  color: rgba(231,238,243,.78);
  font-weight: 500;
  font-size: 12px;
}

.zf-upsell__stock{
  display: block;
  margin-top: 4px;
  opacity: .8;
  font-size: 12px;
  font-weight: 500;
}

.zf-upsell__price{
  margin-left: auto;
  white-space: nowrap;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
}

.zf-upsell__info-toggle{
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #00c9ff;
  cursor: pointer;
}

.zf-upsell__info{
  display: none;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(231,238,243,.85);
  background: rgba(255,255,255,.05);
  padding: 8px;
  border-radius: 8px;
}

/* =====================================================
   BENCH / OEM+ / OEM+ MAX / UNLOCK
   ===================================================== */

.zflash-choice-card{
  position: relative;
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
}

.zflash-choice-card:first-of-type{
  margin-top: 12px;
}

.zflash-choice-card--obd,
.zflash-choice-card--oemplus{
  border: 1px solid rgba(0,201,255,.28);
  background: linear-gradient(180deg, rgba(0,201,255,.08), rgba(0,201,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.zflash-choice-card--oemplusmax{
  border: 1px solid rgba(255,210,80,.35);
  background: linear-gradient(180deg, rgba(255,210,80,.08), rgba(255,210,80,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.zflash-choice-card--unlock{
  border: 1px solid rgba(255,179,0,.28);
  background: linear-gradient(180deg, rgba(255,179,0,.08), rgba(255,179,0,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.zflash-choice-title{
  display: block;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: .01em;
}

.zflash-choice-card--obd .zflash-choice-title,
.zflash-choice-card--oemplus .zflash-choice-title{
  color: #7fe7ff;
}

.zflash-choice-card--oemplusmax .zflash-choice-title{
  color: #ffe08a;
}

.zflash-choice-card--unlock .zflash-choice-title{
  color: #ffcc66;
}

.zflash-choice-badge{
  display: inline-block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,210,80,.12);
  color: #ffd978;
}

.zflash-choice-list{
  margin: 0 0 10px 18px;
  padding: 0;
  color: #eef5fa;
}

.zflash-choice-list li{
  margin: 5px 0;
}

.zflash-choice-text{
  margin-top: 10px;
  color: rgba(231,238,243,.88);
}

.zflash-choice-copy p:last-child{
  margin-bottom: 0;
}

.zflash-choice-separator{
  text-align: center;
  margin: 16px 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(231,238,243,.5);
}

/* =====================================================
   ADDONS
   ===================================================== */

.zflash-addons-wrap{
  margin-top: 12px;
}

.zflash-addon-card{
  display: flex;
  gap: 10px;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  transition: border .15s ease, background .15s ease, transform .15s ease;
}

.zflash-addon-card:hover{
  border-color: rgba(0,201,255,.35);
  background: rgba(0,201,255,.05);
  transform: translateY(-1px);
}

.zflash-addon-check{
  margin-top: 3px;
}

.zflash-addon-input{
  width: 16px;
  height: 16px;
  accent-color: #00c9ff;
}

.zflash-addon-content{
  flex: 1;
}

.zflash-addon-title{
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.zflash-addon-desc{
  font-size: 12px;
  margin-top: 3px;
  color: rgba(231,238,243,.8);
}

.zflash-addon-extra{
  margin-top: 6px;
}

.zflash-addon-price{
  font-weight: 700;
  color: #ffffff;
  font-size: 13px;
}

.zflash-addon-link{
  color: #00c9ff;
  font-size: 12px;
  font-weight: 600;
}

.zflash-addon-card--manual{
  border: 1px solid rgba(255,210,80,.3);
  background: rgba(255,210,80,.05);
}

.zflash-addon-card--manual .zflash-addon-price{
  color: #ffd978;
  font-weight: 800;
}

/* =====================================================
   BUTTONS
   ===================================================== */

.zflash-order-btn,
#zflash-buy-now{
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg,#00c9ff,#009dff);
  color: #001018;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  box-shadow: 0 10px 24px rgba(0,201,255,.14);
}

.zflash-order-btn:hover,
#zflash-buy-now:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,201,255,.22);
}

.zflash-order-btn:disabled,
#zflash-buy-now:disabled{
  opacity: .65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.zflash-order-btn--oemplusmax{
  background: linear-gradient(135deg,#00e0ff,#00bfff);
  color: #001018;
}

.zflash-order-btn--unlock{
  background: linear-gradient(135deg,#ffb300,#ff8c00);
  color: #1a1306;
}

/* Legacy unlock button fallback */
.zflash-unlock-btn{
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 14px;
  padding: 15px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,179,0,.52);
  background:
    linear-gradient(180deg, rgba(255,196,64,.16), rgba(255,179,0,.08)),
    linear-gradient(135deg, #1a1306 0%, #241806 45%, #120e07 100%);
  color: #ffd978;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .015em;
  cursor: pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    color .18s ease,
    background .18s ease;
  box-shadow:
    0 10px 28px rgba(255,179,0,.12),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.35);
}

.zflash-unlock-btn::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 32%,
    rgba(255,255,255,.16) 48%,
    transparent 64%,
    transparent 100%
  );
  transform: translateX(-135%);
  transition: transform .75s ease;
  pointer-events: none;
}

.zflash-unlock-btn::after{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 11px;
  border: 1px solid rgba(255,215,120,.10);
  pointer-events: none;
}

.zflash-unlock-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,200,90,.88);
  color: #ffe7a8;
  box-shadow:
    0 16px 36px rgba(255,179,0,.18),
    0 0 22px rgba(255,179,0,.10),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.35);
}

.zflash-unlock-btn:hover::before{
  transform: translateX(135%);
}

.zflash-unlock-btn:active{
  transform: translateY(0);
  box-shadow:
    0 8px 18px rgba(255,179,0,.12),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.zflash-unlock-btn:focus{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255,179,0,.20),
    0 12px 28px rgba(255,179,0,.14);
}

/* ---------------- Force button style in result ---------------- */
#zflash-result .zflash-order-btn{
  display: block !important;
  width: 100% !important;
  margin-top: 14px !important;
  padding: 14px !important;
  border-radius: 12px !important;
  border: none !important;
  background: linear-gradient(135deg,#00c9ff,#009dff) !important;
  color: #001018 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

#zflash-result .zflash-order-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,201,255,.25);
}

#zflash-result .zflash-order-btn--oemplusmax{
  background: linear-gradient(135deg,#00e0ff,#00bfff) !important;
}

#zflash-result .zflash-order-btn--unlock{
  background: linear-gradient(135deg,#ffb300,#ff8c00) !important;
  color: #1a1306 !important;
}

/* =====================================================
   LOADING OVERLAY
   ===================================================== */

#zflash-overlay.zflash-overlay{
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  border-radius: 14px;
  z-index: 20;
}

.zflash-spinner{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.22);
  border-top-color: #00c9ff;
  animation: zflashSpin 0.9s linear infinite;
}

@keyframes zflashSpin{
  to {
    transform: rotate(360deg);
  }
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 600px){
  .zf-upsell__row{
    flex-direction: column;
  }

  .zf-upsell__price{
    margin-left: 0;
    margin-top: 6px;
  }

  .zflash-addon-card{
    align-items: flex-start;
  }

  .zflash-value,
  .zflash-perf-value{
    font-size: 14px;
  }

  .zflash-result-card{
    padding: 14px;
  }

  .zflash-choice-card{
    padding: 13px;
  }

  .zflash-vehicle-meta{
    padding: 10px 12px;
  }
}