/* =====================================================================
   ErawanRO theme for the top-up pages
   ---------------------------------------------------------------------
   Styling only. The markup is stock Bootstrap 4 and every id and class the
   page scripts rely on (#exchange, #pay, #history, #loginForm, txtUsername …)
   is left untouched, so this can be removed at any time and the pages keep
   working exactly as before.

   Same palette as erawanro.com and the mobile HUD: deep navy ground, one gold
   accent that is spent only on what the player is meant to act on.
   ===================================================================== */

:root {
	--ero-navy: #0b0f1a;
	--ero-navy-2: #131c31;
	--ero-panel: rgba(18, 25, 44, 0.92);
	--ero-gold: #c9a227;
	--ero-gold-lit: #f2d675;
	--ero-ink: #e8e6df;
	--ero-edge: rgba(232, 230, 223, 0.14);
	--ero-edge-gold: rgba(201, 162, 39, 0.42);
}

/* ---- ground -------------------------------------------------------- */
body {
	font-family: 'Kanit', 'Segoe UI', Tahoma, sans-serif !important;
	min-height: 100vh;
	height: auto !important;
	color: var(--ero-ink);
	background:
		radial-gradient(120% 90% at 78% 12%, rgba(58, 84, 150, 0.5), transparent 58%),
		radial-gradient(90% 80% at 6% 92%, rgba(201, 162, 39, 0.16), transparent 60%),
		var(--ero-navy) !important;
	background-attachment: fixed !important;
}

/* a faint grid keeps the flat navy from reading as dead space */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 80%);
	mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 80%);
}

/* ---- panels -------------------------------------------------------- */
.card {
	background: var(--ero-panel) !important;
	border: 1px solid var(--ero-edge-gold) !important;
	border-radius: 16px !important;
	box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(14px) saturate(1.25);
	backdrop-filter: blur(14px) saturate(1.25);
	overflow: hidden;
}

.card-header {
	background: linear-gradient(180deg, rgba(46, 62, 104, 0.55), rgba(18, 25, 44, 0)) !important;
	border-bottom: 1px solid var(--ero-edge) !important;
	padding: 20px 18px 16px !important;
	position: relative;
}

/* gold hairline across the top edge, same mark the HUD panel uses */
.card-header::before {
	content: "";
	position: absolute;
	left: 14%;
	right: 14%;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ero-gold-lit), transparent);
}

.card-header h5,
.card-header h5 b {
	color: var(--ero-gold-lit) !important;
	font-weight: 700 !important;
	letter-spacing: 0.3px;
	margin-bottom: 2px;
}

.card-header h6 {
	color: rgba(232, 230, 223, 0.72) !important;
	font-size: 0.9rem;
}

.card-body { padding: 20px 18px !important; }
.card-footer {
	background: rgba(0, 0, 0, 0.22) !important;
	border-top: 1px solid var(--ero-edge) !important;
}

/* ---- inputs -------------------------------------------------------- */
.form-control {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid var(--ero-edge) !important;
	color: var(--ero-ink) !important;
	/* 16px stops iOS Safari zooming the page when a field is focused */
	font-size: 16px !important;
	height: auto !important;
	padding: 11px 14px !important;
	border-radius: 0 10px 10px 0 !important;
}

.form-control:focus {
	background: rgba(255, 255, 255, 0.09) !important;
	border-color: var(--ero-gold) !important;
	box-shadow: 0 0 0 3px rgba(242, 214, 117, 0.16) !important;
	color: #fff !important;
}

.form-control::placeholder { color: rgba(232, 230, 223, 0.45) !important; }

.input-group-text {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid var(--ero-edge) !important;
	border-right: 0 !important;
	color: var(--ero-gold-lit) !important;
	border-radius: 10px 0 0 10px !important;
	min-width: 46px;
	justify-content: center;
}

/* ---- buttons ------------------------------------------------------- */
.btn {
	border-radius: 11px !important;
	font-weight: 600 !important;
	padding: 11px 18px !important;
	transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.btn:active { transform: translateY(1px) scale(0.995); }

.btn-success,
.btn-primary {
	background: linear-gradient(180deg, var(--ero-gold-lit), var(--ero-gold)) !important;
	border: 1px solid rgba(242, 214, 117, 0.9) !important;
	color: #201a04 !important;
	font-weight: 800 !important;
	box-shadow: 0 12px 28px -14px rgba(242, 214, 117, 0.9);
}

.btn-success:hover,
.btn-primary:hover { filter: brightness(1.06); }

.btn-outline-danger {
	color: #ffb4a2 !important;
	border-color: rgba(255, 150, 120, 0.55) !important;
	background: rgba(255, 120, 90, 0.08) !important;
}

.btn-outline-danger:hover {
	background: rgba(255, 120, 90, 0.2) !important;
	color: #fff !important;
}

.btn-secondary,
.btn-info,
.btn-warning {
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid var(--ero-edge) !important;
	color: var(--ero-ink) !important;
}

/* ---- navbar -------------------------------------------------------- */
.navbar {
	background: rgba(8, 12, 22, 0.85) !important;
	border: 1px solid var(--ero-edge) !important;
	border-radius: 12px !important;
	margin-bottom: 16px;
}

.navbar-dark .navbar-nav .nav-link {
	color: rgba(232, 230, 223, 0.82) !important;
	font-weight: 600;
	border-radius: 9px;
	padding: 8px 14px !important;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
	color: var(--ero-gold-lit) !important;
	background: rgba(242, 214, 117, 0.1);
}

.dropdown-menu {
	background: var(--ero-panel) !important;
	border: 1px solid var(--ero-edge-gold) !important;
	border-radius: 12px !important;
	box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9);
}

.dropdown-item { color: var(--ero-ink) !important; border-radius: 8px; }
.dropdown-item:hover,
.dropdown-item:focus {
	background: rgba(242, 214, 117, 0.14) !important;
	color: var(--ero-gold-lit) !important;
}

/* ---- tables -------------------------------------------------------- */
.table { color: var(--ero-ink) !important; }

.table thead th {
	background: rgba(255, 255, 255, 0.05) !important;
	border-bottom: 1px solid var(--ero-edge-gold) !important;
	border-top: 0 !important;
	color: var(--ero-gold-lit) !important;
	font-weight: 700;
	letter-spacing: 0.2px;
}

.table td,
.table th { border-color: rgba(232, 230, 223, 0.1) !important; vertical-align: middle; }

.table-hover tbody tr:hover {
	background: rgba(242, 214, 117, 0.07) !important;
	color: #fff !important;
}

/* ---- status colours ------------------------------------------------ */
.online { color: #6ee0a8 !important; font-weight: 700; }
.offline { color: #ff8a75 !important; font-weight: 700; }

.bg-danger { background: rgba(255, 90, 70, 0.16) !important; border: 1px solid rgba(255, 120, 90, 0.45); border-radius: 10px; }
.bg-success { background: rgba(110, 224, 168, 0.14) !important; border: 1px solid rgba(110, 224, 168, 0.4); border-radius: 10px; }
.bg-warning { background: rgba(242, 214, 117, 0.14) !important; border: 1px solid var(--ero-edge-gold); border-radius: 10px; color: var(--ero-ink) !important; }

/* ---- brand mark ----------------------------------------------------
   Injected before the card header rather than added to the markup, so no PHP
   file needs an extra element. The square site logo, ringed in gold to sit on
   the panel rather than float on it. */
.card-header h5::before {
	content: "";
	display: block;
	width: 96px;
	height: 96px;
	margin: 0 auto 12px;
	border-radius: 24px;
	background: url('https://erawanro.com/images/icon/erawanro_512.png') center/cover no-repeat;
	box-shadow:
		0 0 0 2px rgba(242, 214, 117, 0.75),
		0 0 0 7px rgba(242, 214, 117, 0.1),
		0 16px 34px -14px rgba(0, 0, 0, 0.9);
}

/* member.php stacks several cards; only the first one wears the logo */
.card ~ .card .card-header h5::before { display: none; }

/* ---- small screens -------------------------------------------------- */
@media (max-width: 576px) {
	.card-body { padding: 16px 13px !important; }
	.col-md-10, .col-md-6 { padding-left: 10px; padding-right: 10px; }
	.table { font-size: 13px; }
}