/* ============================================================
   Cloudpedia checkout (#211) — two-column layout matching the VPS
   Configure Product page (cloudpedia_vps_cart.css, "Configure Product").

   Loaded by every Child order-form common.tpl because checkout resolves
   per Default Order Form Template, not per product group. Every rule is
   anchored on #order-standard_cart.cpck, the wrapper that only the forked
   templates/orderforms/cloudpedia_cart/checkout.tpl emits, so configure,
   viewcart and domain pages never match.

   Markup contract: .cpck-layout > .cpck-main (.cpck-card sections) plus
   .cpck-summary (aside, sticky). Parent cloudx_cart / standard_cart / cloudx
   stay untouched; each parent rule that fights this file is out-specified
   with the #order-standard_cart.cpck #frmCheckout prefix.

   iCheck wraps every non-.no-icheck input in div.iradio_square-blue /
   div.icheckbox_square-blue, so radios and checkboxes are styled on the
   wrapper (state via .checked), never on the input itself.
   ============================================================ */

/* 1. Canvas. Paint the page body white when the Cpck wrapper is present. */
#main-body.body-background-cloudx.in_shopping_cart:has(#order-standard_cart.cpck) {
  background-color: #ffffff;
}
#order-standard_cart.cpck {
  background: #ffffff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--cp-gray-900);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0 auto;
  max-width: 1360px;
  padding: 22px 24px 40px;
  width: 100%;
}

/* 2. Full-width content: drop the in-content category sidebars. */
#order-standard_cart.cpck .cart-sidebar,
#order-standard_cart.cpck .sidebar-categories-collapsed {
  display: none;
}
#order-standard_cart.cpck .cart-body {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* 3. Header card. */
#order-standard_cart.cpck .header-lined {
  background: var(--cp-surface);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
  margin: 0 0 18px;
  padding: 22px 24px;
}
#order-standard_cart.cpck .header-lined h1 {
  color: var(--cp-gray-900);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

/* 4. Already-registered toggle row. */
#order-standard_cart.cpck .already-registered {
  margin: 0 0 18px;
}
#order-standard_cart.cpck .already-registered p {
  color: var(--cp-gray-600);
  font-size: 14px;
}
#order-standard_cart.cpck .already-registered #btnAlreadyRegistered,
#order-standard_cart.cpck .already-registered #btnNewUserSignup {
  background: var(--cp-surface);
  border: 1px solid var(--cp-border-neutral);
  border-radius: 6px;
  color: var(--cp-gray-900);
  font-size: 14px;
  font-weight: 600;
}
#order-standard_cart.cpck .already-registered #btnAlreadyRegistered:hover,
#order-standard_cart.cpck .already-registered #btnNewUserSignup:hover {
  border-color: var(--cp-primary-300);
}
#order-standard_cart.cpck .already-registered #btnAlreadyRegistered:focus,
#order-standard_cart.cpck .already-registered #btnNewUserSignup:focus {
  border-color: var(--cp-primary-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
  outline: none;
}

/* 5. Two-column grid: fluid main, fixed 352px summary. This deviates from the
   VPS 2fr/1fr grid and its 820px collapse: the app shell already spends about
   285px on the left sidebar, so a 1fr summary falls below the 304px reCAPTCHA
   width at viewports of roughly 820 to 1150px. A fixed 352px column leaves a
   308px content box after the 22px card padding, so the 304px captcha fits
   whole, and the layout collapses at 1199px instead. */
#order-standard_cart.cpck #frmCheckout .cpck-layout {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) 352px;
}
#order-standard_cart.cpck #frmCheckout .cpck-main {
  min-width: 0;
}

/* 6. Cards. The same rule serves <section>, the JS-toggled containers and
   .marketing-email-optin, so hiding a container hides its whole card. */
#order-standard_cart.cpck #frmCheckout .cpck-card,
#order-standard_cart.cpck #frmCheckout .hooks-output-checkout {
  background: var(--cp-surface);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
  margin: 0 0 24px;
  padding: 20px 22px;
}
#order-standard_cart.cpck #frmCheckout .cpck-card-title {
  color: var(--cp-gray-900);
  font-family: inherit;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 16px;
}
#order-standard_cart.cpck #frmCheckout .cpck-card-title small {
  color: var(--cp-gray-600);
  font-size: 13px;
  font-weight: 400;
}
/* Signup groups are plain wrappers: the cards inside carry the chrome. */
#order-standard_cart.cpck #frmCheckout div#containerNewUserSignup {
  background: none;
  box-shadow: none;
  padding: 0;
}
#order-standard_cart.cpck #frmCheckout div#containerNewUserSecurity,
#order-standard_cart.cpck #frmCheckout div#containerExistingUserSignin {
  background: var(--cp-surface);
  padding: 20px 22px;
}
#order-standard_cart.cpck #frmCheckout .cpck-card .field-container {
  background: none;
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}
#order-standard_cart.cpck #frmCheckout .cpck-card .row {
  margin-left: -10px;
  margin-right: -10px;
}
#order-standard_cart.cpck #frmCheckout .cpck-card .row > [class*="col-"] {
  padding-left: 10px;
  padding-right: 10px;
}

/* 7. Account rows: full-bleed inside a flush card. The parent forces a bottom
   hairline on every row; that is the only divider, so no border-top here. */
#order-standard_cart.cpck #frmCheckout .cpck-card.cpck-card-flush {
  overflow: hidden;
  padding: 0;
}
#order-standard_cart.cpck #frmCheckout .cpck-card-flush .cpck-card-title {
  margin: 0;
  padding: 20px 22px 14px;
}
/* The parent draws a forced bottom border on the last row; the negative
   margin lets the flush card clip that one pixel instead of overriding it. */
#order-standard_cart.cpck #frmCheckout .account-select-container {
  background: var(--cp-surface);
  border: 0;
  margin: 0 0 -1px;
}
#order-standard_cart.cpck #frmCheckout .account-select-container > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0;
}
#order-standard_cart.cpck #frmCheckout .account-select-container div.account {
  background: var(--cp-surface);
  border: 0;
  padding: 14px 22px;
  transition: background 0.15s ease;
}
#order-standard_cart.cpck #frmCheckout .account-select-container div.account:hover {
  background: var(--cp-primary-50);
}
#order-standard_cart.cpck #frmCheckout .account-select-container div.account.active {
  background: var(--cp-primary-50);
  box-shadow: inset 3px 0 0 var(--cp-primary-500);
  padding-bottom: 14px;
}
#order-standard_cart.cpck #frmCheckout .account-select-container div.account label {
  color: var(--cp-gray-900);
  cursor: pointer;
  display: block;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  padding-left: 32px;
  position: relative;
  width: 100%;
}
#order-standard_cart.cpck #frmCheckout .account-select-container div.account.active label,
#order-standard_cart.cpck #frmCheckout .account-select-container div.account.active label strong {
  color: var(--cp-primary-500);
}
#order-standard_cart.cpck #frmCheckout .account-select-container div.account label strong {
  display: inline-block;
  font-weight: 600;
  margin-bottom: 4px;
}
#order-standard_cart.cpck #frmCheckout .account-select-container div.account span.small,
#order-standard_cart.cpck #frmCheckout .account-select-container div.account.active span.small {
  color: var(--cp-gray-600);
  font-size: 13px;
}
#order-standard_cart.cpck #frmCheckout .account-select-container div.account label span.label.label-info {
  background: var(--cp-primary-50);
  border: 1px solid var(--cp-primary-300);
  border-radius: 4px;
  color: var(--cp-primary-500);
  font-size: 11px;
  font-weight: 600;
  left: 0;
  margin-left: 6px;
  padding: 2px 8px;
  top: 0;
}
#order-standard_cart.cpck #frmCheckout .account-select-container div.account label .iradio_square-blue {
  left: 0;
  position: absolute;
  top: 1px;
}

/* 8. iCheck radios and checkboxes: kill the hue-rotated sprite, draw tokens. */
#order-standard_cart.cpck .iradio_square-blue,
#order-standard_cart.cpck .icheckbox_square-blue {
  background-color: var(--cp-surface);
  background-image: none;
  border: 2px solid var(--cp-gray-600);
  box-sizing: border-box;
  filter: none;
  height: 18px;
  margin: 0;
  position: relative;
  vertical-align: middle;
  width: 18px;
}
#order-standard_cart.cpck .iradio_square-blue {
  border-radius: 50%;
}
#order-standard_cart.cpck .icheckbox_square-blue {
  border-radius: 4px;
}
#order-standard_cart.cpck .iradio_square-blue.hover,
#order-standard_cart.cpck .icheckbox_square-blue.hover {
  border-color: var(--cp-primary-300);
}
#order-standard_cart.cpck .iradio_square-blue.checked,
#order-standard_cart.cpck .icheckbox_square-blue.checked {
  border-color: var(--cp-primary-500);
}
#order-standard_cart.cpck .iradio_square-blue.checked::after {
  background: var(--cp-primary-500);
  border-radius: 50%;
  content: "";
  inset: 2px;
  position: absolute;
}
#order-standard_cart.cpck .icheckbox_square-blue.checked::after {
  border-bottom: 2px solid var(--cp-primary-500);
  border-right: 2px solid var(--cp-primary-500);
  content: "";
  height: 8px;
  left: 4px;
  position: absolute;
  top: 0;
  transform: rotate(45deg);
  width: 4px;
}
#order-standard_cart.cpck .iradio_square-blue.disabled,
#order-standard_cart.cpck .icheckbox_square-blue.disabled {
  opacity: 0.5;
}
#order-standard_cart.cpck .iradio_square-blue .iCheck-helper,
#order-standard_cart.cpck .icheckbox_square-blue .iCheck-helper {
  cursor: pointer;
}

/* 9. Form controls. Icon-only labels keep the parent prepend-icon geometry,
   re-based on a 40px control. */
#order-standard_cart.cpck #frmCheckout .form-group {
  margin-bottom: 16px;
}
#order-standard_cart.cpck #frmCheckout .form-group label:not(.field-icon) {
  color: var(--cp-gray-900);
  display: block;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 6px;
}
#order-standard_cart.cpck #frmCheckout .prepend-icon .field-icon {
  height: 40px;
  line-height: 40px;
  margin: 0;
}
#order-standard_cart.cpck #frmCheckout .field-icon i {
  color: var(--cp-gray-600);
}
#order-standard_cart.cpck #frmCheckout .field.form-control {
  background-color: var(--cp-surface);
  border: 1px solid var(--cp-border-neutral);
  border-radius: 6px;
  box-shadow: none;
  color: var(--cp-gray-900);
  font-family: inherit;
  font-size: 15px;
  height: 40px;
}
#order-standard_cart.cpck #frmCheckout .field.form-control:hover {
  border-color: var(--cp-primary-300);
}
#order-standard_cart.cpck #frmCheckout .field.form-control:focus {
  border-color: var(--cp-primary-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
  outline: none;
}
#order-standard_cart.cpck #frmCheckout textarea.field.form-control {
  height: auto;
  min-height: 110px;
}
#order-standard_cart.cpck #frmCheckout .field-help-text {
  color: var(--cp-gray-600);
  font-size: 12px;
}
#order-standard_cart.cpck #frmCheckout .cpck-card > p.small {
  color: var(--cp-gray-600);
  font-family: inherit;
  font-size: 14px;
}
#order-standard_cart.cpck #frmCheckout .generate-password,
#order-standard_cart.cpck #frmCheckout #btnExistingLogin {
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
}
#order-standard_cart.cpck #frmCheckout .generate-password {
  background: var(--cp-surface);
  border: 1px solid var(--cp-border-neutral);
  color: var(--cp-gray-900);
}
#order-standard_cart.cpck #frmCheckout .generate-password:hover {
  border-color: var(--cp-primary-300);
}
#order-standard_cart.cpck #frmCheckout #btnExistingLogin {
  background: var(--cp-primary-500);
  border: 1px solid var(--cp-primary-500);
  color: var(--cp-surface);
}
#order-standard_cart.cpck #frmCheckout #btnExistingLogin:hover {
  background: var(--cp-primary-600);
  border-color: var(--cp-primary-600);
}

/* 10. Payment gateways: hidden-radio option cards, like the VPS billing cycle. */
#order-standard_cart.cpck #frmCheckout #paymentGatewaysContainer {
  background: none;
  border: 0;
  box-shadow: none;
  margin: 0 0 16px;
  padding: 0;
}
#order-standard_cart.cpck #frmCheckout #paymentGatewaysContainer p.small {
  color: var(--cp-gray-600);
  font-family: inherit;
  font-size: 14px;
  margin: 0 0 12px;
}
#order-standard_cart.cpck #frmCheckout #paymentGatewaysContainer div.text-center {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  text-align: left;
}
#order-standard_cart.cpck #frmCheckout #paymentGatewaysContainer div.text-center label.radio-inline {
  align-items: center;
  background: var(--cp-surface);
  border: 1px solid var(--cp-border-neutral);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
  color: var(--cp-gray-900);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  justify-content: center;
  line-height: 1.3;
  margin: 0;
  min-height: 64px;
  padding: 10px 12px;
  position: relative;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  width: auto;
}
#order-standard_cart.cpck #frmCheckout #paymentGatewaysContainer div.text-center label.radio-inline:hover {
  border-color: var(--cp-primary-300);
}
#order-standard_cart.cpck #frmCheckout #paymentGatewaysContainer div.text-center label.radio-inline:focus-within {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
#order-standard_cart.cpck #frmCheckout #paymentGatewaysContainer div.text-center label.radio-inline:has(.checked),
#order-standard_cart.cpck #frmCheckout #paymentGatewaysContainer div.text-center label.radio-inline:has(input:checked) {
  background: var(--cp-primary-50);
  border-color: var(--cp-primary-300);
  box-shadow: 0 0 0 1px var(--cp-primary-300);
  color: var(--cp-primary-500);
}
/* Visually hide the iCheck wrapper but keep the whole card clickable. */
#order-standard_cart.cpck #frmCheckout #paymentGatewaysContainer div.text-center label.radio-inline .iradio_square-blue {
  background: none;
  border: 0;
  border-radius: 0;
  height: 100%;
  inset: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
}
#order-standard_cart.cpck #frmCheckout #paymentGatewaysContainer div.text-center label.radio-inline .iradio_square-blue::after {
  content: none;
}
#order-standard_cart.cpck #frmCheckout .gateway-errors {
  border-radius: 6px;
  margin: 0 0 16px;
}

/* 11. Credit-card fields sit inside the payment card without their own chrome. */
#order-standard_cart.cpck #frmCheckout .cc-input-container {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}
#order-standard_cart.cpck #frmCheckout .cc-input-container label {
  font-family: inherit;
  line-height: 1.4;
}
#order-standard_cart.cpck #frmCheckout .cc-input-container label.radio-inline {
  color: var(--cp-gray-900);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 10px;
  padding-left: 28px;
}
#order-standard_cart.cpck #frmCheckout .cc-input-container label.radio-inline .iradio_square-blue {
  left: 0;
  position: absolute;
  top: 1px;
}
#order-standard_cart.cpck #frmCheckout .cc-input-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 12. Marketing opt-in card text (toggle-switch internals untouched). */
#order-standard_cart.cpck #frmCheckout .marketing-email-optin h4 {
  color: var(--cp-gray-900);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
}
#order-standard_cart.cpck #frmCheckout .marketing-email-optin p {
  color: var(--cp-gray-600);
  font-family: inherit;
  margin: 0 0 10px;
}

/* 13. Summary column. The top offset is an estimate: the sticky Cloudpedia
   header is about 80px tall plus a 16px gap. Pending measurement on staging;
   sidebar.css does not set the header height. */
#order-standard_cart.cpck #frmCheckout .cpck-summary {
  align-self: start;
  min-width: 0;
  position: sticky;
  top: 96px;
}
#order-standard_cart.cpck #frmCheckout .cpck-summary-card {
  background: var(--cp-surface);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
  padding: 20px 22px;
}
#order-standard_cart.cpck #frmCheckout .cpck-summary-title {
  color: var(--cp-gray-900);
  font-family: inherit;
  font-size: 21px;
  font-weight: 700;
  margin: 0 0 12px;
}
#order-standard_cart.cpck #frmCheckout .cpck-total {
  align-items: baseline;
  border-bottom: 1px solid var(--cp-border-neutral);
  border-top: 1px solid var(--cp-border-neutral);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 0 0 16px;
  padding: 14px 0;
}
#order-standard_cart.cpck #frmCheckout .cpck-total-label {
  color: var(--cp-gray-600);
  font-size: 14px;
  font-weight: 600;
}
#order-standard_cart.cpck #frmCheckout .cpck-total #totalCartPrice {
  color: var(--cp-gray-900);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
#order-standard_cart.cpck #frmCheckout #applyCreditContainer {
  background: none;
  border: 0;
  box-shadow: none;
  margin: 0 0 16px;
  padding: 0;
}
#order-standard_cart.cpck #frmCheckout #applyCreditContainer p {
  color: var(--cp-gray-600);
  font-size: 14px;
  margin: 0 0 10px;
}
#order-standard_cart.cpck #frmCheckout #applyCreditContainer label.radio {
  align-items: flex-start;
  color: var(--cp-gray-900);
  display: flex;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  gap: 8px;
  line-height: 1.4;
  margin: 0 0 8px;
}
#order-standard_cart.cpck #frmCheckout #applyCreditContainer label.radio .iradio_square-blue {
  flex: 0 0 auto;
  margin: 1px 0 0;
}
#order-standard_cart.cpck #frmCheckout .cpck-actions > p {
  color: var(--cp-gray-600);
  font-size: 14px;
  margin: 0 0 14px;
  text-align: left;
}
#order-standard_cart.cpck #frmCheckout .cpck-actions label.checkbox-inline {
  align-items: flex-start;
  color: var(--cp-gray-900);
  display: flex;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  gap: 8px;
  line-height: 1.4;
  margin: 0;
  padding-left: 0;
}
#order-standard_cart.cpck #frmCheckout .cpck-actions label.checkbox-inline .icheckbox_square-blue {
  flex: 0 0 auto;
  margin: 1px 0 0;
}
#order-standard_cart.cpck #frmCheckout .cpck-actions .margin-bottom {
  margin: 0 0 16px;
  text-align: left;
}
/* Captcha wrapper: the include renders a Bootstrap .row (-15px side margins)
   and twenty-one sets #google-recaptcha-domainchecker to 304px with a
   left-anchored scale/padding at small widths. Zero the margins and padding,
   and keep twenty-one's mobile scale but pivot it on the centre so the shrunk
   widget stays centred. The widget keeps its 304px layout box (flex: none, no
   max-width) because the iframe inside is a fixed 304px; centred flex overflows
   equally on both sides and the scaled result fits the card. */
#order-standard_cart.cpck #frmCheckout .cpck-actions .captcha-cloudx-theme {
  display: flex;
  justify-content: center;
  margin: 0 0 14px;
  max-width: 100%;
  padding: 0;
  width: 100%;
}
#order-standard_cart.cpck #frmCheckout .cpck-actions .captcha-cloudx-theme .recaptcha-container {
  flex: none;
  margin: 0;
  padding: 0;
  transform-origin: 50% 0;
}
#order-standard_cart.cpck #frmCheckout #btnCompleteOrder {
  align-items: center;
  background: var(--cp-primary-500);
  border: 1px solid var(--cp-primary-500);
  border-radius: 6px;
  color: var(--cp-surface);
  display: inline-flex;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
  min-height: 44px;
  padding: 10px 16px;
  width: 100%;
}
#order-standard_cart.cpck #frmCheckout #btnCompleteOrder:hover,
#order-standard_cart.cpck #frmCheckout #btnCompleteOrder:focus {
  background: var(--cp-primary-600);
  border-color: var(--cp-primary-600);
  color: var(--cp-surface);
}
#order-standard_cart.cpck #frmCheckout #btnCompleteOrder:focus {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
  outline: none;
}
#order-standard_cart.cpck #frmCheckout #btnCompleteOrder:disabled,
#order-standard_cart.cpck #frmCheckout #btnCompleteOrder.disabled {
  cursor: wait;
  opacity: 0.75;
}

/* 14. Security message: help-note, full width below the layout. */
#order-standard_cart.cpck .checkout-security-msg {
  background: var(--cp-primary-50);
  border: 0;
  border-left: 3px solid var(--cp-primary-500);
  border-radius: 6px;
  color: var(--cp-gray-900);
  margin: 24px 0 0;
  padding: 14px 18px;
}

/* 15. Responsive. */
@media (max-width: 1199px) {
  #order-standard_cart.cpck #frmCheckout .cpck-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  #order-standard_cart.cpck #frmCheckout .cpck-summary {
    position: static;
  }
}
@media (max-width: 640px) {
  #order-standard_cart.cpck {
    padding: 16px 14px 32px;
  }
  #order-standard_cart.cpck .header-lined h1 {
    font-size: 26px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #order-standard_cart.cpck #frmCheckout #paymentGatewaysContainer div.text-center label.radio-inline,
  #order-standard_cart.cpck #frmCheckout .account-select-container div.account {
    transition: none;
  }
}