:root {
    --sonic-purple: #5b2ca0;
    --sonic-purple-dark: #43207a;
    --sonic-green: #8dc63f;
    --sonic-green-dark: #6fa22f;
    --sonic-bg: #f6f7fb;
    --sonic-card: #ffffff;
    --sonic-text: #1f2430;
    --sonic-muted: #6b7280;
    --sonic-border: #e5e7eb;
    --sonic-shadow: 0 10px 25px rgba(0,0,0,0.08);
    --sonic-radius: 16px;
}

/* Global */
body {
    background: linear-gradient(180deg, #f7f8fc 0%, #eef2f7 100%);
    color: var(--sonic-text);
}
/* Sonic purple gradient (no pink) */

.navbar,
.navbar-main,
#header,
header.header-lined {
    background: linear-gradient(
        90deg,
        #2e004f 0%,   /* very dark purple */
        #5a1a8a 45%,  /* main purple */
        #7b3fb2 100%  /* lighter purple (not pink) */
    ) !important;

    border-bottom: 4px solid #8dc63f;
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
}
/* Hero / page header */
.page-header,
.client-home-panels .panel-heading,
.section-header h1,
.main-content .header-lined h1 {
    color: var(--sonic-purple-dark);
}

/* Cards / panels */
.card,
.panel,
.domain-checker-container,
.tiles .tile,
.client-home-panels .panel,
div.panel.panel-default {
    background: var(--sonic-card);
    border: 1px solid var(--sonic-border);
    border-radius: var(--sonic-radius);
    box-shadow: var(--sonic-shadow);
    overflow: hidden;
}

.card-header,
.panel-heading {
    background: linear-gradient(90deg, rgba(91,44,160,0.08) 0%, rgba(141,198,63,0.10) 100%);
    border-bottom: 1px solid var(--sonic-border);
    color: var(--sonic-purple-dark);
    font-weight: 700;
}

/* Buttons */
.btn-primary,
.btn-success,
.btn-info {
    background: var(--sonic-purple) !important;
    border-color: var(--sonic-purple) !important;
    color: #fff !important;
    border-radius: 10px;
    font-weight: 700;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover {
    background: var(--sonic-purple-dark) !important;
    border-color: var(--sonic-purple-dark) !important;
}

.btn-secondary,
.btn-default {
    background: var(--sonic-green) !important;
    border-color: var(--sonic-green-dark) !important;
    color: #1b1b1b !important;
    border-radius: 10px;
    font-weight: 700;
}

.btn-secondary:hover,
.btn-default:hover {
    background: var(--sonic-green-dark) !important;
    border-color: var(--sonic-green-dark) !important;
    color: #fff !important;
}

/* Links */
a {
    color: var(--sonic-purple);
}
a:hover {
    color: var(--sonic-green-dark);
}

/* Tables */
.table thead th {
    background: #f3f0fb;
    color: var(--sonic-purple-dark);
    border-bottom: 2px solid var(--sonic-green);
}

.table td,
.table th {
    vertical-align: middle;
}

/* Badges / labels */
.label-success,
.badge-success,
.status-active {
    background: var(--sonic-green) !important;
    color: #1b1b1b !important;
}

.label-warning,
.badge-warning {
    background: #facc15 !important;
    color: #1b1b1b !important;
}

.label-danger,
.badge-danger,
.status-terminated,
.status-cancelled {
    background: #dc2626 !important;
    color: #fff !important;
}

/* Sidebar blocks */
.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
    background: var(--sonic-purple) !important;
    border-color: var(--sonic-purple) !important;
}

.list-group-item {
    border-radius: 10px !important;
    margin-bottom: 6px;
    border: 1px solid var(--sonic-border);
}

/* Inputs */
.form-control,
.form-select,
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
    border-radius: 10px;
    border: 1px solid #d1d5db;
    box-shadow: none;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--sonic-purple);
    box-shadow: 0 0 0 0.2rem rgba(91,44,160,0.15);
}

/* Footer */
footer,
#footer {
    background: #1f2430;
    color: #d1d5db;
    margin-top: 40px;
    border-top: 4px solid var(--sonic-green);
}

footer a,
#footer a {
    color: #fff;
}

/* Homepage quick panels */
.client-home-panels .panel {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.client-home-panels .panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0,0,0,0.12);
}

/* Optional Sonic hero */
.sonic-client-hero {
    background: linear-gradient(135deg, var(--sonic-purple-dark) 0%, var(--sonic-purple) 55%, #6c3fc2 100%);
    color: #fff;
    border-radius: 18px;
    padding: 28px 30px;
    margin-bottom: 24px;
    box-shadow: var(--sonic-shadow);
    position: relative;
    overflow: hidden;
}
.sonic-client-hero::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 180px;
    height: 180px;
    background: rgba(141,198,63,0.18);
    border-radius: 50%;
}
.sonic-client-hero h1,
.sonic-client-hero h2,
.sonic-client-hero p {
    color: #fff !important;
    position: relative;
    z-index: 1;
}
.sonic-client-hero .btn {
    position: relative;
    z-index: 1;
}
/* Fix dropdown menu colors */
.dropdown-menu {
    background: #ffffff !important;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.dropdown-menu .dropdown-item {
    color: #1f2430 !important;
    font-weight: 500;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: #f3f0fb !important;
    color: #5b2ca0 !important;
}

/* Make sure navbar dropdown text is readable */
.navbar .dropdown-menu a {
    color: #1f2430 !important;
}

.navbar .dropdown-menu a:hover {
    color: #5b2ca0 !important;
}
/* Sonic highlight for Recent Tickets section */

.client-home-panels .panel:nth-child(2),
.client-home-panels .card:nth-child(2) {
    background: #f2fae8 !important;   /* very light sonic green */
    border: 1px solid #cfe8a6;
}

/* Header styling */
.client-home-panels .panel:nth-child(2) .panel-heading,
.client-home-panels .card:nth-child(2) .card-header {
    background: #e7f6d2 !important;
    color: #355d1c !important;
    border-bottom: 1px solid #cfe8a6;
}
/* Remove white boxes around navbar search and cart */

.navbar .form-control,
.navbar input[type="search"],
.navbar .search-form input {
    background: rgba(255,255,255,0.15) !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    color: #ffffff !important;
}

/* placeholder text */
.navbar .form-control::placeholder {
    color: rgba(255,255,255,0.8);
}

/* remove white container around cart icon */
.navbar .dropdown,
.navbar .nav-item.dropdown {
    background: transparent !important;
}

/* cart dropdown button */
.navbar .dropdown-toggle {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
}

/* hover state */
.navbar .form-control:focus {
    background: rgba(255,255,255,0.25) !important;
    border-color: rgba(255,255,255,0.6) !important;
    box-shadow: none;
}
/* ===== Remove white boxes around search + cart ===== */

.navbar .nav-item,
.navbar .nav-item form,
.navbar .nav-item .dropdown {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* search field */
.navbar input[type="search"],
.navbar .form-control {
    background: rgba(255,255,255,0.15) !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    color: #ffffff !important;
    border-radius: 8px;
}

/* search placeholder */
.navbar input::placeholder {
    color: rgba(255,255,255,0.75);
}

/* shopping cart button */
.navbar .dropdown-toggle {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* cart icon bubble */
.navbar .badge {
    background: #8dc63f !important;
    color: #000 !important;
}

/* remove Bootstrap white background helper */
.bg-light,
.bg-white {
    background: transparent !important;
}
/* ===== FORCE-remove white boxes around header search/cart ===== */

/* common wrapper blocks in Twenty-One */
.navbar .toolbar-item,
.navbar .toolbar-item > a,
.navbar .toolbar-item > div,
.navbar .nav-item-cart,
.navbar .nav-item-cart > a,
.navbar .nav-item-search,
.navbar .nav-item-search > a,
.navbar .d-inline-block,
.navbar .btn,
.navbar .btn-group,
.navbar .input-group,
.navbar .input-group-text,
.navbar .form-inline,
.navbar .dropdown-toggle,
.navbar .dropdown-menu.show + *,
.primary-nav .nav-item,
.primary-nav .nav-link,
.secondary-nav .nav-item,
.secondary-nav .nav-link {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* search wrapper */
.navbar .nav-item-search form,
.navbar .nav-item-search .search-box,
.navbar .nav-item-search .input-group,
.navbar .nav-item-search .form-control {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* actual search input */
.navbar .nav-item-search input,
.navbar input[type="search"],
.navbar input.form-control {
    background: rgba(255,255,255,0.14) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.32) !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}

/* placeholder */
.navbar .nav-item-search input::placeholder,
.navbar input[type="search"]::placeholder,
.navbar input.form-control::placeholder {
    color: rgba(255,255,255,0.78) !important;
}

/* cart link/button */
.navbar .nav-item-cart > a,
.navbar .nav-item-cart .dropdown-toggle,
.navbar .toolbar-item > a.dropdown-toggle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
}

/* badge bubble */
.navbar .badge,
.navbar .cart-qty,
.navbar .item-counter {
    background: #8dc63f !important;
    color: #1b1b1b !important;
    border: none !important;
    box-shadow: none !important;
}

/* kill generic white utility backgrounds inside header only */
.navbar .bg-white,
.navbar .bg-light,
.navbar .card,
.navbar .panel,
.navbar .well {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* =========================================
   SONIC SHOPPING CART STYLING
   ========================================= */

:root {
    --sonic-purple-dark: #2e004f;
    --sonic-purple: #5a1a8a;
    --sonic-purple-light: #7b3fb2;
    --sonic-green: #8dc63f;
    --sonic-green-dark: #6fa22f;
    --sonic-cart-bg: #f7f5fb;
    --sonic-cart-border: #ddd6ea;
    --sonic-text: #1f2430;
    --sonic-muted: #6b7280;
}

/* cart page background blocks */
#order-standard_cart .secondary-cart-body,
#order-standard_cart .cart-body,
#order-standard_cart .products,
#order-standard_cart .product,
#order-standard_cart .view-cart-items,
#order-standard_cart .field-container,
#order-standard_cart .sub-heading,
#order-standard_cart .order-summary,
#order-standard_cart .summary-container {
    border-radius: 14px;
}

/* step bar / progress */
#order-standard_cart .checkout-steps li,
#order-standard_cart .breadcrumb li,
#order-standard_cart .order-step {
    background: #efe9f8 !important;
    color: var(--sonic-purple-dark) !important;
    border-color: var(--sonic-cart-border) !important;
}

#order-standard_cart .checkout-steps li.active,
#order-standard_cart .breadcrumb li.active,
#order-standard_cart .order-step.active {
    background: linear-gradient(90deg, var(--sonic-purple-dark) 0%, var(--sonic-purple) 55%, var(--sonic-purple-light) 100%) !important;
    color: #fff !important;
    border-color: var(--sonic-purple) !important;
}

#order-standard_cart .checkout-steps li.completed,
#order-standard_cart .order-step.completed {
    background: #e9f6d8 !important;
    color: #355d1c !important;
    border-color: #cfe8a6 !important;
}

/* product cards */
#order-standard_cart .products .product,
#order-standard_cart .product {
    background: #fff !important;
    border: 1px solid var(--sonic-cart-border) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.06);
    overflow: hidden;
}

#order-standard_cart .products .product header,
#order-standard_cart .product header,
#order-standard_cart .products .product .header,
#order-standard_cart .product .header {
    background: linear-gradient(90deg, rgba(46,0,79,0.08) 0%, rgba(123,63,178,0.08) 100%) !important;
    color: var(--sonic-purple-dark) !important;
    border-bottom: 1px solid var(--sonic-cart-border) !important;
}

/* category/sidebar blocks */
#order-standard_cart .sidebar,
#order-standard_cart .panel,
#order-standard_cart .card,
#order-standard_cart .domain-selection-options,
#order-standard_cart .options,
#order-standard_cart .addons,
#order-standard_cart .info-text {
    background: var(--sonic-cart-bg) !important;
    border: 1px solid var(--sonic-cart-border) !important;
    color: var(--sonic-text) !important;
}

/* order summary box */
#order-standard_cart .order-summary,
#order-standard_cart .summary-container,
#order-standard_cart .view-cart-summary {
    background: linear-gradient(180deg, #ffffff 0%, #f7f5fb 100%) !important;
    border: 1px solid var(--sonic-cart-border) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

#order-standard_cart .order-summary .header,
#order-standard_cart .summary-container .header,
#order-standard_cart .view-cart-summary .header,
#order-standard_cart .order-summary h2,
#order-standard_cart .order-summary h3 {
    background: linear-gradient(90deg, var(--sonic-purple-dark) 0%, var(--sonic-purple) 60%, var(--sonic-purple-light) 100%) !important;
    color: #fff !important;
    border-radius: 12px 12px 0 0;
    padding: 14px 16px;
}

/* totals and prices */
#order-standard_cart .order-summary .total-due-today,
#order-standard_cart .summary-totals .recurring,
#order-standard_cart .price,
#order-standard_cart .price .amt,
#order-standard_cart .total {
    color: var(--sonic-purple-dark) !important;
    font-weight: 700;
}

/* buttons */
#order-standard_cart .btn-primary,
#order-standard_cart .checkout-btn,
#order-standard_cart .btn-checkout {
    background: linear-gradient(90deg, var(--sonic-purple-dark) 0%, var(--sonic-purple) 55%, var(--sonic-purple-light) 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700;
    border-radius: 10px !important;
    box-shadow: 0 8px 18px rgba(90,26,138,0.22);
}

#order-standard_cart .btn-primary:hover,
#order-standard_cart .checkout-btn:hover,
#order-standard_cart .btn-checkout:hover {
    filter: brightness(0.96);
}

#order-standard_cart .btn-secondary,
#order-standard_cart .btn-default,
#order-standard_cart .btn-continue-shopping {
    background: var(--sonic-green) !important;
    border: 1px solid var(--sonic-green-dark) !important;
    color: #1b1b1b !important;
    font-weight: 700;
    border-radius: 10px !important;
}

#order-standard_cart .btn-secondary:hover,
#order-standard_cart .btn-default:hover,
#order-standard_cart .btn-continue-shopping:hover {
    background: var(--sonic-green-dark) !important;
    color: #fff !important;
}

/* domain search area */
#order-standard_cart .domain-search-box,
#order-standard_cart .domain-checker-container,
#order-standard_cart .spotlight-tlds {
    background: linear-gradient(135deg, #f8f5fc 0%, #f1ebfa 100%) !important;
    border: 1px solid var(--sonic-cart-border) !important;
}

#order-standard_cart .domain-search-box .form-control,
#order-standard_cart .domain-checker-container .form-control {
    border: 1px solid #cdbfe0 !important;
    border-radius: 10px !important;
}

#order-standard_cart .domain-search-box .btn,
#order-standard_cart .domain-checker-container .btn {
    border-radius: 10px !important;
}

/* promo code area */
#order-standard_cart .promo-code,
#order-standard_cart .promotion,
#order-standard_cart .coupon,
#order-standard_cart .promo-container {
    background: #eef8df !important;
    border: 1px solid #cfe8a6 !important;
    color: #355d1c !important;
    border-radius: 12px !important;
}

/* form fields */
#order-standard_cart .form-control,
#order-standard_cart .form-select,
#order-standard_cart input[type="text"],
#order-standard_cart input[type="email"],
#order-standard_cart input[type="password"],
#order-standard_cart select {
    border-radius: 10px !important;
    border: 1px solid #d7d2e3 !important;
    box-shadow: none !important;
}

#order-standard_cart .form-control:focus,
#order-standard_cart .form-select:focus,
#order-standard_cart input:focus,
#order-standard_cart select:focus {
    border-color: var(--sonic-purple) !important;
    box-shadow: 0 0 0 0.2rem rgba(90,26,138,0.12) !important;
}

/* alerts */
#order-standard_cart .alert-success {
    background: #eef8df !important;
    border-color: #cfe8a6 !important;
    color: #355d1c !important;
}

#order-standard_cart .alert-info {
    background: #f1ebfa !important;
    border-color: #d8c9f0 !important;
    color: var(--sonic-purple-dark) !important;
}

#order-standard_cart .alert-danger {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #9f1239 !important;
}
.sonic-service-icon {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px auto;
    background: rgba(0,0,0,0.15);
}

.sonic-service-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}