.submenu-arrow {
            font-size: 0.7em;
            margin-left: 5px;
            transition: transform 0.3s;
        }
        .has-submenu:hover .submenu-arrow { transform: rotate(180deg); }

        /* Submenus (Filters) */
        .filters {
            display: none;
            position: absolute;
            top: 100%; /* Position right below the main link */
            left: -10px;
            background-color: var(--card-background);
            min-width: 250px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            border-radius: 8px;
            padding: 10px 0;
            z-index: 100;
            border: 1px solid var(--border-color);
            transform-origin: top;
            animation: fadeIn 0.2s ease-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-5px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .has-submenu:hover .filters {
            display: block;
        }
        
        .filters ul { list-style: none; padding: 0; margin: 0; }
        .filters li a {
            padding: 8px 15px;
            display: block;
            font-size: 14px;
            color: var(--light-text-color);
        }
        .filters li a:hover {
            background-color: rgba(var(--primary-color-rgb), 0.1);
            color: var(--primary-color);
        }
        
       /* Custom Buttons */
        
        
        .settings-btn{
            background: none;
            border: none;
            color: var(--header-text);
            font-size: 18px;
            cursor: pointer;
            transition: color 0.3s ease, transform 0.1s;
            padding: 5px;
            
        }
        
        .settings-btn:active  
        						 {
            transform: scale(0.95);
        }

/* --- Desktop Rule: Hide all elements specifically marked as mobile-only --- */
@media (min-width: 921px) {
    .mobile-only {
        display: none !important;
    }
}
        
        
        /* --- Mobile Navigation Overrides --- */
        @media (max-width: 920px) {
			.settings-btn { display: none; } 
			

            
            .menu-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: var(--mobile-menu-overlay-bg);
                z-index: 899;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.4s ease;
            }
            .menu-overlay.open {
                opacity: 1;
                visibility: visible;
            }


            
            /* Submenu in Mobile */
            .filters {
                position: static;
                display: none;
                width: 100%;
                box-shadow: none;
                background: transparent;
                padding: 10px 0 10px 20px;
                border: none;
                animation: none;
            }
            /* Show submenu when active/toggled on mobile */
            .has-submenu.open .filters {
                display: block;
            }
            .filters li a {
                padding: 5px 0;
            }

            /* Mobile specific menu items */
            .mobile-only {
                display: block;
                
            }
            .mobile-only a {
                display: flex;
                align-items: center;
                width: 100%;
                color: var(--primary-color) !important;
                font-weight: 700 !important;
            }
            .mobile-only a i { margin-right: 10px; font-size: 1.2em; }


        }
        
        /* --- Mobile Settings Curtain (WhatsApp Style) --- */
        .full-curtain {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--background-color);
            z-index: 1100;
            visibility: hidden;
            opacity: 0;
            transition: opacity var(--transition-speed) ease;
        }
        .full-curtain.active {
            visibility: visible;
            opacity: 1;
            display: block;
        }

        .curtain-page {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--background-color);
            transform: translateX(100%);
            transition: transform 0.3s ease-out;
            overflow-y: auto;
/*            padding-top: 36px; */
        }
        .curtain-page.active {
            transform: translateX(0);
        }




        .settings-item-icon {
            font-size: 1.4em;
            width: 30px;
            min-width: 30px;
            margin-right: 15px;
            text-align: center;
            color: var(--primary-color); /* Default icon color */
        }


        
        /* Sub-settings list (Level 2/3) */
        .settings-list-sub li a {
            padding: 3px 20px;
            font-size: 0.95em;
        }
        .settings-list-sub li a i {
            display: none; /* Hide icons in sub-list for cleaner look */
        }

        /* --- Desktop Settings Modal (Two-Pane) --- */
        .desktop-settings-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 1200;
            align-items: center;
            justify-content: center;
        }
        .desktop-settings-modal.active {
            display: flex;
        }
        .profile-modal-content {
            background-color: var(--model-bg);
            border-radius: 12px;
            width: 100%;
            max-width: 1200px;
            height: 85vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            animation: modalSlideDown 0.3s ease-out;
        }
        @keyframes modalSlideDown {
            from { opacity: 0; transform: translateY(-50px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .desktop-modal-header {
/*            position: static;*/
			position: absolute;
            box-shadow: none;
            border-bottom: 1px solid var(--border-color);
        }
        .close-modal-btn {
            background: none;
            border: none;
            color: var(--text-color);
            font-size: 1.2em;
            cursor: pointer;
            padding: 5px;
        }

        .two-pane-layout {
            display: flex;
            flex-grow: 1;
            overflow: hidden;
        }

        .settings-sidebar {
            width: 250px;
            min-width: 250px;
            background-color: var(--card-background);
            padding: 6px 20px;
            border-right: 1px solid var(--border-color);
            overflow-y: auto;
			margin-top: 9px;
        }
        .settings-sidebar h2 {
            color: var(--primary-color);
            margin-bottom: 15px;
        }
        .settings-nav-desktop {
            list-style: none;
            padding: 0;
        }
        .settings-nav-desktop li a {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            margin-bottom: 5px;
            text-decoration: none;
            color: var(--text-color);
            border-radius: 6px;
            transition: background-color 0.2s;
        }
        .settings-nav-desktop li a i {
            margin-right: 10px;
            color: var(--primary-color);
        }
        .settings-nav-desktop li a:hover,
        .settings-nav-desktop li.active a {
            background-color: rgba(var(--primary-color-rgb), 0.1);
            color: var(--primary-color);
        }

        .settings-content-area {
            flex-grow: 1;
            padding: 3px 20px;
            overflow-y: auto;
            position: relative;
			margin-top: 0px;
			min-width: 726px;
        }

        .settings-content {
            display: none;
        }
        .settings-content.active {
            display: block;
        }

        
        
        /* Hide mobile settings on desktop and vice-versa */
        @media (min-width: 921px) {
            .full-curtain { display: none !important; }
        }



/* This ensures it's hidden off-screen on smaller devices */
@media (max-width: 920px) {

}

/* --- Mobile Menu Active (Visible) State --- */


/* Optional: To lock body scroll when menu is open */
body.menu-open {
    overflow: hidden;
}


/* This ensures they are ready to slide in */
.sub-menu {
    position: absolute;
    top: 0;
    left: 100%; /* Position the sub-menu off-screen to the right */
    width: 100%;
    height: 100%;
    background-color: var(--mobile-menu-bg); /* Match the main menu background */
    transition: transform var(--transition-speed, 0.3s) ease-in-out;
    overflow-y: auto;
    /* Ensure only applied on mobile */
    @media (min-width: 921px) {
        position: static;
        left: auto;
        transform: none;
    }
}


/* If the parent container (e.g., .menu-list) shifts when a submenu is opened: */
.nav-wrapper ul.menu-list.submenu-open {
    transform: translateX(-100%); /* Shifts the main view to the left */
}

/* This is a common method: The sub-menu slides into view */
.sub-menu.active {
    transform: translateX(-100%); /* Slides the sub-menu left over the main menu */
}



/* setting mobile */

.settingmenu-header{
	    padding: 9px 20px 10px 28px;
    color: var(--primary-color);
    font-size: 24px;
    font-weight: 600;
}



/* --- Global Styling for the back-button-band --- */
.back-button-band2 {
/*  position: sticky;*/
  top: 0; 
  left: 0;
  width: 100%;
  background: var(--background-color);
  z-index: 1000;
  padding: 0px 12px;
	height: 60px;
	position: sticky;
}

/* Inner wrapper to center and constrain width */
.back-button-band2 .back-button-inner2 {
  max-width: 1400px;
  margin: 10px auto;
  display: flex;
  justify-content: space-between; 
  align-items: center;
	font-size: 20px;
    color: var(--text-blue-to-darkblue-color);
    font-weight: 600;
}


/* --- Global Styling for the back-button-band --- */
.back-button-band3 {
  position: sticky;
  top: 0; 
  left: 0;
  width: 100%;
  background: var(--background-color);
  z-index: 1000;
  padding: 0px 12px;
}

/* Inner wrapper to center and constrain width */
.back-button-band3 .back-button-inner3 {
  max-width: 1400px;
  margin: 10px auto;
  display: flex;
  justify-content: space-between; 
  align-items: center;
}

/* --- Mobile-Specific (Full Curtain) --- */
/* The key is that the *page* content must be scrollable, not the entire curtain */
#settings-curtain .curtain-page {
    /* The parent of .back-button-band needs to be a block-level container
       and must contain the scrollable content.
    */
    display: flex;
    flex-direction: column;
    height: 100%; /* Important: Takes up full height of viewport */
    overflow-y: auto; /* Enables vertical scrolling for the page content */
    -webkit-overflow-scrolling: touch; /* Improves smooth scrolling on iOS */
}

.dropdown{
	  
	  padding: 9px;
	  margin: 18px;
	  border: 2px solid #000f29;
	  border-radius: 8px;
	  font-size: 18px;
	  font-weight: 400;	
 	height: 50px;
     transition: border-color 0.3s ease;

}

/* Optional: Adjust header margin below the sticky band for the mobile main page */
#settings-main .settingmenu-header {
/*    margin-top: 15px; */
}


/* --- Desktop-Specific (Two-Pane Modal) --- */
/* Ensure the desktop header is also sticky within the right pane's scroll area */
.desktop-settings-modal .settings-content-area {
    /* This is the right-hand panel where content is scrollable. 
       It needs overflow for sticky to work. */
    overflow-y: auto;
}

/* The desktop back-button-band is used as the modal header.
   The class `desktop-modal-header` is already on the element. */
.desktop-modal-header {
    /* It is already targeted by the general .back-button-band rule,
       but you can be more specific here if needed. */
    /* position: sticky; */
    /* top: 0; */
}

.divisiontop{

	
	margin-top: 12px;
    margin-bottom: 6px;
/*	max-width: 1200px;*/
	
}

/* --- Settings Profile Card (Sleek Mobile Header) --- */
/* Use 'a' tag selector since we made it a link to keep navigation active */
.settings-profile-card {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    text-decoration: none; /* Remove underline from the link */
    color: inherit; /* Ensure text inherits color unless specified */
    border-bottom: 1px solid var(--border-color); /* Separator line */
    background-color: var(--background-color); 
    cursor: pointer;
    transition: background-color 0.1s ease;
}

/* Ensure the card is only visible on mobile */
@media (min-width: 921px) {
    .settings-profile-card {
        display: none !important;
    }
}

.settings-profile-card:hover {
    background-color: var(--card-background); /* Subtle hover effect */
}

.profile-avatar img {
    width: 55px; /* Size of the circular avatar */
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    /* You can add a border if needed: border: 2px solid var(--primary-color); */
}

.profile-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Pushes the QR button to the right */
	padding-left: 18px;
}

.profile-name {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-color); /* Darker text for name */
}

.profile-status {
    font-size: 0.85em;
    color: var(--light-text-color); /* Lighter text for status */
    margin-top: 2px;
}

.profile-qr-button {
    color: var(--primary-color);
    font-size: 1.5em;
    padding: 10px;
    margin-left: 15px;
    /* Use span/i to contain the icon if the parent is the <a> tag */
}


/* 1. Target the link (which acts as the row container) */
.settings-list li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-color);
    /* CUT SPACE: Reduced vertical padding (height) for a more compact look (was 10px) */
    padding: 8px 15px; 
	list-style: none;
    transition: background-color 0.15s;
/*
	border: 1px solid var(--bottom-line);
    margin-bottom: 6px;
    border-radius: 9px;
*/
}

.settings-list li a:hover {
    background-color: var(--hover-color, rgba(0, 0, 0, 0.05));
}

/* 2. Target the Icon */
.settings-item-icon {
    /* CUT SPACE: Significantly less margin to pull the icon closer to the text block (was 15px) */
    margin-right: 12px; 
    /* Ensure icon size is readable but not oversized */
    font-size: 1.35em;
    width: 28px; /* Fixed width for alignment */
    text-align: center;
}

/* 3. Target the main content block (Name + Description) */
.settings-item-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Remove padding/margin that might be causing large gaps */
    padding: 0; 
}

/* 4. Target the main text (Account, Privacy, etc.) */
.settings-item-content span {
    font-size: 16px; /* Standard size for main setting name */
    font-weight: 500;
/*    line-height: 0.1; */
    color: var(--text-color);
}

/* 5. Target the detail/small text */
.settings-item-content small {
    font-size: 0.8em; /* Slightly smaller size for details */
    line-height: 1.2; /* Tighten up line height */
    color: var(--light-text-color, #6c757d);
    display: block; /* Ensure it takes up its own line */
    /* CUT SPACE: Reduced gap between title and subtitle (was 2px) */
    margin-top: 1px; 
}

/* 6. Target the Chevron Icon (on the far right) */
.settings-list li a .fa-chevron-right {
    color: var(--light-text-color, #aaa);
    font-size: 0.75em;
    margin-left: 15px;
}


.btn-theme {
    display: inline-block;
    background-color: var(--primary-color);
    color: #000f29;
    text-transform: uppercase;
    padding: 12px 12px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    font-weight: 700;
    transition: background-color 0.3s ease;
    white-space: nowrap;
    font-size: 14px;
    margin: 12px;
}




  /* --- content list to simulate settings menu --- */
  .settings-wrap {
	padding:  12px 6px 11px 18px;
/*
  width: 100%;
  margin: 18px 12px;
  padding: 8px;
*/
/*  overflow-y: auto;            */
  -webkit-overflow-scrolling: touch; /* smooth scrolling on mobile */
}
  .settings-list{
/*    background:#fff;*/
    border-radius:12px;
    box-shadow:0 1px 2px rgba(0,0,0,0.04);
/*    overflow:hidden;*/
	  margin: 0px 9px;
    list-style: none;
  }
  .settings-list .row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px;
    border-bottom:1px solid #f1f1f1;
  }
  .settings-list .row:last-child{ 
	  border-bottom:0;
    width: 100%;
    color: #00bbff;
    padding: 6px 3px 12px 6px;
}
  .icon{ width:36px; text-align:center; color:#666; }
  .title{ 
	  font-weight:600; 
}
  .subtitle{ 
	  color:#aaa; 
	  font-size:13px; 
	  margin-top:2px; 
	  line-height: 1.2;
}

  /* --- highlight overlay and boxes --- */
  .highlights-overlay{
    pointer-events:none; /* let clicks pass unless you want blocking */
    position:fixed;
    inset:0;
    z-index:80;
  }
  .dim{
    position:absolute;
    inset:0;
    background:var(--overlay);
    transition:opacity .25s;
    border-radius:0;
    pointer-events:auto; /* allow click to close if desired */
  }

  .highlight-box{
    position:fixed;
    border-radius:var(--radius);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25), inset 0 0 0 6px var(--highlight-color);
    background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.75));
    border: 2px solid rgba(0,0,0,0.06);
    pointer-events:auto;
    transition: transform .18s ease, opacity .18s ease;
    z-index:90;
    overflow:visible;
  }

  .highlight-label{
    position:absolute;
    top:-10px; left:12px;
    transform:translateY(-100%);
    font-size:13px;
    background: #fff;
    padding:6px 10px;
    border-radius:999px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    color:#111;
    font-weight:600;
    white-space:nowrap;
  }

  /* small arrow connecting label */
  .highlight-box::after{
    content:'';
    position:absolute;
    left:22px;
    top:-6px;
    width:10px;height:10px;
    background:#fff;
    transform: rotate(45deg);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }

  /* subtle pulsing ring for focus */
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0,200,138,0.12); }
    70%{ box-shadow: 0 0 0 14px rgba(0,200,138,0); }
    100%{ box-shadow: 0 0 0 0 rgba(0,200,138,0); }
  }
  .highlight-box.pulse{ animation: pulse 2s infinite; }

  /* mini close / done button floating */
  .highlights-close{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:110;
    background:var(--accent);
    color:#fff;
    border-radius:999px;
    padding:10px 14px;
    font-weight:700;
    box-shadow:0 8px 26px rgba(0,0,0,0.25);
    cursor:pointer;
    border:none;
  }

  /* responsive tweaks */
  @media (max-width:560px){
    .highlight-label{ 
		left:8px; 
		font-size:12px; 
		padding:6px 8px; 
	  }
    .back-button-inner2{ 
		padding:12px; 
	  }
    .settings-list .row{
		padding:12px; 
	  }
  }

.iconbox{
	width: 64px;
	height: 64px;
	font-size: 24px;
}

.settings-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/*
.row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #ddd;
}
*/

.col {
  display: flex;
  align-items: center;
}

.icon-col {
  width: 36px;
  height: 36px;             /* fixed square */
  display: flex;
  align-items: center;      /* vertical center */
  justify-content: center;  /* horizontal center */
  flex-shrink: 0;           /* never shrink */
	padding-left: 15px;
}

.settings-item-icon {
  font-size: 18px;          /* icon size */
  line-height: 1;           /* avoids vertical offset */
}

.text-col {
  flex: 1;          /* take remaining space */
  padding: 0 10px;
}

.arrow-col {
  flex: 0 0 20px;   /* fixed width for arrow */
  justify-content: flex-end;
}

.text-col {
  flex: 1;
  margin-left: 12px;        /* consistent gap from icon */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;  /* ensures left alignment */
}


.settings-item {
  display: flex;
  align-items: center;      /* Vertically center icon + text */
/*  justify-content: space-between; */
  list-style: none;         /* Remove bullet */
  margin-left: 21px;
	border-radius: 8px;
    border: 1px solid var(--bottom-line);
    margin: 6px 15px;
	
}

.settings-item a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
	list-style: none;
  gap: 6px;                 /* Space between text and right arrow icon */
}


/* @media query to hide the card on screens wider than a certain point (e.g., 768px) */
@media (min-width: 768px) {
    .settings-profile-card {
        display: none !important; /* This is the line that hides it */
    }
}

/* Add this to your dartocustom.css or the main desktop CSS file */
#settings-desktop-modal .settings-profile-card {
    /* Override the mobile 'display: none' rule */
    display: flex !important; 
    /* Adjust styles for the desktop layout (e.g., centering) */
    flex-direction: row; 
    align-items: center;
}


.profile-details-menu {
     display: flex;
    flex-direction: column;
    
    color: var(--dark-text-color);
    font-size: 16px;
    text-align: left;
    padding: 3px 5px;
    transition: color 0.3s ease;
    min-width: 290px;
    
}

.profile-headers-menu {
	display: flex;
	justify-content: space-between;
	width: 100%;
   align-items: baseline;
	height: 50px;
}

.text-h3 {
	
	font-size: 20px;
	padding-bottom: 20px;
	padding-left: 12px;
	color:#00bbff;
	font-weight: 600;
}

.profile-details-list {
     display: flex;
    flex-direction: column;
    
    color: var(--dark-text-color);
    font-size: 16px;
    text-align: left;
    padding: 3px 5px;
	list-style-type: none;
    
}

#profile-details-container[style*="display: block"] {
  display: flex !important;
}


/* Main result layout container */
        .result-output-wrapper {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        /* 1. Primary Header Card (Name/PID/Email) */
        .header-card {
            background-color: transparent;
            border-radius: 8px;
            padding: 3px 20px;
            display: flex;
            flex-direction: column;
            gap: 3px;
            border: 1px solid var(--bottom-line);
        }
        .header-card-row {
/*            display: flex;*/
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
/*            border-bottom: 1px solid var(--bottom-line);*/
            padding-bottom: 1px;
        }
        .header-card-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        /* Specific PID Styling */
        .pid-value {
            font-size: 21px; /* Very large font */
            font-weight: 500;
/*            color: var(--color-pid);*/
            letter-spacing: 0.05em;
        }

        /* Specific Name Styling */
        .name-value {
            font-size: 21px;
            font-weight: 500;
            color: var(--color-name);
        }

        /* 2. Secondary Data Sections */
        .data-section {
/*            background-color: white;*/
            padding: 3px 18px;
            border-radius: 8px;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
            
			border: 1px solid var(--bottom-line);
    		margin-top: 3px;
			
        }
        .profile-section-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-blue-to-darkblue-color);
            margin-bottom: 0px;
            padding-bottom: 3px;
			padding-left: 10px;
/*            border-bottom: 1px dashed #e0e7ff;*/
			padding-top: 6px;
        }
        .section-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(121px, 1fr));
            gap: 9px;
        }

        /* Individual Data Item */
        .data-item {
            padding: 6px 0;
        }
        .data-label {
            display: block;
            font-size: 12px;
            font-weight: 500;
            color: var(--text-blue-to-darkblue-color);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 1px;
            display: flex;
            align-items: center;
        }
        .data-label i {
            margin-right: 0.4rem;
            font-size: 0.9em;
        }
        .data-value {
            font-size: 16px;
            font-weight: 500;
            color: var(--color-gray-dark);
            word-break: break-word;
			margin-left: 20px;
        }

        /* Custom Styles for Calculated Age */
        .calculated-age-value {
            font-weight: 700;
            color: var(--color-indigo);
            font-size: 1.25rem;
        }
        /* Style for Payment Status PAID */
        .status-paid {
            color: var(--color-success);
            font-weight: 700;
        }
        /* Style for Payment Status PENDING */
        .status-pending {
            color: var(--color-not-found);
            font-weight: 700;
        }

/* Card Container */
        .main-card {
            width: 100%;
            max-width: 48rem; /* Increased max-width for better result layout */
            background-color: white;
            border-radius: 0.75rem;
            padding: 1.5rem;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 0 10px -5px rgba(0, 0, 0, 0.04);
        }

/* Custom mobile optimization for the profile data display */
@media (max-width: 768px) {
    /* 1. Reset the primary profile data wrapper to a simple vertical stack */
    .result-output-wrapper {
        display: block; /* Overrides the flex column, allowing normal flow */
        padding: 0 10px; /* Add some padding if needed, adjust as per dartocustom.css */
        gap: 0; /* Remove gap */
    }

    /* 2. Style the header card for mobile list style */
    .header-card {
        padding: 9px 6px 3px 6px; /* Remove padding if it's within a list structure */
/*        border: none; */
        background-color: transparent; /* Remove background */
		        margin-bottom: 12px;
    }

    /* 3. Force the data grid into a single column for mobile list readability */
    .section-grid {
        display: block; /* Overrides grid layout */
        gap: 0; /* Remove grid gap */
    }

    /* 4. Style individual data items as list separators */
    .data-item {
        padding: 6px 6px 6px 12px; /* Adjust vertical padding */
       
    }
    .data-item:last-child {
        border-bottom: none;
    }

    /* 5. Adjust secondary section containers for mobile list view */
    .data-section {
        padding: 0; /* Remove horizontal padding */
        
        box-shadow: none;
        margin-top: 12px; /* Add spacing between logical sections */
    }
}


.profile-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
  margin: 20px auto;
  z-index: 999;
  position: fixed;
  width: 50%;
  flex-direction: column;
}

.profile-loader.hidden {
  display: none;
}

.profile-loader i {
  font-size: 18px;
  color: #007bff;
}


.profile-nav-item {
    display: flex;
    flex-direction: column; /* Stack top row and value vertically */
    padding: 1px 15px 1px 15px;
/*    border-bottom: 1px solid var(--border-color);*/
    cursor: pointer;
    transition: background 0.2s ease;
}

.profile-nav-item:hover {
    background: var(--hover-background);
}

.profile-top-row {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between icon and label */
}

.profile-icon {
    color: var(--primary-color);
    font-size: 14px;
}

.profile-label {
    font-weight: 500;
    color: var(--text-blue-to-darkblue-color);
	font-size: 14px;
}

.profile-value {
    margin-top: 0px;
        font-weight: 500;
    color: var(--category-header-color-dark);
    font-size: 15px;
	padding-left: 27px;
}

.profile-separator{
	border: 1px solid #fff;
	border-radius: 8px;
}

.sub-header-text{
	font-size: 14px;
	padding: 9px 12px;
}