/* Toucan – a LearnDash értékelések (WDM Ratings and Reviews) és a kurzusok leckelistájának stílusa.
   A korábbi WPCode-snippet (#32165 „Toucan - Ratings and Reviews stílus”) változatlan átvétele. */
/* ==============================================================
   TOUCAN — Ratings and Reviews (WDM Course Reviews) egyedi stílus
   v3 — javított verzió
   ============================================================== */

/* --------------------------------------------------------------
   0. Betűtípusok — hagyd ki, ha a Poppins/Montserrat már be van
   töltve az oldalon (valószínűleg igen, ha az arculatot követi)
   -------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Poppins:wght@400;500;900&display=swap');

/* --------------------------------------------------------------
   1. Elrendezés — a tanfolyam tartalma és az értékelések
   középre igazítása (az Elementor Full Width miatt szélre tolt
   tartalom korrigálása). A fenti gamifikációs/Elementor blokkhoz
   nem nyúlunk.
   -------------------------------------------------------------- */
#course-reviews-section,
.ld-item-list.ld-lesson-list {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

/* --------------------------------------------------------------
   2. Ratings and Reviews — fő konténer
   -------------------------------------------------------------- */
#course-reviews-section {
	background: #FFFFFF;
	border-radius: 20px;
	box-shadow: 0 4px 24px rgba(39, 56, 62, 0.08);
	padding: 40px 32px;
	margin-top: 48px;
	margin-bottom: 48px;
	font-family: 'Poppins', sans-serif;
}

#course-reviews-section h3 {
	font-family: 'Poppins', sans-serif;
	font-weight: 900;
	font-size: 2.25rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #27383E;
	margin: 0 0 32px 0;
}

/* --------------------------------------------------------------
   3. Összegző sáv: átlag pontszám / hisztogram / "Write a Review"
   -------------------------------------------------------------- */
#course-reviews-section .review-top-section {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px;
	padding-bottom: 32px;
	margin-bottom: 32px;
	border-bottom: 2px solid rgba(39, 56, 62, 0.08);
}

#course-reviews-section .review-top-col:nth-child(1) {
	flex: 0 0 200px;
	text-align: center;
}

#course-reviews-section .review-top-col:nth-child(2) {
	flex: 1 1 280px;
}

#course-reviews-section .review-top-col:nth-child(3) {
	flex: 0 0 240px;
	text-align: center;
}

#course-reviews-section .review-top-star-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

#course-reviews-section .reviews-avg {
	font-family: 'Poppins', sans-serif;
	font-weight: 900;
	font-size: 3.25rem;
	line-height: 1.1;
	color: #7900FF;
}

#course-reviews-section .reviews-avg-label {
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #27383E;
	opacity: 0.65;
}

#course-reviews-section .reviews-total-wrap {
	margin-top: 10px;
	font-family: 'Poppins', sans-serif;
	font-size: 1.05rem;
	color: #27383E;
	opacity: 0.75;
}

#course-reviews-section .reviews-total-wrap .reviews-total {
	font-weight: 700;
	opacity: 1;
}

/* Csillag-eloszlás sorok (5,4,3,2,1) */
#course-reviews-section .review-split-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

#course-reviews-section .review-split-title {
	width: 16px;
	text-align: right;
	font-weight: 700;
	font-size: 1rem;
	color: #27383E;
}

#course-reviews-section .review-split-percent {
	position: relative;
	flex: 1;
	height: 8px;
	background: #EDEDED;
	border-radius: 6px;
	overflow: hidden;
}

#course-reviews-section .review-split-percent-inner-1 {
	background: transparent;
}

#course-reviews-section .review-split-percent-inner-2 {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: #7900FF;
	border-radius: 6px;
	transition: width 0.3s ease;
}

#course-reviews-section .review-split-count {
	width: 28px;
	font-size: 0.95rem;
	font-weight: 600;
	color: #27383E;
	opacity: 0.7;
}

/* "What's your experience?" / "Your Rating" + gomb (mindkét
   állapotban: not-rated -> "Write a Review", already-rated ->
   "Edit your Review") */
#course-reviews-section .review-top-desc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
}

#course-reviews-section .review-top-desc span {
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 1.15rem;
	color: #27383E;
}

#course-reviews-section button.write-a-review {
	background-color: #00FF3C;
	color: #27383E;
	font-family: 'Poppins', sans-serif;
	font-weight: 900;
	font-size: 1.05rem;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border: none;
	border-radius: 999px;
	padding: 12px 24px;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 255, 60, 0.35);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#course-reviews-section button.write-a-review:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 255, 60, 0.45);
}

/* --------------------------------------------------------------
   4. Csillag ikonok — mindenhol érvényes (összegző sáv, popup,
   egyedi review-kártyák). Nincs körvonal/árnyék: egy telítettebb
   arany-sárga árnyalat adja a kontrasztot fehér háttéren, körvonal
   nélkül (a körvonal vágta le korábban a csillagok tetejét).
   -------------------------------------------------------------- */
.rating-stars .fa-star {
	color: #FFD000;
}

.rating-stars .fa-star-o {
	color: #d9d9d9;
}

/* --------------------------------------------------------------
   5. Rendezés / szűrés legördülők
   -------------------------------------------------------------- */
#course-reviews-section .filter-options {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin-bottom: 24px;
}

#course-reviews-section .select {
	position: relative;
}

#course-reviews-section .select-label {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #7900FF;
}

#course-reviews-section .select-text {
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 1.05rem;
	color: #27383E;
	background: transparent;
	border: none;
	border-bottom: 2px solid rgba(39, 56, 62, 0.2);
	padding: 8px 24px 8px 4px;
	cursor: pointer;
}

#course-reviews-section .select-bar {
	position: relative;
	display: block;
	width: 100%;
}

#course-reviews-section .select-bar::before,
#course-reviews-section .select-bar::after {
	content: '';
	position: absolute;
	bottom: 0;
	width: 0;
	height: 2px;
	background: #00FF3C;
	transition: 0.3s ease all;
}

#course-reviews-section .select-bar::before { left: 50%; }
#course-reviews-section .select-bar::after { right: 50%; }

#course-reviews-section .select:focus-within .select-bar::before,
#course-reviews-section .select:focus-within .select-bar::after {
	width: 50%;
}

/* --------------------------------------------------------------
   6. "Nincs értékelés" placeholder / Show more
   Figyelem: a :not(.review-comments-wrap) rész szükséges, hogy ez
   a szabály csak az üres állapotra vonatkozzon, ne a valódi
   review-kártyákra.
   -------------------------------------------------------------- */
#course-reviews-section .review_listing > div:not(.review-comments-wrap) {
	text-align: center;
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-style: italic;
	font-size: 1.05rem;
	color: #27383E;
	opacity: 0.55;
	padding: 32px 0;
}

#course-reviews-section .load_more_reviews {
	display: inline-block;
	margin-top: 16px;
	background: #7900FF;
	color: #FFFFFF;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	padding: 10px 22px;
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.15s ease;
}

#course-reviews-section .load_more_reviews:hover {
	background: #5e00cc;
}

/* --------------------------------------------------------------
   7. Egyedi review-kártyák (beküldött értékelések listája)
   -------------------------------------------------------------- */
#course-reviews-section .review-comments-wrap {
	margin-bottom: 24px;
}

#course-reviews-section .comment-review-inner {
	background: #FAFAFA;
	border: 1px solid rgba(39, 56, 62, 0.08);
	border-radius: 16px;
	padding: 24px;
}

#course-reviews-section .review-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 12px;
}

#course-reviews-section .review-author-info {
	display: flex;
	align-items: center;
	margin-right: auto;
}

/* A kérésre a profilkép el van rejtve a review-kártyákon */
#course-reviews-section .review-author-img-wrap {
	display: none;
}

#course-reviews-section .review-author-name {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	color: #27383E;
}

#course-reviews-section .wdm-review-age {
	font-family: 'Poppins', sans-serif;
	font-size: 0.9rem;
	color: #27383E;
	opacity: 0.55;
}

#course-reviews-section .review-title {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-weight: 900;
	font-size: 1.3rem;
	color: #27383E;
	margin-bottom: 6px;
}

#course-reviews-section .review-desc {
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 1.1rem;
	line-height: 1.6;
	color: #27383E;
	opacity: 0.85;
	margin: 0 0 16px 0;
}

#course-reviews-section .review-image-tile-section img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 10px;
	margin-right: 8px;
	cursor: pointer;
}

/* Kép nagyítás popup (lightbox) — csak a látható elemek
   színezése/mérete, a megnyitás/bezárás logikáját (display) a
   plugin JS-e kezeli, azt nem írjuk felül */
#course-reviews-section .preview-modal .close {
	color: #FFFFFF;
	font-size: 1.8rem;
	font-weight: 700;
	cursor: pointer;
}

#course-reviews-section .preview-modal-content img.demo {
	max-width: 90vw;
	max-height: 85vh;
	border-radius: 12px;
}

#course-reviews-section .review-footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

#course-reviews-section .review-helpful-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}

#course-reviews-section .review-helpful-text {
	font-family: 'Poppins', sans-serif;
	font-size: 1rem;
	color: #27383E;
	opacity: 0.7;
}

#course-reviews-section .review-helpful-icon-wrap img {
	width: 18px;
	height: 18px;
	opacity: 0.6;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

#course-reviews-section .review-helpful-icon-wrap:hover img {
	opacity: 1;
	transform: scale(1.15);
}

#course-reviews-section .review-helpful-count {
	font-family: 'Poppins', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: #7900FF;
}

#course-reviews-section .reply_to_review_link {
	color: #27383E;
	opacity: 0.5;
	font-size: 1.1rem;
	transition: opacity 0.15s ease, color 0.15s ease;
}

#course-reviews-section .reply_to_review_link:hover {
	opacity: 1;
	color: #7900FF;
}

/* --------------------------------------------------------------
   8. Popup — értékelés kérő / értékelés írás felugró ablak
   (mindkét lépés: csillagozás ÉS cím+szöveg beírása)

   A "position: relative" a dobozon + "position: static" a
   navigáción + "position: absolute" (a dobozhoz rögzítve, nem a
   képernyőhöz) a bezárásnál garantálja, hogy semmi ne csússzon
   egymásra vagy ki a dobozból, függetlenül a tartalom hosszától.
   -------------------------------------------------------------- */
.rrf-modal-content.modal {
	position: relative !important;
	background: #FFFFFF;
	border-radius: 20px;
	box-shadow: 0 12px 48px rgba(39, 56, 62, 0.25);
	padding: 44px 32px 32px;
	max-width: 460px;
	width: 90%;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

.rrf-modal-content .modal-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.rrf-modal-content .prompt-text {
	font-family: 'Poppins', sans-serif;
	font-weight: 900;
	font-size: 1.7rem;
	color: #27383E;
	text-align: center;
	margin-bottom: 24px;
}

/* Ha a prompt-text üres (pl. a "Thanks for submitting" lépésen),
   ne hagyjon felesleges üres helyet */
.rrf-modal-content .prompt-text:empty {
	margin-bottom: 0;
}

/* "Delete Your Review?" megerősítő popup */
.rrf-modal-content.delete-review .modal-container h4 {
	font-family: 'Poppins', sans-serif;
	font-weight: 900;
	font-size: 1.6rem;
	color: #27383E;
	text-align: center;
	margin: 0;
}

.rrf-modal-content.delete-review .review-text {
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 1.05rem;
	line-height: 1.5;
	color: #27383E;
	opacity: 0.8;
	text-align: center;
	margin-top: 16px;
}

.rrf-modal-content .modal-navigation button.delete-close {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 999px;
	padding: 10px 24px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.rrf-modal-content .modal-navigation button.delete-close:not(.delete-confirm) {
	background: transparent;
	color: #27383E;
	border: 2px solid rgba(39, 56, 62, 0.2);
}

.rrf-modal-content .modal-navigation button.delete-close:not(.delete-confirm):hover {
	border-color: #7900FF;
	color: #7900FF;
}

.rrf-modal-content .modal-navigation button.delete-close.delete-confirm {
	background-color: #FF0000;
	color: #FFFFFF;
	border: none;
}

.rrf-modal-content .modal-navigation button.delete-close.delete-confirm:hover {
	background-color: #cc0000;
}

/* "Thanks for submitting the review!" záró popup */
.rrf-modal-content.review-completion .modal-container h3 {
	font-family: 'Poppins', sans-serif;
	font-weight: 900;
	font-size: 1.6rem;
	color: #27383E;
	text-align: center;
	margin: 0 0 8px 0;
}

/* A beküldött cím + szöveg előnézete (a prompt-text és a
   rating-container kivételével minden közvetlen gyerek div) */
.rrf-modal-content.review-completion .modal-container > div:not(.prompt-text):not(.rating-container) {
	margin-top: 20px;
	text-align: center;
	font-family: 'Poppins', sans-serif;
	font-size: 1.05rem;
	line-height: 1.5;
	color: #27383E;
}

.rrf-modal-content.review-completion .modal-container > div:not(.prompt-text):not(.rating-container) strong {
	display: block;
	margin-bottom: 4px;
	font-weight: 900;
	font-size: 1.15rem;
}

/* Cím + szöveg mezők (2. lépés: "Why did you leave this rating?") */
.rrf-modal-content .review-title.review-headline,
.rrf-modal-content .review-description.review-details {
	width: 100%;
	margin-top: 20px;
	text-align: left;
}

.rrf-modal-content .review-title.review-headline label,
.rrf-modal-content .review-description.review-details label {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	color: #27383E;
	margin-bottom: 6px;
}

.rrf-modal-content input[name="review-title"],
.rrf-modal-content textarea[name="review-details"] {
	width: 100%;
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 1.05rem;
	color: #27383E;
	background: #FAFAFA;
	border: 2px solid rgba(39, 56, 62, 0.1);
	border-radius: 12px;
	padding: 12px 14px;
	box-sizing: border-box;
	transition: border-color 0.15s ease;
}

.rrf-modal-content input[name="review-title"]:focus,
.rrf-modal-content textarea[name="review-details"]:focus {
	outline: none;
	border-color: #7900FF;
}

.rrf-modal-content textarea[name="review-details"] {
	resize: vertical;
	min-height: 100px;
}

.rrf-modal-content .wdm_rrf_remaining_characters {
	font-family: 'Poppins', sans-serif;
	font-size: 0.9rem;
	color: #27383E;
	opacity: 0.5;
	text-align: right;
	margin-top: 4px;
}

/* Navigáció (Back / Save & Continue) — normál dokumentumfolyásba
   kényszerítve (!important, mert a plugin saját CSS-e desktopon
   nagyobb specificitással abszolút pozicionálhatja), és bőven
   hely fent, elválasztó vonallal, hogy sose csússzon rá a
   fölötte lévő tartalomra */
.rrf-modal-content .modal-navigation {
	position: static !important;
	top: auto !important;
	bottom: auto !important;
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 40px !important;
	padding-top: 24px;
	border-top: 2px solid rgba(39, 56, 62, 0.08);
	width: 100%;
}

.rrf-modal-content .modal-navigation button.next,
.rrf-modal-content .modal-navigation button.rrf-review-submission {
	background-color: #00FF3C;
	color: #27383E;
	font-family: 'Poppins', sans-serif;
	font-weight: 900;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border: none;
	border-radius: 999px;
	padding: 12px 28px;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rrf-modal-content .modal-navigation button.next:not(:disabled):hover,
.rrf-modal-content .modal-navigation button.rrf-review-submission:not(:disabled):hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 255, 60, 0.45);
}

.rrf-modal-content .modal-navigation button.next:disabled {
	background: #EDEDED;
	color: #a5a5a5;
	cursor: not-allowed;
	box-shadow: none;
}

.rrf-modal-content .modal-navigation button.previous {
	background: transparent;
	color: #27383E;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border: 2px solid rgba(39, 56, 62, 0.2);
	border-radius: 999px;
	padding: 10px 24px;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.rrf-modal-content .modal-navigation button.previous:hover {
	border-color: #7900FF;
	color: #7900FF;
}

/* Bezárás — a dobozhoz (nem a képernyőhöz) rögzítve, !important-
   tal, hogy a plugin saját (feltehetően más sarokhoz igazító)
   szabálya semmiképp ne vigye ki a dobozon kívülre */
.rrf-modal-content .close-modal {
	position: absolute !important;
	top: 16px !important;
	right: 16px !important;
	left: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	z-index: 5;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	color: #27383E;
	opacity: 0.5;
	text-decoration: none;
	transition: opacity 0.15s ease, color 0.15s ease;
}

.rrf-modal-content .close-modal:hover {
	opacity: 1;
	color: #7900FF;
}

/* Best-effort: ha van külön sötétítő háttér (overlay) a popup
   mögött, valószínűleg ezek egyike a class neve — ellenőrizd
   Inspectorban popup nyitáskor, és igazítsd, ha más a neve. */
.reveal-modal-bg,
.rrf-modal-bg,
.rrfmodal-bg,
.modal-overlay {
	background: rgba(39, 56, 62, 0.75) !important;
}

/* --------------------------------------------------------------
   9. Mobil nézet
   -------------------------------------------------------------- */
@media (max-width: 768px) {
	#course-reviews-section,
	.ld-item-list.ld-lesson-list {
		padding-left: 16px;
		padding-right: 16px;
	}

	#course-reviews-section {
		padding: 32px 20px;
	}

	#course-reviews-section .review-top-section {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	#course-reviews-section .review-top-col:nth-child(1),
	#course-reviews-section .review-top-col:nth-child(2),
	#course-reviews-section .review-top-col:nth-child(3) {
		flex: 1 1 auto;
	}

	#course-reviews-section .review-head {
		justify-content: center;
	}

	#course-reviews-section .review-author-info {
		margin-right: 0;
	}
}