body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* Revido brand face — same files production revido.cz serves. */
@font-face {
  font-family: 'RiformaLL';
  src: url('/fonts/RiformaLL-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RiformaLL';
  src: url('/fonts/RiformaLL-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Scoped to the redesigned community screens (/druzstvo/*) so the default,
   pruvodce, toman-finance and elektrina-snadno flows are unaffected. */
.revido-scope {
  @apply text-revido-ink;
  font-family: 'RiformaLL', 'RiformaLLTT', Inter, Roboto, Helvetica, Arial, sans-serif;
  text-align: left;
}

.revido-scope input::placeholder,
.revido-scope textarea::placeholder {
  @apply text-revido-subtle;
}

/* RiformaLL ships only 400 and 500. Anything heavier renders as synthetic bold,
   which is what made headings look wrong next to the design — it uses 500
   throughout. Map the heavy weights down inside the scope.

   `.font-semibold` is deliberately absent. The mock's body font is Riforma with
   the same two weights, and it sets font-weight:600 on its small pill/label
   elements — the results count chip, NEJVÝHODNĚJŠÍ, DOPORUČUJEME and the filter
   group headings. The synthetic bold is what the design renders there, so
   mapping it to 500 made those four read lighter than the mock. They are the
   only uses of font-semibold in the flow. */
.revido-scope .font-bold,
.revido-scope .font-extrabold,
.revido-scope .font-black,
.revido-scope .font-weight-bold,
.revido-scope strong,
.revido-scope b,
.revido-scope h1,
.revido-scope h2,
.revido-scope h3,
.revido-scope h4,
.revido-scope h5,
.revido-scope h6 {
  font-weight: 500 !important;
}

/* Bootstrap ships spacing utilities under the same class names as Tailwind but
   on a different scale, and it marks them !important, so Bootstrap wins. Steps
   0, 1 and 2 agree; 3, 4 and 5 do not (Bootstrap 1/1.5/3rem vs Tailwind
   0.75/1/1.25rem). That silently inflated spacing across the redesign.

   The redesign therefore writes those three steps as arbitrary values —
   px-[1rem] rather than px-4 — because Bootstrap defines no such class, so
   there is nothing to collide with. Overriding .px-4 here instead would have
   beaten the responsive variants too: an element with "px-4 md:px-10" would
   keep the phone gutter at every width. */

/* RevidoOfferItem draws the card, so Bootstrap's accordion chrome around it has
   to go — otherwise the row sits inside a second card with its own border,
   background and chevron. The body's padding goes too: the design puts the
   expanded detail inside the card's own padding, under a hairline. */
.revido-scope .revido-offer-item,
.revido-scope .revido-offer-item .accordion-header,
.revido-scope .revido-offer-item .accordion-body {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.revido-scope .revido-offer-item .accordion-body {
  padding: 0 !important;
}

.revido-scope .revido-offer-header .accordion-button {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.revido-scope .revido-offer-header .accordion-button::after {
  display: none !important;
}

/* react-bootstrap's Accordion wraps each offer row in a structural <h2>, so the
   h1..h6 rule above made the WHOLE row inherit font-weight 500 — including the
   small column labels ("Délka smlouvy", "Měsíční záloha", "Roční náklad"),
   which the mock draws at 400. Put the row back to the normal weight; every
   value inside it sets font-medium explicitly, so only the labels change. */
.revido-scope .revido-offer-header {
  font-weight: 400 !important;
}

/* Results screen. The offer cards and filter rail come from components shared
   with the other flows, so the Revido treatment is applied here by scope rather
   than by branching those components.

   Design: the primary offer action is the yellow pill, not the plum button. */
.revido-scope .bg-srovnat {
  background-color: #F2D661 !important;
  color: #140023 !important;
  border-radius: 168px !important;
}

.revido-scope .bg-srovnat:hover {
  color: #140023 !important;
  opacity: 0.9;
}

/* The offer CTA and its detail toggle. bg-primary resolves to the plum brand
   variable; the design puts the yellow pill here and keeps plum for the toggle. */
.revido-scope .btn-intrst {
  background-color: #F2D661 !important;
  color: #140023 !important;
  border-radius: 168px !important;
}

.revido-scope .c-tg {
  background-color: #EFEBF9 !important;
  color: #3C0F64 !important;
}

/* Top-3 rows are plain white cards in the design — the yellow badge marks them,
   not a green wash. */
.revido-scope .accordion-button,
.revido-scope .accordion-button.collapsed {
  background-color: #FFFFFF !important;
  border-color: #EDEAF2 !important;
}

/* Top-3 ribbon: the rank badge becomes the lavender chip and the label the
   yellow pill, replacing the green pair. */
.revido-scope .bg-green-500.rounded-full {
  background-color: #EFEBF9 !important;
  color: #3C0F64 !important;
}

.revido-scope .bg-green-500.rounded-md {
  background-color: #F2D661 !important;
  color: #140023 !important;
}

/* The design uses a single, soft card shadow. Shared components brought in
   shadow-md/lg/xl, which read far too heavy next to it — normalise them inside
   the scope so the other flows keep their own depth. */
.revido-scope .shadow,
.revido-scope .shadow-sm,
.revido-scope .shadow-md,
.revido-scope .shadow-lg,
.revido-scope .shadow-xl,
.revido-scope .shadow-2xl {
  box-shadow: 0 4px 16px rgba(20, 0, 35, 0.06) !important;
}

/* public/assets/css/porovnejenergie.css sets `h1..h6 { font-family: Inter
   !important }` globally, which outranks the font-revido utility class. Undo it
   inside the redesigned scope only — the other flows keep Inter headings. */
.revido-scope h1,
.revido-scope h2,
.revido-scope h3,
.revido-scope h4,
.revido-scope h5,
.revido-scope h6 {
  font-family: 'RiformaLL', 'RiformaLLTT', Inter, Roboto, Helvetica, Arial, sans-serif !important;
}

@keyframes revido-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.revido-marquee-track {
  animation: revido-marquee 38s linear infinite;
}

.revido-marquee-track:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .revido-marquee-track {
    animation: none;
  }
}

.details-title-class {
  @apply text-sm md:text-lg font-extrabold;
}

.container-1400 {
  @apply max-w-1400 mx-auto px-4;
}
.tooltip.revido-tooltip {
  position: absolute;
  z-index: 1080;
  display: block;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s linear;
}

.tooltip.revido-tooltip.show {
  opacity: 1;
}

.tooltip.revido-tooltip .tooltip-inner {
  max-width: 260px;
  padding: 8px 12px;
  text-align: left;
  color: #fff;
  background-color: #140023;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(20, 0, 35, 0.18);
}

.tooltip.revido-tooltip .tooltip-arrow {
  display: none;
}