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

/* ==========================================================================
   IAM4Hosts client area: Twenty-One restyled to match iam4hosts.com.
   Night header and footer, paper body, moon-gold primary actions.
   ========================================================================== */

:root {
    --iam-night: #05060c;
    --iam-night-2: #0b0e1c;
    --iam-night-3: #141831;
    --iam-line-dark: rgba(255, 255, 255, .09);
    --iam-on-night: #f5f5f7;
    --iam-on-night-2: #a1a1aa;
    --iam-paper: #f5f5f7;
    --iam-ink: #1d1d1f;
    --iam-ink-2: #48484f;
    --iam-ink-3: #86868b;
    --iam-line: #e3e3e8;
    --iam-moon: #f0c987;
    --iam-moon-hi: #ffe7b3;
    --iam-moon-lo: #c98a2b;
    --iam-link: #2b7de9;
    --iam-ok: #2e7d4f;
    --iam-warn: #cf5a17;
    --iam-bad: #c4302b;
}

/* Inter everywhere text is set; icon fonts keep their own family. */
body, button, input, select, textarea, .btn, .tooltip, .popover, .dropdown-menu,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

body, body.primary-bg-color {
    font-size: 15px;
    background: var(--iam-paper);
    color: var(--iam-ink);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, .h1, .h2, .h3 { letter-spacing: -.025em; font-weight: 700; color: var(--iam-ink); }
a { color: var(--iam-link); }
a:hover { color: #1a62c4; }

/* ---------- header ---------- */
#header.header { background: var(--iam-night); border-bottom: 1px solid var(--iam-line-dark); }
#header .topbar { background: #000; border-bottom: 1px solid var(--iam-line-dark); }
#header .topbar .btn, #header .topbar .input-group-text { color: var(--iam-on-night-2); background: transparent; border: 0; }
#header .topbar .btn:hover { color: var(--iam-on-night); }
#header .topbar .btn-active-client span { color: var(--iam-on-night); }
#header .navbar { background: transparent; }
#header .navbar-light .navbar-brand { color: var(--iam-on-night); }

.iam-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; }
.iam-brand .mark { border-radius: 8px; flex: none; padding: 0; background: none; }
.iam-logo-type { font-size: 21px; font-weight: 500; letter-spacing: -.03em; color: var(--iam-on-night); }
.iam-logo-type b { font-weight: 800; }
.iam-logo-type i { font-style: normal; font-weight: 800; color: var(--iam-moon); padding: 0 1px; }
.iam-site-links { gap: 22px; align-items: center; }
/* header.header .navbar a sets #444 in the parent theme, so these need the #header prefix. */
#header .navbar .iam-site-links a { color: var(--iam-on-night-2); font-size: 13.5px; font-weight: 500; text-decoration: none; }
#header .navbar .iam-site-links a:hover { color: var(--iam-on-night); }
#header .navbar .iam-brand, #header .navbar .iam-brand:hover { color: var(--iam-on-night); }

#header .search .form-control, #header .search .btn {
    background: rgba(255, 255, 255, .06); border: 1px solid var(--iam-line-dark); color: var(--iam-on-night);
    font-size: 13.5px; font-weight: 400; height: 36px; box-shadow: none;
}
#header .search .btn { border-right: 0; border-radius: 999px 0 0 999px; }
#header .search .form-control { border-left: 0; border-radius: 0 999px 999px 0; }
#header .search .form-control:focus { background: rgba(255, 255, 255, .1); }
#header .input-group.search { border: 0; border-radius: 999px; background: transparent; }
#header .cart-btn { border: 1px solid var(--iam-line-dark); border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: 14px; }
#header .search .form-control::placeholder { color: var(--iam-on-night-2); }
#header .toolbar .nav-link, #header .toolbar .btn { color: var(--iam-on-night); }
#header .cart-btn .badge { background: var(--iam-moon); color: #1b1406; }

#header .main-navbar-wrapper { background: var(--iam-night-2); border-top: 1px solid var(--iam-line-dark); }
/* Same scale as the website's nav: 13.5-14px, weight 500, grey until hovered. */
#header .main-navbar-wrapper .navbar-nav > li > a,
#header .main-navbar-wrapper .navbar-nav .nav-link { color: var(--iam-on-night-2); font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; }
#header .main-navbar-wrapper .navbar-nav > li > a:hover,
#header .main-navbar-wrapper .navbar-nav > li.active > a,
#header .main-navbar-wrapper .navbar-nav .active > .nav-link { color: var(--iam-on-night); text-decoration: none; }
#header .main-navbar-wrapper { padding-top: 2px; padding-bottom: 2px; }
#header .dropdown-menu .dropdown-item { font-size: 14px; }
#header .topbar, #header .topbar .btn { font-size: 13px; }
#header .dropdown-menu { border-radius: 12px; border-color: var(--iam-line); box-shadow: 0 20px 40px rgba(0, 0, 0, .12); }

.master-breadcrumb { background: transparent; }
.master-breadcrumb .breadcrumb { background: transparent; font-size: 13px; }

/* ---------- buttons ---------- */
.btn { border-radius: 999px; font-weight: 600; }
.btn-sm { border-radius: 999px; }
.btn-primary, .btn-primary:not(:disabled):not(.disabled):active, .btn-success, .btn-checkout {
    color: #1b1406 !important;
    background: linear-gradient(180deg, var(--iam-moon-hi), var(--iam-moon) 60%, #e7b467) !important;
    border: 0 !important;
    box-shadow: 0 0 0 1px rgba(160, 110, 30, .25) inset, 0 6px 18px rgba(201, 138, 43, .22);
}
.btn-primary:hover, .btn-success:hover, .btn-checkout:hover { box-shadow: 0 0 0 1px rgba(160, 110, 30, .35) inset, 0 8px 24px rgba(201, 138, 43, .35); }
.btn-default, .btn-light, .btn-outline-secondary { border-radius: 999px; background: #fff; border-color: var(--iam-line); color: var(--iam-ink); }

/* ---------- cards, sidebar, tables ---------- */
.card, .panel, .sidebar .card { border: 0; border-radius: 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 0 0 1px var(--iam-line); overflow: hidden; }
.card-header { background: #fff; border-bottom: 1px solid var(--iam-line); font-weight: 600; }
.sidebar .list-group-item { border-color: var(--iam-line); }
.sidebar .list-group-item.active { background: var(--iam-night); border-color: var(--iam-night); color: var(--iam-on-night); }
.tiles .tile { border-radius: 18px; }
.tiles .tile .stat { color: var(--iam-ink); }
.tiles .tile .highlight { background: var(--iam-moon) !important; }
.table thead th { border-bottom-width: 1px; color: var(--iam-ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.label, .badge { border-radius: 999px; font-weight: 600; }
.status-active, .label-success { background: #e4f4ea !important; color: var(--iam-ok) !important; }
.status-suspended, .label-warning { background: #fdf0e8 !important; color: var(--iam-warn) !important; }
.status-terminated, .status-cancelled, .label-danger { background: #fbe9e8 !important; color: var(--iam-bad) !important; }
.form-control { border-radius: 10px; border-color: var(--iam-line); }
.form-control:focus { border-color: var(--iam-moon-lo); box-shadow: 0 0 0 3px rgba(240, 201, 135, .35); }

/* ---------- order form (standard_cart) ---------- */
#order-standard_cart .header-lined h1, #order-standard_cart h1 { font-weight: 800; letter-spacing: -.03em; }
/* Sit on the page's paper grey; only inputs and cards stay white. */
#order-standard_cart .product-info, #order-standard_cart .field-container { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#order-standard_cart .product-info { padding: 0 0 6px; }
#order-standard_cart .product-info .product-title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--iam-ink); }
#order-standard_cart .sub-heading { border-color: var(--iam-line); margin: 34px 0 46px; }
#order-standard_cart .sub-heading span { background: var(--iam-paper) !important; color: var(--iam-ink) !important; font-weight: 700; font-size: 16px; padding: 0 16px; line-height: 1.35; }
#order-standard_cart .sub-heading span small { font-weight: 400; color: var(--iam-ink-3); }
#order-standard_cart label { font-weight: 600; color: var(--iam-ink); }
#order-standard_cart .field-help-text, #order-standard_cart .form-text { color: var(--iam-ink-3); font-size: 13px; }
#order-standard_cart .order-summary, #order-standard_cart .summary-container { border-radius: 18px; overflow: hidden; }
#order-standard_cart .order-summary { background: var(--iam-night); border: 0; }
#order-standard_cart .order-summary h2 { background: var(--iam-night); color: var(--iam-on-night); }
#order-standard_cart .summary-container { background: #fff; }
#order-standard_cart .total-due-today .amt { color: var(--iam-ink); font-weight: 800; }
#order-standard_cart .products .product { border-radius: 18px; border: 0; box-shadow: 0 0 0 1px var(--iam-line); }
#order-standard_cart .products .product header { background: var(--iam-night); color: var(--iam-on-night); }
#order-standard_cart .products .product header span { color: var(--iam-on-night); }
#order-standard_cart .products .product div.product-pricing .price { color: var(--iam-ink); font-weight: 800; }
#order-standard_cart .cart-sidebar .list-group-item.active { background: var(--iam-night); border-color: var(--iam-night); }

/* ---------- footer ---------- */
#footer.footer { background: var(--iam-night-2); color: var(--iam-on-night-2); border-top: 1px solid var(--iam-line-dark); }
#footer .nav-link, #footer .btn { color: var(--iam-on-night-2); }
#footer .nav-link:hover, #footer .btn:hover { color: var(--iam-on-night); }
#footer .copyright { color: var(--iam-on-night-2); font-size: 13px; }
#footer .copyright a { color: var(--iam-moon); }
.iam-foot-links { display: block; margin-top: 6px; }

/* ---------- licence panel (module client area) ---------- */
.iam-licence { text-align: left; }
.iam-licence-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.iam-licence-head p { margin: 0; color: var(--iam-ink-2); }
.iam-badge { display: inline-block; padding: 5px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; background: #ececf0; color: var(--iam-ink-2); white-space: nowrap; }
.iam-badge-premium { background: var(--iam-night); color: var(--iam-moon); }
.iam-badge-suspended { background: #fdf0e8; color: var(--iam-warn); }
.iam-licence-facts { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; margin: 0 0 18px; }
.iam-licence-facts dt { color: var(--iam-ink-3); font-weight: 500; }
.iam-licence-facts dd { margin: 0; }
.iam-licence code { background: var(--iam-paper); border: 1px solid var(--iam-line); color: var(--iam-ink); padding: 2px 7px; border-radius: 6px; }
.iam-licence-help { color: var(--iam-ink-2); font-size: 14px; }
@media (max-width: 575px) { .iam-licence-facts { grid-template-columns: 1fr; } .iam-licence-head { flex-direction: column; align-items: flex-start; } }