/* ===== ARshamai.ir — AR Model Viewer Styles v1.3 ===== */

.armv-wrapper{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	border-radius: 16px;
	overflow: hidden;
	background: linear-gradient(180deg,#f6f8fb,#eef1f6);
	box-shadow: 0 8px 30px rgba(20,20,40,0.10);
	padding-bottom: 18px;
}

.armv-wrapper .armv-model-viewer{
	width: 100%;
	height: 420px;
	max-height: 70vh;
	background-color: transparent;
	--poster-color: transparent;
}

@media (max-width:600px){
	.armv-wrapper .armv-model-viewer{ height: 320px; }
}

/* ── دکمه نمایش در محیط واقعی ── */
.armv-wrapper .armv-ar-button,
.armv-wrapper .armv-ar-button:link,
.armv-wrapper .armv-ar-button:visited {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	margin-top: 16px !important;
	padding: 13px 26px 13px 20px !important;
	border: none !important;
	border-radius: 16px !important;
	background-color: #0d2e6e !important;
	background-image: none !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	box-shadow: 0 6px 20px rgba(13,46,110,0.35) !important;
	text-decoration: none !important;
	direction: rtl !important;
	transition: transform .18s ease, box-shadow .18s ease !important;
}

.armv-wrapper .armv-ar-button:hover {
	background-color: #163d8f !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 10px 26px rgba(13,46,110,0.45) !important;
	color: #ffffff !important;
}

.armv-wrapper .armv-ar-button:active {
	background-color: #0a2459 !important;
	transform: translateY(0) !important;
	color: #ffffff !important;
}

@media (max-width:480px){
	.armv-wrapper .armv-ar-button{
		width: calc(100% - 32px) !important;
		font-size: 13px !important;
		padding: 12px 18px !important;
	}
}

.armv-wrapper .armv-ar-icon{
	width: 19px !important; height: 19px !important;
	flex-shrink: 0 !important; display: inline-block !important;
	background-color: #ffffff !important; background-image: none !important;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.2L18.5 7 12 9.8 5.5 7 12 4.2zM4 9.2l7 3.5v7.6l-7-3.5V9.2zm9 11.1v-7.6l7-3.5v7.6l-7 3.5z'/></svg>") center/contain no-repeat !important;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.2L18.5 7 12 9.8 5.5 7 12 4.2zM4 9.2l7 3.5v7.6l-7-3.5V9.2zm9 11.1v-7.6l7-3.5v7.6l-7 3.5z'/></svg>") center/contain no-repeat !important;
}

/* ── دکمه بازگشت در حالت AR ── */
.armv-exit-ar-button{
	position: fixed !important;
	top: auto !important; right: auto !important;
	left: 50% !important; bottom: 28px !important;
	transform: translateX(-50%) !important;
	margin: 0 !important;
	z-index: 2147483647 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	border: 1.5px solid rgba(255,255,255,0.7) !important;
	border-radius: 999px !important;
	padding: 10px 22px 10px 16px !important;
	background-color: #0d2e6e !important;
	background-image: none !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	direction: rtl !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
	white-space: nowrap !important;
}

.armv-exit-ar-icon{
	width: 15px !important; height: 15px !important;
	flex-shrink: 0 !important; display: inline-block !important;
	background-color: #ffffff !important; background-image: none !important;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 19l-7-7 7-7v4h8v6h-8v4z'/></svg>") center/contain no-repeat !important;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 19l-7-7 7-7v4h8v6h-8v4z'/></svg>") center/contain no-repeat !important;
}

/* ── پیام راهنمای دوربین ── */
.armv-ar-hint{
	position: fixed; top: 26px; left: 50%;
	transform: translate(-50%,-16px);
	background: rgba(13,46,110,0.90); color: #fff;
	padding: 10px 20px; border-radius: 999px;
	font-size: 14px; font-weight: 600;
	z-index: 99999; opacity: 0; pointer-events: none;
	transition: opacity .35s ease, transform .35s ease;
	direction: rtl; white-space: nowrap;
}
.armv-ar-hint.armv-show{ opacity: 1; transform: translate(-50%,0); }

/* ── نوار لودینگ ── */
.armv-loading{
	position: absolute; left: 50%; bottom: 16px;
	transform: translateX(-50%); width: 60%; max-width: 240px;
}
.armv-loading-bar{ width:100%; height:6px; border-radius:999px; background:rgba(0,0,0,0.08); overflow:hidden; }
.armv-loading-fill{ height:100%; width:0%; background:linear-gradient(90deg,#0d2e6e,#1a56c4); transition:width .2s ease; }

/* ── پیام عدم پشتیبانی AR ── */
.armv-unsupported-msg{
	margin: 12px 16px 0;
	padding: 12px 16px;
	background: #fff8e1;
	border: 1px solid #f4c542;
	border-radius: 10px;
	color: #5a4000;
	font-size: 13px;
	line-height: 1.6;
	text-align: center;
	direction: rtl;
}

/* ══════════════════════════════════
   مودال QR کد (دسکتاپ)
══════════════════════════════════ */
#armv-qr-overlay{
	position: fixed; inset: 0;
	z-index: 999999;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; transition: opacity .28s ease;
}
#armv-qr-overlay.armv-qr-visible{ opacity: 1; }
#armv-qr-overlay.armv-qr-hiding{ opacity: 0; }

.armv-qr-backdrop{
	position: absolute; inset: 0;
	background: rgba(5,10,30,0.65);
	backdrop-filter: blur(4px);
}

.armv-qr-modal{
	position: relative;
	background: #fff;
	border-radius: 20px;
	padding: 36px 32px 28px;
	width: 360px;
	max-width: calc(100vw - 32px);
	text-align: center;
	direction: rtl;
	box-shadow: 0 24px 60px rgba(0,0,0,0.28);
	transform: translateY(18px);
	transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
#armv-qr-overlay.armv-qr-visible .armv-qr-modal{ transform: translateY(0); }
#armv-qr-overlay.armv-qr-hiding  .armv-qr-modal{ transform: translateY(18px); }

.armv-qr-close{
	position: absolute; top: 14px; left: 14px;
	width: 32px; height: 32px;
	border: none; border-radius: 50%;
	background: #f0f0f0; color: #555;
	font-size: 14px; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background .15s;
}
.armv-qr-close:hover{ background: #e0e0e0; color: #111; }

.armv-qr-phone-icon{ font-size: 38px; margin-bottom: 10px; }

.armv-qr-title{
	margin: 0 0 8px;
	font-size: 18px; font-weight: 800;
	color: #0d2e6e;
}

.armv-qr-desc{
	margin: 0 0 20px;
	font-size: 13px; color: #555; line-height: 1.5;
}

.armv-qr-img-wrap{
	display: inline-block;
	padding: 10px;
	border: 2px solid #e0e8f8;
	border-radius: 14px;
	background: #fff;
	margin-bottom: 16px;
}
.armv-qr-img{ display: block; border-radius: 6px; }

.armv-qr-sub{
	margin: 0 0 20px;
	font-size: 12px; color: #666; line-height: 1.6;
}

.armv-qr-steps{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
}

.armv-qr-step{
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 600;
	color: #333;
}

.armv-qr-step-num{
	width: 20px; height: 20px;
	border-radius: 50%;
	background: #0d2e6e;
	color: #fff;
	font-size: 11px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}

.armv-qr-step-sep{
	color: #aaa; font-size: 12px;
	transform: scaleX(-1);
}