/* =========================================================
   HippoPay Demo Admin
   Standalone frontend styling
   ========================================================= */

.hippo-demo-login,
.hippo-demo-admin-shell,
.hippo-demo-public,
.hippo-demo-message {
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
}

/* ---------------------------------------------------------
   Logo
   --------------------------------------------------------- */

.hippo-demo-logo {
	font-size: 23px;
	font-weight: 900;
	letter-spacing: 1px;
	color: #111;
}

.hippo-demo-logo span {
	opacity: 0.5;
}

.hippo-demo-kicker {
	margin-top: 5px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	color: #888;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */

.hippo-demo-button {
	display: inline-block;
	padding: 13px 22px;
	border: 0;
	border-radius: 11px;
	background: #111;
	color: #fff !important;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none !important;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.hippo-demo-button:hover {
	opacity: 0.88;
	transform: translateY(-1px);
}

/* ---------------------------------------------------------
   Login
   --------------------------------------------------------- */

.hippo-demo-login {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 70vh;
	padding: 30px;
}

.hippo-demo-login-card {
	width: 100%;
	max-width: 440px;
	padding: 35px;
	border-radius: 24px;
	background: #111;
	color: #fff;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
	box-sizing: border-box;
}

.hippo-demo-login-card .hippo-demo-logo {
	color: #fff;
}

.hippo-demo-login-card h1 {
	margin: 25px 0 8px;
	font-size: 34px;
	line-height: 1.1;
}

.hippo-demo-login-card p {
	margin: 0 0 25px;
	color: #999;
	line-height: 1.6;
}

.hippo-demo-login-card label {
	display: block;
	margin: 18px 0;
	font-size: 13px;
	font-weight: 700;
}

.hippo-demo-login-card input[type="text"],
.hippo-demo-login-card input[type="password"] {
	display: block;
	width: 100%;
	margin-top: 7px;
	padding: 13px;
	border: 1px solid #ddd;
	border-radius: 10px;
	background: #fff;
	color: #111;
	box-sizing: border-box;
	font-size: 15px;
}

.hippo-demo-check {
	font-weight: 400 !important;
}

.hippo-demo-check input {
	display: inline-block !important;
	width: auto !important;
	margin-right: 7px;
}

.hippo-demo-login-card .hippo-demo-button {
	width: 100%;
	margin-top: 8px;
}

/* ---------------------------------------------------------
   Messages
   --------------------------------------------------------- */

.hippo-demo-message {
	margin: 30px auto;
	padding: 30px;
	border: 1px solid #ddd;
	border-radius: 15px;
	max-width: 600px;
}

.hippo-demo-error {
	margin: 18px 0;
	padding: 13px 15px;
	border-radius: 10px;
	background: #3a1717;
	color: #ffb0b0;
}

.hippo-demo-success {
	margin-bottom: 20px;
	padding: 13px 15px;
	border-radius: 10px;
	background: #e9f7ec;
	color: #17662a;
}

/* ---------------------------------------------------------
   Admin Dashboard
   --------------------------------------------------------- */

.hippo-demo-admin-shell {
	max-width: 1200px;
	margin: 30px auto;
	padding: 30px;
	border-radius: 22px;
	background: #f7f7f7;
	color: #111;
}

.hippo-demo-admin-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.hippo-demo-top-links {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.hippo-demo-top-links a {
	color: #111;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.hippo-demo-top-links a:hover {
	text-decoration: underline;
}

.hippo-demo-admin-title {
	margin: 38px 0 25px;
}

.hippo-demo-admin-title h1 {
	margin: 0 0 10px;
	font-size: 38px;
	line-height: 1.1;
}

.hippo-demo-admin-title p {
	margin: 5px 0;
	color: #777;
	line-height: 1.6;
}

/* ---------------------------------------------------------
   Editor Cards
   --------------------------------------------------------- */

.hippo-demo-editor-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.hippo-demo-editor-card {
	padding: 21px;
	border: 1px solid #e3e3e3;
	border-radius: 16px;
	background: #fff;
}

.hippo-demo-editor-label {
	margin-bottom: 18px;
	font-size: 17px;
	font-weight: 900;
}

.hippo-demo-editor-card label {
	display: block;
	margin: 15px 0;
	font-size: 13px;
	font-weight: 700;
}

.hippo-demo-editor-card input {
	display: block;
	width: 100%;
	margin-top: 7px;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 9px;
	background: #fff;
	color: #111;
	box-sizing: border-box;
	font-size: 14px;
}

.hippo-demo-save {
	margin-top: 20px;
}

/* ---------------------------------------------------------
   URL Information
   --------------------------------------------------------- */

.hippo-demo-url-box {
	display: grid;
	gap: 9px;
	margin-top: 30px;
	padding: 20px;
	border-radius: 14px;
	background: #fff;
}

.hippo-demo-url-box strong {
	font-size: 13px;
}

.hippo-demo-url-box code {
	display: block;
	padding: 8px;
	border-radius: 7px;
	background: #f3f3f3;
	word-break: break-all;
}

/* ---------------------------------------------------------
   Public Advertising Dashboard
   --------------------------------------------------------- */

.hippo-demo-public {
	max-width: 1200px;
	margin: 30px auto;
	padding: 35px;
	border-radius: 24px;
	background: #111;
	color: #fff;
	box-sizing: border-box;
}

.hippo-demo-public .hippo-demo-logo {
	color: #fff;
}

.hippo-demo-public-head {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	margin-bottom: 32px;
}

.hippo-demo-public h1 {
	margin: 5px 0 8px;
	font-size: 40px;
	line-height: 1.1;
}

.hippo-demo-public p {
	margin: 0;
	color: #888;
}

.hippo-demo-public-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.hippo-demo-public-card {
	min-height: 135px;
	padding: 23px;
	border: 1px solid #303030;
	border-radius: 18px;
	background: #1d1d1d;
	box-sizing: border-box;
}

.hippo-demo-public-label {
	margin-bottom: 15px;
	color: #aaa;
	font-size: 14px;
}

.hippo-demo-public-count {
	font-size: 31px;
	font-weight: 900;
	line-height: 1.1;
}

.hippo-demo-public-amount {
	margin-top: 9px;
	color: #ddd;
	font-size: 16px;
}

/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 850px) {

	.hippo-demo-editor-grid,
	.hippo-demo-public-grid {
		grid-template-columns: repeat(2, 1fr);
	}

}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 560px) {

	.hippo-demo-admin-shell,
	.hippo-demo-public {
		margin: 10px;
		padding: 20px;
	}

	.hippo-demo-admin-top,
	.hippo-demo-public-head {
		display: block;
	}

	.hippo-demo-top-links {
		margin-top: 20px;
	}

	.hippo-demo-editor-grid,
	.hippo-demo-public-grid {
		grid-template-columns: 1fr;
	}

	.hippo-demo-admin-title h1 {
		font-size: 29px;
	}

	.hippo-demo-public h1 {
		font-size: 29px;
	}

	.hippo-demo-login {
		padding: 15px;
	}

	.hippo-demo-login-card {
		padding: 25px;
	}

}