* {
	font-family: 'League Spartan', sans-serif;
}

.content-wrap {
	min-height: 87vh;
}

.custom-button-1 {
	padding: 10px 0px;
	font-weight: 700;
	color: black;
	background: linear-gradient(0deg, rgba(128, 128, 128, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

.custom-button-2 {
	padding: 10px 0px;
	font-weight: 700;
	color: white;
	background: linear-gradient(0deg,#60232D 0%,#C15E6D 100%);
}

.custom-button-3 {
	padding: 10px 0px;
	font-weight: 700;
	color: white;
	background: linear-gradient(0deg,#60232D 0%,#C15E6D 100%);
}

/* Mobile home DEPOSIT/LOGOUT (or LOGIN/REGISTER) buttons.
   Scoped so the shared .custom-button-* classes stay unchanged elsewhere. */
.mobile-login-resgiter .custom-button-1 {
	background: linear-gradient(180deg, #60232D 0%, #010010 100%);
}

.mobile-login-resgiter .custom-button-2 {
	background: linear-gradient(180deg, #C15E6D 0%, #60232D 100%), linear-gradient(180deg, #60232D 0%, #010010 100%);
}

/* right button text: same gold gradient as the header btn-2 text */
.mobile-login-resgiter .custom-button-2 a {
	background: linear-gradient(180deg, #FEE5C4 0%, #F9B497 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.custom-form-1 {
	background-color: rgba(255, 255, 255, 0.93);
	border-radius: 5px;
}

.custom-form-2 {
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 5px;
	color: white;
}

.form-title {
	border-bottom: 5px #C15E6D solid;
	margin: 20px auto;
	padding: 0px 10px;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	border-radius: 10px;
}

#register-form i,
#login-form i {
	color: #C15E6D;
}

#depositTab .nav-link {
	color: #C15E6D;
}

/*HEADER*/
.top-bar-color {
	background-color: #010010;
}

#header-wrap {
    /* Figma: the 5px lines above/below the nav are a SOLID #C15E6D layer painted
       over the old gold gradient, and the nav strip itself is a FLAT #2F0C16 bar
       (Rectangle 30540) -- not the primary gradient. */
    background:
        linear-gradient(0deg, #C15E6D, #C15E6D) top / 100% 5px no-repeat,
        linear-gradient(0deg, #C15E6D, #C15E6D) bottom / 100% 5px no-repeat,
        #2F0C16;
}

#logo img {
	height: 100px;
}

#top-bar .login-register-btn img {
	height: 50px;
	transform: scale(1.05);
}

#top-bar .login-register-btn .header-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* btn-1 trapezium slants toward the top-right corner, so nudge the
	   centred label slightly left to sit in the button's wider left area. */
	padding-right: 16px;
	width: 156px;
	height: 50px;
	transform: scale(1.05);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
}

/* btn-2 trapezium slants toward the bottom-left corner, so reverse the
   btn-1 nudge and push the centred label slightly right instead. */
#top-bar .login-register-btn .header-btn-2 {
	padding-right: 0;
	padding-left: 16px;
}

/* JOIN NOW */
#top-bar .login-register-btn .header-btn-2 span {
	background: linear-gradient(180deg, #FEE5C4 0%, #F9B497 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* MOBILE TOP BAR: menu left, logo dead-centre.
   1fr auto 1fr keeps the logo centred on screen no matter how wide the menu button is. */
.mobile-top-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

.mobile-top-bar .primary-menu-trigger {
	justify-self: start;
}

.mobile-top-bar__logo {
	justify-self: center;
}

/* On mobile the gold-bordered #header-wrap is hidden, so the top bar's only
   border is the theme's faint 1px line. Restyle it to match the desktop
   header's 5px gold gradient border. */
@media (max-width: 991px) {
	#top-bar {
		border-bottom: 5px solid;
		border-image: linear-gradient(0deg, #C15E6D, #C15E6D);
		border-image-slice: 1;
	}
}

/*HEADER END*/

/* The Canvas theme sets ::selection to white-on-white (its --cnvs-themecolor is
   #fff), so highlighted text becomes invisible. Restore a normal highlight. */
::selection {
	background: #3390ff;
	color: #fff;
	text-shadow: none;
}

::-moz-selection {
	background: #3390ff;
	color: #fff;
	text-shadow: none;
}

/* images/member-page-background.png does not ship with this brand (nor with
   mcmclub-main), so use the brand's own home background with the dark tone
   sampled from its bottom edge behind it. */
.member-form-background {
	background: #2A161D url('../../../images/home/bg-image.png') center / cover no-repeat;
}

/*PROFILE*/
.profile-container {
	background-color: rgba(255, 255, 255, 0.92);
	border-radius: 10px;
	padding: 20px;
	height: 100%;
	color: #222;
}

.profile-container a {
	color: #222;
}

.profile-container a:hover {
	color: #C15E6D;
}

/* Sidebar: uppercase kept here only (not on the whole panel), full-width links */
.side-bar-item {
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.3px;
	border-radius: 6px;
	margin-bottom: 4px;
	transition: background-color 0.15s ease;
}

.side-bar-item a {
	display: block;
	padding: 11px 14px;
	font-size: 0.9rem;
}

.side-bar-item:not(.active):hover {
	background: rgba(193, 94, 109, 0.08);
}

.side-bar-item.active {
	background: linear-gradient(180deg, #C15E6D 0%, #60232D 100%);
}

.side-bar-item.active a {
	color: white;
}

/* ===== MEMBER ACCOUNT PAGES — red/gold theme to match home & header =====
   Scoped to .profile-container, which is used ONLY by the 4 member account
   pages (Dashboard, Change Password, Game ID, History) and their sidebar, so
   shared classes like .custom-button-2 stay blue everywhere else. */

/* "MY ACCOUNT" title bar: blue -> red gradient with gold underline */
.page-title.member-page-title {
	background: linear-gradient(180deg, #C15E6D 0%, #60232D 100%);
	border-bottom: 4px solid;
	border-image: linear-gradient(0deg, #EEC69E, #EEC69E);
	border-image-slice: 1;
}

/* SAVE / SUBMIT buttons: blue -> red gradient */
.profile-container .custom-button-2 {
	background: linear-gradient(180deg, #C15E6D 0%, #60232D 100%);
}

.profile-container .custom-button-2:hover {
	background: linear-gradient(180deg, #A94E5C 0%, #60232D 100%);
	color: #fff;
}

/* Game ID cards: red title + gold/red accent border */
.profile-container .card-dashboard {
	border: 1px solid #EEC69E;
	border-top: 4px solid #C15E6D;
	border-radius: 8px;
}

.profile-container .card-dashboard .card-title {
	color: #C15E6D;
	font-weight: 700;
}

/* Form fields focus: blue ring -> red ring */
.profile-container .form-control:focus {
	border-color: #C15E6D;
	box-shadow: 0 0 0 0.2rem rgba(193, 94, 109, 0.25);
}

/* ----- Game ID cards: clearer rows, monospace values, copy buttons ----- */
.profile-container .card-dashboard.game-id-card {
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.profile-container .card-dashboard.game-id-card:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.profile-container .game-id-card .card-body {
	padding: 1rem 1.25rem 1.1rem;
}

.profile-container .game-id-card .card-title {
	margin-bottom: 0.75rem;
	padding-bottom: 0.55rem;
	border-bottom: 1px solid #f0e2c6;
	font-size: 1.15rem;
	letter-spacing: 0.3px;
}

.game-id-field {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0;
}

.game-id-field + .game-id-field {
	border-top: 1px dashed #eee;
}

.game-id-label {
	flex: 0 0 42px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #b08a2e;
}

.game-id-value {
	flex: 1 1 auto;
	min-width: 0;
	font-family: "Consolas", "Menlo", "Courier New", monospace;
	font-size: 0.98rem;
	font-weight: 600;
	color: #222;
	word-break: break-all;
	-webkit-user-select: all;
	user-select: all;
}

.game-id-value.game-id-empty {
	font-family: inherit;
	font-weight: 400;
	font-style: italic;
	color: #adadad;
	-webkit-user-select: none;
	user-select: none;
}

.game-id-copy {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: #C15E6D;
	font-size: 1.05rem;
	line-height: 1;
	padding: 4px 7px;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.game-id-copy:hover {
	background: rgba(193, 94, 109, 0.1);
}

.game-id-copy:active {
	transform: scale(0.9);
}

.game-id-copy.copied {
	color: #1e9e57;
	background: rgba(30, 158, 87, 0.12);
}

/* Shown when the member has no game IDs at all */
.game-id-empty-state {
	text-align: center;
	padding: 2.5rem 1rem;
	color: #8a8a8a;
	border: 1px dashed #e0c98a;
	border-radius: 10px;
	background: rgba(231, 178, 74, 0.06);
}

.game-id-empty-state svg {
	display: block;
	margin: 0 auto 0.6rem;
	color: #e0c98a;
}

/* Game IDs / passwords must keep their real casing (panel no longer forces
   uppercase, but stay explicit so copied text always matches what's shown). */
.game-id-value {
	text-transform: none;
}

.game-id-copy svg {
	display: block;
}

/* ----- Shared building blocks for the member account pages ----- */

/* Section heading */
.account-heading {
	margin: 0 0 1.25rem;
	padding-bottom: 0.6rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: #C15E6D;
	border-bottom: 2px solid #f0e2c6;
}

/* Form labels + hints */
.profile-container .form-label {
	margin-bottom: 0.35rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #444;
}

.account-hint {
	margin: 0.2rem 0 1.1rem;
	font-size: 0.8rem;
	color: #888;
}

/* Password field with a show/hide toggle */
.password-field {
	position: relative;
}

.password-field .form-control {
	padding-right: 44px;
}

.password-toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	color: #999;
	padding: 6px;
	line-height: 0;
	border-radius: 6px;
	cursor: pointer;
}

.password-toggle:hover {
	color: #C15E6D;
}

/* Dashboard: welcome banner + quick links */
.account-welcome {
	margin-bottom: 1.25rem;
	padding: 1.5rem;
	border-radius: 10px;
	background: linear-gradient(135deg, #C15E6D 0%, #60232D 100%);
	color: #fff;
}

.account-welcome__hi {
	font-size: 0.9rem;
	opacity: 0.85;
}

.account-welcome__name {
	font-size: 1.6rem;
	font-weight: 700;
	word-break: break-word;
}

/* Dashboard: customer details list */
.account-info {
	margin: 0;
	border: 1px solid #eadfca;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.account-info__row {
	display: flex;
	gap: 1rem;
	padding: 0.85rem 1.1rem;
}

.account-info__row + .account-info__row {
	border-top: 1px solid #f1e7d3;
}

.account-info__label {
	flex: 0 0 120px;
	margin: 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: #8a7a55;
}

.account-info__value {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-weight: 600;
	color: #222;
	word-break: break-word;
}

.account-info__empty {
	color: #b3b3b3;
	font-weight: 400;
}

/* History table tidy-up */
.profile-container .table {
	margin-bottom: 0;
}

.profile-container .table thead th {
	background: #f7f2e6;
	color: #7a5b1e;
	font-weight: 700;
	border-bottom: 2px solid #EEC69E;
	white-space: nowrap;
}

.profile-container .table td,
.profile-container .table th {
	vertical-align: middle;
}

@media (max-width: 400px) {
	.account-info__label {
		flex-basis: 90px;
	}
}

/*PROFILE END*/

/* ===== MEMBER FORM PAGES — red theme to match home & account =====
   .custom-form-2 wraps ONLY the member form panels (Login, Register, Deposit,
   Withdraw, Withdraw-success), so scoping here flips their blue accents to the
   home/account red while shared classes stay blue everywhere else. */
.custom-form-2 .form-title {
	border-bottom-color: #C15E6D;
}

.custom-form-2 .custom-button-2 {
	background: linear-gradient(180deg, #C15E6D 0%, #60232D 100%);
}

.custom-form-2 .custom-button-2:hover {
	background: linear-gradient(180deg, #A94E5C 0%, #60232D 100%);
	color: #fff;
}

/* form fields focus: blue ring -> red ring */
.custom-form-2 .form-control:focus {
	border-color: #C15E6D;
	box-shadow: 0 0 0 0.2rem rgba(193, 94, 109, 0.25);
}

/*HOME*/
.slider-border {
	background: linear-gradient(0deg, rgba(238, 198, 158, 1), rgba(238, 198, 158, 1));
	padding: 5px 0px;
}

.announcement {
	background-color: rgba(0, 0, 0, 1);
}

.announcement-speaker img {
	animation: speaker-shake 0.5s infinite;
}

.ticker-container {
	color: white;
	overflow: hidden;
}

.ticker-container img {
	height: 50px;
	width: 50px;
}

.home-page-step {
    background: linear-gradient(180deg, #C15E6D 0%, #60232D 100%);
    color: #ffffff;
    font-weight: 700;
}


/* ONE continuous background behind BOTH .home-page-main and .home-footer.
   This brand ships a single tall images/home/bg-image.png (no footer-bg.png);
   the dark tone sampled from the image's bottom edge fills anything below it. */
.home-bg {
	background: #2A161D url("../../../images/home/bg-image.png") top center / 100% auto no-repeat;
}

/* The member/auth pages (login, register, deposit, withdraw, record, game ID,
   edit, dashboard) use .home-page-main on its OWN — no .home-bg wrapper — so it
   has to carry the brand background itself, or those pages render bare. */
.home-page-main {
	background: #2A161D url("../../../images/home/bg-image.png") center / cover no-repeat;
	color: white;
}

/* On the home page the .home-bg wrapper paints one continuous image across both
   sections, so the inner section must NOT paint a second copy over it. */
.home-bg .home-page-main {
	background: transparent;
}

.ranking-title-trophy img {
	height: 200px;
}

.ranking-title {
	font-family: 'League Spartan';
	font-weight: 700;
	font-size: 50px;
	line-height: 75px;
	text-align: center;
	background: linear-gradient(180deg, #FEE5C4 0%, #F9B497 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0px 2px 2px rgba(96, 35, 45, 0.8)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.8));
}

/* ===== LIVE TRANSACTION table ===== */
/* gold gradient frame with rounded corners */
.ranking-table-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 3px;
	border-radius: 14px;
	background: linear-gradient(180deg, #f9e08a 0%, #EEC69E 50%, #b87118 100%);
}

/* clips the table's square corners to the rounded frame */
.ranking-table-clip {
	border-radius: 12px;
	overflow: hidden;
}

.home-ranking-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	table-layout: fixed;
	background: #141213;
	color: #ffffff;
}

.home-ranking-table thead th {
	padding: 15px 12px;
	text-align: center;
	font-weight: 700;
	letter-spacing: 1px;
	color: #ffffff;
	background: linear-gradient(180deg, #C15E6D 0%, #90404D 55%, #60232D 100%);
	border-bottom: 2px solid #EEC69E;
}

.home-ranking-table tbody td {
	padding: 13px 16px;
	text-align: center;
	font-weight: 700;
	border-top: 1px solid #7D6954;
	border-right: 1px solid #7D6954;
}

.home-ranking-table tbody tr:first-child td {
	border-top: none;
}

.home-ranking-table tbody td:last-child {
	border-right: none;
}

/* amount column in gold */
.home-ranking-table tbody td.amount {
	color: #EEC69E;
}

/* the .home-bg wrapper paints the background; this section only needs an explicit
   height, because the footer-bg <img> that used to size it is gone — without a
   height the 115%-tall character would collapse to nothing */
.home-footer {
	position: relative;
	background: transparent;
	height: clamp(300px, 31vw, 560px);
}

.home-footer .footer-bg {
	display: none;
}

/* character: flush to the left edge, large, spilling slightly above the section */
.home-footer .footer-image {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 115%;
	z-index: 2;
}

.home-footer .footer-image img {
	display: block;
	height: 100%;
	width: auto;
}

/* social banners: right side, vertically centered */
.home-footer .footer-banners {
	position: absolute;
	right: 8%;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 1rem;
	z-index: 1;
}

.home-footer .footer-banners a {
	display: block;
	width: 160px;
	max-width: 100%;
	cursor: pointer;
}

.home-footer .footer-banners img {
	display: block;
	width: 100%;
	height: auto;
}

/*HOME END*/

/*CUSTOM CANVAS CODE*/
.menu-link {
	font-size: 1.25rem;
}

/*CUSTOM CANVAS CODE END*/

/*SLOT*/
.slot-page-background {
	background-image: url('../../images/slot-bg.png');
	background-position: center;
	background-size: 100% 100%;
}

.overlay-container {
	cursor: pointer;
	position: relative;
	/*	background-image: url('../../images/lucky-draw/treasure-box.png');*/
	background-position: center;
	background-size: 100% 100%;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	/* Adjust the alpha value for transparency */
	opacity: 1;
	transition: 0.5s ease;
	/* Add a smooth transition effect */
}

.overlay-container:hover .overlay {
	opacity: 0;
}

.overlay-container:hover img {
	/*	animation: speaker-shake 1s infinite;*/
}

.slot-game-effect {
	transition: 0.5s ease;
}

.slot-game-effect:hover {
	transform: scale(1.05);
	filter: drop-shadow(0 0 1rem rgb(255, 255, 255));
}

.slot-amount {
	position: absolute;
	font-weight: 600;
	color: white;
	bottom: 5%;
	right: 5%;
	font-size: 26px;
}

/*SLOT END*/

/*LUCKY DRAW*/
.lucky-draw-container {
	max-width: 800px;
}

.lucky-draw-page-background {
	background-image: url('../../images/lucky-draw/lucky-draw-bg.png');
	background-position: center;
	background-size: 100% 100%;
	padding: 0px;
}

.treasure-box-container {
	background-image: url('../../images/lucky-draw/treasure-box-container.png');
	background-position: center;
	background-size: 100% 100%;
}

.treasure-box-container img {
	width: 100%;
}

.lucky-draw-button {
	background-image: url('../../images/lucky-draw/button-bg.png');
	background-position: center;
	background-size: 100% 100%;
	font-size: 36px;
}

.golden-word img {
	height: 55px;
}

.black-bg-counter {
	display: inline-block;
	background-color: black;
	color: white;
	padding: 0px 20px;
	border-radius: 10px;
}

/*LUCKY DRAW END*/

/*PROMOTION*/
.promotion-page-background {
	background-color: #010001;
	padding: 0px;
}

.promotion-header {
	background-image: url('../../images/promotion/top-haze-forest.png');
	background-position: center;
	background-size: 100% 100%;
}

.promotion-container {
	border-radius: 10px;
	transition: 0.5s;
}

.promotion-container:hover {
	box-shadow: 0px 0px 10px 5px white;
}

.promotion-image {
	border-right: 5px solid transparent;
	border-image: linear-gradient(0deg, rgba(238, 198, 158, 1), rgba(238, 198, 158, 1));
	border-image-slice: 1;
	/* Ensure the entire border is filled with the gradient */
}

.promotion-image img {
	width: 100%;
	height: auto;
	/* Ensure the image scales proportionally */
}

.promotion-more-info-button {
	background: linear-gradient(0deg, rgba(1, 1, 1, 1) 0%, rgba(65, 65, 65, 1) 100%);
	font-size: 40px;
	text-align: center;
	color: white;
	font-weight: bold;
	border-radius: 0px 10px 10px 0px;
	cursor: pointer;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/*PROMOTION END*/

/*VIP*/
.vip-header {
	background-image: url('../../images/vip/vip-title.png');
	background-position: center;
	background-size: 100% 100%;
}

.vip-table {
	background-image: url('../../images/vip/table-bg.png');
	background-position: center;
	background-size: cover;
	text-align: center;
}

.vip-table .table {
	--bs-table-bg: transparent;
}

.vip-logo {
	height: 100px;
}

.true-false-icon img {
	height: 40px;
}

/*VIP END*/

/*RESULT*/
.result-header {
	background: url("../../images/result/top-background.png");
	background-position: center;
	background-size: 100% 100%;
}

.result-title-background {
	background: url("../../images/result/title-background.png");
	background-position: center;
	background-size: cover;
}

.stage-container {
	text-align: center;
}

.result-name {
	color: white;
	font-size: 60px;
	font-weight: bold;
	white-space: nowrap;
}

.stage-3 {
	padding: 100px 0px 80px 0px;
}

.stage-2 {
	padding: 100px 0px 160px 0px;
}

.stage-1 {
	padding: 100px 0px 280px 0px;
}

.stage-container .stage-main-part {
	background: linear-gradient(0deg, rgba(157, 7, 11, 1) 0%, rgba(174, 11, 14, 1) 50%, rgba(214, 12, 15, 1) 100%);
	box-shadow: inset 0px 15px 2px 0px rgba(255, 255, 255, .5);
}

.stage-container .stage-border-part {
	background: linear-gradient(0deg, rgba(138, 127, 133, 1) 0%, rgba(160, 157, 164, 1) 50%, rgba(206, 205, 203, 1) 100%);
	box-shadow: inset 0px 15px 2px 0px rgba(255, 255, 255, .5);
	padding: 0px;
}

.result-main {
	background: url("../../images/result/bottom-background.png");
	background-position: center;
	background-size: 100% 100%;
}

.result-reward {
	background: linear-gradient(0deg, rgba(84, 0, 0, 1) 0%, rgba(255, 44, 44, 1) 100%);
	box-shadow: 0 -3px 3px white, 0 3px 1px darkred;
	font-size: 50px;
	color: white;
	text-align: center;
	font-weight: bold;
	border-radius: 5px;
}

/*RESULT END*/

/*FOOTER*/
.desktop-footer {
	color: white;
	background: linear-gradient(0deg, rgba(27, 23, 23, 1) 0%, rgba(48, 48, 48, 1) 100%);
}

.footer-spacing {
	height: 72px;
	background-color: black;
}

.mobile-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 72px;
	display: flex;
	align-items: stretch;
	/* match the home page steps section background */
	background: linear-gradient(180deg, #C15E6D 0%, #60232D 100%);
	/* sit above the home footer banners (z-index 3) and side icons (z-index 100) */
	z-index: 1030;
}

/* four equal-width, evenly spaced items */
.mobile-footer-item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 6px 2px;
	text-decoration: none;
}

.mobile-footer-item img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	display: block;
}

.mobile-footer-item span {
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
}

/*FOOTER END*/



.testing-123456 {
	width: 300px;
	height: 200px;
	background: linear-gradient(to bottom, #3498db, #2980b9, #2ecc71);
	/* Blue, light blue, and green gradient background */
	clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
	filter: drop-shadow(0 0 0.75rem rgb(255, 217, 0));
	position: relative;
}



.custom-grey-bg {
	background-color: #f5f8fa;
	box-shadow: 2px 2px 5px 2px grey;
	padding: 1rem;
}

.trash-can-icon {
	color: red;
	cursor: pointer;
}

.custom-rainbow-color-button {
	background: linear-gradient(90deg, rgba(225, 25, 77, 1) 0%, rgba(236, 103, 40, 1) 17%, rgba(252, 177, 23, 1) 34%, rgba(37, 178, 74, 1) 51%, rgba(35, 139, 199, 1) 68%, rgba(103, 97, 171, 1) 85%, rgba(144, 41, 142, 1) 100%);
}

.custom-gradient-color-button-1 {
	color: white;
	background: linear-gradient(180deg, #5693F6 0%, #4A83F6 49.08%, #3F64EB 100%);
	background-size: 100% 200%;
	font-weight: bold;
	transition: 0.5s;
}

.custom-gradient-color-button-1:hover {
	background-position: 0% 100%;
	color: white;
}

.custom-gradient-color-button-2 {
	background: linear-gradient(90deg, rgba(58, 243, 193, 1) 0%, rgba(137, 194, 254, 1) 18%, rgba(155, 161, 255, 1) 33%, rgba(158, 144, 255, 1) 48%, rgba(196, 122, 248, 1) 63%, rgba(252, 138, 192, 1) 78%, rgba(255, 188, 89, 1) 100%);
	color: white;
	background-size: 150% auto;
	font-weight: bold;
	transition: 0.5s;
}

.custom-gradient-color-button-2:hover {
	background-position: 100% 0%;
}

.border-radius-with-inset-shadow {
	border-radius: 30px;
	box-shadow: 0px 0px 12px 0px rgba(0, 87, 255, 0.33) inset;
}

.btn-custom-1 {
	border: 1px solid #CDCDCD;
	color: black;
	border-radius: 50px;
	background: #F2F2F2;
	text-align: center;
	padding: 10px 0px;
}

.btn-custom-2 {
	border: 1px solid #CDCDCD;
	color: white;
	border-radius: 50px;
	background: linear-gradient(180deg, #5693F6 0%, #4A83F6 49.08%, #3F64EB 100%);
	text-align: center;
	padding: 10px 0px;
}

/*END OF CUSTOM CLASS*/
.contact-us-header {
	padding: 5px;
}

.contact-us-header i {
	color: white;
}

.page-title-banner {
	background-image: url("../../images/title-banner.png");
	background-position: center;
	text-align: center;
	color: white;
	font-weight: bold;
	padding: 150px 0px;
}

.page-title {
	border-radius: 10px;
	background: linear-gradient(0deg,#243bb8 0%,   #3F64EB 100% );
	font-weight: bold;
	color: white;
}

/*HOME CSS*/
.home-main-content {
	background-color: #080c2c;
}

.home-main-content img {
	width: 100%;
}

.home-main-content-shape {
	background-color: white;
	border-radius: 5vw;
}

.home-sub-content {
	background-image: url("../../images/icon-background.png");
}

.home-sub-content-icon {
	text-align: center;
}

.home-sub-content-icon img {
	transition: 0.5s;
}

.home-sub-content-icon img:hover {
	filter: drop-shadow(0px 0px 30px #04F1FF);
	cursor: pointer;
}

.home-sub-content-icon-text {
	color: #FFF;
	padding: 10px 0px;
}

.home-slider-content {
	background-color: #3B51B0;
}

.home-slider-content img {
	width: 100%;
}

.home-fade-slider-content {
	background: radial-gradient(circle, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 51, 1) 75%, rgba(0, 0, 102, 1) 90%, rgba(0, 0, 153, 1) 100%);
}

.home-fade-slider-content video {
	margin: 10px auto;
	border-radius: 20px;
	border: 5px solid black;
	box-shadow: 0px -3px 6px grey;
}

.home-contact-us-content {
	background-image: url("../../images/home-contact-us-background.png");
}

/*HOME CSS END*/

/*ABOUT CSS*/
.about-us-main-content-list li {
	margin: 10px auto;
}

.about-us-icon .home-sub-content-title {
	line-height: 1;
	margin: 20px auto;
}

.about-us-icon {
	border-right: 3px solid lightgrey;
}

.about-us-icon:last-child {
	border-right: none;
}

.about-us-icon img {
	transition: 0.5s;
}

.about-us-icon img:hover {
	filter: drop-shadow(0px 0px 20px #04F1FF);
	cursor: pointer;
}

/*ABOUT US CSS END*/



.top-bar-text {
	color: white;
	font-weight: 600;
	padding: 15px;
	cursor: pointer;
	transition: 0.3s;
}

.top-bar-text:hover {
	color: black;
	background-color: #ffe5cc;
}

#productForm .form-control:focus {
	border-color: var(--bs-border-color);
	box-shadow: none;
}

#cart_icon,
#wishlist_icon {
	position: relative;
	color: #e1194d;
	cursor: pointer;
}

#cart_icon:hover,
#wishlist_icon:hover {
	color: black;
}

.totalItem {
	position: absolute;
	right: -10px;
	top: -10px;
	background-color: orange;
	color: white;
	padding: 0px 5px;
	border-radius: 50%;
	font-size: 12px;
}

/*EDIT CANVAS CSS*/
.primary-menu-trigger {
	padding: 5px;
	border-radius: 5px;
}

.is-expanded-menu .sub-menu-container,
.is-expanded-menu .mega-menu-content {
	background-color: #011351;
}

.cnvs-hamburger .cnvs-hamburger-inner,
.cnvs-hamburger .cnvs-hamburger-inner::before,
.cnvs-hamburger .cnvs-hamburger-inner::after {
	background-color: white;
}

.product-category.nav-pills .nav-link {
	padding: 20px 0px;
	font-weight: 700;
	border-radius: 50px;
	border: 1px solid #CDCDCD;
	background: #F2F2F2;
	color: black;
}

.product-category.nav-pills .nav-link.active,
.product-category.nav-pills .show>.nav-link {
	color: white;
	border-radius: 50px;
	background: linear-gradient(180deg, #5693F6 0%, #4A83F6 49.08%, #3F64EB 100%);
}

.product-category li {
	margin: 0px 5px;
}

.mobile-product-category .swiper-slide {
	cursor: pointer;
	padding: 10px 30px;
	width: auto;
	text-align: center;
	font-weight: 700;
	border-radius: 50px;
	border: 1px solid #CDCDCD;
	background: #F2F2F2;
	color: black;
}

.mobile-product-category .swiper-slide.active {
	color: white;
	border-radius: 50px;
	background: linear-gradient(180deg, #5693F6 0%, #4A83F6 49.08%, #3F64EB 100%);
}

/*7 COLOR IN HEADER WRAP*/
.color-1 {
	background-color: #e1194d;
}

.color-2 {
	background-color: #ec6728;
}

.color-3 {
	background-color: #fcb117;
}

.color-4 {
	background-color: #25b24a;
}

.color-5 {
	background-color: #238bc7;
}

.color-6 {
	background-color: #6761ab;
}

.color-7 {
	background-color: #90298e;
}

.home-title {
	text-align: center;
	font-weight: bold;
	margin: 20px auto;
	font-size: 26px;
}

.footer-title {
	font-weight: bold;
	margin: 5px auto;
}

.footer-details a,
.product-title a {
	cursor: pointer;
	color: black;
}

.footer-details:hover,
.footer-details a:hover,
.product-title a:hover {
	color: #e1194d;
}

.copyrights {
	padding: 20px 0px;
	background-color: #14204F;
	color: white;
	font-weight: bold;
}

.product-box-shadow {
	height: 100%;
}

.product-box-shadow:hover {
	box-shadow: 0px 10px 20px grey;
}

.product-image {
	/*	height: 75%;*/
}

.product .product-image>a,
.product .product-image .slide a,
.product .product-image img {
	height: 100%;
	object-fit: cover;
}

.product-title {
	font-weight: 1000;
}

.product-price {
	font-size: unset;
	font-weight: 600;
}

.category-title {
	font-weight: bold;
	font-size: 20px;
	border-bottom: 1px solid grey;
	text-align: center;
}

/*MEMBER ACCOUNT CSS*/
.member-account-title {
	font-weight: bold;
	padding-bottom: 1rem;
	font-size: 20px;
	border-bottom: 1px solid grey;
}

.member-account-details {
	padding-top: 1rem;
}

.wishlist-table td img {
	height: 200px;
	width: 130px;
	object-fit: cover;
}

.mobile-wishlist-title {
	font-weight: bold;
	font-size: 12px;
}

.mobile-wishlist-details {
	font-size: 10px;
}

/*RESPONSIVE TABLE DISPLAY*/
.display-table-desktop {
	display: table-cell;
}

.display-table-mobile {
	display: none;
}

/*PRODUCT DETAILS*/
.radio-box input[type="radio"] {
	display: none;
}

.radio-box label {
	border: 2px solid grey;
	padding: 10px;
	cursor: pointer;
	border-radius: 3px;
	text-align: center;
}

.radio-box input[type="radio"]:checked+label {
	background-color: #e1194d;
	color: #fff;
	border: 2px solid white;
}

.product-details-title {
	font-weight: 700;
	font-size: 18px;
	margin: 5px 0px;
}

.attribute-name {
	font-size: smaller;
}

.attribute-description {
	color: grey;
}

.quantity-in-cart {
	font-weight: 700;
	font-size: 12px;
	position: absolute;
	bottom: 0px;
	right: 10px;
}

.text-truncate-2-line {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 2;
}

/*CART VIEW CSS*/
.process-steps li .i-bordered.disabled {
	--cnvs-i-bg-color: lightgrey !important;
	border: none;
}

.canvas-tabs {
	border-bottom: 1px solid grey;
}

/* new update */
@keyframes floatUpDown {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(60px);
	}

}

.floating-icon {
	cursor: pointer;
}

.floating-icon img {
	animation: floatUpDown 5s ease-in-out infinite;
}



.py-lg-7 {
    padding-top: 5rem !important;
    padding-bottom: 9rem !important;
}

.kiosk-card {
    padding: 0;
    margin: 0;
    width: 100%;
}

.kiosk-img {
    width: 100%;
    height: auto;
    display: block;
}


@media (max-width: 991px) {

	#logo img {
		height: 80px;
	}

	.announcement-speaker {
		width: 90px;
	}

	/* Scoped to the wrapper so the .home-bg image shows through on mobile too.
	   NOT bare .home-page-main — the member/auth pages have no wrapper and would
	   lose their background entirely. */
	.home-bg .home-page-main {
		background: transparent;
	}

	/* centre the trophy + LIVE TRANSACTION title */
	.ranking-title-box {
		display: block;
	}

	.ranking-title-trophy img {
		height: 150px;
	}

	.ranking-title {
		font-size: 36px;
	}

	.lucky-draw-button {
		font-size: 24px;
	}

	.golden-word img {
		height: 30px;
	}

	.promotion-more-info-button {
		font-size: 32px;
	}

	/*	SLOT*/
	.slot-amount {
		font-size: 20px;
	}

	/*	RESULT*/
	.stage-3 {
		padding: 0px 0px 10px 0px;
	}

	.stage-2 {
		padding: 0px 0px 40px 0px;
	}

	.stage-1 {
		padding: 0px 0px 60px 0px;
	}

	.stage-container .stage-main-part img {
		transform: scale(0.5);
	}

	.stage-container .stage-main-part {
		box-shadow: inset 0px 10px 2px 0px rgba(255, 255, 255, .5);
	}

	.stage-container .stage-border-part {
		box-shadow: inset 0px 10px 2px 0px rgba(255, 255, 255, .5);
	}

	.result-name {
		font-size: 20px;
	}

	.result-reward {
		box-shadow: 0 -1px 1px white, 0 1px 1px darkred;
		font-size: 18px;
	}

	/*    RESULT END*/
	/* MOBILE footer: character centered & large, its top poking out; banners overlap its bottom.
	   Background comes from the .home-bg wrapper; height:auto undoes the desktop clamp so the
	   character can lay out in normal flow. The 28px top is the gap under the LIVE TRANSACTION table. */
	.home-footer {
		background: transparent;
		height: auto;
		padding: 28px 0 40px;
	}

	.home-footer .footer-bg {
		display: none;
	}

	.home-footer .footer-image {
		position: static;
		width: 100%;
		height: auto;
		text-align: center;
		margin-top: -10px;   /* barely overlaps the section top; with the 28px padding this leaves clear space under the table */
	}

	.home-footer .footer-image img {
		display: block;
		width: 104%;         /* slightly wider than full-bleed; the extra bleeds off-screen */
		max-width: none;
		height: auto;
		margin: 0 0 0 5%;    /* shift right: the character sits left in the PNG, so this visually centres her */
	}

	/* banners flow below the character, then pulled up to overlap its bottom */
	.home-footer .footer-banners {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		transform: none;
		margin: -55px auto 0;   /* eased so the character sits above/away from the banners */
		width: 94%;
		max-width: 384px;
		justify-content: center;
		gap: 10px;
		z-index: 3;
	}

	.home-footer .footer-banners a {
		flex: 1 1 0;
		width: auto;
		max-width: 120px;
	}

	#header-wrap #logo img {
		height: 60px;
	}

	.about-us-icon {
		border: 3px solid lightgrey;
		padding-top: 20px;
	}

	.about-us-icon:last-child {
		border: 3px solid lightgrey;
	}

	.about-us-icon:nth-child(1),
	.about-us-icon:nth-child(3) {
		border-right: none;
	}

	.about-us-icon:nth-child(1),
	.about-us-icon:nth-child(2) {
		border-bottom: none;
	}

	.product-desc {
		font-size: smaller;
	}

	.page-title-banner {
		padding: 80px 0px;
	}

	/*RESPONSIVE TABLE DISPLAY*/
	.display-table-desktop {
		display: none;
	}

	.display-table-mobile {
		display: table-cell;
	}

	.product-name,
	.product-price {
		font-size: smaller;
	}

	.vip-logo {
		height: 80px;
	}
}

@media (max-width: 768px) {

	.promotion-more-info-button {
		font-size: 28px;
	}

	.vip-logo {
		height: 60px;
	}

	.vip-table {
		background-position: 30%;
	}
	/* ===== MOBILE SIDE MENU (#mobileMenu) — restyled: dark panel, gold hairlines,
	   pill rows with a chevron, red-gradient hover, indented submenu rail.
	   Brand-red / rgba(193, 94, 109) recolor via §2g; gold rgba(255,206,65) stays gold. ===== */
	.offcanvas-start {
		width: 86% !important;
		max-width: 360px !important;
	}

	div#mobileMenu {
		background: linear-gradient(180deg, #1c1311 0%, #0b0807 100%);
		border-right: 1px solid rgba(255, 206, 65, 0.18);
		box-shadow: 8px 0 28px rgba(0, 0, 0, 0.55);
		color: #fff;
	}

	#mobileMenu .offcanvas-header {
		align-items: center;
		padding: 16px 18px 14px;
		border-bottom: 1px solid;
		border-image: linear-gradient(90deg, rgba(255, 206, 65, 0), rgba(255, 206, 65, 0.55) 50%, rgba(255, 206, 65, 0)) 1;
	}

	#mobileMenu #logo img {
		height: 52px;
		width: auto;
	}

	.custom-close {
		background: rgba(255, 255, 255, 0.06);
		border: 1px solid rgba(255, 255, 255, 0.22);
		border-radius: 50%;
		width: 38px;
		height: 38px;
		padding: 0;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background 0.15s ease, border-color 0.15s ease;
	}

	.custom-close:hover {
		background: linear-gradient(180deg, #C15E6D 0%, #60232D 100%);
		border-color: rgba(255, 206, 65, 0.5);
	}

	.offcanvas-body {
		line-height: normal;
		padding: 12px 14px 26px;
	}

	.mobile-menu-container {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.offcanvas-body .list-group-item {
		list-style: none;
		border: 0;
		background: transparent;
		margin: 5px 0;
		padding: 0;
	}

	.offcanvas-body .list-group-item > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 13px 16px;
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.035);
		border: 1px solid rgba(255, 255, 255, 0.06);
		color: #f2f2f2;
		font-weight: 600;
		font-size: 1rem;
		letter-spacing: 0.3px;
		text-decoration: none;
		transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
	}

	.offcanvas-body .list-group-item > a::after {
		content: "\203A";
		font-size: 1.25rem;
		line-height: 1;
		color: rgba(255, 206, 65, 0.65);
		transition: transform 0.15s ease, color 0.15s ease;
	}

	.offcanvas-body .list-group-item > a:hover,
	.offcanvas-body .list-group-item > a:focus {
		background: linear-gradient(180deg, #C15E6D 0%, #60232D 100%);
		border-color: rgba(255, 206, 65, 0.4);
		color: #fff;
	}

	.offcanvas-body .list-group-item > a:hover::after,
	.offcanvas-body .list-group-item > a:focus::after {
		color: #fff;
		transform: translateX(3px);
	}

	.offcanvas-body .list-group-item > a:active {
		transform: translateY(1px);
	}

	a.list-group-item-100 {
		color: #f2f2f2;
	}

	/* submenu: indented gold rail, lighter rows, no chevron */
	.sub-menu {
		list-style: none;
		margin: 4px 0 8px 8px;
		padding: 2px 0 2px 12px;
		border-left: 2px solid rgba(255, 206, 65, 0.22);
	}

	.sub-menu .list-group-item {
		margin: 2px 0;
	}

	.sub-menu .list-group-item > a {
		padding: 9px 14px;
		font-size: 0.9rem;
		font-weight: 500;
		color: #c9c9c9;
		background: transparent;
		border: 0;
		border-radius: 8px;
	}

	.sub-menu .list-group-item > a::after {
		content: "";
	}

	.sub-menu .list-group-item > a:hover,
	.sub-menu .list-group-item > a:focus {
		background: rgba(193, 94, 109, 0.16);
		color: #fff;
	}

	.home-ranking-table thead th {
		padding: 11px 8px;
	}

	.home-ranking-table tbody td {
		padding: 9px 8px;
		font-size: 12px;
	}
}

@media (max-width: 576px) {

	#logo img {
		height: 60px;
	}

	.ranking-title-trophy img {
		height: 120px;
	}

	.ranking-title {
		font-size: 24px;
	}

	.promotion-more-info-button {
		font-size: 20px;
		line-height: 1.2;
	}
}

@media (max-width: 478px) {

	.slot-amount {
		font-size: 14px;
	}
}

@keyframes speaker-shake {

	0%,
	100% {
		transform: rotate(0deg);
	}

	25%,
	75% {
		transform: rotate(10deg);
	}

	50% {
		transform: rotate(-10deg);
	}
}

/* =========================================================================
   STICKY SITE HEADER (top bar + desktop nav) — always visible
   The top bar and desktop nav (#header) are wrapped in .site-header-sticky in
   header.php. position:sticky pins the whole block to the top on both mobile
   and desktop while keeping it in normal flow, so no spacer is needed and the
   page content never jumps. The mobile bottom menu (.mobile-footer) is already
   position:fixed at the bottom, so both bars stay visible at all times.
   ========================================================================= */
.site-header-sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	/* above the home swiper/banners (z-index 3), side icons (100) and the
	   mobile footer (1030); below the open side-menu offcanvas (1045). */
	z-index: 1040;
}

/* The Canvas theme pins #header-wrap with position:fixed and offsets it with a
   .header-wrap-clone spacer. Inside the sticky wrapper we want the gold nav to
   flow in place, so force it static and drop the now-redundant spacer. */
.site-header-sticky #header-wrap {
	position: relative !important;
}

.site-header-sticky .header-wrap-clone {
	display: none !important;
}

/* =========================================================================
   MOBILE SIDE-MENU AUTH BUTTONS — a two-up row sitting between the offcanvas
   logo and the menu list (see #mobileMenu in header.php). Left = primary
   action (Login / Deposit), right = secondary (Register / Logout).
   ========================================================================= */
.mobile-menu-auth {
	display: flex;
	gap: 10px;
	padding: 12px 16px 16px;
}

.mobile-menu-auth .auth-btn {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
	transition: transform 0.1s ease, filter 0.15s ease;
}

.mobile-menu-auth .auth-btn:hover {
	filter: brightness(1.06);
}

.mobile-menu-auth .auth-btn:active {
	transform: translateY(1px);
}

/* left: red gradient, white label (recolors with §2g) */
.mobile-menu-auth .auth-btn-left {
	background: linear-gradient(180deg, #C15E6D 0%, #60232D 100%);
	color: #fff;
}

/* right: gold gradient, dark label (stays GOLD under §2g — retuned from mcmclub's
   amber to this brand's peach-gold, the tone the Figma uses for every accent) */
.mobile-menu-auth .auth-btn-right {
	background: linear-gradient(180deg, #FEE5C4 0%, #F9B497 100%);
	color: #60232D;
}

/* Login/Register: fill the viewport with the home-bg image on mobile too
   (overrides the .home-page-main mobile '100% auto' rule that otherwise
   left a bare #000a2e area on these short, form-only pages). */
.home-page-main.auth-page {
	background-size: cover;
	background-position: center;
}

/* Homepage SEO copy - sits between the home footer banner and the site footer.
   Continues the footer's dark gradient so it doesn't read as a white gap.
   Sizes are px, NOT rem: wonderwin / houseofwinners set html{font-size:62.5%},
   which would shrink this whole band to ~62%.
   Per-brand: override --seo-accent only. */
.home-seo-content {
	--seo-bg-top: #241f1f;
	--seo-bg-bottom: #1b1717;
	--seo-accent: #C15E6D;
	/* 0.62 was too dim to read comfortably at 13px against #1b1717. */
	--seo-text: rgba(255, 255, 255, 0.82);

	background: linear-gradient(180deg, var(--seo-bg-top) 0%, var(--seo-bg-bottom) 100%);
	border-top: 2px solid var(--seo-accent);
	color: var(--seo-text);
	font-size: 13px;
	line-height: 1.75;
	padding: 36px 0 40px;
}

.home-seo-content .container {
	max-width: 1100px;
	padding-left: 16px;
	padding-right: 16px;
	/* CKEditor content is user-authored - never let a long word or a pasted URL
	   push the page wider than the viewport. */
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* CKEditor emits h2/h3/p/ul/a/table - style them explicitly or they inherit
   page defaults that were never designed to sit on a dark band. */
.home-seo-content h1,
.home-seo-content h2,
.home-seo-content h3,
.home-seo-content h4 {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	margin: 24px 0 10px;
}

.home-seo-content > .container > :first-child {
	margin-top: 0;
}

/* Colour the descendants EXPLICITLY rather than relying on inheritance from
   .home-seo-content. Any theme rule that matches these elements directly beats
   an inherited value, which is how houseofwinners ended up with dim body copy.
   Inline colours set in CKEditor still win over all of this, as they should. */
.home-seo-content p,
.home-seo-content li,
.home-seo-content td,
.home-seo-content th,
.home-seo-content strong,
.home-seo-content em,
.home-seo-content u,
.home-seo-content s,
.home-seo-content span {
	color: var(--seo-text);
}

.home-seo-content p {
	margin: 0 0 14px;
}

.home-seo-content ul,
.home-seo-content ol {
	margin: 0 0 14px 18px;
	padding: 0;
}

.home-seo-content img {
	max-width: 100%;
	height: auto;
}

.home-seo-content a {
	color: var(--seo-accent);
	filter: brightness(1.4);
	text-decoration: none;
}

.home-seo-content a:hover {
	text-decoration: underline;
}

/* A wide table must scroll inside its own box - otherwise it stretches the
   whole page sideways on a phone. */
.home-seo-content table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 0 0 16px;
}

.home-seo-content th,
.home-seo-content td {
	border: 1px solid rgba(255, 255, 255, 0.12);
	padding: 7px 10px;
}

/* Mobile: just tighten the type. Do NOT clamp the height here - an
   overflow:hidden container makes the rest of the copy unreachable, since
   there is no expander and the page cannot scroll inside it. */
@media (max-width: 767.98px) {
	.home-seo-content {
		padding: 24px 0 28px;
		font-size: 12px;
	}

	.home-seo-content h1,
	.home-seo-content h2,
	.home-seo-content h3,
	.home-seo-content h4 {
		font-size: 15px;
	}
}