/*
|--------------------------------------------------------------------------
| Techhub Solutions
| WhatsApp Group Join Page - Main CSS
|--------------------------------------------------------------------------
|
| File:
| assets/css/whatsapp-group/whatsapp-group.css
|
| Purpose:
| Main desktop/tablet styling for WhatsApp Group Join Page.
|
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| 01. PAGE WRAPPER
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-page {
	margin: 0;
	padding: 0;
}


/*
|--------------------------------------------------------------------------
| 02. MAIN WHATSAPP GROUP SECTION
|--------------------------------------------------------------------------
*/

.th-whatsapp-group {
	min-height: calc(100vh - 160px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 70px 20px;
	background: #F5F9FF;
}


/*
|--------------------------------------------------------------------------
| 03. CONTENT CONTAINER
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-container {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
}


/*
|--------------------------------------------------------------------------
| 04. MAIN CARD
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-card {
	position: relative;
	overflow: hidden;
	padding: 55px 60px;
	background: #FFFFFF;
	border: 1px solid #E1E8EF;
	border-radius: 18px;
	text-align: center;
	box-shadow: 0 15px 45px rgba(0, 33, 71, 0.08);
}


/*
|--------------------------------------------------------------------------
| 05. TOP ACCENT LINE
|--------------------------------------------------------------------------
|
| Theme Primary Accent:
| #F74723
|
*/

.th-whatsapp-group-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background: #F74723;
}


/*
|--------------------------------------------------------------------------
| 06. WHATSAPP ICON
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-icon {
	width: 72px;
	height: 72px;
	margin: 0 auto 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #25D366;
	color: #FFFFFF;
	font-size: 38px;
	box-shadow: 0 8px 20px rgba(37, 211, 102, 0.20);
}


/*
|--------------------------------------------------------------------------
| 07. BRAND / TAG
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-tag {
	display: inline-block;
	margin-bottom: 12px;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.4px;
	color: #F74723;
	text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| 08. MAIN HEADING
|--------------------------------------------------------------------------
|
| Theme Heading Font:
| Roboto Slab
|
*/

.th-whatsapp-group-title {
	margin: 0 0 16px;
	font-family: 'Roboto Slab', serif;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.25;
	color: #002147;
}


/*
|--------------------------------------------------------------------------
| 09. DESCRIPTION
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-description {
	max-width: 650px;
	margin: 0 auto 30px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.8;
	color: #555555;
}


/*
|--------------------------------------------------------------------------
| 10. BENEFITS BOX
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-benefits {
	max-width: 560px;
	margin: 0 auto 32px;
	padding: 20px 24px;
	background: #F5F9FF;
	border-radius: 12px;
	text-align: left;
}


/*
|--------------------------------------------------------------------------
| 11. INDIVIDUAL BENEFIT
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-benefit {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.6;
	color: #002147;
}


/*
|--------------------------------------------------------------------------
| 12. REMOVE LAST BENEFIT MARGIN
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-benefit:last-child {
	margin-bottom: 0;
}


/*
|--------------------------------------------------------------------------
| 13. BENEFIT CHECK ICON
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-benefit i {
	flex: 0 0 auto;
	font-size: 15px;
	color: #F74723;
}


/*
|--------------------------------------------------------------------------
| 14. ACTION TEXT
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-action-text {
	margin: 0 0 14px;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.6;
	color: #666666;
}


/*
|--------------------------------------------------------------------------
| 15. WHATSAPP LEAD FORM WRAPPER
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-form-wrapper {
	width: 100%;
	max-width: 520px;
	margin: 30px auto 0;
}


/*
|--------------------------------------------------------------------------
| 16. WHATSAPP LEAD FORM
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-form {
	width: 100%;
}


/*
|--------------------------------------------------------------------------
| 17. FORM FIELD
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-field {
	margin-bottom: 16px;
	text-align: left;
}


/*
|--------------------------------------------------------------------------
| 18. FORM LABEL
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-field label {
	display: block;
	margin-bottom: 7px;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	color: #002147;
}


/*
|--------------------------------------------------------------------------
| 19. FORM INPUT
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-field input {
	width: 100%;
	height: 48px;
	padding: 0 15px;
	border: 1px solid #D7E0EA;
	border-radius: 7px;
	background: #FFFFFF;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #002147;
	outline: none;
	box-sizing: border-box;
	transition: all 0.25s ease;
}


/*
|--------------------------------------------------------------------------
| 20. FORM INPUT PLACEHOLDER
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-field input::placeholder {
	color: #8A96A3;
}


/*
|--------------------------------------------------------------------------
| 21. FORM INPUT FOCUS
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-field input:focus {
	border-color: #175A99;
	box-shadow: 0 0 0 3px rgba(23, 90, 153, 0.08);
}


/*
|--------------------------------------------------------------------------
| 22. FORM HONEYPOT
|--------------------------------------------------------------------------
|
| Hidden from normal visitors.
| Used for basic spam protection.
|
*/

.th-whatsapp-group-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}


/*
|--------------------------------------------------------------------------
| 23. FORM SUBMIT BUTTON
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-submit {
	width: 100%;
	min-height: 50px;
	margin-top: 5px;
	padding: 12px 20px;
	border: none;
	border-radius: 7px;
	background: #F74723;
	color: #FFFFFF;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
	transition: all 0.25s ease;
}


/*
|--------------------------------------------------------------------------
| 24. FORM SUBMIT BUTTON HOVER
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-submit:hover {
	background: #D93618;
	transform: translateY(-1px);
	box-shadow: 0 5px 14px rgba(247, 71, 35, 0.20);
}


/*
|--------------------------------------------------------------------------
| 25. FORM SUBMIT BUTTON DISABLED
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-submit:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}


/*
|--------------------------------------------------------------------------
| 26. FORM STATUS MESSAGE
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-status {
	margin-top: 15px;
	padding: 11px 14px;
	border-radius: 6px;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	line-height: 1.6;
	text-align: center;
}


/*
|--------------------------------------------------------------------------
| 27. FORM LOADING STATUS
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-status-loading {
	background: #F5F9FF;
	color: #175A99;
}


/*
|--------------------------------------------------------------------------
| 28. FORM SUCCESS STATUS
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-status-success {
	background: #EEFAF2;
	color: #187A3D;
	border: 1px solid #CCEBD6;
}


/*
|--------------------------------------------------------------------------
| 29. FORM ERROR STATUS
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-status-error {
	background: #FFF3F1;
	color: #C62818;
	border: 1px solid #F3D0CA;
}


/*
|--------------------------------------------------------------------------
| 30. WHATSAPP JOIN BUTTON
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-button {
	min-height: 54px;
	padding: 0 25px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	border-radius: 7px;
	background: #25D366;
	color: #FFFFFF;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.2px;
	text-decoration: none;
	box-shadow: 0 8px 22px rgba(37, 211, 102, 0.22);
	transition: all 0.25s ease;
}


/*
|--------------------------------------------------------------------------
| 31. WHATSAPP BUTTON ICON
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-button i:first-child {
	font-size: 20px;
}


/*
|--------------------------------------------------------------------------
| 32. ARROW ICON
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-button i:last-child {
	font-size: 13px;
	transition: transform 0.25s ease;
}


/*
|--------------------------------------------------------------------------
| 33. BUTTON HOVER / FOCUS
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-button:hover,
.th-whatsapp-group-button:focus {
	background: #1EBE5D;
	color: #FFFFFF;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 11px 25px rgba(37, 211, 102, 0.28);
}


/*
|--------------------------------------------------------------------------
| 34. ARROW HOVER ANIMATION
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-button:hover i:last-child,
.th-whatsapp-group-button:focus i:last-child {
	transform: translateX(4px);
}


/*
|--------------------------------------------------------------------------
| 35. HIDDEN WHATSAPP BUTTON
|--------------------------------------------------------------------------
|
| WhatsApp Join button remains hidden until
| the lead is successfully submitted.
|
*/

.th-whatsapp-group-button-hidden {
	display: none !important;
}


/*
|--------------------------------------------------------------------------
| 36. BOTTOM NOTE
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-note {
	margin: 18px 0 0;
	font-family: 'Poppins', sans-serif;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.5;
	color: #999999;
}


/*
|--------------------------------------------------------------------------
| 37. ACCESSIBILITY - KEYBOARD FOCUS
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-button:focus-visible {
	outline: 3px solid rgba(23, 90, 153, 0.30);
	outline-offset: 3px;
}


/*
|--------------------------------------------------------------------------
| 38. SUBMIT BUTTON KEYBOARD FOCUS
|--------------------------------------------------------------------------
*/

.th-whatsapp-group-submit:focus-visible {
	outline: 3px solid rgba(23, 90, 153, 0.30);
	outline-offset: 3px;
}