/* =========================================================
   HOOSHLINK SCHOOL — CUSTOM THEME (built on top of Bootstrap 5 RTL)
   ========================================================= */

/* ---------- 1. Design tokens (mapped onto Bootstrap CSS vars) ---------- */
@font-face {
  font-display: swap;
  font-family:Modam;

  src: local('?'), url('../../front/fonts/ModamVF.woff2');
}
:root{
  --brand-50:  #f0fdf4;
  --brand-100: #dcfce7;
  --brand-500: #10b981;
  --brand-600: #059669;
  --brand-700: #047857;
  --brand-deep:#0f2c25;
  --accent-orange:#ff6b6b;
  --accent-yellow:#ffbe0b;
  --accent-purple:#8338ec;

  --bs-body-font-family:'Modam', sans-serif;
  --bs-primary:#10b981;
  --bs-primary-rgb:16,185,129;
  --bs-link-color:#059669;
  --bs-link-hover-color:#047857;
  --bs-border-radius:1rem;
  --bs-border-radius-lg:1.5rem;
  --bs-border-radius-sm:.6rem;
}

body{
  font-family:Modam;
  background-color:#f8fafc;
  overflow-x:hidden;
  color:#334155;
}
h1,h2,h3,h4,h5,h6{ letter-spacing:-.01em; }

::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-track{ background:#f1f5f9; }
::-webkit-scrollbar-thumb{ background:var(--brand-500); border-radius:10px; }

a{ text-decoration:none; }
.section-pad{ padding-top:4.5rem; padding-bottom:4.5rem; }
section[id]{ scroll-margin-top:100px; }

/* ---------- 2. Bootstrap component re-theming ---------- */
.btn-primary{
  --bs-btn-bg:var(--brand-500); --bs-btn-border-color:var(--brand-500);
  --bs-btn-hover-bg:var(--brand-600); --bs-btn-hover-border-color:var(--brand-600);
  --bs-btn-active-bg:var(--brand-700); --bs-btn-active-border-color:var(--brand-700);
  --bs-btn-focus-shadow-rgb:16,185,129;
  font-weight:600; border-radius:.9rem;
}
.form-select {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: left .75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btn-outline-primary{
  --bs-btn-color:var(--brand-600); --bs-btn-border-color:var(--brand-500);
  --bs-btn-hover-bg:var(--brand-500); --bs-btn-hover-border-color:var(--brand-500);
  border-radius:.9rem; font-weight:600;
}
.btn-light-soft{ background:#fff; border:1px solid #e2e8f0; color:#334155; font-weight:600; border-radius:.9rem; }
.btn-light-soft:hover{ box-shadow:0 .5rem 1rem -.5rem rgba(15,23,42,.15); }
.btn{ border-radius:.9rem; }
.btn-sm-pill{ border-radius:50rem; }

.text-brand{ color:var(--brand-600) !important; }
.text-brand-deep{ color:var(--brand-deep) !important; }
.bg-brand{ background-color:var(--brand-500) !important; }
.bg-brand-50{ background-color:var(--brand-50) !important; }
.bg-brand-deep{ background-color:var(--brand-deep) !important; }
.text-accent-purple{ color:var(--accent-purple) !important; }
.text-accent-orange{ color:var(--accent-orange) !important; }
.bg-purple-subtle-custom{ background-color:#f3ecff !important; }
.bg-orange-subtle-custom{ background-color:#fff1ee !important; }
.bg-amber-subtle-custom{ background-color:#fff8e6 !important; }

.navbar-nav .nav-link{ font-weight:600; font-size:.925rem; color:#475569; border-radius:.8rem; padding:.6rem 1rem; transition:all .2s; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active{ color:var(--brand-600); background:var(--brand-50); }
.dropdown-menu{ border:1px solid #f1f5f9; border-radius:1.1rem; box-shadow:0 1.5rem 3rem -1.5rem rgba(15,23,42,.25); padding:.5rem; }
.dropdown-item{ border-radius:.7rem; font-size:.875rem; padding:.6rem .9rem; display:flex; align-items:center; justify-content:space-between; }
.dropdown-item:hover, .dropdown-item:focus{ background:var(--brand-50); color:var(--brand-600); }
.dropdown-header{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:#94a3b8; font-weight:700; }

/* dropdown-on-hover for desktop nav */
@media (min-width:992px){
  .nav-item.dropdown:hover > .dropdown-menu{ display:block; margin-top:0; animation:fadeSlide .2s ease; }
}
@keyframes fadeSlide{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

.form-control, .form-select{ border-radius:.9rem; border-color:#e2e8f0; padding:.75rem 1rem; font-size:.875rem; }
.form-control:focus, .form-select:focus{ border-color:var(--brand-500); box-shadow:0 0 0 .2rem rgba(16,185,129,.15); }
.form-label{ font-size:.8rem; font-weight:600; color:#475569; }

.card{ border-radius:1.5rem; }
.accordion-button{ font-weight:600; font-size:.9rem; border-radius:.9rem !important; }
.accordion-button:not(.collapsed){ background:var(--brand-50); color:var(--brand-600); box-shadow:none; }
.accordion-button:focus{ box-shadow:0 0 0 .2rem rgba(16,185,129,.15); }
.accordion-item{ border:none; margin-bottom:.4rem; }
.accordion-body{ padding-top:.25rem; }

/* ---------- 3. Hello bar ---------- */
.hello-bar{
  background:linear-gradient(90deg,var(--brand-700),var(--brand-600),var(--brand-500));
  color:#fff; font-size:.8rem; font-weight:500;
}
.hello-bar .badge-new{ background:rgba(255,255,255,.2); font-size:.65rem; padding:.25rem .55rem; }
.hello-bar a{ color:#fff; text-decoration:underline; }
.hello-bar .btn-close-hello{ color:rgba(255,255,255,.85); font-size:1.1rem; background:none; border:none; }
.hello-bar .btn-close-hello:hover{ color:#fff; }

/* ---------- 4. Header ---------- */
.site-header{
  background:rgba(255,255,255,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid #f1f5f9; transition:box-shadow .3s;
}
.site-header.scrolled{ box-shadow:0 .5rem 1.5rem -1rem rgba(15,23,42,.12); }
.brand-mark{ width:44px; height:44px; border-radius:1rem; background:var(--brand-500); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.25rem; box-shadow:0 .4rem .8rem -.3rem rgba(16,185,129,.3); flex:none; }
.brand-title{ font-weight:900; font-size:1.05rem; color:var(--brand-deep); line-height:1.1; }
.brand-sub{ font-size:.62rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.08em; }
.navbar-toggler-custom{ width:44px; height:44px; border-radius:.8rem; background:#f1f5f9; border:none; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:#334155; }

/* Offcanvas mobile menu */
.offcanvas{
  width:320px !important; max-width:85vw;
  z-index:1050 !important;         /* must sit above the backdrop (1040) */
  background-color:#fff !important;
}
.offcanvas-backdrop{ z-index:1040 !important; }
/* RTL fix: "start" = right edge in dir="rtl", so force it explicitly
   instead of relying on the bootstrap build to flip left/right */
body .offcanvas.offcanvas-start{
  right:0 !important; left:auto !important;
  transform:translateX(100%) !important;
}
body .offcanvas.offcanvas-start.show,
body .offcanvas.offcanvas-start.showing{
  transform:translateX(0) !important;
}
.offcanvas-header{ border-bottom:1px solid #f1f5f9; }
.mobile-nav-link{ display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem; border-radius:.9rem; font-weight:600; font-size:.9rem; color:#475569; }
.mobile-nav-link:hover, .mobile-nav-link.active{ background:var(--brand-50); color:var(--brand-600); }
.mobile-nav-link i{ font-size:1.1rem; color:#94a3b8; width:22px; text-align:center; }
.mobile-nav-link.active i{ color:var(--brand-500); }

/* ---------- 5. Hero carousel ---------- */
.hero-carousel{ height:64vh; min-height:420px; max-height:640px; }
.hero-carousel .carousel-item{ height:64vh; min-height:420px; max-height:640px; }
.hero-slide-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(2,6,23,.92) 0%, rgba(2,6,23,.55) 55%, transparent 100%); }
.hero-content{ position:relative; z-index:2; height:100%; display:flex; align-items:center; }
.hero-badge{ background:rgba(16,185,129,.18); border:1px solid rgba(16,185,129,.35); color:#d1fae5; font-size:.75rem; font-weight:700; padding:.4rem .9rem; border-radius:50rem; backdrop-filter:blur(4px); }
.hero-title{ font-weight:900; color:#fff; line-height:1.35; font-size:clamp(1.7rem,4vw,3.2rem); }
.hero-title .accent{ color:var(--brand-500); }
.hero-text{ color:#cbd5e1; font-weight:300; font-size:clamp(.85rem,1.4vw,1rem); max-width:36rem; }
.hero-carousel .carousel-control-prev, .hero-carousel .carousel-control-next{ width:3rem; height:3rem; top:50%; bottom:auto; transform:translateY(-50%); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:50%; opacity:1; }
.hero-carousel .carousel-control-prev{ right:1.25rem; left:auto; }
.hero-carousel .carousel-control-next{ left:1.25rem; right:auto; }
.hero-carousel .carousel-indicators{ bottom:1.25rem; }
.hero-carousel .carousel-indicators [data-bs-target]{ width:.55rem; height:.55rem; border-radius:50%; background:rgba(255,255,255,.4); border:none; }
.hero-carousel .carousel-indicators .active{ width:1.75rem; border-radius:50rem; background:#fff; }

/* ---------- 6. Section headers ---------- */
.eyebrow{ color:var(--brand-600); font-size:.8rem; font-weight:700; letter-spacing:.05em; }
.section-title{ font-weight:800; color:var(--brand-deep); }
.title-underline{ width:64px; height:4px; background:var(--brand-500); border-radius:50rem; margin:.6rem auto 0; }

/* ---------- 7. Department cards ---------- */
.dept-card{ background:#fff; border:1px solid #f1f5f9; border-radius:1.75rem; padding:2rem; position:relative; overflow:hidden; transition:all .3s; }
.dept-card:hover{ transform:translateY(-6px); box-shadow:0 1.5rem 3rem -1.5rem rgba(15,23,42,.2); }
.dept-card::before{ content:''; position:absolute; top:0; right:0; width:6.5rem; height:6.5rem; border-radius:0 0 0 100%; opacity:.7; z-index:0; }
.dept-card.dept-green::before{ background:var(--brand-50); }
.dept-card.dept-purple::before{ background:#f3ecff; }
.dept-card.dept-orange::before{ background:#fff1ee; }
.dept-icon{ width:3.2rem; height:3.2rem; border-radius:1rem; display:flex; align-items:center; justify-content:center; font-size:1.4rem; position:relative; z-index:1; margin-bottom:1.25rem; }
.dept-card ul li{ font-size:.8rem; color:#475569; }

/* ---------- 8. Campus split ---------- */
.campus-card{ background:#fff; border:1px solid #f1f5f9; border-radius:1.75rem; overflow:hidden; box-shadow:0 .3rem 1rem -.6rem rgba(15,23,42,.08); }
.campus-img-wrap{ position:relative; overflow:hidden; min-height:220px; }
.campus-img-wrap img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.campus-card:hover .campus-img-wrap img{ transform:scale(1.06); }
.campus-tag{ position:absolute; top:1rem; right:1rem; font-size:.75rem; font-weight:700; padding:.4rem .8rem; border-radius:50rem; color:#fff; }

/* ---------- 9. Premium services ---------- */
.services-shell{ background:var(--brand-50); border-radius:2.5rem; position:relative; overflow:hidden; }
.services-glow{ position:absolute; width:18rem; height:18rem; border-radius:50%; filter:blur(70px); z-index:0; }
.premium-service-card{ background:#fff; border-radius:1.5rem; box-shadow:0 1.5rem 2.5rem -1.5rem rgba(15,23,42,.2); position:relative; padding:1.75rem; transition:transform .3s; z-index:1; }
.premium-service-card:hover{ transform:translateY(-4px); }
.premium-service-card .svc-icon{ width:3rem; height:3rem; border-radius:1rem; display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:#fff; margin-bottom:1.4rem; }
.svc-eyebrow{ font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:#94a3b8; font-weight:600; }

/* ---------- 10. Activities / events ---------- */
.event-card{ border:1px solid #f1f5f9; border-radius:1.25rem; overflow:hidden; transition:box-shadow .25s; background:#fff; }
.event-card:hover{ box-shadow:0 1.25rem 2.5rem -1.5rem rgba(15,23,42,.25); }
.event-img-wrap{ height:200px; overflow:hidden; position:relative; }
.event-img-wrap img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.event-card:hover .event-img-wrap img{ transform:scale(1.06); }
.event-date-badge{ position:absolute; bottom:.75rem; right:.75rem; background:rgba(5,150,105,.9); color:#fff; font-size:.65rem; font-weight:700; padding:.3rem .6rem; border-radius:.5rem; backdrop-filter:blur(3px); }
.live-dot{ width:.6rem; height:.6rem; border-radius:50%; background:var(--brand-500); animation:pulseDot 1.6s infinite; }
@keyframes pulseDot{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(1.3);} }

/* ---------- 11. Registration section ---------- */
.register-shell{ background:linear-gradient(135deg,var(--brand-deep),#0b1f2e); border-radius:2.25rem; position:relative; overflow:hidden; color:#fff; }
.register-glow-a{ position:absolute; width:16rem; height:16rem; background:rgba(16,185,129,.12); border-radius:50%; filter:blur(60px); bottom:-4rem; right:-4rem; }
.register-glow-b{ position:absolute; width:16rem; height:16rem; background:rgba(131,56,236,.12); border-radius:50%; filter:blur(60px); top:-4rem; left:-4rem; }
.register-badge{ background:rgba(16,185,129,.18); border:1px solid rgba(16,185,129,.3); color:#a7f3d0; font-size:.75rem; font-weight:700; padding:.35rem .9rem; border-radius:50rem; }
.register-feature{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:1.1rem; padding:.9rem; font-size:.8rem; }
.register-form-card{ background:#fff; border-radius:1.75rem; padding:1.75rem; box-shadow:0 2rem 4rem -2rem rgba(0,0,0,.4); }
.campus-radio label{ border:1px solid #e2e8f0; border-radius:.9rem; padding:.7rem; font-size:.8rem; font-weight:600; cursor:pointer; transition:all .2s; background:#f8fafc; color:#000; }
.campus-radio input:checked + label{ border-color:var(--brand-500); background:var(--brand-50); color:var(--brand-700); }

/* ---------- 12. Articles ---------- */
.article-card{ background:#fff; border:1px solid #f1f5f9; border-radius:1.25rem; padding:1.25rem; transition:box-shadow .25s; }
.article-card:hover{ box-shadow:0 1.25rem 2.5rem -1.5rem rgba(15,23,42,.25); }
.article-meta{ font-size:.7rem; color:#94a3b8; }
.article-tag{ font-size:.65rem; font-weight:700; padding:.3rem .6rem; border-radius:.5rem; }

/* ---------- 13. Footer ---------- */
footer.site-footer{ background:#0f172a; color:#94a3b8; }
footer.site-footer h6{ color:#fff; font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; }
footer.site-footer a{ color:#94a3b8; transition:color .2s; }
footer.site-footer a:hover{ color:#fff; }
.footer-social a{ width:2.1rem; height:2.1rem; border-radius:.8rem; background:#1e293b; display:flex; align-items:center; justify-content:center; color:#cbd5e1; }
.footer-social a:hover{ background:var(--brand-500); color:#fff; }
footer.site-footer .newsletter-input{ background:#1e293b; border:1px solid #334155; color:#fff; border-radius:.9rem; }
footer.site-footer .newsletter-input::placeholder{ color:#64748b; }
footer.site-footer .newsletter-input:focus{ border-color:var(--brand-500); box-shadow:none; background:#1e293b; color:#fff; }

/* ---------- 14. Back to top ---------- */
.btn-back-top{ position:fixed; bottom:1.5rem; left:1.5rem; width:3rem; height:3rem; border-radius:50%; background:var(--brand-500); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 .6rem 1.4rem -.4rem rgba(16,185,129,.5); opacity:0; visibility:hidden; transform:translateY(10px); transition:all .3s; z-index:60; border:none; }
.btn-back-top.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* ---------- 15. Mobile app-style bottom bar ---------- */
.mobile-bottom-bar{ display:none; position:fixed; bottom:0; inset-inline:0; z-index:55; background:#fff; border-top:1px solid #f1f5f9; padding:.5rem 1rem; box-shadow:0 -.4rem 1.2rem rgba(0,0,0,.06); }
.mobile-bottom-bar a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:.2rem; font-size:.68rem; font-weight:700; color:#64748b; padding:.35rem 0; }
.mobile-bottom-bar a.primary{ background:var(--brand-500); color:#fff; border-radius:.9rem; flex:1.4; }
.mobile-bottom-bar a i{ font-size:1.05rem; }

/* ---------- 16. Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- 17. Responsive tweaks ---------- */
@media (max-width:991.98px){
  .hero-carousel, .hero-carousel .carousel-item{ height:56vh; min-height:380px; }
}
@media (max-width:767.98px){
  .section-pad{ padding-top:3rem; padding-bottom:3rem; }
  .hero-carousel, .hero-carousel .carousel-item{ height:auto; min-height:480px; }
  .register-shell .p-lg-5{ padding:1.75rem !important; }
  .mobile-bottom-bar{ display:flex; }
  body{ padding-bottom:70px; }
}
@media (max-width:575.98px){
  .hero-title{ font-size:1.5rem; }
  .hero-text{ font-size:.8rem; }
  .services-shell{ border-radius:1.5rem; }
  .register-shell{ border-radius:1.5rem; }
  .hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 135px 70px;}
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* ---------- 18. Offcanvas failsafe (kept last in cascade on purpose) ---------- */
html body div#mobileMenu.offcanvas.offcanvas-start{
  right:0 !important; left:auto !important;
  z-index:1050 !important;
  background-color:#fff !important;
  transform:translateX(100%) !important;
}
html body div#mobileMenu.offcanvas.offcanvas-start.show,
html body div#mobileMenu.offcanvas.offcanvas-start.showing{
  transform:translateX(0) !important;
}
.offcanvas-backdrop.show{ z-index:1040 !important; }

/* =========================================================
   FIXES FOR MOBILE MENU (OFFCANVAS)
   ========================================================= */

.offcanvas-backdrop {
  z-index: 1080 !important;
}

.offcanvas {
  z-index: 1085 !important;
  width: 300px !important;
  max-width: 85vw !important;
  border: none !important;
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15) !important;
}

.offcanvas-header {
  border-bottom: 1px solid #f1f5f9;
  padding: 1.25rem 1rem;
}

.offcanvas-body {
  padding: 1rem;
  overflow-y: auto;
}

#mobileMenu .accordion-item {
  border: none;
  background: transparent;
}

#mobileMenu .accordion-button {
  background: transparent;
  color: #475569;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: none !important;
}

#mobileMenu .accordion-button:not(.collapsed) {
  color: var(--brand-600);
  background: var(--brand-50);
}

#mobileMenu .accordion-body {
  padding-right: 1rem;
  padding-left: 0;
}

/* =========================================================
   Z-INDEX MANAGEMENT SYSTEM
   ========================================================= */

:root {
  --zi-header: 1030;          /* هدر اصلی چسبان (Sticky Header) */
  --zi-mobile-bar: 1040;      /* نوار ثابت پایین موبایل (Mobile Bottom Nav) */
  --zi-dropdown: 1050;       /* منوهای افتادنی (Dropdowns & Tooltips) */
  --zi-backdrop: 1080;       /* لایه تیره پس‌زمینه منو (Offcanvas Backdrop) */
  --zi-offcanvas: 1085;      /* کشوی منوی موبایل (Mobile Offcanvas Menu) */
  --zi-modal-backdrop: 1090; /* پس‌زمینه مودال‌ها */
  --zi-modal: 1095;          /* پنجره‌های مودال (Modals / Popups) */
  --zi-toast: 1100;          /* پیام‌های شناور (Toasts / Alerts) */
}

/* 1. هدر اصلی سایت */
.site-header,
.navbar.sticky-top,
.navbar.fixed-top {
  z-index: var(--zi-header) !important;
}

/* 2. نوار شناور پایین موبایل (در صورت وجود) */
.mobile-bottom-bar,
.bottom-nav {
  z-index: var(--zi-mobile-bar) !important;
}

/* 3. منوهای افتادنی هدر دسکتاپ */
.navbar .dropdown-menu {
  z-index: var(--zi-dropdown) !important;
}

/* 4. بک‌دراپ تاریک منوی موبایل Bootstrap */
.offcanvas-backdrop {
  z-index: var(--zi-backdrop) !important;
}

/* 5. کشوی اصلی منوی موبایل */
.offcanvas,
.offcanvas-start,
.offcanvas-end {
  z-index: var(--zi-offcanvas) !important;
}

/* 6. مودال‌ها و پاپ‌آپ‌ها */
.modal-backdrop {
  z-index: var(--zi-modal-backdrop) !important;
}
.modal {
  z-index: var(--zi-modal) !important;
}

/* =========================================================
   MINIMAL CUSTOM NAVBAR (.mn- Scope)
   ========================================================= */

.mn-navbar * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.mn-navbar {
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid #f1f5f9;
  position: sticky;
  top: 0;
  z-index: var(--zi-header, 1030);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.mn-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* --- Logo (Right Side) --- */
.mn-logo {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--brand-deep, #0f2c25);
  text-decoration: none;
  letter-spacing: -0.5px;
  flex-shrink: 0;
}

.mn-logo span {
  color: var(--brand-500, #10b981);
}

/* --- Nav Menu Desktop (Centered Links & Left Auth) --- */
.mn-nav-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  margin-right: 40px;
}

.mn-nav-list {
  display: flex;
  list-style: none;
  gap: 32px;
  margin: 0 auto;
  padding: 0;
}

.mn-nav-link {
  text-decoration: none;
  color: #475569;
  font-size: 0.925rem;
  font-weight: 600;
  transition: color 0.2s ease;
}

.mn-nav-link:hover,
.mn-nav-link.mn-active {
  color: var(--brand-600, #059669);
}

/* --- Auth Group (Left Side) --- */
.mn-auth-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.mn-btn {
  text-decoration: none;
  padding: 9px 20px;
  border-radius: 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.25s ease;
  display: inline-block;
  text-align: center;
}

.mn-btn-login {
  color: #334155;
  background-color: #f1f5f9;
}

.mn-btn-login:hover {
  background-color: #e2e8f0;
  color: #0f172a;
}

.mn-btn-register {
  color: #ffffff;
  background-color: var(--brand-500, #10b981);
}

.mn-btn-register:hover {
  background-color: var(--brand-600, #059669);
  color: #ffffff;
}

/* --- Mobile Controls (Hidden on Desktop) --- */
.mn-hamburger,
.mn-close-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
}

.mn-hamburger {
  padding: 4px;
  flex-direction: column;
  justify-content: space-between;
  height: 20px;
  width: 24px;
}

.mn-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #1e293b;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.mn-backdrop {
  display: none;
}

/* --- Mobile Responsive (Off-Canvas Side Menu) --- */
@media screen and (max-width: 768px) {
  .mn-hamburger {
    display: flex;
  }

  .mn-close-btn {
    display: block;
    font-size: 1.8rem;
    line-height: 1;
    color: #64748b;
    align-self: flex-start;
    margin-bottom: 24px;
    padding: 0;
  }

  .mn-close-btn:hover {
    color: #0f172a;
  }

  /* Dark Backdrop */
  .mn-backdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: var(--zi-backdrop, 1080);
  }

  .mn-backdrop.mn-show {
    opacity: 1;
    visibility: visible;
  }

  /* Mobile Offcanvas Drawer */
  .mn-nav-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 280px;
    height: 100vh;
    background-color: #ffffff;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px;
    margin-right: 0;
    gap: 0;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: var(--zi-offcanvas, 1085);
	  padding-bottom:150px;
  }

  .mn-nav-menu.mn-open {
    right: 0;
  }

  .mn-nav-list {
    flex-direction: column;
    width: 100%;
    gap: 12px;
    margin: 0 0 auto 0;
  }

  .mn-nav-link {
    font-size: 0.95rem;
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
  }

  .mn-auth-group {
    flex-direction: column;
    width: 100%;
    gap: 10px;
    padding-top: 20px;
  }

  .mn-btn {
    width: 100%;
  }
}