/* =====================================================================
   lpen-account.css — the account surface, /account-new/ (page ?)
   Source file. Readable, unscoped-looking, but see the rule below.

   EVERY SELECTOR MUST CONTAIN `#lpen-acct`.
   ---------------------------------------------------------------------
   `lpen-assets/` is enqueued site-wide (§18j), so a stray `.woocommerce`
   rule here would repaint cart, checkout, order emails and the whole
   store. There is no scoper in build_account.py on purpose: prefixing is
   a transformation you have to trust, an id anchor is a fact you can
   grep. `assert_anchored()` in the builder fails the build on any
   selector that does not carry the anchor, including inside @media.

   Section ids, all set from the builder:
     #lpen-acct-signedout   navy band, signed out only
     #lpen-acct-member      welcome + shortcuts, signed in only
     #lpen-acct-panel       the band holding the WooCommerce widget
     #lpen-acct-woo         the card the widget sits in
     #lpen-acct-aside       the column beside the sign-in form
     #lpen-acct-help        help band, both states
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. STATE SWITCHING

   Two mechanisms, deliberately.

   (a) Elementor `e_display_conditions` on #lpen-acct-member, copied
       verbatim from the format already live on page 1336. That one is
       server side, so a signed-out visitor is never sent the member
       markup and the FastCGI/Cloudflare cached copy of this page holds
       nothing personal.

   (b) These rules, keyed on WordPress core's own `logged-in` body class.
       They are the guarantee. If the Elementor condition is ever cleared
       by hand in the editor, or Pro is deactivated, the page still shows
       the right half to the right person.

   Note there is exactly ONE woocommerce-my-account widget on the page.
   It renders the login form when signed out and the account tabs when
   signed in, by itself. Two conditioned copies would put two `#username`
   inputs in one document.
   --------------------------------------------------------------------- */
body.logged-in #lpen-acct-signedout,
body.logged-in #lpen-acct-aside,
body.logged-in #lpen-acct-formhead {
  display: none !important;
}

body:not(.logged-in) #lpen-acct-member {
  display: none !important;
}

/* ---------------------------------------------------------------------
   2. PANEL LAYOUT
   Signed out the form is a column beside the aside; signed in the aside
   is gone and the tabs take the full measure.
   --------------------------------------------------------------------- */
#lpen-acct-row {
  align-items: flex-start;
}

#lpen-acct-woo {
  flex: 1 1 460px;
  min-width: 0;
}

#lpen-acct-aside {
  flex: 1 1 320px;
  max-width: 400px;
  min-width: 0;
}

body.logged-in #lpen-acct-woo {
  flex-basis: 100%;
}

@media (max-width: 880px) {
  #lpen-acct-woo,
  #lpen-acct-aside {
    flex: 1 1 100%;
    max-width: none;
  }
}

/* ---------------------------------------------------------------------
   3. THE WOOCOMMERCE WIDGET — SHARED RESET

   WooCommerce ships its own opinions on this markup and the theme
   underlines every <a> (§18i). Reset once, then style up.
   --------------------------------------------------------------------- */
#lpen-acct-woo .woocommerce {
  color: #111820;
  font-size: 16px;
  line-height: 26px;
}

#lpen-acct-woo .woocommerce a {
  color: #0F5C96;
}

#lpen-acct-woo .woocommerce a:hover {
  color: #0B4465;
}

#lpen-acct-woo .woocommerce p {
  margin: 0 0 14px;
}

#lpen-acct-woo .woocommerce p:last-child {
  margin-bottom: 0;
}

/* Focus is specified at token level so AA is the default outcome (§1.5 of
   the design system). WooCommerce sets `box-shadow:none` on links, hence
   the !important — same fight §18j documents on LearnDash. */
#lpen-acct-woo :focus-visible {
  outline: 2px solid #0F5C96 !important;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Buttons: WooCommerce's own, plus the ones inside forms. Not Elementor
   buttons, so they miss the underline fix and every token. */
#lpen-acct-woo .woocommerce .button,
#lpen-acct-woo .woocommerce button.button,
#lpen-acct-woo .woocommerce input.button,
#lpen-acct-woo .woocommerce .woocommerce-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #0F5C96;
  color: #FFFFFF;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

#lpen-acct-woo .woocommerce .button:hover,
#lpen-acct-woo .woocommerce button.button:hover,
#lpen-acct-woo .woocommerce input.button:hover,
#lpen-acct-woo .woocommerce .woocommerce-Button:hover {
  background: #0B4465;
  color: #FFFFFF;
}

/* The secondary greys WooCommerce uses for "View" and "Cancel". */
#lpen-acct-woo .woocommerce .woocommerce-button.view,
#lpen-acct-woo .woocommerce .woocommerce-button.cancel {
  background: #FFFFFF;
  color: #0F5C96;
  border-color: #CFD6DD;
  padding: 8px 16px;
  font-size: 15px;
}

#lpen-acct-woo .woocommerce .woocommerce-button.view:hover,
#lpen-acct-woo .woocommerce .woocommerce-button.cancel:hover {
  background: #0F5C96;
  color: #FFFFFF;
  border-color: #0F5C96;
}

/* Fields. One rule, both states. */
#lpen-acct-woo .woocommerce .input-text,
#lpen-acct-woo .woocommerce input[type="text"],
#lpen-acct-woo .woocommerce input[type="email"],
#lpen-acct-woo .woocommerce input[type="tel"],
#lpen-acct-woo .woocommerce input[type="password"],
#lpen-acct-woo .woocommerce select,
#lpen-acct-woo .woocommerce textarea {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid #CFD6DD;
  border-radius: 6px;
  background: #FFFFFF;
  color: #111820;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
}

#lpen-acct-woo .woocommerce .input-text:focus,
#lpen-acct-woo .woocommerce select:focus,
#lpen-acct-woo .woocommerce textarea:focus {
  border-color: #0F5C96;
}

#lpen-acct-woo .woocommerce label {
  display: block;
  margin: 0 0 6px;
  color: #022E48;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

#lpen-acct-woo .woocommerce .required {
  color: #B3261E;
  border: 0;
  text-decoration: none;
}

#lpen-acct-woo .woocommerce .form-row {
  margin: 0 0 18px;
  padding: 0;
}

#lpen-acct-woo .woocommerce .form-row:last-child {
  margin-bottom: 0;
}

/* Notices. WooCommerce's defaults are a purple bar with a tick font icon. */
#lpen-acct-woo .woocommerce .woocommerce-info,
#lpen-acct-woo .woocommerce .woocommerce-message,
#lpen-acct-woo .woocommerce .woocommerce-error {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid #C9DDE8;
  border-left-width: 4px;
  border-radius: 6px;
  background: #F3F7F9;
  color: #111820;
  list-style: none;
  font-size: 15px;
  line-height: 23px;
}

#lpen-acct-woo .woocommerce .woocommerce-info::before,
#lpen-acct-woo .woocommerce .woocommerce-message::before,
#lpen-acct-woo .woocommerce .woocommerce-error::before {
  content: none;
}

#lpen-acct-woo .woocommerce .woocommerce-message {
  border-color: #B5D8C1;
  background: #EAF5EE;
}

#lpen-acct-woo .woocommerce .woocommerce-error {
  border-color: #E8B4AE;
  background: #FBEEEC;
}

/* ---------------------------------------------------------------------
   4. SIGNED OUT — THE LOGIN FORM

   The widget renders its own `<h2>Login</h2>`. It is hidden and replaced
   by a real heading widget (#lpen-acct-formhead) so the copy is sentence
   case, on token, and editable in the Elementor UI. WooCommerce's string
   is translatable and cannot be reached from here.
   --------------------------------------------------------------------- */
#lpen-acct-woo .woocommerce > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#lpen-acct-woo .woocommerce form.login,
#lpen-acct-woo .woocommerce form.register {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

#lpen-acct-woo .woocommerce .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: #4A5666;
  font-size: 15px;
  font-weight: 400;
}

#lpen-acct-woo .woocommerce .woocommerce-form-login__rememberme input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #0F5C96;
}

#lpen-acct-woo .woocommerce .woocommerce-form-login__submit {
  width: 100%;
  padding: 13px 22px;
  font-size: 17px;
}

#lpen-acct-woo .woocommerce .woocommerce-LostPassword {
  margin: 16px 0 0;
  font-size: 15px;
}

/* ---------------------------------------------------------------------
   5. SIGNED IN — THE ACCOUNT TABS

   Elementor's `e-my-account-tabs-vertical` still renders WooCommerce's
   own `.woocommerce-MyAccount-navigation` and `.woocommerce-MyAccount-
   content`, so those are what is targeted here.

   ⚠️ Written against the class vocabulary, not against a rendered signed
   in page — see README.md. Re-check it while signed in as a customer.
   --------------------------------------------------------------------- */
#lpen-acct-woo .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The <li> carries Elementor's own border and fill for the current tab,
   which draws a second box around the one this file paints. Neutralised so
   there is exactly one active affordance. */
#lpen-acct-woo .woocommerce-MyAccount-navigation li,
#lpen-acct-woo .woocommerce-MyAccount-navigation li.is-active {
  margin: 0 0 2px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  list-style: none;
}

/* Elementor's vertical-tabs default paints EVERY item #F9FAFA, which
   makes the whole list read as selected and leaves the current tab with
   nothing to distinguish it. Measured on the rendered draft, 2026-08-23. */
#lpen-acct-woo .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 11px 14px;
  border-radius: 6px;
  background: transparent;
  color: #022E48;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

#lpen-acct-woo .woocommerce-MyAccount-navigation li a:hover {
  background: #F3F7F9;
  color: #0F5C96;
}

#lpen-acct-woo .woocommerce-MyAccount-navigation li.is-active a,
#lpen-acct-woo .woocommerce-MyAccount-navigation li.is-active a:hover {
  background: #E5EEF3;
  color: #022E48;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #0F5C96;
}

#lpen-acct-woo .woocommerce-MyAccount-content {
  min-width: 0;
}

#lpen-acct-woo .woocommerce-MyAccount-content > h2,
#lpen-acct-woo .woocommerce-MyAccount-content > h3 {
  margin: 0 0 14px;
  color: #022E48;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
}

/* Tables: orders, downloads, order details. WooCommerce's own styles put
   a light border on every cell and let long rows overflow the card. */
#lpen-acct-woo .woocommerce table.shop_table {
  width: 100%;
  margin: 0;
  border: 1px solid #CFD6DD;
  border-collapse: collapse;
  border-radius: 8px;
  font-size: 15px;
}

#lpen-acct-woo .woocommerce table.shop_table th,
#lpen-acct-woo .woocommerce table.shop_table td {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid #E3E8ED;
  text-align: left;
  vertical-align: middle;
}

#lpen-acct-woo .woocommerce table.shop_table thead th {
  background: #F6F8FA;
  color: #022E48;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#lpen-acct-woo .woocommerce table.shop_table tbody tr:last-child td {
  border-bottom: 0;
}

#lpen-acct-woo .woocommerce table.shop_table tbody tr:hover td {
  background: #F9FBFC;
}

/* A table wider than the card scrolls inside it rather than pushing the
   page sideways. */
#lpen-acct-woo .woocommerce-MyAccount-content .woocommerce-orders-table,
#lpen-acct-woo .woocommerce-MyAccount-content .woocommerce-table--order-downloads,
#lpen-acct-woo .woocommerce-MyAccount-content .woocommerce-table--order-details {
  display: table;
}

#lpen-acct-woo .woocommerce-MyAccount-content {
  overflow-x: auto;
}

/* Addresses */
#lpen-acct-woo .woocommerce .woocommerce-Addresses {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

#lpen-acct-woo .woocommerce .woocommerce-Address {
  flex: 1 1 260px;
  padding: 18px 20px;
  border: 1px solid #CFD6DD;
  border-radius: 8px;
  background: #FFFFFF;
}

#lpen-acct-woo .woocommerce .woocommerce-Address address {
  color: #4A5666;
  font-style: normal;
  line-height: 26px;
}

/* Elementor stacks the vertical tabs itself below its tablet breakpoint,
   but the nav keeps list bullets and no gap when it does. */
@media (max-width: 767px) {
  #lpen-acct-woo .woocommerce-MyAccount-navigation {
    margin: 0 0 22px;
  }

  #lpen-acct-woo .woocommerce table.shop_table {
    font-size: 14px;
  }
}

/* ---------------------------------------------------------------------
   6. NATIVE WIDGETS THAT NEED A NUDGE

   Reaching Elementor widgets from here is allowed because every rule is
   anchored on a section id (§18i). Keep this block small: anything that
   an Elementor control can express belongs in the control, so the team
   can change it in the editor.
   --------------------------------------------------------------------- */

/* The three shortcut tiles.

   ⚠️ Addressed by id, not by class, on purpose. §18b.2: Elementor
   containers render `_element_id` and DROP `_css_classes`, so a class
   hook on a container is a rule that silently never applies. The builder
   sets these three ids. */
#lpen-acct-tile-orders,
#lpen-acct-tile-payment,
#lpen-acct-tile-details {
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

#lpen-acct-tile-orders:hover,
#lpen-acct-tile-payment:hover,
#lpen-acct-tile-details:hover {
  border-color: #0F5C96;
  box-shadow: 0 6px 18px rgba(2, 46, 72, .10);
  transform: translateY(-2px);
}

/* The whole tile is the target, so the icon-box link fills it rather than
   ending at the width of its own text. */
#lpen-acct-tile-orders .elementor-icon-box-wrapper,
#lpen-acct-tile-payment .elementor-icon-box-wrapper,
#lpen-acct-tile-details .elementor-icon-box-wrapper {
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {

  #lpen-acct-tile-orders,
  #lpen-acct-tile-payment,
  #lpen-acct-tile-details {
    transition: none;
  }

  #lpen-acct-tile-orders:hover,
  #lpen-acct-tile-payment:hover,
  #lpen-acct-tile-details:hover {
    transform: none;
  }
}

/* ⚠️ §18i, found on the rendered draft and not in any JSON: the theme
   underlines every <a>, and a linked icon-box wraps its title in one, so
   every tile heading on this page rendered underlined. The builder now
   sets `title_typography_text_decoration` on the widget as well; this is
   the belt, and it also covers the hover state, which the control does
   not reach. */
#lpen-acct-member .elementor-icon-box-title a,
#lpen-acct-help .elementor-icon-box-title a {
  text-decoration: none;
}

#lpen-acct-member .elementor-icon-box-title a:hover,
#lpen-acct-help .elementor-icon-box-title a:hover {
  color: #0F5C96;
  text-decoration: none;
}

/* The aside's link lists are icon-list widgets; the theme underlines
   every <a> and the list reads better without it. */
#lpen-acct-aside .elementor-icon-list-item a {
  text-decoration: none;
}

#lpen-acct-aside .elementor-icon-list-item a:hover {
  text-decoration: underline;
}

/* Inline links written into text-editor copy. Elementor has no control
   for these, so the token has to arrive from here. */
#lpen-acct-aside .elementor-widget-text-editor a,
#lpen-acct-help .elementor-widget-text-editor a {
  color: #0F5C96;
  text-decoration: underline;
  text-underline-offset: 2px;
}