/* ════════════════════════════════════════════════════════════
   BBL Region Selector v4 — CSS
   Dark navy modal · Black coming-soon · Responsive
   ════════════════════════════════════════════════════════════ */

body.bblr-lock { overflow: hidden; }

/* ── Trigger button ──────────────────────────────────────────── */
.bblr-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: none;
	padding: 5px 10px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	transition: background .18s;
	/* colour set inline from PHP */
}
.bblr-btn:hover  { background: rgba(255,255,255,.1); }
.bblr-btn:focus  { outline: 2px solid rgba(255,255,255,.3); outline-offset: 2px; }
.bblr-icon, .bblr-chevron { flex-shrink: 0; }
.bblr-chevron   { opacity: .6; }
.bblr-active-flag { font-size: 1.3rem; line-height: 1; display: none; } /* shown by JS */
/* Desktop: show flag + short code (e.g. 🇨🇦 CA) */
.bblr-btn-label { font-size: 12px; font-weight: 700; letter-spacing: .4px; }

/* ── Shared overlay wrapper ──────────────────────────────────── */
.bblr-wrap {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.bblr-wrap[hidden] { display: none !important; }

.bblr-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 10, 28, .8);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	cursor: pointer;
}

/* ── Shared close button ─────────────────────────────────────── */
.bblr-x {
	position: absolute;
	top: 14px;
	right: 16px;
	z-index: 2;
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 7px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,.55);
	cursor: pointer;
	padding: 0;
	transition: background .15s, color .15s;
}
.bblr-x:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ════════════════════════════════════════════════════════════
   MAIN MODAL  (dark navy — matches screenshot)
   ════════════════════════════════════════════════════════════ */
.bblr-modal {
	position: relative;
	z-index: 1;
	background: #1b2a4a;
	border-radius: 14px;
	padding: 40px 44px 44px;
	width: 100%;
	max-width: 860px;
	max-height: 88vh;
	overflow-y: auto;
	color: #fff;
	box-shadow: 0 40px 100px rgba(0,0,0,.65);
	animation: bblrUp .22s cubic-bezier(.25,.46,.45,.94);
}
@keyframes bblrUp {
	from { transform: translateY(18px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}
.bblr-modal::-webkit-scrollbar       { width: 5px; }
.bblr-modal::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

.bblr-modal-h {
	font-size: 1.5rem;
	font-weight: 700;
	color: #fff;
	margin: 0 44px 28px 0;
}

/* ── Country grid ────────────────────────────────────────────── */
.bblr-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 8px;
}

/* ── Country button ──────────────────────────────────────────── */
.bblr-country {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 9px;
	color: #c8d8ee;
	font-size: 14px;
	font-weight: 500;
	padding: 11px 14px;
	cursor: pointer;
	text-align: left;
	transition: background .15s, border-color .15s, color .15s;
	width: 100%;
}
.bblr-country:hover {
	background: rgba(255,255,255,.14);
	border-color: rgba(255,255,255,.28);
	color: #fff;
}
/* Active country (Canada) — slight highlight */
.bblr-active-country {
	background: rgba(255,255,255,.1);
	border-color: rgba(255,255,255,.2);
}
.bblr-active-country:hover {
	background: rgba(255,255,255,.18);
	border-color: rgba(255,255,255,.35);
}
/* Selected (from cookie) */
.bblr-country.is-selected {
	background: rgba(232,104,42,.22);
	border-color: #e8682a;
	color: #fff;
}
.bblr-flag { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.bblr-name { line-height: 1.2; }

/* ── Worldwide row ───────────────────────────────────────────── */
.bblr-worldwide-row {
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid rgba(255,255,255,.1);
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.bblr-worldwide-row p {
	margin: 0;
	color: rgba(255,255,255,.5);
	font-size: 14px;
}
.bblr-worldwide-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 8px;
	color: #d0dff0;
	font-size: 14px;
	font-weight: 600;
	padding: 9px 16px;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.bblr-worldwide-link:hover {
	background: rgba(255,255,255,.16);
	color: #fff;
	text-decoration: none;
}

/* ════════════════════════════════════════════════════════════
   COMING SOON MODAL  (pure black)
   ════════════════════════════════════════════════════════════ */
.bblr-cs-wrap { z-index: 100000; }

.bblr-cs-box {
	position: relative;
	z-index: 1;
	background: #000;
	border-radius: 14px;
	padding: 50px 40px 44px;
	width: 100%;
	max-width: 480px;
	color: #fff;
	box-shadow: 0 40px 100px rgba(0,0,0,.9);
	animation: bblrUp .22s cubic-bezier(.25,.46,.45,.94);
}

.bblr-cs-title {
	font-size: 1.2rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 14px;
	line-height: 1.4;
}
.bblr-cs-msg {
	font-size: .95rem;
	line-height: 1.75;
	color: #999;
}
.bblr-cs-msg a {
	color: #e8682a;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.bblr-cs-msg a:hover { color: #ff9e5e; }

.bblr-cs-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 26px;
	background: transparent;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 7px;
	color: rgba(255,255,255,.45);
	font-size: 13px;
	padding: 9px 16px;
	cursor: pointer;
	transition: all .15s;
}
.bblr-cs-back:hover {
	background: rgba(255,255,255,.07);
	color: #fff;
	border-color: rgba(255,255,255,.35);
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */

/* Large screens */
@media (min-width: 1100px) {
	.bblr-grid { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); }
}

/* Tablet */
@media (max-width: 860px) {
	.bblr-modal { padding: 28px 22px 34px; }
	.bblr-modal-h { font-size: 1.2rem; }
	.bblr-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); }
	/* Tablet: hide label, show flag only */
	.bblr-btn-label { display: none; }
}

/* Mobile landscape */
@media (max-width: 640px) {
	.bblr-wrap { padding: 8px; }
	.bblr-modal { padding: 22px 14px 26px; border-radius: 12px; }
	.bblr-modal-h { font-size: 1.05rem; margin-bottom: 18px; }
	.bblr-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
	.bblr-country { font-size: 13px; padding: 9px 10px; }
	.bblr-cs-box { padding: 40px 20px 34px; }
	.bblr-cs-title { font-size: 1.05rem; }
	.bblr-worldwide-row { flex-direction: column; align-items: flex-start; gap: 8px; }
	/* Mobile: flag only */
	.bblr-btn-label { display: none; }
}

/* Mobile portrait */
@media (max-width: 420px) {
	.bblr-grid { grid-template-columns: 1fr; }
	.bblr-btn-label { display: none; }
}