/**
 * FlexMart Customer Suite — Frontend Styles
 *
 * Blue/white premium ecommerce design system. --fcs-primary is injected
 * inline per-request from the admin's Theme Colour setting; every other
 * value here is a fixed neutral so the suite always looks intentional
 * even before that inline override loads.
 */

:root {
	--fcs-primary: #1e5eff;
	--fcs-primary-dark: #1747c4;
	--fcs-primary-light: #eaf0ff;
	--fcs-success: #16a34a;
	--fcs-success-bg: #e8f8ee;
	--fcs-warning: #d97706;
	--fcs-warning-bg: #fef3e2;
	--fcs-danger: #dc2626;
	--fcs-danger-bg: #fdeaea;
	--fcs-info: #2563eb;
	--fcs-info-bg: #e8f0fe;
	--fcs-muted-bg: #f1f2f4;
	--fcs-muted-text: #6b7280;
	--fcs-text: #111827;
	--fcs-border: #e5e7eb;
	--fcs-surface: #ffffff;
	--fcs-bg: #f6f8fb;
	--fcs-radius-sm: 10px;
	--fcs-radius: 16px;
	--fcs-radius-lg: 22px;
	--fcs-shadow: 0 2px 10px rgba(17, 24, 39, 0.06);
	--fcs-shadow-md: 0 8px 24px rgba(17, 24, 39, 0.08);
	--fcs-shadow-lg: 0 16px 40px rgba(17, 24, 39, 0.12);
}

.fcs-app,
.fcs-app * {
	box-sizing: border-box;
}

.fcs-app {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--fcs-text);
	background: var(--fcs-bg);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.fcs-app a {
	color: var(--fcs-primary);
	text-decoration: none;
}

.fcs-app a:hover {
	text-decoration: underline;
}

.fcs-muted {
	color: var(--fcs-muted-text);
}

.fcs-small {
	font-size: 0.85em;
}

.fcs-section-heading {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 28px 0 14px;
}

.fcs-page {
	max-width: 900px;
	margin: 0 auto;
	padding: 20px 20px 60px;
}

.fcs-page__title {
	font-size: 1.6rem;
	font-weight: 800;
	margin: 0 0 20px;
	letter-spacing: -0.01em;
}

.fcs-page__title--tight {
	margin-bottom: 4px;
}

.fcs-page__header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.fcs-back-link {
	display: inline-block;
	margin-bottom: 16px;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--fcs-muted-text) !important;
}

.fcs-back-link:hover {
	color: var(--fcs-primary) !important;
}

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

.fcs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 700;
	font-size: 0.95rem;
	border-radius: var(--fcs-radius-sm);
	padding: 12px 20px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
	text-decoration: none !important;
	line-height: 1.2;
}

.fcs-btn:active {
	transform: translateY(1px);
}

.fcs-btn:disabled,
.fcs-btn.is-loading {
	opacity: 0.65;
	cursor: not-allowed;
	pointer-events: none;
}

.fcs-btn--primary {
	background: var(--fcs-primary);
	color: #fff;
	box-shadow: 0 4px 14px rgba(30, 94, 255, 0.28);
}

.fcs-btn--primary:hover {
	background: var(--fcs-primary-dark);
}

.fcs-btn--white {
	background: #fff;
	color: var(--fcs-primary);
}

.fcs-btn--white:hover {
	background: #f2f6ff;
}

.fcs-btn--outline {
	background: transparent;
	border-color: var(--fcs-border);
	color: var(--fcs-text);
}

.fcs-btn--outline:hover {
	border-color: var(--fcs-primary);
	color: var(--fcs-primary);
}

.fcs-btn--danger {
	background: var(--fcs-danger);
	color: #fff;
}

.fcs-btn--danger:hover {
	background: #b91c1c;
}

.fcs-btn--danger-outline {
	background: transparent;
	border-color: var(--fcs-danger-bg);
	color: var(--fcs-danger);
}

.fcs-btn--danger-outline:hover {
	background: var(--fcs-danger-bg);
}

.fcs-btn--small {
	padding: 7px 14px;
	font-size: 0.82rem;
}

.fcs-btn--large {
	padding: 15px 24px;
	font-size: 1rem;
}

.fcs-btn--block {
	display: flex;
	width: 100%;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.fcs-field {
	margin-bottom: 16px;
}

.fcs-field-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.fcs-field-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	flex-wrap: wrap;
	gap: 10px;
}

.fcs-field label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--fcs-text);
}

.fcs-field-hint {
	font-size: 0.78rem;
	color: var(--fcs-muted-text);
	margin: 6px 0 0;
}

.fcs-app input[type="text"],
.fcs-app input[type="email"],
.fcs-app input[type="tel"],
.fcs-app input[type="password"],
.fcs-app input[type="number"],
.fcs-app select {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--fcs-border);
	border-radius: var(--fcs-radius-sm);
	font-size: 0.95rem;
	background: #fff;
	color: var(--fcs-text);
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.fcs-app input:focus,
.fcs-app select:focus {
	outline: none;
	border-color: var(--fcs-primary);
	box-shadow: 0 0 0 4px var(--fcs-primary-light);
}

.fcs-password-wrap {
	position: relative;
}

.fcs-password-wrap input {
	padding-right: 44px;
}

.fcs-password-toggle {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	color: var(--fcs-muted-text);
	padding: 6px;
	display: flex;
}

.fcs-password-toggle svg {
	width: 20px;
	height: 20px;
}

.fcs-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
	cursor: pointer;
}

.fcs-checkbox input {
	width: 18px;
	height: 18px;
	accent-color: var(--fcs-primary);
}

.fcs-checkbox--terms {
	align-items: flex-start;
	margin-bottom: 18px;
}

.fcs-checkbox--terms input {
	margin-top: 3px;
}

.fcs-checkbox--row {
	padding: 10px 0;
	border-bottom: 1px solid var(--fcs-border);
}

.fcs-checkbox--row:last-of-type {
	border-bottom: none;
}

.fcs-link {
	font-size: 0.85rem;
	font-weight: 600;
}

.fcs-form-message {
	min-height: 1.2em;
	font-size: 0.85rem;
	font-weight: 600;
	margin: 10px 0;
	padding: 0;
}

.fcs-form-message:not(:empty) {
	padding: 10px 12px;
	border-radius: var(--fcs-radius-sm);
}

.fcs-form-message.is-error {
	color: var(--fcs-danger);
	background: var(--fcs-danger-bg);
}

.fcs-form-message.is-success {
	color: var(--fcs-success);
	background: var(--fcs-success-bg);
}

/* ==========================================================================
   Auth (login / register)
   ========================================================================== */

.fcs-auth-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 16px;
	min-height: 60vh;
}

.fcs-auth-card {
	width: 100%;
	max-width: 440px;
	background: var(--fcs-surface);
	border-radius: var(--fcs-radius-lg);
	box-shadow: var(--fcs-shadow-lg);
	padding: 36px 32px;
}

.fcs-auth-title {
	font-size: 1.5rem;
	font-weight: 800;
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}

.fcs-auth-subtitle {
	color: var(--fcs-muted-text);
	margin: 0 0 26px;
	font-size: 0.92rem;
}

.fcs-auth-form {
	margin-bottom: 6px;
}

.fcs-auth-switch {
	text-align: center;
	font-size: 0.88rem;
	color: var(--fcs-muted-text);
	margin: 18px 0 0;
}

.fcs-auth-switch a {
	font-weight: 700;
	margin-left: 4px;
}

/* ==========================================================================
   Shell: sidebar + main content
   ========================================================================== */

.fcs-shell {
	display: flex;
	align-items: flex-start;
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 20px 0;
	gap: 28px;
}

.fcs-sidebar {
	flex: 0 0 220px;
	position: sticky;
	top: 20px;
}

.fcs-sidebar__nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--fcs-surface);
	border-radius: var(--fcs-radius);
	padding: 10px;
	box-shadow: var(--fcs-shadow);
}

.fcs-sidebar__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border-radius: var(--fcs-radius-sm);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--fcs-text) !important;
	background: none;
	border: none;
	width: 100%;
	text-align: left;
	cursor: pointer;
	text-decoration: none !important;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.fcs-sidebar__link svg {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
}

.fcs-sidebar__link:hover {
	background: var(--fcs-muted-bg);
}

.fcs-sidebar__link.is-active {
	background: var(--fcs-primary-light);
	color: var(--fcs-primary) !important;
}

.fcs-sidebar__link--logout {
	color: var(--fcs-danger) !important;
	margin-top: 6px;
	border-top: 1px solid var(--fcs-border);
	border-radius: 0 0 var(--fcs-radius-sm) var(--fcs-radius-sm);
	padding-top: 15px;
}

.fcs-main {
	flex: 1 1 auto;
	min-width: 0;
}

.fcs-main .fcs-page {
	padding: 0 0 60px;
	max-width: none;
	margin: 0;
}

/* ==========================================================================
   Greeting card
   ========================================================================== */

.fcs-greeting-card {
	background: linear-gradient(145deg, var(--fcs-primary) 0%, var(--fcs-primary-dark) 100%);
	border-radius: 24px;
	padding: 28px 26px 30px;
	color: #fff;
	box-shadow: 0 12px 28px rgba(30, 94, 255, 0.22);
	margin-bottom: 20px;
}

.fcs-greeting-card__time {
	font-size: 0.88rem;
	opacity: 0.85;
	margin: 0 0 8px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.fcs-greeting-card__name {
	font-size: 1.75rem;
	font-weight: 800;
	margin: 0 0 8px;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.fcs-greeting-card__sub {
	margin: 0;
	opacity: 0.88;
	font-size: 0.92rem;
	line-height: 1.4;
}

/* ==========================================================================
   Stats grid
   ========================================================================== */

.fcs-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-bottom: 8px;
	align-items: start;
}

@media (max-width: 900px) {
	.fcs-stats-grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
}

.fcs-stat-card {
	background: var(--fcs-surface);
	border-radius: 18px;
	padding: 18px 16px;
	box-shadow: var(--fcs-shadow);
	text-decoration: none !important;
	color: var(--fcs-text) !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 92px;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
	border: 1px solid transparent;
}

.fcs-stat-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--fcs-shadow-md);
	border-color: var(--fcs-primary-light);
}

.fcs-stat-card__value {
	font-size: 1.5rem;
	font-weight: 800;
	margin-bottom: 4px;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.fcs-stat-card__value .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
}

.fcs-stat-card__label {
	font-size: 0.78rem;
	color: var(--fcs-muted-text);
	font-weight: 600;
}

.fcs-stat-card--wallet .fcs-stat-card__value {
	color: var(--fcs-primary);
}

.fcs-stat-card--pending .fcs-stat-card__value {
	color: var(--fcs-warning);
}

.fcs-stat-card--completed .fcs-stat-card__value {
	color: var(--fcs-success);
}

.fcs-stat-card--addresses .fcs-stat-card__value {
	color: var(--fcs-info);
}

/* ==========================================================================
   Quick action cards
   ========================================================================== */

.fcs-actions-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 14px;
	/* CSS Grid's default align-items is "stretch" — every cell (and
	   the card inside it) grows to match the tallest item sharing its
	   row, or any extra height the grid container happens to have
	   available, rather than sizing to its own content. "start"
	   overrides that so every card is always exactly as tall as what's
	   actually inside it — the direct fix for cards developing large
	   empty areas on some screens/browsers but not others. */
	align-items: start;
}

@media (max-width: 900px) {
	.fcs-actions-grid {
		/* A deterministic 2-column count — the same pattern the stat
		   cards above already use successfully — rather than relying
		   on auto-fit's implicit column calculation, which can
		   legitimately compute a different column count across
		   devices/browsers depending on exact available width. */
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
}

.fcs-action-card {
	background: var(--fcs-surface);
	border-radius: var(--fcs-radius);
	padding: 20px 18px;
	box-shadow: var(--fcs-shadow);
	text-align: left;
	border: 1px solid transparent;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none !important;
	color: var(--fcs-text) !important;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
	font-family: inherit;
	/* Explicit content-based sizing — defends against the same class
	   of "grown taller than its content" issue even if something
	   outside this plugin's own CSS (a theme rule targeting <a> tags
	   generally, for instance) ever applies a height/min-height that
	   would otherwise cascade in here. */
	height: auto;
	min-height: 0;
}

.fcs-action-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--fcs-shadow-md);
	border-color: var(--fcs-primary-light);
}

.fcs-action-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--fcs-primary-light);
	color: var(--fcs-primary);
	margin-bottom: 6px;
}

.fcs-action-card__icon svg {
	width: 20px;
	height: 20px;
}

.fcs-action-card__label {
	font-weight: 700;
	font-size: 0.95rem;
}

.fcs-action-card__desc {
	font-size: 0.78rem;
	color: var(--fcs-muted-text);
}

.fcs-action-card--logout .fcs-action-card__label {
	color: var(--fcs-danger);
}

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

.fcs-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 700;
	white-space: nowrap;
}

.fcs-badge--success {
	background: var(--fcs-success-bg);
	color: var(--fcs-success);
}

.fcs-badge--info {
	background: var(--fcs-info-bg);
	color: var(--fcs-info);
}

.fcs-badge--warning {
	background: var(--fcs-warning-bg);
	color: var(--fcs-warning);
}

.fcs-badge--danger {
	background: var(--fcs-danger-bg);
	color: var(--fcs-danger);
}

.fcs-badge--muted {
	background: var(--fcs-muted-bg);
	color: var(--fcs-muted-text);
}

.fcs-badge--large {
	padding: 6px 16px;
	font-size: 0.85rem;
}

/* ==========================================================================
   Orders
   ========================================================================== */

.fcs-orders-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fcs-order-card {
	background: var(--fcs-surface);
	border-radius: var(--fcs-radius);
	box-shadow: var(--fcs-shadow);
	padding: 16px;
	display: flex;
	gap: 14px;
}

.fcs-order-card__image {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	border-radius: var(--fcs-radius-sm);
	overflow: hidden;
	background: var(--fcs-muted-bg);
}

.fcs-order-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fcs-order-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.fcs-order-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 4px;
}

.fcs-order-card__number {
	font-weight: 700;
	font-size: 0.95rem;
}

.fcs-order-card__meta {
	font-size: 0.8rem;
	color: var(--fcs-muted-text);
	display: flex;
	gap: 6px;
	margin-bottom: 10px;
}

.fcs-order-card__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.fcs-order-card__total {
	font-weight: 800;
	font-size: 1rem;
}

/* Order detail */

.fcs-order-detail {
	background: var(--fcs-surface);
	border-radius: var(--fcs-radius);
	box-shadow: var(--fcs-shadow);
	padding: 24px;
}

.fcs-order-detail__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--fcs-border);
	margin-bottom: 18px;
}

.fcs-order-detail__items {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 10px;
}

.fcs-order-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.fcs-order-item__image {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: var(--fcs-radius-sm);
	overflow: hidden;
	background: var(--fcs-muted-bg);
}

.fcs-order-item__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fcs-order-item__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.fcs-order-item__name {
	font-weight: 600;
	font-size: 0.9rem;
}

.fcs-order-item__total {
	font-weight: 700;
	font-size: 0.9rem;
	white-space: nowrap;
}

.fcs-order-detail__totals {
	border-top: 1px solid var(--fcs-border);
	margin-top: 14px;
	padding-top: 14px;
}

.fcs-order-detail__total-row {
	display: flex;
	justify-content: space-between;
	padding: 5px 0;
	font-size: 0.9rem;
}

.fcs-order-detail__tracking {
	margin-top: 4px;
}

.fcs-section-heading--spaced {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--fcs-border);
}

/* ==========================================================================
   Order Timeline
   ========================================================================== */

.fcs-timeline {
	display: flex;
	flex-direction: column;
	margin-top: 4px;
}

.fcs-timeline__step {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	position: relative;
	padding-bottom: 26px;
}

.fcs-timeline__step:last-child {
	padding-bottom: 0;
}

/* The connecting line between steps — drawn as a pseudo-element on each
   step (except the last) so it sits precisely behind the marker column
   regardless of label length/wrapping. */
.fcs-timeline__step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 28px;
	bottom: -2px;
	width: 2px;
	background: var(--fcs-border);
}

.fcs-timeline__step--completed:not(:last-child)::before {
	background: var(--fcs-success);
}

.fcs-timeline__marker {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fcs-muted-bg);
	color: var(--fcs-muted-text);
	z-index: 1;
}

.fcs-timeline__marker svg {
	width: 14px;
	height: 14px;
}

.fcs-timeline__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--fcs-muted-text);
	display: block;
}

.fcs-timeline__label {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--fcs-muted-text);
	padding-top: 5px;
}

.fcs-timeline__step--completed .fcs-timeline__marker {
	background: var(--fcs-success);
	color: #fff;
}

.fcs-timeline__step--completed .fcs-timeline__label {
	color: var(--fcs-text);
}

.fcs-timeline__step--current .fcs-timeline__marker {
	background: var(--fcs-info-bg);
}

.fcs-timeline__step--current .fcs-timeline__dot {
	background: var(--fcs-info);
}

.fcs-timeline__step--current .fcs-timeline__label {
	color: var(--fcs-info);
	font-weight: 800;
}

.fcs-timeline__dot--pulse {
	box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55);
	animation: fcs-timeline-pulse 1.8s infinite;
}

@keyframes fcs-timeline-pulse {
	0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5); }
	70% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
	100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* ==========================================================================
   Estimated delivery
   ========================================================================== */

.fcs-estimated-delivery {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
	padding: 14px 16px;
	border-radius: var(--fcs-radius-sm);
	background: var(--fcs-success-bg);
	border: 1px solid rgba(22, 163, 74, 0.22);
}

.fcs-estimated-delivery__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(22, 163, 74, 0.14);
	color: var(--fcs-success);
	flex-shrink: 0;
}

.fcs-estimated-delivery__icon svg {
	width: 18px;
	height: 18px;
}

.fcs-estimated-delivery__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fcs-estimated-delivery__title {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fcs-success);
}

.fcs-estimated-delivery__value {
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--fcs-text);
}

/* ==========================================================================
   Order detail actions (Pay Now / Buy Again)
   ========================================================================== */

.fcs-order-detail__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 22px;
}

@media (max-width: 480px) {
	.fcs-timeline__label {
		font-size: 0.88rem;
	}
}

/* ==========================================================================
   Wallet
   ========================================================================== */

.fcs-wallet-balance-card {
	background: linear-gradient(145deg, var(--fcs-primary) 0%, var(--fcs-primary-dark) 100%);
	border-radius: 22px;
	padding: 24px 24px 22px;
	color: #fff;
	box-shadow: 0 12px 28px rgba(30, 94, 255, 0.22);
	margin-bottom: 8px;
}

.fcs-wallet-balance-card__label {
	font-size: 0.85rem;
	opacity: 0.85;
	font-weight: 600;
	margin-bottom: 6px;
}

.fcs-wallet-balance-card__amount {
	font-size: 2.1rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-bottom: 20px;
}

.fcs-wallet-balance-card__amount .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
}

.fcs-alert {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 16px;
	border-radius: var(--fcs-radius-sm);
	font-size: 0.88rem;
	font-weight: 600;
	margin-bottom: 16px;
}

.fcs-alert svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.fcs-alert--success {
	background: var(--fcs-success-bg);
	color: var(--fcs-success);
}

.fcs-alert--error {
	background: var(--fcs-danger-bg);
	color: var(--fcs-danger);
}

.fcs-transactions {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--fcs-surface);
	border-radius: var(--fcs-radius);
	box-shadow: var(--fcs-shadow);
	overflow: hidden;
}

.fcs-transaction {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--fcs-border);
}

.fcs-transaction:last-child {
	border-bottom: none;
}

.fcs-transaction__icon {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

.fcs-transaction__icon--credit {
	background: var(--fcs-success-bg);
	color: var(--fcs-success);
}

.fcs-transaction__icon--debit {
	background: var(--fcs-danger-bg);
	color: var(--fcs-danger);
}

.fcs-transaction__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.fcs-transaction__details {
	font-weight: 600;
	font-size: 0.88rem;
}

.fcs-transaction__amount {
	font-weight: 800;
	font-size: 0.92rem;
	white-space: nowrap;
}

.fcs-transaction__amount--credit {
	color: var(--fcs-success);
}

.fcs-transaction__amount--debit {
	color: var(--fcs-danger);
}

.fcs-topup-min-note {
	font-size: 0.78rem;
	margin: 6px 0 16px;
}

.fcs-topup-breakdown {
	background: var(--fcs-muted-bg);
	border-radius: var(--fcs-radius-sm);
	padding: 14px 16px;
	margin-bottom: 16px;
}

.fcs-topup-breakdown__row {
	display: flex;
	justify-content: space-between;
	font-size: 0.88rem;
	padding: 4px 0;
	color: var(--fcs-muted-text);
}

.fcs-topup-breakdown__row--total {
	border-top: 1px solid var(--fcs-border);
	margin-top: 6px;
	padding-top: 10px;
	font-weight: 800;
	color: var(--fcs-text);
	font-size: 1rem;
}

.fcs-topup-gateway-note {
	text-align: center;
	margin: 10px 0 0;
}

/* ==========================================================================
   Addresses
   ========================================================================== */

.fcs-addresses-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
}

.fcs-address-card {
	background: var(--fcs-surface);
	border-radius: var(--fcs-radius);
	box-shadow: var(--fcs-shadow);
	padding: 18px;
	border: 2px solid transparent;
}

.fcs-address-card.is-default {
	border-color: var(--fcs-primary-light);
}

.fcs-address-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.fcs-address-card__label {
	font-weight: 700;
	font-size: 0.95rem;
}

.fcs-address-card__body {
	font-size: 0.87rem;
	color: var(--fcs-muted-text);
	margin: 0 0 14px;
	line-height: 1.6;
}

.fcs-address-card__body strong {
	color: var(--fcs-text);
}

.fcs-address-card__phone-icon {
	display: inline-flex;
	vertical-align: middle;
	margin-right: 2px;
}

.fcs-address-card__phone-icon svg {
	width: 13px;
	height: 13px;
	position: relative;
	top: -1px;
}

.fcs-address-card__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

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

.fcs-panel {
	background: var(--fcs-surface);
	border-radius: var(--fcs-radius);
	box-shadow: var(--fcs-shadow);
	padding: 24px;
}

.fcs-profile-avatar-row {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 26px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--fcs-border);
}

.fcs-profile-avatar-wrap {
	position: relative;
	flex: 0 0 auto;
}

.fcs-profile-avatar {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--fcs-muted-bg);
	display: block;
	border: 3px solid var(--fcs-surface);
	box-shadow: var(--fcs-shadow);
}

.fcs-profile-avatar-overlay {
	position: absolute;
	bottom: -2px;
	right: -2px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--fcs-primary);
	color: #fff;
	border: 3px solid var(--fcs-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.12s ease, transform 0.12s ease;
}

.fcs-profile-avatar-overlay:hover {
	background: var(--fcs-primary-dark);
	transform: scale(1.06);
}

.fcs-profile-avatar-overlay svg {
	width: 15px;
	height: 15px;
}

.fcs-profile-avatar-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.fcs-profile-avatar-hint {
	font-size: 0.8rem;
	color: var(--fcs-muted-text);
}

/* ==========================================================================
   Settings
   ========================================================================== */

.fcs-settings-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--fcs-border);
	flex-wrap: wrap;
}

.fcs-settings-row:last-child {
	border-bottom: none;
}

.fcs-settings-row__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--fcs-primary-light);
	color: var(--fcs-primary);
	flex: 0 0 auto;
}

.fcs-settings-row__icon svg {
	width: 18px;
	height: 18px;
}

.fcs-settings-row__text {
	flex: 1 1 160px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.fcs-settings-row__label {
	font-weight: 700;
	font-size: 0.92rem;
}

.fcs-toggle {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 26px;
	flex: 0 0 auto;
}

.fcs-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
}

.fcs-toggle__track {
	position: absolute;
	inset: 0;
	background: var(--fcs-border);
	border-radius: 999px;
	transition: background-color 0.15s ease;
}

.fcs-toggle__thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease;
}

.fcs-toggle input:checked + .fcs-toggle__track {
	background: var(--fcs-primary);
}

.fcs-toggle input:checked + .fcs-toggle__track .fcs-toggle__thumb {
	transform: translateX(18px);
}

.fcs-toggle--disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.fcs-select--disabled {
	opacity: 0.6;
	cursor: not-allowed;
	max-width: 160px;
}

/* ==========================================================================
   Support
   ========================================================================== */

.fcs-support-card {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--fcs-surface);
	border-radius: 18px;
	padding: 18px;
	box-shadow: var(--fcs-shadow);
	text-decoration: none !important;
	color: var(--fcs-text) !important;
	margin-bottom: 12px;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.fcs-support-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--fcs-shadow-md);
}

.fcs-support-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: #25d366;
	color: #fff;
}

.fcs-support-card__icon svg {
	width: 24px;
	height: 24px;
}

.fcs-support-card__icon--neutral {
	background: var(--fcs-primary-light);
	color: var(--fcs-primary);
}

.fcs-support-card__icon--neutral svg {
	width: 20px;
	height: 20px;
}

.fcs-support-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.fcs-support-card__title {
	font-weight: 700;
	font-size: 0.95rem;
}

.fcs-support-card__desc {
	font-size: 0.82rem;
	color: var(--fcs-muted-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fcs-support-card--whatsapp {
	background: linear-gradient(135deg, #25d366 0%, #1fb959 100%);
	color: #fff !important;
}

.fcs-support-card--whatsapp .fcs-support-card__icon {
	background: rgba(255, 255, 255, 0.2);
}

.fcs-support-card--whatsapp .fcs-support-card__desc {
	color: rgba(255, 255, 255, 0.85);
}

.fcs-support-card__cta {
	flex: 0 0 auto;
	background: #fff;
	color: #1fb959;
	font-weight: 700;
	font-size: 0.82rem;
	padding: 9px 14px;
	border-radius: 999px;
	white-space: nowrap;
}

.fcs-support-future-note {
	text-align: center;
	margin: 16px 0 0;
}

/* ==========================================================================
   Empty states
   ========================================================================== */

.fcs-empty-state {
	background: var(--fcs-surface);
	border-radius: var(--fcs-radius);
	box-shadow: var(--fcs-shadow);
	padding: 48px 24px;
	text-align: center;
}

.fcs-empty-state__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--fcs-primary-light);
	color: var(--fcs-primary);
}

.fcs-empty-state__icon svg {
	width: 28px;
	height: 28px;
}

.fcs-empty-state h2 {
	font-size: 1.1rem;
	margin: 0 0 8px;
}

.fcs-empty-state .fcs-btn {
	margin-top: 16px;
}

.fcs-empty-state--compact {
	padding: 24px;
}

/* ==========================================================================
   Modals
   ========================================================================== */

.fcs-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.fcs-modal.is-open {
	display: flex;
}

.fcs-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 24, 39, 0.5);
	backdrop-filter: blur(2px);
}

.fcs-modal__box {
	position: relative;
	background: var(--fcs-surface);
	border-radius: var(--fcs-radius-lg);
	box-shadow: var(--fcs-shadow-lg);
	width: 100%;
	max-width: 460px;
	max-height: 90vh;
	overflow-y: auto;
	animation: fcs-modal-in 0.16s ease;
}

@keyframes fcs-modal-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.fcs-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 22px;
	border-bottom: 1px solid var(--fcs-border);
}

.fcs-modal__header h3 {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 800;
}

.fcs-modal__close {
	background: var(--fcs-muted-bg);
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1rem;
	color: var(--fcs-muted-text);
	display: flex;
	align-items: center;
	justify-content: center;
}

.fcs-modal__close:hover {
	background: var(--fcs-border);
}

.fcs-modal__body {
	padding: 22px;
}

/* Logout confirm overlay — same visual language as .fcs-modal but its
   own simpler markup, so it's styled independently. */

.fcs-logout-confirm {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(17, 24, 39, 0.5);
	backdrop-filter: blur(2px);
}

.fcs-logout-confirm.is-open {
	display: flex;
}

.fcs-logout-confirm__box {
	background: var(--fcs-surface);
	border-radius: var(--fcs-radius-lg);
	box-shadow: var(--fcs-shadow-lg);
	padding: 26px;
	max-width: 380px;
	width: 100%;
	text-align: center;
	animation: fcs-modal-in 0.16s ease;
}

.fcs-logout-confirm__box h3 {
	margin: 0 0 8px;
	font-size: 1.1rem;
}

.fcs-logout-confirm__box p {
	color: var(--fcs-muted-text);
	font-size: 0.9rem;
	margin: 0 0 20px;
}

.fcs-logout-confirm__actions {
	display: flex;
	gap: 10px;
}

.fcs-logout-confirm__actions .fcs-btn {
	flex: 1 1 0;
}

/* ==========================================================================
   Mobile-first responsive adjustments
   ========================================================================== */

@media (max-width: 900px) {
	.fcs-shell {
		flex-direction: column;
		padding: 16px 16px 0;
		gap: 0;
	}

	/* The vertical sidebar is a desktop navigation pattern. On mobile it
	   previously rendered as its own full-width row above the page
	   content, reading as a redundant "Dashboard" card with a large gap
	   before the real content. Account-section navigation on mobile
	   happens through the Dashboard's Quick Actions and the site's
	   existing bottom navigation bar instead, so the sidebar is hidden
	   here rather than removed outright — it still renders normally on
	   desktop, where it's the primary navigation. */
	.fcs-sidebar {
		display: none;
	}

	.fcs-main .fcs-page {
		padding: 4px 0 90px; /* 4px top clears close under the header; 90px bottom clears the theme's Mobile Bottom Navigation */
	}
}

@media (max-width: 560px) {
	.fcs-auth-card {
		padding: 26px 20px;
	}

	.fcs-field-grid {
		grid-template-columns: 1fr;
	}

	.fcs-greeting-card {
		padding: 22px 20px;
	}

	.fcs-greeting-card__name {
		font-size: 1.4rem;
	}

	.fcs-order-detail {
		padding: 18px;
	}

	.fcs-page {
		padding: 18px 14px 60px;
	}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.fcs-app :focus-visible {
	outline: 2px solid var(--fcs-primary);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.fcs-app * {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}