/* Patent Country Selection Direct - page styles. Brand tokens from the S&Z style guide
   (licence-direct-brand-pack/STYLE_GUIDE.md); chrome.css (nav, hero, footer) is shared with Licence Direct. */
:root {
  --bg: #eaf1fa; --card: #ffffff; --navy: #022f52; --button: #004370; --button-hover: #005a9a;
  --amber: #f09e1b; --amber-under: #805209; --amber-hover: #e08f0a; --orange: #b94803;
  --ink: #333333; --muted: #5b6b7b; --border: #c8d8e8; --highlight: #fdf0d9;
}
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 "Nunito", serif; }

/* The product name is long: a smaller hero title than Licence Direct's one-word title. */
#heroBannerHeading { font-size: clamp(30px, 5.4vw, 68px); letter-spacing: 1px; }
#heroBanner { height: 320px; }

#app { max-width: 1100px; margin: 0 auto; padding: 32px 16px 64px; }
.card { background: var(--card); border-radius: 10px; box-shadow: 0 2px 10px rgba(10, 45, 97, 0.08);
        padding: 28px 32px; margin-bottom: 28px; }
.card h2 { font-family: "Lato", serif; font-weight: 400; font-size: 32px; color: var(--navy); margin: 0 0 6px; }
.card h3 { font-family: "Lato", serif; font-weight: 900; color: var(--navy); margin: 0 0 6px; font-size: 20px; }
.intro { color: var(--muted); margin: 0 0 18px; }
.note { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.fieldNote { font-style: italic; }

.row { margin: 0 0 16px; }
.row > label { display: block; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.inputRow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
input[type="text"], input[type="number"] {
  font: inherit; color: var(--ink); background: #fbfdff; border: 1.5px solid var(--border); border-radius: 8px;
  box-shadow: inset 0 1px 2px rgba(2, 47, 82, 0.06); transition: border-color 0.15s, box-shadow 0.15s; }
input[type="text"] { height: 44px; box-sizing: border-box; padding: 0 14px; font-size: 16px; }
input[type="number"] { padding: 6px 8px; }
input::placeholder { color: #8a99a8; opacity: 1; }
input[type="text"]:hover, input[type="number"]:hover { border-color: #a9c0d6; }
input:focus { outline: none; border-color: var(--button); box-shadow: 0 0 0 3px rgba(0, 67, 112, 0.15); }
#pctNumber { width: 420px; }      /* fits "e.g. PCT/ZA2023/050012 or WO 2023/123456" */
#ipcInput { width: 240px; }
/* chrome.css gives every .snzButton margin-top: 20px - in an input row the button must sit level with the field */
.inputRow .snzButton { margin-top: 0; height: 44px; box-sizing: border-box; padding: 0 24px; font-size: 16px; }
.rowLabel { display: block; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.entityOptions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }   /* stacked (user) */
.entityOption { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); cursor: pointer; }
.entityOption input { width: 18px; height: 18px; margin: 0; accent-color: var(--navy); }
.claimInput { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.claimInput input { width: 80px; height: 44px; box-sizing: border-box; font-size: 16px; padding: 0 10px; }
.claimsSource { margin: 0; }
.fieldDescription { font-weight: 700; color: var(--navy); }
.fieldDescription.error, .status.error { color: #b00020; }
.status { min-height: 1.5em; font-size: 15px; }
.status.busy { color: var(--muted); }
.patentTitle { background: var(--bg); border-radius: 6px; padding: 8px 12px; margin: 0 0 16px; color: var(--navy); }
.otherClasses { font-size: 14px; color: var(--muted); }
.chip { font: inherit; font-size: 13px; border: 1px solid var(--border); background: #fff; color: var(--navy);
        border-radius: 14px; padding: 2px 10px; margin: 2px 4px 2px 0; cursor: pointer; }
.chip:hover { border-color: var(--orange); color: var(--orange); }

/* buttons (chrome.css provides .snzButton) */
.snzButton:disabled { opacity: 0.6; cursor: wait; }
.amberButton { display: inline-block; background: var(--amber); color: #fff; border: none; border-bottom: 3px solid var(--amber-under);
               border-radius: 22px; padding: 8px 28px 9px; font: 400 21px "Lato", serif; cursor: pointer; text-decoration: none; }
.amberButton:hover { background: var(--amber-hover); color: #fff; }
/* the blue action buttons (prompt, 2026-10-13): the same shape as the yellow ones */
.blueButton { display: inline-block; background: var(--navy); color: #fff; border: none; border-bottom: 3px solid #011a2e;
              border-radius: 22px; padding: 8px 28px 9px; font: 400 21px "Lato", serif; cursor: pointer; text-decoration: none; }
.blueButton:hover { background: #0a4673; color: #fff; }
.amberButton.small { font-size: 15px; padding: 6px 16px 7px; font-family: "Nunito", serif; }
.linkButton { background: none; border: none; color: var(--button); font: inherit; cursor: pointer; padding: 6px 0; text-decoration: underline; }
.linkButton:hover { color: var(--orange); }

/* "See what happens..." hint: quiet dark gold text. #9a6a00 is the S&Z amber darkened until it passes
   WCAG AA contrast on white (4.7:1); the brand amber #f09e1b itself is only 2.2:1 - too faint for text. */
.hintCallout { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 14px; padding: 0;
               background: none; border: none; color: #9a6a00; font: 400 15px "Nunito", serif;
               cursor: pointer; text-align: left; }
.hintCallout:hover { text-decoration: underline; }
.hintIcon { display: none; }
.hintArrow { font-size: 13px; }
tr.pointedAt { background: var(--highlight); transition: background 0.3s; }

/* weightings */
table.weights { width: 100%; border-collapse: collapse; }
table.weights th, table.weights td { padding: 10px 8px; border-bottom: 1px solid #eef2f7; text-align: left; vertical-align: middle; }
table.weights th { width: 42%; font-weight: 400; }
.wLabel { display: block; font-weight: 700; color: var(--navy); }
.wHelp { display: block; font-size: 13px; color: var(--muted); }
.wSlider input { width: 100%; accent-color: var(--button); }
.wNumber { white-space: nowrap; width: 90px; }
.wNumber input { width: 58px; text-align: right; margin-right: 2px; }
.wLock { width: 80px; white-space: nowrap; font-size: 14px; }
tr.locked .wLabel::after { content: " 🔒"; font-size: 12px; }
tfoot th, tfoot td { font-weight: 700; color: var(--navy); border-bottom: none; }

/* African options */
.africa { background: var(--highlight); border-radius: 10px; padding: 18px 20px; margin-bottom: 22px; }
.optionGroup { font: 900 15px "Lato", serif; color: var(--navy); text-transform: uppercase; letter-spacing: 0.5px;
               margin: 18px 0 8px; }
.optionGroup:first-of-type { margin-top: 4px; }
.africaCard a.disabled { background: #c9c9c9; border-bottom-color: #9a9a9a; cursor: default; pointer-events: none; }
/* GlobalIPCo Options: all cards in one row; group headings span their cards */
.optionsGrid { display: grid; grid-template-columns: repeat(var(--cards, 5), minmax(0, 1fr)); column-gap: 12px; }
.optionsGrid .optionGroup { margin: 4px 0 8px; }
.africaCards { display: contents; }
.africaCard { min-width: 0; background: #fff; border-radius: 9px; border-top: 4px solid var(--navy); padding: 14px 16px;
              box-shadow: 0 1px 6px rgba(10, 45, 97, 0.08); display: flex; flex-direction: column; gap: 6px; }
.africaCard.sani { border-top-color: var(--amber); }
.aName { font: 900 18px "Lato", serif; color: var(--navy); }
.aRank strong { font-size: 22px; color: var(--navy); }
.aCosts { display: flex; flex-direction: column; font-size: 14px; color: var(--muted); }
.aCosts strong { color: var(--ink); }
/* the three buttons are the same size: full card width, fixed height, aligned at the bottom of each card */
.africaCard a { margin-top: auto; align-self: stretch; width: 100%; height: 52px; display: flex; align-items: center; justify-content: center;
                box-sizing: border-box; text-align: center; line-height: 1.25; }
.aCosts { margin-bottom: 10px; }

/* ranking table */
.tableWrap { overflow-x: auto; }
table.ranking { width: 100%; border-collapse: collapse; font-size: 15px; }
table.ranking th { text-align: left; color: #fff; background: var(--navy); padding: 9px 10px; font-weight: 400; }
table.ranking th .thSub { display: block; font-size: 11px; opacity: .8; }   /* "incl. one office action response" */
table.ranking td { padding: 7px 10px; border-bottom: 1px solid #eef2f7; }
table.ranking .num { text-align: right; white-space: nowrap; }
table.ranking tr.highlight td { background: var(--highlight); font-weight: 700; }
/* GlobalIPCo products (German utility model, Luxembourg patent): same idea, less prominent */
table.ranking tr.highlight2 td { background: #fdf9f1; }
tr.highlight2 .bar span { background: #f5c46e; }
table.ranking tr.gap td { text-align: center; color: var(--muted); padding: 2px; }
td.rank { width: 50px; color: var(--muted); }
table.ranking .choose { width: 28px; padding-right: 0; text-align: center; }   /* section 3 ticks (2026-10-13) */
.chooseBox { width: 17px; height: 17px; accent-color: var(--navy); cursor: pointer; }
.chartEmpty { padding: 30px 10px; text-align: center; }
td.score { width: 170px; }
.bar { display: inline-block; width: 100px; height: 8px; background: #eef2f7; border-radius: 4px; margin-right: 8px; vertical-align: middle; }
.bar span { display: block; height: 100%; background: var(--button); border-radius: 4px; }
tr.highlight .bar span { background: var(--amber); }
/* national phase deadline already passed: maroon text (brief) */
table.ranking tr.passed td, table.ranking tr.passed .caution, .africaCard.passed, .africaCard.passed .aName,
.africaCard.passed strong { color: #800000; }
.caution { display: block; font-size: 12px; font-weight: 400; color: var(--orange); }

/* cost to grant by stage: expand button + detail row */
.expandBtn { border: 1px solid var(--border); background: #fff; color: var(--button); border-radius: 4px;
             width: 22px; height: 22px; line-height: 18px; padding: 0; margin-right: 8px; cursor: pointer; font-size: 12px; }
/* button + amount as one fixed-width block at the right of the column (next to the renewal amounts):
   buttons line up, and every amount starts at the same point */
table.ranking td.grant { font-variant-numeric: tabular-nums; }
table.ranking .renew { text-align: center; font-variant-numeric: tabular-nums; }   /* user: renewal + deadline columns centred */
td.grant .amount { display: inline-block; min-width: 8ch; text-align: left; }
.expandSlot { display: inline-block; width: 22px; margin-right: 8px; vertical-align: middle; }
.expandSlot .expandBtn { margin-right: 0; }
.expandBtn:hover { border-color: var(--button); background: #eef4fa; }
table.ranking tr.breakdownRow td { background: #f6f9fc; padding: 10px 14px 12px; border-bottom: 1px solid #e3eaf2; font-weight: 400; }
table.ranking tr.breakdownRow.highlight td { background: #fdf6e8; }
table.ranking tr.breakdownRow.highlight2 td { background: #fefbf5; }
.stages { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: flex-end; }
.stage { display: flex; flex-direction: column; align-items: flex-end; min-width: 110px; }
.stageLabel { font-size: 12px; color: var(--muted); }
.stage strong { font-size: 15px; color: var(--ink); }
.stageNote { font-size: 12px; color: var(--muted); text-align: right; margin-top: 6px; }

/* charts */
.chartsHeading { margin-top: 30px !important; }
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.charts figure { margin: 0; }
.charts figure.wide { grid-column: 1 / -1; }
.charts figcaption { font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.chartBox { position: relative; height: 340px; }
.chartBox.tall { height: 480px; }
.chartBox.bars { height: 600px; }   /* 20 countries + highlighted ones below them */

.downloadRow { text-align: center; margin: 32px 0 10px; }
/* Applicant | Law firm actions under the value map (user, 2026-10-10): a table; each row its own band */
.actionsTable { scroll-margin-top: 110px; width: 100%; margin: 34px 0 10px; border-collapse: separate; border-spacing: 0;
                border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.actionsRow > th, .actionsRow > td { padding: 20px 16px; border-top: 3px solid var(--navy); vertical-align: middle; }
.actionsRow > th { width: 26%; text-align: left; color: var(--navy); font-size: 17px; }
.actionsRow > td.actionsSpacer { width: 26%; }          /* mirrors the label column, so the buttons sit centred */
.actionsRow > td { text-align: center; }
.actionsTable tbody tr.actionsRow:nth-of-type(1) > * { background: #f3f7fb; }     /* row 1 */
.actionsTable tbody tr.actionsRow:nth-of-type(3) > * { background: #fdf6e8; }     /* row 2 (row 2 is the panel band) */
.actionsRow > td .actionButton + .actionButton { margin-top: 10px; }
.actionsTable tbody tr.actionsRow:first-child > * { border-top: none; }       /* no header row any more */
a.actionButton { display: flex; align-items: center; justify-content: center; }   /* links look like the buttons */
.firmPanelRow > td { padding: 0 16px; background: #f3f7fb; }
.firmPanelRow .firmPanel { margin: 0 0 18px; }
.actionButton { display: block; margin: 0 auto; width: 100%; max-width: 280px; min-height: 52px; box-sizing: border-box;
                padding-left: 12px; padding-right: 12px; text-align: center; }   /* every action button the same size */
.downloadRow + .downloadRow { margin-top: 12px; }
/* law firm download panel */
.firmPanel { margin: 18px 0 10px; padding: 20px 22px; border: 1px solid var(--border); border-radius: 6px; background: #f8fafc; }
.firmPanel h3 { margin: 0 0 6px; color: var(--navy); }
.firmPanel input[type="email"], .firmPanel input.wide { width: 100%; max-width: 420px; height: 44px; box-sizing: border-box;
                                                        font-size: 16px; padding: 0 10px; }
.firmPanel input[type="number"] { width: 140px; height: 40px; box-sizing: border-box; font-size: 16px; padding: 0 10px; }
.firmPanel table.weights { background: #fff; }
.firmPanel table.weights .wNumber input { width: 58px; height: auto; font-size: inherit; padding: 1px 2px; }   /* as section 2 */
.firmPanel .downloadRow { margin: 20px 0 0; }
.firmLogoPreview { max-height: 48px; max-width: 200px; border: 1px solid var(--border); background: #fff; padding: 4px; }
.firmWeights th { text-align: left; font-weight: 400; padding: 3px 14px 3px 0; }
.firmWeights td { padding: 3px 0; }
.firmWeights input[type="number"] { width: 80px; margin-right: 4px; }
.firmSection { display: block; margin: 4px 0; cursor: pointer; }
/* Add Law Firm page (redesigned 2026-10-10) */
.lawFirm .card { padding: 26px 30px; }
.lfBack { margin: 0 0 8px; font-size: 15px; }
.lfPrivacy { display: flex; gap: 14px; align-items: flex-start; margin: 4px 0 18px; padding: 14px 18px;
             background: #eef4fa; border-left: 5px solid var(--navy); border-radius: 6px; }
.lfPrivacy p { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.45; }
.lfNoteHead { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--navy); }
/* notes carousel: three wide, scrolls by one note (prompt, 2026-10-13) */
.lfCarousel { position: relative; margin: 4px 0 18px; }
.lfNotes { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 3); gap: 18px;
           overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.lfNotes::-webkit-scrollbar { display: none; }
.lfNotes > .lfPrivacy { scroll-snap-align: start; }
.lfCarouselBtn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px;
                 border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--navy);
                 font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(2, 47, 82, 0.18); }
.lfCarouselBtn.prev { left: -14px; }
.lfCarouselBtn.next { right: -14px; }
.lfCarouselBtn[hidden] { display: none; }
.lfAbout { background: #f1f1fa; border-left-color: #5b5fa8; }
.lfAbout ul { margin: 4px 0 8px; padding-left: 20px; }
.lfAbout li { margin: 2px 0; }
/* Select agents */
.lfInviteBtn { width: auto; }
.lfInviteBox { margin: 0 0 12px; padding: 14px 16px; background: #f8fbfe; border: 1px solid var(--border); border-radius: 8px; }
.lfInviteBox input { height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px;
                     width: 260px; font-size: 16px; }
.lfAgents { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px 18px; margin-top: 10px; }
.lfAgentCountry { padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.lfAgentCountry h3 { margin: 0 0 6px; font-size: 16px; color: var(--navy); }
.lfAgentCountry.empty { background: #fafbfc; }
.lfAgentCountry.empty h3 { color: var(--muted); font-weight: 400; }
.lfAgentRow { display: flex; align-items: center; gap: 12px; padding: 5px 0; border-top: 1px solid #eef2f7; flex-wrap: wrap; }
.lfAgentName { flex: 1 1 140px; font-weight: 700; }
.lfAgentTick { font-size: 14px; cursor: pointer; white-space: nowrap; }
.lfAgentTick input { accent-color: var(--navy); }
.lfNotes .lfPrivacy { margin: 0; }
.lfNoFee { background: #fdf6e8; border-left-color: var(--amber); }
.lfNoObligation { background: #eef7f1; border-left-color: #2e7d4f; }
.lfPrivacyIcon { font-size: 20px; line-height: 1.2; }
.lfEdit { margin: 0 0 18px; padding: 16px 18px; background: #fdf6e8; border-radius: 6px; }
.lfEdit label, .lfCountryRow label, .lfField > label, .lfCurrencyRow label {
  display: block; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.lfCountryRow { margin-top: 6px; }
.lfSelect { height: 46px; font-size: 16px; padding: 0 12px; min-width: 280px; border: 1px solid var(--border);
            border-radius: 6px; background: #fff; }
.lfSelectSmall { min-width: 120px; }
.lfStep h2 { display: flex; align-items: center; gap: 12px; }
.lfNum { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
         border-radius: 50%; background: var(--navy); color: #fff; font-size: 17px; flex: none; }
.lfGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; }
.lfField { margin-bottom: 4px; }
#lfDetails .lfGrid { max-width: 780px; }          /* sections 1 and 4 need not span the page (user, 2026-10-10) */
.lfWide { grid-column: 1 / -1; }
.lfCol { display: grid; gap: 18px; align-content: start; }
#lawFirm input.wide, #lawFirm input[type="email"], #lawFirm input[type="url"] {
  width: 100%; max-width: 360px; height: 44px; box-sizing: border-box; font-size: 16px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 6px; }
.lfLogoBox { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lfLogoImg { max-height: 56px; max-width: 200px; padding: 6px; border: 1px solid var(--border); border-radius: 6px;
             background: #fff; }
.lfCurrencyRow { margin: 4px 0 6px; }
.lfSection { margin: 26px 0 8px; padding-bottom: 6px; color: var(--navy); font-size: 17px;
             border-bottom: 2px solid #eef2f7; }
table.lfTable { width: 100%; border-collapse: collapse; font-size: 14px; }
table.lfTable th, table.lfTable td { padding: 10px 10px; text-align: left; vertical-align: middle; }
table.lfTable thead th { background: var(--navy); color: #fff; font-weight: 400; font-size: 13px; }
table.lfTable tbody tr:nth-child(even) { background: #f8fafc; }
table.lfTable tbody tr { border-bottom: 1px solid #eef2f7; }
table.lfTable tbody th { width: 22%; color: var(--navy); font-weight: 700; }
.lfWhat { width: 32%; color: var(--ink); line-height: 1.4; }
.lfOfficial { width: 18%; color: var(--muted); line-height: 1.4; }
.lfFeeWrap { display: inline-flex; align-items: center; gap: 6px; }
.lfFee { width: 120px; height: 38px; font-size: 15px; padding: 0 10px; box-sizing: border-box; background: #fff8e1;
         border: 1px solid #e8d9a8; border-radius: 6px; text-align: right; }
.lfCur { color: var(--muted); font-size: 13px; }
.lfNote { width: 100%; min-width: 120px; height: 38px; font-size: 14px; padding: 0 10px; box-sizing: border-box;
          border: 1px solid var(--border); border-radius: 6px; }
.lfTotals { margin: 22px 0 8px; display: grid; gap: 8px; }
.lfTotals .lfTotalBar { margin: 0; }
.lfTotalBar { display: flex; justify-content: space-between; align-items: center; margin: 22px 0 8px;
              padding: 14px 18px; background: var(--navy); color: #fff; border-radius: 6px; font-size: 16px; }
.lfTotalBar strong { font-size: 20px; }
.lfText { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 10px 12px;
          border: 1px solid var(--border); border-radius: 6px; }
.lfSkills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.lfSkillBox { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--border);
              border-radius: 6px; background: #fff; cursor: pointer; font-size: 14px; line-height: 1.3; }
.lfSkillBox:has(input:checked) { background: #eef4fa; border-color: var(--navy); }
.lfField > .lfSkillAll { display: inline-flex; margin-top: 6px; font-weight: 700; color: var(--navy); }
.lfSkillBox input { margin-top: 2px; accent-color: var(--navy); }
.lfCountryRow select, .lfCurrencyRow select { display: block; margin-top: 6px; font-weight: 400; }
.lfSheetHead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lfSheetBody { margin-top: 14px; }
.lfAddRow { margin: -6px 0 22px; padding: 0 30px; }
.lfAddCountry[hidden], .lawFirm [hidden] { display: none !important; }
.lfAddCountry { display: inline-flex; align-items: center; gap: 10px; width: auto; }
.lfPlus { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
          border: 2px solid currentColor; border-radius: 4px; font-size: 18px; font-weight: 700; line-height: 1; }
.lfSaveCard { border-top: 4px solid var(--amber); }
.lfSaveRow label { margin: 0; font-weight: 700; color: var(--navy); }
.lfSaveRow input { flex: 0 1 360px; }
.lfSave { height: 44px; box-sizing: border-box; padding: 0 32px; font-size: 17px; }
.firmRemoveBox { margin: 8px 0 0 26px; }
.firmRemoveBox input[type="text"] { width: 100%; max-width: 320px; height: 44px; box-sizing: border-box; font-size: 16px; padding: 0 10px; }
.firmRemovedLabel { margin: 10px 0 0; }
.removedChip { display: inline-flex; align-items: center; gap: 4px; margin: 0 6px 6px 0; }
.chipX { border: none; background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.chipX:hover { color: #b00020; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.disclaimer { font-size: 13px; color: var(--muted); text-align: center; max-width: 760px; margin: 0 auto; }

/* FAQs - same pattern as Licence Direct (details/summary accordion) */
.faq-section { margin-top: 40px; padding-top: 24px; border-top: 2px solid #eef2f7; }
.faq-section h2 { margin-bottom: 16px; }
.assumptions h3 { font-size: 16px; color: var(--navy); margin: 6px 0 6px; }
.assumptions ul { margin: 0; padding-left: 20px; }
.assumptions li { margin-bottom: 6px; line-height: 1.45; }
.faq-item { margin-bottom: 10px; border: 1px solid var(--border); border-radius: 6px; padding: 0 16px; background: #fff; }
.faq-item[open] { padding-bottom: 14px; }
.faq-question { font-weight: 700; color: var(--navy); font-size: 17px; padding: 14px 28px 14px 0; cursor: pointer;
                list-style: none; position: relative; }
.faq-question:hover { color: var(--orange); }
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after { content: "+"; position: absolute; right: 0; top: 13px; color: var(--navy); font-weight: 700; font-size: 20px; line-height: 1; }
.faq-item[open] .faq-question::after { content: "\2212"; }
.faq-answer { margin: 0; color: var(--ink); }

@media (max-width: 1000px) { .lfNotes { grid-auto-columns: calc((100% - 18px) / 2); } }   /* 2 notes */
@media (max-width: 640px) { .lfNotes { grid-auto-columns: 88%; } .lfCarouselBtn.prev { left: -8px; } .lfCarouselBtn.next { right: -8px; } }
@media (max-width: 760px) {
  .lfSkills { grid-template-columns: 1fr; }
  .lfGrid { grid-template-columns: 1fr; }
  .lawFirm .card { padding: 20px 16px; }
  .lfAddRow { padding: 0 16px; }
  table.lfTable thead { display: none; }
  table.lfTable, table.lfTable tbody, table.lfTable tr, table.lfTable th, table.lfTable td { display: block; width: auto; }
  table.lfTable tbody tr { padding: 10px 0; }
  table.lfTable td, table.lfTable tbody th { padding: 4px 6px; }
  table.lfTable tbody th, .lfWhat, .lfOfficial { width: auto; }
  table.lfTable td[data-label]::before { content: attr(data-label); display: block; margin: 4px 0 3px;
                                         font-size: 12px; font-weight: 700; color: var(--muted); }
  .lfSelect { min-width: 0; width: 100%; }
  .lfSelectSmall { width: auto; }
  /* phone: the actions table as stacked bands - row heading, then each column's buttons under its name */
  .actionsTable, .actionsTable tbody, .actionsRow, .actionsRow > th, .actionsRow > td, .firmPanelRow, .firmPanelRow > td {
    display: block; width: auto; }
  .actionsRow > th { padding-bottom: 4px; }
  .actionsRow > td { border-top: none; padding-top: 8px; }
  .actionsRow > td.actionsSpacer { display: none; }
  .actionsRow > td.actionsNoteCell { display: block; padding: 0 16px 14px; text-align: center; }
  .actionsNote { max-width: none; }
  /* phone: claims and pages one per row, labels in one column and the boxes lined up beside them (user) */
  .claimsRow .inputRow { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .claimInput { display: grid; grid-template-columns: 9.5em 90px; align-items: center; gap: 10px; }
  .claimInput input { width: 90px; }
  .card { padding: 20px 16px; }
  .charts { grid-template-columns: 1fr; }
  #pctNumber, #ipcInput { width: 100%; }
  table.weights th { width: auto; }
  .wSlider { display: none; }
  td.score { width: auto; }
  .bar { display: none; }
  .optionsGrid { grid-template-columns: 1fr; row-gap: 10px; }
  .optionsGrid .optionGroup { grid-column: auto !important; }
}

/* Admin section (2026-10-10) */
.adminHead { display: flex; justify-content: space-between; align-items: center; }
.adminHead form { margin: 0; }
.adminLogin label { font-weight: 700; color: var(--navy); }
.adminLogin input { height: 44px; box-sizing: border-box; width: 280px; padding: 0 12px; font-size: 16px;
                    border: 1px solid var(--border); border-radius: 6px; }
.adminSearch { width: 100%; max-width: 380px; height: 44px; box-sizing: border-box; padding: 0 12px; font-size: 16px;
               border: 1px solid var(--border); border-radius: 6px; margin: 4px 0 4px; }
table.adminTable { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 10px; }
table.adminTable th { background: var(--navy); color: #fff; font-weight: 400; text-align: left; padding: 10px 12px; }
table.adminTable td { padding: 10px 12px; border-bottom: 1px solid #eef2f7; vertical-align: top; }
tr.adminRow { cursor: pointer; }
tr.adminRow:hover, tr.adminRow.open, tr.adminRow:focus { background: #eef4fa; outline: none; }
.adminLink { color: var(--navy); font-weight: 700; text-decoration: underline; }
tr.adminDetail td { background: #f8fafc; }
.adminPrefs { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 4px 0; }
.adminPrefs dt { font-weight: 700; color: var(--navy); }
.adminPrefs dd { margin: 0; }
.adminLogo { max-height: 48px; max-width: 180px; }
.adminBanner { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 16px 0 0;
               padding: 12px 18px; background: #fdecea; border-left: 5px solid #b3261e; border-radius: 6px;
               font-weight: 700; color: #7a1c16; }
.adminBanner a { color: #7a1c16; }
.lawFirm [hidden], .admin [hidden] { display: none !important; }

/* required steps (filing, examination, publication, grant) - highlighted (user, 2026-10-10) */
.lfFee { background: #fff; }
table.lfTable tbody tr.lfReq { background: #fff6dc; box-shadow: inset 4px 0 0 var(--amber); }
tr.lfReq .lfFee { background: #fff1c2; border-color: #e3b34a; border-width: 1.5px; }
.lfStage { display: block; width: max-content; margin-top: 4px; padding: 1px 8px; border-radius: 10px;
           background: var(--amber); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.lfReqNote { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 4px; font-size: 14px; color: var(--ink); }
.lfReqSwatch { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 3px; background: #fff1c2;
               border: 1.5px solid #e3b34a; box-shadow: inset 3px 0 0 var(--amber); }
tr.lfReq .lfFee.lfMissing { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.18); }

/* expected number of office actions: a one-digit stepper, not a fee box (user, 2026-10-10) */
.lfStepper { gap: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: #fff; }
.lfFee.lfCount { width: 40px; height: 36px; box-sizing: border-box; border: none; text-align: center; font-size: 16px;
           font-weight: 700; color: var(--navy); background: #fff; -moz-appearance: textfield; padding: 0; border-radius: 0; }
.lfCount::-webkit-inner-spin-button, .lfCount::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.lfStepBtn { width: 34px; height: 36px; border: none; background: #eef4fa; color: var(--navy); font-size: 18px;
          font-weight: 700; cursor: pointer; line-height: 1; padding: 0; }
.lfStepBtn:hover { background: #dbe7f3; }
.lfStepBtn:focus-visible { outline: 2px solid var(--button); outline-offset: -2px; }
#lfDetails .lfMissing { border-color: #b3261e !important; box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.18); }
.lfReqLine { margin: -6px 0 14px; }

/* tariff of fees drop zone (2026-10-10) */
.lfTariff { display: flex; align-items: center; gap: 14px; margin: 6px 0 4px; padding: 14px 18px; cursor: pointer;
            border: 2px dashed #a9c0d6; border-radius: 8px; background: #f8fbfe; max-width: 760px; }
.lfTariff:hover, .lfTariff:focus, .lfTariff.over { border-color: var(--navy); background: #eef4fa; outline: none; }
.lfTariff.busy { opacity: 0.6; cursor: wait; }
.lfTariff strong { color: var(--navy); }
.lfTariff .note { margin: 0; }
.lfTariffIcon { font-size: 26px; }
.lfTariffStatus { max-width: 760px; }
.lfFee.lfFromTariff, tr.lfReq .lfFee.lfFromTariff { background: #e3f0fb; border-color: #4a86c5; }
.lfAddOthers { margin: 8px 0 0; padding: 0 20px; height: 40px; font-size: 15px; }
.adminFirms td { white-space: nowrap; }
.adminFirms td:nth-child(-n+4) { white-space: normal; }
.adminRank { width: 58px; height: 34px; box-sizing: border-box; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; }
.adminCheck { text-align: center; }
.adminCheck input { width: 18px; height: 18px; accent-color: var(--navy); }

/* Select Law Firm (prompt, 2026-10-13) */
.selectLogin { margin: 6px 0 14px; padding: 12px 16px; background: #f8fbfe; border: 1px solid var(--border); border-radius: 8px; }
.selectLogin label { display: block; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.selectLogin input { height: 44px; box-sizing: border-box; width: 300px; padding: 0 12px; border: 1px solid var(--border);
                     border-radius: 6px; font-size: 16px; }
.selectTable td:first-child { width: 36px; text-align: center; }
.selectTable input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--navy); }
.selectTable tr.disabled td { color: #a7b4c2; }
.selectCountry { margin: 22px 0 0; padding: 16px 18px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.selectCountry h4 { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: var(--amber); }   /* the button's gold (user, 2026-10-14) */
.selectFacts { margin: 0 0 12px; color: var(--ink); }
.selectFirms { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.selectFirm { padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; background: #fbfdff;
              display: flex; flex-direction: column; }   /* the quote buttons line up along the row (2026-10-14) */
.selectFirm.preferred { border: 2px solid var(--amber); background: #fff8e8; }
.selectFirmHead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.selectLogo { max-height: 44px; max-width: min(300px, 100%); }   /* wide word-mark logos stay legible (2026-10-14) */
.selectFirmName { margin: 0; font-size: 19px; color: var(--navy); }
.selectPreferred { padding: 2px 10px; border-radius: 10px; background: var(--amber); color: #fff; font-size: 12px; font-weight: 700; }
/* each heading with its text underneath, using the card's full width (user, 2026-10-13) */
.selectFacts2 { margin: 0 0 12px; font-size: 14px; }
.selectFacts2 dt { font-weight: 700; color: var(--navy); margin-top: 10px; }
.selectFacts2 dt:first-child { margin-top: 0; }
.selectFacts2 dd { margin: 2px 0 0; white-space: pre-line; }
.selectFacts2 dd.selectFeeNote { margin-top: 4px; color: var(--muted); font-size: 13px; }
.selectHelp { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--navy); background: #fff; color: var(--navy);
              font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; line-height: 1; }
.selectYes { color: #1e7b34; font-weight: 800; font-size: 18px; line-height: 1; margin-right: 4px; }   /* Verified: a green tick (2026-10-14) */
.selectHelpText { display: block; margin-top: 4px; color: var(--muted); }
.selectQuoteBtn { font-size: 15px; padding: 7px 18px 8px; display: block; margin: auto auto 0; }   /* centred, at the bottom */   /* centred in the card (2026-10-13) */
.selectQuote { display: grid; gap: 8px; margin-top: 8px; }
.selectQuoteField span { display: block; font-size: 13px; font-weight: 700; color: var(--navy); }
.selectQuoteField input { width: 100%; max-width: 320px; height: 40px; box-sizing: border-box; padding: 0 10px;
                          border: 1px solid var(--border); border-radius: 6px; font-size: 15px; }
.selectQuoteStatus { border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; }
.selectQuoteStatus label { display: block; margin: 2px 0; }
.selectStatusDefs { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.selectStatusDefs li { margin: 3px 0; }
.selectStatusDefs strong { color: var(--navy); }
.selectQuote .snzButton { width: auto; justify-self: start; margin-top: 0; }
.selectPanel [hidden], .lfAgentsCard [hidden], #lfAgentsCard[hidden] { display: none !important; }
.adminDel { white-space: nowrap; }
.adminDel .adminDelete, .adminDeleteYes { color: #b3261e; }
.admin .adminConfirm[hidden], .admin .adminDelete[hidden] { display: none !important; }
.selectPasscode { display: grid; gap: 8px; }
.selectPanel .selectPasscode[hidden] { display: none !important; }
.selectPasscode .snzButton { width: auto; justify-self: start; margin-top: 0; }
/* new pages are not highlighted (user, 2026-10-14) - only the fixed firms are; new pages come first, with Approve */
.adminApprove { width: auto; height: 34px; padding: 0 16px; margin-top: 0; font-size: 14px; }
.adminSend { width: auto; height: 32px; padding: 0 14px; margin-top: 0; font-size: 14px; }
.adminMail { white-space: pre-wrap; font: inherit; font-size: 14px; margin: 4px 0; }
.adminSub { margin: 18px 0 6px; font-size: 16px; color: var(--navy); }
.adminDecided, .adminBlacklist { margin: 6px 0; padding-left: 18px; font-size: 14px; }
.adminBlacklist li { margin: 3px 0; }
/* small red outlined button: Delete in Download preferences (user, 2026-10-31) */
.adminSmallBtn { border: 1px solid #b3261e; color: #b3261e; background: #fff; border-radius: 6px; padding: 3px 12px;
                 font: inherit; font-size: 13px; cursor: pointer; }
.adminSmallBtn:hover, .adminSmallBtn:focus-visible { background: #b3261e; color: #fff; }

/* "+ Show All" on Add Law Firm (2026-10-13) */
.lfShowAllRow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; }   /* in sheet 1, above Country */
.lfShowAll { display: inline-flex; align-items: center; gap: 10px; width: auto; margin-top: 0; }
.lawFirm .lfShowAllRow[hidden] { display: none !important; }
.lfCollapsed .lfOptional, .lfCollapsed #lfProfileCard, .lfCollapsed #lfAgentsCard { display: none !important; }
.lfFee[type="text"] { text-align: right; }

/* main page notes (2026-10-13) */
.actionsRow > td.actionsNoteCell { vertical-align: bottom; padding: 0 16px 30px 0; text-align: left; }
.actionsRow > td.actionsNoteCell.middle { vertical-align: middle; padding-bottom: 0; }   /* beside Add Law Firm */
.actionsNote { display: block; font-size: 14px; color: var(--muted); line-height: 1.35; max-width: 220px; }
.helpQ { width: 20px; height: 20px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--navy); background: #fff;
         color: var(--navy); font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; line-height: 1; vertical-align: 1px; }
.entityHelp { margin: 0 0 8px; max-width: 520px; }

/* one email, several firms (2026-10-14) */
.lfChooseFirm { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lfChooseBtn { width: auto; margin-top: 0; }
.wordCount { margin: 4px 0 0; }
.wordCount.error { color: #b42318; font-weight: 700; }
.selectQuoteNote { width: 100%; max-width: 420px; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 15px; }
/* admin: the fixed firms (2026-10-14) */
.adminFixed td { background: #fff4dc; }
.adminFixedTag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 9px; background: var(--amber); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }

/* ARIPO ticked in section 3: the member states to designate (2026-10-16) */
table.ranking tr.aripoRow td { background: #fdf9f1; padding: 12px 14px 14px; font-weight: 400; }
.aripoIntro { margin: 0 0 10px; color: var(--ink); font-size: 14px; }
.aripoStates { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; }
.aripoState { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); cursor: pointer; }
.aripoState input { width: 16px; height: 16px; accent-color: var(--navy); }
.aripoNote:empty { display: none; }
.aripoAssume { font-size: 13px; color: var(--muted); white-space: nowrap; }
.expandBtn.aripoBtn { margin: 0 0 0 8px; vertical-align: middle; }

/* a law firm's own page (2026-10-20, as the trademark app) */
.firmPage .fpHead { display: flex; gap: 24px; align-items: center; }
.firmPage .fpLogo { max-width: 180px; max-height: 90px; object-fit: contain; }
.firmPage .fpName { margin: 0 0 6px; }
.firmPage .fpFacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 6px 0 16px; }
.firmPage .fpFact { background: #f6f9fc; border-top: 3px solid var(--navy); padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.firmPage .fpFact span { font-size: 13px; color: var(--muted); }
.firmPage .fpFact strong { font-size: 20px; color: var(--navy); }
.firmPage .fpPrice { background: #fdf0d9; border-left: 4px solid #f09e1b; padding: 10px 16px; margin: 0 0 16px; }
.firmPage .fpPrice h3 { margin: 0 0 4px; }
.firmPage .fpPrice p { margin: 2px 0; }
.firmPage .fpGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.firmPage .fpList { padding-left: 18px; margin: 6px 0 14px; }
.firmPage .fpList li { margin: 4px 0; }
.firmPage .fpCta { text-align: center; }
.firmPage .fpPreview { background: #fff3cd; border: 1px solid #f0c36d; color: #6b4e00; padding: 10px 16px; border-radius: 6px; font-weight: 700; }
@media (max-width: 760px) { .firmPage .fpGrid { grid-template-columns: 1fr; } .firmPage .fpHead { flex-direction: column; align-items: flex-start; } }
.lfShare { border: 2px solid #f09e1b; background: #fff8ec; }
.lfShare .inputRow input { flex: 1 1 360px; }
.lfShareRow { margin: 8px 0; }
.lfShareLabel { min-width: 150px; font-weight: 700; color: var(--navy); }
.lfShare .lfShareWait { opacity: 0.55; }
.lfShare .lfShareOpen { text-decoration: none; display: inline-block; padding: 10px 22px; border-radius: 22px; }
.firmPage .fpOwner { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #fff8ec; border: 2px solid #f09e1b; border-radius: 6px; padding: 10px 16px; margin: 0 0 16px; }
.firmPage .fpOwner input { flex: 1 1 320px; height: 40px; padding: 0 10px; }
.firmPage .fpOwner span:first-child { font-weight: 700; color: var(--navy); }

/* the law firm page, printed (user, 2026-10-20: "format it better for printing"): no site menu, banner, buttons or
   footer; A4; each country on its own page; charts and boxes never split across pages */
@media print {
  @page { size: A4; margin: 12mm 12mm 14mm; }
  body:has(.firmPage) { background: #fff !important; }
  body:has(.firmPage) #navbar-container, body:has(.firmPage) #floatButtons, body:has(.firmPage) #heroBanner,
  /* no S&Z branding either (user, 2026-10-20): the site's menu and footer, the closing invitation to S&Z's tool and
     the preview note naming S&Z - the printout is the firm's */
  body:has(.firmPage) #siteFooter, .firmPage .fpOwner, .firmPage .fpCta, .firmPage .fpPreview { display: none !important; }
  html:has(.firmPage), body:has(.firmPage) #body, body:has(.firmPage) #pageWrapper { background: #fff !important; }
  body:has(.firmPage) #pageWrapper { padding-top: 0 !important; }
  .firmPage { max-width: none; margin: 0; }
  .firmPage .card { box-shadow: none !important; border: none !important; margin: 0 0 6mm !important; padding: 0 !important;
                    background: #fff !important; }
  .firmPage .fpHead { border-bottom: 3px solid #022f52 !important; padding-bottom: 4mm !important; }
  .firmPage .fpLogo { max-height: 18mm; }
  .firmPage .fpName { font-size: 20pt; }
  .firmPage .fpHead { margin-bottom: 3mm !important; padding-bottom: 2mm !important; }
  .firmPage h2 { font-size: 18pt; }
  .firmPage h3 { font-size: 11.5pt; margin: 3mm 0 1mm; }
  .firmPage .intro, .firmPage p, .firmPage li { font-size: 8.5pt; margin: 0.4mm 0; line-height: 1.3; }
  .firmPage .fpList { margin: 1mm 0 2mm; }
  .firmPage .fpCountry + .fpCountry { break-before: page; }      /* the first country follows the firm's heading */
  .firmPage .fpFacts { grid-template-columns: repeat(4, 1fr); gap: 3mm; margin: 2mm 0 3mm; }
  .firmPage .fpPrice { padding: 2mm 4mm; margin: 0 0 2mm; }
  .firmPage .fpFact { padding: 1.5mm 3mm; break-inside: avoid; }
  .firmPage .fpFact span { font-size: 7.5pt; }
  .firmPage .fpFact strong { font-size: 12pt; }
  .firmPage .fpPrice, .firmPage figure, .firmPage .fpList, .firmPage .fpFacts { break-inside: avoid; }
  .firmPage .fpGrid { grid-template-columns: 1fr 1fr; gap: 5mm; break-inside: avoid; margin-top: 2mm; }
  .firmPage figure { margin: 0; }
  .firmPage figcaption { font-size: 9pt; }
  .firmPage .chartBox, .firmPage .chartBox.bars { height: 36mm !important; position: relative; overflow: hidden; }
  .firmPage .chartBox canvas { width: 100% !important; height: 100% !important; }   /* the drawing fits the box */
  .firmPage .fpCta { break-before: avoid; text-align: left; }
  .firmPage a { color: inherit; text-decoration: none; }
}
.adminDel .adminApprove { margin-right: 10px; }
.admin th.adminSortable { cursor: pointer; white-space: nowrap; }
.admin th.adminSortable::after { content: " \2195"; opacity: 0.6; }
.admin th.adminSortable[aria-sort="ascending"]::after { content: " \2191"; opacity: 1; }
.admin th.adminSortable[aria-sort="descending"]::after { content: " \2193"; opacity: 1; }
/* the combined admin page: trademark rows in blue (user, 2026-10-20) */
.admin tr.adminTM td, .admin tr.adminTM .adminLink, .admin tr.adminTM a, .admin li.adminTM { color: #1f5fbf; }
.admin .adminTmNote { flex-basis: 100%; margin: 4px 0 0; }
.admin .adminHead { flex-wrap: wrap; }

/* CLEAR - top of the page (2026-10-21) */
.clearBar { display: flex; justify-content: flex-start; margin: 0 0 10px; }
.clearButton { font: inherit; font-weight: 700; letter-spacing: 0.05em; padding: 6px 18px; border-radius: 6px; cursor: pointer;
               background: #fff; color: #022f52; border: 2px solid #022f52; }
.clearButton:hover, .clearButton:focus-visible { background: #022f52; color: #fff; }
@media print { .clearBar { display: none; } }
/* Verified: a seal with a tick at the top right of the firm's box (half the first size - user, 2026-10-21); rated 10:
   a slightly more yellow box (2026-10-21) */
.selectFirm { position: relative; }
.selectFirm.verified .selectFirmHead { padding-right: 60px; }
.selectSeal { position: absolute; top: -8px; right: 10px; display: flex; flex-direction: column; align-items: center;
              justify-content: center; width: 48px; height: 48px; border-radius: 50%; box-sizing: border-box;
              background: radial-gradient(circle at 35% 30%, #3fa45a, #1e7b34 70%); color: #fff;
              border: 2px dashed rgba(255, 255, 255, 0.85); outline: 2px solid #1e7b34;
              box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); transform: rotate(-8deg); text-align: center; }
.selectSealTick { font-size: 15px; font-weight: 900; line-height: 1; }
.selectSealWord { font-size: 7px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; margin: 1px 0; }
.selectSeal .selectHelp { width: 11px; height: 11px; font-size: 7px; border-color: #fff; }
.selectSealHelp { margin: 0 0 8px; padding-right: 56px; font-size: 13px; }
.selectFirm.topRated { background: #fffbea; border-color: #f0dca0; }   /* a slight yellow hue (user, 2026-10-21) */
.selectFirm.topRated.preferred { background: #fff8e8; }

/* the office's currency in front of every official fee (2026-10-21) */
.lfOffCur { font-weight: 700; color: var(--navy); }
.selectQuoteLimit { margin: 0; padding: 8px 10px; border-left: 4px solid var(--amber); background: #fff8e8;
                    font-size: 14px; color: var(--ink); }   /* one quote request per country (2026-10-21) */
/* 4. Country highlights: flags with the country name, by GDP (2026-10-21) */
.hlGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 14px 10px; margin-top: 12px; }
.hlCountry { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 4px; border-radius: 6px;
             text-decoration: none; color: var(--navy); text-align: center; }
.hlCountry img { width: 48px; height: 36px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); }
.hlCountry span { font-size: 13px; line-height: 1.25; font-weight: 600; }
.hlCountry:hover, .hlCountry:focus-visible { background: #eef4fb; }
.hlCountry:hover span { text-decoration: underline; }
@media print { .highlightsCard { display: none; } }
.fpRegionalNote { margin: 4px 0 14px; padding: 8px 12px; border-left: 4px solid var(--navy); background: #eef4fb;
                  font-size: 14px; color: var(--ink); }   /* EPO member states (2026-10-21) */

/* the law firms on a country page, names only (2026-10-26) */
.firmPage .fpFirmList { columns: 2; column-gap: 32px; padding-left: 18px; margin: 8px 0 12px; }
.firmPage .fpFirmList li { break-inside: avoid; margin: 0 0 4px; }
@media (max-width: 760px) { .firmPage .fpFirmList { columns: 1; } }

/* a country page: its heading in the banner, opening paragraph and FAQ (2026-10-26) */
#heroBannerHeading.heroCountry { font-size: clamp(26px, 4vw, 48px); }
.firmPage .fpIntro { font-size: 1.05rem; line-height: 1.6; margin: 4px 0 16px; }
.firmPage .fpFaq h3 { margin: 18px 0 4px; font-size: 1.05rem; }
.firmPage .fpFaq p { margin: 0 0 8px; line-height: 1.55; }

/* ---- admin tabs and the Renew Direct tab (2026-10-28) */
.adminTabs { display: flex; gap: 6px; margin: 18px 0 0; border-bottom: 2px solid var(--navy); }
.adminTab { border: 1px solid #c8d8e8; border-bottom: none; background: #f4f7fb; color: var(--navy); padding: 10px 20px;
            font-size: 16px; font-weight: 700; border-radius: 8px 8px 0 0; cursor: pointer; }
.adminTab[aria-selected="true"] { background: var(--navy); color: #fff; }
.adminTabBadge { display: inline-block; min-width: 20px; margin-left: 6px; padding: 1px 6px; border-radius: 10px;
                 background: #c0392b; color: #fff; font-size: 13px; }
.rdFailing { border: 2px solid #c0392b; background: #fdf0ef; }
.rdFailing h2 { color: #a5281b; }
.rdFailTable th { background: #a5281b; }
.rdAllClear { color: #1e7a3c; font-weight: 700; }
.rdDetail { max-width: 420px; font-size: 14px; }
.rdModes { margin-top: 12px; }
.rdToolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.rdToolbarRight { margin-left: auto; display: flex; gap: 8px; }
.rdBtn { border: 1px solid #5b8fc7; color: #1f5f9c; background: #fff; border-radius: 6px; padding: 8px 14px;
         font-size: 15px; cursor: pointer; }
.rdBtn:hover:not(:disabled) { background: #eef4fa; }
.rdBtn:disabled { opacity: .45; cursor: default; }
.rdBtn.rdDanger { border-color: #d9534f; color: #c0392b; }
.rdBtn.rdRound { border-radius: 20px; }
.rdConfirm { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 12px; margin: 6px 0;
             background: #fff8e6; border: 1px solid #f0c36d; border-radius: 6px; }
table.rdTable td { font-size: 14px; }
.rdTitle { max-width: 360px; }
tr.rdCase.selected, tr.rdCase.selected:hover { background: #d9e8f7; }
tr.rdReversed td { color: #8a96a3; text-decoration: line-through; }
.rdChip { display: inline-block; margin: 0 4px 3px 0; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.rdChip-instruction { background: #e4e8ee; color: #3b4a5a; }
.rdChip-paid { background: #f6c343; color: #4a3500; }
.rdChip-completed { background: #5b8fc7; color: #fff; }
.rdChip-payannuity { background: #2e8b57; color: #fff; }
td.num { text-align: right; white-space: nowrap; }
/* the case buttons in PayAnnuity admin's colours (user, 2026-10-28): outlined, each its own colour */
.rdBtn[data-step="renewal-paid"] { border-color: #17a2b8; color: #138496; }         /* PayAnnuity "Processed" teal */
.rdBtn[data-step="renewal-paid"]:hover:not(:disabled) { background: #e8f6f8; }
.rdBtn[data-step="receipt"] { border-color: #28a745; color: #218838; }              /* "Completed" green */
.rdBtn[data-step="receipt"]:hover:not(:disabled) { background: #eaf6ec; }
.rdBtn[data-step="payannuity-updated"] { border-color: #4a7bd0; color: #2f5fb3; }   /* "Tag Documents" blue */
.rdBtn[data-step="payannuity-updated"]:hover:not(:disabled) { background: #edf2fb; }
.rdBtn[data-step="reverse"] { border-color: #dc3545; color: #c82333; }              /* "Reverse Instruction" red */
.rdBtn[data-step="reverse"]:hover:not(:disabled) { background: #fbecee; }
.rdBtn#rdRefresh, .rdBtn#rdExcel { border-color: #4a7bd0; color: #2f5fb3; }
.adminFloatLogout { margin: 0; }
/* invoices and orders: actions and the edit form (2026-10-29) */
.rdActions { white-space: nowrap; }
.rdTotals { grid-column: 1 / -1; margin: 0; font-weight: 600; }
.rdTotals .rdPaidDiff { font-weight: 400; margin-left: 8px; color: #b00020; }
.rdReportForm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; }
.rdReportForm input[type=date] { font: inherit; padding: 4px 6px; }
.rdActions .linkButton { margin-right: 8px; }
.rdDangerLink { color: #c0392b !important; }
.rdCancelled { color: #a5281b; font-weight: 700; margin-right: 8px; }
tr.rdEditRow td { background: #f8fafc; }
.rdEditForm { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 10px 18px; padding: 6px 0; }
.rdEditForm label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; color: var(--navy); font-size: 14px; }
.rdEditForm input, .rdEditForm select, .rdEditForm textarea { font: inherit; font-weight: 400; padding: 8px 10px;
  border: 1px solid #c8d8e8; border-radius: 6px; }
.rdEditForm .rdWide { grid-column: 1 / -1; }

/* SECTION 5 - Recent activity (user, 2026-10-31): patent rows amber, trademark rows blue */
.adminActivity tr.adminActPatent td { background: #fff4e0; }
.adminActivity tr.adminActTM td { background: #e6f0fc; color: #1f5fbf; }
.adminActivity .adminAppTag { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 9px; }
.adminActivity tr.adminActPatent .adminAppTag { background: var(--amber); color: #3a2603; }
.adminActivity tr.adminActTM .adminAppTag { background: #1f5fbf; color: #fff; }
.adminActivity .adminCountry img { width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; margin-right: 6px; }