/* =========================================================
   kodaUP Checkout Sheet
   ========================================================= */

/* ---------- A. Conteneur (page parente) ---------- */
.kodaup-sheet {
	position: fixed;
	inset: 0;
	z-index: 999999;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear .3s;
}
.kodaup-sheet.is-open {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}
html.kodaup-sheet-lock,
html.kodaup-sheet-lock body {
	overflow: hidden !important;
}

.kodaup-sheet__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 15, 20, .55);
	opacity: 0;
	transition: opacity .25s ease;
}
.kodaup-sheet.is-open .kodaup-sheet__backdrop {
	opacity: 1;
}

/* ---------- B. Panneau : bottom sheet (mobile par défaut) ---------- */
.kodaup-sheet__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 92vh;
	height: 92dvh;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
	overflow: hidden;
	transform: translateY(100%);
	transition: transform .3s cubic-bezier(.32, .72, 0, 1);
	will-change: transform;
}
.kodaup-sheet.is-open .kodaup-sheet__panel {
	transform: translateY(0);
}

.kodaup-sheet__head {
	flex: 0 0 auto;
	padding: 8px 16px 0;
	background: #fff;
	touch-action: none;
	cursor: grab;
}
.kodaup-sheet__grip {
	display: block;
	width: 40px;
	height: 4px;
	margin: 4px auto 8px;
	border-radius: 2px;
	background: #d0d5d9;
}
.kodaup-sheet__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 10px;
	border-bottom: 1px solid #eceff1;
}
.kodaup-sheet__title {
	font-size: 16px;
	font-weight: 600;
	color: #1c2733;
}
.kodaup-sheet__close {
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f1f3f5;
	color: #1c2733;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.kodaup-sheet__close:hover {
	background: #e4e8eb;
}

.kodaup-sheet__body {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}
.kodaup-sheet__body iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: #fff;
}

/* Loader */
.kodaup-sheet__loader {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility 0s linear .2s;
}
.kodaup-sheet__loader.is-on {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}
.kodaup-sheet__loader span {
	width: 34px;
	height: 34px;
	border: 3px solid #e3f7f2;
	border-top-color: #49d1af;
	border-radius: 50%;
	animation: kodaup-spin .7s linear infinite;
}
@keyframes kodaup-spin {
	to { transform: rotate(360deg); }
}

/* ---------- C. Desktop : modal centré ---------- */
@media (min-width: 768px) {
	.kodaup-sheet__panel {
		left: 50%;
		right: auto;
		top: 50%;
		bottom: auto;
		width: 520px;
		max-width: calc(100vw - 32px);
		height: min(90vh, 820px);
		border-radius: 18px;
		opacity: 0;
		transform: translate(-50%, -46%) scale(.98);
		transition: transform .25s ease, opacity .25s ease;
	}
	.kodaup-sheet.is-open .kodaup-sheet__panel {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	.kodaup-sheet__grip { display: none; }
	.kodaup-sheet__head { cursor: default; padding-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.kodaup-sheet__panel,
	.kodaup-sheet__backdrop { transition: none; }
}

/* =========================================================
   D. MODE EMBED — appliqué DANS l'iframe (html.kodaup-embed)
   On masque tout ce qui n'est pas le formulaire de commande.
   Si un élément du thème Woodmart reste visible, ajoutez son
   sélecteur à la liste ci-dessous.
   ========================================================= */
html.kodaup-embed {
	margin-top: 0 !important;
}
html.kodaup-embed #wpadminbar,
html.kodaup-embed .whb-header,
html.kodaup-embed .wd-page-title,
html.kodaup-embed .page-title,
html.kodaup-embed .wd-toolbar,
html.kodaup-embed .wd-prefooter,
html.kodaup-embed .footer-container,
html.kodaup-embed .wd-sticky-btn,
html.kodaup-embed .wd-scroll-top,
html.kodaup-embed .wd-checkout-steps,
html.kodaup-embed .woocommerce-message {
	display: none !important;
}
html.kodaup-embed body {
	padding-top: 0 !important;
	background: #fff;
}
html.kodaup-embed .main-page-wrapper {
	padding-top: 12px !important;
	margin-top: 0 !important;
}
html.kodaup-embed .container {
	padding-left: 14px;
	padding-right: 14px;
}