/* ==========================================================================
   Design system for the Banner Exchange site, layered on top of Pico CSS
   (classless build). Dark, card-based, accent color driven by whichever
   theme is selected in the admin panel (--pico-primary).
   ========================================================================== */

:root {
	--font-sans: "Poppins", ui-sans-serif, system-ui, sans-serif;

	--radius: 0.65rem;
	--radius-sm: 0.5rem;
	--radius-pill: 999px;

	--border: rgba(255, 255, 255, 0.1);
	--border-strong: rgba(255, 255, 255, 0.2);
	--surface: rgba(255, 255, 255, 0.04);
	--surface-hover: rgba(255, 255, 255, 0.08);

	--text-muted: rgba(255, 255, 255, 0.62);
	--text-dim: rgba(255, 255, 255, 0.45);

	--danger: #ef4444;
	--danger-text: #f87171;
	--success: #22c55e;
	--success-text: #4ade80;

	--space-1: 0.5rem;
	--space-2: 0.85rem;
	--space-3: 1.25rem;
	--space-4: 2rem;

	--content-max: 72rem;
	--form-max: 28rem;
}

/* --------------------------------------------------------------------
   Base
   -------------------------------------------------------------------- */

/* Pico sizes almost everything in rem — button padding, card padding,
   form spacing, its own component internals — all relative to the ROOT
   (html) font-size, not body's. Scaling body's font-size alone therefore
   left every rem-based measurement untouched, which is why buttons/cards/
   inputs stayed "full size" even once the text itself looked smaller.
   Scaling the root instead shrinks everything together, like a real
   browser zoom: Pico's desktop root is ~17px (106.25%), so 14px here is
   about 82% of that. */
html {
	font-size: 14px;
}

body > main,
body > footer {
	max-width: var(--content-max);
}

body {
	background-color: #0a0a0a;
	background-image: radial-gradient(
		ellipse 60rem 30rem at 50% -10rem,
		color-mix(in srgb, var(--pico-primary) 16%, transparent),
		transparent
	);
	background-repeat: no-repeat;
	font-family: var(--font-sans);
}

/* Pico's classless build uses a spacious, blog-style type scale by default;
   this brings headings down to dashboard/app proportions. Only the page's
   single hero h1 (homepage) is allowed to read as large. */
h1, h2, h3 {
	font-family: var(--font-sans);
	letter-spacing: -0.01em;
}
h1 { font-size: 1.85rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

/* --------------------------------------------------------------------
   Header: a plain sticky bar (not a floating pill) — simpler, and it
   can never overflow or need a scrollbar the way a fixed-width island
   framed by margins can on odd viewport sizes. Pico's classless build
   normally turns "body > header" itself into a centered, max-width
   container; that's overridden here so the *bar* spans the full
   viewport while only its *content* (the nav) is centered and capped.
   -------------------------------------------------------------------- */
body > header {
	position: sticky;
	top: 0;
	z-index: 40;
	max-width: none;
	width: 100%;
	margin-inline: 0;
	padding: 0.75rem 1.5rem;
	background: rgba(10, 10, 10, 0.75);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
}
body > header nav {
	max-width: var(--content-max);
	margin-inline: auto;
	flex-wrap: wrap;
	row-gap: 0.5rem;
	column-gap: 1.5rem;
	font-size: 0.875rem;
}
body > header nav li:first-child {
	font-size: 1rem;
}
body > header nav a {
	text-decoration: none;
	color: var(--text-muted);
	transition: color 0.15s ease;
}
body > header nav a:hover,
body > header nav li:first-child a {
	color: #fff;
}
body > header nav a[role="button"] {
	color: var(--pico-primary-inverse);
}

/* Compact inline login form in the nav */
form.nav-login {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
}
form.nav-login input {
	margin: 0;
}
form.nav-login input[type="text"],
form.nav-login input[type="password"] {
	width: 8rem;
}

/* --------------------------------------------------------------------
   Buttons: compact pills, not full-size editorial buttons. Pico's default
   button padding/font-size is tuned for marketing pages; this brings it
   down to the same scale as the reference sites' nav and form buttons.
   -------------------------------------------------------------------- */
button,
input[type="submit"],
input[type="reset"],
[role="button"] {
	border-radius: var(--radius-pill);
	padding: 0.55rem 1.35rem;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Text inputs, selects and textareas: modest rounded corners (not a full
   pill — that reads oddly on a text field) and tighter padding.
   Pico sets an explicit `height: calc(...)` on inputs (independent of
   padding) sized for its own, more spacious form-element-spacing token —
   overriding padding alone does nothing until that fixed height is reset
   back to `auto` so the box can size from padding + line-height instead. */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
	height: auto;
	border-radius: var(--radius-sm);
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	line-height: 1.4;
}

/* A real image (e.g. the PayPal buy buttons) must keep its natural size
   instead of being stretched to the form's full width like a text input. */
input[type="image"] {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: auto;
}

/* Outline variant for a secondary call-to-action link/button (Pico's own
   .secondary/.outline modifiers only exist in its non-classless build). */
a.btn-outline[role="button"] {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: transparent;
	border: 1px solid var(--pico-primary);
	color: var(--pico-primary) !important;
}
a.btn-outline[role="button"]:hover {
	background: color-mix(in srgb, var(--pico-primary) 12%, transparent);
	color: var(--pico-primary) !important;
}

/* Low-emphasis action (e.g. "Reset Fields") */
input[type="reset"] {
	background: transparent;
	border-color: var(--border-strong);
	color: var(--text-muted);
}
input[type="reset"]:hover {
	background: var(--surface-hover);
	color: #fff;
}

/* Destructive action: never let "Delete" look like the safe default choice
   sitting next to "Save"/"Update". Matched by value so every delete button
   in the codebase gets this without touching each template. */
input[type="submit"][value="Delete"] {
	background: transparent;
	border-color: rgba(239, 68, 68, 0.5);
	color: var(--danger-text);
}
input[type="submit"][value="Delete"]:hover {
	background: rgba(239, 68, 68, 0.15);
	border-color: var(--danger);
	color: #fff;
}
a.link-danger {
	color: var(--danger-text);
	text-decoration: none;
}
a.link-danger:hover {
	color: #fff;
}

/* --------------------------------------------------------------------
   Forms: cap width so fields and buttons don't stretch across an entire
   wide card, and let buttons size to their own label.
   -------------------------------------------------------------------- */
main form {
	max-width: var(--form-max);
}
main form input[type="submit"],
main form input[type="reset"],
main form button {
	display: inline-block;
	width: auto;
}
main form input[type="submit"] + input[type="submit"],
main form button + button {
	margin-left: 0.5rem;
}

/* --------------------------------------------------------------------
   Cards: one shared visual language for content sections, banner
   listings and credit packages.
   -------------------------------------------------------------------- */
main section,
.banner-card {
	border: 1px solid var(--border);
	background: var(--surface);
	border-radius: var(--radius);
	padding: var(--space-3);
	margin-bottom: var(--space-3);
}
main section h2:first-child {
	margin-top: 0;
}
main h2 {
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--border);
}

.banner-card {
	text-align: center;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.banner-card:hover {
	border-color: var(--pico-primary);
	background: var(--surface-hover);
}
.banner-card img {
	max-width: 100%;
	height: auto;
}
.banner-card form {
	margin: 0;
	max-width: none;
}

/* A single banner in a LIST (my banners, site banners, pending
   authorisation...) — a small thumbnail plus a couple of lines of
   metadata does not need a big centered showcase card; a compact row
   reads much better and doesn't leave half the card empty. */
.banner-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	border: 1px solid var(--border);
	background: var(--surface);
	border-radius: var(--radius);
	padding: 1rem;
	margin-bottom: 1rem;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.banner-row:hover {
	border-color: var(--pico-primary);
	background: var(--surface-hover);
}
.banner-row img {
	/* Banner ads are standard-sized (468x60 etc.) — show them at their real
	   size when there's room, instead of forcing a smaller fixed width. */
	width: auto;
	max-width: min(100%, 470px);
	height: auto;
	border-radius: 0.4rem;
	flex-shrink: 0;
}
.banner-row-info {
	flex: 1 1 14rem;
	min-width: 0;
}
.banner-row-info p {
	margin: 0;
	color: var(--text-muted);
}
.banner-row-actions {
	display: flex;
	gap: 1rem;
	flex-shrink: 0;
	margin-left: auto;
}
.banner-row form {
	margin: 0;
	max-width: none;
	display: flex;
	gap: 0.5rem;
}

/* --------------------------------------------------------------------
   Small pieces: badges, ad slots, pagination, admin tab bar, footer
   -------------------------------------------------------------------- */
.banner-slot {
	display: flex;
	justify-content: center;
	margin: var(--space-3) 0;
}
.banner-slot img,
.banner-slot iframe {
	border-radius: 0.4rem;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.badge {
	display: inline-block;
	padding: 0.2em 0.7em;
	border-radius: var(--radius-pill);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.badge-pending { background: rgba(239, 68, 68, 0.18); color: var(--danger-text); }
.badge-active { background: rgba(34, 197, 94, 0.18); color: var(--success-text); }

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
}

.tab-nav,
.tab-nav li {
	list-style: none;
}
.tab-nav li::marker {
	content: none;
}
.tab-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	padding: 0;
	margin: 0 0 var(--space-3) 0;
	border-bottom: 1px solid var(--border);
}
.tab-nav li { margin: 0; }
.tab-nav a {
	display: inline-block;
	padding-bottom: 0.5rem;
	font-size: 0.875rem;
	text-decoration: none;
	color: var(--text-muted);
}
.tab-nav a:hover { color: #fff; }
.tab-nav a.active {
	font-weight: 700;
	color: #fff;
	border-bottom: 2px solid var(--pico-primary);
}

footer {
	border-top: 1px solid var(--border);
	margin-top: var(--space-4);
}