/**
 * System Register Regular - Custom Styles
 * Separated from system-register-regular.php for better organization
 */

.compo-qualify-type-btns {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 12px !important;
		margin: 0 !important;
	}

	.compo-qualify-type-btns .btn {
		width: calc(50% - 6px) !important;
		height: 141px !important;
		min-width: 192px !important;
		max-width: calc(50% - 6px) !important;
		border-width: 1px !important;
		opacity: 1 !important;
		padding: 16px 15px !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
	}
	
	@media (max-width: 768px) {
		.compo-qualify-type-btns .btn {
			width: 100% !important;
			max-width: 100% !important;
			min-width: 100% !important;
		}
	}

.register-modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		display: none;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.register-modal-overlay.active {
		display: flex;
	}

	/* Modal box */
	.register-modal {
		background: #fff;
		width: 100%;
		max-width: 569px;
		padding: 90px 0;
		max-height: 90vh;
		overflow-y: auto;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
		animation: fadeIn 0.3s ease;
	}

	.register-modal-text {
		color: #00194D;
		text-align: center;
		font-size: 32px;
		font-style: normal;
		font-weight: 300;
		line-height: normal;
	}

	.register-modal-text .bold {
		font-weight: 700;
	}

	.register-modal-btn {
		display: flex;
		width: 244px !important;
		min-height: 60px;
		padding: 18px 10px !important;
		justify-content: center;
		align-items: center;
		gap: 10px;
		margin: auto;
		flex-shrink: 0;
	}


	.done-icon {
		width: 69px;
		height: 69px;
		flex-shrink: 0;
	}

	.confirm-btn {
		/* display: flex; */
		width: 144px;
		padding: 10px 10px;
		margin-top: 20px;
		justify-content: center;
		align-items: center;
		gap: 10px;
		flex-shrink: 0;
		background: #3734F0;
		color: #fff;
	}

	@keyframes fadeIn {
		from {
			transform: translateY(-20px);
			opacity: 0;
		}

		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.register-modal-header {
		padding: 16px;
		border-bottom: 1px solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.register-modal-header h2 {
		margin: 0;
		font-size: 18px;
	}

	.register-close-button {
		cursor: pointer;
		font-size: 20px;
		border: none;
		background: transparent;
	}

	.register-modal-content {
		padding: 20px;
		text-align: center;
	}

	.grouped-tab {
		display: flex;
		align-items: center;
		align-self: stretch;
		border-radius: 8px;
		border: 1px solid #CED1DA;
		height: 47px;
	}

	.grouped-tab .compo-tab {
		display: flex;
		padding: 14px 12px;
		justify-content: center;
		align-items: center;
		gap: 8px;
		flex: 1 0 0;
		border-radius: 8px;
		cursor: pointer;
		transition: all 0.3s ease;
		height: 47px;
		width: 50%;
	}

	.grouped-tab .compo-tab.active {
		border: 1px solid #0043E6;
		background: #EBF1FF;
	}

	.grouped-tab .compo-tab.active span {
		color: #0043E6;
	}

	.grouped-tab .compo-tab span {
		color: #31475D;
		font-size: 14px;
		font-weight: 500;
		line-height: normal;
		transition: color 0.3s ease;
	}

	.compo-radio .text::before {
		width: 20px !important;
		height: 20px !important;
	}

	.compo-radio .text {
		font-size: 14px !important;
	}

	#system .row-content .step-button {
		display: flex;
		justify-content: center;
		gap: 12px !important;
	}

	.step-button button {
		max-width: 310px !important;
	}

	.step-button button.full {
		max-width: 100% !important;
	}

	#system.system-register .row-content .step-radio-row .col-cont .compo-radio:not(:last-child) {
		margin-right: 0 !important
	}

	.col-tit.bold {
		font-size: 14px !important;
		color: #00194D !important;
		font-weight: 700;
		line-height: 150%;
	}

	.step {
		padding: 0 !important;
	}

	.note-section {
		background: #F0F4F8;
		width: 100%;
		padding: 32px;
		padding-left: 52px;
		margin-top: 36px !important;
	}

	.note-section ol {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 16px;
		list-style: auto;
	}

	.note-section ul {
		margin-left: 24px;
		margin-top: 8px;
		list-style: disc;
	}

	.note-section ul li,
	.note-section ol li {
		color: #00194D;
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		line-height: 25px;
	}

	#system .row-content .step-button {
		margin-top: 48px !important;
	}

	.download {
		display: flex;
		height: 40px;
		width: fit-content;
		padding: 0 20px;
		justify-content: center;
		align-items: center;
		gap: 8px;
		border-radius: 9999px;
		border: 1px solid #0043E6;
		margin-bottom: 20px;
		color: #0043E6;
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
	}

	.comp-agree-cont {
		margin-top: 32px;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}


	@media (max-width: 500px) {
		#system .row-content .step-button {
			flex-direction: column;
			align-items: center;
		}

		.step-button button {
			width: 100% !important;
		}

		.note-section {
			padding: 16px;
			padding-left: 32px;
		}
	}

	.ui-datepicker .ui-datepicker-title {
		margin: 2px;
	}

	.compo-input.has-text-btn .compo-input-value {
		padding-right: 1px;
	}

	#major_name:not([type=file], .success)[disabled] {
		border-color: #9ea6bc !important;
		color: #9ea6bc !important;
	}

	#major_name:not([type=file], .success)[disabled]::placeholder {
		color: #9ea6bc !important;
	}

	#major_acquisition_year:not([type=file], .success)[disabled] {
		border-color: #9ea6bc !important;
		color: #9ea6bc !important;
	}


	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	}

	.modal-content {
		background: white;
		border-radius: 12px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
		max-width: 400px;
		width: 90%;
		overflow: hidden;
		animation: slideUp 0.3s ease-out;
	}

	@keyframes slideUp {
		from {
			transform: translateY(30px);
			opacity: 0;
		}

		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.modal-header {
		background-color: rgba(0, 67, 230, .8);
		color: white;
		padding: 24px;
		text-align: center;
	}

	.modal-header h2 {
		margin: 0;
		font-size: 20px;
		font-weight: 600;
	}

	.modal-body {
		padding: 32px 24px;
	}

	.payment-info {
		background: #f8f9fa;
		border-radius: 8px;
		padding: 20px;
		margin-bottom: 16px;
	}

	.alert-info {
		background: #e8f4f8;
		border-left: 4px solid #3498db;
		border-radius: 4px;
		padding: 16px;
		margin-bottom: 16px;
	}

	.alert-info p {
		margin: 0;
		color: #2c3e50;
		font-size: 14px;
		line-height: 1.6;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #e9ecef;
	}

	.info-row:last-child {
		border-bottom: none;
	}

	.info-row .label {
		font-weight: 500;
		color: #495057;
		font-size: 14px;
	}

	.info-row .value {
		font-weight: 600;
		color: #212529;
		font-size: 16px;
	}

	.info-row .value.highlight {
		color: #e74c3c;
		font-size: 18px;
	}

	.modal-message {
		color: #6c757d;
		font-size: 14px;
		line-height: 1.6;
		margin: 16px 0 0 0;
		text-align: center;
	}

	.modal-footer {
		padding: 16px 24px 24px;
		display: flex;
		gap: 12px;
		justify-content: center;
	}

	.btn-primary,
	.btn-secondary {
		border: none;
		padding: 12px 32px;
		border-radius: 6px;
		font-weight: 600;
		cursor: pointer;
		transition: transform 0.2s, box-shadow 0.2s;
		font-size: 15px;
	}

	.btn-primary {
		background-color: rgba(0, 67, 230, .8);
		color: white;
	}

	.btn-primary:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
	}

	.btn-secondary {
		background: #e9ecef;
		color: #495057;
	}

	.btn-secondary:hover {
		background: #dee2e6;
	}

	.btn-primary:active,
	.btn-secondary:active {
		transform: translateY(0);
	}