/**
 * Support Page Styles
 * Pixel-perfect implementation matching design specifications
 *
 * @package Onviqa
 * @since 1.0.0
 */

/* ==========================================================================
   Container & Layout
   ========================================================================== */

.only-support-page {
	background: #FFFFFF;
}

.only-support-container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 70px;
}

.only-support-hero {
	padding: 60px 0 50px;
}

.only-support-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: 50px;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Hero Section - Title & Resources
   ========================================================================== */

.only-support-hero {
	padding: 60px 0 50px;
}

.only-support-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: 50px;
}

.only-support-title {
	font-family: 'DM Serif Display', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 44px;
	line-height: 60px;
	text-align: center;
	color: #000000;
	margin: 0;
}

.only-support-subtitle {
	font-family: 'Roboto Flex', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	line-height: 34px;
	text-align: center;
	color: #666666;
	margin: 0;
	max-width: 934px;
}

/* Resources Grid */
.only-support-resources {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 40px 70px;
	gap: 20px;
	background: #F0F4F8;
	border-radius: 20px;
	min-height: 213px;
	max-width: 1440px;
	margin: 0 auto;
}

.only-support-resource {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	width: 200px;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.only-support-resource:hover {
	transform: translateY(-4px);
}

.only-support-resource__icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.only-support-resource__icon img {
	max-width: 100%;
	height: auto;
	display: block;
}

.only-support-resource__icon svg {
	width: 80px;
	height: 80px;
	color: #FF5100;
}

.only-support-resource__label {
	font-family: 'Roboto Flex', sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 18px;
	line-height: 21px;
	text-align: center;
	color: #222222;
}

/* ==========================================================================
   Main Content Section - Support Options + Form
   ========================================================================== */

/* Horizontal padding matches .only-support-resources (70px). Without it this
   section had none above 1200px - the grid only picked up side padding inside
   the responsive blocks - so on screens between the 1440px max-width and the
   1200px breakpoint the content sat flush against the viewport edges. */
.only-support-content {
	padding: 100px 70px;
	max-width: 1440px;
	margin: 0 auto;
	box-sizing: border-box;
}

.only-support-grid {
	display: flex;
	flex-direction: row;
	gap: 60px;
	align-items: flex-start;
	justify-content: space-between;
}

/* Left: Support Options
   620px is the design width, but it must be allowed to SHRINK. With
   flex: 0 0 auto the two columns demanded 620 + 600 + 60 = 1280px while the
   stacking breakpoint was only 1200px, so between roughly 1200-1280px the
   form overflowed the grid. Letting both columns shrink removes that gap. */
.only-support-options {
	flex: 1 1 620px;
	min-width: 0;
	max-width: 620px;
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.only-support-options__title {
	font-family: 'DM Serif Display', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 40px;
	line-height: 55px;
	color: #000000;
	margin: 0;
}

.only-support-options__desc {
	font-family: 'Roboto Flex', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	line-height: 34px;
	color: #666666;
	margin: -34px 0 0 0;
}

.only-support-methods {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.only-support-method {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.only-support-method:hover {
	transform: translateX(8px);
}

.only-support-method__icon {
	width: 55px;
	height: 55px;
	flex-shrink: 0;
}

.only-support-method__icon svg {
	width: 55px;
	height: 55px;
	color: #888888;
}

.only-support-method__content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.only-support-method__title {
	font-family: 'Roboto Flex', sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 24px;
	line-height: 28px;
	color: #000000;
	margin: 0;
}

.only-support-method__link {
	font-family: 'Roboto Flex', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 21px;
	text-decoration: underline;
	color: #FF5100;
}

/* Right: Contact Form */
.only-support-form-wrapper {
	flex: 1 1 600px;
	min-width: 0;
	max-width: 600px;
	background: #F5F6FA;
	border-radius: 12px;
	padding: 40px;
	margin-left: auto;
}

.only-support-form {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.only-support-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.only-support-form__row {
	display: flex;
	flex-direction: row;
	gap: 20px;
}

.only-support-field {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.only-support-label {
	font-family: 'Roboto Flex', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 19px;
	color: #CCCCCC;
	text-transform: none;
	position: absolute;
	padding: 0 4px;
	background: transparent;
	left: 56px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	pointer-events: none;
	transition: all 0.2s ease;
}

/* Textarea label positioning */
.only-support-input-wrap--textarea .only-support-label {
	top: 16px;
	transform: none;
}

/* Filled / focused label (Figma node 906:7008)
   The label moves to the TOP INSIDE the field with the value sitting beneath
   it - it no longer straddles the border. Keeping it inside means no white
   background patch is needed and the label stays aligned with the icon. */
.only-support-input-wrap input:focus + .only-support-label,
.only-support-input-wrap input:not(:placeholder-shown) + .only-support-label,
.only-support-input-wrap textarea:focus + .only-support-label,
.only-support-input-wrap textarea:not(:placeholder-shown) + .only-support-label {
	font-size: 12px;
	line-height: 14px;
	color: #888888;
	text-transform: none;
	background: transparent;
	left: 56px;
	top: 10px;
	transform: none;
	padding: 0;
}

/* Value drops below the label so the two stack inside the 56px field.
   Scoped to the form's own fields - :not() excludes the country dropdown's
   search box, which is also an <input> inside this wrapper and would be
   pushed down and stretched when the user typed into it. */
.only-support-input-wrap input:not(.ksq-country-search-input):focus,
.only-support-input-wrap input:not(.ksq-country-search-input):not(:placeholder-shown) {
	padding-top: 26px;
	padding-bottom: 6px;
}

/* Same for the textarea - its own padding-top of 16px leaves the first line of
   text sitting on top of the label. */
.only-support-input-wrap textarea:focus,
.only-support-input-wrap textarea:not(:placeholder-shown) {
	padding-top: 30px;
}

.only-support-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.only-support-input-wrap--textarea {
	align-items: flex-start;
}

.only-support-icon {
	position: absolute;
	left: 16px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #888888;
	pointer-events: none;
}

.only-support-icon--top {
	top: 16px;
}

.only-support-icon svg {
	width: 24px;
	height: 24px;
}

.only-support-field input,
.only-support-field textarea {
	width: 100%;
	height: 56px;
	padding: 10px 16px 10px 56px;
	background: #FFFFFF;
	border: 1px solid #E6E9F0;
	border-radius: 8px;
	font-family: 'Roboto Flex', sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 19px;
	color: #222222;
	transition: border-color 0.2s ease;
}

/* Phone field with country selector - needs more left padding.
   Superseded by the rule further down; kept in sync to avoid confusion. */
.only-support-input-wrap--phone input[type="tel"] {
	padding-left: 0;
}

.only-support-field textarea {
	height: 140px;
	resize: vertical;
	padding-top: 16px;
}

.only-support-field input:focus,
.only-support-field textarea:focus {
	outline: none;
	border-color: #FF5100;
}

.only-support-field input::placeholder,
.only-support-field textarea::placeholder {
	color: #CCCCCC;
	font-weight: 400;
	opacity: 1;
}

/* Error states */
.only-support-input-wrap--error input,
.only-support-input-wrap--error textarea {
	border-color: #F44336;
}

.only-support-field-error {
	color: #F44336;
	font-size: 12px;
	margin-top: 4px;
	display: block;
}

/* Phone field with country selector */
/* Unlike the other support fields, the border here has to sit on the WRAPPER
   rather than the input. The country selector is a sibling of the input, so an
   input-level border enclosed only the number and left "US +1" outside the box.
   Moving it up matches the contact page, where one border wraps both parts. */
.only-support-input-wrap--phone {
	display: flex;
	align-items: center;
	position: relative;
	background: #FFFFFF;
	border: 1px solid #E6E9F0;
	border-radius: 8px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.only-support-input-wrap--phone:focus-within {
	border-color: #FF5100;
}

/* The wrapper's own border would otherwise add 2px on top of the input's 56px,
   leaving this field taller than the rest of the form. */
.only-support-input-wrap--phone input[type="tel"] {
	background: transparent;
	border: none;
	height: 54px;
}

.only-support-input-wrap--phone input[type="tel"]:focus {
	border: none;
	box-shadow: none;
	outline: none;
}

/* Country selector sits at left:16px and is 85px wide, so it ends at 101px.
   Clear that plus a 12px gutter so typed text never touches the selector. */
.only-support-input-wrap--phone input[type="tel"] {
	padding-left: 0 !important;
}

/* Match the selector's height to the taller input so it stays centred. */
.only-support-input-wrap--phone .support-country-container,
.only-support-input-wrap--phone .ksq-country-trigger {
	height: auto;
}

/* Lay the selector out as a flex item rather than positioning it absolutely.
   Dial codes vary in width (+1 vs +971), so any fixed padding-left on the
   input is wrong for most countries - the number ended up touching the
   selector. As a flex sibling the input simply takes the remaining space, so
   the gap stays constant whatever country is chosen. */
.only-support-input-wrap--phone .support-country-container {
	position: static;
	transform: none;
	left: auto;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding-left: 16px;
	padding-right: 8px;
	z-index: 2;
	pointer-events: auto;
}

/* Released from the fixed sizing otp-login.css applies globally. */
/* Reserve a fixed slot for the selector, the way the login popup does
   (.ksq-country-selector there has min-width:97px). Without a floor the
   selector shrinks to its content, so switching between +1 and +971 moved
   the phone input sideways by up to 15px. 86px clears the widest dial code,
   so the input keeps the same position whatever country is selected. */
.only-support-input-wrap--phone .ksq-country-selector {
	min-width: 86px;
	width: auto;
}

.only-support-input-wrap--phone .ksq-country-trigger {
	width: 100%;
}

/* Phone field label.
   Empty state is covered by the input's own "Phone Number" placeholder, so the
   label stays hidden to avoid showing the text twice. Once a value is typed
   the placeholder disappears and the label takes over as the top line, matching
   the other fields. It is offset to clear the country selector. */
.only-support-input-wrap--phone .only-support-label {
	display: none;
}

.only-support-input-wrap--phone input[type="tel"]:focus + .only-support-label,
.only-support-input-wrap--phone input[type="tel"]:not(:placeholder-shown) + .only-support-label {
	display: block;
	left: 112px;
	top: 10px;
	font-size: 12px;
	line-height: 14px;
	color: #888888;
	text-transform: none;
	background: transparent;
	transform: none;
	padding: 0;
}

.only-support-input-wrap--phone input[type="tel"]:focus,
.only-support-input-wrap--phone input[type="tel"]:not(:placeholder-shown) {
	padding-top: 26px;
	padding-bottom: 6px;
}

/* The dropdown's search box must keep its own size whether or not it has a
   value - the generic filled-field padding above would otherwise stretch it
   and push it down the panel as soon as the user typed. */
.only-support-input-wrap--phone .ksq-country-search-input,
.only-support-input-wrap--phone .ksq-country-search-input:focus,
.only-support-input-wrap--phone .ksq-country-search-input:not(:placeholder-shown) {
	height: 28px;
	padding: 6px 10px;
	font-size: 13px;
	line-height: normal;
	box-sizing: border-box;
}

/* Country trigger parts: otp-login.css sizes these globally for the wider My
   Account form (.ksq-country-code is a fixed 90px with flex-shrink:0), which
   overflows this trigger and pushes the flag and dial code outside the field.
   Size them to their content instead - same fix as .only-auth-popup. */
.only-support-input-wrap--phone .ksq-country-flag {
	font-size: 16px;
	width: auto;
	flex-shrink: 0;
}

.only-support-input-wrap--phone .ksq-country-code {
	/* Redundant next to the flag, and on platforms without flag-emoji support
	   (Windows) the flag renders as the same two letters - "US US +1". */
	display: none;
}

.only-support-input-wrap--phone .ksq-country-dial {
	width: auto;
	flex-shrink: 0;
}

/* Country selector styling overrides for support form */
.only-support-input-wrap--phone .ksq-country-selector {
	position: relative;
}

.only-support-input-wrap--phone .ksq-country-trigger {
	background: transparent;
	border: none;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	font-size: 14px;
	color: #666666;
}

.only-support-input-wrap--phone .ksq-country-flag {
	font-size: 18px;
}

.only-support-input-wrap--phone .ksq-country-dial {
	font-weight: 600;
	color: #222222;
	font-size: 14px;
}

.only-support-input-wrap--phone .ksq-country-arrow {
	font-size: 10px;
	color: #888888;
	margin-left: 2px;
}

.only-support-input-wrap--phone .ksq-country-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	background: #FFFFFF;
	border: 1px solid #E6E9F0;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	width: 220px;
	max-height: 280px;
	overflow: hidden;
	z-index: 1000;
}

.only-support-input-wrap--phone .ksq-country-search-wrapper {
	padding: 8px;
	border-bottom: 1px solid #E6E9F0;
}

.only-support-input-wrap--phone .ksq-country-search-input {
	width: 100%;
	padding: 6px 10px;
	border: 1px solid #E6E9F0;
	border-radius: 6px;
	font-size: 13px;
	outline: none;
	font-family: 'Roboto Flex', sans-serif;
}

.only-support-input-wrap--phone .ksq-country-search-input:focus {
	border-color: #FF5100;
}

.only-support-input-wrap--phone .ksq-country-list {
	max-height: 220px;
	overflow-y: auto;
}

.only-support-input-wrap--phone .ksq-country-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	cursor: pointer;
	transition: background 0.2s ease;
}

.only-support-input-wrap--phone .ksq-country-item:hover {
	background: #F5F6FA;
}

.only-support-input-wrap--phone .ksq-country-item .ksq-country-flag {
	font-size: 16px;
}

.only-support-input-wrap--phone .ksq-country-item .ksq-country-code {
	font-size: 11px;
	color: #888888;
	min-width: 28px;
}

.only-support-input-wrap--phone .ksq-country-item .ksq-country-dial {
	font-size: 13px;
	color: #222222;
	font-weight: 500;
}

.only-support-input-wrap--phone .ksq-country-no-results {
	padding: 16px;
	text-align: center;
	color: #888888;
	font-size: 13px;
}

.only-support-submit {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 16px 40px;
	gap: 12px;
	height: 53px;
	background: #FF5100;
	border-radius: 12px;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
	font-family: 'Roboto Flex', sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 18px;
	line-height: 21px;
	text-transform: uppercase;
	color: #FFFFFF;
}

.only-support-submit:hover {
	background: #E64800;
}

.only-support-submit:disabled {
	background: #CCCCCC;
	cursor: not-allowed;
}

.only-support-submit__loading {
	display: none;
}

.only-support-submit.loading .only-support-submit__text {
	display: none;
}

.only-support-submit.loading .only-support-submit__loading {
	display: block;
}

.only-spinner {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.only-support-form__message {
	padding: 16px;
	border-radius: 8px;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 14px;
	line-height: 20px;
	display: none;
}

.only-support-form__message.success {
	display: block;
	background: #E8F5E9;
	color: #2E7D32;
	border: 1px solid #4CAF50;
}

.only-support-form__message.error {
	display: block;
	background: #FFEBEE;
	color: #C62828;
	border: 1px solid #F44336;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 1200px) {
	.only-support-container {
		padding: 0 40px;
	}

	/* 5 tiles would otherwise wrap 4 + 1, stranding a single tile on its
	   own row. Capping the panel to a three-tile track (3 x 200px + 2 x 20px
	   gap + 2 x 40px padding = 720px) balances the wrap to 3 + 2, and the
	   auto side margins keep it centred within the 40px gutters. */
	.only-support-resources {
		padding: 30px 40px;
		margin: 0 auto;
		max-width: min(720px, calc(100vw - 80px));
		flex-wrap: wrap;
	}

	.only-support-grid {
		flex-direction: column;
		gap: 40px;
		/* Side padding now comes from .only-support-content so it applies at
		   every width, not just inside these responsive blocks. */
		padding: 0;
	}

	/* Stacked: both columns take the full width, so the max-width caps that
	   keep them to the design sizes side by side have to be released. */
	.only-support-options {
		flex: 1 1 auto;
		width: 100%;
		max-width: 100%;
	}

	.only-support-form-wrapper {
		flex: 1 1 auto;
		width: 100%;
		max-width: 100%;
		margin-left: 0;
	}
}

@media (max-width: 768px) {
	.only-support-container {
		padding: 0 20px;
	}

	.only-support-title {
		font-size: 32px;
		line-height: 44px;
	}

	.only-support-subtitle {
		font-size: 18px;
		line-height: 26px;
	}

	.only-support-resources {
		padding: 20px;
		/* auto side margins keep the capped panel centred inside the 20px
		   gutters instead of being pinned to the left. */
		margin: 0 auto;
		max-width: min(652px, calc(100vw - 40px));
		gap: 16px;
	}
	
	.only-support-grid {
		padding: 0;
	}

	.only-support-resource {
		width: calc(33.333% - 12px);
		gap: 16px;
	}

	.only-support-resource__icon img {
		max-width: 100%;
		height: auto;
	}

	.only-support-resource__icon svg {
		width: 60px;
		height: 60px;
	}

	.only-support-resource__label {
		font-size: 14px;
		line-height: 18px;
	}

	.only-support-content {
		padding: 60px 40px;
	}

	.only-support-options__title {
		font-size: 32px;
		line-height: 40px;
	}

	.only-support-options__desc {
		font-size: 18px;
		line-height: 26px;
		margin-top: -24px;
	}

	.only-support-methods {
		gap: 32px;
	}

	.only-support-method__title {
		font-size: 20px;
		line-height: 24px;
	}

	.only-support-form-wrapper {
		padding: 24px;
	}

	.only-support-form {
		gap: 20px;
	}

	.only-support-form__row {
		flex-direction: column;
		gap: 20px;
	}
}

@media (max-width: 480px) {

	/* ====================================================================
	   Block 1: Kloira Live Support Resources
	   Figma: 320px content width, 20px left/right margins (360px viewport)
	   ==================================================================== */

	.only-support-hero {
		padding: 30px 20px;
	}

	.only-support-header {
		align-items: flex-start;
		gap: 12px;
		margin-bottom: 20px;
	}

	.only-support-title {
		font-size: 22px;
		line-height: 26px;
		text-align: left;
		color: #111111;
	}

	.only-support-subtitle {
		font-size: 12px;
		line-height: 18px;
		text-align: left;
		max-width: none;
	}

	.only-support-resources {
		flex-direction: row;
		flex-wrap: wrap;
		/* flex-start (not space-between) so a partly filled last row keeps
		   the same 3-column rhythm instead of pushing its tiles to the
		   outer edges. The 10px column gap reproduces the previous spacing. */
		justify-content: flex-start;
		align-items: flex-start;
		padding: 20px 0;
		gap: 20px 10px;
		margin: 0;
		border-radius: 12px;
		min-height: auto;
		background: #F5F6FA;
		max-width: none;
	}

	.only-support-resource {
		width: calc((100% - 20px) / 3);
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
	}

	.only-support-resource:hover {
		transform: none;
	}

	.only-support-resource__icon {
		width: 32px;
		height: 32px;
	}

	.only-support-resource__icon img {
		width: 32px;
		height: 32px;
		object-fit: contain;
	}

	.only-support-resource__icon svg {
		width: 32px;
		height: 32px;
	}

	.only-support-resource__label {
		font-size: 12px;
		line-height: 14px;
		font-weight: 500;
		color: #222222;
	}

	/* ====================================================================
	   Block 2: Get Support from Kloira
	   Support methods in 2x2 grid with compact styling
	   ==================================================================== */

	.only-support-content {
		padding: 40px 20px;
	}

	.only-support-grid {
		padding: 0;
		gap: 24px;
	}

	.only-support-options {
		gap: 24px;
		width: 100%;
	}

	.only-support-options__title {
		font-size: 22px;
		line-height: 26px;
		color: #111111;
	}

	.only-support-options__desc {
		font-size: 12px;
		line-height: 18px;
		color: #666666;
		margin-top: -12px;
	}

	.only-support-methods {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px;
	}

	.only-support-method {
		width: calc(50% - 10px);
		gap: 8px;
		align-items: center;
	}

	.only-support-method:hover {
		transform: none;
	}

	.only-support-method__icon {
		width: 28px;
		height: 28px;
		flex-shrink: 0;
	}

	.only-support-method__icon svg {
		width: 28px;
		height: 28px;
	}

	.only-support-method__content {
		gap: 2px;
	}

	.only-support-method__title {
		font-size: 12px;
		line-height: 14px;
		font-weight: 600;
	}

	.only-support-method__link {
		font-size: 10px;
		line-height: 12px;
	}

	/* ====================================================================
	   Block 3: Contact Form
	   Form wrapper: full width, 16px internal padding (288px inner on 320px)
	   ==================================================================== */

	.only-support-form-wrapper {
		width: 100%;
		padding: 24px 16px;
		border-radius: 12px;
	}

	.only-support-form {
		gap: 12px;
	}

	.only-support-form__row {
		gap: 12px;
	}

	.only-support-field input,
	.only-support-field textarea {
		height: 44px !important;
		padding: 10px 12px 10px 42px;
		font-size: 12px;
		line-height: 14px;
		border-radius: 4px;
		font-weight: 600;
	}

	.only-support-field textarea {
		height: 120px;
		padding-top: 12px;
	}

	.only-support-icon {
		left: 12px;
		width: 18px;
		height: 18px;
	}

	.only-support-icon svg {
		width: 18px;
		height: 18px;
	}

	.only-support-label {
		font-size: 10px;
		line-height: 12px;
		left: 42px;
	}

	/* Labels - Filled State (inside the field, per Figma) */
	.only-support-input-wrap input:focus + .only-support-label,
	.only-support-input-wrap input:not(:placeholder-shown) + .only-support-label,
	.only-support-input-wrap textarea:focus + .only-support-label,
	.only-support-input-wrap textarea:not(:placeholder-shown) + .only-support-label {
		font-size: 11px;
		line-height: 13px;
		color: #888888;
		left: 42px;
		top: 9px;
		transform: none;
		background: transparent;
		padding: 0;
	}

	.only-support-input-wrap input:not(.ksq-country-search-input):focus,
	.only-support-input-wrap input:not(.ksq-country-search-input):not(:placeholder-shown) {
		padding-top: 24px;
		padding-bottom: 6px;
	}

	.only-support-input-wrap textarea:focus,
	.only-support-input-wrap textarea:not(:placeholder-shown) {
		padding-top: 28px;
	}

	/* Phone field adjustments for mobile - the selector moves to left:12px here
	   and is 85px wide, ending at 97px. 90px of padding put the text inside the
	   selector; 109px clears it with the same 12px gutter as the other fields. */
	.only-support-input-wrap--phone input[type="tel"] {
		padding-left: 0 !important;
		/* The wrapper carries the 1px border on this field, so the input has to
		   be 2px shorter than the others to end up the same overall height. */
		height: 42px !important;
	}

	.only-support-input-wrap--phone .only-support-label {
		display: none;
	}

	.only-support-input-wrap--phone input[type="tel"]:focus + .only-support-label,
	.only-support-input-wrap--phone input[type="tel"]:not(:placeholder-shown) + .only-support-label {
		display: block;
		left: 112px;
		top: 9px;
		font-size: 11px;
		line-height: 13px;
	}

	.only-support-input-wrap--phone .support-country-container {
		left: 12px;
	}

	.only-support-submit {
		height: 43px;
		border-radius: 8px;
		font-size: 16px;
		line-height: 19px;
		padding: 12px 40px;
	}

	/* File upload compact styling */
	.only-support-file-upload {
		margin-top: 0;
	}

	.only-support-file-label {
		padding: 12px 14px;
		gap: 10px;
	}

	.only-support-file-icon {
		width: 32px;
		height: 32px;
		border-radius: 6px;
	}

	.only-support-file-text strong {
		font-size: 12px;
	}

	.only-support-file-hint {
		font-size: 10px;
	}
}

/* ==========================================================================
   Success Modal
   ========================================================================== */

.only-support-success-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.only-support-success-modal__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
}

.only-support-success-modal__content {
	position: relative;
	background: #FFFFFF;
	border-radius: 16px;
	padding: 48px 40px;
	max-width: 500px;
	width: 90%;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	animation: slideUp 0.3s ease;
}

@keyframes slideUp {
	from {
		transform: translateY(30px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.only-support-success-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: transparent;
	border: none;
	font-size: 32px;
	color: #888888;
	cursor: pointer;
	line-height: 1;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s ease;
}

.only-support-success-modal__close:hover {
	color: #333333;
}

.only-support-success-modal__icon {
	margin: 0 auto 24px;
	animation: scaleIn 0.5s ease 0.2s backwards;
}

@keyframes scaleIn {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}

.only-support-success-modal__title {
	font-family: 'DM Serif Display', serif;
	font-size: 32px;
	font-weight: 400;
	color: #111111;
	margin: 0 0 16px;
	line-height: 1.2;
}

.only-support-success-modal__message {
	font-family: 'Roboto Flex', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #666666;
	margin: 0 0 32px;
}

.only-support-success-modal__message strong {
	color: #4CAF50;
	font-weight: 600;
}

.only-support-success-modal__details {
	background: #F5F6FA;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 32px;
}

.only-support-success-modal__detail {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 14px;
	color: #333333;
	text-align: left;
}

.only-support-success-modal__detail:first-child {
	margin-bottom: 16px;
}

.only-support-success-modal__detail svg {
	flex-shrink: 0;
}

.only-support-success-modal__button {
	background: #FF5100;
	color: #FFFFFF;
	border: none;
	border-radius: 12px;
	padding: 16px 40px;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease;
	width: 100%;
}

.only-support-success-modal__button:hover {
	background: #E64800;
}

@media (max-width: 768px) {
	.only-support-success-modal__content {
		padding: 36px 24px;
	}

	.only-support-success-modal__icon svg {
		width: 60px;
		height: 60px;
	}

	.only-support-success-modal__title {
		font-size: 24px;
	}

	.only-support-success-modal__message {
		font-size: 14px;
	}
}

/* ===========================================================================
   File Upload Styles
   =========================================================================== */

.only-support-file-upload {
	margin-top: 8px;
}

.only-support-file-label {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	background-color: #f8f9fc;
	border: 2px dashed #E6E9F0;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.only-support-file-label:hover {
	background-color: #f0f2f8;
	border-color: #FF5100;
}

.only-support-file-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: #ffffff;
	border-radius: 8px;
	color: #FF5100;
}

.only-support-file-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.only-support-file-text strong {
	font-size: 14px;
	font-weight: 600;
	color: #111111;
}

.only-support-file-hint {
	font-size: 12px;
	color: #888888;
	display: block;
}

.only-support-file-preview {
	margin-top: 12px;
}

/* Mobile responsive */
@media (max-width: 768px) {
	.only-support-file-label {
		padding: 14px 16px;
	}
	
	.only-support-file-text strong {
		font-size: 13px;
	}
	
	.only-support-file-hint {
		font-size: 11px;
	}
}

/* ==========================================================================
   FAQ Section - Support Page
   ========================================================================== */

/* Above 1200px the tiles sit on a single non-wrapping row, so the panel
   shrinks to fit them instead of stretching to 1440px and leaving dead
   background either side. Below 1200px the panel wraps and is sized by
   its margins, so it must stay full-width (see the responsive blocks). */
@media (min-width: 1201px) {
	.only-support-resources {
		width: fit-content;
		/* Never let the shrink-wrapped panel reach the viewport edges:
		   between 1201px and ~1245px the tiles are wider than the space. */
		max-width: min(1440px, calc(100vw - 80px));
	}
}

/* Smooth scroll for the in-page FAQs anchor link. scroll-behavior must
   sit on the scrolling element (html), so it is scoped with :has() to
   pages using this template rather than applied globally. Disabled for
   users who ask for reduced motion. */
html:has(body.page-template-template-support) {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html:has(body.page-template-template-support) {
		scroll-behavior: auto;
	}
}

.only-support-faq {
	width: 100%;
	background: #F0F4F8;
	padding: 100px 0;
	scroll-margin-top: 100px;
}

.only-support-faq__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 50px;
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 100px;
	align-items: start;
}

.only-support-faq__header {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.only-support-faq__title {
	font-family: 'DM Serif Display', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 32px;
	line-height: 44px;
	color: #111111;
	margin: 0;
}

.only-support-faq__desc {
	font-family: 'Roboto Flex', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #666666;
	margin: 0;
}

/* FAQ List & Accordion (reused from collection FAQ) */
.only-support-faq .only-faq__list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0;
	width: 100%;
}

.only-support-faq .only-faq__item {
	width: 100%;
	border-top: 1px solid #D1D4DB;
	border-bottom: 1px solid #D1D4DB;
	margin-bottom: -1px;
}

.only-support-faq .only-faq__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 25px 0;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	transition: all 0.3s ease;
}

.only-support-faq .only-faq__question:hover {
	opacity: 0.7;
}

.only-support-faq .only-faq__question-text {
	font-family: 'Roboto Flex', sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 18px;
	line-height: 21px;
	color: #111111;
	flex: 1;
	padding-right: 20px;
}

.only-support-faq .only-faq__icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: #111111;
	transition: transform 0.3s ease;
}

.only-support-faq .only-faq__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.only-support-faq .only-faq__icon-horizontal,
.only-support-faq .only-faq__icon-vertical {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.only-support-faq .only-faq__item--active .only-faq__icon-vertical {
	opacity: 0;
	transform: rotate(90deg);
}

.only-support-faq .only-faq__answer {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease;
}

.only-support-faq .only-faq__answer[hidden] {
	display: block;
}

.only-support-faq .only-faq__answer-content {
	padding: 0 0 24px 0;
	font-family: 'Roboto Flex', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #666666;
}

.only-support-faq .only-faq__answer-content p {
	margin: 0 0 12px 0;
}

.only-support-faq .only-faq__answer-content p:last-child {
	margin-bottom: 0;
}

/* FAQ Responsive - Tablet */
@media (max-width: 1440px) {
	.only-support-faq__inner {
		padding: 0 40px;
		gap: 60px;
	}
}

@media (max-width: 1024px) {
	.only-support-faq {
		padding: 60px 0;
	}

	.only-support-faq__inner {
		grid-template-columns: 1fr;
		gap: 30px;
		padding: 0 30px;
	}
}

@media (max-width: 768px) {
	.only-support-faq {
		padding: 50px 0;
	}

	.only-support-faq__inner {
		padding: 0 20px;
		gap: 24px;
	}

	.only-support-faq__title {
		font-size: 28px;
		line-height: 38px;
	}

	.only-support-faq .only-faq__question {
		padding: 20px 0;
	}

	.only-support-faq .only-faq__question-text {
		font-size: 16px;
		line-height: 19px;
	}

	.only-support-faq .only-faq__answer-content {
		font-size: 14px;
		line-height: 22px;
	}
}

/* FAQ Responsive - Mobile */
@media (max-width: 480px) {
	.only-support-faq {
		padding: 40px 20px;
	}

	.only-support-faq__inner {
		padding: 0;
		gap: 20px;
	}

	.only-support-faq__title {
		font-size: 22px;
		line-height: 26px;
		color: #111111;
	}

	.only-support-faq__desc {
		font-size: 12px;
		line-height: 18px;
	}

	.only-support-faq .only-faq__question {
		padding: 16px 0;
	}

	.only-support-faq .only-faq__question-text {
		font-size: 14px;
		line-height: 16px;
		padding-right: 16px;
	}

	.only-support-faq .only-faq__answer-content {
		font-size: 12px;
		line-height: 18px;
		padding-bottom: 16px;
	}
}

/* ==========================================================================
   Phone country selector - match the login popup (.only-auth-popup)

   The popup's phone field is the reference design: flag + dial code only,
   8px trigger padding, and a 13px/600 dial in #1F2937.
   ========================================================================== */
.only-support-input-wrap--phone .ksq-country-trigger {
	padding: 0 8px;
	gap: 4px;
}

.only-support-input-wrap--phone .ksq-country-flag {
	font-size: 16px;
}

.only-support-input-wrap--phone .ksq-country-dial {
	font-size: 13px;
	font-weight: 600;
	color: #1F2937;
}

/* ==========================================================================
   Phone field focus rings

   The wrapper already draws a single focus ring via :focus-within. The
   country trigger (otp-login.css) and the global input[type="tel"]:focus rule
   each add their own box-shadow inside it, which showed as a second blue or
   orange glow around the selector and down the left edge of the number input.
   Suppress the inner ones and let the wrapper own the focus state.
   ========================================================================== */
.only-support-input-wrap--phone .ksq-country-trigger:focus,
.only-support-input-wrap--phone .ksq-country-trigger:focus-visible,
.only-support-input-wrap--phone input[type="tel"]:focus {
	box-shadow: none !important;
	outline: none !important;
}