.office-live-app .main-menu a.is-active {
  color: #01ad66;
}

.office-live-app header .logo img[src*="logo-op-header.png"] {
  width: 100%;
  height: 43px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 960px) {
  .office-live-app header .logo img[src*="logo-op-header.png"] {
    height: 33px;
  }
}

/* Detail budovy → sekce "Prostory k dispozici": záhlaví sloupců (Plocha, Nájemné,
   Dostupnost, Patro) trochu tučnější, aby se odlišilo od dat pod ním. */
.office-live-app .variants .head .col {
  font-weight: 600;
}

.office-autocomplete {
  position: fixed;
  z-index: 100000;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(40, 70, 104, 0.18);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(21, 43, 56, 0.16);
  padding: 6px;
}

.office-autocomplete[hidden] {
  display: none;
}

.office-autocomplete-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  font: inherit;
  color: #1f3147;
  cursor: pointer;
}

.office-autocomplete-item:hover,
.office-autocomplete-item.is-active {
  background: rgba(1, 173, 102, 0.12);
}

.office-autocomplete-label {
  font-weight: 600;
}

.office-autocomplete-tag {
  flex: 0 0 auto;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #7a8795;
}

.office-live-app .mega-menu {
  display: none;
}

.office-live-app .mega-menu.active,
.office-live-app .mega-menu.is-open,
.office-live-app.menu-open .mega-menu,
body.menu-open .office-live-app .mega-menu {
  display: block;
}

.office-live-app .menu-show.active span,
.office-live-app.menu-open .menu-show span,
body.menu-open .office-live-app .menu-show span {
  background: #787878;
}

.office-live-app.menu-open header .menu-show,
body.menu-open .office-live-app header .menu-show,
body.open-mobile.office-live-app header .menu-show,
body.open-mobile .office-live-app header .menu-show {
  z-index: 1001;
}

.office-live-app.menu-open header .menu-show,
body.menu-open .office-live-app header .menu-show {
  border-color: transparent;
  border-radius: 0;
}

.office-live-app.menu-open header .menu-show span:nth-child(1),
body.menu-open .office-live-app header .menu-show span:nth-child(1) {
  top: 23px;
  left: 50%;
  width: 0%;
}

.office-live-app.menu-open header .menu-show span:nth-child(2),
body.menu-open .office-live-app header .menu-show span:nth-child(2) {
  transform: rotate(45deg);
  top: 19px;
  left: 7px;
  width: 26px;
}

.office-live-app.menu-open header .menu-show span:nth-child(3),
body.menu-open .office-live-app header .menu-show span:nth-child(3) {
  transform: rotate(-45deg);
  top: 19px;
  left: 7px;
  width: 26px;
}

.office-live-app.menu-open header .menu-show span:nth-child(4),
body.menu-open .office-live-app header .menu-show span:nth-child(4) {
  top: 20px;
  left: 50%;
  width: 0%;
}

.office-live-app.menu-open .menu-shadow,
body.menu-open .office-live-app .menu-shadow,
body.open-mobile.office-live-app .menu-shadow,
body.open-mobile .office-live-app .menu-shadow {
  display: block;
  top: 58px;
  background: transparent;
  backdrop-filter: none;
}

.office-live-app.menu-open .mega-menu,
body.menu-open .office-live-app .mega-menu,
body.open-mobile.office-live-app .mega-menu,
body.open-mobile .office-live-app .mega-menu {
  display: block;
  top: 58px;
  pointer-events: none;
}

.office-live-app.menu-open .mega-menu .m-col,
body.menu-open .office-live-app .mega-menu .m-col,
body.open-mobile.office-live-app .mega-menu .m-col,
body.open-mobile .office-live-app .mega-menu .m-col {
  float: none;
  position: relative;
  width: min(360px, calc(100vw - 44px));
  min-width: 0;
  max-width: none;
  margin: 0 12px 0 auto;
  padding: 34px 34px 30px;
  pointer-events: auto;
  text-align: left;
  overflow: hidden;
  border: 1px solid rgba(40, 70, 104, 0.1);
  border-radius: 22px;
  background: linear-gradient(180deg, #fff 0%, #f8fbfa 100%);
  box-shadow: 0 24px 70px rgba(15, 36, 56, 0.24);
}

.office-live-app .mega-menu .m-col .title {
  margin-bottom: 22px;
  color: #284668;
  letter-spacing: 0.05em;
  font-size: 19px;
}

.office-live-app .mega-menu .m-col ul li {
  margin-bottom: 8px;
}

.office-live-app .mega-menu .m-col ul li a {
  display: block;
  padding: 11px 13px;
  border-radius: 12px;
  color: #526579;
  font-size: 18px;
  line-height: 1.35;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.office-live-app .mega-menu .m-col ul li a:hover {
  color: #12324f;
  font-weight: 600;
  background: rgba(1, 173, 102, 0.1);
  transform: translateX(4px);
}

@media (max-width: 767px) {
  .office-live-app.menu-open .menu-shadow,
  body.menu-open .office-live-app .menu-shadow,
  body.open-mobile.office-live-app .menu-shadow,
  body.open-mobile .office-live-app .menu-shadow,
  .office-live-app.menu-open .mega-menu,
  body.menu-open .office-live-app .mega-menu,
  body.open-mobile.office-live-app .mega-menu,
  body.open-mobile .office-live-app .mega-menu {
    top: 52px;
  }

  .office-live-app.menu-open .mega-menu .m-col,
  body.menu-open .office-live-app .mega-menu .m-col,
  body.open-mobile.office-live-app .mega-menu .m-col,
  body.open-mobile .office-live-app .mega-menu .m-col {
    width: calc(100vw - 24px);
    margin: 0 8px 0 auto;
    padding: 28px 24px 24px;
    border-radius: 18px;
  }
}

.office-live-view {
  min-height: 560px;
}

.office-live-app .main-box {
  margin-top: 95px;
}

/* Match the title-photo gap below the header on the sub-pages (o-nás, služby,
   kontakt) to the homepage. The theme gives .sub-header margin-top:140px, but
   .main-box on the homepage is overridden to 95px above — align them so the
   banner sits the same distance from the header everywhere. */
.office-live-app .sub-header {
  margin-top: 95px;
}

@media (max-width: 800px) {
  .office-live-app .main-box {
    margin-top: 40px;
  }

  .office-live-app .sub-header {
    margin-top: 0;
  }
}

/* Kontakt hero: telefon/email jsou odkazy uvnitr h1 nadpisu — at zdedi bilou
   barvu nadpisu misto vychozi modre/podtrzene. */
.office-live-app .sub-header h1 a {
  color: #fff;
  text-decoration: none;
}
.office-live-app .sub-header h1 a:hover {
  color: #01AD66;
}

.office-live-loading,
.office-live-empty {
  padding: 36px;
  color: #637083;
}

.office-live-app .main-slider {
  display: block;
}

.office-live-app .main-slider .item {
  display: block;
}

.office-live-app .main-slider.office-live-main-slider {
  position: relative;
  overflow: hidden;
}

.office-live-app .main-slider.office-live-main-slider .item {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 700ms ease, visibility 700ms ease;
}

.office-live-app .main-slider.office-live-main-slider .item.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

.office-live-app .main-slider.office-live-main-slider .office-live-slider-arrow {
  z-index: 3;
}

.office-live-app .offers.offers-slider {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.office-live-app .offers.offers-slider.office-live-offers-carousel {
  --office-live-offers-visible: 4;
  display: block;
  position: relative;
  width: calc(100% + 20px);
  margin-left: -10px;
  margin-top: 20px;
  padding-bottom: 56px;
  overflow: visible;
}

.office-live-app .modal .terms p,
.office-live-app .prostor-right .form-offer .terms p {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0 6px;
}

.office-live-app .modal .terms .wpcf7-form-control-wrap,
.office-live-app .prostor-right .form-offer .terms .wpcf7-form-control-wrap {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.office-live-app .modal .terms .wpcf7-list-item,
.office-live-app .prostor-right .form-offer .terms .wpcf7-list-item {
  margin: 0 8px 0 0;
}

.office-live-app .modal .terms .wpcf7-list-item label,
.office-live-app .prostor-right .form-offer .terms .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 0;
}

.office-live-app .modal .terms .wpcf7-list-item-label,
.office-live-app .prostor-right .form-offer .terms .wpcf7-list-item-label {
  display: inline-block;
}

.office-live-app .modal .terms p,
.office-live-app .prostor-right .form-offer .terms p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  margin: 0;
  line-height: 1.45;
}

.office-live-app .modal .terms .wpcf7-form-control,
.office-live-app .prostor-right .form-offer .terms .wpcf7-form-control {
  display: inline-flex;
  align-items: center;
}

.office-live-app .modal .terms a,
.office-live-app .prostor-right .form-offer .terms a {
  display: inline;
  white-space: normal;
}

.form-wrap.hypo-form .terms p,
.prostor-right .form-offer .terms p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 6px;
  margin: 0;
  line-height: 1.45;
}

.form-wrap.hypo-form .terms .wpcf7-form-control-wrap,
.form-wrap.hypo-form .terms .wpcf7-form-control,
.form-wrap.hypo-form .terms .wpcf7-list-item,
.form-wrap.hypo-form .terms .wpcf7-list-item label,
.prostor-right .form-offer .terms .wpcf7-form-control-wrap,
.prostor-right .form-offer .terms .wpcf7-form-control,
.prostor-right .form-offer .terms .wpcf7-list-item,
.prostor-right .form-offer .terms .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: inherit;
}

.form-wrap.hypo-form .terms .wpcf7-list-item,
.prostor-right .form-offer .terms .wpcf7-list-item {
  margin: 0;
}

.form-wrap.hypo-form .terms .wpcf7-list-item-label,
.prostor-right .form-offer .terms .wpcf7-list-item-label {
  margin-left: 0;
}

.form-wrap.hypo-form .terms a,
.prostor-right .form-offer .terms a {
  display: inline;
  white-space: normal;
}

.office-live-offers-viewport {
  overflow: hidden;
  width: 100%;
}

.office-live-articles-viewport {
  overflow: hidden;
  width: 100%;
  background: #fff;
}

.office-live-offers-track {
  display: flex;
  align-items: stretch;
  transition: transform 520ms ease;
  will-change: transform;
}

.office-live-articles-track {
  display: flex;
  align-items: stretch;
  transition: transform 520ms ease;
  will-change: transform;
  background: #fff;
}

.office-live-app .office-live-offers-track > .item {
  flex: 0 0 calc(100% / var(--office-live-offers-visible));
  max-width: calc(100% / var(--office-live-offers-visible));
  margin: 0;
  padding: 0 10px;
}

.office-live-app .office-live-offers-track > .item .thumb,
.office-live-app .office-live-offers-track > .item .thumb figure {
  min-height: 0;
}

.office-live-app .office-live-offers-track > .item .thumb figure {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
}

.office-live-carousel-arrow {
  width: 43px;
  height: 43px;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 5;
  border: 0;
  background-color: #fff;
  background-position: 17px center;
  background-repeat: no-repeat;
  cursor: pointer;
  font-size: 0;
  outline: none;
  transition: all 150ms linear;
}

.office-live-carousel-arrow.slick-prev {
  right: 60px;
  background-image: url("../wp-content/themes/officeportal.cz/img/slider-sipka-left-blue.svg");
  background-position: center center;
}

.office-live-carousel-arrow.slick-next {
  background-image: url("../wp-content/themes/officeportal.cz/img/slider-sipka-right-blue.svg");
}

.office-live-carousel-arrow:hover {
  opacity: .72;
}

.office-live-carousel-arrow:disabled {
  opacity: .42;
  cursor: default;
}

body.portal-gallery-lightbox-open {
  overflow: hidden;
}

.prostor-gallery .gallery-row .half,
.prostor-gallery .gallery-row .thumb-item {
  position: relative;
}

.prostor-gallery .gallery-row .fancybox {
  position: absolute;
  inset: 0;
  z-index: 4;
  cursor: zoom-in;
}

.portal-gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 42px 82px;
  background: rgba(7, 18, 15, 0.88);
}

.portal-gallery-lightbox-frame {
  position: relative;
  max-width: min(1180px, 100%);
  max-height: 100%;
  margin: 0;
}

.portal-gallery-lightbox-image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 84px);
  border-radius: 4px;
  object-fit: contain;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

.portal-gallery-lightbox-counter {
  position: absolute;
  right: 14px;
  bottom: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  font-size: 13px;
  line-height: 1;
}

.portal-gallery-lightbox-close,
.portal-gallery-lightbox-arrow {
  position: absolute;
  z-index: 2;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #173b33;
  cursor: pointer;
  transition: transform 140ms ease, opacity 140ms ease, background 140ms ease;
}

.portal-gallery-lightbox-close:hover,
.portal-gallery-lightbox-arrow:hover {
  transform: scale(1.05);
  background: #fff;
}

.portal-gallery-lightbox-close {
  top: 24px;
  right: 28px;
  width: 44px;
  height: 44px;
  font-size: 31px;
  line-height: 42px;
}

.portal-gallery-lightbox-arrow {
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translateY(-50%);
}

.portal-gallery-lightbox-arrow:hover {
  transform: translateY(-50%) scale(1.05);
}

.portal-gallery-lightbox-prev {
  left: 24px;
}

.portal-gallery-lightbox-next {
  right: 24px;
}

.portal-gallery-lightbox-prev::before,
.portal-gallery-lightbox-next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
}

.portal-gallery-lightbox-prev::before {
  transform: translate(-35%, -50%) rotate(-45deg);
}

.portal-gallery-lightbox-next::before {
  transform: translate(-65%, -50%) rotate(135deg);
}

@media (max-width: 700px) {
  .portal-gallery-lightbox {
    padding: 68px 18px 34px;
  }

  .portal-gallery-lightbox-arrow {
    width: 44px;
    height: 44px;
  }

  .portal-gallery-lightbox-prev {
    left: 10px;
  }

  .portal-gallery-lightbox-next {
    right: 10px;
  }
}

/* Theme CSS (stylea4ae.css line ~732) sets `.offers-slider .slick-arrow { bottom: -65px }`,
   which pushes the carousel arrows ~65px below the photos (and partly out of view).
   The buttons carry both `slick-arrow` and our class, so override with higher
   specificity + !important to seat the arrows just under the images. */
.office-live-app .office-live-offers-carousel .office-live-carousel-arrow {
  bottom: 6px !important;
}

/* Articles ("Novinky") arrows: a touch lower than the offers ones, and aligned
   to the same right edge (we removed the old right: 40px/-20px overrides) so the
   two arrow rows line up vertically under each other. */
.office-live-app .office-live-articles-carousel .office-live-carousel-arrow {
  bottom: -14px !important;
}

.office-live-app .search-results .projects.offers.results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 20px;
  width: 100%;
}

.office-live-app .search-results .offers .item {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
}

.office-live-app .search-results .offers .item .thumb,
.office-live-app .search-results .offers .item .thumb figure {
  width: 100%;
}

@media (max-width: 650px) {
  .office-live-app .search-results .projects.offers.results {
    grid-template-columns: minmax(0, 1fr);
  }
}

.portal-search-autocomplete-host {
  position: relative;
  display: block;
}

.portal-search-autocomplete {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 120;
  display: grid;
  gap: 0;
  padding: 8px 0;
  border: 1px solid rgba(40, 70, 104, 0.12);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 44px rgba(15, 36, 56, 0.16);
}

.portal-search-autocomplete__item {
  width: 100%;
  padding: 11px 16px;
  border: 0;
  color: #284668;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
}

.portal-search-autocomplete__item:hover,
.portal-search-autocomplete__item.is-active {
  color: #12324f;
  background: rgba(1, 173, 102, 0.10);
}

/* Stranka nabidky je celoobrazovkovy pohled s fixni mapou - puvodni web na ni paticku nezobrazoval */
.office-live-search-view #office-live-shell-footer {
  display: none;
}

.office-live-app .office-live-legal-section {
  min-height: auto;
  padding-bottom: 96px;
}

.office-live-app .office-live-legal-page {
  max-width: 980px;
}

.office-live-app .office-live-legal-page .wp-block-table {
  display: block;
  width: 100%;
  margin: 24px 0 34px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.office-live-app .office-live-legal-page table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  border-spacing: 0;
  color: #284668;
  font-size: 14px;
  line-height: 1.45;
}

.office-live-app .office-live-legal-page table td,
.office-live-app .office-live-legal-page table th {
  padding: 13px 15px;
  border: 1px solid #bccad8;
  vertical-align: top;
  text-align: left;
}

.office-live-app .office-live-legal-page table tr:first-child td,
.office-live-app .office-live-legal-page table thead th {
  background: #f2f6f5;
  color: #284668;
  font-weight: 600;
}

.office-live-app .office-live-legal-page table a {
  color: #01ad66;
  font-weight: 600;
}

.office-live-app .office-live-legal-cta .office-live-form-status {
  margin-top: 14px;
}

.office-live-map-wrap {
  min-height: 620px;
  background: #eef4f2;
  border-radius: 30px;
  overflow: hidden;
}

#office-live-map {
  width: 100%;
  min-height: 620px;
}

.office-live-map-error {
  display: flex;
  min-height: 620px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 32px;
  background: #eef4f2;
  color: #284668;
  text-align: center;
  font-family: Poppins, Rubik, sans-serif;
}

.office-live-map-error strong {
  font-size: 22px;
  font-weight: 700;
}

.office-live-map-error span {
  max-width: 520px;
  color: #667585;
  font-size: 15px;
  line-height: 1.5;
}

.office-live-static-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 620px;
  background:
    linear-gradient(0deg, rgba(255, 255, 255, .56) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .56) 1px, transparent 1px),
    linear-gradient(135deg, #dce7df 0%, #edf1ec 42%, #d6e3dc 100%);
  background-size: 46px 46px, 46px 46px, auto;
  overflow: hidden;
}

.office-live-static-map::before,
.office-live-static-map::after {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
}

.office-live-static-map::before {
  width: 68%;
  height: 18px;
  left: 16%;
  top: 47%;
  transform: rotate(-12deg);
  border-radius: 999px;
  background: rgba(180, 195, 183, .5);
}

.office-live-static-map::after {
  width: 34%;
  height: 14px;
  right: 8%;
  top: 34%;
  transform: rotate(28deg);
  border-radius: 999px;
  background: rgba(177, 193, 184, .42);
}

.office-live-map-label {
  position: absolute;
  left: 24px;
  top: 22px;
  z-index: 3;
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: calc(100% - 48px);
  padding: 10px 14px;
  border-radius: 4px;
  color: #142823;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 28px rgba(22, 36, 32, .16);
  font-size: 14px;
  line-height: 1.35;
}

.office-live-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  width: 38px;
  height: 50px;
  background: url("../wp-content/themes/officeportal.cz/img/icon-marker.svg") center / contain no-repeat;
  filter: drop-shadow(0 5px 9px rgba(16,40,68,.28));
  cursor: pointer;
  z-index: 2;
}

.office-live-pin:hover,
.office-live-pin.is-active {
  background-image: url("../wp-content/themes/officeportal.cz/img/icon-marker-favorite.svg");
  z-index: 5;
}

.office-live-cluster {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: url("../wp-content/themes/officeportal.cz/img/cluster-marker-small.svg") center / contain no-repeat;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  z-index: 4;
}

.office-live-cluster.is-large {
  width: 66px;
  height: 66px;
  background-image: url("../wp-content/themes/officeportal.cz/img/cluster-marker.svg");
  font-size: 16px;
}

.office-live-popup {
  display: none;
}

.office-live-popup strong {
  display: block;
  color: #17324d;
  font-size: 18px;
}

.office-live-popup span {
  display: block;
  margin-top: 4px;
  color: #667585;
}

.office-live-popup a {
  display: inline-flex;
  margin-top: 12px;
}

.office-live-app .meta-slider {
  position: relative;
}

.office-live-app .meta-slider .noUi-base,
.office-live-app .meta-slider .noUi-connects {
  position: relative;
  width: 100%;
  height: 100%;
}

.office-live-app .meta-slider .noUi-connects {
  overflow: hidden;
  border-radius: 999px;
}

.office-live-app .meta-slider .noUi-connect {
  position: absolute;
  top: 0;
  bottom: 0;
}

.office-live-app .meta-slider .noUi-origin {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}

.office-live-app .office-live-range-input {
  position: absolute;
  left: 0;
  top: -16px;
  z-index: 6;
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  appearance: none;
}

.office-live-app .office-live-range-input::-webkit-slider-thumb {
  width: 38px;
  height: 38px;
  cursor: pointer;
  pointer-events: auto;
  appearance: none;
}

.office-live-app .office-live-range-input::-moz-range-thumb {
  width: 38px;
  height: 38px;
  cursor: pointer;
  pointer-events: auto;
  border: 0;
  background: transparent;
}

.portal-articles-section {
  padding: 0 0 8px;
  margin-top: -36px;
  background: #fff;
}

/* The offers (photos) section uses `.offers-wrap .row { max-width: 1380px }` (theme
   stylea4ae.css) while the articles ("Novinky") section uses the default
   `.row { max-width: 1340px }` — 40px narrower. On wide screens (>1340px) that makes
   the articles row right edge sit 20px left of the offers row, so the carousel arrows
   (anchored right: 0) don't line up vertically. Match the articles row to 1380px so
   both rows share the same right edge and the two arrow rows align. */
.office-live-app .portal-articles-section .row {
  max-width: 1380px;
}

.office-live-app .portal-articles-section + .content.light-blue.cta-form {
  margin-top: 8px;
}

.portal-articles-head h2 {
  margin: 0 0 20px;
  color: #284668;
  font-family: 'Poppins';
  font-size: 26px;
  font-weight: 600;
  line-height: 125%;
  letter-spacing: -0.24px;
}

.portal-articles-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.portal-articles-grid.office-live-articles-carousel {
  --office-live-articles-visible: 4;
  display: block;
  position: relative;
  width: calc(100% + 20px);
  margin-left: -10px;
  margin-top: 20px;
  padding-bottom: 56px;
  overflow: visible;
  background: #fff;
}

.office-live-app .portal-articles-grid.office-live-articles-carousel .office-live-articles-viewport,
.office-live-app .portal-articles-grid.office-live-articles-carousel .office-live-articles-track {
  width: 100%;
}

.office-live-app .portal-articles-grid.office-live-articles-carousel .office-live-articles-viewport {
  overflow: hidden;
}

.office-live-app .portal-articles-grid.office-live-articles-carousel .office-live-articles-track {
  display: flex;
  align-items: stretch;
  transition: transform 520ms ease;
  will-change: transform;
}

.office-live-app .office-live-articles-track > .portal-article-card {
  box-sizing: border-box;
  flex: 0 0 calc(100% / var(--office-live-articles-visible));
  max-width: calc(100% / var(--office-live-articles-visible));
  margin: 0;
  padding: 0 10px;
  background: #fff;
  box-shadow: none;
}

.portal-article-card {
  min-height: 0;
  overflow: hidden;
  border-radius: 26px;
  background: #fff;
  aspect-ratio: 4 / 3;
  box-shadow: 0 18px 40px rgba(21, 43, 56, .08);
}

.portal-article-body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 18px 18px 16px;
  overflow: hidden;
  border: 2px solid rgba(40, 70, 104, .18);
  border-radius: 26px;
  background: #fff;
}

.portal-article-title-wrap {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 6px 2px 12px;
}

.portal-article-card h3 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #284668;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.portal-article-card p {
  display: none;
}

.portal-article-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 0;
  padding-top: 12px;
}

.portal-article-meta {
  margin: 0;
  color: #6d7d8f;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

.portal-article-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  color: #01ad66;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

.portal-article-link:hover {
  text-decoration: underline;
}

.portal-articles-dialog {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 10030;
}

.portal-articles-dialog.is-open {
  display: block;
}

.portal-articles-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 24, 38, .72);
}

.portal-articles-dialog-panel {
  position: relative;
  width: min(760px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  margin: 24px auto;
  overflow: auto;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
}

.portal-articles-dialog-inner {
  padding: 34px 34px 38px;
}

.portal-articles-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #eef4f8;
  color: #122033;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.portal-articles-dialog-date {
  margin: 0 48px 12px 0;
  color: #7a8795;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.portal-articles-dialog h3 {
  margin: 0 48px 18px 0;
  color: #122033;
  font-size: 30px;
  line-height: 1.18;
}

.portal-articles-dialog-body {
  color: #445261;
  font-size: 16px;
  line-height: 1.7;
  white-space: pre-line;
}

.portal-article-source-link:not([hidden]) {
  display: inline-block;
  margin-top: 24px;
}

body.office-live-dialog-open {
  overflow: hidden;
}

.office-live-app #op-faq-auto {
  margin: 54px 0 16px !important;
  padding-bottom: 0 !important;
}

body.office-live-app.office-live-has-faq #office-live-shell-footer {
  background: #fff;
}

/* Footer is float:left (theme CSS), so the gap must sit on the <footer>
   itself, not the wrapper — same approach as warehouse. 32px = 2x warehouse. */
body.office-live-app.office-live-has-faq #office-live-shell-footer footer {
  clear: both !important;
  margin-top: 24px !important;
}

.office-live-app .op-faq {
  --office-live-faq-accent: #01ad66;
  --office-live-faq-ink: #17324d;
  margin: 0 0 16px !important;
  padding: 0 !important;
}

.office-live-app .op-faq__title {
  margin: 0 0 18px !important;
  color: #284668 !important;
  font-family: 'Poppins';
  font-size: 26px !important;
  font-weight: 600 !important;
  line-height: 125% !important;
  letter-spacing: -0.24px;
}

.office-live-app .op-faq__item {
  margin: 0 0 5px !important;
  overflow: hidden !important;
  border: 1px solid rgba(23, 50, 77, .10) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 6px 14px rgba(21, 43, 69, .04) !important;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.office-live-app .op-faq__item.is-open,
.office-live-app .op-faq__item[open] {
  border-color: rgba(1, 173, 102, .28) !important;
  box-shadow: 0 14px 32px rgba(21, 43, 69, .08) !important;
}

.office-live-app .op-faq__question {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 40px;
  padding: 8px 13px !important;
  color: var(--office-live-faq-ink) !important;
  background: transparent !important;
  cursor: pointer;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  list-style: none !important;
  gap: 12px;
}

.office-live-app .op-faq__question::-webkit-details-marker {
  display: none !important;
}

.office-live-app .op-faq__question::after {
  content: "+" !important;
  flex: 0 0 22px !important;
  display: grid !important;
  width: 22px !important;
  height: 22px !important;
  place-items: center !important;
  margin-left: auto !important;
  border-radius: 999px !important;
  color: var(--office-live-faq-accent) !important;
  background: rgba(1, 173, 102, .10) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  transition: transform 220ms ease, background-color 220ms ease;
}

.office-live-app .op-faq__item.is-open .op-faq__question::after,
.office-live-app .op-faq__item[open] .op-faq__question::after {
  transform: rotate(45deg);
  background: rgba(1, 173, 102, .16) !important;
}

.office-live-app .op-faq__answer {
  padding: 0 13px 10px !important;
  color: rgba(23, 50, 77, .78) !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  opacity: 1;
}

.office-live-app .op-faq__item:not(.is-open) .op-faq__answer {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.office-live-app .op-faq__answer p {
  margin: 0 0 8px !important;
}

.office-live-app .op-faq__answer p:last-child {
  margin-bottom: 0 !important;
}

.office-live-chat {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10020;
  width: 64px;
  height: 64px;
  pointer-events: none;
}

.office-live-chat,
.office-live-chat * {
  box-sizing: border-box;
}

.office-live-chat-toggle {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  background: #183153;
  color: #fff;
  padding: 10px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 18px 40px rgba(24, 49, 83, 0.22);
  pointer-events: auto;
}

/* Cervena bublina s poctem neprectenych zprav (na mobilu misto auto-otevreni). */
.office-live-chat-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: #e02424;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(224, 36, 36, 0.4);
}

.office-live-chat-badge[hidden] {
  display: none;
}

.office-live-chat-toggle img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.office-live-chat-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.office-live-chat-panel {
  position: absolute;
  right: 0;
  bottom: 80px;
  width: min(380px, calc(100vw - 24px));
  max-height: min(760px, calc(100vh - 120px));
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(18, 37, 61, 0.2);
  overflow: hidden;
  border: 1px solid rgba(24, 49, 83, 0.08);
  pointer-events: auto;
}

.office-live-chat-panel[hidden] {
  display: none !important;
}

.office-live-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #183153 0%, #2f5f9c 100%);
  color: #fff;
}

.office-live-chat-header strong {
  display: block;
}

.office-live-chat-header span {
  font-size: 12px;
  opacity: 0.85;
}

.office-live-chat-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: inherit;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  transition: background .15s ease, transform .15s ease;
}

.office-live-chat-close:hover {
  background: rgba(255, 255, 255, .22);
  transform: translateY(-1px);
}

.office-live-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 520px;
  overflow-y: auto;
  padding: 16px;
  background: linear-gradient(180deg, #f6f8fb 0%, #ffffff 100%);
}

.office-live-chat-message {
  max-width: 88%;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
}

.office-live-chat-message.is-assistant {
  align-self: flex-start;
  background: #fff;
  color: #183153;
  border: 1px solid rgba(24, 49, 83, 0.08);
}

.office-live-chat-message.is-user {
  align-self: flex-end;
  background: #183153;
  color: #fff;
}

.office-live-chat-typing {
  padding: 14px 16px;
}

.office-live-chat-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.office-live-chat-typing-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8aa0bd;
  display: inline-block;
  animation: office-live-chat-typing 1.2s infinite ease-in-out both;
}

.office-live-chat-typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.office-live-chat-typing-dots span:nth-child(2) { animation-delay: -0.16s; }
.office-live-chat-typing-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes office-live-chat-typing {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.office-live-chat-form {
  padding: 14px;
  border-top: 1px solid rgba(24, 49, 83, 0.08);
  background: #fff;
}

.office-live-chat-inputrow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.office-live-chat-input {
  flex: 1 1 auto;
  width: auto;
  resize: none;
  min-height: 46px;
  max-height: none;
  overflow-y: hidden;
  box-sizing: border-box;
  font-size: 16px;
  border: 1px solid rgba(24, 49, 83, 0.14);
  border-radius: 16px;
  padding: 9px 14px;
  font: inherit;
  color: #183153;
  line-height: 1.35;
  text-align: left;
}

.office-live-chat-status {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #667085;
}

.office-live-chat-send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #57b35f;
  color: #fff;
  padding: 0;
  cursor: pointer;
  line-height: 1;
}

.office-live-chat-cta {
  border: 0;
  border-radius: 999px;
  background: #57b35f;
  color: #fff;
  padding: 11px 16px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.office-live-chat-send:disabled {
  opacity: 0.6;
  cursor: default;
}

.office-live-chat-cta {
  display: inline-flex;
  margin-top: 10px;
}

.office-live-chat-lead {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: min(100%, 320px);
}

/* Formulář navazující na text odpovědi ve stejné bublině — jemný předěl,
   ať působí jako jedna souvislá zpráva. */
.office-live-chat-message p + .office-live-chat-lead,
.office-live-chat-message .office-live-chat-shortlist-wrap + .office-live-chat-lead {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(24, 49, 83, 0.1);
}

.office-live-chat-lead-count {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  color: #183153;
}

.office-live-chat-lead-text {
  font-size: 15px;
  line-height: 1.5;
  color: #516276;
}

.office-live-chat-shortlist-wrap {
  position: relative;
  margin-top: 10px;
}

.office-live-chat-shortlist {
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.office-live-chat-shortlist::-webkit-scrollbar {
  display: none;
}

.office-live-chat-shortlist-item {
  flex: 0 0 200px;
  scroll-snap-align: start;
  padding: 0 0 10px;
  border: 1px solid rgba(24, 49, 83, 0.08);
  border-radius: 14px;
  background: #f8fbff;
  overflow: hidden;
}

.office-live-chat-shortlist-item .office-live-chat-shortlist-title,
.office-live-chat-shortlist-item .office-live-chat-shortlist-meta,
.office-live-chat-shortlist-item .office-live-chat-shortlist-summary,
.office-live-chat-shortlist-item .office-live-chat-shortlist-link {
  padding-left: 12px;
  padding-right: 12px;
}

.office-live-chat-shortlist-photo {
  display: block;
  height: 96px;
  background: rgba(24, 49, 83, 0.06);
  margin-bottom: 8px;
}

.office-live-chat-shortlist-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.office-live-chat-shortlist-arrow {
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(24, 49, 83, 0.12);
  background: #ffffff;
  color: #183153;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(24, 49, 83, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.office-live-chat-shortlist-arrow:hover {
  background: #f0f5fc;
}

.office-live-chat-shortlist-title {
  font-size: 13px;
  font-weight: 700;
  color: #183153;
}

.office-live-chat-shortlist-meta,
.office-live-chat-shortlist-summary {
  margin-top: 4px;
  font-size: 12px;
  color: #516276;
  line-height: 1.5;
}

.office-live-chat-shortlist-link {
  display: inline-flex;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #183153;
  text-decoration: none;
}

.office-live-chat-lead-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.office-live-chat-lead-input {
  width: 100%;
  border: 1px solid rgba(24, 49, 83, 0.14);
  border-radius: 14px;
  padding: 10px 12px;
  font: inherit;
  color: #183153;
  background: #fff;
}

.office-live-chat-lead-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.office-live-chat-lead-actions .office-live-chat-send {
  width: auto;
  min-width: 104px;
  height: 42px;
  border-radius: 999px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.office-live-chat-lead-status {
  font-size: 12px;
  color: #667085;
}

.office-live-form-status {
  margin-top: 14px;
  color: #102844;
  font-size: 14px;
  font-weight: 600;
}

.office-live-form-status.is-success {
  color: #00b36b;
}

.office-live-form-status.is-error {
  color: #b42318;
}

.portal-wishlist-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  box-shadow: none;
  line-height: 1;
  transition: transform .15s ease;
}

.portal-wishlist-button .wishlist_save_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Draw the heart ourselves so it does not depend on Font Awesome (which the
   live pages do not load). Empty heart by default, filled/active heart when
   the listing is saved. */
.portal-wishlist-button .wishlist_save_icon i {
  display: block;
  width: 26px;
  height: 24px;
  background-image: url("../wp-content/themes/officeportal.cz/img/icon-heartb883.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.portal-wishlist-button .wishlist_save_icon i::before {
  content: none;
}

.portal-wishlist-button:hover .wishlist_save_icon i,
.portal-wishlist-button.is-saved .wishlist_save_icon i,
.portal-wishlist-button.wishlist_saved .wishlist_save_icon i {
  background-image: url("../wp-content/themes/officeportal.cz/img/icon-heart-item-active.svg");
}

.portal-wishlist-button:disabled {
  opacity: .65;
  cursor: default;
}

.office-live-app .offers .item .thumb .wish {
  z-index: 4;
  pointer-events: auto;
}

.office-live-app .offers .item .thumb .wish .wishlist-button-wrap,
.office-live-app .offers .item .thumb .wish .portal-wishlist-button {
  position: relative;
  z-index: 1001;
  pointer-events: auto;
}

.office-live-app .prostor-top.with-title .socials {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 6px;
  position: relative;
  z-index: 3;
}

/* Match the share button to the wishlist heart (26x24, ~24px icon) and let the
   flex `align-items: center` above line them up on the same baseline. Previously
   the share icon was smaller (18px) and top-aligned, so it sat lower and looked
   undersized next to the heart. */
.office-live-app .prostor-top.with-title .socials a.share {
  display: block;
  width: 26px;
  height: 24px;
  padding: 0 !important;
  margin: 0 !important;
  align-self: center;
  vertical-align: middle;
  line-height: 24px;
  background-size: 24px auto;
  background-position: center center;
}

/* Neutralise the heart icon's stray right margin so its box (and therefore its
   visual centre) lines up with the share icon under the flex centering. */
.office-live-app .prostor-top.with-title .socials .wishlist_save_icon i {
  margin: 0;
}

.office-live-app .prostor-top.with-title .socials .wishlist-button-wrap,
.office-live-app .prostor-top.with-title .socials .portal-wishlist-button {
  position: relative;
  z-index: 1001;
  pointer-events: auto;
}

/* The wishlist wrapper is a touch taller than the heart icon, which left the
   heart sitting ~5px above the share icon even with the flex centering. Pin both
   the wrapper and the button to the share's 24px height and center their content
   so the heart and share line up on the same axis. */
.office-live-app .prostor-top.with-title .socials .wishlist-button-wrap,
.office-live-app .prostor-top.with-title .socials .wishlist_save,
.office-live-app .prostor-top.with-title .socials .portal-wishlist-button,
.office-live-app .prostor-top.with-title .socials .wishlist_save_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  top: 0;
  align-self: center;
  transform: none;
}

.office-live-app .prostor-top.with-title .socials .wishlist_save_icon i {
  margin: 0;
  vertical-align: middle;
  align-self: center;
  position: relative;
  top: -2px;
}

.office-live-app #office-live-root > section.without-sub-header.muj-ucet,
.office-live-app #office-live-root > section.without-sub-header.login-reg-page {
  min-height: calc(100vh - 430px);
}

.office-live-app #office-live-root > section.without-sub-header.login-reg-page .half.text {
  padding-top: 50px;
}

.office-live-app #office-live-root > section.without-sub-header.muj-ucet {
  padding-top: 118px;
  overflow: visible;
}

.portal-account-section .page-content {
  width: 100%;
}

.portal-account-card {
  min-height: 320px;
}

.portal-account-card h1 {
  margin: 0 0 18px;
}

.portal-account-card h2 {
  margin: 0 0 18px;
  color: #284668;
  font-size: 24px;
}

.portal-account-forms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 28px;
}

.portal-account-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: 18px;
  background: #fff;
}

.office-live-app .hypo-form .terms label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.office-live-app .hypo-form textarea {
  line-height: 1.45;
  text-align: left;
  padding: 14px 16px;
}

.office-live-chat-project-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 12px 0;
}

.office-live-chat-project-link {
  display: block;
  color: #173a63;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.office-live-chat-project-link:hover {
  color: #00a86b;
}

.hypo-form textarea[name="your-vzkaz"] {
  line-height: 1.45 !important;
  text-align: center;
  padding: 14px 16px;
}

/* The contact box reuses the theme's .modal styles, which cap the height and
   add overflow:auto — so appending the success status text made a scrollbar
   appear. Here it's an inline form, not a real popup, so let it grow. */
.office-live-app .modal.form-wrap.hypo-form,
.office-live-app .form-wrap.hypo-form {
  max-height: none !important;
  overflow: visible !important;
}

.portal-account-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #284668;
  font-size: 14px;
  font-weight: 700;
}

.portal-account-form input {
  width: 100%;
  border: 1px solid rgba(40, 70, 104, .16);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
}

.portal-account-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}

.portal-account-saved {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 18px;
}

.portal-account-saved .item {
  width: auto !important;
  margin: 0 !important;
}

.portal-account-status {
  margin: 14px 0 18px;
  font-weight: 700;
}

.portal-account-status.is-error {
  color: #b42318;
}

.portal-account-status.is-success {
  color: #19975a;
}

/* Account dashboard: left nav + content panels */
.portal-account.row {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.portal-account-nav {
  flex: 0 0 220px;
  max-width: 220px;
}

.portal-account-welcome {
  margin: 0 0 22px;
  color: #6b7785;
  font-size: 15px;
}

.portal-account-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.portal-account-nav li {
  margin: 0 0 14px;
}

.portal-account-nav a {
  display: block;
  position: relative;
  padding-left: 18px;
  color: #284668;
  font-weight: 700;
  text-decoration: none;
}

.portal-account-nav a::before {
  content: "\203A";
  position: absolute;
  left: 0;
  top: -1px;
  color: #19975a;
}

.portal-account-nav a.is-active {
  color: #19975a;
}

/* "Smazat účet" nav item + panel: visually set apart in red, but using the
   same nav/panel structure as the rest so it stays consistent. */
.portal-account-nav a.portal-account-nav-danger {
  color: #c0392b;
}
.portal-account-nav a.portal-account-nav-danger::before {
  color: #c0392b;
}
.portal-account-nav a.portal-account-nav-danger.is-active {
  color: #c0392b;
}

.portal-account-delete-card {
  max-width: 520px;
}
.portal-account-delete-card p {
  margin: 0 0 10px;
  color: #284668;
  line-height: 1.6;
}
.portal-account-delete-hint {
  font-weight: 700;
}
.portal-account-delete-card .update-form {
  margin-top: 18px;
}
/* Match the page's rounded button style; use a restrained red so it reads as
   a destructive action without clashing with the site's look. */
.portal-account .update-form .portal-account-delete-btn {
  width: 100%;
  border: none;
  border-radius: 30px;
  background: #c0392b;
  padding: 18px 22px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.portal-account .update-form .portal-account-delete-btn:hover {
  background: #a93226;
}

.portal-account .page-content {
  flex: 1 1 auto;
}

.portal-account-panel {
  display: none;
}

.portal-account-panel.is-active {
  display: block;
}

.portal-account-panel .section-title {
  margin: 0 0 28px;
  color: #19975a;
}

.portal-account .update-form .inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 24px;
}

.portal-account .update-form input:not([type="submit"]) {
  width: 100%;
  border: none;
  border-radius: 10px;
  background: #f1f1f1;
  padding: 18px 22px;
  font: inherit;
  color: #284668;
}

/* The theme (stylea4ae.css) floats the last_name/phone inputs right and gives
   the phone field margin-bottom: 0 (it was the last field in the original WP
   form). Inside our flex `.inner` that left the "Nové heslo" field sitting only
   ~18px below "Telefonní číslo" instead of the consistent gap between the other
   fields. Neutralise the theme float/margin so every field is spaced equally by
   the flex gap. */
.portal-account .update-form .inner input:not([type="submit"]) {
  float: none;
  margin: 0 !important;
}

.portal-account .update-form input::placeholder {
  color: #9aa3ad;
}

.portal-account .update-form input[type="submit"] {
  width: 100%;
  border: none;
  border-radius: 30px;
  background: #01ad66;
  padding: 18px 22px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.portal-account .update-form input[type="submit"]:hover {
  background: #028f58;
}

@media (max-width: 900px) {
  .portal-account.row {
    flex-direction: column;
    gap: 28px;
  }

  .portal-account-nav {
    flex-basis: auto;
    max-width: none;
  }
}

@media (max-width: 1100px) {
  .office-live-app .offers.offers-slider.office-live-offers-carousel {
    --office-live-offers-visible: 2;
  }

  .portal-articles-grid.office-live-articles-carousel {
    --office-live-articles-visible: 2;
  }

  .office-live-app .offers.offers-slider,
  .portal-articles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .office-live-app .search-results .offers .item {
    width: auto;
  }
}

@media (max-width: 720px) {
  .portal-articles-section {
    padding-top: 56px;
  }

  .office-live-app .offers.offers-slider.office-live-offers-carousel {
    --office-live-offers-visible: 1;
    padding-bottom: 0;
  }

  .portal-articles-grid.office-live-articles-carousel {
    --office-live-articles-visible: 1;
    padding-bottom: 0;
  }

  .office-live-app .offers.offers-slider,
  .portal-articles-grid {
    grid-template-columns: 1fr;
  }

  .office-live-app .search-results .offers .item {
    width: auto;
    margin-right: 0;
  }

  .office-live-carousel-arrow {
    display: none;
  }

  .office-live-chat {
    right: 12px;
    bottom: 12px;
  }

  .office-live-chat-panel {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 104px);
  }

  .office-live-chat-header {
    flex-direction: column;
  }

}

.office-live-chat {
  width: 68px;
  height: 68px;
  font-family: Poppins, Rubik, sans-serif;
}

.office-live-chat-toggle {
  width: 68px;
  height: 68px;
  padding: 13px;
  background: #183153;
  box-shadow: 0 16px 38px rgba(24, 49, 83, .32);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.office-live-chat-toggle:hover {
  transform: translateY(-2px);
  background: #284668;
  box-shadow: 0 20px 46px rgba(24, 49, 83, .38);
}

.office-live-chat-toggle img {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}

.office-live-chat-panel {
  bottom: 86px;
  /* Fixed size, unaffected by browser zoom (no vh/vw units). Only shrinks on
     very small screens via the max-* fallbacks so it never overflows. */
  width: 430px;
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  height: 570px;
  max-height: calc(100vh - 104px);
  border: 1px solid rgba(40, 70, 104, .12);
  border-radius: 20px;
  background: #f7faf8;
  box-shadow: 0 24px 70px rgba(17, 37, 58, .24);
}

.office-live-chat-header {
  flex: 0 0 auto;
  align-items: center;
  padding: 18px 18px 16px;
  background: #fff;
  color: #284668;
  border-bottom: 1px solid rgba(40, 70, 104, .1);
}

.office-live-chat-header > div {
  min-width: 0;
}

.office-live-chat-header strong {
  font-size: 19px;
  line-height: 1.2;
  color: #284668;
}

.office-live-chat-header span {
  margin-top: 3px;
  color: #627286;
  font-size: 14px;
  opacity: 1;
}

.office-live-chat-close {
  background: rgba(40, 70, 104, .08);
}

.office-live-chat-close:hover {
  background: rgba(40, 70, 104, .14);
}

.office-live-chat-messages {
  flex: 1 1 auto;
  gap: 12px;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 18px;
  background: #f4f8f6;
}

.office-live-chat-message {
  max-width: 86%;
  padding: 13px 16px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.55;
  box-shadow: 0 8px 20px rgba(21, 43, 69, .06);
}

.office-live-chat-message.is-assistant {
  border: 1px solid rgba(40, 70, 104, .08);
  border-bottom-left-radius: 6px;
  background: #fff;
  color: #263b51;
}

.office-live-chat-message.is-user {
  border-bottom-right-radius: 6px;
  background: #284668;
  color: #fff;
  box-shadow: 0 10px 24px rgba(40, 70, 104, .18);
}

.office-live-chat-form {
  flex: 0 0 auto;
  padding: 14px;
  background: #fff;
  border-top: 1px solid rgba(40, 70, 104, .1);
}

.office-live-chat-input,
.office-live-chat-lead-input {
  border-color: rgba(40, 70, 104, .14);
  border-radius: 14px;
  background: #f9fbfb;
  color: #284668;
  font-size: 16px;
}

.office-live-chat-input:focus,
.office-live-chat-lead-input:focus {
  outline: 2px solid rgba(1, 173, 102, .24);
  outline-offset: 2px;
}

.office-live-chat-send,
.office-live-chat-cta {
  background: #01ad66;
  box-shadow: 0 10px 20px rgba(1, 173, 102, .2);
}

.office-live-chat-send:hover,
.office-live-chat-cta:hover {
  background: #028f58;
}

.office-live-chat-cta {
  border: 1px solid rgba(1, 173, 102, .18);
}

.office-live-chat-shortlist-item,
.office-live-chat-lead {
  border-color: rgba(40, 70, 104, .1);
  background: #fff;
}

/* Show the "Zobrazit výběr" (apply) button inside the offer filter panel.
   The theme hides li.sf-field-submit there; the live app needs it so filters
   are applied on click instead of automatically. */
section.search-wrap.new-style .searchandfilter ul li.sf-field-submit {
  display: block;
  width: 100%;
  margin-top: 14px;
}

section.search-wrap.new-style .searchandfilter ul li.sf-field-submit input[name="_sf_submit"] {
  width: 100%;
  border: none;
  border-radius: 30px;
  background: #01ad66;
  padding: 16px 22px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

section.search-wrap.new-style .searchandfilter ul li.sf-field-submit input[name="_sf_submit"]:hover {
  background: #01985a;
}

/* Expanded chat modal */
body.portal-chat-modal-open { overflow: hidden; }

.office-live-chat-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(9, 22, 37, .64);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}

.office-live-chat-backdrop[hidden] { display: none !important; }

.office-live-chat-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.office-live-chat-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(40, 70, 104, .08);
  color: inherit;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.office-live-chat-expand:hover {
  background: rgba(40, 70, 104, .14);
  transform: translateY(-1px);
}

.office-live-chat-expand svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.office-live-chat-collapse-icon,
.office-live-chat.is-expanded .office-live-chat-expand-icon { display: none; }
.office-live-chat.is-expanded .office-live-chat-collapse-icon { display: block; }
.office-live-chat.is-expanded .office-live-chat-toggle { visibility: hidden; }

.office-live-chat.is-expanded .office-live-chat-panel {
  position: fixed;
  z-index: 1;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  /* Expanded (centered) view: larger but still a fixed size, unaffected by zoom. */
  width: 640px;
  max-width: calc(100vw - 48px);
  height: 720px;
  max-height: calc(100dvh - 48px);
  transform: translate(-50%, -50%);
  box-shadow: 0 32px 100px rgba(4, 13, 24, .42);
}

@media (max-width: 700px) {
  .office-live-chat-header {
    flex-direction: row;
    align-items: center;
  }

  .office-live-chat-header span { display: none; }

  .office-live-chat.is-expanded .office-live-chat-panel {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    border-radius: 16px;
  }
}

.portal-listing-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  padding: 28px 16px 12px;
}

.portal-listing-pagination button {
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  background: #00aa73;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.portal-listing-pagination button:disabled {
  opacity: .35;
  cursor: default;
}

/* Mobile chat: keep the widget compact instead of occupying almost the whole viewport. */
@media (max-width: 700px) {
  .office-live-chat {
    right: 10px;
    bottom: 10px;
    width: 56px;
    height: 56px;
  }

  .office-live-chat-toggle {
    width: 56px;
    height: 56px;
    padding: 10px;
  }

  .office-live-chat-toggle img {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .office-live-chat-panel {
    right: 0;
    bottom: 70px;
    width: min(360px, calc(100vw - 20px));
    height: min(480px, calc(100dvh - 112px));
    max-height: min(480px, calc(100dvh - 112px));
    border-radius: 16px;
  }

  .office-live-chat-header {
    padding: 12px 12px 10px;
    gap: 8px;
  }

  .office-live-chat-header strong {
    font-size: 16px;
  }

  .office-live-chat-messages {
    gap: 9px;
    padding: 12px;
  }

  .office-live-chat-message {
    max-width: 90%;
    padding: 10px 12px;
    border-radius: 15px;
    font-size: 14px;
    line-height: 1.45;
  }

  .office-live-chat-form {
    padding: 10px;
  }

  .office-live-chat-input {
    min-height: 42px;
    font-size: 15px;
  }

  .office-live-chat-send {
    width: 40px;
    height: 40px;
  }

  .office-live-chat.is-expanded .office-live-chat-panel {
    width: min(420px, calc(100vw - 20px));
    height: min(620px, calc(100dvh - 28px));
    border-radius: 16px;
  }
}

@media (max-width: 420px) {
  .office-live-chat-panel {
    width: calc(100vw - 20px);
    height: min(460px, calc(100dvh - 112px));
  }
}

/* Newsletter input stays visually unchanged while typing or autofilling. */
.newsletter .inner input[type="email"],
.newsletter .inner input[type="email"]:focus,
.newsletter .inner input[type="email"]:active,
.newsletter .inner input[type="email"]:not(:placeholder-shown) {
  background-color: transparent !important;
  color: #fff !important;
  caret-color: #fff;
  height: 68px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 68px;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: 0;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.newsletter .inner input[type="email"]:-webkit-autofill,
.newsletter .inner input[type="email"]:-webkit-autofill:hover,
.newsletter .inner input[type="email"]:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  transition: background-color 9999s ease-out 0s;
  caret-color: #fff;
}

/* "Ozvěte se nám" contact box: phone field and submit button share white. */
.cta-form .wpcf7-form input[type="tel"],
.cta-form .wpcf7-form input[type="tel"]:focus,
.cta-form .wpcf7-form input[type="tel"]:active,
.cta-form .wpcf7-form input[type="tel"]:valid,
.cta-form .wpcf7-form input[type="tel"]:not(:placeholder-shown) {
  background-color: #fff !important;
  background-image: none !important;
  color: #31404e !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.cta-form .wpcf7-form input[type="tel"]:-webkit-autofill,
.cta-form .wpcf7-form input[type="tel"]:-webkit-autofill:hover,
.cta-form .wpcf7-form input[type="tel"]:-webkit-autofill:focus {
  -webkit-text-fill-color: #31404e !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
}

/* Chat lead form: one polished in-place transition instead of extra messages. */
.office-live-chat-lead.is-transitioning {
  overflow: hidden;
  transition: height 320ms cubic-bezier(.22, 1, .36, 1);
}

.office-live-chat-lead > [hidden] {
  display: none !important;
}

.office-live-chat-lead-form.is-submitting .office-live-chat-lead-input {
  opacity: .72;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.office-live-chat-lead-form.is-submitting .office-live-chat-send {
  position: relative;
  color: transparent !important;
}

.office-live-chat-lead-form.is-submitting .office-live-chat-send::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 17px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, .42);
  border-top-color: #fff;
  border-radius: 50%;
  content: "";
  animation: office-live-chat-lead-spin .7s linear infinite;
}

.office-live-chat-lead-success {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: 78px;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  border: 1px solid rgba(1, 173, 102, .18);
  border-radius: 15px;
  background: rgba(1, 173, 102, .075);
  opacity: 0;
  transform: translateY(7px) scale(.985);
  transition: opacity 220ms ease, transform 280ms cubic-bezier(.22, 1, .36, 1);
}

.office-live-chat-lead-success.is-visible {
  opacity: 1;
  transform: none;
}

.office-live-chat-lead-success-icon {
  display: inline-flex;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #01ad66;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 7px 16px rgba(1, 173, 102, .2);
}

.office-live-chat-lead-success-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  color: #516276;
  font-size: 13px;
  line-height: 1.4;
}

.office-live-chat-lead-success-copy strong {
  color: #183153;
  font-size: 14px;
  font-weight: 800;
}

@keyframes office-live-chat-lead-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .office-live-chat-lead.is-transitioning,
  .office-live-chat-lead-success {
    transition: none;
  }
}