/* ============================================================================
   IAMEM HOSTING - WHMCS client area theme ("iamem", based on Six)
   Matches the main website (iamemhost.com):
     brand gradient  #00d264 -> #00b4aa -> #0e82d3 -> #1565c0
     navy            #0a4a6e -> #0d1a4b      ink #0a1a3b      font Nunito Sans
   Pure CSS on top of the Six templates, so WHMCS updates do not break it.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800;900&display=swap');

:root {
    --im-grad: linear-gradient(90deg, #00d264 0%, #00b4aa 35%, #0e82d3 75%, #1565c0 100%);
    --im-grad-cta: linear-gradient(90deg, #00d264 0%, #0e82d3 100%);
    --im-navy: linear-gradient(135deg, #0a4a6e 0%, #0d1a4b 100%);
    --im-blue: #0e82d3;
    --im-blue-deep: #1565c0;
    --im-green: #00d264;
    --im-ink: #0a1a3b;
    --im-muted: #5b6b86;
    --im-line: #e3eaf4;
    --im-bg: #f4f7fb;
    --im-radius: 12px;
    --im-radius-sm: 8px;
    --im-shadow: 0 4px 18px rgba(13, 38, 76, .08);
    --im-shadow-lg: 0 16px 48px rgba(13, 38, 76, .16);
}

/* ---------- base ---------- */
html, body, button, input, select, textarea, .btn, .form-control {
    font-family: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
}
body {
    background: var(--im-bg);
    color: #24304a;
    font-size: 14.5px;
    line-height: 1.6;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.header-lined h1, .panel-title {
    font-family: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
    color: var(--im-ink);
    font-weight: 800;
    letter-spacing: -.01em;
}
a { color: var(--im-blue); }
a:hover, a:focus { color: var(--im-blue-deep); text-decoration: none; }
::selection { background: rgba(14, 130, 211, .22); }

/* ---------- header: logo bar + menu share one gradient, like the website ---------- */
#header, #main-menu, #main-menu .navbar-main {
    background: var(--im-grad);
    border: 0;
    margin: 0;
}
#header { padding: 16px 0 10px; }
#header .logo { display: inline-block; width: 161px; height: 46px; background: url(../img/iamem-logo-white.png) no-repeat left center / contain; }
#header .logo img { visibility: hidden; width: 161px; height: 46px; max-height: none; }
#header .logo.logo-text, #header .logo-text { color: #fff; font-weight: 900; font-size: 26px; }
#header .top-nav > li > a { color: rgba(255, 255, 255, .92); font-weight: 700; border-radius: var(--im-radius-sm); }
#header .top-nav > li > a:hover { color: #fff; background: rgba(255, 255, 255, .14); }
#header .top-nav .primary-action a.btn {
    background: #fff; color: var(--im-ink); border: 0; font-weight: 800;
    border-radius: var(--im-radius-sm); padding: 8px 18px; box-shadow: 0 2px 10px rgba(10, 26, 59, .18);
}
#header .top-nav .primary-action a.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(10, 26, 59, .25); }
#header .top-nav .label-info { background: #fff; color: var(--im-blue-deep); }

#main-menu { border-top: 1px solid rgba(255, 255, 255, .22); }
#main-menu .navbar-main { min-height: 50px; box-shadow: none; }
#main-menu .navbar-main .navbar-nav > li > a {
    color: #fff; font-weight: 700; padding: 15px 16px; text-shadow: none; background: transparent;
}
#main-menu .navbar-main .navbar-nav > li > a:hover,
#main-menu .navbar-main .navbar-nav > li > a:focus,
#main-menu .navbar-main .navbar-nav > li.open > a,
#main-menu .navbar-main .navbar-nav > .active > a {
    background: rgba(255, 255, 255, .18); color: #fff; box-shadow: none;
}
#main-menu .navbar-main .navbar-nav > li > a .caret { border-top-color: #fff; border-bottom-color: #fff; }
.navbar-default .navbar-toggle { border-color: rgba(255, 255, 255, .6); }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background: rgba(255, 255, 255, .15); }
.navbar-default .navbar-toggle .icon-bar { background: #fff; }
.navbar-default .navbar-collapse { border-color: rgba(255, 255, 255, .2); }

.dropdown-menu {
    border: 1px solid var(--im-line); border-radius: var(--im-radius); box-shadow: var(--im-shadow-lg);
    padding: 8px; margin-top: 6px;
}
.dropdown-menu > li > a { color: var(--im-ink); border-radius: var(--im-radius-sm); padding: 8px 14px; font-weight: 600; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: #eaf4fd; color: var(--im-blue-deep); }
.dropdown-menu .divider { background: var(--im-line); }

/* ---------- page title, breadcrumb ---------- */
.header-lined { border-bottom: 0 !important; margin: 28px 0 22px; padding-bottom: 14px; position: relative; }
.header-lined h1 { font-size: 30px; font-weight: 900 !important; margin: 0; color: var(--im-ink) !important; }
.header-lined h1 small { color: var(--im-muted); font-weight: 600; font-size: 16px; }
.header-lined::after {
    content: ''; display: block; width: 64px; height: 4px; border-radius: 4px;
    background: var(--im-grad-cta); position: absolute; left: 0; bottom: 0;
}
.breadcrumb { background: transparent; padding: 0; margin-bottom: 14px; font-weight: 600; font-size: 13px; }
.breadcrumb > li + li:before { color: #9fb0c8; }
.breadcrumb > .active { color: var(--im-muted); }

/* ---------- panels, sidebar, cards ---------- */
.panel, .well, .card, .modal-content {
    border: 1px solid var(--im-line); border-radius: var(--im-radius); box-shadow: var(--im-shadow); background: #fff;
}
.well { background: #fff; }
.panel { overflow: hidden; margin-bottom: 22px; }
.panel-default > .panel-heading, .panel > .panel-heading {
    background: #fff; color: var(--im-ink); border-bottom: 1px solid var(--im-line); font-weight: 800; padding: 14px 18px;
}
.panel-primary > .panel-heading, .panel-info > .panel-heading, .panel-sidebar > .panel-heading, .modal-header.panel-heading {
    background: var(--im-navy); color: #fff; border: 0;
}
.panel-sidebar .panel-title, .panel-primary .panel-title, .modal-header .modal-title { color: #fff; }
.panel-sidebar .panel-title i, .panel-sidebar .panel-title .fas { color: #7fd4ff; }
.panel-footer { background: #f8fafd; border-top: 1px solid var(--im-line); }
.list-group-item { border-color: var(--im-line); color: #24304a; font-weight: 600; }
a.list-group-item:hover, .list-group-item-action:hover { background: #f1f7fd; color: var(--im-blue-deep); }
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
    background: #eaf4fd; color: var(--im-blue-deep); border-color: var(--im-line); border-left: 4px solid var(--im-blue);
}
.list-group-item .badge { background: var(--im-blue); }
.sidebar .panel .panel-body { background: #fff; }

/* home dashboard tiles */
.tiles .tile {
    background: #fff; border: 1px solid var(--im-line); border-radius: var(--im-radius); box-shadow: var(--im-shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}
.tiles .tile:hover { transform: translateY(-3px); box-shadow: var(--im-shadow-lg); }
.tiles .tile i { color: var(--im-blue); }
.tiles .tile .stat { color: var(--im-ink); font-weight: 900; }
.tiles .tile .title { color: var(--im-muted); font-weight: 700; }
.tiles .tile .highlight { background: var(--im-grad-cta); height: 4px; }

/* home page banner / search */
#home-banner { background: var(--im-navy); border: 0; padding: 46px 0; color: #fff; }
#home-banner h1, #home-banner h2 { color: #fff; }
#home-banner .btn { border-radius: var(--im-radius-sm); }
.domain-checker-container, .domain-checker-bg { background: var(--im-navy) !important; border-radius: var(--im-radius); }

/* ---------- buttons ---------- */
.btn { border-radius: var(--im-radius-sm); font-weight: 700; border-width: 1px; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.btn-primary, .btn-success, .btn-info, .btn-order-now, .btn-checkout, .btn-lg.btn-primary {
    background: var(--im-grad-cta); background-color: var(--im-blue); border: 0; color: #fff; text-shadow: none;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-order-now:hover, .btn-checkout:hover {
    background: var(--im-grad-cta); color: #fff; filter: brightness(1.07); transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(14, 130, 211, .32);
}
.btn-default { background: #fff; border-color: #d3deee; color: var(--im-ink); }
.btn-default:hover, .btn-default:focus { background: #f1f7fd; border-color: var(--im-blue); color: var(--im-blue-deep); }
.btn-danger { border-radius: var(--im-radius-sm); }
.btn-link { color: var(--im-blue); }
.btn[disabled], .btn.disabled { filter: none; opacity: .55; transform: none; box-shadow: none; }

/* ---------- forms ---------- */
.form-control, .input-group-addon, select.form-control {
    border: 1px solid #d3deee; border-radius: var(--im-radius-sm); box-shadow: none; color: var(--im-ink); height: 40px;
}
textarea.form-control { height: auto; }
.form-control:focus { border-color: var(--im-blue); box-shadow: 0 0 0 3px rgba(14, 130, 211, .18); }
.input-group-addon { background: #f4f7fb; color: var(--im-muted); }
label, .control-label { color: var(--im-ink); font-weight: 700; }
.has-error .form-control { border-color: #d9534f; }
.logincontainer, .login-form { max-width: 460px; }
.providerPreLinkingLogin .btn, .social-signin-btn { border-radius: var(--im-radius-sm); }

/* ---------- tables, labels, alerts ---------- */
.table > thead > tr > th, table.table-list thead th, table.dataTable thead th {
    background: #f4f7fb; color: var(--im-ink); font-weight: 800; border-bottom: 1px solid var(--im-line);
}
.table > tbody > tr > td { border-top-color: #edf1f8; vertical-align: middle; }
.table-hover > tbody > tr:hover, table.table-list tbody tr:hover { background: #f6faff; }
table.table-list, .table-container { border-radius: var(--im-radius); overflow: hidden; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border-radius: var(--im-radius-sm); }
.pagination > li > a, .pagination > li > span { border-color: var(--im-line); color: var(--im-blue-deep); }
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover {
    background: var(--im-grad-cta); border-color: transparent; color: #fff;
}
.label { border-radius: 20px; font-weight: 800; padding: .35em .8em; }
.label-success, .label-active { background: #00b86a; }
.label-info { background: var(--im-blue); }
.label-danger, .label-terminated, .label-cancelled, .label-unpaid { background: #e5484d; }
.label-warning, .label-pending, .label-suspended { background: #f2a100; }
.alert { border-radius: var(--im-radius); border-width: 1px; }
.alert-info { background: #eaf4fd; border-color: #bfdcf5; color: #0b4f86; }
.alert-success { background: #e8f9f0; border-color: #b6ebd0; color: #0b6b3c; }
.alert-warning { background: #fff7e6; border-color: #f8dba0; color: #7a5200; }
.alert-danger { background: #fdecec; border-color: #f5b9b9; color: #8a1f1f; }
.progress { border-radius: 20px; background: #e8eef7; box-shadow: none; }
.progress-bar { background: var(--im-grad-cta); }
.nav-tabs > li > a { border-radius: var(--im-radius-sm) var(--im-radius-sm) 0 0; font-weight: 700; color: var(--im-muted); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover { color: var(--im-blue-deep); border-bottom-color: #fff; }

/* ---------- shopping cart / order form (standard_cart) ---------- */
#order-standard_cart .header-lined h1, #order-standard_cart h1 { color: var(--im-ink); }
#order-standard_cart .cart-sidebar .panel-heading, #order-standard_cart .view-cart-items-header,
#order-standard_cart .order-summary h2, #order-standard_cart .cart-body .view-cart-items-header {
    background: var(--im-navy); color: #fff; border: 0;
}
#order-standard_cart .products .product, #order-standard_cart .product-box, #order-standard_cart .view-cart-items,
#order-standard_cart .order-summary, #order-standard_cart .domain-promo-box, #order-standard_cart .sub-heading {
    border-radius: var(--im-radius); box-shadow: var(--im-shadow); border: 1px solid var(--im-line); background: #fff;
}
#order-standard_cart .products .product header { background: var(--im-navy) !important; color: #fff !important; border: 0; padding: 14px 20px; }
#order-standard_cart .products .product header span, #order-standard_cart .products .product header .product-name { color: #fff !important; font-weight: 800; }
#order-standard_cart .products .product { overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
#order-standard_cart .products .product:hover { transform: translateY(-3px); box-shadow: var(--im-shadow-lg); }
#order-standard_cart .products .product footer, #order-standard_cart .products .product .product-desc { background: #fff; }
#order-standard_cart .products .product .product-pricing .price { color: var(--im-blue-deep); font-weight: 900; }
#order-standard_cart .btn-primary, #order-standard_cart .btn-success, #order-standard_cart .btn-order-now { background: var(--im-grad-cta); border: 0; }
#order-standard_cart .field, #order-standard_cart .form-control { border-radius: var(--im-radius-sm); }
#order-standard_cart .cart-sidebar .list-group-item.active { background: #eaf4fd; color: var(--im-blue-deep); }

/* ---------- invoices (on screen) ---------- */
.invoice-container { border-radius: var(--im-radius); box-shadow: var(--im-shadow); border: 1px solid var(--im-line); }
.invoice-container .invoice-header .invoice-col strong, .invoice-container h3 { color: var(--im-ink); }

/* ---------- footer: same navy as the website footer ---------- */
#footer {
    background: var(--im-navy); border: 0; color: rgba(255, 255, 255, .78); padding: 26px 0 28px; margin-top: 30px;
    font-weight: 600;
}
#footer p { margin: 0; color: rgba(255, 255, 255, .78); }
#footer a { color: #fff; }
#footer .back-to-top {
    background: rgba(255, 255, 255, .14); color: #fff; border-radius: 50%; width: 38px; height: 38px; line-height: 38px; text-align: center;
}
#footer .back-to-top:hover { background: var(--im-grad-cta); color: #fff; }

/* ---------- force the website font over the Six defaults (Raleway) ---------- */
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p, a, li, td, th, label, input, select, textarea, button,
.navbar, .navbar-main, .navbar-main a, .navbar-nav > li > a, .top-nav, .top-nav a, .panel-title, .panel-heading,
.header-lined h1, .tiles .tile, .list-group-item, .btn, .form-control, .breadcrumb, .dropdown-menu > li > a,
#footer, #footer p, .label, .alert, .nav-tabs > li > a, .pagination > li > a {
    font-family: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif !important;
}

/* keep the footer near the bottom of short pages */
#main-body { min-height: calc(100vh - 330px); }

/* ---------- small screens ---------- */
@media (max-width: 767px) {
    #header { padding: 12px 0 8px; }
    #header .logo, #header .logo img { width: 130px; height: 37px; }
    .header-lined h1 { font-size: 24px; }
    #main-menu .navbar-main .navbar-nav > li > a { padding: 11px 16px; }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #fff; }
}