/* Cloud Pharmacy widget base theme. Opt-in: <link rel="stylesheet" href="/widgets/_shared/cp-theme.css">
   Provides house typography, neutral surfaces and a default button.
   Widget-specific palettes should be declared AFTER this file and will override. */
:root {
  --cp-font: system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --cp-heading-font: 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', system-ui, sans-serif;
  --cp-bg: #EDF1F7;
  --cp-surface: #FFFFFF;
  --cp-border: #D4DCE8;
  --cp-text: #18273A;
  --cp-muted: #56697A;
  --cp-accent: #3D49B2;
  --cp-radius: 14px;
  --cp-shadow: 0 2px 14px rgba(18, 38, 58, 0.07);
}

body {
  font-family: var(--cp-font);
  color: var(--cp-text);
  /* Transparent by default so a widget blends into the page it is embedded in.
     A widget that genuinely needs a panel background should set it on its own
     wrapper, not on body. --cp-bg remains available for that. */
  background: transparent;
}

.cp-btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  padding: 0.65rem 1.1rem;
  border: 0;
  border-radius: 9px;
  background: var(--cp-accent);
  color: #fff;
  cursor: pointer;
}

/* Direct-visit banner, injected by cp-widget.js when a widget is opened
   top-level (not embedded). Hidden case needs no rule: it is simply never
   inserted when embedded. */
.cp-frame-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--cp-border);
  background: #fff;
}
.cp-frame-banner__logo {
  height: 30px;
  width: auto;
  display: block;
}
.cp-frame-banner:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 2px;
}