/**
 * Salesagent pages built on Around (public pages, /login, /signup and the
 * logged-in app). Loaded after theme.min.css.
 *
 * Brand colours (official logo + Brand Guide 2022):
 *   navy #255184  primary: buttons, links, focus (8.1:1 on white)
 *   ice  #39a9e1  decoration only: icons, tints, shapes. Never text or
 *                 button fill on white (2.65:1, fails WCAG).
 * #0b376b is a darker navy for hover/active states.
 */
/* Inter (self-hosted, SIL OFL 1.1), weights 100-900 */
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Brand overrides */
:root {
  --ar-primary:#255184;
  --ar-primary-rgb:37,81,132;
  --ar-border-radius:0.5rem;
  --ar-link-color:#255184;
  --ar-link-hover-color:#0b376b;
  --ar-info:#39a9e1;
  --ar-info-rgb:57,169,225;
}
.btn-primary {
  --ar-btn-bg:#255184;
  --ar-btn-border-color:#255184;
  --ar-btn-hover-bg:#0b376b;
  --ar-btn-hover-border-color:#0b376b;
  --ar-btn-active-bg:#0b376b;
  --ar-btn-active-border-color:#0b376b;
  --ar-btn-disabled-bg:#255184;
  --ar-btn-disabled-border-color:#255184;
}
.btn-info { /* not for use on white, see the note at the top */
  --ar-btn-bg:#39a9e1;
  --ar-btn-border-color:#39a9e1;
  --ar-btn-hover-bg:#1e90c9;
  --ar-btn-hover-border-color:#1e90c9;
  --ar-btn-active-bg:#1e90c9;
  --ar-btn-active-border-color:#1e90c9;
  --ar-btn-disabled-bg:#39a9e1;
  --ar-btn-disabled-border-color:#39a9e1;
}
.btn-outline-primary {
  --ar-btn-color:#255184;
  --ar-btn-border-color:#255184;
  --ar-btn-hover-bg:#255184;
  --ar-btn-hover-border-color:#255184;
  --ar-btn-active-bg:#255184;
  --ar-btn-active-border-color:#255184;
  --ar-btn-disabled-color:#255184;
  --ar-btn-disabled-border-color:#255184;
}
.btn-outline-info { /* not for use on white, see the note at the top */
  --ar-btn-color:#39a9e1;
  --ar-btn-border-color:#39a9e1;
  --ar-btn-hover-bg:#39a9e1;
  --ar-btn-hover-border-color:#39a9e1;
  --ar-btn-active-bg:#39a9e1;
  --ar-btn-active-border-color:#39a9e1;
  --ar-btn-disabled-color:#39a9e1;
  --ar-btn-disabled-border-color:#39a9e1;
}

/* Page-loading spinner (from production) */
.page-loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all .4s .2s ease-in-out;
  transition: all .4s .2s ease-in-out;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
}
.page-loading.active {
  opacity: 1;
  visibility: visible;
}
.page-loading-inner {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;
  opacity: 0;
}
.page-loading.active > .page-loading-inner {
  opacity: 1;
}
.page-loading-inner > span {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: normal;
  color: #6f788b;
}
.page-spinner {
  display: inline-block;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: .75rem;
  vertical-align: text-bottom;
  background-color: #d7dde2;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: spinner .75s linear infinite;
  animation: spinner .75s linear infinite;
}
@-webkit-keyframes spinner {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/* WordPress toolbar above the fixed navbar when logged in */
.admin-bar .navbar.fixed-top{top:32px}
@media (max-width:782px){.admin-bar .navbar.fixed-top{top:46px}}

/*
 * Landing page (templates/home.php): replaces the inline styles of the
 * production markup.
 */

/* Logo in the header and footer (img/salesagent-logo.svg, official artwork) */
.landing-logo { height: 27px; width: auto; }

/* Fixed widths of single blocks */
.landing-hero-lead { max-width: 710px; }
.landing-mw-306 { max-width: 306px; }
.landing-mw-468 { max-width: 468px; }
.landing-mw-480 { max-width: 480px; }
.landing-mw-484 { max-width: 484px; }
.landing-mw-526 { max-width: 526px; }
.landing-mw-560 { max-width: 560px; }
.landing-mw-570 { max-width: 570px; }
.landing-mw-660 { max-width: 660px; }
.landing-mw-740 { max-width: 740px; }

/* Rounded section panels */
.landing-rounded { border-radius: 24px; }

/* Vertical gaps between sections */
.landing-pt-120 { padding-top: 120px; }
.landing-mt-72 { margin-top: 72px; }

/* Text split into paragraphs: one empty line between them */
.landing-prose > p:not(:last-child) { margin-bottom: 1lh; }

/* White button on blue panels (stays white on hover) */
.landing-btn-white {
  --ar-btn-font-size: 1rem;
  --ar-btn-color: #0b376b;
  --ar-btn-bg: #fff;
  --ar-btn-border-color: #fff;
  --ar-btn-hover-color: #0b376b;
  --ar-btn-hover-bg: #fff;
  --ar-btn-hover-border-color: #fff;
  --ar-btn-active-color: #0b376b;
  --ar-btn-active-bg: #fff;
  --ar-btn-active-border-color: #fff;
}

/* Header "Sign in" / "Dashboard" button */
.landing-btn-base { --ar-btn-font-size: 1rem; }

/* Avatars with a white ring */
.landing-avatar-ring { padding: 3px; }
.landing-avatar-ring-lg { padding: .375rem; }

/* Dashed arrows between the "How does Salesagent work" steps */
.landing-arrow-1 { margin: -140px 0 -108px -150px; }
.landing-arrow-2 { margin: -60px 0 -80px -120px; }

/* "Simplify your daily sales activities" picture */
.landing-staff { right: 37.26%; }
.landing-clip-mask { -webkit-clip-path: url(#mask); clip-path: url(#mask); }

/* Pricing cards */
.landing-plan { min-width: 19rem; }
.landing-plan .card-body { max-width: 23rem; }

/* Buyer protection banner */
.landing-cta-bg { background-image: url(../img/landing/insurance/cta-bg.jpg); }

/* Coloured shape behind the industry pictures */
.landing-industry-bg { width: 88.2%; }

/* Footer phone numbers: country and area codes in fixed-width columns */
.landing-phone-cc { width: 43px; }
.landing-phone-cc-end { text-align: right; padding-right: 11px; }
.landing-phone-area { width: 30px; }

/* Footer phone numbers: the country code takes the width of the widest one
   ("+44", printed invisibly underneath), so the dots line up in any font */
.landing-phone-code { display: inline-grid; justify-items: end; }
.landing-phone-code > * { grid-area: 1 / 1; }
.landing-phone-code > [aria-hidden] { visibility: hidden; }

/* Footer phone numbers: equal-width digits (the narrow "1"s looked squeezed);
   never broken over two lines */
.landing-phone { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Inner public pages (company, legal, terms, privacy, code of conduct,
   support, partners) ---- */

/* Breadcrumb at production's size */
.landing-breadcrumb { --ar-breadcrumb-font-size: 1rem; }

/* Card headings (contact, legal and link cards) */
.landing-card-title { font-size: 1.5rem; }

/* Contact cards: gap between the two entries, and the dash in opening hours */
.landing-contact-item:not(:last-child) { margin-bottom: 2.25rem; }
.landing-hours-dash { width: 36px; height: 1px; }

/* Company: photo pulled up into the hero */
.landing-mt-n135 { margin-top: -135px; }

/* Call-back form width */
.landing-mw-800 { max-width: 800px; }

/* Legal documents: clauses lettered a), b), ... like the published text */
.landing-legal ol.landing-alpha { list-style: none; counter-reset: landing-alpha; padding-left: 0; }
.landing-legal ol.landing-alpha > li { counter-increment: landing-alpha; }
.landing-legal ol.landing-alpha > li::before { content: counter(landing-alpha, lower-alpha) ") "; }
.landing-prose > ol.landing-alpha { margin-top: -1lh; margin-bottom: 1lh; }

/* ---- Account pages: form on the left, photo on the right (/signup) ---- */

/* The photo */
.landing-account-cover { background-image: url(../img/account/cover.jpg); }

/* A select that still shows its empty first option reads like a placeholder */
.landing-account .form-select:has(option[value=""]:checked) { color: var(--ar-gray-500); }
.landing-account .form-select option { color: var(--ar-gray-900); }

@media (min-width: 992px) {
  /* The photo fills exactly one screen and stays put. When the form is taller
     than the screen, only the form side scrolls: the photo is never stretched
     or cropped differently. */
  .landing-account-cover {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: flex-start;
  }
  /* The home button stays on the photo (z-index: the pinned photo comes later in the page) */
  .landing-account-home { position: fixed !important; z-index: 2; }

  /* WordPress toolbar (staff) */
  .admin-bar .landing-account-cover { top: 32px; height: calc(100vh - 32px); }
  .admin-bar .landing-account-home { top: 32px !important; }
}

/* ---- Checkboxes in error ---- */

/* Around draws a ticked checkbox that is in error with a see-through box, so
   its white tick can't be seen and the click seems not to take. Draw it like
   any other ticked checkbox. */
.form-check-input.is-invalid:checked {
  background-color: var(--ar-primary);
  border-color: var(--ar-primary);
}

/* A required checkbox in error (the terms) is put right by ticking it: the
   red text and the message go away at once. */
.form-check-input.is-invalid:required:checked ~ .form-check-label { color: inherit; }
.form-check-input.is-invalid:required:checked ~ .invalid-feedback { display: none !important; }

/* ---- The app: logged-in screens (parts/app-open, app-close, account-nav) ---- */

/* Readable text. Around's grey for secondary text and its status colours are
   too light to read as text (3.4:1 and less on white), so the app uses darker
   ones: 4.5:1 or more. Notices keep their tinted background and get dark text. */
.app {
  --ar-secondary-color: #667085;
  --ar-form-invalid-color: #c81e1e;
}
.app .alert { --ar-alert-color: var(--ar-gray-900); }
.app .btn-outline-danger {
  --ar-btn-color: #c81e1e;
  --ar-btn-border-color: #c81e1e;
  --ar-btn-hover-bg: #c81e1e;
  --ar-btn-hover-border-color: #c81e1e;
  --ar-btn-active-bg: #c81e1e;
  --ar-btn-active-border-color: #c81e1e;
}

/* A person's picture: their initials on navy until pictures can be uploaded */
.app-avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--ar-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}
.app-avatar-sm { width: 2.5rem; height: 2.5rem; font-size: .875rem; }
.app-avatar-xl { width: 6rem; height: 6rem; font-size: 2rem; }
/* An uploaded picture (includes/avatar.php): the same circle, filled by it */
img.app-avatar { object-fit: cover; background-color: var(--ar-gray-200); }

/* ---- Profile picture on /settings (templates/parts/settings-avatar.php) ----
   Without JavaScript: a file field and "Upload". With it (the form gets
   .avatar-js from assets/js/avatar-crop.js): one button that opens the crop
   tool. */
.avatar-file { width: auto; max-width: 100%; }
.avatar-js .avatar-file,
.avatar-js .avatar-upload { display: none; }

/* The crop tool: a dialog with the picture in a square, the part to keep
   inside a circle */
.avatar-dialog {
  width: calc(100% - 2rem);
  max-width: 24rem;
  padding: 1.5rem;
  border: 0;
  border-radius: var(--ar-border-radius-xl, 1rem);
  background-color: #fff;
  color: var(--ar-body-color);
  box-shadow: 0 1rem 3rem rgba(11, 15, 25, .25);
}
.avatar-dialog::backdrop { background-color: rgba(11, 15, 25, .5); }
.avatar-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--ar-border-radius);
  background-color: var(--ar-gray-200);
  cursor: grab;
  touch-action: none; /* dragging and pinching move the picture, not the page */
}
.avatar-canvas:active { cursor: grabbing; }
.avatar-canvas:focus-visible { outline: 2px solid var(--ar-primary); outline-offset: 2px; }
.avatar-zoom { flex: 1 1 auto; }
.avatar-error { color: var(--ar-form-invalid-color, #c81e1e); }

/* ---- The candidate's profile (/profile, templates/parts/profile-view.php,
   profile-edit.php) ----
   The top card: picture, then name and headline, then "Edit". Phones: the
   picture above the name, "Edit" in the top right corner of the card. */
.profile-head { position: relative; display: flex; flex-direction: column; gap: 1.25rem; }
.profile-photo { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: .5rem; }
.profile-avatar { width: 7rem; height: 7rem; font-size: 2.25rem; }
.profile-id { flex: 1 1 0; min-width: 0; }
.profile-id > :last-child { margin-bottom: 0 !important; }
.profile-headline { max-width: 40rem; color: var(--ar-gray-800); }
.profile-action { position: absolute; top: 0; right: 0; }
@media (min-width: 576px) {
  .profile-head { flex-direction: row; align-items: flex-start; gap: 1.75rem; }
  .profile-photo { align-items: center; }
  .profile-action { position: static; flex: 0 0 auto; }
}
/* Running text on the profile: about 80 characters per line */
.profile-text,
.profile-empty { max-width: 40rem; }
.profile-text > :last-child { margin-bottom: 0; }
.profile-text p { margin-bottom: .75rem; }
/* "Remove this job" sits under the form, apart from Save and Cancel */
.profile-remove { margin-top: 1.75rem; padding-top: 1.5rem; }

/* A long first name in the top bar is cut off instead of pushing the bar wider */
.app-user-name { max-width: 12rem; }

/* Rows of people or invites inside a card */
.app-list > li + li { border-top: 1px solid var(--ar-border-color); }
.app-list > li:first-child { padding-top: 0 !important; }
.app-list > li:last-child { padding-bottom: 0 !important; }

@media (min-width: 992px) {
  /* The menu column has a fixed width and the page takes the rest: labels
     don't grow with the screen. 220px holds an icon and a label of about
     18 characters on one line. The footer line starts where the page does. */
  .app-side { flex: 0 0 13.75rem; width: 13.75rem; }
  .app-main { flex: 1 1 0; width: auto; min-width: 0; }
  .app-footer > .app-main { margin-left: 13.75rem; }

  /* The menu stays in view under the top bar while the page scrolls */
  .app-sidebar { position: -webkit-sticky; position: sticky; top: 6.5rem; }

  /* WordPress toolbar (staff) */
  .admin-bar .app-header { top: 32px; }
  .admin-bar .app-sidebar { top: calc(6.5rem + 32px); }
}

@media (max-width: 991.98px) {
  /* Room for the "Menu" bar pinned to the bottom of the screen */
  .app-footer { padding-bottom: 4rem; }
}

/* A count is waiting in the account menu (unread support replies): a dot on
   the user's picture in the top bar */
.app-dot { width: .75rem; height: .75rem; background-color: var(--ar-danger); }

/* ---- The candidate's journey (includes/journey.php) ----
   The welcome, /how-it-works and the timeline on the dashboard all use
   Around's "steps" (number in a circle, dashed line between them). Around
   centres the number beside its text; here a step can be tall (the current
   stage lists its own steps), so the number sits at the top and the line
   runs from under it to the next one. */
.journey {
  --ar-steps-padding-y: 1.25rem;
  --ar-steps-padding-x: .75rem;
  --ar-steps-number-size: 2.75rem;
  --ar-steps-number-inner-size: 2.25rem;
  --ar-steps-number-font-size: 1rem;
}
.journey .step { align-items: flex-start; }
.journey .step::before { height: var(--ar-steps-padding-y); }
.journey .step::after {
  top: calc(var(--ar-steps-padding-y) + var(--ar-steps-number-size));
  height: auto;
}
.journey .step-number-inner { font-weight: 600; }
/* The stage name lines up with the middle of its number; the text takes the
   rest of the row, up to about 80 characters per line (wider is tiring to
   read), however wide the card is */
.journey .step-body { flex: 1 1 0; min-width: 0; max-width: 40rem; padding-top: .5rem; }
.journey-lead,
.journey-start p { max-width: 40rem; }

/* The welcome (templates/dashboard/candidate-welcome.php): a person and
   their message, then the stages in one line each.
   Phones: picture beside the name, the message under them. From 768px: the
   person in a column on the left, the message beside it. */
.welcome-intro { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--ar-border-color); }
.welcome-person { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.25rem; }
.welcome-photo { width: 4.5rem; height: 4.5rem; font-size: 1.5rem; }
.welcome-name,
.welcome-title { display: block; }
.welcome-name { color: var(--ar-heading-color); font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.welcome-title { color: var(--ar-secondary-color); }
.welcome-text { max-width: 40rem; }
.welcome-text > :last-child { margin-bottom: 0; }
.welcome-heading { margin-bottom: .25rem; }
@media (min-width: 768px) {
  .welcome-intro { display: flex; align-items: flex-start; gap: 2.5rem; }
  .welcome-person { display: block; flex: 0 0 11rem; margin-bottom: 0; }
  .welcome-photo { width: 7rem; height: 7rem; margin-bottom: 1rem; font-size: 2.25rem; }
  .welcome-text { flex: 1 1 0; min-width: 0; }
}
/* One line per stage: the numbers sit closer together */
.journey-short { --ar-steps-padding-y: .75rem; }
.journey-short + .journey-facts { margin-top: 1.5rem; }

/* Short facts under the stages (free, online, how long) */
.journey-facts { margin-top: 2.5rem; }

/* The button under the explanation: "Start my journey" / back to the dashboard */
.journey-start { margin-top: 1.75rem; padding-top: 1.75rem; }

/* The steps inside the current stage: icon, then what to do */
.journey-steps { margin-top: 1rem; }
.journey-step { display: flex; align-items: flex-start; gap: .75rem; }
.journey-step + .journey-step { margin-top: .75rem; }
.journey-step > i,
.journey-ring {
  flex-shrink: 0;
  width: 1.25rem;
  font-size: 1.25rem;
  line-height: 1.5rem;
  text-align: center;
}
/* A step that isn't open yet: an empty ring */
.journey-ring::before {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--ar-gray-500);
  border-radius: 50%;
  vertical-align: -.125rem;
  content: "";
}
.journey-step.is-later { color: var(--ar-secondary-color); }
/* The step to do now stands out from the list */
.journey-step.is-current {
  margin: 1rem 0;
  padding: 1rem;
  border-radius: var(--ar-border-radius-lg);
  background-color: var(--ar-gray-100);
}

/* Phones: the numbers are smaller (see .journey above) and the step to do
   drops its arrow, so the text and the button get the width. As a last resort
   the button takes two lines instead of pushing the page wider. */
.journey .btn { white-space: normal; }
@media (max-width: 575.98px) {
  .journey-step.is-current { padding: .75rem; }
  .journey-step.is-current > i { display: none; }
  .journey .btn { --ar-btn-padding-x: 1rem; }
}

/* /goals: how long a goal takes and how hard it is, under its name */
.goal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem .75rem;
  margin-bottom: .5rem;
  color: var(--ar-secondary-color);
  font-size: .875rem;
}
.goal-duration { display: inline-flex; align-items: center; gap: .375rem; }
.goal-level {
  padding: .0625rem .625rem;
  border: 1px solid var(--ar-border-color);
  border-radius: 50rem;
  color: var(--ar-heading-color);
  font-size: .75rem;
  font-weight: 600;
}

/* "How it works" under the timeline */
.journey-more { margin-top: 2.75rem; padding-top: 1.25rem; }

@media (min-width: 576px) {
  .journey {
    --ar-steps-padding-x: 1.5rem;
    --ar-steps-number-size: 4rem;
    --ar-steps-number-inner-size: 3rem;
    --ar-steps-number-font-size: 1.125rem;
  }
  .journey .step-body { padding-top: 1.125rem; }
}

/* ---- Courses (templates/courses.php, templates/course.php) ---- */

/* A course's summary in the list: about 80 characters per line */
.course-summary { max-width: 40rem; }

/* Course content: written by staff in the block editor (wp-admin → Courses)
   with a fixed set of blocks. Everything gets the app's look here, whatever
   the editor allows: one column about 85 characters wide, headings a size
   down (the course name is the page heading), pictures and video never wider
   than the column. */
.course-content > * { max-width: 44rem; }
.course-content > :first-child { margin-top: 0; }
.course-content > :last-child { margin-bottom: 0; }
.course-content h2,
.course-content h3,
.course-content h4 { margin-top: 2rem; margin-bottom: .75rem; }
.course-content h2 { font-size: 1.5rem; }
.course-content h3 { font-size: 1.25rem; }
.course-content h4,
.course-content h5,
.course-content h6 { font-size: 1.0625rem; }
.course-content p,
.course-content ul,
.course-content ol,
.course-content figure,
.course-content blockquote { margin-top: 0; margin-bottom: 1.25rem; }
.course-content li + li { margin-top: .25rem; }
.course-content a { text-decoration: underline; }
.course-content img,
.course-content video { max-width: 100%; height: auto; border-radius: var(--ar-border-radius); }
.course-content iframe { display: block; width: 100%; max-width: 100%; border: 0; }
.course-content .wp-has-aspect-ratio iframe { height: auto; aspect-ratio: 16 / 9; }
.course-content .wp-embed-aspect-4-3 iframe { aspect-ratio: 4 / 3; }
.course-content figcaption {
  margin-top: .5rem;
  color: var(--ar-secondary-color);
  font-size: .875rem;
  text-align: left;
}
/* A quote is a tip or something to remember: a tinted panel with a navy edge */
.course-content blockquote {
  padding: 1rem 1.25rem;
  border-left: .25rem solid var(--ar-primary);
  border-radius: 0 var(--ar-border-radius) var(--ar-border-radius) 0;
  background-color: var(--ar-gray-100);
  color: var(--ar-gray-900);
  font-size: 1rem;
}
.course-content blockquote > :last-child { margin-bottom: 0; }
.course-content blockquote cite { display: block; margin-top: .5rem; color: var(--ar-secondary-color); font-size: .875rem; font-style: normal; }
/* A wide table scrolls inside the column instead of widening the page */
.course-content .wp-block-table { overflow-x: auto; }
.course-content table { width: 100%; border-collapse: collapse; }
/* (.wp-block-table: to win over WordPress's own table lines, whichever
   stylesheet loads last) */
.course-content th,
.course-content td,
.course-content .wp-block-table th,
.course-content .wp-block-table td { padding: .625rem .75rem; border: 1px solid var(--ar-border-color); text-align: left; vertical-align: top; }
.course-content th { background-color: var(--ar-gray-100); color: var(--ar-gray-900); font-weight: 600; }
.course-content .wp-block-table thead,
.course-content .wp-block-table tfoot { border: 0; }
.course-content hr { margin: 2rem 0; }

/* The end of a course or assignment page: its assignments, the finished
   note, the (temporary) finish button, or what to do */
.course-end { margin-top: 2rem; padding-top: 1.5rem; }
.course-end .journey-ring { margin-top: .125rem; }

/* "What to do" on an assignment page: the task and where to do it */
.assignment-task {
  max-width: 44rem;
  padding: 1.25rem;
  border-radius: var(--ar-border-radius-lg);
  background-color: var(--ar-gray-100);
}

/* ---- The support chat (/helpdesk, templates/helpdesk.php) ----
   Around's chat (account-chat.html) leaned down to one window. Messages:
   salesagent_chat_message_html() in includes/support-chat.php. */

/* The messages scroll inside the card, so the message box stays in view.
   The card grows with the conversation up to the height of the screen. */
/* position: the screen-reader-only sender names inside the messages are
   absolutely positioned; without this they would sit outside the scroll area
   and make the whole page as tall as the conversation. */
.chat-stream {
  position: relative;
  min-height: 9rem;
  max-height: calc(100vh - 27.5rem);
  max-height: calc(100dvh - 27.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.chat-stream:focus-visible { outline: 2px solid var(--ar-primary); outline-offset: -2px; }

/* A bubble is as wide as its text. A long message takes up to 80% of the
   window but never more than 40rem (about 80 characters per line: wider is
   tiring to read). Phones: 85%, set below. */
.chat-msg { max-width: min(80%, 40rem); }
.chat-bubble {
  width: auto;
  max-width: 100%;
  padding: .75rem 1rem;
  overflow-wrap: anywhere;
}
.chat-msg-out .chat-bubble a { color: inherit; text-decoration: underline; }
.chat-msg-in .chat-msg-meta { padding-left: 3.25rem; }
.chat-avatar { width: 2.5rem; height: 2.5rem; object-fit: cover; }
.chat-header img { object-fit: cover; }
.chat-welcome > :last-child { margin-bottom: 0; }
.chat-welcome p,
.chat-welcome ul,
.chat-welcome ol { margin-bottom: .75rem; }
.chat-day:first-child { margin-top: 0 !important; }

/* Green while a staff member has the Chats screen open, grey otherwise */
.chat-presence { width: .75rem; height: .75rem; background-color: #b8c0cc; }
.chat-presence.is-online { background-color: var(--ar-success); }

/* "New message" appears over the messages while the reader is scrolled up */
.chat-jump {
  position: absolute;
  bottom: .75rem;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
}

.chat-composer textarea { min-height: 0; max-height: 10rem; resize: none; }
.chat-composer:focus-within { border-color: var(--ar-primary) !important; }

/* Touch keyboards: Enter makes a new line there, so no hint about Enter */
@media (pointer: coarse) {
  .chat-hint { display: none; }
}

@media (max-width: 575.98px) {
  .chat-msg { max-width: 85%; }
}

@media (max-width: 991.98px) {
  /* No sticky top bar, but the "Menu" bar is pinned to the bottom */
  .chat-stream {
    max-height: calc(100vh - 25rem);
    max-height: calc(100dvh - 25rem);
  }
}

/* The chat between an intern and their employer (includes/intern-chat.php)
   is one card among others on a page, so its window has a fixed, lower
   height instead of filling the screen. */
.chat-embedded .chat-stream { min-height: 8rem; max-height: 24rem; }
.chat-empty { max-width: 40rem; }
/* The hint of an empty chat goes when the first message is there */
.chat-empty:not(:only-child) { display: none; }

/* ---- Celebrations (templates/parts/celebration.php, includes/celebrations.php) ----
   The popup a candidate gets when they completed something: what it was,
   what comes next, one button that leads there. Opened by
   assets/js/celebration.js. */
.celebration {
  width: calc(100% - 2rem);
  max-width: 28rem;
  max-height: calc(100% - 2rem);
  padding: 2rem 1.5rem 1.5rem;
  border: 0;
  border-radius: var(--ar-border-radius-xl, 1rem);
  background-color: #fff;
  color: var(--ar-body-color);
  text-align: center;
  box-shadow: 0 1rem 3rem rgba(11, 15, 25, .25);
}
.celebration::backdrop { background-color: rgba(11, 15, 25, .5); }
/* Fades in. Not moved or scaled: a transform on the popup would tie the
   confetti canvas inside it to the popup instead of the page. */
.celebration[open] { animation: celebration-in .2s ease-out; }
@keyframes celebration-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The tick (or, for a milestone, the award) above the heading */
.celebration-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background-color: rgba(var(--ar-primary-rgb), .1);
  color: var(--ar-primary);
  font-size: 1.75rem;
  line-height: 1;
}
.celebration-milestone .celebration-icon { background-color: var(--ar-primary); color: #fff; }

/* A long name breaks instead of widening the popup */
.celebration-name { overflow-wrap: anywhere; }

/* "Also completed": the list sits in the middle, its lines start under each
   other, and a line that wraps stays clear of its tick */
.celebration-also { margin-top: 1.25rem; }
.celebration-also ul { display: inline-block; max-width: 100%; text-align: left; }
.celebration-also li { position: relative; padding-left: 1.5rem; overflow-wrap: anywhere; }
.celebration-also li i { position: absolute; top: .2em; left: 0; }
.celebration-also li + li { margin-top: .25rem; }

/* What comes next: set apart from what was completed */
.celebration-next {
  margin-top: 1.5rem;
  padding: 1rem;
  border-radius: var(--ar-border-radius);
  background-color: var(--ar-gray-100);
  overflow-wrap: anywhere;
}

.celebration-buttons { margin-top: 1.5rem; }
@media (min-width: 576px) {
  .celebration { padding: 2.5rem 2.5rem 2rem; }
  .celebration-buttons .btn { flex: 1 1 0; }
}

/* Confetti for a milestone, drawn over the whole page; clicks go through it */
.celebration-confetti {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .celebration[open] { animation: none; }
  .celebration-confetti { display: none; }
}

/* ---- Progress bars (assignment pages, the internship roulette) ----
   A native <progress>, drawn in the brand's navy. */
.app-progress {
  display: block;
  width: 100%;
  height: .625rem;
  overflow: hidden;
  border: 0;
  border-radius: 50rem;
  background-color: var(--ar-gray-300);
  -webkit-appearance: none;
  appearance: none;
}
.app-progress::-webkit-progress-bar { background-color: var(--ar-gray-300); border-radius: 50rem; }
.app-progress::-webkit-progress-value { background-color: var(--ar-primary); border-radius: 50rem; transition: width .2s linear; }
.app-progress::-moz-progress-bar { background-color: var(--ar-primary); border-radius: 50rem; }
.assignment-progress { max-width: 24rem; }

/* ---- Tips (includes/worksheet-rules.php, includes/leads.php) ----
   What a simple check found to improve in what the candidate wrote: a tinted
   panel under the worksheet or in the lead log. Advice, never an error. */
.tips {
  max-width: 44rem;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-left: .25rem solid var(--ar-info);
  border-radius: 0 var(--ar-border-radius) var(--ar-border-radius) 0;
  background-color: rgba(var(--ar-info-rgb), .08);
  color: var(--ar-gray-900);
}
.tips-count {
  padding: .0625rem .625rem;
  border: 1px solid rgba(var(--ar-primary-rgb), .35);
  border-radius: 50rem;
  color: var(--ar-primary);
  font-size: .75rem;
  font-weight: 600;
}
.tips-list > li { display: flex; align-items: flex-start; gap: .625rem; }
.tips-list > li + li { margin-top: .5rem; }
.tips-list > li > i { flex-shrink: 0; color: var(--ar-primary); font-size: 1.125rem; line-height: 1.5rem; }

/* ---- Worksheets (includes/worksheets.php) ----
   What was written, as it reads: each label above its answer, about 85
   characters per line. Also used for the details of a lead and of an intern. */
.worksheet-view { max-width: 44rem; }
.worksheet-view > dt { color: var(--ar-secondary-color); font-size: .875rem; font-weight: 500; }
.worksheet-view > dd { margin-bottom: 1rem; color: var(--ar-gray-900); }
.worksheet-view > dd:last-child { margin-bottom: 0; }
.worksheet-view > dd > p { margin-bottom: .5rem; }
.worksheet-view > dd > p:last-child { margin-bottom: 0; }
.worksheet-form { max-width: 44rem; }
.worksheet-form textarea { min-height: 7rem; }
/* "Share with my employer" and the employer's comment: set apart from the text */
.worksheet-share,
.worksheet-comment {
  max-width: 44rem;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--ar-border-radius-lg);
  background-color: var(--ar-gray-100);
}
.worksheet-comment > div > p:last-child { margin-bottom: 0; }

/* ---- Companies as their interns see them (includes/internships.php) ---- */
.company-logo { display: block; flex-shrink: 0; width: auto; max-width: 9rem; height: auto; max-height: 3.5rem; object-fit: contain; }
.company-logo-lg { max-width: 12.5rem; max-height: 5rem; }
/* Without a logo: the company's initials on a tile */
.company-logo-none {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--ar-border-radius);
  background-color: var(--ar-gray-200);
  color: var(--ar-gray-800);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
}
.company-logo-none.company-logo-lg { width: 5rem; height: 5rem; font-size: 1.5rem; }
.company-card { display: flex; flex-direction: column; gap: 1.25rem; }
.company-card-body { flex: 1 1 0; min-width: 0; }
@media (min-width: 576px) {
  .company-card { flex-direction: row; align-items: flex-start; gap: 1.75rem; }
}
/* My Company → Logo: the logo beside the upload form */
.company-logo-card { display: flex; flex-direction: column; gap: 1.5rem; }
.company-logo-preview { flex: 0 0 auto; }
.company-logo-forms { flex: 1 1 0; min-width: 0; }
@media (min-width: 768px) {
  .company-logo-card { flex-direction: row; align-items: flex-start; gap: 2.5rem; }
  .company-logo-preview { flex-basis: 12.5rem; }
}

/* ---- The internship (templates/internship.php, intern.php) ---- */
.internship-intro { max-width: 44rem; }
.internship-facts > li,
.internship-meta > li,
.dashboard-todo > li { display: flex; align-items: flex-start; gap: .625rem; }
.internship-facts > li + li,
.internship-meta > li + li,
.dashboard-todo > li + li { margin-top: .5rem; }
.internship-facts > li > i,
.internship-meta > li > i,
.dashboard-todo > li > i { flex-shrink: 0; width: 1.25rem; font-size: 1.25rem; line-height: 1.5rem; text-align: center; }
.internship-meta { margin-top: 1.5rem; padding-top: 1.5rem; }
/* What to do next (the candidate), "Validate" (the employer) */
.internship-next {
  max-width: 44rem;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--ar-border-radius-lg);
  background-color: var(--ar-gray-100);
}
.internship-review { max-width: 44rem; padding: 1rem 1.25rem; border-left: .25rem solid var(--ar-primary); border-radius: 0 var(--ar-border-radius) var(--ar-border-radius) 0; background-color: var(--ar-gray-100); color: var(--ar-gray-900); font-size: 1rem; }
.internship-review p:last-child { margin-bottom: 0; }

/* The roulette: the button, then the search (assets/js/roulette.js) */
.roulette { max-width: 28rem; }
.roulette .btn { white-space: normal; }
.roulette-search { padding: 1rem 1.25rem; border-radius: var(--ar-border-radius-lg); background-color: var(--ar-gray-100); }
.roulette-status { min-height: 1.5rem; }

/* ---- The lead log (templates/parts/leads-*.php, lead-*.php) ---- */

/* The numbers: small tiles in a row that wraps */
.lead-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.lead-stats > li { padding: .75rem .5rem; border-radius: var(--ar-border-radius); background-color: var(--ar-gray-100); text-align: center; }
.lead-stats-number { display: block; color: var(--ar-heading-color); font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.lead-stats-label { display: block; color: var(--ar-secondary-color); font-size: .8125rem; line-height: 1.3; }
.lead-stats-sm .lead-stats-number { font-size: 1.125rem; }
@media (min-width: 768px) {
  .lead-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
}

/* The filter above the list: one pill per status that has leads */
.lead-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.lead-filter-item {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .75rem;
  border: 1px solid var(--ar-border-color);
  border-radius: 50rem;
  color: var(--ar-gray-800);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
}
.lead-filter-item:hover { border-color: var(--ar-primary); color: var(--ar-primary); }
.lead-filter-item.active { border-color: var(--ar-primary); background-color: var(--ar-primary); color: #fff; }
.lead-filter-count { font-weight: 600; opacity: .8; }

/* "Accepted", "Validated", "Meeting confirmed": a calm green that is readable */
.lead-badge-ok { background-color: #0f6b3c; color: #fff; }

/* Add several at once: one block per prospect */
.lead-many > li + li { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--ar-border-color); }
.lead-status-form,
.lead-touch-form { margin-top: 1.5rem; padding-top: 1.5rem; }

/* ---- The employer's page of an intern (templates/intern.php) ---- */
.intern-doc > summary { cursor: pointer; }
.intern-doc > summary:focus-visible { outline: 2px solid var(--ar-primary); outline-offset: 2px; }
.intern-comment { max-width: 44rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ar-border-color); }

/* ---- The certificate (templates/certificate.php) ----
   One A4 sheet, landscape (297 × 210 mm). On a screen it scales with the
   window; printed, it fills the page and the bar above it is left out. */
.certificate-bar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.certificate-verified { max-width: 62rem; margin: 1.5rem auto 1rem; color: var(--ar-gray-900); }
.certificate-help { max-width: 62rem; margin: 1rem auto 0; }
.certificate-more { max-width: 62rem; margin: 2rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--ar-border-color); }
.certificate-more-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.certificate-more-main > div { flex: 1 1 20rem; }
.certificate {
  max-width: 62rem;
  margin: 0 auto;
  background-color: #fff;
  border-radius: var(--ar-border-radius-lg);
  box-shadow: 0 .5rem 2rem rgba(11, 15, 25, .08);
  container-type: inline-size;
}
.certificate-frame {
  display: flex;
  flex-direction: column;
  min-height: 0;
  aspect-ratio: 297 / 210;
  margin: 0;
  padding: 6cqw 7cqw 5cqw;
  border: .6cqw solid var(--ar-primary);
  border-radius: inherit;
  outline: .15cqw solid var(--ar-info);
  outline-offset: -1.6cqw;
  color: var(--ar-gray-900);
  text-align: center;
}
.certificate-logos { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 3cqw; }
.certificate-logo-salesagent { width: auto; height: 3.4cqw; }
.certificate-logo-company { width: auto; max-width: 24cqw; height: auto; max-height: 7cqw; object-fit: contain; }
.certificate-company-name { color: var(--ar-heading-color); font-size: 2.4cqw; font-weight: 700; }
.certificate-eyebrow { margin-bottom: 2.2cqw; color: var(--ar-primary); font-size: 1.7cqw; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.certificate-lead { margin-bottom: .6cqw; color: var(--ar-secondary-color); font-size: 1.7cqw; }
.certificate-name { margin-bottom: 1.6cqw; font-size: 5cqw; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.certificate-text { margin-bottom: 2.4cqw; font-size: 1.9cqw; line-height: 1.6; }
.certificate-numbers { display: flex; justify-content: center; gap: 4cqw; margin-bottom: 0; }
.certificate-number { display: block; color: var(--ar-primary); font-size: 3cqw; font-weight: 700; line-height: 1.1; }
.certificate-number-label { display: block; color: var(--ar-secondary-color); font-size: 1.35cqw; }
.certificate-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-top: auto; padding-top: 2cqw; text-align: left; }
.certificate-foot-check { display: flex; align-items: flex-end; gap: 1.6cqw; text-align: right; }
.certificate-qr { flex: none; width: 8.5cqw; height: 8.5cqw; }
.certificate-qr[hidden] { display: none; }
.certificate-qr svg { display: block; width: 100%; height: 100%; }
.certificate-foot p { margin: 0; }
.certificate-foot-label { color: var(--ar-secondary-color); font-size: 1.2cqw; text-transform: uppercase; letter-spacing: .08em; }
.certificate-foot-value { color: var(--ar-heading-color); font-size: 1.6cqw; font-weight: 600; }
.certificate-foot-note { color: var(--ar-secondary-color); font-size: 1.2cqw; overflow-wrap: anywhere; }

@page { size: A4 landscape; margin: 0; }
@media print {
  .certificate-page { background: #fff !important; }
  .certificate-bar,
  .certificate-verified,
  .certificate-help,
  .certificate-more,
  #wpadminbar { display: none !important; }
  .certificate-page .container { max-width: none; margin: 0; padding: 0 !important; }
  .certificate-page .page-wrapper { margin: 0 !important; padding: 0 !important; }
  html,
  .certificate-page { height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
  .certificate-page main,
  .certificate-page .page-wrapper { min-height: 0 !important; }
  /* A little under the sheet's 210mm, so that rounding never starts a second, empty page. */
  .certificate { width: 297mm; max-width: none; height: 208mm; margin: 0; border-radius: 0; box-shadow: none; overflow: hidden; break-inside: avoid; break-after: avoid; }
  .certificate-frame { width: 297mm; height: 208mm; border-radius: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- Verify a certificate (templates/verify.php) ---- */
.verify-form { max-width: 34rem; }
.verify-form .form-control { text-transform: uppercase; letter-spacing: .06em; }
.verify-form .form-control::placeholder { letter-spacing: .06em; }


/* ---- Paid work: contracts, billing, pipeline (includes/contracts.php, billing.php, deals.php) ---- */
/* Three money tiles instead of six counts */
.billing-stats { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 576px) {
  .billing-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* The forecast: the value of a month's deals, and inside it what is expected */
.forecast-bar { height: .75rem; border-radius: 50rem; background-color: var(--ar-gray-100); }
.forecast-bar-value { display: block; height: 100%; min-width: 2px; border-radius: 50rem; background-color: rgba(var(--ar-primary-rgb), .25); }
.forecast-bar-expected { display: block; height: 100%; border-radius: 50rem; background-color: var(--ar-primary); }
/* An invoice prints on one page, without the app around it */
@media print {
  .app-header, .app-sidebar, .app-side, .app-footer, .app-menu-bar, #wpadminbar { display: none !important; }
  body.app { background: #fff !important; }
  .invoice { border: 0 !important; box-shadow: none !important; }
}

/* ---- Integrations (templates/integrations.php) ---- */
/* The API documentation: room under a code block, and addresses of the API that can be read */
.integration-docs pre { margin-bottom: 1rem; }
.integration-docs dt code { font-size: .875rem; }

/* ---- Score, stars, objectives (includes/scoring.php, includes/objectives.php) ---- */
.score-number { color: var(--ar-primary); font-size: 2.5rem; font-weight: 700; line-height: 1; }
.score-stars { color: #b7791f; white-space: nowrap; }
.score-parts { max-width: 32rem; }
.score-parts > li + li { margin-top: .75rem; }
.score-bar { height: .5rem; margin-top: .25rem; border-radius: 50rem; background-color: var(--ar-gray-200); }
.score-bar > span { display: block; height: 100%; border-radius: 50rem; background-color: var(--ar-primary); }

/* ---- The LinkedIn tasks on an assignment page (includes/linkedin.php) ---- */
#linkedin-task .btn { white-space: normal; }
#linkedin-task dl { max-width: 44rem; }

/* ---- The Terms in a dialog on /signup (js/terms-dialog.js) ---- */
.terms-dialog {
  width: calc(100% - 2rem);
  max-width: 46rem;
  height: calc(100% - 2rem);
  max-height: 44rem;
  padding: 0;
  border: 0;
  border-radius: var(--ar-border-radius-xl, 1rem);
  background-color: #fff;
  color: var(--ar-body-color);
  box-shadow: 0 1rem 3rem rgba(11, 15, 25, .25);
  overflow: hidden;
}
.terms-dialog[open] { display: flex; flex-direction: column; }
.terms-dialog::backdrop { background-color: rgba(11, 15, 25, .5); }
.terms-dialog-head,
.terms-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; flex: none; }
.terms-dialog-head { border-bottom: 1px solid var(--ar-border-color, #e2e5f1); }
.terms-dialog-foot { justify-content: flex-end; border-top: 1px solid var(--ar-border-color, #e2e5f1); }
.terms-dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem; }
.terms-dialog-body .landing-legal { margin-bottom: 0 !important; }
.terms-dialog-panel[hidden] { display: none; }
.terms-dialog-foot [hidden] { display: none; }

/* ---- A select that can be searched by typing (js/select-search.js) ---- */
.select-search { position: relative; }
.select-search-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none;
}
.select-search > input.form-select { cursor: text; text-overflow: ellipsis; }
.select-search-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + .25rem);
  left: 0;
  right: 0;
  max-height: 17rem;
  margin: 0;
  padding: .375rem;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--ar-border-color, #e2e5f1);
  border-radius: var(--ar-border-radius-lg, .75rem);
  background-color: #fff;
  box-shadow: 0 .5rem 1.5rem rgba(11, 15, 25, .12);
}
.select-search-list[hidden] { display: none; }
.select-search-option,
.select-search-none { padding: .5rem .75rem; border-radius: var(--ar-border-radius, .5rem); color: var(--ar-gray-900); }
.select-search-option { cursor: pointer; }
.select-search-option.is-active { background-color: var(--ar-gray-100, #f3f6ff); }
.select-search-option[aria-selected="true"] { font-weight: 600; color: var(--ar-primary); }
.select-search-none { color: var(--ar-gray-600); }