/* =========================================================
   GLOBAL PROJECT OVERRIDES - VÝHĽADY
   Shared color system for normal pages + shared homepage sections
========================================================= */

:root {
  /* Project palette */
  --vyhlady-primary: #63503f;
  --vyhlady-primary-dark: #192d37;
  --vyhlady-secondary: #f7941d;
  --vyhlady-accent: #f7941d;
  --vyhlady-yellow: #f7b81d;
  --vyhlady-white: #ffffff;
  --vyhlady-text-dark: #192d37;
  --vyhlady-light-bg: #f1f5f9;

  --vyhlady-secondary-a00: rgba(247, 148, 29, 0);
  --vyhlady-secondary-a10: rgba(247, 148, 29, 0.10);
  --vyhlady-secondary-a20: rgba(247, 148, 29, 0.20);
  --vyhlady-secondary-a30: rgba(247, 148, 29, 0.30);
  --vyhlady-secondary-a35: rgba(247, 148, 29, 0.35);

  --vyhlady-primary-a00: rgba(99, 80, 63, 0);
  --vyhlady-primary-a10: rgba(99, 80, 63, 0.10);
  --vyhlady-primary-a20: rgba(99, 80, 63, 0.20);
  --vyhlady-primary-a55: rgba(99, 80, 63, 0.55);

  --vyhlady-dark-a10: rgba(25, 45, 55, 0.10);
  --vyhlady-dark-a20: rgba(25, 45, 55, 0.20);
  --vyhlady-dark-a30: rgba(25, 45, 55, 0.30);

  /* Landing variable aliases - used also outside Landing Master through shared shortcodes */
  --elon-primary: var(--vyhlady-primary);
  --elon-primary-dark: var(--vyhlady-primary-dark);
  --elon-secondary: var(--vyhlady-secondary);
  --elon-light: var(--vyhlady-accent);
  --elon-white: var(--vyhlady-white);
  --elon-text-dark: var(--vyhlady-text-dark);

  /* Highlight */
  --project-highlight-color: var(--vyhlady-accent);
}

/* =========================================================
   GLOBAL NAV COLORS
========================================================= */

:root {
  /* Main nav - inactive nechávame pôvodné */
  --primary-nav-item-color-hover: var(--vyhlady-accent);
  --primary-nav-item-color-hover-alpha: var(--vyhlady-secondary-a20);

  --primary-nav-item-color-active: var(--vyhlady-accent);
  --primary-nav-item-color-active-alpha: var(--vyhlady-secondary-a20);

  /* Opened / mobile header nav */
  --primary-nav-item-color-opened-hover: var(--vyhlady-accent);
  --primary-nav-item-color-opened-hover-alpha: var(--vyhlady-secondary-a20);

  --primary-nav-item-color-opened-active: var(--vyhlady-accent);
  --primary-nav-item-color-opened-active-alpha: var(--vyhlady-secondary-a20);

  /* Submenu hover / active */
  --primary-nav-sub-item-color-hover: var(--vyhlady-accent);
  --primary-nav-sub-item-color-hover-alpha: var(--vyhlady-secondary-a10);

  --primary-nav-sub-item-color-active: var(--vyhlady-accent);
  --primary-nav-sub-item-color-active-alpha: var(--vyhlady-secondary-a10);
}

/* =========================================================
   GLOBAL BRAND COLOR 5 OVERRIDE - VÝHĽADY
========================================================= */

:root {
  --brand-color-5: #192d37;

  --brand-color-5-a00: rgba(25, 45, 55, 0);
  --brand-color-5-a05: rgba(25, 45, 55, 0.05);
  --brand-color-5-a10: rgba(25, 45, 55, 0.10);
  --brand-color-5-a15: rgba(25, 45, 55, 0.15);
  --brand-color-5-a20: rgba(25, 45, 55, 0.20);
  --brand-color-5-a25: rgba(25, 45, 55, 0.25);
  --brand-color-5-a30: rgba(25, 45, 55, 0.30);
  --brand-color-5-a35: rgba(25, 45, 55, 0.35);
  --brand-color-5-a40: rgba(25, 45, 55, 0.40);
  --brand-color-5-a45: rgba(25, 45, 55, 0.45);
  --brand-color-5-a50: rgba(25, 45, 55, 0.50);
  --brand-color-5-a55: rgba(25, 45, 55, 0.55);
  --brand-color-5-a60: rgba(25, 45, 55, 0.60);
  --brand-color-5-a65: rgba(25, 45, 55, 0.65);
  --brand-color-5-a70: rgba(25, 45, 55, 0.70);
  --brand-color-5-a75: rgba(25, 45, 55, 0.75);
  --brand-color-5-a80: rgba(25, 45, 55, 0.80);
  --brand-color-5-a85: rgba(25, 45, 55, 0.85);
  --brand-color-5-a90: rgba(25, 45, 55, 0.90);
  --brand-color-5-a95: rgba(25, 45, 55, 0.95);
}

/* =========================================================
   HIGHLIGHT HELPERS
========================================================= */

.highlight-white {
  color: #ffffff !important;
}

.highlight-orange {
  color: var(--vyhlady-accent) !important;
}

.highlight,
.title .highlight,
.hero-title .highlight,
.content-section-title .highlight,
.section-title .highlight,
.accordion-title .highlight,
body.page-template-template-elon-landing-php .highlight,
body.page-template-template-elon-landing-php .hero-title .highlight,
body.page-template-template-elon-landing-php .content-section-title .highlight,
.page-o-projekte-builder .highlight,
.page-o-projekte-builder .hero-title .highlight,
.page-o-projekte-builder .content-section-title .highlight {
  color: var(--project-highlight-color) !important;
}

/* =========================================================
   GLOBAL BUTTON COLORS - shared Landing buttons outside homepage
========================================================= */

.button,
.button.button-inverse,
.page-o-projekte-builder .button,
.panel-intro .button,
.panel-portfolio .button,
.panel-location .button,
.panel-features .button,
.panel-construction .button,
.panel-cta .button,
.panel-apartments .button,
.panel-offer .button {
  background-color: var(--elon-secondary) !important;
  border-color: var(--elon-secondary) !important;
  color: var(--elon-text-dark) !important;
}

.button .icon-arrow-right,
.button.button-inverse .icon-arrow-right,
.page-o-projekte-builder .button .icon-arrow-right,
.panel-intro .button .icon-arrow-right,
.panel-portfolio .button .icon-arrow-right,
.panel-location .button .icon-arrow-right,
.panel-features .button .icon-arrow-right,
.panel-construction .button .icon-arrow-right,
.panel-cta .button .icon-arrow-right,
.panel-apartments .button .icon-arrow-right,
.panel-offer .button .icon-arrow-right {
  color: var(--elon-text-dark) !important;
}

.button:hover,
.button.button-inverse:hover,
.page-o-projekte-builder .button:hover,
.panel-intro .button:hover,
.panel-portfolio .button:hover,
.panel-location .button:hover,
.panel-features .button:hover,
.panel-construction .button:hover,
.panel-cta .button:hover,
.panel-apartments .button:hover,
.panel-offer .button:hover {
  background-color: var(--vyhlady-yellow) !important;
  border-color: var(--vyhlady-yellow) !important;
  color: var(--elon-text-dark) !important;
}

/* =========================================================
   SHARED LANDING SECTION COLOR LAYER
   Applies also when sections are inserted via shortcode on normal pages.
========================================================= */

body.page-template-template-elon-landing-php #body,
.page-o-projekte-builder {
  background-color: var(--elon-primary);
}

.panel-intro,
.panel-portfolio,
.panel-location,
.panel-features,
.panel-construction {
  background-color: var(--elon-primary) !important;
}

.footer,
footer,
.site-footer {
  background-color: var(--elon-primary-dark);
}

/* Pills / meta highlight */
.meta-component li.highlight {
  background-color: var(--elon-light);
  color: var(--elon-text-dark) !important;
}

/* CTA pins */
.panel-cta .pin {
  background-color: var(--elon-primary) !important;
}

.panel-cta .pin .icon {
  background-color: color-mix(in srgb, var(--elon-primary) 80%, var(--elon-white) 20%) !important;
}

/* Construction progress badge */
.panel-construction .number {
  background-color: var(--elon-primary) !important;
  color: var(--elon-white) !important;
}

/* Active timeline item */
.panel-construction .progress .item.active .icon {
  background-color: var(--elon-secondary) !important;
}

/* =========================================================
   OFFER / APARTMENT CARDS
========================================================= */

.panel-apartments .apartment-list-item-container .highlight,
.panel-apartments .apartment-list-item-container .title .highlight,
.panel-apartments .apartment-list-item-container .meta-component .highlight,
.panel-offer .apartment-list-item-container .highlight,
.panel-offer .apartment-list-item-container .title .highlight,
.panel-offer .apartment-list-item-container .meta-component .highlight {
  color: #ffffff !important;
}

.panel-apartments .list > .item,
.panel-offer .list > .item {
  --scroll-percentage: 0px;
}

/* =========================================================
   PORTFOLIO BACKGROUND + GRADIENT OVERRIDE
========================================================= */

/* Mobile / base */
.panel-portfolio {
  position: relative;
  overflow: visible !important;

  background-image:
    url("../img/panels/portfolio/bg_vyhlady.webp"),
    url("../img/svg/shape-4.svg") !important;

  background-position:
    bottom center,
    bottom right !important;

  background-repeat:
    no-repeat,
    no-repeat !important;

  background-size:
    cover,
    clamp(50%, 50vw, 600px) auto !important;
}

.panel-portfolio::before {
  content: "" !important;
  position: absolute !important;

  top: -180px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  inset: auto !important;

  height: 360px !important;

  background-image: linear-gradient(
    to bottom,
    var(--vyhlady-primary-a00) 0%,
    var(--elon-primary) 55%,
    var(--elon-primary) 100%
  ) !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

.panel-portfolio > * {
  position: relative;
  z-index: 1;
}

@media only screen and (min-width: 768px) {
  .panel-portfolio {
    background-image:
      url("../img/panels/portfolio/bg_vyhlady.webp"),
      url("../img/svg/shape-3.svg") !important;

    background-position:
      bottom center,
      bottom left !important;

    background-size:
      cover,
      clamp(35%, 35vw, 600px) auto !important;
  }
}

/* =========================================================
   INTRO - hide left number block + center right column only
========================================================= */

.panel-intro .two-side-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.panel-intro .two-side-wrapper > .left-side {
  display: none !important;
}

.panel-intro .two-side-wrapper > .right-side {
  width: 100% !important;
  max-width: 1100px !important;
  flex: 0 1 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.panel-intro .content-section-header {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.panel-intro .text-icon-list-component {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  text-align: initial !important;
}

.panel-intro .text-icon-list-component .list {
  justify-content: flex-start !important;
}

.panel-intro .text-icon-container {
  text-align: left !important;
  justify-content: flex-start !important;
}

@media (max-width: 767px) {
  .panel-intro article {
    min-height: 0 !important;
  }

  .panel-intro .two-side-wrapper {
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
    gap: 32px !important;
  }

  .panel-intro .two-side-wrapper > .right-side {
    max-width: 100% !important;
    flex: 0 1 auto !important;
  }

  .panel-intro .content-section-header {
    margin-bottom: 28px !important;
  }

  .panel-intro .text-icon-list-component {
    margin-bottom: 0 !important;
  }

  .panel-intro .text-icon-list-component .list {
    gap: 18px !important;
  }
}

/* =========================================================
   FEATURES - top divider on shared pages
========================================================= */

body.page-home .panel-features.content-section,
.page-o-projekte-builder .panel-features.content-section {
  border-top: 1px solid var(--vyhlady-secondary-a35);
}

/* =========================================================
   O PROJEKTE 2 - custom background
========================================================= */

body.page-id-322 {
  background-color: var(--elon-primary) !important;
}

body.page-id-322 .hero-component.landing .content .content-inner {
  background-color: var(--elon-primary) !important;
}

/* =========================================================
   APARTMENT / HOUSE DETAIL COLORS - VÝHĽADY
========================================================= */

body.single-apartment,
body.page-apartment-detail {
  --vyhlady-detail-accent-border: rgba(247, 148, 29, 0.32);
}

body.single-apartment .apartment-detail-component,
body.page-apartment-detail .apartment-detail-component {
  background-color: var(--elon-primary) !important;
}

body.single-apartment .button.button-has-icon,
body.page-apartment-detail .button.button-has-icon {
  color: var(--elon-text-dark) !important;
  background-color: var(--elon-secondary) !important;
  border-color: var(--elon-secondary) !important;
}

body.single-apartment .button.button-has-icon:hover,
body.page-apartment-detail .button.button-has-icon:hover {
  color: var(--elon-text-dark) !important;
  background-color: var(--vyhlady-yellow) !important;
  border-color: var(--vyhlady-yellow) !important;
}

body.single-apartment .apartment-detail-component .basic-info-container .two-columns-wrapper > .left-side .price-info,
body.page-apartment-detail .apartment-detail-component .basic-info-container .two-columns-wrapper > .left-side .price-info,
body.single-apartment .hero-component.apartment-detail .price-info,
body.page-apartment-detail .hero-component.apartment-detail .price-info {
  color: var(--elon-text-dark) !important;
  background-color: var(--vyhlady-yellow) !important;
}

body.single-apartment .accordion-component > .item,
body.page-apartment-detail .accordion-component > .item,
body.single-apartment .apartment-detail-component .basic-info-container .two-columns-wrapper > .left-side .accordion-component > .item:last-child,
body.page-apartment-detail .apartment-detail-component .basic-info-container .two-columns-wrapper > .left-side .accordion-component > .item:last-child {
  border-color: var(--elon-secondary) !important;
}

body.single-apartment .accordion-component > .item > .header .title,
body.page-apartment-detail .accordion-component > .item > .header .title,
body.single-apartment .accordion-component > .item > .header .toggle-button,
body.page-apartment-detail .accordion-component > .item > .header .toggle-button {
  color: var(--elon-secondary) !important;
}

body.single-apartment .apartment-detail-component .attribute-list-item-container,
body.page-apartment-detail .apartment-detail-component .attribute-list-item-container {
  background-color: var(--elon-primary-dark) !important;
}

body.single-apartment .apartment-detail-component .attribute-list-item-container .body .label,
body.page-apartment-detail .apartment-detail-component .attribute-list-item-container .body .label {
  color: var(--elon-secondary) !important;
}

body.single-apartment .apartment-detail-component .more-info-container > .container,
body.page-apartment-detail .apartment-detail-component .more-info-container > .container {
  color: var(--elon-text-dark) !important;
  background-color: var(--vyhlady-light-bg) !important;
}

body.single-apartment .tab-component .tab-header menu,
body.single-apartment .tab-component .tab-header ul,
body.page-apartment-detail .tab-component .tab-header menu,
body.page-apartment-detail .tab-component .tab-header ul {
  border: 1px solid var(--elon-primary-dark) !important;
}

body.single-apartment .tab-component .tab-header menu li.active > a,
body.single-apartment .tab-component .tab-header ul li.active > a,
body.single-apartment .tab-component .tab-header menu li > a:hover,
body.single-apartment .tab-component .tab-header ul li > a:hover,
body.page-apartment-detail .tab-component .tab-header menu li.active > a,
body.page-apartment-detail .tab-component .tab-header ul li.active > a,
body.page-apartment-detail .tab-component .tab-header menu li > a:hover,
body.page-apartment-detail .tab-component .tab-header ul li > a:hover {
  color: var(--elon-secondary) !important;
  background-color: var(--elon-primary-dark) !important;
}

body.single-apartment .tab-component .tab-header menu li.active > a,
body.single-apartment .tab-component .tab-header ul li.active > a,
body.page-apartment-detail .tab-component .tab-header menu li.active > a,
body.page-apartment-detail .tab-component .tab-header ul li.active > a {
  border: 1px solid var(--vyhlady-detail-accent-border) !important;
}

body.single-apartment .apartment-detail-component .feature-list-item-container figure,
body.page-apartment-detail .apartment-detail-component .feature-list-item-container figure {
  color: var(--elon-secondary) !important;
  border: 1px solid var(--vyhlady-detail-accent-border) !important;
}

body.single-apartment .apartment-detail-component .feature-list-item-container figure::before,
body.single-apartment .apartment-detail-component .feature-list-item-container figure::after,
body.page-apartment-detail .apartment-detail-component .feature-list-item-container figure::before,
body.page-apartment-detail .apartment-detail-component .feature-list-item-container figure::after {
  color: var(--elon-secondary) !important;
  border-color: var(--vyhlady-detail-accent-border) !important;
}

/* =========================================================
   FOOTER - hide footer nav
========================================================= */

#footer nav.footer {
  display: none !important;
}

/* =========================================================
   GLOBAL FOOTER COLORS - VÝHĽADY
========================================================= */

:root {
  --elon-footer-background: #192d37;
  --elon-footer-background-dark: #142630;
  --elon-footer-text: #ffffff;
  --elon-footer-text-muted: rgba(255, 255, 255, 0.68);
  --elon-footer-border: rgba(255, 255, 255, 0.12);
  --elon-footer-accent: #f7941d;
}

/* Main footer background */
#footer {
  background-color: var(--elon-footer-background) !important;
  color: var(--elon-footer-text) !important;
}

/* Footer rows */
#footer .footer-row {
  background-color: var(--elon-footer-background) !important;
  border-color: var(--elon-footer-border) !important;
}

/* Titles */
#footer .footer-section .title,
#footer .form-title {
  color: var(--elon-footer-text) !important;
}

/* Texts */
#footer,
#footer p,
#footer .light,
#footer .copyright,
#footer .designed {
  color: var(--elon-footer-text-muted) !important;
}

/* Links */
#footer a {
  color: var(--elon-footer-text) !important;
}

#footer a:hover {
  color: var(--elon-footer-accent) !important;
}

/* Highlight inside footer */
#footer .highlight,
#footer .highlight-orange {
  color: var(--elon-footer-accent) !important;
}

/* Footer newsletter/input area */
#footer .newsletter-form-container {
  color: var(--elon-footer-text) !important;
}

/* Footer nav remains hidden */
#footer nav.footer {
  display: none !important;
}

/* =========================================================
   FOOTER NEWSLETTER BACKGROUND - VÝHĽADY
========================================================= */

body #footer .newsletter-form-container {
  background-color: #0a2735 !important;
}

/* =========================================================
   O PROJEKTE - widget border color
========================================================= */

html body #panel-gb322-6a27539af22b4-0-1-0 > .panel-widget-style,
html body #panel-gb322-6a27539af22b4-0-1-0 .panel-widget-style {
  border-left: 1px solid #f7941d !important;
  border-left-color: #f7941d !important;
}

/* =========================================================
   O PROJEKTE - ACCORDION COLORS
========================================================= */

main.page-o-projekte-builder .accordion-component > .item {
  border-color: var(--elon-secondary, #f7941d) !important;
}

main.page-o-projekte-builder .accordion-component > .item > .header .title {
  color: var(--elon-secondary, #f7941d) !important;
}

main.page-o-projekte-builder .accordion-component > .item > .header .toggle-button {
  color: var(--elon-secondary, #f7941d) !important;
  border-color: var(--elon-secondary, #f7941d) !important;
}

main.page-o-projekte-builder .accordion-component > .item > .header .toggle-button::before {
  background-color: var(--elon-secondary, #f7941d) !important;
  border-color: var(--elon-secondary, #f7941d) !important;
}

/* =========================================================
   SHARED CONTACT FORM SECTION - VÝHĽADY COLORS
========================================================= */

/* Top fade gradient */
.panel-contact-form::after {
  background-image: linear-gradient(
    to bottom,
    var(--elon-primary, #63503f) 0%,
    var(--background-color-3-a00) 100%
  ) !important;
}

/* Header dekor / background strip */
.panel-contact-form article .content-section-header::before {
  background-color: #2b231c !important;
}

/* Main body background */
.panel-contact-form article > .body {
  background-color: #2b231c !important;
}

/* Form wrapper */
.panel-contact-form .contact-form-container {
  background-color: #2b231c !important;
}

/* Checkbox base */
.panel-contact-form .input-checkbox-wrapper input[type="checkbox"] {
  background-color: rgba(247, 148, 29, 0.36) !important;
  border: var(--input-checkbox-border-size, var(--input-border-size, 1px)) solid rgba(247, 148, 29, 0.62) !important;
}

/* Checkbox hover */
.panel-contact-form .input-checkbox-wrapper input[type="checkbox"]:hover {
  background-color: rgba(247, 148, 29, 0.48) !important;
  border-color: rgba(247, 148, 29, 0.82) !important;
}

/* Checkbox checked */
.panel-contact-form .input-checkbox-wrapper input[type="checkbox"]:checked {
  background-color: var(--elon-secondary, #f7941d) !important;
  border-color: var(--elon-secondary, #f7941d) !important;
}

/* Contact person card */
.panel-contact-form .contact-person-list-item-container {
  background-color: #492f11 !important;
}

/* Contact person image border */
.panel-contact-form .contact-person-list-item-container figure.main {
  border: 8px solid rgb(197, 122, 28) !important;
}

/* Contact person name / job */
.panel-contact-form .contact-person-list-item-container .body .job,
.panel-contact-form .contact-person-list-item-container .body .name {
  color: var(--elon-secondary, #f7941d) !important;
}

/* Contact person email only - same color as name */
.panel-contact-form .contact-person-list-item-container .quick-contact-component ul li:first-child,
.panel-contact-form .contact-person-list-item-container .quick-contact-component ul li:first-child a,
.panel-contact-form .contact-person-list-item-container .quick-contact-component ul li:first-child a:hover {
  color: var(--elon-secondary, #f7941d) !important;
}

.panel-contact-form .form-control,
.panel-contact-form input[type="email"],
.panel-contact-form input[type="number"],
.panel-contact-form input[type="password"],
.panel-contact-form input[type="search"],
.panel-contact-form input[type="tel"],
.panel-contact-form input[type="text"],
.panel-contact-form input[type="url"],
.panel-contact-form textarea {
  background-color: rgba(247, 148, 29, 0.36) !important;
  border: var(--input-border-size, 1px) solid rgba(247, 148, 29, 0.62) !important;
  color: #ffffff !important;
}

/* Placeholder */
.panel-contact-form .form-control::placeholder,
.panel-contact-form input::placeholder,
.panel-contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* =========================================================
   KONTAKT - hero background
========================================================= */

body.page-id-1317 .hero-component.landing .content .content-inner {
  background-color: #63503f !important;
}

/* =========================================================
   PONUKA NEHNUTEĽNOSTÍ - hero title accents
========================================================= */

.hero-component.apartment-landing-2.landing .content .hero-title::before,
.hero-component.apartment-landing-2.landing .content .hero-title::after {
  background-color: #f7941d !important;
}

/* Highlight v hero nadpise */
.hero-component.apartment-landing-2.landing .content .hero-title .highlight {
  color: #f7941d !important;
  font-size: 1em !important;
}

/* =========================================================
   APARTMENTS / HOUSE DETAIL - VÝHĽADY COLORS
========================================================= */

/* Apartment detail table */
table.apartment-cell td,
table.apartment-cell th {
  color: #192d37 !important;
}

/* Apartment detail content headings */
.apartment-detail-component .apartment-content h3 {
  color: #f7941d !important;
}

/* Apartment side navigation */
.apartment-side-nav-container {
  color: #192d37 !important;
}

/* =========================================================
   APARTMENT DETAIL - side navigation hover like header menu
========================================================= */

body.single-apartment nav.side-navigation menu li > a:hover,
body.single-apartment nav.side-navigation ul li > a:hover,
body.page-apartment-detail nav.side-navigation menu li > a:hover,
body.page-apartment-detail nav.side-navigation ul li > a:hover {
  background-color: var(--primary-nav-item-color-hover-alpha, rgba(247, 148, 29, 0.20)) !important;
  border-color: transparent !important;
}

/* =========================================================
   APARTMENT DETAIL - side navigation active like header menu
========================================================= */

body.single-apartment nav.side-navigation menu li.active > a,
body.single-apartment nav.side-navigation ul li.active > a,
body.page-apartment-detail nav.side-navigation menu li.active > a,
body.page-apartment-detail nav.side-navigation ul li.active > a {
  background-color: var(--primary-nav-item-color-active-alpha, rgba(247, 148, 29, 0.20)) !important;
  border-color: transparent !important;
}

/* =========================================================
   APARTMENT DETAIL - main floorplan / more info image size
========================================================= */

.apartment-detail-component .more-info-container figure.main img {
  display: block !important;
  width: auto !important;
  max-width: min(100%, 1100px) !important;
  height: auto !important;
  max-height: 78vh !important;
  margin-left: auto !important;
  margin-right: auto !important;
  object-fit: contain !important;
}

/* =========================================================
   GLOBAL BUTTON COLOR - VÝHĽADY
========================================================= */

.button,
.button.button-inverse,
.page-o-projekte-builder .button,
.panel-intro .button,
.panel-portfolio .button,
.panel-location .button,
.panel-features .button,
.panel-construction .button,
.panel-cta .button,
.panel-apartments .button,
.panel-offer .button,
.panel-contact-form .button {
  background-color: #ffc600 !important;
  border-color: #ffc600 !important;
  color: #192d37 !important;
}

/* Ikony v tlačidlách */
.button .icon-arrow-right,
.button .icon-arrow-left,
.button .icon-arrow-down,
.button.button-inverse .icon-arrow-right,
.button.button-inverse .icon-arrow-left,
.button.button-inverse .icon-arrow-down {
  color: #192d37 !important;
}

.button:hover,
.button.button-inverse:hover,
.page-o-projekte-builder .button:hover,
.panel-intro .button:hover,
.panel-portfolio .button:hover,
.panel-location .button:hover,
.panel-features .button:hover,
.panel-construction .button:hover,
.panel-cta .button:hover,
.panel-apartments .button:hover,
.panel-offer .button:hover,
.panel-contact-form .button:hover {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #192d37 !important;
}

/* Ikony v tlačidle po hoveri */
.button:hover .icon-arrow-right,
.button:hover .icon-arrow-left,
.button:hover .icon-arrow-down,
.button.button-inverse:hover .icon-arrow-right,
.button.button-inverse:hover .icon-arrow-left,
.button.button-inverse:hover .icon-arrow-down {
  color: #192d37 !important;
}

/* =========================================================
   SITEORIGIN CUSTOM SECTIONS - VÝHĽADY COLORS
========================================================= */

/* Modré boxy / widget pozadie */
#panel-gb279-6a29d2657fecb-4-0-0 > .panel-widget-style,
#panel-gb279-6a29d2657fecb-4-1-0 > .panel-widget-style,
#panel-gb279-6a29d2657fecb-4-2-0 > .panel-widget-style,
#panel-gb279-6a29d2657fecb-4-3-0 > .panel-widget-style,
#panel-gb279-6a29d2657fecb-4-4-0 > .panel-widget-style {
  background-color: #192d37 !important;
}

/* Oranžová spodná linka */
#panel-w6a29db2679246-1-0-0 > .panel-widget-style,
#panel-w6a29db2679246-1-2-0 > .panel-widget-style {
  border-bottom: 1px solid #f7941d !important;
}

/* Modré pozadie riadku */
#pg-gb279-6a29dbf1b1647-2 > .panel-row-style {
  background-color: #192d37 !important;
}

/* =========================================================
   ELON PROJEKTY - FULL WIDTH PROJECT BANNERS
   Clean revised version
========================================================= */

.elon-projects-showcase {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 42px);
  padding: clamp(24px, 4vw, 72px) clamp(14px, 4vw, 64px);
  background-color: var(--elon-primary, #63503f);
}

.elon-project-banner {
  --project-accent: #ffc600;
  --project-accent-soft: rgba(255, 198, 0, 0.12);
  --project-accent-border: rgba(255, 198, 0, 0.62);

  position: relative;
  isolation: isolate;
  min-height: clamp(460px, 62vh, 740px);
  border-radius: clamp(22px, 3vw, 44px);
  overflow: hidden;
  color: #ffffff;
  background-color: #192d37;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.28);
  transform: translateY(0) scale(1);
  transition:
    transform 700ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 700ms cubic-bezier(.16, 1, .3, 1);
}

.elon-project-banner__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--project-bg);
  background-size: cover;
  background-position: center center;
  transform: scale(1);
  transition:
    transform 900ms cubic-bezier(.16, 1, .3, 1),
    filter 900ms cubic-bezier(.16, 1, .3, 1);
}

.elon-project-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(25, 45, 55, 0.94) 0%, rgba(25, 45, 55, 0.72) 42%, rgba(25, 45, 55, 0.18) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.05));
  transition: background 700ms cubic-bezier(.16, 1, .3, 1);
}

.elon-project-banner__content {
  min-height: inherit;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(32px, 5vw, 70px);
  padding: clamp(30px, 5vw, 78px);
}

/* Logo - supports both <img class="elon-project-banner__logo"> and wrapper logo blocks */
.elon-project-banner__logo {
  width: auto;
  max-width: clamp(230px, 22vw, 390px);
  max-height: 125px;
  object-fit: contain;
  object-position: left center;
  display: block;
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.28));
}

.elon-project-banner__logo img {
  width: auto;
  height: auto;
  max-width: clamp(230px, 22vw, 390px);
  max-height: 125px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

/* Optional pseudo-logo version */
.elon-project-banner__logo:not(img) {
  width: fit-content;
  min-height: 86px;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 18px 26px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px);
}

.elon-project-banner__logo-mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--project-accent);
  color: #192d37;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.08em;
  line-height: 1;
}

.elon-project-banner__logo-text {
  color: #ffffff;
  font-size: clamp(24px, 2vw, 36px);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.elon-project-banner__logo-text small {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 800;
}

.elon-project-banner__text {
  max-width: 720px;
}

.elon-project-banner__label {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 18px;
  padding: 8px 14px;
  border: 1px solid var(--project-accent-border);
  border-radius: 999px;
  color: var(--project-accent);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background-color: var(--project-accent-soft);
  backdrop-filter: blur(10px);
}

.elon-project-banner h2 {
  margin: 0 0 14px 0;
  color: #ffffff !important;
  font-size: clamp(42px, 7vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.06em;
}

.elon-project-banner h2 .project-highlight {
  color: var(--project-accent) !important;
}

.elon-project-banner h3 {
  margin: 0 0 20px 0;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: clamp(22px, 2.6vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.elon-project-banner p {
  margin: 0;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.65;
}

.elon-project-banner__button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 999px;
  background-color: var(--project-accent);
  border: 1px solid var(--project-accent);
  color: #192d37 !important;
  text-decoration: none !important;
  font-weight: 800;
  line-height: 1;
  transition:
    background-color 350ms ease,
    border-color 350ms ease,
    color 350ms ease,
    transform 350ms ease;
}

.elon-project-banner__button [class^="icon-"],
.elon-project-banner__button [class*=" icon-"],
.elon-project-banner__button-arrow {
  color: #192d37 !important;
  font-size: 14px;
  transition: transform 350ms ease;
}

/* Project color variants */
.elon-project-banner--vyhlady {
  --project-accent: #f7941d;
  --project-accent-soft: rgba(247, 148, 29, 0.13);
  --project-accent-border: rgba(247, 148, 29, 0.62);
}

.elon-project-banner--pzd {
  --project-accent: #c3e8b2;
  --project-accent-soft: rgba(195, 232, 178, 0.14);
  --project-accent-border: rgba(195, 232, 178, 0.68);
}

.elon-project-banner--coming {
  --project-accent: #ffd700;
  --project-accent-soft: rgba(255, 215, 0, 0.14);
  --project-accent-border: rgba(255, 215, 0, 0.68);
}

/* Desktop hover + JS active */
.elon-project-banner:hover,
.elon-project-banner.is-active {
  transform: translateY(-8px) scale(1.012);
  box-shadow: 0 38px 110px rgba(0, 0, 0, 0.36);
}

.elon-project-banner:hover .elon-project-banner__bg,
.elon-project-banner.is-active .elon-project-banner__bg {
  transform: scale(1.08);
  filter: saturate(1.08) contrast(1.04);
}

.elon-project-banner:hover .elon-project-banner__overlay,
.elon-project-banner.is-active .elon-project-banner__overlay {
  background:
    linear-gradient(90deg, rgba(25, 45, 55, 0.96) 0%, rgba(25, 45, 55, 0.62) 38%, rgba(25, 45, 55, 0.08) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.03));
}

.elon-project-banner:hover .elon-project-banner__button,
.elon-project-banner.is-active .elon-project-banner__button {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #192d37 !important;
  transform: translateX(6px);
}

.elon-project-banner:hover .elon-project-banner__button [class^="icon-"],
.elon-project-banner:hover .elon-project-banner__button [class*=" icon-"],
.elon-project-banner:hover .elon-project-banner__button-arrow,
.elon-project-banner.is-active .elon-project-banner__button [class^="icon-"],
.elon-project-banner.is-active .elon-project-banner__button [class*=" icon-"],
.elon-project-banner.is-active .elon-project-banner__button-arrow {
  transform: translateX(4px);
}

/* Tablet */
@media (max-width: 1024px) {
  .elon-projects-showcase {
    padding-inline: 24px;
  }

  .elon-project-banner {
    min-height: 560px;
  }

  .elon-project-banner__logo,
  .elon-project-banner__logo img {
    max-width: clamp(220px, 30vw, 340px);
    max-height: 105px;
  }

  .elon-project-banner__overlay {
    background:
      linear-gradient(90deg, rgba(25, 45, 55, 0.94) 0%, rgba(25, 45, 55, 0.78) 56%, rgba(25, 45, 55, 0.28) 100%),
      linear-gradient(0deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.08));
  }
}

/* Mobile */
@media (max-width: 767px) {
  .elon-projects-showcase {
    gap: 18px;
    padding: 18px 12px 42px;
  }

  .elon-project-banner {
    min-height: 620px;
    border-radius: 24px;
  }

  .elon-project-banner__content {
    padding: 28px 22px;
  }

  .elon-project-banner__logo,
  .elon-project-banner__logo img {
    max-width: 240px;
    max-height: 95px;
  }

  .elon-project-banner__logo:not(img) {
    min-height: 72px;
    padding: 14px 18px;
    gap: 14px;
    border-radius: 16px;
  }

  .elon-project-banner__logo-mark {
    width: 46px;
    height: 46px;
    font-size: 18px;
  }

  .elon-project-banner__logo-text {
    font-size: 21px;
  }

  .elon-project-banner__logo-text small {
    font-size: 10px;
  }

  .elon-project-banner__overlay {
    background:
      linear-gradient(0deg, rgba(25, 45, 55, 0.97) 0%, rgba(25, 45, 55, 0.86) 56%, rgba(25, 45, 55, 0.34) 100%),
      linear-gradient(0deg, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.10));
  }

  .elon-project-banner h2 {
    font-size: clamp(42px, 13vw, 62px);
  }

  .elon-project-banner h3 {
    font-size: 24px;
  }

  .elon-project-banner p {
    font-size: 16px;
    line-height: 1.55;
  }

  .elon-project-banner__button {
    min-height: 52px;
    padding-inline: 20px;
  }

  .elon-project-banner:hover {
    transform: none;
  }

  .elon-project-banner.is-active {
    transform: translateY(-4px) scale(1.006);
  }

  .elon-project-banner.is-active .elon-project-banner__bg {
    transform: scale(1.06);
  }
}

/* Mobile logo correction */
@media (max-width: 767px) {
  .elon-project-banner__logo {
    min-height: 66px !important;
    padding: 14px 16px !important;
    gap: 12px !important;
  }

  .elon-project-banner__logo-mark {
    width: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
  }

  .elon-project-banner__logo-text {
    font-size: 19px !important;
  }

  .elon-project-banner__logo-text small {
    font-size: 10px !important;
  }
}

/* Zmena farby o-projekte - border */
body.page-id-322 #panel-gb322-6a331a14af2f2-0-1-0 .panel-widget-style {
    border-left: 1px solid var(--project-highlight-color, #f7941d);
    }