/* SmartX Calculator — theme: deep navy + electric blue accent, on a soft white/cream canvas */

.smartx-wrap{
	--smartx-dark:#0b1b33;
	--smartx-dark-2:#132a4d;
	--smartx-accent:#1e63e9;
	--smartx-accent-2:#3f7cff;
	--smartx-bg:#f5f7fb;
	--smartx-card:#ffffff;
	--smartx-border:#e4e9f2;
	--smartx-text:#1c2733;
	--smartx-muted:#6b7686;
	--smartx-green:#25d366;
	font-family:'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
	color:var(--smartx-text);
	max-width:1100px;
	margin:0 auto;
}
.smartx-wrap *{ box-sizing:border-box; }

.smartx-card{
	background:var(--smartx-card);
	border-radius:18px;
	box-shadow:0 10px 40px rgba(11,27,51,0.10);
	overflow:hidden;
	border:1px solid var(--smartx-border);
}

.smartx-card-head{
	background:linear-gradient(135deg, var(--smartx-dark) 0%, var(--smartx-dark-2) 100%);
	color:#fff;
	padding:26px 32px;
}
.smartx-card-head-top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
}
.smartx-card-head h2{ margin:0 0 6px; font-size:22px; font-weight:700; letter-spacing:-0.01em; color:#ffffff !important; opacity:1 !important; }
.smartx-card-head p{ margin:0; color:#c7d3ea !important; opacity:1 !important; font-size:13.5px; }

.smartx-header-whatsapp{
	flex-shrink:0;
	display:flex; align-items:center; gap:8px;
	background:var(--smartx-green);
	color:#fff;
	border:none;
	padding:11px 18px;
	font-size:13.5px;
	font-weight:700;
	border-radius:10px;
	cursor:pointer;
	transition:filter .18s ease, transform .12s ease;
}
.smartx-header-whatsapp:hover{ filter:brightness(1.06); transform:translateY(-1px); }

.smartx-btn-row{ display:flex; gap:10px; margin-bottom:18px; }
.smartx-btn-row .smartx-btn-primary{ margin-bottom:0; }
.smartx-btn-reset{
	flex-shrink:0;
	width:48px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#fbfcfe;
	border:1.5px solid var(--smartx-border);
	border-radius:10px;
	cursor:pointer;
	transition:all .15s ease;
}
.smartx-btn-reset span{
	font-size:20px;
	line-height:1;
	color:#6b7686 !important;
	display:block;
}
.smartx-btn-reset:hover{ border-color:var(--smartx-accent); }
.smartx-btn-reset:hover span{ color:#1e63e9 !important; }

.smartx-material-desc{
	font-size:12.5px;
	color:var(--smartx-muted);
	line-height:1.6;
	background:var(--smartx-bg);
	border-radius:10px;
	padding:10px 12px;
	margin-top:10px;
	animation:smartxFadeIn .25s ease;
}

.smartx-video-toggle{
	display:block;
	background:none;
	border:none;
	color:var(--smartx-accent);
	font-size:12.5px;
	font-weight:600;
	padding:8px 0 0;
	cursor:pointer;
}
.smartx-ig-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	background:linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
	color:#fff;
	text-decoration:none;
	font-size:13px;
	font-weight:700;
	padding:10px;
	border-radius:10px;
}

/* ===== Main grid: LEFT calculator form + RIGHT media panel ===== */
.smartx-main{
	display:grid;
	grid-template-columns:1fr 300px;
}
.smartx-form-col{ padding:26px 30px; border-right:1px solid var(--smartx-border); }

.smartx-media-col{
	background:var(--smartx-dark);
	padding:24px;
	display:flex;
	flex-direction:column;
	gap:16px;
}
.smartx-media-col .media-label{
	color:#8fa4c9; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.smartx-media-image{
	width:100%; aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:#1a2f52;
}
.smartx-media-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.smartx-media-video{ width:100%; border-radius:14px; overflow:hidden; background:#000; }
.smartx-media-video video{ width:100%; display:block; }
.smartx-media-empty{ color:#5f78a3; font-size:12.5px; text-align:center; padding:30px 10px; }

/* ===== Material picker grid (first thing in the form) ===== */
.smartx-material-section{ margin-bottom:24px; }
.smartx-material-section h3{ font-size:15px; margin:0 0 14px; color:var(--smartx-dark); }
.material-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.material-box{
	position:relative;
	border:1.5px solid var(--smartx-border); border-radius:12px; padding:14px; cursor:pointer;
	transition:border-color .15s ease, box-shadow .15s ease, transform .12s ease; background:#fbfcfe;
}
.material-box:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(11,27,51,0.08); }
.material-box.selected{ border-color:var(--smartx-accent); background:#eef4ff; box-shadow:0 0 0 3px rgba(30,99,233,0.12); }
.material-box.selected::after{
	content:"\2713";
	position:absolute; top:8px; right:8px;
	width:18px; height:18px;
	background:var(--smartx-accent);
	color:#fff;
	font-size:11px;
	font-weight:700;
	border-radius:50%;
	display:flex; align-items:center; justify-content:center;
}
.material-box .m-name{ font-size:14px; font-weight:700; color:var(--smartx-dark); margin-bottom:4px; }
.material-box .m-desc{ font-size:12px; color:var(--smartx-muted); line-height:1.5; }

/* Shared "click to reveal" description shown below the grid — mobile only (see media query below) */
.smartx-material-desc{ display:none; }

.smartx-field{ margin-bottom:18px; }
.smartx-field > label{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--smartx-dark); margin-bottom:6px; }

.smartx-wrap select,
.smartx-wrap input[type=number]{
	width:100%;
	padding:11px 14px;
	border:1.5px solid var(--smartx-border);
	border-radius:10px;
	font-size:14px;
	background:#fbfcfe;
	color:var(--smartx-text);
	transition:border-color .18s ease, box-shadow .18s ease;
}
.smartx-wrap select:focus,
.smartx-wrap input[type=number]:focus{
	outline:none;
	border-color:var(--smartx-accent);
	box-shadow:0 0 0 3px rgba(30,99,233,0.12);
}

/* Width + Height side by side, icon inline inside each input */
.size-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:10px; }
.size-input{
	display:flex; align-items:center; gap:8px;
	border:1.5px solid var(--smartx-border); border-radius:10px; background:#fbfcfe; padding:0 12px;
	transition:border-color .18s ease, box-shadow .18s ease;
}
.size-input:focus-within{ border-color:var(--smartx-accent); box-shadow:0 0 0 3px rgba(30,99,233,0.12); }
.size-input svg{ color:var(--smartx-muted); flex-shrink:0; }
.size-input input[type=number]{ border:none; background:transparent; padding:11px 0; }
.size-input input[type=number]:focus{ box-shadow:none; }

/* Single shared unit toggle (inch / cm / mm) */
.unit-btns{ display:flex; gap:6px; }
.unit-btns button{
	flex:1;
	padding:7px 4px;
	border:1.5px solid var(--smartx-border);
	background:#fbfcfe;
	border-radius:8px;
	font-size:12px;
	font-weight:700;
	color:var(--smartx-muted);
	cursor:pointer;
	transition:all .15s ease;
}
.unit-btns button.active{ background:var(--smartx-accent); color:#fff; border-color:var(--smartx-accent); }

.smartx-toggle{ display:flex; border:1.5px solid var(--smartx-border); border-radius:10px; overflow:hidden; }
.smartx-toggle button{
	flex:1; padding:11px 10px; background:#fbfcfe; border:none;
	display:flex; align-items:center; justify-content:center; gap:7px;
	font-size:13px; font-weight:600; color:var(--smartx-muted); cursor:pointer; transition:all .18s ease;
}
.smartx-toggle button + button{ border-left:1.5px solid var(--smartx-border); }
.smartx-toggle button.active{ background:var(--smartx-accent); color:#fff; }

.smartx-moq-note{
	background:#fff7e6;
	border:1px solid #ffe2a8;
	color:#8a5b00;
	font-size:13px;
	padding:12px 14px;
	border-radius:10px;
	margin-bottom:18px;
	line-height:1.5;
	animation:smartxFadeIn .3s ease;
}
.smartx-moq-note b{ color:#6b4300; }

.smartx-btn-primary{
	width:100%;
	background:var(--smartx-accent);
	color:#fff;
	border:none;
	padding:14px 20px;
	font-size:15px;
	font-weight:700;
	border-radius:10px;
	cursor:pointer;
	transition:transform .12s ease, background .18s ease;
	box-shadow:0 8px 20px rgba(30,99,233,0.25);
}
.smartx-btn-primary:hover{ background:var(--smartx-accent-2); transform:translateY(-1px); }

.smartx-result{
	background:var(--smartx-bg);
	border:1px solid var(--smartx-border);
	border-radius:14px;
	padding:20px;
	margin-top:20px;
	animation:smartxSlideUp .35s ease;
}
.smartx-result-badge{
	display:inline-block;
	background:#e7edfb;
	color:var(--smartx-accent);
	font-size:11.5px;
	font-weight:700;
	padding:4px 10px;
	border-radius:20px;
	margin-bottom:10px;
}
.smartx-result-price{ font-size:32px; font-weight:800; color:var(--smartx-dark); margin-bottom:14px; }
.smartx-result-price small{ font-size:14px; font-weight:600; color:var(--smartx-muted); margin-left:4px; }
.smartx-result-list{ list-style:none; margin:0 0 18px; padding:0; border-top:1px dashed var(--smartx-border); padding-top:12px; }
.smartx-result-list li{ display:flex; justify-content:space-between; font-size:13px; color:var(--smartx-muted); padding:5px 0; }
.smartx-result-list li b{ color:var(--smartx-text); font-weight:600; }

.smartx-btn-whatsapp{
	width:100%;
	background:var(--smartx-green);
	color:#fff;
	border:none;
	padding:13px 16px;
	font-size:14px;
	font-weight:700;
	border-radius:10px;
	cursor:pointer;
	transition:filter .18s ease, transform .12s ease;
}
.smartx-btn-whatsapp:hover{ filter:brightness(1.05); transform:translateY(-1px); }

.smartx-low-moq{
	background:#fff0f0;
	border:1px solid #ffcdcd;
	border-radius:14px;
	padding:20px;
	text-align:center;
	margin-top:20px;
	animation:smartxSlideUp .3s ease;
}
.smartx-low-moq p{ margin:0 0 14px; font-size:13.5px; color:#8a1f1f; line-height:1.6; }
.smartx-btn-outline{
	width:100%;
	background:#fff;
	border:1.5px solid var(--smartx-accent);
	color:var(--smartx-accent);
	padding:12px 16px;
	font-size:13.5px;
	font-weight:700;
	border-radius:10px;
	cursor:pointer;
	transition:all .18s ease;
}
.smartx-btn-outline:hover{ background:var(--smartx-accent); color:#fff; }

@keyframes smartxFadeIn{ from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);} }
@keyframes smartxSlideUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

/* ===== Mobile ===== */
.smartx-mobile-media{ display:none; }
@media (max-width: 780px){
	.smartx-card-head-top{ flex-direction:row; align-items:flex-start; }
	.smartx-header-whatsapp{
		width:38px; height:38px; padding:0; border-radius:50%; justify-content:center;
	}
	.smartx-header-whatsapp .smartx-wa-text{ display:none; }

	.smartx-main{ grid-template-columns:1fr; }
	.smartx-media-col{ display:none; }
	.smartx-form-col{ padding:20px 18px; border-right:none; }
	.material-grid{ grid-template-columns:repeat(2, 1fr); }
	.smartx-card-head{ padding:20px 20px; }
	.smartx-card-head h2{ font-size:19px; }
	.size-row{ grid-template-columns:1fr 1fr; gap:10px; }

	/* On mobile: hide the always-visible per-box description, show the shared one only after a material is tapped */
	.material-box .m-desc{ display:none; }
	.smartx-material-desc:not([hidden]){ display:block; }

	/* iOS Safari zooms the whole page in if a focused input's font-size is under 16px — this keeps typing feel native and premium */
	.smartx-wrap input[type=number]{ font-size:16px; }

	.smartx-mobile-media{
		display:block;
		margin-top:24px;
		border-top:1px solid var(--smartx-border);
		padding-top:20px;
	}
	.smartx-mobile-media .media-label{
		color:var(--smartx-muted); font-size:11.5px; font-weight:700; text-transform:uppercase;
		letter-spacing:.04em; margin-bottom:10px; display:block;
	}
	.smartx-mobile-media .smartx-media-image{
		width:100%;
		height:170px;
		border-radius:12px;
		background:#eef2f9;
		overflow:hidden;
	}
	.smartx-mobile-media .smartx-media-image img{ width:100%; height:100%; object-fit:cover; display:block; }
	.smartx-mobile-media .smartx-media-video{ background:#000; margin-top:10px; border-radius:12px; overflow:hidden; }
}