/* --- WHMCS Custom Theme Styles --- */

:root {
  --primary-color: #0b2a63;
  --secondary-color: #2b5797;
  --accent-color: #0a7f26;

  --primary-dark: #0b2348;
  --primary-soft: #edf4ff;
  --accent-soft: #eef9f1;
  --accent-hover: #126d31;

  --bg-white: #ffffff;
  --bg-light: #f7faff;
  --bg-blue-soft: #f1f6ff;

  --text-dark:#14376f;
  --text-muted: #64748b;
  --text-white: #ffffff;

  --border-color: #dbe4f0;
  --shadow-soft: 0 16px 38px rgba(11, 42, 99, 0.12);
  --shadow-card: 0 10px 26px rgba(11, 42, 99, 0.08);
  --border-radius-sm: 10px;
  --border-radius-md: 18px;
  --border-radius-lg: 28px;
  --transition: all 0.3s ease;
}

body {
    font-family: 'Poppins', sans-serif;
}

/* =========================================
   1. Updated Header Styles (Modern Gradient)
========================================= */
.site-header, .custom-dark-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 999999 !important;
  border-bottom: 0 !important;
  background:#ffffff;
  box-shadow: 0 8px 24px rgba(6, 27, 66, 0.18) ;
  padding: 0 !important;
  transition: background 0.3s ease, box-shadow 0.3s ease !important;
}

.navbar {
  padding: 18px 0 !important;
}

.navbar-brand {
  color: var(--text-white) !important;
  font-size: 26px;
       font-weight: 600;
  letter-spacing: -0.5px;
}

/* Clean Header Brand */
.clean-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px;
  color: #ffffff !important;
  padding: 0;
  background: transparent;
}

.clean-brand:hover {
  color: #ffffff !important;
}

.clean-brand-icon {
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  color: var(--primary-color) !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  font-size: 22px !important;
  box-shadow: 0 8px 22px rgba(255, 255, 255, 0.16) !important;
  margin-right: 0 !important;
}

.clean-brand-icon i {
  color: var(--primary-color) !important; 
  font-size: 1.5rem !important;
  line-height: 1 !important;
}

.clean-brand-text {
  color: #ffffff !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.clean-brand-text span {
  color: #5ee07a !important;
}

.brand-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary-color);
  background: var(--bg-white);
  border-radius: 14px;
  font-size: 22px;
  box-shadow: 0 8px 22px rgba(255, 255, 255, 0.2);
}

.navbar-nav {
  gap: 10px;
}

.navbar-dark .navbar-nav .nav-link,
.custom-dark-header .nav-link,
.nav-link {
  color: var(--primary-color) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  padding: 12px 14px !important;
  border-radius: 10px;
  transition: var(--transition);
  letter-spacing: 0 !important;
  margin: 0 !important;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.show,
.custom-dark-header .nav-link:hover,
.nav-link:hover,
.nav-link.show {
  color: var(--primary-color) !important;
  background: rgba(255, 255, 255, 0.13) !important;
}

.header-actions {
  gap: 28px !important;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-white) !important;
  font-weight: 500 !important;
  white-space: nowrap;
  margin-right: 6px;
  text-decoration: none;
}

.btn-login {
  color: #ffffff !important;
  background: var(--accent-color) !important;
  border: 1px solid var(--accent-color) !important;
  border-radius: 12px !important;
  padding: 12px 26px !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 22px rgba(22, 128, 58, 0.22) !important;
  transition: var(--transition) !important;
  text-decoration: none;
}

.btn-login:hover {
  color: #ffffff !important;
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  transform: translateY(-2px);
}

.btn-accent {
  color: var(--text-white) !important;
  background: var(--accent-color);
  border: 1px solid var(--accent-color);
  border-radius: var(--border-radius-sm);
  padding: 11px 24px;
       font-weight: 600;
  box-shadow: 0 8px 22px rgba(10, 127, 38, 0.25);
  transition: var(--transition);
}

.btn-accent:hover {
  color: var(--text-white) !important;
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-2px);
}

/* WHMCS Secondary Navbar fallback wrapper placement adjustment */
.whmcs-nav-bar {background-color: #f8f9fa;border-bottom: 1px solid #e5e5e5;padding: 0px 0;}


/* =========================================
   2. Premium WHMCS Sub-Navbar
========================================= */
.custom-premium-bar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e1e5eb !important;
    border-top: 1px solid #e1e5eb !important;
    box-shadow: none !important;
}

.custom-premium-nav {
    display: flex !important;
    flex-direction: row !important;
    margin: 0 !important;
    padding: 0 !important;
}

.custom-premium-nav > li {
    list-style: none !important;
    margin: 0 !important;
}

.custom-premium-nav > li > a {
    padding: 18px 22px !important;
    color: #14376f !important;
    font-weight: 500 !important;
    font-size: 17px !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    border: none !important;
    background-color: transparent !important;
    transition: 0.2s ease-in-out !important;
}

.custom-premium-nav > li > a i {
    margin-right: 10px !important;
    font-size: 16px !important;
    color: #7987a1 !important;
}

.custom-premium-nav > li.active > a,
.custom-premium-nav > li > a:hover {
    background-color: #f4f8fc !important;
    color: #0b2a63 !important;
}

.custom-premium-nav > li.active > a i,
.custom-premium-nav > li > a:hover i {
    color: #0b2a63 !important;
}

.custom-premium-nav .dropdown-menu {
    border: 1px solid #e1e5eb !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important;
    margin-top: 0 !important;
}

.custom-premium-nav .dropdown-item {
    padding: 10px 20px !important;
    color: #14376f !important;
    font-weight: 500 !important;
}

.custom-premium-nav .dropdown-item:hover {
    background-color: #f4f8fc !important;
    color: #0b2a63 !important;
}

/* =========================================
   3. Premium Breadcrumb Styling
========================================= */
.master-breadcrumb {
    background-color: #f7faff !important; 
    padding: 15px !important;
    border-bottom: none;
}

.custom-premium-breadcrumb {
    background-color: transparent !important;
    padding: 10px 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.custom-premium-breadcrumb .breadcrumb-item {
    font-size: 14px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
}

.custom-premium-breadcrumb .breadcrumb-item a {
    color: #6c7a9c !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
}

.custom-premium-breadcrumb .breadcrumb-item a:hover {
    color: #0b2a63 !important;
}

.custom-premium-breadcrumb .breadcrumb-item i {
    font-size: 15px !important;
    margin-right: 6px !important;
    position: relative;
    top: -1px;
}

.custom-premium-breadcrumb .breadcrumb-item.active {
    color: #0b2a63 !important;
      font-weight: 600;
}

.custom-premium-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "\F285" !important;
    font-family: "bootstrap-icons" !important;
    color: #cbd3e1 !important;
    font-size: 11px !important;
    padding: 0 12px !important;
    float: none !important;
}

/* =========================================
   4. Alignment Fixes (Align with Main Logo)
========================================= */
.custom-premium-nav.mr-auto {
    margin-left: -22px !important; 
}

.custom-premium-nav.ml-auto {
    margin-right: -22px !important;
}

.custom-premium-breadcrumb {
    margin-left: -22px !important;
}

/* =========================================
   8. Updated Footer Styles (Exact Screenshot Match)
========================================= */
.site-footer, .custom-dark-footer {
  position: relative !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0.8) !important;
  background:
    radial-gradient(circle at top left, rgba(10, 127, 38, 0.15), transparent 35%),
    linear-gradient(135deg, #0b2348 0%, #0b2a63 60%, #14376f 100%) !important;
  padding: 80px 0 30px !important;
}

.site-footer::before {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  right: -150px;
  bottom: -200px;
  background: radial-gradient(circle, rgba(18, 109, 49, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 1;
}

.site-footer .container {
  position: relative;
  z-index: 2;
}

.clean-footer-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px;
  color: #ffffff !important;
  margin-bottom: 24px;
  text-decoration: none !important;
}

.clean-footer-brand:hover {
  color: #ffffff !important;
  padding-left: 0 !important;
}

.clean-footer-icon {
  width: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.clean-footer-icon i {
  color: #0b2a63 !important; 
  font-size: 1.4rem !important;
}

.clean-footer-text {
  color: #ffffff !important;
  font-size: 29px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px;
}

.clean-footer-text span {
  color: #5ee07a !important;
}

.site-footer p {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

.footer-contact p {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 14px !important;
  margin-bottom: 12px !important;
  display: flex;
  align-items: center;
}

.footer-contact i {
  color: #5ee07a !important;
  font-size: 14px !important;
  margin-right: 10px !important;
}

.footer-contact a {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
}

.footer-social {
  display: flex !important;
  gap: 10px !important;
  margin-top: 24px !important;
}

.footer-social a {
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
}

.footer-social a:hover {
  background: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  transform: translateY(-3px) !important;
  padding-left: 0 !important;
}

.site-footer h5, .custom-dark-footer h5 {
  position: relative !important;
  color: #ffffff !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  margin-bottom: 25px !important;
  padding-bottom: 10px !important;
}

.site-footer h5::after, .custom-dark-footer h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 2px;
  background: var(--accent-color) !important;
  border-radius: 2px;
}

.site-footer ul, .custom-dark-footer ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

.site-footer li, .custom-dark-footer li {
  margin-bottom: 12px !important;
}

.site-footer ul li a, .custom-dark-footer ul li a {
  color: #b5c6e8 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  display: inline-block;
}

.site-footer ul li a:hover, .custom-dark-footer ul li a:hover {
  color: #ffffff !important;
  padding-left: 0 !important;
}

.site-footer hr {
  opacity: 1 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  margin: 40px 0 20px !important;
}

.footer-bottom p {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  margin-bottom: 0 !important;
}

/* =========================================
   9. UNIQUE PREMIUM CONTACT PAGE DESIGN 
   (Full-Width Overlapping Hero)
========================================= */
.contact-hero-wrapper {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    padding: 40px 0 140px 0; /* Reduced top and bottom padding for a thinner banner */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: -1.5rem; 
    overflow: hidden;
}

.contact-hero-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    background-image: radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.4) 0%, transparent 50%), 
                      radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
    z-index: 1;
}

.premium-glass-badge {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 8px 16px;
         font-weight: 600;
    font-size: 13px;
    border-radius: 50px;
    letter-spacing: 0.5px;
}

.contact-main-content {
    margin-top: -90px; /* Adjusted to balance with the new padding */
    position: relative;
    z-index: 10;
    padding-bottom: 80px;
}

.premium-form-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 45px;
    box-shadow: 0 20px 40px rgba(11, 42, 99, 0.08);
    border: 1px solid rgba(11, 42, 99, 0.05);
    border-top: 5px solid var(--accent-color);
}

.modern-contact-form .input-group {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.modern-contact-form .input-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(11, 42, 99, 0.1);
    background: #ffffff;
}

.modern-contact-form .input-group-text {
    background: transparent;
    border: none;
    color: var(--accent-color);
    padding-left: 1.2rem;
    font-size: 25px;
}

.modern-contact-form .form-control {
    background: transparent;
    border: none;
    padding: 19px 15px 10px 12px;
    font-size: 15px;
    color: var(--text-dark);
    box-shadow: none !important;
}

.modern-contact-form .form-control::placeholder {
    color: #cbd5e1;
}

.custom-textarea {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 15px 20px !important;
    transition: all 0.3s ease;
}

.custom-textarea:focus {
    background: #ffffff !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(11, 42, 99, 0.1) !important;
    outline: none;
}

.modern-captcha-box {
    background: var(--bg-blue-soft);
    border: 1px dashed #94a3b8;
    border-radius: 16px;
}

.modern-submit-btn {
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);
    color: #ffffff !important;
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 15px rgba(10, 127, 38, 0.2);
    transition: all 0.3s ease;
    font-size: 18px;
}

.modern-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px rgba(10, 127, 38, 0.3);
}

.premium-info-card {
    background-color: var(--primary-dark);
    border-radius: 24px;
    padding: 45px;
    box-shadow: 0 20px 40px rgba(11, 35, 72, 0.15);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.card-glass-effect {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 250px;
    height: 250px;
    background: var(--accent-color);
    filter: blur(100px);
    opacity: 0.3;
    border-radius: 50%;
    z-index: 1;
}

.contact-method-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    transition: all 0.3s ease;
}

.contact-method-item:hover {
    transform: translateX(10px);
}

.cm-icon {
    width: 50px !important;
    height: 50px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 20px !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important;
}

.cm-icon i {
    color: #5ee07a !important; 
    font-size: 1.3rem !important;
}

.cm-label {
    display: block !important;
    color: #94a3b8 !important;
    font-size: 13px;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 2px !important;
}

.cm-value {
    color: #ffffff !important;
    font-size: 19px !important;
      font-weight: 600;
    margin: 0 0 2px 0 !important;
}

.cm-subtext {
    color: rgba(255,255,255,0.6) !important;
    font-size: 13px !important;
    display: block !important;
}


.modern-ticket-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
    border-radius: 12px;
    transition: all 0.3s ease;
    font-size: 15px;
}

.modern-ticket-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 991px) {
    .contact-hero-wrapper { padding: 30px 0 100px 0; margin-left: -50vw; margin-right: -50vw; }
    .contact-main-content { margin-top: -50px; }
    .premium-form-card, .premium-info-card { padding: 30px; }
}

/* =========================================
   10. Premium Captcha Input Fix
========================================= */
.premium-captcha-wrapper {
    max-width: 100% !important;
    margin: 0 auto;
}

.premium-captcha-wrapper img {
    border-radius: 8px !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.premium-captcha-wrapper input[type="text"],
.premium-captcha-wrapper .form-control {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 10px 15px !important;
    text-align: center !important;
      font-weight: 600;
    letter-spacing: 2px;
    color: var(--primary-color) !important;
    width: 180px !important;
    margin: 10px auto 0 auto !important;
    display: block !important;
}

.premium-captcha-wrapper input[type="text"]:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(11, 42, 99, 0.1) !important;
    outline: none !important;
}

/* =========================================
   11. Sticky Header Scroll Effect (White Theme)
========================================= */
.site-header.header-scrolled {
    background: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

.site-header.header-scrolled .clean-brand-text,
.site-header.header-scrolled .nav-link,
.site-header.header-scrolled .header-phone {
    color: var(--primary-color) !important;
}

.site-header.header-scrolled .clean-brand-text span {
    color: var(--accent-color) !important;
}

.site-header.header-scrolled .nav-link:hover,
.site-header.header-scrolled .nav-link.show {
    background: var(--bg-blue-soft) !important;
    color: var(--accent-color) !important;
}

.site-header.header-scrolled .clean-brand-icon {
    background: var(--primary-color) !important; 
    border: none !important;
    box-shadow: none !important;
}

.site-header.header-scrolled .clean-brand-icon i {
    color: #ffffff !important; 
}

/* =========================================
   12. Pure CSS Typography & Text Size Control (No Bootstrap Overrides)
========================================= */
/* Hero Section Text Rules */
.contact-hero-title {
    font-size: 45px;
         font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.contact-hero-desc {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
}

/* Left Form Section Text Rules */
.premium-form-title {
    font-size: 28px;
         font-weight: 600;
    color: var(--primary-color);
}

.premium-form-subtitle {
    font-size: 17px;
    color: var(--text-muted);
}

.custom-form-label {
    font-size: 16px;
         font-weight: 600;
    color: var(--primary-color);
}

/* Captcha Block Text Rules */
.premium-captcha-title {
    font-size: 18px;
         font-weight: 600;
    color: var(--primary-color);
}

.premium-captcha-desc {
    font-size: 14px;
    color: var(--text-muted);
}

/* Privacy & Footer Actions */
.premium-privacy-text {
    font-size: 14px;
    color: var(--text-muted);
}

.premium-privacy-link {
    color: var(--primary-color);
         font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.premium-privacy-link:hover {
    color: var(--accent-color);
}

/* Right Info Card Text Rules */
.premium-info-title {
    font-size: 28px !important;
      font-weight: 600;
    color: #ffffff !important;
}

.premium-info-subtitle {
    font-size: 16px !important;
    color: rgba(255, 255, 255, 0.65) !important;
    line-height: 1.5 !important;
}

.premium-ticket-note {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Mobile Typography Overrides */
@media (max-width: 768px) {
    .contact-hero-title {
        font-size: 2rem;
    }
    .contact-hero-desc {
        font-size: 1rem;
    }
}

/* =========================================
   13. Premium Account Dropdown Styles
========================================= */
.premium-account-dropdown {
    border-radius: 12px !important;
    margin-top: 15px !important;
    padding: 10px 0 !important;
    min-width: 220px;
    background-color: #ffffff;
}

.premium-account-dropdown .dropdown-item {
    padding: 12px 24px !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    color: var(--primary-color) !important;
    transition: var(--transition) !important;
}

.premium-account-dropdown .dropdown-item:hover {
    background-color: var(--bg-blue-soft) !important;
    color: var(--accent-color) !important;
}

/* Fix dropdown arrow spacing */
.btn-login.dropdown-toggle::after {
    margin-left: 8px;
    vertical-align: middle;
}

/* =========================================
   14. Mega Menu Styles
========================================= */
.mega-dropdown {
  position: static !important;
}

.mega-menu {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.mega-menu::before, 
.mega-menu::after {
    display: none !important;
}


.dropdown-backdrop {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}


.mega-menu .container {
  max-width: 1320px;
  background: var(--bg-white);
  border: 1px solid rgba(219, 228, 240, 0.8);
  border-top: none !important;
  border-radius: 0 0 28px 28px;
  padding: 42px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

.mega-left {
  border-right: 1px solid var(--border-color);
  padding-right: 32px;
  height: 100%; 
}

.mega-left h3 {
  color: var(--primary-color);
  font-size: 35px;
       font-weight: 600;
  margin-bottom: 18px;
}

.mega-left p {
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.8;
  margin-bottom: 0;
  font-size: 18px;
}

.mega-item {
  display: flex;
  gap: 18px;
  color: var(--text-dark) !important;
  border: 1px solid transparent;
  border-radius: var(--border-radius-md);
  padding: 18px;
  transition: var(--transition);
  text-decoration: none !important;

}

.mega-item:hover {
  background: var(--bg-light);
  border-color: var(--border-color);
  transform: translateY(-4px);
  color: var(--primary-color) !important;
}

.mega-icon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent-color);
  background: var(--accent-soft);
  border-radius: 18px;
  font-size: 26px;
}

.mega-item h5 {
  color: var(--primary-color);
       font-weight: 600;
  margin-bottom: 6px;
  font-size: 20px;
}

.mega-item p {
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Show mega menu on hover for desktop */
@media (min-width: 992px) {
    .mega-dropdown:hover .mega-menu {
        display: block;
        opacity: 1;
        visibility: visible;
    }
    .mega-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
}


.glass-input, 
.glass-input-group {
    height: 54px !important;
}


.glass-input-group .glass-input {
    height: 100% !important;
}



/* =========================================
   Premium Glassmorphism Login Modal 
========================================= */
.glass-modal {
    background-color: rgba(11, 35, 72, 0.4); 
}

.glass-modal-content {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    position: relative;
    /* border-top: 5px solid var(--accent-color); */
}

.glass-btn-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #ffffff;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    opacity: 1;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    z-index: 10;
    transition: var(--transition);
}

.glass-btn-close:hover {
    transform: rotate(90deg);
    background-color: var(--bg-light);
}

.glass-modal-title {
    color: var(--primary-color);
         font-weight: 600;
    font-size: 35px;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.glass-modal-subtitle {
    color: #64748b;
    font-size: 18px;
    margin-bottom: 30px;
}

.glass-label {
    font-size: 16px;
    font-weight: 5;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: block;
}

.glass-input, .glass-input-text {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid var(--border-color) !important;
    padding: 14px 18px !important;
    font-size: 15px;
    color: #212529 !important;
    box-shadow: none !important;
    transition: var(--transition);
    border-radius: 10px !important;
}

.glass-input::placeholder {
    color: #cbd5e1;
}

.glass-input:-webkit-autofill,
.glass-input:-webkit-autofill:hover, 
.glass-input:-webkit-autofill:focus,
.glass-input:-webkit-autofill:active {
    -webkit-text-fill-color: #212529 !important;
    -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

.glass-input-group {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important; /* Fixed border radius */
    display: flex;
    align-items: center;
    overflow: hidden; 
    transition: var(--transition);
}

.glass-input-group .glass-input, 
.glass-input-group .glass-input-text {
    border: none !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 0 !important;
}

/* Fix for focus disappearing */
.glass-input:focus, 
.glass-input-group:focus-within {
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 0 0 3px rgba(11, 35, 72, 0.08) !important;
}

.glass-input-group .glass-input:focus {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.glass-input-text {
    border: none !important;
    background: transparent !important;
    padding-right: 18px;
    padding-left: 10px;
    color: var(--primary-color);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-glass-checkbox .form-check-input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-color: #cbd5e1;
    cursor: pointer;
}

.custom-glass-checkbox .form-check-input:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.glass-checkbox-label {
    font-size: 15px;
    color: var(--text-muted);
    margin-left: 8px;
    cursor: pointer;
}

.glass-forgot-link {
    font-size: 15px;
         font-weight: 600;
    color: var(--accent-color);
    text-decoration: none;
    transition: var(--transition);
}

.glass-forgot-link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.glass-submit-btn {
    background: var(--accent-color);
    color: #ffffff !important;
         font-weight: 600;
    font-size: 18px;
    padding: 15px !important;
    margin-top: 10px;
    border-radius: var(--border-radius-md);
    border: none;
    box-shadow: 0 8px 20px rgba(10, 127, 38, 0.25);
    transition: var(--transition);
}

.glass-submit-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(10, 127, 38, 0.35);
}

.glass-border {
    border-color: rgba(11, 42, 99, 0.1) !important;
}

.glass-footer-text {
    font-size: 15px;
    color: var(--text-muted);
}

.glass-create-link {
         font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    margin-left: 5px;
    transition: var(--transition);
}

.glass-create-link:hover {
    color: var(--accent-color);
}

.glass-modal .modal-dialog {
    max-width: 460px !important; 
}

.glass-modal-content .modal-body {
    padding: 45px 40px !important; 
}

/* =========================================
   Registration Form Width & Base
========================================= */
#glassRegisterModal .modal-dialog {
    max-width: 850px !important; 
    width: 95% !important;
}

#glassRegisterModal .modal-body {
    padding: 45px 50px !important;
}

/* =========================================
   Registration Form Icons & Focus Fix
========================================= */
.glass-input-group .glass-input-text {
    background-color: #ffffff !important;
    color: var(--accent-color) !important;
    padding-left: 18px;
    padding-right: 5px;
    font-size: 17px;
}

.glass-modal .form-control.glass-input,
.glass-modal select.glass-input {
    background-color: #ffffff !important;
    color: #212529 !important;
    height: 54px !important; /* Force all inputs to be same height */
}

/* Fix for standard Select Dropdown arrow alignment */
.glass-modal select.glass-input {
    padding-left: 10px !important;
    background-position: right 15px center !important;
}

.glass-modal .form-control.glass-input:focus,
.glass-modal select.glass-input:focus,
.glass-input-group:focus-within {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 0 0 3px rgba(11, 35, 72, 0.08) !important;
}

.glass-input-group:focus-within .glass-input-text {
    border-color: #cbd5e1 !important;
}

/* =========================================
   WHMCS Phone Number (intl-tel-input) Fixes
========================================= */
.glass-modal .iti {
    width: 100% !important;
    display: block !important;
}

.glass-modal .iti__flag-container {
    background-color: #f8fafc !important; 
    border-right: 1px solid #cbd5e1 !important;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 0 10px;
    z-index: 5 !important;
    height: 52px; 
    margin-top: 1px;
    margin-left: 1px;
}

.glass-modal .iti__selected-flag {
    background: transparent !important;
    padding: 0 8px 0 0 !important;
}

.glass-modal .iti__selected-dial-code {
    color: #64748b !important;
      font-weight: 600;
    margin-left: 6px;
}

.glass-modal .iti input[type="tel"] {
    padding-left: 105px !important; 
    background-color: #ffffff !important; 
    border-radius: 10px !important;
}

.glass-modal .iti input[type="tel"]:focus {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 0 0 3px rgba(11, 35, 72, 0.08) !important;
}



/* =========================================
   FIX: Remove Double Borders & Shadows on Focus
========================================= */


.glass-input-group:focus-within {
    box-shadow: 0 0 0 3px rgba(11, 35, 72, 0.08) !important;
    border-radius: 10px !important;
    border: none !important; 
}


.glass-input-group .form-control.glass-input:focus,
.glass-input-group select.glass-input:focus {
    box-shadow: none !important; 
    border-color: #cbd5e1 !important;
    border-left-color: transparent !important; 
}


.glass-input-group:focus-within .glass-input-text {
    border-color: #cbd5e1 !important;
}


.glass-modal .iti input[type="tel"]:focus {
    box-shadow: 0 0 0 3px rgba(11, 35, 72, 0.08) !important;
    border: 1px solid #cbd5e1 !important;
}


/* =========================================
   ULTIMATE FIX: Remove Double Borders & Shadows
========================================= */


.glass-input-group {
    border: 1px solid #dbe4f0 !important;
    background-color: #ffffff !important;
    border-radius: 10px !important;
    padding: 0 !important;
    overflow: hidden !important;
}


.glass-input-group:focus-within {
    border: 1px solid #cbd5e1 !important; 
    box-shadow: 0 0 0 3px rgba(11, 35, 72, 0.08) !important; 
}


.glass-input-group .glass-input,
.glass-input-group .glass-input:focus,
.glass-input-group select.glass-input,
.glass-input-group select.glass-input:focus,
.glass-input-group .glass-input-text {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: transparent !important;
}


.glass-modal .iti input[type="tel"] {
    border: 1px solid #dbe4f0 !important;
}

.glass-modal .iti input[type="tel"]:focus {
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 0 0 3px rgba(11, 35, 72, 0.08) !important;
    outline: none !important;
}

.glass-input-group .glass-input:focus,
.glass-input-group select.glass-input:focus,
.glass-input-group .form-control.glass-input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: transparent !important;
}


.glass-input-group .glass-input,
.glass-input-group select.glass-input,
.glass-input-group .form-control.glass-input {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* =========================================
   FIX: Force Font Weight for Section Titles
========================================= */
h4.glass-section-title,
.glass-section-title {
      font-weight: 600;
}



/* =========================================================
   iHoster Custom CSS - Password Reset Page Only (Expanded UI)
========================================================= */

/* Background Section */
.ih-reset-wrapper {
    min-height: 85vh;
    display: flex;
    align-items: center;
}

/* Split Main Card - Expanded Size */
.ih-reset-split-card {
    border-radius: 28px !important;
    overflow: hidden;
    box-shadow: 0 30px 60px -12px rgba(11, 42, 99, 0.22) !important;
    border: 1px solid #e2e8f0 !important;
}

/* Banner Left Column */
.ih-reset-banner {
    background: linear-gradient(145deg, #0b2348 0%, #0a7f26 140%);
    position: relative;
    padding: 3.5rem !important; /* Loku padding */
}

.ih-security-badge {
    display: inline-block;
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 30px;
    color: #ffffff;
    font-size: 13px;
         font-weight: 600;
}

.ih-banner-title {
    font-size: 32px;
    line-height: 1.3;
}

.ih-banner-desc {
    font-size: 17px;
    line-height: 1.6;
}

.ih-feature-text {
    font-size: 16px;
}

.ih-form-heading {
    font-size: 2.2rem; /* Heading loku kara */
    color: #14376f;
}

.ih-form-subheading {
    font-size: 1rem;
    color: #64748b;
}

/* Hide Redundant WHMCS Default Inner Headings */
.ih-inner-whmcs-form h2,
.ih-inner-whmcs-form h3,
.ih-inner-whmcs-form .h3,
.ih-inner-whmcs-form p.text-muted,
.ih-inner-whmcs-form p.mb-0 {
    display: none !important;
}

/* Input Fields Overrides - Prominent Borders & Larger Inputs */
.ih-inner-whmcs-form form .form-group {
    margin-bottom: 1.5rem;
}

.ih-inner-whmcs-form form label {
    font-size: 16px;
         font-weight: 600;
    color: #14376f;
    margin-bottom: 0.6rem;
}

.ih-inner-whmcs-form form input[type="email"],
.ih-inner-whmcs-form form input[type="text"],
.ih-inner-whmcs-form form .form-control {
    border-radius: 14px !important;
    border: 2px solid #cbd5e1 !important; /* Loku 2px thickness border */
    padding: 1rem 1.25rem !important; /* Larger Input Height */
    font-size: 17px;
    background-color: #f8fafc !important;
    transition: all 0.25s ease !important;
}

.ih-inner-whmcs-form form input[type="email"]:focus,
.ih-inner-whmcs-form form input[type="text"]:focus,
.ih-inner-whmcs-form form .form-control:focus {
    border-color: #0a7f26 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 5px rgba(10, 127, 38, 0.18) !important;
}

/* Submit Button Overrides - Expanded Button */
.ih-inner-whmcs-form form button[type="submit"],
.ih-inner-whmcs-form form input[type="submit"],
.ih-inner-whmcs-form form .btn-primary {
    background: #0a7f26 !important;
    border-color: #0a7f26 !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    padding: 1rem 1.8rem !important; /* Larger Button Padding */
      font-weight: 600;
    width: 100% !important;
    font-size: 16px!important;
    transition: all 0.3s ease !important;
    box-shadow: 0 10px 25px rgba(10, 127, 38, 0.28) !important;
    margin-top: 0.75rem;
}

.ih-inner-whmcs-form form button[type="submit"]:hover,
.ih-inner-whmcs-form form input[type="submit"]:hover,
.ih-inner-whmcs-form form .btn-primary:hover {
    background: #126d31 !important;
    border-color: #126d31 !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(10, 127, 38, 0.38) !important;
}

/* Success State Icon Wrap */
.ih-success-icon-wrap {
    width: 80px;
    height: 80px;
    background: #eef9f1;
    color: #0a7f26;
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}


/* =========================================================
   Fix for Input Icon Alignment (Row Flex Override)
========================================================= */

/* Parent input group override */
.ih-inner-whmcs-form .form-group .input-group,
.ih-inner-whmcs-form .form-group .input-group-merge {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-radius: 14px !important;
    border: 2px solid #cbd5e1 !important;
    background-color: #f8fafc !important;
    overflow: hidden !important;
    padding: 0 1rem !important;
    transition: all 0.25s ease !important;
}

/* Focus state on main container */
.ih-inner-whmcs-form .form-group .input-group:focus-within,
.ih-inner-whmcs-form .form-group .input-group-merge:focus-within {
    border-color: #0a7f26 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 5px rgba(10, 127, 38, 0.18) !important;
}

/* Left Icon Prepend Container */
.ih-inner-whmcs-form .form-group .input-group-prepend,
.ih-inner-whmcs-form .form-group .input-group-text {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0.75rem 0 0 !important;
    color: #14376f !important;
    font-size: 1.1rem !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* Right Text Input Field */
.ih-inner-whmcs-form .form-group input[type="email"],
.ih-inner-whmcs-form .form-group input[type="text"],
.ih-inner-whmcs-form .form-group .form-control {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0.9rem 0 !important;
    font-size: 1.05rem !important;
    flex: 1 1 auto !important;
    height: auto !important;
    outline: none !important;
}



/* =========================
   WHMCS CLIENT HOME RESET
   ========================= */




body:has(.ih-client-dashboard) .master-breadcrumb {
    display: block !important;
    margin: 0 !important;
    padding-top: 25px !important;
    padding-bottom: 30px !important;
    border: 0 !important;
    background: var(--bg-light, #f7faff) !important;
}

body:has(.ih-client-dashboard) .master-breadcrumb > .container,
body:has(.ih-client-dashboard) .master-breadcrumb > .container-fluid {
    width: min(1500px, calc(100% - 56px)) !important;
    max-width: 1500px !important;
    margin: 0 auto !important; /* Centered with auto margin */
    padding-right: 0 !important;
    padding-left: 0 !important;
}

body:has(.ih-client-dashboard) .master-breadcrumb .breadcrumb {
    margin: 0 !important;
    padding: 0 !important;
}



body:has(.ih-client-dashboard) #main-body {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: var(--bg-light, #f7faff) !important;
}

body:has(.ih-client-dashboard) #main-body > .container,
body:has(.ih-client-dashboard) #main-body > .container-fluid {
    width: 100% !important;
    max-width: none !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

#main-body .row:has(.ih-client-dashboard) > .col-lg-4,
#main-body .row:has(.ih-client-dashboard) > .col-xl-3 {
    display: none !important;
}

#main-body .row:has(.ih-client-dashboard) {
    display: block !important;
    margin: 0 !important;
}

#main-body .row:has(.ih-client-dashboard) > .primary-content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
}

.ih-client-dashboard,
.ih-client-dashboard * {
    box-sizing: border-box;
}

.ih-client-dashboard {
    position: relative;
    width: 100%;
    min-width: 0;
    color: var(--text-dark);
    padding: 1px 60px;
    padding-left: 0px;
    padding-right: 0px;
}

.ih-client-dashboard a {
    text-decoration: none;
}

.ih-dashboard-addon,
.ih-dashboard-alert {
    width: min(1500px, calc(100% - 56px));
    margin: 20px auto;
}

/* =========================
   FULL-WIDTH HERO
   ========================= */
.ih-dashboard-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(420px, 0.88fr);
    align-items: center;
    min-height: 500px;
    width: 100%;
    padding-top: 58px;
    padding-right: max(28px, calc((100vw - 1500px) / 2 + 28px));
    padding-bottom: 108px;
    padding-left: max(28px, calc((100vw - 1500px) / 2 + 28px));
    overflow: hidden;
    isolation: isolate;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(circle at 82% 16%, rgba(64, 142, 255, 0.44), transparent 29%),
        radial-gradient(circle at 42% 112%, rgba(10, 127, 38, 0.22), transparent 35%),
        linear-gradient(126deg, #06183f 0%, #0b2a63 48%, #1657c2 100%);
    box-shadow: 0 26px 65px rgba(7, 26, 68, 0.24);
}

.ih-dashboard-hero::before,
.ih-dashboard-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}



.ih-dashboard-hero::after {
    right: -8%;
    bottom: -72%;
    width: 70%;
    aspect-ratio: 1;
    border: 1px solid rgba(125, 190, 255, 0.26);
    border-radius: 50%;
    box-shadow:
        0 0 0 38px rgba(125, 190, 255, 0.05),
        0 0 0 84px rgba(125, 190, 255, 0.04),
        0 0 0 138px rgba(125, 190, 255, 0.025);
}

.ih-hero-content {
    position: relative;
    z-index: 3;
    align-self: center;
    min-width: 0;
    max-width: 900px;
}

.ih-hero-eyebrow,
.ih-section-kicker,
.ih-panel-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #52df78;
    font-size: 0.76rem;
         font-weight: 600;
    letter-spacing: 0.13em;
    line-height: 1.2;
    text-transform: uppercase;
}

.ih-hero-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 999px;
    background: #52df78;
}

.ih-hero-title {
    max-width: 760px;
    margin: 15px 0 12px;
    color: var(--text-white);
    font-size: clamp(2.5rem, 4.6vw, 4.35rem);
         font-weight: 600;
    letter-spacing: -0.048em;
    line-height: 1.03;
}

.ih-hero-description {
    max-width: 690px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.02rem;
    line-height: 1.75;
}

/* Account strip */
.ih-account-summary {
    display: grid;
    grid-template-columns: minmax(270px, 1fr) auto auto;
    align-items: center;
    gap: 22px;
    width: min(820px, 100%);
    margin-top: 34px;
    padding: 17px 20px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: var(--border-radius-md);
    background: rgba(5, 24, 63, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 16px 36px rgba(0, 13, 52, 0.16);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.ih-account-main {
    display: flex;
    align-items: center;
    min-width: 0;
}

.ih-account-avatar {
    display: inline-flex;
    flex: 0 0 56px;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-right: 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 18px;
    color: var(--text-white);
    background: linear-gradient(145deg, #5597ff, #1d58d1);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
    font-size: 1.08rem;
         font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ih-account-identity {
    min-width: 0;
}

.ih-account-identity > strong {
    display: block;
    overflow: hidden;
    color: var(--text-white);
    font-size: 19px;
         font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ih-account-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
}

.ih-account-contact span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ih-account-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid rgba(82, 223, 120, 0.25);
    border-radius: 999px;
    color: #78ed96;
    background: rgba(10, 127, 38, 0.2);
    font-size: 0.7rem;
         font-weight: 600;
    white-space: nowrap;
}

.ih-account-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(90px, 1fr));
}

.ih-account-meta > div {
    padding: 2px 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.ih-account-meta span,
.ih-account-meta strong {
    display: block;
    white-space: nowrap;
}

.ih-account-meta span {
    color: rgba(255, 255, 255, 0.54);
    font-size: 0.63rem;
    text-transform: uppercase;
}

.ih-account-meta strong {
    margin-top: 5px;
    color: var(--text-white);
    font-size: 0.78rem;
         font-weight: 600;
}

/* Right-side illustration */
.ih-hero-visual {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    min-height: 360px;
    padding-left: 18px;
    pointer-events: none;
}

.ih-hero-visual img {
    position: relative;
    z-index: 2;
    display: block;
    width: min(100%, 590px);
    max-width: 590px;
    max-height: 410px;
    margin-left: auto;
    object-fit: contain;
    object-position: center right;
    filter: drop-shadow(0 30px 38px rgba(0, 15, 58, 0.42));
    transform: translate(12px, 4px) scale(1.04);
}

.ih-hero-glow {
    position: absolute;
    top: 50%;
    left: 56%;
    width: 110%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(42, 144, 255, 0.42), transparent 66%);
    filter: blur(10px);
    transform: translate(-50%, -50%);
}

/* =========================
   DOMAIN SEARCH
   ========================= */
.ih-domain-search-card {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(300px, 0.82fr) minmax(450px, 1.38fr);
    align-items: center;
    gap: 34px;
    width: min(1500px, calc(100% - 56px));
    margin: -58px auto 24px;
    padding: 26px 28px;
    border: 1px solid rgba(219, 228, 240, 0.92);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 24px 60px rgba(11, 42, 99, 0.16);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.ih-domain-heading {
    display: flex;
    align-items: center;
    min-width: 0;
}

.ih-domain-icon {
    display: inline-flex;
    flex: 0 0 68px;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-right: 18px;
    border: 1px solid #d9e7fb;
    border-radius: 22px;
    color: var(--primary-color);
    background: linear-gradient(145deg, #f5f9ff, #e5efff);
    font-size: 1.8rem;
    box-shadow: inset 0 1px 0 #fff;
}

.ih-domain-heading h2 {
    margin: 5px 0 3px;
    color: var(--primary-color);
    font-size: 22px;
         font-weight: 600;
    letter-spacing: -0.025em;
}

.ih-domain-heading p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.ih-section-kicker {
    color: var(--accent-color);
    font-size: 0.62rem;
}

.ih-domain-search-area {
    min-width: 0;
}

.ih-domain-form {
    background: var(--bg-white);
    display: flex;
    align-items: center;
    width: 100%;
    /* padding: 8px 8px 8px 25px; */
    /* border-radius: 50px; */ /* Lassana roun (Pill) shape eka */
    /* box-shadow: 0 15px 35px rgba(0,0,0,0.2); */
}

.ih-domain-input-wrap {
    display: flex;
    align-items: center;
    min-height: 58px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-white);
    box-shadow: inset 0 1px 2px rgba(11, 42, 99, 0.04);
    transition: var(--transition);
}

.ih-domain-input-wrap:focus-within {
    border-color: rgba(43, 87, 151, 0.72);
    box-shadow: 0 0 0 4px rgba(43, 87, 151, 0.1);
}

.ih-domain-input-wrap > i {
    margin-left: 18px;
    color: #8ea1bc;
    font-size: 1rem;
}

.ih-domain-input-wrap input {
    flex: 1;
    min-width: 0;
    height: 56px;
    padding: 0 16px;
    border: 0;
    outline: 0;
    color: var(--text-dark);
    background: transparent;
    font: inherit;
    font-size: 15px;
}

.ih-domain-input-wrap input::placeholder {
    color: #94a3b8;
}

.ih-domain-input-wrap button {
    display: inline-flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 170px;
    padding: 0 22px;
    border: 0;
    color: var(--text-white);
    background: linear-gradient(135deg, var(--accent-color), #10a13a);
    font-family: inherit;
    font-size: 16px;
         font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.ih-domain-input-wrap button:hover {
    background: linear-gradient(135deg, var(--accent-hover), var(--accent-color));
}

.ih-domain-tlds {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.ih-domain-tlds span,
.ih-domain-tlds a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 28px;
    padding: 5px 11px;
    border: 1px solid #e3eaf5;
    border-radius: 9px;
    color: var(--secondary-color);
    background: #f5f8fd;
    font-size: 18px;
         font-weight: 600;
    transition: var(--transition);
}

.ih-domain-tlds a:hover {
    border-color: rgba(10, 127, 38, 0.24);
    color: var(--accent-color);
    background: var(--accent-soft);
}

/* =========================
   STAT CARDS
   ========================= */
.ih-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    width: min(1500px, calc(100% - 56px));
    margin: 0 auto 24px;
}

.ih-stat-card {
    --ih-stat-accent: var(--secondary-color);
    --ih-stat-soft: var(--primary-soft);
    position: relative;
    display: grid;
    grid-template-columns: 75px minmax(0, 1fr) 20px;
    align-items: center;
    gap: -1px;
    min-height: 126px;
    padding: 26px 30px 40px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-dark);
    background: linear-gradient(145deg, #fff 0%, var(--ih-stat-soft) 165%);
    box-shadow: var(--shadow-card);
    transition: var(--transition);
}

.ih-stat-card::after {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -38px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--ih-stat-soft);
    opacity: 0.75;
    transition: var(--transition);
}

.ih-stat-card:hover {
    border-color: var(--ih-stat-accent);
    color: var(--text-dark);
    box-shadow: 0 20px 38px rgba(11, 42, 99, 0.14);
    transform: translateY(-6px);
}

.ih-stat-card:hover::after {
    transform: scale(1.16);
}

.ih-stat-services {
    --ih-stat-accent: #2563eb;
    --ih-stat-soft: #edf4ff;
}

.ih-stat-domains {
    --ih-stat-accent: #0a8f31;
    --ih-stat-soft: #eefaf1;
}

.ih-stat-tickets {
    --ih-stat-accent: #e83a45;
    --ih-stat-soft: #fff1f2;
}

.ih-stat-invoices {
    --ih-stat-accent: #e9780b;
    --ih-stat-soft: #fff7eb;
}

.ih-stat-credit {
    --ih-stat-accent: #7358d5;
    --ih-stat-soft: #f4f1ff;
}

.ih-stat-icon {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    color: var(--ih-stat-accent);
    background: var(--ih-stat-soft);
    font-size: 30px;
}

.ih-stat-content {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.ih-stat-content > strong {
    overflow: hidden;
    color: var(--primary-color);
    font-size: 22px !important;
         font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ih-stat-content > strong.ih-credit-value {
    font-size: 1.04rem;
}

.ih-stat-content > span {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 16px !important;
         font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ih-stat-content > small {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    color: var(--ih-stat-accent);
    font-size: 16px !important;
         font-weight: 600;
    white-space: nowrap;
}

.ih-stat-arrow {
    position: relative;
    z-index: 2;
    color: #91a0b7;
    font-size: 0.78rem;
}

/* =========================
   MAIN PANELS
   ========================= */
.ih-dashboard-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: 20px;
    width: min(1500px, calc(100% - 56px));
    margin: 0 auto 42px;
}

.ih-dashboard-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background: var(--bg-white);
    box-shadow: var(--shadow-card);
}

.ih-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 82px;
    padding: 18px 22px;
    border-bottom: 1px solid #e7edf6;
    background: linear-gradient(180deg, #fff, #fcfdff);
}

.ih-panel-title-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
}

.ih-panel-icon {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-right: 13px;
    border-radius: 13px;
    color: var(--text-white);
    background: linear-gradient(145deg, var(--primary-color), #1c58bb);
    box-shadow: 0 10px 20px rgba(11, 42, 99, 0.18);
    font-size: 1rem;
}

.ih-ticket-panel-icon {
    color: var(--primary-color);
    background: var(--primary-soft);
    box-shadow: none;
}

.ih-panel-kicker {
    color: var(--accent-color);
    font-size: 0.56rem;
}

.ih-panel-title-wrap h2 {
    margin: 4px 0 0;
    color: var(--primary-color);
    font-size: 21px;
         font-weight: 600;
    letter-spacing: -0.015em;
}

.ih-panel-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid #e3ebf6;
    border-radius: 10px;
    color: var(--secondary-color);
    background: #f7faff;
    font-size: 12px;
         font-weight: 600;
    transition: var(--transition);
}

.ih-panel-link:hover {
    border-color: #d5e2f4;
    color: var(--primary-color);
    background: var(--primary-soft);
}

.ih-panel-body {
    min-height: 330px;
    padding: 28px;
}

.ih-empty-state {
    display: flex;
    min-height: 274px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.ih-empty-state h3 {
    margin: 12px 0 7px;
    color: var(--primary-color);
    font-size: 18px;
         font-weight: 600;
}

.ih-empty-state p {
    max-width: 500px;
    margin: 0 auto 18px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.65;
}

.ih-empty-illustration {
    position: relative;
    width: 184px;
    height: 122px;
    margin-bottom: 2px;
}

.ih-empty-browser {
    position: absolute;
    top: 14px;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 126px;
    height: 84px;
    border: 1px solid #cfe0f7;
    border-radius: 14px;
    color: #4f7fca;
    background: linear-gradient(145deg, #fff, #edf4ff);
    box-shadow: 0 18px 28px rgba(43, 87, 151, 0.13);
    font-size: 1.55rem;
    transform: translateX(-50%) rotate(-2deg);
}

.ih-empty-browser-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 18px;
    border-bottom: 1px solid #dce8f8;
    border-radius: 14px 14px 0 0;
    background:
        radial-gradient(circle at 12px 9px, #ff8b8b 2px, transparent 3px),
        radial-gradient(circle at 22px 9px, #f8c45c 2px, transparent 3px),
        radial-gradient(circle at 32px 9px, #55c97b 2px, transparent 3px);
}

.ih-empty-cloud {
    position: absolute;
    right: 10px;
    bottom: 7px;
    z-index: 4;
    color: #d9e8fb;
    font-size: 3.2rem;
    filter: drop-shadow(0 8px 10px rgba(43, 87, 151, 0.12));
}

.ih-empty-orbit {
    position: absolute;
    border: 1px solid #dbe8f8;
    border-radius: 50%;
}

.ih-empty-orbit-one {
    inset: 4px 12px 18px;
}

.ih-empty-orbit-two {
    inset: 24px 0 0;
    opacity: 0.65;
}

.ih-primary-action,
.ih-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 10px 17px;
    border-radius: 12px;
    font-size: 18px;
         font-weight: 600;
    transition: var(--transition);
}

.ih-primary-action {
    color: var(--text-white);
    background: linear-gradient(135deg, var(--accent-color), #12a63e);
    box-shadow: 0 12px 20px rgba(10, 127, 38, 0.18);
}

.ih-primary-action:hover {
    color: var(--text-white);
    background: linear-gradient(135deg, var(--accent-hover), var(--accent-color));
    transform: translateY(-2px);
}

.ih-secondary-action {
    border: 1px solid #d7e5f7;
    color: var(--secondary-color);
    background: var(--primary-soft);
}

.ih-secondary-action:hover {
    color: var(--primary-color);
    background: #e5effd;
    transform: translateY(-2px);
}

.ih-support-status {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 108px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 35%, #ecf9ef 36%, #ecf9ef 58%, transparent 59%);
}

.ih-support-status::before,
.ih-support-status::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(10, 127, 38, 0.12);
    border-radius: 50%;
}

.ih-support-status::before {
    inset: 10px;
}

.ih-support-status::after {
    inset: 0;
}

.ih-support-status span {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: #16a042;
    background: #e3f7e8;
    font-size: 1.55rem;
}

/* Dynamic WHMCS panel content */
.ih-panel-html {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.65;
}

.ih-panel-html a {
    color: var(--secondary-color);
         font-weight: 600;
}

.ih-dynamic-list {
    display: grid;
    gap: 10px;
}

.ih-dynamic-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid #e4ebf5;
    border-radius: 12px;
    color: var(--text-dark);
    background: #fbfdff;
    font-size: 0.76rem;
    transition: var(--transition);
}

.ih-dynamic-list-item:hover,
.ih-dynamic-list-item.active {
    border-color: #cfdcf0;
    color: var(--primary-color);
    background: var(--primary-soft);
}

.ih-dynamic-list-item > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.ih-list-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--accent-color);
    background: var(--accent-soft);
    font-size: 0.64rem;
         font-weight: 600;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1299.98px) {
    .ih-dashboard-hero {
        grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    }

    .ih-account-summary {
        grid-template-columns: minmax(230px, 1fr) auto;
    }

    .ih-account-meta {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .ih-account-meta > div:first-child {
        border-left: 0;
    }

    .ih-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .ih-dashboard-hero {
        grid-template-columns: 1fr;
        min-height: 560px;
        padding-top: 46px;
        padding-right: 34px;
        padding-bottom: 138px;
        padding-left: 34px;
    }

    .ih-hero-content {
        max-width: 760px;
    }

    .ih-hero-visual {
        position: absolute;
        right: -24px;
        bottom: 18px;
        width: 430px;
        min-height: 0;
        padding: 0;
        opacity: 0.5;
    }

    .ih-hero-visual img {
        width: 100%;
        max-height: 290px;
        transform: none;
    }

    .ih-account-summary {
        width: 100%;
    }

    .ih-domain-search-card {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .ih-dashboard-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .ih-dashboard-hero {
        min-height: auto;
        padding: 38px 22px 112px;
    }

    .ih-hero-title {
        font-size: clamp(2rem, 9vw, 3rem);
    }

    .ih-hero-description {
        font-size: 0.88rem;
    }

    .ih-hero-visual {
        right: -92px;
        bottom: 6px;
        width: 350px;
        opacity: 0.28;
    }

    .ih-account-summary {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px;
    }

    .ih-account-badge {
        justify-self: start;
    }

    .ih-account-meta {
        grid-column: auto;
    }

    .ih-account-meta > div {
        padding: 2px 12px;
    }

    .ih-domain-search-card,
    .ih-stats-grid,
    .ih-dashboard-content-grid {
        width: calc(100% - 24px);
    }

    .ih-domain-search-card {
        margin-top: -58px;
        padding: 22px;
        border-radius: 20px;
    }

    .ih-domain-heading {
        align-items: flex-start;
    }

    .ih-domain-icon {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
        border-radius: 17px;
        font-size: 1.4rem;
    }

    .ih-domain-input-wrap {
        flex-wrap: wrap;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .ih-domain-input-wrap:focus-within {
        box-shadow: none;
    }

    .ih-domain-input-wrap > i {
        position: absolute;
        z-index: 2;
        margin: 19px 0 0 18px;
    }

    .ih-domain-input-wrap input {
        flex: 0 0 100%;
        width: 100%;
        padding-left: 44px;
        border: 1px solid var(--border-color);
        border-radius: 14px;
        background: var(--bg-white);
    }

    .ih-domain-input-wrap button {
        width: 100%;
        min-height: 50px;
        margin-top: 10px;
        border-radius: 14px;
    }

    .ih-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ih-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .ih-panel-link {
        align-self: stretch;
        justify-content: center;
    }

    .ih-panel-body {
        min-height: 300px;
        padding: 22px 18px;
    }
}

@media (max-width: 520px) {
    .ih-account-contact {
        flex-direction: column;
    }

    .ih-account-meta {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ih-account-meta > div {
        padding: 0;
        border-left: 0;
    }

    .ih-stats-grid {
        grid-template-columns: 1fr;
    }

    .ih-stat-card {
        min-height: 112px;
    }

    .ih-domain-heading {
        flex-direction: column;
    }

    .ih-domain-icon {
        margin: 0 0 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ih-client-dashboard *,
    .ih-client-dashboard *::before,
    .ih-client-dashboard *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}


/* =========================
   FULL-WIDTH HERO (UPDATED)
   ========================= */
.ih-dashboard-hero {
    position: relative;
    display: grid;
    /* Grid eken 2kata kaduwa: Content eka wamata, Image eka dakunata */
    grid-template-columns: minmax(0, 1.2fr) minmax(400px, 0.8fr);
    align-items: center;
    min-height: 400px; /* Mahatha adu kara (Kalin 500px) */
    width: 100%;
    padding-top: 40px; /* Uda idak adu kara */
    padding-right: max(28px, calc((100vw - 1600px) / 2 + 28px));
    padding-bottom: 90px; /* Domain box ekata overlap wenna ida thiya gaththa */
    padding-left: max(28px, calc((100vw - 1600px) / 2 + 28px));
    overflow: hidden;
    isolation: isolate;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(circle at 82% 16%, rgba(64, 142, 255, 0.44), transparent 29%),
        radial-gradient(circle at 42% 112%, rgba(10, 127, 38, 0.22), transparent 35%),
        linear-gradient(126deg, #06183f 0%, #0b2a63 48%, #1657c2 100%);
    box-shadow: 0 26px 65px rgba(7, 26, 68, 0.24);
}

.ih-dashboard-hero::before,
.ih-dashboard-hero::after {
    /* content: ""; */
    position: absolute;
    z-index: -1;
    pointer-events: none;
}


.ih-dashboard-hero::after {
    right: -8%;
    bottom: -72%;
    width: 70%;
    aspect-ratio: 1;
    border: 1px solid rgba(125, 190, 255, 0.26);
    border-radius: 50%;
    box-shadow:
        0 0 0 38px rgba(125, 190, 255, 0.05),
        0 0 0 84px rgba(125, 190, 255, 0.04),
        0 0 0 138px rgba(125, 190, 255, 0.025);
}

.ih-hero-content {
    position: relative;
    z-index: 3;
    align-self: center;
    min-width: 0;
    max-width: 850px;
}

.ih-hero-eyebrow,
.ih-section-kicker,
.ih-panel-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var();
    font-size: 12px;
         font-weight: 600;
    letter-spacing: 0.13em;
    line-height: 1.2;
    text-transform: uppercase;
}

.ih-hero-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 999px;
    background: #52df78;
}

.ih-hero-title {
    max-width: 760px;
    margin: 15px 0 12px;
    color: var(--text-white);
    font-size: 56px;
         font-weight: 600;
    letter-spacing: -0.048em;
    line-height: 1.03;
}

.ih-hero-description {
    max-width: 690px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 18px;
    line-height: 1.75;
}

/* Account strip */
.ih-account-summary {
    display: grid;
    grid-template-columns: minmax(270px, 1fr) auto auto;
    align-items: center;
    gap: 22px;
    width: min(900px, 100%);
    margin-top: 34px;
    padding: 17px 20px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: var(--border-radius-md);
    background: rgba(5, 24, 63, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 16px 36px rgba(0, 13, 52, 0.16);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.ih-account-main {
    display: flex;
    align-items: center;
    min-width: 0;
}

.ih-account-avatar {
    display: inline-flex;
    flex: 0 0 56px;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-right: 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 18px;
    color: var(--text-white);
    background: linear-gradient(145deg, #5597ff, #1d58d1);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
    font-size: 1.08rem;
         font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ih-account-identity {
    min-width: 0;
}

.ih-account-identity > strong {
    display: block;
    overflow: hidden;
    color: var(--text-white);
    font-size: 19pxpx;
         font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ih-account-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
    flex-direction: row;
}

.ih-account-contact span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.ih-account-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid rgba(82, 223, 120, 0.25);
    border-radius: 999px;
    color: #78ed96;
    background: rgba(10, 127, 38, 0.2);
    font-size: 12px;
         font-weight: 600;
    white-space: nowrap;
}

.ih-account-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(90px, 1fr));
}

.ih-account-meta > div {
    padding: 2px 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.ih-account-meta span,
.ih-account-meta strong {
    display: block;
    white-space: nowrap;
    font-size: 13px !important;
}

.ih-account-meta span {
    color: rgba(255, 255, 255, 0.54);
    font-size: 0.63rem;
    text-transform: uppercase;
}

.ih-account-meta strong {
    margin-top: 5px;
    color: var(--text-white);
    font-size: 0.78rem;
         font-weight: 600;
}

/* Right-side illustration (Updated to sit correctly on the right) */
.ih-hero-visual {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Dakunata thallu wenawa */
    min-width: 0;
    min-height: 280px;
    padding-left: 18px;
    pointer-events: none;
}

.ih-hero-visual img {
    position: relative;
    z-index: 2;
    display: block;
    width: min(100%, 488px);
    max-height: 327px;
    margin-left: auto;
    margin-right:20px;
    object-fit: contain;
    object-position: center right;
    filter: drop-shadow(0 30px 38px rgba(0, 15, 58, 0.42));
    transform: scale(1.7)  translateX(20px) translateY(30px);
    transform-origin: center right;
}

.ih-hero-glow {
    position: absolute;
    top: 50%;
    left: 56%;
    width: 110%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(42, 144, 255, 0.42), transparent 66%);
    filter: blur(10px);
    transform: translate(-50%, -50%);
}

/* Update Mobile Responsive Media Query */
@media (max-width: 1299.98px) {
    .ih-dashboard-hero {
        grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    }
}
@media (max-width: 991.98px) {
    .ih-dashboard-hero {
        grid-template-columns: 1fr;
        min-height: 520px;
        padding-top: 40px;
        padding-bottom: 120px;
    }
    .ih-hero-visual {
        position: absolute;
        right: -20px;
        bottom: 15px;
        width: 400px;
        opacity: 0.5;
    }
}


.ih-stats-grid .ih-stat-card {
    padding-bottom: 45px !important;
}


.ih-stats-grid .ih-stat-content {
    position: static !important;
}


.ih-stats-grid .ih-stat-content > small {
    position: absolute !important;
    bottom: 14px !important;
    right: 16px !important;
    margin: 0 !important;
}



/* ==========================================================================
   iHOSTER - MY PRODUCTS & SERVICES (UPDATED WITH FIXES)
   ========================================================================== */


/* ==========================================================================
   01. PAGE LAYOUT
   ========================================================================== */

.col-lg-4.col-xl-3 {
    display: none !important;
}

.primary-content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

.table-container {
    overflow: visible;
}


/* ==========================================================================
   02. HERO
   ========================================================================== */

.premium-hero-header {
    position: relative;
    width: 100%;
    min-height: 210px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: 24px;
    background: radial-gradient(circle at 85% 45%, rgba(25, 117, 225, 0.22), transparent 31%),
                linear-gradient(110deg, #08275f 0%, #0b326f 52%, #0d467f 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 16px 35px rgba(14, 42, 85, 0.13);
}

.premium-hero-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 78% 53%, rgba(49, 159, 255, 0.13), transparent 25%);
}

.premium-hero-header::after {
    content: "";
    position: absolute;
    top: 0;
    right: 9%;
    width: 52%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.72;
    background-image: url("data:image/svg+xml,%3Csvg width='760' height='210' viewBox='0 0 760 210' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%233d9cf1' stroke-opacity='.26' stroke-width='1'%3E%3Cpath d='M20 92 L90 118 L165 72 L242 126 L315 82 L392 120 L468 65 L548 105 L620 78 L712 112'/%3E%3Cpath d='M90 118 L122 159 L205 145 L242 126'/%3E%3Cpath d='M315 82 L355 47 L430 79 L468 65'/%3E%3Cpath d='M548 105 L576 148 L651 136 L712 112'/%3E%3C/g%3E%3Cg fill='%2341b4ff'%3E%3Ccircle cx='20' cy='92' r='3'/%3E%3Ccircle cx='90' cy='118' r='3'/%3E%3Ccircle cx='165' cy='72' r='3'/%3E%3Ccircle cx='242' cy='126' r='3'/%3E%3Ccircle cx='315' cy='82' r='3'/%3E%3Ccircle cx='392' cy='120' r='3'/%3E%3Ccircle cx='468' cy='65' r='3'/%3E%3Ccircle cx='548' cy='105' r='3'/%3E%3Ccircle cx='620' cy='78' r='3'/%3E%3Ccircle cx='712' cy='112' r='3'/%3E%3Ccircle cx='122' cy='159' r='2.5'/%3E%3Ccircle cx='205' cy='145' r='2.5'/%3E%3Ccircle cx='355' cy='47' r='2.5'/%3E%3Ccircle cx='430' cy='79' r='2.5'/%3E%3Ccircle cx='576' cy='148' r='2.5'/%3E%3Ccircle cx='651' cy='136' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* ==========================================================================
   03. HERO LEFT CONTENT
   ========================================================================== */

.hero-content-left {
    position: relative;
    z-index: 4;
    width: 58%;
    max-width: 700px;
    padding: 34px 48px;
}

.hero-kicker {
    display: block;
    margin-bottom: 10px;
    color: #22d75c;
    font-size: 12px;
         font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}

.premium-hero-header h1 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 35px;
         font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.5px;
}

.premium-hero-header p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 18px;
    line-height: 1.65;
}


/* ==========================================================================
   04. HERO BUTTONS
   ========================================================================== */

.hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 21px;
}

.hero-action-btn {
    min-height: 40px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 9px;
    font-size: 16px;
         font-weight: 600;
    text-decoration: none !important;
    transition: transform 0.2s ease, background 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
}

.hero-action-primary {
    color: #ffffff !important;
    background: #07912d;
    border: 1px solid #07912d;
    box-shadow: 0 7px 17px rgba(0, 139, 43, 0.23);
}

.hero-action-primary:hover {
    color: #ffffff !important;
    background: #078227;
    border-color: #078227;
    transform: translateY(-1px);
    box-shadow: 0 9px 21px rgba(0, 139, 43, 0.3);
}

.hero-action-secondary {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.27);
}

.hero-action-secondary:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}


/* ==========================================================================
   05. HERO IMAGE
   ========================================================================== */

.hero-illustration {
    position: relative;
    z-index: 5;
    width: 40%; 
    height: 210px; 
    padding-right: 40px; 
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.hero-illustration img {
    display: block;
    width: auto;
    max-width: 400px;
    object-fit: contain;
    filter: drop-shadow(0 14px 20px rgba(0, 15, 45, 0.28));
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


.hero-illustration img:hover {
    transform: translateY(-5px) scale(1.03); 
}

/* ==========================================================================
   06. TOOLBAR
   ========================================================================== */

.services-toolbar {
    width: 100%;
    min-height: 62px;
    margin-bottom: 12px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-radius: 15px;
    background: #ffffff;
    border: 1px solid #e5ebf3;
    box-shadow: 0 5px 18px rgba(15, 38, 78, 0.045);
}


/* ==========================================================================
   07. SEARCH
   ========================================================================== */

.services-search-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.services-search {
    position: relative;
    width: 340px;
}

html {
    scroll-behavior: smooth;
}

.services-search > i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #8090a7;
    font-size: 0.92rem;
}

.services-search input {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 41px;
    outline: none;
    border-radius: 9px;
    border: 1px solid #dce4ee;
    background: #ffffff;
    color: #203c65;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.services-search input::placeholder {
    color: #8290a4;
}

.services-search input:focus {
    border-color: #9bbce6;
    box-shadow: 0 0 0 3px rgba(36, 100, 185, 0.07);
}

.services-sort-btn {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid #dce4ee;
    background: #ffffff;
    color: #173c73;
    cursor: pointer;
    transition: background 0.2s ease, border 0.2s ease, color 0.2s ease;
}

.services-sort-btn:hover {
    background: #f2f6fc;
    border-color: #bdcce0;
}

.services-sort-btn.sort-desc i {
    transform: rotate(180deg);
}


/* ==========================================================================
   08. FILTER BAR (FIXED ARTIFACTS)
   ========================================================================== */

.services-filters {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border-radius: 10px;
    background: #fafbfd;
    border: 1px solid #e4eaf2;
}

.btn-filter {
    height: 32px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #5f7189;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn-filter:hover {
    color: #0b2a63;
    background: #ffffff;
}

.btn-filter.active {
    color: #1558be;
    background: #ffffff;
         font-weight: 600;
    box-shadow: 0 2px 8px rgba(20, 58, 110, 0.09);
}

.filter-count {
    font-size: 0.69rem;
    opacity: 0.8;
}

.filter-dot {
    width: 7px;
    height: 7px;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.filter-active { background: #25b94d; }
.filter-pending { background: #f4a30b; }
.filter-suspended { background: #ff6c2c; }
.filter-terminated { background: #75859c; }
.filter-cancelled { background: #ed5252; }


/* ==========================================================================
   09. TABLE PANEL
   ========================================================================== */

.services-list-panel {
    width: 100%;
    border-radius: 14px;
    border: 1px solid #e4e9f1;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 5px 18px rgba(15, 37, 73, 0.035);
}

.services-list-panel .table-container {
    margin: 0;
    background: transparent;
}


/* ==========================================================================
   10. DATATABLE CLEANUP (FIXED "Showing 0 to 0")
   ========================================================================== */

.dataTables_wrapper {
    padding: 0 !important;
}

.dataTables_wrapper .dataTables_filter, 
.dataTables_wrapper .dataTables_length, 
.dataTables_wrapper .dataTables_info {
    display: none !important;
}

table.dataTable.no-footer {
    border-bottom: 0 !important;
}

table.dataTable thead .sorting, 
table.dataTable thead .sorting_asc, 
table.dataTable thead .sorting_desc {
    background-image: none !important;
}

table.dataTable thead th::before, 
table.dataTable thead th::after {
    display: none !important;
}


/* ==========================================================================
   11. TABLE
   ========================================================================== */

.services-premium-table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    background: #ffffff !important;
}

.services-premium-table thead {
    background: #fbfcfe;
}

/* GLOBAL PREMIUM TABLE HEADER FIX (Light Header for ALL Custom Pages) */
.services-premium-table thead th {
    height: 43px;
    padding: 10px 40px !important;
    vertical-align: middle !important;
    border: 0 !important;
    border-bottom: 1px solid #e7ecf3 !important;
    background-color: #14376e !important;
    background-image: none !important; /* Removes WHMCS default dark gradient */
    color: #ffffff !important;
    font-size: 14px;
      font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.75px;
}


/* ==========================================================================
   12. TABLE ROW
   ========================================================================== */

.services-premium-table tbody tr {
    background: #ffffff !important;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.services-premium-table tbody tr:hover {
    background: #fafcff !important;
}

.services-premium-table tbody td {
    height: 63px;
    padding: 8px 18px !important;
    vertical-align: middle !important;
    border: 0 !important;
    border-bottom: 1px solid #edf0f5 !important;
    background: transparent !important;
    color: #506079;
    font-size: 14px !important;
}

.services-premium-table tbody tr:last-child td {
    border-bottom: 0 !important;
}


/* ==========================================================================
   13-16. PRODUCT, PRICE, DUE DATE, STATUS
   ========================================================================== */

.service-product {
    display: flex;
    align-items: center;
    gap: 12px;
}

.service-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 1.15rem;
    border: 1px solid transparent;
}

.service-icon-cpanel { color: #f46a25; background: #fff4ed; border-color: #ffe4d3; }
.service-icon-reseller { color: #ff6d27; background: #fff4ef; border-color: #fee5d8; }
.service-icon-vps { color: #1768db; background: #eef5ff; border-color: #dceaff; }
.service-icon-email { color: #5571ef; background: #f1f3ff; border-color: #dfe3ff; }
.service-icon-windows { color: #1787e7; background: #eff8ff; border-color: #dcefff; }
.service-icon-dedicated { color: #7c56dd; background: #f5f0ff; border-color: #e7dcff; }
.service-icon-wordpress { color: #1688c7; background: #eff8fd; border-color: #d8eef8; }
.service-icon-default { color: #1768db; background: #eef5ff; border-color: #dceaff; }

.service-product-details {
    min-width: 0;
}

.service-product-name {
    margin-bottom: 3px;
    color: #102b5c;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
}

.service-domain {
    display: inline-block;
    max-width: 230px;
    overflow: hidden;
    color: #617797;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-domain:hover { color: #1768d7; }
.service-domain-empty { color: #98a5b6; }

.service-price { color: #4f6079; font-size: 14px; font-weight: 500; }
.service-billing-cycle { color: #60718a; font-size: 14px; }

.service-due-date {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #52647e;
    font-size: 14px;
}

.service-due-date i {
    color: #7f9cc2;
    font-size: 14px;
}

.service-status {
    min-height: 27px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 7px;
    font-size: 14px;
         font-weight: 600;
    border: 1px solid transparent;
}

.service-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.service-status.status-active { color: #1ca447; background: #edfaef; border-color: #d9f4de; }
.service-status.status-pending { color: #1680d2; background: #edf7ff; border-color: #dbefff; }
.service-status.status-suspended { color: #d99005; background: #fff7e8; border-color: #fbe9c3; }
.service-status.status-terminated { color: #67778f; background: #f3f5f8; border-color: #e5e9ef; }
.service-status.status-cancelled { color: #ec4e59; background: #fff0f2; border-color: #ffdfe3; }


/* ==========================================================================
   17. MANAGE BUTTON
   ========================================================================== */

.service-manage-btn {
    min-width: 142px;
    height: 34px;
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #dce5f0;
    background: #ffffff;
    color: #315178 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 5px rgba(20, 43, 80, 0.025);
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.service-manage-btn:hover {
    border-color: #b8c9dd;
    background: #f9fbfe;
    box-shadow: 0 3px 8px rgba(20, 43, 80, 0.06);
}

.manage-main {
    flex: 1;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 550;
}

.manage-main i {
    color: #315f9d;
    font-size: 0.74rem;
}

.manage-arrow {
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #e3e8ef;
    color: #7990ad;
    font-size: 0.66rem;
}


/* ==========================================================================
   18. NO RECORDS (CLEANED UP EMPTY STATE)
   ========================================================================== */

.services-premium-table td.dataTables_empty {
    height: 180px !important;
    padding: 45px 20px !important;
    text-align: center !important;
    color: #7b8ca2 !important;
    font-size: 0.95rem !important;
    font-weight: 500;
    background: #ffffff !important;
    border: none !important;
}


/* ==========================================================================
   19. DATATABLE FOOTER (REMOVED INFO BORDER)
   ========================================================================== */

.dataTables_wrapper > .row:last-child {
    margin: 0 !important;
    min-height: 52px;
    padding: 15px 12px;
    align-items: center;
    border-top: none !important;
}

.dataTables_wrapper .dataTables_info {
    display: none !important;
}


/* ==========================================================================
   20. PAGINATION (NEW PILL SHAPED SAAS STYLE)
   ========================================================================== */

.dataTables_wrapper .dataTables_paginate {
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #ffffff !important;
    border: 1px solid #e0e6ee !important;
    border-radius: 50px !important;
    padding: 6px 18px !important;
    color: #315178 !important;
    font-size: 0.8rem !important;
      font-weight: 600;
    box-shadow: 0 2px 8px rgba(20, 43, 80, 0.04) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) {
    background: #f3f7fc !important;
    border-color: #c9d5e4 !important;
    color: #164c99 !important;
    transform: translateY(-1px);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #1768e5 !important;
    color: #ffffff !important;
    border-color: #1768e5 !important;
    box-shadow: 0 4px 10px rgba(23, 104, 229, 0.2) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.5 !important;
    background: #fafbfd !important;
    color: #9aa7b7 !important;
    border-color: #e7ebf0 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}


/* ==========================================================================
   21. LOADING
   ========================================================================== */

.services-loading {
    padding: 45px 20px;
}

.services-loading-spinner {
    width: 27px;
    height: 27px;
    margin: 0 auto 10px;
    border-radius: 50%;
    border: 3px solid #dce7f5;
    border-top-color: #1768e5;
    animation: serviceLoading 0.7s linear infinite;
}

.services-loading p {
    margin: 0;
    color: #7d8ba0;
    font-size: 0.75rem;
}

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


/* ==========================================================================
   22. RESPONSIVE - LAPTOP / TABLET
   ========================================================================== */

@media (max-width: 1199.98px) {
    .hero-content-left {
        width: 60%;
        padding-left: 38px;
    }
    .hero-illustration {
        width: 40%;
        padding-right: 38px;
    }
    .services-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .services-search-group {
        width: 100%;
    }
    .services-search {
        flex: 1;
        width: auto;
    }
    .services-filters {
        width: 100%;
        justify-content: center;
    }
}


/* ==========================================================================
   23. TABLET
   ========================================================================== */

@media (max-width: 991.98px) {
    .premium-hero-header {
        min-height: 200px;
    }
    .hero-content-left {
        padding: 30px 32px;
    }
    .premium-hero-header h1 {
        font-size: 1.8rem;
    }
    .hero-illustration {
        height: 200px;
        padding-right: 28px;
    }
    .hero-illustration img {
        max-width: 210px;
    }
    .services-list-panel {
        overflow-x: auto;
    }
    .services-premium-table {
        min-width: 1000px;
    }
}


/* ==========================================================================
   24. MOBILE
   ========================================================================== */

@media (max-width: 767.98px) {
    .premium-hero-header {
        min-height: auto;
        border-radius: 18px;
    }
    .premium-hero-header::after {
        width: 100%;
        right: 0;
        opacity: 0.3;
    }
    .hero-content-left {
        width: 100%;
        padding: 28px 22px;
    }
    .premium-hero-header h1 {
        font-size: 1.6rem;
    }
    .premium-hero-header p {
        font-size: 0.83rem;
    }
    .hero-actions {
        flex-wrap: wrap;
    }
    .services-toolbar {
        padding: 10px;
    }
    .services-filters {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .services-filters::-webkit-scrollbar {
        display: none;
    }
    .btn-filter {
        flex: 0 0 auto;
    }
}


/* ==========================================================================
   25. SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {
    .hero-actions {
        width: 100%;
    }
    .hero-action-btn {
        flex: 1;
    }
    .services-search {
        min-width: 0;
    }
    .services-sort-btn {
        flex: 0 0 40px;
    }
}


/* ==========================================================================
   26. HIDE WHMCS COPYRIGHT
   ========================================================================== */

a[href*="whmcs.com/"] {
    display: none !important;
}

p:has(a[href*="whmcs.com/"]), 
div:has(> a[href*="whmcs.com/"]) {
    display: none !important;
}




/* --- Banner Styles --- */
.custom-header-banner {
    background: radial-gradient(circle at 85% 45%, rgba(25, 117, 225, 0.22), transparent 31%),                linear-gradient(110deg, #08275f 0%, #0b326f 52%, #0d467f 100%);
    border-radius: var(--border-radius-lg);
    padding: 40px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}

.custom-header-banner .banner-content {
    z-index: 2;
    max-width: 60%;
}

.custom-header-banner .portfolio-label {
    color: var(--accent-color);
    font-size: 12px;
         font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
}

.custom-header-banner h2 {
    color: var(--bg-white);
    font-size: 32px;
         font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
}

.custom-header-banner p {
    color: var(--primary-soft);
    font-size: 15px;
    margin-bottom: 25px;
}

.custom-header-banner .banner-actions .btn {
    border-radius: var(--border-radius-sm);
    padding: 10px 20px;
    font-weight: 500;
    margin-right: 10px;
    transition: var(--transition);
}

.custom-header-banner .btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-white);
}

.custom-header-banner .btn-primary:hover {
    background-color: var(--accent-hover);
}

.custom-header-banner .btn-outline {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--bg-white);
}

.custom-header-banner .btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.custom-header-banner .banner-image img {
    max-height: 180px;
    z-index: 2;
    position: relative;
}

/* --- Table Styles --- */
.custom-table-wrapper {
    background: var(--bg-white);
    border-radius: var(--border-radius-md);
    padding: 20px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
}

.custom-table-wrapper table.table-list {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0 10px;
    border: none;
}

.custom-table-wrapper table.table-list thead th {
    background-color: var(--bg-light);
    color: var(--text-dark);
         font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    border: none;
    padding: 15px;
}

.custom-table-wrapper table.table-list tbody tr {
    background: var(--bg-white);
    box-shadow: 0 2px 8px rgba(11, 42, 99, 0.04);
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
    cursor: pointer;
}

.custom-table-wrapper table.table-list tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

.custom-table-wrapper table.table-list tbody td {
    padding: 18px 15px;
    vertical-align: middle;
    border-top: none;
    border-bottom: 1px solid var(--bg-blue-soft);
    color: var(--text-muted);
}

.custom-table-wrapper .invoice-num {
    color: var(--primary-color);
         font-weight: 600;
}

/* --- Status Labels --- */
.label.status {
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 12px;
}
.status-paid { background-color: var(--accent-soft); color: var(--accent-color); }
.status-unpaid { background-color: #fff0f0; color: #dc3545; }
.status-cancelled { background-color: #f8f9fa; color: var(--text-muted); }

/* Responsive adjustments */
@media (max-width: 768px) {
    .custom-header-banner {
        flex-direction: column;
        text-align: center;
    }
    .custom-header-banner .banner-content {
        max-width: 100%;
        margin-bottom: 20px;
    }
}


/* ==========================================================================
   Custom WHMCS Domains Page Styling
   ========================================================================== */

.custom-domain-page {
    font-family: 'Poppins', sans-serif;
}

/* --- Hero Banner --- */
.domain-hero-banner {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    border-radius: var(--border-radius-lg);
    padding: 40px 50px;
    margin-bottom: 30px;
    color: var(--text-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}

.hero-subtitle {
    font-size: 12px;
         font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--accent-color);
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
}

.hero-title {
    font-size: 32px;
         font-weight: 600;
    margin: 0 0 10px 0;
    color: var(--text-white);
}

.hero-desc {
    font-size: 14px;
    opacity: 0.85;
    margin-bottom: 25px;
    max-width: 500px;
}

.hero-actions {
    display: flex;
    gap: 15px;
}

/* Hero Buttons */
.btn-accent {
    background-color: var(--accent-color);
    color: var(--text-white);
    border: none;
    border-radius: var(--border-radius-sm);
    padding: 10px 24px;
    font-weight: 500;
    transition: var(--transition);
}

.btn-accent:hover {
    background-color: var(--accent-hover);
    color: var(--text-white);
}

.btn-outline-white {
    background-color: transparent;
    color: var(--text-white);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--border-radius-sm);
    padding: 10px 24px;
    font-weight: 500;
    transition: var(--transition);
}

.btn-outline-white:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--text-white);
    color: var(--text-white);
}

/* --- Toolbar & Bulk Actions --- */
.domain-toolbar {
    background-color: var(--bg-white);
    border-radius: var(--border-radius-md);
    padding: 15px 25px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-card);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border-color);
}

.bulk-actions-group .btn-toolbar {
    background-color: var(--bg-light);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    margin-right: 5px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: var(--transition);
}

.bulk-actions-group .btn-toolbar:hover {
    background-color: var(--bg-blue-soft);
    color: var(--primary-color);
    border-color: var(--secondary-color);
}

/* --- Custom Data Table --- */
.custom-table-wrapper {
    background: var(--bg-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
    padding: 20px;
    overflow-x: auto;
}

.custom-data-table {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0 10px; 
    margin-top: -10px;
}

.custom-data-table thead th {
    border: none;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-muted);
         font-weight: 600;
    padding: 15px;
}

.custom-data-table tbody tr {
    background-color: var(--bg-white);
    box-shadow: 0 2px 8px rgba(11, 42, 99, 0.04);
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
}

.custom-data-table tbody tr:hover {
    box-shadow: 0 5px 15px rgba(11, 42, 99, 0.08);
    transform: translateY(-2px);
}

.custom-data-table tbody td {
    border: none;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 18px 15px;
    vertical-align: middle;
    color: var(--text-dark);
    font-size: 14px;
}

.custom-data-table tbody td:first-child {
    border-left: 1px solid var(--border-color);
    border-top-left-radius: var(--border-radius-sm);
    border-bottom-left-radius: var(--border-radius-sm);
}

.custom-data-table tbody td:last-child {
    border-right: 1px solid var(--border-color);
    border-top-right-radius: var(--border-radius-sm);
    border-bottom-right-radius: var(--border-radius-sm);
}

/* Domain Name Formatting */
.domain-name-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.domain-link {
    text-decoration: none;
    color: var(--primary-color);
    transition: var(--transition);
}

.domain-link:hover {
    color: var(--secondary-color);
}

/* Manage Button */
.btn-manage {
    background-color: var(--bg-light);
    color: var(--primary-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 12px;
         font-weight: 600;
    padding: 6px 15px;
    transition: var(--transition);
}

.btn-manage:hover {
    background-color: var(--primary-color);
    color: var(--text-white);
}

/* --- Status Badges --- */
.status-badge {
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 12px;
         font-weight: 600;
    display: inline-block;
}

.status-active { background-color: var(--accent-soft); color: var(--accent-color); }
.status-expired { background-color: #ffeef0; color: #d32f2f; }
.status-pending { background-color: #fff8e1; color: #f57c00; }
.status-cancelled { background-color: #f3f4f6; color: var(--text-muted); }

/* --- Modern Toggle Switch (Auto Renew) --- */
.custom-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin: 0;
}

.custom-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: not-allowed; /* Disabled by default in list view */
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd5e1;
    transition: .4s;
    border-radius: 34px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.custom-toggle input:checked + .toggle-slider {
    background-color: var(--accent-color);
}

.custom-toggle input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.table-loading-spinner {
    padding: 40px;
    color: var(--primary-color);
}


/* ==========================================================================
   iHOSTER - MY DOMAINS PAGE SPECIFIC STYLES
   ========================================================================== */

/* 1. Bulk Actions Toolbar (Sleek inner toolbar above table) */
.domain-bulk-actions {
    background: #f8fafc;
    border-bottom: 1px solid #eef2f6;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bulk-action-btn {
    background: #ffffff;
    border: 1px solid #dce4ee;
    color: #475569;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.bulk-action-btn i {
    color: #64748b;
    font-size: 0.9rem;
}

.bulk-action-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.bulk-action-btn:hover i {
    color: #1768e5;
}

/* Dropdown specific for More Actions */
.bulk-dropdown .dropdown-menu {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
    padding: 8px;
    margin-top: 5px;
}

.bulk-dropdown .dropdown-item {
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 16px !important;
    font-weight: 500;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.bulk-dropdown .dropdown-item i {
    color: #64748b;
    font-size: 0.9rem;
}

.bulk-dropdown .dropdown-item:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.bulk-dropdown .dropdown-item:hover i {
    color: #1768e5;
}

/* 2. Custom Domain Checkboxes */
.domain-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    cursor: pointer;
    accent-color: #1768e5; /* Modern blue checkbox */
}

/* 3. Domain Name Cell Styles */
.domain-name-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.domain-name-link {
    color: #102b5c;
    font-size: 16px;
    font-weight: 650;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.domain-name-link:hover {
    color: #1768e5;
}

.domain-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.autorenew-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
         font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.autorenew-enabled {
    background: #edfaef;
    color: #1ca447;
    border: 1px solid #d9f4de;
}

.autorenew-disabled {
    background: #fff0f2;
    color: #ec4e59;
    border: 1px solid #ffdfe3;
}

/* Domain Status Colors (Overriding defaults) */
.status-expired { color: #e11d48; background: #ffe4e6; border-color: #fecdd3; }
.status-active { color: #1ca447; background: #edfaef; border-color: #d9f4de; }
.status-pending { color: #d99005; background: #fff7e8; border-color: #fbe9c3; }
.status-pendingtransfer { color: #1680d2; background: #edf7ff; border-color: #dbefff; }

/* ==========================================================================
   UNIQUE PREMIUM BULK ACTIONS TOOLBAR (SOFT-TINTED SAAS STYLE)
   ========================================================================== */

.domain-bulk-actions {
    background: #ffffff;
    border-bottom: 1px solid #e4e9f1;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

/* "With Selected:" Label Styling */
.domain-bulk-actions > span {
    background: #f1f5fa;
    color: #315178 !important;
    font-size: 0.8rem;
         font-weight: 600;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 6px;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
}

.domain-bulk-actions > span i {
    color: #1768e5;
    font-size: 0.9rem;
}

/* Base Style for all Bulk Action Buttons */
.bulk-action-btn {
    background: #f0f4f9 !important; /* Soft Blue/Grey Tint */
    border: none !important;
    color: #102b5c !important; /* Deep Blue Text */
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

.bulk-action-btn i {
    color: #315f9d !important;
    font-size: 1rem;
    transition: all 0.3s ease;
}

/* Hover State - Turns Solid Blue */
.bulk-action-btn:hover {
    background: #1768e5 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 15px rgba(23, 104, 229, 0.25) !important;
    transform: translateY(-2px);
}

.bulk-action-btn:hover i {
    color: #ffffff !important;
}

/* Special Highlight for "Renew Domains" Button */
#renewDomains {
    background: #edfaef !important; /* Soft Green Tint */
    color: #0f7a31 !important;
}

#renewDomains i {
    color: #1ca447 !important;
}

#renewDomains:hover {
    background: #1ca447 !important; /* Solid Green on Hover */
    color: #ffffff !important;
    box-shadow: 0 6px 15px rgba(28, 164, 71, 0.25) !important;
}

#renewDomains:hover i {
    color: #ffffff !important;
}

/* Dropdown Menu (More Options) */
.bulk-dropdown .dropdown-menu {
    border: 1px solid #e4e9f1 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 30px rgba(15, 37, 73, 0.1) !important;
    padding: 8px !important;
    margin-top: 8px !important;
    background: #ffffff !important;
}

.bulk-dropdown .dropdown-item {
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-size: 16px;
      font-weight: 600;
    color: #315178 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s !important;
}

.bulk-dropdown .dropdown-item i {
    color: #7990ad !important;
    font-size: 0.95rem;
}

.bulk-dropdown .dropdown-item:hover {
    background: #f0f4f9 !important;
    color: #1768e5 !important;
    transform: translateX(4px); /* Sleek slide effect on hover */
}

.bulk-dropdown .dropdown-item:hover i {
    color: #1768e5 !important;
}


/* Custom Filter Dot for Expired Domains */
.filter-expired { 
    background: #e11d48 !important; 
}


/* ==========================================================================
   DOMAIN PAGE ONLY - PERFECT ALIGNMENT (Will NOT affect Services/Invoices)
   ========================================================================== */

/* Checkbox Column - Strictly locked so it doesn't push others */
#tableDomainsList th:nth-child(1),
#tableDomainsList td:nth-child(1) { 
    width: 45px !important; 
    min-width: 45px !important;
    max-width: 45px !important;
    text-align: center !important; 
    padding-left: 10px !important; 
    padding-right: 5px !important; 
}

/* Domain Name Column - Left aligned */
#tableDomainsList th:nth-child(2),
#tableDomainsList td:nth-child(2) { 
    text-align: left !important; 
    padding-left: 0 !important; 
}

/* Reg Date, Next Due Date, Status - Centered for balance */
#tableDomainsList th:nth-child(3),
#tableDomainsList th:nth-child(4),
#tableDomainsList th:nth-child(5) { 
    text-align: center !important; 
}

/* Action Column - Right aligned */
#tableDomainsList th:nth-child(6),
#tableDomainsList td:nth-child(6) { 
    text-align: right !important; 
    padding-right: 25px !important; 
}


/* ==========================================================================
   iHOSTER - SUPPORT TICKETS PAGE SPECIFIC STYLES
   ========================================================================== */

/* 1. Perfect Column Alignment for Tickets Table */
#tableTicketsList th:nth-child(1),
#tableTicketsList td:nth-child(1) {
    text-align: left !important;
    padding-left: 80px !important;
    width: 22% !important;
}

#tableTicketsList th:nth-child(2),
#tableTicketsList td:nth-child(2) {
    text-align: left !important;
    width: 45% !important;
    padding-right: 80px !important;
}

#tableTicketsList th:nth-child(3),
#tableTicketsList td:nth-child(3) {
    text-align: center !important;
    width: 0% !important;
    padding-right: 80px !important;
}

#tableTicketsList th:nth-child(4),
#tableTicketsList td:nth-child(4) {
    /* text-align: right !important; */
    padding-right: 80px !important;
    /* width: 18% !important; */
}

/* 2. Department Cell Styling */
.ticket-dept-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ticket-dept-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    background: #f0f4f9;
    color: #315f9d;
    border: 1px solid #dce5f0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

#tableTicketsList tbody tr:hover .ticket-dept-icon {
    background: #eef5ff;
    color: #1768e5;
    border-color: #dceaff;
}

.ticket-dept-name {
    font-weight: 650;
    color: #315178;
    font-size: 16px;
}

/* 3. Ticket Subject Styling */
.ticket-subject-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ticket-subject-wrap .tid {
    font-size: 13px;
    color: #7990ad;
         font-weight: 600;
    letter-spacing: 0.5px;
}

.ticket-subject-wrap .subject {
    font-size: 16px;
         font-weight: 600;
    color: #102b5c;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.ticket-subject-wrap .subject:hover {
    color: #1768e5;
}

.ticket-subject-wrap .subject.unread {
    color: #1768e5;
    font-weight: 750;
}

/* 4. Support Ticket Specific Status Colors */
.filter-open { background: #1ca447 !important; }
.filter-answered { background: #7c56dd !important; }
.filter-customer-reply { background: #f4a30b !important; }
.filter-closed { background: #75859c !important; }

.status-open { color: #1ca447; background: #edfaef; border-color: #d9f4de; }
.status-answered { color: #7c56dd; background: #f5f0ff; border-color: #e7dcff; }
.status-customer-reply { color: #d99005; background: #fff7e8; border-color: #fbe9c3; }
.status-closed { color: #67778f; background: #f3f5f8; border-color: #e5e9ef; }


/* ==========================================================================
   INVOICE PAGE FIXES (TOOLBAR ALIGNMENT & MISSING DOT COLORS)
   ========================================================================== */

/* 1. Force Search Bar to the Left & Filters to the Right */
.services-toolbar {
    justify-content: space-between !important;
}

.services-search-group {
    margin-right: auto !important; /* Pushes search strictly to the left edge */
}

/* 2. Add Missing Filter Dot Colors for Invoices */
.filter-paid { 
    background: #1ca447 !important; /* Green */
}

.filter-unpaid { 
    background: #d99005 !important; /* Orange/Yellow */
}

.filter-refunded { 
    background: #67778f !important; /* Grey */
}


/* ==========================================================================
   TICKETS PAGE FIX: CENTER "NO RECORDS FOUND"
   ========================================================================== */
#tableTicketsList tbody tr td.dataTables_empty {
    text-align: center !important;
    padding-left: 0 !important; /* Resets the left padding applied to the first column */
}



/* ==========================================================================
   ULTIMATE RESPONSIVE OVERRIDES (ALL DEVICES)
   Added at the end to preserve all your existing desktop CSS
   ========================================================================== */

/* --- TABLET FIXES (Max 991px) --- */
@media (max-width: 991.98px) {
    
    /* 1. Force All Tables to Scroll Horizontally Without Squishing */
    .table-container, 
    .table-responsive {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 14px !important;
    }
    
    /* Give tables a minimum width so they stay perfectly formatted */
    .services-premium-table, 
    .custom-data-table, 
    #tableTicketsList, 
    #tableDomainsList {
        min-width: 950px !important; 
    }

    /* 2. Fix Premium Sub-Navbar Overflow */
    .custom-premium-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding-bottom: 5px !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .custom-premium-nav::-webkit-scrollbar {
        height: 4px;
    }
    
    .custom-premium-nav > li {
        display: inline-block !important;
        float: none !important;
    }

    /* 3. Hero Section Tablet Alignment */
    .premium-hero-header {
        flex-direction: column !important;
        text-align: center !important;
        padding: 35px 20px !important;
    }
    
    .hero-content-left {
        width: 100% !important;
        padding: 0 !important;
        max-width: 100% !important;
    }
    
    .hero-actions {
        justify-content: center !important;
    }
    
    .hero-illustration {
        display: none !important; /* Hide image on smaller screens for a cleaner look */
    }

    /* 4. Contact/Login Cards Stacking */
    .ih-reset-wrapper {
        flex-direction: column !important;
        padding: 20px !important;
    }
    
    .ih-reset-split-card {
        flex-direction: column !important;
        display: flex !important;
    }
}

/* --- MOBILE FIXES (Max 767px) --- */
@media (max-width: 767.98px) {
    
    /* 1. Search Bar & Filters Stack */
    .services-toolbar {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: stretch !important;
        padding: 15px !important;
    }
    
    .services-search-group, 
    .services-search {
        width: 100% !important;
        margin: 0 !important;
    }
    
    .services-filters {
        width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        justify-content: flex-start !important;
        padding-bottom: 8px !important;
        border: none !important;
        background: transparent !important;
    }

    /* 2. Bulk Action Toolbar Stack */
    .domain-bulk-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 15px !important;
        gap: 10px !important;
    }
    
    .domain-bulk-actions > span {
        justify-content: center !important;
        margin-right: 0 !important;
    }
    
    .bulk-action-btn, 
    .bulk-dropdown, 
    .bulk-dropdown .dropdown-toggle {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* 3. Responsive Stats Grid */
    .ih-stats-grid {
        grid-template-columns: 1fr !important; /* Make stat boxes full width */
    }

    /* 4. Full Width Hero Buttons */
    .hero-actions {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .hero-action-btn {
        width: 100% !important;
        margin-bottom: 5px !important;
    }

    /* 5. Footer Centering for Mobile */
    .site-footer .row {
        text-align: center !important;
    }
    
    .clean-footer-brand,
    .footer-social {
        justify-content: center !important;
    }
    
    .site-footer h5::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    .footer-contact p {
        justify-content: center !important;
    }
}


/* ==========================================================================
   BREADCRUMB ALIGNMENT FIX (MOBILE & TABLET)
   ========================================================================== */
@media (max-width: 1199px) {
    .custom-premium-breadcrumb {
        margin-left: 0 !important; /* Removes the negative push on smaller screens */
        padding-left: 15px !important; /* Adds safe breathing room on the left edge */
        padding-right: 15px !important;
        overflow-x: auto !important; /* Enables horizontal scroll if breadcrumb is too long */
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important; /* Hides scrollbar for a clean look */
    }
    
    /* Hide scrollbar for Chrome/Safari/Edge */
    .custom-premium-breadcrumb::-webkit-scrollbar {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    body:has(.ih-client-dashboard) .master-breadcrumb > .container,
    body:has(.ih-client-dashboard) .master-breadcrumb > .container-fluid {
        padding-left: 15px !important; /* Ensures the container itself isn't pushed out */
    }
}


/* ==========================================================================
   ULTIMATE TABLE RESPONSIVE SCROLL FIX (MOBILE & TABLET)
   ========================================================================== */
@media (max-width: 991.98px) {
    
    /* 1. Force the wrapper to allow horizontal scrolling */
    .services-list-panel .table-container,
    .dataTables_wrapper,
    .table-responsive,
    .custom-table-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important; /* Turns on horizontal scroll */
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important; /* Smooth swipe on iPhone/iPad */
        border-radius: 14px !important;
    }

    /* 2. Force tables to keep their shape so the wrapper actually scrolls */
    .services-premium-table,
    #tableDomainsList,
    #tableTicketsList,
    #tableInvoicesList,
    .custom-data-table {
        min-width: 900px !important; /* Stops the table from squishing. Adjust if needed */
        width: 100% !important;
        max-width: none !important;
    }
    
    /* 3. Stop text from wrapping weirdly inside cells on small screens */
    .services-premium-table th,
    .services-premium-table td,
    .custom-data-table th,
    .custom-data-table td {
        white-space: nowrap !important;
    }
}


/* ==========================================================================
   MOBILE MENU (NAVBAR COLLAPSE) WHITE THEME FIX
   ========================================================================== */
@media (max-width: 991.98px) {
    /* 1. Force the mobile menu dropdown to be a clean white card */
    .site-header .navbar-collapse,
    .custom-dark-header .navbar-collapse {
        background-color: #ffffff !important;
        background-image: none !important;
        border-radius: 12px !important;
        padding: 15px !important;
        margin-top: 15px !important;
        box-shadow: 0 10px 30px rgba(11, 42, 99, 0.15) !important;
        border: 1px solid #e2e8f0 !important;
    }

    /* 2. Force mobile menu links to be dark blue so they are readable */
    .site-header .navbar-nav .nav-link,
    .custom-dark-header .navbar-nav .nav-link,
    .navbar-nav .nav-link {
        color: #0b2a63 !important; /* Deep Blue Text */
          font-weight: 600;
        padding: 12px 15px !important;
        border-radius: 8px !important;
    }

    /* 3. Hover effect for mobile links */
    .site-header .navbar-nav .nav-link:hover,
    .custom-dark-header .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:hover {
        background-color: #f1f6ff !important; /* Soft blue background */
        color: #0a7f26 !important; /* Accent green text */
    }
    
    /* 4. Fix the header buttons (Login/Contact) inside the mobile menu */
    .site-header .header-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        margin-top: 15px !important;
        padding-top: 15px !important;
        border-top: 1px solid #e2e8f0 !important;
    }
    
    .site-header .header-phone {
        color: #0b2a63 !important;
        justify-content: center !important;
        margin-bottom: 5px !important;
    }
    
    .site-header .btn-login,
    .site-header .btn-accent {
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
        width: 100% !important;
    }
}



/* ==========================================================================
   CLIENT AREA (DASHBOARD HERO) RESPONSIVE FIXES (MOBILE & TABLET)
   ========================================================================== */

/* --- TABLET FIXES (Max 991px) --- */
@media (max-width: 991.98px) {
    /* 1. Fix the large dashboard hero container padding */
    .ih-dashboard-hero {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* 2. Stack the account summary card vertically */
    .ih-account-summary {
        grid-template-columns: 1fr !important; /* Forces items to stack top-to-bottom */
        gap: 15px !important;
        padding: 20px !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* 3. Align the "Account Active" badge nicely to the left */
    .ih-account-badge {
        justify-self: flex-start !important;
    }

    /* 4. Adjust the meta info (Member since, Credit) to sit side-by-side */
    .ih-account-meta {
        grid-template-columns: 1fr 1fr !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding-top: 15px !important;
        margin-top: 5px !important;
    }
    
    .ih-account-meta > div:first-child {
        border-left: none !important;
        padding-left: 0 !important;
    }
}

/* --- MOBILE FIXES (Max 767px) --- */
@media (max-width: 767.98px) {
    /* 1. Reduce the giant "Welcome Back" text sizes */
    .ih-hero-title {
        font-size: 34px !important;
        line-height: 1.2 !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
    
    .ih-hero-description {
        font-size: 15px !important;
    }
    
    /* 2. Adjust Hero height and padding for mobile */
    .ih-dashboard-hero {
        padding-top: 30px !important;
        padding-bottom: 80px !important;
        min-height: auto !important;
    }

    /* 3. Stack contact info (Location, Phone) on separate lines */
    .ih-account-contact {
        flex-direction: column !important;
        gap: 6px !important;
        align-items: flex-start !important;
    }

    /* 4. Hide the large overlapping server image on small phones */
    .ih-hero-visual {
        display: none !important;
    }

    /* 5. Fix Domain Search Box overlapping awkwardly on mobile */
    .ih-domain-search-card {
        grid-template-columns: 1fr !important;
        width: calc(100% - 30px) !important; /* Keep it inside the screen */
        margin-top: -40px !important;
        padding: 20px !important;
    }
    
    /* 6. Stack Domain search input and button */
    .ih-domain-input-wrap {
        flex-direction: column !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .ih-domain-input-wrap input {
        width: 100% !important;
        border: 1px solid #dce4ee !important;
        border-radius: 12px !important;
        margin-bottom: 10px !important;
        padding-left: 15px !important; /* Reset icon padding */
    }
    
    .ih-domain-input-wrap button {
        width: 100% !important;
        border-radius: 12px !important;
    }
    
    .ih-domain-input-wrap > i {
        display: none !important; /* Hide icon inside mobile stacked input */
    }
}


/* ==========================================================================
   MOBILE DOMAIN SEARCH INPUT HEIGHT FIX
   ========================================================================== */
@media (max-width: 767.98px) {
    .ih-domain-input-wrap input {
        min-height: 54px !important; /* Makes the input box taller */
        padding: 0 20px !important;
        font-size: 16px !important; /* Better readability on phones */
        margin-bottom: 12px !important; /* Space between input and button */
    }
    
    .ih-domain-input-wrap button {
        min-height: 54px !important; /* Matches the input box height exactly */
        font-size: 16px !important;
    }
}


/* ==========================================================================
   FOOTER ULTIMATE RESPONSIVE FIX V3 (ROCK SOLID CENTERED)
   ========================================================================== */

/* --- TABLET FIXES (Max 991px) --- */
@media (max-width: 991.98px) {
    /* Main wrapper setup */
    .site-footer .container > .row:first-of-type,
    .custom-dark-footer .container > .row:first-of-type {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    /* 1. Main Brand Column (Logo & Contact) - Full Width & Centered */
    .site-footer .container > .row:first-of-type > div:first-child,
    .custom-dark-footer .container > .row:first-of-type > div:first-child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin-bottom: 40px !important;
    }

    /* Center the icons and text inside the brand column */
    .clean-footer-brand,
    .footer-contact p,
    .footer-social {
        justify-content: center !important;
    }

    /* 2. Link Columns (Hosting, Company, etc.) - 50% AND CENTERED TEXT */
    .site-footer .container > .row:first-of-type > div:not(:first-child),
    .custom-dark-footer .container > .row:first-of-type > div:not(:first-child) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 30px !important;
        padding: 0 10px !important;
        text-align: center !important; /* This fixes the weird gap! */
    }

    /* 3. Center align all headers and underline designs */
    .site-footer h5, 
    .custom-dark-footer h5 {
        text-align: center !important;
        padding-bottom: 12px !important;
    }
    
    .site-footer h5::after, 
    .custom-dark-footer h5::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* 4. Center align lists */
    .site-footer ul, 
    .custom-dark-footer ul {
        padding-left: 0 !important;
        text-align: center !important;
    }
    
    .site-footer ul li,
    .custom-dark-footer ul li {
        text-align: center !important;
        display: block !important;
    }

    .site-footer ul li a,
    .custom-dark-footer ul li a {
        display: inline-block !important;
    }

    /* 5. Bottom Copyright Section Fix */
    .site-footer .container > .row:last-of-type,
    .custom-dark-footer .container > .row:last-of-type,
    .footer-bottom,
    .footer-bottom .row {
        flex-direction: column !important;
        text-align: center !important;
        justify-content: center !important;
        width: 100% !important;
    }
    
    .footer-bottom p {
        text-align: center !important;
        margin-bottom: 5px !important;
        width: 100% !important;
    }
}

/* --- MOBILE FIXES (Max 767px) --- */
@media (max-width: 767.98px) {
    /* 1. On mobile, force EVERYTHING to 1 column (100% width) */
    .site-footer .container > .row:first-of-type > div:not(:first-child),
    .custom-dark-footer .container > .row:first-of-type > div:not(:first-child) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 35px !important;
    }

    /* Make links easier to tap on small screens */
    .site-footer ul li a,
    .custom-dark-footer ul li a {
        padding: 8px 0 !important; 
    }

    /* Reduce huge top spacing on small phones */
    .site-footer, 
    .custom-dark-footer {
        padding: 50px 0 20px !important;
    }
}


/* --- Account Management Page Styles --- */

.account-management-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px 0;
}

/* --- Hero Banner --- */
.am-hero-banner {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    border-radius: var(--border-radius-lg);
    padding: 40px;
    color: var(--text-white);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.am-hero-content {
    position: relative;
    z-index: 2;
}

.am-hero-badge {
    background: #0a7f26ba;
    backdrop-filter: blur(5px);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 11px;
         font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 16px;
}

.am-hero-content h1 {
    font-size: 32px;
         font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--text-white);
}

.am-hero-content p {
    font-size: 14px;
    color: var(--primary-soft);
    margin: 0;
}

/* --- Stats Grid --- */
.am-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.am-stat-card {
    background: var(--bg-white);
    border-radius: var(--border-radius-md);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-card);
}

.am-stat-icon {
    width: 48px;
    height: 48px;
    background: var(--bg-blue-soft);
    color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.am-stat-info p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 4px 0;
    font-weight: 500;
}

.am-stat-info h4 {
    font-size: 15px;
    color: var(--primary-dark);
         font-weight: 600;
    margin: 0;
}

/* --- Nav Tabs Fix (Reverted to standard design for all pages) --- */
.am-nav-tabs-alt {
    background: var(--bg-white) !important;
    padding: 8px !important;
    border-radius: var(--border-radius-sm) !important;
    display: flex !important;
    flex-direction: row !important;
    box-shadow: var(--shadow-card) !important;
    margin-bottom: 24px !important;
    gap: 8px !important;
    overflow: visible !important;
}

.am-nav-tabs-alt .am-nav-item {
    flex: 1 !important;
    text-align: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--border-radius-sm) !important;
    padding: 14px 20px !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: var(--transition) !important;
}

/* Remove the separator lines */
.am-nav-tabs-alt .am-nav-item::after {
    display: none !important;
}

.am-nav-tabs-alt .am-nav-item:hover {
    background: var(--bg-light) !important;
    color: var(--primary-color) !important;
}

.am-nav-tabs-alt .am-nav-item.active {
    background: var(--primary-soft) !important;
    color: var(--primary-color) !important;
    border: none !important;
      font-weight: 600;
}
/* --- Cards --- */
.am-card {
    margin-bottom: 24px;
}
.am-card:last-of-type {
    margin-bottom: 0;
}

.am-card-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
}

.am-card-icon {
    width: 45px;
    height: 45px;
    background: var(--primary-soft);
    color: #1ca447;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.am-card-title h2 {
    font-size: 20px;
         font-weight: 600;
    color: var(--primary-dark);
    margin: 0 0 4px 0;
}

.am-card-title p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* --- Form Elements --- */
.am-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 24px;
}

.am-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.am-form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.am-form-label i {
    color: var(--secondary-color);
    font-size: 14px;
}

.am-form-control {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--text-dark);
    transition: var(--transition);
    background: #fdfdfe;
}

.am-form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px var(--primary-soft);
    background: var(--bg-white);
}

.am-form-control:disabled {
    background-color: var(--bg-light);
    color: var(--text-muted);
    cursor: not-allowed;
}

select.am-form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b5797' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
}

/* --- Checkboxes & Preferences --- */
.am-prefs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 16px;
}


.iti, 
.intl-tel-input {
    width: 100%;
    display: block;
}


.iti .am-form-control,
.intl-tel-input .am-form-control {
    padding-left: 95px !important; 
}


@media (max-width: 768px) {
    .am-form-grid, 
    .am-prefs-grid {
        grid-template-columns: 1fr;
    }
}

form[role="form"] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.am-checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.am-checkbox-wrapper input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    margin-top: 2px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    background: var(--bg-white);
    transition: var(--transition);
}

.am-checkbox-wrapper input[type="checkbox"]:checked {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.am-checkbox-wrapper input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--bg-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.am-checkbox-label {
    font-size: 14px;
    color: var(--text-dark);
}

/* --- Mailing List Toggle Layout --- */
.am-mailing-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.am-mailing-info h3 {
    font-size: 16px;
         font-weight: 600;
    color: var(--primary-dark);
    margin: 0 0 6px 0;
}

.am-mailing-info p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}

.am-toggle-area {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.am-toggle-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
}

/* --- Action Buttons --- */
.am-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 10px;
}

.am-btn {
    padding: 14px 32px;
    border-radius: var(--border-radius-sm);
    font-size: 15px;
         font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    border: none;
}

.am-btn-primary {
    background-color: var(--accent-color);
    color: var(--text-white);
    box-shadow: 0 4px 12px rgba(10, 127, 38, 0.2);
}

.am-btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
}

.am-btn-secondary {
    background-color: transparent;
    color: var(--text-muted);
    border: 2px solid var(--border-color);
}

.am-btn-secondary:hover {
    background-color: var(--bg-light);
    color: var(--primary-dark);
    border-color: var(--text-muted);
}


/* --- Email Preferences Specific Styles --- */
.am-email-prefs-card {
    position: relative;
    overflow: hidden;
}

/* Background Graphic Positioning & Fading */
.am-prefs-bg {
    position: absolute;
    right: -10px;
    bottom: -15px;
    width: 160px; /* Podi kara */
    pointer-events: none;
    z-index: 0;
    opacity: 0.5; /* Thawa light kara */
}

/* Force light color for the graphic */
.am-prefs-bg svg {
    stroke: var(--border-color) !important; /* Thada pata wenuwata border eke light pata damma */
}

/* Bring text to the front */
.am-prefs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 30px; 
    position: relative;
    z-index: 2; /* Graphic ekata wada uding text eka thiyanna */
}

.am-checkbox-label {
    font-size: 13.5px;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .am-prefs-bg {
        display: none; /* Mobile wala graphic eka awashya na, eka ain kara */
    }
}



/* --- Account Management Page Styles --- */
.account-management-container {
    width: 100%; 
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 0 24px 0; 
}



/* --- 1. Choose Contact Bar Fixes --- */
.am-choose-contact-bar {
    background: var(--bg-white) !important;
    border-radius: var(--border-radius-md) !important;
    padding: 24px 32px !important;
    box-shadow: var(--shadow-card) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 24px !important;
    margin-bottom: 30px !important; /* Palleha card ekata ida wadi kara */
}

.am-choose-label {
         font-weight: 600;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    margin: 0 !important;
}

.am-choose-label::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-color: var(--accent-color);
    border-radius: 50%;
}

.am-choose-form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1;
    gap: 16px !important;
}

.am-btn-go {
    background-color: var(--primary-color) !important;
    color: var(--text-white) !important;
    padding: 12px 32px !important;
    height: 48px !important;
    border-radius: var(--border-radius-sm) !important;
    border: none !important;
      font-weight: 600;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
}

.am-btn-go:hover {
    background-color: var(--primary-dark) !important;
}


/* --- 2. Card & Form Layout Fixes (Spacious Look) --- */
.am-card {
    padding: 40px !important; /* Card eka athule ida wadi kara clear penna */
}

.am-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px !important; /* Column dekata madin loku space ekak damma */
}

.am-form-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 26px !important; /* Form rows athara space eka wadi kara */
}

.am-form-group-inline {
    display: flex !important;
    flex-direction: row !important; /* Label eka input eka ainenma thiyanna */
    align-items: center !important;
    gap: 16px !important;
    margin: 0 !important;
}

.am-form-group-inline .am-form-label {
    flex: 0 0 160px !important; /* Label ekata loku idak dila align kala */
    margin: 0 !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-align: left !important;
}

.am-form-group-inline .am-form-control {
    flex: 1 !important;
    width: 100% !important;
    margin: 0 !important;
}




.am-checkbox-wrapper {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin: 0 !important;
}

.am-checkbox-wrapper input[type="checkbox"] {
    margin-top: 2px !important; /* Checkbox eka text eka ekka hariyata align wenna */
}

/* --- Mobile Responsive Fixes --- */
@media (max-width: 991px) {
    .am-choose-contact-bar,
    .am-choose-form {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
    }
    
    .am-choose-form .am-form-control,
    .am-btn-go {
        width: 100% !important;
    }

    .am-form-grid,
    .am-prefs-grid {
        grid-template-columns: 1fr !important;
    }

    .am-form-group-inline {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    .am-form-group-inline .am-form-label {
        flex: none !important;
    }
}

/* --- Green Accent Utilities (As per mockup) --- */
.am-card-icon.icon-green {
    background: var(--accent-soft);
    color: var(--accent-color);
}

/* Make checkboxes green in this section to match mockup */
.am-email-prefs-card .am-checkbox-wrapper input[type="checkbox"]:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .am-choose-contact-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .am-choose-form {
        width: 100%;
        flex-direction: column;
    }
    
    .am-btn-go {
        padding: 14px;
    }
    
    .am-form-group-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .am-form-group-inline .am-form-label {
        flex: none;
    }
}



/* =========================================================
   PREMIUM ACCOUNT MANAGEMENT UI (Unified Fix for all pages)
   ========================================================= */

/* --- Main Container --- */
.account-management-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 40px;
}

/* --- Hero Banners --- */
.am-hero-banner {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    border-radius: var(--border-radius-md);
    padding: 35px 40px;
    color: var(--text-white);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.am-hero-content {
    position: relative;
    z-index: 2;
}

.am-hero-badge {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12px;
         font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 12px;
}

.am-hero-content h1 {
    font-size: 35px;
         font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--text-white);
}

.am-hero-content p {
    font-size: 18px;
    color: var(--primary-soft);
    margin: 0;
}

.am-hero-graphics i {
    opacity: 0.1;
    transform: rotate(-10deg) scale(1.2);
}

/* --- Stats Grid --- */
.am-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    width: 100%;
}

.am-stats-grid-emails {
    grid-template-columns: repeat(3, 1fr);
}

.am-stat-card {
    background: var(--bg-white);
    border-radius: var(--border-radius-sm);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-card);
    border: 1px solid transparent;
}

.am-stat-card-outline {
    border: 1px solid var(--border-color);
    box-shadow: none;
}

.am-stat-icon {
    width: 48px;
    height: 48px;
    background: var(--bg-blue-soft);
    color: var();
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.am-stat-icon.icon-green-soft {
    background: var(--accent-soft);
    color: var(--accent-color);
}

.am-stat-info p {
    font-size: 18px;
    color: var(--text-muted);
    margin: 0 0 4px 0;
    font-weight: 500;
}

.am-stat-info h4 {
    font-size: 14px;
    color: var(--primary-dark);
         font-weight: 600;
    margin: 0;
}

.am-stat-info span {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
    margin-top: 4px;
}

/* --- Navigation Tabs --- */
.am-nav-tabs, .am-nav-tabs-alt {
    display: flex;
    flex-wrap: wrap;
    background: var(--bg-white);
    padding: 8px;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-card);
    gap: 8px;
    width: 100%;
}

.am-nav-item {
    flex: 1;
    text-align: center;
    padding: 14px 20px;
    border-radius: var(--border-radius-sm);
    font-size: 18px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition);
    white-space: nowrap;
}

.am-nav-item:hover {
    background: var(--bg-light);
    color: var(--primary-color);
}

.am-nav-item.active {
    background: var(--primary-soft);
    color: var(--primary-color);
         font-weight: 600;
}

/* --- Choose Contact Bar (Contacts Page) --- */
.am-choose-contact-bar {
    background: var(--bg-white);
    border-radius: var(--border-radius-sm);
    padding: 20px 24px;
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.am-choose-label {
         font-weight: 600;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.am-choose-label::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-color: var(--accent-color);
    border-radius: 50%;
}

.am-choose-form {
    display: flex;
    gap: 16px;
    flex: 0 0 60%;
}

.am-choose-form .am-form-control {
    flex: 1;
}

.am-btn-go {
    background-color: var(--primary-color);
    color: var(--text-white);
    padding: 0 30px;
    height: 42px;
    border-radius: var(--border-radius-sm);
    border: none;
         font-weight: 600;
}

/* --- Cards & General Forms --- */
.am-card {
    background: var(--bg-white);
    border-radius: var(--border-radius-sm);
    padding: 30px;
    box-shadow: var(--shadow-card);
    margin-bottom: 24px;
    width: 100%;
}

.am-card:last-child {
    margin-bottom: 0;
}

.am-card-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
}

.am-card-icon {
    width: 50px;
    height: 50px;
    background: var(--primary-soft);
    color: var();
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.am-card-icon.icon-green {
    background: var(--accent-soft);
    color: var(--accent-color);
}

.am-card-title h2 {
    font-size: 22px;
         font-weight: 600;
    color: var(--primary-dark);
    margin: 0 0 4px 0;
}

.am-card-title p {
    font-size: 18px;
    color: var(--text-muted);
    margin: 0;
}

/* Form Grids */
.am-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Stacked Form Group (Account Details) */
.am-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 0;
}

/* Inline Form Group (Contacts) */
.am-form-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.am-form-group-inline {
    display: flex;
    align-items: center;
    gap: 15px;
}

.am-form-label {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.am-form-group-inline .am-form-label {
    flex: 0 0 140px;
}

.am-form-label i {
    color: var(--accent-color);
    width: 20px;
    text-align: center;
}

.am-form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--text-dark);
    background: #fdfdfe;
    outline: none;
    transition: var(--transition);
}

.am-form-group-inline .am-form-control {
    flex: 1;
}

.am-form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Email Preferences */
.am-prefs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
}

.am-checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    margin: 0;
}

.am-checkbox-label {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-dark);
}

/* Mailing List Flex */
.am-mailing-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.am-mailing-info h3 {
    font-size: 18px;
         font-weight: 600;
    color: var(--primary-dark);
    margin: 0 0 6px 0;
}

.am-mailing-info p {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0;
}

/* Action Buttons */
.am-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}

.am-btn {
    padding: 12px 30px;
    border-radius: var(--border-radius-sm);
    font-size: 16px;
         font-weight: 600;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}

.am-btn-primary {
    background-color: var(--accent-color);
    color: var(--text-white);
}

.am-btn-primary:hover {
    background-color: var(--accent-hover);
}

.am-btn-secondary {
    background-color: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

/* --- WHMCS DataTables Fix (Email History) --- */
.am-table-card {
    padding: 0;
    overflow: hidden;
}

.am-table-card .dataTables_wrapper {
    display: block !important;
    padding: 24px;
}

/* Clearfix for floats */
.am-table-card .dataTables_wrapper::after {
    content: "";
    clear: both;
    display: table;
}

/* Top Controls */
.am-table-card .dataTables_length {
    float: left;
    margin-bottom: 20px;
    color: var(--text-muted);
}
.am-table-card .dataTables_filter {
    float: right;
    margin-bottom: 20px;
}
.am-table-card .dataTables_filter input {
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: 8px 16px;
    outline: none;
}
.am-table-card .dataTables_filter input:focus {
    border-color: var(--primary-color);
}

/* The Table itself */
.am-custom-table {
    clear: both;
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 20px !important;
}
.am-custom-table thead th {
    background-color: var(--primary-color) !important;
    color: var(--text-white) !important;
    padding: 15px 20px !important;
    font-weight: 500;
    border: none !important;
}
.am-custom-table thead th:first-child { border-top-left-radius: var(--border-radius-sm); border-bottom-left-radius: var(--border-radius-sm); }
.am-custom-table thead th:last-child { border-top-right-radius: var(--border-radius-sm); border-bottom-right-radius: var(--border-radius-sm); }

.am-custom-table tbody td {
    padding: 18px 20px !important;
    border-bottom: 1px solid var(--border-color) !important;
    vertical-align: middle;
}
.am-custom-table tbody tr:hover td { background-color: var(--bg-light) !important; }

/* --- Center Align Table Content --- */
.am-custom-table thead th,
.am-custom-table tbody td {
    text-align: center !important;
}

/* Button eka center karanna (Just in case) */
.am-custom-table tbody td:last-child {
    display: table-cell !important; 
    vertical-align: middle !important;
}

/* Bottom Controls */
.am-table-card .dataTables_info {
    float: left;
    margin-top: 10px;
    color: var(--text-muted);
}
.am-table-card .dataTables_paginate {
    float: right;
    margin-top: 10px;
}

/* View Button */
.am-btn-view {
    background-color: var(--secondary-color);
    color: var(--text-white);
    border: none;
    padding: 8px 16px;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    cursor: pointer;
}
.am-btn-view:hover { background-color: var(--primary-color); }


/* --- Responsive Mobile Tweaks --- */
@media (max-width: 991px) {
    .am-stats-grid, .am-stats-grid-emails {
        grid-template-columns: 1fr;
    }
    .am-form-grid, .am-prefs-grid {
        grid-template-columns: 1fr;
    }
    .am-nav-item {
        flex: 1 1 100%;
    }
    .am-choose-contact-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .am-choose-form {
        width: 100%;
        flex-direction: column;
    }
    .am-form-group-inline {
        flex-direction: column;
        align-items: flex-start;
    }
    .am-form-group-inline .am-form-label {
        flex: none;
    }
    .am-table-card .dataTables_length,
    .am-table-card .dataTables_filter,
    .am-table-card .dataTables_info,
    .am-table-card .dataTables_paginate {
        float: none;
        text-align: left;
        margin-bottom: 15px;
    }
}


/* --- User Management Specific Styles --- */
.am-text-dark {
    color: var(--primary-dark);
    font-size: 14px;
}

.am-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
         font-weight: 600;
    text-transform: uppercase;
    margin-left: 8px;
    vertical-align: middle;
}

.am-badge-info {
    background-color: var(--primary-soft);
    color: var(--primary-color);
}

.am-badge-warning {
    background-color: #fef3c7;
    color: #d97706;
}

.am-table-divider {
    background-color: var(--bg-light);
}

.am-inline-form {
    display: inline-block;
    margin: 0;
}

.am-btn-sm {
    padding: 6px 14px;
    font-size: 12px;
}

.am-btn-danger {
    background-color: transparent;
    color: #ef4444;
    border: 1px solid #ef4444;
}

.am-btn-danger:hover:not(.disabled) {
    background-color: #ef4444;
    color: var(--text-white);
}

.am-btn.disabled, .am-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Radio Buttons */
.am-radio-flex {
    display: flex;
    gap: 24px;
    align-items: center;
    margin-top: 10px;
}

.am-radio-wrapper {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-dark);
    font-size: 14px;
}

.am-radio-wrapper input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.am-radio-custom {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: var(--bg-white);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    transition: var(--transition);
}

.am-radio-wrapper input:checked ~ .am-radio-custom {
    border-color: var(--primary-color);
}

.am-radio-custom:after {
    content: "";
    position: absolute;
    display: none;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
}

.am-radio-wrapper input:checked ~ .am-radio-custom:after {
    display: block;
}

/* Custom Checkboxes */
.am-permissions-box {
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 24px;
}

.am-checkbox-wrapper input[type="checkbox"] {
    margin-right: 10px;
    margin-top: 3px;
}

.am-checkbox-title {
         font-weight: 600;
    color: var(--primary-dark);
}

.am-checkbox-desc {
    font-size: 12px;
}


/* Custom Additions for Account Management System */
.bg-accent-soft {
    background-color: var(--accent-soft) !important;
}

.text-accent {
    color: var(--accent-color) !important;
}

.am-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--border-radius-sm);
    font-size: 12px;
         font-weight: 600;
}

.am-badge-info {
    background-color: var(--primary-soft);
    color: var(--primary-color);
}

.am-badge-success {
    background-color: var(--accent-soft);
    color: var(--accent-color);
}

.am-badge-warning {
    background-color: #fef3c7;
    color: #d97706;
}

.am-btn-danger {
    background-color: #dc2626;
    color: var(--text-white);
    border: none;
    padding: 10px 20px;
    border-radius: var(--border-radius-sm);
         font-weight: 600;
    transition: var(--transition);
}

.am-btn-danger:hover {
    background-color: #b91c1c;
    color: var(--text-white);
}



/* =========================================================
   Select Dropdowns Height, Line-Height & Overflow Fix
   ========================================================= */
select.am-form-control,
.am-select-box {
    height: 52px !important;
    min-height: 52px !important;
    line-height: 1.4 !important;
    padding: 12px 40px 12px 18px !important;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b5797' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    background-size: 16px 16px !important;
    color: var(--text-dark) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius-sm) !important;
    cursor: pointer !important;
}

select.am-form-control option,
.am-select-box option {
    padding: 10px 15px !important;
    background-color: #ffffff !important;
    color: var(--text-dark) !important;
    font-size: 14px !important;
}

select.am-form-control:focus,
.am-select-box:focus {
    outline: none !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px var(--primary-soft) !important;
}


/* Select2 Dropdown Custom Styling for iHoster UI */
.select2-container--default .select2-selection--single {
    height: 48px !important;
    border: 1px solid var(--border-color, #dbe4f0) !important;
    border-radius: var(--border-radius-sm, 10px) !important;
    background-color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    padding-left: 6px !important;
    box-shadow: none !important;
    transition: var(--transition, all 0.3s ease) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-dark, #1e293b) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
    right: 12px !important;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--primary-color, #0b2a63) !important;
    box-shadow: 0 0 0 3px var(--primary-soft, #edf4ff) !important;
}

.select2-dropdown {
    border: 1px solid var(--border-color, #dbe4f0) !important;
    border-radius: var(--border-radius-sm, 10px) !important;
    box-shadow: 0 10px 25px rgba(11, 42, 99, 0.1) !important;
    overflow: hidden !important;
    z-index: 99999 !important;
}

.select2-results__option {
    padding: 10px 16px !important;
    font-size: 14px !important;
    color: var(--text-dark, #1e293b) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-soft, #edf4ff) !important;
    color: var(--primary-color, #0b2a63) !important;
      font-weight: 600;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--border-color, #dbe4f0) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    outline: none !important;
}


/* =========================================================
   Change Password Page - Password Tips Box Font & Size Fix
   ========================================================= */

/* Main Box Container */
#main-body .alert-info,
.account-management-container .alert-info,
.alert-info:has(i) {
    padding: 22px 26px !important;
    border-radius: 14px !important;
    background-color: #eef9ff !important; /* Soft premium blue background */
    border: 1px solid #b8e2f8 !important;
    color: #0369a1 !important;
    margin-top: 20px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 4px 12px rgba(3, 105, 161, 0.05) !important;
}

/* Heading - "Tips for a Secure Password" */
#main-body .alert-info strong,
#main-body .alert-info h5,
#main-body .alert-info .alert-title {
    font-size: 18px !important;
      font-weight: 600;
    color: #0284c7 !important;
    display: inline-block !important;
    margin-bottom: 10px !important;
}

/* Icon Next to Heading */
#main-body .alert-info i,
#main-body .alert-info .fa-info-circle,
#main-body .alert-info .fa-circle-info {
    font-size: 20px !important;
    color: #0284c7 !important;
    margin-right: 8px !important;
    vertical-align: -2px !important;
}

/* Tip Sentences & List Text */
#main-body .alert-info p,
#main-body .alert-info ul,
#main-body .alert-info li,
#main-body .alert-info div {
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
    color: #0f172a !important;
}

#main-body .alert-info ul {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding-left: 22px !important;
}

#main-body .alert-info li {
    margin-bottom: 6px !important;
}




/* ==========================================================================
   iHoster Premium Portal Home Styles 
   ========================================================================== */

/* Typography & Reset for this block */
.ih-portal-home {
    font-family: 'Poppins', sans-serif;
    color: var(--text-dark);
    background-color: var(--bg-white);
    overflow-x: hidden;
    
 
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.ih-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* === Hero Section === */
.ih-hero-section {
    background: linear-gradient(135deg, var(--primary-dark) 25%, #0138a1 75%);
    padding: 60px 0 120px;
    position: relative;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    overflow: hidden;
}

/* The cool wave effect at the bottom of the hero */
.ih-hero-section::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,42.7C1120,32,1280,32,1360,32L1440,32L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z" fill="%23ffffff" /></svg>') no-repeat center bottom;
    background-size: cover;
}



.ih-hero-content {
    color: var(--text-white);
    z-index: 2;
    position: relative;
}

.ih-badge-top {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
         font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 24px;
    backdrop-filter: blur(5px);
}

.ih-badge-top i {
    color: var(--accent-color);
    margin-right: 5px;
}

.ih-hero-title {
    font-size: 56px;
         font-weight: 600;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--text-white);
}

.ih-text-highlight {
    color: #3ec741c4;
    text-shadow: 0 0 20px rgba(10, 127, 38, 0.4);
}

.ih-hero-subtitle {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 35px;
    max-width: 90%;
    line-height: 1.6;
}

/* Domain Search Box */
.ih-domain-search-box {
    background: transparent !important; 
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 30px;
}

.ih-search-icon {
    color: var(--accent-color);
    font-size: 20px;
    padding-right: 15px;
}

.ih-domain-input {
    flex: 1;
    border: none;
    padding: 12px 5px;
    font-size: 16px;
    outline: none;
    color: var(--text-dark);
    background: transparent;
}

#btnDomainSearch, #btnTransfer {
    border-radius: 40px !important;
    padding: 12px 25px !important;
}
#btnTransfer:hover {
    background: var(--accent-color) !important;
    color: #ffffff !important;
}


.ih-captcha-container {
    margin-top: 20px !important;
    padding-top: 0 !important;
    border-top: none !important;
    text-align: left !important;
    padding-left: 25px; 
}

.ih-captcha-container p {
    color: rgba(255, 255, 255, 0.8) !important; /* Text eka sudu pata kala */
    margin-bottom: 8px !important;
}

.ih-captcha-container > div {
    justify-content: flex-start !important; /* Center nathuwa left walata gaththa */
}

.ih-captcha-container input {
    background: rgba(255,255,255,0.1) !important; /* Input ekata podi transparent look ekak dunna */
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}

.ih-captcha-container input:focus {
    background: rgba(255,255,255,0.2) !important;
    outline: none !important;
}

/* Buttons */
.ih-btn-primary {
    background-color: var(--accent-color);
    color: var(--text-white) !important;
    padding: 14px 28px;
    border-radius: var(--border-radius-md);
         font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ih-btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(10, 127, 38, 0.3);
}

.ih-btn-outline {
    background-color: transparent;
    color: var(--text-white) !important;
    padding: 12px 28px;
    border-radius: var(--border-radius-md);
         font-weight: 600;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: var(--transition);
    display: inline-flex;
}

.ih-btn-outline:hover {
    border-color: var(--text-white);
    background: rgba(255, 255, 255, 0.1);
}

.ih-hero-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
}

/* Hero Features */
.ih-hero-features {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 25px;
    gap: 20px; 
}

.ih-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1; 
}

.ih-feature-item i {
    color: #3EC741;
    font-size: 26px;
}

.ih-feature-item div {
    display: flex;
    flex-direction: column;
}

.ih-feature-item strong {
    font-size: 16px;
         font-weight: 600;
    color: var(--text-white);
    white-space: nowrap;
}

.ih-feature-item span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

/* Hero Image Floating Animation */
.ih-hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
}


.ih-hero-image img {
    width: 100%;
    max-width: 800px;
    transform: scale(1.15) translateX(40px); 
    animation: float 6s ease-in-out infinite;
}


@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

/* === Services Section === */
.ih-services-section {
    padding: 60px 0 80px;
    background-color: var(--bg-white);
}

.ih-section-title {
    text-align: center;
    font-size: 42px;
    color: var(--primary-color);
         font-weight: 600;
    margin-bottom: 50px;
}

.ih-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.ih-service-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 40px 30px;
    text-align: center;
    transition: var(--transition);
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ih-service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-soft);
    border-color: var(--primary-soft);
}

.ih-card-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ih-card-icon img {
    max-width: 100%;
    object-fit: contain;
}

.ih-card-content h3 {
    font-size: 25px;
         font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.ih-card-content p {
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.ih-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
         font-weight: 600;
    color: var(--primary-color) !important;
    text-decoration: none;
    padding: 12px 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    transition: var(--transition);
    width: 100%;
}

.ih-card-link:hover {
    background-color: var(--bg-light);
    color: var(--primary-dark) !important;
}

/* Featured Green Link */
.ih-text-green {
    color: var(--accent-color) !important;
    border-color: var(--accent-color);
}
.ih-text-green:hover {
    background-color: var(--accent-soft);
    color: var(--accent-hover) !important;
}

/* === Bottom CTA Banner === */
.ih-cta-section {
    padding: 0 0 80px;
    background-color: var(--bg-white);
}

.ih-cta-box {
    background: linear-gradient(135deg, var(--primary-dark) 25%, #0138a1 75%);
    border-radius: var(--border-radius-lg);
    padding: 40px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}

/* Green overlay highlight on CTA banner */
.ih-cta-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(10, 127, 38, 0.15) 0%, rgba(0,0,0,0) 70%);
    border-radius: 50%;
}

.ih-cta-icon {
    flex: 0 0 120px;
    margin-right: 30px;
    z-index: 2;
}

.ih-cta-icon img {
    width: 100%;
    max-width: 300px !important;
    height: auto;
    /* animation: float 4s ease-in-out infinite; */
    transform: scale(1.15);
}

.ih-cta-text {
    flex: 1;
    color: var(--text-white);
    z-index: 2;
}

.ih-cta-text h2 {
    font-size: 26px;
         font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-white);
}

.ih-cta-text p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    margin: 0;
}

.ih-cta-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
    margin-left: 30px;
    z-index: 2;
}

.ih-btn-large {
    padding: 16px 35px;
    font-size: 1.1rem;
}

.ih-guarantee-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ih-guarantee-text i {
    color: #3EC741;
}

.ih-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px; 
    align-items: center;
}

/* === Responsive Design adjustments === */
@media (max-width: 991px) {
    .ih-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .ih-hero-subtitle {
        margin: 0 auto 30px;
    }

    .ih-hero-buttons {
        justify-content: center;
    }
    
    .ih-hero-features {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
    
    .ih-services-grid {
        grid-template-columns: 1fr;
    }

    .ih-cta-box {
        flex-direction: column;
        text-align: center;
    }

    .ih-cta-icon img {
    width: 100%;
    max-width: 180px;
    height: auto;
    animation: float 4s ease-in-out infinite;
    transform: scale(1.15); 
}

    .ih-cta-action {
        margin: 30px 0 0;
        align-items: center;
    }
}


.ih-hero-section .ih-container {
    max-width: 1500px;
}



/* =========================================================
   iHoster One-Page Checkout Custom Styles 
========================================================= */

#ihoster-checkout-wrapper { 
    color: var(--text-dark); 
}

.checkout-title { 
    font-size: 35px; 
         font-weight: 600; 
    color: var(--primary-color); 
}

.checkout-subtitle { 
    color: var(--text-muted); 
    font-size: 18px; 
}

/* Custom Cards */
.ihoster-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 32px;
    box-shadow: var(--shadow-card);
    transition: var(--transition);
}

.ihoster-card:hover { 
    box-shadow: var(--shadow-soft); 
}

.step-title { 
    font-size: 22px; 
         font-weight: 600; 
    color: var(--primary-dark); 
    margin-bottom: 8px; 
}

.step-desc { 
    font-size: 14px; 
    color: var(--text-muted); 
    margin-bottom: 24px; 
}

/* Billing Cycle Radio Buttons (HostPapa Style) */
.billing-cycle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.cycle-option {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 24px;
    border: 2px solid var(--border-color); 
    border-radius: var(--border-radius-sm);
    cursor: pointer; 
    transition: var(--transition); 
    text-align: center;
}

.cycle-option input[type="radio"] { 
    display: none; 
}

.cycle-option.active, 
.cycle-option:hover {
    border-color: var(--accent-color); 
    background-color: var(--accent-soft);
}

.cycle-name { 
         font-weight: 600; 
    font-size: 18px; 
    margin-bottom: 5px; 
}

.cycle-price { 
    font-size: 19px; 
    color: var(--primary-color); 
         font-weight: 600; 
}

/* Form Inputs */
.form-section .form-control, 
.domain-search-box .form-control, 
.domain-search-box .form-select {
    border: 1px solid var(--border-color); 
    border-radius: var(--border-radius-sm);
    padding: 22px 15px; 
    font-size: 15px; 
    color: var(--text-dark); 
    background-color: var(--bg-light);
}

.form-section .form-control:focus, 
.domain-search-box .form-control:focus {
    border-color: var(--secondary-color); 
    box-shadow: 0 0 0 3px rgba(43, 87, 151, 0.1); 
    outline: none;
}

.form-label { 
    font-weight: 500; 
    font-size: 14px; 
    color: var(--primary-color); 
}

/* Domain Search Input Group */
.domain-search-box .input-group { 
    border-radius: var(--border-radius-sm); 
    overflow: hidden; 
    border: 1px solid var(--border-color); 
}

.domain-search-box .form-control, 
.domain-search-box .form-select { 
    border: none; 
    background: transparent; 
}

.domain-search-box .tld-select { 
    max-width: 100px; 
    border-left: 1px solid var(--border-color); 
    border-right: 1px solid var(--border-color); 
}

/* Buttons */
.btn-primary {
    background-color: var(--accent-color); 
    border-color: var(--accent-color); 
    color: var(--text-white);
         font-weight: 600; 
    padding: 12px 24px; 
    border-radius: var(--border-radius-sm); 
    transition: var(--transition);
}

.btn-primary:hover { 
    background-color: var(--accent-hover); 
    border-color: var(--accent-hover); 
}

.btn-submit-order { 
    font-size: 18px; 
    padding: 15px; 
    border-radius: var(--border-radius-lg); 
}

/* Sticky Summary Right Side */
.sticky-summary {
    position: -webkit-sticky;
    position: sticky;
    top: 130px !important; 
    background: #ffffff;
    border: 1px solid var(--border-color, #dbe4f0);
    border-radius: 16px;
    z-index: 10;
    align-self: flex-start; 
}
.summary-title {
    font-size: 22px;
         font-weight: 600;
    margin-bottom: 24px;
}

.summary-divider { 
    border-top: 1px solid var(--border-color); 
    margin: 24px 0; 
}


/* =========================================================
   iHoster One-Page Checkout - Master CSS Stylesheet
========================================================= */

/* Layout Overrides */
.col-md-3.pull-md-left.sidebar {
    display: none !important;
}

.col-md-9.pull-md-right.main-content {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Typography & General Wrapper */
#ihoster-checkout-wrapper {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text-dark, #14376f);
}

.checkout-title {
    font-size: 40px;
         font-weight: 600;
    color: var(--text-dark, #14376f);
}

.checkout-subtitle {
    color: var(--text-muted, #64748b);
    font-size: 19px;
}

/* Card Boxes */
.ihoster-card {
    background: #ffffff;
    border: 1px solid var(--border-color, #dbe4f0);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* Step Badges (1, 2, 3, 4 Circle Numbering) */
.step-title-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.step-badge {
    width: 40px;
    height: 40px;
    background-color: var(--accent-color, #0a7f26);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
         font-weight: 600;
    flex-shrink: 0;
}

.step-title {
    font-size: 25px;
         font-weight: 600;
    color: var(--text-dark, #14376f);
    margin: 0;
}

.step-desc {
    font-size: 16px;
    color: var(--text-muted, #64748b);
    margin-left: 40px;
    margin-bottom: 20px;
}

/* Billing Cycle Options (Step 1) */
.billing-cycle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.cycle-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 20px;
    background: #ffffff;
    border: 1.5px solid var(--border-color, #dbe4f0);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.cycle-option:hover {
    border-color: var(--accent-color, #0a7f26);
}

.cycle-option.active {
    border-color: var(--accent-color, #0a7f26) !important;
    background-color: var(--accent-soft, #eef9f1) !important;
}

.cycle-name {
         font-weight: 600;
    font-size: 18px;
    color: var(--text-dark, #14376f);
}

.badge-save {
    background-color: var(--accent-color, #0a7f26);
    color: #ffffff;
    font-size: 11px;
         font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    margin-top: 4px;
}

/* Domain Option Toggle Buttons */
.domain-type-toggle .btn-check:checked + .btn-outline-custom {
    background-color: var(--accent-color, #0a7f26);
    border-color: var(--accent-color, #0a7f26);
    color: #ffffff;
}

.domain-type-toggle .btn-outline-custom {
    color: var(--accent-color, #0a7f26);
    border: 1px solid var(--accent-color, #0a7f26);
         font-weight: 600;
    border-radius: 25px;
    padding: 8px 20px;
    margin: 0 4px;
}

.domain-type-toggle .btn-outline-custom:hover {
    background-color: var(--accent-soft, #eef9f1);
    color: var(--accent-color, #0a7f26);
}

.ihoster-btn-custom {
    background-color: var(--accent-color, #0a7f26) !important;
    border-color: var(--accent-color, #0a7f26) !important;
    color: #ffffff !important;
         font-weight: 600;
}

/* Selected Domain Pill */
.selected-domain-pill {
    background: var(--bg-light, #f7faff);
    border: 1px solid var(--accent-color, #0a7f26);
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.badge-selected-green {
    background-color: var(--accent-color, #0a7f26);
    color: #ffffff;
    font-size: 11px;
         font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
}

/* Review Section (Step 3) */
.onepage-review-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 25px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-color, #dbe4f0);
}

.onepage-review-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.onepage-review-label {
    font-size: 11px;
         font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--accent-color, #0a7f26);
}

.onepage-review-name {
    font-size: 16px;
    color: var(--text-dark, #14376f);
}

.onepage-review-meta,
.onepage-review-domain {
    color: var(--text-muted, #64748b);
    font-size: 13px;
}

.onepage-review-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    white-space: nowrap;
}

.onepage-review-price strong {
    color: var(--text-dark, #14376f);
    font-size: 18px;
}

.onepage-review-price span {
    color: var(--text-muted, #64748b);
    font-size: 12px;
}

.onepage-review-totals {
    margin-top: 22px;
    padding-top: 5px;
}

.onepage-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    color: var(--text-muted, #64748b);
}

.onepage-grand-total {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color, #dbe4f0);
    font-size: 18px;
    color: var(--text-dark, #14376f);
}

.onepage-review-actions {
    margin-top: 25px;
    text-align: right;
}

.onepage-review-actions .btn {
    min-width: 250px;
    border-radius: 10px;
    padding: 12px 24px;
}

/* Order Summary Box (Right Side) */
.ihoster-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color, #dbe4f0);
}

.ihoster-summary-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ihoster-summary-type {
    font-size: 10px;
         font-weight: 600;
    text-transform: uppercase;
    color: var(--accent-color, #0a7f26);
}

.ihoster-summary-name {
    color: var(--text-dark, #14376f);
    font-size: 16px;
}

.ihoster-summary-cycle {
    color: var(--text-muted, #64748b);
    font-size: 12px;
}

.ihoster-summary-price {
    font-size: 16px;
         font-weight: 600;
    color: var(--text-dark, #14376f);
    white-space: nowrap;
    text-align: right;
}

.ihoster-summary-total-label {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-muted, #64748b);
}

.ihoster-summary-total {
    margin-top: 5px;
    text-align: center;
    font-size: 28px;
         font-weight: 600;
    color: var(--text-dark, #14376f);
}

/* Step 4 Checkout Form Styling */
#step-checkout-details .onepage-checkout-loading {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-muted, #64748b);
         font-weight: 600;
}

#step-checkout-details #ihoster-checkout-fragment .cart-sidebar,
#step-checkout-details #ihoster-checkout-fragment .header-lined,
#step-checkout-details #ihoster-checkout-fragment .sidebar-categories-collapsed {
    display: none !important;
}

#step-checkout-details #ihoster-checkout-fragment .cart-body {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

#step-checkout-details #ihoster-checkout-fragment #order-standard_cart {
    margin: 0 !important;
    padding: 0 !important;
}

#step-checkout-details #frmCheckout .form-control {
    border-radius: 10px;
}

#step-checkout-details #paymentGatewaysContainer label.radio-inline {
    margin: 6px;
    padding: 10px 14px;
    border: 1px solid var(--border-color, #dbe4f0);
    border-radius: 10px;
    background: #ffffff;
}

#step-checkout-details #btnCompleteOrder {
    border-radius: 10px;
    background: var(--accent-color, #0a7f26);
    border-color: var(--accent-color, #0a7f26);
}

/* Mobile Responsive Adjustments */
@media (max-width: 767px) {
    .onepage-review-item,
    .ihoster-summary-item {
        flex-direction: column;
    }

    .onepage-review-price {
        align-items: flex-start;
        text-align: left;
    }

    .domain-type-toggle .btn-outline-custom {
        display: block;
        width: 100%;
        margin: 7px 0;
    }
}



/* =========================================================
   JS Injected Elements - Domain Search Success Boxes
========================================================= */

.domain-success-box {
    border: 1px solid var(--accent-color, #0a7f26);
    border-radius: 10px;
    padding: 18px;
}

.domain-success-box.owndomain-box {
    background: var(--bg-light, #f7faff);
}

.domain-success-box.register-box {
    background: var(--accent-soft, #eef9f1);
}

.domain-success-label {
    font-size: 11px;
         font-weight: 600;
    text-transform: uppercase;
    color: var(--accent-color, #0a7f26);
    margin-bottom: 6px;
}

.domain-success-name {
    font-size: 18px;
         font-weight: 600;
    color: var(--text-dark, #14376f);
    margin-bottom: 12px;
}

/* Forces WHMCS injected cart body to be full width */
.ihoster-full-width {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}



/* =========================================================
   Step 4 Native WHMCS Checkout Form Overrides
========================================================= */

/* Replaced Inline Style */
.nostore-checkbox-container {
    line-height: 32px;
}

/* WHMCS Security Alert Box Override */
#order-standard_cart .checkout-security-msg {
    background: #fffdf0;
    border: 1px dashed #f5c518;
    color: #856404;
    border-radius: 12px;
    padding: 16px;
    margin-top: 30px;
    text-align: center;
    font-size: 13px;
    box-shadow: none;
}

#order-standard_cart .checkout-security-msg i {
    color: #f5c518;
    margin-right: 6px;
    font-size: 16px;
}

/* Checkout Field Icons Adjustment */
#order-standard_cart .form-group.prepend-icon .field-icon {
    color: #94a3b8;
    border-right: 1px solid #e2e8f0;
    padding-right: 12px;
}

#order-standard_cart .form-group.prepend-icon .form-control {
    padding-left: 45px !important;
}

/* Payment Gateway Selector Premium Styling */
#paymentGatewaysContainer label.radio-inline {
    border: 1px solid var(--border-color, #dbe4f0);
    border-radius: 10px;
    padding: 12px 18px;
    margin: 6px 8px;
    background: #ffffff;
    transition: all 0.2s ease;
    cursor: pointer;
         font-weight: 600;
    color: var(--text-dark, #14376f);
}

#paymentGatewaysContainer label.radio-inline:hover {
    border-color: var(--accent-color, #0a7f26);
    background: var(--accent-soft, #eef9f1);
}

/* Target checked state for Radio (Note: requires JS to toggle class in standard WHMCS, 
   but basic native checked style is handled by accent borders above) */
#paymentGatewaysContainer input[type="radio"]:checked + label {
    border-color: var(--accent-color, #0a7f26);
    background: var(--accent-soft, #eef9f1);
}



/* =========================================================
   Order Review Section - Promo Code & Remove Buttons UI
========================================================= */

/* Remove Buttons (Trash Icons) */
.onepage-review-price a.text-danger, 
#btn-remove-domain-item {
    color: #ef4444 !important;
         font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px !important;
    padding: 4px 10px;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
    background: transparent;
}

.onepage-review-price a.text-danger:hover, 
#btn-remove-domain-item:hover {
    background: #fef2f2;
    color: #ffffff !important;
}

/* Promo Code & Empty Cart Container */
.promo-container {
    background: #f8fafc;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 12px;
    padding: 20px !important;
    margin-top: 30px !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.promo-container > .row {
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Promo Input Group (Pill Shape) */
.promo-container .input-group {
    border-radius: 50px;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    padding: 4px;
    margin-top: 10px;
    max-width: 350px;
}

.promo-container .form-control {
    border: none !important;
    box-shadow: none !important;
    padding: 8px 16px !important;
    font-size: 14px;
    background: transparent !important;
    height: auto !important;
}

.promo-container .btn-dark {
    background-color: var(--text-dark, #14376f) !important;
    border: none !important;
    border-radius: 50px !important;
    color: #ffffff !important;
    padding: 8px 24px !important;
         font-weight: 600;
    transition: all 0.2s;
}

.promo-container .btn-dark:hover {
    background-color: #0f2956 !important;
}

/* Empty Cart Button */
.promo-container .onepage-empty-cart-btn {
    color: #64748b !important;
         font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid #cbd5e1;
    border-radius: 50px;
    background: #ffffff;
    transition: all 0.2s;
    white-space: nowrap;
}

.promo-container .onepage-empty-cart-btn:hover {
    background: #fef2f2;
    color: #ef4444 !important;
    border-color: #ef4444;
}

/* Fix for Bootstrap older versions text alignment */
.mt-md-0 {
    margin-top: 0 !important;
}

/* =========================================================
   Edit Domain Button UI
========================================================= */
#btn-edit-domain-item {
    border-radius: 50px !important;
    font-size: 12px;
         font-weight: 600;
    padding: 4px 14px;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease-in-out;
    margin-top: 5px;
    border: 1px solid #cbd5e1;
    color: #475569;
    background: #ffffff;
    text-decoration: none;
}

#btn-edit-domain-item:hover {
    background-color: var(--text-dark, #14376f);
    color: #ffffff !important;
    border-color: var(--text-dark, #14376f);
}

#btn-edit-domain-item i {
    font-size: 11px;
}


/* =========================================================
   Suggested Alternative Domains List (Updated Light Theme)
========================================================= */
.suggested-domains-wrapper {
    width: 100%;
    animation: fadeIn 0.4s ease-in-out;
    margin-top: 16px;
}

.suggested-domains-list {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.suggested-domain-item {
    padding: 14px 20px;
    color: #475569; /* Soft dark gray */
         font-weight: 600;
    font-size: 15px;
    border-bottom: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.suggested-domain-item:last-child {
    border-bottom: none;
}

.suggested-domain-item:hover {
    background-color: #f8fafc;
    color: var(--text-dark, #14376f); /* Highlights in brand dark blue */
    padding-left: 26px; /* Cool hover indent effect */
    cursor: default;
}



/* =========================================================
   Suggested Alternative Domains List (Updated with Buttons)
========================================================= */
.suggested-domains-wrapper {
    width: 100%;
    animation: fadeIn 0.4s ease-in-out;
    margin-top: 16px;
}

.suggested-domains-list {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.suggested-domain-item {
    padding: 12px 20px;
    color: #475569;
         font-weight: 600;
    font-size: 15px;
    border-bottom: 1px solid #e2e8f0;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pushes the button to the right */
}

.suggested-domain-item:last-child {
    border-bottom: none;
}

.suggested-domain-item:hover {
    background-color: #f8fafc;
}

.alt-domain-name {
    transition: all 0.2s ease;
}

/* Indent only the text on hover, keeping the button in place */
.suggested-domain-item:hover .alt-domain-name {
    color: var(--text-dark, #14376f);
    padding-left: 6px; 
}



/* =========================================================
   iHoster Premium Custom Domain Page (Fully Redesigned UI)
========================================================= */

/* Hide WHMCS default sidebars */
#order-standard_cart .cart-sidebar,
#order-standard_cart .header-lined,
#order-standard_cart .sidebar-categories-collapsed {
    display: none !important;
}

#order-standard_cart .cart-body {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
}

#hostpapa-domain-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
    padding: 0 15px 80px 15px;
}

.max-w-700 { max-width: 700px; margin: 0 auto; }
.max-w-500 { max-width: 500px; }

/* -----------------------------------------
   1. HERO BANNER
----------------------------------------- */
/* HERO BANNER WITH CURVED CORNERS (FIXED SEARCH CLIPPING) */
.hp-domain-hero {
    background: linear-gradient(135deg, var(--primary-dark, #0b2a63) 0%, #0e2752 50%, var(--primary-color, #11367c) 100%) !important;
    background-color: #0b2a63 !important;
    border-radius: 20px !important; /* Smooth Curved Corners */
    margin-top: 10px !important;
    padding: 70px 20px 60px 20px !important;
    text-align: center !important;
    box-shadow: 0 10px 30px rgba(11, 42, 99, 0.12) !important;
    position: relative !important;
    overflow: visible !important; /* Prevents clipping the search bar */
}

/* SEARCH BOX OVERLAP POSITIONING */
.hp-search-box-container {
    max-width: 780px !important;
    margin: 30px auto -85px auto !important; /* Pulls search bar down outside the hero */
    position: relative !important;
    z-index: 100 !important;
}

.hp-hero-title {
    font-size: 55px;
         font-weight: 600;
    margin-bottom: 12px;
    color: #ffffff !important;
}

.hp-hero-subtitle {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.85);
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.5;
}

/* -----------------------------------------
   2. SEARCH BAR OVERLAP
----------------------------------------- */
.hp-search-box-container {
    max-width: 780px;
    margin: 30px auto -75px auto; 
    position: relative;
    z-index: 10;
}

.hp-search-group {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 50px;
    padding: 6px 8px 6px 25px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12), 0 0 0 6px rgba(255,255,255,0.25);
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

.hp-search-group:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 20px 40px rgba(10, 127, 38, 0.2), 0 0 0 6px rgba(10, 127, 38, 0.15);
}

.hp-search-icon {
    font-size: 18px;
    color: var(--primary-color);
    margin-right: 12px;
}

.hp-search-input {
    border: none !important;
    box-shadow: none !important;
    font-size: 16px !important;
    color: var(--text-dark) !important;
    background: transparent !important;
    padding: 10px 0 !important;
         font-weight: 600;
}

.hp-btn-search {
    background: linear-gradient(135deg, var(--accent-color), #11993f) !important;
    color: #ffffff !important;
      font-weight: 600;
    font-size: 15px !important;
    padding: 12px 35px !important;
    border-radius: 50px !important;
    border: none !important;
    box-shadow: 0 6px 15px rgba(10, 127, 38, 0.3) !important;
}

/* -----------------------------------------
   3. EXACT MATCH CARD
----------------------------------------- */
.hp-featured-domain-card {
    background: #ffffff;
    border: 2px solid rgba(10, 127, 38, 0.25);
    border-radius: 18px;
    padding: 25px 35px;
    position: relative;
    margin: 60px auto 30px auto;
    max-width: 850px; /* Reduced width */
    box-shadow: 0 12px 30px rgba(10, 127, 38, 0.1);
}

.hp-available-badge {
    position: absolute;
    top: -13px;
    left: 30px;
    background: linear-gradient(135deg, var(--accent-color), #11993f);
    color: #ffffff;
    font-size: 11px;
         font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(10, 127, 38, 0.3);
}

.hp-card-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 15px;
}

.hp-domain-name-display {
    font-size: 28px;
         font-weight: 600;
    color: var(--primary-dark);
    margin: 0 0 4px 0;
}

.hp-domain-status-tag {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.hp-domain-price-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.hp-domain-price-right .domain-price .price {
    font-size: 28px;
         font-weight: 600;
    color: var(--primary-dark);
    margin: 0;
}

.hp-btn-buy-now {
    background: linear-gradient(135deg, var(--accent-color), #11993f) !important;
    color: #ffffff !important;
    font-size: 15px !important;
      font-weight: 600;
    padding: 10px 28px !important;
    border-radius: 50px !important;
    border: none !important;
    box-shadow: 0 6px 15px rgba(10, 127, 38, 0.3) !important;
    transition: all 0.2s ease !important;
}

.hp-btn-buy-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(10, 127, 38, 0.45) !important;
}

/* -----------------------------------------
   4. SPOTLIGHT TLDS (Perfectly Centered)
----------------------------------------- */
.spotlight-tlds-container {
    display: flex;
    justify-content: center; /* This perfectly centers the boxes */
    align-items: stretch;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 950px;
    margin: 0 auto;
}

.spotlight-tld-container {
    width: 220px; /* Fixed width for perfect centering */
    flex: 0 0 auto; 
}

.spotlight-tld {
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    padding: 20px 15px !important;
    text-align: center !important;
    box-shadow: 0 8px 20px rgba(11, 42, 99, 0.05) !important;
    transition: all 0.3s ease !important;
}

.spotlight-tld:hover {
    border-color: var(--accent-color) !important;
    box-shadow: 0 12px 25px rgba(10, 127, 38, 0.15) !important;
    transform: translateY(-3px) !important;
}

.spotlight-tld-header {
    font-size: 22px;
         font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 5px;
}

.spotlight-tld .available.price {
    font-size: 20px !important;
      font-weight: 600;
    color: var(--accent-color) !important;
    display: block !important;
    margin: 5px 0 10px 0 !important;
}

.hp-btn-spotlight-add {
    border: 2px solid var(--border-color) !important;
    color: var(--text-dark) !important;
      font-weight: 600;
    font-size: 13px !important;
    border-radius: 50px !important;
    padding: 5px 18px !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
}

.hp-btn-spotlight-add:hover {
    border-color: var(--accent-color) !important;
    background: var(--accent-color) !important;
    color: #ffffff !important;
}

/* -----------------------------------------
   5. SUGGESTIONS LIST 
----------------------------------------- */
.hp-hide-always {
    display: none !important;
}

.hp-suggestions-wrapper {
    max-width: 950px;
    margin: 40px auto 0 auto;
}

.hp-section-title {
    color: var(--primary-dark);
         font-weight: 600;
    font-size: 35px;
}

.hp-suggestion-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-radius: 12px !important;
    padding: 14px 22px !important;
    border: 1px solid var(--border-color) !important;
    margin-bottom: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(11, 42, 99, 0.03) !important;
}

.hp-suggestion-item:hover {
    border-color: rgba(11, 42, 99, 0.2) !important;
    box-shadow: 0 8px 20px rgba(11, 42, 99, 0.08) !important;
}

.hp-sug-domain {
    font-size: 16px;
         font-weight: 600;
    color: var(--primary-dark);
}

.hp-sug-price {
    font-size: 17px;
         font-weight: 600;
    color: var(--primary-dark);
}

.hp-btn-outline-buy {
    border: 2px solid var(--border-color) !important;
    color: var(--text-dark) !important;
      font-weight: 600;
    font-size: 13px !important;
    border-radius: 50px !important;
    padding: 6px 20px !important;
    background: transparent !important;
}

.hp-btn-outline-buy:hover {
    border-color: var(--accent-color) !important;
    background: var(--accent-color) !important;
    color: #ffffff !important;
}

/* -----------------------------------------
   6. PROMO CARDS (Premium Elevated Style)
----------------------------------------- */
.hp-promo-cards-section {
    max-width: 950px;
    margin: 60px auto 0 auto;
}

.hp-promo-card {
    background: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 35px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 15px 35px rgba(11, 42, 99, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.hp-promo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(11, 42, 99, 0.15);
}

/* Beautiful Top Glow Borders */
.hp-card-hosting {
    border-top: 5px solid var(--accent-color);
}
.hp-card-transfer {
    border-top: 5px solid var(--primary-color);
}

.hp-promo-badge {
    font-size: 12px;
         font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--accent-color);
    background: rgba(10, 127, 38, 0.1);
    padding: 4px 12px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 12px;
}

.badge-blue {
    color: var(--primary-color);
    background: rgba(11, 42, 99, 0.1);
}

.hp-promo-content h3 {
    font-size: 22px;
         font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.hp-promo-sub {
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
    max-width: 320px;
}

.hp-promo-icon-box {
    width: 65px;
    height: 65px;
    background: var(--bg-light);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 2px 10px rgba(11, 42, 99, 0.05);
}

.hp-promo-icon-box i {
    font-size: 28px;
    color: var(--primary-dark);
}

.hp-promo-btn-primary {
    background: var(--accent-color) !important;
    color: #ffffff !important;
      font-weight: 600;
    font-size: 16px !important;
    padding: 10px 22px !important;
    border-radius: 50px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(10, 127, 38, 0.25) !important;
}

.hp-promo-btn-dark {
    background: var(--primary-dark) !important;
    color: #ffffff !important;
      font-weight: 600;
    font-size: 16px !important;
    padding: 10px 22px !important;
    border-radius: 50px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(11, 42, 99, 0.25) !important;
}

/* Pricing Table container fix */
.hp-tld-pricing-section {
    max-width: 950px;
    margin: 50px auto 0 auto;
}
.hp-tld-table-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(11, 42, 99, 0.05);
}
.tld-pricing-header {
    background-color: var(--primary-dark);
    color: #ffffff;
    font-size: 12px;
         font-weight: 600;
}


/* -----------------------------------------
   7. UNAVAILABLE & ERROR STATES (Premium Look)
----------------------------------------- */

/* Main Unavailable / Invalid Alert Box */
#primaryLookupResult p.domain-checker-unavailable,
#primaryLookupResult p.domain-checker-invalid,
#primaryLookupResult p.domain-error {
    background: #ffffff !important;
    border: 2px solid #fecaca !important; /* Soft Red Border */
    border-radius: 18px !important;
    padding: 25px 35px !important;
    margin: 60px auto 30px auto !important;
    max-width: 850px !important;
    box-shadow: 0 12px 30px rgba(239, 68, 68, 0.1) !important;
    font-size: 22px !important;
      font-weight: 600;
    color: var(--primary-dark) !important;
    text-align: center;
    position: relative;
    display: block;
}

/* Add an icon before the unavailable text */
#primaryLookupResult p.domain-checker-unavailable::before,
#primaryLookupResult p.domain-checker-invalid::before {
    content: '\f071'; /* FontAwesome Warning Icon */
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free';
         font-weight: 600;
    color: #ef4444; /* Red Icon */
    margin-right: 12px;
    font-size: 24px;
    vertical-align: middle;
}



/* Spotlight Cards - Unavailable Buttons (Premium Red Look) */
.spotlight-tld .btn.unavailable,
.spotlight-tld .btn.invalid {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
      font-weight: 600;
    font-size: 14px !important; /* Buy Now button එකේ සයිස් එකට සමාන කළා */
    border-radius: 50px !important;
    padding: 10px 24px !important; /* Buy Now button එකේ padding එකට සමාන කළා */
    min-width: 130px !important; /* Buy Now button එකේ පළලට සමාන කළා */
    white-space: nowrap !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
    opacity: 1 !important; 
    cursor: not-allowed !important;
    margin: 0 !important; /* පල්ලෙහාට තල්ලු වෙන margin-top එක අයින් කළා */
}

/* Unavailable වෙලා තියෙනකොට Card එක hover වෙද්දි ඉස්සෙන එක නවත්තන්න */
.spotlight-tld:has(.btn.unavailable:not(.w-hidden)):hover {
    transform: none !important;
    box-shadow: 0 8px 20px rgba(11, 42, 99, 0.05) !important;
    border-color: var(--border-color) !important;
}


/* Hero Banner Full Bleed */
#hostpapa-domain-wrapper {
    max-width: 100% !important;
    padding: 0 0 80px 0 !important;
}



/* Inner Centered Container */
.hp-inner-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Gap creator between Search Box and Great News Text */
.hp-great-news-text {
    margin-top: 110px !important;
}

/* More Options Gray Background Section */
.hp-more-options-section {
    background-color: #f8fafc !important;
    padding: 50px 0 !important;
    margin: 40px 0 !important;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    width: 100%;
}

/* Center Spotlight Cards */
.spotlight-tlds-container {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

.spotlight-tlds{
    margin: 15px 0 !important;
    padding: 7px 14px !important;
    background-color: #f8fafc !important;
}

.domain-checker-result-headline{
    margin: 0px auto !important;
}


/* -----------------------------------------
   9. MODERN TLD PRICING TABLE & CATEGORY BADGES
----------------------------------------- */
.hp-tld-pricing-section {
    max-width: 950px;
    margin: 70px auto 60px auto;
}

/* Category Filter Buttons (Modern Pill Tabs) */
.tld-filters {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tld-filters .hp-tld-badge {
    background: #ffffff !important;
    color: var(--primary-dark) !important;
    border: 1px solid #cbd5e1 !important;
    padding: 8px 20px !important;
    border-radius: 30px !important;
    font-size: 15px !important;
      font-weight: 600;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

.tld-filters .hp-tld-badge:hover,
.tld-filters .hp-tld-badge.active {
    background: var(--accent-color) !important;
    color: #ffffff !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 4px 12px rgba(10, 127, 38, 0.25) !important;
}

/* Main Table Container */
.hp-tld-table-card {
    background: #ffffff;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(11, 42, 99, 0.06);
    border: 1px solid #e2e8f0;
}

/* Table Header (Uppercase & Clean Typography) */
.tld-pricing-header {
    background: linear-gradient(135deg, var(--primary-dark, #0b2a63), #0e2752) !important;
    color: #ffffff !important;
    padding: 16px 0 !important;
    font-size: 12px;
         font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: none !important;
}

.tld-pricing-header div {
    background: transparent !important;
    color: #ffffff !important;
}

/* Rows & Hover Effects */
.tld-row {
    background: #ffffff;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f1f5f9 !important;
}

.tld-row:last-child {
    border-bottom: none !important;
}

.tld-row:hover {
    background: #f8fafc !important;
}

/* TLD Extension Label (.com, .net as Modern Chip Badges) */
.tld-row .two-row-center strong {
    font-size: 18px !important;
    color: var(--primary-dark) !important;
      font-weight: 600;
    background: #f1f5f9;
    padding: 5px 14px;
    border-radius: 8px;
    display: inline-block;
}

.tld-row .price, .tld-row span.font-bold {
    font-size: 18px !important;
    color: var(--accent-color) !important;
}

/* Price Hierarchy */
.tld-row .font-bold {
    font-size: 15px !important;
    color: var(--primary-dark) !important;
      font-weight: 600;
}



/* Clean Column Separators */
.tld-row .col-4 {
    border-left: 1px solid #f1f5f9;
}

.tld-row .col-4:first-child {
    border-left: none;
}


/* -----------------------------------------
   10. SPOTLIGHT LIST VIEW (CLEAN SINGLE-LINE FIX)
----------------------------------------- */
.hp-spotlight-list-wrapper {
    max-width: 850px;
    margin: 0 auto;
}

.hp-spotlight-list-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(11, 42, 99, 0.05);
}

.hp-spotlight-list-item {
    border-bottom: 1px solid #e2e8f0;
    padding: 18px 28px;
    transition: background 0.2s ease;
}

.hp-spotlight-list-item:last-child {
    border-bottom: none;
}

.hp-spotlight-list-item:hover {
    background: #f8fafc;
}

/* Remove WHMCS default inner card box & padding */
.hp-spotlight-list-item .spotlight-tld {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}

/* FORCE DOMAIN NAME TO STAY ON ONE SINGLE LINE */
.hp-spotlight-domain {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    white-space: nowrap !important;
    font-size: 18px !important;
      font-weight: 600;
}

.hp-sl-prefix, 
.hp-sl-tld {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.hp-sl-prefix {
    color: var(--primary-dark) !important;
}

.hp-sl-tld {
    color: var(--accent-color) !important;
}

/* FORCE PRICE TO STAY ON ONE LINE ($1,000.00 USD) */
.spotlight-tld-row .available.price:not(.w-hidden) {
    display: inline-block !important;
    white-space: nowrap !important;
    font-size: 18px !important;
      font-weight: 600;
    color: var(--primary-dark) !important;
    margin-right: 25px !important;
}

/* BUY NOW BUTTON STYLING */
.hp-btn-spotlight-buy:not(.w-hidden) {
    display: inline-flex !important;
    align-items: center;
    background: #ffffff !important;
    border: 2px solid var(--accent-color) !important;
    color: var(--accent-color) !important;
      font-weight: 600;
    font-size: 14px !important;
    border-radius: 50px !important;
    padding: 8px 24px !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
}

.hp-btn-spotlight-buy:hover {
    background: var(--accent-color) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(10, 127, 38, 0.25) !important;
}

.spotlight-tld span {
      font-weight: 600;
    ;
}



/* Buy Now Button in List */
.hp-btn-spotlight-buy {
    background: #ffffff !important;
    border: 2px solid var(--accent-color) !important;
    color: var(--accent-color) !important;
      font-weight: 600;
    font-size: 14px !important;
    border-radius: 50px !important;
    padding: 8px 24px !important;
    transition: all 0.3s ease !important;
}

.hp-btn-spotlight-buy:hover {
    background: var(--accent-color) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(10, 127, 38, 0.2) !important;
}


/* ==========================================================================
   HostPapa SaaS Style - Unified Domain Transfer Card (Image Exact Match)
   ========================================================================== */

/* Outer Page Container & Sidebars Removal */
#order-standard_cart {
    font-family: 'Poppins', sans-serif !important;
    padding: 40px 15px 70px 15px !important;
}

#order-standard_cart .cart-sidebar,
#order-standard_cart .header-lined,
#frmDomainTransfer .card-header,
#frmDomainTransfer .panel-heading {
    display: none !important;
}

/* Main Unified White Card */
#order-standard_cart .cart-body {
    width: 100% !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    float: none !important;
    background: var(--bg-white) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: var(--shadow-card) !important;
    padding: 45px 50px !important;
    position: relative !important;
    transition: var(--transition) !important;
}

#order-standard_cart .cart-body:hover {
    box-shadow: var(--shadow-soft) !important;
}

/* Form Container Layout Overrides */
#frmDomainTransfer .row,
#frmDomainTransfer .col-sm-8 {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

#frmDomainTransfer .card,
#frmDomainTransfer .panel {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0 !important;
}

#frmDomainTransfer .card-body,
#frmDomainTransfer .panel-body {
    padding: 0 !important;
    background: transparent !important;
}

/* Header & Subtitle Inside Card */
#order-standard_cart .cart-body .text-center {
    border-bottom: 1px solid var(--border-color) !important;
    padding-bottom: 24px !important;
    margin-bottom: 30px !important;
}

#order-standard_cart .cart-body .text-center h2 {
    font-size: 2.1rem !important;
      font-weight: 600;
    color: var(--primary-dark) !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 8px 0 !important;
}

#order-standard_cart .cart-body .text-center p {
    color: var(--text-muted) !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
}

/* Form Labels & Help Link */
#frmDomainTransfer label {
    font-size: 13px !important;
      font-weight: 600;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--text-dark) !important;
    margin-bottom: 10px !important;
    display: block !important;
}

#frmDomainTransfer label a {
    color: var(--secondary-color) !important;
    font-size: 0.85rem !important;
      font-weight: 600;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
}

#frmDomainTransfer label a:hover {
    color: var(--primary-color) !important;
}

/* Input Fields & Icon Dividers */
#frmDomainTransfer .form-group {
    margin-bottom: 24px !important;
}

#frmDomainTransfer .form-control {
    height: 54px !important;
    border-radius: var(--border-radius-sm) !important;
    border: 1.5px solid var(--border-color) !important;
    padding-left: 62px !important;
    padding-right: 18px !important;
    font-size: 0.95rem !important;
    color: var(--text-dark) !important;
    background-color: var(--bg-white) !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    transition: var(--transition) !important;
}

/* Globe Icon for Domain Input */
#inputTransferDomain {
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E"),
                      linear-gradient(var(--border-color), var(--border-color)) !important; */
    background-size: 20px 20px, 1px 28px !important;
    background-position: 18px center, 50px center !important;
}

/* Key Icon for Auth Code Input */
#inputAuthCode {
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v2h2v-2h2v-2h-8.35zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z'/%3E%3C/svg%3E"),
                      linear-gradient(var(--border-color), var(--border-color)) !important; */
    background-size: 20px 20px, 1px 28px !important;
    background-position: 18px center, 50px center !important;
}

#frmDomainTransfer .form-control:focus {
    border-color: var(--secondary-color) !important;
    box-shadow: 0 0 0 4px var(--primary-soft) !important;
    outline: none !important;
}

#frmDomainTransfer .form-control::placeholder {
    color: #94a3b8 !important;
}

/* Centered High-Conversion CTA Button */
#frmDomainTransfer .card-footer,
#frmDomainTransfer .panel-footer {
    background: transparent !important;
    border: none !important;
    padding: 20px 0 0 0 !important;
    text-align: center !important;
}

#btnTransferDomain,
#frmDomainTransfer .btn-transfer {
    background: var(--accent-color) !important;
    border: none !important;
    color: var(--text-white) !important;
    font-size: 17px !important;
      font-weight: 600;
    min-width: 260px !important;
    height: 52px !important;
    border-radius: var(--border-radius-sm) !important;
    cursor: pointer !important;
    box-shadow: 0 8px 20px rgba(10, 127, 38, 0.28) !important;
    transition: var(--transition) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 auto !important;
}

#btnTransferDomain:hover,
#frmDomainTransfer .btn-transfer:hover {
    background: var(--accent-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 24px rgba(10, 127, 38, 0.38) !important;
}

/* Footer Exclusions Note Below Card */
#order-standard_cart .cart-body p.small {
    position: absolute !important;
    bottom: -55px !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    color: var(--text-muted) !important;
    font-size: 0.85rem !important;
    margin: 0 !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    #order-standard_cart .cart-body {
        padding: 30px 20px !important;
    }
    #btnTransferDomain, 
    #frmDomainTransfer .btn-transfer {
        width: 100% !important;
    }
}


/* UPSELL SIDE DRAWER STYLING */
.hp-drawer-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

.hp-drawer-wrapper.active {
    visibility: visible;
    opacity: 1;
}

.hp-drawer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 42, 99, 0.5);
    backdrop-filter: blur(4px);
}

.hp-drawer-body {
    position: absolute;
    top: 0;
    right: -450px;
    width: 100%;
    max-width: 420px;
    height: 100%;
    background: #ffffff;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden !important; /* <-- Meka aluthen ekathu kara, safe side ekata */
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hp-drawer-wrapper.active .hp-drawer-body {
    right: 0;
}

.hp-drawer-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    color: #64748b;
    cursor: pointer;
}

.hp-drawer-header {
    margin-bottom: 25px;
}

.hp-drawer-header h3 {
    font-size: 22px;
         font-weight: 600;
    color: #0b2a63;
    margin-bottom: 6px;
}

.hp-drawer-header p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

/* CARDS inside Drawer */
.hp-upsell-plans {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-grow: 1;
}

.hp-upsell-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
    position: relative;
    background: #f8fafc;
}

.hp-upsell-card.featured {
    border: 2px solid #0b2a63;
    background: #ffffff;
}

.hp-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #0b2a63;
    color: #fff;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 12px;
    text-transform: uppercase;
         font-weight: 600;
}

.hp-upsell-card h4 {
    margin: 0 0 5px 0;
    font-size: 16px;
    color: #0b2a63;
}

.hp-plan-price {
    font-size: 18px;
         font-weight: 600;
    color: #1e293b;
    margin-bottom: 10px;
}

.hp-plan-price span {
    font-size: 11px;
    color: #64748b;
}

.hp-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    font-size: 12px;
    color: #475569;
}

.hp-plan-features li {
    margin-bottom: 4px;
}

.hp-btn-order {
    display: block;
    text-align: center;
    background: #0b2a63;
    color: #ffffff !important;
    padding: 8px 15px;
    border-radius: 8px;
    text-decoration: none !important;
         font-weight: 600;
    font-size: 13px;
}

.hp-btn-order.primary {
    background: #16a34a;
}

.hp-drawer-footer {
    padding-top: 20px;
    text-align: center;
}

.hp-skip-btn {
    color: #64748b;
    font-size: 13px;
         font-weight: 600;
    text-decoration: none;
}

.hp-skip-btn:hover {
    color: #0b2a63;
    text-decoration: underline;
}


/* =========================================================
   iHoster Premium Domain Config (Custom Theme Match)
========================================================= */

/* Hide Default WHMCS Sidebar layout for this specific page */
#order-standard_cart .cart-sidebar { display: none !important; }
#order-standard_cart .cart-body { width: 100% !important; padding: 0 !important; float: none !important; }

/* Hero Section */
.ih-domain-hero {
    background: var(--primary-dark);
    padding: 60px 20px 120px;
    color: var(--text-white);
    margin: -15px -15px 0 -15px;
    border-radius: 24px !important;
}

.ih-domain-hero h1 {
    font-size: 50px;
         font-weight: 600;
    margin-bottom: 15px;
    color: var(--text-white);
}

.ih-domain-hero .text-accent {
    color: #2dd261 !important;
}

.ih-domain-hero p {
    font-size: 18px;
    opacity: 0.8;
    color: var(--text-white);
}

/* Main Card Overlapping Hero */
.ih-config-container {
    margin-top: -80px;
    position: relative;
    z-index: 10;
    max-width: 950px;
}

.ih-domain-card {
    background: var(--bg-white);
    border-radius: 24px !important;
    box-shadow: var(--shadow-card);
    padding: 40px 60px;
}

/* Custom Tabs */
.ih-domain-tabs {
    display: flex;
    background: var(--bg-blue-soft);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 8px;
    margin-bottom: 35px;
    gap: 10px;
}

.ih-tab-label {
    flex: 1;
    margin: 0;
    cursor: pointer;
}

/* Strictly Hide the WHMCS Checkboxes/Radio */
.ih-tab-label input[type="radio"], 
.ih-tab-label .icheckbox, 
.ih-tab-label .iradio {
    display: none !important;
    opacity: 0 !important;
    position: absolute !important;
}

.ih-tab-btn {
    display: block;
    text-align: center;
    padding: 14px 20px;
         font-weight: 600;
    color: var(--text-muted);
    border-radius: 8px;
    transition: var(--transition);
    font-size: 18px;
}

.ih-tab-label input[type="radio"]:checked ~ .ih-tab-btn {
    background: var(--bg-white);
    color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(11, 42, 99, 0.08);
}

/* Search Bar Container - PREMIUM ALIGNMENT FIX */
.ih-search-bar {
    display: flex;
    align-items: center;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 6px;
    background: var(--bg-white);
    transition: var(--transition);
    height: 65px; /* Fixed height to perfectly align items */
    box-shadow: 0 4px 15px rgba(11, 42, 99, 0.03);
}

.ih-search-bar:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.ih-search-bar .ih-www {
    padding: 0 10px 0 20px;
    color: var(--text-muted);
         font-weight: 600;
    font-size: 17px;
}

.ih-search-bar .ih-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 10px !important;
    font-size: 17px !important;
    color: var(--text-dark) !important;
    font-weight: 500 !important;
    background: transparent !important;
    height: 100% !important;
}

.ih-search-bar .ih-select {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 35px 0 20px !important; /* Extra right padding for custom arrow */
    font-size: 16px !important;
    color: var(--text-dark) !important;
      font-weight: 600;
    background-color: transparent !important;
    border-left: 2px solid var(--border-color) !important;
    border-radius: 0 !important;
    height: 35px !important; /* Slightly shorter for a clean separator look */
    width: auto !important;
    min-width: 110px;
    cursor: pointer;
    
    /* Custom Premium SVG Arrow for Dropdown */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
}

/* For "Use Existing Domain" TLD Text Input */
.ih-search-bar .custom-tld-input {
    max-width: 100px !important;
    min-width: 80px !important;
    background-image: none !important; /* Remove arrow for text input */
    padding-right: 20px !important;
}

.ih-search-bar .ih-btn-check {
    background: var(--accent-color) !important;
    color: var(--bg-white) !important;
    border: none !important;
    padding: 0 35px !important;
    font-size: 16px !important;
      font-weight: 600;
    border-radius: 8px !important;
    cursor: pointer;
    transition: var(--transition) !important;
    height: 100% !important; /* Match container height perfectly */
    display: flex;
    align-items: center;
    justify-content: center;
}

.ih-search-bar .ih-btn-check:hover {
    background: var(--accent-hover) !important;
}

/* Spotlight Cards */
.ih-spotlight-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 20px;
    transition: var(--transition);
}

.ih-spotlight-card:hover {
    border-color: var(--secondary-color);
    box-shadow: var(--shadow-card);
}

/* Continue Button */
.ih-btn-continue {
    background: var(--primary-color);
    color: var(--bg-white);
    border: none;
    padding: 15px 40px;
    font-size: 14px;
         font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition);
    letter-spacing: 0.5px;
}

.ih-btn-continue:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}
.ih-btn-continue:disabled {
    background: var(--border-color);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .ih-domain-tabs {
        flex-direction: column;
        padding: 12px;
    }
    .ih-search-bar {
        flex-direction: column;
        background: transparent;
        border: none;
        padding: 0;
    }
    .ih-search-bar .ih-www { display: none; }
    .ih-search-bar .ih-input, .ih-search-bar .ih-select {
        width: 100%;
        background: var(--bg-white);
        border: 2px solid var(--border-color) !important;
        border-radius: var(--border-radius-sm);
        margin-bottom: 10px;
        max-width: 100%;
    }
    .ih-search-bar .ih-btn-check {
        width: 100%;
        padding: 15px;
    }
}


/* =========================================================
   iHoster Premium Custom Dropdown UI
========================================================= */

/* Custom Select Wrapper */
.ih-custom-select {
    position: relative;
    min-width: 120px;
    height: 100%;
    border-left: 2px solid var(--border-color);
    background: var(--bg-white);
}

/* The visible selected text area */
.ih-select-selected {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 35px 0 20px;
    color: var(--text-dark);
         font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    /* Custom SVG Arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: var(--transition);
}

/* When dropdown is open */
.ih-select-selected.ih-arrow-active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230a7f26' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");
    color: var(--accent-color);
}

/* The dropdown list container */
.ih-select-items {
    position: absolute;
    top: calc(100% + 5px); /* Just below the search bar */
    left: -2px;
    right: 0;
    z-index: 999;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 10px 30px rgba(11, 42, 99, 0.15);
    max-height: 250px;
    overflow-y: auto;
}

/* Individual dropdown options */
.ih-select-option {
    padding: 12px 20px;
    cursor: pointer;
    color: var(--text-dark);
    font-weight: 500;
    font-size: 15px;
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--bg-light);
}

.ih-select-option:last-child {
    border-bottom: none;
}

/* Hover and Selected states - Premium Sliding Effect */
.ih-select-option:hover, 
.ih-selected-active {
    background-color: var(--bg-blue-soft);
    color: var(--primary-color);
         font-weight: 600;
    padding-left: 28px; 
}

/* Utility to hide */
.ih-hide {
    display: none !important;
    opacity: 0;
}

/* Scrollbar styling for the dropdown */
.ih-select-items::-webkit-scrollbar {
    width: 6px;
}
.ih-select-items::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 8px;
}
.ih-select-items::-webkit-scrollbar-thumb {
    background: #c1c1c1; 
    border-radius: 8px;
}
.ih-select-items::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8; 
}


/* =========================================================
   iHoster Custom Brand Matched Upsell Drawer
========================================================= */

/* Drawer Main Fixed Backdrop */
#hpUpsellDrawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 999999 !important;
    display: none;
}

#hpUpsellDrawer.active {
    display: block !important;
}

#hpUpsellDrawer .hp-drawer-overlay {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background: rgba(11, 35, 72, 0.6) !important;
    backdrop-filter: blur(4px) !important;
}

/* Drawer Body Width & Styling */
#hpUpsellDrawer .hp-drawer-body {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 680px !important;
    max-width: 90vw !important;
    background: var(--bg-white) !important;
    z-index: 2 !important;
    overflow-y: auto !important;
    padding: 35px 30px !important;
    box-shadow: -10px 0 35px rgba(11, 42, 99, 0.15) !important;
    box-sizing: border-box !important;
}

/* Close Button */
#hpUpsellDrawer .hp-drawer-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    font-size: 26px !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: var(--transition) !important;
}

#hpUpsellDrawer .hp-drawer-close:hover {
    color: var(--primary-color) !important;
}

/* Header Text */
#hpUpsellDrawer .hp-drawer-header h3 {
    font-size: 24px !important;
      font-weight: 600;
    color: var(--text-dark) !important;
    margin-bottom: 6px !important;
}

#hpUpsellDrawer .hp-drawer-header p {
    font-size: 14px !important;
    color: var(--text-muted) !important;
    margin-bottom: 25px !important;
}

/* Category Tabs (Matches iHoster Blue & Accent Green) */
#hpUpsellDrawer .hp-drawer-tabs {
    display: flex !important;
    flex-wrap: wrap !important; /* Peli dekakata kadenawa */
    justify-content: center !important; /* Tabs tika madata gannawa */
    gap: 15px 20px !important; /* Udatai yatai 15px, depaththata 20px ida */
    border-bottom: 1px solid var(--border-color) !important;
    margin-bottom: 25px !important;
    padding-bottom: 15px !important; 
    overflow-x: hidden !important;
}

#hpUpsellDrawer .hp-tab-btn {
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
      font-weight: 600;
    font-size: 15px !important;
    color: var(--text-muted) !important;
    padding: 10px 18px !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
    margin-bottom: -2px !important;
}


#hpUpsellDrawer .hp-drawer-tabs::-webkit-scrollbar {
    display: none !important;
}


#hpUpsellDrawer .hp-drawer-tabs .hp-tab-btn {
    white-space: nowrap !important; 
    flex: 0 0 auto !important; /* <-- Meken thama ewa addila ketha wenne nathiwa natural size eke inne */
    text-align: center !important;
}


#hpUpsellDrawer .hp-tab-btn:hover {
    color: var(--primary-color) !important;
}

#hpUpsellDrawer .hp-tab-btn.active {
    color: var(--accent-color) !important; /* Green Accent highlight */
    border-bottom-color: var(--accent-color) !important;
    background: transparent !important;
}

/* 2x2 Grid Layout */
#hpUpsellDrawer .hp-upsell-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
}

/* Individual Plan Cards */
#hpUpsellDrawer .hp-upsell-card {
    background: var(--bg-white) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius-sm) !important;
    padding: 22px 18px !important;
    text-align: center !important;
    transition: var(--transition) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: var(--shadow-card) !important;
}

#hpUpsellDrawer .hp-upsell-card:hover {
    border-color: var(--primary-color) !important;
    transform: translateY(-2px) !important;
}

/* Featured Card with Green Accent Border */
#hpUpsellDrawer .hp-upsell-card.featured-red {
    border: 2px solid var(--accent-color) !important;
    background: var(--accent-soft) !important;
}

#hpUpsellDrawer .hp-upsell-card h4 {
    font-size: 18px !important;
      font-weight: 600;
    color: var(--text-dark) !important;
    margin-bottom: 8px !important;
}

#hpUpsellDrawer .hp-plan-price {
    font-size: 22px !important;
      font-weight: 600;
    color: var(--primary-dark) !important;
    margin-bottom: 12px !important;
}

#hpUpsellDrawer .hp-cycle-sub {
    font-size: 11px !important;
    color: var(--text-muted) !important;
      font-weight: 600;
}

#hpUpsellDrawer .hp-plan-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 18px 0 !important;
    text-align: left !important;
    font-size: 13px !important;
    color: var(--text-dark) !important;
}

#hpUpsellDrawer .hp-plan-features li {
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
}

#hpUpsellDrawer .hp-plan-features i {
    color: var(--accent-color) !important;
}

/* Standard Button - Primary Dark */
#hpUpsellDrawer .hp-btn-order {
    display: block !important;
    width: 100% !important;
    background: var(--primary-dark) !important;
    color: var(--text-white) !important;
    padding: 12px !important;
    border-radius: var(--border-radius-sm) !important;
      font-weight: 600;
    text-decoration: none !important;
    font-size: 14px !important;
    border: none !important;
    transition: var(--transition) !important;
    text-align: center !important;
}

#hpUpsellDrawer .hp-btn-order:hover {
    background: var(--primary-color) !important;
}

/* Featured Button - Green Accent */
#hpUpsellDrawer .hp-btn-order.btn-red {
    background: var(--accent-color) !important;
    color: var(--text-white) !important;
}

#hpUpsellDrawer .hp-btn-order.btn-red:hover {
    background: var(--accent-hover) !important;
}

/* Footer Skip Link */
#hpUpsellDrawer .hp-drawer-footer {
    margin-top: 30px !important;
    text-align: center !important;
}

#hpUpsellDrawer .hp-skip-btn {
    color: var(--text-muted) !important;
      font-weight: 600;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: var(--transition) !important;
}

#hpUpsellDrawer .hp-skip-btn:hover {
    color: var(--accent-color) !important;
}

/* Responsive Mobile Fix */
@media (max-width: 600px) {
    #hpUpsellDrawer .hp-drawer-body {
        width: 100% !important;
        padding: 20px !important;
    }
    #hpUpsellDrawer .hp-upsell-grid {
        grid-template-columns: 1fr !important;
    }
}




/* =========================================================
   iHOSTER - STEP 4 BILLING SECTION ONLY
   Reference style: clean card sections / modern checkout UI
   Order summary not touched
========================================================= */

/* =========================================================
   1. STEP 4 WRAPPER
========================================================= */

#step-checkout-details {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

#step-checkout-details > .step-title-container {
    margin-bottom: 8px !important;
}

#step-checkout-details > .step-desc {
    color: #64748b !important;
    font-size: 15px !important;
    margin-bottom: 26px !important;
}

/* injected checkout host */
#onepage-checkout-host,
#onepage-checkout-host #frmCheckout,
#onepage-checkout-host .ihoster-native-checkout-fragment,
#onepage-checkout-host #ihoster-checkout-fragment,
#onepage-checkout-host .cart-body,
#onepage-checkout-host .cart-body.ihoster-full-width {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* hide default native heading/sidebar leftovers */
#onepage-checkout-host .cart-sidebar,
#onepage-checkout-host .header-lined,
#onepage-checkout-host .sidebar-categories-collapsed {
    display: none !important;
}

/* =========================================================
   2. GLOBAL CLEANUP
========================================================= */

#onepage-checkout-host .panel,
#onepage-checkout-host .panel-default,
#onepage-checkout-host .card,
#onepage-checkout-host .card-body,
#onepage-checkout-host .well,
#onepage-checkout-host .alert {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

#onepage-checkout-host hr {
    display: none !important;
}

#onepage-checkout-host .row {
    margin-left: -8px !important;
    margin-right: -8px !important;
}

#onepage-checkout-host .row > [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

#onepage-checkout-host p,
#onepage-checkout-host small,
#onepage-checkout-host .text-muted {
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}

#onepage-checkout-host label {
    color: #0b2a63 !important;
    font-size: 13px !important;
      font-weight: 600;
    margin-bottom: 8px !important;
    display: block !important;
}

/* =========================================================
   3. SECTION CARD LOOK
   (Choose Account / Domain Info / Payment / Notes)
========================================================= */

/* every major block gets a white card look */
#onepage-checkout-host .sub-heading,
#onepage-checkout-host .sub-heading + div,
#onepage-checkout-host .sub-heading + .row,
#onepage-checkout-host .sub-heading + p {
    position: relative !important;
}

/* create section card wrapper feel using margins + backgrounds around content groups */
#onepage-checkout-host .sub-heading {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 0 16px !important;
    border: 0 !important;
    background: transparent !important;
}

#onepage-checkout-host .sub-heading::before,
#onepage-checkout-host .sub-heading::after {
    display: none !important;
    content: none !important;
}

#onepage-checkout-host .sub-heading span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #0b2a63 !important;
    font-size: 16px !important;
      font-weight: 600;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
}

#onepage-checkout-host .sub-heading span::before {
    content: "" !important;
    display: block !important;
    width: 4px !important;
    height: 18px !important;
    flex: 0 0 4px !important;
    border-radius: 20px !important;
    background: #0a7f26 !important;
    box-shadow: none !important;
}
/* card containers for each logical section */
#onepage-checkout-host .sub-heading {
    display: flex !important;
    align-items: center !important;
    margin: 0 0 16px !important;
    padding: 0 0 13px !important;
    border: 0 !important;
    border-bottom: 1px solid #edf1f6 !important;
    background: transparent !important;
}

#onepage-checkout-host .sub-heading:not(:first-of-type) {
    margin-top: 24px !important;
}

/* wrap content under each section visually */
#onepage-checkout-host .sub-heading,
#onepage-checkout-host .account-select-container,
#onepage-checkout-host #containerExistingAccountSelect
#onepage-checkout-host .domain-contact-container,
#onepage-checkout-host #domainRegistrantInputFields,
#onepage-checkout-host #paymentGatewaysContainer,
#onepage-checkout-host .payment-details,
#onepage-checkout-host .cc-input-container,
#onepage-checkout-host textarea,
#onepage-checkout-host #containerNewUserSignup {
    position: relative !important;
}

/* visual section blocks */
#onepage-checkout-host .account-select-container,
#onepage-checkout-host #containerExistingAccountSelect,
#onepage-checkout-host .domain-contact-container,
#onepage-checkout-host #domainRegistrantInformation,
#onepage-checkout-host #paymentGatewaysContainer,
#onepage-checkout-host .payment-details,
#onepage-checkout-host .cc-input-container,
#onepage-checkout-host #containerNewUserSignup {
    background: #ffffff !important;
    border: 1px solid #dbe4f0 !important;
    border-radius: 16px !important;
    padding: 18px !important;
    margin-bottom: 22px !important;
    box-shadow: 0 8px 24px rgba(11, 42, 99, 0.05) !important;
}

/* additional notes area card feel */
#onepage-checkout-host #inputAdditionalNotes,
#onepage-checkout-host textarea[name="notes"] {
    background: #f8fbff !important;
}

/* =========================================================
   4. CHOOSE ACCOUNT
========================================================= */

#onepage-checkout-host .account-select-container,
#onepage-checkout-host #containerExistingAccountSelect {
    padding: 18px !important;
}

#onepage-checkout-host .radio {
    margin: 0 0 12px !important;
    background: transparent !important;
    border: 0 !important;
}

#onepage-checkout-host .radio:last-child {
    margin-bottom: 0 !important;
}

#onepage-checkout-host .radio > label {
    width: 100% !important;
    min-height: 72px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px 16px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 1px solid #d6dfeb !important;
    background: #f9fbfd !important;
    cursor: pointer !important;
    transition: all 0.22s ease !important;
    box-shadow: none !important;
    color: #0b2a63 !important;
}

#onepage-checkout-host .radio > label:hover {
    border-color: #0a7f26 !important;
    background: #fbfefc !important;
}

#onepage-checkout-host .radio:has(input[type="radio"]:checked) > label {
    background: #eef8f0 !important;
    border-color: #0a7f26 !important;
    box-shadow: 0 0 0 2px rgba(10, 127, 38, 0.08) !important;
}

#onepage-checkout-host input[type="radio"],
#onepage-checkout-host input[type="checkbox"] {
    accent-color: #0a7f26 !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: 2px !important;
    flex: 0 0 18px !important;
}

#onepage-checkout-host .radio strong,
#onepage-checkout-host .radio b {
    color: #0b2a63 !important;
    font-size: 15px !important;
      font-weight: 600;
}

#onepage-checkout-host .radio small,
#onepage-checkout-host .radio .text-muted {
    color: #64748b !important;
    font-size: 12px !important;
}

/* =========================================================
   5. FORM FIELDS
========================================================= */

#onepage-checkout-host .form-control,
#onepage-checkout-host select,
#onepage-checkout-host input[type="text"],
#onepage-checkout-host input[type="email"],
#onepage-checkout-host input[type="password"],
#onepage-checkout-host input[type="tel"],
#onepage-checkout-host textarea {
    width: 100% !important;
    height: 46px !important;
    border-radius: 10px !important;
    border: 1px solid #d6dfeb !important;
    background: #f8fbff !important;
    box-shadow: none !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: #1e293b !important;
    transition: all 0.2s ease !important;
}

#onepage-checkout-host textarea {
    min-height: 110px !important;
    height: auto !important;
    resize: vertical !important;
    padding-top: 14px !important;
}

#onepage-checkout-host .form-control:focus,
#onepage-checkout-host select:focus,
#onepage-checkout-host input:focus,
#onepage-checkout-host textarea:focus {
    border-color: #0a7f26 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(10, 127, 38, 0.10) !important;
    outline: none !important;
}

#onepage-checkout-host input::placeholder,
#onepage-checkout-host textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

/* =========================================================
   6. DOMAIN REGISTRANT INFORMATION
========================================================= */

#onepage-checkout-host .domain-contact-container,
#onepage-checkout-host #domainRegistrantInformation {
    padding: 18px 20px !important;
}

#onepage-checkout-host .domain-contact-container p,
#onepage-checkout-host #domainRegistrantInformation p {
    margin: 0 0 14px !important;
    color: #64748b !important;
    font-size: 12px !important;
}

#onepage-checkout-host .btn-default,
#onepage-checkout-host .btn-secondary {
    background: #ffffff !important;
    border: 1px solid #d6dfeb !important;
    color: #0b2a63 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
      font-weight: 600;
    box-shadow: none !important;
}

#onepage-checkout-host .btn-default:hover,
#onepage-checkout-host .btn-secondary:hover {
    border-color: #0a7f26 !important;
    color: #0a7f26 !important;
    background: #f6fcf7 !important;
}

/* =========================================================
   7. PAYMENT METHOD SECTION
========================================================= */

#onepage-checkout-host #paymentGatewaysContainer,
#onepage-checkout-host .payment-methods {
      display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 18px !important;
}

#onepage-checkout-host #paymentGatewaysContainer label,
#onepage-checkout-host .payment-methods label,
#onepage-checkout-host label.radio-inline {
    min-height: 74px !important;
    border-radius: 12px !important;
    border: 1px solid #d6dfeb !important;
    background: #f9fbfd !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
    padding: 12px !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: all 0.22s ease !important;
    font-size: 14px !important;
      font-weight: 600;
    color: #0b2a63 !important;
}

#onepage-checkout-host #paymentGatewaysContainer label:hover,
#onepage-checkout-host .payment-methods label:hover,
#onepage-checkout-host label.radio-inline:hover {
    border-color: #0a7f26 !important;
    background: #fbfefc !important;
}

#onepage-checkout-host #paymentGatewaysContainer label:has(input:checked),
#onepage-checkout-host .payment-methods label:has(input:checked),
#onepage-checkout-host label.radio-inline:has(input:checked) {
    background: #eef8f0 !important;
    border-color: #0a7f26 !important;
    box-shadow: 0 0 0 2px rgba(10, 127, 38, 0.08) !important;
}

#onepage-checkout-host #paymentGatewaysContainer img,
#onepage-checkout-host .payment-methods img {
    max-height: 22px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* credit card fields wrapper */
#onepage-checkout-host .payment-details,
#onepage-checkout-host .cc-input-container {
    background: #ffffff !important;
    border: 1px solid #dbe4f0 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(11, 42, 99, 0.05) !important;
    padding: 20px !important;
}

/* =========================================================
   8. HIDE LEFT DUPLICATE TOTAL BANNER
   (reference image eka wage cleaner look ekata)
========================================================= */

#onepage-checkout-host .total-due-today,
#onepage-checkout-host div[class*="total-due"],
#onepage-checkout-host .alert-success,
#onepage-checkout-host .bg-success-light {
    display: none !important;
}

/* =========================================================
   9. ADDITIONAL NOTES
========================================================= */

#onepage-checkout-host #inputAdditionalNotes,
#onepage-checkout-host textarea[name="notes"] {
    border-radius: 12px !important;
    min-height: 110px !important;
}

/* =========================================================
   10. COMPLETE ORDER BUTTON
========================================================= */

#onepage-checkout-host #btnCompleteOrder,
#onepage-checkout-host .btn-checkout,
#onepage-checkout-host button[type="submit"] {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 12px !important;
    border: 0 !important;
    background: linear-gradient(135deg, #0a8a2a 0%, #087523 100%) !important;
    color: #ffffff !important;
    font-size: 15px !important;
      font-weight: 600;
    text-align: center !important;
    box-shadow: 0 10px 24px rgba(10, 127, 38, 0.22) !important;
    transition: all 0.22s ease !important;
    margin-top: 18px !important;
}

#onepage-checkout-host #btnCompleteOrder:hover,
#onepage-checkout-host .btn-checkout:hover,
#onepage-checkout-host button[type="submit"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 28px rgba(10, 127, 38, 0.28) !important;
    background: linear-gradient(135deg, #087a24 0%, #06681d 100%) !important;
}

/* =========================================================
   11. SECURITY MESSAGE
========================================================= */

#onepage-checkout-host .checkout-security-msg,
#onepage-checkout-host .panel-footer {
    margin-top: 12px !important;
    background: transparent !important;
    border: 0 !important;
    color: #64748b !important;
    font-size: 12px !important;
    text-align: center !important;
    padding: 0 !important;
}

/* =========================================================
   12. ALERTS
========================================================= */

#onepage-checkout-host .alert-danger {
    background: #fff7f7 !important;
    border: 1px solid #fecaca !important;
    border-left: 4px solid #dc2626 !important;
    border-radius: 10px !important;
    color: #991b1b !important;
    padding: 12px 14px !important;
}

#onepage-checkout-host .alert-warning {
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    border-left: 4px solid #f59e0b !important;
    border-radius: 10px !important;
    color: #92400e !important;
    padding: 12px 14px !important;
}

/* =========================================================
   13. MOBILE
========================================================= */

@media (max-width: 991px) {
    #onepage-checkout-host #paymentGatewaysContainer,
    #onepage-checkout-host .payment-methods {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 575px) {
    #onepage-checkout-host .account-select-container,
    #onepage-checkout-host #containerExistingAccountSelect,
    #onepage-checkout-host .domain-contact-container,
    #onepage-checkout-host #domainRegistrantInformation,
    #onepage-checkout-host .payment-details,
    #onepage-checkout-host .cc-input-container,
    #onepage-checkout-host #containerNewUserSignup {
        padding: 16px !important;
        border-radius: 16px !important;
    }

    #onepage-checkout-host .radio > label {
        min-height: 64px !important;
        padding: 14px !important;
    }

    #onepage-checkout-host .sub-heading span {
        font-size: 15px !important;
    }
}


#onepage-checkout-host textarea,
#onepage-checkout-host #inputAdditionalNotes,
#onepage-checkout-host textarea[name="notes"] {
    display: block !important;
    position: static !important;
    float: none !important;
    clear: none !important;

    width: 100% !important;
    min-height: 105px !important;
    height: 105px !important;

    padding: 14px 16px !important;
    margin: 0 !important;

    background: #f8fbff !important;
    border: 1px solid #d6dfeb !important;
    border-radius: 10px !important;

    overflow: auto !important;
}














/* =========================================================
   iHOSTER PREMIUM BILLING
   STEP 4 ONLY
   ORDER SUMMARY / STEPS 1-3 NOT TOUCHED
========================================================= */


/* =========================================================
   MAIN STEP 4
========================================================= */

#step-checkout-details.ihoster-step4-premium {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
    overflow: visible !important;
}


/* =========================================================
   MAIN TITLE
========================================================= */

#step-checkout-details .ih-step4-main-header {
    margin-bottom: 26px;
}

#step-checkout-details .ih-step4-main-header .step-title-container {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

#step-checkout-details .ih-step4-title-copy {
    flex: 1 1 auto;
    min-width: 0;
}

#step-checkout-details .ih-step4-title-copy .step-title {
    margin: 0 0 7px !important;
}

#step-checkout-details .ih-step4-title-copy .step-desc {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}


/* =========================================================
   NATIVE WHMCS RESET
========================================================= */

#onepage-checkout-host,
#onepage-checkout-host #ihoster-checkout-fragment,
#onepage-checkout-host .ihoster-native-checkout-fragment,
#onepage-checkout-host #order-standard_cart,
#onepage-checkout-host .cart-body,
#onepage-checkout-host #frmCheckout {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;
}


#onepage-checkout-host .cart-sidebar,
#onepage-checkout-host .header-lined,
#onepage-checkout-host .sidebar-categories-collapsed {
    display: none !important;
}


/* kill old WHMCS card appearance */

#onepage-checkout-host .panel,
#onepage-checkout-host .panel-default,
#onepage-checkout-host .well {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* =========================================================
   SECTION CARD
========================================================= */

#onepage-checkout-host .ih-billing-section {
    background: #ffffff !important;

    border: 1px solid #dbe4f0 !important;
    border-radius: 17px !important;

    padding: 22px !important;

    margin: 0 0 20px !important;

    box-shadow:
        0 10px 28px rgba(11, 42, 99, 0.055) !important;

    overflow: visible !important;
}


/* =========================================================
   SECTION HEADER
========================================================= */

#onepage-checkout-host .ih-billing-section-title {
    display: flex !important;
    align-items: center !important;

    gap: 9px !important;

    margin: 0 0 17px !important;
    padding: 0 0 14px !important;

    border-bottom: 1px solid #edf2f7 !important;

    color: #0b2a63 !important;

    font-size: 16px !important;
      font-weight: 600;

    line-height: 1.3 !important;
}


#onepage-checkout-host .ih-billing-section-title i {
    color: #0a7f26 !important;

    width: 17px !important;

    text-align: center !important;

    font-size: 14px !important;
}


/* Hide native duplicated WHMCS heading */

#onepage-checkout-host .ih-billing-section > .sub-heading {
    display: none !important;
}


/* =========================================================
   GENERAL TYPOGRAPHY
========================================================= */

#onepage-checkout-host label {
    display: block !important;

    margin: 0 0 7px !important;

    color: #0b2a63 !important;

    font-size: 12px !important;
      font-weight: 600;

    line-height: 1.4 !important;
}


#onepage-checkout-host p,
#onepage-checkout-host small,
#onepage-checkout-host .text-muted {
    position: static !important;

    clear: none !important;
    float: none !important;

    margin-top: 0 !important;

    color: #64748b !important;

    line-height: 1.55 !important;
}


/* =========================================================
   FORM SPACING
========================================================= */

#onepage-checkout-host .form-group {
    margin-bottom: 15px !important;
}

#onepage-checkout-host .row {
    margin-left: -6px !important;
    margin-right: -6px !important;
}

#onepage-checkout-host .row > [class*="col-"] {
    padding-left: 6px !important;
    padding-right: 6px !important;
}


/* =========================================================
   INPUTS
========================================================= */

#onepage-checkout-host .form-control,
#onepage-checkout-host select,
#onepage-checkout-host input[type="text"],
#onepage-checkout-host input[type="email"],
#onepage-checkout-host input[type="password"],
#onepage-checkout-host input[type="tel"],
#onepage-checkout-host textarea {
    width: 100% !important;

    height: 46px !important;

    margin: 0 !important;

    padding: 10px 13px !important;

    background: #f8fbff !important;

    border: 1px solid #d5dfeb !important;
    border-radius: 9px !important;

    color: #1e293b !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    box-shadow: none !important;

    outline: none !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease !important;
}


#onepage-checkout-host textarea {
    display: block !important;

    min-height: 100px !important;
    height: 100px !important;

    padding: 13px 14px !important;

    resize: vertical !important;

    overflow: auto !important;
}


#onepage-checkout-host input::placeholder,
#onepage-checkout-host textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}


#onepage-checkout-host .form-control:focus,
#onepage-checkout-host input:focus,
#onepage-checkout-host select:focus,
#onepage-checkout-host textarea:focus {
    background: #ffffff !important;

    border-color: #0a7f26 !important;

    box-shadow:
        0 0 0 3px rgba(10, 127, 38, .09) !important;

    outline: none !important;
}


/* =========================================================
   ACCOUNT SELECTION
========================================================= */

#onepage-checkout-host .ih-account-options {
    display: flex !important;
    flex-direction: column !important;

    gap: 10px !important;
}


#onepage-checkout-host .ih-account-options .radio {
    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
}


#onepage-checkout-host .ih-account-options .radio > label {
    position: relative !important;

    display: flex !important;
    align-items: flex-start !important;

    width: 100% !important;
    min-height: 68px !important;

    gap: 10px !important;

    margin: 0 !important;
    padding: 14px 15px !important;

    background: #ffffff !important;

    border: 1px solid #d5dfeb !important;
    border-radius: 9px !important;

    color: #0b2a63 !important;

    cursor: pointer !important;

    box-shadow: none !important;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease !important;
}


#onepage-checkout-host .ih-account-options .radio > label:hover {
    border-color: rgba(10, 127, 38, .55) !important;

    background: #fbfefc !important;
}


#onepage-checkout-host
.ih-account-options
.radio:has(input[type="radio"]:checked)
> label {
    background: #eef8f0 !important;

    border-color: #0a7f26 !important;

    box-shadow:
        0 0 0 1px rgba(10, 127, 38, .08) !important;
}


#onepage-checkout-host input[type="radio"],
#onepage-checkout-host input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;

    margin-top: 2px !important;

    accent-color: #0a7f26 !important;
}


/* =========================================================
   PAYMENT GATEWAYS
========================================================= */

#onepage-checkout-host .ih-payment-gateways {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 10px !important;

    margin: 0 0 18px !important;
}


#onepage-checkout-host .ih-payment-gateways .radio-inline,
#onepage-checkout-host .ih-payment-gateways label {
    min-height: 70px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    padding: 10px !important;
    margin: 0 !important;

    background: #ffffff !important;

    border: 1px solid #d5dfeb !important;
    border-radius: 9px !important;

    color: #0b2a63 !important;

    text-align: center !important;

    font-size: 12px !important;
      font-weight: 600;

    cursor: pointer !important;

    transition:
        border-color .2s ease,
        background .2s ease !important;
}


#onepage-checkout-host .ih-payment-gateways label:hover {
    border-color: #0a7f26 !important;
}


#onepage-checkout-host
.ih-payment-gateways
label:has(input[type="radio"]:checked) {
    background: #eef8f0 !important;

    border-color: #0a7f26 !important;
}


/* =========================================================
   REMOVE NATIVE TOTAL INSIDE LEFT BILLING COLUMN
========================================================= */

#onepage-checkout-host .total-due-today,
#onepage-checkout-host .bg-success-light,
#onepage-checkout-host .alert-success {
    display: none !important;
}


/* =========================================================
   COMPLETE ORDER
========================================================= */

#onepage-checkout-host #btnCompleteOrder,
#onepage-checkout-host .btn-checkout,
#onepage-checkout-host button[type="submit"] {
    width: 100% !important;

    min-height: 49px !important;

    margin: 2px 0 0 !important;

    padding: 12px 22px !important;

    background:
        linear-gradient(
            135deg,
            #0a8a2a 0%,
            #087523 100%
        ) !important;

    border: 0 !important;
    border-radius: 9px !important;

    color: #ffffff !important;

    font-size: 14px !important;
      font-weight: 600;

    box-shadow:
        0 8px 18px rgba(10, 127, 38, .20) !important;

    transition: all .2s ease !important;
}


#onepage-checkout-host #btnCompleteOrder:hover,
#onepage-checkout-host button[type="submit"]:hover {
    transform: translateY(-1px) !important;

    background:
        linear-gradient(
            135deg,
            #087a24 0%,
            #06671d 100%
        ) !important;

    box-shadow:
        0 11px 24px rgba(10, 127, 38, .27) !important;
}


/* =========================================================
   SECURITY MESSAGE
========================================================= */

#onepage-checkout-host .checkout-security-msg {
    margin: 14px 0 0 !important;

    padding: 12px 14px !important;

    background: #fffaf0 !important;

    border: 1px dashed #f1c76a !important;
    border-radius: 9px !important;

    color: #8a6500 !important;

    text-align: center !important;

    font-size: 11px !important;

    box-shadow: none !important;
}


#onepage-checkout-host .checkout-security-msg i {
    position: static !important;

    float: none !important;

    margin-right: 6px !important;

    color: #d99100 !important;

    font-size: 13px !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    #onepage-checkout-host .ih-payment-gateways {
        grid-template-columns:
            1fr !important;
    }

}


@media (max-width: 575px) {

    #onepage-checkout-host .ih-billing-section {
        padding: 17px !important;

        border-radius: 14px !important;
    }

    #onepage-checkout-host .ih-account-options .radio > label {
        padding: 13px !important;
    }

}


/* 4-Column Responsive Layout for Homepage Services */
.ih-services-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}

@media (max-width: 992px) {
    .ih-services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    .ih-services-grid {
        grid-template-columns: 1fr !important;
    }
}



/* =========================================================
   Homepage 4-Card Extra Large (XL) Premium Spacing & Sizing
========================================================= */


.ih-services-section .ih-container {
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 0 25px !important;
}

/* 2. Grid Layout Spacing */
.ih-services-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px !important;
    margin-top: 40px !important;
}

/* 3. Extra Large Card Box */
.ih-service-card {
    background: #ffffff !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    border-radius: 24px !important;
    padding: 50px 28px 45px 28px !important; /* Large Padding */
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 400px !important; 
    box-shadow: 0 12px 35px rgba(11, 42, 99, 0.06) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ih-service-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 25px 50px rgba(11, 42, 99, 0.14) !important;
    border-color: var(--primary-color, #0b2a63) !important;
}

/* 4. Extra Large Icon Styling */
.ih-card-icon {
    margin-bottom: 25px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.ih-card-icon img {
    width: 150px !important;
    height: 150px !important;
    object-fit: contain !important;
}

/* 5. Typography Scaled Up */
.ih-service-card h3 {
    font-size: 24px !important; /* Larger Heading */
      font-weight: 600;
    color: var(--primary-dark, #0b2a63) !important;
    margin-bottom: 14px !important;
}

.ih-service-card p {
    font-size: 15px !important; /* Larger Text */
    color: var(--text-muted, #64748b) !important;
    line-height: 1.65 !important;
    margin-bottom: 30px !important;
    flex-grow: 1 !important;
}

/* 6. Bold Prominent Buttons */
.ih-card-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 14px 24px !important;
    border: 1.5px solid var(--border-color, #cbd5e1) !important;
    border-radius: 50px !important;
    font-size: 15px !important;
      font-weight: 600;
    color: var(--primary-dark, #0b2a63) !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    background: #ffffff !important;
}

.ih-card-link:hover {
    background: var(--primary-dark, #0b2a63) !important;
    color: #ffffff !important;
    border-color: var(--primary-dark, #0b2a63) !important;
}

/* Featured Green Card Hover Fix */
.ih-service-card.ih-card-featured .ih-card-link.ih-text-green {
    border-color: var(--accent-color, #0a7f26) !important;
    color: var(--accent-color, #0a7f26) !important;
}

.ih-service-card.ih-card-featured .ih-card-link.ih-text-green:hover {
    background: var(--accent-color, #0a7f26) !important;
    color: #ffffff !important;
}

/* Responsive Fixes */
@media (max-width: 1280px) {
    .ih-services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .ih-services-grid {
        grid-template-columns: 1fr !important;
    }
}




/* =========================================================
   Dedicated Server Configuration Step UI (Explicit Palette)
========================================================= */

#step-server-config {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 32px !important;
    box-shadow: 0 10px 30px rgba(11, 42, 99, 0.05) !important;
}

.server-config-label {
    font-size: 14px !important;
      font-weight: 600;
    color: #0b2a63 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.server-config-select {
    background-color: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
      font-weight: 600;
    color: #0b2a63 !important;
    height: 48px !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: none !important;
}

.server-config-select:focus {
    border-color: #0a7f26 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(10, 127, 38, 0.15) !important;
    outline: none !important;
}

.server-config-badge {
    background: #f0fdf4 !important;
    border: 1.5px solid #bbf7d0 !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    color: #0a7f26 !important;
      font-weight: 600;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
}


/* =========================================================
   DEDICATED SERVER CONFIGURATION STYLES
========================================================= */

.ih-config-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin-bottom: 25px;
}
.ih-config-divider::before,
.ih-config-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e2e8f0;
}
.ih-config-divider span {
    padding: 6px 16px;
    background-color: #f1f5f9; 
    color: #0b2a63; 
    font-size: 15px;
    font-weight: 500;
    border-radius: 4px;
    margin: 0 15px; 
}

.ih-config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 20px;
    padding: 0 10px;
}

@media (max-width: 768px) {
    .ih-config-grid { 
        grid-template-columns: 1fr; 
    }
}

.ih-config-label {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 8px;
    display: block;
    font-weight: 500;
}

.ih-select-wrapper {
    position: relative;
}

.ih-config-dropdown {
    width: 100%;
    border: 1px solid #cbd5e1;
    background-color: #ffffff;
    padding: 12px 35px 12px 15px;
    border-radius: 6px;
    font-size: 14px;
    color: #334155;
    font-weight: 500;
    min-height: 46px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ih-config-dropdown:focus {
    border-color: #0b2a63;
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 42, 99, 0.1);
}

.ih-select-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    font-size: 14px;
}


/* =========================================
   iHoster Premium Nameservers UI
   ========================================= */
.ih-nameservers-box {
    background: #f8fafc;
   
    border-radius: 12px;
    padding: 30px 35px;
    transition: all 0.3s ease;
}
.ih-nameservers-box:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
}
.ih-ns-header {
    margin-bottom: 25px;
}
.ih-ns-header h3 {
    color: #0b2a63;
         font-weight: 600;
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}
.ih-ns-header h3 i {
    color: #10b981; /* Accent Green */
    font-size: 20px;
}
.ih-ns-header p {
    color: #64748b;
    font-size: 16px;
    margin: 0;
    line-height: 1.6;
}
.ih-ns-label {
    font-size: 14px;
         font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.ih-ns-input {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    font-size: 16px !important;
      font-weight: 600;
    color: #0f172a !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    transition: all 0.3s ease !important;
}
.ih-ns-input:focus {
    border-color: #0b2a63 !important;
    box-shadow: 0 0 0 4px rgba(11, 42, 99, 0.1) !important;
    outline: none !important;
}
.ih-ns-input::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}



/* =========================================
   DASHBOARD PANELS PERFECT GRID & ALIGNMENT
   ========================================= */


.ih-dashboard-content-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
    margin-top: 30px !important;
}

@media (max-width: 991px) {
    .ih-dashboard-content-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 2. Panel Box Frame */
.ih-dashboard-panel {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    border-radius: 16px !important;
    border: 1px solid #e7edf6 !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

/* 3. YOUR ORIGINAL HEADER (EXACT ORIGINAL STYLES PRESERVED) */
.ih-panel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    min-height: 82px !important;
    padding: 18px 22px !important;
    border-bottom: 1px solid #e7edf6 !important;
    background: linear-gradient(180deg, #fff, #fcfdff) !important;
}

/* 4. Panel Content Area Padding & Alignment */
.ih-panel-body {
    flex: 1 !important;
    padding: 20px 22px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 5. Dynamic List Items Clean Spacing */
.ih-panel-body .ih-dynamic-list,
.ih-panel-body .list-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ih-panel-body .ih-dynamic-list-item,
.ih-panel-body .list-group-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    background: #fcfdff !important;
    border: 1px solid #e7edf6 !important;
    border-radius: 10px !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
}

.ih-panel-body .ih-dynamic-list-item:hover,
.ih-panel-body .list-group-item:hover {
    border-color: var(--accent-color, #10b981) !important;
    background: #ffffff !important;
}


.logo-scrolled {
        display: none; /* Hide light logo initially */
    }

    /* Scrolled State (White Background) */
    .site-header.scrolled .logo-default {
        display: none !important; /* Hide dark logo when scrolled */
    }
    
    .site-header.scrolled .logo-scrolled {
        display: block !important; /* Show light logo when scrolled */
    }


    .navbar {
    padding: 0px 0 !important;
}


/* Prevent drawer sections from collapsing when product features are long */
.hp-drawer-header,
.hp-drawer-tabs,
.hp-drawer-content,
.hp-drawer-footer {
    flex-shrink: 0;
}

.hp-drawer-tabs {
    min-height: 42px;
}

.hp-drawer-tabs {
    flex-shrink: 0;
    min-height: 42px;
    width: 100%;
}


/* =========================================================
   DOMAIN-ONLY ITEM WITH CUSTOM NAMESERVERS
   Domain info left + Price right + Nameservers full width
========================================================= */

.onepage-review-item:has(.ih-nameservers-box) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 30px;
    row-gap: 4px;
    align-items: start;
}

/* Allow info children to participate in parent grid */
.onepage-review-item:has(.ih-nameservers-box) .onepage-review-info {
    display: contents;
}

/* Domain label */
.onepage-review-item:has(.ih-nameservers-box) .onepage-review-label {
    grid-column: 1;
    grid-row: 1;
}

/* Domain name */
.onepage-review-item:has(.ih-nameservers-box) .onepage-review-name {
    grid-column: 1;
    grid-row: 2;
}

/* Registration period */
.onepage-review-item:has(.ih-nameservers-box) .onepage-review-meta {
    grid-column: 1;
    grid-row: 3;
}

/* Price + period + remove stays on top-right */
.onepage-review-item:has(.ih-nameservers-box) .onepage-review-price {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: start;
    text-align: right;
    min-width: 140px;
}

/* Nameserver box goes full width BELOW domain + price */
.onepage-review-item:has(.ih-nameservers-box) .ih-nameservers-box {
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 20px !important;
}

/* Keep nameserver row full width */
.onepage-review-item:has(.ih-nameservers-box) .ih-nameservers-box .row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}



/* =========================================================
   iHOSTER FINAL RESPONSIVE SAFETY LAYER
   Mobile / Tablet / Small Laptop
   Desktop design is NOT changed
========================================================= */

/* ---------------------------------------------------------
   1. TABLET + MOBILE GLOBAL OVERFLOW PROTECTION
--------------------------------------------------------- */
@media (max-width: 1199.98px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body * {
        box-sizing: border-box;
    }

    img,
    svg,
    video,
    iframe {
        max-width: 100%;
        height: auto;
    }

    #main-body,
    #main-body > .container,
    #main-body > .container-fluid,
    .primary-content {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .row {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .site-header .container,
    .site-header .container-fluid,
    .custom-dark-header .container,
    .custom-dark-header .container-fluid,
    .site-header .navbar,
    .custom-dark-header .navbar {
        width: 100% !important;
        max-width: 100% !important;
    }

  
    .navbar-toggler {
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }


    /* -----------------------------------------------------
       BREADCRUMB
    ----------------------------------------------------- */

    .master-breadcrumb {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .custom-premium-breadcrumb {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;

        flex-wrap: nowrap !important;
        white-space: nowrap !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none;
    }

    .custom-premium-breadcrumb::-webkit-scrollbar {
        display: none;
    }


    /* -----------------------------------------------------
       PREMIUM SUB NAV
    ----------------------------------------------------- */

    .custom-premium-nav {
        width: 100% !important;
        max-width: 100% !important;

        flex-wrap: nowrap !important;
        white-space: nowrap !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none;
    }

    .custom-premium-nav::-webkit-scrollbar {
        display: none;
    }

    .custom-premium-nav > li {
        flex: 0 0 auto !important;
    }


    /* -----------------------------------------------------
       ALL IMPORTANT WHMCS TABLE WRAPPERS
       TABLE = HORIZONTAL SCROLL, NOT SQUISHED
    ----------------------------------------------------- */

    .services-list-panel .table-container,
    .services-list-panel .dataTables_wrapper,
    .am-table-card .dataTables_wrapper,
    .table-responsive,
    .custom-table-wrapper,
    .dataTables_scroll,
    .dataTables_scrollBody {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin;
    }

    /* Services / Domains / Tickets / Invoice / User Management */
    .services-premium-table,
    .am-custom-table,
    .custom-data-table,
    #tableDomainsList,
    #tableTicketsList,
    #tableInvoicesList,
    #tableServicesList {
        width: 100% !important;
        min-width: 850px !important;
        max-width: none !important;

        table-layout: auto !important;
    }

    .services-premium-table th,
    .services-premium-table td,
    .am-custom-table th,
    .am-custom-table td,
    .custom-data-table th,
    .custom-data-table td,
    #tableDomainsList th,
    #tableDomainsList td,
    #tableTicketsList th,
    #tableTicketsList td,
    #tableInvoicesList th,
    #tableInvoicesList td,
    #tableServicesList th,
    #tableServicesList td {
        white-space: nowrap !important;
    }


    /* -----------------------------------------------------
       USER MANAGEMENT TABLE
    ----------------------------------------------------- */

    .am-table-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .am-table-card .dataTables_wrapper {
        max-width: 100% !important;
    }


    /* -----------------------------------------------------
       HERO / DASHBOARD LARGE ELEMENT PROTECTION
    ----------------------------------------------------- */

    .ih-client-dashboard,
    .ih-dashboard-hero,
    .ih-domain-search-card,
    .ih-stats-grid,
    .ih-dashboard-content-grid,
    .premium-hero-header,
    .services-toolbar,
    .services-list-panel {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .hero-content-left,
    .ih-hero-content,
    .ih-panel-body,
    .ih-panel-header {
        min-width: 0 !important;
    }


    /* -----------------------------------------------------
       DOMAIN SEARCH RESULTS PAGE
    ----------------------------------------------------- */

    #hostpapa-domain-wrapper,
    .hp-inner-container,
    .hp-domain-hero,
    .hp-featured-domain-card,
    .hp-suggestions-wrapper,
    .hp-promo-cards-section,
    .hp-tld-pricing-section,
    .hp-spotlight-list-wrapper,
    .hp-spotlight-list-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    /* Pricing table-like rows */
    .hp-tld-table-card {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}


/* =========================================================
   2. TABLET
   992px AND BELOW
========================================================= */

@media (max-width: 991.98px) {

    /* -----------------------------------------------------
       HEADER MOBILE MENU
    ----------------------------------------------------- */

    .site-header .navbar-collapse,
    .custom-dark-header .navbar-collapse {
        width: 100% !important;
        max-width: 100% !important;

        max-height: calc(100vh - 90px) !important;
        max-height: calc(100dvh - 90px) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch !important;
    }

    .site-header .navbar-collapse .navbar-nav,
    .custom-dark-header .navbar-collapse .navbar-nav {
        width: 100% !important;
    }

    .site-header .navbar-collapse .dropdown-menu,
    .custom-dark-header .navbar-collapse .dropdown-menu {
        position: static !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 5px 0 0 !important;

        transform: none !important;
        inset: auto !important;

        box-shadow: none !important;
    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .premium-hero-header {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-content-left {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* -----------------------------------------------------
       TOOLBARS
    ----------------------------------------------------- */

    .services-toolbar,
    .domain-bulk-actions {
        width: 100% !important;
        max-width: 100% !important;
    }

    .services-filters {
        min-width: 0 !important;
        max-width: 100% !important;

        overflow-x: auto !important;
        flex-wrap: nowrap !important;

        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none;
    }

    .services-filters::-webkit-scrollbar {
        display: none;
    }

    .services-filters > * {
        flex: 0 0 auto !important;
    }


    /* -----------------------------------------------------
       DASHBOARD
    ----------------------------------------------------- */

    .ih-dashboard-content-grid {
        grid-template-columns: 1fr !important;
    }

    .ih-dashboard-panel {
        min-width: 0 !important;
    }


    /* -----------------------------------------------------
       REGISTER / LOGIN MODALS
       Fixes iPad + small device overflow
    ----------------------------------------------------- */

    .glass-modal .modal-dialog,
    #glassRegisterModal .modal-dialog {
        width: calc(100% - 30px) !important;
        max-width: 850px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .glass-modal-content {
        width: 100% !important;
        max-width: 100% !important;

        max-height: calc(100vh - 30px) !important;
        max-height: calc(100dvh - 30px) !important;

        overflow: hidden !important;
    }

    .glass-modal-content .modal-body,
    #glassRegisterModal .modal-body {
        width: 100% !important;
        max-width: 100% !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch !important;
    }

    .glass-modal .row {
        max-width: 100% !important;
    }

    .glass-modal [class*="col-"] {
        min-width: 0 !important;
    }

    .glass-modal input,
    .glass-modal select,
    .glass-modal textarea,
    .glass-modal .iti,
    .glass-modal .glass-input-group {
        max-width: 100% !important;
        min-width: 0 !important;
    }


    /* -----------------------------------------------------
       DOMAIN SEARCH PAGE
    ----------------------------------------------------- */

    .hp-search-box-container {
        width: calc(100% - 30px) !important;
        max-width: 780px !important;
    }

    .hp-featured-domain-card {
        width: calc(100% - 30px) !important;
    }

    .hp-suggestions-wrapper,
    .hp-promo-cards-section,
    .hp-tld-pricing-section,
    .hp-spotlight-list-wrapper {
        width: calc(100% - 30px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* =========================================================
   3. MOBILE
   767px AND BELOW
========================================================= */

@media (max-width: 767.98px) {

    /* -----------------------------------------------------
       PAGE SAFE PADDING
    ----------------------------------------------------- */

    #main-body > .container,
    #main-body > .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body:has(.ih-client-dashboard) #main-body > .container,
    body:has(.ih-client-dashboard) #main-body > .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .site-header .container,
    .site-header .container-fluid,
    .custom-dark-header .container,
    .custom-dark-header .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

   

    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .premium-hero-header {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .premium-hero-header h1,
    .ih-hero-title,
    .hp-hero-title {
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }


    /* -----------------------------------------------------
       TABLES
    ----------------------------------------------------- */

    .services-premium-table,
    .am-custom-table,
    .custom-data-table,
    #tableDomainsList,
    #tableTicketsList,
    #tableInvoicesList,
    #tableServicesList {
        min-width: 760px !important;
    }

    .services-list-panel .table-container,
    .am-table-card .dataTables_wrapper,
    .table-responsive,
    .custom-table-wrapper {
        scrollbar-width: auto;
    }


    /* -----------------------------------------------------
       TOOLBAR
    ----------------------------------------------------- */

    .services-toolbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 12px !important;

        width: 100% !important;
    }

    .services-search-group,
    .services-search {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .services-filters {
        width: 100% !important;
    }


    /* -----------------------------------------------------
       MOBILE REGISTER / LOGIN MODAL
    ----------------------------------------------------- */

    .glass-modal .modal-dialog,
    #glassRegisterModal .modal-dialog {
        width: calc(100% - 20px) !important;
        margin: 10px auto !important;
    }

    .glass-modal-content .modal-body,
    #glassRegisterModal .modal-body {
        padding: 28px 20px !important;
    }

    .glass-modal-title {
        font-size: clamp(26px, 8vw, 34px) !important;
        line-height: 1.15 !important;
    }

    .glass-modal-subtitle {
        font-size: 15px !important;
    }

    .glass-btn-close {
        top: 12px !important;
        right: 12px !important;
    }


    /* -----------------------------------------------------
       DOMAIN SEARCH HERO SEARCH BOX
    ----------------------------------------------------- */

    .hp-domain-hero {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .hp-search-box-container {
        width: calc(100% - 20px) !important;
    }

    .hp-search-group {
        width: 100% !important;
        max-width: 100% !important;

        padding: 6px !important;

        flex-wrap: wrap !important;

        border-radius: 18px !important;
    }

    .hp-search-icon {
        display: none !important;
    }

    .hp-search-input {
        flex: 1 1 100% !important;

        width: 100% !important;
        min-width: 0 !important;

        padding: 12px 14px !important;
    }

    .hp-btn-search {
        width: 100% !important;

        margin-top: 6px !important;

        border-radius: 12px !important;
    }


    /* -----------------------------------------------------
       FEATURED DOMAIN RESULT
    ----------------------------------------------------- */

    .hp-card-content {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: left !important;
    }

    .hp-domain-price-right {
        width: 100% !important;

        justify-content: space-between !important;
        flex-wrap: wrap !important;
    }


    /* -----------------------------------------------------
       MORE AVAILABLE OPTIONS
       Fix Buy Now button cutting off
    ----------------------------------------------------- */

    .hp-spotlight-list-item {
        padding: 18px !important;
        overflow: hidden !important;
    }

    .hp-spotlight-list-item .spotlight-tld-row,
    .hp-suggestion-item {
        width: 100% !important;

        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;

        gap: 12px !important;
    }

    .hp-spotlight-domain,
    .hp-sug-domain {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    .spotlight-tld-row .available.price:not(.w-hidden),
    .hp-sug-price {
        flex: 1 1 auto !important;

        margin-right: 0 !important;
        white-space: normal !important;
    }

    .hp-btn-spotlight-buy,
    .hp-btn-spotlight-buy:not(.w-hidden),
    .hp-btn-outline-buy {
        flex: 0 0 auto !important;

        max-width: 100% !important;

        padding-left: 16px !important;
        padding-right: 16px !important;
    }


    /* -----------------------------------------------------
       PROMO CARDS
    ----------------------------------------------------- */

    .hp-promo-card {
        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 20px !important;

        padding: 25px 20px !important;
    }


    /* -----------------------------------------------------
       DASHBOARD ACCOUNT CARD
    ----------------------------------------------------- */

    .ih-account-summary {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .ih-account-name,
    .ih-account-contact,
    .ih-account-meta {
        min-width: 0 !important;
    }

    .ih-account-name {
        overflow-wrap: anywhere !important;
    }


    /* -----------------------------------------------------
       PANEL LIST ITEMS
    ----------------------------------------------------- */

    .ih-panel-body .ih-dynamic-list-item,
    .ih-panel-body .list-group-item {
        align-items: flex-start !important;
        flex-wrap: wrap !important;

        gap: 10px !important;
    }
}


/* =========================================================
   4. SMALL MOBILE
   575px AND BELOW
========================================================= */

@media (max-width: 575.98px) {

    .premium-hero-header,
    .services-list-panel,
    .services-toolbar,
    .ih-dashboard-panel {
        border-radius: 14px !important;
    }

    .premium-hero-header {
        padding: 24px 16px !important;
    }

    .hero-actions {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 10px !important;
    }

    .hero-action-btn {
        width: 100% !important;
        justify-content: center !important;
    }


    /* More Available Options */
    .hp-spotlight-list-item .spotlight-tld-row,
    .hp-suggestion-item {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .hp-spotlight-domain,
    .hp-sug-domain,
    .spotlight-tld-row .available.price:not(.w-hidden),
    .hp-sug-price {
        width: 100% !important;
        text-align: left !important;
    }

    .hp-btn-spotlight-buy,
    .hp-btn-spotlight-buy:not(.w-hidden),
    .hp-btn-outline-buy {
        width: 100% !important;
        justify-content: center !important;
    }


    /* User Management table card outer padding */
    .am-table-card .dataTables_wrapper {
        padding: 14px !important;
    }
}


/* =========================================================
   5. EXTRA SMALL
   380px AND BELOW
========================================================= */

@media (max-width: 380px) {

    .glass-modal-content .modal-body,
    #glassRegisterModal .modal-body {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .ih-domain-search-card,
    .ih-stats-grid,
    .ih-dashboard-content-grid {
        width: calc(100% - 16px) !important;
    }

    .services-premium-table,
    .am-custom-table,
    .custom-data-table,
    #tableDomainsList,
    #tableTicketsList,
    #tableInvoicesList,
    #tableServicesList {
        min-width: 700px !important;
    }
}


/* =========================================================
   HEADER LOGO RESPONSIVE FIX
   Preserve original default/scrolled logo behaviour
========================================================= */

@media (max-width: 1199.98px) {

    .site-header .navbar-brand,
    .custom-dark-header .navbar-brand {
        flex-shrink: 0 !important;
    }

    /* Normal dark header */
    .site-header .logo-default,
    .custom-dark-header .logo-default {
        display: block !important;
    }

    .site-header .logo-scrolled,
    .custom-dark-header .logo-scrolled {
        display: none !important;
    }

    /* White / scrolled header */
    .site-header.scrolled .logo-default,
    .site-header.header-scrolled .logo-default {
        display: none !important;
    }

    .site-header.scrolled .logo-scrolled,
    .site-header.header-scrolled .logo-scrolled {
        display: block !important;
    }
}


/* =========================================================
   iHOSTER - FINAL CLIENT DASHBOARD BREADCRUMB RESPONSIVE FIX
========================================================= */

@media (max-width: 1199.98px) {

    /* Remove desktop spacing from the whole breadcrumb bar */
    body:has(.ih-client-dashboard) .master-breadcrumb {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        min-height: 0 !important;
        height: auto !important;

        background: #f7faff !important;
        overflow: hidden !important;
    }

    /* Full responsive container */
    body:has(.ih-client-dashboard) .master-breadcrumb > .container,
    body:has(.ih-client-dashboard) .master-breadcrumb > .container-fluid {
        width: 100% !important;
        max-width: 100% !important;

        margin: 15px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;

        min-height: 0 !important;
    }

    /* Actual breadcrumb row */
    body:has(.ih-client-dashboard) .master-breadcrumb .breadcrumb,
    body:has(.ih-client-dashboard) .custom-premium-breadcrumb {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 13px 0 !important;

        min-height: 46px !important;
        height: auto !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        flex-wrap: nowrap !important;
        white-space: nowrap !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    body:has(.ih-client-dashboard)
    .custom-premium-breadcrumb::-webkit-scrollbar {
        display: none !important;
    }

    body:has(.ih-client-dashboard)
    .custom-premium-breadcrumb .breadcrumb-item {
        flex: 0 0 auto !important;
    }
}


/* =========================
   MOBILE
========================= */
@media (max-width: 767.98px) {

    body:has(.ih-client-dashboard) .master-breadcrumb > .container,
    body:has(.ih-client-dashboard) .master-breadcrumb > .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body:has(.ih-client-dashboard) .master-breadcrumb .breadcrumb,
    body:has(.ih-client-dashboard) .custom-premium-breadcrumb {
        margin: 15px !important;
        padding: 10px 0 !important;

        min-height: 42px !important;
    }

    body:has(.ih-client-dashboard)
    .custom-premium-breadcrumb .breadcrumb-item {
        font-size: 13px !important;
        line-height: 20px !important;
    }

    body:has(.ih-client-dashboard)
    .custom-premium-breadcrumb .breadcrumb-item i {
        font-size: 13px !important;
        margin-right: 5px !important;
    }

    body:has(.ih-client-dashboard)
    .custom-premium-breadcrumb
    .breadcrumb-item + .breadcrumb-item::before {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 9px !important;
    }
}


/* =========================
   SMALL MOBILE
========================= */
@media (max-width: 480px) {

    body:has(.ih-client-dashboard) .master-breadcrumb > .container,
    body:has(.ih-client-dashboard) .master-breadcrumb > .container-fluid {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body:has(.ih-client-dashboard) .master-breadcrumb .breadcrumb,
    body:has(.ih-client-dashboard) .custom-premium-breadcrumb {
        padding: 9px 0 !important;
        min-height: 40px !important;
    }

    body:has(.ih-client-dashboard)
    .custom-premium-breadcrumb .breadcrumb-item {
        font-size: 12px !important;
    }
}



/* =========================================================
   CLIENT DASHBOARD - REMOVE HEADER / BREADCRUMB GAP
========================================================= */

@media (max-width: 1199.98px) {

    body:has(.ih-client-dashboard) .master-breadcrumb {
        margin-top: 0 !important;
    }
}


/* Phones */
@media (max-width: 767.98px) {

    body:has(.ih-client-dashboard) .master-breadcrumb {
        margin-top: 0 !important;
    }
}


@media (max-width: 575.98px) {
    body {
        padding-top: 50px !important;
    }
}


@media (max-width: 991.98px) {
    body {
        padding-top: 50px !important;
    }
}


/* =========================================
   SCROLLED HEADER WHITE BACKGROUND
   ========================================= */
.site-header.header-scrolled,
.site-header.scrolled {
    background: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

.site-header.header-scrolled .nav-link,
.site-header.scrolled .nav-link,
.site-header.header-scrolled .header-phone span,
.site-header.scrolled .header-phone span,
.site-header.header-scrolled .header-phone i,
.site-header.scrolled .header-phone i {
    color: #0b2a63 !important;
}

.site-header.header-scrolled .logo-default,
.site-header.scrolled .logo-default { 
    display: none !important; 
}

.site-header.header-scrolled .logo-scrolled,
.site-header.scrolled .logo-scrolled { 
    display: block !important; 
}

@media (min-width: 992px) {
    .site-header .container {
        max-width: 1500px !important;
    }
}


/* =========================================
   CRITICAL MOBILE HEADER & MENU FIX
   ========================================= */

/* 1. Logo & Right Icons Wrapper Fix (Squish wena eka nathi kirima) */
.site-header .navbar > .container {
    flex-wrap: nowrap !important;
}
.header-right-actions {
    flex-wrap: nowrap !important;
    display: flex !important;
    align-items: center !important;
}

/* 2. Badge Count Floating Fix (Count eka udata yana eka nawathwima) */
.header-right-actions .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.header-right-actions .badge {
    top: 0 !important;
    left: auto !important;
    right: -4px !important;
    transform: translate(0, -25%) !important;
}

/* 3. Mobile Menu Absolute Position Fix (Menu eka Header eken yata thiyabima) */
@media (max-width: 991.98px) {
    .site-header .navbar {
        position: relative !important;
    }
    
    .site-header .navbar-collapse {
        position: absolute !important;
        top: 100% !important; /* Meken thmai header eken kelinma pahalata push karanne */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background-color: #ffffff !important;
        padding: 15px 20px !important;
        margin-top: 0 !important;
        border-top: 1px solid #e2e8f0 !important;
        box-shadow: 0 20px 30px rgba(11, 42, 99, 0.15) !important;
        z-index: 99999 !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
    }
    
    /* Mobile Icon & Button Spacing Fix */
    .header-right-actions .btn-login {
        padding: 6px 12px !important;
        font-size: 14px !important;
    }
    .header-right-actions .btn-login::after {
        display: none !important; /* Dropdown arrow eka mobile waladi ain kirima */
    }
    .header-right-actions .header-dashboard-icon,
    .header-right-actions #notificationMenu {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        padding: 0 !important;
    }
}

/* White Scroll State Icon Color Overrides (Desktop Icons Dark Blue Kirima) */
.site-header.header-scrolled .header-right-actions .nav-link,
.site-header.header-scrolled .header-right-actions .nav-link i,
.site-header.header-scrolled .header-right-actions .header-dashboard-icon,
.site-header.header-scrolled .header-right-actions .header-dashboard-icon i {
    color: var(--primary-color) !important;
    filter: none !important; /* Kalu wena filter eka ain kara */
}

/* Mobile Hamburger Menu Icon Dark Blue Kirima */
.site-header.header-scrolled .navbar-toggler-icon {
    filter: invert(14%) sepia(50%) saturate(2971%) hue-rotate(207deg) brightness(95%) contrast(96%) !important;
}

/* Mobile Drawer eka athule thiyena icons Scroll weddith White kireema */
@media (max-width: 991.98px) {
    html body header.site-header.header-scrolled div.navbar-collapse div.mobile-actions-wrapper a.nav-link,
    html body header.site-header.header-scrolled div.navbar-collapse div.mobile-actions-wrapper a.nav-link i,
    html body header.site-header.header-scrolled div.navbar-collapse div.mobile-actions-wrapper a.header-dashboard-icon,
    html body header.site-header.header-scrolled div.navbar-collapse div.mobile-actions-wrapper a.header-dashboard-icon i {
        color: #ffffff !important;
        filter: none !important;
    }
}



/* =========================================================
   CLEAN RESPONSIVE HEADER & MOBILE DRAWER STYLES
========================================================= */

@media (max-width: 991.98px) {
    /* Top Bar Items Layout */
    .site-header .navbar > .container {
        flex-wrap: nowrap !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Right Actions Items Alignment */
    .header-right-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    /* Floating Clean White Mobile Menu Drawer */
    .site-header .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 15px !important;
        right: 15px !important;
        width: calc(100% - 30px) !important;
        background: #ffffff !important;
        background-image: none !important;
        border-radius: 16px !important;
        padding: 16px 20px !important;
        margin-top: 10px !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 15px 35px rgba(11, 42, 99, 0.18) !important;
        z-index: 999999 !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    /* Mobile Links Styling */
    .site-header .navbar-nav {
        width: 100% !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .site-header .navbar-nav .nav-link {
        color: #0b2a63 !important;
        font-size: 15px !important;
          font-weight: 600;
        padding: 12px 16px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        transition: all 0.2s ease !important;
    }

    .site-header .navbar-nav .nav-link:hover,
    .site-header .navbar-nav .nav-link:focus {
        background-color: #f1f6ff !important;
        color: #0a7f26 !important;
        padding-left: 20px !important;
    }

    /* Mega Menu Dropdown inside Mobile Drawer */
    .site-header .navbar-collapse .dropdown-menu.mega-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        box-shadow: none !important;
        border: 1px solid #edf2f7 !important;
        border-radius: 12px !important;
        padding: 15px !important;
        background: #f8fafc !important;
        margin-top: 8px !important;
    }

    .site-header .navbar-collapse .mega-menu .container {
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
    }

    .site-header .navbar-collapse .mega-left {
        border-right: none !important;
        padding-right: 0 !important;
        margin-bottom: 15px !important;
    }
}