/**
 * Moatamad brand theme — public website only
 * Palette extracted from official brand identity
 */
:root {
  --moatamad-deep-navy: #141f35;
  --moatamad-mountain-blue: #243552;
  --moatamad-slate-blue: #3b4e6d;
  --moatamad-misty-gray: #464f61;
  --moatamad-white: #ffffff;

  --moatamad-bg-light: #eef1f6;
  --moatamad-bg-soft: #e8ecf2;
  --moatamad-text: #464f61;
  --moatamad-text-dark: #141f35;
  --moatamad-border: rgba(36, 53, 82, 0.24);
  --moatamad-border-strong: rgba(20, 31, 53, 0.29);

  --moatamad-accent: var(--moatamad-slate-blue);
  --moatamad-accent-hover: var(--moatamad-mountain-blue);
  --moatamad-accent-dark: var(--moatamad-deep-navy);

  --moatamad-gradient: linear-gradient(180deg, #3b4e6d 0%, #243552 100%);
  --moatamad-gradient-diagonal: linear-gradient(260deg, #3b4e6d 0%, #243552 100%);
  --moatamad-gradient-hero: linear-gradient(180deg, #464f61 0%, #3b4e6d 22%, #243552 58%, #141f35 100%);
  --moatamad-gradient-banner: linear-gradient(135deg, #141f35 0%, #243552 55%, #464f61 100%);

  --moatamad-shadow: 0 4px 24px rgba(20, 31, 53, 0.12);
  --moatamad-shadow-nav: 0 2px 20px rgba(20, 31, 53, 0.25);
}

/* ── Navbar (dark) ── */
.moatamad-navbar,
.navbar-header .navbar {
  background-color: var(--moatamad-deep-navy) !important;
  box-shadow: var(--moatamad-shadow-nav);
}

.moatamad-navbar .nav-link,
.navbar-header .navbar-nav li a {
  color: rgba(255, 255, 255, 0.88) !important;
  font-weight: 600;
}

.moatamad-navbar .nav-link:hover,
.moatamad-navbar .nav-link:focus,
.navbar-header .navbar-nav li a:hover,
.navbar-header .navbar-nav li a.active {
  color: var(--moatamad-white) !important;
}

.moatamad-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.45);
  padding: 6px 10px;
}

.moatamad-navbar .navbar-toggler:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

/* Force a clearly visible WHITE hamburger on the dark navbar
   (navbar-dark already ships a light icon; the previous invert() turned it black) */
.moatamad-navbar .navbar-toggler-icon {
  filter: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.moatamad-nav-spacer {
  height: 80px;
  background: var(--moatamad-deep-navy);
}

/* ── Logo lockup ── */
.moatamad-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
}

.moatamad-logo .logo-emblem {
  width: auto;
  height: 44px;
  max-width: none;
}

.moatamad-logo img {
  width: 180px;
  height: 28px;
  max-width: none !important;
}

.navbar-header .la-bars {
  color: var(--moatamad-white) !important;
}


@media (max-width: 575.98px) {
  .moatamad-logo .logo-wordmark {
    height: 22px;
  }

  .moatamad-logo .logo-emblem {
    height: 36px;
  }
}

/* ── Shared buttons ── */
.register-btn,
.second-register-btn,
.button-footer,
.btn-orange,
.site-btn-primary {
  background: var(--moatamad-gradient-diagonal) !important;
  border: none !important;
  color: var(--moatamad-white) !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.register-btn:hover,
.second-register-btn:hover,
.button-footer:hover,
.site-btn-primary:hover {
  opacity: 0.92;
  color: var(--moatamad-white) !important;
}

.register-btn:focus,
.second-register-btn:focus,
.button-footer:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--moatamad-slate-blue) !important;
}

.btn-primary {
  background: var(--moatamad-gradient-diagonal) !important;
  border-color: transparent !important;
  color: var(--moatamad-white) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--moatamad-gradient) !important;
  border-color: transparent !important;
  color: var(--moatamad-white) !important;
}

.btn-border {
  color: var(--moatamad-slate-blue) !important;
  border-color: var(--moatamad-slate-blue) !important;
}

.btn-border:hover,
.btn-border:focus {
  background-color: var(--moatamad-slate-blue) !important;
  border-color: var(--moatamad-slate-blue) !important;
  color: var(--moatamad-white) !important;
}

.account-user-name {
  color: rgba(255, 255, 255, 0.9) !important;
}

.moatamad-navbar .dropdown-menu {
  border: 1px solid var(--moatamad-border);
  box-shadow: var(--moatamad-shadow);
}

.navbar-header .navbar-nav li a {
  color: rgba(255, 255, 255, 0.88) !important;
}

.navbar-header .navbar-nav li a:hover,
.navbar-header .navbar-nav li a.active {
  color: var(--moatamad-white) !important;
}

.navbar-header .account-position,
.navbar-header .account-user-name {
  color: rgba(255, 255, 255, 0.9) !important;
}

header .navbar.sticky {
  background-color: var(--moatamad-deep-navy) !important;
}

.navbar-header .navbar-toggler {
  color: var(--moatamad-white);
}

.navbar-header .navbar-toggler i {
  color: var(--moatamad-white);
}

.login-block .nav-tabs .nav-link.active,
.login-block .nav-tabs .nav-link:hover {
  color: var(--moatamad-slate-blue) !important;
  border-bottom-color: var(--moatamad-slate-blue) !important;
}

.login-block .nav-tabs .nav-link {
  color: var(--moatamad-deep-navy) !important;
}

.login-form a {
  color: var(--moatamad-slate-blue) !important;
}

.orange-line,
.orange-header,
.orange-text {
  color: var(--moatamad-slate-blue) !important;
}

.orange-line {
  background-color: var(--moatamad-slate-blue) !important;
}

.orange-header {
  color: var(--moatamad-deep-navy) !important;
}

/* Scroll-to-top button (jquery.scrollUp) */
#scrollUp {
  background: var(--moatamad-gradient-diagonal) !important;
  border-radius: 8px !important;
  color: var(--moatamad-white) !important;
}

#scrollUp:hover {
  opacity: 0.92;
}

/* Footer scroll button uses scroll.svg — ensure sizing */
#scroll-img {
  width: 54px;
  height: 54px;
  max-width: none;
}

/* Wizard sidebar step nav */
.step-nav-block {
  background-color: var(--moatamad-deep-navy) !important;
}

.step-nav-block ul li.active:after {
  box-shadow: 0 5px 15px rgba(20, 31, 53, 0.25);
}

/* Tab wizard (login / forms) */
.tabs-page li a.active::after {
  border-top-color: var(--moatamad-slate-blue) !important;
}

.tabs-page li:not(.active)::before {
  background: rgba(59, 78, 109, 0.21) !important;
}

/* Horizontal stepper (demande examen wizard) */
.stepper-container {
  align-items: flex-start !important;
}

.stepper-item::before {
  top: 19px !important;
  right: 50% !important;
  left: -50% !important;
  width: auto !important;
}

.stepper-item.active .stepper-circle {
  background: var(--moatamad-gradient-diagonal) !important;
  color: var(--moatamad-white) !important;
  border-color: transparent !important;
}

.stepper-item.completed .stepper-circle {
  background: var(--moatamad-misty-gray) !important;
  color: var(--moatamad-white) !important;
  border-color: transparent !important;
}

.stepper-item.active::before,
.stepper-item.completed::before {
  background: var(--moatamad-gradient-diagonal) !important;
}

.stepper-item.active .stepper-label {
  color: var(--moatamad-slate-blue) !important;
}

.stepper-label {
  color: var(--moatamad-misty-gray) !important;
}

/* Client account sidebar */
.nav-profile {
  background-color: var(--moatamad-bg-light) !important;
  border-color: rgba(59, 78, 109, 0.2) !important;
}

.nav-profile i {
  background-color: var(--moatamad-bg-soft) !important;
  color: var(--moatamad-slate-blue) !important;
}

.nav-profile-item a {
  color: var(--moatamad-deep-navy) !important;
}

.nav-profile-item a.active,
.nav-profile-item a:hover {
  color: var(--moatamad-slate-blue) !important;
}

.nav-profile-item a.active i,
.nav-profile-item a:hover i {
  background-color: var(--moatamad-deep-navy) !important;
  color: var(--moatamad-white) !important;
}

.btn-orange {
  background: var(--moatamad-gradient-diagonal) !important;
  border-color: transparent !important;
  color: var(--moatamad-white) !important;
}

.btn-orange:hover,
.btn-orange:focus {
  opacity: 0.92;
  color: var(--moatamad-white) !important;
}

/* ===== Global: prevent horizontal page scroll (applies to every layout) ===== */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Long account names must not widen the navbar / page */
.navbar-header .nav-user,
.navbar .nav-user {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.navbar-header .nav-user > span,
.navbar .nav-user > span {
  min-width: 0;
  overflow: hidden;
}
.account-user-name {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
@media (max-width: 991.98px) {
  .account-user-name {
    max-width: 130px;
  }
}