/**
 * LEZR Theme - Exact design match for lezr2.82w.net
 * Primary: #E5242B (LEZR Red) | Secondary: #1A1A1A (Dark)
 */

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

:root {
  /* LEZR Brand Colors - from lezr2.82w.net */
  --lezr-red: #E5242B;
  --lezr-red-light: #F28A8F;
  --lezr-red-dark: #B41C22;
  --lezr-red-hover: #c91f25;
  --lezr-black: #1A1A1A;
  --lezr-black-dark: #0A0A0A;
  --lezr-foreground: #0D0D0D;
  --lezr-muted: #737373;
  --lezr-border: #E6E6E6;
  --lezr-bg-muted: #F5F5F5;
  --lezr-radius: 0.75rem;
  /* Override Bootstrap/WHMCS primary to LEZR red */
  --primary: #E5242B;
  --primary-rgb: 229, 36, 43;
  /* Theme-aware (light mode) */
  --lezr-surface: #F5F5F5;
  --lezr-surface-elevated: #ffffff;
  --lezr-text-primary: #1A1A1A;
  --lezr-text-secondary: #737373;
  --lezr-shadow: 0 4px 6px -1px rgba(0,0,0,0.06);
  --lezr-shadow-hover: 0 10px 15px -3px rgba(229, 36, 43, 0.08);
}

/* Dark mode */
html[data-theme="dark"] {
  --lezr-surface: #0f0f0f;
  --lezr-surface-elevated: #1a1a1a;
  --lezr-bg-muted: #252525;
  --lezr-border: #3a3a3a;
  --lezr-text-primary: #f0f0f0;
  --lezr-text-secondary: #a0a0a0;
  --lezr-foreground: #e5e5e5;
  --lezr-muted: #a0a0a0;
  --lezr-black: #f0f0f0;
  --lezr-shadow: 0 4px 6px -1px rgba(0,0,0,0.3);
  --lezr-shadow-hover: 0 10px 15px -3px rgba(229, 36, 43, 0.2);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--lezr-surface);
  color: var(--lezr-text-primary);
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Header - LEZR Style */
#header .header {
  background: var(--lezr-surface-elevated) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: background-color 0.25s ease;
}

html[data-theme="dark"] #header .header {
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Dark mode: header – force dark background so menu text is visible */
html[data-theme="dark"] #header .navbar-light,
html[data-theme="dark"] #header .navbar,
html[data-theme="dark"] #mainNavbar.navbar-collapse,
html[data-theme="dark"] #header .main-navbar-wrapper {
  background: #1a1a1a !important;
}

/* Dark mode: header nav – high-contrast text */
html[data-theme="dark"] #header .navbar-light .navbar-brand,
html[data-theme="dark"] #header .navbar-nav .nav-link,
html[data-theme="dark"] #header .navbar-nav > li > a {
  color: #ffffff !important;
  font-weight: 600;
}

html[data-theme="dark"] #header .navbar-nav .dropdown-item {
  color: #e5e5e5 !important;
}

html[data-theme="dark"] #header .navbar-nav .dropdown-menu {
  background: #252525 !important;
}

html[data-theme="dark"] #header .navbar-nav > li > a:hover,
html[data-theme="dark"] #header .navbar-nav .nav-link:hover {
  color: var(--lezr-red-light) !important;
}

html[data-theme="dark"] #header .lezr-lang-links,
html[data-theme="dark"] #header .lezr-lang {
  color: #ffffff !important;
}
html[data-theme="dark"] #header .lezr-lang:hover {
  color: var(--lezr-red-light) !important;
}
html[data-theme="dark"] #header .lezr-lang-active {
  color: var(--lezr-red-light) !important;
}

html[data-theme="dark"] #header .form-control,
html[data-theme="dark"] #header .appended-form-control {
  color: #ffffff !important;
}

html[data-theme="dark"] .master-breadcrumb .breadcrumb-item a {
  color: var(--lezr-red-light) !important;
}

html[data-theme="dark"] .master-breadcrumb .breadcrumb-item.active {
  color: rgba(255,255,255,0.9) !important;
}

#header .topbar {
  background: linear-gradient(135deg, #0a0a0a, #1a1a1a 50%, #0a0a0a) !important;
  color: #fff;
  padding: 0.4rem 0;
}

#header .topbar .btn,
#header .topbar .input-group-text,
#header .topbar a {
  color: rgba(255,255,255,0.9) !important;
}

#header .navbar-light {
  padding: 1rem 0;
  background: var(--lezr-surface-elevated) !important;
  transition: background-color 0.25s ease;
}

#header .navbar-light .navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--lezr-text-primary) !important;
}

#header .navbar-light .logo-img {
  max-height: 45px;
}

/* Ask for Quote / CTA Button - LEZR Red */
.btn-lezr-quote {
  background: var(--lezr-red) !important;
  color: #fff !important;
  border: none;
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  border-radius: var(--lezr-radius);
  transition: all 0.2s ease;
}

.btn-lezr-quote:hover {
  background: var(--lezr-red-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(229, 36, 43, 0.4);
}

/* Navigation Links - LEZR red accent on hover */
#header .navbar-nav .nav-link,
#header .navbar-nav > li > a {
  color: var(--lezr-text-primary) !important;
  font-weight: 500;
  padding: 0.5rem 1rem !important;
  transition: color 0.2s;
  position: relative;
}

#header .navbar-nav > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: var(--lezr-red);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

#header .navbar-nav .nav-link:hover,
#header .navbar-nav > li > a:hover {
  color: var(--lezr-red) !important;
}

#header .navbar-nav > li > a:hover::after {
  transform: scaleX(1);
}

/* Language switcher – LEZR style: inline two languages (e.g. English | العربية) */
.lezr-lang-switcher {
  display: flex;
  align-items: center;
}
.lezr-lang-links {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--lezr-text-primary);
}
.lezr-lang {
  color: inherit;
  text-decoration: none;
  padding: 0.25rem 0.1rem;
  transition: color 0.2s;
  background: none;
  border: none;
  cursor: pointer;
}
.lezr-lang:hover {
  color: var(--lezr-red) !important;
}
.lezr-lang-active {
  font-weight: 600;
  color: var(--lezr-red);
  cursor: default;
}
.lezr-lang-sep {
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
}

/* Header dropdown (Account, etc.) – match reference: white panel, dark text */
#header .navbar-nav .dropdown-menu {
  border: 1px solid var(--lezr-border);
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  border-radius: var(--lezr-radius);
  padding: 0.5rem 0;
  background: #ffffff !important;
  min-width: 11rem;
}

#header .navbar-nav .dropdown-item,
#header .navbar-nav .dropdown-item a {
  color: #1a1a1a !important;
  padding: 0.4rem 1rem;
  font-size: 0.95rem;
}

#header .navbar-nav .dropdown-item:hover,
#header .navbar-nav .dropdown-item a:hover {
  background: rgba(229, 36, 43, 0.08);
  color: var(--lezr-red) !important;
}

#header .navbar-nav .dropdown-divider {
  border-top-color: var(--lezr-border);
  margin: 0.35rem 0;
}

html[data-theme="dark"] #header .navbar-nav .dropdown-menu {
  background: #252525 !important;
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

html[data-theme="dark"] #header .navbar-nav .dropdown-item,
html[data-theme="dark"] #header .navbar-nav .dropdown-item a {
  color: #ffffff !important;
}

html[data-theme="dark"] #header .navbar-nav .dropdown-item:hover,
html[data-theme="dark"] #header .navbar-nav .dropdown-item a:hover {
  background: rgba(229, 36, 43, 0.2);
  color: var(--lezr-red-light) !important;
}

html[data-theme="dark"] #header .navbar-nav .dropdown-divider {
  border-top-color: rgba(255,255,255,0.15);
}

/* Domain Search - Hero Gradient (LEZR exact) */
.home-domain-search.lezr-hero-domain {
  background: linear-gradient(135deg, #e5242b, #f28a8f 50%, #e5242b) !important;
  padding: 3rem 0 !important;
  margin-bottom: 2rem;
}

.home-domain-search.lezr-hero-domain h2 {
  color: #fff !important;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.home-domain-search.lezr-hero-domain .form-control {
  border-radius: var(--lezr-radius);
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
}

.home-domain-search.lezr-hero-domain .btn-primary {
  background: var(--lezr-black) !important;
  border-color: var(--lezr-black) !important;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
}

.home-domain-search.lezr-hero-domain .btn-primary:hover {
  background: #0a0a0a !important;
  border-color: #0a0a0a !important;
}

.home-domain-search.lezr-hero-domain .btn-success {
  background: var(--lezr-red) !important;
  border-color: var(--lezr-red) !important;
}

.home-domain-search.lezr-hero-domain .btn-success:hover {
  background: var(--lezr-red-hover) !important;
  border-color: var(--lezr-red-hover) !important;
}

.home-domain-search.lezr-hero-domain .btn-link {
  color: rgba(255,255,255,0.9) !important;
}

.home-domain-search.lezr-hero-domain .btn-link:hover {
  color: #fff !important;
}

.home-domain-search.lezr-hero-domain .tld-logos li {
  color: rgba(255,255,255,0.9);
}

/* Homepage Cards - LEZR style (red accent on hover) */
.card-columns.home .card {
  border: 1px solid var(--lezr-border);
  border-radius: var(--lezr-radius);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.card-columns.home .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(229, 36, 43, 0.15);
  border-color: var(--lezr-red);
}

.card-columns.home .card-title {
  color: var(--lezr-black);
  font-weight: 700;
}

.card-columns.home .btn-outline-primary {
  border-color: var(--lezr-red);
  color: var(--lezr-red);
  font-weight: 600;
  border-radius: var(--lezr-radius);
}

.card-columns.home .btn-outline-primary:hover {
  background: var(--lezr-red);
  color: #fff;
  border-color: var(--lezr-red);
}

/* Action Icon Buttons - LEZR red accents */
.action-icon-btns .card-accent-teal { border-radius: var(--lezr-radius); }
.action-icon-btns .card-accent-pomegranate { border-radius: var(--lezr-radius); }
.action-icon-btns .card-accent-sun-flower { border-radius: var(--lezr-radius); }
.action-icon-btns .card-accent-asbestos { border-radius: var(--lezr-radius); }
.action-icon-btns .card-accent-green { border-radius: var(--lezr-radius); }
.action-icon-btns .card-accent-midnight-blue { border-radius: var(--lezr-radius); }

.action-icon-btns a {
  transition: all 0.3s ease;
}

.action-icon-btns a:hover {
  transform: translateY(-3px);
}

/* ========== LEZR Footer – light (lezr2.82w.net style) ========== */
#footer.footer.lezr-footer {
  background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 50%, #f5f5f5 100%) !important;
  color: var(--lezr-text-primary, #1a1a1a);
  padding: 0 0 2rem 0;
  margin-top: 3rem;
  position: relative;
  border-top: 1px solid var(--lezr-border);
}

.lezr-footer-accent {
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--lezr-red) 15%, var(--lezr-red-light) 50%, var(--lezr-red) 85%, transparent 100%);
  opacity: 0.95;
}

.lezr-footer-brand {
  padding-top: 0.5rem;
}

.lezr-footer-logo {
  max-height: 42px;
  width: auto;
  opacity: 0.95;
  transition: opacity 0.2s ease;
}

.lezr-footer-logo:hover {
  opacity: 1;
}

.lezr-footer-company {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--lezr-black);
  letter-spacing: -0.02em;
}

.lezr-footer-brand a:hover .lezr-footer-company {
  color: var(--lezr-red) !important;
}

.lezr-footer-heading {
  color: var(--lezr-black) !important;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--lezr-red);
  display: inline-block;
}

.lezr-footer-links li {
  margin-bottom: 0.6rem;
}

.lezr-footer-links a {
  color: var(--lezr-muted);
  font-size: 0.9rem;
  transition: color 0.2s ease, padding-left 0.2s ease;
  display: inline-block;
}

.lezr-footer-links a:hover {
  color: var(--lezr-red) !important;
  padding-left: 4px;
}

.lezr-footer-social .btn-icon {
  color: var(--lezr-muted);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--lezr-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.35rem;
  transition: all 0.2s ease;
}

.lezr-footer-social .btn-icon:hover {
  color: var(--lezr-red) !important;
  border-color: var(--lezr-red);
  background: rgba(229, 36, 43, 0.08);
}

.btn-lezr-footer-outline {
  border: 1px solid var(--lezr-border);
  color: var(--lezr-foreground);
  background: #fff;
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.btn-lezr-footer-outline:hover {
  border-color: var(--lezr-red);
  color: var(--lezr-red);
  background: rgba(229, 36, 43, 0.06);
}

.lezr-footer-bottom {
  padding-top: 1.5rem;
  border-top: 1px solid var(--lezr-border);
  margin-top: 0.5rem;
}

.lezr-footer-bottom .copyright {
  color: var(--lezr-muted);
  font-size: 0.85rem;
}

/* Dark mode: footer – dark background with clear light text */
html[data-theme="dark"] #footer.footer.lezr-footer {
  background: linear-gradient(180deg, #141414 0%, #1a1a1a 50%, #0f0f0f 100%) !important;
  border-top-color: rgba(255,255,255,0.08);
}

html[data-theme="dark"] .lezr-footer-heading {
  color: #ffffff !important;
  border-bottom-color: rgba(229, 36, 43, 0.6);
}

html[data-theme="dark"] .lezr-footer-company {
  color: #ffffff !important;
}

html[data-theme="dark"] .lezr-footer-brand a:hover .lezr-footer-company {
  color: var(--lezr-red-light) !important;
}

html[data-theme="dark"] .lezr-footer-links a {
  color: rgba(255, 255, 255, 0.85) !important;
}

html[data-theme="dark"] .lezr-footer-links a:hover {
  color: var(--lezr-red-light) !important;
}

html[data-theme="dark"] .lezr-footer-social .btn-icon {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.35);
}

html[data-theme="dark"] .lezr-footer-social .btn-icon:hover {
  color: #ffffff !important;
  border-color: var(--lezr-red);
  background: rgba(229, 36, 43, 0.25);
}

html[data-theme="dark"] .btn-lezr-footer-outline {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.95);
  background: transparent;
}

html[data-theme="dark"] .btn-lezr-footer-outline:hover {
  border-color: var(--lezr-red-light);
  color: var(--lezr-red-light);
  background: rgba(229, 36, 43, 0.15);
}

html[data-theme="dark"] .lezr-footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .lezr-footer-bottom .copyright {
  color: rgba(255, 255, 255, 0.6);
}

#footer .nav-link {
  color: var(--lezr-muted) !important;
  padding: 0.25rem 0.5rem;
}

#footer .nav-link:hover {
  color: var(--lezr-red) !important;
}

#footer .btn-icon {
  color: var(--lezr-muted);
}

#footer .btn-icon:hover {
  color: var(--lezr-red);
}

#footer a.text-white-50 {
  color: var(--lezr-muted) !important;
}

#footer a.text-white-50:hover {
  color: var(--lezr-red) !important;
}

/* Section divider - LEZR red gradient line */
.lezr-section-divider {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--lezr-red), var(--lezr-red-light), var(--lezr-red), transparent);
  margin: 2rem 0;
  border: none;
}

.master-breadcrumb {
  background: var(--lezr-bg-muted);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--lezr-border);
}

/* Primary content area */
.primary-bg-color {
  background: var(--lezr-surface);
}

/* Buttons - LEZR Red */
.btn-primary {
  background: var(--lezr-red) !important;
  border-color: var(--lezr-red) !important;
}

.btn-primary:hover {
  background: var(--lezr-red-hover) !important;
  border-color: var(--lezr-red-hover) !important;
  box-shadow: 0 4px 12px rgba(229, 36, 43, 0.35);
}

.btn-outline-primary {
  border-color: var(--lezr-red);
  color: var(--lezr-red);
}

.btn-outline-primary:hover {
  background: var(--lezr-red);
  border-color: var(--lezr-red);
  color: #fff;
}

/* ========== LEZR Cards (lezr2.82w.net) ========== */
.card {
  border-radius: 12px;
  border: 1px solid var(--lezr-border);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.06);
  overflow: hidden;
  transition: all 0.25s ease;
}

.card:hover {
  border-color: rgba(229, 36, 43, 0.35);
  box-shadow: 0 10px 15px -3px rgba(229, 36, 43, 0.08);
}

.card-header {
  background: var(--lezr-bg-muted) !important;
  border-bottom: 1px solid var(--lezr-border) !important;
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: var(--lezr-text-primary);
  border-radius: 12px 12px 0 0;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.card-body {
  padding: 1.25rem 1.5rem;
  background: var(--lezr-surface-elevated);
  color: var(--lezr-text-primary);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.card-footer {
  background: var(--lezr-bg-muted) !important;
  border-top: 1px solid var(--lezr-border) !important;
  padding: 1rem 1.25rem;
  border-radius: 0 0 12px 12px;
}

/* ========== LEZR Tables ========== */
.table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.table thead th {
  background: var(--lezr-black) !important;
  color: #fff !important;
  border: none !important;
  padding: 0.875rem 1rem;
  font-weight: 600;
}

html[data-theme="dark"] .table thead th {
  background: #252525 !important;
  color: var(--lezr-text-primary) !important;
  border-bottom: 1px solid var(--lezr-border) !important;
}

.table td, .table th {
  border-color: var(--lezr-border) !important;
  padding: 0.75rem 1rem;
}

.table tbody tr:hover {
  background: rgba(229, 36, 43, 0.04);
}

.table-striped tbody tr:nth-of-type(odd) {
  background: var(--lezr-surface-elevated);
}

.table-striped tbody tr:nth-of-type(even) {
  background: var(--lezr-bg-muted);
}

html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
  color: var(--lezr-text-primary);
}

html[data-theme="dark"] .table tbody tr:hover {
  background: rgba(229, 36, 43, 0.1);
}

/* ========== LEZR Breadcrumb ========== */
.master-breadcrumb {
  background: linear-gradient(180deg, var(--lezr-surface-elevated) 0%, var(--lezr-bg-muted) 100%);
  padding: 0.875rem 0;
  border-bottom: 2px solid var(--lezr-border);
  transition: background 0.25s ease, border-color 0.25s ease;
}

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

.master-breadcrumb .breadcrumb-item a {
  color: var(--lezr-red);
  font-weight: 500;
}

.master-breadcrumb .breadcrumb-item a:hover {
  color: var(--lezr-red-dark);
}

.master-breadcrumb .breadcrumb-item.active {
  color: var(--lezr-muted);
}

.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--lezr-muted);
}

/* ========== LEZR Forms & Inputs ========== */
.form-control {
  border: 1px solid var(--lezr-border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--lezr-surface-elevated);
  color: var(--lezr-text-primary);
}

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

.form-control:focus {
  border-color: var(--lezr-red);
  box-shadow: 0 0 0 3px rgba(229, 36, 43, 0.15);
  outline: 0;
}

.custom-select, select.form-control {
  border-radius: 8px;
  border-color: var(--lezr-border);
}

.custom-select:focus, select.form-control:focus {
  border-color: var(--lezr-red);
}

.input-group .form-control:focus {
  z-index: 1;
}

/* ========== LEZR List groups & panels ========== */
.list-group-item {
  border-color: var(--lezr-border);
  padding: 0.75rem 1rem;
}

.list-group-item.active {
  background: rgba(229, 36, 43, 0.12) !important;
  border-color: var(--lezr-red);
  color: var(--lezr-red);
}

.list-group-item:hover:not(.active) {
  background: var(--lezr-bg-muted);
}

.panel, .panel-default {
  border-radius: 12px;
  border: 1px solid var(--lezr-border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.panel-heading {
  background: var(--lezr-bg-muted) !important;
  border-bottom: 1px solid var(--lezr-border);
  padding: 1rem 1.25rem;
  border-radius: 12px 12px 0 0;
}

.panel-body {
  padding: 1.25rem;
}

/* ========== LEZR Alerts ========== */
.alert {
  border-radius: 10px;
  border: 1px solid transparent;
}

.alert-danger {
  background: rgba(229, 36, 43, 0.08);
  border-color: rgba(229, 36, 43, 0.3);
  color: var(--lezr-red-dark);
}

.alert-success {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
}

.alert-info {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.3);
}

.alert-warning {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
}

/* ========== LEZR Rows & spacing ========== */
.primary-content .row {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.primary-content .row > [class*="col-"] {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* Badge */
.badge-info, .badge-primary {
  background: var(--lezr-red) !important;
}

/* Sidebar */
.sidebar .card {
  border-radius: 12px;
}

/* Cart button */
.cart-btn .badge {
  background: var(--lezr-red) !important;
}

/* ========== LEZR Page Hero (About-style sections) ========== */
.lezr-page-hero {
  background: linear-gradient(135deg, rgba(229, 36, 43, 0.06) 0%, rgba(242, 138, 143, 0.08) 50%, rgba(229, 36, 43, 0.06) 100%);
  border: 1px solid rgba(229, 36, 43, 0.12);
  border-radius: var(--lezr-radius);
  padding: 1.75rem 1.5rem;
  margin-bottom: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: background 0.25s ease, border-color 0.25s ease;
}

html[data-theme="dark"] .lezr-page-hero {
  background: linear-gradient(135deg, rgba(229, 36, 43, 0.12) 0%, rgba(242, 138, 143, 0.08) 50%, rgba(229, 36, 43, 0.12) 100%);
  border-color: rgba(229, 36, 43, 0.25);
}

.lezr-page-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--lezr-red), var(--lezr-red-light), var(--lezr-red), transparent);
  opacity: 0.9;
}

.lezr-page-hero h1,
.lezr-page-hero .lezr-hero-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--lezr-text-primary);
  margin: 0 0 0.35rem 0;
  letter-spacing: -0.02em;
}

.lezr-page-hero p,
.lezr-page-hero .lezr-hero-subtitle {
  color: var(--lezr-text-secondary);
  margin: 0;
  font-size: 1rem;
}

/* ========== LEZR Contact / Submit Ticket Form (Contact-style) ========== */
.lezr-contact-form .card {
  border-radius: var(--lezr-radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}

.lezr-contact-form .card-title {
  color: var(--lezr-text-primary);
  font-weight: 700;
  font-size: 1.35rem;
}

.lezr-contact-form .form-group label {
  font-weight: 500;
  color: var(--lezr-text-primary);
}

.lezr-contact-form .btn-primary {
  padding: 0.65rem 1.75rem;
  font-weight: 600;
  border-radius: var(--lezr-radius);
  min-width: 140px;
}

.lezr-contact-form .form-control:focus {
  border-color: var(--lezr-red);
  box-shadow: 0 0 0 3px rgba(229, 36, 43, 0.15);
}

/* Two-column contact layout (optional) */
.lezr-contact-form.lezr-two-col .form-row .form-group {
  margin-bottom: 1rem;
}

/* ========== LEZR Client Area Tiles (dashboard) ========== */
.tiles.tiles-lezr .tile {
  border-radius: var(--lezr-radius);
  border: 1px solid var(--lezr-border);
  transition: all 0.25s ease;
  overflow: hidden;
}

.tiles.tiles-lezr .tile:hover {
  border-color: var(--lezr-red);
  box-shadow: 0 8px 20px rgba(229, 36, 43, 0.12);
  transform: translateY(-2px);
}

.tiles.tiles-lezr .tile .highlight.bg-color-blue,
.tiles.tiles-lezr .tile .highlight.bg-color-red {
  background: var(--lezr-red) !important;
}

.tiles.tiles-lezr .tile .highlight.bg-color-green {
  background: var(--lezr-black) !important;
}

.tiles.tiles-lezr .tile .highlight.bg-color-gold {
  background: var(--lezr-red-dark) !important;
}

/* ========== LEZR Affiliates stats ========== */
.affiliate-stat {
  border-radius: var(--lezr-radius);
  border: 1px solid var(--lezr-border);
  padding: 1.25rem;
  font-weight: 600;
  transition: all 0.25s ease;
}

.affiliate-stat:hover {
  border-color: rgba(229, 36, 43, 0.4);
  box-shadow: 0 4px 12px rgba(229, 36, 43, 0.08);
}

.affiliate-stat.alert-warning {
  background: rgba(245, 158, 11, 0.06) !important;
  border-color: rgba(245, 158, 11, 0.25);
}

.affiliate-stat.alert-info {
  background: rgba(59, 130, 246, 0.06) !important;
  border-color: rgba(59, 130, 246, 0.25);
}

.affiliate-stat.alert-success {
  background: rgba(16, 185, 129, 0.06) !important;
  border-color: rgba(16, 185, 129, 0.25);
}

.lezr-page-hero + .card .card-body input[readonly] {
  background: var(--lezr-bg-muted);
  border-color: var(--lezr-border);
  border-radius: 8px;
}

/* ========== LEZR Table container spacing ========== */
.primary-content .table-container {
  margin-top: 0.5rem;
}

/* ========== LEZR Knowledge base categories ========== */
.kb-category.card {
  transition: all 0.25s ease;
}

.kb-category.card:hover {
  border-color: var(--lezr-red);
  box-shadow: 0 8px 20px rgba(229, 36, 43, 0.1);
}

.kb-category .badge-info {
  background: var(--lezr-red) !important;
}

/* ========== LEZR Announcements ========== */
.announcements .announcement {
  border-radius: var(--lezr-radius);
  border: 1px solid var(--lezr-border);
  padding: 1.25rem;
  margin-bottom: 1rem;
  transition: all 0.25s ease;
}

.announcements .announcement:hover {
  border-color: rgba(229, 36, 43, 0.3);
  box-shadow: 0 4px 12px rgba(229, 36, 43, 0.06);
}

.announcements .announcement h1 a {
  color: var(--lezr-text-primary);
  font-weight: 700;
}

.announcements .announcement h1 a:hover {
  color: var(--lezr-red);
}

.announcements .announcement .btn-default:hover {
  background: var(--lezr-red);
  border-color: var(--lezr-red);
  color: #fff;
}

/* ========== LEZR Submit ticket step one (department list) ========== */
.lezr-contact-form .list-departments a {
  color: var(--lezr-text-primary);
  font-weight: 500;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  display: block;
  transition: all 0.2s;
}

.lezr-contact-form .list-departments a:hover {
  background: rgba(229, 36, 43, 0.08);
  color: var(--lezr-red);
}

/* ========== Status labels ========== */
.label.status {
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  font-weight: 500;
}

/* ========== Pagination LEZR ========== */
.pagination .page-link {
  border-color: var(--lezr-border);
  color: var(--lezr-text-primary);
  background: var(--lezr-surface-elevated);
}

html[data-theme="dark"] .pagination .page-link:hover {
  background: rgba(229, 36, 43, 0.15);
}

.pagination .page-item.active .page-link {
  background: var(--lezr-red);
  border-color: var(--lezr-red);
}

.pagination .page-link:hover {
  background: rgba(229, 36, 43, 0.08);
  border-color: var(--lezr-red);
  color: var(--lezr-red);
}

/* ========== Dark mode: global text & inputs ========== */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .breadcrumb-item.active {
  color: var(--lezr-text-secondary) !important;
}

html[data-theme="dark"] .list-group-item {
  background: var(--lezr-surface-elevated);
  color: var(--lezr-text-primary);
  border-color: var(--lezr-border);
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-default {
  background: var(--lezr-surface-elevated);
  border-color: var(--lezr-border);
}

html[data-theme="dark"] .panel-heading {
  background: var(--lezr-bg-muted) !important;
  border-color: var(--lezr-border);
  color: var(--lezr-text-primary);
}

html[data-theme="dark"] .panel-body {
  background: var(--lezr-surface-elevated);
  color: var(--lezr-text-primary);
}

html[data-theme="dark"] #header .form-control,
html[data-theme="dark"] #header .appended-form-control {
  background: var(--lezr-bg-muted);
  border-color: var(--lezr-border);
  color: var(--lezr-text-primary);
}

html[data-theme="dark"] .modal-content {
  background: var(--lezr-surface-elevated);
  border-color: var(--lezr-border);
}

html[data-theme="dark"] .modal-header {
  background: var(--lezr-bg-muted);
  border-bottom-color: var(--lezr-border);
  color: var(--lezr-text-primary);
}

html[data-theme="dark"] .modal-body {
  background: var(--lezr-surface-elevated);
  color: var(--lezr-text-primary);
}

html[data-theme="dark"] .modal-footer {
  background: var(--lezr-bg-muted);
  border-top-color: var(--lezr-border);
}

html[data-theme="dark"] .sidebar .card {
  background: var(--lezr-surface-elevated);
  border-color: var(--lezr-border);
}

html[data-theme="dark"] .sidebar .card-body,
html[data-theme="dark"] .sidebar .list-group-item a {
  color: var(--lezr-text-primary);
}

html[data-theme="dark"] .primary-content,
html[data-theme="dark"] .primary-content h1,
html[data-theme="dark"] .primary-content h2,
html[data-theme="dark"] .primary-content h3,
html[data-theme="dark"] .primary-content h4,
html[data-theme="dark"] .primary-content h5,
html[data-theme="dark"] .primary-content h6 {
  color: var(--lezr-text-primary);
}

/* Theme toggle button */
.btn-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: var(--lezr-radius);
  border: 1px solid var(--lezr-border);
  background: var(--lezr-surface-elevated);
  color: var(--lezr-text-primary);
  transition: all 0.2s ease;
}

.btn-theme-toggle:hover {
  border-color: var(--lezr-red);
  color: var(--lezr-red);
  background: rgba(229, 36, 43, 0.06);
}

/* Light mode: show moon (click to switch to dark) */
.btn-theme-toggle .icon-sun {
  display: none;
}

.btn-theme-toggle .icon-moon {
  display: inline-block;
}

/* Dark mode: show sun (click to switch to light) */
html[data-theme="dark"] .btn-theme-toggle .icon-moon {
  display: none;
}

html[data-theme="dark"] .btn-theme-toggle .icon-sun {
  display: inline-block;
}

/* Dark mode: page title (h1) – ensure readable light color */
html[data-theme="dark"] .lezr-page-title,
html[data-theme="dark"] .lezr-page-hero h1,
html[data-theme="dark"] .lezr-page-hero .lezr-hero-title {
  color: #ffffff !important;
}

/* Card minimise / panel minimise button – clickable and visible */
.card-minimise,
.panel-minimise {
  cursor: pointer;
  pointer-events: auto;
  opacity: 0.9;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.card-minimise:hover,
.panel-minimise:hover {
  opacity: 1;
}

.card-minimise.minimised,
.panel-minimise.minimised {
  transform: rotate(180deg);
}

#order-lezr .card-minimise,
#order-lezr .panel-minimise {
  cursor: pointer;
}

/* ========== RTL (Arabic / العربية) ========== */
html[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] body {
  text-align: right;
}

/* Header RTL: flip toolbar and nav */
html[dir="rtl"] #header .navbar .container .d-flex,
html[dir="rtl"] #header .navbar .container {
  flex-direction: row-reverse;
}

html[dir="rtl"] #header .navbar-brand {
  margin-right: 0;
  margin-left: 1rem;
}

html[dir="rtl"] #header .navbar-nav.toolbar {
  flex-direction: row-reverse;
}

html[dir="rtl"] #header .main-navbar-wrapper .navbar-collapse .navbar-nav.mr-auto {
  margin-right: 0;
  margin-left: auto;
}

html[dir="rtl"] #header .main-navbar-wrapper .navbar-collapse .navbar-nav.ml-auto {
  margin-left: 0;
  margin-right: auto;
}

html[dir="rtl"] #header .navbar-nav > li > a::after {
  left: auto;
  right: 1rem;
}

/* RTL: margin utilities used in header/toolbar */
html[dir="rtl"] .nav-item.ml-2,
html[dir="rtl"] .nav-item.ml-md-3,
html[dir="rtl"] .nav-item.ml-3 {
  margin-left: 0 !important;
  margin-right: 0.5rem;
}
html[dir="rtl"] .nav-item.ml-3 {
  margin-right: 1rem;
}

/* Dropdown positioning RTL */
html[dir="rtl"] #header .dropdown-menu-right {
  right: auto;
  left: 0;
}

html[dir="rtl"] #header .dropdown-menu {
  left: 0;
  right: auto;
  text-align: right;
}

/* Footer RTL */
html[dir="rtl"] .lezr-footer-columns.row {
  direction: rtl;
}

html[dir="rtl"] .lezr-footer-links,
html[dir="rtl"] .lezr-footer-heading {
  text-align: right;
}

/* Breadcrumb RTL */
html[dir="rtl"] .master-breadcrumb .breadcrumb {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

/* Sidebar and content RTL */
html[dir="rtl"] .sidebar .list-group-item,
html[dir="rtl"] .primary-content {
  text-align: right;
}

/* Forms: labels and inputs RTL */
html[dir="rtl"] .form-group label,
html[dir="rtl"] .form-control {
  text-align: right;
}

html[dir="rtl"] .input-group .form-control {
  border-radius: 0;
}
html[dir="rtl"] .input-group .input-group-prepend:first-child .btn,
html[dir="rtl"] .input-group .input-group-prepend:first-child .input-group-text {
  border-radius: 0 var(--lezr-radius) var(--lezr-radius) 0;
}
html[dir="rtl"] .input-group .input-group-append:last-child .btn,
html[dir="rtl"] .input-group .input-group-append:last-child .input-group-text {
  border-radius: var(--lezr-radius) 0 0 var(--lezr-radius);
}

/* Cards and panels RTL */
html[dir="rtl"] .card-header,
html[dir="rtl"] .list-group-item {
  text-align: right;
}

/* Client area dashboard tiles: icon on the left in RTL (Arabic) */
html[dir="rtl"] .tiles .tile i,
html[dir="rtl"] .tiles.tiles-lezr .tile i {
  right: auto;
  left: 20px;
}

html[dir="rtl"] .pull-right,
html[dir="rtl"] .float-right {
  float: left !important;
}

html[dir="rtl"] .pull-left,
html[dir="rtl"] .float-left {
  float: right !important;
}

/* Language switcher separator order in RTL */
html[dir="rtl"] .lezr-lang-links {
  flex-direction: row-reverse;
}