/* AM_LAYOUT_20260928 - shared layout fixes for every calculator page */
/* 1) free result (#mtVizX etc.) sits as 3rd+ child of the 2-col .mt-resgrid -> give it the full width, so its cards fill both columns */
.mt-resgrid > :nth-child(n+3){grid-column:1 / -1 !important;min-width:0}
.mt-resgrid > :is(#mtVizX,#mtGuide,#ssViz,#mtResult,.fx-extra){grid-column:1 / -1 !important}
/* 2) phones: small, even side gaps on every page */
@media (max-width:640px){
  .wrap{padding-left:10px !important;padding-right:10px !important}
  .container{padding-left:10px !important;padding-right:10px !important}
  .mt-resgrid,.mt-chartwrap,.mt-tablewrap{min-width:0}
  .mt-chartwrap,.mt-tablewrap{padding:12px !important}
  .mt-tablewrap{overflow-x:auto}
}

/* AM_HEADER_20260928 - phone + tablet: one identical compact header bar: logo | EN/हि | Get My Report | search | menu */
@media (max-width:1024px){
  .navbar{padding:0 12px !important;height:64px !important;gap:8px}
  .nav-logo{font-size:22px !important;white-space:nowrap}
  .nav-links{display:flex !important;align-items:center;gap:8px;margin:0 0 0 auto !important;padding:0 !important;list-style:none}
  .nav-links > li{display:none !important}
  .nav-links > li.bv-lang, .nav-links > li:has(> .nav-cta){display:flex !important;align-items:center}
  .nav-cta{padding:8px 14px !important;font-size:13px !important;white-space:nowrap;box-shadow:none !important}
  .bv-srch-m{margin-left:4px !important;margin-right:2px !important}
  .bv-burger{font-size:24px !important;padding:2px 4px !important}
  .bv-mobile{top:64px !important}
  .bv-srch-m .bv-spanel,.bv-spanel{top:66px !important}
}
@media (max-width:420px){
  .navbar{padding:0 8px !important;gap:5px}
  .nav-logo{font-size:19px !important}
  .nav-links{gap:5px}
  .nav-cta{padding:7px 10px !important;font-size:11.5px !important}
  .nav-links > li.bv-lang a{padding:4px 7px !important;font-size:12px !important}
}

/* AM_FIX2_20260928 */
/* free result full width: whatever grid it sits in, every ancestor of the result box spans all columns; no width cap on the box */
:is(div,section,main,article):has(> :is(#mtVizX,#mtGuide,#ssViz,#mtResult,.fx-extra)),
:is(div,section,main,article):has(:is(#mtVizX,#mtGuide,#ssViz,#mtResult,.fx-extra)){grid-column:1 / -1 !important}
:is(#mtVizX,#mtGuide,#ssViz,#mtResult,.fx-extra){grid-column:1 / -1 !important;max-width:none !important;width:100% !important;box-sizing:border-box}
/* phone + tablet header: logo LEFT, search right next to the menu button */
@media (max-width:1024px){
  .navbar{justify-content:flex-start !important}
  .nav-logo{order:0 !important;margin-right:auto !important}
  .nav-links{order:1 !important}
  .bv-srch,.bv-srch-m{order:2 !important;margin-left:6px !important;margin-right:4px !important}
  .bv-burger{order:3 !important;margin-left:2px !important}
}

/* AM_FIX3_20260928: any result slot (id contains Viz / Result) - e.g. career #cpViz - full width in whatever grid holds it */
:is(div,section,main,article):has(:is([id*="Viz"],[id*="Result"],[id*="viz"],[id*="result"])){grid-column:1 / -1 !important}
:is([id*="Viz"],[id*="Result"],[id*="viz"],[id*="result"]){grid-column:1 / -1 !important;max-width:none !important;width:100% !important;box-sizing:border-box}

/* AM_FIX4_20260928: accordion layout for every calculator (independent of the result-slot name) */
:is(div,section,main,article):has(:is(.card,.c).acc){grid-column:1 / -1 !important}
:is(div,section,main,article):has(> :is(.card,.c).acc){width:100% !important;box-sizing:border-box}
@media (min-width:900px){
  :is(div,section,main,article):has(> :is(.card,.c).acc){grid-auto-flow:row dense !important}
  :is(.card,.c).acc:is(.on,.open,.show,.active,.expanded,.is-open,[open],[aria-expanded="true"]),
  :is(.card,.c).acc:has([aria-expanded="true"]){grid-column:1 / -1 !important}
}

/* AM_MENU_20260928 */
.bv-mob-grp{display:none}
.bv-mob-grp.open{display:block}
.bv-mob-toggle{cursor:pointer;position:relative;padding-right:28px !important;user-select:none}
.bv-mob-toggle::after{content:"\25BE";position:absolute;right:8px;top:50%;transform:translateY(-50%);transition:transform .2s;color:#D4AF37}
.bv-mob-toggle.on::after{transform:translateY(-50%) rotate(180deg)}
/* phone: report option names always visible, wrap instead of hiding */
@media (max-width:640px){
  .lang-pick .lp-lab,.lang-opt span{display:block !important;visibility:visible !important;min-width:0;white-space:normal !important;overflow:visible !important}
  .lang-opt{flex-wrap:nowrap;gap:10px}
  .lang-opt span{flex:1 1 auto;font-size:1rem !important;line-height:1.3}
  .lang-opt small{white-space:normal !important}
}

/* AM_MENU5_CSS: one arrow only (hide the heading's old built-in arrow), groups open/close by class */
.bv-mob-h.bv-mob-toggle > span:last-child:not(:first-child){display:none !important}
#bvMobile .bv-mob-grp{display:none !important}
#bvMobile .bv-mob-grp.open{display:block !important}

/* AM_BADGE_CSS: "Report" badge in the phone drawer */
#bvMobile a .am-rep-badge{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:20px;font-size:10.5px;font-weight:700;letter-spacing:.04em;line-height:1.4;vertical-align:middle;
  background:linear-gradient(135deg,#D4AF37,#E8C97A);color:#0A0B0D !important;text-transform:uppercase}
/* AM_SIZE_20260928: phone menu - bigger menu button, bigger section headings, readable golden category labels */
@media (max-width:1024px){
  .bv-burger{font-size:30px !important;padding:4px 6px !important;line-height:1 !important}
  #bvMobile .bv-mob-h,#bvMobile .bv-mob-h span:first-child{font-size:17px !important;font-weight:700 !important}
  #bvMobile > .bv-mob-cat,#bvMobile > div.bv-mob-toggle:not(.bv-mob-h){font-size:17px !important;font-weight:700 !important;padding:14px 4px !important}
  #bvMobile .bv-mob-grp .bv-mob-cat,#bvCalcWrap .bv-mob-cat{font-size:14.5px !important;font-weight:700 !important;letter-spacing:.06em !important;padding:12px 4px 8px !important;opacity:1 !important}
  #bvMobile .bv-mob-toggle::after{font-size:15px}
}
/* AM_CARD_20260928: phone drawer headings as tappable cards - border, press effect, bigger animated arrow, smooth open */
@media (max-width:1024px){
  #bvMobile .bv-mob-h,#bvMobile .bv-mob-h *{font-size:18px !important;font-weight:700 !important}
  #bvMobile .bv-mob-toggle{display:block;position:relative;margin:10px 0 !important;padding:15px 54px 15px 16px !important;
    border:1px solid rgba(212,175,55,.45) !important;border-radius:12px !important;
    background:linear-gradient(135deg,rgba(212,175,55,.10),rgba(255,255,255,.02)) !important;
    box-shadow:0 2px 10px rgba(0,0,0,.35);cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:transform .12s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}
  #bvMobile .bv-mob-toggle:active{transform:scale(.97)}
  #bvMobile .bv-mob-toggle.on{border-color:#D4AF37 !important;background:linear-gradient(135deg,rgba(212,175,55,.22),rgba(212,175,55,.06)) !important;box-shadow:0 4px 16px rgba(212,175,55,.18)}
  #bvMobile .bv-mob-grp .bv-mob-toggle{padding:12px 50px 12px 14px !important;margin:8px 0 !important;border-color:rgba(212,175,55,.32) !important;font-size:15px !important}
  #bvMobile .bv-mob-toggle::after{content:"\25BE" !important;position:absolute;right:12px;top:50%;width:30px;height:30px;margin-top:-15px;
    display:flex;align-items:center;justify-content:center;font-size:20px !important;line-height:1;color:#D4AF37;
    border:1px solid rgba(212,175,55,.55);border-radius:50%;background:rgba(10,11,13,.6);
    transform:none !important;transition:transform .25s ease;animation:amNudge 1.8s ease-in-out infinite}
  #bvMobile .bv-mob-toggle.on::after{transform:rotate(180deg) !important;animation:none}
  #bvMobile .bv-mob-grp.open{animation:amDrop .25s ease}
}
@keyframes amNudge{0%,100%{translate:0 0}50%{translate:0 3px}}
@keyframes amDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* AM_FONT20_20260928: phone drawer - every heading AND every golden category label at 20px bold */
@media (max-width:1024px){
  #bvMobile .bv-mob-h,#bvMobile .bv-mob-h *,
  #bvMobile .bv-mob-toggle,#bvMobile .bv-mob-toggle *,
  #bvMobile .bv-mob-cat,#bvMobile .bv-mob-cat *,
  #bvMobile .bv-mob-grp .bv-mob-toggle,#bvMobile .bv-mob-grp .bv-mob-toggle *,
  #bvCalcWrap .bv-mob-cat,#bvCalcWrap .bv-mob-cat *{font-size:20px !important;font-weight:700 !important;line-height:1.3 !important}
}
/* AM_FONT20B_20260928: stronger selectors so header.php's own later rules cannot shrink "Free Calculators" */
@media (max-width:1024px){
  html body #bvMobile .bv-mob-h,html body #bvMobile .bv-mob-h *,
  html body #bvMobile .bv-mob-toggle,html body #bvMobile .bv-mob-toggle *,
  html body #bvMobile .bv-mob-cat,html body #bvMobile .bv-mob-cat *{font-size:20px !important;font-weight:700 !important;line-height:1.3 !important}
}
/* AM_FONTFAM_20260928: "Free Calculators" uses the same font as the other drawer headings (Cormorant looked smaller at the same size) */
@media (max-width:1024px){html body #bvMobile .bv-mob-h,html body #bvMobile .bv-mob-h *{font-family:inherit !important;letter-spacing:normal !important}}


/* AM_UNIFORM_20260928: EVERY drawer heading (top level AND the ones that appear after a tap) looks exactly like "Free Calculators" */
@media (max-width:1024px){
  html body #bvMobile .bv-mob-h,
  html body #bvMobile .bv-mob-toggle,
  html body #bvMobile .bv-mob-grp .bv-mob-toggle,
  html body #bvMobile .bv-mob-cat{
    display:flex !important;align-items:center;justify-content:space-between;position:relative;
    font-family:inherit !important;font-size:20px !important;font-weight:700 !important;line-height:1.3 !important;
    color:#D4AF37 !important;text-transform:none !important;letter-spacing:normal !important;opacity:1 !important;
    margin:10px 0 !important;padding:15px 54px 15px 16px !important;
    border:1px solid rgba(212,175,55,.45) !important;border-radius:12px !important;
    background:linear-gradient(135deg,rgba(212,175,55,.10),rgba(255,255,255,.02)) !important;box-shadow:0 2px 10px rgba(0,0,0,.35)}
  html body #bvMobile .bv-mob-h *,html body #bvMobile .bv-mob-toggle *,html body #bvMobile .bv-mob-cat *{
    font-family:inherit !important;font-size:20px !important;font-weight:700 !important;color:inherit !important}
  html body #bvMobile .bv-mob-toggle.on,html body #bvMobile .bv-mob-grp .bv-mob-toggle.on{
    border-color:#D4AF37 !important;background:linear-gradient(135deg,rgba(212,175,55,.22),rgba(212,175,55,.06)) !important;box-shadow:0 4px 16px rgba(212,175,55,.18)}
}
/* AM_YEARLYCARD_20260928: the "Yearly 2027 · …" headings (no class, inline style) get the same card as Free Calculators */
@media (max-width:1024px){
  html body #bvMobile > div[style*="letter-spacing:1.2px"]{
    display:flex !important;align-items:center;justify-content:space-between;position:relative;
    font-family:inherit !important;font-size:20px !important;font-weight:700 !important;line-height:1.3 !important;
    color:#D4AF37 !important;text-transform:none !important;letter-spacing:normal !important;
    margin:10px 0 !important;padding:15px 54px 15px 16px !important;
    border:1px solid rgba(212,175,55,.45) !important;border-radius:12px !important;
    background:linear-gradient(135deg,rgba(212,175,55,.10),rgba(255,255,255,.02)) !important;box-shadow:0 2px 10px rgba(0,0,0,.35)}
}
/* AM_GAP_20260928: more room between the text and the border, and cards inset from the drawer edges */
@media (max-width:1024px){
  html body #bvMobile .bv-mob-h,html body #bvMobile .bv-mob-toggle,html body #bvMobile .bv-mob-grp .bv-mob-toggle,
  html body #bvMobile .bv-mob-cat,html body #bvMobile > div[style*="letter-spacing:1.2px"]{
    padding:17px 60px 17px 20px !important;margin:12px 4px !important;gap:10px}
  html body #bvMobile .am-emo{margin-right:8px;flex:none}
  html body #bvMobile .bv-mob-grp{padding:2px 4px 6px}
}
/* AM_ALIGN_20260928: emoji + name sit together from the left, exactly like "Free Calculators" (arrow stays on the right) */
@media (max-width:1024px){
  html body #bvMobile .bv-mob-h,html body #bvMobile .bv-mob-toggle,html body #bvMobile .bv-mob-grp .bv-mob-toggle,
  html body #bvMobile .bv-mob-cat,html body #bvMobile > div[style*="letter-spacing:1.2px"]{justify-content:flex-start !important;text-align:left !important;gap:0 !important}
  html body #bvMobile .am-emo{margin-right:10px !important}
}
/* AM_LINKS_20260928: links inside every opened group spaced exactly like the drawer's own links (Horoscope / Yearly 2027 lists were cramped) */
@media (max-width:1024px){
  html body #bvMobile .bv-mob-grp > a,html body #bvMobile .bv-mob-grp a.bv-mob-link{
    display:block !important;padding:14px 8px !important;margin:0 !important;
    border-bottom:1px solid rgba(212,175,55,.14) !important;font-size:17px !important;line-height:1.35 !important;
    color:var(--htext,#F5EEDC) !important;text-decoration:none !important}
  html body #bvMobile .bv-mob-grp > a:last-child{border-bottom:none !important}
}
/* AM_GAP2_20260928: emoji clearly away from the border + every opened list evenly spaced (strongest selectors) */
@media (max-width:1024px){
  html body #bvMobile#bvMobile .bv-mob-h,html body #bvMobile#bvMobile .bv-mob-toggle,html body #bvMobile#bvMobile .bv-mob-cat,
  html body #bvMobile#bvMobile > div[style*="letter-spacing:1.2px"]{padding-left:22px !important;padding-right:60px !important;padding-top:17px !important;padding-bottom:17px !important}
  html body #bvMobile#bvMobile .am-emo,html body #bvMobile#bvMobile .bv-mob-h > span:first-child{margin-left:4px !important;margin-right:12px !important;display:inline-block}
  html body #bvMobile#bvMobile .bv-mob-grp a:not(.bv-mob-toggle){
    display:block !important;padding:14px 10px !important;margin:0 !important;border-bottom:1px solid rgba(212,175,55,.14) !important;
    font-size:17px !important;line-height:1.35 !important;color:var(--htext,#F5EEDC) !important;text-decoration:none !important}
}
/* AM_GAP3_20260928: a little tighter - compact but not cramped */
@media (max-width:1024px){
  html body #bvMobile#bvMobile .bv-mob-h,html body #bvMobile#bvMobile .bv-mob-toggle,html body #bvMobile#bvMobile .bv-mob-cat,
  html body #bvMobile#bvMobile > div[style*="letter-spacing:1.2px"]{padding:13px 56px 13px 16px !important;margin:8px 2px !important}
  html body #bvMobile#bvMobile .am-emo,html body #bvMobile#bvMobile .bv-mob-h > span:first-child{margin-left:0 !important;margin-right:8px !important}
  html body #bvMobile#bvMobile .bv-mob-grp a:not(.bv-mob-toggle){padding:11px 10px !important}
}
/* AM_NOCHART_20260929: result table takes the full width when a page has no chart */
.mt-resgrid:not(:has(> .mt-chartwrap)),.mt-resgrid:has(> .mt-chartwrap[hidden]){grid-template-columns:1fr !important}
.mt-chartwrap[hidden]{display:none !important}

/* AM_MOBILE_TIGHT_20260930: phones - free result uses the screen width (tablet/desktop untouched) */
@media (max-width:600px){
  section.calc{padding-left:6px!important;padding-right:6px!important}
  section.calc .wrap{padding-left:0!important;padding-right:0!important}
  #mtResult{margin-left:0!important;margin-right:0!important;width:100%!important;max-width:100%!important}
  #mtResult > div, #mtResult .mt-resgrid, #mtResult .rep-unlock, #mtResult .mt-keyplanets{margin-left:0!important;margin-right:0!important}
  #mtResult > div:not([hidden]):not([data-am-chartstub]){padding-left:12px!important;padding-right:12px!important}
  #mtResult .mt-tablewrap, #mtResult .mt-chartwrap, #mtResult .mt-keyplanets, #mtResult .rep-unlock{padding-left:12px!important;padding-right:12px!important}
  #mtResult table{width:100%!important}
  [id$="BuyBox"], .lang-pick, #mtBuy{max-width:100%!important;box-sizing:border-box}
}

/* AM_LANGOPT_20260930: EN / HI / Both option = one clean row that grows with its text (every page, every screen) */
.lang-pick{width:100%!important;max-width:460px;box-sizing:border-box}
.lang-pick .lang-opt, label.lang-opt{display:flex!important;flex-direction:row!important;align-items:center!important;gap:12px!important;
  width:100%!important;max-width:100%!important;box-sizing:border-box!important;height:auto!important;min-height:58px!important;
  padding:12px 14px!important;overflow:visible!important;position:relative!important;white-space:normal!important;text-align:left!important;line-height:1.3!important}
.lang-pick .lang-opt > input, label.lang-opt > input{flex:0 0 auto!important;position:static!important;margin:0!important;width:18px!important;height:18px!important;opacity:1}
.lang-pick .lang-opt > span, label.lang-opt > span{flex:1 1 auto!important;min-width:0!important;position:static!important;display:flex!important;flex-direction:column!important;
  white-space:normal!important;overflow-wrap:anywhere;transform:none!important;left:auto!important;top:auto!important;width:auto!important;margin:0!important}
.lang-pick .lang-opt > span small, label.lang-opt > span small{display:block!important;position:static!important;white-space:normal!important;margin-top:2px;font-size:.78em;opacity:.8}
.lang-pick .lang-opt > b, label.lang-opt > b{flex:0 0 auto!important;position:static!important;margin:0 0 0 auto!important;white-space:nowrap!important;transform:none!important}
@media (max-width:420px){ .lang-pick .lang-opt, label.lang-opt{gap:10px!important;padding:11px 12px!important} }

/* AM_R2_CRUMB: breadcrumb tap targets >= 24px */
.breadcrumb a,.crumbs a,.crumb a,nav[aria-label="breadcrumb"] a,nav[aria-label="Breadcrumb"] a{display:inline-flex;align-items:center;min-height:24px;padding:2px 0}