@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Poppins:wght@400;500;600&family=Open+Sans:wght@400;600&display=swap');

:root {
	--font-default: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-primary: "Montserrat", sans-serif;
	--font-secondary: "Poppins", sans-serif;

	--color-primary: #000080;
	--color-primary-light: #1a1aa6;
	--color-secondary: #4e73df;
	--color-bg: #f4f6fb;
	--color-card-border: #eaedf5;
}

body {
	font-family: var(--font-default);
	background-color: var(--color-bg);
	color: #2c2f38;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-primary);
}

hr {
	border-color: var(--color-secondary);
	opacity: 0.35;
}

/* Hero */
.atc-hero {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
	padding: 2rem 1rem 1.5rem;
	color: #fff;
	margin-bottom: 1.5rem;
}
.atc-hero h1 {
	font-weight: 800;
	letter-spacing: 0.03em;
	font-size: 1.4rem;
}
.atc-hero p {
	font-family: var(--font-secondary);
	color: rgba(255, 255, 255, 0.85);
}
.atc-hero-img-wrap {
	max-width: 220px;
	margin: 1.25rem auto 0;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 128, 0.25);
}
.atc-hero-img-wrap img {
	display: block;
	width: 100%;
	height: auto;
}

/* Cards */
.card,
.card-img,
.card-img-top {
	border: 1px solid var(--color-card-border);
	border-radius: 0 !important;
	overflow: hidden;
}
.card-header {
	background-color: #fff;
	border-bottom: 1px solid var(--color-card-border);
}
.card-header h6 {
	font-weight: 700;
	letter-spacing: 0.02em;
}
.card-header .bi-arrow-repeat {
	color: var(--color-secondary);
	font-size: 1.1rem;
	transition: transform 0.2s ease;
}
.card-header a:hover .bi-arrow-repeat {
	transform: rotate(90deg);
}

/* Form */
.atc-section-title h6 {
	font-family: var(--font-secondary);
	font-weight: 600;
	color: var(--color-primary);
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
}
.atc-section-title hr {
	max-width: 60px;
	height: 3px;
	background-color: var(--color-primary);
	opacity: 1;
	margin: 0.4rem auto 1rem;
	border: none;
}
@media (min-width: 768px) {
	.atc-form-col + .atc-form-col {
		border-left: 1px solid var(--color-card-border);
		padding-left: 1.75rem;
	}
}

.input-group {
	flex-wrap: nowrap;
}
.input-group-text.form-control-user {
	background-color: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
	font-family: var(--font-secondary);
	font-weight: 500;
	min-width: 160px;
	max-width: 45%;
	justify-content: flex-start;
	border-radius: 0 !important;
}
.form-control-user {
	border-radius: 0 !important;
}
.form-control.form-control-user[readonly] {
	background-color: #eef0f7 !important;
	border-color: #d7dcea !important;
}

.btn-user {
	border-radius: 0 !important;
	font-family: var(--font-secondary);
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.6rem 1rem;
}
.btn-primary.btn-user {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}
.btn-primary.btn-user:hover {
	background-color: var(--color-primary-light);
	border-color: var(--color-primary-light);
}

/* Result */
.atc-result-body h6 {
	font-family: var(--font-secondary);
	line-height: 1.9;
	font-size: 0.95rem;
}
.atc-verdict {
	display: inline-block;
	font-family: var(--font-secondary);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.04em;
	padding: 0.4rem 1rem;
	margin: 0.35rem 0;
	border: 1px solid transparent;
}
.atc-verdict-good {
	background-color: #e6f4ea;
	color: #1e7e34;
	border-color: #bfe3c8;
}
.atc-verdict-verygood {
	background-color: #1e7e34;
	color: #fff;
}
.atc-verdict-bad {
	background-color: #fdeeea;
	color: #c0392b;
	border-color: #f4c7bb;
}
.atc-verdict-verybad {
	background-color: #c0392b;
	color: #fff;
}
.atc-result-legend {
	background-color: #fafbfe;
	border: 1px solid var(--color-card-border);
	padding: 1rem 1.25rem;
	text-align: left;
	max-width: 480px;
	margin: 1.5rem auto 0;
}
.atc-result-legend .atc-legend-title {
	font-family: var(--font-secondary);
	font-weight: 600;
	color: var(--color-primary);
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	margin-bottom: 0.5rem;
}
.atc-result-legend ul {
	margin-bottom: 0;
}
.atc-result-legend li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.6rem;
	font-size: 0.9rem;
}
.atc-result-legend .atc-verdict {
	flex: 0 0 auto;
	font-size: 0.75rem;
	padding: 0.25rem 0.6rem;
	margin: 0;
}
.atc-result-legend li:last-child {
	margin-bottom: 0;
}

/* Info card */
#info_eng_a p {
	font-family: var(--font-secondary);
}
#info_eng_a button {
	font-family: var(--font-secondary);
	font-weight: 500;
	padding: 0.4rem 0;
}
#info_eng_a button:hover {
	text-decoration: underline;
}

/* Footer */
.atc-footer {
	font-family: var(--font-secondary);
	color: #6c7280;
	font-size: 0.9rem;
}
.atc-footer img {
	max-width: 140px;
}
.atc-footer a {
	color: var(--color-secondary);
}

/* Responsive */
@media (min-width: 576px) {
	.atc-hero h1 {
		font-size: 1.75rem;
	}
	.atc-hero {
		padding: 2.5rem 1rem 2rem;
	}
}

@media (max-width: 575.98px) {
	.input-group-text.form-control-user {
		min-width: 0;
		flex: 0 0 42%;
		font-size: 0.78rem;
		padding-left: 0.5rem;
		padding-right: 0.35rem;
	}
	.input-group-text.form-control-user i {
		margin-right: 0.35rem !important;
	}
	.form-control.form-control-user,
	.form-select.form-control-user {
		font-size: 0.85rem;
		padding-left: 0.5rem;
		padding-right: 0.25rem;
	}
	.atc-hero {
		padding: 1.5rem 0.75rem 1.25rem;
	}
	.card-body {
		padding: 1rem 0.85rem;
	}
	.atc-result-legend {
		padding: 0.85rem 1rem;
	}
}