/**
 * ONDA Luxury Multi-Step Registration Form & Motion System
 * Built for Bootstrap 5 & WordPress
 */

:root {
	/* Core Color Palette (Hex & HSL mappings) */
	--primary-emerald: #00805E;                  /* HSL(164, 100%, 25%) - Signature Emerald accent */
	--primary-emerald-rgb: 0, 128, 94;
	
	--secondary-sage: #377E60;                   /* HSL(154, 39%, 35%) - Secondary buttons & indicators */
	--secondary-sage-rgb: 55, 126, 96;
	
	--bg-black: #000000;                         /* Pure black base background */
	--bg-dark: #010101;                          /* Form & secondary page background */
	--surface-light: #F1F1F1;                    /* Alternate section surface background */
	
	--off-white: #F9F4F0;                        /* Alabaster/Cream primary button background */
	--white: #FFFFFF;                            /* High contrast typography & borders */
	--border-muted: #B3B3B3;                     /* Muted gray for lines, borders & labels */
	
	/* Typography Scale */
	--font-display: 'AprisReg', 'Playfair Display', Georgia, serif; /* Editorial serif */
	--font-sans: 'PPNeueMontrealBook', 'Inter', -apple-system, sans-serif; /* Grotesque sans */
	--font-sans-medium: 'PPNeueMontrealMedium', -apple-system, sans-serif;
    
	--fs-h1: 2.25rem;                            /* 36px - Display H1 / Form Titles */
	--fs-h2: 1.875rem;                           /* 30px - Page sections / Hero headings */
	--fs-h3: 1.3375rem;                          /* 21.4px - Card headings / Event listings */
	--fs-body: 1.1875rem;                        /* 15px - Default body copy */
	--fs-nav: 0.75rem;                           /* 12px - Navigation links & metadata */
	--fs-input: 0.75rem;                         /* 12px - Placeholder / Input text */
	--fs-label: 0.625rem;                        /* 10px - Form labels */
	--fs-btn-small: 0.6875rem;                   /* 11px - Primary button text */
	
	/* Structural Tokens & Motion */
	--border-radius-none: 0px;                   /* Strictly sharp corners for premium aesthetic */
	--transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	--ease-luxury: cubic-bezier(0.16, 1, 0.3, 1); /* Custom smooth deceleration easing */
	--grid-col-padding: 6.35rem;                 /* 101.6px - Symmetrical padding for alternating grid */
	
	/* Bootstrap CSS Variables Overrides */
	--bs-primary: var(--primary-emerald);
	--bs-primary-rgb: var(--primary-emerald-rgb);
	--bs-body-font-family: var(--font-sans);
	--bs-body-bg: var(--bg-black);
	--bs-body-color: var(--white);
	--bs-link-color: var(--white);
	--bs-link-hover-color: var(--primary-emerald);
	--bs-border-color: var(--border-muted);		
}

/* Base Form Container */
.onda-form-wrapper {
	background-color: var(--bg-black);
	color: var(--white);
	font-family: var(--font-sans);
	min-height: 100vh;
	padding: 40px 20px 80px 20px;
	box-sizing: border-box;
}

.onda-header-logo {
	text-align: center;
	margin-bottom: 40px;
}

.onda-brand-symbol {
	width: 50px;
	height: 50px;
	display: inline-block;
}

/* Progress Stepper */
.onda-stepper {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 600px;
	margin: 0 auto 50px auto;
	position: relative;
}

.onda-step-node {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--border-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-nav);
	color: var(--border-muted);
	background-color: var(--bg-black);
	z-index: 2;
	transition: var(--transition-smooth);
}

.onda-step-node.active, .onda-step-node.completed {
	border-color: var(--primary-emerald);
	background-color: var(--primary-emerald);
	color: var(--white);
}

.onda-step-line {
	flex: 1;
	height: 1px;
	background-color: var(--border-muted);
	margin: 0 10px;
	z-index: 1;
	transition: var(--transition-smooth);
}

.onda-step-line.active {
	background-color: var(--primary-emerald);
}

/* Page / Step Content Layout */
.onda-step-content {
	display: none;
	max-width: 850px;
	margin: 0 auto;
}

.onda-step-content.active-step {
	display: block;
}

/* Typography & Headings */
.onda-display-title {
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	font-weight: 400;
	text-align: center;
	margin-bottom: 12px;
	color: var(--white);
}

.onda-subtitle {
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	color: var(--border-muted);
	text-align: center;
	margin-bottom: 40px;
}

/* Form Inputs & Labels */
.onda-form-group {
	margin-bottom: 24px;
}

.onda-label {
	font-family: var(--font-sans);
	font-size: var(--fs-label);
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--white);
	margin-bottom: 8px;
	display: block;
	font-weight: 600;
}

.onda-input {
	background-color: transparent !important;
	border: 1px solid var(--border-muted) !important;
	border-radius: 50px !important;
	color: var(--white) !important;
	padding: 14px 24px !important;
	font-size: var(--fs-input) !important;
	font-family: var(--font-sans) !important;
	width: 100%;
	transition: var(--transition-smooth);
}

.onda-input:focus {
	border-color: var(--primary-emerald) !important;
	box-shadow: 0 0 0 0.25rem rgba(0, 128, 94, 0.25) !important;
	outline: none;
}

.onda-input::placeholder {
	color: #666666 !important;
}

.onda-textarea {
	border-radius: 20px !important;
	min-height: 100px;
}

/* Pill / Option Toggle Buttons */
.onda-pill-option {
	display: inline-block;
	padding: 12px 28px;
	border: 1px solid var(--border-muted);
	border-radius: 50px;
	color: var(--white);
	background-color: transparent;
	font-size: var(--fs-body);
	cursor: pointer;
	margin: 8px;
	transition: var(--transition-smooth);
	user-select: none;
}

.onda-pill-option:hover {
	border-color: var(--primary-emerald);
	color: var(--white);
}

.onda-pill-option.selected {
	background-color: var(--primary-emerald);
	border-color: var(--primary-emerald);
	color: var(--white);
}

/* Social Media & Dynamic Link Buttons */
.onda-social-btn {
	width: 100px;
	height: 56px;
	border: 1px solid var(--border-muted);
	border-radius: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--border-muted);
	margin-right: 12px;
	cursor: pointer;
	transition: var(--transition-smooth);
}

.onda-social-btn.selected, .onda-social-btn:hover {
	border-color: var(--primary-emerald);
	color: var(--white);
}

.onda-remove-link-btn {
	color: var(--border-muted);
	font-size: var(--fs-nav);
	cursor: pointer;
	text-decoration: underline;
	margin-left: 10px;
}

/* Primary Action Buttons */
.onda-btn-container {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 50px;
}

.onda-btn-primary {
	background-color: var(--primary-emerald);
	color: var(--white);
	border: 1px solid var(--primary-emerald);
	padding: 14px 44px;
	border-radius: 50px;
	font-size: var(--fs-btn-small);
	font-family: var(--font-sans-medium);
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition: var(--transition-smooth);
}

.onda-btn-primary:hover {
	background-color: var(--secondary-sage);
	border-color: var(--secondary-sage);
}

.onda-btn-secondary {
	background-color: transparent;
	color: var(--white);
	border: 1px solid var(--border-muted);
	padding: 14px 44px;
	border-radius: 50px;
	font-size: var(--fs-btn-small);
	font-family: var(--font-sans-medium);
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition: var(--transition-smooth);
}

.onda-btn-secondary:hover {
	border-color: var(--white);
}

.onda-btn-light {
	background-color: var(--off-white);
	color: var(--bg-black);
	border: 1px solid var(--off-white);
	padding: 16px 54px;
	border-radius: 50px;
	font-size: var(--fs-btn-small);
	font-family: var(--font-sans-medium);
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition: var(--transition-smooth);
}

.onda-btn-light:hover {
	background-color: var(--white);
}

/* Modal Dark Styling */
.modal-content.onda-dark-modal {
	background-color: #121212;
	border: 1px solid var(--border-muted);
	border-radius: 24px;
	color: var(--white);
	padding: 30px;
}

.modal-content.onda-dark-modal .btn-close {
	filter: invert(1);
}

/* Motion / Reveal System */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.reveal-up {
	animation: fadeInUp 0.8s var(--ease-luxury) forwards;
}

.reveal-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.reveal-stagger > *:nth-child(2) { animation-delay: 0.1s; }
.reveal-stagger > *:nth-child(3) { animation-delay: 0.15s; }
.reveal-stagger > *:nth-child(4) { animation-delay: 0.2s; }
.reveal-stagger > *:nth-child(5) { animation-delay: 0.25s; }
.reveal-stagger > *:nth-child(6) { animation-delay: 0.3s; }