/* ============================================= */
/* Astro-Dating Main Stylesheet (Combined & Updated) */
/* ============================================= */
/* --- Keyframes --- */
@keyframes fastColorCycle { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
/* --- Basic Resets & Body Defaults --- */
body, html { margin: 0; padding: 0; width: 100%; overflow-x: hidden; }
body { min-height: 100vh; box-sizing: border-box; font-family: 'Lato', sans-serif; color: #eee; line-height: 1.6; background-color: #000; padding: 0; }
/* --- Fixed Logo Styles (e.g., for info_page) --- */
#logo-container { position: fixed; top: 3vh; left: 2vw; z-index: 100; background: linear-gradient(135deg, rgba(170, 255, 255, 0.7), rgba(255, 192, 203, 0.7)); padding: 15px; border-radius: 5px; text-align: center; animation: fastColorCycle 5s infinite linear; filter: hue-rotate(0deg); transition: opacity 0.5s ease-out; color: black; }
#logo-container a { text-decoration: none; display: inline-block; }
#logo { display: block; width: 225px; height: auto; margin: 0 auto 5px auto; }
.headline-text { display: block; font-family: Georgia, serif; font-size: 1.1em; font-weight: bold; color: black; text-shadow: 0 0 2px white, 0 0 4px white; }
/* --- Main Content Area Padding --- */
#main-content { padding-top: 100px; padding-bottom: 40px; box-sizing: border-box; }
.container { max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; }
/* --- Auth Form Container Styles (Login/Register) --- */
.auth-container, .registration-container { max-width: 500px; width: 90%; padding: 30px 40px; background-color: rgba(10, 0, 20, 0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 12px; border: 1px solid rgba(170, 255, 255, 0.3); box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5), 0 4px 15px rgba(0,0,0,0.3); position: relative; z-index: 10; margin: 40px auto; }
/* --- Common Form Element Styles --- */
.form-group { margin-bottom: 15px; }
label:not(.checkbox-label) { display: block; margin-bottom: 5px; font-weight: bold; color: #ccc; }
/* Default Input/Textarea Style */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea { width: 100%; padding: 10px; border: 1px solid #555; border-radius: 4px; box-sizing: border-box; background-color: rgba(45, 45, 58, 0.7); color: #eee; font-size: 1em; font-family: 'Lato', sans-serif; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #aaffff; box-shadow: 0 0 5px rgba(170, 255, 255, 0.5); }
/* Base Button Style */
button, button[type="submit"], button[type="button"], .btn { display: inline-block; padding: 10px 20px; font-size: 1em; cursor: pointer; border-radius: 4px; font-weight: bold; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; text-align: center; vertical-align: middle; text-decoration: none; line-height: 1.5; border: 1px solid transparent; }
button:hover, button[type="submit"]:hover, button[type="button"]:hover, .btn:hover,
button:focus, button[type="submit"]:focus, button[type="button"]:focus, .btn:focus { outline: none; }
/* Translucent Primary Button */
button[type="submit"].btn-primary, .btn-primary { background-color: rgba(170, 255, 255, 0.5); border: 1px solid rgba(170, 255, 255, 0.7); color: #eee; }
button[type="submit"].btn-primary:hover, .btn-primary:hover { background-color: rgba(170, 255, 255, 0.65); border-color: rgba(170, 255, 255, 0.9); color: #fff; }
/* Translucent Secondary Button */
.btn-secondary { background-color: rgba(108, 117, 125, 0.5); border: 1px solid rgba(170, 255, 255, 0.5); color: #fff; }
.btn-secondary:hover { background-color: rgba(90, 98, 104, 0.65); border-color: rgba(170, 255, 255, 0.7); color: #fff; }
/* Other Button Styles */
.btn-danger { background-color: #dc3545; border-color: #dc3545; color: #fff; } .btn-danger:hover { background-color: #c82333; border-color: #bd2130; color: #fff; }
.btn-info { background-color: #17a2b8; border-color: #17a2b8; color: #fff; } .btn-info:hover { background-color: #138496; border-color: #117a8b; color: #fff; }
.btn-success { background-color: #198754; border-color: #198754; color: #fff; } .btn-success:hover { background-color: #157347; border-color: #146c43; color: #fff; }
.btn-warning { background-color: #ffc107; border-color: #ffc107; color: #000; } .btn-warning:hover { background-color: #ffca2c; border-color: #ffc720; color: #000; }
.btn-sm { padding: 5px 10px; font-size: 0.875em; }
.btn-outline-secondary { background-color: transparent; border: 1px solid rgba(170, 255, 255, 0.5); color: rgba(170, 255, 255, 0.8); }
.btn-outline-secondary:hover { background-color: rgba(108, 117, 125, 0.3); border-color: rgba(170, 255, 255, 0.7); color: #fff; }
/* Auth forms specific */
.auth-container h1, .registration-container h1 { text-align: center; color: #aaffff; font-family: 'Cinzel', serif; margin-top: 0; margin-bottom: 25px; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); }
.form-links { text-align: center; font-size: 0.9em; margin-top: 25px; } .form-links a { color: #aaffff; text-decoration: none; } .form-links a:hover { text-decoration: underline; } .form-links span { margin: 0 10px; color: #777; }
.remember-me { display: flex; align-items: center; font-size: 0.9em; color: #ccc; margin-top: -10px; margin-bottom: 15px; } .remember-me input[type="checkbox"] { width: auto; margin-right: 8px; accent-color: #aaffff; } .remember-me label { display: inline !important; margin-bottom: 0 !important; margin-left: 5px; font-weight: normal !important; color: #ccc !important; }
/* --- Basic Footer Style --- */
#main-footer { text-align: center; padding: 20px 0; margin-top: 40px; font-size: 0.85em; color: #aaa; border-top: 1px solid #555; } #main-footer p { margin: 5px 0; } #main-footer a { color: #aaa; }
/* === Header Styles === */
#main-header { position: fixed; top: 0; left: 0; width: 100%; background-color: rgba(10, 0, 20, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(170, 255, 255, 0.2); z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 0 2vw; box-sizing: border-box; height: 80px; }
#main-header #logo-container { position: static; background: linear-gradient(135deg, rgba(170, 255, 255, 0.7), rgba(255, 192, 203, 0.7)); animation: fastColorCycle 5s infinite linear; filter: hue-rotate(0deg); padding: 5px 10px; border-radius: 5px; margin: 0; border: none; text-align: left; display: flex; align-items: center; color: black; transition: none; } #main-header #logo { width: 130px; height: auto; margin: 0 8px 0 0; display: block; } #main-header .headline-text { font-family: Georgia, serif; font-size: 0.9em; font-weight: bold; color: black; text-shadow: 0 0 2px white, 0 0 4px white; display: inline-block; line-height: 1.2; margin-left: 0; }
/* Main Navigation Styles */
#main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; } #main-nav > ul > li { margin-left: 5px; position: relative; } #main-nav a, #main-nav .dropdown-toggle, #main-nav .user-menu-toggle { color: #eee; text-decoration: none; padding: 8px 12px; border-radius: 4px; transition: background-color 0.2s ease, color 0.2s ease; display: flex; align-items: center; font-size: 0.95em; white-space: nowrap; cursor: pointer; } #main-nav a > i, #main-nav .dropdown-toggle > i, #main-nav .user-menu-toggle > i { margin-right: 6px; } #main-nav a:hover, #main-nav .dropdown-toggle:hover, #main-nav .user-menu-toggle:hover { background-color: rgba(170, 255, 255, 0.2); color: #aaffff; } #main-nav a.active, #main-nav li.active > a, #main-nav li.active > .dropdown-toggle { background-color: rgba(170, 255, 255, 0.1); color: #aaffff; font-weight: bold; } .user-menu-toggle img { width: 28px; height: 28px; border-radius: 50%; margin-right: 8px; border: 1px solid #aaa; object-fit: cover;} .user-menu-toggle .username { margin-right: 5px; font-weight: bold; color: #eee;} .user-menu-toggle .fa-caret-down { margin-left: 5px; } .dropdown-menu li, .user-menu-dropdown li { margin: 0; } .dropdown-menu a, .user-menu-dropdown a { display: block; padding: 10px 15px; color: #eee; white-space: nowrap; font-size: 0.9em; text-decoration: none; } .dropdown-menu a i, .user-menu-dropdown a i { margin-right: 8px; width: 12px; text-align: center; color: #ccc;} .dropdown-menu a:hover, .user-menu-dropdown a:hover { background-color: #5a5a6a; color: #fff; } .dropdown-menu hr, .user-menu-dropdown hr { margin: 4px 10px; border: 0; border-top: 1px solid #555;} .dropdown-header { padding: 10px 15px; font-size: 0.8em; color: #aaa; text-transform: uppercase; }
/* Clickable Dropdowns Styles */
#main-nav .dropdown-menu, #main-nav .user-menu-dropdown { display: none; position: absolute; top: 100%; background-color: #3a3a4a; border: 1px solid #555; border-radius: 4px; list-style: none; padding: 5px 0; margin: 8px 0 0 0; min-width: 180px; box-shadow: 0 4px 8px rgba(0,0,0,0.3); z-index: 1001; } #main-nav .nav-dropdown .dropdown-menu { left: 0; right: auto; } #main-nav .user-menu .user-menu-dropdown { right: 0; left: auto; } #main-nav .dropdown-menu.show, #main-nav .user-menu-dropdown.show { display: block; } #main-nav .dropdown-toggle[aria-expanded="true"], #main-nav .user-menu-toggle[aria-expanded="true"] { background-color: rgba(170, 255, 255, 0.1); }
/* Message count badge style */
.message-count-badge { display: inline-block; background-color: #dc3545; color: white; font-size: 0.75em; padding: 2px 5px; border-radius: 8px; margin-left: 6px; font-weight: bold; line-height: 1; vertical-align: middle; }
/* --- END OF PART 1 --- */
/* --- Admin Area Specific Styles --- */
.admin-content { background-color: rgba(30, 30, 45, 0.7); padding: 20px 30px; border-radius: 8px; margin-top: 20px; border: 1px solid #444; }
.admin-content h1 { color: #aaffff; font-family: 'Cinzel', serif; margin-top: 0; margin-bottom: 20px; border-bottom: 1px solid #555; padding-bottom: 10px; }
.table { width: 100%; margin-bottom: 1rem; color: #eee; border-collapse: collapse; }
.table th, .table td { padding: 0.75rem; vertical-align: top; border-top: 1px solid #444; }
.table thead th { vertical-align: bottom; border-bottom: 2px solid #555; background-color: rgba(0,0,0,0.2); font-family: 'Cinzel', serif; }
.table tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.03); }
.table-hover tbody tr:hover { background-color: rgba(170, 255, 255, 0.1); }
.table .btn { margin-right: 5px; }
.status-active { color: #28a745; font-weight: bold; }
.status-suspended { color: #dc3545; font-style: italic; }
.status-pending_verification { color: #ffc107; } /* Renamed from pending_confirmation */
.status-deleted { color: #6c757d; text-decoration: line-through; }
.pagination { display: flex; padding-left: 0; list-style: none; border-radius: 0.25rem; margin-top: 1.5rem; }
.justify-content-center { justify-content: center !important; }
.page-item { margin: 0 2px; }
.page-item.disabled .page-link { color: #6c757d; pointer-events: none; background-color: transparent; border-color: #444; }
.page-item.active .page-link { z-index: 1; color: #1a1a2a; background-color: #aaffff; border-color: #aaffff; }
.page-link { position: relative; display: block; padding: 0.5rem 0.75rem; line-height: 1.25; color: #aaffff; background-color: transparent; border: 1px solid #444; border-radius: 0.25rem; }
.page-link:hover { z-index: 2; color: #fff; text-decoration: none; background-color: rgba(170, 255, 255, 0.1); border-color: #555; }
.alert { padding: 1rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; }
.alert-success { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc;}
.alert-danger { color: #842029; background-color: #f8d7da; border-color: #f5c2c7;}
.alert-warning { color: #664d03; background-color: #fff3cd; border-color: #ffecb5;}
.alert-info { color: #055160; background-color: #cff4fc; border-color: #b6effb;}
/* Utility */
.mb-3 { margin-bottom: 1rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.text-center { text-align: center !important; }
.text-muted { color: #aaa !important; }
.small { font-size: 85%; }
.mr-2 { margin-right: 0.5rem !important; }
.fa-fw { text-align: center; width: 1.28571429em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* For screen readers */
/* --- Learn Section Styles --- */
.learn-container { max-width: 850px; /* Consolidated below */ }
.learn-container h1, .learn-container h2, .learn-container h3 { font-family: 'Cinzel', serif; color: #aaffff; margin-bottom: 0.75em; font-weight: 600; border-bottom: 1px solid rgba(170, 255, 255, 0.2); padding-bottom: 10px; }
.learn-container h1 { font-size: 1.8em; text-align: center; margin-top: 0; }
.learn-container h2 { font-size: 1.5em; color: #D8BFD8; margin-top: 1.5em; }
.learn-container h3 { font-size: 1.2em; color: #ccc; border-bottom: none; margin-top: 1.2em; }
.learn-container p { font-family: 'Lato', sans-serif; font-size: 1.05em; line-height: 1.7; margin-bottom: 1.2em; }
.learn-container a { color: #aaffff; }
.learn-container a:hover { color: #fff; }
.learn-nav { margin-top: 2em; padding-top: 1em; border-top: 1px solid rgba(170, 255, 255, 0.2); display: flex; justify-content: space-between; font-size: 0.9em; }
.learn-container ul { padding-left: 20px; margin-bottom: 1.2em; }
.learn-container li { margin-bottom: 0.5em; }
.learn-container .glyph { display: inline-block; width: 25px; font-size: 1.1em; color: #aaffff; text-align: center; margin-right: 3px; vertical-align: middle; }
.learn-topic-list { list-style: none; padding-left: 0; }
.learn-topic-list li { margin-bottom: 0.6em; }
.learn-topic-list a { text-decoration: none; display: block; padding: 10px 15px; background-color: rgba(255,255,255,0.05); border-radius: 4px; transition: background-color 0.2s ease; border: 1px solid rgba(170, 255, 255, 0.1); color: #eee; }
.learn-topic-list a:hover { background-color: rgba(170, 255, 255, 0.1); color: #aaffff; }
.learn-topic-list a i { color:#aaffff; margin-right: 8px; }
/* Shared Natal Details styles (used in profile.php embedded too) */
.natal-details h3 { margin-top: 1em; margin-bottom: 0.5em; }
.natal-details .details-list { list-style: none; padding-left: 0; margin-left: 5px; font-size: 0.9em; margin-bottom: 1.5em; }
.natal-details li { margin-bottom: 5px; line-height: 1.4; }
.natal-details .glyph { display: inline-block; width: 25px; font-size: 1.1em; color: #aaffff; text-align: center; margin-right: 3px; vertical-align: middle; }
.natal-details .sign-name { font-weight: bold; }
.natal-details .house-label { display: inline-block; width: 75px; font-weight: bold; color: #ccc; }
.natal-details .degree { margin: 0 2px; }
/* --- Page Specific Backgrounds --- */
body.page-info { background-image: url('/assets/images/nebula.jpg'); background-size: cover; background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-color: #000; }
body.page-main { background-image: url('/assets/images/nebula.jpg'); background-size: cover; background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-color: #000; }
/* === Page Content Containers (Consolidated & Added Messaging/Conversation) === */
.profile-page,
.profile-view-page,
.photo-management-page,
.messages-page,
.conversation-view-page,
.learn-container, /* Added Learn */
.auth-container, /* Added Auth */
.registration-container /* Added Register */
{
margin: 20px auto; padding: 20px; background-color: rgba(10, 0, 20, 0.7); border-radius: 8px; border: 1px solid rgba(170, 255, 255, 0.2); box-shadow: 0 4px 15px rgba(0,0,0,0.3); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); /* Added subtle blur to default containers */
}
/* Overrides for specific containers */
.profile-page { max-width: 750px; }
.profile-view-page { max-width: 1000px; background-color: rgba(10, 0, 20, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Keep profile slightly more opaque */
.photo-management-page { max-width: 900px; }
.messages-page { max-width: 800px; }
/* Conversation view page container */
.conversation-view-page {
max-width: 800px; /* Match messages-page */
/* Lighter base color, still mostly opaque */
background-color: rgba(45, 45, 70, 0.85); /* Dark Blue/Purple base, 85% opaque */
/* Keep the blur */
-webkit-backdrop-filter: blur(8px); /* Safari */
backdrop-filter: blur(8px); /* Standard */
}
/* Text shadow for conversation view page */
.conversation-view-page h1,
#reply-form h2 { text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); }
.back-link a { color: #aaffff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); font-weight: bold; text-decoration: none; }
.back-link a:hover { color: #fff; text-decoration: underline;}
/* Profile page actions div */
.profile-page-actions { text-align: center; margin-bottom: 25px; }
/* Interest Tag Style */
.interest-tag { display: inline-block; background-color: rgba(216, 191, 216, 0.35); color: #eee; padding: 4px 10px; border-radius: 15px; margin: 3px; font-size: 0.9em; border: 1px solid rgba(170, 255, 255, 0.3); transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; vertical-align: middle; }
.interest-tag:hover { background-color: rgba(216, 191, 216, 0.5); border-color: rgba(170, 255, 255, 0.5); }
/* === Profile Edit Page Specific Styles === */
#profile-form fieldset { border: 1px solid #444; border-radius: 5px; margin-bottom: 25px; padding: 15px 20px; }
#profile-form legend { font-weight: bold; color: #aaffff; padding: 0 10px; font-size: 1.1em; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
#profile-form .form-note { font-size: 0.9em; color: #ccc; margin-bottom: 15px; }
#profile-form > div:not(.form-group):not(.date-select-group):not(.time-select-group):not(.checkbox-layout-group):not(.profile-page-actions) { margin-bottom: 15px; }
#profile-form label:not(.checkbox-label) { display: block; margin-bottom: 5px; color: #D8D8D8; font-weight: bold; font-size: 0.95em; }
#profile-form small { font-size: 0.85em; color: #aaa; display: block; margin-top: 3px; }
#profile-form select { background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: right 10px center; background-size: 1.2em; padding-right: 30px; appearance: none; -webkit-appearance: none; -moz-appearance: none; }
#profile-form textarea { min-height: 100px; resize: vertical; }
#profile-form .checkbox-layout-group { display: flex; flex-wrap: wrap; gap: 10px 20px; padding-top: 5px; margin-bottom: 5px; }
#profile-form .checkbox-group { display: inline-flex; align-items: center; margin-right: 10px; margin-bottom: 5px; }
#profile-form .checkbox-group input[type="checkbox"] { margin-right: 5px; width: auto; flex-shrink: 0; }
#profile-form .checkbox-group label.checkbox-label { display: inline; margin-bottom: 0; font-weight: normal; color: #ccc; cursor: pointer; }
#profile-form .select-group { display: inline-flex; align-items: center; margin-bottom: 5px; margin-right: 10px; }
#profile-form .select-group label { margin-right: 5px; font-weight: normal; margin-bottom: 0; color: #ccc; flex-shrink: 0;}
#profile-form .select-group select { min-width: 150px; width: auto; }
#profile-form .date-select-group, #profile-form .time-select-group { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 5px; }
#profile-form .date-select-group + span.form-error-message + small, #profile-form .time-select-group + small { margin-top: 8px; }
#profile-form .date-select-group select[name="birth_month"] { flex: 1 1 120px; } #profile-form .date-select-group select[name="birth_day"] { flex: 0 0 70px; } #profile-form .date-select-group select[name="birth_year"] { flex: 0 0 90px; }
#profile-form .time-select-group select { flex: 0 0 80px; } #profile-form .time-select-group span.separator { color: #ccc; margin: 0 5px; }
.interests-checkbox-container { column-count: 3; column-gap: 15px; padding: 10px 15px; margin-bottom: 0; max-height: 300px; overflow-y: auto; background-color: rgba(0, 0, 0, 0.1); border: 1px solid #444; border-radius: 4px; }
.interests-checkbox-container + small { margin-top: 8px; }
.interests-checkbox-container .checkbox-group { display: block; margin-bottom: 8px; break-inside: avoid-column; padding: 2px 0; }
.form-error-message { color: #ffaaaa; font-size: 0.9em; display: none; margin-left: 5px; margin-top: 3px; width: 100%; }
/* === Photo Management Page Styles === */
.photo-management-page h1, .photo-management-page h2 { color: #E8E8E8; text-shadow: 1px 1px 3px rgba(0,0,0,0.6); text-align: center; margin-bottom: 20px; font-family: 'Cinzel', serif; }
.photo-management-page .instructions { text-align: center; color: #ccc; margin-bottom: 15px; }
.photo-management-page hr { border: 0; border-top: 1px solid #444; margin: 30px 0; }
/* Renamed .photo-gallery here to avoid conflict with profile page */
.photo-management-page .photo-grid { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }
.photo-management-page .photo-item { border: 2px solid #444; padding: 5px; background-color: rgba(0,0,0,0.2); border-radius: 4px; text-align: center; position: relative; width: 160px; }
.photo-item.is-main-photo { border-color: #aaffff; box-shadow: 0 0 10px rgba(170, 255, 255, 0.5); }
.photo-item img { display: block; max-width: 100%; height: auto; margin-bottom: 8px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px; }
.photo-item .photo-controls { display: flex; justify-content: space-around; gap: 5px; align-items: center; flex-wrap: wrap; padding-top: 5px; }
.photo-item .photo-controls .btn-sm { padding: 3px 6px; font-size: 0.8em; }
.main-photo-indicator { font-weight: bold; color: #aaffff; font-size: 0.9em; display: block; margin-bottom: 5px; }
#photo-upload-form label { display: block; margin-bottom: 8px; font-weight: bold; }
#photo-upload-form input[type="file"] { color: #ccc; background-color: rgba(255, 255, 255, 0.1); border: 1px solid #555; padding: 8px 10px; border-radius: 4px; width: 100%; box-sizing: border-box; margin-bottom: 5px; }
#photo-upload-form input[type="file"]::file-selector-button { padding: 5px 10px; border: 1px solid #555; border-radius: 3px; background-color: #555; color: #eee; cursor: pointer; transition: background-color 0.2s ease; }
#photo-upload-form input[type="file"]::file-selector-button:hover { background-color: #777; }
/* --- END OF PART 2 --- */
/* --- Responsive Overrides --- */
@media (max-width: 767px) {
body.page-main, body.page-info { background-attachment: scroll; }
#main-header { height: auto; min-height: 60px; flex-wrap: wrap; padding: 5px 1vw; }
#main-header #logo-container { margin-bottom: 5px; }
#main-nav { width: 100%; justify-content: center; }
#main-content { padding-top: 80px; /* Adjust based on dynamic header height? */ }
/* General page padding */
.profile-page,
/* Note: Profile view uses embedded styles for mobile layout */
/* .profile-view-page, */
.photo-management-page,
.messages-page,
.conversation-view-page,
.learn-container,
.auth-container,
.registration-container {
margin: 10px;
padding: 15px;
}
/* Profile Edit Specifics */
#profile-form fieldset { padding: 10px 15px; }
#profile-form .date-select-group, #profile-form .time-select-group { flex-wrap: wrap; gap: 8px; }
#profile-form .date-select-group select, #profile-form .time-select-group select { flex-basis: auto; flex-grow: 1; }
#profile-form .date-select-group select[name="birth_day"] { min-width: 60px; }
#profile-form .date-select-group select[name="birth_year"] { min-width: 80px; }
#profile-form .time-select-group select { min-width: 70px; }
#profile-form .checkbox-group { margin-right: 5px; }
#profile-form .select-group { margin-top: 10px; width: 100%; }
#profile-form .select-group label { min-width: 50px; }
#profile-form .select-group select { flex-grow: 1; }
.interests-checkbox-container { column-count: 2; max-height: 250px; }
/* Photo Management Specifics */
.photo-management-page .photo-grid { gap: 10px; }
.photo-management-page .photo-item { width: calc(50% - 15px); }
/* Conversation View Specifics */
.conversation-view-page .message-item { max-width: 95%; }
}
@media (max-width: 480px) {
.interests-checkbox-container { column-count: 1; max-height: 200px; }
.photo-management-page .photo-item { width: calc(100% - 10px); }
#main-nav a, #main-nav .dropdown-toggle, #main-nav .user-menu-toggle { padding: 6px 8px; font-size: 0.9em; } /* Slightly smaller nav items */
#main-header #logo { width: 100px; } /* Smaller logo */
#main-header .headline-text { font-size: 0.8em; }
}
/* ============================================= */
/* === Message Modal Styles === */
/* ============================================= */
#message-modal-overlay {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0, 0, 0, 0.15); /* Lighter overlay */
z-index: 2000; /* Sit on top */
justify-content: center; /* Use flex to center the content box */
align-items: center;
padding: 30px; /* Padding around content box */
box-sizing: border-box;
}
#message-modal-content {
background-color: rgba(30, 25, 50, 0.85); /* Dark purple/indigo base - translucent */
color: #eee;
margin: auto; /* Auto margins also help center */
padding: 25px 30px;
border: 1px solid rgba(170, 255, 255, 0.4); /* Translucent cyan border */
border-radius: 8px;
width: 90%; /* Adjust width as needed */
max-width: 550px; /* Max width for larger screens */
position: relative; /* For positioning the close button */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
animation: fadeInModal 0.3s ease-out; /* Optional fade-in */
}
#message-modal-close-btn {
color: #aaa;
position: absolute;
top: 10px;
right: 15px;
font-size: 28px;
font-weight: bold;
line-height: 1;
}
#message-modal-close-btn:hover,
#message-modal-close-btn:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
#message-modal-content h3 {
margin-top: 0;
margin-bottom: 20px;
color: #aaffff;
text-align: center;
font-family: 'Cinzel', serif;
}
#message-modal-content .form-group {
margin-bottom: 15px;
}
#message-modal-content label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #ccc;
}
#message-modal-content .form-actions {
text-align: right;
margin-top: 20px;
}
#message-modal-content .form-actions button {
margin-left: 10px;
}
@keyframes fadeInModal {
from {opacity: 0; transform: translateY(-20px);}
to {opacity: 1; transform: translateY(0);}
}
/* --- END OF PART 3 --- */
/* ============================================= */
/* === Messages Page / Inbox Styles === */
/* ============================================= */
/* .messages-page container style moved to general page containers */
.messages-page h1 { color: #aaffff; text-align: center; margin-bottom: 30px; font-family: 'Cinzel', serif; }
.view-archived-link { text-align: center; margin-bottom: 20px; }
.conversation-list { list-style: none; padding: 0; margin: 0; }
.conversation-item { background-color: rgba(30, 25, 50, 0.6); margin-bottom: 10px; border-radius: 6px; border: 1px solid rgba(170, 255, 255, 0.2); transition: background-color 0.2s ease; overflow: hidden; }
.conversation-item.unread { background-color: rgba(50, 45, 90, 0.8); border-left: 4px solid #aaffff; }
/* Styles for restructured inbox item wrapper */
.conversation-item .conversation-link-wrapper { display: flex; align-items: flex-start; /* Align items to top */ padding: 15px; gap: 15px; /* Space between avatar link and details link */ text-decoration: none; }
/* Style for the avatar's link */
.conversation-item .avatar-link { display: block; line-height: 0; flex-shrink: 0; }
/* Style for the link covering details and meta info */
.conversation-item .details-meta-link { display: flex; flex-grow: 1; justify-content: space-between; text-decoration: none; color: inherit; min-width: 0; /* Prevent flexbox overflow */ gap: 10px; }
.conversation-item .details-meta-link:hover .participant-name { text-decoration: underline; }
/* Ensure nested elements fit */
.conversation-item .details-meta-link .convo-details, .conversation-item .details-meta-link .convo-meta { margin: 0; padding: 0; }
.conversation-item .details-meta-link .convo-meta { align-items: flex-end; flex-shrink: 0; text-align: right; display: flex; flex-direction: column; }
.conversation-item:hover { background-color: rgba(50, 45, 90, 0.8); border-color: rgba(170, 255, 255, 0.4); }
/* Inbox Avatar Style */
.conversation-item .avatar {
width: 72px; /* << INCREASED SIZE */
height: 72px; /* << INCREASED SIZE */
border-radius: 4px; /* Square-ish */
object-fit: cover;
border: 1px solid rgba(170, 255, 255, 0.3);
flex-shrink: 0;
margin: 0; /* Ensure no extra margins */
}
.conversation-item .convo-details { flex-grow: 1; overflow: hidden; }
.conversation-item .participant-name { display: block; font-weight: bold; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-item.unread .participant-name { color: #fff; }
/* Style for message snippet */
.conversation-item .snippet { display: block; font-size: 0.9em; color: #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; line-height: 1.3; }
.conversation-item.unread .snippet { color: #eee; }
/* Style for the meta container (timestamp, icons) */
.conversation-item .timestamp { display: block; font-size: 0.8em; color: #aaa; white-space: nowrap; margin-bottom: 5px; }
.conversation-item .unread-indicator { color: #aaffff; font-size: 0.7em; opacity: 0; transition: opacity 0.3s ease; line-height: 1; height: 0.7em; }
.conversation-item.unread .unread-indicator { opacity: 1; }
/* Archive button style */
.conversation-item .convo-meta .btn-archive { color: #aaa; text-decoration: none; margin-top: 5px; font-size: 1.1em; /* Keep this size or adjust if needed */ padding: 2px 4px; display: inline-block; transition: color 0.2s ease; }
.conversation-item .convo-meta .btn-archive:hover { color: #ffaaaa; }
/* ============================================= */
/* === Specific Messaging Textarea Styles === */
/* ============================================= */
#reply-form textarea,
#message-modal-content textarea {
background-color: rgba(220, 220, 230, 0.1); /* Light translucent grey/blue */
border: 1px solid rgba(170, 255, 255, 0.3); /* Add subtle cyan border */
color: #eee;
}
#reply-form textarea:focus,
#message-modal-content textarea:focus {
border-color: #aaffff;
box-shadow: 0 0 5px rgba(170, 255, 255, 0.5);
background-color: rgba(220, 220, 230, 0.15);
}
/* ============================================= */
/* === Flash Message Styling === */
/* ============================================= */
#flash-alert {
position: fixed; /* Position relative to the viewport */
top: 95px; /* Position below the fixed header (adjust px value as needed) */
left: 50%; /* Start at center */
transform: translateX(-50%); /* Shift left by half its width to truly center */
width: 90%; /* Make it wide, but not full screen */
max-width: 700px; /* Limit max width on large screens */
z-index: 2010; /* Ensure it's above page content, maybe above modal overlay too */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Add shadow for visibility */
box-sizing: border-box;
}
/* Styles for Block/Unblock icons in conversation view */
.conversation-actions a.block-link {
color: #ff8888; /* Light red */
}
.conversation-actions a.block-link:hover {
color: #ff4444; /* Brighter red */
}
.conversation-actions a.unblock-link {
color: #88ff88; /* Light green */
}
.conversation-actions a.unblock-link:hover {
color: #44ff44; /* Brighter green */
}
.conversation-actions a.delete-conversation-link:hover {
color: #ff4444; /* Match block hover */
}
/* ============================================= */
/* === Nested Dropdown Styles === */
/* ============================================= */
/* Style the parent LI for the nested dropdown */
#main-nav .nested-dropdown {
position: relative; /* Required to position the nested menu absolutely relative to this item */
}
/* Style the nested menu itself */
#main-nav .nested-dropdown-menu {
display: none; /* Hide the nested menu by default */
position: absolute;
top: -6px; /* Align top edge slightly above parent item's top padding (adjust as needed) */
left: 100%; /* Position menu to the right of the parent LI */
margin-left: 1px; /* Optional small gap */
z-index: 1002; /* Ensure it appears above the main dropdown if needed */
/* Copy basic visual styles from the main dropdown menu */
background-color: #3a3a4a;
border: 1px solid #555;
border-radius: 4px;
list-style: none;
padding: 5px 0; /* Match main dropdown padding */
margin-top: 0; /* Remove any top margin inherited */
min-width: 180px; /* Match main dropdown or adjust */
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
/* Make the nested menu visible when hovering over the parent LI */
#main-nav .nested-dropdown:hover > .nested-dropdown-menu {
display: block;
}
/* Style the link that triggers the nested dropdown (optional adjustments) */
#main-nav .nested-dropdown > .nested-dropdown-toggle {
/* Ensure it behaves like a block link */
display: flex;
justify-content: space-between; /* Pushes caret to the right */
align-items: center;
width: 100%; /* Fill available space */
box-sizing: border-box; /* Include padding in width */
}
/* Ensure nested menu items look like main dropdown items */
/* (These styles might already be inherited correctly) */
#main-nav .nested-dropdown-menu li {
margin: 0;
}
#main-nav .nested-dropdown-menu a {
display: block;
padding: 10px 15px; /* Match main dropdown */
color: #eee;
white-space: nowrap;
font-size: 0.9em;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease; /* Inherited? Add if needed */
}
#main-nav .nested-dropdown-menu a i {
margin-right: 8px; /* Match main dropdown */
width: 12px; /* Match main dropdown */
text-align: center; /* Match main dropdown */
color: #ccc; /* Match main dropdown */
}
#main-nav .nested-dropdown-menu a:hover {
background-color: #5a5a6a; /* Match main dropdown */
color: #fff; /* Match main dropdown */
}
/* ============================================= */
/* === Search Page Styles === */
/* ============================================= */
/* Container for the whole search page content */
.search-page {
max-width: 750px; /* Or adjust as needed */
margin: 20px auto;
padding: 20px 30px; /* Add more padding */
background-color: rgba(10, 0, 20, 0.4); /* Opacity set to 0.4 */
border-radius: 8px;
border: 1px solid rgba(170, 255, 255, 0.2);
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
backdrop-filter: blur(4px); /* Adjust blur */
-webkit-backdrop-filter: blur(4px);
}
/* Style the main heading */
.search-page h1 {
color: #aaffff;
text-align: center;
margin-bottom: 30px;
font-family: 'Cinzel', serif;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
/* Style the form container itself if needed (optional) */
.search-form-container {
margin-bottom: 30px;
}
/* Apply profile edit fieldset/legend styles */
.search-page form fieldset {
border: 1px solid #444;
border-radius: 5px;
margin-bottom: 25px;
padding: 15px 20px;
}
.search-page form legend {
font-weight: bold;
color: #aaffff;
padding: 0 10px;
font-size: 1.3em; /* Increased size */
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
/* Apply general form group/label styles */
.search-page .form-group {
margin-bottom: 15px;
}
.search-page label:not(.checkbox-label) {
display: block;
margin-bottom: 5px;
color: #D8D8D8;
font-weight: bold;
font-size: 0.95em;
}
.search-page small {
font-size: 0.85em;
color: #aaa;
display: block;
margin-top: 3px;
}
/* Apply checkbox layout styles */
.search-page .checkbox-layout-group { display: flex; flex-wrap: wrap; gap: 10px 20px; padding-top: 5px; margin-bottom: 5px; }
.search-page .checkbox-group { display: inline-flex; align-items: center; margin-right: 10px; margin-bottom: 5px; }
.search-page .checkbox-group input[type="checkbox"] { margin-right: 5px; width: auto; flex-shrink: 0; }
.search-page .checkbox-group label.checkbox-label { display: inline; margin-bottom: 0; font-weight: normal; color: #ccc; cursor: pointer; }
/* Style Age Range inputs */
.search-page .range-inputs {
display: flex;
align-items: center;
gap: 10px; /* Space between elements */
}
.search-page .range-inputs input[type="number"] {
/* *** MODIFIED: Increased width *** */
width: 110px; /* Was 90px */
display: inline-block;
margin: 0; /* Reset margins */
text-align: center;
/* Ensure general input styles apply */
padding: 10px; border: 1px solid #555; border-radius: 4px; box-sizing: border-box; background-color: rgba(45, 45, 58, 0.7); color: #eee; font-size: 1em; font-family: 'Lato', sans-serif;
}
.search-page .range-inputs span {
color: #ccc; /* Style the 'to' text */
}
/* Ensure select dropdowns have the arrow */
.search-page select {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 1.2em;
padding-right: 30px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
/* Style Search/Reset buttons if needed */
.search-page .form-actions {
/* Existing .btn styles should apply */
}
/* Style results area (basic for now) */
.search-results-container { margin-top: 30px; padding-top: 20px; border-top: 1px solid #444; }
.search-results-container h2 { text-align: center; color: #ccc; font-family: 'Cinzel', serif; margin-bottom: 20px; }
/* Style alert messages within search page */
.search-page .alert { /* Use default alert styles or add overrides */ }
/* ============================================= */
/* === Search Results Styles === */
/* ============================================= */
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Responsive grid */
gap: 20px;
margin-top: 20px;
}
.result-item.card {
background-color: rgba(45, 45, 70, 0.5); /* Match conversation view slightly */
border: 1px solid #444;
border-radius: 6px;
overflow: hidden; /* Ensure image corners are rounded */
display: flex;
flex-direction: column;
}
.result-item .card-img-top {
width: 100%;
height: 180px; /* Fixed height for image area */
object-fit: cover; /* Crop image nicely */
border-bottom: 1px solid #444;
}
.result-item .card-body {
padding: 10px 15px;
flex-grow: 1; /* Allow body to take remaining space */
display: flex;
flex-direction: column;
}
.result-item .card-title {
margin-top: 0;
margin-bottom: 8px;
font-size: 1.1em;
font-weight: bold;
font-family: 'Lato', sans-serif;
}
.result-item .card-title a {
color: #eee;
text-decoration: none;
}
.result-item .card-title a:hover {
color: #aaffff;
text-decoration: underline;
}
.result-item .card-text {
font-size: 0.9em;
color: #ccc;
line-height: 1.4;
margin-bottom: 10px;
flex-grow: 1; /* Push button to bottom */
}
.result-item .card-text small {
font-size: 0.9em;
color: #aaa;
}
.result-item .card-body .btn {
margin-top: auto; /* Push button to bottom */
align-self: flex-start; /* Align button left */
}
.pagination-container {
/* Styles for pagination ul/li/a are already in style.css */
/* Add margin if needed */
margin-top: 30px;
margin-bottom: 10px;
}
/* ============================================= */
/* === Notifications Page Styles (Revised V4 - Single Row Layout) === */
/* ============================================= */
.notifications-page {
/* Standard page container background */
max-width: 800px;
margin: 30px auto;
padding: 20px 30px;
background-color: rgba(10, 0, 20, 0.4); /* 40% opacity */
border-radius: 8px;
border: 1px solid rgba(170, 255, 255, 0.2);
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.notifications-page h1 {
color: #aaffff;
text-align: center;
margin-bottom: 30px;
font-family: 'Cinzel', serif;
}
.notifications-list {
list-style: none;
padding: 0;
margin: 20px 0 0 0;
}
.notification-item {
/* Use bottom border for separation */
background-color: transparent;
border: none;
border-bottom: 1px solid rgba(170, 255, 255, 0.15);
margin-bottom: 0;
padding: 0; /* Padding applied to link */
}
.notification-item:last-child {
border-bottom: none;
}
/* Flex container for the single row */
a.notification-link {
display: flex;
align-items: center; /* Vertically align items */
gap: 12px; /* Adjust spacing */
padding: 12px 15px; /* Padding for the row */
text-decoration: none;
color: inherit;
transition: background-color 0.2s ease;
overflow: hidden; /* Hide overflow from container */
}
a.notification-link:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.notification-actor-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0; /* Don't shrink avatar */
border: 1px solid #555;
}
.notification-icon {
font-size: 1.3em;
color: #aaffff;
flex-shrink: 0; /* Don't shrink icon */
width: 25px;
text-align: center;
}
.notification-text { /* Contains actor link + text segment */
flex-grow: 1; /* Allow text to take available space */
flex-shrink: 1; /* Allow text to shrink if needed */
line-height: 1.4;
color: #eee;
/* Force single line and add ellipsis (...) if too long */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notification-text a { /* Actor name link */
color: #fff;
font-weight: bold;
}
.notification-text a:hover {
color: #aaffff;
}
.notification-time { /* Timestamp */
font-size: 0.85em;
color: #aaa;
flex-shrink: 0; /* Don't shrink time */
margin-left: auto; /* Push to the far right */
padding-left: 15px; /* Space before time */
white-space: nowrap; /* Prevent time itself from wrapping */
}
/* Read/unread styles (optional visual cues) */
.notification-item.is-read {}
.notification-item.was-unread {}
/* -------------------------------------------------------------------------- */
/* Search Results Page Styling */
/* -------------------------------------------------------------------------- */
/* Main content wrapper for the entire search results area */
.search-results-page .search-results-content-wrapper {
background-color: rgba(10, 0, 20, 0.65); /* Dark purple, 65% opacity */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 30px 35px; /* Increased padding */
border-radius: 15px; /* More rounded */
border: 1px solid rgba(170, 255, 255, 0.25);
max-width: 950px; /* Slightly wider */
margin: 30px auto; /* More top/bottom margin */
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4); /* Adjusted shadow */
}
.search-results-page h1 {
color: #aaffff;
text-align: center;
font-family: 'Cinzel', serif;
font-size: 2.4em; /* Slightly larger */
margin-bottom: 30px;
text-shadow: 1px 1px 4px rgba(0,0,0,0.6); /* Enhanced shadow */
}
/* Styling for summary messages */
.search-results-page .search-summary {
margin-bottom: 30px;
}
.search-results-page .search-summary p {
text-align: center;
font-size: 1.15em; /* Slightly larger summary text */
color: #e8e8e8;
margin-bottom: 10px;
}
.search-results-page .search-summary .alert {
margin: 30px auto;
max-width: 600px;
padding: 20px;
border-radius: 10px;
background-color: rgba(255, 193, 7, 0.2);
border: 1px solid rgba(255, 193, 7, 0.5);
color: #ffebb3; /* Lighter yellow text for better readability */
text-align: center;
font-size: 1.1em; /* Slightly larger alert text */
}
.search-results-page .search-summary .alert strong {
color: #ffc107;
}
/* Result cards grid */
.search-results-page .results-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 30px;
padding: 10px 0;
}
.search-results-page .result-item.card {
background-color: rgba(45, 30, 65, 0.70); /* Card background, distinct from wrapper */
border: 1px solid rgba(170, 255, 255, 0.3);
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
color: #f0f0f0;
overflow: hidden;
transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
display: flex;
flex-direction: column;
}
.search-results-page .result-item.card:hover {
transform: translateY(-6px) scale(1.03);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
.search-results-page .result-item.card .card-img-top {
width: 100%;
height: 230px;
object-fit: cover;
border-bottom: 1px solid rgba(170, 255, 255, 0.15);
}
.search-results-page .result-item.card .card-body {
padding: 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
text-align: center;
}
.search-results-page .result-item.card .card-title a {
font-family: 'Cinzel', serif;
font-size: 1.7em;
font-weight: 700;
color: #aaffff;
text-decoration: none;
transition: color 0.3s ease;
display: block;
margin-bottom: 12px;
}
.search-results-page .result-item.card .card-title a:hover {
color: #ffffff;
}
.search-results-page .result-item.card .card-text {
font-size: 1.0em;
color: #e0e0e0;
margin-bottom: 20px;
line-height: 1.6;
flex-grow: 1;
}
.search-results-page .result-item.card .card-text small {
display: block;
margin-bottom: 6px;
color: #d8d8d8;
}
.search-results-page .result-item.card .card-text small strong {
color: #87CEFA;
}
.search-results-page .result-item.card .card-buttons {
margin-top: auto;
padding-top: 10px;
}
.search-results-page .result-item.card .btn {
font-family: 'Cinzel', serif;
font-weight: bold;
padding: 10px 20px;
border-radius: 6px;
text-decoration: none;
transition: all 0.3s ease;
border: none;
margin: 5px;
display: inline-block;
width: auto;
min-width: 160px;
letter-spacing: 0.5px;
}
.search-results-page .result-item.card .btn-outline-secondary {
background-color: rgba(170, 255, 255, 0.2);
color: #f0f0f0;
border: 1px solid rgba(170, 255, 255, 0.5);
}
.search-results-page .result-item.card .btn-outline-secondary:hover {
background-color: rgba(170, 255, 255, 0.4);
color: #000000;
border-color: rgba(170, 255, 255, 0.8);
transform: translateY(-2px);
}
.search-results-page .result-item.card .btn-outline-info {
background-color: rgba(220, 150, 255, 0.2);
color: #f0f0f0;
border: 1px solid rgba(220, 150, 255, 0.5);
}
.search-results-page .result-item.card .btn-outline-info:hover {
background-color: rgba(220, 150, 255, 0.4);
color: #000000;
border-color: rgba(220, 150, 255, 0.8);
transform: translateY(-2px);
}
.search-results-page .return-link {
text-align: center;
margin-top: 35px;
margin-bottom: 25px;
}
.search-results-page .return-link a {
color: #aaffff;
text-decoration: none;
padding: 5px 0;
transition: color 0.2s ease;
margin: 0 10px;
}
.search-results-page .return-link a:hover {
color: #ffffff;
text-decoration: underline;
}
/* === Search Page Styles === */
/* ... (existing styles for .search-page, h1, fieldset, legend, etc.) ... */
/* NEW styles for the gender selection line */
.search-page .seeking-label-line { /* For the "Seeking..." label */
display: block;
font-weight: bold;
font-size: 1.0em; /* Matches profile_edit.php's instruction style */
color: #D8D8D8; /* Matches profile_edit.php label color */
margin-bottom: 8px;
}
.search-page .gender-selection-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 15px; /* Adjust as needed, can be 10px or 10px 20px like profile form */
/* border: 1px dashed lime; */ /* For debugging */
}
.search-page .gender-selection-line > .checkbox-group-inline,
.search-page .gender-selection-line > .select-group-inline {
display: inline-flex;
align-items: center;
}
.search-page .gender-selection-line .checkbox-group-inline input[type="checkbox"] {
margin-right: 4px;
accent-color: #aaffff; /* As used elsewhere */
flex-shrink: 0;
/* Inherits width: auto from #profile-form version, which is fine */
}
/* .search-page .checkbox-group label.checkbox-label is already defined and should work */
/* If not, uncomment and ensure:
.search-page .gender-selection-line .checkbox-group-inline label.checkbox-label {
display: inline;
margin-bottom: 0;
font-weight: normal;
color: #ccc;
cursor: pointer;
white-space: nowrap;
}
*/
.search-page .gender-selection-line .and-or-text {
font-weight: normal;
color: #ccc;
white-space: nowrap;
}
.search-page .gender-selection-line .select-group-inline .form-control-select-custom {
/* General select styles from your main stylesheet */
padding: 10px;
border: 1px solid #555;
border-radius: 4px;
box-sizing: border-box;
background-color: rgba(45, 45, 58, 0.7);
color: #eee;
font-size: 1em;
font-family: 'Lato', sans-serif;
/* Custom arrow from #profile-form select */
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 1.2em;
padding-right: 30px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* Sizing */
min-width: 180px; /* For "Additional Gender Identity:" text */
width: auto; /* Crucial for fitting on one line */
height: auto;
}
.search-page .gender-selection-line .select-group-inline .form-control-select-custom:focus {
outline: none;
border-color: #aaffff;
box-shadow: 0 0 5px rgba(170, 255, 255, 0.5);
}
/* ... (existing styles for .range-inputs, .search-results-container, etc.) ... */