:root{
  --ws-ink:#10283a;--ws-muted:#64737d;--ws-teal:#078b9d;--ws-teal-dark:#056e7a;
  --ws-green:#4f9f18;--ws-green-dark:#3f8112;--ws-line:#dfe8e9;--ws-soft:#f4faf9;
  --ws-cream:#fbf8f1;--ws-warm:#fff8e8;--ws-white:#fff;--ws-shadow:0 12px 34px rgba(16,40,58,.075);
}
html,body,body.primary-bg-color{background:#fff!important;color:var(--ws-ink)!important;font-family:Arial,Helvetica,sans-serif!important;font-size:16px}
*{box-sizing:border-box} a{color:var(--ws-teal)!important} a:hover{color:var(--ws-teal-dark)!important;text-decoration:none}.container{max-width:1180px!important}
body:before{content:"Web Secured Hosting Canada · Client Area";display:block;padding:7px 16px;text-align:center;background:#fff5d8;border-bottom:1px solid #f0dfac;color:#6d5411;font-size:12px;font-weight:700}
#header.header,header.header,.header,.navbar,.main-navbar-wrapper,.main-navbar-wrapper .navbar,.navbar-main{background:#fff!important;color:var(--ws-ink)!important;border-color:var(--ws-line)!important;box-shadow:none!important}
#header.header{border-bottom:1px solid var(--ws-line)!important}#header .navbar-light{min-height:92px}#header .navbar-brand{padding:5px 0!important;display:flex;align-items:center}
#header .navbar-brand .logo-img,#header .logo-img,.header .logo-img{width:auto!important;max-width:240px!important;max-height:74px!important;object-fit:contain!important}
#header .main-navbar-wrapper{border-top:1px solid #eef3f4!important}#header .main-navbar-wrapper .container{min-height:52px}
#header .navbar-nav .nav-link,#header .navbar-nav a,.main-navbar-wrapper a{color:var(--ws-ink)!important;font-weight:700!important;font-size:14px!important}
#header .navbar-nav .nav-link:hover,#header .navbar-nav a:hover{color:var(--ws-teal)!important}
#header .toolbar .btn,#header .cart-btn{background:#fff!important;border:1px solid var(--ws-teal)!important;color:var(--ws-teal)!important;border-radius:10px!important}
#header .badge-info{background:var(--ws-green)!important}.master-breadcrumb{background:#f7faf9!important;border-bottom:1px solid var(--ws-line)!important}.master-breadcrumb .breadcrumb{background:transparent!important;margin:0!important}
#main-body{background:#fff!important;padding-top:34px!important;padding-bottom:62px!important}.primary-content{color:var(--ws-ink)!important}.header-lined{border-bottom-color:var(--ws-line)!important}.header-lined h1,.page-header,h1,h2,h3,h4,h5{color:var(--ws-ink)!important;font-family:Arial,Helvetica,sans-serif!important}.header-lined h1{font-weight:800!important;letter-spacing:-.025em}
.card,.panel,.modal-content,.list-group,.tiles .tile,.client-home-cards .card{background:#fff!important;border:1px solid var(--ws-line)!important;border-radius:15px!important;box-shadow:var(--ws-shadow)!important;color:var(--ws-ink)!important}.card-header,.panel-heading,.card-footer{background:var(--ws-soft)!important;border-color:var(--ws-line)!important;color:var(--ws-ink)!important}.card-header,.panel-heading{font-weight:800!important}.list-group-item{background:#fff!important;border-color:#edf2f2!important;color:var(--ws-ink)!important}
.btn{border-radius:10px!important;font-weight:800!important;box-shadow:none!important}.btn-primary,.btn-success,.btn-info,button.btn-primary,input.btn-primary{background:var(--ws-teal)!important;border-color:var(--ws-teal)!important;color:#fff!important}.btn-primary:hover,.btn-success:hover,.btn-info:hover{background:var(--ws-teal-dark)!important;border-color:var(--ws-teal-dark)!important;color:#fff!important}.btn-default,.btn-secondary,.btn-outline-primary{background:#fff!important;border:1px solid var(--ws-teal)!important;color:var(--ws-teal)!important}
.form-control,.custom-select,.input-group-text,select.form-control,textarea.form-control{background:#fff!important;color:var(--ws-ink)!important;border:1px solid #cbd8da!important;border-radius:10px!important;box-shadow:none!important}.form-control:focus,.custom-select:focus{border-color:var(--ws-teal)!important;box-shadow:0 0 0 3px rgba(7,139,157,.12)!important}label{color:var(--ws-ink)!important;font-weight:700}
.alert-info{background:#eef9fa!important;border-color:#cbe9ec!important;color:var(--ws-ink)!important}.alert-success{background:#f2faec!important;border-color:#d5ebc8!important;color:#31551d!important}.alert-warning{background:var(--ws-warm)!important;border-color:#efdca8!important;color:#6c5416!important}
#footer.footer,footer.footer,.footer{background:#f8faf9!important;border-top:1px solid var(--ws-line)!important;color:var(--ws-muted)!important}#footer.footer a,.footer a{color:var(--ws-teal)!important}
.bg-dark,.bg-black,.bg-secondary,section.bg-dark,div.bg-dark{background:#fff!important;color:var(--ws-ink)!important}.text-light,.text-white{color:var(--ws-ink)!important}.border-dark{border-color:var(--ws-line)!important}
@media(max-width:991px){#header .navbar-light{min-height:74px}#header .navbar-brand .logo-img,#header .logo-img{max-width:190px!important;max-height:58px!important}}
@media(max-width:575px){body:before{font-size:11px}#header .navbar-brand .logo-img,#header .logo-img{max-width:158px!important;max-height:50px!important}}

/* Web Secured Hosting - Canadian localisation branding */
#footer .iti-flag.us,
.footer .iti-flag.us {
    background-image: none !important;
    background: transparent !important;
    width: 24px !important;
    height: 16px !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid #ddd !important;
}

/* Canadian flag */
#footer .iti-flag.us::before,
.footer .iti-flag.us::before {
    content: "🇨🇦";
    position: absolute;
    left: -1px;
    top: -5px;
    width: 26px;
    height: 22px;
    font-size: 22px;
    line-height: 22px;
}

/* ============================================================
   Web Secured Hosting - Footer localisation final styling
   ============================================================ */

/* Make English / CAD readable */
#footer button[data-target="#modalChooseLanguage"],
.footer button[data-target="#modalChooseLanguage"] {
    color: #10283a !important;
    background: transparent !important;
    border: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

/* Hide WHMCS US sprite */
#footer .iti-flag.us,
.footer .iti-flag.us {
    background-image: none !important;
    background-position: initial !important;
    background-color: #ffffff !important;
    width: 24px !important;
    height: 16px !important;
    display: inline-block !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid #d7d7d7 !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
}

/* Red bars of Canadian flag */
#footer .iti-flag.us::before,
.footer .iti-flag.us::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(
            to right,
            #d80621 0%,
            #d80621 25%,
            #ffffff 25%,
            #ffffff 75%,
            #d80621 75%,
            #d80621 100%
        ) !important;
}

/* Simple maple-leaf centre mark */
#footer .iti-flag.us::after,
.footer .iti-flag.us::after {
    content: "♦" !important;
    position: absolute !important;
    left: 8px !important;
    top: -3px !important;
    color: #d80621 !important;
    font-size: 13px !important;
    line-height: 16px !important;
    transform: rotate(45deg) !important;
}


/* Web Secured hosting storefront grid only */
#products.price-table-container {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
}

#products.price-table-container .price-table {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

#products.price-table-container .price-table .price-table-container {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

#products.price-table-container .price-table .price-table-footer {
    margin-top: auto !important;
}

#products.price-table-container .btn,
#products.price-table-container .btn-primary,
#products.price-table-container a.btn {
    opacity: 1 !important;
    visibility: visible !important;
    color: #fff !important;
    background: #176b68 !important;
    border-color: #176b68 !important;
}

#products.price-table-container .btn:hover,
#products.price-table-container .btn-primary:hover,
#products.price-table-container a.btn:hover {
    color: #fff !important;
    background: #125754 !important;
    border-color: #125754 !important;
}

@media (max-width: 1199px) {
    #products.price-table-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    #products.price-table-container {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}
/* Correct WHMCS premium comparison product grid */
#products.price-table-container > ul {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#products.price-table-container > ul > li {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    display: block !important;
}

#products.price-table-container .price-table {
    width: 100% !important;
    height: 100% !important;
}

#products.price-table-container .order-button {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
}

@media (max-width: 1199px) {
    #products.price-table-container > ul {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    #products.price-table-container > ul {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}
#products.price-table-container > ul > li {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}
/* Fix outer container - grid belongs on child UL only */
#products.price-table-container {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
}
/* Desktop-only hosting card alignment */
@media (min-width: 1200px) {

    #products.price-table-container .price-table .top-head {
        min-height: 228px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #products.price-table-container .price-table .top-area {
        min-height: 58px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 12px !important;
    }

    #products.price-table-container .price-table .top-area h4 {
        line-height: 24px !important;
        margin: 0 !important;
    }

    #products.price-table-container .price-table .price-area {
        margin-top: auto !important;
        width: 100% !important;
    }
}
/* =========================================================
   Web Hosting Storefront - White Card Visual Style
   Colour treatment only - do not alter grid/layout
   ========================================================= */

#order-premium_comparison #products.price-table-container .price-table {
    background: #ffffff !important;
    border: 1px solid #d9e2e6 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(15, 42, 58, 0.06) !important;
}

/* Remove the old dark-blue header treatment */
#order-premium_comparison #products.price-table-container .top-head,
#order-premium_comparison #products.price-table-container .top-area,
#order-premium_comparison #products.price-table-container .price-area {
    background: #ffffff !important;
    background-image: none !important;
}

/* Plan names */
#order-premium_comparison #products.price-table-container .top-area h4,
#order-premium_comparison #products.price-table-container .top-area h4 a {
    color: #078ea0 !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}

/* Prices */
#order-premium_comparison #products.price-table-container .price-area,
#order-premium_comparison #products.price-table-container .price-area *,
#order-premium_comparison #products.price-table-container .price {
    color: #08283a !important;
    text-shadow: none !important;
}

/* Order buttons */
#order-premium_comparison #products.price-table-container .order-button,
#order-premium_comparison #products.price-table-container .order-button:hover,
#order-premium_comparison #products.price-table-container .order-button:focus {
    background: #078ea0 !important;
    background-image: none !important;
    border: 1px solid #078ea0 !important;
    color: #ffffff !important;
    text-shadow: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

#order-premium_comparison #products.price-table-container .order-button:hover,
#order-premium_comparison #products.price-table-container .order-button:focus {
    background: #067989 !important;
    border-color: #067989 !important;
}
#btnDomainContinue:disabled,
#btnDomainContinue.disabled {
    display: none !important;
}

/* Support ticket field widths - exact WHMCS selectors */
@media (min-width:768px){
.form-group:has(> #inputDepartment){flex:0 0 33.333333% !important;max-width:33.333333% !important;}
.form-group:has(> #inputRelatedService){flex:0 0 41.666667% !important;max-width:41.666667% !important;}
.form-group:has(> #inputPriority){flex:0 0 25% !important;max-width:25% !important;}
}
#inputDepartment,#inputRelatedService,#inputPriority{width:100% !important;max-width:none !important;}

/* Keep Recent Tickets subjects inside the sidebar */
.card-sidebar[menuItemName="Recent Tickets"] .sidebar-menu-item-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.card-sidebar[menuItemName="Recent Tickets"] .sidebar-menu-item-label {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-sidebar[menuItemName="Recent Tickets"] .sidebar-menu-item-badge {
    flex: 0 0 auto;
    margin-left: 8px;
    white-space: nowrap;
}

/* ========================================
   Edmonton-inspired WHMCS navigation
   Match public web-hosting.ca header
   ======================================== */

/* Normal top navigation */
#header .navbar-nav .nav-link,
#header .navbar-nav > li > a,
#header .main-navbar-wrapper .navbar-nav a{
    color:#002F6C !important;
}

/* Hover */
#header .navbar-nav .nav-link:hover,
#header .navbar-nav > li > a:hover,
#header .main-navbar-wrapper .navbar-nav a:hover{
    color:#FF4C00 !important;
}

/* Current / active page */
#header .navbar-nav .nav-item.active > .nav-link,
#header .navbar-nav li.active > a,
#header .navbar-nav .nav-link.active{
    color:#FF4C00 !important;
    position:relative;
}

/* Orange active underline */
#header .navbar-nav .nav-item.active > .nav-link::after,
#header .navbar-nav li.active > a::after,
#header .navbar-nav .nav-link.active::after{
    content:"";
    position:absolute;
    left:.5rem;
    right:.5rem;
    bottom:2px;
    height:3px;
    background:#FF4C00;
    border-radius:3px;
}


/* ========================================
   WHMCS MAIN NAVIGATION
   Edmonton Oilers inspired palette
   ======================================== */

/* Normal navigation */
#header .main-navbar-wrapper #nav > li > a,
#header .main-navbar-wrapper .navbar-nav > li > a{
    color:#002F6C !important;
    font-weight:700 !important;
}

/* Hover */
#header .main-navbar-wrapper #nav > li > a:hover,
#header .main-navbar-wrapper .navbar-nav > li > a:hover{
    color:#FF4C00 !important;
}

/* Active/current WHMCS navigation item */
#header .main-navbar-wrapper #nav > li.active > a,
#header .main-navbar-wrapper #nav > li.active > a:hover,
#header .main-navbar-wrapper #nav > li.current > a,
#header .main-navbar-wrapper #nav > li.active > a:focus{
    color:#FF4C00 !important;
    background:transparent !important;
    position:relative;
}

/* Active orange underline */
#header .main-navbar-wrapper #nav > li.active > a::after,
#header .main-navbar-wrapper #nav > li.current > a::after{
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    bottom:4px;
    height:3px;
    background:#FF4C00;
    border-radius:3px;
}

/* Dropdown parent when one of its children is active */
#header .main-navbar-wrapper #nav > li.dropdown.active > a{
    color:#FF4C00 !important;
}

/* Dropdown links remain Oilers blue */
#header .main-navbar-wrapper .dropdown-menu a{
    color:#002F6C !important;
}

/* Dropdown hover */
#header .main-navbar-wrapper .dropdown-menu a:hover{
    color:#FF4C00 !important;
    background:#f7faf9 !important;
}


/* =========================================================
   OILERS NAVIGATION — WHMCS
   Normal: deep Oilers blue
   Active / hover: Oilers orange + underline
   ========================================================= */

#header .navbar-nav > li > a,
#header .navbar-nav > li > a.nav-link,
#header .main-navbar-wrapper .navbar-nav > li > a {
    color: #00205B !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    position: relative;
    transition: color .18s ease;
}

/* Hover */
#header .navbar-nav > li > a:hover,
#header .navbar-nav > li > a.nav-link:hover,
#header .main-navbar-wrapper .navbar-nav > li > a:hover {
    color: #FF4C00 !important;
}

/* Active page */
#header .navbar-nav > li.ws-nav-active > a,
#header .main-navbar-wrapper .navbar-nav > li.ws-nav-active > a {
    color: #FF4C00 !important;
}

/* Active underline */
#header .navbar-nav > li.ws-nav-active > a::after,
#header .main-navbar-wrapper .navbar-nav > li.ws-nav-active > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 3px;
    background: #FF4C00;
    border-radius: 3px;
}

/* Keep dropdown arrows from changing color unexpectedly */
#header .navbar-nav > li.dropdown > a::after {
    border-top-color: currentColor;
}

/* Do not apply the active underline to dropdown children */
#header .navbar-nav .dropdown-menu a {
    color: #00205B !important;
}

#header .navbar-nav .dropdown-menu a:hover {
    color: #FF4C00 !important;
}

/* Account menu stays visually separate */
#header .navbar-nav.ml-auto > li > a {
    color: #00205B !important;
}

#header .navbar-nav.ml-auto > li > a:hover {
    color: #FF4C00 !important;
}