/* =========================================================
   Reservas 3L — client-portal.css
   Estilos del portal de cliente y del popup de login/registro.
   Paleta propia (coincide con la de los correos transaccionales
   del plugin), para que el conjunto se vea igual sin importar
   qué tema esté activo. Un tema puede sobreescribir cualquier
   --sbk-* de abajo si quiere adaptarlo a su marca.
   ========================================================= */

.sbk-client-portal,
.sbk-client-auth,
.sbk-modal-overlay {
	--sbk-bg: #ffffff;
	--sbk-text: #191817;
	--sbk-text-secondary: #8B8579;
	--sbk-cream: #F6F2EA;
	--sbk-border: #e6ddcd;
	--sbk-accent: #8C6A32;
	--sbk-accent-dark: #6e5327;
	--sbk-font-heading: Georgia, "Times New Roman", serif;
	--sbk-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.sbk-client-portal,
.sbk-client-auth {
	font-family: var(--sbk-font-body);
	color: var(--sbk-text);
}

.sbk-client-portal {
	max-width: 900px;
	padding-top: 2rem;
}

.sbk-client-auth {
	max-width: 640px;
}

/* =========================================================
   Ícono de cuenta en el menú
   ========================================================= */
.sbk-account-menu-item {
	list-style: none;
	display: inline-flex;
	align-items: center;
}

.sbk-account-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--sbk-border);
	background: transparent;
	color: var(--sbk-text);
	cursor: pointer;
	margin-left: 0.5rem;
	flex-shrink: 0;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.sbk-account-icon:hover {
	border-color: var(--sbk-accent);
	color: var(--sbk-accent-dark);
}

/* =========================================================
   Popup de login / registro / recuperación
   ========================================================= */
.sbk-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(25, 24, 23, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	z-index: 9999;
}

.sbk-modal-overlay[hidden] {
	display: none;
}

.sbk-modal-dialog {
	position: relative;
	background: var(--sbk-bg);
	border-radius: 12px;
	padding: 2.5rem 2rem 2rem;
	width: 100%;
	max-width: 420px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(25, 24, 23, 0.25);
}

.sbk-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: var(--sbk-cream);
	color: var(--sbk-text);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.sbk-modal-close:hover {
	background: var(--sbk-border);
}

.sbk-auth-title {
	font-family: var(--sbk-font-heading);
	font-size: 26px;
	font-weight: normal;
	margin: 0 0 1.5rem;
	color: var(--sbk-text);
}

.sbk-auth-panel {
	display: none;
}

.sbk-client-auth[data-sbk-panel="login"] .sbk-auth-panel--login,
.sbk-client-auth[data-sbk-panel="registro"] .sbk-auth-panel--registro,
.sbk-client-auth[data-sbk-panel="recuperar"] .sbk-auth-panel--recuperar,
.sbk-client-auth[data-sbk-panel="nueva"] .sbk-auth-panel--nueva {
	display: block;
}

.sbk-auth-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sbk-auth-form input[type="email"],
.sbk-auth-form input[type="password"],
.sbk-auth-form input[type="text"] {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--sbk-border);
	border-radius: 8px;
	background: var(--sbk-cream);
	font-family: var(--sbk-font-body);
	font-size: 15px;
	color: var(--sbk-text);
}

.sbk-auth-form input:focus {
	outline: none;
	border-color: var(--sbk-accent);
	background: var(--sbk-bg);
}

.sbk-auth-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--sbk-text);
	cursor: pointer;
}

.sbk-auth-remember input {
	width: auto;
	margin: 0;
}

.sbk-auth-form button[type="submit"] {
	width: 100%;
	padding: 14px;
	margin-top: 4px;
	border-radius: 8px;
	background: var(--sbk-accent);
	border: 1px solid var(--sbk-accent);
	color: #ffffff;
	font-family: var(--sbk-font-body);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}

.sbk-auth-form button[type="submit"]:hover {
	background: var(--sbk-accent-dark);
	border-color: var(--sbk-accent-dark);
}

.sbk-auth-links {
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--sbk-border);
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
	color: var(--sbk-text-secondary);
}

.sbk-password-field {
	position: relative;
}

.sbk-password-field input {
	padding-right: 44px !important;
}

.sbk-password-toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var(--sbk-text-secondary);
	cursor: pointer;
	border-radius: 6px;
}

.sbk-password-toggle:hover {
	color: var(--sbk-accent-dark);
	background: var(--sbk-cream);
}

.sbk-auth-links a {
	color: var(--sbk-accent);
	text-decoration: none;
}

.sbk-auth-links a:hover {
	text-decoration: underline;
}

.sbk-auth-errors {
	background: #fbeaea;
	border: 1px solid #e3b3b3;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 14px;
	margin-bottom: 1rem;
}

/* =========================================================
   Portal — layout (sidebar en escritorio, pestañas en móvil)
   ========================================================= */
.sbk-portal-layout {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.sbk-portal-client {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sbk-portal-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sbk-cream);
	color: var(--sbk-accent-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sbk-font-heading);
	font-size: 15px;
	font-weight: normal;
	flex-shrink: 0;
}

.sbk-portal-client-name {
	margin: 0;
	font-family: var(--sbk-font-heading);
	font-size: 15px;
	color: var(--sbk-text);
}

.sbk-portal-client-since {
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--sbk-text-secondary);
}

.sbk-portal-tabs {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	border-bottom: 1px solid var(--sbk-border);
}

.sbk-portal-tabs a {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	font-family: var(--sbk-font-heading);
	font-size: 15px;
	color: var(--sbk-text-secondary);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	padding-bottom: 10px;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.sbk-portal-tabs a:hover {
	color: var(--sbk-accent-dark);
}

.sbk-portal-tabs a.is-active {
	color: var(--sbk-text);
	font-weight: 500;
	border-bottom-color: var(--sbk-accent-dark);
}

.sbk-portal-logout {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--sbk-text-secondary);
	text-decoration: none;
	margin-top: 4px;
}

.sbk-portal-logout:hover {
	color: var(--sbk-accent-dark);
}

@media (min-width: 780px) {
	.sbk-portal-layout {
		flex-direction: row;
		align-items: flex-start;
	}

	.sbk-portal-nav {
		width: 200px;
		flex-shrink: 0;
		position: sticky;
		top: 24px;
	}

	.sbk-portal-tabs {
		flex-direction: column;
		gap: 2px;
		overflow-x: visible;
		border-bottom: none;
	}

	.sbk-portal-tabs a {
		padding: 9px 10px;
		border-bottom: none;
		border-radius: 8px;
	}

	.sbk-portal-tabs a.is-active {
		background: var(--sbk-cream);
		border-bottom-color: transparent;
	}

	.sbk-portal-panel {
		flex: 1;
		min-width: 0;
		border-left: 1px solid var(--sbk-border);
		padding-left: 2rem;
	}
}

@media (max-width: 640px) {
	.sbk-portal-tabs {
		gap: 1rem;
	}

	.sbk-portal-tabs a span {
		font-size: 14px;
	}
}

/* =========================================================
   Portal — contenido de cada panel
   ========================================================= */
.sbk-portal-panel a {
	color: var(--sbk-accent);
}

.sbk-portal-panel h1,
.sbk-portal-panel h2,
.sbk-portal-panel h3 {
	font-family: var(--sbk-font-heading);
}

.sbk-portal-panel input[type="text"],
.sbk-portal-panel input[type="email"],
.sbk-portal-panel input[type="date"],
.sbk-portal-panel textarea {
	width: 100%;
	max-width: 360px;
	padding: 10px 12px;
	border: 1px solid var(--sbk-border);
	border-radius: 4px;
	font-family: var(--sbk-font-body);
	font-size: 15px;
	background: var(--sbk-bg);
	color: var(--sbk-text);
}

.sbk-portal-panel input:focus,
.sbk-portal-panel textarea:focus {
	outline: none;
	border-color: var(--sbk-accent);
}

.sbk-portal-panel button {
	font-family: var(--sbk-font-body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	padding: 10px 24px;
	border: 1px solid var(--sbk-accent);
	background: var(--sbk-accent);
	color: #ffffff;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.sbk-portal-panel button:hover {
	background: var(--sbk-accent-dark);
	border-color: var(--sbk-accent-dark);
}

.sbk-portal-panel label {
	display: block;
	font-size: 13px;
	color: var(--sbk-text-secondary);
	margin-bottom: 1rem;
}

.sbk-portal-welcome {
	background: #eef7ee;
	border: 1px solid #b8ddb8;
	border-radius: 8px;
	padding: 14px 18px;
	margin-bottom: 20px;
	color: #2f5c2f;
}

.sbk-portal-welcome p {
	margin: 0;
	font-size: 14px;
}

/* =========================================================
   Vestuario / Extras
   ========================================================= */
.sbk-extras-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 12px;
}

@media (min-width: 640px) {
	.sbk-extras-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 900px) {
	.sbk-extras-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.sbk-extra-card {
	position: relative;
	display: block;
	border: 1px solid var(--sbk-border);
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.sbk-extra-card:has(input:checked) {
	border-color: var(--sbk-accent);
	box-shadow: 0 0 0 1px var(--sbk-accent);
}

.sbk-extra-card-disabled {
	cursor: default;
	opacity: 0.55;
}

.sbk-extra-card-disabled:has(input:checked) {
	opacity: 1;
	border-color: #2f5c2f;
	box-shadow: 0 0 0 1px #2f5c2f;
}

.sbk-extra-card input {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	width: 18px;
	height: 18px;
}

.sbk-extra-card-photo {
	position: relative;
	display: block;
	background: #F4F1EA;
}

.sbk-extra-card-photo img {
	width: 100%;
	height: 210px;
	object-fit: contain;
	display: block;
}

.sbk-extra-card-info {
	display: block;
	padding: 8px 10px;
}

.sbk-extra-card-code {
	display: block;
	font-weight: 600;
	font-size: 13px;
}

.sbk-extra-card-tipo,
.sbk-extra-card-tallas {
	display: block;
	font-size: 11px;
	color: var(--sbk-text-secondary);
}

.sbk-extra-card-talla {
	display: block;
	margin-top: 4px;
}

.sbk-extra-card-talla select {
	width: 100%;
	padding: 4px 6px;
	font-size: 12px;
	border: 1px solid var(--sbk-border);
	border-radius: 4px;
	background: var(--sbk-bg);
	color: var(--sbk-text);
}

.sbk-extra-card-precio {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sbk-accent-dark);
}

.sbk-extras-hint {
	font-size: 12px;
	color: var(--sbk-text-secondary);
	margin: 0 0 14px;
}

.sbk-extras-total {
	margin-top: 16px;
	padding: 14px 16px;
	background: var(--sbk-cream);
	border-radius: 8px;
}

.sbk-extras-total p {
	margin: 0 0 6px;
}

.sbk-extras-status {
	font-size: 13px;
	color: var(--sbk-text-secondary);
}

.sbk-extras-readonly {
	margin: 0 0 8px;
	padding-left: 18px;
	font-size: 13px;
}

/* =========================================================
   Asistente de bienvenida (completar perfil)
   ========================================================= */
.sbk-onboarding-dialog {
	max-width: 440px;
	padding-top: 2rem;
}

.sbk-onboarding-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 1.5rem;
}

.sbk-onboarding-dots span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sbk-border);
	transition: background 0.2s ease;
}

.sbk-onboarding-dots span.is-active {
	background: var(--sbk-accent);
}

.sbk-onboarding-step {
	display: none;
	flex-direction: column;
	gap: 14px;
	text-align: center;
}

.sbk-onboarding-step.is-active {
	display: flex;
}

.sbk-onboarding-step .sbk-auth-title {
	margin: 0;
	text-align: center;
}

.sbk-onboarding-intro {
	margin: 0;
	font-size: 14px;
	color: var(--sbk-text-secondary);
	line-height: 1.6;
}

.sbk-onboarding-hint {
	margin: -6px 0 0;
	font-size: 12px;
	color: var(--sbk-text-secondary);
}

/* Etiqueta fija arriba de cada campo — el placeholder solo se ve
   cuando el campo está vacío, así que con datos prellenados (ej. de
   una importación histórica) el cliente no tenía ninguna pista de qué
   dato era cada campo. Esta etiqueta se ve siempre, esté vacío o no. */
.sbk-onboarding-label {
	display: block;
	margin: 0 0 -8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--sbk-text);
}

.sbk-onboarding-step input[type="text"],
.sbk-onboarding-step input[type="date"],
.sbk-onboarding-step input[type="tel"] {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--sbk-border);
	border-radius: 8px;
	background: var(--sbk-cream);
	font-family: var(--sbk-font-body);
	font-size: 15px;
	color: var(--sbk-text);
	box-sizing: border-box;
	line-height: normal;
}

.sbk-onboarding-step input:focus {
	outline: none;
	border-color: var(--sbk-accent);
	background: var(--sbk-bg);
}

.sbk-onboarding-step .sbk-phone-field,
.sbk-onboarding-step .sbk-document-field {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.sbk-onboarding-step .sbk-phone-field select,
.sbk-onboarding-step .sbk-document-field select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 10px 7px;
}

.sbk-onboarding-step .sbk-phone-field select {
	flex-shrink: 0;
	width: 110px;
	height: 48px;
	padding: 0 24px 0 8px;
	border: 1px solid var(--sbk-border);
	border-radius: 8px;
	background-color: var(--sbk-cream);
	font-family: var(--sbk-font-body);
	font-size: 13px;
	color: var(--sbk-text);
	box-sizing: border-box;
	line-height: normal;
}

.sbk-onboarding-step .sbk-phone-field input {
	flex: 1;
}

.sbk-onboarding-step .sbk-document-field select {
	flex-shrink: 0;
	width: 160px;
	height: 48px;
	padding: 0 24px 0 8px;
	border: 1px solid var(--sbk-border);
	border-radius: 8px;
	box-sizing: border-box;
	line-height: normal;
	background-color: var(--sbk-cream);
	font-family: var(--sbk-font-body);
	font-size: 13px;
	color: var(--sbk-text);
}

.sbk-onboarding-step .sbk-document-field input {
	flex: 1;
}

.sbk-onboarding-next,
.sbk-onboarding-step button[type="submit"] {
	width: 100%;
	padding: 14px;
	margin-top: 4px;
	border-radius: 8px;
	background: var(--sbk-accent);
	border: 1px solid var(--sbk-accent);
	color: #ffffff;
	font-family: var(--sbk-font-body);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}

.sbk-onboarding-next:hover,
.sbk-onboarding-step button[type="submit"]:hover {
	background: var(--sbk-accent-dark);
	border-color: var(--sbk-accent-dark);
}

.sbk-onboarding-nav {
	display: flex;
	gap: 10px;
	margin-top: 4px;
}

.sbk-onboarding-back {
	flex-shrink: 0;
	padding: 14px 18px;
	border-radius: 8px;
	background: transparent;
	border: 1px solid var(--sbk-border);
	color: var(--sbk-text-secondary);
	font-family: var(--sbk-font-body);
	font-size: 15px;
	cursor: pointer;
}

.sbk-onboarding-nav .sbk-onboarding-next,
.sbk-onboarding-nav button[type="submit"] {
	flex: 1;
	margin-top: 0;
}

/* =========================================================
   Testimonios (pestaña "Testimonio" del portal)
   ========================================================= */

.sbk-star-rating {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 4px;
	margin-bottom: 20px;
}

.sbk-star-rating input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sbk-star-rating label {
	display: inline-block;
	font-size: 30px;
	line-height: 1;
	color: #ddd6c7;
	cursor: pointer;
	margin: 0;
	transition: color 0.15s ease;
}

.sbk-star-rating input:checked ~ label,
.sbk-star-rating label:hover,
.sbk-star-rating label:hover ~ label {
	color: var(--sbk-accent);
}

.sbk-testimonio-form textarea {
	width: 100%;
	margin-bottom: 14px;
}

.sbk-testimonio-consent {
	display: flex !important;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px !important;
	margin-bottom: 18px !important;
}

.sbk-testimonio-consent input {
	margin-top: 3px;
	flex-shrink: 0;
}

/* =========================================================
   Pestañas de contenido dentro de "Mi cuenta" (ej. "Adicionales"
   vs "Vestuario y extras" en la próxima sesión) — activadas por JS
   (assets/js/client-portal.js) con clase .is-active.
   ========================================================= */
.sbk-content-tabs {
	margin: 24px 0 0;
}

.sbk-content-tabs-nav {
	display: flex;
	gap: 4px;
	background: #F4F1EA;
	border-radius: 999px;
	padding: 4px;
	margin-bottom: 20px;
	width: fit-content;
	max-width: 100%;
}

.sbk-content-tabs-label {
	all: unset !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	font-family: var(--sbk-font-heading) !important;
	font-size: 14px !important;
	line-height: 1 !important;
	color: var(--sbk-text-secondary) !important;
	background: transparent !important;
	padding: 10px 18px !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 999px !important;
	transition: background 0.2s ease, color 0.2s ease !important;
	-webkit-user-select: none !important;
	user-select: none !important;
	text-align: center !important;
	white-space: nowrap !important;
}

.sbk-content-tabs-label:hover {
	color: #fff !important;
	background: var(--sbk-accent) !important;
}

.sbk-content-tabs-label.is-active,
.sbk-content-tabs-label.is-active:hover {
	background: var(--sbk-accent-dark) !important;
	color: #fff !important;
	font-weight: 500 !important;
}

.sbk-content-tabs-panel {
	display: none;
}

.sbk-content-tabs-panel.is-active {
	display: block;
	animation: sbk-content-tabs-fade 0.25s ease;
}

@keyframes sbk-content-tabs-fade {
	from { opacity: 0; transform: translateY(3px); }
	to   { opacity: 1; transform: none; }
}

/* =========================================================
   Lightbox para ampliar la foto de una prenda del catálogo.
   ========================================================= */
.sbk-extra-card-zoom {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 3;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(25, 24, 23, 0.55);
	color: #fff;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.sbk-extra-card-zoom:hover {
	background: rgba(25, 24, 23, 0.8);
}

.sbk-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(15, 14, 13, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
}

.sbk-lightbox[hidden] {
	display: none;
}

.sbk-lightbox-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	max-height: 100%;
}

.sbk-lightbox img {
	max-width: 100%;
	max-height: 70vh;
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	display: block;
}

.sbk-lightbox-caption {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
	flex-wrap: wrap;
	justify-content: center;
}

.sbk-lightbox-caption-text {
	color: #fff;
	font-family: var(--sbk-font-heading);
	font-size: 15px;
}

.sbk-lightbox-select {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	padding: 9px 20px;
	border-radius: 999px;
	background: var(--sbk-accent);
	color: #191817;
	font-size: 13px;
	font-weight: 600;
	transition: background 0.2s ease, color 0.2s ease;
}

.sbk-lightbox-select:hover {
	filter: brightness(0.95);
}

.sbk-lightbox-select.is-selected {
	background: #2f5c2f;
	color: #fff;
}

.sbk-lightbox-close {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	top: 20px;
	right: 24px;
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
}

.sbk-lightbox-nav {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 34px;
	line-height: 1;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.15s ease;
}

.sbk-lightbox-nav:hover {
	background: rgba(255, 255, 255, 0.22);
}

.sbk-lightbox-prev {
	left: 16px;
}

.sbk-lightbox-next {
	right: 16px;
}

body.sbk-lightbox-open {
	overflow: hidden;
}

/* =========================================================
   "Adicionales" configurables: personas adicionales (stepper),
   pack de entrega física y escenario adicional (toggles).
   ========================================================= */
.sbk-adicionales-config {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

/* Texto libre configurado por paquete ("Fotografías adicionales...") —
   mismo borde que .sbk-adicional-item, para que no se vea suelto/sin
   marco al lado de "Personas adicionales" y "Pack de entrega física". */
.sbk-adicional-texto-libre {
	padding: 14px 16px;
	border: 1px solid var(--sbk-border);
	border-radius: 10px;
	margin-bottom: 16px;
}

.sbk-adicional-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px;
	border: 1px solid var(--sbk-border);
	border-radius: 10px;
}

.sbk-adicional-item-toggle {
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.sbk-adicional-item-toggle:has(input:checked) {
	border-color: var(--sbk-accent);
	box-shadow: 0 0 0 1px var(--sbk-accent);
}

.sbk-adicional-item-toggle input[type="checkbox"] {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
}

.sbk-adicional-item-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sbk-adicional-item-title {
	font-weight: 600;
	font-size: 14px;
	color: #191817;
}

.sbk-adicional-item-desc {
	font-size: 13px;
	color: var(--sbk-text-secondary);
	line-height: 1.5;
}

.sbk-adicional-stepper-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	flex-shrink: 0;
}

.sbk-adicional-stepper {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.sbk-adicional-subtotal {
	font-size: 12px;
	color: var(--sbk-text-secondary);
	white-space: nowrap;
}

.sbk-adicional-subtotal-valor {
	color: #191817;
}

.sbk-adicional-stepper-btn {
	all: unset;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--sbk-border);
	border-radius: 50%;
	cursor: pointer;
	font-size: 16px;
	color: #191817;
	transition: background 0.15s ease;
}

.sbk-adicional-stepper-btn:hover {
	background: #F4F1EA;
}

.sbk-adicional-stepper input[type="number"] {
	width: 44px;
	text-align: center;
	padding: 5px 2px;
	border: 1px solid var(--sbk-border);
	border-radius: 6px;
	font-size: 14px;
	-moz-appearance: textfield;
}

.sbk-adicional-stepper input[type="number"]::-webkit-outer-spin-button,
.sbk-adicional-stepper input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.sbk-extras-save {
	margin-top: 20px;
}

/* Aviso de error dentro del panel del portal (ej. falla al subir el comprobante). */
.sbk-portal-notice {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 13.5px;
	line-height: 1.5;
}

.sbk-portal-notice-error {
	background: #FBEAEA;
	border: 1px solid #E2B4B4;
	color: #8A2E2E;
}

/* Resumen compacto de lo pedido en Vestuario/Adicionales, con badge de
   estado tipo WooCommerce, visible en la tarjeta principal de la sesión. */
.sbk-extras-summary {
	background: #F6F2EA;
	border: 1px solid #E5DCC8;
	border-radius: 12px;
	padding: 16px 18px;
	margin: 28px 0 20px;
	box-shadow: 0 1px 3px rgba(25, 24, 23, 0.04);
}

.sbk-extras-summary-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-weight: 600;
	font-size: 13.5px;
	margin-bottom: 8px;
}

.sbk-status-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
}

.sbk-extras-summary-list {
	margin: 0 0 8px;
	padding-left: 18px;
	font-size: 13px;
	color: #4a453f;
}

.sbk-extras-summary-list li {
	margin-bottom: 2px;
}

.sbk-extras-summary-total {
	margin: 0;
	font-size: 13px;
	color: #4a453f;
}

/* Miniaturas de las prendas dentro de la tarjeta resumen (con zoom). */
/* Miniaturas de las prendas dentro de la tarjeta resumen (con zoom) —
   mismo tamaño/estilo que las tarjetas del catálogo, en su propia columna. */
.sbk-extras-summary-body {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
}

.sbk-extras-summary-info {
	flex: 1 1 200px;
	min-width: 180px;
}

.sbk-extras-summary-prendas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 10px;
	flex: 1 1 240px;
	max-width: 340px;
}

.sbk-extras-summary-prenda {
	display: block;
	border: 1px solid #E5DCC8;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

.sbk-extras-summary-prenda-foto {
	position: relative;
	display: block;
	background: #F4F1EA;
}

.sbk-extras-summary-prenda-foto img {
	width: 100%;
	height: 110px;
	object-fit: contain;
	display: block;
}

.sbk-extras-summary-prenda .sbk-extra-card-code {
	display: block;
	padding: 6px 8px;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	color: #191817;
}