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

    ** Custom Stylesheet **

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

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

/* Custom CSS for Nexus Theme
 *
 * This file allows you to customize the theme colors and styles for the entire Nexus 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.
 */

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

    /* Primary brand shades mapped to your exact color #34179F */
    --primary-50: #f0edf9;
    --primary-100: #e1dcf3;
    --primary-200: #c2b8e8;
    --primary-300: #9484dc;
    --primary-400: #6b52d1;
    --primary-500: #34179F;
    --primary-600: #2c1387;
    --primary-700: #241070;
    --primary-800: #1d0d5b;
    --primary-900: #150943;
    --primary-950: #0b0526;

    /* Primary colors */
    --primary: #34179F;
    --primary-lifted: #4522b5;
    --primary-accented: #2c1387;

    /* 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: #34179F;
    --notice-lifted: #4522b5;
    --notice-accented: #2c1387;

    /* 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: #f0edf9;
    --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%;
}

/* --- Definitive Nexus Theme Styling Overrides --- */

/* 1. Target the top navigation header and menu bar */
header, 
.navbar, 
.nexus-navigation,
#header {
    background-color: #111827 !important;
}

/* 2. Target the main content area background cards to match your theme */
.main-content, 
.panel, 
.card, 
.order-container {
    background-color: #ffffff !important;
    border-color: #e4e4e7 !important;
}

/* 3. Force primary buttons across the portal to use your vibrant purple */
.btn-primary, 
button.btn-primary, 
input[type="submit"].btn-primary,
.domain-search-box .btn {
    background-color: #34179F !important;
    border-color: #34179F !important;
    color: #ffffff !important;
}

.btn-primary:hover, 
button.btn-primary:hover, 
input[type="submit"].btn-primary:hover,
.domain-search-box .btn:hover {
    background-color: #2c1387 !important;
    border-color: #2c1387 !important;
}

/* 4. Style input fields and search boxes consistently */
.form-control {
    border-color: #d0d5dd !important;
}

.form-control:focus {
    border-color: #34179F !important;
    box-shadow: 0 0 0 3px rgba(52, 23, 159, 0.15) !important;
}

/* Force the main header and navigation bar to use your secondary color #210555 */
header, 
.navbar, 
.nexus-navigation,
#header,
.navbar-main {
    background-color: #210555 !important;
}

/* Ensure the sub-header bar underneath matches your clean purple-tinted theme */
.header-bar, 
.breadcrumb-container, 
.nav-tabs-horizontal {
    background-color: #f0edf9 !important;
    border-bottom: 1px solid #c2b8e8 !important;
}

.header-bar h1, 
.header-bar p, 
.breadcrumb > li > a {
    color: #210555 !important;
}

/* 1. Header & Navigation: Background #210555 with crisp white text */
header, 
.navbar, 
.nexus-navigation,
#header,
.navbar-main {
    background-color: #210555 !important;
}

.navbar-main .navbar-nav > li > a, 
.header .navbar-brand, 
.top-nav a,
.navbar-main .navbar-nav > li > .dropdown-toggle {
    color: #ffffff !important;
}

.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus {
    color: #c2b8e8 !important;
}

/* 2. Footer: Matching background color #210555 with white text */
footer, 
#footer, 
.footer {
    background-color: #210555 !important;
    color: #ffffff !important;
}

footer a, 
#footer a, 
.footer a {
    color: #ffffff !important;
}

footer a:hover, 
#footer a:hover, 
.footer a:hover {
    color: #c2b8e8 !important;
}

/* 3. Primary Buttons & Hover States */
.btn-primary, 
button.btn-primary, 
input[type="submit"].btn-primary,
.domain-search-box .btn {
    background-color: #34179F !important;
    border-color: #34179F !important;
    color: #ffffff !important;
}

.btn-primary:hover, 
button.btn-primary:hover, 
input[type="submit"].btn-primary:hover,
.domain-search-box .btn:hover {
    background-color: #2c1387 !important;
    border-color: #2c1387 !important;
    color: #ffffff !important;
}

/* 1. Force all navigation and menu text to crisp bright white */
header .navbar-nav > li > a, 
.navbar-main .navbar-nav > li > a, 
#header .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a,
.nexus-navigation a,
.top-nav a,
.header-top-bar a {
    color: #ffffff !important;
}

header .navbar-nav > li > a:hover, 
.navbar-main .navbar-nav > li > a:hover, 
#header .navbar-nav > li > a:hover,
.nexus-navigation a:hover {
    color: #c2b8e8 !important;
}

/* 2. Fix Primary Buttons & Hover States (making sure hover stays purple, not black) */
.btn-primary, 
button.btn-primary, 
input[type="submit"].btn-primary,
.domain-search-box .btn,
.product-pricing .btn,
a.btn-primary {
    background-color: #34179F !important;
    border-color: #34179F !important;
    color: #ffffff !important;
}

.btn-primary:hover, 
button.btn-primary:hover, 
input[type="submit"].btn-primary:hover,
.domain-search-box .btn:hover,
.product-pricing .btn:hover,
a.btn-primary:hover {
    background-color: #2c1387 !important;
    border-color: #2c1387 !important;
    color: #ffffff !important;
}
/* 1. Target SVG icons inside home category cards or panels */
.home-categories .icon svg, 
.panel-icon svg, 
.card-icon svg,
.announcement-icon svg,
.kb-icon svg,
.list-group-item .fa,
.list-group-item .fas,
.list-group-item .far {
    fill: #210555 !important;
    color: #210555 !important;
}

/* 2. Target standard FontAwesome or icon classes used in Nexus blocks */
.fa, .fas, .far, .fab {
    color: inherit; /* Allows parent or explicit coloring to take effect */
}

/* Force specific category/panel icon wrappers to your color */
.home-shortcuts .icon,
.client-home-panels .panel-icon,
.icon-container i,
.icon-container svg {
    color: #210555 !important;
    fill: #210555 !important;
}


/* Force all FontAwesome icon glyphs across announcements, kb, and portal tiles to #210555 */
.list-group-item i.fa,
.list-group-item i.fas,
.list-group-item i.far,
.list-group-item i.fab,
.panel i.fa,
.panel i.fas,
.panel i.far,
.card i.fa,
.card i.fas,
.card i.far,
.home-shortcuts i,
.client-home-panels i,
.view-cart-items i {
    color: #210555 !important;
}

/* Also ensure inline SVG icon strokes/fills take on #210555 if present */
svg.fa-svg, 
.icon svg,
.panel-icon svg {
    fill: #210555 !important;
    color: #210555 !important;
}

/* =========================================================
   FORCE ALL ICON PATHS AND GLYPHS TO SECONDARY COLOR #210555
   ========================================================= */

/* 1. Target FontAwesome pseudo-elements (:before) */
.fas::before, 
.far::before, 
.fal::before, 
.fab::before, 
.fad::before, 
.fa::before,
[class^="fa-"]::before, 
[class*=" fa-"]::before {
    color: #210555 !important;
}

/* 2. Target SVG paths and stroke fills directly */
svg path, 
svg rect, 
svg circle, 
svg polygon, 
svg ellipse {
    fill: #210555 !important;
    stroke: #210555 !important;
}

/* 3. Target home shortcuts, announcement tiles, and knowledgebase icon blocks */
.home-shortcuts .icon,
.home-shortcuts i,
.home-shortcuts svg,
.client-home-panels .icon,
.client-home-panels i,
.client-home-panels svg,
.panel-body i,
.panel-body svg,
.card-body i,
.card-body svg {
    color: #210555 !important;
    fill: #210555 !important;
}

/* Force Transfer and secondary action buttons to #130551 for both normal and hover states */
.btn-default, 
button.btn-default, 
input[type="submit"].btn-default,
.domain-search-box .btn-secondary,
.domain-search-box button:not(.btn-primary),
a.btn-default,
.btn-info {
    background-color: #130551 !important;
    border-color: #130551 !important;
    color: #ffffff !important;
}

.btn-default:hover, 
button.btn-default:hover, 
input[type="submit"].btn-default:hover,
.domain-search-box .btn-secondary:hover,
.domain-search-box button:not(.btn-primary):hover,
a.btn-default:hover,
.btn-info:hover {
    background-color: #130551 !important;
    border-color: #130551 !important;
    color: #ffffff !important;
}

/* Force all icons and icon pseudo-elements inside the main navigation bar to stay white */
.navbar-main .navbar-nav i,
.navbar-main .navbar-nav svg,
.navbar-main .navbar-nav .fas::before,
.navbar-main .navbar-nav .far::before,
.navbar-main .navbar-nav .fab::before,
.navbar-main .navbar-nav .fa::before,
header .navbar-nav i,
header .navbar-nav svg,
header .navbar-nav [class^="fa-"]::before {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

.navbar-main .navbar-nav a:hover i,
.navbar-main .navbar-nav a:hover svg,
.navbar-main .navbar-nav a:hover [class^="fa-"]::before {
    color: #c2b8e8 !important;
    fill: #c2b8e8 !important;
}

/* Target all possible navbar icon structures for crisp white text and SVG rendering */
.navbar-main .navbar-nav .fa,
.navbar-main .navbar-nav .fas,
.navbar-main .navbar-nav .far,
.navbar-main .navbar-nav .fal,
.navbar-main .navbar-nav .fab,
.navbar-main .navbar-nav .fad,
.navbar-main .navbar-nav [class^="fa-"],
.navbar-main .navbar-nav [class*=" fa-"],
header .navbar-nav .fa,
header .navbar-nav .fas,
header .navbar-nav .far,
header .navbar-nav .fab,
header .navbar-nav [class^="fa-"] {
    color: #ffffff !important;
}

.navbar-main .navbar-nav .fa::before,
.navbar-main .navbar-nav .fas::before,
.navbar-main .navbar-nav .far::before,
.navbar-main .navbar-nav .fal::before,
.navbar-main .navbar-nav .fab::before,
.navbar-main .navbar-nav .fad::before,
.navbar-main .navbar-nav [class^="fa-"]::before,
.navbar-main .navbar-nav [class*=" fa-"]::before,
header .navbar-nav [class^="fa-"]::before {
    color: #ffffff !important;
}

.navbar-main .navbar-nav svg,
header .navbar-nav svg,
.navbar-main .navbar-nav svg path,
header .navbar-nav svg path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Hover state for navbar icons */
.navbar-main .navbar-nav a:hover .fa,
.navbar-main .navbar-nav a:hover .fas,
.navbar-main .navbar-nav a:hover .far,
.navbar-main .navbar-nav a:hover [class^="fa-"]::before,
.navbar-main .navbar-nav a:hover svg path {
    color: #c2b8e8 !important;
    fill: #c2b8e8 !important;
}

/* =========================================================
   TARGETED FIX: SEARCH & CART ICONS IN THE HEADER/NAVBAR
   ========================================================= */

/* 1. Ensure any icon or SVG inside the header search and navbar tools stays crisp white */
header .navbar-form .fa,
header .navbar-form .fas,
header .navbar-form .far,
header .navbar-form .fal,
header .navbar-form .fab,
header .navbar-form [class^="fa-"],
header .navbar-form [class*=" fa-"],
header .navbar-right .fa,
header .navbar-right .fas,
header .navbar-right .far,
header .navbar-right .fal,
header .navbar-right .fab,
header .navbar-right [class^="fa-"],
header .navbar-right [class*=" fa-"],
.navbar-main .navbar-form .fa,
.navbar-main .navbar-form .fas,
.navbar-main .navbar-right .fa,
.navbar-main .navbar-right .fas {
    color: #ffffff !important;
}

/* 2. Target FontAwesome pseudo-elements inside the search/cart elements explicitly */
header .navbar-form [class*="fa-"]::before,
header .navbar-right [class*="fa-"]::before,
.navbar-main [class*="fa-"]::before,
.fa-search::before,
.fa-shopping-cart::before {
    color: #ffffff !important;
}

/* 3. Force inline SVGs (like shopping cart icons) and their paths inside navbar right/search to be white */
header .navbar-form svg,
header .navbar-right svg,
.navbar-main svg,
header .navbar-form svg path,
header .navbar-right svg path,
.navbar-main svg path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* 4. Hover states for search and cart icons */
header .navbar-form a:hover i,
header .navbar-right a:hover i,
header .navbar-form a:hover svg,
header .navbar-right a:hover svg,
header .navbar-form a:hover [class*="fa-"]::before,
header .navbar-right a:hover [class*="fa-"]::before {
    color: #c2b8e8 !important;
    fill: #c2b8e8 !important;
    stroke: #c2b8e8 !important;
}
/* =========================================================
   TARGETED FIX: BROWSE PRODUCTS / SERVICES BUTTON HOVER (#34179F)
   ========================================================= */

.home-categories a.btn:hover,
.home-categories button:hover,
.client-home-panels a.btn:hover,
.client-home-panels button:hover,
.order-container a.btn:hover,
.order-container button:hover,
.panel a.btn:hover,
.panel button:hover,
.card a.btn:hover,
.card button:hover,
a.btn-default:hover,
button.btn-default:hover,
.btn-default:hover {
    background-color: #34179F !important;
    border-color: #34179F !important;
    color: #ffffff !important;
}

/* =========================================================
   TARGETED FIX: DOMAIN SEARCH BOX FILTERS & DROPDOWNS
   ========================================================= */

/* Fix the pill-shaped filter badges / buttons inside the search box */
.domain-search-box .btn-group button,
.domain-search-box .dropdown-toggle,
.domain-search-box .input-group-btn .btn,
.domain-search-box span.btn,
.domain-search-box select {
    background-color: #f0edf9 !important;
    border-color: #c2b8e8 !important;
    color: #210555 !important;
}

.domain-search-box .btn-group button:hover,
.domain-search-box .dropdown-toggle:hover,
.domain-search-box .input-group-btn .btn:hover {
    background-color: #e1dcf3 !important;
    border-color: #9484dc !important;
    color: #210555 !important;
}

/* Ensure text and icons inside these filter buttons are clearly visible */
.domain-search-box .btn-group button *,
.domain-search-box .dropdown-toggle *,
.domain-search-box .input-group-btn .btn * {
    color: #210555 !important;
    fill: #210555 !important;
}

/* =========================================================
   TARGETED FIX: MATCH DOMAIN SEARCH BOX SIZE & PADDING
   ========================================================= */

.domain-search-box, 
.view-cart-domain-search,
.domain-search-container {
    max-width: 750px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.domain-search-box .form-control,
.view-cart-domain-search .form-control {
    height: 50px !important;
    font-size: 1rem !important;
    padding: 10px 16px !important;
}

.domain-search-box .btn-primary,
.view-cart-domain-search .btn-primary {
    padding: 10px 24px !important;
    font-size: 1rem !important;
}

/* =========================================================
   TARGETED FIX: CORRECT DOMAIN SEARCH INPUT & BUTTON LAYOUT
   ========================================================= */

/* Reset the box container to handle the text area and buttons properly */
.domain-search-box, 
.view-cart-domain-search {
    max-width: 750px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: auto !important;
    min-height: 70px !important;
    padding-bottom: 10px !important;
}

/* Force the text box area to act as a proper input field and clear height constraints */
.domain-search-box textarea.form-control,
.domain-search-box input.form-control,
.view-cart-domain-search textarea.form-control {
    height: auto !important;
    min-height: 55px !important;
    max-height: 120px !important;
    resize: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Position the search button cleanly inside the bottom right of the box */
.domain-search-box .search-button,
.domain-search-box .input-group-btn,
.domain-search-box button.btn-primary {
    position: relative !important;
    display: inline-block !important;
    margin-top: 5px !important;
    float: right !important;
}

/* Fix for external domain search box styling */
.domain-search-box-container textarea, 
#domainSearchInput {
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    resize: none !important;
    padding: 10px 15px !important;
    line-height: 25px !important;
    border-radius: 4px !important;
    border: 1px solid #ccc !important;
}

/* Align and clean up extra option buttons underneath */
.domain-search-options, 
[class*="Include TLDs"] {
    display: inline-flex !important;
    gap: 10px !important;
    margin-top: 8px !important;
}

/* Fix the height and text wrapping of the Nexus Cart search box */
#order-standard_cart textarea,
#nexus-root textarea {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    resize: none !important;
    padding: 12px 15px !important;
    font-size: 15px !important;
    line-height: 24px !important;
    border-radius: 4px !important;
    border: 1px solid #ced4da !important;
    box-sizing: border-box !important;
}

/* Realign and match the height of the Search button */
#order-standard_cart button,
#nexus-root button {
    height: 48px !important;
    padding: 0 25px !important;
    font-size: 16px !important;
    border-radius: 4px !important;
    vertical-align: top !important;
}

/* Align and clean up the filter pills underneath the search bar */
#nexus-root .flex, 
#nexus-root div[class*="Include"] {
    display: inline-flex !important;
    align-items: center !important;
    margin-top: 10px !important;
    gap: 8px !important;
}
/* Clean styling for the text input box */
#nexus-root textarea, 
#order-standard_cart textarea {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
    line-height: 24px !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    resize: none !important;
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
    display: block !important;
}

/* Fix the purple search button sizing and separation */
#nexus-root button,
#order-standard_cart button {
    height: 38px !important;
    padding: 0 25px !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    float: right !important;
    margin-top: 5px !important;
    cursor: pointer !important;
}

/* Align the selection labels nicely on the left side under the box */
#nexus-root label,
#nexus-root div[class*="Include"],
#nexus-root select {
    display: inline-flex !important;
    align-items: center !important;
    margin-top: 10px !important;
    margin-right: 15px !important;
    vertical-align: middle !important;
}
/* Change the domain search box background from yellow to your theme color */
.domain-checker-container,
.domain-lookup-container,
#order-standard_cart .domain-header-container,
div[class*="domain-header-container"] {
    background-color: #2e1a47 !important; /* <--- Change this HEX code to match your exact purple/default website color */
    background-image: none !important;    /* Removes the yellow world globe graphic pattern */
}

/* Ensure any internal text elements remain highly readable over the dark background */
.domain-checker-container h2,
.domain-lookup-container h2,
#order-standard_cart .domain-header-container p {
    color: #ffffff !important;
}
/* Change the yellow "Explore packages now" button to your purple */
#order-standard_cart .btn-warning,
#order-standard_cart .btn-warning:hover,
#order-standard_cart .btn-warning:focus,
.cart-body a.btn-warning,
.cart-body a.btn-warning:hover {
    background-color: #34179F !important;
    border-color: #34179F !important;
    color: #ffffff !important; /* Forces the button text to stay white and readable */
}

/* Change the small yellow subtitle text underneath the heading to your purple */
#order-standard_cart .text-warning,
.cart-body .text-warning,
.cart-body div[class*="subtitle"] {
    color: #34179F !important;
}
/* Force all text inside product feature rows to be white and readable */
#order-standard_cart .product-status,
#order-standard_cart .price-table,
.cart-body div[class*="product"] ul,
.cart-body div[class*="product"] li,
.cart-body p  color: #00000 !important;
.cart-body div {
    color: #ffffff !important;
}

/* Clear up any hard-to-read dark links inside the tables */
.cart-body div[class*="product"] a {
    color: #ffffff !important;
    text-decoration: underline !important;
}
/* 1. Change the main box container to a clean light grey/white background */
#order-standard_cart [class*="product"], 
#order-standard_cart .price-table,
.cart-body div[class*="package"],
.cart-body .product-plan {
    background-color: #f4f6fa !important; /* Soft grey background like the image */
    background-image: none !important;
    border-radius: 12px !important;       /* Rounded modern corners */
    border: 1px solid #e1e5ef !important; /* Subtle outer border */
    padding: 25px 20px !important;
}

/* 2. Style the main headings (Product Names) to be your signature dark purple */
#order-standard_cart h3,
#order-standard_cart .product-title,
.cart-body h3,
.cart-body div[class*="name"] {
    color: #34179F !important;
    font-weight: 700 !important;
    font-size: 22px !important;
}

/* 3. Style the pricing text numbers to be dark grey/black */
#order-standard_cart .price,
#order-standard_cart [class*="price"] span,
.cart-body [class*="amount"] {
    color: #f9f9f9 !important;
    font-weight: 700 !important;
}

/* 4. Turn feature list lines back to dark grey with solid contrast */
#order-standard_cart ul,
#order-standard_cart li,
.cart-body ul li,
.cart-body p {
    color: #4a5568 !important; /* Clean readable dark grey */
    font-size: 14px !important;
    line-height: 24px !important;
}

/* 5. Remake the "Order Now" button to match the image's vibrant purple */
#order-standard_cart .btn-order-now,
#order-standard_cart button[type="submit"],
.cart-body .btn-primary,
.cart-body a.btn {
    background-color: #5b21b6 !important; /* Bright purple color matching the layout */
    border-color: #5b21b6 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    transition: background 0.2s ease !important;
}

/* Hover style for the buttons */
#order-standard_cart .btn-order-now:hover,
.cart-body .btn-primary:hover {
    background-color: #34179F !important; /* Deepens to your brand purple on hover */
}
/* Fix the invisible table headers by making the text stark white */
#order-standard_cart .product-plan,
.cart-body div[class*="header"] h3,
.cart-body [class*="product-name"],
.cart-body div[class*="package"] h3 {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

/* Fix the highlighted page title text "Cloudweb hosting" at the top */
.cart-body h1,
#order-standard_cart h1,
.cart-body div[class*="title"] h1,
h1 {
    color: #34179F !important; /* Matches your premium brand purple */
    font-weight: bold !important;
    background-color: transparent !important; /* Safely removes any weird text highlighting artifacts */
}
/* Fix the header title text contrast inside the dark purple blocks */
.cart-body div[class*="header"] span,
.cart-body div[class*="header"] div,
.cart-body [class*="product-name"] span,
#order-standard_cart [id*="product"] h3,
#order-standard_cart .product-header h3 {
    color: #ffffff !important;
}

/* Highly aggressive force-fix for all WHMCS product box header titles */
#order-standard_cart [class*="header"] *,
#order-standard_cart [class*="title"] *,
.cart-body [class*="header"] *,
.cart-body div[id*="product"] h3,
.cart-body div[id*="product"] h4,
#order-standard_cart h3,
#order-standard_cart h4 {
    color: #000000f7 !important;
}

/* Change text color to white for the domain suggestion buttons */
.btn-default.btn-add-to-cart, 
.suggested-domains .btn,
.suggested-domains button {
    color: #ffffff !important;
}

.suggested-domains .btn:not(.domain-contact-support) {
    padding: 2px 10px;
    font-size: 11px;
    line-height: 1.4;
    border-radius: 3px;
    background-color: #130551  !important;
    border-color: #333;
    color: #fff;
}

#order-standard_cart .panel-addon .panel-add {
    display: block;
    padding: 4px;
    background-color: #130551  !important;
    color: #fff;
    border-radius: 0 0 4px 4px;
}

#frmDomainHomepage #btnTransfer {
    background: #130551  !important;
    border-color: var(--grayscale);
}

.btn-success {
    color: #fff;
    background-color: #34179F !important;
    border-color: #34179F !important;
}

footer.footer .copyright {
    margin: 30px 0;
    font-size: .85rem;
    text-align: center;
    color: #FFFFFF!important;
}

.text-danger {
    color: ##130551 !important;
}