/* =============================================================
   QIW HOST — Professional Light Theme v3
   Brand: #3365F3 | Built for WHMCS Twenty-One (Nexus-based)
   ============================================================= */

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

/* ===== GLOBAL ===== */
*:not(i):not([class*="fa"]):not([class*="glyphicon"]):not(span[class*="fa"]) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  box-sizing: border-box;
}

body {
  background: #f5f7fb !important;
  color: #1f2937 !important;
}

/* ===== TOP ANNOUNCEMENT BAR (QIW HOST) ===== */
#qiw-topbar {
  background: #3365F3 !important;
  padding: 9px 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
  position: relative;
  z-index: 200;
}

#qiw-topbar .qiw-topbar-left a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  transition: opacity 0.2s;
}

#qiw-topbar .qiw-topbar-left a:hover {
  opacity: 0.85;
}

#qiw-topbar .qiw-topbar-left .fab,
#qiw-topbar .qiw-topbar-left .fas {
  margin-right: 4px;
  font-size: 13px;
}

#qiw-topbar .qiw-topbar-sep {
  color: rgba(255,255,255,0.4);
  margin: 0 14px;
  font-weight: 300;
}

#qiw-topbar .qiw-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

#qiw-topbar .qiw-topbar-lang {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
  transition: background 0.2s;
}

#qiw-topbar .qiw-topbar-lang:hover {
  background: rgba(255,255,255,0.1);
}

#qiw-topbar .qiw-livechat-btn {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1.5px solid #ffffff !important;
  border-radius: 6px !important;
  padding: 5px 14px !important;
  transition: all 0.2s !important;
  letter-spacing: 0.3px;
}

#qiw-topbar .qiw-livechat-btn:hover {
  background: #ffffff !important;
  color: #3365F3 !important;
}

#qiw-topbar .qiw-livechat-btn .fas {
  margin-right: 4px;
  font-size: 11px;
}

/* Remove old body::before if any */
body::before {
  display: none !important;
}

/* ===== HEADER ===== */
#header.header {
  background: #ffffff !important;
  box-shadow: none !important;
  position: relative;
  z-index: 100;
}

/* Hide old separate logo row if still rendered */
.navbar.navbar-light:not(.qiw-main-nav) {
  display: none !important;
}

/* Hide old separate nav-wrapper if still rendered */
.main-navbar-wrapper:not(.qiw-main-nav) {
  display: none !important;
}

/* ===== SINGLE-LINE NAVBAR ===== */
.qiw-main-nav {
  background: #ffffff !important;
  border: none !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  padding: 0 !important;
}

/* Logo */
.qiw-main-nav .navbar-brand {
  margin-right: 24px !important;
  padding: 10px 0 !important;
}

.qiw-main-nav .navbar-brand img {
  height: 36px !important;
  width: auto !important;
}

/* Nav links */
.qiw-main-nav .navbar-nav.mr-auto > .nav-item > a,
.qiw-main-nav #nav > li > a {
  color: #374151 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 16px 15px !important;
  border-radius: 0 !important;
  transition: color 0.2s !important;
  position: relative;
  white-space: nowrap;
}

.qiw-main-nav .navbar-nav.mr-auto > .nav-item > a:hover,
.qiw-main-nav #nav > li > a:hover {
  color: #3365F3 !important;
  background: transparent !important;
}

/* Hover underline — only for non-dropdown links */
.qiw-main-nav #nav > li > a:not(.dropdown-toggle)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2.5px;
  background: #3365F3;
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.qiw-main-nav #nav > li > a:not(.dropdown-toggle):hover::after,
.qiw-main-nav #nav > li.active > a:not(.dropdown-toggle)::after {
  transform: scaleX(1);
}

.qiw-main-nav #nav > li.active > a {
  color: #3365F3 !important;
  font-weight: 600 !important;
}

/* Dropdown caret — via ::after on dropdown-toggle links */
.qiw-main-nav .caret {
  display: none !important;
}

/* Add chevron arrow to dropdown-toggle nav links */
.qiw-main-nav #nav > li.dropdown > a.dropdown-toggle::after {
  content: '' !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-right: 1.5px solid currentColor !important;
  border-bottom: 1.5px solid currentColor !important;
  border-top: none !important;
  border-left: none !important;
  transform: rotate(45deg) !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  position: relative !important;
  top: -1px !important;
  opacity: 0.5 !important;
  transition: transform 0.2s ease, opacity 0.2s !important;
  background: none !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  height: 6px !important;
  border-radius: 0 !important;
}

/* Rotate arrow on hover/open */
.qiw-main-nav #nav > li.dropdown:hover > a.dropdown-toggle::after,
.qiw-main-nav #nav > li.dropdown.open > a.dropdown-toggle::after {
  transform: rotate(-135deg) !important;
  opacity: 1 !important;
  top: 2px !important;
}

/* Desktop hover dropdown */
@media (min-width: 1200px) {
  .qiw-main-nav .nav-item.dropdown:hover > .dropdown-menu,
  .qiw-main-nav #nav > li.dropdown:hover > .dropdown-menu {
    display: block !important;
    margin-top: 0 !important;
    animation: qiw-dropdown-in 0.18s ease-out;
  }
}

/* ===== CART ICON ===== */
.qiw-cart-icon {
  color: #374151 !important;
  font-size: 16px !important;
  padding: 8px 10px !important;
  position: relative;
  transition: color 0.2s !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  margin-left: 8px !important;
}

.qiw-cart-icon i {
  font-size: 16px !important;
  display: inline-block !important;
}

.qiw-cart-icon:hover {
  color: #3365F3 !important;
}

/* Cart badge */
.qiw-cart-icon .badge-info,
#cartItemCount,
#cartItemCountMobile {
  background: #3365F3 !important;
  color: #fff !important;
  font-size: 9px !important;
  border-radius: 50% !important;
  padding: 3px 5px !important;
  position: absolute !important;
  top: 0px !important;
  right: -2px !important;
  min-width: 16px !important;
  line-height: 1 !important;
  display: inline-block !important;
}

/* Hamburger mobile button */
.qiw-hamburger {
  color: #374151 !important;
  font-size: 18px !important;
  padding: 8px !important;
  margin-left: 4px !important;
}

/* ===== ACCOUNT / LOGIN — CIRCULAR PERSON ICON ===== */

/* Account dropdown link — circular icon */
.qiw-nav-right > li:last-child > a.dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #3365F3 !important;
  color: #fff !important;
  font-size: 0 !important;
  border: none !important;
  margin-left: 12px !important;
  transition: all 0.2s !important;
  position: relative;
}

.qiw-nav-right > li:last-child > a.dropdown-toggle:hover {
  background: #2a58d6 !important;
  box-shadow: 0 4px 12px rgba(51, 101, 243, 0.3) !important;
}

/* Show person icon via pseudo-element */
.qiw-nav-right > li:last-child > a.dropdown-toggle::before {
  content: '\f007' !important;
  font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free', 'FontAwesome' !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  color: #fff !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hide the original text & caret */
.qiw-nav-right > li:last-child > a.dropdown-toggle > * {
  display: none !important;
}

/* Non-dropdown links in right nav — exclude cart icon */
.qiw-nav-right > li > a:not(.dropdown-toggle):not(.qiw-cart-icon) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #3365F3 !important;
  color: #fff !important;
  font-size: 0 !important;
  border: none !important;
  margin-left: 12px !important;
  transition: all 0.2s !important;
}

.qiw-nav-right > li > a:not(.dropdown-toggle):not(.qiw-cart-icon)::before {
  content: '\f007' !important;
  font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free', 'FontAwesome' !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  color: #fff !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.qiw-nav-right > li > a:not(.dropdown-toggle):not(.qiw-cart-icon) > * {
  display: none !important;
}

.qiw-nav-right > li > a:not(.dropdown-toggle):not(.qiw-cart-icon):hover {
  background: #2a58d6 !important;
  box-shadow: 0 4px 12px rgba(51, 101, 243, 0.3) !important;
}

/* ===== DROPDOWN MENU ===== */
.qiw-main-nav .dropdown-menu {
  border: none !important;
  border-radius: 12px !important;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.10),
    0 2px 8px rgba(0, 0, 0, 0.05) !important;
  padding: 8px !important;
  min-width: 200px !important;
  margin-top: 8px !important;
  animation: qiw-dropdown-in 0.15s ease-out;
}

@keyframes qiw-dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.qiw-main-nav .dropdown-menu .dropdown-item {
  border-radius: 8px !important;
  padding: 0 !important;
  margin-bottom: 2px !important;
}

.qiw-main-nav .dropdown-menu .dropdown-item a {
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  border-radius: 8px !important;
  transition: all 0.15s !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.qiw-main-nav .dropdown-menu .dropdown-item a:hover {
  background: #eef2ff !important;
  color: #3365F3 !important;
}

.qiw-main-nav .dropdown-menu .dropdown-item a i {
  color: #9ca3af !important;
  font-size: 14px !important;
  width: 18px;
  text-align: center;
}

.qiw-main-nav .dropdown-menu .dropdown-item a:hover i {
  color: #3365F3 !important;
}

/* Dropdown divider */
.qiw-main-nav .dropdown-menu .dropdown-divider {
  border-top-color: #f3f4f6 !important;
  margin: 4px 8px !important;
}

/* Search bar inside mobile collapse */
.qiw-main-nav .search .form-control {
  border: 1.5px solid #e5e7eb !important;
  border-radius: 0 8px 8px 0 !important;
  background: #f9fafb !important;
  font-size: 13px !important;
  color: #374151 !important;
  height: 38px !important;
}

.qiw-main-nav .search .btn-default {
  border: 1.5px solid #e5e7eb !important;
  border-right: none !important;
  border-radius: 8px 0 0 8px !important;
  background: #f9fafb !important;
  color: #6b7280 !important;
  height: 38px !important;
  padding: 0 12px !important;
}

/* ===== BREADCRUMB BAR ===== */
.master-breadcrumb {
  background: #f0f4ff !important;
  border-bottom: 1px solid #dbeafe !important;
  padding: 8px 0 !important;
}

.breadcrumb {
  background: transparent !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  font-size: 13px !important;
}

.breadcrumb-item a {
  color: #3365F3 !important;
  font-weight: 500 !important;
}

.breadcrumb-item.active {
  color: #6b7280 !important;
}

/* ===== BUTTONS ===== */
.btn-primary,
.btn-success,
input[type="submit"] {
  background: #3365F3 !important;
  border-color: #3365F3 !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 10px 24px !important;
  transition: all 0.2s !important;
  box-shadow: 0 1px 3px rgba(51,101,243,0.2) !important;
  letter-spacing: 0.01em !important;
}

.btn-primary:hover,
.btn-success:hover,
input[type="submit"]:hover {
  background: #2251d4 !important;
  border-color: #2251d4 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(51,101,243,0.3) !important;
}

.btn-primary:active,
.btn-success:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 4px rgba(51,101,243,0.2) !important;
}

.btn-default {
  border: 1.5px solid #d1d5db !important;
  color: #374151 !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  background: #fff !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
}

.btn-default:hover {
  border-color: #3365F3 !important;
  color: #3365F3 !important;
  background: #f8faff !important;
}

.btn-danger {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  border-radius: 8px !important;
  color: #fff !important;
}

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

/* ===== CARDS ===== */
.card {
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04) !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.card-body {
  background: #ffffff !important;
  color: #374151 !important;
}

.card-header,
.card-footer {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
}

/* Panels (legacy) */
.panel {
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04) !important;
  background: #fff !important;
}

.panel-heading {
  border-radius: 12px 12px 0 0 !important;
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  font-weight: 600 !important;
  color: #111827 !important;
  padding: 14px 20px !important;
}

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

/* Center the login form vertically */
body.primary-bg-color .login-form {
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Login card */
.login-form .card {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.07) !important;
  max-width: 440px !important;
  width: 100% !important;
  margin: 40px auto !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

/* Card body */
.login-form .card-body {
  padding: 44px 38px 32px !important;
}

/* Remove any pseudo-element icons/bars */
.login-form .card-body::before,
.login-form .card::before,
.login-form .card-body .mb-4::before {
  display: none !important;
  content: none !important;
}

/* Title */
.login-form .card-body h6.h3,
.login-form .card-body h3 {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin-bottom: 4px !important;
}

/* Subtitle */
.login-form .card-body .text-muted {
  color: #6b7280 !important;
  font-size: 15px !important;
}

/* Labels */
.login-form .form-control-label,
.login-form .form-group > label {
  font-weight: 600 !important;
  color: #374151 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 6px !important;
}

/* Input group */
.login-form .input-group {
  border: 1.5px solid #d1d5db !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.login-form .input-group:hover {
  border-color: #9ca3af !important;
}

/* FontAwesome icons inside input group */
.login-form .input-group .input-group-text {
  background: #f9fafb !important;
  border: none !important;
  border-right: 1.5px solid #d1d5db !important;
  color: #6b7280 !important;
  font-size: 14px !important;
  padding: 11px 14px !important;
  min-width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Input field */
.login-form .input-group .form-control {
  border: none !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  height: auto !important;
  color: #111827 !important;
  background: #fff !important;
}

.login-form .input-group .form-control::placeholder {
  color: #9ca3af !important;
}

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

/* Focus glow */
.login-form .input-group:focus-within {
  border-color: #3365F3 !important;
  box-shadow: 0 0 0 3px rgba(51, 101, 243, 0.1) !important;
}

.login-form .input-group:focus-within .input-group-text {
  color: #3365F3 !important;
  border-right-color: #3365F3 !important;
}

/* Forgot password */
.login-form .small.text-muted {
  color: #3365F3 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

.login-form .small.text-muted:hover {
  color: #2251d4 !important;
  text-decoration: underline !important;
}

/* Login button — full width, solid blue */
.login-form .float-left {
  float: none !important;
  width: 100% !important;
  margin-top: 8px !important;
  margin-bottom: 12px !important;
}

.login-form .btn-primary {
  width: 100% !important;
  padding: 13px 24px !important;
  font-size: 15px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  background: #3365F3 !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(51, 101, 243, 0.25) !important;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s !important;
}

.login-form .btn-primary:hover {
  background: #2a58d6 !important;
  box-shadow: 0 4px 16px rgba(51, 101, 243, 0.35) !important;
  transform: translateY(-1px) !important;
}

.login-form .btn-primary:active {
  transform: translateY(0) !important;
}

/* Remember me */
.login-form .text-right {
  text-align: center !important;
}

.login-form .text-right label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  font-size: 13.5px !important;
  color: #6b7280 !important;
}

.login-form .form-check-input {
  margin-right: 5px !important;
  accent-color: #3365F3 !important;
}

/* Password reveal */
.login-form .btn-reveal-pw {
  border: none !important;
  border-left: 1.5px solid #d1d5db !important;
  background: #f9fafb !important;
  color: #9ca3af !important;
  padding: 11px 14px !important;
  transition: color 0.2s !important;
}

.login-form .btn-reveal-pw:hover {
  color: #3365F3 !important;
  background: #f0f4ff !important;
}

/* Card footer */
.login-form .card-footer {
  background: #f9fafb !important;
  border-top: 1px solid #e5e7eb !important;
  padding: 18px 38px !important;
  text-align: center !important;
}

.login-form .card-footer small {
  color: #6b7280 !important;
  font-size: 14px !important;
}

.login-form .card-footer a {
  color: #3365F3 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  margin-left: 3px !important;
}

.login-form .card-footer a:hover {
  text-decoration: underline !important;
}

/* ===== FORMS (Global) ===== */
.form-control {
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: #111827 !important;
  transition: all 0.2s !important;
  background: #fff !important;
}

.form-control:focus {
  border-color: #3365F3 !important;
  box-shadow: 0 0 0 3px rgba(51,101,243,0.1) !important;
  outline: none !important;
}

.form-group label,
.form-control-label {
  font-weight: 600 !important;
  color: #374151 !important;
  font-size: 13px !important;
  margin-bottom: 6px !important;
}

.input-group-text {
  background: #f9fafb !important;
  border: 1.5px solid #e5e7eb !important;
  color: #6b7280 !important;
}

/* ===== REGISTRATION PAGE ===== */

/* Prepend icon container */
#registration .prepend-icon {
  position: relative !important;
  width: 100% !important;
}

/* Icon label — sits inside left of input */
#registration .prepend-icon .field-icon {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 4 !important;
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  text-align: center !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

#registration .prepend-icon .field-icon i {
  color: #9ca3af !important;
  font-size: 14px !important;
  line-height: inherit !important;
  vertical-align: middle !important;
}

/* Input field — push text right to avoid icon */
#registration .prepend-icon .field,
#registration .prepend-icon input.field,
#registration .prepend-icon select.field,
#registration .prepend-icon textarea.field {
  padding-left: 44px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  height: 44px !important;
  font-size: 14px !important;
  color: #111827 !important;
  background: #ffffff !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#registration .prepend-icon .field:focus,
#registration .prepend-icon input.field:focus,
#registration .prepend-icon select.field:focus {
  border-color: #3365F3 !important;
  box-shadow: 0 0 0 3px rgba(51, 101, 243, 0.1) !important;
  outline: none !important;
}

/* All standalone fields too — no display override so JS can toggle */
#registration .field,
#registration .form-control {
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  height: 44px !important;
  font-size: 14px !important;
  color: #111827 !important;
  background: #ffffff !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 14px !important;
}

/* State field — WHMCS dynamically swaps input/select, hide duplicate icon */
#registration .prepend-icon .field-icon + .field-icon {
  display: none !important;
}

/* Style the dynamic state select properly */
#registration #state[style*="display: none"] {
  display: none !important;
}

/* Force ALL selects to compact dropdown — prevent listbox expansion */
#registration select,
#registration select.field,
#registration select.form-control,
#registration select#state,
#registration select#inputCountry {
  padding-left: 44px !important;
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  cursor: pointer !important;
  height: 44px !important;
  overflow: hidden !important;
  background: #fff !important;
}

#registration .field:focus,
#registration .form-control:focus {
  border-color: #3365F3 !important;
  box-shadow: 0 0 0 3px rgba(51, 101, 243, 0.1) !important;
  outline: none !important;
}

/* Row alignment fix */
#registration .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}

#registration .row > [class*="col-"] {
  margin-bottom: 14px !important;
}

/* Registration card titles */
#registration .card-title,
#containerNewUserSignup .card-title,
#containerNewUserSecurity .card-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

/* Registration cards */
#registration .card {
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  overflow: visible !important;
}

/* Register button */
#registration .btn-lg.btn-primary,
#frmCheckout > p > input[type="submit"] {
  background: linear-gradient(135deg, #3365F3, #2a58d6) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 48px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 4px 14px rgba(51, 101, 243, 0.25) !important;
  transition: all 0.2s !important;
  min-width: 240px !important;
}

#registration .btn-lg.btn-primary:hover,
#frmCheckout > p > input[type="submit"]:hover {
  background: linear-gradient(135deg, #2a58d6, #1e4cc4) !important;
  box-shadow: 0 6px 22px rgba(51, 101, 243, 0.35) !important;
  transform: translateY(-2px) !important;
}

/* Generate Password button */
.generate-password,
button.generate-password {
  border: 1.5px solid #d1d5db !important;
  border-radius: 8px !important;
  color: #374151 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  background: #fff !important;
  padding: 6px 16px !important;
  transition: all 0.2s !important;
}

.generate-password:hover {
  border-color: #3365F3 !important;
  color: #3365F3 !important;
  background: #eef2ff !important;
}

/* Password strength meter */
.password-strength-meter .progress {
  height: 6px !important;
  border-radius: 6px !important;
  background: #e5e7eb !important;
  overflow: hidden !important;
}

.password-strength-meter .progress-bar {
  border-radius: 6px !important;
  transition: width 0.3s ease !important;
}

.password-strength-meter .text-muted {
  font-size: 12px !important;
  color: #6b7280 !important;
  margin-top: 4px !important;
}

/* TOS checkbox */
.form-check.accepttos,
#registration .form-check {
  font-size: 14px !important;
  color: #374151 !important;
}

#registration .form-check-input {
  margin-right: 8px !important;
  accent-color: #3365F3 !important;
}

/* Phone input with country flag — hide FA icon, flag is enough */
#registration .iti,
#registration .intl-tel-input {
  width: 100% !important;
  display: block !important;
}

/* Hide the prepend FA phone icon when flag is present */
#registration .iti ~ .field-icon,
#registration .intl-tel-input ~ .field-icon,
#registration .prepend-icon:has(.iti) .field-icon,
#registration .prepend-icon:has(.intl-tel-input) .field-icon {
  display: none !important;
}

/* Give phone input enough left padding for flag + dial code */
#registration .iti .field,
#registration .intl-tel-input .field,
#registration .iti input,
#registration .intl-tel-input input {
  padding-left: 90px !important;
  height: 44px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Style the flag container */
#registration .iti__flag-container,
#registration .intl-tel-input .flag-container {
  border-radius: 10px 0 0 10px !important;
  height: 44px !important;
}

#registration .iti__selected-flag,
#registration .intl-tel-input .selected-flag {
  height: 44px !important;
  padding: 0 8px 0 14px !important;
  border-radius: 10px 0 0 10px !important;
  background: transparent !important;
}

/* Select fields (Country, State) */
#registration select.field {
  appearance: auto !important;
  cursor: pointer !important;
  padding-right: 14px !important;
}

.table > thead > tr > th {
  background: #f8fafc !important;
  color: #374151 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 2px solid #e5e7eb !important;
  padding: 12px 16px !important;
}

.table > tbody > tr > td {
  padding: 12px 16px !important;
  border-top: 1px solid #f0f0f0 !important;
  color: #4b5563 !important;
  vertical-align: middle !important;
}

.table > tbody > tr:hover > td {
  background: #f8faff !important;
}

/* ===== ALERTS ===== */
.alert {
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 14px 18px !important;
}

.alert-success {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
}

.alert-danger {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #991b1b !important;
}

.alert-info {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1e40af !important;
}

.alert-warning {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #92400e !important;
}

/* ===== LINKS ===== */
a {
  color: #3365F3 !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}

a:hover {
  color: #2251d4 !important;
  text-decoration: none !important;
}

/* ===== DROPDOWN MENUS ===== */
.dropdown-menu {
  border-radius: 10px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
  padding: 6px !important;
  margin-top: 4px !important;
}

.dropdown-menu > li > a,
.dropdown-item {
  border-radius: 6px !important;
  color: #374151 !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  transition: all 0.15s !important;
}

.dropdown-menu > li > a:hover,
.dropdown-item:hover {
  background: #f0f4ff !important;
  color: #3365F3 !important;
}

/* ===== DOMAIN SEARCH BOX ===== */
.domain-checker-container,
.domain-search-container {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 32px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
  border: 1px solid #e5e7eb !important;
}

/* ===== SIDEBAR ===== */
.sidebar .list-group-item {
  background: transparent !important;
  border: none !important;
  color: #4b5563 !important;
  border-radius: 8px !important;
  margin: 1px 0 !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.15s !important;
}

.sidebar .list-group-item:hover {
  background: #f0f4ff !important;
  color: #3365F3 !important;
}

.sidebar .list-group-item.active {
  background: #eef2ff !important;
  color: #3365F3 !important;
  font-weight: 600 !important;
  border-left: 3px solid #3365F3 !important;
}

/* ===== FOOTER ===== */
footer,
#footer,
.footer {
  background: #111827 !important;
  color: #9ca3af !important;
  padding: 24px 0 !important;
  text-align: center !important;
  font-size: 13px !important;
  border-top: none !important;
}

footer a,
#footer a,
.footer a {
  color: #9ca3af !important;
}

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

/* ===== BADGES ===== */
.label-success, .badge-success { background: #10b981 !important; border-radius: 6px !important; font-weight: 600 !important; }
.label-danger, .badge-danger { background: #ef4444 !important; border-radius: 6px !important; font-weight: 600 !important; }
.label-warning, .badge-warning { background: #f59e0b !important; border-radius: 6px !important; font-weight: 600 !important; }
.label-info, .badge-info { background: #3365F3 !important; border-radius: 6px !important; font-weight: 600 !important; }

/* ===== PAGINATION ===== */
.pagination > li > a,
.pagination > li > span {
  border-radius: 8px !important;
  margin: 0 2px !important;
  color: #374151 !important;
  border-color: #e5e7eb !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

.pagination > .active > a,
.pagination > .active > span {
  background: #3365F3 !important;
  border-color: #3365F3 !important;
  color: #fff !important;
}

/* ===== PRODUCT / SERVICE CARDS ===== */
.product-list .panel:hover,
.product-list .card:hover {
  border-color: #3365F3 !important;
  box-shadow: 0 8px 24px rgba(51,101,243,0.1) !important;
  transform: translateY(-2px) !important;
  transition: all 0.25s !important;
}

/* ===== CART / CHECKOUT PAGE ===== */

/* Page heading */
.primary-content > h2,
.primary-content > h3,
.view-cart h2 {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin-bottom: 20px !important;
}

/* Cart table */
.table-cart,
.view-cart .table {
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.table-cart thead th,
.view-cart .table thead th,
.table thead.primary-bg-color th {
  background: #3365F3 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 16px !important;
  border: none !important;
}

.table-cart tbody td,
.view-cart .table tbody td {
  padding: 14px 16px !important;
  color: #374151 !important;
  font-size: 14px !important;
  vertical-align: middle !important;
  border-color: #f3f4f6 !important;
}

.table-cart tbody tr:hover,
.view-cart .table tbody tr:hover {
  background: #f8faff !important;
}

/* Empty cart message */
.view-cart .text-center,
.table-cart td[colspan] {
  color: #6b7280 !important;
  font-size: 15px !important;
  padding: 30px 16px !important;
}

/* Order Summary panel */
.order-summary,
.panel-surround,
.sidebar .panel {
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

/* Order Summary header — brand blue */
.order-summary .header,
.order-summary .panel-heading,
.order-summary > .header,
.panel-surround > .top-heading,
#orderSummary .header,
.order-summary-header {
  background: linear-gradient(135deg, #3365F3, #2a58d6) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 14px 20px !important;
  text-align: center !important;
  letter-spacing: 0.3px !important;
  border: none !important;
}

/* If it uses btn-block for the header */
.order-summary .btn.disabled,
.panel-surround .top-heading .btn {
  background: linear-gradient(135deg, #3365F3, #2a58d6) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  border: none !important;
  padding: 14px 20px !important;
  letter-spacing: 0.3px !important;
  opacity: 1 !important;
}

/* Summary body */
.order-summary .body,
.order-summary .panel-body,
#orderSummary .body {
  padding: 20px !important;
  background: #ffffff !important;
}

/* Summary items */
.order-summary .line-item,
.order-summary .row,
.order-summary table td {
  color: #374151 !important;
  font-size: 14px !important;
  padding: 6px 0 !important;
}

/* Summary divider */
.order-summary hr {
  border-top: 1px solid #e5e7eb !important;
  margin: 12px 0 !important;
}

/* Total amount */
.order-summary .amt,
.order-summary .total-due-today,
.order-summary .grand-total,
.order-summary strong {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

/* Total Due Today label */
.order-summary .total-due-today-label,
.order-summary .small {
  color: #6b7280 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Checkout button */
.order-summary .btn-primary,
.order-summary .btn-success,
#checkout .btn-primary,
.btn-checkout {
  background: linear-gradient(135deg, #3365F3, #2a58d6) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 28px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  width: 100% !important;
  margin-top: 12px !important;
  box-shadow: 0 4px 12px rgba(51, 101, 243, 0.25) !important;
  transition: all 0.2s !important;
}

.order-summary .btn-primary:hover,
.order-summary .btn-success:hover,
#checkout .btn-primary:hover,
.btn-checkout:hover {
  background: linear-gradient(135deg, #2a58d6, #1e4cc4) !important;
  box-shadow: 0 6px 20px rgba(51, 101, 243, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Continue Shopping link */
.order-summary a:not(.btn),
.continue-shopping {
  color: #3365F3 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.order-summary a:not(.btn):hover {
  text-decoration: underline !important;
}

/* Promo code section */
.promo-code,
.promo-input,
[id*="promo"],
.view-cart .form-group {
  margin-top: 16px !important;
}

.promo-code .btn,
.view-cart .form-group .btn-default,
.view-cart input[value="Validate Code"],
.view-cart button:not(.btn-primary):not(.btn-success) {
  border: 1.5px solid #d1d5db !important;
  border-radius: 8px !important;
  color: #374151 !important;
  font-weight: 500 !important;
  background: #fff !important;
  padding: 8px 20px !important;
  transition: all 0.2s !important;
}

.promo-code .btn:hover,
.view-cart .form-group .btn-default:hover {
  border-color: #3365F3 !important;
  color: #3365F3 !important;
  background: #eef2ff !important;
}

/* Apply Promo Code link */
a[onclick*="promo"],
.promo-trigger,
a[data-toggle*="promo"],
.view-cart a.text-primary {
  color: #3365F3 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Sidebar Actions panel */
.sidebar .panel-heading,
.sidebar .card-header {
  background: #f8faff !important;
  border-bottom: 1px solid #e5e7eb !important;
  font-weight: 700 !important;
  color: #111827 !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
}

.sidebar .list-group-item i {
  color: #3365F3 !important;
  margin-right: 6px !important;
  font-size: 13px !important;
  width: 16px;
  text-align: center;
}

/* Shopping Cart breadcrumb */
.master-breadcrumb .breadcrumb-item:last-child {
  color: #3365F3 !important;
  font-weight: 600 !important;
}
/* ===== CLIENT AREA DASHBOARD ===== */

/* Hide MarketConnect promo banners */
.mc-promo-login,
.mc-promo-manage,
[class*="marketconnect"],
.client-home-cards .card[menuitemname*="MarketConnect"],
.client-home-cards .card[menuitemname*="marketconnect"] {
  display: none !important;
}

/* Stat tiles row */
.tiles {
  margin-bottom: 24px !important;
}

.tiles .tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 16px !important;
  background: #ffffff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 6px !important;
}

.tiles .tile:hover {
  border-color: #3365F3 !important;
  box-shadow: 0 8px 24px rgba(51, 101, 243, 0.12) !important;
  transform: translateY(-3px) !important;
}

/* Tile icon */
.tiles .tile > i {
  font-size: 28px !important;
  color: #3365F3 !important;
  margin-bottom: 8px !important;
  opacity: 0.7;
  transition: opacity 0.2s !important;
}

.tiles .tile:hover > i {
  opacity: 1;
}

/* Stat number */
.tiles .tile .stat {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  line-height: 1.2 !important;
  margin-bottom: 4px !important;
}

/* Stat title */
.tiles .tile .title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}

/* Bottom highlight bar */
.tiles .tile .highlight {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  border-radius: 0 0 14px 14px !important;
  transition: height 0.2s !important;
}

.tiles .tile:hover .highlight {
  height: 4px !important;
}

.tiles .tile .highlight.bg-color-blue { background: #3365F3 !important; }
.tiles .tile .highlight.bg-color-green { background: #10b981 !important; }
.tiles .tile .highlight.bg-color-red { background: #ef4444 !important; }
.tiles .tile .highlight.bg-color-gold { background: #f59e0b !important; }

/* Dashboard home cards */
.client-home-cards .card {
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
  transition: box-shadow 0.2s !important;
}

.client-home-cards .card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

/* Card accent top border */
.client-home-cards .card-accent-blue { border-top: 3px solid #3365F3 !important; }
.client-home-cards .card-accent-green { border-top: 3px solid #10b981 !important; }
.client-home-cards .card-accent-red { border-top: 3px solid #ef4444 !important; }
.client-home-cards .card-accent-gold { border-top: 3px solid #f59e0b !important; }
.client-home-cards .card-accent-orange { border-top: 3px solid #f97316 !important; }
.client-home-cards .card-accent-lime { border-top: 3px solid #84cc16 !important; }
.client-home-cards .card-accent-pink { border-top: 3px solid #ec4899 !important; }

/* Card header */
.client-home-cards .card-header {
  background: #ffffff !important;
  border-bottom: 1px solid #f3f4f6 !important;
  padding: 14px 20px !important;
}

.client-home-cards .card-header .card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.4 !important;
}

.client-home-cards .card-header .card-title > i {
  color: #3365F3 !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  order: 0 !important;
}

/* Push button to far right — it comes first in HTML but should display last */
.client-home-cards .card-header .card-title .float-right,
.client-home-cards .card-header .card-title > .float-right,
.client-home-cards .card-header .card-title > div {
  order: 99 !important;
  margin-left: auto !important;
  float: none !important;
  flex-shrink: 0 !important;
}

/* Card header buttons — clean outlined style */
.client-home-cards .card-header .btn,
.client-home-cards .card-header .btn-xs,
.client-home-cards .card-header .btn-default,
.client-home-cards .card-header a.btn[class*="bg-color"] {
  font-size: 12px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  border: 1.5px solid #d1d5db !important;
  background: #fff !important;
  color: #374151 !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}

.client-home-cards .card-header .btn:hover,
.client-home-cards .card-header .btn-xs:hover,
.client-home-cards .card-header .btn-default:hover {
  border-color: #3365F3 !important;
  color: #3365F3 !important;
  background: #eef2ff !important;
}

/* Card body */
.client-home-cards .card-body {
  padding: 16px 20px !important;
  color: #374151 !important;
  font-size: 14px !important;
  background: #fff !important;
}

/* Card footer */
.client-home-cards .card-footer {
  background: #fafbff !important;
  border-top: 1px solid #f3f4f6 !important;
  padding: 10px 20px !important;
  min-height: 0 !important;
}

.client-home-cards .card-footer:empty {
  display: none !important;
}

/* Card list group items */
.client-home-cards .list-group-item {
  border: none !important;
  border-bottom: 1px solid #f3f4f6 !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  color: #374151 !important;
  transition: all 0.15s !important;
}

.client-home-cards .list-group-item:last-child {
  border-bottom: none !important;
}

.client-home-cards .list-group-item:hover {
  background: #f8faff !important;
  color: #3365F3 !important;
}

.client-home-cards .list-group-item i {
  color: #9ca3af !important;
  width: 18px;
  text-align: center;
  margin-right: 4px;
}

.client-home-cards .list-group-item:hover i {
  color: #3365F3 !important;
}

/* View More link */
.client-home-cards .card-body a,
.client-home-cards .card-footer a {
  color: #3365F3 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

/* ===== DOMAIN REGISTRATION CARD ===== */

/* Card body form layout */
.client-home-cards .card-body .input-group {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

/* Domain input */
.client-home-cards .card-body .input-group .form-control,
.client-home-cards .card-body .input-group input[type="text"] {
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  height: 44px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  flex: 1 1 auto !important;
  min-width: 80px !important;
  color: #111827 !important;
  background: #fff !important;
}

.client-home-cards .card-body .input-group .form-control:focus,
.client-home-cards .card-body .input-group input[type="text"]:focus {
  border-color: #3365F3 !important;
  box-shadow: 0 0 0 3px rgba(51,101,243,0.1) !important;
  outline: none !important;
  z-index: 2 !important;
}

/* Button container */
.client-home-cards .card-body .input-group .input-group-append,
.client-home-cards .card-body .input-group .input-group-btn {
  display: flex !important;
  flex-shrink: 0 !important;
  margin-left: 0 !important;
}

/* Register / Transfer buttons */
.client-home-cards .card-body .input-group .btn,
.client-home-cards .card-body .input-group .input-group-append .btn,
.client-home-cards .card-body .input-group .input-group-btn .btn {
  background: linear-gradient(135deg, #3365F3, #2a58d6) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 10px 18px !important;
  height: 44px !important;
  white-space: nowrap !important;
  transition: all 0.2s !important;
  line-height: 1.4 !important;
  margin-left: 6px !important;
}


.client-home-cards .card-body .input-group .btn:hover {
  background: linear-gradient(135deg, #2a58d6, #1e4cc4) !important;
}

/* ===== TOPBAR (Logged-in user bar) ===== */
.topbar {
  background: #111827 !important;
  border-bottom: none !important;
  padding: 6px 0 !important;
  font-size: 13px !important;
}

.topbar .btn {
  color: #d1d5db !important;
  font-size: 13px !important;
}

.topbar .btn:hover {
  color: #ffffff !important;
}

.topbar .btn-active-client {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.topbar .input-group-text {
  background: transparent !important;
  border: none !important;
  color: #9ca3af !important;
  font-size: 12px !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f5f7fb; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3365F3; }

/* ===== MISC ===== */
.text-primary { color: #3365F3 !important; }
.bg-primary { background: #3365F3 !important; }
hr { border-top-color: #e5e7eb !important; }
.modal-content { border-radius: 12px !important; border: none !important; box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important; }
.modal-header { border-bottom: 1px solid #e5e7eb !important; }
.modal-footer { border-top: 1px solid #e5e7eb !important; }
::selection { background: rgba(51,101,243,0.15); color: #111827; }

/* ===== QIW HOST FOOTER ===== */

/* Hide default WHMCS footer styling */
#footer.footer { display: none !important; }

.qiw-footer {
  margin-top: 0 !important;
}

/* Main footer area */
.qiw-footer-main {
  background: #0c1222 !important;
  padding: 60px 0 40px !important;
}

/* Fix alignment — all footer text left-aligned */
.qiw-footer-main .container,
.qiw-footer-main .row,
.qiw-footer-main .col-lg-3,
.qiw-footer-main .col-md-6 {
  text-align: left !important;
}

/* Footer logo */
.qiw-footer-logo {
  height: 44px !important;
  width: auto !important;
  margin-bottom: 18px !important;
  display: block;
}

/* Footer description */
.qiw-footer-desc {
  color: #8896b0 !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  margin-bottom: 20px !important;
  max-width: 260px;
  text-align: left !important;
}

/* Social icons */
.qiw-footer-social {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}

.qiw-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  color: #8896b0 !important;
  font-size: 14px;
  text-decoration: none !important;
  transition: all 0.2s;
}

.qiw-footer-social a:hover {
  background: #3365F3;
  color: #fff !important;
}

/* Trustpilot badge */
.qiw-trustpilot-btn {
  display: inline-block;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 7px 16px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  text-decoration: none !important;
  transition: all 0.2s;
}

.qiw-trustpilot-btn:hover {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.04);
  color: #fff !important;
}

.qiw-tp-star {
  color: #00b67a;
  font-size: 13px;
  margin: 0 1px;
}

/* Column headings */
.qiw-footer-heading {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  letter-spacing: 0.3px !important;
  text-align: left !important;
}

/* Footer link lists */
.qiw-footer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.qiw-footer-links li {
  margin-bottom: 11px !important;
}

.qiw-footer-links li a {
  color: #8896b0 !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.qiw-footer-links li a i {
  color: #3365F3 !important;
  font-size: 12px !important;
  width: 14px;
  text-align: center;
}

.qiw-footer-links li a:hover {
  color: #ffffff !important;
}

/* Contact list */
.qiw-footer-contact {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.qiw-footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  color: #8896b0 !important;
  font-size: 13.5px !important;
  line-height: 1.6;
}

.qiw-footer-contact li a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8896b0 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.qiw-footer-contact li a:hover {
  color: #ffffff !important;
}

.qiw-footer-contact li > i,
.qiw-footer-contact li a > i {
  color: #3365F3 !important;
  font-size: 14px !important;
  margin-top: 3px;
  min-width: 16px;
}

/* ===== Bottom bar ===== */
.qiw-footer-bottom {
  background: #080e1a !important;
  padding: 16px 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.qiw-footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.qiw-copyright {
  color: #5a6a85 !important;
  font-size: 13px !important;
  margin: 0 !important;
}

/* Payment icons — FontAwesome brand badges */
.qiw-payment-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qiw-pay-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 28px;
  background: rgba(255,255,255,0.07);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.08);
}

.qiw-pay-badge i {
  font-size: 18px !important;
  color: #8896b0 !important;
  line-height: 1;
}

.qiw-pay-badge:hover {
  background: rgba(255,255,255,0.12);
}

.qiw-pay-badge:hover i {
  color: #ffffff !important;
}

/* Trust badges */
.qiw-trust-badges {
  display: flex;
  align-items: center;
  gap: 16px;
}

.qiw-trust-badges span {
  color: #5a6a85 !important;
  font-size: 12px !important;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

.qiw-trust-badges i {
  color: #22c55e !important;
  font-size: 12px !important;
}

/* Footer responsive */
@media (max-width: 991px) {
  .qiw-footer-main .col-lg-3 {
    margin-bottom: 30px !important;
  }
}

@media (max-width: 767px) {
  .qiw-footer-main { padding: 40px 0 20px !important; }
  .qiw-footer-bottom-inner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  .qiw-payment-icons { justify-content: center; }
  .qiw-trust-badges { justify-content: center; }
  .qiw-footer-desc { max-width: 100%; }
}