/**
 * Forsa — supplementary styles.
 *
 * theme.json owns colours, type and spacing. This file only covers what the
 * block system cannot express: component internals, WooCommerce, and the
 * landing-page furniture (countdown, sticky CTA, trust bar).
 *
 * Everything uses logical properties so the RTL layout needs no rtl.css.
 */

/* -------------------------------------------------------------------------
 * 1. Base
 * ---------------------------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Arabic text wraps better when long words are allowed to break. */
p,
li,
h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

/* Prices, counters and phone numbers stay in Latin digits and LTR order. */
.forsa-ltr,
.woocommerce-Price-amount,
.wc-block-formatted-money-amount,
.forsa-countdown__value,
input[type="tel"] {
	direction: ltr;
	unicode-bidi: isolate;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
 * 2. Custom block styles
 * ---------------------------------------------------------------------- */

/* Outline button */
.wp-block-button.is-style-forsa-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 0 2px currentColor;
}

.wp-block-button.is-style-forsa-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--primary);
}

/* Oversized buy button used at the bottom of landing sections */
.wp-block-button.is-style-forsa-cta .wp-block-button__link {
	display: block;
	width: 100%;
	padding-block: 1.125rem;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--brand);
	transition: transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.wp-block-button.is-style-forsa-cta .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(193, 14, 52, 0.34);
}

/* Card group */
.wp-block-group.is-style-forsa-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--30);
	box-shadow: var(--wp--preset--shadow--soft);
}

/* Checklist */
.wp-block-list.is-style-forsa-checks {
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-list.is-style-forsa-checks li {
	position: relative;
	padding-inline-start: 2rem;
	margin-block-end: 0.75rem;
}

.wp-block-list.is-style-forsa-checks li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.45em;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary-tint);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23C10E34' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.5 3.5L15 7'/%3E%3C/svg%3E");
	background-size: 0.9rem;
	background-position: center;
	background-repeat: no-repeat;
}

/* Rounded image */
.wp-block-image.is-style-forsa-rounded img {
	border-radius: var(--wp--custom--radius--lg);
}

/* -------------------------------------------------------------------------
 * 3. Header
 * ---------------------------------------------------------------------- */

.forsa-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 90;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(12px);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.forsa-header .wp-block-site-logo img {
	block-size: auto;
	max-block-size: 44px;
	inline-size: auto;
}

.forsa-header .wp-block-navigation {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.forsa-header .wp-block-navigation a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--ink);
}

.forsa-header .wp-block-navigation a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* Announcement strip above the header */
.forsa-announce {
	background: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-align: center;
	padding-block: 0.625rem;
}

.forsa-announce a {
	color: inherit;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * 4. Landing-page components
 * ---------------------------------------------------------------------- */

/* Eyebrow / badge label */
.forsa-badge {
	display: inline-block;
	padding: 0.375rem 0.875rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary-tint);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.4;
}

.forsa-badge--ink {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

/* Countdown timer */
.forsa-countdown {
	display: flex;
	gap: 0.625rem;
	justify-content: center;
	flex-wrap: wrap;
}

.forsa-countdown__unit {
	min-inline-size: 72px;
	padding: 0.75rem 0.5rem;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	text-align: center;
}

.forsa-countdown__value {
	display: block;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.forsa-countdown__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	opacity: 0.72;
	margin-block-start: 0.25rem;
}

.forsa-countdown.is-expired .forsa-countdown__unit {
	background: var(--wp--preset--color--muted);
}

/* Trust bar */
.forsa-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1rem;
	text-align: center;
}

.forsa-trust__item {
	padding: 1rem 0.75rem;
}

.forsa-trust__icon {
	display: block;
	font-size: 1.5rem;
	margin-block-end: 0.375rem;
}

.forsa-trust__title {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin: 0;
}

.forsa-trust__note {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	margin: 0.125rem 0 0;
}

/* Sticky mobile buy bar on offer pages */
.forsa-sticky-buy {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 95;
	display: none;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem var(--wp--preset--spacing--20);
	padding-block-end: calc(0.75rem + env(safe-area-inset-bottom));
	background: var(--wp--preset--color--base);
	border-block-start: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 -4px 20px rgba(17, 17, 17, 0.1);
	transform: translateY(110%);
	transition: transform var(--wp--custom--transition);
}

.forsa-sticky-buy.is-visible {
	transform: translateY(0);
}

.forsa-sticky-buy__price {
	flex: 0 0 auto;
	font-weight: 700;
	line-height: 1.2;
}

.forsa-sticky-buy__was {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	text-decoration: line-through;
}

.forsa-sticky-buy__btn {
	flex: 1 1 auto;
	display: inline-block;
	text-align: center;
	padding: 0.875rem 1rem;
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	cursor: pointer;
}

.forsa-sticky-buy__btn:hover {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

@media (max-width: 781px) {
	body.single-product .forsa-sticky-buy {
		display: flex;
	}

	/* keep the last section clear of the fixed bar */
	body.single-product .wp-site-blocks > footer {
		padding-block-end: 5.5rem;
	}
}

/* FAQ accordion built on <details> */
.forsa-faq details {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base);
	margin-block-end: 0.75rem;
	overflow: hidden;
}

.forsa-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 1rem 1.25rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.forsa-faq summary::-webkit-details-marker {
	display: none;
}

.forsa-faq summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	transition: transform var(--wp--custom--transition);
}

.forsa-faq details[open] summary::after {
	transform: rotate(45deg);
}

.forsa-faq details > :not(summary) {
	padding: 0 1.25rem 1.25rem;
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
}

/* -------------------------------------------------------------------------
 * 5. WooCommerce
 * ---------------------------------------------------------------------- */

/* Saving badge appended by forsa_price_saving_badge() */
.forsa-saving {
	display: inline-block;
	margin-inline-start: 0.5rem;
	padding: 0.125rem 0.5rem;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--success);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	vertical-align: middle;
}

.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--pill);
	font-weight: 700;
	font-size: 0.8125rem;
	min-block-size: auto;
	min-inline-size: auto;
	padding: 0.375rem 0.875rem;
	line-height: 1.4;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	opacity: 1;
}

/* Buttons — match the block button system */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--md);
	font-family: inherit;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	padding: 0.875rem 1.75rem;
	line-height: 1.2;
	transition: background-color var(--wp--custom--transition);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}

.woocommerce div.product form.cart .button {
	inline-size: 100%;
	padding-block: 1.0625rem;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	box-shadow: var(--wp--preset--shadow--brand);
}

/* Quantity + form fields */
.woocommerce .quantity .qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--sm);
	padding: 0.75rem 0.875rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

.woocommerce .quantity .qty:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(193, 14, 52, 0.14);
}

/* Product grid cards */
.woocommerce ul.products li.product {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	padding: 0.75rem;
	text-align: start;
	transition: box-shadow var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--wp--preset--shadow--raised);
	transform: translateY(-3px);
}

.woocommerce ul.products li.product a img {
	border-radius: var(--wp--custom--radius--md);
	margin-block-end: 0.875rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.5;
	padding: 0;
	color: var(--wp--preset--color--ink);
}

.woocommerce ul.products li.product .price {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-block-start: none;
	border-inline-start: 4px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--wp--preset--color--primary);
}

.woocommerce-message {
	border-inline-start-color: var(--wp--preset--color--success);
}

.woocommerce-message::before {
	color: var(--wp--preset--color--success);
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border-block-end-color: var(--wp--preset--color--line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
	padding-block: 0.75rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--primary);
	box-shadow: inset 0 -3px 0 var(--wp--preset--color--primary);
}

/* Cart / checkout blocks */
.wc-block-components-button:not(.is-link) {
	background: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--md);
	font-weight: 700;
}

.wc-block-components-button:not(.is-link):hover {
	background: var(--wp--preset--color--primary-dark);
}

/* -------------------------------------------------------------------------
 * 6. Footer
 * ---------------------------------------------------------------------- */

.forsa-footer {
	background: var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.76);
}

.forsa-footer :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--base);
}

.forsa-footer a {
	color: rgba(255, 255, 255, 0.76);
}

.forsa-footer a:hover {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.forsa-footer .wp-block-navigation {
	font-size: var(--wp--preset--font-size--small);
}

.forsa-footer__legal {
	border-block-start: 1px solid rgba(255, 255, 255, 0.14);
	font-size: var(--wp--preset--font-size--x-small);
	color: rgba(255, 255, 255, 0.56);
}

/* -------------------------------------------------------------------------
 * 7. Utilities
 * ---------------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.forsa-strike {
	text-decoration: line-through;
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}