/* ============================================================================
   Strawberry for Beauty — the review block on a product page.

   Every selector is under `body.sfb-product-reviews`, a class only added when
   is_product() is true, so nothing here can reach the hall, the 3D templates,
   the cart or the blog.

   The store has no reviews yet and the whole point of this file is to stop the
   form looking like an afterthought, because the form is the only thing that
   will ever fill the homepage "آراء العملاء" section.

   #DE2227 is the only accent — stars and the submit button.
   ========================================================================== */

body.sfb-product-reviews #reviews {
	--sfb-red:  #DE2227;
	--sfb-ink:  #171314;
	--sfb-mute: #7A7175;
	--sfb-line: rgba(23, 19, 20, .12);

	max-inline-size: 780px;
	margin-inline: auto;
	padding-block: clamp(2rem, 5vw, 3.5rem);
	font-family: "Almarai", Tahoma, sans-serif;
}

body.sfb-product-reviews #reviews h2,
body.sfb-product-reviews #reviews h3 {
	font-family: "El Messiri", "Almarai", Tahoma, sans-serif;
	font-weight: 600;
	color: var(--sfb-ink);
}

/* the invitation shown when she arrives from the review-request email */
body.sfb-product-reviews .sfb-review-hello {
	margin: 0 0 1.2rem;
	padding: .95rem 1.1rem;
	background: rgba(222, 34, 39, .05);
	border-inline-start: 3px solid var(--sfb-red);
	border-radius: 8px;
	font-size: .95rem;
	line-height: 1.85;
	color: var(--sfb-ink);
}

/* ------------------------------------------------------------ empty state -- */

body.sfb-product-reviews .woocommerce-noreviews {
	margin: 0 0 1.4rem;
	padding: 1.1rem 1.2rem;
	background: #FAF8F8;
	border: 1px dashed var(--sfb-line);
	border-radius: 10px;
	color: var(--sfb-mute);
	font-size: .95rem;
}

/* ------------------------------------------------------------ the reviews -- */

body.sfb-product-reviews .commentlist {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	gap: .9rem;
}
body.sfb-product-reviews .commentlist .review {
	border: 1px solid var(--sfb-line);
	border-radius: 12px;
	padding: 1.2rem 1.3rem;
	background: #fff;
}
body.sfb-product-reviews .comment_container { display: flex; gap: 1rem; align-items: flex-start; }
body.sfb-product-reviews .commentlist .avatar {
	inline-size: 46px; block-size: 46px; border-radius: 50%;
	flex: 0 0 auto;
}
body.sfb-product-reviews .comment-text { flex: 1 1 auto; min-inline-size: 0; }
body.sfb-product-reviews .woocommerce-review__author {
	font-family: "El Messiri", "Almarai", Tahoma, sans-serif;
	font-weight: 600; color: var(--sfb-ink);
}
body.sfb-product-reviews .woocommerce-review__published-date {
	color: var(--sfb-mute); font-size: .82rem;
}
body.sfb-product-reviews .description { line-height: 1.95; color: #3A3335; }

/* ------------------------------------------------------------------ stars -- */

body.sfb-product-reviews .star-rating span::before,
body.sfb-product-reviews p.stars a::before { color: var(--sfb-red); }

/* The rating picker ships as five tiny links. Give them a real touch target —
   they are the single most important control in this block. */
body.sfb-product-reviews .comment-form-rating { margin-block-end: 1.1rem; }
body.sfb-product-reviews .comment-form-rating label {
	display: block; margin-block-end: .5rem;
	font-weight: 700; color: var(--sfb-ink);
}
body.sfb-product-reviews p.stars { display: flex; gap: .35rem; }
body.sfb-product-reviews p.stars a {
	inline-size: 34px; block-size: 34px;
	display: grid; place-items: center;
	font-size: 1.25rem; line-height: 1;
	border-radius: 8px;
	transition: background .18s ease, transform .18s ease;
}
body.sfb-product-reviews p.stars a:hover { background: rgba(222, 34, 39, .08); transform: translateY(-1px); }
body.sfb-product-reviews p.stars a:focus-visible {
	outline: 2px solid var(--sfb-red); outline-offset: 2px;
}

/* ------------------------------------------------------------------- form -- */

body.sfb-product-reviews #review_form_wrapper {
	margin-block-start: 1.6rem;
	padding: clamp(1.2rem, 3vw, 1.9rem);
	border: 1px solid var(--sfb-line);
	border-radius: 14px;
	background: #FDFCFC;
}
body.sfb-product-reviews .comment-reply-title {
	display: block;
	font-family: "El Messiri", "Almarai", Tahoma, sans-serif;
	font-weight: 600; font-size: 1.2rem; color: var(--sfb-ink);
	margin-block-end: .4rem;
}
body.sfb-product-reviews .comment-form label { font-weight: 700; font-size: .9rem; color: var(--sfb-ink); }
body.sfb-product-reviews .comment-form input[type="text"],
body.sfb-product-reviews .comment-form input[type="email"],
body.sfb-product-reviews .comment-form textarea {
	inline-size: 100%;
	box-sizing: border-box;
	margin-block-start: .4rem;
	padding: .75rem .9rem;
	font-family: inherit; font-size: 1rem; color: var(--sfb-ink);
	background: #fff;
	border: 1px solid var(--sfb-line); border-radius: 10px;
}
body.sfb-product-reviews .comment-form input:focus,
body.sfb-product-reviews .comment-form textarea:focus {
	outline: none; border-color: var(--sfb-red);
}
body.sfb-product-reviews .comment-form textarea { min-block-size: 130px; resize: vertical; }

body.sfb-product-reviews .comment-form .submit {
	background: var(--sfb-red); color: #fff;
	border: 0; border-radius: 10px;
	padding: .85rem 2rem;
	font-family: inherit; font-weight: 700; font-size: 1rem;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}
body.sfb-product-reviews .comment-form .submit:hover { background: #B71C20; transform: translateY(-1px); }
body.sfb-product-reviews .comment-form .submit:focus-visible {
	outline: 2px solid var(--sfb-ink); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	body.sfb-product-reviews p.stars a,
	body.sfb-product-reviews .comment-form .submit { transition: none; }
	body.sfb-product-reviews p.stars a:hover,
	body.sfb-product-reviews .comment-form .submit:hover { transform: none; }
}