/* Cloud Modern - High-Tech Corporate Design System */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
    /* Brand Colors - Sharp & Modern */
    --brand: #6366f1;
    --brand-press: #4f46e5;
    --brand-secondary: #06b6d4;
    --brand-light: rgba(99, 102, 241, 0.1);
    --brand-dark: #0f172a;
    --brand-glow: rgba(99, 102, 241, 0.4);
    
    /* Background Colors */
    --bg: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-gradient: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    
    /* Text Colors */
    --text: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-light: rgba(15, 23, 42, 0.7);
    
    /* Surface & Borders - Sharp */
    --surface: #ffffff;
    --border: rgba(15, 23, 42, 0.1);
    --border-light: rgba(15, 23, 42, 0.05);
    --border-sharp: rgba(99, 102, 241, 0.2);
    
    /* Shadows - Sharp & Modern */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.24);
    --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.1), 0 2px 4px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.1), 0 4px 6px rgba(15, 23, 42, 0.05);
    --shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.1), 0 10px 10px rgba(15, 23, 42, 0.04);
    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
    
    /* Spacing System (Fluid) */
    --gap: clamp(12px, 1vw, 24px);
    --gap-sm: clamp(8px, 0.75vw, 16px);
    --gap-md: clamp(16px, 1.5vw, 32px);
    --gap-lg: clamp(24px, 2vw, 48px);
    --gap-xl: clamp(32px, 3vw, 64px);
    
    /* Legacy Support */
    --cloud-primary: var(--brand);
    --cloud-secondary: var(--brand-secondary);
    --cloud-accent-one: #fdf2ff;
    --cloud-accent-two: #ecfeff;
    --cloud-dark: var(--brand-dark);
    --cloud-surface: var(--surface);
    --cloud-border: var(--border);
    --cloud-shadow: var(--shadow-lg);
}

/* Prevent flickering on mobile scroll and optimize fonts */
* {
    font-display: swap;
}

/* Optimize transforms for better performance - prevent flickering */
.cloud-card,
.cloud-account-card,
.cloud-quicklinks .cloud-quicklink,
.btn,
.navbar .nav-link {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

/* Typography System - Sharp & High-Tech */
* {
    font-display: swap;
}

body {
    font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.125rem);
    line-height: 1.6;
    background: var(--bg-gradient);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1;
    letter-spacing: -0.01em;
}

/* Heading Hierarchy - Sharp & Bold */
h1, .h1 {
    font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    margin-block: clamp(1rem, 1vw, 1.5rem) clamp(0.75rem, 0.75vw, 1rem);
    color: var(--brand-dark);
    letter-spacing: -0.02em;
}

h2, .h2 {
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    margin-block: clamp(0.875rem, 0.875vw, 1.25rem) clamp(0.625rem, 0.625vw, 0.875rem);
    color: var(--brand-dark);
    letter-spacing: -0.015em;
}

h3, .h3 {
    font-size: clamp(1.25rem, 1.125rem + 0.75vw, 1.75rem);
    font-weight: 700;
    line-height: 1.3;
    margin-block: clamp(0.75rem, 0.75vw, 1rem) clamp(0.5rem, 0.5vw, 0.75rem);
    color: var(--brand-dark);
    letter-spacing: -0.01em;
}

h4, .h4 {
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
    font-weight: 600;
    line-height: 1.4;
    margin-block: clamp(0.625rem, 0.625vw, 0.875rem) clamp(0.5rem, 0.5vw, 0.625rem);
    letter-spacing: -0.01em;
}

h5, .h5 {
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
    font-weight: 600;
    line-height: 1.5;
    margin-block: clamp(0.5rem, 0.5vw, 0.75rem) clamp(0.375rem, 0.375vw, 0.5rem);
}

h6, .h6 {
    font-size: clamp(0.875rem, 0.85rem + 0.3vw, 1.125rem);
    font-weight: 600;
    line-height: 1.5;
    margin-block: clamp(0.5rem, 0.5vw, 0.625rem) clamp(0.375rem, 0.375vw, 0.5rem);
}

p {
    margin-block: clamp(0.75rem, 0.75vw, 1rem);
    color: var(--text-secondary);
    letter-spacing: -0.005em;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Links - Corporate Style */
a {
    color: var(--brand);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--brand-press);
    text-decoration: none;
}

a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: 2px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--cloud-primary), var(--cloud-secondary));
    border: none;
    box-shadow: 0 8px 22px rgba(14, 165, 233, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(14, 165, 233, 0.45);
}

.btn-outline-light {
    border: 2px solid var(--brand) !important;
    color: var(--brand) !important;
    background: transparent !important;
}

.btn-outline-light:hover {
    background: var(--brand) !important;
    color: #ffffff !important;
    border-color: var(--brand) !important;
}

/* Enhanced Navbar Styling - Sharp High-Tech White */
.top-nav,
.navbar {
    background: #ffffff !important;
    border: none;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1), 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.3s ease;
    border-bottom: 1px solid var(--border-light);
}

/* Main navbar wrapper improvements */
.main-navbar-wrapper {
    background: transparent;
    padding: 0.5rem 0;
}

/* Navbar brand styling - Larger logo */
.navbar-brand {
    font-weight: 600;
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
    transition: opacity 0.2s ease;
    padding: 0.5rem 0;
}

.navbar-brand:hover {
    opacity: 0.9;
}

.navbar-brand .logo-img {
    max-height: clamp(140px, 16vw, 180px) !important;
    height: auto !important;
    width: auto !important;
    max-width: 1600px !important;
    width: auto !important;
    transition: transform 0.2s ease;
}

.navbar-brand img,
.navbar-brand .logo-img,
.navbar-brand img.logo-img {
    max-width: 1600px !important;
    width: auto !important;
    max-height: clamp(140px, 16vw, 180px) !important;
    height: auto !important;
}

.navbar-brand:hover .logo-img {
    transform: scale(1.05);
}

/* Nav link improvements - Sharp High-Tech */
.navbar .nav-link {
    color: var(--text) !important;
    font-weight: 600;
    padding: 0.5rem 1rem !important;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    margin: 0 0.25rem;
    letter-spacing: -0.01em;
}

.navbar .nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand), var(--brand-secondary));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
    border-radius: 2px;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--brand) !important;
    background: rgba(99, 102, 241, 0.08);
    transform: translateY(-1px);
}

.navbar .nav-link:hover::before {
    width: 80%;
}

/* Active nav link state */
.navbar .nav-link.active,
.navbar .nav-item.active .nav-link {
    color: var(--brand) !important;
    background: rgba(99, 102, 241, 0.12);
    font-weight: 700;
}

.navbar .nav-link.active::before {
    width: 80%;
}

/* Dropdown menu enhancements - Sharp High-Tech */
.navbar .dropdown-menu {
    border-radius: 8px;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-xl);
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
}

.navbar .dropdown-menu .dropdown-item {
    padding: 0.75rem 1.5rem;
    color: var(--text);
    font-weight: 600;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0;
    letter-spacing: -0.01em;
}

.navbar .dropdown-menu .dropdown-item:first-child {
    border-radius: 8px 8px 0 0;
}

.navbar .dropdown-menu .dropdown-item:last-child {
    border-radius: 0 0 8px 8px;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    color: var(--brand) !important;
    background: rgba(99, 102, 241, 0.08);
    padding-left: 1.75rem;
    transform: translateX(4px);
}

.navbar .dropdown-menu .dropdown-item i {
    margin-right: 0.75rem;
    width: 18px;
    text-align: center;
    color: var(--brand);
}

/* Dropdown toggle arrow */
.navbar .dropdown-toggle::after {
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
}

.navbar .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* Toolbar buttons (cart, search) - Dark for white navbar */
.navbar .toolbar {
    display: flex !important;
    align-items: center !important;
    gap: clamp(0.5rem, 0.75vw, 1rem) !important;
}

.navbar .toolbar .nav-link {
    border-radius: 10px;
    padding: 0.5rem 0.75rem !important;
    color: var(--text) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Domain Search - Use default WHMCS styles */

/* Search and Transfer buttons - Move right slightly near search bar */
.navbar .toolbar .form-inline ~ .nav-link,
.navbar .toolbar .input-group.search ~ .nav-link,
.navbar .toolbar .nav-link:not(:first-child),
.navbar .form-inline ~ .nav-link,
.navbar .input-group.search ~ .nav-link {
    margin-left: clamp(1.5rem, 2vw, 2.5rem) !important;
}




/* Domain search title - use default WHMCS styling */

/* Domain search buttons - use default WHMCS styles */

.navbar .toolbar .nav-link:hover {
    background: rgba(88, 81, 236, 0.1);
    color: var(--brand) !important;
}

.navbar .toolbar .cart-btn {
    position: relative;
}

.navbar .toolbar .cart-btn .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.7rem;
    padding: 0.25rem 0.4rem;
    border-radius: 10px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Hide knowledgebase search in navbar */
.navbar .form-inline .input-group.search,
.navbar .form-inline,
.navbar .toolbar .form-inline,
.header .form-inline {
    display: none !important;
}

/* Search input styling - Force horizontal layout */
.navbar .form-inline .input-group.search {
    display: none !important;
    flex-direction: row !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    margin-right: clamp(1.5rem, 2vw, 2.5rem) !important;
    margin-left: 0 !important;
    padding: clamp(0.25rem, 0.5vw, 0.5rem) !important;
    gap: clamp(0.5rem, 0.75vw, 1rem) !important;
}

.navbar .form-inline .input-group.search .input-group-prepend {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: auto !important;
    flex-shrink: 0 !important;
}

.navbar .form-inline .input-group.search .input-group-prepend .btn {
    padding: clamp(6px, 0.75vw, 10px) clamp(10px, 1vw, 14px) !important;
    min-height: 38px !important;
    font-size: clamp(0.875rem, 0.85rem + 0.2vw, 0.95rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}



.navbar .form-inline .input-group.search .appended-form-control {
    display: block !important;
    border-radius: 0 10px 10px 0 !important;
    border: 1px solid var(--border) !important;
    border-left: none !important;
    background: rgba(88, 81, 236, 0.05) !important;
    color: var(--text) !important;
    padding: clamp(6px, 0.75vw, 10px) clamp(10px, 1vw, 14px) !important;
    font-size: clamp(0.875rem, 0.85rem + 0.2vw, 0.95rem) !important;
    min-width: 200px !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 38px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    float: none !important;
}

.navbar .form-inline .input-group.search .input-group-prepend .btn:hover {
    background: rgba(88, 81, 236, 0.2) !important;
    color: var(--brand-press) !important;
}

.navbar .form-inline .input-group.search .appended-form-control::placeholder {
    color: var(--text-muted) !important;
}

.navbar .form-inline .input-group.search .appended-form-control:focus {
    background: rgba(88, 81, 236, 0.1) !important;
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 0.2rem rgba(88, 81, 236, 0.1) !important;
    color: var(--text) !important;
    outline: none !important;
}

/* Form Inputs - Sharp High-Tech Style */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
    padding: clamp(8px, 0.75vw, 12px) clamp(12px, 1vw, 16px);
    border-radius: 6px;
    border: 1px solid var(--border);
    font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
    letter-spacing: -0.005em;
}

/* Enlarge all input fields in navbar (including chat input) */
.navbar .form-control,
.navbar input[type="text"],
.navbar input[type="email"],
.navbar input[type="password"],
.navbar input[type="number"],
.navbar input[type="tel"],
.navbar select,
.navbar textarea,
.navbar .form-inline .form-control,
.navbar .form-inline input,
.navbar .input-group .form-control,
.navbar .input-group input {
    padding: clamp(10px, 1vw, 14px) clamp(14px, 1.5vw, 18px) !important;
    min-height: 44px !important;
    font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1rem) !important;
}


.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--shadow-md);
    background: var(--surface);
}

.form-control::placeholder {
    color: var(--text-muted);
}

/* Fix all selects - allow them to expand to fit their content */
select {
    width: auto !important;
    min-width: 120px !important;
    max-width: none !important;
    display: inline-block !important;
}

select.form-control,
select.custom-select,
select.select-inline {
    width: auto !important;
    min-width: 120px !important;
    max-width: none !important;
    display: inline-block !important;
    padding-right: clamp(30px, 2.5vw, 40px) !important;
}

/* Ensure containers don't restrict select width */
.form-group select,
.input-group select,
.form-inline select,
.form-control-wrapper select {
    width: auto !important;
    max-width: none !important;
    min-width: 120px !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
}

.input-group > select {
    width: auto !important;
    max-width: none !important;
    min-width: 120px !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
}

/* RTL support */
[dir="rtl"] select,
body.rtl select,
body.hebrew-lang select {
    padding-left: clamp(30px, 2.5vw, 40px) !important;
    padding-right: clamp(12px, 1vw, 16px) !important;
}

/* ============================================
   SELECT ELEMENTS - VERTICAL ALIGNMENT FIX
   Fixes text clipping and misalignment issues
   ============================================ */

/* Global fix for all select elements - prevents text clipping and misalignment */
select.form-control,
.form-control.select-inline.custom-select,
select.custom-select,
select.select-inline,
select.form-control.select-inline,
#inputBillingcycle,
select {
    /* Box model - ensure padding is included in height calculation */
    box-sizing: border-box !important;
    
    /* Line height - set to match font size to prevent vertical clipping */
    /* Using 1.4 provides comfortable spacing without cutting text */
    line-height: 1.4 !important;
    
    /* Height - remove fixed heights, let content determine height naturally */
    height: auto !important;
    min-height: auto !important;
    
    /* Padding - balanced vertical padding for proper text centering */
    /* Top and bottom padding should be equal for vertical centering */
    padding-top: clamp(8px, 0.75vw, 12px) !important;
    padding-bottom: clamp(8px, 0.75vw, 12px) !important;
    padding-left: clamp(12px, 1vw, 16px) !important;
    padding-right: clamp(30px, 2.5vw, 40px) !important;
    
    /* Vertical alignment - ensure text is centered */
    vertical-align: middle !important;
    
    /* Appearance - neutralize native OS styling for consistent cross-browser look */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    /* Custom dropdown arrow using background-image (since we removed native appearance) */
    /* Using SVG data URI for a clean dropdown arrow */
    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='%230f172a' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right clamp(12px, 1vw, 16px) center !important;
    background-size: 12px 12px !important;
    
    /* Ensure text is fully visible */
    overflow: visible !important;
    
    /* Font size - inherit from form-control base */
    font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1rem) !important;
}

/* Focus state - maintain proper alignment */
select.form-control:focus,
.form-control.select-inline.custom-select:focus,
select.custom-select:focus,
select.select-inline:focus,
#inputBillingcycle:focus,
select:focus {
    /* Keep the same padding and line-height on focus */
    padding-top: clamp(8px, 0.75vw, 12px) !important;
    padding-bottom: clamp(8px, 0.75vw, 12px) !important;
    line-height: 1.4 !important;
    height: auto !important;
}

/* Navbar selects - maintain larger size but fix alignment */
.navbar select.form-control,
.navbar .form-control.select-inline.custom-select,
.navbar select.custom-select,
.navbar select.select-inline {
    padding-top: clamp(10px, 1vw, 14px) !important;
    padding-bottom: clamp(10px, 1vw, 14px) !important;
    line-height: 1.4 !important;
    /* Keep min-height for navbar but ensure text fits */
    min-height: 44px !important;
    height: auto !important;
}

/* Mobile responsive - adjust padding for smaller screens */
@media (max-width: 767.98px) {
    select.form-control,
    .form-control.select-inline.custom-select,
    select.custom-select,
    select.select-inline,
    #inputBillingcycle,
    select {
        padding-top: clamp(6px, 1vw, 8px) !important;
        padding-bottom: clamp(6px, 1vw, 8px) !important;
        padding-left: clamp(10px, 1.5vw, 12px) !important;
        padding-right: clamp(28px, 2.5vw, 36px) !important;
        font-size: clamp(0.8125rem, 0.85vw, 0.875rem) !important;
        line-height: 1.4 !important;
    }
}

/* RTL support - maintain proper padding for dropdown arrow */
[dir="rtl"] select.form-control,
body.rtl select.form-control,
body.hebrew-lang select.form-control,
[dir="rtl"] .form-control.select-inline.custom-select,
body.rtl .form-control.select-inline.custom-select,
body.hebrew-lang .form-control.select-inline.custom-select,
[dir="rtl"] select.custom-select,
body.rtl select.custom-select,
body.hebrew-lang select.custom-select,
[dir="rtl"] select.select-inline,
body.rtl select.select-inline,
body.hebrew-lang select.select-inline {
    padding-left: clamp(30px, 2.5vw, 40px) !important;
    padding-right: clamp(12px, 1vw, 16px) !important;
    padding-top: clamp(8px, 0.75vw, 12px) !important;
    padding-bottom: clamp(8px, 0.75vw, 12px) !important;
    line-height: 1.4 !important;
    /* Move dropdown arrow to left side in RTL */
    background-position: left clamp(12px, 1vw, 16px) center !important;
}

/* Tables - Sharp High-Tech Style */
table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--gap-md);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}

table th,
table td {
    padding: clamp(8px, 0.75vw, 12px) clamp(12px, 1vw, 16px);
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}

table th {
    font-weight: 700;
    color: var(--brand-dark);
    background: var(--bg-secondary);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    font-size: clamp(0.75rem, 0.7vw, 0.875rem);
}

table tr:hover {
    background: rgba(99, 102, 241, 0.03);
}

/* Container & Layout */
.main-container {
    padding-top: var(--gap-lg);
    /* Removed content-visibility to prevent flickering on mobile */
}

/* Only apply to cloud-modern specific sections */
.cloud-section {
    /* Removed content-visibility to prevent flickering on mobile */
    padding-block: var(--gap-lg);
}

/* Don't override Bootstrap container - only add spacing where needed */
.cloud-section .container {
    padding-inline: var(--gap-md);
}

.cloud-hero {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(6, 182, 212, 0.03)), var(--surface);
    border-radius: 16px;
    padding: clamp(2rem, 3vw, 4rem) clamp(1.5rem, 2vw, 3rem);
    box-shadow: var(--shadow-lg);
    margin-top: var(--gap-md);
    border: 1px solid var(--border-light);
    position: relative;
    overflow: hidden;
}

.cloud-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.08), transparent 70%);
    pointer-events: none;
}

.cloud-hero-badge {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(6, 182, 212, 0.1));
    color: var(--brand);
    font-weight: 700;
    letter-spacing: 0.05em;
    border: 1px solid rgba(99, 102, 241, 0.2);
    padding: clamp(0.375rem, 0.5vw, 0.5rem) clamp(0.75rem, 1vw, 1rem);
    border-radius: 6px;
    font-size: clamp(0.75rem, 0.7vw, 0.875rem);
    text-transform: uppercase;
}

.cloud-hero-title {
    font-weight: 700;
    font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
    color: var(--brand-dark);
    margin-block: clamp(0.75rem, 0.75vw, 1rem) clamp(0.5rem, 0.5vw, 0.75rem);
}

/* Clean & Modern service highlights in hero title */
.cloud-hero-title .hero-intro {
    font-weight: 700;
    color: var(--brand-dark);
}

.cloud-hero-title .service-highlight {
    font-weight: 600;
    color: var(--brand);
    white-space: nowrap;
}

.cloud-hero-subtitle {
    max-width: 540px;
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.125rem);
    color: var(--text-secondary);
    margin-block: clamp(0.75rem, 0.75vw, 1rem);
}

/* Enhanced Login/Register Links - Sharp High-Tech with spacing */
.cloud-hero-link {
    font-weight: 600;
    color: var(--text);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: clamp(0.5rem, 0.75vw, 0.75rem) clamp(1rem, 1.5vw, 1.5rem);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.15);
    letter-spacing: -0.01em;
    box-shadow: var(--shadow-sm);
}

/* Add spacing above login/register links */
.cloud-hero .mt-2 {
    margin-top: clamp(1.5rem, 2vw, 2rem) !important;
}

.cloud-hero-link:hover {
    color: var(--brand);
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--brand);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.cloud-hero-link:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: 6px;
}

.cloud-hero-link i {
    font-size: 0.9em;
    color: var(--brand);
}

/* Enhanced "View Cloud Plans" button - Sharp High-Tech Desktop */
@media (min-width: 992px) {
    .cloud-hero-cta {
        flex-wrap: nowrap !important;
    }

    .cloud-hero-cta .btn-primary {
        padding: clamp(10px, 1vw, 14px) clamp(20px, 2vw, 28px) !important;
        font-size: clamp(0.9375rem, 0.95vw, 1.0625rem) !important;
        font-weight: 700 !important;
        letter-spacing: -0.01em !important;
        box-shadow: var(--shadow-md), var(--shadow-glow) !important;
        position: relative !important;
        overflow: hidden !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        white-space: nowrap !important;
        margin: 0 !important;
        border-radius: 6px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .cloud-hero-cta .btn-primary::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .cloud-hero-cta .btn-primary:hover::before {
        left: 100%;
    }

    .cloud-hero-cta .btn-primary:hover {
        transform: translateY(-2px) !important;
        box-shadow: var(--shadow-lg), 0 0 30px rgba(99, 102, 241, 0.5) !important;
    }

    .cloud-hero-cta .btn-outline-light {
        padding: clamp(10px, 1vw, 14px) clamp(20px, 2vw, 28px) !important;
        font-size: clamp(0.9375rem, 0.95vw, 1.0625rem) !important;
        font-weight: 700 !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        white-space: nowrap !important;
        margin: 0 !important;
        border-radius: 6px !important;
        letter-spacing: -0.01em !important;
    }
}

.cloud-hero-cta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: clamp(0.75rem, 1vw, 1rem) !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.cloud-hero-cta .btn {
    border-radius: 6px !important;
    padding-left: clamp(1rem, 1.5vw, 1.5rem) !important;
    padding-right: clamp(1rem, 1.5vw, 1.5rem) !important;
    width: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin: 0 !important;
    display: inline-flex !important;
}

.cloud-hero-visual {
    position: relative;
    width: 280px;
    height: 280px;
}

.cloud-hero-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.55), rgba(88, 81, 236, 0.35));
    filter: blur(6px);
    animation: cloudGlow 6s ease-in-out infinite;
}

.cloud-hero-orb {
    position: absolute;
    inset: 35px;
    background: linear-gradient(135deg, rgba(88, 81, 236, 0.92), rgba(14, 165, 233, 0.92));
    border-radius: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 3rem;
    backdrop-filter: blur(6px);
    box-shadow: 0 16px 45px rgba(88, 81, 236, 0.45);
}

@keyframes cloudGlow {
    0%,
    100% {
        transform: scale(0.96);
        opacity: 0.85;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}


.cloud-section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--gap-lg) auto;
}

.cloud-section-header h2 {
    font-weight: 700;
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
    color: var(--brand-dark);
    margin-block: 0 clamp(0.75rem, 0.75vw, 1rem);
}

.cloud-section-header p {
    color: var(--text-muted);
    margin: 0;
    font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
}

/* ============================================
   RTL (Right-to-Left) SUPPORT FOR HEBREW
   ============================================ */

/* Hebrew Language Support - Dynamic RTL */
[dir="rtl"],
html[lang="he"],
html[lang="hebrew"],
body[dir="rtl"],
body.rtl,
body.hebrew-lang {
    direction: rtl !important;
    text-align: right !important;
}

/* Force RTL for main containers */
[dir="rtl"] .container,
body.rtl .container,
body.hebrew-lang .container {
    direction: rtl !important;
}

/* RTL - Hero Section */
[dir="rtl"] .cloud-hero-badge,
html[lang="he"] .cloud-hero-badge,
html[lang="hebrew"] .cloud-hero-badge,
body.rtl .cloud-hero-badge,
body.hebrew-lang .cloud-hero-badge {
    direction: rtl;
}

[dir="rtl"] .cloud-hero-title,
html[lang="he"] .cloud-hero-title,
html[lang="hebrew"] .cloud-hero-title,
body.rtl .cloud-hero-title,
body.hebrew-lang .cloud-hero-title {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .cloud-hero-subtitle,
html[lang="he"] .cloud-hero-subtitle,
html[lang="hebrew"] .cloud-hero-subtitle,
body.rtl .cloud-hero-subtitle,
body.hebrew-lang .cloud-hero-subtitle {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .cloud-hero-cta,
html[lang="he"] .cloud-hero-cta,
html[lang="hebrew"] .cloud-hero-cta,
body.rtl .cloud-hero-cta,
body.hebrew-lang .cloud-hero-cta {
    direction: rtl;
    justify-content: flex-start;
}

/* RTL - Section Headers */
[dir="rtl"] .cloud-section-header,
html[lang="he"] .cloud-section-header,
html[lang="hebrew"] .cloud-section-header,
body.rtl .cloud-section-header,
body.hebrew-lang .cloud-section-header {
    direction: rtl;
    text-align: center;
}

[dir="rtl"] .cloud-section-header h2,
html[lang="he"] .cloud-section-header h2,
html[lang="hebrew"] .cloud-section-header h2,
body.rtl .cloud-section-header h2,
body.hebrew-lang .cloud-section-header h2,
[dir="rtl"] .cloud-section-header p,
html[lang="he"] .cloud-section-header p,
html[lang="hebrew"] .cloud-section-header p,
body.rtl .cloud-section-header p,
body.hebrew-lang .cloud-section-header p {
    direction: rtl;
}

/* RTL - Product Cards */
[dir="rtl"] .product-card,
html[lang="he"] .product-card,
html[lang="hebrew"] .product-card,
body.rtl .product-card,
body.hebrew-lang .product-card {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .product-card-title,
html[lang="he"] .product-card-title,
html[lang="hebrew"] .product-card-title,
body.rtl .product-card-title,
body.hebrew-lang .product-card-title {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .product-card-description,
html[lang="he"] .product-card-description,
html[lang="hebrew"] .product-card-description,
body.rtl .product-card-description,
body.hebrew-lang .product-card-description {
    direction: rtl;
    text-align: right;
}

/* RTL - Domain Hero Styling */
[dir="rtl"] .product-card-title.domain-hero-title,
html[lang="he"] .product-card-title.domain-hero-title,
html[lang="hebrew"] .product-card-title.domain-hero-title,
body.rtl .product-card-title.domain-hero-title,
body.hebrew-lang .product-card-title.domain-hero-title,
[dir="rtl"] .domain-card .product-card-title.domain-hero-title,
html[lang="he"] .domain-card .product-card-title.domain-hero-title,
html[lang="hebrew"] .domain-card .product-card-title.domain-hero-title,
body.rtl .domain-card .product-card-title.domain-hero-title,
body.hebrew-lang .domain-card .product-card-title.domain-hero-title {
    direction: rtl !important;
    text-align: center !important;
}

[dir="rtl"] .product-card-description.domain-hero-description,
html[lang="he"] .product-card-description.domain-hero-description,
html[lang="hebrew"] .product-card-description.domain-hero-description,
body.rtl .product-card-description.domain-hero-description,
body.hebrew-lang .product-card-description.domain-hero-description,
[dir="rtl"] .domain-card .product-card-description.domain-hero-description,
html[lang="he"] .domain-card .product-card-description.domain-hero-description,
html[lang="hebrew"] .domain-card .product-card-description.domain-hero-description,
body.rtl .domain-card .product-card-description.domain-hero-description,
body.hebrew-lang .domain-card .product-card-description.domain-hero-description {
    direction: rtl !important;
    text-align: center !important;
}

/* RTL - Buttons */
[dir="rtl"] .btn-premium,
html[lang="he"] .btn-premium,
html[lang="hebrew"] .btn-premium,
body.rtl .btn-premium,
body.hebrew-lang .btn-premium,
[dir="rtl"] .btn-domain-gradient,
html[lang="he"] .btn-domain-gradient,
html[lang="hebrew"] .btn-domain-gradient,
body.rtl .btn-domain-gradient,
body.hebrew-lang .btn-domain-gradient {
    direction: rtl;
    flex-direction: row-reverse;
}

[dir="rtl"] .btn-premium i,
html[lang="he"] .btn-premium i,
html[lang="hebrew"] .btn-premium i,
body.rtl .btn-premium i,
body.hebrew-lang .btn-premium i,
[dir="rtl"] .btn-domain-gradient i,
html[lang="he"] .btn-domain-gradient i,
html[lang="hebrew"] .btn-domain-gradient i,
body.rtl .btn-domain-gradient i,
body.hebrew-lang .btn-domain-gradient i {
    transform: scaleX(-1);
}

[dir="rtl"] .btn-premium:hover i,
html[lang="he"] .btn-premium:hover i,
html[lang="hebrew"] .btn-premium:hover i,
body.rtl .btn-premium:hover i,
body.hebrew-lang .btn-premium:hover i,
[dir="rtl"] .btn-domain-gradient:hover i,
html[lang="he"] .btn-domain-gradient:hover i,
html[lang="hebrew"] .btn-domain-gradient:hover i,
body.rtl .btn-domain-gradient:hover i,
body.hebrew-lang .btn-domain-gradient:hover i {
    transform: scaleX(-1) translateX(4px);
}

/* RTL - Section Badge */
[dir="rtl"] .section-badge,
html[lang="he"] .section-badge,
html[lang="hebrew"] .section-badge,
body.rtl .section-badge,
body.hebrew-lang .section-badge {
    direction: rtl;
}

/* RTL - Cloud CTA */
[dir="rtl"] .cloud-cta-card,
html[lang="he"] .cloud-cta-card,
html[lang="hebrew"] .cloud-cta-card,
body.rtl .cloud-cta-card,
body.hebrew-lang .cloud-cta-card {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .cloud-cta-card h2,
html[lang="he"] .cloud-cta-card h2,
html[lang="hebrew"] .cloud-cta-card h2,
body.rtl .cloud-cta-card h2,
body.hebrew-lang .cloud-cta-card h2,
[dir="rtl"] .cloud-cta-card p,
html[lang="he"] .cloud-cta-card p,
html[lang="hebrew"] .cloud-cta-card p,
body.rtl .cloud-cta-card p,
body.hebrew-lang .cloud-cta-card p {
    direction: rtl;
    text-align: right;
}

/* RTL - Cloud Cards */
[dir="rtl"] .cloud-card,
html[lang="he"] .cloud-card,
html[lang="hebrew"] .cloud-card,
body.rtl .cloud-card,
body.hebrew-lang .cloud-card,
[dir="rtl"] .cloud-account-card,
html[lang="he"] .cloud-account-card,
html[lang="hebrew"] .cloud-account-card,
body.rtl .cloud-account-card,
body.hebrew-lang .cloud-account-card,
[dir="rtl"] .cloud-quicklink,
html[lang="he"] .cloud-quicklink,
html[lang="hebrew"] .cloud-quicklink,
body.rtl .cloud-quicklink,
body.hebrew-lang .cloud-quicklink {
    direction: rtl;
    text-align: right;
}

/* RTL - Hero Link */
[dir="rtl"] .cloud-hero-link,
html[lang="he"] .cloud-hero-link,
html[lang="hebrew"] .cloud-hero-link,
body.rtl .cloud-hero-link,
body.hebrew-lang .cloud-hero-link {
    direction: rtl;
}

/* RTL - Statistics Cards Fix - Only move .stat and .title text, not the container */
/* Fix for statistics cards - move only the text elements (.stat and .title) away from icons */
[dir="rtl"] .stat,
[dir="rtl"] .title,
html[lang="he"] .stat,
html[lang="he"] .title,
html[lang="hebrew"] .stat,
html[lang="hebrew"] .title,
body.rtl .stat,
body.rtl .title,
body.hebrew-lang .stat,
body.hebrew-lang .title {
    margin-right: 4.5rem !important;
    margin-left: 0 !important;
}

/* RTL - EXCEPTIONS: Keep LTR only for specific elements that must be LTR */
/* Input fields for domains and emails should stay LTR */
[dir="rtl"] input[type="email"],
body.rtl input[type="email"],
body.hebrew-lang input[type="email"],
[dir="rtl"] input[type="url"],
body.rtl input[type="url"],
body.hebrew-lang input[type="url"] {
    direction: ltr !important;
    text-align: left !important;
}

/* ============================================
   PREMIUM DOMAIN SEARCH SECTION BACKGROUND
   ============================================ */

/* Premium background for domain search section */
.home-domain-search {
    background: linear-gradient(135deg, 
        rgba(99, 102, 241, 0.03) 0%, 
        rgba(139, 92, 246, 0.04) 25%,
        rgba(6, 182, 212, 0.03) 50%,
        rgba(99, 102, 241, 0.04) 75%,
        rgba(139, 92, 246, 0.03) 100%) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Add animated gradient overlay */
.home-domain-search::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: radial-gradient(
        circle at 30% 50%, 
        rgba(99, 102, 241, 0.08) 0%, 
        transparent 50%
    ),
    radial-gradient(
        circle at 70% 50%, 
        rgba(6, 182, 212, 0.06) 0%, 
        transparent 50%
    ) !important;
    animation: domainSearchGlow 15s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Glow animation */
@keyframes domainSearchGlow {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) !important;
        opacity: 0.6 !important;
    }
    33% {
        transform: translate(10%, -10%) rotate(120deg) !important;
        opacity: 0.8 !important;
    }
    66% {
        transform: translate(-10%, 10%) rotate(240deg) !important;
        opacity: 0.7 !important;
    }
}

/* Ensure content is above the background */
.home-domain-search > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Domain search should always be LTR */
[dir="rtl"] #domainSearchForm,
body.rtl #domainSearchForm,
body.hebrew-lang #domainSearchForm,
[dir="rtl"] #frmDomainHomepage,
body.rtl #frmDomainHomepage,
body.hebrew-lang #frmDomainHomepage,
[dir="rtl"] .domain-search,
body.rtl .domain-search,
body.hebrew-lang .domain-search,
[dir="rtl"] .home-domain-search,
body.rtl .home-domain-search,
body.hebrew-lang .home-domain-search,
[dir="rtl"] .home-domain-search *,
body.rtl .home-domain-search *,
body.hebrew-lang .home-domain-search *,
[dir="rtl"] .input-group-wrapper,
body.rtl .input-group-wrapper,
body.hebrew-lang .input-group-wrapper {
    direction: ltr !important;
    text-align: left !important;
}

/* Premium Domain Search Title - Modern & Clean Enterprise Design */
/* Only apply when class domain-search-premium-title is present (added by JS) */
.home-domain-search h2.domain-search-premium-title {
    text-align: center !important;
    width: 100% !important;
    max-width: 900px !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(2rem, 3.5vw, 3.25rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: clamp(1.25rem, 2vw, 2rem) !important;
    margin-top: clamp(0.75rem, 1.5vw, 1.25rem) !important;
    padding: 0 clamp(1rem, 2vw, 2rem) !important;
    position: relative;
    
    /* Modern clean gradient - subtle and professional */
    background: linear-gradient(135deg, 
        #0f172a 0%, 
        #1e293b 25%, 
        #334155 50%, 
        #475569 75%, 
        #64748b 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-size: 200% 200% !important;
    
    /* Subtle shadow for depth - very clean */
    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.1)) !important;
    
    /* Smooth gradient animation */
    animation: domainTitleGradient 8s ease-in-out infinite !important;
    
    text-transform: none !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Modern gradient animation - subtle and smooth */
@keyframes domainTitleGradient {
    0%, 100% {
        background-position: 0% 50% !important;
        filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.1)) !important;
    }
    50% {
        background-position: 100% 50% !important;
        filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.15)) !important;
    }
}

/* Add subtle underline accent for modern touch */
.home-domain-search h2.domain-search-premium-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #6366f1, transparent);
    border-radius: 2px;
    opacity: 0.6;
    animation: underlineGlow 3s ease-in-out infinite;
}

@keyframes underlineGlow {
    0%, 100% {
        opacity: 0.4;
        width: 60px;
    }
    50% {
        opacity: 0.8;
        width: 80px;
    }
}

/* Explicitly exclude CAPTCHA from premium styling */
.home-domain-search .captcha h2,
.home-domain-search [id*="captcha"] h2,
.home-domain-search [class*="captcha"] h2,
.home-domain-search h2:not(.domain-search-premium-title) {
    font-size: inherit !important;
    font-weight: inherit !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    filter: none !important;
    animation: none !important;
    color: inherit !important;
}

/* ============================================
   CAPTCHA RTL FIX - Hebrew Spacing
   ============================================ */

/* Fix CAPTCHA spacing in Hebrew (RTL) mode */
[dir="rtl"] .captcha,
html[lang="he"] .captcha,
html[lang="hebrew"] .captcha,
body.rtl .captcha,
body.hebrew-lang .captcha,
[dir="rtl"] [id*="captcha"],
body.rtl [id*="captcha"],
body.hebrew-lang [id*="captcha"],
[dir="rtl"] [class*="captcha"],
body.rtl [class*="captcha"],
body.hebrew-lang [class*="captcha"] {
    direction: rtl !important;
    text-align: right !important;
}

/* CAPTCHA container - keep elements close together */
[dir="rtl"] .captcha .form-group,
body.rtl .captcha .form-group,
body.hebrew-lang .captcha .form-group,
[dir="rtl"] [id*="captcha"] .form-group,
body.rtl [id*="captcha"] .form-group,
body.hebrew-lang [id*="captcha"] .form-group {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    gap: clamp(0.75rem, 1.5vw, 1.25rem) !important;
    flex-wrap: wrap !important;
}

/* CAPTCHA image and input should be close */
[dir="rtl"] .captcha img,
body.rtl .captcha img,
body.hebrew-lang .captcha img,
[dir="rtl"] [id*="captcha"] img,
body.rtl [id*="captcha"] img,
body.hebrew-lang [id*="captcha"] img {
    margin-left: 0 !important;
    margin-right: clamp(0.75rem, 1.5vw, 1rem) !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* CAPTCHA input field */
[dir="rtl"] .captcha input[type="text"],
body.rtl .captcha input[type="text"],
body.hebrew-lang .captcha input[type="text"],
[dir="rtl"] [id*="captcha"] input[type="text"],
body.rtl [id*="captcha"] input[type="text"],
body.hebrew-lang [id*="captcha"] input[type="text"] {
    display: inline-block !important;
    width: auto !important;
    max-width: 200px !important;
    min-width: 150px !important;
    margin-left: 0 !important;
    margin-right: clamp(0.75rem, 1.5vw, 1rem) !important;
    vertical-align: middle !important;
}

/* CAPTCHA label text */
[dir="rtl"] .captcha label,
body.rtl .captcha label,
body.hebrew-lang .captcha label,
[dir="rtl"] [id*="captcha"] label,
body.rtl [id*="captcha"] label,
body.hebrew-lang [id*="captcha"] label {
    direction: rtl !important;
    text-align: right !important;
    margin-bottom: clamp(0.5rem, 1vw, 0.75rem) !important;
    display: block !important;
    width: 100% !important;
}

/* CAPTCHA form control wrapper */
[dir="rtl"] .captcha .form-control,
body.rtl .captcha .form-control,
body.hebrew-lang .captcha .form-control,
[dir="rtl"] [id*="captcha"] .form-control,
body.rtl [id*="captcha"] .form-control,
body.hebrew-lang [id*="captcha"] .form-control {
    direction: ltr !important;
    text-align: left !important;
}

/* Mobile responsive CAPTCHA */
@media (max-width: 767.98px) {
    [dir="rtl"] .captcha .form-group,
    body.rtl .captcha .form-group,
    body.hebrew-lang .captcha .form-group,
    [dir="rtl"] [id*="captcha"] .form-group,
    body.rtl [id*="captcha"] .form-group,
    body.hebrew-lang [id*="captcha"] .form-group {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: clamp(0.5rem, 1vw, 0.75rem) !important;
    }
    
    [dir="rtl"] .captcha img,
    body.rtl .captcha img,
    body.hebrew-lang .captcha img,
    [dir="rtl"] [id*="captcha"] img,
    body.rtl [id*="captcha"] img,
    body.hebrew-lang [id*="captcha"] img {
        margin-right: 0 !important;
        margin-bottom: clamp(0.5rem, 1vw, 0.75rem) !important;
    }
    
    [dir="rtl"] .captcha input[type="text"],
    body.rtl .captcha input[type="text"],
    body.hebrew-lang .captcha input[type="text"],
    [dir="rtl"] [id*="captcha"] input[type="text"],
    body.rtl [id*="captcha"] input[type="text"],
    body.hebrew-lang [id*="captcha"] input[type="text"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
    }
}

/* ============================================
   RTL BILLING FORM FIX - Move text left to avoid icon overlap
   Instead of moving icons, we add padding-right to inputs in RTL
   ============================================ */

/* RTL Form Group - Add padding-right to inputs to move text left and avoid icon overlap */
[dir="rtl"] .form-group .form-control,
body.rtl .form-group .form-control,
body.hebrew-lang .form-group .form-control,
[dir="rtl"] .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.rtl .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.hebrew-lang .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
[dir="rtl"] .form-group select,
body.rtl .form-group select,
body.hebrew-lang .form-group select,
[dir="rtl"] .form-group textarea,
body.rtl .form-group textarea,
body.hebrew-lang .form-group textarea {
    padding-right: clamp(45px, 3.5vw, 55px) !important;
}

/* RTL Input Group - Add padding-right to inputs to move text left */
[dir="rtl"] .input-group .form-control,
body.rtl .input-group .form-control,
body.hebrew-lang .input-group .form-control,
[dir="rtl"] .input-group input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.rtl .input-group input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.hebrew-lang .input-group input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
[dir="rtl"] .input-group select,
body.rtl .input-group select,
body.hebrew-lang .input-group select {
    padding-right: clamp(45px, 3.5vw, 55px) !important;
}

/* Ensure centered even in RTL mode */
[dir="rtl"] .home-domain-search h2.text-center,
html[lang="he"] .home-domain-search h2.text-center,
html[lang="hebrew"] .home-domain-search h2.text-center,
body.rtl .home-domain-search h2.text-center,
body.hebrew-lang .home-domain-search h2.text-center,
[dir="rtl"] .home-domain-search h2,
html[lang="he"] .home-domain-search h2,
html[lang="hebrew"] .home-domain-search h2,
body.rtl .home-domain-search h2,
body.hebrew-lang .home-domain-search h2,
[dir="rtl"] .home-domain-search h2.domain-search-premium-title,
html[lang="he"] .home-domain-search h2.domain-search-premium-title,
html[lang="hebrew"] .home-domain-search h2.domain-search-premium-title,
body.rtl .home-domain-search h2.domain-search-premium-title,
body.hebrew-lang .home-domain-search h2.domain-search-premium-title {
    text-align: center !important;
    width: 100% !important;
    max-width: 900px !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    direction: ltr !important;
    font-size: clamp(2rem, 3.5vw, 3.25rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .home-domain-search h2.text-center,
    .home-domain-search h2,
    .home-domain-search h2.domain-search-premium-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
        line-height: 1.2 !important;
        margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
        padding: 0 clamp(0.75rem, 3vw, 1.5rem) !important;
        letter-spacing: -0.025em !important;
    }
    
    .home-domain-search h2.domain-search-premium-title::after {
        width: 50px;
        height: 2px;
        bottom: -6px;
    }
}

/* Navbar will be RTL in Hebrew - removed exceptions */

/* ============================================
   PREMIUM PRODUCTS SHOWCASE SECTION
   ============================================ */

/* Section Badge */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: clamp(0.5rem, 0.75vw, 0.75rem) clamp(1rem, 1.5vw, 1.5rem);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(6, 182, 212, 0.1));
    border: 2px solid rgba(99, 102, 241, 0.2);
    border-radius: 50px;
    font-weight: 800;
    font-size: clamp(0.75rem, 0.7vw, 0.875rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: clamp(1rem, 1.5vw, 1.5rem);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    animation: badgePulse 3s ease-in-out infinite;
    position: relative;
}

.section-badge::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--brand), var(--brand-secondary));
    opacity: 0;
    transition: opacity 0.3s;
    z-index: -1;
}

.section-badge:hover::before {
    opacity: 0.2;
}

@keyframes badgePulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    }
    50% {
        box-shadow: 0 6px 16px rgba(99, 102, 241, 0.25);
    }
}

.section-badge i {
    font-size: 1.2em;
    color: var(--brand);
    animation: iconRotate 4s ease-in-out infinite;
}

@keyframes iconRotate {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

/* Subtitle Large */
.subtitle-large {
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.125rem) !important;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Products Showcase Section Background */
.products-showcase {
    position: relative;
    padding-block: clamp(3rem, 5vw, 5rem) !important;
    background: linear-gradient(
        135deg,
        rgba(99, 102, 241, 0.02) 0%,
        rgba(6, 182, 212, 0.02) 50%,
        rgba(139, 92, 246, 0.02) 100%
    );
    border-radius: 24px;
    margin-block: clamp(2rem, 3vw, 3rem);
    overflow: hidden;
}

.products-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.products-showcase > * {
    position: relative;
    z-index: 1;
}

/* Products Grid Enhancement */
.products-grid {
    margin-top: clamp(2rem, 3vw, 3rem);
}

/* Premium Product Cards */
.product-card {
    background: var(--surface);
    border-radius: 20px;
    padding: clamp(1.5rem, 2vw, 2rem);
    border: 2px solid var(--border-light);
    box-shadow: 0 4px 6px rgba(15, 23, 42, 0.04), 0 2px 4px rgba(15, 23, 42, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    height: 100%;
}

/* Card Shimmer Effect */
.card-shimmer {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.product-card:hover .card-shimmer {
    opacity: 1;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Product Card Icon */
.product-card-icon {
    width: clamp(64px, 8vw, 80px);
    height: clamp(64px, 8vw, 80px);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(6, 182, 212, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(1.25rem, 1.5vw, 1.5rem);
    border: 2px solid rgba(99, 102, 241, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.product-card-icon i {
    font-size: clamp(1.75rem, 2vw, 2.25rem);
    color: var(--brand);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card-icon.gradient-icon {
    background: linear-gradient(135deg, var(--brand), var(--brand-secondary));
    border: none;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
}

.product-card-icon.gradient-icon i {
    color: #ffffff;
}

/* Product Card Body */
.product-card-body {
    flex: 1;
    margin-bottom: clamp(1.25rem, 1.5vw, 1.5rem);
    position: relative;
    z-index: 1;
}

.product-card-title {
    font-size: clamp(1.125rem, 1.1vw, 1.375rem);
    font-weight: 700;
    color: var(--brand-dark);
    margin-bottom: clamp(0.75rem, 1vw, 1rem);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.product-card-description {
    font-size: clamp(0.9375rem, 0.95vw, 1rem);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Domain Hero Title - Premium Styling with Fallback */
.product-card-title.domain-hero-title,
.domain-card .product-card-title.domain-hero-title {
    /* Fallback color for browsers that don't support gradient text */
    color: #6366f1 !important;
    font-size: clamp(1.75rem, 2.5vw, 2.25rem) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    margin-bottom: clamp(1.25rem, 1.75vw, 1.5rem) !important;
    letter-spacing: -0.03em !important;
    text-align: center !important;
    position: relative;
    text-transform: none !important;
    /* Gradient text for modern browsers */
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    /* Enhanced shadow for depth */
    filter: drop-shadow(0 2px 8px rgba(99, 102, 241, 0.4)) !important;
    /* Smooth animation */
    animation: titlePulse 3s ease-in-out infinite !important;
}

/* Pulse animation for title */
@keyframes titlePulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 2px 8px rgba(99, 102, 241, 0.4));
    }
    50% {
        transform: scale(1.02);
        filter: drop-shadow(0 4px 12px rgba(99, 102, 241, 0.6));
    }
}

/* Domain Hero Description - Clean & Modern */
.product-card-description.domain-hero-description,
.domain-card .product-card-description.domain-hero-description {
    font-size: clamp(1.0625rem, 1.3vw, 1.25rem) !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    opacity: 0.9 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    margin: 0 !important;
}

/* Make domain cards more prominent */
.domain-card.register-domain,
.domain-card.transfer-domain {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 2px solid rgba(99, 102, 241, 0.2) !important;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15) !important;
    transition: all 0.3s ease;
}

.domain-card.register-domain:hover,
.domain-card.transfer-domain:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.25) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .domain-hero-title {
        font-size: clamp(1.5rem, 5.5vw, 1.875rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }
    
    .domain-hero-description {
        font-size: clamp(1rem, 4vw, 1.125rem) !important;
        line-height: 1.45 !important;
    }
    
    .domain-card.register-domain,
    .domain-card.transfer-domain {
        border-width: 2px !important;
    }
}

/* Product Card Footer */
.product-card-footer {
    margin-top: auto;
    position: relative;
    z-index: 1;
}

/* Premium Button */
.btn-premium {
    background: linear-gradient(135deg, var(--brand), var(--brand-secondary));
    color: #ffffff !important;
    font-weight: 700;
    padding: clamp(0.875rem, 1vw, 1rem) clamp(1.25rem, 1.5vw, 1.5rem);
    border-radius: 12px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.btn-premium:hover::before {
    left: 100%;
}

.btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}

.btn-premium i {
    font-size: 1.1em;
    transition: transform 0.3s;
}

.btn-premium:hover i {
    transform: translateX(4px);
}

/* Domain Gradient Button */
.btn-domain-gradient {
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    color: #ffffff !important;
    font-weight: 700;
    padding: clamp(0.875rem, 1vw, 1rem) clamp(1.25rem, 1.5vw, 1.5rem);
    border-radius: 12px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-domain-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.btn-domain-gradient:hover::before {
    left: 100%;
}

.btn-domain-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}

.btn-domain-gradient i {
    font-size: 1.1em;
    transition: transform 0.3s;
}

.btn-domain-gradient:hover i {
    transform: translateX(4px);
}

/* Premium Card Hover Effect */
.product-card.premium-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15), 0 0 0 2px rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
}

.product-card.premium-card:hover .product-card-icon {
    transform: scale(1.1) rotate(5deg);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(6, 182, 212, 0.2));
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
}

.product-card.premium-card:hover .product-card-icon i {
    transform: scale(1.1);
}

/* Domain Cards Special Styling */
.product-card.domain-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.03), rgba(6, 182, 212, 0.03));
    border: 2px solid rgba(139, 92, 246, 0.2);
}

.product-card.domain-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 24px 48px rgba(139, 92, 246, 0.2), 0 0 0 2px rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.4);
}

.product-card.domain-card:hover .product-card-icon.gradient-icon {
    transform: scale(1.15) rotate(-5deg);
    box-shadow: 0 12px 32px rgba(139, 92, 246, 0.4);
}

/* Register Domain Specific */
.product-card.register-domain {
    border-color: rgba(139, 92, 246, 0.25);
}

/* Transfer Domain Specific */
.product-card.transfer-domain {
    border-color: rgba(6, 182, 212, 0.25);
}

/* Responsive Adjustments for Product Cards */
@media (max-width: 991.98px) {
    .product-card {
        padding: clamp(1.25rem, 2vw, 1.5rem);
    }

    .product-card-icon {
        width: clamp(56px, 7vw, 64px);
        height: clamp(56px, 7vw, 64px);
    }

    .product-card-icon i {
        font-size: clamp(1.5rem, 1.8vw, 1.75rem);
    }
}

@media (max-width: 575.98px) {
    .section-badge {
        padding: clamp(0.5rem, 1vw, 0.625rem) clamp(0.875rem, 1.5vw, 1rem);
        font-size: clamp(0.6875rem, 0.75vw, 0.75rem);
    }

    .product-card {
        padding: clamp(1rem, 2vw, 1.25rem);
    }

    .product-card-icon {
        width: clamp(48px, 6vw, 56px);
        height: clamp(48px, 6vw, 56px);
    }

    .product-card-icon i {
        font-size: clamp(1.25rem, 1.5vw, 1.5rem);
    }

    .product-card-title {
        font-size: clamp(1rem, 1.1vw, 1.125rem);
    }

    .product-card-description {
        font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
    }

    .btn-premium,
    .btn-domain-gradient {
        padding: clamp(0.75rem, 1vw, 0.875rem) clamp(1rem, 1.5vw, 1.25rem);
        font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
    }
}

/* ============================================
   LEGACY CLOUD CARD SYSTEM (Fallback)
   ============================================ */

/* Unified Card System - Sharp High-Tech */
.cloud-card {
    background: var(--surface);
    border-radius: 12px;
    padding: clamp(1.25rem, 1.5vw, 1.75rem);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.cloud-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--brand-secondary));
    transform: scaleX(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cloud-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl), 0 0 0 1px rgba(99, 102, 241, 0.1);
    border-color: var(--border-sharp);
}

.cloud-card:hover::before {
    transform: scaleX(1);
}

/* Grid System - Only for specific card containers, not Bootstrap .row */
/* Removed grid from cloud-quicklinks to preserve Bootstrap grid system */

.cloud-card-label {
    font-weight: 700;
    color: var(--brand-dark);
    display: flex;
    align-items: center;
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.125rem);
    margin-block: 0 var(--gap-sm);
    letter-spacing: -0.01em;
}

.cloud-card-label .dot {
    display: inline-block;
    width: clamp(8px, 0.75vw, 10px);
    height: clamp(8px, 0.75vw, 10px);
    background: linear-gradient(135deg, var(--brand), var(--brand-secondary));
    border-radius: 50%;
    margin-right: clamp(0.5rem, 0.5vw, 0.65rem);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}

.cloud-card-text {
    margin-top: var(--gap-md);
    color: var(--text-muted);
    font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
}

/* Beautiful styling for Register Domain card text */
.cloud-card.accent-1 .cloud-card-text {
    font-weight: 600 !important;
    color: var(--text) !important;
    line-height: 1.6 !important;
}

.cloud-card.accent-1 .cloud-card-text::before {
    content: 'REGISTER DOMAIN' !important;
    display: block !important;
    font-size: clamp(0.75rem, 0.7rem + 0.3vw, 0.875rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    margin-bottom: clamp(0.5rem, 0.75vw, 0.75rem) !important;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    padding-bottom: clamp(0.375rem, 0.5vw, 0.5rem) !important;
    border-bottom: 2px solid rgba(99, 102, 241, 0.2) !important;
}

/* Domain cards - Footer styling */
.cloud-card.accent-1 .cloud-card-footer,
.cloud-card.accent-2 .cloud-card-footer {
    margin-top: var(--gap-md);
    padding-top: var(--gap-md);
    border-top: 1px solid var(--border);
    text-align: left !important;
    display: block !important;
}

.cloud-card.accent-1 .cloud-card-footer .btn,
.cloud-card.accent-2 .cloud-card-footer .btn {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
}

.cloud-card-footer {
    margin-top: var(--gap-md);
    padding-top: var(--gap-md);
    border-top: 1px solid var(--border);
}

.cloud-card-footer .btn {
    border-radius: clamp(12px, 1vw, 18px);
    width: 100%;
}

.cloud-card.accent-1 {
    background: var(--cloud-accent-one);
}

.cloud-card.accent-2 {
    background: var(--cloud-accent-two);
}

.cloud-quicklinks {
    display: flex;
    flex-wrap: wrap;
}

.cloud-quicklinks .cloud-quicklink {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(1.25rem, 1.5vw, 1.5rem);
    border-radius: 12px;
    border: 1px solid var(--border-light);
    background: var(--surface);
    height: 100%;
    color: var(--brand-dark);
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    letter-spacing: -0.01em;
}

.cloud-quicklinks .cloud-quicklink::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--brand-secondary));
    transform: scaleX(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cloud-quicklinks .cloud-quicklink i {
    font-size: clamp(1.5rem, 1.5vw, 1.75rem);
    color: var(--brand);
    margin-bottom: var(--gap-sm);
    filter: drop-shadow(0 2px 4px rgba(99, 102, 241, 0.2));
}

.cloud-quicklinks .cloud-quicklink:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(99, 102, 241, 0.1);
    border-color: var(--border-sharp);
}

.cloud-quicklinks .cloud-quicklink:hover::before {
    transform: scaleX(1);
}

.cloud-quicklinks .cloud-quicklink:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

.cloud-account-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(1.25rem, 1.5vw, 1.75rem);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(6, 182, 212, 0.05));
    color: var(--brand-dark);
    font-weight: 700;
    border: 1px solid rgba(99, 102, 241, 0.15);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    letter-spacing: -0.01em;
}

.cloud-account-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--brand-secondary));
    transform: scaleX(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cloud-account-card i {
    font-size: clamp(1.5rem, 1.5vw, 1.8rem);
    margin-bottom: var(--gap-md);
    color: var(--brand);
    filter: drop-shadow(0 2px 4px rgba(99, 102, 241, 0.3));
}

.cloud-account-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(99, 102, 241, 0.2);
    border-color: var(--brand);
}

.cloud-account-card:hover::before {
    transform: scaleX(1);
}

.cloud-account-card:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

.cloud-cta-card {
    padding: clamp(2rem, 2.5vw, 2.5rem) clamp(2rem, 2.5vw, 3rem);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.95), rgba(6, 182, 212, 0.95));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    color: #ffffff;
    box-shadow: var(--shadow-xl), 0 0 40px rgba(99, 102, 241, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.cloud-cta-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.cloud-cta-card h2 {
    font-size: clamp(1.5rem, 1.5rem + 1vw, 2rem);
    font-weight: 800;
    margin-block: 0 var(--gap-sm);
    color: #ffffff;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.cloud-cta-card p {
    margin: 0;
    opacity: 0.9;
    font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
    position: relative;
    z-index: 1;
    letter-spacing: -0.005em;
}

.cloud-cta-card .btn {
    border-radius: 6px;
    padding-left: clamp(1.5rem, 2vw, 2.5rem);
    padding-right: clamp(1.5rem, 2vw, 2.5rem);
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.cloud-cta-card .btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

footer#footer {
    background: var(--brand-dark);
    color: rgba(255, 255, 255, 0.75);
    padding-block: var(--gap-xl);
    /* Removed content-visibility to prevent flickering on mobile */
}

footer#footer a {
    color: rgba(255, 255, 255, 0.85);
}

footer#footer a:hover {
    color: #ffffff;
}

@media (max-width: 991.98px) {
    .header {
        position: static;
    }

    .header .topbar {
        border-bottom: none;
    }

    .header .navbar {
        padding: 1rem 0;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Domain search - use default WHMCS tablet styles */

    .navbar .toolbar,
    .header .toolbar {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: clamp(0.5rem, 0.75vw, 1rem) !important;
    }

    .navbar .toolbar .nav-link,
    .navbar .toolbar button,
    .navbar .toolbar .btn,
    .header .toolbar .nav-link,
    .header .toolbar button,
    .header .toolbar .btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.5rem 0.75rem !important;
        vertical-align: middle !important;
    }

    .navbar-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        vertical-align: middle !important;
    }

    .main-navbar-wrapper {
        padding-bottom: 0.5rem;
    }

    .main-navbar-wrapper .collapse.show {
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 18px;
        padding: 1rem;
        margin-top: 0.5rem;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
        border: 1px solid var(--border);
    }

    .main-navbar-wrapper .collapse.show .navbar-nav > li > a {
        margin-bottom: 0.65rem;
        padding: 0.75rem 1rem !important;
        border-radius: 10px;
        color: var(--text) !important;
    }

    .main-navbar-wrapper .collapse.show .navbar-nav > li > a:hover {
        background: rgba(88, 81, 236, 0.1) !important;
        color: var(--brand) !important;
        transform: translateX(4px);
    }

    .main-navbar-wrapper .navbar-nav.ml-auto {
        margin-left: 0;
    }

    .main-navbar-wrapper .collapse.show .dropdown-menu {
        background: rgba(255, 255, 255, 0.95);
        margin-top: 0.5rem;
        margin-left: 1rem;
        border-radius: 12px;
    }

    .cloud-hero {
        padding: clamp(2rem, 2.5vw, 3rem) clamp(1.5rem, 2vw, 2rem);
    }

    .cloud-hero-title {
        font-size: clamp(1.75rem, 1.5rem + 1vw, 2.2rem);
    }

    .cloud-hero-visual {
        width: 220px;
        height: 220px;
    }
}

@media (max-width: 575.98px) {
    .header .topbar {
        display: none;
    }

    .header .navbar {
        padding: clamp(0.5rem, 1vw, 0.85rem) 0;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .header .toolbar .nav-link {
        width: clamp(36px, 8vw, 42px) !important;
        height: clamp(36px, 8vw, 42px) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .header .toolbar {
        display: flex !important;
        align-items: center !important;
        gap: clamp(0.5rem, 1vw, 0.75rem) !important;
    }

    .navbar .toolbar {
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .navbar .toolbar .nav-link,
    .navbar .toolbar button,
    .navbar .toolbar .btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: clamp(36px, 8vw, 42px) !important;
        width: clamp(36px, 8vw, 42px) !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .navbar-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: clamp(36px, 8vw, 42px) !important;
        width: clamp(36px, 8vw, 42px) !important;
        padding: 0.25rem 0.5rem !important;
        margin: 0 !important;
    }

    /* Domain search - use default WHMCS small mobile styles */

    .header .toolbar .nav-link {
        width: clamp(36px, 8vw, 42px) !important;
        height: clamp(36px, 8vw, 42px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .header .toolbar {
        display: flex !important;
        align-items: center !important;
        gap: clamp(0.5rem, 1vw, 0.75rem) !important;
    }

    .navbar .toolbar {
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .navbar .toolbar .nav-link,
    .navbar .toolbar button,
    .navbar .toolbar .btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: clamp(36px, 8vw, 42px) !important;
        width: clamp(36px, 8vw, 42px) !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .navbar-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: clamp(36px, 8vw, 42px) !important;
        width: clamp(36px, 8vw, 42px) !important;
        padding: 0.25rem 0.5rem !important;
        margin: 0 !important;
    }

    .main-navbar-wrapper .collapse.show {
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid var(--border);
    }

    .main-navbar-wrapper .collapse.show .navbar-nav > li > a {
        color: var(--text) !important;
    }

    .main-navbar-wrapper .collapse.show .navbar-nav > li > a:hover {
        background: rgba(88, 81, 236, 0.1) !important;
        color: var(--brand) !important;
    }

    .cloud-card,
    .cloud-account-card,
    .cloud-quicklinks .cloud-quicklink {
        padding: clamp(1rem, 2vw, 1.4rem);
    }

    .cloud-cta-card {
        padding: clamp(1.25rem, 3vw, 2rem);
        flex-direction: column;
        text-align: center;
    }

    .cloud-cta-card h2 {
        font-size: clamp(1.25rem, 1.5vw, 1.65rem);
        margin-bottom: var(--gap-sm);
    }

    .cloud-cta-card .btn {
        width: 100%;
        margin-top: var(--gap-sm);
    }
    
    /* Responsive adjustments - Bootstrap handles grid */
}

/* Mobile-first improvements for small screens */
@media (max-width: 767.98px) {
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
        /* Prevent flickering on scroll */
        -webkit-overflow-scrolling: touch;
    }

    /* Fix toolbar alignment on mobile - align chat, hamburger and cart */
    .navbar .toolbar,
    .header .toolbar {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: clamp(0.5rem, 1vw, 0.75rem) !important;
        height: auto !important;
        flex-wrap: nowrap !important;
    }

    /* Domain search - use default WHMCS mobile styles */

    .navbar .toolbar .nav-link,
    .navbar .toolbar button,
    .navbar .toolbar .btn,
    .header .toolbar .nav-link,
    .header .toolbar button,
    .header .toolbar .btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: clamp(36px, 8vw, 42px) !important;
        width: clamp(36px, 8vw, 42px) !important;
        min-height: clamp(36px, 8vw, 42px) !important;
        min-width: clamp(36px, 8vw, 42px) !important;
        padding: 0 !important;
        margin: 0 !important;
        vertical-align: middle !important;
    }

    .navbar-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: clamp(36px, 8vw, 42px) !important;
        width: clamp(36px, 8vw, 42px) !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .navbar .toolbar .nav-link,
    .navbar .toolbar button,
    .navbar .toolbar .btn,
    .header .toolbar .nav-link,
    .header .toolbar button,
    .header .toolbar .btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: clamp(36px, 8vw, 42px) !important;
        width: clamp(36px, 8vw, 42px) !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .navbar-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: clamp(36px, 8vw, 42px) !important;
        width: clamp(36px, 8vw, 42px) !important;
        padding: 0.25rem 0.5rem !important;
        margin: 0 !important;
    }

    /* Disable will-change on mobile to prevent flickering */
    .cloud-card,
    .cloud-account-card,
    .cloud-quicklinks .cloud-quicklink,
    .btn {
        will-change: auto;
    }

    /* Ensure containers don't overflow */
    .container {
        max-width: 100%;
        padding-inline: clamp(0.75rem, 2vw, 1rem);
    }

    /* Better spacing for mobile */
    .cloud-hero {
        margin-inline: clamp(0.5rem, 1vw, 1rem);
    }

    .cloud-section {
        margin-inline: clamp(0.5rem, 1vw, 1rem);
    }

    /* Stack buttons vertically on mobile if needed */
    .cloud-hero-cta {
        flex-wrap: wrap !important;
    }

    .cloud-hero-cta .btn {
        width: 100% !important;
        margin-bottom: var(--gap-sm) !important;
    }

    .cloud-hero-cta .btn:last-child {
        margin-bottom: 0 !important;
    }

    /* Better card spacing */
    .cloud-card + .cloud-card,
    .cloud-account-card + .cloud-account-card {
        margin-top: var(--gap-md);
    }
}

@media (max-width: 575.98px) {
    :root {
        --gap: 8px;
        --gap-sm: 6px;
        --gap-md: 12px;
        --gap-lg: 16px;
        --gap-xl: 24px;
    }

    body {
        font-size: clamp(0.875rem, 0.8rem + 0.5vw, 0.95rem);
    }

    h1, .h1 {
        font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
        margin-block: clamp(0.75rem, 1vw, 1rem) clamp(0.5rem, 0.75vw, 0.75rem);
    }

    h2, .h2 {
        font-size: clamp(1.25rem, 1.125rem + 0.75vw, 1.75rem);
        margin-block: clamp(0.625rem, 0.875vw, 0.875rem) clamp(0.5rem, 0.625vw, 0.625rem);
    }

    h3, .h3 {
        font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
    }

    .navbar-brand {
        font-size: clamp(1rem, 1vw, 1.125rem);
    }

    .navbar-brand .logo-img {
        max-height: clamp(110px, 13vw, 150px) !important;
        max-width: 1400px !important;
    }

    .navbar .nav-link {
        padding: clamp(0.375rem, 1vw, 0.5rem) clamp(0.625rem, 1.5vw, 0.75rem) !important;
        font-size: clamp(0.8125rem, 0.9vw, 0.875rem);
        margin: 0 clamp(0.125rem, 0.5vw, 0.25rem);
    }

    .btn,
    button {
        padding: clamp(8px, 1.5vw, 10px) clamp(12px, 2vw, 16px);
        font-size: clamp(0.8125rem, 0.9vw, 0.875rem);
    }

    .cloud-hero {
        padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 2vw, 1.5rem);
        border-radius: clamp(16px, 2vw, 20px);
        margin-top: var(--gap-md);
    }

    .cloud-hero-title {
        font-size: clamp(1.5rem, 1.25rem + 1vw, 1.75rem);
        line-height: 1.3;
    }

    .cloud-hero-subtitle {
        font-size: clamp(0.875rem, 0.85rem + 0.3vw, 0.95rem);
        max-width: 100%;
    }

    .cloud-hero-visual {
        width: clamp(160px, 40vw, 200px);
        height: clamp(160px, 40vw, 200px);
        margin: var(--gap-md) auto;
    }

    .cloud-hero-cta {
        flex-direction: column;
        gap: var(--gap-sm);
    }

    .cloud-hero-cta .btn {
        width: 100%;
        padding-left: clamp(1rem, 2vw, 1.25rem);
        padding-right: clamp(1rem, 2vw, 1.25rem);
    }

    .cloud-section {
        margin-top: var(--gap-lg);
        padding-block: var(--gap-md);
    }

    .cloud-section-header {
        margin-bottom: var(--gap-md);
    }

    .cloud-section-header h2 {
        font-size: clamp(1.25rem, 1.125rem + 0.75vw, 1.5rem);
    }

    .cloud-section-header p {
        font-size: clamp(0.875rem, 0.85rem + 0.25vw, 0.9rem);
    }

    .cloud-card,
    .cloud-account-card {
        padding: clamp(0.875rem, 2vw, 1.25rem);
        border-radius: clamp(12px, 1.5vw, 16px);
    }

    .cloud-card-label {
        font-size: clamp(0.9375rem, 0.9vw, 1rem);
    }

    .cloud-card-text {
        font-size: clamp(0.8125rem, 0.85vw, 0.875rem);
        margin-top: var(--gap-sm);
    }

    .cloud-quicklinks .cloud-quicklink {
        padding: clamp(0.875rem, 2vw, 1rem);
        border-radius: clamp(12px, 1.5vw, 16px);
    }

    .cloud-quicklinks .cloud-quicklink i {
        font-size: clamp(1.25rem, 1.5vw, 1.5rem);
        margin-bottom: clamp(0.5rem, 0.75vw, 0.75rem);
    }

    .cloud-quicklinks .cloud-quicklink span {
        font-size: clamp(0.8125rem, 0.85vw, 0.875rem);
    }

    .cloud-account-card i {
        font-size: clamp(1.25rem, 1.5vw, 1.5rem);
        margin-bottom: var(--gap-sm);
    }

    .cloud-cta-card {
        padding: clamp(1rem, 2.5vw, 1.5rem);
        border-radius: clamp(16px, 2vw, 20px);
        gap: var(--gap-sm);
    }

    .cloud-cta-card h2 {
        font-size: clamp(1.125rem, 1.25vw, 1.375rem);
    }

    .cloud-cta-card p {
        font-size: clamp(0.8125rem, 0.85vw, 0.875rem);
    }

    .cloud-cta-card .btn {
        padding-left: clamp(1rem, 2vw, 1.5rem);
        padding-right: clamp(1rem, 2vw, 1.5rem);
        width: 100%;
    }

    .main-container {
        padding-top: var(--gap-md);
    }

    .container {
        padding-inline: clamp(0.75rem, 2vw, 1rem);
    }

    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    select,
    textarea {
        padding: clamp(6px, 1vw, 8px) clamp(10px, 1.5vw, 12px);
        font-size: clamp(0.8125rem, 0.85vw, 0.875rem);
    }

    table th,
    table td {
        padding: clamp(6px, 1vw, 8px) clamp(8px, 1.5vw, 12px);
        font-size: clamp(0.75rem, 0.8vw, 0.8125rem);
    }

    /* Prevent text overflow */
    .cloud-hero-subtitle,
    .cloud-section-header p,
    .cloud-card-text {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Ensure images don't overflow */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Better table handling on small screens */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    /* Stack form elements */
    .form-inline {
        flex-direction: column;
    }

    .form-inline .form-control {
        width: 100%;
        margin-bottom: var(--gap-sm);
    }

    .form-inline .btn {
        width: 100%;
    }

    /* Domain search - use default WHMCS styles */

    /* Better spacing for quicklinks on small screens */
    .cloud-quicklinks .cloud-quicklink {
        min-height: auto;
    }

    /* Ensure badges don't overflow */
    .badge {
        font-size: clamp(0.625rem, 0.7vw, 0.75rem);
        padding: clamp(0.125rem, 0.25vw, 0.25rem) clamp(0.375rem, 0.5vw, 0.5rem);
    }
}

/* Domain search - use default WHMCS styles (removed all custom overrides) */

/* Force logo width - highest priority at end */
.navbar-brand img,
.navbar-brand .logo-img,
.navbar-brand img.logo-img,
.navbar-brand img[src*="logo"],
.navbar-brand img[alt*="logo"] {
    max-width: 1600px !important;
    width: auto !important;
    max-height: clamp(140px, 16vw, 180px) !important;
    height: auto !important;
}

/* Fix mobile navbar alignment - highest priority */
@media (max-width: 767.98px) {
    .navbar,
    .header .navbar {
        display: flex !important;
        align-items: center !important;
    }

    .navbar .toolbar,
    .header .toolbar {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: clamp(0.5rem, 1vw, 0.75rem) !important;
    }

    /* Domain search - use default WHMCS mobile styles */

    .navbar .toolbar .nav-link,
    .navbar .toolbar button,
    .navbar .toolbar .btn,
    .header .toolbar .nav-link,
    .header .toolbar button,
    .header .toolbar .btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: clamp(36px, 8vw, 42px) !important;
        width: clamp(36px, 8vw, 42px) !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .navbar-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: clamp(36px, 8vw, 42px) !important;
        width: clamp(36px, 8vw, 42px) !important;
        padding: 0.25rem 0.5rem !important;
        margin: 0 !important;
    }
}

/* ============================================
   SHOPPING CART - MINIMALIST MODERN DESIGN
   Clean, modern, minimalist styling for cart
   ============================================ */

/* Cart Container - Clean & Spacious */
#order-standard_cart {
    padding: clamp(2rem, 3vw, 3rem) 0;
}

#order-standard_cart .header-lined {
    margin-bottom: clamp(2rem, 2.5vw, 2.5rem);
    padding-bottom: clamp(1rem, 1.25vw, 1.25rem);
    border-bottom: 1px solid var(--border-light);
}

#order-standard_cart .header-lined h1 {
    font-size: clamp(1.75rem, 2vw, 2.25rem);
    font-weight: 700;
    color: var(--brand-dark);
    margin: 0;
    letter-spacing: -0.02em;
}

/* Cart Items List - Minimalist Design */
.view-cart-items-header {
    padding: clamp(1rem, 1.25vw, 1.25rem) 0;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: clamp(1rem, 1.25vw, 1.25rem);
}

.view-cart-items-header .row > div {
    font-size: clamp(0.8125rem, 0.875vw, 0.875rem);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.view-cart-items {
    margin-bottom: clamp(2rem, 2.5vw, 2.5rem);
}

.view-cart-items .item {
    padding: clamp(1.25rem, 1.5vw, 1.75rem) 0;
    border-bottom: 1px solid var(--border-light);
    transition: background-color 0.2s ease;
}

.view-cart-items .item:hover {
    background-color: rgba(99, 102, 241, 0.02);
    margin: 0 clamp(-1rem, -1.25vw, -1.25rem);
    padding-left: clamp(1rem, 1.25vw, 1.25rem);
    padding-right: clamp(1rem, 1.25vw, 1.25rem);
    border-radius: 8px;
}

.view-cart-items .item-title {
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    font-weight: 600;
    color: var(--brand-dark);
    display: block;
    margin-bottom: clamp(0.375rem, 0.5vw, 0.5rem);
    letter-spacing: -0.01em;
}

.view-cart-items .item-group {
    font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
    color: var(--text-secondary);
    display: block;
    margin-bottom: clamp(0.25rem, 0.375vw, 0.375rem);
}

.view-cart-items .item-domain {
    font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
    color: var(--text-muted);
    display: block;
    font-family: 'Courier New', monospace;
}

.view-cart-items .item-price {
    text-align: right;
}

.view-cart-items .item-price span:first-child {
    font-size: clamp(1.125rem, 1.25vw, 1.25rem);
    font-weight: 700;
    color: var(--brand-dark);
    display: block;
    margin-bottom: clamp(0.25rem, 0.375vw, 0.375rem);
}

.view-cart-items .item-price .cycle {
    font-size: clamp(0.8125rem, 0.875vw, 0.875rem);
    color: var(--text-muted);
    display: block;
}

.view-cart-items .item-qty input {
    max-width: 80px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: clamp(6px, 0.75vw, 8px);
    font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
}

.view-cart-items .item-qty .btn {
    margin-top: clamp(0.5rem, 0.625vw, 0.625rem);
    font-size: clamp(0.75rem, 0.8125vw, 0.8125rem);
    padding: clamp(4px, 0.5vw, 6px) clamp(8px, 1vw, 10px);
}

/* Remove Button - Minimalist */
.view-cart-items .btn-remove-from-cart {
    color: var(--text-muted);
    padding: clamp(0.5rem, 0.625vw, 0.625rem);
    border-radius: 6px;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
}

.view-cart-items .btn-remove-from-cart:hover {
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
    transform: scale(1.1);
}

.view-cart-items .btn-remove-from-cart i {
    font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
}

/* Edit Button - Clean */
.view-cart-items .btn-link {
    color: var(--brand);
    font-size: clamp(0.8125rem, 0.875vw, 0.875rem);
    padding: clamp(0.25rem, 0.375vw, 0.375rem) clamp(0.5rem, 0.625vw, 0.625rem);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.view-cart-items .btn-link:hover {
    background-color: rgba(99, 102, 241, 0.1);
    color: var(--brand-press);
}

/* Empty Cart Message */
.view-cart-empty {
    text-align: center;
    padding: clamp(3rem, 4vw, 4rem) 0;
    color: var(--text-muted);
    font-size: clamp(1rem, 1.1vw, 1.125rem);
}

.empty-cart {
    text-align: center;
    margin: clamp(1.5rem, 2vw, 2rem) 0;
    padding-top: clamp(1rem, 1.25vw, 1.25rem);
    border-top: 1px solid var(--border-light);
}

.empty-cart .btn-link {
    color: var(--text-muted);
    font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
    padding: clamp(0.5rem, 0.625vw, 0.625rem) clamp(1rem, 1.25vw, 1.25rem);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.empty-cart .btn-link:hover {
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
}

/* Cart Sidebar - Minimalist Summary */
#order-standard_cart .cart-sidebar {
    padding-left: clamp(1.5rem, 2vw, 2rem);
}

#order-standard_cart .cart-sidebar .panel.card {
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    background: var(--surface);
    margin-bottom: clamp(1.5rem, 2vw, 2rem);
}

#order-standard_cart .cart-sidebar .panel.card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--border-light);
    padding: clamp(1.25rem, 1.5vw, 1.5rem);
}

#order-standard_cart .cart-sidebar .panel.card h3 {
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    font-weight: 700;
    color: var(--brand-dark);
    margin: 0;
    letter-spacing: -0.01em;
}

#order-standard_cart .cart-sidebar .list-group-item {
    padding: clamp(0.875rem, 1vw, 1rem) clamp(1.25rem, 1.5vw, 1.5rem);
    border-color: var(--border-light);
    background: transparent;
    color: var(--text);
    font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
    transition: all 0.2s ease;
}

#order-standard_cart .cart-sidebar .list-group-item:hover {
    background-color: rgba(99, 102, 241, 0.03);
    color: var(--brand);
    padding-left: clamp(1.5rem, 1.75vw, 2rem);
}

#order-standard_cart .cart-sidebar .list-group-item.active {
    background-color: rgba(99, 102, 241, 0.05);
    color: var(--brand);
    font-weight: 600;
}

/* Order Summary - Clean Design */
.secondary-cart-sidebar {
    padding-left: clamp(1.5rem, 2vw, 2rem);
}

.order-summary {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: clamp(1.5rem, 2vw, 2rem);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    position: sticky;
    top: clamp(1rem, 1.25vw, 1.25rem);
}

.order-summary h2 {
    font-size: clamp(1.25rem, 1.4vw, 1.5rem);
    font-weight: 700;
    color: var(--brand-dark);
    margin-bottom: clamp(1.25rem, 1.5vw, 1.5rem);
    letter-spacing: -0.015em;
}

.summary-container {
    border-top: 1px solid var(--border-light);
    padding-top: clamp(1rem, 1.25vw, 1.25rem);
}

.summary-container .subtotal,
.summary-container .bordered-totals > div,
.summary-container .recurring-totals {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(0.75rem, 1vw, 1rem) 0;
    font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
    color: var(--text);
}

.summary-container .bordered-totals {
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    margin: clamp(0.75rem, 1vw, 1rem) 0;
    padding: clamp(0.5rem, 0.75vw, 0.75rem) 0;
}

.summary-container .total-due-today {
    border-top: 2px solid var(--brand);
    padding-top: clamp(1rem, 1.25vw, 1.25rem);
    margin-top: clamp(1rem, 1.25vw, 1.25rem);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: clamp(0.5rem, 0.625vw, 0.625rem);
}

.summary-container .total-due-today .amt {
    font-size: clamp(1.75rem, 2vw, 2.25rem);
    font-weight: 800;
    color: var(--brand-dark);
    letter-spacing: -0.02em;
}

.summary-container .total-due-today span:last-child {
    font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
    color: var(--text-secondary);
}

/* Checkout Button - Modern Minimalist */
.order-summary .btn-checkout {
    width: 100%;
    padding: clamp(0.875rem, 1vw, 1rem) clamp(1.5rem, 2vw, 2rem);
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    font-weight: 600;
    background: linear-gradient(135deg, var(--brand), var(--brand-press));
    border: none;
    border-radius: 8px;
    color: #ffffff;
    transition: all 0.2s ease;
    margin-top: clamp(1rem, 1.25vw, 1.25rem);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

.order-summary .btn-checkout:hover:not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.order-summary .btn-checkout.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.order-summary .btn-continue-shopping {
    color: var(--text-secondary);
    font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
    text-decoration: none;
    margin-top: clamp(0.75rem, 1vw, 1rem);
    display: inline-block;
    transition: color 0.2s ease;
}

.order-summary .btn-continue-shopping:hover {
    color: var(--brand);
}

/* Promo Code Section - Clean */
.view-cart-tabs {
    margin-top: clamp(2rem, 2.5vw, 2.5rem);
    border-top: 1px solid var(--border-light);
    padding-top: clamp(1.5rem, 2vw, 2rem);
}

.view-cart-tabs .nav-tabs {
    border-bottom: 1px solid var(--border-light);
    margin-bottom: clamp(1rem, 1.25vw, 1.25rem);
}

.view-cart-tabs .nav-link {
    color: var(--text-secondary);
    font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
    padding: clamp(0.75rem, 1vw, 1rem) clamp(1rem, 1.25vw, 1.25rem);
    border: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.view-cart-tabs .nav-link:hover {
    color: var(--brand);
    background-color: transparent;
    border-bottom-color: rgba(99, 102, 241, 0.3);
}

.view-cart-tabs .nav-link.active {
    color: var(--brand);
    background-color: transparent;
    border-bottom-color: var(--brand);
    font-weight: 600;
}

.view-cart-tabs .tab-content {
    padding: clamp(1rem, 1.25vw, 1.25rem) 0;
}

.view-cart-tabs .form-control {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: clamp(0.75rem, 1vw, 1rem);
    font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
    transition: all 0.2s ease;
}

.view-cart-tabs .form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.view-cart-tabs .btn-default {
    background: var(--brand);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: clamp(0.75rem, 1vw, 1rem) clamp(1.5rem, 2vw, 2rem);
    font-weight: 600;
    transition: all 0.2s ease;
    margin-top: clamp(0.75rem, 1vw, 1rem);
}

.view-cart-tabs .btn-default:hover {
    background: var(--brand-press);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

.view-cart-promotion-code {
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    padding: clamp(0.75rem, 1vw, 1rem);
    margin-bottom: clamp(0.75rem, 1vw, 1rem);
    color: var(--brand);
    font-weight: 600;
    font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
}

/* Alerts - Minimalist */
#order-standard_cart .alert {
    border-radius: 8px;
    border: 1px solid;
    padding: clamp(0.875rem, 1vw, 1rem) clamp(1.25rem, 1.5vw, 1.5rem);
    margin-bottom: clamp(1rem, 1.25vw, 1.25rem);
    font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
}

#order-standard_cart .alert-warning {
    background-color: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
    color: #92400e;
}

#order-standard_cart .alert-success {
    background-color: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: #166534;
}

#order-standard_cart .alert-danger {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #991b1b;
}

#order-standard_cart .alert-info {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: #1e40af;
}

/* ============================================
   PRODUCT CARDS IN CART - MINIMALIST MODERN
   Clean, modern product cards design
   ============================================ */

/* Products Container - Clean Layout */
#order-standard_cart .products {
    margin: clamp(2rem, 2.5vw, 3rem) 0;
}

#order-standard_cart .products .row.row-eq-height {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

#order-standard_cart .products .row.row-eq-height > [class*="col-"] {
    padding: 0 clamp(0.75rem, 1vw, 1rem);
    display: flex;
    flex-direction: column;
    margin-bottom: clamp(1.5rem, 2vw, 2rem);
}

#order-standard_cart .products .row.row-eq-height > [class*="col-"]:first-child {
    padding-left: 0;
}

#order-standard_cart .products .row.row-eq-height > [class*="col-"]:last-child {
    padding-right: 0;
}

/* Product Card - Minimalist Design */
#order-standard_cart .products .product {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.2s ease;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

#order-standard_cart .products .product:hover {
    border-color: var(--brand);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
    transform: translateY(-2px);
}

/* Product Header - Clean & Minimal */
#order-standard_cart .products .product header {
    padding: clamp(1.25rem, 1.5vw, 1.5rem);
    border-bottom: 1px solid var(--border-light);
    background: transparent;
    margin: 0;
}

#order-standard_cart .products .product header span {
    font-size: clamp(1.125rem, 1.25vw, 1.25rem);
    font-weight: 700;
    color: var(--brand-dark);
    display: block;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

#order-standard_cart .products .product header .qty {
    float: none;
    display: inline-block;
    margin-top: clamp(0.5rem, 0.625vw, 0.625rem);
    font-size: clamp(0.75rem, 0.8125vw, 0.8125rem);
    font-weight: 500;
    color: var(--text-muted);
    background: rgba(99, 102, 241, 0.05);
    padding: clamp(0.25rem, 0.375vw, 0.375rem) clamp(0.5rem, 0.625vw, 0.625rem);
    border-radius: 4px;
}

/* Product Description - Minimalist */
#order-standard_cart .products .product .product-desc {
    flex: 1;
    padding: clamp(1.25rem, 1.5vw, 1.5rem);
    float: none;
    width: 100%;
    margin: 0;
}

#order-standard_cart .products .product .product-desc p {
    font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 clamp(1rem, 1.25vw, 1.25rem) 0;
}

#order-standard_cart .products .product .product-desc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1vw, 1rem);
}

#order-standard_cart .products .product .product-desc ul li {
    font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: clamp(0.5rem, 0.625vw, 0.75rem);
    padding: clamp(0.5rem, 0.625vw, 0.625rem) 0;
    border-bottom: 1px solid var(--border-light);
}

#order-standard_cart .products .product .product-desc ul li:last-child {
    border-bottom: none;
}

#order-standard_cart .products .product .product-desc ul li::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(18px, 1.25vw, 20px);
    height: clamp(18px, 1.25vw, 20px);
    background: rgba(99, 102, 241, 0.1);
    color: var(--brand);
    border-radius: 4px;
    font-size: clamp(0.75rem, 0.8125vw, 0.8125rem);
    font-weight: 600;
    flex-shrink: 0;
    margin-top: 2px;
}

#order-standard_cart .products .product .product-desc .feature-value {
    font-weight: 600;
    color: var(--brand-dark);
    margin-right: clamp(0.25rem, 0.375vw, 0.5rem);
}

/* Product Footer - Clean Pricing & Button */
#order-standard_cart .products .product footer {
    padding: clamp(1.25rem, 1.5vw, 1.5rem);
    border-top: 1px solid var(--border-light);
    background: rgba(99, 102, 241, 0.02);
    float: none;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 1.25vw, 1.25rem);
}

#order-standard_cart .products .product .product-pricing {
    text-align: center;
    margin: 0;
}

#order-standard_cart .products .product .product-pricing .price {
    font-size: clamp(1.75rem, 2vw, 2.25rem);
    font-weight: 800;
    color: var(--brand-dark);
    display: block;
    margin-bottom: clamp(0.25rem, 0.375vw, 0.375rem);
    letter-spacing: -0.02em;
}

#order-standard_cart .products .product .product-pricing small {
    font-size: clamp(0.75rem, 0.8125vw, 0.8125rem);
    color: var(--text-muted);
    display: block;
    margin-top: clamp(0.25rem, 0.375vw, 0.375rem);
}

#order-standard_cart .products .product .product-pricing br + small {
    margin-top: clamp(0.5rem, 0.625vw, 0.625rem);
}

/* Order Now Button - Clean Minimalist Modern */
#order-standard_cart .products .product footer .btn-order-now {
    width: 100%;
    padding: clamp(0.875rem, 1vw, 1rem) clamp(1.5rem, 2vw, 2rem);
    font-size: clamp(0.9375rem, 1vw, 1rem);
    font-weight: 600;
    background: #10b981;
    border: 1px solid #10b981;
    border-radius: 8px;
    color: #ffffff;
    transition: all 0.2s ease;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 0.625vw, 0.75rem);
    text-decoration: none;
    letter-spacing: -0.005em;
}

#order-standard_cart .products .product footer .btn-order-now:hover {
    background: #059669;
    border-color: #059669;
    color: #ffffff;
}

#order-standard_cart .products .product footer .btn-order-now:active {
    background: #047857;
    opacity: 0.95;
}

#order-standard_cart .products .product footer .btn-order-now i {
    font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
}

/* Responsive Design */
@media (max-width: 991.98px) {
    #order-standard_cart .cart-sidebar,
    .secondary-cart-sidebar {
        padding-left: 0;
        margin-top: clamp(2rem, 2.5vw, 2.5rem);
    }
    
    .order-summary {
        position: static;
    }
    
    .view-cart-items .item:hover {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }
    
    #order-standard_cart .products .row.row-eq-height > [class*="col-"] {
        padding: 0 clamp(0.5rem, 0.75vw, 0.75rem);
        margin-bottom: clamp(1.25rem, 1.5vw, 1.5rem);
    }
    
    #order-standard_cart .products .row.row-eq-height > [class*="col-"]:first-child {
        padding-left: 0;
    }
    
    #order-standard_cart .products .row.row-eq-height > [class*="col-"]:last-child {
        padding-right: 0;
    }
}

@media (max-width: 767.98px) {
    #order-standard_cart {
        padding: clamp(1rem, 1.5vw, 1.5rem) 0;
    }
    
    .view-cart-items-header {
        display: none;
    }
    
    .view-cart-items .item-price {
        text-align: left;
        margin-top: clamp(0.75rem, 1vw, 1rem);
    }
    
    #order-standard_cart .products .product {
        border-radius: 10px;
    }
    
    #order-standard_cart .products .product header,
    #order-standard_cart .products .product .product-desc,
    #order-standard_cart .products .product footer {
        padding: clamp(1rem, 1.25vw, 1.25rem);
    }
}

/* ============================================
   NordVPN Page - Cyber Security Text Color
   Applied via JavaScript (hebrew-support.js)
   ============================================ */