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

    ** Custom Stylesheet **

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

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

/* "Order Now" / "Add to Cart" buttons use WHMCS's success (green) style by
   default — recolor to brand blue to match httwebhost.com's CTAs. */
.btn-success,
.btn-order-now {
    background-color: #2563eb !important;
    border-color: #1d4ed8 !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-order-now:hover,
.btn-order-now:focus {
    background-color: #1d4ed8 !important;
    border-color: #1e40af !important;
}

/* Sidebar navigation + top header bar — dark navy to match httwebhost.com */
.navbar.default {
    background: #0f172a !important;
}
.navbar.default .icony {
    color: #93b4f5 !important;
}
.navbar.default .nav-item.active > a .icony,
.navbar.default .nav-item:hover > a .icony {
    color: #ffffff !important;
}
.navbar.header {
    background: #0f172a !important;
}
.navbar.header .form-control {
    background: #1c2740 !important;
    border-color: #263049 !important;
    color: #e2e8f0 !important;
}
.navbar.header .form-control::placeholder {
    color: #94a3b8 !important;
}
.navbar.header a,
.navbar.header .nav-link,
.navbar.header i {
    color: #e2e8f0 !important;
}



/* Hide the theme's live color-customizer widget (dev/demo feature only —
   not meant for real customers to change site colors). */
.setmenu {
    display: none !important;
}

/* Mobile sidebar-toggle button */
.mobmenu {
    background: #2563eb !important;
}

/* Order-form product cards (cart.php?gid=X) — the theme ships no real card
   styling for this classic listing layout, just plain stacked text. */
.products .product {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    margin-bottom: 24px;
    overflow: hidden;
    padding: 0 !important;
}
.products .product header {
    background: #f1f5f9;
    padding: 16px 20px;
    margin: 0;
    border-bottom: 1px solid #e2e8f0;
}
.products .product header span {
    color: #0f172a;
    font-weight: 700;
    font-size: 1.05em;
}
.products .product .product-desc,
.products .product .product-desc-full-width {
    padding: 20px !important;
}
.products .product .product-desc h4,
.products .product .product-desc-full-width h4 {
    font-size: 1.3em;
    font-weight: 700;
    color: #0f172a;
}
.products .product .product-pricing {
    padding: 0 20px 20px;
}
.products .product .product-pricing span.price {
    color: #0f172a;
    font-weight: 800;
    font-size: 1.5em;
}
.products .product ul,
.products .product .feature-list {
    padding: 0 20px 20px;
    margin: 0;
    list-style: none;
}
.products .product ul li,
.products .product .feature-list li {
    padding: 6px 0;
    border-top: 1px solid #f1f5f9;
    color: #334155;
}
.products .product ul li:first-child,
.products .product .feature-list li:first-child {
    border-top: none;
}
.products .product footer {
    padding: 0 20px 20px;
    margin: 0;
    float: none;
    width: 100%;
    text-align: left;
}
.products .product .btn-order-now {
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
}

/* Stack the description/price columns on mobile instead of squeezing them
   side-by-side, and reduce the price text so it fits without wrapping. */
@media (max-width: 767px) {
    .products .product .product-desc,
    .products .product .product-desc-full-width {
        float: none !important;
        width: 100% !important;
    }
    .products .product .product-pricing {
        float: none !important;
        width: 100% !important;
        padding: 0 20px 20px !important;
        border-top: 1px solid #f1f5f9;
        padding-top: 16px !important;
        margin-top: 8px;
    }
    .products .product .product-pricing span.price {
        font-size: 1.6em;
        white-space: nowrap;
    }
    .products .product footer {
        float: none !important;
        width: 100% !important;
    }
}