.thg-template-popup { position: relative; width: 100%; }

.thg-template-popup__trigger {
	appearance: none; border: 0; padding: 0; margin: 0;
	background: transparent; cursor: pointer; display: block;
	line-height: 0; max-width: 100%; text-align: left;
}

.thg-template-popup__trigger--icon {
	display: inline-flex; align-items: center; justify-content: center;
	line-height: 1; text-align: center;
	color: #111111; background-color: transparent; border: 1px solid transparent;
	min-width: 44px; min-height: 44px;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.thg-template-popup__trigger-icon {
	display: inline-flex; align-items: center; justify-content: center;
	line-height: 1; font-size: 22px;
}
.thg-template-popup__trigger-icon i  { font-size: inherit; line-height: 1; }
.thg-template-popup__trigger-icon svg { width: 1em; height: 1em; fill: currentColor; }

.thg-template-popup__trigger:focus-visible { outline: 2px solid #1a73e8; outline-offset: 3px; }

.thg-template-popup__trigger-image { display: block; width: 100%; height: auto; max-width: 100%; }

.thg-template-popup__caption { margin-top: 10px; }

.thg-template-popup__modal {
	position: fixed; inset: 0; z-index: 99999;
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
	background-color: rgba(0,0,0,0.6);
	backdrop-filter: blur(2px);
}

.thg-template-popup__modal[hidden] { display: none; }

/* Keyframes */
@keyframes thg-popup-fade-in        { from { opacity: 0; }                               to { opacity: 1; } }
@keyframes thg-popup-fade-out       { from { opacity: 1; }                               to { opacity: 0; } }
@keyframes thg-popup-slide-up-in    { from { opacity: 0; transform: translateY(40px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes thg-popup-slide-up-out   { from { opacity: 1; transform: translateY(0); }     to { opacity: 0; transform: translateY(40px); } }
@keyframes thg-popup-slide-down-in  { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes thg-popup-slide-down-out { from { opacity: 1; transform: translateY(0); }     to { opacity: 0; transform: translateY(-40px); } }
@keyframes thg-popup-slide-left-in  { from { opacity: 0; transform: translateX(40px); }  to { opacity: 1; transform: translateX(0); } }
@keyframes thg-popup-slide-left-out { from { opacity: 1; transform: translateX(0); }     to { opacity: 0; transform: translateX(40px); } }
@keyframes thg-popup-slide-right-in { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes thg-popup-slide-right-out{ from { opacity: 1; transform: translateX(0); }     to { opacity: 0; transform: translateX(-40px); } }
@keyframes thg-popup-zoom-in        { from { opacity: 0; transform: scale(0.85); }       to { opacity: 1; transform: scale(1); } }
@keyframes thg-popup-zoom-out       { from { opacity: 1; transform: scale(1); }          to { opacity: 0; transform: scale(0.85); } }

/* Overlay animation (always fade) */
.thg-template-popup__modal.thg-is-opening { animation: thg-popup-fade-in  var(--thg-anim-dur, 300ms) ease both; }
.thg-template-popup__modal.thg-is-closing { animation: thg-popup-fade-out var(--thg-anim-dur, 300ms) ease both; }

/* Dialog per-animation classes */
.thg-template-popup__dialog.thg-anim-in--fade         { animation: thg-popup-fade-in         var(--thg-anim-dur, 300ms) ease both; }
.thg-template-popup__dialog.thg-anim-out--fade        { animation: thg-popup-fade-out        var(--thg-anim-dur, 300ms) ease both; }
.thg-template-popup__dialog.thg-anim-in--slide-up     { animation: thg-popup-slide-up-in     var(--thg-anim-dur, 300ms) ease both; }
.thg-template-popup__dialog.thg-anim-out--slide-up    { animation: thg-popup-slide-up-out    var(--thg-anim-dur, 300ms) ease both; }
.thg-template-popup__dialog.thg-anim-in--slide-down   { animation: thg-popup-slide-down-in   var(--thg-anim-dur, 300ms) ease both; }
.thg-template-popup__dialog.thg-anim-out--slide-down  { animation: thg-popup-slide-down-out  var(--thg-anim-dur, 300ms) ease both; }
.thg-template-popup__dialog.thg-anim-in--slide-left   { animation: thg-popup-slide-left-in   var(--thg-anim-dur, 300ms) ease both; }
.thg-template-popup__dialog.thg-anim-out--slide-left  { animation: thg-popup-slide-left-out  var(--thg-anim-dur, 300ms) ease both; }
.thg-template-popup__dialog.thg-anim-in--slide-right  { animation: thg-popup-slide-right-in  var(--thg-anim-dur, 300ms) ease both; }
.thg-template-popup__dialog.thg-anim-out--slide-right { animation: thg-popup-slide-right-out var(--thg-anim-dur, 300ms) ease both; }
.thg-template-popup__dialog.thg-anim-in--zoom         { animation: thg-popup-zoom-in         var(--thg-anim-dur, 300ms) ease both; }
.thg-template-popup__dialog.thg-anim-out--zoom        { animation: thg-popup-zoom-out        var(--thg-anim-dur, 300ms) ease both; }

.thg-template-popup__dialog-wrap { width: 100%; display: flex; justify-content: center; }

.thg-template-popup__dialog {
	position: relative;
	width: min(760px, 92vw);
	max-width: 100%;
	max-height: 80vh;
	transform: translate(var(--thg-template-popup-offset-x, 0), var(--thg-template-popup-offset-y, 0));
	overflow: auto;
	padding: 24px;
	background: #ffffff;
	color: #111111;
	border-radius: 14px;
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
}

.thg-template-popup__dialog::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	pointer-events: none;
}

.thg-template-popup__close {
	position: absolute; top: 12px; right: 12px;
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	border: 0; background: #f5f5f5; color: #111111;
	font-size: 18px; line-height: 1; cursor: pointer;
	border-radius: 999px; z-index: 100;
}
.thg-template-popup__close:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }

.thg-template-popup__title { margin: 0 44px 14px 0; line-height: 1.2; }

.thg-template-popup__title,
.thg-template-popup__content {
	position: relative;
	z-index: 1;
}

.thg-template-popup__content > :first-child { margin-top: 0; }
.thg-template-popup__content > :last-child  { margin-bottom: 0; }

.thg-template-popup__notice {
	padding: 12px 14px; border-radius: 8px;
	background: #f6f7f7; color: #1d2327; font-size: 14px; line-height: 1.5;
}

@media (max-width: 767px) {
	.thg-template-popup__modal  { padding: 12px; }
	.thg-template-popup__dialog { width: 100%; max-height: 86vh; }
}