/* ════════════════════════════════════════════════════════════════════
   BioCode — "Buy Now" popup (single course, one-time purchase)
   Field-guide editorial, consistent with the Cart/Checkout/Invoice pages.
   ════════════════════════════════════════════════════════════════════ */

.bc-bn-overlay {
	--g-deep:#154d37; --g:#1d6b4f; --g-soft:#2f8a67;
	--clay:#bd6a36; --clay-dk:#9a5125;
	--ink:#1a1c16; --ink-2:#33372c; --muted:#6a6f60; --faint:#9a9e8d;
	--bone:#f6f2e9; --paper:#fffdf8; --cream:#f3eee2; --line:#e6e0d2; --line-2:#efeadd;
	--serif:"Newsreader",Georgia,serif;
	--sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	--r-sm:10px; --r:16px; --r-lg:22px;
	--ease:cubic-bezier(.22,.61,.36,1); --tr:.22s var(--ease);
	position:fixed; inset:0; z-index:100000;
	display:flex; align-items:center; justify-content:center;
	padding:20px;
	background:rgba(26,28,22,.5);
	backdrop-filter:blur(2px);
	font-family:var(--sans);
}
.bc-bn-overlay[hidden] { display:none; }
body.bc-bn-open { overflow:hidden; }

.bc-bn-modal {
	position:relative;
	width:100%; max-width:440px; max-height:90vh; overflow-y:auto;
	background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
	box-shadow:0 24px 64px rgba(21,77,55,.28), 0 4px 16px rgba(26,28,22,.14);
	padding:28px 26px 26px;
	animation:bcBnIn .22s var(--ease);
}
@keyframes bcBnIn { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }

.bc-bn-close {
	position:absolute; top:14px; right:14px; width:32px; height:32px;
	display:flex; align-items:center; justify-content:center;
	border-radius:50%; border:1px solid var(--line); background:var(--cream);
	color:var(--muted); font-size:20px; line-height:1; cursor:pointer; transition:var(--tr);
}
.bc-bn-close:hover { background:var(--bone); color:var(--ink); }

.bc-bn-head { margin:0 0 20px; padding-right:20px; }
.bc-bn-course-img {
	display:block; width:100%; height:140px; object-fit:cover;
	border-radius:var(--r); border:1px solid var(--line); margin:0 0 16px;
}
.bc-bn-course-img[hidden] { display:none; }
.bc-bn-eyebrow {
	display:inline-flex; align-items:center; gap:8px; margin:0 0 8px;
	font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--g);
}
.bc-bn-eyebrow-dot { width:6px; height:6px; border-radius:50%; background:var(--clay); }
.bc-bn-title {
	font-family:var(--serif); font-weight:600; font-size:1.4rem; line-height:1.25;
	color:var(--ink); margin:0;
}

.bc-bn-step-label { margin:0 0 16px; font-size:.92rem; font-weight:600; color:var(--ink-2); }
.bc-bn-otp-hint { margin:-8px 0 16px; font-size:.85rem; color:var(--muted); }
.bc-bn-otp-hint span { font-weight:600; color:var(--ink-2); }
#bc-bn-otp-code { letter-spacing:.3em; text-align:center; font-size:1.1rem; font-weight:600; }

.bc-bn-field { margin-bottom:14px; }
.bc-bn-field label {
	display:block; margin-bottom:6px; font-size:.78rem; font-weight:600; color:var(--muted);
}
.bc-bn-field input[type="email"],
.bc-bn-field input[type="password"],
.bc-bn-field input[type="text"] {
	width:100%; height:46px; padding:0 14px; font-family:var(--sans); font-size:.95rem;
	background:var(--cream); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink);
	box-sizing:border-box;
}
.bc-bn-field input:focus { outline:2px solid var(--g-soft); outline-offset:1px; border-color:var(--g); }

.bc-bn-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }

.bc-bn-msg { min-height:1.2em; margin:2px 0 12px; font-size:.85rem; color:#b3402f; }
.bc-bn-msg.is-ok { color:var(--g); }

.bc-bn-btn {
	display:block; width:100%; height:48px; border:none; border-radius:var(--r-sm);
	background:var(--g); color:#fff; font-family:var(--sans); font-weight:700; font-size:.98rem;
	cursor:pointer; transition:var(--tr); box-shadow:0 10px 24px rgba(29,107,79,.22);
}
.bc-bn-btn:hover:not(:disabled) { background:var(--g-deep); transform:translateY(-1px); }
.bc-bn-btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
.bc-bn-btn.is-loading { color:transparent; position:relative; }
.bc-bn-btn.is-loading::after {
	content:""; position:absolute; top:50%; left:50%; width:18px; height:18px;
	margin:-9px 0 0 -9px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
	border-radius:50%; animation:bcBnSpin .7s linear infinite;
}
@keyframes bcBnSpin { to { transform:rotate(360deg); } }

.bc-bn-switch { margin:14px 0 0; text-align:center; font-size:.85rem; }
.bc-bn-switch a { color:var(--g); text-decoration:none; font-weight:600; }
.bc-bn-switch a:hover { color:var(--g-deep); text-decoration:underline; }

/* pay step */
.bc-bn-price-row {
	display:flex; align-items:baseline; justify-content:space-between;
	padding:14px 16px; margin:0 0 16px; background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
}
.bc-bn-price-row span { font-size:.85rem; color:var(--muted); font-weight:600; }
.bc-bn-price-row strong {
	font-family:var(--serif); font-size:1.35rem; font-weight:700; color:var(--g-deep);
}
.bc-bn-coupon { display:flex; gap:8px; margin-bottom:6px; }
.bc-bn-coupon input {
	flex:1 1 auto; min-width:0; height:42px; padding:0 12px; font-family:var(--sans); font-size:.88rem;
	background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink);
}
.bc-bn-coupon input:focus { outline:2px solid var(--g-soft); outline-offset:1px; border-color:var(--g); }
.bc-bn-coupon button {
	flex:0 0 auto; height:42px; padding:0 16px; font-family:var(--sans); font-weight:600; font-size:.85rem;
	border-radius:var(--r-sm); border:1px solid rgba(26,28,22,.22); background:transparent; color:var(--ink);
	cursor:pointer; transition:var(--tr);
}
.bc-bn-coupon button:hover { color:var(--g); border-color:var(--g); }

#bc-bn-card-element { min-height:44px; margin:14px 0; }
.bc-bn-loading { font-size:.85rem; color:var(--muted); text-align:center; padding:14px 0; }

.bc-bn-secure { margin:12px 0 0; text-align:center; font-size:.74rem; color:var(--faint); }

/* done step */
[data-step="done"] { text-align:center; padding:20px 0; }
.bc-bn-done-icon {
	width:56px; height:56px; margin:0 auto 16px; border-radius:50%;
	background:var(--g); color:#fff; font-size:26px; font-weight:700;
	display:flex; align-items:center; justify-content:center;
}
.bc-bn-done-msg { font-family:var(--serif); font-size:1.1rem; color:var(--ink); margin:0; }

@media (max-width:480px) {
	.bc-bn-modal { padding:22px 18px 20px; max-width:100%; }
}