#order-standard_cart {
    padding-bottom: 40px;
}

/* configureproductdomain.tpl stacks one .domain-input-group per domain option
   (register/transfer/owndomain/subdomain/incart) and shows only the one that
   matches the selected radio via a small inline script. Hide them by default
   here so there's no flash of all of them stacked before that script runs. */
#order-standard_cart .domain-input-group {
    display: none;
}

/* Defensive re-statement of chispa/css/cart.css's own .cart-steps reset — the
   order form pages don't control whether that stylesheet loads before this
   one, and without list-style:none the <ol class="cart-steps"> in
   cart-steps.tpl renders a stray "1. 2. 3." under the custom step circles. */
#order-standard_cart .cart-steps {
    list-style: none;
    padding: 0;
}

/* WHMCS's bundled scripts (VatValidator.js, StatesDropdown.js, the payment
   framework) toggle Bootstrap's utility classes. Chispa ships no Bootstrap, so
   they are declared here — without them those scripts "hide" nothing. */
.d-none,
.w-hidden {
    display: none !important;
}

#order-standard_cart .section-head {
    margin-bottom: 30px;
}

/* .section-head .sub is centered site-wide, meant for a one-line subtitle
   (chispa/css/style.css:658) — fine for "Busque el nombre de dominio
   perfecto" but not for a whole multi-line product description dumped in as
   plain text, which just reads as a jagged wall of centered dashes.
   configureproduct.tpl renders the description in its own left-aligned block
   instead of inside .section-head so it doesn't inherit that centering. */
/* The raw description is plain text straight from the product admin field —
   often one "- feature" per line with a blank line between each. The old
   white-space:pre-line kept every one of those blank lines as its own gap,
   which is what read as "muy separado". Letting whitespace collapse normally
   turns it into one tidy flowing line instead, regardless of how the
   description happens to be formatted in admin. */
#order-standard_cart .product-description {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 22px;
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
    white-space: normal;
}

#order-standard_cart .domain-form {
    max-width: none;
}

#order-standard_cart .domain-tld-select {
    width: auto;
    min-width: 96px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    padding: 10px 34px 10px 16px;
    color: #fff;
    font-size: 14px;
}

#order-standard_cart .domain-option-row .domain-form {
    background: rgba(255, 255, 255, .04);
}

/* ===== DOMAIN CHECKER RESULTS (domainregister.tpl) =====
   The results markup mirrors WHMCS standard_cart's domain checker, which
   scripts.min.js drives. The bundle toggles visibility with jQuery show()/
   hide(), which writes display as an inline style, so the rules here only set
   the resting look; .w-hidden/.hidden (declared above) handle initial state. */

#order-standard_cart .domain-checker-container {
    margin-bottom: 28px;
}

#order-standard_cart .domain-checker-container .domain-form {
    max-width: 640px;
}

#order-standard_cart .domain-checker-result-headline {
    text-align: center;
}

#order-standard_cart .domain-lookup-loader {
    color: var(--text-dim);
    font-size: 15px;
}

#order-standard_cart #primaryLookupResult {
    text-align: center;
    padding: 24px 16px 8px;
}

#order-standard_cart .primary-domain-header {
    text-align: center;
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--text-soft);
    margin: 26px 0 6px;
}

#order-standard_cart #primaryLookupResult .domain-available,
#order-standard_cart #primaryLookupResult .domain-unavailable,
#order-standard_cart #primaryLookupResult .domain-tld-unavailable,
#order-standard_cart #primaryLookupResult .domain-invalid {
    font-size: 17px;
    margin: 0 0 14px;
}

#order-standard_cart #primaryLookupResult .domain-available {
    color: var(--success);
}

#order-standard_cart #primaryLookupResult .domain-unavailable,
#order-standard_cart #primaryLookupResult .domain-tld-unavailable,
#order-standard_cart #primaryLookupResult .domain-invalid,
#order-standard_cart #primaryLookupResult .domain-error {
    color: var(--danger);
}

#order-standard_cart .domain-price {
    margin: 16px 0 0;
    text-align: center;
}

#order-standard_cart .domain-price .price {
    font-family: var(--font-display);
    font-size: 20px;
    color: #fff;
    display: block;
    margin-bottom: 10px;
}

#order-standard_cart .btn-add-to-cart span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#order-standard_cart #idnLanguageSelector {
    max-width: 420px;
    margin: 18px auto 0;
    text-align: left;
}

#order-standard_cart #idnLanguageSelector .idn-language-description {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-align: center;
}

#order-standard_cart .field-error-msg {
    color: var(--danger);
    font-size: 12px;
    margin-top: 6px;
    text-align: center;
}

/* Spotlight TLDs */
#order-standard_cart .spotlight-tlds {
    margin: 24px 0 0;
}

#order-standard_cart .spotlight-tlds-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

#order-standard_cart .spotlight-tld {
    text-align: center;
    padding: 18px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-weight: 600;
}

#order-standard_cart .spotlight-tld .domain-lookup-result {
    margin-top: 8px;
}

#order-standard_cart .spotlight-tld .available.price {
    color: var(--success);
    font-family: var(--font-display);
}

/* Suggested domains */
#order-standard_cart .suggested-domains {
    margin-top: 24px;
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

#order-standard_cart .suggested-domains .panel-heading,
#order-standard_cart .suggested-domains .panel-footer {
    padding: 12px 18px;
    border-color: var(--line);
}

#order-standard_cart .suggested-domains .panel-heading {
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--text-soft);
    border-bottom: 1px solid var(--line);
}

#order-standard_cart .suggested-domains .panel-body {
    padding: 16px 18px;
    color: var(--text-dim);
}

#order-standard_cart .domain-suggestion {
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
}

#order-standard_cart .domain-suggestion:last-child {
    border-bottom: 0;
}

#order-standard_cart .domain-suggestion .domain {
    font-weight: 600;
    color: #fff;
}

#order-standard_cart .domain-suggestion .promo span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-left: 6px;
}

#order-standard_cart .domain-suggestion .actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

#order-standard_cart .domain-suggestion .actions .price {
    font-family: var(--font-display);
    color: var(--rose);
}

#order-standard_cart .more-suggestions a {
    font-size: 14px;
}

#order-standard_cart .domain-suggestions-warning {
    font-size: 12px;
    color: var(--text-dim);
    padding: 10px 18px;
}

#order-standard_cart .plan .btn-plan {
    margin-top: auto;
}

#order-standard_cart .product-config-block .form-row {
    margin-bottom: 0;
}

#order-standard_cart .item-actions form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#order-standard_cart .domain-renewal .form-group select {
    min-width: 220px;
}

/* .payment-methods sits on the radio itself, so the body is its sibling. */
#order-standard_cart .payment-methods + .radio-card-body {
    align-items: center;
    text-align: center;
}

#order-standard_cart .summary-head .badge {
    font-size: 12px;
}

/* ===== iCHECK COMPATIBILITY =====
   WHMCS initialises iCheck on every input inside #order-standard_cart that is
   not marked .no-icheck, and its entire checkout behaviour — gateway selection,
   stored-card choice, credit toggle — is bound to iCheck's `ifChecked` event.
   The payment controls must therefore stay under iCheck.

   iCheck replaces each input with
       <div class="iradio_square-blue"><input><ins class="iCheck-helper"></div>
   which (a) breaks the `input:checked + …` sibling selectors this theme uses and
   (b) expects the sprite CSS that ships with the six theme, which Chispa does
   not load — so without the rules below these controls render as empty divs.

   iCheck writes `position: relative` inline on the wrapper, hence !important on
   the properties that have to beat it. */

#order-standard_cart .radio-card > .iradio_square-blue {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 0;
    z-index: 1;
}

#order-standard_cart .radio-card > .iradio_square-blue.checked + .radio-card-body {
    border-color: var(--rose);
    background: rgba(255, 61, 119, .09);
    box-shadow: 0 0 0 1px var(--rose);
}

#order-standard_cart .check > .iradio_square-blue,
#order-standard_cart .check > .icheckbox_square-blue {
    position: relative !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    margin: 1px 0 0 !important;
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, .04);
    border-radius: 50%;
    cursor: pointer;
    transition: all .2s var(--ease);
}

#order-standard_cart .check > .icheckbox_square-blue {
    border-radius: 5px;
}

#order-standard_cart .check > .iradio_square-blue.checked,
#order-standard_cart .check > .icheckbox_square-blue.checked {
    background: var(--gradient-brand);
    border-color: transparent;
}

#order-standard_cart .check > .iradio_square-blue.checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

#order-standard_cart .check > .icheckbox_square-blue.checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

#order-standard_cart .iCheck-helper {
    cursor: pointer;
}

/* ===== MOBILE CATEGORY PICKER =====
   Card shown only on small screens (see the max-width:1024px block below).
   It replaces the plain raw <select> with a themed card: heading row with the
   panel label plus a custom-select styled like the rest of the theme. */
.cart-categories-mobile {
    display: none;
    margin: 0 0 26px;
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 16px 18px 18px;
}

.cart-categories-mobile .cart-categories-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.cart-categories-mobile .cart-categories-head i {
    color: var(--rose);
    font-size: 14px;
}

.cart-categories-mobile select {
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    padding: 12px 40px 12px 14px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239C7686' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.cart-categories-mobile select:focus {
    border-color: var(--rose);
    outline: none;
}

.cart-categories-mobile select option {
    background-color: var(--bg-elevated);
    color: var(--text);
}

/* ===== SERVICE RENEWALS ===== */
.service-renewals .service-renewal:last-child {
    border-bottom: 0;
}

.service-renewals .addon-renewals {
    padding-left: 28px;
    border-left: 2px solid var(--line);
    margin: 0 0 10px 22px;
}

.service-renewals .addon-renewals .suggestions-head {
    margin-top: 12px;
}

/* ===== MARKETCONNECT PROMO ===== */
.mc-promo {
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    overflow: hidden;
}

.mc-promo-head {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    flex-wrap: wrap;
}

.mc-promo-icon img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.mc-promo-content {
    flex: 1;
    min-width: 180px;
}

.mc-promo-content .headline {
    font-family: var(--font-display);
    font-size: 15px;
    color: #fff;
}

.mc-promo-content .tagline {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 3px;
}

.mc-promo-cta {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mc-promo-cta .price {
    font-family: var(--font-display);
    color: var(--rose);
    white-space: nowrap;
}

.mc-promo-body {
    border-top: 1px solid var(--line);
    padding: 16px 22px;
}

.mc-promo-body ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.mc-promo-body i {
    color: var(--success);
    margin-right: 6px;
}

/* ===== RECOMMENDATIONS ===== */
.recommendations-panel {
    border-color: rgba(185, 61, 255, .3);
}

.recommendations-panel .block-head i {
    color: var(--purple);
}

@media (max-width: 1024px) {
    #order-standard_cart .domain-tld-select {
        width: 100%;
    }

    #order-standard_cart .item-actions {
        width: 100%;
        justify-content: space-between;
    }

    .cart-categories-mobile {
        display: block;
    }

    .cart-categories {
        display: none;
    }
}

/* ===== ORDER SUMMARY LOADER =====
   #orderSummaryLoader is shown/hidden by six/scripts.min.js recalctotals().
   It sits above #producttotal and fades in/out with jQuery animate. */
#orderSummaryLoader {
    text-align: center;
    padding: 14px 22px 0;
    color: var(--text-dim);
    font-size: 16px;
}

/* Remove the chispacart-only spinner once producttotal has real content.
   six/scripts.min.js writes directly into #producttotal so the initial
   "Cargando..." placeholder disappears automatically. */
#producttotal .spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--line-strong);
    border-top-color: var(--rose);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== MOBILE STICKY PAY / COMPLETE ORDER BAR =====
   On phones and small tablets the "Pagar" / "Completar pedido" button
   (checkout.tpl #btnCompleteOrder) and the viewcart "Ir a pagar" link
   (#checkout) live at the bottom of a long form. Pin them to the viewport
   bottom so they stay tappable while scrolling.

   The pinning is conditional: chispa/js/cart.js watches the real button with
   an IntersectionObserver and toggles body.is-sticky-pay only while that
   button sits below the fold, so the floating bar never appears when the
   natural button is already on screen (short carts, or after scrolling to the
   bottom). Without JS the button simply scrolls in normal flow.

   Two gotchas handled here:
   1. The buttons sit inside .order-summary (cart.css), which has
      overflow:hidden + border-radius. In WebKit/Safari that clips fixed
      descendants (they become invisible when scrolled over the card), so we
      restore overflow:visible for the summary card on small screens.
   2. bottom uses env(safe-area-inset-bottom) for the iPhone home indicator,
      with a plain-pixel fallback line first for browsers that reject env()
      inside calc(). */
.sticky-pay-anchor {
    display: block;
    height: 1px;
}

@media (max-width: 1024px) {
    .order-summary {
        overflow: visible;
    }

    body.is-sticky-pay #btnCompleteOrder,
    body.is-sticky-pay #order-standard_cart #checkout {
        position: fixed;
        left: 14px;
        right: 14px;
        bottom: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        z-index: 900;
        width: calc(100% - 28px);
        margin: 0 !important;
        border-radius: 999px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    }

    /* Reserve room so the pinned bar never covers the last items of the order
       summary while the real button is still off-screen. Removed again as soon
       as the real button scrolls into view. */
    body.is-sticky-pay #order-standard_cart {
        padding-bottom: 104px;
    }
}