/* =============================================================
   Freedom Fuel Reviews — Okendo-inspired UX
   Namespaced with .ffw-reviews to avoid collisions with theme CSS.
   ============================================================= */

.ffw-reviews {
	--ffw-accent: #ffb400;
	--ffw-border: #e5e7eb;
	--ffw-text: #111;
	--ffw-muted: #6b7280;
	--ffw-bg-soft: #f9fafb;
	--ffw-radius: 12px;
	--ffw-gap: 1.25rem;

	font-family: inherit;
	color: var(--ffw-text);
	margin: 3rem 0;
}

.ffw-reviews *,
.ffw-reviews *::before,
.ffw-reviews *::after { box-sizing: border-box; }

/* =============================================================
   Dark mode — add `ffw-reviews--on-dark` to the widget root
   (or enable via the `prefers-color-scheme` block below) to
   recolor the entire widget for a black / near-black background.
   ============================================================= */
.ffw-reviews--on-dark,
.ffw-reviews.ffw-reviews--on-dark .ffw-reviews__summary,
.ffw-reviews.ffw-reviews--on-dark .ffw-review-form {
	--ffw-border: rgba(255, 255, 255, 0.14);
	--ffw-text: #f5f5f5;
	--ffw-muted: #a1a1aa;
	--ffw-bg-soft: rgba(255, 255, 255, 0.04);
}

/* Surfaces: make cards transparent so the black page shows through. */
.ffw-reviews--on-dark .ffw-reviews__summary,
.ffw-reviews--on-dark .ffw-chip,
.ffw-reviews--on-dark .ffw-reviews__sort select {
	background: transparent;
	color: var(--ffw-text);
}

.ffw-reviews--on-dark .ffw-reviews__sort select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23f5f5f5' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .75rem center;
	background-size: 10px;
}

/* Star baseline color on dark = a dim gray that still reads on black. */
.ffw-reviews--on-dark .ffw-stars { color: rgba(255, 255, 255, 0.2); }
.ffw-reviews--on-dark .ffw-star--half {
	background: linear-gradient(90deg, var(--ffw-accent) 50%, rgba(255,255,255,0.2) 50%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Distribution bars */
.ffw-reviews--on-dark .ffw-reviews__dist-bar { background: rgba(255, 255, 255, 0.1); }
.ffw-reviews--on-dark .ffw-reviews__dist-row:hover,
.ffw-reviews--on-dark .ffw-reviews__dist-row:focus-visible {
	background: rgba(255, 255, 255, 0.05);
}

/* CTA / submit / load-more — invert: white pill on black bg */
.ffw-reviews--on-dark .ffw-reviews__write-btn,
.ffw-reviews--on-dark .ffw-reviews__load-more,
.ffw-reviews--on-dark .ffw-review-form__submit {
	background: #fff;
	color: #111;
}
.ffw-reviews--on-dark .ffw-reviews__write-btn:hover,
.ffw-reviews--on-dark .ffw-reviews__load-more:hover,
.ffw-reviews--on-dark .ffw-review-form__submit:hover {
	background: #e5e5e5;
}

/* Chips */
.ffw-reviews--on-dark .ffw-chip { border-color: var(--ffw-border); }
.ffw-reviews--on-dark .ffw-chip:hover { border-color: #fff; }
.ffw-reviews--on-dark .ffw-chip--active {
	background: #fff;
	color: #111;
	border-color: #fff;
}

/* Review list items */
.ffw-reviews--on-dark .ffw-review { border-color: var(--ffw-border); }
.ffw-reviews--on-dark .ffw-review__author { color: var(--ffw-text); }
.ffw-reviews--on-dark .ffw-review__title { color: var(--ffw-text); }
.ffw-reviews--on-dark .ffw-review__content { color: var(--ffw-text); }
.ffw-reviews--on-dark .ffw-review__meta,
.ffw-reviews--on-dark .ffw-review__date { color: var(--ffw-muted); }

/* Verified badge stays readable on dark */
.ffw-reviews--on-dark .ffw-review__badge {
	background: rgba(16, 185, 129, 0.15);
	color: #6ee7b7;
}

/* Helpful button */
.ffw-reviews--on-dark .ffw-review__helpful {
	color: var(--ffw-text);
	border-color: var(--ffw-border);
}
.ffw-reviews--on-dark .ffw-review__helpful:hover { border-color: #fff; }

/* Empty / placeholder states */
.ffw-reviews--on-dark .ffw-reviews__empty {
	background: var(--ffw-bg-soft);
	color: var(--ffw-muted);
}

/* Form inputs on dark */
.ffw-reviews--on-dark .ffw-review-form__field input[type="text"],
.ffw-reviews--on-dark .ffw-review-form__field input[type="email"],
.ffw-reviews--on-dark .ffw-review-form__field textarea {
	background: rgba(255, 255, 255, 0.04);
	border-color: var(--ffw-border);
	color: var(--ffw-text);
}
.ffw-reviews--on-dark .ffw-review-form__field input::placeholder,
.ffw-reviews--on-dark .ffw-review-form__field textarea::placeholder {
	color: var(--ffw-muted);
}

/* Rating picker base stars on dark */
.ffw-reviews--on-dark .ffw-rating-input__star { color: rgba(255, 255, 255, 0.2); }

/* Media drop zone on dark */
.ffw-reviews--on-dark .ffw-media-drop { border-color: var(--ffw-border); }
.ffw-reviews--on-dark .ffw-media-drop--dragover {
	background: rgba(255, 180, 0, 0.1);
	border-color: var(--ffw-accent);
}
.ffw-reviews--on-dark .ffw-media-drop__btn { color: var(--ffw-muted); }
.ffw-reviews--on-dark .ffw-media-drop__btn:hover { color: var(--ffw-text); }
.ffw-reviews--on-dark .ffw-media-drop__item { background: var(--ffw-bg-soft); }

/* Dialog: keep its own white card so the form has contrast, unless
   --on-dark is applied — then the dialog card also flips to dark. */
.ffw-reviews--on-dark .ffw-review-form { background: #111; }
.ffw-reviews--on-dark .ffw-review-form__close { color: var(--ffw-muted); }
.ffw-reviews--on-dark .ffw-review-form__close:hover { color: var(--ffw-text); }

/* -------- Summary -------- */
.ffw-reviews__summary {
	display: grid;
	grid-template-columns: minmax(180px, 260px) 1fr auto;
	gap: 2rem;
	align-items: center;
	padding: 1.5rem;
	border: 1px solid var(--ffw-border);
	border-radius: var(--ffw-radius);
	background: #fff;
}

@media (max-width: 720px) {
	.ffw-reviews__summary {
		grid-template-columns: 1fr;
		text-align: center;
	}
}

.ffw-reviews__avg {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	border-right: 1px solid var(--ffw-border);
	padding-right: 2rem;
}

@media (max-width: 720px) {
	.ffw-reviews__avg {
		border-right: 0;
		border-bottom: 1px solid var(--ffw-border);
		padding-right: 0;
		padding-bottom: 1rem;
	}
}

.ffw-reviews__avg-number {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
}

.ffw-reviews__total {
	font-size: .875rem;
	color: var(--ffw-muted);
}

/* -------- Stars -------- */
.ffw-stars { display: inline-flex; gap: 2px; color: #d1d5db; line-height: 1; }
.ffw-stars--sm { font-size: 1rem; }
.ffw-stars--md { font-size: 1.125rem; }
.ffw-stars--lg { font-size: 1.375rem; }
.ffw-star { position: relative; }
.ffw-star--full { color: var(--ffw-accent); }
.ffw-star--half {
	background: linear-gradient(90deg, var(--ffw-accent) 50%, #d1d5db 50%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* -------- Distribution bars -------- */
.ffw-reviews__distribution {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	min-width: 0;
}

.ffw-reviews__dist-row {
	display: grid;
	grid-template-columns: 44px 1fr 40px;
	align-items: center;
	gap: .75rem;
	padding: .25rem .5rem;
	background: transparent;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
	transition: background-color .15s ease;
}

.ffw-reviews__dist-row:hover,
.ffw-reviews__dist-row:focus-visible {
	background: var(--ffw-bg-soft);
	outline: none;
}

.ffw-reviews__dist-label {
	font-size: .875rem;
	color: var(--ffw-muted);
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.ffw-reviews__dist-bar {
	height: 8px;
	background: var(--ffw-border);
	border-radius: 999px;
	overflow: hidden;
}

.ffw-reviews__dist-fill {
	display: block;
	height: 100%;
	background: var(--ffw-accent);
	transition: width .3s ease;
}

.ffw-reviews__dist-count {
	font-size: .875rem;
	color: var(--ffw-muted);
	text-align: right;
}

/* -------- Write-review CTA -------- */
.ffw-reviews__cta { display: flex; align-items: center; }
.ffw-reviews__write-btn,
.ffw-reviews__load-more,
.ffw-review-form__submit {
	background: var(--ffw-text);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: .7rem 1.4rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: transform .15s ease, background-color .15s ease;
}
.ffw-reviews__write-btn:hover,
.ffw-reviews__load-more:hover,
.ffw-review-form__submit:hover { background: #333; }
.ffw-reviews__write-btn:active,
.ffw-reviews__load-more:active,
.ffw-review-form__submit:active { transform: scale(.98); }

/* -------- Controls (chips + sort) -------- */
.ffw-reviews__controls {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: space-between;
	align-items: center;
	margin-top: 2rem;
}

.ffw-reviews__chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.ffw-chip {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	background: #fff;
	border: 1px solid var(--ffw-border);
	border-radius: 999px;
	padding: .4rem .8rem;
	font: inherit;
	font-size: .85rem;
	cursor: pointer;
	color: var(--ffw-text);
	transition: border-color .15s ease, background-color .15s ease;
}
.ffw-chip:hover { border-color: var(--ffw-text); }
.ffw-chip--active {
	background: var(--ffw-text);
	color: #fff;
	border-color: var(--ffw-text);
}

.ffw-reviews__sort select {
	border: 1px solid var(--ffw-border);
	border-radius: 999px;
	padding: .4rem 2rem .4rem .8rem;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23111' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat right .75rem center / 10px;
	appearance: none;
	font: inherit;
	font-size: .85rem;
	cursor: pointer;
}

/* -------- Review list -------- */
.ffw-reviews__list {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.ffw-reviews__empty {
	padding: 2rem;
	text-align: center;
	color: var(--ffw-muted);
	background: var(--ffw-bg-soft);
	border-radius: var(--ffw-radius);
}

.ffw-review {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--ffw-border);
}
.ffw-review:last-child { border-bottom: 0; }

.ffw-review__head {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex-wrap: wrap;
	margin-bottom: .35rem;
}

.ffw-review__title {
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
}

.ffw-review__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	font-size: .825rem;
	color: var(--ffw-muted);
	margin-bottom: .6rem;
}

.ffw-review__author { font-weight: 600; color: var(--ffw-text); }

.ffw-review__badge {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font-size: .75rem;
	background: #ecfdf5;
	color: #047857;
	border-radius: 999px;
	padding: .15rem .55rem;
}

.ffw-review__content {
	line-height: 1.55;
	font-size: .95rem;
	margin-bottom: .75rem;
}
.ffw-review__content p { margin: 0 0 .5rem; }

.ffw-review__media {
	list-style: none;
	padding: 0;
	margin: 0 0 .75rem;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.ffw-review__media-item {
	display: block;
	width: 84px;
	height: 84px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--ffw-bg-soft);
	object-fit: cover;
}
.ffw-review__media-item img,
.ffw-review__media-item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ffw-review__actions { display: flex; gap: .5rem; }

.ffw-review__helpful {
	background: transparent;
	border: 1px solid var(--ffw-border);
	border-radius: 999px;
	padding: .35rem .75rem;
	font: inherit;
	font-size: .8rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	transition: border-color .15s;
}
.ffw-review__helpful:hover { border-color: var(--ffw-text); }
.ffw-review__helpful[disabled] { opacity: .6; cursor: default; }

/* -------- Footer / load more -------- */
.ffw-reviews__footer {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}

/* -------- Dialog + form -------- */
.ffw-reviews__dialog {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: 560px;
	width: 100%;
}
.ffw-reviews__dialog::backdrop {
	background: rgba(0,0,0,0.5);
}

.ffw-review-form {
	position: relative;
	background: #fff;
	border-radius: var(--ffw-radius);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-height: 90vh;
	overflow-y: auto;
}

.ffw-review-form__close {
	position: absolute;
	top: .5rem;
	right: .75rem;
	background: transparent;
	border: 0;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	color: var(--ffw-muted);
}
.ffw-review-form__close:hover { color: var(--ffw-text); }

.ffw-review-form__title {
	font-size: 1.25rem;
	margin: 0;
}

.ffw-req { color: #dc2626; margin-left: 2px; }

.ffw-review-form__rating { border: 0; margin: 0; padding: 0; }
.ffw-review-form__rating legend {
	font-size: .85rem;
	font-weight: 600;
	margin-bottom: .3rem;
}

.ffw-rating-input { display: flex; gap: .15rem; }
.ffw-rating-input__star {
	background: transparent;
	border: 0;
	font-size: 2rem;
	color: #d1d5db;
	cursor: pointer;
	padding: 0 .1rem;
	line-height: 1;
	transition: transform .1s ease, color .1s ease;
}
.ffw-rating-input__star:hover { transform: scale(1.1); }
.ffw-rating-input__star[data-active="1"] { color: var(--ffw-accent); }

.ffw-review-form__field {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	font-size: .85rem;
	font-weight: 600;
}
.ffw-review-form__field input[type="text"],
.ffw-review-form__field input[type="email"],
.ffw-review-form__field textarea {
	border: 1px solid var(--ffw-border);
	border-radius: 8px;
	padding: .6rem .75rem;
	font: inherit;
	font-weight: 400;
	font-size: .95rem;
	width: 100%;
	background: #fff;
}
.ffw-review-form__field input:focus,
.ffw-review-form__field textarea:focus {
	outline: 2px solid var(--ffw-accent);
	outline-offset: 1px;
	border-color: var(--ffw-accent);
}
.ffw-review-form__field textarea { resize: vertical; min-height: 120px; }

.ffw-review-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
@media (max-width: 500px) {
	.ffw-review-form__row { grid-template-columns: 1fr; }
}

/* Media drop */
.ffw-media-drop {
	border: 1px dashed var(--ffw-border);
	border-radius: 8px;
	padding: .75rem;
	transition: border-color .15s ease, background-color .15s ease;
}
.ffw-media-drop--dragover {
	border-color: var(--ffw-accent);
	background: #fffbe6;
}

.ffw-media-drop__btn {
	width: 100%;
	background: transparent;
	border: 0;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	color: var(--ffw-muted);
}
.ffw-media-drop__btn:hover { color: var(--ffw-text); }
.ffw-media-drop__icon { font-size: 1.75rem; }

.ffw-media-drop__list {
	list-style: none;
	margin: .5rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.ffw-media-drop__item {
	position: relative;
	width: 72px;
	height: 72px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--ffw-bg-soft);
}
.ffw-media-drop__item img,
.ffw-media-drop__item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ffw-media-drop__item[data-status="uploading"]::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23111' stroke-width='3' fill='none' stroke-dasharray='50' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") no-repeat center;
}
.ffw-media-drop__remove {
	position: absolute;
	top: 2px;
	right: 2px;
	background: rgba(0,0,0,.6);
	color: #fff;
	border: 0;
	border-radius: 999px;
	width: 20px;
	height: 20px;
	font-size: .8rem;
	line-height: 1;
	cursor: pointer;
}

.ffw-review-form__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: .25rem;
}

.ffw-review-form__status {
	font-size: .85rem;
	color: var(--ffw-muted);
	flex: 1;
}
.ffw-review-form__status[data-state="error"] { color: #dc2626; }
.ffw-review-form__status[data-state="success"] { color: #047857; }

.ffw-review-form__submit[aria-busy="true"] {
	opacity: .7;
	pointer-events: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}