/* ═══════════════════════════════════════════
   KundaliStar — Shared Design System v1.0
   Used by all pages for visual consistency
═══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --maroon:#8B1A2F;--maroon-d:#6B1223;--maroon-l:#a52038;
  --amber:#E6920A;--amber-l:#f5a623;--amber-bg:#FFF3DC;
  --cream:#FFF8F2;--bg:#F7F0E8;--white:#FFFFFF;
  --border:#E8D5C4;--border2:#d4bfaa;
  --text:#1a1208;--text2:#5a4030;--text3:#8a7060;
  --green:#2e7d32;--blue:#2c4a8a;--teal:#0d7377;
  --sans:'Poppins',sans-serif;
  --deva:'Noto Sans Devanagari',sans-serif;
  --radius:8px;
  --shadow:0 2px 12px rgba(139,26,47,.08);
  --shadow2:0 4px 24px rgba(139,26,47,.14);
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--text);font-size:14px;line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button,input,select{font-family:var(--sans)}
img{display:block;max-width:100%}

/* ── LAYOUT ── */
.container{max-width:1400px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-elevated{background:var(--white);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow2)}

/* ── TOPBAR ── */
.ks-topbar{background:var(--maroon);color:#fff;font-size:12px;padding:5px 0}
.ks-topbar .container{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ks-topbar-left{display:flex;align-items:center;gap:14px;overflow:hidden;white-space:nowrap}
.ks-topbar-left a{color:rgba(255,255,255,.85);font-size:11px;white-space:nowrap;transition:color .15s}
.ks-topbar-left a:hover{color:#fff}
.ks-topbar-right{display:flex;align-items:center;gap:3px;flex-shrink:0}
.lang-btn{padding:3px 9px;border-radius:3px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,.35);font-family:var(--sans);line-height:1.4;transition:all .15s}
.lang-btn.active{background:#fff;color:var(--maroon)}
.lang-btn:not(.active){background:transparent;color:rgba(255,255,255,.82)}
.lang-btn:not(.active):hover{background:rgba(255,255,255,.15);color:#fff}
.ks-signin{color:rgba(255,255,255,.82);font-size:11px;cursor:pointer;margin-left:6px;white-space:nowrap}
.ks-topbar-sep{width:1px;height:14px;background:rgba(255,255,255,.25);margin:0 6px;flex-shrink:0}

/* ── HEADER ── */
.ks-header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:300;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.ks-header-row{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid #f0e4d8}
.ks-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none}
.ks-logo-icon{width:38px;height:38px;background:var(--maroon);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex-shrink:0}
.ks-logo-name{font-size:18px;font-weight:800;color:var(--maroon);line-height:1}
.ks-logo-tag{font-size:9px;color:var(--text3);letter-spacing:.02em}
.ks-search{flex:1;max-width:420px;position:relative}
.ks-search input{width:100%;padding:8px 36px 8px 14px;border:1.5px solid var(--border);border-radius:20px;font-size:12px;outline:none;background:var(--cream);font-family:var(--sans);color:var(--text);transition:border-color .2s}
.ks-search input:focus{border-color:var(--maroon)}
.ks-search-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:14px;pointer-events:none}
.ks-header-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.ks-btn-share{display:flex;align-items:center;gap:5px;background:var(--cream);border:1px solid var(--border);border-radius:6px;padding:7px 12px;font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;white-space:nowrap;transition:all .15s}
.ks-btn-share:hover{background:var(--amber-bg);border-color:var(--amber)}
.ks-btn-kundali{display:flex;align-items:center;gap:5px;background:var(--cream);border:1px solid var(--border);border-radius:6px;padding:7px 12px;font-size:12px;font-weight:600;color:var(--maroon);cursor:pointer;white-space:nowrap;transition:all .15s}
.ks-btn-kundali:hover{background:#fce8eb}
.ks-btn-new{background:var(--maroon);color:#fff;border:none;border-radius:6px;padding:8px 16px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s}
.ks-btn-new:hover{background:var(--maroon-d)}
.ks-btn-ai{background:linear-gradient(90deg,#1a7a7e,#1e3a5a);color:#fff;border:none;border-radius:6px;padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;white-space:nowrap}
.ks-ai-dot{width:6px;height:6px;border-radius:50%;background:#7fd8a8;flex-shrink:0;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ── SITE NAV ── */
.ks-nav{background:linear-gradient(180deg,#9a1a30 0%,#8B1A2F 100%);border-bottom:1px solid rgba(255,255,255,.1)}
.ks-nav .container{padding:0 24px}
.ks-nav-inner{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none}
.ks-nav-inner::-webkit-scrollbar{display:none}
.ks-nav-item{position:relative;flex-shrink:0}
.ks-nav-link{display:block;color:rgba(255,255,255,.88);font-size:13px;font-weight:500;padding:10px 15px;white-space:nowrap;transition:background .15s;cursor:pointer;text-decoration:none}
.ks-nav-link:hover,.ks-nav-link.active{background:rgba(255,255,255,.15);color:#fff}
.ks-nav-item.has-drop:hover .ks-dropdown{display:block}
.ks-dropdown{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--border);border-radius:0 0 var(--radius) var(--radius);min-width:210px;z-index:400;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.ks-dropdown a{display:block;padding:10px 16px;font-size:13px;color:var(--text2);border-bottom:1px solid var(--border);transition:background .15s;text-decoration:none}
.ks-dropdown a:last-child{border-bottom:none}
.ks-dropdown a:hover{background:var(--cream);color:var(--maroon)}
.ks-nav-ai{background:linear-gradient(90deg,rgba(13,115,119,.35),rgba(13,35,72,.35));border-left:2px solid rgba(127,216,168,.7)!important;color:rgba(127,216,168,1)!important}
.ks-nav-ai:hover{background:rgba(77,200,150,.15)!important;color:#7fd8a8!important}

/* ── BREADCRUMB ── */
.ks-breadcrumb{background:var(--cream);border-bottom:1px solid var(--border);padding:7px 0;font-size:12px;color:var(--text3)}
.ks-breadcrumb a{color:var(--maroon);transition:opacity .15s}
.ks-breadcrumb a:hover{opacity:.75}
.ks-breadcrumb .sep{margin:0 6px;opacity:.5}

/* ── PAGE TRANSITION ── */
.ks-page-enter{animation:ksEnter .2s ease-out}
@keyframes ksEnter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── UTILITIES ── */
.tag{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:600}
.tag-maroon{background:#fce8eb;color:var(--maroon)}
.tag-green{background:#e8f5e9;color:var(--green)}
.tag-amber{background:var(--amber-bg);color:#8B5E00}
.tag-blue{background:#e8f0fb;color:var(--blue)}
.btn-primary{background:var(--maroon);color:#fff;border:none;border-radius:6px;padding:10px 22px;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s}
.btn-primary:hover{background:var(--maroon-d)}
.btn-outline{background:transparent;color:var(--maroon);border:1.5px solid var(--maroon);border-radius:6px;padding:9px 20px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.btn-outline:hover{background:var(--maroon);color:#fff}
.scroll-top{position:fixed;bottom:24px;right:24px;width:40px;height:40px;background:var(--maroon);color:#fff;border:none;border-radius:50%;font-size:18px;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:var(--shadow2);z-index:500;transition:opacity .2s}
.scroll-top.vis{display:flex}

/* ── PROMO STRIP ── */
.ks-promo-strip{background:#fff8dc;border-bottom:1px solid #e8d87a;padding:7px 0;font-size:12px;color:#7a5c00;text-align:center}
.ks-promo-strip a{color:#5a3d00;font-weight:700;text-decoration:underline;margin-left:4px}
.ks-promo-strip a:hover{color:var(--maroon)}







/* ── RESULT TABS — underline style with strong active ── */
.result-tabs {
  display:flex;
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  background:var(--white);
  border-bottom:2px solid var(--border);
}
.result-tabs::-webkit-scrollbar{display:none}
.result-tab {
  flex-shrink:0;
  padding:13px 18px;
  font-size:12px;
  font-weight:600;
  color:var(--text3);
  cursor:pointer;
  border-bottom:3px solid transparent;
  margin-bottom:-2px;
  white-space:nowrap;
  transition:all .18s;
  background:transparent;
  position:relative;
}
.result-tab:hover {
  color:var(--maroon);
  background:var(--cream);
}
.result-tab.active {
  color:var(--maroon);
  border-bottom-color:var(--maroon);
  background:#fef5f7;
  font-weight:700;
}
/* Dot indicator on active tab */

.sec-nav-item,.tab-item{flex-shrink:0;white-space:nowrap}


/* ══════════════════════════════════════════
   UNIFIED INNER PAGE HERO — matches homepage
   cream warm tone, dark readable text
══════════════════════════════════════════ */
.page-hero {
  background:linear-gradient(160deg,#fdf3ea 0%,#fce8d0 60%,#f5d5b0 100%);
  padding:20px 0;
  position:relative;
  overflow:hidden;
  /* Subtle bottom shadow to separate from white content below */
  border-bottom:1px solid var(--border2);
  box-shadow:0 2px 12px rgba(139,26,47,.06);
}
/* Decorative maroon top-edge accent */
.page-hero::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--maroon),var(--amber),var(--maroon));
}
.page-hero .hero-title,
.page-hero h1.hero-title {
  font-size:22px !important;
  font-weight:800 !important;
  color:var(--maroon) !important;
  margin-bottom:4px;
  line-height:1.25;
}
.page-hero .hero-sub {
  font-size:12px !important;
  color:var(--text2) !important;
  margin-bottom:10px;
  line-height:1.7;
  max-width:540px;
}
.page-hero .hero-eyebrow {
  font-size:10px;
  font-weight:700;
  color:var(--amber) !important;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:5px;
}
.page-hero .hero-chip {
  background:rgba(139,26,47,.07) !important;
  border:1px solid rgba(139,26,47,.16) !important;
  border-radius:20px;
  padding:3px 10px;
  font-size:11px;
  color:var(--maroon) !important;
}
.page-hero .hero-stat {
  background:var(--white) !important;
  border:1px solid var(--border) !important;
  border-radius:8px;
  padding:8px 14px;
  text-align:center;
  min-width:76px;
  box-shadow:0 1px 6px rgba(139,26,47,.06);
}
.page-hero .hero-stat-val {
  font-size:18px;
  font-weight:800;
  color:var(--maroon) !important;
  line-height:1;
}
.page-hero .hero-stat-label {
  font-size:9px;
  color:var(--text3) !important;
  margin-top:2px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.page-hero .hero-inner,
.page-hero .hero-content {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
/* Any remaining white text in hero — force dark */
.page-hero * {
  /* Don't override buttons or coloured badges */
}

/* ═══ RESPONSIVE LAYER (desktop look unchanged above 1100px) ═══ */
html,body{max-width:100%}
img,svg,video,canvas{max-width:100%}
table{max-width:100%}
.ks-nav-inner{-webkit-overflow-scrolling:touch}
@media(max-width:1100px){
  .ks-btn-share{display:none}
  .ks-search{max-width:none;min-width:120px}
  .container,.ks-nav .container{padding:0 18px}
}
@media(max-width:900px){
  .ks-topbar-left a:nth-child(n+4){display:none}
  .ks-header-row{flex-wrap:wrap;row-gap:8px}
  .ks-search{order:3;flex:1 0 100%;max-width:none}
  .ks-btn-kundali{display:none}
}
@media(max-width:640px){
  .container,.ks-nav .container{padding:0 14px}
  .ks-topbar-left{display:none}
  .ks-topbar .container{justify-content:flex-end}
  .ks-topbar-right{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
  .ks-topbar-right::-webkit-scrollbar{display:none}
  .ks-signin{white-space:nowrap}
  .ks-logo-tag{display:none}
  .ks-logo-name{font-size:16px}
  .ks-header-actions{gap:6px}
  .ks-btn-new,.ks-btn-ai{padding:8px 10px;font-size:11px}
  .ks-promo-strip{font-size:11px;padding:6px 12px}
  .ks-breadcrumb{overflow-x:auto;white-space:nowrap}
}
@media(max-width:400px){
  .ks-btn-ai{font-size:0;padding:8px 10px}
  .ks-btn-ai::after{content:"✦ AI";font-size:11px}
  .ks-btn-ai .ks-ai-dot{display:none}
}

/* two-column layout tables (index) stack on tablet/phone */
@media(max-width:960px){
  table[style*="border-spacing:0"],table[style*="border-spacing:0"]>tbody,table[style*="border-spacing:0"]>tbody>tr,table[style*="border-spacing:0"]>tbody>tr>td{display:block;width:100%!important;min-width:0!important;box-sizing:border-box}
  table[style*="border-spacing:0"]>tbody>tr>td{padding-right:0!important;padding-left:0!important}
  table[style*="border-spacing:0"]>tbody>tr>td+td{margin-top:20px}
}

/* index.html */
@media(max-width:900px){body .horoscope-grid{grid-template-columns:repeat(2,1fr)}body .ai-stats-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){body .horoscope-grid{grid-template-columns:1fr}body .hero-headline{font-size:24px}body .form-grid-2,body .names-grid{grid-template-columns:1fr}}

/* data tables scroll inside themselves instead of widening the page */
@media(max-width:900px){
  table:not([style*="border-spacing:0"]){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* per-page phone fixes */
@media(max-width:640px){
  body .chart-tabs{overflow-x:auto;scrollbar-width:none}
  body .div-charts-grid{grid-template-columns:repeat(2,1fr)}
  body .result-count{margin-left:0!important;white-space:normal}
  body .sticky-cta-inner{flex-wrap:wrap}
  body .sticky-cta{top:0}
  div[style*="grid-template-columns:repeat(4,1fr);gap:0"]{grid-template-columns:1fr 1fr!important}
}

/* astrologers: filter column stacks above results on tablet/phone */
@media(max-width:860px){
  body .page-layout{flex-direction:column;align-items:stretch}
  body .filter-col{width:100%}
}

@media(max-width:640px){
  body .ai-chat-bubble{display:none!important}
  .ks-topbar-sep{display:none}
  .ks-topbar-right{gap:3px}
  .ks-signin{font-size:11px;padding-left:6px}
}

/* kundali-result: main/side columns and hero */
@media(max-width:900px){
  body .two-col{flex-direction:column;align-items:stretch}
  body .two-col>.side-col,body .two-col>.main-col{width:100%}
}
@media(max-width:640px){
  body .hero-inner{flex-direction:column;align-items:flex-start;gap:14px}
  body .hero-info{width:100%}
  body .hero-stats{flex-direction:row;width:100%}
  body .hero-stats .hero-stat-box{flex:1;min-width:0}
  body .hero-name{font-size:20px}
  body .charts-grid,body .pred-grid,body .house-grid{grid-template-columns:1fr}
  body .lucky-grid{grid-template-columns:repeat(2,1fr)}
}

/* inner pages: forms, profile, results, chat */
@media(max-width:900px){
  body .chat-sidebar{width:220px}
  body .domain-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  body .dual-form,body .form-body,body .phase-grid,body .house-analysis-grid,body .starter-grid,body .spec-grid,body .service-grid{grid-template-columns:1fr}
  body .form-footer{flex-wrap:wrap}
  body .score-couple{flex-wrap:wrap;justify-content:center}
  body .result-verdict{flex-direction:column;align-items:flex-start;gap:12px;padding:18px}
  body .profile-hero-inner{flex-direction:column;align-items:flex-start;gap:14px}
  body .profile-stats{flex-direction:row;width:100%}
  body .profile-stats>*{flex:1;min-width:0}
  body .profile-name{font-size:20px;flex-wrap:wrap}
  body .hero-content{flex-direction:column;align-items:flex-start}
  body .hero-right{width:100%;flex-direction:row}
  body .hero-stats{width:100%;flex-wrap:wrap}
  body .hero-stats>*{flex:1;min-width:0}
  body .dual-form .form-half{border-right:none;border-bottom:1px solid var(--border)}
  /* AI chat: sidebar becomes a collapsible strip above the conversation */
  body .chat-page{flex-direction:column;height:auto;min-height:calc(100vh - 140px);overflow:visible}
  body .chat-sidebar{width:100%;max-height:260px;overflow-y:auto;border-right:none;border-bottom:1px solid var(--border)}
  body .chat-main{min-height:520px}
  body .msg-row{max-width:95%}
}
@media(max-width:640px){
  body .chat-main-head{flex-wrap:wrap;padding:10px 14px}
  body .form-footer .form-submit{flex:1 1 100%}
  body .result-verdict>*{max-width:100%}
}
@media(max-width:640px){
  body .status-banner{flex-direction:column;align-items:flex-start;gap:12px}
  body .status-banner>div[style*="text-align"]{align-self:stretch}
}

/* dropdowns are positioned by ks-nav.js (fixed) so the scrolling nav can't clip them */
.ks-nav-item.has-drop:hover .ks-dropdown{display:none}
.ks-dropdown{position:fixed;top:auto;left:auto}
.ks-dropdown.open,.ks-nav-item.has-drop:hover .ks-dropdown.open{display:block}
.ks-dropdown{max-height:70vh;overflow-y:auto}