/* =========================================================
   MERKATO PLAY · LILAC MICRO ACCENTS V3
   ========================================================= */

:root{
    --mp-lilac:#b8a4ff;
    --mp-lilac-strong:#9b7cff;
    --mp-lilac-light:#d0c5ff;

    --mp-lilac-soft:rgba(184,164,255,.10);
    --mp-lilac-border:rgba(184,164,255,.20);

    --mp-white:#ffffff;
    --mp-cyan:#35c7ff;
    --mp-lime:#c8ff2e;
    --mp-on-lime:#071007;
}


/* =========================================================
   HUB · TEXTO PEQUEÑO
   ========================================================= */

html body.mp-distributor-body small{
    color:var(--mp-lilac) !important;
}


/* etiquetas pequeñas */

html body.mp-distributor-body .hub-kicker,
html body.mp-distributor-body .mp-page-context .hub-kicker,
html body.mp-distributor-body .hub-dashboard-games-head .hub-kicker,
html body.mp-distributor-body .hub-section-head .hub-kicker{
    color:var(--mp-lilac-strong) !important;
}


/* =========================================================
   PERFIL LATERAL
   ========================================================= */

html body.mp-distributor-body .mp-sidebar-profile small,
html body.mp-distributor-body .mp-sidebar-profile p,
html body.mp-distributor-body .mp-sidebar-profile span:not(.mp-sidebar-avatar){
    color:var(--mp-lilac) !important;
}


/* saldo disponible */

html body.mp-distributor-body .mp-sidebar-balance small,
html body.mp-distributor-body .mp-sidebar-balance span{
    color:var(--mp-lilac) !important;
}


/* =========================================================
   WALLET SUPERIOR
   ========================================================= */

html body.mp-distributor-body .mp-wallet-chip small,
html body.mp-distributor-body .mp-wallet-chip span{
    color:var(--mp-lilac) !important;
}


/* =========================================================
   JUEGOS
   ========================================================= */

/* cantidad de paquetes / descripción */

html body.mp-distributor-body .hub-game-card small,
html body.mp-distributor-body .hub-game-tile small,

html body.mp-distributor-body .hub-game-card p,
html body.mp-distributor-body .hub-game-tile p,

html body.mp-distributor-body .hub-game-card span:not(.hub-game-price),
html body.mp-distributor-body .hub-game-tile span:not(.hub-game-price){
    color:var(--mp-lilac) !important;
}


/* nombres principales permanecen blancos */

html body.mp-distributor-body .hub-game-card h3,
html body.mp-distributor-body .hub-game-card strong,
html body.mp-distributor-body .hub-game-card b,

html body.mp-distributor-body .hub-game-tile h3,
html body.mp-distributor-body .hub-game-tile strong,
html body.mp-distributor-body .hub-game-tile b{
    color:#ffffff !important;
}


/* =========================================================
   CARDS
   ========================================================= */

html body.mp-distributor-body .hub-card small,
html body.mp-distributor-body .hub-stat small,

html body.mp-distributor-body .hub-card .text-muted,
html body.mp-distributor-body .hub-stat .text-muted,

html body.mp-distributor-body .hub-muted,
html body.mp-distributor-body .text-muted{
    color:var(--mp-lilac) !important;
}


/* =========================================================
   FORMULARIOS
   ========================================================= */

html body.mp-distributor-body label{
    color:var(--mp-lilac) !important;
}


html body.mp-distributor-body .form-text,
html body.mp-distributor-body .help-text,
html body.mp-distributor-body .hub-help,
html body.mp-distributor-body .hub-field-help{
    color:var(--mp-lilac) !important;
}


/* inputs siguen blancos */

html body.mp-distributor-body input,
html body.mp-distributor-body textarea,
html body.mp-distributor-body select{
    color:#ffffff !important;
}


/* placeholder lila mucho más suave */

html body.mp-distributor-body input::placeholder,
html body.mp-distributor-body textarea::placeholder{
    color:rgba(184,164,255,.54) !important;
}


/* =========================================================
   TABLAS
   ========================================================= */

html body.mp-distributor-body table thead th,
html body.mp-distributor-body .hub-table thead th{
    color:var(--mp-lilac) !important;
}


html body.mp-distributor-body table td small,
html body.mp-distributor-body .hub-table td small{
    color:var(--mp-lilac) !important;
}


/* datos principales blancos */

html body.mp-distributor-body table tbody td,
html body.mp-distributor-body .hub-table tbody td{
    color:#ffffff !important;
}


/* =========================================================
   PEDIDOS / WALLET / PERFIL / API
   ========================================================= */

html body.mp-distributor-body .hub-order-meta,
html body.mp-distributor-body .hub-wallet-meta,
html body.mp-distributor-body .hub-profile-meta,

html body.mp-distributor-body .api-label,
html body.mp-distributor-body .api-meta,
html body.mp-distributor-body .api-helper,
html body.mp-distributor-body .api-caption{
    color:var(--mp-lilac) !important;
}


/* =========================================================
   PRO / BUSINESS
   ========================================================= */

html body.mp-distributor-body .mg-upgrade-copy small,
html body.mp-distributor-body .mg-upgrade-price,
html body.mp-distributor-body .mg-upgrade-price small{
    color:var(--mp-lilac) !important;
}


html body.mp-distributor-body .mg-upgrade-price{
    border-color:var(--mp-lilac-border) !important;

    background:
        rgba(184,164,255,.045) !important;
}


/* =========================================================
   HOME PUBLICA
   ========================================================= */

body .mg-page .mg-eyebrow{
    color:var(--mp-lilac-strong) !important;
}


body .mg-page .mg-eyebrow::before{
    background:var(--mp-lilac-strong) !important;
}


body .mg-page small,
body .mg-page .mg-note,
body .mg-page .mg-footer,
body .mg-page .mg-game summary span,
body .mg-page .mg-feature p,
body .mg-page .mg-tier p,
body .mg-page .mg-tier li,
body .mg-page .mg-cta p{
    color:var(--mp-lilac) !important;
}


/* cards de características con un toque lila */

body .mg-page .mg-feature{
    border-color:
        rgba(184,164,255,.11) !important;
}


body .mg-page .mg-feature:hover{
    border-color:
        rgba(184,164,255,.26) !important;
}


/* =========================================================
   LOGIN
   ========================================================= */

body.mp-login small,
body.mp-login .mp-login-label,
body.mp-login .mp-login-status,
body.mp-login .mp-field label,
body.mp-login .mp-login-card-head p,
body.mp-login .mp-login-copy > p,
body.mp-login .mp-login-features span,
body.mp-login .mp-login-footer,
body.mp-login .mp-login-register span,
body.mp-login .mp-login-security{
    color:var(--mp-lilac) !important;
}


body.mp-login .mp-login-label span{
    background:var(--mp-lilac-strong) !important;
}


body.mp-login .mp-login-status i{
    background:var(--mp-lilac-strong) !important;

    box-shadow:
        0 0 14px rgba(155,124,255,.42) !important;
}


body.mp-login input::placeholder{
    color:rgba(184,164,255,.48) !important;
}


/* =========================================================
   REGISTRO / AUTH
   ========================================================= */

body.mg-auth small,
body.mg-auth .mg-field label,
body.mg-auth .mg-auth-meta,
body.mg-auth .mg-auth-bottom,
body.mg-auth .mg-auth-point,
body.mg-auth .mg-auth-card > p{
    color:var(--mp-lilac) !important;
}


body.mg-auth .mg-eyebrow{
    color:var(--mp-lilac-strong) !important;
}


body.mg-auth .mg-eyebrow::before{
    background:var(--mp-lilac-strong) !important;
}


/* =========================================================
   TITULOS PRINCIPALES = BLANCO
   ========================================================= */

html body.mp-distributor-body h1,
html body.mp-distributor-body h2,
html body.mp-distributor-body h3,
html body.mp-distributor-body h4,

body .mg-page h1,
body .mg-page h2,
body .mg-page h3,

body.mp-login h1,
body.mp-login h2,
body.mp-login h3,

body.mg-auth h1,
body.mg-auth h2,
body.mg-auth h3{
    color:#ffffff !important;
}


/* =========================================================
   DINERO / PRECIOS = LIMA
   ========================================================= */

html body.mp-distributor-body .mp-wallet-chip b,
html body.mp-distributor-body .mp-sidebar-balance b,

html body.mp-distributor-body .hub-game-price,
html body.mp-distributor-body .hub-game-price *,
html body.mp-distributor-body .mg-upgrade-price b,

body .mg-page .mg-tier .amount{
    color:var(--mp-lime) !important;
}


/* =========================================================
   CIAN = INTERACCION
   ========================================================= */

html body.mp-distributor-body .mp-sidebar-nav a.is-active svg,
html body.mp-distributor-body .hub-game-arrow,
body.mp-login .mp-forgot{
    color:var(--mp-cyan) !important;
}


html body.mp-distributor-body input:focus,
html body.mp-distributor-body textarea:focus,
html body.mp-distributor-body select:focus,
body.mp-login .mp-input:focus{
    border-color:var(--mp-cyan) !important;

    box-shadow:
        0 0 0 3px rgba(53,199,255,.07) !important;
}


/* =========================================================
   BOTONES LIMA
   NUNCA TEXTO BLANCO/LILA SOBRE LIMA
   ========================================================= */

html body.mp-distributor-body .hub-btn-primary,
html body.mp-distributor-body .hub-btn-primary *,
html body.mp-distributor-body .store-btn-primary,
html body.mp-distributor-body .store-btn-primary *,
html body.mp-distributor-body .mp-sidebar-balance a,
html body.mp-distributor-body .mp-sidebar-balance a *,

body .mg-btn-primary,
body .mg-btn-primary *,

body.mp-login .mp-login-submit,
body.mp-login .mp-login-submit *{
    color:var(--mp-on-lime) !important;
}


/* =========================================================
   TITULO LIMA EXISTENTE
   ========================================================= */

body .mg-page h1 em,
body.mp-login h1 strong,
body.mg-auth h1 em{
    color:var(--mp-lime) !important;
}
