/* ========================================
   WEBFORT WHMCS INTEGRATION
   Complete theme integration matching webfort.co.uk
   ======================================== */

/* ========================================
   CSS VARIABLES
   ======================================== */
:root {
    --wf-midnight: #0a0f1c;
    --wf-midnight-light: #1a1f3c;
    --wf-dark: #0a0f1c;
    --wf-lime: #c8ff00;
    --wf-lime-hover: #d4ff33;
    --wf-blue: #2563eb;
    --wf-blue-light: #60a5fa;
    --wf-white: #ffffff;
    --wf-text: rgba(255, 255, 255, 0.9);
    --wf-text-muted: rgba(255, 255, 255, 0.6);
    --wf-text-dim: rgba(255, 255, 255, 0.4);
    --wf-border: rgba(255, 255, 255, 0.1);
    --wf-border-hover: rgba(200, 255, 0, 0.3);
    --wf-glass-bg: rgba(255, 255, 255, 0.03);
    --wf-glass-bg-hover: rgba(255, 255, 255, 0.08);
    --wf-radius: 16px;
    --wf-radius-sm: 12px;
    --wf-radius-xs: 8px;
    --wf-radius-full: 9999px;
    --wf-font: 'Outfit', system-ui, -apple-system, sans-serif;
}

/* ========================================
   FONT IMPORT
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

/* ========================================
   BASE BODY & BACKGROUND
   ======================================== */
body.lagom {
    font-family: var(--wf-font) !important;
    background: linear-gradient(135deg, var(--wf-midnight) 0%, var(--wf-midnight-light) 50%, var(--wf-midnight) 100%) !important;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    color: var(--wf-text);
}

/* Animated gradient mesh background */
body.lagom::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(circle at 20% 80%, rgba(37, 99, 235, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(96, 165, 250, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(200, 255, 0, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(59, 130, 246, 0.3) 0%, transparent 50%);
    animation: gradientMove 15s ease-in-out infinite;
    pointer-events: none;
    z-index: -2;
}

@keyframes gradientMove {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -30px) rotate(5deg); }
    66% { transform: translate(-20px, 20px) rotate(-5deg); }
}

/* Floating orbs effect */
body.lagom::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 10% 10%, rgba(37, 99, 235, 0.5) 0%, transparent 400px),
        radial-gradient(circle at 90% 60%, rgba(200, 255, 0, 0.2) 0%, transparent 300px),
        radial-gradient(circle at 30% 90%, rgba(96, 165, 250, 0.4) 0%, transparent 350px);
    filter: blur(60px);
    animation: orbFloat 8s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
    50% { transform: translate(30px, -30px) scale(1.05); opacity: 0.8; }
}

/* Ensure content is above background */
.main-content,
.app-main,
.page-content,
.container {
    position: relative;
    z-index: 1;
}

/* Body spacing for fixed nav */
body.lagom {
    padding-top: 110px !important;
}

/* ========================================
   HIDE DEFAULT LAGOM NAV
   ======================================== */
.app-nav-header,
.app-nav-menu.app-nav-menu-default,
.app-nav:not(.webfort-nav) {
    display: none !important;
}

/* ========================================
   WEBFORT NAVIGATION
   ======================================== */
.webfort-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 16px;
    font-family: var(--wf-font);
}

@media (min-width: 640px) {
    .webfort-nav { padding: 16px 24px; }
}

@media (min-width: 1024px) {
    .webfort-nav { padding: 16px 32px; }
}

.webfort-nav-inner {
    max-width: 1280px;
    margin: 0 auto;
}

/* Glass Pill Container */
.webfort-nav-pill {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 28px;
    background: var(--wf-glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.webfort-nav-pill:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(200, 255, 0, 0.15);
}

/* Logo */
.webfort-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none !important;
    margin-top: 4px;
}

.webfort-logo img {
    height: 40px;
    width: auto;
}

/* Center Navigation Container */
.webfort-nav-center {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}

@media (min-width: 1024px) {
    .webfort-nav-center {
        display: flex;
    }
}

/* Navigation Rows */
.webfort-nav-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Main Website Links (Row 1) */
.webfort-link,
.webfort-link:link,
.webfort-link:visited,
a.webfort-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--wf-white) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none !important;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.webfort-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(200, 255, 0, 0.15), rgba(96, 165, 250, 0.15));
    border-radius: 10px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.webfort-link:hover {
    color: var(--wf-lime) !important;
    transform: translateY(-2px);
}

.webfort-link:hover::before {
    opacity: 1;
    transform: scale(1);
}

.webfort-link svg {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

/* Lime colored link */
.webfort-link-lime,
.webfort-link-lime:link,
.webfort-link-lime:visited,
a.webfort-link-lime {
    color: var(--wf-lime) !important;
}

/* Dropdown */
.webfort-dropdown {
    position: relative;
}

.webfort-dropdown:hover .webfort-link {
    color: var(--wf-lime) !important;
}

.webfort-dropdown:hover .webfort-link svg {
    transform: rotate(180deg);
}

.webfort-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 240px;
    padding: 12px;
    background: rgba(10, 15, 28, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(200, 255, 0, 0.2);
    border-radius: var(--wf-radius);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(200, 255, 0, 0.1);
    z-index: 100;
}

.webfort-dropdown:hover .webfort-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.webfort-dropdown-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    color: var(--wf-white) !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: var(--wf-radius-sm);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.webfort-dropdown-item:hover {
    background: linear-gradient(135deg, rgba(200, 255, 0, 0.15), rgba(96, 165, 250, 0.1));
    color: var(--wf-lime) !important;
    transform: translateX(4px);
}

.webfort-dropdown-item svg {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 8px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.3), rgba(200, 255, 0, 0.1));
    border-radius: 10px;
    transition: all 0.2s ease;
}

.webfort-dropdown-item:hover svg {
    background: linear-gradient(135deg, rgba(200, 255, 0, 0.3), rgba(96, 165, 250, 0.2));
    transform: scale(1.1);
}

/* WHMCS Portal Links (Row 2) */
.webfort-nav-row-whmcs {
    gap: 2px;
}

.webfort-nav-row-whmcs > li {
    position: relative;
}

/* Hide Lagom icons in WHMCS nav */
.webfort-nav-row-whmcs .item-icon,
.webfort-nav-row-whmcs .menu-item-icon,
.webfort-nav-row-whmcs .ls-icon,
.webfort-nav-row-whmcs > li > a > svg:not(.ls-caret),
.webfort-nav-row-whmcs > li > a > img {
    display: none !important;
}

.webfort-nav-row-whmcs > li > a,
.webfort-nav-row-whmcs > li > a.dropdown-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--wf-white) !important;
    text-decoration: none !important;
    border-radius: var(--wf-radius-xs);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.webfort-nav-row-whmcs > li > a *,
.webfort-nav-row-whmcs > li > a .item-text,
.webfort-nav-row-whmcs > li > a span {
    color: var(--wf-white) !important;
}

.webfort-nav-row-whmcs > li > a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(200, 255, 0, 0.08), rgba(96, 165, 250, 0.08));
    border-radius: var(--wf-radius-xs);
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.webfort-nav-row-whmcs > li > a:hover,
.webfort-nav-row-whmcs > li.active > a {
    color: var(--wf-lime) !important;
}

.webfort-nav-row-whmcs > li > a:hover *,
.webfort-nav-row-whmcs > li.active > a * {
    color: var(--wf-lime) !important;
}

.webfort-nav-row-whmcs > li > a:hover::before {
    opacity: 1;
    transform: scale(1);
}

.webfort-nav-row-whmcs .ls-caret {
    font-size: 9px;
    opacity: 0.7;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

.webfort-nav-row-whmcs > li:hover .ls-caret {
    transform: rotate(180deg);
}

/* WHMCS Dropdown Menus */
.webfort-nav-row-whmcs .dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    padding: 10px;
    background: rgba(10, 15, 28, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(200, 255, 0, 0.2);
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(200, 255, 0, 0.1);
    z-index: 100;
}

.webfort-nav-row-whmcs .dropdown-menu li a {
    display: block;
    padding: 10px 14px;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    border-radius: var(--wf-radius-xs);
    transition: all 0.2s ease;
}

.webfort-nav-row-whmcs .dropdown-menu li a:hover {
    background: linear-gradient(135deg, rgba(200, 255, 0, 0.12), rgba(96, 165, 250, 0.08));
    color: var(--wf-lime) !important;
    padding-left: 18px;
}

/* Navigation Badges/Pills - Ticket counts, etc */
.webfort-nav-row-whmcs .badge,
.webfort-nav-row-whmcs .label,
.webfort-nav-row-whmcs > li > a .badge,
.webfort-nav-row-whmcs .dropdown-menu .badge,
.webfort-nav-row-whmcs .dropdown-menu li a .badge {
    background: var(--wf-lime) !important;
    color: var(--wf-midnight) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    margin-left: 8px;
    line-height: 1.2;
    vertical-align: middle;
    display: inline-block;
}

.webfort-nav-row-whmcs .dropdown-menu li a:hover .badge {
    background: var(--wf-white) !important;
    color: var(--wf-midnight) !important;
}

/* Right Section */
.webfort-nav-right {
    display: none;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    margin-top: 4px;
}

@media (min-width: 1024px) {
    .webfort-nav-right {
        display: flex;
    }
}

.webfort-login-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--wf-text-muted) !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.webfort-login-link:hover {
    color: var(--wf-white) !important;
}

.webfort-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    min-width: 120px;
    background: var(--wf-lime) !important;
    color: var(--wf-midnight) !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 9999px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.webfort-cta-btn:hover {
    box-shadow: 0 0 30px rgba(200, 255, 0, 0.5);
    transform: translateY(-1px);
    color: var(--wf-midnight) !important;
}

/* Mobile Toggle */
.webfort-mobile-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

@media (min-width: 1024px) {
    .webfort-mobile-toggle {
        display: none;
    }
}

.webfort-mobile-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--wf-white);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Mobile Menu */
.webfort-mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 320px;
    background: var(--wf-midnight);
    z-index: 10001;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.webfort-mobile-menu.is-open {
    transform: translateX(0);
}

.webfort-mobile-menu-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    overflow-y: auto;
}

.webfort-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.webfort-mobile-header .webfort-logo img {
    height: 32px;
}

.webfort-mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    color: var(--wf-white);
    cursor: pointer;
}

.webfort-mobile-close:hover {
    color: var(--wf-lime);
}

.webfort-mobile-nav {
    flex: 1;
}

.webfort-mobile-section {
    margin-bottom: 24px;
}

.webfort-mobile-section-title {
    display: block;
    padding: 8px 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wf-text-dim);
}

.webfort-mobile-section-subtitle {
    display: block;
    padding: 12px 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wf-text-muted);
}

.webfort-mobile-section a {
    display: block;
    padding: 12px 0;
    color: var(--wf-text-muted) !important;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
}

.webfort-mobile-section a:hover {
    color: var(--wf-lime) !important;
}

.webfort-mobile-link-main {
    display: block;
    padding: 14px 0 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--wf-white) !important;
    text-decoration: none !important;
}

.webfort-mobile-link-main:hover {
    color: var(--wf-lime) !important;
}

.webfort-mobile-lime {
    color: var(--wf-lime) !important;
}

.webfort-mobile-divider {
    height: 1px;
    margin: 24px 0;
    background: var(--wf-border);
}

.webfort-mobile-footer {
    padding-top: 24px;
    margin-top: auto;
}

.webfort-mobile-cta {
    display: block;
    width: 100%;
    padding: 16px;
    background: var(--wf-lime) !important;
    color: var(--wf-midnight) !important;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
    border-radius: 9999px;
}

.webfort-mobile-cta:hover {
    box-shadow: 0 0 30px rgba(200, 255, 0, 0.5);
}

.webfort-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.webfort-mobile-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   GLASS CARDS & PANELS
   ======================================== */
.card,
.panel,
.panel-default,
.panel-body,
.box,
.sidebar-panel,
.main-content > .row > div > .panel,
.main-content > .row > .col-md-9 > .panel {
    background: var(--wf-glass-bg) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

/* SAFARI FIX: Remove backdrop-filter from cart panels - Safari creates containing blocks
   for positioned children when backdrop-filter is present, breaking dropdown positioning */
.panel.panel-cart,
.panel.panel-cart .panel-body,
.panel.panel-cart .panel-body.cart-item,
.panel.panel-cart .cart-item {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.card:hover,
.panel:hover,
.panel-default:hover {
    background: var(--wf-glass-bg-hover) !important;
    border-color: var(--wf-border-hover) !important;
}

.panel-heading,
.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--wf-border) !important;
    color: var(--wf-white) !important;
    font-weight: 600;
}

.panel-title,
.card-title {
    color: var(--wf-white) !important;
    font-weight: 700;
}

.panel-body,
.card-body {
    background: transparent !important;
    color: var(--wf-text);
}

/* ========================================
   SIDEBAR
   ======================================== */
.sidebar .panel,
.sidebar-panel {
    background: var(--wf-glass-bg) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
}

/* ========================================
   SIDEBAR - CLIENT DETAILS FIX
   ======================================== */

/* All sidebar panels - single clean border only */
.sidebar .panel,
.main-sidebar .panel,
.panel-sidebar {
    border: 1px solid var(--wf-border) !important;
    background: var(--wf-glass-bg) !important;
    border-radius: var(--wf-radius) !important;
    overflow: hidden;
}

/* Remove ALL internal borders/shadows from panel contents */
.panel-sidebar .panel-body,
.panel-sidebar .panel-body *,
.panel-sidebar .panel-heading,
.panel-sidebar .panel-footer,
.panel-sidebar .list-group,
.panel-sidebar .list-group-item {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Panel body styling */
.panel-sidebar .panel-body {
    padding: 20px !important;
    background: transparent !important;
}

/* Panel heading (Contacts, Shortcuts titles) */
.panel-sidebar .panel-heading {
    padding: 15px 20px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--wf-border) !important;
}

/* Hide the heading for client details panel (first panel with name/address) */
.panel-sidebar-primary .panel-heading,
.panel-client-details .panel-heading,
[menuitemname="Client Details"] .panel-heading {
    display: none !important;
}

/* Panel footer styling */
.panel-sidebar .panel-footer {
    padding: 15px 20px !important;
    background: transparent !important;
    border-top: 1px solid var(--wf-border) !important;
}

/* List group container - no borders */
.panel-sidebar .list-group {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Sidebar list items (Contacts, Shortcuts links) */
.panel-sidebar .list-group-item {
    background: transparent !important;
    color: var(--wf-text) !important;
    transition: all 0.2s ease;
    padding: 12px 20px !important;
    margin: 0 !important;
    display: block;
    position: relative;
}

/* Add separator lines between items using pseudo-element */
.panel-sidebar .list-group-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: var(--wf-border);
}

/* Links in list groups */
.panel-sidebar .list-group-item a,
.panel-sidebar a.list-group-item {
    color: var(--wf-text) !important;
    text-decoration: none !important;
}

.panel-sidebar .list-group-item:hover,
.panel-sidebar a.list-group-item:hover {
    background: rgba(200, 255, 0, 0.1) !important;
    color: var(--wf-lime) !important;
}

/* Empty state text (No Contacts Found) */
.panel-sidebar .list-group-item.disabled,
.panel-sidebar .text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 12px 20px !important;
}

.sidebar .list-group-item:hover,
.sidebar-panel .list-group-item:hover {
    background: rgba(200, 255, 0, 0.1) !important;
    color: var(--wf-lime) !important;
}

.sidebar .list-group-item.active,
.sidebar-panel .list-group-item.active {
    background: rgba(200, 255, 0, 0.15) !important;
    color: var(--wf-lime) !important;
    border-left: 3px solid var(--wf-lime) !important;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
    font-family: var(--wf-font);
    font-weight: 600;
    border-radius: var(--wf-radius-sm) !important;
    transition: all 0.3s ease;
}

.btn-primary {
    background: var(--wf-lime) !important;
    border-color: var(--wf-lime) !important;
    color: var(--wf-midnight) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--wf-lime) !important;
    border-color: var(--wf-lime) !important;
    color: var(--wf-midnight) !important;
    box-shadow: 0 0 30px rgba(200, 255, 0, 0.4) !important;
    transform: translateY(-2px);
}

.btn-success {
    background: #10b981 !important;
    border-color: #10b981 !important;
}

.btn-success:hover {
    background: #059669 !important;
    border-color: #059669 !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4) !important;
}

.btn-default,
.btn-secondary {
    background: var(--wf-glass-bg) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-white) !important;
}

.btn-default:hover,
.btn-secondary:hover {
    background: var(--wf-glass-bg-hover) !important;
    border-color: var(--wf-border-hover) !important;
    color: var(--wf-lime) !important;
}

.btn-info {
    background: var(--wf-blue) !important;
    border-color: var(--wf-blue) !important;
}

.btn-info:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.4) !important;
}

.btn-danger {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
}

.btn-danger:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4) !important;
}

.btn-warning {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: var(--wf-midnight) !important;
}

.btn-warning:hover {
    background: #d97706 !important;
    border-color: #d97706 !important;
}

/* ========================================
   FORMS
   ======================================== */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
    background: var(--wf-glass-bg) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius-sm) !important;
    color: var(--wf-white) !important;
    padding: 12px 16px !important;
    font-family: var(--wf-font);
    transition: all 0.2s ease;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--wf-lime) !important;
    box-shadow: 0 0 0 3px rgba(200, 255, 0, 0.1) !important;
    outline: none !important;
    color: var(--wf-white) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--wf-text-dim) !important;
}

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

.input-group-addon {
    background: var(--wf-glass-bg) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-text-muted) !important;
}

/* Select2 dropdowns */
.select2-container--default .select2-selection--single {
    background: var(--wf-glass-bg) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius-sm) !important;
    height: auto !important;
    padding: 8px 12px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--wf-white) !important;
}

.select2-dropdown {
    background: rgba(10, 15, 28, 0.98) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius-sm) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: rgba(200, 255, 0, 0.15) !important;
    color: var(--wf-lime) !important;
}

/* ========================================
   TABLES
   ======================================== */
.table {
    color: var(--wf-text) !important;
}

.table > thead > tr > th,
.table > thead > tr > td {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--wf-border) !important;
    color: var(--wf-text-muted) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.05em;
}

.table > tbody > tr > td,
.table > tbody > tr > th {
    border-top: 1px solid var(--wf-border) !important;
    color: var(--wf-text) !important;
}

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

.table-hover > tbody > tr:hover {
    background: rgba(200, 255, 0, 0.05) !important;
}

.table-responsive {
    border: none !important;
}

/* ========================================
   ALERTS
   ======================================== */
.alert {
    border-radius: var(--wf-radius-sm) !important;
    border: 1px solid !important;
}

.alert-success {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #6ee7b7 !important;
}

.alert-info {
    background: rgba(37, 99, 235, 0.15) !important;
    border-color: rgba(37, 99, 235, 0.3) !important;
    color: var(--wf-blue-light) !important;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fcd34d !important;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}

/* Dashboard Home Alerts */
.client-home-alerts {
    display: flex;
    flex-direction: column;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

.client-home-alert {
    padding: 12px 16px !important;
    margin: 0 !important;
}

.client-home-alert .alert-icon {
    margin-right: 12px !important;
}

.client-home-alert .alert-body {
    padding: 0 !important;
}

.client-home-alert .alert-body p {
    margin: 0 !important;
    font-size: 14px !important;
}

/* ========================================
   PAGE HEADERS
   ======================================== */
.main-header {
    background: transparent !important;
    border: none !important;
    padding: 30px 0 !important;
}

.main-header h1,
.page-title,
.panel-title h1 {
    color: var(--wf-white) !important;
    font-weight: 800 !important;
    font-size: 2rem !important;
}

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

.breadcrumb > li,
.breadcrumb > li > a {
    color: var(--wf-text-muted) !important;
}

.breadcrumb > li > a:hover {
    color: var(--wf-lime) !important;
}

.breadcrumb > .active {
    color: var(--wf-white) !important;
}

/* ========================================
   FOOTER
   ======================================== */
.main-footer {
    background: transparent !important;
    border-top: 1px solid var(--wf-border) !important;
    padding: 60px 0 30px !important;
    margin-top: 60px !important;
}

.footer-bottom {
    border-top: 1px solid var(--wf-border) !important;
    padding-top: 30px !important;
    margin-top: 30px !important;
}

.footer-copyright {
    color: var(--wf-text-dim) !important;
}

.footer-nav a,
.footer-title,
.footer-company-desc {
    color: var(--wf-text-muted) !important;
}

.footer-nav a:hover {
    color: var(--wf-lime) !important;
}

/* ========================================
   PRODUCT CARDS
   ======================================== */
.product-icon {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.3), rgba(15, 23, 42, 0.9)) !important;
    border: 1px solid var(--wf-border) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--wf-radius) !important;
    transition: all 0.3s ease;
}

.product-icon:hover {
    border-color: var(--wf-border-hover) !important;
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(200, 255, 0, 0.1) !important;
}

.product-icon .graphic-item {
    background: linear-gradient(135deg, rgba(200, 255, 0, 0.15), rgba(96, 165, 250, 0.15)) !important;
}

/* Product Details Page - Remove square box around icon */
.product-image .graphic-item,
.product-content .graphic-item {
    background: transparent !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
}

.product-image .graphic-item svg,
.product-content .graphic-item svg {
    width: 64px !important;
    height: 64px !important;
    color: var(--wf-lime) !important;
}

.product-icon .product-name {
    color: var(--wf-white) !important;
    font-weight: 700 !important;
}

.product-icon .product-group-name {
    color: var(--wf-text-muted) !important;
}

.product-icon .product-footer {
    color: var(--wf-text-muted) !important;
}

.product-icon .product-footer:hover {
    color: var(--wf-lime) !important;
}

/* ========================================
   DOMAIN SEARCH
   ======================================== */
.domain-checker-container,
.domain-search {
    background: var(--wf-glass-bg) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
    padding: 20px !important;
}

.domain-checker-container input,
.domain-search input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-white) !important;
}

.domain-checker-available {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

.domain-checker-unavailable {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* ========================================
   PRICING TABLES
   ======================================== */
.pricing-table,
.product-pricing {
    background: var(--wf-glass-bg) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
}

.pricing-table:hover,
.product-pricing:hover {
    border-color: var(--wf-border-hover) !important;
    transform: translateY(-5px);
}

.pricing-amount,
.price {
    color: var(--wf-lime) !important;
    font-weight: 800 !important;
}

/* ========================================
   MODALS
   ======================================== */
.modal-content {
    background: rgba(10, 15, 28, 0.98) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 60px rgba(200, 255, 0, 0.1) !important;
}

.modal-header {
    background: transparent !important;
    border-bottom: 1px solid var(--wf-border) !important;
}

.modal-title {
    color: var(--wf-white) !important;
    font-weight: 700 !important;
}

.modal-body {
    color: var(--wf-text) !important;
}

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

.close {
    color: var(--wf-white) !important;
    opacity: 0.7;
}

.close:hover {
    color: var(--wf-lime) !important;
    opacity: 1;
}

/* Modal fix - hide backdrop and center modal on viewport
   The modal is nested inside .app-main, causing it to appear within its container.
   Solution: Hide the backdrop and use transform-based centering for the dialog. */

/* Hide the modal backdrop completely - we don't want the gray overlay */
.modal-backdrop {
    display: none !important;
}

/* Force modal to be a fixed full-viewport container */
.modal {
    z-index: 10050 !important;
}

.modal.show {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: auto !important;
    display: block !important;
}

/* Modal dialog - use transform-based centering */
.modal.show .modal-dialog {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    max-width: 500px !important;
    width: 90% !important;
}

/* Add shadow to modal content for visual separation without backdrop */
.modal.show .modal-content {
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 100px rgba(0, 0, 0, 0.4) !important;
}

/* ========================================
   PAGINATION
   ======================================== */
.pagination > li > a,
.pagination > li > span {
    background: var(--wf-glass-bg) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-text) !important;
    margin: 0 2px !important;
    border-radius: var(--wf-radius-xs) !important;
}

.pagination > li > a:hover {
    background: var(--wf-glass-bg-hover) !important;
    border-color: var(--wf-border-hover) !important;
    color: var(--wf-lime) !important;
}

.pagination > .active > a,
.pagination > .active > span {
    background: var(--wf-lime) !important;
    border-color: var(--wf-lime) !important;
    color: var(--wf-midnight) !important;
}

/* ========================================
   BADGES & LABELS
   ======================================== */
.badge,
.label {
    font-weight: 600;
    border-radius: 6px !important;
    padding: 4px 10px !important;
}

.badge-primary,
.label-primary {
    background: var(--wf-blue) !important;
}

.badge-success,
.label-success {
    background: #10b981 !important;
}

.badge-warning,
.label-warning {
    background: #f59e0b !important;
    color: var(--wf-midnight) !important;
}

.badge-danger,
.label-danger {
    background: #ef4444 !important;
}

.badge-info,
.label-info {
    background: var(--wf-blue-light) !important;
}

/* ========================================
   STATUS INDICATORS
   ======================================== */
.status,
.status-active,
.badge-active,
.status.status-active {
    background: rgba(200, 255, 0, 0.2) !important;
    color: var(--wf-lime) !important;
    font-weight: 600;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-pending,
.badge-pending,
.status.status-pending {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}

.status-expired,
.badge-expired,
.status.status-expired {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}

.status-suspended,
.badge-suspended,
.status.status-suspended {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}

.status-cancelled,
.status-terminated,
.badge-cancelled,
.badge-terminated,
.status.status-cancelled,
.status.status-terminated {
    background: rgba(107, 114, 128, 0.2) !important;
    color: #9ca3af !important;
}

.status-inactive,
.badge-inactive,
.status.status-inactive {
    background: rgba(107, 114, 128, 0.2) !important;
    color: #9ca3af !important;
}

.status-grace,
.badge-grace,
.status.status-grace {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}

.status-paid,
.badge-paid,
.status.status-paid {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}

.status-unpaid,
.badge-unpaid,
.status.status-unpaid {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}

/* ========================================
   TABS
   ======================================== */
.nav-tabs {
    border-bottom: 1px solid var(--wf-border) !important;
}

.nav-tabs > li > a {
    color: var(--wf-text-muted) !important;
    border: none !important;
    border-radius: var(--wf-radius-sm) var(--wf-radius-sm) 0 0 !important;
    transition: all 0.2s ease;
}

.nav-tabs > li > a:hover {
    background: var(--wf-glass-bg) !important;
    color: var(--wf-white) !important;
    border: none !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: var(--wf-glass-bg) !important;
    border: 1px solid var(--wf-border) !important;
    border-bottom: 1px solid transparent !important;
    color: var(--wf-lime) !important;
}

.tab-content {
    background: var(--wf-glass-bg) !important;
    border: 1px solid var(--wf-border) !important;
    border-top: none !important;
    border-radius: 0 0 var(--wf-radius-sm) var(--wf-radius-sm) !important;
    padding: 20px !important;
}

/* ========================================
   PROGRESS BARS
   ======================================== */
.progress {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 9999px !important;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, var(--wf-blue), var(--wf-lime)) !important;
}

/* ========================================
   SCROLLBAR
   ======================================== */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--wf-blue) var(--wf-midnight);
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--wf-midnight);
}

::-webkit-scrollbar-thumb {
    background: var(--wf-blue);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--wf-lime);
}

/* ========================================
   LINKS
   ======================================== */
a {
    color: var(--wf-blue-light);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--wf-lime);
    text-decoration: none;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 1279px) and (min-width: 1024px) {
    .webfort-link {
        padding: 6px 12px;
        font-size: 12px;
    }

    .webfort-nav-row-whmcs > li > a {
        padding: 5px 10px;
        font-size: 11px;
    }

    .webfort-cta-btn {
        padding: 8px 16px;
        font-size: 12px;
    }

    .webfort-nav-pill {
        padding: 12px 20px;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    body.lagom {
        padding-top: 90px !important;
    }

    .main-header h1,
    .page-title {
        font-size: 1.5rem !important;
    }
}

/* ========================================
   WEBFORT CUSTOM FOOTER
   ======================================== */
.webfort-footer {
    border-top: 1px solid var(--wf-border);
    padding: 60px 0 30px;
    margin-top: 60px;
    background: transparent;
}

.webfort-footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

@media (min-width: 768px) {
    .webfort-footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {
    .webfort-footer-grid {
        grid-template-columns: 2fr repeat(4, 1fr);
        gap: 48px;
    }
}

.webfort-footer-brand {
    grid-column: span 2;
}

@media (min-width: 1024px) {
    .webfort-footer-brand {
        grid-column: span 1;
    }
}

.webfort-footer-logo {
    display: inline-block;
    margin-bottom: 16px;
}

.webfort-footer-logo img {
    height: 40px;
    width: auto;
}

.webfort-footer-desc {
    color: var(--wf-text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.webfort-footer-col {
    /* Column styling */
}

.webfort-footer-title {
    color: var(--wf-white);
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 16px;
}

.webfort-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.webfort-footer-links li {
    margin-bottom: 12px;
}

.webfort-footer-links a {
    color: var(--wf-text-muted) !important;
    font-size: 14px;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.webfort-footer-links a:hover {
    color: var(--wf-lime) !important;
}

.webfort-footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--wf-border);
}

@media (min-width: 768px) {
    .webfort-footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

.webfort-footer-copyright {
    color: var(--wf-text-dim);
    font-size: 14px;
}

.webfort-footer-legal {
    display: flex;
    align-items: center;
    gap: 24px;
}

.webfort-footer-legal a {
    color: var(--wf-text-dim) !important;
    font-size: 14px;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.webfort-footer-legal a:hover {
    color: var(--wf-white) !important;
}

/* Hide default Lagom footer */
.main-footer:not(.webfort-footer) {
    display: none !important;
}

/* ========================================
   SUPPORT TICKET SEARCH BOX FIX
   ======================================== */

/* Remove blue background and apply dark theme styling */
.search-box,
.search-box-coloured,
.search-box-gradient {
    background: var(--wf-glass-bg) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
    padding: 20px !important;
}

.search-box .search-group,
.search-box .search-field {
    background: transparent !important;
}

/* Search input styling */
.search-box .form-control,
.search-box input[type="text"],
.search-group .form-control {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius-sm) !important;
    color: var(--wf-white) !important;
    padding: 15px 20px 15px 50px !important;
    font-size: 16px !important;
    height: auto !important;
}

.search-box .form-control::placeholder,
.search-group .form-control::placeholder {
    color: var(--wf-text-muted) !important;
}

.search-box .form-control:focus,
.search-group .form-control:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--wf-lime) !important;
    box-shadow: 0 0 0 3px rgba(200, 255, 0, 0.1) !important;
    outline: none !important;
}

/* Fix search icon positioning */
.search-box .search-field-icon,
.search-group .search-field-icon {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--wf-text-muted) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.search-box .search-field-icon i,
.search-group .search-field-icon i {
    font-size: 18px !important;
}

/* Ensure search field is positioned relatively */
.search-box .search-field,
.search-group .search-field {
    position: relative !important;
}

/* Search results dropdown */
.search-box .search-field-results,
.search-field-results {
    background: var(--wf-midnight-light) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius-sm) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.search-field-results .list-group-item {
    background: transparent !important;
    border-bottom: 1px solid var(--wf-border) !important;
    color: var(--wf-text) !important;
    padding: 12px 20px !important;
}

.search-field-results .list-group-item:hover {
    background: rgba(200, 255, 0, 0.1) !important;
    color: var(--wf-lime) !important;
}

/* Submit Ticket Department Search Box - Fix icon overlap */
.page-submitticket .search-box input,
.page-submitticket .search-field input,
.page-submitticket .search-group input,
.page-submitticket form input[type="text"],
.main-content .search-box input[type="text"],
.main-content .search-field input[type="text"] {
    padding-left: 50px !important;
}

/* Ensure the search icon is properly positioned */
.page-submitticket .search-field-icon,
.page-submitticket .search-box .search-field-icon {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

/* Message/empty state styling */
.message-no-data {
    background: var(--wf-glass-bg) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
    padding: 60px 40px !important;
    text-align: center;
}

.message-no-data .message-title {
    color: var(--wf-text) !important;
}

/* ========================================
   KNOWLEDGEBASE PAGE FIX
   ======================================== */

/* Main content sections - the wrapper divs containing h2 + list-group */
.page-knowledgebase .main-content > div > div {
    background: var(--wf-glass-bg) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
    overflow: hidden;
    margin-bottom: 24px;
}

/* Section headings (Categories, Most Popular Articles) */
.page-knowledgebase .main-content h2 {
    padding: 16px 20px !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--wf-white) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--wf-border) !important;
}

/* Categories/Articles list container - remove its own styling */
.page-knowledgebase .list-group {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Category/Article items */
.page-knowledgebase .list-group .list-group-item,
.page-knowledgebase a.list-group-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--wf-border) !important;
    border-radius: 0 !important;
    color: var(--wf-text) !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    transition: all 0.2s ease;
}

.page-knowledgebase .list-group .list-group-item:last-child,
.page-knowledgebase a.list-group-item:last-child {
    border-bottom: none !important;
}

.page-knowledgebase .list-group .list-group-item:hover,
.page-knowledgebase a.list-group-item:hover {
    background: rgba(200, 255, 0, 0.08) !important;
}

/* Category link text */
.page-knowledgebase a.list-group-item {
    color: var(--wf-text) !important;
    text-decoration: none !important;
}

.page-knowledgebase a.list-group-item:hover {
    color: var(--wf-lime) !important;
}

/* Search form section - exclude from the card styling */
.page-knowledgebase .main-content > div > form {
    background: transparent !important;
    border: none !important;
    margin-bottom: 24px;
}

/* Article list items */
.kb-article-list .list-group-item,
.page-knowledgebase .article-list .list-group-item {
    background: var(--wf-glass-bg) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius-sm) !important;
    margin-bottom: 12px !important;
    padding: 20px !important;
    transition: all 0.2s ease;
}

.kb-article-list .list-group-item:hover,
.page-knowledgebase .article-list .list-group-item:hover {
    background: var(--wf-glass-bg-hover) !important;
    border-color: var(--wf-border-hover) !important;
    transform: translateY(-2px);
}

/* Article title */
.kb-article-list .list-group-item-heading,
.page-knowledgebase .list-group-item-heading {
    color: var(--wf-white) !important;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Article description */
.kb-article-list .list-group-item-text,
.page-knowledgebase .list-group-item-text {
    color: var(--wf-text-muted) !important;
    font-size: 14px;
    line-height: 1.5;
}

/* ========================================
   LOGIN PAGE STYLING
   ======================================== */

/* Login card wrapper */
.page-login .login-wrapper {
    background: var(--wf-glass-bg) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Login body - inner content */
.page-login .login-body {
    background: transparent !important;
    padding: 40px !important;
}

/* Login header text */
.page-login .login-body .text-muted,
.page-login .login-body p {
    color: var(--wf-text-muted) !important;
}

.page-login .login-body h1,
.page-login .login-body .login-title {
    color: var(--wf-white) !important;
}

/* Form labels */
.page-login .login-body label,
.page-login .login-body .control-label {
    color: var(--wf-text) !important;
    font-weight: 500;
}

/* Form inputs */
.page-login .login-body .form-control,
.page-login .login-body input[type="text"],
.page-login .login-body input[type="email"],
.page-login .login-body input[type="password"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius-sm) !important;
    color: var(--wf-white) !important;
    padding: 12px 16px !important;
    height: auto !important;
    transition: all 0.2s ease;
}

.page-login .login-body .form-control:focus,
.page-login .login-body input:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--wf-lime) !important;
    box-shadow: 0 0 0 3px rgba(198, 255, 0, 0.1) !important;
    outline: none !important;
}

.page-login .login-body .form-control::placeholder {
    color: var(--wf-text-muted) !important;
}

/* Forgot password link */
.page-login .login-body a {
    color: var(--wf-lime) !important;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.page-login .login-body a:hover {
    opacity: 0.8;
}

/* Remember me checkbox - custom iCheck styling */
.page-login .login-body .checkbox,
.page-login .login-body .custom-checkbox {
    color: var(--wf-text) !important;
}

.page-login .login-body .checkbox-styled {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid var(--wf-border) !important;
    border-radius: 4px !important;
    width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.page-login .login-body .checkbox-styled:hover {
    border-color: var(--wf-lime) !important;
}

.page-login .login-body .checkbox-styled[aria-checked="true"],
.page-login .login-body .checkbox-styled.checked {
    background: var(--wf-lime) !important;
    border-color: var(--wf-lime) !important;
}

.page-login .login-body .checkbox-styled[aria-checked="true"]::after,
.page-login .login-body .checkbox-styled.checked::after {
    content: '\2713';
    color: var(--wf-dark);
    font-weight: bold;
    font-size: 14px;
}

/* Login button - ensure dark text on lime background */
.page-login .login-body .btn-primary,
.page-login .login-body button[type="submit"] {
    background: var(--wf-lime) !important;
    border: none !important;
    border-radius: var(--wf-radius-sm) !important;
    color: var(--wf-dark) !important;
    font-weight: 600 !important;
    padding: 14px 24px !important;
    width: 100%;
    transition: all 0.2s ease;
}

/* Button text must be dark for readability */
.page-login .login-body .btn-primary .btn-text,
.page-login .login-body button[type="submit"] .btn-text,
.page-login .login-body .btn-primary span,
.page-login .login-body button[type="submit"] span,
.page-login .login-body .btn.btn-lg.btn-primary .btn-text,
.page-login .login-body .btn.btn-lg.btn-primary span {
    color: #0a0f1c !important;
}

.page-login .login-body .btn-primary:hover,
.page-login .login-body button[type="submit"]:hover {
    background: var(--wf-lime-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(198, 255, 0, 0.3) !important;
}

/* Bottom text (Not a member yet?) */
.page-login .login-body .login-footer,
.page-login .login-body > div:last-child {
    color: var(--wf-text-muted) !important;
    margin-top: 24px;
    text-align: center;
}

/* ========================================
   CLIENT AREA DASHBOARD FIXES
   ======================================== */

/* Fix inner glow caused by stacked backdrop-filters */
.panel-client-details .panel-body,
.panel-client-details .panel-footer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
}

/* 1. Remove horizontal line below customer address */
.panel-client-details .panel-footer {
    border-top: none !important;
}

.panel-client-details .panel-body {
    border-bottom: none !important;
}

/* 2. Fix green elements to use correct lime color */

/* Status labels (Active, etc.) */
.label-success,
.badge-success {
    background: var(--wf-lime) !important;
    color: var(--wf-dark) !important;
    border: none !important;
}

/* Panel accent colors - override emerald/green with lime */
.panel-accent-emerald,
.panel-accent-green,
.panel-accent-success {
    border-color: var(--wf-lime) !important;
}

.panel-accent-emerald .panel-heading,
.panel-accent-green .panel-heading,
.panel-accent-success .panel-heading {
    background: var(--wf-lime) !important;
    color: var(--wf-dark) !important;
}

/* Stat boxes on dashboard - fix the teal/green to match theme */
.client-home-panels .panel-accent-emerald,
.client-home-panels .panel-accent-blue,
.client-home-panels [class*="panel-accent"] {
    background: var(--wf-glass-bg) !important;
    border: 1px solid var(--wf-border) !important;
}

/* Fix stat box number colors */
.client-home-panels .panel-body .text-center .h2,
.client-home-panels .panel-body h2,
.client-home-panels .panel-body .count {
    color: var(--wf-lime) !important;
}

/* Tile stat boxes (2 Services, 4 Domains, etc.) */
.tile {
    background: var(--wf-glass-bg) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
}

.tile .tile-value,
.tile .h2,
.tile h2 {
    color: var(--wf-lime) !important;
}

.tile .tile-title,
.tile .tile-label {
    color: var(--wf-text) !important;
}

.tile:hover {
    background: var(--wf-glass-bg-hover) !important;
    border-color: var(--wf-border-hover) !important;
}

/* Open Ticket link and similar action links */
a.text-success,
.text-success,
a[href*="ticket"].text-primary {
    color: var(--wf-lime) !important;
}

/* All btn-success buttons should use lime color */
.btn-success,
a.btn-success,
button.btn-success,
input.btn-success {
    background: var(--wf-lime) !important;
    background-color: var(--wf-lime) !important;
    border-color: var(--wf-lime) !important;
    color: var(--wf-dark) !important;
}

.btn-success:hover,
a.btn-success:hover,
button.btn-success:hover,
input.btn-success:hover {
    background: var(--wf-lime-hover) !important;
    background-color: var(--wf-lime-hover) !important;
    border-color: var(--wf-lime-hover) !important;
    color: var(--wf-dark) !important;
}

/* 3. Remove horizontal lines in Contacts/Shortcuts sidebars */
.panel-client-contacts .panel-body,
.panel-client-contacts .panel-heading,
.panel-client-contacts .panel-footer,
.panel-sidebar .panel-heading,
.panel-sidebar .panel-footer {
    border: none !important;
}

/* Remove borders between sidebar panels */
.sidebar .panel + .panel {
    border-top: none !important;
    margin-top: 0 !important;
}

/* 4. Fix Register a New Domain box - Complete Restyle */
.panel-domain-register {
    background: transparent !important;
    border: none !important;
    border-radius: var(--wf-radius) !important;
    overflow: visible !important;
    box-shadow: none !important;
}

.panel-domain-register .panel-heading {
    background: transparent !important;
    border-bottom: none !important;
    color: var(--wf-white) !important;
    padding: 20px 20px 10px !important;
}

.panel-domain-register .panel-heading h5,
.panel-domain-register .panel-heading .panel-title {
    color: var(--wf-white) !important;
    font-weight: 600 !important;
}

.panel-domain-register .panel-body {
    background: transparent !important;
    border: none !important;
    padding: 10px 20px 20px !important;
}

/* Input group container - stack vertically */
.panel-domain-register .input-group {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Domain search text input */
.panel-domain-register input[type="text"],
.panel-domain-register .form-control {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius-sm) !important;
    color: var(--wf-white) !important;
    height: 48px !important;
    padding: 12px 16px !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 12px !important;
}

.panel-domain-register input[type="text"]:focus,
.panel-domain-register .form-control:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--wf-lime) !important;
    box-shadow: none !important;
    outline: none !important;
}

.panel-domain-register input[type="text"]::placeholder,
.panel-domain-register .form-control::placeholder {
    color: var(--wf-text-muted) !important;
}

/* Button container */
.panel-domain-register .input-group-btn,
.panel-domain-register .input-group-append {
    display: flex !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    gap: 8px !important;
    width: 100% !important;
}

/* All submit buttons in domain register */
.panel-domain-register input[type="submit"],
.panel-domain-register .input-group-btn .btn,
.panel-domain-register .input-group-append .btn {
    height: 44px !important;
    padding: 0 24px !important;
    font-weight: 600 !important;
    border-radius: var(--wf-radius-sm) !important;
    margin: 0 !important;
    cursor: pointer !important;
    flex: 1 !important;
}

/* Transfer button (btn-default) */
.panel-domain-register input[type="submit"].btn-default,
.panel-domain-register .btn-default {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--wf-text) !important;
    border: 1px solid var(--wf-border) !important;
}

.panel-domain-register input[type="submit"].btn-default:hover,
.panel-domain-register .btn-default:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--wf-white) !important;
}

/* Register button (btn-success) */
.panel-domain-register input[type="submit"].btn-success,
.panel-domain-register .btn-success {
    background: var(--wf-lime) !important;
    color: var(--wf-dark) !important;
    border: 1px solid var(--wf-lime) !important;
}

.panel-domain-register input[type="submit"].btn-success:hover,
.panel-domain-register .btn-success:hover {
    background: var(--wf-lime-hover) !important;
}

/* ============================================
   Services/Products Table Styling
   ============================================ */

/* Table container - glass card style */
.table-container {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--wf-radius) !important;
    overflow: hidden !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    padding: 0 !important;
}

.table-list,
.listtable,
.dataTables_wrapper {
    background: transparent !important;
}

.table-responsive {
    background: transparent !important;
}

/* Main table */
.table-list table,
.table,
table.dataTable {
    background: transparent !important;
    border: none !important;
    margin-bottom: 0 !important;
}

/* Table header - slightly lighter */
.table-list thead,
.table thead,
table.dataTable thead {
    background: rgba(255, 255, 255, 0.05) !important;
}

.table-list thead th,
.table thead th,
table.dataTable thead th {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    padding: 14px 16px !important;
}

/* Table body rows */
.table-list tbody tr,
.table tbody tr,
table.dataTable tbody tr {
    background: transparent !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

.table-list tbody tr:hover,
.table tbody tr:hover,
table.dataTable tbody tr:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Alternating row colors - subtle */
.table-list tbody tr:nth-child(even),
.table-striped tbody tr:nth-child(even),
table.dataTable tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03) !important;
}

.table-list tbody tr:nth-child(even):hover,
.table-striped tbody tr:nth-child(even):hover,
table.dataTable tbody tr:nth-child(even):hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Table cells */
.table-list tbody td,
.table tbody td,
table.dataTable tbody td {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 16px !important;
    vertical-align: middle !important;
}

/* Last row - no bottom border */
.table-list tbody tr:last-child td,
table.dataTable tbody tr:last-child td {
    border-bottom: none !important;
}

/* Product/Service name styling */
.table-list tbody td:first-child,
table.dataTable tbody td:first-child {
    font-weight: 600 !important;
    color: var(--wf-white) !important;
}

/* Domain/hostname under product name */
.table-list tbody td .small,
.table-list tbody td small,
table.dataTable tbody td .small,
table.dataTable tbody td small {
    color: var(--wf-text-muted) !important;
    display: block !important;
    margin-top: 4px !important;
    font-weight: 400 !important;
}

/* Pricing column */
.table-list tbody td:nth-child(2) .small,
table.dataTable tbody td:nth-child(2) .small {
    color: var(--wf-text-muted) !important;
}

/* Status badges */
.table-list .label,
.table-list .badge,
table.dataTable .label,
table.dataTable .badge {
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* Active status - lime */
.table-list .label-success,
.table-list .badge-success,
table.dataTable .label-success,
table.dataTable .badge-success {
    background: var(--wf-lime) !important;
    color: var(--wf-dark) !important;
}

/* Actions column - three dots menu */
.table-list .dropdown-toggle,
.table-list .btn-link,
table.dataTable .dropdown-toggle {
    color: var(--wf-text-muted) !important;
    background: transparent !important;
    border: none !important;
}

.table-list .dropdown-toggle:hover,
.table-list .btn-link:hover,
table.dataTable .dropdown-toggle:hover {
    color: var(--wf-white) !important;
}

/* Dropdown menu */
.table-list .dropdown-menu,
table.dataTable .dropdown-menu {
    background: var(--wf-midnight-light) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius-sm) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

.table-list .dropdown-menu a,
table.dataTable .dropdown-menu a {
    color: var(--wf-text) !important;
    padding: 10px 16px !important;
}

.table-list .dropdown-menu a:hover,
table.dataTable .dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--wf-lime) !important;
}

/* Pagination */
.pagination {
    display: flex !important;
    gap: 4px !important;
    margin: 16px 0 !important;
}

.pagination li a,
.pagination li span {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-text) !important;
    padding: 8px 14px !important;
    border-radius: var(--wf-radius-xs) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.pagination li a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--wf-border-hover) !important;
    color: var(--wf-white) !important;
}

.pagination li.active a,
.pagination li.active span {
    background: var(--wf-lime) !important;
    border-color: var(--wf-lime) !important;
    color: var(--wf-dark) !important;
}

.pagination li.disabled a,
.pagination li.disabled span {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Show entries section */
.table-list-footer,
.dataTables_length {
    color: var(--wf-text-muted) !important;
    padding: 12px 16px !important;
}

/* Show entries dropdown */
.table-list select,
.dataTables_length select,
.main-content select.form-control {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-white) !important;
    border-radius: var(--wf-radius-xs) !important;
    padding: 6px 12px !important;
    margin: 0 6px !important;
}

/* View dropdown button */
.btn-filter,
.table-list .btn-default,
.btn-default[data-toggle="dropdown"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-text) !important;
    border-radius: var(--wf-radius-xs) !important;
}

.btn-filter:hover,
.table-list .btn-default:hover,
.btn-default[data-toggle="dropdown"]:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--wf-border-hover) !important;
    color: var(--wf-white) !important;
}

/* View label */
.table-list-header {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--wf-border) !important;
    color: var(--wf-text-muted) !important;
}

/* ============================================
   Submit Ticket Page - Clean Minimal Design
   ============================================ */

/* Remove all excessive borders and backgrounds */
.panel-form,
.ticket-info-col,
.form-group .panel,
.support-form .panel,
.ticket-form-container .row > div > div,
.ticket-info,
.form-info-tile,
[class*="ticket-info"],
.panel.panel-default.open-ticket-information,
.open-ticket-information,
.open-ticket-information .panel-body,
.creator-details,
.creator-details-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Section containers - clean glass cards */
.section.section-sm {
    background: rgba(30, 41, 59, 0.4) !important;
    border: none !important;
    border-radius: var(--wf-radius) !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    position: relative !important;
}

/* Fix z-index stacking: First section (Ticket Info) must be above second (Ticket Details) */
.section.section-sm:first-of-type,
.support-form > .section:first-child,
form > .section:first-child {
    z-index: 100 !important;
}

.section.section-sm:nth-of-type(2),
.support-form > .section:nth-child(2),
form > .section:nth-child(2) {
    z-index: 50 !important;
}

.section.section-sm:nth-of-type(3),
.support-form > .section:nth-child(3),
form > .section:nth-child(3) {
    z-index: 25 !important;
}

/* Section titles */
.section-title {
    color: var(--wf-white) !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    margin-bottom: 20px !important;
}

/* Form inputs - clean style */
.main-content input[type="text"],
.main-content input[type="email"],
.main-content input[type="password"],
.main-content input[type="number"],
.main-content textarea,
.main-content select,
.main-content .form-control {
    background: rgba(15, 23, 42, 0.6) !important;
    border: none !important;
    border-radius: var(--wf-radius-sm) !important;
    color: var(--wf-white) !important;
    padding: 14px 16px !important;
    transition: all 0.2s ease !important;
}

.main-content input[type="text"]:focus,
.main-content input[type="email"]:focus,
.main-content input[type="password"]:focus,
.main-content textarea:focus,
.main-content select:focus,
.main-content .form-control:focus {
    background: rgba(15, 23, 42, 0.8) !important;
    box-shadow: 0 0 0 2px rgba(200, 255, 0, 0.3) !important;
    outline: none !important;
}

.main-content input::placeholder,
.main-content textarea::placeholder {
    color: var(--wf-text-muted) !important;
}

/* International telephone input - fix country code overlap */
body.lagom .intl-tel-input.separate-dial-code input,
body.lagom .intl-tel-input.separate-dial-code input.form-control,
body.lagom .intl-tel-input.separate-dial-code .form-control {
    padding-left: 100px !important;
}

body.lagom .intl-tel-input .selected-flag {
    background: transparent !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0 10px !important;
}

/* Country dropdown - fix z-index so it appears above other elements */
body.lagom .intl-tel-input .country-list {
    z-index: 9999 !important;
    background: rgba(15, 23, 42, 0.98) !important;
    border: 1px solid rgba(200, 255, 0, 0.2) !important;
    border-radius: var(--wf-radius-sm) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

/* Fix z-index stacking for domain contact sections: Registrant > Admin > Tech */
body.lagom.page-clientareadomaincontactinfo .section:nth-of-type(2) {
    z-index: 100 !important;
    position: relative !important;
}

body.lagom.page-clientareadomaincontactinfo .section:nth-of-type(3) {
    z-index: 50 !important;
    position: relative !important;
}

body.lagom.page-clientareadomaincontactinfo .section:nth-of-type(4) {
    z-index: 25 !important;
    position: relative !important;
}

body.lagom .intl-tel-input .country-list .country {
    padding: 8px 12px !important;
}

body.lagom .intl-tel-input .country-list .country:hover,
body.lagom .intl-tel-input .country-list .country.highlight {
    background: rgba(200, 255, 0, 0.1) !important;
}

body.lagom .intl-tel-input .country-list .country-name,
body.lagom .intl-tel-input .country-list .dial-code {
    color: var(--wf-white) !important;
}

/* Info tiles (Ticket Creator, Department) - subtle cards */
.ticket-creator,
.department-dropdown {
    background: rgba(15, 23, 42, 0.4) !important;
    border: none !important;
    border-radius: var(--wf-radius-sm) !important;
    padding: 16px !important;
}

/* Dropdown toggles - clean style */
.main-content .dropdown-toggle,
.dropdown-select-list .dropdown-toggle {
    background: rgba(15, 23, 42, 0.6) !important;
    border: none !important;
    border-radius: var(--wf-radius-sm) !important;
    color: var(--wf-white) !important;
    padding: 14px 16px !important;
}

/* Text editor - clean toolbar */
.main-content .btn-toolbar,
.form-group .btn-toolbar {
    background: rgba(15, 23, 42, 0.6) !important;
    border: none !important;
    border-radius: var(--wf-radius-sm) var(--wf-radius-sm) 0 0 !important;
    padding: 8px !important;
}

.main-content .btn-toolbar .btn {
    background: transparent !important;
    border: none !important;
    color: var(--wf-text-muted) !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
}

.main-content .btn-toolbar .btn:hover {
    color: var(--wf-white) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Form labels */
.main-content label,
.main-content .form-label,
.main-content .control-label {
    color: var(--wf-text) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
}

/* Submit button */
.main-content .btn-primary,
button[type="submit"].btn-primary {
    background: var(--wf-lime) !important;
    border: none !important;
    color: var(--wf-dark) !important;
    font-weight: 600 !important;
    border-radius: var(--wf-radius-sm) !important;
    padding: 14px 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.main-content .btn-primary:hover {
    background: var(--wf-lime-hover) !important;
    transform: translateY(-1px) !important;
}

/* File upload - clean dashed style */
.main-content .file-upload,
.main-content .dropzone,
.main-content [class*="attachment"]:not(.dropdown-list-item) {
    background: transparent !important;
    border: 2px dashed rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--wf-radius-sm) !important;
    color: var(--wf-text-muted) !important;
}

.main-content .file-upload:hover,
.main-content .dropzone:hover {
    border-color: var(--wf-lime) !important;
}

/* ============================================
   Knowledgebase Suggestions Panel
   ============================================ */

.panel-sidebar.panel-styled-group {
    background: rgba(51, 65, 85, 0.5) !important;
    border: none !important;
    border-radius: var(--wf-radius) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.panel-sidebar.panel-styled-group .panel-heading {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: none !important;
    padding: 16px 20px !important;
}

.panel-sidebar.panel-styled-group .panel-heading h5 {
    color: var(--wf-white) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    margin: 0 !important;
}

.panel-sidebar.panel-styled-group .panel-body {
    background: transparent !important;
    padding: 20px !important;
}

.kb-suggestion-form {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.kb-suggestion-form .desc {
    color: var(--wf-text) !important;
    font-size: 14px !important;
    margin-bottom: 16px !important;
}

.kb-suggestion-form .search-field {
    position: relative !important;
}

.kb-suggestion-form .search-field input {
    background: rgba(15, 23, 42, 0.5) !important;
    border: none !important;
    border-radius: var(--wf-radius-sm) !important;
    color: var(--wf-white) !important;
    padding: 12px 14px 12px 40px !important;
    width: 100% !important;
}

.kb-suggestion-form .search-field input:focus {
    background: rgba(15, 23, 42, 0.7) !important;
    box-shadow: 0 0 0 2px rgba(200, 255, 0, 0.2) !important;
    outline: none !important;
}

.kb-suggestion-form .search-field-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--wf-text-muted) !important;
    pointer-events: none !important;
}

/* ============================================
   Dropdown Fix - High Z-Index & Dark Styling
   ============================================ */

/* Parent dropdown container */
.dropdown-select-list,
.dropdown {
    position: relative !important;
}

/* When dropdown is open - very high z-index */
.dropdown-select-list.open,
.dropdown.open,
.dropdown-select-list.show,
.dropdown.show,
.ticket-priority-dropdown.open,
.open-ticket-products-dropdown.open {
    z-index: 9999 !important;
}

/* The dropdown menu itself - maximum specificity with body prefix */
body.lagom .dropdown-menu,
body.lagom ul.dropdown-menu,
body.lagom .dropdown-menu.dropdown-lazy,
body.lagom .dropdown-menu.show,
body.lagom .dropdown-menu.has-scroll,
body.lagom .dropdown-select-list .dropdown-menu,
body.lagom .dropdown-select-list ul.dropdown-menu,
body.lagom .ticket-priority-dropdown .dropdown-menu,
body.lagom .ticket-priority-dropdown ul.dropdown-menu,
body.lagom .open-ticket-products-dropdown .dropdown-menu,
body.lagom .main-content .dropdown-menu,
body .dropdown-menu[class],
.dropdown-menu[class*="dropdown"] {
    z-index: 10000 !important;
    position: absolute !important;
    background: #0f172a !important;
    background-color: #0f172a !important;
    border: 1px solid rgba(200, 255, 0, 0.25) !important;
    border-radius: var(--wf-radius-sm) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    padding: 8px !important;
    min-width: 180px !important;
    margin-top: 4px !important;
}

/* List items inside dropdown - direct li elements */
body.lagom .dropdown-menu > li,
body.lagom .dropdown-select-list .dropdown-menu > li,
body.lagom .ticket-priority-dropdown .dropdown-menu > li,
.dropdown-menu > li[class],
.dropdown-menu li.dropdown-list-item {
    background: transparent !important;
    background-color: transparent !important;
    list-style: none !important;
    color: var(--wf-text) !important;
    padding: 10px 14px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

body.lagom .dropdown-menu > li:hover,
body.lagom .dropdown-select-list .dropdown-menu > li:hover,
body.lagom .ticket-priority-dropdown .dropdown-menu > li:hover,
.dropdown-menu > li[class]:hover,
.dropdown-menu li.dropdown-list-item:hover {
    background: rgba(200, 255, 0, 0.15) !important;
    background-color: rgba(200, 255, 0, 0.15) !important;
    color: var(--wf-white) !important;
}

/* Dropdown items with anchor tags */
body.lagom .dropdown-list-item,
body.lagom a.dropdown-list-item,
body.lagom .dropdown-menu > a,
body.lagom .dropdown-menu > li > a,
body.lagom .dropdown-menu li a,
body.lagom .main-content .dropdown-menu a {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--wf-text) !important;
    display: block !important;
    padding: 10px 14px !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    transition: all 0.15s ease !important;
}

body.lagom .dropdown-list-item:hover,
body.lagom a.dropdown-list-item:hover,
body.lagom .dropdown-menu > a:hover,
body.lagom .dropdown-menu > li > a:hover,
body.lagom .dropdown-menu li a:hover,
body.lagom .main-content .dropdown-menu a:hover {
    background: rgba(200, 255, 0, 0.15) !important;
    background-color: rgba(200, 255, 0, 0.15) !important;
    color: var(--wf-white) !important;
}

/* ========================================
   AUTO RENEW TOGGLE ALIGNMENT
   ======================================== */
/* Fix alignment of toggle switch with label text */
.panel-switch .panel-body {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
}

.panel-switch .switch-label {
    margin: 0 !important;
    line-height: 1 !important;
    color: var(--wf-text) !important;
}

.panel-switch .switch {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* Ensure the switch container is vertically centered */
.panel-switch .switch--lg {
    display: flex !important;
    align-items: center !important;
}

/* Panel switch - dark theme styling */
.panel-switch,
.panel-switch.checked,
.panel-switch:active,
.panel-switch:focus,
.panel-switch:hover,
.panel-switch.loading {
    background: rgba(30, 41, 59, 0.6) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
    box-shadow: none !important;
}

/* Remove inner border from panel-body */
.panel-switch .panel-body {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.panel-switch .loader-panel,
.panel-switch .loader {
    background: rgba(30, 41, 59, 0.95) !important;
    border-radius: var(--wf-radius) !important;
    border: none !important;
}

/* Spinner styling for dark background */
.panel-switch .spinner .rect1,
.panel-switch .spinner .rect2,
.panel-switch .spinner .rect3,
.panel-switch .spinner .rect4,
.panel-switch .spinner .rect5 {
    background-color: var(--wf-lime) !important;
}

/* ========================================
   NAMESERVERS TAB STYLING
   ======================================== */
/* Panel check containers (radio options) */
body.lagom .panel-group.panel-group-condensed {
    background: transparent !important;
    border: none !important;
}

body.lagom .panel.panel-check,
body.lagom .panel-check {
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(200, 255, 0, 0.2) !important;
    border-radius: var(--wf-radius) !important;
    margin-bottom: 8px !important;
    overflow: visible !important;
}

body.lagom .panel.panel-check.checked,
body.lagom .panel-check.checked {
    border-color: rgba(200, 255, 0, 0.4) !important;
}

body.lagom .panel-check .panel-heading,
body.lagom .panel-check .panel-heading.check {
    background: rgba(30, 41, 59, 0.7) !important;
    border-bottom: 1px solid rgba(200, 255, 0, 0.15) !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
}

body.lagom .panel-check .panel-heading label {
    color: var(--wf-white) !important;
    font-weight: 500 !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    line-height: 22px !important;
}

/* iCheck radio button - flex item spacing */
body.lagom .panel-check .panel-heading .iradio_square-blue,
body.lagom .panel-check .panel-heading .icheckbox_square-blue,
body.lagom .panel-check .panel-heading div[class*="iradio"],
body.lagom .panel-check .panel-heading div[class*="icheckbox"] {
    flex-shrink: 0 !important;
    margin: 0 10px 0 0 !important;
    float: none !important;
}

/* Check content - must be inline */
body.lagom .panel-check .panel-heading .check-content {
    display: inline !important;
    vertical-align: middle !important;
}

body.lagom .panel-check .panel-heading .check-content span {
    display: inline !important;
    vertical-align: middle !important;
}

/* Radio button styling */
body.lagom .panel-check .radio-styled {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

body.lagom .panel-check .radio-styled span {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

body.lagom .panel-check .radio-styled input[type="radio"] + span::before {
    border-color: var(--wf-border) !important;
    background: rgba(15, 23, 42, 0.5) !important;
}

body.lagom .panel-check .radio-styled.checked input[type="radio"] + span::before,
body.lagom .panel-check .radio-styled input[type="radio"]:checked + span::before {
    border-color: var(--wf-lime) !important;
    background: var(--wf-lime) !important;
}

/* Panel body with nameserver inputs */
body.lagom .panel-check .panel-collapse,
body.lagom .panel-check .panel-body {
    background: rgba(30, 41, 59, 0.4) !important;
    border-top: none !important;
    padding: 20px !important;
}

/* Nameserver input fields */
body.lagom .panel-check .form-group {
    margin-bottom: 16px !important;
}

body.lagom .panel-check .form-group .control-label {
    color: var(--wf-text-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
}

body.lagom .panel-check input.domnsinputs,
body.lagom .panel-check input.form-control {
    background: rgba(15, 23, 42, 0.7) !important;
    border: 1px solid rgba(200, 255, 0, 0.2) !important;
    border-radius: var(--wf-radius-sm) !important;
    color: var(--wf-white) !important;
    padding: 12px 14px !important;
}

body.lagom .panel-check input.domnsinputs:focus,
body.lagom .panel-check input.form-control:focus {
    border-color: var(--wf-lime) !important;
    box-shadow: 0 0 0 2px rgba(200, 255, 0, 0.1) !important;
    outline: none !important;
}

/* Nameservers submit button - fix text alignment */
body.lagom .domain-details-nameservers .btn,
body.lagom .tab-pane .btn-primary:not(.hidden),
body.lagom #tabNameservers .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 14px 24px !important;
}

/* Ensure hidden class is always respected */
.btn.hidden,
.domain-contact-support.hidden,
body.lagom .hidden {
    display: none !important;
}

/* ============================================
   INVOICE PAGE STYLING
   ============================================ */

/* Main invoice container - glass card effect */
body.lagom .invoice {
    background: var(--wf-glass-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
    padding: 0 !important;
    overflow: hidden;
}

/* Invoice sections */
body.lagom .invoice .section {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.lagom .invoice .section-body {
    background: transparent !important;
    padding: 28px 32px !important;
    border-bottom: 1px solid var(--wf-border) !important;
}

body.lagom .invoice .section:last-child .section-body {
    border-bottom: none !important;
}

/* Invoice title */
body.lagom .invoice .invoice-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--wf-white) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Invoice status labels */
body.lagom .invoice .invoice-status {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

body.lagom .invoice .label-danger {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}

body.lagom .invoice .label-success {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
}

body.lagom .invoice .label-info {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}

body.lagom .invoice .label-warning {
    background: rgba(234, 179, 8, 0.2) !important;
    color: #facc15 !important;
}

/* Invoice info list */
body.lagom .invoice .list-info {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.lagom .invoice .list-info li {
    display: flex !important;
    justify-content: space-between !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.lagom .invoice .list-info li:last-child {
    border-bottom: none !important;
}

body.lagom .invoice .list-info-text {
    color: var(--wf-text-muted) !important;
    font-size: 13px !important;
}

body.lagom .invoice .list-info-title {
    color: var(--wf-white) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Invoice headings */
body.lagom .invoice h3 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--wf-lime) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
}

/* Invoice address */
body.lagom .invoice address {
    color: var(--wf-text) !important;
    font-style: normal !important;
    line-height: 1.7 !important;
}

/* Invoice tables */
body.lagom .invoice table {
    width: 100% !important;
    background: transparent !important;
    border-collapse: collapse !important;
}

body.lagom .invoice table th {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--wf-text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--wf-border) !important;
    text-align: left !important;
}

body.lagom .invoice table th:last-child {
    text-align: right !important;
}

body.lagom .invoice table td {
    color: var(--wf-text) !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    vertical-align: middle !important;
}

body.lagom .invoice table td:last-child {
    text-align: right !important;
    font-weight: 500 !important;
}

body.lagom .invoice table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Totals rows */
body.lagom .invoice table tr td[colspan] + td,
body.lagom .invoice table tr:has(td:empty:first-child) td:nth-child(2) {
    color: var(--wf-text-muted) !important;
    font-size: 13px !important;
}

body.lagom .invoice table tr:has(td:empty:first-child) td:last-child {
    color: var(--wf-white) !important;
}

/* Total row highlight */
body.lagom .invoice table tr:has(td:contains("Total")),
body.lagom .invoice table tr:has(td:contains("Balance")) {
    background: rgba(200, 255, 0, 0.03) !important;
}

/* No transactions message */
body.lagom .invoice table td[colspan="4"],
body.lagom .invoice table td[colspan="3"] {
    text-align: center !important;
    color: var(--wf-text-muted) !important;
    font-style: italic !important;
    padding: 20px !important;
}

/* ============================================
   SUBMIT TICKET - DEPARTMENT BOXES
   ============================================ */

/* Container row - remove any grid borders */
.row-eq-height {
    border: none !important;
    background: transparent !important;
}

/* Department card - clean glass style */
.panel-department-box,
.panel.panel-support.panel-department-box,
a.panel-department-box {
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--wf-radius) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    margin-bottom: 20px !important;
}

.panel-department-box:hover {
    background: rgba(30, 41, 59, 0.7) !important;
    border-color: rgba(200, 255, 0, 0.3) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
}

/* Department card body */
.panel-department-box .panel-body {
    background: transparent !important;
    border: none !important;
    padding: 24px !important;
    flex: 1 !important;
}

/* Department title */
.panel-department-box .support-title,
.panel-department-box h5.support-title {
    color: var(--wf-white) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 8px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Department icon */
.panel-department-box .support-title i,
.panel-department-box .support-title .graphic-item {
    color: var(--wf-lime) !important;
    font-size: 20px !important;
}

/* Department description */
.panel-department-box .support-desc,
.panel-department-box p.support-desc {
    color: var(--wf-text-muted) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* Department card footer - contains the button */
.panel-department-box .panel-footer {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 16px 24px !important;
}

/* Open Ticket button - LIME GREEN */
.panel-department-box .btn-primary-faded,
.panel-department-box .panel-footer .btn,
.panel-department-box .panel-footer span.btn {
    background: var(--wf-lime) !important;
    color: var(--wf-dark) !important;
    border: none !important;
    border-radius: var(--wf-radius-sm) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 12px 20px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
}

.panel-department-box:hover .btn-primary-faded,
.panel-department-box:hover .panel-footer .btn {
    background: var(--wf-lime-hover) !important;
    box-shadow: 0 4px 16px rgba(200, 255, 0, 0.3) !important;
}

/* ============================================
   RELATED PRODUCT DROPDOWN FIXES
   ============================================ */

/* 1. Fix magnifying glass icon overlapping search text */
.related-product-dropdown .dropdown-menu .dropdown-header.input-group,
.related-product-dropdown .dropdown-header.input-group {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

/* Hide the icon from normal flow and position input to take full width */
.related-product-dropdown .dropdown-menu .dropdown-header .input-group-icon,
.related-product-dropdown .dropdown-header .input-group-icon,
.related-product-dropdown .dropdown-header .input-group-icon.lm-search,
.related-product-dropdown .dropdown-menu .input-group-icon.lm-search {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 1 !important;
    color: var(--wf-text-muted) !important;
    z-index: 10 !important;
    pointer-events: none !important;
    margin: 0 !important;
}

/* Input needs enough left padding to clear the icon */
.related-product-dropdown .dropdown-menu .dropdown-header input.form-control,
.related-product-dropdown .dropdown-header input.form-control,
.related-product-dropdown .dropdown-header.input-group input.form-control {
    padding-left: 40px !important;
    margin-left: 0 !important;
    flex: 1 !important;
    width: 100% !important;
}

/* 2. Hide product group name - show only product name and domain */
.related-product-dropdown .related-item-group,
.dropdown-select-list .related-item-group {
    display: none !important;
}

/* 3. Fix status label visibility in dropdown */
.related-product-dropdown .label,
.dropdown-select-list .dropdown-list-item .label {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* Active status - lime green */
.related-product-dropdown .label-success,
.dropdown-select-list .dropdown-list-item .label-success {
    background: rgba(200, 255, 0, 0.2) !important;
    color: var(--wf-lime) !important;
}

.related-product-dropdown .label-success .status,
.dropdown-select-list .dropdown-list-item .label-success .status {
    background: transparent !important;
    color: var(--wf-lime) !important;
    padding: 0 !important;
}

/* Pending status - amber/yellow */
.related-product-dropdown .label-warning,
.dropdown-select-list .dropdown-list-item .label-warning {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}

.related-product-dropdown .label-warning .status,
.dropdown-select-list .dropdown-list-item .label-warning .status {
    background: transparent !important;
    color: #fbbf24 !important;
    padding: 0 !important;
}

/* Default/other status - neutral gray */
.related-product-dropdown .label-default,
.dropdown-select-list .dropdown-list-item .label-default {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--wf-text-muted) !important;
}

.related-product-dropdown .label-default .status,
.dropdown-select-list .dropdown-list-item .label-default .status {
    background: transparent !important;
    color: var(--wf-text-muted) !important;
    padding: 0 !important;
}

/* Improve dropdown item layout - product name and status on same line */
.related-product-dropdown .dropdown-menu .dropdown-list-item,
.related-product-dropdown .dropdown-menu-items .dropdown-list-item,
.related-product-dropdown a.dropdown-list-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}

.related-product-dropdown .related-item,
.related-product-dropdown .dropdown-list-item .related-item {
    flex: 1 !important;
    min-width: 0 !important;
    display: inline !important;
}

.related-product-dropdown .related-item-name,
.related-product-dropdown .dropdown-list-item .related-item-name {
    color: var(--wf-text) !important;
}

/* Ensure label stays on same line */
.related-product-dropdown .dropdown-list-item .label,
.related-product-dropdown .dropdown-menu-items .label {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin-left: auto !important;
}

/* ========================================
   RECENT TICKETS SIDEBAR FIX
   ======================================== */
.recent-ticket small {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 6px !important;
}

.recent-ticket small .status {
    padding: 2px 8px !important;
    font-size: 10px !important;
    order: 1 !important;
}

.recent-ticket small .pull-right,
.recent-ticket small .float-right {
    float: none !important;
    order: 2 !important;
    margin-left: auto !important;
    color: var(--wf-text-muted) !important;
    font-size: 11px !important;
}

/* ========================================
   VIEW TICKET - CLOSE TICKET BUTTON
   ======================================== */
.search-group .btn[data-target="#closeTicket"],
button[data-target="#closeTicket"] {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #f87171 !important;
    padding: 10px 20px !important;
    border-radius: var(--wf-radius-sm) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

.search-group .btn[data-target="#closeTicket"]:hover,
button[data-target="#closeTicket"]:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
    color: #fca5a5 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* ========================================
   ORDER FORM - PRODUCT PACKAGES (Lagom2)
   ======================================== */

/* Products container */
.section.products {
    background: transparent !important;
}

.section.products .row {
    gap: 1.5rem !important;
}

/* Individual package card - Webfort glass style */
.package {
    position: relative !important;
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--wf-radius-lg) !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

/* Gradient overlay on hover */
.package::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(200, 255, 0, 0.05), transparent 50%, rgba(37, 99, 235, 0.05)) !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease !important;
    pointer-events: none !important;
    border-radius: var(--wf-radius-lg) !important;
}

.package:hover::before {
    opacity: 1 !important;
}

.package:hover {
    transform: translateY(-10px) !important;
    border-color: rgba(200, 255, 0, 0.3) !important;
    box-shadow: 0 30px 60px -20px rgba(200, 255, 0, 0.2) !important;
}

/* Package sides */
.package-side {
    background: transparent !important;
    border: none !important;
    padding: 1.25rem !important;
}

.package-side-left {
    border-right: none !important;
}

/* Package header */
.package-header {
    text-align: center !important;
    margin-bottom: 1rem !important;
}

/* Package title */
.package-title {
    color: var(--wf-white) !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    margin-bottom: 0.5rem !important;
}

/* Package price */
.package-price {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 0.75rem !important;
}

.package-price .price {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.package-price .price-amount,
.package-price .price .price-amount {
    color: var(--wf-lime) !important;
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.package-price .price-cycle,
.package-price .price .price-cycle {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

/* Package description */
.package-description,
.package-side .package-description {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1rem !important;
}

/* Package features list */
.package-features,
.package-side .package-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1rem 0 !important;
}

.package-features li {
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 0.35rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    font-size: 0.8rem !important;
}

.package-features li:last-child {
    border-bottom: none !important;
}

.package-features li i,
.package-features li .icon {
    color: var(--wf-lime) !important;
    margin-right: 0.5rem !important;
}

/* Package button / Order Now */
.package .btn,
.package button,
.package-side .btn {
    width: 100% !important;
    padding: 0.75rem 1.5rem !important;
    background: var(--wf-lime) !important;
    color: var(--wf-midnight) !important;
    border: none !important;
    border-radius: var(--wf-radius-full) !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.package .btn:hover,
.package button:hover,
.package-side .btn:hover {
    background: var(--wf-white) !important;
    color: var(--wf-midnight) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(200, 255, 0, 0.4) !important;
}

/* Featured/Popular package */
.package.featured,
.package.popular,
.package[data-featured="true"] {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(30, 64, 175, 0.2)) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
    transform: scale(1.02) !important;
}

.package.featured:hover,
.package.popular:hover,
.package[data-featured="true"]:hover {
    transform: scale(1.02) translateY(-10px) !important;
    box-shadow: 0 30px 60px -20px rgba(96, 165, 250, 0.3) !important;
}

/* Featured badge */
.package .ribbon,
.package .badge-featured,
.package .popular-badge {
    position: absolute !important;
    top: -0.5rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 0.25rem 1rem !important;
    background: var(--wf-lime) !important;
    color: var(--wf-midnight) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    border-radius: var(--wf-radius-full) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    z-index: 10 !important;
}

/* Column layout for products grid - 3 per row */
.section.products .row,
.products .row.row-eq-height {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -4px !important;
    gap: 0 !important;
}

.section.products .row > .col,
.products .row.row-eq-height > .col,
.section.products .col {
    padding: 4px !important;
    flex: 0 0 calc(33.333% - 0px) !important;
    max-width: calc(33.333%) !important;
    width: calc(33.333%) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Ensure package fills the column */
.products .col .package {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.products .col .package .package-side {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.products .col .package .btn,
.products .col .package button {
    margin-top: auto !important;
}

@media (max-width: 991px) {
    .section.products .row > .col,
    .products .row.row-eq-height > .col {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

@media (max-width: 575px) {
    .section.products .row > .col,
    .products .row.row-eq-height > .col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Legacy standard_cart styles (fallback) */
#order-standard_cart .products .product header,
#order-standard_cart .products .product header span,
body.lagom .product header span,
body.lagom .product header {
    color: var(--wf-white) !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
}

#order-standard_cart .products .product .product-pricing,
#order-standard_cart .products .product footer .product-pricing,
body.lagom .product-pricing {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#order-standard_cart .products .product .product-pricing .price,
body.lagom .product-pricing .price {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

body.lagom #order-standard_cart .products .product footer,
body.lagom .product footer,
.product footer {
    background: transparent !important;
    border: none !important;
    border-top: none !important;
    box-shadow: none !important;
}

/* ========================================
   SIDEBAR PANELS - Webfort Glass Style
   ======================================== */

/* Sidebar container */
.main-sidebar,
.sidebar {
    background: transparent !important;
}

/* Sidebar panels - glass card style */
.panel-sidebar,
.sidebar .panel {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--wf-radius-lg) !important;
    overflow: hidden !important;
    margin-bottom: 1rem !important;
    box-shadow: none !important;
}

/* Panel heading */
.panel-sidebar .panel-heading,
.sidebar .panel .panel-heading {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 1rem 1.25rem !important;
}

.panel-sidebar .panel-title,
.sidebar .panel .panel-title,
.panel-sidebar .panel-heading h3,
.panel-sidebar .panel-heading h5 {
    color: var(--wf-white) !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.panel-sidebar .panel-title i,
.sidebar .panel .panel-title i {
    color: var(--wf-lime) !important;
    font-size: 1rem !important;
}

/* Hide the collapse chevron or style it */
.panel-sidebar .panel-minimise,
.sidebar .panel .panel-minimise {
    display: none !important;
}

/* Panel body */
.panel-sidebar .panel-body,
.sidebar .panel .panel-body {
    background: transparent !important;
    padding: 0 !important;
}

/* List group items in sidebar */
.panel-sidebar .list-group,
.sidebar .panel .list-group {
    background: transparent !important;
    margin: 0 !important;
    border: none !important;
}

.panel-sidebar .list-group-item,
.sidebar .panel .list-group-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 0.875rem 1.25rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.panel-sidebar .list-group-item:last-child,
.sidebar .panel .list-group-item:last-child {
    border-bottom: none !important;
}

.panel-sidebar .list-group-item:hover,
.sidebar .panel .list-group-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--wf-white) !important;
    padding-left: 1.5rem !important;
}

.panel-sidebar .list-group-item.active,
.sidebar .panel .list-group-item.active {
    background: rgba(200, 255, 0, 0.1) !important;
    color: var(--wf-lime) !important;
    border-left: 3px solid var(--wf-lime) !important;
}

/* Icons in list items */
.panel-sidebar .list-group-item i,
.sidebar .panel .list-group-item i {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.875rem !important;
    width: 1rem !important;
    text-align: center !important;
    transition: color 0.2s ease !important;
}

.panel-sidebar .list-group-item:hover i,
.sidebar .panel .list-group-item:hover i {
    color: var(--wf-lime) !important;
}

.panel-sidebar .list-group-item.active i,
.sidebar .panel .list-group-item.active i {
    color: var(--wf-lime) !important;
}

/* Panel footer */
.panel-sidebar .panel-footer,
.sidebar .panel .panel-footer {
    background: rgba(255, 255, 255, 0.03) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 1rem 1.25rem !important;
}

/* Remove inner glow and border from client details panel footer */
.panel-client-details.panel-sidebar .panel-footer {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: none !important;
}

/* ============================================
   DOMAIN CONFIGURATION PAGE - WEBFORT STYLING
   ============================================ */

/* Selected product label - glass style */
.main-header-label-desc {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--wf-radius) !important;
    padding: 0.625rem 1.25rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.875rem !important;
    display: inline-block !important;
}

.main-header-label-desc .main-header-label-name {
    color: var(--wf-lime) !important;
    font-weight: 600 !important;
}

/* Domain options container - glass style */
.domain-options,
.order-domains,
.order-box,
.domain-checker-container,
.domain-checker {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--wf-radius-lg) !important;
}

/* Radio button container styling */
.domain-options .radio,
.order-domains .radio,
.domain-option {
    background: transparent !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 0.25rem !important;
    border-radius: var(--wf-radius) !important;
    transition: background 0.2s ease !important;
    cursor: pointer !important;
}

.domain-options .radio:hover,
.order-domains .radio:hover,
.domain-option:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Custom Radio Button Styling - iCheck/radio-styled wrapper */
.radio-styled {
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    background: transparent !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    transition: all 0.2s ease !important;
}

.radio-styled:hover {
    border-color: var(--wf-lime) !important;
}

.radio-styled.checked {
    border-color: var(--wf-lime) !important;
    background: var(--wf-lime) !important;
}

/* Fallback for native radio buttons */
.domain-options input[type="radio"],
.order-domains input[type="radio"],
.domain-option input[type="radio"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 50% !important;
    background: transparent !important;
    margin-right: 0.75rem !important;
    cursor: pointer !important;
    position: relative !important;
    vertical-align: middle !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.domain-options input[type="radio"]:hover,
.order-domains input[type="radio"]:hover {
    border-color: var(--wf-lime) !important;
}

.domain-options input[type="radio"]:checked,
.order-domains input[type="radio"]:checked {
    border-color: var(--wf-lime) !important;
    background: var(--wf-lime) !important;
}

/* Radio labels */
.domain-options label,
.order-domains label,
.domain-option label {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
}

/* Domain search form container */
.domain-search,
.domain-lookup,
.input-domain-search,
.domain-checker-form {
    display: flex !important;
    gap: 0.75rem !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
}

/* Domain search input field */
.domain-search input[type="text"],
.domain-lookup input[type="text"],
.input-domain-search input[type="text"],
input.domain-input,
input[name="domain"],
input[name="sld"],
.domain-checker input[type="text"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--wf-radius) !important;
    color: var(--wf-white) !important;
    padding: 0.875rem 1.25rem !important;
    font-size: 1rem !important;
    height: 50px !important;
    transition: all 0.2s ease !important;
    flex: 1 !important;
    min-width: 200px !important;
}

.domain-search input[type="text"]:focus,
.domain-lookup input[type="text"]:focus,
input.domain-input:focus,
input[name="domain"]:focus,
input[name="sld"]:focus {
    outline: none !important;
    border-color: var(--wf-lime) !important;
    box-shadow: 0 0 0 3px rgba(200, 255, 0, 0.15) !important;
}

.domain-search input[type="text"]::placeholder,
.domain-lookup input[type="text"]::placeholder,
input.domain-input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* TLD dropdown select */
.domain-search select,
.domain-lookup select,
select[name="tld"],
.domain-checker select {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--wf-radius) !important;
    color: var(--wf-white) !important;
    padding: 0.875rem 2.5rem 0.875rem 1rem !important;
    font-size: 1rem !important;
    height: 50px !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    min-width: 100px !important;
}

/* TLD dropdown - Lagom style */
.tld-select {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--wf-radius) !important;
    color: var(--wf-white) !important;
    padding: 0.5rem 2rem 0.5rem 1rem !important;
    font-size: 0.9rem !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
}

/* TLD dropdown wrapper - remove all hover backgrounds */
.inline-form-element .dropdown {
    background: transparent !important;
    border-radius: var(--wf-radius) !important;
}

.inline-form-element .dropdown-toggle {
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
    border: none !important;
    background: transparent !important;
    border-radius: var(--wf-radius) !important;
    overflow: hidden !important;
}

/* Override ALL hover states on dropdown and toggle */
.inline-form-element .dropdown:hover,
.inline-form-element .dropdown:focus,
.inline-form-element .dropdown-toggle:hover,
.inline-form-element .dropdown-toggle:focus,
.inline-form-element .dropdown-toggle:active,
.inline-form-element .dropdown:hover .dropdown-toggle,
.inline-form-element .dropdown.show .dropdown-toggle,
.inline-form-element .dropdown-toggle[aria-expanded="true"] {
    background: transparent !important;
    box-shadow: none !important;
}

/* Apply hover effect only to the inner .tld-select */
.inline-form-element .dropdown-toggle:hover .tld-select,
.inline-form-element .dropdown:hover .tld-select {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(200, 255, 0, 0.4) !important;
}

/* Remove any ::before or ::after pseudo-element backgrounds */
.inline-form-element .dropdown-toggle::before,
.inline-form-element .dropdown-toggle::after {
    display: none !important;
}

/* FIX Z-INDEX STACKING CONTEXT: When dropdown is open, elevate parent container */
/* This uses :has() selector to detect open dropdowns and raise the stacking context */
/* EXCLUDE cart dropdowns - they have their own stacking context fix (see panel-cart rules below) */
.main-content:has(.dropdown.open):not(:has(.panel-cart .dropdown.open)),
.main-content:has(.dropdown.show):not(:has(.panel-cart .dropdown.show)),
.main-body:has(.dropdown.open):not(:has(.panel-cart .dropdown.open)),
.main-body:has(.dropdown.show):not(:has(.panel-cart .dropdown.show)),
.app-main:has(.dropdown.open):not(:has(.panel-cart .dropdown.open)),
.app-main:has(.dropdown.show):not(:has(.panel-cart .dropdown.show)) {
    z-index: 10000 !important;
}

/* TLD dropdown menu styling */
.inline-form-element .dropdown-menu,
.inline-form-element .dropdown .dropdown-menu {
    z-index: 99999 !important;
    background: rgba(20, 25, 35, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--wf-radius) !important;
    padding: 0.5rem 0 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
}

/* TLD dropdown search input - fix text under icon */
.inline-form-element .dropdown-menu input[type="text"],
.inline-form-element .dropdown-menu .dropdown-search input,
.dropdown-menu-search input,
.dropdown-menu-search .form-control,
.dropdown-header.input-group input.form-control {
    padding-left: 3rem !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--wf-radius) !important;
    color: var(--wf-white) !important;
    height: 38px !important;
}

/* Move the search icon to proper position */
.dropdown-header.input-group .input-group-icon,
.dropdown-menu-search .input-group-icon {
    left: 10px !important;
    right: auto !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 14px !important;
    width: 14px !important;
}

/* Ensure the dropdown header has proper positioning context */
.dropdown-header.input-group {
    position: relative !important;
    padding: 0.5rem !important;
}

/* Search icon positioning */
.inline-form-element .dropdown-menu .dropdown-search,
.dropdown-menu-search {
    position: relative !important;
    padding: 0.5rem !important;
}

.inline-form-element .dropdown-menu .dropdown-search i,
.inline-form-element .dropdown-menu .dropdown-search svg,
.dropdown-menu-search i,
.dropdown-menu-search svg {
    position: absolute !important;
    left: 1.25rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    z-index: 1 !important;
}

/* TLD dropdown menu items */
.inline-form-element .dropdown-menu-item,
.inline-form-element .dropdown-menu a {
    padding: 0.5rem 1rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.2s ease !important;
}

.inline-form-element .dropdown-menu-item:hover,
.inline-form-element .dropdown-menu a:hover,
.inline-form-element .dropdown-menu-item.active {
    background: rgba(200, 255, 0, 0.1) !important;
    color: var(--wf-lime) !important;
}

/* Fix the domain input to match */
.inline-form input.form-control,
.inline-form .form-control.input-lg {
    height: 42px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
}

.domain-search select:focus,
.domain-lookup select:focus,
select[name="tld"]:focus {
    outline: none !important;
    border-color: var(--wf-lime) !important;
}

/* Check button - LIME GREEN with PILL shape */
.domain-search button,
.domain-lookup button,
.btn-check-domain,
.domain-checker button,
.domain-search .btn,
.domain-lookup .btn,
.order-domains .btn-primary,
.domain-options .btn-primary,
.inline-form .btn-primary-faded,
.inline-form-element .btn-primary-faded,
.inline-form-element button.btn,
body.lagom .inline-form-element .btn.btn-lg.btn-primary-faded,
body.lagom .inline-form .inline-form-element button.btn,
.domain-check-availability,
button.domain-check-availability {
    background: var(--wf-lime) !important;
    color: var(--wf-midnight) !important;
    border: none !important;
    border-radius: 9999px !important;
    padding: 0.5rem 1.5rem !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    height: 42px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

/* Domain register page - larger search button aligned with input */
.search-group-btn .domain-check-availability,
.search-group-btn button.domain-check-availability {
    height: 56px !important;
    padding: 0 2rem !important;
    font-size: 1rem !important;
    border-radius: var(--wf-radius-sm) !important;
}

.search-group-btn {
    display: flex !important;
    align-items: stretch !important;
}

.domain-search button:hover,
.domain-lookup button:hover,
.btn-check-domain:hover,
.domain-checker button:hover,
.order-domains .btn-primary:hover,
.domain-options .btn-primary:hover,
.domain-check-availability:hover,
button.domain-check-availability:hover {
    background: #d4ff33 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(200, 255, 0, 0.3) !important;
}

/* Domain promo boxes (Add Web Hosting, Transfer Domain) */
.domain-promo-box {
    background: var(--wf-glass-bg) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.domain-promo-box .promo-box-body {
    padding: 24px !important;
}

.domain-promo-box .promo-box-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}

.domain-promo-box .promo-box-header h5 {
    color: var(--wf-white) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    margin: 0 0 4px 0 !important;
}

.domain-promo-box .promo-box-header p {
    color: var(--wf-lime) !important;
    font-size: 0.9rem !important;
    margin: 0 !important;
}

.domain-promo-box .promo-box-content {
    flex: 1 !important;
}

.domain-promo-box .promo-box-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--wf-border) !important;
    margin-top: 16px !important;
}

.domain-promo-box .promo-box-footer p {
    color: var(--wf-text-muted) !important;
    font-size: 0.85rem !important;
    margin: 0 !important;
    max-width: 60% !important;
}

.domain-promo-box .promo-box-footer a,
.domain-promo-box .promo-box-footer .btn {
    background: var(--wf-lime) !important;
    color: var(--wf-midnight) !important;
    border: none !important;
    border-radius: var(--wf-radius-sm) !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.domain-promo-box .promo-box-footer a:hover,
.domain-promo-box .promo-box-footer .btn:hover {
    background: #d4ff33 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(200, 255, 0, 0.3) !important;
}

/* Input group styling */
.input-group {
    display: flex !important;
    align-items: stretch !important;
}

.input-group .form-control {
    height: 50px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--wf-white) !important;
    border-radius: var(--wf-radius) 0 0 var(--wf-radius) !important;
}

.input-group .input-group-append .btn,
.input-group-btn .btn {
    background: var(--wf-lime) !important;
    color: var(--wf-midnight) !important;
    border: none !important;
    border-radius: 0 var(--wf-radius) var(--wf-radius) 0 !important;
    height: 50px !important;
    font-weight: 700 !important;
}

/* Override for domain register panel - buttons get full border-radius */
.panel-domain-register .input-group-btn .btn,
.panel-domain-register .input-group-append .btn {
    border-radius: var(--wf-radius-sm) !important;
    overflow: visible !important;
}

/* Domain results styling */
.domain-lookup-result,
.domain-result,
.domain-available,
.domain-unavailable {
    padding: 1rem !important;
    border-radius: var(--wf-radius) !important;
    margin-top: 1rem !important;
}

.domain-available {
    background: rgba(200, 255, 0, 0.1) !important;
    border: 1px solid rgba(200, 255, 0, 0.3) !important;
    color: var(--wf-lime) !important;
}

.domain-unavailable {
    background: rgba(255, 100, 100, 0.1) !important;
    border: 1px solid rgba(255, 100, 100, 0.3) !important;
    color: #ff6b6b !important;
}

/* Domain result buttons container - add spacing */
.domain-available .btn-group,
.domain-result .btn-group,
.domain-lookup-result .btn-group,
.spotlight-result .btn-group {
    display: flex !important;
    gap: 0.5rem !important;
}

/* Remove button - glass outline style instead of green */
.btn-remove-domain,
.btn-group-remove .btn,
.btn-group .btn-remove-domain,
.domain-available .btn-remove,
.domain-result .btn-remove,
.spotlight-result .btn-remove,
.btn-group .btn[data-action="remove"],
.btn-group .btn:has(i.lm-trash),
.btn-group .btn:has(i.fa-trash),
.btn-group .btn:has(i.fa-times) {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: var(--wf-radius) !important;
    margin-left: 0.5rem !important;
}

.btn-remove-domain:hover,
.btn-group-remove .btn.btn-remove-domain:hover,
.btn-group .btn-remove-domain:hover,
.domain-available .btn-remove:hover,
.domain-result .btn-remove:hover,
.spotlight-result .btn-remove:hover,
.btn-group .btn[data-action="remove"]:hover,
.btn-group .btn:has(i.lm-trash):hover,
.btn-group .btn:has(i.fa-trash):hover,
.btn-group .btn:has(i.fa-times):hover {
    background: rgba(255, 100, 100, 0.15) !important;
    border-color: rgba(255, 100, 100, 0.4) !important;
    color: #ff6b6b !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Add to Cart button - ensure proper hover state */
.btn-add-to-cart:hover,
.btn-group .btn-add-to-cart:hover,
.btn-group-remove .btn-add-to-cart:hover,
.spotlight-result .btn-primary:hover {
    background: var(--wf-lime-hover) !important;
    color: var(--wf-midnight) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Form card/panel in domain config */
.order-form-card,
.card.order-card,
.main-content .card {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--wf-radius-lg) !important;
}

/* Transfer domain input styling */
.transfer-domain input[type="text"],
input[name="transferdomain"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--wf-radius) !important;
    color: var(--wf-white) !important;
    padding: 0.875rem 1.25rem !important;
    height: 50px !important;
}

/* Existing domain input */
input[name="owneddomain"],
input[name="existingdomain"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--wf-radius) !important;
    color: var(--wf-white) !important;
    padding: 0.875rem 1.25rem !important;
    height: 50px !important;
}

/* Domain pricing table */
.domain-pricing-table,
.domain-tld-pricing {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: var(--wf-radius) !important;
}

.domain-pricing-table th,
.domain-tld-pricing th {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--wf-white) !important;
    padding: 1rem !important;
}

.domain-pricing-table td,
.domain-tld-pricing td {
    padding: 0.875rem 1rem !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Continue/Next button at bottom */
.order-summary .btn-primary,
.cart-continue .btn,
button.btn-order-continue {
    background: var(--wf-lime) !important;
    color: var(--wf-midnight) !important;
    border: none !important;
    border-radius: var(--wf-radius-full) !important;
    padding: 1rem 2.5rem !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}

/* ========================================
   Sticky Action Bar - Domain Count Badge
   ======================================== */

/* Domain count badge in sticky bar - lime green with proper centering */
.bottom-action-sticky .badge.badge-circle-lg,
.bottom-action-sticky #cartItemCount {
    background: var(--wf-lime) !important;
    color: var(--wf-midnight) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    width: 26px !important;
    height: 26px !important;
    line-height: 1 !important;
    border-radius: 50% !important;
}

/* ========================================
   Checkout Page Fixes
   ======================================== */

/* 1. Remove individual rounded borders from cart items */
/* CRITICAL: Remove backdrop-filter from cart panel - Safari creates a containing block
   for positioned elements when backdrop-filter is present, breaking dropdown positioning */
.panel.panel-cart {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* When dropdown is open inside cart, boost the entire cart panel z-index */
.panel.panel-cart:has(.dropdown.show),
.panel.panel-cart:has(.dropdown.open),
.panel.panel-cart:has(.bootstrap-select.open) {
    z-index: 100000 !important;
}

/* SAFARI FIX: Reset parent container z-index when cart dropdown is open */
/* This prevents stacking context issues that cause dropdown mispositioning in Safari */
.main-content:has(.panel-cart .dropdown.show),
.main-content:has(.panel-cart .dropdown.open),
.main-body:has(.panel-cart .dropdown.show),
.main-body:has(.panel-cart .dropdown.open),
.app-main:has(.panel-cart .dropdown.show),
.app-main:has(.panel-cart .dropdown.open) {
    z-index: auto !important;
}

.panel.panel-cart .panel-heading.cart-heading {
    background: rgba(255, 255, 255, 0.03) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
    padding: 1rem 1.25rem !important;
}

.panel.panel-cart .panel-body.cart-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    /* Remove backdrop-filter for Safari compatibility */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.panel.panel-cart .panel-body.cart-item:last-of-type {
    border-bottom: none !important;
}

/* Fix domain year dropdown z-index and overflow issues */
.panel.panel-cart .cart-item .bootstrap-select,
.panel.panel-cart .cart-item .btn-group,
.panel.panel-cart .cart-item .dropdown {
    position: relative !important;
}

/* The pricing dropdown container needs to be the positioning parent */
.cart-item-pricing,
.cart-item-pricing.dropdown {
    position: relative !important;
    display: inline-block !important;
}

/* CRITICAL: Hide Bootstrap's dropdown backdrop overlay - this causes the bright background issue */
.dropdown-backdrop {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Cart item dropdown menu - use absolute positioning (more reliable than fixed) */
.panel.panel-cart .cart-item .bootstrap-select .dropdown-menu,
.panel.panel-cart .cart-item .dropdown-menu,
.cart-item .dropdown-menu,
.cart-item-pricing .dropdown-menu,
.cart-item-pricing.dropdown .dropdown-menu {
    position: absolute !important;
    z-index: 999999 !important;
    transform: none !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    margin-top: 4px !important;
    background: var(--wf-midnight) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--wf-radius-sm) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

/* Ensure all parent containers don't clip dropdowns */
.view-cart-items,
.view-cart-items-table,
.cart-body,
.panel-body,
.main-content,
.order-form,
#order-standard_cart,
.panel.panel-cart .row,
.cart-item .row,
.cart-item > .row,
.prod-price,
.cart-item-price {
    overflow: visible !important;
}

/* Domain registration period dropdown - specific fix */
.domain-period,
.domain-years,
.regperiod,
[class*="period"],
.cart-item .btn-group.bootstrap-select {
    overflow: visible !important;
    position: relative !important;
    z-index: 100 !important;
}

.cart-item .btn-group.bootstrap-select.open,
.cart-item .btn-group.bootstrap-select.show {
    z-index: 99999 !important;
}

.cart-item .btn-group.bootstrap-select .dropdown-menu.show,
.cart-item .btn-group.bootstrap-select.open .dropdown-menu {
    z-index: 99999 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
}

/* Ensure order summary sidebar doesn't overlap dropdowns */
.order-summary,
.order-summary-panel,
.main-sidebar,
.sidebar {
    z-index: 10 !important;
}

/* When dropdown is open, ensure it's above everything */
.bootstrap-select.open .dropdown-menu,
.dropdown.open .dropdown-menu,
.dropdown.show .dropdown-menu,
.btn-group.open .dropdown-menu,
.show > .dropdown-menu {
    z-index: 99999 !important;
    display: block !important;
}

/* Fix: Lower z-index on elements that appear BELOW the dropdown in the DOM */
/* These were appearing above the dropdown due to stacking context */
/* Panel footer containing Empty Cart button - MUST be below cart items (z-index: 100) */
.panel.panel-cart .panel-footer {
    position: relative !important;
    z-index: 50 !important;
}

/* Elements below the cart panel */
.panel.panel-cart .cart-item-actions {
    position: relative !important;
    z-index: 1 !important;
}

/* Sections that come AFTER the cart panel - keep them low */
.panel.panel-cart + .panel,
.panel.panel-cart ~ .panel,
.panel.panel-cart ~ .section,
.promo-code,
.promotion-panel,
.panel-promotion,
.search-box,
.billing-details-form,
.panel-check,
.payment-methods-panel {
    position: relative !important;
    z-index: 1 !important;
}

/* The cart item containing the dropdown needs higher z-index when dropdown is open */
.panel.panel-cart .cart-item:has(.bootstrap-select.open),
.panel.panel-cart .cart-item:has(.dropdown.open),
.panel.panel-cart .cart-item:has(.show) {
    z-index: 9999 !important;
    position: relative !important;
}

/* Fallback for browsers without :has() support - apply to all cart items */
.panel.panel-cart .cart-item {
    position: relative !important;
    z-index: 100 !important;
}

/* The cart item containing domain pricing dropdown needs to be above footer */
.panel.panel-cart .panel-body.cart-item {
    z-index: 100 !important;
}

/* Cart item pricing dropdown container - MUST have position for z-index to work */
/* Using high specificity selectors to override Lagom defaults */
.cart-item-pricing,
.cart-item-pricing.dropdown,
div.cart-item-pricing,
div.cart-item-pricing.dropdown,
.cart-item-price .cart-item-pricing,
.prod-price .cart-item-pricing,
body .cart-item-pricing.dropdown,
body.lagom .cart-item-pricing.dropdown {
    position: relative !important;
    z-index: 9998 !important;
}

.cart-item-pricing.dropdown.show,
.cart-item-pricing.dropdown.open,
div.cart-item-pricing.dropdown.show,
body .cart-item-pricing.dropdown.show,
body.lagom .cart-item-pricing.dropdown.show {
    z-index: 99999 !important;
    position: relative !important;
}

/* Bootstrap-select specific fixes */
.bootstrap-select.open,
.bootstrap-select.show {
    z-index: 99999 !important;
}

.bootstrap-select > .dropdown-menu {
    z-index: 99999 !important;
}

/* 2. Fix domain year selector dropdown (prevent bright background) */
.dropdown-menu,
.bootstrap-select .dropdown-menu,
select.form-control + .dropdown-menu,
.btn-group.bootstrap-select .dropdown-menu {
    background: var(--wf-midnight) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--wf-radius) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    z-index: 9999 !important;
    position: absolute !important;
}

/* Ensure dropdown container has proper stacking */
.bootstrap-select,
.btn-group.bootstrap-select,
.dropdown {
    position: relative !important;
}

.bootstrap-select.open,
.btn-group.bootstrap-select.open,
.dropdown.open,
.dropdown.show {
    z-index: 9998 !important;
}

.dropdown-menu > li > a,
.bootstrap-select .dropdown-menu > li > a,
.dropdown-menu .dropdown-item {
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 0.625rem 1rem !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.bootstrap-select .dropdown-menu > li > a:hover,
.dropdown-menu .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--wf-white) !important;
}

.dropdown-menu > li.selected > a,
.dropdown-menu > li.active > a,
.bootstrap-select .dropdown-menu > li.selected > a {
    background: var(--wf-lime) !important;
    color: var(--wf-midnight) !important;
}

/* Domain period selector specific */
.domain-period-selector .dropdown-toggle,
.bootstrap-select .btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--wf-white) !important;
}

/* International phone input dropdown */
.intl-tel-input .country-list {
    background: var(--wf-midnight) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--wf-radius) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.intl-tel-input .country-list .country {
    color: rgba(255, 255, 255, 0.8) !important;
}

.intl-tel-input .country-list .country:hover,
.intl-tel-input .country-list .country.highlight {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--wf-white) !important;
}

/* Native select element styling (prevent bright backgrounds) */
select.form-control,
select.custom-select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--wf-white) !important;
}

select.form-control option,
select.custom-select option {
    background: var(--wf-midnight) !important;
    color: var(--wf-white) !important;
}

/* 3. Fix borders around Existing Customer Login and Create New Account */
/* Using high specificity to override Lagom defaults */
body .panel.panel-check,
body.lagom .panel.panel-check,
.order-form .panel.panel-check,
.main-body .panel.panel-check {
    background: rgba(15, 23, 42, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--wf-radius) !important;
    margin-bottom: 0.75rem !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

body .panel.panel-check .panel-heading,
body .panel.panel-check .panel-heading.check,
body.lagom .panel.panel-check .panel-heading,
.order-form .panel.panel-check .panel-heading {
    background: rgba(15, 23, 42, 1) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 1rem 1.25rem !important;
}

body .panel.panel-check.checked,
body.lagom .panel.panel-check.checked,
.order-form .panel.panel-check.checked {
    background: rgba(15, 23, 42, 1) !important;
    border-color: var(--wf-lime) !important;
}

body .panel.panel-check.checked .panel-heading,
body.lagom .panel.panel-check.checked .panel-heading {
    background: rgba(15, 23, 42, 1) !important;
}

body .panel.panel-check .panel-body,
body.lagom .panel.panel-check .panel-body,
.order-form .panel.panel-check .panel-body {
    background: rgba(15, 23, 42, 1) !important;
    border: none !important;
    padding: 1.5rem !important;
}

/* 4. Make password strength indicator more visible */
#passwordStrengthBar {
    display: block !important;
    height: 6px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px !important;
    margin-top: 0.5rem !important;
    overflow: hidden !important;
}

#passwordStrengthBar .progress-bar {
    height: 100% !important;
    border-radius: 3px !important;
    transition: width 0.3s ease, background-color 0.3s ease !important;
}

/* Password strength colors */
#passwordStrengthBar .progress-bar[style*="width: 0"],
#passwordStrengthBar .progress-bar[aria-valuenow="0"] {
    background: rgba(255, 255, 255, 0.2) !important;
}

#passwordStrengthBar .progress-bar.bg-danger,
#passwordStrengthBar .progress-bar[style*="width: 25"] {
    background: #ef4444 !important;
}

#passwordStrengthBar .progress-bar.bg-warning,
#passwordStrengthBar .progress-bar[style*="width: 50"] {
    background: #f59e0b !important;
}

#passwordStrengthBar .progress-bar.bg-info,
#passwordStrengthBar .progress-bar[style*="width: 75"] {
    background: #3b82f6 !important;
}

#passwordStrengthBar .progress-bar.bg-success,
#passwordStrengthBar .progress-bar[style*="width: 100"] {
    background: var(--wf-lime) !important;
}

/* Password strength text */
#passwordStrengthTextLabel,
.password-strength-text {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.75rem !important;
    margin-top: 0.25rem !important;
}

/* 5. Fix borders around payment methods (uses same .panel-check styles above) */
/* Payment method icon */
.panel.panel-check .panel-heading img {
    max-height: 24px !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.7 !important;
}

.panel.panel-check.checked .panel-heading img {
    opacity: 1 !important;
}

/* 6. Hide duplicate Complete Order button */
button.btn-primary.btn-lg[class*="hidden"]:not(.spinner-on-click),
.order-summary + button.btn-primary.btn-lg {
    display: none !important;
}

/* Keep only the styled Complete Order button */
button.btn-primary.btn-lg.disable-on-click.spinner-on-click {
    display: inline-flex !important;
    background: var(--wf-lime) !important;
    color: var(--wf-midnight) !important;
    border: none !important;
    border-radius: var(--wf-radius-full) !important;
    padding: 1rem 2rem !important;
    font-weight: 700 !important;
    gap: 0.5rem !important;
    align-items: center !important;
}

/* 7. Fix Checkout button rounded corners */
.btn-checkout,
button.btn-checkout,
.order-summary .btn-checkout,
.order-summary button.btn-checkout,
body .btn.btn-checkout,
body button.btn.btn-checkout,
body.lagom .btn-checkout,
body.lagom button.btn-checkout,
.page-viewcart .btn-checkout,
.page-viewcart button.btn-checkout {
    border-radius: 9999px !important;
    background: var(--wf-lime) !important;
    color: var(--wf-midnight) !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 0.875rem 1.5rem !important;
}

.btn-checkout:hover,
button.btn-checkout:hover {
    background: var(--wf-lime-hover) !important;
    color: var(--wf-midnight) !important;
    transform: translateY(-1px) !important;
}

/* Disabled checkout button */
.btn-checkout:disabled,
button.btn-checkout:disabled,
.btn-checkout.disabled {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Complete Order button - ensure rounded */
button.btn-primary.btn-lg.disable-on-click,
body.lagom button.btn-primary.btn-lg,
.page-viewcart button.btn-primary.btn-lg,
body .billing-details-form ~ button.btn-primary.btn-lg {
    border-radius: 9999px !important;
    background: var(--wf-lime) !important;
    color: var(--wf-midnight) !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 1rem 2rem !important;
}

/* Change spotlight TLD label text to white */
.spotlight .tld-label {
	color: white;
}