/* Monument Order Calculator — стилі калькулятора */

/* Атрибут hidden має перемагати будь-які display-правила нижче. */
.moc-app [hidden],
.moc-modal-overlay[hidden] {
	display: none !important;
}

.moc-app {
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px;
	font-size: 15px;
	line-height: 1.5;
	color: #222;
}

.moc-title {
	text-align: center;
	font-weight: 700;
	font-size: 24px;
	margin: 10px 0 20px;
}

.moc-h {
	font-weight: 700;
	font-size: 17px;
	margin: 0 8px 0 0;
	display: inline-block;
	text-align: left;
}
.moc-normal { font-weight: 400; font-size: 14px; }

.moc-toolbar {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	font-size: 13px;
	color: #666;
	margin-bottom: 8px;
}

.moc-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.moc-head-row { justify-content: space-between; margin-bottom: 14px; }
.moc-order-no, .moc-order-date { display: flex; align-items: center; gap: 6px; }
.moc-order-no label { font-weight: 700; font-size: 18px; }
.moc-date-display { font-weight: 600; }

.moc-section {
	margin: 14px 0;
	padding: 10px 12px;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	background: #fafafa;
	text-align: left;
}

.moc-inline-section {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 6px 0;
}

.moc-check { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

.moc-app input[type="text"],
.moc-app input[type="tel"],
.moc-app input[type="date"],
.moc-app input[type="number"],
.moc-app select,
.moc-app textarea {
	padding: 5px 8px;
	border: 1px solid #bbb;
	border-radius: 4px;
	font-size: 14px;
	background: #fff;
	max-width: 100%;
}
.moc-app input[type="number"] { width: 110px; }
.moc-price-wrap { white-space: nowrap; }
.moc-comment { flex: 1 1 160px; min-width: 140px; }
.moc-app textarea { width: 100%; }

.moc-field-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.moc-field-line > label { font-weight: 600; min-width: 70px; }
.moc-field-line input { flex: 1 1 180px; }
.moc-customer #moc-client-name { flex: 1 1 400px; }

.moc-btn {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid #444;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.3;
}
.moc-btn:hover { background: #f0f0f0; }
.moc-btn-primary { background: #2c3e50; border-color: #2c3e50; color: #fff; }
.moc-btn-primary:hover { background: #1f2d3a; }
.moc-btn-sm { padding: 2px 8px; font-size: 13px; }
.moc-add { font-weight: 700; }
.moc-remove { color: #a00; border-color: #a00; }

/* --- Пам'ятник: поля + макет --------------------------------------- */
.moc-monument-layout {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 16px;
	align-items: start;
	margin-top: 10px;
}
@media (max-width: 800px) {
	.moc-monument-layout { grid-template-columns: 1fr; }
}
.moc-size { width: 80px; }

.moc-spec-row { border-bottom: 1px dashed #ddd; padding-bottom: 6px; }
.moc-spec-name { min-width: 130px; }
.moc-spec-color { width: 120px; }

.moc-preview-wrap { position: sticky; top: 20px; }
.moc-preview {
	position: relative;
	width: 100%;
	min-height: 380px;
	border: 1px solid #ccc;
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
}
.moc-preview img#moc-preview-img {
	width: 100%;
	height: auto;
	display: block;
	user-select: none;
	pointer-events: none;
}
.moc-preview-empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #999;
}
.moc-preview-hint { font-size: 12px; color: #888; margin-top: 4px; }

.moc-overlay {
	position: absolute;
	cursor: grab;
	touch-action: none;
	max-width: 60%;
	z-index: 5;
}
.moc-overlay:active { cursor: grabbing; }
.moc-overlay-img img {
	max-width: 80px;
	max-height: 80px;
	display: block;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.moc-overlay-text {
	display: inline-block;
	color: #d9d9d9;
	text-shadow: 0 1px 2px #000;
	background: rgba(0,0,0,.25);
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 14px;
	white-space: pre-wrap;
	text-align: center;
}

/* --- Дані про померлого -------------------------------------------- */
.moc-deceased { border-bottom: 1px dashed #ddd; padding-bottom: 6px; }
.moc-deceased input[type="text"] { width: 150px; }

/* --- Елементи -------------------------------------------------------- */
.moc-items { display: contents; }
.moc-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 8px;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	background: #fff;
	flex-wrap: wrap;
}
.moc-item .i-qty { width: 64px; }
.moc-item .i-color { width: 100px; }
.moc-item .i-size { width: 100px; }
.moc-spec-qty { width: 64px; }
.moc-spec-size { min-width: 92px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Кнопка знижки: навмисно непримітна, щоб не впадала в око клієнтам */
.moc-disc-btn {
	border: 0;
	background: none;
	color: #999;
	opacity: .35;
	cursor: pointer;
	font-size: 12px;
	padding: 2px 4px;
	margin-left: 2px;
	vertical-align: middle;
}
.moc-disc-btn:hover { opacity: 1; color: #2c3e50; }
.moc-disc-wrap { white-space: nowrap; color: #a05a00; margin-left: 6px; }
.moc-disc-wrap input, .moc-app .moc-disc, .moc-app .i-disc, .moc-app .v-disc { width: 90px; }
#moc-discount { width: 120px; }

.moc-verse-title { font-style: italic; }

/* --- Підсумки --------------------------------------------------------- */
.moc-totals { background: #f0f4f8; }
.moc-total { font-size: 20px; font-weight: 700; }

.moc-actions { display: flex; gap: 12px; align-items: center; margin: 20px 0; flex-wrap: wrap; }
#moc-save-status { color: #2c7a2c; font-weight: 600; }

/* --- Модальне вікно ---------------------------------------------------- */
.moc-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.55);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.moc-modal {
	position: relative;
	background: #fff;
	border-radius: 8px;
	max-width: 760px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	padding: 20px;
}
.moc-modal-title { text-align: center; margin: 0 0 16px; font-size: 20px; }
.moc-modal-close {
	position: absolute;
	top: 8px;
	right: 12px;
	border: 0;
	background: none;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #666;
}
.moc-modal-close:hover { color: #000; }

/* Каталог: три елементи в ряді */
.moc-catalog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
@media (max-width: 600px) {
	.moc-catalog-grid { grid-template-columns: repeat(2, 1fr); }
}
.moc-card {
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
	padding: 10px;
	cursor: pointer;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
}
.moc-card:hover { border-color: #2c3e50; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.moc-card img { max-width: 100%; height: 140px; object-fit: contain; }
.moc-card-noimg {
	width: 100%;
	height: 140px;
	background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 10px, #ececec 10px, #ececec 20px);
	border-radius: 4px;
}
.moc-choice-grid .moc-card-noimg { height: 80px; }
.moc-card-name { font-weight: 600; }
.moc-card-verse { font-size: 13px; color: #555; white-space: pre-line; }
.moc-card-text { text-align: left; align-items: flex-start; }
.moc-loading { text-align: center; color: #888; }

/* --- 3D-конструктор (Three.js) -------------------------------------------- */
.moc-preview-tabs { display: flex; gap: 6px; margin-bottom: 6px; }
.moc-tab.active { background: #2c3e50; color: #fff; border-color: #2c3e50; }
#moc-build-custom { margin-left: auto; }

.moc-preview3d { width: 100%; position: relative; overflow: hidden; border-radius: 10px; background: #18232b; }
.moc-preview3d canvas { display: block; }
.moc-render-badge {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	padding: 7px 10px;
	border: 1px solid rgba(255,255,255,.24);
	border-radius: 999px;
	background: rgba(10, 18, 22, .78);
	box-shadow: 0 3px 14px rgba(0,0,0,.22);
	color: #fff;
	font-size: 11px;
	pointer-events: none;
}
.moc-add-part {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 6px;
	padding: 8px;
	border: 1px dashed #bbb;
	border-radius: 6px;
	background: #fff;
}
.moc-add-part select { max-width: 130px; }
.moc-shape-ctl { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.moc-add-part-sep { color: #ccc; }
.moc-add-part input[type="text"] { width: 110px; }
.moc-add-part input[type="number"] { width: 60px; }

.moc3d-viewport {
	width: 100%;
	height: 420px;
	overflow: hidden;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: linear-gradient(#dfe7ee 0%, #eef2f5 60%, #cfd6cd 60%, #c3cbc0 100%);
	cursor: grab;
	touch-action: none;
	user-select: none;
	position: relative;
}
.moc3d-viewport:active { cursor: grabbing; }
.moc3d-viewport canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

/* --- Вхід ---------------------------------------------------------------- */
.moc-login-overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
}
.moc-login-box {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0,0,0,.08);
	padding: 30px;
	width: 100%;
	max-width: 360px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.moc-login-box h2 { margin: 0 0 10px; text-align: center; }
.moc-login-box label { font-weight: 600; }
.moc-login-box input { padding: 8px 10px; border: 1px solid #bbb; border-radius: 4px; }
.moc-login-box .moc-btn { margin-top: 12px; }
.moc-login-error { color: #a00; margin: 0; }

.moc-menu-login {
	display: inline-block;
	padding: 8px 18px;
	background: #2c3e50;
	color: #fff !important;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
}