/* ==========================================================================
   Sundar Marriage Services — Site widgets (new, additive)
   Floating WhatsApp + Call stack and the language switcher. Uses the design
   tokens from css/style.css; kept separate so the original CSS is untouched.
   ========================================================================== */

/* ---------- floating WhatsApp + Call ---------- */
.float-actions{
  position:fixed;right:22px;bottom:22px;z-index:70;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.float-actions .wa-float{position:relative;right:auto;bottom:auto;}

.call-float{
  position:relative;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--maroon-600),var(--pink));color:#fff;font-size:21px;
  box-shadow:0 12px 28px rgba(142,16,67,.42);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.call-float::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(210,28,114,.5);
  animation:ripple 2.4s ease-out -1.2s infinite; /* offset from the WhatsApp pulse */
}
.call-float i{animation:call-ring 2.4s var(--ease) infinite;}
.call-float:hover{transform:scale(1.1) rotate(-6deg);box-shadow:0 16px 36px rgba(142,16,67,.55);}
@keyframes call-ring{
  0%,58%,100%{transform:rotate(0);}
  64%{transform:rotate(-16deg);}
  70%{transform:rotate(14deg);}
  76%{transform:rotate(-10deg);}
  82%{transform:rotate(6deg);}
}

@media (max-width:760px){
  /* service detail pages already show Call / WhatsApp in their bottom bar */
  body:has(.sd-mbar) .float-actions{display:none;}
}
@media (max-width:680px){
  .float-actions{right:16px;bottom:16px;gap:12px;}
  .call-float{width:48px;height:48px;font-size:19px;}
}

/* ==========================================================================
   LANGUAGE SWITCHER (Views/Shared/_LangSwitch.cshtml + js/translate.js)
   ========================================================================== */
.topbar{position:relative;z-index:65;} /* lets the dropdown overlap the sticky header */
.topbar__social{align-items:center;}
.lang--topbar{margin-left:9px;}

.lang{position:relative;flex:0 0 auto;font-family:var(--ff-sans);line-height:1.2;}

.lang__btn{
  display:inline-flex;align-items:center;gap:7px;
  height:30px;padding:0 12px 0 10px;border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.6px;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.lang__globe{font-size:13px;transition:color .3s var(--ease);}
.lang__current{min-width:18px;text-align:center;}
.lang__caret{font-size:9px;transition:transform .35s var(--ease);}
.lang.is-open .lang__caret{transform:rotate(180deg);}
.lang.is-busy .lang__globe{animation:lang-spin 1s linear infinite;}
@keyframes lang-spin{to{transform:rotate(360deg);}}

/* on the maroon top bar (desktop) */
.lang--topbar .lang__btn{
  color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.32);
}
.lang--topbar .lang__globe{color:var(--gold-300);}
.lang--topbar .lang__btn:hover,
.lang--topbar.is-open .lang__btn{background:#fff;border-color:#fff;color:var(--maroon);}
.lang--topbar .lang__btn:hover .lang__globe,
.lang--topbar.is-open .lang__globe{color:var(--gold-600);}

/* in the sticky header (tablet / mobile) */
.lang--header{display:none;}
.lang--header .lang__btn{
  height:38px;padding:0 13px 0 12px;font-size:13px;
  color:var(--maroon);background:#FBEFE6;border:1px solid #F3DECF;
}
.lang--header .lang__globe{font-size:15px;color:var(--gold-600);}
.lang--header .lang__btn:hover,
.lang--header.is-open .lang__btn{background:var(--peach);border-color:var(--gold-300);}

.lang__btn:focus-visible{outline:2px solid var(--gold-400);outline-offset:2px;}

/* dropdown panel */
.lang__panel{
  position:absolute;top:calc(100% + 12px);right:0;z-index:90;
  width:300px;max-height:calc(100vh - 130px);overflow-y:auto;overscroll-behavior:contain;
  padding:14px;border-radius:18px;
  background:#fff;color:var(--ink);text-align:left;letter-spacing:0;
  box-shadow:0 24px 54px rgba(92,10,40,.22),0 0 0 1px rgba(92,10,40,.06);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.lang.is-open .lang__panel{opacity:1;visibility:visible;transform:none;}

.lang__head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 4px 10px;margin-bottom:8px;border-bottom:1px dashed #EEDCCD;
}
.lang__title{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold-600);
}
.lang__title i{font-size:15px;}
.lang__hint{font-family:var(--ff-deva);font-size:12.5px;font-weight:600;color:var(--maroon);}

.lang__list{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.lang__opt{
  position:relative;width:100%;
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:7px 26px 7px 11px;border-radius:11px;text-align:left;
  transition:background .25s var(--ease), box-shadow .25s var(--ease);
}
.lang__native{font-size:14px;font-weight:600;line-height:1.35;color:var(--ink);transition:color .25s var(--ease);}
.lang__opt[lang="hi"] .lang__native,
.lang__opt[lang="mr"] .lang__native,
.lang__opt[lang="ne"] .lang__native{font-family:var(--ff-deva);}
.lang__en{font-size:10.5px;letter-spacing:.3px;color:#8C8992;}
.lang__tick{
  position:absolute;right:10px;top:50%;margin-top:-6px;
  font-size:11px;color:var(--maroon);opacity:0;transform:scale(.4);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.lang__opt:hover{background:var(--cream);}
.lang__opt:hover .lang__native{color:var(--maroon);}
.lang__opt:focus-visible{outline:none;background:var(--cream);box-shadow:inset 0 0 0 1.5px var(--gold-400);}
.lang__opt.is-active{background:linear-gradient(120deg,#FCE9F0,#FBEFE6);}
.lang__opt.is-active .lang__native{color:var(--maroon);}
.lang__opt.is-active .lang__tick{opacity:1;transform:none;}


@media (max-width:1080px){
  .lang--topbar{display:none;}
  .lang--header{display:block;margin-left:auto;}
  .header__inner{gap:12px;}
  .header__inner .nav__toggle{margin-left:0;}
  /* align the panel with the container edge (menu toggle 42px + 12px gap) */
  .lang--header .lang__panel{right:-54px;width:min(300px,calc(100vw - 36px));}
}
@media (max-width:560px){
  .brand{min-width:0;flex:0 1 auto;}
  .brand img,.header.is-stuck .brand img{height:auto;max-height:50px;max-width:100%;}
}
@media (max-width:400px){
  .lang--header .lang__caret{display:none;}
  .lang--header .lang__btn{padding:0 11px;}
}
@media (max-height:520px){
  .lang__list{grid-template-columns:repeat(3,1fr);}
  .lang__panel,.lang--header .lang__panel{width:min(420px,calc(100vw - 36px));}
}

/* ---------- hide Google Translate's own UI ---------- */
#google_translate_element{position:absolute!important;left:-9999px!important;top:0;width:1px;height:1px;overflow:hidden;}
body > .skiptranslate,
iframe.skiptranslate,
.goog-te-banner-frame,
.goog-te-balloon-frame,
.goog-tooltip,
#goog-gt-tt,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-yAWNEb-L7lbkb{display:none!important;}
body{top:0!important;} /* Google pushes the page down for its banner */
.goog-text-highlight,
[class*="VIpgJd-yAWNEb-VIpgJd-fmcmS"]{background:none!important;box-shadow:none!important;}

/* ==========================================================================
   HEADER DROPDOWNS — Gallery + Explore (Views/Shared/_Header.cshtml + js/site-nav.js)
   Desktop: floating panels opened on hover, click or keyboard.
   Tablet/mobile (inside the slide-in drawer): accordions.
   ========================================================================== */
.nav__item--drop{position:relative;}

.nav__trigger{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  font-size:15px;font-weight:600;line-height:inherit;color:#221F26;padding-block:6px;
  transition:color .3s var(--ease);
}
.nav__trigger::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--maroon));
  transition:width .35s var(--ease);
}
.nav__caret{font-size:9.5px;color:var(--gold);transition:transform .35s var(--ease);}
.nav__trigger:hover,.nav__trigger.is-active,.nav__item--drop.is-open .nav__trigger{color:var(--gold-600);}
.nav__trigger.is-active::after,.nav__item--drop.is-open .nav__trigger::after{width:100%;}
.nav__item--drop.is-open .nav__caret{transform:rotate(180deg);}
.nav__trigger:focus-visible{outline:2px solid var(--gold-400);outline-offset:4px;border-radius:4px;}

.nav__drop{
  position:absolute;top:calc(100% + 24px);left:50%;z-index:90;
  opacity:0;visibility:hidden;
  transform:translate(-50%,12px) scale(.97);transform-origin:50% 0;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.nav__drop-in{
  position:relative;padding:14px;border-radius:0;background:#fff;
  box-shadow:0 30px 64px rgba(92,10,40,.22),0 0 0 1px rgba(92,10,40,.06);
}
/* keeps the pointer "inside" while it crosses the gap under the trigger */
.nav__drop::before{content:"";position:absolute;left:-20px;right:-20px;top:-26px;height:26px;}
/* little notch pointing at the trigger */
.nav__drop-in::before{
  content:"";position:absolute;top:-6px;left:50%;width:14px;height:14px;margin-left:-7px;
  background:#fff;transform:rotate(45deg);
  box-shadow:-1px -1px 0 rgba(92,10,40,.06);
}
.nav__item--drop.is-open .nav__drop{opacity:1;visibility:visible;transform:translate(-50%,0);}

/* the Explore panel sits near the right edge, so it hangs from the trigger's right side */
.nav__drop--end{left:auto;right:-34px;transform:translateY(12px) scale(.97);transform-origin:100% 0;}
.nav__item--drop.is-open .nav__drop--end{transform:none;}
.nav__drop--end .nav__drop-in::before{left:auto;right:62px;margin-left:0;}

/* ---------- Gallery: two picture cards ---------- */
.nav__cards{display:grid;grid-template-columns:repeat(2,212px);gap:12px;}
.nav__card{
  display:block;padding:6px 6px 8px;
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
.nav__card-media{position:relative;display:block;height:124px;overflow:hidden;background:var(--maroon-900);}
.nav__card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.nav__card-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(40,8,20,.55));
}
.nav__card-badge{
  position:absolute;left:10px;bottom:10px;z-index:1;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--maroon);font-size:13.5px;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
  transition:transform .4s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.nav__card--video .nav__card-badge i{margin-left:2px;}
.nav__card--video .nav__card-badge::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:2px solid rgba(255,255,255,.7);animation:ripple 2.4s ease-out infinite;
}
.nav__card-copy{display:block;padding:10px 6px 0;}
.nav__card-copy b{
  display:flex;align-items:center;gap:7px;
  font-family:var(--ff-serif);font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.25;
  transition:color .3s var(--ease);
}
.nav__card-copy b i{font-size:11px;color:var(--gold);transition:transform .35s var(--ease);}
.nav__card-copy small{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:#8C8992;}
.nav__card:hover,.nav__card:focus-visible{background:var(--cream);outline:none;}
.nav__card:hover .nav__card-media img,.nav__card:focus-visible .nav__card-media img{transform:scale(1.08);}
.nav__card:hover .nav__card-badge,.nav__card:focus-visible .nav__card-badge{transform:scale(1.1);background:var(--maroon);color:#fff;}
.nav__card:hover b,.nav__card:focus-visible b{color:var(--maroon);}
.nav__card:hover b i,.nav__card:focus-visible b i{transform:translateX(4px);}
.nav__card.is-current{background:linear-gradient(120deg,#FCE9F0,#FBEFE6);}
.nav__card.is-current b::after{
  content:"";width:7px;height:7px;margin-left:auto;margin-right:2px;border-radius:50%;
  background:var(--pink);box-shadow:0 0 0 3px rgba(210,28,114,.18);
}

/* ---------- Explore: icon rows ---------- */
.nav__drop--explore .nav__drop-in{width:548px;}
.nav__drop-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 8px 10px;margin-bottom:6px;border-bottom:1px dashed #EEDCCD;
}
.nav__drop-title{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold-600);
}
.nav__drop-title i{font-size:14px;}
.nav__drop-hint{font-family:var(--ff-script);font-size:18px;font-weight:600;line-height:1;color:var(--maroon);}

.nav__rows{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px;}
.nav__row{
  display:flex;align-items:center;gap:12px;padding:9px 10px;
  transition:background .25s var(--ease);
}
.nav__row-ic{
  flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  font-size:15px;color:#fff;
  background:linear-gradient(140deg,var(--maroon-600),var(--maroon-900));
  box-shadow:0 8px 16px rgba(142,16,67,.2);
  transition:transform .4s var(--ease);
}
.nav__row-ic--pink{background:linear-gradient(140deg,var(--pink-2),var(--maroon-600));box-shadow:0 8px 16px rgba(210,28,114,.24);}
.nav__row-ic--gold{background:linear-gradient(140deg,var(--gold-300),var(--gold));color:#4A2708;box-shadow:0 8px 16px rgba(201,135,60,.28);}
.nav__row-ic--deep{background:linear-gradient(140deg,#3B1F4A,#6E0C31);box-shadow:0 8px 16px rgba(59,31,74,.26);}
.nav__row-copy{min-width:0;}
.nav__row-copy b{display:block;font-size:14px;font-weight:600;line-height:1.3;color:var(--ink);transition:color .25s var(--ease);}
.nav__row-copy small{display:block;font-size:11.5px;line-height:1.4;color:#8C8992;}
.nav__row:hover,.nav__row:focus-visible{background:var(--cream);outline:none;}
.nav__row:hover .nav__row-ic,.nav__row:focus-visible .nav__row-ic{transform:rotate(-8deg) scale(1.07);}
.nav__row:hover b,.nav__row:focus-visible b{color:var(--maroon);}
.nav__row.is-current{background:linear-gradient(120deg,#FCE9F0,#FBEFE6);}
.nav__row.is-current b{color:var(--maroon);}

.nav__drop-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:8px;padding:11px 16px;
  font-size:12.5px;color:#F7DCE6;
  background:
    radial-gradient(circle at 92% -40%,rgba(240,206,126,.35),transparent 55%),
    linear-gradient(100deg,var(--maroon-900),var(--maroon-600));
}
.nav__drop-foot a{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:#fff;white-space:nowrap;}
.nav__drop-foot a i{color:var(--gold-300);}
.nav__drop-foot a:hover{color:var(--gold-200);}

@media (max-width:1200px){
  .nav__drop--explore .nav__drop-in{width:500px;}
}

/* ---------- inside the slide-in drawer ---------- */
@media (max-width:1080px){
  /* while the drawer is open the header (drawer + backdrop inside it) sits above the top bar and page */
  .header.is-nav-open{z-index:90;}
  .nav__list > li{width:100%;}
  /* triggers match the drawer's icon rows (style.css) */
  .nav__trigger{
    display:flex;width:100%;justify-content:flex-start;gap:14px;
    padding:9px 12px;font-size:15.5px;text-align:left;color:#221F26;
    transition:background .25s var(--ease),color .25s var(--ease);
  }
  .nav__trigger::after{display:none;}
  .nav__trigger:hover,.nav__trigger.is-active,.nav__item--drop.is-open .nav__trigger{color:var(--maroon);}
  .nav__trigger:hover,.nav__item--drop.is-open .nav__trigger{background:var(--cream);}
  .nav__trigger:focus-visible{outline-offset:-2px;border-radius:0;}
  .nav__trigger:hover .nav__ic{transform:rotate(-8deg);}
  .nav__trigger.is-active .nav__ic{background:linear-gradient(140deg,var(--maroon-600),var(--maroon-900));color:#fff;}
  .nav__caret{
    margin-left:auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
    font-size:10px;background:#FBEFE6;color:var(--maroon);
  }
  .nav__item--drop.is-open .nav__caret{background:var(--maroon);color:#fff;}
  /* an expanded section must not stay focusable while the drawer is closed */
  .nav:not(.is-open) .nav__item--drop.is-open .nav__drop{visibility:hidden;}

  .nav__drop,.nav__drop--end{
    position:static;display:grid;grid-template-rows:0fr;
    opacity:1;visibility:hidden;transform:none;
    transition:grid-template-rows .45s var(--ease),visibility .45s;
  }
  .nav__item--drop.is-open .nav__drop,.nav__item--drop.is-open .nav__drop--end{grid-template-rows:1fr;visibility:visible;transform:none;}
  .nav__drop::before,.nav__drop-in::before{display:none;}
  .nav__drop-in,.nav__drop--explore .nav__drop-in{
    min-height:0;overflow:hidden;width:auto;padding:0;border-radius:0;background:none;box-shadow:none;
  }

  /* expanded content sits on the same cream as the open trigger, as one block */
  .nav__cards{grid-template-columns:1fr 1fr;gap:8px;padding:4px 12px 12px;background:var(--cream);}
  .nav__card{padding:0;}
  .nav__card:hover,.nav__card:focus-visible{background:none;}
  .nav__card.is-current{background:none;}
  .nav__card-media{height:84px;}
  .nav__card.is-current .nav__card-media{box-shadow:0 0 0 2px var(--maroon);}
  .nav__card-badge{width:28px;height:28px;font-size:11px;left:7px;bottom:7px;}
  .nav__card-copy{padding:7px 2px 0;}
  .nav__card-copy b{font-family:var(--ff-sans);font-size:13.5px;font-weight:600;}
  .nav__card-copy b i,.nav__card-copy small{display:none;}

  .nav__drop-head,.nav__drop-foot{display:none;}
  .nav__rows{
    position:relative;grid-template-columns:1fr;gap:0;
    padding:2px 12px 10px 30px;background:var(--cream);
  }
  .nav__rows::before{ /* guide line hanging from the Explore icon */
    content:"";position:absolute;left:29px;top:0;bottom:14px;width:1px;background:#E9D6C6;
  }
  .nav__row{padding:7px 8px 7px 20px;gap:11px;}
  .nav__row:hover,.nav__row:focus-visible{background:#fff;}
  .nav__row.is-current{background:#fff;box-shadow:inset 3px 0 0 var(--maroon);}
  .nav__row-ic{width:30px;height:30px;border-radius:9px;font-size:12px;box-shadow:none;}
  .nav__row-copy b{font-size:14px;}
  .nav__row-copy small{font-size:11px;}
}
@media (prefers-reduced-motion:reduce){
  .nav__card--video .nav__card-badge::after{animation:none;}
}