/**
 * Auth Popup Styles
 * Unified single-flow modal for login/registration
 *
 * @package Onviqa
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */

.only-auth-popup {
	--auth-primary: #FF6B35;
	--auth-primary-hover: #E55A2B;
	--auth-primary-light: rgba(255, 107, 53, 0.1);
	--auth-text: #1A1A1A;
	--auth-text-secondary: #6b7280;
	--auth-text-muted: #9ca3af;
	--auth-border: #e5e7eb;
	--auth-border-focus: #FF6B35;
	--auth-bg: #ffffff;
	--auth-bg-secondary: #f9fafb;
	--auth-success: #22c55e;
	--auth-error: #ef4444;
	--auth-radius: 16px;
	--auth-radius-sm: 12px;
	--auth-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
	--auth-transition: 0.2s ease;
}

/* ==========================================================================
   Overlay
   ========================================================================== */

/* Custom scrollbar for popup */
.only-auth-popup ::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.only-auth-popup ::-webkit-scrollbar-track {
	background: transparent;
}

.only-auth-popup ::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.15);
	border-radius: 3px;
}

.only-auth-popup ::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.25);
}

.only-auth-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 9998;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.only-auth-overlay.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* ==========================================================================
   Popup Container
   ========================================================================== */

.only-auth-popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.92);
	width: 1212px;
	max-width: 95%;
	height: 764px;
	max-height: 90vh;
	background: var(--auth-bg);
	border-radius: 28px;
	box-shadow: var(--auth-shadow);
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
	overflow: hidden;
}

.only-auth-popup.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, -50%) scale(1);
}

.only-auth-popup__container {
	display: flex;
	height: 100%;
}

/* Close Button */
.only-auth-popup__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.95);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	z-index: 10;
	color: var(--auth-text-secondary);
	transition: all var(--auth-transition);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.only-auth-popup__close:hover {
	background: #fff;
	color: var(--auth-primary);
	transform: rotate(90deg);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Left Panel - Promo Slider
   ========================================================================== */

.only-auth-popup__left {
	width: 580px;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
	padding: 32px;
	background: #fff;
}

.only-promo-slider {
	width: 516px;
	height: 700px;
	position: relative;
	border-radius: 20px;
	overflow: hidden;
}

.only-promo-slider__track {
	width: 100%;
	height: 100%;
	position: relative;
}

.only-promo-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}

.only-promo-slide.active {
	opacity: 1;
	visibility: visible;
}

.only-promo-slide__content {
	color: #fff;
	max-width: 100%;
}

.only-promo-slide__title {
	font-family: 'DM Serif Display', serif;
	font-size: 38px;
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 14px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.only-promo-slide__subtitle {
	font-size: 16px;
	opacity: 0.92;
	margin: 0;
	line-height: 1.5;
}

/* Slider Dots - Inside slide white area with Dynamic Color */
.only-promo-slider__dots {
	--dot-color: #FF812C;
	position: absolute;
	right: 56px; /* 32px padding + 24px from slide edge */
	bottom: 56px; /* 32px padding + 24px from bottom */
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	z-index: 5;
	padding: 0;
}

.only-promo-slider__dot {
	width: 8px;
	height: 8px;
	border-radius: 30px;
	background: var(--dot-color);
	opacity: 0.3;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
	flex: none;
}

.only-promo-slider__dot:hover {
	opacity: 0.5;
}

.only-promo-slider__dot.active {
	width: 26px;
	height: 8px;
	opacity: 1;
	border-radius: 30px;
}

/* ==========================================================================
   Right Panel - Auth Forms
   ========================================================================== */

.only-auth-popup__right {
	flex: 1;
	padding: 88px 52px 48px 84px; /* 88px top, 84px left padding to position content at 664px from popup left edge */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/* Full-width mode (after OTP verification - hide left slider) */
.only-auth-popup.full-width .only-auth-popup__left {
	display: none;
}

.only-auth-popup.full-width .only-auth-popup__right {
	max-width: 560px;
	margin: 0 auto;
	padding: 28px 36px;
	overflow-y: auto;
	overflow-x: hidden;
	max-height: calc(100vh - 80px);
}

.only-auth-popup.full-width {
	max-width: 620px;
	max-height: calc(100vh - 40px); /* Prevent bottom from being cut off */
	overflow: hidden;
}

/* Ensure proper scrolling in rewards step */
.only-auth-popup.full-width .only-auth-content {
	overflow-y: auto;
	overflow-x: hidden;
}

.only-auth-popup.full-width .only-auth-popup__container {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: calc(100vh - 60px);
	min-height: auto;
}

/* ==========================================================================
   Logo - Centered
   ========================================================================== */

.only-auth-logo {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 36px;
}

.only-auth-logo img {
	max-height: 44px;
	width: auto;
	object-fit: contain;
}

.only-auth-logo__text {
	font-family: 'DM Serif Display', serif;
	font-size: 28px;
	font-weight: 400;
	color: var(--auth-text);
	letter-spacing: -0.02em;
}

/* ==========================================================================
   Auth Content
   ========================================================================== */

.only-auth-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.only-auth-step {
	display: none;
	animation: fadeSlideIn 0.4s ease;
}

.only-auth-step.active {
	display: block;
}

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

/* ==========================================================================
   Auth Header
   ========================================================================== */

.only-auth-header {
	text-align: left;
	margin-bottom: 32px;
	position: relative;
}

.only-back-btn {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--auth-bg-secondary);
	border: none;
	border-radius: 50%;
	color: var(--auth-text-secondary);
	cursor: pointer;
	transition: all var(--auth-transition);
}

.only-back-btn:hover {
	background: var(--auth-primary-light);
	color: var(--auth-primary);
}

.only-auth-title {
	font-family: 'Manrope', sans-serif;
	font-size: 30px;
	font-weight: 700;
	color: #171717;
	margin: 0 0 10px;
	line-height: 44px;
}

.only-auth-subtitle {
	font-family: 'Manrope', sans-serif;
	font-size: 18px;
	font-weight: 500;
	color: rgba(23, 23, 23, 0.7);
	margin: 0;
	line-height: 25px;
}

.only-auth-subtitle strong {
	color: var(--auth-text);
	font-weight: 600;
}

.only-auth-success-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* ==========================================================================
   Method Toggle (Mobile / Email) - Legacy Button Style
   ========================================================================== */

.only-method-toggle:not(.only-method-toggle--switch) {
	display: flex;
	background: var(--auth-bg-secondary);
	border-radius: var(--auth-radius-sm);
	padding: 4px;
	margin-bottom: 28px;
}

.only-method-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 20px;
	background: transparent;
	border: none;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 500;
	color: var(--auth-text-secondary);
	cursor: pointer;
	transition: all 0.25s ease;
}

.only-method-btn:hover:not(.active) {
	color: var(--auth-text);
}

.only-method-btn.active {
	background: var(--auth-bg);
	color: var(--auth-primary);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.only-method-btn svg {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.only-method-btn.active svg {
	transform: scale(1.1);
}

/* ==========================================================================
   Method Toggle Switch - New Design
   ========================================================================== */

.only-method-toggle--switch {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	margin-bottom: 32px;
}

.only-method-toggle__label {
	font-family: 'Manrope', sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	color: rgba(23, 23, 23, 0.5);
	transition: color 0.3s ease;
	cursor: pointer;
}

.only-method-toggle__label--active {
	color: #171717;
}

/* Switch Container */
.only-method-toggle__switch {
	position: relative;
	width: 74px;
	height: 40px;
	background: radial-gradient(138.55% 107.04% at 100% 100%, #FFCAA3 0%, #FE6C0B 51%, #FF812C 100%);
	border-radius: 50px;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.only-method-toggle__switch:hover {
	box-shadow: 0 4px 12px rgba(255, 129, 44, 0.35);
}

/* Icon Circle - Only one visible at a time */
.only-method-toggle__icon {
	position: absolute;
	top: 3px;
	width: 34px;
	height: 34px;
	background: #FFFFFF;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s ease, visibility 0.3s ease, left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 0;
	visibility: hidden;
}

.only-method-toggle__icon svg {
	width: 20px;
	height: 20px;
	stroke: #FF812C;
	stroke-width: 2;
	fill: none;
}

.only-method-toggle__icon--mobile {
	left: 3px;
}

.only-method-toggle__icon--email {
	left: 37px;
}

/* Mobile selected (default) - show only mobile icon */
.only-method-toggle__switch[data-active="mobile"] .only-method-toggle__icon--mobile {
	opacity: 1;
	visibility: visible;
	left: 3px;
	background: #FFFFFF;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.only-method-toggle__switch[data-active="mobile"] .only-method-toggle__icon--mobile svg {
	stroke: #FF812C;
}

.only-method-toggle__switch[data-active="mobile"] .only-method-toggle__icon--email {
	opacity: 0;
	visibility: hidden;
}

/* Email selected - show only email icon */
.only-method-toggle__switch[data-active="email"] .only-method-toggle__icon--mobile {
	opacity: 0;
	visibility: hidden;
}

.only-method-toggle__switch[data-active="email"] .only-method-toggle__icon--email {
	opacity: 1;
	visibility: visible;
	left: 37px;
	background: #FFFFFF;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.only-method-toggle__switch[data-active="email"] .only-method-toggle__icon--email svg {
	stroke: #FF812C;
}

/* Label active states - active is dark, inactive is light */
.only-method-toggle--switch[data-active="mobile"] .only-method-toggle__label[data-method="mobile"] {
	color: #171717;
}

.only-method-toggle--switch[data-active="mobile"] .only-method-toggle__label[data-method="email"] {
	color: rgba(23, 23, 23, 0.5);
}

.only-method-toggle--switch[data-active="email"] .only-method-toggle__label[data-method="mobile"] {
	color: rgba(23, 23, 23, 0.5);
}

.only-method-toggle--switch[data-active="email"] .only-method-toggle__label[data-method="email"] {
	color: #171717;
}

/* ==========================================================================
   Input Panels
   ========================================================================== */

.only-input-panel {
	display: none;
	animation: fadeIn 0.3s ease;
}

.only-input-panel.active {
	display: flex;
	width: 400px;
	max-width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

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

/* ==========================================================================
   Form Elements
   ========================================================================== */

.only-form-group {
	margin-bottom: 0;
	width: 100%;
}

.only-form-group label {
	display: block;
	font-family: 'Manrope', sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	color: #171718;
	margin-bottom: 16px;
}

.only-optional {
	font-weight: 400;
	color: var(--auth-text-muted);
}

.only-input {
	width: 100%;
	padding: 14px 16px;
	border: none;
	border-radius: 0;
	font-family: 'Manrope', sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #525866;
	background: var(--auth-bg);
	transition: all var(--auth-transition);
	box-sizing: border-box;
}

.only-input:focus {
	outline: none;
	color: #171718;
}

.only-input::placeholder {
	color: #525866;
	font-weight: 400;
}

/* Phone Input Wrapper */
.only-phone-input-wrapper {
	display: flex;
	align-items: stretch;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(227, 225, 222, 0.4), 0 1px 2px rgba(95, 74, 46, 0.08);
	border-radius: 8px;
	/* No overflow:hidden here - it would clip the country dropdown.
	   Corner rounding is handled by the trigger and input themselves. */
	transition: all var(--auth-transition);
}

.only-phone-input-wrapper:focus-within {
	box-shadow: 0 0 0 2px #FF812C, 0 1px 2px rgba(95, 74, 46, 0.08);
}

.only-phone-input-wrapper .only-input {
	border: none;
	border-radius: 0 8px 8px 0;
	box-shadow: none !important;
	flex: 1;
}

.only-phone-input-wrapper .only-input:focus {
	box-shadow: none !important;
}

.only-auth-popup .ksq-country-selector {
	background: #FAFBFC;
	border-right: 1px solid #E2E8F0;
	min-width: 97px;
	width: 97px;
	border-radius: 8px 0 0 8px;
	/* No overflow:hidden - this element is only 97px wide and would clip
	   the 280px dropdown positioned against it. */
}

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

.only-auth-popup .ksq-country-code {
	/* Redundant next to the flag, and on platforms without flag-emoji support
	   (Windows) the flag itself renders as the same two letters - "GB GB +44".
	   The dial code is the part that matters in a phone field. */
	display: none;
}

.only-auth-popup .ksq-country-dial {
	font-size: 13px;
	white-space: nowrap;
	flex-shrink: 0;
}

.only-auth-popup .ksq-country-arrow {
	flex-shrink: 0;
	margin-left: 0;
}

.only-auth-popup .ksq-country-trigger {
	height: 100%;
	min-height: 48px;
	border-radius: 8px 0 0 8px;
	padding: 0 8px;
	gap: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FAFBFC;
	width: 100%;
	overflow: hidden;
}

/* Country Dropdown in Auth Popup */
.only-auth-popup .ksq-country-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	min-width: 280px;
	background: #fff;
	border: 1px solid #E6E9F0;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	z-index: 100001;
	max-height: 300px;
	overflow: hidden;
}

.only-auth-popup .ksq-country-search-wrapper {
	padding: 12px;
	border-bottom: 1px solid #E6E9F0;
	background: #fff;
}

.only-auth-popup .ksq-country-search-input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #E6E9F0;
	border-radius: 8px;
	font-size: 14px;
	outline: none;
	box-sizing: border-box;
	background: #F9FAFB;
	font-family: 'Roboto Flex', sans-serif;
}

.only-auth-popup .ksq-country-search-input:focus {
	border-color: #FF5100;
	background: #fff;
}

.only-auth-popup .ksq-country-search-input::placeholder {
	color: #9CA3AF;
}

.only-auth-popup .ksq-country-list {
	max-height: 220px;
	overflow-y: auto;
	padding: 4px 0;
}

.only-auth-popup .ksq-country-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.only-auth-popup .ksq-country-item:hover {
	background: #F5F5F5;
}

.only-auth-popup .ksq-country-item.active {
	background: #FFF5F0;
}

/* Email Input Wrapper */
.only-input-panel[data-method="email"] .only-input {
	box-shadow: 0 0 0 1px rgba(227, 225, 222, 0.4), 0 1px 2px rgba(95, 74, 46, 0.08);
	border-radius: 8px;
	padding: 14px 16px;
}

.only-input-panel[data-method="email"] .only-input:focus {
	box-shadow: 0 0 0 2px #FF812C, 0 1px 2px rgba(95, 74, 46, 0.08);
}

/* main.css puts `border: 1px solid var(--color-border)` on every input and
   recolours it on :focus. The orange ring here is drawn with box-shadow, so
   that border showed through as a dark line just inside it. Remove it for
   both states - `border: none` alone loses to the more specific main.css
   selector, so the width is zeroed explicitly. */
.only-auth-popup .only-input,
.only-auth-popup .only-input:focus {
	border: 0 none transparent;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.only-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px 12px;
	padding-right: 12px;
	border: none;
	border-radius: 8px;
	font-family: 'Manrope', sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 800;
	line-height: normal;
	text-transform: uppercase;
	text-align: center;
	font-feature-settings: 'liga' off;
	color: #fff;
	cursor: pointer;
	transition: all 0.25s ease;
	position: relative;
	overflow: hidden;
	align-self: stretch;
}

.only-btn--primary {
	background: #FF812C;
	color: #fff;
	box-shadow: 0 0 0 3px rgba(255, 129, 44, 0.40), 0 1px 2px 0 rgba(255, 129, 44, 0.08);
}

.only-btn--primary:hover:not(:disabled) {
	background: #F47420;
	transform: translateY(-2px);
	box-shadow: 0 0 0 3px rgba(255, 129, 44, 0.5), 0 4px 12px rgba(255, 129, 44, 0.3);
}

.only-btn--primary:active:not(:disabled) {
	transform: translateY(0);
}

.only-btn--primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.only-btn--full {
	width: 100%;
}

.only-btn__arrow {
	transition: transform 0.2s ease;
	display: none; /* Hide arrow in new design */
}

.only-btn:hover .only-btn__arrow {
	transform: translateX(4px);
}

.only-btn.loading {
	pointer-events: none;
}

.only-btn.loading .only-btn__text,
.only-btn.loading .only-btn__arrow,
.only-btn.loading .only-btn__icon {
	opacity: 0;
}

.only-btn.loading::after {
	content: '';
	position: absolute;
	width: 22px;
	height: 22px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin 0.7s linear infinite;
}

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

/* Link Buttons */
.only-link {
	background: none;
	border: none;
	color: var(--auth-primary);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	padding: 0;
	text-decoration: none;
	transition: all var(--auth-transition);
}

.only-link:hover {
	color: var(--auth-primary-hover);
	text-decoration: underline;
}

.only-link:disabled {
	color: var(--auth-text-muted);
	cursor: not-allowed;
}

/* Change Number Button in OTP Step */
.only-change-number-btn {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--auth-primary);
}

/* ==========================================================================
   Divider
   ========================================================================== */

.only-auth-divider {
	display: flex;
	align-items: center;
	gap: 15px;
	margin: 28px 0;
	width: 400px;
	max-width: 100%;
}

.only-auth-divider::before,
.only-auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #CECECE;
}

.only-auth-divider span {
	font-family: 'Manrope', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: rgba(23, 23, 24, 0.4);
	text-transform: uppercase;
}

/* ==========================================================================
   Social Login
   ========================================================================== */

.only-social-login {
	margin-bottom: 24px;
	width: 400px;
	max-width: 100%;
}

.only-google-btn-wrapper {
	display: flex;
	justify-content: flex-start;
	width: 400px;
	max-width: 100%;
}

.only-google-btn-wrapper > div,
.only-google-btn-wrapper > div > div {
	width: 400px !important;
	max-width: 100% !important;
	height: 55px !important;
}

/* Only the iframe carried a border-radius, so Google's own focus/active
   highlight painted square corners over the rounded button on click.
   Round every layer, including the wrapper, and clip to it. */
.only-google-btn-wrapper,
.only-google-btn-wrapper > div,
.only-google-btn-wrapper > div > div,
.only-google-btn-wrapper [data-type="standard"],
.only-google-btn-wrapper .S9gUrf-YoZ4jf,
.only-google-btn-wrapper .nsm7Bb-HzV7m-LgbsSe {
	border-radius: 8px !important;
	overflow: hidden !important;
}

.only-google-btn-wrapper iframe {
	width: 400px !important;
	max-width: 100% !important;
	height: 55px !important;
	border-radius: 8px !important;
}

.only-google-btn-wrapper [data-type="standard"] {
	width: 400px !important;
	height: 55px !important;
}

.only-google-btn-wrapper .S9gUrf-YoZ4jf {
	width: 400px !important;
	height: 55px !important;
}

.only-google-btn-wrapper .nsm7Bb-HzV7m-LgbsSe {
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 16px 12px !important;
	gap: 16px !important;
	width: 400px !important;
	max-width: 100% !important;
	min-width: 44px !important;
	height: 55px !important;
	background: #FFFFFF !important;
	border: 1px solid #E7E7E7 !important;
	border-radius: 8px !important;
}

.only-google-btn-wrapper .nsm7Bb-HzV7m-LgbsSe-Bz112c {
	width: 20px !important;
	height: 20px !important;
	flex: none !important;
	flex-grow: 0 !important;
}

.only-google-btn-wrapper .nsm7Bb-HzV7m-LgbsSe-BPrWId {
	font-family: 'Inter', sans-serif !important;
	font-style: normal !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: normal !important;
	text-align: center !important;
	color: #121212 !important;
	font-feature-settings: 'liga' off, 'clig' off !important;
}

/* ==========================================================================
   Trust Badges
   ========================================================================== */

.only-auth-trust {
	display: flex;
	justify-content: center;
	gap: 28px;
	padding-top: 8px;
}

.only-auth-trust__item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--auth-text-muted);
}

.only-auth-trust__item svg {
	color: var(--auth-success);
	flex-shrink: 0;
}

/* ==========================================================================
   OTP Container
   ========================================================================== */

/* OTP Step - Figma Style */
.only-otp-container {
	text-align: left;
	width: 401px;
	max-width: 100%;
}

/* OTP Title */
#ksqOtpStep .only-auth-title {
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 30px;
	line-height: 44px;
	color: #171717;
	margin-bottom: 10px;
}

/* OTP Subtitle */
#ksqOtpStep .only-auth-subtitle {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 25px;
	color: rgba(23, 23, 23, 0.7);
	margin-bottom: 0;
}

/* Wrong number link */
#ksqOtpStep .only-otp-change-link,
.only-otp-change-link {
	font-family: 'Manrope', sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
	color: #FE6C0B;
	text-decoration: none;
	margin-top: 18px;
	display: inline-block;
	width: 185px;
	height: 22px;
}

/* "Resend OTP" is a <button>, so without a reset it renders with the
   browser's default grey chrome and a fixed 185px width. Style it as the
   text link it is meant to be. */
.only-resend-btn,
#ksqResendOtp {
	background: none;
	border: none;
	padding: 6px 4px;
	width: auto;
	height: auto;
	cursor: pointer;
	font-family: 'Manrope', sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 20px;
	color: #FE6C0B;
	text-decoration: none;
	margin-top: 10px;
}

.only-resend-btn:hover:not(:disabled),
#ksqResendOtp:hover:not(:disabled) {
	text-decoration: underline;
	background: none;
}

.only-resend-btn:disabled,
#ksqResendOtp:disabled {
	color: rgba(23, 23, 23, 0.4);
	cursor: not-allowed;
	text-decoration: none;
}

.only-otp-change-link:hover {
	text-decoration: underline;
}

/* OTP Inputs Container - Figma Exact */
.only-otp-inputs {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0px;
	gap: 11px;
	/* Was a fixed 401px, which overflowed the right panel at every width
	   below ~1200px (the panel is only ~282px at 1051px, so the last box
	   was cut off). Fill the available width and let the boxes divide it. */
	width: 100%;
	max-width: 401px;
	height: auto;
	margin: 28px 0 24px 0;
}

/* Individual OTP Input - Figma Exact */
.only-otp-input {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 0px;
	/* Fluid, not a fixed 92px: four fixed boxes plus gaps need 401px, which
	   overflowed the right panel at every width below ~1200px. flex lets
	   them share whatever the row actually has, capped at the design size. */
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: 92px !important;
	aspect-ratio: 92 / 58;
	height: auto !important;
	max-height: 58px;
	text-align: center;
	font-family: 'Manrope', sans-serif;
	font-size: 24px;
	font-weight: 600;
	border: none;
	border-radius: 8px;
	background: #FFFFFF;
	box-shadow: 0px 0px 0px 1px rgba(227, 225, 222, 0.4), 0px 1px 2px rgba(95, 74, 46, 0.08);
	color: #171717;
	transition: all 0.2s ease;
	caret-color: #FF812C;
}

.only-otp-input:focus {
	outline: none;
	box-shadow: 0px 0px 0px 2px #FF812C, 0px 1px 2px rgba(95, 74, 46, 0.08);
}

.only-otp-input.filled {
	box-shadow: 0px 0px 0px 2px #22c55e, 0px 1px 2px rgba(95, 74, 46, 0.08);
	background: #FFFFFF;
}

.only-otp-input.error {
	box-shadow: 0px 0px 0px 2px #ef4444, 0px 1px 2px rgba(95, 74, 46, 0.08);
	background: #FFFFFF;
	animation: shake 0.4s ease;
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-6px); }
	40% { transform: translateX(6px); }
	60% { transform: translateX(-6px); }
	80% { transform: translateX(6px); }
}

/* Verify Code Button */
#ksqOtpStep .only-btn--primary,
#ksqVerifyOtp {
	width: 400px;
	max-width: 100%;
	height: 46px;
	padding: 0 12px;
	background: #FF812C;
	box-shadow: 0px 0px 0px 3px rgba(255, 129, 44, 0.4), 0px 1px 2px rgba(255, 129, 44, 0.08);
	border-radius: 8px;
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: 16px;
	line-height: 22px;
	text-transform: uppercase;
	color: #FFFFFF;
	border: none;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
}

/* OTP Actions */
.only-otp-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 400px;
	max-width: 100%;
}

/* Resend Timer.
   The verify button sits in .only-otp-container while this sits in
   .only-otp-actions, so that container's gap never applies between them -
   the timer ended up flush against the button, touching its 3px focus
   glow. Space it from the button explicitly. */
.only-otp-timer {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 22px;
	color: rgba(23, 23, 23, 0.7);
	margin: 14px 0 0;
	text-align: center;
}

.only-countdown {
	font-weight: 500;
	color: #FE6C0B;
}

/* Back button styling for OTP step */
#ksqOtpStep .only-back-btn {
	position: static;
	transform: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	margin-bottom: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 0;
}

#ksqOtpStep .only-back-btn:hover {
	background: none;
}

#ksqOtpStep .only-back-btn svg {
	width: 24px;
	height: 24px;
	stroke: #171717;
	stroke-width: 2;
}

/* ==========================================================================
   Profile Form
   ========================================================================== */

.only-profile-form {
	max-width: 100%;
}

/* ==========================================================================
   Status Message
   ========================================================================== */

.only-auth-message {
	margin-top: 20px;
	padding: 14px 18px;
	border-radius: var(--auth-radius-sm);
	font-size: 14px;
	text-align: center;
	font-weight: 500;
	animation: fadeSlideIn 0.3s ease;
}

.only-auth-message.success {
	background: rgba(34, 197, 94, 0.1);
	color: #166534;
	border: 1px solid var(--auth-success);
}

.only-auth-message.error {
	background: rgba(239, 68, 68, 0.1);
	color: #991b1b;
	border: 1px solid var(--auth-error);
}

.only-auth-message.loading,
.only-auth-message.info {
	background: rgba(59, 130, 246, 0.1);
	color: #1e40af;
	border: 1px solid #3b82f6;
}

/* ==========================================================================
   Logged In State
   ========================================================================== */

.only-auth-logged-in {
	padding: 16px 0;
}

.only-auth-user {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 22px;
	background: linear-gradient(135deg, var(--auth-bg-secondary) 0%, #f3f4f6 100%);
	border-radius: var(--auth-radius);
	margin-bottom: 28px;
}

.only-auth-user__avatar {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.only-auth-user__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.only-auth-user__initials {
	font-size: 26px;
	font-weight: 600;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.only-auth-user__info {
	flex: 1;
}

.only-auth-user__greeting {
	display: block;
	font-size: 13px;
	color: var(--auth-text-secondary);
	margin-bottom: 4px;
}

.only-auth-user__name {
	display: block;
	font-size: 20px;
	font-weight: 600;
	color: var(--auth-text);
}

/* Account Menu */
.only-auth-menu {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.only-auth-menu__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 18px;
	border-radius: var(--auth-radius-sm);
	color: var(--auth-text);
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	transition: all var(--auth-transition);
}

.only-auth-menu__item:hover {
	background: var(--auth-bg-secondary);
	color: var(--auth-primary);
	transform: translateX(4px);
}

.only-auth-menu__item svg {
	flex-shrink: 0;
	color: var(--auth-text-secondary);
	transition: color var(--auth-transition);
}

.only-auth-menu__item:hover svg {
	color: var(--auth-primary);
}

.only-auth-menu__item--logout {
	margin-top: 12px;
	border-top: 1px solid var(--auth-border);
	padding-top: 18px;
	color: var(--auth-error);
}

.only-auth-menu__item--logout:hover {
	background: rgba(239, 68, 68, 0.08);
	color: var(--auth-error);
}

.only-auth-menu__item--logout svg {
	color: var(--auth-error);
}

/* ==========================================================================
   Rewards Step - Premium Dark/Gold Luxury Design
   ========================================================================== */

/* Rewards step gets a premium dark theme */
/* ==========================================================================
   Rewards Wizard - Beautiful Light Theme
   ========================================================================== */
#ksqRewardsStep {
	--rewards-bg: #ffffff;
	--rewards-bg-card: #f8fafc;
	--rewards-bg-card-hover: #f1f5f9;
	--rewards-primary: #FF6B35;
	--rewards-primary-light: #fff2ed;
	--rewards-primary-dark: #e55a2b;
	--rewards-success: #22c55e;
	--rewards-success-light: #dcfce7;
	--rewards-pending: #f59e0b;
	--rewards-pending-light: #fef3c7;
	--rewards-text: #1e293b;
	--rewards-text-muted: #64748b;
	--rewards-text-secondary: #94a3b8;
	--rewards-border: #e2e8f0;
	--rewards-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Override popup styles for rewards step */
.only-auth-popup.full-width #ksqRewardsStep {
	background: var(--rewards-bg);
	margin: -28px -36px;
	padding: 24px 32px 48px; /* Extra bottom padding to prevent cut off */
	border-radius: 24px;
}

/* Header */
#ksqRewardsStep .only-auth-header {
	margin-bottom: 16px;
	text-align: center;
}

#ksqRewardsStep .only-auth-success-icon {
	width: 48px;
	height: 48px;
	margin: 0 auto 10px;
	background: linear-gradient(135deg, var(--rewards-success) 0%, #16a34a 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	box-shadow: 0 6px 18px rgba(34, 197, 94, 0.35);
	animation: successPop 0.5s ease-out;
}

@keyframes successPop {
	0% { transform: scale(0); opacity: 0; }
	60% { transform: scale(1.1); }
	100% { transform: scale(1); opacity: 1; }
}

#ksqRewardsStep .only-auth-success-icon svg {
	width: 22px;
	height: 22px;
	stroke-width: 2.5;
}

#ksqRewardsStep .only-auth-title {
	font-family: 'DM Serif Display', serif;
	font-size: 22px;
	font-weight: 400;
	color: var(--rewards-text);
	margin: 0 0 4px;
}

#ksqRewardsStep .only-auth-subtitle {
	font-size: 13px;
	color: var(--rewards-text-muted);
	font-weight: 400;
}

/* ==========================================
   Money Summary Card - Shows Earned/Pending
   ========================================== */
.only-rewards-money {
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
	padding: 12px;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border-radius: 12px;
	border: 1px solid #bbf7d0;
}

.only-rewards-money__item {
	flex: 1;
	text-align: center;
	padding: 10px 6px;
	background: white;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.only-rewards-money__icon {
	width: 28px;
	height: 28px;
	margin: 0 auto 6px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.only-rewards-money__item--earned .only-rewards-money__icon {
	background: var(--rewards-success-light);
	color: var(--rewards-success);
}

.only-rewards-money__item--pending .only-rewards-money__icon {
	background: var(--rewards-pending-light);
	color: var(--rewards-pending);
}

.only-rewards-money__label {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--rewards-text-muted);
	margin-bottom: 2px;
}

.only-rewards-money__amount {
	font-size: 18px;
	font-weight: 700;
}

.only-rewards-money__item--earned .only-rewards-money__amount {
	color: var(--rewards-success);
}

.only-rewards-money__item--pending .only-rewards-money__amount {
	color: var(--rewards-pending);
}

/* ==========================================
   Progress Bar with Steps
   ========================================== */
.only-rewards-progress {
	margin-bottom: 14px;
}

.only-rewards-progress__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.only-rewards-progress__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--rewards-text);
	display: flex;
	align-items: center;
	gap: 6px;
}

.only-rewards-progress__label span {
	font-size: 14px;
}

.only-rewards-progress__step {
	font-size: 13px;
	font-weight: 500;
	color: var(--rewards-text-muted);
}

.only-rewards-progress__bar-wrap {
	position: relative;
	height: 10px;
	background: #e2e8f0;
	border-radius: 10px;
	overflow: hidden;
}

.only-rewards-progress__bar {
	height: 100%;
	background: linear-gradient(90deg, var(--rewards-primary) 0%, #ff8c5a 100%);
	border-radius: 10px;
	transition: width 0.5s ease;
	position: relative;
}

.only-rewards-progress__bar::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, 
		transparent 0%,
		rgba(255, 255, 255, 0.4) 50%,
		transparent 100%);
	animation: progressShine 2s infinite;
}

@keyframes progressShine {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

.only-rewards-progress__dollar {
	position: absolute;
	right: -14px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	background: var(--rewards-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 700;
	font-size: 14px;
	box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
	border: 3px solid white;
}

/* ==========================================
   Step Indicators - Checkbox Style
   ========================================== */
.only-rewards-steps {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.only-rewards-step {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
	background: var(--rewards-bg-card);
	border: 1px solid var(--rewards-border);
	border-radius: 16px;
	font-size: 11px;
	font-weight: 500;
	color: var(--rewards-text-muted);
	transition: all 0.3s ease;
}

.only-rewards-step__check {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	transition: all 0.3s ease;
}

.only-rewards-step--pending .only-rewards-step__check {
	background: var(--rewards-border);
	color: var(--rewards-text-muted);
}

.only-rewards-step--current {
	background: var(--rewards-primary-light);
	border-color: var(--rewards-primary);
	color: var(--rewards-primary);
}

.only-rewards-step--current .only-rewards-step__check {
	background: var(--rewards-primary);
	color: white;
}

.only-rewards-step--completed {
	background: var(--rewards-success-light);
	border-color: var(--rewards-success);
	color: var(--rewards-success);
}

.only-rewards-step--completed .only-rewards-step__check {
	background: var(--rewards-success);
	color: white;
}

.only-rewards-step__reward {
	font-weight: 700;
	margin-left: 2px;
}

/* ==========================================
   Current Field Card
   ========================================== */
.only-rewards-field-card {
	background: white;
	border: 2px solid var(--rewards-border);
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 14px;
	text-align: center;
	box-shadow: var(--rewards-shadow);
	animation: cardSlide 0.4s ease-out;
}

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

.only-rewards-field-card__icon {
	width: 44px;
	height: 44px;
	margin: 0 auto 10px;
	background: linear-gradient(135deg, var(--rewards-primary-light) 0%, #ffe4d9 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	color: var(--rewards-primary);
}

.only-rewards-field-card__title {
	font-family: 'DM Serif Display', serif;
	font-size: 18px;
	font-weight: 400;
	color: var(--rewards-text);
	margin: 0 0 4px;
}

.only-rewards-field-card__reward {
	font-size: 13px;
	color: var(--rewards-text-muted);
	margin-bottom: 14px;
}

.only-rewards-field-card__reward strong {
	color: var(--rewards-success);
	font-weight: 700;
}

/* main.css styles inputs by attribute (`input[type="text"]`), which outranks
   a single class - so this field inherited its 1px black border and 4px
   radius instead of the rewards styling. Match that specificity. */
.only-auth-popup input.only-rewards-field-card__input,
.only-rewards-field-card__input {
	width: 100%;
	padding: 12px 14px;
	font-size: 15px;
	border: 2px solid var(--rewards-border, #e2e8f0);
	border-radius: 10px;
	background: var(--rewards-bg-card, #f8fafc);
	color: var(--rewards-text, #171717);
	transition: all 0.2s ease;
	margin-bottom: 12px;
}

.only-auth-popup input.only-rewards-field-card__input:focus,
.only-rewards-field-card__input:focus {
	outline: none;
	border-color: var(--rewards-primary, #FF6B35);
	background: white;
	box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);
}

.only-rewards-field-card__input::placeholder {
	color: var(--rewards-text-secondary);
}

.only-rewards-field-card__btn {
	width: 100%;
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 600;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: all 0.2s ease;
}

.only-rewards-field-card__btn--primary {
	background: linear-gradient(135deg, var(--rewards-primary) 0%, var(--rewards-primary-dark) 100%);
	color: white;
	box-shadow: 0 4px 16px rgba(255, 107, 53, 0.35);
}

.only-rewards-field-card__btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(255, 107, 53, 0.45);
}

.only-rewards-field-card__btn--primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* Skip Link */
.only-rewards-skip {
	display: block;
	text-align: center;
	padding: 8px;
	font-size: 13px;
	color: var(--rewards-text-muted);
	background: none;
	border: none;
	cursor: pointer;
	transition: color 0.2s ease;
}

.only-rewards-skip:hover {
	color: var(--rewards-text);
}

/* ==========================================
   Completed Steps List
   ========================================== */
.only-rewards-completed {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--rewards-border);
}

.only-rewards-completed__title {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--rewards-text-muted);
	margin-bottom: 8px;
	text-align: center;
}

.only-rewards-completed__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
}

.only-rewards-completed__item {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	background: var(--rewards-success-light);
	border-radius: 14px;
	font-size: 11px;
	font-weight: 500;
	color: var(--rewards-success);
}

.only-rewards-completed__item svg {
	width: 14px;
	height: 14px;
}

/* Legacy styles below - keeping for backwards compatibility */
.only-rewards-summary {
	display: none; /* Hide old summary style */
}

.only-rewards-summary__icon svg {
	width: 16px;
	height: 16px;
}

.only-rewards-summary__item--claimed .only-rewards-summary__icon {
	background: rgba(74, 222, 128, 0.15);
	color: var(--rewards-success);
}

.only-rewards-summary__item--pending .only-rewards-summary__icon {
	background: rgba(212, 175, 55, 0.15);
	color: var(--rewards-gold);
}

.only-rewards-summary__item--potential .only-rewards-summary__icon {
	background: rgba(192, 192, 192, 0.1);
	color: var(--rewards-text-muted);
}

.only-rewards-summary__label {
	font-size: 10px;
	color: var(--rewards-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	font-weight: 600;
}

.only-rewards-summary__value {
	font-size: 20px;
	font-weight: 700;
	color: var(--rewards-text);
}

.only-rewards-summary__item--claimed .only-rewards-summary__value {
	color: var(--rewards-success);
}

.only-rewards-summary__item--pending .only-rewards-summary__value {
	background: linear-gradient(135deg, var(--rewards-gold) 0%, var(--rewards-gold-light) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.only-rewards-summary__item--potential .only-rewards-summary__value {
	color: var(--rewards-text-secondary);
}

/* Rewards Fields - Elegant Card Grid */
.only-rewards-fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 24px;
}

.only-reward-field {
	background: var(--rewards-bg-card);
	border-radius: 14px;
	padding: 16px;
	transition: all 0.3s ease;
	border: 1px solid var(--rewards-border);
	position: relative;
}

.only-reward-field:hover:not(.complete) {
	border-color: rgba(212, 175, 55, 0.3);
	background: var(--rewards-bg-card-hover);
	transform: translateY(-2px);
	box-shadow: var(--rewards-glow);
}

.only-reward-field.complete {
	background: linear-gradient(135deg, rgba(74, 222, 128, 0.08) 0%, rgba(74, 222, 128, 0.03) 100%);
	border-color: rgba(74, 222, 128, 0.25);
}

.only-reward-field.complete::after {
	content: '';
	position: absolute;
	top: 12px;
	right: 12px;
	width: 20px;
	height: 20px;
	background: var(--rewards-success);
	border-radius: 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230f0f0f' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 12px;
	background-position: center;
	background-repeat: no-repeat;
}

.only-reward-field__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.only-reward-field.complete .only-reward-field__header {
	margin-bottom: 6px;
	padding-right: 28px;
}

.only-reward-field__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--rewards-text);
	letter-spacing: 0.01em;
}

.only-reward-field__amount {
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 20px;
	background: rgba(212, 175, 55, 0.15);
	color: var(--rewards-gold);
	border: 1px solid rgba(212, 175, 55, 0.25);
}

.only-reward-field__amount.claimed {
	background: rgba(74, 222, 128, 0.12);
	color: var(--rewards-success);
	border-color: rgba(74, 222, 128, 0.25);
}

/* Input Group - Modern Dark Style */
.only-reward-input-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.only-reward-input-group .only-input,
#ksqRewardsStep .only-reward-input-group .only-input {
	width: 100%;
	padding: 12px 14px;
	font-size: 14px;
	border-radius: 10px;
	background: var(--rewards-bg);
	border: 1px solid var(--rewards-border);
	color: var(--rewards-text);
	transition: all 0.2s ease;
}

.only-reward-input-group .only-input::placeholder {
	color: var(--rewards-text-muted);
}

.only-reward-input-group .only-input:focus {
	outline: none;
	border-color: var(--rewards-gold);
	box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.only-reward-input-group .only-phone-wrapper {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.only-reward-input-group .only-phone-wrapper .only-input {
	flex: 1;
}

.only-reward-save-btn {
	width: 100%;
	padding: 12px 16px;
	background: linear-gradient(135deg, var(--rewards-gold) 0%, var(--rewards-gold-dark) 100%);
	color: #0f0f0f;
	border: none;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.only-reward-save-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4);
}

.only-reward-save-btn.loading {
	opacity: 0.7;
	pointer-events: none;
	position: relative;
}

.only-reward-save-btn.loading::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(15, 15, 15, 0.3);
	border-top-color: #0f0f0f;
	border-radius: 50%;
	animation: spin 0.7s linear infinite;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
}

.only-reward-value {
	font-size: 14px;
	color: var(--rewards-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-style: italic;
}

.only-field-error {
	display: block;
	font-size: 11px;
	color: #f87171;
	margin-top: 6px;
	padding-left: 2px;
}

/* Rewards Actions - Premium Buttons */
.only-rewards-actions {
	display: flex;
	gap: 12px;
	margin-top: 8px;
}

.only-rewards-actions .only-btn {
	flex: 1;
	padding: 16px 20px;
	font-size: 14px;
	border-radius: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

#ksqRewardsStep .only-btn--primary,
#ksqRewardsStep #ksqClaimRewards {
	background: linear-gradient(135deg, var(--rewards-gold) 0%, var(--rewards-gold-dark) 100%);
	color: #0f0f0f;
	border: none;
	box-shadow: 0 4px 20px rgba(212, 175, 55, 0.35);
}

#ksqRewardsStep .only-btn--primary:hover,
#ksqRewardsStep #ksqClaimRewards:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(212, 175, 55, 0.5);
}

#ksqRewardsStep .only-btn--secondary {
	background: transparent;
	color: var(--rewards-text-muted);
	border: 1px solid var(--rewards-border);
}

#ksqRewardsStep .only-btn--secondary:hover {
	background: var(--rewards-bg-card);
	color: var(--rewards-text);
	border-color: var(--rewards-text-muted);
}

/* Full width fields (email/phone) */
.only-reward-field.full-width {
	grid-column: span 2;
}

.only-reward-field.full-width .only-reward-input-group {
	flex-direction: row;
	align-items: stretch;
	gap: 10px;
}

.only-reward-field.full-width .only-reward-input-group .only-input {
	flex: 1;
}

.only-reward-field.full-width .only-reward-save-btn {
	width: auto;
	padding: 12px 24px;
}

/* Profile OTP Input - Dark Theme */
.only-profile-otp {
	text-align: center;
	padding: 16px;
	background: var(--rewards-bg);
	border-radius: 12px;
	border: 1px solid var(--rewards-border);
}

.only-profile-otp__info {
	font-size: 12px;
	color: var(--rewards-text-muted);
	margin-bottom: 14px;
}

.only-profile-otp__info strong {
	color: var(--rewards-gold);
}

.only-profile-otp__inputs {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 14px;
}

.only-profile-otp__input {
	width: 42px;
	height: 48px;
	border: 2px solid var(--rewards-border);
	border-radius: 10px;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	color: var(--rewards-text);
	background: var(--rewards-bg-card);
	transition: all 0.2s ease;
}

.only-profile-otp__input:focus {
	border-color: var(--rewards-gold);
	outline: none;
	box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

.only-profile-otp__inputs.shake {
	animation: shake 0.5s ease;
}

.only-profile-otp__inputs.shake .only-profile-otp__input {
	border-color: #f87171;
}

.only-profile-otp__actions {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.only-profile-otp__verify {
	padding: 10px 20px;
	background: linear-gradient(135deg, var(--rewards-gold) 0%, var(--rewards-gold-dark) 100%);
	color: #0f0f0f;
	border: none;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
}

.only-profile-otp__verify:hover {
	box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4);
}

.only-profile-otp__verify.loading {
	opacity: 0.7;
	pointer-events: none;
}

.only-profile-otp__cancel {
	padding: 10px 16px;
	background: transparent;
	color: var(--rewards-text-muted);
	border: 1px solid var(--rewards-border);
	border-radius: 8px;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.only-profile-otp__cancel:hover {
	border-color: var(--rewards-text-muted);
	color: var(--rewards-text);
}

/* Mobile - single column */
@media (max-width: 560px) {
	/* The negative side margins were bleeding this step past the panel's
	   padding box, clipping "Step N of N" and forcing a scrollbar. The panel
	   already provides the padding on mobile, so drop the bleed entirely. */
	.only-auth-popup.full-width #ksqRewardsStep {
		margin: 0;
		padding: 0;
	}
	
	.only-rewards-fields {
		grid-template-columns: 1fr;
	}
	
	.only-reward-field.full-width {
		grid-column: span 1;
	}
	
	.only-reward-field.full-width .only-reward-input-group {
		flex-direction: column;
	}
	
	.only-reward-field.full-width .only-reward-save-btn {
		width: 100%;
	}
	
	.only-rewards-summary {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}
	
	.only-rewards-summary__item {
		padding: 12px 8px;
	}
	
	.only-rewards-summary__value {
		font-size: 16px;
	}
	
	.only-rewards-actions {
		flex-direction: column;
	}
}

.only-btn--secondary {
	background: transparent;
	color: var(--auth-text-secondary);
	border: 1px solid var(--auth-border);
}

.only-btn--secondary:hover {
	background: var(--auth-bg-secondary);
	color: var(--auth-text);
	border-color: var(--auth-text-secondary);
}

/* Confetti Animation - Enhanced */
.only-confetti-burst {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 300px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 100;
}

.only-confetti-burst span {
	position: absolute;
	font-size: 24px;
	animation: confettiExplode 1s ease-out forwards;
}

.only-confetti-burst span:nth-child(1) { --angle: 0deg; --distance: 80px; animation-delay: 0s; }
.only-confetti-burst span:nth-child(2) { --angle: 45deg; --distance: 100px; animation-delay: 0.05s; }
.only-confetti-burst span:nth-child(3) { --angle: 90deg; --distance: 70px; animation-delay: 0.1s; }
.only-confetti-burst span:nth-child(4) { --angle: 135deg; --distance: 90px; animation-delay: 0.05s; }
.only-confetti-burst span:nth-child(5) { --angle: 180deg; --distance: 85px; animation-delay: 0s; }
.only-confetti-burst span:nth-child(6) { --angle: 225deg; --distance: 75px; animation-delay: 0.05s; }
.only-confetti-burst span:nth-child(7) { --angle: 270deg; --distance: 95px; animation-delay: 0.1s; }
.only-confetti-burst span:nth-child(8) { --angle: 315deg; --distance: 80px; animation-delay: 0.05s; }

@keyframes confettiExplode {
	0% { 
		left: 50%; 
		top: 50%; 
		opacity: 1;
		transform: translate(-50%, -50%) rotate(0deg) scale(0);
	}
	20% {
		transform: translate(-50%, -50%) rotate(90deg) scale(1.2);
	}
	100% { 
		left: calc(50% + cos(var(--angle)) * var(--distance)); 
		top: calc(50% + sin(var(--angle)) * var(--distance)); 
		opacity: 0;
		transform: translate(-50%, -50%) rotate(360deg) scale(0.5);
	}
}

/* Country Selector in Rewards - Dark Theme */
#ksqRewardCountrySelector {
	flex-shrink: 0;
}

#ksqRewardCountrySelector .ksq-country-selector {
	min-width: 90px;
	background: var(--rewards-bg);
	border: 1px solid var(--rewards-border);
	border-radius: 10px;
}

#ksqRewardCountrySelector .ksq-country-trigger {
	color: var(--rewards-text);
	padding: 12px;
}

#ksqRewardCountrySelector .ksq-country-dropdown {
	background: var(--rewards-bg-card);
	border: 1px solid var(--rewards-border);
}

#ksqRewardCountrySelector .ksq-country-option:hover {
	background: var(--rewards-bg-card-hover);
}

/* Gold shimmer effect for CTA */
@keyframes goldShimmer {
	0% {
		background-position: -200% center;
	}
	100% {
		background-position: 200% center;
	}
}

#ksqClaimRewards {
	background: linear-gradient(
		90deg,
		var(--rewards-gold-dark) 0%,
		var(--rewards-gold) 25%,
		var(--rewards-gold-light) 50%,
		var(--rewards-gold) 75%,
		var(--rewards-gold-dark) 100%
	);
	background-size: 200% 100%;
	animation: goldShimmer 3s linear infinite;
	border: none;
}

/* ==========================================================================
   Responsive - Tablet
   ========================================================================== */

/* 1100px, not 900px: between those widths the promo panel still took half
   the popup, leaving the form ~157px wide - the OTP boxes were squeezed to
   ~31px and the 4th was cut off. Drop the promo earlier and give the form
   the full popup. */
@media (max-width: 1100px) {
	.only-auth-popup {
		max-width: 480px;
	}
	
	.only-auth-popup__left {
		display: none;
	}

	/* With the promo hidden this row has a single child, which it stretched
	   instead of growing with - same collapse as on mobile. */
	.only-auth-popup__container {
		flex-direction: column;
	}

	.only-auth-popup__right {
		padding: 40px 36px;
		flex: 0 0 auto;
	}
}

/* ==========================================================================
   Responsive - Mobile
   ========================================================================== */

@media (max-width: 600px) {
	/* Mobile overlay. Was 30px all round, which cost 60px of width and left
	   the form cramped; 16px keeps a comfortable tap-to-dismiss margin while
	   giving the content back most of the screen. */
	.only-auth-overlay {
		padding: 16px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* The rewards wizard adds .full-width, whose desktop rules (620px popup,
	   560px inner panel, 28px/36px padding, max-height: 100vh - 40px) sit
	   outside any media query - so on a phone the panel kept desktop padding
	   and scrolled inside a short box. Fold it into the mobile sizing. */
	.only-auth-popup.full-width {
		max-width: min(420px, calc(100% - 32px));
		max-height: calc(100dvh - 32px);
	}

	.only-auth-popup.full-width .only-auth-popup__right {
		max-width: 100%;
		padding: 48px 18px 20px;
		max-height: none;
	}

	.only-auth-popup.full-width .only-auth-popup__container {
		max-height: 100%;
	}

	.only-auth-popup {
		position: fixed;
		width: calc(100% - 32px);
		/* Cap the width: between ~480px and 600px the popup stretched to the
		   full viewport while the type stayed phone-sized, so the form read
		   as small content floating in a wide box. */
		max-width: min(420px, calc(100% - 32px));
		/* The inlined critical CSS sets `inset:0` on this element, so right and
		   bottom must be cleared. Left at bottom:0, `height:auto` stretches the
		   box from top:50% to the viewport bottom (the old ~378px short box).
		   With both cleared, `auto` shrink-wraps the form.
		   Do NOT use height:max-content/fit-content here: WebKit (every iOS
		   browser) resolves it to 0px for this flex column, because the child
		   container's max-height:100% depends on it. The popup was active and
		   opaque but 0px tall, so iOS showed only the backdrop. Same fix as
		   .only-trust-popup in trust-bar-popup.css. */
		right: auto;
		bottom: auto;
		height: auto;
		min-height: 0;
		max-height: calc(100vh - 32px);
		max-height: calc(100dvh - 32px); /* dvh accounts for mobile browser chrome */
		border-radius: 20px;
		display: flex;
		flex-direction: column;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0.95);
		opacity: 0;
	}
	
	.only-auth-popup.active {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
	
	.only-auth-popup__container {
		/* Grow with the form instead of being pinned to the popup's own
		   (collapsed) height - that mismatch is what made the container
		   scroll while the popup stayed ~378px tall. */
		height: auto;
		flex: 0 0 auto;
		min-height: auto;
		/* The left promo panel is hidden on mobile, so this two-column row has
		   a single child. As a row it stretched that child to the container's
		   own height instead of growing with it, capping the popup at ~378px
		   and forcing the form to scroll. Column lets height follow content. */
		flex-direction: column;
		/* Fill the popup and scroll inside it, rather than measuring against the
		   viewport independently - that mismatch clipped the bottom of the form. */
		max-height: 100%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.only-auth-popup__right {
		/* Tightened from 28px/24px with a 64px top inset: that much chrome
		   pushed the Google button off-screen and forced a scroll. The close
		   button sits at 16px, so 48px of top padding still clears it. */
		padding: 20px 18px;
		padding-top: 48px;
		justify-content: flex-start;
		/* The base rule's flex:1 resolves to flex-basis:0, which collapsed the
		   panel to a fraction of the popup and forced the form to scroll inside
		   it. Size from the content instead, so the popup grows to fit (still
		   capped by the popup's max-height, where it scrolls as a fallback). */
		flex: 0 0 auto;
		/* Base rule sets overflow:hidden, which clipped the CONTINUE / Google
		   buttons on short viewports. Let this panel scroll instead. */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		min-height: 0;
	}
	
	.only-auth-popup__close {
		top: 16px;
		right: 16px;
	}
	
	.only-auth-logo {
		margin-bottom: 14px;
	}

	.only-auth-logo img {
		max-height: 34px;
		width: auto;
	}

	/* The base rule pairs 30px text with a 44px line-height. At the reduced
	   mobile size that ratio (1.7) leaves the heading looking stretched and
	   zoomed-in, and wraps it onto two tall lines. Scale both together. */
	.only-auth-title {
		font-size: 22px;
		line-height: 1.25;
		margin-bottom: 8px;
	}

	.only-auth-subtitle {
		font-size: 14px;
		line-height: 1.45;
	}

	/* 32px on desktop; the largest gap in the form and out of proportion
	   once everything else is compressed for mobile. */
	.only-auth-header {
		margin-bottom: 18px;
	}

	/* Compress the vertical rhythm so the whole form fits one phone screen.
	   These margins/paddings are tuned for the desktop panel and together
	   added well over 100px of slack on mobile. */
	.only-method-toggle {
		margin-bottom: 18px;
	}

	.only-method-toggle--switch {
		margin-bottom: 18px;
	}

	.only-form-group label {
		font-size: 14px;
		margin-bottom: 6px;
	}

	.only-auth-divider {
		margin: 16px 0;
	}

	.only-btn {
		padding: 13px 12px;
		font-size: 15px;
	}

	/* Google's rendered button carries its own fixed height that overhangs
	   this wrapper by ~11px, which was enough to leave the panel scrollable.
	   Clip it to the wrapper so the form ends exactly at the popup edge. */
	.only-google-btn-wrapper {
		overflow: hidden;
		line-height: 0;
	}

	/* Error/success banners appear after the form is already sized to the
	   screen, so the desktop padding pushed the popup into scrolling. Keep
	   them compact and readable instead. */
	.only-auth-message {
		margin-top: 12px;
		padding: 10px 12px;
		font-size: 13px;
		line-height: 1.4;
	}
	
	/* The base rule is already fluid; just relax the design-size cap so the
	   boxes can use the full width on a narrow phone. */
	.only-otp-input {
		max-width: none !important;
		font-size: 20px;
	}

	.only-otp-inputs {
		gap: 8px;
		width: 100%;
		height: auto;
		margin: 24px 0 20px 0;
	}
	
	.only-otp-container,
	.only-otp-actions,
	#ksqOtpStep .only-btn--primary,
	#ksqVerifyOtp {
		width: 100%;
	}
	
	.only-auth-trust {
		flex-direction: column;
		gap: 12px;
		align-items: center;
	}
	
	.only-method-toggle:not(.only-method-toggle--switch) {
		flex-direction: column;
		gap: 4px;
	}
	
	.only-method-btn {
		padding: 12px 16px;
	}
	
	/* Country dropdown on mobile.
	   This was position:fixed pinned to the bottom of the screen, which
	   detached it from the country field - the list (and its search box)
	   floated far below the trigger with no visual connection. Keep it
	   anchored under the field like on desktop, and let it size to the
	   popup width rather than the viewport. */
	.only-auth-popup .ksq-country-dropdown {
		position: absolute;
		top: calc(100% + 4px);
		bottom: auto;
		left: 0;
		right: auto;
		width: max-content;
		min-width: 240px;
		max-width: min(280px, calc(100vw - 80px));
		max-height: 260px;
		border-radius: 12px;
		z-index: 100001;
	}
	
	.only-auth-popup .ksq-country-search-wrapper {
		padding: 10px;
		border-bottom: 1px solid #E6E9F0;
		background: #fff;
		position: sticky;
		top: 0;
		z-index: 1;
	}
	
	.only-auth-popup .ksq-country-search-input {
		width: 100%;
		padding: 12px 16px;
		border: 1px solid #E6E9F0;
		border-radius: 8px;
		font-size: 16px;
		outline: none;
		box-sizing: border-box;
		background: #F9FAFB;
	}
	
	.only-auth-popup .ksq-country-search-input::placeholder {
		color: #9CA3AF;
	}
	
	.only-auth-popup .ksq-country-list {
		/* Matches the 260px dropdown minus the sticky search header. */
		max-height: 190px;
		overflow-y: auto;
		padding-bottom: 4px;
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.only-auth-overlay,
	.only-auth-popup {
		display: none !important;
	}
}

/* ==========================================================================
   Email Required Step - Rewards Preview
   ========================================================================== */

.only-step-header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 16px;
}

.only-step-header__content {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
}

.only-step-header__icon--success {
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, var(--auth-success), #16a34a);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	flex-shrink: 0;
}

.only-step-header h3 {
	color: var(--auth-text);
	margin: 0;
}

.only-step-desc {
	font-size: 14px;
	color: var(--auth-text-secondary);
	margin: 0 0 16px;
	line-height: 1.5;
}

.only-step-desc--phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--auth-bg-secondary);
	padding: 8px 14px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--auth-text);
}

.only-step-desc--phone svg {
	color: var(--auth-success);
}

/* Rewards Preview Box */
.only-rewards-preview {
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	border: 2px solid #f59e0b;
	border-radius: var(--auth-radius-sm);
	padding: 16px;
	margin: 20px 0;
}

.only-rewards-preview__header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.only-rewards-preview__icon {
	font-size: 24px;
}

.only-rewards-preview__title {
	font-size: 15px;
	color: #92400e;
	font-weight: 500;
}

.only-rewards-preview__title strong {
	font-weight: 700;
	color: #78350f;
}

.only-rewards-preview__items {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 12px;
}

.only-rewards-preview__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 8px;
	font-size: 14px;
}

.only-rewards-preview__item--completed {
	background: rgba(34, 197, 94, 0.15);
	border: 1px solid rgba(34, 197, 94, 0.3);
}

.only-rewards-preview__item--completed .only-rewards-preview__check {
	color: var(--auth-success);
	font-weight: 700;
}

.only-rewards-preview__item--current {
	background: rgba(255, 107, 53, 0.15);
	border: 2px solid var(--auth-primary);
}

.only-rewards-preview__item--current .only-rewards-preview__arrow {
	color: var(--auth-primary);
	font-weight: 700;
}

.only-rewards-preview__label {
	flex: 1;
	color: #78350f;
}

.only-rewards-preview__amount {
	font-weight: 700;
	color: #166534;
}

.only-rewards-preview__note {
	font-size: 12px;
	color: #92400e;
	margin: 0;
	text-align: center;
	font-style: italic;
}

/* ==========================================================================
   Step-by-Step Rewards Wizard
   ========================================================================== */

/* Hide the static welcome header when wizard is active */
.only-wizard-welcome {
	display: block;
}

/* When wizard content is rendered, hide the welcome header */
#ksqRewardsStep .only-wizard-welcome:has(~ .only-rewards-content .only-wizard-header) {
	display: none;
}

/* Fallback for browsers that don't support :has() */
#ksqRewardsStep.wizard-active .only-wizard-welcome {
	display: none;
}

.only-wizard-header {
	margin-bottom: 24px;
}

.only-wizard-progress {
	height: 6px;
	background: #e5e7eb;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 8px;
}

.only-wizard-progress__bar {
	height: 100%;
	background: linear-gradient(90deg, var(--auth-primary), #FF8A5B);
	border-radius: 3px;
	transition: width 0.5s ease;
}

.only-wizard-step-indicator {
	font-size: 13px;
	color: var(--auth-text-secondary);
	text-align: center;
}

.only-wizard-money {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-bottom: 24px;
	padding: 16px;
	background: var(--auth-bg-secondary);
	border-radius: 12px;
}

.only-wizard-money__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.only-wizard-money__label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--auth-text-muted);
}

.only-wizard-money__value {
	font-size: 24px;
	font-weight: 700;
}

.only-wizard-money__item--earned .only-wizard-money__value {
	color: var(--auth-success);
}

.only-wizard-money__item--pending .only-wizard-money__value {
	color: var(--auth-primary);
}

.only-wizard-card {
	background: white;
	border: 2px solid var(--auth-border);
	border-radius: 16px;
	padding: 32px 24px;
	text-align: center;
	margin-bottom: 16px;
	animation: fadeSlideIn 0.4s ease;
}

.only-wizard-card__icon {
	font-size: 48px;
	margin-bottom: 12px;
}

.only-wizard-card__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--auth-text);
	margin: 0 0 8px;
}

.only-wizard-card__reward {
	font-size: 14px;
	color: var(--auth-text-secondary);
	margin: 0 0 24px;
}

.only-wizard-card__reward strong {
	color: var(--auth-success);
	font-weight: 700;
}

.only-wizard-input-wrap {
	margin-bottom: 20px;
}

.only-wizard-input {
	width: 100%;
	padding: 16px 20px;
	font-size: 16px;
	border: 2px solid var(--auth-border);
	border-radius: 12px;
	background: var(--auth-bg);
	color: var(--auth-text);
	transition: all 0.2s ease;
	text-align: center;
}

.only-wizard-input:focus {
	outline: none;
	border-color: var(--auth-primary);
	box-shadow: 0 0 0 4px var(--auth-primary-light);
}

.only-wizard-input.error {
	border-color: var(--auth-error);
	animation: shake 0.4s ease;
}

.only-wizard-phone {
	display: flex;
	gap: 8px;
	align-items: center;
}

.only-wizard-phone .ksq-country-container {
	flex-shrink: 0;
}

.only-wizard-phone .only-wizard-input {
	flex: 1;
	text-align: left;
}

.only-wizard-error {
	color: var(--auth-error);
	font-size: 13px;
	margin: 8px 0 0;
	text-align: center;
}

.only-wizard-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 24px;
	font-size: 16px;
	font-weight: 600;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.only-wizard-btn--primary {
	background: linear-gradient(135deg, var(--auth-primary), #FF8A5B);
	color: white;
}

.only-wizard-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(255, 107, 53, 0.35);
}

.only-wizard-btn--primary.loading {
	opacity: 0.7;
	pointer-events: none;
}

.only-wizard-btn--primary.loading span {
	opacity: 0;
}

.only-wizard-btn--primary.loading::after {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	border: 2px solid rgba(255,255,255,0.3);
	border-top-color: white;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

.only-wizard-btn--claim {
	background: linear-gradient(135deg, var(--auth-success), #16a34a);
	color: white;
	font-size: 18px;
	padding: 18px 24px;
	margin-bottom: 12px;
}

.only-wizard-btn--claim:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(34, 197, 94, 0.35);
}

.only-wizard-btn--secondary {
	background: var(--auth-bg-secondary);
	color: var(--auth-text-secondary);
	border: 1px solid var(--auth-border);
}

.only-wizard-btn--secondary:hover {
	background: var(--auth-border);
}

.only-wizard-skip {
	display: block;
	width: 100%;
	padding: 12px;
	background: none;
	border: none;
	color: var(--auth-text-muted);
	font-size: 14px;
	cursor: pointer;
	transition: color 0.2s ease;
}

.only-wizard-skip:hover {
	color: var(--auth-text-secondary);
}

.only-wizard-completed {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--auth-border);
}

.only-wizard-completed__label {
	font-size: 12px;
	color: var(--auth-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.only-wizard-completed__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: rgba(34, 197, 94, 0.1);
	border: 1px solid rgba(34, 197, 94, 0.3);
	border-radius: 20px;
	font-size: 12px;
	color: #166534;
}

.only-wizard-complete {
	text-align: center;
	padding: 20px 0;
	animation: fadeSlideIn 0.5s ease;
}

.only-wizard-complete__icon {
	font-size: 64px;
	margin-bottom: 16px;
	animation: bounce 0.6s ease;
}

.only-wizard-complete__title {
	font-size: 28px;
	font-weight: 700;
	color: var(--auth-text);
	margin: 0 0 24px;
}

.only-wizard-complete__summary {
	background: var(--auth-bg-secondary);
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 24px;
}

.only-wizard-complete__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	font-size: 16px;
	color: var(--auth-text-secondary);
}

.only-wizard-complete__row + .only-wizard-complete__row {
	border-top: 1px solid var(--auth-border);
	padding-top: 12px;
	margin-top: 4px;
}

.only-wizard-complete__earned {
	font-size: 20px;
	font-weight: 700;
	color: var(--auth-success);
}

.only-wizard-complete__pending {
	font-size: 22px;
	font-weight: 700;
	color: var(--auth-primary);
}

.only-wizard-complete__row--pending {
	background: rgba(255, 107, 53, 0.1);
	border-radius: 8px;
	padding: 12px !important;
	margin-top: 12px !important;
	border: none !important;
}

@keyframes bounce {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.2); }
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}

/* ==========================================================================
   Inline Validation Errors for Wizard
   ========================================================================== */

/* Input error state */
.only-rewards-field-card__input.only-input--error,
#ksqWizardInput.only-input--error {
	border-color: var(--auth-error) !important;
	background-color: rgba(239, 68, 68, 0.05);
	animation: shake 0.4s ease;
}

.only-rewards-field-card__input.only-input--error:focus,
#ksqWizardInput.only-input--error:focus {
	box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
}

/* Inline error message below input */
.only-wizard-input-error {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 8px 12px;
	background: rgba(239, 68, 68, 0.08);
	border: 1px solid rgba(239, 68, 68, 0.2);
	border-radius: 8px;
	color: #dc2626;
	font-size: 13px;
	font-weight: 500;
	animation: fadeSlideIn 0.2s ease;
}

.only-wizard-input-error svg {
	flex-shrink: 0;
	opacity: 0.8;
}

/* ==========================================================================
   Wizard Email OTP Verification UI
   ========================================================================== */

.only-wizard-email-otp {
	padding: 16px;
	background: var(--auth-bg-secondary);
	border-radius: 12px;
	margin-top: 12px;
	animation: fadeSlideIn 0.3s ease;
}

.only-wizard-email-otp__sent {
	font-size: 13px;
	color: var(--auth-text-secondary);
	margin: 0 0 16px;
	text-align: center;
}

.only-wizard-email-otp__sent strong {
	color: var(--auth-text);
}

.only-wizard-email-otp__note {
	font-size: 12px;
	color: var(--auth-text-muted);
	margin: 0 0 16px;
	text-align: center;
	font-style: italic;
}

.only-wizard-email-otp__inputs {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 16px;
}

.only-wizard-otp-digit {
	width: 44px;
	height: 52px;
	border: 2px solid var(--auth-border);
	border-radius: 10px;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	color: var(--auth-text);
	background: var(--auth-bg);
	transition: all 0.2s ease;
}

.only-wizard-otp-digit:focus {
	outline: none;
	border-color: var(--auth-primary);
	box-shadow: 0 0 0 3px var(--auth-primary-light);
}

.only-wizard-otp-digit.filled {
	border-color: var(--auth-success);
	background: rgba(34, 197, 94, 0.08);
}

.only-wizard-otp-digit.error {
	border-color: var(--auth-error);
	background: rgba(239, 68, 68, 0.08);
	animation: shake 0.4s ease;
}

.only-wizard-email-otp__actions {
	margin-bottom: 12px;
}

.only-wizard-email-otp__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 12px;
	border-top: 1px solid var(--auth-border);
}

.only-wizard-email-otp__skip {
	background: none;
	border: none;
	color: var(--auth-text-muted);
	font-size: 12px;
	cursor: pointer;
	padding: 6px 0;
	transition: color 0.2s ease;
	text-decoration: underline;
}

.only-wizard-email-otp__skip:hover {
	color: var(--auth-text-secondary);
}

.only-wizard-email-otp__resend {
	background: none;
	border: none;
	color: var(--auth-text-muted);
	font-size: 12px;
	cursor: pointer;
	padding: 6px 0;
	transition: color 0.2s ease;
}

.only-wizard-email-otp__resend:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.only-wizard-email-otp__resend:not(:disabled):hover {
	color: var(--auth-primary);
}

.only-wizard-countdown {
	font-weight: 600;
	color: var(--auth-primary);
}

/* ==========================================================================
   Wizard Phone OTP Verification UI
   ========================================================================== */

.only-wizard-phone-otp {
	padding: 20px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	margin-top: 16px;
	animation: fadeSlideIn 0.3s ease;
}

.only-wizard-phone-otp__sent {
	font-size: 14px;
	color: #6b7280;
	margin: 0 0 20px;
	text-align: center;
}

.only-wizard-phone-otp__sent strong {
	color: #1a1a1a;
	font-weight: 600;
}

.only-wizard-phone-otp__inputs {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 20px;
}

.only-wizard-phone-otp-digit {
	width: 70px;
	height: 56px;
	border: 2px solid #e5e7eb;
	border-radius: 10px;
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	color: #1a1a1a;
	background: #fff;
	transition: all 0.2s ease;
}

.only-wizard-phone-otp-digit:focus {
	outline: none;
	border-color: #FF6B35;
	box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
}

.only-wizard-phone-otp-digit.filled {
	border-color: #22c55e;
	background: rgba(34, 197, 94, 0.08);
}

.only-wizard-phone-otp-digit.error {
	border-color: #ef4444;
	background: rgba(239, 68, 68, 0.08);
	animation: shake 0.4s ease;
}

.only-wizard-phone-otp__actions {
	margin-bottom: 16px;
}

.only-wizard-phone-otp__footer {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 16px;
}

.only-wizard-phone-otp__resend {
	background: none;
	border: none;
	color: #9ca3af;
	font-size: 14px;
	cursor: pointer;
	padding: 8px 0;
	transition: color 0.2s ease;
}

.only-wizard-phone-otp__resend:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

.only-wizard-phone-otp__resend:not(:disabled):hover {
	color: #FF6B35;
}

.only-wizard-phone-countdown {
	font-weight: 600;
	color: #FF6B35;
}

.only-wizard-phone-otp__error {
	color: #ef4444;
	font-size: 13px;
	text-align: center;
	margin: 12px 0 0;
	font-weight: 500;
}

/* Loading state for verify button */
.only-rewards-field-card__btn.loading {
	opacity: 0.7;
	pointer-events: none;
	position: relative;
}

.only-rewards-field-card__btn.loading span {
	opacity: 0;
}

.only-rewards-field-card__btn.loading::after {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: white;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

/* ==========================================================================
   Lazy Loading State
   ========================================================================== */

.only-auth-popup--loading {
	display: flex;
	align-items: center;
	justify-content: center;
}

.only-auth-popup__loader {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
}

.only-auth-popup__spinner {
	width: 48px;
	height: 48px;
	border: 3px solid var(--auth-border);
	border-top-color: var(--auth-primary);
	border-radius: 50%;
	animation: auth-spin 0.8s linear infinite;
}

@keyframes auth-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   Legacy Support (Keep old classes working)
   ========================================================================== */

.ksq-auth-overlay { display: none; }
.ksq-auth-popup { display: none; }

/* [design-only] Popup without promo slides: compact, centred single column */
.only-auth-popup:not(:has(.only-auth-popup__left)) {
	width: 560px;
	height: auto;
	min-height: 0;
}
.only-auth-popup:not(:has(.only-auth-popup__left)) .only-auth-popup__container {
	min-height: 0;
	height: auto;
}
.only-auth-popup:not(:has(.only-auth-popup__left)) .only-auth-popup__right {
	align-items: stretch;
}