/* =========================================================
   Linkeia POS Checkout — Frontend
   Paleta: #131517 (ink) · #FFFFFF (paper) · #F3F5F7 (fog)
   El bloque está blindado para convivir con Elementor y temas
   que inyectan resets sobre input/select/button/label.
   ========================================================= */

/* Variables + wrapper (sin fondo para que Elementor mande) */
.lpos-wrap {
	--lpos-ink: #131517;
	--lpos-paper: #FFFFFF;
	--lpos-fog: #F3F5F7;
	--lpos-line: #e6e8eb;
	--lpos-muted: #6b7280;
	--lpos-danger: #b91c1c;
	--lpos-radius: 12px;
	--lpos-radius-sm: 8px;
	--lpos-gap: 16px;
	--lpos-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	font-family: var(--lpos-font);
	color: var(--lpos-ink);
	background: transparent;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	line-height: 1.4;
	text-align: left;
}

.lpos-wrap *:not(.lpos-payphone-box *):not([class*="ppb-"]):not([class*="ppbo-"]),
.lpos-wrap *:not(.lpos-payphone-box *):not([class*="ppb-"]):not([class*="ppbo-"])::before,
.lpos-wrap *:not(.lpos-payphone-box *):not([class*="ppb-"]):not([class*="ppbo-"])::after { box-sizing: border-box; }

/* Hide helpers — Elementor/tema reescriben [hidden], así que
   duplicamos con clase CSS (la clase la maneja el JS). */
.lpos-wrap [hidden],
.lpos-wrap .lpos-hide,
.lpos-wrap .lpos-field.lpos-hide,
.lpos-wrap .lpos-block.lpos-hide {
	display: none !important;
	visibility: hidden !important;
}

/* -------- Normalización defensiva (Elementor reset) --------
   IMPORTANTE: excluimos (1) descendientes de .lpos-payphone-box y
   (2) cualquier elemento cuya clase comience con ppb- o ppbo-, que son
   los prefijos que PayPhone usa en TODAS las clases de su cajita. Esto
   asegura que las reglas como `ppb-border-start-0` o `ppb-border-radius-te-0`
   (que PayPhone aplica intencionalmente para fusionar iconos con inputs)
   no queden tapadas por nuestros resets. */
.lpos-wrap form:not(.lpos-payphone-box *):not([class*="ppb-"]):not([class*="ppbo-"]),
.lpos-wrap fieldset:not(.lpos-payphone-box *):not([class*="ppb-"]):not([class*="ppbo-"]),
.lpos-wrap legend:not(.lpos-payphone-box *):not([class*="ppb-"]):not([class*="ppbo-"]),
.lpos-wrap p:not(.lpos-payphone-box *):not([class*="ppb-"]):not([class*="ppbo-"]),
.lpos-wrap h1:not(.lpos-payphone-box *):not([class*="ppb-"]):not([class*="ppbo-"]),
.lpos-wrap h2:not(.lpos-payphone-box *):not([class*="ppb-"]):not([class*="ppbo-"]),
.lpos-wrap h3:not(.lpos-payphone-box *):not([class*="ppb-"]):not([class*="ppbo-"]),
.lpos-wrap h4:not(.lpos-payphone-box *):not([class*="ppb-"]):not([class*="ppbo-"]),
.lpos-wrap span:not(.lpos-payphone-box *):not([class*="ppb-"]):not([class*="ppbo-"]),
.lpos-wrap label:not(.lpos-payphone-box *):not([class*="ppb-"]):not([class*="ppbo-"]) {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	font-family: inherit;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
}

.lpos-wrap input:not(.lpos-payphone-box *):not([class*="ppb-"]):not([class*="ppbo-"]),
.lpos-wrap select:not(.lpos-payphone-box *):not([class*="ppb-"]):not([class*="ppbo-"]),
.lpos-wrap textarea:not(.lpos-payphone-box *):not([class*="ppb-"]):not([class*="ppbo-"]),
.lpos-wrap button:not(.lpos-payphone-box *):not([class*="ppb-"]):not([class*="ppbo-"]) {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	background: transparent;
	text-transform: none;
	letter-spacing: normal;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	box-shadow: none;
	min-height: 0;
	max-width: none;
}

.lpos-wrap input:focus:not(.lpos-payphone-box *):not([class*="ppb-"]):not([class*="ppbo-"]),
.lpos-wrap select:focus:not(.lpos-payphone-box *):not([class*="ppb-"]):not([class*="ppbo-"]),
.lpos-wrap textarea:focus:not(.lpos-payphone-box *):not([class*="ppb-"]):not([class*="ppbo-"]),
.lpos-wrap button:focus:not(.lpos-payphone-box *):not([class*="ppb-"]):not([class*="ppbo-"]) { outline: none; }

/* -------- Card / header / body -------- */
.lpos-wrap .lpos-card {
	max-width: 640px !important;
	width: 100% !important;
	margin: 0 auto !important;
	background: var(--lpos-paper) !important;
	border-radius: var(--lpos-radius) !important;
	border: 1px solid var(--lpos-line) !important;
	overflow: hidden !important;
	box-shadow: 0 1px 2px rgba(19,21,23,.04), 0 8px 24px rgba(19,21,23,.04) !important;
	padding: 0 !important;
}

.lpos-wrap .lpos-head {
	background: var(--lpos-ink) !important;
	color: var(--lpos-paper) !important;
	padding: 22px 24px !important;
	margin: 0 !important;
}
.lpos-wrap .lpos-title {
	margin: 0 0 4px !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em;
	color: var(--lpos-paper) !important;
	line-height: 1.3 !important;
}
.lpos-wrap .lpos-subtitle {
	margin: 0 !important;
	font-size: 13.5px !important;
	color: #c9ccd0 !important;
	line-height: 1.5 !important;
}

.lpos-wrap .lpos-body {
	padding: 24px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: var(--lpos-gap) !important;
}

/* -------- Field / label / hint -------- */
.lpos-wrap .lpos-field {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	margin: 0 !important;
	width: 100% !important;
}
.lpos-wrap .lpos-label {
	display: block !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--lpos-ink) !important;
	letter-spacing: .01em !important;
	line-height: 1.3 !important;
}
.lpos-wrap .lpos-req { color: var(--lpos-danger) !important; font-weight: 700 !important; }
.lpos-wrap .lpos-opt { color: var(--lpos-muted) !important; font-weight: 400 !important; font-size: 12px !important; }
.lpos-wrap .lpos-hint {
	font-size: 12px !important;
	color: var(--lpos-muted) !important;
	line-height: 1.4 !important;
	margin: 0 !important;
}

/* -------- Input / select -------- */
.lpos-wrap .lpos-input {
	width: 100% !important;
	height: auto !important;
	padding: 12px 14px !important;
	font-size: 15px !important;
	font-family: inherit !important;
	color: var(--lpos-ink) !important;
	background: var(--lpos-paper) !important;
	border: 1px solid var(--lpos-line) !important;
	border-radius: var(--lpos-radius-sm) !important;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
	appearance: none !important;
	-webkit-appearance: none !important;
	line-height: 1.3 !important;
	box-shadow: none !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	min-height: 0 !important;
}
.lpos-wrap .lpos-input:focus {
	outline: none !important;
	border-color: var(--lpos-ink) !important;
	box-shadow: 0 0 0 3px rgba(19,21,23,.08) !important;
	background: var(--lpos-paper) !important;
}
.lpos-wrap .lpos-input::placeholder { color: #9ca3af !important; opacity: 1 !important; }
.lpos-wrap .lpos-input[aria-invalid="true"] {
	border-color: var(--lpos-danger) !important;
	box-shadow: 0 0 0 3px rgba(185,28,28,.08) !important;
}

.lpos-wrap select.lpos-input {
	background-image:
		linear-gradient(45deg, transparent 50%, var(--lpos-ink) 50%),
		linear-gradient(135deg, var(--lpos-ink) 50%, transparent 50%) !important;
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50% !important;
	background-size: 5px 5px, 5px 5px !important;
	background-repeat: no-repeat !important;
	padding-right: 36px !important;
}

/* -------- Amount (currency prefix + right-aligned) -------- */
.lpos-wrap .lpos-input-group {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
}
.lpos-wrap .lpos-currency {
	position: absolute !important;
	left: 16px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	font-weight: 700 !important;
	color: var(--lpos-muted) !important;
	pointer-events: none !important;
	z-index: 2 !important;
	font-size: 15px !important;
	line-height: 1 !important;
}
.lpos-wrap .lpos-input.lpos-amount {
	padding-left: 36px !important;
	font-weight: 700 !important;
	text-align: right !important;
}

/* -------- Row layout (flex en vez de grid por compat. Elementor) -------- */
.lpos-wrap .lpos-row,
#lpos-wrap .lpos-row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--lpos-gap) !important;
	width: 100% !important;
	margin: 0 !important;
}
.lpos-wrap .lpos-row > .lpos-field,
#lpos-wrap .lpos-row > .lpos-field {
	flex: 1 1 calc(50% - 8px) !important;
	min-width: 200px !important;
}
@media (max-width: 560px) {
	.lpos-wrap .lpos-row > .lpos-field,
	#lpos-wrap .lpos-row > .lpos-field { flex: 1 1 100% !important; min-width: 0 !important; }
}

/* -------- Switch / checkbox -------- */
.lpos-wrap .lpos-check { padding: 4px 0 !important; }
.lpos-wrap .lpos-switch {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	cursor: pointer !important;
	user-select: none !important;
	font-size: 14px !important;
	color: var(--lpos-ink) !important;
	margin: 0 !important;
	font-weight: 500 !important;
}
.lpos-wrap .lpos-switch input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 42px !important;
	height: 24px !important;
	border-radius: 999px !important;
	background: var(--lpos-fog) !important;
	border: 1px solid var(--lpos-line) !important;
	position: relative !important;
	cursor: pointer !important;
	transition: background .15s ease, border-color .15s ease !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	box-shadow: none !important;
}
.lpos-wrap .lpos-switch input[type="checkbox"]::after {
	content: "" !important;
	position: absolute !important;
	top: 2px !important; left: 2px !important;
	width: 18px !important; height: 18px !important;
	border-radius: 999px !important;
	background: var(--lpos-paper) !important;
	border: 1px solid var(--lpos-line) !important;
	transition: transform .15s ease, background .15s ease !important;
}
.lpos-wrap .lpos-switch input[type="checkbox"]:checked {
	background: var(--lpos-ink) !important;
	border-color: var(--lpos-ink) !important;
}
.lpos-wrap .lpos-switch input[type="checkbox"]:checked::after {
	transform: translateX(18px) !important;
	border-color: var(--lpos-ink) !important;
}

/* -------- Payment methods (flex 2x2 — más compatible que grid con Elementor) -------- */
.lpos-wrap .lpos-methods,
#lpos-wrap .lpos-methods {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin: 4px 0 0 !important;
	width: 100% !important;
	padding: 0 !important;
	list-style: none !important;
}
.lpos-wrap .lpos-method,
#lpos-wrap .lpos-method {
	position: relative !important;
	cursor: pointer !important;
	margin: 0 !important;
	display: block !important;
	flex: 1 1 calc(50% - 5px) !important;
	min-width: 180px !important;
	max-width: 100% !important;
}
@media (max-width: 560px) {
	.lpos-wrap .lpos-method,
	#lpos-wrap .lpos-method { flex: 1 1 100% !important; min-width: 0 !important; }
}
.lpos-wrap .lpos-method input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 1px !important;
	height: 1px !important;
}
.lpos-wrap .lpos-method-box {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	padding: 14px 16px !important;
	border: 1px solid var(--lpos-line) !important;
	border-radius: var(--lpos-radius-sm) !important;
	background: var(--lpos-paper) !important;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease !important;
}
.lpos-wrap .lpos-method:hover .lpos-method-box { border-color: #cfd2d6 !important; }
.lpos-wrap .lpos-method input[type="radio"]:checked + .lpos-method-box {
	border-color: var(--lpos-ink) !important;
	background: var(--lpos-fog) !important;
	box-shadow: inset 0 0 0 1px var(--lpos-ink) !important;
}
.lpos-wrap .lpos-method-name {
	font-weight: 600 !important;
	font-size: 14px !important;
	color: var(--lpos-ink) !important;
	display: block !important;
}
.lpos-wrap .lpos-method-desc {
	font-size: 12px !important;
	color: var(--lpos-muted) !important;
	display: block !important;
}

/* -------- Upload -------- */
.lpos-wrap .lpos-upload { position: relative !important; width: 100% !important; }
.lpos-wrap .lpos-upload input[type="file"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 0.1px !important;
	height: 0.1px !important;
	pointer-events: none !important;
}
.lpos-wrap .lpos-upload-btn {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 12px 14px !important;
	border: 1px dashed var(--lpos-line) !important;
	border-radius: var(--lpos-radius-sm) !important;
	background: var(--lpos-fog) !important;
	color: var(--lpos-ink) !important;
	cursor: pointer !important;
	font-size: 14px !important;
	transition: border-color .15s ease, background .15s ease !important;
	margin: 0 !important;
	width: 100% !important;
}
.lpos-wrap .lpos-upload-btn:hover { border-color: var(--lpos-ink) !important; }
.lpos-wrap .lpos-upload-text {
	display: inline-block !important;
	padding: 6px 12px !important;
	background: var(--lpos-ink) !important;
	color: var(--lpos-paper) !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	flex-shrink: 0 !important;
	line-height: 1.3 !important;
}
.lpos-wrap .lpos-upload-name {
	color: var(--lpos-muted) !important;
	font-size: 13px !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	flex: 1 !important;
}
.lpos-wrap .lpos-upload-btn.has-file {
	border-style: solid !important;
	border-color: var(--lpos-ink) !important;
	background: var(--lpos-paper) !important;
}
.lpos-wrap .lpos-upload-btn.has-file .lpos-upload-name {
	color: var(--lpos-ink) !important;
	font-weight: 500 !important;
}

/* -------- Submit -------- */
.lpos-wrap .lpos-actions { margin-top: 8px !important; }
.lpos-wrap .lpos-submit {
	width: 100% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 14px 20px !important;
	background: var(--lpos-ink) !important;
	color: var(--lpos-paper) !important;
	border: none !important;
	border-radius: var(--lpos-radius-sm) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: .01em !important;
	cursor: pointer !important;
	transition: transform .06s ease, opacity .15s ease !important;
	font-family: inherit !important;
	text-transform: none !important;
	box-shadow: none !important;
	line-height: 1.3 !important;
	height: auto !important;
	min-height: 0 !important;
}
.lpos-wrap .lpos-submit:hover { opacity: .92 !important; background: var(--lpos-ink) !important; color: var(--lpos-paper) !important; }
.lpos-wrap .lpos-submit:active { transform: translateY(1px) !important; }
.lpos-wrap .lpos-submit:disabled { opacity: .6 !important; cursor: not-allowed !important; }
.lpos-wrap .lpos-submit.is-loading { position: relative !important; color: transparent !important; }
.lpos-wrap .lpos-submit.is-loading::after {
	content: "" !important;
	position: absolute !important;
	width: 18px !important; height: 18px !important;
	border: 2px solid rgba(255,255,255,.35) !important;
	border-top-color: var(--lpos-paper) !important;
	border-radius: 50% !important;
	animation: lpos-spin .7s linear infinite !important;
}
@keyframes lpos-spin { to { transform: rotate(360deg); } }

/* -------- Feedback -------- */
.lpos-wrap .lpos-feedback {
	margin-top: 4px !important;
	padding: 12px 14px !important;
	border-radius: var(--lpos-radius-sm) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	border: 1px solid var(--lpos-line) !important;
	background: var(--lpos-fog) !important;
	color: var(--lpos-ink) !important;
}
.lpos-wrap .lpos-feedback.is-error {
	background: #fdecec !important;
	color: var(--lpos-danger) !important;
	border-color: #f5c6c6 !important;
}
.lpos-wrap .lpos-feedback.is-success {
	background: #e8f1ec !important;
	color: #14532d !important;
	border-color: #c9ddd0 !important;
}
.lpos-wrap .lpos-error-text {
	color: var(--lpos-danger) !important;
	font-size: 12px !important;
	margin-top: 2px !important;
	display: block !important;
}

/* -------- intl-tel-input overrides --------
   Varios selectores con la misma declaración para asegurar
   que al menos uno gane contra cualquier reset de Elementor.
   El padding-left fijo (95px) tolera prefijos de hasta 4 dígitos. */
.lpos-wrap .iti {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	position: relative !important;
}
.lpos-wrap .iti input#lpos_phone,
.lpos-wrap .iti input#lpos_phone[type="tel"],
.lpos-wrap .iti--separate-dial-code input#lpos_phone,
.lpos-wrap .iti--separate-dial-code input#lpos_phone[type="tel"],
.lpos-wrap .iti .iti__tel-input#lpos_phone,
#lpos-wrap .iti input#lpos_phone[type="tel"] {
	padding-left: 100px !important;
}
.lpos-wrap .iti__country-list {
	border-radius: var(--lpos-radius-sm) !important;
	border: 1px solid var(--lpos-line) !important;
	box-shadow: 0 8px 24px rgba(19,21,23,.12) !important;
	max-width: 320px !important;
	font-family: inherit !important;
}
.lpos-wrap .iti--separate-dial-code .iti__selected-dial-code {
	color: var(--lpos-ink) !important;
	font-weight: 500 !important;
}
.lpos-wrap .iti__selected-country,
.lpos-wrap .iti__country {
	font-family: inherit !important;
	color: var(--lpos-ink) !important;
}

/* -------- Responsive -------- */
@media (max-width: 480px) {
	.lpos-wrap .lpos-head { padding: 18px 18px !important; }
	.lpos-wrap .lpos-body { padding: 18px !important; }
	.lpos-wrap .lpos-title { font-size: 18px !important; }
}