/* *****************************************************

    ** Custom Stylesheet special styles for 3.7 version **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Fix: backdrop above the modal (blocks clicks).
    Important: Bootstrap inserts `.modal-backdrop` as a child of `body`,
    not inside `#order-standard_cart`, so this selector must be global.
*/

/* Ensure cart modals always stay on top */
#modalRemoveItem,
#modalEmptyCart {
    z-index: 2000 !important;
}

/* Backdrop always below the modal */
.modal-backdrop {
    z-index: 1990 !important;
    /* If for any reason the z-index gets inverted,
       this prevents the overlay from blocking Yes/No clicks.
    */
    pointer-events: none !important;
}

/* Ensure the modal captures clicks */
.modal {
    pointer-events: auto;
}

/* Ensure the modal content receives clicks */
#modalRemoveItem .modal-dialog,
#modalRemoveItem .modal-content,
#modalEmptyCart .modal-dialog,
#modalEmptyCart .modal-content {
    pointer-events: auto;
}

/* Look of the cart (Order Summary blue as a reference) */
#order-standard_cart .order-summary {
    background-color: #49b7d6 !important;
    border-bottom: 0 !important;
}

#order-standard_cart .order-summary h2 {
    color: #fff !important;
}

#order-standard_cart .summary-container {
    color: #fff;
}

/* --- Checkout layout fixes (client area theme bleed) --- */

/* --- Checkout: contrast in dark mode --- */
#order-standard_cart .walojo-checkout {
    color: rgba(234, 242, 247, 0.92) !important;
}

#order-standard_cart .walojo-checkout label,
#order-standard_cart .walojo-checkout .text-muted {
    color: rgba(234, 242, 247, 0.72) !important;
}

#order-standard_cart .walojo-checkout .sub-heading span {
    color: rgba(234, 242, 247, 0.92) !important;
    background-color: transparent !important;
}

#order-standard_cart .walojo-checkout input,
#order-standard_cart .walojo-checkout textarea,
#order-standard_cart .walojo-checkout select {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: rgba(234, 242, 247, 0.92) !important;
}

#order-standard_cart .walojo-checkout input::placeholder,
#order-standard_cart .walojo-checkout textarea::placeholder {
    color: rgba(234, 242, 247, 0.45) !important;
}

/* Ensure clicks on Existing/New selectors, even if the theme uses background pseudo-elements */
#order-standard_cart .walojo-checkout::before,
#order-standard_cart .walojo-checkout::after {
    pointer-events: none !important;
}

#order-standard_cart .walojo-checkout .activite-logreg-form {
    position: relative;
    z-index: 5;
}

/* Checkout "pill" inputs: the theme makes them white,
   but the placeholder becomes too light → unreadable.
   Force dark text/placeholder only for `.field` inputs. */
#order-standard_cart .walojo-checkout input.field,
#order-standard_cart .walojo-checkout textarea.field,
#order-standard_cart .walojo-checkout select.field {
    background-color: #ffffff !important;
    color: #121417 !important;
}

#order-standard_cart .walojo-checkout input.field::placeholder,
#order-standard_cart .walojo-checkout textarea.field::placeholder {
    color: rgba(18, 20, 23, 0.48) !important;
}

#order-standard_cart .walojo-checkout input.field::-ms-input-placeholder,
#order-standard_cart .walojo-checkout textarea.field::-ms-input-placeholder {
    color: rgba(18, 20, 23, 0.48) !important;
}

/* Chrome autofill (avoid near-white text on white background) */
#order-standard_cart .walojo-checkout input.field:-webkit-autofill,
#order-standard_cart .walojo-checkout textarea.field:-webkit-autofill,
#order-standard_cart .walojo-checkout select.field:-webkit-autofill {
    -webkit-text-fill-color: #121417 !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* Icons inside inputs (prepend-icon) */
#order-standard_cart .walojo-checkout .prepend-icon .field-icon,
#order-standard_cart .walojo-checkout .prepend-icon .field-icon i {
    color: rgba(18, 20, 23, 0.42) !important;
}

/* The theme global CSS defines `.sec-main { padding: 80px; }`.
    In the orderform this adds too much whitespace and throws off the checkout layout.
    Force a neutral layout only inside the checkout. */
#order-standard_cart .walojo-checkout.sec-main {
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin-top: 20px !important;
}

/* Align the 3-dots button (dropnav) with the theme CSS */
#order-standard_cart .container.header-lined {
    max-width: 100% !important;
}

/* Configure page: align the header dropdown (3-dots) properly */
#order-standard_cart .header-lined {
    position: relative;
}

/* --- Payment Details (gateways + tarjeta) --- */

/* Payment method selector: make it look like a clickable "card" */
#order-standard_cart .walojo-checkout #paymentGatewaysContainer {
    margin-top: 15px;
}

#order-standard_cart .walojo-checkout #paymentGatewaysContainer label.radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    margin: 6px 10px 6px 0;
    cursor: pointer;
    transition: box-shadow 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

#order-standard_cart .walojo-checkout #paymentGatewaysContainer label.radio-inline:hover {
    border-color: rgba(73, 183, 214, 0.55);
    box-shadow: 0 0 0 3px rgba(73, 183, 214, 0.12);
}

/* Selection indicator (modern Edge/Chrome) */
#order-standard_cart .walojo-checkout #paymentGatewaysContainer label.radio-inline:has(input[type="radio"]:checked) {
    border-color: rgba(73, 183, 214, 0.9);
    box-shadow: 0 0 0 3px rgba(73, 183, 214, 0.18);
    background-color: rgba(73, 183, 214, 0.06);
}

/* Fallback: visible and aligned radio */
#order-standard_cart .walojo-checkout #paymentGatewaysContainer label.radio-inline input[type="radio"] {
    margin: 0;
    transform: translateY(0.5px);
    accent-color: #49b7d6;
}

/* Gateway errors: more "Walojo" */
#order-standard_cart .walojo-checkout .gateway-errors {
    border-radius: 12px;
    border: 1px solid rgba(220, 53, 69, 0.35);
}

/* Card input fields container */
#order-standard_cart .walojo-checkout .cc-input-container {
    margin-top: 15px;
    padding: 18px;
    border-radius: 12px;
}

/* --- Configure Product: ISO/OS picker (cards + versiones) --- */

#order-standard_cart .walojo-iso-picker {
    display: none;
    margin-top: 8px;
}

#order-standard_cart .walojo-iso-picker.is-enhanced {
    display: block;
}

#order-standard_cart select.walojo-iso-select-fallback.is-hidden {
    display: none;
}

#order-standard_cart .walojo-iso-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 10px;
}

@media (min-width: 768px) {
    #order-standard_cart .walojo-iso-grid {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
    }
}

@media (min-width: 1200px) {
    #order-standard_cart .walojo-iso-grid {
        grid-template-columns: repeat(4, minmax(160px, 1fr));
    }
}

#order-standard_cart .walojo-iso-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    user-select: none;
}

#order-standard_cart .walojo-iso-card.is-active {
    border-color: #802DBC;
}

#order-standard_cart .walojo-iso-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

#order-standard_cart .walojo-iso-card-title {
    font-weight: 700;
    font-size: 13px;
    color: #2b2b2b;
}

#order-standard_cart .walojo-iso-card .walojo-iso-version {
    width: 100%;
}

#order-standard_cart .walojo-iso-card input[type="radio"] {
    margin: 0;
}


/* If the gateway is NOT credit card, force hiding even if WHMCS tries `slideDown()` */
#order-standard_cart #creditCardInputFields.walojo-force-hidden {
    display: none !important;
}

/* Fix the CVC '?' button (avoid weird floating or an oversized button)
    In main.css it comes as absolute with fixed offsets (top/right). Here we control it only in checkout. */
#order-standard_cart .walojo-checkout .cc-input-container .input-group {
    position: relative;
    width: 100%;
}

#order-standard_cart .walojo-checkout .cc-input-container .input-group > .field {
    margin-bottom: 0;
    padding-right: 78px; /* espacio to the button '?' */
}

#order-standard_cart .walojo-checkout .cc-input-container .input-group-btn.show-cc {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    transform: translateY(-50%) !important;
}

#order-standard_cart .walojo-checkout .cc-input-container .input-group-btn.show-cc .btn {
    width: 46px;
    height: 46px;
    min-width: 46px;
    padding: 0 !important;
    border-radius: 12px;
    line-height: 46px;
    font-weight: 800;
    text-align: center;
    transform: none !important;
}

/* Error messages: only when WHMCS removes `w-hidden` */
#order-standard_cart .walojo-checkout .cc-input-container .field-error-msg {
    display: none;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.3;
    color: #dc3545;
}

/* CVC image popover above everything */
.popover {
    z-index: 3000;
}

/* Dropnav: always open to the left.
    Important: some setups (BS4/BS5/Popper) inject `inset/transform` inline.
    Here we override that and use absolute positioning under the button. */
#order-standard_cart .container.header-lined .dropnav-header-lined {
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 1060;
    width: 40px;
    height: 40px;
}

#order-standard_cart .header-lined .dropnav-header-lined {
    position: absolute;
    top: 14px;
    right: 20px;
    z-index: 1100;
}

#order-standard_cart .container.header-lined .dropnav-header-lined .dropdown-menu,
#order-standard_cart .container.header-lined .dropnav-header-lined .dropdown-menu.show,
#order-standard_cart .container.header-lined .dropnav-header-lined .dropdown-menu[data-bs-popper],
#order-standard_cart .container.header-lined .dropnav-header-lined .dropdown-menu[data-popper-placement],
#order-standard_cart .container.header-lined .dropnav-header-lined .dropdown-menu[x-placement],
#order-standard_cart .header-lined .dropnav-header-lined .dropdown-menu,
#order-standard_cart .header-lined .dropnav-header-lined .dropdown-menu.show,
#order-standard_cart .header-lined .dropnav-header-lined .dropdown-menu[data-bs-popper],
#order-standard_cart .header-lined .dropnav-header-lined .dropdown-menu[data-popper-placement],
#order-standard_cart .header-lined .dropnav-header-lined .dropdown-menu[x-placement] {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    inset: auto !important;
    transform: none !important;
    min-width: 260px;
    max-width: 340px;
    max-height: calc(100vh - 140px);
    overflow: auto;
}

#order-standard_cart .header-lined .dropnav-header-lined .drop-down-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 0;
    background: #49b7d6;
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

#order-standard_cart .header-lined .dropnav-header-lined .drop-down-btn:hover {
    background: #3aaac9;
}

#order-standard_cart .header-lined .dropnav-header-lined .drop-down-btn[aria-expanded="true"] {
    background: #2f9fbe;
}

#order-standard_cart .header-lined .dropnav-header-lined .drop-down-btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(73, 183, 214, 0.25);
}

/* Fallback icon: if the custom icon font isn't present, show a vertical ellipsis */
#order-standard_cart .header-lined .dropnav-header-lined .ico-more-vertical:before {
    /* Force the glifo ⋮ aunque the icon font mapee otra cosa (a veces ':' ) */
    content: "\22EE" !important; /* ⋮ */
    font-family: inherit !important;
    font-size: 22px;
    line-height: 1;
    color: #fff !important;
}

#order-standard_cart .header-lined .dropnav-header-lined .dropdown-menu {
    left: auto;
    right: 0;
    margin-top: 10px;
    padding: 18px;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

#order-standard_cart .header-lined .dropnav-header-lined .dropdown-menu .panel-heading {
    padding: 0;
    margin: 10px 0 6px;
    border: 0;
}

#order-standard_cart .header-lined .dropnav-header-lined .dropdown-menu .panel-title {
    font-size: 18px;
    line-height: 1.2;
    margin: 0;
}

#order-standard_cart .header-lined .dropnav-header-lined .dropdown-menu .list-group {
    margin: 0 0 10px;
}

#order-standard_cart .header-lined .dropnav-header-lined .dropdown-menu .list-group-item {
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.25;
    border: 0;
    background: transparent;
}

#order-standard_cart .header-lined .dropnav-header-lined .dropdown-menu .list-group-item.active {
    border-radius: 10px;
    background: rgba(73, 183, 214, 0.12);
}
/* Choose Account: the theme CSS sets text to white on `.active`,
   but the background here is light → it looks "empty". Add a background to the active state. */
#order-standard_cart .account-select-container {
    border-right: 0 !important;
}

#order-standard_cart .account-select-container .account {
    border-radius: 12px;
}

#order-standard_cart .account-select-container .account.active,
#order-standard_cart .account-select-container .newaccount.account.active {
    background-color: #49b7d6 !important;
}

#order-standard_cart .account-select-container .account.active,
#order-standard_cart .account-select-container .account.active * {
    color: #fff !important;
}

/* In inactive state, force legibility */
#order-standard_cart .account-select-container .account:not(.active) .address,
#order-standard_cart .account-select-container .account:not(.active) label {
    color: #212122 !important;
}

/* In checkout (dark background), dark text isn't readable → force light */
#order-standard_cart .walojo-checkout .account-select-container .account:not(.active) .address,
#order-standard_cart .walojo-checkout .account-select-container .account:not(.active) label,
#order-standard_cart .walojo-checkout .account-select-container .account:not(.active) .address * {
    color: rgba(234, 242, 247, 0.88) !important;
}

/* --- View Cart layout fixes --- */
#order-standard_cart .walojo-viewcart.sec-main {
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* In viewcart the header also uses dropnav; ensure full width */
#order-standard_cart .container.header-lined {
    max-width: 100% !important;
}

/* --- View Cart: show configoptions (Slots/Datacenter) ---
    In some modes/skins the global theme leaves the footer with white text
    on a light background. Force readable colors and make the options block
    keep a consistent layout.
*/

#order-standard_cart .view-cart-items .item .item-footer {
    color: #212122;
}

[data-background="dark"] #order-standard_cart .view-cart-items .item .item-footer {
    color: #fff;
}

#order-standard_cart .view-cart-items .item .item-footer small {
    display: block;
    margin-top: 6px;
    line-height: 1.35;
}

#order-standard_cart .view-cart-items .item .item-footer small,
#order-standard_cart .view-cart-items .item .item-footer span {
    color: inherit;
}

/* Config options under the product (viewcart) */
#order-standard_cart .view-cart-items .item .item-configoptions {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.35;
}

/* Breakdown inside the Order Summary */
#order-standard_cart .order-summary .summary-cart-items {
    margin: 0 0 10px 0;
}

#order-standard_cart .order-summary .summary-cart-item {
    margin: 0 0 10px 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

#order-standard_cart .order-summary .summary-cart-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

#order-standard_cart .order-summary hr.summary-divider {
    margin: 10px 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}