/* ===========================
   🪶 Fowl Society Dashboard Grid
   =========================== */

body #primary {
	margin: 0 auto 0 auto !important;
	background: unset !important;
}

@media (max-width: 900px) {
	body #primary {
		margin: 1rem auto 0 auto !important;
	}
}

.fowl-society-dashboard {
	margin: 0.75rem;
	/* leaves visible background edge */
}

@import url('https://fonts.googleapis.com/css2?family=Mansalva&display=swap');

/* ==========================================================
   🌆 GLOBAL STYLES
   ========================================================== */


.mansalva,
.fs-grid h1,
.fs-grid h2,
.fs-grid h3,
.fs-grid h4,
.freebietitle {
	font-family: "Mansalva", sans-serif;
	font-weight: 400;
	font-style: normal;
	margin: 5px 0;
	text-align: center;
}

p {
	font-size: 12px;
}


/* ==========================================================
   🧱 FOWL SOCIETY GRID SYSTEM
   ========================================================== */
.fs-grid {
	display: grid;
	gap: 1rem;

}

/* Column Layouts */
.fs-grid-c1 {
	grid-template-columns: 1fr;
}

.fs-grid-c2 {
	grid-template-columns: 1fr 1fr;
}

.fs-grid-c3 {
	grid-template-columns: 1fr 1fr 1fr;
}

.fs-grid-c4 {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.fs-grid-c3-weighted {
	grid-template-columns: 25% 50% 25%;
}

/* Auto-fit layout */
.fs-grid-cauto {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Responsive Collapse */
@media (max-width: 600px) {

	.fs-grid-c2,
	.fs-grid-c3,
	.fs-grid-c4,
	.fs-grid-c3-weighted {
		grid-template-columns: 1fr !important;
	}
}

/* Alignment Helpers */
.fs-align-centre {
	align-items: stretch;
}

/* ==========================================================
   🧩 GRID ITEMS
   ========================================================== */
.fs-item {
	display: flex;
	flex-direction: column;
	padding: 1rem 2rem;
	border-radius: 0.5rem;
	transition: transform 0.3s ease;
}

.fs-item-standout {
	width: 106% !important;
	margin-left: -3% !important;
	margin-right: -3% !important;
	z-index: 1;
	transform: scale(1.02);
}

.fs-item-standout-down {
	margin-bottom: -10% !important;
	z-index: 1;
	transform: scale(1.02);
	background: #e8e2fa;
}

/* Responsive Fix for Standouts */
@media (max-width: 600px) {
	.fs-item-standout {
		width: 100% !important;
		margin: 0 !important;
		transform: none;
	}
}

/* ==========================================================
   🧭 DASHBOARD LAYOUT
   ========================================================== */
.fs-dashboard {
	display: grid;
	grid-template-columns: 70% 30%;
	gap: 0.5rem;
	display: grid;
	align-items: stretch;
	/* How italigns together */
}


.fs-dashboard-containter {
	display: grid;
	grid-template-columns: 21% 75%;
	gap: 1rem;
	margin: 5rem auto;
	width: 100%;
	max-width: 1050px;
	background: white;
	border-radius: 1rem;
	padding: 2rem 2rem 2rem 0;
	align-items: start;
	/* ← key line */
}


.bottomstandout {
	margin: 2rem -2rem -2rem 0;
}



@media (max-width: 900px) and (min-width: 601px) {
	.fs-side2 {
		grid-template-columns: 1fr 1fr;

	}
    
    .fs-item.pollsfun img.popup-trigger{
        width: 240px;
    }

	.pollsfun {
		max-height: 310px;
		margin-top: 2rem !important;

	}



	.bottomstandout {
		margin:  0 !important;
	}


	.menuside {
		align-items: start;
	}
    
    /* Target that specific poll or all image polls */
.forminator-poll--grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: center; /* optional: center them horizontally */
  gap: 1rem; /* spacing between options */
}

/* Make each column full-width */
.forminator-poll--column {
  width: 100% !important;
  max-width: 400px; /* optional limit so they don’t get too huge */
}

/* Make image options responsive */
.forminator-radio-image {
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 0; /* remove Forminator’s rounding if needed */
}

}

@media (max-width: 900px) {
	.fs-dashboard {
		grid-template-columns: 1fr !important;

	}
}

/* Responsive Dashboard */
@media (max-width: 600px) {
	.fs-dashboard {
		grid-template-columns: 1fr;
	}

	.fs-gridbox-right {
		margin-top: 2rem;
	}

	.fs-dashboard-containter {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		max-width: 500px;
	}

	.tab-menu {
		order: -1;
		margin-bottom: 1rem;
	}
}

/* ==========================================================
   🪶 MENU & UTILITY CLASSES
   ========================================================== */
.fs-menu-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5px;
	border-radius: 0.5rem;
	transition: transform 0.3s ease;
}

.tab-menu {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: 1rem;
}

.fs-menu-item {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.6rem;
	background: #fdfdfd;
	border-radius: 0.5rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: all 0.25s ease;
	cursor: pointer;
}

/* 🖱️ Hover & Active States */
.fs-menu-item:hover {
	background: #ffcb6b;
	color: #3d3d3d;
	transform: scale(1.05);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.fs-menu-item.active-tab {
	background: #27bdb5;
	color: white;
	transform: scale(1.05);
}

.middle-jusify {
	justify-content: center !important;
}

.bottom-justify {
	align-self: end;
}

.top-justify {
	align-self: start;
}

/* ==========================================================
   🎨 COLOURS & CATEGORY BACKGROUNDS
   ========================================================== */
:root {
  --fs-popup-bg: #A1DAAF;
}

.menutitle {
	background: #5b5b5b;
	border-radius: 2rem;
	padding: 0.2rem;
	color: #f5f5f5;
	text-align: center;
	height: 34px;
}
/* OLDER .quailofthemonth {
	background: url('https://www.lafowler.ca/wp-content/uploads/2025/11/quailofthemonth-frame.png') center top no-repeat;
	background-size: contain; 
    width: 120%;
  aspect-ratio: 410 / 450;
  display: block;
  margin-left: -10% !important;
} */

.quailofthemonth {
  position: relative;
  width: 100%; /* fills parent container */
  aspect-ratio: 410 / 450; /* keeps correct proportions */
  display: flex;
  justify-content: center;
  align-items: center;
}

.quailofthemonth img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%;
  object-fit: contain; /* keeps aspect ratio of both */
}

/* Ensure frame stays behind the quail */
.quailofthemonthframe {
  z-index: 0;
}

.quailofthemonthimg {
  z-index: 1;
  top: -35px !important;
}

@media (max-width: 600px) {
    .quailofthemonthimg {
      top: -64px !important;
    }
}

/*-- COLOURS CHANGES HERE --*/

.freebies {
	background: #f2eaff;
}

.pollsfun {
      background-color: var(--fs-popup-bg) !important;
}

.progress {
	background: #c3e4e2;
}


.vrilclass {
	color: #f1dae1;
	background-color: transparent !important;
}
.vrilclass img {
border-radius: 20px;
  max-width: 105% !important;
  margin-left: -1rem;
}

.vrilclassquiz h2 {
    display: none;
}

.vrilclassquiz li {
  list-style: none;
}

.brew {
	background: #f1dae1;
	color: #f1dae1;
	background:
		url('https://www.lafowler.ca/wp-content/uploads/2025/10/cocobathground3.jpg') center top repeat;
}

.quailblue {
	background: #e8f0fc;
}

.monthlypoll {
	border: 2px dashed #27bdb5;
}


.springgreen {
    background: #e3f9f1;
}

div.fs-item.brew {
	margin-top: 2rem !important;
}

img {
	text-align: center;
	margin: 0 auto;
}

.brew img {
	margin-top: -2rem !important;
}

.brew .fs-example p {
	font-size: 10px;
	background: #f1dae1;
	color: #6b5243;
	padding: 8px;
	text-align: center;
}

/* ==========================================================
   💭 THOUGHT ROWS
   ========================================================== */
.thoughtrows {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: url('https://www.lafowler.ca/wp-content/themes/fowler-theme/images/bubble-thoughts.svg') no-repeat center/contain;
	min-height: 275px;
	background-position: 2% 80%;
}

.thoughtrows h3 {
	text-align: right;
	background: #27bdb5;
	color: #fff;
	padding: 5px;
	border-radius: 5%;
}

/* ==========================================================
   📊 BAR GRAPH STYLES (Progress + Experiments)
   ========================================================== */
#secondary .forminator-response-message {
	display: none;
}

.forminator-chart-legend {
	display: none !important;
}

.progress {
  background: #c3e4e2;
  display: flex;
  justify-content: space-between; /* spreads them evenly */
  align-items: flex-start; /* align top edges */
  gap: 2rem; /* space between sections */
  padding: 1.5rem;
  flex-wrap: wrap; /* ensures it stays neat on smaller screens */
}

/* Each section grows evenly */
.progress section {
  flex: 1 1 0;
  min-width: 250px; /* prevents them from getting too squished */
}


@media (max-width: 600px) {
    .page-template-fowlsociety .fs-item.progress {
      margin-left: auto;
      margin-right: auto;
    }
}
.progress h4 {
	margin: .8rem !important;
	background: #fff;
	padding: .2rem;
}

.bar-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 0.8em;
	justify-content: flex-end;
}

.bar {
	width: 50%;
	height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.15);
	position: relative;
	overflow: hidden;
}

.bar::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, #ffcb6b, #ff6ec7);
	animation: fill 2s ease forwards;
}

/* Bar Fill Percentages */
.fill50::before {
	--target: 50%;
	animation-delay: 0.2s;
}

.fill10::before {
	--target: 10%;
	animation-delay: 0.4s;
}

.fill1::before {
	--target: 1%;
	animation-delay: 0.6s;
}
.fill100::before {
	--target: 100%;
	animation-delay: 0.6s;
}
.fill75::before {
	--target: 75%;
	animation-delay: 0.2s;
}

.label {
	text-align: left;
	font-size: 0.9em;
	min-width: 160px;
}

@keyframes fill {
	from {
		width: 0;
	}

	to {
		width: var(--target);
	}
}

/* ==========================================================
   🧪 EXPERIMENT BAR VARIANT
   ========================================================== */
.experiment-progress .bar::before {
	background: linear-gradient(90deg, #8effff, #b388ff);
	animation: fillExp 2s ease forwards;
}

.fill-exp1::before {
	--target: 70%;
	animation-delay: 0.2s;
}

.fill-exp2::before {
	--target: 40%;
	animation-delay: 0.4s;
}

.fill-exp75::before {
	--target: 75%;
	animation-delay: 0.2s;
}

.fill-exp95::before {
	--target: 95%;
	animation-delay: 0.2s;
}


@keyframes fillExp {
	from {
		width: 0;
	}

	to {
		width: var(--target);
	}
}

/* ==========================================================
   📘 PROGRESS REPORT STYLES
   ========================================================== */
.fs-item.progress ul {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: center;
}

.fs-item.progress li {
	margin-bottom: 0.4em;
	font-size: 0.9em;
}

.fs-item.progress li strong {
	color: #6c8382;
}

.forecast {
	background: #b0d6d4;
	border-radius: 5%;
}


/* ==========================================================
   🧭 TAB CONTENT VISIBILITY
   ========================================================== */
.fs-content {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	position: absolute;
	inset: 0;
	transition: opacity 0.3s ease;
}

.fs-content.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	position: static;
}

/* ===========================
   ✨ Animation Effects
   =========================== */
/* Base panel transitions */
.fs-content {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(8px);
	transition: max-height 450ms ease, opacity 350ms ease, transform 350ms ease;
}

.fs-content.active {
	max-height: 2000px;
	opacity: 1;
	transform: translateY(0);
}

/* Default child appearance */
.fs-content .fs-item {
	opacity: 0;
	transform: scale(0.96) rotate(-1deg);
	transition: opacity 400ms ease, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* When active, apply wobble */
.fs-content.active .fs-item {
	opacity: 1;
	animation: wobbleIn 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}


/* Jiggle wobble animation */
@keyframes wobbleIn {
	0% {
		opacity: 0;
		transform: scale(0.7) rotate(-5deg) translateY(10px);
	}

	40% {
		opacity: 1;
		transform: scale(1.05) rotate(2deg);
	}

	65% {
		transform: scale(0.97) rotate(-1deg);
	}

	85% {
		transform: scale(1.02) rotate(1deg);
	}

	100% {
		transform: scale(1) rotate(0deg);
	}
}

/* Add staggered timing for each child item */
.fs-content.active .fs-item:nth-child(1) {
	animation-delay: 0ms;
}

.fs-content.active .fs-item:nth-child(2) {
	animation-delay: 70ms;
}

.fs-content.active .fs-item:nth-child(3) {
	animation-delay: 140ms;
}

.fs-content.active .fs-item:nth-child(4) {
	animation-delay: 210ms;
}

.fs-content.active .fs-item:nth-child(5) {
	animation-delay: 280ms;
}

/* Hover and cursor for tabs */
.tab-menu .fs-menu-item {
	cursor: pointer;
	transition: transform 0.25s ease, color 0.25s ease;
	width: 85%;
	margin: 0 auto;
}

.tab-menu .fs-menu-item:hover {
	transform: translateX(4px);
	color: #ffd6ff;
}


/* ==== Load-in Wobble for Sidebars ==== */
@keyframes wobbleIn {
	0% {
		transform: scale(0.9) rotate(-2deg);
		opacity: 0;
	}

	40% {
		transform: scale(1.05) rotate(2deg);
		opacity: 1;
	}

	70% {
		transform: scale(0.97) rotate(-1deg);
	}

	100% {
		transform: scale(1) rotate(0);
		opacity: 1;
	}
}

.fs-wobble-in {
	animation: wobbleIn 0.6s ease both;
}


/* Ensure the grid doesn't collapse while animating */
.fs-grid,
.fs-side2 {
	transition: opacity 0.6s ease, transform 0.4s ease;
}

/* Start hidden but keep layout space reserved */
.fs-grid.fs-grid-c1,
.fs-side2 {
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
}

/* When JS adds .fs-wobble-in, fade them in smoothly */
.fs-wobble-in {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0);
}

/* Content sections stay invisible until one becomes active */
.fs-content {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	inset: 0;
	transition: opacity 0.6s ease;
}

.fs-content.active {
	opacity: 1;
	visibility: visible;
	position: relative;
}

/* Prevent layout jump during load */
body.loading #primary {
	opacity: 0;
	pointer-events: none;
}

body.loaded #primary {
	opacity: 1;
	pointer-events: all;
	transition: opacity 0.6s ease;
}


.nest-notes {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.note-item {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	line-height: 1.5;
}

.note-item i {
	color: var(--accent, #c4bcdd);
	font-size: 1rem;
	margin-top: 0.2rem;
	flex-shrink: 0;
}

.note-item p {
	margin: 0;
	font-size: 0.95rem;
}


/* Secret word - hidden by default; revealed with a small pop animation */
/* Secret word - hidden by default */
.secret-word {
	display: none;
	font-weight: 700;
	letter-spacing: 2px;
	margin: 0.6rem 0;
	color: #2b2b2b;
	font-family: "Mansalva", sans-serif;
}

.secret-entry-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  transition: opacity 0.3s ease;
}
/* visible state (use JS to add .revealed) */
.secret-word.revealed {
	display: block;
	animation: popIn 420ms cubic-bezier(.2, .9, .3, 1) both;
}

#secret-submit{
	cursor: pointer;
	background: #7b5bc8;
	/* matches your palette */
	color: #fff;
	border: none;
	padding: 0.5rem 0.9rem;
	border-radius: 8px;
	font-family: "Mansalva", sans-serif;
	font-size: 1.1rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	position: relative;
	overflow: hidden;
  display: block;
  margin: 0 auto;
}

/* Hover glow + lift */
#secret-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(123, 91, 200, 0.4);
}


#secret-form {
  display: none;
}
/* button styles */
.reveal-btn {
	cursor: pointer;
	background: #7b5bc8;
	/* matches your palette */
	color: #fff;
	border: none;
	padding: 0.5rem 0.9rem;
	border-radius: 8px;
	font-family: "Mansalva", sans-serif;
	font-size: 1.1rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	position: relative;
	overflow: hidden;
}

/* Hover glow + lift */
.reveal-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(123, 91, 200, 0.4);
}

/* Click burst */
.reveal-btn:active::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.4;
	transform: scale(1);
	animation: vril-burst 0.4s ease-out;
	z-index: -1;
}

@keyframes vril-burst {
	0% {
		transform: scale(1);
		opacity: 0.5;
	}

	50% {
		transform: scale(1.8);
		opacity: 0.3;
	}

	100% {
		transform: scale(2.4);
		opacity: 0;
	}
}

body.page-template-fowlsociety-php .ays-poll-each-answer-grid {
	font-size: 10px;
}


/* ===========================
   🧽 TIGHTEN LAYOUT SPACING
   =========================== */

/* Remove default margins/paddings from all elements */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Keep consistent body spacing (remove global extra padding) */
body #primary {
	margin: 0 auto !important;
	padding: 0 !important;
	background: unset !important;
}

/* Grid containers: define consistent gap */
.fs-grid {
	display: grid;
	gap: 0.75rem;
	/* previously 1rem — slightly tighter */
	overflow: visible;
}

/* Remove double padding/margin stacking between fs-items and container */
.fs-grid>* {
	margin: 0;
}

/* Reduce padding inside fs-items */
.fs-item {
	padding: 0.6rem 1rem;
	/* used to be 1rem */
	border-radius: 0.5rem;
	transition: transform 0.3s ease;
}

/* Headings — remove default top/bottom space */
.fs-grid h1,
.fs-grid h2,
.fs-grid h3,
.fs-grid h4 {
	margin: 0.25em 0;
	line-height: 1.1;
}

/* Paragraphs — no top margin */
.fs-grid p {
	margin-top: 0.2em;
	margin-bottom: 0.5em;
	line-height: 1.4;
}

/* Dashboard layout containers */
.fs-dashboard {
	display: grid;
	grid-template-columns: 70% 30%;
	gap: 0.5rem;
}

.fs-dashboard-containter {
	display: grid;
	grid-template-columns: 21% 75%;
	gap: 0.8rem;
	margin: 2rem auto 4rem auto;
	/* used to be 5rem — much tighter */
	width: 100%;
	max-width: 1050px;
	background: white;
	border-radius: 1rem;
	padding: 1rem 1rem 1rem 0;
	/* trimmed from 2rem */
}

/* Tab menu spacing tightened */
.tab-menu {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin-top: 0.5rem;

}

/* Menu items — reduce padding */
.fs-menu-item {
	padding: 0.4rem 0.5rem;
}


.freebie-wrap {
	position: relative;
	display: inline-block;
	/* so it wraps to image width */
}

.monthlyfreebie {
	display: block;
	max-width: 200px;
	margin: 0 auto;
}

img.monthlyfreebie {width: 100px;}

.freebietitle {
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	text-align: center;
	font-weight: bold;
	font-size: 1.2rem;
	background: #E08758;
	width: 200px;
	padding: 5px 10px;
	text-decoration: none;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: 
		transform 0.3s ease,
		box-shadow 0.3s ease,
		background-color 0.3s ease;
}

/* Hover animation */
.freebietitle:hover {
	transform: translate(-50%, -55%) scale(1.05);
	background-color: #f89f6e;
	box-shadow: 0 0 15px rgba(224, 135, 88, 0.6);
}

/* POPUP WRAP */



/* Responsive margin adjustments */
@media (max-width: 900px) {
	body #primary {
		margin: 0.5rem auto !important;
	}
    
    	.fs-side2 {
        grid-auto-flow: dense; /* allows better packing */

	}

    .brew {
      grid-row: span 2;
    }
}

@media (max-width: 600px) {
	.fs-dashboard {
		grid-template-columns: 1fr;
	}

	.fs-dashboard-containter {
		grid-template-columns: 1fr;
		padding: 1rem;
		margin: 1.5rem auto;
	}

	.fs-side2 {
		margin-top: 2rem !important;
	}
    
    .quailofthemonth {
      display: flex;
      flex-direction: column; /* stack image + text */
      align-items: center;    /* center horizontally */
      justify-content: center; /* center vertically if container has height */
      text-align: center;     /* ensure text lines are centered */
        margin-top: 7rem !important;
    }

}

.reveal-row {
	display: flex;
	align-items: center;
	/* vertically align both sides */
	justify-content: space-between;
	/* or 'flex-start' if you prefer them snug */
	gap: 1rem;
	/* space between left and right */
}

.revealleft,
.revealright {
	flex: 1;
	/* make both halves share space equally */
}

.forminator-poll {
	padding: 1rem !important;
}


.monthlypoll .forminator-question {
	font-size: 12px !important;
	line-height: 1rem !important;
}

.monthlypoll .forminator-poll--question {
	color: #000 !important;
}

.monthlypoll .forminator-radio-label {
	color: #000 !important;
}

.monthlypoll .forminator-radio span {
	font-size: 12px !important;
	line-height: 1rem !important;
}


/* ===============================
   🪶 Fix Forminator poll scaling
   =============================== */

.fs-item.monthlypoll {
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.fs-item.monthlypoll form {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
	margin: 0 auto;
}

/* prevent Forminator columns from forcing extra width */
.fs-item.monthlypoll .forminator-poll--grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

/* each answer stays compact and responsive */
.fs-item.monthlypoll .forminator-poll--column {
	flex: 1 1 80px;
	/* shrink and grow as needed */
	max-width: 90px;
	/* cap each column width */
	text-align: center;
}

.fs-item.monthlypoll .forminator-radio-image {
	width: 100%;
	height: auto;
	border-radius: 8px;
	transition: transform 0.2s ease;
}

.fs-item.monthlypoll .forminator-radio-image:hover {
	transform: scale(1.05);
}

/* button fits parent */
.fs-item.monthlypoll .forminator-button {
	width: auto;
	margin: 0.75rem auto 0;
	display: block;
}

/* shrink text and spacing a little */
.fs-item.monthlypoll h3,
.fs-item.monthlypoll .forminator-poll--question {
	font-size: 1.1rem;
	text-align: center;
	margin-bottom: 0.5rem;
}

/* optional: keep the edit link tidy in admin view */
.fs-item.monthlypoll .forminator-edit-module {
	display: none;
}

/* responsive tweak for mobile polls */
@media (max-width: 600px) {
	.fs-item.monthlypoll .forminator-poll--column {
		flex: 1 1 40%;
		max-width: 120px;
	}
}


/* === POLL IMAGE CARDS === */
.forminator-poll--grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

/* Hide actual radio buttons */
.forminator-radio input[type="radio"] {
	display: none;
}


/* Hover effect */
.forminator-radio:hover .forminator-radio-image {
	transform: scale(1.04);
	border-color: #88f0ff;
	box-shadow: 0 0 12px rgba(136, 240, 255, 0.6);
	filter: brightness(1);
}

/* Selected (checked) state */
.forminator-radio input[type="radio"]:checked+.forminator-radio-image {
	border-color: #00ffe1;
	box-shadow: 0 0 16px rgba(0, 255, 225, 0.9);
	filter: brightness(1.05);
	transform: scale(1.05);
}

/* Optional: smoother glow transitions */
.forminator-radio-image {
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, filter 0.25s ease;
}


/* === General Form Field Styling === */
form.forminator-ui input[type="text"],
form.forminator-ui input[type="email"],
form.forminator-ui textarea {
	width: 100%;
	background: rgba(255, 255, 255, 0.77);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	color: #76a39c;
	font-size: 1rem;
	padding: 0.75rem 1rem;
	transition: all 0.25s ease;
}

/* Placeholder (pretext) styling */
form.forminator-ui input::placeholder,
form.forminator-ui textarea::placeholder {
	color: #76a39c;
	/* soft grey */
	opacity: 0.8;
}

/* Focused input */
form.forminator-ui input:focus,
form.forminator-ui textarea:focus {
	border-color: #43a394;
	box-shadow: 0 0 10px rgba(67, 163, 148, 0.4);
	outline: none;
}

/* === Submit Button === */
form.forminator-ui .forminator-button-submit {
	background: #43a394;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-weight: 600;
	padding: 0.7rem 1.5rem;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.15s ease;
	width: 120px;
	margin: 10px auto;
	text-align: center;
}

/* Hover and active button states */
form.forminator-ui .forminator-button-submit:hover {
	background: #3b9486;
	transform: translateY(-2px);
}

form.forminator-ui .forminator-button-submit:active {
	background: #2e7b6e;
	transform: translateY(0);
}

.forminator-field .forminator-radio .forminator-radio-image {
	width: 100% !important;
	height: 100% !important;
}

.forminator-poll-footer {
	text-align: center;
}


@media (max-width: 899px) and (min-width: 768px) {
	.fs-dashboard {
		display: grid;
		grid-template-columns: 60% 20%;
		gap: 0.5rem;
	}

	.fs-side2 {
		padding: .2rem !important;
                grid-auto-flow: dense; /* allows better packing */

	}

	.fs-content.active {
		margin-left: .5rem !important;
	}
    
}

/* ==============================
   🪶 Poll visibility by device
   ============================== */

/* Default: desktop view */
.monthlypoll.mobileonly {
	display: none !important;
	/* hide the mobile poll */
}

@media (max-width: 600px) {

	/* On mobile, swap them */
	.fs-item.monthlypoll.bottom-jusify {
		display: none !important;
		/* hide desktop poll */
	}

	.monthlypoll.mobileonly {
		display: block !important;
		/* show mobile poll */
		width: 100%;
		margin: 1.5rem 0;
		margin-top: 4rem  !important;
	}
}


/* ===============================
   Fowl Society – Quiz Layout Adjust
   =============================== */
.page-template-fowlsociety .forminator-result {
	display: flex;
	flex-direction: column-reverse;
	/* Puts image below text */
	align-items: center;
	text-align: center;
	gap: 1rem;
}

/* Limit image size and ensure it's centered */
.page-template-fowlsociety .forminator-result--image {
	max-width: 300px;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

/* Improve readability of the text above */
.page-template-fowlsociety .forminator-result p {
	font-size: 1.1rem;
	line-height: 1.5;
	margin: 0.5rem 0;
}

/* Make headings in the result stand out */
.page-template-fowlsociety .forminator-result strong {
	display: block;
	font-size: 1.3rem;
	margin-bottom: 0.3rem;
}

/* ==========================================
   🪶 Fowl Society — Center Forminator Quiz
   (Intro + Result)
   ========================================== */
.page-template-fowlsociety .forminator-quiz,
.page-template-fowlsociety .forminator-custom-form {
	text-align: center;
}

/* ---------- Intro Screen ---------- */
.page-template-fowlsociety .forminator-quiz--image,
.page-template-fowlsociety .forminator-custom-form img {
	display: block;
	margin: 0 auto 1rem auto;
	max-width: 300px;
	width: 100%;
	height: auto;
}

/* Center all text on intro (title + description) */
.page-template-fowlsociety .forminator-quiz-intro,
.page-template-fowlsociety .forminator-quiz--title,
.page-template-fowlsociety .forminator-quiz--description {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Results Screen ---------- */
.page-template-fowlsociety .forminator-result {
	display: flex;
	flex-direction: column-reverse;
	/* put text above, image below */
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 1rem;
}

.page-template-fowlsociety .forminator-result--image {
	display: block;
	margin: 0 auto -2rem auto;
	max-width: 300px;
	width: 100%;
	height: auto;
}

.page-template-fowlsociety .forminator-result strong,
.page-template-fowlsociety .forminator-result h1,
.page-template-fowlsociety .forminator-result h2,
.page-template-fowlsociety .forminator-result h3,
.page-template-fowlsociety .forminator-result p {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.page-template-fowlsociety .forminator-result p {
	line-height: 1.5;
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
}


/* ===============================
   Fowl Society – Image Motion & Hover Feedback
   =============================== */
.page-template-fowlsociety img {
	transition: transform 0.5s ease, filter 0.4s ease;
	transform-origin: center;
}

/* ✦ Gentle wobble for all images */
.page-template-fowlsociety img:hover {
	animation: fs-wobble 1.2s ease infinite;
}

/* ✦ Clickable ones (links, popup triggers, etc.) lift + glow instead */
.page-template-fowlsociety a img:hover,
.page-template-fowlsociety .popup-trigger:hover img,
.page-template-fowlsociety img.fs-clickable:hover {
	animation: none;
	transform: translateY(-6px) scale(1.03);
	filter: brightness(1.1) drop-shadow(0 0 10px rgba(255, 240, 200, 0.35));
}

/* === Wobble keyframes === */
@keyframes fs-wobble {

	0%,
	100% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(1.5deg);
	}

	50% {
		transform: rotate(-1.5deg);
	}

	75% {
		transform: rotate(1deg);
	}
}


.jp-carousel-photo-icons-container {
  display: none !important;
}

/* Make popup scrollable when content exceeds screen height */
.page-template-fowlsociety .fs-popup-content {
  max-height: 90vh !important; /* never exceed screen height */
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  position: relative;
  padding-top: 48px; /* space so close button isn't covered */
}

/* Keep close button fixed at the top-right of the popup */
.page-template-fowlsociety .fs-popup-close {
  position: sticky !important;
  top: 8px;
  right: 12px;
  z-index: 999;
}

/* Optional: nice minimal scrollbar for desktop */
.page-template-fowlsociety  .fs-popup-content::-webkit-scrollbar {
  width: 11px;
}
.page-template-fowlsociety  .fs-popup-content::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);
}
.page-template-fowlsociety  .fs-popup-content::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
}



/* Target ONLY the quiz inside the freebie popup */
.page-template-fowlsociety  #forminator-module-3579 .forminator-quiz--result .forminator-result {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  text-align: center;
}

/* Image below the text */
.page-template-fowlsociety #forminator-module-3579 .forminator-result--image {
  order: 2 !important;
  max-width: 280px;
  margin-top: 16px;
  margin-bottom: 0;
  display: block;
}

/* Text first */
.page-template-fowlsociety  #forminator-module-3579 .forminator-result p,
.page-template-fowlsociety #forminator-module-3579 .forminator-result strong {
  order: 1 !important;
}

/* Popup background to The Sauce (your warm cocoa salmon) */
.page-template-fowlsociety  .fs-popup-content {
  background-color: var(--fs-popup-bg) !important;
    color: #fff !important;
  border-radius: 14px;
  padding: 24px 32px;
  max-width: 700px;
  box-shadow: 0 14px 50px rgba(0,0,0,0.4);
}

/* Close button stays visible (white) */
.page-template-fowlsociety .fs-popup-close {
  color: #fff !important;
}

/* --- Apply Mansalva to the Result Title Words (only this quiz + only in popup) --- */
.page-template-fowlsociety #forminator-module-3579 .forminator-result strong {
  font-family: "Mansalva", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 1.45em;
  display: block;
  margin-bottom: 4px;
  color: #fff; /* just to ensure it doesn't get washed out */
}

/* --- Button Theme Override (remove Forminator teal #27BDB5) --- */
.page-template-fowlsociety #forminator-module-3579 .forminator-button,
.page-template-fowlsociety #forminator-module-3579 button.forminator-button {
  background-color: #4a2d23 !important; /* cozy rich cocoa tone */
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important; /* soft but not bubble-gum */
  padding: 12px 22px !important;
  font-size: 1rem !important;
  text-transform: none !important;
  font-family: inherit !important;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

/* Hover = a little “approach the cauldron” energy */
.page-template-fowlsociety #forminator-module-3579 .forminator-button:hover,
.page-template-fowlsociety #forminator-module-3579 button.forminator-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  background-color: #3c221b !important;
}

/* Disabled state (when waiting on selection) */
.page-template-fowlsociety #forminator-module-3579 .forminator-button:disabled {
  background-color: #7a6a64 !important;
  color: #e9e0da !important;
  cursor: not-allowed;
}





/* Wrap and center password form */
.post-password-form {
  background: #ffffff;
  max-width: 480px;
  margin: 120px auto !important;
  padding: 40px 32px;
  border-radius: 10px;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.18);
  text-align: center;
}

/* Label Text */
.post-password-form label {
  font-size: 18px;
  font-weight: 600;
  color: #4a3f36;
  margin-bottom: 14px;
  display: block;
}

/* Password Input */
.post-password-form input[type="password"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #cfc8bc;
  border-radius: 6px;
  font-size: 16px;
  margin-bottom: 16px;
  color: #4a3f36;
  background: #fdfbf9;
}

/* Submit Button */
.post-password-form input[type="submit"] {
  background: #4a7c75;
  color: #f4efe7;
  padding: 10px 22px;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s ease;
}

.post-password-form input[type="submit"]:hover {
  background: #5e9d94;
}

/* Keep it centered on all screens */
.post-password-form p {
  margin-top: 0;
}



/* FORM IUNPU */
.fs-dashboard-containter input,
.fs-dashboard-containter textarea,
.fs-dashboard-containter select {

  background-color: rgba(255, 255, 255, 0.77);
  color: #76a39c;

  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;

  padding: 12px 16px;
  font-size: 16px;
  font-family: var(--font-body);

  box-sizing: border-box;
  width: 100%;

  transition: all 0.25s ease;
}

.fs-dashboard-containterinput:hover,
.fs-dashboard-containter textarea:hover,
.fs-dashboard-containterselect:hover {
  border-color: var(--fowl-accent-soft);
}

.fs-dashboard-containter input:focus,
.fs-dashboard-containter textarea:focus,
.fs-dashboard-containter select:focus {
  outline: none;
  border-color: var(--fowl-accent);
  box-shadow: 0 0 0 2px var(--fowl-glow);
}