:root{--mclp-primary:#25d366;--mclp-blue:#1769e0;--mclp-text:#1f2937;--mclp-muted:#667085;--mclp-border:#d8dee7;--mclp-bg:#fff}
.mclp-box{width:620px;max-width:calc(100vw - 40px);position:relative;left:50%;transform:translateX(-50%);margin:20px 0 0;padding:24px 26px 22px;background:var(--mclp-bg);border:1px solid #e2e6eb;border-radius:14px;box-shadow:0 6px 24px rgba(17,24,39,.07);box-sizing:border-box;color:var(--mclp-text)}
.mclp-divider{display:flex;align-items:center;gap:14px;margin:0 0 14px;color:#737b86;font-size:13px}.mclp-divider:before,.mclp-divider:after{content:"";height:1px;background:#dfe3e8;flex:1}
.mclp-heading{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center}.mclp-heading h2{margin:0;color:#172033;font-size:25px;line-height:1.2;font-weight:750}.mclp-whatsapp-icon{display:inline-flex;align-items:center;justify-content:center;width:29px;height:29px;border-radius:50%;background:var(--mclp-primary);color:#fff;font-size:17px;font-weight:800;box-shadow:0 2px 8px rgba(37,211,102,.25)}
.mclp-help{text-align:center;color:var(--mclp-muted);font-size:15px;line-height:1.45;margin:9px 0 18px}.mclp-form{display:grid;gap:10px}.mclp-form label{font-size:14px;font-weight:700;margin:0;color:#1e2530}.mclp-phone-row{display:flex;align-items:stretch;border:1px solid var(--mclp-border);border-radius:9px;overflow:hidden;background:#fff;transition:border-color .2s,box-shadow .2s}.mclp-phone-row:focus-within{border-color:var(--mclp-primary);box-shadow:0 0 0 3px rgba(37,211,102,.13)}.mclp-prefix{display:flex;align-items:center;padding:0 14px;background:#f7f8fa;border-right:1px solid #dfe3e8;font-size:14px;font-weight:700;white-space:nowrap}.mclp-phone-row input{flex:1 1 auto;width:100%!important;max-width:none!important;min-width:0;height:50px;padding:10px 12px;border:0!important;box-shadow:none!important;font-size:15px;box-sizing:border-box;background:#fff!important;text-overflow:clip!important}.mclp-phone-row input::placeholder{color:#707783;opacity:1}
.mclp-button{position:relative;width:100%;min-height:48px!important;padding:10px 16px!important;border-radius:9px!important;background:var(--mclp-primary)!important;border-color:var(--mclp-primary)!important;color:#fff!important;font-size:16px!important;font-weight:750!important;line-height:1.2!important;box-shadow:0 4px 12px rgba(37,211,102,.18)!important}.mclp-button:hover{filter:brightness(.94)}.mclp-button.is-loading .mclp-button-label{opacity:.25}.mclp-spinner{display:none;position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:mclp-spin .7s linear infinite}.mclp-button.is-loading .mclp-spinner{display:block}@keyframes mclp-spin{to{transform:rotate(360deg)}}
.mclp-notice{margin:0 0 10px;padding:10px 12px;border-radius:7px;font-size:13px;line-height:1.4}.mclp-error{background:#fff2f2;border:1px solid #e6a8a8;color:#8b1e1e}.mclp-success{background:#effbf3;border:1px solid #9dd8af;color:#176b32}.mclp-otp{display:flex;justify-content:center;gap:8px;margin:3px 0 6px}.mclp-otp-digit{width:46px!important;height:50px!important;min-height:50px!important;padding:0!important;text-align:center;font-size:24px!important;font-weight:750;border:1px solid #bcc2c8!important;border-radius:8px!important;box-sizing:border-box}.mclp-otp-digit:focus{border-color:var(--mclp-primary)!important;box-shadow:0 0 0 3px rgba(37,211,102,.14)!important;outline:none}.mclp-resend{text-align:center;margin-top:10px;font-size:13px}.mclp-resend a{color:#137a35;text-decoration:none}.mclp-resend a.is-disabled{color:#8c9298;pointer-events:none}.mclp-countdown{color:#8c9298}

.mclp-social-login{width:620px;max-width:calc(100vw - 40px);position:relative;left:50%;transform:translateX(-50%);margin:14px 0 0;display:grid;gap:10px}.mclp-social-login:empty{display:none}.mclp-social-row{width:100%;margin:0!important;padding:0!important}.mclp-social-row>a,.mclp-social-row>button{display:flex!important;align-items:center!important;justify-content:center!important;position:relative!important;width:100%!important;max-width:none!important;min-height:52px!important;margin:0!important;padding:10px 56px!important;border-radius:9px!important;box-sizing:border-box!important;text-align:center!important;font-size:17px!important;font-weight:700!important;line-height:1.2!important;text-decoration:none!important;overflow:hidden!important;box-shadow:none!important}.mclp-social-row>a>div,.mclp-social-row>button>div{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;margin:0!important;padding:0!important}.mclp-social-row svg,.mclp-social-row img{position:absolute!important;left:20px!important;top:50%!important;transform:translateY(-50%)!important;max-width:28px!important;max-height:28px!important}.mclp-social-facebook>a,.mclp-social-facebook>button{background:#1877f2!important;border:1px solid #1877f2!important;color:#fff!important}.mclp-social-facebook>a *,.mclp-social-facebook>button *{color:#fff!important}.mclp-social-facebook>a:hover,.mclp-social-facebook>button:hover{background:#166fe5!important;border-color:#166fe5!important;color:#fff!important}.mclp-social-google>a,.mclp-social-google>button{background:#fff!important;border:1px solid #d5dae2!important;color:#273142!important}.mclp-social-google>a *,.mclp-social-google>button *{color:#273142!important}.mclp-social-google>a:hover,.mclp-social-google>button:hover{background:#f8fafc!important;border-color:#c8ced8!important;color:#172033!important}
.mclp-classic-divider{display:none;width:min(100% - 24px,620px);margin:20px auto 16px;align-items:center;gap:14px;color:#68707c;font-size:13px;text-align:center}.mclp-classic-divider:before,.mclp-classic-divider:after{content:"";height:1px;background:#dfe3e8;flex:1}.mclp-classic-divider.is-visible{display:flex}
.mclp-secure-note{width:min(100% - 24px,620px);margin:16px auto 0;padding:14px 18px;border:1px solid #e2e6eb;border-radius:10px;background:#fbfcfd;color:#7b8490;text-align:center;font-size:14px;font-weight:600;box-sizing:border-box}.mclp-secure-note:before{content:"🔒";margin-right:8px}
body.woocommerce-account form.woocommerce-form-login,body.woocommerce-account form.login{max-width:620px!important;margin-left:auto!important;margin-right:auto!important}.mclp-login-input{padding-left:42px!important;background-repeat:no-repeat!important;background-position:14px center!important;background-size:18px!important}.mclp-login-user{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")!important}.mclp-login-password{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")!important}

@media(max-width:600px){.mclp-box{width:calc(100% - 20px);max-width:none;left:auto;transform:none;margin:10px auto 0;padding:18px 16px 16px;border-radius:12px}.mclp-heading h2{font-size:21px}.mclp-help{font-size:13px;margin:7px 0 14px}.mclp-prefix{padding:0 10px;font-size:13px}.mclp-phone-row input{height:46px;font-size:14px;padding-left:10px;padding-right:10px}.mclp-button{min-height:45px!important;font-size:15px!important}.mclp-social-login{width:calc(100% - 20px);max-width:none;left:auto;transform:none;margin:12px auto 0}.mclp-social-row>a,.mclp-social-row>button{min-height:48px!important;padding:9px 48px!important;font-size:15px!important}.mclp-social-row svg,.mclp-social-row img{left:16px!important;max-width:25px!important;max-height:25px!important}.mclp-classic-divider,.mclp-secure-note{width:calc(100% - 20px)}.mclp-otp{gap:5px}.mclp-otp-digit{width:38px!important;height:44px!important;min-height:44px!important;font-size:21px!important}}
@media(max-width:380px){.mclp-heading h2{font-size:19px}.mclp-prefix{font-size:12px;padding:0 8px}.mclp-otp-digit{width:34px!important}}


/* v0.5.5 visual polish */
.mclp-box{box-shadow:0 10px 32px rgba(17,24,39,.10)}
.mclp-social-row>a,.mclp-social-row>button{min-height:54px!important}
.mclp-social-google>a,.mclp-social-google>button{position:relative!important}
.mclp-social-google>a:before,.mclp-social-google>button:before{content:"G";position:absolute;left:20px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-family:Arial,sans-serif;font-size:23px;font-weight:700;line-height:1;color:#4285f4;background:#fff}
.mclp-social-google svg,.mclp-social-google img{display:none!important}
.mclp-classic-divider{margin-top:22px}
@media(min-width:901px){.mclp-box,.mclp-social-login{width:650px}.mclp-classic-divider,.mclp-secure-note{width:min(100% - 24px,650px)}body.woocommerce-account form.woocommerce-form-login,body.woocommerce-account form.login{max-width:650px!important}}
@media(max-width:600px){.mclp-social-google>a:before,.mclp-social-google>button:before{left:16px;width:25px;height:25px;font-size:21px}.mclp-social-row>a,.mclp-social-row>button{min-height:50px!important}}


/* v0.5.6 mobile navigation for My Account */
.mclp-mobile-nav{display:none}
@media(max-width:900px){
  body.woocommerce-account{padding-bottom:82px!important}
  .mclp-mobile-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:99990;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    min-height:68px;padding:5px max(6px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));
    background:rgba(255,255,255,.98);border-top:1px solid #e2e6eb;
    box-shadow:0 -8px 24px rgba(17,24,39,.10);backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);box-sizing:border-box
  }
  .mclp-mobile-nav__item{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;min-width:0;padding:5px 2px;border-radius:10px;color:#172033!important;
    font-size:11px;font-weight:700;line-height:1.1;text-decoration:none!important
  }
  .mclp-mobile-nav__item:hover{background:#f4f7fb;color:#172033!important}
  .mclp-mobile-nav__item.is-active{color:#1769e0!important;background:#eef4ff}
  .mclp-mobile-nav__item.is-active:before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:#1769e0}
  .mclp-mobile-nav__icon{display:flex;align-items:center;justify-content:center;width:25px;height:25px;font-size:22px;line-height:1;font-family:Arial,sans-serif}
}

/* v0.7.0 — recent method hint and inline phone validation */
.mclp-box,.mclp-social-row,body.woocommerce-account form.woocommerce-form-login,body.woocommerce-account form.login{position:relative}
.mclp-recent-badge{position:absolute;top:10px;right:12px;z-index:4;display:inline-flex;align-items:center;min-height:22px;padding:3px 8px;border-radius:999px;background:#eef8f1;color:#16733a;border:1px solid #c9ead4;font-size:10px;font-weight:700;line-height:1;white-space:nowrap;box-sizing:border-box}
.mclp-social-row .mclp-recent-badge{top:50%;right:12px;transform:translateY(-50%);background:rgba(255,255,255,.92);color:#24516f;border-color:rgba(255,255,255,.75)}
.mclp-social-google .mclp-recent-badge{background:#eef4ff;color:#2557a7;border-color:#d4e1fb}
body.woocommerce-account form.woocommerce-form-login>.mclp-recent-badge,body.woocommerce-account form.login>.mclp-recent-badge{top:-10px;right:8px}
.mclp-last-used{outline:2px solid rgba(37,211,102,.16);outline-offset:3px}
.mclp-field-help{margin:0;color:#6b7280;font-size:12px;line-height:1.35}
.mclp-field-help.is-error{color:#b42318;font-weight:600}
.mclp-phone-row:has(+ .mclp-field-help.is-error){border-color:#d92d20;box-shadow:0 0 0 3px rgba(217,45,32,.10)}
@media(max-width:600px){.mclp-recent-badge{top:7px;right:8px;font-size:9px;padding:3px 6px}.mclp-social-row .mclp-recent-badge{display:none}}

/* v0.8.0 — OTP resend, change-number action and valid phone state */
.mclp-resend{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:12px}
.mclp-resend-form{display:flex;align-items:center;justify-content:center;margin:0!important}
.mclp-resend-button{appearance:none;border:0;background:transparent;color:#137a35;font:inherit;font-weight:700;cursor:pointer;padding:3px 2px}
.mclp-resend-button.is-disabled,.mclp-resend-button:disabled{color:#8c9298;cursor:not-allowed}
.mclp-change-phone{color:#3f4b5a!important;font-size:12px;text-decoration:underline!important;text-underline-offset:2px}
.mclp-phone-row{position:relative}
.mclp-phone-row.is-valid{border-color:var(--mclp-primary)!important;box-shadow:0 0 0 3px rgba(37,211,102,.12)!important}
.mclp-phone-row.is-valid:after{content:"✓";position:absolute;right:13px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;background:var(--mclp-primary);color:#fff;font-size:13px;font-weight:800;pointer-events:none}
.mclp-phone-row.is-valid input{padding-right:44px!important}
.mclp-field-help.is-valid{color:#16733a;font-weight:650}
#mclp-code-help{margin-top:2px;text-align:center}
@media(max-width:600px){.mclp-resend{gap:6px}.mclp-phone-row.is-valid:after{right:10px;width:19px;height:19px;font-size:12px}}

/* v0.9.0 — estados de validación, carga y OTP */
.mclp-field-help{margin:7px 2px 0;color:#6f7784;font-size:13px;line-height:1.4;transition:color .2s ease}
.mclp-field-help.is-valid{color:#16803a;font-weight:650}
.mclp-button:disabled{cursor:not-allowed;opacity:.68}
.mclp-button.is-loading{opacity:1}
.mclp-box,.mclp-social-row,.woocommerce-form-login{transition:box-shadow .25s ease,border-color .25s ease,transform .25s ease}
.mclp-otp-digit{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.mclp-otp-digit:not(:placeholder-shown){transform:translateY(-1px)}
.mclp-resend-form{display:flex!important;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}
.mclp-resend-prefix,.mclp-countdown{color:#7d8490;font-size:13px}
.mclp-countdown{min-width:38px;font-variant-numeric:tabular-nums;font-weight:700}
.mclp-change-phone{display:inline-flex;align-items:center;justify-content:center;color:#2463d4!important;font-weight:650;text-decoration:none!important}
@media(max-width:600px){.mclp-resend-form{flex-direction:column;gap:3px}.mclp-field-help{font-size:12px}}

.mclp-real-email-row .mclp-field-note {
	display: block;
	margin-top: 8px;
	font-size: 0.92em;
	color: #667085;
}

/* v1.1.0 — WhatsApp verificado y sincronización del perfil */
.mclp-account-phone-card{
	display:flex;
	align-items:flex-start;
	gap:14px;
	margin:0 0 22px;
	padding:16px 18px;
	border:1px solid #b7e8c8;
	border-radius:12px;
	background:#f1fbf5;
	box-sizing:border-box;
}
.mclp-account-phone-icon{
	flex:0 0 34px;
	display:flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	border-radius:50%;
	background:var(--mclp-primary,#25d366);
	color:#fff;
	font-size:20px;
	font-weight:800;
	line-height:1;
	box-shadow:0 5px 14px rgba(37,211,102,.20);
}
.mclp-account-phone-content{display:flex;flex-direction:column;gap:3px;min-width:0}
.mclp-account-phone-content strong{color:#172033;font-size:16px;line-height:1.3}
.mclp-account-phone-number{color:#16733a;font-size:18px;font-weight:750;letter-spacing:.01em}
.mclp-account-phone-content small{color:#667085;font-size:13px;line-height:1.45}
@media(max-width:600px){
	.mclp-account-phone-card{padding:14px;gap:11px}
	.mclp-account-phone-icon{flex-basis:30px;width:30px;height:30px;font-size:17px}
	.mclp-account-phone-number{font-size:16px}
}

/* v1.2.0 — cambio seguro de WhatsApp */
.mclp-account-change-button{
	align-self:flex-start;
	margin-top:7px;
	padding:7px 12px;
	border:1px solid #98d8ad;
	border-radius:8px;
	background:#fff;
	color:#146c36;
	font-size:13px;
	font-weight:700;
	line-height:1.2;
	cursor:pointer;
}
.mclp-account-change-button:hover{background:#eaf8ef;border-color:#78c793}
.mclp-phone-change-panel{
	margin:-8px 0 22px;
	padding:18px;
	border:1px solid #d8e2dc;
	border-radius:12px;
	background:#fff;
	box-shadow:0 8px 24px rgba(17,24,39,.07);
	box-sizing:border-box;
}
.mclp-phone-change-panel[hidden],.mclp-phone-change-step[hidden]{display:none!important}
.mclp-phone-change-step h3{margin:0 0 7px;color:#172033;font-size:18px;line-height:1.3}
.mclp-phone-change-step>p{margin:0 0 14px;color:#667085;font-size:14px;line-height:1.45}
.mclp-phone-change-status:empty{display:none}
.mclp-phone-change-status{margin:0 0 14px;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.4}
.mclp-phone-change-status.is-error{display:block;background:#fff2f2;border:1px solid #efb2b2;color:#8b1e1e}
.mclp-phone-change-status.is-success{display:block;background:#effbf3;border:1px solid #a7dbb7;color:#176b32}
.mclp-phone-change-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:14px}
.mclp-phone-change-actions .mclp-button{min-width:0}
.mclp-secondary-button{
	min-height:48px!important;
	padding:10px 16px!important;
	border:1px solid #d3d9e2!important;
	border-radius:9px!important;
	background:#fff!important;
	color:#344054!important;
	font-weight:700!important;
	box-shadow:none!important;
}
.mclp-change-otp{display:flex;justify-content:center;gap:8px;margin:12px 0 8px}
.mclp-change-otp-digit{
	width:46px!important;
	height:50px!important;
	min-height:50px!important;
	padding:0!important;
	text-align:center;
	font-size:24px!important;
	font-weight:750;
	border:1px solid #bcc2c8!important;
	border-radius:8px!important;
	box-sizing:border-box;
}
.mclp-change-otp-digit:focus{border-color:var(--mclp-primary)!important;box-shadow:0 0 0 3px rgba(37,211,102,.14)!important;outline:none}
.mclp-change-code-help{text-align:center}
.mclp-change-resend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:12px;color:#7d8490;font-size:13px}
.mclp-change-resend strong{min-width:38px;font-variant-numeric:tabular-nums}
@media(max-width:600px){
	.mclp-account-change-button{width:100%;justify-content:center}
	.mclp-phone-change-panel{padding:14px}
	.mclp-phone-change-actions{grid-template-columns:1fr}
	.mclp-secondary-button{width:100%}
	.mclp-change-otp{gap:5px}
	.mclp-change-otp-digit{width:38px!important;height:44px!important;min-height:44px!important;font-size:21px!important}
}
@media(max-width:380px){.mclp-change-otp-digit{width:34px!important}}
