/*
 * Serina Trading — theme.css
 *
 * Intentionally minimal. All visual design is handled in Elementor.
 *
 * IMPORTANT (Elementor v4 / Atomic CSS): do NOT add broad resets here.
 * Avoid selectors like *, html, body, div, section, ul, li, a, button or
 * form elements, and never use `all: reset` or global box-sizing overrides.
 * Such rules conflict with Elementor's scoped, atomic CSS output and with the
 * JetPlugins suite. Keep any rules narrowly scoped to this theme's own
 * classes (e.g. .site-main, .df-credit) only.
 *
 * Performance note: this file must stay tiny — it loads on every page. Any
 * substantial styling belongs in Elementor (which generates per-page CSS),
 * not here.
 *
 * Below are a scoped accessibility utility for the skip-to-content link
 * (visually hidden, but visible on keyboard focus) and the one unavoidable
 * user-agent reset, explained where it appears.
 */

/*
 * Zero the browser's default 8px body margin.
 *
 * This is the one exception to the "no global selectors" rule above. Elementor
 * does not reset it, so without this every full-bleed section — header, hero,
 * dark bands, footer — stops 8px short of the viewport edge and shows a white
 * frame around the whole page. It sets no design values, so it cannot conflict
 * with Elementor's atomic CSS.
 */
body {
	margin: 0;
}

/* Visually hidden, but available to screen readers and keyboard users. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

/* Reveal the skip link when it receives keyboard focus. */
.skip-link.screen-reader-text:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	padding: 16px 24px;
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 100000;
	display: block;
	background: #fff;
	color: #111;
	font-size: 14px;
	line-height: 1;
	text-decoration: underline;
}

/*
 * Button arrows.
 *
 * Every call-to-action in the design carries a trailing arrow. Elementor's
 * atomic button widget renders its label only, so the arrow is drawn here as a
 * masked pseudo-element. A mask (rather than a background image) lets the arrow
 * inherit the button's own colour, so it stays white on the red buttons and
 * turns red on the ghost buttons on hover, exactly like the design.
 */
.hhero-btn::after,
.hhero-quote::after,
.hwwa-btn::after,
.hind-btn::after,
.happ-btn::after,
.hpart-btn::after,
.hkhub-btn::after,
.s-fcta-btn::after,
.s-fcta-quote::after,
.s-pcta2-btn::after,
.s-pcta2-quote::after,
.s-acta-btn::after,
.s-acta-quote::after,
.s-astory-btn::after,
.s-arep-btn::after,
.s-aacc-btn::after,
.s-pcta-btn::after,
.s-pcta-quote::after,
.s-rcta-btn::after,
.s-rcta-quote::after,
.s-rrelated-viewall::after,
.s-e404-products::after,
.s-e404-home::after,
.s-cdetails-faq-btn::after {
	background-color: currentColor;
	content: "";
	display: inline-block;
	flex: none;
	height: 1.25em;
	width: 1.25em;
	-webkit-mask: var(--serina-arrow) center / contain no-repeat;
	mask: var(--serina-arrow) center / contain no-repeat;
	transition: transform 0.2s ease;
}

:root {
	--serina-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.hhero-btn:hover::after,
.hhero-quote:hover::after,
.hwwa-btn:hover::after,
.hind-btn:hover::after,
.happ-btn:hover::after,
.hpart-btn:hover::after,
.hkhub-btn:hover::after,
.s-fcta-btn:hover::after,
.s-fcta-quote:hover::after,
.s-pcta2-btn:hover::after,
.s-pcta2-quote:hover::after,
.s-acta-btn:hover::after,
.s-acta-quote:hover::after,
.s-astory-btn:hover::after,
.s-arep-btn:hover::after,
.s-aacc-btn:hover::after,
.s-pcta-btn:hover::after,
.s-pcta-quote:hover::after,
.s-rcta-btn:hover::after,
.s-rcta-quote:hover::after,
.s-rrelated-viewall:hover::after,
.s-e404-products:hover::after,
.s-e404-home:hover::after,
.s-cdetails-faq-btn:hover::after {
	transform: translateX(3px);
}

/*
 * Pages that close with their own call-to-action band hide the shared one from
 * the footer template, so the same photo does not run twice back to back.
 * Driven by the `_serina_hide_footer_cta` post meta.
 */
/* !important because Elementor's `.elementor .e-flexbox-base{display:flex}`
   has the same specificity and is loaded after the theme stylesheet. */
body.serina-no-footer-cta .s-fcta {
	display: none !important;
}

/*Form styles*/
	.form-styles .elementor-field-type-text input, 
    .form-styles .elementor-field-type-email input, 
    .form-styles .elementor-field-type-tel input,
    .form-styles .elementor-select-wrapper select  {
    height: 51px !important;
}

	.form-styles .select-caret-down-wrapper {
		display: none;
	}
	.form-styles select {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		background: url('/wp-content/uploads/2026/08/chevron-down-30.svg') no-repeat right 20px center;
		background-size: 15px 8px;
		background-color: #FFFFFF1A;
		padding-top: 0;
		padding-bottom: 0;
		padding-right: 45px;
	}

	.form-styles select option {
		font-family: Manrope;
		font-weight: 700;
		font-style: Bold;
		font-size: 14px;
		line-height: 1.65em;
		letter-spacing: 0em;
		background: #262626;
	}

	.form-styles textarea {
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.form-styles .elementor-message:before {
		display: none !important;
	}

	.form-styles .elementor-button:hover {
		cursor: pointer;
	}

	.form-styles .elementor-button,
	.btn-arrow .elementor-button
{ display: inline-flex; align-items: center; 
		gap: 16px; 
	}

	.form-styles .elementor-button::after,
	.btn-arrow .elementor-button::after { 
		content: ""; 
		display: inline-block;
		width: 1.25em; 
		height: 1.25em; 
		background-color: currentColor; -webkit-mask: var(--serina-arrow) center / contain no-repeat; mask: var(--serina-arrow) center / contain no-repeat;
		transition: transform .2s ease; }

	.form-styles .elementor-button:hover::after,
	.btn-arrow .elementor-button:hover::after { 
		transform: translateX(3px); 
	}
/*End form styles*/

/*Grade picker (request popups) - built by theme.js*/
	.serina-grade {
		width: 100%;
	}

	.serina-grade .serina-grade__toggle,
	.serina-grade .serina-grade__toggle:hover,
	.serina-grade .serina-grade__toggle:focus {
		display: block;
		width: 100%;
		height: 51px;
		margin: 0;
		padding: 0 45px 0 14px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: left;
		text-transform: none;
		letter-spacing: normal;
		font-family: Manrope, sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: 49px;
		color: #FFFFFF;
		background: #FFFFFF1A url('/wp-content/uploads/2026/08/chevron-down-30.svg') no-repeat right 20px center;
		background-size: 15px 8px;
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 5px;
		box-shadow: none;
		cursor: pointer;
	}

	.serina-grade--empty .serina-grade__toggle,
	.serina-grade--empty .serina-grade__toggle:hover,
	.serina-grade--empty .serina-grade__toggle:focus {
		color: rgba(255, 255, 255, 0.75);
	}

	.serina-grade .serina-grade__toggle:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.serina-grade .serina-grade__toggle:focus-visible,
	.serina-grade .serina-grade__box:focus-visible {
		outline: 2px solid #CF2E25;
		outline-offset: 2px;
	}

	.serina-grade__panel {
		margin-top: 6px;
		max-height: 220px;
		overflow-y: auto;
		padding: 6px 0;
		background: #262626;
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 5px;
	}

	.serina-grade .serina-grade__option {
		display: flex !important;
		align-items: center;
		gap: 10px;
		margin: 0;
		padding: 9px 14px;
		font-family: Manrope, sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.4;
		color: #FFFFFF;
		cursor: pointer;
	}

	.serina-grade .serina-grade__option:hover {
		background: rgba(255, 255, 255, 0.06);
	}

	.serina-grade .serina-grade__box {
		appearance: none;
		-webkit-appearance: none;
		flex: 0 0 16px;
		width: 16px;
		height: 16px;
		margin: 0;
		padding: 0;
		background: #FFFFFF1A;
		border: 1px solid rgba(255, 255, 255, 0.35);
		border-radius: 3px;
		cursor: pointer;
	}

	.serina-grade .serina-grade__box:checked {
		background: #CF2E25 url('/wp-content/uploads/2026/08/tick-white.svg') no-repeat center / 14px 14px;
		border-color: #CF2E25;
	}
/*End grade picker*/