/**
 * NMC Smart Check-In — form styles
 *
 * Covers:
 *   1. Gravity Forms field cleanup (required indicator, hidden field gaps)
 *   2. Lookup message area and loading spinner
 *   3. Mobile polish
 *
 * @package AlkhaademJemaahCRM
 */

/* =========================================================================
   1. Gravity Forms cleanup
   ========================================================================= */

/*
 * Hide the "(Required)" indicator.
 * The phone field is self-evidently required — the label just adds noise.
 */
.gform_wrapper .gfield_required {
	display: none !important;
}

/*
 * Collapse any GF "Hidden" field type wrappers — they sometimes leave a
 * phantom gap between visible fields even when the input is type="hidden".
 */
.gform_wrapper .gfield--type-hidden,
.gform_wrapper .gfield_visibility_hidden {
	display: none !important;
	margin:  0 !important;
	padding: 0 !important;
}

/*
 * Tighten the spacing between fields on mobile.
 * GF default is generous for desktop; on a phone screen it adds too much empty space.
 */
@media (max-width: 640px) {
	.gform_wrapper .gfield {
		margin-bottom: 16px !important;
	}

	.gform_wrapper .gform_body {
		padding: 0 !important;
	}
}

/*
 * Field label — use Inter, normal weight so it doesn't compete with the value.
 */
.gform_wrapper .gfield_label {
	font-family: 'Inter', sans-serif !important;
	font-size:   15px !important;
	font-weight: 500 !important;
	color:       #374151 !important;
	margin-bottom: 6px !important;
}

/*
 * Field description text (e.g. "Enter your WhatsApp number to check in.")
 */
.gform_wrapper .gfield_description {
	font-family: 'Inter', sans-serif !important;
	font-size:   13px !important;
	color:       #6b7280 !important;
	margin-top:  4px !important;
}

/*
 * Input fields — consistent radius, Inter font, soft focus ring.
 */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
	font-family:   'Inter', sans-serif !important;
	font-size:     16px !important;  /* 16px prevents iOS auto-zoom */
	border-radius: 10px !important;
	border:        1.5px solid #d1d5db !important;
	padding:       12px 14px !important;
	width:         100% !important;
	box-sizing:    border-box !important;
	transition:    border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
}

.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	border-color: #c2410c !important;
	box-shadow:   0 0 0 3px rgba(194, 65, 12, 0.12) !important;
	outline:      none !important;
}

/*
 * Submit button
 */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"] {
	font-family:   'Inter', sans-serif !important;
	font-size:     15px !important;
	font-weight:   600 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	background:    #c2410c !important;
	color:         #fff !important;
	border:        none !important;
	border-radius: 12px !important;
	padding:       16px 24px !important;
	width:         100% !important;
	cursor:        pointer !important;
	transition:    background 0.15s ease, transform 0.1s ease !important;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_page_footer input[type="submit"]:hover {
	background: #9a3412 !important;
}

.gform_wrapper .gform_footer input[type="submit"]:active,
.gform_wrapper .gform_page_footer input[type="submit"]:active {
	transform: scale(0.98) !important;
}

/*
 * Validation error message (shown after a failed submit)
 */
.gform_wrapper .gfield_error .gfield_label {
	color: #991b1b !important;
}

.gform_wrapper .validation_message {
	font-family: 'Inter', sans-serif !important;
	font-size:   13px !important;
	color:       #991b1b !important;
	margin-top:  6px !important;
}

.gform_wrapper .gfield_error input[type="text"],
.gform_wrapper .gfield_error input[type="tel"] {
	border-color: #f87171 !important;
}

/* =========================================================================
   2. Lookup message area
   ========================================================================= */

.akjcrm-lookup-message {
	display:       block;
	width:         100%;
	box-sizing:    border-box;
	padding:       12px 16px;
	border-radius: 10px;
	margin:        12px 0 4px;
	font-family:   'Inter', sans-serif;
	font-size:     14px;
	line-height:   1.6;
	border:        1px solid transparent;
}

/* Green — returning attendee recognised */
.akjcrm-msg-success {
	background-color: #d1fae5;
	border-color:     #6ee7b7;
	color:            #065f46;
}

/* Blue — new attendee, please register */
.akjcrm-msg-info {
	background-color: #dbeafe;
	border-color:     #93c5fd;
	color:            #1e40af;
}

/* Amber — lookup failed, proceed manually */
.akjcrm-msg-warning {
	background-color: #fef3c7;
	border-color:     #fcd34d;
	color:            #92400e;
}

/* Red — invalid phone format */
.akjcrm-msg-error {
	background-color: #fee2e2;
	border-color:     #fca5a5;
	color:            #991b1b;
}

/* =========================================================================
   3. Loading spinner
   ========================================================================= */

.akjcrm-spinner {
	display:          inline-block;
	width:            14px;
	height:           14px;
	border:           2px solid currentColor;
	border-top-color: transparent;
	border-radius:    50%;
	vertical-align:   middle;
	margin-right:     6px;
	animation:        akjcrm-spin 0.65s linear infinite;
}

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