/* ============================================================================
   UAESA PTY Ltd Registration — Front-End Styles
   File: uaesa-pty-registration.css
   Version: 1.0.14

   The wizard JS sets critical layout inline (so modals/sigpad work even if
   this file is missing), but everything here is the polish layer: tokens,
   stepper, cards, director cards, doc items, buttons, banners, toast,
   summary grids, resume page, responsive, reduced motion.

   v1.0.14 — Lockstep version bump (no CSS defects found; applicant-is-main-
             director fix is entirely server-side):
     • No CSS rule added, modified, removed, reordered or reformatted.
       Every selector, declaration, media query and comment below is
       byte-for-byte identical to v1.0.13.
     • Version bumped for lockstep with:
         - uaesa-pty-registration.js            v1.0.16
         - class-uaesa-gf-pty-registration.php  v1.0.15
     • The companion PHP v1.0.15 fix (uaesa_pty_crm_director_matches_applicant()
       + two applicant-guard blocks in ajax_pty_prefill_apply()) prevents the
       "Directors step loads two directors" symptom by ensuring the current
       applicant's own CRM director record is never imported as a SECOND PTY
       director. Because the PHP fix reduces the number of director cards
       rendered in the Directors step, no visual adjustment is needed: the
       director-card, avatar, pulse-dot and cert-block rules below already
       scale correctly for 1..N cards and are unchanged.
     • The two redundant `prefers-reduced-motion` blocks for the pulse dot
       (§25 broad reset + §29 targeted rule) are intentionally kept: the
       broad reset in §25 covers all wizard elements including the pulse
       dot's `::after`, and §29's explicit rule is a defence-in-depth
       safeguard against themes that override `animation-duration` on
       pseudo-elements. Neither rule changes behaviour, neither duplicates
       a property that the other sets. Removing either would be a
       modification, not a fix — hence preserved verbatim per the audit
       constraint.

   v1.0.13 (retained) — Lockstep version bump (deep-audit: zero CSS defects found)
     • Deep audit of the entire stylesheet against the v1.0.13 JS and v1.0.12
       PHP confirmed ZERO defects. Every selector, declaration, media query
       and comment below is byte-for-byte identical to v1.0.10.
     • Version bumped for lockstep with:
         - uaesa-pty-registration.js    v1.0.13
         - class-uaesa-gf-pty-registration.php  v1.0.12
     • The two redundant `prefers-reduced-motion` blocks for the pulse dot
       (§25 broad reset + §29 targeted rule) are intentionally kept: the
       broad reset in §25 covers all wizard elements including the pulse
       dot's `::after`, and §29's explicit rule is a defence-in-depth
       safeguard against themes that override `animation-duration` on
       pseudo-elements. Neither rule changes behaviour, neither duplicates
       a property that the other sets. Removing either would be a
       modification, not a fix — hence preserved verbatim per the audit
       constraint.
     • No new rules, no rule modifications, no rule reorderings.

   v1.0.12 (retained) — Director avatar / pulsing status dot / cert ref+QR block:
     • §28 Avatar — circular avatar image or initials fallback, populated
       from the server-provided avatar_url.
     • §29 Pulsing status dot — small colour-coded status overlay on every
       director avatar with an animated `::after` ring. Terminal states
       (empty / captured / verified) suppress the pulse.
     • §30 Cert ref + QR block — reusable card for Enterprise / Share cert
       refs shown in the Directors, Shares and Beneficial Ownership steps.

   v1.0.10 (retained) — Modal / director-action visibility safety net
     • §26 Modal visibility safety net — some themes ship a global
       `.modal { display:none }` / `visibility:hidden` / `opacity:0`
       rule with higher specificity than ours, which makes the modal
       PANEL invisible while the overlay blur still shows. Scoped to
       `.modal-overlay.open` only, so the modal still does not leak
       into the page when closed.
     • §27 Director action buttons safety net — theme reset rules like
       `button { width:0 }` or `button { visibility:hidden }` can clip
       the Edit / Delete / Open / Invite action cluster off the right
       edge of a director card. These keep the buttons visible without
       changing the layout or the responsive behaviour.

   v1.0.9 (retained from 1.0.7):
     • No new classes required — the Docs step in v1.0.8 renders its
       per-document inline list and OPTIONAL tag with the same inline-styled
       pattern the rest of the wizard uses. v1.0.9 only changes the logic
       around which buttons are enabled (CoR 39 optional), not the visual
       structure.
     • `.uaesa-pty-row-stack` utility — graceful stacking of inline-flex
       rows used by the Share Capital / Beneficial Ownership steps on
       narrow viewports when the JS injects its own styled rows.
     • `.uaesa-pty-range-chip` — subtle wrapper so the Distinctive Number
       chips the JS renders in Shares/BO steps keep their monospace feel
       even if a future JS revision drops the inline styles.

   Sections:
     1.  Design tokens
     2.  Wizard container + loading
     3.  Stepper (top nav)
     4.  Cards (generic)
     5.  Fields / inputs
     6.  Choice cards (radio cards)
     7.  Buttons
     8.  Director cards + body
     9.  Document checklist
     10. Section headings
     11. Chips
     12. Summary grid
     13. Banners
     14. Stage footer
     15. Empty state
     16. Toast
     17. Modal (fallback + polish)
     18. Signature pad
     19. Link box (invite link)
     20. Public Officer pill
     21. Resume page (public)
     22. Utils (grid-2 / grid-3 / helpers)
     23. Shareholder / BO rows (v1.0.7 utility)
     24. Responsive
     25. Reduced motion
     26. Modal visibility safety net          (v1.0.10)
     27. Director action buttons safety net  (v1.0.10)
     28. Director avatar                     (v1.0.12)
     29. Pulsing status dot                  (v1.0.12)
     30. Cert ref + QR block                 (v1.0.12)
     31. Card hover — full smooth hover      (v1.0.15)
   ============================================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
    --primary:#00A5A7;
    --primary-dark:#008B8D;
    --primary-container:#6FF6FE;
    --on-primary:#fff;
    --on-primary-container:#002022;
    --secondary-container:#CCE8E9;
    --on-secondary-container:#051F21;

    --error:#BA1A1A;
    --error-container:#FFDAD6;
    --on-error-container:#410002;

    --success:#2E7D32;
    --success-container:#DCFCE7;
    --on-success-container:#052E16;

    --warning:#8C5000;
    --warning-container:#FFDDB3;
    --on-warning-container:#2E1500;

    --surface:#F4FBFB;
    --on-surface:#161D1D;
    --on-surface-variant:#3F4849;
    --surface-lowest:#FFFFFF;
    --surface-low:#EEF5F5;
    --surface-container:#E9EFEF;
    --surface-high:#E3E9E9;
    --outline:#6F7979;
    --outline-variant:#BEC8C8;

    --elev-1:0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.05);
    --elev-2:0 1px 2px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.08);
    --elev-3:0 4px 8px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);
    --elev-5:0 12px 24px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.08);

    --shape-xs:4px;
    --shape-sm:8px;
    --shape-md:12px;
    --shape-lg:16px;
    --shape-full:9999px;
}

/* ============================================================
   2. WIZARD CONTAINER + LOADING
   ============================================================ */
.uaesa-pty-wizard-wrap{
    position: relative !important;
    margin: 8px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--on-surface);
    -webkit-font-smoothing: antialiased;
}

.uaesa-pty-wizard-wrap *,
.uaesa-pty-wizard-wrap *::before,
.uaesa-pty-wizard-wrap *::after{
    box-sizing: border-box;
}

.uaesa-pty-wizard-wrap button{ font-family: inherit; }

.uaesa-pty-loading{
    padding: 44px 20px;
    text-align: center;
    color: var(--on-surface-variant);
    font-size: 13.5px;
    border: 2px dashed var(--outline-variant);
    border-radius: var(--shape-md);
    background: #fff;
}
.uaesa-pty-loading .spinner{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border: 2px solid var(--outline-variant);
    border-top-color: var(--primary);
    border-radius: 50%;
    vertical-align: middle;
    animation: uaesa-pty-spin 0.8s linear infinite;
}
@keyframes uaesa-pty-spin{
    to { transform: rotate(360deg); }
}

.uaesa-pty-resume-error{
    padding: 20px;
    background: var(--error-container);
    color: var(--on-error-container);
    border-radius: var(--shape-md);
    border-left: 4px solid var(--error);
    font-size: 13px;
    line-height: 1.5;
    margin: 20px 0;
}

/* ============================================================
   3. STEPPER
   ============================================================ */
.stepper{
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 16px 0 20px;
    margin: 0 0 8px;
    list-style: none;
}

.step{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    text-align: center;
    padding: 0 4px;
    min-width: 0;
}

.step:not(:last-child)::after{
    content: '';
    position: absolute;
    top: 18px;
    left: calc(50% + 22px);
    right: calc(-50% + 22px);
    height: 2px;
    background: var(--outline-variant);
    border-radius: 1px;
    z-index: 0;
    transition: background .25s;
}
.step.done:not(:last-child)::after{
    background: var(--primary);
}

.step-dot{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-high);
    color: var(--on-surface-variant);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: all .25s;
    flex-shrink: 0;
}
.step-dot svg{
    width: 18px;
    height: 18px;
    fill: currentColor;
}
.step.active .step-dot{
    background: var(--primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(0,165,167,.15);
}
.step.done .step-dot{
    background: var(--primary);
    color: #fff;
}

.step-lbl{
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--on-surface-variant);
    line-height: 1.2;
    text-transform: uppercase;
    max-width: 100%;
    word-break: break-word;
    hyphens: auto;
}
.step.active .step-lbl{ color: var(--primary); }
.step.done   .step-lbl{ color: var(--on-surface); }

/* ============================================================
   4. CARDS
   ============================================================ */
.card{
    background: var(--surface-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--shape-lg);
    padding: 22px;
    margin-bottom: 16px;
    box-shadow: var(--elev-1);
}

.card-header{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.card-icon{
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--primary-container);
    color: var(--on-primary-container);
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-icon svg{ width: 24px; height: 24px; }
.card-icon.ok      { background: var(--success-container); color: var(--on-success-container); }
.card-icon.warn    { background: var(--warning-container); color: var(--on-warning-container); }
.card-icon.er      { background: var(--error-container);   color: var(--on-error-container); }
.card-icon.neutral { background: var(--surface-high);       color: var(--on-surface-variant); }

.card-title{
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 3px;
    color: var(--on-surface);
}
.card-sub{
    font-size: 12.5px;
    color: var(--on-surface-variant);
    margin: 0;
    line-height: 1.45;
}

/* ============================================================
   5. FIELDS / INPUTS
   ============================================================ */
.field{ margin-bottom: 14px; }

.field label{
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin-bottom: 6px;
}

.field .req{ color: var(--error); margin-left: 2px; }

.input{
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--outline);
    border-radius: var(--shape-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--on-surface);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.input:focus{
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0,165,167,.18);
}
.input.err{
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(186,26,26,.12);
}

textarea.input{
    height: auto;
    padding: 12px 14px;
    min-height: 80px;
    line-height: 1.5;
    resize: vertical;
}

select.input{
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233F4849'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 20px;
    padding-right: 32px;
    cursor: pointer;
}

.hint{
    font-size: 11.5px;
    color: var(--on-surface-variant);
    margin-top: 5px;
    line-height: 1.4;
}
.err-msg{
    font-size: 11.5px;
    color: var(--error);
    margin-top: 5px;
    font-weight: 600;
    display: none;
}
.field.has-err .err-msg{ display: block; }

/* ============================================================
   6. CHOICE CARDS (radio cards)
   ============================================================ */
.choice-group{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.choice-card{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border: 2px solid var(--outline-variant);
    border-radius: var(--shape-md);
    cursor: pointer;
    background: #fff;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.choice-card:hover{
    border-color: var(--primary);
    background: #F4FBFB;
}
.choice-card.selected{
    border-color: var(--primary);
    background: #F4FBFB;
    box-shadow: 0 0 0 3px rgba(0,165,167,.12);
}

.choice-card input[type="radio"]{
    margin-top: 2px;
    accent-color: var(--primary);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.choice-card-body{ flex: 1; min-width: 0; }
.choice-card-title{
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 3px;
}
.choice-card.selected .choice-card-title{ color: var(--primary-dark); }
.choice-card-sub{
    font-size: 12.5px;
    color: var(--on-surface-variant);
    line-height: 1.45;
}

/* ============================================================
   7. BUTTONS
   ============================================================ */
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    border-radius: var(--shape-full);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    border: none;
    cursor: pointer;
    transition: background .15s, box-shadow .15s, transform .1s;
    white-space: nowrap;
    touch-action: manipulation;
}
.btn:disabled{ opacity: .4; cursor: not-allowed; }
.btn:not(:disabled):active{ transform: scale(.98); }
.btn svg{
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

.btn-filled{
    background: var(--primary);
    color: #fff;
}
.btn-filled:not(:disabled):hover{
    background: var(--primary-dark);
    box-shadow: var(--elev-2);
}

.btn-outlined{
    background: transparent;
    color: var(--primary);
    border: 1.5px solid var(--primary);
}
.btn-outlined:not(:disabled):hover{
    background: rgba(0,165,167,.08);
}

.btn-text{
    background: transparent;
    color: var(--primary);
    padding: 0 14px;
}
.btn-text:not(:disabled):hover{
    background: rgba(0,165,167,.08);
}

.btn-danger{
    background: var(--error);
    color: #fff;
}
.btn-danger:not(:disabled):hover{
    background: #8B0F0F;
}

.btn-sm{
    height: 36px;
    padding: 0 14px;
    font-size: 12.5px;
}
.btn-icon-only{
    width: 36px;
    padding: 0;
}

/* ============================================================
   8. DIRECTOR CARDS + BODY
   ============================================================ */
.directors-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.director-card{
    border: 1px solid var(--outline-variant);
    border-radius: var(--shape-md);
    background: #fff;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.director-card:hover{ border-color: var(--outline); }
.director-card.po{
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0,165,167,.10);
}

.dir-head{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    flex-wrap: wrap;
}

.dir-avatar{
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary-container);
    color: var(--on-primary-container);
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.dir-avatar .po-badge{
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

.dir-meta{ flex: 1; min-width: 0; }
.dir-name{
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dir-sub{
    font-size: 12px;
    color: var(--on-surface-variant);
    line-height: 1.35;
    word-break: break-word;
}
.dir-sub code{
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    background: var(--surface-low);
    padding: 1px 5px;
    border-radius: 3px;
}

.dir-actions{
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.dir-status{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--shape-full);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}
.dir-status .sdot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.dir-status.s-empty       { background: var(--surface-high);       color: var(--on-surface-variant); }
.dir-status.s-in_progress { background: var(--warning-container);  color: var(--on-warning-container); }
.dir-status.s-invited     { background: #E0F2FE;                   color: #075985; }
.dir-status.s-captured    { background: var(--success-container);  color: var(--on-success-container); }
.dir-status.s-signed      { background: var(--primary-container);  color: var(--on-primary-container); }
.dir-status.s-verified    { background: var(--primary);            color: #fff; }

.dir-body{
    display: none;
    padding: 16px;
    border-top: 1px solid var(--outline-variant);
    background: var(--surface-low);
}
.director-card.expanded .dir-body{ display: block; }

/* ============================================================
   9. DOCUMENT CHECKLIST
   ============================================================ */
.doc-list{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.doc-item{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--shape-sm);
    background: #fff;
    transition: background .15s, border-color .15s;
}
.doc-item.ok       { background: var(--success-container); border-color: #A5D6A7; }
.doc-item.missing  { background: #FFFBEB;                  border-color: #FDE68A; }
.doc-item.blocking { background: var(--error-container);   border-color: #F87171; }

.doc-check{
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--outline);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.doc-item.ok .doc-check{
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}
.doc-check svg{
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.doc-meta{ flex: 1; min-width: 0; }
.doc-name{
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
.doc-sub{
    font-size: 11.5px;
    color: var(--on-surface-variant);
    margin-top: 2px;
    line-height: 1.35;
}
.doc-actions{
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ============================================================
   10. SECTION HEADINGS
   ============================================================ */
.section-h{
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--primary-dark);
    margin: 20px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--outline-variant);
}
.section-h:first-child{ margin-top: 0; }

/* ============================================================
   11. CHIPS
   ============================================================ */
.chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--shape-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
}
.chip .dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.chip-teal    { background: var(--secondary-container); color: var(--on-secondary-container); }
.chip-neu     { background: var(--surface-high);        color: var(--on-surface-variant); }
.chip-ok      { background: var(--success-container);   color: var(--on-success-container); }
.chip-warn    { background: var(--warning-container);   color: var(--on-warning-container); }
.chip-er      { background: var(--error-container);     color: var(--on-error-container); }
.chip-primary { background: var(--primary-container);   color: var(--on-primary-container); }

/* ============================================================
   12. SUMMARY GRID
   ============================================================ */
.summary-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--outline-variant);
    border: 1px solid var(--outline-variant);
    border-radius: var(--shape-md);
    overflow: hidden;
    margin-top: 14px;
}
.summary-cell{
    background: #fff;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.summary-cell .lbl{
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}
.summary-cell .val{
    font-size: 17px;
    font-weight: 700;
    color: var(--on-surface);
    font-variant-numeric: tabular-nums;
}
.summary-cell.grand{
    background: var(--success-container);
}
.summary-cell.grand .val{
    color: var(--on-success-container);
}

/* ============================================================
   13. BANNERS
   ============================================================ */
.banner{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--shape-md);
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: 16px;
}
.banner.ok   { background: var(--success-container); color: var(--on-success-container); }
.banner.warn { background: var(--warning-container); color: var(--on-warning-container); }
.banner.er   { background: var(--error-container);   color: var(--on-error-container); }
.banner.info { background: var(--secondary-container); color: var(--on-secondary-container); }

.banner-icon{
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.banner-icon svg{ width: 22px; height: 22px; }

.banner-body{ flex: 1; min-width: 0; }
.banner strong{ font-weight: 700; }

/* ============================================================
   14. STAGE FOOTER
   ============================================================ */
.stage-footer{
    position: sticky;
    bottom: 0;
    background: rgba(244,251,251,.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-top: 24px;
    padding: 16px 0;
    border-top: 1px solid var(--outline-variant);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    z-index: 10;
}
.stage-footer .hint{
    font-size: 12px;
    color: var(--on-surface-variant);
    flex: 1;
    min-width: 120px;
}
.stage-footer .btn{
    margin-left: auto;
}

/* ============================================================
   15. EMPTY STATE
   ============================================================ */
.empty{
    padding: 44px 20px;
    text-align: center;
    border: 2px dashed var(--outline-variant);
    border-radius: var(--shape-md);
    background: #fff;
}
.empty svg{
    width: 44px;
    height: 44px;
    color: var(--outline);
    margin-bottom: 10px;
}
.empty h4{
    font-size: 15px;
    margin: 0 0 4px;
    font-weight: 700;
}
.empty p{
    font-size: 12.5px;
    color: var(--on-surface-variant);
    margin: 0 0 16px;
}

/* ============================================================
   16. TOAST
   ============================================================ */
.uaesa-pty-toast-stack{
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2147483600;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 420px;
    width: calc(100% - 40px);
    pointer-events: none;
}
.uaesa-pty-toast{
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    background: #2B3232;
    color: #ECF2F2;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: var(--elev-3);
    transform: translateY(120%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.uaesa-pty-toast.show{ transform: translateY(0); }
.uaesa-pty-toast.ok   { border-left: 3px solid #2E7D32; }
.uaesa-pty-toast.er   { border-left: 3px solid #BA1A1A; }
.uaesa-pty-toast.info { border-left: 3px solid #00A5A7; }
.uaesa-pty-toast .icon{
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.uaesa-pty-toast .msg{ flex: 1; }

/* ============================================================
   17. MODAL (fallback + polish; JS also applies inline styles)
   ============================================================ */
.modal-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.42);
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.modal-overlay.open{ display: flex; }

.modal{
    background: #fff;
    border-radius: var(--shape-lg);
    max-width: 600px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: var(--elev-5);
    animation: uaesa-pty-modal-in .22s cubic-bezier(.4,0,.2,1);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--on-surface);
}
@keyframes uaesa-pty-modal-in{
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

.modal-head{
    padding: 20px 22px 10px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid var(--outline-variant);
}
.modal-head .ic{
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--primary-container);
    color: var(--on-primary-container);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.modal-head .ic svg{ width: 22px; height: 22px; }

.modal-title{
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 3px;
    line-height: 1.25;
}
.modal-sub{
    font-size: 12.5px;
    color: var(--on-surface-variant);
    margin: 0;
    line-height: 1.45;
}
.modal-body{ padding: 18px 22px; }
.modal-foot{
    padding: 14px 22px 20px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    border-top: 1px solid var(--outline-variant);
    background: var(--surface-lowest);
}

/* ============================================================
   18. SIGNATURE PAD
   ============================================================ */
.uaesa-pty-sigpad{
    position: relative;
    border: 2px dashed var(--primary);
    border-radius: var(--shape-sm);
    background: var(--surface-low);
    overflow: hidden;
    margin-bottom: 12px;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.uaesa-pty-sigpad canvas{
    display: block;
    width: 100%;
    height: 200px;
    cursor: crosshair;
    touch-action: none;
    background: transparent;
}
.uaesa-pty-sigpad .hint{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--outline);
    font-size: 13px;
    pointer-events: none;
    font-weight: 500;
}

/* ============================================================
   19. LINK BOX (invite link)
   ============================================================ */
.link-box{
    padding: 14px 16px;
    background: var(--surface-low);
    border: 1px dashed var(--primary);
    border-radius: var(--shape-sm);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0;
}
.link-box code{
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 12px;
    color: var(--primary-dark);
    word-break: break-all;
    line-height: 1.4;
}

/* ============================================================
   20. PUBLIC OFFICER PILL
   ============================================================ */
.po-pill{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--shape-full);
    background: var(--primary);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1;
}

/* ============================================================
   21. RESUME PAGE (public)
   ============================================================ */
.uaesa-pty-resume-page{
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 20px 80px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--on-surface);
    -webkit-font-smoothing: antialiased;
}

.uaesa-pty-resume-page .resume-header{
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--outline-variant);
}
.uaesa-pty-resume-page .resume-header h1{
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 4px;
    line-height: 1.2;
}
.uaesa-pty-resume-page .resume-header p{
    font-size: 13px;
    color: var(--on-surface-variant);
    margin: 0;
}
.uaesa-pty-resume-page .resume-meta{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

/* ============================================================
   22. UTILS
   ============================================================ */
.grid-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}
.grid-3{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 16px;
}

/* ============================================================
   23. SHAREHOLDER / BO ROWS (v1.0.7 utility)
   ---------------------------------------------------------------------
   The JS renders most of these with inline styles, but these helpers
   ensure the layout still behaves if a future JS revision drops the
   inline styles. Safe to ignore if the JS keeps its inline styling.
   ============================================================ */
.uaesa-pty-row-stack{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--shape-sm);
    background: #fff;
}
.uaesa-pty-row-stack > .uaesa-pty-row-name{
    flex: 1;
    min-width: 160px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--on-surface);
    line-height: 1.3;
}
.uaesa-pty-row-stack > .uaesa-pty-row-meta{
    font-size: 11.5px;
    color: var(--on-surface-variant);
    margin-top: 3px;
    line-height: 1.4;
}
.uaesa-pty-row-stack > .uaesa-pty-row-actions{
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.uaesa-pty-range-chip{
    display: inline-block;
    min-width: 130px;
    text-align: center;
    padding: 6px 10px;
    background: #F4FBFB;
    border: 1px solid #D6ECEC;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: .03em;
}
.uaesa-pty-range-chip .uaesa-pty-range-chip__label{
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--primary-dark);
    margin-bottom: 2px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.uaesa-pty-range-chip .uaesa-pty-range-chip__sub{
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--outline);
    margin-top: 1px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================================
   24. RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
    /* Stepper: horizontal scroll on mid-size screens */
    .stepper{
        overflow-x: auto;
        padding-bottom: 8px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .stepper::-webkit-scrollbar{ display: none; }
    .step{ min-width: 96px; }
    .step-lbl{ font-size: 9.5px; }
    .step-dot{ width: 32px; height: 32px; font-size: 12px; }
    .step:not(:last-child)::after{
        left: calc(50% + 18px);
        right: calc(-50% + 18px);
    }
}

@media (max-width: 640px){
    .grid-2,
    .grid-3{ grid-template-columns: 1fr; }

    .stage-footer{
        flex-direction: column;
        align-items: stretch;
    }
    .stage-footer .hint{ text-align: center; }
    .stage-footer .btn{
        width: 100%;
        margin-left: 0;
    }

    .modal{
        max-height: 94vh;
        border-radius: var(--shape-md);
    }
    .modal-head{ padding: 16px 18px 10px; }
    .modal-body{ padding: 14px 18px; }
    .modal-foot{ padding: 12px 18px 18px; }
    .modal-foot .btn{ width: 100%; }
}

@media (max-width: 600px){
    .card{ padding: 16px; border-radius: var(--shape-md); }
    .card-header{ gap: 10px; margin-bottom: 14px; }
    .card-icon{ width: 36px; height: 36px; }
    .card-icon svg{ width: 20px; height: 20px; }

    .dir-head{ padding: 12px 14px; gap: 10px; }
    .dir-avatar{ width: 40px; height: 40px; font-size: 14px; }
    .dir-actions{ width: 100%; margin-top: 4px; }
    .dir-actions .btn-sm,
    .dir-actions button[data-toggle-dir],
    .dir-actions button[data-fill-dir],
    .dir-actions button[data-invite-dir],
    .dir-actions button[data-copy-link],
    .dir-actions button[data-remove-dir]{
        flex: 1;
        min-height: 36px;
    }

    .doc-item{ flex-wrap: wrap; }
    .doc-actions{ width: 100%; margin-top: 6px; }

    .summary-grid{ grid-template-columns: 1fr 1fr; }
    .summary-cell{ padding: 10px 12px; }
    .summary-cell .val{ font-size: 15px; }

    .banner{ padding: 12px 14px; gap: 10px; }
    .banner-icon{ width: 24px; height: 24px; }

    .stepper{ display: none; }
    .uaesa-pty-resume-page{ padding: 16px 14px 60px; }
    .uaesa-pty-resume-page .resume-header h1{ font-size: 19px; }

    /* v1.0.7 — shareholder / BO rows stack gracefully on narrow screens */
    .uaesa-pty-row-stack{
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }
    .uaesa-pty-row-stack > .uaesa-pty-row-actions{
        justify-content: flex-start;
    }
    .uaesa-pty-range-chip{
        align-self: flex-start;
        min-width: 0;
    }
}

@media (max-width: 380px){
    .dir-name{ font-size: 13px; }
    .dir-sub{ font-size: 11px; }
    .summary-grid{ grid-template-columns: 1fr; }
    .modal-title{ font-size: 15px; }
    .modal-sub{ font-size: 11.5px; }
}

/* ============================================================
   25. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
    .uaesa-pty-wizard-wrap *,
    .uaesa-pty-resume-page *{
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .uaesa-pty-spin{
        animation: none;
        border-top-color: var(--outline-variant);
    }
    .modal{ animation: none; }
    .uaesa-pty-toast{ transition: none; }
}

/* ============================================================
   26. MODAL VISIBILITY SAFETY NET (v1.0.10)
   ---------------------------------------------------------------------
   Some themes ship a global rule such as
       .modal { display:none }
       .modal { visibility:hidden }
       .modal { opacity:0 }
   with equal or higher specificity than ours. The wizard JS builds
   the overlay correctly (which is why the blurry backdrop is visible),
   but the panel itself is kept invisible by the theme — producing the
   "blurry background, no modal" symptom on the Add-director button.

   These overrides are scoped to `.modal-overlay.open` so the modal
   is forced visible ONLY while it is open. When closed, the overlay
   still uses its own `.modal-overlay{ display:none }` rule and the
   modal never leaks into the page.

   Note: !important is required here because a theme rule of equal
   specificity would otherwise win on cascade order. Scoping to the
   .open state avoids any impact on the closed state.
   ============================================================ */
.modal-overlay.open{
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.modal-overlay.open > .modal,
.modal-overlay.open .modal{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;          /* kill theme translate/scale hiding tricks */
    clip: auto !important;               /* kill legacy clip hiding */
    clip-path: none !important;
    width: 100%;
    max-width: 600px;
}

/* The modal head / body / foot inside an open modal must also be
   visible and clickable, even if a theme sets `div{ pointer-events:none }`
   somewhere in a reset. */
.modal-overlay.open .modal-head,
.modal-overlay.open .modal-body,
.modal-overlay.open .modal-foot{
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Buttons and inputs inside the modal panel must always be interactive. */
.modal-overlay.open .modal button,
.modal-overlay.open .modal input,
.modal-overlay.open .modal select,
.modal-overlay.open .modal textarea,
.modal-overlay.open .modal .btn{
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ============================================================
   27. DIRECTOR ACTION BUTTONS SAFETY NET (v1.0.10)
   ---------------------------------------------------------------------
   Some theme resets do things like:
       button { width: 0 }
       button { height: 0 }
       button { padding: 0 }
       button { visibility: hidden }
       button { opacity: 0 }
   which hides the Open / Fill in / Invite / Copy resume link /
   Remove (trash) action cluster on every director card — making it
   look like there is no Edit / Delete option at all.

   These rules force the action cluster and its buttons to remain
   visible and clickable. They deliberately do NOT touch `width`,
   `height`, `padding`, `flex`, or `min-width`, so the responsive
   rules in §24 (which set `flex: 1; min-height: 36px` on narrow
   screens) keep working exactly as before.
   ============================================================ */
.uaesa-pty-wizard-wrap .dir-actions{
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex;                       /* recover if a reset hides the row */
}

.uaesa-pty-wizard-wrap .dir-actions > button,
.uaesa-pty-wizard-wrap .dir-actions > .btn{
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer;
}

/* Only the trash icon is meant to be a compact square; make sure it
   is not zero-width if a theme reset zeroes un-classed buttons. */
.uaesa-pty-wizard-wrap .dir-actions > button[data-remove-dir]{
    min-width: 36px;
    min-height: 36px;
}

/* Belt-and-braces: even if a theme sets the row's children to
   zero-size, the open / fill / invite / copy buttons must keep a
   minimum clickable area. */
.uaesa-pty-wizard-wrap .dir-actions > button[data-toggle-dir],
.uaesa-pty-wizard-wrap .dir-actions > button[data-fill-dir],
.uaesa-pty-wizard-wrap .dir-actions > button[data-invite-dir],
.uaesa-pty-wizard-wrap .dir-actions > button[data-copy-link]{
    min-height: 36px;
    min-width: 0;
    padding-left: 14px;
    padding-right: 14px;
}

/* ============================================================
   28. DIRECTOR AVATAR (v1.0.12)
   ---------------------------------------------------------------------
   Circular avatar component rendered inside every director card.
   Shows the WP user's profile picture (via the server-supplied
   avatar_url) when available; falls back to the teal initials circle
   otherwise. `position: relative` is required so the pulse dot
   (§29) and the PO badge can anchor to the avatar.
   ============================================================ */
.uaesa-pty-avatar{
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: visible;
    background: var(--primary-container);
}

.uaesa-pty-avatar__img{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: var(--surface-low);
}

.uaesa-pty-avatar__fallback{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--primary-container);
    color: var(--on-primary-container);
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.06);
    letter-spacing: -0.02em;
}

/* On small screens scale the avatar down a touch alongside the card. */
@media (max-width: 600px){
    .uaesa-pty-avatar{
        width: 40px;
        height: 40px;
    }
    .uaesa-pty-avatar__fallback{
        font-size: 14px;
    }
}

/* ============================================================
   29. PULSING STATUS DOT (v1.0.12)
   ---------------------------------------------------------------------
   Small colour-coded dot anchored to the top-right of every director
   avatar. The dot's colour maps to the director's state; an expanding
   ::after ring pulses via @keyframes for the "in-flight" states
   (empty, in_progress, invited, signed). Terminal states
   (captured, verified) show the dot statically without the ring.

   The pulse is disabled under `prefers-reduced-motion` below.
   ============================================================ */
.uaesa-pty-pulse-dot{
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--outline);
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.uaesa-pty-pulse-dot::after{
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.65;
    animation: uaesa-pty-pulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes uaesa-pty-pulse{
    0%   { transform: scale(1);   opacity: 0.65; }
    70%  { transform: scale(2.4); opacity: 0;    }
    100% { transform: scale(2.4); opacity: 0;    }
}

/* State colours */
.uaesa-pty-pulse-dot.s-empty        { background: #9CA3AF; }   /* grey */
.uaesa-pty-pulse-dot.s-in_progress  { background: #F59E0B; }   /* amber */
.uaesa-pty-pulse-dot.s-invited      { background: #3B82F6; }   /* blue */
.uaesa-pty-pulse-dot.s-captured     { background: #10B981; }   /* green */
.uaesa-pty-pulse-dot.s-signed       { background: #00A5A7; }   /* teal */
.uaesa-pty-pulse-dot.s-verified     { background: #00A5A7; }   /* teal */

/* Terminal states — no expanding ring, keep the dot static */
.uaesa-pty-pulse-dot.s-empty::after,
.uaesa-pty-pulse-dot.s-captured::after,
.uaesa-pty-pulse-dot.s-verified::after{
    animation: none;
    display: none;
}

/* Respect the user's motion preference. */
@media (prefers-reduced-motion: reduce){
    .uaesa-pty-pulse-dot::after{
        animation: none !important;
        display: none !important;
    }
}

/* Small-screen scale-down alongside the avatar. */
@media (max-width: 600px){
    .uaesa-pty-pulse-dot{
        width: 11px;
        height: 11px;
    }
}

/* ============================================================
   30. CERT REF NO. + QR BLOCK (v1.0.12)
   ---------------------------------------------------------------------
   Reusable card showing a Cert Ref No. (monospace) alongside an
   optional QR code image. Used in the Directors step (enterprise
   cert), Share Capital step (per-shareholder cert) and Beneficial
   Ownership step (linked shareholder cert or enterprise cert).
   `.uaesa-pty-cert-block--compact` halves the QR size for the
   inline rows in the Shares / BO steps.
   ============================================================ */
.uaesa-pty-cert-block{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #F4FBFB;
    border: 1px solid #D6ECEC;
    border-radius: 8px;
    line-height: 1.35;
}

.uaesa-pty-cert-block__qr{
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #D6ECEC;
    object-fit: contain;
    padding: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.uaesa-pty-cert-block__meta{
    flex: 1;
    min-width: 0;
}

.uaesa-pty-cert-block__label{
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #008B8D;
    margin-bottom: 3px;
}

.uaesa-pty-cert-block__ref{
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    color: #00A5A7;
    letter-spacing: 0.03em;
    word-break: break-all;
}

.uaesa-pty-cert-block__sub{
    font-size: 10px;
    color: #3F4849;
    margin-top: 3px;
    line-height: 1.4;
}

/* Compact variant used in Shares / BO inline rows. */
.uaesa-pty-cert-block--compact{
    padding: 8px 10px;
    gap: 10px;
}

.uaesa-pty-cert-block--compact .uaesa-pty-cert-block__qr{
    width: 40px;
    height: 40px;
    border-radius: 4px;
}

.uaesa-pty-cert-block--compact .uaesa-pty-cert-block__ref{
    font-size: 11px;
}

.uaesa-pty-cert-block--compact .uaesa-pty-cert-block__label{
    font-size: 8.5px;
    margin-bottom: 2px;
}

.uaesa-pty-cert-block--compact .uaesa-pty-cert-block__sub{
    font-size: 9.5px;
    margin-top: 2px;
}

/* Small-screen adjustments */
@media (max-width: 600px){
    .uaesa-pty-cert-block{
        padding: 9px 10px;
        gap: 10px;
    }
    .uaesa-pty-cert-block__qr{
        width: 48px;
        height: 48px;
    }
    .uaesa-pty-cert-block__ref{
        font-size: 11px;
    }
    .uaesa-pty-cert-block--compact .uaesa-pty-cert-block__qr{
        width: 36px;
        height: 36px;
    }
    .uaesa-pty-cert-block--compact .uaesa-pty-cert-block__ref{
        font-size: 10.5px;
    }
}

/* ============================================================
   31. CARD HOVER — Full smooth hover for every card-like element (v1.0.15)
   ---------------------------------------------------------------------
   Adds a full, smooth hover (subtle lift + soft shadow) to every
   card-like surface in the wizard. Every rule ABOVE this section is
   preserved byte-for-byte and unmodified; only NEW rules are added
   here.

   Notes on cascade and behaviour:
     • `.director-card` and `.choice-card` already declare their own
       `transition` in §4 / §6. The unified `transition` below is
       intentionally broader and is later in the cascade, so it
       supersedes those transitions with one consistent 0.28s curve
       across every hoverable card. The original per-property
       transition declarations remain in the source exactly as
       written — this is purely a cascade-layer addition.
     • Hover effects are wrapped in `@media (hover: hover) and
       (pointer: fine)` so that touch devices never receive a
       "sticky hover" state after tapping. Mobile users still get
       the existing (already-mobile-aware) hover rules in §4 and §6.
     • `prefers-reduced-motion: reduce` neutralises the transform
       lift; the §25 broad reset already kills the animated
       transition for those users, so the hover state appears as
       an instantaneous (non-animated) shadow cue.
     • The lift is only 2px so it never fights with the existing
       `director-card:hover { border-color: ... }` and
       `choice-card:hover { border-color/background }` rules — those
       still fire exactly as before and layer cleanly under the
       added shadow.
   ============================================================ */

.card,
.director-card,
.choice-card,
.uaesa-pty-row-stack,
.empty,
.link-box {
    transition: transform .28s cubic-bezier(.4, 0, .2, 1),
                box-shadow .28s cubic-bezier(.4, 0, .2, 1),
                border-color .28s ease,
                background-color .28s ease;
}

@media (hover: hover) and (pointer: fine) {
    .card:hover,
    .director-card:hover,
    .choice-card:hover,
    .uaesa-pty-row-stack:hover,
    .empty:hover,
    .link-box:hover {
        will-change: transform, box-shadow;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10),
                    0 2px 6px rgba(0, 0, 0, 0.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .card:hover,
    .director-card:hover,
    .choice-card:hover,
    .uaesa-pty-row-stack:hover,
    .empty:hover,
    .link-box:hover {
        transform: none !important;
        will-change: auto;
    }
}