/* ════════════════════════════════════════════════════════════════════════
   KaayasthVivaah — UI patch (compiled CSS bundle ke baad load hota hai,
   isliye yahan ke rules override karte hain). Site ke apne color tokens
   (--primary #D8465C, cream bg) hi use kiye hain taaki sab match kare.
   ──────────────────────────────────────────────────────────────────────── */

/* ===== 1. CHAT TAB — poori height + width, neeche space na chhute ===== */
.dash-main:has(.chats-tab){ overflow:hidden !important; }

.dash-tab-content.chats-tab{
  height: calc(100vh - 28px) !important;   /* heading hat gayi -> ab poora bharo */
  max-width: none !important;
  width: 100% !important;
  padding: 14px !important;                 /* halka sa frame, edge se chipka na ho */
}

.chats-layout{
  flex: 1 !important;
  min-height: 0 !important;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(45,26,16,.07);
  overflow: hidden;
  background: #fff;
}

@media (max-width: 768px){
  .dash-tab-content.chats-tab{
    height: calc(100dvh - 64px) !important;  /* sirf topbar; full-bleed */
    padding: 0 !important;
  }
  .chats-layout{ border:none; border-radius:0; box-shadow:none; }
}

/* ===== 2. HEADER BUTTONS — text clearly visible ===== */
.site-nav-cta{ color:#fff !important; font-weight:700 !important; }
.site-nav-cta:hover{ color:#fff !important; }
.site-nav-login{ color:var(--primary) !important; font-weight:700 !important; }

/* ===== 3. PHONE — sidebar me Sign out (Settings ke neeche) hamesha dikhe ===== */
@media (max-width: 768px){
  .dash-sidebar{ height:100dvh !important; }      /* 100vh address-bar ke peeche chhup jata tha */
  .dash-logout-btn{
    position: sticky;
    bottom: 0;
    background: var(--surface);
    box-shadow: 0 -4px 14px rgba(45,26,16,.05);
    z-index: 2;
  }
}

/* ════════════════ 4. MODERN CHAT TAB UI ════════════════ */

/* ---- Conversations list (left) ---- */
.chats-list{
  width: 320px;
  background: #fbf9f7;
  padding: 8px;
}
.chats-list-item{
  border-bottom: none !important;
  border-radius: 14px;
  padding: 12px 12px !important;
  margin-bottom: 4px;
  transition: background .15s ease, transform .15s ease;
  position: relative;
}
.chats-list-item:hover{ background:#f4ebe6 !important; }
.chats-list-item.active{
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(45,26,16,.07);
}
.chats-list-item.active::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px;
  width:3px; border-radius:3px; background:var(--primary);
}
.chats-list .interest-avatar{
  width:46px; height:46px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--border);
}
.chats-list-info strong{ font-size:13px !important; color:var(--text); }
.chats-list-info span{ font-size:11px !important; }
.chats-list .sidebar-badge{
  background: var(--primary) !important;
  min-width:18px; height:18px; padding:0 6px;
  display:flex; align-items:center; justify-content:center;
  border-radius:9px; font-size:10.5px;
}

/* ---- Thread header (top bar of conversation) ---- */
.chats-thread{ background:#faf7f5 !important; }
.chats-thread-header.chat-modal-header{
  background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
  padding: 13px 16px !important;
  box-shadow: 0 2px 12px rgba(216,70,92,.18);
}
.chats-thread-avatar{
  width:38px !important; height:38px !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.55);
}
.chats-thread-who strong{ font-size:14px; letter-spacing:.2px; }
.chats-thread-who span{ font-size:11px; opacity:.9; }

/* ---- Message area ---- */
.chats-thread .chat-modal-body{
  padding: 18px 16px !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(226,107,126,.05), transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(216,70,92,.04), transparent 40%),
    #faf7f5 !important;
  gap: 2px;
}

/* bubbles */
.chats-thread .chat-bubble-row{ margin-bottom:10px !important; align-items:flex-end; }
.chats-thread .chat-bubble{
  max-width: 72% !important;
  padding: 10px 14px !important;
  border-radius: 18px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  box-shadow: 0 1px 2px rgba(45,26,16,.06);
}
.chats-thread .chat-bubble-row.mine .chat-bubble{
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  color:#fff !important;
  border: none !important;
  border-bottom-right-radius: 6px !important;
  box-shadow: 0 3px 10px rgba(216,70,92,.22);
}
.chats-thread .chat-bubble-row.theirs .chat-bubble{
  background:#fff !important;
  color:var(--text) !important;
  border: 1px solid #f0e6df !important;
  border-bottom-left-radius: 6px !important;
}
.chats-thread .chat-bubble-time{ font-size:10px !important; margin-top:4px !important; }
.chats-thread .chat-bubble-image{ border-radius:14px !important; overflow:hidden; }

/* typing indicator */
.chats-thread .chat-typing-bubble{
  background:#fff !important; border:1px solid #f0e6df;
  border-radius:18px; border-bottom-left-radius:6px;
}

/* ---- Input bar ---- */
.chats-thread .chat-modal-input{
  padding: 12px 14px !important;
  gap: 10px !important;
  background:#fff !important;
  border-top:1px solid #f0e6df !important;
  box-shadow: 0 -3px 14px rgba(45,26,16,.04);
  align-items:center;
}
.chats-thread .chat-modal-input input[type="text"]{
  flex:1; min-width:0;
  background:#f6efe9 !important;
  border:1.5px solid transparent !important;
  border-radius:24px !important;
  padding:11px 16px !important;
  font-size:13px !important;
  color:var(--text);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.chats-thread .chat-modal-input input[type="text"]:focus{
  outline:none;
  background:#fff !important;
  border-color:var(--primary-light) !important;
  box-shadow:0 0 0 4px rgba(216,70,92,.13) !important;
}
.chats-thread .chat-modal-input input[type="text"]::placeholder{ color:#b6a99f; }

/* attach button */
.chats-thread .chat-attach-btn{
  width:42px !important; height:42px !important;
  border:1.5px solid #ecdfd5 !important;
  background:#fff !important;
  transition: all .15s ease;
}
.chats-thread .chat-attach-btn:hover{
  border-color:var(--primary) !important;
  color:var(--primary) !important;
  background:#fdf1f3 !important;
}

/* send button */
.chats-thread .chat-modal-input .btn-primary{
  width:44px; height:44px;
  min-width:44px;
  padding:0 !important;
  border-radius:50% !important;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  border:none !important;
  box-shadow:0 4px 12px rgba(216,70,92,.3);
  transition: transform .15s ease, box-shadow .15s ease;
  flex-shrink:0;
}
.chats-thread .chat-modal-input .btn-primary:hover:not(:disabled){
  transform: translateY(-1px) scale(1.04);
  box-shadow:0 6px 16px rgba(216,70,92,.4);
}
.chats-thread .chat-modal-input .btn-primary:disabled{ opacity:.45; box-shadow:none; }

/* locked reply hint */
.chats-thread .chat-reply-locked{
  background:#fff8f0 !important;
  border-top:1px solid #f0e6df !important;
}

/* ---- Empty states (nicer) ---- */
.chats-thread .empty-state,
.chats-list .empty-state{ padding:40px 24px !important; }
.chats-thread .empty-state svg,
.chats-list .empty-state svg{
  opacity:.5; color:var(--primary);
  background:#fdf1f3; border-radius:50%; padding:14px;
  width:64px !important; height:64px !important;
}

/* ---- Subtle scrollbars inside chat ---- */
.chats-list::-webkit-scrollbar,
.chats-thread .chat-modal-body::-webkit-scrollbar{ width:8px; }
.chats-list::-webkit-scrollbar-thumb,
.chats-thread .chat-modal-body::-webkit-scrollbar-thumb{
  background:#e2d3c7; border-radius:8px; border:2px solid transparent; background-clip:padding-box;
}
.chats-list::-webkit-scrollbar-thumb:hover,
.chats-thread .chat-modal-body::-webkit-scrollbar-thumb:hover{ background:#d2bcaa; }

/* mobile: list/thread switch already handled by has-active in bundle; keep full-bleed */
@media (max-width: 768px){
  .chats-list{ width:100%; }
  .chats-thread .chat-bubble{ max-width:80% !important; }
}

/* ════════════ 5. HOME — About ko marquee ke neeche lao + Hindi design ════════════ */

/* reposition: home-page ko flex column banake CSS `order` se sections arrange karo
   (DOM order chheda nahi, isliye React safe). Sections padding use karte hain,
   margin nahi — is liye flex se vertical spacing nahi badlega. */
.home-page{ display:flex; flex-direction:column; }
.home-page > *{ order:3; width:100%; }     /* width:100% = flex-shrink fix (sab apni poori width le) */
.home-page > .home-hero{ order:0; }
.home-page > .home-marquee{ order:1; }
.home-page > .kv-about-hi{ order:2; }      /* naya About: marquee ke theek neeche */
.about-section{ display:none !important; } /* purana English About hide */

/* ---- in 3 sections ko FULL WIDTH karo (max-width hata ke) ---- */
.home-page > .suggested-section,
.home-page > .home-section,
.home-page > .kv-about-hi{
  max-width:none !important;
  margin:0 !important;
  padding-left:40px !important;
  padding-right:40px !important;
  box-sizing:border-box;
}
@media (max-width:768px){
  .home-page > .suggested-section,
  .home-page > .home-section,
  .home-page > .kv-about-hi{
    padding-left:16px !important;
    padding-right:16px !important;
  }
}

/* ---- Hindi About — design (site ke rose/cream palette me) ---- */
.kv-about-hi{
  font-family:'Mukta', system-ui, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(216,70,92,.05), transparent 38%),
    linear-gradient(180deg,#fffdfb,#fbf5f1);
  border:1px solid var(--border);
  border-radius:24px;
  padding:54px 56px !important;
}
.kv-about-hi .kv-about-head{ text-align:center; max-width:760px; margin:0 auto; }
.kv-about-eyebrow{
  display:inline-block; color:var(--primary); font-weight:700;
  font-size:13px; letter-spacing:1.5px; margin-bottom:12px;
  padding:5px 14px; background:#fdeef0; border-radius:30px;
}
.kv-about-title{
  font-family:'Noto Serif Devanagari', serif;
  font-size:30px; line-height:1.45; font-weight:700; color:var(--text); margin:0 0 10px;
}
.kv-about-lead{ font-size:16px; color:var(--primary-dark); font-weight:600; margin:0; }

.kv-about-body{ max-width:820px; margin:22px auto 0; }
.kv-about-body p{ font-size:15.5px; line-height:1.95; color:#4a3a30; text-align:center; margin:0; }
.kv-about-body strong{ color:var(--primary-dark); }

/* why we're different */
.kv-about-why{ max-width:900px; margin:40px auto 0; }
.kv-about-why h3, .kv-about-features h3{
  font-family:'Noto Serif Devanagari', serif;
  font-size:22px; font-weight:700; text-align:center; color:var(--text);
  margin:0 0 18px; position:relative; padding-bottom:14px;
}
.kv-about-why h3::after, .kv-about-features h3::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:54px; height:3px; border-radius:3px; background:var(--primary);
}
.kv-about-why > p{ text-align:center; font-size:15px; line-height:1.9; color:#4a3a30; margin:0 auto 24px; max-width:720px; }

.kv-about-concerns{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.kv-concern{
  display:flex; gap:13px; align-items:flex-start;
  background:#fff; border:1px solid #f0e6df; border-radius:16px;
  padding:18px; box-shadow:0 4px 16px rgba(45,26,16,.05);
}
.kv-concern-num{
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.kv-concern strong{ display:block; font-size:14.5px; color:var(--text); margin-bottom:4px; }
.kv-concern p{ font-size:13px; line-height:1.6; color:var(--text-muted); margin:0; }

.kv-about-answer{
  margin:24px auto 0 !important; text-align:center; max-width:860px;
  background:#fdeef0; border:1px solid #f6d6dc; border-radius:16px;
  padding:20px 26px !important; font-size:15px; line-height:1.95; color:#4a3a30;
}
.kv-about-answer strong{ color:var(--primary-dark); }

/* 5 khasiyat */
.kv-about-features{ max-width:980px; margin:46px auto 0; }
.kv-feature-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.kv-feature{
  position:relative; background:#fff; border:1px solid #f0e6df;
  border-radius:18px; padding:26px 26px 24px; overflow:hidden;
  box-shadow:0 6px 22px rgba(45,26,16,.06); transition:transform .15s ease, box-shadow .15s ease;
}
.kv-feature:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(216,70,92,.12); }
.kv-feature-no{
  position:absolute; top:14px; right:18px;
  font-family:'Noto Serif Devanagari', serif; font-size:40px; font-weight:700;
  color:#fbe6ea; line-height:1;
}
.kv-feature h4{ font-size:17px; font-weight:700; color:var(--primary-dark); margin:0 0 10px; max-width:82%; }
.kv-feature p{ font-size:14px; line-height:1.85; color:#4a3a30; margin:0; }

@media (max-width:768px){
  .kv-about-hi{ padding:36px 20px !important; border-radius:18px; }
  .kv-about-title{ font-size:23px; }
  .kv-about-lead{ font-size:15px; }
  .kv-about-concerns{ grid-template-columns:1fr; }
  .kv-feature-grid{ grid-template-columns:1fr; }
  .kv-feature h4{ max-width:100%; }
}

/* ════════════ 6. FAQ replace + naya Footer + ordering ════════════ */

/* purana FAQ hide (naya kv-faq-hi inject hota hai) */
.faq-section{ display:none !important; }

/* section order: hero(0) marquee(1) About(2) [baaki sections 3] upgradeCTA(3.5) FAQ(4) finalCTA(5) Footer(6) */
.home-page > .kv-faq-hi{ order:4; }
.home-page > .home-final-cta{ order:5; }
.home-page > .kv-footer{ order:6; }
.home-page > .kv-vibe-check{ order:3; }

/* ---- FAQ design (click-to-expand accordion) ---- */
.kv-faq-hi .kv-faq-head{ text-align:center; margin-bottom:30px; }
.kv-faq-list{ max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.kv-faq-item{
  background:#fff; border:1px solid #f0e6df; border-radius:16px;
  box-shadow:0 4px 16px rgba(45,26,16,.05);
  text-align:left; overflow:hidden;
}
.kv-faq-q{
  width:100%; display:flex; align-items:center; gap:12px;
  background:none; border:none; cursor:pointer; text-align:left;
  font-family:'Mukta', system-ui, sans-serif;
  font-weight:700; font-size:15.5px; color:var(--text);
  padding:20px 22px; position:relative; padding-left:46px;
}
.kv-faq-q::before{
  content:"Q"; position:absolute; left:22px; top:20px;
  color:var(--primary); font-weight:800; font-size:15px;
}
.kv-faq-q-text{ flex:1; }
.kv-faq-chevron{
  flex-shrink:0; font-size:11px; color:var(--text-muted, #7a6055);
  transition:transform .25s ease; transform:rotate(0deg);
}
.kv-faq-item.open .kv-faq-chevron{ transform:rotate(180deg); color:var(--primary); }
.kv-faq-item.open .kv-faq-q{ color:var(--primary); }
.kv-faq-a{
  font-family:'Mukta', system-ui, sans-serif; font-size:14px; line-height:1.75; color:#5a4a40;
  max-height:0; opacity:0; overflow:hidden;
  padding:0 22px 0 46px;
  transition:max-height .3s ease, opacity .25s ease, padding .3s ease;
}
.kv-faq-item.open .kv-faq-a{
  max-height:400px; opacity:1; padding:0 22px 20px 46px;
}

/* ---- FAQ language toggle (EN default / HI) ---- */
.kv-faq-lang-toggle{ display:inline-flex; gap:4px; margin-top:14px; background:#f5ece7; border-radius:24px; padding:4px; }
.kv-faq-lang-btn{
  border:none; background:none; cursor:pointer; padding:7px 18px; border-radius:20px;
  font-family:'Quicksand', system-ui, sans-serif; font-weight:700; font-size:12.6px;
  color:var(--text-muted, #7a6055); transition:background .15s, color .15s;
}
.kv-faq-lang-btn.active{ background:var(--primary, #D8465C); color:#fff; }
.kv-faq-lang-btn:hover:not(.active){ color:var(--primary, #D8465C); }

/* ---- New "Samuhik Vivah" dashboard tab + admin "Add Story" button ---- */
.kv-samuhik-navbtn{ /* matches .dash-nav-item styling automatically via shared class */ }
#kv-samuhik-panel .samuhik-grid{ margin-top:8px; }
.kv-add-story-btn{ margin-left:auto; }

/* ---- Footer design ---- */
.kv-footer{
  font-family:'Mukta', system-ui, sans-serif;
  background:#241612; color:#efe6df;
  padding:48px 40px 0;
}
.kv-footer-inner{
  max-width:1180px; margin:0 auto;
  display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap;
  padding-bottom:36px;
}
.kv-footer-brand{ flex:1 1 280px; max-width:360px; }
.kv-footer-brand strong{
  font-family:'Noto Serif Devanagari', serif;
  font-size:22px; color:#fff; display:block; margin-bottom:14px;
}
.kv-footer-brand p{ font-size:13.5px; line-height:1.8; color:#c9bbb1; margin:0 0 10px; }
.kv-footer-brand .kv-footer-hi{ color:#b6a89e; }
.kv-footer-legal-links{ margin-top:14px; font-size:13px; }
.kv-footer-legal-links a{ color:#c9bbb1; text-decoration:none; }
.kv-footer-legal-links a:hover{ color:#fff; text-decoration:underline; }
.kv-footer-legal-links span{ color:#6b5d54; margin:0 8px; }
.kv-footer-contact{ flex:0 1 280px; }
.kv-footer-contact h4{ font-size:14px; color:#fff; margin:0 0 14px; letter-spacing:.4px; }
.kv-footer-contact a, .kv-footer-contact span{ display:block; font-size:13.5px; color:#c9bbb1; margin-bottom:8px; text-decoration:none; }
.kv-footer-contact a{ color:var(--primary-light); }
.kv-footer-contact a:hover{ color:#fff; }
.kv-footer-col{ flex:0 1 200px; }
.kv-footer-col h4{ font-size:13px; color:#fff; margin:0 0 14px; letter-spacing:.5px; text-transform:uppercase; }
.kv-footer-col a{ display:block; font-size:13.5px; color:#c9bbb1; margin-bottom:10px; text-decoration:none; transition:color .15s, padding-left .15s; }
/* (v18) Careers/Success Stories spans inline chipak rahe the — ab links ki tarah apni line me */
.kv-footer-col span{ display:block; font-size:13.5px; margin-bottom:10px; }
.kv-footer-legal-links span{ display:inline; margin-bottom:0; }
.kv-footer-col a:hover{ color:#fff; padding-left:3px; }
.kv-footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding:18px 0; text-align:center; font-size:12.5px; color:#9c8e84;
}

@media (max-width:768px){
  .kv-footer{ padding:36px 16px 0; }
  .kv-footer-inner{ flex-direction:column; gap:28px; }
  .kv-faq-q{ padding:16px 18px 16px 40px; font-size:14px; }
  .kv-faq-q::before{ left:18px; top:16px; }
  .kv-faq-a{ padding:0 18px 0 40px; }
  .kv-faq-item.open .kv-faq-a{ padding:0 18px 16px 40px; }
  .kv-vibe-check{ padding:40px 18px; }
  .kv-plans-modal{ padding:24px 18px; }
}

/* ---- Subscription/trial expiry gate: locked sidebar items ---- */
.dash-nav-item.kv-nav-locked{ opacity:.45; cursor:not-allowed; position:relative; }
.dash-nav-item.kv-nav-locked:hover{ opacity:.6; }
.dash-nav-item.kv-nav-locked::after{
  content:"\1F512"; font-size:11px; margin-left:auto; opacity:.8;
}

/* ---- Home page "Vibe Check Match" section (replaces the old pricing/membership section) ---- */
.kv-vibe-check{
  padding:54px 24px; max-width:980px; margin:0 auto; text-align:center;
}
.kv-vibe-eyebrow-hi{ font-family:'Noto Serif Devanagari', serif; font-size:14px; color:var(--text-muted); display:block; margin-bottom:6px; }
.kv-vibe-check h2{ font-size:27px; margin:0 0 8px; color:var(--text); }
.kv-vibe-tagline{ color:var(--primary); font-weight:700; font-size:14.5px; margin:0 0 8px; }
.kv-vibe-tagline-hi{ font-family:'Noto Serif Devanagari', serif; color:var(--text-muted); font-size:14px; margin:0 0 36px; }

.kv-vibe-questions{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:36px; text-align:left; }
@media (max-width:860px){ .kv-vibe-questions{ grid-template-columns:1fr; } }
.kv-vibe-q-card{
  background:#fff; border:1.5px solid #f0e6df; border-radius:18px; padding:22px 20px;
  box-shadow:0 4px 16px rgba(45,26,16,.05);
}
.kv-vibe-q-num{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:var(--primary); color:#fff; font-weight:800; font-size:12px; margin-bottom:12px;
}
.kv-vibe-q-text{ font-family:'Mukta', system-ui, sans-serif; font-weight:700; font-size:14.5px; color:var(--text); margin-bottom:14px; line-height:1.4; }
.kv-vibe-options{ display:flex; flex-direction:column; gap:8px; }
.kv-vibe-option{
  border:1.5px solid var(--border); background:#fff; border-radius:12px; padding:10px 14px;
  font-family:'Mukta', system-ui, sans-serif; font-size:13.5px; font-weight:600; color:var(--text);
  cursor:pointer; text-align:left; transition:border-color .15s, background .15s, color .15s;
  display:flex; align-items:center; gap:8px;
}
.kv-vibe-option:hover{ border-color:var(--primary); background:#fff5f7; }
.kv-vibe-option.selected{ border-color:var(--primary); background:var(--primary); color:#fff; }
.kv-vibe-option-check{ width:16px; height:16px; border-radius:50%; border:1.5px solid currentColor; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:10px; }
.kv-vibe-option.selected .kv-vibe-option-check{ background:#fff; color:var(--primary); }

.kv-vibe-badges{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:32px; }
.kv-vibe-badge{
  display:inline-flex; align-items:center; gap:6px; background:#fdf3ee; color:var(--primary-dark);
  border:1px solid #f6dfe3; border-radius:20px; padding:8px 16px; font-size:12.2px; font-weight:700;
}
.kv-vibe-badge-icon{ font-size:13px; }

.kv-vibe-result{
  background:#fdf3ee; border:1.5px dashed var(--primary); border-radius:14px;
  padding:16px 20px; margin-bottom:28px; font-size:13.5px; color:var(--text); display:none;
}
.kv-vibe-result.show{ display:block; }
.kv-vibe-result strong{ color:var(--primary-dark); }

.kv-upgrade-cta-btn{
  background:var(--primary); color:#fff; border:none; border-radius:30px;
  padding:14px 34px; font-family:'Quicksand', system-ui, sans-serif; font-weight:700;
  font-size:15px; cursor:pointer; box-shadow:0 10px 26px rgba(216,70,92,.28);
  transition:transform .15s, box-shadow .15s; display:inline-flex; align-items:center; gap:8px;
}
.kv-upgrade-cta-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(216,70,92,.34); }

/* ---- Plans modal (opens when "Upgrade to Pro" is clicked on home page) ---- */
.kv-plans-modal-overlay{
  position:fixed; inset:0; background:rgba(45,26,16,.55); z-index:2000;
  display:flex; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(2px);
}
.kv-plans-modal{
  background:#fff; border-radius:20px; max-width:980px; width:100%; max-height:88vh;
  overflow-y:auto; padding:32px 28px; position:relative; box-shadow:0 24px 64px rgba(0,0,0,.3);
}
.kv-plans-modal-close{
  position:absolute; top:18px; right:18px; background:none; border:none; cursor:pointer;
  color:var(--text-muted); font-size:22px; line-height:1;
}
.kv-plans-modal h3{ text-align:center; font-size:22px; margin:0 0 28px; color:var(--text); }
.kv-plans-modal .plans-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }

/* ---- Profile photo carousel (tap right=next, tap left=prev, dots) ---- */
.kv-carousel-container{ position:relative; width:100%; height:100%; overflow:hidden; border-radius:inherit; }
.kv-carousel-track{ width:100%; height:100%; }
.kv-carousel-zone{ position:absolute; top:0; bottom:0; width:50%; z-index:2; cursor:pointer; }
.kv-carousel-zone-left{ left:0; }
.kv-carousel-zone-right{ right:0; }
.kv-carousel-dots{
  position:absolute; bottom:10px; left:0; right:0; z-index:3;
  display:flex; justify-content:center; gap:5px; pointer-events:none;
}
.kv-carousel-dot{
  width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.55);
  transition:background .2s, width .2s;
}
.kv-carousel-dot.active{ background:#fff; width:16px; border-radius:4px; }

/* ---- Site-wide "ultra smooth" pass ---- */
html{ scroll-behavior:smooth; }
*{ -webkit-tap-highlight-color:transparent; }
button, a, .dash-nav-item, .sidebar-item, .btn, .btn-primary, .btn-outline, .btn-ghost,
.chats-list-item, .interest-row, .match-card, .browse-card, .pill, .tab-pills button{
  transition:background-color .15s ease, color .15s ease, border-color .15s ease,
             transform .12s ease, box-shadow .15s ease, opacity .15s ease;
}
button:active, .btn:active, .chats-list-item:active{ transform:scale(.97); }
img{ transition:opacity .25s ease; }

/* Chat thread: smoother auto-scroll + bubble entrance */
.chat-modal-body{ scroll-behavior:smooth; }
.chat-bubble-row{ animation:kv-bubble-in .18s ease both; }
@keyframes kv-bubble-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.chat-modal-input input[type="text"]{ transition:border-color .15s ease, box-shadow .15s ease; }
.chat-modal-input input[type="text"]:focus{ box-shadow:0 0 0 3px rgba(216,70,92,.12); }

/* Dashboard tab switches fade in instead of popping */
.dash-tab-content{ animation:kv-fade-in .2s ease both; }
@keyframes kv-fade-in{ from{ opacity:0; } to{ opacity:1; } }

/* Modals open with a soft scale-in instead of an abrupt pop */
.modal-overlay{ animation:kv-overlay-in .15s ease both; }
@keyframes kv-overlay-in{ from{ opacity:0; } to{ opacity:1; } }
.modal-card, .modal-box, .modal{ animation:kv-modal-in .18s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes kv-modal-in{ from{ opacity:0; transform:scale(.96) translateY(6px); } to{ opacity:1; transform:scale(1) translateY(0); } }

/* Spinners feel snappier with a slightly faster, smoother spin */
.spinner{ animation-duration:.7s !important; animation-timing-function:linear !important; }

/* ---- Profile creation photo grid — clear boxes with hover ---- */
.upload-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.upload-slot{
  border:2px dashed var(--border,#e8d5c4); border-radius:12px;
  aspect-ratio:1; cursor:pointer; overflow:hidden; position:relative;
  transition:border-color .15s, background .15s;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#fdf9f7;
}
.upload-slot:hover{ border-color:var(--primary,#D8465C); background:#fff6f5; }
.upload-slot.uploaded{ border-style:solid; border-color:var(--primary,#D8465C); background:#fff; }
/* (v19) Upload success par border green — photo slots + document slots dono */
.upload-slot.upload-done{ border-color:#22a06b; box-shadow:0 0 0 2px rgba(34,160,107,.15); }
.upload-doc-slot.uploaded{ border-color:#22a06b !important; background:#f2fbf7 !important; }
.upload-slot.uploaded img{ width:100%; height:100%; object-fit:cover; }
.upload-slot .upload-remove{
  position:absolute; top:5px; right:5px; width:22px; height:22px;
  background:rgba(0,0,0,.6); color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; transition:opacity .15s; font-size:13px;
}
.upload-slot:hover .upload-remove{ opacity:1; }
.upload-label{ font-size:11px; color:var(--text-muted,#9ca3af); margin-top:5px; }
.upload-icon{ color:var(--primary,#D8465C); }

/* Photo count dot indicator in modal */
.kv-photo-count-badge{
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.55); color:#fff; border-radius:10px;
  font-size:10px; font-weight:700; padding:2px 8px; white-space:nowrap;
}