/*!
 * Everon fixes for the Hostina order form.
 *
 * Loaded last, after custom-style.css and custom.css, so these win without
 * any vendor file being edited - a vendor update re-supplies its own files
 * and these still apply on top.
 *
 * This is NOT a restyle. The theme ships monochrome already, which matches
 * Everon; everything here is a defect fix.
 */

/* ------------------------------------------------------------------ *
 * 1. Domain search dropdowns were cut off by their own card
 *
 * "Include TLDs" and "Maximum Length" open a Bootstrap .dropdown-menu
 * inside .hostique-product-domain-option, which sets overflow:hidden. The
 * menu was clipped at the card edge, so options below the first one or two
 * were unreachable - the control looked broken rather than styled.
 *
 * The clip cannot simply be removed: it is what keeps the card's left
 * accent bar inside its 26px rounded corners. So it is released only while
 * a menu is actually open, via :has(), and restored the moment it closes.
 * ------------------------------------------------------------------ */body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-option:has(.dropdown-menu.show),
body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-split:has(.dropdown-menu.show),
body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-advanced-row:has(.dropdown-menu.show),
body.whmcs-dashboard-body #order-standard_cart .hostique-domain-search-shell:has(.dropdown-menu.show),
body.whmcs-dashboard-body #order-standard_cart .hostique-domain-search-advanced__actions:has(.dropdown-menu.show) {
  overflow: visible;
}

/* An open menu must also sit above the cards that follow it, or it is
   released from the clip only to be painted underneath the next card. */
body.whmcs-dashboard-body #order-standard_cart .dropdown-menu.show {
  z-index: 1060;
}

/* The menu itself was also scrolling inside a squeezed box. */
body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-option .dropdown-menu.show {
  max-height: 320px;
  overflow-y: auto;
}

/* ------------------------------------------------------------------ *
 * 2. The AI domain search block was never styled
 *
 * The theme has no rules for the textarea, the two multiselects, or the
 * Safe Search checkbox, so they fall back to browser defaults: no padding
 * and controls that do not share a baseline.
 * ------------------------------------------------------------------ */

/* One row, wrapping on narrow screens. align-items:center puts every
   control on a shared vertical centre. */body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-advanced-row,
body.whmcs-dashboard-body #order-standard_cart .hostique-domain-search-advanced__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

/* The prompt field's RESTING border.
 *
 * The vendor sets it to var(--border-light), which resolves to #e5e5e5 -
 * drawn, but invisible against a white field, so the box does not read as
 * an input until it is focused. That declaration carries !important on a
 * chain of one id plus four classes, so an ordinary override loses however
 * specific it is; !important here is the only way to win it.
 *
 * The FOCUSED state is deliberately untouched - the vendor's focus style is
 * already right, so there is no :focus rule for this field anywhere below. */
body.whmcs-dashboard-body #order-standard_cart .domain-checker-advanced textarea,
body.whmcs-dashboard-body #order-standard_cart textarea#message {
  width: 100%;
  min-height: 92px;
  padding: 14px 16px !important;
  border: 1px solid #b9c0ca !important;
  border-radius: 14px !important;
  background: #ffffff;
  line-height: 1.5;
  resize: vertical;
}

body.whmcs-dashboard-body #order-standard_cart .domain-checker-advanced textarea::placeholder,
body.whmcs-dashboard-body #order-standard_cart textarea#message::placeholder {
  color: #8a94a6;
}

/* Every direct child of the row gets the same height, so the checkbox sits
   on the same centre line as the dropdowns rather than riding high. WHMCS
   turns each select into a .btn-group wrapping a button, so the height has
   to be set on the wrapper as well as the control - setting it only on the
   button leaves the wrapper free to differ. */body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-advanced-row > *,
body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-advanced-row .btn-group,
body.whmcs-dashboard-body #order-standard_cart .hostique-domain-search-advanced__actions > *,
body.whmcs-dashboard-body #order-standard_cart .hostique-domain-search-advanced__actions .btn-group {
  min-height: 42px;
  margin: 0;
}

/* The two dropdowns. Padding is set on whatever WHMCS produces and on a
   plain select too, in case the enhancing script has not run yet. */body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-advanced-row select,
body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-advanced-row .multiselect,
body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-advanced-row .btn-group > .btn,
body.whmcs-dashboard-body #order-standard_cart .hostique-domain-search-advanced__actions select,
body.whmcs-dashboard-body #order-standard_cart .hostique-domain-search-advanced__actions .multiselect,
body.whmcs-dashboard-body #order-standard_cart .hostique-domain-search-advanced__actions .btn-group > .btn {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid #b9c0ca;
  border-radius: 12px;
  background: #ffffff;
  color: #142033;
  font-size: .92rem;
  line-height: 1.4;
}

/* The caret sits hard against the label without this. */body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-advanced-row .multiselect .caret,
body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-advanced-row .btn-group > .btn .caret,
body.whmcs-dashboard-body #order-standard_cart .hostique-domain-search-advanced__actions .multiselect .caret,
body.whmcs-dashboard-body #order-standard_cart .hostique-domain-search-advanced__actions .btn-group > .btn .caret {
  margin-left: 8px;
}body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-advanced-row select:hover,
body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-advanced-row .multiselect:hover,
body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-advanced-row .btn-group > .btn:hover,
body.whmcs-dashboard-body #order-standard_cart .hostique-domain-search-advanced__actions select:hover,
body.whmcs-dashboard-body #order-standard_cart .hostique-domain-search-advanced__actions .multiselect:hover,
body.whmcs-dashboard-body #order-standard_cart .hostique-domain-search-advanced__actions .btn-group > .btn:hover {
  border-color: #000000;
}

/* Safe Search, matched to the dropdowns so the three read as one set. */body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-checkbox,
body.whmcs-dashboard-body #order-standard_cart .hostique-domain-search-advanced__safe {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid #b9c0ca;
  border-radius: 12px;
  background: #ffffff;
  font-size: .92rem;
  line-height: 1.4;
  cursor: pointer;
}body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-checkbox input[type="checkbox"],
body.whmcs-dashboard-body #order-standard_cart .hostique-domain-search-advanced__safe input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  flex: none;
}

/* Without this the label text carries the browser's default line-height and
   pushes itself off the row's centre. */body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-checkbox span,
body.whmcs-dashboard-body #order-standard_cart .hostique-domain-search-advanced__safe span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* ------------------------------------------------------------------ *
 * 3. The Search button restored to the AI branch
 *
 * The vendor's AI search block has no submit control - see the note in
 * configureproductdomain.tpl. The button added there is pushed to the far
 * right of the control row so the line reads left-to-right as settings
 * first, action last:
 *
 *   [Include TLDs] [Maximum Length] [Safe Search] ......... [Check *]
 * ------------------------------------------------------------------ */body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-search-btn,
body.whmcs-dashboard-body #order-standard_cart .domain-check-availability {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 22px;
  border: 1px solid #000000;
  border-radius: 12px;
  background: #000000;
  color: #ffffff;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-search-btn:hover,
body.whmcs-dashboard-body #order-standard_cart .domain-check-availability:hover {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #ffffff;
}

/* base.js disables this button while a lookup is running. Without a
   disabled style it still looks clickable mid-search. */body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-search-btn:disabled,
body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-search-btn.disabled,
body.whmcs-dashboard-body #order-standard_cart .domain-check-availability:disabled,
body.whmcs-dashboard-body #order-standard_cart .domain-check-availability.disabled {
  opacity: .55;
  cursor: default;
}

/* On a narrow screen the row wraps; the button should then take the full
   width rather than sit alone against the right edge. */
@media (max-width: 575.98px) {body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-search-btn,
body.whmcs-dashboard-body #order-standard_cart .domain-check-availability {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------------------------------------ *
 * Inline icon size after the Phosphor conversion
 *
 * iconify-icon renders at 1em, and a Phosphor glyph carries more internal
 * padding than the Font Awesome one it replaced - so the drawn shape fills
 * less of that em box. Swapping 692 icons therefore made every icon that
 * sits inline with text optically smaller, even though nothing about the
 * CSS changed.
 *
 * The topbar controls escaped it because their container is a fixed 2.5rem
 * with the icon centred in it - there was room, so nobody noticed. That is
 * why those three looked right while the search magnifier, the button
 * arrows, the card markers and the footnote shields all looked shrunken.
 *
 * One rule, deliberately low specificity: any icon that already has an
 * explicit size from a more specific selector - the sidebar nav, the table
 * sort arrows, anything given width/height inline - keeps it and is not
 * touched. This only reaches the icons that were relying on 1em, which are
 * exactly the ones that came out too small.
 * ------------------------------------------------------------------ */
body.whmcs-dashboard-body iconify-icon {
  font-size: 1.2em;
  /* Nudges the glyph onto the text baseline in inline contexts. Flex
     containers ignore vertical-align, so centred layouts are unaffected. */
  vertical-align: -0.14em;
}

/* The topbar controls were already the right size. Left at 1em so this
   rule cannot make the one group that was correct too large. */
body.whmcs-dashboard-body .hostique-order-control iconify-icon,
body.whmcs-dashboard-body .hostique-order-topbar__back iconify-icon {
  font-size: 1em;
  vertical-align: middle;
}

/* ------------------------------------------------------------------ *
 * 4. Domain add-on cards: checkbox on the same row as its label
 *
 * The vendor absolutely positions the checkbox into a corner of the card,
 * which detaches it from the title it controls. The control and the thing
 * it switches read as two unrelated items, and there is nothing tying the
 * tick to the words "DNS Management".
 *
 * Laid out as a two-column grid instead: checkbox, then title, on one row -
 * with the description and price aligned under the title rather than under
 * the checkbox. The whole card is already a <label>, so clicking anywhere
 * still toggles it; this only changes where things sit.
 * ------------------------------------------------------------------ */
body.whmcs-dashboard-body #order-standard_cart.order-shell--confdomains-modern .hostique-confdomains-addon-card {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 6px;
  align-items: start;
}

body.whmcs-dashboard-body #order-standard_cart.order-shell--confdomains-modern .hostique-confdomains-addon-card input {
  position: static;
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  align-self: center;
}

body.whmcs-dashboard-body #order-standard_cart.order-shell--confdomains-modern .hostique-confdomains-addon-card__title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  /* The vendor reserved this space for the corner checkbox. It is not in
     the corner any more, so the title can use the full width. */
  padding-inline-end: 0;
}

body.whmcs-dashboard-body #order-standard_cart.order-shell--confdomains-modern .hostique-confdomains-addon-card__copy {
  grid-column: 2;
  grid-row: 2;
}

body.whmcs-dashboard-body #order-standard_cart.order-shell--confdomains-modern .hostique-confdomains-addon-card__price {
  grid-column: 2;
  grid-row: 3;
}

/* ------------------------------------------------------------------ *
 * 5. Per-domain Remove on the configuration step
 *
 * The header row is a five column grid whose last column is 24px - room
 * for nothing but a bare glyph. The Remove control carries an icon AND a
 * label, deliberately matching the cart page so it reads the same in both
 * places, so that column has to size to its content.
 *
 * Written to match the vendor's own selector depth. This file loads after
 * theirs, so equal specificity is enough and !important is not needed.
 * ------------------------------------------------------------------ */
body.whmcs-dashboard-body #order-standard_cart.order-shell--confdomains-modern .hostique-confdomains-domain-card__main {
  grid-template-columns: 52px minmax(0, 1.7fr) minmax(120px, 0.8fr) minmax(200px, 1fr) auto;
}

body.whmcs-dashboard-body #order-standard_cart.order-shell--confdomains-modern .hostique-confdomains-domain-card__remove {
  /* -2 / -1 spans the LAST COLUMN. Writing grid-column: -1 sets only the
     start line to the final grid line, which places the item in an
     implicit track created beyond the defined columns - outside the
     card padding entirely. That is what pushed the button past the
     card edge and clipped the label. A negative pair is still layout
     agnostic, so the narrower grids below need no separate placement. */
  grid-column: -2 / -1;
  justify-self: end;
  align-self: center;
}

body.whmcs-dashboard-body #order-standard_cart.order-shell--confdomains-modern .hostique-confdomains-domain-card__remove .btn-remove-from-cart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Once the grid collapses the last column is no longer a spare edge - it
   is the content column - so the control moves to its own row and keeps
   to the right rather than squeezing the domain name. */
@media (max-width: 991.98px) {
  body.whmcs-dashboard-body #order-standard_cart.order-shell--confdomains-modern .hostique-confdomains-domain-card__remove {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

/* ------------------------------------------------------------------ *
 * 6. The remove-confirmation modal sat UNDER its own backdrop
 *
 * The vendor's stylesheet carries two generations of rules for this modal
 * and they contradict each other:
 *
 *   #modalRemoveItem              z-index 4000   (dialog 4001, content 4002)
 *   .hostique-cart-modal-backdrop z-index 3990   (pairs with the above)
 *   ...further down the same file...
 *   #modalRemoveItem              z-index 1055   (leftover, and it wins)
 *
 * Equal specificity, so the later rule takes it. That leaves the modal at
 * 1055 sitting beneath a backdrop at 3990 - the dark sheet lands on top,
 * and nothing in the dialog can be clicked.
 *
 * It only appeared to work on the cart page because that page has its own
 * scoped pair (.order-shell--cart .modal 1052 / .modal-backdrop 1050). Any
 * other page showing this modal was already broken; adding Remove to the
 * domains step is what made it visible.
 *
 * Restores the vendor's own newer intent - the 4000 series - and puts every
 * backdrop below it, rather than inventing a third scheme.
 * ------------------------------------------------------------------ */
body.whmcs-dashboard-body #modalRemoveItem,
body.whmcs-dashboard-body #modalEmptyCart {
  z-index: 4000 !important;
}

body.whmcs-dashboard-body #modalRemoveItem .modal-dialog,
body.whmcs-dashboard-body #modalEmptyCart .modal-dialog {
  z-index: 4001 !important;
}

body.whmcs-dashboard-body #modalRemoveItem .modal-content,
body.whmcs-dashboard-body #modalEmptyCart .modal-content {
  z-index: 4002 !important;
}

/* Every backdrop, whichever class Bootstrap or the theme gives it, stays
   underneath. Without this the plain .modal-backdrop would still be free
   to outrank the dialog on a page that does not scope it. */
body.whmcs-dashboard-body .modal-backdrop,
body.whmcs-dashboard-body .hostique-cart-modal-backdrop {
  z-index: 3990 !important;
}

/* ------------------------------------------------------------------ *
 * 7. Remove button was overflowing the card edge
 *
 * The header grid's minimum column widths, plus the button, added up to
 * more than the card's content box - so the last column was pushed past
 * the padding and the label clipped at the card border. Trimmed the mins
 * so the row fits, and capped the control so it can never spill again.
 * ------------------------------------------------------------------ */
body.whmcs-dashboard-body #order-standard_cart.order-shell--confdomains-modern .hostique-confdomains-domain-card__main {
  grid-template-columns: 52px minmax(0, 1.6fr) minmax(96px, 0.7fr) minmax(150px, 0.9fr) auto;
}

/* ------------------------------------------------------------------
 * 8. The same grid was flattening the domain name on phones
 *
 * The rule above has no media query, and this file loads after
 * custom.css, so it also overrode the two-column mobile layout
 * custom.css defines at 767.98px.
 *
 * The consequence only shows on a narrow screen. Those four minimum
 * widths - 52 + 96 + 150 + the button - already exceed a 412px phone, so
 * the flexible column holding the domain was squeezed to almost nothing.
 * The name then wrapped at every character and rendered as a vertical
 * column of letters: Y V X H . N E T.
 *
 * Restoring the two-column layout below 768px gives the name the width it
 * needs. The desktop fix above is untouched.
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  body.whmcs-dashboard-body #order-standard_cart.order-shell--confdomains-modern .hostique-confdomains-domain-card__main {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
  }

  /* Only break a domain when it genuinely cannot fit, rather than at any
     character. With the column back to a usable width this almost never
     fires, but a very long name should wrap, not stack. */
  body.whmcs-dashboard-body #order-standard_cart.order-shell--confdomains-modern .hostique-confdomains-domain-card__domain strong {
    word-break: normal;
    overflow-wrap: anywhere;
  }
}

body.whmcs-dashboard-body #order-standard_cart.order-shell--confdomains-modern .hostique-confdomains-domain-card__remove {
  max-width: 100%;
  overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * 8. Add-on cards were 10px narrower than their own grid track
 *
 * Measured, not guessed. The grid is repeat(auto-fit, minmax(220px, 1fr))
 * with gap:14px, so each card should fill its track - but every card also
 * carries margin-right:10px. Spacing was therefore being applied twice,
 * and the last card stopped 10px short of the container:
 *
 *   track   373px          card    363px
 *   grid right edge 1366   last card right edge 1356
 *
 * That 10px is why the Remove button looked misaligned. The button was
 * correct - flush with the grid - and the cards below it were the ones
 * inset, so the eye read the button as sticking out.
 *
 * Dropping the margin lets gap alone control spacing, which is what a grid
 * gap is for. Verified in the browser against the real page before
 * shipping: last card right edge moves 1356 -> 1366 and the two line up.
 * ------------------------------------------------------------------ */
body.whmcs-dashboard-body #order-standard_cart.order-shell--confdomains-modern .hostique-confdomains-addon-card {
  margin-right: 0;
}

/* ------------------------------------------------------------------ *
 * 9. Promotion code: a disclosure instead of a one-tab tab strip
 *
 * A visible, empty promo box is a known cause of checkout abandonment -
 * it tells everyone a discount exists and sends people off to hunt for a
 * code, and a share of them do not come back. A quiet link serves the
 * person who already has one without prompting the person who does not.
 *
 * Styled as a link rather than a button on purpose: it reveals a form, it
 * does not perform an action, and the old control's chief failing was
 * looking like a button while doing nothing.
 * ------------------------------------------------------------------ */
body.whmcs-dashboard-body #order-standard_cart .hostique-promo-disclosure {
  border: 0;
}

body.whmcs-dashboard-body #order-standard_cart .hostique-promo-disclosure__summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  color: #142033;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* Both are needed: WebKit uses the pseudo-element, the rest honour
   list-style on the summary itself. */
body.whmcs-dashboard-body #order-standard_cart .hostique-promo-disclosure__summary::-webkit-details-marker {
  display: none;
}

body.whmcs-dashboard-body #order-standard_cart .hostique-promo-disclosure__summary:hover {
  color: #000000;
  text-decoration: underline;
}

body.whmcs-dashboard-body #order-standard_cart .hostique-promo-disclosure__summary:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 3px;
  border-radius: 4px;
}

/* A caret that follows the open state, so the control reads as expandable
   before it is touched. */
body.whmcs-dashboard-body #order-standard_cart .hostique-promo-disclosure__summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}

body.whmcs-dashboard-body #order-standard_cart .hostique-promo-disclosure[open] .hostique-promo-disclosure__summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

body.whmcs-dashboard-body #order-standard_cart .hostique-promo-disclosure__body {
  padding-top: 14px;
}

/* ------------------------------------------------------------------ *
 * 10. The promo field marks itself when its code was rejected
 *
 * An inline error message used to print here as well. It was removed:
 * WHMCS already puts the same text in $errormessage at the top of the
 * cart, so it appeared twice, and .order-promo-inline is a two-column
 * grid - field, then button - so the message took the button's cell and
 * knocked Apply down into a second row every time a code failed. A
 * control that moves when you get something wrong is worse than a message
 * that sits a little further away.
 *
 * What is left is the red border: it ties the message at the top to the
 * field that caused it, and changes no layout.
 * ------------------------------------------------------------------ */
body.whmcs-dashboard-body #order-standard_cart #inputPromotionCode.is-invalid {
  border-color: #b91c1c !important;
}

body.whmcs-dashboard-body #order-standard_cart #inputPromotionCode.is-invalid:focus {
  border-color: #b91c1c !important;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, .12) !important;
}

/* ------------------------------------------------------------------ *
 * 11. The years dropdown painted behind the cards below it
 *
 * custom.css lifts a cart card on hover:
 *
 *   .order-item-card:hover, .view-cart-items > .item:hover {
 *     transform: translateY(-1px) !important;
 *   }
 *
 * A transform creates a stacking context. You cannot click the dropdown
 * without hovering the card it sits in, so by the time the menu opens the
 * card is a stacking context and the menu's z-index: 1060 no longer means
 * anything outside it - it can rise to the top of the card and no further.
 * Every later sibling card then paints over it.
 *
 * Measured on a capture of the live page: with the hover transform applied
 * the menu is covered; with transform: none it is on top at every sample
 * point. Headless has no pointer, which is why this looked fine until the
 * hover state was reproduced deliberately.
 *
 * Drop the lift only while a menu inside the card is open, and raise that
 * card above its siblings. The hover lift is kept everywhere else.
 * ------------------------------------------------------------------ */
body.whmcs-dashboard-body #order-standard_cart.order-shell--cart .order-item-card:hover:has(.dropdown.show),
body.whmcs-dashboard-body #order-standard_cart.order-shell--cart .view-cart-items > .item:hover:has(.dropdown.show) {
  transform: none !important;
}

body.whmcs-dashboard-body #order-standard_cart.order-shell--cart .order-item-card:has(.dropdown.show),
body.whmcs-dashboard-body #order-standard_cart.order-shell--cart .view-cart-items > .item:has(.dropdown.show) {
  position: relative !important;
  z-index: 30 !important;
}

/* ------------------------------------------------------------------ *
 * 12. Empty Cart sat in a second, redundant border
 *
 * custom-style.css groups .empty-cart in with the genuine cards:
 *
 *   .card, .panel, .order-summary, .product-info, .view-cart-tabs,
 *   .empty-cart, .domain-selection-options {
 *     background: var(--saas-surface) !important;
 *     border: 1px solid var(--saas-border) !important;
 *     border-radius: var(--saas-radius-lg) !important;
 *   }
 *
 * The other six are cards. .empty-cart is just the wrapper that aligns one
 * button, and custom.css already styles that button as a full-width
 * outlined control - so the page draws a white 12px-radius bordered box
 * around a white 14px-radius bordered box. Measured: wrapper 887px wide
 * with padding 18px 0 0, button 885px inside it, both bordered - which is
 * also why the gap looked uneven, the padding only exists on the top edge.
 *
 * Take the card treatment off the wrapper rather than editing the shared
 * rule, whose other six selectors are correct.
 * ------------------------------------------------------------------ */
body.whmcs-dashboard-body #order-standard_cart .empty-cart {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* ------------------------------------------------------------------ *
 * 13. Billing cycle / config options: a real dropdown, not a raw select
 *
 * Paired with the block of the same name in everon-fixes.js, which builds
 * div.dropdown > button.dropdown-toggle + ul.dropdown-menu from the
 * select's own options and hides the select. See that file for why this
 * cannot be done in CSS alone: a native select's option list is painted
 * by the browser, so the OS list with its blue highlight is not reachable
 * from a stylesheet at all.
 *
 * The select is hidden only once the script has actually replaced it, so
 * a failure to load leaves the native control in place and working.
 * ------------------------------------------------------------------ */
body.whmcs-dashboard-body #order-standard_cart .hostique-configure-select--replaced {
  display: none !important;
}

body.whmcs-dashboard-body #order-standard_cart .hostique-select {
  width: 100%;
}

body.whmcs-dashboard-body #order-standard_cart .hostique-select__toggle {
  position: relative;
  display: flex !important;
  align-items: center;
  width: 100%;
  /* Metrics come from the select this replaced - see adoptMetrics() in
     everon-fixes.js. The fallbacks are the confproduct look, used if the
     script could not measure. The right padding is what keeps the chevron
     clear of the edge; the left is whatever the field itself used, which
     on checkout is 42px to clear the .prepend-icon label. */
  min-height: var(--everon-select-height, 52px) !important;
  height: auto !important;
  padding: 10px 46px 10px var(--everon-select-pad-left, 16px) !important;
  border: 1px solid var(--everon-select-border, #e3eaf1) !important;
  border-radius: var(--everon-select-radius, 14px) !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #102038 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  text-align: left !important;
  white-space: normal;
}

/* A theme rule for .btn inside the cart sets border-color with more
   specificity than the shorthand above, so the adopted colour needs the
   wrapper class to win. Measured: without this the toggle came out
   #e0e0e0 while the field beside it is #eaeaea. */
body.whmcs-dashboard-body #order-standard_cart .hostique-select .hostique-select__toggle {
  border-color: var(--everon-select-border, #e3eaf1) !important;
}

body.whmcs-dashboard-body #order-standard_cart .hostique-select__toggle:hover,
body.whmcs-dashboard-body #order-standard_cart .hostique-select.show .hostique-select__toggle {
  border-color: rgba(16, 32, 56, .22) !important;
}

body.whmcs-dashboard-body #order-standard_cart .hostique-select__toggle:focus-visible {
  outline: 2px solid rgba(16, 32, 56, .35);
  outline-offset: 2px;
}

/* Bootstrap draws its own triangle on .dropdown-toggle::after. Replace it
   with a chevron, drawn from borders so it needs no icon font or asset,
   and inset from the right edge rather than flush against it. */
body.whmcs-dashboard-body #order-standard_cart .hostique-select__toggle::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 16px;
  width: 9px;
  height: 9px;
  margin: 0;
  border: 0 solid #64748b;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-radius: 1px;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .15s ease;
  pointer-events: none;
}

body.whmcs-dashboard-body #order-standard_cart .hostique-select.show .hostique-select__toggle::after {
  transform: translateY(-25%) rotate(-135deg);
}

body.whmcs-dashboard-body #order-standard_cart .hostique-select__label {
  flex: 1 1 auto;
  min-width: 0;
}

body.whmcs-dashboard-body #order-standard_cart .hostique-select__menu {
  display: none;
  width: 100%;
  min-width: 100%;
  margin-top: 6px;
  padding: 6px;
  max-height: 288px;
  overflow-y: auto;
  border: 1px solid var(--everon-select-border, #e3eaf1);
  border-radius: var(--everon-select-radius, 14px);
  background: #fff;
  box-shadow: 0 18px 40px rgba(16, 32, 56, .12);
  z-index: 1060;
}

body.whmcs-dashboard-body #order-standard_cart .hostique-select__menu.show {
  display: block;
}

body.whmcs-dashboard-body #order-standard_cart .hostique-select .dropdown-item {
  list-style: none;
  padding: 0;
  background: none;
}

body.whmcs-dashboard-body #order-standard_cart .hostique-select .dropdown-item > a {
  display: block;
  padding: 11px 12px;
  border-radius: 10px;
  color: #102038 !important;
  text-decoration: none !important;
  font-size: 0.94rem;
  font-weight: 600;
}

body.whmcs-dashboard-body #order-standard_cart .hostique-select .dropdown-item > a:hover,
body.whmcs-dashboard-body #order-standard_cart .hostique-select .dropdown-item > a:focus-visible {
  background: rgba(16, 32, 56, .06);
}

body.whmcs-dashboard-body #order-standard_cart .hostique-select .dropdown-item > a.is-selected {
  background: rgba(16, 32, 56, .09);
}

/* Same trap as section 11: the card this sits in lifts on hover, and a
   transform would trap the open menu inside it. */
body.whmcs-dashboard-body #order-standard_cart .hostique-configure-card:hover:has(.hostique-select.show) {
  transform: none !important;
}

body.whmcs-dashboard-body #order-standard_cart .hostique-configure-card:has(.hostique-select.show) {
  position: relative !important;
  z-index: 30 !important;
  /* Measured: the card also has overflow: hidden, so the open menu was
     being CLIPPED rather than covered - element-from-point at the menu
     centre returned the card ancestor, not the menu. Raising z-index
     alone changed nothing. */
  overflow: visible !important;
}

/* ------------------------------------------------------------------ *
 * 14. Suggested domains read as one solid block
 *
 * The reported fault was "no spacing between". Measured on a real render
 * of the live page, that is not quite what is happening: #domainSuggestions
 * is a Bootstrap .list-group, already a flex column, and it already has
 * gap: 12px. The space is there.
 *
 * What is missing is any way to SEE it. Each row is #fff, the panel behind
 * them is also #fff, and the only thing marking a row's edge is a
 * 1px #eef2f1 border - about 1.03:1 against its own background. So twelve
 * pixels of white sit between two whites, and the eye reads a single block.
 *
 * Widening the gap alone would not have fixed that; it would have made an
 * invisible gap slightly larger. The border has to carry the separation,
 * so this does both: a little more room, and an edge that is actually
 * visible against the panel.
 * ------------------------------------------------------------------ */
body.whmcs-dashboard-body #order-standard_cart #domainSuggestions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The vendor rule carries .order-shell--product-domain-modern as well, so
   an otherwise identical selector loses on specificity even with
   !important. Matched here rather than escalated. */
body.whmcs-dashboard-body[data-page-template="configureproductdomain"] #order-standard_cart.order-shell--product-domain-modern #domainSuggestions .domain-suggestion {
  border-color: #dde3ea !important;
}

/* ------------------------------------------------------------------ *
 * 15. A suggested domain that cannot be bought should not look buyable
 *
 * Paired with the block of the same name in everon-fixes.js. The theme
 * ships the right markup already - every suggestion's button carries
 * <span class="unavailable"> alongside .to-add, .loading and .added - and
 * then hides all four states but .to-add, because nothing ever sets the
 * state. These rules give the taken state somewhere to show.
 *
 * Specificity is matched to the vendor's own suggestion rules, which carry
 * both the [data-page-template] attribute and .order-shell--*-modern.
 * ------------------------------------------------------------------ */
body.whmcs-dashboard-body #order-standard_cart .domain-suggestion .btn-add-to-cart.hostique-suggestion-unavailable .to-add {
  display: none !important;
}

body.whmcs-dashboard-body #order-standard_cart .domain-suggestion .btn-add-to-cart.hostique-suggestion-unavailable .unavailable {
  display: inline-flex !important;
  align-items: center;
}

body.whmcs-dashboard-body #order-standard_cart .domain-suggestion .btn-add-to-cart.hostique-suggestion-unavailable {
  border-color: rgba(148, 163, 184, .45) !important;
  background: #f6f8fa !important;
  color: #7b8794 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* The row itself steps back, so a scan down the list reads the available
   ones first rather than giving every row the same weight. */
body.whmcs-dashboard-body #order-standard_cart .domain-suggestion.hostique-suggestion--taken .domain,
body.whmcs-dashboard-body #order-standard_cart .domain-suggestion.hostique-suggestion--taken .extension,
body.whmcs-dashboard-body #order-standard_cart .domain-suggestion.hostique-suggestion--taken .price {
  color: #94a3b8 !important;
}

body.whmcs-dashboard-body #order-standard_cart .domain-suggestion.hostique-suggestion--taken .price {
  text-decoration: line-through;
}

/* Keyboard navigation state, distinct from the current value. Without
   this, arrowing through 248 countries moves an invisible cursor. */
body.whmcs-dashboard-body #order-standard_cart .hostique-select .dropdown-item > a.is-active {
  background: rgba(16, 32, 56, .12);
  outline: none;
}

body.whmcs-dashboard-body #order-standard_cart .hostique-select .dropdown-item > a.is-disabled {
  opacity: .5;
  pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * 16. Show more: the theme's own link, paged five at a time
 *
 * Paired with the block of the same name in everon-fixes.js. That script
 * takes over the link the theme already renders rather than adding a second
 * control beside it, and gives it the state the theme handled with a
 * separate paragraph: when the list runs out the link stays where it is and
 * reads "No more suggestions" instead of vanishing. Styled as a button so it
 * looks like the control it now is.
 * ------------------------------------------------------------------ */
body.whmcs-dashboard-body #order-standard_cart .suggested-domains .more-suggestions {
  display: flex;
  justify-content: center;
  padding: 18px 16px 6px;
}

body.whmcs-dashboard-body #order-standard_cart .hostique-show-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  min-width: 190px;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid rgba(16, 32, 56, 0.16);
  border-radius: 12px;
  background: #fff;
  color: #102038;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

body.whmcs-dashboard-body #order-standard_cart .hostique-show-more:not(.is-exhausted):hover {
  border-color: rgba(var(--order-primary-rgb), 0.42);
  background: rgba(var(--order-primary-rgb), 0.06);
  color: var(--order-primary);
}

/* Disabled, not hidden: the row keeps its height and the reader is told why
   nothing happens rather than being left to wonder where the control went. */
body.whmcs-dashboard-body #order-standard_cart .hostique-show-more[aria-disabled="true"],
body.whmcs-dashboard-body #order-standard_cart .hostique-show-more.is-exhausted {
  border-color: rgba(16, 32, 56, 0.1);
  background: #f6f8fa;
  color: #94a3b8;
  cursor: not-allowed;
  pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * 17. The standalone domain page, finished off
 *
 * Sections 2 and 3 now cover both pages, which fixed the unstyled Safe
 * Search and the controls that shared no baseline. Two things still differed
 * once they were rendered side by side.
 *
 * The Search button keeps the theme's own .btn treatment - an 8px radius and
 * a drop shadow - because a theme rule reaches it through one more class
 * than the section 3 selector does, so equal-file-order does not decide it.
 * Matching the product step needs the extra weight here rather than a
 * rewrite of section 3, which is correct for the page it was written for.
 *
 * The Safe Search wording also came out lighter and smaller than the same
 * control on the other page, which is a theme rule for this label, not
 * something inherited.
 * ------------------------------------------------------------------ */
body.whmcs-dashboard-body #order-standard_cart .hostique-domain-search-advanced__actions .domain-check-availability,
body.whmcs-dashboard-body #order-standard_cart button.domain-check-availability {
  min-height: 54px !important;
  padding: 8px 26px !important;
  border-radius: 12px !important;
  border: 1px solid #000000 !important;
  background: #000000 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
}

body.whmcs-dashboard-body #order-standard_cart button.domain-check-availability:hover {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
}

/* The label reads at the same weight and colour as its twin. */
body.whmcs-dashboard-body #order-standard_cart .hostique-domain-search-advanced__safe span {
  color: #142033;
  font-size: .92rem;
  font-weight: 600;
}

/* The two multiselects sit a little shorter here than on the product step,
   which showed as three controls of three different heights in one row. */
body.whmcs-dashboard-body #order-standard_cart .hostique-domain-search-advanced__actions .btn-group,
body.whmcs-dashboard-body #order-standard_cart .hostique-domain-search-advanced__actions .btn-group > .btn {
  min-height: 48px;
}

body.whmcs-dashboard-body #order-standard_cart .hostique-domain-search-advanced__safe {
  min-height: 48px;
}

/* ------------------------------------------------------------------ *
 * 18. Suggestions on the standalone domain page, as cards
 *
 * The product step draws each suggestion as a bordered card; this page drew
 * a top rule only, so the rows had a line above them and nothing at the
 * sides - a list pretending to be a table. Same component, same data, two
 * different treatments depending on how the visitor arrived.
 *
 * The paging and the taken/available states already reach this page: both
 * are keyed on #domainSuggestions rather than on a shell class, so only the
 * surface needed bringing across.
 * ------------------------------------------------------------------ */
body.whmcs-dashboard-body #order-standard_cart.order-shell--domain-register-modern #domainSuggestions .domain-suggestion {
  padding: 14px 18px !important;
  border: 1px solid #dde3ea !important;
  border-top: 1px solid #dde3ea !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  transition: border-color .2s ease !important;
}

body.whmcs-dashboard-body #order-standard_cart.order-shell--domain-register-modern #domainSuggestions .domain-suggestion:hover {
  border-color: rgba(var(--order-primary-rgb), 0.34) !important;
}

/* The first row carried a suppressed top border to sit flush under the one
   before it; as a card it needs its own. */
body.whmcs-dashboard-body #order-standard_cart.order-shell--domain-register-modern #domainSuggestions .domain-suggestion:first-child {
  border-top: 1px solid #dde3ea !important;
}

/* This page lists the price before the button, the product step lists it
   after. Ordered here rather than in the template so the two read the same
   way round without touching markup the theme owns. */
body.whmcs-dashboard-body #order-standard_cart.order-shell--domain-register-modern #domainSuggestions .domain-suggestion .actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
}

body.whmcs-dashboard-body #order-standard_cart.order-shell--domain-register-modern #domainSuggestions .domain-suggestion .actions .btn-add-to-cart {
  order: 1;
}

body.whmcs-dashboard-body #order-standard_cart.order-shell--domain-register-modern #domainSuggestions .domain-suggestion .actions .price {
  order: 2;
  min-width: 84px;
  text-align: right;
}

/* ------------------------------------------------------------------ *
 * 19. The product step adopts the standalone page's row metrics
 *
 * The two rows were measured side by side once section 17 had settled the
 * standalone page:
 *
 *                  btn-group   inner .btn   checkbox   button
 *   standalone         48          48          48        54
 *   product step       58          48          42        54
 *
 * So on the product step the group stands 10px taller than the button
 * inside it - dead space, not padding - and the checkbox is 6px short of
 * everything else. Three different heights in one row is what stops it
 * looking deliberate.
 *
 * The standalone page is the one that reads correctly, so its numbers come
 * across rather than the other way round.
 * ------------------------------------------------------------------ */
body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-advanced-row .btn-group,
body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-advanced-row .btn-group > .btn {
  min-height: 48px;
  height: 48px;
  margin: 0;
}

/* min-height alone left the label sitting 8px above the two dropdowns:
   whatever it carries beyond its content makes the outer box taller than
   48, and a centred row then places it higher. A fixed height settles it. */
/* The row measured 64 tall against a 48 label: the label carries a 16px
   bottom margin, which makes it the tallest thing in the row, and a
   centred row then drops the two dropdowns 8px to sit in the middle of
   it. Killing the margin is what lines all three up - the heights were
   never really the problem. !important because the plain margin: 0 in
   section 2 loses to whatever sets it. */
body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-checkbox {
  min-height: 48px;
  height: 48px;
  margin: 0 !important;
}

/* The wording also came out a size larger here than on its twin. The extra
   class is needed: a theme rule for this label beat the plainer selector. */
body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-advanced-row .hostique-product-domain-checkbox span,
body.whmcs-dashboard-body #order-standard_cart .hostique-product-domain-checkbox > span {
  font-size: .92rem !important;
  font-weight: 600;
}