/* ===================================================================
   AFPON Membership - Front-end styles
   Brand: Navy #0a3d62 | Gold accent #d4a017
   Everything is scoped under .afpon-membership-wrap and reset with
   box-sizing so it renders consistently regardless of the surrounding
   theme / page builder.
=================================================================== */
.afpon-membership-wrap,
.afpon-membership-wrap *,
.afpon-membership-wrap *::before,
.afpon-membership-wrap *::after {
	box-sizing: border-box;
}
.afpon-membership-wrap {
	max-width: 860px;
	margin: 0 auto;
	width: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: #1e2a33;
	font-size: 15px;
	line-height: 1.6;
}
.afpon-membership-wrap a {
	color: #0a3d62;
}
.afpon-membership-wrap img { max-width: 100%; }

/* ---------- Intro header ---------- */
.afpon-form-header {
	background: linear-gradient(135deg, #072844 0%, #0a3d62 55%, #135186 100%);
	color: #fff;
	border-radius: 12px;
	padding: 32px 30px;
	margin: 0 0 24px;
}
.afpon-form-header h1 {
	margin: 0 0 6px;
	font-size: 24px;
	color: #fff;
	font-weight: 800;
}
.afpon-form-header p {
	margin: 0;
	opacity: .88;
	font-size: 14.5px;
}

/* ---------- Section cards ---------- */
.afpon-fsec {
	background: #fff;
	border: 1px solid #e4e9ee;
	border-radius: 12px;
	box-shadow: 0 2px 14px rgba(10, 61, 98, .06);
	padding: 26px 28px;
	margin-bottom: 22px;
}
.afpon-fsec-title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	font-weight: 800;
	color: #0a3d62;
	margin: 0 0 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid #eef2f6;
}
.afpon-fsec-title .afpon-fsec-num {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #0a3d62;
	color: #fff;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* ---------- Grid / field layout ---------- */
.afpon-g1 { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 4px; }
.afpon-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 4px; }
.afpon-g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-bottom: 4px; }

.afpon-field {
	margin-bottom: 18px;
	min-width: 0; /* prevents grid children from overflowing */
}
.afpon-field:last-child { margin-bottom: 0; }
.afpon-field label {
	display: block;
	font-weight: 600;
	font-size: 13.5px;
	color: #1a3550;
	margin-bottom: 6px;
}
.afpon-field .req { color: #c0392b; }

.afpon-field input[type="text"],
.afpon-field input[type="email"],
.afpon-field input[type="password"],
.afpon-field input[type="file"],
.afpon-field select,
.afpon-field textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1.5px solid #d7dee5;
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	color: #1e2a33;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.afpon-field input:focus,
.afpon-field select:focus,
.afpon-field textarea:focus {
	outline: none;
	border-color: #0a3d62;
	box-shadow: 0 0 0 3px rgba(10, 61, 98, .12);
}
.afpon-field select[multiple] {
	padding: 6px;
}

.afpon-checkbox-field label {
	font-weight: 400;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
}
.afpon-checkbox-field input[type="checkbox"] {
	margin-top: 4px;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.afpon-terms-box {
	background: #f7f9fb;
	border: 1px solid #e4e9ee;
	border-radius: 8px;
	padding: 16px 18px;
	max-height: 190px;
	overflow-y: auto;
	font-size: 13px;
	color: #4a5b6b;
	margin-bottom: 14px;
	white-space: pre-line;
}

.afpon-help {
	font-size: 13px;
	color: #64748b;
	margin: 6px 0 0;
}

/* ---------- Membership level picker (card style, not a bare dropdown) ---------- */
.afpon-level-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-bottom: 8px;
}
.afpon-level-card {
	position: relative;
	border: 2px solid #d7dee5;
	border-radius: 10px;
	padding: 16px 16px 14px;
	cursor: pointer;
	transition: all .15s ease;
	background: #fff;
}
.afpon-level-card:hover {
	border-color: #0a3d62;
	background: #f7f9fb;
}
.afpon-level-card.afpon-level-selected {
	border-color: #0a3d62;
	background: #eef4fa;
	box-shadow: 0 0 0 3px rgba(10, 61, 98, .1);
}
.afpon-level-card input[type="radio"] {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 16px;
	height: 16px;
}
.afpon-level-card .afpon-level-name {
	display: block;
	font-weight: 700;
	font-size: 14.5px;
	color: #0a3d62;
	margin: 0 26px 6px 0;
}
.afpon-level-card .afpon-level-price {
	display: block;
	font-size: 13px;
	color: #64748b;
}

/* ---------- Buttons ---------- */
.afpon-btn {
	display: inline-block;
	background: #0a3d62;
	color: #fff;
	border: none;
	padding: 13px 30px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	transition: background .15s ease, transform .1s ease;
}
.afpon-btn:hover { background: #082f4c; }
.afpon-btn:active { transform: translateY(1px); }
.afpon-btn:disabled { opacity: .6; cursor: not-allowed; }
.afpon-btn-block { width: 100%; text-align: center; }

/* ---------- Honeypot (hidden from real users) ---------- */
.afpon-hp-field {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	height: 0;
	overflow: hidden;
}

/* ---------- Alerts / notices ---------- */
.afpon-form-message {
	padding: 13px 18px;
	border-radius: 8px;
	margin-bottom: 20px;
	font-weight: 600;
	font-size: 14px;
}
.afpon-msg-success { background: #e6f4ea; color: #1e7e34; border: 1px solid #b7dfc0; }
.afpon-msg-error { background: #fdecea; color: #b02a37; border: 1px solid #f5c2c7; }

.afpon-notice {
	padding: 16px 20px;
	border-radius: 10px;
	margin-bottom: 20px;
	font-size: 14px;
}
.afpon-notice-info { background: #eaf2fb; color: #1a4a7a; border: 1px solid #c6dcf2; }
.afpon-notice-warning { background: #fff8e1; color: #8a6d00; border: 1px solid #ffe28a; }
.afpon-notice-error { background: #fdecea; color: #b02a37; border: 1px solid #f5c2c7; }
.afpon-notice-success { background: #e6f4ea; color: #1e7e34; border: 1px solid #b7dfc0; }

/* ---------- Login form ---------- */
.afpon-login-wrap {
	max-width: 420px;
}
.afpon-login-wrap h2 {
	color: #0a3d62;
	font-size: 22px;
	margin-bottom: 18px;
}
.afpon-login-wrap form p { margin-bottom: 16px; }
.afpon-login-wrap label { display: block; font-weight: 600; font-size: 13.5px; color: #1a3550; margin-bottom: 6px; }
.afpon-login-wrap input[type="text"],
.afpon-login-wrap input[type="password"] {
	width: 100%;
	padding: 11px 13px;
	border: 1.5px solid #d7dee5;
	border-radius: 8px;
	font-size: 14px;
}
.afpon-login-wrap input[type="submit"] {
	display: inline-block;
	background: #0a3d62;
	color: #fff;
	border: none;
	padding: 12px 28px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.afpon-login-wrap .afpon-help { margin-top: 14px; }

/* ---------- Dashboard ---------- */
.afpon-dashboard-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}
.afpon-dashboard-header h2 {
	margin: 0;
	color: #0a3d62;
	font-size: 21px;
}
.afpon-logout-link {
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	background: #f1f4f7;
	padding: 8px 16px;
	border-radius: 20px;
	color: #0a3d62 !important;
}

.afpon-status-card {
	border: 1px solid #e4e9ee;
	border-radius: 12px;
	padding: 26px 28px;
	margin-bottom: 24px;
	background: #fff;
	box-shadow: 0 2px 14px rgba(10, 61, 98, .06);
}
.afpon-status-card h3 {
	margin: 0 0 16px;
	color: #0a3d62;
	font-size: 16px;
}
.afpon-status-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 16px;
}
.afpon-status-table th {
	text-align: left;
	width: 200px;
	padding: 8px 0;
	color: #64748b;
	font-weight: 500;
	font-size: 13.5px;
	vertical-align: top;
}
.afpon-status-table td {
	padding: 8px 0;
	font-weight: 600;
	font-size: 14px;
}
.afpon-pay-box {
	background: #f7f9fb;
	border: 1.5px dashed #0a3d62;
	border-radius: 10px;
	padding: 22px;
	text-align: center;
}
.afpon-pay-box p { margin: 0 0 4px; }
.afpon-amount {
	font-size: 24px;
	font-weight: 800;
	color: #0a3d62;
	margin: 8px 0 16px !important;
}

.afpon-payment-history {
	background: #fff;
	border: 1px solid #e4e9ee;
	border-radius: 12px;
	padding: 24px 26px;
	box-shadow: 0 2px 14px rgba(10, 61, 98, .06);
}
.afpon-payment-history h3 {
	margin: 0 0 16px;
	color: #0a3d62;
	font-size: 16px;
}
.afpon-table {
	width: 100%;
	border-collapse: collapse;
}
.afpon-table th, .afpon-table td {
	padding: 11px 8px;
	border-bottom: 1px solid #eef2f6;
	text-align: left;
	font-size: 13.5px;
}
.afpon-table th {
	color: #64748b;
	font-weight: 600;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: .3px;
}
.afpon-pill {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 30px;
	font-size: 12px;
	font-weight: 700;
	text-transform: capitalize;
}
.afpon-pill-success { background: #e6f4ea; color: #1e7e34; }
.afpon-pill-pending { background: #fff8e1; color: #8a6d00; }
.afpon-pill-failed { background: #fdecea; color: #b02a37; }

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
	.afpon-g2, .afpon-g3 { grid-template-columns: 1fr; }
	.afpon-fsec { padding: 20px 18px; }
	.afpon-form-header { padding: 24px 20px; }
	.afpon-status-table th { width: 140px; }
}

/* ---------------------------------------------------------------------
   Hide the theme / page-builder's own page title on the Registration and
   Account pages (set body class added by afpon_ms_maybe_add_notitle_body_class
   in the main plugin file). The plugin's shortcodes already render their
   own on-page heading, so the theme's title is redundant. This covers the
   most common theme/page-builder title markup; if your theme still shows
   a title, use its own "hide page title" page-level setting instead
   (e.g. Elementor: Page Settings > hide title; Astra: Page Attributes >
   Structure > disable page header).
=================================================================== */
body.afpon-notitle .entry-title,
body.afpon-notitle .page-title,
body.afpon-notitle h1.entry-title,
body.afpon-notitle .entry-header,
body.afpon-notitle .page-header,
body.afpon-notitle .ast-page-title-wrap,
body.afpon-notitle .elementor-heading-title,
body.afpon-notitle .elementor-widget-theme-page-title,
body.afpon-notitle .et_pb_title_container,
body.afpon-notitle .breadcrumbs,
body.afpon-notitle .rank-math-breadcrumb {
	display: none !important;
}