/* TARAMAA compact futuristic header — frontend only */
:root {
  --tm-purple: #5b18d6;
  --tm-purple-2: #7a32ef;
  --tm-orange: #ff8a00;
  --tm-orange-2: #ffb21a;
  --tm-ink: #151126;
  --tm-line: rgba(108, 50, 220, .17);
  --tm-glow: rgba(105, 41, 234, .20);
  --tm-header-height: 86px;
}

* { box-sizing: border-box; }

.tm-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--tm-line);
  box-shadow: 0 5px 24px rgba(80, 32, 170, .07);
}

.tm-topbar {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(18px, 2.2vw, 42px);
  border-bottom: 1px solid rgba(112, 55, 220, .10);
  font: 500 10px/1 Arial, sans-serif;
  color: #68657a;
  letter-spacing: .01em;
}

.tm-topbar-left { color: var(--tm-orange); white-space: nowrap; }
.tm-topbar-right { display: flex; align-items: center; gap: 18px; }
.tm-topbar a { color: inherit; text-decoration: none; transition: color .2s ease; }
.tm-topbar a:hover { color: var(--tm-purple); }

.tm-nav-shell {
  height: var(--tm-header-height);
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 38px);
  padding: 0 clamp(18px, 2.2vw, 42px);
}

.tm-brand {
  flex: 0 0 auto;
  min-width: 178px;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--tm-purple);
  text-decoration: none;
}

.tm-logo-mark {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 27px;
  color: #8d42ff;
  text-shadow: 0 0 12px rgba(116, 41, 255, .55);
}

.tm-brand-copy { display: flex; flex-direction: column; line-height: 1; }
.tm-brand-copy strong {
  font: 700 21px/1.05 Arial, sans-serif;
  letter-spacing: 1.3px;
  background: linear-gradient(90deg, #5420d4, #ff8611);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tm-brand-copy small {
  margin-top: 4px;
  font: 700 9px/1 Arial, sans-serif;
  letter-spacing: 2.2px;
  color: #27243a;
}

.tm-menu {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tm-menu-item {
  position: relative;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--tm-ink);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  font: 700 11px/1 Arial, sans-serif;
  letter-spacing: .12px;
  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    color .22s ease;
}

/* The requested permanent bracket/card around every menu item */
.tm-menu-item::before,
.tm-menu-item::after {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  width: 5px;
  opacity: .22;
  transition: opacity .22s ease, width .22s ease, filter .22s ease;
}
.tm-menu-item::before {
  left: 5px;
  border-left: 1px solid #6d27e8;
  border-top: 1px solid #6d27e8;
  border-bottom: 1px solid #6d27e8;
  border-radius: 5px 0 0 5px;
}
.tm-menu-item::after {
  right: 5px;
  border-right: 1px solid #6d27e8;
  border-top: 1px solid #6d27e8;
  border-bottom: 1px solid #6d27e8;
  border-radius: 0 5px 5px 0;
}

.tm-menu-item:hover,
.tm-menu-item.is-active {
  color: var(--tm-purple);
  border-color: rgba(108, 44, 225, .17);
  background: rgba(255,255,255,.72);
  box-shadow:
    0 7px 18px rgba(91, 24, 214, .11),
    inset 0 0 0 1px rgba(255,255,255,.9);
  transform: translateY(-1px);
}
.tm-menu-item:hover::before,
.tm-menu-item:hover::after,
.tm-menu-item.is-active::before,
.tm-menu-item.is-active::after {
  opacity: .9;
  filter: drop-shadow(0 0 4px rgba(105, 32, 225, .45));
}

.tm-menu-item.is-active::marker { display: none; }
.tm-menu-item.is-active {
  box-shadow: 0 8px 20px rgba(91, 24, 214, .13);
}
.tm-menu-item.is-active > span { position: relative; }

.tm-auth {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.tm-auth-btn {
  height: 42px;
  min-width: 80px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  text-decoration: none;
  font: 700 11px/1 Arial, sans-serif;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.tm-login {
  color: #3d286e;
  background: #fff;
  border: 1px solid #d9c5ff;
  box-shadow: 0 5px 16px rgba(100, 45, 210, .09);
}
.tm-register {
  color: #fff;
  border: 1px solid #ff9d12;
  background: linear-gradient(135deg, #ff9d08, #ff7600);
  box-shadow: 0 8px 20px rgba(255, 139, 0, .25);
}
.tm-auth-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.tm-login:hover { box-shadow: 0 9px 22px rgba(100, 45, 210, .16); }
.tm-register:hover { box-shadow: 0 10px 25px rgba(255, 139, 0, .34); }

.tm-mobile-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid #d9c5ff;
  border-radius: 10px;
  background: #fff;
  padding: 9px;
}
.tm-mobile-toggle span {
  display: block;
  height: 2px;
  margin: 4px 0;
  border-radius: 2px;
  background: var(--tm-purple);
}

/* Keep the header compact at large desktop sizes */
@media (min-width: 1400px) {
  :root { --tm-header-height: 78px; }
  .tm-nav-shell { gap: 26px; }
  .tm-menu-item { padding-inline: 13px; }
}

/* Tablet */
@media (max-width: 1080px) {
  .tm-nav-shell { gap: 12px; }
  .tm-brand { min-width: 160px; }
  .tm-menu { gap: 2px; }
  .tm-menu-item { padding-inline: 10px; font-size: 10px; }
  .tm-auth-btn { min-width: 68px; padding-inline: 13px; }
}

/* Mobile */
@media (max-width: 820px) {
  .tm-topbar { padding-inline: 14px; }
  .tm-topbar-right a:nth-child(-n+3) { display: none; }
  .tm-nav-shell { height: 66px; padding-inline: 14px; }
  .tm-brand { min-width: 0; }
  .tm-brand-copy strong { font-size: 17px; }
  .tm-brand-copy small { font-size: 7px; }
  .tm-logo-mark { width: 34px; height: 34px; font-size: 22px; }

  .tm-mobile-toggle { display: block; margin-left: auto; }
  .tm-menu {
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% + 7px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
    border: 1px solid #decaff;
    border-radius: 14px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 16px 40px rgba(70, 20, 150, .16);
  }
  .tm-menu.is-open { display: flex; }
  .tm-menu-item { width: 100%; justify-content: flex-start; padding-left: 18px; }
  .tm-auth { margin-left: 0; }
  .tm-auth-btn { height: 38px; min-width: 64px; padding-inline: 10px; }
}
@media (max-width: 520px) {
  .tm-login { display: none; }
  .tm-topbar { font-size: 8px; }
}
/* Upcoming/Live navigation additions */
.tm-footer-temple-art{position:absolute;right:-12px;bottom:-18px;width:235px;height:185px;background:url('/frontend/master/assets/images/offer-right.png') center/cover no-repeat;opacity:.18;mix-blend-mode:multiply;pointer-events:none}.tm-site-footer-inner{position:relative;overflow:hidden}
@media(max-width:820px){.tm-footer-temple-art{width:180px;height:145px;opacity:.10}}

/* ==========================================================
   MOBILE BOTTOM NAVIGATION — MOBILE ONLY
   Nine-page two-tier floating dock. Desktop is untouched.
   ========================================================== */
.tm-mobile-bottom-nav { display:none; }

@media (max-width:820px) {
  .tm-mobile-toggle { display:none!important; }
  .tm-auth .tm-register { display:none!important; }
  .tm-auth .tm-login { display:inline-flex!important; }

  .tm-mobile-bottom-nav {
    position:fixed!important;
    left:7px!important;
    right:7px!important;
    bottom:calc(7px + env(safe-area-inset-bottom))!important;
    top:auto!important;
    width:auto!important;
    height:auto!important;
    min-height:112px!important;
    margin:0!important;
    padding:8px!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
    z-index:2147483647!important;
    border:1px solid rgba(255,157,18,.58)!important;
    border-radius:22px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.91),rgba(249,244,255,.82))!important;
    box-shadow:0 18px 42px rgba(57,19,130,.22),0 0 0 1px rgba(109,39,232,.08),inset 0 1px 0 rgba(255,255,255,.98)!important;
    backdrop-filter:blur(24px) saturate(1.45)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.45)!important;
  }
  .tm-mobile-bottom-nav-primary { display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important; }
  .tm-mobile-bottom-nav-secondary { display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4px!important;padding-top:4px!important;border-top:1px solid rgba(109,39,232,.10)!important; }
  .tm-mobile-nav-item {
    min-width:0!important;width:auto!important;height:43px!important;margin:0!important;padding:2px 1px!important;
    border:0!important;background:transparent!important;color:#30234f!important;text-decoration:none!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;
    border-radius:14px!important;font:700 8px/1.05 Arial,sans-serif!important;cursor:pointer!important;box-sizing:border-box!important;
    -webkit-tap-highlight-color:transparent!important;transition:transform .18s ease,background .18s ease!important;
  }
  .tm-mobile-nav-icon {
    width:27px!important;height:27px!important;display:grid!important;place-items:center!important;box-sizing:border-box!important;
    border:1px solid rgba(109,39,232,.25)!important;border-radius:10px!important;color:#6825df!important;
    background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(247,239,255,.82))!important;
    box-shadow:0 5px 13px rgba(93,34,203,.11),inset 0 1px 0 #fff!important;
  }
  .tm-mobile-nav-icon svg { width:15px!important;height:15px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.65!important;stroke-linecap:round!important;stroke-linejoin:round!important; }
  .tm-mobile-nav-icon svg circle[fill="currentColor"] { fill:currentColor!important;stroke:none!important; }
  .tm-mobile-nav-label { display:block!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;line-height:1.05!important; }
  .tm-mobile-nav-item.is-active { color:#5d1fd0!important;background:linear-gradient(180deg,rgba(109,39,232,.10),rgba(255,255,255,.16))!important; }
  .tm-mobile-nav-item.is-active .tm-mobile-nav-icon { border-color:rgba(109,39,232,.50)!important;background:linear-gradient(145deg,#fff,rgba(235,218,255,.96))!important;box-shadow:0 0 0 2px rgba(109,39,232,.06),0 7px 18px rgba(93,34,203,.17)!important; }
  .tm-mobile-nav-item:active { transform:scale(.96)!important; }
  body { padding-bottom:calc(128px + env(safe-area-inset-bottom))!important; }
}

@media (min-width:821px) { .tm-mobile-bottom-nav { display:none!important; } }


.tm-live-cart{position:relative;width:42px;height:42px;margin-left:5px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(109,39,232,.26);border-radius:12px;background:linear-gradient(145deg,#fff,#f7f0ff);color:#17142a;text-decoration:none;box-shadow:0 5px 14px rgba(93,34,203,.10);flex:0 0 auto;transition:transform .18s ease,box-shadow .18s ease}.tm-live-cart-icon{width:24px;height:24px;display:grid;place-items:center;transform-origin:50% 72%}.tm-live-cart-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.tm-live-cart b{position:absolute;right:-5px;top:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#ef3b27;color:#fff;font:800 9px/17px Arial,sans-serif;text-align:center;box-shadow:0 0 0 2px #fff}.tm-live-cart.is-bumping .tm-live-cart-icon{animation:tmCartBump .72s cubic-bezier(.2,.75,.25,1)}.tm-live-cart:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(93,34,203,.16)}@keyframes tmCartBump{0%,100%{transform:rotate(0) scale(1)}18%{transform:rotate(-12deg) scale(1.16)}36%{transform:rotate(12deg) scale(1.16)}54%{transform:rotate(-8deg) scale(1.08)}72%{transform:rotate(5deg) scale(1.03)}}
@media(max-width:820px){.tm-live-cart{width:38px;height:38px;border-radius:11px}.tm-live-cart-icon{font-size:18px}}
html[data-tm-theme="dark"] .tm-live-cart{color:#f5f3ff;background:linear-gradient(145deg,#17142a,#0e0b19);border-color:rgba(166,119,255,.42);box-shadow:0 6px 18px rgba(0,0,0,.35)}
html[data-tm-theme="dark"] .tm-live-cart b{box-shadow:0 0 0 2px #17142a}