/* ==========================================================================
   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);
}

/* Not the accent: badge-info sits next to badge-primary in the same cell on
   the dealer grid ("Active  Public"), and two gold outlines read as one chip. */
body.theme-elite .badge.badge-info {
	color: #7A7466 !important;
	border: 1px solid #7A7466;
}

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;
}

/* Pending. The old #F5A623 amber sat 1.2:1 against the gold accent used for
   Active - near-identical lightness and the same warm hue - so the two statuses
   were indistinguishable at a glance. Slate is cool and much darker. */
body.theme-elite .badge.badge-warning {
	background-color: var(--eo-surface) !important;
	color: #45597A !important;
	border: 1px solid #45597A;
}

/* 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 tile for a card the member has not bound yet: brand line, a line of copy
   and a link out to the issuer. Inherits .eo-hub-card's box and hover. */
.eo-hub-card-apply {
	text-decoration: none;
	color: inherit;
}

.eo-hub-card-apply:hover,
.eo-hub-card-apply:focus {
	text-decoration: none;
	color: inherit;
}

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

.eo-hub-card-apply-text {
	margin: 14px 0 0;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--eo-text-muted);
}

.eo-hub-card-dark.eo-hub-card-apply .eo-hub-card-apply-text {
	color: #B9B2A4;
}

.eo-hub-card-apply-cta {
	display: inline-flex;
	align-items: center;
	margin-top: auto;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--eo-accent);
}

.eo-hub-card-dark.eo-hub-card-apply .eo-hub-card-apply-cta {
	color: #C8A063;
}

.eo-hub-card-velare.eo-hub-card-apply .eo-hub-card-apply-cta {
	color: var(--eo-blue);
}

/* 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);
}