/* Demonax theme for tibia-web (loaded inside the /account-frame/ iframe).
   Palette mirrors demonax-web/asset/style/styles.css:
     - body bg #051122 (dark blue), text #d7d7d7
     - accent gold #cfa600, teal #4b7874
     - boxes: cream #FFF2db with brown text #5A2800 for legibility on forms
*/

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, sans-serif;
	background-color: #051122;
	color: #d7d7d7;
	margin: 0;
	padding: 1rem;
}

p {
	font-size: 1rem;
	line-height: 1.6;
}

a {
	color: #cfa600;
	text-decoration: none;
}

a:hover {
	color: #b89000;
	text-decoration: underline;
}

h1 {
	color: #cfa600;
	font-size: 1.6rem;
	margin: 0.5rem 0 1rem 0;
}

h2 {
	color: #cfa600;
	font-size: 1.2rem;
	margin: 0.5rem 0;
}

/* Navigation bar of inner buttons */
.nav {
	width: 100%;
	max-width: 900px;
	margin: 0.5rem auto 1.5rem auto;
	text-align: center;
}

a.button {
	display: inline-block;
	margin: 0.25rem;
	padding: 0.5rem 1rem;
	background-color: #0D2E2B;
	border: 1px solid #4b7874;
	border-radius: 0.375rem;
	color: #d7d7d7;
	font-weight: 500;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

a.button:hover {
	background-color: rgba(207, 166, 0, 0.15);
	border-color: #cfa600;
	color: #cfa600;
	text-decoration: none;
}

/* Form/content boxes — keep tibia-web's existing .box class but restyle */
.box {
	width: 100%;
	max-width: 700px;
	margin: 1rem auto;
	padding: 1.5rem;
	background-color: #FFF2db;
	border: 1px solid #cfa600;
	border-radius: 0.5rem;
	color: #5A2800;
}

.box h1 {
	color: #5A2800;
	margin-top: 0;
}

.box label {
	display: block;
	margin: 0.75rem 0 0.25rem 0;
	font-size: 0.95rem;
	font-weight: 600;
	text-transform: uppercase;
	color: #793d03;
	letter-spacing: 0.025em;
}

.box input[type=text],
.box input[type=password],
.box input[type=email],
.box select {
	width: 100%;
	padding: 0.5rem;
	border: 1px solid #b89000;
	border-radius: 0.375rem;
	background-color: #ffffff;
	color: #5A2800;
	font-size: 1rem;
	box-sizing: border-box;
}

.box input[type=text]:focus,
.box input[type=password]:focus,
.box input[type=email]:focus,
.box select:focus {
	outline: none;
	border-color: #cfa600;
	box-shadow: 0 0 0 2px rgba(207, 166, 0, 0.25);
}

.box input[type=submit] {
	margin-top: 1rem;
	padding: 0.6rem 1.5rem;
	background-color: #0D2E2B;
	color: #d7d7d7;
	border: 1px solid #4b7874;
	border-radius: 0.375rem;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.box input[type=submit]:hover {
	background-color: #cfa600;
	color: #051122;
	border-color: #cfa600;
}

/* Tables */
table {
	width: 100%;
	max-width: 900px;
	margin: 0.5rem auto;
	border-collapse: collapse;
	text-align: left;
}

th {
	padding: 0.5rem;
	font-weight: 600;
	color: #cfa600;
	border-bottom: 1px solid #4b7874;
}

td {
	padding: 0.5rem;
	border-bottom: 1px solid rgba(75, 120, 116, 0.3);
	word-break: break-word;
}

table.info th {
	width: 30%;
}

/* Inside .box, the table inherits the cream context */
.box table {
	margin: 0.5rem 0;
}
.box th {
	color: #793d03;
	border-bottom-color: #b89000;
}
.box td {
	color: #5A2800;
	border-bottom-color: rgba(184, 144, 0, 0.3);
}