/* ==========================================================================
   EOSTRE V2 Redesign - Components
   Themed via CSS custom properties defined in style-layout.css.
   Loaded after Simulor (app.min.css) + style.css + style-layout.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cards
   -------------------------------------------------------------------------- */
.card {
	background-color: var(--eo-surface);
	border: 1px solid var(--eo-border);
	border-radius: var(--eo-radius);
	box-shadow: var(--eo-shadow);
}

.eo-reward-card {
	background-color: #F7F8FA;
}

@media (max-width: 1379px) {
	.home-left-col {
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	.home-right-col {
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}
}

@media (max-width: 1379px) {

	.home-checkin-col,
	.home-announcement-col {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

@media (max-width: 767.98px) {

	.home-left-col,
	.home-right-col {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

.card .card-body {
	color: var(--eo-text);
}

.card-title,
.header-title {
	color: var(--eo-text);
	font-weight: 600;
}

/* Stat / summary card hover lift (per motion guideline) */
.eo-stat-card,
.card.eo-hover-lift {
	transition: transform .15s ease, box-shadow .15s ease;
}

.eo-stat-card:hover,
.card.eo-hover-lift:hover {
	transform: translateY(-3px);
	box-shadow: var(--eo-shadow-lg);
}

/* Icon capsule used on stat cards */
.eo-icon-capsule {
	width: 48px;
	height: 48px;
	border-radius: var(--eo-radius);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	flex-shrink: 0;
	background-color: var(--eo-accent-soft);
	color: var(--eo-accent);
}

.eo-icon-capsule.eo-icon-blue {
	background-color: rgba(45, 91, 255, 0.12);
	color: var(--eo-blue);
}

.eo-icon-capsule.eo-icon-purple {
	background-color: rgba(139, 92, 246, 0.12);
	color: #8B5CF6;
}

.eo-icon-capsule.eo-icon-red {
	background-color: rgba(229, 72, 77, 0.12);
	color: #E5484D;
}

.eo-icon-capsule.eo-icon-green {
	background-color: rgba(13, 191, 127, 0.12);
	color: #0DBF7F;
}

.eo-icon-capsule.eo-icon-yellow {
	background-color: rgba(245, 166, 35, 0.14);
	color: #F5A623;
}

/* Stat card value */
.eo-stat-card h3 {
	font-weight: 600;
	font-size: 1.4rem;
}

.eo-stat-card .text-primary {
	color: var(--eo-accent) !important;
}

/* Literal blue, independent of the theme accent - for things that are blue by
   meaning rather than by theme (the binary tree's Blue leg, opposite the red
   one), or where a blue link is wanted on an otherwise gold elite page. */
.eo-text-blue,
a.eo-text-blue:hover,
a.eo-text-blue:focus {
	color: var(--eo-blue) !important;
}

/* Stat card title - black, not bold */
.eo-stat-title {
	color: #000000 !important;
	font-weight: 400;
	font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   2. Buttons
   -------------------------------------------------------------------------- */
.btn {
	border-radius: var(--eo-radius-sm);
	font-weight: 500;
}

.btn-primary {
	border: none;
	background-color: var(--eo-accent);
	color: var(--eo-text-on-accent);
	box-shadow: var(--eo-shadow);
	transition: filter .2s ease, transform .15s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--eo-accent);
	filter: brightness(1.05);
	transform: translateY(-1px);
}

.btn-primary.disabled,
.btn-primary:disabled {
	background-color: #B0C4F8;
	border: none;
	color: var(--eo-text-on-accent);
}

.btn-cta {
	border: none;
	background-image: linear-gradient(90deg, var(--eo-cta-from), var(--eo-cta-to));
	color: var(--eo-text-on-accent);
	box-shadow: var(--eo-shadow);
	transition: filter .2s ease, transform .15s ease;
}

.btn-cta:hover,
.btn-cta:focus,
.btn-cta:not(:disabled):not(.disabled):active,
.btn-cta:not(:disabled):not(.disabled):active:focus {
	color: var(--eo-text-on-accent) !important;
	box-shadow: var(--eo-focus-ring) !important;
}

.btn-outline-primary {
	color: var(--eo-accent);
	border-color: var(--eo-accent);
}

.btn-outline-primary:hover {
	background-color: var(--eo-accent);
	color: var(--eo-text-on-accent);
}

.btn-outline-primary:active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
	background-color: var(--eo-accent);
	color: var(--eo-text-on-accent);
}

.btn-link {
	color: var(--eo-accent);
}

/* Dragonpass pages: gold for elite, default blue for normal */
body.theme-elite .eo-dragonpass .btn-primary {
	background-color: #C8A063;
	border-color: #C8A063;
	color: var(--eo-text-on-accent);
}

body.theme-elite .eo-dragonpass .btn-primary:hover,
body.theme-elite .eo-dragonpass .btn-primary:focus,
body.theme-elite .eo-dragonpass .btn-primary:not(:disabled):not(.disabled):active,
body.theme-elite .eo-dragonpass .btn-primary:not(:disabled):not(.disabled):active:focus {
	background-color: var(--eo-accent-dark);
	border-color: var(--eo-accent-dark);
	color: var(--eo-text-on-accent);
}

body.theme-elite .eo-dragonpass .btn-outline-primary {
	color: var(--eo-accent);
	border-color: var(--eo-accent);
}

body.theme-elite .eo-dragonpass .btn-outline-primary:hover,
body.theme-elite .eo-dragonpass .btn-outline-primary:focus,
body.theme-elite .eo-dragonpass .btn-outline-primary:not(:disabled):not(.disabled):active,
body.theme-elite .eo-dragonpass .btn-outline-primary:not(:disabled):not(.disabled):active:focus {
	background-color: var(--eo-accent);
	border-color: var(--eo-accent);
	color: var(--eo-text-on-accent);
}

body.theme-elite .btn-primary.disabled,
body.theme-elite .btn-primary:disabled {
	background-color: #E0D5C0;
	color: var(--eo-text-muted);
}

/* Focus ring follows --eo-focus-ring (blue for normal, gold for elite) */
.btn:focus,
.btn:focus-visible,
.btn.focus,
.btn:not(:disabled):not(.disabled):active:focus,
.btn:not(:disabled):not(.disabled):active:focus-visible {
	box-shadow: var(--eo-focus-ring) !important;
}

body.theme-elite .btn-cta:hover,
body.theme-elite .btn-cta:focus,
body.theme-elite .btn-cta:not(:disabled):not(.disabled):active,
body.theme-elite .btn-cta:not(:disabled):not(.disabled):active:focus {
	background-color: var(--eo-accent) !important;
	background-image: none !important;
	border-color: var(--eo-accent) !important;
	color: var(--eo-text-on-accent) !important;
	box-shadow: var(--eo-focus-ring) !important;
}

/* Elite: replace green (success) amounts/progress with gold */
.eo-gold-amount {
	color: #C8A063 !important;
}

body.theme-elite .eo-gold-progress {
	background-color: var(--eo-accent) !important;
	background-image: linear-gradient(90deg, var(--eo-cta-from), var(--eo-cta-to)) !important;
}

/* ERP amount on package list */
.eo-erp-amount {
	color: var(--eo-accent);
}

/* --------------------------------------------------------------------------
   3. Forms & inputs
   -------------------------------------------------------------------------- */
.form-control {
	background-color: var(--eo-surface);
	border: 1px solid var(--eo-border);
	border-radius: var(--eo-radius-sm);
	color: var(--eo-text);
	height: calc(1.5em + 0.9rem + 2px);
}

.form-control:disabled,
.form-control[readonly] {
	background-color: #E9ECF3;
}

.form-control::placeholder {
	color: var(--eo-text-muted);
}

.form-control:focus {
	background-color: var(--eo-surface);
	border-color: var(--eo-accent);
	box-shadow: 0 0 0 2px var(--eo-accent-soft);
	color: var(--eo-text);
}

label,
.col-form-label {
	color: var(--eo-text);
	font-weight: 500;
}

/* Info box (e.g. "Fields with * are compulsory") */
.eo-info-box {
	background-color: var(--eo-accent-soft);
	color: var(--eo-accent);
	border-radius: var(--eo-radius-sm);
	padding: 0.75rem 1rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.eo-info-box .eo-info-icon {
	font-size: 1.25rem;
}

/* Info row (label + value pairs, e.g. Ticket Information) */
.eo-info-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0.4rem 0;
}

.eo-info-row .eo-info-label {
	font-weight: 500;
	color: var(--eo-text-muted);
	min-width: 110px;
}

.eo-info-row .eo-info-value {
	color: var(--eo-text);
}

/* Constrain embedded images/tables in announcement content (home page + full page) */
.eo-announcement-content {
	overflow: hidden;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.eo-announcement-content img,
.eo-announcement-content table,
.eo-announcement-content iframe,
.eo-announcement-content video {
	max-width: 100% !important;
	height: auto !important;
}

/* Token badge (e.g. "Tokens - 5") */
.eo-token-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background-color: var(--eo-accent-soft);
	color: var(--eo-accent);
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.3rem 0.75rem;
	border-radius: 12px;
}

.eo-token-badge i {
	font-size: 1rem;
}

/* Cart button (re-entry page) */
.eo-cart-btn,
a.eo-cart-btn,
.eo-toolbar a.eo-cart-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: var(--eo-accent);
	color: var(--eo-text-on-accent);
	font-size: 0.9rem;
	font-weight: 500;
	padding: 0.5rem 1.2rem;
	border-radius: 6px;
	text-decoration: none;
	transition: filter .2s ease;
	position: relative;
	cursor: pointer !important;
}

.eo-cart-btn:hover {
	filter: brightness(1.05);
	color: var(--eo-text-on-accent);
	text-decoration: none;
}

.eo-cart-btn .eo-cart-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	background-color: #EF4444;
	color: var(--eo-text-on-accent);
	font-size: 0.7rem;
	font-weight: 700;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Match btn-action height to eo-cart-btn when sitting next to it */
.eo-section-title-with-action .btn-action {
	padding: 0.5rem 1.2rem;
	font-size: 0.9rem;
	font-weight: 500;
}

/* Package card (re-entry / activate) */
.eo-package-card {
	transition: transform .15s ease, box-shadow .15s ease;
	overflow: hidden;
}

.eo-package-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--eo-shadow-lg);
}

.eo-package-name {
	font-weight: 600;
}

.eo-package-actions {
	align-items: stretch;
}

.eo-package-actions .btn {
	padding: 0.35rem 0.6rem;
	font-size: 0.85rem;
}

.eo-stat-rounded {
	border-radius: 6px;
}

@media (min-width: 768px) {
	.eo-add-to-cart-btn {
		width: auto !important;
	}
}

/* Filter dropdown items: white hover instead of grey */
.filter .dropdown-item:hover,
.filter .dropdown-item:focus {
	background-color: var(--eo-surface) !important;
	color: var(--eo-text) !important;
}

/* Prevent filter dropdown from overflowing the viewport */
.filter .dropdown-menu {
	max-width: 90vw;
	overflow-x: auto;
}

/* Filter dropdown in toolbar (re-entry/activate pages) - align to right */
.eo-toolbar .filter .dropdown-menu {
	right: 0;
	left: auto;
}

.eo-toolbar .filter .dropdown-menu select[name="child"] {
	width: 300px;
}

/* Centered loading spinner */
.form-loading-spinner {
	display: block;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Toolbar row (commerce-style filter bar) */
.eo-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.eo-toolbar .eo-toolbar-select {
	flex: 1 1 200px;
	min-width: 180px;
}

.eo-toolbar .eo-toolbar-btn {
	background-color: #6c757d !important;
	color: var(--eo-text-on-accent) !important;
	border: 1px solid #6c757d !important;
	padding: 0.4rem 0.8rem !important;
	font-size: 0.875rem;
	white-space: nowrap;
	border-radius: var(--eo-radius-sm);
}

.eo-toolbar .eo-toolbar-btn:hover,
.eo-toolbar .eo-toolbar-btn:focus {
	background-color: #5a6268 !important;
	color: var(--eo-text-on-accent) !important;
	border-color: #545b62 !important;
}

.eo-toolbar .eo-cart-btn {
	flex-shrink: 0;
}

/* Better-looking timeline line + icon */
.timeline::before {
	background-color: var(--eo-accent) !important;
	width: 3px !important;
	left: 69px !important;
}

.timeline .timeline-icon {
	background-color: var(--eo-accent) !important;
}

/* Announcement card inside timeline */
.eo-announcement-card {
	margin-left: 20px;
	transition: transform .15s ease, box-shadow .15s ease;
}

.eo-announcement-card:hover {
	transform: translateX(2px);
	box-shadow: var(--eo-shadow-lg);
}

/* Date chip inside announcement card */
.eo-announcement-date {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background-color: var(--eo-accent-soft);
	color: var(--eo-accent);
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.2rem 0.6rem;
	border-radius: 12px;
	white-space: nowrap;
}

.eo-announcement-date i {
	font-size: 0.85rem;
}

/* Form label with required indicator */
.eo-form-label {
	display: block;
	color: var(--eo-text);
	font-weight: 500;
	margin-bottom: 0.4rem;
}

.eo-required {
	color: #EF4444;
	margin-left: 2px;
}

.eo-elite-login-link {
	color: var(--eo-gold);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	padding: 0.4rem 0.8rem;
	border-radius: var(--eo-radius-sm);
	transition: color .2s ease, background-color .2s ease;
}

.eo-elite-login-link-chevron {
	color: var(--eo-gold);
	font-weight: 700;
	font-size: 1.1rem;
	display: inline-block;
	transform: translateY(-1px);
}

.eo-elite-login-link:hover,
.eo-elite-login-link:focus {
	color: var(--eo-gold-dark);
	background-color: var(--eo-accent-soft);
	text-decoration: none;
}

.eo-elite-login-link:hover .eo-elite-login-link-chevron,
.eo-elite-login-link:focus .eo-elite-login-link-chevron {
	color: var(--eo-gold-dark);
}

/* Regular member login link (on elite login page) - blue */
.eo-regular-login-link {
	color: var(--eo-blue);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	padding: 0.4rem 0.8rem;
	border-radius: var(--eo-radius-sm);
	transition: color .2s ease, background-color .2s ease;
}

.eo-regular-login-link-chevron {
	color: var(--eo-blue);
	font-weight: 700;
	font-size: 1.1rem;
	display: inline-block;
	transform: translateY(-1px);
}

.eo-regular-login-link:hover,
.eo-regular-login-link:focus {
	color: var(--eo-blue-dark);
	background-color: rgba(60, 107, 248, 0.1);
	text-decoration: none;
}

.eo-regular-login-link:hover .eo-regular-login-link-chevron,
.eo-regular-login-link:focus .eo-regular-login-link-chevron {
	color: var(--eo-blue-dark);
}

.input-group-append .btn-outline-secondary {
	border-color: var(--eo-border);
	color: var(--eo-text-muted);
	background-color: var(--eo-surface-2);
}

.required-mark,
.text-danger.asterisk {
	color: var(--eo-danger);
}

/* --------------------------------------------------------------------------
   4. Tables
   -------------------------------------------------------------------------- */
.table {
	color: var(--eo-text);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--eo-radius);
}

.table thead tr:first-child th:first-child {
	border-radius: var(--eo-radius) 0 0 0;
}

.table thead tr:first-child th:last-child {
	border-radius: 0 var(--eo-radius) 0 0;
}

.table tbody tr:last-child td:first-child {
	border-radius: 0 0 0 var(--eo-radius);
}

.table tbody tr:last-child td:last-child {
	border-radius: 0 0 var(--eo-radius) 0;
}

.table thead th {
	background-color: var(--eo-accent);
	color: var(--eo-text-on-accent);
	border: none;
	border-right: 1px solid #B8CAF0;
	font-weight: 500;
	font-size: 14px;
	padding: 0.8rem 0.85rem;
}

.table thead th:last-child {
	border-right: none;
}

.table thead th a,
.table thead th a:hover,
.table thead th a:focus {
	color: var(--eo-text-on-accent);
	background-color: var(--eo-accent);
	text-decoration: none;
}

body.theme-elite .table thead th {
	background-color: var(--eo-accent);
	color: var(--eo-text-on-accent);
	border-right-color: #E8D5B0;
}.table td,
.table th {
	border-color: var(--eo-border);
	vertical-align: middle;
	padding: 0.8rem 0.85rem;
}

.table-hover tbody tr:hover {
	background-color: var(--eo-accent-soft);
}

/* --------------------------------------------------------------------------
   5. Badges & state chips
   -------------------------------------------------------------------------- */
.badge {
	border-radius: var(--eo-radius-sm);
	font-weight: 500;
	padding: 0.35em 0.6em;
}

/* Elite: inverted badges - color on border, white fill, color text */
body.theme-elite .badge.badge-success,
body.theme-elite .badge.badge-primary,
body.theme-elite .badge.badge-info,
body.theme-elite .badge.badge-danger,
body.theme-elite .badge.badge-secondary {
	background-color: var(--eo-surface) !important;
}

body.theme-elite .badge.badge-success {
	color: var(--eo-success) !important;
	border: 1px solid var(--eo-success);
}

body.theme-elite .badge.badge-primary {
	color: var(--eo-accent) !important;
	border: 1px solid var(--eo-accent);
}

body.theme-elite .badge.badge-info {
	color: var(--eo-accent) !important;
	border: 1px solid var(--eo-accent);
}

body.theme-elite .badge.badge-danger {
	color: var(--eo-danger) !important;
	border: 1px solid var(--eo-danger);
}

body.theme-elite .badge.badge-secondary {
	color: #6B7280 !important;
	border: 1px solid #6B7280;
}

body.theme-elite .badge.badge-warning {
	background-color: var(--eo-surface) !important;
	color: #F5A623 !important;
	border: 1px solid #F5A623;
}

/* Elite: inverted style for non-standard wallet badge classes (rerp to ebp3) */
body.theme-elite .badge.badge-light,
body.theme-elite .badge.badge-dark,
body.theme-elite .badge.badge-teal,
body.theme-elite .badge.badge-purple,
body.theme-elite .badge.badge-orange,
body.theme-elite .badge.badge-lime {
	background-color: var(--eo-surface) !important;
}

body.theme-elite .badge.badge-light {
	color: #6B7280 !important;
	border: 1px solid #6B7280;
}

body.theme-elite .badge.badge-dark {
	color: #1B1B1B !important;
	border: 1px solid #1B1B1B;
}

body.theme-elite .badge.badge-teal {
	color: #20c997 !important;
	border: 1px solid #20c997;
}

body.theme-elite .badge.badge-purple {
	color: #6f42c1 !important;
	border: 1px solid #6f42c1;
}

body.theme-elite .badge.badge-orange {
	color: #fd7e14 !important;
	border: 1px solid #fd7e14;
}

body.theme-elite .badge.badge-lime {
	color: #8AC800 !important;
	border: 1px solid #8AC800;
}

/* Elite: gold gradient SweetAlert confirm button */
body.theme-elite .swal2-popup .swal2-confirm,
body.theme-elite .swal2-confirm {
	background-color: var(--eo-accent) !important;
	background-image: linear-gradient(90deg, var(--eo-cta-from), var(--eo-cta-to)) !important;
	border-color: var(--eo-accent) !important;
	color: var(--eo-text-on-accent) !important;
	box-shadow: none !important;
}

body.theme-elite .swal2-popup .swal2-confirm:hover,
body.theme-elite .swal2-popup .swal2-confirm:focus,
body.theme-elite .swal2-confirm:hover,
body.theme-elite .swal2-confirm:focus {
	background-color: var(--eo-accent-dark) !important;
	background-image: linear-gradient(90deg, var(--eo-cta-from), var(--eo-cta-to)) !important;
	border-color: var(--eo-accent-dark) !important;
	color: var(--eo-text-on-accent) !important;
}

/* Elite: pale gold toast background (top-right notifications) */
body.theme-elite .swal2-toast {
	background-color: #FAF1DC !important;
}

/* Inverse (hollow/outline) button - white fill, colored border, colored text */
.eo-btn-inverse {
	background-color: var(--eo-surface) !important;
	background-image: none !important;
	border: 1px solid var(--eo-accent) !important;
	color: var(--eo-accent) !important;
}

.eo-btn-inverse:hover,
.eo-btn-inverse:focus,
.eo-btn-inverse:not(:disabled):not(.disabled):active,
.eo-btn-inverse:not(:disabled):not(.disabled):active:focus {
	background-color: var(--eo-accent) !important;
	color: var(--eo-text-on-accent) !important;
	border-color: var(--eo-accent) !important;
}

.eo-btn-inverse:not(:disabled):not(.disabled):active,
.eo-btn-inverse:not(:disabled):not(.disabled):active:focus {
	box-shadow: var(--eo-focus-ring) !important;
}

/* Solid color buttons (no gradient) */
.eo-btn-solid {
	background-color: var(--eo-accent) !important;
	background-image: none !important;
	border-color: var(--eo-accent) !important;
	color: var(--eo-text-on-accent) !important;
}

.eo-btn-solid:hover,
.eo-btn-solid:focus {
	background-color: var(--eo-accent-dark) !important;
	background-image: none !important;
	border-color: var(--eo-accent-dark) !important;
}

/* Elite: darker gold for qty +/- buttons (package list) */
body.theme-elite .btn.btn-outline-primary.border-right-0,
body.theme-elite .btn.btn-outline-primary.border-left-0 {
	color: #8B6914 !important;
	border-color: #8B6914 !important;
}

/* Elite login heading (Playfair Display + gold) */
.eo-login-heading {
	font-family: var(--eo-font-display);
	color: var(--eo-accent) !important;
	font-weight: 500;
	letter-spacing: 0.02em;
	font-size: 1.6rem;
}

body.theme-elite .btn.btn-outline-primary.border-right-0:hover,
body.theme-elite .btn.btn-outline-primary.border-left-0:hover {
	background-color: #8B6914 !important;
	color: var(--eo-text-on-accent) !important;
}

body.theme-elite .btn.btn-outline-primary:hover,
body.theme-elite .btn.btn-outline-primary:active,
body.theme-elite .btn.btn-outline-primary:not(:disabled):not(.disabled):active {
	background-color: #8B6914 !important;
	color: var(--eo-text-on-accent) !important;
	border-color: #8B6914 !important;
}

/* Elite: the quantity field sits between two gold +/- buttons but kept
   Bootstrap's blue border and text, which left every product stepper
   two-toned. Match it to the buttons either side. */
body.theme-elite .input-group .form-control.border-primary {
	border-color: #8B6914 !important;
	color: #8B6914 !important;
}

body.theme-elite .input-group .form-control.border-primary:focus {
	box-shadow: var(--eo-focus-ring);
}

/* Wallet tag (TOKEN/STRP/ERP) - hollow/inverted in elite */
.eo-wallet-tag {
	background-color: #6c757d;
	color: var(--eo-text-on-accent);
	padding: 0.35em 0.6em;
	font-size: 0.85em;
	font-weight: 500;
	border-radius: var(--eo-radius-sm);
}

.eo-wallet-tag.bg-token {
	background-color: #000000;
	color: var(--eo-text-on-accent);
}

.eo-wallet-tag.bg-erp {
	background-color: green;
	color: var(--eo-text-on-accent);
}

.eo-wallet-tag.bg-erp2 {
	background-color: rgb(0, 156, 0);
	color: var(--eo-text-on-accent);
}

.eo-wallet-tag.bg-rerp {
	background-color: rgb(117, 194, 117);
	color: var(--eo-text-on-accent);
}

.eo-wallet-tag.bg-berp {
	background-color: rgb(173, 246, 173);
	color: var(--eo-text-on-accent);
}

.eo-wallet-tag.bg-rtrp {
	background-color: purple;
	color: var(--eo-text-on-accent);
}

.eo-wallet-tag.bg-pp {
	background-color: #A52A2A;
	color: var(--eo-text-on-accent);
}

.eo-wallet-tag.bg-cp {
	background-color: #00acc1;
	color: var(--eo-text-on-accent);
}

.eo-wallet-tag.bg-ccp {
	background-color: teal;
	color: var(--eo-text-on-accent);
}

.eo-wallet-tag.bg-ebp {
	background-color: #f7b84b;
	color: var(--eo-text-on-accent);
}

.eo-wallet-tag.bg-ebp2 {
	background-color: orange;
	color: var(--eo-text-on-accent);
}

.eo-wallet-tag.bg-ebp3 {
	background-color: rgb(160, 104, 0);
	color: var(--eo-text-on-accent);
}

.eo-wallet-tag.bg-sebp {
	background-color: rgb(114, 74, 0);
	color: var(--eo-text-on-accent);
}

.eo-wallet-tag.bg-eb {
	background-color: rgb(37, 179, 75);
	color: var(--eo-text-on-accent);
}

.eo-wallet-tag.bg-strp2 {
	background-color: #6A0DAD;
	color: var(--eo-text-on-accent);
}

.eo-wallet-tag.bg-yipps {
	background-color: #4b88e4;
	color: var(--eo-text-on-accent);
}

.eo-wallet-tag.bg-razer {
	background-color: #47e10c;
	color: var(--eo-text-on-accent);
}

.eo-wallet-tag.bg-perp {
	background-color: #658e65;
	color: var(--eo-text-on-accent);
}

.eo-wallet-tag.bg-local {
	background-color: #495057;
	color: var(--eo-text-on-accent);
}

.eo-wallet-tag.bg-danger {
	background-color: var(--eo-danger);
	color: var(--eo-text-on-accent);
}

.eo-wallet-tag.bg-dark {
	background-color: #2B2F36;
	color: var(--eo-text-on-accent);
}

/* Elite: wallet tag hollow/inverted (color on border, white fill, color text) */
body.theme-elite .eo-wallet-tag {
	background-color: var(--eo-surface) !important;
	color: inherit !important;
	border: 1px solid currentColor;
}

body.theme-elite .eo-wallet-tag.bg-token {
	color: #000000 !important;
}

body.theme-elite .eo-wallet-tag.bg-erp {
	color: green !important;
}

body.theme-elite .eo-wallet-tag.bg-erp2 {
	color: rgb(0, 156, 0) !important;
}

body.theme-elite .eo-wallet-tag.bg-rerp {
	color: rgb(117, 194, 117) !important;
}

body.theme-elite .eo-wallet-tag.bg-berp {
	color: rgb(173, 246, 173) !important;
}

body.theme-elite .eo-wallet-tag.bg-rtrp {
	color: purple !important;
}

body.theme-elite .eo-wallet-tag.bg-pp {
	color: #A52A2A !important;
}

body.theme-elite .eo-wallet-tag.bg-cp {
	color: #00acc1 !important;
}

body.theme-elite .eo-wallet-tag.bg-ccp {
	color: teal !important;
}

body.theme-elite .eo-wallet-tag.bg-ebp {
	color: #f7b84b !important;
}

body.theme-elite .eo-wallet-tag.bg-ebp2 {
	color: orange !important;
}

body.theme-elite .eo-wallet-tag.bg-ebp3 {
	color: rgb(160, 104, 0) !important;
}

body.theme-elite .eo-wallet-tag.bg-sebp {
	color: rgb(114, 74, 0) !important;
}

body.theme-elite .eo-wallet-tag.bg-eb {
	color: rgb(37, 179, 75) !important;
}

body.theme-elite .eo-wallet-tag.bg-strp2 {
	color: #6A0DAD !important;
}

body.theme-elite .eo-wallet-tag.bg-yipps {
	color: #4b88e4 !important;
}

body.theme-elite .eo-wallet-tag.bg-razer {
	color: #47e10c !important;
}

body.theme-elite .eo-wallet-tag.bg-perp {
	color: #658e65 !important;
}

body.theme-elite .eo-wallet-tag.bg-local {
	color: #495057 !important;
}

body.theme-elite .eo-wallet-tag.bg-danger {
	color: var(--eo-danger) !important;
}

body.theme-elite .eo-wallet-tag.bg-dark {
	color: #2B2F36 !important;
}

/* Elite: solid gold button (for places where btn-primary should be gold, not blue) */
body.theme-elite .eo-clickable.btn-primary,
body.theme-elite .eo-clickable.btn-sm.btn-primary {
	background-color: #C8A063 !important;
	border-color: #C8A063 !important;
	color: var(--eo-text-on-accent) !important;
}

body.theme-elite .eo-clickable.btn-primary:hover,
body.theme-elite .eo-clickable.btn-sm.btn-primary:hover,
body.theme-elite .eo-clickable.btn-primary:focus,
body.theme-elite .eo-clickable.btn-sm.btn-primary:focus {
	background-color: var(--eo-accent-dark) !important;
	border-color: var(--eo-accent-dark) !important;
	color: var(--eo-text-on-accent) !important;
}

/* --------------------------------------------------------------------------
   6. Progress bars (goals / ranking)
   -------------------------------------------------------------------------- */
.progress {
	background-color: var(--eo-surface-2);
	border-radius: var(--eo-radius-pill);
	height: 8px;
}

/* --------------------------------------------------------------------------
   7. Dropdown menus (topbar wallet / profile / language)
   -------------------------------------------------------------------------- */
.dropdown-menu {
	background-color: var(--eo-surface);
	border: 1px solid var(--eo-border);
	border-radius: var(--eo-radius);
	box-shadow: var(--eo-shadow-lg);
}

.dropdown-item {
	color: var(--eo-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
	background-color: var(--eo-accent-soft);
	color: var(--eo-accent);
}

.dropdown-item.noti-title h5 {
	color: var(--eo-text-muted);
}

/* --------------------------------------------------------------------------
   8. Alerts
   -------------------------------------------------------------------------- */
.alert {
	border-radius: var(--eo-radius);
	border: none;
}

.alert-info {
	background-color: var(--eo-accent-soft);
	color: var(--eo-accent);
}

/* --------------------------------------------------------------------------
   9. Pagination (global, works with or without `page-item` class)
   -------------------------------------------------------------------------- */
.pagination li:first-child>.page-link {
	border-top-left-radius: var(--eo-radius-sm);
	border-bottom-left-radius: var(--eo-radius-sm);
}

.pagination li:last-child>.page-link {
	border-top-right-radius: var(--eo-radius-sm);
	border-bottom-right-radius: var(--eo-radius-sm);
}

.pagination li.active>.page-link {
	background-color: var(--eo-accent) !important;
	border-color: var(--eo-accent) !important;
	color: var(--eo-text-on-accent) !important;
	z-index: 1;
}

.pagination li.disabled>.page-link {
	color: #6c757d;
	pointer-events: none;
	cursor: auto;
	background-color: #fff;
	border-color: #dee2e6;
}

.page-link {
	color: var(--eo-accent);
	border-color: #D1D5DB;
}

body.theme-elite .pagination li.disabled>.page-link {
	color: var(--eo-text-muted);
	background-color: var(--eo-surface);
	border-color: #ECE7DC;
}

/* --------------------------------------------------------------------------
   10. Login form specifics
   -------------------------------------------------------------------------- */
.eo-login-card .form-control {
	background-color: var(--eo-surface);
}

.eo-login-card .underline {
	text-decoration: underline;
	color: var(--eo-accent);
}

/* Login labels and tnc text should not be bold */
.eo-login-card label,
.eo-login-card .custom-control-label {
	font-weight: 400;
}

/* Spacing between Username, Password and the tnc checkbox */
.eo-login-card .form-group {
	margin-bottom: 1.25rem;
}

.eo-login-card label {
	margin-bottom: 0.4rem;
}

/* Language selector + forgot password links use the accent (blue) */
.eo-login-body .text-primary,
.eo-login-card .text-primary {
	color: var(--eo-accent) !important;
}

.eo-login-body .btn-language {
	color: var(--eo-accent) !important;
}

/* Login button with trailing arrow */
.eo-btn-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	position: relative;
}

.eo-btn-arrow i {
	font-size: 18px;
	transition: transform .2s ease;
}

.eo-btn-arrow:hover i {
	transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   11. Ribbon cards (home page right column)
   -------------------------------------------------------------------------- */
.ribbon-box {
	background-color: var(--eo-surface);
	border: 1px solid var(--eo-border);
	border-radius: var(--eo-radius);
	box-shadow: var(--eo-shadow);
	position: relative;
	overflow: hidden;
}

.ribbon-box .card-body {
	padding: 1.25rem;
}

/* Ribbon label */
.ribbon-box .ribbon {
	position: relative;
	float: none !important;
	display: inline-block;
	padding: 0.35rem 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: var(--eo-radius-sm);
	margin-bottom: 1rem;
	left: auto !important;
	top: auto !important;
}

.ribbon-box .ribbon.ribbon-green,
.ribbon-box .ribbon.bg-success {
	background-image: linear-gradient(90deg, var(--eo-cta-from), var(--eo-cta-to));
	color: var(--eo-text-on-accent);
}

.ribbon-box .ribbon.ribbon-purple {
	background-image: linear-gradient(90deg, #8B5CF6, #6D28D9);
	color: var(--eo-text-on-accent);
}

body.theme-elite .ribbon-box .ribbon.ribbon-purple {
	background-image: linear-gradient(90deg, var(--eo-cta-from), var(--eo-cta-to));
	color: #1B1B1B;
}

/* Remove the default ribbon triangle/point */
.ribbon-box .ribbon::before {
	display: none !important;
}

/* Content area inside ribbon box */
.ribbon-box .ribbon-content {
	margin-top: 0.5rem;
}

/* Container that wraps star ranking / leaderboard content */
.ribbon-box .wp-container {
	background-color: transparent;
	padding: 0 !important;
}

/* Title text inside cards */
.ribbon-box .title.text-main {
	font-family: var(--eo-font-display);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	border-bottom: 2px solid var(--eo-border) !important;
	padding-bottom: 0.6rem !important;
	margin-bottom: 0.8rem;
	color: var(--eo-text);
}

/* Dropdown inside table cells: keep menu aligned to button, not cell */
.table-responsive td .dropdown {
	display: inline-block;
}

.table-responsive td .dropdown-menu {
	z-index: 1050;
}

/* Packages table: prevent overflow clipping so dropdown can show */
.eo-table-actions-wrap {
	overflow: visible !important;
}

/* Spacing between table and pagination */
.table+.pagination,
.table-responsive+.pagination,
.table-responsive+nav .pagination {
	margin-top: 1rem;
}

/* Action button in Packages table: white bg, grey border, blue text */
.btn-action {
	background-color: var(--eo-surface) !important;
	border: 1px solid #D1D5DB !important;
	color: var(--eo-accent) !important;
	border-radius: var(--eo-radius-sm);
	font-weight: 500;
	display: inline-block;
}

.btn-action:hover,
.btn-action:focus,
.btn-action:active,
.btn-action:not(:disabled):not(.disabled):active {
	background-color: #F3F4F6 !important;
	color: #000000 !important;
	border-color: #9CA3AF !important;
}

body.theme-elite .btn-action {
	border-color: var(--eo-accent) !important;
	color: var(--eo-accent) !important;
}

body.theme-elite .btn-action:hover,
body.theme-elite .btn-action:focus,
body.theme-elite .btn-action:active,
body.theme-elite .btn-action:not(:disabled):not(.disabled):active {
	background-color: var(--eo-accent) !important;
	color: var(--eo-text-on-accent) !important;
}

/* Section title with icon (and optional right-aligned action link) */
.eo-section-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1.05rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.eo-section-title i {
	font-size: 1.3rem;
	color: var(--eo-accent);
}

/* Section title with action link on the right (e.g., View All) */
.eo-section-title-with-action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	gap: 8px;
}

.eo-section-title-with-action .eo-section-title {
	margin-bottom: 0;
}

@media (max-width: 575.98px) {
	.eo-section-title-with-action {
		flex-direction: column;
		align-items: stretch;
	}

	.eo-section-title-with-action>div:last-child,
	.eo-section-title-with-action>.eo-section-action,
	.eo-section-title-with-action>a:last-child {
		display: flex;
		gap: 8px;
	}

	.eo-section-title-with-action>div:last-child>a,
	.eo-section-title-with-action>a:last-child {
		flex: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.eo-section-title-with-action>div:last-child>a+a,
	.eo-section-title-with-action>a+a {
		margin-left: 0;
	}
}

.eo-section-title-with-action .eo-section-action {
	font-size: 0.85rem;
	color: var(--eo-accent);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.eo-section-title-with-action .eo-section-action:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   12. Leaderboard rankings (Top EBC, Daily EBC)
   -------------------------------------------------------------------------- */
.bg-rank-1,
.bg-rank-2,
.bg-rank-3,
.bg-rank-4 {
	border-radius: var(--eo-radius-sm) !important;
	font-weight: 700;
	font-size: 0.85rem;
	padding: 0.25rem 0 !important;
}

.bg-rank-1 {
	background-image: linear-gradient(135deg, #FFD700, #F59E0B) !important;
	color: #1B1B1B !important;
}

.bg-rank-2 {
	background-image: linear-gradient(135deg, #C0C0C0, #9CA3AF) !important;
	color: #1B1B1B !important;
}

.bg-rank-3 {
	background-image: linear-gradient(135deg, #CD7F32, #92400E) !important;
	color: var(--eo-text-on-accent) !important;
}

.bg-rank-4 {
	background-color: linear-gradient(135deg, #60A5FA, #3B82F6) !important;
	color: var(--eo-text-on-accent) !important;
}

.bg-rank-name-1,
.bg-rank-name-2,
.bg-rank-name-3,
.bg-rank-name-4 {
	border-radius: var(--eo-radius-sm) !important;
	padding: 0.25rem 0.8rem !important;
}

.bg-rank-name-1 {
	background-color: rgba(255, 215, 0, 0.1) !important;
}

.bg-rank-name-2 {
	background-color: rgba(192, 192, 192, 0.1) !important;
}

.bg-rank-name-3 {
	background-color: rgba(205, 127, 50, 0.1) !important;
}

.bg-rank-name-4 {
	background-color: rgba(96, 165, 250, 0.12) !important;
}

/* Self rank highlight - vibrant blue ring + tinted background */
.bg-rank-1.self,
.bg-rank-2.self,
.bg-rank-3.self,
.bg-rank-4.self {
	outline: none !important;
	box-shadow: none !important;
}

.eo-leaderboard-info.self,
.eo-leaderboard-rank.self {
	border: 2px solid var(--eo-accent) !important;
	box-shadow: none !important;
}

.eo-self-badge {
	display: inline-block;
	background-color: var(--eo-accent);
	color: var(--eo-text-on-accent);
	font-size: 0.65rem;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 999px;
	margin-left: 6px;
	vertical-align: middle;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Leaderboard row layout (Top EBC, Top Starred, Top Daily) */
.eo-leaderboard-row {
	min-height: 36px;
}

.eo-leaderboard-rank {
	width: 32px;
	height: 32px;
	min-width: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.85rem;
	flex-shrink: 0;
}

.eo-leaderboard-info {
	padding: 0.5rem 0.85rem;
	font-weight: 500;
	font-size: 0.85rem;
}

.eo-leaderboard-name {
	font-weight: 600;
	color: var(--eo-text);
}

.eo-leaderboard-total {
	font-weight: 700;
	color: var(--eo-text);
}

/* --------------------------------------------------------------------------
   13. Home page layout spacing tweaks
   -------------------------------------------------------------------------- */

/* Left column section cards spacing */
.home-left-col .card,
.home-left-col>div[class*="col-"] .card {
	margin-bottom: 1.25rem;
}

/* Right column card spacing */
.home-right-col .card {
	margin-bottom: 1.25rem;
}

/* Star ranking progress bar inside card */
.ribbon-box .progress {
	height: 8px;
	border-radius: var(--eo-radius-pill);
	background-color: var(--eo-surface-2);
}

.ribbon-box .progress .progress-bar {
	background-color: #0DBF7F;
	background-image: none;
	border-radius: var(--eo-radius-pill);
}

body.theme-elite .ribbon-box .progress .progress-bar {
	background-image: linear-gradient(90deg, var(--eo-cta-from), var(--eo-cta-to));
}

/* Daily EBC tab toggle buttons */
.ribbon-box .btn-sm.btn-primary,
.ribbon-box .btn-sm.btn-outline-primary {
	padding: 0.25rem 0.8rem;
	font-size: 0.78rem;
}

/* Announcement card text */
.ribbon-box .ribbon-content h5 {
	font-weight: 600;
	margin-top: 0.5rem;
}

.ribbon-box .ribbon-content a {
	color: var(--eo-accent);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   14. Home page table refinements (check-in, account validity, packages)
   -------------------------------------------------------------------------- */
.home-left-col .table {
	margin-bottom: 0;
}

.home-left-col .table th {
	font-size: 0.8rem;
	padding: 0.8rem 0.75rem;
}

.home-left-col .table td {
	font-size: 0.85rem;
	padding: 0.8rem 0.75rem;
}

/* Check-in icons */
.home-left-col .table td p {
	margin-bottom: 0.25rem;
}

.home-left-col .table td p:last-child {
	margin-bottom: 0;
}

/* Card header-title fits better */
.home-left-col .header-title {
	font-size: 1.05rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

/* Grey table header style */
.table-order tr th {
	background: #f1f5f7;
	color: #6c757d;
}

.table-order thead th {
	background: #f1f5f7 !important;
	color: #6c757d !important;
	border-left: none !important;
	border-right: none !important;
}

body.theme-elite .table-order tr th,
body.theme-elite .table-order thead th {
	background: #f1f5f7 !important;
	color: #6c757d !important;
}

/* Elite gold month nav buttons (agent promo select month) */
.eo-month-btn-active {
	background-color: var(--eo-accent) !important;
	border-color: var(--eo-accent) !important;
	color: var(--eo-text-on-accent) !important;
}

.eo-month-btn-active:hover,
.eo-month-btn-active:focus {
	background-color: var(--eo-accent-dark) !important;
	border-color: var(--eo-accent-dark) !important;
	color: var(--eo-text-on-accent) !important;
}

.eo-month-btn-inactive {
	background-color: transparent !important;
	border-color: var(--eo-accent) !important;
	color: var(--eo-accent) !important;
}

.eo-month-btn-inactive:hover,
.eo-month-btn-inactive:focus {
	background-color: rgba(200, 160, 99, 0.1) !important;
	border-color: var(--eo-accent) !important;
	color: var(--eo-accent) !important;
}

/* Select2 full width inside form rows */
.select2-container {
	width: 100% !important;
	max-width: 100%;
}

/* Custom checkbox color - follows the active theme accent */
.custom-control-input:checked~.custom-control-label::before {
	background-color: var(--eo-accent) !important;
	border-color: var(--eo-accent) !important;
}

.custom-control-input:focus~.custom-control-label::before {
	box-shadow: var(--eo-focus-ring-sm) !important;
}

.custom-control-input:active~.custom-control-label::before,
.custom-control-input:not(:disabled):active~.custom-control-label::before {
	background-color: var(--eo-accent) !important;
	border-color: var(--eo-accent) !important;
}

/* SweetAlert2 confirm button - gradient blue violet */
.swal2-confirm {
	background-image: linear-gradient(90deg, var(--eo-cta-from), var(--eo-cta-to)) !important;
	background-color: var(--eo-accent) !important;
	color: var(--eo-text-on-accent) !important;
	border: none !important;
	box-shadow: 0 4px 16px rgba(23, 46, 104, 0.06) !important;
}

.swal2-confirm:hover,
.swal2-confirm:focus {
	background-image: linear-gradient(90deg, var(--eo-cta-from), var(--eo-cta-to)) !important;
	background-color: var(--eo-accent) !important;
	filter: brightness(1.05) !important;
	color: var(--eo-text-on-accent) !important;
}

/* Multiply sign (used between two form fields) */
.eo-multiply {
	display: inline-block;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--eo-text-muted);
	font-weight: 600;
}

.eo-product-price {
	color: var(--eo-blue);
	font-weight: 700;
}

body.theme-elite .eo-product-price {
	color: var(--eo-accent);
}

.eo-product-card .eo-product-option {
	color: var(--eo-blue);
	border: 1px solid var(--eo-blue) !important;
	cursor: pointer;
}

.eo-product-card .eo-product-option.active,
.eo-product-card .eo-product-option:hover {
	background-color: var(--eo-blue);
	color: var(--eo-text-on-accent);
}

@media screen and (max-width: 600px) {
	.eo-product-card {
		flex-direction: column;
	}

	.eo-product-card .eo-product-image,
	.eo-product-card .eo-product-image-placeholder {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Elite Privilege page
   -------------------------------------------------------------------------- */
.eo-privilege-header {
	padding-top: 0.5rem;
}

.eo-privilege-title {
	font-family: var(--eo-font-display);
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--eo-text);
	letter-spacing: -0.01em;
}

.eo-privilege-subtitle {
	font-family: var(--eo-font-display);
	color: var(--eo-text-muted);
	font-size: 0.85rem;
	letter-spacing: 0.4em;
}

.eo-privilege-divider {
	margin-top: 1rem;
	margin-bottom: 0;
	border-top: 1px solid var(--eo-border);
}

.eo-privilege-card {
	background: var(--eo-surface);
	border: 1px solid var(--eo-border);
	border-radius: 16px;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}

.eo-privilege-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(27, 27, 27, 0.08);
}

.eo-privilege-image-wrap {
	position: relative;
	width: 100%;
	height: 320px;
	overflow: hidden;
	background: var(--eo-surface-2);
}

.eo-privilege-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.eo-privilege-image-placeholder {
	background: linear-gradient(135deg, var(--eo-surface-2), var(--eo-border));
}

.eo-privilege-tag-badge {
	position: absolute;
	top: 16px;
	right: 16px;
	background: rgba(22, 19, 17, 0.7);
	color: var(--eo-text-on-accent);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	padding: 6px 14px;
	border-radius: 999px;
	backdrop-filter: blur(4px);
}

.eo-privilege-pill {
	display: inline-block;
	background: #F3EEE3;
	color: #8B6A2A;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 4px;
	letter-spacing: 0.05em;
}

.eo-privilege-card-title {
	font-family: var(--eo-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--eo-text);
	margin-top: 0.75rem;
	margin-bottom: 0.5rem;
	line-height: 1.3;
}

.eo-privilege-card-desc {
	font-size: 0.95rem;
	line-height: 1.6;
	margin-bottom: 0;
}

.eo-privilege-card-subtitle {
	font-size: 0.9rem;
	font-style: italic;
	margin-bottom: 0;
}

.eo-privilege-reserved-badge {
	background: #E6F4EA;
	color: #1E7A3A;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: 5px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

.eo-privilege-explore {
	color: var(--eo-text-muted);
	text-decoration: none;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	transition: color .2s ease;
}

.eo-privilege-explore:hover {
	color: var(--eo-accent);
}

.eo-privilege-explore-en {
	text-transform: uppercase;
}

.eo-privilege-explore-sep {
	color: var(--eo-border);
	margin: 0 4px;
}

.eo-btn-privilege {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: 10px 22px;
	border-radius: 999px;
	transition: all .2s ease;
}

.eo-btn-privilege-rsvp {
	background: #1B1B1B;
	color: var(--eo-text-on-accent);
	border: 1px solid #1B1B1B;
}

.eo-btn-privilege-rsvp:hover,
.eo-btn-privilege-rsvp:focus {
	background: var(--eo-accent);
	border-color: var(--eo-accent);
	color: var(--eo-text-on-accent);
	box-shadow: 0 4px 12px rgba(200, 160, 99, 0.35);
}

.eo-btn-privilege-reserved {
	background: #F3EEE3;
	color: #8B6A2A;
	border: 1px solid #E7E1D6;
	cursor: default;
	opacity: 1;
}

.eo-privilege-modal {
	border: none;
	border-radius: 16px;
	overflow: hidden;
	background: var(--eo-surface);
}

.eo-privilege-modal-header {
	border-bottom: 1px solid var(--eo-border);
	padding: 16px 20px;
}

.eo-privilege-modal-title {
	font-family: var(--eo-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--eo-text);
	margin: 0;
}

.eo-privilege-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 10;
	background: transparent;
	border: none;
	width: 32px;
	height: 32px;
	font-size: 1.4rem;
	color: var(--eo-text);
	line-height: 1;
	opacity: 0.6;
}

.eo-privilege-modal-close:hover {
	opacity: 1;
}

.eo-privilege-modal-image {
	width: 100%;
	height: 300px;
	background-size: cover;
	background-position: center;
	background-color: var(--eo-surface-2);
}

.eo-privilege-modal-desc {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--eo-text);
}

.eo-toast-modal {
	background: var(--eo-surface);
	border: none;
	border-radius: 16px;
	padding: 48px 40px 32px;
	text-align: center;
	position: relative;
	max-width: 460px;
	margin: auto;
}

.eo-toast-close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: transparent;
	border: 1px solid var(--eo-accent);
	color: var(--eo-accent);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 1rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.eo-toast-close:hover {
	background: var(--eo-accent);
	color: var(--eo-text-on-accent);
}

.eo-toast-icon-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 24px;
}

.eo-toast-icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 1px solid #E7D4B0;
	background: #FBF5EA;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--eo-accent);
	font-size: 1.6rem;
}

.eo-toast-title {
	font-family: var(--eo-font-display);
	font-size: 2rem;
	font-weight: 700;
	color: var(--eo-text);
	margin-bottom: 8px;
}

.eo-toast-sub {
	font-family: var(--eo-font-display);
	color: var(--eo-accent);
	font-size: 0.8rem;
	letter-spacing: 0.4em;
	margin-bottom: 24px;
}

.eo-toast-desc {
	color: var(--eo-text-muted);
	font-size: 0.95rem;
	line-height: 1.7;
	margin-bottom: 28px;
	text-wrap: balance;
}

.eo-toast-btn {
	background: var(--eo-accent);
	color: var(--eo-text-on-accent);
	font-weight: 600;
	letter-spacing: 0.1em;
	padding: 14px 28px;
	border-radius: 8px;
	width: 100%;
	font-size: 0.95rem;
	transition: all .2s ease;
}

.eo-toast-btn:hover,
.eo-toast-btn:focus {
	background: var(--eo-accent-dark);
	color: var(--eo-text-on-accent);
	box-shadow: 0 4px 12px rgba(200, 160, 99, 0.4);
}

.eo-toast-footer {
	font-family: var(--eo-font-display);
	color: var(--eo-accent);
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	margin: 4px 0 0;
}

body.theme-elite .swal2-popup .eo-toast-confirm,
body.theme-elite .eo-toast-confirm {
	background: var(--eo-accent) !important;
	background-image: none !important;
	border-color: var(--eo-accent) !important;
	color: var(--eo-text-on-accent) !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
	padding: 14px 48px !important;
	min-width: 300px !important;
	border-radius: 8px !important;
	font-size: 0.95rem !important;
	box-shadow: 0 0 24px 4px rgba(200, 160, 99, 0.35) !important;
	transition: all .2s ease !important;
}

body.theme-elite .swal2-popup .eo-toast-confirm:hover,
body.theme-elite .swal2-popup .eo-toast-confirm:focus,
body.theme-elite .eo-toast-confirm:hover,
body.theme-elite .eo-toast-confirm:focus {
	background: var(--eo-accent-dark) !important;
	background-image: none !important;
	border-color: var(--eo-accent-dark) !important;
	color: var(--eo-text-on-accent) !important;
	box-shadow: 0 0 28px 6px rgba(200, 160, 99, 0.5) !important;
}

.eo-toast-actions {
	margin-top: 0.5rem !important;
}

.eo-toast-footer-wrap {
	margin-top: 0.25rem !important;
	padding-top: 0 !important;
	border-top: none !important;
}

/* --------------------------------------------------------------------------
   Elite Global Ecosystem
   -------------------------------------------------------------------------- */
.eo-ecosystem-header {
	border-top: 1px solid var(--eo-border);
	padding-top: 1rem;
}

.eo-ecosystem-title {
	font-family: var(--eo-font-display);
	color: var(--eo-accent);
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: 0.15em;
}

.eo-ecosystem-card {
	display: block;
	background: var(--eo-surface);
	border: 1px solid var(--eo-border);
	border-radius: 12px;
	padding: 24px;
	height: 100%;
	color: inherit;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	position: relative;
}

.eo-ecosystem-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(27, 27, 27, 0.08);
	border-color: var(--eo-accent);
	color: inherit;
	text-decoration: none;
}

.eo-ecosystem-card-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}

.eo-ecosystem-card-title {
	font-family: var(--eo-font-display);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--eo-text);
	letter-spacing: 0.05em;
}

.eo-ecosystem-badge {
	background: #FBF5EA;
	color: #8B6A2A;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	padding: 4px 10px;
	border-radius: 4px;
}

.eo-ecosystem-card-subtitle {
	font-family: var(--eo-font-display);
	font-style: italic;
	color: var(--eo-accent);
	font-size: 0.9rem;
	margin-bottom: 8px;
}

.eo-ecosystem-card-desc {
	font-size: 0.9rem;
	line-height: 1.5;
	margin-bottom: 0;
	padding-bottom: 32px;
}

.eo-ecosystem-card-arrow {
	position: absolute;
	bottom: 20px;
	right: 24px;
	color: var(--eo-accent);
	font-size: 1rem;
}

.eo-ecosystem-card-disabled {
	cursor: default;
	opacity: 0.55;
	pointer-events: none;
}

.eo-ecosystem-card-disabled:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--eo-border);
}

/* --------------------------------------------------------------------------
   Elite Opulence — home page
   -------------------------------------------------------------------------- */
body.theme-elite .content-page {
	background:
		radial-gradient(ellipse at top right, rgba(200, 160, 99, 0.06) 0%, transparent 50%),
		radial-gradient(ellipse at bottom left, rgba(200, 160, 99, 0.04) 0%, transparent 50%),
		var(--eo-bg);
}

body.theme-elite .eo-elite-greeting {
	font-family: var(--eo-font-display);
	font-size: 2.2rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

body.theme-elite .eo-elite-greeting-name {
	color: var(--eo-accent);
	font-weight: 700;
}

body.theme-elite .eo-welcome-sub {
	font-style: italic;
	letter-spacing: 0.02em;
}

body.theme-elite .page-title-box {
	border-bottom: 1px solid rgba(200, 160, 99, 0.2);
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
}

body.theme-elite .eo-stat-card,
body.theme-elite .eo-reward-card {
	border: 1px solid rgba(200, 160, 99, 0.15);
	border-radius: 12px;
	background: var(--eo-surface);
	transition: transform .2s ease, box-shadow .2s ease;
}

body.theme-elite .eo-stat-card:hover,
body.theme-elite .eo-reward-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(200, 160, 99, 0.1);
}

body.theme-elite .eo-gold-amount {
	font-family: var(--eo-font-display);
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Elite Hub Cards
   -------------------------------------------------------------------------- */
.eo-hub-card {
	background: linear-gradient(180deg, var(--eo-surface) 0%, #F5F7FA 100%);
	border: 1px solid var(--eo-border);
	border-radius: 12px;
	padding: 20px;
	height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: transform .2s ease, box-shadow .2s ease;
	box-shadow: none;
}

.eo-hub-card-dark {
	background: linear-gradient(to bottom right, #1B1B1B 0%, #1B1B1B 40%, #1f1b18 50%, #1B1B1B 60%, #1B1B1B 100%);
	color: var(--eo-accent);
	border: 1px solid var(--eo-accent);
}

.eo-hub-card-redbox {
	background: linear-gradient(180deg, var(--eo-surface) 0%, #FDF5F5 100%);
	border-color: #F2DCDC;
}

.eo-hub-card-velare {
	background: linear-gradient(180deg, var(--eo-surface) 0%, #F5F8FC 100%);
	border-color: #DDE6F1;
}

.eo-hub-card:hover {
	transform: translateY(-2px);
	box-shadow: none;
}

@media (min-width: 768px) and (max-width: 1750px) {
	.eo-hub-cards > [class*="col-"] {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

.eo-hub-card-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.eo-hub-card-brand {
	font-family: var(--eo-font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--eo-accent);
}

.eo-hub-card-brand-red {
	font-family: var(--eo-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #C8302E;
}

.eo-hub-card-brand-blue {
	font-family: var(--eo-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #2C5AA0;
}

.eo-hub-card-network {
	font-size: 1.6rem;
	color: var(--eo-accent);
}

.eo-hub-card-chip {
	width: 36px;
	height: 26px;
	background: linear-gradient(135deg, var(--eo-accent), var(--eo-accent-dark));
	border-radius: 4px;
	margin: 4px 0 12px;
}

.eo-hub-card-number {
	font-family: 'Courier New', monospace;
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: var(--eo-accent);
}

.eo-hub-card-number-dark {
	font-family: 'Courier New', monospace;
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	color: var(--eo-text);
}

.eo-hub-card-bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.eo-hub-card-label {
	font-size: 0.6rem;
	letter-spacing: 0.1em;
	color: #8B8579;
}

.eo-hub-card-label-dark {
	font-size: 0.6rem;
	letter-spacing: 0.1em;
	color: var(--eo-text-muted);
}

.eo-hub-card-name {
	font-family: var(--eo-font-display);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--eo-accent);
}

.eo-hub-card-value-dark {
	font-family: var(--eo-font-display);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--eo-text);
}

.eo-hub-card-logo {
	width: 32px;
	height: 20px;
	background: linear-gradient(135deg, var(--eo-accent), var(--eo-accent-dark));
	border-radius: 2px;
}

.eo-hub-card-badge-red {
	background: #FBE8E7;
	color: #C8302E;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 3px 10px;
	border-radius: 4px;
}

.eo-hub-card-badge-blue {
	background: #E8EEF7;
	color: #2C5AA0;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 3px 10px;
	border-radius: 4px;
}

.eo-hub-toast-carousel {
	position: relative;
	min-height: 200px;
}

.eo-hub-toast-cards {
	position: relative;
	width: 100%;
}

/* Inactive cards are pulled out of flow and the active one is left in it, so
   the carousel is exactly as tall as the card on screen. The card's bottom
   padding is the gutter the dots sit in - the dots are positioned inside the
   card rather than after it, which is what used to leave them hanging below
   the box once the column narrowed. */
.eo-hub-toast-card {
	background: linear-gradient(135deg, #FAF5EA, #F5EFE2);
	border: 1px solid #E7D4B0;
	border-radius: 12px;
	padding: 20px 20px 38px;
	min-height: 200px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: none;
	flex-direction: column;
	justify-content: flex-start;
}

.eo-hub-toast-card.active {
	position: relative;
	display: flex;
}

.eo-hub-toast-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--eo-accent);
	color: var(--eo-text-on-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
}

.eo-hub-toast-title {
	font-family: var(--eo-font-display);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--eo-text);
	margin: 8px 0 0;
}

.eo-hub-toast-msg {
	font-size: 0.78rem;
	color: #8B6A2A;
	line-height: 1.5;
	margin: 8px 0 0;
}

.eo-hub-toast-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	display: flex;
	gap: 6px;
	justify-content: center;
	margin-top: 0;
}

.eo-hub-toast-dots .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--eo-accent);
	opacity: 0.3;
}

.eo-hub-toast-dots .dot.active {
	opacity: 1;
}

.eo-hub-card-meta {
	font-family: 'Courier New', monospace;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	color: var(--eo-accent);
	opacity: 0.7;
	margin-top: 2px;
}

/* Hub card holding something identifying: blurred until the member taps it,
   tapped again to hide it. The blur is a shoulder-surfing guard, not a security
   boundary - the value is still in the DOM. */
.eo-hub-card-private {
	position: relative;
	cursor: pointer;
	user-select: none;
}

/* Blur the card's own content, never the scrim sitting on top of it. The brand
   line stays crisp - it names the card, it does not identify the member. */
.eo-hub-card-private > *:not(.eo-hub-card-reveal):not(.eo-hub-card-top) {
	filter: blur(7px);
	transition: filter .25s ease;
	pointer-events: none;
}

.eo-hub-card-private.is-revealed > *:not(.eo-hub-card-reveal):not(.eo-hub-card-top) {
	filter: none;
}

.eo-hub-card-reveal {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 6px;
	padding: 14px;
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.35);
	color: var(--eo-text);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: background-color .25s ease, opacity .25s ease;
}

/* Matching line boxes so the label sits level with the icon beside it. */
.eo-hub-card-reveal i,
.eo-hub-card-reveal-text {
	font-size: 1.05rem;
	line-height: 1.05rem;
}

.eo-hub-card-reveal-text {
	font-size: 0.78rem;
}

/* On phone widths the card is narrow enough that the label would run into the
   brand line on the opposite corner - the icon alone carries it there. */
@media (max-width: 575.98px) {
	.eo-hub-card-reveal-text {
		display: none;
	}
}

/* Once revealed the tint drops away but the icon stays put, so it is obvious
   the card can be hidden again from the same spot. */
.eo-hub-card-private.is-revealed .eo-hub-card-reveal {
	background-color: transparent;
	color: var(--eo-text-muted);
	opacity: 0.75;
}

.eo-hub-card-private.is-revealed .eo-hub-card-reveal-text {
	display: none;
}

/* The dark card needs a dark scrim and its own muted tone. */
.eo-hub-card-dark.eo-hub-card-private .eo-hub-card-reveal {
	background-color: rgba(27, 27, 27, 0.45);
	color: #E9E2D4;
}

.eo-hub-card-dark.eo-hub-card-private.is-revealed .eo-hub-card-reveal {
	background-color: transparent;
	color: #8B8579;
}

.eo-hub-card-private:focus {
	outline: none;
	box-shadow: var(--eo-focus-ring);
}

/* Same as .eo-hub-card-meta but for the light-faced cards (Velare, Redbox),
   where the gold accent would not read. Carries the legal name under the
   preferred one. */
.eo-hub-card-meta-dark {
	font-size: 0.68rem;
	letter-spacing: 0.02em;
	color: var(--eo-text-muted);
	margin-top: 2px;
}

/* --------------------------------------------------------------------------
   VProtect
   -------------------------------------------------------------------------- */
.eo-vprotect-header {
	border-bottom: 1px solid var(--eo-border);
	padding-bottom: 1rem;
}

.eo-vprotect-header > .d-flex {
	flex-wrap: wrap;
	gap: 0.75rem;
}

.eo-vprotect-title {
	font-family: var(--eo-font-display);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--eo-text);
}

.eo-vprotect-title i {
	color: var(--eo-accent);
}

.eo-vprotect-subtitle {
	color: var(--eo-text-muted);
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	margin-top: 2px;
}

.eo-vprotect-header .btn-light {
	background-color: var(--eo-surface);
	border: 1px solid var(--eo-border);
	border-radius: var(--eo-radius-pill);
	padding: 0.35rem 0.9rem;
	color: var(--eo-text);
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.eo-vprotect-header .btn-light:hover,
.eo-vprotect-header .btn-light:focus {
	background-color: var(--eo-accent-soft);
	border-color: var(--eo-accent);
	color: var(--eo-accent);
}

.eo-vprotect-header-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* VProtect: password-reset stepper */
.eo-vprotect-steps {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
}

.eo-vprotect-step {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	position: relative;
	color: var(--eo-text-muted);
	font-size: 0.72rem;
	text-align: center;
}

.eo-vprotect-step + .eo-vprotect-step::before {
	content: '';
	position: absolute;
	top: 13px;
	right: 50%;
	left: -50%;
	height: 2px;
	background-color: var(--eo-border);
	z-index: 0;
}

.eo-vprotect-step.active + .eo-vprotect-step::before,
.eo-vprotect-step.done + .eo-vprotect-step::before {
	background-color: var(--eo-accent);
}

.eo-vprotect-step-dot {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--eo-border);
	background-color: var(--eo-surface);
	font-weight: 700;
	font-size: 0.78rem;
	line-height: 1;
}

.eo-vprotect-step.active .eo-vprotect-step-dot,
.eo-vprotect-step.done .eo-vprotect-step-dot {
	border-color: var(--eo-accent);
	background-color: var(--eo-accent);
	color: var(--eo-text-on-accent);
}

.eo-vprotect-step.active .eo-vprotect-step-label,
.eo-vprotect-step.done .eo-vprotect-step-label {
	color: var(--eo-text);
	font-weight: 600;
}

.eo-vprotect-otp-input {
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.4em;
	text-indent: 0.4em;
}

/* VProtect: star rating */
.eo-rating-stars {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.eo-rating-star {
	padding: 0 2px;
	border: none;
	background: none;
	line-height: 1;
	cursor: pointer;
	color: var(--eo-border);
	transition: transform .12s ease, color .12s ease;
}

.eo-rating-star i {
	font-size: 2rem;
}

.eo-rating-star.active {
	color: var(--eo-accent);
}

.eo-rating-star:hover {
	transform: scale(1.12);
}

.eo-rating-star:focus {
	outline: none;
	box-shadow: none;
}

/* VProtect: destructive section + selected package */
.eo-vprotect-danger-card {
	border-color: rgba(229, 72, 77, 0.35);
}

.eo-vprotect-danger-card .eo-section-title i {
	color: #E5484D;
}

.eo-vprotect-package-active {
	border-color: var(--eo-accent);
	box-shadow: var(--eo-focus-ring);
}

.eo-vprotect-topup-balance,
.eo-vprotect-topup-summary > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.875rem;
	color: var(--eo-text-muted);
}

.eo-vprotect-topup-balance {
	padding: 0.6rem 0.85rem;
	background: var(--eo-accent-soft);
	border-radius: var(--eo-radius-sm);
}

.eo-vprotect-topup-balance strong {
	color: var(--eo-accent);
}

.eo-vprotect-topup-summary {
	border-top: 1px solid var(--eo-border);
	padding-top: 0.75rem;
}

.eo-vprotect-topup-summary > div {
	padding: 0.2rem 0;
}

.eo-vprotect-topup-summary .eo-vprotect-topup-credit strong {
	color: var(--eo-accent);
	font-size: 1rem;
}

/* Stat values keep the plain h4 + .font-weight-semibold look. .eo-gold-amount
   only contributes its colour here - its display face and letter-spacing are
   cancelled so all three cards match. */
.eo-vprotect .eo-stat-card .eo-gold-amount {
	font-family: var(--eo-font-body);
	letter-spacing: normal;
}

.eo-stat-note {
	display: block;
	margin-top: 2px;
	font-size: 0.75rem;
	color: var(--eo-text-muted);
}

/* Section heading with a gold rule running off to the right */
.eo-vprotect-section-title {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin: 0.5rem 0 1.25rem;
}

.eo-vprotect-section-title span {
	font-family: var(--eo-font-display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eo-text);
	white-space: nowrap;
}

.eo-vprotect-section-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--eo-accent), transparent);
	opacity: 0.55;
}

/* Service cards - the whole card is the link */
.eo-vprotect-service-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.5rem;
	background: var(--eo-surface);
	border: 1px solid var(--eo-border);
	border-radius: var(--eo-radius-lg);
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.eo-vprotect-service-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--eo-cta-from), var(--eo-cta-to));
	opacity: 0;
	transition: opacity .2s ease;
}

.eo-vprotect-service-card:hover,
.eo-vprotect-service-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--eo-shadow-lg);
	border-color: var(--eo-accent);
	text-decoration: none;
}

.eo-vprotect-service-card:hover::before,
.eo-vprotect-service-card:focus-visible::before {
	opacity: 1;
}

.eo-vprotect-service-card:focus-visible {
	outline: none;
	box-shadow: var(--eo-focus-ring);
}

.eo-vprotect-service-icon {
	width: 56px;
	height: 56px;
	border-radius: var(--eo-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--eo-accent-soft);
	color: var(--eo-accent);
	font-size: 1.5rem;
	margin-bottom: 1.1rem;
	transition: background-color .2s ease;
}

.eo-vprotect-service-card:hover .eo-vprotect-service-icon {
	background: var(--eo-accent);
	color: var(--eo-text-on-accent);
}

.eo-vprotect-service-meta {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--eo-accent);
}

.eo-vprotect-service-name {
	font-family: var(--eo-font-display);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--eo-text);
	margin: 0.35rem 0 0.5rem;
}

.eo-vprotect-service-desc {
	color: var(--eo-text-muted);
	font-size: 0.9rem;
	line-height: 1.6;
	margin-bottom: 1.25rem;
}

.eo-vprotect-service-cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--eo-accent);
}

.eo-vprotect-service-cta i {
	transition: transform .2s ease;
}

.eo-vprotect-service-card:hover .eo-vprotect-service-cta i {
	transform: translateX(4px);
}

/* Empty / error state */
.eo-vprotect-empty {
	background: var(--eo-surface);
	border: 1px dashed var(--eo-border);
	border-radius: var(--eo-radius-lg);
	box-shadow: none;
}

.eo-vprotect-empty-icon {
	width: 52px;
	height: 52px;
	margin: 0 auto;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--eo-accent-soft);
	color: var(--eo-accent);
	font-size: 1.2rem;
}

/* Login / register */
.eo-vprotect-login-wrap {
	max-width: 420px;
	margin: 4rem auto;
}

.eo-vprotect-login-card {
	background: var(--eo-surface);
	border: 1px solid var(--eo-border);
	border-radius: var(--eo-radius-lg);
	box-shadow: var(--eo-shadow-lg);
}

.eo-vprotect-login-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 1px solid var(--eo-gold-soft, var(--eo-border));
	background: var(--eo-accent-soft);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--eo-accent);
	font-size: 1.4rem;
	margin-bottom: 12px;
}

.eo-vprotect-login-title {
	font-family: var(--eo-font-display);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--eo-text);
}

.eo-vprotect-login-card .alert {
	border-radius: var(--eo-radius-sm);
}

/* Service type tabs - overrides the global navy .nav-pills active colour */
.eo-vprotect .nav-pills {
	flex-wrap: wrap;
	gap: 0.5rem;
	border-bottom: 1px solid var(--eo-border);
	padding-bottom: 1rem;
}

.eo-vprotect .nav-pills .nav-link {
	border: 1px solid var(--eo-border);
	border-radius: var(--eo-radius-pill);
	padding: 0.45rem 1.1rem;
	font-weight: 500;
	color: var(--eo-text-muted);
	background-color: transparent;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.eo-vprotect .nav-pills .nav-link:hover,
.eo-vprotect .nav-pills .nav-link:focus {
	background-color: var(--eo-accent-soft);
	border-color: var(--eo-accent);
	color: var(--eo-accent);
}

.eo-vprotect .nav-pills .nav-link.active,
.eo-vprotect .nav-pills .show > .nav-link {
	background-color: var(--eo-accent);
	border-color: var(--eo-accent);
	color: var(--eo-text-on-accent);
}

/* Booking form */
.eo-vprotect .form-check-label {
	color: var(--eo-text);
	font-weight: 400;
}

.eo-vprotect textarea.form-control {
	resize: vertical;
	min-height: 72px;
}

/* Safari/iOS render date inputs with an intrinsic height that ignores
   Bootstrap's .form-control sizing. */
.eo-vprotect input[type="date"].form-control,
.eo-vprotect input[type="time"].form-control,
.eo-vprotect input[type="datetime-local"].form-control {
	-webkit-appearance: none;
	appearance: none;
	min-height: calc(1.5em + 0.75rem + 2px);
}

/* Daily schedule rows (time_table) */
.eo-vprotect-timetable-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

.eo-vprotect-timetable-day {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--eo-text-muted);
	min-width: 52px;
}

.eo-vprotect-timetable-row .form-control {
	width: auto;
	flex: 1 1 120px;
	min-width: 110px;
}

.eo-vprotect-timetable-sep {
	color: var(--eo-text-muted);
}

/* Quote summary */
.eo-vprotect-quote-card {
	background: var(--eo-surface);
	border: 1px solid var(--eo-border);
	border-radius: var(--eo-radius);
}

.eo-vprotect-quote-card h5 {
	font-family: var(--eo-font-display);
	font-weight: 600;
	color: var(--eo-text);
}

.eo-vprotect-quote-card h4 {
	font-family: var(--eo-font-display);
	color: var(--eo-accent);
	word-break: break-word;
}

.eo-vprotect-quote-lines {
	list-style: none;
	padding: 0;
	margin: 0 0 0.75rem;
	border-bottom: 1px solid var(--eo-border);
}

.eo-vprotect-quote-lines li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.35rem 0;
	font-size: 0.875rem;
	color: var(--eo-text-muted);
}

.eo-vprotect-quote-lines li span:last-child {
	color: var(--eo-text);
	font-weight: 500;
	white-space: nowrap;
}

.eo-vprotect-quote-total {
	margin-bottom: 0.75rem;
}

.eo-vprotect-quote-note {
	font-size: 0.8rem;
	color: var(--eo-accent);
}

/* Only pin the summary once it is an actual sidebar column (lg and up). */
@media (min-width: 992px) {
	.eo-vprotect-quote-card {
		position: sticky;
		top: calc(var(--eo-topbar-h) + (var(--eo-space) * 2));
	}
}

@media (max-width: 767.98px) {
	.eo-vprotect.container-fluid {
		padding: 1rem !important;
	}

	.eo-vprotect-title {
		font-size: 1.3rem;
	}

	.eo-vprotect-login-wrap {
		margin: 1.5rem auto;
	}

	.eo-vprotect .nav-pills .nav-link {
		padding: 0.4rem 0.8rem;
		font-size: 0.875rem;
	}

	.eo-vprotect-service-card {
		padding: 1.25rem;
	}

	.eo-vprotect-service-icon {
		width: 48px;
		height: 48px;
		font-size: 1.25rem;
		margin-bottom: 0.9rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eo-vprotect-service-card,
	.eo-vprotect-service-card:hover,
	.eo-vprotect-service-card:focus-visible,
	.eo-vprotect-service-cta i,
	.eo-vprotect-service-card:hover .eo-vprotect-service-cta i {
		transition: none;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

/* Bootstrap 4 ships no .font-weight-semibold; several views already use it. */
.font-weight-semibold {
	font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   Elite theme - context table tints
   -------------------------------------------------------------------------- */

/* Label/value tables across the app use Bootstrap's .table-info for the
   label column. Under the elite theme these follow the gold accent instead
   of the default blue, so the tables match the rest of the page. */
body.theme-elite .table-info {
	background-color: var(--eo-accent-soft);
	border-color: var(--eo-border) !important;
	color: var(--eo-text);
}