/* ==========================================================================
   Bear Links — Dashboard admin
   Paleta: navy #0a1230 / #000046, magenta #FF00B0, indigo #6366f1
   Tipografía: Manrope (UI), Poppins (labels), Bebas Neue (títulos grandes)
   ========================================================================== */

#bl-builder, #bl-shell, .bl-frontend-context {
	--bl-navy: #0a1230;
	--bl-navy-deep: #000046;
	--bl-magenta: #FF00B0;
	--bl-indigo: #6366f1;
	--bl-surface: #12193f;
	--bl-surface-2: #1b234f;
	--bl-border: #2a3266;
	--bl-text: #f4f5fb;
	--bl-text-dim: #9ea3c4;
	font-family: 'Manrope', -apple-system, sans-serif;
	color: var(--bl-text);
}

.bl-admin-wrap * {
	box-sizing: border-box;
}

/* Strip the default WP admin padding/box so our SPA can own full width */
.bl-admin-wrap {
	margin: 0 0 0 -20px;
	background: var(--bl-navy);
	min-height: calc(100vh - 32px);
}

/* WordPress's admin bar is 46px tall below 782px instead of 32px — see the matching
   .bl-shell-wrap rule further down for the full explanation. */
@media (max-width: 782px) {
	.bl-admin-wrap {
		min-height: calc(100vh - 46px);
	}
}

/* The -20px negative margin and 100vh-based min-height above exist only to compensate
   for wp-admin's own #wpbody-content padding and fixed admin bar. Neither applies when
   this same markup renders via the [bearlinks_dashboard] frontend shortcode — there's
   no such padding to cancel out, and no admin bar height to subtract (a logged-in
   frontend visitor might still see WordPress's admin bar if their theme shows it, but
   its height doesn't eat into the theme's content column the way it does in wp-admin
   itself). Use the real viewport height instead, so the dashboard always fills the
   screen the same way it does in wp-admin — not a fixed guess that's sometimes too
   short and sometimes leaves extra empty space. */
.bl-frontend-context {
	margin: 0;
	min-height: 100vh;
}

/* ---------- Shell (sidebar + content, wraps everything except the page builder) ---------- */
.bl-shell-wrap {
	display: flex;
	height: calc(100vh - 32px);
	position: relative;
}
/* Same reasoning as .bl-frontend-context above — no wp-admin chrome to subtract on the
   frontend, so use the full real viewport height instead of a 100vh-minus-something
   guess (or a fixed pixel value, which wouldn't adapt to the visitor's actual screen). */
.bl-frontend-context.bl-shell-wrap {
	height: 100vh;
}

.bl-shell-mobile-topbar {
	display: none; /* shown only on tablet/mobile, see media query below */
	align-items: center;
	gap: 10px;
	padding: 16px 14px;
	background: var(--bl-navy-deep);
	border-bottom: 1px solid var(--bl-border);
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
}
.bl-shell-hamburger {
	background: var(--bl-surface-2);
	border: 1px solid var(--bl-border);
	border-radius: 8px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bl-text);
	cursor: pointer;
	flex-shrink: 0;
}
.bl-shell-hamburger:hover { border-color: var(--bl-magenta); }
.bl-shell-hamburger .dashicons { font-size: 20px; width: 20px; height: 20px; }

.bl-shell-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.55);
	z-index: 39;
}

.bl-shell-sidebar {
	width: 240px;
	flex-shrink: 0;
	background: var(--bl-navy-deep);
	border-right: 1px solid var(--bl-border);
	display: flex;
	flex-direction: column;
	padding: 20px 14px;
}

.bl-shell-brand {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 22px;
	letter-spacing: .06em;
	color: #fff;
	padding: 6px 12px 20px;
}
.bl-shell-brand-desktop { display: block; }

.bl-shell-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}

.bl-shell-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	color: var(--bl-text-dim);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	transition: all .15s ease;
}
.bl-shell-nav-item:hover {
	background: var(--bl-surface-2);
	color: var(--bl-text);
}
.bl-shell-nav-item.is-active {
	background: linear-gradient(135deg, rgba(255,0,176,.16), rgba(99,102,241,.16));
	color: #fff;
	border: 1px solid var(--bl-border);
}
.bl-shell-nav-item .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.bl-shell-sidebar-footer {
	border-top: 1px solid var(--bl-border);
	padding-top: 10px;
	margin-top: 10px;
}
.bl-shell-logout:hover { color: #f87171; background: rgba(248,113,113,.08); }

.bl-shell-content {
	flex: 1;
	overflow-y: auto;
	padding: 28px 32px;
	min-width: 0;
}

/* Tablet and mobile: the sidebar becomes an off-canvas panel toggled by the hamburger
   button, instead of a permanently docked column that eats into the content width. */
@media (max-width: 900px) {
	.bl-shell-wrap {
		flex-direction: column;
		height: auto;
		min-height: calc(100vh - 32px);
	}
	.bl-frontend-context.bl-shell-wrap {
		min-height: 100vh;
	}

	.bl-shell-mobile-topbar {
		display: flex;
	}

	.bl-shell-brand-desktop {
		display: none; /* the mobile topbar already shows the brand */
	}

	.bl-shell-sidebar {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: 260px;
		max-width: 80vw;
		z-index: 40;
		transform: translateX(-100%);
		transition: transform .22s ease;
		box-shadow: 0 0 40px rgba(0,0,0,.4);
	}
	.bl-shell-wrap.is-sidebar-open .bl-shell-sidebar {
		transform: translateX(0);
	}
	.bl-shell-wrap.is-sidebar-open .bl-shell-overlay {
		display: block;
	}

	.bl-shell-content {
		padding: 20px 16px;
	}
}

@media (max-width: 480px) {
	.bl-shell-content {
		padding: 16px 12px;
	}
}

/* WordPress switches its own admin bar from 32px to 46px tall below 782px — a different
   breakpoint from our 900px layout switch above. Our height calculations assumed 32px
   everywhere, so on mobile the shell was actually 14px taller than the space WordPress
   left available, clipping content at the edges. Account for the real mobile height here. */
@media (max-width: 782px) {
	.bl-shell-wrap:not(.bl-frontend-context) {
		min-height: calc(100vh - 46px);
	}
}

/* ---------- Placeholder ("próximamente") screens ---------- */
.bl-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 80px 24px;
	color: var(--bl-text-dim);
}
.bl-placeholder-icon {
	font-size: 40px;
	width: 40px;
	height: 40px;
	color: var(--bl-indigo);
	margin-bottom: 14px;
}
.bl-placeholder h2 {
	font-family: 'Poppins', sans-serif;
	color: var(--bl-text);
	margin: 0 0 8px;
	font-size: 18px;
}
.bl-placeholder p {
	margin: 0;
	font-size: 13px;
	max-width: 320px;
}

.bl-btn {
	font-family: 'Manrope', sans-serif;
	font-weight: 600;
	font-size: 13px;
	padding: 8px 16px;
	border-radius: 8px;
	border: 1px solid var(--bl-border);
	background: var(--bl-surface-2);
	color: var(--bl-text);
	cursor: pointer;
	transition: all .15s ease;
}
.bl-btn:hover { border-color: var(--bl-indigo); }
.bl-btn-primary {
	background: linear-gradient(135deg, var(--bl-magenta), var(--bl-indigo));
	border: none;
	color: #fff;
}
.bl-btn-primary:hover { filter: brightness(1.08); }
.bl-btn-ghost { background: transparent; }
.bl-btn-sm { padding: 6px 12px; font-size: 12px; }

/* ---------- Lista de páginas / encabezado de sección ---------- */
.bl-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--bl-border);
}
.bl-section-header h1 {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 32px;
	letter-spacing: .5px;
	color: #fff;
	margin: 0;
}
.bl-pages-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}
.bl-page-card {
	background: var(--bl-surface);
	border: 1px solid var(--bl-border);
	border-radius: 12px;
	padding: 18px;
	overflow: hidden;
}
.bl-page-card-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.bl-page-card-slug { font-size: 12px; color: var(--bl-text-dim); margin-bottom: 14px; }
.bl-page-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-page-card-actions .bl-btn { white-space: nowrap; }
.bl-empty-state { padding: 60px 32px; text-align: center; color: var(--bl-text-dim); }

/* Modal */
.bl-modal {
	position: fixed; inset: 0; background: rgba(0,0,0,.6);
	display: flex; align-items: center; justify-content: center; z-index: 999999;
}
.bl-modal-inner {
	background: var(--bl-surface); border: 1px solid var(--bl-border);
	border-radius: 12px; padding: 24px; width: 360px;
}
.bl-modal-inner h2 { margin-top: 0; font-family: 'Poppins', sans-serif; font-size: 18px; }
.bl-modal-inner label { display: block; font-size: 13px; color: var(--bl-text-dim); margin-bottom: 16px; }
.bl-modal-inner input[type="text"] {
	width: 100%; margin-top: 6px; padding: 9px 12px; border-radius: 8px;
	border: 1px solid var(--bl-border); background: var(--bl-navy); color: var(--bl-text);
}
.bl-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- Builder ---------- */
.bl-builder-topbar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 24px; border-bottom: 1px solid var(--bl-border);
	background: var(--bl-navy-deep);
}
.bl-back-link { color: var(--bl-text-dim); text-decoration: none; font-size: 13px; }
.bl-back-link:hover { color: var(--bl-magenta); }
.bl-topbar-title { font-weight: 700; font-size: 14px; }
.bl-topbar-actions { display: flex; align-items: center; gap: 12px; }
.bl-save-status { font-size: 12px; color: var(--bl-text-dim); min-width: 90px; text-align: right; }
.bl-save-status.is-saved { color: #4ade80; }
.bl-save-status.is-error { color: #f87171; }

.bl-builder-body {
	display: grid;
	grid-template-columns: 260px 1fr 300px;
	height: calc(100vh - 32px - 53px);
	min-height: 0;
}
/* Same reasoning as .bl-frontend-context elsewhere in this file — no wp-admin chrome to
   subtract from 100vh when this renders via the frontend shortcode, but the builder's
   own 53px topbar (.bl-builder-topbar) still needs subtracting either way, since it's
   part of this same screen either in wp-admin or on the frontend. */
.bl-frontend-context .bl-builder-body {
	height: calc(100vh - 53px);
}

.bl-builder-body > * {
	min-height: 0;
}

.bl-panel {
	background: var(--bl-surface);
	padding: 18px;
}
.bl-panel-left {
	border-right: 1px solid var(--bl-border);
	display: flex;
	flex-direction: column;
	overflow: hidden; /* each child section scrolls on its own instead */
}
.bl-panel-right { border-left: 1px solid var(--bl-border); overflow-y: auto; }
.bl-panel-section { margin-bottom: 24px; }
.bl-panel-section h3 {
	font-family: 'Poppins', sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--bl-text-dim);
	margin: 0 0 10px;
}

/* Widget palette (left, add-block buttons): a fixed max-height with its own scroll,
   rather than growing freely with the widget count — with the registry now at 10+
   widget types, letting this section grow unbounded pushed "Bloques de la página"
   (the list of blocks actually on the page, arguably more important to keep visible
   at a glance) out of view below the fold. Both sections now get a comparable, capped
   share of the available height instead of one crowding out the other. */
.bl-palette-search {
	width: 100%; box-sizing: border-box; margin-bottom: 8px;
	padding: 8px 10px; border-radius: 8px; border: 1px solid var(--bl-border);
	background: var(--bl-navy); color: var(--bl-text); font-family: 'Manrope', sans-serif; font-size: 13px;
}
.bl-widget-palette {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	max-height: 220px;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 4px;
	scrollbar-width: thin;
	scrollbar-color: var(--bl-border) transparent;
}
.bl-widget-palette::-webkit-scrollbar { width: 6px; }
.bl-widget-palette::-webkit-scrollbar-thumb { background: var(--bl-border); border-radius: 3px; }
.bl-palette-btn {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 10px 8px; border-radius: 8px;
	background: var(--bl-surface-2); border: 1px solid var(--bl-border);
	color: var(--bl-text); font-size: 11px; font-weight: 600;
	cursor: pointer; text-align: center; width: 100%;
}
.bl-palette-btn:hover { border-color: var(--bl-magenta); }
.bl-palette-btn .dashicons { color: var(--bl-indigo); font-size: 20px; }
.bl-palette-empty {
	grid-column: 1 / -1; text-align: center; padding: 16px 8px;
	color: var(--bl-text-dim); font-size: 12px;
}

/* "Bloques de la página" is the section that gets the remaining vertical space and
   scrolls independently once its own list is longer than that — same reasoning as
   before, just no longer needing to also absorb an unbounded palette above it. */
.bl-panel-left .bl-panel-section:first-child { flex-shrink: 0; }
.bl-panel-left .bl-panel-section:last-child {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.bl-panel-left .bl-panel-section:last-child .bl-widget-tree {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	min-height: 0;
	padding-right: 4px;
	scrollbar-width: thin;
	scrollbar-color: var(--bl-border) transparent;
}
.bl-panel-left .bl-panel-section:last-child .bl-widget-tree::-webkit-scrollbar {
	width: 6px;
}
.bl-panel-left .bl-panel-section:last-child .bl-widget-tree::-webkit-scrollbar-thumb {
	background: var(--bl-border);
	border-radius: 3px;
}

/* Widget tree (left, added blocks, sortable) */
.bl-widget-tree { list-style: none; margin: 0; padding: 0; }
.bl-tree-item {
	display: flex; align-items: center; gap: 8px;
	padding: 9px 10px; margin-bottom: 6px; border-radius: 8px;
	background: var(--bl-surface-2); border: 1px solid transparent;
	cursor: pointer; font-size: 13px;
}
.bl-tree-item:hover { border-color: var(--bl-border); }
.bl-tree-item.is-active { border-color: var(--bl-magenta); background: rgba(255,0,176,.08); }
.bl-tree-item .bl-drag-handle { cursor: grab; color: var(--bl-text-dim); }
.bl-tree-item .bl-tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-tree-item .bl-tree-delete { color: var(--bl-text-dim); background: none; border: none; cursor: pointer; }
.bl-tree-item .bl-tree-delete:hover { color: #f87171; }
.bl-tree-empty { color: var(--bl-text-dim); font-size: 12px; padding: 8px 4px; }
.ui-sortable-placeholder { border: 1px dashed var(--bl-indigo); height: 38px; margin-bottom: 6px; border-radius: 8px; visibility: visible !important; }

/* Preview center */
.bl-preview-area {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bl-navy-deep);
	background-image: radial-gradient(circle at 50% 0%, rgba(99,102,241,.12), transparent 60%);
	overflow: hidden;
	padding: 24px;
	min-height: 0;
}
.bl-phone-frame {
	flex: 0 0 auto;
	width: 360px;
	height: min(720px, 100%);
	max-height: 100%;
	background: #000;
	border-radius: 36px;
	padding: 12px;
	box-shadow: 0 20px 60px rgba(0,0,0,.5);
	display: flex;
}
.bl-phone-screen {
	width: 100%;
	height: 100%;
	border-radius: 26px;
	overflow-y: auto;
	overflow-x: hidden;
	background: #0a1230;
	/* content scrolls inside the screen, the frame itself never grows */
}
.bl-phone-screen .bl-page-inner {
	max-width: none; /* the phone frame itself is already the width constraint */
}
.bl-phone-screen .bl-navmenu {
	/* Same reasoning as .bl-menu-preview-frame .bl-navmenu: inside the phone frame there's
	   no real page around it to break out of, so keep the menu contained to the frame's
	   own width instead of trying to span 100vw (which overflow-x:hidden would just clip). */
	position: static;
	left: auto;
	right: auto;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}


/* Right panel: properties */
.bl-empty-props { color: var(--bl-text-dim); font-size: 13px; padding: 12px 4px; }
.bl-field { margin-bottom: 14px; }
.bl-field label {
	display: block; font-size: 12px; font-weight: 600;
	color: var(--bl-text-dim); margin-bottom: 6px;
}
.bl-field input[type="text"],
.bl-field input[type="number"],
.bl-field textarea,
.bl-field select {
	width: 100%; padding: 8px 10px; border-radius: 7px;
	border: 1px solid var(--bl-border); background: var(--bl-navy);
	color: var(--bl-text); font-family: 'Manrope', sans-serif; font-size: 13px;
}
.bl-field textarea { min-height: 70px; resize: vertical; }
.bl-color-row { display: flex; align-items: center; gap: 8px; }
.bl-color-row .wp-picker-container { flex: 1; }
.bl-color-row .iris-picker {
	position: relative;
	padding-bottom: 40px !important;
	max-width: 100%;
	box-sizing: border-box;
}
/* Iris computes .iris-strip's (the vertical hue bar) own height internally based on
   the `width` option passed to wpColorPicker() — that math doesn't reliably match the
   actual rendered height of .iris-picker-inner in every case (confirmed visually: the
   hue bar was rendering noticeably shorter than the saturation/brightness square next
   to it, leaving empty space below it instead of running the full height). Forcing it
   to match its parent's real height directly sidesteps relying on that internal
   calculation being correct for whatever width value this plugin passes in. */
.bl-color-row .iris-picker-inner { position: relative; }
/* height: 100% here previously cascaded through .iris-strip → its inner .ui-slider →
   whatever percentage-height ancestor each one resolved against, and in practice
   compounded into a bar taller than the picker itself instead of matching it. A fixed
   pixel value tied directly to .iris-picker-inner's own actual rendered height (280px,
   confirmed via devtools against the width:250 option this plugin passes to
   wpColorPicker() — see where that's set for the exact reasoning) is simpler and
   doesn't depend on percentage resolution working the same way through however many
   nested elements Iris happens to wrap the hue bar in. */
.bl-color-row .iris-strip {
	height: 280px !important;
	top: 0 !important;
}
.bl-color-row .iris-strip .ui-slider {
	height: 280px !important;
}
.bl-color-done {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 10px;
	background: var(--bl-magenta) !important;
	border-color: var(--bl-magenta) !important;
	color: #fff !important;
	font-weight: 600;
}
.bl-color-done:hover { filter: brightness(1.08); }
.bl-checkbox-field {
	display: flex; align-items: center; gap: 8px;
	margin-bottom: 14px; cursor: pointer; font-size: 13px; color: var(--bl-text);
}
.bl-checkbox-field input[type="checkbox"] { margin: 0; }
.bl-props-divider {
	border: none; border-top: 1px solid var(--bl-border); margin: 18px 0;
}
.bl-props-deselect-row { margin-bottom: 14px; }
.bl-props-deselect-btn {
	background: none; border: none; cursor: pointer; padding: 0;
	color: var(--bl-magenta); font-size: 12px; font-weight: 600; font-family: 'Manrope', sans-serif;
}
.bl-props-deselect-btn:hover { text-decoration: underline; }
.bl-image-preview {
	width: 100%; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden;
	background: var(--bl-surface-2); display: flex; align-items: center; justify-content: center;
	margin-bottom: 10px; border: 1px dashed var(--bl-border);
}
.bl-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.bl-image-preview .bl-image-placeholder { color: var(--bl-text-dim); font-size: 12px; }

/* Repeater field (social links, marquee images) */
.bl-field-repeater { margin-bottom: 18px; }
.bl-repeater-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.bl-repeater-row {
	display: flex; align-items: center; gap: 6px;
	background: var(--bl-navy); border: 1px solid var(--bl-border);
	border-radius: 8px; padding: 6px;
}
.bl-repeater-row-fields { display: flex; flex: 1; gap: 6px; min-width: 0; }
.bl-repeater-field { flex: 1; min-width: 0; }
.bl-repeater-field select,
.bl-repeater-field input[type="text"] {
	width: 100%; padding: 6px 8px; border-radius: 6px;
	border: 1px solid var(--bl-border); background: var(--bl-surface-2);
	color: var(--bl-text); font-size: 12px;
}
.bl-repeater-thumb {
	width: 34px; height: 34px; border-radius: 6px; flex-shrink: 0;
	background: var(--bl-surface-2); border: 1px dashed var(--bl-border);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; overflow: hidden;
}
.bl-repeater-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bl-repeater-thumb .dashicons { color: var(--bl-text-dim); font-size: 16px; }
.bl-repeater-remove {
	background: none; border: none; color: var(--bl-text-dim);
	cursor: pointer; flex-shrink: 0; padding: 4px;
}
.bl-repeater-remove:hover { color: #f87171; }
.bl-repeater-add { width: 100%; }

/* ---------- Menu editor ---------- */
.bl-menu-editor {
	background: var(--bl-surface);
	border: 1px solid var(--bl-border);
	border-radius: 12px;
	overflow: hidden;
}
.bl-menu-editor-topbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--bl-border);
	background: var(--bl-navy-deep);
}
.bl-menu-title-input {
	flex: 1;
	background: transparent;
	border: none;
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 600;
	padding: 6px 8px;
	border-radius: 6px;
}
.bl-menu-title-input:focus {
	outline: none;
	background: var(--bl-surface-2);
}
.bl-menu-editor-body { padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.bl-menu-editor-body .bl-panel-section { margin-bottom: 20px; }
/* The menu editor's panel is much wider than the page builder's narrow 260px sidebar, so
   the same width:100% that makes sense there would stretch a simple text/select field
   across the whole editor. Cap standalone fields to a sane width here; the item repeater
   rows (label + page picker side by side) are unaffected since they're not .bl-field. */
.bl-menu-editor-body > .bl-panel-section > .bl-field,
#bl-menu-logo-fields > .bl-field,
#bl-menu-color-fields > .bl-field {
	max-width: 320px;
}
/* The logo preview square defaults to width:100% of its container, which made sense in
   the page builder's narrow 260px sidebar (a big image widget preview) but produces an
   oversized square with lots of empty space here — a menu logo is small by nature. */
#bl-menu-logo-fields .bl-image-preview {
	width: 120px;
	max-width: 120px;
}
.bl-menu-preview-frame {
	background: var(--bl-navy-deep);
	border: 1px solid var(--bl-border);
	border-radius: 10px;
	overflow: hidden;
}
.bl-menu-preview-frame .bl-navmenu {
	/* Inside the editor's own preview frame the menu should stay contained instead of
	   breaking out to 100vw like it does embedded in a real page. */
	position: static;
	left: auto;
	right: auto;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

/* ---------- Upload overlay (shown while an image is uploading/optimizing) ---------- */
.bl-upload-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 18, 48, .85);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	z-index: 999999;
}
.bl-upload-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid var(--bl-border);
	border-top-color: var(--bl-magenta);
	border-radius: 50%;
	animation: bl-upload-spin .8s linear infinite;
}
@keyframes bl-upload-spin {
	to { transform: rotate(360deg); }
}
.bl-upload-text {
	color: var(--bl-text);
	font-family: 'Manrope', sans-serif;
	font-size: 13px;
	font-weight: 600;
}

/* ---------- Login / register forms ---------- */
.bl-auth-form-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	box-sizing: border-box;
	/* Fills the full viewport now, same as the dashboard shell — no longer overriding
	   .bl-frontend-context's min-height down to a short "just fits the form" box. */
}
.bl-auth-form {
	width: 100%;
	max-width: 360px;
	background: var(--bl-surface);
	border: 1px solid var(--bl-border);
	border-radius: 14px;
	padding: 28px 26px;
}
.bl-auth-title {
	font-family: 'Poppins', sans-serif;
	font-size: 19px;
	color: #fff;
	margin: 0 0 20px;
	text-align: center;
}
.bl-auth-form .bl-field { margin-bottom: 16px; }
.bl-auth-form .bl-field label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--bl-text-dim);
	margin-bottom: 6px;
}
.bl-auth-form .bl-field input {
	width: 100%;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid var(--bl-border);
	background: var(--bl-navy);
	color: var(--bl-text);
	font-family: 'Manrope', sans-serif;
	font-size: 13px;
	box-sizing: border-box;
}
.bl-auth-form .bl-field input:focus {
	outline: none;
	border-color: var(--bl-magenta);
}
.bl-auth-error {
	background: rgba(248,113,113,.1);
	border: 1px solid rgba(248,113,113,.3);
	color: #f87171;
	font-size: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	margin-bottom: 16px;
}
.bl-auth-submit {
	width: 100%;
	margin-top: 4px;
	text-align: center;
}

/* ---------- Admin registry (site-wide table of every user's Bearlinks) ---------- */
.bl-registry-empty { color: var(--bl-text-dim); font-size: 13px; }
.bl-registry-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--bl-border);
	border-radius: 10px;
}
.bl-registry-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.bl-registry-table th,
.bl-registry-table td {
	padding: 10px 14px;
	text-align: left;
	white-space: nowrap;
}
.bl-registry-table th {
	background: var(--bl-navy-deep);
	color: var(--bl-text-dim);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-weight: 600;
}
.bl-registry-table tbody tr:not(:last-child) {
	border-bottom: 1px solid var(--bl-border);
}
.bl-registry-table code {
	background: var(--bl-surface-2);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 12px;
}
.bl-registry-status {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 20px;
	font-size: 11px;
	text-transform: capitalize;
}
.bl-registry-status-publish { background: rgba(74,222,128,.15); color: #4ade80; }
.bl-registry-status-draft,
.bl-registry-status-pending { background: rgba(251,191,36,.15); color: #fbbf24; }

/* ---------- Products + Inventory ---------- */
.bl-whatsapp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bl-whatsapp-row input {
	flex: 1; min-width: 180px;
	padding: 9px 12px; border-radius: 8px; border: 1px solid var(--bl-border);
	background: var(--bl-navy); color: var(--bl-text); font-family: 'Manrope', sans-serif; font-size: 13px;
}
.bl-whatsapp-status { font-size: 12px; color: #4ade80; opacity: 0; transition: opacity .2s ease; }
.bl-whatsapp-status.is-visible { opacity: 1; }
.bl-field-hint { font-size: 12px; color: var(--bl-text-dim); margin: 0 0 12px; }

.bl-product-card { display: flex; flex-direction: column; }
.bl-product-card-image {
	width: 100%; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden;
	background: var(--bl-surface-2); margin-bottom: 10px;
}
.bl-product-card-image img { width: 100%; height: 100%; object-fit: cover; }

/* Variations table */
.bl-attributes-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.bl-attribute-row {
	display: flex; flex-direction: column; gap: 8px;
	background: var(--bl-navy); border: 1px solid var(--bl-border); border-radius: 8px; padding: 10px;
}
.bl-attribute-row-top { display: flex; gap: 8px; align-items: center; }
.bl-attribute-row input[type="text"] {
	width: 100%; box-sizing: border-box;
	padding: 8px 10px; border-radius: 6px; border: 1px solid var(--bl-border);
	background: var(--bl-surface); color: var(--bl-text); font-family: 'Manrope', sans-serif; font-size: 13px;
}
/* .bl-attribute-row-top > input specifically (not just .bl-attribute-name alone) to
   out-specificity the generic "width: 100%" rule right above — that rule was winning
   over the plain .bl-attribute-name class before (equal specificity, but it's declared
   later in the file), which let the name field grow to fill the whole row and push
   "✕ Quitar" off the edge, invisible/unclickable past the row's own border. */
.bl-attribute-row-top > .bl-attribute-name {
	width: 180px; flex: 0 0 180px; min-width: 0;
}
.bl-attribute-options { width: 100%; }
.bl-attribute-row-top > .bl-attribute-remove {
	flex: 0 0 auto; flex-shrink: 0; white-space: nowrap;
}
@media (max-width: 480px) {
	.bl-attribute-row-top { flex-wrap: wrap; }
	.bl-attribute-row-top > .bl-attribute-name { width: 100%; flex-basis: 100%; }
}

.bl-variations-table-wrap { overflow-x: auto; border: 1px solid var(--bl-border); border-radius: 10px; margin-top: 14px; }
.bl-variations-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bl-variations-table th, .bl-variations-table td { padding: 8px 10px; text-align: left; white-space: nowrap; }
.bl-variations-table th { background: var(--bl-navy-deep); color: var(--bl-text-dim); font-size: 11px; text-transform: uppercase; font-weight: 600; }
.bl-variations-table tbody tr:not(:last-child) { border-bottom: 1px solid var(--bl-border); }
.bl-variations-table input {
	width: 90px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--bl-border);
	background: var(--bl-navy); color: var(--bl-text); font-family: 'Manrope', sans-serif; font-size: 13px;
}
.bl-variation-thumb {
	width: 36px; height: 36px; border-radius: 6px; overflow: hidden; cursor: pointer;
	background: var(--bl-surface-2); display: flex; align-items: center; justify-content: center;
}
.bl-variation-thumb img { width: 100%; height: 100%; object-fit: cover; }

.bl-stock-cell { display: flex; align-items: center; gap: 8px; }
.bl-stock-chip {
	display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600;
	white-space: nowrap;
}
.bl-stock-chip-in { background: rgba(74,222,128,.15); color: #4ade80; }
.bl-stock-chip-out { background: rgba(248,113,113,.15); color: #f87171; }

.bl-product-image-preview {
	width: 140px; height: 140px; border-radius: 10px; overflow: hidden; cursor: pointer;
	background: var(--bl-surface-2); display: flex; align-items: center; justify-content: center;
	border: 1px dashed var(--bl-border); margin-bottom: 10px;
}
.bl-product-image-preview img { width: 100%; height: 100%; object-fit: cover; }

/* Public-facing product/catalog widgets (rendered on the published Bearlink page) */
.bl-widget-product {
	border-radius: 14px; overflow: hidden;
	background: var(--bl-bg, var(--bl-surface));
	color: var(--bl-text, inherit);
	border: var(--bl-border-width, 0px) solid var(--bl-block, transparent);
}
.bl-widget-product-image { width: 100%; aspect-ratio: 1/1; overflow: hidden; background: var(--bl-surface-2); }
.bl-widget-product-image img { width: 100%; height: 100%; object-fit: cover; }
.bl-widget-product-body { padding: 14px; }
.bl-widget-product-name { font-weight: 700; font-size: 15px; margin: 0 0 4px; }
.bl-widget-product-price-row { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.bl-widget-product-price { font-size: 14px; opacity: .85; }
.bl-widget-product-price-row .bl-stock-chip {
	display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600;
	white-space: nowrap;
}
.bl-widget-product-price-row .bl-stock-chip-in { background: rgba(74,222,128,.15); color: #4ade80; }
.bl-widget-product-price-row .bl-stock-chip-out { background: rgba(248,113,113,.15); color: #f87171; }
.bl-widget-product-variants { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bl-widget-product-variant-btn {
	padding: 6px 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,.25);
	background: transparent; color: inherit; font-size: 12px; cursor: pointer; font-family: 'Manrope', sans-serif;
}
.bl-widget-product-variant-btn.is-selected { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.6); }
.bl-widget-product-variant-btn:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.bl-widget-order-btn {
	display: block; width: 100%; text-align: center; padding: 10px; border-radius: 10px;
	border: none; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none;
	background: #25D366; color: #fff;
}
.bl-widget-order-btn:disabled { background: rgba(255,255,255,.15); color: rgba(255,255,255,.5); cursor: not-allowed; }

.bl-widget-catalog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.bl-widget-catalog-item {
	border-radius: 12px; overflow: hidden; text-decoration: none; display: block;
	background: var(--bl-bg, var(--bl-surface));
	color: var(--bl-text, inherit);
	border: var(--bl-border-width, 0px) solid var(--bl-block, transparent);
}
.bl-widget-catalog-item-image { width: 100%; aspect-ratio: 1/1; background: var(--bl-surface-2); overflow: hidden; }
.bl-widget-catalog-item-image img { width: 100%; height: 100%; object-fit: cover; }
.bl-widget-catalog-item-body { padding: 8px 10px; }
.bl-widget-catalog-item-name { font-size: 12px; font-weight: 600; margin: 0 0 2px; }
.bl-widget-catalog-item-price { font-size: 11px; opacity: .8; margin: 0; }

/* ---------- Orders tray ---------- */
.bl-orders-grid { display: flex; flex-direction: column; gap: 12px; }
.bl-order-card {
	background: var(--bl-navy); border: 1px solid var(--bl-border); border-radius: 10px; padding: 14px;
}
.bl-order-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bl-order-date { font-size: 12px; color: var(--bl-text-dim); }
.bl-order-status-chip {
	display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
}
.bl-order-status-chip-pending { background: rgba(251,191,36,.15); color: #fbbf24; }
.bl-order-status-chip-confirmed { background: rgba(74,222,128,.15); color: #4ade80; }
.bl-order-status-chip-rejected { background: rgba(248,113,113,.15); color: #f87171; }
.bl-order-items { list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; }
.bl-order-items li { padding: 3px 0; }
.bl-order-contact { font-size: 12px; color: var(--bl-text-dim); border-top: 1px solid var(--bl-border); padding-top: 8px; margin-bottom: 10px; }
.bl-order-contact div { padding: 2px 0; }
.bl-order-contact-link { color: var(--bl-magenta); text-decoration: none; font-weight: 600; }
.bl-order-contact-link:hover { text-decoration: underline; }
.bl-order-actions { display: flex; gap: 8px; }
.bl-order-table-chip {
	display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 20px;
	background: rgba(99,102,241,.15); color: var(--bl-indigo); font-size: 11px; font-weight: 600;
}
.bl-order-total { font-size: 13px; font-weight: 700; margin: 4px 0 10px; }

/* ---------- Tables config ---------- */
.bl-tables-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.bl-table-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 8px 6px 12px; border-radius: 20px;
	background: var(--bl-surface-2); border: 1px solid var(--bl-border);
	color: var(--bl-text); font-size: 13px; font-weight: 600;
}
.bl-table-chip-remove {
	width: 18px; height: 18px; border-radius: 50%; border: none; cursor: pointer;
	background: rgba(255,255,255,.1); color: var(--bl-text-dim); font-size: 14px; line-height: 1;
	display: flex; align-items: center; justify-content: center; padding: 0;
}
.bl-table-chip-remove:hover { background: rgba(248,113,113,.2); color: #f87171; }
.bl-tables-add-row { display: flex; gap: 8px; }
.bl-tables-add-row input {
	flex: 1; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--bl-border);
	background: var(--bl-navy); color: var(--bl-text); font-family: 'Manrope', sans-serif; font-size: 13px;
}

/* ---------- Sales summary ("Caja") ---------- */
.bl-summary-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px;
}
.bl-summary-card {
	background: var(--bl-navy); border: 1px solid var(--bl-border); border-radius: 10px; padding: 16px;
}
.bl-summary-card-label { font-size: 11px; color: var(--bl-text-dim); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.bl-summary-card-value { font-size: 22px; font-weight: 700; font-family: 'Poppins', sans-serif; }

/* ---------- Spotify widget preview (builder placeholder — see dashboard.js's own
   comment on why the real Spotify iframe isn't loaded here) ---------- */
.bl-widget-spotify-preview {
	padding: 30px 16px; text-align: center;
	border-radius: 14px; overflow: hidden;
	background: var(--bl-bg, var(--bl-surface));
	color: var(--bl-text-dim);
	border: var(--bl-border-width, 0px) solid var(--bl-block, transparent);
}
.bl-widget-spotify-preview .dashicons { color: var(--bl-indigo); }
.bl-widget-spotify-preview .dashicons-playlist-audio { color: #1DB954; /* Spotify's own brand green — this specific icon only, not the shared default just above, which every other widget reusing this same placeholder style (Mapa, Reserva, PDF) also uses with its own unrelated icon. Not applied anywhere in the real published Spotify embed, which is entirely Spotify's own fixed design. */ }

/* ---------- Page background settings panel ---------- */
.bl-bg-type-row {
	display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 16px;
}
.bl-bg-type-btn {
	padding: 10px 8px; border-radius: 8px;
	background: var(--bl-surface-2); border: 1px solid var(--bl-border);
	color: var(--bl-text); font-size: 12px; font-weight: 600; font-family: 'Manrope', sans-serif;
	cursor: pointer; text-align: center;
}
.bl-bg-type-btn:hover { border-color: var(--bl-magenta); }
.bl-bg-type-btn.is-active { background: var(--bl-indigo); border-color: var(--bl-indigo); color: #fff; }
.bl-bg-image-preview {
	width: 100%; height: 100px; border-radius: 10px; overflow: hidden; cursor: pointer;
	background: var(--bl-surface-2); display: flex; align-items: center; justify-content: center;
	border: 1px dashed var(--bl-border);
}
.bl-bg-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.bl-bg-overlay-row { display: flex; align-items: center; gap: 10px; }
.bl-bg-overlay-row input[type="range"] { flex: 1; accent-color: var(--bl-magenta); }
.bl-bg-overlay-value { font-size: 12px; color: var(--bl-text-dim); min-width: 32px; text-align: right; }

/* ---------- Newsletter subscribers table ---------- */
.bl-newsletter-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bl-newsletter-table th, .bl-newsletter-table td { padding: 10px 12px; text-align: left; }
.bl-newsletter-table th { background: var(--bl-navy-deep); color: var(--bl-text-dim); font-size: 11px; text-transform: uppercase; font-weight: 600; }
.bl-newsletter-table tbody tr:not(:last-child) { border-bottom: 1px solid var(--bl-border); }

/* ---------- Newsletter widget (builder preview) ---------- */
.bl-widget-newsletter {
	border-radius: 14px; padding: 18px;
	background: var(--bl-bg, var(--bl-surface));
	color: var(--bl-text, var(--bl-text));
	border: var(--bl-border-width, 0px) solid var(--bl-block, transparent);
}
.bl-widget-newsletter-title { font-weight: 700; font-size: 16px; margin-bottom: 4px; font-family: 'Poppins', sans-serif; }
.bl-widget-newsletter-subtitle { font-size: 13px; opacity: .8; margin-bottom: 14px; }
.bl-newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-newsletter-email {
	flex: 1; min-width: 100px; box-sizing: border-box;
	padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25);
	background: rgba(255,255,255,.06); color: inherit; font-family: 'Manrope', sans-serif; font-size: 13px;
}
.bl-newsletter-submit {
	padding: 10px 16px; border-radius: 8px; border: none; cursor: not-allowed;
	background: var(--bl-block, #6366f1); color: #fff; font-weight: 600; font-size: 13px; font-family: 'Manrope', sans-serif;
	opacity: .8; /* Slightly dimmed — this preview's inputs/button are always disabled (see dashboard.js's own newsletter preview case), a visual cue that this is a preview, not the real interactive form. */
}

/* ---------- Availability screen ---------- */
.bl-availability-days { display: flex; gap: 6px; flex-wrap: wrap; }
.bl-availability-day-btn {
	padding: 8px 12px; border-radius: 8px;
	background: var(--bl-surface-2); border: 1px solid var(--bl-border);
	color: var(--bl-text); font-size: 12px; font-weight: 600; font-family: 'Manrope', sans-serif;
	cursor: pointer; text-transform: capitalize;
}
.bl-availability-day-btn.is-active { background: var(--bl-indigo); border-color: var(--bl-indigo); color: #fff; }
.bl-availability-time-row { display: flex; gap: 14px; margin-top: 16px; }
.bl-availability-time-row .bl-field { flex: 1; }
.bl-availability-time-row input[type="time"] {
	width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--bl-border);
	background: var(--bl-navy); color: var(--bl-text); font-family: 'Manrope', sans-serif; font-size: 13px;
	color-scheme: dark; /* Without this, the native clock icon on this input stays a fixed dark color regardless of any color/background CSS applied — confirmed as a known, documented browser limitation (the icon is an internal SVG the color property genuinely can't reach) — near-invisible against this dark background otherwise. color-scheme:dark tells the browser to use its own light-on-dark variant of the control instead. */
}

/* ---------- Analytics charts ---------- */
.bl-chart-wrap {
	position: relative; width: 100%; height: 260px; margin-bottom: 20px;
	/* Chart.js with maintainAspectRatio:false (used so the chart's height doesn't
	   grow/shrink to match however many labels it has, which would make a chart
	   with 10 pages listed absurdly tall) sizes its own <canvas> to fill this
	   wrapper's own explicit height — Chart.js needs a parent with a real,
	   non-auto height to size against for this option to work at all, confirmed
	   directly against Chart.js's own responsive-chart documentation. */
}
.bl-chart-wrap canvas { max-width: 100%; }

/* ---------- PDF upload field ---------- */
.bl-pdf-upload-status {
	display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
	padding: 10px 12px; border-radius: 8px; background: var(--bl-navy); border: 1px solid var(--bl-border);
	font-size: 13px; color: var(--bl-text);
}
.bl-pdf-upload-status .dashicons { color: var(--bl-indigo); flex-shrink: 0; }