.nav_links ul {
    margin-top: 0;
}
.container {
	background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)), url(background.jpg); 
}

.dead {
	width: 75%;
	height: 1070px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: center;
	margin-bottom: 10px;
	border-radius: 5px;
}
.headings {
	width: 30%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	margin-right: 10px;
	border-radius: 5px;
	padding-bottom: 15px;
}
.display {
	width: 65%;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 5px;
}

/* Portrait container */
.portrait {
	width: 100%;
	aspect-ratio: 4 / 5;
	background: rgba(0, 0, 0, 0.4);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	overflow: hidden;
	position: relative;
}

/* Image styling (constrained and responsive) */
.portrait img {
	width: 95%;
	height: 95%;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	object-fit: cover;
	border-radius: 5px;
}

/* Override styles for extreme aspect ratios */
.portrait img.extremely-tall,
.portrait img.extremely-wide {
	object-fit: contain;
	background-color: #222;
}
  

.deceased_names {
	height: 10%;
	text-align: center;
}
.flower-mobile {
	display: none;
}

.links {
	height:5%;
	display:flex;
	justify-content:space-between;
	gap: 0.6vw;
	align-items:center;
	padding: 0 2vw;
}

#divider {
	width: 1px;
	height: 24px;
	background-color: #D8CF82;
}



#follow { 
	font-size:0.8vw;
	-padding:0 0.8vw;
	padding: 0;
	-margin-right: 1vw /* Space before divider */
} 

#follow a        { 
	color:#D8CF82; 
	transition:color .2s; 
	text-decoration: none;
 }
#follow a:hover  { 
	color:#ffffff; 
}

/* Hover animations for perm and share buttons */
.icon-wrapper:hover .circle-btn .icon {
	color: #ffffff;
	fill: #ffffff;
	stroke: #ffffff;
}

/* Ensure button spacing and consistent size */
#permlink2,
#share2 {
	margin: 0;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

#permlink, #share { 
	padding:0;
	margin:0 0.4vw;
	background:none;
	display:inline-flex;
	align-items:center;
}


/* Optional: add pointer cursor on wrappers too */
.icon-wrapper {
	cursor: pointer;
}


/* ───────── Circular icon buttons ───────── */
.circle-btn {
    width:32px;
	height:32px;
	border:none;
	border-radius:50%;
    background:#384E2D;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
}

.circle-btn .icon {
    width: 18px;
    height: 18px;
    color: #D8CF82;
    fill: #D8CF82;
    stroke: #D8CF82;
    transition: color 0.2s, fill 0.2s, stroke 0.2s;
}
.circle-btn:hover .icon {
    color: #fff;
    fill: #fff;
    stroke: #fff;
}
.share-wrapper11 {
	position:relative;
}

/* Ensure wrapper for share button is correctly positioned */
#share2 {
	position: relative;
	margin: 0;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* ─── Circle button styling ─── */
.circle-btn2 {
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: #384E2D;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.circle-btn2 .icon2 {
	width: 18px;
	height: 18px;
	color: #D8CF82;
	fill: #D8CF82;
	stroke: #D8CF82;
	transition: color 0.2s, fill 0.2s, stroke 0.2s;
}

.circle-btn2:hover .icon2 {
	color: #fff;
	fill: #fff;
	stroke: #fff;
}

/* ─── Dropdown menu styling ─── */
.share-menu2 {
	display: grid; /* ⬅️ Must be here, not hidden via display:none */
	grid-template-columns: repeat(2, auto);
	gap: 12px;
	position: absolute;
	top: 40px;
	right: 0;
	background: #D8CF82;
	padding: 8px;
	border: 1px solid #333;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	z-index: 1000;

	/* Hidden by default using opacity */
	opacity: 0;
	transform: scaleY(0.95);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.3s ease;
}

.share-menu2.show {
	opacity: 1;
	transform: scaleY(1);
	pointer-events: auto;
}


/* ─── Share item button ─── */
.share-item2 {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #384E2D;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}

.share-item2:hover {
	background: #4a6438;
}

/* ─── Icon in share items ─── */
.share-icon2 {
	width: 16px;
	height: 16px;
	filter: invert(59%) sepia(18%) saturate(407%) hue-rotate(27deg) brightness(90%) contrast(82%);
	transition: filter 0.2s;
}

.share-item2:hover .share-icon {
	filter: invert(100%) hue-rotate(0deg);
}

/* Smooth dropdown and form appearance */
#emailShareForm2 {
	opacity: 0;
	transform: scaleY(0.95);
	transition: opacity 0.2s ease, transform 0.3s ease;
	pointer-events: none;
}

#emailShareForm2.visible {
	opacity: 1;
	transform: scaleY(1);
	pointer-events: auto;
}







.titles {
	height: 30%;
	display: flex;
	flex-direction: column;
}
.titles a {
	display: block;
	color: #D8CF82;
	-padding: 5px;
	text-decoration: none;
	margin-left: 10px;
	border-radius: 5px;
	background: rgba(100, 100, 100, 0.3);
}
.title-list-item {
	width: 75%;
	margin: 10px 0;
	margin-right: 20px;
	padding: 8px 20px;
}

.title-list-item:hover {
	background-color: #384E2D;
}

.biography .title-list-item {
	border: 1px solid #D8CF82;
}
.titles #bio {
	margin-bottom: 0px;
}

-#selected_titles {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3.3rem;
	height: 3.3rem;
	font-size: 0.8rem;
	padding: 0.5rem 0.2rem;
	background-color: black;
	border-radius: 50%;
	color: white;
}

-a.title-list-item sup {
    font-size: 0.6em;  /* Adjust the size if needed */
    vertical-align: super;  /* Aligns it to superscript position */
}

.dropdown-button {
	display: none;
}


.whatsappLinkMobile, #whatsappLinkTextMobile, .edit_deceased_contents_mobile, .publisher_mobile, .delete_deceased_mobile, .delete_deceased_contents_mobile {
	display: none;
}

#whatsapp_divider, #whatsapp_divider_mobile {
    width: 1px;
    height: 24px;
    background-color: #D8CF82;
	margin: 0 0.5vw;
}

.delete_deceased button {
    background-color: red !important; /* Ensure the background color is red */
    color: white; /* Text color */
	font-size: 0.7rem; /* Font size */
    padding: 0.3rem 0.6rem; /* Padding: top/bottom 0.3rem, left/right 0.6rem */
    border: none; /* Remove border */
    border-radius: 0.2rem; /* Optional: slightly rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
	margin-left: 15px;
}

.delete_deceased button:hover {
    background-color: darkred !important; /* Optional: darker red on hover */
}

/* ✅ Default for Desktop: bottom-right */
#toast1 {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background-color: #384E2D;
	color: #D8CF82;
	padding: 10px 16px;
	border-radius: 6px;
	font-size: 0.95em;
	max-width: 90vw;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	z-index: 99999;
	display: none;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	white-space: normal;
	word-wrap: break-word;
	line-height: 1.4;
	box-sizing: border-box;
	text-align: center;
}

#toast {
	position: fixed;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	background-color: #384E2D;
	color: #D8CF82;
	padding: 10px 16px;
	border-radius: 6px;
	font-size: 0.95em;
	max-width: 90vw;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	z-index: 99999;
	display: none;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	white-space: normal;
	word-wrap: break-word;
	line-height: 1.4;
	box-sizing: border-box;
	text-align: center;
  }
  


  



.flower {
    display: flex;
    justify-content: space-between; /* Distribute items evenly along the main axis */
    height: 18%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)), url(gallaxy.png);
    background-position: center;
    background-size: cover;
    position: relative;
   	padding: 10px;
	border-radius: 5px;
}


.pay-now-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pay-now-wrapper-mobile {
    display: none;
}

.countdown-box, .countdown-box-mobile {
    background: rgba(255, 0, 0, 0.1);
    border: 2px solid red;
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: bold;
    color: #ff5555;
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
    animation: pulseGlow 1.5s infinite alternate;
}
.countdown-box {
    position: absolute;
    top: 5px;
    right: 5px;
}

.countdown-box.final-warning, .countdown-box-mobile.final-warning {
    background: rgba(255, 0, 0, 0.2);
    border-color: #ff0000;
    color: #ff2222;
}
/* Glow + blink animation */
@keyframes pulseGlow {
    from { box-shadow: 0 0 8px rgba(255, 0, 0, 0.6); opacity: 1; }
    to   { box-shadow: 0 0 15px rgba(255, 0, 0, 1); opacity: 0.6; }
}

.fade-out { opacity: 0 !important; transition: opacity 1s ease-out; }




/* Pay Now buttons (both desktop + mobile) */
#payNowDesktop, #payNowMobile {
    padding: 8px 15px;
    background-color: #384E2D;
    border-radius: 3px;
    text-decoration: none;
    font-weight: 500;
    color: #D8CF82;
    transition: background 0.3s, color 0.3s, opacity 1s ease-out;
}

#payNowDesktop:hover, #payNowMobile:hover {
    color: #fff;
    background-color: #4a6438;
}

#payNowDesktop.disabled, #payNowMobile.disabled {
    background-color: #ccc !important;
    color: #666 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* Fade out effect */
.fade-out {
    opacity: 0 !important;
    transition: opacity 1s ease-out;
}

/* Layout wrappers */
.pay-now-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pay-now-wrapper-mobile {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}



.edit_portrait, .edit_deceased_contents {
    margin-top: auto; /* Push elements to the bottom */
	display: flex; /* Ensure children are also flex containers */
	justify-content: space-between;
    -align-items: center; /* Center items vertically */
}
.noPortrait {
	color: #D8CF82;
	font-size: 13px;
}

.portrait-delete-button, .deceased-upload-button, .edit-deceased-link, .edit_deceased_bio, .whatsapp_btn, #update_page {
	width: auto;
	border: 1px solid #D8CF82;
	cursor: pointer;
	color: #D8CF82;
	background: transparent;
	font-size: 13px;
	margin-top: 3px;
	padding: 5px 10px;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease;

}
.portrait-delete-button:hover {
	background-color: red;
}

.deceased-upload-button:hover, .edit-deceased-link:hover, .edit_deceased_bio:hover, #update_page:hover {
	background-color: #384E2D;
	color: white;
}

.custom-file-upload {
	border: 1px solid #D8CF82;
	cursor: pointer;
	color: #D8CF82;
	background: transparent;
	font-size: 13px;
	padding: 1.8px 15px;
	border-radius: none;
	display: inline-block;
	border-radius: 4px;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.custom-file-upload:hover {
	background-color: green;
	color: white;
}
#-uploadPortraitForm {
	display: flex;
	align-items: center;
	gap: 10px; 
}
#filePortraitInput {
	display: none;
}
#file-name {
	color: white;
	font-size: 13px;

}

/* Form must be vertical */
#uploadPortraitForm {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Horizontal row for buttons + filename */
.portrait-upload-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: nowrap;        /* 🔒 NEVER wrap */
	white-space: nowrap;     /* 🔒 NEVER break text */
}

/* Prevent text breaking */
#file-name,
.deceased-upload-button,
.custom-file-upload {
	white-space: nowrap;
}

/* Message must ALWAYS be below */
.upload-message .upload-message-desktop {
	margin-top: 1px;
	font-size: 11px;
	display: block;
	line-height: 1.2;
	min-height: 14px; /* prevents layout jump */
}



.edit_portrait {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items to the start horizontally */
}

.whatsappLinkDesktop {
	padding: 5px 15px;
}
.whatsappDisplayDesktop {
	padding: 0;

}
.whatsappDisplayDesktop span {
    display: inline; /* Ensure spans are displayed inline */
	margin: 7px 0;
}

#whatsappLinkDesktop, #whatsappOkButtonDesktop, #whatsappLinkMobile, #whatsappOkButtonMobile {
	background-color: #222; /* Input field background color */
	color: #fff; /* Input field text color */
	border: 1px solid #444; /* Border color */
	padding: 5px; /* Padding inside the input field */
	border-radius: 5px;
	margin-top: 5px;
}

.whatsapp_btn:hover {
	background-color:#384E2D;
	padding: 5px 10px;
}

.whatsapp_copy_delete {
	display: flex;
	justify-content: center;
	gap:2vw;
	align-items: center;
	position: relative;
}


/* Ensure white-space between the two icon buttons, if needed */
.whatsapp_copy_delete .circle-btn { 
	margin-left: 3px; 
}

#deleteWhatsappBtnDesktop, #deleteWhatsappBtnMobile {
	background-color: red;
}
#whatsappBtnDesktop {
	color: #D8CF82;
	background-color: #384E2D;
}
.whatsappBtnWrapper {
    display: flex;
    justify-content: center;
}




#whatsappLinkTextDesktop, #whatsappLinkTextMobile {
	font-size: 0.8rem;
	padding: 0px;
	color: white;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 95%;/* Adjust as needed */
	display: inline-block;
	vertical-align: middle;
}
.whatsapp-label {
    font-weight: bold;
   	color: #384E2D;
}

.whatsapp-link {
   	color: white;
}






.content {
	margin-top: 10px;
	height: 800px;
	border-radius: 5px;
	margin-left: auto;
	margin-right: auto;
}
.display_area {
	width: 100%;
	height: 98%;
	-margin-top: 5px;
	padding-top: 10px;
	margin: auto;
	border-radius: 5px;
}
heading {
	display: flex;
	justify-content: space-between;
	padding: auto;
	-display: block; /* Ensures <heading> behaves like a block element */
    width: 100%;    /* Ensures <heading> spans the full width */
}
heading p {
	color:#D8CF82;
	text-align: center;
	padding-left: 12px;
}

heading p span {
	color: white;
}


subject, #subject_messages {
	font-size: 18px;
	color: #D8CF82;
	font-weight: 600;
	margin: 5px 15px;
	padding-left: 15px;
}

.condols subject, #subject_messages {
	padding-left: 30px;
}
visit, #visit_messages {
	padding: 5px 8px;
	padding-right: 0.5px;

}
.information {
	font-size: 12px;
	color: wheat;
	width: 100%;
	margin: 0 auto; /*Center horizontally */
	padding: 10px;
}

.scroll-bg {
	-background: rgba(100, 100, 100, 0.3);
	width: 98%;
	-width: 100%;
	margin: 2% auto;
	padding: 10px 20px;
	padding: 0;
	border-radius: 5px;
	-background: rgba(0, 0, 0, 0.3);
	-background: #222;
}
.scroll-div {
	-width: 100%;
	width: 95%;
	height: 650px;
	overflow: hidden;
	overflow-y: scroll;
	border-radius: 5px;
}
.life-history {
	width: 100%;
	height: 650px;
	overflow: hidden;
	overflow-y: scroll;
	background-color: black;
	border-radius: 5px;

}
form textarea[name="life_history"] {
    width: 100%;
    height: auto; /* Adjust height as needed */
    margin: 10px auto; /* Center horizontally with margin */
    resize: vertical; /* Allow vertical resizing */
    font-size: 14px; /* Adjust font size */
    box-sizing: border-box; /* Ensure padding does not affect width */
	text-justify:inter-ideograph;
}

-form textarea#life_history {
	/*Same as form textarea[name="life_history"] {...} bove*/
	width: 85%;
	height: 670px;
	background-color: rgba(100, 100, 100, 0.2);
	border: none;
	font-size: 14px;
	padding: 5px 7px; 
	margin-top: 3px;
	margin-bottom: 3.5px;
	margin-right: auto;
	margin-left: 58px;
	color: #D8CF82;
	overflow-y: scroll;
    -resize: none; /* Remove this if you want the user to resize the textarea */
}

.hero-btn {
    text-align: center; /* Center the button horizontally */
	margin-top: 10px; /* Add some top margin if needed */
	display: flex;
	align-content: left;
	margin-left: 15px;
}

.hero-btn input[type="submit"] {
    display: inline-block; /* Ensure button does not take full width */
    border: 1px solid #D8CF82;
	cursor: pointer;
	color: #D8CF82;
	background: transparent;
	font-size: 12px;
	padding: 5px 10px;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}



-form input#submit {
	/*Same as: form textarea#life_history {...} above*/
	display: inline-block;
	text-decoration: none;
	font-size: 12px;
	color: #D8CF82;
	background-color: rgba(100, 100, 100, 0.5);
	border: none;
	padding: 8px 22px;
	position: relative;
	cursor: pointer;
	margin-left: 40px;
	border-radius: 4px;
}
form input#submit:hover {
	border: 1px solid #D8CF82;
	background: #384E2D;
	transition: 1s;
}



.scroll-object {
	color: wheat;
	font-family: Cursive, 'Lucida Handwriting';
	font-size: 12px;
	padding: 10px;
	background-color: rgba(100, 100, 100, 0.3);
	width: 95%;
	margin: 0 auto;
	padding: 15px;
	border-radius: 5px;
	text-align: justify;
}


.biography h3 {
	color: white;
}
.messages {
	display: none;
	width: 100%;
	height: auto;
	-background: green;
}

/* Condolenses section */
.condols {
	width: 100%;
	height: auto;
	display: none;
}
.condol_messages, .announce_messages {
	width: 95%;
	height: 700px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
}

.condolences, .announcements {
	width: 100%;
	max-height: 85px;
	background-color: rgba(100, 100, 100, 0.3);
	display: flex;
	justify-content: flex-start;
	align-content: center;
	-vertical-align: middle;
	padding: 8px; /* Adjust padding as needed*/
	margin-bottom: 8px;
	border-radius: 5px;
}

.announcements {
	max-height: 150px;

}

.imageFace, .imagePart {
	width: 7%;
	max-height: 85px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box; /* Include padding and border in element's width/height */
	flex-shrink: 0; /* Prevent shrinking */
}

.imagePart {
	max-height: 150px;
}

.userFace, .announcerFace {
	width: 90%;
	height: 5vh;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box; /* Include padding and border in element's width/height */
	flex-shrink: 0; /* Prevent shrinking */
	padding: 0;
	margin: 0;
}


.userFace img, .announcerFace img {
	width: 5vh; /* Ensure image does not overflow */
	height: 5vh; /* Maintain aspect ratio */
	object-fit: cover; /* Cover the available space */
	border-radius: 50%;
	border: 1px solid red;
	margin: 0;
}


.display {
	width: 85%;
	flex-grow: 1; /* Allow it to take the remaining space */
	text-align: left;
}


/* Announcements and Condolences section */

.names, .sender_names {
	display:flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 800;
	color: #D8CF82;
	padding-top: 3px;
	font-size: 12px;
}

userDate {
	display: flex;
	justify-content: left;
	align-items: center;
}

when_announced, senderNames count, time_posted, personNames count {
	color: white;
	margin-left: 2px;
	font-size: 10px;
	font-weight: normal;
}
edit_announce {
	margin: 2px 6px;
	padding: 2px 9px;
	border-radius: 4px;
	background-color: #384E2D;
	font-weight: 500;
}


								
.message, .the_announcement {
	padding: 3px 0;
	padding-left: 5px;
	padding-right: 10px;
	-color: #555;
	font-size: 12px;
	text-align: justify;
}

.the_announcement {
	padding-top: 0;
}
	
.scroll-bg2, .scroll-bg3 {
	-background: rgba(100, 100, 100, 0.3);
	width: 95%;
	margin: 2% auto;
	padding: 10px 20px;
	
}
.scroll-div2, .scroll-div3 {
	-width: 750px;
	max-width: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 12px;
	height: 650px;
	overflow: hidden;
	overflow-y: scroll;
}
.scroll-object2, .scroll-object3 {
	color: wheat;
	font-family: Cursive, 'Lucida Handwriting';
	font-size: 12px;
	padding: 10px;
	width: 100%;
}

/* Announcements section */



/* ********************************************* */
/* Style for the photo gallery container */

 /* Styles for the file input and submit button */
 #uploadForm {
    text-align: center; /* Align the form elements to the center */
    padding: 10px; /* Add some padding for better spacing */
    
    
}

.form-upload {
    /* Common styles for both file input and submit button */
    background-color: #384E2D; /* Set the background color */
    color: white; /* Set the text color to white */
    padding: 7px 20px; /* Add some padding around the text */
    margin-bottom: 5px;
    border: none; /* Remove the border */
    cursor: pointer; /* Change the cursor to a pointer on hover */
    transition: background-color 0.3s ease; /* Add a smooth transition effect */
    border-radius: 4px;

    /* You can add more custom styles here as needed */
}

.form-upload:hover {
    /* Styles for the hover effect */
    background-color: #45a049; /* Darker background color on hover */
}

/* Style for the file input */
.form-upload[type="file"] {
    /* Hide the default file input styles */
    position: absolute;
    left: -9999px;
}

/* Optional style for the file input label */
.file-label {
    display: inline-block;
    padding: 6px 20px;

    background-color: #f2f2f2;
    color: #333;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
	white-space: nowrap;
    transition: background-color 0.3s ease;

}

/* Optional hover style for the file input label */
.file-label:hover {
    background-color: #ddd;
}


.photo {
	display: flex;
	align-items: center;
	width: 100%;
	height: 77.5vh;
	margin-top: 10px;
	display: none;
}

.photo .information {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.photos {
	width: 100%;
	margin: 0;
	padding: 0;
	
}

.horizontalScrollButtonsForDesktop {
	display: flex;
}

.gallery-wrap {
    display: flex;
    align-items: center;
	justify-content: center;
	margin-bottom: 0.8vh;
	border: 1px solid green;
	border-radius: 5px;
	width: 100%;
	height: 37vh;
	padding-bottom: 15px;
}

.scrollers {
    display: flex;
    align-items: center;
    margin: 0 10px;
}

.verticalScrollButtonsForMobile,
.photos-container-mobile,
#scrollUpButton,
#scrollDownButton {
	display: none;
}

.photos-container {
    display: flex;
	width: 48.65vw;
	align-items: center;
    overflow-x: auto;
	overflow-y: hidden; /* Hide the vertical scrollbar */
}

.photos-container::-webkit-scrollbar {
	display: none;
}

.gallery-item {
   	width: 16vw;
   	height: 35vh;
   	margin: 0 1vw;
    display: grid;
	grid-template-columns: auto auto auto;
}

.gallery-item img {
  	width: 15vw;
	height: 34vh;
	border-radius: 5px;
	object-fit: cover; /* Preserve the aspect ratio of the image */
}


.deletion, .uploading {
	display: flex;
	flex-wrap: wrap; /* Allow wrapping to next line for smaller screens */
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 2vh;
	color: #D8CF82;
	height: 4.5vh;
	width: 80%;
	margin-left: auto;
}
.uploading {
	height: 7vh;
}


#uploadForm {
	flex-direction: column;
	align-items: center;
	justify-content: right;
	max-height: 6vh;
	padding: 0;
	margin: 0;
	padding-top: 5px;
}

.form-contents {
	display: flex;
	justify-content: space-between;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	white-space: nowrap; /* Prevent line breaks */
	height: 3.5vh;
    min-width: 60%;
	gap: 10px;
	margin: 0;
	margin-right: 10px;
	padding: 0 5px;
}


.form-upload {
    white-space: nowrap; /* Prevent line breaks */
	margin: 0;
	font-size: 12px;
}

#uploadMessage #uploadMessageDesktop {
    display: block;
    width: 100%;
    text-align: center;    
    color: wheat; /* Optional: Set the color for the upload message */
}



#deletePhotosBtn, #confirmDeleteBtn, #cancelDeleteBtn {
	padding: 1.8px 15px;
	border: 1px solid #D8CF82;
	background: transparent;
	color: #D8CF82;
	border-radius: 4px;
	margin-right: 1vw;
	cursor: pointer;
}
#deletePhotosBtn:hover, #cancelDeleteBtn:hover {
	background-color: #384E2D;
}

#confirmDeleteBtn:hover {
	background-color: red;
}

/* Ensure images reduce in size smoothly */
.reduce-size {
    transform: scale(0.7); /* Adjust the scale as needed */
    transition: transform 0.3s ease;
}

/* Ensure gallery item is positioned relative to place checkbox inside */
.gallery-item {
    position: relative;
    display: inline-block;
    margin: 10px; /* Adjust margin as needed */
}

/* Minimal styling to position checkbox within the gallery item */
.delete-checkbox {
    position: absolute;
    bottom: 5px; /* Position the checkbox at the bottom */
    left: 50%; /* Center the checkbox horizontally */
    transform: translateX(-50%); /* Adjust to truly center */
    z-index: 10; /* Ensure it appears above the image */
	width: 1.5vw; /* Width of the checkbox */
    height: 2vh; /* Height of the checkbox */
	border-radius: 3px; /* Border-radius for a smooth look */
    border: 2px solid #333; /* Border for visibility */
    -appearance: none; /* Remove default checkbox styling */
    background: rgba(255, 255, 255, 0.7); /* Optional: Slight background for visibility */
    padding: 2px 5px; /* Optional: Padding for better appearance */
    border-radius: 3px; /* Optional: Add border-radius for better appearance */
    display: block; /* Ensure it’s displayed */
}

/* Optional: Styling for the checkbox when checked */
.delete-checkbox:checked {
    background: #007bff; /* Background color when checked */
    border: 2px solid #007bff; /* Border color when checked */
}




/* Upto here ...*/
.scrollers img {
	width: 30px;
	height: 30px;
	margin: 5px;
	border-radius: 50%;
	cursor: pointer;
}
  -backBtn, nextBtn {
	width: 10px;
	cursor: pointer;
	margin: 10px;
  }
  .gallery-item img:hover {
	filter: grayscale(0);
	cursor: pointer;
	transform: scale(1.1);
}
  

/* Style for navigation icons */
.scroll-button {
    cursor: pointer;
    font-size: 24px;
    padding: 5px;
}

.-gallery-item img {
    width: 100%;
    border-radius: 5px;
}
/* Hide horizontal scrollbar */
::-webkit-scrollbar {
    display: none;
 }



/* ********************************************* */
.video {
	width: 100%;
	height: auto;
	background: white;
	display: none;
}
.private {
	width: 100%;
	height: auto;
	background: purple;
	display: none;
}

.portait, img {
	margin-top: 17px;
	height: 90%;
	width: 80%;
}
h1 {
	color: #D8CF82;
	font-size: 20px;
	text-align: center;
	margin-top: 4px;
	margin-bottom: 2px;
}
h2 {
	color: #D8CF82;
	font-size: 14px;
	padding-top: 2px;
	font-weight: lighter;
}
h3 {
	color: wheat;
	font-size: 0.9rem;
}

#follow, #permlink1, #invite1 {
	padding: 3px 10px;
	-margin: 6px 15px;
	background-color: #384E2D;
	flex-basis: 25%;
	box-sizing: border-box;
	text-align: center;
	border-radius: 5px;
} 
.links, a {
	text-decoration: none;
	color: #D8CF82;
}
ul {
  list-style-type: none;
  margin-top: 20px;
  margin-left: 20px;
}

li {
	padding: 5px;
}

.publisher {
	margin: 3px 10px;
	padding: 5px;
	color: #D8CF82;
	font-size: 12px;
}

.publisher > names {
	background-color: #384E2D;
	margin-right: 5px;
	padding: 2px 5px;
	border-radius: 4px;
}

.publisher > names:hover {
	background-color: #383E2D;
}

.publisher > relation {
	color: #384E2D;
}

.-publisher {
	height: 5.5%;
	border-radius: 4px;
}


.edit_biography, .edit_page, .edit_condolense {
	display: none;
}

.pagination {
	display: flex;
	justify-content: space-between;
	margin-top: 12px;
}
.page-item {
	display: inline-block;
	text-decoration: none;
	font-size: 10px;
	color: #D8CF82;
	background-color: rgba(100, 100, 100, 0.5);
	border: 1px solid #D8CF82;
	padding: 6px 22px;
	border-radius: 4px;
	position: relative;
	cursor: pointer;
	margin-left: 57px;
	margin-right: 57px;
	transition: 1s;
}
.page-item:hover {
	border: 1px solid #384E2D;
	background: #384E2D;

}

/* === Reusable Modal Styles === */
.expiry-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.65);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* stays above all content */
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.expiry-modal-overlay.show {
  opacity: 1;
}

.expiry-modal-box {
  -background: #fff;
  background:#384E2D;
  padding: 2rem 3rem;
  border-radius: 12px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 500;
  -color: #333;
  color: #D8CF82;
  max-width: 400px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.preview-disabled {
    opacity: 0.45;
}

.preview-disabled-wrapper {
    cursor: not-allowed;
}

.desktop-only,
.mobile-only {
	display: none;
}


/* MOBILE VERSION */
@media only screen and (max-width: 600px) {

	.dead {
		width: 100%;
		height: 100%; /* Fill the available height */
		display: flex;
		flex-direction: column;
		margin-top: 0%;
		padding-top: 0%;
		flex-grow: 1; /* Grow to fill remaining space */
	}
	
	.headings {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 40%;
	}
	.portrait {
		height: 25vh;
		height: 50%;
		width: 25vh;
		margin-left: auto;
		margin-right: auto;
		margin-top: 5px;
	}
	.portrait img {
		width: 21vh;
		height: 21vh;
	}
	.deceased_names {
		-height: 9vh;
		height: 9.5vh;
		height: 10%;
	}
	h3 {
		color: wheat;
	}
	.flower {
		display: none;
	}

	.flower-mobile {
		display: flex;
		justify-content: center;
		-max-height: 8vh;
		max-height: 4.5%;
		margin: 0 0.8vw;
	}

	




	.portrait-delete-button {
		margin: 1;
		font-size: 12px;
	}



	/* Pay Now wrapper override for mobile */
    .pay-now-wrapper {
        display: none; /* hide desktop button */
    }
    .pay-now-wrapper-mobile {
        display: flex;
        justify-content: center;
        margin-top: 2px; /* reduced margin */
    }

    /* Countdown box for mobile */
    .countdown-box-mobile {
        margin-top: 2px;
        padding: 2px 4px;
        font-size: 10px; /* smaller font */
        text-align: center;
        white-space: nowrap; /* prevent wrapping */
        overflow: hidden;
        text-overflow: ellipsis; /* safety for very small screens */
        display: none; /* default collapsed if no countdown */
    }

    /* When JS injects text, display it */
    .countdown-box-mobile.active {
        display: block;
    }

    /* Stronger warning when final countdown */
    .countdown-box-mobile.final-warning {
        background: rgba(255, 0, 0, 0.2);
        border-color: #ff0000;
        color: #ff2222;
    }



	
	.noPortrait {
		display: none;
	}

	.edit_delete_deceased_contents {
		display: flex;
		justify-content:center;
		align-items: center;
		margin: 10px;
	}

	.edit_deceased_contents_mobile, .delete_deceased_contents_mobile {
		display: block;
		
	}

	.edit_deceased_contents_mobile, .delete_deceased_contents_mobile {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0;
	}
	.delete_deceased_contents_mobile button {
		margin: 0;
	}

	heading {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; /* Center-align content vertically */
		width: 100%;
		padding: 10px 0;
		text-align: center;
	}

	subject, #subject_messages {
		padding-left: 0;
	}
	
	.condols subject, #subject_messages {
		padding-left: 0;
	}
	
	#subject_messages {
        font-size: 4.5vw; /* Responsive font size */
        color: #D8CF82; /* Text color */
        font-weight: 600; /* Bold text */
        margin: 0; /* Remove default margin */
    }

	#visit_messages {
        margin-top: 5px; /* Space between subject and visit */
        display: flex;
        justify-content: center; /* Center-align the button */
        width: 100%; /* Ensure full width to center the button */
    }

    #update_page {
        display: inline-block; /* Inline block for proper spacing */
        font-size: 4vw; /* Responsive font size */
       	text-wrap: nowrap;
    }

   	.portrait-delete-button, .deceased-upload-button, .edit-deceased-link, .edit_deceased_bio, .custom-file-upload {
		font-size: 12px;
		margin: 0.4vw;
		margin: 10px;
		padding: 5px 10px;
		border-radius: 4px;
		text-decoration: none;
		transition: background-color 0.3s ease, color 0.3s ease;
		border-radius: 4px;
	}
	.edit_deceased_bio {
		margin-top: 20px;
	}

	
	.custom-file-upload, .deceased-upload-button {
		margin: 0;
	}
	

	#-filePortraitInputMobile {
		display: none;
	}
	

	/* Keep first row intact */
	#uploadPortraitForm-mobile > label,
	#uploadPortraitForm-mobile > span,
	#uploadPortraitForm-mobile > button {
		white-space: nowrap;
	}

	#uploadPortraitForm-mobile {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
	}
	
	/*  New */
	/* === Mobile upload form === */
	#uploadPortraitForm-mobile {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;              /* allow second row */
		justify-content: center;
		gap: 6px;
	}

	/* Keep first row intact */
	#uploadPortraitForm-mobile > label,
	#uploadPortraitForm-mobile > span,
	#uploadPortraitForm-mobile > button {
		white-space: nowrap;
	}

	/* Hide native input */
	#filePortraitInputMobile {
		display: none;
	}

	
	#file-name-mobile {
		font-size: 4vw;
		-font-size: 12px;
		color: white;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 40%;/* Adjust as needed */
		display: inline-block;
		vertical-align: middle;
		-padding: 3px;
	}

	/* Message row (ALWAYS below) */
	.upload-message-mobile {
		flex-basis: 100%;     /* new row */
		font-size: 11px;
		color: red;
		line-height: 1.2;
		margin-top: 2px;

		/* 🔒 hidden by default */
		display: none;
		text-align: center;  /* ✅ centered text */
	}
	
	.upload-message-mobile.show {
		display: block;
	}

	/* Ends */


		
	
	.links {
		height: 5%;
		-height: 5vh;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 13px;
		padding: 0 2vw;
		-padding-right: 1vw;
	}

	#follow, #permlink, #share {
		display: inline;
    	vertical-align: middle;
		font-size: 4vw;
		-margin: 5px;
		padding: 0.6vh 1vw;
		border-radius: 4px;
		text-decoration: none;
		transition: background-color 0.3s ease, color 0.3s ease;
	}
	

	.display {
		width: 100%;
		background: rgba(0, 0, 0, 0.4);
	}
	
	.titles {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 12px;
		align-items: center;
		margin: 5px;
		padding: 0 10px;
	}

	.dropdown-button {
		display: block;
	}
	
	.title-list-item {
		margin: 0;
	}
    
	/* Individual title items */
	.titles > a {
		margin: 0;
		margin-right: 5px;
		flex: 1 1 55%; 
		text-align: center;
		box-sizing: border-box;
		background-color: rgba(100, 100, 100, 0.5);
		padding: 6px 12px;
		border-radius: 4px;
	}
	

	/* Container for dropdown menu */
	.titles > .dropdown {
		width: 40%; /* 40% width for the dropdown button */
		display: flex;
		align-items: center;
		position: relative;
	}

	/* Dropdown button styling */
	.dropdown-button {
		width: 100%;
		text-align: center;
		font-size: 12px;
		cursor: pointer;
		color: #D8CF82;
		border: none;
		border-radius: 4px;
		background-color: rgba(100, 100, 100, 0.5);
		padding: 6px 12px;
		-height: 4vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/*SVG icon in the dropdown button */
	.dropdown-button svg {
		margin-left: 5px; /* Space between text and icon */
	}
	
	/* Dropdown menu content */
	.dropdown-content {
		display: none;
		position: absolute;
		-top: calc(100% + 2px); /*Positioned just below the button */
		top: 100%;
		right: 0;
		width: 200px;
		background-color: #444;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
		flex-direction: column;
		border-radius: 4px;
		padding: 6px 0;
	}

	/* Styling for dropdown items */
	.dropdown-content a {
		color: #D8CF82;
		-color: black;
		padding: 8px 12px;
		font-size: 12px;
		text-decoration: none;
		display: block;
		background-color: rgba(100, 100, 100, 0.5);
		text-align: left;
		border-bottom: 1px solid #ddd;
		margin-bottom: 2px;
		width: 180px;
	}

	/* Hover and active effect for dropdown items */
	.dropdown-content a:hover,
	.dropdown-content a.active-tab {
		background-color: #383E2D;
		color: white;
	}

	/* Show dropdown content on hover */
	.dropdown:hover .dropdown-content {
		display: flex;
	}

	/*Hover effect for titles and dropdown button */
	.title-list-item:hover,
	.dropdown-button:hover {
		background-color: #384E2D;
		color: white;
	}

	/* Active tab styling */
	.title-list-item.active-tab {
		background-color: #384E2D !important;
		color: white;
	}
	
	.whatsappLinkDesktop, #whatsappLinkTextDesktop, .edit_deceased_contents, .publisher {
		display: none;
	}
	
	.publisher_mobile {
		display: block;
		margin-bottom: 0.5vh;
		padding: 2px;
		color: #D8CF82;
		font-size: 12px;
		width: 100%;
		height: 2.3vh;
		text-align: center;
	}
	.whatsappLinkMobile {
		display: block;
		margin: 0 auto;
		padding: 2px;
		color: #D8CF82;
		font-size: 12px;
		width: 95%;
		max-height: 10.5vh;
		text-align: center;
	}
	.chi-whatsappDisplayMobile { 
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}
	chi-#whatsappDisplayMobile span {
    	display: inline; /* Ensure spans are displayed inline */
	}
	
	.whatsappSection {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 2px;
		width: 100%;
	}

	#whatsappDisplayMobile {
		display: flex;
		justify-content: center;
	}

	#whatsappDisplayMobile span {
		padding: 5px;
	}

	.whatsapp_btn {
		display: inline-block;  /* Ensure buttons take minimal witdth */
		-margin: 5px 5px; /* Adust to 10px gap between buttons */
		padding: 5px 10px;
		font-size: 12px;
		cursor: pointer;
	}

	.whatsapp_copy_delete {
		display: flex;
		justify-content: center;
		gap: 10px; /* Ensure 10px gap between buttons */
		flex-wrap: nowrap; /* Prevent wrapping */
	}
	#whatsappFormMobile {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.whatappDetails {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		flex-wrap: nowrap; /* Prevent wrapping */
	}
	
	#whatsappLinkMobile {
		width: 88%;
		margin: 0;
	}

	#-whatsappOkButtonMobile {
        display: inline-block; /* Ensure button does not take full width */
        cursor: pointer; /* Pointer cursor for button */
    }

	#whatsappLinkTextMobile {
		text-overflow: ellipsis;
		max-width: 75%;/* Adjust as needed */
		text-align: center;
	}

	
	.publisher_mobile > names {
		background-color: #384E2D;
		margin-right: 5px;
		padding: 2px 5px;
		border-radius: 4px;
	}
	.publisher_mobile > relation {
		color: #384E2D;
	}


    
	.content {
		margin-top: 5px;
		-height: 750px;
		height: auto; /* Adjust height for flexibility */
	}
	.display_area {
		width: 95%;
		-height: 95%;
		height: auto;
        margin: auto; /* Center horizontally */
	}

	.pagination {
		margin-top: 6px;
	}

	.page-item {
		font-size: 10px;
		-padding: 5px 22px;
		padding: 3px 12px;
	}
	
	.scroll-bg, .-scroll-bg2, .-scroll-bg3 {
		padding-left: 0px;
		padding-right: 0px;
		width: 100%;
		max-height:100%;
		margin: auto; /* Center horizontally */
		border-radius: 5px;

	}	
	
	.scroll-div, .scroll-div2, .scroll-div3  {
		-max-height: 600px;
		height: auto;
		width: 100%;
		margin: auto; /* Center horizontally */
		border-radius: 5px;
	}

		.-announce_messages {
		width: 100%;
		-height: 100%;
		height: auto;
		margin: 0;
	}


	.condolences, .announcements {
		width: 100%;
		max-height: 250px; /* Maximum height */
        overflow: visible; /* Allow container to shrink */
        padding: 10px; /* Padding */
        box-sizing: border-box; /* Include padding in width and height */
        display: flex;
        flex-direction: column; /* Vertical alignment of content */
	}

	.condolences span, .announcements span {
		display: none;
	}

	.scroll-object, .scroll-object2, .scroll-object3 {
		color: wheat;
		font-family: Cursive, 'Lucida Handwriting';
		font-size: 12px;
		padding: 10px;
	}

	
	
	
	.life-history {
		width: 100%;
		height: 600px;
		overflow: hidden;
		overflow-y: scroll;
		background: #222;
		
	}
	.scroll-object {
		color: wheat;
		font-family: Cursive, 'Lucida Handwriting';
		font-size: 12px;
		padding: 10px;
	}
	
	
	
	.biography h3 {
		color: white;
	}

	.messages {
		display: none;
		width: 100%;
		height: auto;
	}
	
	/* Condolenses section */
	.condols {
		width: 100%;
		height: auto;
		display: none;
	}

	.condol_messages, .announce_messages {
		width: 95%;
		-width: 100%;
		height: 750px;
		margin-left: auto;
		margin-right: auto;
		padding: 10px;
		border-radius: 12px;
	}

	.-condolenses, .-announcements {
		width: 98%;
		height: 100px;
		background-color: rgba(100, 100, 100, 0.3);
		display: flex;
		margin-left: 0px;
		margin-right: 0px;
		padding-right: 0px;
		margin-bottom: 8px;
		border-radius: 0px;
		background: green;
		margin-left: auto;
		margin-right: auto;
	}

	.userFace, .announcerFace {
		display: none;
		
	}
	
	.names, .sender_names {
		text-align: left;
		
	}
	.message, .the_announcement {
		padding: 3px 0;
		margin-right: auto;
		margin-left: auto;
		color: wheat;
	}

	/* Photo Section */
	subject {
		text-align: center;
		font-size: 4.5vw;
	}

	visit {
		padding: 0;
		padding-right: 0;
		padding-left: 0;
		margin: 10;
		margin-top: 4px;
		font-size: 3.5vw;
	}
	
	/* ********************************************* */
	/* Style for the photo gallery container */

	/* Styles for the file input and submit button */	
	
	
	

	/* Container for holding the form contents */
	

	.form-upload {
		/* Common styles for both file input and submit button */
		background-color: #384E2D; /* Set the background color */
		color: white; /* Set the text color to white */
		-padding: 0.3vh 1.5vw; /* Add some padding around the text */
		padding: 0.7vh 2vw;
		margin: 0;
		-padding: 0;
		border: none; /* Remove the border */
		cursor: pointer; /* Change the cursor to a pointer on hover */
		transition: background-color 0.3s ease; /* Add a smooth transition effect */
		border-radius: 4px;

		/* You can add more custom styles here as needed */
	}

	.form-upload:hover {
		/* Styles for the hover effect */
		background-color: #45a049; /* Darker background color on hover */
	}

	/* Style for the file input */
	.form-upload[type="file"] {
		/* Hide the default file input styles */
		position: absolute;
		left: -9999px;
		
	}

	/* Optional style for the file input label */




	
	
	#uploadMessage {
		height: 4vh;
		text-align: center;
		padding-bottom: 0.5vh;
		color: wheat; /* Optional: Set the color for the upload message */
	}

	.file-label, .form-upload {
		margin: 0;

	}


	.biography {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: auto;
	}

	.hero-btn input[type="submit"] {
		/* Or as below */
	}

	form input#submit {
		display: inline-block;
		text-decoration: none;
		font-size: 10px;
		color: #D8CF82;
		background-color: rgba(100, 100, 100, 0.5);
		border: none;
		padding: 8px 22px;
		position: relative;
		cursor: pointer;
		margin: 0 auto;
		border-radius: 4px;
	}
	.hero-btn {
		text-align: center; /* Center the button horizontally */
		margin-top: 10px; /* Add some top margin if needed */
		display: flex;
		align-content: center;
		margin-left: 15px;
	}
	
	.hero-btn input[type="submit"] {
		display: inline-block; /* Ensure button does not take full width */
		-margin: auto;
		-margin-right: auto;
		border: 1px solid #D8CF82;
		cursor: pointer;
		color: #D8CF82;
		background: transparent;
		font-size: 12px;
		-margin-top: 3px;
		padding: 5px 10px;
		border-radius: 4px;
		text-decoration: none;
		transition: background-color 0.3s ease, color 0.3s ease;
	}

	.mobile-view {
		-border: 1px solid #D8CF82;
		background: #222;
		width: 96%;
		margin: 2px auto;
		padding-bottom: 6px;
		border-radius: 5px;
	}

    /* Correct styling for Announcements*/
	.content {
        width: 100%;
        height: auto; /* Allow height to adjust based on content */
        margin: 0;
    }

    .display_area {
        width: 100%;
        height: auto; /* Allow height to adjust based on content */
        padding-top: 10px;
        margin: 0;
    }

    .messages {
        width: 100%;
        height: auto; /* Allow height to adjust based on content */
	}
	.condols {
        width: 100%;
        height: auto; /* Allow height to adjust based on content */
    }


    .information {
        font-size: 12px;
        color: wheat;
        width: 100%;
        margin: 0 auto; /* Center horizontally */
    }

    .scroll-bg, .scroll-bg2, .scroll-bg3 {
        width: 100%;
		width: 98%;
        height: auto; /* Allow height to adjust based on content */
        margin: 0 auto;
        padding: 0;
        display: flex;
        flex-direction: column; /* Stack announcements vertically */
        align-items: stretch; /* Stretch to fit content */
        gap: 10px; /* Space between elements */
		
    }

    .-scroll-bg2, .scroll-div, .scroll-div1, .scroll-div3 {
        width: 100%;
		width: 98%;
        -height: auto; /* Allow height to adjust based on content */
        -height: calc(8 * 250px); /* Maximum height for 8 announcements */
		-height: 650px;
		max-height: 500px;
        overflow-y: auto; /* Scroll if content exceeds max height */
        display: flex;
        flex-direction: column; /* Stack announcements vertically */
        align-items: stretch; /* Stretch to fit content */
		
    }

    .condol_messages, .announce_messages {
        width: 100%;
        height: auto; /* Allow height to adjust based on content */
		-max-height: 700px;
        display: flex;
        flex-direction: column; /* Stack announcements vertically */
        gap: 10px; /* Space between announcements */
		border-radius: 4px;
	
    }

    .condolences, .announcements {
        width: 100%;
        max-height: 250px; /* Maximum height for each announcement */
        min-height: 50px; /* Minimum height for each announcement */
        height: auto; /* Allow height to adjust based on content */
        -background-color: rgba(100, 100, 100, 0.3);
		background-color: rgb(34, 34, 34);
        display: flex;
        align-content: flex-start; /* Align content to the top */
       		padding-top: 5px;
		padding-bottom: 5px;
        border-radius: 5px;
		color: wheat;
        overflow: hidden; /* Ensure no overflow */
    }

    .announcerFace {
        width: 10%;
        height: 100%;
        margin-right: 5px;
    }

    .announcerFace img {
        width: 100%;
        height: auto; /* Adjust height to maintain aspect ratio */
        border-radius: 12px;
    }

    .details {
		flex: 1;
        display: flex;
        flex-direction: column;
        padding: 5px;
		border-radius: 4px;
		margin: 0;
    }

    .-sender_names {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 800;
        color: #D8CF82;
        padding: 5px;
		padding: 0;
        font-size: 12px;
	}

	edit_announce {
		margin: 0;
		font-size: 2.8vw;
		padding: 2px 12px;
	}

    .the_announcement {
        padding: 5px;
		padding: 0;
        -color: #555;
		color: wheat;
        font-size: 12px;
		text-align: justify;
		
    }

    .pagination {
        display: flex;
        justify-content: space-between;
        -margin-top: 5px;
		margin-bottom: 12px;
		
    }

    .pagination .page-item {
        background: transparent;
        border: 1px solid #D8CF82;
        cursor: pointer;
        color: #D8CF82;
        padding: 5px 20px;
        border-radius: 4px;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .pagination .page-item:hover {
        background: #384E2D;
        color: white;
    }

    
	/* Section for Photo Gallary Container Styles */


	.scrollers {
		display: none;
	}

    .photos-container {
        display: none;
    }

   	
	/* Main photo container */
	.photo {
		display: none;
		height: 105vh; /* Full viewport height for the container */
		margin-top: 20px;
		margin: 0;
	}
	.heading {
		text-align: center;
	}
	
	/* Main content container */
	.content {
		margin-top: 10px;
		height: auto;
		border-radius: 5px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Inner display area */
	.display_area {
		width: 100%;
		height: auto;
		margin-top: 5px;
		padding-top: 10px;
		margin: auto;
		border-radius: 5px;
	}

	/* Photos section */
	.photos {
		height: 95vh;
		height: 98vh;
		width: 95%;
		border: 1px solid darkgray;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 5px;
		padding: 5px;
		overflow: hidden;
		margin-bottom: 10px;
	}

	/* Scroll button styles */
	.verticalScrollButtonsForMobile,
	.photos-container-mobile,
	#scrollUpButton,
	#scrollDownButton {
		display: block;
	}

	.horizontalScrollButtonsForDesktop {
		display: none;
	}

	.scrollers {
		display: none;
	}

	.verticalScrollButtonsForMobile {
		display: flex;
		flex-direction: column;
		justify-content: space-between; /* Distribute space between scroll buttons */
		align-items: center;
		width: 100%;
		height: 75vh;
		
	}

	.uploading, .deletion {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 8vh;
		margin: 0;
		padding: 0;
		padding-top: 5px;
	}
	
	.deletion {
		height: 5vh;
	}

	#uploadForm {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		padding-top: 0.5vh;
	}

	.form-contents {
		width: 100%;
		height: 4.5vh;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		margin: 0;
		gap: 1vw; /* Space between elements, adjust as needed */
	}

	
    .file-label-container,
    .submit-button-container {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0;
		padding: 0;
		height: 100%;
    }

	.file-label-container {
		width: 65%;
	}

	.submit-button-container {
		width: 30%;
	}

	.file-label {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding: 0.7vh 2vw;
		color: #333;
		cursor: pointer;
		border-radius: 4px;
		background-color: transparent;
		border: none;
	}

	/* Optional hover style for the file input label */
	.file-label:hover {
		background-color: #ddd;
	}

	#fileLabel {
		display: inline-block;
		width: 100%;
		background-color: #f2f2f2;
		border: 1px solid #ccc;
		padding: 0.7vh 2vw;
		border-radius: 4px;
		transition: background-color 0.3s ease;
		text-overflow: ellipsis; 
		white-space: nowrap;
		overflow: hidden;
	}

	#fileLabel:hover {
		background-color: #ddd;
	}

	.gallery-wrap {
		height: 100%;
		width: 100%;
		padding-bottom: 0;
		border: none;
	}

	/* Mobile photos container */
	.photos-container-mobile {
		width: 95%;
		-height: calc(2 * 35vh + 2 * 2.5vh + 2 * 10px); /* Adjust for scroll buttons */
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		border: 1px solid green;
		border-radius: 5px;
		margin: 0;
		padding: 0;
		margin-top: 10px;
	}

	.photos-container-mobile::-webkit-scrollbar {
		display: none;
	}

	/* Individual gallery item */
	.gallery-item {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 90%;
		-height: 40vh; /* Fixed height for photo */
		height: 42vh;
		margin: 5px 0;
		padding: 5px 0;
		background-color: black;
		border-radius: 5px;
	}

	.gallery-item img {
		width: 75vw;
		height: 37vh;
		margin: 0;
		border-radius: 5px;
		object-fit: cover;
	}
	.gallery-item img:hover {
		filter: grayscale(0);
		cursor: pointer;
		transform: none;
	}

	/* Scroll button container */
	.verticalScrollButtonsForMobile {
		position: relative; /* Relative position to contain absolutely positioned buttons */
    	width: 100%;
    	height: 100%; /* Full height to overlay buttons properly */
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: calc(2 * 35vh + 2.5vh + 2 * 5px + 10vh); /* Space for scroll buttons */
		position: relative; /* Relative position to contain absolutely positioned buttons */
    	-width: 100%;
    	-height: 100%; /* Full height to overlay buttons properly */
		margin: 0; /* Remove any margin */
    	padding: 0; /* Remove any padding */
	}

	#scrollUpButton, #scrollDownButton {
		background: transparent;
		border: none;
		font-size: 1rem;
		cursor: pointer;
		-margin: 5px 0;
		color: #D8CF82;
		padding: 0.3vh 3vw;
		background-color: #383E2D;
		border-radius: 4px;
	}

	/* Delete checkbox */
	.delete-checkbox {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); /* Centering the checkbox */
        width: 7vw; /* Larger size for mobile */
        height: 6.5vh; /* Larger size for mobile */
    }

	.edit_delete_deceased_contents {
		display: flex;
		justify-content: center;
		gap: 0.8vw;
	}

	.delete_deceased {
		display: none;
	}

	.edit_delete_deceased_contents {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 15px; /* modern way to add spacing between children */
		padding: 0 10px;                  /* 10px from left & right edges */
        margin: 0 0 6px;
	}
	
	.edit_deceased_contents_mobile1,
	.delete_deceased_contents_mobile1 {
		margin-top: 2px;
		margin-bottom: 2px;
	}
	.delete_deceased_contents_mobile1 {
		margin: 0;
		padding: 0;

	}
	/* Remove any stray margin that might push the Delete button down */
    .delete_deceased_contents_mobile form {
        margin: 0;
        display: flex;                    /* keeps button aligned */
        align-items: center;
    }

	/* Normalize button padding / font */
    .edit-deceased-link,
    .delete_deceased_contents_mobile button {
        display: inline-block;
        font-size: 0.75rem;
        padding: 0.35rem 0.7rem;
        line-height: 1;               /* identical vertical rhythm */
		border-radius: 0.2rem;
		cursor: pointer;
    }
	
	.delete_deceased_contents_mobile button {
		background-color: red !important;
		color: white; 
		font-size: 0.75rem;
		padding: 0.4rem 0.7rem;
		border: none;
		border-radius: 0.2rem;
		cursor: pointer;
	}

	.delete_deceased_contents_mobile button:hover {
		background-color: darkred !important; /* Optional: darker red on hover */
	}


	#toast {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		font-size: 0.85em;
		width: 90vw;
		max-width: 90vw;
 	}

	#toast {
		font-size: 0.85em;
		width: 90vw;
	}
	

	.pay-now-wrapper {
		display: none;
	}
	.pay-now-wrapper-mobile {
		display: flex;
		justify-content: center;
		align-items:center;
		height: 4.5%;
		margin-bottom: 3px;
	}

	#payNow {
		padding: 3px 8px;
	}

	html, body {
		overflow-x: hidden !important;
		overflow-y: auto !important;
	  }
	 




	

    .dead {
        width: 100%;
        height: auto; /* let it expand with content */
        display: flex;
        flex-direction: column;
        margin-top: 0%;
        padding-top: 0%;
        flex-grow: 1;
    }

    .headings {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;   /* auto instead of fixed */
        flex-shrink: 0;
    }

    .portrait {
        height: auto;
        width: 25vh;
        margin: 5px auto 0 auto;
    }

    .portrait img {
        width: 21vh;
        height: 21vh;
    }

    .deceased_names {
        height: auto;
        margin: 4px 0;
    }

    .flower-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 4px 0.8vw;
        max-height: none; /* remove fixed restriction */
    }

    /* Mobile action section (collapsed by default) */
	.mobile-action-section {
		display: none; /* collapsed unless activated */
		flex-direction: column;
		align-items: center;
		width: 100%;
	}
	.mobile-action-section.active {
		display: flex; /* show only when JS or Jinja activates it */
	}

	/* Pay Now wrapper (no need for display:none here) */
	.pay-now-wrapper-mobile {
		justify-content: center;
		margin-top: 4px;
	}

	#payNowMobile {
		padding: 3px 6px;
		font-size: 12px;
		color: #D8CF82;
		transition: background 0.3s, color 0.3s, opacity 1s ease-out;
	}
	
	/* Countdown box for mobile */
	.countdown-box-mobile {
		margin-top: 2px;
		padding: 2px 4px;
		font-size: 10px;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: none; /* collapsed by default */
	}

	.countdown-box-mobile.active {
		display: block; /* show when JS injects countdown */
	}
	.countdown-box-mobile.final-warning {
		background: rgba(255, 0, 0, 0.2);
		border-color: #ff0000;
		color: #ff2222;
	}

    
}