/* Mobile-Only Enhancements - Does NOT affect desktop appearance */
/* All styles use max-width media queries to ensure desktop remains unchanged */

/* Extra Small Devices (phones, 320px - 575px) */
@media only screen and (max-width: 575px) {
  /* Touch-friendly button sizes - minimum 44x44px */
  .common-btn,
  .donate-btn,
  .user-btn,
  .banner-btn,
  .about-btn,
  .feature-btn,
  .blog-btn,
  button[type="submit"],
  input[type="submit"],
  .btn {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 20px;
    font-size: 16px; /* Prevents zoom on iOS */
  }

  /* Form inputs - touch-friendly */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 12px 15px;
  }

  /* Share buttons - ensure touch-friendly */
  .share-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
  }

  /* Table responsive improvements */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    position: relative;
  }

  .table-responsive::after {
    content: '→';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #999;
    pointer-events: none;
    opacity: 0.5;
  }

  /* Video banner responsive - right aligned on mobile */
  .video-banner-area {
    position: relative;
    overflow: hidden;
  }
  
  .video-banner-area video.background-video {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: right center;
  }
  
  /* Ensure video plays on mobile */
  .background-video {
    display: block !important;
    visibility: visible !important;
  }

  /* Patient carousel - touch optimization */
  .patient-slider .owl-nav {
    display: flex;
  }

  .patient-slider .owl-prev,
  .patient-slider .owl-next {
    min-width: 44px;
    min-height: 44px;
  }

  /* Counter items - ensure proper stacking */
  .counter-item {
    margin-bottom: 30px;
  }

  /* Footer columns - proper stacking */
  .footer-item {
    margin-bottom: 30px;
  }

  /* Text readability */
  p, li, span {
    line-height: 1.6;
    word-wrap: break-word;
  }

  /* Donation cards - prevent overflow */
  .donation-item {
    margin-bottom: 20px;
  }

  /* Progress bars - ensure visibility */
  .progress {
    min-height: 20px;
  }

  .progress-bar-label {
    font-size: 12px;
  }
}

/* Small Devices (large phones, 576px - 767px) */
@media only screen and (min-width: 576px) and (max-width: 767px) {
  /* Touch-friendly sizes maintained */
  .common-btn,
  .donate-btn,
  .user-btn {
    min-height: 44px;
    padding: 12px 25px;
  }

  /* Form inputs */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    min-height: 44px;
    font-size: 16px;
  }

  /* Table horizontal scroll indicator */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }
}

/* Tablet Portrait (768px - 991px) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* Maintain touch-friendly sizes on tablets */
  .common-btn,
  .donate-btn,
  .user-btn {
    min-height: 44px;
  }

  /* Form inputs */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    min-height: 44px;
  }
}

/* Touch device optimizations (applies to all touch devices) */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch target sizes */
  a, button, input, select, textarea {
    min-height: 44px;
  }

  /* Improve tap highlight */
  a, button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }

  /* Prevent text selection on buttons */
  button, .btn, .common-btn, .donate-btn {
    -webkit-user-select: none;
    user-select: none;
  }
}

/* Landscape orientation optimizations */
@media only screen and (max-width: 991px) and (orientation: landscape) {
  /* Reduce padding in landscape to maximize content */
  .pt-100 {
    padding-top: 40px;
  }

  .pb-70 {
    padding-bottom: 30px;
  }

  .ptb-100 {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* Very small screens (320px - 374px) */
@media only screen and (max-width: 374px) {
  /* Extra small adjustments */
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .section-title h2 {
    font-size: 24px;
  }

  .banner-content h1,
  .video-banner-content h1 {
    font-size: 24px;
  }

  /* Buttons - full width on very small screens */
  .common-btn,
  .donate-btn,
  .banner-btn {
    width: 100%;
    margin-bottom: 10px;
  }
}

/* Image lazy loading placeholder */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* Top Header/Navbar - Make visible and styled for mobile */
@media only screen and (max-width: 991px) {
  .header-area {
    display: block !important;
    visibility: visible !important;
    background-color: #022E6B !important; /* Dark blue background matching image */
    padding: 10px 0 !important;
    position: relative;
    z-index: 1000;
  }
  
  .header-area .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .header-area .row {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .header-area .left,
  .header-area .right {
    width: 100%;
    text-align: center;
  }
  
  .header-area .left ul,
  .header-area .right ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .header-area .left ul li {
    display: flex;
    align-items: center;
    margin: 4px 8px;
    color: #fff;
    font-size: 13px;
  }
  
  .header-area .left ul li i {
    color: #fff;
    font-size: 14px;
    margin-right: 6px;
  }
  
  .header-area .left ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    display: flex;
    align-items: center;
  }
  
  .header-area .right ul li {
    display: inline-flex;
    align-items: center;
    margin: 4px 6px;
    vertical-align: middle;
  }
  
  .header-area .right ul li span {
    color: #fff;
    font-size: 13px;
    margin-right: 8px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }
  
  /* Social media icons - perfectly circular with white background (matching image) */
  .header-area .right ul li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    background-color: #fff;
    border-radius: 50% !important;
    color: #022E6B;
    text-decoration: none;
    transition: all 0.3s ease;
    margin: 0 3px;
    flex-shrink: 0;
    vertical-align: middle;
    line-height: 1;
    position: relative;
    padding: 0 !important;
    box-sizing: border-box;
  }
  
  .header-area .right ul li a i {
    font-size: 16px;
    color: #022E6B;
    margin: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
  }
  
  .header-area .right ul li a:hover {
    background-color: #ff6015;
    transform: scale(1.1);
  }
  
  .header-area .right ul li a:hover i {
    color: #fff;
  }
  
  /* Fix social media icons alignment - ensure proper centering */
  .header-area .right ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .header-area .right {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Very small screens - adjust sizes */
  @media only screen and (max-width: 575px) {
    .header-area {
      padding: 8px 0 !important;
    }
    
    .header-area .left ul li,
    .header-area .right ul li {
      margin: 3px 6px;
      font-size: 12px;
    }
    
    .header-area .left ul li i,
    .header-area .right ul li i {
      font-size: 13px;
    }
    
    .header-area .right ul li a {
      width: 28px !important;
      height: 28px !important;
      min-width: 28px !important;
      min-height: 28px !important;
      max-width: 28px !important;
      max-height: 28px !important;
      border-radius: 50% !important;
    }
    
    .header-area .right ul li a i {
      font-size: 14px;
    }
    
    .header-area .right ul li span {
      font-size: 12px;
    }
  }
}

/* Make all images responsive by default on mobile */
@media only screen and (max-width: 991px) {
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Ensure images don't overflow containers */
  .about-img img,
  .donation-item .img img,
  .team-item img,
  .patient-slider .donation-item .img img,
  .work-img img,
  .event-item img,
  .testimonial-img img,
  .blog-item img,
  .gallery-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* Smooth scrolling for mobile */
@media only screen and (max-width: 991px) {
  html {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}

/* Prevent horizontal scroll on mobile */
@media only screen and (max-width: 767px) {
  body {
    overflow-x: hidden;
    width: 100%;
  }

  .container,
  .container-fluid {
    overflow-x: hidden;
  }
}

/* Dropdown menu mobile improvements */
@media only screen and (max-width: 991px) {
  .dropdown-menu {
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .user-dropdown .dropdown-menu {
    right: 0;
    left: auto;
    max-width: 90vw;
  }
}

/* Form validation messages - ensure visibility */
@media only screen and (max-width: 767px) {
  .invalid-feedback,
  .valid-feedback {
    display: block;
    font-size: 14px;
    margin-top: 5px;
  }

  .form-group {
    margin-bottom: 20px;
  }
  
  /* Ensure all form inputs are touch-friendly */
  .form-control,
  .form-select,
  select.form-control {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 12px 15px;
  }
  
  /* Form labels */
  .form-label,
  label {
    font-size: 16px;
    margin-bottom: 8px;
    display: block;
  }
  
  /* Checkboxes and radio buttons */
  .form-check-input {
    min-width: 20px;
    min-height: 20px;
    margin-top: 0.3em;
  }
  
  .form-check-label {
    padding-left: 8px;
    font-size: 16px;
  }
  
  /* Textarea */
  textarea.form-control {
    min-height: 100px;
    font-size: 16px;
    padding: 12px 15px;
  }
}

/* Navigation mobile improvements */
@media only screen and (max-width: 991px) {
  .side-nav {
    flex-wrap: wrap;
    gap: 8px;
  }

  .side-nav .user-btn,
  .side-nav .donate-btn {
    flex: 1 1 auto;
    min-width: 120px;
  }
}

/* Patient profile share buttons */
@media only screen and (max-width: 767px) {
  .share-btn-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
  }

  .share-btn {
    min-width: 50px;
    min-height: 50px;
    font-size: 24px;
  }
}

/* OTP input - mobile friendly */
@media only screen and (max-width: 767px) {
  input[type="text"][name="otp"],
  .otp-input {
    font-size: 24px;
    letter-spacing: 8px;
    text-align: center;
    min-height: 50px;
  }
}

/* Dashboard pages mobile optimization */
@media only screen and (max-width: 991px) {
  /* Dashboard sidebar - stack on mobile */
  .dashboard-sidebar {
    margin-bottom: 30px;
  }
  
  /* Dashboard stats cards - stack properly */
  .col-md-3 .card,
  .col-md-4 .card,
  .col-md-6 .card {
    margin-bottom: 20px;
  }
  
  /* Donation tree container - adjust height for mobile */
  .visual-donation-tree-container,
  .donation-tree-container {
    height: 500px !important;
    min-height: 400px !important;
  }
  
  /* Profile banner - adjust height */
  .profile-banner-area {
    height: 200px;
    padding-top: 60px;
    padding-bottom: 20px;
  }
  
  .profile-banner-content h1 {
    font-size: 28px;
  }
  
  .profile-banner-content ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .profile-banner-content ul li {
    font-size: 14px;
    margin-right: 8px;
    margin-bottom: 5px;
  }
  
  /* Stats display - stack on mobile */
  .donation-stats {
    align-items: flex-start;
    margin-top: 15px;
  }
  
  .stat-item {
    margin-bottom: 10px;
  }
  
  /* Impact stats - stack properly */
  .impact-stats .col-md-4 {
    margin-bottom: 20px;
  }
  
  /* Quick actions - stack on mobile */
  .col-md-4.mb-3 {
    margin-bottom: 15px !important;
  }
  
  /* Card headers - adjust padding */
  .card-header {
    padding: 12px 15px;
  }
  
  /* Table in cards - ensure proper scrolling */
  .card-body .table-responsive {
    margin: -15px;
    padding: 15px;
  }
  
  /* Form sections - stack properly */
  .col-md-6,
  .col-md-4,
  .col-md-3 {
    margin-bottom: 15px;
  }
  
  /* Login/Form areas - adjust padding */
  .login-area,
  .contact-area {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  
  /* Contact info - stack on mobile */
  .contact-info {
    margin-top: 30px;
  }
  
  /* Team cards - ensure proper spacing */
  .team-item {
    margin-bottom: 30px;
  }
  
  /* Donation cards - stack properly */
  .donation-item {
    margin-bottom: 20px;
  }
  
  /* Page title areas - adjust height */
  .page-title-area {
    padding-top: 60px;
    padding-bottom: 20px;
  }
  
  .page-title-content h2 {
    font-size: 28px;
  }
  
  /* Banner areas - adjust for mobile */
  .login-banner-area {
    height: 180px;
    padding-top: 40px;
  }
  
  .login-banner-content h1 {
    font-size: 28px;
  }
  
  /* Form groups - better spacing */
  .form-group {
    margin-bottom: 20px;
  }
  
  /* Input groups - stack on mobile */
  .input-group {
    flex-wrap: wrap;
  }
  
  .input-group-prepend {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .input-group-prepend + .form-control {
    width: 100%;
  }
  
  /* Country code select - full width on mobile */
  .country-code-select {
    width: 100% !important;
  }
  
  /* Cards - adjust padding */
  .card-body {
    padding: 15px;
  }
  
  /* Buttons - ensure touch-friendly */
  .btn,
  .common-btn,
  .default-btn {
    min-height: 44px;
    padding: 10px 20px;
    font-size: 16px;
  }
  
  /* Alert messages - better visibility */
  .alert {
    font-size: 14px;
    padding: 12px 15px;
  }
  
  /* Text areas - better sizing */
  textarea.form-control {
    min-height: 100px;
  }
  
  /* Ensure about image is visible behind play button */
  .about-area .about-img {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    overflow: visible !important;
  }
  
  .about-area .about-img img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Video wrap button - ensure it's above the image but image is visible */
  .about-area .about-img .video-wrap {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
    pointer-events: auto !important;
  }
  
  .about-area .about-img .video-wrap .js-modal-btn {
    background: rgba(255, 96, 21, 0.9) !important;
    border: 2px solid #fff !important;
  }
  
  /* About section - ensure proper stacking on mobile */
  .about-area .row {
    display: flex;
    flex-direction: column;
  }
  
  .about-area .col-lg-6 {
    width: 100%;
    margin-bottom: 30px;
  }
  
  /* Donate CTA button - responsive text sizing */
  .donate-cta-btn {
    min-width: auto !important;
    max-width: 100%;
    width: 100%;
    padding: 30px 20px !important;
    margin: 0 15px;
  }
  
  .donate-cta-title {
    font-size: 1.5em !important;
    line-height: 1.3;
    padding: 0 10px;
  }
  
  .donate-cta-line2,
  .donate-cta-line3 {
    font-size: 0.95em !important;
    line-height: 1.4;
    padding: 0 15px;
    word-wrap: break-word;
  }
  
  .donate-cta-texts {
    max-width: 100%;
    padding: 0 10px;
  }
  
  .donate-cta-standalone {
    padding: 0 15px;
  }
  
  /* Hide header area in mobile */
  .header-area {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  
  /* Navbar - Always visible horizontal menu with dynamic sizing */
  .navbar-area {
    display: block !important;
    visibility: visible !important;
  }
  
  .main-nav {
    display: block !important;
    visibility: visible !important;
  }
  
  /* Hide hamburger menu */
  .navbar-toggler {
    display: none !important;
  }
  
  /* Navbar layout - 50/50 split: logo on left, buttons on right */
  .main-nav nav {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  
  /* Logo - left half (50%) */
  .navbar-brand {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: auto;
    padding-right: 10px;
    box-sizing: border-box;
  }
  
  /* Logo - keep original size unless space is an issue */
  .navbar-brand img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 80px !important;
    object-fit: contain;
  }
  
  /* Buttons container - right half (50%) */
  .navbar-header-mobile {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    margin-left: 0 !important;
    padding-left: 10px;
    box-sizing: border-box;
  }
  
  .navbar-buttons-mobile {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px;
    width: 100%;
    max-width: 100%;
  }
  
  /* Use same button styles as desktop - EXACT same width */
  .navbar-buttons-mobile .user-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
    background-color: rgba(41, 128, 185, 0.7) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 !important;
  }
  
  .navbar-buttons-mobile .user-btn:hover {
    background-color: rgba(52, 152, 219, 0.9) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  }
  
  .navbar-buttons-mobile .user-btn .user-profile-img,
  .navbar-buttons-mobile .user-btn .user-profile-initials {
    margin-right: 6px;
    flex-shrink: 0;
  }
  
  .navbar-buttons-mobile .user-btn i {
    margin-right: 4px;
    flex-shrink: 0;
  }
  
  .navbar-buttons-mobile .donate-btn {
    display: inline-block !important;
    color: #fff !important;
    background-color: #ff6015 !important;
    border-radius: 30px !important;
    padding: 10px 25px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 14px !important;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
    margin: 0 !important;
  }
  
  .navbar-buttons-mobile .donate-btn:hover {
    background-color: #302c51 !important;
    color: #fff !important;
    transform: translate(0, -5px);
  }
  
  .navbar-buttons-mobile .donate-btn i {
    display: inline-block;
    margin-left: 3px;
    font-size: 14px;
    -webkit-animation: heart-beat 2s infinite linear;
    animation: heart-beat 2s infinite linear;
  }
  
  /* Navbar layout - flex container */
  .main-nav nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
  }
  
  /* Ensure logo and buttons align properly */
  .navbar-brand {
    display: flex;
    align-items: center;
    height: 100%;
  }
  
  .navbar-header-mobile {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
  }
  
  /* Menu container - vertical stacking with tight spacing, no margin after */
  .navbar-menu-container {
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    order: 3;
    flex-basis: 100% !important;
    flex: 0 0 100% !important;
    overflow: visible !important; /* CRITICAL: Allow dropdowns to be visible */
  }
  
  /* FORCE remove all spacing after navbar-menu-container */
  .navbar-menu-container:after {
    display: none !important;
    content: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
  }
  
  /* Remove ALL spacing after menu */
  .navbar-menu-container .navbar-nav {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .navbar-menu-container .navbar-nav .nav-item:last-of-type,
  .navbar-menu-container .navbar-nav .nav-item:last-of-type .nav-link,
  .navbar-menu-container .navbar-nav .nav-item:nth-last-child(2),
  .navbar-menu-container .navbar-nav .nav-item:nth-last-child(2) .nav-link {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }
  
  .navbar-menu-container .navbar-nav .dropdown.show:last-of-type .dropdown-menu,
  .navbar-menu-container .navbar-nav .dropdown.show:nth-last-child(2) .dropdown-menu {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }
  
  /* Remove any spacing from dropdown menu items */
  .navbar-menu-container .navbar-nav .dropdown-menu .nav-item:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }
  
  .navbar-menu-container .navbar-nav .dropdown-menu .nav-item:last-child .nav-link {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }
  
  /* Ensure no gap after navbar - remove all margins and padding */
  .navbar-area {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .main-nav {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .main-nav .container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .main-nav nav {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Remove spacing after the entire navbar area */
  .navbar-area + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Navbar menu - vertically stacked, no gap */
  .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important; /* CRITICAL: Allow dropdowns to be visible */
  }
  
  /* Force remove all spacing after navbar-nav */
  .navbar-nav::after {
    content: none !important;
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Hide Home and Contact in mobile */
  .navbar-nav .nav-item:first-child,
  .navbar-nav .nav-item:last-child {
    display: none !important;
  }
  
  .navbar-nav .nav-item {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .navbar-nav .nav-link {
    display: flex !important; /* Changed from block to flex */
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 15px !important;
    text-align: left;
    color: #333;
    font-size: 14px !important;
    font-weight: 500;
    transition: color 0.3s ease, background-color 0.3s ease;
    text-decoration: none;
    border-bottom: 1px solid #e9ecef;
    width: 100%;
    line-height: 1.3;
    margin: 0 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure dropdown toggles are always clickable */
  .navbar-nav .nav-item.dropdown .nav-link {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 100 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  .navbar-nav .nav-item.dropdown .nav-link i {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 101 !important;
    position: relative !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
  
  /* Our Impact - remove dropdown styling on mobile (it's a direct link) */
  #ourImpactMenuItem:not(.dropdown) .nav-link {
    display: block !important;
    justify-content: flex-start !important;
  }
  
  #ourImpactMenuItem:not(.dropdown) .nav-link i {
    display: none !important;
  }
  
  /* Remove border from last visible item (Our Impact) - always */
  .navbar-nav .nav-item:nth-last-child(2) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .navbar-nav .nav-item:nth-last-child(2) .nav-link {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 8px !important;
  }
  
  /* CRITICAL: Remove ALL spacing after Our Impact menu item */
  .navbar-nav .nav-item:nth-last-child(2):last-of-type,
  .navbar-nav .nav-item:nth-last-child(2) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }
  
  .navbar-nav .nav-item:nth-last-child(2) .nav-link:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 8px !important;
  }
  
  /* Remove spacing when Our Impact dropdown is open */
  .navbar-nav .nav-item:nth-last-child(2).dropdown.show {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .navbar-nav .nav-item:nth-last-child(2).dropdown.show .dropdown-menu {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .navbar-nav .nav-item:nth-last-child(2).dropdown.show .dropdown-menu .nav-item:last-child .nav-link {
    margin-bottom: 0 !important;
    padding-bottom: 10px !important;
  }
  
  /* AGGRESSIVE: Remove any possible spacing after the last menu item */
  .navbar-nav .nav-item:last-child,
  .navbar-nav .nav-item:nth-last-child(2) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .navbar-nav .nav-item:last-child::after,
  .navbar-nav .nav-item:nth-last-child(2)::after {
    display: none !important;
    content: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
  }
  
  /* Remove spacing from the entire nav container after last item - REMOVED to fix dropdown issues */
  
  /* Remove border from dropdown menu when it's the last item */
  .navbar-nav .nav-item:nth-last-child(2).dropdown .dropdown-menu {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .navbar-nav .nav-item:nth-last-child(2).dropdown .dropdown-menu .nav-item:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .navbar-nav .nav-item:nth-last-child(2).dropdown .dropdown-menu .nav-item:last-child .nav-link {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 10px !important;
  }
  
  /* Ensure no margin/padding after the last dropdown item */
  .navbar-nav .nav-item:nth-last-child(2).dropdown,
  .navbar-nav .nav-item:nth-last-child(2).dropdown.show {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Remove ALL spacing after the menu - ensure menu bar ends right after Our Impact */
  .navbar-menu-container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  
  .navbar-menu-container::after,
  .navbar-menu-container::before {
    content: none !important;
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
  }
  
  .navbar-menu-container .navbar-nav {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  
  .navbar-menu-container .navbar-nav::after,
  .navbar-menu-container .navbar-nav::before {
    content: none !important;
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
  }
  
  .navbar-menu-container .navbar-nav .nav-item:nth-last-child(2) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .navbar-menu-container .navbar-nav .nav-item:nth-last-child(2).dropdown.show {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .navbar-menu-container .navbar-nav .nav-item:nth-last-child(2).dropdown.show .dropdown-menu {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .navbar-menu-container .navbar-nav .nav-item:nth-last-child(2).dropdown.show .dropdown-menu .nav-item:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .navbar-menu-container .navbar-nav .nav-item:nth-last-child(2).dropdown.show .dropdown-menu .nav-item:last-child .nav-link {
    margin-bottom: 0 !important;
    padding-bottom: 10px !important;
  }
  
  /* Force remove any spacing after navbar-menu-container */
  .navbar-menu-container + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Remove spacing from main-nav container */
  .main-nav {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .main-nav .container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .main-nav nav {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Remove spacing from navbar-area */
  .navbar-area {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .navbar-area::after {
    display: none !important;
    content: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
  }
  
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link.active {
    color: #ff6015;
    background-color: #f8f9fa;
  }
  
  /* Dropdown menus - inline expansion, pushes content down - match desktop background */
  .navbar-nav .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #302c51 !important; /* Match desktop dropdown background */
    border: none;
    box-shadow: none;
    border-radius: 0;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
    display: block !important;
    visibility: hidden !important;
  }
  
  /* CRITICAL: Make dropdown visible when show class is present - Multiple selectors to ensure it works */
  .navbar-nav .dropdown.show > .dropdown-menu,
  .navbar-nav .nav-item.dropdown.show .dropdown-menu,
  .navbar-nav .nav-item.dropdown.show > .dropdown-menu,
  .nav-item.dropdown.show .dropdown-menu,
  .navbar-nav .nav-item.dropdown.show ul.dropdown-menu,
  .navbar-nav li.dropdown.show .dropdown-menu,
  .navbar-nav li.nav-item.dropdown.show .dropdown-menu {
    max-height: 1000px !important;
    opacity: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
  }
  
  /* Additional selector for Our Impact specifically */
  .navbar-nav .nav-item:nth-last-child(2).dropdown.show .dropdown-menu,
  .navbar-nav .nav-item.dropdown.show .dropdown-menu {
    max-height: 1000px !important;
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
    height: auto !important;
  }
  
  .navbar-nav .dropdown-menu .nav-item {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .navbar-nav .dropdown-menu .nav-item:last-child {
    border-bottom: none;
  }
  
  .navbar-nav .dropdown-menu .nav-link {
    padding: 10px 30px !important;
    font-size: 14px !important;
    color: #fff !important; /* White text for dark background */
    text-align: left;
    white-space: normal;
    display: block;
    width: 100%;
    background-color: transparent;
    position: relative;
  }
  
  .navbar-nav .dropdown-menu .nav-link:before {
    position: absolute;
    content: '';
    width: 5px;
    height: 5px;
    top: 18px;
    left: 15px;
    background-color: #ff6015;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.5s all ease;
    transition: 0.5s all ease;
  }
  
  .navbar-nav .dropdown-menu .nav-link:hover,
  .navbar-nav .dropdown-menu .nav-link:focus,
  .navbar-nav .dropdown-menu .nav-link.active {
    color: #fff !important;
    padding-left: 30px !important;
    background-color: transparent;
  }
  
  .navbar-nav .dropdown-menu .nav-link:hover:before,
  .navbar-nav .dropdown-menu .nav-link:focus:before,
  .navbar-nav .dropdown-menu .nav-link.active:before {
    opacity: 1;
    visibility: visible;
  }
  
  /* Dropdown toggle icon - FIXED for mobile */
  .navbar-nav .dropdown-toggle {
    position: relative;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }
  
  .navbar-nav .dropdown-toggle i {
    transition: transform 0.3s ease;
    position: static !important; /* Changed from absolute to static */
    right: auto !important;
    top: auto !important;
    transform: none !important;
    font-size: 12px;
    margin-left: auto !important; /* Push to right */
    flex-shrink: 0 !important;
    order: 2 !important;
  }
  
  .navbar-nav .dropdown.show > .dropdown-toggle i,
  .navbar-nav .nav-item.dropdown.show .dropdown-toggle i {
    transform: rotate(180deg) !important;
  }
  
  /* Hide side-nav in mobile (buttons moved to header) */
  .side-nav {
    display: none !important;
  }
}

/* Desktop styles - show side-nav, hide mobile header */
@media only screen and (min-width: 992px) {
  .navbar-header-mobile {
    display: none !important;
  }
  
  /* Logo visible on desktop */
  .navbar-brand {
    display: block !important;
    flex-shrink: 0;
    margin-right: 20px;
  }
  
  .navbar-menu-container {
    flex: 1;
    display: flex;
    align-items: center;
    margin: 0;
  }
  
  .side-nav {
    display: flex !important;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: 15px;
  }
  
  /* Desktop navbar - horizontal layout */
  .main-nav nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  
  .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
  }
  
  .navbar-nav .nav-item {
    display: inline-flex;
    margin: 0;
  }
  
  .navbar-nav .nav-link {
    padding: 15px 15px;
    font-size: 16px;
    white-space: nowrap;
  }
  
  /* Desktop dropdowns */
  .navbar-nav .dropdown-menu {
    position: absolute !important;
    min-width: 220px;
    max-height: none;
    overflow-y: visible;
  }
}

/* Extra small devices (phones, 320px and up) */
@media only screen and (max-width: 575px) {
  /* Even smaller adjustments for very small screens */
  .profile-banner-content h1,
  .login-banner-content h1,
  .page-title-content h2 {
    font-size: 24px;
  }
  
  .profile-banner-area,
  .login-banner-area {
    height: 150px;
    padding-top: 30px;
  }
  
  /* Stats - stack vertically */
  .donation-stats {
    width: 100%;
  }
  
  .stat-item {
    width: 100%;
    text-align: left;
  }
  
  /* Cards - full width */
  .col-md-3,
  .col-md-4,
  .col-md-6 {
    width: 100%;
    margin-bottom: 15px;
  }
  
  /* Table - smaller font */
  .table {
    font-size: 14px;
  }
  
  .table th,
  .table td {
    padding: 8px 5px;
  }
  
  /* Donate CTA - extra small screens */
  .donate-cta-btn {
    padding: 25px 15px !important;
    margin: 0 10px;
  }
  
  .donate-cta-title {
    font-size: 1.3em !important;
  }
  
  .donate-cta-line2,
  .donate-cta-line3 {
    font-size: 0.85em !important;
    padding: 0 10px;
  }
  
  .donate-cta-logo-bg {
    width: 80px !important;
    height: 80px !important;
    margin-bottom: 15px;
  }
  
  .donate-cta-logo {
    width: 60px !important;
    height: 60px !important;
  }
}