/* account.writrex.com additions on top of the writrex.com design system (writrex.css). */

/* WordPress admin bar: keep the sticky header and mobile menu below it. */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }
@media (max-width: 1000px) {
  .admin-bar .nav { top: calc(64px + 32px); }
}
@media (max-width: 782px) { .admin-bar .nav { top: calc(64px + 46px); } }

/* Buy buttons sit at the bottom of every plan card. */
.plan-card > .btn { margin-top: auto; }
.plans-single { grid-template-columns: minmax(0, 460px); justify-content: center; }

/* Tighter rhythm for the short sections under the plans. */
.section.wx-tight { padding-block: clamp(48px, 6vw, 80px); }

/* Trust strip */
.wx-trust .card { padding: 24px; }
.wx-trust .card p { font-size: 14px; }

/* After-checkout steps */
.wx-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; counter-reset: none; }
.wx-steps .n { display: inline-block; font-size: 12px; letter-spacing: 0.14em; color: var(--mint); border: 1px solid var(--mint-line); border-radius: 999px; padding: 4px 10px; margin-bottom: 16px; }
.wx-steps .card p { font-size: 14px; margin-top: 8px; }
@media (max-width: 960px) { .wx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .wx-steps { grid-template-columns: 1fr; } }

.wx-end { justify-content: flex-end; }
@media (max-width: 960px) { .wx-end { justify-content: flex-start; } }

.wx-branded .card a.mint:hover { text-decoration: underline; }

/* =========================================================================
   Checkout (/checkout/)
   The EDD form markup is untouched. Everything below is scoped to .wx-checkout-form
   and written against element types plus EDD's stable ids/classes, so it covers
   both the EDD Checkout block and the [download_checkout] shortcode.
   ========================================================================= */
.wx-co-head { padding-bottom: 8px; }
.wx-co-head .h-page { font-size: clamp(34px, 5vw, 52px); }
.wx-co-steps { display: flex; justify-content: center; gap: 10px; list-style: none; margin: 0 0 26px; padding: 0; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); flex-wrap: wrap; }
.wx-co-steps li { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; }
.wx-co-steps li span { color: var(--line-2); }
.wx-co-steps li.done { color: var(--muted); }
.wx-co-steps li.done span { color: var(--mint); }
.wx-co-steps li.on { color: var(--mint); border-color: var(--mint-line); background: var(--mint-soft); }
.wx-co-steps li.on span { color: var(--mint); }
.wx-co-section { padding-top: 32px; }

.wx-co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.wx-co-grid--solo { grid-template-columns: minmax(0, 760px); justify-content: center; }
@media (max-width: 1000px) { .wx-co-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .wx-checkout-form { padding: 18px; } .wx-checkout-form th, .wx-checkout-form td { padding: 12px 10px; } .wx-co-steps { gap: 6px; } }

/* Sidebar */
.wx-co-side { display: grid; gap: 16px; position: sticky; top: 88px; }
.admin-bar .wx-co-side { top: 120px; }
@media (max-width: 1000px) { .wx-co-side, .admin-bar .wx-co-side { position: static; } }
.wx-co-plan .tag { margin-bottom: 10px; }
.wx-co-plan-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wx-co-plan-top .h-card { font-size: 20px; }
.wx-co-price { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; margin-top: 10px; }
.wx-co-price small { font-size: 14px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.wx-co-sites { color: var(--mint); font-size: 14px; font-weight: 600; margin: 2px 0 18px; }
.wx-co-plan .checks { gap: 9px; }
.wx-co-plan .checks li { font-size: 14px; }
.wx-co-multi { margin-top: 16px; }

.wx-co-trust { padding: 22px 24px; }
.wx-co-trust ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.wx-co-trust li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.wx-co-trust svg { width: 20px; height: 20px; fill: none; stroke: var(--mint); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.wx-co-trust strong { display: block; font-size: 14px; color: var(--text); }
.wx-co-trust span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.wx-co-empty-cta { margin-top: 28px; }

/* ---- The EDD form ---- */
.wx-checkout-form { padding: clamp(22px, 3vw, 36px); color: var(--text); font-size: 15px; color-scheme: dark; accent-color: var(--mint); }
.wx-checkout-form::before, .wx-checkout-form::after { display: none; } /* no hover brackets on a form */
.wx-checkout-form > *:first-child { margin-top: 0; }
.wx-checkout-form p { color: var(--muted); margin: 0 0 14px; }
.wx-checkout-form strong, .wx-checkout-form b { color: var(--text); }
.wx-checkout-form a { color: var(--mint); text-decoration: none; }
.wx-checkout-form a:hover { text-decoration: underline; }
.wx-checkout-form img { border-radius: 6px; }
.wx-checkout-form h2, .wx-checkout-form h3, .wx-checkout-form h4 { color: var(--text); font-size: 18px; margin: 0 0 14px; letter-spacing: -0.01em; }

/* Section headings: fieldset legends (shortcode) and block headings */
.wx-checkout-form fieldset { border: 0; margin: 0 0 28px; padding: 0; min-width: 0; }
.wx-checkout-form fieldset fieldset { margin-bottom: 0; }
.wx-checkout-form legend,
.wx-checkout-form [class*="edd-blocks-form__group"] > h3,
.wx-checkout-form [class*="edd-blocks__checkout"] > h3 { display: block; width: 100%; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 0 0 12px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }

/* Labels, help text, fields */
.wx-checkout-form label, .wx-checkout-form .edd-label { display: block; font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 6px; }
.wx-checkout-form label input[type="checkbox"], .wx-checkout-form label input[type="radio"] { margin-right: 8px; }
.wx-checkout-form .edd-required-indicator { color: var(--mint); border: 0; text-decoration: none; }
.wx-checkout-form .edd-description, .wx-checkout-form small { display: block; font-size: 13px; color: var(--dim); margin: 0 0 8px; }
.wx-checkout-form input[type="text"], .wx-checkout-form input[type="email"], .wx-checkout-form input[type="password"],
.wx-checkout-form input[type="tel"], .wx-checkout-form input[type="number"], .wx-checkout-form input[type="url"],
.wx-checkout-form select, .wx-checkout-form textarea {
  width: 100%; max-width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; color: var(--text);
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 12px 14px; line-height: 1.4;
  box-shadow: none; transition: border-color 0.2s, box-shadow 0.2s; min-height: 46px;
}
.wx-checkout-form input::placeholder, .wx-checkout-form textarea::placeholder { color: var(--dim); opacity: 1; }
.wx-checkout-form input:focus, .wx-checkout-form select:focus, .wx-checkout-form textarea:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px var(--mint-soft); }
.wx-checkout-form input[readonly], .wx-checkout-form input:disabled { opacity: 0.7; }
.wx-checkout-form input.edd-input.error, .wx-checkout-form input[aria-invalid="true"] { border-color: var(--red); }
.wx-checkout-form p[id^="edd-"], .wx-checkout-form [class*="edd-blocks-form__control"] { margin-bottom: 16px; }

/* ---- Cart ----
   One clean rounded box, whatever markup EDD uses (block divs or shortcode table).
   Every cart element is flattened first, then only the outermost cart container gets the border.
   !important is needed here because EDD's cart styles use id selectors and their own borders. */
.wx-checkout-form :is(div, table, form, section, ul, thead, tbody, tfoot, tr, th, td, li):is([class*="cart"], [id*="cart"]),
.wx-checkout-form :is([class*="cart"], [id*="cart"]) :is(table, thead, tbody, tfoot, tr, th, td) {
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; outline: 0 !important;
}
.wx-checkout-form :is(div, table, form, section, ul):is([class*="cart"], [id*="cart"]):not(:is([class*="cart"], [id*="cart"]) *) {
  border: 1px solid var(--line-2) !important; border-radius: var(--radius-lg) !important; overflow: hidden !important;
  background: var(--bg) !important; margin: 0 0 26px !important; padding: 0 !important;
}
.wx-checkout-form :is([class*="cart"], [id*="cart"]) table { width: 100%; margin: 0 !important; border-collapse: separate !important; border-spacing: 0 !important; }
.wx-checkout-form :is([class*="cart"], [id*="cart"]) :is(div, form, section, ul):not([class*="row"]) { margin: 0 !important; padding: 0 !important; }

/* Rows (block: *__row, shortcode: tr) */
.wx-checkout-form :is([class*="cart"], [id*="cart"]) :is([class*="row"]):not(tr):not(td):not(th):not([class*="row"] *) {
  display: flex !important; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px !important; margin: 0 !important; min-height: 0 !important;
}
.wx-checkout-form :is([class*="cart"], [id*="cart"]) :is(th, td) { padding: 16px 20px !important; vertical-align: middle; color: var(--text); }
.wx-checkout-form :is([class*="cart"], [id*="cart"]) :is([class*="row"]:not(:last-child):not([class*="row"] *):not(tr), tr:not(:last-child) > *) { border-bottom: 1px solid var(--line) !important; }

/* Header row */
.wx-checkout-form :is([class*="cart"], [id*="cart"]) :is([class*="row-header"]:not([class*="row"] *), [class*="header_row"]:not(tr), [class*="header-row"], thead th, [class*="header_row"] > th) {
  background: var(--bg-2) !important; color: var(--muted) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.1em; text-transform: uppercase;
}
.wx-checkout-form :is([class*="cart"], [id*="cart"]) :is([class*="row-header"], [class*="header_row"]) * { color: inherit !important; font: inherit !important; letter-spacing: inherit; }

/* Footer / total row */
.wx-checkout-form :is([class*="cart"], [id*="cart"]) :is([class*="row-footer"]:not([class*="row"] *), [class*="footer-row"], tfoot th, tfoot td) {
  background: var(--surface-2) !important; justify-content: flex-end !important; text-align: right !important; color: var(--muted); font-weight: 600;
}
.wx-checkout-form :is([class*="cart"], [id*="cart"]) :is(.edd_cart_amount, [class*="total"] strong, [class*="total"] span:last-child) { color: var(--text); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }

/* Item line */
.wx-checkout-form :is([class*="cart"], [id*="cart"]) :is(div, span):has(> img):not(.edd_cart_item_image) { display: flex !important; align-items: center; gap: 0; }
.wx-checkout-form .edd_cart_item_image { display: inline-block !important; vertical-align: middle; }
.wx-checkout-form :is([class*="cart"], [id*="cart"]) :is([class*="amount"], [class*="price"]):has(button, a) { display: inline-flex !important; align-items: center; gap: 12px; }
.wx-checkout-form :is([class*="cart"], [id*="cart"]) :is(button, a[class*="remove"]) { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 4px !important; min-height: 0 !important; width: auto !important; margin: 0 !important; cursor: pointer; line-height: 1; }
.wx-checkout-form :is([class*="cart"], [id*="cart"]) img { width: 36px !important; height: 36px !important; object-fit: cover; border-radius: 8px !important; float: none !important; margin: 0 12px 0 0 !important; vertical-align: middle; }
.wx-checkout-form :is([class*="cart"], [id*="cart"]) :is([class*="item"], td) { color: var(--text); font-weight: 500; }
.wx-checkout-form :is([class*="cart"], [id*="cart"]) :is([class*="remove"], [class*="remove"] *) { color: var(--dim) !important; fill: currentColor !important; background: transparent !important; transition: color 0.2s; }
.wx-checkout-form :is([class*="cart"], [id*="cart"]) :is([class*="remove"]:hover, [class*="remove"]:hover *) { color: var(--red) !important; }
.wx-checkout-form :is([class*="cart"], [id*="cart"]) th:last-child, .wx-checkout-form :is([class*="cart"], [id*="cart"]) td:last-child { text-align: right; }

/* Logged-in user line, login/register toggles, discount */
.wx-checkout-form [class*="checkout-user"], .wx-checkout-form #edd_checkout_login_register, .wx-checkout-form .edd-blocks__checkout-user {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 24px; color: var(--muted);
}
.wx-checkout-form #edd_show_discount, .wx-checkout-form .edd-discount-code-field-wrap { margin: 0 0 20px; }
.wx-checkout-form #edd-discount-code-wrap, .wx-checkout-form [class*="discount"] .edd-discount-code-field-wrap { display: flex; gap: 10px; flex-wrap: wrap; }
.wx-checkout-form .edd_discount_remove { color: var(--dim); }

/* ---- Payment ----
   The card section sits in its own lighter panel so it reads as the main event. */
.wx-checkout-form #edd_payment_mode_select, .wx-checkout-form #edd-payment-mode-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.wx-checkout-form .edd-gateway-option { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 10px 14px; margin: 0; font-weight: 600; cursor: pointer; }
.wx-checkout-form .edd-gateway-option-selected { border-color: var(--mint); background: var(--mint-soft); }

.wx-checkout-form #edd_cc_fields, .wx-checkout-form [id*="payment-element"]:not(#edd-stripe-payment-element *), .wx-checkout-form #edd_cc_address {
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 22px 22px 8px; margin: 0 0 24px;
}
.wx-checkout-form #edd_cc_fields legend { float: left; margin-bottom: 18px; } /* keeps the legend inside the panel */
.wx-checkout-form #edd_cc_fields legend + * { clear: both; }
.wx-checkout-form #edd_cc_fields::after { content: ""; display: table; clear: both; }

/* Every wrapper inside the card panel lines up on the same left edge */
.wx-checkout-form #edd_cc_fields :is(p, div, span.edd-description, label, .edd-stripe-new-card, .edd-stripe-card-selector) { margin-left: 0 !important; padding-left: 0 !important; text-indent: 0; }
.wx-checkout-form #edd_cc_fields p { margin: 0 0 16px; }
.wx-checkout-form #edd_cc_fields .edd-description { font-style: normal; }

/* "This is a secure SSL encrypted payment." with a visible mint padlock */
.wx-checkout-form #edd_secure_site_wrapper, .wx-checkout-form [class*="secure-site"], .wx-checkout-form [id*="secure_site"] {
  display: flex !important; align-items: center; gap: 10px; clear: both;
  background: var(--mint-soft); border: 1px solid var(--mint-line); border-radius: var(--radius);
  padding: 10px 14px !important; margin: 0 0 20px !important; font-size: 13px; font-weight: 600; color: var(--text);
}
.wx-checkout-form #edd_secure_site_wrapper *, .wx-checkout-form [class*="secure-site"] * { color: var(--text); margin: 0 !important; font-weight: 600; }
.wx-checkout-form .padlock, .wx-checkout-form [class*="padlock"] { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; }
.wx-checkout-form :is(.padlock, [class*="padlock"], [class*="secure-site"], #edd_secure_site_wrapper, [class*="lock"]) svg,
.wx-checkout-form svg.edd-icon, .wx-checkout-form .edd-icon-lock {
  fill: var(--mint) !important; color: var(--mint) !important; width: 16px; height: 16px; opacity: 1 !important;
}
.wx-checkout-form :is(.padlock, [class*="padlock"]) svg path { fill: var(--mint) !important; }
.wx-checkout-form .edd-icon { color: var(--mint); fill: currentColor; }

/* Card logos (if the gateway shows them) */
.wx-checkout-form .edd-payment-icons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.wx-checkout-form .edd-payment-icons img, .wx-checkout-form .edd-payment-icons svg { height: 24px; width: auto; border-radius: 4px; background: #fff; padding: 2px 4px; }

/* Stripe card field: same size and look as the name input above it */
.wx-checkout-form #edd-stripe-card-element, .wx-checkout-form .edd-stripe-card-element, .wx-checkout-form .StripeElement {
  background: var(--bg) !important; border: 1px solid var(--line-2) !important; border-radius: var(--radius) !important;
  padding: 13px 14px !important; min-height: 46px; box-sizing: border-box; width: 100%; transition: border-color 0.2s, box-shadow 0.2s;
}
.wx-checkout-form .StripeElement--focus { border-color: var(--mint) !important; box-shadow: 0 0 0 3px var(--mint-soft) !important; }
.wx-checkout-form .StripeElement--invalid { border-color: var(--red) !important; }
.wx-checkout-form #edd-stripe-card-errors, .wx-checkout-form [id*="card-errors"] { color: var(--red); font-size: 13px; margin-top: 8px; }
.wx-checkout-form #edd-stripe-payment-element { background: transparent; border: 0; padding: 0; }

/* Total + purchase button */
.wx-checkout-form #edd_final_total_wrap, .wx-checkout-form [class*="edd-blocks-cart__row-footer"] { font-size: 16px; }
.wx-checkout-form .edd_cart_amount, .wx-checkout-form #edd_final_total_wrap .edd_cart_amount { color: var(--text); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.wx-checkout-form #edd_final_total_wrap { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 8px; color: var(--muted); }
.wx-checkout-form #edd-purchase-button, .wx-checkout-form input.edd-submit, .wx-checkout-form button.edd-submit,
.wx-checkout-form .edd-submit.button, .wx-checkout-form input[type="submit"], .wx-checkout-form button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin-top: 8px;
  font: inherit; font-size: 16px; font-weight: 700; color: var(--mint-ink); background: var(--mint); border: 1px solid var(--mint);
  border-radius: var(--radius); padding: 15px 28px; cursor: pointer; box-shadow: none; text-shadow: none;
  transition: transform 0.25s var(--ease), box-shadow 0.2s, opacity 0.2s;
}
.wx-checkout-form #edd-purchase-button:hover, .wx-checkout-form .edd-submit:hover, .wx-checkout-form input[type="submit"]:hover, .wx-checkout-form button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px var(--mint-line); background: var(--mint); color: var(--mint-ink); }
.wx-checkout-form #edd-purchase-button:disabled, .wx-checkout-form .edd-submit:disabled { opacity: 0.6; transform: none; cursor: wait; }
/* Small secondary buttons (Apply discount, Log in) should not be full width */
.wx-checkout-form #edd-discount-code-wrap input[type="submit"], .wx-checkout-form #edd-discount-code-wrap .edd-submit,
.wx-checkout-form .edd-apply-discount { width: auto; min-height: 46px; margin-top: 0; font-size: 14px; padding: 10px 18px; background: transparent; color: var(--text); border-color: var(--line-2); }
.wx-checkout-form .edd-apply-discount:hover { background: transparent; color: var(--text); border-color: var(--mint-line); }

/* Terms / privacy agreement */
.wx-checkout-form #edd_terms_agreement, .wx-checkout-form #edd-privacy-policy-agreement, .wx-checkout-form [class*="agreement"] { font-size: 14px; color: var(--muted); }
.wx-checkout-form #edd_terms { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; max-height: 220px; overflow: auto; }

/* Notices and errors */
.wx-checkout-form .edd-alert, .wx-checkout-form .edd_errors, .wx-checkout-form [class*="edd-alert"] {
  background: var(--bg-2); border: 1px solid var(--line-2); border-left: 3px solid var(--blue); border-radius: var(--radius); color: var(--text); padding: 12px 16px; margin: 0 0 18px; font-size: 14px;
}
.wx-checkout-form .edd-alert-error, .wx-checkout-form .edd_errors.edd-alert-error { border-left-color: var(--red); }
.wx-checkout-form .edd-alert-success { border-left-color: var(--mint); }
.wx-checkout-form .edd-alert-warn { border-left-color: var(--amber); }
.wx-checkout-form .edd_error { margin: 4px 0; color: var(--text); }
.wx-checkout-form .edd-loading-ajax, .wx-checkout-form .edd-loading { filter: invert(1) hue-rotate(180deg); }

/* Empty cart message */
.wx-checkout-form .edd_empty_cart, .wx-checkout-form [class*="empty-cart"], .wx-checkout-form [class*="cart__empty"] { text-align: center; color: var(--muted); padding: 24px 0; margin: 0; }

/* =========================================================================
   Account pages: confirmation, receipt, failed, order history, licences, profile
   ========================================================================= */
.wx-narrow { max-width: 900px; }
.wx-account-page .section.wx-co-section { padding-top: 28px; }

/* Tabs */
.wx-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 6px; border: 1px solid var(--line); border-radius: 999px; width: max-content; max-width: 100%; background: var(--bg-2); }
.wx-tabs a { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; transition: color 0.2s, background 0.2s; }
.wx-tabs a:hover { color: var(--text); }
.wx-tabs a[aria-current="page"] { background: var(--mint-soft); color: var(--mint); }
.wx-tabs .wx-tabs-out { color: var(--dim); }

/* Notices */
.wx-notice { border: 1px solid var(--line-2); border-left: 3px solid var(--mint); background: var(--bg-2); color: var(--text); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 20px; font-size: 14px; }
.wx-notice-err { border-left-color: var(--red); }

.wx-subhead { font-size: 22px; letter-spacing: -0.02em; margin: 44px 0 18px; }
.wx-steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .wx-steps-3 { grid-template-columns: 1fr; } }
.wx-center-row { justify-content: center; margin-top: 28px; }
.wx-help { margin-top: 24px; }

/* ---- EDD content on dark ----
   EDD's receipt, order history and licence views are drawn for light themes.
   Colours are re-mapped here; EDD's own layout (rows, grids, tables) is kept. */
.wx-edd { padding: clamp(20px, 3vw, 32px); color: var(--muted); font-size: 15px; color-scheme: dark; accent-color: var(--mint); overflow-x: auto; }
.wx-edd::before, .wx-edd::after { display: none; }
.wx-edd > *:first-child { margin-top: 0; }
.wx-edd > *:last-child { margin-bottom: 0; }
.wx-edd :is(div, section, article, table, thead, tbody, tfoot, tr, td, th, ul, ol, li, dl, dt, dd, p, span, form, fieldset) { background-color: transparent !important; }
.wx-edd * { border-color: var(--line) !important; box-shadow: none !important; }
.wx-edd :is(p, li, td, dd, span, div) { color: inherit; }
.wx-edd :is(h1, h2, h3, h4, h5, strong, b, th, dt, label) { color: var(--text) !important; }
.wx-edd :is(h2, h3, h4) { font-size: 18px; letter-spacing: -0.01em; margin: 28px 0 14px; }
.wx-edd a { color: var(--mint) !important; text-decoration: none !important; }
.wx-edd a:hover { text-decoration: underline !important; }
.wx-edd img { border-radius: 6px; }
.wx-edd ul { padding-left: 18px; }
.wx-edd li::marker { color: var(--dim); }

/* Receipt and confirmation rows (label left, value right) */
.wx-edd :is([class*="receipt"], [class*="confirmation"], [class*="order-details"]) :is([class*="__row"], [class*="-row"], tr) { border-color: var(--line) !important; }
.wx-edd :is([class*="__row-label"], [class*="row-label"]) { color: var(--text) !important; font-weight: 600; }
.wx-edd :is([class*="__row-value"], [class*="row-value"]) { color: var(--muted); }
/* Only the outermost box of each receipt / order section is rounded. Nested rows are left alone so nothing gets clipped. */
.wx-edd :is([class*="receipt"], [class*="confirmation"]):is([class*="__items"], [class*="__totals"], [class*="__details"]):not(:is([class*="__items"], [class*="__totals"], [class*="__details"]) *) {
  border-radius: var(--radius-lg) !important; border-color: var(--line-2) !important;
}

/* Licence keys: monospace, easy to copy */
.wx-edd :is([class*="license-key"], [class*="license_key"], .edd_sl_license_key, [class*="licence-key"]),
.wx-edd :is([class*="receipt"]) :is([class*="license"] [class*="value"]) {
  font-family: var(--font-mono); font-size: 13px; color: var(--mint) !important; word-break: break-all; user-select: all;
}
.wx-edd input[readonly] { font-family: var(--font-mono); font-size: 13px; }

/* Order history cards: round the card itself, never its inner header/rows */
.wx-edd, .wx-edd *, .wx-edd *::before, .wx-edd *::after { box-sizing: border-box; }
.wx-edd [class*="__order"]:not([class*="__orders"]):not([class*="__order-"]):not([class*="__order_"]) { border-radius: var(--radius-lg) !important; border-color: var(--line-2) !important; overflow: visible !important; height: auto !important; }
.wx-edd [class*="__order"] * { overflow: visible !important; max-height: none !important; line-height: 1.5; }
.wx-edd [class*="__order"]:not([class*="__orders"]):not([class*="__order-"]):not([class*="__order_"]):hover { border-color: var(--mint-line) !important; }
.wx-edd [class*="__order"] :is([class*="header"], [class*="__row"]) { height: auto !important; }

/* Tables (licences, manage sites, shortcode purchase history) */
.wx-edd table { width: 100%; border-collapse: separate !important; border-spacing: 0; border: 1px solid var(--line-2) !important; border-radius: var(--radius-lg); overflow: hidden; margin: 0 0 20px; font-size: 14px; }
.wx-edd th, .wx-edd td { border: 0 !important; border-bottom: 1px solid var(--line) !important; padding: 14px 16px !important; text-align: left; vertical-align: middle; }
.wx-edd tr:last-child > td { border-bottom: 0 !important; }
.wx-edd thead th { background: var(--bg-2) !important; color: var(--muted) !important; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.wx-edd td { color: var(--text) !important; }
.wx-edd tbody tr:hover > td { background: rgba(255, 255, 255, 0.015) !important; }

/* Software Licensing: key toggle icon, status, go back */
/* Licence key cell: EDD's icon + key are replaced by account.js with "View key" and a click-to-copy key.
   Until the script runs, EDD's own icon is shown, aligned. */
.wx-edd :is(.edd_sl_show_key, [class*="show_key"]) { display: inline-flex !important; align-items: center; justify-content: center; vertical-align: middle; width: 32px; height: 32px; position: static !important; margin: 0 !important; border: 1px solid var(--line-2) !important; border-radius: 8px; }
.wx-edd :is(.edd_sl_show_key, [class*="show_key"]) img { display: block; width: 16px; height: 16px; margin: 0 !important; filter: grayscale(1) brightness(2); border-radius: 0; }
.wx-edd .wx-hide { display: none !important; }
.wx-key { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.wx-key button { font: inherit; cursor: pointer; background: transparent; }
.wx-key-view { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line-2) !important; border-radius: 8px; color: var(--text); font-size: 13px !important; font-weight: 600; white-space: nowrap; line-height: 1; transition: border-color 0.2s, color 0.2s; }
.wx-key-view:hover, .wx-key-view[aria-expanded="true"] { border-color: var(--mint-line) !important; color: var(--mint); }
.wx-key-view svg, .wx-key-copy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wx-key-val { display: inline-flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--mint-line) !important; border-radius: 8px; background: var(--mint-soft) !important; text-align: left; transition: border-color 0.2s; }
.wx-key-val[hidden] { display: none; }
.wx-key-val code { font-family: var(--font-mono); font-size: 13px; color: var(--mint); letter-spacing: 0.02em; white-space: nowrap; }
.wx-key-copy { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.wx-key-val:hover .wx-key-copy { color: var(--text); }
.wx-key-val.is-copied { border-color: var(--mint) !important; }
.wx-key-val.is-copied .wx-key-copy { color: var(--mint); }
.wx-edd td:has(.wx-key) { min-width: 140px; }

.wx-edd :is(.edd_sl_license_status.active, .edd-sl-license-status-active, [class*="status-active"]) { color: var(--mint) !important; }
.wx-edd :is(.edd_sl_license_status.expired, [class*="status-expired"]) { color: var(--amber) !important; }
.wx-edd :is(.edd_sl_license_status.disabled, .edd_sl_license_status.revoked, [class*="status-revoked"], [class*="status-disabled"]) { color: var(--red) !important; }

/* Buttons EDD prints (Go back, Add site, Update, Complete purchase, forms) */
.wx-edd :is(.button, .edd-submit, input[type="submit"], button[type="submit"], a.button) {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 14px !important; font-weight: 600 !important;
  color: var(--text) !important; background: transparent !important; border: 1px solid var(--line-2) !important; border-radius: var(--radius) !important;
  padding: 10px 18px !important; min-height: 42px; cursor: pointer; text-decoration: none !important; transition: border-color 0.2s, transform 0.2s;
}
.wx-edd :is(.button, .edd-submit, input[type="submit"], button[type="submit"], a.button):hover { border-color: var(--mint-line) !important; transform: translateY(-1px); text-decoration: none !important; }
.wx-edd :is(.button, .edd-submit, input[type="submit"], button[type="submit"]):is(.edd-submit, [type="submit"]) { background: var(--mint) !important; color: var(--mint-ink) !important; border-color: var(--mint) !important; }
.wx-edd :is(.edd-manage-license-back, [class*="go-back"], [class*="back"]).button { margin-bottom: 18px; }

/* Forms EDD prints (profile editor, add site, guest receipt lookup) */
.wx-edd fieldset { border: 0 !important; margin: 0 0 24px; padding: 0; }
.wx-edd legend { display: block; width: 100%; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted) !important; padding: 0 0 12px; margin: 0 0 18px; border-bottom: 1px solid var(--line) !important; }
.wx-edd label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.wx-edd :is(input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], select, textarea) {
  width: 100%; max-width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; color: var(--text) !important; background: var(--bg) !important;
  border: 1px solid var(--line-2) !important; border-radius: var(--radius); padding: 11px 14px; min-height: 44px;
}
.wx-edd :is(input, select, textarea):focus { outline: none; border-color: var(--mint) !important; box-shadow: 0 0 0 3px var(--mint-soft) !important; }
.wx-edd p:has(> input), .wx-edd p:has(> label) { margin: 0 0 16px; }
.wx-edd .edd-description { display: block; font-size: 13px; color: var(--dim); margin: 0 0 8px; }

/* Alerts */
.wx-edd :is(.edd-alert, .edd_errors, [class*="edd-alert"]) { background: var(--bg-2) !important; border: 1px solid var(--line-2) !important; border-left: 3px solid var(--blue) !important; border-radius: var(--radius); color: var(--text) !important; padding: 12px 16px; margin: 0 0 18px; font-size: 14px; }
.wx-edd .edd-alert-error { border-left-color: var(--red) !important; }
.wx-edd .edd-alert-success { border-left-color: var(--mint) !important; }

/* Pagination */
.wx-edd :is(.edd_pagination, [class*="pagination"]) { display: flex; gap: 6px; justify-content: center; margin-top: 20px; }
.wx-edd :is(.edd_pagination, [class*="pagination"]) :is(a, span) { padding: 6px 12px; border: 1px solid var(--line-2) !important; border-radius: 8px; }

/* =========================================================================
   Login
   ========================================================================= */
.wx-login-section { padding-top: clamp(48px, 8vw, 96px); }
.wx-login-wrap { max-width: 480px; }
.wx-login-head { text-align: center; margin-bottom: 28px; }
.wx-login-head .h-page { font-size: clamp(32px, 5vw, 44px); margin-top: 10px; }
.wx-login-head .lede { font-size: 16px; margin-top: 12px; }
.wx-login-card { padding: clamp(22px, 4vw, 34px); }
.wx-login-card::before, .wx-login-card::after { display: none; }
.wx-form { display: grid; gap: 18px; }
.wx-field label, .wx-label-row label { display: block; font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.wx-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wx-form input[type="text"], .wx-form input[type="email"], .wx-form input[type="password"] {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; color: var(--text); background: var(--bg); color-scheme: dark;
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: 12px 14px; min-height: 48px; transition: border-color 0.2s, box-shadow 0.2s;
}
.wx-form input:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px var(--mint-soft); }
.wx-pass { position: relative; }
.wx-pass input { padding-right: 72px; }
.wx-pass-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 10px; cursor: pointer; border-radius: 8px; }
.wx-pass-toggle:hover { color: var(--mint); }
.wx-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); cursor: pointer; }
.wx-check input { accent-color: var(--mint); width: 16px; height: 16px; }
.wx-submit { width: 100%; justify-content: center; min-height: 50px; }
.wx-or { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; }
.wx-or::before, .wx-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.wx-login-foot { margin-top: 20px; text-align: center; }
.wx-login-help { margin-top: 24px; }
.wx-magic-who { color: var(--muted); margin: 0; text-align: center; }
.wx-magic-who strong { color: var(--text); }

/* Footer social icons */
.site-footer .wx-social { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 22px 0 0; padding: 0; }
.site-footer .wx-social li { margin: 0 !important; padding: 0 !important; line-height: 0; }
.site-footer .wx-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 9px; color: var(--muted); transition: color 0.2s, border-color 0.2s, transform 0.2s; }
.site-footer .wx-social a:hover { color: var(--mint); border-color: var(--mint-line); transform: translateY(-2px); }
.site-footer .wx-social svg { width: 16px; height: 16px; fill: currentColor; display: block; }

/* Stripe billing portal card (Orders + Profile) */
.wx-billing { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 20px; padding: 22px 26px; }
.wx-billing::before, .wx-billing::after { display: none; }
.wx-billing .tag { margin-bottom: 8px; }
.wx-billing .h-card { font-size: 19px; margin: 0 0 4px; }
.wx-billing p { margin: 0; font-size: 14px; color: var(--muted); max-width: 560px; }
.wx-billing-action { flex: none; }
.wx-billing .wsc-portal-form { margin: 0; }
.wx-billing .wsc-portal-form button { font: inherit; font-weight: 700; cursor: pointer; border: 0; white-space: nowrap; }
@media (max-width: 760px) { .wx-billing { flex-direction: column; align-items: flex-start; } }