/* Dark Mode Styles */

/* Override bg-info class to use black background */
.bg-info {
	background-color: #000000 !important;
}

.border-info {
	border-color: #000000 !important;
}

/* Force card headers to black */
.card-header {
	background-color: #000000 !important;
	border-bottom-color: #333333 !important;
}

.alert {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid transparent;
	border-radius: 4px;
}
.alert h4 {
	margin-top: 0;
	color: inherit;
}
.alert .alert-link {
	font-weight: bold;
}
.alert > p,
.alert > ul {
	margin-bottom: 0;
}
.alert > p + p {
	margin-top: 5px;
}
.alert-dismissable,
.alert-dismissible {
	padding-right: 35px;
}
.alert-dismissable .close,
.alert-dismissible .close {
	position: relative;
	top: -2px;
	right: -21px;
	color: inherit;
}
.alert-success {
	color: #FFFFFF!important;
	background: #3c763d!important;
	background-color: #3c763d!important;
	border-color: #3c763d!important;
}
.alert-success hr {
	border-top-color: #3c763d!important;
}
.alert-success .alert-link {
	color: #ffee00!important;
}
.alert-info {
	color: #FFFFFF!important;
	background: #1b4c64!important;
	background-color: #1b4c64!important;
	border-color: #1b4c64!important;
}
.alert-info hr {
	border-top-color: #1b4c64!important;
}
.alert-info .alert-link {
	color: #FFFFFF!important;
	background: #1b4c64!important;
	background-color: #1b4c64!important;
	border-color: #1b4c64!important;
}
.alert-warning {
	color: #030200!important;
	background: #ffee00!important;
	background-color: #ffee00!important;
	border-color: #ffee00!important;
}
.alert-warning hr {
	border-top-color: #ffee00!important;
}
.alert-warning .alert-link {
	color: #030200!important;
	background: #ffee00!important;
	background-color: #ffee00!important;
	border-color: #ffee00!important;
}
.alert-danger {
	color: #FFFFFF!important;
	background: #6a0707!important;
	background-color: #6a0707!important;
	border-color: #7e1e2e!important;
}
.alert-danger hr {
	border-top-color: #843534!important;
}
.alert-danger .alert-link {
	color: #FFFFFF!important;
	background: #6a0707!important;
	background-color: #6a0707!important;
	border-color: #7e1e2e!important;
}
/* Set background color to black for the body */
body {
    background-color: #121212; /* Dark black background */
    color: #e0e0e0; /* Light gray text for readability */
}

/* Override Bootstrap's default color variables for dark mode */
:root {
    --bs-primary: #0b79c3; /* Purple for primary buttons and accents */
    --bs-secondary: #223765; /* Teal for secondary buttons and accents */
    --bs-success: #299657; /* Green for success messages */
    --bs-info: #acce3b; /* Blue for info messages */
    --bs-warning: #ff9800; /* Orange for warnings */
    --bs-danger: #cf6679; /* Red for danger alerts */
    --bs-light: #2c2c2c; /* Dark gray for light backgrounds */
    --bs-dark: #121212; /* Black for dark backgrounds */
}

/* Update background and text colors for cards */
.card {
    background-color: #1e1e1e; /* Darker gray for cards */
    color: #e0e0e0; /* Light text */
}

.panel-default,
.panel-warning,
.panel-success,
.panel-info,
.panel-danger,
.panel-default > .panel-heading,
.panel-warning > .panel-heading,
.panel-success > .panel-heading,
.panel-info > .panel-heading,
.panel-danger > .panel-heading {
	color: #000000 !important;
}

.panel-heading .text-muted,
.panel-heading small,
.panel-heading small.text-muted {
	color: #333333 !important;
}

.panel-body,
.panel-body label,
.panel-body strong,
.panel-body div,
.panel-body span,
.panel-body p,
.panel-body li {
	color: #000000 !important;
}

.panel-body .text-muted,
.panel-body small.text-muted,
.panel-body small {
	color: #333333 !important;
}

/* Keep text readable on dark info backgrounds inside panels. */
.panel-body .alert-info,
.panel-body .alert-info *,
.panel-body .bg-info,
.panel-body .bg-info * {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

.panel-body div.alert-info,
.panel-body div.bg-info {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

/* Keep text readable on dark info backgrounds everywhere. */
.alert-info,
.alert-info *,
.bg-info,
.bg-info * {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

.panel-body .private-board-empty-state,
.panel-body .private-board-empty-state * {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	background: #1b4c64 !important;
	background-color: #1b4c64 !important;
	border-color: #1b4c64 !important;
}

.panel-body a:not(.btn),
.panel-body a:not(.btn):visited {
	color: #000000 !important;
	text-decoration: underline;
}

.panel-body a:not(.btn):hover,
.panel-body a:not(.btn):focus {
	color: #222222 !important;
}

.public-town-messages-page .label,
.public-town-messages-page .label.label-primary {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

#dashboard-feed .feed-post-card .panel-body,
#dashboard-feed .feed-post-card .panel-body strong,
#dashboard-feed .feed-post-card .panel-body span,
#dashboard-feed .feed-post-card .panel-body div,
#dashboard-feed .feed-post-card .panel-body p,
.feed-surface .feed-post-card .panel-body,
.feed-surface .feed-post-card .panel-body strong,
.feed-surface .feed-post-card .panel-body span,
.feed-surface .feed-post-card .panel-body div,
.feed-surface .feed-post-card .panel-body p {
	color: #111111 !important;
}

#dashboard-feed .feed-post-meta,
#dashboard-feed .feed-post-meta.text-muted,
.feed-surface .feed-post-meta,
.feed-surface .feed-post-meta.text-muted {
	color: #444444 !important;
}

#dashboard-feed .feed-post-content,
.feed-surface .feed-post-content {
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
}

#dashboard-feed .feed-post-title,
#dashboard-feed .feed-post-card .panel-body .feed-post-title,
#dashboard-feed .feed-post-card .panel-body .feed-post-content,
#dashboard-feed .feed-post-card .panel-body .feed-post-content *,
.feed-surface .feed-post-title,
.feed-surface .feed-post-card .panel-body .feed-post-title,
.feed-surface .feed-post-card .panel-body .feed-post-content,
.feed-surface .feed-post-card .panel-body .feed-post-content * {
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
	opacity: 1 !important;
}

#dashboard-feed .feed-post-card .panel-body .btn,
#dashboard-feed .feed-post-card .panel-body .btn *,
.feed-surface .feed-post-card .panel-body .btn,
.feed-surface .feed-post-card .panel-body .btn * {
	-webkit-text-fill-color: inherit !important;
	opacity: 1 !important;
}

#dashboard-feed .feed-post-content a,
#dashboard-feed .feed-post-content a:visited,
#dashboard-feed .feed-post-content a.externallink,
#dashboard-feed .feed-post-content a.externallink:visited,
.feed-surface .feed-post-content a,
.feed-surface .feed-post-content a:visited,
.feed-surface .feed-post-content a.externallink,
.feed-surface .feed-post-content a.externallink:visited {
	color: #000000 !important;
	text-decoration: underline;
}

#dashboard-feed .feed-post-content a:hover,
#dashboard-feed .feed-post-content a.externallink:hover,
.feed-surface .feed-post-content a:hover,
.feed-surface .feed-post-content a.externallink:hover {
	color: #222222 !important;
}

#dashboard-feed .feed-post-card .panel-body .feed-empty-state,
#dashboard-feed .feed-post-card .panel-body .feed-empty-state *,
#dashboard-feed .feed-post-card .panel-body .feed-empty-state strong,
#dashboard-feed .feed-post-card .panel-body .feed-empty-state span,
#dashboard-feed .feed-post-card .panel-body .feed-empty-state div,
#dashboard-feed .feed-post-card .panel-body .feed-empty-state p,
.feed-surface .feed-post-card .panel-body .feed-empty-state,
.feed-surface .feed-post-card .panel-body .feed-empty-state *,
.feed-surface .feed-post-card .panel-body .feed-empty-state strong,
.feed-surface .feed-post-card .panel-body .feed-empty-state span,
.feed-surface .feed-post-card .panel-body .feed-empty-state div,
.feed-surface .feed-post-card .panel-body .feed-empty-state p {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	text-align: center;
}


/* Adjust link colors */
a,:visited {
    color: #fae103; /* Purple for links */
}

a:hover {
    color: #ffffff; /* Teal on hover */
}

/* Adjust form elements */
.form-control {
    background-color: #ffffff; /* Dark input background */
    color: #000000; /* Light text */
    border-color: #0b79c3; /* Dark border */
}

.form-control:focus {
    background-color: #ffffff; /* Slightly lighter on focus */
    border-color: #0b79c3; /* Purple border on focus */
    box-shadow: 0 0 0 0.2rem rgba(187, 134, 252, 0.25); /* Purple glow */
}
.form-300 {
	max-width:300px;
	
}
.form-100 {
	max-width:100px;
}
.form-50 {
	max-width:50px;
}
#search .input-group {
    max-width: 300px;
    width: 100%;
}
.displayinline {
	display:inline-block;
}

/* Adjust dropdowns */
.dropdown-menu {
    background-color: #1e1e1e; /* Dark dropdown background */
    color: #e0e0e0; /* Light text */
}

.dropdown-item {
    color: #e0e0e0; /* Light text */
}

.dropdown-item:hover {
    background-color: #333; /* Slightly lighter on hover */
}

/* Adjust alerts */
.alert {
    color: #e0e0e0; /* Light text for alerts */
}

.alert-primary {
    background-color: #1e1e1e; /* Dark background for primary alerts */
}

.alert-secondary {
    background-color: #1e1e1e; /* Dark background for secondary alerts */
}
.maindiv {
    padding-top: 100px; /* Adjust to your header height */
}

/* Page shell layout: keep card background enclosing all content. */
.page-shell-body {
	padding: 20px;
}

.page-shell-row,
.page-shell-inner-row {
	margin-left: 0;
	margin-right: 0;
}

.page-shell-content {
	padding-left: 0;
	padding-right: 0;
}
/* Dark Mode Button Styles */

/* Primary buttons (including submit) */
.btn-primary, .btn-default, button[type="submit"] {
    background-color: #0b79c3 !important; 
    background-image: none !important;
    border-color: #0b79c3 !important; 
    color: #fae103 !important;
    text-shadow: none !important;
}

.btn-primary:hover, .btn-default:hover, button[type="submit"]:hover,
.btn-primary:focus, .btn-default:focus, button[type="submit"]:focus,
.btn-primary:active, .btn-default:active, button[type="submit"]:active,
.btn-primary.active, .btn-default.active {
    background-color: #0960a0 !important; 
    background-image: none !important;
    border-color: #0960a0 !important;
    color: #fae103 !important;
    text-shadow: none !important;
}

/* Secondary buttons */
.btn-secondary {
    background-color: #0b79c3; 
    border-color: #0b79c3;
    color: #fae103;
}

.btn-secondary:hover {
    background-color: #0b79c3;
    border-color: #0b79c3;
    color: #fae103; 
}
/* Dark Mode Navigation Link Styles */

/* Default navbar links */
.navbar-nav .nav-link {
    color: #fae103; /* Light gray text for visibility in dark mode */
    transition: color 0.3s ease; /* Smooth color transition */
}
/* Visited state for navbar links */
.navbar-nav .nav-link:visited {
    color: #fae103; /* Slightly dimmer gray to indicate visited */
}

/* Hover and focus states for navbar links */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: #0b79c3; /* Purple for hover/focus */
}

/* Active state for navbar links */
.navbar-nav .nav-link.active,
.navbar-nav .nav-item.active .nav-link {
    color: #fae103; /* Teal for active link */
    font-weight: bold; /* Optional: emphasize active link */
}

/* Disabled state for navbar links */
.navbar-nav .nav-link.disabled {
    color: #000000; /* Dim gray for disabled links */
    opacity: 0.5; /* Reduced opacity for clarity */
}

/* Navbar brand (e.g., logo or site name link) */
.navbar-brand {
    color: #fae103; /* Light gray */
}

.navbar-brand:hover,
.navbar-brand:focus {
    color: #fae103; /* Purple on hover/focus */
}
.yellowtopheader {
	color: #fae103!important; /* Teal for active link */
	font-weight: bold!important; /* Optional: emphasize active link */
	font-size: 20px!important;
}
.yellowheader {
	color: #fae103!important; /* Teal for active link */
	font-weight: bold!important; /* Optional: emphasize active link */
	font-size: 14px!important;
}
/* Adjust the navbar background color */
.navbar {
	background-color: #222; /* Restored dark grey/black original tone */
	border-bottom: 1px solid #000000; /* Keep existing border */
}

/* Force hamburger menu to always show */
.navbar-toggle {
	display: block !important;
}

/* Always collapse the menu on all screen sizes */
.navbar-collapse.collapse {
	display: none !important;
}

.navbar-collapse.collapse.in {
	display: block !important;
}

/* Add scrolling to the expanded navbar on desktop */
nav.kalmyk-vertical-nav .navbar-collapse.collapse.in {
    max-height: 50vh; /* Reduced from 80vh to ensure scrolling triggers sooner on desktop */
    overflow-y: auto; /* Enable vertical scrolling when content exceeds height */
    overflow-x: hidden; /* Prevent horizontal scroll if needed */
}

/* Ensure the inner nav list scrolls if the container does */
nav.kalmyk-vertical-nav .navbar-collapse.collapse.in .nav {
    max-height: inherit; /* Inherit the max-height for proper scrolling */
    overflow-y: auto; /* Allow the list itself to scroll if necessary */
}

/* Add scrolling to the expanded navbar on desktop */
nav.kalmyk-vertical-nav .navbar-collapse.collapse.in {
    max-height: 50vh; /* Reduced from 80vh to ensure scrolling triggers sooner on desktop */
    overflow-y: auto; /* Enable vertical scrolling when content exceeds height */
    overflow-x: hidden; /* Prevent horizontal scroll if needed */
}

/* Ensure the inner nav list scrolls if the container does */
nav.kalmyk-vertical-nav .navbar-collapse.collapse.in .nav {
    max-height: inherit; /* Inherit the max-height for proper scrolling */
    overflow-y: auto; /* Allow the list itself to scroll if necessary */
}

/* Add scrolling to the expanded navbar on desktop */
nav.kalmyk-vertical-nav .navbar-collapse.collapse.in {
    max-height: 50vh; /* Reduced from 80vh to ensure scrolling triggers sooner on desktop */
    overflow-y: auto; /* Enable vertical scrolling when content exceeds height */
    overflow-x: hidden; /* Prevent horizontal scroll if needed */
}

/* Ensure the inner nav list scrolls if the container does */
nav.kalmyk-vertical-nav .navbar-collapse.collapse.in .nav {
    max-height: inherit; /* Inherit the max-height for proper scrolling */
    overflow-y: auto; /* Allow the list itself to scroll if necessary */
}

/* Namespaced vertical navbar for /k site only */
nav.kalmyk-vertical-nav .navbar-toggle { display:block !important; }
nav.kalmyk-vertical-nav .navbar-header { display:flex !important; align-items:center !important; width:100% !important; }
nav.kalmyk-vertical-nav .navbar-header .navbar-brand { margin-right:auto !important; }
nav.kalmyk-vertical-nav .navbar-header .navbar-toggle { margin-left:auto !important; }
nav.kalmyk-vertical-nav .navbar-collapse.collapse { display:none !important; }
nav.kalmyk-vertical-nav .navbar-collapse.collapse.in { 
    display:block !important; 
    position:absolute; 
    top:100%; 
    left:0; 
    right:0; 
    background:#222; 
    z-index:1000; 
    max-height: 50vh; /* Limit height to trigger scrolling */
    overflow-y: scroll; /* Always show vertical scrollbar for scrolling */
    overflow-x: hidden; /* Prevent horizontal scroll */
}
/* Full-width dropdown: override container width constraints when open */
nav.kalmyk-vertical-nav .container { width:100% !important; max-width:100% !important; padding-left:0 !important; padding-right:0 !important; }
nav.kalmyk-vertical-nav .navbar-collapse.collapse.in { width:100% !important; min-width:100% !important; }
/* Ensure background covers entire menu block including padding area */
nav.kalmyk-vertical-nav .navbar-collapse.collapse.in > ul.nav { background:#222 !important; margin:0 !important; padding:0 !important; }
nav.kalmyk-vertical-nav .navbar-collapse.collapse.in > ul.nav > li { background:#222 !important; }
nav.kalmyk-vertical-nav .navbar-collapse.in .navbar-nav { float:none !important; width:100% !important; margin:0 !important; }
nav.kalmyk-vertical-nav .navbar-collapse.in .navbar-nav > li { float:none !important; display:block !important; width:100% !important; }
nav.kalmyk-vertical-nav .navbar-collapse.in .navbar-nav > li > a { display:block !important; width:100% !important; padding:12px 18px !important; text-align:left !important; }
/* Visual styling for vertical menu items (restore mobile look) */
nav.kalmyk-vertical-nav .navbar-collapse.in .navbar-nav > li > a {
	background: #222; /* restored dark panel color */
	color: #fae103 !important; /* original link yellow */
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
nav.kalmyk-vertical-nav .navbar-collapse.in .navbar-nav > li:last-child > a { border-bottom: none; }
nav.kalmyk-vertical-nav .navbar-collapse.in .navbar-nav > li > a:hover,
nav.kalmyk-vertical-nav .navbar-collapse.in .navbar-nav > li > a:focus {
	background: #333; /* slightly lighter dark for hover */
	color: #ffffff !important; /* white on hover */
}
nav.kalmyk-vertical-nav .navbar-collapse.in .navbar-nav > li.active > a,
nav.kalmyk-vertical-nav .navbar-collapse.in .navbar-nav > li.active > a:hover,
nav.kalmyk-vertical-nav .navbar-collapse.in .navbar-nav > li.active > a:focus {
	background: #222; /* keep dark background */
	color: #fae103 !important;
	font-weight: 700 !important;
	border-left: 4px solid #fae103;
	padding-left: 14px !important;
}
.font-8 {
	font-size: 8px!important;
}
.font-9 {
	font-size: 9px!important;
}
.font-10 {
	font-size: 10px!important;
}
.font-11 {
	font-size: 11px!important;
}
.font-12 {
	font-size: 12px!important;
}
.font-13 {
	font-size: 13px!important;
}
.font-size-14 {
	font-size: 14px!important;
}

h1 {
	font-size: 18x!important;
	color: #0b79c3!important;
}
h2 {
	font-size: 16x!important;
	color: #fae103!important;
}
.recipe-detail-title {
	color: #0b79c3 !important;
	-webkit-text-fill-color: #0b79c3 !important;
	text-shadow: 0 0 6px rgba(11, 121, 195, 0.55) !important;
}

.panel-body h2.recipe-detail-title,
.panel.panel-default .panel-body h2.recipe-detail-title {
	color: #0b79c3 !important;
	-webkit-text-fill-color: #0b79c3 !important;
	text-shadow: 0 0 6px rgba(11, 121, 195, 0.55) !important;
}
.yellowtext {
	color: #fae103!important;
}
.whitetext {
	color: #ffffff!important;
}

.phrase-search-results {
	margin-top: 14px;
}

.phrase-search-result {
	margin-bottom: 16px;
	padding: 14px 16px;
	border: 0px solid #1b4c64;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.03);
}

.phrase-search-result h2,
.phrase-search-result h3 {
	margin-top: 0;
}

.phrase-search-result p:last-child {
	margin-bottom: 0;
}

.phrases-page hr {
	display: none !important;
	border: 0 !important;
	height: 0 !important;
	margin: 0 !important;
}

.phrases-page .phrase-display,
.phrases-page .phrase-display p,
.phrases-page .phrase-display h2,
.phrases-page .phrase-display h3,
.phrases-page .phrase-search-result,
.phrases-page .phrase-search-result p,
.phrases-page .phrase-search-result h2,
.phrases-page .phrase-search-result h3 {
	border-top: 0 !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}
.blacktext {
	color: #000000!important;
}
.sourcetext {
	font-size: 12px!important;
	color: #fae103!important;
	font-style: italic!important;
	text-align:left !important;
}
.card-header,
.card-header.bg-light,
.card-header.bg-white,
.card-header.bg-transparent {
	background-color: #000000 !important;
	color: #fae103 !important;
	border-bottom-color: #333333 !important;
}
.text-dark {
	color: #000000 !important;
}
.pad-2 {
	padding: 2px !important;
}
.pad-top-2 {
	padding-top: 2px !important;
}
.pad-4 {
	padding: 4px !important;
}
.pad-top-4 {
	padding-top: 4px !important;
}
.pad-top-5 {
	padding-top: 5px !important;
}

.footer-social-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
}

.footer-social-links {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex: 0 0 auto;
}

.footer-copyright {
	flex: 1 1 auto;
	text-align: center;
	line-height: 1.2;
}

@media (max-width: 767px) {
	.footer-social-wrap {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.footer-social-links {
		justify-content: center;
	}

	.footer-copyright {
		padding-top: 5px !important;
		line-height: normal;
	}
}

.album-image-modal .modal-content,
.album-image-modal .modal-header,
.album-image-modal .modal-body {
	background-color: #ffffff !important;
}

.album-image-modal .modal-title,
.album-image-modal #fullImageCaption,
.album-image-modal #fullImagePostedBy,
.album-image-modal #fullImagePostedBy.text-muted {
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
}

/* ── Dashboard profile card ── */
.dm-card-scene { perspective: 600px; -webkit-perspective: 600px; width: 160px; }
.dm-card {
	width: 160px; height: 160px;
	position: relative;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transition: transform .45s;
	cursor: pointer;
}
.dm-card.is-flipped { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }
.dm-card-face {
	position: absolute; width: 100%; height: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border: 1px solid #ddd; border-radius: 6px;
	overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.dm-card-back {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	font-size: 12px;
	flex-direction: column;
	gap: 6px;
	justify-content: center;
	background: #ffffff;
	color: #000000;
}
.dm-card-photo {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	display: flex; align-items: center; justify-content: center;
	background-size: cover; background-position: center; background-repeat: no-repeat;
}
.dm-card-label {
	font-size: 11px; margin-top: 4px;
	max-width: 160px; overflow: hidden;
	text-overflow: ellipsis; white-space: nowrap;
	text-align: center;
}
.dm-card-hint { font-size: 10px; color: #999; margin-top: 2px; text-align: center; }

/* Shared card-back text styles used by dashboard preview and Hide & Seek cards. */
.hs-card-back-text {
	font-size: 11px;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
	word-break: break-word;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	width: 100%;
	max-height: none;
	overflow: visible;
	padding-right: 2px;
}

.dm-card-back .hs-card-back-text,
.dm-card-back .hs-card-back-text * {
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
}

.hs-card-back-empty {
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
}

/* ── DM unread badge (left menu Messages button) ── */
.dm-unread-badge {
	display: none;
	position: absolute;
	top: 2px;
	right: 4px;
	background: #d9534f;
	color: #fff;
	border-radius: 10px;
	font-size: 10px;
	padding: 1px 5px;
	line-height: 1.4;
}

/* User profile page */
.userprofile-back-btn {
	margin-bottom: 12px;
}

.userprofile-card-wrap {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.userprofile-card-click {
	cursor: pointer;
}

.userprofile-initials {
	font-size: 22px;
	font-weight: 700;
	color: #fff;
}

.userprofile-name-strong {
	font-size: 13px;
	color: #000000;
	text-align: center;
}

.userprofile-bio {
	font-size: 12px;
	color: #000000;
	word-break: break-word;
	text-align: center;
	max-height: none;
	overflow: visible;
}

.userprofile-bio-empty {
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
}

.userprofile-message-btn-wrap {
	margin-top: 6px;
	text-align: center;
}

.userprofile-dm-panel {
	margin-bottom: 20px;
}

.userprofile-dm-heading {
	cursor: pointer;
}

.userprofile-dm-toggle {
	float: right;
}

.userprofile-dm-body {
	display: block;
}

.userprofile-dm-panel-body {
	padding: 10px 14px;
}

.userprofile-dm-alert {
	margin-bottom: 10px;
}

.userprofile-dm-thread {
	max-height: 300px;
	overflow-y: auto;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 8px;
	margin-bottom: 10px;
	background: #fafafa;
}

.userprofile-dm-loading,
.userprofile-dm-thread-status {
	margin: 0;
}

.userprofile-dm-compose {
	display: flex;
	gap: 6px;
}

.userprofile-dm-input {
	resize: vertical;
}

.userprofile-dm-help {
	margin-top: 8px;
	margin-bottom: 0;
	font-size: 12px;
}

.userprofile-dm-error {
	margin-top: 6px;
	display: none;
	font-size: 12px;
}

.userprofile-login-note {
	margin-bottom: 0;
}

.userprofile-posts-title {
	margin-bottom: 12px;
}

.userprofile-feed-card {
	margin-bottom: 10px;
}

.userprofile-feed-body {
	padding: 10px 14px;
}

.userprofile-feed-meta {
	margin-bottom: 4px;
}

.userprofile-featured-badge {
	background: #5cb85c;
	color: #fff;
	font-size: 0.72em;
	padding: 1px 5px;
	border-radius: 3px;
}

.userprofile-post-title {
	display: block;
	margin-bottom: 4px;
	color: #212529;
}

.userprofile-post-content {
	white-space: pre-wrap;
	word-break: break-word;
	margin-bottom: 8px;
	color: #212529;
}

.userprofile-external-link {
	color: #337ab7 !important;
	-webkit-text-fill-color: #337ab7 !important;
	text-decoration: underline;
}

/* Let profile card back grow for longer bios. */
.userprofile-card-wrap .dm-card {
	min-height: 160px;
	height: 160px;
}

.userprofile-card-wrap .dm-card.is-flipped {
	transform: none;
	-webkit-transform: none;
	height: auto;
}

.userprofile-card-wrap .dm-card.is-flipped .dm-card-face {
	position: relative;
	min-height: 160px;
	height: auto;
}

.userprofile-card-wrap .dm-card.is-flipped .dm-card-face:not(.dm-card-back) {
	display: none;
}

.userprofile-card-wrap .dm-card.is-flipped .dm-card-back {
	transform: none;
	-webkit-transform: none;
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
}

.userprofile-card-wrap .dm-card-back,
.userprofile-card-wrap .dm-card-back * {
	background-color: #ffffff !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
}

/* Profile DM panel: keep encrypted notice text white on dark info background. */
#dm-panel #dm-body .panel-body .alert.alert-info,
#dm-panel #dm-body .panel-body .alert.alert-info * {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

/* Video page: support portrait phone videos without stretching. */
.video-temp-page .video-player-wrap {
	width: 100%;
	max-height: 72vh;
	background: #000000;
	border-radius: 8px;
	overflow: hidden;
	text-align: center;
}

.video-temp-page .video-player {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	width: auto;
	height: 72vh;
	max-height: 72vh;
	background: #000000;
	object-fit: contain;
}

.video-temp-page .video-controls-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

/* Reusable wrapper for portrait videos embedded in post content. */
.post-video-frame {
	max-width: 420px;
	margin: 12px auto;
	background: #000000;
	border-radius: 8px;
	overflow: hidden;
}

@media (max-width: 768px) {
	.video-temp-page .video-player-wrap {
		max-height: 68vh;
	}

	.video-temp-page .video-player {
		height: 68vh;
		max-height: 68vh;
	}
}

/* Album detail title highlight card. */
.album-title-card {
	background: #0b79c3;
	border: 1px solid #0b79c3;
	border-radius: 4px;
	padding: 12px 14px;
	margin-bottom: 12px;
}

.album-title-card-heading {
	margin: 0;
	color: #fae103 !important;
	-webkit-text-fill-color: #fae103 !important;
	font-weight: 700;
}

.album-title-card-subtext {
	margin: 6px 0 0 0;
	color: #fae103 !important;
	-webkit-text-fill-color: #fae103 !important;
	opacity: 0.95;
}

.album-list-title-card {
	background: #0b79c3;
	border: 1px solid #0b79c3;
	border-radius: 4px;
	padding: 10px 12px;
	margin-bottom: 10px;
}

.album-list-title-heading {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
}

.album-list-title-heading,
.album-list-title-heading a,
.album-list-title-heading a:visited,
.album-list-title-heading a:hover,
.album-list-title-heading a:focus {
	color: #fae103 !important;
	-webkit-text-fill-color: #fae103 !important;
	text-decoration: none;
}