/* ════════════════════════════════════════════════════════════════════
   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; }
/* A fully-discounted total collects no card, so the field is pulled out of
   the flow entirely rather than left as an empty 44px gap. Stated explicitly
   because the ID selector above out-specifies the UA [hidden] rule the
   moment any theme reset gives divs an explicit display. */
#bc-bn-card-element[hidden] { display:none; }
.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%; }
}