
/* HK Wish Links - Frontend styles (v1.5.1) */
.hk-wish-form-wrap, .hk-wish-view { font-family: inherit; }

/* form */
.hk-wish-form { max-width: 860px; margin: 0 auto; padding: 16px; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; background: rgba(255,255,255,.7); backdrop-filter: blur(4px); }
.hk-wish-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hk-wish-field label { display:block; font-weight: 700; margin-bottom: 6px; color: rgba(0,0,0,.72); }
.hk-wish-field input[type="text"], .hk-wish-field textarea, .hk-wish-field select, .hk-wish-link {
	width:100%; padding: 12px 12px; border-radius: 12px; border: 1px solid rgba(0,0,0,.14);
	background: #fff; outline: none;
}
.hk-wish-field textarea { resize: vertical; }
.hk-wish-hint { font-size: 12px; opacity: .72; margin-top: 6px; }
.hk-wish-submit { margin-top: 12px; width:100%; padding: 12px 14px; border-radius: 14px; border:none; cursor:pointer; font-weight:800; background:#111; color:#fff; }
.hk-wish-submit:disabled { opacity:.6; cursor:not-allowed; }
.hk-wish-status { margin-top: 10px; font-size: 14px; }
.hk-wish-status.hk-ok { color: #0a7a2a; }
.hk-wish-status.hk-err { color: #b00020; }
.hk-wish-result { margin-top: 14px; padding: 12px; border-radius: 14px; border: 1px dashed rgba(0,0,0,.22); background: rgba(255,255,255,.8); }
.hk-wish-result-title { font-weight: 800; margin-bottom: 8px; }
.hk-wish-result-row { display:flex; gap: 8px; align-items:center; flex-wrap: wrap; }
.hk-wish-result-row .hk-wish-link{ flex: 1 1 340px; min-width: 240px; }
.hk-wish-copy, .hk-wish-share {
	padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(0,0,0,.14);
	background:#111; color:#fff; cursor:pointer; font-weight:800;
}
.hk-wish-share{ background:#fff; color:#111; }
.hk-wish-result-actions { margin-top: 10px; }
.hk-wish-open { display:inline-block; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(0,0,0,.14); background:#fff; font-weight:800; text-decoration:none; }

.hk-wish-sub{ margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(0,0,0,.12); }
.hk-wish-sub-label{ font-weight: 800; color: rgba(0,0,0,.72); font-size: 13px; margin-bottom: 6px; }

@media (max-width: 720px){ .hk-wish-grid { grid-template-columns: 1fr; } }

/* share sheet */
.hk-wish-share-sheet{ position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 99999; display:flex; align-items:center; justify-content:center; padding: 16px; }
.hk-wish-share-sheet-inner{ width: min(560px, 95vw); background:#fff; border-radius: 16px; padding: 14px; border: 1px solid rgba(0,0,0,.12); }
.hk-wish-share-title{ font-weight: 900; font-size: 18px; margin-bottom: 10px; }
.hk-wish-share-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hk-wish-share-grid a, .hk-wish-share-grid button{
	padding: 12px 12px; border-radius: 12px; border: 1px solid rgba(0,0,0,.14);
	background:#fff; cursor:pointer; font-weight: 800; text-decoration:none; color:#111; text-align:center;
}
.hk-wish-share-grid button.hk-share-close{ grid-column: 1 / -1; background:#111; color:#fff; }

/* fullscreen overlay */
html.hk-wish-html, body.hk-wish-mode { height: 100% !important; overflow: hidden !important; }
.hk-wish-view {
	position: fixed !important;
	inset: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 2147483647 !important;
	background: #fff !important;
	isolation: isolate;
}
.hk-wish-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.hk-wish-stage { position:absolute; inset:0; z-index:3; }
.hk-wish-screen { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding: 18px; }
.hk-wish-screen--step1, .hk-wish-screen--step2, .hk-wish-screen--step3 { background:#fff; }
.hk-wish-screen--step4 { background: transparent; }
.hk-wish-center { text-align:center; width: min(720px, 92vw); margin: 0 auto; }
.hk-wish-big { font-size: clamp(28px, 5vw, 56px); font-weight: 900; }
.hk-wish-step3-text{ font-size: clamp(24px, 4.5vw, 52px); line-height: 1.2; }
.hk-wish-screen--hidden { opacity:0; pointer-events:none; }

/* gate screen */
.hk-wish-gate{
	position:absolute; inset:0;
	z-index: 5;
	background:#fff;
	display:flex; align-items:center; justify-content:center;
}
.hk-wish-gate-inner{ text-align:center; }
.hk-wish-start{
	padding: 14px 26px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,.12);
	background: #111;
	color: #fff;
	font-weight: 900;
	font-size: 18px;
	cursor:pointer;
}
.hk-wish-gate-hint{ margin-top: 10px; font-weight: 700; opacity: .65; }

/* card */
.hk-wish-card{
	width: min(620px, 92vw);
	border-radius: 22px;
	padding: 18px;
	background: rgba(255,255,255,.88);
	border: 1px solid rgba(0,0,0,.08);
	box-shadow: 0 14px 40px rgba(0,0,0,.12);
	backdrop-filter: blur(10px);
	text-align: center;
}
.hk-wish-title { font-size: clamp(22px, 3.5vw, 34px); font-weight: 950; margin-bottom: 12px; }

/* Make photo area large (fix "shrunken" image) */
.hk-wish-photo {
	margin: 10px auto 12px;
	padding: 10px;
	border-radius: 18px;
	border: 3px solid rgba(0,0,0,.08);
	background: rgba(255,255,255,.95);
	position: relative;
	overflow:hidden;
	width: 100%;
	height: min(62vh, 620px);
}
@media (max-width: 720px){
	.hk-wish-photo{ height: min(55vh, 520px); }
}
.hk-wish-slide{
	position:absolute;
	inset: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	object-fit: contain;
	border-radius: 14px;
	opacity:0;
	transition: opacity .8s ease;
}
.hk-wish-slide.is-active{ opacity:1; }

.hk-wish-from { margin-top: 12px; font-weight: 800; opacity: .85; }

.hk-template-birthday .hk-wish-photo { border-color: rgba(255, 200, 0, .35); }
.hk-template-valentine .hk-wish-photo { border-color: rgba(255, 50, 120, .35); }
.hk-template-proposal .hk-wish-photo { border-color: rgba(120, 80, 255, .35); }

/* controls */
.hk-wish-controls {
	position: fixed;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	display:flex;
	gap: 10px;
	align-items:center;
	z-index: 4;
	background: rgba(255,255,255,.75);
	border: 1px solid rgba(0,0,0,.10);
	border-radius: 999px;
	padding: 8px 10px;
	backdrop-filter: blur(8px);
}
.hk-wish-replay, .hk-wish-new, .hk-wish-mute {
	padding: 10px 14px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,.12);
	background: rgba(255,255,255,.95);
	cursor:pointer;
	font-weight: 900;
	white-space: nowrap;
	color:#111;
}
.hk-wish-audio-controls{ display:flex; gap: 10px; align-items:center; }
.hk-wish-vol-label{ font-weight: 900; color:#111; font-size: 13px; }
.hk-wish-volume{ width: 140px; }
.hk-wish-yt-player{ width:1px; height:1px; opacity:0.01; position:absolute; left:-9999px; top:-9999px; }


/* MOBILE FIXES v1.5.2 */
@media (max-width: 520px){
	.hk-wish-card{
		width: min(92vw, 520px);
		padding: 14px;
		border-radius: 18px;
	}
	.hk-wish-title{ margin-bottom: 10px; }
	.hk-wish-photo{
		height: min(58vh, 520px);
		padding: 8px;
	}
	.hk-wish-slide{ inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); border-radius: 12px; }

	/* Make the control bar never overflow the screen */
	.hk-wish-controls{
		left: 50%;
		transform: translateX(-50%);
		max-width: calc(100vw - 16px);
		width: calc(100vw - 16px);
		padding: 8px;
		gap: 8px;
		flex-wrap: wrap;
		justify-content: center;
		border-radius: 18px;
		bottom: 10px;
	}
	.hk-wish-replay, .hk-wish-new, .hk-wish-mute{
		padding: 10px 12px;
		font-size: 13px;
	}
	.hk-wish-audio-controls{
		width: 100%;
		justify-content: center;
		gap: 8px;
	}
	.hk-wish-vol-label{ display:none; } /* prevent "Vol um e" wrap */
	.hk-wish-volume{ width: min(220px, 55vw); }
}

/* super small screens */
@media (max-width: 360px){
	.hk-wish-replay, .hk-wish-new, .hk-wish-mute{ padding: 9px 10px; font-size: 12px; }
	.hk-wish-volume{ width: min(180px, 52vw); }
}


/* MOBILE FIXES v1.5.3 */
.hk-wish-audio-controls{ display:flex; align-items:center; gap: 8px; }

@media (max-width: 520px){
	.hk-wish-controls{
		flex-wrap: nowrap;
		justify-content: center;
		gap: 8px;
		padding: 8px 10px;
		max-width: calc(100vw - 16px);
		width: calc(100vw - 16px);
	}
	.hk-wish-replay, .hk-wish-new, .hk-wish-mute{
		padding: 9px 12px;
		font-size: 13px;
	}
}

/* Center the reveal text slightly higher (Screen 1/2/3) */
.hk-wish-screen--step1 .hk-wish-center,
.hk-wish-screen--step2 .hk-wish-center,
.hk-wish-screen--step3 .hk-wish-center{
	transform: translateY(-5vh);
}
@media (max-width: 520px){
	.hk-wish-screen--step1 .hk-wish-center,
	.hk-wish-screen--step2 .hk-wish-center,
	.hk-wish-screen--step3 .hk-wish-center{
		transform: translateY(-8vh);
	}
}


/* MOBILE LAYOUT v1.5.4 */
.hk-wish-screen--step4{
	/* keep space for bottom controls */
	padding-bottom: 110px;
}

@media (max-width: 520px){
	/* position the card a bit higher so image isn't too low */
	.hk-wish-screen--step4{
		align-items: flex-start;
		padding-top: 6vh;
		padding-bottom: 120px;
	}

	/* reduce top gap inside card */
	.hk-wish-title{ margin-bottom: 8px; }
	.hk-wish-photo{ margin-top: 6px; margin-bottom: 10px; }

	/* smaller + evenly centered buttons */
	.hk-wish-controls{
		justify-content: center;
		gap: 8px;
	}
	.hk-wish-replay, .hk-wish-new, .hk-wish-mute{
		padding: 8px 10px;
		font-size: 12px;
		border-radius: 14px;
		min-width: 0;
		flex: 1 1 0;
		max-width: 130px;
		text-align: center;
	}
}
@media (max-width: 380px){
	.hk-wish-replay, .hk-wish-new, .hk-wish-mute{
		max-width: 118px;
		padding: 8px 8px;
	}
}


/* BUTTON LAYOUT v1.5.5 */
@media (max-width: 520px){
	.hk-wish-controls{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		align-items: center;
		justify-items: center;
		gap: 8px;
		padding: 8px 10px;
	}
	.hk-wish-replay, .hk-wish-new, .hk-wish-mute{
		width: 100%;
		max-width: none;
		flex: initial;
		padding: 9px 8px;
		font-size: 12px;
		border-radius: 999px;
		white-space: nowrap;
		overflow: visible;
	}
	.hk-wish-replay{ justify-self: stretch; }
	.hk-wish-new{ justify-self: stretch; }
	.hk-wish-mute{ justify-self: stretch; }
}


/* IMAGE FIT FIX v1.5.8 */
.hk-wish-photo{
	background: #ffffff !important; /* remove any “blur” look behind images */
}
.hk-wish-slide{
	background: #ffffff !important;
	 /* respect EXIF orientation where supported */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0); /* Safari: reduce weird rendering */
}


/* ORIENTATION OVERRIDE v1.6.2
   Some browsers may double-apply EXIF orientation when CSS `
	transform: none !important;
}


/* FORM MOBILE FIX v1.6.7 */
.hk-wish-form-wrap *{ box-sizing: border-box; }
.hk-wish-form-wrap input,
.hk-wish-form-wrap select,
.hk-wish-form-wrap textarea{
	max-width: 100%;
	width: 100%;
}

.hk-wish-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
@media (max-width: 640px){
	.hk-wish-grid{ grid-template-columns: 1fr; }
}


/* IMAGE ROTATION OVERRIDE v1.6.8
   Prevent any transform/rotate inherited from animation wrappers or theme CSS */
.hk-wish-photo img,
.hk-wish-slide,
.hk-wish-slide img{
	transform: none !important;
	rotate: 0deg !important;
}


/* Rotation checkbox */
.hk-wish-checkbox-row{ margin: 10px 0 6px; }
.hk-wish-checkbox{
	display:flex;
	gap:10px;
	align-items:flex-start;
	font-size: 14px;
	color:#333;
}
.hk-wish-checkbox input{ width:auto; margin-top: 3px; }


/* Generate progress */
.hk-wish-progress{ margin-top: 10px; }
.hk-wish-progress-top{ display:flex; justify-content: space-between; align-items:center; font-size: 13px; color: rgba(0,0,0,.65); margin-bottom: 6px; }
.hk-wish-progress-track{ width:100%; height: 6px; border-radius: 99px; background: rgba(0,0,0,.10); overflow:hidden; }
.hk-wish-progress-bar{ height:100%; border-radius: 99px; background: #ff7a2f; transition: width .15s linear; }
