/* =====================================
   SACAR LOGIN DEL CONTENEDOR ELEMENTOR
===================================== */
body.woocommerce-account:not(.logged-in) .madame-auth-wrapper{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px;
  z-index: 999;
}

/* =====================================
   CARD — GRID REAL 2 COLUMNAS
===================================== */
.madame-auth-card{
  display: flex;
  max-width: 1200px;
  width: 100%;
  background: #F3E8D9;
  border-radius: 24px;
  overflow: hidden;
	box-shadow:
    0 20px 40px rgba(60,42,33,.18),
    0 6px 14px rgba(60,42,33,.12);
}

.madame-auth-editorial{
  flex: 1;
  padding: 72px 64px;
}

.madame-auth-right{
  flex: 1;
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
}

.madame-auth-tabs{
  display: flex;
  background: #E5D5C3;
  border-radius: 32px;
  margin-bottom: 40px;
}


/* =====================================
   EDITORIAL — COLUMNA IZQUIERDA
===================================== */
.madame-auth-editorial{
  grid-column: 1;
  padding: 72px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #3C2A21;
}

/* =====================================
   TABS — FORZADAS A LA COLUMNA DERECHA
===================================== */
.madame-auth-tabs{
  grid-column: 2;
  display: flex;
  background: #E5D5C3;
  border-radius: 14px;
  overflow: hidden;
  margin: 64px 56px 32px;
}

/* =====================================
   WOOCOMMERCE — MISMA COLUMNA DERECHA
===================================== */
.madame-auth-card .woocommerce{
  grid-column: 2;
  padding: 0 56px 64px;
  display: flex;
  flex-direction: column;
}

/* =====================================
   TABS LOGIN / REGISTRO
   — ESTILO COLECCIÓN MADAMECELLO
===================================== */

.madame-auth-tabs{
  display: flex;
	 justify-content: center;
  justify-content: flex-start;
  gap: 48px;

  width: 100%;
  max-width: 520px;
  margin: 0 0 36px;

  position: relative;

  background: none;
  border-radius: 0;
}
	


/* =====================================
   TAB BASE
===================================== */
.madame-auth-tabs button{
  appearance: none;
  -webkit-appearance: none;

  background: transparent;
  border: none;
  padding: 0 4px 10px;

  font-family: 'Cormorant', serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;

  color: rgba(60,42,33,.55);

  cursor: pointer;
  position: relative;

  transition:
    color .25s ease,
    letter-spacing .25s ease,
    opacity .25s ease;
}

/* =====================================
   TAB ACTIVA — SUBRAYADO ELEGANTE
===================================== */
.madame-auth-tabs button.active{
  color: #3C2A21;
}

/* Línea inferior activa */
.madame-auth-tabs button.active::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 2px;
  background: #3C2A21;
}

/* =====================================
   HOVER EDITORIAL (NO BOTÓN)
===================================== */
.madame-auth-tabs button:hover{
  color: #3C2A21;
  letter-spacing: .16em;
  opacity: .85;
}


/* =====================================
   ACTIVE (PRESIÓN)
===================================== */
.madame-auth-tabs button:active{
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.4),
    0 4px 8px rgba(0,0,0,.18);
}

	

/* =====================================
   ACTIVE — PRESIÓN SUAVE
===================================== */
body.woocommerce-account:not(.logged-in)
.woocommerce-form-login__submit:active,
body.woocommerce-account:not(.logged-in)
.woocommerce-form-register__submit:active{
  transform: translateY(1px) !important;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.35),
    0 6px 14px rgba(60,42,33,.25) !important;
}


	
/* =====================================
   FIX COLUMNAS WOOCOMMERCE
===================================== */
body.woocommerce-account:not(.logged-in) .u-columns,
body.woocommerce-account:not(.logged-in) .u-column1,
body.woocommerce-account:not(.logged-in) .u-column2{
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* =====================================
   FORMULARIOS
===================================== */
.woocommerce form{
  width: 100%;
  margin: 0;
}

.woocommerce-form-login,
.woocommerce-form-register{
  width: 100%;
}

.woocommerce-form-register{
  display: none;
}

.woocommerce h2{
  display: none;
}

/* =====================================
   OCULTAR FORM INACTIVO
===================================== */
.woocommerce-form-login[style*="display: none"],
.woocommerce-form-register[style*="display: none"]{
  display: none !important;
}

	/* Por defecto: solo login */
.woocommerce-form-register{
  display: none;
}

/* Cuando action=register */
body.woocommerce-account[action="register"] .woocommerce-form-login{
  display: none;
}
body.woocommerce-account[action="register"] .woocommerce-form-register{
  display: block;
}

	/* =====================================
   ELIMINAR TÍTULOS METICHES DE WOOCOMMERCE
   (LOGIN / REGISTRO)
===================================== */

/* Caso 1: títulos fuera del form */
body.woocommerce-account:not(.logged-in)
.woocommerce > h2{
  display: none !important;
}

/* Caso 2: títulos dentro de columnas Woo */
body.woocommerce-account:not(.logged-in)
.u-column1 > h2,
body.woocommerce-account:not(.logged-in)
.u-column2 > h2{
  display: none !important;
}

/* Caso 3: títulos justo antes del formulario */
body.woocommerce-account:not(.logged-in)
h2 + .woocommerce-form-login,
body.woocommerce-account:not(.logged-in)
h2 + .woocommerce-form-register{
  margin-top: 0 !important;
}

/* Caso 4: títulos incrustados dentro del form (algunas versiones) */
body.woocommerce-account:not(.logged-in)
.woocommerce-form-login h2,
body.woocommerce-account:not(.logged-in)
.woocommerce-form-register h2{
  display: none !important;
}

/* =====================================
   SEPARAR CARD DE LA CABECERA
===================================== */
body.woocommerce-account:not(.logged-in)
.madame-auth-wrapper{
  top: 90px;               /* 👈 ajusta según tu header */
  height: calc(100vh - 140px);
  align-items: center;
}
	
	/* =====================================
   BOTONES LOGIN / REGISTRO — MADAMECELLO
   (UNIFICADOS CON EL RESTO DEL SITIO)
===================================== */

body.woocommerce-account:not(.logged-in)
.woocommerce-form-login__submit,
body.woocommerce-account:not(.logged-in)
.woocommerce-form-register__submit{

  /* Reset controlado */
  appearance: none !important;
  -webkit-appearance: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  height: 52px !important;
  margin-top: 24px !important;

  background: #3C2A21 !important;
  color: #E5D5C3 !important;

  border: none !important;
  border-radius: 14px !important;

  font-family: 'Cormorant', serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;

  cursor: pointer !important;

  box-shadow:
    inset 0 3px 6px #E5D5C3,
    0 6px 12px rgba(0,0,0,0.15) !important;

  transition: background .25s ease, transform .25s ease !important;
}

/* =====================================
   HOVER — MISMO LENGUAJE QUE EL SITIO
===================================== */
body.woocommerce-account:not(.logged-in)
.woocommerce-form-login__submit:hover,
body.woocommerce-account:not(.logged-in)
.woocommerce-form-register__submit:hover{
  background: #5A1C2A !important;
}

/* =====================================
   ACTIVE — PRESIÓN NATURAL
===================================== */
body.woocommerce-account:not(.logged-in)
.woocommerce-form-login__submit:active,
body.woocommerce-account:not(.logged-in)
.woocommerce-form-register__submit:active{
  transform: translateY(1px) !important;
  box-shadow:
    inset 0 2px 4px #E5D5C3,
    0 4px 8px rgba(0,0,0,0.18) !important;
}

	.woocommerce-form-login__submit,
.woocommerce-form-register__submit{
  margin-top: 32px !important;
}

.madame-auth-editorial h1{
  font-size: 46px;
  line-height: 1.08;
  letter-spacing: .08em;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 36px;
  color: #3C2A21;
}

	.madame-auth-editorial em,
.madame-auth-editorial .claim{
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.6;
  color: #5A1C2A;
  margin-bottom: 48px;
  max-width: 420px;
}

	.madame-auth-editorial .divider{
  width: 64px;
  height: 1px;
  background: rgba(60,42,33,.45);
  margin: 40px 0 48px;
  position: relative;
}

.madame-auth-editorial .divider::after{
  content: "✦";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #F3E8D9;
  padding: 0 14px;
  font-size: 16px;
  color: #5A1C2A;
}

	.madame-auth-editorial p{
  font-size: 15px;
  line-height: 2;
  color: #6B4A3A;
  max-width: 440px;
  margin-bottom: 36px;
}

	.madame-auth-editorial .beneficio{
  margin-top: 48px;
  font-size: 14px;
  line-height: 1.8;
  color: #3C2A21;
  padding-left: 26px;
  position: relative;
  max-width: 420px;
}

.madame-auth-editorial .beneficio::before{
  content: "✦";
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 14px;
  color: #5A1C2A;
}
	
	
/* =====================================
   BOTONES LOGIN / REGISTRO — ICONO INLINE
===================================== */

body.woocommerce-account:not(.logged-in)
.woocommerce-form-login__submit,
body.woocommerce-account:not(.logged-in)
.woocommerce-form-register__submit{

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;

  padding: 0 28px !important;
}

/* BASE ICONO */
body.woocommerce-account:not(.logged-in)
.woocommerce-form-login__submit::before,
body.woocommerce-account:not(.logged-in)
.woocommerce-form-register__submit::before{

  content: "";
  width: 20px;
  height: 20px;

  background-color: currentColor;

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* ICONO LOGIN */
body.woocommerce-account:not(.logged-in)
.woocommerce-form-login__submit::before{
  mask-image: url("https://madamecello.com/wp-content/uploads/2026/02/Ingresar-a-mi-cuenta-MADAMECELLO.svg");
  -webkit-mask-image: url("https://madamecello.com/wp-content/uploads/2026/02/Ingresar-a-mi-cuenta-MADAMECELLO.svg");
}

/* ICONO REGISTRO */
body.woocommerce-account:not(.logged-in)
.woocommerce-form-register__submit::before{
  mask-image: url("https://madamecello.com/wp-content/uploads/2026/02/Crear-mi-cuenta-MADAMECELLO.svg");
  -webkit-mask-image: url("https://madamecello.com/wp-content/uploads/2026/02/Crear-mi-cuenta-MADAMECELLO.svg");
}

[type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover {
    background-color: transparent;
    color: #fff;
    text-decoration: none;
}