@import url("/includes/css/responsive-tables.css");
@import url("/includes/css/theme-fa7-pro-override.css");

#mainNav .dropdown-item.nav-major-active,
#mainNav .dropdown-item.nav-major-active > i,
#mainNav .dropdown-item.nav-major-active > span:not(.badge),
#header .header-nav-main nav > ul > li > a.nav-major-active,
#header .header-nav-main nav > ul > li > a.nav-major-active > i,
#header .header-nav-main nav > ul > li > a.nav-major-active > span:not(.badge) {
	color: var(--primary) !important;
}

/* =========================
   Desktop side-header (lg+)
   ========================= */
@media (min-width: 992px) {
  html.side-header #header.side-header .header-row-side-header { min-height: 0; }

  /* Only the menu row grows; logo/footer rows don't */
  html.side-header #header.side-header .header-column > .header-row { flex-grow: 0 !important; }
  html.side-header #header.side-header .header-column > .header-row.header-row-side-header {
	flex-grow: 1 !important;
	min-height: 0 !important;
  }

  /* Nav is the scroll container (Y scroll, no X scroll) */
  html.side-header #header.side-header .header-nav-main nav {
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
  }

  /* Porto vertical-slide centers; force top-aligned to avoid top crop */
  html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide { justify-content: flex-start !important; }
  html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav > ul {
	height: auto !important;
	justify-content: flex-start !important;
  }
  html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li.dropdown .dropdown-menu {
	top: 0 !important;
	transform: none !important;
	justify-content: flex-start !important;
  }

  /* Logo spacing in sidebar */
  html.side-header #header.side-header .header-logo { margin: 0.75rem 0 !important; }

  /* Scroll fade overlay host */
  html.side-header #header.side-header .jh-scrollfade-wrap { position: relative; }
  html.side-header #header.side-header .jh-scrollfade-wrap::before,
  html.side-header #header.side-header .jh-scrollfade-wrap::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	height: 50px;
	pointer-events: none;
	z-index: 20;
	opacity: 0;
	transition: opacity 180ms ease;
  }
  html.side-header #header.side-header .jh-scrollfade-wrap::before {
	top: 0;
	background: linear-gradient(to bottom, var(--light), rgba(255,255,255,0));
  }
  html.side-header #header.side-header .jh-scrollfade-wrap::after {
	bottom: 0;
	background: linear-gradient(to top, var(--light), rgba(255,255,255,0));
  }
  html.side-header.dark #header.side-header .jh-scrollfade-wrap::before {
	background: linear-gradient(to bottom, var(--dark), rgba(0,0,0,0));
  }
  html.side-header.dark #header.side-header .jh-scrollfade-wrap::after {
	background: linear-gradient(to top, var(--dark), rgba(0,0,0,0));
  }
  html.side-header #header.side-header .jh-scrollfade-wrap.jh-scroll-top::before { opacity: 1; }
  html.side-header #header.side-header .jh-scrollfade-wrap.jh-scroll-bottom::after { opacity: 1; }
}

/* Hide footer row on very short desktop viewports */
@media (min-width: 992px) and (max-height: 480px) {
  html.side-header #header.side-header .header-row.justify-content-end.mt-lg-auto {
	display: none !important;
  }
}

/* =========================
   Mobile / top header (<lg)
   ========================= */
@media (max-width: 991px) {
  html.side-header #header.side-header {
    position: relative;
    height: auto !important;
    max-height: none !important;
    max-width: none;
    overflow: visible !important;
    transition: none !important;
    width: 100%;
  }

  html.side-header #header.side-header .header-body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
    top: auto !important;
    transition: none !important;
  }

  html.side-header #header.side-header .header-container {
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html.side-header #header.side-header .header-column {
    align-items: stretch !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100%;
  }

  html.side-header #header.side-header .header-column > .header-row {
    align-self: stretch !important;
    max-height: none !important;
  }

  /* Ensure logo row lays out horizontally (logo left, controls right) */
  #header .header-container > .header-column > .header-row:first-child {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
  }

  /* The nav row is part of normal mobile flow so Bootstrap's collapse animation
     naturally pushes page content down. Porto's default mobile nav is absolute;
     that is what required the old height hacks. */
  html.side-header #header.side-header .header-row-side-header {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    width: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  html.side-header #header.side-header .header-row-side-header .header-nav,
  html.side-header #header.side-header .header-nav.header-nav-links,
  html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide {
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    width: 100%;
  }

  html.side-header #header.side-header .header-nav-main,
  html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide .header-nav-main {
    height: auto !important;
    min-height: 0 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100%;
    z-index: 1002;
  }

  html.side-header #header.side-header .header-nav-main::before {
    display: none !important;
  }

  html.side-header #header.side-header .header-nav-main nav {
    -webkit-overflow-scrolling: touch;
    padding-left: 0;
    padding-right: 0;
  }

  html.side-header #header.side-header .header-nav-main nav.collapse {
    transition: none !important;
  }

  html.side-header #header.side-header .header-nav-main nav.collapsing {
    overflow-y: hidden !important;
    transition: height 0.35s ease !important;
  }

  html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav > ul {
    height: auto !important;
    justify-content: flex-start !important;
  }

  /* Minor logo spacing for top header */
  #header .header-logo { margin: 0.5rem 0 !important; }

  /* Keep hamburger on the far right */
  #header .header-btn-collapse-nav {
    display: inline-flex !important;
    margin-left: auto !important;
  }

  /* If socials+hamburger are in the top/logo row, hide the desktop footer row */
  #header .header-row.justify-content-end.mt-lg-auto { display: none !important; }
}


.featured-box{
	z-index: auto !important; /* otherwise it could float over other objects */
}


.card-body{
  z-index: auto;
}


#guest-block .btn {
	font-size: 16px;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* Remove persistent focus ring/box shadow only for this block */
#guest-block .btn:focus {
	box-shadow: none !important;
	outline: none !important;
}

.textcolor-verifiedblue {
	color:#0866ff;	
}

.jh-align-top {
	align-items: flex-start !important;
}

.jh-align-top input[type="checkbox"].form-check-input {
	margin-top: 5px !important;
}

.testimonial.testimonial-style-2 .testimonial-author img {
	max-width: 120px;
	max-height: 120px;
}

.ui-autocomplete {
	z-index: 999999 !important;
}

ul.breadcrumb li a {
	color: var(--primary--200);
}


.footer-copyright nav#sub-menu ul li a {
	color: var(--primary--200) !important;
}

.recipe thead th {text-wrap: nowrap;}

.jh-tabs-skin .nav-pills .nav-link {
  background-color: #eeeeee !important;
  margin-right: 0.25em !important;
  margin-bottom: 0.25em !important;
}
.jh-tabs-skin .nav-pills .nav-link:hover {
  background-color: #dddddd !important;
}
.jh-tabs-skin .nav-pills .nav-link.active {
  background-color: var(--primary) !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  html, body, p {
	font-size: 16px;
	line-height: 28px;
  }
  .form-control, .form_select {
	font-size: clamp(16px, 1rem, 9999px) !important;
  }
}

.nav-tabs.nav-tabs-sm li .nav-link {
	padding: 6px 10px;
}

.google-map {margin:0px;width:auto;height:auto;background: none}

.badge {white-space:normal;}

.equal {
  display: flex;
  flex-wrap: wrap;
}
.equal > div[class*='col-'] {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.equal .featured-box {
  height: 100%;
}

.badge-textcount {
	border-radius: 5px !important;
	bottom: 5px; right: 5px;
	background-color:#666666;
	color:#FFFFFF;
	opacity: 0.5;
}

/* ----------------------------------------------------------------------- */
/* Responsive flex list for insertTableOfContents in functions.inc.php */
/* ----------------------------------------------------------------------- */
.responsive-flex-list {
	display: flex; /* Enables flexbox */
	flex-direction: column; /* Stacks items vertically by default */
	flex-wrap: wrap; /* Allows items to wrap onto new lines/columns */
	max-height: 2000px; /* Adjust this based on your content size to control when items wrap */
}


/* ----------------------------------------------------------------------- */


/* ----------------------------------------------------------------------- */
/* Special GPX Waypoints List */
/* ----------------------------------------------------------------------- */
.gpx_waypoints_list {
  display: flex;
  flex-direction: column;
}

@media (min-width: 800px) {
  .gpx_waypoints_list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
  }

  .gpx_waypoints_list li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
  }

  .gpx_waypoints_list li strong {
	margin-bottom: 5px;
	text-align: left;
  }

  .gpx_waypoints_list li a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
  }

  .gpx_waypoints_list li .fa-crosshairs {
	margin-right: 5px;
  }
}
/* ----------------------------------------------------------------------- */

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.form-with-icons .input-group-with-icons .position-relative {
	padding:0px !important;
	border:0;
}

.social-icons li:hover.social-icons-snapchat a {
	background: #FFFC00 !important;
}

.social-icons li:hover.social-icons-snapchat a i {
	color: #666666 !important;
}

.dropdown-input-tags {
	max-height:50vh;
	overflow-y:scroll;
}

input[type='color'] {
	height:36px;
	width:72px;
	border-radius: 4px;
	padding: 4px;
}


.badge-nice {
	padding: 0.5rem 1rem !important;
	font-size: 100% !important;
}
.pagination-results-badge {
	margin-right: 20px;
	margin-left: -20px;
	padding: 0px 10px;
	border: 1px solid #CCCCCC;
	font-size: small;
	border-left: none;
	border-radius: 8px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}


.text-yellow-star {color:#ffc107!important;}
.text-empty-star {color:#c6c6c6!important;}

.form-with-icons .datepicker .position-relative {width:100% !important;}

.input-group-with-icons .position-relative input {
	border-top-right-radius:0;
	border-bottom-right-radius:0;
}
.input-group-with-icons span.input-group-text:last-child {
	border-top-left-radius:0;
	border-bottom-left-radius:0;
}

/* Extend Bootstrap's form-switch for both inline and block displays */
.form-switch {
	margin-right:12px;
	margin-bottom: 0.25rem;
	padding-left:0;
	display: flex;
}
.form-switch .form-check-input {
	width: 4em;
	min-width: 4em;
	height: 2rem;
	margin-top: 0;
	margin-left:0;
}

.form-switch:not(.form-switch-inline) .form-check-label {
	flex: 0 1 auto; /* Allow the label to grow and shrink but prefer not wrapping */
	/* Introduce a max-width for the label if you want to control when it wraps */
	max-width: 100%; /* Adjust this value based on your layout needs */
}

.form-switch .form-check-label {
	margin-left: 0.5rem;
	margin-top: 0.25rem;
	flex: 1;
}

/* Additional CSS for inline display */
.form-switch-inline {
	display: inline-flex;
	align-items: center; /* Align items vertically */
}

.form-switch-inline .form-check-label {
	margin-left: 0.5rem; /* Adjust based on visual preference */
}

div.bootstrap-tagsinput {width:auto;}
.bootstrap-tagsinput .badge {
  margin: 2px 2px;
  padding:5px 8px;
}

msgavoidspam::after {content: attr(data-domain);}
msgavoidspam::before {content: attr(data-user);}
  
@media print {
	body > .body {
		  margin: 0px !important;
	  }
 }
 
.form-with-icons .form-control {
	padding-left:12px !important;
}

.form-with-icons .position-relative .form-control {
	padding-left:41px !important;
}

.form-with-icons .position-relative .form-select {
	padding-left:41px !important;
}

.form-with-icons .position-relative .form-control.ps-without-icon {
	padding-left: 12px !important;
}

  
.featured-boxes-style-5 .featured-box .icon-featured.icon-featured-small,
.featured-boxes-style-6 .featured-box .icon-featured.icon-featured-small,
.featured-boxes-style-7 .featured-box .icon-featured.icon-featured-small,
.featured-boxes-style-9 .featured-box .icon-featured.icon-featured-small {
	display: inline-block;
	font-size: 1em;
	height: 36px;
	padding: 0;
	width: 36px;
	margin-top: 0;
	margin-bottom: 4px;
	background-color: #FFF;
	border: 1px solid #dfdfdf;
	color: #777;
	line-height: 35px;
}
  

@media (max-width: 767px) {
	#header .header-nav-features .header-nav-features-user .header-nav-features-dropdown {
		max-height: 80vh;
		overflow-y: scroll;
	}
	.left_border_not_mobile {border-left:0px none !important;}
}

.drag_handle {
	display: flex;
	align-content: center;
	text-align:center;
	flex-direction: column;
	justify-content: center;
	cursor: grab;
}

.jh-tabs-skin.tabs.tabs-sm .nav-tabs > li .nav-link,
.jh-tabs-skin.tabs.tabs-simple .nav-tabs > li .nav-link {
	padding: 8px;
	font-size: 14px;
}

/* Scoped small icon tabs (your account page style) */
.jh-tabs-skin.tabs.tabs-simple .nav-tabs > li .nav-link.nav-link-small,
.jh-tabs-skin.tabs.tabs-simple .nav-tabs > li .nav-link.nav-link-small:hover,
.jh-tabs-skin.tabs.tabs-simple .nav-tabs > li .nav-link.nav-link-small:focus {
	padding: 6px 15px !important;
}

.jh-tabs-skin.tabs.tabs-simple .nav-tabs > li .nav-link.nav-link-small p {
	font-size: 0.85rem;
	font-weight: 500;
}

ul.simple-post-list .post-meta{margin-left:25px;}
.input-group-nobackground {border:0px none;background:transparent;padding-left:0px;}
.input-group select.form-control  {height:calc(1.5em + .75rem + 2px);}
.checkbox-inline {margin-left:8px;margin-right:8px;}
.checkbox-inline input[type="checkbox"] {margin-right:4px;}

.social-icons li:hover.social-icons-meetup a {
	background: #ff6969 !important;
}

.bg-darkgrey {
	background-color:#DDDDDD;
	color:#666666;
	font-weight: normal;
}

/* Add here all your CSS customizations */
.masonry .masonry-item { width: 50% !important; }
@media screen and (min-width: 600px) {
	.masonry .masonry-item { width: 33% !important; }
}
@media screen and (min-width: 1024px) {
	.masonry .masonry-item { width: 25% !important; }
}

.list.list-icons.list-icons-sm li {padding-left:20px;}
.slick-prev:before, .slick-next:before {color:#62AC6E;}
.slick-dots {bottom:auto;}

.red {color:#ff0000;}

.tinycol {width:1px;white-space:nowrap;}

.note {font-size:smaller;color:#AAAAAA;font-style: italic}

.text-left {text-align:left !important;}

@media (max-width: 575px) {
	body, body p  {
		font-size: 16px;
		line-height:28px;
	}
}

/* VALID STATES */
input[type=text].valid,
input[type=password].valid,
input[type=email].valid,
input[type=tel].valid,
input[type=number].valid,
textarea.valid,
select.valid {
  border: 1px solid #70A41B;
}

/* ERROR STATES */
input[type=text].error,
input[type=password].error,
input[type=email].error,
input[type=tel].error,
input[type=number].error,
textarea.error,
select.error {
  border: 1px solid #990000;
}

div.checkbox.valid {
	border: 1px solid #9AA600;
	border-radius: 5px;
	padding: 5px;
	margin:2px;
}
div.checkbox.error {
	border: 1px solid #DF653E;
	border-radius: 5px;
	padding: 5px;
	margin:2px;
}

.gallery-album-title {
	text-align:left;
	font-size: 1.3em !important;
	border-top-right-radius: 2em;
	border-bottom-right-radius: 2em;
	position:absolute;
	bottom:0px;
	max-width:90%;
	color:#ffffff;
	background:rgba(0,0,0,0.70);
	letter-spacing:-0.05em;
	line-height:1.1em;
	bottom:12px;
	padding:6px 20px 6px 10px;
}

.thumb-info.thumb-info-bottom-info .thumb-info-title.gallery-item-title {
	width:100%;
	left:0px;
	max-width:100%;
	color:#ffffff;
	transition:transform .2s ease-out, opacity .2s ease-out;
	top:auto;
	bottom:0px;
	text-align:left;
	font-size: 1.4em !important;
	background-color:rgba(0,0,0,0.70);
	padding:10px;
	line-height:1.2em;
}

/* =========================================================
   Site Ticker Rotator - BULLET ZOOM (blur + skew, no rotate)
   - Enters like a fast “impact” (zoom + blur + skew)
   ========================================================= */

#siteTickerRotator{
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 100%;
  z-index: 1000;
  /* min-height: 44px; */
}

/* pause support (JS toggles .is-paused on the wrap) */
#siteTickerRotator.is-paused .site-ticker-frame{
  animation-play-state: paused !important;
}

#siteTickerAlways{
  width: 100%;
  min-width: 100%;
}

/* Base frame state */
#siteTickerRotator .site-ticker-frame{
  position: absolute;
  inset: 0;
  display: none;
  will-change: transform, opacity, filter;
}

/* Z-order during transitions */
#siteTickerRotator .site-ticker-frame.is-entering{ display:block; z-index:3; }
#siteTickerRotator .site-ticker-frame.is-holding { display:block; z-index:2; }
#siteTickerRotator .site-ticker-frame.is-leaving { display:block; z-index:1; }

/* Subtle edge shading so motion reads even on flat colors */
#siteTickerRotator .site-ticker-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(255,255,255,.10), rgba(0,0,0,.14));
  opacity:.10;
}

/* Energy streak on enter */
#siteTickerRotator .site-ticker-frame.is-entering::before{
  content:"";
  position:absolute;
  inset:-45% -40%;
  pointer-events:none;
  background: linear-gradient(90deg,
	rgba(255,255,255,0) 0%,
	rgba(255,255,255,.75) 48%,
	rgba(255,255,255,.18) 56%,
	rgba(255,255,255,0) 100%);
  transform: translateX(120%) skewX(-22deg);
  opacity: 0;
  animation: tickerBulletStreak 320ms cubic-bezier(.18,.9,.2,1) forwards;
  mix-blend-mode: overlay;
}

/* =========================================================
   Site Ticker - prevent wrapping, use ellipsis (fixed height)
   ========================================================= */

.site-ticker-item__line{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Make common nested blocks behave inline so they can't create extra lines */
.site-ticker-item__line br{ display:none; }
.site-ticker-item__line p,
.site-ticker-item__line div{
  display:inline;
  margin:0;
}

/* Ensure nested elements don't re-enable wrapping (overrides .badge {white-space:normal;} etc) */
.site-ticker-item__line *{
  white-space:nowrap !important;
}

/* Make the whole line clickable when content is a link, and keep ellipsis working */
.site-ticker-item__line > a{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@keyframes tickerBulletStreak{
  0%   { transform: translateX(-140%) skewX(-22deg); opacity: 0; }
  12%  { opacity: .55; }
  60%  { opacity: .18; }
  100% { transform: translateX(140%) skewX(-22deg); opacity: 0; }
}

/* Enter: bullet zoom + blur + skew (no rotation) */
@keyframes tickerBulletIn{
  0%{
	opacity: 0;
	transform: translateX(150%) translateY(-4px) skewX(-18deg) scale(1.22);
	filter: blur(18px) saturate(1.18);
  }
  55%{
	opacity: 1;
	transform: translateX(-14px) translateY(0) skewX(-7deg) scale(1.04);
	filter: blur(3px) saturate(1.06);
  }
  70%{
	transform: translateX(7px) skewX(3deg) scale(1.015);
	filter: blur(1px) saturate(1.02);
  }
  84%{
	transform: translateX(-2px) skewX(-1deg) scale(1.0);
	filter: blur(.4px) saturate(1.0);
  }
  100%{
	opacity: 1;
	transform: translateX(0) translateY(0) skewX(0) scale(1.0);
	filter: blur(0px) saturate(1);
  }
}

/* Exit: fast out (keep skew to imply force), no rotation */
@keyframes tickerBulletOut{
  0%{
	opacity: 1;
	transform: translateX(0) translateY(0) skewX(0) scale(1);
	filter: blur(0px) saturate(1);
  }
  30%{
	transform: translateX(-10px) skewX(6deg) scale(0.99);
  }
  100%{
	opacity: 0;
	transform: translateX(-155%) translateY(4px) skewX(18deg) scale(0.88);
	filter: blur(16px) saturate(1.1);
  }
}

#siteTickerRotator .site-ticker-frame.is-entering{
  animation: tickerBulletIn 380ms cubic-bezier(.18,.9,.2,1) forwards;
}

#siteTickerRotator .site-ticker-frame.is-leaving{
  animation: tickerBulletOut 280ms cubic-bezier(.18,.9,.2,1) forwards;
}

#siteTickerRotator .site-ticker-frame.is-holding{
  opacity: 1;
  transform: none;
  filter: none;
}

/* Reduced motion: crossfade */
@media (prefers-reduced-motion: reduce){
  #siteTickerRotator .site-ticker-frame.is-entering,
  #siteTickerRotator .site-ticker-frame.is-leaving{
	animation: none !important;
	transform: none !important;
	filter: none !important;
  }
  #siteTickerRotator .site-ticker-frame.is-entering::before{ display:none !important; }
}

/* Single frame */
#siteTickerRotator[data-count="1"]{
  overflow: visible;
  height: auto !important;
}
#siteTickerRotator[data-count="1"] .site-ticker-frame{
  position: relative;
  inset: auto;
  display: block;
}
#siteTickerRotator[data-count="1"] .site-ticker-frame::before,
#siteTickerRotator[data-count="1"] .site-ticker-frame::after{
  display:none !important;
}




/* -------------------------------------------------------------------------- */
   /* Meet: Star badge (Font Awesome star with count inside)                      */
   /* Stacks any unit suffix (k/m) onto a second line                              */
   /* -------------------------------------------------------------------------- */
   /* Allow clicking specific elements inside the swipe overlay (overlay itself stays non-interactive) */
   .meet-swipe-overlay .btnMeetGiveStar{
	 pointer-events: auto;
	 display: inline-flex;
	 align-items: center;
   }
   
   .meet-star-badge{ 
	 position:relative;
	 display:inline-flex;
	 align-items:center;
	 justify-content:center;
   
	 width:1em;
	 height:1em;
   }
   
   .meet-star-badge > i{
	 font-size:1em;
	 line-height:1;
	 color:#f5c542;
	 filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
   }
   
   .meet-star-badge__txt{
	 position:absolute;
	 inset:0;
   
	 display:flex;
	 align-items:center;
	 justify-content:center;
   
	 /* optical correction: star isn't vertically symmetric */
	 transform: translateY(0.08em);
   
	 font-weight:900;
	 font-variant-numeric: tabular-nums;
	 letter-spacing:-0.03em;
	 color:#1b1b1b;
	 text-shadow:0 1px 0 rgba(255,255,255,.35);
	 line-height:1;
	 pointer-events:none;
	 white-space:nowrap;
   }
   
   /* single-line sizing (no unit) */
   .meet-star-badge--len1 .meet-star-badge__txt{ font-size:0.62em; }
   .meet-star-badge--len2 .meet-star-badge__txt{ font-size:0.45em; }
   .meet-star-badge--len3 .meet-star-badge__txt{ font-size:0.30em; }
   
   /* stacked mode: number on line1, unit on line2 */
   .meet-star-badge--stacked .meet-star-badge__txt{
	 flex-direction:column;
	 white-space:normal;
   
	 /* center looks slightly different in stacked mode */
	 transform: translateY(0.16em);
	 letter-spacing:-0.02em;
   }
   
   .meet-star-badge--stacked.meet-star-badge--len1 .meet-star-badge__txt{ font-size:0.30em; }
   .meet-star-badge--stacked.meet-star-badge--len2 .meet-star-badge__txt{ font-size:0.30em; }
   .meet-star-badge--stacked.meet-star-badge--len3 .meet-star-badge__txt{ font-size:0.30em; }
   
   .meet-star-badge--stacked .meet-star-badge__num{
	 line-height:0.98;
   }
   
   .meet-star-badge--stacked .meet-star-badge__unit{
	 font-size:0.85em;    /* relative to wrapper font-size */
	 line-height:0.78;
	 margin-top:-0.08em;
	 letter-spacing:0;
	 text-transform:lowercase;
   }
   
   /* Meet tab count badge: never wrap, never change height */
  .meetLikesYouBadge{
	white-space: nowrap !important;
	line-height: 1 !important;
	display: inline-flex;              /* no !important so hide classes can win */
	align-items: center !important;
	justify-content: center !important;
	vertical-align: middle !important;
  }
  
  .meetLikesYouBadge.is-hidden{
	display: none !important;
  }
   
   /* Optional: keep it visually tight in tab headers */
   #meetTabList .meetLikesYouBadge,
   #meetFriendsSubTabs .meetLikesYouBadge{
	 padding-top: 0.25rem !important;
	 padding-bottom: 0.25rem !important;
	 min-width: 1.4em;            /* keeps "1" from looking off-center */
   }
   
   
   
   /* =========================================================
	  Full-screen profile overlay (REQUIRED)
	  - If missing, overlay appears at page bottom.
	  ========================================================= */
   
   .meet-profile-overlay{
	 position: fixed;
	 inset: 0;
	 background: rgba(0,0,0,.50);
	 display: none;
	 z-index: 20000;
   
	 overflow: hidden;               /* prevent page behind scrolling */
	 overscroll-behavior: contain;   /* reduce scroll chaining */
	 touch-action: pan-y;            /* helps mobile scrolling */
   }
   .meet-profile-overlay.is-open{ display: block; }
   
   .meet-profile-shell{
	 position: absolute;
	 inset: 16px;
	 background: #fff;
	 border-radius: 14px;
	 overflow: hidden;
   
	 display: flex;                  /* needed for internal scrolling */
	 flex-direction: column;
   }
   
   .meet-profile-content{
	 flex: 1 1 auto;
	 min-height: 0;                  /* CRITICAL for flex scrolling */
	 overflow: hidden;               /* contain scroll to inner areas */
   }
   
   /* Lock background scroll while overlay open */
   body.meet-overlay-open{
	 overflow: hidden;
	 height: 100vh;                  /* helps iOS/Safari */
   }
   
   /* Mobile: full-screen shell */
   @media (max-width: 991.98px){
	 .meet-profile-shell{
	   inset: 0;
	   border-radius: 0;
	 }
   
	 /* On mobile, make the overlay content itself the single scroll container */
	 .meet-profile-content{
	   overflow: auto;
	   -webkit-overflow-scrolling: touch;
	 }
   }
   
   
   /* =========================================================
	  Meet profile overlay v3 layout (content)
	  ========================================================= */
   
   .meet-profile-v3{
	 display:flex;
	 height:100%;
	 width:100%;
	 background:#fff;
   }
   
   .meet-profile-v3-left{
	 flex:0 0 50%;
	 min-width:0;
	 background:#000;
	 display:flex;
	 flex-direction:column;
   }
   
   .meet-profile-left-head{
	 padding:14px 14px 10px 14px;
	 background:#000;
	 color:#fff;
	 display:flex;
	 align-items:flex-start;
	 justify-content:space-between;
	 gap:12px;
   }
   
   .meet-profile-name{
	 font-weight:900;
	 font-size:28px;
	 line-height:1.1;
   }
   .meet-profile-age{
	 font-weight:800;
	 opacity:.92;
   }
   .meet-profile-meta{
	 margin-top:6px;
	 opacity:.85;
	 font-size:16px;
	 line-height:1.25;
   }
   .meet-profile-close{
	 width:40px;
	 height:40px;
	 border-radius:999px;
	 display:inline-flex;
	 align-items:center;
	 justify-content:center;
	 background:rgba(255,255,255,.92);
	 color:#111;
	 text-decoration:none !important;
	 flex:0 0 auto;
   }
   
   .meet-profile-photoWrap{
	 position:relative;
	 flex:1 1 auto;
	 min-height:0;
	 background:#000;
	 overflow:hidden;
   }
   
   .meet-profile-photoTopLeft{
	 position:absolute;
	 top:.7rem;
	 left:.7rem;
	 z-index:30;
	 pointer-events:none;
   }
   
   .meet-profile-photoTopLeft .meet-profile-photoStar,
   .meet-profile-photoTopLeft [data-star-account-id],
   .meet-profile-photoTopLeft .btnGiveStar,
   .meet-profile-photoTopLeft .btnMeetGiveStar{
	 pointer-events:auto;
	 position:relative;
	 z-index:31;
	 display:inline-flex;
	 align-items:center;
	 justify-content:center;
	 line-height:1;
	 text-decoration:none !important;
	 touch-action:manipulation;
	 -webkit-tap-highlight-color:transparent;
   }
   
   .meet-profile-photoTopLeft .meet-profile-photoStar > *,
   .meet-profile-photoTopLeft [data-star-account-id] > *,
   .meet-profile-photoTopLeft .btnGiveStar,
   .meet-profile-photoTopLeft .btnMeetGiveStar{
	 font-size:2.1rem;
	 line-height:1 !important;
   }
   
   .meet-profile-photoTopLeft .meet-star-badge,
   .meet-profile-photoTopLeft .meet-star-badge *{
	 line-height:1 !important;
   }
   
   .meet-profile-carousel,
   .meet-profile-carousel .owl-stage-outer,
   .meet-profile-carousel .owl-stage,
   .meet-profile-carousel .owl-item{
	 height:100%;
   }
   .meet-profile-carousel .owl-item img{
	 height:100%;
	 width:100%;
	 object-fit:contain;
	 object-position:center center;
	 display:block;
	 background:#000;
   }
   
   .owl-carousel .owl-nav button.owl-prev:before,
   .owl-carousel .owl-nav button.owl-next:before {
	   font: var(--fa-font-solid);
   }
   
   .owl-carousel .owl-nav button.owl-prev:before {
	   content: "\f053";
   }
   
   .owl-carousel .owl-nav button.owl-next:before {
	   content: "\f054";
   }
   
   .meet-profile-left-foot{
	 padding:12px 14px 14px 14px;
	 background:#000;
	 display:flex;
	 flex-direction:column;
	 gap:10px;
   }
   
   .meet-profile-actions{
	 display:flex;
	 gap:.45rem;
	 flex-wrap:wrap;
   }
   
   .meet-profile-badges{
	 display:flex;
	 flex-wrap:wrap;
	 gap:.4rem;
   }
   
   /* Desktop: right side scrolls */
   .meet-profile-v3-right{
	 flex:1 1 50%;
	 min-width:0;
	 overflow:auto;
	 -webkit-overflow-scrolling: touch;
	 min-height:0;
	 padding:16px 18px;
	 background:#fff;
   }
   
   /* Mobile: stack in normal flow; photo clamped; ONE scroll (on .meet-profile-content) */
   @media (max-width: 991.98px){
	 .meet-profile-v3{
	   flex-direction:column;
	   height:auto;            /* prevent overlap */
	   min-height:100%;
	 }
   
	 .meet-profile-v3-left{
	   flex:0 0 auto;
	 }
   
	 .meet-profile-photoWrap{
	   flex:0 0 auto;
	   height:clamp(260px, 46vh, 420px);
	 }
   
	 .meet-profile-v3-right{
	   overflow:visible;       /* flow inside .meet-profile-content scroll */
	   padding:14px 14px;
	 }
   }
   
   /* -------------------------
	  Meet Profile Photos (square tiles + clean sortable placeholder)
	  Replace the entire previous Meet Profile Photos block with this.
   -------------------------- */
   
   /* Tile wrapper (photo tiles) */
   .meet-photo-tile{
	 position: relative;
	 border-radius: 14px;
	 overflow: hidden;
	 background: #000;
	 aspect-ratio: 1 / 1;          /* force square */
   }
   
   /* Photo fill */
   .meet-photo-tile img{
	 position: absolute;
	 inset: 0;
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
	 object-position: center;
	 display: block;
   }
   
   /* Action buttons (top-right) */
   .meet-photo-actions{
	 position: absolute;
	 top: .45rem;
	 right: .45rem;
	 display: flex;
	 gap: .35rem;
	 z-index: 5;
   }
   .meet-photo-drag{ cursor: grab; }
   
   /* -------------------------
	  Dropzone tile (ONLY this gets the dashed border)
   -------------------------- */
   .meet-photo-dropzone.dropzone{
	 position: relative;
	 padding: 0;
	 border-radius: 14px;
	 overflow: hidden;
   
	 aspect-ratio: 1 / 1;          /* square */
	 min-height: 0;                /* override Dropzone default min height */
   
	 border: 2px dashed rgba(0,0,0,.22);
	 background: rgba(0,0,0,.02);
   }
   
   /* Center the "Add photos" content */
   .meet-photo-dropzone .dz-message{
	 margin: 0;
	 position: absolute;
	 inset: 0;
	 display: flex;
	 align-items: center;
	 justify-content: center;
   }
   
   /* IMPORTANT:
	  No border/background here so we don't get a second dashed box */
   .meet-photo-placeholder{
	 border: 0;
	 background: transparent;
	 width: 100%;
	 text-align: center;
   }
   
   /* Hide dropzone previews (you commit immediately) */
   .meet-photo-dropzone .dz-preview{ display:none; }
   
   .meet-photo-dropzone.dz-disabled{
	 opacity: .55;
	 pointer-events: none;
   }
   
   /* -------------------------
	  Sortable placeholder (keep the correct square height, no “extra row” look)
   -------------------------- */
   
   
   /* While dragging, keep helper square + same styling */
   .meet-photo-drag-helper{
	 border-radius: 14px;
	 overflow: hidden;
	 background: #000;
	 aspect-ratio: 1 / 1;
	 height: auto;
   }
   .meet-photo-drag-helper img{
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
	 display: block;
   }
   
   /* Fix: sortable placeholder becomes tall because width changes during drag.
	  Force the placeholder height to match its computed width (square). */
   
   /* Keep the placeholder square even when the grid recalculates */
   .meet-photo-sort-placeholder{
	 height: auto;
	 min-height: 0;
   }
   
   /* Create an intrinsic square using padding (stable across drag/layout) */
   .meet-photo-sort-placeholder::before{
	 content:"";
	 display:block;
	 padding-top:100%;                /* square */
   }
   
   /* Keep the visual style on the placeholder itself */
   .meet-photo-sort-placeholder{
	 position: relative;
	 border: 2px dashed rgba(0,0,0,.18);
	 border-radius: 14px;
	 background: rgba(0,0,0,.02);
	 overflow: hidden;
   }
   
   /* Any children (jQuery UI may inject) should not affect layout */
   .meet-photo-sort-placeholder > *{
	 position: absolute;
	 inset: 0;
	 visibility: hidden;
	 pointer-events: none;
   }
   
   /* Optional: ensure each grid cell doesn’t stretch in height (Bootstrap row can)
	  Only applies to your photo grid container. */
   #meetPhotoGrid > .meet-photo-item,
   #meetPhotoGrid > .meet-photo-dropzoneWrap{
	 align-self: flex-start;
   }
   
   
   .meet-tabs{
	 display:flex;
	 gap:0;
	 flex-wrap:wrap;
	 padding:0;
	 margin:0;
	 list-style:none;
   }
   
   .meet-tabs .meet-tabbtn{ cursor:pointer; }
   
   .meet-pane{ display:none; }
   .meet-pane.is-active{ display:block; }
.account-upgrade-badge{
	width:1.05rem;
	height:1.05rem;
	min-width:1.05rem;
	border-radius:50%;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:#111;
	color:#fff;
	border:1px solid rgba(255,255,255,.9);
	box-shadow:0 0 0 1px rgba(0,0,0,.18);
	font-weight:800;
	font-size:.45rem;
	line-height:1;
	letter-spacing:-.04em;
	vertical-align:middle;
	position:relative;
	top:-.05em;
}
/* Shared comments */
.account-identity-verified {
	border: 1px solid rgba(28, 95, 168, .18);
	background: rgba(28, 95, 168, .055);
	border-radius: .75rem;
	padding: .85rem 1rem;
}
.account-identity-title {
	font-weight: 700;
	color: var(--primary, #1c5fa8);
}
.account-identity-date {
	font-weight: 400;
	color: var(--bs-body-color, #444);
}
.ksw-comments-list {
	margin: 0;
	padding: 0;
}
.ksw-comment-item {
	list-style: none;
	margin: 0 0 .75rem 0;
	padding: 0;
}
.ksw-comment-card {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	padding: .85rem;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: .85rem;
	background: var(--bs-body-bg, #fff);
	box-shadow: 0 .125rem .35rem rgba(0,0,0,.035);
}
.ksw-comment-avatar-col {
	flex: 0 0 auto;
}
.ksw-comment-avatar-link,
.ksw-comment-avatar-link:hover {
	display: inline-block;
	text-decoration: none;
}
.ksw-comment-avatar {
	display: block;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	background: #111;
	border: 1px solid rgba(0,0,0,.08);
}
.ksw-comment-body {
	min-width: 0;
	flex: 1 1 auto;
}
.ksw-comment-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .25rem;
}
.ksw-comment-author-line {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .2rem;
	font-weight: 700;
	line-height: 1.25;
}
.ksw-comment-author-line .meet-star-badge-link,
.ksw-comment-author-line .meet-star-badge {
	font-size: 1rem;
	line-height: 1;
}
.ksw-comment-action-btn {
	line-height: 1;
	padding: .25rem .45rem;
}
.ksw-comment-display {
	line-height: 1.45;
	word-break: break-word;
}
.ksw-comment-meta {
	font-size: .92em;
}
@media (max-width: 575.98px) {
	.ksw-comment-card { padding: .75rem; gap: .55rem; }
	.ksw-comment-avatar { width: 36px; height: 36px; }
}
.feed-partner-announcement-modal{
	max-height:min(72vh, 760px);
	overflow:auto;
}

.blocked-users-empty{
	display:inline-block;
	max-width:none;
	width:auto;
}

/* =========================================================
   Bootstrap btn-group skin fix
   Keeps outline buttons outlined, but uses site primary color
   ========================================================= */

/* Do NOT style .btn-group .btn globally. That breaks every variant. */

/* Filled primary */
.btn-group > .btn.btn-primary,
.btn-group-vertical > .btn.btn-primary {
	--bs-btn-color: var(--primary-inverse, #fff);
	--bs-btn-bg: var(--primary);
	--bs-btn-border-color: var(--primary);
	--bs-btn-hover-color: var(--primary-inverse, #fff);
	--bs-btn-hover-bg: var(--primary-100, var(--primary));
	--bs-btn-hover-border-color: var(--primary-100, var(--primary));
	--bs-btn-active-color: var(--primary-inverse, #fff);
	--bs-btn-active-bg: var(--primary-200, var(--primary));
	--bs-btn-active-border-color: var(--primary-200, var(--primary));

	color: var(--bs-btn-color) !important;
	background-color: var(--bs-btn-bg) !important;
	border-color: var(--bs-btn-border-color) !important;
}

/* Filled primary hover/active */
.btn-group > .btn.btn-primary:hover,
.btn-group > .btn.btn-primary:focus,
.btn-group > .btn.btn-primary:active,
.btn-group > .btn.btn-primary.active,
.btn-group-vertical > .btn.btn-primary:hover,
.btn-group-vertical > .btn.btn-primary:focus,
.btn-group-vertical > .btn.btn-primary:active,
.btn-group-vertical > .btn.btn-primary.active {
	color: var(--bs-btn-hover-color) !important;
	background-color: var(--bs-btn-hover-bg) !important;
	border-color: var(--bs-btn-hover-border-color) !important;
}

/* Outline primary: normal state must stay transparent */
.btn-group > .btn.btn-outline-primary,
.btn-group-vertical > .btn.btn-outline-primary {
	--bs-btn-color: var(--primary);
	--bs-btn-border-color: var(--primary);
	--bs-btn-hover-color: var(--primary-inverse, #fff);
	--bs-btn-hover-bg: var(--primary);
	--bs-btn-hover-border-color: var(--primary);
	--bs-btn-active-color: var(--primary-inverse, #fff);
	--bs-btn-active-bg: var(--primary);
	--bs-btn-active-border-color: var(--primary);
	--bs-btn-disabled-color: var(--primary);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: var(--primary);

	color: var(--primary) !important;
	background-color: transparent !important;
	border-color: var(--primary) !important;
}

/* Outline primary hover/focus: Bootstrap outline buttons fill on hover */
.btn-group > .btn.btn-outline-primary:hover,
.btn-group > .btn.btn-outline-primary:focus,
.btn-group-vertical > .btn.btn-outline-primary:hover,
.btn-group-vertical > .btn.btn-outline-primary:focus {
	color: var(--primary-inverse, #fff) !important;
	background-color: var(--primary) !important;
	border-color: var(--primary) !important;
}

/* Outline primary active/pressed/checked state */
.btn-group > .btn-check:checked + .btn.btn-outline-primary,
.btn-group > .btn-check:active + .btn.btn-outline-primary,
.btn-group > .btn.btn-outline-primary:active,
.btn-group > .btn.btn-outline-primary.active,
.btn-group-vertical > .btn-check:checked + .btn.btn-outline-primary,
.btn-group-vertical > .btn-check:active + .btn.btn-outline-primary,
.btn-group-vertical > .btn.btn-outline-primary:active,
.btn-group-vertical > .btn.btn-outline-primary.active {
	color: var(--primary-inverse, #fff) !important;
	background-color: var(--primary) !important;
	border-color: var(--primary) !important;
}

/* Disabled outline */
.btn-group > .btn.btn-outline-primary:disabled,
.btn-group > .btn.btn-outline-primary.disabled,
.btn-group-vertical > .btn.btn-outline-primary:disabled,
.btn-group-vertical > .btn.btn-outline-primary.disabled {
	color: var(--primary) !important;
	background-color: transparent !important;
	border-color: var(--primary) !important;
	opacity: .65;
}
.account-partner-badge{
	width:1.05rem;
	height:1.05rem;
	min-width:1.05rem;
	border-radius:50%;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:#4B006E;
	color:#fff;
	border:1px solid rgba(255,255,255,.9);
	box-shadow:0 0 0 1px rgba(75,0,110,.22);
	font-size:.52rem;
	line-height:1;
	vertical-align:middle;
	position:relative;
	top:-.05em;
}