{"id":7,"date":"2024-08-18T13:58:10","date_gmt":"2024-08-18T13:58:10","guid":{"rendered":"https:\/\/kamlife.me\/?page_id=7"},"modified":"2026-04-09T15:41:32","modified_gmt":"2026-04-09T15:41:32","slug":"checkout","status":"publish","type":"page","link":"https:\/\/kamlife.me\/en\/checkout\/","title":{"rendered":"Checkout"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7\" class=\"elementor elementor-7\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d188801 e-flex e-con-boxed e-con e-parent\" data-id=\"d188801\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e998c39 elementor-widget elementor-widget-heading\" data-id=\"e998c39\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Checkout<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1c79ca6 e-flex e-con-boxed e-con e-parent\" data-id=\"1c79ca6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8f5348d elementor-widget elementor-widget-html\" data-id=\"8f5348d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* ===== Columna derecha \/ uni\u00f3n de contenedores ===== *\/\n.single-col-2{ position:sticky; top:16px; z-index:2; }\n.uael-woo-checkout .column-layout-container .single-col-2{ border-left:none !important; }\n.single-col-2 .pl-card-top,\n.single-col-2 .uael-checkout-review-order-table,\n.single-col-2 .uael-woo-checkout-order-review,\n.single-col-2 .uael-woo-checkout-payment{ background:#F4F5FC !important; border:none !important; box-shadow:none !important; }\n.single-col-2 .pl-card-top{ border-radius:24px 24px 0 0; padding:24px 20px 10px; margin:0; }\n.single-col-2 .uael-checkout-review-order-table{ margin-bottom:-10px !important; padding:0 !important; }\n.single-col-2 .uael-woo-checkout-order-review{ padding:0 20px 0 !important; margin:0 !important; border-radius:0 !important; }\n.single-col-2 .uael-woo-checkout-payment{ margin:0 !important; padding:8px 20px 20px !important; border-top:0 !important; border-radius:0 0 24px 24px !important; }\n.single-col-2 .wfob_bump_wrapper{ margin:0 !important; padding:0 !important; }\n.single-col-2 .wfob_bump_wrapper:empty{ display:none !important; }\n\n\/* ===== Header: Total + Secure ===== *\/\n.single-col-2 .pl-totalwrap{ text-align:center; }\n.single-col-2 .pl-total-title{ font:400 16px\/1 system-ui,-apple-system,Segoe UI,Roboto,Arial; color:#6E6F79; margin:0 0 8px; }\n.single-col-2 .pl-total-amount{ display:inline-block; font-weight:600; line-height:1; font-size:52px; color:#6C6AE0; }\n.single-col-2 .pl-dec{ color:#ABA8D9; }\n.single-col-2 .pl-secure{ display:flex; justify-content:center; align-items:center; gap:8px; color:#4F8F46; font-size:15px; margin:10px 0 6px; }\n.single-col-2 .pl-secure:before{ content:\"\"; width:16px; height:16px; background:url('http:\/\/peptilife.me\/wp-content\/uploads\/2025\/09\/lock-simple-1.svg') center\/contain no-repeat; }\n\n\/* ===== Order summary ===== *\/\n.single-col-2 .uael-checkout-section-order-title{ display:none !important; }\n.single-col-2 .uael-order-review-table{ margin:0; padding:0; list-style:none; }\n.single-col-2 .uael-order-review-table .table-row{ display:flex; gap:12px; padding:6px 0; border-bottom:1px solid #EAEBF6; }\n.single-col-2 .product-thum-name{ display:flex; align-items:center; gap:12px; flex:1; }\n.single-col-2 .product-thumbnail img{ width:44px; height:44px; border-radius:10px; object-fit:cover; }\n.single-col-2 .footer-content > div{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; }\n.elementor-8 .elementor-element.elementor-element-e6ebfa9 .uael-woo-checkout .uael-woo-checkout-order-review .uael-order-review-table-footer,\n.elementor-8 .elementor-element.elementor-element-e6ebfa9 .uael-woo-checkout .uael-woo-checkout-order-review .uael-order-review-table-footer .footer-content .order-total{ border-top:0 !important; }\n.single-col-2 .uael-order-review-table-footer,\n.single-col-2 .uael-order-review-table-footer .order-total{ border-top:0 !important; }\n\n\/* ===== Shipping pills: mismo ancho + pegadas a la derecha (desktop y m\u00f3vil) ===== *\/\n:root{ --ship-pill-max: 560px; } \/* ajusta si deseas *\/\n.single-col-2 .footer-content .shipping-area{ display:block; }\n.single-col-2 .shipping-area > .woocommerce-shipping-methods{\n  margin:12px 0 0; padding:0; list-style:none;\n  display:flex; flex-direction:column; gap:14px; \/* separaci\u00f3n entre pills *\/\n  align-items:flex-end; width:100%; margin-left:auto;\n}\n.single-col-2 .woocommerce-shipping-methods li{\n  width:min(100%, var(--ship-pill-max));\n  align-self:flex-end; margin-left:auto; margin-right:0 !important; \/* pegadas a la derecha *\/\n}\n.single-col-2 .woocommerce-shipping-methods input[type=\"radio\"]{\n  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden;\n}\n.single-col-2 .woocommerce-shipping-methods label{\n  width:100%; box-sizing:border-box; display:flex; align-items:center; gap:12px;\n  border:1px solid #E6E7EE; border-radius:999px; background:#FFFFFFCC;\n  padding:10px 14px; cursor:pointer; box-shadow:0 1px 0 #ECECF7 inset;\n  transition:border-color .2s, box-shadow .2s, background .2s;\n  font-size:13.5px; line-height:1.25; color:#1B1C1E; text-align:left;\n}\n.single-col-2 .woocommerce-shipping-methods label::before{\n  content:\"\"; flex:0 0 18px; height:18px; border-radius:999px;\n  border:1px solid #C9CAE5; background:#FFF; box-shadow: inset 0 0 0 6px #FFF; transition:all .2s;\n}\n.single-col-2 .woocommerce-shipping-methods input[type=\"radio\"]:checked + label{ border-color:#D9D9F7; background:#F6F5FF; box-shadow:0 0 0 4px rgba(124,122,230,.18); }\n.single-col-2 .woocommerce-shipping-methods input[type=\"radio\"]:checked + label::before{ border-color:#7C7AE6; box-shadow: inset 0 0 0 5px #7C7AE6; }\n.single-col-2 .woocommerce-shipping-methods input[type=\"radio\"]:focus-visible + label{ outline:0; box-shadow:0 0 0 4px rgba(124,122,230,.26); }\n.single-col-2 .woocommerce-shipping-methods label .amount{ margin-left:auto; font-weight:600; }\n@media (max-width:560px){ .single-col-2 .woocommerce-shipping-methods li{ width:100%; } }\n\n\/* ===== Select2 Country: padding-left 40px, banderas, dropdown redondeado\/sin borde\/sombra, flecha animada ===== *\/\n.checkout .select2-container{ width:100% !important; }\n\n\/* Selecci\u00f3n (cerrado) *\/\n.checkout .select2-container--default .select2-selection--single{\n  position:relative; height:48px; display:flex; align-items:center;\n  border:1px solid #E6E7EE; border-radius:14px; background:#fff;\n  box-shadow:0 1px 0 #ECECF7 inset; transition:border-color .25s, box-shadow .25s, background .25s;\n  padding-left:40px !important; \/* <<< como pediste *\/\n}\n.checkout .select2-container--default .select2-selection--single:hover{ border-color:#D9D9F7; }\n.checkout .select2-container--default.select2-container--open .select2-selection--single{ border-color:#D9D9F7; box-shadow:0 0 0 4px rgba(124,122,230,.18); }\n.checkout .select2-container--default .select2-selection--single .select2-selection__rendered{\n  line-height:46px; padding-left:0; color:#1B1C1E; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;\n}\n.checkout .select2-container--default .select2-selection--single .select2-selection__arrow{\n  height:48px; right:12px; transition:transform .25s ease;\n}\n.checkout .select2-container--open .select2-selection__arrow{ transform:rotate(180deg); }\n\n\/* Bandera en el seleccionado (20\u00d714, separada del texto) *\/\n.checkout .select2-container--default .select2-selection--single.has-flag::before{\n  content:\"\"; position:absolute; left:12px; top:50%; transform:translateY(-50%);\n  width:20px; height:14px; border-radius:3px;\n  background:var(--flag-url) center\/cover no-repeat; box-shadow:0 0 0 1px #E6E7EE;\n}\n\n\/* Dropdown *\/\n.select2-container{ z-index:10; }\n.select2-container--open{ z-index:9999; }\n.select2-dropdown{\n  border:0 !important; border-radius:16px !important; overflow:hidden;\n  box-shadow:0 16px 32px rgba(27,28,30,.08), 0 3px 8px rgba(27,28,30,.05);\n  background:#fff; width:auto !important; max-width:calc(100vw - 24px);\n}\n.select2-search--dropdown{ padding:12px; }\n.select2-search--dropdown .select2-search__field{\n  border:1px solid #E6E7EE; border-radius:12px; padding:10px 12px; outline:0;\n}\n.select2-results__options{ padding:8px 0; }\n.select2-results__option{\n  padding:12px 12px 12px 40px; \/* <<< misma separaci\u00f3n que el seleccionado *\/\n  position:relative;\n}\n.select2-results__option--highlighted{ background:#F6F5FF !important; color:#1B1C1E !important; }\n.select2-results__option[aria-selected=\"true\"]{ background:#EEF0FF !important; }\n\/* Banderas en las opciones (20\u00d714) *\/\n.select2-results__option.flagged::before{\n  content:\"\"; position:absolute; left:12px; top:50%; transform:translateY(-50%);\n  width:20px; height:14px; border-radius:3px;\n  background:var(--flag-url) center\/cover no-repeat; box-shadow:0 0 0 1px #E6E7EE;\n}\n\n\/* ===== PBL ===== *\/\n.single-col-2 .uael-checkout-section-payment-title,\n.single-col-2 #wc-pbl-primary .wc-pbl-title{ display:none !important; }\n.single-col-2 #wc-pbl-primary .pl-pbl-heading{ display:block; margin:8px 0 10px; font-size:18px; font-weight:500; color:#1B1C1E; }\n.single-col-2 #wc-pbl-primary .wc-pbl-group{ display:flex; gap:14px; flex-wrap:wrap; }\n.single-col-2 #wc-pbl-primary .wc-pbl-choice{\n  display:flex; align-items:center; gap:10px; padding:12px 16px;\n  border:1px solid #E6E7EE; border-radius:14px; background:#fff; cursor:pointer;\n  flex:1 1 0; min-width:calc(50% - 7px); transition:box-shadow .2s, border-color .2s, background .2s;\n}\n.single-col-2 #wc-pbl-primary .wc-pbl-choice input{ display:none; }\n.single-col-2 #wc-pbl-primary .wc-pbl-choice.is-selected{ border-color:#D9D9F7; background:#F6F5FF; box-shadow:0 0 0 4px rgba(124,122,230,.18); }\n.single-col-2 #wc-pbl-primary .wc-pbl-choice .wc-pbl-text{ line-height:1.2; }\n.single-col-2 #wc-pbl-primary .wc-pbl-choice .wc-pbl-icon{ width:22px; height:22px; display:block; }\n\n\/* ===== Legal + CTA ===== *\/\n.single-col-2 .woocommerce-privacy-policy-text{ color:#6E6F79; font-size:13.5px; line-height:1.5; margin-top:8px; }\n.single-col-2 .woocommerce-privacy-policy-text a{ text-decoration:underline; }\n.single-col-2 #place_order.button{\n  width:100%; margin-top:16px !important; background:#3F39A0 !important; border-radius:16px !important;\n  padding:16px 18px !important; color:#fff !important; font-weight:500 !important; font-size:18px !important;\n  border:none !important; box-shadow:0 6px 16px rgba(63,57,160,.24) !important;\n}\n\n\/* ===== Responsive ===== *\/\n@media (max-width:540px){\n  .single-col-2 .pl-total-amount{ font-size:42px; }\n  .single-col-2 #wc-pbl-primary .wc-pbl-choice{ min-width:100%; }\n}\n<\/style>\n\n<script>\n(function(){\n  function ready(fn){ if(document.readyState!=='loading'){fn()} else {document.addEventListener('DOMContentLoaded',fn)} }\n\n  \/* Header fijo *\/\n  function ensureTopCard(){\n    const col=document.querySelector('.single-col-2');\n    const review=col&&col.querySelector('.uael-checkout-review-order-table');\n    if(!col||!review) return;\n    if(!col.querySelector('.pl-card-top')){\n      const top=document.createElement('div');\n      top.className='pl-card-top';\n      top.innerHTML=`\n        <div class=\"pl-totalwrap\">\n          <div class=\"pl-total-title\">Total amount<\/div>\n          <div class=\"pl-total-amount\"><span class=\"pl-amount-text\">\u2013<\/span><\/div>\n          <div class=\"pl-secure\">Secure Payment<\/div>\n        <\/div>`;\n      col.insertBefore(top,review);\n    }\n  }\n\n  \/* Total din\u00e1mico con decimales de color *\/\n  let lastTxt='';\n  function paintHeaderTotal(){\n    const src=document.querySelector('.single-col-2 .order-total .woocommerce-Price-amount, .single-col-2 .order-total .amount');\n    const out=document.querySelector('.single-col-2 .pl-amount-text');\n    if(!src||!out) return;\n    const txt=src.textContent.trim(); if(txt===lastTxt) return; lastTxt=txt;\n    const m=txt.match(\/(^.*?)(\\d{1,3}(?:[.,]\\d{3})*|\\d+)([.,](\\d{1,2}))?(.*$)\/);\n    out.innerHTML=m?(m[1]||'')+(m[2]||'')+(m[3]?`<span class=\"pl-dec\">${m[3]}<\/span>`:'')+(m[5]||''):txt;\n  }\n\n  \/* PBL: t\u00edtulo y selecci\u00f3n visual *\/\n  function enhancePBL(){\n    const p=document.getElementById('wc-pbl-primary'); if(!p) return;\n    if(!p.querySelector('.pl-pbl-heading')){\n      const h=document.createElement('div'); h.className='pl-pbl-heading'; h.textContent='Select your payment method';\n      p.insertBefore(h,p.firstChild);\n    }\n    const g=p.querySelector('.wc-pbl-group');\n    if(g&&!g.dataset.bound){\n      g.dataset.bound='1';\n      const sync=()=>g.querySelectorAll('.wc-pbl-choice').forEach(c=>{\n        const r=c.querySelector('input[name=\"wc_pbl_method\"]'); c.classList.toggle('is-selected',!!(r&&r.checked));\n      });\n      g.addEventListener('change',sync); sync();\n    }\n  }\n\n  \/* Logo PayPal nuevo *\/\n  function swapPaypalLogo(){\n    document.querySelectorAll('#wc-pbl-primary img.wc-pbl-icon').forEach(img=>{\n      if(\/\\\/paypal\\.svg(\\?|$)\/.test(img.src)){ img.src='http:\/\/peptilife.me\/wp-content\/uploads\/2025\/09\/paypal-1.svg'; }\n    });\n  }\n\n  \/* Select2 banderas + ancho del dropdown = selector *\/\n  function flagURL(code){ return 'https:\/\/flagcdn.com\/'+String(code||'').toLowerCase()+'.svg'; }\n  function decorateDropdownFlags(){\n    const res=document.getElementById('select2-billing_country-results'); if(!res) return;\n    res.querySelectorAll('.select2-results__option').forEach(li=>{\n      const id=li.id||''; const cc=(id.split('-').pop()||'').toUpperCase();\n      if(\/^[A-Z]{2}$\/.test(cc)){ li.classList.add('flagged'); li.style.setProperty('--flag-url','url('+flagURL(cc)+')'); }\n    });\n  }\n  function paintSelectedFlag(){\n    if(!window.jQuery) return;\n    const sel=jQuery('#billing_country'); if(!sel.length) return;\n    const cc=(sel.val()||'').toUpperCase();\n    const box=sel.next('.select2').find('.select2-selection--single');\n    if(!box.length) return;\n    box.addClass('has-flag')[0].style.setProperty('--flag-url','url('+flagURL(cc)+')');\n    \/\/ fuerza padding-left 40px por si alg\u00fan estilo lo sobreescribe\n    box[0].style.paddingLeft='40px';\n  }\n  function sizeDropdownToSelection(){\n    if(!window.jQuery) return;\n    const $sel=jQuery('#billing_country').next('.select2');\n    const $dd=jQuery('.select2-dropdown');\n    if(!$sel.length||!$dd.length) return;\n    const w=Math.ceil($sel.outerWidth());\n    $dd.css({ width:w+'px', maxWidth:w+'px' });\n  }\n  function bindSelect2Country(){\n    if(!window.jQuery||!jQuery.fn.select2) return;\n    const $=jQuery, $country=$('#billing_country'); if(!$country.length) return;\n    $country.on('select2:open', ()=>setTimeout(()=>{ decorateDropdownFlags(); paintSelectedFlag(); sizeDropdownToSelection(); },0));\n    $country.on('change select2:select', ()=>setTimeout(paintSelectedFlag,0));\n    setTimeout(paintSelectedFlag,0);\n  }\n\n  function run(){ ensureTopCard(); enhancePBL(); paintHeaderTotal(); swapPaypalLogo(); bindSelect2Country(); }\n  ready(run);\n\n  if(window.jQuery){\n    jQuery(function($){\n      $(document.body).on('updated_checkout wc_fragments_refreshed wc_fragments_loaded updated_shipping_method', ()=>{\n        setTimeout(()=>{ paintHeaderTotal(); swapPaypalLogo(); paintSelectedFlag(); sizeDropdownToSelection(); },0);\n      });\n    });\n  }else{\n    ['updated_checkout','wc_fragments_refreshed','wc_fragments_loaded','updated_shipping_method']\n      .forEach(evt=>document.addEventListener(evt,()=>setTimeout(()=>{ paintHeaderTotal(); },0)));\n  }\n\n  if(!window.__plTotalsInterval){ window.__plTotalsInterval=setInterval(paintHeaderTotal,300); }\n})();\n<\/script>\n<style>\n\/* === Alinear PILLS de env\u00edo a la derecha (desktop y m\u00f3vil) === *\/\n:root{ --ship-pill-max: 560px; } \/* ajusta si quieres un ancho m\u00e1ximo menor *\/\n\n.single-col-2 .uael-order-review-table-footer .shipping-area > ul.woocommerce-shipping-methods{\n  display:grid !important;\n  justify-items:end !important;   \/* <- pegadas a la derecha *\/\n  align-items:start !important;\n  gap:14px !important;             \/* separaci\u00f3n entre pills *\/\n  margin:12px 0 0 !important;\n  padding:0 !important;\n  list-style:none !important;\n  width:100% !important;\n}\n\n.single-col-2 .uael-order-review-table-footer .woocommerce-shipping-methods > li{\n  width:min(100%, var(--ship-pill-max)) !important;\n  margin:0 0 0 auto !important;    \/* <- empuja cada pill a la derecha *\/\n  display:block !important;\n}\n\n.single-col-2 .uael-order-review-table-footer .woocommerce-shipping-methods > li > label{\n  width:100% !important;\n  display:flex !important;\n  align-items:center !important;\n}\n\n\/* En m\u00f3vil pueden ocupar 100%, siguen \u201calineadas\u201d al borde derecho *\/\n@media (max-width:560px){\n  .single-col-2 .uael-order-review-table-footer .woocommerce-shipping-methods > li{\n    width:100% !important;\n  }\n}\n<\/style>\n\n<script>\n\/* Refuerzo por si alg\u00fan script del tema reescribe estilos al refrescar el checkout *\/\n(function(){\n  function alignShipPillsRight(){\n    var ul = document.querySelector('.single-col-2 .uael-order-review-table-footer .shipping-area > ul.woocommerce-shipping-methods');\n    if(!ul) return;\n    ul.style.display = 'grid';\n    ul.style.justifyItems = 'end';\n    ul.style.gap = '14px';\n  }\n  if(document.readyState !== 'loading'){ alignShipPillsRight(); }\n  else{ document.addEventListener('DOMContentLoaded', alignShipPillsRight); }\n\n  if(window.jQuery){\n    jQuery(function($){\n      $(document.body).on('updated_checkout updated_shipping_method wc_fragments_refreshed wc_fragments_loaded', function(){\n        setTimeout(alignShipPillsRight, 0);\n      });\n    });\n  }else{\n    ['updated_checkout','updated_shipping_method','wc_fragments_refreshed','wc_fragments_loaded']\n      .forEach(ev => document.addEventListener(ev, ()=>setTimeout(alignShipPillsRight,0)));\n  }\n})();\n<\/script>\n<style>\n\/* === Select2 dropdown: full-width, rounded, soft shadow, open \u2193 === *\/\n.checkout .select2-container--default .select2-selection--single{\n  border-radius:26px !important;        \/* radio grande del input *\/\n  padding-left:40px !important;         \/* respeta espacio de bandera *\/\n}\n\n\/* anima flecha al abrir *\/\n.checkout .select2-container--default .select2-selection--single .select2-selection__arrow{\n  transition:transform .22s ease;\n}\n.checkout .select2-container--open .select2-selection__arrow{ transform:rotate(180deg); }\n\n\/* \u201ccaja\u201d del dropdown *\/\n.select2-container--open .select2-dropdown{\n  border:0 !important;\n  border-radius:26px !important;        \/* mismo radio que el input *\/\n  overflow:hidden !important;\n  margin-top:8px !important;            \/* se siente que crece hacia abajo *\/\n  box-shadow:0 28px 70px rgba(0,0,0,.12), 0 8px 22px rgba(0,0,0,.08) !important;\n  background:#fff !important;\n  animation:s2Grow .18s cubic-bezier(.2,.85,.25,1);\n}\n@keyframes s2Grow{ from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);} }\n\n\/* cuadro de b\u00fasqueda y opciones dentro del dropdown *\/\n.select2-search--dropdown{ padding:12px !important; }\n.select2-search--dropdown .select2-search__field{\n  border:1px solid #E6E7EE !important; border-radius:12px !important; padding:10px 12px !important;\n}\n.select2-results__options{ padding:8px 0 !important; }\n.select2-results__option{ padding:12px 12px 12px 40px !important; } \/* alinea con el input *\/\n.select2-results__option--highlighted{ background:#F6F5FF !important; color:#1B1C1E !important; }\n.select2-results__option[aria-selected=\"true\"]{ background:#EEF0FF !important; }\n<\/style>\n<style>\n\/* Input: mantiene el padding para bandera *\/\n.checkout .select2-container--default .select2-selection--single{\n  border-radius:26px !important;\n  padding-left:40px !important; \/* bandera sin superposici\u00f3n *\/\n}\n\n\/* Flecha animada al abrir\/cerrar *\/\n.checkout .select2-container--default .select2-selection--single .select2-selection__arrow{\n  transition:transform .22s ease;\n}\n.checkout .select2-container--open .select2-selection__arrow{ transform:rotate(180deg); }\n\n\/* Dropdown: mismo ancho que el campo, pegado (sin gap) y con acabado suave *\/\n.select2-container--open .select2-dropdown{\n  border:0 !important;\n  border-radius:26px !important;\n  overflow:hidden !important;\n  margin-top:0 !important;                 \/* sin separaci\u00f3n *\/\n  box-shadow:0 28px 70px rgba(0,0,0,.12),\n             0  8px 22px rgba(0,0,0,.08) !important;\n  background:#fff !important;\n  \/* el posicionamiento final lo forzamos por JS a position:fixed *\/\n}\n\n\/* Interior del dropdown coherente con el input *\/\n.select2-search--dropdown{ padding:12px !important; }\n.select2-search--dropdown .select2-search__field{\n  border:1px solid #E6E7EE !important; border-radius:12px !important; padding:10px 12px !important;\n}\n.select2-results__options{ padding:8px 0 !important; }\n.select2-results__option{\n  padding:12px 12px 12px 40px !important; \/* alinea con el input: respeta 40px *\/\n}\n.select2-results__option--highlighted{ background:#F6F5FF !important; color:#1B1C1E !important; }\n.select2-results__option[aria-selected=\"true\"]{ background:#EEF0FF !important; }\n<\/style>\n<style>\n\/* ===== SELECT2 \u2013 ancho 100% del campo ===== *\/\n.checkout .select2-container{ width:100% !important; }\n\n\/* aspecto del input (ya lo tienes), solo a\u00f1ado estados cuando est\u00e1 abierto *\/\n.checkout .select2-container--default .select2-selection--single{\n  border-radius:26px !important;\n  padding-left:40px !important; \/* bandera sin superposici\u00f3n *\/\n}\n\n\/* al abrir: que parezca una sola pieza *\/\n.checkout .select2-container.s2-fit .select2-selection--single{\n  border-bottom-left-radius:0 !important;\n  border-bottom-right-radius:0 !important;\n}\n\n\/* el dropdown vive DENTRO del .select2 del campo y ocupa 100% *\/\n.select2-container.s2-fit{ position:relative !important; overflow:visible !important; }\n.select2-container.s2-fit .select2-dropdown{\n  position:absolute !important;\n  left:0 !important; right:0 !important;\n  top:calc(100% - 1px) !important;   \/* -1px para que no se note la junta *\/\n  width:100% !important; max-width:100% !important;\n  margin:0 !important;\n  border:0 !important;\n  border-top-left-radius:0 !important;  \/* continuidad con el input *\/\n  border-top-right-radius:0 !important;\n  border-bottom-left-radius:26px !important;\n  border-bottom-right-radius:26px !important;\n  overflow:hidden !important;\n  background:#fff !important;\n  box-shadow:0 28px 70px rgba(0,0,0,.12), 0 8px 22px rgba(0,0,0,.08) !important;\n  box-sizing:border-box !important;\n}\n\n\/* interiores coherentes y alineados al padding de 40px *\/\n.select2-search--dropdown{ padding:12px !important; }\n.select2-search--dropdown .select2-search__field{\n  border:1px solid #E6E7EE !important; border-radius:12px !important; padding:10px 12px !important;\n}\n.select2-results__options{ padding:8px 0 !important; }\n.select2-results__option{\n  padding:12px 12px 12px 40px !important; \/* alinea con el input *\/\n}\n.select2-results__option--highlighted{ background:#F6F5FF !important; color:#1B1C1E !important; }\n.select2-results__option[aria-selected=\"true\"]{ background:#EEF0FF !important; }\n\n\/* flecha animada (se mantiene) *\/\n.checkout .select2-container--default .select2-selection--single .select2-selection__arrow{\n  transition:transform .22s ease;\n}\n.checkout .select2-container--open .select2-selection__arrow{ transform:rotate(180deg); }\n<\/style>\n\n<style>\n\/* === SELECT2: ajustes finales de borde y sin sombras === *\/\n\n\/* Bot\u00f3n cerrado: borde sutil *\/\n.checkout .select2-container--default .select2-selection--single{\n  border:1px solid #9C9C9C !important;\n  box-shadow:none !important;\n}\n\n\/* Bot\u00f3n abierto: sin glow, sin borde inferior para unificar con el dropdown *\/\n.checkout .select2-container--default.select2-container--open .select2-selection--single{\n  border-color:#9C9C9C !important;\n  border-bottom-color:transparent !important;\n  box-shadow:none !important;\n}\n\n\/* Dropdown pegado al campo: mismo borde sutil, sin sombra, sin borde superior *\/\n.select2-container.s2-fit .select2-dropdown{\n  box-shadow:none !important;\n  border:1px solid #9C9C9C !important;\n  border-top:0 !important;                        \/* uni\u00f3n perfecta *\/\n  border-bottom-left-radius:26px !important;\n  border-bottom-right-radius:26px !important;\n  border-top-left-radius:0 !important;\n  border-top-right-radius:0 !important;\n}\n\n\/* (Opcional) Campo de b\u00fasqueda interno con el mismo criterio visual *\/\n.select2-search--dropdown .select2-search__field{\n  box-shadow:none !important;\n  border:1px solid #9C9C9C !important;\n}\n<\/style>\n<style>\n\/* ===== SELECT2 \u2013 ancho 100% del campo ===== *\/\n.checkout .select2-container{ width:100% !important; }\n\n\/* aspecto del input (ya lo tienes), solo a\u00f1ado estados cuando est\u00e1 abierto *\/\n.checkout .select2-container--default .select2-selection--single{\n  border-radius:26px !important;\n  padding-left:40px !important; \/* bandera sin superposici\u00f3n *\/\n}\n\n\/* al abrir: que parezca una sola pieza *\/\n.checkout .select2-container.s2-fit .select2-selection--single{\n  border-bottom-left-radius:0 !important;\n  border-bottom-right-radius:0 !important;\n}\n\n\/* el dropdown vive DENTRO del .select2 del campo y ocupa 100% *\/\n.select2-container.s2-fit{ position:relative !important; overflow:visible !important; }\n.select2-container.s2-fit .select2-dropdown{\n  position:absolute !important;\n  left:0 !important; right:0 !important;\n  top:calc(100% - 1px) !important;   \/* -1px para que no se note la junta *\/\n  width:100% !important; max-width:100% !important;\n  margin:0 !important;\n  border:0 !important;\n  border-top-left-radius:0 !important;  \/* continuidad con el input *\/\n  border-top-right-radius:0 !important;\n  border-bottom-left-radius:26px !important;\n  border-bottom-right-radius:26px !important;\n  overflow:hidden !important;\n  background:#fff !important;\n  box-shadow:0 28px 70px rgba(0,0,0,.12), 0 8px 22px rgba(0,0,0,.08) !important;\n  box-sizing:border-box !important;\n}\n\n\/* interiores coherentes y alineados al padding de 40px *\/\n.select2-search--dropdown{ padding:12px !important; }\n.select2-search--dropdown .select2-search__field{\n  border:1px solid #E6E7EE !important; border-radius:12px !important; padding:10px 12px !important;\n}\n.select2-results__options{ padding:8px 0 !important; }\n.select2-results__option{\n  padding:12px 12px 12px 40px !important; \/* alinea con el input *\/\n}\n.select2-results__option--highlighted{ background:#F6F5FF !important; color:#1B1C1E !important; }\n.select2-results__option[aria-selected=\"true\"]{ background:#EEF0FF !important; }\n\n\/* flecha animada (se mantiene) *\/\n.checkout .select2-container--default .select2-selection--single .select2-selection__arrow{\n  transition:transform .22s ease;\n}\n.checkout .select2-container--open .select2-selection__arrow{ transform:rotate(180deg); }\n<\/style>\n\n<script>\n\/* ===== Dropdown \u201cpegado\u201d y full-width =====\n   - Mueve el dropdown dentro del contenedor visual del select abierto\n   - Lo hace ocupar 100% y pegarse al borde inferior\n*\/\n(function(){\n  function onOpen(evt){\n    if(!window.jQuery) return;\n    var $ = jQuery;\n    var $field = $(evt.target);            \/\/ <select> que se abri\u00f3\n    var $wrap  = $field.next('.select2');  \/\/ contenedor visual de ese select\n    var $dd    = $('.select2-container--open .select2-dropdown'); \/\/ dropdown activo\n    if(!$wrap.length || !$dd.length) return;\n\n    \/\/ marca contenedor y mete el dropdown dentro\n    $wrap.addClass('s2-fit');\n    $wrap.append($dd);\n\n    \/\/ asegura 100% de ancho (override a estilos inline de Select2)\n    requestAnimationFrame(function(){\n      $dd.css({ width:'100%', maxWidth:'100%' });\n    });\n  }\n\n  function onClose(evt){\n    if(!window.jQuery) return;\n    var $ = jQuery;\n    $(evt.target).next('.select2').removeClass('s2-fit');\n  }\n\n  function bind(){\n    if(!window.jQuery || !jQuery.fn.select2) return;\n    var $ = jQuery;\n\n    \/\/ aplica a TODOS los Select2 del checkout (pa\u00eds \/ estado \/ ciudad)\n    $(document).off('select2:open.s2fit').on('select2:open.s2fit', 'select', onOpen);\n    $(document).off('select2:close.s2fit').on('select2:close.s2fit', 'select', onClose);\n\n    \/\/ si Woo refresca el checkout, re-enlaza\n    $(document.body).off('.s2reb').on('updated_checkout.s2reb wc_fragments_refreshed.s2reb wc_fragments_loaded.s2reb', function(){\n      setTimeout(bind, 0);\n    });\n  }\n\n  if(document.readyState === 'loading') document.addEventListener('DOMContentLoaded', bind);\n  else bind();\n})();\n<\/script>\n<style>\n\/* Bot\u00f3n (cerrado): borde sutil, sin sombras *\/\n.checkout .select2-container--default .select2-selection--single{\n  border:1px solid #E7E7E7 !important;\n  box-shadow:none !important;\n}\n\n\/* Bot\u00f3n (abierto): sin glow y sin borde inferior para unificar con el dropdown *\/\n.checkout .select2-container--default.select2-container--open .select2-selection--single{\n  border-color:#E7E7E7 !important;\n  border-bottom-color:transparent !important;\n  box-shadow:none !important;\n}\n\n\/* Dropdown (abierto): sin sombra, con borde #E7E7E7 y sin borde superior *\/\n.select2-container.s2-fit .select2-dropdown,\n.select2-container--open .select2-dropdown{\n  box-shadow:none !important;\n  border:1px solid #E7E7E7 !important;\n  border-top:0 !important; \/* uni\u00f3n perfecta con el input *\/\n  border-bottom-left-radius:26px !important;\n  border-bottom-right-radius:26px !important;\n  border-top-left-radius:0 !important;\n  border-top-right-radius:0 !important;\n}\n\n\/* Buscador interno del dropdown con el mismo criterio *\/\n.select2-search--dropdown .select2-search__field{\n  border:1px solid #E7E7E7 !important;\n  box-shadow:none !important;\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Checkout Billing Details First name&nbsp;* Last name&nbsp;* Company name&nbsp;(optional) Country \/ Region&nbsp;*Select a country \/ region&hellip;Afghanistan\u00c5land IslandsAlbaniaAlgeriaAmerican SamoaAndorraAngolaAnguillaAntarcticaAntigua and BarbudaArgentinaArmeniaArubaAustraliaAustriaAzerbaijanBahamasBahrainBangladeshBarbadosBelarusBelauBelgiumBelizeBeninBermudaBhutanBoliviaBonaire, Saint Eustatius and SabaBosnia and HerzegovinaBotswanaBouvet IslandBrazilBritish Indian Ocean TerritoryBruneiBulgariaBurkina FasoBurundiCambodiaCameroonCanadaCape VerdeCayman IslandsCentral African RepublicChadChileChinaChristmas IslandCocos (Keeling) IslandsColombiaComorosCongo (Brazzaville)Congo (Kinshasa)Cook IslandsCosta RicaCroatiaCubaCura&ccedil;aoCyprusCzech RepublicDenmarkDjiboutiDominicaDominican RepublicEcuadorEgyptEl SalvadorEquatorial GuineaEritreaEstoniaEswatiniEthiopiaFalkland IslandsFaroe IslandsFijiFinlandFranceFrench GuianaFrench PolynesiaFrench Southern TerritoriesGabonGambiaGeorgiaGermanyGhanaGibraltarGreeceGreenlandGrenadaGuadeloupeGuamGuatemalaGuernseyGuineaGuinea-BissauGuyanaHaitiHeard Island and McDonald [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kamlife.me\/en\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kamlife.me\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kamlife.me\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kamlife.me\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kamlife.me\/en\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":177,"href":"https:\/\/kamlife.me\/en\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":8476,"href":"https:\/\/kamlife.me\/en\/wp-json\/wp\/v2\/pages\/7\/revisions\/8476"}],"wp:attachment":[{"href":"https:\/\/kamlife.me\/en\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}