/* My Account Custom — estilos de la página "Mi Cuenta" */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

.woocommerce-account { font-family: 'Montserrat', sans-serif; color: #2c2e35; }

.h2ma-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 12px 26px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    cursor: pointer;
    border: none;
}
.h2ma-btn--primary { background: linear-gradient(90deg, #E1368C 0%, #FFBE36 100%) !important; color: #fff !important; }
.h2ma-btn--outline { background: #fff !important; color: #E1368C !important; border: 2px solid #E1368C !important; }

/* ── Login / Register ──
   Por defecto solo se ve "Sign In". "Create an Account" queda oculta hasta
   que se hace click en el botón "Create account" — el toggle lo maneja
   my-account.js agregando/quitando la clase .h2ma-show-register (ver ahí
   por qué no se usa :target solo). */
.h2ma-login-wrap {
    max-width: 480px;
    margin: 40px auto !important;
}
.h2ma-login-card {
    background: #fff4fa;
    border: 1px solid #f3d5e6;
    border-radius: 24px !important;
    padding: 40px;
    box-shadow: 0 2px 8px rgba(20,20,43,0.06);
    box-sizing: border-box;
    width: 100%;
}
.h2ma-login-card--register {
    display: none;
    margin-top: 32px;
}
.h2ma-login-wrap.h2ma-show-register .h2ma-login-card--register {
    display: block;
}
.h2ma-login-wrap.h2ma-show-register > .h2ma-login-card:not(.h2ma-login-card--register) {
    display: none;
}
.h2ma-login-card__back { margin: 0 0 20px; }
.h2ma-login-card__back a { color: #E1368C; font-weight: 600; text-decoration: none; font-size: 14px; }
.h2ma-login-card__title { font-size: 26px !important; font-weight: 700 !important; margin: 0 0 24px; }
.h2ma-login-form .form-row { margin-bottom: 18px; }
.h2ma-login-form label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.h2ma-login-form input[type="text"],
.h2ma-login-form input[type="email"],
.h2ma-login-form input[type="password"] {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    font-family: 'Montserrat', sans-serif;
    background: #fff !important;
    box-sizing: border-box;
}
.h2ma-login-form .password-input {
    background: #fff !important;
    border-radius: 12px;
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.h2ma-login-form__actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.h2ma-login-form__lost-password { margin-top: 12px; }
.h2ma-login-form__lost-password a { color: #E1368C; font-weight: 600; text-decoration: none; }
.h2ma-login-card__secondary-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

/* ── Order history ── */
.h2ma-order-card__list,
.h2ma-subscription-card__list { display: flex; flex-direction: column; gap: 20px; margin: 24px 0; }
.h2ma-order-card,
.h2ma-subscription-card {
    display: flex; gap: 20px; align-items: flex-start;
    background: #fff; border: 1px solid #ececf1; border-radius: 20px; padding: 24px;
    box-shadow: 0 2px 8px rgba(20,20,43,0.05);
}
.h2ma-order-card__thumbs,
.h2ma-subscription-card__thumbs { display: flex; gap: 8px; flex: 0 0 auto; }
.h2ma-order-card__thumbs img,
.h2ma-subscription-card__thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; }
.h2ma-order-card__details,
.h2ma-subscription-card__details { flex: 1; }
.h2ma-order-card__row { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 12px; }
.h2ma-order-card__label { display: block; font-size: 12px; color: #9a9aa5; text-transform: uppercase; letter-spacing: .04em; }
.h2ma-order-card__value { display: block; font-size: 15px; font-weight: 600; }
.h2ma-order-status { padding: 4px 12px; border-radius: 999px; background: #fff4fa; color: #E1368C; display: inline-block !important; }
.h2ma-order-card__shipping-method,
.h2ma-order-card__tracking p { font-size: 14px; color: #364153; margin: 4px 0; }
.h2ma-order-card__actions,
.h2ma-subscription-card__actions { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.h2ma-orders__pagination { text-align: center; margin-top: 20px; }
.h2ma-orders__pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 4px; border-radius: 999px; text-decoration: none; color: #2c2e35; }
.h2ma-orders__pagination .page-numbers.current { background: linear-gradient(90deg, #E1368C 0%, #FFBE36 100%); color: #fff; }

/* ── Subscriptions ── */
.h2ma-subscriptions__heading { font-size: 20px !important; font-weight: 700 !important; margin: 32px 0 16px; }
.h2ma-subscription-card__name { font-weight: 700; margin: 0 0 4px; }
.h2ma-subscription-card__price { color: #E1368C; font-weight: 600; margin: 0 0 8px; }
.h2ma-subscription-card__meta { font-size: 14px; color: #364153; }

/* ── Loyalty ── */
.h2ma-loyalty__balance { font-size: 22px; font-weight: 700; margin-bottom: 20px; }
.h2ma-loyalty__table { width: 100%; border-collapse: collapse; }
.h2ma-loyalty__table th { text-align: left; background: #f9f9fb; padding: 10px 14px; font-size: 13px; text-transform: uppercase; color: #9a9aa5; }
.h2ma-loyalty__table td { padding: 12px 14px; border-bottom: 1px solid #ececf1; font-size: 14px; }
.h2ma-points-positive { color: #16a34a; font-weight: 700; }
.h2ma-points-negative { color: #dc2626; font-weight: 700; }

/* ── Refer a Friend ── */
.h2ma-refer-a-friend__link-row { display: flex; gap: 10px; margin: 16px 0; max-width: 520px; }
.h2ma-refer-a-friend__input { flex: 1; padding: 12px 16px; border-radius: 12px; border: 2px solid #e5e7eb; font-family: 'Montserrat', sans-serif; }
.h2ma-refer-a-friend__stats { color: #364153; }

/* ── Account Information / Change Password: mostrar solo lo que corresponde a cada pestaña ── */
.h2ma-tab-account-info fieldset:has(#password_current) { display: none !important; }

.h2ma-tab-change-password p:has(#account_first_name),
.h2ma-tab-change-password p:has(#account_last_name),
.h2ma-tab-change-password p:has(#account_display_name),
.h2ma-tab-change-password p:has(#account_email) { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   LAYOUT GENERAL: menú lateral + panel de contenido
   ══════════════════════════════════════════════════════════════════ */

body.woocommerce-account *:has( > .woocommerce-MyAccount-navigation ) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 32px !important;
    max-width: 1140px;
    margin: 40px auto !important;
    padding: 0 24px;
    box-sizing: border-box;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none !important;
    clear: none !important;
    flex: 0 0 250px !important;
    width: 250px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #ececf1;
    border-radius: 20px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(20,20,43,0.05);
}
.woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    clear: none !important;
    flex: 1 1 400px !important;
    background: #fafafc;
    border: 1px solid #ececf1;
    border-radius: 20px;
    padding: 36px;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(20,20,43,0.05);
    min-height: 360px;
}

.woocommerce-MyAccount-navigation ul,
.woocommerce-MyAccount-navigation ul li {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0;
    padding: 0;
}
.woocommerce-MyAccount-navigation ul li::marker { content: ''; }
.woocommerce-MyAccount-navigation li { margin: 0 0 4px !important; }
.woocommerce-MyAccount-navigation li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 12px;
    color: #2c2e35;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease;
}
.woocommerce-MyAccount-navigation li a:hover { background: #fff4fa; color: #E1368C; }
.woocommerce-MyAccount-navigation li.is-active a {
    background: linear-gradient(90deg, #E1368C 0%, #FFBE36 100%);
    color: #fff !important;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 10px !important;
    padding-top: 10px;
    border-top: 1px solid #ececf1;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: #9a9aa5; }

/* ── Iconos por pestaña (SVG en línea vía mask, siguen el color del texto) ── */
.woocommerce-MyAccount-navigation li a::before {
    content: '';
    display: block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.woocommerce-MyAccount-navigation-link--orders a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7 L12 3 L21 7 L21 17 L12 21 L3 17 Z'/%3E%3Cpath d='M3 7 L12 11 L21 7'/%3E%3Cline x1='12' y1='11' x2='12' y2='21'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7 L12 3 L21 7 L21 17 L12 21 L3 17 Z'/%3E%3Cpath d='M3 7 L12 11 L21 7'/%3E%3Cline x1='12' y1='11' x2='12' y2='21'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--subscriptions a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='14' height='14' rx='2'/%3E%3Cpath d='M3 15 V5 a2 2 0 0 1 2-2 H15'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='14' height='14' rx='2'/%3E%3Cpath d='M3 15 V5 a2 2 0 0 1 2-2 H15'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--account-information a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21 c0-4.5 3.5-7 8-7 s8 2.5 8 7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21 c0-4.5 3.5-7 8-7 s8 2.5 8 7'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--loyalty-rewards a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 L14.6 8.6 L21 9.3 L16.3 13.6 L17.6 20 L12 16.8 L6.4 20 L7.7 13.6 L3 9.3 L9.4 8.6 Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 L14.6 8.6 L21 9.3 L16.3 13.6 L17.6 20 L12 16.8 L6.4 20 L7.7 13.6 L3 9.3 L9.4 8.6 Z'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--change-password a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11 V7 a4 4 0 0 1 8 0 v4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11 V7 a4 4 0 0 1 8 0 v4'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--refer-a-friend a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21 c0-4.5 3-7 7-7 s7 2.5 7 7'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='16' y1='11' x2='22' y2='11'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21 c0-4.5 3-7 7-7 s7 2.5 7 7'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='16' y1='11' x2='22' y2='11'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--customer-logout a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21 H5 a2 2 0 0 1-2-2 V5 a2 2 0 0 1 2-2 H9'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21 H5 a2 2 0 0 1-2-2 V5 a2 2 0 0 1 2-2 H9'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

@media (max-width: 900px) {
    body.woocommerce-account *:has( > .woocommerce-MyAccount-navigation ) { flex-direction: column !important; }
    .woocommerce-account .woocommerce-MyAccount-navigation { flex-basis: auto !important; width: 100%; }
    .woocommerce-account .woocommerce-MyAccount-content { flex-basis: auto !important; width: 100%; padding: 24px; }
}

.h2ma-section-heading {
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 0 0 18px !important;
    padding-top: 28px;
    border-top: 1px solid #ececf1;
}
.woocommerce-account .h2ma-tab-account-info > .h2ma-section-heading:first-child,
.woocommerce-account .h2ma-tab-change-password > .h2ma-section-heading:first-child {
    padding-top: 0;
    border-top: none;
}

/* ══════════════════════════════════════════════════════════════════
   Formularios nativos de WooCommerce reutilizados (cuenta / dirección)
   ══════════════════════════════════════════════════════════════════ */

.woocommerce-EditAccountForm .form-row,
.woocommerce-address-fields .form-row { margin-bottom: 18px; }
.woocommerce-EditAccountForm .form-row-first,
.woocommerce-EditAccountForm .form-row-last,
.woocommerce-address-fields .form-row-first,
.woocommerce-address-fields .form-row-last { width: 48%; box-sizing: border-box; }
.woocommerce-EditAccountForm .form-row-first,
.woocommerce-address-fields .form-row-first { float: left; }
.woocommerce-EditAccountForm .form-row-last,
.woocommerce-address-fields .form-row-last { float: right; }
.woocommerce-EditAccountForm .clear,
.woocommerce-address-fields .clear { clear: both; }

.woocommerce-EditAccountForm label,
.woocommerce-address-fields label,
.woocommerce-address-fields legend { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }

.woocommerce-EditAccountForm input.input-text,
.woocommerce-EditAccountForm select,
.woocommerce-address-fields input.input-text,
.woocommerce-address-fields select {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    background: #fff;
}
.woocommerce-EditAccountForm input.input-text:focus,
.woocommerce-address-fields input.input-text:focus { outline: none; border-color: #E1368C; }

.woocommerce-EditAccountForm fieldset {
    border: none;
    padding: 24px 0 0;
    margin: 24px 0 0;
    border-top: 1px solid #ececf1;
}
.woocommerce-EditAccountForm legend { font-weight: 700 !important; font-size: 16px !important; padding: 0; margin-bottom: 16px !important; }

.woocommerce-account button.woocommerce-Button,
.woocommerce-account button[name="save_account_details"],
.woocommerce-account button[name="save_address"] {
    display: inline-flex !important;
    align-items: center;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 12px 26px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    cursor: pointer;
    border: none !important;
    background: linear-gradient(90deg, #E1368C 0%, #FFBE36 100%) !important;
    color: #fff !important;
    margin-top: 8px;
}

/* ══════════════════════════════════════════════════════════════════
   Estados vacíos (avisos nativos de WooCommerce reutilizados)
   ══════════════════════════════════════════════════════════════════ */

body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-NoticeGroup .woocommerce-info {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: #fff4fa !important;
    color: #2c2e35 !important;
    border-radius: 16px !important;
    padding: 22px 26px !important;
    margin: 0 !important;
    border: none !important;
    list-style: none !important;
    font-size: 15px;
    font-weight: 500;
}
body.woocommerce-account .woocommerce-info::before,
body.woocommerce-account .woocommerce-message::before { display: none !important; }
body.woocommerce-account .woocommerce-info .button,
body.woocommerce-account .woocommerce-message .button {
    background: linear-gradient(90deg, #E1368C 0%, #FFBE36 100%) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 10px 22px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    border: none !important;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   Loyalty / Refer a Friend — pulido
   ══════════════════════════════════════════════════════════════════ */

.h2ma-loyalty__table {
    border: 1px solid #ececf1;
    border-radius: 16px;
    overflow: hidden;
    border-spacing: 0;
}
.h2ma-loyalty__table th:first-child,
.h2ma-loyalty__table td:first-child { padding-left: 20px; }
.h2ma-loyalty__table th:last-child,
.h2ma-loyalty__table td:last-child { text-align: right; padding-right: 20px; }
.h2ma-loyalty__table tr:last-child td { border-bottom: none; }

.h2ma-refer-a-friend__intro { font-size: 15px; margin-bottom: 4px; }
.h2ma-refer-a-friend__stats {
    display: inline-block;
    background: #fff4fa;
    color: #E1368C;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 999px;
    margin-top: 8px;
}