/*
 * Ledron Studio 6.1 / 6.2 / 6.3
 * Dedicated "Projekty graficzne" service page.
 * Reuses the "Strony internetowe" component system (type cards, toggle
 * grids, progress bar, FAQ, closing CTA) and adds only the pieces that
 * page does not already provide: icon type-cards, compact pill fields,
 * a fake select, the checked "w zestawie" list, the highlighted note
 * box, the connected order timeline and the icon feature row.
 *
 * Loaded on every page (last in the queue), so it also carries several
 * site-wide "USŁUGI" mega menu fixes: a hover bridge that stops the
 * dropdown from closing while the pointer crosses the gap between the
 * toggle and the panel, a contrast fix so the card labels stay white
 * when their background turns black on hover, and (6.3) a matching fix
 * for the top-level nav links / toggle itself on the white-header
 * service pages, which previously inherited the dark-header hover
 * style (white text) and disappeared on hover.
 */

.ledron-mega-panel::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

body.ledron-web-service-page-active .ledron-desktop-nav .ledron-mega-card:hover,
body.ledron-web-service-page-active .ledron-desktop-nav .ledron-mega-card:focus {
  color: #fff !important;
}

/* 6.3 — the base (dark-header) hover style for top-level nav links and the
   "Usługi" toggle sets color:#fff, which is invisible on the white header
   used on service pages. Mirror the fix that already exists for the "O nas"
   page (also white-header) here, scoped to the service pages. */
body.ledron-web-service-page-active .ledron-desktop-nav > ul > li > a:hover,
body.ledron-web-service-page-active .ledron-desktop-nav > ul > li > a:focus,
body.ledron-web-service-page-active .ledron-desktop-services.is-open > .ledron-mega-toggle,
body.ledron-web-service-page-active .ledron-mega-toggle:hover,
body.ledron-web-service-page-active .ledron-mega-toggle:focus {
  background: #f3f0eb !important;
  border-color: #dfd9d1 !important;
  color: #111 !important;
}

/* 6.3 — premium chevron: a thin SVG stroke replaces the plain "⌄"
   character. The wrapping <span> is unchanged so the existing
   color/rotate-on-open rules below keep working without modification. */
.ledron-mega-chevron {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.ledron-mega-chevron svg {
  display: block;
  width: 9px;
  height: 6px;
}

/* 6.3.2 — the mobile header cart icon (and account icon, hidden below
   1024px but fixed defensively too) went invisible on the white-header
   pages (service pages + "O nas"): a mobile rule
   (body.ledron-starter-active .elementor .ledron-real-cart) re-applies a
   translucent white background meant for the default dark header, and it
   outranks the desktop-only solid-white background rule for these pages
   by specificity — so on mobile the icon kept its dark (#111) glyph color
   from the white-header rule but lost its light backdrop, going dark-on-
   dark against the still-dark mobile bar. Restore a solid light pill with
   enough specificity to win at every width these pages use it. */
@media (max-width: 1024px) {
  body.ledron-web-service-page-active .elementor .ledron-header-actions .ledron-real-account,
  body.ledron-web-service-page-active .elementor .ledron-header-actions .ledron-real-cart,
  body.ledron-about-page-active .elementor .ledron-header-actions .ledron-real-account,
  body.ledron-about-page-active .elementor .ledron-header-actions .ledron-real-cart {
    background: #fff !important;
    border-color: #dedbd5 !important;
    color: #111 !important;
  }

  body.ledron-web-service-page-active .elementor .ledron-header-actions .ledron-real-cart b,
  body.ledron-about-page-active .elementor .ledron-header-actions .ledron-real-cart b {
    color: #fff !important;
  }
}

/* "01 / Czego potrzebujesz" cards — redesigned (6.3.1) to match the
   left-aligned, bordered-card language used by "Co otrzymujesz" and "Po
   zamówieniu" elsewhere on this page, instead of the plain centered
   icon-over-text layout from the first 6.3 pass. CSS Grid areas reposition
   the existing icon/number/title/copy/price/radio children — no markup
   changes needed. Selected state now reads via a left accent bar + a
   checkmark dot instead of a heavier full-border + empty-ring radio. */
body.ledron-graphic-service-page-active .elementor .ledron-graphic-types-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin-top: 24px !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-graphic-type-card {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-areas: "icon number" "title title" "copy copy" "price radio" !important;
  column-gap: 12px !important;
  row-gap: 0 !important;
  min-height: 0 !important;
  padding: 18px 18px 16px !important;
  text-align: left !important;
  border-radius: 10px !important;
  border-left: 3px solid transparent !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-graphic-type-card:hover {
  border-left-color: rgba(255, 56, 24, 0.35) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(17, 16, 15, 0.07) !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-graphic-type-card.is-selected {
  border-left-color: var(--web-red, #ff3818) !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-graphic-type-icon {
  grid-area: icon !important;
  align-self: center !important;
  position: static !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255, 56, 24, 0.09) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 56, 24, 0.14) !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-graphic-type-icon img {
  width: 15px !important;
  height: 15px !important;
  object-fit: contain !important;
  opacity: 0.9;
}

body.ledron-graphic-service-page-active .elementor .ledron-graphic-type-card.is-selected .ledron-graphic-type-icon {
  background: rgba(255, 56, 24, 0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 56, 24, 0.3) !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-graphic-type-card .ledron-web-type-number {
  grid-area: number !important;
  align-self: center !important;
  justify-self: end !important;
  position: static !important;
  margin: 0 !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-graphic-type-card .ledron-web-type-number p {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  color: var(--web-muted, #66615a) !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-graphic-type-card .ledron-web-type-title {
  grid-area: title !important;
  margin-top: 12px !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-graphic-type-card .ledron-web-type-title .elementor-heading-title {
  font-size: 13.5px !important;
  letter-spacing: 0.01em;
  line-height: 1.3 !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-graphic-type-card .ledron-web-type-copy {
  grid-area: copy !important;
  max-width: none !important;
  margin-top: 5px !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-graphic-type-card .ledron-web-type-copy p {
  font-size: 11px !important;
  line-height: 1.45 !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-graphic-type-card .ledron-web-type-price {
  grid-area: price !important;
  align-self: center !important;
  position: static !important;
  margin-top: 14px !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-graphic-type-card .ledron-web-type-price p {
  font-size: 11px !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-graphic-type-card .ledron-web-type-radio {
  grid-area: radio !important;
  align-self: center !important;
  justify-self: end !important;
  position: static !important;
  margin: 14px 0 0 !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-graphic-type-card .ledron-web-type-radio span {
  position: relative !important;
  width: 17px !important;
  height: 17px !important;
  border-radius: 50% !important;
  border: 1.5px solid #cfcac2 !important;
  background: transparent !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
  display: block !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-graphic-type-card.is-selected .ledron-web-type-radio span {
  border-color: var(--web-red, #ff3818) !important;
  background: var(--web-red, #ff3818) !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-graphic-type-card.is-selected .ledron-web-type-radio span::after {
  content: "\2713" !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  line-height: 1 !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* Light pricing-card theme for "Obsługa stron" — ledron_starter_care_plan()
   already exists for the homepage's dark plan cards; this page needs a
   light, bordered version instead, so it's overridden here rather than
   touching the shared dark component used elsewhere. */
body.ledron-web-service-page-active .elementor .ledron-care-plans {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 18px !important;
  margin-top: 36px !important;
}

body.ledron-web-service-page-active .elementor .ledron-care-plan {
  position: relative !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 30px 26px 26px !important;
  background: #fff !important;
  border: 1px solid var(--web-line, #dedbd5) !important;
  border-radius: 14px !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

body.ledron-web-service-page-active .elementor .ledron-care-plan:hover {
  transform: translateY(-4px) !important;
  border-color: #bdb8b0 !important;
}

body.ledron-web-service-page-active .elementor .ledron-care-plan.is-featured {
  border-color: var(--web-red, #ff3818) !important;
  box-shadow: 0 18px 46px rgba(255, 56, 24, 0.12) !important;
}

body.ledron-web-service-page-active .elementor .ledron-care-plan.is-featured::before {
  content: "NAJCZĘŚCIEJ WYBIERANY";
  display: inline-block !important;
  position: absolute !important;
  top: -12px !important;
  left: 26px !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  white-space: nowrap !important;
  overflow: visible !important;
  padding: 5px 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--web-red, #ff3818) !important;
  color: #fff !important;
  font-size: 9px !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: 2;
}

/* Selectable pricing cards ("Obsługa stron"): give the currently chosen
   plan the same visual weight as the "most popular" badge treatment,
   even when it isn't the featured card. */
body.ledron-web-service-page-active .elementor .ledron-care-plan[class*="type-slug-"] {
  cursor: pointer !important;
}

body.ledron-web-service-page-active .elementor .ledron-care-plan.is-selected:not(.is-featured) {
  border-color: var(--web-red, #ff3818) !important;
  box-shadow: 0 18px 46px rgba(255, 56, 24, 0.1) !important;
}

body.ledron-web-service-page-active .elementor .ledron-care-plan-eyebrow p {
  color: var(--web-red, #ff3818) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
}

body.ledron-web-service-page-active .elementor .ledron-care-plan-title {
  margin-top: 14px !important;
}

body.ledron-web-service-page-active .elementor .ledron-care-plan-title .elementor-heading-title {
  color: var(--web-ink, #11100f) !important;
  font-family: Oswald, Impact, sans-serif !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

body.ledron-web-service-page-active .elementor .ledron-care-plan-price {
  margin-top: 16px !important;
  padding-bottom: 22px !important;
  border-bottom: 1px solid var(--web-line, #dedbd5) !important;
}

body.ledron-web-service-page-active .elementor .ledron-care-plan-price .elementor-heading-title {
  color: var(--web-ink, #11100f) !important;
  font-size: 26px !important;
  line-height: 1 !important;
}

body.ledron-web-service-page-active .elementor .ledron-care-plan-price small {
  color: var(--web-muted, #66615a) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

body.ledron-web-service-page-active .elementor .ledron-care-plan-list {
  margin-top: 20px !important;
}

body.ledron-web-service-page-active .elementor .ledron-care-plan-list ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.ledron-web-service-page-active .elementor .ledron-care-plan-list li {
  position: relative !important;
  margin: 0 0 12px !important;
  padding-left: 20px !important;
  color: var(--web-muted, #66615a) !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

body.ledron-web-service-page-active .elementor .ledron-care-plan-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--web-red, #ff3818);
  font-weight: 900;
}

body.ledron-web-service-page-active .elementor .ledron-care-plan-button {
  width: 100% !important;
  margin-top: auto !important;
  padding-top: 22px !important;
}

body.ledron-web-service-page-active .elementor .ledron-care-plan-button .elementor-button {
  width: 100% !important;
  min-height: 46px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid var(--web-ink, #11100f) !important;
  color: var(--web-ink, #11100f) !important;
}

body.ledron-web-service-page-active .elementor .ledron-care-plan.is-featured .ledron-care-plan-button .elementor-button {
  background: var(--web-red, #ff3818) !important;
  border-color: var(--web-red, #ff3818) !important;
  color: #fff !important;
}

@media (max-width: 1024px) {
  body.ledron-web-service-page-active .elementor .ledron-care-plans {
    grid-template-columns: 1fr !important;
  }
}

/* Compact "monthly report" preview cards on the "Obsługa stron" page */
.ledron-graphic-report-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 40px !important;
}

.ledron-graphic-report-card {
  padding: 22px 22px 18px !important;
  background: #171718 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
}

/* Specificity note: a site-wide rule
   (body.ledron-starter-active .elementor .elementor-widget-heading
   .elementor-heading-title { color: var(--ledron-black) !important; })
   outranks a plain ".ledron-graphic-report-title .elementor-heading-title"
   selector, which is what made this title invisible (near-black on the
   dark card) in 6.3 despite the color:#fff rule being present. Matching
   its specificity here (body + 4 classes) is what actually wins the
   cascade. */
body.ledron-web-service-page-active .elementor .ledron-graphic-report-card .ledron-graphic-report-title .elementor-heading-title {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}

.ledron-graphic-report-row {
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ledron-graphic-report-row .elementor-widget-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ledron-graphic-report-row:first-of-type {
  border-top: none;
  margin-top: 16px !important;
  padding-top: 0 !important;
}

.ledron-graphic-report-row p {
  margin: 0;
  font-size: 11px;
}

.ledron-graphic-report-row .ledron-graphic-report-label {
  color: rgba(255, 255, 255, 0.55);
}

.ledron-graphic-report-row .ledron-graphic-report-value {
  color: #fff;
  font-weight: 700;
  text-align: right;
}

@media (max-width: 1024px) {
  .ledron-graphic-report-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Each top-level "czego potrzebujesz" card reveals its own config
   panel — a logo package doesn't ask for a flyer format or page count,
   a flyer doesn't ask for a logo package scope. Only the panel that
   matches the selected card is shown. */
.ledron-graphic-field-panel {
  display: none;
}

.ledron-graphic-field-panel.is-active {
  display: block;
}

/* Compact pill fields: "Typ projektu" / "Liczba stron" — a bit more
   breathing room between one field group and the next (6.11: fields used
   to read as glued together, e.g. "Format" straight into "Liczba
   poprawek"). */
.ledron-graphic-pill-row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0 30px;
}

.ledron-graphic-pill {
  position: relative;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 10px 20px;
  border: 1px solid var(--web-line, #dedbd5);
  border-radius: 999px;
  background: #fff;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.ledron-graphic-pill-label {
  flex: none;
}

.ledron-graphic-pill-label p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--web-ink, #11100f);
  white-space: nowrap;
}

.ledron-graphic-pill:hover {
  border-color: var(--web-red, #ff3818);
}

.ledron-graphic-pill.is-selected {
  border-color: var(--web-red, #ff3818);
  background: var(--web-red, #ff3818);
}

.ledron-graphic-pill.is-selected .ledron-graphic-pill-label p {
  color: #fff;
}

/* A pill carrying its own "i" tooltip (e.g. "Odwzorowanie logo klienta")
   needs the info button to sit inline without breaking the pill shape. */
.ledron-graphic-pill.has-info {
  padding-right: 12px;
}

.ledron-graphic-pill .ledron-web-info {
  display: inline-flex !important;
  flex: none !important;
}

.ledron-graphic-pill.is-selected .ledron-web-info-button {
  border-color: #fff !important;
}

/* Fake "Format" select */
.ledron-graphic-format-field {
  margin: 12px 0 30px;
  max-width: 220px;
}

/* Prominent "didn't find what you need" callout below the type grid — a
   real visible section (not a small inline note) with its own CTA button,
   per explicit feedback that the earlier one-line version read as an
   afterthought. Subtle hover interactivity (lift, glow, icon nudge) makes
   it feel like a live, clickable invitation rather than a static box. */
.ledron-graphic-not-found-section {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 32px !important;
  padding: 28px 32px;
  border: 1px solid #f0d9d0;
  border-radius: 16px;
  background: linear-gradient(135deg, #fdf3ef 0%, #fdf6f3 100%);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.ledron-graphic-not-found-section::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 56, 24, 0.08) 0%, rgba(255, 56, 24, 0) 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.ledron-graphic-not-found-section:hover {
  border-color: rgba(255, 56, 24, 0.35);
  box-shadow: 0 16px 36px rgba(17, 16, 15, 0.08);
  transform: translateY(-3px);
}

.ledron-graphic-not-found-section:hover::before {
  opacity: 1;
}

.ledron-graphic-not-found-icon-wrap {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 56, 24, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 56, 24, 0.16);
  transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.ledron-graphic-not-found-section:hover .ledron-graphic-not-found-icon-wrap {
  transform: scale(1.08) rotate(-6deg);
  background: rgba(255, 56, 24, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 56, 24, 0.28);
}

.ledron-graphic-not-found-icon-wrap img {
  width: 21px !important;
  height: 21px !important;
  object-fit: contain;
  opacity: 0.92;
}

.ledron-graphic-not-found-copy-wrap {
  min-width: 0;
  flex: 1 1 280px;
}

.ledron-graphic-not-found-heading .elementor-heading-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--web-ink, #11100f);
}

.ledron-graphic-not-found-text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #56514b;
}

.ledron-graphic-not-found-cta {
  flex: none;
  position: relative;
  z-index: 1;
}

.ledron-graphic-not-found-cta .elementor-button {
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ledron-graphic-not-found-cta .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(255, 56, 24, 0.3);
}

@media (max-width: 767px) {
  .ledron-graphic-not-found-section {
    flex-direction: column;
    align-items: stretch;
    padding: 22px;
    gap: 14px;
  }

  .ledron-graphic-not-found-icon-wrap {
    width: 40px;
    height: 40px;
  }

  .ledron-graphic-not-found-icon-wrap img {
    width: 18px !important;
    height: 18px !important;
  }

  .ledron-graphic-not-found-cta .elementor-button {
    width: 100%;
    justify-content: center;
  }
}

/* Section header dividing the field pickers from "W ZESTAWIE" / "DODATKI"
   — previously used the exact same label style as an ordinary field label,
   so it read as glued onto whatever field came right before it. */
.ledron-graphic-section-label {
  margin-top: 30px !important;
  padding-top: 22px;
  border-top: 1px solid var(--web-line, #dedbd5);
}

.ledron-graphic-section-label p {
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
}

.ledron-graphic-select-wrap {
  position: relative;
}

.ledron-graphic-select-wrap::after {
  content: "▾";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--web-ink, #11100f);
  font-size: 11px;
}

.ledron-graphic-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--web-ink, #11100f);
  padding: 12px 40px 12px 18px;
  border: 1px solid var(--web-line, #dedbd5);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}

.ledron-graphic-select:focus {
  outline: none;
  border-color: var(--web-red, #ff3818);
}

/* Stepper ("Liczba poprawek" etc.) needs the same extra breathing room as
   the pill rows and select field above. */
.ledron-graphic-field-panel .ledron-web-count {
  margin: 12px 0 30px;
}

/* Sub-field revealed only while a specific pill is selected elsewhere in
   the panel (e.g. "Wariant ulotki" only matters once "Ulotka" is picked). */
.ledron-graphic-conditional-field {
  display: none;
}

.ledron-graphic-conditional-field.is-visible {
  display: block;
}

/* Page-count slider used for the katalog/broszura pricing tiers — styled
   as a thicker "modern" track with a red filled portion up to the thumb
   (the fill is a background-image gradient whose stop JS updates on every
   input event via the --range-fill CSS custom property; see
   initGraphicServicePage() in ledron-starter.js). */
.ledron-graphic-range-field {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0 8px;
}

.ledron-graphic-range-input-wrap {
  width: 100%;
  padding: 4px 0;
}

.ledron-graphic-range {
  --range-fill: 0%;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: linear-gradient(
    to right,
    var(--web-red, #ff3818) 0%,
    var(--web-red, #ff3818) var(--range-fill),
    #eae7e1 var(--range-fill),
    #eae7e1 100%
  );
  outline: none;
}

.ledron-graphic-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--web-red, #ff3818);
  box-shadow: 0 3px 10px rgba(17, 16, 15, 0.25);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.ledron-graphic-range::-webkit-slider-thumb:hover,
.ledron-graphic-range:focus-visible::-webkit-slider-thumb {
  transform: scale(1.12);
}

.ledron-graphic-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--web-red, #ff3818);
  box-shadow: 0 3px 10px rgba(17, 16, 15, 0.25);
  cursor: pointer;
}

.ledron-graphic-range::-moz-range-progress {
  background: var(--web-red, #ff3818);
  height: 8px;
  border-radius: 999px;
}

.ledron-graphic-range::-moz-range-track {
  background: #eae7e1;
  height: 8px;
  border-radius: 999px;
}

.ledron-graphic-range-value p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--web-ink, #11100f);
}

.ledron-graphic-range-value .ledron-graphic-range-count {
  color: var(--web-red, #ff3818);
  font-size: 15px;
}

.ledron-graphic-range-value .ledron-graphic-range-cover {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #8a8478;
}

.ledron-graphic-range-hint p {
  margin: 0 0 22px;
  font-size: 11px;
  font-weight: 500;
  color: #8a8478;
}

.ledron-graphic-range-individual-note {
  display: none;
  margin: 0 0 22px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fff4f1;
}

.ledron-graphic-range-individual-note.is-visible {
  display: block;
}

.ledron-graphic-range-individual-note p {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--web-ink, #11100f);
}

/* "i" info tooltip on addons/pills — same component as the "Strony
   internetowe" page (ledron-starter.css), ported here since this page
   carries a different active body class. */
body.ledron-graphic-service-page-active .elementor .ledron-web-info {
  position: relative !important;
  z-index: 9 !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-web-info-button {
  width: 21px !important;
  height: 21px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1px solid #c8c2ba !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #3b3732 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font: 700 10px/1 Inter, Arial, sans-serif !important;
  transition: border-color .2s ease, background .2s ease, color .2s ease !important;
  flex: none !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-web-info-button:hover,
body.ledron-graphic-service-page-active .elementor .ledron-web-info.is-open .ledron-web-info-button {
  border-color: #11100f !important;
  background: #11100f !important;
  color: #fff !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-web-info-tooltip {
  position: absolute !important;
  z-index: 30 !important;
  width: 230px !important;
  right: -8px !important;
  bottom: calc(100% + 10px) !important;
  padding: 11px 12px !important;
  border-radius: 8px !important;
  background: #11100f !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.2) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(5px) !important;
  font-size: 9px !important;
  line-height: 1.45 !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-web-info-tooltip::after {
  content: "" !important;
  position: absolute !important;
  top: 100% !important;
  right: 13px !important;
  border: 6px solid transparent !important;
  border-top-color: #11100f !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-web-info.is-open .ledron-web-info-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* An addon carrying its own "i" tooltip (e.g. "Rozbudowany znak graficzny")
   is the 4th child of .ledron-addon's grid, which only defines 3 columns —
   without an explicit column the tooltip badge fell through to a new grid
   row, dropping the "i" onto its own line below the addon. Give it a 4th
   column so it stays inline with the title and price. */
body.ledron-graphic-service-page-active .elementor .ledron-addon.has-info {
  grid-template-columns: 22px 1fr auto auto !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-addon.has-info .ledron-web-info {
  grid-column: 4 !important;
  grid-row: 1 !important;
  flex: none !important;
}

/* "W zestawie" checked list */
.ledron-graphic-included-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  margin: 10px 0 22px;
}

.ledron-graphic-included-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
}

.ledron-graphic-check-icon span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: var(--web-red, #ff3818);
  color: #fff;
  font-size: 10px;
  line-height: 1;
}

.ledron-graphic-check-label p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--web-ink, #11100f);
}

/* Addon checkbox grid ("Dodatki opcjonalne") reuses .ledron-addon styling */
.ledron-graphic-addons-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 22px;
}

/* Same checkbox component reused for a plain multi-select field (e.g.
   "Platformy") that carries no price of its own. */
.ledron-graphic-addons-grid.no-price .ledron-addon-price {
  display: none;
}

/* Addon only relevant while a specific pill is selected elsewhere in the
   panel (e.g. notesy-only "Indywidualny projekt okładki") — see
   refreshConditionalAddonVisibility() in ledron-starter.js. */
.ledron-addon.is-hidden-by-condition {
  display: none !important;
}

/* Highlighted note box in the summary card */
.ledron-graphic-info-box {
  margin: 16px 0;
  padding: 16px 18px;
  border-radius: 10px;
  background: #fdece4;
}

.ledron-graphic-info-box p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--web-ink, #11100f);
}

/* Small "Ulotka lub plakat" line under the config heading */
.ledron-graphic-config-subtitle-text {
  margin: 6px 0 26px;
  font-size: 13px;
  font-weight: 600;
  color: var(--web-muted, #66615a);
}

/* "Po zamówieniu" connected timeline */
/* "Po zamówieniu" — bordered cards instead of a thin connecting-line
   timeline, which read as too spread out on wide screens. Left-aligned
   text scans faster than the previous centered layout. */
.ledron-graphic-order-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.ledron-graphic-order-step {
  position: relative;
  text-align: left;
  padding: 20px 20px 18px;
  border: 1px solid var(--web-line, #dedbd5);
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ledron-graphic-order-step:hover {
  border-color: #bdb8b0;
  box-shadow: 0 14px 30px rgba(17, 16, 15, 0.07);
  transform: translateY(-2px);
}

.ledron-graphic-order-number p {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 0 12px;
  border-radius: 50%;
  background: var(--web-red, #ff3818);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
}

.ledron-graphic-order-title .elementor-heading-title {
  font-size: 14px;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.ledron-graphic-order-copy p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--web-muted, #66615a);
}

.ledron-graphic-quick-row {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.ledron-graphic-quick-pill {
  cursor: pointer;
}

.ledron-graphic-quick-pill p {
  margin: 0;
  padding: 10px 18px;
  border: 1px solid var(--web-line, #dedbd5);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--web-ink, #11100f);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ledron-graphic-quick-pill:hover p {
  border-color: var(--web-red, #ff3818);
}

.ledron-graphic-quick-pill.is-selected p {
  border-color: var(--web-red, #ff3818);
  background: var(--web-red, #ff3818);
  color: #fff;
}

.ledron-graphic-brief-link {
  display: block;
  margin-top: 20px;
  text-align: center;
}

.ledron-graphic-brief-link .elementor-button {
  background: none !important;
  color: var(--web-red, #ff3818) !important;
  font-size: 12px;
  font-weight: 700;
  padding: 0 !important;
}

/* "Co otrzymujesz" — upgraded from a plain 6-across icon row to bordered
   cards (icon + label side by side) with a hover lift, matching the same
   premium language as the type-cards above. */
.ledron-graphic-features-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.ledron-graphic-feature {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px;
  text-align: left;
  padding: 16px 18px;
  border: 1px solid var(--web-line, #dedbd5);
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ledron-graphic-feature:hover {
  border-color: #bdb8b0;
  box-shadow: 0 14px 30px rgba(17, 16, 15, 0.07);
  transform: translateY(-2px);
}

.ledron-graphic-feature-icon {
  width: 40px;
  height: 40px;
  flex: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 56, 24, 0.09);
  box-shadow: inset 0 0 0 1px rgba(255, 56, 24, 0.14);
}

.ledron-graphic-feature-icon img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  opacity: 0.9;
}

.ledron-graphic-feature-label p {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--web-ink, #11100f);
}

/* "Wybrane realizacje" replaced with the homepage's client-logo marquee
   (ledron_starter_client_logos_section()) — a light section, since the
   white logo tiles read better on a pale background than on the dark
   "portfolio carousel" theme this used to borrow. */
.ledron-graphic-logos-section {
  padding: 56px 0 60px !important;
  overflow: hidden !important;
  background: #f8f6f2 !important;
  border-top: 1px solid #e7e2dc !important;
  border-bottom: 1px solid #e7e2dc !important;
}

.ledron-graphic-logos-label p {
  margin: 0 0 10px;
  color: var(--web-muted, #66615a);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.ledron-graphic-logos-heading {
  margin-bottom: 8px !important;
}

.ledron-graphic-logos-heading .elementor-heading-title {
  max-width: 520px;
}

.ledron-graphic-logos-marquee {
  margin-top: 24px;
}

/* Hero image: the "Strony internetowe" hero media component is built
   for a transparent device-mockup PNG sitting in front of decorative
   circles. Our hero is a plain photograph, so the circles just peek
   out around its edges — drop them and let the framed photo stand on
   its own. */
body.ledron-graphic-service-page-active .elementor .ledron-graphic-hero .ledron-web-hero-media {
  min-height: 0 !important;
  display: block !important;
}

body.ledron-graphic-service-page-active .elementor .ledron-graphic-hero .ledron-web-hero-media::before,
body.ledron-graphic-service-page-active .elementor .ledron-graphic-hero .ledron-web-hero-media::after {
  content: none !important;
}

.ledron-graphic-hero-image img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  box-shadow: 0 30px 70px rgba(17, 16, 15, 0.14);
}

@media (max-width: 1024px) {
  .ledron-graphic-included-grid {
    grid-template-columns: 1fr;
  }

  .ledron-graphic-addons-grid {
    grid-template-columns: 1fr;
  }

  .ledron-graphic-features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 12px;
  }

  /* The "01/Czego potrzebujesz" type-card grid and the "Po zamówieniu"
     step cards were previously forced to 3 columns at every viewport
     (no responsive override existed) — the single biggest cause of the
     unreadable mobile layout. Tablet gets 2 columns... */
  body.ledron-graphic-service-page-active .elementor .ledron-graphic-types-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ledron-graphic-order-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }

  .ledron-graphic-order-step:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  /* ...and phones get a single column, full-width. */
  body.ledron-graphic-service-page-active .elementor .ledron-graphic-types-grid {
    grid-template-columns: 1fr !important;
  }

  body.ledron-graphic-service-page-active .elementor .ledron-graphic-type-card {
    padding: 18px 18px 16px !important;
  }

  .ledron-graphic-order-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ledron-graphic-order-step:last-child {
    grid-column: auto;
  }

  .ledron-graphic-features-grid {
    grid-template-columns: 1fr;
  }

  .ledron-graphic-pill-row {
    gap: 8px;
  }

  .ledron-graphic-pill {
    padding: 9px 16px;
  }

  .ledron-graphic-logos-heading .elementor-heading-title {
    max-width: none;
  }

  body.ledron-web-service-page-active .elementor .ledron-care-plans {
    gap: 14px !important;
  }

  /* Tooltip popovers otherwise overflow off the right edge of a phone
     screen; clamp the width and let it hug the left instead of the
     trigger button so it stays fully on-screen. */
  body.ledron-graphic-service-page-active .elementor .ledron-web-info-tooltip {
    width: min(230px, 76vw) !important;
    right: auto !important;
    left: 50% !important;
    transform: translate(-50%, 5px) !important;
  }

  body.ledron-graphic-service-page-active .elementor .ledron-web-info.is-open .ledron-web-info-tooltip {
    transform: translate(-50%, 0) !important;
  }

  .ledron-graphic-pill.has-info {
    padding-right: 10px;
  }

  .ledron-graphic-section-label {
    margin-top: 22px !important;
    padding-top: 16px;
  }

  .ledron-graphic-pill-row,
  .ledron-graphic-format-field,
  .ledron-graphic-field-panel .ledron-web-count {
    margin-bottom: 22px;
  }

  .ledron-graphic-range::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
  }

  .ledron-graphic-range::-moz-range-thumb {
    width: 26px;
    height: 26px;
  }
}

/* 6.3 — sticky live-updating price bar (mobile configurator only). Created
   dynamically by initGraphicServicePage() in ledron-starter.js and appended
   to <body>, so these rules aren't scoped under .elementor. Hidden on
   tablet/desktop; only ever shown once JS has content to put in it. */
.ledron-graphic-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: #fff;
  border-top: 1px solid #e7e2dc;
  box-shadow: 0 -12px 30px rgba(17, 16, 15, 0.1);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.25s ease;
}

.ledron-graphic-sticky-bar.is-visible {
  transform: translateY(0);
}

.ledron-graphic-sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
}

.ledron-graphic-sticky-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.ledron-graphic-sticky-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--web-muted, #66615a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ledron-graphic-sticky-price {
  font-size: 19px;
  font-weight: 800;
  color: var(--web-ink, #11100f);
  letter-spacing: -0.01em;
}

.ledron-graphic-sticky-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--web-red, #ff3818);
  color: #fff !important;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ledron-graphic-sticky-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(255, 56, 24, 0.28);
}

body.ledron-sticky-price-active {
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .ledron-graphic-sticky-bar {
    display: none !important;
  }

  body.ledron-sticky-price-active {
    padding-bottom: 0;
  }
}