/* ==========================================
   MOBILE RESPONSIVE STYLES
   BullQuotient - Complete Mobile CSS
   ========================================== */

/* ==========================================
   MOBILE HEADER (max-width: 1024px)
   ========================================== */

@media (max-width: 1024px) {
    .header-container {
        padding: 1rem;
        gap: 1rem;
    }

    .nav-links {
        gap: 0.25rem;
    }

    .nav-link {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .header-search {
        max-width: 350px;
    }
}
@media (max-width: 768px) {
    .feature-bg-overlay {
        height: 130%;
    }

    .feature-bg-image {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }

    /* Header Mobile */
    .header-container {
        padding: 0.75rem 1rem;
        flex-wrap: wrap;
    }

    .logo-section {
        order: 1;
    }

    .logo-icon {
        width: 36px;
        height: 36px;
    }

    .logo-text {
        font-size: 1.25rem;
    }

    .mobile-menu-toggle {
        display: flex;
        order: 3;
        margin-left: auto;
    }

    .header-search {
        order: 4;
        width: 100%;
        max-width: 100%;
        margin-top: 1rem;
    }

    #stockSearch {
        padding: 0.625rem 1rem 0.625rem 2.5rem;
        font-size: 0.875rem;
    }

    .search-icon {
        width: 18px;
        height: 18px;
    }

    .nav-links {
        display: none;
        width: 100%;
        order: 5;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(102, 126, 234, 0.2);
    }

    .nav-links.active {
        display: flex;
    }

    .nav-link {
        width: 100%;
        text-align: center;
        padding: 1rem;
    }

    .user-actions {
        order: 2;
        gap: 0.5rem;
    }

    #themeToggle {
        width: 36px;
        height: 36px;
    }

    #userProfile {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    .user-avatar {
        width: 28px;
        height: 28px;
    }
}

/* ==========================================
   FOOTER MOBILE
   ========================================== */

@media (max-width: 768px) {
    footer {
        padding: 1.5rem 0 1.5rem 0;
    }

    .footer-container {
        padding: 0 1rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .footer-section h3 {
        font-size: 1.125rem;
    }

    .social-links {
        justify-content: center;
    }

    .footer-bottom {
        font-size: 0.75rem;
    }
}


/* ==========================================
   LANDING PAGE MOBILE (index.html)
   ========================================== */

@media (max-width: 768px) {
    .landing-hero {
        min-height: auto;
        padding: 4rem 0 3rem 0;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 1rem;
    }

    .hero-text h1 {
        font-size: 2.5rem;
        text-align: center;
    }

    .hero-text p {
        font-size: 1.125rem;
        text-align: center;
    }

    .hero-cta {
        justify-content: center;
    }

    .btn-primary,
    .btn-secondary {
        padding: 0.875rem 1.75rem;
        font-size: 1rem;
    }

    .hero-image {
        order: -1;
    }

    .feature-section {
        padding: 3rem 0;
    }

    .section-header {
        margin-bottom: 2rem;
        padding: 0 1rem;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    .section-header p {
        font-size: 1rem;
    }

    .feature-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }

    .feature-card {
        padding: 2rem;
    }

    .feature-icon {
        width: 56px;
        height: 56px;
    }

    .feature-card h3 {
        font-size: 1.25rem;
    }
}

/* ==========================================
   DASHBOARD MOBILE
   ========================================== */

@media (max-width: 768px) {
    .dashboard-container {
        padding: 1rem;
    }

    .dashboard-welcome {
        padding: 2rem 1.5rem;
        margin-bottom: 2rem;
    }

    .dashboard-welcome h1 {
        font-size: 2rem;
    }

    .dashboard-welcome p {
        font-size: 1rem;
    }

    .dashboard-section {
        margin-bottom: 2rem;
    }

    .section-title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .quick-actions-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .quick-action-card {
        padding: 1.5rem;
    }

    .quick-action-icon {
        width: 56px;
        height: 56px;
        min-width: 56px;
    }

    .quick-action-icon svg {
        width: 28px;
        height: 28px;
    }

    .quick-action-title {
        font-size: 1.25rem;
    }

    .quick-action-description {
        font-size: 0.875rem;
    }

    .quick-action-arrow {
        width: 28px;
        height: 28px;
    }
    /* Quick actions: 2 columns side-by-side on mobile */
  #quickActions .quick-actions-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem !important;
    justify-content: space-between !important;
    align-items: stretch !important;
  }

  /* Shrink quick action cards for 2-across */
  .quick-action-card {
    flex: 1 !important;
    max-width: calc(50% - 0.5rem) !important;
    padding: 1.25rem !important;
    margin: 0 !important;
  }

  /* Adjust text sizing */
  .quick-action-title {
    font-size: 1rem !important;
  }

  .quick-action-description {
    font-size: 0.75rem !important;
  }

  /* Icon sizing */
  .quick-action-icon {
    width: 48px !important;
    height: 48px !important;
  }

  .quick-action-icon svg {
    width: 24px !important;
    height: 24px !important;
  }

  /* Arrow sizing */
  .quick-action-arrow {
    width: 24px !important;
    height: 24px !important;
  }

  .quick-action-arrow svg {
    width: 16px !important;
    height: 16px !important;
  }
  /* FORCE 3-column grid for market cap cards on mobile */
  .hero-market-cap .grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.75rem !important;
    justify-items: center !important;
    padding: 0 1rem !important;
  }

  /* Shrink each market-cap-card for mobile 3-across */
  .hero-market-cap .market-cap-card {
    max-width: 105px !important;
    padding: 0.875rem !important;
    margin: 0 !important;
  }

  /* Text sizing for compact mobile cards */
  .hero-market-cap .market-cap-card h3 {
    font-size: 1rem !important;
    line-height: 1.1 !important;
  }

  .hero-market-cap .market-cap-card p {
    font-size: 0.6875rem !important;
  }

  /* Button sizing */
  .hero-market-cap .market-cap-card button {
    font-size: 0.6875rem !important;
    padding: 0.375rem 0.625rem !important;
  }

  /* Icon sizing */
  .hero-market-cap .market-cap-card svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
}

/* ==========================================
   SECTOR PAGE MOBILE (main-sector.html)
   ========================================== */

@media (max-width: 768px) {
    .sectors-main-container {
        padding-bottom: 2rem;
    }

    .sectors-hero {
        padding: 2rem 1rem;
    }

    .sectors-title {
        font-size: 2rem;
    }

    .sectors-subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .sectors-search-wrapper {
        padding: 0 0.5rem;
    }

    .sectors-search-input {
        padding: 1rem 3.5rem 1rem 3rem;
        font-size: 1rem;
    }

    .sectors-search-icon {
        left: 1rem;
        width: 20px;
        height: 20px;
    }

    .sectors-clear-btn {
        right: 0.5rem;
        width: 32px;
        height: 32px;
    }

    .sectors-content {
        padding: 0 1rem;
    }

    .sectors-stats {
        margin-bottom: 1.5rem;
    }

    .sectors-count {
        font-size: 1rem;
        padding: 0.625rem 1.25rem;
    }

    .sectors-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .sector-card {
        padding: 1.5rem;
    }

    .sector-icon {
        width: 56px;
        height: 56px;
    }

    .sector-icon svg {
        width: 28px;
        height: 28px;
    }

    .sector-name {
        font-size: 1.125rem;
    }

    .no-results {
        padding: 3rem 1rem;
    }

    .no-results-icon {
        width: 64px;
        height: 64px;
    }

    .no-results-title {
        font-size: 1.5rem;
    }

    .no-results-text {
        font-size: 1rem;
    }
}

/* ==========================================
   STOCK DETAIL PAGE MOBILE
   ========================================== */

@media (max-width: 768px) {
    .stock-detail-container {
        padding: 1rem;
    }

    .stock-header {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .stock-title {
        font-size: 1.75rem;
    }

    .stock-symbol {
        font-size: 1rem;
    }

    .stock-metrics {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 1rem;
    }

    .metric-card {
        padding: 1rem;
    }

    .metric-value {
        font-size: 1.5rem;
    }

    .fundamentals-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 1rem;
    }

    .fundamental-card {
        padding: 1.5rem;
    }

    .fundamental-card h3 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
}

/* ==========================================
   COMPARE STOCKS MOBILE
   ========================================== */

@media (max-width: 768px) {
    .compare-container {
        padding: 1rem;
    }

    .compare-header {
        margin-bottom: 2rem;
    }

    .compare-header h1 {
        font-size: 2rem;
    }

    .compare-selectors {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .stock-selector {
        padding: 1.5rem;
    }

    .stock-selector h3 {
        font-size: 1.25rem;
    }

    .compare-table {
        padding: 1rem;
        overflow-x: auto;
    }

    .compare-table th,
    .compare-table td {
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
    }
}

/* ==========================================
   ADMIN PAGE MOBILE
   ========================================== */

@media (max-width: 768px) {
    .admin-container {
        padding: 1rem;
    }

    .admin-header {
        padding: 2rem 1.5rem;
        margin-bottom: 2rem;
    }

    .admin-header h1 {
        font-size: 2rem;
    }

    .admin-sections {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .admin-section {
        padding: 1.5rem;
    }

    .admin-section h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 0.875rem;
    }

    .admin-btn {
        padding: 0.875rem 1.75rem;
        font-size: 0.875rem;
    }
}

/* ==========================================
   SMALL MOBILE (max-width: 480px)
   ========================================== */

@media (max-width: 480px) {
    body {
        padding-top: 65px;
    }

    .header-container {
        padding: 0.5rem 0.75rem;
    }

    .logo-icon {
        width: 32px;
        height: 32px;
    }

    .logo-text {
        font-size: 1.125rem;
    }

    .hero-text h1 {
        font-size: 2rem;
    }

    .hero-text p {
        font-size: 1rem;
    }

    .btn-primary,
    .btn-secondary {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
        width: 100%;
    }

    .section-header h2 {
        font-size: 1.75rem;
    }

    .dashboard-welcome h1 {
        font-size: 1.75rem;
    }

    .quick-action-card {
        padding: 1.25rem;
        flex-direction: column;
        text-align: center;
    }

    .quick-action-arrow {
        transform: rotate(90deg);
    }

    .quick-action-card:hover .quick-action-arrow {
        transform: rotate(90deg) translateX(8px);
    }

    .sectors-title {
        font-size: 1.75rem;
    }

    .sectors-search-input {
        padding: 0.875rem 3rem 0.875rem 2.75rem;
        font-size: 0.875rem;
    }

    .sector-card {
        padding: 1.25rem;
    }

    .stock-title {
        font-size: 1.5rem;
    }

    .metric-value {
        font-size: 1.25rem;
    }

    .compare-header h1 {
        font-size: 1.75rem;
    }

    .admin-header h1 {
        font-size: 1.75rem;
    }
}

/* ==========================================
   LANDSCAPE MODE
   ========================================== */

@media (max-width: 768px) and (orientation: landscape) {
    body {
        padding-top: 60px;
    }

    .landing-hero {
        min-height: auto;
        padding: 2rem 0;
    }

    .hero-content {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .hero-text h1 {
        font-size: 2rem;
    }

    .dashboard-welcome {
        padding: 1.5rem;
    }

    .sectors-hero {
        padding: 1.5rem 1rem;
    }
}

/* ==========================================
   TABLET (768px - 1024px)
   ========================================== */

@media (min-width: 769px) and (max-width: 1024px) {
    .hero-content {
        gap: 3rem;
    }

    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-actions-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .sectors-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stock-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .fundamentals-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .compare-selectors {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-sections {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================
   PRINT STYLES
   ========================================== */

@media print {
    header,
    footer,
    .mobile-menu-toggle,
    .user-actions,
    .nav-links {
        display: none;
    }

    body {
        padding-top: 0;
    }

    * {
        color: #000 !important;
        background: #fff !important;
        box-shadow: none !important;
    }
}

/* ==========================================
   HIGH RESOLUTION DISPLAYS
   ========================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}
/* Financial Charts Mobile Responsive */
@media (max-width: 640px) {
    .financial-charts-section {
        padding: 1rem 0;
    }
    
    .financial-charts-section h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .charts-grid {
        gap: 1rem;
    }
    
    .chart-card {
        padding: 1rem;
    }
    
    .chart-card h3 {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
}
/* ================================================
   INDEX.HTML MOBILE RESPONSIVE STYLES
   ================================================ */

@media (max-width: 768px) {
    
    /* ========== HEADER - CENTER LOGO & NAME ========== */
    .new-landing-header {
        padding: 10px 20px !important;
    }
    
    .new-header-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
    }
    
    .new-logo-section {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 0 !important;
    }
    
    .new-logo img {
        width: 45px !important;
        height: 45px !important;
    }
    
    .new-brand-name {
        font-size: 20px !important;
    }
    
    
    /* ========== HERO SECTION - TIGHT SPACING ========== */
    .new-hero-section {
        padding: 10px 20px 40px 20px !important;
    }
    
    .new-hero-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        align-items: center !important;
    }
    
    /* login2.png Image - NO TOP MARGIN */
    .new-hero-image {
        display: block !important;
        width: 100% !important;
        max-width: 280px !important;
        order: 1 !important;
        margin: 0 auto !important;
    }
    
    .new-hero-logo {
        width: 100% !important;
    }
    
    .new-hero-logo img {
        width: 100% !important;
        height: auto !important;
        border-radius: 12px !important;
    }
    
    /* Text - CENTERED */
    .new-hero-text {
        width: 100% !important;
        order: 2 !important;
        text-align: center !important;
        padding: 0 15px !important;
    }
    
    .new-hero-title {
        font-size: 22px !important;
        line-height: 1.3 !important;
        margin: 15px 0 10px 0 !important;
        font-weight: 600 !important;
    }
    
    .new-hero-subtitle {
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: #666 !important;
        margin: 0 0 20px 0 !important;
    }
    
    /* Hide feature icons */
    .new-hero-features {
        display: none !important;
    }
    
    /* Google Sign-in Button - ADD BOTTOM SPACING */
    .mobile-only {
        padding: 20px 0 30px 0 !important;
        text-align: center !important;
    }
    
    .new-feature-item {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 12px !important;
    }
    
    .new-feature-icon {
        font-size: 16px !important;
    }
    
    
    /* ========== FEATURE SECTIONS ========== */
    .new-feature-section {
        padding: 60px 20px !important;
    }
    
    .new-feature-container {
        padding: 0 !important;
    }
    
    .new-feature-content {
        flex-direction: column !important;
        gap: 30px !important;
    }
    
    /* Always show content in mobile order: image first, then text */
    .new-feature-reverse .new-feature-content {
        flex-direction: column !important;
    }
    
    .new-feature-image {
        width: 100% !important;
        order: 1 !important;
        margin-bottom: 25px !important;
    }
    
    .new-feature-visual {
        width: 100% !important;
        max-width: 350px !important;
        margin: 0 auto !important;
    }
    
    .new-feature-visual img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }
    
    .new-feature-text {
        width: 100% !important;
        order: 2 !important;
        text-align: center !important;
        padding: 0 10px !important;
    }
    
    .new-feature-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }
    
    .new-feature-description {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
    }
    
    .new-feature-highlights {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: center !important;
    }
    
    .new-highlight-item {
        font-size: 14px !important;
        text-align: left !important;
        width: 100% !important;
        max-width: 300px !important;
    }
    
    
    /* ========== FOOTER ========== */
    .landing-footer {
        padding: 40px 20px !important;
    }
    
    .landing-footer-container {
        padding: 0 !important;
    }
    
    .landing-footer-content {
        flex-direction: column !important;
        gap: 30px !important;
        text-align: center !important;
    }
    
    .landing-footer-brand,
    .landing-footer-links,
    .landing-footer-contact {
        width: 100% !important;
        text-align: center !important;
    }
    
    .landing-footer-logo {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 15px !important;
    }
    
    .landing-footer-logo img {
        width: 50px !important;
        height: 50px !important;
    }
    
    .landing-footer-logo h3 {
        font-size: 20px !important;
    }
    
    .landing-footer-description {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    .landing-footer-links ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: center !important;
    }
    
    .landing-contact-info {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: center !important;
    }
    
    .landing-social-links {
        justify-content: center !important;
        gap: 15px !important;
        margin-top: 15px !important;
    }
    @media (max-width: 768px) {
    
    /* ========== FOOTER - CENTER CONTACT INFO ========== */
    
    .landing-contact-info {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .landing-contact-item {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
    }
    
    .landing-contact-item svg {
        flex-shrink: 0 !important;
    }
    
    .landing-contact-item span {
        text-align: center !important;
    }
}

    
    /* ========== MODALS ========== */
    .fixed.inset-0 > div {
        margin: 20px !important;
        max-width: calc(100vw - 40px) !important;
    }
    
    .fixed.inset-0 .p-8 {
        padding: 20px !important;
    }
    
    .fixed.inset-0 h2 {
        font-size: 22px !important;
    }
    
    .fixed.inset-0 .flex.justify-center.gap-8 {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .fixed.inset-0 .grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    
    /* ========== GENERAL FIXES ========== */
    body {
        overflow-x: hidden !important;
    }

    
    html, body {
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    section {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    section + section {
        margin-top: 0 !important;
    }
}


/* ================================================
   EXTRA SMALL DEVICES (< 480px) - Stack Vertically
   ================================================ */

@media (max-width: 480px) {
    
    /* Stack hero content vertically on very small screens */
    .new-hero-content {
        flex-direction: column !important;
        gap: 25px !important;
    }
    
    .new-hero-image {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    
    .new-hero-text {
        width: 100% !important;
        text-align: center !important;
    }
    
    .new-hero-title {
        font-size: 24px !important;
    }
    
    .new-hero-subtitle {
        font-size: 14px !important;
    }
    
    .new-feature-title {
        font-size: 20px !important;
    }
    
    .new-feature-description {
        font-size: 14px !important;
    }
    
    .new-feature-visual {
        max-width: 300px !important;
    }
    
    .landing-footer-brand,
    .landing-footer-links,
    .landing-footer-contact {
        padding: 0 10px !important;
    }
}


/* Hide mobile elements on desktop */
@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}
/* ================================================
   HEADER.HTML MOBILE RESPONSIVE
   ================================================ */

@media (max-width: 768px) {
    
    
    /* Reduce header padding - EQUAL ON BOTH SIDES */
    header {
        padding: 8px 10px !important;
    }
    
    /* Remove any margin from header */
    header.main-header,
    .header-container,
    .main-header {
        margin: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Logo section - minimal left space */
    .header-left,
    .logo-section {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    /* User avatar - minimal right space */
    .header-right,
    .user-section {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
    
    .user-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
        margin: 0 !important;
    }
    
    /* First row: Logo on left, Avatar on right */
    .header-container {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 !important;
    }
    
    /* Create a flex row for logo and avatar */
    .header-container > :first-child {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    .search-input,
    input[type="text"].search {
        width: 100% !important;
        font-size: 14px !important;
        padding: 10px 40px 10px 15px !important;
    }
    
    /* Search suggestions dropdown */
    .suggestions-dropdown,
    #suggestions {
        width: 100% !important;
        max-height: 300px !important;
        overflow-y: auto !important;
    }
    
    /* User profile section */
    .header-right,
    .user-section {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .user-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
    
    /* Stack header elements vertically */
    .header-container {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }
    
    /* Remove body top margin/padding */
    body {
        margin: 0 !important;
        padding: 0 !important;
    }
/* Red circle button with X - TARGET THE CORRECT CLASSES */
   /* Red circle button - SIZE */
    #clearStockSearch,
    .stock-clear-btn {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }
    
    /* HIDE when has .hidden class */
    #clearStockSearch.hidden,
    .stock-clear-btn.hidden {
        display: none !important;
    }
    
    /* X icon inside */
    #clearStockSearch svg,
    .stock-clear-btn svg {
        width: 12px !important;
        height: 12px !important;
    }
    
}
/* ================================================
   DASHBOARD.HTML MOBILE RESPONSIVE
   ================================================ */

@media (max-width: 768px) {
    
    /* ========== MARKET INDICES - 2x2 GRID ========== */
    .market-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    
    .market-card {
        padding: 12px !important;
    }
    
    .market-card h3 {
        font-size: 11px !important;
    }
    
    .market-card .price {
        font-size: 16px !important;
    }
    
    .market-card .change {
        font-size: 11px !important;
    }
    
    
    /* ========== QUICK ACTION ARROWS - RIGHT ARROWS ========== */
    .quick-action-arrow {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Change downward arrow to right arrow */
    .quick-action-arrow svg {
        transform: rotate(-90deg) !important;
    }
    
    /* Alternative: Replace the SVG path entirely */
    .quick-action-card .quick-action-arrow path {
        d: path("M13 7l5 5m0 0l-5 5m5-5H6") !important;
    }
    
    /* Quick action cards responsive */
    .quick-actions-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
     /* Reduce spacing between Featured Recommendations and Explore by Sector */
    .featured-recommendations,
    #featured-recommendations,
    .recommendations-section {
        margin-bottom: 20px !important;
        padding-bottom: 20px !important;
    }
    
   .quick-actions-section,
    #quick-actions {
        padding: 20px 15px !important;
        width: 100% !important;
    }
    /* Quick action cards - BIGGER SIZE */
    .quick-action-card {
        padding: 20px !important;
        min-height: 100px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .quick-action-title {
        font-size: 18px !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
    }
    
    .quick-action-desc {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    .quick-action-arrow {
        width: 36px !important;
        height: 36px !important;
    }
    
    .quick-action-arrow svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Reduce overall section spacing on mobile */
    section {
        padding: 0px 15px !important;
    }
    
    section + section {
        margin-top: 0px !important;
    }
}
/* ================================================
   STOCKDATA1.HTML MOBILE RESPONSIVE
   ================================================ */

@media (max-width: 768px) {
    
    /* ========== GENERAL LAYOUT ========== */
    main[class*="max-w"] {
        padding: 16px 10px !important;
    }
    
    .mb-16 {
        margin-bottom: 2rem !important;
    }
    
    .section-header {
        font-size: 20px !important;
        margin-bottom: 16px !important;
    }
    
    #stockTitle {
        font-size: 24px !important;
    }
    
  /* Mobile Price Wrapper - Compact Container */
    .mobile-price-wrapper {
        width: 100% !important;
        max-width: 92% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* Grid with compact spacing */
    #priceSectionMobile {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* Override desktop fixed 250x160 size for mobile */
    #priceSectionMobile .price-card,
    .dark #priceSectionMobile .price-card {
        width: 100% !important;
        min-width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 95px !important;
        max-height: 95px !important;
    }

    #priceSectionMobile .stock-card {
        padding: 6px 4px !important;
        min-height: 95px !important;
       
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    #priceSectionMobile .price-icon {
        font-size: 14px !important;
        margin-bottom: 2px !important;
        line-height: 1 !important;
    }

    #priceSectionMobile .text-xs {
        font-size: 8px !important;
        margin-bottom: 1px !important;
        line-height: 1.1 !important;
    }

    #priceSectionMobile .text-sm {
        font-size: 10px !important;
        line-height: 1.1 !important;
        word-break: break-word !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* ✅ Fix Market Overview skeleton visibility on mobile */
#priceSectionMobile .sector-value,
#priceSectionMobile .current-price-value,
#priceSectionMobile .high-value,
#priceSectionMobile .low-value {
    min-height: 20px;
    width: 100%;
    display: flex;
    align-items: center;
}
#priceSectionMobile .skeleton-value-loader {
    margin: 0 auto;
}

    /* ========== FUNDAMENTALS GRID ========== */
    .fundamentals-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    
    .fundamentals-grid .stock-card {
        padding: 10px !important;
        min-height: 85px !important;
    }
    
    .fundamentals-grid .text-sm {
        font-size: 9px !important;
    }
    
    .fundamentals-grid .text-2xl {
        font-size: 12px !important;
    }
    
    .metric-icon {
        width: 26px !important;
        height: 26px !important;
    }
    
    
    /* ========== CHARTS ========== */
    .charts-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .chart-card {
        padding: 12px !important;
    }
    
    .chart-card h3 {
        font-size: 16px !important;
    }
    
    .chart-wrapper canvas {
        max-height: 220px !important;
    }
    
    
    /* ========== PIE CHART & SHAREHOLDING ========== */
    .shareholding-section {
        padding: 16px 10px !important;
    }
    
/* Shareholding details container - equal grid containers */
#shareholding-details {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.5rem !important;
  width: 100% !important;
}


  /* Shareholding detail cards - compact grid layout */
  .shareholding-detail-card {
    flex-direction: column !important;
    padding: 0.5rem !important;
    gap: 0.25rem !important;
    text-align: center !important;
    align-items: center !important;
  }

  /* Color indicator - centered */
  .shareholding-detail-card > div:first-child {
    margin: 0 auto 0.25rem !important;
  }

  /* Content wrapper */
  .shareholding-detail-card > div:last-child {
    width: 100% !important;
  }

  /* Shareholding labels - compact */
  .shareholding-label {
    font-size: 0.6875rem !important; /* 11px */
    line-height: 1.2;
    font-weight: 600 !important;
    text-align: center !important;
    display: block !important;
  }

  /* Remove justify-between on mobile */
  .shareholding-detail-card .flex.items-center.justify-between {
    display: block !important;
  }

  /* Shareholding percentage values - compact but visible */
  .shareholding-value {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.2;
    font-weight: 700 !important;
    text-align: center !important;
    display: block !important;
    margin: 0.125rem 0 !important;
  }

  /* Hide descriptions on mobile for compact grid */
  .shareholding-description {
    display: none !important;
  }

  /* Ensure chart and details stack vertically on mobile */
  #shareholding-container .flex.flex-col.md\\:flex-row {
    flex-direction: column !important;
  }
    
    .stakeholder-legend,
    .shareholding-legend {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
    
    .legend-item,
    .stakeholder-row {
        display: flex !important;
        justify-content: space-between !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
        background: rgba(0,0,0,0.02) !important;
        border-radius: 4px !important;
    }
    
    .legend-item strong,
    .stakeholder-name {
        font-weight: 600 !important;
    }
    
    .legend-item span,
    .stakeholder-percentage {
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
    
    
    /* ========== FUNDAMENTALS INFO BUTTON ========== */
    .fundamentals-info-btn {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
}
/* ========================================
   EXTRA SMALL SCREENS (< 400px)
   ======================================== */
@media (max-width: 400px) {
  /* HEADER - PREVENT OVERFLOW */
  header {
    padding: 8px 8px !important; /* Reduce from 10px to 8px */
  }
  
  .header-container,
  .main-header {
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 6px !important;
  }
  
  /* LOGO SECTION - MOVE LEFT & MAKE BIGGER */
  .header-left,
  .logo-section {
    margin-left: 0 !important;
    padding-left: 0 !important;
    flex-shrink: 0;
  }
  
  .new-logo img,
  .logo-icon {
    width: 40px !important; /* Increase from 36px */
    height: 40px !important;
  }
  
  .new-brand-name,
  .logo-text {
    font-size: 1.35rem !important; /* Increase from 1.125rem (18px to 21.6px) */
    font-weight: 600 !important;
    white-space: nowrap;
  }
  
  /* USER AVATAR - FIX OVERFLOW */
  .header-right,
  .user-section {
    margin-right: 0 !important;
    padding-right: 0 !important;
    flex-shrink: 0;
  }
  
  .user-avatar,
  #userProfile {
    width: 32px !important; /* Slightly smaller */
    height: 32px !important;
    min-width: 32px !important;
    font-size: 13px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* THEME TOGGLE - COMPACT */
  #themeToggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
  }
  
  /* ENSURE TOP ROW STAYS IN BOUNDS */
  .header-container > div:first-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  
  /* SEARCH BAR - FULL WIDTH */
  .header-search,
  .search-wrapper {
    width: 100% !important;
    margin-top: 8px !important;
  }
  
  #stockSearch {
    padding: 8px 36px 8px 12px !important;
    font-size: 13px !important;
  }
}

/* ========================================
   VERY SMALL SCREENS (< 360px)
   ======================================== */
@media (max-width: 360px) {
  /* FURTHER REDUCE FOR SMALLEST DEVICES */
  header {
    padding: 6px 6px !important;
  }
  
  .header-container {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  
  .new-logo img,
  .logo-icon {
    width: 36px !important;
    height: 36px !important;
  }
  
  .new-brand-name,
  .logo-text {
    font-size: 1.2rem !important; /* ~19px */
  }
  
  .user-avatar,
  #userProfile {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 12px !important;
  }
  
  #themeToggle {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }
}
/* ========================================
   MOBILE HEADER - COMPREHENSIVE FIX
   All devices < 768px
   ======================================== */

@media (max-width: 768px) {
  /* HEADER BASE - Prevent overflow */
  header {
    overflow-x: hidden !important;
  }
  
  header > div.max-w-7xl {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  
  /* MAIN FLEX CONTAINER - Reduce gap */
  header .flex.items-center.justify-between {
    gap: 8px !important;
  }
  
  /* LOGO SECTION - Compact */
  .logo-container-header {
    padding: 4px !important;
  }
  
  .logo-container-header img {
    width: 36px !important;
    height: 36px !important;
  }
  
  /* BRAND TEXT - Bigger & Better */
  header .block.sm\:hidden h1 {
    font-size: 18x !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
  }
  
  /* SEARCH BAR - Flexible width */
  header .flex-1.max-w-\[150px\] {
    max-width: 140px !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
    flex-shrink: 1 !important;
  }
  
  header input[id="search-input"] {
    padding: 8px 8px 8px 32px !important;
    font-size: 13px !important;
  }
  
  header .absolute svg {
    width: 16px !important;
    height: 16px !important;
    left: 8px !important;
  }
  
  #search-btn-mobile {
    padding: 8px 12px !important;
  }
  
  #search-btn-mobile svg {
    width: 16px !important;
    height: 16px !important;
  }
  
  /* USER ACTIONS - Prevent overflow */
  header .flex.items-center.space-x-2 {
    gap: 8px !important;
    flex-shrink: 0 !important;
    margin-left: 0 !important;
  }
  
  /* USER INITIALS - Fixed size */
  #mobile-user-initials {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    margin-left: 0 !important;
  }
}

/* ========================================
   SMALL PHONES (< 400px) - Extra Compact
   ======================================== */
@media (max-width: 400px) {
  header > div.max-w-7xl {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  
  header .flex.items-center.justify-between {
    gap: 4px !important;
  }
  
  /* LOGO - Smaller */
  .logo-container-header {
    padding: 2px !important;
  }
  
  .logo-container-header img {
    width: 32px !important;
    height: 32px !important;
  }
  
  /* BRAND TEXT - Slightly smaller but still prominent */
  header .block.sm\:hidden h1 {
    font-size: 16px !important;
    font-weight: 700 !important;
  }
  
  /* SEARCH BAR - More compact */
  header .flex-1.max-w-\[150px\] {
    max-width: 110px !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  
  header input[id="search-input"] {
    padding: 6px 6px 6px 28px !important;
    font-size: 12px !important;
  }
  
  header .absolute svg {
    width: 14px !important;
    height: 14px !important;
    left: 6px !important;
  }
  
  #search-btn-mobile {
    padding: 6px 10px !important;
  }
  
  #search-btn-mobile svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* USER INITIALS - Compact */
  #mobile-user-initials {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 13px !important;
  }
}

/* ========================================
   VERY SMALL PHONES (< 360px)
   ======================================== */
@media (max-width: 360px) {
  header > div.max-w-7xl {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  
  header .flex.items-center.justify-between {
    gap: 3px !important;
  }
  
  /* LOGO - Minimum size */
  .logo-container-header img {
    width: 28px !important;
    height: 28px !important;
  }
  
  /* BRAND TEXT - Compact */
  header .block.sm\:hidden h1 {
    font-size: 14px !important;
  }
  
  /* SEARCH BAR - Minimal */
  header .flex-1.max-w-\[150px\] {
    max-width: 90px !important;
    margin-left: 2px !important;
    margin-right: 2px !important;
  }
  
  header input[id="search-input"] {
    padding: 5px 4px 5px 24px !important;
    font-size: 11px !important;
  }
  
  header .absolute svg {
    width: 12px !important;
    height: 12px !important;
    left: 5px !important;
  }
  
  #search-btn-mobile {
    padding: 5px 8px !important;
  }
  
  #search-btn-mobile svg {
    width: 12px !important;
    height: 12px !important;
  }
  
  /* USER INITIALS - Minimum */
  #mobile-user-initials {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 11px !important;
  }
}

/* ========================================
   DROPDOWN MENU - Mobile Optimized
   ======================================== */
@media (max-width: 768px) {
  #mobile-dropdown-menu {
    right: 8px !important;
    left: auto !important;
    margin-top: 8px !important;
    min-width: 220px !important;
    max-width: calc(100vw - 16px) !important;
  }
}

@media (max-width: 400px) {
  #mobile-dropdown-menu {
    right: 6px !important;
    min-width: 200px !important;
    max-width: calc(100vw - 12px) !important;
  }
  
  #mobile-dropdown-menu .px-4 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  #mobile-dropdown-menu button {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 14px !important;
  }
}
/* About Us Modal - Mobile Bottom Padding Fix */
@media (max-width: 768px) {
  /* Reduce modal height to add breathing room */
  #aboutUsModal > div {
    max-height: 80vh !important;
    margin: 2rem 1rem !important;
  }
  
  /* Add extra bottom padding to content */
  #aboutUsModal .p-6 {
    padding-bottom: 4rem !important;
  }
  
  /* Ensure scrollable area has padding at bottom */
  #aboutUsModal > div > div {
    padding-bottom: 3rem !important;
  }
}
/* Privacy Policy & Terms of Use Modal - Mobile Font Size Reduction */
@media (max-width: 768px) {
  /* Title/Heading */
  #privacyPolicyModal h2,
  #termsOfUseModal h2 {
    font-size: 1.125rem !important; /* 18px - smaller title */
  }
  
  /* Section Headings (h3) */
  #privacyPolicyModal h3,
  #termsOfUseModal h3 {
    font-size: 0.9375rem !important; /* 15px */
  }
  
  /* Paragraph Text */
  #privacyPolicyModal p,
  #termsOfUseModal p,
  #privacyPolicyModal li,
  #termsOfUseModal li {
    font-size: 0.8125rem !important; /* 13px - smaller body text */
    line-height: 1.5 !important;
  }
  
  /* Bullet Points */
  #privacyPolicyModal ul,
  #termsOfUseModal ul {
    padding-left: 1rem !important;
  }
}
/* Mobile User Dropdown - Proper Positioning */
@media (max-width: 640px) {
  #mobile-user-dropdown {
    position: fixed !important;
    top: 60px !important;
    right: 1rem !important;
  }
  
  /* Ensure header has relative positioning */
  header {
    position: relative;
  }
}
/* Breadcrumb Navigation - Mobile Alignment Fix */
@media (max-width: 768px) {
  .breadcrumb-container {
    margin-bottom: 1rem;
    padding: 0.5rem 0;
  }
  
  .breadcrumb {
    display: flex;
    align-items: center; /* Ensures vertical alignment */
    flex-wrap: wrap;
    gap: 0.25rem; /* Reduce gap on mobile */
    padding: 0.5rem 0;
  }
  
  .breadcrumb-item {
    font-size: 0.8125rem; /* 13px */
    padding: 0.25rem 0.375rem;
    display: inline-flex; /* Changed from default to inline-flex */
    align-items: center; /* Vertical center */
    line-height: 1.2; /* Consistent line height */
  }
  
  .breadcrumb-separator {
    width: 0.875rem; /* 14px - slightly smaller */
    height: 0.875rem;
    flex-shrink: 0;
    display: inline-flex; /* Ensures proper alignment */
    align-items: center;
    justify-content: center;
  }
  
  .breadcrumb-separator svg {
    width: 100%;
    height: 100%;
    display: block;
  }
}

/* Extra small screens */
@media (max-width: 400px) {
  .breadcrumb-item {
    font-size: 0.75rem; /* 12px */
    padding: 0.125rem 0.25rem;
  }
  
  .breadcrumb-separator {
    width: 0.75rem; /* 12px */
    height: 0.75rem;
  }
}
/* ===== HITSTOCKLIST PAGE - MOBILE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
  /* Container padding */
  .container-hitstocklist {
    padding-left: 1.25rem !important; /* 20px */
    padding-right: 1.25rem !important; /* 20px */
  }
  
  /* Page Title */
  .category-title {
    font-size: 1.375rem !important; /* 22px */
    line-height: 1.3;
    margin-bottom: 1rem;
  }
  
  /* Description text */
  .description-text {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.5;
    margin-bottom: 1rem;
  }
  
  /* Stats Grid */
  .stats-grid {
    gap: 0.75rem !important;
    margin-bottom: 1.5rem;
  }
  
  .stat-card {
    padding: 0.875rem !important;
  }
  
  .stat-card h3 {
    font-size: 0.8125rem !important; /* 13px */
    margin-bottom: 0.375rem;
  }
  
  .stat-card p {
    font-size: 1.125rem !important; /* 18px */
    font-weight: 600;
  }
  
  /* Stock Cards */
  .stock-card {
    padding: 1rem !important;
    margin-bottom: 0.875rem;
  }
  
  .stock-card h3 {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.3;
    margin-bottom: 0.375rem;
  }
  
  .stock-card .symbol {
    font-size: 0.8125rem !important; /* 13px */
  }
  
  .stock-card .details {
    font-size: 0.8125rem !important; /* 13px */
    line-height: 1.4;
  }
  
  .stock-card .metric-label {
    font-size: 0.75rem !important; /* 12px */
  }
  
  .stock-card .metric-value {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 600;
  }
  
  /* View Details Button */
  .view-details-btn {
    font-size: 0.8125rem !important; /* 13px */
    padding: 0.5rem 1rem !important;
  }
  
  /* Loading and Error states */
  .loading-message,
  .error-message,
  .empty-message {
    font-size: 0.875rem !important; /* 14px */
  }
  
  /* Ensure consistent spacing */
  .max-w-7xl {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* Extra small screens (below 400px) */
@media (max-width: 400px) {
  .container-hitstocklist {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .category-title {
    font-size: 1.25rem !important; /* 20px */
  }
  
  .stock-card h3 {
    font-size: 0.875rem !important; /* 14px */
  }
}
/* ===== SECTOR CARDS - FORCE 2 COLUMNS ON MOBILE ===== */
@media (max-width: 640px) {
  /* Container must be grid with 2 columns */
  #sectors-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    padding: 0 !important;
  }
  
  /* Individual sector cards */
  #sectors-container > div,
  .sector-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0.875rem !important;
    margin: 0 !important;
  }
  
  /* Icon container */
  .sector-card > div > div:first-child,
  div[class*="inline-flex"][class*="rounded-2xl"] {
    padding: 0.625rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* Icon text */
  .sector-card span.text-white {
    font-size: 1.5rem !important;
  }
  
  /* Sector name */
  .sector-card h3 {
    font-size: 0.8125rem !important; /* 13px */
    line-height: 1.2;
    margin-bottom: 0.5rem !important;
  }
  
  /* Explore text */
  .sector-card span.inline-flex {
    font-size: 0.75rem !important; /* 12px */
  }
  
  /* Arrow icon */
  .sector-card svg.w-4 {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }
}
/* Clean, minimal About Us modal for login page */
#aboutUsModal {
  /* Softer, more subtle overlay */
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(4px) !important;
}

#aboutUsModal > div {
  /* Clean white background */
  background: #ffffff !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
  border-radius: 1rem !important;
}

/* Privacy Policy and Terms of Use modals */
#privacyPolicyModal,
#termsOfUseModal {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(4px) !important;
}

#privacyPolicyModal > div,
#termsOfUseModal > div {
  background: #ffffff !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
  border-radius: 1rem !important;
}

/* Neutralize any landing-page gradient behind the modal */
body.index-landing-page #aboutUsModal,
body.new-landing-page #aboutUsModal {
  background: rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================
   SHAREHOLDING PATTERN - MOBILE OPTIMIZATION
   ========================================== */

@media (max-width: 768px) {
  /* Shareholding detail cards - mobile optimized */
  .shareholding-detail-card {
    padding: 0.625rem !important;
    gap: 0.625rem !important;
  }

  /* Shareholding labels - better mobile font */
  .shareholding-label {
    font-size: 0.8125rem !important; /* 13px */
    line-height: 1.3;
    font-weight: 600 !important;
  }

  /* Shareholding percentage values - prominent but not too large */
  .shareholding-value {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.2;
    font-weight: 700 !important;
  }

  /* Shareholding descriptions - readable but compact */
  .shareholding-description {
    font-size: 0.6875rem !important; /* 11px */
    line-height: 1.4;
    margin-top: 0.125rem;
  }

  /* Pie chart container - better mobile sizing */
  #shareholding-container .w-full.md\:w-1\/2 {
    padding: 0.5rem;
  }

  /* Adjust chart size on mobile */
  #shareholding-container canvas {
    max-width: 280px !important;
    max-height: 280px !important;
  }
}
/* Fix shareholding pie chart alignment on mobile */
@media (max-width: 640px) {
  #shareholding-container .chart-card {
    display: flex;
    justify-content: center;
  }

  #shareholding-container canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  #shareholding-container canvas {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  /* Override fixed chart wrapper width */
  #shareholding-container div[style*="width: 340px"] {
    width: 260px !important;
    height: 260px !important;
    margin: 0 auto !important;
  }
}
@media (max-width: 480px) {
  #shareholding-container div[style*="width: 340px"] {
    width: 240px !important;
    height: 240px !important;
  }
}
.skeleton-value-loader {
  display: block;
}
/* ===== Mobile Price Skeleton Fix ===== */
@media (max-width: 768px) {
  #priceSectionMobile .skeleton-value-loader {
    height: 16px !important;
    min-height: 16px;
    width: 70%;
    background: linear-gradient(
      90deg,
      #e5e7eb 25%,
      #f3f4f6 37%,
      #e5e7eb 63%
    );
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: 6px;
    display: block;
  }
}
@media (max-width: 768px) {
  .sectors-clear-btn {
    right: 2rem; /* 👈 shift left on mobile only */
  }
}
/* ==========================================
   HIT STOCK MODAL FIX - 360px & below
   ========================================== */

@media (max-width: 480px) {

  /* Modal container */
  #analysisModal > div {
      width: 92% !important;
      max-width: 92% !important;
      margin: 0 auto !important;
      padding: 16px !important;
      border-radius: 16px !important;
      max-height: 85vh !important;
      overflow-y: auto !important;
  }

  /* Modal title */
  #analysisModal h2 {
      font-size: 18px !important;
      line-height: 1.3 !important;
  }

  /* Modal text */
  #analysisModal ul {
      font-size: 14px !important;
      line-height: 1.6 !important;
  }
}