/* index.php overrides: payment, pricing table, mobile. Keep in sync with main layout. */
/* Payment section: ensure on top and clickable when visible (fixes overlay blocking) */
#paymentSection:not(.hidden) {
  position: relative !important;
  z-index: 10001 !important;
  pointer-events: auto !important;
}
#paymentSection:not(.hidden) button,
#paymentSection:not(.hidden) a {
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* Mobile Pricing Table - Force horizontal scroll */
@media (max-width: 767px) {
  .pricing-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    width: 100%;
    max-width: 100vw;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  thead.bg-muted\/40.head-price {
    height: 150px;
  }
  .pricing-table-container table {
    min-width: 980px !important;
    width: 980px;
  }
  .pricing-table-container::-webkit-scrollbar {
    height: 6px;
  }
  .pricing-table-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
  }
  .pricing-table-container::-webkit-scrollbar-thumb {
    background: rgba(181, 81, 239, 0.5);
    border-radius: 3px;
  }
  .pricing-table-container::-webkit-scrollbar-thumb:hover {
    background: rgba(181, 81, 239, 0.7);
  }
  .mobile-scroll-indicator {
    display: block !important;
  }
  /* Sticky first column on mobile */
  .pricing-table-container th:first-child,
  .pricing-table-container td:first-child {
    position: sticky;
    left: 0;
    z-index: 20;
    background: rgba(28, 28, 30, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
  }
  .pricing-table-container thead th:first-child {
    background: rgba(37, 37, 40, 0.98);
  }
}
/* Feature comparison table - dark pricing section */
#pricing .feature-comparison-table { border-collapse: collapse; width: 100%; text-align: center; }
#pricing .feature-comparison-table th, #pricing .feature-comparison-table td { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); vertical-align: top; }
#pricing .feature-comparison-table thead th { font-weight: 600; color: rgba(255,255,255,0.95); background: rgba(181, 81, 239, 0.15); font-size: 1rem; }
#pricing .feature-comparison-table th.feature-col { text-align: left; min-width: 280px; width: 30%; background: rgba(181, 81, 239, 0.12); }
#pricing .feature-comparison-table .plan-name { font-weight: 700; font-size: 1rem; }
#pricing .feature-comparison-table .plan-price { color: #B581EF; font-size: 1.75rem; font-weight: 800; margin-top: 4px; display: block; }
#pricing .feature-comparison-table .plan-price-sub { color: rgba(255,255,255,0.7); font-size: 0.8rem; font-weight: 500; margin-top: 2px; display: block; }
#pricing .feature-comparison-table thead tr:nth-child(2) th,
#pricing .feature-comparison-table thead tr:nth-child(2) td { font-size: 0.9375rem; background: rgba(181, 81, 239, 0.08); }
#pricing .feature-comparison-table tbody td { color: rgba(255,255,255,0.85); font-size: 0.9375rem; }
#pricing .feature-comparison-table tbody tr:nth-child(odd) { background: rgba(181, 81, 239, 0.08); }
#pricing .feature-comparison-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.04); }
#pricing .feature-comparison-table .section-header { background: rgba(181, 81, 239, 0.2); color: #B581EF; font-weight: 700; font-size: 0.9375rem; text-align: left; padding-left: 16px; }
#pricing .feature-comparison-table .feature-name { text-align: left; padding-left: 24px; font-size: 0.9375rem; }
#pricing .feature-comparison-table .plan-col { min-width: 110px; }
#pricing .feature-comparison-table .check { color: #34d399; }
#pricing .feature-comparison-table .cross { color: rgba(248, 113, 113, 0.9); }
@media (max-width: 768px) {
  #pricing .feature-comparison-table th.feature-col { min-width: 200px; }
  #pricing .feature-comparison-table .plan-col { min-width: 72px; font-size: 0.9em; }
}
@media (min-width: 768px) {
  #pricing .pricing-desktop-only { display: block !important; }
  #pricing .pricing-mobile-stack { display: none !important; }
  #pricing .pricing-hide-on-desktop { display: none !important; }
}
@media (max-width: 767px) {
  #pricing .pricing-desktop-only { display: none !important; }
  #pricing .pricing-hide-on-mobile { display: none !important; }
  #pricing .pricing-mobile-stack { display: block !important; }
}
#pricing .pricing-mobile-features { margin: 0.75rem 0; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; overflow: hidden; }
#pricing .pricing-mobile-features summary { padding: 0.6rem 0.75rem; font-size: 0.875rem; font-weight: 600; color: rgba(255,255,255,0.95); background: rgba(255,255,255,0.06); cursor: pointer; list-style: none; }
#pricing .pricing-mobile-features summary::-webkit-details-marker { display: none; }
#pricing .pricing-mobile-features summary::after { content: ' ▼'; font-size: 0.7em; opacity: 0.8; }
#pricing .pricing-mobile-features[open] summary::after { content: ' ▲'; }
#pricing .pricing-mobile-features ul { margin: 0; padding: 0.75rem 1rem 1rem; list-style: none; font-size: 0.8125rem; color: rgba(255,255,255,0.85); line-height: 1.5; border-top: 1px solid rgba(255,255,255,0.08); }
#pricing .pricing-mobile-features li { padding: 0.2rem 0; }
#pricing .pricing-mobile-features .y { color: #34d399; }
#pricing .pricing-mobile-features .n { color: rgba(248,113,113,0.9); }
#pricing .pricing-mobile-features .val { color: rgba(255,255,255,0.9); }
#pricing .pricing-mobile-features li.mob-f-sec { font-weight: 700; color: #B581EF; margin-top: 0.5rem; padding-top: 0.35rem; }
#pricing .pricing-mobile-features li.mob-f-sec:first-child { margin-top: 0; }
#pricing .pricing-mobile-cards { display: flex; flex-direction: column; gap: 1rem; }
#pricing .pricing-mobile-card {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px;
  padding: 1.25rem 1.5rem; text-align: left;
}
#pricing .pricing-mobile-card-title { font-size: 1.25rem; font-weight: 700; color: #fff; margin: 0 0 0.25rem 0; }
#pricing .pricing-mobile-card-price { font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0 0 0.5rem 0; }
#pricing .pricing-mobile-card-desc { font-size: 0.875rem; color: rgba(255,255,255,0.75); margin: 0 0 1rem 0; line-height: 1.4; }
#pricing .pricing-mobile-card-btn {
  display: inline-block; padding: 0.75rem 1.25rem; border-radius: 10px; font-weight: 600; font-size: 0.9375rem;
  background: #E5E7EB; color: #111; border: none; cursor: pointer; text-decoration: none; text-align: center;
}
#pricing .pricing-mobile-card-btn-link { width: 100%; box-sizing: border-box; }
#pricing .pricing-desktop-cta {
  padding: 0.6rem 1rem; border-radius: 8px; font-weight: 600; font-size: 0.9rem;
  background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.25);
  cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
#pricing .pricing-desktop-cta:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); color: #fff; }
@media (min-width: 768px) {
  .mobile-scroll-indicator {
    display: none !important;
  }
  .pricing-table-container {
    overflow-x: visible !important;
    margin-left: 0;
    margin-right: 0;
  }
  .pricing-table-container table {
    min-width: auto !important;
    width: 100% !important;
  }
}
#pricing .pricing-grid-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  #pricing .pricing-grid-cols { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (min-width: 900px) {
  #pricing .pricing-grid-cols { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
@media (min-width: 1200px) {
  #pricing .pricing-grid-cols { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
}

/* Logged-in header: logo in nav (logo only for logged-in users) */
#siteHeader .site-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
#siteHeader .site-header-logo-link {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}
#siteHeader .site-header-logo {
  height: 36px;
  width: auto;
  display: block;
  object-fit: contain;
}
@media (max-width: 767px) {
  #siteHeader .site-header-logo { height: 32px; }
}