/*
 * BOLEPIX_WA_CODES_REAL_FULLWIDTH_V5703Z176WAADM5C10
 *
 * Atua SOMENTE no slot/card criado para:
 *
 * WhatsApp — Códigos de Acesso
 *
 * O uso de :is(#specificity-booster, ...) é proposital:
 * aumenta a especificidade para vencer os antigos
 * width:330px !important do C6.
 *
 * NÃO atua em:
 *
 * .wa-account-card
 * #waAccountsGrid
 */


/* ==========================================================
   SLOT EXTERNO — 100%
   ========================================================== */

html body
:is(
  #bp-wa-codes-specificity-booster-v5703z176waadm5c10,
  [id^="bp-wa-codes-inline-v5703z176waadm5c6"]
){
  display:block !important;

  width:100% !important;
  max-width:none !important;
  min-width:0 !important;

  margin:18px 0 22px !important;
  padding:0 !important;

  box-sizing:border-box !important;
}


/* ==========================================================
   HOST QUE ANTES FICAVA width:auto
   ========================================================== */

html body
:is(
  #bp-wa-codes-specificity-booster-v5703z176waadm5c10,
  [id^="bp-wa-codes-inline-v5703z176waadm5c6"]
)
[class*="bp-wa-codes-host"],

html body
:is(
  #bp-wa-codes-specificity-booster-v5703z176waadm5c10,
  [id^="bp-wa-codes-inline-v5703z176waadm5c6"]
)
> [class*="bp-wa-codes-host"]{
  display:block !important;

  width:100% !important;
  max-width:none !important;
  min-width:0 !important;

  margin:0 !important;
  padding:0 !important;

  box-sizing:border-box !important;
}


/* ==========================================================
   CARD — AGORA 100% REAL
   ========================================================== */

html body
:is(
  #bp-wa-codes-specificity-booster-v5703z176waadm5c10,
  [id^="bp-wa-codes-inline-v5703z176waadm5c6"]
)
.bp-wa-codes-host-v5703z176waadm5c6
.bp-system-otp-c2r1-card,

html body
:is(
  #bp-wa-codes-specificity-booster-v5703z176waadm5c10,
  [id^="bp-wa-codes-inline-v5703z176waadm5c6"]
)
.bp-wa-codes-host-v5703z176waadm5c6r1
.bp-system-otp-c2r1-card,

html body
:is(
  #bp-wa-codes-specificity-booster-v5703z176waadm5c10,
  [id^="bp-wa-codes-inline-v5703z176waadm5c6"]
)
.bp-wa-codes-host-v5703z176waadm5c6r2
.bp-system-otp-c2r1-card,

html body
:is(
  #bp-wa-codes-specificity-booster-v5703z176waadm5c10,
  [id^="bp-wa-codes-inline-v5703z176waadm5c6"]
)
.bp-system-otp-c2r1-card{

  width:100% !important;
  max-width:none !important;
  min-width:0 !important;

  margin:0 !important;
  padding:18px 20px !important;

  box-sizing:border-box !important;

  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    210px !important;

  grid-template-areas:
    "title action"
    "desc action"
    "state action" !important;

  gap:7px 24px !important;

  align-items:center !important;

  background:#ffffff !important;

  border:1px solid #f0b56c !important;
  border-radius:15px !important;

  box-shadow:
    0 5px 18px rgba(15,23,42,.06) !important;
}


/* título */

html body
:is(
  #bp-wa-codes-specificity-booster-v5703z176waadm5c10,
  [id^="bp-wa-codes-inline-v5703z176waadm5c6"]
)
.bp-system-otp-c2r1-title{

  grid-area:title !important;

  margin:0 !important;
  padding:0 0 5px !important;

  font-size:15px !important;
  line-height:1.3 !important;
  font-weight:800 !important;

  border-bottom:1px solid #edf1f5 !important;
}


/* descrição */

html body
:is(
  #bp-wa-codes-specificity-booster-v5703z176waadm5c10,
  [id^="bp-wa-codes-inline-v5703z176waadm5c6"]
)
.bp-system-otp-c2r1-desc{

  grid-area:desc !important;

  margin:0 !important;

  font-size:12px !important;
  line-height:1.45 !important;
}


/* status */

html body
:is(
  #bp-wa-codes-specificity-booster-v5703z176waadm5c10,
  [id^="bp-wa-codes-inline-v5703z176waadm5c6"]
)
.bp-system-otp-c2r1-state{

  grid-area:state !important;

  width:max-content !important;
  max-width:100% !important;

  margin:0 !important;
  padding:7px 10px !important;

  box-sizing:border-box !important;
}


/* ação à direita */

html body
:is(
  #bp-wa-codes-specificity-booster-v5703z176waadm5c10,
  [id^="bp-wa-codes-inline-v5703z176waadm5c6"]
)
.bp-system-otp-c2r1-actions{

  grid-area:action !important;

  width:210px !important;
  max-width:210px !important;

  margin:0 !important;

  align-self:center !important;

  box-sizing:border-box !important;
}

html body
:is(
  #bp-wa-codes-specificity-booster-v5703z176waadm5c10,
  [id^="bp-wa-codes-inline-v5703z176waadm5c6"]
)
.bp-system-otp-c2r1-actions button{

  width:100% !important;
  min-height:42px !important;

  margin:0 !important;

  border-radius:10px !important;

  box-sizing:border-box !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:700px){

  html body
  :is(
    #bp-wa-codes-specificity-booster-v5703z176waadm5c10,
    [id^="bp-wa-codes-inline-v5703z176waadm5c6"]
  )
  .bp-system-otp-c2r1-card{

    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;

    width:100% !important;
    max-width:none !important;

    gap:10px !important;

    padding:15px !important;
  }

  html body
  :is(
    #bp-wa-codes-specificity-booster-v5703z176waadm5c10,
    [id^="bp-wa-codes-inline-v5703z176waadm5c6"]
  )
  .bp-system-otp-c2r1-state{

    width:100% !important;
  }

  html body
  :is(
    #bp-wa-codes-specificity-booster-v5703z176waadm5c10,
    [id^="bp-wa-codes-inline-v5703z176waadm5c6"]
  )
  .bp-system-otp-c2r1-actions{

    width:100% !important;
    max-width:none !important;
  }

}