/* custom.css - Twenty-One Template styling overrides to match hicloudy.com */

:root {
    --color-bg-primary: #0a0a0f;
    --color-bg-secondary: #12121a;
    --color-bg-card: #1a1a24;
    --color-bg-card-hover: #22222e;

    --color-text-primary: #f8FAFC;
    --color-text-secondary: #94A3B8;
    --color-text-muted: #64748B;

    --color-accent-primary: #00D4FF;
    --color-accent-secondary: #7C3AED;

    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-hover: rgba(255, 255, 255, 0.2);

    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;

    --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 1rem;
    --spacing-3xl: 8rem;

    --container-max: 1280px;
    --container-padding: 1.5rem;
    --header-height: 80px;
}

/* Base Body Styles */
body {
    background-color: var(--color-bg-primary) !important;
    color: var(--color-text-body) !important;
    font-family: var(--font-body) !important;
}

/* Typography Overrides */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-heading) !important;
    color: var(--color-text-primary) !important;
}

p {
    color: var(--color-text-secondary);
}

a {
    color: var(--color-accent-primary);
    transition: var(--transition-base);
}

a:hover {
    color: var(--color-accent-secondary);
    text-decoration: none;
}

/* Header & Top Bar Styles Override (to match hiCloudy.com) */
#header {
    background: rgba(10, 10, 15, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--color-border) !important;
}

.navbar-brand img,
.logo-img {
    height: 40px !important;
    width: auto !important;
}

/* Topbar for Logged in Users */
.topbar {
    background-color: var(--color-bg-secondary) !important;
    border-bottom: 1px solid var(--color-border) !important;
}

.topbar .btn {
    color: var(--color-text-secondary) !important;
}

.topbar .btn:hover {
    color: var(--color-text-primary) !important;
}

/* Button Overrides */
.btn-primary {
    background: #0F303A !important;
    color: #00D4FF !important;
    font-weight: 600 !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 12px !important;
    padding: 0.75rem 1.5rem !important;
    transition: var(--transition-base) !important;
    cursor: pointer !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: #144352 !important;
    color: #00D4FF !important;
    border: 1px solid rgba(0, 212, 255, 0.6) !important;
    transform: translateY(-2px) !important;
}

.btn-default {
    background-color: transparent !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-full) !important;
    transition: var(--transition-base) !important;
}

.btn-default:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--color-border-hover) !important;
}

/* Card & Panel Overrides */
.card,
.panel {
    background-color: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    transition: var(--transition-base) !important;
}



.card-header,
.panel-heading {
    background-color: var(--color-bg-secondary) !important;
    border-bottom: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
    border-top-left-radius: calc(var(--radius-lg) - 1px) !important;
    border-top-right-radius: calc(var(--radius-lg) - 1px) !important;
    font-family: var(--font-heading) !important;
    font-weight: 600;
}

.card-footer,
.panel-footer {
    background-color: var(--color-bg-secondary) !important;
    border-top: 1px solid var(--color-border) !important;
    border-bottom-left-radius: calc(var(--radius-lg) - 1px) !important;
    border-bottom-right-radius: calc(var(--radius-lg) - 1px) !important;
}

/* Form Labels and Text Contrast */
.mw-540 {
    margin-left: auto !important;
    margin-right: auto !important;
}

label,
.control-label,
.custom-control-label {
    color: var(--color-text-primary) !important;
    font-weight: 500 !important;
}

.logincontainer,
.login-container {
    color: var(--color-text-secondary) !important;
}

.form-control::placeholder,
input::placeholder {
    color: var(--color-text-muted) !important;
    opacity: 1 !important;
}

.logincontainer a,
.login-container a,
.form-group a {
    color: var(--color-accent-primary) !important;
    transition: var(--transition-base) !important;
}

.logincontainer a:hover,
.login-container a:hover,
.form-group a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Input Fields Overrides */
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea {
    background-color: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
    border-radius: var(--radius-md) !important;
    transition: var(--transition-base) !important;
    padding: 0.75rem 1rem !important;
    height: auto !important;
    /* Fix for select text cutoff */
    line-height: 1.5 !important;
}

select.form-control,
select {
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
}

/* Fix Registration Page Prepend Icons overlapping text */
label[for="inputPhone"].field-icon {
    display: none !important;
    /* Intl-tel-input flag makes this redundant */
}

/* Intl-tel-input (Phone layout) Fixes */
.iti__selected-dial-code,
.selected-dial-code,
.iti__selected-flag,
.iti-selected-flag {
    color: #BBBBBB !important;
}

.iti__selected-flag,
.selected-flag {
    position: relative !important;
    padding-right: 16px !important;
}

.iti__arrow,
.iti-arrow {
    position: absolute !important;
    top: 50% !important;
    margin-top: -2px !important;
    right: 1px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 3px solid transparent !important;
    border-right: 3px solid transparent !important;
    border-top: 4px solid #BBBBBB !important;
    border-bottom: none !important;
    margin-left: 0 !important;
}

.iti__arrow--up,
.iti-arrow--up {
    border-top: none !important;
    border-bottom: 4px solid #BBBBBB !important;
}

#inputPhone {
    padding-left: 6.2rem !important;
    /* Give extra space for 4-digit country codes like +1869 */
}

.prepend-icon .form-control,
.prepend-icon .field {
    padding-left: 3.5rem !important;
    /* Make room for the absolutely positioned icon */
}

.prepend-icon .field-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 1.25rem !important;
    color: var(--color-text-primary) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    /* Allow clicking through to the input */
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1) !important;
    background-color: var(--color-bg-card-hover) !important;
    outline: none !important;
}

/* Seamless Input Groups */
.input-group {
    background-color: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    transition: var(--transition-base) !important;
    overflow: hidden;
    /* Ensure inner elements conform to border-radius */
    display: flex;
    /* Fix vertical alignment */
}

.input-group:focus-within {
    border-color: var(--color-accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1) !important;
    background-color: var(--color-bg-card-hover) !important;
}

.input-group .form-control {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    height: auto !important;
    /* Allow padding to govern height */
    padding-left: 0.5rem !important;
    /* Move text closer to the icon */
}

.input-group .form-control:focus {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Input Group Text (e.g., Domain Extensions, Icons, Toggle Buttons) */
.input-group-text,
.input-group-addon,
.input-group-text i,
.input-group-text .fas,
.input-group-text .far,
.input-group-addon i,
.input-group-append .btn {
    background-color: transparent !important;
    border: none !important;
    color: var(--color-text-primary) !important;
    box-shadow: none !important;
    padding-left: 1rem !important;
    padding-right: 0.5rem !important;
    /* Keep icon closer to the text */
}

/* Ensure eye icon toggle retains its spacing */
.input-group-append .btn {
    padding-right: 1.5rem !important;
}

.input-group-append .btn:hover {
    color: var(--color-accent-primary) !important;
}

/* Fix Login Footer "Not registered?" text */
.card-footer,
.panel-footer {
    color: #f8fafc !important;
}

.card-footer a,
.panel-footer a {
    color: var(--color-accent-primary) !important;
    font-weight: 600;
}

.card-footer a:hover,
.panel-footer a:hover {
    color: #ffffff !important;
}

/* Tables */
.table {
    color: var(--color-text-secondary) !important;
}

.table th {
    color: var(--color-text-primary) !important;
    border-bottom: 2px solid var(--color-border) !important;
    font-family: var(--font-heading) !important;
}

.table td {
    border-top: 1px solid var(--color-border) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Sidebar Overrides */
.sidebar .panel {
    background-color: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
}

.sidebar .panel-heading {
    background-color: transparent !important;
    border-bottom: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-heading) !important;
}

.sidebar .list-group-item {
    background-color: transparent !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-secondary) !important;
    transition: var(--transition-base) !important;
}

.sidebar .list-group-item.active {
    background-color: rgba(0, 212, 255, 0.05) !important;
    color: var(--color-accent-primary) !important;
}

.sidebar .list-group-item:hover {
    color: var(--color-accent-primary) !important;
    transform: translateX(2px) !important;
}

/* Pagination Overrides */
.pagination {
    background-color: transparent !important;
}

.pagination>li>a,
.pagination>li>span {
    background-color: var(--color-bg-secondary) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-secondary) !important;
    border-radius: var(--radius-sm) !important;
    margin: 0 4px !important;
    /* Spacing between pagination items */
}

.pagination>li>a:hover {
    background-color: var(--color-bg-card-hover) !important;
    border-color: var(--color-border-hover) !important;
    color: var(--color-text-primary) !important;
}

.pagination>li.active>a,
.pagination>li.active>span {
    background-color: var(--color-accent-primary) !important;
    border-color: var(--color-accent-primary) !important;
    color: #fff !important;
}


/* Alerts Overrides */
.alert {
    border-radius: var(--radius-md) !important;
    border: none !important;
    padding: 1rem 1.25rem !important;
    /* Increase internal padding */
}

.alert-info {
    background-color: rgba(0, 212, 255, 0.1) !important;
    color: var(--color-accent-primary) !important;
    border-left: 4px solid var(--color-accent-primary) !important;
}

.alert-success {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #10B981 !important;
    border-left: 4px solid #10B981 !important;
}

.alert-warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: #F59E0B !important;
    border-left: 4px solid #F59E0B !important;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #EF4444 !important;
    border-left: 4px solid #EF4444 !important;
}

/* Header Height Fixes */
.header {
    position: relative;
    z-index: 1050 !important;
}

.header .header-inner {
    padding: 25px 0 !important;
}

.logo-image {
    height: 32px;
    width: auto;
    transition: var(--transition-base);
}

.main-navbar-wrapper {
    padding: 10px 0 !important;
}

/* Main Navbar Link Overrides */
.navbar-nav .nav-link,
.nav-list .nav-link,
header.header .navbar a,
.header.header .navbar a {
    color: #ffffff !important;
    font-weight: 500 !important;
    transition: var(--transition-base) !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .dropdown.show .nav-link,
.nav-list .nav-link:hover,
header.header .navbar a:hover,
.header.header .navbar a:hover {
    color: var(--color-accent-primary) !important;
}

.navbar-nav .active .nav-link,
header.header .navbar .active a,
.header.header .navbar .active a {
    color: #ffffff !important;
}

.navbar-light .navbar-nav .nav-link {
    color: #ffffff !important;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: var(--color-accent-primary) !important;
}


/* Search Field Fixes */
.input-group.search {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-full) !important;
    background-color: var(--color-bg-card) !important;
    overflow: hidden;
}

.input-group.search .input-group-prepend .btn {
    border: none !important;
    background-color: transparent !important;
    color: var(--color-text-secondary) !important;
    padding-right: 0 !important;
    box-shadow: none !important;
}

/* Breadcrumb Overrides */
.master-breadcrumb {
    background-color: var(--color-bg-secondary) !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding: 10px 0;
}

.master-breadcrumb:has(.breadcrumb:empty) {
    display: none !important;
}

.master-breadcrumb .breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}


.input-group.search .form-control {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding-left: 10px !important;
}

.input-group.search:focus-within {
    border-color: var(--color-accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1) !important;
}

/* Media Queries */
@media (min-width: 992px) {
    .header .navbar-nav>li>.dropdown-menu {
        margin-top: 10px !important;
    }
}

/* Bootstrap Switch (Yes/No Toggles) Overrides for Dark Theme */
.bootstrap-switch {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    background-color: var(--color-bg-secondary) !important;
}

.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
    background-color: var(--color-accent-primary) !important;
    color: #ffffff !important;
}

.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
    background-color: var(--color-bg-card) !important;
    color: var(--color-text-secondary) !important;
}

.bootstrap-switch .bootstrap-switch-label {
    background-color: var(--color-bg-secondary) !important;
    color: var(--color-text-primary) !important;
}

/* Dropdown Menu Overrides */
.main-navbar-wrapper {
    position: relative;
    z-index: 1040 !important;
}

.dropdown-menu {
    background-color: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
    border-radius: var(--radius-md) !important;
    z-index: 1050 !important;
    padding: 0 !important;
    /* Remove default padding */
    overflow: hidden;
    /* Prevent items from bleeding out of border-radius */
    margin-top: 10px !important;
}

.dropdown-item {
    color: var(--color-text-secondary) !important;
    transition: var(--transition-base) !important;
    padding: 0.5rem 1.25rem !important;
    /* Adjusted padding for a slimmer submenu */
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: 0.95rem !important;
    /* Ensure internal items don't have conflicting radii */
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: transparent !important;
    /* Removed background highlight per request */
    color: var(--color-accent-primary) !important;
    transform: translateX(2px) !important;
}

.dropdown-divider {
    border-color: var(--color-border) !important;
}

/* Additional layout fix to give breathing room */
#main-body {
    padding-bottom: var(--spacing-md) !important;
}

.primary-content {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    /* Reduced gap above footer */
}

/* Order Form / Pricing Table Overrides (standard_cart) */
#order-standard_cart .products .product {
    background-color: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    transition: var(--transition-base) !important;
}

#order-standard_cart .products .product:hover {
    border-color: var(--color-border-hover) !important;
}

#order-standard_cart .products .product header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

#order-standard_cart .products .product header span {
    color: var(--color-text-primary) !important;
}

#order-standard_cart .products .product header span.qty {
    color: var(--color-text-secondary) !important;
}

#order-standard_cart .products .product .product-desc {
    color: var(--color-text-secondary) !important;
}

#order-standard_cart .products .product .product-desc ul li {
    background-color: transparent !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-secondary) !important;
}

#order-standard_cart .products .product .product-desc ul li:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

#order-standard_cart .products .product footer {
    background-color: transparent !important;
    border-left: 1px solid var(--color-border) !important;
}

#order-standard_cart .products .product footer .product-pricing {
    color: var(--color-text-primary) !important;
}

#order-standard_cart .products .product footer .product-pricing .price {
    color: var(--color-accent-primary) !important;
}

/* Match the green btn-success "Order Now" to the custom .btn-primary aesthetic */
#order-standard_cart .products .product footer .btn-success.btn-order-now {
    background: #0F303A !important;
    color: #00D4FF !important;
    font-weight: 600 !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 12px !important;
    transition: var(--transition-base) !important;
}

#order-standard_cart .products .product footer .btn-success.btn-order-now:hover {
    background: #144352 !important;
    color: #00D4FF !important;
    border: 1px solid rgba(0, 212, 255, 0.6) !important;
    transform: translateY(-2px) !important;
}

/* Domain Search Box Overrides */
.domain-checker-bg {
    background-color: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--spacing-lg) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.domain-checker-container {
    padding: 0 !important;
    border-radius: var(--radius-lg) !important;
}

/* Domain/Cart Sidebar Overrides */
#order-standard_cart .cart-sidebar .panel {
    background-color: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

#order-standard_cart .cart-sidebar .panel-heading {
    background-color: transparent !important;
    border-bottom: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
    padding: 1rem 1.25rem !important;
}

#order-standard_cart .cart-sidebar .list-group-item {
    background-color: transparent !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    color: var(--color-text-secondary) !important;
    transition: var(--transition-base) !important;
    padding: 0.75rem 1.25rem !important;
}

#order-standard_cart .cart-sidebar .list-group-item:hover,
#order-standard_cart .cart-sidebar .list-group-item:focus {
    color: var(--color-accent-primary) !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
    transform: translateX(2px) !important;
}

#order-standard_cart .cart-sidebar .list-group-item.active {
    background-color: rgba(0, 212, 255, 0.05) !important;
    color: var(--color-accent-primary) !important;
}

#order-standard_cart .cart-sidebar .list-group-item .badge {
    background-color: var(--color-bg-secondary) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border) !important;
}

/* Domain Pricing Section Overrides (Featured TLDs, Category Badges, Pricing Table) */
#order-standard_cart .domain-pricing .tld-filters {
    margin-bottom: 20px !important;
}

#order-standard_cart .domain-pricing .tld-filters .badge {
    background-color: var(--color-bg-secondary) !important;
    color: var(--color-text-secondary) !important;
    border: 1px solid var(--color-border) !important;
    padding: 8px 12px !important;
    font-size: 0.9rem !important;
    margin: 4px !important;
    font-weight: 500 !important;
    transition: var(--transition-base) !important;
}

#order-standard_cart .domain-pricing .tld-filters .badge:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--color-text-primary) !important;
}

/* Ensure the active filter badge (often styled via JS with .badge-success or inline styles) matches our Cyan accent */
#order-standard_cart .domain-pricing .tld-filters .badge.badge-success,
#order-standard_cart .domain-pricing .tld-filters .badge.badge-primary,
#order-standard_cart .domain-pricing .tld-filters .badge[style] {
    background-color: #144352 !important;
    color: #00D4FF !important;
    border-color: #00D4FF !important;
}

/* Domain Extensions Pricing Table Wrappers */
#order-standard_cart .domain-pricing .bg-white {
    background-color: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
}

/* Pricing Table Header Row */
#order-standard_cart .domain-pricing .tld-pricing-header {
    background-color: var(--color-bg-secondary) !important;
    color: var(--color-text-primary) !important;
    border-bottom: 2px solid var(--color-border) !important;
    padding: 15px 0 !important;
    font-weight: 600 !important;
}

#order-standard_cart .domain-pricing .tld-pricing-header div:nth-child(odd),
#order-standard_cart .domain-pricing .tld-pricing-header .col-md-4,
#order-standard_cart .domain-pricing .tld-pricing-header .col-md-8,
#order-standard_cart .domain-pricing .tld-pricing-header .col-xs-4,
#order-standard_cart .domain-pricing .tld-pricing-header .col-4 {
    background-color: transparent !important;
}

/* Pricing Table Body Rows */
#order-standard_cart .domain-pricing .tld-row {
    background-color: transparent !important;
    border-bottom: 1px solid var(--color-border) !important;
    color: var(--color-text-secondary) !important;
    padding: 12px 0 !important;
    transition: var(--transition-base) !important;
}

#order-standard_cart .domain-pricing .tld-row:last-child {
    border-bottom: none !important;
}

#order-standard_cart .domain-pricing .tld-row:hover {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

#order-standard_cart .domain-pricing .tld-row strong {
    color: var(--color-text-primary) !important;
    font-size: 1.1rem !important;
}

/* Column dividers in pricing table */
#order-standard_cart .domain-pricing .tld-row .col-md-8 .col-xs-4,
#order-standard_cart .domain-pricing .tld-row .col-md-8 .col-4 {
    border-left: 1px solid var(--color-border) !important;
}

/* Domain Search Promo Boxes (Web Hosting, Transfer Domain) */
/* Ensure parent row stretches both columns equally */
#order-standard_cart .domain-promo-box {
    background-color: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    padding: var(--spacing-lg) !important;
    color: var(--color-text-secondary) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Force the wrapper row to stretch its columns */
#order-standard_cart .domain-promo-box {
    min-height: 250px !important;
    /* reliable fallback */
}

@media (min-width: 768px) {
    #order-standard_cart .domain-promo-box[class*="col"] {
        display: flex;
        flex-direction: column;
    }

    #order-standard_cart .row:has(> .col-md-6 > .domain-promo-box) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }

    #order-standard_cart .row:has(> .col-md-6 > .domain-promo-box)>[class*="col-"] {
        display: flex !important;
        flex-direction: column !important;
    }
}

#order-standard_cart .domain-promo-box>p:not(.font-bold) {
    flex-grow: 1 !important;
    margin-bottom: 20px !important;
    line-height: 1.6 !important;
    /* added spacing between lines */
}

#order-standard_cart .domain-promo-box>a.btn {
    align-self: flex-start !important;
    margin-top: auto !important;
}

#order-standard_cart .domain-promo-box h3 {
    color: var(--color-text-primary) !important;
    margin-bottom: 5px !important;
}

#order-standard_cart .domain-promo-box i {
    color: var(--color-text-primary) !important;
    opacity: 0.8;
}

#order-standard_cart .domain-promo-box .text-warning {
    color: var(--color-accent-primary) !important;
}

#order-standard_cart .domain-promo-box .btn-warning,
#order-standard_cart .domain-promo-box .btn-primary {
    background: #0F303A !important;
    color: #00D4FF !important;
    font-weight: 600 !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 12px !important;
    transition: var(--transition-base) !important;
    padding: 0.75rem 1.5rem !important;
    text-align: center !important;
    width: 260px !important;
    max-width: 100% !important;
}

/* Domain Search Button specific centering */
#btnCheckAvailability {
    background: #0F303A !important;
    color: #00D4FF !important;
    font-weight: 600 !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 12px !important;
    transition: var(--transition-base) !important;
    padding: 0 1.5rem !important;
    /* remove top/bottom padding to let flex handle vertical centering */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 140px !important;
}

#order-standard_cart .domain-promo-box .btn-warning:hover,
#order-standard_cart .domain-promo-box .btn-primary:hover,
#btnCheckAvailability:hover {
    background: #144352 !important;
    color: #00D4FF !important;
    border: 1px solid rgba(0, 212, 255, 0.6) !important;
    transform: translateY(-2px) !important;
}

/* Header Cart Count Badge */
#cartItemCount {
    background-color: #144352 !important;
}

/* Join Mailing List Toggle Switch (Registration Page) */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
    background: #144352 !important;
    color: #00D4FF !important;
}

/* Password Strength Bar */
.progress {
    background-color: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-base) !important;
}

.progress-bar {
    color: #fff !important;
}

/* Modals (Generate Password, etc) */
.modal-content {
    background-color: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

.modal-header.bg-primary,
.modal-header {
    background-color: var(--color-bg-card) !important;
    border-bottom: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

.modal-header .close {
    color: var(--color-text-secondary) !important;
    text-shadow: none !important;
    opacity: 0.8 !important;
}

.modal-header .close:hover {
    color: var(--color-text-primary) !important;
    opacity: 1 !important;
}

.modal-footer {
    border-top: 1px solid var(--color-border) !important;
}

.modal-body .col-form-label {
    color: var(--color-text-secondary) !important;
}

.modal-content .btn-default {
    background-color: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
    transition: var(--transition-base) !important;
}

.modal-content .btn-default:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--color-text-primary) !important;
}

/* Force "No" and "Yes" buttons in Remove Item modal to exactly match sizes */
.modal-remove-item .modal-footer .btn-default,
.modal-remove-item .modal-footer .btn-primary {
    min-width: 100px !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 20px !important;
    height: auto !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Fix modal close icons that are inside the modal-body instead of header */
.modal-body .close {
    color: var(--color-text-secondary) !important;
    text-shadow: none !important;
    opacity: 0.8 !important;
    outline: none !important;
    background: transparent !important;
    border: none !important;
}

.modal-body .close:hover {
    color: var(--color-accent-primary) !important;
    opacity: 1 !important;
}

/* Fix black copy icon in Generate Password modal */
.modal-content img[src*="clippy.svg"] {
    filter: invert(0.8) brightness(2) !important;
    /* Make the black svg white/light-gray */
}

/* Remove hover background explicitly from the Copy button */
.modal-content .copy-to-clipboard:hover {
    background-color: transparent !important;
}

/* -----------------------------------------------------------------------------
 * Shopping Cart Page Overrides (viewcart.tpl)
 * -------------------------------------------------------------------------- */

#order-standard_cart .view-cart-items-header {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--color-text-primary) !important;
    border-bottom: 2px solid var(--color-border) !important;
    padding: 10px 15px !important;
    font-weight: 600 !important;
}

#order-standard_cart .view-cart-items {
    background-color: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
    margin-bottom: var(--spacing-lg) !important;
}

#order-standard_cart .view-cart-items .item {
    border-bottom: 1px solid var(--color-border) !important;
    padding: 15px !important;
    color: var(--color-text-secondary) !important;
}

#order-standard_cart .view-cart-items .item:last-child {
    border-bottom: none !important;
}

#order-standard_cart .view-cart-items .item .item-title {
    color: var(--color-text-primary) !important;
    font-size: 1.1rem !important;
}

#order-standard_cart .view-cart-items .item .item-price span {
    color: var(--color-text-primary) !important;
    font-weight: bold !important;
}

#order-standard_cart .view-cart-empty {
    color: var(--color-text-primary) !important;
    padding: 30px !important;
    text-align: center !important;
    font-size: 1.2rem !important;
}

/* Order Summary Box */
#order-standard_cart .order-summary {
    background-color: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--color-text-primary) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

#order-standard_cart .order-summary h2 {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
    margin: 0 !important;
    padding: 15px !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

#order-standard_cart .order-summary .summary-container {
    padding: 15px !important;
    background-color: transparent !important;
}

#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .recurring-totals,
#order-standard_cart .order-summary .bordered-totals {
    border-top: 1px solid var(--color-border) !important;
    border-bottom: none !important;
    color: var(--color-text-secondary) !important;
}

#order-standard_cart .order-summary .subtotal span.pull-right,
#order-standard_cart .order-summary .recurring-totals span.pull-right,
#order-standard_cart .order-summary .bordered-totals span.pull-right {
    color: var(--color-text-primary) !important;
}

#order-standard_cart .order-summary .total-due-today {
    background-color: #1A1A24 !important;
    border-top: 2px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
    margin: 15px -15px -15px -15px !important;
    padding: 20px 15px !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}

#order-standard_cart .order-summary .total-due-today .amt {
    color: var(--color-accent-primary) !important;
}

/* Custom Checkout Button styling in summary */
#order-standard_cart .order-summary .btn-checkout {
    background: #0F303A !important;
    color: #00D4FF !important;
    font-weight: 600 !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 12px !important;
    width: 100% !important;
    margin-top: 10px !important;
    transition: var(--transition-base) !important;
}

#order-standard_cart .order-summary .btn-checkout:hover {
    background: #144352 !important;
    border-color: rgba(0, 212, 255, 0.6) !important;
    transform: translateY(-2px) !important;
}

#order-standard_cart .order-summary .btn-continue-shopping {
    color: var(--color-text-secondary) !important;
}

#order-standard_cart .order-summary .btn-continue-shopping:hover {
    color: var(--color-text-primary) !important;
}

/* Fix dropdown chevron spacing global overrides */
.custom-select {
    padding-right: 2.5rem !important;
    /* Increase right padding for text */
    background-position: right 1rem center !important;
    /* Move the chevron icon left */
}

/* Promo and Tax Tabs */
#order-standard_cart .view-cart-tabs .nav-tabs {
    border-bottom: 1px solid var(--color-border) !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs>li>a {
    color: var(--color-text-secondary) !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-bottom: none !important;
    margin-right: 2px !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs>li>a:hover {
    color: var(--color-text-primary) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--color-border) var(--color-border) transparent !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs>li.active>a,
#order-standard_cart .view-cart-tabs .nav-tabs>li.active>a:hover,
#order-standard_cart .view-cart-tabs .nav-tabs>li.active>a:focus {
    color: var(--color-accent-primary) !important;
    background-color: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    border-bottom-color: var(--color-bg-card) !important;
}

#order-standard_cart .view-cart-tabs .tab-content {
    background-color: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    border-top: none !important;
    padding: 20px !important;
    color: var(--color-text-secondary) !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}

#order-standard_cart .view-cart-tabs .tab-content .view-cart-promotion-code {
    color: var(--color-accent-primary) !important;
    font-weight: 600 !important;
}

/* -----------------------------------------------------------------------------
 * Choose a Domain Page Overrides (configureproductdomain.tpl)
 * -------------------------------------------------------------------------- */

#order-standard_cart .domain-selection-options .option {
    background-color: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    margin-bottom: var(--spacing-sm) !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-text-primary) !important;
    transition: var(--transition-base) !important;
}

#order-standard_cart .domain-selection-options .option label {
    color: var(--color-text-primary) !important;
    padding: 15px 20px !important;
    margin: 0 !important;
    font-weight: 500 !important;
    display: block !important;
    cursor: pointer !important;
}

#order-standard_cart .domain-selection-options .option:hover {
    border-color: rgba(0, 212, 255, 0.3) !important;
}

/* Active/Selected Option */
#order-standard_cart .domain-selection-options .option input[type="radio"]:checked+label,
#order-standard_cart .domain-selection-options .option.option-selected {
    background-color: rgba(0, 212, 255, 0.05) !important;
    border-color: var(--color-accent-primary) !important;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}

/* Inner Input Group Area */
#order-standard_cart .domain-selection-options .domain-input-group {
    background-color: var(--color-bg-secondary) !important;
    border-top: 1px solid var(--color-border) !important;
    padding: 20px !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}

/* Prepend Add-on (www) styling */
#order-standard_cart .domain-selection-options .input-group-addon {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
}

#order-standard_cart .domain-selection-options .input-group-text {
    background-color: #1A1A24 !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-secondary) !important;
    border-right: none !important;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* Make sure the main domain checker input field is black/dark */
#order-standard_cart .domain-selection-options input.form-control,
#order-standard_cart .domain-selection-options select.form-control {
    background-color: #1A1A24 !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

#order-standard_cart .domain-selection-options input.form-control:focus,
#order-standard_cart .domain-selection-options select.form-control:focus {
    border-color: var(--color-accent-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25) !important;
}

/* -----------------------------------------------------------------------------
 * Domains Configuration Overrides (configuredomains.tpl)
 * -------------------------------------------------------------------------- */

/* Sub-heading divider (domain name and nameservers text) */
#order-standard_cart .sub-heading {
    border-top: 1px solid var(--color-border) !important;
    border-bottom: 0 !important;
    text-align: center !important;
    margin: 30px 0 !important;
    position: relative !important;
}

#order-standard_cart .sub-heading span.primary-bg-color {
    background-color: var(--color-bg-primary) !important;
    color: var(--color-text-primary) !important;
    padding: 0 15px !important;
    position: relative !important;
    top: -12px !important;
    /* Center on the border line */
    display: inline-block !important;
    font-weight: 600 !important;
}

/* Addons Panel (e.g. ID Protection) */
#order-standard_cart .panel-addon {
    background-color: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--color-text-primary) !important;
    transition: var(--transition-base) !important;
    overflow: hidden !important;
    /* Ensure rounded corners clip inner elements */
}

#order-standard_cart .panel-addon:hover {
    border-color: rgba(0, 212, 255, 0.3) !important;
}

#order-standard_cart .panel-addon .panel-body {
    background-color: transparent !important;
    color: var(--color-text-secondary) !important;
}

#order-standard_cart .panel-addon .panel-body label {
    color: var(--color-text-primary) !important;
    font-weight: 600 !important;
}

#order-standard_cart .panel-addon .panel-price {
    background-color: var(--color-bg-secondary) !important;
    color: var(--color-text-primary) !important;
    border-top: 1px solid var(--color-border) !important;
}

#order-standard_cart .panel-addon .panel-add {
    background-color: #0F303A !important;
    color: #00D4FF !important;
    font-weight: 600 !important;
    border-top: 1px solid rgba(0, 212, 255, 0.2) !important;
}

#order-standard_cart .panel-addon.panel-addon-selected {
    border-color: var(--color-accent-primary) !important;
}

#order-standard_cart .panel-addon.panel-addon-selected .panel-add {
    background-color: var(--color-accent-primary) !important;
    color: var(--color-bg-primary) !important;
}

/* EPP Code Input Wrapper Fix */
#order-standard_cart .prepend-icon {
    position: relative !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#order-standard_cart .prepend-icon .field {
    background-color: #1A1A24 !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
    padding-left: 50px !important;
    border-radius: var(--radius-md) !important;
    width: 100% !important;
    height: 44px !important;
    margin-top: 0 !important;
}

#order-standard_cart .prepend-icon .field:focus {
    border-color: var(--color-accent-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25) !important;
}

#order-standard_cart .prepend-icon .field-icon {
    color: var(--color-text-secondary) !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 50px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    font-size: 16px !important;
}

#order-standard_cart .prepend-icon .field {
    margin-top: 0 !important;
}

/* Promo Code Input Icon Center Fix (Field is shorter than 44px) */
#order-standard_cart .promo .prepend-icon .field-icon {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: normal !important;
}

#order-standard_cart .promo .prepend-icon .field {
    height: auto !important;
    padding: 10px 16px 10px 50px !important;
}

/* Fix invisible "1 Year/s" text on Domains Configuration page */
#frmConfigureDomains .form-group {
    color: var(--color-text-secondary) !important;
}

#frmConfigureDomains .form-group label {
    color: var(--color-text-primary) !important;
    font-weight: 600 !important;
}

/* Review & Checkout Cart Items Styling */
#order-standard_cart .view-cart-items-header {
    background-color: #12121A !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border) !important;
    border-bottom: none !important;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    padding: 12px 20px !important;
    font-weight: 600 !important;
}

#order-standard_cart .view-cart-items {
    border: 1px solid var(--color-border) !important;
    border-top: none !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
    background-color: #12121A !important;
    overflow: hidden !important;
    /* Enforces corner rounding on items */
}

#order-standard_cart .view-cart-items .item {
    background-color: transparent !important;
    color: var(--color-text-primary) !important;
    border: none !important;
    border-top: 1px solid var(--color-border) !important;
    padding: 15px 20px !important;
}

#order-standard_cart .view-cart-items .item:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

#order-standard_cart .view-cart-items .item-domain {
    color: var(--color-accent-primary) !important;
    font-weight: 500 !important;
}

#order-standard_cart .view-cart-items .item-title {
    color: var(--color-text-primary) !important;
}

#order-standard_cart .view-cart-items .item-price span {
    color: var(--color-text-primary) !important;
}

#order-standard_cart .view-cart-items .item-price .cycle {
    color: var(--color-text-secondary) !important;
}

#order-standard_cart .btn-remove-from-cart {
    color: var(--color-text-muted) !important;
}

#order-standard_cart .btn-remove-from-cart:hover {
    color: var(--color-danger) !important;
}