/*
 # Sidebar
 # Astrology
 # Dashboard
 # Numerology
 # Lalkitab
 */

/* ==========================================================================
   1. SIDEBAR, HEADER AND THEIR COMPONENTS
   ========================================================================== */

/* ── 1.1 Root Design Tokens & Utilities ── */
:root {
  --sidebar-collapsed-w: 70px;
  --sidebar-expanded-w: 240px;
  --transition-speed: 0.3s;

  --bg-highlight-color: #ffffff;
  --bg-neutral-base: #f8fafc;
  --bg-neutral-card: #ffffff;
  --bg-neutral-alt: #f1f5f9;
  --border-neutral: #e2e8f0;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;

  --radius-sm: 4px;
  --radius-md: 6px;

  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
}

.p-card {
  padding: var(--space-8, 8px) !important;
}

.px-card {
  padding-left: var(--space-8, 8px) !important;
  padding-right: var(--space-8, 8px) !important;
}

.py-card {
  padding-top: var(--space-8, 8px) !important;
  padding-bottom: var(--space-8, 8px) !important;
}

.p-compact {
  padding: clamp(1px, 0.25vh, 3px) clamp(3px, 0.4vw, 6px) !important;
}

.app-title-lg {
  font-size: clamp(18px, 2.8vh, 32px) !important;
  font-weight: 700 !important;
  color: var(--text-primary, #0f172a) !important;
}

.card-title,
.chart-title,
#dash-heading {
  font-size: clamp(13px, 2vh, 22px) !important;
  font-weight: 600 !important;
  color: var(--text-primary, #0f172a) !important;
  margin: 0 !important;
}

.section-title {
  font-size: clamp(11.5px, 1.7vh, 18px) !important;
  font-weight: 600 !important;
  color: var(--text-secondary, #475569) !important;
  margin: 0 !important;
}

/* Custom Checkbox Highlight */
.form-check-input[type="checkbox"] {
  border-radius: 50% !important;
}

.form-check-input:checked {
  background-color: var(--bg-highlight, #db4454) !important;
  border-color: var(--bg-highlight, #db4454) !important;
}

.form-check-input:focus {
  border-color: var(--bg-highlight, #db4454) !important;
  box-shadow: 0 0 0 0.2rem oklch(from var(--bg-highlight, #db4454) l c h / 0.25) !important;
}

/* Global Flex Gaps */
.flex-gap-2 {
  gap: var(--space-2, 2px) !important;
}
.flex-gap-4 {
  gap: var(--space-4, 4px) !important;
}
.flex-gap-8 {
  gap: var(--space-8, 8px) !important;
}
.flex-gap-12 {
  gap: var(--space-12, 12px) !important;
}
.flex-gap-16 {
  gap: var(--space-16, 16px) !important;
}

/* ── 1.2 Sidebar & Sidebar Navigation ── */
@media (max-width: 991.98px) {
  .sidebar {
    display: none !important;
  }
}

@media (min-width: 992px) {
  body {
    padding-left: var(--sidebar-collapsed-w) !important;
    background-color: var(--bg-neutral-base) !important;
    transition: padding-left var(--transition-speed)
      cubic-bezier(0.4, 0, 0.2, 1);
  }

body.no-sidebar,
  body.no-sidebar.sidebar-pinned,
  body:has(#home-page),
  body:has(#pricing-page),
  body:has(.auth-page-wrapper),
  body:has(#free-lucky-name),
  body:has(#free-name-numerology-calculator),
  body:has(#free-sadesati-calculator),
  body:has(#free-loshu-grid-calculator),
  body:has(#free-rashi-moon-calculator),
  body:has(#free-gun-milan),
  body:has(#error-404-page),
  body:has(#contact-page),
  body:has(#privacy-policy-page),
  body:has(#refund-policy),
  body:has(#terms-and-conditions) {
    padding-left: 0 !important;
  }

  body.no-sidebar .sidebar {
    display: none !important;
  }

  #page {
    max-width: 100% !important;
  }
.no-scroll {
    height: 100vh !important;
    overflow-y: hidden !important;
  }
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--sidebar-collapsed-w) !important;
    z-index: 99999 !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
    overflow: visible !important;
    display: block !important;
    transition: width var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .sidebar:hover:not(.is-pinned) {
    width: var(--sidebar-expanded-w) !important;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.12) !important;
  }

  body.sidebar-pinned {
    padding-left: var(--sidebar-expanded-w) !important;
  }

  body.sidebar-pinned .header-fixed {
    left: var(--sidebar-expanded-w) !important;
    width: calc(100% - var(--sidebar-expanded-w)) !important;
  }

  body.sidebar-pinned .sidebar {
    width: var(--sidebar-expanded-w) !important;
    box-shadow: 5px 0 20px rgba(0, 0, 0, 0.05) !important;
  }

  .sidebar:not(:hover):not(.is-pinned) .menu-text,
  .sidebar:not(:hover):not(.is-pinned) .brand-info,
  .sidebar:not(:hover):not(.is-pinned) .pin-toggle-btn {
    display: none !important;
  }
}

.sidebar-nav {
  height: 100%;
  width: 100% !important;
  display: flex;
  flex-direction: column;
  background: transparent;
  color: #1e293b;
  font-family: "Poppins", "Outfit", sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 15px;
  background: rgba(0, 0, 0, 0.01);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  position: relative;
  min-height: 81px;
}

.brand-logo-wrapper {
  background: rgba(0, 0, 0, 0.03);
  padding: 6px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.brand-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.brand-info {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.sidebar:hover .brand-info,
body.sidebar-pinned .brand-info {
  opacity: 1;
}

.brand-name {
  font-size: 15px;
  font-weight: 750;
  color: #0f172a;
}

.brand-tagline {
  font-size: 10px;
  color: #64748b;
  font-weight: 500;
}

.pin-toggle-btn {
  position: absolute;
  right: 15px;
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    color 0.2s ease,
    background 0.2s ease;
}

.pin-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #475569;
}

.pin-toggle-btn i {
  transition: transform var(--transition-speed) ease;
}

.sidebar:hover .pin-toggle-btn,
body.sidebar-pinned .pin-toggle-btn {
  opacity: 1;
}

body.sidebar-pinned .pin-toggle-btn {
  color: var(--bg-highlight, #db4454) !important;
}

body.sidebar-pinned .pin-toggle-btn i {
  transform: rotate(45deg);
}

.sidebar-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.05) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  margin: 0 10px;
}

.sidebar-menu-container {
  flex-grow: 1;
  padding: 15px 10px;
}

.menu-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.menu-section-title {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #94a3b8;
  margin-bottom: 8px;
  padding-left: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.sidebar:hover .menu-section-title,
body.sidebar-pinned .menu-section-title {
  opacity: 1;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #272829;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition:
    background 0.2s ease,
    color 0.2s ease !important;
  width: 100%;
}

.menu-link:hover {
  background: rgba(0, 0, 0, 0.03) !important;
  color: #000000;
  text-decoration: none;
}

.menu-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #eef2f6;
  color: #64748b;
  font-size: 13px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.menu-text {
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.sidebar:hover .menu-text,
body.sidebar-pinned .menu-text {
  opacity: 1;
}

.menu-link.active {
  background: rgba(219, 68, 84, 0.08) !important;
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.08) !important;
  color: var(--bg-highlight, #db4454) !important;
  font-weight: 600;
}

.menu-link.active .menu-icon-box,
.menu-link.color-highlight .menu-icon-box {
  background-color: var(--bg-highlight, #db4454) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px oklch(from var(--bg-highlight, #db4454) l c h / 0.3) !important;
}

.menu-link:hover:not(.active) {
  background: rgba(0, 0, 0, 0.02) !important;
  color: var(--bg-highlight, #db4454) !important;
}

.menu-link:hover:not(.active) .menu-icon-box {
  color: var(--bg-highlight, #db4454) !important;
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.05) !important;
}

/* ── 1.3 Submenu Navigation & Sidebar Footer ── */
.submenu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
  opacity: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 20px;
}

.menu-item.open .submenu-list {
  max-height: 500px;
  opacity: 1;
  margin-top: 4px;
  margin-bottom: 4px;
}

.submenu-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #272829;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition:
    background 0.2s ease,
    color 0.2s ease;
  width: 100%;
}

.submenu-link:hover {
  background: rgba(0, 0, 0, 0.02) !important;
  color: var(--bg-highlight, #db4454) !important;
  text-decoration: none;
}

.submenu-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.submenu-link:hover .submenu-icon-box {
  color: var(--bg-highlight, #db4454) !important;
}

.submenu-link.active {
  background: rgba(219, 68, 84, 0.08) !important;
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.08) !important;
  color: var(--bg-highlight, #db4454) !important;
  font-weight: 600;
}

.submenu-link.active .submenu-icon-box {
  color: var(--bg-highlight, #db4454) !important;
}

.submenu-arrow {
  margin-left: auto;
  font-size: 10px;
  color: #94a3b8;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
}

.menu-item.open .submenu-arrow {
  transform: rotate(90deg);
}

.sidebar:not(:hover):not(.is-pinned) .submenu-list {
  max-height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  pointer-events: none;
}

.sidebar:not(:hover):not(.is-pinned) .submenu-arrow {
  display: none !important;
}

.sidebar:not(:hover):not(.is-pinned) .submenu-link .menu-text {
  opacity: 0;
  display: none !important;
}

.sidebar-footer {
  padding: 15px 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.logout-btn {
  color: #ef4444;
}
.logout-btn:hover {
  background: rgba(239, 68, 68, 0.05);
  color: #dc2626;
}
.logout-btn .menu-icon-box {
  background: #fee2e2;
  color: #ef4444;
}
.logout-btn:hover .menu-icon-box {
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}

/* ── 1.4 Header Controls & Header Strip ── */
@media (min-width: 992px) {
  .header-fixed {
    left: var(--sidebar-collapsed-w) !important;
    width: calc(100% - var(--sidebar-collapsed-w)) !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--border-neutral) !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    min-height: 48px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    transition:
      left var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1),
      width var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
}

.header-custom-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  width: 100%;
}

.header-left-sec {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.header-avatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  display: block !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.header-right-sec {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-grow: 1;
  justify-content: flex-end;
}

.header-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  color: #334155;
  font-size: 16px;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
}

.header-details-strip {
  display: none;
  align-items: center;
  gap: 8px;
  background: white;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--bg-highlight);
  padding: 6px 14px;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  margin-left: 10px;
}

.dashboard-validity-strip {
  display: none;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--bg-highlight, #db4454);
  padding: 5px 14px;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  margin-left: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #0f172a;
}

.dashboard-validity-strip i {
  color: var(--bg-highlight, #db4454) !important;
  font-size: 12px;
}

.dashboard-validity-strip .validity-countdown {
  color: var(--bg-highlight, #db4454);
  font-weight: 700;
}

.header-details-strip {
  display: none !important;
}

#show_kundli .single-kundli-strip,
#kp-page .single-kundli-strip,
#vedic-astrology .single-kundli-strip,
#lalkitab .single-kundli-strip,
.single-kundli-page .single-kundli-strip {
  display: flex !important;
}

.match-making-strip {
  display: none !important;
}
#matchmaking-page .match-making-strip,
.matchmaking-page .match-making-strip {
  display: flex !important;
}

#name-numerology .name-numero-strip,
#name-numerology-page .name-numero-strip {
  display: flex !important;
}

.header i:not(.detail-edit-btn i),
.header-demo i:not(.detail-edit-btn i),
.header-custom-content i:not(.detail-edit-btn i),
.header-details-strip .detail-item i:not(.detail-edit-btn i),
.header-menu-toggle i,
.header-icon i {
  color: var(--bg-highlight, #db4454) !important;
}

.header-details-strip .detail-item {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.header-details-strip .detail-divider {
  width: 1px;
  height: 12px;
  background-color: rgba(0, 0, 0, 0.1);
}

.header-details-strip .detail-edit-btn {
  background-color: var(--bg-highlight);
  color: #ffffff !important;
  padding: 3px 10px !important;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-details-strip .detail-edit-btn i {
  color: #ffffff !important;
  font-size: 10px;
}

.header-details-strip .detail-edit-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  color: #ffffff !important;
}

.header-edit-kundli-btn {
  height: clamp(26px, 3.2vh, 32px) !important;
  padding: 0 clamp(8px, 1vw, 14px) !important;
  font-size: clamp(10px, 1.4vh, 12px) !important;
  border-radius: var(--radius-sm, 6px) !important;
  transition: all 0.2s ease;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.header-edit-kundli-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* ── 1.5 Header Profile Dropdown ── */
.header-profile-container {
  position: relative;
  display: flex;
  align-items: center;
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 230px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 8px 0;
  z-index: 10000000 !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

.profile-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-header {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
}

.dropdown-username {
  font-size: 14px;
  color: #1e293b;
  font-weight: 700;
}
.dropdown-email {
  font-size: 11px;
  color: #64748b;
}
.dropdown-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 6px 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 13px;
  color: #334155 !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.dropdown-item i {
  font-size: 14px;
  color: #64748b;
  width: 16px;
}
.dropdown-item:hover {
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.05);
  color: var(--bg-highlight, #db4454) !important;
}
.dropdown-item.active {
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.05);
  color: var(--bg-highlight, #db4454) !important;
}
.dropdown-item:hover i {
  color: var(--bg-highlight, #db4454);
}

/* ── 1.6 Header Search Bar & Search Autocomplete ── */
.header-search-wrapper {
  position: relative;
  max-width: 335px;
  width: 100%;
  display: flex;
  align-items: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-bar-icon {
  position: absolute;
  left: 12px;
  color: var(--bg-highlight, #db4454) !important;
  font-size: 13px;
  pointer-events: none;
  transition: color 0.2s ease;
}

.header-search-input {
  width: 100%;
  padding: 8px 36px 8px 35px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 13px;
  color: #1e293b;
  outline: none;
  transition: all 0.3s ease;
}

.header-search-input:focus {
  border-color: var(--bg-highlight, #db4454);
  background: #ffffff;
  box-shadow:
    0 4px 15px oklch(from var(--bg-highlight, #db4454) l c h / 0.08),
    0 0 0 3px oklch(from var(--bg-highlight, #db4454) l c h / 0.12);
}

.header-search-shortcut {
  position: absolute;
  right: 12px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.header-search-wrapper:focus-within .header-search-shortcut {
  opacity: 0;
}

.header-search-clear {
  position: absolute;
  right: 10px;
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  padding: 0;
}

.header-search-clear:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1e293b;
}
.header-search-wrapper.has-text .header-search-clear {
  opacity: 1;
  visibility: visible;
}

.search-autocomplete-results {
  position: absolute;
  top: 72px;
  right: 68px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  max-height: 285px;
  width: 335px !important;
  overflow-y: auto;
  z-index: 100000000 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
  padding: 4px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

@media (max-width: 767px) {
  .search-autocomplete-results {
    right: 15px;
    left: 15px;
    width: auto !important;
  }
}

.search-autocomplete-results.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.search-autocomplete-results .search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px !important;
  color: inherit !important;
  text-decoration: none !important;
  transition: all 0.15s ease;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.search-autocomplete-results .search-item:last-child {
  border-bottom: 0 !important;
}
.search-autocomplete-results .search-item:hover {
  background: rgba(0, 0, 0, 0.02) !important;
}

.autocomplete-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.autocomplete-item-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  background: #eef2f6;
  color: #64748b;
  transition: all 0.2s ease;
}

.search-item:hover .autocomplete-item-icon-box {
  color: var(--bg-highlight, #db4454) !important;
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.05) !important;
}

.autocomplete-item-info h6 {
  margin: 0 0 2px 0;
  font-weight: 600;
  font-size: 13px;
  color: #1e293b;
  transition: color 0.2s ease;
}

.search-item:hover .autocomplete-item-info h6,
.search-item:hover h6 {
  color: var(--bg-highlight, #db4454) !important;
}

.autocomplete-item-info small {
  color: #64748b;
  font-size: 11px;
  display: block;
}
.autocomplete-item-arrow {
  color: #cbd5e1;
  font-size: 10px;
}
.autocomplete-no-results {
  padding: 12px 14px;
  font-size: 13px;
  color: #64748b;
  text-align: center;
}

/* Custom Floating Search Modal Backdrop */
.custom-search-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.3) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100000000 !important;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 80px 20px;
}

.custom-search-modal-backdrop.show {
  opacity: 1;
  visibility: visible;
}

.custom-search-modal-container {
  width: 100%;
  width: 600px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden;
  transform: translateY(-20px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.custom-search-modal-backdrop.show .custom-search-modal-container {
  transform: translateY(0) scale(1);
}

.custom-search-modal-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  gap: 14px;
}

.custom-search-modal-header i.fa-search {
  color: #64748b;
  font-size: 18px;
}

.custom-search-modal-header input.custom-search-input {
  flex-grow: 1;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  font-size: 16px;
  color: inherit !important;
  padding: 0 !important;
}

.custom-search-modal-header .close-btn {
  background: none;
  border: none;
  color: #64748b;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-search-modal-header .close-btn:hover {
  color: #ef4444;
}
.custom-search-modal-results {
  max-height: 420px;
  overflow-y: auto;
  padding: 12px;
}

.custom-search-modal-meta {
  font-size: 11px;
  color: #64748b;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 6px 12px 10px 12px;
}

.custom-search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  color: inherit !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
  margin-bottom: 4px;
}

.custom-search-item:hover {
  background: rgba(0, 0, 0, 0.02) !important;
}
.custom-search-item-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.custom-search-item-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.custom-search-item:hover .custom-search-item-icon-box {
  transform: scale(1.05);
}
.custom-search-item-info h6 {
  margin: 0 0 2px 0;
  font-weight: 600;
  font-size: 14px;
}
.custom-search-item-info small {
  color: #64748b;
  font-size: 12px;
  display: block;
}
.custom-search-item-arrow {
  color: #cbd5e1;
  font-size: 12px;
  transition:
    transform 0.2s ease,
    color 0.2s ease;
}
.custom-search-item:hover .custom-search-item-arrow {
  transform: translateX(3px);
  color: #64748b;
}
.custom-search-empty {
  text-align: center;
  padding: 32px 16px;
  color: #64748b;
  font-size: 14px;
}

/* ==========================================================================
   2. ASTROLOGY
   ========================================================================== */

/* ── 2.1 Kundli Main Container & Viewport Grid ── */
.custom-card {
  padding: 12px 16px;
  border-radius: 12px;
  background: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.kundli-main-container {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 0 4px;
}

.kundli-left-col {
  flex: 0 0 70%;
  max-width: 70%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kundlis-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}

.kundli-right-col {
  flex: 0 0 29%;
  max-width: 29%;
  display: block;
}

.kundli-card {
  flex: 1;
  background: var(--bg-neutral-card, #ffffff);
  border-radius: var(--radius-sm, 4px) !important;
  border: 1px solid var(--border-neutral, #e2e8f0) !important;
  box-shadow: none !important;
  padding: var(--space-8, 8px) !important;
}

@media (min-width: 992px) {
 

  #show_kundli {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  #show_kundli .header-demo {
    margin-bottom: 4px !important;
    flex-shrink: 0 !important;
  }

  .kundli-main-container {
    display: flex !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: calc(100vh - 60px) !important;
    max-height: calc(100vh - 60px) !important;
    overflow: hidden !important;
    gap: 8px !important;
    padding: 0 8px 8px 8px !important;
    margin: 0 !important;
  }

  .kundli-left-col {
    flex: 68 !important;
    max-width: 68% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  .kundlis-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    width: 100% !important;
    flex: 3.5 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .kundlis-row .kundli-card {
    flex: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid var(--border-neutral, #e2e8f0) !important;
    border-radius: var(--radius-sm, 4px) !important;
    box-shadow: none !important;
    padding: 8px !important;
  }

  .kundli-right-col {
    flex: 32 !important;
    max-width: 32% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  .kundli-right-col > .kundli-card:first-child {
    flex: 1.5 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid var(--border-neutral, #e2e8f0) !important;
    border-radius: var(--radius-sm, 4px) !important;
    box-shadow: none !important;
    padding: 8px !important;
  }
}

/* ── Lal Kitab 4-Column Single Row Layout ── */
#lalkitab .kundli-main-container {
  height: auto !important;
  max-height: none !important;
}

.lalkitab-row-4 {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
  height: 42vh !important;
  max-height: 45vh !important;
  min-height: 0;
  overflow: hidden;
}

.lalkitab-row-4 > .kundli-card {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--border-neutral, #e2e8f0) !important;
  border-radius: var(--radius-sm, 4px) !important;
  box-shadow: none !important;
  padding: 8px !important;
}

.dasha-table-wrapper {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

@media (max-width: 991.98px) {
  .lalkitab-row-4 {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .lalkitab-row-4 > .kundli-card {
    flex: 0 0 280px;
    min-width: 280px;
  }
}

/* ── 2.2 Kundli Canvas Charts & Selection Buttons ── */
.canvas-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.canvas-container canvas,
.canvas-container img,
.kundli-img {
  width: auto;
  height: 100%;
  max-width: 80%;
  max-height: 100%;
  object-fit: fill;
  aspect-ratio: unset !important;

  border-radius: var(--radius-sm, 4px) !important;
  border: 1px solid var(--border-neutral, #e2e8f0);
}

@media (min-width: 992px) {
.kundli-card h5,
  .chart-title {
    font-size: clamp(13px, 2.4vh, 24px) !important;
    font-weight: 600 !important;
    color: var(--text-primary, #0f172a) !important;
    margin: 0 !important;
  }

  #dash-heading {
    font-size: clamp(12px, 1vh, 24px) !important;
    font-weight: 600 !important;
    color: var(--text-primary, #0f172a) !important;
    margin: 0 !important;
  }
  .chart-select-trigger,
  .chart-select-trigger i {
    font-size: clamp(11px, 1.9vh, 20px) !important;
    color: var(--bg-highlight) !important;
  }

  .form-check-label {
    font-size: clamp(10.5px, 1.8vh, 18px) !important;
    color: var(--text-secondary, #475569) !important;
  }
}

.chart-opt-btn {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  color: var(--color-black, #272829) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition:
    background 0.2s ease,
    color 0.2s ease !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  margin-bottom: 4px !important;
}

.chart-opt-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.02) !important;
  color: var(--bg-highlight) !important;
  text-decoration: none !important;
}

.chart-opt-btn .opt-icon-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: #eef2f6 !important;
  color: #64748b !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.chart-opt-btn .opt-icon-box i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.chart-opt-btn .opt-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.chart-opt-btn .opt-arrow {
  margin-left: auto !important;
  font-size: 10px !important;
  color: #94a3b8 !important;
  transition: color 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 10px !important;
  height: 10px !important;
}

.chart-opt-btn .opt-arrow i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 10px !important;
  height: 10px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.chart-opt-btn.active {
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.08) !important;
  color: var(--bg-highlight, #db4454) !important;
  font-weight: 600 !important;
}

.chart-opt-btn.active .opt-icon-box {
  background-color: var(--bg-highlight, #db4454) !important;
  color: white !important;
  box-shadow: 0 4px 10px oklch(from var(--bg-highlight, #db4454) l c h / 0.3) !important;
}

.chart-opt-btn:hover:not(.active) .opt-icon-box {
  color: var(--bg-highlight, #db4454) !important;
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.05) !important;
}

.chart-opt-btn.active .opt-arrow,
.chart-opt-btn:hover .opt-arrow {
  color: var(--bg-highlight, #db4454) !important;
}

/* ── 2.3 Kundli Planetary Tables & Summary Boxes ── */
.kundli-planets-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 4px;
  font-size: clamp(0.75rem, 2.2vw, 1.3rem);
  border: 1px solid var(--border-neutral, #e2e8f0) !important;
  border-radius: var(--radius-sm, 4px) !important;
  overflow: hidden;
  color: var(--text-primary, #0f172a);
}

.kundli-planets-table td {
  border-top: none;
  border-left: none;
  border-right: 1px solid var(--border-neutral, #e2e8f0);
  border-bottom: 1px solid var(--border-neutral, #e2e8f0);
  padding: 2px 4px !important;
  text-align: left;
  vertical-align: middle;
  line-height: 1.25;
}

.kundli-planets-table td:nth-child(6) {
  border-right: none;
}
.kundli-planets-table td:nth-child(3),
.kundli-planets-table td:nth-child(5) {
  border-left: clamp(2px, 3px, 5px) solid var(--border-neutral, #cbd5e1) !important;
}

.kundli-planets-table tr.thick-bottom td {
  border-bottom: clamp(2px, 3px, 5px) solid var(--border-neutral, #cbd5e1);
}

.kundli-planets-table tr:last-child td {
  border-bottom: none;
}

.kundli-planets-table td.planet-name {
  background-color: var(--bg-highlight) !important;
  color: #ffffff !important;
  font-weight: 600;
  width: 5%;
  text-align: center;
}

.kundli-planets-table tr:nth-child(3n + 1) td.planet-name {
  background-color: rgb(163, 33, 33) !important;
}

.kundli-planets-table td.planet-val {
  background-color: #ffffff;
  font-weight: 700;
  width: 21%;
}

.kundli-table-summary {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-top: 6px;
  align-items: stretch;
}

.house-repeats-table {
  flex: 0 0 58%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px;
  overflow: hidden;
  font-size: 10.5px;
  font-family: "Poppins", sans-serif;
  background: #ffffff;
  color: #1e293b;
}

.house-repeats-table th,
.house-repeats-table td {
  border-top: none;
  border-left: none;
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  padding: 2.5px 4px;
  text-align: center;
  font-weight: 700;
}

.house-repeats-table th:last-child,
.house-repeats-table td:last-child {
  border-right: none;
}
.house-repeats-table tr:last-child th,
.house-repeats-table tr:last-child td {
  border-bottom: none;
}

.house-repeats-table th.summary-label,
.house-repeats-table td.summary-label {
  background-color: var(--bg-highlight, #db4454) !important;
  color: #ffffff !important;
  text-align: left;
  font-weight: 600;
  padding-left: 6px;
}

.ayanamsha-box {
  flex: 0 0 auto;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #ffffff;
  color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
}

.ayanamsha-edit-btn {
  color: var(--bg-highlight, #3b82f6);
  padding: 1px 4px;
  border-radius: 4px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
}

.ayanamsha-edit-btn:hover {
  opacity: 0.85;
  transform: scale(1.1);
  color: var(--bg-highlight, #3b82f6);
}

@media (min-width: 992px) {
  .planet-table-container {
    flex: 5.2 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  .planetary-filter-bar {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  .planetary-filter-bar .input-style {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    height: clamp(31px, 2.5vw, 54px) !important;
    border-radius: var(--radius-sm, 4px) !important;
  }
  .planetary-filter-bar select {
    height: clamp(26px, 2.3vw, 50px) !important;
    font-size: clamp(11px, 0.95vw, 20px) !important;
    padding: 0px 24px 0px 8px !important;
    color: var(--text-primary, #1e293b) !important;
  }
  .planetary-filter-bar label {
    font-size: clamp(6.5px, 0.65vw, 14px) !important;
    top: -8px !important;
  }
  .planetary-filter-bar .events-btn-link {
    width: 25% !important;
    flex-shrink: 0 !important;
  }
  .planetary-filter-bar .events-btn-link button {
    width: 100% !important;
    height: clamp(28px, 2.5vw, 54px) !important;
    font-size: clamp(11px, 0.95vw, 20px) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  .kundli-planets-table {
    flex: 1 1 0 !important;
    max-height: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    display: table !important;
    table-layout: fixed !important;
    margin: 0 !important;
    line-height: clamp(1.4vh, 2vh, 2.5vh) !important;
    border: 1px solid var(--border-neutral, #e2e8f0) !important;
    border-radius: var(--radius-sm, 4px) !important;
    box-shadow: none !important;
  }

  .kundli-planets-table tbody:last-child tr:last-child td {
    border-bottom: none;
  }
  .kundli-planets-table td,
  .kundli-planets-table th {
    padding: clamp(1px, 0.25vh, 3px) clamp(3px, 0.4vw, 6px) !important;
    font-size: clamp(11px, 2vh, 20px) !important;
    line-height: clamp(1.3vh, 2.2vh, 3vh) !important;
  }

  .kundli-table-summary {
    flex: 0 0 auto !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .house-repeats-table {
    flex: 1 1 auto !important;
    border: 1px solid var(--border-neutral, #e2e8f0) !important;
    border-radius: var(--radius-sm, 4px) !important;
    margin-bottom: 0 !important;
  }

  .house-repeats-table th,
  .house-repeats-table td {
    padding: 0px 4px !important;
    line-height: clamp(1.1vh, 1.6vh, 2.2vh) !important;
    font-size: clamp(9.5px, 1.4vh, 15px) !important;
  }

  .ayanamsha-box {
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    border: 1px solid var(--border-neutral, #e2e8f0) !important;
    border-radius: var(--radius-sm, 4px) !important;
    background-color: #ffffff !important;
    color: var(--text-secondary, #475569) !important;
    padding: 0px 8px !important;
    font-size: clamp(9px, 1.4vh, 15px) !important;
    flex: 0 0 auto !important;
  }

  .ayanamsha-box span,
  .ayanamsha-box strong {
    font-size: clamp(9.5px, 1.6vh, 16px) !important;
  }
  .ayanamsha-edit-btn,
  .ayanamsha-edit-btn i {
    font-size: clamp(9px, 1.5vh, 15px) !important;
  }
}

/* ── 2.4 Dasha Tables & Ruling Planet Tables ── */
.dasha-table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px;
  overflow: hidden;
  font-family: "Poppins", sans-serif;
  background: #ffffff;
}

.dasha-table th {
  background-color: var(--bg-highlight) !important;
  color: #ffffff !important;
  font-weight: 600;
  font-size: var(--dasha-th-font, clamp(11px, 1.2vw, 16px)) !important;
  padding: 6px 8px !important;
  line-height: 1.1 !important;
  border: none;
}

.dasha-table td {
  padding: 5px 8px !important;
  font-size: var(--dasha-td-font, clamp(10.5px, 1.1vw, 15px)) !important;
  line-height: 1.1 !important;
  vertical-align: middle;
  border-bottom: 1px solid #e0e0e0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

.dasha-table th:first-child,
.dasha-table td:first-child {
  width: 100px !important;
}
.dasha-table tr:last-child td {
  border-bottom: none !important;
}

.dasha-table tr.bg-highlight-custom td {
  background-color: oklch(
    from var(--bg-highlight, #db4454) l c h / 0.85
  ) !important;
  color: #ffffff !important;
  border-bottom: none !important;
}

.dasha-table tr.dasha-row {
  cursor: pointer;
}

.ruling-planet-table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px;
  overflow: hidden;
  font-family: "Poppins", sans-serif;
  background: #ffffff;
}

.ruling-planet-table th {
  background-color: var(--bg-highlight) !important;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 14px !important;
  padding: 7px 8px !important;
  line-height: 1.1 !important;
  border: none;
  text-align: left;
}

.ruling-planet-table td {
  padding: 6px 8px !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  vertical-align: middle;
  border-bottom: 1px solid #e0e0e0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

.ruling-planet-table td.ruling-label {
  font-weight: 600;
  color: black;
  width: 45%;
}
.ruling-planet-table td.ruling-value {
  font-weight: 700;
  color: black;
  width: 55%;
}
.ruling-planet-table tr:last-child td {
  border-bottom: none !important;
}

@media (min-width: 992px) {
  .dasha-table {
    width: 100% !important;
    height: 100% !important;
    flex: 1 1 0 !important;
    display: table !important;
    table-layout: fixed !important;
    line-height: clamp(1.5vh, 2.2vh, 2.8vh) !important;
    border: 1px solid var(--border-neutral, #e2e8f0) !important;
    border-radius: var(--radius-sm, 4px) !important;
    box-shadow: none !important;
  }

  .dasha-table th {
    background-color: var(--bg-highlight) !important;
    color: #ffffff !important;
    font-size: var(--dasha-th-font, clamp(10.5px, 1.9vh, 19px)) !important;
    padding: clamp(2px, 0.3vh, 4px) clamp(4px, 0.4vw, 8px) !important;
  }

  .dasha-table th,
  .dasha-table td {
    padding: clamp(1.5px, 0.25vh, 3.5px) clamp(4px, 0.4vw, 8px) !important;
    font-size: var(--dasha-td-font, clamp(10.5px, 2vh, 19px)) !important;
    line-height: clamp(1.4vh, 2.3vh, 3.2vh) !important;
  }

  .dasha-table tr.bg-highlight-custom td {
    background-color: var(--bg-highlight) !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  .kundli-right-col > .ruling-planet-table {
    flex: 0.6 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: table !important;
    table-layout: fixed !important;
    margin-top: 0 !important;
    line-height: clamp(1.4vh, 2vh, 2.5vh) !important;
    border: 1px solid var(--border-neutral, #e2e8f0) !important;
    border-radius: var(--radius-sm, 4px) !important;
    box-shadow: none !important;
    background: #ffffff !important;
  }

  .ruling-planet-table th {
    background-color: var(--bg-highlight) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-bottom: none !important;
  }

  .ruling-planet-table th,
  .ruling-planet-table td {
    padding: clamp(1px, 0.2vh, 3px) clamp(4px, 0.4vw, 8px) !important;
    font-size: clamp(11px, 2.1vh, 20px) !important;
    line-height: clamp(1.3vh, 2.2vh, 3vh) !important;
  }
}

/* ── 2.5 Time Tool, Action Buttons & Horary Controls ── */
.horary-card-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 20px;
  background: oklch(from var(--bg-highlight) l c h / 0.08);
  border: 1.5px solid oklch(from var(--bg-highlight) l c h / 0.25);
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

@supports not (background: oklch(from red l c h / 0.1)) {
  .horary-card-box {
    background: rgba(74, 137, 220, 0.08);
    border: 1.5px solid rgba(74, 137, 220, 0.25);
  }
}

.horary-card-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.horary-card-badge {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background-color: var(--bg-highlight) !important;
  color: var(--bg-highlight-color, #ffffff) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(22px, 3.04vh, 25.3px);
  font-weight: 800;
  box-shadow: 0 4px 12px oklch(from var(--bg-highlight) l c h / 0.3);
  flex-shrink: 0;
}

.horary-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.horary-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.25;
  margin: 0;
}
.horary-card-subtitle {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--bg-highlight);
  opacity: 0.85;
  margin: 0;
}
.horary-card-right {
  flex-shrink: 0;
}
.horary-input-wrapper {
  position: relative;
  width: 84px;
  height: 52px;
}

.horary-number-input {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  border: 2px solid var(--bg-highlight) !important;
  background-color: #ffffff !important;
  color: var(--bg-highlight) !important;
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
  outline: none !important;
  transition: all 0.2s ease;
  padding: 0 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.horary-number-input:focus {
  box-shadow: 0 0 0 4px oklch(from var(--bg-highlight) l c h / 0.2);
}
.horary-number-input::-webkit-outer-spin-button,
.horary-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@media (max-width: 480px) {
  .horary-card-box {
    padding: 12px 14px;
    gap: 10px;
    border-radius: 16px;
  }
  .horary-card-badge {
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: clamp(18px, 2.48vh, 20.7px);
  }
  .horary-card-title {
    font-size: 1rem;
  }
  .horary-card-subtitle {
    font-size: 0.75rem;
  }
  .horary-input-wrapper {
    width: 72px;
    height: 46px;
  }
  .horary-number-input {
    font-size: 1.25rem;
    border-radius: 12px;
  }
}

/* Two Column Forms (Matchmaking) */
.two-column-forms {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 767px) {
  .two-column-forms {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
.two-column-forms-wrapper {
  position: relative;
}

.matchmaking-heart-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid rgba(219, 68, 84, 0.15);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}

.matchmaking-heart-badge i {
  color: var(--bg-highlight, #db4454);
  font-size: 18px;
  animation: heartBeat 1.4s infinite ease-in-out;
}

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.15);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.15);
  }
  70% {
    transform: scale(1);
  }
}

@media (max-width: 767px) {
  .matchmaking-heart-badge {
    position: relative;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    margin: 8px 0;
  }
}

@media (min-width: 992px) {
  .time-tool-wrapper {
    display: flex !important;
    flex: 1.25 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    width: 100% !important;
  }

  .time-tool-card {
    flex: 58 1 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: clamp(4px, 0.5vh, 8px) !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid var(--border-neutral, #e2e8f0) !important;
    border-radius: var(--radius-sm, 4px) !important;
    box-shadow: none !important;
  }

  .time-tool-card .btn-xxs {
    height: clamp(14px, 1.8vh, 18px) !important;
    min-width: clamp(16px, 2vh, 22px) !important;
    line-height: clamp(11px, 1.5vh, 14px) !important;
    padding: 0 clamp(2px, 0.4vw, 5px) !important;
    font-size: clamp(8.5px, 1.6vh, 16px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--bg-highlight) !important;
    color: #ffffff !important;
    border-radius: var(--radius-sm, 4px) !important;
    box-shadow: none !important;
  }

  .time-tool-card span,
  .time-tool-card span.font-12 {
    font-size: clamp(10px, 1.8vh, 18px) !important;
    line-height: 1 !important;
    color: var(--text-primary, #0f172a) !important;
  }

  .time-tool-card .stepper {
    width: clamp(62px, 5vw, 130px) !important;
    height: clamp(16px, 2.3vh, 32px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1px solid var(--border-neutral, #cbd5e1) !important;
    border-radius: var(--radius-sm, 4px) !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
  }

  .time-tool-card .stepper a {
    width: clamp(18px, 1.5vw, 36px) !important;
    height: 100% !important;
    line-height: clamp(16px, 2.3vh, 32px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(8.5px, 1.4vh, 15px) !important;
    flex-shrink: 0 !important;
  }

  .time-tool-card .stepper input {
    width: 100% !important;
    height: 100% !important;
    line-height: clamp(16px, 2.3vh, 32px) !important;
    font-size: clamp(9.5px, 1.7vh, 16px) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    text-align: center !important;
    background-color: transparent !important;
    flex: 1 1 auto !important;
    color: var(--text-primary, #0f172a) !important;
  }

  .action-buttons-card {
    flex: 42 1 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .action-buttons-card .btn-s,
  .action-buttons-card .btn-s * {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    line-height: clamp(1.3vh, 1.8vh, 2.4vh) !important;
    padding: clamp(2px, 0.4vh, 5px) clamp(6px, 0.6vw, 10px) !important;
    font-size: clamp(9.5px, 1.8vh, 17px) !important;
    font-weight: 600 !important;
    background-color: var(--bg-highlight) !important;
    color: #ffffff !important;
    border-radius: var(--radius-sm, 4px) !important;
    box-shadow: none !important;
    border: none !important;
  }

  .action-buttons-card .btn-s:hover {
    filter: brightness(0.9) !important;
  }
  .action-buttons-card .btn-s i {
    font-size: clamp(9.5px, 1.7vh, 17px) !important;
    opacity: 0.85 !important;
  }
}

/* ── 2.6 Astrology Modals (Cusp, Planet Position, House Revolve, Ayanamsha, Event List) ── */
#menu-cusp-position,
#menu-planet-position,
#menu-event-list {
  width: 90vw !important;
  max-width: 90vw !important;
  max-height: 80vh !important;
  overflow-y: auto !important;

  transition:
    width 0.2s ease,
    max-width 0.2s ease !important;
}

#menu-cusp-position > div,
#menu-planet-position > div,
#menu-house-revolve > div,
#menu-ayanamsha > div,
#menu-event-list > div {
  padding: clamp(16px, 1.8vw, 28px) !important;
}

#menu-cusp-position table th,
#menu-cusp-position table td,
#menu-planet-position table th,
#menu-planet-position table td {
  padding: clamp(8px, 1vh, 14px) clamp(10px, 1.2vw, 18px) !important;
}

/* ── Checkbox Card Pill (Matches reference image with app theme highlight) ── */
.cusp-checkbox-card {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border-color, #e2e8f0) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
  user-select: none !important;
  min-width: 62px !important;
  height: 38px !important;
  margin: 0 !important;
}
.theme-dark .cusp-checkbox-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}
.cusp-checkbox-card:hover,
.cusp-checkbox-card:focus-within {
  border-color: var(--bg-highlight, #db4454) !important;
  box-shadow: 0 1px 4px rgba(219, 68, 84, 0.18) !important;
}
.cusp-checkbox-card .form-check-input {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  border-radius: 3px !important;
  accent-color: var(--bg-highlight, #db4454) !important;
  cursor: pointer !important;
  border: 1.5px solid #cbd5e1 !important;
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  display: inline-block !important;
}
.cusp-checkbox-card .form-check-input:checked {
  background-color: var(--bg-highlight, #db4454) !important;
  border-color: var(--bg-highlight, #db4454) !important;
}
.cusp-checkbox-card .form-check-label {
  cursor: pointer !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text-color, #1e293b) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Active / Checked Card Highlight */
.cusp-checkbox-card:has(input:checked) {
  border-color: var(--bg-highlight, #db4454) !important;
  background-color: oklch(from var(--bg-highlight) l c h / 0.08) !important;
  box-shadow: 0 1px 4px rgba(219, 68, 84, 0.18) !important;
}
.theme-dark .cusp-checkbox-card:has(input:checked) {
  border-color: var(--bg-highlight, #db4454) !important;
  background-color: rgba(219, 68, 84, 0.22) !important;
}

#event-back-btn {
  display: inline-flex;
  align-items: center !important;
  gap: 6px !important;
  background-color: var(--bg-highlight, #db4454) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition:
    transform 0.15s ease,
    background-color 0.15s ease !important;
}
#event-back-btn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(0.95) !important;
}

#menu-event-list .table-responsive,
#menu-event-list #event-add-form-view,
#menu-event-list #event-edit-form-view {
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--bg-highlight, #db4454) rgba(0, 0, 0, 0.08) !important;
}

#menu-event-list .table-responsive::-webkit-scrollbar,
#menu-event-list #event-add-form-view::-webkit-scrollbar,
#menu-event-list #event-edit-form-view::-webkit-scrollbar {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
}

#menu-event-list .table-responsive::-webkit-scrollbar-track,
#menu-event-list #event-add-form-view::-webkit-scrollbar-track,
#menu-event-list #event-edit-form-view::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05) !important;
  border-radius: 10px !important;
}

#menu-event-list .table-responsive::-webkit-scrollbar-thumb,
#menu-event-list #event-add-form-view::-webkit-scrollbar-thumb,
#menu-event-list #event-edit-form-view::-webkit-scrollbar-thumb {
  background: var(--bg-highlight, #db4454) !important;
  border-radius: 10px !important;
}

#menu-event-list .table-responsive::-webkit-scrollbar-thumb:hover,
#menu-event-list #event-add-form-view::-webkit-scrollbar-thumb:hover,
#menu-event-list #event-edit-form-view::-webkit-scrollbar-thumb:hover {
  filter: brightness(0.85) !important;
}

/* ── Custom Accordion Card Shadow & Background Contrast ── */
#menu-event-list .card.custom-card-style {
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)) !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
  background-color: var(--bg-card, #ffffff) !important;
}

#menu-event-list .accordion-btn {
  background-color: var(--bg-highlight, #db4454) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 11px 16px !important;
  box-shadow: none !important;
  transition:
    background-color 0.2s ease,
    color 0.2s ease !important;
}

.color-planet {
  color: #da3731 !important;
}
.color-nlord {
  color: #36b936 !important;
}
.color-slord {
  color: #ff9900 !important;
}
.color-sslord {
  color: #4b80ad !important;
}

#menu-cusp-position,
#menu-planet-position,
#menu-aspect-planet,
#menu-aspect-cusp,
#menu-addtional-significator,
#menu-house-cusp {
  --modal-table-header-font: clamp(12px, 1.1vw, 16px);
  --modal-table-body-font: clamp(11px, 0.95vw, 15px);
  --modal-title-font: clamp(15px, 1.4vw, 20px);
}

#menu-cusp-position h4,
#menu-planet-position h4,
#menu-aspect-planet h4,
#menu-aspect-cusp h4,
#menu-addtional-significator h4,
#menu-house-cusp h4 {
  font-size: var(--modal-title-font) !important;
}

#menu-cusp-position table th,
#menu-planet-position table th,
#menu-aspect-planet table th,
#menu-aspect-cusp table th,
#menu-addtional-significator table th,
#menu-house-cusp table th {
  font-size: var(--modal-table-header-font) !important;
}

#menu-cusp-position table td,
#menu-planet-position table td,
#menu-aspect-planet table td,
#menu-aspect-cusp table td,
#menu-addtional-significator table td,
#menu-house-cusp table td {
  font-size: var(--modal-table-body-font) !important;
}

/* ── Additional Significators Table & Badge Colors (Excel Matrix) ── */
.subLordHouse-bg {
  background-color: #cff6d1 !important;
  color: #0f172a !important;
}

.NakLordHouse-bg {
  background-color: #fdf9ba !important;
  color: #0f172a !important;
}

.theme-dark .subLordHouse-bg {
  background-color: #1b4332 !important;
  color: #d8f3dc !important;
}

.theme-dark .NakLordHouse-bg {
  background-color: #5c4d10 !important;
  color: #fef08a !important;
}

.significator-matrix-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--border-color, #cbd5e1) !important;
}

.significator-matrix-table tr:first-child td:first-child {
  border-top-left-radius: 12px !important;
}
.significator-matrix-table tr:first-child td:last-child {
  border-top-right-radius: 12px !important;
}
.significator-matrix-table tr:last-child td:first-child {
  border-bottom-left-radius: 12px !important;
}
.significator-matrix-table tr:last-child td:last-child {
  border-bottom-right-radius: 12px !important;
}

.significator-matrix-table td {
  padding: 5px 8px !important;
  font-size: 11.5px !important;
  text-align: center !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.theme-dark .significator-matrix-table td {
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f1f5f9 !important;
}

.significator-matrix-table td.block-divider-left {
  border-left: 4px solid #adafb2 !important;
}

.significator-matrix-table tr.row-group-divider td {
  border-bottom: 4px solid #adafb2 !important;
}

#menu-cusp-position h4,
#menu-planet-position h4 {
  font-size: var(--modal-title-font) !important;
}
#menu-cusp-position table th,
#menu-planet-position table th {
  font-size: var(--modal-table-header-font) !important;
}
#menu-cusp-position table td,
#menu-planet-position table td {
  font-size: var(--modal-table-body-font) !important;
}

/* Responsive Media Queries for Astrology Modals */
@media (min-width: 1000px) {
  :root {
    --dasha-th-font: clamp(11.5px, 1.1vw, 16px);
    --dasha-td-font: clamp(11px, 1vw, 15px);
  }
  #menu-cusp-position,
  #menu-planet-position {
    width: 700px !important;
    max-width: 85vw !important;
  }
  .kundlis-row {
    flex: 3.8 1 0 !important;
  }
}

@media (min-width: 1400px) {
  :root {
    --dasha-th-font: clamp(13px, 1.1vw, 17px);
    --dasha-td-font: clamp(12.5px, 1vw, 16px);
  }
  .canvas-container canvas {
    width: 90% !important;
  }
  #menu-cusp-position,
  #menu-planet-position {
    width: 900px !important;
    max-width: 80vw !important;
  }
  .kundlis-row {
    flex: 4.5 1 0 !important;
  }
}

@media (min-width: 2000px) {
  :root {
    --dasha-th-font: clamp(15px, 1.1vw, 19px);
    --dasha-td-font: clamp(14px, 1vw, 18px);
  }
  #menu-cusp-position,
  #menu-planet-position {
    width: 1150px !important;
    max-width: 75vw !important;
  }
  .kundlis-row {
    flex: 5.2 1 0 !important;
  }
}

@media (min-width: 2500px) {
  :root {
    --dasha-th-font: clamp(17px, 1.1vw, 22px);
    --dasha-td-font: clamp(16px, 1vw, 20px);
  }

  #menu-cusp-position,
  #menu-planet-position {
    width: 1400px !important;
    max-width: 70vw !important;
  }
  .kundlis-row {
    flex: 6 1 0 !important;
  }
}

/* ==========================================================================
   3. DASHBOARD
   ========================================================================== */

/* ── 3.1 Main Dashboard Layout & Kundli List Table ── */
.dash-two-col-card {
  margin: 16px !important;
  border-radius: 16px !important;
  overflow: visible !important;
}

.dash-title {
  font-size: clamp(21px, 2.2vh, 25px) !important;
  font-weight: 700 !important;
  color: var(--text-primary, #0f172a) !important;
}

.dash-total-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.12);
  color: var(--bg-highlight, #db4454);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.dash-row {
  display: flex;
  gap: 0;
  align-items: stretch !important;
  padding: 0 8px 12px;
  height: 90vh;
}

.dash-left-card {
  flex: 1;
  border-radius: 16px !important;
  margin-right: 0 !important;
  display: flex;
  flex-direction: column;
}

.dash-left-card > .content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.dash-left-card .dash-section-label {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.dash-right-card {
  flex: 4;
  border-radius: 16px !important;
  display: flex;
  flex-direction: column;
  height: 100% !important;
  min-height: 100% !important;
}

.dash-right-card > .content {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.custom-kundli-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.custom-kundli-table th {
    font-size: clamp(10px, 0.8vw, 13px) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 14px;
}

.custom-kundli-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-size: clamp(11px, 1vw, 17px) !important;
    vertical-align: middle;
    color: #334155;
    transition: background 0.15s ease;
}

.custom-kundli-table tbody tr {
  cursor: pointer;
}
.custom-kundli-table tbody tr:hover td {
  background: rgba(248, 250, 252, 0.8);
}
.custom-kundli-table tbody tr:last-child td {
  border-bottom: none;
}

.tbl-name {
  font-weight: 700;
  color: #0f172a;
}

.btn-tbl-action {
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  transition: all 0.2s ease;
}

.btn-tbl-action.edit-btn:hover {
  background: var(--bg-highlight, #db4454);
  border-color: var(--bg-highlight, #db4454);
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(219, 68, 84, 0.25);
}

.btn-tbl-action.delete-btn:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(239, 68, 68, 0.25);
}

@media (max-width: 767px) {
  .dash-row {
    flex-direction: column;
    padding: 0 4px 8px;
    height: auto;
  }
  .dash-left-card,
  .dash-right-card {
    flex: 1 1 100%;
  }
}

.dash-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 12px;
}

/* ── Profile Form Compact Layout ── */
.profile-form-compact .input-style {
  margin-bottom: 8px !important;
}
.profile-form-compact .input-style input,
.profile-form-compact .input-style select {
  height: 38px !important;
  line-height: 38px !important;
  font-size: 12px !important;
}
.profile-form-compact .input-style label {
  font-size: 11px !important;
  top: -10px !important;
}

@media (min-height: 720px) {
  .dash-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
@media (max-width: 767px) {
  .dash-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ── 3.2 Dashboard Search & Action Buttons ── */
.dash-search-box {
  position: relative;
}
.search-box .fa-search {
  left: 14px !important;
  padding: 0 !important;
  line-height: 1 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.search-box input {
  padding-left: 44px !important;
}

.dash-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
}

.dash-search-clear:hover {
  background: rgba(0, 0, 0, 0.06);
}

.dash-action-white {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #272829 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-bottom: 8px !important;
}

.dash-action-sm {
  padding: 5px 8px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  gap: 6px !important;
  margin-bottom: 5px !important;
}

.dash-action-sm .dash-action-icon-white {
  width: 22px !important;
  height: 22px !important;
  font-size: 10px !important;
  border-radius: 5px !important;
}

.dash-action-sm .dash-action-arrow {
  font-size: 8px !important;
}

.dash-action-white:last-child {
  margin-bottom: 0 !important;
}

.dash-action-icon-white {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: #eef2f6 !important;
  color: #64748b !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.dash-action-arrow {
  margin-left: auto;
  font-size: 10px;
  color: #94a3b8;
  transition: all 0.2s ease;
}

.dash-action-white.active {
  background: #f3effc !important;
  color: var(--bg-highlight, #db4454) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px var(--bg-highlight) !important;
}

.dash-action-white.active .dash-action-icon-white {
  background-color: var(--bg-highlight, #db4454) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px oklch(from var(--bg-highlight, #db4454) l c h / 0.3) !important;
}

.dash-action-white.active .dash-action-arrow {
  color: var(--bg-highlight, #db4454) !important;
  transform: translateX(2px);
}

.dash-action-white:hover:not(.active) {
  background: #ffffff !important;
  color: var(--bg-highlight, #db4454) !important;
  box-shadow: 0 4px 12px var(--bg-highlight) !important;
  transform: translateY(-1px) !important;
}

.dash-action-white:hover:not(.active) .dash-action-icon-white {
  color: var(--bg-highlight, #db4454) !important;
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.1) !important;
}

.dash-action-white:hover:not(.active) .dash-action-arrow {
  color: var(--bg-highlight, #db4454) !important;
  transform: translateX(2px);
}

/* ── 3.3 Modern Web Auth Pages (Signin / Signup / OTP) ── */
.auth-page-wrapper {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: #ffffff;
  overflow-x: hidden;
  font-family:
    "Poppins",
    system-ui,
    -apple-system,
    sans-serif;
}

.auth-side-brand {
  flex: 0 0 46%;
  max-width: 46%;
  position: relative;
  background: radial-gradient(
    circle at top right,
    #2a1b4e 0%,
    #0f172a 60%,
    #090d16 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 56px;
  color: #ffffff;
  overflow: hidden;
}

.auth-brand-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
  mix-blend-mode: luminosity;
  pointer-events: none;
}

.auth-left-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.4) 0%,
    rgba(219, 68, 84, 0.25) 100%
  );
  pointer-events: none;
}

.auth-brand-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
}

.auth-brand-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    var(--bg-highlight) 0%,
    var(--bg-highlight) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 20px;
  box-shadow: 0 8px 20px rgba(219, 68, 84, 0.3);
}

.auth-brand-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
}

.auth-hero-body {
  position: relative;
  z-index: 5;
  margin: auto 0;
  max-width: 480px;
}

.auth-hero-title {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.5px;
  color: #ffffff;
  margin-bottom: 16px;
}

.auth-hero-subtitle {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 32px;
}

.auth-hero-pills {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-hero-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 14px;
  color: #ffffff;
}

.auth-hero-pill i {
  color: #f87171;
  font-size: 16px;
}
.auth-brand-footer {
  position: relative;
  z-index: 5;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.auth-form-side {
  flex: 0 0 54%;
  max-width: 54%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 40px;
  background: #ffffff;
  overflow-y: auto;
}

.auth-form-container {
  width: 100%;
  max-width: 440px;
}
.auth-form-title {
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}
.auth-form-desc {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 32px;
}
.custom-field-group {
  margin-bottom: 22px;
}

.custom-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
}

.custom-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.custom-input-wrapper i.field-icon {
  position: absolute;
  left: 16px;
  color: #94a3b8;
  font-size: 16px;
  pointer-events: none;
  transition: color 0.2s ease;
}

.custom-input-wrapper input {
  width: 100%;
  height: 50px;
  padding: 12px 16px 12px 48px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  font-size: 14px;
  color: #0f172a;
  transition: all 0.2s ease;
  outline: none;
}

.custom-input-wrapper input:focus {
  background: #ffffff;
  border-color: var(--highlight-bg, #db4454);
  box-shadow: 0 0 0 4px rgba(219, 68, 84, 0.12);
}

.custom-input-wrapper input:focus + i.field-icon,
.custom-input-wrapper input:focus ~ i.field-icon {
  color: var(--highlight-bg, #db4454);
}

.custom-submit-btn {
  width: 100%;
  height: 50px;
  color: #ffffff !important;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  text-decoration: none !important;
}

.custom-submit-btn:not(.bg-highlight) {
  background: linear-gradient(135deg, #db4454 0%, #b91c1c 100%);
}
.custom-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px var(--bg-highlight);
  color: #ffffff !important;
}

.auth-divider-line {
  height: 1px;
  background: #e2e8f0;
  margin: 32px 0 24px 0;
  position: relative;
}
.auth-nav-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.auth-nav-links a {
  color: #475569;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}
.auth-nav-links a:hover {
  color: #db4454;
}

@media (max-width: 991px) {
  .auth-page-wrapper {
    flex-direction: column;
  }
  .auth-side-brand {
    display: none !important;
  }
  .auth-form-side {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 40px 24px;
  }
}

@media (min-width: 1000px) {
  .auth-form-container {
    max-width: 440px;
  }
}
@media (min-width: 1400px) {
  .auth-form-container {
    max-width: 500px;
  }
  .auth-hero-title {
    font-size: 40px;
  }
  .auth-form-title,
  #verify_content h1.font-28 {
    font-size: 32px !important;
  }
  .custom-input-wrapper input,
  .custom-submit-btn,
  #verifyotp_btn {
    height: 54px !important;
  }
  #verify_content .otp {
    width: 56px !important;
    height: 60px !important;
    font-size: 26px !important;
  }
}

@media (min-width: 2000px) {
  .auth-side-brand {
    flex: 0 0 42%;
    max-width: 42%;
    padding: 64px 72px;
  }
  .auth-form-side {
    flex: 0 0 58%;
    max-width: 58%;
    padding: 80px 60px;
  }
  .auth-form-container {
    max-width: 600px;
  }
  .auth-hero-title {
    font-size: 48px;
  }
  .auth-hero-subtitle,
  .auth-hero-pill {
    font-size: 18px;
  }
  .auth-form-title,
  #verify_content h1.font-28 {
    font-size: 38px !important;
  }
  .auth-form-desc,
  #verify_content .boxed-text-l {
    font-size: 16px !important;
  }
  .custom-input-wrapper input,
  .custom-submit-btn,
  #verifyotp_btn {
    height: 60px !important;
    font-size: 17px !important;
  }
  #verify_content .otp {
    width: 66px !important;
    height: 72px !important;
    font-size: 30px !important;
  }
}

@media (min-width: 2500px) {
  .auth-side-brand {
    flex: 0 0 40%;
    max-width: 40%;
    padding: 80px 90px;
  }
  .auth-form-side {
    flex: 0 0 60%;
    max-width: 60%;
    padding: 100px 80px;
  }
  .auth-form-container {
    max-width: 720px;
  }
  .auth-hero-title {
    font-size: 56px;
  }
  .auth-hero-subtitle,
  .auth-hero-pill {
    font-size: 20px;
  }
  .auth-form-title,
  #verify_content h1.font-28 {
    font-size: 44px !important;
  }
  .auth-form-desc,
  #verify_content .boxed-text-l {
    font-size: 18px !important;
  }
  .custom-input-wrapper input,
  .custom-submit-btn,
  #verifyotp_btn {
    height: 66px !important;
    font-size: 19px !important;
  }
  #verify_content .otp {
    width: 76px !important;
    height: 82px !important;
    font-size: 34px !important;
  }
  .auth-form-container .btn.w-50,
  .auth-form-container .btn.btn-full {
    font-size: 16px !important;
    padding: 14px 20px !important;
  }
}

/* ==========================================================================
   4. NUMEROLOGY
   ========================================================================== */

/* ── 4.1 Numerology Viewport Dashboard System ── */
:root {
  --numero-dash-gap-main: clamp(14px, 2vh, 24px);
  --numero-dash-pad-y: clamp(16px, 2.4vh, 32px);
  --numero-dash-pad-x: clamp(18px, 2.4vw, 36px);

  --numero-top-gap: clamp(14px, 1.6vw, 26px);
  --numero-bottom-gap: clamp(10px, 1.2vw, 18px);

  --numero-card-radius-lg: clamp(8px, 0.8vw, 16px);
  --numero-card-radius-md: clamp(6px, 0.6vw, 12px);
  --numero-card-radius-sm: clamp(4px, 0.5vw, 10px);

  --numero-font-cell: clamp(1.05rem, 3vh, 3rem);
  --numero-font-title: clamp(14px, 2.5vh, 28px);
  --numero-font-input: clamp(11px, 1.7vh, 18px);
  --numero-font-table: clamp(10px, 1.6vh, 18px);
  --numero-font-icon: clamp(16px, 3.2vh, 42px);
  --numero-font-label: clamp(10px, 1.7vh, 19px);
}

html:has(.numero-dashboard-container),
body:has(.numero-dashboard-container),
body:has(.numero-dashboard-container) #page,
.numero-page-content {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body:has(.numero-dashboard-container) {
  margin: 0 !important;
}

body:has(.numero-dashboard-container) #page,
.numero-page-content,
.numero-top-card-wrapper,
.numero-top-section,
.numero-bottom-section,
.numero-bottom-section > div,
.numero-dashboard-container,
.numero-table-card,
.user-info-card,
.summary-table-card,
.feature-card,
.numero-grid-wrapper,
.numerology-data-table {
  width: 100% !important;
  box-sizing: border-box !important;
}

.numero-page-content {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}

.numero-container {
  margin: 0 auto !important;
  padding: clamp(10px, 2vh, 32px) clamp(10px, 2vw, 32px) !important;
  max-width: clamp(860px, 88vw, 1900px) !important;
}

.numero-title-wrapper {
  margin-bottom: 16px !important;
}
.numero-title {
  font-size: 28px !important;
  margin-bottom: 0 !important;
}

.count-table {
  font-size: var(--numero-font-table) !important;
  line-height: 3 !important;
}

@media (min-width: 2000px) {
  .count-table {
    line-height: 6 !important;
    font-size: xx-large;
  }
}

@media (min-width: 992px) {
  .numero-dashboard-container {
    height: calc(100vh - clamp(50px, 8vh, 80px)) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: clamp(42%, 45vh, 48%) 1fr !important;
    gap: var(--numero-dash-gap-main) !important;
    padding: var(--numero-dash-pad-y) var(--numero-dash-pad-x) !important;
    overflow: hidden !important;
  }

  .numero-dashboard-container:has(
    > .numero-bottom-section > div:nth-child(19)
  ) {
    grid-template-rows: clamp(36%, 38vh, 40%) 1fr !important;
  }

  .numero-dashboard-container:has(.numero-5-card-grid) {
    display: grid !important;
    grid-template-rows: clamp(36%, 38vh, 42%) auto 1fr !important;
    height: calc(100vh - clamp(50px, 8vh, 80px)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    gap: var(--numero-dash-gap-main) !important;
  }

  .numero-dashboard-container:has(.numero-5-card-grid) .numero-top-section {
    height: 100% !important;
    min-height: 0 !important;
  }

  .numero-dashboard-container:has(.numero-5-card-grid) .numero-5-card-grid {
    height: 100% !important;
    min-height: 0 !important;
  }
}

@media (min-width: 1600px) {
  :root {
    --numero-dash-gap-main: clamp(18px, 2.8vh, 36px);
    --numero-top-gap: clamp(18px, 2.2vw, 36px);
    --numero-bottom-gap: clamp(14px, 1.6vw, 26px);
    --numero-dash-pad-y: clamp(20px, 3.2vh, 44px);
    --numero-dash-pad-x: clamp(24px, 3.2vw, 56px);

    --numero-font-icon: clamp(14px, 2.4vh, 32px);
    --numero-font-label: clamp(9px, 1.4vh, 15px);
    --numero-font-title: clamp(14px, 2.2vh, 24px);
    --numero-font-cell: clamp(1rem, 2.5vh, 2.4rem);
    --numero-font-input: clamp(11px, 1.5vh, 16px);
    --numero-font-table: clamp(10px, 1.4vh, 16px);
  }

  .numero-dashboard-container {
    grid-template-rows: clamp(36%, 38vh, 40%) 1fr !important;
  }

  .numero-dashboard-container:has(
    > .numero-bottom-section > div:nth-child(19)
  ) {
    grid-template-rows: clamp(32%, 34vh, 36%) 1fr !important;
  }
}

/* ── 4.2 Top Section Cards (Table Card, User Info Card, Summary Card) ── */
.numero-top-section {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--numero-top-gap) !important;
  height: 100% !important;
  min-height: 0 !important;
  align-items: stretch !important;
}

.numero-top-card-wrapper {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.numero-top-card-wrapper.flex-row,
.numero-top-card-wrapper.has-left-buttons {
  flex-direction: row !important;
}

.numero-table-card,
.user-info-card,
.summary-table-card {
  height: 100% !important;
  display: flex !important;
  border-radius: var(--numero-card-radius-lg) !important;
  margin: 0 !important;
  max-width: 100% !important;
}

.numero-table-card {
  padding: clamp(8px, 1.4vh, 18px) clamp(8px, 1.2vw, 18px) !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.numero-grid-wrapper {
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

.square-grid-table {
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  background: #ffffff !important;
}

.numero-grid-table {
  table-layout: fixed !important;
  height: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  /* width: 70% !important; */
  margin: auto !important;
  border-collapse: collapse !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  background: #ffffff !important;
}

.square-grid-table td,
.numero-grid-table td {
  width: 33.333% !important;
  padding: 0 !important;
  vertical-align: middle !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  background: #ffffff !important;
}

.numero-grid-table.grid-4x4 td {
  width: 25% !important;
}

.square-grid-cell,
.numero-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  font-weight: 600 !important;
  font-size: var(--numero-font-cell) !important;
  color: var(--color-theme, #1d1d1d) !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

.user-info-card {
  padding: clamp(10px, 1.8vh, 22px) clamp(12px, 1.4vw, 22px) !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: clamp(4px, 0.8vh, 12px) !important;
  background-color: var(--bg-highlight, #1e88e5);
  box-shadow: 0 10px 25px rgba(30, 136, 229, 0.15);
  border: none;
}

.user-info-card h1 {
  font-size: var(--numero-font-title) !important;
  margin: 0 !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

.user-input-group {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 clamp(8px, 1vw, 16px) !important;
  border-radius: var(--numero-card-radius-sm) !important;
  gap: clamp(6px, 0.8vw, 12px) !important;
  margin: 0 !important;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.user-input-icon,
.user-input-check {
  font-size: var(--numero-font-input) !important;
}

.user-input-val {
  font-size: var(--numero-font-input) !important;
  font-weight: 600 !important;
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
}

.summary-table-card {
  padding: clamp(8px, 1.4vh, 18px) clamp(10px, 1.2vw, 20px) !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.numerology-data-table {
  height: 100% !important;
  display: table !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  width: 100%;
}

.numerology-data-table tbody {
  height: 100% !important;
}
.numerology-data-table tr {
  height: 25% !important;
}

.numerology-data-table th,
.numerology-data-table td {
  padding: clamp(4px, 0.8vh, 10px) clamp(6px, 0.8vw, 14px) !important;
  font-size: var(--numero-font-table) !important;
  vertical-align: middle !important;
}

.numerology-data-table th {
  font-weight: 600;
  color: #475569;
  background-color: #ffffff;
  text-align: left;
}
.numerology-data-table td {
  font-weight: 700;
  color: #1e293b;
  background-color: #ffffff;
  text-align: center;
}

/* ── 4.3 Bottom Section Feature Cards Grid ── */
.numero-bottom-section {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
  gap: var(--numero-bottom-gap) !important;
  height: 100% !important;
  min-height: 0 !important;
}

.numero-bottom-section.numero-5-card-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  grid-template-rows: 1fr !important;
  gap: var(--numero-bottom-gap, 16px) !important;
  height: auto !important;
  min-height: 110px !important;
}

@media (max-width: 991.98px) {
  .numero-bottom-section.numero-5-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    gap: 12px !important;
  }
}

/* Pythagoras Grid (22 cards) Base */
.numero-bottom-section:has(> div:nth-child(19)) {
  grid-template-columns: repeat(6, 1fr) !important;
  grid-template-rows: repeat(4, 1fr) !important;
}

/* Vedic Grid (14 cards) Base */
.numero-bottom-section:has(> div:nth-child(13)):not(:has(> div:nth-child(15))) {
  grid-template-columns: repeat(6, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
}

@media (min-width: 1600px) {
  .numero-bottom-section {
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
  }

  .numero-bottom-section:has(> div:nth-child(19)) {
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-rows: repeat(4, 1fr) !important;
  }

  .numero-bottom-section:has(> div:nth-child(13)):not(
      :has(> div:nth-child(15))
    ) {
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
  }
}

.numero-bottom-section > div {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
}

.feature-card {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  flex: 1 1 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--numero-card-radius-md) !important;
  padding: clamp(4px, 0.8vh, 12px) clamp(5px, 0.6vw, 12px) !important;
  text-align: center !important;
  text-decoration: none !important;
  color: #ffffff !important;
  box-sizing: border-box !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease !important;
}

.feature-card:hover {
  transform: translateY(-2px) scale(1.02) !important;
  filter: brightness(1.1) !important;
  color: #ffffff !important;
}

.feature-icon-wrapper {
  font-size: var(--numero-font-icon) !important;
  color: #ffffff !important;
  margin-bottom: clamp(3px, 0.5vh, 8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.feature-icon-wrapper i {
  color: #ffffff !important;
}

.feature-label {
  font-size: var(--numero-font-label) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  text-align: center !important;
  word-break: break-word !important;
}

/* Loshu Vedic color classes */
.loshu-vedic-blue {
  color: #0a5bcc !important;
}
.loshu-vedic-brown {
  color: #8b4513 !important;
}
.loshu-vedic-yellow {
  color: #ebae12 !important;
}

/* Dark theme overrides for Numerology */
.theme-dark .square-grid-cell,
.theme-dark .numero-cell {
  color: #f1f5f9 !important;
  background: #1e293b !important;
}
.theme-dark .square-grid-table,
.theme-dark .numero-grid-table {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.theme-dark .square-grid-table td,
.theme-dark .numero-grid-table td {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.theme-dark .numero-table-card,
.theme-dark .summary-table-card {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.theme-dark .numerology-data-table {
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.theme-dark .numerology-data-table th {
  background-color: #1e293b !important;
  color: #94a3b8 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.theme-dark .numerology-data-table td {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── Mobile Numerology Table & Badges ── */
.count-badge-red {
  background-color: #d32f2f;
  color: #ffffff;
  font-weight: 700;
  padding: clamp(2px, 0.4vh, 5px) clamp(5px, 0.6vw, 10px);
  border-radius: 4px;
  display: inline-block;
  min-width: clamp(20px, 1.8vw, 28px);
  text-align: center;
  line-height: 1.2;
  font-size: var(--numero-font-table) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.mobile-num-table {
  border-color: #dee2e6 !important;
  width: 100%;
  table-layout: fixed !important;
}

.mobile-num-table th,
.mobile-num-table td {
  padding: clamp(3px, 0.7vh, 8px) clamp(4px, 0.6vw, 10px) !important;
  vertical-align: middle !important;
  font-size: var(--numero-font-table) !important;
}

.mobile-num-table thead th {
  background-color: #f8f9fa;
}

.mobile-num-table tbody th {
  line-height: 1.15;
}

.num-table-head-col {
  width: 32% !important;
}

.theme-dark .mobile-num-table {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.theme-dark .mobile-num-table thead th {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.theme-dark .mobile-num-table tbody th {
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.theme-dark .mobile-num-table td {
  color: #cbd5e1 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ── 4.5 Numerology Modals & Miscellaneous Tools ── */
.numero-modal {
  overflow: hidden !important;
  width: 480px !important;
  height: 650px !important;
  max-width: 95% !important;
  max-height: 85vh !important;
}

.numero-modal .card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 0 !important;
}

.numero-modal .card-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding-bottom: 80px !important;
  scrollbar-width: thin !important;
  scrollbar-color: #ccc #f1f1f1 !important;
}

.loshu-container {
  padding: 24px;
  font-family: "Poppins", "Outfit", sans-serif;
}
.loshu-title-wrapper {
  text-align: center;
  margin-bottom: 30px;
}
.loshu-title {
  font-size: 32px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.5px;
}

/* Mobile & Tablet Responsive Overrides */
@media (max-width: 768px) {
  .numero-container {
    padding: clamp(8px, 2vw, 16px) !important;
    max-width: 100% !important;
  }

  .square-grid-cell,
  .numero-cell {
    min-height: clamp(48px, 12vw, 90px) !important;
    font-size: clamp(0.8rem, 3vw, 1.3rem) !important;
  }

  .user-info-card,
  .numero-table-card,
  .summary-table-card {
    max-width: 100% !important;
    padding: clamp(10px, 3vw, 20px) !important;
  }

  .numerology-table-box,
  .numero-grid-wrapper {
    max-width: clamp(160px, 55vw, 280px) !important;
  }
}

/* ==========================================================================
   Lalkitab
   ========================================================================== */

.lalkitab-analysis-table {
  width: 100%;
  border-collapse: collapse;
}

.lalkitab-analysis-table td {
  padding: 8px 16px;
  font-size: 13px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  vertical-align: middle;
}

.lalkitab-analysis-table td.lbl {
  color: #000000 !important;
  font-weight: 600;
}
.lalkitab-analysis-table td.val {
  font-weight: 700;
}

.lalkitab-planets-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 6px;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px;
  overflow: hidden;
}

.lalkitab-planets-table th {
  background-color: var(--bg-highlight) !important;
  color: #ffffff !important;
  font-weight: 600;
  padding: 8px 8px !important;
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
}

.lalkitab-planets-table td {
  padding: 6px 8px !important;
  font-size: 13px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  color: #1e293b;
}

.lalkitab-planets-table td:last-child {
  border-right: none;
}
.lalkitab-planets-table tr:last-child td {
  border-bottom: none;
}

.lalkitab-planets-table td.planet-header {
  background-color: var(--bg-highlight) !important;
  color: #ffffff !important;
  font-weight: 600;
  text-align: center;
  width: 5%;
}

.lalkitab-planets-table td.cell-acha {
  background-color: #e8f5e9 !important;
  color: #2e7d32 !important;
  font-weight: 600;
}
.lalkitab-planets-table td.cell-manda {
  background-color: #ffebee !important;
  color: #c62828 !important;
  font-weight: 600;
}

/* ── Aspect Planets Table (Styled after Acha Manda Table) ── */
.aspect-planets-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 6px;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  border: 1px solid var(--border-color, #e0e0e0) !important;
  border-radius: 12px;
  overflow: hidden;
}

.aspect-planets-table th {
  background-color: var(--bg-highlight) !important;
  color: #ffffff !important;
  font-weight: 600;
  padding: 8px 6px !important;
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
}
.aspect-planets-table th:last-child {
  border-right: none;
}

.aspect-planets-table td {
  padding: 8px 6px !important;
  font-size: 13px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  color: #1e293b;
}

.aspect-planets-table td:last-child {
  border-right: none;
}
.aspect-planets-table tr:last-child td {
  border-bottom: none;
}

.aspect-planets-table td.planet-header {
  background-color: var(--bg-highlight) !important;
  color: #ffffff !important;
  font-weight: 600;
  text-align: center;
}

.aspect-planets-table td.cell-aspect {
  font-weight: 600;
  color: #0f172a;
}

/* ── Orb Stepper Styling (Time Tool Style) ── */
.orb-stepper-item {
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.orb-stepper-item:hover {
  border-color: var(--bg-highlight, #db4454) !important;
}

.orb-stepper-item .stepper {
  width: 68px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background-color: var(--bg-card, #ffffff) !important;
}

.orb-stepper-item .stepper a {
  width: 20px !important;
  height: 100% !important;
  line-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}

.orb-stepper-item .stepper input {
  width: 26px !important;
  height: 100% !important;
  line-height: 24px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  text-align: center !important;
  background-color: transparent !important;
  flex: 1 1 auto !important;
  color: var(--text-color, #0f172a) !important;
  -moz-appearance: textfield !important;
}
.orb-stepper-item .stepper input::-webkit-outer-spin-button,
.orb-stepper-item .stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* ── Aspect Modal Side-by-Side Flex Layout ── */
.aspect-modal-split-container {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.aspect-table-wrapper {
  flex: 1 1 62% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: 76vh !important;
}

.aspect-orbs-sidebar {
  width: 340px !important;
  flex-shrink: 0 !important;
  max-height: 76vh !important;
  overflow-y: auto !important;
}

@media (max-width: 820px) {
  .aspect-modal-split-container {
    flex-direction: column !important;
  }
  .aspect-table-wrapper {
    max-height: none !important;
  }
  .aspect-orbs-sidebar {
    width: 100% !important;
    max-height: none !important;
  }
}

/* ── Premium Aspect Badge & Stepper Styling ── */
.aspect-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(219, 68, 84, 0.1) !important;
  color: var(--bg-highlight, #db4454) !important;
  border: 1px solid rgba(219, 68, 84, 0.25) !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  transition:
    transform 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease !important;
}
.theme-dark .aspect-badge {
  background-color: rgba(219, 68, 84, 0.2) !important;
  border-color: rgba(219, 68, 84, 0.4) !important;
}
.aspect-badge:hover {
  background-color: var(--bg-highlight, #db4454) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}
.aspect-badge small {
  opacity: 0.75 !important;
  font-size: 9.5px !important;
  margin-left: 2.5px !important;
}

.custom-stepper {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--bg-secondary, #f1f5f9) !important;
  border: 1px solid var(--border-color, #cbd5e1) !important;
  border-radius: 8px !important;
  padding: 2px !important;
  height: 28px !important;
}
.theme-dark .custom-stepper {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.custom-stepper .stepper-btn {
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  border: none !important;
  background: #ffffff !important;
  color: var(--text-color, #334155) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  text-decoration: none !important;
}
.theme-dark .custom-stepper .stepper-btn {
  background: #0f172a !important;
  color: #f1f5f9 !important;
}

.custom-stepper .stepper-btn.stepper-add:hover {
  background: #22c55e !important;
  color: #ffffff !important;
}
.custom-stepper .stepper-btn.stepper-sub:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
}

.custom-stepper input {
  width: 28px !important;
  border: none !important;
  background: transparent !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-color, #0f172a) !important;
  margin: 0 2px !important;
  padding: 0 !important;
  -moz-appearance: textfield !important;
}
.custom-stepper input::-webkit-outer-spin-button,
.custom-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* ── Aspect Orb Stepper (Bigger Time-Tool Style) ── */
.aspect-orb-stepper {
  width: 95px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border: 1px solid var(--border-color, #cbd5e1) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background-color: var(--bg-card, #ffffff) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

.aspect-orb-stepper a {
  width: 30px !important;
  height: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease !important;
}

.aspect-orb-stepper a.stepper-sub:hover {
  background-color: rgba(239, 68, 68, 0.12) !important;
}

.aspect-orb-stepper a.stepper-add:hover {
  background-color: rgba(34, 197, 94, 0.12) !important;
}

.aspect-orb-stepper input {
  width: 35px !important;
  height: 100% !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  text-align: center !important;
  background-color: transparent !important;
  flex: 1 1 auto !important;
  color: var(--text-color, #0f172a) !important;
  -moz-appearance: textfield !important;
}

.aspect-orb-stepper input::-webkit-outer-spin-button,
.aspect-orb-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* ── Compact Borderless Aspect Stepper (No-Scroll Fit) ── */
.aspect-planets-table.compact-table th,
.aspect-planets-table.compact-table td {
  padding: 5px 4px !important;
  font-size: 12px !important;
}

.aspect-orb-stepper-compact {
  width: 66px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border: 1px solid var(--border-color, #cbd5e1) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background-color: var(--bg-card, #ffffff) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.aspect-orb-stepper-compact a {
  width: 20px !important;
  height: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease !important;
}

.aspect-orb-stepper-compact a.stepper-sub:hover {
  background-color: rgba(239, 68, 68, 0.12) !important;
}

.aspect-orb-stepper-compact a.stepper-add:hover {
  background-color: rgba(34, 197, 94, 0.12) !important;
}

.aspect-orb-stepper-compact input {
  width: 26px !important;
  height: 100% !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  text-align: center !important;
  background-color: transparent !important;
  flex: 1 1 auto !important;
  color: var(--text-color, #0f172a) !important;
  -moz-appearance: textfield !important;
}

.aspect-orb-stepper-compact input::-webkit-outer-spin-button,
.aspect-orb-stepper-compact input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.canvas-container canvas,
.canvas-container img,
.lalkitab-img {
  width: 100%;
  height: 100%;
  max-width: 80%;
  max-height: 100%;
  object-fit: fill;
  aspect-ratio: unset !important;
  border-radius: var(--radius-sm, 4px) !important;
  border: 1px solid var(--border-neutral, #e2e8f0);
}

.lalkitab-buttons {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.65vw, 25px);
  padding: 2px 0;
}

.lalkitab-buttons .btn {
  flex: 1 1 0;
  width: 100%;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.2px;
  border-radius: var(--radius-sm, 4px) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}

.lalkit.av-left-footer .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(219, 68, 84, 0.45) !important;
}

/* Added Objects & Zones Card Enhancements */
.av-object-card {
  transition: all 0.2s ease;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background-color: var(--bs-body-bg, #ffffff);
}

.av-object-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-1px);
  border-color: oklch(from var(--bg-highlight) l c h / 0.5) !important;
}

.lalkitab-buttons .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  filter: brightness(1.08);
}

.lalkitab-buttons .btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.lalkitab-buttons .btn i {
  font-size: 11px !important;
  opacity: 0.75;
  margin-left: 6px;
  transition: transform 0.2s ease;
}

.lalkitab-buttons .btn:hover i {
  opacity: 1;
  transform: scale(1.1);
}

@media (min-width: 1200px) {
  .lalkitab-buttons {
    gap: 10px;
  }
  .lalkitab-buttons .btn {
    padding: 8px 14px !important;
    font-size: 12px !important;
    min-height: 32px;
  }
  .lalkitab-buttons .btn i {
    font-size: 12px !important;
  }
}

@media (min-width: 1400px) {
  .lalkitab-buttons {
    gap: 12px;
  }
  .lalkitab-buttons .btn {
    padding: 10px 16px !important;
    font-size: 13px !important;
    min-height: 36px;
  }
  .lalkitab-buttons .btn i {
    font-size: 13px !important;
  }
}

.kundli-card .btn-xxs,
.lalkitab-row-4 .btn-xxs {
  padding: 1px 4px !important;
  font-size: 8px !important;
  line-height: 1 !important;
  min-width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 3px !important;
}

.kundli-card .btn-xxs i,
.lalkitab-row-4 .btn-xxs i {
  font-size: 8px !important;
}

@media (max-width: 991.98px) {
  .lalkitab-buttons {
    flex: 0 0 220px;
    min-width: 220px;
    gap: 8px;
  }

  .lalkitab-buttons .btn {
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
}

#menu-lalkitab-planets,
#menu-lalkitab-predictions,
#menu-varshphal-predictions,
#menu-lalkitab-rin,
#menu-chart-selector,
#menu-quick-varshphal-predictions,
#menu-red-diary,
#menu-lalkitab-data {
  max-width: 80% !important;
  width: 80% !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
}

#menu-lalkitab-predictions,
#menu-lalkitab-planets,
#menu-varshphal-predictions,
#menu-quick-varshphal-predictions,
#menu-lalkitab-rin,
#menu-chart-selector,
#menu-lalkitab-data,
#menu-red-diary,
#menu-lalkitab-data .card-body {
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 rgba(0, 0, 0, 0.04);
}

#menu-lalkitab-predictions::-webkit-scrollbar,
#menu-lalkitab-planets::-webkit-scrollbar,
#menu-varshphal-predictions::-webkit-scrollbar,
#menu-lalkitab-rin::-webkit-scrollbar,
#menu-chart-selector::-webkit-scrollbar,
#menu-lalkitab-data::-webkit-scrollbar,
#menu-quick-varshphal-predictions::-webkit-scrollbar,
#menu-red-diary::-webkit-scrollbar,
#menu-lalkitab-data .card-body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#menu-lalkitab-predictions::-webkit-scrollbar-track,
#menu-varshphal-predictions::-webkit-scrollbar-track,
#menu-lalkitab-planets::-webkit-scrollbar-track,
#menu-lalkitab-data::-webkit-scrollbar-track,
#menu-quick-varshphal-predictions::-webkit-scrollbar-track,
#menu-lalkitab-rin::-webkit-scrollbar-track,
#menu-chart-selector::-webkit-scrollbar-track,
#menu-red-diary::-webkit-scrollbar-track,
#menu-lalkitab-data .card-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}

#menu-lalkitab-predictions::-webkit-scrollbar-thumb,
#menu-lalkitab-planets::-webkit-scrollbar-thumb,
#menu-varshphal-predictions::-webkit-scrollbar-thumb,
#menu-lalkitab-data::-webkit-scrollbar-thumb,
#menu-lalkitab-rin::-webkit-scrollbar-thumb,
#menu-chart-selector::-webkit-scrollbar-thumb,
#menu-quick-varshphal-predictions::-webkit-scrollbar-thumb,
#menu-red-diary::-webkit-scrollbar-thumb,
#menu-lalkitab-data .card-body::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 4px;
}

#menu-lalkitab-predictions::-webkit-scrollbar-thumb:hover,
#menu-lalkitab-planets::-webkit-scrollbar-thumb:hover,
#menu-lalkitab-data::-webkit-scrollbar-thumb:hover,
#menu-varshphal-predictions::-webkit-scrollbar-thumb:hover,
#menu-quick-varshphal-predictions::-webkit-scrollbar-thumb:hover,
#menu-lalkitab-rin::-webkit-scrollbar-thumb:hover,
#menu-chart-selector::-webkit-scrollbar-thumb:hover,
#menu-red-diary::-webkit-scrollbar-thumb:hover,
#menu-lalkitab-data .card-body::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* ── Menu Popups Layout (Total Width minus Sidebar Width) ── */
.menu {
  z-index: 999999 !important;
}

.menu-box-bottom {
  left: var(--sidebar-collapsed-w) !important;
  width: calc(100% - var(--sidebar-collapsed-w)) !important;
  right: 0 !important;
}

.menu-box-bottom.menu-box-detached {
  left: calc(var(--sidebar-collapsed-w) + 10px) !important;
  width: calc(100% - var(--sidebar-collapsed-w) - 20px) !important;
  right: 10px !important;
}

.menu-box-modal {
  left: calc(50% + (var(--sidebar-collapsed-w) / 2)) !important;
}

.menu-hider {
  left: var(--sidebar-collapsed-w) !important;
  width: calc(100% - var(--sidebar-collapsed-w)) !important;
}

body.sidebar-pinned .menu-box-bottom {
  left: var(--sidebar-expanded-w) !important;
  width: calc(100% - var(--sidebar-expanded-w)) !important;
}

body.sidebar-pinned .menu-box-bottom.menu-box-detached {
  left: calc(var(--sidebar-expanded-w) + 10px) !important;
  width: calc(100% - var(--sidebar-expanded-w) - 20px) !important;
}

body.sidebar-pinned .menu-box-modal {
  left: calc(50% + (var(--sidebar-expanded-w) / 2)) !important;
}

body.sidebar-pinned .menu-hider {
  left: var(--sidebar-expanded-w) !important;
  width: calc(100% - var(--sidebar-expanded-w)) !important;
}

/* Pages without sidebar */
body.no-sidebar .menu-box-bottom,
body:has(.auth-page-wrapper) .menu-box-bottom {
  left: 0 !important;
  width: 100% !important;
}

body.no-sidebar .menu-box-bottom.menu-box-detached,
body:has(.auth-page-wrapper) .menu-box-bottom.menu-box-detached {
  left: 10px !important;
  width: calc(100% - 20px) !important;
}

body.no-sidebar .menu-box-modal,
body:has(.auth-page-wrapper) .menu-box-modal {
  left: 50% !important;
}

body.no-sidebar .menu-hider,
body:has(.auth-page-wrapper) .menu-hider {
  left: 0 !important;
  width: 100% !important;
}

/* ==========================================================================
   7. PANCHANG PAGE 
   ========================================================================== */

#panchang-page {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.panchang-main-container {
  display: flex !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: calc(100vh - 60px) !important;
  max-height: calc(100vh - 60px) !important;
  overflow: hidden !important;
  gap: 8px !important;
  padding: 8px 8px 8px 8px !important;
  margin: 0 !important;
}

.panchang-left-col {
  flex: 0 0 clamp(280px, 26vw, 380px);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 14px);
  overflow: hidden;
}

.panchang-right-col {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 14px);
  overflow: hidden;
}

.pnc-card {
  background: var(--bg-neutral-card, #ffffff);
  border: 1px solid var(--border-neutral, #e2e8f0);
  border-radius: clamp(4px, 0.6vw, 8px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  margin-bottom: 0;
}

/* ── 7.3 Controls Header (shared) ── */
.pnc-controls-header {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.8vw, 10px);
  padding: clamp(6px, 1vh, 10px) clamp(10px, 1.2vw, 16px);
  font-size: clamp(14px, 1.4vw, 17.5px);
  font-weight: 700;
  color: #ffffff;
  background: var(--bg-highlight, #db4454);
  border-bottom: 1px solid var(--border-neutral, #e2e8f0);
  flex-shrink: 0;
}

.pnc-controls-header i {
  color: #ffffff !important;
  font-size: clamp(14px, 1.4vw, 17.5px);
}

/* ── 7.4 Left Column — Controls ── */
.pnc-controls-card {
  flex-shrink: 0;
}

.pnc-controls-body {
  display: flex;
  gap: clamp(6px, 0.8vw, 12px);
  padding: clamp(6px, 1vh, 10px) clamp(8px, 1vw, 14px);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.pnc-controls-body .input-style {
  flex: 1 1 clamp(140px, 12vw, 200px);
  margin-bottom: 0 !important;
}

.pnc-controls-body .input-style.has-borders input,
.pnc-controls-body .input-style.has-borders select {
  height: clamp(34px, 4.2vh, 40px) !important;
  line-height: clamp(34px, 4.2vh, 40px) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: clamp(12px, 1.15vw, 14.5px) !important;
  border-radius: 6px !important;
}

.pnc-controls-body .input-style.has-borders.input-style-always-active label {
  top: -9px !important;
  height: 16px !important;
  line-height: 16px !important;
  font-size: clamp(10px, 0.95vw, 12px) !important;
  padding: 0 4px !important;
  background-color: var(--bg-card, #ffffff) !important;
}

.pnc-controls-body .input-style.has-icon.has-borders i:first-child {
  top: 50% !important;
  margin-top: -6px !important;
  font-size: clamp(11.5px, 1.1vw, 14px) !important;
}

.pnc-control-item {
  flex: 1 1 120px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pnc-label {
  font-size: clamp(10.5px, 1vw, 12.5px);
  font-weight: 600;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pnc-label i {
  color: var(--bg-highlight, #db4454) !important;
  font-size: clamp(10px, 0.95vw, 12px);
}

.pnc-input {
  height: clamp(32px, 4vh, 36px);
  padding: 0 10px;
  border: 1px solid var(--border-neutral, #e2e8f0);
  border-radius: 6px;
  font-size: clamp(12px, 1.15vw, 14.5px);
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  color: var(--text-primary, #0f172a);
  background: var(--bg-neutral-base, #f8fafc);
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
}

.pnc-input:focus {
  border-color: var(--bg-highlight, #db4454);
  box-shadow: 0 0 0 2px oklch(from var(--bg-highlight, #db4454) l c h / 0.12);
}

select.pnc-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2364748b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 26px;
}

.pnc-details-card,
.pnc-calendar-card {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pnc-details-scroll,
.pnc-calendar-scroll {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-highlight, #db4454) rgba(0, 0, 0, 0.05);
}

.pnc-details-scroll::-webkit-scrollbar,
.pnc-calendar-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.pnc-details-scroll::-webkit-scrollbar-track,
.pnc-calendar-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}

.pnc-details-scroll::-webkit-scrollbar-thumb,
.pnc-calendar-scroll::-webkit-scrollbar-thumb {
  background: var(--bg-highlight, #db4454);
  border-radius: 4px;
}

.pnc-details-scroll::-webkit-scrollbar-thumb:hover,
.pnc-calendar-scroll::-webkit-scrollbar-thumb:hover {
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.85);
}

.pnc-details-table {
  width: 100%;
  border-collapse: collapse;
}

.pnc-details-table th,
.pnc-details-table td {
  padding: clamp(5px, 1vh, 10px) clamp(8px, 1vw, 14px) !important;
  font-size: clamp(12px, 1.25vw, 15.5px) !important;
  line-height: clamp(22px, 2.8vh, 32px) !important;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.pnc-details-table th {
  font-weight: 600;
  color: var(--text-secondary, #475569);
  white-space: nowrap;
  width: 44%;
  font-size: clamp(12px, 1.25vw, 15.5px) !important;
  line-height: clamp(22px, 2.8vh, 32px) !important;
}

.pnc-details-table th i {
  color: var(--bg-highlight, #db4454) !important;
  font-size: clamp(11.5px, 1.15vw, 14px) !important;
  line-height: clamp(22px, 2.8vh, 32px) !important;
  margin-right: 6px;
  width: 14px;
  text-align: center;
}

.pnc-details-table td {
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  font-size: clamp(12px, 1.25vw, 15.5px) !important;
  line-height: clamp(22px, 2.8vh, 32px) !important;
}

.pnc-details-table tr:last-child th,
.pnc-details-table tr:last-child td {
  border-bottom: none;
}

.pnc-row-accent th,
.pnc-row-accent td {
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.03);
}

/* ── 7.6 Muhurat Section ── */
.pnc-muhurat-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 2px solid var(--border-neutral, #e2e8f0);
}

.pnc-muhurat-block {
  border-bottom: 1px solid var(--border-neutral, #e2e8f0);
}

.pnc-muhurat-block:last-child {
  border-bottom: none;
}

.pnc-muhurat-head {
  padding: clamp(4px, 0.7vh, 7px) clamp(8px, 1vw, 12px);
  font-size: clamp(11.5px, 1.1vw, 13.5px);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pnc-muhurat-block.good .pnc-muhurat-head {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #065f46;
}

.pnc-muhurat-block.good .pnc-muhurat-head i {
  color: #10b981 !important;
}

.pnc-muhurat-block.bad .pnc-muhurat-head {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #991b1b;
}

.pnc-muhurat-block.bad .pnc-muhurat-head i {
  color: #ef4444 !important;
}

.pnc-muhurat-tbl {
  width: 100%;
  border-collapse: collapse;
}

.pnc-muhurat-tbl td {
  padding: clamp(4px, 0.7vh, 7px) clamp(8px, 1vw, 12px);
  font-size: clamp(11px, 1.05vw, 13px);
  border-bottom: 1px solid #f1f5f9;
  color: var(--text-secondary, #475569);
}

.pnc-muhurat-tbl td:first-child {
  font-weight: 600;
  color: var(--text-primary, #0f172a);
}

.pnc-muhurat-tbl td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pnc-muhurat-tbl tr:last-child td {
  border-bottom: none;
}

/* ── 7.7 Right Column — Month Navigation ── */
.pnc-month-controls-card {
  flex-shrink: 0;
}

.pnc-month-controls-card .pnc-controls-body {
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.8vw, 10px);
}

.pnc-month-input-wrap {
  flex: 0 0 clamp(115px, 10vw, 150px) !important;
  max-width: clamp(115px, 10vw, 150px) !important;
  margin-bottom: 0 !important;
}

.pnc-year-input-wrap {
  flex: 0 0 clamp(85px, 7vw, 110px) !important;
  max-width: clamp(85px, 7vw, 110px) !important;
  margin-bottom: 0 !important;
}

.pnc-month-arrow {
  width: clamp(34px, 4.2vh, 40px);
  height: clamp(34px, 4.2vh, 40px);
  border-radius: 6px;
  border: 1px solid var(--border-neutral, #e2e8f0);
  background: var(--bg-neutral-base, #f8fafc);
  color: var(--text-secondary, #475569);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: clamp(12px, 1.1vw, 14px);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.pnc-month-arrow:hover {
  background: var(--bg-highlight, #db4454);
  border-color: var(--bg-highlight, #db4454);
  color: #ffffff;
}

.pnc-month-sel,
.pnc-year-sel {
  height: clamp(28px, 3.8vh, 32px);
  padding: 0 clamp(18px, 1.6vw, 24px) 0 clamp(8px, 0.8vw, 12px);
  border: 1px solid var(--border-neutral, #e2e8f0);
  border-radius: 6px;
  font-size: clamp(12px, 1.15vw, 14.5px);
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  color: var(--text-primary, #0f172a);
  background: var(--bg-neutral-card, #ffffff);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2364748b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color 0.2s ease;
}

.pnc-month-sel:focus,
.pnc-year-sel:focus {
  border-color: var(--bg-highlight, #db4454);
}

.pnc-month-sel {
  min-width: 100px;
}

.pnc-year-sel {
  min-width: 65px;
}

.pnc-calendar-table {
  width: 100%;
  height: 80%;
  border-collapse: collapse;
  table-layout: fixed;
}

.pnc-calendar-table thead th {
  padding: clamp(3px, 0.6vh, 6px) clamp(2px, 0.4vw, 6px);
  font-size: clamp(11.5px, 1.1vw, 14px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
  background: var(--bg-highlight, #db4454);
  text-align: center;
  border: none;
}

.pnc-calendar-table tbody td {
  padding: clamp(3px, 0.6vh, 6px) clamp(2px, 0.4vw, 4px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  vertical-align: top;
  text-align: center;
  font-size: clamp(11.5px, 1.05vw, 13.5px) !important;
  min-height: clamp(42px, 7vh, 60px);
  height: auto;
  transition: background-color 0.15s ease;
  position: relative;
}

.pnc-cal-tithi {
  font-size: clamp(11px, 1.05vw, 13px);
  font-weight: 500;
  color: var(--text-secondary, #475569);
  margin-bottom: 1px;
}

.pnc-cal-date {
  font-size: clamp(16px, 1.6vw, 21px);
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  line-height: 1.15;
}

.pnc-panchak-cell {
  background-color: #fff0f0 !important;
  border-color: #fecaca !important;
}

.pnc-cal-event.panchak {
  margin-top: 2px;
  background: #fee2e2;
  color: #dc2626;
  font-size: clamp(9.5px, 0.9vw, 11.5px);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-block;
}

.pnc-calendar-table tbody td:hover {
  background: rgba(0, 0, 0, 0.015);
}

/* ── Panchak Period Banner Box ── */
.pnc-panchak-box {
  margin: clamp(6px, 1vh, 10px);
  border: 1px solid #fecaca;
  border-radius: 6px;
  overflow: hidden;
  background-color: #fff8f8;
  flex-shrink: 0;
}

.pnc-panchak-head {
  padding: clamp(5px, 0.8vh, 9px) clamp(8px, 1vw, 14px);
  background-color: #fee2e2;
  color: #dc2626;
  font-size: clamp(13px, 1.2vw, 15.5px);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pnc-panchak-head i {
  color: #dc2626 !important;
  font-size: clamp(13px, 1.2vw, 15.5px);
}

.pnc-panchak-content {
  padding: clamp(5px, 0.8vh, 9px) clamp(8px, 1vw, 14px);
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.7vw, 10px);
  flex-wrap: wrap;
}

.pnc-panchak-lbl {
  font-size: clamp(8px, 0.8vw, 10px);
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pnc-panchak-badge {
  background-color: #fee2e2;
  color: #dc2626;
  font-size: clamp(10px, 0.95vw, 12px);
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

/* Empty cells */
.pnc-empty-cell {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(0, 0, 0, 0.012) 4px,
    rgba(0, 0, 0, 0.012) 5px
  ) !important;
}

/* Calendar cell content */
.pnc-cal-date {
  font-size: clamp(12px, 1.6vh, 18px);
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  line-height: 1.2;
  margin-bottom: 2px;
}

.pnc-cal-date.pnc-highlight {
  color: var(--bg-highlight, #db4454);
}

.pnc-cal-date.pnc-today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-highlight, #db4454);
  color: #ffffff;
  font-size: clamp(11px, 1.4vh, 15px);
  box-shadow: 0 2px 8px oklch(from var(--bg-highlight, #db4454) l c h / 0.35);
}

.pnc-cal-tithi {
  font-size: clamp(8px, 1vh, 11px);
  font-weight: 500;
  color: var(--text-muted, #64748b);
  line-height: 1.2;
  margin-bottom: 1px;
}

.pnc-cal-nak {
  font-size: clamp(7.5px, 0.9vh, 10px);
  font-weight: 500;
  color: var(--text-muted, #64748b);
  opacity: 0.7;
  line-height: 1.1;
  margin-bottom: 2px;
}

/* Event badges inside calendar */
.pnc-cal-event {
  display: inline-block;
  font-size: clamp(7px, 0.85vh, 9.5px);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  margin-top: 2px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pnc-cal-event.good {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.pnc-cal-event.warn {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.pnc-cal-event.special {
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.12);
  color: var(--bg-highlight, #db4454);
}

.pnc-cal-event.today {
  background: var(--bg-highlight, #db4454);
  color: #ffffff;
  box-shadow: 0 1px 4px oklch(from var(--bg-highlight, #db4454) l c h / 0.3);
}

/* Special and today cell background */
.pnc-special-cell {
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.03) !important;
}

.pnc-today-cell {
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.06) !important;
}

/* ── 7.9 Panchak Info ── */
.pnc-panchak-info {
  margin: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 72, 72, 0.15);
  background: rgba(255, 72, 72, 0.03);
  overflow: hidden;
}

.pnc-panchak-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(255, 72, 72, 0.07);
  color: #d32f2f;
  font-size: clamp(10px, 1.1vh, 12px);
  border-bottom: 1px solid rgba(255, 72, 72, 0.1);
}

.pnc-panchak-header i {
  font-size: 10px;
  color: #d32f2f !important;
}

.pnc-panchak-body {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  flex-wrap: wrap;
}

.pnc-panchak-label {
  font-size: clamp(9px, 1vh, 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #999;
}

.pnc-panchak-value {
  font-size: clamp(9.5px, 1.1vh, 12px);
  font-weight: 600;
  color: #d32f2f;
  background: rgba(255, 72, 72, 0.07);
  padding: 2px 8px;
  border-radius: 4px;
}

#panchang-page {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

#panchang-page .header-demo {
  margin-bottom: 4px !important;
  flex-shrink: 0 !important;
}

.panchang-left-col {
  flex: 0 0 32% !important;
  max-width: 32% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  overflow: hidden !important;
}

.panchang-right-col {
  flex: 0 0 68% !important;
  max-width: 68% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  overflow: hidden !important;
}

.pnc-details-card {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.pnc-details-scroll {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.pnc-calendar-card {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.pnc-calendar-scroll {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* ==========================================================================
   8. ASTRO VASTU PAGE 
   ========================================================================== */

#astro-vastu-pc-page {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.astro-vastu-main-container {
  flex: 1 1 0;
  width: 100% !important;
  max-width: 100% !important;
  height: calc(100vh - clamp(50px, 7vh, 70px));
  max-height: calc(100vh - clamp(50px, 7vh, 70px));
  display: flex;
  gap: clamp(10px, 1.2vw, 16px);
  padding: clamp(8px, 1.2vh, 14px) clamp(10px, 1.2vw, 16px);
  overflow: hidden;
  box-sizing: border-box;
}

/* Left Column - Exactly 35% Width */
.astro-vastu-left-col {
  flex: 0 0 35% !important;
  max-width: 35% !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 12px);
  overflow: hidden;
}

/* Right Column - Remaining 65% Width */
.astro-vastu-right-col {
  flex: 0 0 65% !important;
  max-width: 65% !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.av-input-card {
  flex-shrink: 0;
}

.av-controls-body {
  padding: clamp(6px, 1vh, 10px) clamp(10px, 1vw, 14px) !important;
}

.av-controls-body .input-style {
  height: clamp(34px, 4vh, 38px) !important;
  min-height: 34px !important;
  margin-bottom: 8px !important;
}

.av-controls-body .input-style input,
.av-controls-body .input-style select,
.av-controls-body .form-control,
.av-controls-body .form-select {
  height: clamp(34px, 4vh, 38px) !important;
  min-height: 34px !important;
  line-height: normal !important;
  padding: 4px 10px !important;
  font-size: clamp(12px, 1vw, 13.5px) !important;
}

.av-controls-body .input-style i {
  line-height: clamp(34px, 4vh, 38px) !important;
  height: clamp(34px, 4vh, 38px) !important;
}

.av-objects-card {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.av-objects-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-highlight, #db4454) rgba(0, 0, 0, 0.05);
}

.av-objects-scroll::-webkit-scrollbar,
.av-report-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.av-objects-scroll::-webkit-scrollbar-track,
.av-report-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}

.av-objects-scroll::-webkit-scrollbar-thumb,
.av-report-scroll::-webkit-scrollbar-thumb {
  background: var(--bg-highlight, #db4454);
  border-radius: 4px;
}

.av-left-footer {
  flex-shrink: 0;
  padding-top: 4px;
}

.av-left-footer .btn {
  height: clamp(38px, 4.5vh, 44px);
  line-height: clamp(38px, 4.5vh, 44px);
  padding: 0 16px;
  font-size: clamp(12px, 1.1vw, 14.5px);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.av-report-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}

.av-report-scroll {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-highlight, #db4454) rgba(0, 0, 0, 0.05);
}

.av-report-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
}

.av-object-item {
  transition: background-color 0.15s ease;
}

.av-object-item:hover {
  background-color: #f8fafc;
}

.av-report-table th,
.av-report-table td {
  padding: clamp(6px, 1vh, 10px) clamp(8px, 1vw, 14px);
  font-size: clamp(11.5px, 1.1vw, 13.5px);
}

.new-category-actions {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
  z-index: 5;
}

.category-btn {
  border: none;
  background: transparent;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.category-btn-save {
  color: #10b981;
}

.category-btn-save:hover {
  background-color: #d1fae5;
}

.category-btn-cancel {
  color: #ef4444;
}

.category-btn-cancel:hover {
  background-color: #fee2e2;
}

/* Vastu Table Improvements */
.av-report-card .table {
  margin-bottom: 0;
}

.av-report-card .table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.av-table-mapped-row {
  background-color: rgba(219, 68, 84, 0.04) !important;
}

.av-table-mapped-row:hover {
  background-color: rgba(219, 68, 84, 0.08) !important;
}

.av-object-badge {
  display: inline-block;
  background: rgba(219, 68, 84, 0.1);
  color: var(--bg-highlight, #db4454);
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
}

.av-zone-badge {
  display: inline-block;
  background: #f1f5f9;
  color: #334155;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.8rem;
  border: 1px solid #e2e8f0;
}

/* ==========================================================================
   9. Matchmaking 
   ========================================================================== */

#matchmaking-page {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mm-main-container {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  gap: 8px;
  padding: 0 8px 8px 8px;
  overflow: hidden;
  width: 100%;
}

.mm-column {
  flex: 0 0 calc(50% - 4px);
  max-width: calc(50% - 4px);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.mm-top-row {
  display: flex;
  gap: 8px;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.mm-top-row > .kundli-card {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mm-bottom-card {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mm-bottom-card .planet-table-container {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mm-bottom-card .kundli-planets-table {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

.mm-bottom-buttons {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 8px 8px 8px;
  width: 100%;
}

.mm-bottom-buttons .btn {
  font-size: clamp(11px, 0.95vw, 12.5px);
  padding: 6px 10px;
  max-width: clamp(200px, 20vw, 100%);
}

.mm-bottom-buttons .btn > i {
  font-size: clamp(11px, 0.95vw, 12.5px);
}

/* ── Compact Numero Match Table ── */
.numero-match-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 0 !important;
}

.numero-match-table th,
.numero-match-table td {
  padding: 5px 12px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  height: auto !important;
  vertical-align: middle !important;
}

.numero-match-table th {
  font-weight: 600 !important;
  color: var(--text-color, #334155) !important;
  text-align: left !important;
  width: 58% !important;
}

.numero-match-table td {
  font-weight: 700 !important;
  font-size: 12.5px !important;
  color: var(--text-color, #0f172a) !important;
  text-align: center !important;
  background-color: #ffffff !important;
}

.theme-dark .numero-match-table th {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #94a3b8 !important;
}

.theme-dark .numero-match-table td {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

/* ── Custom Visible Scrollbar for Modals ── */
#menu-loshu-numero-match,
#menu-vedic-numero-match {
  max-height: 85vh !important;
}

#menu-loshu-numero-match .overflow-y-auto,
#menu-vedic-numero-match .overflow-y-auto,
.modal-scroll-body,
.overflow-y-auto {
  overflow-y: scroll !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--bg-highlight, #db4454)
    oklch(from var(--bg-highlight, #db4454) l c h / 0.15) !important;
}

#menu-loshu-numero-match .overflow-y-auto::-webkit-scrollbar,
#menu-vedic-numero-match .overflow-y-auto::-webkit-scrollbar,
.modal-scroll-body::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar {
  width: 8px !important;
  display: block !important;
}

#menu-loshu-numero-match .overflow-y-auto::-webkit-scrollbar-track,
#menu-vedic-numero-match .overflow-y-auto::-webkit-scrollbar-track,
.modal-scroll-body::-webkit-scrollbar-track,
.overflow-y-auto::-webkit-scrollbar-track {
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.15) !important;
  background-color: rgba(219, 68, 84, 0.12) !important;
  border-radius: 4px !important;
}

#menu-loshu-numero-match .overflow-y-auto::-webkit-scrollbar-thumb,
#menu-vedic-numero-match .overflow-y-auto::-webkit-scrollbar-thumb,
.modal-scroll-body::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb {
  background: var(--bg-highlight, #db4454) !important;
  border-radius: 4px !important;
  border: 1px solid oklch(from var(--bg-highlight, #db4454) l c h / 0.2) !important;
}

#menu-loshu-numero-match .overflow-y-auto::-webkit-scrollbar-thumb:hover,
#menu-vedic-numero-match .overflow-y-auto::-webkit-scrollbar-thumb:hover,
.modal-scroll-body::-webkit-scrollbar-thumb:hover,
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.85) !important;
}

/* ── Name Numerology Styling ── */
.name-numero-container {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(12px, 2vh, 20px) !important;
  height: calc(100vh - clamp(50px, 8vh, 80px)) !important;
  padding: var(--numero-dash-pad-y) var(--numero-dash-pad-x) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}

.name-numero-header-card {
  background: var(--bg-highlight, #1e88e5);
  color: #ffffff;
  border-radius: var(--numero-card-radius-lg);
  padding: clamp(10px, 1.6vh, 18px) clamp(16px, 1.8vw, 24px);
  box-shadow: 0 8px 24px rgba(30, 136, 229, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.name-numero-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: clamp(12px, 1.6vw, 20px) !important;
  width: 100% !important;
}

@media (max-width: 1200px) {
  .name-numero-cards-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 991.98px) {
  .name-numero-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 575.98px) {
  .name-numero-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

.name-numero-card {
  border-radius: var(--numero-card-radius-md) !important;
  padding: clamp(14px, 2vh, 22px) clamp(14px, 1.5vw, 20px) !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  text-align: center !important;
  text-decoration: none !important;
  min-height: clamp(140px, 20vh, 190px) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.name-numero-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2) !important;
  filter: brightness(1.05) !important;
}

.name-numero-card .badge-lucky {
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  backdrop-filter: blur(4px);
}

.name-numero-val {
  font-size: clamp(2rem, 3.8vh, 3.2rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  margin-bottom: 6px !important;
}

.name-numero-title {
  font-size: clamp(14px, 2vh, 18px) !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  line-height: 1.25 !important;
}

.name-numero-desc {
  font-size: clamp(11px, 1.5vh, 13.5px) !important;
  font-weight: 400 !important;
  opacity: 0.9 !important;
  line-height: 1.35 !important;
}

/* ── Yantra Prediction Card Styling ── */
.yantra-prediction-card {
  border-radius: var(--numero-card-radius-lg, 16px) !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  margin-top: clamp(12px, 2vh, 20px) !important;
}

.theme-dark .yantra-prediction-card {
  border: none !important;
  box-shadow: none !important;
}

.yantra-prediction-header {
  background: var(
    --bg-highlight,
    linear-gradient(135deg, #1e88e5, #1565c0)
  ) !important;
  color: #ffffff !important;
  padding: clamp(10px, 1.6vh, 16px) clamp(16px, 1.8vw, 24px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.yantra-prediction-title {
  color: #ffffff !important;
  font-size: clamp(15px, 2vh, 18px) !important;
  font-weight: 700 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.yantra-year-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.yantra-year-label {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.yantra-year-select {
  width: auto !important;
  min-width: 105px !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 5px 28px 5px 12px !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 9px center !important;
  background-size: 13px !important;
}

.yantra-prediction-body {
  padding: clamp(14px, 2vh, 20px) !important;
  max-height: clamp(280px, 45vh, 400px) !important;
  overflow-y: auto !important;
}

.prediction-item-box {
  background: rgba(0, 0, 0, 0.02);
  border: none !important;
  box-shadow: none !important;
  border-radius: 10px;
  padding: clamp(12px, 1.8vh, 16px) clamp(14px, 1.5vw, 18px);
  margin-bottom: 14px;
}

.theme-dark .prediction-item-box {
  background: rgba(255, 255, 255, 0.04);
  border: none !important;
  box-shadow: none !important;
}

.prediction-item-box:hover {
  transform: none;
  box-shadow: none !important;
}

.prediction-item-box:last-child {
  margin-bottom: 0;
}

.prediction-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.prediction-number-badge {
  background: var(--bg-highlight, #1e88e5);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.prediction-keyword-tag {
  color: var(--bg-highlight, #db4454);
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}

.prediction-text {
  font-size: clamp(12.5px, 1.6vh, 14px);
  line-height: 1.65;
  opacity: 0.92;
  margin-bottom: 8px;
}

.prediction-text:last-child {
  margin-bottom: 0;
}

/* ── Loshu Professional Report Styling ── */
.loshu-prof-container {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(12px, 2vh, 20px) !important;
  height: calc(100vh - clamp(50px, 8vh, 80px)) !important;
  padding: var(--numero-dash-pad-y) var(--numero-dash-pad-x) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}

.loshu-prof-header-strip {
  background: var(--bg-theme, #ffffff);
  color: var(--color-theme, #1e293b);
  border-radius: var(--numero-card-radius-md, 12px);
  padding: clamp(10px, 1.6vh, 16px) clamp(14px, 1.6vw, 22px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.loshu-prof-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: clamp(12px, 1.6vw, 20px) !important;
  width: 100% !important;
}

@media (max-width: 1200px) {
  .loshu-prof-cards-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 991.98px) {
  .loshu-prof-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 575.98px) {
  .loshu-prof-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

.loshu-prof-card {
  background: var(--bg-theme, #ffffff);
  border-radius: var(--numero-card-radius-md, 12px) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease !important;
  min-height: clamp(170px, 22vh, 210px) !important;
}

.theme-dark .loshu-prof-card {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.loshu-prof-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.loshu-prof-card-banner {
  padding: 8px 12px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  color: #ffffff;
  border-radius: 8px 8px 0 0;
}

.loshu-prof-card-banner.banner-red {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.loshu-prof-card-banner.banner-green {
  background: linear-gradient(135deg, #10b981, #059669);
}

.loshu-prof-card-body {
  padding: 16px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loshu-prof-number {
  font-size: clamp(2.2rem, 4.2vh, 3.2rem) !important;
  font-weight: 800 !important;
  color: var(--color-theme, #1e293b) !important;
  line-height: 1.1 !important;
  margin-bottom: 6px !important;
}

.loshu-prof-luck {
  font-size: 13px !important;
  font-weight: 600 !important;
  opacity: 0.7 !important;
  color: var(--color-theme, #1e293b) !important;
}

/* 3x3 Grid inside Professional Report */
.loshu-prof-grid-card {
  padding: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.loshu-prof-table {
  width: 100% !important;
  height: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
}

.loshu-prof-table td {
  border: 1px solid rgba(0, 0, 0, 0.12);
  text-align: center;
  vertical-align: middle;
  padding: 6px 4px;
  height: 33.33%;
  width: 33.33%;
  font-weight: 700;
  font-size: 15px;
  color: var(--color-theme, #1e293b);
}

.theme-dark .loshu-prof-table td {
  border-color: rgba(255, 255, 255, 0.12);
}

.loshu-prof-sub {
  display: block;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.75;
  margin-top: 1px;
}

/* ── Compact Height for Header Strip input-style controls ── */
.loshu-prof-header-strip .input-style,
.yantra-prediction-header .input-style,
.header-details-strip .input-style,
.personel-year-card-header .input-style,
.lost-found-header .input-style,
.vedic-prof-header-strip .input-style,
.input-style.input-compact-sm {
  margin-bottom: 0 !important;
  min-height: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  border-radius: 8px !important;
  background-color: var(--bg-theme, #ffffff) !important;
}

.theme-dark .loshu-prof-header-strip .input-style,
.theme-dark .yantra-prediction-header .input-style,
.theme-dark .header-details-strip .input-style,
.theme-dark .personel-year-card-header .input-style,
.theme-dark .lost-found-header .input-style,
.theme-dark .vedic-prof-header-strip .input-style,
.theme-dark .input-style.input-compact-sm {
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.loshu-prof-header-strip .input-style select,
.loshu-prof-header-strip .input-style input,
.yantra-prediction-header .input-style select,
.yantra-prediction-header .input-style input,
.header-details-strip .input-style select,
.header-details-strip .input-style input,
.personel-year-card-header .input-style select,
.personel-year-card-header .input-style input,
.lost-found-header .input-style select,
.lost-found-header .input-style input,
.vedic-prof-header-strip .input-style select,
.vedic-prof-header-strip .input-style input,
.input-style.input-compact-sm select,
.input-style.input-compact-sm input {
  height: 40px !important;
  min-height: 40px !important;
  line-height: 36px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  padding-left: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
  background-color: transparent !important;
  color: var(--color-theme, #1e293b) !important;
  border: none !important;
}

.loshu-prof-header-strip .input-style label,
.yantra-prediction-header .input-style label,
.header-details-strip .input-style label,
.personel-year-card-header .input-style label,
.lost-found-header .input-style label,
.vedic-prof-header-strip .input-style label,
.input-style.input-compact-sm label {
  top: -9px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 12px !important;
  background-color: var(--bg-theme, #ffffff) !important;
  color: var(--color-highlight, #1e88e5) !important;
  padding: 0 5px !important;
  z-index: 5 !important;
}

.loshu-prof-header-strip .input-style span,
.yantra-prediction-header .input-style span,
.header-details-strip .input-style span,
.personel-year-card-header .input-style span,
.lost-found-header .input-style span,
.vedic-prof-header-strip .input-style span,
.input-style.input-compact-sm span {
  height: 40px !important;
  line-height: 40px !important;
}

.loshu-prof-header-strip .input-style span i,
.yantra-prediction-header .input-style span i,
.header-details-strip .input-style span i,
.personel-year-card-header .input-style span i,
.lost-found-header .input-style span i,
.vedic-prof-header-strip .input-style span i,
.input-style.input-compact-sm span i {
  line-height: 40px !important;
  font-size: 11px !important;
}

.lost-found-header .btn-answer {
  height: 36px !important;
  line-height: 36px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  color: var(--color-highlight, #1e88e5) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
  border: none !important;
}

.lost-found-header .btn-answer:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}

/* ── Personal Year Dashboard Styling ── */
.personel-year-container {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(12px, 2vh, 20px) !important;
  height: calc(100vh - clamp(50px, 8vh, 80px)) !important;
  padding: var(--numero-dash-pad-y) var(--numero-dash-pad-x) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}

.personel-year-grid {
  display: grid !important;
  grid-template-columns: 360px 1fr !important;
  gap: clamp(14px, 1.8vw, 22px) !important;
  width: 100% !important;
}

@media (max-width: 991.98px) {
  .personel-year-grid {
    grid-template-columns: 1fr !important;
  }
}

.personel-year-card {
  background: var(--bg-theme, #ffffff);
  border-radius: var(--numero-card-radius-lg, 16px) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
}

.personel-year-card-header {
  background: var(
    --bg-highlight,
    linear-gradient(135deg, #1e88e5, #1565c0)
  ) !important;
  color: #ffffff !important;
  padding: clamp(10px, 1.6vh, 14px) clamp(14px, 1.6vw, 20px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.personel-year-card-body {
  padding: clamp(16px, 2vh, 22px) !important;
  flex-grow: 1 !important;
}

.personel-year-num-box {
  background: linear-gradient(
    145deg,
    rgba(30, 136, 229, 0.05),
    rgba(30, 136, 229, 0.01)
  );
  border: 1px solid rgba(30, 136, 229, 0.15);
  border-radius: 16px;
  padding: clamp(22px, 3.2vh, 32px) 16px;
  text-align: center;
  margin: 16px 0;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
}

.bg-light-soft {
  background: rgba(0, 0, 0, 0.02) !important;
}

.py-stat-card {
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.theme-dark .py-stat-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.py-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.py-keyword-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  cursor: default;
}

.py-keyword-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.py-progress-bar {
  height: 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.theme-dark .py-progress-bar {
  background: rgba(255, 255, 255, 0.15);
}

.py-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}

/* ── Numero Vastu Styling ── */
.numero-vastu-container {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(12px, 2vh, 20px) !important;
  height: calc(100vh - clamp(50px, 8vh, 80px)) !important;
  padding: var(--numero-dash-pad-y) var(--numero-dash-pad-x) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}

.numero-vastu-grid {
  display: grid !important;
  grid-template-columns: 360px 1fr !important;
  gap: clamp(14px, 1.8vw, 22px) !important;
  width: 100% !important;
}

@media (max-width: 991.98px) {
  .numero-vastu-grid {
    grid-template-columns: 1fr !important;
  }
}

.numero-vastu-card {
  background: var(--bg-theme, #ffffff);
  border-radius: var(--numero-card-radius-lg, 16px) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
}

.theme-dark .numero-vastu-card {
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

.numero-vastu-card-header {
  background: var(
    --bg-highlight,
    linear-gradient(135deg, #1e88e5, #1565c0)
  ) !important;
  color: #ffffff !important;
  padding: clamp(10px, 1.6vh, 14px) clamp(14px, 1.6vw, 20px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.numero-vastu-card-body {
  padding: clamp(16px, 2vh, 22px) !important;
  flex-grow: 1 !important;
}

.vastu-direction-card {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.theme-dark .vastu-direction-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.vastu-direction-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

/* ── Miscellaneous Calculations Styling ── */
.misc-calc-container {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(12px, 2vh, 20px) !important;
  height: calc(100vh - clamp(50px, 8vh, 80px)) !important;
  padding: var(--numero-dash-pad-y) var(--numero-dash-pad-x) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}

.misc-calc-grid {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: clamp(14px, 1.8vw, 22px) !important;
  width: 100% !important;
}

@media (max-width: 991.98px) {
  .misc-calc-grid {
    grid-template-columns: 1fr !important;
  }
}

.misc-calc-card {
  background: var(--bg-theme, #ffffff);
  border-radius: var(--numero-card-radius-lg, 16px) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
}

.theme-dark .misc-calc-card {
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

.misc-calc-card-header {
  background: var(
    --bg-highlight,
    linear-gradient(135deg, #1e88e5, #1565c0)
  ) !important;
  color: #ffffff !important;
  padding: clamp(10px, 1.6vh, 14px) clamp(14px, 1.6vw, 20px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.misc-calc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(12px, 1.5vw, 20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  gap: 16px;
}

.theme-dark .misc-calc-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.misc-calc-row:last-child {
  border-bottom: none;
}

.misc-calc-label {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--color-theme);
  min-width: 170px;
  text-align: right;
}

@media (max-width: 575.98px) {
  .misc-calc-row {
    flex-direction: column;
    align-items: stretch;
  }
  .misc-calc-label {
    text-align: left;
    min-width: auto;
  }
}

/* ── Vedic Professional Report Styling ── */
.vedic-prof-header-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  width: 100% !important;
}

.vedic-prof-container {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(12px, 2vh, 20px) !important;
  padding: var(--numero-dash-pad-y) var(--numero-dash-pad-x) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}

.vedic-grids-layout {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: clamp(14px, 1.5vw, 20px) !important;
  width: 100% !important;
}

@media (max-width: 1200px) {
  .vedic-grids-layout {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 991.98px) {
  .vedic-grids-layout {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 575.98px) {
  .vedic-grids-layout {
    grid-template-columns: 1fr !important;
  }
}

.vedic-grid-card {
  background: var(--bg-theme, #ffffff);
  border-radius: 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

.theme-dark .vedic-grid-card {
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

.vedic-grid-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

.vedic-grid-header {
  background: var(
    --bg-highlight,
    linear-gradient(135deg, #1e88e5, #1565c0)
  ) !important;
  color: #ffffff !important;
  padding: 10px 14px !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
}

.vedic-grid-header.bg-basic {
  background: #212529 !important;
}

.dasha-num-circle,
.mahadasha,
.antardasha,
.pratantardasha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  margin-left: 2px;
}

.dasha-mahadasha,
.mahadasha {
  border: 1.5px solid #dc3545 !important;
  color: #dc3545 !important;
}

.dasha-antrdasha,
.antardasha {
  border: 1.5px solid #0d6efd !important;
  color: #0d6efd !important;
}

.dasha-pratyantardasha,
.pratantardasha {
  border: 1.5px solid #ffc107 !important;
  color: #d97706 !important;
}

.dasha-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.dasha-dot.mahadasha {
  background: #dc3545 !important;
  border: none !important;
}

.dasha-dot.antardasha {
  background: #0d6efd !important;
  border: none !important;
}

.dasha-dot.pratantardasha {
  background: #ffc107 !important;
  border: none !important;
}

.legend-square {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}


.panchank-table #monthly-table-body,
#monthly-table-body {
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: "Poppins", sans-serif;
}

.panchank-table #monthly-table-body thead th,
#monthly-table-body thead th {
  background: transparent !important;
  color: #fff !important;
  font-size: clamp(0.5rem, 1.1vw, 0.7rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: clamp(5px, 0.8vw, 8px) clamp(0px, 0.3vw, 2px) !important;
  border: none !important;
  text-align: center !important;
}

.panchank-table #monthly-table-body tbody td,
#monthly-table-body tbody td {
  height: clamp(48px, 4.5vw, 100px) !important;
  min-height: clamp(48px, 6.5vw, 100px) !important;
  padding: clamp(3px, 0.5vw, 6px) clamp(2px, 0.4vw, 5px) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background-color: transparent !important;
  vertical-align: top !important;
  text-align: center !important;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.panchank-table #monthly-table-body tbody td:hover,
#monthly-table-body tbody td:hover {
  background-color: rgba(74, 137, 220, 0.04) !important;
}

.panchank-table #monthly-table-body tbody td .small.text-muted,
#monthly-table-body tbody td .small.text-muted {
  font-size: clamp(0.42rem, 0.85vw, 0.68rem) !important;
  line-height: 1.15 !important;
  font-weight: 500 !important;
  opacity: 0.72 !important;
  margin-bottom: 1px !important;
  letter-spacing: 0.01em !important;
  color: inherit !important;
}

.panchank-table #monthly-table-body tbody td .fw-bold,
.panchank-table #monthly-table-body tbody td .fs-4,
#monthly-table-body tbody td .fw-bold {
  font-size: clamp(0.75rem, 1.4vw, 1.15rem) !important;
  font-weight: 700 !important;
  margin-top: 1px !important;
  line-height: 1.2 !important;
}

.panchank-table #monthly-table-body tbody td .text-danger,
#monthly-table-body tbody td .text-danger {
  font-size: clamp(0.38rem, 0.7vw, 0.58rem) !important;
  line-height: 1.1 !important;
  font-weight: 500 !important;
  margin-top: 3px !important;
  padding: 1px 2px !important;
  border-radius: 3px !important;
  background: rgba(255, 72, 72, 0.06) !important;
  color: #d32f2f !important;
}

.panchank-table #monthly-table-body tbody td .text-danger strong,
#monthly-table-body tbody td .text-danger strong {
  font-size: clamp(0.45rem, 0.65vw, 0.55rem) !important;
  letter-spacing: 0.03em !important;
}

.panchank-table #monthly-table-body tbody td[style*="ffebee"],
#monthly-table-body tbody td[style*="ffebee"] {
  background-color: rgba(255, 72, 72, 0.07) !important;
  border-color: rgba(255, 72, 72, 0.15) !important;
}

.panchank-table #monthly-table-body tbody td[style*="fdfdfd"],
.panchank-table #monthly-table-body tbody td:empty,
#monthly-table-body tbody td[style*="fdfdfd"],
#monthly-table-body tbody td:empty {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(0, 0, 0, 0.015) 4px,
    rgba(0, 0, 0, 0.015) 5px
  ) !important;
  border-color: rgba(0, 0, 0, 0.04) !important;
  min-height: clamp(32px, 4vw, 40px) !important;
}

.moon-table-header h3 {
  font-size: clamp(0.95rem, 1.2vw, 1.1rem) !important;
  letter-spacing: 0.02em;
}

.moon-table-header p {
  font-size: clamp(0.68rem, 0.85vw, 0.78rem) !important;
  opacity: 0.65;
}

.panchak-info-card {
  border-radius: 8px;
  border: 1px solid rgba(255, 72, 72, 0.18);
  background: rgba(255, 72, 72, 0.04);
  overflow: hidden;
  font-family: "Poppins", sans-serif;
}

.panchak-info-header {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.5vw, 6px) !important;
  padding: clamp(4px, 0.6vw, 8px) clamp(8px, 1vw, 12px) !important;
  background: rgba(255, 72, 72, 0.08);
  color: #d32f2f;
  font-size: clamp(0.55rem, 0.95vw, 0.78rem) !important;
  border-bottom: 1px solid rgba(255, 72, 72, 0.1);
}

.panchak-info-header i {
  font-size: clamp(0.5rem, 0.85vw, 0.72rem) !important;
}

.panchak-info-body {
  padding: clamp(4px, 0.6vw, 10px) clamp(8px, 1vw, 12px) !important;
}

.panchak-info-dates {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.6vw, 8px) !important;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.panchak-label {
  font-size: clamp(0.48rem, 0.8vw, 0.65rem) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #999;
}

.panchak-value {
  font-size: clamp(0.55rem, 0.9vw, 0.75rem) !important;
  font-weight: 600 !important;
  color: #d32f2f;
  background: rgba(255, 72, 72, 0.08);
  padding: clamp(2px, 0.3vw, 4px) clamp(5px, 0.6vw, 8px) !important;
  border-radius: 4px;
}

.panchak-info-desc {
  display: flex;
  gap: clamp(4px, 0.5vw, 6px) !important;
  align-items: flex-start;
  font-size: clamp(0.5rem, 0.85vw, 0.68rem) !important;
  line-height: 1.4 !important;
  color: #666;
  padding-top: clamp(4px, 0.6vw, 8px) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.panchak-info-desc i {
  color: #4a89dc;
  margin-top: 2px;
  flex-shrink: 0;
  font-size: clamp(0.5rem, 0.85vw, 0.7rem) !important;
}


numero-vastu-container {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(12px, 2vh, 20px) !important;
  height: calc(100vh - clamp(50px, 8vh, 80px)) !important;
  padding: var(--numero-dash-pad-y) var(--numero-dash-pad-x) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}

.numero-vastu-grid {
  display: grid !important;
  grid-template-columns: 360px 1fr !important;
  gap: clamp(14px, 1.8vw, 22px) !important;
  width: 100% !important;
}

@media (max-width: 991.98px) {
  .numero-vastu-grid {
    grid-template-columns: 1fr !important;
  }
}

.numero-vastu-card {
  background: var(--bg-theme, #ffffff);
  border-radius: var(--numero-card-radius-lg, 16px) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
}

.theme-dark .numero-vastu-card {
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

.numero-vastu-card-header {
  background: var(
    --bg-highlight,
    linear-gradient(135deg, #1e88e5, #1565c0)
  ) !important;
  color: #ffffff !important;
  padding: clamp(10px, 1.6vh, 14px) clamp(14px, 1.6vw, 20px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.numero-vastu-card-body {
  padding: clamp(16px, 2vh, 22px) !important;
  flex-grow: 1 !important;
}

.vastu-direction-card {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.theme-dark .vastu-direction-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.vastu-direction-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.personel-year-container {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(12px, 2vh, 20px) !important;
  height: calc(100vh - clamp(50px, 8vh, 80px)) !important;
  padding: var(--numero-dash-pad-y) var(--numero-dash-pad-x) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}

.personel-year-grid {
  display: grid !important;
  grid-template-columns: 360px 1fr !important;
  gap: clamp(14px, 1.8vw, 22px) !important;
  width: 100% !important;
}

@media (max-width: 991.98px) {
  .personel-year-grid {
    grid-template-columns: 1fr !important;
  }
}

.personel-year-card {
  background: var(--bg-theme, #ffffff);
  border-radius: var(--numero-card-radius-lg, 16px) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
}

.personel-year-card-header {
  background: var(
    --bg-highlight,
    linear-gradient(135deg, #1e88e5, #1565c0)
  ) !important;
  color: #ffffff !important;
  padding: clamp(10px, 1.6vh, 14px) clamp(14px, 1.6vw, 20px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.personel-year-card-body {
  padding: clamp(16px, 2vh, 22px) !important;
  flex-grow: 1 !important;
}

.personel-year-num-box {
  background: linear-gradient(
    145deg,
    rgba(30, 136, 229, 0.05),
    rgba(30, 136, 229, 0.01)
  );
  border: 1px solid rgba(30, 136, 229, 0.15);
  border-radius: 16px;
  padding: clamp(22px, 3.2vh, 32px) 16px;
  text-align: center;
  margin: 16px 0;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
}

.bg-light-soft {
  background: rgba(0, 0, 0, 0.02) !important;
}

.py-stat-card {
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.theme-dark .py-stat-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.py-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.py-keyword-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  cursor: default;
}

.py-keyword-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.py-progress-bar {
  height: 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.theme-dark .py-progress-bar {
  background: rgba(255, 255, 255, 0.15);
}

.py-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}



/* ==========================================================================
   TRANSIT CHART PAGE 
   ========================================================================== */
html:has(.transit-main-container),
body:has(.transit-main-container),
body:has(.transit-main-container) #page,
.transit-page-content {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.transit-main-container {
  display: flex !important;
  flex-direction: row !important;
  gap: clamp(8px, 1vw, 14px) !important;
  height: calc(100vh - clamp(50px, 7vh, 70px)) !important;
  max-height: calc(100vh - clamp(50px, 7vh, 70px)) !important;
  padding: clamp(4px, 0.8vh, 10px) clamp(8px, 1vw, 16px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.transit-left-column {
  flex: 0 0 calc(52% - 6px) !important;
  max-width: calc(52% - 6px) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.transit-left-column .kundli-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.transit-canvas-wrapper {
  position: relative !important;
  width: 100% !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-neutral, #e2e8f0) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.transit-canvas-wrapper canvas,
.transit-canvas-wrapper img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.transit-info-strip {
  flex: 0 0 auto !important;
  min-height: clamp(26px, 4vh, 36px) !important;
  margin: clamp(3px, 0.5vh, 6px) 0 !important;
  background: var(--bg-neutral-alt, rgba(0, 0, 0, 0.04)) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  font-size: clamp(0.68rem, 1.2vh, 0.9rem) !important;
}

/* Middle Column Controls */
.transit-middle-column {
  flex: 0 0 calc(14% - 6px) !important;
  max-width: calc(14% - 6px) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.transit-middle-column .custom-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  padding: clamp(6px, 1vh, 12px) clamp(4px, 0.6vw, 8px) !important;
}

.transit-middle-column .d-flex.flex-column {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  justify-content: space-between !important;
  gap: clamp(2px, 0.4vh, 6px) !important;
}

.transit-ctrl-btn {
  flex: 1 1 0 !important;
  min-height: clamp(22px, 3.8vh, 38px) !important;
  max-height: clamp(28px, 4.5vh, 44px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: clamp(0.7rem, 1.22vh, 0.92rem) !important;
  font-weight: 700 !important;
  padding: 0 4px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  width: 100% !important;
  background: var(--bg-neutral-alt, #f1f5f9) !important;
  color: var(--text-primary, #0f172a) !important;
  border: 1px solid var(--border-neutral, #cbd5e1) !important;
  transition: all 0.2s ease !important;
}

.transit-ctrl-btn:hover {
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.12) !important;
  color: var(--bg-highlight, #db4454) !important;
}

.transit-ctrl-btn.active {
  background: var(--bg-highlight, #db4454) !important;
  color: #ffffff !important;
  border-color: var(--bg-highlight, #db4454) !important;
  box-shadow: 0 2px 8px oklch(from var(--bg-highlight, #db4454) l c h / 0.35) !important;
}

.transit-ctrl-btn.highlight-btn {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border: none !important;
}

/* Right Column Planet Tables */
.transit-right-column {
  flex: 0 0 calc(34% - 6px) !important;
  max-width: calc(34% - 6px) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(6px, 1vh, 10px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.transit-right-column .custom-card {
  flex: 1 1 0 !important;
  height: 50% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.transit-right-column .table-responsive {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: auto !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--bg-highlight, #db4454) rgba(0, 0, 0, 0.08) !important;
}

.transit-right-column .table-responsive::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
  display: block !important;
}

.transit-right-column .table-responsive::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05) !important;
  border-radius: 4px !important;
}

.transit-right-column .table-responsive::-webkit-scrollbar-thumb {
  background: var(--bg-highlight, #db4454) !important;
  border-radius: 4px !important;
}

.transit-right-column .table-responsive::-webkit-scrollbar-thumb:hover {
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.8) !important;
}

.transit-planet-table,
.tablefont-chart {
  width: 100% !important;
  margin-bottom: 0 !important;
}

.transit-planet-table th,
.tablefont-chart th {
  padding: clamp(3px, 0.5vh, 6px) clamp(3px, 0.4vw, 8px) !important;
  font-size: clamp(0.6rem, 1.1vh, 0.88rem) !important;
  font-weight: 700 !important;
  line-height: clamp(1.1, 1.4vh, 1.35) !important;
  position: sticky !important;
  top: 0 !important;
  background: var(--bg-highlight, #ffffff) !important;
  z-index: 2 !important;
}

.transit-planet-table td,
.tablefont-chart td {
  padding: clamp(1.5px, 0.4vh, 5px) clamp(3px, 0.4vw, 8px) !important;
  font-size: clamp(0.62rem, 1.18vh, 0.92rem) !important;
  line-height: clamp(1.15, 1.45vh, 1.35) !important;
  white-space: nowrap !important;
}

.p-sun {
  color: #f97316 !important;
  font-weight: 700;
}
.p-mon {
  color: #06b6d4 !important;
  font-weight: 700;
}
.p-mar {
  color: #ef4444 !important;
  font-weight: 700;
}
.p-mer {
  color: #10b981 !important;
  font-weight: 700;
}
.p-jup {
  color: #eab308 !important;
  font-weight: 700;
}
.p-ven {
  color: #ec4899 !important;
  font-weight: 700;
}
.p-sat {
  color: #3b82f6 !important;
  font-weight: 700;
}
.p-rah {
  color: #8b5cf6 !important;
  font-weight: 700;
}
.p-ket {
  color: #d97706 !important;
  font-weight: 700;
}

/* Mobile Responsive Adjustment */
@media (max-width: 991.98px) {
  html:has(.transit-main-container),
  body:has(.transit-main-container),
  body:has(.transit-main-container) #page,
  .transit-page-content {
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
  }
  .transit-main-container {
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
  }
  .transit-left-column,
  .transit-middle-column,
  .transit-right-column {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

.control-btn {
  background: #f3f4f6;
  color: #222222;
  border: none;
  box-shadow: none;
}

.date-picker-btn {
  background: #f3f4f6;
  color: #222222;
  border: none;
}

.control-btn.active,
.date-picker-btn.active {
  background: var(--bg-highlight, #db4454);
  color: var(--bg-highlight-color, #ffffff);
}

.date-picker-btn i,
.control-btn i,
.control-btn span,
.date-picker-btn span {
  color: inherit;
}


/*  */
/* ── Home Page Navbar System ── */

.home-navbar {
  position: sticky;
  top: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(14px, 0.8vw, 44px);
  height: clamp(58px, 8vh, 72px);
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-family: "Poppins", sans-serif;
}

/* ── Brand ── */
.home-brand {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 14px);
  text-decoration: none;
}

.home-brand-logo {
  height: clamp(35px, 4.5vh, 42px);
  width: auto;
  object-fit: contain;
}

.home-brand-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.home-brand-title {
  font-size: clamp(13px, 1.2vw, 19px);
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

.home-brand-sub {
  font-size: clamp(0.6rem, 1vw, 0.72rem);
  font-weight: 500;
  color: var(--text-muted, #94a3b8);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Nav Links ── */
.home-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(2px, 0.5vw, 6px);
}

.home-nav-links a {
  padding: clamp(5px, 0.8vh, 8px) clamp(12px, 1.6vw, 20px);
  font-size: clamp(0.8rem, 1.4vw, 0.92rem);
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  text-decoration: none;
  border-radius: 8px;
  transition:
    color 0.22s ease,
    background 0.22s ease;
}

.home-nav-links a:hover {
  color: var(--bg-highlight, #db4454);
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.06);
}

.home-nav-links a.active {
  color: var(--bg-highlight, #db4454);
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.08);
  font-weight: 700;
}

/* ── Navbar Dropdown System ── */
.home-nav-dropdown {
  position: relative;
  display: inline-block;
}

.home-nav-dropdown .home-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.home-nav-dropdown .home-dropdown-toggle i {
  transition: transform 0.25s ease;
  font-size: 0.72rem;
  opacity: 0.8;
}

.home-nav-dropdown:hover .home-dropdown-toggle i {
  transform: rotate(180deg);
}

.home-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 270px;
  background: var(--bg-card, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.15) !important;
  z-index: 1050;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.home-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.home-nav-dropdown:hover .home-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(4px);
}

.home-dropdown-menu a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  color: var(--text-primary, #0f172a) !important;
  background: transparent !important;
  transition:
    background 0.2s ease,
    transform 0.15s ease !important;
}

.home-dropdown-menu a:hover {
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.08) !important;
  transform: translateX(3px);
}

.home-dropdown-menu a i {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.home-dropdown-menu a strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary, #0f172a);
}

.home-dropdown-menu a span {
  display: block;
  font-size: 0.72rem;
  color: var(--text-secondary, #64748b);
  font-weight: 400;
  margin-top: 1px;
}

.theme-dark .home-dropdown-menu {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.theme-dark .home-dropdown-menu a strong {
  color: #ffffff !important;
}

.theme-dark .home-dropdown-menu a span {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* ── CTA Buttons ── */
.home-nav-btns {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.8vw, 10px);
}

.home-btn-login {
  padding: clamp(6px, 0.9vh, 9px) clamp(16px, 1.8vw, 24px);
  font-size: clamp(0.78rem, 1.3vw, 0.88rem);
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  border: 1.5px solid var(--border-neutral, #d1d5db);
  border-radius: 8px;
  text-decoration: none;
  background: transparent;
  transition:
    border-color 0.22s ease,
    color 0.22s ease,
    background 0.22s ease;
}

.home-btn-login:hover {
  border-color: var(--bg-highlight, #db4454);
  color: var(--bg-highlight, #db4454);
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.05);
}

.home-btn-signup {
  padding: clamp(6px, 0.9vh, 9px) clamp(18px, 2vw, 26px);
  font-size: clamp(0.78rem, 1.3vw, 0.88rem);
  font-weight: 700;
  color: #ffffff;
  background: var(--bg-highlight, #db4454);
  border: 1.5px solid var(--bg-highlight, #db4454);
  border-radius: 8px;
  text-decoration: none;
  transition:
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

.home-btn-signup:hover {
  box-shadow: 0 3px 12px oklch(from var(--bg-highlight, #db4454) l c h / 0.3);
  transform: translateY(-1px);
  color: #ffffff;
}

/* ── Hamburger ── */
.home-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.home-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-primary, #333);
  border-radius: 2px;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.home-hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.home-hamburger.open span:nth-child(2) {
  opacity: 0;
}
.home-hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile Menu ── */
.home-mobile-menu {
  display: none;
  flex-direction: column;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 0 clamp(16px, 4vw, 24px);
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.35s ease,
    padding 0.3s ease;
}

.home-mobile-menu.open {
  display: flex;
  max-height: 340px;
  padding: 10px clamp(16px, 4vw, 24px) 18px;
}

.home-mobile-menu a {
  padding: clamp(9px, 1.2vh, 12px) 14px;
  font-size: clamp(0.85rem, 1.5vw, 0.94rem);
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  text-decoration: none;
  border-radius: 8px;
  transition:
    color 0.22s ease,
    background 0.22s ease;
}

.home-mobile-menu a:hover,
.home-mobile-menu a.active {
  color: var(--bg-highlight, #db4454);
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.07);
}

.home-mobile-btns {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.home-mobile-btns a {
  flex: 1;
  text-align: center;
  padding: clamp(8px, 1vh, 11px) 0;
}

/* ── Card Background Images ── */
.bg-astrology {
  background-image: url("../images/astrology.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.bg-lalkitab {
  background-image: url("../images/lalkitab.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.bg-vastu {
  background-image: url("../images/vastu.jpeg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.bg-18 {
  background-image: url("../app/icons/numero.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.bg-29 {
  background-image: url("../app/icons/astro.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.bg-11 {
  background-image: url("../app/icons/vastu.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* ── Homepage Hero Slider Text Styles ── */
.home-hero-card {
  height: clamp(380px, 58vh, 580px) !important;
  max-height: 65vh !important;
  min-height: 360px !important;
}

.home-hero-card-bottom {
  padding: clamp(24px, 4vw, 48px) clamp(20px, 3vw, 40px) !important;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.5) 70%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
  width: 100% !important;
}

.home-hero-title {
  font-size: clamp(1.6rem, 3.5vw, 2.8rem) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7) !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.01em !important;
}

.home-hero-desc {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
  max-width: 750px !important;
  margin: 0 auto !important;
}

/* ── Parent Container Cards for Feature & Platform Sections ── */
.home-features-section.card-style,
.home-platforms-section.card-style {
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 20px !important;
  padding: 28px 24px !important;
  margin-bottom: 30px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04) !important;
}

.theme-dark .home-features-section.card-style,
.theme-dark .home-platforms-section.card-style {
  background-color: var(--bg-card-dark, #1e293b) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.home-features-heading {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}

.theme-dark .home-features-heading {
  color: #ffffff;
}

/* Pure CSS Grid - 4 Compact Cards Per Row */
.home-features-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.home-reports-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Compact Native Ramal Card Component */
.home-feature-item-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 16px 16px !important;
  background: oklch(from var(--bg-highlight, #da4453) 0.65 0.16 h) !important;
  color: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid oklch(from var(--bg-highlight, #da4453) l c h / 0.5) !important;
  box-shadow: 0 4px 16px oklch(from var(--bg-highlight, #da4453) l c h / 0.2) !important;
  text-decoration: none !important;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
  height: 100%;
  margin: 0 !important;
}

.theme-dark .home-feature-item-card {
  background: oklch(from var(--bg-highlight, #da4453) 0.4 0.18 h) !important;
  border-color: oklch(from var(--bg-highlight, #da4453) l c h / 0.6) !important;
}

.home-feature-item-card:hover {
  transform: translateY(-3px) !important;
  background: oklch(from var(--bg-highlight, #da4453) 0.58 0.18 h) !important;
  box-shadow: 0 10px 24px oklch(from var(--bg-highlight, #da4453) l c h / 0.3) !important;
  border-color: #ffffff !important;
}

/* Watermark Background Icon */
.home-card-watermark {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 64px;
  color: #ffffff !important;
  opacity: 0.11;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.home-feature-item-card:hover .home-card-watermark {
  opacity: 0.2;
}

/* Card Top Bar */
.home-card-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}

/* Compact Icon Badge */
.home-feature-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: background 0.22s ease;
}

.home-feature-icon-badge i {
  font-size: 16px;
  color: #ffffff !important;
}

.home-feature-item-card:hover .home-feature-icon-badge {
  background: rgba(255, 255, 255, 0.35);
}

/* Category Badge Pill */
.home-card-badge {
  font-size: 0.68rem;
  font-weight: 750;
  padding: 3px 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Card Typography */
.home-feature-card-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: #ffffff !important;
  margin-bottom: 4px;
  line-height: 1.25;
}

.theme-dark .home-feature-card-title {
  color: #ffffff !important;
}

.home-feature-card-desc {
  font-size: 0.81rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92) !important;
  line-height: 1.45;
  margin: 0;
}

.theme-dark .home-feature-card-desc {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Feature Pills Tags inside Card */
.home-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
  margin-bottom: 6px;
}

.home-card-pill {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.theme-dark .home-card-pill {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3);
}

/* Compact Action Bar */
.home-card-footer {
  margin-top: auto;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.25);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-card-action-text {
  font-size: 0.8rem;
  font-weight: 800;
  color: #ffffff !important;
  letter-spacing: 0.01em;
}

.theme-dark .home-card-action-text {
  color: #ffffff !important;
}

.home-card-action-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--bg-highlight, #da4453) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform 0.22s ease;
}

.home-feature-item-card:hover .home-card-action-btn {
  transform: translateX(3px);
}

.layout-section-footer {
  font-size: 0.86rem;
  color: var(--text-muted, #94a3b8);
  margin-top: 36px;
}

.theme-dark .layout-section-footer {
  color: rgba(255, 255, 255, 0.5);
}

/* Premium Check Pricing CTA Button Styling */
.home-pricing-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 28px 12px 14px;
  background: linear-gradient(
    135deg,
    var(--bg-highlight, #da4453),
    oklch(from var(--bg-highlight, #da4453) l 0.08 h)
  ) !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  text-decoration: none !important;
  box-shadow:
    0 8px 24px oklch(from var(--bg-highlight, #da4453) l c h / 0.38),
    0 2px 6px rgba(0, 0, 0, 0.1) !important;
  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.25s ease !important;
  cursor: pointer;
}

.pricing-btn-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #ffffff;
  transition:
    transform 0.28s ease,
    background 0.25s ease;
}

.pricing-btn-text {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #ffffff;
  text-transform: uppercase;
}

.pricing-btn-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--bg-highlight, #da4453);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-pricing-cta-btn:hover {
  transform: translateY(-4px) scale(1.025) !important;
  box-shadow:
    0 16px 36px oklch(from var(--bg-highlight, #da4453) l c h / 0.5),
    0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.home-pricing-cta-btn:hover .pricing-btn-icon-badge {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.08);
}

.home-pricing-cta-btn:hover .pricing-btn-arrow {
  transform: translateX(4px);
}

/* ── Works Everywhere Platforms Section ── */
.home-platforms-section {
  margin-top: 40px;
}

.home-platforms-heading {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.theme-dark .home-platforms-heading {
  color: #ffffff;
}

.home-platforms-subtext {
  font-size: 0.95rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 620px;
}

.theme-dark .home-platforms-subtext {
  color: rgba(255, 255, 255, 0.75);
}

.home-platforms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.home-platform-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px !important;
  background: var(--bg-theme, #ffffff) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease !important;
  margin: 0 !important;
  height: 100%;
}

.theme-dark .home-platform-card {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.home-platform-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px oklch(from var(--bg-highlight, #da4453) l c h / 0.15) !important;
  border-color: var(--bg-highlight, #da4453) !important;
}

.platform-icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: oklch(from var(--bg-highlight, #da4453) l c h / 0.08);
  border: 1px solid oklch(from var(--bg-highlight, #da4453) l c h / 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.platform-icon-wrapper i {
  font-size: 24px;
  color: var(--bg-highlight, #da4453);
}

.home-platform-card:hover .platform-icon-wrapper {
  background: var(--bg-highlight, #da4453);
  border-color: var(--bg-highlight, #da4453);
  transform: scale(1.08);
}

.home-platform-card:hover .platform-icon-wrapper i {
  color: #ffffff !important;
}

.platform-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  margin-bottom: 2px;
  transition: color 0.22s ease;
}

.theme-dark .platform-card-title {
  color: #ffffff;
}

.home-platform-card:hover .platform-card-title {
  color: var(--bg-highlight, #da4453);
}

.platform-card-subtitle {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  letter-spacing: 0.01em;
}

.theme-dark .platform-card-subtitle {
  color: rgba(255, 255, 255, 0.7);
}

/* Responsive Platforms Grid */
@media (max-width: 992px) {
  .home-platforms-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .home-platforms-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .home-platforms-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* Responsive CSS Grid Breakpoints - 4 Cards Per Row on Desktop/Laptop */
@media (max-width: 1200px) {
  .home-features-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
}

@media (max-width: 868px) {
  .home-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 576px) {
  .home-features-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .home-nav-links,
  .home-nav-btns {
    display: none;
  }
  .home-hamburger {
    display: flex;
  }
}

@media (min-width: 769px) {
  .home-mobile-menu {
    display: none !important;
  }
}

/* ── Feature Cards Typography ── */
.feature-heading {
  font-size: clamp(0.95rem, 1.25vw, 1.2rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  color: var(--text-primary, #0f172a);
  transition: color 0.22s ease;
}

.theme-dark .feature-heading {
  color: #ffffff !important;
}

.features-content,
.feature-content {
  font-size: clamp(0.72rem, 0.95vw, 0.85rem) !important;
  line-height: 1.45 !important;
  color: var(--text-secondary, #64748b);
  opacity: 0.88;
  margin-bottom: 0;
  transition: color 0.22s ease;
}

.theme-dark .features-content,
.theme-dark .feature-content {
  color: rgba(255, 255, 255, 0.75) !important;
}

.free-apps-heading,
.section-heading {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--text-primary, #0f172a);
  letter-spacing: -0.01em;
  transition: color 0.22s ease;
}

.theme-dark .free-apps-heading,
.theme-dark .section-heading {
  color: #ffffff !important;
}

/* ── 1.6 Home Page Footer System ── */
.home-footer.gradient-highlight,
.home-footer {
  background: var(
    --bg-highlight,
    linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%)
  ) !important;
  color: #ffffff !important;
  font-family: "Poppins", sans-serif;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin-top: 40px;
}

/* Overlay gradient for radial depth */
.home-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.home-footer-container {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  margin: 0 auto;
  padding: 0 20px;
}

/* Newsletter CTA Card at top of Footer */
.home-footer-cta {
  background: rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 20px;
  padding: 32px 36px;
  margin-top: 40px;
  margin-bottom: 50px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.home-footer-cta-text h3 {
  color: #ffffff !important;
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.home-footer-cta-text h3 i {
  color: #fde047 !important; /* Bright yellow icon */
}

.home-footer-cta-text p {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0;
  line-height: 1.5;
}

.home-footer-cta-form {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 360px;
}

.home-footer-cta-input-wrap {
  position: relative;
  flex-grow: 1;
}

.home-footer-cta-input-wrap i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.95rem;
}

.home-footer-cta-input {
  width: 100%;
  padding: 12px 16px 12px 40px;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 12px;
  color: #ffffff !important;
  font-size: 0.9rem;
  font-weight: 500;
  outline: none;
  transition: all 0.25s ease;
}

.home-footer-cta-input:focus {
  background: rgba(0, 0, 0, 0.5) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3) !important;
}

.home-footer-cta-input::placeholder {
  color: rgba(255, 255, 255, 0.75) !important;
}

.home-footer-cta-btn {
  padding: 12px 26px;
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 0.9rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

.home-footer-cta-btn i {
  color: #0f172a !important;
}

.home-footer-cta-btn:hover {
  background: #ffffff !important;
  color: #0f172a !important;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

/* Grid Section */
.home-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 36px;
  padding-bottom: 48px;
}

.home-footer-col-title {
  color: #ffffff !important;
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  letter-spacing: 0.01em;
}

.home-footer-col-title::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 32px;
  height: 3px;
  background: #ffffff !important;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Brand Column */
.home-footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
  margin-bottom: 16px;
}

.home-footer-brand-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.home-footer-brand-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff !important;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.home-footer-brand-sub {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.18);
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 2px;
}

.home-footer-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 500;
  margin-bottom: 20px;
}

.home-footer-socials {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.home-footer-social-link {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  text-decoration: none !important;
  transition: all 0.25s ease;
}

.home-footer-social-link i {
  color: #ffffff !important;
}

.home-footer-social-link:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
}

.home-footer-social-link:hover i {
  color: #0f172a !important;
}

.home-footer-trust-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.home-footer-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.home-footer-trust-pill i {
  color: #fde047 !important; /* Yellow stars/icons */
}

/* Links Columns */
.home-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-footer-links a {
  color: rgba(255, 255, 255, 0.95) !important;
  text-decoration: none !important;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.22s ease;
}

.home-footer-links a i {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.22s ease;
}

.home-footer-links a:hover {
  color: #ffffff !important;
  transform: translateX(4px);
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.home-footer-links a:hover i {
  color: #ffffff !important;
  transform: translateX(3px);
}

/* Contact & Info Column */
.home-footer-contact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.home-footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 500;
}

.home-footer-contact-item .text-white {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.92rem;
}

.home-footer-contact-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.home-footer-contact-icon i {
  color: #ffffff !important;
}

.home-footer-contact-item a,
.home-footer-contact-item span {
  color: rgba(255, 255, 255, 0.95) !important;
  text-decoration: none !important;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.home-footer-contact-item a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.home-footer-platforms-title {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff !important;
  margin-bottom: 10px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.home-footer-platforms-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-footer-platform-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff !important;
}

.home-footer-platform-tag i {
  color: #ffffff !important;
}

/* Bottom Bar */
.home-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.home-footer-copyright {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 500;
  margin: 0;
}

.home-footer-legal-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.home-footer-legal-links a {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.home-footer-legal-links a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Scroll To Top Button */
.home-footer-scroll-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #ffffff !important;
  color: #0f172a !important;
  border: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-footer-scroll-top i {
  color: #0f172a !important;
}

.home-footer-scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.home-footer-scroll-top:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Footer Responsive Media Queries */
@media (max-width: 992px) {
  .home-footer-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 24px 20px;
  }
  .home-footer-cta-text h3 {
    justify-content: center;
  }
  .home-footer-cta-form {
    min-width: 100%;
    flex-direction: column;
  }
  .home-footer-cta-btn {
    width: 100%;
    justify-content: center;
  }
  .home-footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

@media (max-width: 576px) {
  .home-footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .home-footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  .home-footer-legal-links {
    justify-content: center;
  }
}

/* ── Inner Table Scrollbars for Planet Position & Cusp Position Modals ── */
#menu-planet-position .table-responsive,
#menu-cusp-position .table-responsive {
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--bg-highlight, #1e88e5) rgba(0, 0, 0, 0.1) !important;
}

#menu-planet-position .table-responsive::-webkit-scrollbar,
#menu-cusp-position .table-responsive::-webkit-scrollbar {
  width: 7px !important;
  height: 7px !important;
  display: block !important;
}

#menu-planet-position .table-responsive::-webkit-scrollbar-track,
#menu-cusp-position .table-responsive::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.06) !important;
  border-radius: 4px !important;
}

#menu-planet-position .table-responsive::-webkit-scrollbar-thumb,
#menu-cusp-position .table-responsive::-webkit-scrollbar-thumb {
  background: var(--bg-highlight, #1e88e5) !important;
  border-radius: 4px !important;
}

#menu-planet-position .table-responsive::-webkit-scrollbar-thumb:hover,
#menu-cusp-position .table-responsive::-webkit-scrollbar-thumb:hover {
  background: #1565c0 !important;
}

/* ── free Name Page  ── */
@media (min-width: 992px) {
  .free-col-30 {
    flex: 0 0 30% !important;
    max-width: 30% !important;
    width: 30% !important;
  }
  .free-col-70 {
    flex: 0 0 70% !important;
    max-width: 70% !important;
    width: 70% !important;
  }
}

.free-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.free-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

/* ── Lucky Name Result Container & Number Boxes Styling ── */
#lucky_result_container {
  padding: 20px;
  border-radius: 12px;
  background: var(--bg-theme, #ffffff);
  transition: all 0.3s ease;
}

#lucky_report_name {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-theme, #222);
  margin-bottom: 8px;
  text-transform: capitalize;
}

#luckyNumberGrid p {
  font-size: 0.95rem !important;
  color: var(--color-theme, #444);
}

#compatibility_status {
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(30, 136, 229, 0.12);
  display: inline-block;
}

.num-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.num-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.num-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.num-box .num-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  opacity: 0.9;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.num-box .num-value {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
}

/* ── Free Apps Static Container Simple & Responsive Clamp Typography ── */
.free-apps-static-container {
  position: relative;
  transition: all 0.3s ease;
}

.free-apps-static-container h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.8rem);
  font-weight: 800;
  margin-bottom: 14px;
  color: var(--color-theme, #111);
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.06);
}

.free-apps-static-container h3 {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  margin-top: 24px;
  margin-bottom: 12px;
  color: var(--color-theme, #222);
  display: flex;
  align-items: center;
  gap: 8px;
}

.free-apps-static-container h3::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  background: var(--bg-highlight, #1e88e5);
  border-radius: 4px;
}

.free-apps-static-container h4 {
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  font-weight: 700;
  margin-top: 18px;
  margin-bottom: 10px;
  color: var(--color-theme, #333);
}

.free-apps-static-container p {
  font-size: clamp(0.88rem, 1.4vw, 1rem);
  line-height: 1.65;
  opacity: 0.88;
  margin-bottom: 14px;
  color: var(--color-theme, #444);
}

.free-apps-static-container ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 20px;
}

.free-apps-static-container li {
  position: relative;
  font-size: clamp(0.88rem, 1.4vw, 1rem);
  line-height: 1.65;
  opacity: 0.9;
  margin-bottom: 8px;
  padding-left: 24px;
  color: var(--color-theme, #444);
}

.free-apps-static-container li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--bg-highlight, #1e88e5);
  font-size: 13px;
}

.free-apps-static-container li strong {
  display: inline-block;
  min-width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  color: var(--bg-highlight, #1e88e5);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  margin-right: 4px;
}


.dash-page-plans .dash-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}

.dash-page-plans .dash-right-card > .flex-grow-1 {
  display: flex;
  flex-direction: column;
}

.plan-row-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  flex-grow: 1;
  overflow: hidden !important;
  padding: 6px 0 12px;
}

.plan-card-item {
  flex: 1 1 0%;
  min-width: 0;
  max-width: 25%;
  display: flex;
  flex-direction: column;
}

.plan-card-item .card {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  height: 100% !important;
  min-height: clamp(450px, 68vh, 720px) !important;
  display: flex;
  flex-direction: column;
}

/* Responsive Soft Elevation Shadow */
.plan-card-item.featured .card,
.plan-card-item:hover .card {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
}

.plan-card-item .card-header-glow {
  background: var(--bg-highlight, #db4454);
  position: relative;
  padding: clamp(10px, 1.5vh, 22px) clamp(8px, 1vw, 18px) !important;
  border-radius: 14px 14px 0 0;
}

.plan-card-item .card-header-glow h3 {
  font-size: clamp(0.92rem, 2.1vh, 1.55rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: clamp(2px, 0.5vh, 6px) !important;
}

.plan-card-item .card-header-glow .font-20 {
  font-size: clamp(1.25rem, 2.7vh, 2.2rem) !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  margin-top: clamp(2px, 0.4vh, 6px) !important;
  margin-bottom: clamp(2px, 0.5vh, 6px) !important;
}

.plan-card-item .card-header-glow .font-11 {
  font-size: clamp(0.7rem, 1.35vh, 1.05rem) !important;
  margin-bottom: clamp(2px, 0.4vh, 4px) !important;
}

.plan-card-item .card-header-glow .font-10 {
  font-size: clamp(0.65rem, 1.25vh, 0.95rem) !important;
  margin-bottom: clamp(2px, 0.5vh, 6px) !important;
}

.plan-glow-badge {
  display: inline-block;
  background: #ffffff;
  color: var(--bg-highlight, #db4454);
  font-size: clamp(0.6rem, 1.15vh, 0.85rem) !important;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: clamp(2px, 0.5vh, 6px) clamp(6px, 1vh, 14px) !important;
  border-radius: 50px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.plan-buy-glow-btn {
  background: #ffffff !important;
  color: var(--bg-highlight, #db4454) !important;
  font-weight: 800 !important;
  font-size: clamp(0.78rem, 1.55vh, 1.15rem) !important;
  border-radius: 8px !important;
  padding: clamp(6px, 1.1vh, 12px) clamp(10px, 1.3vh, 22px) !important;
  margin-top: clamp(4px, 0.8vh, 10px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease !important;
}

.plan-buy-glow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16) !important;
}

.plan-card-item .card-body {
  padding: clamp(8px, 1.2vh, 18px) clamp(8px, 1vw, 18px) !important;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Feature List Compact Items */
.plan-feature-list {
  flex-grow: 1;
}

.plan-feature-list li {
  padding: clamp(2px, 0.45vh, 5px) 0 !important;
  border-bottom: none !important;
  display: flex;
  align-items: center;
  font-size: clamp(0.72rem, 2vh, 3rem) !important;
  font-weight: 600;
  line-height: 1.35 !important;
}

.plan-feature-list li i {
  color: var(--bg-highlight, #db4454);
  font-size: clamp(0.75rem, 1.35vh, 1.05rem) !important;
  margin-right: clamp(4px, 0.6vw, 10px) !important;
  flex-shrink: 0;
}

/* Mobile Layout Sizing */
@media (max-width: 767px) {
  .dash-page-plans .dash-row {
    flex-direction: column !important;
  }
  .dash-page-plans .dash-left-card {
    width: 100% !important;
    min-width: 100% !important;
  }
  .plan-row-wrapper {
    overflow-x: auto !important;
  }
  .plan-card-item {
    flex: 0 0 82vw;
    min-width: 220px;
    max-width: 300px;
  }
}

/* ── Activated Plan Card Variant (.plan-active) ── */
.plan-card-item.plan-active .card {
  border: none !important;
  transform: translateY(-6px) !important;
  box-shadow:
    0 16px 36px -6px rgba(0, 0, 0, 0.15),
    0 8px 20px -4px oklch(from var(--bg-highlight, #db4454) l c h / 0.3) !important;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease !important;
}

.plan-card-item.plan-active:hover .card {
  transform: translateY(-9px) !important;
  box-shadow:
    0 20px 42px -6px rgba(0, 0, 0, 0.2),
    0 12px 26px -4px oklch(from var(--bg-highlight, #db4454) l c h / 0.4) !important;
}

.plan-card-item.plan-active .card-header-glow {
  background: linear-gradient(
    135deg,
    var(--bg-highlight, #db4454),
    oklch(from var(--bg-highlight, #db4454) l c h / 0.88)
  ) !important;
}

.plan-active-status-badge {
  display: inline-flex;
  align-items: center;
  background: #10b981;
  color: #ffffff;
  font-size: clamp(0.65rem, 1.15vh, 0.85rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: clamp(3px, 0.5vh, 6px) clamp(6px, 1vh, 14px);
  border-radius: 50px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
  margin-bottom: clamp(3px, 0.5vh, 6px);
}

.plan-card-item.plan-active .plan-active-btn {
  background: #ffffff !important;
  color: #10b981 !important;
  font-weight: 800 !important;
}

/* ── Free Apps ── */
.free-apps-static-container {
  position: relative;
  transition: all 0.3s ease;
}

.free-apps-static-container h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.8rem);
  font-weight: 800;
  margin-bottom: 14px;
  color: var(--color-theme, #111);
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.06);
}

.free-apps-static-container h3 {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  margin-top: 24px;
  margin-bottom: 12px;
  color: var(--color-theme, #222);
  display: flex;
  align-items: center;
  gap: 8px;
}

.free-apps-static-container h3::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  background: var(--bg-highlight, #1e88e5);
  border-radius: 4px;
}

.free-apps-static-container h4 {
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  font-weight: 700;
  margin-top: 18px;
  margin-bottom: 10px;
  color: var(--color-theme, #333);
}

.free-apps-static-container p {
  font-size: clamp(0.88rem, 1.4vw, 1rem);
  line-height: 1.65;
  opacity: 0.88;
  margin-bottom: 14px;
  color: var(--color-theme, #444);
}

.free-apps-static-container ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 20px;
}

.free-apps-static-container li {
  position: relative;
  font-size: clamp(0.88rem, 1.4vw, 1rem);
  line-height: 1.65;
  opacity: 0.9;
  margin-bottom: 8px;
  padding-left: 24px;
  color: var(--color-theme, #444);
}

.free-apps-static-container li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--bg-highlight, #1e88e5);
  font-size: 13px;
}

.free-apps-static-container li strong {
  display: inline-block;
  min-width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  color: var(--bg-highlight, #1e88e5);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  margin-right: 4px;
}

/* ── Contact Us ── */
.contact-hero-banner {
  background: radial-gradient(
    circle at top center,
    oklch(from var(--bg-highlight, #db4454) l c h / 0.12) 0%,
    transparent 70%
  );
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.max-width-600 {
  max-width: 600px;
}

.contact-icon-box {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bg-highlight-fade {
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.12) !important;
}

.contact-info-card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.contact-info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.bg-fade-highlight {
  background: oklch(from var(--bg-highlight, #db4454) l c h / 0.04) !important;
}

.bg-fade-green {
  background: oklch(from #10b981 l c h / 0.06) !important;
}

.bg-fade-blue {
  background: oklch(from #3b82f6 l c h / 0.06) !important;
}

.tap-btn-call {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

.tap-btn-call:hover {
  background: linear-gradient(135deg, #059669, #047857) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.tap-btn-mail {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  color: #ffffff !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

.tap-btn-mail:hover {
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}
#offer-layout {
                    display: none;
                }

                 .coupon-success {
                    color: green;
                    font-size:13px;
                        
                }

                .coupon-error {
                    color: red;
                    font-size:13px;
                }


          

/* ── Sticky Purchase Bar ── */
.purchase-vastu-sticky,
.download_lalkitab_report {
  position: fixed !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 20px !important;
  z-index: 1050 !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}



@media (max-width: 576px) {
  .purchase-vastu-sticky,
  .download_lalkitab_report {
    left: 10px !important;
    right: 10px !important;
    bottom: 12px !important;
    padding: 10px 14px !important;
  }
}


/* ==========================================================================
   RAMAL SIDEBAR
   ========================================================================== */

.dash-left-card .showqus {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
}

.dash-left-card .showqus .card {
  margin: 0 !important;
  height: clamp(40px, 5vw, 45px) !important;
  min-height: 40px !important;
  border-radius: 10px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dash-left-card .card-style .card-overlay {
  border-radius: 10px !important;
}

.dash-left-card .showqus .card:hover {
  transform: translateX(4px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

.dash-left-card .showqus .card a {
  display: flex !important;
  width: 100% !important;
  border-radius: 10px !important;

  height: 100% !important;
  text-decoration: none !important;
}

.dash-left-card .showqus .card .card-center {
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  text-align: left !important;
  width: 100% !important;
}

.dash-left-card .showqus .card .card-center h3 {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  margin-bottom: 0 !important;
  color: #111111 !important;
}

.dash-left-card .showqus .card .card-center p {
  display: none !important;
}

.dash-left-card .showqus .card-overlay {
  background: rgba(255, 255, 255, 0.85) !important;
}

.dash-left-card {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: white rgba(0, 0, 0, 0.05) !important;
}

.dash-right-card {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--bg-highlight) rgba(0, 0, 0, 0.05) !important;
}

.dash-right-card::-webkit-scrollbar,
.dash-right-card > .content::-webkit-scrollbar {
  width: 6px !important;
}

.dash-right-card::-webkit-scrollbar-track,
.dash-right-card > .content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04) !important;
  border-radius: 10px !important;
}

.dash-right-card::-webkit-scrollbar-thumb,
.dash-right-card > .content::-webkit-scrollbar-thumb {
  background: var(--bg-highlight) !important;
  border-radius: 10px !important;
}

.show90qus a {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  transition: all 0.2s ease !important;
}

.show90qus a:hover {
  background: oklch(from var(--bg-highlight) l c h / 0.04) !important;
  padding-left: 8px !important;
}

.show90qus a span {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: #1e1e1e !important;
  flex-grow: 1 !important;
}

.show90qus a i.fa-question {
  font-size: 18px !important;
  margin-right: 12px !important;
}

.show90qus a i.fa-angle-right {
  font-size: 16px !important;
  opacity: 0.6 !important;
  margin-left: 8px !important;
}

#ramalCardDashboard,
.card-dashboard-wrapper {
  width: 100% !important;
  max-width: 90vw !important;
  margin: 0 auto !important;
  padding-left: clamp(8px, 1.5vw, 30px) !important;
  padding-right: clamp(8px, 1.5vw, 30px) !important;
}

.card-dashboard-wrapper .card-style,
#ramalCardDashboard .card-style {
  width: 100% !important;
  max-width: 90vw !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.card-dashboard-wrapper #qus_text,
#ramalCardDashboard #qus_text {
  font-size: clamp(1.05rem, 1.6vw, 1.5rem) !important;
  line-height: 1.35 !important;
}

.card-dashboard-wrapper .max-width-600,
#ramalCardDashboard .max-width-600 {
  width: 100% !important;
  max-width: 90vw !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.card-dashboard-wrapper .btn-3d,
#ramalCardDashboard .btn-3d {
  padding-top: clamp(8px, 1.1vh, 16px) !important;
  padding-bottom: clamp(8px, 1.1vh, 16px) !important;
  font-size: clamp(0.72rem, 1.1vw, 1rem) !important;
}

.card-dashboard-wrapper .btn-3d i,
#ramalCardDashboard .btn-3d i {
  font-size: clamp(0.85rem, 1.2vw, 1.15rem) !important;
}

.shuffle-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 90vw !important;
  margin: 0 auto !important;
  padding: 10px 0 !important;
}

.shuffle-wrapper .card-stack {
  position: relative !important;
  width: clamp(140px, 18vw, 260px) !important;
  height: clamp(200px, 26vw, 370px) !important;
  max-width: none !important;
  margin: 0 auto !important;
}

.shuffle-wrapper .card-stack .card-item {
  width: 100% !important;
  height: 90% !important;
  border-radius: clamp(10px, 1.2vw, 20px) !important;
  background-size: cover !important;
  background-position: center center !important;
}

.grid-container {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: clamp(10px, 2.5vw, 45px) !important;
  width: 100% !important;
  max-width: 90vw !important;
  margin: clamp(15px, 3vh, 35px) auto !important;
  padding: 10px 0 !important;
}

.grid-container .card-stack {
  position: relative !important;
  width: clamp(75px, 13vw, 190px) !important;
  height: clamp(110px, 18.5vw, 270px) !important;
  flex-shrink: 0 !important;
}

.grid-container .card-stack .card-item {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: clamp(6px, 1vw, 16px) !important;
  background-size: cover !important;
  background-position: center center !important;
  box-shadow: none !important;
}

/*  Section Two Col Result Box */
.section-two-col {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: clamp(12px, 2.5vw, 35px) !important;
  max-width: 600px !important;
  margin: 20px auto !important;
  padding: 0 15px !important;
}

.section-two-col .image {
  width: clamp(115px, 17vw, 240px) !important;
  height: clamp(165px, 24vw, 340px) !important;
  flex-shrink: 0 !important;
}

.section-two-col .image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: clamp(8px, 1.2vw, 18px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15) !important;
}

.section-two-col .text {
  width: clamp(115px, 17vw, 240px) !important;
  height: clamp(165px, 24vw, 340px) !important;
  flex-shrink: 0 !important;
  padding: clamp(10px, 1.5vw, 20px) !important;
  border-radius: clamp(8px, 1.2vw, 18px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
}

.section-two-col .text p {
  color: #ffffff !important;
  font-size: clamp(0.85rem, 1.2vw, 1.15rem) !important;
  font-weight: 700 !important;
  margin-bottom: 0 !important;
  line-height: 1.4 !important;
}


.table-height-auto table th {
  font-size: clamp(11px, 1.2vw, 16px) !important;
  padding: 5px 8px !important;
  line-height: 1.1 !important;
}

.table-height-auto table td {
  font-size: clamp(10.5px, 1.1vw, 15px) !important;
  padding: 5px 8px !important;
  line-height: 1.1 !important;
}

@media (min-width: 992px) {
  .table-height-auto table {
    width: 100% !important;
    height: 100% !important;
    table-layout: fixed !important;
    line-height: clamp(1.5vh, 2.2vh, 2.8vh) !important;
  }

  .table-height-auto table th {
    font-size: clamp(10.5px, 1.9vh, 19px) !important;
    padding: clamp(2px, 0.3vh, 4px) clamp(4px, 0.4vw, 8px) !important;
  }

  .table-height-auto table th,
  .table-height-auto table td {
    padding: clamp(1.5px, 0.25vh, 3.5px) clamp(4px, 0.4vw, 8px) !important;
    font-size: clamp(10.5px, 2vh, 19px) !important;
    line-height: clamp(1.4vh, 2.3vh, 3.2vh) !important;
  }
}


/* ── Ashtakvarga Modal  ── */
#menu-ashtakvarga {
  width: 1100px !important;
  max-width: 95vw !important;
}

#menu-ashtakvarga .table-responsive {
  flex: 7 7 0% !important;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.02);
}

#menu-ashtakvarga .kundli-card {
  flex: 4 4 0% !important;
  min-width: 0;
  width: auto !important;
  max-width: 100%;
  border-radius: 10px !important;
  border: 1px solid var(--border-neutral, #e2e8f0) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
  background: var(--bg-neutral-card, #ffffff);
}

#menu-ashtakvarga .table th,
#menu-ashtakvarga .table td {
  padding: 10px 8px;
  white-space: nowrap;
}

#menu-ashtakvarga .table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

#menu-ashtakvarga .table tbody tr:hover {
  background-color: rgba(219, 68, 84, 0.05);
}

@media (max-width: 991.98px) {
  #menu-ashtakvarga .table-responsive,
  #menu-ashtakvarga .kundli-card {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Basic Details
   ══════════════════════════════════════════════════════════════════════ */

#basic-details-page .kundli-main-container {
  display: flex !important;
  gap: 8px !important;
  padding: 0 8px 8px 8px !important;
}

.bd-section-table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  border: 1px solid #e0e0e0 !important;
  border-radius: var(--radius-sm, 4px);
  overflow: hidden;
  background: #ffffff;
}

.bd-section-table th {
  background-color: var(--bg-highlight) !important;
  color: #ffffff !important;
  font-weight: 600;
  font-size: clamp(12.5px, 1.45vh, 16px) !important;
  padding: clamp(2px, 0.3vh, 5px) clamp(4px, 0.4vw, 8px) !important;
  line-height: 1.15 !important;
  border: none;
  text-align: left;
}

.bd-section-table td {
  padding: clamp(1px, 0.2vh, 3px) clamp(4px, 0.4vw, 8px) !important;
  font-size: clamp(11px, 1.75vh, 15.5px) !important;
  line-height: clamp(1.7vh, 2.2vh, 3vh) !important;
  vertical-align: middle;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  color: #333;
}

.bd-section-table td.bd-label {
  font-weight: 600;
  color: #222;
  white-space: nowrap;
}

.bd-section-table td.bd-value {
  font-weight: 500;
  color: #444;
}

.bd-section-table td.bd-value-highlight {
  font-weight: 600;
  color: var(--bs-highlight, #4a90d9);
}

.bd-section-table tr:last-child td {
  border-bottom: none !important;
}

/* Grid layout for the 4-column arrangement */
.bd-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr 1fr;
  gap: 8px;
  width: 100%;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden;
  padding: 0 4px 4px 4px;
}

.bd-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}

.bd-col .bd-section-table {
  flex: 0 0 auto;
}

.bd-col .bd-section-table.bd-flex-grow {
  flex: 1 1 0;
  min-height: 0;
}

@media (max-width: 991px) {
  .bd-grid {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
    overflow-y: auto;
  }
}



/* 
   Jaimini Page 
   */
@media (min-width: 992px) {
  .jamini-main-container {
    display: flex;
    gap: 10px;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }

  .jamini-left-col {
    flex: 0 0 70% !important;
    max-width: 70% !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .jamini-kundlis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }

  .jamini-kundlis-grid .kundli-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 6px !important;
  }

  .jamini-kundlis-grid .canvas-container {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .jamini-kundlis-grid .canvas-container img,
  .jamini-kundlis-grid .canvas-container canvas,
  .jamini-kundlis-grid .kundli-img {
    max-height: 100% !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    aspect-ratio: 1 / 1 !important;
  }

  .jamini-bottom-buttons {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 5px !important;
    width: 100%;
  }

  .jamini-right-col {
    flex: 0 0 29.5% !important;
    max-width: 29.5% !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .jamini-dasha-card {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .jamini-dasha-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
  }

  .jamini-time-tool {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
  }

  .jamini-time-tool .time-tool-wrapper .time-tool-card {
    flex: 0 0 42% !important;
    max-width: 42% !important;
    width: 42% !important;
  }

  .jamini-aspects-container {
    flex: 0 0 55% !important;
    max-width: 55% !important;
    width: 55% !important;
  }
}

@media (max-width: 991px) {
  .jamini-main-container {
    flex-direction: column;
    overflow-y: auto;
  }

  .jamini-left-col,
  .jamini-right-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .jamini-kundlis-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .jamini-bottom-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
}

.jamini-aspects-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(4px, 0.5vh, 8px) !important;
  border-radius: 5px;
  border: 1px solid var(--border-neutral, #e2e8f0) !important;
}

.jamini-aspect-table table th {
  background-color: var(--bg-highlight) !important;
  color: #ffffff !important;
  font-weight: 600;
  font-size: clamp(11px, 1vw, 16px) !important;
  padding: 6px 8px !important;
  line-height: 1.1 !important;
  border: none;
}
.jamini-aspect-table table td {
  padding: 5px 8px !important;
  font-size: var(--dasha-td-font, clamp(10.5px, 0.9vw, 15px)) !important;
  line-height: 1.1 !important;
  vertical-align: middle;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}


.overflow-y-auto {
  overflow-y: scroll !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--bg-highlight, #db4454)
    oklch(from var(--bg-highlight, #db4454) l c h / 0.15) !important;
}

.dasha-table th:first-child, .dasha-table td:first-child {
    /* width: clamp(100px, 12vw, 105px) !important; */
    width:30% !important
}

.kundli-date {
  display: inline-block !important;
  min-width: 80px !important;
width: clamp(92px, 6.4vw, 120px) !important;
}