/**
 * My Ads Dashboard page, [glh_my_ads_dashboard].
 * Reuses the same brand palette as gpc-frontend-submit.css (navy
 * #131b30 + gold #f0a500/#d98d00) and the same status colors already
 * defined there, so this page feels native to the plugin rather than
 * like a bolted-on second UI.
 */

.gpc-ads-dash {
	max-width: 1180px;
	margin: 0 auto;
	padding: 24px 16px 60px;
	font-family: inherit;
	color: #1f2430;
}

/* Embedded copy, sits directly inside the Add/Edit Post form's Advertise
   section (see GPC_Ads_Dashboard::render_embedded_in_form()) rather than
   on its own page, so the form's own modal padding is the only outer
   frame it needs; this copy's own max-width/margin/heavy bottom padding
   would just add unwanted extra space around it. */
.gpc-ads-dash-embedded {
	max-width: none;
	margin: 0;
	padding: 0 0 8px;
}
.gpc-ads-dash-embedded .gpc-ads-dash-header { border-radius: 14px; padding: 18px 20px; }
.gpc-ads-dash-embedded .gpc-ads-dash-title { font-size: 21px; }

.gpc-ads-dash-loggedout {
	text-align: center;
	padding: 60px 16px;
	font-size: 15px;
}
.gpc-ads-dash-loggedout a { color: #d98d00; font-weight: 700; text-decoration: none; }

/* ---------------------------------------------------------------- header */
/* Deep navy hero band, the dashboard's own identity strip, same navy
   (#131b30) already used site-wide as the brand's dark color, just
   given real presence here instead of only being a text color. Sits
   above the light content below it rather than recoloring every panel, so dense areas (the campaigns table, the performance chart) keep the
   contrast they need to stay easy to read. */
.gpc-ads-dash-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 22px;
	background:#061a3b;
	border-radius: 18px;
	padding: 26px 28px;
}
.gpc-ads-dash-title { margin: 0 0 4px; font-size: 26px; font-weight: 800; color: #fff; }
.gpc-ads-dash-subtitle { margin: 0; font-size: 14px; color: #aab1c4; }

/* STEP 13 fix, the universal-avatar greeting: a small circular photo
   (resolved by WordPress's own get_avatar_url(), see class-gpc-ads-
   dashboard.php render_page()) plus the title/subtitle beside it. */
.gpc-ads-dash-header-left { display: flex; align-items: center; gap: 16px; }
.gpc-ads-dash-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	border: 2px solid rgba(255,255,255,0.35);
	background: #1b2647;
}

.gpc-ads-dash-create-btn {
	background:#d7ae4f;
	color: #131b30 !important;
	border: none;
	border-radius: 999px;
	padding: 12px 22px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	white-space: nowrap;
	align-self: center;
}
.gpc-ads-dash-create-btn:hover { filter: brightness(1.03); }

/* ---------------------------------------------------------------- summary */

/* Top row: Wallet Balance / Total Spent / Remaining Budget / Total Ads, four icon-badge cards, matching the mockup. */
.gpc-ads-dash-summary-top {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 14px;
}
.gpc-ads-dash-card {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 14px;
	padding: 16px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.gpc-ads-dash-card-icon {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gpc-ads-dash-card-icon svg { width: 20px; height: 20px; }
/* Brand-consistent icon chips: solid navy/gold/sky-blue only (matching
 * the header's own navy-hero + gold-button identity), never the generic
 * pastel green/orange/blue "SaaS template" tint squares this used to
 * use, those read as generic and off-brand next to the rest of this
 * page. Class names kept as-is (only what they render changed) so
 * nothing elsewhere that references them needs to change too. */
.gpc-ads-dash-card-icon-purple { background: #131b30; color: #f0a500; }
.gpc-ads-dash-card-icon-green  { background:#d7ae4f; color: #131b30; }
.gpc-ads-dash-card-icon-orange { background:#061a3b; color: #fff; }
.gpc-ads-dash-card-icon-blue   { background: #131b30; color: #5aa9e6; }

.gpc-ads-dash-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gpc-ads-dash-card-label { font-size: 12.5px; color: #6b7280; font-weight: 600; }
.gpc-ads-dash-card-value { font-size: 20px; font-weight: 800; color: #131b30; line-height: 1.2; }
.gpc-ads-dash-card-sub { font-size: 11.5px; color: #9ca3af; }
.gpc-ads-dash-card-link {
	font-size: 12.5px;
	font-weight: 700;
	color: #15803d;
	text-decoration: none;
	margin-top: 2px;
}
.gpc-ads-dash-card-link:hover { text-decoration: underline; }
.gpc-ads-dash-card-link-disabled { color: #9ca3af; cursor: not-allowed; }

/* STEP 12, .gpc-ads-dash-stats-cards is a "display:contents" wrapper so
   its three real cards still count as three direct items of the Wallet
   row's 4-column grid (not one nested grid item swallowing three slots).
   .gpc-ads-dash-stats-empty-card replaces those three cards (plus the
   whole secondary chip row, hidden separately) with one full-width
   banner when this advertiser has never created a campaign, Wallet
   Balance itself is unaffected and stays in its own card. */
.gpc-ads-dash-stats-cards { display: contents; }
.gpc-ads-dash-stats-empty-card {
	grid-column: 1 / -1;
	align-items: center;
	background: #fafafa;
}
.gpc-ads-dash-stats-empty-card .gpc-ads-dash-card-label { font-size: 13.5px; font-weight: 800; color: #131b30; }
.gpc-ads-dash-stats-empty-card .gpc-ads-dash-card-sub { font-size: 12.5px; line-height: 1.5; }

/* Secondary row: Impressions / Clicks / CTR / Active / Completed / Pending, a compact strip of six small icon+value chips. */
.gpc-ads-dash-summary-secondary {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	margin-bottom: 22px;
}
.gpc-ads-dash-chip {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 14px;
	padding: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.gpc-ads-dash-chip-icon {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #f3f4f6;
	color: #4b5563;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gpc-ads-dash-chip-icon svg { width: 16px; height: 16px; }
.gpc-ads-dash-chip-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gpc-ads-dash-chip-value { font-size: 16px; font-weight: 800; color: #131b30; line-height: 1.2; }
.gpc-ads-dash-chip-label { font-size: 10.5px; color: #6b7280; font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------- layout */
.gpc-ads-dash-panel {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 14px;
	padding: 20px;
	margin-bottom: 18px;
}
.gpc-ads-dash-panel-title { margin: 0 0 12px; font-size: 16px; font-weight: 800; color: #131b30; }
.gpc-ads-dash-panel-note { margin: 0; font-size: 13px; color: #6b7280; line-height: 1.5; }

.gpc-ads-dash-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.gpc-ads-dash-panel-header .gpc-ads-dash-panel-title { margin: 0; }
.gpc-ads-dash-viewall {
	background: none;
	border: none;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	color: #d98d00;
	cursor: pointer;
	white-space: nowrap;
}
.gpc-ads-dash-viewall:hover { text-decoration: underline; }

.gpc-ads-dash-empty {
	text-align: center;
	padding: 28px 16px;
	color: #6b7280;
	font-size: 13.5px;
	line-height: 1.5;
}

/* Empty state (no campaigns yet), icon + heading + supporting text +
   a Create New Ad button that fires the exact same real create flow
   as the header button (see gpc-ads-dashboard.js: every
   .gpc-ads-dash-create-btn shares one click handler). */
.gpc-ads-dash-empty-state {
	text-align: center;
	padding: 44px 20px;
}
.gpc-ads-dash-empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #fef3c7;
	color: #b45309;
	margin-bottom: 14px;
}
.gpc-ads-dash-empty-icon svg { width: 26px; height: 26px; }
.gpc-ads-dash-empty-title { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: #131b30; }
.gpc-ads-dash-empty-text { margin: 0 0 18px; font-size: 13.5px; color: #6b7280; line-height: 1.55; max-width: 360px; margin-left: auto; margin-right: auto; }
.gpc-ads-dash-create-btn-empty { padding: 11px 24px; }

/* Two-column body on desktop: campaigns/performance (wide, left) +
   sidebar (wallet/transactions/help, right). Single column below that. */
.gpc-ads-dash {
	display: grid;
	grid-template-columns: 1fr;
}
.gpc-ads-dash-header,
.gpc-ads-dash-summary-top,
.gpc-ads-dash-summary-secondary { grid-column: 1 / -1; }

@media (min-width: 992px) {
	.gpc-ads-dash { grid-template-columns: 2fr 1fr; column-gap: 18px; }
	.gpc-ads-dash-performance, .gpc-ads-dash-campaigns { grid-column: 1; }
	.gpc-ads-dash-side { grid-column: 2; grid-row: 3 / span 2; display: flex; flex-direction: column; }
}

/* ----------------------------------------------------- performance graph */
.gpc-ads-dash-perf-header {
	flex-wrap: wrap;
	row-gap: 10px;
}
.gpc-ads-dash-perf-controls {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.gpc-ads-dash-perf-legend {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}
.gpc-ads-dash-perf-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 700;
	color: #9ca3af;
	cursor: pointer;
}
.gpc-ads-dash-perf-toggle.is-active { color: #131b30; border-color: #d9dce3; background: #f9fafb; }
.gpc-ads-dash-perf-toggle:disabled { cursor: not-allowed; opacity: 0.55; }
.gpc-ads-dash-perf-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.gpc-ads-dash-perf-dot-spend       { background: #15803d; }
.gpc-ads-dash-perf-dot-impressions { background: #1d4ed8; }
.gpc-ads-dash-perf-dot-clicks      { background: #c9960c; }

.gpc-ads-dash-perf-range {
	border: 1px solid #ececec;
	border-radius: 8px;
	padding: 7px 10px;
	font-size: 12.5px;
	font-weight: 600;
	color: #131b30;
	background: #fff;
	cursor: pointer;
}

.gpc-ads-dash-perf-chart-wrap {
	position: relative;
	width: 100%;
	height: 220px;
	margin-top: 6px;
}
.gpc-ads-dash-perf-chart-wrap canvas { width: 100% !important; height: 100% !important; }

.gpc-ads-dash-perf-totals {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #f0f0f0;
}
.gpc-ads-dash-perf-total { display: flex; flex-direction: column; gap: 3px; }
.gpc-ads-dash-perf-total span { font-size: 12px; color: #6b7280; font-weight: 600; }
.gpc-ads-dash-perf-total span em { font-style: normal; color: #9ca3af; }
.gpc-ads-dash-perf-total strong { font-size: 18px; font-weight: 800; color: #131b30; }

@media (max-width: 600px) {
	.gpc-ads-dash-perf-totals { grid-template-columns: 1fr; }
	.gpc-ads-dash-perf-controls { width: 100%; justify-content: space-between; }
	.gpc-ads-dash-perf-range { flex: none; }
}

/* ------------------------------------------------------------- campaigns */
.gpc-ads-dash-table-wrap { overflow-x: auto; }
.gpc-ads-dash-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.gpc-ads-dash-table th {
	text-align: left;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #6b7280;
	padding: 8px 10px;
	border-bottom: 2px solid #f0f0f0;
	white-space: nowrap;
}
.gpc-ads-dash-table td {
	padding: 12px 10px;
	border-bottom: 1px solid #f3f3f3;
	vertical-align: middle;
	white-space: nowrap;
}
.gpc-ads-dash-table tr:last-child td { border-bottom: none; }
.gpc-ads-dash-campaigns-table .gpc-ads-dash-ad-title { white-space: normal; font-weight: 600; color: #131b30; }

.gpc-ads-dash-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
}
.gpc-ads-dash-status-active           { background: #dcfce7; color: #15803d; }
.gpc-ads-dash-status-pending-approval { background: #fef3c7; color: #b45309; }
.gpc-ads-dash-status-completed        { background: #dbeafe; color: #1d4ed8; }
.gpc-ads-dash-status-expired          { background: #dbeafe; color: #1d4ed8; } /* legacy label, same real state as Completed */
.gpc-ads-dash-status-rejected         { background: #fee2e2; color: #b91c1c; }
.gpc-ads-dash-status-paused           { background: #e5e7eb; color: #374151; } /* STEP 10: a real state now, admin Pause/Resume in class-gpc-ad-campaigns.php */

/* action column + expandable detail row */
.gpc-ads-dash-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	border: 1px solid #ececec;
	background: #fff;
	color: #6b7280;
	cursor: pointer;
	padding: 0;
}
.gpc-ads-dash-action-btn svg { width: 15px; height: 15px; }
.gpc-ads-dash-action-btn:hover { background: #f9fafb; color: #131b30; }
.gpc-ads-dash-action-btn[aria-expanded="true"] { background: #131b30; border-color: #131b30; color: #fff; }

.gpc-ads-dash-detail-row td { padding: 0; border-bottom: 1px solid #f3f3f3; }
.gpc-ads-dash-detail-row:last-child td { border-bottom: none; }
.gpc-ads-dash-detail-panel {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	background: #f9fafb;
	padding: 12px 14px;
	margin: 0 0 4px;
	border-radius: 10px;
}
.gpc-ads-dash-detail-panel div { display: flex; flex-direction: column; gap: 2px; }
.gpc-ads-dash-detail-panel span { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; color: #9ca3af; font-weight: 700; }
.gpc-ads-dash-detail-panel strong { font-size: 13px; color: #131b30; }

/* ---------------------------------------------------------------- wallet */
/* Wallet Overview gets the same deep navy treatment as the header, it's
   the other place on this page showing the advertiser's own money, so
   it earns the same premium, "this number matters" visual weight. */
.gpc-ads-dash-wallet {
	background:#061a3b;
	border-color: transparent;
}
.gpc-ads-dash-wallet .gpc-ads-dash-panel-title { color: #fff; }
.gpc-ads-dash-wallet-balance {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 14px;
}
.gpc-ads-dash-wallet-label { font-size: 12px; color: #aab1c4; font-weight: 600; }
.gpc-ads-dash-wallet-amount { font-size: 26px; font-weight: 800; color: #fff; }

/* STEP 13 fix, Total Earned / Total Spent, side by side under the
   balance, on a subtle divider so they read as supporting detail
   rather than competing with the main balance figure above them. */
.gpc-ads-dash-wallet-mini-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 12px 0 16px;
	margin-bottom: 4px;
	border-top: 1px solid rgba(255,255,255,0.12);
}
.gpc-ads-dash-wallet-mini-stat { display: flex; flex-direction: column; gap: 2px; }
.gpc-ads-dash-wallet-mini-label { font-size: 11px; color: #aab1c4; font-weight: 600; }
.gpc-ads-dash-wallet-mini-value { font-size: 15px; color: #fff; font-weight: 700; }

.gpc-ads-dash-btn-secondary {
	display: inline-block;
	width: 100%;
	text-align: center;
	background: #fff;
	border: 2px solid transparent;
	color: #131b30;
	font-weight: 700;
	font-size: 13.5px;
	padding: 10px 16px;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	box-sizing: border-box;
}
.gpc-ads-dash-btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------------------------------------------------------- transactions */
.gpc-ads-dash-payment-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid #f3f3f3;
}
.gpc-ads-dash-payment-row:last-child { border-bottom: none; }
.gpc-ads-dash-payment-icon {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gpc-ads-dash-payment-icon svg { width: 16px; height: 16px; }
.gpc-ads-dash-payment-icon.is-credit { background: #dcfce7; color: #15803d; }
.gpc-ads-dash-payment-icon.is-debit  { background: #fee2e2; color: #b91c1c; }
.gpc-ads-dash-payment-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gpc-ads-dash-payment-desc { font-size: 13px; font-weight: 700; color: #131b30; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gpc-ads-dash-payment-sub  { font-size: 12px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gpc-ads-dash-payment-date { font-size: 11.5px; color: #9ca3af; }
.gpc-ads-dash-payment-amount { font-size: 13px; font-weight: 700; white-space: nowrap; flex: none; }
.gpc-ads-dash-payment-amount.is-debit  { color: #b91c1c; }
.gpc-ads-dash-payment-amount.is-credit { color: #15803d; }

.gpc-ads-dash-viewall-block {
	display: block;
	text-align: center;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid #f0f0f0;
	text-decoration: none;
}
.gpc-ads-dash-viewall-disabled { color: #9ca3af; cursor: not-allowed; }
.gpc-ads-dash-viewall-disabled:hover { text-decoration: none; }

/* --------------------------------------------------------------- help */
.gpc-ads-dash-help-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: #eef1fb;
	color: #131b30;
	margin-bottom: 10px;
}
.gpc-ads-dash-help-icon svg { width: 20px; height: 20px; }
.gpc-ads-dash-help p { margin: 0 0 14px; font-size: 13px; color: #6b7280; line-height: 1.6; }
.gpc-ads-dash-help-btn {
	display: inline-block;
	background: #131b30;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	padding: 9px 18px;
	border-radius: 999px;
	text-decoration: none;
}
.gpc-ads-dash-help-btn:hover { filter: brightness(1.15); }
.gpc-ads-dash-help-btn-disabled { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; }
.gpc-ads-dash-help-btn-disabled:hover { filter: none; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 991px) {
	.gpc-ads-dash-summary-top { grid-template-columns: repeat(2, 1fr); }
	.gpc-ads-dash-summary-secondary { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
	.gpc-ads-dash-summary-top { grid-template-columns: 1fr; }
	.gpc-ads-dash-summary-secondary { grid-template-columns: repeat(2, 1fr); }
	.gpc-ads-dash-header { flex-direction: column; align-items: stretch; }
	.gpc-ads-dash-create-btn { width: 100%; }

	/* Campaign table -> stacked cards, same technique the rest of the
	   site already uses for narrow screens: each <td> becomes a row
	   with its column header as a label, via the data-label attribute
	   already output server-side. */
	.gpc-ads-dash-table thead { display: none; }
	.gpc-ads-dash-table, .gpc-ads-dash-table tbody, .gpc-ads-dash-table tr, .gpc-ads-dash-table td { display: block; width: 100%; }
	.gpc-ads-dash-table tr { border: 1px solid #f0f0f0; border-radius: 10px; margin-bottom: 10px; padding: 6px 12px; }
	.gpc-ads-dash-table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f6f6f6;
		padding: 8px 0;
	}
	.gpc-ads-dash-table td:last-child { border-bottom: none; }
	.gpc-ads-dash-table td::before {
		content: attr(data-label);
		font-size: 11px;
		font-weight: 700;
		color: #9ca3af;
		text-transform: uppercase;
		letter-spacing: 0.02em;
	}
	.gpc-ads-dash-campaigns-table .gpc-ads-dash-ad-title { white-space: normal; text-align: right; }

	/* Action + detail rows inside the stacked "card" layout */
	.gpc-ads-dash-detail-row { border: none !important; margin: -4px 0 10px; }
	.gpc-ads-dash-detail-row td { display: block; border-bottom: none; padding: 0; }
	.gpc-ads-dash-detail-row td::before { content: none; }
	.gpc-ads-dash-detail-panel { flex-direction: column; gap: 10px; border-radius: 0 0 10px 10px; }

	.gpc-ads-dash-panel-header { flex-wrap: wrap; }
}

/* ------------------------------------------------ STEP 9: Campaign Performance View */
/* Everything else inside #gpcAdsDash hides while this panel is shown, via a
   mode class toggled in gpc-ads-dashboard.js, no markup is removed/rebuilt, so switching back to the dashboard needs no re-fetch of anything already
   rendered. */
.gpc-ads-dash-campaign-perf { display: none; grid-column: 1 / -1; }
.gpc-ads-dash.gpc-ads-dash-perf-mode > *:not(.gpc-ads-dash-campaign-perf) { display: none; }
.gpc-ads-dash.gpc-ads-dash-perf-mode .gpc-ads-dash-campaign-perf { display: block; }

.gpc-ads-dash-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	color: #0f5132;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	padding: 6px 0;
}
.gpc-ads-dash-back-btn:hover { text-decoration: underline; }

.gpc-ads-dash-campaign-perf-cards { margin-top: 14px; }

/* STEP 13, built-in "Ads Guide" modal. Only ever rendered/used when no
   site owner has filtered in a real external guide URL (see
   GPC_Ads_Dashboard::render_ads_guide_modal()); sits on top of the
   frontend-submit modal itself (z-index above it), same overlay pattern
   as .gpc-submit-overlay. */
.gpc-ads-guide-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(19, 27, 48, 0.55);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.gpc-ads-guide-overlay.is-open { display: flex; }
.gpc-ads-guide-modal {
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: 28px 26px;
	width: 100%;
	max-width: 560px;
	max-height: 85vh;
	overflow-y: auto;
	box-sizing: border-box;
}
.gpc-ads-guide-modal h2 { margin: 0 0 6px; font-size: 21px; color: #131b30; }
.gpc-ads-guide-modal h3 { margin: 18px 0 6px; font-size: 14.5px; color: #131b30; }
.gpc-ads-guide-modal h3:first-of-type { margin-top: 14px; }
.gpc-ads-guide-intro { color: #666; font-size: 13px; margin: 0 0 4px; }
.gpc-ads-guide-modal p { font-size: 13.5px; line-height: 1.6; color: #3a3f4b; margin: 0 0 4px; }
.gpc-ads-guide-modal ul { margin: 4px 0 4px 18px; padding: 0; font-size: 13.5px; line-height: 1.6; color: #3a3f4b; }
.gpc-ads-guide-modal li { margin-bottom: 4px; }
.gpc-ads-guide-close {
	position: absolute;
	top: 14px;
	right: 16px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #8a8f9a;
	padding: 4px;
}
.gpc-ads-guide-close:hover { color: #1f2430; }
@media (max-width: 600px) {
	.gpc-ads-guide-modal { padding: 22px 18px; border-radius: 14px; }
}