/* ==========================================================================
     1. BASE RESET & TYPOGRAPHY
     ========================================================================== */
  *, *::before, *::after { box-sizing: border-box; }
  
  .eci-group-container {
    --li-card-bg: #ffffff;
    --li-border: #e0e0df;
    --li-text-main: rgba(0, 0, 0, 0.9);
    --li-text-muted: rgba(0, 0, 0, 0.6);
    --li-blue: #0a66c2;
    --li-blue-hover: #004182;
    color: var(--li-text-main);
    margin: 0 auto;
  }

  .eci-group-container h2, .eci-group-container h3, .eci-group-container p { margin: 0; padding: 0; }
  .eci-group-container a { color: var(--li-blue); text-decoration: none; }
  .eci-group-container img { border-style: none; max-width: 100%; display: block; }

  /* ==========================================================================
     2. LINKEDIN-STYLE CARDS & LAYOUT
     ========================================================================== */
  .li-card {
    background-color: var(--li-card-bg);
    // border-radius: 25px;
    border-bottom: 1px solid var(--li-border);
    margin-bottom: 16px;
    overflow: hidden;
  }

  /* Profile Header (Banner Container) */
  .detail-top { position: relative; height: 200px; width: 100%; background-color: #f3f2ef; }
  .newsfeed-post-image { width: 100%; height: 100%; object-fit: cover; }

  /* Floating UI Overlays */
  .back-button-overlay, .edit-image-icon {
    position: absolute; top: 16px; background: #ffffff; border-radius: 50%; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.15); z-index: 10;
  }
  .back-button-overlay { left: 16px; }
  .edit-image-icon { right: 16px; }

  /* ==========================================================================
     3. PROFILE INFO & OVERLAY FIX
     ========================================================================== */
  .eci-fields-group-caption { padding: 0 24px 24px 24px; display: flex; flex-wrap: wrap; gap: 24px; }

  /* This pulls the logo up so it overlaps the banner */
  .overlay-logo-container { flex: 0 0 auto; position: relative; z-index: 5; }
  
  .group-logo {
    width: 140px; height: 140px; border: 4px solid var(--li-card-bg); border-radius: 4px;
    background: #ffffff; box-shadow: 0 4px 8px rgba(0,0,0,0.1); object-fit: cover;
  }

  .li-title-block { flex: 1 1 300px; margin-top: 10px; }
  .li-group-title { color: var(--li-text-main);}

  /* ==========================================================================
     4. EXACT SIZING FIXES (Affiliations & QR Code)
     ========================================================================== */
  .affiliation-logo-img {
    max-height: 3em; 
    margin-right: 1em; 
    width: auto;
  }
  
  .qr-code-img {
    max-height: 10rem; 
    position: relative; 
    float: right;
  }

  /* ==========================================================================
     5. BUTTON DEFINITIONS & NAVIGATION
     ========================================================================== */
  /* Menu Tabs */
  .eci-nav-actions { border-top: 1px solid var(--li-border); padding: 0 24px; background: var(--li-card-bg); }
  .li-nav-links { display: flex; align-items: center; gap: 24px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .li-nav-links::-webkit-scrollbar { display: none; }
  
  .btn-tab { color: var(--li-text-muted); padding: 16px 0; border-bottom: 2px solid transparent; display: inline-block; }
  .btn-tab:hover { color: var(--li-text-main); border-bottom-color: var(--li-text-muted); text-decoration: none; }
  .btn-primary-tab { color: var(--li-blue); }
  .btn-primary-tab:hover { color: var(--li-blue-hover); border-bottom-color: var(--li-blue); }

  /* Admin Buttons */
  .admin-bar { padding: 16px 24px; }
  .admin-flex-end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
  .btn-warning { border-radius: 24px; padding: 6px 16px; font-weight: 600; font-size: 0.95rem; background-color: transparent; color: var(--li-blue); border: 1px solid var(--li-blue); display: inline-block; }
  .btn-warning:hover { background-color: rgba(10, 102, 194, 0.1); box-shadow: inset 0 0 0 1px var(--li-blue); text-decoration: none; }

  /* ==========================================================================
     6. CONTENT SECTIONS & ANIMATION
     ========================================================================== */
  .li-section-title { font-size: --font-size-md; font-weight: 600; margin-bottom: 16px; }
  .eci-contact-details, .group-description { padding-left: 3.5rem; padding-right: 3.5rem; padding-top: 1rem; padding-bottom:1.5rem; }
  .eci-field { margin-bottom: 8px; // font-size: 1rem; }
  .eci-field-name { font-weight: 600; margin-right: 8px; }
  .li-description-text { font-size: --font-size-md; line-height: 1.6; }
  .li-text-link { color: var(--li-blue); font-weight: 600; }
  .li-text-link:hover { text-decoration: underline; }
  .eci-footer-meta { padding: 16px 24px; font-size: 1rem; font-weight: 600; }

  /* Pure CSS Animation */
  @keyframes delayedFadeIn { 0%, 80% { opacity: 0; visibility: hidden; pointer-events: none; } 100% { opacity: 1; visibility: visible; pointer-events: auto; } }
  .animated-reveal { animation: delayedFadeIn 2.5s forwards; }


/* 1. Main Container Logic */
.eci-dropdown {
  position: relative !important;
  display: inline-block;
  /* Ensure the container itself sits above other site content */
  z-index: 9999; 
  /* Critical: Prevent parent from clipping the menu */
  overflow: visible !important; 
}

/* 2. Hide the functional checkbox */
.eci-dropdown-checkbox {
  display: none !important;
}

/* 3. The Trigger Button */
.eci-dropdown-trigger {
  cursor: pointer;
  display: inline-block;
  user-select: none;
  /* Standard button styling - adjust as needed */
  padding: 8px 16px;
  background-color: #ffc107; 
  border-radius: 4px;
  font-weight: bold;
}

/* 4. The "Separate Window" (The Dropdown) */
.eci-dropdown-content {
  display: none; /* Hidden by default */
  position: absolute;
  top: 110%; /* Sits just below the button */
  right: 0;   /* Aligns to the right edge of the button */
  min-width: 240px;
  background-color: #ffffff !important;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  
  /* MAXIMUM PRIORITY: Forces it to stay on top */
  z-index: 999999 !important; 
  padding: 8px 0;
  text-align: left;
}

/* 5. TOGGLE ACTION: When checkbox is checked, show the window */
.eci-dropdown-checkbox:checked ~ .eci-dropdown-content {
  display: block !important;
}

/* 6. Individual Menu Items */
.eci-dropdown-item {
  display: block !important;
  padding: var(--utilities-spacing-1) var(--utilities-spacing-1);
  text-decoration: none !important;
  font-size: 14px;
  transition: background 0.2s ease;
}

.eci-dropdown-item:hover {
  background-color: #f4f4f4 !important;
  color: #000 !important;
}

/* 7. Site-wide override to prevent clipping */
/* Apply this if your admin bar is inside a header with 'overflow:hidden' */
.admin-bar, .eci-fields-group {
  overflow: visible !important;
}