/*
      Integration note: stylesv2.css sets global body/price typography and Bootstrap
      is loaded later in the document. The original component used a separate visual
      scale, so those late/global rules made it feel detached from the pricing cards.
      These focused overrides stay under the component ID while reusing the site's
      color variables, 10px radius, shadow, pricing classes, and Bootstrap button.
    */
    #cci-vm-configurator{
      --cci-purple:#361c65;
      --cci-purple-2:var(--btn,#6132b5);
      --cci-purple-3:var(--btn-dark,#6835c3);
      --cci-purple-soft:#f5f1fb;
      --cci-green:#28a745;
      --cci-text:var(--text,#465372);
      --cci-heading:var(--dark-text,#031b4e);
      --cci-muted:#69738a;
      --cci-border:var(--gray-light2,#eaeefc);
      --cci-white:#ffffff;
      padding:.5rem 0 2rem;
      background:transparent;
      color:var(--cci-text);
      font-family:inherit;
      font-size:17px;
      line-height:1.45;
    }

    #cci-vm-configurator *{box-sizing:border-box}
    #cci-vm-configurator button{font:inherit}

    #cci-vm-configurator .cci-container{
      width:100%;
      margin:auto;
    }

    #cci-vm-configurator .cci-builder{
      display:grid;
      grid-template-columns:minmax(0,2fr) minmax(300px,1fr);
      gap:30px;
      align-items:start;
    }

    #cci-vm-configurator .cci-card{
      background:var(--cci-white);
      border:0;
      border-radius:10px;
      box-shadow:5px 5px 40px 0 rgba(123,104,255,.1);
      overflow:hidden;
    }

    #cci-vm-configurator .cci-card-header{
      padding:1.75rem 1.75rem 0;
      border:0;
      background:#fff;
    }

    #cci-vm-configurator .cci-card-title{
      margin:0;
      color:var(--cci-heading);
      font-family:"Epilogue",Arial,sans-serif;
      font-size:1.75rem;
      font-weight:700;
      line-height:1.35;
    }

    #cci-vm-configurator .cci-card-body{padding:1.5rem 1.75rem 1.75rem}

    #cci-vm-configurator .cci-group{
      padding-bottom:1.5rem;
      margin-bottom:1.5rem;
      border-bottom:1px solid var(--cci-border);
    }

    #cci-vm-configurator .cci-group:last-child{
      padding:0;
      margin:0;
      border:0;
    }

    #cci-vm-configurator .cci-slider-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:1.5rem;
      padding-bottom:1.5rem;
      margin-bottom:1.5rem;
      border-bottom:1px solid var(--cci-border);
    }

    #cci-vm-configurator .cci-slider-grid .cci-group{
      min-width:0;
      padding:0;
      margin:0;
      border:0;
    }

    #cci-vm-configurator .cci-slider-grid .cci-slider-top{
      flex-wrap:wrap;
    }

    #cci-vm-configurator .cci-group h3{
      margin:0 0 .8rem;
      color:var(--cci-heading);
      font-family:"Epilogue",Arial,sans-serif;
      font-size:1.1rem;
      font-weight:700;
    }

    #cci-vm-configurator .cci-choices{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:.75rem;
    }

    #cci-vm-configurator .cci-preset-grid{
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:.75rem;
    }

    #cci-vm-configurator .cci-choice,
    #cci-vm-configurator .cci-preset{
      min-width:0;
      min-height:54px;
      padding:.7rem .55rem;
      border:1px solid var(--cci-border);
      border-radius:8px;
      background:#fff;
      color:#554d62;
      cursor:pointer;
      font-weight:600;
      font-size:.9rem;
      overflow-wrap:anywhere;
      transition:border-color .15s ease,box-shadow .15s ease,background .15s ease,transform .15s ease;
    }

    #cci-vm-configurator .cci-choice:focus-visible,
    #cci-vm-configurator .cci-preset:focus-visible,
    #cci-vm-configurator .cci-order:focus-visible,
    #cci-vm-configurator .cci-range:focus-visible{
      outline:3px solid rgba(97,50,181,.25);
      outline-offset:2px;
    }

    #cci-vm-configurator .cci-preset{
      min-height:170px;
      padding:1rem .85rem;
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      text-align:left;
    }

    #cci-vm-configurator .cci-choice small,
    #cci-vm-configurator .cci-preset small{
      display:block;
      margin-top:.2rem;
      color:var(--cci-muted);
      font-size:.78rem;
      font-weight:400;
    }

    #cci-vm-configurator .cci-choice:hover,
    #cci-vm-configurator .cci-preset:hover{
      border-color:#bda8e9;
      box-shadow:0 8px 20px rgba(123,104,255,.12);
      transform:translateY(-1px);
    }

    #cci-vm-configurator .cci-choice.active,
    #cci-vm-configurator .cci-preset.active{
      border-color:var(--cci-purple-2);
      background:var(--cci-purple-soft);
      color:var(--cci-purple-2);
      box-shadow:inset 0 0 0 1px var(--cci-purple-2);
    }

    #cci-vm-configurator .cci-preset-name{
      color:var(--cci-heading);
      font-family:"Epilogue",Arial,sans-serif;
      font-size:1.05rem;
      font-weight:700;
    }

    #cci-vm-configurator .cci-preset-price{
      margin:.35rem 0 .55rem;
      color:var(--cci-purple-2);
      font-size:1.25rem;
      font-weight:700;
    }

    #cci-vm-configurator .cci-preset-price small{
      display:inline;
      margin-left:.1rem;
    }

    #cci-vm-configurator .cci-preset-spec{
      width:100%;
      padding:.12rem 0;
      color:#655d70;
      font-size:.78rem;
      font-weight:400;
    }

    #cci-vm-configurator .cci-preset-spec::before{
      content:"";
      display:inline-block;
      width:12px;
      height:12px;
      margin-right:.4rem;
      background:url("images/check.svg") center/contain no-repeat;
      vertical-align:-1px;
    }

    #cci-vm-configurator .cci-custom-preset .cci-preset-spec::before{
      content:"+";
      width:auto;
      height:auto;
      background:none;
      color:var(--cci-purple-2);
      font-weight:700;
      vertical-align:baseline;
    }

    #cci-vm-configurator .cci-summary{
      position:sticky;
      top:90px;
      z-index:auto;
      margin:0;
      padding:0;
      text-align:left;
    }

    #cci-vm-configurator .cci-summary-row{
      display:grid;
      grid-template-columns:16px minmax(0,1fr) minmax(0,1.15fr);
      align-items:center;
      gap:1rem;
      padding:.55rem 0;
      border:0;
      color:var(--cci-text);
      font-size:.9rem;
      border-bottom: 1px solid var(--cci-border);
    }

    #cci-vm-configurator .cci-summary-row::before{
      content:"";
      width:16px;
      height:16px;
      background:url("images/check.svg") center/contain no-repeat;
    }

    #cci-vm-configurator .cci-summary-row strong{
      color:var(--cci-heading);
      text-align:right;
      overflow-wrap:anywhere;
    }

    #cci-vm-configurator .cci-platform-features{
      margin-top:.8rem;
      padding:.9rem 0 0;
      border:0;
      border-radius:0;
      background:transparent;
      color:var(--cci-text);
      font-size:.85rem;
      line-height:1.7;
    }

    #cci-vm-configurator .cci-platform-features div{
      display:flex;
      align-items:center;
      gap:.55rem;
    }

    #cci-vm-configurator .cci-platform-features div::before{
      content:"";
      flex:0 0 14px;
      width:14px;
      height:14px;
      background:url("images/check.svg") center/contain no-repeat;
    }

    #cci-vm-configurator .cci-guarantee{
      margin-top:.85rem;
      padding:.8rem .9rem;
      border:1px solid var(--cci-border);
      border-radius:8px;
      background:var(--light,#fbfafe);
      color:var(--cci-text);
      font-size:.82rem;
    }

    #cci-vm-configurator .cci-price-panel{
      order:-1;
      margin:0 0 1.25rem;
      padding:0;
      border:0;
      background:transparent;
      color:var(--cci-purple-2);
      text-align:left;
    }

    #cci-vm-configurator .cci-price{
      position:relative;
      display:flex;
      align-items:flex-start;
      justify-content:flex-start;
      margin:.45rem 0 0;
      font-family:"Epilogue",Arial,sans-serif;
      line-height:1;
    }

    #cci-vm-configurator .cci-price .price-sign,
    #cci-vm-configurator .cci-price .price-value{
      color:var(--cci-purple-2);
      font-size:42px;
      font-weight:600;
      line-height:1;
    }

    #cci-vm-configurator .cci-price .price-decimal{
      position:relative;
      top:2px;
      color:var(--cci-purple-2);
      font-size:12px;
      font-weight:600;
      line-height:1;
    }

    #cci-vm-configurator .cci-price .price-term{
      align-self:flex-end;
      margin:0 0 3px .2rem;
      color:var(--cci-muted);
      font-size:14px;
      font-weight:600;
    }

    #cci-vm-configurator .cci-order{
      width:100%;
      margin-top:1.25rem;
      padding:.75rem 1rem;
      border-radius:.25rem;
      cursor:pointer;
      font-size:1.25rem;
      font-weight:600;
      text-transform:none;
      transition:transform .15s ease;
    }

    #cci-vm-configurator .cci-summary .cci-card-body{
      display:flex;
      flex-direction:column;
    }

    #cci-vm-configurator .cci-order:hover{
      transform:translateY(-1px);
    }

    #cci-vm-configurator .cci-os-choices .cci-choice{min-height:68px}

    #cci-vm-configurator .cci-os-icon{
      width:20px;
      height:20px;
      margin-right:.4rem;
      border-radius:50%;
      object-fit:contain;
      vertical-align:middle;
    }

    #cci-vm-configurator .cci-slider-wrap{
      padding:1rem;
      border:1px solid var(--cci-border);
      border-radius:8px;
      background:#fff;
    }

    #cci-vm-configurator .cci-slider-top{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:1rem;
      margin-bottom:.8rem;
    }

    #cci-vm-configurator .cci-slider-note{
      color:var(--cci-muted);
      font-size:.85rem;
    }

    #cci-vm-configurator .cci-slider-value{
      display:inline-flex;
      align-items:baseline;
      gap:.25rem;
      padding:.4rem .65rem;
      border-radius:999px;
      background:var(--cci-purple-soft);
      color:var(--cci-purple-2);
      font-size:1rem;
      font-weight:700;
      white-space:nowrap;
    }

    #cci-vm-configurator .cci-slider-value small{
      color:var(--cci-muted);
      font-size:.72rem;
      font-weight:400;
    }

    #cci-vm-configurator .cci-range{
      width:100%;
      height:6px;
      margin:.25rem 0 .55rem;
      border:0;
      border-radius:999px;
      background:linear-gradient(
        to right,
        var(--cci-purple-2) 0%,
        var(--cci-purple-2) var(--range-progress,0%),
        #e5dff0 var(--range-progress,0%),
        #e5dff0 100%
      );
      appearance:none;
      -webkit-appearance:none;
      cursor:pointer;
      outline:none;
    }

    #cci-vm-configurator .cci-range::-webkit-slider-thumb{
      width:20px;
      height:20px;
      border:3px solid #fff;
      border-radius:50%;
      background:var(--cci-purple-2);
      box-shadow:0 .1rem .35rem rgba(91,34,201,.35);
      appearance:none;
      -webkit-appearance:none;
    }

    #cci-vm-configurator .cci-range::-moz-range-thumb{
      width:16px;
      height:16px;
      border:3px solid #fff;
      border-radius:50%;
      background:var(--cci-purple-2);
      box-shadow:0 .1rem .35rem rgba(91,34,201,.35);
    }

    #cci-vm-configurator .cci-slider-scale{
      display:flex;
      justify-content:space-between;
      color:var(--cci-muted);
      font-size:.72rem;
    }

    @media(max-width:1199.98px){
      #cci-vm-configurator .cci-builder{
        grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);
      }
      #cci-vm-configurator .cci-preset-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
      }
    }

    @media(max-width:991.98px){
      #cci-vm-configurator .cci-builder{grid-template-columns:1fr}
      #cci-vm-configurator .cci-summary{position:static}
    }

    @media(max-width:767.98px){
      #cci-vm-configurator .cci-slider-grid{
        grid-template-columns:1fr;
        gap:1.25rem;
      }
    }

    @media(max-width:620px){
      #cci-vm-configurator{padding:.75rem 0 1.5rem}
      #cci-vm-configurator .cci-choices,
      #cci-vm-configurator .cci-preset-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      #cci-vm-configurator .cci-card-header{padding:1.25rem 1rem 0}
      #cci-vm-configurator .cci-card-title{font-size:1.5rem}
      #cci-vm-configurator .cci-card-body{padding:1rem}
      #cci-vm-configurator .cci-price-panel{margin:0 0 1rem;padding:0}
      #cci-vm-configurator .cci-preset{min-height:150px}
      #cci-vm-configurator .cci-order{font-size:1.1rem}
      #cci-vm-configurator .cci-slider-top{
        align-items:flex-start;
        flex-direction:column;
      }
    }

    @media(max-width:400px){
      #cci-vm-configurator .cci-preset-grid{grid-template-columns:1fr}
    }