/*
 * Peterite Connect Registration — public styles.
 * Bootstrap 5 handles layout/utilities; this file only carries the design
 * tokens and the handful of visual details Bootstrap utilities can't express.
 */

.pcr {
	--pcr-navy: #051435;
	--pcr-navy-800: #0f172a;
	--pcr-blue: #083f88;
	--pcr-gold: #ffc113;
	--pcr-gray-600: #475569;
	--pcr-gray-400: #94a3b8;
	--pcr-gray-200: #e2e8f0;
	--pcr-gray-50: #fafafa;
	--pcr-green: #10b981;

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--pcr-navy-800);
	background: #fff;
}

.pcr h1,
.pcr h2,
.pcr h3,
.pcr .pcr-heading-xl,
.pcr .pcr-heading-lg,
.pcr .pcr-heading-sm {
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 800;
	color: var(--pcr-navy-800);
}

.pcr-heading-xl {
	font-size: 1.75rem;
	line-height: 1.2;
}

.pcr-heading-lg {
	font-size: 2.5rem;
	line-height: 1.1;
}

.pcr-heading-sm {
	font-size: 1.5rem;
	line-height: 1.2;
}

.pcr-heading-gold {
	color: var(--pcr-gold);
}

.pcr-eyebrow {
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: 0.875rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--pcr-blue);
}

.pcr-lead {
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--pcr-gray-600);
}

.pcr-body {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--pcr-gray-600);
}

.pcr-text-light {
	color: var(--pcr-gray-200);
}

@media (min-width: 992px) {
	.pcr-heading-xl {
		font-size: 2.5rem;
	}
}

/* Bootstrap's .container only gives 0.75rem (12px) of gutter on each side by
   default, which reads as cramped on phones/tablets where content otherwise
   sits flush against the screen edge. */
.pcr .container {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}
@media (min-width: 768px) {
	.pcr .container {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

/* Hero */
.pcr-hero {
	min-height: 560px;
	background-image: url('../images/hero-network-bg.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.pcr-hero-logo {
	max-width: 320px;
	width: 100%;
	height: auto;
}

/* Buttons */
.pcr-btn-gold {
	background-color: var(--pcr-gold);
	color: var(--pcr-navy);
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	border-radius: 12px;
	border: none;
}
.pcr-btn-gold:hover,
.pcr-btn-gold:focus {
	background-color: #e6ac0f;
	color: var(--pcr-navy);
}
.pcr-btn-gold:disabled {
	background-color: var(--pcr-gray-200);
	color: var(--pcr-gray-400);
}

.pcr-btn-outline-navy {
	background: transparent;
	color: var(--pcr-navy-800);
	border: 1px solid var(--pcr-navy-800);
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	border-radius: 12px;
}
.pcr-btn-outline-navy:hover,
.pcr-btn-outline-navy:focus {
	background-color: var(--pcr-navy-800);
	color: #fff;
}

.pcr-btn-verify {
	border: 1px solid var(--pcr-blue);
	color: var(--pcr-blue);
	background: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
}
.pcr-btn-verify:hover,
.pcr-btn-verify:focus {
	background-color: var(--pcr-blue);
	color: #fff;
}
.pcr-btn-verify:disabled {
	opacity: 0.6;
}

/* About */
.pcr-about-photo {
	aspect-ratio: 13 / 15;
	background-color: var(--pcr-gray-200);
}
.pcr-about-photo img {
	object-fit: cover;
}

/* Why join */
.pcr-why-join {
	background-color: var(--pcr-navy);
}

.pcr-why-join .pcr-heading-lg {
	color: var(--pcr-gold);
}

.pcr-feature-card {
	background-color: #fff;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.03);
}

.pcr-feature-icon {
	width: 64px;
	height: 64px;
	background-color: rgba(255, 193, 19, 0.75);
	font-size: 1.75rem;
	color: var(--pcr-navy);
}

/* Registration form */
.pcr-registration-section {
	background-color: var(--pcr-gray-50);
}

.pcr-form-card {
	background-color: #fff;
	border: 1px solid var(--pcr-gray-200);
	box-shadow: 0 40px 40px rgba(5, 20, 53, 0.08);
}

.pcr-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--pcr-navy-800);
}

.pcr-required {
	color: #dc3545;
	font-weight: 700;
}

.pcr-input {
	border: 1px solid var(--pcr-gray-200);
	border-radius: 8px;
	min-height: 52px;
	/* iOS Safari auto-zooms the whole page on focus of any input with a
	   computed font-size under 16px - keep this at/above that threshold. */
	font-size: 1rem;
}
.pcr-input:focus {
	border-color: var(--pcr-blue);
	box-shadow: 0 0 0 0.2rem rgba(8, 63, 136, 0.15);
}
.pcr-input.is-invalid {
	border-color: #dc3545;
}

/* intl-tel-input renders its own wrapper around #pcr-mobile; Bootstrap's
   .form-control is display:block/100% width but the wrapper defaults to
   inline-block, so it needs to be forced to fill the column. */
.iti {
	display: block;
	width: 100%;
}

.pcr-verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: rgba(16, 185, 129, 0.08);
	color: var(--pcr-green);
	border-radius: 100px;
	padding: 4px 10px;
	font-size: 0.75rem;
	font-weight: 600;
}

.pcr-helper-text {
	font-size: 0.8125rem;
	color: var(--pcr-gray-400);
}

.invalid-feedback {
	font-size: 0.8125rem;
}

.pcr-terms-icon {
	color: var(--pcr-gray-400);
	font-size: 1rem;
	line-height: 1.6;
}

.pcr-terms-text {
	font-size: 0.8125rem;
	color: var(--pcr-gray-400);
}

/* Footer */
.pcr-footer {
	background-color: var(--pcr-navy);
	color: var(--pcr-gray-400);
}
.pcr-footer-text {
	color: var(--pcr-gray-400);
}
.pcr-footer-link {
	color: var(--pcr-gray-400);
	text-decoration: none;
}
.pcr-footer-link:hover {
	color: #fff;
}

/* Modals */
.pcr-modal {
	border-radius: 20px;
	border: none;
}

.pcr-modal .modal-header,
.pcr-modal .modal-body,
.pcr-modal .modal-footer {
	padding: 1.5rem 2rem;
}
.pcr-modal .modal-header {
	padding-bottom: 0.75rem;
}
.pcr-modal .modal-body {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.pcr-modal .modal-footer {
	padding-top: 0.75rem;
}

.pcr-otp-boxes {
	margin: 0 auto 8px;
}

.pcr-otp-box {
	width: 56px;
	height: 56px;
	padding: 0;
	flex: 0 0 56px;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
}

/* On narrow phones, 6 boxes at 48px plus the modal's own 2rem side padding
   can exceed the viewport (e.g. ~392px needed vs. ~304px available on a
   320px-wide screen), overflowing or wrapping the code entry row. Shrink
   both the modal padding and the boxes themselves below the sm breakpoint. */
@media (max-width: 575.98px) {
	.pcr-modal .modal-header,
	.pcr-modal .modal-body,
	.pcr-modal .modal-footer {
		padding: 1.25rem 1rem;
	}
	.pcr-otp-box {
		width: 46px;
		height: 46px;
		flex: 0 0 46px;
		font-size: 1.25rem;
	}
	.pcr-otp-boxes.gap-2 {
		gap: 6px;
	}
	/* "Copy Code" / "Open WhatsApp" side by side get too cramped for their
	   text at this width - stack them instead of letting them wrap unevenly. */
	.pcr-whatsapp-actions {
		flex-direction: column;
	}
}

.pcr-btn-link {
	color: var(--pcr-blue);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
}
.pcr-btn-link:hover:not(:disabled) {
	text-decoration: underline;
}
.pcr-btn-link:disabled {
	color: var(--pcr-gray-400);
	opacity: 1;
}

.pcr-whatsapp-code-box {
	background-color: rgba(255, 193, 19, 0.1);
	border: 1px dashed var(--pcr-gold);
}

.pcr-whatsapp-code {
	font-family: 'Manrope', monospace;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 2px;
	color: var(--pcr-navy-800);
}

.pcr-whatsapp-steps {
	color: var(--pcr-gray-600);
	padding-left: 1.25rem;
}