/**
 * RSVP Elementor Widget — Form Styles
 *
 * Uses CSS custom properties extensively so Elementor
 * style controls can override every visual property.
 *
 * @package RSVP_Elementor_Widget
 * @since   1.0.0
 */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (defaults)
   ========================================================================== */

.rsvp-form-wrapper {
	/* Form Container */
	--rsvp-form-bg: #ffffff;
	--rsvp-form-radius: 16px;
	--rsvp-form-pad-top: 40px;
	--rsvp-form-pad-right: 40px;
	--rsvp-form-pad-bottom: 40px;
	--rsvp-form-pad-left: 40px;

	/* Labels */
	--rsvp-label-color: #374151;
	--rsvp-label-size: 14px;
	--rsvp-label-weight: 600;

	/* Inputs */
	--rsvp-input-bg: #f9fafb;
	--rsvp-input-border: #d1d5db;
	--rsvp-input-radius: 10px;
	--rsvp-input-color: #1f2937;
	--rsvp-input-focus: #6366f1;

	/* Radio & Checkbox Styles */
	--rsvp-choice-bg: #f9fafb;
	--rsvp-choice-border: #d1d5db;
	--rsvp-choice-radius: 8px;
	--rsvp-choice-color: #1f2937;
	--rsvp-choice-accent: #6366f1;
	--rsvp-choice-hover-bg: rgba(99, 102, 241, 0.04);

	/* Button */
	--rsvp-btn-bg: #6366f1;
	--rsvp-btn-color: #ffffff;
	--rsvp-btn-hover-bg: #4f46e5;
	--rsvp-btn-hover-color: #ffffff;
	--rsvp-btn-radius: 12px;
	--rsvp-btn-pad-top: 16px;
	--rsvp-btn-pad-right: 32px;
	--rsvp-btn-pad-bottom: 16px;
	--rsvp-btn-pad-left: 32px;
	--rsvp-btn-font-size: 16px;

	/* Messages */
	--rsvp-success-bg: #ecfdf5;
	--rsvp-success-color: #065f46;
	--rsvp-error-bg: #fef2f2;
	--rsvp-error-color: #991b1b;
}

/* ==========================================================================
   2. FORM CONTAINER
   ========================================================================== */

.rsvp-form-wrapper {
	background-color: var(--rsvp-form-bg);
	border-radius: var(--rsvp-form-radius);
	padding: var(--rsvp-form-pad-top) var(--rsvp-form-pad-right)
		var(--rsvp-form-pad-bottom) var(--rsvp-form-pad-left);
	max-width: 600px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		'Helvetica Neue', Arial, sans-serif;
	line-height: 1.6;
	position: relative;
	box-sizing: border-box;
}

.rsvp-form-wrapper *,
.rsvp-form-wrapper *::before,
.rsvp-form-wrapper *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   3. TITLE
   ========================================================================== */

.rsvp-form-title {
	font-size: 28px;
	font-weight: 700;
	color: var(--rsvp-label-color);
	text-align: center;
	margin: 0 0 32px 0;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

/* ==========================================================================
   4. FORM LAYOUT
   ========================================================================== */

.rsvp-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ==========================================================================
   5. FIELD
   ========================================================================== */

.rsvp-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rsvp-field > label {
	font-size: var(--rsvp-label-size);
	font-weight: var(--rsvp-label-weight);
	color: var(--rsvp-label-color);
	display: flex;
	align-items: center;
	gap: 4px;
}

.rsvp-required {
	color: #ef4444;
	font-weight: 700;
}

/* ==========================================================================
   6. TEXT & NUMBER INPUTS
   ========================================================================== */

.rsvp-form input[type='text'],
.rsvp-form input[type='number'],
.rsvp-form textarea {
	width: 100%;
	padding: 12px 16px;
	font-size: 15px;
	font-family: inherit;
	color: var(--rsvp-input-color);
	background-color: var(--rsvp-input-bg);
	border: 1.5px solid var(--rsvp-input-border);
	border-radius: var(--rsvp-input-radius);
	outline: none;
	transition: border-color 0.25s ease, box-shadow 0.25s ease,
		background-color 0.25s ease;
	-moz-appearance: textfield;
}

.rsvp-form input[type='number']::-webkit-inner-spin-button,
.rsvp-form input[type='number']::-webkit-outer-spin-button {
	opacity: 1;
	height: 32px;
}

.rsvp-form input[type='text']:focus,
.rsvp-form input[type='number']:focus,
.rsvp-form textarea:focus {
	border-color: var(--rsvp-input-focus);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
	background-color: #ffffff;
}

.rsvp-form input[type='text']::placeholder,
.rsvp-form textarea::placeholder {
	color: #9ca3af;
	font-weight: 400;
}

/* ==========================================================================
   7. TEXTAREA
   ========================================================================== */

.rsvp-form textarea {
	resize: vertical;
	min-height: 80px;
}

/* ==========================================================================
   8. CUSTOM RADIO BUTTONS
   ========================================================================== */

.rsvp-radio-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 4px;
}

.rsvp-radio {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	padding: 12px 16px;
	border: 1.5px solid var(--rsvp-choice-border);
	border-radius: var(--rsvp-choice-radius);
	background-color: var(--rsvp-choice-bg);
	transition: all 0.25s ease;
	user-select: none;
}

.rsvp-radio:hover {
	border-color: var(--rsvp-choice-accent);
	background-color: var(--rsvp-choice-hover-bg);
}

/* Hide native radio */
.rsvp-radio input[type='radio'] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Custom radio circle */
.rsvp-radio-mark {
	position: relative;
	width: 20px;
	height: 20px;
	min-width: 20px;
	border: 2px solid var(--rsvp-choice-border);
	border-radius: 50%;
	transition: all 0.25s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rsvp-radio-mark::after {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--rsvp-choice-accent);
	transform: scale(0);
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.rsvp-radio input[type='radio']:checked ~ .rsvp-radio-mark {
	border-color: var(--rsvp-choice-accent);
}

.rsvp-radio input[type='radio']:checked ~ .rsvp-radio-mark::after {
	transform: scale(1);
}

.rsvp-radio input[type='radio']:checked ~ .rsvp-radio-label {
	color: var(--rsvp-choice-accent);
	font-weight: 600;
}

.rsvp-radio input[type='radio']:focus ~ .rsvp-radio-mark {
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.rsvp-radio-label {
	font-size: 15px;
	color: var(--rsvp-choice-color);
	transition: color 0.25s ease, font-weight 0.25s ease;
}

/* ==========================================================================
   9. CUSTOM CHECKBOXES
   ========================================================================== */

.rsvp-checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 4px;
}

.rsvp-checkbox {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	padding: 12px 16px;
	border: 1.5px solid var(--rsvp-choice-border);
	border-radius: var(--rsvp-choice-radius);
	background-color: var(--rsvp-choice-bg);
	transition: all 0.25s ease;
	user-select: none;
}

.rsvp-checkbox:hover {
	border-color: var(--rsvp-choice-accent);
	background-color: var(--rsvp-choice-hover-bg);
}

/* Hide native checkbox */
.rsvp-checkbox input[type='checkbox'] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Custom checkbox square */
.rsvp-checkbox-mark {
	position: relative;
	width: 20px;
	height: 20px;
	min-width: 20px;
	border: 2px solid var(--rsvp-choice-border);
	border-radius: 5px;
	transition: all 0.25s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rsvp-checkbox-mark::after {
	content: '';
	width: 6px;
	height: 10px;
	border: solid #ffffff;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg) scale(0);
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	margin-top: -2px;
}

.rsvp-checkbox input[type='checkbox']:checked ~ .rsvp-checkbox-mark {
	background-color: var(--rsvp-choice-accent);
	border-color: var(--rsvp-choice-accent);
}

.rsvp-checkbox input[type='checkbox']:checked ~ .rsvp-checkbox-mark::after {
	transform: rotate(45deg) scale(1);
}

.rsvp-checkbox input[type='checkbox']:checked ~ .rsvp-checkbox-label {
	color: var(--rsvp-choice-accent);
	font-weight: 600;
}

.rsvp-checkbox input[type='checkbox']:focus ~ .rsvp-checkbox-mark {
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.rsvp-checkbox-label {
	font-size: 15px;
	color: var(--rsvp-input-color);
	transition: color 0.25s ease, font-weight 0.25s ease;
}

/* ==========================================================================
   10. CONDITIONAL FIELDS — SLIDE ANIMATION
   ========================================================================== */

.rsvp-conditional-fields {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.4s ease 0.1s;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.rsvp-conditional-fields.rsvp-visible {
	max-height: 2000px;
	opacity: 1;
	display: flex;
}

/* ==========================================================================
   11. SUBMIT BUTTON
   ========================================================================== */

.rsvp-submit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: var(--rsvp-btn-pad-top) var(--rsvp-btn-pad-right)
		var(--rsvp-btn-pad-bottom) var(--rsvp-btn-pad-left);
	font-size: var(--rsvp-btn-font-size);
	font-weight: 600;
	font-family: inherit;
	color: var(--rsvp-btn-color);
	background-color: var(--rsvp-btn-bg);
	border: none;
	border-radius: var(--rsvp-btn-radius);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	letter-spacing: 0.02em;
	margin-top: 8px;
	text-transform: none;
	line-height: 1.4;
}



.rsvp-submit-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(99, 102, 241, 0.35);
	color: var(--rsvp-btn-hover-color);
	background-color: var(--rsvp-btn-hover-bg);
}



.rsvp-submit-btn:active {
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.rsvp-btn-text,
.rsvp-btn-loader {
	position: relative;
	z-index: 1;
}

/* Loading state */
.rsvp-submit-btn.rsvp-loading {
	pointer-events: none;
	opacity: 0.85;
}

.rsvp-submit-btn.rsvp-loading .rsvp-btn-text {
	opacity: 0;
}

.rsvp-submit-btn.rsvp-loading .rsvp-btn-loader {
	display: flex !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.rsvp-btn-loader {
	display: none;
}

.rsvp-spinner {
	width: 24px;
	height: 24px;
	animation: rsvp-spin 0.8s linear infinite;
}

@keyframes rsvp-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   12. SUCCESS MESSAGE
   ========================================================================== */

.rsvp-success {
	text-align: center;
	padding: 40px 24px;
	background-color: var(--rsvp-success-bg);
	border-radius: var(--rsvp-form-radius);
	animation: rsvp-fade-in 0.6s ease;
}

.rsvp-success-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	color: var(--rsvp-success-color);
}

.rsvp-success-icon svg {
	width: 100%;
	height: 100%;
}

/* Checkmark circle animation */
.rsvp-checkmark-circle {
	stroke-dasharray: 157;
	stroke-dashoffset: 157;
	animation: rsvp-circle-draw 0.6s ease forwards;
}

/* Checkmark path animation */
.rsvp-checkmark-check {
	stroke-dasharray: 50;
	stroke-dashoffset: 50;
	animation: rsvp-check-draw 0.4s ease 0.4s forwards;
}

@keyframes rsvp-circle-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes rsvp-check-draw {
	to {
		stroke-dashoffset: 0;
	}
}

.rsvp-success-text {
	font-size: 17px;
	font-weight: 600;
	color: var(--rsvp-success-color);
	margin: 0;
	line-height: 1.5;
}

/* ==========================================================================
   13. ERROR MESSAGE
   ========================================================================== */

.rsvp-error {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	background-color: var(--rsvp-error-bg);
	border-radius: var(--rsvp-input-radius);
	animation: rsvp-fade-in 0.4s ease;
	margin-top: 16px;
}

.rsvp-error-icon {
	width: 24px;
	height: 24px;
	min-width: 24px;
	color: var(--rsvp-error-color);
}

.rsvp-error-icon svg {
	width: 100%;
	height: 100%;
}

.rsvp-error-text {
	font-size: 14px;
	font-weight: 500;
	color: var(--rsvp-error-color);
	margin: 0;
	line-height: 1.4;
}

/* ==========================================================================
   14. FIELD ERROR STATE
   ========================================================================== */

.rsvp-field-error {
	font-size: 12px;
	color: var(--rsvp-error-color);
	min-height: 0;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
	display: block;
}

.rsvp-field.rsvp-has-error .rsvp-field-error {
	max-height: 30px;
	opacity: 1;
	margin-top: 2px;
}

.rsvp-field.rsvp-has-error input[type='text'],
.rsvp-field.rsvp-has-error input[type='number'],
.rsvp-field.rsvp-has-error textarea {
	border-color: #ef4444;
	background-color: #fef2f2;
}

.rsvp-field.rsvp-has-error .rsvp-radio,
.rsvp-field.rsvp-has-error .rsvp-checkbox {
	border-color: #ef4444;
}

/* ==========================================================================
   15. ANIMATIONS
   ========================================================================== */

@keyframes rsvp-fade-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes rsvp-shake {
	0%,
	100% {
		transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateX(-4px);
	}
	20%,
	40%,
	60%,
	80% {
		transform: translateX(4px);
	}
}

.rsvp-shake {
	animation: rsvp-shake 0.5s ease;
}

/* Field entrance animation */
.rsvp-field {
	animation: rsvp-fade-in 0.4s ease;
}

/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

@media (max-width: 600px) {
	.rsvp-form-wrapper {
		--rsvp-form-pad-top: 24px;
		--rsvp-form-pad-right: 20px;
		--rsvp-form-pad-bottom: 24px;
		--rsvp-form-pad-left: 20px;
		border-radius: 12px;
	}

	.rsvp-form-title {
		font-size: 22px;
		margin-bottom: 24px;
	}

	.rsvp-form {
		gap: 18px;
	}

	.rsvp-form input[type='text'],
	.rsvp-form input[type='number'],
	.rsvp-form textarea {
		padding: 10px 14px;
		font-size: 14px;
	}

	.rsvp-radio,
	.rsvp-checkbox {
		padding: 10px 14px;
		gap: 10px;
	}

	.rsvp-radio-label,
	.rsvp-checkbox-label {
		font-size: 14px;
	}

	.rsvp-submit-btn {
		font-size: 15px;
	}

	.rsvp-success {
		padding: 28px 16px;
	}

	.rsvp-success-icon {
		width: 48px;
		height: 48px;
	}

	.rsvp-success-text {
		font-size: 15px;
	}
}

/* ==========================================================================
   17. CUSTOM FIELD CONTAINERS
   ========================================================================== */

.rsvp-custom-fields {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.rsvp-custom-fields:empty {
	display: none;
}

/* ==========================================================================
   18. NUMBER INPUT ENHANCEMENTS
   ========================================================================== */

.rsvp-field-adults input[type='number'],
.rsvp-field-children input[type='number'] {
	max-width: 140px;
	text-align: center;
	font-weight: 600;
	font-size: 16px;
}

/* ==========================================================================
   19. LOADING OVERLAY (for custom field fetch)
   ========================================================================== */

.rsvp-fields-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 20px;
	color: #9ca3af;
	font-size: 14px;
}

.rsvp-fields-loading .rsvp-spinner {
	width: 18px;
	height: 18px;
	color: #9ca3af;
}

/* ==========================================================================
   20. PRINT
   ========================================================================== */

@media print {
	.rsvp-submit-btn {
		display: none;
	}
}

/* ==========================================================================
   BUTTON STYLE RADIO (CUSTOM STYLE)
   ========================================================================== */
.rsvp-radio-style-button .rsvp-radio-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
}

.rsvp-radio-style-button .rsvp-radio {
    flex: 1;
    justify-content: center;
    border: 1px solid var(--rsvp-choice-border);
    border-radius: var(--rsvp-choice-radius, 8px);
    padding: 14px 20px;
    background: var(--rsvp-choice-bg);
    transition: all 0.3s ease;
    text-align: center;
}

.rsvp-radio-style-button .rsvp-radio:hover {
    border-color: var(--rsvp-choice-accent);
    background-color: var(--rsvp-choice-hover-bg, rgba(0,0,0,0.02));
}

.rsvp-radio-style-button .rsvp-radio-mark {
    display: none; /* Hide the circle */
}

.rsvp-radio-style-button .rsvp-radio-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
}

/* Checked state */
.rsvp-radio-style-button .rsvp-radio:has(input[type='radio']:checked) {
    border-color: var(--rsvp-choice-accent);
    background-color: var(--rsvp-choice-hover-bg, rgba(0,0,0,0.05));
    box-shadow: 0 0 0 1px var(--rsvp-choice-accent);
}

.rsvp-radio-style-button .rsvp-radio input[type='radio']:checked ~ .rsvp-radio-label {
    color: var(--rsvp-choice-accent);
}