/**
* SAA Renewals — visual styles for the renewal journey surfaces.
*
* Phase 1 of the visual pass (plan renewals-v3-visual-design): the S1
* dashboard widget and S3 Pre-Requisites landing match the Figma Approved
* lane frames (file dhdaUlzpYTLtKPzXdKkepP — widget 21:2775 / 228:1143,
* landing 161:840). Later screens keep the earlier structural rules until
* their pass.
*
* FRAGILE: the wireframes are set in Inter as a placeholder; the live brand
* font is the theme's Poppins, so these rules inherit the theme font and
* match the frames' sizes/weights/colours instead of importing Inter.
*/
/* Design tokens pulled from the Figma frames (no Figma variables are
defined in the file — these literals ARE the palette). */
:root {
--saa-renewal-navy: #192a56;
--saa-renewal-red: #cf1818;
--saa-renewal-green: #1b873f;
--saa-renewal-ink: #1e1e1e;
--saa-renewal-muted: #c4c4c4;
--saa-renewal-dot: #707070;
--saa-renewal-card-bg: #fafafa;
/* Done-tick circle per the shared Icon-Checked component (179:979) —
brighter than --saa-renewal-green, which is the eligibility-TEXT
green, not the icon green. */
--saa-renewal-done-green: #0ae344;
/* Awaiting-review / returned / escalated document status (270:4070). */
--saa-renewal-orange: #d97a00;
}
/* ----------------------------------------------------------------------
* Heading font normalisation.
*
* renewals.css sets no font-family elsewhere — it inherits the theme font,
* which is Poppins for body and h2/h3/h4. BUT The7 maps --the7-h1-font-family
* to "Roboto Condensed", so the two renewal screens that use a raw
* (Before You Begin, Application Form) inherited Roboto Condensed for their
* page title while every other renewal heading stayed Poppins — a visible
* mismatch (reported 2026-06-29; proven by tests/e2e renewal-fonts.spec.ts).
* Pin the brand font on those titles so all renewal headings are Poppins.
* Matches the brand stack The7 itself emits (Poppins, Helvetica, Arial…).
* -------------------------------------------------------------------- */
.saa-renewal-byb h1,
.saa-renewal-form > h1 {
font-family: "Poppins", Helvetica, Arial, Verdana, sans-serif;
}
/* ----------------------------------------------------------------------
* wpautop guard: the My Account / Elementor pipeline wraps inline runs in
* anonymous
s between our block elements (render_template already
* collapses newlines, but orphan wrappers remain around inline tags).
* Our own paragraphs all carry classes — flatten the unclassed strays so
* flex layouts see the real children.
* -------------------------------------------------------------------- */
.saa-renewal-steps__row > p:not([class]),
.saa-renewal-steps__doc-group > p:not([class]),
.saa-renewal-landing > p:not([class]),
.saa-renewal-widget > p:not([class]),
.saa-renewal-form__split > p:not([class]),
.saa-renewal-upload-row > p:not([class]),
.saa-renewal-upload-row__dropzone > p:not([class]),
.saa-renewal-upload-page > p:not([class]),
.saa-renewal-byb__card > p:not([class]),
.saa-renewal-form__section > p:not([class]):empty {
display: contents;
}
/* ----------------------------------------------------------------------
* Shared pill button (Figma "Frame 62": navy, 40px tall, radius 50px)
* -------------------------------------------------------------------- */
.saa-renewal-widget .saa-renewal-widget__button,
.saa-renewal-steps .saa-renewal-steps__start {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 32px;
border: 0;
border-radius: 50px;
background: var(--saa-renewal-navy);
color: #ffffff;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
}
.saa-renewal-widget .saa-renewal-widget__button:hover,
.saa-renewal-widget .saa-renewal-widget__button:focus,
.saa-renewal-steps .saa-renewal-steps__start:hover,
.saa-renewal-steps .saa-renewal-steps__start:focus {
background: #101c3e;
color: #ffffff;
text-decoration: none;
}
.saa-renewal-steps .saa-renewal-steps__start {
min-width: 123px;
}
.saa-renewal-steps .saa-renewal-steps__start--disabled {
background: var(--saa-renewal-muted);
color: #ffffff;
opacity: 1;
pointer-events: none;
cursor: default;
}
/* ----------------------------------------------------------------------
* S1 dashboard widget — "Information Container" (21:2775 / 228:1143)
* -------------------------------------------------------------------- */
.saa-renewal-widget {
background: #ffffff;
padding: 24px 32px;
margin-bottom: 1.5em;
}
/* Doubled selector: the theme's heading rules outrank a lone class. */
.saa-renewal-widget .saa-renewal-widget__title {
margin: 0;
color: var(--saa-renewal-red);
font-size: 22px;
font-weight: 700;
line-height: 1;
}
.saa-renewal-widget__copy {
padding: 16px 0;
margin: 16px 0;
}
.saa-renewal-widget__body {
margin: 0 0 16px;
color: var(--saa-renewal-ink);
font-size: 16px;
line-height: 1.25;
}
.saa-renewal-widget__body:last-child {
margin-bottom: 0;
}
.saa-renewal-widget__body--lead {
font-weight: 700;
}
/* The7's wc-dt-custom.css sets .woocommerce-MyAccount-content strong to
normal and loads after us — outrank it; the frame bolds "eligible"
inline (21:2777). */
.saa-renewal-widget .saa-renewal-widget__body strong {
font-weight: 700;
}
.saa-renewal-widget__cta {
margin: 0;
}
.saa-renewal-widget .saa-renewal-widget__button {
min-width: 300px;
}
/* S7 approved widget panel (228:1156) — white card, green title. */
.saa-renewal-widget--approved .saa-renewal-widget__title {
color: var(--saa-renewal-green);
}
/* ----------------------------------------------------------------------
* Dashboard status block — the standard countdown + percentage bar (+ CPD
* note) rebuilt by [saa_renewal_panel] (class-dashboard-panel.php) so one
* shortcode owns the dashboard's right column. Shown in the 'none' state and,
* without the CPD note, beneath the approved card in the 'with_bar' state.
* Mirrors the live Elementor progress widget / the Figma dashboard frame
* (big countdown, navy "Percentage remaining" bar).
* FRAGILE: visual parity with the previous Elementor progress widget — re-diff
* on staging (plan renewal-widget-into-dashboard-slot L5).
* -------------------------------------------------------------------- */
.saa-renewal-dash {
margin: 0;
}
.saa-renewal-dash__countdown {
margin: 0 0 16px;
line-height: 1.05;
}
.saa-renewal-dash__count {
display: inline;
color: var(--saa-renewal-ink);
font-size: 44px;
font-weight: 700;
}
.saa-renewal-dash__count-label {
color: var(--saa-renewal-ink);
font-size: 18px;
font-weight: 400;
}
.saa-renewal-dash__bar {
overflow: hidden;
width: 100%;
height: 40px;
border-radius: 50px;
background: #e9e9ef;
}
.saa-renewal-dash__bar-fill {
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
min-width: 0;
height: 100%;
padding: 0 18px;
border-radius: 50px;
background: var(--saa-renewal-navy);
color: #ffffff;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}
.saa-renewal-dash__bar-label,
.saa-renewal-dash__bar-value {
color: #ffffff;
overflow: hidden;
text-overflow: ellipsis;
}
.saa-renewal-dash__cpd {
margin: 16px 0 0;
color: var(--saa-renewal-ink);
font-size: 16px;
text-align: right;
}
/* ----------------------------------------------------------------------
* S3 landing — header row, eligibility copy (161:840)
* -------------------------------------------------------------------- */
/* ----------------------------------------------------------------------
* Renewal ENDPOINT top spacing (single scoped rule).
*
* The renewal landing (/renewal-application) and documents (/renewal-documents)
* surfaces render bare templates straight into the My Account content area —
* unlike the dashboard, which renders an Elementor template that carries its own
* top header + spacing — so their heading sits flush to the top.
*
* The child theme's my-account.php stamps the current endpoint slug as a class
* on .woocommerce-MyAccount-content (e.g. `renewal-application`), so ONE rule
* gives exactly these two pages the Figma top spacing (256:2290 ≈ 32px tablet /
* ~40px desktop) without affecting the dashboard or any other account page.
* -------------------------------------------------------------------- */
.woocommerce-MyAccount-content.renewal-application,
.woocommerce-MyAccount-content.renewal-documents {
padding-top: 40px;
}
/* ----------------------------------------------------------------------
* Portal header band (Plugin::render_portal_header) — the "Online
* Accreditation Platform" heading + rule that every other portal page
* carries as an Elementor heading+divider. Spec copied verbatim from the
* canonical Dashboard template (post 917 _elementor_data): right-aligned
* Poppins 18px/500 #2E2E2E, then a #EDE9E9 rule with 30px below. Rendered
* as a
, but Poppins is pinned anyway — The7's heading variables would
* otherwise force Roboto Condensed (same trap fixed in 0.16.1 / 0.17.0).
*
* This is a TALL header band, matching the live/canonical portal pages
* (Dashboard, Accreditations): the label sits at the TOP and the rule drops
* down ~114px to align with the bottom of the sidebar logo, then a generous
* gap before the page content. On the canonical pages that height comes from
* the big inline page title; the renewal band has no inline title, so the
* height is set explicitly (min-height + the rule pushed to the bottom).
*
* All spacing lives on the WRAPPER / title, never the
: Elementor's
* frontend.css carries `.elementor hr { margin: 0 }` (specificity 0,1,1) which
* beats a single-class rule on the
, so on the Elementor-built My Account
* page an
-only margin is zeroed. Wrapper/title spacing sidesteps that and
* stays consistent on the plain (non-Elementor) standalone renewal pages too.
* Restored in 0.19.19 (0.19.14 wrongly removed it; every other portal page has it).
* -------------------------------------------------------------------- */
.saa-renewal-portal-header {
display: flex;
flex-direction: column;
/* Height tuned so the rule paints on the SAME row as the CANONICAL portal band
divider — the Elementor heading+divider every other portal page carries
(measured on the real staging dashboard /my-account/: that divider's line is
at Y≈186, which is ~12px BELOW the sidebar `.my-account-logo` border-bottom
at ~174). The band is NOT meant to touch the logo divider — it must line up
with the OTHER pages' band rule so all portal pages read consistently. At
min-height 135px the renewal rule lands on row 186 (= the canonical divider,
sameRowAsCanonical: true). 0.19.20's 122px wrongly chased the logo line (~173)
and broke that consistency — reverted in 0.19.21. FRAGILE/env-divergent: the
chrome's logo + content Y depend on the My-Account layout; re-verify on staging
by comparing to the DASHBOARD band, NOT the sidebar logo line. */
min-height: 135px;
margin: 0 0 56px;
}
.saa-renewal-portal-header__title {
margin: 0;
font-family: "Poppins", Helvetica, Arial, Verdana, sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 1.3;
color: #2e2e2e;
text-align: right;
}
/* Scoped with the wrapper class (specificity 0,2,0) so it beats Elementor's
`.elementor hr { margin: 0 }` (0,1,1) — otherwise the margin-top:auto that
pushes the rule to the bottom of the band is zeroed on the My Account page. */
.saa-renewal-portal-header .saa-renewal-portal-header__rule {
margin: auto 0 0; /* push the rule to the bottom of the band zone */
border: 0;
border-top: 1px solid #ede9e9;
}
@media (max-width: 767px) {
/* #4 (Lindsay): vertically centre "Online Accreditation Platform" between the
two grey lines on mobile, with 16px above + 16px below. The line ABOVE the
band is the chrome `.accnumber` divider (under the account number); the band
sat 40px below it (the .accnumber margin-bottom 20px + a 20px sidebar→content
gap, both shared chrome we can't touch without affecting every page), with
only 12px below the text. Pull our band up 24px (40→16) and set 16px below so
the text is centred between the chrome line and the band rule. Measured on the
real staging DOM (gapAbove 16 = gapBelow 16). NB the -24px is tuned to that
40px chrome gap — re-verify at a true 390 (the resize clamp is ~500). */
.saa-renewal-portal-header {
min-height: 0;
margin: -24px 0 28px;
}
.saa-renewal-portal-header__title {
margin: 0 0 16px;
text-align: center;
}
}
.saa-renewal-landing {
color: var(--saa-renewal-ink);
}
.saa-renewal-landing__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 0 0 32px;
}
.saa-renewal-landing .saa-renewal-landing__title {
margin: 0;
color: var(--saa-renewal-navy);
font-size: 32px;
font-weight: 700;
line-height: 1.2;
}
.saa-renewal-landing__due {
margin: 0;
font-size: 16px;
color: var(--saa-renewal-ink);
}
.saa-renewal-landing__eligible {
margin: 0 0 32px;
color: var(--saa-renewal-green);
font-size: 16px;
font-weight: 700;
}
.saa-renewal-landing__lead {
margin: 0 0 32px;
font-size: 16px;
}
/* Multi-paragraph intro copy block above the steps card (222:1014). */
.saa-renewal-landing__copy {
margin: 0 0 32px;
color: var(--saa-renewal-ink);
font-size: 16px;
}
.saa-renewal-landing__copy p {
margin: 0 0 16px;
font-size: 16px;
}
.saa-renewal-landing__copy p:last-child {
margin-bottom: 0;
}
.saa-renewal-landing__copy-lead {
font-weight: 700;
}
.saa-renewal-landing__warning--red,
.saa-renewal-error {
color: #b3261e;
border: 1px solid #b3261e;
border-radius: 4px;
padding: 0.75em 1em;
margin: 1em 0;
}
/* Application-form client error summary: tidy heading + indented bullet list
* so the markers don't crowd the border (matches the documents summary). */
.saa-renewal-form__client-errors {
border-left-width: 4px;
background: #fdecec;
}
.saa-renewal-form__client-errors > p {
margin: 0 0 8px;
font-weight: 700;
}
.saa-renewal-form__client-errors ul {
margin: 0;
padding-left: 22px;
list-style: disc;
}
.saa-renewal-form__client-errors li {
margin: 4px 0;
padding-left: 4px;
line-height: 1.4;
}
/* ----------------------------------------------------------------------
* Ineligible landing (Figma "Renewal Landing Page - Ineligible" 179:1313).
* The widget variant (179:1240) reuses the default widget rules — its
* __title is already red, which matches the frame.
* -------------------------------------------------------------------- */
/* Red "not eligible" lead — mirrors the green __eligible line. */
.saa-renewal-landing__not-eligible {
margin: 0 0 16px;
color: var(--saa-renewal-red);
font-size: 16px;
font-weight: 700;
}
.saa-renewal-landing__panel--ineligible {
background: var(--saa-renewal-card-bg);
padding: 24px 32px;
margin: 0 0 24px;
}
/* Doubled selector: the theme's My Account heading rules outrank a lone class. */
.saa-renewal-landing .saa-renewal-landing__panel--ineligible .saa-renewal-landing__reasons-title {
margin: 0 0 12px;
color: var(--saa-renewal-ink);
font-size: 18px;
font-weight: 700;
line-height: 1.3;
}
.saa-renewal-landing__reason-list {
margin: 0;
padding-left: 1.25em;
color: var(--saa-renewal-ink);
font-size: 16px;
line-height: 1.5;
}
.saa-renewal-landing__reason-list li {
margin: 0 0 8px;
}
.saa-renewal-landing__reason-list li:last-child {
margin-bottom: 0;
}
/* Outstanding mandatory-training modules, nested under "Incomplete Mandatory
Training" — one indent deeper than the parent reason (Figma 179:1317). */
.saa-renewal-landing__module-list {
margin: 8px 0 0;
padding-left: 1.25em;
list-style: disc;
}
.saa-renewal-landing__module-list li {
margin: 0 0 4px;
}
.saa-renewal-landing__module-list li:last-child {
margin-bottom: 0;
}
/* The 21-day copy on a "No" answer is red bold text, no box (32:1530). */
.saa-renewal-upload-row__no-copy--red .saa-renewal-21-day-copy,
.saa-renewal-form__no-copy--red .saa-renewal-21-day-copy {
margin: 0;
color: var(--saa-renewal-red);
font-size: 16px;
font-weight: 700;
}
/* ----------------------------------------------------------------------
* Steps card — "Track your progress" (161:847)
* -------------------------------------------------------------------- */
.saa-renewal-steps {
background: var(--saa-renewal-card-bg);
padding: 32px;
}
.saa-renewal-steps__heading {
margin: 0 0 24px;
color: var(--saa-renewal-ink);
font-size: 20px;
font-weight: 700;
}
.saa-renewal-steps__columns {
padding-bottom: 16px;
border-bottom: 1px solid var(--saa-renewal-ink);
color: var(--saa-renewal-ink);
font-size: 16px;
font-weight: 700;
}
.saa-renewal-steps__list {
list-style: none;
margin: 0;
padding: 0;
}
.saa-renewal-steps__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 24px 0;
border-bottom: 1px solid var(--saa-renewal-muted);
}
.saa-renewal-steps__label {
display: flex;
align-items: center;
gap: 16px;
flex: 1 1 auto;
color: var(--saa-renewal-ink);
font-size: 16px;
/* Pill-less rows keep the 40px pill slot so every row is 88px tall,
matching the frames (222:1396 keeps an empty 40px spacer). */
min-height: 40px;
}
.saa-renewal-steps__icon {
flex: 0 0 auto;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: var(--saa-renewal-dot);
}
/* Orange "(awaiting review)" suffix on a step label (650:1171, node 780:1197) —
sits inline after the (struck) label via the __label flex gap; its own colour
overrides the grey the --done label sets. */
.saa-renewal-steps__suffix {
color: var(--saa-renewal-orange);
}
.saa-renewal-steps__row--locked .saa-renewal-steps__label {
color: var(--saa-renewal-muted);
}
.saa-renewal-steps__row--locked .saa-renewal-steps__icon {
background-color: var(--saa-renewal-muted);
}
.saa-renewal-steps__row--done .saa-renewal-steps__label {
color: var(--saa-renewal-dot);
}
.saa-renewal-steps__row--done .saa-renewal-steps__icon {
background-color: var(--saa-renewal-done-green);
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M11.29 6.71 7.5 10.5 6.21 9.21' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
/* The combined "Upload Required Documents" row (222:953): parent step +
nested doc list left, UPLOAD pill top-right. */
.saa-renewal-steps__row--documents {
align-items: flex-start;
}
.saa-renewal-steps__doc-group {
display: flex;
flex-direction: column;
gap: 16px;
flex: 1 1 auto;
max-width: 526px;
}
.saa-renewal-steps__doc-group .saa-renewal-documents {
display: flex;
flex-direction: column;
gap: 16px;
margin: 0;
padding: 0;
}
.saa-renewal-steps__doc-group .saa-renewal-documents__row {
justify-content: flex-start;
align-items: center;
gap: 16px;
padding: 0 0 0 48px; /* icon at x48, label at x80 (222:958) */
border-bottom: 0;
}
/* Per-document status icon — same 16px circle as the steps dot. */
.saa-renewal-documents__icon {
flex: 0 0 auto;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: var(--saa-renewal-dot); /* not_submitted default */
}
.saa-renewal-documents__icon--approved,
.saa-renewal-documents__icon--completed {
background-color: var(--saa-renewal-done-green);
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M11.29 6.71 7.5 10.5 6.21 9.21' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
/* Orange = the ball is with Scheme Operations (no installer action). */
.saa-renewal-documents__icon--awaiting_review,
.saa-renewal-documents__icon--escalated {
background-color: var(--saa-renewal-orange);
}
/* Grey = the ball is back with the installer (a returned document must be
re-uploaded), same dot as not_submitted + the "Upload Required Documents"
step. */
.saa-renewal-documents__icon--returned_for_info,
.saa-renewal-documents__icon--closed_no_response {
background-color: var(--saa-renewal-dot);
}
.saa-renewal-documents__label {
color: var(--saa-renewal-ink);
font-size: 16px;
}
/* Suffix is orange for the genuinely-with-Scheme-Ops states. */
.saa-renewal-documents__status {
color: var(--saa-renewal-orange);
font-size: 16px;
white-space: nowrap;
}
/* …but "(returned for info)" reads as "your turn", consistent with the other
still-to-upload rows — grey suffix to match the grey dot, not the orange
Scheme-Ops callout. */
.saa-renewal-documents__status--returned_for_info,
.saa-renewal-documents__status--closed_no_response {
color: var(--saa-renewal-dot);
}
/* Pre-requisite "Blocker Text" block inside the steps table (179:1071):
* a red bold lead (179:1072) above ink guidance paragraphs (802:1308). */
.saa-renewal-steps__note {
list-style: none;
padding: 24px 0;
border-bottom: 1px solid var(--saa-renewal-muted);
}
.saa-renewal-steps__note-lead {
display: block;
color: var(--saa-renewal-red);
font-size: 16px;
font-weight: 700;
}
.saa-renewal-steps__note-paragraph {
display: block;
margin-top: 24px;
color: var(--saa-renewal-ink);
font-size: 16px;
font-weight: 400;
}
/* ----------------------------------------------------------------------
* S12 — Upload page (222:1073 / 222:1279)
* -------------------------------------------------------------------- */
.saa-renewal-upload-page > h2 {
margin: 0 0 32px;
color: var(--saa-renewal-navy);
font-size: 32px;
font-weight: 700;
}
.saa-renewal-upload-page__back {
margin: 0 0 32px;
font-size: 16px;
}
.saa-renewal-upload-page__back a {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--saa-renewal-navy);
text-decoration: none;
}
.saa-renewal-upload-page .saa-renewal-upload-page__subheading {
margin: 0 0 32px;
color: var(--saa-renewal-ink);
font-size: 20px;
font-weight: 700;
}
.saa-renewal-upload-page__intro {
margin: 0 0 32px;
color: var(--saa-renewal-ink);
font-size: 16px;
}
/* Completed panel (222:1337) — steps-card pattern. */
.saa-renewal-upload-page__completed {
margin: 0 0 32px;
padding: 32px;
background: var(--saa-renewal-card-bg);
}
.saa-renewal-upload-page__completed h3 {
margin: 0;
padding-bottom: 16px;
border-bottom: 1px solid var(--saa-renewal-ink);
color: var(--saa-renewal-ink);
font-size: 16px;
font-weight: 700;
}
.saa-renewal-upload-page__completed .saa-renewal-documents {
margin: 0;
}
.saa-renewal-upload-page__completed .saa-renewal-documents__row {
justify-content: flex-start;
gap: 16px;
min-height: 88px;
padding: 24px 0;
border-bottom: 1px solid var(--saa-renewal-muted);
}
.saa-renewal-upload-page__completed .saa-renewal-documents__row::before {
content: "";
flex: 0 0 auto;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: var(--saa-renewal-done-green);
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M11.29 6.71 7.5 10.5 6.21 9.21' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.saa-renewal-upload-page__completed .saa-renewal-documents__label {
flex: 0 1 auto;
color: var(--saa-renewal-ink);
font-size: 16px;
}
/* The frame's completed rows carry no status chip. */
.saa-renewal-upload-page__completed .saa-renewal-documents__chip {
display: none;
}
/* Each outstanding document renders as its own #fafafa card. */
.saa-renewal-upload-page .saa-renewal-upload-row {
margin: 0 0 32px;
padding: 32px;
background: var(--saa-renewal-card-bg);
}
.saa-renewal-upload-page .saa-renewal-upload-row__title {
font-size: 20px;
line-height: 22px;
}
/* ----------------------------------------------------------------------
* Later-phase surfaces — structural rules kept until their Figma pass
* -------------------------------------------------------------------- */
.saa-renewal-documents {
list-style: none;
margin: 1em 0;
padding: 0;
}
.saa-renewal-documents__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
padding: 0.6em 0;
border-bottom: 1px solid #e5e5e5;
}
.saa-renewal-documents__chip {
border-radius: 999px;
padding: 0.2em 0.9em;
font-size: 0.85em;
white-space: nowrap;
background: #e0e0e0;
color: #4a4a4a;
}
.saa-renewal-documents__chip--approved {
background: #d8efe0;
color: #1d6b3c;
}
.saa-renewal-documents__chip--awaiting_review,
.saa-renewal-documents__chip--returned_for_info,
.saa-renewal-documents__chip--escalated {
background: #fdebd2;
color: #9a5b13;
}
/* S7 landing complete panel — white card with green title (228:1156;
the template header's "green panel" predates the frame — Figma wins). */
.saa-renewal-landing__panel--approved {
background: #ffffff;
padding: 24px 0;
}
/* Doubled selector: the theme's My Account heading rules outrank a lone
class + element pair. */
.saa-renewal-landing .saa-renewal-landing__panel--approved h3 {
margin: 0;
color: var(--saa-renewal-green);
font-size: 22px;
font-weight: 700;
line-height: 22px;
}
.saa-renewal-landing .saa-renewal-landing__panel--approved p {
margin: 0;
padding: 16px 0;
color: var(--saa-renewal-ink);
font-size: 16px;
line-height: normal;
}
/* ----------------------------------------------------------------------
* S9 — Before You Begin (3:553)
* -------------------------------------------------------------------- */
.saa-renewal-byb h1 {
margin: 0 0 32px;
color: var(--saa-renewal-navy);
font-size: 32px;
font-weight: 700;
line-height: 1.2;
}
.saa-renewal-byb__intro {
margin: 0 0 32px;
color: var(--saa-renewal-ink);
font-size: 16px;
}
.saa-renewal-byb__card {
background: var(--saa-renewal-card-bg);
padding: 32px;
margin: 0 0 32px;
}
.saa-renewal-byb__section {
margin: 0 0 32px;
}
.saa-renewal-byb__section:last-child {
margin-bottom: 0;
}
.saa-renewal-byb .saa-renewal-byb__section-heading {
margin: 0 0 16px;
color: var(--saa-renewal-ink);
font-size: 20px;
font-weight: 700;
line-height: 22px;
}
.saa-renewal-byb__section p {
margin: 0 0 8px;
color: var(--saa-renewal-ink);
font-size: 16px;
}
.saa-renewal-byb__section p:last-child {
margin-bottom: 0;
}
.saa-renewal-byb__list {
list-style: disc;
margin: 0 0 8px;
padding: 0 0 0 24px;
color: var(--saa-renewal-ink);
font-size: 16px;
}
.saa-renewal-byb__list li {
margin: 0;
}
/* Shared pill treatment for the submit button. */
.saa-renewal-byb .saa-renewal-byb__start {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 32px;
border: 0;
border-radius: 50px;
background: var(--saa-renewal-navy);
color: #ffffff;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
}
.saa-renewal-byb .saa-renewal-byb__start:hover,
.saa-renewal-byb .saa-renewal-byb__start:focus {
background: #101c3e;
color: #ffffff;
}
/* ----------------------------------------------------------------------
* S10 — Renewal Application Details Form (187:621, 171:1284, 32:1439,
* 72:1362, 72:1407, 86:641)
* -------------------------------------------------------------------- */
.saa-renewal-form {
/* Read-only field bg + dropzone border (32:970 / 32:1483). */
--saa-renewal-field-grey: #e4e4e4;
/* Privacy notice inline link (32:957). */
--saa-renewal-link: #0088ff;
color: var(--saa-renewal-ink);
}
.saa-renewal-form > h1 {
margin: 0 0 32px;
color: var(--saa-renewal-navy);
font-size: 32px;
font-weight: 700;
line-height: 32px;
}
/* Privacy Notice — white card, ink border (32:956). */
.saa-renewal-form__privacy-gate {
margin: 0 0 32px;
padding: 32px;
background: #ffffff;
border: 1px solid var(--saa-renewal-ink);
}
.saa-renewal-form .saa-renewal-form__privacy-title {
margin: 0 0 24px;
color: var(--saa-renewal-ink);
font-size: 20px;
font-weight: 700;
}
.saa-renewal-form__privacy-gate p {
margin: 0 0 24px;
font-size: 16px;
}
.saa-renewal-form__privacy-gate a {
color: var(--saa-renewal-link);
}
.saa-renewal-form__privacy-gate label {
display: flex;
align-items: center;
gap: 16px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
/* 24px native controls, navy accent (Figma draws custom 24px icons).
!important is deliberate: the Customizer's Additional CSS ships
`.nav-container input[type="checkbox"], input[type="radio"]
{ display:none !important }` — the second selector lost its scope and
hides EVERY radio sitewide. Counter it here; site-level fix flagged. */
.saa-renewal-form input[type="checkbox"],
.saa-renewal-form input[type="radio"] {
display: inline-block !important;
width: 24px;
height: 24px;
flex: 0 0 24px;
margin: 0;
accent-color: var(--saa-renewal-navy);
}
.saa-renewal-form__intro {
margin: 0 0 32px;
font-size: 16px;
}
/* Section cards. */
.saa-renewal-form__section {
display: flex;
flex-direction: column;
gap: 24px;
margin: 0 0 32px;
padding: 32px;
background: var(--saa-renewal-card-bg);
border: 0;
}
.saa-renewal-form__section > h2 {
margin: 0;
color: var(--saa-renewal-ink);
font-size: 20px;
font-weight: 700;
line-height: 22px;
}
.saa-renewal-form__section p {
margin: 0;
font-size: 16px;
}
.saa-renewal-form__warning {
color: var(--saa-renewal-red);
font-weight: 700;
}
.saa-renewal-form__req {
color: var(--saa-renewal-red);
}
/* Two-column field rows, 80px gutter (32:966). */
.saa-renewal-form__row {
display: flex;
gap: 80px;
}
.saa-renewal-form__row > * {
flex: 1 1 0;
min-width: 0;
}
.saa-renewal-form__row--half > * {
flex: 0 1 calc( 50% - 40px );
}
/* Field = 12px label over its box, 8px gap (32:968). */
.saa-renewal-form__field {
display: flex;
flex-direction: column;
gap: 8px;
}
.saa-renewal-form__field > label,
.saa-renewal-form__field-label,
.saa-renewal-form__acc-label {
color: var(--saa-renewal-ink);
font-size: 12px;
font-weight: 400;
line-height: 16px;
}
.saa-renewal-form__value--readonly {
display: flex;
align-items: center;
min-height: 38px;
padding: 8px 16px;
background: var(--saa-renewal-field-grey);
font-size: 16px;
line-height: 20px;
}
/* #30 (Lindsay): the post-payment documents page (.saa-renewal-upload-page) reuses
upload-row.php but the form's input box never reached it — its date/text inputs
rendered with a faint border + grey text rgb(133,134,140). Mirror the form box
(white, 1px black border, ink text) onto the upload page so a filled value is
dark and consistent. Confirmed on the real staging /renewal-documents/ DOM. */
.saa-renewal-form input[type="text"],
.saa-renewal-form select,
.saa-renewal-upload-page input[type="text"],
.saa-renewal-upload-page .saa-renewal-date,
.saa-renewal-upload-page select {
width: 100%;
height: 38px;
padding: 8px 16px;
background: #ffffff;
border: 1px solid #000000;
border-radius: 0;
color: var(--saa-renewal-ink);
font-size: 16px;
line-height: 20px;
}
.saa-renewal-form input::placeholder,
.saa-renewal-upload-page input::placeholder {
color: var(--saa-renewal-muted);
opacity: 1;
}
/* #25 (Lindsay): the renewal order-received page renders the WooCommerce order
overview in The7's light greys (labels rgb(180,181,187), heading/values
rgb(139,141,148)) — Lindsay wants the whole page one consistent ink. Scoped to
`body.saa-renewal-order-received` (set by Checkout_Presentation::renewal_checkout_body_class()
ONLY on a renewal order-received page) so non-renewal order-received pages are
untouched; the navy "Return to my renewal application" CTA is not targeted so it
keeps its colour. `!important` counters The7's numerous order-overview greys
(rule 15 §3). Validated on the real staging order-received DOM (0 grey left, CTA intact). */
body.saa-renewal-order-received .woocommerce-order,
body.saa-renewal-order-received .woocommerce-order p,
body.saa-renewal-order-received .woocommerce-order li,
body.saa-renewal-order-received .woocommerce-order td,
body.saa-renewal-order-received .woocommerce-order th,
body.saa-renewal-order-received .woocommerce-order strong,
body.saa-renewal-order-received .woocommerce-order mark,
body.saa-renewal-order-received .woocommerce-order .woocommerce-Price-amount,
body.saa-renewal-order-received .woocommerce-order .woocommerce-Price-amount * {
color: var(--saa-renewal-ink) !important;
}
/* Accreditation Held rows (126:884). */
.saa-renewal-form__accreditations {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}
.saa-renewal-form__accreditations li {
display: flex;
gap: 80px;
padding: 24px 32px;
border: 1px solid var(--saa-renewal-ink);
}
.saa-renewal-form__accreditations li > * {
flex: 1 1 0;
min-width: 0;
}
.saa-renewal-form__acc-label {
display: block;
margin: 0 0 8px;
}
.saa-renewal-form__accreditations strong {
font-size: 16px;
font-weight: 700;
line-height: 20px;
}
/* State / network toggles styled as the frame's selection chips. */
.saa-renewal-form__states,
.saa-renewal-form__networks {
display: flex;
flex-wrap: wrap;
gap: 8px;
max-width: 616px;
}
.saa-renewal-form__state-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 12px;
background: rgba( 0, 0, 0, 0.1 );
font-size: 16px;
line-height: 20px;
cursor: pointer;
}
/* Per-state bordered cards (32:1446). */
.saa-renewal-form__state-card {
display: flex;
flex-direction: column;
gap: 24px;
margin: 0;
padding: 24px;
border: 1px solid var(--saa-renewal-ink);
border-radius: 0;
}
.saa-renewal-form__state-card h3 {
margin: 0;
color: var(--saa-renewal-ink);
font-size: 16px;
font-weight: 700;
}
.saa-renewal-form__question {
font-size: 16px;
}
/* Yes/No rows. */
.saa-renewal-form__choice,
.saa-renewal-upload-row__choice {
display: flex;
gap: 16px;
width: 100%;
max-width: 592px;
}
.saa-renewal-form__choice label,
.saa-renewal-upload-row__choice label {
display: flex;
flex: 1 1 0;
align-items: center;
gap: 8px;
font-size: 16px;
line-height: 20px;
cursor: pointer;
}
/* Same stray-Customizer-rule counter as the form controls above. */
.saa-renewal-upload-row__choice input[type="radio"] {
display: inline-block !important;
width: 24px;
height: 24px;
flex: 0 0 24px;
margin: 0;
accent-color: var(--saa-renewal-navy);
}
/* Fields-left / dropzone-right split, 32px gutter (32:1467). */
.saa-renewal-form__split {
display: flex;
gap: 32px;
align-items: stretch;
}
.saa-renewal-form__split > * {
flex: 1 1 0;
min-width: 0;
}
.saa-renewal-form__split-fields {
display: flex;
flex-direction: column;
gap: 24px;
}
.saa-renewal-form__split-fields p {
margin: 0;
font-size: 16px;
}
.saa-renewal-form__split .saa-renewal-upload-row {
display: flex;
flex-direction: column;
}
/* Bare-mode only: when the upload-row wrapper is the flex child, the
dropzone fills it. Question-mode dropzones are direct split children
and keep the equal-column flex from `__split > *`. */
.saa-renewal-form__split .saa-renewal-upload-row .saa-renewal-upload-row__dropzone {
flex: 1 1 auto;
}
/* Upload component (partials/upload-row.php). */
.saa-renewal-upload-row {
display: flex;
flex-direction: column;
gap: 24px;
margin: 0;
}
.saa-renewal-upload-row__title {
margin: 0;
font-size: 16px;
font-weight: 700;
line-height: 22px;
}
.saa-renewal-upload-row__question {
margin: 0;
font-size: 16px;
}
.saa-renewal-upload-row__helper {
margin: 0;
font-size: 16px;
}
/* Dropzone card (32:1483). */
.saa-renewal-upload-row__dropzone {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 32px;
background: #ffffff;
border: 2px dashed var(--saa-renewal-field-grey);
border-radius: 8px;
text-align: center;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
/* Drag-and-drop affordance — same hover/active highlight as the checkout
dropzone (saa-core file-drop.css .file-drop-area.is-active). */
.saa-renewal-upload-row__dropzone:hover,
.saa-renewal-upload-row__dropzone.is-dragover {
border-color: #007cba;
background: #e6f7ff;
}
.saa-renewal-upload-row__dropzone-title {
margin: 0;
font-size: 16px;
font-weight: 700;
line-height: 22px;
}
.saa-renewal-upload-row__dropzone-icon {
width: 24px;
height: 24px;
color: var(--saa-renewal-ink);
}
.saa-renewal-upload-row__hint {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
color: var(--saa-renewal-ink);
font-size: 16px;
}
/* Invisible full-card overlay: click anywhere on the dropzone to browse,
and the native input doubles as the drop target (mirrors the checkout
.file-drop-area .file-input pattern). */
.saa-renewal-upload-row__file {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
cursor: pointer;
}
.saa-renewal-upload-row__status {
margin: 0;
color: var(--saa-renewal-green);
font-size: 16px;
font-weight: 700;
}
/* Pills — BACK + PROCEED TO CHECKOUT (shared pill pattern). */
.saa-renewal-form .saa-renewal-form__proceed,
.saa-renewal-form .saa-renewal-form__back {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 32px;
border: 0;
border-radius: 50px;
background: var(--saa-renewal-navy);
color: #ffffff;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.saa-renewal-form .saa-renewal-form__proceed:hover,
.saa-renewal-form .saa-renewal-form__proceed:focus,
.saa-renewal-form .saa-renewal-form__back:hover,
.saa-renewal-form .saa-renewal-form__back:focus {
background: #101c3e;
color: #ffffff;
}
/* ----------------------------------------------------------------------
* S11 — Checkout Summary panel (173:777)
* -------------------------------------------------------------------- */
/* #22 (Lindsay — Figma 172:509): the renewal checkout order must read
* Application Payment → Summary → Payment(order table). But The7 prints its
* "Payment" order-review heading (#order_review_heading) BEFORE our Summary
* panel (both are children of `.wc-order-review`, which is display:block), so
* "Payment" was orphaned at the top, ABOVE "Summary" and far from its own table.
* Make the column a flex-column and pull the Summary panel above the heading, so
* the heading sits with its table. Scoped to the renewal checkout; safe at all
* widths (if Summary were already first, order:-1 keeps it first). Validated on
* the real staging DOM (Summary now above the Payment heading). */
body.saa-renewal-checkout .wc-order-review {
display: flex;
flex-direction: column;
}
body.saa-renewal-checkout .wc-order-review .saa-renewal-summary-panel {
order: -1;
margin-bottom: 24px;
}
.saa-renewal-summary-panel {
background: var(--saa-renewal-card-bg);
border: 0;
border-radius: 0;
padding: 32px;
margin-bottom: 1.5em;
color: var(--saa-renewal-ink);
}
.saa-renewal-summary-panel .saa-renewal-summary-panel__heading {
margin: 0 0 24px;
color: var(--saa-renewal-ink);
font-size: 22px;
font-weight: 700;
line-height: 22px;
}
.saa-renewal-summary-panel__intro {
margin: 0 0 24px;
color: var(--saa-renewal-ink);
font-size: 16px;
}
.saa-renewal-summary-panel__rows {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.saa-renewal-summary-panel__row {
display: flex;
gap: 80px;
align-items: flex-start;
border: 1px solid var(--saa-renewal-ink);
border-radius: 0;
padding: 24px 32px;
margin: 0;
width: 100%;
box-sizing: border-box;
}
.saa-renewal-summary-panel__class,
.saa-renewal-summary-panel__type {
flex: 1 0 0;
min-width: 1px;
color: var(--saa-renewal-ink);
font-size: 16px;
font-weight: 700;
line-height: 20px;
}
.saa-renewal-summary-panel__field-label {
display: block;
margin-bottom: 8px;
color: var(--saa-renewal-ink);
font-size: 12px;
font-weight: 400;
line-height: 16px;
text-transform: none;
}
/* ----------------------------------------------------------------------
* S11 — Payment panel (173:789): restyles WooCommerce's order review,
* scoped to renewal checkouts via body.saa-renewal-checkout
* (Checkout_Presentation::renewal_checkout_body_class). Third-party
* markup — CSS only, no template override (rule 03).
* -------------------------------------------------------------------- */
/* Page header (Figma 8:1505 — title 8:1817 navy/32px, subtext 8:1818 ink/16px).
The would inherit The7's --the7-h1-font-family (Roboto Condensed), so
the brand font is pinned (same as .saa-renewal-byb h1, fixed in 0.16.1). */
.saa-renewal-checkout .saa-renewal-checkout-header__title {
margin: 0 0 16px;
color: var(--saa-renewal-navy);
font-family: "Poppins", Helvetica, Arial, Verdana, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.2;
}
.saa-renewal-checkout .saa-renewal-checkout-header__subtitle {
margin: 0 0 8px;
color: var(--saa-renewal-ink);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}
.saa-renewal-checkout #order_review {
background: var(--saa-renewal-card-bg);
/* #22 (Figma 172:509): the "Payment" heading (#order_review_heading) is pulled
into this grey card (shared bg — its padding provides the card top), so drop
the top padding here and add a 24px gap down to the next section. */
padding: 0 32px 32px;
margin: 0 0 24px;
border: 0;
border-radius: 0;
color: var(--saa-renewal-ink);
}
/* #41: the order-review line cells (qty, line total, transaction-fee line)
inherit The7's light grey; Figma 8:1505 shows all order text as ink. Scope
the standard ink colour to every cell of the renewal review table. */
.saa-renewal-checkout .woocommerce-checkout-review-order-table,
.saa-renewal-checkout .woocommerce-checkout-review-order-table th,
.saa-renewal-checkout .woocommerce-checkout-review-order-table td,
.saa-renewal-checkout .woocommerce-checkout-review-order-table .product-quantity,
.saa-renewal-checkout .woocommerce-checkout-review-order-table .woocommerce-Price-amount {
color: var(--saa-renewal-ink);
}
/* #22 (Figma 172:509): "Payment" is a card heading, not an orphaned label. Give it
the card background + top/side padding (matching #order_review below, shared grey)
and size it to match the "Summary" heading (22px). It butts seamlessly onto
#order_review (padding-top:0) so the two read as one padded Payment card. */
.saa-renewal-checkout #order_review_heading {
background: var(--saa-renewal-card-bg);
margin: 0;
padding: 32px 32px 8px;
color: var(--saa-renewal-ink);
font-size: 22px;
font-weight: 700;
line-height: 22px;
}
.saa-renewal-checkout .woocommerce-checkout-review-order-table .product-name {
padding: 0 0 24px;
border: 0;
color: var(--saa-renewal-ink);
font-size: 16px;
font-weight: 400;
text-align: left;
}
/* #17 (Lindsay): the order-review line amounts render in The7's light grey
* `var(--the7-secondary-text-color)` rgb(180,181,187) — the greyed "$690.00"
* the tester flagged. The7's `wc-dt-custom.css` wins via
* `.woocommerce-checkout-review-order .product-total .woocommerce-Price-amount`
* (0,3,0), which TIES 0.17.0's `.saa-renewal-checkout … .woocommerce-Price-amount`
* (0,3,0) and beats it on load order. Out-specify The7 with the `body` scope
* (0,3,1) so EVERY amount span inks consistently (rule 15: win by specificity,
* not !important). */
body.saa-renewal-checkout .woocommerce-checkout-review-order-table .woocommerce-Price-amount {
color: var(--saa-renewal-ink);
}
.saa-renewal-checkout .woocommerce-checkout-review-order-table tfoot tr {
display: block;
padding: 24px 0;
border-top: 1px solid var(--saa-renewal-ink);
}
.saa-renewal-checkout .woocommerce-checkout-review-order-table tfoot tr:last-child {
border-bottom: 1px solid var(--saa-renewal-ink);
}
.saa-renewal-checkout .woocommerce-checkout-review-order-table tfoot th,
.saa-renewal-checkout .woocommerce-checkout-review-order-table tfoot td {
display: block;
width: 100%;
padding: 0;
border: 0;
color: var(--saa-renewal-ink);
text-align: left;
}
.saa-renewal-checkout .woocommerce-checkout-review-order-table tfoot th {
margin-bottom: 8px;
font-size: 16px;
font-weight: 400;
line-height: 20px;
}
.saa-renewal-checkout .woocommerce-checkout-review-order-table tfoot td {
font-size: 16px;
font-weight: 700;
line-height: 22px;
}
.saa-renewal-thankyou {
border: 1px solid #3c9a5f;
border-radius: 4px;
background: #f0f9f3;
padding: 1.25em;
margin: 1.5em 0;
}
/* ----------------------------------------------------------------------
* Small screens
* -------------------------------------------------------------------- */
@media ( max-width: 767px ) {
/* #20: the dashboard renewal section's mobile padding must match the other
* My Account sections (30px top/bottom, 20px L/R). The section is an Elementor
* element on template 42425, so we override its Elementor padding custom-props.
* FRAGILE: hardcoded Elementor element id — re-confirm per environment
* (memory: elementor-ids-env-divergent). renewals.css loads on is_account_page(). */
.elementor-42425 .elementor-element.elementor-element-5c104f50 {
--width: 100%;
--padding-top: 30px;
--padding-bottom: 30px;
--padding-left: 20px;
--padding-right: 20px;
}
/* #5: the renewal landing + documents content ran edge-to-edge — the My-Account
* content box (`.myaccount_container`) has 0 L/R padding under the `dashboard`
* endpoint-class fallback, so the title/text/cards sat ~6-8px from the viewport
* edge. Give our renewal wrappers a 16px gutter — Lindsay's frames use a 16px
* content gutter at BOTH mobile (390, node 256:2330) and tablet (744, node
* 256:2290), so one value covers the whole ≤767 regime (which serves both her
* 390 + 744 artboards). Scoped to our wrappers (present regardless of the
* endpoint class). NB the live nav/menu-bar padding (20px ≤600, 40px 601-767)
* is heavier than the design — the content matches the Figma gutter, not the
* live menu bar. */
.saa-renewal-landing,
.saa-renewal-upload-page {
padding-left: 16px;
padding-right: 16px;
}
/* #22/#33: the renewal checkout `#order_review` ships a flat 32px padding with
* no mobile override, so on phones the order summary squashes to ~290px and the
* payment/card area to ~226px — too narrow to enter card details. Cut the L/R
* padding on mobile so the summary + card inputs get their width back; keep the
* 32px top/bottom rhythm. */
.saa-renewal-checkout #order_review {
padding-left: 16px;
padding-right: 16px;
}
/* #22: the pulled-in "Payment" heading shares the card L/R padding (16px) on mobile. */
.saa-renewal-checkout #order_review_heading {
padding-left: 16px;
padding-right: 16px;
}
/* #22/#33 (parent layer): `.wc-order-review` wraps `#order_review` with a further
* 30px L/R, double-insetting the order block to ~50px from the viewport edge on
* top of the page gutter. Zero it on mobile (scoped to the renewal checkout) so
* the summary + payment sit in the page gutter, not a narrow centre column. */
.saa-renewal-checkout .wc-order-review {
padding-left: 0;
padding-right: 0;
}
/* #24 (Lindsay): the WooCommerce "COMPLETE PAYMENT" button (#place_order) sits
* at ~48% on mobile because The7 prints an inline
* `.woocommerce #payment #place_order { width:48% !important }` (2,1,0 + !important).
* Because that declaration is !important, we must counter with !important too
* (rule 15 §3 — the one sanctioned use); our `body #payment #place_order`
* (2,1,1) out-specifies The7's (2,1,0) so the !important duel resolves our way,
* full width on phones. */
body.saa-renewal-checkout #payment #place_order {
display: flex;
width: 100% !important;
justify-content: center;
text-align: center;
}
/* #18/#20: every renewal CTA goes full width on mobile.
* Mobile font-size: 14px (Dustin 2026-06-30) — desktop pills are 18px and
* had no responsive reduction, leaving the uppercase CTAs oversized on
* phones. Set in this one shared group so all renewal pills stay in lockstep. */
.saa-renewal-widget .saa-renewal-widget__button,
.saa-renewal-steps .saa-renewal-steps__start,
.saa-renewal-byb .saa-renewal-byb__start,
.saa-renewal-form .saa-renewal-form__proceed,
.saa-renewal-form .saa-renewal-form__back {
width: 100%;
font-size: 14px;
}
.saa-renewal-widget {
padding: 30px 20px;
}
.saa-renewal-widget .saa-renewal-widget__button {
min-width: 0;
width: 100%;
}
.saa-renewal-landing__header {
flex-direction: column;
align-items: flex-start;
}
/* #18: mobile heading size (Figma 256:2332 = 24px; desktop 32px). */
.saa-renewal-landing .saa-renewal-landing__title {
font-size: 24px;
}
/* #27 (Lindsay — Figma 259:3618): the documents-page header is 32px on mobile;
drop it to the renewal mobile-header convention (24px), like the landing
title. Confirmed on the real staging /renewal-documents/ DOM. */
.saa-renewal-upload-page > h2 {
font-size: 24px;
}
/* #22 (Lindsay — Figma 172:509 title node h29 = 24px): the checkout
"Application Payment" header is 32px on mobile; drop it to the 24px
renewal mobile-header convention. Confirmed on the real staging checkout. */
body.saa-renewal-checkout .saa-renewal-checkout-header__title {
font-size: 24px;
}
.saa-renewal-steps {
padding: 30px 20px;
}
.saa-renewal-steps__row {
flex-wrap: wrap;
}
.saa-renewal-steps__doc-group {
max-width: none;
}
.saa-renewal-steps__doc-group .saa-renewal-documents__row {
padding-left: 32px;
}
.saa-renewal-summary-panel__row {
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 24px;
}
.saa-renewal-form__row,
.saa-renewal-form__split,
.saa-renewal-form__accreditations li {
flex-direction: column;
gap: 24px;
}
.saa-renewal-form__row--half > * {
flex: 1 1 auto;
}
.saa-renewal-byb__card,
.saa-renewal-form__section,
.saa-renewal-form__privacy-gate {
padding: 30px 20px;
}
/* #6 (Lindsay): on mobile the Next Steps page header is oversized (the 32px
* desktop h1 wraps to 2 lines) and sits under a large top gap. (a) Drop the
* h1 to the renewal mobile-header convention (24px — same as the landing
* __title 256:2332 and the upload-page title 259:3618). (b) The gap is The7's
* standalone-page `.wf-wrap { padding-top:70px }` (vendor layer, global — not
* ours to edit); pull our own wrapper up to leave a ~24px gap, scoped to our
* element so no other page is affected. */
.saa-renewal-byb h1 {
font-size: 24px;
}
.saa-renewal-byb {
margin-top: -46px;
}
}
/* --------------------------------------------------------------------------
* Upload overlay — copied verbatim from saa-core checkout-upload-guard.css so
* the renewal upload modal is visually identical to the checkout dropzone
* overlay (#pb-upload-overlay). Driven by application-form.js.
* -------------------------------------------------------------------------- */
#pb-upload-overlay {
position: fixed;
inset: 0;
display: none;
background: rgba( 17, 24, 39, .72 );
-webkit-backdrop-filter: saturate( 140% ) blur( 2px );
backdrop-filter: saturate( 140% ) blur( 2px );
z-index: 99999;
}
#pb-upload-panel {
position: absolute;
left: 50%;
top: 50%;
transform: translate( -50%, -50% );
width: min( 520px, 92vw );
background: #0b1220;
color: #e5e7eb;
border-radius: 24px;
box-shadow: 0 20px 60px rgba( 0, 0, 0, .45 );
padding: 20px;
outline: none;
}
#pb-upload-panel::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 0 30px 6px rgba( 59, 130, 246, .25 );
pointer-events: none;
}
#pb-upload-title {
color: #ffffff !important;
font-weight: 800;
letter-spacing: .2px;
margin: 0 0 8px;
}
#pb-upload-title .fa-gear {
color: #60a5fa;
}
#pb-upload-sub {
margin: 0 0 12px;
opacity: .85;
}
.pb-bar {
height: 10px;
background: #1e293b;
border-radius: 999px;
overflow: hidden;
margin: 8px 0 8px;
position: relative;
}
.pb-bar > span {
display: block;
height: 100%;
width: 0%;
background: linear-gradient( 90deg, #3b82f6, #60a5fa );
transition: width .2s ease;
animation: pbGlow 1.5s ease-in-out infinite;
}
#pb-upload-percent {
text-align: right;
margin-top: 4px;
opacity: .85;
font-weight: 600;
font-size: 13px;
}
@keyframes pbGlow {
0%, 100% { opacity: .9; }
50% { opacity: .4; }
}
/* ----------------------------------------------------------------------
* S11 — Renewal checkout: hide the billing form. Personal/Contact details
* are captured in the application form (S10); the WooCommerce billing fields
* stay in the DOM (prefilled, so the order still validates) but are hidden,
* matching the S11 frame which has no billing form. Renewal checkout only
* (body.saa-renewal-checkout). CSS-only so no-JS users get the same layout.
* -------------------------------------------------------------------- */
.saa-renewal-checkout .woocommerce-billing-fields {
display: none;
}
/* ----------------------------------------------------------------------
* S11 — "Send Invoice to Other" (556:1016): its own section after the card,
* before the place-order button. Renewal checkout only.
* -------------------------------------------------------------------- */
.saa-renewal-checkout .saa-invoice-other {
background: var(--saa-renewal-card-bg);
padding: 32px;
margin: 1.5em 0;
color: var(--saa-renewal-ink);
box-sizing: border-box;
}
.saa-renewal-checkout .saa-invoice-other__heading {
margin: 0 0 24px;
color: var(--saa-renewal-ink);
font-size: 22px;
font-weight: 700;
line-height: 22px;
}
.saa-renewal-checkout .saa-invoice-other__toggle {
display: flex;
gap: 40px;
margin-bottom: 24px;
}
.saa-renewal-checkout .saa-invoice-other__toggle-option {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
color: var(--saa-renewal-ink);
cursor: pointer;
}
.saa-renewal-checkout .saa-invoice-other__fields {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.saa-renewal-checkout .saa-invoice-other__fields[hidden] {
display: none;
}
.saa-renewal-checkout .saa-invoice-other__field {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
}
.saa-renewal-checkout .saa-invoice-other__field label {
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: var(--saa-renewal-ink);
}
.saa-renewal-checkout .saa-invoice-other__input {
width: 100%;
box-sizing: border-box;
}
@media (max-width: 768px) {
.saa-renewal-checkout .saa-invoice-other__fields {
grid-template-columns: 1fr;
}
}
/* Yes/No toggle (Issue #18, Lindsay — Figma 556:1016). The selectors must be
* VISIBLE square boxes with a tick. The7 prints an inline
* `.nav-container input[type="checkbox"], input[type="radio"] { display:none !important }`
* whose SECOND, unscoped selector hides EVERY native radio on the page — so the
* old rule (which set width/opacity but never `display`) left these computing to
* display:none and the tester saw "buttons missing". Beat the vendor !important
* with our higher-specificity (0,3,1) selector + `display:inline-block !important`,
* and render the native radio AS the Figma square (appearance:none + a tick on
* :checked). Native radios keep one-of-two (Yes XOR No) behaviour. */
.saa-renewal-checkout .saa-invoice-other__toggle-option input[type="radio"] {
-webkit-appearance: none;
appearance: none;
display: inline-block !important;
box-sizing: border-box;
width: 20px;
height: 20px;
margin: 0;
padding: 0;
border: 2px solid var(--saa-renewal-ink);
border-radius: 4px;
background: #fff;
position: relative;
cursor: pointer;
flex: 0 0 auto;
}
.saa-renewal-checkout .saa-invoice-other__toggle-option input[type="radio"]:checked::after {
content: "";
position: absolute;
left: 5px;
top: 1px;
width: 6px;
height: 11px;
border: solid var(--saa-renewal-ink);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* Required marker — the red asterisk from the Figma; forced visible in case the
theme suppresses asterisks elsewhere. */
.saa-renewal-checkout .saa-invoice-other .saa-invoice-other__required {
display: inline !important;
border: 0;
text-decoration: none;
color: var(--saa-renewal-red) !important;
margin-left: 2px;
}
/* "(optional)" suffix on the non-required fields, matching the Figma. */
.saa-renewal-checkout .saa-invoice-other__optional {
margin-left: 4px;
color: var(--saa-renewal-ink);
font-weight: 400;
}
/* Invalid field state — mirrors WooCommerce's .woocommerce-invalid red. */
.saa-renewal-checkout .saa-invoice-other__field.woocommerce-invalid .saa-invoice-other__input {
border-color: var(--saa-renewal-red);
box-shadow: 0 0 0 1px var(--saa-renewal-red) inset;
}
.saa-renewal-checkout .saa-invoice-other__error {
display: block;
margin-top: 6px;
color: var(--saa-renewal-red);
font-size: 13px;
line-height: 1.3;
}
.saa-renewal-checkout .saa-invoice-other__error:empty {
display: none;
}
/* ----------------------------------------------------------------------
* Documents-page validation feedback (Attach -> Submit, 0.7.0+).
* The JS populates a top-of-form summary box plus per-row/per-field inline
* slots; without these rules they render as unstyled black text. Mirrors the
* red error language used elsewhere (--saa-renewal-red).
* -------------------------------------------------------------------- */
/* Top-of-form summary notification. */
.saa-renewal-documents-summary {
margin: 0 0 20px;
padding: 14px 16px;
border: 1px solid var(--saa-renewal-red);
border-left-width: 4px;
border-radius: 6px;
background: #fdecec;
color: #7a1212;
}
.saa-renewal-documents-summary:focus {
outline: 2px solid var(--saa-renewal-red);
outline-offset: 2px;
}
.saa-renewal-documents-summary__title {
margin: 0;
font-weight: 700;
font-size: 15px;
line-height: 1.4;
color: var(--saa-renewal-red);
}
.saa-renewal-documents-summary ul {
margin: 8px 0 0;
padding-left: 20px;
}
.saa-renewal-documents-summary li {
margin: 2px 0;
font-size: 14px;
line-height: 1.4;
}
/* Inline per-file + per-field error slots, shown directly under the control. */
.saa-renewal-upload-row__file-error,
.saa-renewal-form__field-error {
display: block;
margin-top: 6px;
color: var(--saa-renewal-red);
font-size: 13px;
line-height: 1.3;
font-weight: 600;
}
.saa-renewal-upload-row__file-error:empty,
.saa-renewal-form__field-error:empty {
display: none;
}
/* Tie the invalid control to its message with a red ring. */
.saa-renewal-upload-row__file[aria-invalid="true"],
.saa-renewal-form__field input[aria-invalid="true"],
.saa-renewal-form__field select[aria-invalid="true"] {
border-color: var(--saa-renewal-red);
box-shadow: 0 0 0 1px var(--saa-renewal-red);
}