/* ================= INS Link — Bio page builder (Elementor style) ================= */

.ins-builder{
	--bx-radius:16px;
	background:var(--ins-bg-2);
	border:1px solid var(--ins-border);
	border-radius:22px;
	overflow:hidden;
	box-shadow:0 24px 60px -40px rgba(0,0,0,.5);
}

/* ---------- Toolbar ---------- */
.ins-bx-bar{
	display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
	padding:13px 18px;border-bottom:1px solid var(--ins-border);
	background:var(--ins-card);
}
.ins-bx-bar-l{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ins-bx-bar-l b{font-size:15px}
.ins-bx-bar-l code{font-size:11.5px;color:var(--ins-muted);background:var(--ins-card-2);padding:4px 10px;border-radius:8px}
.ins-bx-bar-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.ins-bx-devices{display:inline-flex;background:var(--ins-card-2);border:1px solid var(--ins-border);border-radius:999px;padding:3px;gap:2px}
.ins-bx-devices button{
	border:0;background:0;cursor:pointer;padding:6px 12px;border-radius:999px;
	color:var(--ins-muted);font-family:inherit;font-size:14px;line-height:1;transition:.2s
}
.ins-bx-devices button.on{background:var(--ins-grad);color:#241c05}

.ins-bx-status{font-size:12px;color:var(--ins-muted);min-width:74px;transition:.2s}
.ins-bx-status.ok{color:var(--ins-primary);font-weight:800}
.ins-bx-status.err{color:var(--ins-danger);font-weight:800}

/* ---------- Grid ---------- */
.ins-bx-grid{
	display:grid;
	grid-template-columns:250px minmax(0,1fr) 340px;
	min-height:640px;
}

/* ---------- Palette ---------- */
.ins-bx-pal{
	border-inline-start:1px solid var(--ins-border);
	background:var(--ins-card);
	padding:16px;overflow:auto;max-height:82vh;
	order:3;
}
.ins-bx-pal-head b{display:block;font-size:14px}
.ins-bx-pal-head small{color:var(--ins-muted);font-size:11.5px}
.ins-bx-search{
	width:100%;margin:12px 0 14px;padding:9px 12px;border-radius:11px;font-size:12.5px;
	border:1px solid var(--ins-border);background:var(--ins-bg-2);color:var(--ins-text);font-family:inherit
}
.ins-bx-group{margin-bottom:16px}
.ins-bx-group-t{
	font-size:11px;font-weight:900;color:var(--ins-muted);letter-spacing:.4px;
	margin-bottom:8px;padding-inline-start:2px
}
.ins-bx-widgets{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ins-bx-w{
	position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
	padding:12px 6px;border-radius:13px;cursor:grab;user-select:none;text-align:center;
	background:var(--ins-card-2);border:1px solid var(--ins-border);transition:.18s
}
.ins-bx-w:hover{border-color:var(--ins-primary);transform:translateY(-2px);box-shadow:0 10px 22px -18px var(--ins-primary)}
.ins-bx-w:active{cursor:grabbing}
.ins-bx-w.dragging{opacity:.5;border-style:dashed}
.ins-bx-w-ico{font-size:19px;line-height:1}
.ins-bx-w-name{font-size:11.5px;font-weight:700;line-height:1.5}
.ins-bx-w.locked{opacity:.5;cursor:not-allowed}
.ins-bx-lock{position:absolute;top:5px;left:6px;font-size:10px}
.ins-bx-w.hide{display:none}
.ins-bx-upsell{display:block;font-size:11.5px;text-align:center;padding:10px;border-radius:12px;background:var(--ins-grad-soft);border:1px solid var(--ins-ring)}

/* ---------- Canvas ---------- */
.ins-bx-canvas{
	order:2;padding:22px;display:grid;grid-template-columns:1fr;gap:20px;
	background:
		radial-gradient(circle at 1px 1px,var(--ins-border) 1px,transparent 0) 0 0/22px 22px;
	overflow:auto;max-height:82vh;
	justify-items:center;
}

.ins-bx-phone{
	position:relative;width:340px;max-width:100%;
	border:9px solid var(--ins-card);border-radius:38px;background:#000;
	box-shadow:0 30px 60px -30px rgba(0,0,0,.6);transition:width .3s
}
.ins-bx-phone.tablet{width:520px;border-radius:26px}
.ins-bx-phone.desktop{width:100%;border-radius:16px;border-width:6px}
.ins-bx-notch{
	position:absolute;top:6px;left:50%;transform:translateX(-50%);
	width:96px;height:6px;border-radius:99px;background:rgba(255,255,255,.25);z-index:2
}
.ins-bx-phone.desktop .ins-bx-notch{display:none}
.ins-bx-screen{border-radius:29px;overflow:hidden;background:#000}
.ins-bx-phone.desktop .ins-bx-screen{border-radius:11px}
.ins-bx-screen iframe{width:100%;height:620px;border:0;display:block}
.ins-bx-phone.desktop .ins-bx-screen iframe{height:560px}

/* ---------- Structure list ---------- */
.ins-bx-list-wrap{width:100%;max-width:560px}
.ins-bx-list-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.ins-bx-list-head b{font-size:13.5px}
.ins-bx-list-head small{color:var(--ins-muted);font-size:11.5px}

.ins-cv{display:flex;flex-direction:column;gap:8px;min-height:90px;border-radius:16px;padding:4px;transition:.2s}
.ins-cv.drop{background:var(--ins-grad-soft);outline:2px dashed var(--ins-primary);outline-offset:3px}

.ins-cv-item{
	display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:14px;
	background:var(--ins-card);border:1px solid var(--ins-border);cursor:pointer;transition:.16s
}
.ins-cv-item:hover{border-color:var(--ins-primary);transform:translateX(-2px)}
.ins-cv-item.dragging{opacity:.45;border-style:dashed}
.ins-cv-item.active{border-color:var(--ins-primary);box-shadow:0 0 0 3px var(--ins-ring)}
.ins-cv-item.off{opacity:.55}
.ins-cv-item.off .ins-cv-meta b{text-decoration:line-through}
.ins-cv-handle{cursor:grab;color:var(--ins-muted);font-size:15px;line-height:1}
.ins-cv-handle:active{cursor:grabbing}
.ins-cv-ico{font-size:17px}
.ins-cv-meta{flex:1;min-width:0}
.ins-cv-meta b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ins-cv-meta small{display:block;font-size:11px;color:var(--ins-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ins-cv-tools{display:flex;gap:3px;opacity:.55;transition:.2s}
.ins-cv-item:hover .ins-cv-tools{opacity:1}
.ins-cv-tools button{
	border:0;background:var(--ins-card-2);cursor:pointer;width:28px;height:28px;border-radius:9px;
	font-size:12px;color:var(--ins-text);transition:.15s;font-family:inherit
}
.ins-cv-tools button:hover{background:var(--ins-primary);color:#241c05}
.ins-cv-tools button.danger:hover{background:var(--ins-danger);color:#fff}

.ins-cv-placeholder{height:44px;border-radius:14px;border:2px dashed var(--ins-primary);background:var(--ins-grad-soft)}

.ins-cv-empty{
	display:flex;flex-direction:column;align-items:center;gap:5px;padding:34px 18px;text-align:center;
	border:2px dashed var(--ins-border);border-radius:16px;color:var(--ins-muted)
}
.ins-cv-empty-ico{font-size:30px}
.ins-cv-empty b{color:var(--ins-text);font-size:14px}
.ins-cv-empty span{font-size:12px}

/* ---------- Settings panel ---------- */
.ins-bx-panel{
	order:1;border-inline-end:1px solid var(--ins-border);
	background:var(--ins-card);padding:16px;overflow:auto;max-height:82vh
}
.ins-bx-panel-empty{
	display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
	padding:46px 16px;color:var(--ins-muted)
}
.ins-bx-ico-lg{font-size:34px}
.ins-bx-panel-empty b{color:var(--ins-text);font-size:14px}
.ins-bx-panel-empty span{font-size:12px;line-height:2}

.ins-bx-head{display:flex;align-items:flex-start;gap:10px;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--ins-border)}
.ins-bx-ico{font-size:22px}
.ins-bx-head b{display:block;font-size:14px}
.ins-bx-head small{display:block;font-size:11px;color:var(--ins-muted);line-height:1.8}
.ins-bx-close{
	margin-inline-start:auto;border:0;background:var(--ins-card-2);width:26px;height:26px;border-radius:8px;
	cursor:pointer;color:var(--ins-muted);font-size:17px;line-height:1;font-family:inherit
}
.ins-bx-close:hover{background:var(--ins-danger);color:#fff}

.ins-bx-form .ins-field{margin-bottom:11px}
.ins-bx-form .ins-label{font-size:12px}
.ins-bx-form input,.ins-bx-form select,.ins-bx-form textarea{font-size:13px;padding:9px 11px;border-radius:11px}
.ins-bx-form .ins-grid{gap:8px}
.ins-bx-actions{margin-top:16px;padding-top:14px;border-top:1px solid var(--ins-border)}

/* Switch */
.ins-switch{display:flex;align-items:center;gap:9px;font-size:12.5px;cursor:pointer;margin:12px 0}
.ins-switch input{position:absolute;opacity:0;width:0;height:0}
.ins-switch-ui{
	width:40px;height:22px;border-radius:999px;background:var(--ins-border);position:relative;transition:.2s;flex-shrink:0
}
.ins-switch-ui::after{
	content:"";position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;
	background:#fff;transition:.22s;box-shadow:0 1px 3px rgba(0,0,0,.3)
}
.ins-switch input:checked + .ins-switch-ui{background:var(--ins-grad)}
.ins-switch input:checked + .ins-switch-ui::after{transform:translateX(-18px)}

/* Toast */
.ins-bx-toast{
	position:fixed;bottom:22px;left:22px;z-index:9999;
	background:var(--ins-card);border:1px solid var(--ins-border);border-inline-start:4px solid var(--ins-primary);
	border-radius:13px;padding:12px 18px;font-size:13px;font-weight:700;color:var(--ins-text);
	box-shadow:0 18px 40px -20px rgba(0,0,0,.6);
	transform:translateY(20px);opacity:0;transition:.25s;pointer-events:none
}
.ins-bx-toast.show{transform:translateY(0);opacity:1}
.ins-bx-toast.err{border-inline-start-color:var(--ins-danger)}

/* ---------- Responsive ---------- */
@media(max-width:1280px){
	.ins-bx-grid{grid-template-columns:220px minmax(0,1fr) 300px}
}
@media(max-width:1080px){
	.ins-bx-grid{grid-template-columns:1fr}
	.ins-bx-pal,.ins-bx-panel,.ins-bx-canvas{max-height:none;border:0;border-top:1px solid var(--ins-border)}
	.ins-bx-pal{order:1}
	.ins-bx-canvas{order:2}
	.ins-bx-panel{order:3}
	.ins-bx-widgets{grid-template-columns:repeat(3,1fr)}
	.ins-bx-phone{width:100%;max-width:380px}
}
@media(max-width:520px){
	.ins-bx-widgets{grid-template-columns:repeat(2,1fr)}
	.ins-bx-bar{flex-direction:column;align-items:stretch}
	.ins-bx-bar-r{justify-content:space-between}
	.ins-bx-canvas{padding:14px}
}

/* ============ Full-screen builder layout ============ */
.ins-bx-back{
	display:inline-flex;align-items:center;justify-content:center;
	width:30px;height:30px;border-radius:10px;flex-shrink:0;
	background:var(--ins-card-2);border:1px solid var(--ins-border);
	color:var(--ins-text);font-size:15px;line-height:1;text-decoration:none;transition:.18s
}
.ins-bx-back:hover{background:var(--ins-grad);color:#241c05;border-color:transparent}

.ins-bx-pagesel{
	padding:6px 10px;border-radius:10px;font-size:12px;font-family:inherit;
	background:var(--ins-bg-2);border:1px solid var(--ins-border);color:var(--ins-text)
}

/* Use the real viewport height so every panel is fully visible */
.ins-builder{display:flex;flex-direction:column;min-height:calc(100vh - 120px)}
.ins-bx-grid{flex:1;min-height:0}
.ins-bx-pal,.ins-bx-panel,.ins-bx-canvas{max-height:none;height:100%;overflow:auto}

/* Wide screens: preview and structure list side by side */
@media(min-width:1400px){
	.ins-bx-grid{grid-template-columns:280px minmax(0,1fr) 380px}
	.ins-bx-canvas{
		grid-template-columns:auto minmax(320px,1fr);
		align-items:start;justify-items:stretch;gap:26px
	}
	.ins-bx-phone{position:sticky;top:12px;justify-self:center}
	.ins-bx-list-wrap{max-width:none}
	.ins-bx-widgets{grid-template-columns:1fr 1fr}
}
@media(min-width:1700px){
	.ins-bx-screen iframe{height:700px}
}