/*
 * wyciecia-ui.css  v2.5.0
 * Nadpisania specyficzne dla "Ramki z wycięciami".
 * Bazowy layout i komponenty UI – shadowbox-ui-restore.css.
 */

/* ==========================================================================
   Kolumna podglądu – flex column żeby notatka była pod ramką
   ========================================================================== */

body.wyciecia-ui .shadowbox-preview-column {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: visible;
}

/* Placeholder podglądu – wypełnia dostępną przestrzeń
   ========================================================================== */

/* Kolumna podglądu zachowuje się identycznie jak shadowbox –
   placeholder rozciąga się na pełną dostępną wysokość */
body.wyciecia-ui .shadowbox-frame-preview-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(ellipse at center, rgba(201, 170, 106, 0.07) 0%, rgba(201, 170, 106, 0) 65%),
		rgba(255, 255, 255, 0.015);
	border-radius: 10px;
	padding: 1.25rem;
	box-sizing: border-box;
	transition: background 0.25s ease;
}

/* Obraz ramki – płynne pojawianie się przy zmianie wyboru */
body.wyciecia-ui .shadowbox-frame-preview-wrap .shadowbox-frame-img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
	filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
	transition: opacity 0.25s ease;
}

.wyciecia-frame-placeholder {
	width: 100%;
	height: 100%;
	min-height: 200px;
	background: rgba(201, 170, 106, 0.05);
	border: 2px dashed rgba(201, 170, 106, 0.2);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(201, 170, 106, 0.55);
	font-size: 0.82rem;
	font-family: "Montserrat", system-ui, sans-serif;
	text-align: center;
	padding: 1rem;
	line-height: 1.5;
	box-sizing: border-box;
}

/* ==========================================================================
   Notatka pod podglądem
   ========================================================================== */

.wyciecia-preview-note {
	margin-top: 0.85rem;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.88);
	text-align: center;
	font-family: "Montserrat", system-ui, sans-serif;
	line-height: 1.55;
	padding: 0 0.5rem;
	flex-shrink: 0;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   Cena — prefix "Cena:" i wiersz wysyłki
   ========================================================================== */

body.wyciecia-ui .shadowbox-ui-variation-price-wrap::before {
	content: 'Cena:';
	display: block;
	font-family: "Montserrat", system-ui, sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	color: rgba(201, 170, 106, 0.65);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.1rem;
}

.wyciecia-shipping-note {
	margin: 0.3rem 0 0;
	font-family: "Montserrat", system-ui, sans-serif;
	font-size: 0.75rem;
	color: rgba(239, 231, 214, 0.55);
	line-height: 1.4;
}

/* ==========================================================================
   Textarea (grawer, uwagi)
   ========================================================================== */

.shadowbox-ui-textarea {
	width: 100%;
	min-height: 72px;
	background: rgba(201, 170, 106, 0.04);
	border: 1.5px solid rgba(201, 170, 106, 0.22);
	border-radius: 6px;
	color: #efe7d6;
	font-family: "Montserrat", system-ui, sans-serif;
	font-size: 0.82rem;
	padding: 0.6rem 0.85rem;
	resize: vertical;
	transition: border-color 0.18s;
	box-sizing: border-box;
}

.shadowbox-ui-textarea:focus {
	outline: none;
	border-color: rgba(201, 170, 106, 0.55);
}

.shadowbox-ui-textarea::placeholder {
	color: rgba(239, 231, 214, 0.3);
}

/* ==========================================================================
   Etykiety opcjonalne / wymagane
   ========================================================================== */

.shadowbox-ui-optional-badge {
	font-weight: 400;
	text-transform: none;
	color: rgba(239, 231, 214, 0.45);
	font-size: 0.68rem;
	margin-left: 0.4rem;
	letter-spacing: 0;
}

.shadowbox-ui-required-badge {
	font-weight: 600;
	text-transform: uppercase;
	color: #c9aa6a;
	font-size: 0.65rem;
	margin-left: 0.4rem;
	letter-spacing: 0.05em;
}

/* ==========================================================================
   Ukryj pole ilości
   ========================================================================== */

body.wyciecia-ui .quantity {
	display: none !important;
}