/* ==========================================================================
   emili — Resident portal design system
   Ported from the 2026 redesign (emili-portal / emili-register-v4 /
   emili-account-v3).

   Everything is scoped under `.ep` so it cannot leak into the Bootstrap
   pages that have not been redesigned yet. Add `class="ep ep-page"` to a
   redesigned view's root element, `class="ep ep-hd"` to the header and
   `class="ep ep-ft"` to the footer.
   ========================================================================== */

.ep {
    --bg: #f6f7f8;
    --bg2: #ffffff;
    --bg3: #eef0f2;
    --ink: #0e1216;
    --ink2: #57606a;
    --ink3: #8a939d;
    --line: #e3e6ea;
    --line2: #d3d8dd;
    --acc: #0b5cd6;
    --acc-ink: #0a4fb8;
    --acc-soft: #e8f0fd;
    --ok: #0a7a4b;
    --ok-soft: #e3f3ec;
    --warn: #9a6700;
    --warn-soft: #fbf0d9;
    --bad: #c0392b;
    --bad-soft: #fbe9e6;
    --font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --r: 10px;
    --r-sm: 7px;
    --sh: 0 1px 2px rgba(14, 18, 22, .05), 0 8px 24px -12px rgba(14, 18, 22, .12);
    --sh-lg: 0 2px 6px rgba(14, 18, 22, .06), 0 24px 60px -24px rgba(14, 18, 22, .25);

    font: 400 15px/1.55 var(--font);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.ep *,
.ep *::before,
.ep *::after { box-sizing: border-box; }

.ep [hidden] { display: none !important; }

.ep img,
.ep svg { display: block; max-width: 100%; }
/* Font Awesome renders <i class="fa…"> as an inline SVG — keep those in flow. */
.ep svg.svg-inline--fa { display: inline-block; vertical-align: -.125em; }

.ep a { color: var(--acc); text-decoration: none; }
.ep a:hover { color: var(--acc-ink); text-decoration: underline; }

.ep button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.ep input,
.ep select,
.ep textarea { font: inherit; color: inherit; }

.ep :focus { outline: none; }
.ep :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }
.ep ::selection { background: #cfe0fb; }

.ep h1,
.ep h2,
.ep h3 {
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0;
    text-wrap: balance;
}

.ep p { margin: 0; text-wrap: pretty; }
.ep ul { margin: 0; }

.ep .mono { font-family: var(--mono); font-feature-settings: 'tnum'; }

.ep .vh {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- page shell ---------------------------------------------------------- */

/* Cancels the .container-fluid padding of #wrapper so the portal controls
   its own gutters. */
#wrapper > .ep-page { margin-left: -15px; margin-right: -15px; }

/* Every citizen screen sits on the portal canvas. */
#wrapper.ep { background: var(--bg); min-height: calc(100vh - 61px); }
#wrapper.ep:has(> .ep-page) { padding-bottom: 0; }

.ep-page {
    background: var(--bg);
    min-height: calc(100vh - 61px);
    display: flex;
    flex-direction: column;
}

.ep .wrap { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 24px; }
.ep .wrap-lg { max-width: 1020px; }

.ep .skip {
    position: absolute; left: -9999px; top: 8px; z-index: 400;
    background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px;
}
.ep .skip:focus { left: 8px; }

/* --- buttons ------------------------------------------------------------- */

.ep .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 600; font-size: 13.5px; line-height: 1;
    padding: 11px 18px; border-radius: 8px; border: 1px solid transparent;
    transition: background .15s, border-color .15s, transform .1s;
    white-space: nowrap; text-decoration: none;
}
.ep .btn:hover { text-decoration: none; }
.ep .btn:active { transform: translateY(1px); }
.ep .btn-acc { background: var(--acc); color: #fff; }
.ep .btn-acc:hover { background: var(--acc-ink); color: #fff; }
.ep .btn-line { background: var(--bg2); border-color: var(--line2); color: var(--ink); }
.ep .btn-line:hover { border-color: var(--ink3); color: var(--ink); }
.ep .btn-bad { background: var(--bad); color: #fff; }
.ep .btn-bad:hover { background: #a83226; color: #fff; }
.ep .btn-ghost-bad { background: none; color: var(--bad); border-color: transparent; }
.ep .btn-ghost-bad:hover { background: var(--bad-soft); color: var(--bad); }
.ep .btn.sm { padding: 8px 13px; font-size: 12.5px; }
.ep .btn.wfull { width: 100%; padding: 12px 18px; font-size: 14px; }
.ep .btn.btn-lg { padding: 15px 18px; font-size: 16px; }
.ep .btn[disabled] { opacity: .6; cursor: default; pointer-events: none; }
.ep .btn .spin {
    width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff; border-radius: 50%;
    animation: ep-rot .7s linear infinite; display: none; flex: none;
}
.ep .btn-line .spin,
.ep .btn-ghost-bad .spin { border-color: rgba(14, 18, 22, .2); border-top-color: var(--ink2); }
.ep .btn.loading .spin { display: block; }
.ep .btn.loading .btn-lbl { opacity: .85; }

@keyframes ep-rot { to { transform: rotate(360deg); } }

.ep .btn-row { display: flex; gap: 10px; margin-top: 20px; }
.ep .btn-row .btn { flex: 1; }
/* wizard back/next row */
.ep .btn-row.split { justify-content: space-between; flex-wrap: wrap; margin-top: 28px; }
.ep .btn-row.split .btn { flex: none; min-width: 150px; padding: 13px 22px; font-size: 14.5px; }
@media (max-width: 520px) {
    .ep .btn-row.split { flex-direction: column-reverse; }
    .ep .btn-row.split .btn { width: 100%; }
}

.ep .kick {
    font: 600 11.5px/1 var(--mono); letter-spacing: .14em;
    text-transform: uppercase; color: var(--acc);
}

/* --- header -------------------------------------------------------------- */

.ep-hd {
    background: var(--bg2);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 120;
}
.ep .hd { display: flex; align-items: center; gap: 10px; height: 60px; }
.ep .brand {
    display: inline-flex; align-items: center; gap: 9px;
    font-weight: 600; font-size: 17px; letter-spacing: -.02em;
    color: var(--ink); text-decoration: none; flex: none;
}
.ep .brand:hover { color: var(--ink); text-decoration: none; }
.ep .brand img { height: 26px; width: auto; border-radius: 4px; }
.ep .brand .ptag {
    font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink2); border: 1px solid var(--line2); border-radius: 99px;
    padding: 4px 8px; margin-left: 2px; white-space: nowrap;
}
@media (max-width: 600px) { .ep .brand .ptag { display: none; } }

.ep .hd-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ep .hd-link {
    font-weight: 600; font-size: 13px; color: var(--ink2);
    padding: 8px 10px; border-radius: 8px; text-decoration: none; white-space: nowrap;
}
.ep .hd-link:hover { color: var(--ink); background: var(--bg3); text-decoration: none; }
.ep .lang {
    font: 600 12px/1 var(--mono); letter-spacing: .06em;
    border: 1px solid var(--line2); border-radius: 8px; padding: 8px 11px;
    background: var(--bg2); color: var(--ink2); transition: border-color .15s;
}
.ep .lang:hover { border-color: var(--ink3); color: var(--ink); text-decoration: none; }

.ep .logout {
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 600; font-size: 13px; color: var(--ink2);
    border: 1px solid var(--line2); border-radius: 8px; padding: 8px 13px;
    background: var(--bg2); text-decoration: none;
}
.ep .logout:hover { border-color: var(--ink3); color: var(--ink); text-decoration: none; }
.ep .logout svg { width: 14px; height: 14px; }

/* desktop nav + dropdowns */
.ep .nav-desk { display: flex; align-items: center; gap: 2px; margin-left: 14px; }
.ep .nav-item { position: relative; }
.ep .nav-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600; font-size: 13.5px; color: var(--ink2);
    padding: 9px 12px; border-radius: 8px; text-decoration: none;
}
.ep .nav-btn:hover { color: var(--ink); background: var(--bg3); text-decoration: none; }
.ep .nav-btn[aria-current="true"] { color: var(--ink); background: var(--bg3); }
.ep .nav-btn .chev { width: 12px; height: 12px; transition: transform .15s; }
.ep .nav-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

.ep .dmenu {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px;
    background: var(--bg2); border: 1px solid var(--line); border-radius: 11px;
    box-shadow: var(--sh-lg); padding: 6px; display: none; z-index: 130;
}
.ep .dmenu.open { display: block; animation: ep-fadein .16s ease both; }
.ep .dmenu a {
    display: flex; align-items: center; gap: 10px; padding: 10px 11px;
    border-radius: 8px; font-size: 13.5px; font-weight: 600;
    color: var(--ink); text-decoration: none;
}
.ep .dmenu a:hover { background: var(--bg3); text-decoration: none; color: var(--ink); }
.ep .dmenu a svg { width: 16px; height: 16px; color: var(--ink3); flex: none; }

.ep .mburger {
    display: none; width: 42px; height: 42px; align-items: center; justify-content: center;
    border: 1px solid var(--line2); border-radius: 8px; background: var(--bg2); color: var(--ink2);
}
.ep .mburger svg { width: 19px; height: 19px; }

@media (max-width: 820px) {
    .ep .nav-desk,
    .ep .hd-link,
    .ep .logout { display: none; }
    .ep .mburger { display: inline-flex; }
}

.ep .mmenu { display: none; background: var(--bg2); border-top: 1px solid var(--line); }
.ep .mmenu.open { display: block; }
.ep .mmenu .wrap { padding-top: 10px; padding-bottom: 16px; display: flex; flex-direction: column; gap: 2px; }
.ep .mmenu .mm-h {
    font: 600 11px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
    color: var(--ink3); padding: 10px 10px 6px;
}
.ep .mmenu a,
.ep .mmenu button.mm-lnk {
    display: flex; align-items: center; gap: 10px; padding: 12px 10px;
    border-radius: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink);
    text-decoration: none; text-align: left; min-height: 44px; width: 100%;
}
.ep .mmenu a:hover,
.ep .mmenu button.mm-lnk:hover { background: var(--bg3); text-decoration: none; color: var(--ink); }
.ep .mmenu svg { width: 17px; height: 17px; color: var(--ink3); flex: none; }
.ep .mmenu .mm-out { color: var(--bad); }
.ep .mmenu .mm-out svg { color: var(--bad); }

/* --- footer -------------------------------------------------------------- */

.ep-ft {
    border-top: 1px solid var(--line); background: var(--bg2);
    padding: 22px 0; margin-top: auto;
}
.ep .ft {
    display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--ink2);
}
.ep .ft a,
.ep .ft button { color: var(--ink2); font-size: 12.5px; text-decoration: none; font-weight: 500; }
.ep .ft a:hover,
.ep .ft button:hover { color: var(--ink); text-decoration: underline; }
.ep .ft .cop { margin-left: auto; color: var(--ink3); }
@media (max-width: 680px) { .ep .ft .cop { margin-left: 0; width: 100%; } }

/* --- home: hero + action cards ------------------------------------------- */

.ep .hero { padding: 38px 0 26px; text-align: center; }
.ep .hero h1 { font-size: clamp(24px, 3.6vw, 34px); }
.ep .hero .sub { color: var(--ink2); font-size: 15px; margin-top: 8px; }

.ep .acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-bottom: 56px; }
@media (max-width: 900px) { .ep .acts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
    .ep .acts { grid-template-columns: 1fr; }
    .ep .hero { padding: 30px 0 20px; }
}

.ep .card-act {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
    background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r);
    padding: 30px 18px 26px; text-decoration: none; color: var(--ink);
    box-shadow: 0 1px 2px rgba(14, 18, 22, .04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    cursor: pointer;
}
.ep .card-act:hover {
    transform: translateY(-3px); box-shadow: var(--sh);
    border-color: var(--acc); text-decoration: none; color: var(--ink);
}
.ep .card-act:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; }
.ep .card-act .cic {
    width: 72px; height: 72px; border-radius: 18px;
    background: var(--acc-soft); color: var(--acc);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 14px; transition: background .18s, color .18s; flex: none;
}
.ep .card-act:hover .cic { background: var(--acc); color: #fff; }
.ep .card-act .cic svg { width: 38px; height: 38px; }
.ep .card-act h2 { font-size: 17px; }
.ep .card-act p { font-size: 13px; color: var(--ink2); }
@media (max-width: 480px) {
    .ep .card-act { flex-direction: row; text-align: left; align-items: center; gap: 16px; padding: 16px 18px; }
    .ep .card-act .cic { margin-bottom: 0; width: 56px; height: 56px; }
    .ep .card-act .cic svg { width: 29px; height: 29px; }
    .ep .card-act > div { display: flex; flex-direction: column; gap: 2px; }
}

/* --- task pages (login / recover / reset) -------------------------------- */

.ep .task { max-width: 480px; margin: 0 auto; padding: 44px 24px 64px; width: 100%; }
.ep .task.wide-task { max-width: 640px; }
@media (max-width: 520px) { .ep .task { padding: 28px 16px 48px; } }

.ep .crumb { margin-bottom: 22px; }
.ep .crumb a,
.ep .crumb button {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600; font-size: 13px; color: var(--ink2); text-decoration: none;
    padding: 0;
}
.ep .crumb a:hover,
.ep .crumb button:hover { color: var(--ink); text-decoration: none; }

.ep .panel {
    background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--sh); padding: 28px;
}
@media (max-width: 520px) { .ep .panel { padding: 22px 18px; } }
.ep .panel h1 { font-size: 22px; margin-bottom: 6px; }
.ep .panel .lead { color: var(--ink2); font-size: 14px; margin-bottom: 22px; }

.ep .pg { padding: 30px 0 64px; }
.ep .pg-head { margin-bottom: 22px; }
.ep .pg-head .ctx { font-size: 13px; color: var(--ink2); margin-bottom: 4px; }
.ep .pg-head h1 { font-size: clamp(21px, 3vw, 26px); }
.ep .pg-head .sub { color: var(--ink2); font-size: 14px; margin-top: 5px; }

.ep .sect-h {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin: 30px 0 12px; flex-wrap: wrap;
}
.ep .sect-h h2 { font-size: 16.5px; }
.ep .sect-h .hint2 { font-size: 12.5px; color: var(--ink3); }

/* --- registration stages ------------------------------------------------- */

/* keeps .wrap's gutters while adding the stage's vertical rhythm */
.ep .stage { padding: 34px 24px 64px; }
.ep .stage-h { margin-bottom: 26px; }
.ep .stage-h h1 { font-size: clamp(22px, 3.2vw, 28px); }
.ep .stage-h .sub { color: var(--ink2); font-size: 15px; margin-top: 8px; max-width: 62ch; }

/* service choice cards */
.ep .svcgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 760px; }
@media (max-width: 640px) { .ep .svcgrid { grid-template-columns: 1fr; } }
.ep .svc {
    position: relative; display: flex; flex-direction: column; align-items: center;
    gap: 16px; text-align: center; background: var(--bg2); border: 2px solid var(--line2);
    border-radius: 12px; padding: 32px 24px; cursor: pointer;
    transition: border-color .15s, background .15s; min-height: 170px; justify-content: center;
    color: var(--ink); width: 100%;
}
.ep .svc:hover { border-color: var(--acc); background: var(--acc-soft); }
.ep .svc .sic {
    width: 64px; height: 64px; border-radius: 14px; background: var(--acc-soft); color: var(--acc);
    display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.ep .svc:hover .sic { background: var(--bg2); }
.ep .svc .sic svg { width: 36px; height: 36px; }
.ep .svc b { font-size: 17px; line-height: 1.3; max-width: 26ch; font-weight: 600; }

/* animal count steppers */
.ep .spgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; max-width: 760px; }
.ep .spc {
    background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
    padding: 24px 22px; display: flex; flex-direction: column; align-items: center; gap: 10px;
    box-shadow: var(--sh);
}
.ep .spc .sph { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 18px; }
.ep .spc .spimg {
    width: 88px; height: 88px; border-radius: 20px;
    background: var(--acc-soft); color: var(--acc);
    display: inline-flex; align-items: center; justify-content: center;
}
.ep .spc .spimg svg { width: 48px; height: 48px; }
.ep .spcount { display: flex; align-items: center; gap: 18px; margin: 6px 0 2px; }
.ep .spbtn {
    width: 48px; height: 48px; border-radius: 10px; border: 1px solid var(--line2);
    background: var(--bg2); color: var(--ink); display: inline-flex;
    align-items: center; justify-content: center; padding: 0;
}
.ep .spbtn:hover:not([disabled]) { border-color: var(--acc); background: var(--acc-soft); color: var(--acc); }
.ep .spbtn[disabled] { opacity: .4; cursor: not-allowed; }
.ep .spbtn svg { width: 20px; height: 20px; }
.ep .spnum {
    font: 600 34px/1 var(--mono); min-width: 58px; text-align: center;
    border: 0; background: none; padding: 0; color: var(--ink);
}
.ep input.spnum { -moz-appearance: textfield; width: 58px; }
.ep input.spnum::-webkit-outer-spin-button,
.ep input.spnum::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ep .splim {
    font-weight: 600; font-size: 13px; color: var(--ink2); text-align: center;
    background: var(--bg3); border-radius: 8px; padding: 6px 12px;
}
.ep .limline { margin-top: 18px; font-size: 14px; color: var(--ink2); max-width: 760px; }

/* Document upload forms are injected either into the wizard's .wrap.stage or
   straight into #wrapper from the dashboard, so they carry their own shell and
   it collapses when it is already inside a container. */
.ep .docshell { width: 100%; max-width: 1020px; margin: 0 auto; padding: 30px 24px 64px; }
.ep .wrap .docshell,
.ep .stage .docshell { max-width: none; margin: 0; padding: 0; }

/* sticky wizard action bar */
.ep .stagebar {
    position: sticky; bottom: 0; z-index: 90;
    background: var(--bg2); border-top: 1px solid var(--line);
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
    margin-top: auto;
}
.ep .stagebar .wrap { display: flex; gap: 10px; justify-content: flex-end; }
.ep .stagebar .btn { min-width: 150px; padding: 13px 20px; font-size: 14.5px; }
@media (max-width: 560px) {
    .ep .stagebar .wrap { flex-direction: column-reverse; }
    .ep .stagebar .btn { width: 100%; }
}

/* --- forms --------------------------------------------------------------- */

.ep .fld { margin-bottom: 16px; }
.ep .fld > label,
.ep .fld .lbl {
    display: flex; justify-content: space-between; align-items: baseline;
    font-weight: 600; font-size: 13px; margin-bottom: 6px;
}
.ep .fld .opt { font-weight: 400; font-size: 12px; color: var(--ink3); }
.ep .req { color: var(--bad); font-weight: 600; }
.ep .fld .hint { font-size: 12.5px; color: var(--ink3); margin-top: 5px; }

.ep .inp {
    width: 100%; background: var(--bg2); border: 1px solid var(--line2);
    border-radius: 8px; padding: 11px 13px; font-size: 14.5px;
    transition: border-color .15s, box-shadow .15s; color: var(--ink);
    height: auto;
}
.ep select.inp {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%2357606a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center;
    background-size: 15px; padding-right: 40px;
}
.ep textarea.inp { min-height: 76px; resize: vertical; }
.ep .inp::placeholder { color: var(--ink3); }
.ep .inp:hover { border-color: var(--ink3); }
.ep .inp:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); outline: none; }
.ep .inp[disabled],
.ep fieldset:disabled .inp { background: var(--bg3); color: var(--ink3); cursor: not-allowed; }
.ep .fld.err .inp { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }

.ep .inp-lg { padding: 14px; font-size: 16px; }
.ep .fld-lg > label { font-size: 14.5px; margin-bottom: 7px; justify-content: flex-start; gap: 5px; }

.ep .fmsg {
    display: none; align-items: flex-start; gap: 6px;
    font-size: 12.5px; color: var(--bad); margin-top: 6px;
}
.ep .fld.err .fmsg { display: flex; }
.ep .fmsg svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }

/* Select2 (bootstrap theme) — make the closed control match .inp */
.ep .select2-container .select2-selection--single,
.ep .select2-container .select2-selection--multiple {
    background: var(--bg2); border: 1px solid var(--line2); border-radius: 8px;
    box-shadow: none; min-height: 46px; padding: 6px 4px; height: auto;
    font-size: 14.5px; color: var(--ink);
}
.ep .select2-container .select2-selection--single:hover { border-color: var(--ink3); }
.ep .select2-container.select2-container--focus .select2-selection,
.ep .select2-container.select2-container--open .select2-selection {
    border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft);
}
/* the dropdown floats free, so the control keeps its full radius when open */
.ep .select2-container.select2-container--open.select2-container--below .select2-selection,
.ep .select2-container.select2-container--open.select2-container--above .select2-selection {
    border-radius: 8px; border-color: var(--acc);
}
.ep .select2-container .select2-selection--single .select2-selection__rendered {
    color: var(--ink); padding-left: 9px; line-height: 32px;
}
.ep .select2-container .select2-selection--single .select2-selection__placeholder { color: var(--ink3); }
.ep .select2-container .select2-selection--single .select2-selection__arrow { height: 44px; }

/* Select2 multi-select: token chips matching the design's .tok */
.ep .select2-container .select2-selection--multiple {
    min-height: 50px; height: auto; padding: 5px 40px 5px 7px;
    border: 1px solid var(--line2); border-radius: 8px; background: var(--bg2);
    box-shadow: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%238a939d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center; background-size: 15px;
}
.ep .select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
    margin: 0; padding: 0; list-style: none;
    overflow: visible; white-space: normal; text-overflow: clip; line-height: 1.4;
}
.ep .select2-container .select2-selection--multiple .select2-selection__choice {
    display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 7px;
    float: none; margin: 0; padding: 5px 5px 5px 12px;
    background: var(--acc-soft); border: 1.5px solid #bcd4f7; color: var(--acc-ink);
    border-radius: 7px; font-size: 14px; font-weight: 600; min-height: 38px;
}
.ep .select2-container .select2-selection--multiple .select2-selection__choice:hover {
    border-color: var(--acc);
}
.ep .select2-container .select2-selection--multiple .select2-selection__choice__remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px; margin: 0;
    color: var(--acc-ink); font-size: 17px; font-weight: 600; line-height: 1;
}
.ep .select2-container .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: #cfe0fa; color: var(--acc-ink);
}
.ep .select2-container .select2-selection--multiple .select2-search--inline .select2-search__field {
    height: auto; min-height: 36px; min-width: 120px; margin: 0;
    padding: 7px 6px; font-size: 14.5px; line-height: 1.4;
}
.ep .select2-container .select2-selection--multiple .select2-selection__placeholder {
    float: none; margin: 0; color: var(--ink3); font-size: 14.5px;
}

/* the plugin's green "valid" state is not part of the design */
.ep .form-control.is-valid,
.ep .custom-select.is-valid { border-color: var(--line2); box-shadow: none; background-image: none; }
.ep .has-success .select2-selection,
.ep .has-success .select2-dropdown { border-color: var(--line2); }
.ep .has-success .select2-container--focus .select2-selection,
.ep .has-success .select2-container--open .select2-selection {
    border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft);
}

/* FormValidation.io messages rendered into a .fld */
.ep .fv-help-block,
.ep .fv-plugins-message-container > div {
    font-size: 12.5px; color: var(--bad); margin-top: 6px;
}
.ep .fld:has(.fv-help-block) .inp,
.ep .fld.fv-has-error .inp { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }

.ep fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ep .fsec { border: 0; padding: 0; margin: 0 0 8px; }
.ep .fsec > legend {
    font-size: 15.5px; font-weight: 600; letter-spacing: -.01em;
    padding: 0; margin-bottom: 4px; width: auto; border: 0;
}
.ep .fsec > .fsec-sub { font-size: 12.5px; color: var(--ink3); margin-bottom: 14px; }
.ep .fsec-rule { border: 0; border-top: 1px solid var(--line); margin: 10px 0 22px; }

.ep .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 640px) { .ep .fgrid { grid-template-columns: 1fr; } }
.ep .fgrid .full { grid-column: 1 / -1; }

.ep .pwd-wrap { position: relative; }
.ep .pwd-wrap .inp { padding-right: 44px; }
.ep .pwd-eye {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; display: inline-flex; align-items: center;
    justify-content: center; border-radius: 7px; color: var(--ink3);
}
.ep .pwd-eye:hover { color: var(--ink); background: var(--bg3); }
.ep .pwd-eye svg { width: 16px; height: 16px; }

.ep .row-between {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin: 4px 0 18px;
}
.ep .chk {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; color: var(--ink2); cursor: pointer; margin: 0; font-weight: 400;
}
.ep .chk input { width: 16px; height: 16px; accent-color: var(--acc); cursor: pointer; flex: none; margin: 0; }
.ep .flink { font-weight: 600; font-size: 13px; color: var(--acc); padding: 0; }
.ep button.flink:hover { color: var(--acc-ink); text-decoration: underline; }

/* "or" divider + third-party sign-in stack */
.ep .or-sep {
    display: flex; align-items: center; gap: 12px;
    margin: 20px 0 16px; color: var(--ink3); font-size: 12px;
    font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.ep .or-sep::before,
.ep .or-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ep .sso-list { display: flex; flex-direction: column; gap: 8px; }
.ep .sso-list .btn i { color: var(--ink2); }

.ep .req-note { font-size: 14.5px; color: var(--ink2); margin: 0 0 18px; }

/* radio cards */
.ep .rcards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.ep .rcard {
    display: flex; gap: 12px; align-items: flex-start;
    border: 1px solid var(--line2); border-radius: 10px; padding: 14px 15px;
    cursor: pointer; transition: border-color .15s, background .15s; font-weight: 400; margin: 0;
}
.ep .rcard:hover { border-color: var(--ink3); }
.ep .rcard input { margin-top: 3px; accent-color: var(--acc); width: 15px; height: 15px; flex: none; cursor: pointer; }
.ep .rcard b { display: block; font-size: 14px; margin-bottom: 2px; }
.ep .rcard span { font-size: 12.5px; color: var(--ink2); }
.ep .rcard:has(input:checked) { border-color: var(--acc); background: var(--acc-soft); }

/* radio pills / segmented */
.ep .rpills { display: flex; flex-wrap: wrap; gap: 8px; }
.ep .rpills label {
    position: relative; display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--line2); border-radius: 99px; padding: 9px 15px;
    font-size: 13.5px; font-weight: 600; color: var(--ink2); cursor: pointer;
    min-height: 40px; margin: 0;
}
.ep .rpills input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ep .rpills label:has(input:checked) { border-color: var(--acc); background: var(--acc-soft); color: var(--acc-ink); }

.ep .seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 8px; background: var(--bg2); padding: 3px; gap: 3px; }
.ep .seg label {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-height: 34px; padding: 6px 14px; border-radius: 6px;
    font-size: 13px; font-weight: 600; color: var(--ink2); cursor: pointer; margin: 0;
}
.ep .seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ep .seg label:has(input:checked) { background: var(--acc); color: #fff; }

/* --- alerts / notes ------------------------------------------------------ */

.ep .alert {
    display: none; gap: 9px; align-items: flex-start; border: 0;
    border-radius: 9px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 18px;
}
.ep .alert.show { display: flex; }
.ep .alert svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.ep .alert.bad { background: var(--bad-soft); color: var(--bad); }
.ep .alert.ok { background: var(--ok-soft); color: var(--ok); }
.ep .alert.info { background: var(--acc-soft); color: var(--acc-ink); }
.ep .alert.warn { background: var(--warn-soft); color: var(--warn); }
.ep .alert ul { padding-left: 18px; margin-top: 4px; }
.ep .alert a { color: inherit; text-decoration: underline; font-weight: 600; }

.ep .foot-note {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 12.5px; color: var(--ink3); margin-top: 18px;
}
.ep .foot-note svg { width: 13px; height: 13px; flex: none; }

.ep .alt-act { text-align: center; font-size: 13.5px; color: var(--ink2); margin-top: 20px; }

.ep .badge {
    display: inline-flex; align-items: center; gap: 5px;
    font: 500 11.5px/1 var(--mono); padding: 4px 9px; border-radius: 99px;
    border: 1px solid var(--line); background: var(--bg2); color: var(--ink2); white-space: nowrap;
}
.ep .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ep .badge.ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.ep .badge.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.ep .badge.bad { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.ep .badge.info { background: var(--acc-soft); border-color: transparent; color: var(--acc-ink); }

/* --- steps / progress ---------------------------------------------------- */

.ep .steps { display: flex; align-items: center; gap: 8px; padding-top: 22px; margin-bottom: 0; }
.ep .steps .st {
    display: flex; align-items: center; gap: 8px; flex: 1;
    padding: 0; border-radius: 0; text-decoration: none; min-width: 0;
}
.ep .steps .st:last-child { flex: none; }
.ep .steps .st:last-child .stbar { display: none; }
.ep .steps .st:hover { text-decoration: none; }
.ep .steps .st:hover .stl { color: var(--ink2); }
/* Neutralise Bootstrap's .nav-pills .nav-link.active pill */
.ep .steps .st.nav-link,
.ep .steps .st.nav-link.active,
.ep .steps .st.nav-link.disabled { background: none; color: inherit; }
.ep .steps .st.disabled { cursor: default; }
.ep .steps .stn {
    width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line2);
    color: var(--ink3); font: 600 12px/1 var(--mono);
    display: inline-flex; align-items: center; justify-content: center; flex: none; transition: all .2s;
}
.ep .steps .stl { font-size: 12px; font-weight: 600; color: var(--ink3); white-space: nowrap; }
.ep .steps .stbar { flex: 1; height: 2px; background: var(--line); border-radius: 2px; min-width: 12px; }
.ep .steps .st.cur .stn { border-color: var(--acc); background: var(--acc); color: #fff; }
.ep .steps .st.cur .stl { color: var(--ink); }
.ep .steps .st.done .stn { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.ep .steps .st.done .stl { color: var(--ink2); }
@media (max-width: 640px) { .ep .steps .stl { display: none; } }

.ep-prog { background: var(--bg2); border-bottom: 1px solid var(--line); }
.ep .prog-in { display: flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.ep .prog-lbl { font-weight: 600; font-size: 13.5px; color: var(--ink2); white-space: nowrap; }
.ep .prog-bar { flex: 1; height: 8px; border-radius: 99px; background: var(--bg3); overflow: hidden; }
.ep .prog-bar i { display: block; height: 100%; background: var(--acc); border-radius: 99px; transition: width .3s ease; }

/* --- policies list ------------------------------------------------------- */

.ep .pol-list { display: flex; flex-direction: column; gap: 12px; }
.ep .pol-item {
    display: flex; align-items: center; gap: 14px; background: var(--bg2);
    border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px;
    text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s;
    width: 100%; text-align: left;
}
.ep .pol-item:hover { border-color: var(--acc); box-shadow: var(--sh); text-decoration: none; color: var(--ink); }
.ep .pol-item .pic {
    width: 40px; height: 40px; border-radius: 10px; background: var(--acc-soft);
    color: var(--acc); display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.ep .pol-item .pic svg { width: 20px; height: 20px; }
.ep .pol-item b { display: block; font-size: 15px; }
.ep .pol-item span { font-size: 12.5px; color: var(--ink2); }
.ep .pol-item .pdl {
    margin-left: auto; font: 500 11px/1 var(--mono); letter-spacing: .08em;
    color: var(--ink3); border: 1px solid var(--line2); border-radius: 99px;
    padding: 5px 9px; white-space: nowrap; flex: none;
}
@media (max-width: 480px) { .ep .pol-item .pdl { display: none; } }

/* --- microchip result card ---------------------------------------------- */

.ep .chipbox { display: flex; gap: 10px; }
.ep .chipbox .inp { font-family: var(--mono); font-size: 15px; letter-spacing: .04em; }
@media (max-width: 520px) { .ep .chipbox { flex-direction: column; } }

.ep .pet-card { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--bg2); }
.ep .pet-head {
    display: flex; align-items: center; gap: 13px; padding: 16px 18px;
    border-bottom: 1px solid var(--line); background: var(--bg);
}
.ep .pet-ava {
    width: 44px; height: 44px; border-radius: 10px; background: var(--acc-soft);
    color: var(--acc); display: flex; align-items: center; justify-content: center;
    flex: none; overflow: hidden;
}
.ep .pet-ava img { width: 100%; height: 100%; object-fit: cover; }
.ep .pet-ava svg { width: 22px; height: 22px; }
.ep .pet-head b { font-size: 16.5px; display: block; }
.ep .pet-head .mono { font-size: 12px; color: var(--ink2); }
.ep .pet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }
.ep .pet-grid > div { background: var(--bg2); padding: 12px 18px; }
.ep .pet-grid span { display: block; font-size: 11.5px; color: var(--ink3); margin-bottom: 3px; }
.ep .pet-grid b { font-size: 13.5px; font-weight: 600; }
@media (max-width: 460px) { .ep .pet-grid { grid-template-columns: 1fr; } }
.ep .pet-foot {
    padding: 15px 18px; border-top: 1px solid var(--line);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ep .pet-foot p { font-size: 12.5px; color: var(--ink2); flex: 1; min-width: 200px; }

.ep .noresult {
    margin-top: 22px; border: 1px dashed var(--line2); border-radius: 11px;
    padding: 26px 22px; text-align: center;
}
.ep .noresult .nic {
    width: 40px; height: 40px; border-radius: 50%; background: var(--bg3); color: var(--ink3);
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.ep .noresult .nic svg { width: 19px; height: 19px; }
.ep .noresult b { display: block; font-size: 15px; margin-bottom: 5px; }
.ep .noresult p { font-size: 13px; color: var(--ink2); max-width: 42ch; margin: 0 auto; }

/* --- success pane -------------------------------------------------------- */

.ep .done-pane { text-align: center; padding: 8px 0; }
.ep .done-pane .dic {
    width: 52px; height: 52px; border-radius: 50%; background: var(--ok-soft); color: var(--ok);
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.ep .done-pane .dic svg { width: 24px; height: 24px; }
.ep .done-pane h2 { font-size: 19px; margin-bottom: 8px; }
.ep .done-pane p { font-size: 13.5px; color: var(--ink2); max-width: 44ch; margin: 0 auto; }

/* --- account: summary cards --------------------------------------------- */

.ep .sum3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
.ep .sum3.sum2 { grid-template-columns: 1fr 1fr; }
/* a lone card in a 3-up grid reads as a mistake, so cap its column */
.ep .sum3.sum1 { grid-template-columns: minmax(0, 420px); }
/* the payment / documents pair share a row, so both cards fill it.
   .top-div carries `margin: 0 auto` from app.css, and an auto cross-axis
   margin cancels flex stretch — hence the explicit width and margins. */
.ep .sum3.sum2 > div { display: flex; flex-direction: column; min-width: 0; }
.ep .sum3.sum2 > div > .top-div {
    flex: 1; width: 100%; min-width: 0;
    margin-left: 0; margin-right: 0; margin-bottom: 0;
}
@media (max-width: 980px) {
    .ep .sum3,
    .ep .sum3.sum2 { grid-template-columns: 1fr; }
}
.ep .scard {
    background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--sh); padding: 18px; display: flex; flex-direction: column;
    gap: 10px; min-width: 0;
}
.ep .scard .sic {
    width: 38px; height: 38px; border-radius: 10px; background: var(--acc-soft); color: var(--acc);
    display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.ep .scard .sic svg { width: 19px; height: 19px; }
.ep .scard .sic.due { background: var(--warn-soft); color: var(--warn); }
.ep .scard .sic.ok { background: var(--ok-soft); color: var(--ok); }
.ep .scard .sic.bad { background: var(--bad-soft); color: var(--bad); }
.ep .sc-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ep .sc-h h2 { font-size: 15.5px; flex: 1; min-width: 0; }
.ep .sc-body { flex: 1; min-width: 0; }
.ep .sc-amt { font: 600 26px/1.1 var(--mono); letter-spacing: -.01em; display: block; }
.ep .sc-sub { display: block; font-size: 12px; color: var(--ink3); font-weight: 500; margin-top: 3px; }
.ep .sc-line { font-size: 13px; color: var(--ink2); margin-top: 10px; overflow-wrap: anywhere; }
.ep .sc-item {
    display: flex; align-items: center; gap: 8px 10px; padding: 10px 0;
    border-bottom: 1px solid var(--line); flex-wrap: wrap; min-width: 0;
}
.ep .sc-item:first-child { padding-top: 2px; }
.ep .sc-item:last-child { border-bottom: 0; padding-bottom: 2px; }
.ep .sc-item .si-t { flex: 1; min-width: 130px; }
.ep .sc-item .si-t b { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
.ep .sc-item .si-t span { display: block; font-size: 12px; color: var(--ink3); overflow-wrap: anywhere; }
.ep .sc-item .btn { min-height: 40px; white-space: nowrap; flex: none; }
.ep .sc-item > .badge { margin-left: auto; }
.ep .sc-item .si-act {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-left: auto; justify-content: flex-end;
}
.ep .sc-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.ep .sc-acts .btn { flex: 1; min-height: 46px; }
.ep .sc-links { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 13px; font-weight: 600; margin-top: 2px; }
.ep .donlink {
    font-weight: 600; font-size: 13px; color: var(--acc);
    background: none; border: 0; padding: 0; text-decoration: none;
}
.ep .donlink:hover { color: var(--acc-ink); text-decoration: underline; }
.ep .sc-note { font-size: 12.5px; color: var(--ink3); overflow-wrap: anywhere; margin-top: 2px; }
.ep .scard .ipara { font-size: 13.5px; color: var(--ink2); line-height: 1.55; }
.ep .scard .ilist {
    padding-left: 17px; display: flex; flex-direction: column; gap: 7px;
    font-size: 13.5px; color: var(--ink2); line-height: 1.5; margin: 0;
}
.ep .scard .isrc { font-size: 11.5px; color: var(--ink3); font-family: var(--mono); margin-top: auto; padding-top: 8px; }
.ep .scard .li-row > span:first-child { color: var(--ink2); }
.ep .scard .li-row:first-child { padding-top: 2px; }
/* cards in a row stretch to the tallest, so pin a destructive action to the
   bottom edge and keep it trailing rather than stretched like .sc-acts */
.ep .scard .delrow {
    display: flex; justify-content: flex-end; border-top: 1px solid var(--line);
    margin-top: auto; padding-top: 10px;
}

/* --- account: store banner ---------------------------------------------- */

.ep .storebanner { margin-top: 26px; }
.ep .storebanner a { display: inline-block; max-width: 100%; }
/* the view still carries a legacy `#goToCustomMedal` rule, so match its id here
   or that 5px radius and heavy shadow win on specificity */
.ep .storebanner #goToCustomMedal {
    display: block; width: 100%; max-width: 460px; height: auto; margin: 0;
    border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh);
}

/* --- profile: definition rows + timeline --------------------------------- */

.ep .drows { display: flex; flex-direction: column; }
.ep .drow {
    display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
    padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.ep .drow:last-child { border-bottom: 0; }
.ep .drow .dk { width: 180px; flex: none; font-size: 12.5px; color: var(--ink3); font-weight: 600; }
.ep .drow .dv { flex: 1; min-width: 180px; overflow-wrap: anywhere; }
.ep .drow .dv small { display: block; font-size: 12px; color: var(--ink3); }
.ep .drow .da { margin-left: auto; flex: none; }
.ep .drow .da .btn { white-space: normal; }

.ep .tl { list-style: none; position: relative; padding-left: 22px; margin: 0; }
.ep .tl::before {
    content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px;
    width: 2px; background: var(--line); border-radius: 2px;
}
.ep .tl li { position: relative; padding: 0 0 20px; }
.ep .tl li:last-child { padding-bottom: 0; }
.ep .tl li::before {
    content: ""; position: absolute; left: -21px; top: 5px;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--bg2); border: 2.5px solid var(--acc);
}
.ep .tl .tl-d { font: 500 11.5px/1 var(--mono); color: var(--ink3); margin-bottom: 3px; }
.ep .tl .tl-t { font-weight: 600; font-size: 14px; }
.ep .tl .tl-x { font-size: 13px; color: var(--ink2); margin-top: 2px; }

/* one "field: old -> new" line inside a timeline entry */
.ep .chg {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
    font-size: 13.5px; font-weight: 400; margin-top: 7px; min-width: 0;
}
.ep .chg .ck { font-size: 12.5px; font-weight: 600; color: var(--ink3); }
.ep .chg .cv {
    font: 500 12.5px/1.5 var(--mono); padding: 2px 7px; border-radius: 6px;
    background: var(--bg3); color: var(--ink2); overflow-wrap: anywhere; min-width: 0;
}
.ep .chg .cv.to { background: var(--acc-soft); color: var(--acc-ink); }
.ep .chg .carr { font-size: 12px; color: var(--ink3); }
.ep .chg .cnote { font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }

/* --- account: animal cards ----------------------------------------------- */

.ep .agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
@media (max-width: 400px) { .ep .agrid { grid-template-columns: 1fr; } }
.ep .acard {
    background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 1px 2px rgba(14, 18, 22, .04); overflow: hidden;
    display: flex; flex-direction: column;
}
.ep .acard-top { display: flex; align-items: center; gap: 10px 13px; padding: 16px 16px 0; flex-wrap: wrap; }
.ep .acard-top .badge { margin-left: auto; }
.ep .aava {
    width: 54px; height: 54px; border-radius: 12px; background: var(--acc-soft); color: var(--acc);
    display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden;
}
.ep .aava img { width: 100%; height: 100%; object-fit: cover; }
.ep .aava svg { width: 28px; height: 28px; }
.ep .acard-top .anm { flex: 1; min-width: 0; }
.ep .acard-top .anm b { display: block; font-size: 16.5px; letter-spacing: -.01em; }
.ep .acard-top .anm span {
    display: block; font-size: 12.5px; color: var(--ink2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ep .ameta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
    border-top: 1px solid var(--line); margin-top: 14px;
}
.ep .ameta > div { background: var(--bg2); padding: 10px 16px; }
.ep .ameta span { display: block; font-size: 11px; color: var(--ink3); margin-bottom: 2px; }
.ep .ameta b { font-size: 13px; font-weight: 600; }
.ep .aexp { border-top: 1px solid var(--line); }
.ep .aexp-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 12px 16px; font-weight: 600; font-size: 13px;
    color: var(--ink2); min-height: 44px;
}
.ep .aexp-btn:hover { background: var(--bg3); color: var(--ink); }
.ep .aexp-btn .chev { width: 14px; height: 14px; transition: transform .18s; }
.ep .aexp-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.ep .aacts { display: none; padding: 4px 12px 14px; flex-direction: column; gap: 6px; }
.ep .aacts.open { display: flex; }
.ep .aacts .arow { display: flex; gap: 8px; }
.ep .aacts .arow .btn { flex: 1; }
.ep .aacts .delrow {
    display: flex; justify-content: flex-end; border-top: 1px solid var(--line);
    margin-top: 8px; padding-top: 9px;
}

.ep .addcard {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 4px; border: 1.5px dashed var(--line2); border-radius: 12px;
    padding: 28px 18px; background: none; color: var(--ink); cursor: pointer;
    min-height: 180px; transition: border-color .15s, background .15s;
}
.ep .addcard:hover { border-color: var(--acc); background: var(--acc-soft); }
.ep .addcard:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; }
.ep .addcard .plus {
    width: 46px; height: 46px; border-radius: 50%; background: var(--acc-soft); color: var(--acc);
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.ep .addcard:hover .plus { background: var(--bg2); }
.ep .addcard .plus svg { width: 22px; height: 22px; }
.ep .addcard b { font-size: 15.5px; font-weight: 600; }
.ep .addcard > span { font-size: 12.5px; color: var(--ink2); }

/* --- account: city cards (municipality picker) --------------------------- */

.ep .citygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ep .citycard {
    position: relative; display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start; gap: 14px; background: var(--bg2);
    border: 1px solid var(--line); border-radius: 12px; padding: 22px 20px;
    text-align: center; cursor: pointer; color: var(--ink); text-decoration: none;
    box-shadow: 0 1px 2px rgba(14, 18, 22, .04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ep .citycard:hover {
    transform: translateY(-3px); box-shadow: var(--sh);
    border-color: var(--acc); text-decoration: none; color: var(--ink);
}
.ep .citycard .clogo {
    height: 120px; display: flex; align-items: center; justify-content: center; width: 100%;
}
.ep .citycard .clogo img { max-height: 120px; width: auto; object-fit: contain; }
.ep .citycard b { font-size: 16px; }
.ep .citycard .cnotif {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--warn-soft); color: var(--warn); border-radius: 99px;
    padding: 5px 11px; font-size: 12px; font-weight: 600;
}

/* --- account: document / upload rows ------------------------------------- */

.ep .upl { display: flex; flex-direction: column; gap: 12px; }
.ep .upl-row {
    display: flex; align-items: center; gap: 14px;
    border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; flex-wrap: wrap;
}
.ep .upl-th {
    width: 52px; height: 52px; border-radius: 10px; background: var(--bg3); color: var(--ink3);
    display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden;
}
.ep .upl-th img { width: 100%; height: 100%; object-fit: cover; }
.ep .upl-th svg { width: 24px; height: 24px; }
.ep .upl-info { flex: 1; min-width: 170px; }
.ep .upl-info b { display: block; font-size: 14px; }
.ep .upl-info span { font-size: 12px; color: var(--ink3); }
.ep .upl-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- animal photo upload: one row per picture slot ----------------------- */

.ep .prow {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 14px 0; border-bottom: 1px solid var(--line); margin: 0;
}
.ep .prow:first-child { padding-top: 0; }
.ep .prow:last-child { border-bottom: 0; padding-bottom: 0; }
.ep .prow-th {
    position: relative; width: 52px; height: 52px; border-radius: 10px; flex: none;
    background: var(--bg3); color: var(--ink3); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.ep .prow-th > svg { width: 22px; height: 22px; }
/* the chosen picture covers the placeholder icon rather than replacing it, so
   the JS only has to toggle [hidden] the way it always did */
.ep .prow-th > span { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.ep .prow-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep .prow-b { flex: 1; min-width: 220px; }
.ep .prow-l { display: block; margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--ink2); }
/* FormValidation appends its message to the .form-group, i.e. the flex row —
   indent it past the thumbnail so it lines up under the field */
.ep .prow > .fv-plugins-message-container { flex-basis: 100%; margin: 0 0 0 66px; }
@media (max-width: 560px) {
    .ep .prow > .fv-plugins-message-container { margin-left: 0; }
}
.ep .alert .alert-sub { display: block; margin-top: 2px; opacity: .85; }

.ep .li-row {
    display: flex; justify-content: space-between; gap: 14px; font-size: 14px;
    padding: 11px 0; border-bottom: 1px solid var(--line);
}
.ep .li-row:last-child { border-bottom: 0; }
.ep .li-row .li-v { font-family: var(--mono); font-weight: 500; white-space: nowrap; }
.ep .li-row.total { border-bottom: 0; font-weight: 600; font-size: 15px; padding-top: 14px; }
.ep .li-row.total .li-v { font-size: 18px; }
.ep .li-sub { color: var(--ink3); font-size: 12.5px; display: block; }

/* --- tables -------------------------------------------------------------- */

.ep .tblwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); }
.ep .tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ep .tbl th {
    text-align: left; font: 600 11.5px/1 var(--mono); letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink3); padding: 13px 16px;
    border-bottom: 1px solid var(--line); white-space: nowrap;
}
.ep .tbl td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ep .tbl tr:last-child td { border-bottom: 0; }
.ep .tbl tbody tr:hover { background: var(--bg); }
.ep .tbl .dt { font: 500 12.5px/1.4 var(--mono); white-space: nowrap; }
.ep .tbl .amt { font-family: var(--mono); white-space: nowrap; }
.ep .tbl .rcpt { white-space: nowrap; }
.ep .tbl .rcpt .lnk + .lnk { margin-left: 12px; }
.ep .lnk {
    background: none; border: 0; padding: 0; font: 600 13px/1.4 var(--sans);
    color: var(--acc); cursor: pointer;
}
.ep .lnk:hover { color: var(--acc-ink); text-decoration: underline; }
.ep .tblbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.ep .tblbar .inp { max-width: 260px; }
.ep .tblnote { font-size: 12.5px; color: var(--ink3); margin-top: 12px; }

/* below this the table stops being a grid and each row becomes a stacked card,
   with the column name coming from each cell's data-th */
@media (max-width: 720px) {
    .ep .tblwrap { overflow-x: visible; }
    .ep .tbl thead { display: none; }
    .ep .tbl,
    .ep .tbl tbody,
    .ep .tbl tr,
    .ep .tbl td { display: block; width: 100%; }
    .ep .tbl tr { border-bottom: 1px solid var(--line); padding: 9px 0; }
    .ep .tbl tr:last-child { border-bottom: 0; }
    .ep .tbl td {
        border: 0; padding: 4px 16px; display: flex; gap: 14px;
        justify-content: space-between; align-items: baseline;
    }
    .ep .tbl td::before {
        content: attr(data-th); flex: none;
        font: 600 10.5px/1.6 var(--mono); letter-spacing: .09em;
        text-transform: uppercase; color: var(--ink3);
    }
    /* the link text already says what it does, so drop the stacked-row label */
    .ep .tbl .rcpt { justify-content: flex-start; gap: 16px; padding-top: 9px; }
    .ep .tbl .rcpt::before { content: none; }
    .ep .tbl .rcpt .lnk + .lnk { margin-left: 0; }
}

/* --- misc ---------------------------------------------------------------- */

.ep .empty {
    border: 1px dashed var(--line2); border-radius: 12px; padding: 34px 22px;
    text-align: center; color: var(--ink2); background: var(--bg2);
}
.ep .empty b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 5px; }
.ep .empty p { font-size: 13px; max-width: 44ch; margin: 0 auto; }

.ep .skel { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.ep .skel i {
    display: block; border-radius: 8px;
    background: linear-gradient(90deg, var(--bg3) 25%, var(--line) 50%, var(--bg3) 75%);
    background-size: 200% 100%; animation: ep-shim 1.2s linear infinite;
}
@keyframes ep-shim { to { background-position: -200% 0; } }

/* ==========================================================================
   Bootstrap compatibility layer
   Screens whose markup is still the original Bootstrap form (the deep
   registration steps, documents, billing) inherit the portal look from here
   instead of being rewritten field by field.
   ========================================================================== */

.ep h2 { font-size: 20px; }
.ep h3 { font-size: 17px; }
.ep h4 { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.ep h5 { font-size: 14px; font-weight: 600; margin: 0; }

.ep .form-group { margin-bottom: 18px; }
.ep .form-row { margin-left: -9px; margin-right: -9px; }
.ep .form-row > [class*="col-"] { padding-left: 9px; padding-right: 9px; }

/* Structural form labels only — inline <label> used as a data caption
   (profile page, receipts) must keep flowing with its text. */
.ep .form-group > label,
.ep .form-row > [class*="col-"] > label,
.ep form > label {
    display: block; font-weight: 600; font-size: 13px;
    margin-bottom: 6px; color: var(--ink);
}
.ep label span[style*="ff0000"] { color: var(--bad) !important; font-weight: 600; }

.ep .form-control,
.ep .custom-select {
    width: 100%; background: var(--bg2); border: 1px solid var(--line2);
    border-radius: 8px; padding: 11px 13px; font-size: 14.5px; height: auto;
    color: var(--ink); box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
.ep .form-control::placeholder { color: var(--ink3); }
.ep .form-control:hover { border-color: var(--ink3); }
.ep .form-control:focus,
.ep .custom-select:focus {
    border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); outline: none;
}
.ep .form-control[disabled],
.ep .form-control:disabled,
.ep .form-control[readonly] { background: var(--bg3); color: var(--ink3); }
.ep .form-control.is-invalid,
.ep .has-error .form-control { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.ep textarea.form-control { min-height: 84px; resize: vertical; }
.ep select.form-control:not([multiple]):not([size]) {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%2357606a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center;
    background-size: 15px; padding-right: 40px;
}

.ep .input-group-text {
    background: var(--bg3); border: 1px solid var(--line2); color: var(--ink2);
    border-radius: 8px; font-size: 13.5px; padding: 0 13px;
}
/* keep Bootstrap's input-group on one line (our .form-control is width:100%) */
.ep .input-group > .form-control,
.ep .input-group > .custom-select { width: 1%; flex: 1 1 auto; height: auto; }
.ep .input-group > .form-control:not(:last-child),
.ep .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ep .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ep .input-group-append > .btn,
.ep .input-group-append > .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ep .input-group-prepend > .btn,
.ep .input-group-prepend > .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.ep .custom-file { height: auto; }
.ep .custom-file-label {
    background: var(--bg2); border: 1px solid var(--line2); border-radius: 8px;
    font-size: 14.5px; padding: 11px 13px; height: auto; color: var(--ink2);
}
.ep .custom-file-label::after {
    background: var(--bg3); border-left: 1px solid var(--line2);
    border-radius: 0 8px 8px 0; height: 100%; padding: 11px 14px;
    color: var(--ink2); font-weight: 600;
}
/* bootstrap hard-codes "Browse" in this pseudo-element; the layout now stamps
   the locale on <html>, so translate it the way bootstrap documents */
.ep .custom-file-input:lang(fr) ~ .custom-file-label::after { content: "Parcourir"; }
.ep .custom-file-input { height: 100%; }
/* FormValidation marks the input, and Bootstrap paints the sibling label green
   on valid — the design has no valid state, so only the error one survives */
.ep .custom-file-input.is-valid ~ .custom-file-label { border-color: var(--line2); }
.ep .custom-file-input.is-invalid ~ .custom-file-label { border-color: var(--bad); }
.ep .custom-file-input:focus ~ .custom-file-label,
.ep .custom-file-input.is-valid:focus ~ .custom-file-label {
    border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft);
}
.ep .custom-file-input.is-invalid:focus ~ .custom-file-label {
    border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft);
}

.ep .btn-primary,
.ep .btn-success { background: var(--acc); color: #fff; border-color: transparent; }
.ep .btn-primary:hover,
.ep .btn-success:hover { background: var(--acc-ink); color: #fff; border-color: transparent; }
.ep .btn-info { background: var(--bg2); color: var(--ink); border-color: var(--line2); }
.ep .btn-info:hover { background: var(--bg2); color: var(--ink); border-color: var(--ink3); }
.ep .btn-outline-dark,
.ep .btn-outline-primary,
.ep .btn-secondary,
.ep .btn-light { background: var(--bg2); color: var(--ink); border-color: var(--line2); }
.ep .btn-outline-dark:hover,
.ep .btn-outline-primary:hover,
.ep .btn-secondary:hover,
.ep .btn-light:hover { background: var(--bg2); color: var(--ink); border-color: var(--ink3); }
.ep .btn-dark { background: var(--ink); color: #fff; border-color: transparent; }
.ep .btn-dark:hover { background: #000; color: #fff; }
.ep .btn-danger { background: var(--bad); color: #fff; border-color: transparent; }
.ep .btn-danger:hover { background: #a83226; color: #fff; }
.ep .btn-sm { padding: 8px 13px; font-size: 12.5px; }
.ep .btn-lg { padding: 15px 22px; font-size: 16px; }
.ep .btn-icon { padding: 9px 12px; }

.ep .badge-primary { background: var(--acc-soft); color: var(--acc-ink); }
.ep .badge-danger { background: var(--bad-soft); color: var(--bad); }
.ep .badge-success { background: var(--ok-soft); color: var(--ok); }
.ep .badge-warning { background: var(--warn-soft); color: var(--warn); }
.ep .badge-pill { border-radius: 99px; }

.ep .list-group { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.ep .list-group-item {
    border: 0; border-bottom: 1px solid var(--line); background: var(--bg2);
    padding: 14px 16px; font-size: 14px;
}
.ep .list-group-item:last-child { border-bottom: 0; }

.ep .progress { background: var(--bg3); border-radius: 99px; height: 8px; overflow: hidden; }
.ep .progress-bar { background: var(--acc); font-size: 12px; font-weight: 600; }
.ep .progress-bar.bg-grey { background: var(--bg3) !important; color: var(--ink2); }
.ep .progress-bar.bg-primary { background: var(--acc) !important; }

.ep .card {
    border: 1px solid var(--line); border-radius: 12px; background: var(--bg2);
    box-shadow: var(--sh);
}
.ep .card-header { background: var(--bg); border-bottom: 1px solid var(--line); font-weight: 600; }

.ep .top-div {
    background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--sh); padding: 20px;
}
.ep .top-div h2,
.ep .top-div h3 { font-size: 16.5px; }
.ep .top-div h4 { font-size: 15px; }

/* legacy account-dashboard components */
.ep .petimg {
    width: 56px; height: 56px; border-radius: 12px; padding: 0;
    background: var(--acc-soft); object-fit: cover;
}
.ep .imgProfile { margin-bottom: 14px; display: flex; align-items: center; gap: 12px; justify-content: center; }
.ep .imgProfile label { padding-left: 0; font-size: 16.5px; font-weight: 600; margin: 0; }
.ep .letter-spacing { letter-spacing: normal; }

.ep .alert-dog,
.ep .warning-dog {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: auto !important; height: auto; margin: 0 0 8px; padding: 9px 13px;
    border-radius: 9px; box-shadow: none; font-size: 12.5px; font-weight: 600;
}
.ep .alert-dog { background: var(--bad-soft); color: var(--bad); }
.ep .warning-dog { background: var(--warn-soft); color: var(--warn); }
.ep .circle-icon,
.ep .circle-icon-warning {
    background: none; width: auto; height: auto; margin: 0; padding: 0;
    float: none !important; color: currentColor;
}

.ep .info-pet { margin-top: 14px; font-size: 12.5px; color: var(--ink2); }
.ep .info-pet strong { display: block; font-size: 11px; color: var(--ink3); font-weight: 500; }
.ep .info-pet i { margin-left: 0; color: var(--ink3); }

.ep .rounded_button {
    width: 38px; height: 38px; border-radius: 9px; font-size: 13px;
    box-shadow: none; display: inline-flex; align-items: center; justify-content: center;
}
.ep .button_edit_pet { background: var(--acc-soft); color: var(--acc); }
.ep .button_edit_pet:hover { background: var(--acc); color: #fff; }
.ep .button_red { background: var(--bad-soft); color: var(--bad); }
.ep .button_red:hover { background: var(--bad); color: #fff; }
.ep .button_list { float: right; margin-right: 0; }
.ep .button_list ul { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; }
.ep .button_list li { margin: 0; }


.ep .addAnimal {
    border: 1.5px dashed var(--line2) !important; background: none !important;
    box-shadow: none !important; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
    transition: border-color .15s, background .15s;
}
.ep .addAnimal:hover { border-color: var(--acc) !important; background: var(--acc-soft) !important; }
.ep .addAnimal h2 { font-size: 15.5px; }
.ep .addAnimal b { font-size: 15.5px; font-weight: 600; }
.ep .addAnimal .addAnimal-sub { font-size: 12.5px; color: var(--ink2); }
.ep .addAnimal .plus {
    width: 46px; height: 46px; border-radius: 50%; background: var(--acc-soft); color: var(--acc);
    display: inline-flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 4px;
}
.ep .addAnimal:hover .plus { background: var(--bg2); }
.ep .addAnimal .fas.fa-plus { width: auto !important; height: auto !important; color: inherit !important; }


/* payment receipt inside the account dashboard */
.ep #receipt { list-style: none; padding: 0; margin: 0; }
.ep #receipt li {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 4px 10px; min-width: 0;
    padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.ep #receipt li label {
    margin: 0; font-weight: 500; font-size: 14px; max-width: none !important;
    flex: 1 1 55%; min-width: 0; overflow-wrap: break-word;
}
.ep #receipt li i.float-right,
.ep #receipt i.float-right {
    float: none !important; font-style: normal; font-family: var(--mono);
    white-space: nowrap; font-size: 13.5px; margin-left: auto;
}
.ep #receipt small { font-size: 12.5px; color: var(--ink3); }
.ep #receipt hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.ep #receipt li.totalPaiement {
    border-bottom: 0; font-size: 15px; font-weight: 600; padding-top: 14px;
}
.ep #receipt li.totalPaiement b { display: flex; justify-content: space-between; width: 100%; gap: 12px; }
.ep #receipt li.totalPaiement i.float-right { font-size: 18px; font-weight: 600; }

.ep .div_button { margin: 16px 0 0; }
.ep .checkout,
.ep .ccupdate_button,
.ep .ccadd_button,
.ep .payout {
    position: static !important; width: 100%; bottom: auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    background: var(--acc); color: #fff; border: 0; border-radius: 8px;
    padding: 13px 18px; font-weight: 600; font-size: 14px; letter-spacing: normal;
    box-shadow: none; text-transform: none; float: none;
}
.ep .checkout:hover,
.ep .ccupdate_button:hover,
.ep .ccadd_button:hover,
.ep .payout:hover { background: var(--acc-ink); color: #fff; }
.ep .icon-checkout {
    background: none; width: auto; height: auto; padding: 0; margin: 0;
    border-radius: 0; float: none !important; color: #fff;
}

/* generic status icon chip (used outside .scard too) */
.ep .sic {
    width: 38px; height: 38px; border-radius: 10px; background: var(--acc-soft); color: var(--acc);
    display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.ep .sic svg { width: 19px; height: 19px; }
.ep .sic.due { background: var(--warn-soft); color: var(--warn); }
.ep .sic.ok { background: var(--ok-soft); color: var(--ok); }
.ep .sic.bad { background: var(--bad-soft); color: var(--bad); }

.ep .notificationcity {
    display: inline-flex; align-items: center; gap: 6px; background: var(--warn-soft);
    color: var(--warn); border-radius: 99px; padding: 5px 11px; font-size: 12px; font-weight: 600;
}

/* animal form: photo header block */
.ep .photoblk {
    display: flex; align-items: center; gap: 16px;
    padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
    cursor: pointer;
}
.ep .photoblk .aava { width: 72px; height: 72px; border-radius: 14px; }
.ep .photoblk .aava img { width: 100%; height: 100%; object-fit: cover; }
.ep .photoblk h1 { font-size: 21px; margin: 0; }
.ep .photoblk .numberAnimal { display: block; font-size: 13px; color: var(--ink2); }

/* checkbox rows sitting where a label would normally be */
.ep .chkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 0; }
.ep .chkrow .chk { margin: 0; }
/* one choice per line, for groups whose labels are full sentences */
.ep .chkstack { display: flex; flex-direction: column; gap: 10px; padding: 10px 0 2px; }
.ep .chkstack .chk { margin: 0; align-items: flex-start; }
.ep .chkstack .chk input { margin-top: 1px; }

/* legacy forms put the label in a col-* and the field in another — the grid
   classes only squeeze them here, so flatten both back to full width */
.ep .form-group > label[class*="col-"] {
    flex: 0 0 100%; max-width: 100%; width: 100%; padding-left: 0; padding-right: 0;
}
.ep .form-group.row { margin-left: 0; margin-right: 0; }
.ep .form-group > [class*="col-"]:not(label) { padding-left: 0; padding-right: 0; }

/* profile page: <h3> is used as a data block, not as a heading */
.ep .infospace h3 {
    font-size: 14.5px; font-weight: 400; line-height: 2; color: var(--ink);
    letter-spacing: 0; margin: 0;
}
.ep .infospace label { font-weight: 600; margin: 0 3px 0 2px; display: inline; }
.ep .infospace .far,
.ep .infospace .fas,
.ep .infospace .fa { color: var(--ink3); margin-right: 4px; }

.ep .table { color: var(--ink); font-size: 13.5px; }
.ep .table th {
    border-top: 0; border-bottom: 1px solid var(--line);
    font: 600 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink3); padding: 13px 14px;
}
.ep .table td { border-top: 1px solid var(--line); padding: 13px 14px; vertical-align: middle; }

/* the legacy wizard's fixed action bar */
.ep .fixed-bottom {
    background: var(--bg2); border-top: 1px solid var(--line);
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
    margin: 0 !important; box-shadow: 0 -2px 12px -8px rgba(14, 18, 22, .3);
}
.ep .fixed-bottom .btn { min-height: 46px; }

.ep .alert-success { background: var(--ok-soft); color: var(--ok); border: 0; border-radius: 9px; display: flex; }
.ep .alert-danger { background: var(--bad-soft); color: var(--bad); border: 0; border-radius: 9px; display: flex; }
.ep .alert-warning { background: var(--warn-soft); color: var(--warn); border: 0; border-radius: 9px; display: flex; }
.ep .alert-info,
.ep .alert-secondary { background: var(--acc-soft); color: var(--acc-ink); border: 0; border-radius: 9px; display: flex; }

.ep .help-block,
.ep .invalid-feedback { font-size: 12.5px; color: var(--bad); margin-top: 6px; }
.ep .text-warning { color: var(--warn) !important; }
.ep .text-danger { color: var(--bad) !important; }
.ep .text-muted { color: var(--ink3) !important; }

/* ==========================================================================
   Select2 renders its dropdown at the end of <body>, outside .ep, so these
   rules are intentionally unscoped. Only citizen-facing pages load this file.
   ========================================================================== */

.select2-container .select2-dropdown {
    border: 1px solid #d3d8dd;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(16, 20, 24, .16);
    overflow: hidden;
    margin-top: 5px;
    font-family: 'Instrument Sans', system-ui, sans-serif;
}
.select2-container .select2-dropdown--above { margin-top: -5px; }
.select2-container .select2-results__options { padding: 6px; }
.select2-container .select2-results__option {
    padding: 11px 12px; border-radius: 8px; font-size: 14.5px; color: #0e1216;
    min-height: 44px; display: flex; align-items: center;
}
.select2-container .select2-results__option--highlighted[aria-selected] {
    background: #e8f0fd; color: #0e1216;
}
.select2-container .select2-results__option[aria-selected="true"] {
    background: #eef0f2; color: #0e1216; font-weight: 600;
}
.select2-container .select2-results__option[aria-disabled="true"] { color: #8a939d; }
.select2-container .select2-search--dropdown { padding: 8px 8px 4px; }
.select2-container .select2-search--dropdown .select2-search__field {
    border: 1px solid #d3d8dd; border-radius: 8px; box-shadow: none;
    padding: 10px 12px; font-size: 14.5px; color: #0e1216;
}
.select2-container .select2-search--dropdown .select2-search__field:focus {
    border-color: #0b5cd6; box-shadow: 0 0 0 3px #e8f0fd; outline: none;
}

/* ==========================================================================
   SweetAlert2 — the portal uses it for every confirm/prompt dialog, and it
   renders outside #wrapper, so these rules are intentionally unscoped. Only
   citizen-facing pages load this stylesheet.
   ========================================================================== */

/* SweetAlert2 injects its own <style> at runtime, after this file, so these
   rules need the extra specificity (and a few !important) to land. */
.swal2-container { font-family: 'Instrument Sans', system-ui, sans-serif; }
.swal2-container .swal2-popup,
.swal2-container .swal2-modal {
    border-radius: 14px !important;
    box-shadow: 0 2px 6px rgba(14, 18, 22, .06), 0 24px 60px -24px rgba(14, 18, 22, .35);
    padding: 28px 26px;
}
.swal2-container .swal2-popup .swal2-title {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: #0e1216;
}
.swal2-container .swal2-popup .swal2-content { font-size: 14.5px; line-height: 1.55; color: #57606a; }
.swal2-container .swal2-popup .swal2-input,
.swal2-container .swal2-popup .swal2-select,
.swal2-container .swal2-popup .swal2-textarea {
    border: 1px solid #d3d8dd; border-radius: 8px; box-shadow: none;
    font-size: 14.5px; height: auto; padding: 11px 13px; color: #0e1216;
}
.swal2-container .swal2-popup .swal2-input:focus,
.swal2-container .swal2-popup .swal2-select:focus,
.swal2-container .swal2-popup .swal2-textarea:focus { border-color: #0b5cd6; box-shadow: 0 0 0 3px #e8f0fd; }
.swal2-container .swal2-popup .swal2-styled {
    border-radius: 8px !important; font-weight: 600; font-size: 14px;
    padding: 12px 20px; box-shadow: none; border: 1px solid transparent !important;
}
.swal2-container .swal2-popup .swal2-styled.swal2-confirm { background-color: #0b5cd6 !important; color: #fff !important; }
.swal2-container .swal2-popup .swal2-styled.swal2-confirm:hover { background-color: #0a4fb8 !important; }
.swal2-container .swal2-popup .swal2-styled.swal2-cancel {
    background-color: #ffffff !important; color: #0e1216 !important; border-color: #d3d8dd !important;
}
.swal2-container .swal2-popup .swal2-styled.swal2-cancel:hover { border-color: #8a939d !important; }
.swal2-container .swal2-popup .swal2-validationerror,
.swal2-container .swal2-popup .swal2-validation-message {
    background: #fbe9e6; color: #c0392b; border-radius: 8px; font-size: 13.5px;
}

@keyframes ep-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
.ep .fadein { animation: ep-fadein .3s ease both; }

@media (prefers-reduced-motion: reduce) {
    .ep *,
    .ep *::before,
    .ep *::after { animation: none !important; transition: none !important; }
}

/* --- tempus dominus date picker ------------------------------------------ */

/* The picker builds its calendar out of `.table`, so the Bootstrap
   compatibility rules above inflate every day cell to 44px and the grid
   overflows the 19em dropdown — which is what leaves the page showing
   through beside it. Reset the cells and give the widget the portal surface. */
.ep .bootstrap-datetimepicker-widget.dropdown-menu {
    /* the popup otherwise inherits the field's width; the narrow date inputs in
       .addrow would squeeze the year grid from three columns down to two */
    width: auto; min-width: 248px; padding: 10px;
    background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--sh-lg); z-index: 1060;
}
.ep .bootstrap-datetimepicker-widget .table {
    margin: 0; font-size: 13px; color: var(--ink); width: auto;
}
.ep .bootstrap-datetimepicker-widget .table th,
.ep .bootstrap-datetimepicker-widget .table td {
    border: 0; padding: 0; text-align: center; vertical-align: middle;
    width: 34px; height: 32px; border-radius: 8px; font-weight: 400;
    letter-spacing: normal; text-transform: none; font-family: var(--sans);
    font-size: 13px; color: var(--ink); line-height: 1;
}
.ep .bootstrap-datetimepicker-widget .table thead th.dow {
    font: 600 10.5px/1 var(--mono); letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink3); height: 28px;
}
.ep .bootstrap-datetimepicker-widget .table th.picker-switch {
    width: auto; font-weight: 600; font-size: 13px; color: var(--ink);
}
.ep .bootstrap-datetimepicker-widget .table th.prev,
.ep .bootstrap-datetimepicker-widget .table th.next { color: var(--ink2); }
.ep .bootstrap-datetimepicker-widget .table th.prev:hover,
.ep .bootstrap-datetimepicker-widget .table th.next:hover,
.ep .bootstrap-datetimepicker-widget .table th.picker-switch:hover { background: var(--bg3); }
.ep .bootstrap-datetimepicker-widget .table td.day:hover,
.ep .bootstrap-datetimepicker-widget .table td.hour:hover,
.ep .bootstrap-datetimepicker-widget .table td.minute:hover,
.ep .bootstrap-datetimepicker-widget .table span.month:hover,
.ep .bootstrap-datetimepicker-widget .table span.year:hover,
.ep .bootstrap-datetimepicker-widget .table span.decade:hover { background: var(--bg3); }
.ep .bootstrap-datetimepicker-widget .table td.day.old,
.ep .bootstrap-datetimepicker-widget .table td.day.new,
.ep .bootstrap-datetimepicker-widget .table span.old,
.ep .bootstrap-datetimepicker-widget .table span.new { color: var(--ink3); }
.ep .bootstrap-datetimepicker-widget .table td.today { font-weight: 600; }
.ep .bootstrap-datetimepicker-widget .table td.today::before { border-bottom-color: var(--acc); }
.ep .bootstrap-datetimepicker-widget .table td.active,
.ep .bootstrap-datetimepicker-widget .table td.active:hover,
.ep .bootstrap-datetimepicker-widget .table span.active,
.ep .bootstrap-datetimepicker-widget .table span.active:hover {
    background: var(--acc); color: #fff; text-shadow: none;
}
.ep .bootstrap-datetimepicker-widget .table td.disabled,
.ep .bootstrap-datetimepicker-widget .table td.disabled:hover,
.ep .bootstrap-datetimepicker-widget .table span.disabled,
.ep .bootstrap-datetimepicker-widget .table span.disabled:hover {
    color: var(--line2); background: none; cursor: not-allowed;
}
/* the month / year / decade grids lay their own cells out inside one td */
.ep .bootstrap-datetimepicker-widget .table td span {
    width: 52px; height: 46px; line-height: 46px; margin: 1px;
    border-radius: 8px; font-size: 13px;
}
.ep .bootstrap-datetimepicker-widget .datepicker > div,
.ep .bootstrap-datetimepicker-widget .timepicker > div { padding: 0; }

/* an info tooltip riding alongside a field label, rather than dropping to its
   own line between the label and the input */
.ep .lbl-info {
    display: inline-flex; align-items: center; margin-left: 6px;
    color: var(--ink3); vertical-align: baseline;
}
.ep .lbl-info:hover { color: var(--ink2); }
.ep .lbl-info svg { width: 13px; height: 13px; }
.ep .chkrow .lbl-info { margin-left: 2px; }

/* --- "pick one, date it, add it" rows (vaccines / treatments / zoonoses) --- */

/* Two equal fields side by side with a gap, matching the lbs/kg weight pair:
   the picker on the left, the date on the right with its add button attached
   the way the unit addon is. The legacy 8/4 grid gave the date a third of the
   width, which is not enough for YYYY-MM-DD, so the value was clipped. */
.ep .addrow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0; }
.ep .addrow > [class*="col-"] {
    flex: 1 1 0; min-width: 190px; max-width: none; padding: 0;
}
.ep .addrow > .input-group { flex-wrap: nowrap; }
.ep .addrow .datetimepicker-input { flex: 1 1 auto; width: 1%; min-width: 0; }


/* app.css pins `input#postal_code { height: 36px }` by id, which outranks
   `.ep .form-control` and left the postal code shorter than every field
   beside it. Match on id here to hand it back its natural height. */
.ep input#postal_code,
.ep input#postal_code2 { height: auto; }