@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Geist:wght@400;500;600&family=Geist+Mono:wght@500&display=swap");

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

    ** 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.
 */

html {
    font-size: 14px;
}

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

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

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

    /* 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 */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

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

/* =====================================================================
   Iridium Hosting · Prism theme for WHMCS (child of Twenty-One)
   Matches iridiumhosting.com: lavender ground, cream cards with ink
   outlines and offset shadows, violet buttons, Bricolage + Geist type.
   ===================================================================== */

:root {
    --ih-lav: #cdbdff;
    --ih-cream: #fffdf8;
    --ih-ink: #1b1036;
    --ih-ink-2: #3b2d63;
    --ih-muted: #463a6e;
    --ih-violet: #6d28d9;
    --ih-violet-deep: #5b21b6;
    --ih-butter: #ffe596;
    --ih-mint: #b4efd3;
    --ih-sky: #a9dcff;
    --ih-peach: #ffc3ae;
    --ih-shadow: 6px 6px 0 var(--ih-ink);
}

/* ---------- Base ---------- */
html { font-size: 15px; }
body, .primary-content, section#main-body {
    background: var(--ih-lav) !important;
    color: var(--ih-ink);
    font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .card-title, .pricing-card-title, .header-lined h1 {
    font-family: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ih-ink);
}
a { color: var(--ih-violet-deep); }
a:hover, a:focus { color: var(--ih-ink); }
.text-muted, small, .small { color: var(--ih-muted) !important; }

/* ---------- Header: cream bar with ink rule, like the main site ---------- */
#header.header, .header { background: transparent; }
.header .navbar-light {
    background: var(--ih-cream);
    border-bottom: 2px solid var(--ih-ink);
}
.header .main-navbar-wrapper {
    background: var(--ih-cream) !important;
    border-bottom: 2px solid var(--ih-ink);
}
.header .main-navbar-wrapper .navbar-nav .nav-link,
.header .navbar-light .navbar-nav .nav-link {
    color: var(--ih-ink) !important;
    font-weight: 600;
}
.header .main-navbar-wrapper .navbar-nav .nav-link:hover,
.header .main-navbar-wrapper .navbar-nav .active > .nav-link { color: var(--ih-violet) !important; }
.header .navbar-brand img { max-height: 46px; }

/* Empty sections (Announcements, Knowledgebase, Network Status) are hidden everywhere */
#Primary_Navbar-Announcements,
#Primary_Navbar-Knowledgebase,
#Primary_Navbar-Network_Status,
.header form[action*="knowledgebase"],
.header .search,
[class*="col"]:has(> a[href*="announcements"]),
[class*="col"]:has(> a[href*="knowledgebase"]),
[class*="col"]:has(> a[href*="serverstatus"]),
.card:has(a[href*="announcements"]):not(:has(form)) { display: none !important; }

/* Breadcrumb strip */
.master-breadcrumb { background: transparent !important; border: 0 !important; }
.master-breadcrumb .breadcrumb { background: transparent; }

/* ---------- Cards and panels: cream, ink outline, offset shadow ---------- */
.card, .panel, .sidebar .card, .product-details .product-info, .client-home-cards .card, .order-summary, .domain-checker-container,
#order-standard_cart .products .product, #order-standard_cart .view-cart-items, #order-standard_cart .secondary-cart-body,
#order-standard_cart .order-summary, #order-standard_cart .sub-heading + .row .card {
    background: var(--ih-cream) !important;
    border: 2px solid var(--ih-ink) !important;
    border-radius: 20px !important;
    box-shadow: var(--ih-shadow) !important;
}
.card-header, .card-footer, .panel-heading {
    background: transparent !important;
    border-color: rgba(27, 16, 54, 0.15) !important;
}
.card-sidebar .card-header, .sidebar .card-header { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; }
.list-group-item { background: transparent; border-color: rgba(27, 16, 54, 0.12); }
.list-group-item.active, .list-group-item.active:hover {
    background: var(--ih-violet) !important;
    border-color: var(--ih-violet) !important;
    color: var(--ih-cream) !important;
}
[class*="card-accent-"] { border-top: 2px solid var(--ih-ink) !important; }

/* ---------- Buttons: pills with ink outline ---------- */
.btn {
    border-radius: 999px !important;
    font-weight: 600;
    border-width: 2px !important;
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ih-ink); }
.btn-primary, .btn-success, .btn-checkout, #btnCompleteOrder, #btnCompleteProductConfig, .btn-order-now {
    background: var(--ih-violet) !important;
    border-color: var(--ih-ink) !important;
    color: var(--ih-cream) !important;
}
.btn-primary:hover, .btn-success:hover, .btn-checkout:hover { background: var(--ih-ink) !important; }
.btn-default, .btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-primary {
    background: var(--ih-cream) !important;
    border-color: var(--ih-ink) !important;
    color: var(--ih-ink) !important;
}
.btn-info { background: var(--ih-sky) !important; border-color: var(--ih-ink) !important; color: var(--ih-ink) !important; }
.btn-warning { background: var(--ih-butter) !important; border-color: var(--ih-ink) !important; color: var(--ih-ink) !important; }
.btn-danger { border-color: var(--ih-ink) !important; }

/* ---------- Forms ---------- */
.form-control, .custom-select, .input-group-text, select.form-control {
    border: 2px solid var(--ih-ink) !important;
    border-radius: 12px !important;
    background-color: #fff;
    color: var(--ih-ink);
}
.form-control:focus { box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.25) !important; border-color: var(--ih-violet) !important; }
label, .control-label { font-weight: 600; color: var(--ih-ink); }

/* ---------- Order form (standard_cart) ---------- */
#order-standard_cart .header-lined h1, #order-standard_cart h1 { font-size: 2.6rem; }
#order-standard_cart .order-summary h2 {
    background: var(--ih-violet) !important;
    color: var(--ih-cream) !important;
    border-radius: 18px 18px 0 0;
    font-family: 'Bricolage Grotesque', sans-serif;
}
#order-standard_cart .summary-container { background: transparent !important; }
#order-standard_cart .order-summary .total-due-today .amt,
#order-standard_cart .amt, #order-standard_cart .price {
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; color: var(--ih-ink);
}
#order-standard_cart .products .product header {
    background: var(--ih-violet) !important;
    color: var(--ih-cream) !important;
    border-radius: 18px 18px 0 0;
    border-bottom: 2px solid var(--ih-ink);
}
#order-standard_cart .products .product header span { color: var(--ih-cream) !important; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; }
#order-standard_cart .view-cart-items-header { background: var(--ih-violet) !important; color: var(--ih-cream) !important; border-radius: 18px 18px 0 0; }
#order-standard_cart .sub-heading span { background: var(--ih-lav) !important; color: var(--ih-ink) !important; font-weight: 700; }
#order-standard_cart .sub-heading { border-top-color: rgba(27, 16, 54, 0.25) !important; }
#order-standard_cart .domain-selection-options .option {
    background: var(--ih-cream); border: 2px solid var(--ih-ink); border-radius: 16px;
}
#order-standard_cart .domain-selection-options .option-selected { background: var(--ih-mint); }
#order-standard_cart .cart-sidebar .card, #order-standard_cart .sidebar-collapsed { box-shadow: none !important; }
.alert-info { background: var(--ih-sky); border: 2px solid var(--ih-ink); color: var(--ih-ink); border-radius: 14px; }
.alert-warning { background: var(--ih-butter); border: 2px solid var(--ih-ink); color: var(--ih-ink); border-radius: 14px; }
.alert-success { background: var(--ih-mint); border: 2px solid var(--ih-ink); color: var(--ih-ink); border-radius: 14px; }
.alert-danger { background: var(--ih-peach); border: 2px solid var(--ih-ink); color: var(--ih-ink); border-radius: 14px; }

/* ---------- Tables ---------- */
.table, .table th, .table td { border-color: rgba(27, 16, 54, 0.12) !important; color: var(--ih-ink); }
.table thead th { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ih-muted); }
.dataTables_wrapper .table { background: transparent; }
.label, .badge { border-radius: 999px; font-weight: 600; }

/* ---------- Footer: violet, like the main site ---------- */
.footer, footer.footer {
    background: var(--ih-violet) !important;
    color: var(--ih-cream) !important;
    border-top: 2px solid var(--ih-ink);
}
.footer a, .footer .nav-link, .footer .btn { color: var(--ih-cream) !important; }
.footer a:hover { color: var(--ih-butter) !important; }
.footer .copyright { color: var(--ih-lav) !important; }
.footer .btn { background: transparent !important; border-color: var(--ih-cream) !important; }

/* ---------- Home ---------- */
.home-domain-search, .home-shortcuts { background: transparent !important; }
.card-columns.home .card { margin-bottom: 1.25rem; }

@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* Home shortcut tiles ("How can we help today", "Your Account") */
a[class*="card-accent-"], .action-icon-btns a {
    background: var(--ih-cream) !important;
    border: 2px solid var(--ih-ink) !important;
    border-radius: 18px !important;
    box-shadow: var(--ih-shadow) !important;
    color: var(--ih-ink) !important;
    font-weight: 600;
    transition: transform .15s ease;
}
a[class*="card-accent-"]:hover, .action-icon-btns a:hover { transform: translate(-2px, -2px); background: var(--ih-butter) !important; }
a[class*="card-accent-"] .ico-container i, .action-icon-btns a i { color: var(--ih-violet) !important; }

/* Short pages: let the violet footer color fill the space below it */
html { background: #6d28d9; }