.smg-app {
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 24px;
	background: #fafafa;
}
.smg-app h3 { margin-top: 0; }
.smg-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
.smg-field label { font-weight: 600; font-size: 13px; }
.smg-field input[type="text"],
.smg-field input[type="date"],
.smg-field input[type="time"] {
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 14px;
}
.smg-field-row { display: flex; gap: 14px; }
.smg-field-row .smg-field { flex: 1; }

.smg-field-hint { margin: 2px 0 0; font-size: 11px; color: #888; font-weight: normal; }

.smg-location-results {
	position: relative;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	max-height: 180px;
	overflow-y: auto;
}
.smg-loc-item { padding: 8px 10px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #f0f0f0; }
.smg-loc-item:hover { background: #f5f5f5; }
.smg-loc-loading, .smg-loc-empty { padding: 8px 10px; font-size: 12px; color: #888; }

.smg-shape-picker { display: flex; gap: 16px; }
.smg-shape-option { display: flex; align-items: center; gap: 6px; font-weight: normal; }

.smg-field-inline label { font-weight: normal; display: flex; align-items: center; gap: 6px; }

.smg-bg-picker { display: flex; flex-wrap: wrap; gap: 14px 18px; }
.smg-bg-option {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	font-weight: normal; font-size: 11px; line-height: 1.25; cursor: pointer;
	width: 92px; text-align: center;
}
.smg-bg-option input[type="radio"] { position: absolute; opacity: 0; }
.smg-bg-swatch {
	width: 44px; height: 44px; border-radius: 50%;
	border: 2px solid #ccc; box-shadow: inset 0 0 0 2px #fff;
	background-size: cover; background-position: center;
}
.smg-bg-option input:checked + .smg-bg-swatch { border-color: #333; }
.smg-bg-black .smg-bg-swatch { background: #000; }
.smg-bg-white .smg-bg-swatch { background: #fff; }
.smg-bg-black_gold_marble .smg-bg-swatch { background: linear-gradient(135deg,#111 0%,#d4af37 50%,#111 100%); }
.smg-bg-black_rosegold .smg-bg-swatch { background: linear-gradient(135deg,#111 0%,#b76e79 50%,#111 100%); }
.smg-bg-white_gold .smg-bg-swatch { background: linear-gradient(135deg,#f5f0e6 0%,#d4af37 50%,#f5f0e6 100%); }
.smg-bg-pink_marble .smg-bg-swatch { background: linear-gradient(135deg,#f7e3e3 0%,#e0a3ad 50%,#f7e3e3 100%); }
.smg-bg-custom_photo .smg-bg-swatch { background: repeating-linear-gradient(45deg,#ddd,#ddd 4px,#f5f5f5 4px,#f5f5f5 8px); position: relative; }
.smg-bg-custom_photo .smg-bg-swatch::after { content: "+"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #888; }
.smg-bg-label { text-align: center; }

#smg_font { padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px; }
#smg_text_color { width: 52px; height: 38px; padding: 2px; border: 1px solid #ccc; border-radius: 6px; cursor: pointer; }

.smg-preview-wrap {
	margin-top: 16px;
	text-align: center;
}
#smg_canvas {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 4px 18px rgba(0,0,0,0.25);
	background: #000;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-touch-callout: none; /* εμποδίζει το "κράτα πατημένο -> αποθήκευση εικόνας" σε iOS/Android */
	pointer-events: auto;
}
.smg-status { margin-top: 8px; font-size: 13px; color: #555; min-height: 18px; }

#smg_generate_btn { margin-top: 4px; }