/* Webyne — configure
   Bootstrap 5.3 loads from the CDN in the page head. Component styling is inline on
   the markup so any block can move into a Blade partial untouched; this file holds
   only what inline styles cannot express: keyframes, resets, state and hover rules. */

html{scroll-behavior:smooth;background:#F1F6FB}
body{margin:0;background:#F1F6FB;color:#123258;font-family:'Manrope',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#166FA8;text-decoration:none;transition:color .25s ease}
a:hover{color:#184884}
::selection{background:rgba(24,156,204,.28);color:#0E2A48}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#E7EFF7}
::-webkit-scrollbar-thumb{background:#B6CADD;border-radius:20px;border:2px solid #E7EFF7}
:focus-visible{outline:2px solid #189CCC;outline-offset:3px}
@keyframes wbyBlob{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(26px,-18px,0) scale(1.06)}66%{transform:translate3d(-18px,14px,0) scale(.95)}}
@keyframes wbySheen{0%{transform:translateX(-130%) skewX(-18deg)}55%,100%{transform:translateX(320%) skewX(-18deg)}}
[data-opt][data-disabled="1"]{opacity:.45 !important;cursor:not-allowed !important}
[data-mobile-menu][data-open="1"]{max-height:80vh !important;opacity:1 !important}
input[type="range"]{accent-color:#189CCC}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.06s !important}}

/* ---------- hover states (generated from the design) ---------- */
.wby-h1:hover{
  background: #F1F7FC !important;
  color: #123258 !important;
}
.wby-h2:hover{
  background: #F1F7FC !important;
  color: #123258 !important;
}
.wby-h3:hover{
  background: #F1F7FC !important;
  color: #123258 !important;
}
.wby-h4:hover{
  background: #F1F7FC !important;
  color: #123258 !important;
}
.wby-h5:hover{
  border-color: #189CCC !important;
  background: #E9F4FB !important;
}
.wby-h6:hover{
  transform: translateY(-2px) !important;
}
.wby-h7:hover{
  border-color: #A9D9EE !important;
}
.wby-h8:hover{
  border-color: #A9D9EE !important;
}
.wby-h9:hover{
  border-color: #A9D9EE !important;
}
.wby-h10:hover{
  border-color: #A9D9EE !important;
}
.wby-h11:hover{
  border-color: #A9D9EE !important;
}
.wby-h12:hover{
  border-color: #A9D9EE !important;
}
.wby-h13:hover{
  border-color: #A9D9EE !important;
}
.wby-h14:hover{
  border-color: #A9D9EE !important;
}
.wby-h15:hover{
  border-color: #A9D9EE !important;
}
.wby-h16:hover{
  border-color: #A9D9EE !important;
}
.wby-h17:hover{
  border-color: #A9D9EE !important;
}
.wby-h18:hover{
  border-color: #A9D9EE !important;
}
.wby-h19:hover{
  border-color: #A9D9EE !important;
}
.wby-h20:hover{
  border-color: #A9D9EE !important;
}
.wby-h21:hover{
  border-color: #A9D9EE !important;
}
.wby-h22:hover{
  border-color: #A9D9EE !important;
}
.wby-h23:hover{
  border-color: #A9D9EE !important;
}
.wby-h24:hover{
  border-color: #A9D9EE !important;
}
.wby-h25:hover{
  border-color: #A9D9EE !important;
}
.wby-h26:hover{
  border-color: #A9D9EE !important;
}
.wby-h27:hover{
  border-color: #A9D9EE !important;
}
.wby-h28:hover{
  border-color: #A9D9EE !important;
}
.wby-h29:hover{
  border-color: #A9D9EE !important;
}
.wby-h30:hover{
  border-color: #A9D9EE !important;
}
.wby-h31:hover{
  border-color: #A9D9EE !important;
}
.wby-h32:hover{
  border-color: #A9D9EE !important;
}
.wby-h33:hover{
  border-color: #A9D9EE !important;
}
.wby-h34:hover{
  border-color: #A9D9EE !important;
}
.wby-h35:hover{
  border-color: #A9D9EE !important;
}
.wby-h36:hover{
  border-color: #A9D9EE !important;
}
.wby-h37:hover{
  border-color: #A9D9EE !important;
}
.wby-h38:hover{
  border-color: #A9D9EE !important;
}
.wby-h39:hover{
  transform: translateY(-2px) !important;
}
.wby-h40:hover{
  border-color: #189CCC !important;
  background: #E9F4FB !important;
}
.wby-h41:hover{
  transform: translateY(-2px) !important;
}
.wby-h42:hover{
  border-color: #189CCC !important;
  background: #E9F4FB !important;
}

/* Billing-term pills on the dark header panel. */
[data-cycle][data-state="on"]{background:#5CC8F0 !important;border-color:#5CC8F0 !important;color:#0E2A48 !important}
[data-cycle]:hover{border-color:#8FD8F0 !important;color:#FFFFFF}
/* Hide number-input spinners; the steppers do that job. */
[data-qty]::-webkit-outer-spin-button,[data-qty]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
[data-qty]{-moz-appearance:textfield;appearance:textfield}

/* ------------------------------------------------------------------------- */
/* Configure & order page — every component style externalised here; the Blade
   carries classes and data-attributes only. Same palette and radii as the
   rest of the template. The page keeps its own layout (hero card with the
   billing-term panel, one card per step, the summary rail); only the choices
   inside a step are laid out the way OVHcloud lays them out — one full-width
   radio row per option, "Included" or the price on the right. */

.cfg-page{position:relative;background:#F1F6FB}
.cfg-container{max-width:1320px}
.cfg-container--rel{position:relative}

/* Hero */
.cfg-hero{position:relative;z-index:1;padding:118px 0 0;background:linear-gradient(180deg,#F7FAFD,#F1F6FB);overflow:hidden}
.cfg-hero-blob{position:absolute;top:-140px;right:-120px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(24,156,204,.14),transparent 66%);filter:blur(28px)}
.cfg-crumbs{display:flex;align-items:center;gap:9px;font-size:13px;color:#7189A3;margin-bottom:22px;flex-wrap:wrap}
.cfg-crumbs a{color:#7189A3;font-weight:600}
.cfg-crumbs .cfg-crumb-here{color:#123258;font-weight:700}
.cfg-hero-card{border-radius:24px;background:#FFFFFF;border:1px solid #E4EDF6;box-shadow:0 34px 74px -54px rgba(18,50,88,.85);overflow:hidden}
.cfg-hero-row{--bs-gutter-x:0;margin:0}
.cfg-hero-main{padding:clamp(26px,3.2vw,44px)}
.cfg-kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#D98617;font-weight:500;margin-bottom:14px}
.cfg-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(26px,3vw,40px);line-height:1.08;letter-spacing:-.03em;margin:0 0 8px;color:#0E2A48}
.cfg-family{font-size:17px;font-weight:700;color:#166FA8;margin-bottom:14px}
.cfg-lede{font-size:15.5px;line-height:1.65;color:#5F7490;margin:0;max-width:560px}

/* Billing-term panel */
.cfg-price-col{padding:0}
.cfg-price-panel{height:100%;padding:clamp(26px,3vw,40px);background:linear-gradient(160deg,#123258,#0E2A48);color:#FFFFFF;display:flex;flex-direction:column;justify-content:center}
.cfg-panel-kicker{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;color:#8FD8F0;margin-bottom:14px}
.cfg-cycles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.cfg-cycle{cursor:pointer;padding:9px 14px;border-radius:100px;border:1px solid rgba(143,216,240,.4);background:transparent;color:#B7D2E9;font-size:12.5px;font-weight:700;transition:all .25s ease}
.cfg-price-line{display:flex;align-items:flex-end;gap:6px;margin-bottom:16px}
.cfg-base-price{font-family:'Space Grotesk',sans-serif;font-size:clamp(32px,3.6vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1}
.cfg-cycle-suffix{font-size:15px;font-weight:600;color:#A9C6E2;padding-bottom:6px}
.cfg-panel-note{font-size:14px;line-height:1.6;color:#B7D2E9;margin:0}

/* Builder */
.cfg-builder{position:relative;z-index:1;padding:34px 0 90px}
.cfg-main-row{--bs-gutter-x:1.75rem;--bs-gutter-y:1.75rem}
.cfg-card{border-radius:22px;background:#FFFFFF;border:1px solid #E4EDF6;box-shadow:0 26px 58px -46px rgba(18,50,88,.8);overflow:hidden;margin-bottom:26px}
.cfg-card-bar{height:4px;background:linear-gradient(90deg,#5CC8F0,#189CCC)}
.cfg-card-bar--dark{background:linear-gradient(90deg,#189CCC,#184884)}
.cfg-card-bar--amber{background:linear-gradient(90deg,#F0B458,#D98617)}
.cfg-card-body{padding:clamp(24px,2.8vw,36px)}
.cfg-step-head{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:flex-start;margin-bottom:22px}
.cfg-step-kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;color:#8598B0;margin-bottom:8px}
.cfg-step-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(21px,2.3vw,27px);font-weight:600;letter-spacing:-.02em;color:#0E2A48;margin:0}
.cfg-ac-meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#7189A3}
.cfg-required{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;color:#D98617;background:#FCF3E4;border:1px solid #F3DFBC;padding:6px 12px;border-radius:100px}
.cfg-plain-title{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:600;color:#0E2A48;margin:0 0 8px}
.cfg-text{font-size:14.5px;line-height:1.6;color:#5F7490;margin:0}

/* ------------------------------------------------------- option rows
   The choices inside a step, laid out like OVH's configurator: one
   full-width radio row per option — dot, name and any sub-line on the
   left; "Included" or the price with "ex. taxes/month" on the right. The
   dot is drawn here rather than with an <input>, because configure.js
   drives the state through data-state on the row itself. */
.cfg-list{display:flex;flex-direction:column;gap:10px}
.cfg-opt{position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  text-align:left;cursor:pointer;padding:14px 18px 14px 50px;border-radius:12px;border:1px solid #DCE5EF;background:#FFFFFF;
  font-family:'Manrope',sans-serif;color:#0E2A48;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.cfg-opt::before{content:'';position:absolute;left:18px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;
  border:2px solid #B6C6D8;background:#FFFFFF;transition:border-color .18s ease,box-shadow .18s ease}
.cfg-opt:hover{border-color:#9CC9E3}
.cfg-opt[data-state="on"]{border-color:#189CCC;background:#EEF7FC;box-shadow:0 0 0 1px #189CCC inset}
.cfg-opt[data-state="on"]::before{border-color:#189CCC;box-shadow:inset 0 0 0 4px #FFFFFF;background:#189CCC}
.cfg-opt[data-disabled="1"]{opacity:.45;cursor:not-allowed}
.cfg-opt:focus-visible{outline:2px solid #189CCC;outline-offset:2px}
.cfg-opt-main{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto}
.cfg-opt-name{font-size:15px;font-weight:700;color:#0E2A48;line-height:1.3}
.cfg-opt-sub{font-size:13px;color:#5F7490;line-height:1.45}
.cfg-opt-right{display:flex;align-items:baseline;gap:4px;flex:0 0 auto;text-align:right;line-height:1.2}
.cfg-opt-price{font-size:15px;font-weight:800;color:#166FA8;white-space:nowrap}
/* The term the price is for — "/month", "/year" — set by configure.js from
   the billing term chosen, and blank beside "Included". */
.cfg-opt-cyc{font-size:12px;font-weight:600;color:#8598B0;white-space:nowrap}
.cfg-opt-cyc:empty{display:none}
.cfg-sum-right{display:inline-flex;align-items:baseline;gap:3px;white-space:nowrap}
.cfg-sum-cyc{font-size:11px;color:#8598B0}
.cfg-sum-cyc:empty{display:none}
.cfg-opt-per{font-size:11px;color:#8598B0;margin-top:2px;white-space:nowrap}
/* Nothing to pay reads as "Included", in green, the way OVH marks the part
   that comes with the machine. A "None" choice says nothing at all. */
.cfg-opt-price:empty::before{content:'Included';color:#17A673}
.cfg-opt-price:empty + .cfg-opt-per{display:none}
.cfg-opt--none .cfg-opt-price:empty::before,[data-opt][data-label="None"] .cfg-opt-price:empty::before{content:none}
/* A checkbox-style row (addons): square box instead of a dot. */
.cfg-opt--check::before{border-radius:4px}
.cfg-opt--check[data-state="on"]::before{box-shadow:none;background:#189CCC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
/* Rows that are not a choice at all — a quantity, a dropdown — carry no dot. */
.cfg-opt--static,.cfg-opt--select{padding-left:18px;cursor:default}
.cfg-opt--static::before,.cfg-opt--select::before{content:none}
.cfg-hidden-choices{display:none}
.cfg-select{margin-top:8px;width:100%;max-width:420px;padding:9px 36px 9px 12px;border:1px solid #CFDCE9;border-radius:8px;background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166FA8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center/14px no-repeat;
  font-family:inherit;font-size:14px;font-weight:600;color:#0E2A48;-webkit-appearance:none;appearance:none;cursor:pointer}
.cfg-select:focus{outline:2px solid #189CCC;outline-offset:1px}

/* Quantity: a − / + stepper. Shown only once the part is taken. */
.cfg-ac-qtywrap{display:none;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.cfg-opt[data-state="on"] .cfg-ac-qtywrap,.cfg-ac-qtywrap--open{display:flex}
/* A part the chassis takes one of has no quantity to choose. */
.cfg-opt[data-state="on"] .cfg-ac-qtywrap--fixed{display:none}
.cfg-ac-qtylabel{font-size:12px;font-weight:700;color:#5F7490;text-transform:uppercase;letter-spacing:.06em}
.cfg-stepper{display:inline-flex;align-items:center;border:1px solid #CFDCE9;border-radius:8px;background:#FFFFFF;overflow:hidden}
.cfg-stepper-btn{width:34px;height:34px;border:0;background:#F4F7FB;color:#166FA8;font-size:18px;font-weight:700;cursor:pointer;line-height:1}
.cfg-stepper-btn:hover{background:#E4F1FA}
.cfg-ac-qty,.cfg-qty-input{width:54px;height:34px;border:0;border-left:1px solid #E5EEF7;border-right:1px solid #E5EEF7;text-align:center;font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;color:#0E2A48;background:#FFFFFF;-webkit-appearance:none;appearance:none;outline:none;text-align-last:center}
.cfg-ac-line{font-size:13px;font-weight:700;color:#166FA8}
.cfg-ac-line:empty{display:none}

/* Form fields: additional information, domain, server details */
.cfg-server-row{--bs-gutter-x:1.25rem;--bs-gutter-y:1rem}
.cfg-domain-field{margin-top:16px;max-width:520px}
.cfg-field-label{display:block;font-size:13px;font-weight:700;color:#3D5670;margin-bottom:6px}
.cfg-req-star{color:#C0392B;margin-left:2px}
.cfg-field{width:100%;padding:11px 13px;border:1px solid #CFDCE9;border-radius:10px;background:#FFFFFF;font-family:inherit;font-size:14px;color:#0E2A48}
.cfg-field:focus{outline:2px solid #189CCC;outline-offset:1px}
.cfg-field-err{display:block;font-size:12.5px;color:#C0392B;margin-top:5px}
.cfg-field-err:empty{display:none}
.cfg-server-note{display:block;font-size:12.5px;color:#7189A3;margin:12px 0 0}

/* Included features */
.cfg-features-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:-.02em;color:#0E2A48;margin:0 0 18px}
.cfg-features-row{--bs-gutter-x:1rem;--bs-gutter-y:.6rem}
.cfg-feature{display:inline-flex;align-items:flex-start;gap:8px;font-size:13.5px;color:#3D5670}
.cfg-tick{flex:0 0 auto;margin-top:2px}

/* Order strip */
.cfg-order-card{border-radius:22px;background:#FFFFFF;border:1px solid #E4EDF6;box-shadow:0 26px 58px -46px rgba(18,50,88,.8);padding:clamp(24px,2.8vw,36px)}
.cfg-order-row{--bs-gutter-x:2rem;--bs-gutter-y:1.5rem}
.cfg-order-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:-.02em;color:#0E2A48;margin:0 0 10px}
.cfg-total-label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;color:#8598B0;margin-bottom:8px}
.cfg-total-2{font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;color:#0E2A48;margin-bottom:16px}
.cfg-buy{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 22px;border-radius:13px;background:linear-gradient(135deg,#189CCC,#184884);color:#FFFFFF;font-weight:800;font-size:15px;letter-spacing:.02em;box-shadow:0 18px 40px -18px rgba(24,72,132,.95);transition:transform .28s ease}
.cfg-buy:hover{color:#FFFFFF}
.cfg-buy--caps{letter-spacing:.03em}

/* Summary rail */
.cfg-rail{position:sticky;top:96px;display:grid;gap:20px}
.cfg-rail-card{border-radius:20px;background:#FFFFFF;border:1px solid #E4EDF6;box-shadow:0 30px 64px -48px rgba(18,50,88,.85);overflow:hidden}
.cfg-rail-head{padding:20px 24px;border-bottom:1px solid #E9F0F8;background:#FBFDFF}
.cfg-rail-title{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:600;color:#0E2A48;margin:0}
.cfg-rail-body{padding:20px 24px}
.cfg-sum-row{display:flex;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid #F1F5FA;margin-bottom:14px}
.cfg-sum-name{display:block;font-size:14px;font-weight:700;color:#0E2A48}
.cfg-sum-sub{display:block;font-size:12.5px;color:#7189A3;margin-top:3px}
.cfg-sum-price{font-family:'JetBrains Mono',monospace;font-size:13.5px;font-weight:500;color:#0E2A48;white-space:nowrap}
.cfg-sum-price--ok{color:#17A673}
.cfg-total{font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,3.2vw,38px);font-weight:700;letter-spacing:-.03em;color:#0E2A48;line-height:1;margin-bottom:6px}
.cfg-total-note{font-size:12.5px;color:#7189A3;margin-bottom:18px}

/* ------------------------------------------------------------ setup fee
   A one-off charged with the first invoice. WHMCS adds it at checkout
   whether or not it was quoted, so it is shown twice: as its own summary
   line, and as a "following terms" line under the due-today total. Both
   are hidden outright on a term that has no fee. */
.cfg-due-today{font-size:13px;line-height:1.5;color:#0E2A48;font-weight:600;margin:-10px 0 18px;padding:8px 10px;border-radius:8px;background:#EEF7FC}

/* Order-flow card */
.cfg-flow-card{border-radius:20px;background:linear-gradient(160deg,#123258,#166FA8);color:#FFFFFF;padding:24px;box-shadow:0 30px 64px -48px rgba(18,50,88,.9)}
.cfg-flow-kicker{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;color:#8FD8F0;margin-bottom:12px}
.cfg-flow-list{display:grid;gap:12px}
.cfg-flow-item{display:flex;gap:11px;align-items:flex-start}
.cfg-flow-text{font-size:13.5px;line-height:1.55;color:#DCEAF6}

/* Small screens: the rail flows under the steps; the price sits under the
   option name instead of beside it. */
@media (max-width:991.98px){
  .cfg-rail{position:static}
}
@media (max-width:575.98px){
  .cfg-opt{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 16px 14px 46px}
  .cfg-opt-right{text-align:left}
  .cfg-hero{padding-top:96px}
}

/* ======================================================= blocked checkout ===
   A configuration that breaks a limit cannot be built, so it must not look
   buyable: the step at fault is outlined, the notice under it is a real
   notice, and the reason is repeated against the button. */
.cfg-block{display:none;gap:11px;margin:0 0 14px;padding:13px 15px;border:1px solid #F0C2C0;border-left:4px solid #C0392B;border-radius:9px;background:#FDF3F2;color:#7E2B24;text-align:left}
.cfg-block.is-on{display:flex}
.cfg-block-icon{flex:0 0 auto;margin-top:1px;color:#C0392B}
.cfg-block-body{min-width:0}
.cfg-block-title{display:block;font-size:13.5px;font-weight:800}
.cfg-block-list{margin:5px 0 0;padding:0 0 0 17px;font-size:13px;line-height:1.5}
.cfg-block-list li+li{margin-top:3px}
.cfg-block-hint{display:block;margin-top:6px;font-size:12px;opacity:.75}
.cfg-card.is-over{box-shadow:0 0 0 2px #C0392B inset,0 26px 58px -46px rgba(18,50,88,.8)}
.cfg-card.is-over .cfg-step-title{color:#7E2B24}
.cfg-ac-warn{margin:12px 0 0;padding:10px 13px;border:1px solid #F0C2C0;border-radius:9px;background:#FDF3F2;color:#7E2B24;font-size:13px;font-weight:600}
.cfg-ac-warn:empty{display:none}
.cfg-field.is-bad{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.14)}
@keyframes cfgFlash{0%,100%{box-shadow:0 0 0 2px #C0392B inset}50%{box-shadow:0 0 0 6px rgba(192,57,43,.5) inset}}
.cfg-flash{animation:cfgFlash .5s ease-in-out 2}

/* What kind of part: the drive type from the catalogue, beside the name. */
.cfg-opt-tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:100px;background:#E8F2FB;color:#166FA8;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}