/* ===== COMPONENTS: Card, Sections, Forms, Buttons, Alerts, etc. (ORANGE ⇄ BLUE SWAP) ===== */

/* Card */
.card {
	border-radius: 20px;
	overflow: hidden;
	background: var(--white);
	box-shadow: 0 10px 40px rgba(28, 132, 238, 0.08);
	transition: all 0.4s ease;
	animation: fadeInUp 0.7s ease-out;
}
.card:hover {
	/* was blue → orange */
	box-shadow: 0 15px 50px rgba(28, 132, 238, 0.12);
	transform: translateY(-2px);
}
.card-body {
	padding: 1.25rem;
}
.card-footer {
	border-top: 1px solid var(--border-light);
	padding: 0.875rem 1.25rem;
}

/* Info Section (custom) */
/* was blue gradient → now ORANGE gradient */
.info-section {
	background: linear-gradient(135deg, #ffb320 0%, #ff8a00 100%);
	color: var(--white);
	position: relative;
	overflow: hidden;
}
/* was orange blobs → now BLUE blobs */
.info-section::before {
	content: "";
	position: absolute;
	top: -50%;
	right: -20%;
	width: 400px;
	height: 400px;
	background: rgba(28, 132, 238, 0.12);
	border-radius: 50%;
	animation: float 6s ease-in-out infinite;
}
.info-section::after {
	content: "";
	position: absolute;
	bottom: -30%;
	left: -10%;
	width: 300px;
	height: 300px;
	background: rgba(28, 132, 238, 0.08);
	border-radius: 50%;
	animation: float 8s ease-in-out infinite reverse;
}
.info-content {
	position: relative;
	z-index: 1;
}
.logo-badge,
.logo-wrapper {
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	padding: 15px 25px;
	border-radius: 15px;
	display: inline-block;
	margin-bottom: 20px;
	border: 1px solid rgba(255, 255, 255, 0.2);
}
.info-section img {
	max-height: 50px;
	width: auto;
	filter: brightness(0) invert(1);
}
.info-section h5 {
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--white);
	margin-bottom: 15px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.info-section p,
.info-section .lead-text {
	color: rgba(255, 255, 255, 0.95);
	line-height: 1.7;
	font-size: 0.95rem;
}
/* badge: was orange → now BLUE */
.feature-badge {
	display: inline-block;
	background: rgba(28, 132, 238, 0.25);
	color: #1c84ee;
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 0.85rem;
	font-weight: 600;
	margin-top: 15px;
	border: 1px solid rgba(28, 132, 238, 0.4);
}

/* Alternate hero using .bg-light (override Bootstrap) */
/* was blue gradient → now ORANGE gradient */
.bg-light {
	background: linear-gradient(135deg, #ffb320 0%, #ff8a00 100%) !important;
	color: var(--white);
	position: relative;
	overflow: hidden;
}
/* swap blobs: orange → blue */
.bg-light::before {
	content: "";
	position: absolute;
	top: -50%;
	right: -20%;
	width: 400px;
	height: 400px;
	background: rgba(28, 132, 238, 0.12);
	border-radius: 50%;
	animation: float 6s ease-in-out infinite;
}
.bg-light::after {
	content: "";
	position: absolute;
	bottom: -30%;
	left: -10%;
	width: 300px;
	height: 300px;
	background: rgba(28, 132, 238, 0.08);
	border-radius: 50%;
	animation: float 8s ease-in-out infinite reverse;
}
.bg-light .w-100 {
	position: relative;
	z-index: 1;
}
.logo-wrapper {
	padding: 20px 30px;
	margin-bottom: 25px;
}
.bg-light img {
	max-height: 60px;
	width: auto;
	filter: brightness(0) invert(1);
}
.bg-light p {
	color: rgba(255, 255, 255, 0.95);
	line-height: 1.7;
	font-size: 0.95rem;
	margin-bottom: 0.5rem;
}
.bg-light a {
	color: var(--white);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: all 0.3s ease;
}
.bg-light a:hover {
	/* was #ffd966 (orange light) → light BLUE */
	color: #cfe5ff;
	text-decoration: none;
}

/* Form Section */
.form-section {
	background: var(--white);
}
.form-section h5,
#otp-header {
	font-weight: 700;
	font-size: 1.6rem;
	color: var(--primary-blue);
	margin-bottom: 1rem;
}
.form-section .subtitle {
	color: var(--text-muted);
	font-size: 0.9rem;
	margin-bottom: 30px;
}

.form-label {
	font-weight: 600;
	color: var(--text-dark);
	font-size: 0.9rem;
	margin-bottom: 8px;
	display: block;
}
.form-control {
	border: 2px solid var(--border-light);
	border-radius: 12px;
	padding: 0.85rem 1.1rem;
	font-size: 0.95rem;
	transition: all 0.3s ease;
	background: #f8fafc;
}
.form-control:focus {
	border-color: var(--primary-blue);

	background: var(--white);
	outline: none;
}
.form-control::placeholder {
	color: #cbd5e0;
}
.form-control:read-only {
	background: #e5e7eb;
	cursor: not-allowed;
	color: var(--text-muted);
}
textarea.form-control {
	resize: vertical;
	min-height: 100px;
}

/* OTP input */
#otp {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.5rem;
	font-family: "Courier New", monospace;
}

/* Input group (password/append) */
.input-group {
	position: relative;
}
.input-group .form-control {
	border-right: none;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.input-group .btn,
.input-group-append .btn {
	border: 2px solid var(--border-light);
	border-left: none;
	border-radius: 0 12px 12px 0;
	background: #f8fafc;
	color: var(--text-muted);
	transition: all 0.3s ease;
	padding: 0.85rem 1.1rem;
}
.input-group .btn:hover,
.input-group-append .btn:hover {
	background: var(--white);
	/* was blue → orange */
	color: var(--primary-blue);
	border-color: var(--primary-blue);
}
.input-group .form-control:focus + .btn {
	border-color: var(--primary-blue);
}
.input-group .form-control:focus + .input-group-append .btn {
	border-color: var(--primary-blue);
}

/* Buttons */
/* was ORANGE → now BLUE primary */
.btn-primary {
	background: linear-gradient(135deg, #1c84ee 0%, #0f6dd1 100%);
	border: none;
	border-radius: 12px;
	padding: 1rem 2rem;
	width: 100%;
	font-weight: 700;
	font-size: 1rem;
	color: #fff;
	transition: all 0.3s ease;
	box-shadow: 0 6px 20px rgba(28, 132, 238, 0.3);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 30px rgba(28, 132, 238, 0.4);
	background: linear-gradient(135deg, #0f6dd1 0%, #1c84ee 100%);
}
.btn-primary:active {
	transform: translateY(-1px);
}
.btn-primary:disabled {
	background: #e2e8f0;
	box-shadow: none;
	cursor: not-allowed;
	opacity: 0.6;
}

/* was BLUE outline → now ORANGE outline */
.btn-outline-primary {
	border: 2px solid var(--primary-yellow);
	border-radius: 12px;
	padding: 0.875rem 2rem;
	width: 100%;
	font-weight: 700;
	font-size: 1rem;
	color: var(--primary-yellow);
	transition: all 0.3s ease;
	background: var(--white);
}
.btn-outline-primary:hover {
	background: var(--primary-yellow);
	border: 2px solid var(--primary-yellow);
	color: var(--white);
	transform: translateY(-2px);
	/* shadow now orange */
	box-shadow: 0 6px 20px rgba(255, 138, 0, 0.3);
}
.btn-outline-primary:active {
	transform: translateY(0);
}

/* submit style (same as primary) */
/* was ORANGE → now BLUE */
.btn-submit {
	background: linear-gradient(135deg, #1c84ee 0%, #0f6dd1 100%);
	border: none;
	border-radius: 12px;
	padding: 1rem 2rem;
	width: 100%;
	font-weight: 700;
	font-size: 1rem;
	color: #fff;
	transition: all 0.3s ease;
	box-shadow: 0 6px 20px rgba(28, 132, 238, 0.3);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.btn-submit:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 30px rgba(28, 132, 238, 0.4);
	background: linear-gradient(135deg, #0f6dd1 0%, #1c84ee 100%);
}
.btn-submit:active {
	transform: translateY(-1px);
}

/* Status toggle */
.status-label {
	font-weight: 600;
	color: var(--text-dark);
	font-size: 0.95rem;
	margin-bottom: 12px;
	display: block;
}
.btn-group {
	border-radius: 12px;
	/* was blue shadow → orange */
	box-shadow: 0 2px 10px rgba(255, 138, 0, 0.06);
	width: 100%;
	display: flex;
	gap: 0;
}
.btn-group .btn-outline-primary {
	border: 2px solid var(--border-light);
	color: #475569;
	background: var(--white);
	flex: 1;
	position: relative;
	padding: 0.85rem 1.2rem;
}
.btn-group .btn-outline-primary:first-of-type {
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
	border-right: 1px solid var(--border-light);
}
.btn-group .btn-outline-primary:last-of-type {
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
	border-left: 1px solid var(--border-light);
	margin-left: -2px;
}
.btn-group .btn-outline-primary:hover {
	background: #f8fafc;
	/* was blue → orange */
	border-color: var(--primary-yellow);
	color: var(--primary-yellow);
	transform: translateY(-1px);
	z-index: 2;
}

.btn-check:checked + .btn-outline-primary {
	background: transparent !important; /* tidak diwarnai penuh */
	border-color: var(--primary-yellow) !important; /* garis oranye */
	color: var(--primary-yellow) !important; /* teks oranye */
	box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.15) !important; /* efek glow lembut */
	transform: translateY(-1px);
}

/* Alerts */
/* was blue info → now ORANGE info */
.alert-info {
	background: linear-gradient(
		135deg,
		rgba(255, 138, 0, 0.1) 0%,
		rgba(255, 138, 0, 0.06) 100%
	);
	border: 2px solid rgba(255, 138, 0, 0.18);
	border-radius: 12px;
	color: var(--primary-yellow);
	padding: 1rem;
}
.alert-info strong {
	color: var(--primary-yellow);
	font-weight: 700;
}
.alert-success {
	background: linear-gradient(
		135deg,
		rgba(16, 185, 129, 0.1) 0%,
		rgba(16, 185, 129, 0.05) 100%
	);
	border: 2px solid rgba(16, 185, 129, 0.2);
	border-radius: 12px;
	color: #059669;
	padding: 1rem;
	font-weight: 600;
}

#info-timer.pulse {
	animation: pulse 1s ease-in-out infinite;
}

/* List group (summary) */
.list-group {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.list-group-item {
	border: 1px solid var(--border-light);
	padding: 0.875rem 1rem;
	background: #f8fafc;
}
.list-group-item:first-child {
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}
.list-group-item:last-child {
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
}

/* Channel cards */
.card.h-100 {
	border: 2px solid var(--border-light);
	border-radius: 16px;
	transition: all 0.3s ease;
	cursor: pointer;
	background: #f8fafc;
}
.card.h-100:hover {
	/* was blue → orange */
	border-color: var(--primary-yellow);
	box-shadow: 0 6px 20px rgba(255, 138, 0, 0.15);
	transform: translateY(-3px);
}
.card.h-100.selected {
	border-color: var(--primary-yellow);
	background: rgba(255, 138, 0, 0.03);
	box-shadow: 0 6px 20px rgba(255, 138, 0, 0.2);
}

/* Form check */
.form-check-input {
	width: 1.25em;
	height: 1.25em;
	border: 2px solid var(--border-light);
	cursor: pointer;
}
.form-check-input:checked {
	/* was blue → orange */
	background-color: var(--primary-yellow);
	border-color: var(--primary-yellow);
}
.form-check-input:focus {
	border-color: var(--primary-yellow);
	box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12);
}
.form-check-label {
	cursor: pointer;
	margin-left: 0.5rem;
	color: var(--text-dark);
}

/* Section effects */
#section-kanal,
#section-password {
	animation: fadeInUp 0.5s ease-out;
}
#section-password h6 {
	font-weight: 700;
	font-size: 1.25rem;
	/* was blue → orange */
	color: var(--primary-blue);
	margin-bottom: 1rem;
}
#section-password hr {
	border-color: var(--border-light);
	opacity: 0.5;
	margin: 1.5rem 0;
}

/* Responsive (komponen) */
@media (max-width: 991px) {
	.info-section,
	.bg-light {
		border-radius: 20px 20px 0 0;
		padding: 2rem !important;
	}
	.info-section h5,
	.bg-light h5 {
		font-size: 1.4rem;
	}
	.btn-group .btn-outline-primary {
		font-size: 0.85rem;
		padding: 0.75rem 1rem;
	}
	.text-lg-left {
		text-align: center !important;
	}
	#otp {
		font-size: 1.25rem;
		letter-spacing: 0.3rem;
	}
}
@media (max-width: 576px) {
	.card {
		border-radius: 16px;
	}
	.form-section h5,
	#otp-header {
		font-size: 1.35rem;
	}
	.logo-badge,
	.logo-wrapper {
		padding: 12px 20px;
		margin-bottom: 15px;
	}
	.bg-light img {
		max-height: 50px;
	}
	.btn-primary,
	.btn-outline-primary {
		padding: 0.875rem 1.75rem;
	}
}

/* pw hints (unchanged green/red) */
.pw-hint .ok i {
	color: #16a34a;
} /* hijau */
.pw-hint .no i {
	color: #ef4444;
} /* merah */
.pw-hint div {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	line-height: 1.4;
}
.pw-match.ok {
	color: #16a34a;
}
.pw-match.no {
	color: #ef4444;
}
.is-valid {
	border-color: #16a34a !important;
}
.is-invalid {
	border-color: #ef4444 !important;
}

/* Jika input di dalam .input-group invalid → warnai tombolnya juga */
.input-group:has(.form-control.is-invalid) .btn {
	border-color: #ef4444 !important;
}

/* Jika valid → selaraskan ke hijau Bootstrap */
.input-group:has(.form-control.is-valid) .btn {
	border-color: #16a34a !important;
}

/* Biar outline/tepiannya keliatan satu kesatuan */
.input-group .btn {
	box-shadow: none !important;
}