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

    ** Custom Stylesheet **

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

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

/* Elitehost Cloud brand fonts: Comfortaa for headings, Montserrat for body ΓÇö
   matches the main site (elitehost.co.ke) so the client area reads as the same brand. */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

:root {
    --white: #fff;

    --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;

    /* Primary shades ΓÇö Elitehost Cloud brand navy blue, matching the main
       site's navy-primary palette (elitehost.co.ke) */
    --primary-50: #eef2f9;
    --primary-100: #dbe6f3;
    --primary-200: #b0c8e6;
    --primary-300: #85aad9;
    --primary-400: #4d7ab8;
    --primary-500: #2e5289;
    --primary-600: #1e3b6b;
    --primary-700: #17304f;
    --primary-800: #13294e;
    --primary-900: #0b1830;
    --primary-950: #060e1c;

    --primary: var(--primary-500);
    --primary-lifted: var(--primary-400);
    --primary-accented: var(--primary-300);

    --secondary: #f8b828;
    --secondary-lifted: #f8ce68;
    --secondary-accented: #fadfa0;

    --success: #00a63e;
    --info: #155dfc;
    --notice: #7f22fe;
    --warning: #f54a00;
    --error: #e7000b;
}

/* Typography ΓÇö matches elitehost.co.ke: Comfortaa for headings, Montserrat for body */
body, input, button, select, textarea {
    font-family: 'Montserrat', "Open Sans", Verdana, Tahoma, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Comfortaa', "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
}
section#header .logo-text {
    font-family: 'Comfortaa', "Raleway", sans-serif;
}

/* Brand colors ΓÇö repaint the stock Six theme's blue chrome to Elitehost orange */
a { color: var(--primary-500); }
a:hover, a:focus { color: var(--primary-600); }

.navbar-main {
    background-color: var(--primary-900) !important;
}
.navbar-main li.account {
    background-color: var(--primary-950) !important;
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .active > a:focus,
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main .navbar-nav > .open > a:focus {
    background-color: var(--primary-950) !important;
}

.btn-primary {
    background-color: var(--primary-500) !important;
    border-color: var(--primary-600) !important;
    border-radius: 999px !important;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--primary-600) !important;
    border-color: var(--primary-700) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(248, 184, 40, 0.3);
}

/* Branded hero for the login/landing page (/cloud/ for guests) */
.auth-hero {
    background: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-700) 60%, var(--primary-600) 100%);
    color: #fff;
    text-align: center;
    padding: 3rem 1.5rem 4rem;
    margin: -20px -15px 0;
    border-radius: 5px 5px 0 0;
}
.auth-hero-logo { height: 40px; width: auto; margin-bottom: 1.5rem; }
.auth-hero h1 { color: #fff; font-size: 1.75rem; margin: 0 0 0.5rem; }
.auth-hero p { color: rgba(255, 255, 255, 0.85); margin: 0; font-size: 1rem; }

.auth-card {
    background: #fff;
    max-width: 640px;
    margin: -2.5rem auto 2rem;
    padding: 2rem 2rem 1rem;
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(11, 24, 48, 0.18);
    position: relative;
}

@media (max-width: 767px) {
    .auth-hero { margin: -20px -15px 0; padding: 2rem 1rem 3rem; }
    .auth-card { margin-top: -2rem; padding: 1.5rem 1.25rem 0.5rem; }
}

/* Public landing page (/cloud/ "Portal Home" ΓÇö two-column domain search hero) */
section#home-banner {
    background: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-700) 60%, var(--primary-600) 100%) !important;
    padding: 4.5rem 0 !important;
    overflow: hidden;
}
#home-banner .home-banner-grid {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    align-items: center !important;
    gap: 3rem !important;
}
#home-banner .home-banner-text { text-align: left !important; float: none !important; width: auto !important; }
.home-banner-eyebrow {
    display: inline-block;
    background: rgba(248, 184, 40, 0.15);
    color: var(--secondary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
section#home-banner .home-banner-text h1 {
    color: #fff;
    font-size: 2.1rem;
    line-height: 1.25;
    margin: 0 0 0.75rem;
}
#home-banner .home-banner-sub {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 1rem !important;
    margin: 0 0 1.5rem !important;
    max-width: 480px !important;
    float: none !important;
}
#home-banner .home-banner-text .input-group-lg {
    max-width: 480px !important;
    width: 100% !important;
    float: none !important;
    display: table !important;
    table-layout: fixed !important;
}
/* Six's own theme hard-codes .advanced-input .input-group-btn to
   position:absolute; right:185px; top:65px ΓÇö tuned for its original wider
   search bar. In our narrower hero column that fixed offset lands on top
   of the captcha below it. Force it back into normal flow. */
#home-banner .home-banner-text .input-group-btn {
    position: static !important;
    right: auto !important;
    top: auto !important;
    display: table-cell !important;
    vertical-align: top !important;
}
#home-banner .home-banner-text .input-group-lg > .form-control,
#home-banner .home-banner-text .input-group-lg > .input-group-btn > .btn {
    height: 46px !important;
    padding: 8px 14px !important;
    font-size: 15px !important;
}
section#home-banner .btn.search {
    background-color: var(--secondary) !important;
    color: var(--primary-900) !important;
    font-weight: 600 !important;
}
section#home-banner .btn.transfer {
    background-color: rgba(255, 255, 255, 0.18) !important;
}
#home-banner .home-banner-trust {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
    margin-top: 1.5rem !important;
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    float: none !important;
}
.home-banner-trust span { display: inline-flex; align-items: center; gap: 0.4rem; }
.home-banner-trust i { color: var(--secondary); }
#home-banner .home-banner-visual {
    float: none !important;
    width: auto !important;
}
#home-banner .home-banner-visual img {
    width: 100% !important;
    max-width: 460px !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}
/* Force the AI-prompt textarea (when advanced search is on) to look like a
   normal single-line domain box instead of a multi-row paragraph field */
section#home-banner textarea#message {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    resize: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}
/* The advanced-search extras (TLD filter, length filter, safe-search) don't
   fit cleanly in a compact hero ΓÇö hide them here (they're the inner <span>,
   not the outer <div> that wraps the whole search box ΓÇö both share the same
   3 classes, so the tag name is what disambiguates them). Full options stay
   available on the dedicated domain search page. */
#home-banner .home-banner-text span.input-group.input-group-lg.advanced-input {
    display: none !important;
}
#home-banner .home-banner-text form {
    display: flex !important;
    flex-direction: column !important;
}
#home-banner .home-banner-text form > *:last-child {
    clear: both !important;
    margin-top: 1rem !important;
    position: relative !important;
    z-index: 1 !important;
}
@media (max-width: 900px) {
    .home-banner-grid { grid-template-columns: 1fr; gap: 2rem; }
    .home-banner-text { text-align: center; }
    .home-banner-sub, .home-banner-text .input-group-lg { margin-inline: auto; }
    .home-banner-trust { justify-content: center; }
    .home-banner-visual { order: -1; }
    .home-banner-visual img { height: 220px; }
}

.home-shortcuts {
    background: var(--primary-800) !important;
}
.home-shortcuts li {
    border-right-color: rgba(255, 255, 255, 0.15) !important;
}
.home-shortcuts li:first-child {
    border-left-color: rgba(255, 255, 255, 0.15) !important;
}
.home-shortcuts li i {
    color: var(--secondary);
}
@media (max-width: 767px) {
    .home-shortcuts li {
        border-bottom-color: rgba(255, 255, 255, 0.15) !important;
    }
}

/* Pre-footer CTA banner (guests only ΓÇö matches elitehost.co.ke's homepage CTA) */
.cta-banner {
    background: var(--primary-900);
    color: #fff;
    padding: 3rem 0;
}
.cta-banner h2 { margin: 0 0 0.5rem; }
.cta-banner-sub {
    color: rgba(255, 255, 255, 0.85);
    margin: 0 auto;
}
.cta-banner-btn { margin-top: 1.25rem; }

/* Footer ΓÇö matches elitehost.co.ke's footer structure/branding */
.site-footer {
    background: var(--primary-900);
    color: rgba(255, 255, 255, 0.75);
    padding: 3rem 0 1.5rem;
}
.site-footer h4 {
    color: #fff;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul li { padding: 0.2rem 0; }
.site-footer a { color: rgba(255, 255, 255, 0.75); }
.site-footer a:hover, .site-footer a:focus { color: var(--secondary); }
.footer-brand-tagline {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    max-width: 280px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: 2rem;
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
}
.payment-badges { display: flex; gap: 0.75rem; align-items: center; }
.payment-badges span {
    background: rgba(255, 255, 255, 0.08);
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    font-size: 0.75rem;
}
@media (max-width: 860px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* Homepage body content ΓÇö feature grid, how-it-works, CTA */
.home-section-title {
    text-align: center;
    font-size: 1.75rem;
    color: var(--primary-900);
    margin: 0 0 2.5rem;
}
.home-features { padding: 4rem 0; background: var(--neutral-50); }
.home-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.home-feature-card {
    background: #fff;
    border: 1px solid var(--neutral-200);
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    text-align: left;
    box-shadow: 0 4px 16px rgba(11, 24, 48, 0.05);
}
.home-feature-icon {
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-50);
    color: var(--primary-600);
    border-radius: 10px;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.home-feature-card h3 { font-size: 1.05rem; color: var(--primary-900); margin: 0 0 0.5rem; }
.home-feature-card p { font-size: 0.9rem; color: var(--neutral-600); margin: 0; }

.home-steps { padding: 4rem 0; background: #fff; }
.home-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.home-step { text-align: center; }
.home-step-num {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
    background: var(--secondary);
    color: var(--primary-900);
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 50%;
}
.home-step h3 { font-size: 1.05rem; color: var(--primary-900); margin: 0 0 0.5rem; }
.home-step p { font-size: 0.9rem; color: var(--neutral-600); margin: 0; }

.home-announcements { padding: 3rem 0; background: var(--neutral-50); }

.home-cta {
    padding: 4rem 0;
    text-align: center;
    background: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-700) 100%);
    color: #fff;
}
.home-cta h2 { color: #fff; margin: 0 0 0.5rem; }
.home-cta p { color: rgba(255, 255, 255, 0.8); margin: 0 0 1.75rem; }
.home-cta .btn-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    margin-left: 0.75rem;
}
.home-cta .btn-outline:hover { border-color: #fff; color: #fff; }

@media (max-width: 900px) {
    .home-features-grid { grid-template-columns: repeat(2, 1fr); }
    .home-steps-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 560px) {
    .home-features-grid { grid-template-columns: 1fr; }
}

/* Elitehost WHMCS responsive refinement */
#home-banner .home-banner-text h1 {
    font-size: 40px !important;
    line-height: 1.15 !important;
}

#home-banner .home-banner-sub {
    font-size: 16px !important;
    line-height: 1.55 !important;
}

#home-banner .home-banner-text .input-group-lg > .form-control,
#home-banner .home-banner-text .input-group-btn > .btn {
    height: 52px !important;
}

@media (max-width: 767px) {
    body {
        font-size: 15px;
    }

    section#header .top-nav > li > a,
    section#header .top-nav > li > a.btn,
    .navbar-toggle,
    .btn:not(.btn-xs):not(.close),
    button:not(.close),
    input[type="submit"] {
        min-height: 44px;
    }

    .navbar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        padding: 9px 10px;
    }

    .form-control,
    select.form-control,
    input.form-control {
        min-height: 44px;
        font-size: 16px;
    }

    textarea.form-control {
        min-height: 120px;
    }

    section#home-banner {
        padding: 2.75rem 0 3rem !important;
    }

    #home-banner .home-banner-grid {
        grid-template-columns: 1fr !important;
        gap: 1.75rem !important;
    }

    #home-banner .home-banner-text {
        text-align: left !important;
    }

    section#home-banner .home-banner-text h1 {
        font-size: 30px !important;
        line-height: 1.2 !important;
    }

    #home-banner .home-banner-sub {
        font-size: 15px !important;
    }

    #home-banner .home-banner-text .input-group-lg {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        max-width: none !important;
        table-layout: auto !important;
    }

    #home-banner .home-banner-text .input-group-lg > .form-control {
        display: block !important;
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        border-radius: 6px !important;
    }

    #home-banner .home-banner-text .input-group-btn {
        position: static !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    #home-banner .home-banner-text .input-group-btn > .btn {
        display: block !important;
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        border-radius: 6px !important;
    }

    #home-banner .home-banner-trust {
        justify-content: flex-start !important;
        gap: 12px 18px !important;
    }

    #home-banner .home-banner-visual {
        order: -1;
    }

    #home-banner .home-banner-visual img {
        max-height: 210px !important;
    }

    .header-lined h1,
    #order-standard_cart .header-lined h1 {
        font-size: 28px !important;
        line-height: 1.25 !important;
    }

    .domain-selection-options .option > label {
        display: flex;
        align-items: center;
        min-height: 44px;
        gap: 8px;
    }

    .domain-selection-options input[type="radio"],
    input[type="checkbox"] {
        min-width: 18px;
        min-height: 18px;
    }

    #order-standard_cart .domain-input-group .btn-block,
    #order-standard_cart #btnShowSidebar,
    #order-standard_cart .btn-continue-shopping {
        min-height: 44px;
    }

    .panel,
    .card,
    .home-feature-card {
        border-radius: 8px;
    }

    .cta-banner {
        padding: 2.25rem 16px;
    }

    .cta-banner h2 {
        font-size: 24px;
        line-height: 1.25;
    }

    .site-footer {
        padding-top: 2.5rem;
    }

    .footer-grid {
        gap: 1.5rem;
    }
}

@media (max-width: 420px) {
    section#header .logo img {
        max-width: 150px;
        height: auto;
    }

    section#header .top-nav > li > a {
        padding-inline: 8px;
    }

    .home-features,
    .home-steps {
        padding-block: 3rem;
    }
}
/* End Elitehost WHMCS responsive refinement */