/* ==========================================================================
   MAHABADI — Layout (top bar, header, navigation, mega menu, footer)
   ========================================================================== */

/* =============================== TOP BAR =============================== */
.topbar { background: var(--blue); color: var(--on-blue-2); font-size: var(--step--1); }

.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); min-height: var(--topbar-h); }
.topbar__list { display: flex; align-items: center; gap: var(--space-m); flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: var(--space-3xs); }
.topbar__item svg { width: 16px; height: 16px; flex: none; color: var(--gold); }
.topbar__item a { font-weight: 500; color: var(--on-blue); }
.topbar__item a:hover { color: var(--gold); }

/* =============================== HEADER =============================== */
.site-header {
  position: sticky;
  top: calc(-1 * var(--topbar-h));
  z-index: 120;
  background: var(--surface);
}

.header-sticky {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck .header-sticky {
  box-shadow: 0 12px 30px -22px rgba(0, 48, 73, .45);
}

.header-main__inner { display: flex; align-items: center; gap: var(--space-m); min-height: var(--header-h); }

/* Brand */
.brand { display: flex; align-items: center; gap: var(--space-xs); flex: none; }
.brand__logo {
  height: 58px;
  width: auto;
  max-width: 168px;
  object-fit: contain;
  border-radius: 12px;
}
.brand__names strong { display: block; font-size: var(--step-1); font-weight: 700; line-height: 1.3; }
.brand__tag { display: block; font-size: var(--step--1); color: var(--ink-3); line-height: 1.5; }

/* Search */
.header-search { flex: 1; max-width: 380px; }
.header-search .input {
  background: var(--sand);
  border-color: transparent;
  border-radius: var(--radius-pill);
  min-height: 42px;
  font-size: var(--step--1);
  padding-block: 0;
}
.header-search .input::placeholder { font-size: var(--step--1); }
.header-search .input:focus { background: var(--surface); border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.header-search .input-group > svg { width: 17px; height: 17px; }

.search-suggest {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline: 0;
  z-index: 40;
  padding: var(--space-2xs);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  display: none;
}
.search-suggest.is-open { display: block; }
.search-suggest__title { font-size: var(--step--1); color: var(--ink-3); padding: var(--space-3xs) var(--space-xs) var(--space-2xs); }
.search-suggest a { display: flex; align-items: center; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-xs); border-radius: 10px; font-size: var(--step--1); }
.search-suggest a:hover { background: var(--blue-soft); color: var(--blue); }
.search-suggest svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }

/* Header actions */
.header-actions { display: flex; align-items: center; gap: var(--space-2xs); margin-inline-start: auto; flex: none; }
.header-phone { display: flex; align-items: center; gap: var(--space-2xs); }
.header-phone__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--orange-ink); }
.header-phone__ico svg { width: 19px; height: 19px; }
.header-phone__body { line-height: 1.35; }
.header-phone__body span { display: block; font-size: var(--step--1); color: var(--ink-3); }
.header-phone__body a { font-size: var(--step-0); font-weight: 700; direction: ltr; display: inline-block; }

.hamburger { display: none; place-items: center; width: 46px; height: 46px; border-radius: var(--radius-pill); background: var(--blue); color: #fff; flex: none; }
.hamburger svg { width: 21px; height: 21px; }

/* ============================= MAIN NAV =============================== */
.main-nav { border-top: 1px solid var(--line); }
.main-nav .container { position: relative; }

.menu { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.menu__item { position: static; }

.menu__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  min-height: 50px;
  padding: 0 var(--space-2xs);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--ink-2);
  position: relative;
  transition: color var(--dur) var(--ease);
}
.menu__link svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; transition: color var(--dur) var(--ease); }
.menu__link .chev { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }

.menu__link::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-2xs);
  bottom: 8px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease);
}

.menu__item:hover > .menu__link,
.menu__item.is-open > .menu__link,
.menu__link.is-active { color: var(--blue); }
.menu__item:hover > .menu__link svg,
.menu__item.is-open > .menu__link svg { color: var(--orange-ink); }
.menu__item:hover > .menu__link::after,
.menu__item.is-open > .menu__link::after,
.menu__link.is-active::after { transform: scaleX(1); }
.menu__item:hover > .menu__link .chev,
.menu__item.is-open > .menu__link .chev { transform: rotate(180deg); }
.menu__item:hover > .menu__link > svg:first-child { animation: ic-pop var(--dur-slow) var(--ease); }

.menu__item--hot > .menu__link { color: var(--red); }
.menu__item--hot > .menu__link svg { color: var(--red); }
.menu__item--hot > .menu__link::after { transform: scaleX(1); background: var(--red); }

/* ------------------------------ Mega menu ------------------------------ */
.mega {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  z-index: 60;
  background: var(--surface);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  overflow: hidden;
}
.menu__item:hover > .mega,
.menu__item.is-open > .mega { opacity: 1; visibility: visible; transform: translateY(0); }

.mega__inner { display: grid; grid-template-columns: 1fr 300px; min-height: 300px; }

.mega__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs) var(--space-m); padding: var(--space-m); align-content: start; }

.mega__cat {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: 12px;
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--blue);
  transition: background-color var(--dur) var(--ease);
}
.mega__cat svg.lead { width: 20px; height: 20px; color: var(--orange-ink); flex: none; }
.mega__cat .chev { width: 15px; height: 15px; margin-inline-start: auto; color: var(--ink-3); transition: transform var(--dur) var(--ease); }
.mega__cat:hover, .mega__cat.is-active { background: var(--gold-soft); }
.mega__cat:hover svg.lead { animation: ic-pop var(--dur-slow) var(--ease); }
.mega__cat:hover .chev { transform: translateX(-3px); }

.mega__sub { margin: 2px 0 var(--space-2xs); padding-inline-start: calc(var(--space-xs) + 12px); border-inline-start: 1.5px solid var(--line); }
.mega__sub a { display: block; padding: 4px var(--space-2xs); font-size: var(--step--1); color: var(--ink-2); border-radius: 8px; }
.mega__sub a:hover { color: var(--blue); background: var(--sand); }

.mega__preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-m); background: var(--sand); border-inline-start: 1px solid var(--line); }
.mega__preview img { width: 100%; height: 170px; object-fit: cover; border-radius: var(--radius); background: var(--surface); transition: opacity var(--dur) var(--ease); }
.mega__preview img.is-swapping { opacity: .2; }
.mega__preview-cap { font-size: var(--step--1); font-weight: 500; color: var(--ink-2); text-align: center; }

.mega__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  padding: var(--space-s);
  background: var(--gold);
  color: var(--blue);
  font-size: var(--step-0);
  font-weight: 500;
  transition: background-color var(--dur) var(--ease);
}
.mega__cta:hover { background: var(--gold-2); }
.mega__cta svg { width: 18px; height: 18px; }

/* =============================== DRAWER =============================== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 48, 73, .45);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.overlay.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 210;
  width: min(360px, 90vw);
  background: var(--surface);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  display: flex;
  flex-direction: column;
  border-start-start-radius: var(--radius);
  border-end-start-radius: var(--radius);
}
.drawer.is-open { transform: none; }

.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-s); border-bottom: 1px solid var(--line); }
.drawer__head img { height: 44px; width: auto; max-width: 150px; object-fit: contain; border-radius: 10px; }

.drawer__close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--sand); color: var(--blue); }
.drawer__close:hover { background: var(--gold-soft); }
.drawer__close svg { width: 19px; height: 19px; }

.drawer__body { flex: 1; overflow-y: auto; padding: var(--space-2xs) var(--space-xs) var(--space-m); }

.dr-menu__link, .dr-menu__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-xs);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--blue);
  border-radius: var(--radius);
  text-align: right;
}
.dr-menu__link svg.lead, .dr-menu__toggle svg.lead { width: 21px; height: 21px; color: var(--orange-ink); }
.dr-menu__toggle .chev { width: 16px; height: 16px; margin-inline-start: auto; color: var(--ink-3); transition: transform var(--dur) var(--ease); }
.dr-menu__item.is-open > .dr-menu__toggle { background: var(--gold-soft); }
.dr-menu__item.is-open > .dr-menu__toggle .chev { transform: rotate(180deg); }

.dr-menu__sub { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease); padding-inline-start: var(--space-xs); }
.dr-menu__item.is-open > .dr-menu__sub { max-height: 640px; }
.dr-menu__sub a { display: block; padding: var(--space-2xs) var(--space-s); font-size: var(--step--1); color: var(--ink-2); border-inline-start: 1.5px solid var(--line); }
.dr-menu__sub a:hover { color: var(--blue); }

.drawer__foot { padding: var(--space-s); border-top: 1px solid var(--line); display: grid; gap: var(--space-2xs); }

/* =============================== FOOTER =============================== */
.site-footer { background: var(--blue); color: var(--on-blue-2); font-size: var(--step-0); }

.footer-top { padding: var(--space-xl) 0 var(--space-l); border-bottom: 1px solid rgba(244, 247, 249, .12); }

.footer-brand { display: flex; align-items: flex-start; gap: var(--space-m); flex-wrap: wrap; }
.footer-brand__logo { width: 96px; height: 96px; border-radius: var(--radius); background: var(--surface); display: grid; place-items: center; padding: var(--space-2xs); flex: none; }
.footer-brand__logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.footer-brand__about { max-width: 54ch; line-height: 2; }
.footer-brand__about strong { display: block; margin-bottom: var(--space-3xs); font-size: var(--step-1); color: #fff; }

.footer-socials { display: flex; gap: var(--space-2xs); margin-inline-start: auto; align-items: center; flex-wrap: wrap; }
.footer-socials a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  min-height: 42px;
  padding: 0 var(--space-s);
  border-radius: var(--radius-pill);
  background: rgba(244, 247, 249, .1);
  color: var(--on-blue);
  font-size: var(--step--1);
  font-weight: 500;
  transition: all var(--dur) var(--ease);
}
.footer-socials a:hover { background: var(--gold); color: var(--blue); }
.footer-socials svg { width: 18px; height: 18px; }

.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-l); padding: var(--space-l) 0; }

.footer-col__title { color: #fff; font-size: var(--step-0); font-weight: 700; margin-bottom: var(--space-s); }
.footer-links li { margin-bottom: var(--space-2xs); }
.footer-links a { color: var(--on-blue-2); font-size: var(--step--1); }
.footer-links a:hover { color: var(--gold); }

.footer-contact li { display: flex; gap: var(--space-2xs); margin-bottom: var(--space-s); font-size: var(--step--1); line-height: 1.95; }
.footer-contact svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 6px; }
.footer-contact a { color: var(--on-blue-2); }
.footer-contact a:hover { color: var(--gold); }

.footer-licenses { display: flex; gap: var(--space-2xs); flex-wrap: wrap; margin-top: var(--space-s); }
.license {
  display: grid;
  place-items: center;
  gap: var(--space-3xs);
  width: 88px;
  padding: var(--space-2xs) var(--space-3xs);
  border-radius: 14px;
  background: rgba(244, 247, 249, .1);
  color: var(--on-blue);
  font-size: 10.5px;
  text-align: center;
  line-height: 1.5;
}
.license svg { width: 24px; height: 24px; color: var(--gold); }

.footer-bottom {
  border-top: 1px solid rgba(244, 247, 249, .12);
  padding: var(--space-s) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  flex-wrap: wrap;
  font-size: var(--step--1);
  color: var(--on-blue-2);
}
.footer-bottom a:hover { color: var(--gold); }

/* ============================== FLOATING ============================== */
.to-top {
  position: fixed;
  bottom: var(--space-m);
  left: var(--space-m);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--dur) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gold); color: var(--blue); }
.to-top svg { width: 19px; height: 19px; }

.quick-contact {
  position: fixed;
  bottom: var(--space-m);
  right: var(--space-m);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 50px;
  padding: 0 var(--space-s);
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--blue);
  font-size: var(--step-0);
  font-weight: 500;
  box-shadow: var(--shadow-2);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.quick-contact svg { width: 19px; height: 19px; }
.quick-contact:hover { transform: translateY(-3px); background: var(--gold-2); }
.quick-contact:hover svg { animation: ic-ring var(--dur-slow) var(--ease); }