/* ============================================================   
   jpchacha.com | Add-on CSS for Utility Pages
============================================================ */

/* ------------------------------------------------------------
Layout
------------------------------------------------------------ */

.layout { 
	display: grid; 
	grid-template-columns: 
	1fr var(--sidebar-w); 
	align-items: start; 
}

.main { 
	border-right: 0.5px solid var(--navy-mid);
}

.layout a, .layout * a {
	text-decoration: none;
}


/* ------------------------------------------------------------
Callout
------------------------------------------------------------ */

.callout {
	background: var(--navy-mid);
	border: 0.5px solid var(--navy-light);
	border-left: 2px solid var(--blue);
	border-radius: 0 8px 8px 0;
	padding: 14px 16px;
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.7;
}

.callout strong { 
	color: var(--text-primary); 
	font-weight: 800; 
}

.callout a { 
	color: var(--blue-pale); 
}

.callout a:hover { 
	opacity: 0.8; 
}

.callout--note { 
	border-left-color: var(--amber-light); 
	background: #1a1208; 
	font-size: 16px; 
}

/* ------------------------------------------------------------
Core Message Hero
------------------------------------------------------------ */

.coremessage-hero {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	background: var(--navy-mid);
	border: 0.5px solid var(--navy-light);
	border-radius: 10px;
	padding: 28px;
}

.coremessage-icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--green-dim);
	border: 0.5px solid var(--green-light);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.coremessage-icon svg {
	width: 36px;
	height: 36px;
	stroke: var(--green-light);
}

.coremessage-icon-warn {
	background: var(--amber-dim);
	border: 0.5px solid var(--amber-light);
}

.coremessage-icon-warn svg {
	stroke: var(--amber-light);
}

.coremessage-icon-fail {
	background: var(--red-dim);
	border: 0.5px solid var(--red-light);
}

.coremessage-icon-fail svg {
	stroke: var(--red-light);
}

.coremessage-text { 
	font-size: 14px; 
	color: var(--text-muted); 
	line-height: 1.65; 
}

.coremessage-text p, .coremessage-text * p { 
	margin-bottom: 16px; 
}

.coremessage-text h2, .coremessage-text * h2 { 
	font-size: 18px; 
	font-weight: 500; 
	color: var(--text-primary); 
	margin-bottom: 8px; 
}

.coremessage-text h3, .coremessage-text * h3 { 
	font-size: 16px; 
	font-weight: 500; 
	color: var(--text-secondary); 
	margin-bottom: 8px; 
}

.coremessage-text table, .coremessage-text * table {
	background: transparent;
	margin-bottom: 16px; 
}
.coremessage-text tr, .coremessage-text * tr { 
	background: transparent;
	margin: 4px 4px 4px 4px;
	font-size: 14px; 
	color: var(--text-muted); 
}

.coremessage-text td, .coremessage-text * td { 
	background: var(--navy);
	margin: 0px 12px 0px 12px;
	padding: 2px 8px;
}

/* ------------------------------------------------------------
Forms
------------------------------------------------------------ */

.account_form {
	background: var(--navy-mid);
	border: 0.5px solid var(--navy-light);
	border-radius: 10px;
	padding: 20px;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

.form-group { 
	display: flex; 
	flex-direction: column; 
	gap: 6px; 
}

.form-group:not(:last-child) 
{ 
	margin-bottom: 16px; 
}

.form-row .form-group { 
	margin-bottom: 0; 
}

.form-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--text-secondary);
}

.form-optional {
	font-size: 11px;
	font-weight: 400;
	color: var(--text-faint);
}

.form-control {
	background: var(--navy);
	border: 0.5px solid var(--navy-light);
	border-radius: 7px;
	padding: 9px 12px;
	font-size: 13px;
	color: var(--text-primary);
	font-family: inherit;
	outline: none;
	transition: border-color 0.15s;
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
}

.form-control::placeholder { 
	color: var(--text-faint); 
}
.form-control:focus { 
	border-color: var(--blue); 
}

select.form-control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23475569' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 32px;
	cursor: pointer;
}

select.form-control option { 
	background: var(--navy-mid); 
}

.form-textarea { 
	resize: vertical; 
	line-height: 1.6; 
}

.form-footer {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 4px;
	flex-wrap: wrap;
}

.form-note { 
	font-size: 12px; 
	color: var(--text-faint); 
}

/* ------------------------------------------------------------
Next Cards
------------------------------------------------------------ */

.next-cards { 
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
	gap: 10px; 
}

.next-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	background: var(--navy-mid);
	border: 0.5px solid var(--navy-light);
	border-radius: 10px;
	color: inherit;
	transition: border-color 0.15s;
}

.next-card:hover { 
	border-color: var(--blue); 
}

.next-card-icon {
	width: 34px;
	height: 34px;
	background: var(--blue-dim);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.next-card-icon svg { 
	width: 16px; 
	height: 16px; 
	stroke: var(--blue); 
}

.next-card-title { 
	font-size: 13px; 
	font-weight: 500; 
	color: var(--text-primary); 
	margin-bottom: 3px; 
}
.next-card-sub { 
	font-size: 12px; 
	color: var(--text-muted); 
	line-height: 1.5; 
}

/* ------------------------------------------------------------
Donate Hero
------------------------------------------------------------ */

.donate-hero {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	background: var(--navy-mid);
	border: 0.5px solid var(--navy-light);
	border-radius: 10px;
	padding: 28px;
}

.donate-icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: #1a0a10;
	border: 0.5px solid #f472b6;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.donate-icon svg { 
	width: 36px; 
	height: 36px; 
	stroke: #f472b6; 
}

.donate-body h2 { 
	font-size: 18px; 
	font-weight: 500; 
	color: var(--text-primary); 
	margin-bottom: 8px; 
}

.donate-body p { 
	font-size: 14px; 
	color: var(--text-muted); 
	line-height: 1.7; 
	margin-bottom: 18px; 
	max-width: 480px; 
}

.btn-paypal {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #003087;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	padding: 10px 22px;
	border-radius: 8px;
	transition: opacity 0.15s;
}

.btn-paypal:hover { 
	opacity: 0.88; 
}

.paypal-icon { 
	width: 18px; 
	height: 18px; 
	fill: #fff; 
}

/* ------------------------------------------------------------
Support List
------------------------------------------------------------ */

.support-list { 
	display: flex; 
	flex-direction: column; 
	gap: 16px; 
	max-width: 560px; 
}

.support-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.support-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--blue);
	flex-shrink: 0;
	margin-top: 5px;
}

.support-title { 
	font-size: 14px; 
	font-weight: 500; 
	color: var(--text-primary); 
	margin-bottom: 3px; 
}

.support-sub { 
	font-size: 13px; 
	color: var(--text-muted); 
	line-height: 1.6; 
}

/* ------------------------------------------------------------
Responsive
------------------------------------------------------------ */

@media (max-width: 640px) {
  .nav { padding: 0 16px; gap: 16px; }
  .nav-link { display: none; }
  .breadcrumb, .page-header, .section { padding-left: 16px; padding-right: 16px; }
  .page-header h1 { font-size: 22px; }
  .layout { grid-template-columns: 1fr; }
  .main { border-right: none; }
  .sidebar { position: static; border-top: 0.5px solid var(--navy-mid); padding: 20px 16px; }
  .coremessage-hero, .donate-hero { flex-direction: column; gap: 16px; }
  .footer { padding: 16px; flex-direction: column; align-items: flex-start; }
}