/* PayPress — Subscriber Dashboard, Plans & Admin Styles */

/* ---- Plans grid [pp_plans] ---- */
.pp-plans {
	display: grid;
	gap: 24px;
	margin: 32px 0;
}
.pp-plans-cols-1 { grid-template-columns: 1fr; max-width: 360px; }
.pp-plans-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pp-plans-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pp-plans-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 700px) {
	.pp-plans-cols-2,
	.pp-plans-cols-3,
	.pp-plans-cols-4 { grid-template-columns: 1fr; }
}

.pp-plan {
	position: relative;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 28px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: box-shadow .15s;
}
.pp-plan:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }

.pp-plan--highlight {
	border-color: #0073aa;
	box-shadow: 0 0 0 2px #0073aa;
}

.pp-plan__badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: #0073aa;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 3px 12px;
	border-radius: 20px;
	white-space: nowrap;
}

.pp-plan__name { font-size: 18px; font-weight: 700; color: #1d2327; }

.pp-plan__price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	flex-wrap: wrap;
}
.pp-plan__amount { font-size: 32px; font-weight: 700; color: #1d2327; line-height: 1; }
.pp-plan__currency { font-size: 13px; color: #787c82; }
.pp-plan__per { font-size: 14px; color: #787c82; }
.pp-plan__trial { font-size: 13px; color: #2e7d32; font-weight: 600; }
.pp-plan__description { font-size: 14px; color: #50575e; line-height: 1.55; flex: 1; }
.pp-plan__cta { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }

.pp-plan__btn {
	display: block;
	text-align: center;
	padding: 10px 20px;
	border-radius: 4px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	background: #f0f0f1;
	color: #1d2327;
	border: 1px solid #c3c4c7;
	transition: background .15s, color .15s;
}
.pp-plan__btn:hover { background: #dcdcde; color: #1d2327; text-decoration: none; }
.pp-plan__btn--primary { background: #0073aa; color: #fff; border-color: #0073aa; }
.pp-plan__btn--primary:hover { background: #005177; color: #fff; }
.pp-plan__btn--secondary { font-size: 13px; padding: 6px 14px; }
.pp-plan__current-label { font-size: 13px; color: #2e7d32; font-weight: 600; text-align: center; }
.pp-plan__current-label--canceled  { color: #92400e; }
.pp-plan__current-label--past-due  { color: #991b1b; }

/* ---- Layout ---- */
#pp-dashboard {
	max-width: 800px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 16px;
}

.pp-hidden { display: none !important; }

/* ---- Cards ---- */
.pp-card {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 24px 28px;
}

.pp-card h2 {
	margin: 0 0 18px;
	font-size: 16px;
	font-weight: 600;
	color: #1d2327;
	border-bottom: 1px solid #f0f0f1;
	padding-bottom: 12px;
}

/* ---- Status row ---- */
.pp-status-row { display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 20px; }
.pp-status-block { display: flex; flex-direction: column; gap: 4px; }

.pp-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #787c82;
}

.pp-value { font-size: 15px; font-weight: 500; color: #1d2327; }

/* ---- Status badges ---- */
.pp-status-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	text-transform: capitalize;
}

.pp-status-active   { background: #d1fae5; color: #065f46; }
.pp-status-future   { background: #dbeafe; color: #1e40af; }
.pp-status-canceled { background: #fef3c7; color: #92400e; }
.pp-status-past_due { background: #fee2e2; color: #991b1b; }
.pp-status-expired  { background: #fee2e2; color: #991b1b; }
.pp-status-paused   { background: #f3f4f6; color: #374151; }
.pp-status-none     { background: #f3f4f6; color: #6b7280; }
.pp-status-paid     { background: #d1fae5; color: #065f46; }
.pp-status-open     { background: #fef3c7; color: #92400e; }
.pp-status-failed   { background: #fee2e2; color: #991b1b; }
.pp-status-closed   { background: #f3f4f6; color: #6b7280; }

/* ---- Action buttons ---- */
.pp-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.pp-btn-danger { color: #d63638 !important; border-color: #d63638 !important; }
.pp-btn-danger:hover { background: #fff5f5 !important; }

.pp-btn-link {
	background: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
	color: #2271b1 !important;
	padding-left: 0 !important;
}
.pp-btn-link:hover { text-decoration: underline !important; }

/* ---- Messages ---- */
.pp-message { margin-top: 14px; font-size: 13px; min-height: 18px; }
.pp-message.pp-success { color: #1a7f37; }
.pp-message.pp-error   { color: #d63638; }

/* ---- Plans grid (dashboard) ---- */
.pp-plans-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	gap: 16px;
	margin-bottom: 8px;
}

.pp-plan-card {
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: border-color 0.15s;
}

.pp-plan-card:hover { border-color: #2271b1; }

.pp-plan-card--current { border-color: #2271b1; background: #f0f6fc; }
.pp-plan-card--current:hover { border-color: #2271b1; }

.pp-current-plan-label {
	display: inline-block;
	background: #2271b1;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 4px;
	align-self: flex-start;
}

.pp-change-summary { font-size: 15px; font-weight: 600; margin: 0 0 6px; }

.pp-plan-name  { margin: 0; font-size: 15px; font-weight: 600; }
.pp-plan-desc  { margin: 0; font-size: 13px; color: #646970; }
.pp-plan-price { font-size: 18px; font-weight: 700; color: #1d2327; }
.pp-plan-trial { font-size: 12px; color: #1a7f37; font-weight: 500; }

/* ---- Payment form ---- */
.pp-form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
	max-width: 480px;
}

.pp-form-row label { font-size: 13px; font-weight: 500; color: #1d2327; }

.pp-form-row input[type="text"],
.pp-form-row input[type="email"],
.pp-form-row input[type="password"] {
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	padding: 7px 10px;
	font-size: 14px;
	width: 100%;
	box-sizing: border-box;
}

.pp-form-row--two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	max-width: 480px;
}

.pp-form-row--two-col > div { display: flex; flex-direction: column; gap: 6px; }

/* Stripe card element host */
.pp-card-field {
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	padding: 10px 12px;
	min-height: 42px;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}

.pp-card-field--focus {
	border-color: #2271b1;
	box-shadow: 0 0 0 3px rgba( 34, 113, 177, 0.15 );
}

.pp-form-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; }

.pp-subtle { color: #646970; font-size: 13px; margin: 0 0 16px; }

/* ---- Gateway picker ---- */
.pp-gateway-picker {
	display: flex;
	gap: 14px;
	margin-bottom: 20px;
}

.pp-gateway-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 18px 12px;
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: #1d2327;
	transition: border-color .15s, box-shadow .15s;
}

.pp-gateway-btn:hover {
	border-color: #2271b1;
	box-shadow: 0 2px 8px rgba(34,113,177,.12);
}

.pp-gateway-btn--paypal { color: #003087; }

/* ---- PayPal button ---- */
.pp-btn-paypal {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	background: #ffc439;
	color: #003087;
	border: none;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s;
}

.pp-btn-paypal:hover { background: #f5b61a; }
.pp-btn-paypal:disabled { opacity: .6; cursor: not-allowed; }

/* ---- Invoice table ---- */
.pp-invoice-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.pp-invoice-table th,
.pp-invoice-table td {
	padding: 9px 12px;
	text-align: left;
	border-bottom: 1px solid #f0f0f1;
}

.pp-invoice-table th { font-weight: 600; color: #50575e; background: #f6f7f7; }
.pp-invoice-table tr:last-child td { border-bottom: none; }

.pp-mt-8 { margin-top: 8px !important; }

/* ---- Admin bar dot ---- */
.pp-ab-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 6px;
	vertical-align: middle;
	position: relative;
	top: -1px;
}
.pp-ab-dot--active   { background: #22c55e; }
.pp-ab-dot--inactive { background: #9ca3af; }

/* ---- Loading ---- */
.pp-loading { color: #646970; font-style: italic; }

@media ( max-width: 640px ) {
	.pp-status-row { gap: 16px; }
	.pp-plans-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Registration Form
   ========================================================================== */

.pp-reg-wrap {
	max-width: 560px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- Progress ---- */
.pp-reg-progress { display: flex; align-items: center; margin-bottom: 32px; }

.pp-reg-progress-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.pp-reg-step-num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #e5e7eb;
	color: #9ca3af;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, color 0.2s;
}

.pp-reg-step-label {
	font-size: 11px;
	font-weight: 500;
	color: #9ca3af;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: color 0.2s;
}

.pp-reg-progress-active .pp-reg-step-num { background: #2271b1; color: #fff; }
.pp-reg-progress-active .pp-reg-step-label { color: #2271b1; }
.pp-reg-progress-done .pp-reg-step-num { background: #22c55e; color: #fff; }
.pp-reg-progress-done .pp-reg-step-num::after { content: '✓'; }
.pp-reg-progress-done .pp-reg-step-label { color: #16a34a; }

.pp-reg-progress-line { flex: 1; height: 2px; background: #e5e7eb; margin: 0 8px; margin-bottom: 20px; }

/* ---- Panel ---- */
.pp-reg-panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 32px; }
.pp-reg-heading { margin: 0 0 24px; font-size: 20px; font-weight: 700; color: #111827; }

/* ---- Fields ---- */
.pp-reg-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.pp-reg-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.pp-reg-field label { font-size: 13px; font-weight: 600; color: #374151; }

.pp-reg-field input[type="text"],
.pp-reg-field input[type="email"],
.pp-reg-field input[type="password"] {
	border: 1px solid #d1d5db;
	border-radius: 6px;
	padding: 9px 12px;
	font-size: 15px;
	color: #111827;
	transition: border-color 0.15s, box-shadow 0.15s;
	width: 100%;
	box-sizing: border-box;
}

.pp-reg-field input:focus {
	outline: none;
	border-color: #2271b1;
	box-shadow: 0 0 0 3px rgba( 34, 113, 177, 0.15 );
}

.pp-reg-hint { font-size: 11px; color: #9ca3af; }

/* ---- Buttons ---- */
.pp-reg-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	text-decoration: none;
}

.pp-reg-btn-primary { background: #2271b1; color: #fff; border-color: #2271b1; }
.pp-reg-btn-primary:hover { background: #135e96; border-color: #135e96; color: #fff; }
.pp-reg-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.pp-reg-btn-ghost { background: transparent; color: #6b7280; border-color: #d1d5db; }
.pp-reg-btn-ghost:hover { border-color: #9ca3af; color: #374151; }

.pp-reg-arrow { font-size: 16px; }

.pp-reg-form-actions { display: flex; gap: 12px; align-items: center; margin-top: 4px; }

/* ---- Errors ---- */
.pp-reg-error {
	background: #fef2f2;
	border: 1px solid #fca5a5;
	color: #b91c1c;
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 13px;
	margin-bottom: 16px;
}

.pp-reg-error-inline { color: #b91c1c; font-size: 13px; margin-top: 8px; }

/* ---- Google SSO button ---- */
.pp-reg-google-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 11px 16px;
	background: #fff;
	border: 1px solid #dadce0;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 500;
	color: #3c4043;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(0,0,0,.08);
	transition: box-shadow 0.15s, background 0.15s;
	cursor: pointer;
	box-sizing: border-box;
	margin-bottom: 20px;
}

.pp-reg-google-btn:hover,
.pp-reg-google-btn:focus {
	background: #f8f9fa;
	box-shadow: 0 2px 6px rgba(0,0,0,.14);
	color: #3c4043;
	text-decoration: none;
}

/* ---- Divider ---- */
.pp-reg-divider { position: relative; text-align: center; margin: 0 0 20px; }
.pp-reg-divider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0; right: 0;
	height: 1px;
	background: #e5e7eb;
}
.pp-reg-divider span {
	position: relative;
	background: #fff;
	padding: 0 12px;
	font-size: 12px;
	color: #9ca3af;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ---- Alt link ---- */
.pp-reg-alt-link { margin-top: 20px; font-size: 13px; color: #6b7280; text-align: center; }

.pp-reg-notice {
	padding: 12px 16px;
	background: #f0f6fc;
	border-left: 4px solid #2271b1;
	border-radius: 0 4px 4px 0;
}

/* ---- Success ---- */
.pp-reg-success-wrap { text-align: center; padding: 16px 0; }
.pp-reg-success-icon {
	width: 64px;
	height: 64px;
	background: #dcfce7;
	color: #16a34a;
	border-radius: 50%;
	font-size: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
}

@media ( max-width: 540px ) {
	.pp-reg-two-col       { grid-template-columns: 1fr; }
	.pp-reg-panel         { padding: 20px 16px; }
	.pp-reg-form-actions  { flex-direction: column; align-items: stretch; }
	.pp-gateway-picker    { flex-direction: column; }
}

/* ==========================================================================
   Podcast card
   ========================================================================== */

.pp-podcast-url-row { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }

.pp-podcast-url-input {
	flex: 1;
	font-family: monospace;
	font-size: 12px;
	padding: 7px 10px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background: #f6f7f7;
	color: #1d2327;
	min-width: 0;
}

@media ( max-width: 640px ) {
	.pp-podcast-url-row { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Connected Accounts card
   ========================================================================== */

.pp-connections-list { display: flex; flex-direction: column; gap: 0; }

.pp-connection-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid #f0f0f1;
}

.pp-connection-row:last-child { border-bottom: none; }

.pp-connection-icon {
	width: 38px;
	height: 38px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pp-connection-info {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1;
}

.pp-connection-info strong { min-width: 80px; font-size: 14px; color: #1d2327; }
.pp-connection-status { font-size: 13px; color: #1a7f37; font-weight: 500; }
.pp-connection-status--unconfigured { color: #787c82; font-weight: 400; }

.pp-btn-connect {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	border: 2px solid transparent;
	cursor: pointer;
	transition: opacity 0.15s;
}

.pp-btn-connect:hover { opacity: 0.88; }
.pp-btn-connect--discord { background: #5865F2; color: #fff !important; border-color: #5865F2; }
.pp-btn-connect--google { background: #fff; color: #3c4043 !important; border-color: #dadce0; box-shadow: 0 1px 2px rgba(0,0,0,.1); }

@media ( max-width: 640px ) {
	.pp-connection-info { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Paywall gate
   ========================================================================== */

.pp-teaser { position: relative; overflow: hidden; }
.pp-teaser::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 80px;
	background: linear-gradient( to bottom, transparent, #fff );
	pointer-events: none;
}

.pp-paywall {
	margin: 32px 0;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #f9fafb;
	padding: 40px 24px;
	text-align: center;
}

.pp-paywall-inner { max-width: 400px; margin: 0 auto; }
.pp-paywall-icon { font-size: 40px; line-height: 1; margin-bottom: 16px; }
.pp-paywall-title { margin: 0 0 10px; font-size: 22px; font-weight: 700; color: #111827; }
.pp-paywall-desc { margin: 0 0 24px; font-size: 15px; color: #4b5563; line-height: 1.6; }
.pp-paywall-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.pp-paywall-btn {
	display: inline-block;
	padding: 12px 32px;
	background: #2271b1;
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	transition: background 0.15s;
}
.pp-paywall-btn:hover { background: #135e96; color: #fff !important; }

.pp-paywall-login { font-size: 13px; color: #6b7280; text-decoration: none; }
.pp-paywall-login:hover { color: #2271b1; text-decoration: underline; }

@media ( max-width: 480px ) {
	.pp-paywall { padding: 28px 16px; }
	.pp-paywall-title { font-size: 18px; }
}

/* ---- Dashboard tabs ---- */
.pp-tabs {
	display: flex;
	gap: 0;
	border-bottom: 2px solid #ddd;
	margin-bottom: 24px;
}

.pp-tab {
	padding: 10px 20px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	font-size: 15px;
	font-weight: 600;
	color: #555;
	cursor: pointer;
	transition: color .15s, border-color .15s;
}

.pp-tab:hover { color: #2271b1; }
.pp-tab--active { color: #2271b1; border-bottom-color: #2271b1; }

.pp-subtabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: 20px;
}

.pp-subtab {
	padding: 7px 16px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	font-size: 13px;
	font-weight: 600;
	color: #666;
	cursor: pointer;
	transition: color .15s, border-color .15s;
	text-transform: none !important;
}

.pp-subtab:hover { color: #2271b1; }
.pp-subtab--active { color: #2271b1; border-bottom-color: #2271b1; }
.pp-subtab-panel { display: block; }

.pp-form-section-heading {
	margin: 24px 0 4px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #444;
	border-bottom: 1px solid #eee;
	padding-bottom: 6px;
}

/* ---- Login [pp_login] ---- */
.pp-login-wrap {
	max-width: 440px;
	margin: 40px auto;
	padding: 36px 40px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,.07);
}

.pp-login-heading { margin: 0 0 20px; font-size: 22px; font-weight: 700; }
.pp-login-desc { margin: 0 0 20px; color: #555; }

.pp-form-field { margin-bottom: 16px; }
.pp-form-field label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 14px; }

.pp-form-field input[type="text"],
.pp-form-field input[type="email"],
.pp-form-field input[type="password"] {
	width: 100%;
	padding: 9px 12px;
	font-size: 15px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	transition: border-color .15s;
}

.pp-form-field input:focus {
	outline: none;
	border-color: #2271b1;
	box-shadow: 0 0 0 2px rgba(34,113,177,.15);
}

.pp-form-field--row { display: flex; align-items: center; justify-content: space-between; }
.pp-form-check { display: flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; }
.pp-login-forgot { font-size: 13px; color: #2271b1; text-decoration: none; }
.pp-login-forgot:hover { text-decoration: underline; }

.pp-btn {
	display: inline-block;
	padding: 10px 20px;
	font-size: 15px;
	font-weight: 600;
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s, opacity .15s;
	text-decoration: none;
}

.pp-btn:disabled { opacity: .6; cursor: default; }

.pp-btn--primary { background: #2271b1 !important; color: #fff !important; border-color: #2271b1 !important; }
.pp-btn--primary:hover:not(:disabled) { background: #135e96 !important; border-color: #135e96 !important; }

.pp-btn--danger { background: #c0392b !important; color: #fff !important; border-color: #c0392b !important; }
.pp-btn--danger:hover:not(:disabled) { background: #a93226 !important; border-color: #a93226 !important; }

.pp-btn--danger-outline,
#pp-delete-account-btn {
	display: inline-block !important;
	background: transparent !important;
	color: #c0392b !important;
	border: 2px solid #c0392b !important;
}

.pp-btn--danger-outline:hover:not(:disabled),
#pp-delete-account-btn:hover:not(:disabled) { background: #c0392b !important; color: #fff !important; }

.pp-btn--ghost { background: transparent !important; color: #555 !important; border: 1px solid #bbb !important; }
.pp-btn--ghost:hover:not(:disabled) { background: #f0f0f0 !important; }

.pp-btn--full { width: 100%; text-align: center; box-sizing: border-box; }

.pp-account-danger-zone { margin-top: 32px; padding-top: 24px; border-top: 1px solid #eee; }
.pp-account-section--danger { color: #c0392b; }

.pp-login-links { margin: 16px 0 0; text-align: center; font-size: 14px; color: #555; }
.pp-login-links a { color: #2271b1; }

.pp-login-notice,
.pp-account-notice {
	padding: 12px 16px;
	background: #f0f6fc;
	border-left: 4px solid #2271b1;
	border-radius: 3px;
}

.pp-form-message {
	padding: 10px 14px;
	border-radius: 4px;
	margin-bottom: 16px;
	font-size: 14px;
}

.pp-form-message--success { background: #edfaef; border: 1px solid #00a32a; color: #1a6b2a; }
.pp-form-message--error   { background: #fcf0f1; border: 1px solid #d63638; color: #8a1f21; }

@media ( max-width: 520px ) {
	.pp-login-wrap { padding: 24px 20px; margin: 20px 0; }
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media ( max-width: 600px ) {
	#pp-dashboard { gap: 16px; }
	.pp-card { padding: 16px 18px; }

	.pp-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}
	.pp-tabs::-webkit-scrollbar { display: none; }
	.pp-tab { white-space: nowrap; padding: 10px 14px; font-size: 14px; }

	.pp-subtabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}
	.pp-subtabs::-webkit-scrollbar { display: none; }
	.pp-subtab { white-space: nowrap; padding: 7px 12px; }

	.pp-status-row { gap: 12px; }

	.pp-form-row--two-col { grid-template-columns: 1fr; gap: 0; max-width: 100%; }

	.pp-form-actions { flex-direction: column; align-items: stretch; }
	.pp-form-actions button,
	.pp-form-actions .pp-btn { width: 100%; text-align: center; box-sizing: border-box; }

	.pp-invoice-table { font-size: 12px; }
	.pp-invoice-table th,
	.pp-invoice-table td { padding: 7px 8px; }

	.pp-actions { flex-direction: column; align-items: stretch; }
	.pp-actions button,
	.pp-actions a { width: 100%; text-align: center; box-sizing: border-box; }

	.pp-plans-grid { grid-template-columns: 1fr; }

	.pp-login-wrap { margin: 16px 0; padding: 24px 16px; border-radius: 0; border-left: none; border-right: none; }
	.pp-connection-row { flex-wrap: wrap; }
	.pp-connection-info { width: 100%; }
}

/* ---- Account profile [pp_account] ---- */
.pp-account-wrap { max-width: 560px; margin: 40px auto; }

.pp-account-section {
	margin: 28px 0 16px;
	font-size: 16px;
	font-weight: 700;
	border-bottom: 1px solid #eee;
	padding-bottom: 6px;
}

.pp-account-section:first-child { margin-top: 0; }
.pp-account-hint { margin: -8px 0 12px; font-size: 13px; color: #777; }
.pp-required { color: #d63638; margin-left: 2px; }

/* ---- Plan change confirmation card ---- */
.pp-plan-change-confirm {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	background: #fff;
	border: 2px solid #16a34a;
	border-radius: 10px;
	padding: 24px 28px;
	margin-bottom: 28px;
	box-shadow: 0 2px 12px rgba(22,163,74,0.15);
}
.pp-plan-change-confirm__icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #16a34a;
	color: #fff;
	font-size: 24px;
	line-height: 48px;
	text-align: center;
	font-weight: 700;
}
.pp-plan-change-confirm__title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
	color: #14532d;
}
.pp-plan-change-confirm__body p {
	margin: 6px 0;
	font-size: 14px;
	color: #374151;
}
.pp-plan-change-confirm__next {
	margin-top: 10px !important;
	padding-top: 10px;
	border-top: 1px solid #e5e7eb;
}

/* ---- Gateway notice in dashboard ---- */
.pp-gateway-notice {
	font-size: 13px;
	color: #646970;
	padding: 8px 12px;
	background: #f6f7f7;
	border-radius: 4px;
	margin-bottom: 12px;
}