/* Smartlub — entrar, criar conta e area do cliente.

   Carregado so nas telas de conta. O WooCommerce entra aqui com dois
   tipos de marcacao: a nossa, nos templates que o tema substitui, e a
   dele, nos que continuam originais (ver pedido, formas de pagamento).
   Por isso as duas convivem: .slc-form desenha o formulario, e as classes
   .woocommerce-* garantem que o que nao foi substituido nao fique cru. */

/* Olho do botao de mostrar senha, usado como mascara para a cor.
   Mesma tecnica do carrinho do botao de compra, em critical.css. */
:root {
  --slc-icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6Z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------
   Avisos

   Repetidos de shop.css de proposito: aquele arquivo so carrega em
   catalogo, carrinho e checkout, e a tela de conta e onde o aviso de
   "senha incorreta" precisa aparecer.
   ------------------------------------------------------------------ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none; margin: 0 0 1.25rem; padding: .875rem 1rem;
  border-radius: var(--slc-radius); border-left: 4px solid var(--slc-yellow);
  background: var(--slc-surface); box-shadow: var(--slc-shadow);
  font-size: .9375rem;
}
.woocommerce-error { border-left-color: var(--slc-danger); }
.woocommerce-message { border-left-color: var(--slc-success); }
.woocommerce-error li + li { margin-top: .375rem; }
.woocommerce-notices-wrapper:empty { display: none; }

/* ------------------------------------------------------------------
   Formularios

   Um desenho para os dois mundos: .slc-form__field e a nossa marcacao,
   .form-row e a do WooCommerce. As duas caem na mesma regra para que o
   campo de endereco e o campo de senha tenham a mesma altura.
   ------------------------------------------------------------------ */

.slc-form { display: grid; gap: 1rem; }

.slc-form__field,
.woocommerce-account .form-row {
  display: grid; gap: .375rem; margin: 0;
}

.slc-form__field label,
.woocommerce-account .form-row label {
  font-size: .8125rem; font-weight: 600; color: var(--slc-ink-700);
}

.slc-form__field .required,
.woocommerce-account .form-row .required { color: var(--slc-danger); text-decoration: none; }

.slc-form input[type="text"],
.slc-form input[type="email"],
.slc-form input[type="tel"],
.slc-form input[type="password"],
.woocommerce-account .input-text,
.woocommerce-account .form-row select,
.woocommerce-account .form-row input[type="text"],
.woocommerce-account .form-row input[type="email"],
.woocommerce-account .form-row input[type="tel"],
.woocommerce-account .form-row input[type="password"] {
  width: 100%; min-height: 46px; padding: .625rem .75rem;
  border: 1.5px solid var(--slc-ink-300); border-radius: var(--slc-radius);
  background: var(--slc-surface); color: var(--slc-ink-900);
  font: inherit; font-size: .9375rem;
}

.slc-form input:focus,
.woocommerce-account .input-text:focus { border-color: var(--slc-ink-500); }

.slc-form__hint,
.woocommerce-account .form-row span em,
.woocommerce-account .form-row small {
  font-size: .75rem; color: var(--slc-ink-500); font-style: normal;
}

/* Duas colunas quando a tela permite. Abaixo disso um campo por linha:
   nome e sobrenome lado a lado em 360px viram dois campos apertados. */
.slc-form__row--split { display: grid; gap: 1rem; }

@media (min-width: 560px) {
  .slc-form__row--split { grid-template-columns: 1fr 1fr; }
}

.slc-form__group { border: 0; margin: 0; padding: 0; display: grid; gap: 1rem; }
.slc-form__legend {
  padding: 0; font-size: .9375rem; font-weight: 700;
  color: var(--slc-ink-900);
}

.slc-form__note {
  display: flex; align-items: flex-start; gap: .5rem; margin: 0;
  padding: .75rem .875rem; border-radius: var(--slc-radius);
  background: var(--slc-ink-100); color: var(--slc-ink-500); font-size: .8125rem;
}
.slc-form__note svg { flex: 0 0 auto; margin-top: .125rem; }

.slc-form__aside {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .5rem 1rem;
}

.slc-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 400; }
.slc-check input { width: 18px; height: 18px; accent-color: var(--slc-ink-900); }

.slc-form__submit { margin: 0; }

/* Mostrar/ocultar senha. O botao vem do woocommerce.js; sem o CSS do
   plugin ele chegaria aqui como um quadrado vazio. */
.password-input { position: relative; display: block; }
.password-input input { padding-inline-end: 2.75rem !important; }

.show-password-input {
  position: absolute; inset-inline-end: .5rem; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--slc-radius-btn);
  background: transparent; cursor: pointer;
}
.show-password-input::after {
  content: ""; display: block; width: 20px; height: 20px; margin: 0 auto;
  background: var(--slc-ink-500);
  -webkit-mask: var(--slc-icon-eye) center / contain no-repeat;
  mask: var(--slc-icon-eye) center / contain no-repeat;
}
.show-password-input.display-password::after { background: var(--slc-ink-900); }
.show-password-input:hover::after { background: var(--slc-ink-900); }

/* Medidor de forca da senha, tambem desenhado pelo script do WooCommerce. */
.woocommerce-password-strength {
  padding: .375rem .625rem; border-radius: var(--slc-radius-btn);
  font-size: .75rem; font-weight: 600; text-align: center;
  background: var(--slc-ink-100); color: var(--slc-ink-500);
}
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad { background: #fdecec; color: var(--slc-danger); }
.woocommerce-password-strength.good { background: var(--slc-yellow-soft); color: #8a6100; }
.woocommerce-password-strength.strong { background: #e6f5ec; color: var(--slc-success); }
.woocommerce-password-hint { font-size: .75rem; color: var(--slc-ink-500); }

/* ------------------------------------------------------------------
   Entrar e criar conta
   ------------------------------------------------------------------ */

.slc-auth {
  display: grid; gap: 1.25rem;
  max-width: 62rem; margin-inline: auto; padding-block: .5rem 2rem;
}

@media (min-width: 900px) {
  .slc-auth { grid-template-columns: minmax(0, 1fr) 19rem; align-items: start; }
  .slc-auth--single { grid-template-columns: minmax(0, 28rem); justify-content: center; }
}

.slc-auth--single { max-width: 32rem; }

.slc-auth__card {
  background: var(--slc-surface); border: 1px solid var(--slc-line);
  border-radius: var(--slc-radius-lg); box-shadow: var(--slc-shadow);
  overflow: hidden;
}

/* Abas: duas metades exatas, com a ativa marcada por baixo. */
.slc-auth__tabs { display: grid; grid-template-columns: 1fr 1fr; }

.slc-auth__tab {
  min-height: 52px; padding: .875rem .75rem;
  border: 0; border-bottom: 2px solid var(--slc-line);
  background: var(--slc-ink-100); color: var(--slc-ink-500);
  font-size: .9375rem; font-weight: 600; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.slc-auth__tab:hover { color: var(--slc-ink-900); }
.slc-auth__tab[aria-selected="true"] {
  background: var(--slc-surface); color: var(--slc-ink-900);
  border-bottom-color: var(--slc-yellow);
}

.slc-auth__panel { padding: 1.5rem 1.25rem; }

@media (min-width: 560px) {
  .slc-auth__panel { padding: 1.75rem; }
}

.slc-auth__title { margin: 0 0 1rem; font-size: 1.25rem; }
.slc-auth__lead { margin: 0; color: var(--slc-ink-500); font-size: .875rem; }

.slc-auth__link { font-size: .875rem; color: var(--slc-ink-500); }
.slc-auth__link:hover { color: var(--slc-ink-900); }

.slc-auth__switch {
  margin: 1.25rem 0 0; padding-top: 1.125rem;
  border-top: 1px solid var(--slc-line);
  font-size: .875rem; color: var(--slc-ink-500); text-align: center;
}
.slc-auth__switch a { font-weight: 600; color: var(--slc-ink-900); }

/* Coluna das vantagens */
.slc-auth__side {
  background: var(--slc-surface); border: 1px solid var(--slc-line);
  border-radius: var(--slc-radius-lg); padding: 1.25rem;
}
.slc-auth__side-title { margin: 0 0 1rem; font-size: 1rem; }

.slc-auth__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.slc-auth__perk { display: flex; gap: .75rem; font-size: .8125rem; }
.slc-auth__perk strong { display: block; font-size: .875rem; color: var(--slc-ink-900); }
.slc-auth__perk span span { color: var(--slc-ink-500); }

.slc-auth__perk-icon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--slc-pill);
  background: var(--slc-yellow-soft); color: #8a6100;
}

.slc-auth__guest {
  display: flex; gap: .5rem; margin: 1.25rem 0 0; padding-top: 1rem;
  border-top: 1px solid var(--slc-line);
  font-size: .8125rem; color: var(--slc-ink-500);
}
.slc-auth__guest svg { flex: 0 0 auto; color: var(--slc-success); margin-top: .125rem; }
.slc-auth__guest a { font-weight: 600; color: var(--slc-ink-900); white-space: nowrap; }

.slc-auth__help {
  display: flex; align-items: center; gap: .5rem; margin-top: 1rem;
  font-size: .8125rem; font-weight: 600; text-decoration: none;
  color: var(--slc-ink-900);
}
.slc-auth__help:hover { text-decoration: underline; }

/* ------------------------------------------------------------------
   Area logada
   ------------------------------------------------------------------ */

.slc-account { display: grid; gap: 1.25rem; padding-block: .5rem 2rem; align-items: start; }

@media (min-width: 1024px) {
  .slc-account { grid-template-columns: 17rem minmax(0, 1fr); }
}

.slc-account__aside {
  background: var(--slc-surface); border: 1px solid var(--slc-line);
  border-radius: var(--slc-radius-lg); overflow: hidden;
}

.slc-account__me {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem; border-bottom: 1px solid var(--slc-line);
}
.slc-account__avatar {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--slc-pill);
  background: var(--slc-yellow); color: var(--slc-accent-ink);
  font-weight: 700; font-size: .9375rem;
}
.slc-account__me-text { min-width: 0; display: grid; }
.slc-account__me-name { font-size: .9375rem; }
.slc-account__me-mail {
  font-size: .75rem; color: var(--slc-ink-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* No celular o menu rola de lado: sete itens empilhados empurrariam o
   conteudo da conta para fora da primeira tela. */
.slc-account__nav ul {
  display: flex; gap: .375rem; list-style: none; margin: 0;
  padding: .625rem; overflow-x: auto; scrollbar-width: none;
}
.slc-account__nav ul::-webkit-scrollbar { display: none; }

.slc-account__nav a {
  display: flex; align-items: center; gap: .5rem; white-space: nowrap;
  padding: .625rem .75rem; border-radius: var(--slc-radius);
  color: var(--slc-ink-500); font-size: .875rem; font-weight: 600;
  text-decoration: none;
}
.slc-account__nav a:hover { background: var(--slc-ink-100); color: var(--slc-ink-900); }
.slc-account__nav svg { flex: 0 0 auto; }

.slc-account__nav .is-active a {
  background: var(--slc-ink-900); color: #fff;
}
.slc-account__nav .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--slc-danger); }
.slc-account__nav .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  background: #fdecec; color: var(--slc-danger);
}

@media (min-width: 1024px) {
  .slc-account__nav ul { display: grid; gap: .125rem; overflow: visible; }
}

.slc-account__content {
  background: var(--slc-surface); border: 1px solid var(--slc-line);
  border-radius: var(--slc-radius-lg); padding: 1.25rem;
  min-width: 0;
}

@media (min-width: 560px) {
  .slc-account__content { padding: 1.75rem; }
}

.slc-account__title { margin: 0 0 .75rem; font-size: 1.25rem; }
.slc-account__lead { margin: 0 0 1.5rem; color: var(--slc-ink-500); font-size: .875rem; }

/* ------------------------------------------------------------------
   Visao geral
   ------------------------------------------------------------------ */

.slc-dash { display: grid; gap: 1.75rem; }

.slc-dash__head { display: grid; gap: .25rem; }
.slc-dash__hello { margin: 0; font-size: 1.375rem; }
.slc-dash__sub { margin: 0; font-size: .875rem; color: var(--slc-ink-500); }
.slc-dash__logout { margin-inline-start: .5rem; font-weight: 600; color: var(--slc-ink-900); }

.slc-dash__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .75rem; list-style: none; margin: 0; padding: 0;
}
.slc-dash__stat {
  display: grid; gap: .125rem; padding: .875rem 1rem;
  border: 1px solid var(--slc-line); border-radius: var(--slc-radius);
  background: var(--slc-ink-100);
}
.slc-dash__stat-label { font-size: .75rem; color: var(--slc-ink-500); }
.slc-dash__stat-value { font-size: 1.125rem; }
.slc-dash__stat-value .amount { font-size: inherit; }

.slc-dash__section { display: grid; gap: .875rem; }
.slc-dash__section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.slc-dash__section-head h3 { margin: 0; font-size: 1rem; }

.slc-dash__more {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .8125rem; font-weight: 600; text-decoration: none;
  color: var(--slc-ink-500); white-space: nowrap;
}
.slc-dash__more:hover { color: var(--slc-ink-900); }

.slc-dash__links {
  display: grid; gap: .5rem; list-style: none; margin: 0; padding: 0;
}

@media (min-width: 720px) {
  .slc-dash__links { grid-template-columns: 1fr 1fr; }
}

.slc-dash__link {
  display: flex; align-items: center; gap: .75rem; height: 100%;
  padding: .875rem 1rem; border: 1px solid var(--slc-line);
  border-radius: var(--slc-radius); background: var(--slc-surface);
  text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.slc-dash__link:hover { border-color: var(--slc-ink-300); box-shadow: var(--slc-shadow); }
.slc-dash__link strong { display: block; font-size: .875rem; }
.slc-dash__link span span { font-size: .75rem; color: var(--slc-ink-500); }

.slc-dash__link-icon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--slc-pill);
  background: var(--slc-ink-100); color: var(--slc-ink-700);
}
.slc-dash__link-go { margin-inline-start: auto; color: var(--slc-ink-300); }

.slc-dash__empty {
  display: grid; justify-items: center; gap: .5rem; text-align: center;
  padding: 2.25rem 1.25rem; border: 1px dashed var(--slc-ink-300);
  border-radius: var(--slc-radius-lg); background: var(--slc-ink-100);
}
.slc-dash__empty svg { color: var(--slc-ink-300); }
.slc-dash__empty h3 { margin: 0; font-size: 1.0625rem; }
.slc-dash__empty p { margin: 0; max-width: 42ch; color: var(--slc-ink-500); font-size: .875rem; }
.slc-dash__empty .slc-btn { margin-top: .5rem; }

/* ------------------------------------------------------------------
   Pedidos
   ------------------------------------------------------------------ */

.slc-orderlist { display: grid; gap: .75rem; list-style: none; margin: 0; padding: 0; }

.slc-orderlist__item {
  display: grid; gap: .75rem; padding: 1rem;
  border: 1px solid var(--slc-line); border-radius: var(--slc-radius);
  background: var(--slc-surface);
}

.slc-orderlist__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.slc-orderlist__number { font-weight: 700; font-size: .9375rem; text-decoration: none; }
.slc-orderlist__number:hover { text-decoration: underline; }

.slc-orderlist__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .375rem;
  margin: 0; font-size: .8125rem; color: var(--slc-ink-500);
}
.slc-orderlist__meta strong { color: var(--slc-ink-900); }
.slc-orderlist__meta .amount { font-size: inherit; }

.slc-orderlist__thumbs { display: flex; gap: .375rem; list-style: none; margin: 0; padding: 0; }
.slc-orderlist__thumbs li {
  width: 48px; height: 48px; border: 1px solid var(--slc-line);
  border-radius: var(--slc-radius-btn); background: var(--slc-surface); overflow: hidden;
}
.slc-orderlist__thumbs img { width: 100%; height: 100%; object-fit: contain; }

.slc-orderlist__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.slc-orderlist__actions .slc-btn { min-height: 38px; padding-inline: .875rem; font-size: .8125rem; }

.slc-orderlist__pages { display: flex; gap: .5rem; justify-content: space-between; margin-top: 1.25rem; }

/* Selo de status */
.slc-badge {
  display: inline-flex; align-items: center;
  padding: .1875rem .625rem; border-radius: var(--slc-pill);
  font-size: .75rem; font-weight: 600; line-height: 1.4;
  background: var(--slc-ink-100); color: var(--slc-ink-500);
}
.slc-badge--ok { background: #e6f5ec; color: var(--slc-success); }
.slc-badge--go { background: #e8f1fe; color: #1a5fc4; }
.slc-badge--wait { background: var(--slc-yellow-soft); color: #8a6100; }
.slc-badge--off { background: #fdecec; color: var(--slc-danger); }

/* ------------------------------------------------------------------
   Enderecos
   ------------------------------------------------------------------ */

.slc-addresses { display: grid; gap: .875rem; }

@media (min-width: 720px) {
  .slc-addresses { grid-template-columns: 1fr 1fr; }
}

.slc-addresses__card {
  display: grid; align-content: start; gap: .75rem; padding: 1.125rem;
  border: 1px solid var(--slc-line); border-radius: var(--slc-radius);
  background: var(--slc-surface);
}
.slc-addresses__card.is-empty { border-style: dashed; background: var(--slc-ink-100); }

.slc-addresses__head { display: flex; align-items: center; gap: .5rem; }
.slc-addresses__head h3 { margin: 0; font-size: .9375rem; }
.slc-addresses__icon { display: grid; place-items: center; color: var(--slc-ink-500); }

.slc-addresses__body { margin: 0; font-style: normal; font-size: .875rem; color: var(--slc-ink-500); line-height: 1.6; }
.slc-addresses__edit { justify-self: start; min-height: 38px; padding-inline: .875rem; font-size: .8125rem; }

/* ------------------------------------------------------------------
   Telas que seguem com a marcacao do WooCommerce

   Ver pedido, formas de pagamento e downloads continuam originais. O que
   segue e o minimo para elas nao chegarem sem estilo nenhum, ja que o
   tema dispensa o CSS do plugin.
   ------------------------------------------------------------------ */

.woocommerce-account h2,
.woocommerce-account h3 { font-size: 1.0625rem; }

.woocommerce-account .shop_table,
.woocommerce-account .woocommerce-table {
  width: 100%; border-collapse: collapse; font-size: .875rem;
  margin-bottom: 1.5rem;
}
.woocommerce-account .shop_table th,
.woocommerce-account .shop_table td {
  padding: .75rem .625rem; text-align: start;
  border-bottom: 1px solid var(--slc-line); vertical-align: top;
}
.woocommerce-account .shop_table th { font-size: .75rem; color: var(--slc-ink-500); text-transform: uppercase; letter-spacing: .02em; }
.woocommerce-account .shop_table tfoot th { text-transform: none; font-size: .875rem; color: var(--slc-ink-900); }

/* Tabela nao cabe em 360px: cada linha vira um bloco de rotulo e valor,
   usando o data-title que o WooCommerce ja escreve em cada celula. */
@media (max-width: 719px) {
  .woocommerce-account .shop_table_responsive thead { display: none; }
  .woocommerce-account .shop_table_responsive tr {
    display: grid; gap: .25rem; padding: .875rem 0;
    border-bottom: 1px solid var(--slc-line);
  }
  .woocommerce-account .shop_table_responsive td,
  .woocommerce-account .shop_table_responsive th {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .125rem 0; border: 0;
  }
  .woocommerce-account .shop_table_responsive td::before,
  .woocommerce-account .shop_table_responsive th::before {
    content: attr(data-title); font-size: .75rem; color: var(--slc-ink-500);
  }
  .woocommerce-account .shop_table_responsive td:empty { display: none; }
}

.woocommerce-account .woocommerce-customer-details,
.woocommerce-account .woocommerce-order-details { margin-bottom: 1.5rem; }

.woocommerce-account .woocommerce-column__title { margin-bottom: .5rem; }

.woocommerce-account address { font-style: normal; font-size: .875rem; color: var(--slc-ink-500); line-height: 1.6; }

.woocommerce-account .woocommerce-order-downloads,
.woocommerce-account .woocommerce-MyAccount-downloads { margin-bottom: 1.5rem; }

/* Botoes que sobraram com a classe do WooCommerce. */
.woocommerce-account .woocommerce-Button:not(.slc-btn),
.woocommerce-account .button:not(.slc-btn) {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: .5rem 1.125rem;
  border: 1.5px solid transparent; border-radius: var(--slc-pill);
  background: var(--slc-ink-900); color: #fff;
  font-size: .875rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.woocommerce-account .woocommerce-Button:not(.slc-btn):hover,
.woocommerce-account .button:not(.slc-btn):hover { background: var(--slc-ink-700); }

/* Formulario de endereco: os campos do WooCommerce em duas colunas. */
.woocommerce-address-fields__field-wrapper { display: grid; gap: 1rem; margin-bottom: 1.25rem; }

@media (min-width: 560px) {
  .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr 1fr; }
  .woocommerce-address-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; }
}

.woocommerce-address-fields .clear,
.woocommerce-account form .clear { display: none; }

/* selectWoo, quando o WooCommerce o carrega no seletor de estado. */
.woocommerce-account .select2-container--default .select2-selection--single {
  height: 46px; border: 1.5px solid var(--slc-ink-300); border-radius: var(--slc-radius);
}
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px; padding-inline-start: .75rem; color: var(--slc-ink-900);
}
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; }