/* styles.css */
body {
        font-family: 'Comfortaa', sans-serif;
    background: linear-gradient(135deg, #ffcdb2, #ffb4a2, #e5989b);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444;
    margin: 0;
    /* background: linear-gradient(to bottom, rgba(229, 152, 155, 0) 70%, #e5989b 100%), url(/images/bg.png) repeat-x top center; */
    background: linear-gradient(to bottom, rgba(229, 152, 155, 0) 5%, #ffaca5 100%), url(/images/bg.jpg) repeat-x top center;
    background-size: auto 200px;
    background-color: #ffaca5;
}
/* Styling for the main navigation menu */
.logo {
    position: absolute; 
	top: 17px; left: 35px;
    z-index: 1000;
}
.logo img {
    max-width:150px;
}
.main-nav {
    position: absolute;
    top: 15px;
    right: 34px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 15px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    z-index: 1000;
}
.loader
{
	text-align: center;
	display: none;
}
.loader img
{
	width: 100px;
}
ul.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
    font-family: 'Comfortaa', sans-serif;
}

ul.nav-links li a {
    text-decoration: none;
    color: #444;
    font-weight: 500;
    font-size: 16px;
    transition: color 0.3s ease-in-out;
}

ul.nav-links li:not(:last-child)::after {
    content: '|';
    color: #ccc;
    margin-left: 20px;
}

ul.nav-links li a:hover,
ul.nav-links li a.active
{
    color: #007bff;
}
.row .col > a{cursor: pointer;}
.container {
	background: url(/images/container-bg.jpg);
    background-color: rgba(255, 255, 255, 0.95);
    padding: 1.5rem;
    border-radius: 1.5rem;
    /*box-shadow: 0 10px 0px -15px rgba(0, 0, 0, 20), 0px 10px 10px -5px rgba(0, 0, 0, 20);*/
    max-width: 1200px;
    width: 100%;
    margin: 75px 1rem;
    box-sizing: border-box;
    border: solid 5px #d28487;
}
.textarea-field
{
	min-height: 200px;
}
.section {
    transition: opacity 0.5s ease-in-out;
}

.hidden {
    display: none;
}
img.center-image{
	display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
	margin-bottom: 1.5rem;
	max-width: 300px;
}
img.center-image.bigger{
	max-width: 450px;
}
img.center-image.biggest{
	max-width: 550px;
}
.user-details{
	border-bottom: dashed 2px #aaa;
	padding-bottom: 30px;
}
.user-details a.close-btn{
	padding: 10px 15px;
    cursor: pointer;
    position: absolute;
    text-decoration: none;
    top: 0px;
    right: 0px;
    background-color: #333;
    color: #eee;
}
.user-details > div{
	display:flex;
	position: relative;
}
.user-details .primary-btn{
	max-width: 300px; padding: 0.7rem;
}
.user-details h2,
.user-details p{
	font-size: 1rem;
}
.user-details .col{
	padding: 20px 30px;
	box-sizing: border-box;
	margin: 0px;
}
.user-details .col:last-child{
	padding-left: 0px;
}
a.name-link
{
	display: table-cell; vertical-align: middle;
	transition: background-color 0.5s ease-in-out; /* Transition duration and timing function */
}
a.name-link.active
{
	background-color: #fcba03;
    color: #000;
}
h1 {
    font-size: 1.875rem; /* 3xl */
    font-weight: 700;
    text-align: center;
    color: #b5828c;
    margin-bottom: 1rem;
}

p {
    font-size: 1.2rem; /* Increased font size */
    color: #333;
    text-align: left;
    margin-bottom: 1.5rem; /* Increased margin for better spacing */
    line-height: 1.5;
}
p.sml {
    font-size: 0.8rem; /* Increased font size */
    line-height: 1;
	margin: 0px 0px;
}
p.field-info {
    font-size: 0.9rem; /* Increased font size */
    color: #666;
    text-align: left;
    margin-bottom: 1.5rem; /* Increased margin for better spacing */
    line-height: 1.6;
}
ul li
{
	font-size: 0.9rem; /* Increased font size */
	color: #666;
	margin: 5px 0px;
}

a {
    color: #b5828c;
    text-decoration: underline;
}

.section-icon {
    font-size: 2rem;
    color: #b5828c;
    margin-right: 0.75rem;
    vertical-align: middle;
}
.req
{
	color: #EC1518;
	font-weight: bold;
}
.row
{
	display: flex;
	width: 100%;
}
.results-div .row
{
	padding: 15px 20px 10px 20px;
	box-sizing: border-box;
}
.matched-rows
{
	/*box-shadow: 0px 0px 10px #ccc;*/
	display: none;
}
.matched-rows > .row
{
	    box-shadow: 0px 0px 3px #ccc;
}
.score > span{
	padding:15px 10px 10px 10px;
    color: #fff;
    display: inline;
}
.score .veryhot{
	 background-color: #CD4A4C;
}
.score .hot{
	 background-color:#C87000;
}
.score .medium{
	 background-color:#E8C926;
	color:#000;
}
.score .low{
	background-color:aquamarine;
	color:#000;
}
.results-div .row.hdr
{
	font-weight: bold;
	background-color: #555 !important;
	color: #EEE !important;
	padding: 20px;
}
/* Even rows (2, 4, 6, ...) - Use pure white for clear contrast */
.results-div .row:nth-child(even) {
    background-color: #FFFFFF; 
}

/* Odd rows (1, 3, 5, ...) - Use a shade that's very close to the base light grey */
.results-div .row:nth-child(odd) {
    background-color: #F5F5F5; /* Slightly off-white/very light grey */
}
.row .col
{
	display: flex;
}
.row .col.md-2
{
	width: 20%;
}
.row .col.md-8
{
	width: 80%;
}
.row .col.md-7
{
	width: 65%;
}
.row .col.md-6
{
	width: 60%;
}
.row .col.md-5
{
	width: 50%;
}
.row .col.md-3
{
	width: 33%;
}
.additional_info .col
{
	padding: 10px;
	display: block;
}
.additional_info .col ul
{
	 padding: 0px 30px 0px 30px;
}
.results-div .row .col.md-6
{
	line-height: 25px;
    margin-top: -5px;
}
.results-div .row.hdr .col.md-6
{
    margin-top: 0px;
	line-height: 16px;
}
.btn_row
{
	margin: 30px;
}
.match-row-main
{
	margin: 30px 0px;
}
.match-row-main > a
{
	padding: 15px; background-color: #a3727a;
	cursor: pointer;
	display: block; /* Allows the arrow to align nicely */
  align-items: center;
  text-decoration: none; /* Optional: remove underline */
  color: #fff;
	transition: background-color 0.5s ease-in-out;
}
/* Base style for the arrow (pointing right) */
.toggle-arrow {
  display: inline-block;
  margin-left: 8px; /* Space between text and arrow */
  width: 0;
  height: 0;
  
  /* Create the right-pointing triangle using borders */
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #fff; /* This border forms the arrow */
  
  /* Smooth transition for the rotation */
  
  transition: transform 0.2s ease-in-out;
  transition: color 0.5s ease-in-out;
  /* Initial rotation: 0 degrees (pointing right) */
  transform: rotate(0deg);
}

/* Style when the 'active' class is added (pointing down) */
.match-row-main > a.active .toggle-arrow {
  /* Rotate 90 degrees clockwise (pointing down) */
  border-left: 5px solid #fff; /* Ensure the color stays the same */
  transform: rotate(90deg);
}
.match-row-main > a:hover
{
	background-color: #e5989b;
}
.input-group {
    margin-top: 2rem;
   /* box-shadow: 3px 3px #fecbc5;
    background: #fff;*/
    padding: 10px 20px;
	border-bottom: 2px solid #d28487;
}
.modal-body .input-group
{
	margin-top: 0rem;
}
.input-group.noborder {
	border-bottom:none;
}

.input-label {
    display: block;
    color: #666;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.text-field {
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
	font-size: 1rem;
}

.text-field:focus {
    outline: none;
    border-color: #ffb4a2;
    box-shadow: 0 0 0 2px rgba(255, 180, 162, 0.5);
}

.next-btn,
.primary-btn {
    width: 100%;
    margin-top: 1.5rem;
    padding: 1rem 1.5rem;
    background-color: #b5828c;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.125rem;
    border: none;
    border-radius: 9999px; /* full rounded */
    box-shadow: 0 10px 15px -3px rgba(181, 130, 140, 0.3), 0 4px 6px -2px rgba(181, 130, 140, 0.15);
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.primary-btn.sec-btn
{
	background-color: #777;
}

.next-btn:hover,
.primary-btn:hover {
    background-color: #a3727a;
    transform: translateY(-2px);
    box-shadow: 0 15px 20px -5px rgba(181, 130, 140, 0.4), 0 6px 10px -3px rgba(181, 130, 140, 0.25);
}

.status-message {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    text-align: center;
    font-weight: 600;
}

.status-success {
    background-color: #e6ffed;
    color: #4caf50;
    border: 2px solid #81c784;
}

.status-error {
    background-color: #ffebee;
    color: #f44336;
    border: 2px solid #ef9a9a;
}

.key-display {
    margin-top: 2rem;
    padding: 2rem;
    background-color: #fff2eb;
    border: 4px solid #ffb4a2;
    color: #b5828c;
    font-size: 1.25rem;
    font-family: monospace;
    text-align: center;
    border-radius: 0.75rem;
    word-wrap: break-word;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease-out;
}

.key-display:hover {
    transform: scale(1.02);
}

/*POPUP */

/* ------------------------------------------- */
/* --- Popup Modal Styles --- */
/* ------------------------------------------- */

/* Backdrop that covers the screen */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
}

/* Modal Container */
.modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: 90%;
    max-width: 750px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

/* Modal Content */
.modal-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Modal Header */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #444;
}

/* Close button */
.modal-close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #888;
    transition: color 0.2s ease-in-out;
}

.modal-close-btn:hover {
    color: #d9534f;
}

/* Modal Body */
.modal-body {
    flex-grow: 1;
    overflow-y: auto;
    line-height: 1.6;
    color: #555;
}

/* Modal Footer */
.modal-footer {
    padding-top: 16px;
    text-align: center;
    border-top: 1px solid #e0e0e0;
    margin-top: 16px;
}
.modal-footer .pop-btns {
    display: flex;
}
.modal-footer .pop-btns a {
    display: block;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
    background-color: #e5989b;
    color: #000;
    margin: 0px 10px;
}


/* Utility Class */
.hidden {
    display: none;
}

/* invite code list */

  ul#inviteCodesList {
    list-style: none;
    padding: 0;
  }

  ul#inviteCodesList li {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0px 0px 10px #ccc;
  }

 ul#inviteCodesList li a {
    margin-right: 10px;
  }

  ul#inviteCodesList li .copy-btn {
    cursor: pointer;
    border: none;
    background: none;
    font-size: 18px;
    margin-left: 5px;
  }

  ul#inviteCodesList li .copied-msg {
    margin-left: 10px;
    color: green;
    font-size: 14px;
    display: none;
  }
/* Animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#conversationsList ul
{
	list-style: none;
    padding: 0px 20px 0px 0px;
}
#conversationsList ul li
{
	margin: 0px;
}
#conversationsList ul li a
{
	text-decoration: none;
	font-weight: bold;
	display: block;
    padding: 20px 10px;
	background-color: #fff;
	border-bottom: solid 1px #eee;
	cursor: pointer;
	transition: background-color 0.5s ease-in-out; /* Transition duration and timing function */
}
#conversationsList ul li a:hover,
#conversationsList ul li a.active
{
	background-color: #a3727a;
	color: #fff;
}
#messagesList,
#messagesContainer
{
	position: relative;
}
#messagesContainer
{
	display: none;
}
#messagesList .message{
	background-color: #fff;
    padding: 100px 30px 30px 30px;
    box-shadow: 0px 0px 15px #ddd;
    border-radius: 20px;
}
#messagesList .message p.sender
{
	
	border-radius: 10px;
}
#messagesList .message p.sender.you > span
{
	background-color: #aaa;
	padding: 5px 10px; 
		border-radius: 10px;
}
#messagesList .message p.sender.friend
{
	text-align: right;
}
#messagesList .message p.sender.friend > span
{
	background-color: #e5989b;
	padding: 5px 10px; 
	border-radius: 10px;
}
#messagesList .message p.sml
{
	padding: 0px 0px 10px 0px;
	border-bottom: solid 1px #ccc;
	font-size: 0.8rem;
}
.message p
{
	font-size: 1rem;
}
.message p:last-of-type
{
	border-bottom: none;
}




/* Message Me Button Styles (Replaces many Tailwind classes) */
.send-button {
	/* Layout & Sizing (w-full, flex, items-center, justify-center, space-x-3) */
	z-index: 999;
	position: absolute;
	top: 20px; right: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem; /* Equivalent to space-x-3 */

	/* Appearance (bg-white, text-gray-900, font-bold, text-lg) */
	background-color: #b5828c;
	color: #fff; /* Dark gray text */
	font-weight: 700;
	font-size: 1.125rem; /* Equivalent to text-lg */

	/* Spacing & Shape (py-4, px-8, rounded-full, shadow-xl) */
	padding: .5rem 1rem;
	border-radius: 9999px; /* Fully rounded */
	border: none;
	cursor: pointer;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* Equivalent to a standard shadow */

	/* Animation (transition-all duration-300) */
	transition: all 0.3s ease;
}

/* Icon Styling for Font Awesome */
.fa-envelope {
	/* Font size for visual size (equivalent to w-6/h-6) */
	font-size: 1.5rem; 

	/* Color & Transition */
	color: #fff; /* Dark gray color */
	transition: color 0.3s ease;
}

/* Hover Effects (hover:bg-gray-100, hover:shadow-2xl) */
.send-button:hover {
	color: #000;
	background-color: #ffb4a2; /* Equivalent to gray-100 */
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* Equivalent to shadow-2xl */
}

/* Icon Hover Effect */
.send-button:hover .fa-envelope {
	color: #000; /* Blue color on hover */
}

/* Active Effect (active:scale-[0.98]) */
.send-button:active {
	transform: scale(0.98);
}

/* Focus State (focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 from selected code) */
.send-button:focus {
	outline: none;
	/* Simulating focus ring: two inner box-shadows */
	box-shadow: 
		0 0 0 4px rgba(255, 255, 255, 0.5), /* Inner white ring */
		0 0 0 6px rgba(59, 130, 246, 0.5);  /* Outer blue ring */
}
/* --- DELETE BUTTON STYLES --- */
.delete-button {
	z-index: 998;
	position: absolute;
	top: 20px; left: 25px;
	/* Layout & Sizing - Same as send-button */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;

	/* Appearance (Red background, White text) */
	background-color: #dc2626; /* Strong red (red-600) */
	color: white; 
	font-size: .8rem;

	/* Spacing & Shape - Same as send-button */
	padding: 0.5rem 1rem;
	border-radius: 20px;
	border: none;
	cursor: pointer;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); 

	/* Animation */
	transition: all 0.3s ease;
}

/* Icon Styling for Font Awesome Trash */
.fa-trash-can {
	font-size: 0.8rem; 
	color: white; /* Icon is white on red button */
	transition: color 0.3s ease;
}

/* Delete Hover Effects */
.delete-button:hover {
	background-color: #ef4444; /* Slightly lighter red (red-500) on hover */
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Icon Hover Effect */
.delete-button:hover .fa-trash-can {
	color: #fca5a5; /* Light red color on hover for effect */
}

/* Delete Active Effect */
.delete-button:active {
	transform: scale(0.98);
}

/* Delete Focus State */
.delete-button:focus {
	outline: none;
	/* Simulating focus ring: white offset and red ring */
	box-shadow: 
		0 0 0 4px rgba(255, 255, 255, 0.5), /* Inner white ring */
		0 0 0 6px rgba(239, 68, 68, 0.5);  /* Outer red-500 ring */
}