/* ============================================================
   ENTRAR / CRIAR CONTA — logged-out My Account (form-login).
   Port of references/.../lib/conta.css. Builds on the child
   theme tokens + .lbs-btn / .ct-field, and lbs-flow.css for
   .ce-seg / .flow-check / .flow-link.
   Rounded "Apple" direction (styles.css §ROUNDED LAYER): capsule
   controls, soft surfaces — radius tokens are scoped locally to
   .conta-page since they live on .co-page/.flow-account elsewhere.
   ============================================================ */

/* The 100vw full-bleed below overflows by the vertical scrollbar's width
   (vw includes the scrollbar) — clip it on the scroll container so no
   horizontal scrollbar appears. Scoped to the conta page via :has(). */
html:has(.conta-page) { overflow-x: clip; }

.conta-page {
  --radius-input:   14px;
  --radius-card:    20px;
  --radius-surface: 28px;
  --radius-btn:     9999px;
  background: var(--lbs-bone);
  padding: 56px 40px 88px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Full-bleed the bone canvas: break out of the WP/Elementor content
     wrapper so the page background spans the viewport edge-to-edge.
     (Anchored to the page-centred content column — see CLAUDE.md bleed note.) */
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.conta-shell {
  display: grid;
  grid-template-columns: 1.04fr 1fr;
  width: 100%;
  max-width: 1360px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Rounded layer on conta controls (mirrors lbs-flow.css for .co-page) */
.conta-page .lbs-btn { border-radius: var(--radius-btn); }
.conta-page .ct-field input,
.conta-page .ct-field select,
.conta-page .ct-field textarea { border-radius: var(--radius-input); }
.conta-page .conta-note { border-radius: var(--radius-card); }
/* The segmented control ships square (checkout-empresa.css) — round it here
   since this page isn't under .co-page (which carries the flow's rounded layer). */
.conta-page .ce-seg { border-radius: var(--radius-card); overflow: hidden; }

/* The child theme (style.css) forces border-radius:0 on non-.lbs-btn buttons
   ("sharp corners site-wide") and reset.css adds a #CC3366 border — both load
   after this sheet at (0,1,1)/(0,1,0). The conta page is ROUNDED, so re-assert
   the pill radius + kill the red border at (0,2,x). */
.conta-page .conta-tabs button { border-radius: 9999px; }
/* (0,3,0) — the neutralizer matches via `[type="button"]:not(...)` at (0,2,0)
   and loads last, so a plain `.conta-page .conta-pw__toggle` (0,2,0) ties+loses;
   the .conta-pw__wrap ancestor breaks the tie. */
.conta-page .conta-pw__wrap .conta-pw__toggle { border: none; border-radius: 9999px; }

/* Hello Elementor reset.css paints button:hover/:focus #CC3366. The ce-seg is
   handled in lbs-flow.css; neutralise the other conta buttons here (they have
   transparent backgrounds the reset would otherwise override). */
.conta-page .conta-tabs button:hover,
.conta-page .conta-tabs button:focus { background: transparent; }
.conta-page .conta-tabs button[data-active="true"]:hover,
.conta-page .conta-tabs button[data-active="true"]:focus { background: var(--lbs-navy); }
.conta-page .conta-pw__toggle:hover,
.conta-page .conta-pw__toggle:focus { background: none; }

/* ---------- Brand aside (navy statement) ---------- */
.conta-aside {
  position: relative;
  background: var(--lbs-navy);
  color: #fff;
  padding: 52px 48px 44px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.conta-aside::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(30deg, transparent 0 26px, rgba(127,208,225,0.10) 26px 27px);
  pointer-events: none;
}
.conta-aside > * { position: relative; z-index: 1; }
/* .conta-page prefix (0,2,0) beats WooCommerce's `.woocommerce img { height:auto }`
   (0,1,1), which otherwise lets the logo render at its intrinsic ~87px.
   align-self:flex-start stops the flex column from stretching the img's WIDTH
   to the full aside (which, with a pinned height, distorted the aspect ratio). */
.conta-page .conta-aside__logo { height: 30px; width: auto; max-width: 100%; align-self: flex-start; margin-bottom: 42px; }
.conta-aside__eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--lbs-cyan-300); margin-bottom: 18px;
}
.conta-aside__title {
  font-family: var(--font-sans);
  font-weight: 900; text-transform: uppercase; letter-spacing: 0.005em;
  font-size: clamp(30px, 3vw, 40px); line-height: 1.04; margin: 0 0 34px;
  text-wrap: balance;
  color: #fff;
}
.conta-benefits {
  list-style: none; margin: 0 0 auto; padding: 0;
  display: flex; flex-direction: column; gap: 18px;
}
.conta-benefits li {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.86);
}
.conta-benefits li svg { flex: none; color: var(--lbs-cyan-300); margin-top: 1px; }
.conta-secure {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.64);
}
.conta-secure svg { flex: none; color: rgba(255,255,255,0.5); margin-top: 1px; }

/* ---------- Main form column ---------- */
.conta-main { padding: 44px 48px 46px; display: flex; flex-direction: column; min-width: 0; }

.conta-tabs {
  display: inline-flex; gap: 4px; padding: 5px;
  background: var(--lbs-bone); border: 1px solid var(--color-border);
  border-radius: 9999px; margin-bottom: 24px; align-self: flex-start;
}
.conta-tabs button {
  appearance: none; border: none; cursor: pointer; font-family: var(--font-sans);
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em;
  padding: 9px 24px; border-radius: 9999px; background: transparent; color: var(--lbs-ink-600);
  white-space: nowrap;
  transition: color 180ms var(--ease-out), background 180ms var(--ease-out);
}
.conta-tabs button:hover { color: var(--lbs-navy); }
.conta-tabs button[data-active="true"] { background: var(--lbs-navy); color: #fff; box-shadow: var(--shadow-sm); }

.conta-main__sub {
  font-size: 14.5px; line-height: 1.55; color: var(--lbs-ink-600);
  margin: 0 0 26px; max-width: 46ch;
}

.conta-field-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lbs-ink-600); margin-bottom: 11px;
}

/* Account-type chooser reuses .ce-seg from lbs-flow.css */
.conta-typeseg { margin-bottom: 22px; }

.conta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Password field with show/hide */
.conta-pw__wrap { position: relative; display: flex; }
.conta-pw__wrap input { width: 100%; padding-right: 46px; }
.conta-pw__toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--lbs-ink-400); border-radius: 9999px;
  transition: color 160ms var(--ease-out);
}
.conta-pw__toggle:hover { color: var(--lbs-navy); }

.conta-row2 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 14px 0 22px; flex-wrap: wrap;
}

.conta-note {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--lbs-bone); border: 1px solid var(--color-border);
  padding: 13px 15px; font-size: 12.5px; line-height: 1.5; color: var(--lbs-ink-600); margin: 2px 0 18px;
}
.conta-note svg { flex: none; color: var(--lbs-navy); margin-top: 1px; }

.conta-foot { font-size: 13.5px; color: var(--lbs-ink-600); margin-top: 22px; text-align: center; }
.conta-foot a { color: var(--accent-hover); font-weight: 700; cursor: pointer; }
.conta-foot a:hover { text-decoration: underline; text-underline-offset: 2px; }

.conta-form .ct-field { margin-bottom: 14px; }

/* Tab panels + account-type field groups are toggled by lbs-conta.js */
.conta-panel[hidden],
.conta-acctfields[hidden] { display: none; }

/* WooCommerce notices inside the form column */
.conta-main .woocommerce-notices-wrapper,
.conta-main .woocommerce-error,
.conta-main .woocommerce-message,
.conta-main .woocommerce-info {
  margin: 0 0 18px;
}
.conta-main .woocommerce-error,
.conta-main .woocommerce-message,
.conta-main .woocommerce-info {
  list-style: none; padding: 12px 16px; border-radius: var(--radius-card);
  font-size: 13.5px; line-height: 1.5; border: 1px solid var(--color-border);
}
.conta-main .woocommerce-error { background: #FBEEEC; border-color: #E7C3BC; color: #8C2A1B; }
.conta-main .woocommerce-message,
.conta-main .woocommerce-info { background: var(--lbs-bone); color: var(--lbs-ink-600); }
.conta-main .woocommerce-error li,
.conta-main .woocommerce-message li { list-style: none; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .conta-page { padding: 32px 20px 56px; }
  .conta-shell { grid-template-columns: 1fr; max-width: 520px; }
  .conta-aside { padding: 40px 32px 36px; }
  .conta-aside__logo { margin-bottom: 30px; }
  .conta-aside__title { font-size: 28px; margin-bottom: 26px; }
  .conta-secure { margin-top: 30px; }
  .conta-main { padding: 34px 30px 38px; }
}
@media (max-width: 480px) {
  .conta-row { grid-template-columns: 1fr; }
}