/*
 * HostWega domain selector responsive layout fix
 * Keeps the existing HostWega colors, typography and visual styling.
 * Only changes layout behavior on smaller screens.
 */

/* Let long translated option labels wrap naturally on medium screens. */
@media (max-width: 991.98px) and (min-width: 768px) {
    #order-standard_cart .domain-productconfigiration-options-group.domain-selection-options {
        flex-wrap: wrap;
        row-gap: 4px;
    }
}

@media (max-width: 767.98px) {
    /* Keep the original tab/text design, but make it a compact horizontal scroller. */
    #order-standard_cart .domain-productconfigiration-options-group.domain-selection-options {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 18px !important;
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 3px;
    }

    #order-standard_cart .domain-productconfigiration-options-group.domain-selection-options::-webkit-scrollbar {
        display: none;
    }

    #order-standard_cart .domain-selection-options .option.domain-productconfigiration-options-item {
        flex: 0 0 auto;
        overflow: visible;
    }

    #order-standard_cart .domain-selection-options .option.domain-productconfigiration-options-item label {
        margin-bottom: 0;
        white-space: nowrap;
    }

    /* Preserve the existing gradient/card styling; only make its contents responsive. */
    #order-standard_cart .domain-productconfigiration-options-inputs {
        width: 100%;
        max-width: 100%;
        padding: 12px 13px 18px;
        overflow: hidden;
    }

    /* Register / Transfer / Existing Domain / Subdomain input row. */
    #order-standard_cart .domain-productconfigiration-options-inputs .domain__search__input__wrapper.single-input {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(88px, 31%);
        align-items: stretch;
        width: 100% !important;
        height: auto !important;
        min-height: 44px;
        overflow: hidden;
    }

    #order-standard_cart .domain-productconfigiration-options-inputs .domain__search__input__wrapper.single-input > .domain__search__input__searching {
        grid-column: 1;
        min-width: 0;
        width: 100%;
    }

    /* Flatten only the layout wrapper so the TLD field and button can occupy separate rows. */
    #order-standard_cart .domain-productconfigiration-options-inputs .domain__search__input__wrapper.single-input > .domain__search__input__options {
        display: contents !important;
        width: auto !important;
        height: auto !important;
    }

    #order-standard_cart .domain-productconfigiration-options-inputs .domain__search__input__wrapper.single-input > .domain__search__input__options > .select__dropdown__menu__search__wrapper,
    #order-standard_cart .domain-productconfigiration-options-inputs .domain__search__input__wrapper.single-input > .domain__search__input__options > .inputdomainselect.select__dropdown__menu__search__wrapper {
        grid-column: 2;
        min-width: 0;
        width: 100% !important;
        max-width: 100%;
        align-self: stretch;
    }

    /* Select2 must respect the available TLD column instead of its desktop min-width. */
    #order-standard_cart .domain-productconfigiration-options-inputs .domain__search__input__wrapper.single-input .select__dropdown__menu__search__wrapper .select2-container {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #order-standard_cart .domain-productconfigiration-options-inputs .domain__search__input__wrapper.single-input .select2-container--default .select2-selection--single {
        min-width: 0 !important;
        width: 100% !important;
        height: 44px;
    }

    #order-standard_cart .domain-productconfigiration-options-inputs .domain__search__input__wrapper.single-input .select2-container--default .select2-selection--single .select2-selection__rendered {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-inline-end: 24px;
    }

    #order-standard_cart .domain-productconfigiration-options-inputs .domain__search__input__wrapper.single-input .search__input,
    #order-standard_cart .domain-productconfigiration-options-inputs .domain__search__input__wrapper.single-input .owndomaintld-input-ab {
        height: 44px !important;
        min-width: 0;
        width: 100% !important;
    }

    #order-standard_cart .domain-productconfigiration-options-inputs .domain__search__input__wrapper.single-input .owndomaintld-input-ab {
        border-radius: 0 !important;
    }

    /* Critical fix: remove the old absolute-positioned mobile button. */
    #order-standard_cart .domain-productconfigiration-options-inputs .domain__search__input__wrapper.single-input .domain-selection-options-buttom {
        grid-column: 1 / -1;
        position: static !important;
        inset: auto !important;
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100% - 10px) !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 40px !important;
        margin: 5px !important;
        border-radius: 7px !important;
        z-index: auto !important;
    }

    /* In-cart domain option has no TLD selector; keep it in a simple row. */
    #order-standard_cart .domain-productconfigiration-options-inputs #domainincart .domain__search__input__wrapper {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: stretch;
        height: auto !important;
        min-height: 44px;
    }

    #order-standard_cart .domain-productconfigiration-options-inputs #domainincart .domain__search__input__searching {
        flex: 1 1 auto;
        min-width: 0;
    }

    #order-standard_cart .domain-productconfigiration-options-inputs #domainincart .domain__search__input__options {
        position: static !important;
        flex: 0 0 auto;
        width: auto !important;
        height: auto !important;
        padding-inline-end: 5px;
    }

    #order-standard_cart .domain-productconfigiration-options-inputs #domainincart .domain-selection-options-buttom {
        position: static !important;
        width: auto !important;
        min-width: 72px !important;
        height: 40px !important;
    }

    /* Keep spotlight TLD prices in one swipeable row instead of squeezing/wrapping them. */
    #order-standard_cart .domains__spotlighttlds__selection__wrapper {
        display: flex;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%;
        max-width: 100%;
        gap: 5px;
        padding-bottom: 3px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #order-standard_cart .domains__spotlighttlds__selection__wrapper::-webkit-scrollbar {
        display: none;
    }

    #order-standard_cart .domains__spotlighttlds__selection__wrapper .domains__spotlighttlds__selection__item {
        flex: 0 0 auto;
        min-width: max-content;
        white-space: nowrap;
    }
}

/* Extra protection for very narrow phones. */
@media (max-width: 389.98px) {
    #order-standard_cart .domain-productconfigiration-options-inputs .domain__search__input__wrapper.single-input {
        grid-template-columns: minmax(0, 1fr) 86px;
    }

    #order-standard_cart .domain-productconfigiration-options-inputs .domain__search__input__wrapper.single-input .search__input {
        padding-inline-start: 38px;
        padding-inline-end: 8px;
        font-size: 13px;
    }

    #order-standard_cart .domain-productconfigiration-options-inputs .domain__search__input__wrapper.single-input .select2-container--default .select2-selection--single .select2-selection__rendered,
    #order-standard_cart .domain-productconfigiration-options-inputs .domain__search__input__wrapper.single-input .owndomaintld-input-ab {
        font-size: 13px !important;
    }
}