/* ================================================================
   AgriTrust — Master Responsive Overrides
   Mobile-first, covers 320px → 4K+
   Loaded LAST so it wins over page-level inline styles.
   ================================================================ */

/* ---- 0. GLOBAL RESETS & OVERFLOW PREVENTION ---- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  width: 100%;
  min-width: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg, canvas, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

.container, .container-fluid {
  padding-left: max(var(--bs-gutter-x, 15px), 12px);
  padding-right: max(var(--bs-gutter-x, 15px), 12px);
}

/* Ensure nothing causes horizontal scroll */
.row { overflow: hidden; }

/* Touch-friendly minimum tap targets */
a, button, input[type="submit"], input[type="button"], label, .nav-link, .dropdown-item {
  min-height: 44px;
}

/* ---- 1. GLOBAL TYPOGRAPHY SCALING (tiny screens) ---- */
@media (max-width: 374px) {
  body { font-size: 14px; line-height: 1.6; }
  h1 { font-size: 1.4rem !important; }
  h2 { font-size: 1.2rem !important; }
  h3 { font-size: 1.05rem !important; }
  h4 { font-size: 0.95rem !important; }
  h5 { font-size: 0.88rem !important; }
  .container { padding-left: 10px; padding-right: 10px; }
}

@media (min-width: 375px) and (max-width: 479px) {
  body { font-size: 14.5px; }
}

/* ---- 2. HEADER / NAVBAR ---- */
.main-header {
  padding-left: 12px;
  padding-right: 12px;
}

@media (max-width: 374px) {
  .main-header .navbar-brand img,
  .main-header .navbar-brand svg { height: 32px !important; }
  .main-header .nav { gap: 0.6rem !important; }
  .main-header .nav-link { font-size: 0.78rem !important; padding: 0.35rem 0.6rem !important; }
  .header-mobile-controls { gap: 6px !important; }
  .main-header .header-icon-btn,
  .main-header #headerSearchTriggerBtn,
  .main-header .hamburger { 
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 50% !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    font-size: 0.95rem !important; 
  }
  .main-header .btn-orange { padding: 0.45rem 1rem !important; font-size: 0.82rem !important; }
  .main-header .btn-outline-dark-text { padding: 0.4rem 1rem !important; font-size: 0.82rem !important; }
}

@media (max-width: 479px) {
  .main-header .d-flex.align-items-center.gap-3 { gap: 0.5rem !important; }
  .header-mobile-controls { gap: 6px !important; }
  .main-header .container { padding-left: 8px; padding-right: 8px; }
}



/* ---- 3. SEARCH PANEL (handled by header_live_search.php inline styles) ---- */

/* ---- 4. HERO SECTION ---- */
@media (max-width: 374px) {
  .hero-wrapper { padding: 3rem 0 1rem !important; }
  .hero-heading { font-size: 1.35rem !important; line-height: 1.15 !important; margin-bottom: 0.8rem !important; }
  .hero-subtitle { font-size: 0.8rem !important; line-height: 1.55 !important; max-width: 100% !important; margin-bottom: 1rem !important; }
  .hero-badge { font-size: 0.58rem !important; padding: 0.25rem 0.6rem !important; letter-spacing: 0.8px !important; }
  .hero-badge-dot { width: 5px; height: 5px; }
  .btn-hero-primary { padding: 0.6rem 1.2rem !important; font-size: 0.78rem !important; width: 100%; justify-content: center; }
  .btn-hero-secondary { padding: 0.6rem 1.2rem !important; font-size: 0.78rem !important; width: 100%; justify-content: center; }
  .hero-trust-row { gap: 0.6rem !important; margin-top: 0.75rem; flex-wrap: wrap; justify-content: center; }
  .trust-avatar { width: 26px !important; height: 26px !important; font-size: 0.55rem !important; }
  .trust-avatar-more { width: 26px !important; height: 26px !important; font-size: 0.7rem !important; }
  .trust-text { font-size: 0.72rem !important; }
  .hero-showcase-wrapper { padding: 0.5rem !important; border-radius: 12px !important; margin-top: 1rem !important; }
  .carousel-image-container { aspect-ratio: 1/1 !important; }
  .carousel-control-prev, .carousel-control-next { width: 32px !important; height: 32px !important; }
  .hero-glow-1 { width: 200px !important; height: 200px !important; }
  .hero-glow-2 { width: 250px !important; height: 250px !important; }
  .scroll-indicator { display: none !important; }
}

@media (min-width: 375px) and (max-width: 479px) {
  .hero-wrapper { padding: 3.5rem 0 1.25rem !important; }
  .hero-heading { font-size: 1.5rem !important; }
  .hero-subtitle { font-size: 0.85rem !important; }
  .btn-hero-primary, .btn-hero-secondary { padding: 0.65rem 1.4rem !important; font-size: 0.82rem !important; }
}

/* ---- 5. TRUSTED BY / LOGOS ---- */
@media (max-width: 374px) {
  .trusted-by-section { padding: 1.5rem 0 !important; }
  .trusted-by-label { font-size: 0.68rem !important; margin-bottom: 1rem !important; }
  .trusted-logos { gap: 0.8rem 1.2rem !important; }
  .trusted-logo-item { font-size: 0.72rem !important; gap: 0.25rem !important; }
  .trusted-logo-item i { font-size: 0.85rem !important; }
}

/* ---- 6. STATS SECTION ---- */
@media (max-width: 374px) {
  .stats-section { padding: 2rem 0 !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; }
  .stat-item { padding: 0.6rem !important; }
  .stat-icon { width: 36px !important; height: 36px !important; font-size: 0.9rem !important; border-radius: 10px !important; margin-bottom: 0.5rem !important; }
  .stat-number { font-size: 1.3rem !important; }
  .stat-label { font-size: 0.65rem !important; letter-spacing: 0.3px !important; }
}

@media (min-width: 375px) and (max-width: 479px) {
  .stats-grid { gap: 0.75rem !important; }
  .stat-item { padding: 0.75rem !important; }
  .stat-number { font-size: 1.5rem !important; }
  .stat-label { font-size: 0.7rem !important; }
}

/* ---- 7. SERVICES / WELCOME SECTION ---- */
@media (max-width: 374px) {
  .services-welcome-section { padding: 3rem 0 !important; }
  .section-label { font-size: 0.65rem !important; letter-spacing: 1.5px !important; }
  .section-heading { font-size: 1.2rem !important; margin-bottom: 0.6rem !important; }
  .section-desc { font-size: 0.82rem !important; max-width: 100% !important; }
  .service-card-premium { padding: 0.85rem !important; gap: 0.6rem !important; border-radius: 12px !important; }
  .service-icon-circle { width: 36px !important; height: 36px !important; font-size: 0.9rem !important; border-radius: 10px !important; }
  .service-card-title { font-size: 0.78rem !important; }
  .service-card-link { font-size: 0.7rem !important; }
  .btn-view-all { font-size: 0.78rem !important; padding: 0.4rem 1rem !important; }
  .about-heading { font-size: 1.15rem !important; }
  .about-text { font-size: 0.82rem !important; }
  .value-item { gap: 0.6rem !important; }
  .value-icon { width: 32px !important; height: 32px !important; font-size: 0.85rem !important; border-radius: 8px !important; }
  .value-content h6 { font-size: 0.78rem !important; }
  .value-content p { font-size: 0.72rem !important; }
  .btn-about-premium { padding: 0.55rem 1.2rem !important; font-size: 0.78rem !important; }
}

@media (min-width: 375px) and (max-width: 479px) {
  .section-heading { font-size: 1.35rem !important; }
  .service-card-premium { padding: 1rem !important; }
  .service-icon-circle { width: 40px !important; height: 40px !important; }
}

/* ---- 8. AI SOLUTIONS SECTION ---- */
@media (max-width: 374px) {
  .ai-solutions-section { padding: 2.5rem 0 !important; }
  .ai-image-wrapper { border-radius: 16px !important; }
  .ai-showcase-img { border-radius: 16px !important; }
  .ai-features .col-sm-6 { flex: 0 0 100% !important; max-width: 100% !important; }
  .ai-features .fw-semibold { font-size: 0.82rem !important; }
}

/* ---- 9. PROCESS / HOW WE WORK ---- */
@media (max-width: 374px) {
  .process-section { padding: 3rem 0 !important; }
  .process-steps { flex-direction: column !important; align-items: center !important; gap: 0 !important; }
  .process-step { padding: 1rem 0.5rem !important; }
  .process-step-number { font-size: 1.8rem !important; }
  .process-step-icon { width: 42px !important; height: 42px !important; font-size: 1rem !important; border-radius: 12px !important; }
  .process-step h4 { font-size: 0.88rem !important; margin-bottom: 0.3rem !important; }
  .process-step p { font-size: 0.75rem !important; max-width: 220px !important; }
  .process-connector { flex-direction: row !important; padding: 0 !important; }
  .connector-dot { width: 6px !important; height: 6px !important; }
  .connector-line { width: 30px !important; height: 2px !important; }
}

@media (min-width: 375px) and (max-width: 479px) {
  .process-step { padding: 1.2rem !important; }
  .process-step-number { font-size: 2rem !important; }
  .process-step-icon { width: 46px !important; height: 46px !important; }
}

/* ---- 10. TESTIMONIALS ---- */
@media (max-width: 374px) {
  .testimonials-section { padding: 3rem 0 !important; }
  .testimonials-grid { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
  .testimonial-card { padding: 1rem !important; border-radius: 14px !important; }
  .testimonial-stars { font-size: 0.75rem !important; margin-bottom: 0.6rem !important; }
  .testimonial-text { font-size: 0.8rem !important; line-height: 1.6 !important; margin-bottom: 1rem !important; }
  .testimonial-avatar { width: 32px !important; height: 32px !important; font-size: 0.65rem !important; }
  .testimonial-author { gap: 0.5rem !important; }
  .testimonial-author strong { font-size: 0.78rem !important; }
  .testimonial-author span { font-size: 0.68rem !important; }
}

/* ---- 11. CTA SECTION ---- */
@media (max-width: 374px) {
  .cta-section { padding: 2.5rem 0 !important; }
  .cta-box { padding: 1.25rem !important; border-radius: 16px !important; }
  .cta-label { font-size: 0.65rem !important; }
  .cta-heading { font-size: 1.1rem !important; }
  .cta-text { font-size: 0.8rem !important; }
  .btn-cta-primary { padding: 0.7rem 1.5rem !important; font-size: 0.82rem !important; width: 100%; justify-content: center; }
  .btn-cta-secondary { padding: 0.6rem 1.5rem !important; font-size: 0.8rem !important; width: 100%; justify-content: center; }
}



/* ---- 14. FOOTER ---- */
@media (max-width: 374px) {
  .footer-section { padding: 3rem 0 1.5rem !important; }
  .footer-grid { gap: 1.5rem !important; }
  .footer-col h5 { font-size: 0.9rem !important; margin-bottom: 1rem !important; }
  .footer-col p { font-size: 0.78rem !important; }
  .footer-links-list a { font-size: 0.78rem !important; }
  .footer-contact-info li { font-size: 0.75rem !important; gap: 0.5rem !important; margin-bottom: 0.6rem !important; }
  .newsletter-form input[type="email"] { padding: 0.6rem 0.8rem !important; font-size: 0.8rem !important; }
  .newsletter-form button { padding: 0.6rem 0.8rem !important; font-size: 0.8rem !important; }
  .footer-bottom { font-size: 0.72rem !important; padding-top: 1rem !important; margin-top: 2rem !important; }
  .social-icons { gap: 0.5rem !important; }
  .social-icons a { width: 30px !important; height: 30px !important; font-size: 0.85rem !important; }
}

@media (min-width: 375px) and (max-width: 479px) {
  .footer-section { padding: 3.5rem 0 1.5rem !important; }
  .footer-col h5 { font-size: 0.95rem !important; }
}

/* ---- 15. LOGIN / REGISTER PAGES ---- */
@media (max-width: 374px) {
  .login-container {
    padding: 20px 14px !important;
    margin: 10px !important;
    border-radius: 14px !important;
    max-width: 100% !important;
  }
  .brand-logo img { height: 32px !important; }
  h4 { font-size: 1.2rem !important; margin: 12px 0 !important; }
  .form-control { padding: 0.5rem 0.75rem !important; font-size: 0.88rem !important; }
  .btn-login, .btn-register, button[type="submit"] {
    padding: 0.6rem 1.5rem !important;
    font-size: 0.9rem !important;
    width: 100% !important;
  }
}

@media (min-width: 375px) and (max-width: 479px) {
  .login-container { padding: 24px 18px !important; }
}

/* ---- 16. MARKETPLACE LANDING SECTION (on index.php) ---- */
@media (max-width: 374px) {
  .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
}

/* ---- 17. BLOG PAGE ---- */
@media (max-width: 374px) {
  .blog-card, .card { border-radius: 12px !important; }
  .blog-card .card-body, .card-body { padding: 0.75rem !important; }
}

/* ---- 18. SERVICES PAGE ---- */
@media (max-width: 374px) {
  .services-hero { padding: 3.5rem 0 2.5rem !important; }
  .motto-text { font-size: 1rem !important; }
}

/* ---- 19. FREE PACKAGES PAGE ---- */
@media (max-width: 374px) {
  .packages-hero { padding: 4rem 0 3rem !important; }
}

/* ---- 20. ABOUT PAGE ---- */
@media (max-width: 374px) {
  .about-hero { padding: 3.5rem 0 2.5rem !important; }
  .about-card-premium { padding: 1.25rem !important; border-radius: 14px !important; }
  .value-box { padding: 1.25rem !important; border-radius: 12px !important; }
}

/* ---- 21. CONTACT PAGE ---- */
@media (max-width: 374px) {
  .contact-hero { padding: 3.5rem 0 2.5rem !important; }
}

/* ---- 22. BACK TO TOP ---- */
@media (max-width: 374px) {
  #backToTop { bottom: 15px !important; right: 15px !important; padding: 10px 12px !important; font-size: 1rem !important; }
}

/* ---- 23. POPUP / MODAL FIXES ---- */
@media (max-width: 479px) {
  .modal-dialog { margin: 0.5rem !important; max-width: calc(100% - 1rem) !important; }
  .modal-content { border-radius: 14px !important; }
  .modal-body { padding: 1rem !important; }
}

/* ---- 24. FORM ELEMENTS GLOBAL ---- */
@media (max-width: 479px) {
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="tel"], input[type="url"], input[type="search"], textarea, select {
    font-size: 16px !important; /* Prevent iOS zoom on focus */
    max-width: 100%;
  }
}

/* ---- 25. BOOTSTRAP GRID EDGE CASES ---- */
@media (max-width: 374px) {
  .col-md-4, .col-lg-2, .col-lg-3, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .g-3, .g-4, .g-5 { --bs-gutter-x: 8px; --bs-gutter-y: 8px; }
}

/* ---- 26. UTILITY: HORIZONTAL SCROLL KILLER ---- */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Ensure Bootstrap containers don't exceed viewport */
.container {
  max-width: 100%;
}

/* ---- 27. LANDSCAPE PHONE SUPPORT ---- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-wrapper { min-height: auto !important; padding: 2rem 0 1rem !important; }
  .hero-heading { font-size: 1.5rem !important; }
  .scroll-indicator { display: none !important; }
}

/* ---- 28. VERY LARGE SCREENS (1440px+) ---- */
@media (min-width: 1440px) {
  .container { max-width: 1320px; }
}

@media (min-width: 1920px) {
  .container { max-width: 1500px; }
}

/* ---- 29. PRINT STYLES ---- */
@media print {
  .main-header, .unique-sidebar, .search-panel, .preloader,
  .footer-section, #backToTop, .hero-particles, .hero-glow-1, .hero-glow-2,
  .hero-grid-lines, .scroll-indicator { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  .hero-wrapper { background: #fff !important; color: #000 !important; min-height: auto !important; padding: 1rem 0 !important; }
  a { text-decoration: underline; color: #000; }
}

/* ---- 30. REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-up, .reveal-fade { opacity: 1 !important; transform: none !important; }
}

/* ---- 31. HIGH CONTRAST / FORCED COLORS ---- */
@media (forced-colors: active) {
  .btn-orange, .btn-hero-primary, .btn-cta-primary, .btn-about-premium {
    border: 2px solid ButtonText;
  }
  .main-header, .unique-sidebar { border: 1px solid CanvasText; }
}

/* ================================================================
   32. AGRITRUST USER DASHBOARD MOBILE ARMOR & RESPONSIVENESS
   Targeting 320px, 344px (Galaxy Z Fold), 360px, 375px, 390px, 414px, 430px+
   Guarantees: Zero horizontal scroll, no broken mid-word wraps,
   no button squishing, flawless card padding, perfect tap targets.
   ================================================================ */

/* Global Dashboard Container Bounds */
html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden !important;
}

.wrapper, .main-wrapper, .content-body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden !important;
  box-sizing: border-box;
}

/* Card & Table Overflow Guard */
.card, .card-theme, .dashboard-subcard, .wallet-summary-card, .quick-actions-card, .premium-ref-card {
  max-width: 100% !important;
  box-sizing: border-box !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.table-responsive {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin;
}

/* Base Mobile Overrides (<= 576px) */
@media (max-width: 575.98px) {
  .content-body {
    padding: 0.85rem 0.65rem 4rem !important;
  }

  .container, .container-fluid {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    max-width: 100% !important;
  }

  /* Grid gutters */
  .row.g-3, .row.g-4 {
    --bs-gutter-x: 0.65rem !important;
    --bs-gutter-y: 0.65rem !important;
  }

  /* Page titles */
  h1.h3, .page-title-header {
    font-size: 1.15rem !important;
  }

  /* ── Dashboard: Wallet Summary Card ── */
  .wallet-summary-card, .wallet-hero-balance-card, .wallet-hero-virtual-card {
    padding: 1.25rem 1rem !important;
    border-radius: 18px !important;
  }

  .card-top-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.45rem !important;
    margin-bottom: 1rem !important;
  }

  .card-identity-box {
    display: flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    min-width: 0 !important;
  }

  .card-icon-circle {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
  }

  .card-brand-tag {
    font-size: 0.88rem !important;
    white-space: nowrap !important;
    font-weight: 800 !important;
    color: #ffffff !important;
  }

  .card-top-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex-shrink: 0 !important;
  }

  .btn-card-glass {
    padding: 0.35rem 0.65rem !important;
    font-size: 0.75rem !important;
  }

  .btn-card-glass-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.82rem !important;
  }

  .balance-amount, .balance-main-num {
    font-size: clamp(1.6rem, 6.5vw, 2.1rem) !important;
  }

  .wallet-subcard-glass {
    padding: 0.75rem 0.85rem !important;
    border-radius: 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }

  .wallet-subcard-glass .subcard-item {
    width: 100% !important;
  }

  .card-action-btns-row {
    gap: 0.5rem !important;
  }

  .btn-fund-orange, .btn-withdraw-glass, .btn-hero-fund, .btn-hero-glass {
    padding: 0.65rem 0.55rem !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    gap: 0.35rem !important;
  }

  /* ── Dashboard: Quick Actions 4x2 Grid ── */
  .quick-actions-card {
    padding: 1.25rem 0.85rem !important;
    border-radius: 18px !important;
  }

  .quick-actions-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.85rem 0.25rem !important;
  }

  .action-icon-circle {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.05rem !important;
    margin-bottom: 0.35rem !important;
  }

  .kyc-icon-wrapper {
    width: 48px !important;
    height: 48px !important;
  }

  .kyc-icon-wrapper .action-icon-circle {
    width: 42px !important;
    height: 42px !important;
  }

  .action-label-text {
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
  }

  /* ── Dashboard: Smart Insights & Referral Snippet ── */
  .dashboard-subcard {
    padding: 1.25rem 1rem !important;
    border-radius: 18px !important;
  }

  .insight-box {
    padding: 0.85rem 0.95rem !important;
    gap: 0.75rem !important;
  }

  .insight-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.1rem !important;
  }

  .smartRefLinkInput, #smartRefLinkInput {
    font-size: 0.72rem !important;
  }

  /* ── Wallet Page: Tabs Navigation ── */
  .wallet-tabs-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0.35rem !important;
    gap: 0.35rem !important;
    scrollbar-width: none;
  }
  .wallet-tabs-nav::-webkit-scrollbar {
    display: none;
  }

  .wallet-tab-btn {
    padding: 0.5rem 0.85rem !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ── Wallet Page: Payout Form & Bank Chips ── */
  .wallet-card-theme {
    padding: 1.25rem 1rem !important;
    border-radius: 16px !important;
  }

  .bank-chip {
    font-size: 0.72rem !important;
    padding: 4px 9px !important;
  }

  .amt-preset-chip {
    font-size: 0.72rem !important;
    padding: 4px 9px !important;
  }

  .virtual-acct-num {
    font-size: clamp(1.15rem, 5vw, 1.45rem) !important;
    letter-spacing: 1px !important;
  }

  /* ── KYC Page Mobile Scaling ── */
  .kyc-wrapper {
    padding: 0.85rem 0.5rem 4rem !important;
  }

  .kyc-hero {
    padding: 1.35rem 1rem !important;
    border-radius: 16px !important;
  }

  .kyc-hero h1 {
    font-size: 1.35rem !important;
  }

  .kyc-stepper {
    padding: 0 0.5rem 1rem !important;
  }

  .kyc-step-dot {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.75rem !important;
  }

  .kyc-step-line {
    width: clamp(15px, 4vw, 35px) !important;
  }

  .kyc-form-header {
    padding: 1rem 1.15rem !important;
  }

  .kyc-form-body {
    padding: 1.15rem 0.9rem !important;
  }

  /* ── Referrals & Benefits Pages ── */
  .premium-ref-card {
    padding: 1.15rem 0.95rem !important;
    border-radius: 16px !important;
  }

  .ref-code-value {
    font-size: 0.88rem !important;
  }

  .btn-copy-code-pill, .btn-copy-link-premium {
    font-size: 0.72rem !important;
    padding: 5px 10px !important;
  }

  .tab-btn {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.78rem !important;
  }

  /* ── Profile Page ── */
  .profile-layout {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .profile-sidebar-card, .profile-main-card {
    border-radius: 16px !important;
  }

  .profile-section-header {
    padding: 1rem 1.15rem !important;
  }

  /* ── Invoices & Support Pages ── */
  .inv-hero {
    padding: 1.25rem 1rem !important;
    border-radius: 16px !important;
  }

  .inv-filter-tabs {
    gap: 0.35rem !important;
  }

  .inv-filter-tab {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.75rem !important;
  }

  .page-tab-btn {
    padding: 0.5rem 0.85rem !important;
    font-size: 0.82rem !important;
  }

  /* ── Official Forms Hub ── */
  .form-item .card {
    border-radius: 16px !important;
  }

  .form-item .card-footer .btn {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.65rem !important;
  }
}

/* Specific Ultra-Narrow Phones (320px - 360px: Galaxy Fold, Xperia, Small iPhones) */
@media (max-width: 360px) {
  .content-body {
    padding: 0.65rem 0.45rem 4rem !important;
  }

  .container, .container-fluid {
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
  }

  /* Compact typography */
  body {
    font-size: 13.5px !important;
  }

  h1.h3, .page-title-header {
    font-size: 1.05rem !important;
  }

  /* Dashboard action buttons stack or tight fit */
  .card-top-row {
    gap: 0.35rem !important;
    margin-bottom: 0.85rem !important;
  }

  .card-brand-tag {
    font-size: 0.82rem !important;
  }

  .card-icon-circle {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
  }

  .btn-card-glass {
    padding: 0.28rem 0.55rem !important;
    font-size: 0.7rem !important;
  }

  .btn-card-glass-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.75rem !important;
  }

  .card-action-btns-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.35rem !important;
  }

  .btn-fund-orange, .btn-withdraw-glass {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0.58rem 0.3rem !important;
    font-size: 0.74rem !important;
    white-space: nowrap !important;
    letter-spacing: -0.2px !important;
    gap: 0.25rem !important;
  }

  .balance-amount, .balance-main-num {
    font-size: clamp(1.35rem, 5.5vw, 1.85rem) !important;
  }

  .subcard-label {
    font-size: 0.62rem !important;
  }

  .subcard-value {
    font-size: 0.75rem !important;
  }

  /* Recent Transactions list on 344px */
  .dash-tx-row {
    padding: 0.5rem 0.2rem !important;
  }

  .tx-icon-box {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.78rem !important;
    border-radius: 8px !important;
  }

  /* Quick action circles on 344px */
  .action-icon-circle {
    width: 40px !important;
    height: 40px !important;
    font-size: 0.95rem !important;
  }

  .kyc-icon-wrapper {
    width: 44px !important;
    height: 44px !important;
  }

  .kyc-icon-wrapper .action-icon-circle {
    width: 38px !important;
    height: 38px !important;
  }

  .action-label-text {
    font-size: 0.62rem !important;
    letter-spacing: -0.2px !important;
  }

  /* Security PIN Modal Holes on 344px */
  .pin-holes-container {
    gap: 6px !important;
    max-width: 230px !important;
  }

  .pin-hole-box {
    width: 38px !important;
    height: 44px !important;
    border-radius: 10px !important;
    font-size: 1.1rem !important;
  }

  .pin-hole-dot {
    width: 10px !important;
    height: 10px !important;
  }

  /* Referral link input group on 344px */
  .ref-link-input-group, .input-group-sm {
    flex-direction: column !important;
  }

  .ref-link-input-group .form-control, .input-group-sm .form-control {
    border-radius: 8px !important;
    border-right-width: 1.5px !important;
    width: 100% !important;
    margin-bottom: 0.35rem;
  }

  .ref-link-input-group .btn, .input-group-sm .btn {
    border-radius: 8px !important;
    width: 100% !important;
    justify-content: center;
  }

  /* Agreement Letterhead Padding */
  .agreement-letterhead .lh-header {
    padding: 1rem 0.75rem !important;
  }

  .agreement-letterhead .lh-body {
    padding: 1rem 0.75rem !important;
  }

  .agreement-witness-grid {
    grid-template-columns: 1fr !important;
  }

  .sig-capture-section {
    padding: 1rem 0.75rem !important;
  }

  /* Modals full width on tiny screens */
  .modal-dialog {
    margin: 0.35rem !important;
    max-width: calc(100vw - 0.7rem) !important;
  }
}

/* ================================================================
   33. AGRITRUST ADMIN DASHBOARD MOBILE HARDENING & RESPONSIVENESS
   Targeting 320px, 344px (Galaxy Z Fold), 360px, 375px, 390px, 414px, 430px+
   Guarantees: Zero horizontal scroll, fluid DataTables, responsive
   stat grids, overflow-free filter pills, touch-friendly action buttons.
   ================================================================ */

/* Global Admin Container Safeguards */
.um-wrap, .kycm-stats, .stat-card-premium, .admin-hero, .um-hero-agri, .kycm-hero,
.inv-mgmt-hero, .payouts-admin-hero, .broadcast-hero, .reports-hero, .analytics-hero,
.page-hero, .agent-req-card, .inv-table-card, .chat-logs-card, .svc-table-card,
.card-glass, .report-section-card, .chart-container {
  max-width: 100% !important;
  box-sizing: border-box !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* DataTables Mobile Polish */
@media (max-width: 767.98px) {
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    text-align: left !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    margin-bottom: 0.75rem !important;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    text-align: center !important;
    float: none !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 0.75rem !important;
  }

  .dataTables_wrapper .dataTables_paginate .pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 2px !important;
  }
}

/* Admin Mobile Overrides (<= 576px) */
@media (max-width: 575.98px) {
  /* ── Admin Heroes ── */
  .admin-hero, .um-hero-agri, .kycm-hero,
  .inv-mgmt-hero, .payouts-admin-hero, .broadcast-hero, .reports-hero, .analytics-hero, .page-hero {
    padding: 1.25rem 1rem !important;
    border-radius: 16px !important;
    margin-bottom: 1.25rem !important;
  }

  .admin-hero h1, .um-hero-agri h1, .kycm-hero h1,
  .inv-mgmt-hero h1, .payouts-admin-hero h1, .broadcast-hero h1, .reports-hero h1, .analytics-hero h2, .page-hero h1 {
    font-size: clamp(1.15rem, 5vw, 1.45rem) !important;
    line-height: 1.25 !important;
  }

  .admin-hero p, .um-hero-agri p, .kycm-hero p,
  .inv-mgmt-hero p, .payouts-admin-hero p, .broadcast-hero p, .reports-hero p, .analytics-hero p, .page-hero p {
    font-size: 0.8rem !important;
  }

  /* ── Stat Cards Grid: 2 columns or 1 column on mobile ── */
  .stat-card-premium, .inv-stat-card, .report-metric-card, .metric-card-upgraded, .stat-card {
    padding: 1rem 0.85rem !important;
    border-radius: 14px !important;
  }

  .stat-card-premium .icon-wrap, .metric-icon, .metric-card-upgraded .icon-box, .stat-card .stat-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.05rem !important;
    margin-bottom: 0.6rem !important;
  }

  .stat-card-premium .stat-value, .metric-card-upgraded h4, .stat-card .stat-value {
    font-size: clamp(1.2rem, 5vw, 1.5rem) !important;
    line-height: 1.15 !important;
  }

  .stat-card-premium .stat-label, .metric-card-upgraded p, .stat-card .stat-label {
    font-size: 0.72rem !important;
  }

  .stat-card-premium .stat-sub {
    font-size: 0.68rem !important;
  }

  /* ── User Management (manage_users.php) ── */
  .um-stat-box {
    padding: 0.95rem 0.85rem !important;
    border-radius: 14px !important;
  }

  .um-stat-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.05rem !important;
    margin-bottom: 0.5rem !important;
  }

  .um-stat-val {
    font-size: clamp(1.2rem, 5vw, 1.45rem) !important;
  }

  .um-stat-lbl {
    font-size: 0.7rem !important;
  }

  .um-card-header {
    padding: 1rem 1.15rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  /* ── Horizontal Scrollable Filter Tabs & Pills ── */
  .um-filter-tabs, .filter-tabs, .svc-tabs, .page-tab-btns,
  .inv-table-card .d-flex.flex-wrap.gap-2.align-items-center {
    padding: 0.5rem 0.65rem !important;
    gap: 0.35rem !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
  }
  .um-filter-tabs::-webkit-scrollbar,
  .filter-tabs::-webkit-scrollbar,
  .svc-tabs::-webkit-scrollbar,
  .page-tab-btns::-webkit-scrollbar,
  .inv-table-card .d-flex.flex-wrap.gap-2.align-items-center::-webkit-scrollbar {
    display: none;
  }

  .um-filter-pill, .filter-tab, .filter-tab-inv, .filter-pill-pa, .filter-pill, .svc-tab, .page-tab-btn {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ── Farm KYC Admin (kyc_manage.php) ── */
  .kycm-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.55rem !important;
  }

  .kycm-stat-card {
    padding: 0.85rem 0.75rem !important;
    border-radius: 12px !important;
    gap: 0.55rem !important;
  }

  .kycm-stat-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.05rem !important;
    border-radius: 10px !important;
  }

  .kycm-stat-value {
    font-size: 1.25rem !important;
  }

  .kycm-stat-label {
    font-size: 0.65rem !important;
  }

  /* ── Quick Action Cards ── */
  .quick-action-card {
    padding: 1.15rem 0.95rem !important;
    border-radius: 14px !important;
  }

  .quick-action-icon {
    width: 40px !important;
    height: 42px !important;
    font-size: 1.1rem !important;
    margin-bottom: 0.65rem !important;
  }

  .quick-action-title {
    font-size: 0.85rem !important;
  }

  .quick-action-sub {
    font-size: 0.7rem !important;
  }

  /* ── Financial & Wallet Holdings Banner ── */
  .admin-financial-banner,
  div[style*="Total AgriTrust Cooperative Wallet Holdings"] {
    padding: 1.25rem 1rem !important;
    border-radius: 16px !important;
  }

  /* ── Notification Dropdown on Mobile ── */
  .dropdown-menu-notif {
    width: calc(100vw - 1.2rem) !important;
    max-width: 360px !important;
  }

  /* ── Support Center Slideout on Mobile ── */
  .chat-modal {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .participants-panel.open {
    width: 100% !important;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 20;
  }

  /* ── Modals & Action Buttons ── */
  .modal-header {
    padding: 1rem 1.15rem !important;
  }

  .modal-body {
    padding: 1rem 1.15rem !important;
  }

  .modal-footer {
    padding: 0.75rem 1.15rem !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }

  .modal-footer .btn {
    flex: 1 1 auto !important;
    font-size: 0.82rem !important;
  }
}

/* Specific Ultra-Narrow Phones (320px - 360px: Galaxy Fold 344px, Small Androids) */
@media (max-width: 360px) {
  /* Admin hero CTA buttons stack cleanly */
  .admin-hero .d-flex.gap-2.flex-wrap,
  .um-hero-agri .d-flex.gap-2.flex-wrap,
  .inv-mgmt-hero .d-flex.gap-3,
  .payouts-admin-hero .d-flex.gap-2,
  .broadcast-hero .d-flex.gap-2 {
    flex-direction: column !important;
    width: 100% !important;
  }

  .admin-hero .btn, .um-hero-agri .btn, .inv-mgmt-hero .btn, .payouts-admin-hero .btn, .broadcast-hero .btn {
    width: 100% !important;
    text-align: center !important;
    font-size: 0.8rem !important;
    padding: 0.55rem 0.75rem !important;
  }

  /* Stat cards on 344px */
  .stat-card-premium, .inv-stat-card, .report-metric-card, .metric-card-upgraded, .stat-card {
    padding: 0.85rem 0.65rem !important;
  }

  .stat-card-premium .stat-value, .inv-stat-card div[style*="font-size:2rem"], .stat-card .stat-value {
    font-size: 1.25rem !important;
  }

  .stat-card-premium .stat-label, .inv-stat-card div[style*="text-transform:uppercase"], .stat-card .stat-label {
    font-size: 0.68rem !important;
  }

  /* Financial Banner 3-item sub grid stays compact 3-columns on 344px */
  .financial-sub-grid .col-4 {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
  .financial-sub-grid .col-4 > div {
    padding: 0.5rem 0.2rem !important;
  }

  /* Table action buttons */
  .table td .btn, .table td .btn-sm {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
  }

  /* Form controls */
  .form-select, .form-control {
    font-size: 13.5px !important;
    padding: 0.45rem 0.65rem !important;
  }

  /* KYC manage stat cards */
  .kycm-stats {
    grid-template-columns: 1fr !important;
  }

  /* Broadcast audience and type buttons */
  .audience-btn, .type-btn {
    padding: 0.65rem 0.5rem !important;
    font-size: 0.75rem !important;
  }
}

/* ================================================================
   PHASE 1 AGRITRUST AI & FARM PLATFORM RESPONSIVE RULES
   Covers 344px (Galaxy Fold / Tiny Screens) → 4K+
   ================================================================ */

/* 1. Onboarding Wizard Responsiveness */
@media (max-width: 576px) {
  .onboarding-card {
    padding: 22px 16px !important;
    border-radius: 18px !important;
    margin: 10px 0 !important;
  }
  .choice-card {
    padding: 12px 10px !important;
    gap: 10px !important;
  }
  .choice-card .icon-box {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
  }
  .step-indicator {
    font-size: 0.7rem !important;
    margin-bottom: 16px !important;
  }
  .btn-step-next, .btn-step-prev {
    padding: 10px 16px !important;
    font-size: 0.88rem !important;
  }
  .tag-chip {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
  }
}

@media (max-width: 360px) {
  .onboarding-card {
    padding: 16px 12px !important;
    border-radius: 14px !important;
  }
  .choice-card .fw-bold {
    font-size: 0.85rem !important;
  }
  .choice-card .small {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
  }
  .step-indicator span {
    font-size: 0.62rem !important;
    letter-spacing: 0 !important;
  }
}

/* 2. Farm Command Center & Farm Details */
@media (max-width: 768px) {
  .content-body {
    padding: 16px 12px !important;
  }
}

@media (max-width: 576px) {
  .content-body {
    padding: 12px 8px !important;
  }
  /* Health index sub-boxes wrap 2x2 */
  .col-12.col-md-5 .row.g-2.text-center .col-3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  /* Action cards stacking */
  .p-3.bg-light.rounded-3.border-start {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .p-3.bg-light.rounded-3.border-start .btn {
    width: 100% !important;
    margin-top: 4px !important;
  }
}

@media (max-width: 360px) {
  .content-body h3, .content-body h2 {
    font-size: 1.15rem !important;
  }
  .card-header h5 {
    font-size: 0.92rem !important;
  }
}

/* 3. AI Crop Doctor Responsiveness */
@media (max-width: 576px) {
  .upload-dropzone {
    padding: 20px 12px !important;
  }
  .upload-dropzone i.fa-3x {
    font-size: 2rem !important;
  }
  #diagnosticResultCard .card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  #diagnosticResultCard .card-header .text-end {
    text-align: left !important;
  }
  #diagnosticResultCard .d-flex.gap-2.pt-3 {
    flex-direction: column !important;
  }
  #diagnosticResultCard .d-flex.gap-2.pt-3 .btn {
    width: 100% !important;
  }
}

/* 4. AI Farmer Assistant Responsiveness */
@media (max-width: 768px) {
  #chatWindow {
    max-height: 52vh !important;
  }
  .card-header.bg-white.border-bottom {
    padding: 12px !important;
  }
  #farmContextSelect {
    max-width: 100% !important;
    width: 100% !important;
  }
}

@media (max-width: 576px) {
  #chatWindow {
    padding: 12px 8px !important;
  }
  #chatWindow .p-3.rounded-4 {
    padding: 10px 12px !important;
    font-size: 0.86rem !important;
    max-width: 90% !important;
  }
  #chatForm input {
    padding: 10px 14px !important;
    font-size: 0.85rem !important;
  }
  #chatForm button {
    padding: 10px 16px !important;
  }
}

/* 5. Education & News Responsiveness */
@media (max-width: 991px) {
  .sticky-top {
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 576px) {
  .article-content {
    font-size: 0.94rem !important;
    line-height: 1.65 !important;
  }
  .article-content .lead {
    font-size: 0.9rem !important;
  }
}

/* 6. Dashboard Farm Command Hero Strip & Universal Pagination */
@media (max-width: 768px) {
  div[style*="background: linear-gradient(135deg, #022b15"] .d-flex.flex-wrap.gap-2 {
    width: 100% !important;
  }
  div[style*="background: linear-gradient(135deg, #022b15"] .btn {
    flex: 1 1 auto !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 360px) {
  div[style*="background: linear-gradient(135deg, #022b15"] h4 {
    font-size: 1.05rem !important;
  }
  div[style*="background: linear-gradient(135deg, #022b15"] .btn {
    width: 100% !important;
    font-size: 0.78rem !important;
  }
  .agri-pagination-wrapper {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.4rem !important;
  }
  .agri-page-btn {
    min-width: 24px !important;
    height: 24px !important;
    font-size: 0.68rem !important;
    padding: 0 0.3rem !important;
  }
}

/* Global Tiny Mobile Overflows Fix (344px - 380px) */
@media (max-width: 380px) {
  .card-theme-header,
  .quick-actions-header {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }
  .card-top-row {
    flex-wrap: wrap !important;
  }
  .invoice-row,
  .dash-tx-row {
    padding: 0.6rem 0.35rem !important;
  }
}