/* ==========================================================================
   CHECKOUT MULTI-STEP — PadelProfi
   Paleta: naranja #FE6100 · precio #BF0019 · texto #333333

   ÍNDICE DE SECCIONES
   ─────────────────────────────────────────────────────────────────────────
   1.  Variables CSS
   2.  Reset WooCommerce
   3.  Wrapper global
   4.  Barra de progreso
   5.  Layout (dos columnas)
   6.  Paneles de paso
   7.  Campos WooCommerce nativos
   8.  Paso 1 — Toggle Particular / Empresa
   9.  Paso 1 — Anrede (saludo)
   10. Paso 1 — Campos con label flotante (pp-field-wrap)
   11. Paso 1 — Filas de campos (pp-fields-row)
   12. Paso 1 — Google Places autocomplete
   13. Paso 1 — Checkbox Datenschutz
   14. Paso 2 — Dirección confirmada
   15. Paso 2 — Métodos de envío
   16. Paso 3 — Métodos de pago
   17. Paso 3/4 — Formulario de tarjeta (Stripe, movido al paso 4)
   18. Paso 3/4 — PayPal PPCP
   19. Paso 3/4 — Apple Pay / Google Pay (Stripe PRB)
   20. Paso 4 — Revisión (bloque productos + tarjetas resumen)
   21. Paso 4 — Footer AGB + botón submit
   22. Sidebar (resumen de pedido)
   23. Cupón
   24. Botones generales
   25. Navegación entre pasos
   26. Mensajes de error
   27. Popup cambio de método de pago
   28. Footer móvil fijo + drawer
   29. Responsive ≤ 768px
   30. Responsive ≤ 640px
   31. Responsive ≤ 480px (popup)
   ========================================================================== */


/* ==========================================================================
   1. Variables CSS
   ========================================================================== */
:root {
	--pp-orange:       #FE6100;
	--pp-orange-hover: #e55a00;
	--pp-orange-light: #fff4ee;
	--pp-orange-grad:  linear-gradient(135deg, #FF6000 0%, #FE6100 100%);
	--pp-price:        #BF0019;
	--pp-black:        #333333;
	--pp-gray-dark:    #555555;
	--pp-gray:         #888888;
	--pp-gray-light:   #f7f7f7;
	--pp-gray-border:  #e5e5e5;
	--pp-white:        #ffffff;
	--pp-green:        #2e7d32;
	--pp-radius:       12px;
	--pp-radius-sm:    8px;
	--pp-shadow:       0 2px 16px rgba(0,0,0,.07);
	--pp-shadow-md:    0 4px 24px rgba(254,97,0,.18);
	--pp-transition:   0.2s ease;
	--pp-font:         'Open Sans', sans-serif;
}


/* ==========================================================================
   2. Reset WooCommerce
   ========================================================================== */
.mm-checkout-page .woocommerce-error,
.mm-checkout-page .woocommerce-message { border-radius: var(--pp-radius-sm); }

/* Ocultar secciones nativas que reemplazamos con nuestra UI */
.mm-checkout-page .woocommerce-account-fields,
.mm-checkout-page .create-account,
.mm-checkout-page .woocommerce-checkout-registration { display: none !important; }
.mm-checkout-page .woocommerce-shipping-fields        { display: none; }
.mm-checkout-page .woocommerce-billing-fields h3,
.mm-checkout-page .woocommerce-shipping-fields h3     { display: none; }
.mm-checkout-page #place_order,
.mm-checkout-page .woocommerce-terms-and-conditions-wrapper { display: none !important; }

/* Títulos h3 nativos */
.elementor-widget-woocommerce-checkout-page .woocommerce h3 { color: black; }

/* Colores de labels en envío y pago */
.elementor-widget-woocommerce-checkout-page .woocommerce #customer_details .col-1,
.elementor-widget-woocommerce-checkout-page .woocommerce .e-checkout__order_review,
.elementor-widget-woocommerce-checkout-page .woocommerce .e-coupon-box,
.elementor-widget-woocommerce-checkout-page .woocommerce .e-woocommerce-login-section,
.elementor-widget-woocommerce-checkout-page .woocommerce .shipping_address,
.elementor-widget-woocommerce-checkout-page .woocommerce .woocommerce-additional-fields,
.elementor-widget-woocommerce-checkout-page .woocommerce .woocommerce-checkout #payment { padding: 10px !important; }

.elementor-widget-woocommerce-checkout-page .woocommerce #shipping_method li label,
.elementor-widget-woocommerce-checkout-page .woocommerce .wc_payment_method label { color: black !important; }

/* Layout Elementor checkout */
.elementor-widget-woocommerce-checkout-page .e-checkout__container { display: block !important; }

/* Payment box background */
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment .payment_methods .payment_box { background-color: white; }

/* PPCP express checkout */
.wc-ppcp-express-checkout fieldset { border: none !important; border-radius: 0 !important; margin-bottom: 0 !important; padding: 0 !important; }
.wc-ppcp-express-checkout fieldset legend { display: none; }
.wc-ppcp-express-checkout .express-divider { display: none; }


/* ==========================================================================
   3. Wrapper global
   ========================================================================== */
/* Compensar header sticky de Elementor */
.mm-checkout-page .mm-progress-bar { top: 112px; /* 32px admin bar + 80px header */ }
.mm-checkout-page .mm-checkout-wrapper { padding-top: 10px; }

/* Sin admin bar (usuarios no logueados) */
body:not(.admin-bar) .mm-checkout-page .mm-progress-bar { top: 20px; }

.mm-checkout-page .elementor-11 .elementor-element.elementor-element-377766e2,
.mm-checkout-page .elementor-11 .elementor-element.elementor-element-377766e2 > .e-con-inner,
.mm-checkout-page .elementor-widget-woocommerce-checkout-page,
.mm-checkout-page .elementor-widget-woocommerce-checkout-page > .elementor-widget-container,
.mm-checkout-page .elementor-widget-woocommerce-checkout-page .woocommerce {
	width: 100% !important;
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.mm-checkout-page .elementor-widget-woocommerce-checkout-page.e-checkout-layout-one-column .mm-checkout-layout {
	display: block !important;
	position: relative !important;
}


/* ==========================================================================
   4. Barra de progreso
   ========================================================================== */
.mm-progress-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px 0;
	background: var(--pp-white);
	border-bottom: 2px solid var(--pp-gray-border);
	margin-bottom: 28px;
}

.mm-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	cursor: default;
	min-width: 80px;
}
.mm-step.mm-step--completed { cursor: pointer; }

.mm-step__circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--pp-gray-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 15px;
	color: var(--pp-gray);
	background: var(--pp-white);
	transition: all var(--pp-transition);
	position: relative;
}
.mm-step__check { position: absolute; display: none; color: var(--pp-white); }

.mm-step.mm-step--active .mm-step__circle {
	border-color: var(--pp-orange);
	color: var(--pp-orange);
	background: var(--pp-orange-light);
	box-shadow: 0 0 0 4px rgba(254,97,0,.12);
}
.mm-step.mm-step--completed .mm-step__circle {
	background: var(--pp-orange-grad);
	border-color: var(--pp-orange);
	color: var(--pp-white);
	box-shadow: 0 2px 8px rgba(254,97,0,.3);
}
.mm-step.mm-step--completed .mm-step__number { display: none; }
.mm-step.mm-step--completed .mm-step__check  { display: block; }

.mm-step__label {
	font-size: 11px;
	font-weight: 600;
	color: var(--pp-gray);
	white-space: nowrap;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.mm-step.mm-step--active .mm-step__label,
.mm-step.mm-step--completed .mm-step__label { color: var(--pp-black); }

.mm-step__connector {
	flex: 1;
	height: 2px;
	background: var(--pp-gray-border);
	margin: 0 4px 28px;
	transition: background var(--pp-transition);
	max-width: 90px;
}
.mm-step__connector.mm-step__connector--completed { background: var(--pp-orange); }


/* ==========================================================================
   5. Layout — dos columnas (form | sidebar)
   El JS del PHP aplica los estilos inline con máxima prioridad.
   Aquí solo ponemos el fallback base.
   ========================================================================== */
.mm-checkout-page form.checkout.woocommerce-checkout {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
}

.mm-checkout-page form.checkout.woocommerce-checkout .mm-checkout-layout {
	display: block !important;
	position: relative !important;
	min-height: 640px !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
}

.mm-checkout-page .mm-checkout-main {
	width: calc(100% - 452px) !important;
	max-width: 680px !important;
	min-width: 0 !important;
}

.mm-checkout-page .mm-checkout-sidebar {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	width: 420px !important;
	min-width: 340px !important;
}
.mm-order-summary { width: 100% !important; }


/* ==========================================================================
   6. Paneles de paso
   ========================================================================== */
.mm-step-panel {
	display: none;
	background: var(--pp-white);
	border: 1px solid var(--pp-gray-border);
	border-radius: var(--pp-radius);
	padding: 28px 24px;
	box-shadow: 0 2px 16px rgba(0,0,0,.06);
}
.mm-step-panel[data-step-content="1"] { display: block; }

.mm-step-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--pp-black);
	margin: 0 0 22px;
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid var(--pp-gray-border);
	padding-bottom: 16px;
}
.mm-step-title__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--pp-orange-grad);
	color: #fff;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(254,97,0,.3);
}


/* ==========================================================================
   7. Campos WooCommerce nativos (form-row)
   ========================================================================== */
.mm-checkout-page .form-row { padding: 0 !important; margin-bottom: 14px !important; }
.mm-checkout-page .form-row label {
	font-size: 13px !important; font-weight: 600 !important;
	color: var(--pp-black) !important; margin-bottom: 6px !important; display: block !important;
}
.mm-checkout-page .form-row .required { color: var(--pp-orange) !important; }

.mm-checkout-page .woocommerce-checkout .form-row .input-text,
.mm-checkout-page .woocommerce-checkout .form-row input[type="text"],
.mm-checkout-page .woocommerce-checkout .form-row input[type="email"],
.mm-checkout-page .woocommerce-checkout .form-row input[type="tel"],
.mm-checkout-page .woocommerce-checkout .form-row input[type="password"],
.mm-checkout-page .woocommerce-checkout .form-row select,
.mm-checkout-page .woocommerce-checkout .form-row textarea {
	width: 100% !important;
	border: 1.5px solid var(--pp-gray-border) !important;
	border-radius: var(--pp-radius-sm) !important;
	padding: 11px 14px !important;
	font-size: 14px !important;
	font-family: var(--pp-font) !important;
	color: var(--pp-black) !important;
	background: var(--pp-white) !important;
	transition: border-color var(--pp-transition), box-shadow var(--pp-transition) !important;
	box-sizing: border-box !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	height: auto !important;
}
.mm-checkout-page .woocommerce-checkout .form-row .input-text:focus,
.mm-checkout-page .woocommerce-checkout .form-row input:focus,
.mm-checkout-page .woocommerce-checkout .form-row select:focus,
.mm-checkout-page .woocommerce-checkout .form-row textarea:focus {
	outline: none !important;
	border-color: var(--pp-orange) !important;
	box-shadow: 0 0 0 3px rgba(254,97,0,.12) !important;
}
.mm-checkout-page .woocommerce-input-wrapper { display: block !important; width: 100% !important; }


/* ==========================================================================
   8. Paso 1 — Toggle Particular / Empresa
   ========================================================================== */
.pp-customer-type { display: flex; gap: 12px; margin-bottom: 24px; }

.pp-type-btn {
	flex: 1;
	padding: 14px 16px;
	border: 1.5px solid var(--pp-gray-border);
	border-radius: var(--pp-radius-sm);
	background: var(--pp-white);
	font-size: 14px; font-weight: 600;
	color: var(--pp-gray-dark);
	cursor: pointer; font-family: var(--pp-font);
	transition: all var(--pp-transition);
	text-align: center;
}
.pp-type-btn--active {
	border-color: var(--pp-black);
	color: var(--pp-black);
	box-shadow: inset 0 0 0 1px var(--pp-black);
}
.pp-type-btn:hover:not(.pp-type-btn--active) { border-color: var(--pp-gray-dark); }


/* ==========================================================================
   9. Paso 1 — Anrede (saludo)
   ========================================================================== */
.pp-salutation-row { margin-bottom: 20px; }
.pp-salutation-label { display: block; font-size: 13px; font-weight: 600; color: var(--pp-black); margin-bottom: 10px; }
.pp-salutation-options { display: flex; gap: 20px; flex-wrap: wrap; }

.pp-radio-label {
	display: flex; align-items: center; gap: 8px;
	cursor: pointer; font-size: 14px; color: var(--pp-black); font-weight: 500;
}
.pp-radio-label input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.pp-radio-custom {
	width: 20px; height: 20px; border-radius: 50%;
	border: 2px solid var(--pp-gray-border);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0; transition: border-color var(--pp-transition); background: var(--pp-white);
}
.pp-radio-custom::after {
	content: ''; width: 10px; height: 10px; border-radius: 50%;
	background: var(--pp-black); opacity: 0; transition: opacity var(--pp-transition);
}
.pp-radio-label input[type="radio"]:checked + .pp-radio-custom { border-color: var(--pp-black); }
.pp-radio-label input[type="radio"]:checked + .pp-radio-custom::after { opacity: 1; }


/* ==========================================================================
   10. Paso 1 — Campos con label flotante (pp-field-wrap)
   ========================================================================== */
.pp-field-wrap { position: relative; margin-bottom: 16px; }
.pp-field-wrap--full { width: 100%; }

/* Input base */
.pp-field-wrap input[type="text"],
.pp-field-wrap input[type="email"],
.pp-field-wrap input[type="tel"] {
	width: 100%;
	border: 1.5px solid var(--pp-gray-border);
	border-radius: var(--pp-radius-sm);
	padding: 22px 14px 8px;
	font-size: 15px;
	font-family: var(--pp-font);
	color: var(--pp-black);
	background: var(--pp-white);
	transition: border-color var(--pp-transition);
	box-sizing: border-box;
	outline: none;
	height: 56px;
}

/* Label flotante */
.pp-field-wrap label {
	position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
	font-size: 15px; color: var(--pp-gray); pointer-events: none;
	transition: all 0.15s ease; font-family: var(--pp-font); white-space: nowrap;
}

/* Label sube al escribir o al hacer focus */
.pp-field-wrap input:focus + label,
.pp-field-wrap input:not(:placeholder-shown) + label {
	top: 10px; transform: translateY(0);
	font-size: 11px; color: var(--pp-gray);
	font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}

/* Estado focus */
.pp-field-wrap input:focus { border-color: var(--pp-black); }

/* Estado error */
.pp-field-wrap input.pp-invalid { border-color: var(--pp-price) !important; }
.pp-field-wrap.pp-field--invalid input {
	border-color: var(--pp-price) !important;
	box-shadow: 0 0 0 3px rgba(191,0,25,.1) !important;
}

/* Marcadores */
.pp-required { color: var(--pp-price); }
.pp-optional  { color: var(--pp-gray); font-size: 12px; font-weight: 400; }


/* ==========================================================================
   11. Paso 1 — Filas de campos (pp-fields-row)
   ========================================================================== */
.pp-fields-row { display: flex; gap: 12px; align-items: flex-start; }

/* Dos columnas iguales (nombre + apellido, teléfono + email) */
.pp-fields-row--2 .pp-field-wrap { flex: 1; }

/* PLZ (fijo 140px) + Stadt (resto) */
.pp-fields-row--postcode .pp-field-wrap:first-child { width: 140px; flex-shrink: 0; }
.pp-field-wrap--city { flex: 1; }

/* Straße (flex) + Hausnummer (fijo 130px) */
.pp-fields-row--street { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 0; }
.pp-fields-row--street .pp-field-wrap--street  { flex: 1; margin-bottom: 16px; }
.pp-fields-row--street .pp-field-wrap--housenumber { width: 130px; flex-shrink: 0; margin-bottom: 16px; }


/* ==========================================================================
   12. Paso 1 — Google Places autocomplete
   ========================================================================== */

/* El pac-container se inserta en el <body> via MutationObserver (ver JS).
   z-index alto para estar por encima de Elementor, modales y el sidebar. */
.pac-container {
	border-radius: var(--pp-radius-sm) !important;
	border: 1.5px solid var(--pp-gray-border) !important;
	box-shadow: 0 4px 16px rgba(0,0,0,.1) !important;
	font-family: var(--pp-font) !important;
	margin-top: 2px !important;
	z-index: 999999 !important;
	pointer-events: auto !important;
}
.pac-item { padding: 10px 14px; font-size: 14px; cursor: pointer; pointer-events: auto; }
.pac-item:hover,
.pac-item-selected { background: var(--pp-gray-light); }
.pac-matched { font-weight: 700; color: var(--pp-black); }

/* Permitir que el pac-container salga por debajo del borde del panel
   (border-radius genera un stacking context que puede recortarlo) */
.mm-step-panel[data-step-content="1"] {
	overflow: visible !important;
}


/* ==========================================================================
   13. Paso 1 — Checkbox Datenschutz
   ========================================================================== */
.pp-privacy-check {
	margin-top: 20px; padding-top: 20px;
	border-top: 1px solid var(--pp-gray-border);
}
.pp-privacy-check.pp-privacy--invalid .pp-checkmark {
	border-color: var(--pp-price) !important;
	box-shadow: 0 0 0 3px rgba(191,0,25,.1);
}
.pp-check-label {
	display: flex; align-items: flex-start; gap: 10px;
	font-size: 13px; color: var(--pp-gray-dark); cursor: pointer; line-height: 1.5;
}
.pp-check-label input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.pp-checkmark {
	width: 20px; height: 20px; border: 2px solid var(--pp-gray-border); border-radius: 4px;
	flex-shrink: 0; display: flex; align-items: center; justify-content: center;
	margin-top: 1px; transition: all var(--pp-transition); background: var(--pp-white);
}
.pp-check-label input[type="checkbox"]:checked + .pp-checkmark {
	background: var(--pp-black); border-color: var(--pp-black);
}
.pp-check-label input[type="checkbox"]:checked + .pp-checkmark::after {
	content: ''; width: 5px; height: 9px;
	border: 2px solid #fff; border-top: none; border-left: none;
	transform: rotate(45deg) translateY(-1px); display: block;
}
.pp-check-label a { color: var(--pp-black); text-decoration: underline; }


/* ==========================================================================
   14. Paso 2 — Dirección confirmada
   ========================================================================== */
.mm-confirmed-address {
	display: flex; align-items: center; gap: 12px;
	padding: 13px 16px;
	background: var(--pp-orange-light);
	border-radius: var(--pp-radius-sm);
	border: 1px solid rgba(254,97,0,.2);
	margin-bottom: 22px;
}
.mm-confirmed-address__icon  { color: var(--pp-orange); flex-shrink: 0; }
.mm-confirmed-address__text  { flex: 1; }
.mm-confirmed-address__label {
	font-size: 11px; color: var(--pp-gray); display: block;
	text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.mm-confirmed-address__value { font-size: 14px; font-weight: 600; color: var(--pp-black); }


/* ==========================================================================
   15. Paso 2 — Métodos de envío
   ========================================================================== */
.mm-shipping-methods__title {
	font-size: 14px; font-weight: 700; margin-bottom: 10px;
	color: var(--pp-black); text-transform: uppercase; letter-spacing: .04em;
}
.mm-wc-shipping-wrapper ul#shipping_method {
	list-style: none; padding: 0; margin: 0;
	border: 1.5px solid var(--pp-gray-border);
	border-radius: var(--pp-radius); overflow: hidden;
}
.mm-wc-shipping-wrapper ul#shipping_method li {
	display: flex; align-items: center; padding: 15px 18px;
	border-bottom: 1px solid var(--pp-gray-border);
	background: var(--pp-white);
	transition: background var(--pp-transition);
	cursor: pointer; gap: 12px;
}
.mm-wc-shipping-wrapper ul#shipping_method li:last-child { border-bottom: none; }
.mm-wc-shipping-wrapper ul#shipping_method li:hover { background: var(--pp-gray-light); }
.mm-wc-shipping-wrapper ul#shipping_method li input[type="radio"] {
	accent-color: var(--pp-orange); width: 18px; height: 18px; flex-shrink: 0; margin: 0; cursor: pointer;
}
.mm-wc-shipping-wrapper ul#shipping_method li label {
	display: flex; align-items: center; justify-content: space-between;
	width: 100%; font-size: 14px; font-weight: 600; color: var(--pp-black);
	cursor: pointer; gap: 10px; margin: 0;
}
.mm-wc-shipping-wrapper ul#shipping_method .woocommerce-Price-amount {
	color: var(--pp-black); margin-left: auto;
}
.mm-wc-shipping-wrapper .woocommerce-shipping-destination,
.mm-wc-shipping-wrapper > p:first-child { display: none; }
.mm-wc-shipping-wrapper p { font-size: 14px; color: var(--pp-gray-dark); padding: 12px 0; }

.mm-no-shipping-msg {
	display: flex; align-items: center; gap: 10px; padding: 16px;
	background: #f0fdf4; border: 1px solid #bbf7d0;
	border-radius: var(--pp-radius-sm); font-size: 14px; color: var(--pp-green); font-weight: 600;
}


/* ==========================================================================
   16. Paso 3 — Métodos de pago (lista de cards)
   ========================================================================== */
.mm-payment-wrapper .wc_payment_methods {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: 6px;
	border: none !important; border-radius: 0 !important; overflow: visible !important;
}
.mm-payment-wrapper .wc_payment_method {
	border: 1.5px solid var(--pp-gray-border) !important;
	border-radius: var(--pp-radius-sm) !important;
	padding: 0 !important;
	overflow: hidden;
	background: var(--pp-white);
	transition: border-color var(--pp-transition), box-shadow var(--pp-transition);
	cursor: pointer;
}
.mm-payment-wrapper .wc_payment_method:hover:not(.mm-payment--selected) {
	border-color: #aaa !important; background: var(--pp-white);
}
.mm-payment-wrapper .wc_payment_method.mm-payment--selected {
	border-color: var(--pp-black) !important; border-width: 2px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.mm-payment-wrapper .wc_payment_method label {
	display: flex !important; align-items: center !important; gap: 12px !important;
	padding: 14px 16px !important; cursor: pointer;
	font-size: 14px !important; font-weight: 600 !important; color: var(--pp-black) !important;
	margin: 0 !important;
}
.mm-payment-wrapper .wc_payment_method label:hover,
.mm-payment-wrapper .wc_payment_method.mm-payment--selected label { background: transparent !important; }

/* Radio: oculto, el borde del card hace de indicador */
.mm-payment-wrapper .wc_payment_method input[type="radio"] { display: none !important; }

.mm-payment-wrapper .wc_payment_method img {
	height: 26px; width: auto; margin-left: auto; object-fit: contain; flex-shrink: 0;
}

/* Ocultar payment_box en paso 3 — se muestra solo en paso 4 cuando aplica */
.mm-payment-wrapper .payment_box,
.mm-payment-wrapper .payment_box * { display: none !important; }

/* Ocultar botones PayPal PPCP en paso 3 */
.mm-payment-wrapper ~ [id^="ppc-button"],
.mm-payment-wrapper ~ .ppcp-checkout-button-wrapper,
.mm-payment-wrapper ~ #wc-ppcp-button-wrapper,
.mm-payment-wrapper .paypal-button-row,
.mm-payment-wrapper .paypal-buttons,
.mm-payment-wrapper [class*="paypal-button"],
.mm-payment-wrapper [id^="ppc-button"],
.mm-payment-wrapper .wc-ppcp-button-wrapper,
.mm-step-panel[data-step-content="3"] .paypal-button-row,
.mm-step-panel[data-step-content="3"] .paypal-buttons,
.mm-step-panel[data-step-content="3"] [class*="paypal-button"],
.mm-step-panel[data-step-content="3"] [id^="ppc-button"],
[id^="ppc-button"]:not(.mm-step4-paypal-wrap *) { display: none !important; }

/* Apple Pay / Google Pay inyectado como opción en la lista */
.mm-applepay-label  { display: flex !important; align-items: center !important; }
.mm-applepay-logo   { height: 28px; width: auto; margin-left: auto; flex-shrink: 0; }
.mm-applepay-option.mm-payment--selected { border-color: var(--pp-black) !important; border-width: 2px !important; }

/* Notas del pedido */
.mm-order-notes {
	margin-top: 20px; padding-top: 20px;
	border-top: 1px solid var(--pp-gray-border);
}


/* ==========================================================================
   17. Paso 3/4 — Formulario de tarjeta Stripe (movido al paso 4)
   ========================================================================== */
.mm-step4-card-form {
	border: 1.5px solid var(--pp-gray-border);
	border-radius: var(--pp-radius-sm);
	overflow: hidden;
	background: var(--pp-white);
	margin-bottom: 4px;
}
.mm-step4-card-form > .payment_box,
.mm-step4-card-form > .payment_box * { display: revert !important; visibility: visible !important; }
.mm-step4-card-form > .payment_box {
	display: block !important;
	padding: 16px !important;
	background: var(--pp-white) !important;
	border: none !important;
	font-size: 13px; color: var(--pp-gray-dark);
}


/* ==========================================================================
   18. Paso 3/4 — PayPal PPCP
   ========================================================================== */
/* Pool off-screen: PayPal necesita dimensiones reales para montar el SDK */
#mm-ppcp-pool { /* posicionado via PHP inline: position:fixed;top:-9999px */ }

/* Box en paso 4 */
.mm-step4-paypal-box { width: 100%; margin-bottom: 8px; }
.mm-step4-paypal-box .payment_box,
.mm-step4-paypal-box .payment_box * {
	display: block !important; visibility: visible !important;
	height: auto !important; overflow: visible !important;
	opacity: 1 !important; pointer-events: auto !important;
}
.mm-step4-paypal-box .payment_box {
	padding: 16px !important; background: var(--pp-white) !important;
	border: 1.5px solid var(--pp-gray-border) !important;
	border-radius: var(--pp-radius-sm) !important; min-height: 52px;
}

/* Botón PayPal nativo en paso 4 */
.mm-step4-paypal-native { width: 100% !important; min-height: 55px; overflow: visible !important; }
.mm-step4-paypal-native .paypal-button-row,
.mm-step4-paypal-native [class*="paypal-button-number"],
.mm-step4-paypal-native .paypal-buttons,
.mm-step4-paypal-native [class*="paypal-button"] {
	display: block !important; visibility: visible !important;
	min-height: 48px !important; width: 100% !important; max-width: 100% !important;
}
.mm-step4-paypal-native iframe {
	display: block !important; width: 100% !important;
	min-width: 0 !important; max-width: 100% !important;
}

/* Botón PayPal estilizado (fallback logo oficial) */
.mm-step4-paypal-btn {
	display: flex !important; align-items: center !important; justify-content: center !important;
	width: 100% !important; padding: 14px 20px !important;
	background: #FFB700 !important; border: none !important; border-radius: 10px !important;
	cursor: pointer;
	transition: background .15s, box-shadow .15s;
	box-shadow: 0 2px 8px rgba(0,48,135,.2) !important;
	margin-top: 15px; margin-bottom: 12px; min-height: 52px;
}
.mm-step4-paypal-btn:hover { background: #F5A800 !important; }
.mm-step4-paypal-btn[style*="display:none"] { display: none !important; }
.mm-step4-paypal-btn img {
	display: block !important; pointer-events: none;
	height: 28px !important; width: 88px !important;
	flex-shrink: 0; object-fit: contain; overflow: visible;
}

/* Cuando el popup está abierto, ocultar botones de pago bajo el overlay */
body.mm-pay-open .mm-step4-paypal-native,
body.mm-pay-open .mm-step4-express-wrap {
	visibility: hidden !important; pointer-events: none !important;
}


/* ==========================================================================
   19. Paso 3/4 — Apple Pay / Google Pay (Stripe PRB)
   ========================================================================== */
/* Contenedor off-screen: Stripe necesita que el elemento sea visible para montar */
.mm-stripe-prb-pool {
	position: fixed !important;
	top: -9999px !important; left: -9999px !important;
	width: 300px !important; height: 60px !important;
	overflow: visible !important; z-index: -1 !important; pointer-events: none;
}

/* Wrapper en paso 4 */
.mm-step4-express-wrap { width: 100%; border-radius: var(--pp-radius-sm); overflow: hidden; }
.mm-step4-express-wrap #wc-stripe-payment-request-button,
.mm-step4-express-wrap #wc-stripe-express-checkout-element {
	display: block !important; min-height: 48px; border-radius: 8px; overflow: hidden;
}


/* ==========================================================================
   20. Paso 4 — Revisión (bloque productos + tarjetas resumen)
   ========================================================================== */

/* Bloque de productos */
.mm-step4-block {
	border: 1.5px solid var(--pp-gray-border);
	border-radius: var(--pp-radius);
	overflow: hidden; margin-bottom: 16px;
}
.mm-step4-block__title {
	font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .05em;
	color: var(--pp-gray-dark); padding: 11px 18px;
	background: var(--pp-gray-light);
	border-bottom: 1px solid var(--pp-gray-border); margin: 0;
}
.mm-step4-block .mm-order-summary__items {
	padding: 0 12px; margin: 0;
	border-bottom: 1px solid var(--pp-gray-border);
}
.mm-step4-block .mm-order-summary__items .mm-order-item:last-child { border-bottom: none; }
.mm-step4-block .mm-order-summary__totals { padding: 4px 18px 12px; margin: 0; border-bottom: none; }

/* Tarjetas resumen (Adresse / Versand / Zahlung) */
.mm-review-cards {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 12px; margin-bottom: 16px;
}
.mm-review-card {
	border: 1.5px solid var(--pp-gray-border);
	border-radius: var(--pp-radius);
	padding: 14px 16px; background: var(--pp-white);
}
.mm-review-card__header {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 8px; padding-bottom: 8px;
	border-bottom: 1px solid var(--pp-gray-border);
}
.mm-review-card__title {
	font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .05em; color: var(--pp-gray-dark);
}
.mm-review-card__body {
	font-size: 14px; font-weight: 500; color: var(--pp-black);
	line-height: 1.5; word-break: break-word;
}


/* ==========================================================================
   21. Paso 4 — Footer AGB + área de acción (submit / PayPal)
   ========================================================================== */
.mm-step4-footer {
	padding-top: 20px;
	border-top: 1px solid var(--pp-gray-border);
	margin-top: 8px;
}
.mm-step4-footer .mm-terms-wrap { margin-bottom: 0; }
.mm-step4-footer .mm-step-nav   { border-top: none; margin-top: 16px; padding-top: 0; }
.mm-btn-checkout--step4 { flex: 1; width: auto; }

/* Área de acción dinámica (estándar / PayPal / Apple Pay) */
.mm-step4-action-area { flex: 1; display: flex; flex-direction: column; gap: 10px; }

/* Cuando el método tiene formulario (Stripe card) o PayPal, el nav se apila */
.mm-step-nav--paypal {
	display: flex !important; flex-direction: column !important;
	align-items: stretch !important; gap: 12px !important;
}
.mm-step-nav--paypal .mm-btn-prev { align-self: flex-start !important; }

/* Wrap nativo del botón PayPal */
.mm-step4-paypal-wrap { width: 100%; }
.mm-step4-paypal-wrap [id^="ppc-button"],
.mm-step4-paypal-wrap .paypal-button-container { width: 100% !important; min-width: 0 !important; }


/* ==========================================================================
   22. Sidebar — resumen de pedido
   ========================================================================== */
.mm-order-summary {
	border: 1px solid var(--pp-gray-border); border-radius: var(--pp-radius);
	padding: 20px; background: var(--pp-white);
	box-shadow: 0 4px 20px rgba(0,0,0,.07);
}
.mm-order-summary__title {
	font-size: 16px; font-weight: 700; color: var(--pp-black);
	margin: 0 0 16px; padding-bottom: 14px;
	border-bottom: 2px solid var(--pp-gray-border);
	text-transform: uppercase; letter-spacing: .04em;
}
.mm-order-summary__items {
	display: flex; flex-direction: column; gap: 12px;
	margin-bottom: 16px; padding-bottom: 16px;
	border-bottom: 1px solid var(--pp-gray-border);
}
.mm-order-summary__totals { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--pp-gray-border); }

/* Items */
.mm-order-item {
	display: flex; gap: 12px; align-items: flex-start; position: relative;
	padding: 10px 0; border-bottom: 1px solid var(--pp-gray-border);
}
.mm-order-item:last-child { border-bottom: none; }
.mm-order-item__img {
	width: 64px; height: 64px; object-fit: contain;
	border: 1px solid var(--pp-gray-border); border-radius: var(--pp-radius-sm);
	flex-shrink: 0; background: var(--pp-gray-light); padding: 6px;
}
.mm-order-item__info { flex: 1; }
.mm-order-item__name {
	font-size: 14px; color: var(--pp-black); margin: 0 0 3px;
	line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	font-weight: 500;
}
.mm-order-item__qty   { font-size: 12px; color: var(--pp-gray); display: block; }
.mm-order-item__price { font-size: 14px; font-weight: 700; color: black; display: block; margin-top: 2px; }

/* Controles de cantidad */
.mm-order-item__controls {
	display: inline-flex; align-items: center; margin: 6px 0 5px;
	border: 1.5px solid var(--pp-gray-border); border-radius: 50px;
	overflow: hidden; background: var(--pp-white);
}
.mm-qty-btn {
	background: transparent; border: none; width: 28px; height: 28px;
	font-size: 17px; font-weight: 700; cursor: pointer; color: var(--pp-black);
	line-height: 1; transition: background var(--pp-transition), color var(--pp-transition);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mm-qty-btn:hover:not(:disabled) { background: var(--pp-orange-light); color: var(--pp-orange); }
.mm-qty-btn:disabled { opacity: .35; cursor: default; }
.mm-qty-value {
	min-width: 30px; text-align: center; font-size: 13px; font-weight: 700; color: var(--pp-black);
	border-left: 1.5px solid var(--pp-gray-border); border-right: 1.5px solid var(--pp-gray-border);
	line-height: 28px; padding: 0 2px;
}
.mm-item-remove {
	background: none; border: none; color: var(--pp-gray); font-size: 16px;
	cursor: pointer; padding: 4px; flex-shrink: 0; align-self: flex-start;
	transition: color var(--pp-transition), background var(--pp-transition);
	border-radius: 50%; width: 26px; height: 26px;
	display: flex; align-items: center; justify-content: center; margin-top: -2px;
}
.mm-item-remove:hover { color: var(--pp-price); background: #fff0f0; }

/* Totales */
.mm-summary-row {
	display: flex !important; justify-content: space-between !important;
	align-items: center; padding: 7px 0;
	font-size: 14px; color: var(--pp-black); gap: 8px;
}
.mm-order-summary .mm-summary-row { display: flex !important; justify-content: space-between !important; }
.mm-summary-row--total {
	font-size: 18px; font-weight: 700; padding-top: 12px; margin-top: 6px;
	border-top: 2px solid var(--pp-gray-border);
}
.mm-summary-row--total strong { color: black; font-weight: 600; }
.mm-summary-row--coupon .mm-discount { color: var(--pp-green); font-weight: 700; }
.mm-free    { color: #00bf63; font-weight: 700; }
.mm-iva-note { font-size: 11px; color: var(--pp-gray); text-align: right; margin: 2px 0 0; }


/* ==========================================================================
   23. Cupón
   ========================================================================== */
.mm-coupon-field { margin-bottom: 16px; }
.mm-coupon-input-group { display: flex; gap: 8px; }
.mm-coupon-input-group input[type="text"] {
	flex: 1; border: 1.5px solid var(--pp-gray-border);
	border-radius: var(--pp-radius-sm); padding: 10px 12px;
	font-size: 13px; font-family: var(--pp-font); color: var(--pp-black);
	transition: border-color var(--pp-transition);
}
.mm-coupon-input-group input:focus {
	outline: none; border-color: var(--pp-orange);
	box-shadow: 0 0 0 3px rgba(254,97,0,.1);
}
.mm-btn-coupon {
	padding: 10px 14px; background: var(--pp-white);
	border: 1.5px solid var(--pp-orange); border-radius: var(--pp-radius-sm);
	font-size: 13px; font-weight: 700; cursor: pointer; color: var(--pp-orange);
	font-family: var(--pp-font); transition: all var(--pp-transition); white-space: nowrap;
}
.mm-btn-coupon:hover { background: var(--pp-orange); color: var(--pp-white); }
.mm-coupon-message { font-size: 12px; margin-top: 6px; min-height: 16px; }
.mm-coupon-message--ok    { color: var(--pp-green); }
.mm-coupon-message--error { color: var(--pp-price); }
.mm-coupon-remove { background: none; border: none; color: var(--pp-gray); cursor: pointer; font-size: 16px; padding: 0 4px; line-height: 1; }
.mm-coupon-remove:hover { color: var(--pp-price); }


/* ==========================================================================
   24. Botones generales
   ========================================================================== */
.mm-btn-primary {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px; padding: 13px 24px;
	background: var(--pp-orange-grad); color: var(--pp-white) !important;
	border: none; border-radius: 20px;
	font-size: 15px; font-weight: 700; font-family: var(--pp-font);
	cursor: pointer; transition: all var(--pp-transition);
	text-decoration: none; line-height: 1;
	box-shadow: 0 2px 8px rgba(254,97,0,.25); letter-spacing: .01em;
}
.mm-btn-primary:hover {
	background: linear-gradient(135deg, #e55a00 0%, #d95300 100%);
	box-shadow: 0 4px 16px rgba(254,97,0,.35);
	transform: translateY(-1px); color: var(--pp-white) !important;
}

.mm-btn-secondary {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px; padding: 11px 20px;
	background: transparent; color: var(--pp-gray-dark) !important;
	border: 1.5px solid var(--pp-gray-border); border-radius: 10px;
	font-size: 14px; font-weight: 600; font-family: var(--pp-font);
	cursor: pointer; transition: all var(--pp-transition);
	text-decoration: none; line-height: 1;
}
.mm-btn-secondary:hover { border-color: var(--pp-orange); color: var(--pp-orange) !important; }

.mm-btn-edit {
	background: none; border: none; color: var(--pp-orange);
	font-size: 12px; font-weight: 700; cursor: pointer; padding: 2px 0;
	text-decoration: none; font-family: var(--pp-font);
	transition: color var(--pp-transition);
	text-transform: uppercase; letter-spacing: .03em;
}
.mm-btn-edit:hover { color: var(--pp-orange-hover); }

.mm-btn-checkout {
	margin-top: 15px; width: 100%; padding: 16px; font-size: 16px;
	border-radius: 10px; justify-content: center;
	margin-bottom: 12px; box-shadow: var(--pp-shadow-md);
}

/* AGB */
.mm-terms-wrap  { margin-bottom: 14px; }
.mm-terms-label {
	display: flex; align-items: flex-start; gap: 8px;
	font-size: 12px; color: var(--pp-gray-dark); cursor: pointer; line-height: 1.45;
}
.mm-terms-label input[type="checkbox"] { accent-color: var(--pp-orange); width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.mm-terms-label a { color: var(--pp-orange); text-decoration: underline; }

.mm-secure-info {
	display: flex; align-items: center; justify-content: center;
	gap: 6px; font-size: 12px; color: var(--pp-gray); margin: 8px 0 12px;
}
.mm-secure-info svg { color: var(--pp-green); }


/* ==========================================================================
   25. Navegación entre pasos
   ========================================================================== */
.mm-step-nav { padding: 10px !important; }


/* ==========================================================================
   26. Mensajes de error
   ========================================================================== */
.mm-step-error {
	background: #fff5f0; border-left: 4px solid var(--pp-orange);
	padding: 10px 14px; border-radius: var(--pp-radius-sm);
	font-size: 13px; margin-bottom: 16px; color: var(--pp-black);
}
.mm-checkout-page .woocommerce-error {
	background: #fff8f7; border-left: 4px solid #e2401c;
	padding: 12px 16px; border-radius: var(--pp-radius-sm);
	font-size: 13px; margin-bottom: 18px;
	list-style: none; color: #e2401c;
}


/* ==========================================================================
   27. Popup — cambio de método de pago (desde paso 4)
   Overlay y popup son movidos al <body> por JS para evitar el stacking
   context de Elementor (los transforms crean un nuevo contexto).
   ========================================================================== */
.mm-pay-overlay {
	position: fixed; inset: 0;
	background: rgba(0,0,0,.45);
	z-index: 99998;
	opacity: 0; visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
	cursor: pointer;
}
.mm-pay-overlay--active { opacity: 1; visibility: visible; }

.mm-pay-popup {
	position: fixed;
	top: 16px; right: 16px; bottom: 16px;
	width: 460px; max-width: calc(100vw - 32px);
	z-index: 99999;
	background: var(--pp-white);
	border-radius: 16px;
	box-shadow: -4px 0 40px rgba(0,0,0,.18), 0 8px 32px rgba(0,0,0,.10);
	display: flex; flex-direction: column;
	transform: translateX(calc(100% + 32px));
	transition: transform .32s cubic-bezier(.4,0,.2,1);
	font-family: var(--pp-font); overflow: hidden;
}
.mm-pay-popup--active { transform: translateX(0); }
body.mm-pay-open { overflow: hidden; }

.mm-pay-popup__header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 20px 24px; border-bottom: 1px solid var(--pp-gray-border); flex-shrink: 0;
}
.mm-pay-popup__title { font-size: 17px; font-weight: 700; color: var(--pp-black); margin: 0; }
.mm-pay-popup__close {
	background: none; border: none; padding: 4px; cursor: pointer;
	color: var(--pp-gray); display: flex; align-items: center; justify-content: center;
	border-radius: 50%; width: 32px; height: 32px; flex-shrink: 0;
	transition: background .15s, color .15s;
}
.mm-pay-popup__close:hover { background: var(--pp-gray-light); color: var(--pp-black); }

.mm-pay-popup__body {
	flex: 1; overflow-y: auto; overflow-x: hidden;
	-webkit-overflow-scrolling: touch; padding: 16px;
}
.mm-pay-popup__body::-webkit-scrollbar       { width: 4px; }
.mm-pay-popup__body::-webkit-scrollbar-thumb { background: var(--pp-gray-border); border-radius: 4px; }

.mm-pay-popup__list { display: flex; flex-direction: column; gap: 8px; }
.mm-pay-popup__item {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 16px;
	border: 1.5px solid var(--pp-gray-border); border-radius: var(--pp-radius-sm);
	cursor: pointer; background: var(--pp-white);
	transition: border-color var(--pp-transition), box-shadow var(--pp-transition);
	user-select: none;
}
.mm-pay-popup__item:hover { border-color: #aaa; }
.mm-pay-popup__item--selected {
	border-color: var(--pp-black) !important; border-width: 2px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.mm-pay-popup__item-radio {
	width: 18px; height: 18px; border-radius: 50%;
	border: 2px solid var(--pp-gray-border); flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	transition: border-color var(--pp-transition);
}
.mm-pay-popup__item--selected .mm-pay-popup__item-radio { border-color: var(--pp-black); }
.mm-pay-popup__item-radio::after {
	content: ''; width: 9px; height: 9px; border-radius: 50%;
	background: var(--pp-black); opacity: 0; transition: opacity var(--pp-transition);
}
.mm-pay-popup__item--selected .mm-pay-popup__item-radio::after { opacity: 1; }
.mm-pay-popup__item-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--pp-black); }
.mm-pay-popup__item-img  { height: 26px; width: auto; object-fit: contain; flex-shrink: 0; }

.mm-pay-popup__footer {
	display: flex; gap: 10px;
	padding: 14px 20px; border-top: 1px solid var(--pp-gray-border);
	background: var(--pp-white); flex-shrink: 0; justify-content: flex-end;
}


/* ==========================================================================
   28. Footer móvil fijo + drawer de resumen
   (el div es creado por JS y añadido al body)
   ========================================================================== */
.mm-mobile-footer {
	display: none; /* JS lo activa en móvil */
	position: fixed; bottom: 0; left: 0; right: 0;
	z-index: 99999;
	background: var(--pp-white);
	border-top: 2px solid var(--pp-gray-border);
	box-shadow: 0 -4px 20px rgba(0,0,0,.12);
	padding: 12px 16px;
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	font-family: var(--pp-font);
}
.mm-mobile-footer__total    { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.mm-mobile-footer__label    { font-size: 13px; color: var(--pp-gray-dark); font-weight: 500; }
.mm-mobile-footer__price    { font-size: 17px; font-weight: 700; color: var(--pp-black); }
.mm-mobile-footer__btn {
	display: flex; align-items: center; justify-content: center;
	width: 100%; padding: 15px 20px;
	background: var(--pp-orange-grad); color: #fff;
	border: none; border-radius: 50px;
	font-size: 16px; font-weight: 700; font-family: var(--pp-font);
	cursor: pointer; box-shadow: 0 2px 10px rgba(254,97,0,.30); letter-spacing: 0.02em;
}

/* Toggle "Bestellung anzeigen" */
.mm-mobile-footer__toggle {
	display: flex; align-items: center; gap: 8px;
	background: var(--pp-gray-light); border: none;
	border-bottom: 1px solid var(--pp-gray-border);
	cursor: pointer; font-family: var(--pp-font);
	font-size: 13px; font-weight: 600; color: var(--pp-black);
	padding: 10px 16px; width: calc(100% + 32px); margin: 0 -16px 10px;
}
.mm-mobile-footer__toggle-label { flex: 1; text-align: left; }
.mm-mobile-footer__toggle-price { font-size: 15px; font-weight: 700; color: var(--pp-black); }
.mm-footer-toggle-arrow {
	width: 22px; height: 22px; transition: transform 0.3s ease;
	flex-shrink: 0; color: var(--pp-orange); stroke-width: 2.5px;
}
.mm-mobile-footer__toggle.mm-toggle--open .mm-footer-toggle-arrow { transform: rotate(180deg); }

/* Drawer desplegable */
.mm-mobile-drawer {
	max-height: 0; overflow: hidden;
	transition: max-height 0.35s ease;
	background: var(--pp-white);
	border-top: 1px solid var(--pp-gray-border);
}
.mm-mobile-drawer.mm-mobile-drawer--open { max-height: 65vh; overflow-y: auto; }
.mm-mobile-drawer__inner { padding: 14px 16px; }
.mm-mobile-drawer__inner .mm-order-summary__items  { margin-bottom: 10px; padding-bottom: 10px; }
.mm-mobile-drawer__inner .mm-order-item__img       { width: 52px !important; height: 52px !important; }
.mm-mobile-drawer__inner .mm-order-item__name      { font-size: 12px; }
.mm-mobile-drawer__inner .mm-summary-row           { display: flex !important; justify-content: space-between !important; }


/* ==========================================================================
   29. Responsive ≤ 768px
   ========================================================================== */
@media (max-width: 768px) {

	.mm-checkout-wrapper { padding-bottom: 130px !important; }
	.mm-checkout-page form.checkout.woocommerce-checkout .mm-checkout-layout { min-height: 0 !important; }
	.mm-checkout-page .mm-checkout-main { width: 100% !important; max-width: none !important; }

	/* Sidebar oculto en móvil — reemplazado por el footer drawer */
	.mm-checkout-page .mm-checkout-sidebar { display: none !important; }
	.mm-checkout-sidebar .mm-terms-wrap,
	.mm-checkout-sidebar .mm-secure-info,
	.mm-checkout-sidebar #mm-sidebar-submit { display: none !important; }

	/* Barra de progreso */
	.mm-step__label     { font-size: 10px; }
	.mm-step__connector { max-width: 50px; }

	/* Campos en 2 columnas → columna única */
	.pp-fields-row--2 {
		flex-direction: column !important; gap: 0 !important; align-items: stretch !important;
	}
	.pp-fields-row--2 .pp-field-wrap { width: 100% !important; flex: none !important; }

	/* Review cards: columna única */
	.mm-review-cards { grid-template-columns: 1fr; }

	/* Métodos de pago */
	.mm-payment-wrapper .wc_payment_methods { gap: 4px; }
	.mm-payment-wrapper .wc_payment_method label { padding: 12px 14px !important; flex-wrap: nowrap; overflow: hidden; }
	.mm-payment-wrapper .wc_payment_method label img { max-width: 60px; height: 20px !important; object-fit: contain; flex-shrink: 0; }
	.mm-payment-wrapper .payment_box { padding: 10px 14px !important; }

	/* Envío */
	.mm-wc-shipping-wrapper ul#shipping_method li { padding: 12px 14px; align-items: flex-start; flex-wrap: wrap; }
	.mm-wc-shipping-wrapper ul#shipping_method li label { flex-direction: column; align-items: flex-start; gap: 3px; }
	.mm-delivery-date-label { font-size: 12px !important; font-weight: 400 !important; color: var(--pp-gray) !important; display: block; }

	/* Sidebar móvil */
	.mm-checkout-sidebar .mm-order-summary { padding: 14px 16px; box-sizing: border-box; }
	.mm-order-summary__title  { font-size: 13px !important; margin-bottom: 10px !important; padding-bottom: 10px !important; }
	.mm-order-summary__items  { gap: 0; margin-bottom: 10px; padding-bottom: 10px; }
	.mm-order-item            { padding: 8px 0; gap: 10px; }
	.mm-order-item__img       { width: 52px !important; height: 52px !important; }
	.mm-order-item__name      { font-size: 12px; }
	.mm-coupon-field          { margin-bottom: 10px; }
	.mm-summary-row {
		display: flex !important; justify-content: space-between !important;
		align-items: center !important; flex-wrap: nowrap; gap: 8px;
	}
	.mm-summary-row--total { font-size: 15px !important; }

	/* Navegación paso 3 en flujo normal */
	.mm-step-panel--active > .mm-step-nav {
		position: static !important; box-shadow: none !important;
		border-top: 1px solid var(--pp-gray-border) !important;
		padding: 10px 0 !important; margin-top: 8px !important; flex-direction: row !important;
	}
	.mm-step-panel--active > .mm-step-nav .mm-btn-next { display: none !important; }

	/* Paso 4: footer fijo en móvil */
	.mm-step-panel--active .mm-step4-footer {
		position: fixed !important; bottom: 0; left: 0; right: 0;
		z-index: 99999;
		background: var(--pp-white);
		border-top: 1px solid var(--pp-gray-border);
		box-shadow: 0 -4px 20px rgba(0,0,0,.10);
		padding: 10px 16px !important;
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
		margin: 0;
	}
	.mm-step-panel--active .mm-step4-footer .mm-step-nav {
		position: static !important; box-shadow: none; border-top: none; padding: 0 !important; margin-top: 8px;
	}
	.mm-step-panel--active .mm-step4-footer #mm-step4-submit { flex: 1; justify-content: center; }
	.mm-step-panel--active[data-step-content="4"] { padding-bottom: 110px !important; }
}


/* ==========================================================================
   30. Responsive ≤ 640px
   ========================================================================== */
@media (max-width: 640px) {
	.mm-checkout-wrapper { padding-left: 0; padding-right: 0; }
	.mm-progress-bar     { padding: 14px 12px 18px; margin-bottom: 16px; }
	.mm-step             { min-width: 52px; }
	.mm-step__circle     { width: 32px; height: 32px; font-size: 13px; }
	.mm-step__label      { display: none; }
	.mm-step__connector  { max-width: 30px; margin-bottom: 20px; }
	.mm-step-panel       { padding: 18px 14px; }
	.mm-step-title       { font-size: 16px; }

	.pp-customer-type    { flex-direction: column; gap: 8px; }
	.pp-fields-row--postcode { flex-direction: row; }
	.pp-salutation-options   { gap: 14px; }

	/* Straße + Hausnummer en columna (cada uno ocupa el 100%) */
	.pp-fields-row--street {
		flex-direction: column !important;
		gap: 0 !important;
	}
	.pp-fields-row--street .pp-field-wrap--street,
	.pp-fields-row--street .pp-field-wrap--housenumber {
		width: 100% !important;
		flex: none !important;
	}
}


/* ==========================================================================
   31. Responsive ≤ 480px — popup en sheet inferior
   ========================================================================== */
@media (max-width: 480px) {
	.mm-pay-popup {
		top: auto; right: 0; bottom: 0; left: 0;
		width: 100%; max-width: 100%;
		border-radius: 20px 20px 0 0;
		max-height: 85vh;
		transform: translateY(100%);
	}
	.mm-pay-popup--active { transform: translateY(0); }
	.mm-pay-popup__footer { flex-direction: column; gap: 8px; }
	.mm-pay-popup__footer .mm-btn-secondary,
	.mm-pay-popup__footer .mm-btn-primary { width: 100%; justify-content: center; }
}