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

    ** Custom Stylesheet **

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

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

/* Custom CSS for Nexus Cart
 *
 * This block allows you to customize theme colors and styles for the entire Nexus Cart template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

html {
    font-size: 14px;
}

body, h1, h2, h3, h4, h5, h6, .btn, button {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Brand palette — derived from the Simple Web Setup logo */
    --primary-50: #fef1f2;
    --primary-100: #fcdee2;
    --primary-200: #f9b8c0;
    --primary-300: #f58996;
    --primary-400: #f04c60;
    --primary-500: #eb142e;
    --primary-600: #dd1931;
    --primary-700: #ab0e21;
    --primary-800: #7c0a18;
    --primary-900: #560711;
    --primary-950: #3a050b;

    /* Primary colors — brand red */
    --primary: var(--primary-600);
    --primary-lifted: var(--primary-700);
    --primary-accented: var(--primary-800);

    /* Secondary palette — brand blue */
    --secondary-50: #f0f0fe;
    --secondary-100: #ddddfd;
    --secondary-200: #b6b6fb;
    --secondary-300: #8686f8;
    --secondary-400: #4747f5;
    --secondary-500: #0d0df2;
    --secondary-600: #0e0ea8;
    --secondary-700: #060673;
    --secondary-800: #040442;
    --secondary-900: #020227;
    --secondary-950: #010118;

    /* Secondary colors — brand blue */
    --secondary: var(--secondary-600);
    --secondary-lifted: var(--secondary-700);
    --secondary-accented: var(--secondary-800);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding — softer, more rounded corners */
    --rounding-sm: 0.375rem;
    --rounding-md: 0.75rem;
    --rounding-lg: 1.25rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* *****************************************************
    Brand color overrides — replaces the old hardcoded
    blue (#336699) throughout the compiled theme.min.css
    with the brand red (#DD1931), matching the palette
    defined above. This file loads after theme.min.css,
    so these rules take effect on the live site.
***************************************************** */

a,
.btn-link,
.text-primary,
.status-onhold,
.status-payment-pending,
.status-delivered {
    color: #dd1931;
}
a:hover,
.text-primary:hover,
.text-primary:focus,
a.text-primary:hover,
a.text-primary:focus {
    color: #ab0e21;
}
.text-primary { color: #dd1931 !important; }
a.text-primary:hover, a.text-primary:focus { color: #ab0e21 !important; }

.btn-primary {
    color: #fff;
    background-color: #dd1931;
    border-color: #dd1931;
}
.btn-primary:hover {
    color: #fff;
    background-color: #ab0e21;
    border-color: #7c0a18;
}
.btn-primary:focus,
.btn-primary.focus {
    color: #fff;
    background-color: #ab0e21;
    border-color: #7c0a18;
    box-shadow: 0 0 0 0.2rem rgba(221, 25, 49, 0.5);
}
.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff;
    background-color: #dd1931;
    border-color: #dd1931;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #7c0a18;
    border-color: #560711;
}

.btn-outline-primary {
    color: #dd1931;
    border-color: #dd1931;
}
.btn-outline-primary:hover {
    color: #fff;
    background-color: #dd1931;
    border-color: #dd1931;
}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: #dd1931;
}
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: #dd1931;
    border-color: #dd1931;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #dd1931;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #dd1931;
    border-color: #dd1931;
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    background-color: #dd1931;
    border-color: #dd1931;
}
.custom-range::-webkit-slider-thumb { background-color: #dd1931; }
.custom-range::-moz-range-thumb { background-color: #dd1931; }
.custom-range::-ms-thumb { background-color: #dd1931; }

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #dd1931;
}

.page-link { color: #dd1931; }
.page-item.active .page-link {
    background-color: #dd1931;
    border-color: #dd1931;
}

.badge-primary { color: #fff; background-color: #dd1931; }
a.badge-primary:hover,
a.badge-primary:focus {
    color: #fff;
    background-color: #ab0e21;
}

.progress-bar { background-color: #dd1931; }
.list-group-item.active {
    background-color: #dd1931;
    border-color: #dd1931;
}

.bg-primary { background-color: #dd1931 !important; }
a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover, button.bg-primary:focus {
    background-color: #7c0a18 !important;
}
.border-primary { border-color: #dd1931 !important; }

.input-group .btn-reveal-pw:hover,
.input-group .btn-reveal-pw:active {
    color: #dd1931;
}

.domain-pricing .tld-pricing-header div:nth-child(odd) {
    background-color: #dd1931;
}

/* *****************************************************
    Homepage structural rebuild — new section components
    inspired by the Uhost reference layout
***************************************************** */

/* --- Hero --- */
.sws-hero {
    background: linear-gradient(135deg, #171a21 0%, #2a1420 100%);
    color: #fff;
    padding: 80px 0;
}
.sws-hero-title {
    font-size: 2.75rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
}
.sws-hero-subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.75);
    max-width: 640px;
    margin: 0 auto 2rem;
}
.sws-hero-ctas .btn {
    margin: 0 8px;
    border-radius: var(--rounding-lg);
    padding: 12px 32px;
}
.sws-hero-ctas .btn-outline-light {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}
.sws-hero-ctas .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* --- Eyebrow label (small uppercase tag above section headings) --- */
.sws-eyebrow {
    color: #dd1931;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

/* --- Feature highlights row --- */
.sws-highlights {
    padding: 60px 0 20px;
    background-color: #fff;
}
.sws-highlight-card {
    padding: 24px 12px;
}
.sws-highlight-card i {
    font-size: 2.25rem;
    color: #dd1931;
    margin-bottom: 12px;
    display: block;
}
.sws-highlight-card h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

/* --- Services / product group cards --- */
.sws-services {
    padding: 60px 0;
    background-color: var(--bg-muted);
}
.sws-service-card {
    background: #fff;
    border-radius: var(--rounding-lg);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 32px 24px;
    height: 100%;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sws-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.sws-service-card-title {
    font-weight: 700;
    margin-bottom: 0.75rem;
}

/* --- Domain search --- */
.sws-domain-search {
    padding: 50px 0;
    background-color: #fff;
    border-top: 1px solid var(--border-muted);
    border-bottom: 1px solid var(--border-muted);
}
.sws-domain-search-form {
    max-width: 500px;
    margin: 24px auto 0;
}
.sws-domain-search-input-group .form-control {
    border-radius: var(--rounding-md) 0 0 var(--rounding-md);
    padding: 12px 16px;
    height: auto;
}
.sws-domain-search-input-group .btn {
    border-radius: 0 var(--rounding-md) var(--rounding-md) 0;
}

/* --- Trust banner --- */
.sws-banner {
    padding: 50px 0;
    background-color: #dd1931;
    color: #fff;
}
.sws-banner h3 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.sws-banner p {
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* --- What's included --- */
.sws-included {
    padding: 60px 0;
    background-color: #fff;
}
.sws-included-icon {
    font-size: 2rem;
    color: #0e0ea8;
    margin-bottom: 12px;
    display: block;
}

/* --- Testimonials --- */
.sws-testimonials {
    padding: 60px 0;
    background-color: var(--bg-muted);
}
.sws-testimonial-card {
    background: #fff;
    border-radius: var(--rounding-lg);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 28px 24px;
    height: 100%;
}
.sws-testimonial-name {
    font-weight: 600;
    color: var(--text-lifted);
    margin: 1rem 0 0;
}

/* --- Stats --- */
.sws-stats {
    padding: 60px 0;
    background-color: #171a21;
    color: #fff;
}
.sws-stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #dd1931;
}
.sws-stat-label {
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

/* --- FAQ --- */
.sws-faq {
    padding: 60px 0;
    background-color: #fff;
    max-width: 800px;
    margin: 0 auto;
}
.sws-faq-item {
    border-bottom: 1px solid var(--border-muted);
    padding: 20px 0;
}
.sws-faq-item h5 {
    font-weight: 600;
    margin-bottom: 8px;
}

/* --- Quick actions (existing WHMCS functionality section) --- */
.sws-quick-actions {
    padding: 40px 0 60px;
    background-color: #fff;
}

/* *****************************************************
    Full-bleed breakout — the Twenty-One layout wraps all
    page content in a fixed-width .container. These rules
    let the homepage sections escape it and span the full
    viewport width, edge to edge.
***************************************************** */
.sws-hero,
.sws-account-hero,
.sws-highlights,
.sws-services,
.sws-domain-search,
.sws-banner,
.sws-included,
.sws-testimonials,
.sws-stats,
.sws-faq,
.sws-quick-actions {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}

/* FAQ keeps a readable max-width for its inner content only */
.sws-faq {
    max-width: none;
}
.sws-faq .container-fluid {
    max-width: 800px;
    margin: 0 auto;
}

/* *****************************************************
    Uhost-style header / navigation
    Top brand bar: white with logo + search + cart
    Main nav bar: brand red with white links
***************************************************** */

/* Main navigation bar — brand red like Uhost's pink nav */
.main-navbar-wrapper {
    background-color: #dd1931;
    padding-top: 0;
    padding-bottom: 0;
}
.main-navbar-wrapper .navbar-nav > li > a {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600;
    padding: 16px 18px;
    display: inline-block;
    transition: background-color 0.2s ease;
}
.main-navbar-wrapper .navbar-nav > li > a:hover,
.main-navbar-wrapper .navbar-nav > li.active > a {
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0.12);
    text-decoration: none;
}
.main-navbar-wrapper .dropdown-menu {
    border-radius: 0 0 var(--rounding-md) var(--rounding-md);
    border: none;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
}

/* Logged-in topbar — dark navy like Uhost's top strip */
header.header .topbar {
    background-color: #171a21 !important;
}

/* Brand/logo bar stays white; slightly more padding */
header.header .navbar.navbar-light {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Breadcrumb hidden on the homepage only (marketing look, no "Portal Home") */
body.sws-homepage .master-breadcrumb {
    display: none;
}

/* Homepage main body: remove default gutters so hero touches the nav */
body.sws-homepage #main-body {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
}

/* *****************************************************
    Footer — white background, black text
***************************************************** */
footer#footer {
    background-color: #fff;
    color: #1a1c26;
    padding: 50px 0 30px;
    border-top: 1px solid var(--border-muted);
}
footer#footer a,
footer#footer .nav-link {
    color: #1a1c26;
}
footer#footer a:hover,
footer#footer .nav-link:hover {
    color: #dd1931;
}
footer#footer .copyright {
    color: rgba(0, 0, 0, 0.5);
}
footer#footer .btn {
    color: #1a1c26;
}

/* *****************************************************
    Single unified navbar row (logo + menu + cart/login),
    replacing the separate search-box row entirely
***************************************************** */
.main-navbar-wrapper .navbar-brand {
    background-color: #fff;
    padding: 6px 14px;
    border-radius: var(--rounding-md);
    display: inline-flex;
    align-items: center;
}
.main-navbar-wrapper .logo-img {
    max-height: 34px;
}
.main-navbar-wrapper .cart-btn,
.main-navbar-wrapper .toolbar .btn {
    color: #fff !important;
}
.main-navbar-wrapper .navbar-collapse {
    justify-content: center;
}
@media (min-width: 1200px) {
    .main-navbar-wrapper .container {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }
}

/* *****************************************************
    Nav bar recolor — white background, black text
    (overrides the earlier red nav bar treatment above)
***************************************************** */
.main-navbar-wrapper {
    background-color: #fff;
    border-bottom: 1px solid var(--border-muted);
}
.main-navbar-wrapper .navbar-nav > li > a {
    color: #1a1c26 !important;
}
.main-navbar-wrapper .navbar-nav > li > a:hover,
.main-navbar-wrapper .navbar-nav > li.active > a {
    color: #dd1931 !important;
    background-color: var(--bg-muted);
}
.main-navbar-wrapper .cart-btn,
.main-navbar-wrapper .toolbar .btn {
    color: #1a1c26 !important;
}
.main-navbar-wrapper .navbar-brand {
    background-color: transparent;
    padding: 6px 0;
}

/* Hide the theme's JS overflow "More" bucket entirely — all nav items
   are marked no-collapse, so the bucket is always empty */
#nav .collapsable-dropdown {
    display: none !important;
}

/* --- Account Management: logged-out hero (shorter than main hero) --- */
.sws-account-hero {
    background: linear-gradient(135deg, #171a21 0%, #2a1420 100%);
    color: #fff;
    padding: 40px 0;
}
.sws-account-hero h2 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.sws-account-hero .btn-outline-light {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}
.sws-account-hero .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.sws-account-login-ctas {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.sws-account-login-ctas .btn {
    margin: 0 8px;
    border-radius: var(--rounding-lg);
    padding: 12px 32px;
}
.sws-account-login-forgot {
    margin-top: 20px;
}
.sws-account-login-forgot a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: underline;
}