/* SuchitraACS Enrollment — front-end form styles */

.sacs-form-wrap {
	max-width: 720px;
	margin: 24px auto;
	font-family: inherit;
}

.sacs-form {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.06 );
}

.sacs-form-header { text-align: center; margin-bottom: 8px; }
.sacs-form-header h3 { margin: 0 0 4px; font-size: 22px; line-height: 1.25; }
.sacs-form-header .sacs-sub { margin: 0; color: #777; font-size: 14px; }

.sacs-progress {
	height: 6px;
	background: #eef0f3;
	border-radius: 4px;
	overflow: hidden;
	margin: 16px 0 24px;
}
.sacs-progress-bar {
	display: block;
	height: 100%;
	background: linear-gradient( 90deg, #7c3aed, #a855f7 );
	transition: width 0.4s ease;
}

.sacs-section {
	border: none;
	border-top: 1px solid #f0f0f0;
	margin: 0 0 8px;
	padding: 18px 0 4px;
}
.sacs-section legend {
	font-weight: 700;
	font-size: 16px;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.sacs-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #7c3aed;
	color: #fff;
	font-size: 13px;
}

.sacs-field { margin: 14px 0; }
.sacs-field > label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 14px;
}
.sacs-req { color: #e02424; }
.sacs-hint { display: block; color: #888; font-size: 12px; margin-top: 4px; }

.sacs-form input[type="text"],
.sacs-form input[type="email"],
.sacs-form input[type="tel"],
.sacs-form input[type="file"],
.sacs-form textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid #d4d4d8;
	border-radius: 8px;
	font-size: 15px;
	box-sizing: border-box;
	background: #fff;
}
.sacs-form input:focus,
.sacs-form textarea:focus {
	outline: none;
	border-color: #7c3aed;
	box-shadow: 0 0 0 3px rgba( 124, 58, 237, 0.15 );
}

.sacs-radio-row { display: flex; flex-wrap: wrap; gap: 14px; }
.sacs-radio { font-weight: 500; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.sacs-pay-option {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	border: 1.5px solid #e4e4e7;
	border-radius: 10px;
	padding: 14px;
	margin: 10px 0;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}
.sacs-pay-option:hover { border-color: #c4b5fd; }
.sacs-pay-option input { margin-top: 3px; }
.sacs-pay-body strong { display: block; font-size: 15px; }
.sacs-pay-body small { color: #6b7280; font-size: 13px; }

.sacs-emi-declaration {
	background: #fff7ed;
	border: 1px solid #fed7aa;
	border-radius: 8px;
	padding: 14px;
	margin-top: 8px;
}
.sacs-decl-text { font-size: 13px; color: #7c2d12; margin: 0 0 10px; }

.sacs-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; cursor: pointer; }
.sacs-check input { margin-top: 3px; }

.sacs-reveal-row { text-align: center; margin: 18px 0; }
.sacs-reveal-hint { font-size: 12px; color: #888; margin-top: 8px; }

.sacs-payment-block { background: #fafafa; border-radius: 10px; padding: 18px; margin-top: 12px; border-top: none; }
.sacs-pay-amount {
	font-size: 16px;
	margin-bottom: 12px;
	padding: 10px 14px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: 8px;
}
.sacs-pay-amount strong { color: #047857; font-size: 20px; }

.sacs-pay-instructions { font-size: 13px; color: #444; margin-bottom: 14px; }
.sacs-pay-instructions p { margin: 0 0 8px; }

.sacs-pay-methods { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.sacs-pay-card {
	flex: 1 1 240px;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	padding: 14px;
}
.sacs-pay-card h4 { margin: 0 0 10px; font-size: 15px; }
.sacs-pay-card ul { list-style: none; margin: 0; padding: 0; }
.sacs-pay-card li { font-size: 14px; padding: 4px 0; border-bottom: 1px dashed #eee; }
.sacs-copy { cursor: pointer; border-bottom: 1px dotted #7c3aed; }
.sacs-copy:hover { color: #7c3aed; }

.sacs-qr { text-align: center; margin-top: 12px; }
.sacs-qr img { max-width: 180px; height: auto; border: 1px solid #eee; border-radius: 8px; padding: 6px; background: #fff; }
.sacs-qr small { display: block; color: #888; font-size: 12px; margin-top: 6px; }

.sacs-consent { background: #f9fafb; border: 1px solid #eee; border-radius: 8px; padding: 14px; }

.sacs-btn {
	display: inline-block;
	background: #7c3aed;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.2s, transform 0.05s;
}
.sacs-btn:hover { background: #6d28d9; color: #fff; }
.sacs-btn:active { transform: translateY( 1px ); }
.sacs-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.sacs-btn-lg { padding: 14px 28px; font-size: 16px; width: 100%; }
.sacs-enroll-cta { margin: 16px 0; }

.sacs-submit-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }

.sacs-spinner {
	width: 22px; height: 22px;
	border: 3px solid #ddd;
	border-top-color: #7c3aed;
	border-radius: 50%;
	animation: sacs-spin 0.7s linear infinite;
}
@keyframes sacs-spin { to { transform: rotate( 360deg ); } }

.sacs-message { margin-top: 16px; padding: 12px 16px; border-radius: 8px; font-size: 14px; }
.sacs-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.sacs-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }

.sacs-success { text-align: center; padding: 30px 20px; }
.sacs-success-icon {
	width: 64px; height: 64px;
	margin: 0 auto 16px;
	background: #10b981;
	color: #fff;
	border-radius: 50%;
	font-size: 34px;
	line-height: 64px;
}
.sacs-success h3 { margin: 0 0 10px; font-size: 22px; }
.sacs-success .sacs-code { font-size: 16px; background: #f3f4f6; display: inline-block; padding: 8px 16px; border-radius: 8px; }

.sacs-support { text-align: center; margin-top: 14px; font-size: 14px; color: #555; }
.sacs-support a { color: #7c3aed; font-weight: 600; }

.sacs-notice { padding: 14px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; color: #92400e; }

.sacs-hidden { display: none !important; }

/* Honeypot — visually hidden but not display:none (bots skip display:none) */
.sacs-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media ( max-width: 600px ) {
	.sacs-form { padding: 16px; border-radius: 10px; }
	.sacs-pay-methods { flex-direction: column; }
	.sacs-radio-row { flex-direction: column; gap: 8px; }
}