/* v4.4: safe overlays to control existing vue-slider visuals */
.constructor-application .vue-slider { position: relative; }
.constructor-application .ghost-range { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
#backup-row { margin-top: 10px; }
#backup-row .vue-slider .ghost-range { pointer-events:none; } /* read-only; updates from storage */
.order .radioButton .text { cursor:pointer; user-select:none; }


/* v4.6: reliable slider interaction + look */
.constructor-application .vue-slider{ position:relative; }
.constructor-application .vue-slider-rail{ position:relative; z-index:1; height:6px; border-radius:999px; background:#e6ebf2; }
.constructor-application .vue-slider-process{ background:#2b74ff; border-radius:999px; }
.constructor-application .vue-slider-dot{ z-index:2; }
.constructor-application .vue-slider .ghost-range{
  position:absolute; inset:-12px 0; height:calc(100% + 24px); width:100%;
  opacity:0; z-index:5; pointer-events:auto; cursor:pointer; touch-action:pan-x;
}
/* thumbs */
.constructor-application input[type="range"]{ -webkit-appearance:none; appearance:none; background:transparent; }
.constructor-application input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:#2b74ff; border:2px solid #fff; box-shadow:0 0 0 1px rgba(43,116,255,.6);
}
.constructor-application input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:#2b74ff; border:2px solid #fff;
}
/* Check toggle visuals remain from theme; we only toggle classes */


/* v4.7: pointer-events on slider container; dot doesn't block */
.constructor-application .vue-slider{ position:relative; touch-action: pan-x; }
.constructor-application .vue-slider-rail{ position:relative; z-index:1; height:6px; border-radius:999px; background:#e6ebf2; }
.constructor-application .vue-slider-process{ background:#2b74ff; border-radius:999px; }
.constructor-application .vue-slider-dot{ z-index:2; pointer-events:none; }


/* v4.8: look & interactions */
.constructor-application .vue-slider{ position:relative; touch-action: pan-x; }
.constructor-application .vue-slider-rail{ position:relative; z-index:1; height:6px; border-radius:999px; background:#e6ebf2; }
.constructor-application .vue-slider-process{ background:#2b74ff; border-radius:999px; height:6px; }
.constructor-application .vue-slider-dot{ z-index:2; pointer-events:none; width:20px; height:20px; }
.constructor-application .vue-slider-dot .vue-slider-dot-handle{ width:20px; height:20px; border-radius:50%; box-shadow:0 6px 16px rgba(45,122,255,.35); background:#2b74ff; border:3px solid #fff; }

/* Day/Month visual toggle (data-mode on .order .price .radioButton) */
.order .price .radioButton .radio{ position:relative; width:48px; height:24px; background:#cdd8f0; border-radius:999px; display:inline-block; vertical-align:middle; margin:0 8px; }
.order .price .radioButton .radio .thumb{ position:absolute; top:2px; left:2px; width:20px; height:20px; background:#2b74ff; border-radius:50%; transition:left .2s ease; }
.order .price .radioButton[data-mode="day"]  .radio .thumb{ left:2px; }
.order .price .radioButton[data-mode="month"] .radio .thumb{ left:26px; }
.order .price .radioButton .text{ font-weight:700; color:#2B74FF; opacity:.75; }
.order .price .radioButton .text.day.active, .order .price .radioButton[data-mode="day"] .text.day { opacity:1; }
.order .price .radioButton .text.month.active, .order .price .radioButton[data-mode="month"] .text.month { opacity:1; }

/* Keep IPv4 hint style unchanged regardless of toggle */
.constructor-application .radioButton .hint{ color:inherit !important; opacity:1 !important; }


/* v4.9: ensure dot accepts pointer, IPv4 hint style frozen */
.constructor-application .vue-slider-dot{ pointer-events:auto; }
.constructor-application .inputRange .radioButton.check .hint,
.constructor-application .inputRange .radioButton .hint{ color:inherit !important; opacity:1 !important; }


/* v4.10: exact rail/track alignment + IPv4-like toggle for day/month */

/* Unify rail/process/minimum vertical alignment */
.constructor-application .vue-slider{ position:relative; height:20px; }
.constructor-application .vue-slider-rail{ position:relative; height:6px; margin:7px 0; background:#e6ebf2; border-radius:999px; }
.constructor-application .vue-slider-process{ position:absolute; top:0; left:0; height:6px; background:#2b74ff; border-radius:999px; }
.constructor-application .process-minimum{ position:absolute; top:0; left:0; height:6px; background:#f7b2b7; border-radius:999px; }
.constructor-application .vue-slider-dot{ position:absolute; top:50%; transform:translate(-50%,-50%); width:20px; height:20px; border-radius:50%; pointer-events:auto; }
.constructor-application .vue-slider-dot .vue-slider-dot-handle{ width:20px; height:20px; border-radius:50%; box-shadow:0 6px 16px rgba(45,122,255,.35); background:#2b74ff; border:3px solid #fff; }

/* Backup row inherits same geometry */
#backup-row .vue-slider-rail,
#backup-row .vue-slider-process,
#backup-row .process-minimum{ height:6px; top:0; margin:7px 0; }

/* Day/Month: make it visually identical to IPv4 switch */
.order .price .radioButton{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.order .price .radioButton .radio{ position:relative; width:48px; height:24px; background:#cdd8f0; border-radius:999px; }
.order .price .radioButton .radio .thumb{ position:absolute; top:2px; left:2px; width:20px; height:20px; background:#2b74ff; border-radius:50%; transition:left .2s ease; }
.order .price .radioButton.check .radio .thumb{ left:26px; } /* CHECK == month ON, see JS mapping */

/* Keep hint under IPv4 unchanged no matter what */
.constructor-application .inputRange .radioButton .hint{ color:inherit !important; opacity:1 !important; }

/* Active text coloring (like reference) */
.order .price .radioButton .text{ font-weight:700; color:#2b74ff; opacity:.5; user-select:none; }
.order .price .radioButton .text.day.active{ opacity:1; }
.order .price .radioButton .text.month.active{ opacity:1; }



/* v4.11: unify backup track; hide pink min on backup; day/month looks like IPv4; mobile select */
#backup-row .process-minimum { display:none; } /* remove double-track */
.order .price .radioButton{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.order .price .radioButton .radio{ position:relative; width:48px; height:24px; background:#cdd8f0; border-radius:999px; }
.order .price .radioButton .radio .thumb{ position:absolute; top:2px; left:2px; width:20px; height:20px; background:#2b74ff; border-radius:50%; transition:left .2s ease; }
.order .price .radioButton.check .radio .thumb{ left:26px; }
.order .price .radioButton .text{ font-weight:700; color:#2b74ff; opacity:.5; user-select:none; }
.order .price .radioButton .text.day.active, .order .price .radioButton .text.month.active{ opacity:1; }

/* IPv4 hint fixed regardless of state */
.constructor-application .inputRange .radioButton .hint{ color:inherit !important; opacity:1 !important; }

/* Mobile: show select instead of switch */
@media (max-width: 768px){
  .order .price .radioButton{ display:none; }
  .order .price .mode-select{ display:inline-block; }
}
@media (min-width: 769px){
  .order .price .mode-select{ display:none; }
}


/* v4.12: unified selector styles */
.selector, .ipv4-spinner, .region-select, .prepay-select { display:inline-flex; align-items:center; gap:8px; }
.selector .radio, .daymonth .radio{ position:relative; width:48px; height:24px; background:#cdd8f0; border-radius:999px; }
.selector .thumb, .daymonth .radio .thumb{ position:absolute; top:50%; transform:translateY(-50%); width:20px; height:20px; left:2px; background:#2b74ff; border-radius:50%; transition:left .2s ease; }
.selector.check .thumb, .daymonth.check .radio .thumb{ left:26px; }

/* Day/Month block styled like IPv4 switch */
.order .price .radioButton{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.order .price .radioButton .radio{ position:relative; width:48px; height:24px; background:#cdd8f0; border-radius:999px; }
.order .price .radioButton .radio .thumb{ position:absolute; top:50%; transform:translateY(-50%); width:20px; height:20px; left:26px; background:#2b74ff; border-radius:50%; transition:left .2s ease; }
.order .price .radioButton.check .radio .thumb{ left:26px; } /* month on right */
.order .price .radioButton:not(.check) .radio .thumb{ left:2px; } /* day on left */
.order .price .radioButton .text{ font-weight:700; color:#2b74ff; opacity:.5; user-select:none; }
.order .price .radioButton .text.active{ opacity:1; }

/* IPv4 spinner */
.ipv4-spinner .btn{ width:28px; height:28px; border:1px solid #d7e1f2; border-radius:8px; background:#f0f5ff; display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none; }
.ipv4-spinner input{ width:70px; text-align:center; padding:6px 8px; border:1px solid #e5eaf1; border-radius:10px; }

/* Region row */
#region-row .count{ display:flex; align-items:center; gap:10px; }
#region-select{ padding:10px 12px; border:1px solid #e5eaf1; border-radius:10px; }

/* Prepay (months) */
#prepay-row .prepay-select button{ padding:6px 10px; border:1px solid #d7e1f2; border-radius:10px; background:#f0f5ff; cursor:pointer; }
#prepay-row .prepay-select button.active{ background:#2b74ff; color:#fff; border-color:#2b74ff; }

/* Backup row: hide pink minimum to avoid double track */
#backup-row .process-minimum { display:none; }