/* Custom CSS for Mobile Domain Search Results */
@media (max-width: 767px) {
    /* Ensure the top primary result box has enough room */
    #order-standard_cart .domain-lookup-primary-results,
    #order-standard_cart .domain-checker-result-headline {
        padding: 15px 10px !important;
        text-align: center !important;
    }

    /* Force the price in the primary result to its own line */
    #order-standard_cart .domain-checker-result-headline .price {
        display: block !important;
        margin: 12px 0 !important;
        float: none !important;
    }

    /* Suggested Domains Items - Improved Spacing */
    /* We style children specifically to avoid forcing the 'template' item to show */
    .suggested-domains .list-group-item {
        padding: 25px 15px !important;
        text-align: center !important;
    }

    .suggested-domains .domain,
    .suggested-domains .extension {
        display: inline-block !important; /* Forces stacking while allowing side-by-side domain.ext */
        margin-bottom: 8px !important;
        color: #333 !important;
        font-size: 1.1em !important;
    }

    /* Ensure actions/price/button don't overlap */
    .suggested-domains .actions {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin-top: 15px !important;
        clear: both !important;
    }

    .suggested-domains .price {
        float: none !important;
        display: block !important;
        padding: 10px 0 !important;
        margin: 0 0 12px 0 !important;
        line-height: normal !important;
        color: #333 !important;
        font-weight: bold !important;
    }

    .suggested-domains .btn-add-to-cart {
        float: none !important;
        width: 100% !important;
        margin-top: 5px !important;
        display: block !important;
        padding: 10px !important; /* Slightly better tap target */
    }

    /* Small spacing for promo tags (Hot, New, Sale) if present */
    .suggested-domains .promo {
        display: block !important;
        margin-bottom: 10px !important;
    }
}

/* IMPORTANT: Do not use !important on .w-hidden as it breaks WHMCS JavaScript search logic. 
   JS uses inline styles (display: block) to show elements, and !important will block it. */
.w-hidden {
    display: none;
}