/* =========================================================
   COMMUNITY FOR ALL
   HOME DESIGN
   ========================================================= */

:root {
  --cfa-navy: #071d31;
  --cfa-navy-mid: #0d3453;
  --cfa-navy-light: #174b70;

  --cfa-orange: #ff7a18;
  --cfa-orange-light: #ff9b35;
  --cfa-orange-dark: #d6530c;

  --cfa-red: #a91932;
  --cfa-white: #ffffff;
  --cfa-soft: #dce7f1;
  --cfa-muted: #aebdca;

  --cfa-border: rgba(118, 184, 229, .42);
  --cfa-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}


/* =========================================================
   GLOBAL
   ========================================================= */

html {
  background: var(--cfa-navy);
}

body {
  margin: 0 !important;
  min-height: 100vh;
  color: var(--cfa-white);
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(255, 126, 30, .22) 0,
      rgba(255, 126, 30, .08) 16%,
      transparent 35%
    ),
    radial-gradient(
      circle at 15% 35%,
      rgba(26, 93, 139, .35) 0,
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #07182b 0%,
      #0b2d49 47%,
      #071d31 100%
    ) !important;

  background-attachment: fixed !important;
  font-family: Arial, Helvetica, sans-serif !important;
}


/* subtle mountain-like atmosphere */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;

  background:
    linear-gradient(
      150deg,
      transparent 0 63%,
      rgba(4, 20, 34, .28) 63% 67%,
      transparent 67%
    ),
    linear-gradient(
      30deg,
      transparent 0 70%,
      rgba(5, 27, 44, .35) 70% 74%,
      transparent 74%
    );
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.container {
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 14px 22px 18px !important;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}

.top-left,
.top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}


/* SUPPORT */

.donate-top-btn {
  min-height: 42px !important;
  padding: 8px 15px !important;

  background:
    linear-gradient(
      100deg,
      rgba(255, 93, 22, .92),
      rgba(107, 41, 26, .72)
    ) !important;

  color: #fff !important;

  border: 1.5px solid var(--cfa-orange) !important;
  border-radius: 18px !important;

  box-shadow:
    inset 0 0 16px rgba(255, 126, 30, .12),
    0 5px 14px rgba(0, 0, 0, .18) !important;

  font-size: 15px !important;
  font-weight: 800 !important;
}


/* CART + USER */

.cart-top-btn,
.user-btn {
  min-height: 42px !important;
  background: rgba(9, 39, 63, .78) !important;
  color: #fff !important;

  border: 1.5px solid rgba(115, 183, 229, .48) !important;
  border-radius: 16px !important;

  box-shadow:
    inset 0 0 15px rgba(53, 132, 185, .10),
    0 5px 14px rgba(0, 0, 0, .15) !important;
}

.cart-top-btn {
  min-width: 50px !important;
  padding: 7px 12px !important;
  font-size: 21px !important;
}

.user-btn {
  padding: 7px 14px !important;
  font-size: 16px !important;
}


/* CART BADGE */

.cart-badge {
  background: #ef3d2f !important;
  color: white !important;
  border: 2px solid #10283d !important;
  font-weight: 900 !important;
}


/* =========================================================
   MAIN LOGO / TITLE
   ========================================================= */

.logo {
  margin: 5px auto 2px !important;

  color: #fff !important;
  text-align: center !important;

  font-size: 38px !important;
  line-height: .96 !important;
  font-weight: 900 !important;
  letter-spacing: -.8px !important;

  text-shadow: 0 3px 12px rgba(0, 0, 0, .28) !important;
}


/*
  If Community / For / All are separate spans,
  these rules give the reference orange-white-orange look.
*/

.logo span:first-child {
  color: #fff !important;
}

.logo span:nth-child(2) {
  color: #fff !important;
}

.logo span:last-child {
  color: var(--cfa-orange) !important;
}


/* ORGANISATION */

.charity {
  position: relative !important;

  margin: 8px auto 0 !important;
  padding-bottom: 42px !important;

  color: #fff !important;
  text-align: center !important;

  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  line-height: 1.45 !important;
  text-transform: uppercase !important;
}


/* PEOPLE | COMMUNITY | OPPORTUNITIES */

.charity::after {
  content: "PEOPLE   |   COMMUNITY   |   OPPORTUNITIES";
  position: absolute;

  left: 50%;
  bottom: 21px;

  width: 100%;
  transform: translateX(-50%);

  color: #fff;

  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  white-space: nowrap;
}


/* =========================================================
   STRONGER TOGETHER
   ========================================================= */

.language {
  position: relative !important;

  display: flex !important;
  width: 250px !important;
  height: 46px !important;

  margin: 22px auto 13px !important;

  border: 1.5px solid rgba(91, 169, 222, .75) !important;
  border-radius: 17px !important;

  background: rgba(6, 29, 48, .70) !important;

  overflow: visible !important;
}


/* handwritten motto */

.language::before {
  content: "Stronger Together";

  position: absolute;
  left: 50%;
  top: -29px;

  transform: translateX(-50%) rotate(-2deg);

  width: 320px;

  color: var(--cfa-orange);

  font-family:
    "Brush Script MT",
    "Segoe Script",
    "Lucida Handwriting",
    cursive !important;

  font-size: 23px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;

  text-align: center;

  text-shadow: 0 2px 8px rgba(0, 0, 0, .25);

  pointer-events: none;
}


/* =========================================================
   LANGUAGE BUTTONS
   ========================================================= */

.lang-btn {
  flex: 1 1 50% !important;
  min-height: 43px !important;
  height: 43px !important;

  margin: 0 !important;
  padding: 4px 18px !important;

  border: 0 !important;
  border-radius: 15px !important;

  background: transparent !important;
  color: #fff !important;

  font-size: 17px !important;
  font-weight: 800 !important;
}


/* selected language */

.lang-btn.active,
.lang-btn.selected,
#skLangBtn.active,
#enLangBtn.active {
  background:
    linear-gradient(
      110deg,
      var(--cfa-orange-light),
      var(--cfa-orange)
    ) !important;

  color: #10243a !important;
}


/* =========================================================
   HOME PAGE
   ========================================================= */

#homePage {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;

  margin: 0 auto !important;
  padding: 0 !important;
}


/* =========================================================
   HOME CARDS
   ========================================================= */

#homePage .menu-btn {
  position: relative !important;

  display: flex !important;
  align-items: center !important;

  width: 100% !important;
  min-height: 65px !important;
  height: 65px !important;

  margin: 0 !important;

  padding:
    7px
    44px
    7px
    66px !important;

  overflow: hidden !important;

  color: #fff !important;

  border:
    1.3px solid
    rgba(102, 173, 220, .42) !important;

  border-radius: 18px !important;

  box-shadow:
    inset 0 0 22px rgba(70, 146, 196, .10),
    0 5px 14px rgba(0, 0, 0, .16) !important;

  text-align: left !important;

  font-size: 18px !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;

  text-shadow: 0 2px 5px rgba(0, 0, 0, .28) !important;
}


/* right arrow */

#homePage .menu-btn::after {
  content: "›";

  position: absolute;
  right: 16px;
  top: 50%;

  transform: translateY(-52%);

  color: #fff;

  font-family: Arial, sans-serif;
  font-size: 38px;
  line-height: 1;
  font-weight: 300;

  text-shadow: 0 2px 5px rgba(0, 0, 0, .25);
}


/* =========================================================
   SVG ICON SYSTEM
   ========================================================= */

#homePage .menu-btn::before {
  content: "";

  position: absolute;

  left: 18px;
  top: 50%;

  width: 34px;
  height: 34px;

  transform: translateY(-50%);

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  z-index: 2;
}


/* =========================================================
   EVENTS
   ========================================================= */

#eventsBtn,
#homePage .events {
  background:
    radial-gradient(
      circle at 78% 45%,
      rgba(255, 183, 76, .22),
      transparent 31%
    ),
    linear-gradient(
      100deg,
      #f36808 0%,
      #ff8617 48%,
      #503126 100%
    ) !important;

  border-color: rgba(255, 157, 50, .88) !important;
}

#eventsBtn::before,
#homePage .events::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='white' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='14' width='48' height='42' rx='5'/%3E%3Cpath d='M8 26h48M20 7v14M44 7v14'/%3E%3Cpath d='M20 36h2M31 36h2M42 36h2M20 46h2M31 46h2M42 46h2'/%3E%3C/g%3E%3C/svg%3E");
}


/* =========================================================
   BOOKINGS
   ========================================================= */

#bookingsBtn,
#homePage .bookings {
  background:
    radial-gradient(
      circle at 78% 45%,
      rgba(40, 106, 151, .24),
      transparent 34%
    ),
    linear-gradient(
      100deg,
      #123f61,
      #082942
    ) !important;
}

#bookingsBtn::before,
#homePage .bookings::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='white' stroke-width='5' stroke-linejoin='round'%3E%3Cpath d='M10 25L25 10l29 29-15 15L10 25z'/%3E%3Cpath d='M31 20l13 13' stroke-dasharray='3 5'/%3E%3C/g%3E%3C/svg%3E");
}


/* =========================================================
   FATRA POTRAVINY
   Grocery / shopping icon - NOT restaurant
   ========================================================= */

#fatraBtn,
#homePage .fatra {
  background:
    radial-gradient(
      circle at 76% 48%,
      rgba(255, 130, 38, .20),
      transparent 34%
    ),
    linear-gradient(
      100deg,
      #71331d,
      #2b2c2c
    ) !important;

  border-color: rgba(207, 109, 52, .55) !important;
}

#fatraBtn::before,
#homePage .fatra::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ff9b38' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11h8l6 29h28l7-21H18'/%3E%3Ccircle cx='27' cy='51' r='4'/%3E%3Ccircle cx='47' cy='51' r='4'/%3E%3Cpath d='M24 27h27M29 19v20M40 19v20'/%3E%3C/g%3E%3C/svg%3E");
}


/* =========================================================
   FACE PAINTING
   ========================================================= */

#faceBtn,
#homePage .face {
  background:
    radial-gradient(
      circle at 80% 50%,
      rgba(230, 81, 105, .24),
      transparent 34%
    ),
    linear-gradient(
      100deg,
      #b21e38,
      #64172b
    ) !important;

  border-color: rgba(236, 80, 111, .60) !important;
}

#faceBtn::before,
#homePage .face::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M33 8C18 8 7 18 7 32c0 13 10 24 23 24h5c5 0 7-4 5-8-2-4 1-8 6-8h5c5 0 7-4 7-9C58 18 47 8 33 8z' fill='none' stroke='%23ff8798' stroke-width='5' stroke-linejoin='round'/%3E%3Ccircle cx='20' cy='28' r='4' fill='%23ff8798'/%3E%3Ccircle cx='29' cy='19' r='4' fill='%23ff8798'/%3E%3Ccircle cx='41' cy='20' r='4' fill='%23ff8798'/%3E%3Ccircle cx='48' cy='29' r='4' fill='%23ff8798'/%3E%3C/svg%3E");
}


/* =========================================================
   ABOUT
   ========================================================= */

#aboutBtn,
#homePage .about {
  background:
    radial-gradient(
      circle at 77% 48%,
      rgba(255, 135, 46, .15),
      transparent 31%
    ),
    linear-gradient(
      100deg,
      #123f61,
      #092c47
    ) !important;
}

#aboutBtn::before,
#homePage .about::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='white'%3E%3Ccircle cx='32' cy='18' r='9'/%3E%3Ccircle cx='14' cy='24' r='7'/%3E%3Ccircle cx='50' cy='24' r='7'/%3E%3Cpath d='M17 55V44c0-9 6-15 15-15s15 6 15 15v11H17z'/%3E%3Cpath d='M3 54V44c0-7 4-12 11-12 4 0 7 2 9 5-4 4-6 9-6 15v2H3zM47 54v-2c0-6-2-11-6-15 2-3 5-5 9-5 7 0 11 5 11 12v10H47z'/%3E%3C/g%3E%3C/svg%3E");
}


/* =========================================================
   CONTACT
   ========================================================= */

#contactBtn,
#homePage .contact {
  background:
    radial-gradient(
      circle at 80% 48%,
      rgba(60, 126, 169, .20),
      transparent 34%
    ),
    linear-gradient(
      100deg,
      #123f61,
      #092c47
    ) !important;
}

#contactBtn::before,
#homePage .contact::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='white' stroke-width='5' stroke-linejoin='round'%3E%3Crect x='7' y='14' width='50' height='36' rx='3'/%3E%3Cpath d='M9 18l23 18 23-18M9 47l17-15M55 47L38 32'/%3E%3C/g%3E%3C/svg%3E");
}


/* =========================================================
   REMOVE OLD CSS ICONS IF PRESENT
   The original emoji remains part of the current button text.
   Keep our SVG visually separated from it.
   ========================================================= */

#homePage .menu-btn {
  background-clip: padding-box !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
  position: relative !important;

  margin: 11px auto 0 !important;
  padding: 0 10px 38px !important;

  color: var(--cfa-soft) !important;
  text-align: center !important;

  font-size: 11px !important;
  line-height: 1.35 !important;
}


/* orange Community For All heading */

footer::before {
  content: "Community For All";

  display: block;

  margin-bottom: 3px;

  color: var(--cfa-orange);

  font-size: 15px;
  line-height: 1.1;
  font-weight: 900;
}


/* bottom motto */

footer::after {
  content: "──────   ♥   ──────\A SMALL ACTIONS  MAKE A BIG DIFFERENCE";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  color: var(--cfa-orange);

  white-space: pre-line;

  font-size: 9px;
  line-height: 1.8;
  font-weight: 700;
  letter-spacing: 2px;
}


/* =========================================================
   MOBILE - GALAXY / NORMAL PHONE
   ========================================================= */

@media (max-width: 600px) {

  .container {
    padding:
      10px
      16px
      10px !important;
  }


  /* top controls */

  .topbar {
    margin-bottom: 5px !important;
  }

  .donate-top-btn,
  .cart-top-btn,
  .user-btn {
    min-height: 38px !important;
  }

  .donate-top-btn {
    padding: 6px 12px !important;
    font-size: 14px !important;
  }

  .cart-top-btn {
    min-width: 46px !important;
    font-size: 19px !important;
  }

  .user-btn {
    padding: 6px 11px !important;
    font-size: 15px !important;
  }


  /* title */

  .logo {
    margin-top: 5px !important;

    font-size: 32px !important;
    line-height: .95 !important;
  }

  .charity {
    margin-top: 7px !important;
    padding-bottom: 38px !important;

    font-size: 9px !important;
    letter-spacing: 2.4px !important;
  }

  .charity::after {
    bottom: 19px;

    font-size: 8px;
    letter-spacing: 1.35px;
  }


  /* motto + languages */

  .language {
    width: 210px !important;
    height: 40px !important;

    margin-top: 18px !important;
    margin-bottom: 10px !important;

    border-radius: 15px !important;
  }

  .language::before {
    top: -24px;
    width: 280px;
    font-size: 20px;
  }

  .lang-btn {
    min-height: 37px !important;
    height: 37px !important;

    padding: 3px 15px !important;

    border-radius: 13px !important;

    font-size: 15px !important;
  }


  /* menu */

  #homePage {
    gap: 6px !important;
  }

  #homePage .menu-btn {
    min-height: 58px !important;
    height: 58px !important;

    padding:
      5px
      38px
      5px
      58px !important;

    border-radius: 16px !important;

    font-size: 16px !important;
    line-height: 1.05 !important;
  }

  #homePage .menu-btn::before {
    left: 15px;

    width: 30px;
    height: 30px;
  }

  #homePage .menu-btn::after {
    right: 13px;
    font-size: 32px;
  }


  /* footer */

  footer {
    margin-top: 8px !important;
    padding-bottom: 32px !important;

    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  footer::before {
    margin-bottom: 2px;
    font-size: 13px;
  }

  footer::after {
    font-size: 7.5px;
    line-height: 1.7;
    letter-spacing: 1.35px;
  }
}


/* =========================================================
   SMALLER MOBILE
   ========================================================= */

@media (max-width: 390px) {

  .container {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  .logo {
    font-size: 29px !important;
  }

  .charity {
    font-size: 8px !important;
    letter-spacing: 2px !important;
  }

  .charity::after {
    font-size: 7px;
    letter-spacing: 1px;
  }

  .language {
    width: 195px !important;
  }

  #homePage .menu-btn {
    min-height: 54px !important;
    height: 54px !important;

    padding-left: 54px !important;

    font-size: 15px !important;
  }

  #homePage .menu-btn::before {
    left: 14px;

    width: 27px;
    height: 27px;
  }
}


/* =========================================================
   SHORT PHONE SCREENS
   Compress HOME vertically so the full landing page fits.
   Does NOT disable scrolling on the rest of the app.
   ========================================================= */

@media (max-width: 600px) and (max-height: 850px) {

  .container {
    padding-top: 7px !important;
  }

  .topbar {
    margin-bottom: 2px !important;
  }

  .logo {
    margin-top: 2px !important;
    font-size: 29px !important;
  }

  .charity {
    margin-top: 4px !important;
    padding-bottom: 34px !important;
  }

  .language {
    margin-top: 15px !important;
    margin-bottom: 7px !important;
  }

  #homePage {
    gap: 5px !important;
  }

  #homePage .menu-btn {
    min-height: 51px !important;
    height: 51px !important;
  }

  footer {
    margin-top: 5px !important;
    padding-bottom: 29px !important;
  }
}
/* ===== FINAL HOME FIX ===== */

/* Keď sa otvorí rezervácia, košík, kontakt atď.,
   úvodné menu musí zmiznúť */
#homePage[style*="display: none"] {
  display: none !important;
}

/* Stronger Together vyššie medzi text a SK/EN */
.language {
  margin-top: 27px !important;
}

.language::before {
  top: -34px !important;
}

/* Spodná časť úvodnej stránky */
footer {
  display: block !important;
  margin-top: 8px !important;
  padding-bottom: 35px !important;
}


/* ===== BOTTOM MOTTO ===== */

.footer {
  position: relative !important;
  padding-bottom: 82px !important;
}

.footer::after {
  content: "♥\A SMALL ACTIONS MAKE A BIG DIFFERENCE";
  display: block !important;
  white-space: pre-line !important;
  text-align: center !important;
  color: #ff7a18 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 2.2 !important;
  letter-spacing: 1.8px !important;
  margin-top: 8px !important;

  background:
    linear-gradient(#ff7a18, #ff7a18) calc(50% - 75px) 7px / 60px 2px no-repeat,
    linear-gradient(#ff7a18, #ff7a18) calc(50% + 75px) 7px / 60px 2px no-repeat !important;
}
/* ===== FOTKY ===== */

/* Hlavné pozadie */
body {
  background-image:
    linear-gradient(rgba(4, 31, 51, 0.68), rgba(4, 31, 51, 0.82)),
    url('Pozadie.jpg') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
}

/* Podujatia */
.events {
  background:
    linear-gradient(90deg, rgba(255,122,26,.92) 0%, rgba(255,122,26,.65) 48%, rgba(72,38,22,.70) 100%),
    url('Podujatia.jpg') center / cover no-repeat !important;
}

/* Moje rezervácie */
.bookings {
  background:
    linear-gradient(90deg, rgba(8,55,84,.94) 0%, rgba(8,55,84,.68) 55%, rgba(8,55,84,.55) 100%),
    url('Mojerezarvacie.jpg') center / cover no-repeat !important;
}

/* Fatra */
.fatra {
  background:
    linear-gradient(90deg, rgba(104,52,25,.94) 0%, rgba(104,52,25,.66) 55%, rgba(50,38,34,.62) 100%),
    url('Fatra.jpg') center / cover no-repeat !important;
}

/* Maľovanie na tvár */
.face {
  background:
    linear-gradient(90deg, rgba(177,31,67,.94) 0%, rgba(177,31,67,.66) 55%, rgba(90,28,50,.60) 100%),
    url('Facepainting.jpg') center / cover no-repeat !important;
}

/* O nás */
.about {
  background:
    linear-gradient(90deg, rgba(7,56,87,.94) 0%, rgba(7,56,87,.67) 55%, rgba(7,56,87,.55) 100%),
    url('Onas.jpg') center / cover no-repeat !important;
}
/* ===== FOTKY TLACIDIEL - FINAL ===== */

.bookings {
  background-image:
    linear-gradient(90deg, rgba(8,55,84,.90), rgba(8,55,84,.52)),
    url('Mojerezarvacie.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
}

.fatra {
  background-image:
    linear-gradient(90deg, rgba(104,52,25,.88), rgba(48,35,29,.52)),
    url('Fatra.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
}

.face {
  background-image:
    linear-gradient(90deg, rgba(177,31,63,.88), rgba(112,23,49,.52)),
    url('Facepainting.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
}

.about {
  background-image:
    linear-gradient(90deg, rgba(7,56,87,.90), rgba(7,56,87,.52)),
    url('Onas.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
}
#bookingsBtn {
  background:
    linear-gradient(90deg, rgba(8,55,84,.90), rgba(8,55,84,.48)),
    url('Mojerezarvacie.jpg') center / cover no-repeat !important;
}

#fatraBtn {
  background:
    linear-gradient(90deg, rgba(104,52,25,.88), rgba(48,35,29,.48)),
    url('Fatra.jpg') center / cover no-repeat !important;
}

#faceBtn {
  background:
    linear-gradient(90deg, rgba(177,31,63,.88), rgba(112,23,49,.48)),
    url('Facepainting.jpg') center / cover no-repeat !important;
}

#aboutBtn {
  background:
    linear-gradient(90deg, rgba(7,56,87,.90), rgba(7,56,87,.48)),
    url('Onas.jpg') center / cover no-repeat !important;
}
/* ===== LOGO ===== */

.logo::before {
  content: "";
  display: block;
  width: 70px;
  height: 70px;
  margin: 0 auto 5px;
  background: url('Logo.png') center / contain no-repeat;
}
/* ===== PODUJATIA FOTO ===== */

#homePage button:first-of-type {
  background:
    linear-gradient(90deg, rgba(255,122,26,.82), rgba(70,35,20,.42)),
    url('Podujatia.jpg') center 34% / 100% auto no-repeat !important;
}
/* ===== FATRA FOTO ===== */

#homePage button:nth-of-type(3) {
  background:
    linear-gradient(90deg, rgba(104,52,25,.82), rgba(55,31,22,.45)),
    url('Fatra.jpg') center / cover no-repeat !important;
}
/* ===== TINUSKA FACEPAINTING FOTO ===== */

#homePage button:nth-of-type(4) {
  background:
    linear-gradient(90deg, rgba(177,31,63,.78), rgba(110,20,50,.38)),
    url('FacePainting.jpeg') center / cover no-repeat !important;
}
/* ===== O NAS FOTO ===== */

#homePage button:nth-of-type(5) {
  background:
    linear-gradient(90deg, rgba(7,56,87,.82), rgba(7,56,87,.38)),
    url('Onas.jpg') center / cover no-repeat !important;
}
/* ===== MOJE REZERVACIE FOTO ===== */

#homePage button:nth-of-type(2) {
  background:
    linear-gradient(90deg, rgba(8,55,84,.72), rgba(8,55,84,.25)),
    url('Mojerezarvacie.jpg') center / 100% 100% no-repeat !important;
}
/* ===== KONTAKT FOTO ===== */
#contactBtn {
  background-image:
    linear-gradient(90deg, rgba(15,45,65,.78), rgba(15,45,65,.30)),
    url('Kontakt.jpg') !important;

  background-size: auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
  background-color: #17364b !important;
}
/* =========================================================
   FINAL MENU DESIGN FIX
   ========================================================= */

/* Výraznejšie názvy všetkých menu kariet */
.menu-card,
.menu-card span,
.menu-card strong,
.menu-card b {
  font-weight: 900 !important;
  text-shadow:
    0 2px 4px rgba(0,0,0,.95),
    0 0 8px rgba(0,0,0,.75) !important;
}

/* Väčší hlavný text na kartách */
.menu-card {
  font-size: 21px !important;
  line-height: 1.12 !important;
}

/* Kontakt – fotografia notebooku a rúk */
#contactBtn {
  background-image:
    linear-gradient(90deg, rgba(15,45,65,.82), rgba(15,45,65,.28)),
    url('Kontakt.jpg') !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
/* =========================================================
   HOME MENU – STRONGER TEXT
   ========================================================= */

#eventsBtn,
#bookingsBtn,
#fatraBtn,
#faceBtn,
#aboutBtn,
#contactBtn {
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-shadow:
    0 2px 4px rgba(0,0,0,.95),
    0 0 7px rgba(0,0,0,.75) !important;
}
/* =========================================================
   KONTAKT – FINAL FOTO
   ========================================================= */

#contactBtn,
#homePage .contact {
  background-image:
    linear-gradient(
      90deg,
      rgba(7, 45, 68, .88) 0%,
      rgba(7, 45, 68, .55) 42%,
      rgba(7, 45, 68, .18) 100%
    ),
    url('Kontaktujtenas.jpg') !important;

  background-size: auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
  background-color: #123f61 !important;
}
/* ===== KONTAKT – POZÍCIA FOTO + JEMNÉ STRATENIE ===== */

#contactBtn,
#homePage .contact {
  background-image:
    linear-gradient(
      90deg,
      #123f61 0%,
      #123f61 48%,
      rgba(18,63,97,.72) 55%,
      rgba(18,63,97,.08) 68%,
      rgba(18,63,97,.08) 82%,
      #123f61 94%,
      #123f61 100%
    ),
    url('Kontaktujtenas.jpg') !important;

  background-size: auto 100% !important;
  background-position: 78% center !important;
  background-repeat: no-repeat !important;
  background-color: #123f61 !important;
}
/* =========================================================
   O NAS – FOTO PANEL
   ========================================================= */

#aboutBtn {
  background:
    linear-gradient(
      90deg,
      #123f61 0%,
      #123f61 35%,
      rgba(18,63,97,.15) 43%,
      rgba(18,63,97,.08) 76%,
      #123f61 86%,
      #123f61 100%
    ),
    url('Onas.jpg') center / auto 100% no-repeat !important;

  background-color: #123f61 !important;
}

/* odstráni pôvodnú ikonu rodiny */
#aboutBtn::before {
  display: none !important;
}

/* text sa posunie na miesto po ikone */
#aboutBtn {
  padding-left: 28px !important;
}
/* ===== O NAS – NOVY FOTO PANEL ===== */

#homePage button:nth-of-type(5) {
  background:
    linear-gradient(
      90deg,
      #123f61 0%,
      #123f61 34%,
      rgba(18,63,97,.18) 42%,
      rgba(18,63,97,.08) 76%,
      #123f61 86%,
      #123f61 100%
    ),
    url('Onas.jpg') center / auto 100% no-repeat !important;

  background-color: #123f61 !important;
  padding-left: 28px !important;
}

/* odstráni ikonu rodiny */
#homePage button:nth-of-type(5)::before {
  display: none !important;
}
/* ===== O NAS FOTO – FINAL POSITION ===== */

#homePage button:nth-of-type(5) {
  background:
    linear-gradient(
      90deg,
      #0b4263 0%,
      #0b4263 38%,
      rgba(11,66,99,.25) 43%,
      rgba(11,66,99,0) 48%,
      rgba(11,66,99,0) 72%,
      rgba(11,66,99,.25) 77%,
      #0b4263 82%,
      #0b4263 100%
    ),
    url('Onas.jpg') 70% center / 34% 100% no-repeat !important;
}
/* ===== O NAS – JEMNE ZAPUSTENIE FOTO ===== */

#homePage button:nth-of-type(5) {
  background:
    linear-gradient(
      90deg,
      #0b4263 0%,
      #0b4263 43%,
      rgba(11,66,99,.75) 47%,
      rgba(11,66,99,.20) 52%,
      rgba(11,66,99,.20) 73%,
      rgba(11,66,99,.75) 78%,
      #0b4263 83%,
      #0b4263 100%
    ),
    url('Onas.jpg') 70% center / 34% 100% no-repeat !important;
}
/* ===== PODUJATIA – NOVÁ FINÁLNA FOTKA ===== */

#homePage button:first-of-type {
  background:
    url('Podujatia.png') center center / cover no-repeat !important;
}
/* ===== MOJE REZERVÁCIE – NOVÁ FINÁLNA FOTKA ===== */

#homePage button:nth-of-type(2) {
  background:
    url('Mojerezervacie.png') center center / cover no-repeat !important;
}
/* ===== FATRA POTRAVINY RUGBY – NOVÁ FINÁLNA FOTKA ===== */

#homePage button:nth-of-type(3) {
  background:
    url('Fatra.png') center center / cover no-repeat !important;
}
/* ===== TINUŠKA – NOVÁ FINÁLNA FOTKA ===== */

#homePage button:nth-of-type(4) {
  background:
    url('Tinuskafacepainting.png') center center / cover no-repeat !important;
}
/* ===== O NÁS – NOVÁ FINÁLNA FOTKA ===== */

#homePage button:nth-of-type(5) {
  background:
    url('Onas.png') center center / cover no-repeat !important;
}
/* ===== KONTAKT – NOVÁ FINÁLNA FOTKA ===== */

#contactBtn {
  background:
    url('Kontakt.png') center center / cover no-repeat !important;
}
/* ===== KONTAKT – NOVÁ FINÁLNA FOTKA ===== */

#homePage button:nth-of-type(6) {
  background:
    url('Kontakt.png') center center / cover no-repeat !important;
}
/* =========================================================
   FINAL HOME SCREEN POLISH
   Better menu readability + shorter footer
   ========================================================= */

/* Stronger contrast over menu photos */
#homePage button:first-of-type {
  background:
    linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.08) 100%),
    url('Podujatia.png') center center / cover no-repeat !important;
}

#homePage button:nth-of-type(2) {
  background:
    linear-gradient(90deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.20) 55%, rgba(0,0,0,.08) 100%),
    url('Mojerezervacie.png') center center / cover no-repeat !important;
}

#homePage button:nth-of-type(3) {
  background:
    linear-gradient(90deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.20) 60%, rgba(0,0,0,.10) 100%),
    url('Fatra.png') center center / cover no-repeat !important;
}

#homePage button:nth-of-type(4) {
  background:
    linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.20) 60%, rgba(0,0,0,.08) 100%),
    url('Tinuskafacepainting.png') center center / cover no-repeat !important;
}

#homePage button:nth-of-type(5) {
  background:
    linear-gradient(90deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.16) 60%, rgba(0,0,0,.08) 100%),
    url('Onas.png') center center / cover no-repeat !important;
}

#homePage button:nth-of-type(6) {
  background:
    linear-gradient(90deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.08) 100%),
    url('Kontakt.png') center center / cover no-repeat !important;
}

/* Clear menu text */
#eventsBtn,
#bookingsBtn,
#fatraBtn,
#faceBtn,
#aboutBtn,
#contactBtn {
  font-weight: 900 !important;
  text-shadow:
    0 2px 3px rgba(0,0,0,1),
    0 0 8px rgba(0,0,0,.9) !important;
}

/* Remove unnecessary empty space under footer */
.footer {
  margin-top: 10px !important;
  padding-bottom: 8px !important;
}

.footer::after {
  margin-top: 5px !important;
  line-height: 1.7 !important;
}

/* Phone home-screen compaction only */
@media (max-width: 600px) {

  .language {
    margin-top: 16px !important;
    margin-bottom: 7px !important;
  }

  .language::before {
    top: -25px !important;
  }

  #homePage {
    gap: 5px !important;
  }

  #homePage .menu-btn {
    height: 54px !important;
    min-height: 54px !important;
  }

  #fatraBtn {
    font-size: 15px !important;
  }

  .footer {
    margin-top: 7px !important;
    padding-bottom: 5px !important;
  }
}
/* =========================================================
   FINAL HOME COMPACT + STRONGER MENU CONTRAST
   ========================================================= */

/* Ešte tmavšie fotografie pre výraznejšie názvy */
#homePage button:first-of-type {
  background:
    linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.28) 60%, rgba(0,0,0,.12) 100%),
    url('Podujatia.png') center center / cover no-repeat !important;
}

#homePage button:nth-of-type(2) {
  background:
    linear-gradient(90deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.30) 60%, rgba(0,0,0,.12) 100%),
    url('Mojerezervacie.png') center center / cover no-repeat !important;
}

#homePage button:nth-of-type(3) {
  background:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.32) 65%, rgba(0,0,0,.14) 100%),
    url('Fatra.png') center center / cover no-repeat !important;
}

#homePage button:nth-of-type(4) {
  background:
    linear-gradient(90deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.30) 65%, rgba(0,0,0,.12) 100%),
    url('Tinuskafacepainting.png') center center / cover no-repeat !important;
}

#homePage button:nth-of-type(5) {
  background:
    linear-gradient(90deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.27) 65%, rgba(0,0,0,.12) 100%),
    url('Onas.png') center center / cover no-repeat !important;
}

#homePage button:nth-of-type(6) {
  background:
    linear-gradient(90deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.28) 65%, rgba(0,0,0,.12) 100%),
    url('Kontakt.png') center center / cover no-repeat !important;
}

/* Názvy zostanú maximálne čitateľné */
#eventsBtn,
#bookingsBtn,
#fatraBtn,
#faceBtn,
#aboutBtn,
#contactBtn {
  font-weight: 900 !important;
  text-shadow:
    0 2px 4px #000,
    0 0 8px rgba(0,0,0,.95) !important;
}

/* Kompaktnejšia domovská obrazovka bez zmenšovania 6 kariet */
@media (max-width: 600px) {

  .container {
    padding-top: 6px !important;
    padding-bottom: 4px !important;
  }

  .topbar {
    margin-bottom: 1px !important;
  }

  .logo {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
  }

  .logo::before {
    width: 62px !important;
    height: 62px !important;
    margin-bottom: 2px !important;
  }

  .charity {
    margin-top: 3px !important;
    padding-bottom: 32px !important;
  }

  .charity::after {
    bottom: 17px !important;
  }

  .language {
    margin-top: 13px !important;
    margin-bottom: 6px !important;
  }

  .language::before {
    top: -24px !important;
  }

  .footer {
    margin-top: 5px !important;
    padding-bottom: 3px !important;
    line-height: 1.45 !important;
  }

  .footer::after {
    margin-top: 3px !important;
    line-height: 1.5 !important;
  }
}
/* ===== FINAL HOME MENU – DARKER PHOTOS + ABOUT ICON ===== */

/* Tmavšie fotografie pre lepšiu čitateľnosť textu */
#eventsBtn {
  background:
    linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.18), rgba(0,0,0,.28)),
    url('Podujatia.png') center center / cover no-repeat !important;
}

#bookingsBtn {
  background:
    linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.18), rgba(0,0,0,.28)),
    url('Mojerezervacie.png') center center / cover no-repeat !important;
}

#fatraBtn {
  background:
    linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.30), rgba(0,0,0,.30)),
    url('Fatra.png') center center / cover no-repeat !important;
}

#faceBtn {
  background:
    linear-gradient(90deg, rgba(0,0,0,.60), rgba(0,0,0,.25), rgba(0,0,0,.25)),
    url('Tinuskafacepainting.png') center center / cover no-repeat !important;
}

#aboutBtn {
  background:
    linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.18), rgba(0,0,0,.28)),
    url('Onas.png') center center / cover no-repeat !important;
}

#contactBtn {
  background:
    linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.18), rgba(0,0,0,.28)),
    url('Kontakt.png') center center / cover no-repeat !important;
}

/* Silnejší text na všetkých 6 tlačidlách */
#homePage .menu-btn {
  text-shadow:
    0 2px 4px rgba(0,0,0,1),
    0 0 8px rgba(0,0,0,.9) !important;
}

/* Ikonka rodiny / komunity pri O nás */
#aboutBtn {
  padding-left:66px !important;
}

#aboutBtn::before,
#homePage button:nth-of-type(5)::before {
  display:block !important;
  content:"👨‍👩‍👧" !important;
  position:absolute !important;
  left:20px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:auto !important;
  height:auto !important;
  background:none !important;
  font-size:29px !important;
  line-height:1 !important;
}

@media (max-width:600px) {
  #aboutBtn {
    padding-left:58px !important;
  }

  #aboutBtn::before,
  #homePage button:nth-of-type(5)::before {
    left:17px !important;
    font-size:25px !important;
  }
}
/* ===== FINAL HOME MENU V2 ===== */

/* Tmavšie fotografie */
#eventsBtn {
  background:
    linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.38), rgba(0,0,0,.32)),
    url('Podujatia.png') center / cover no-repeat !important;
}

#bookingsBtn {
  background:
    linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.38), rgba(0,0,0,.32)),
    url('Mojerezervacie.png') center / cover no-repeat !important;
}

#fatraBtn {
  background:
    linear-gradient(90deg, rgba(0,0,0,.76), rgba(0,0,0,.46), rgba(0,0,0,.36)),
    url('Fatra.png') center / cover no-repeat !important;
}

#faceBtn {
  background:
    linear-gradient(90deg, rgba(0,0,0,.74), rgba(0,0,0,.42), rgba(0,0,0,.34)),
    url('Tinuskafacepainting.png') center / cover no-repeat !important;
}

#aboutBtn {
  background:
    linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.38), rgba(0,0,0,.32)),
    url('Onas.png') center / cover no-repeat !important;
}

#contactBtn {
  background:
    linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.38), rgba(0,0,0,.32)),
    url('Kontakt.png') center / cover no-repeat !important;
}

/* Výrazný biely text */
#homePage .menu-btn {
  color:#fff !important;
  font-weight:900 !important;
  text-shadow:
    0 2px 4px rgba(0,0,0,1),
    0 0 8px rgba(0,0,0,.9) !important;
  white-space:pre-line !important;
}

/* O nás – čistá biela komunitná ikonka */
#aboutBtn {
  padding-left:66px !important;
}

#aboutBtn::before,
#homePage button:nth-of-type(5)::before {
  display:block !important;
  content:"" !important;
  position:absolute !important;
  left:18px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:38px !important;
  height:30px !important;
  background-color:#fff !important;
  background-image:none !important;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Ccircle cx='32' cy='10' r='7'/%3E%3Ccircle cx='13' cy='15' r='6'/%3E%3Ccircle cx='51' cy='15' r='6'/%3E%3Cpath d='M20 42V32c0-9 5-14 12-14s12 5 12 14v10H20zM2 42V34c0-8 4-12 11-12 4 0 7 2 9 5-3 4-4 9-4 15H2zM46 42c0-6-1-11-4-15 2-3 5-5 9-5 7 0 11 4 11 12v8H46z'/%3E%3C/svg%3E")
    center / contain no-repeat !important;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Ccircle cx='32' cy='10' r='7'/%3E%3Ccircle cx='13' cy='15' r='6'/%3E%3Ccircle cx='51' cy='15' r='6'/%3E%3Cpath d='M20 42V32c0-9 5-14 12-14s12 5 12 14v10H20zM2 42V34c0-8 4-12 11-12 4 0 7 2 9 5-3 4-4 9-4 15H2zM46 42c0-6-1-11-4-15 2-3 5-5 9-5 7 0 11 4 11 12v8H46z'/%3E%3C/svg%3E")
    center / contain no-repeat !important;
}

@media (max-width:600px) {
  #aboutBtn {
    padding-left:58px !important;
  }

  #aboutBtn::before,
  #homePage button:nth-of-type(5)::before {
    left:16px !important;
    width:34px !important;
    height:27px !important;
  }

  #fatraBtn,
  #faceBtn {
    line-height:1.05 !important;
  }
}
/* ===== FINAL HOME IMAGE COLOUR TUNING ===== */

/* Podujatia */
#homePage button:first-of-type {
  background:
    linear-gradient(90deg,
      rgba(0, 12, 24, .62) 0%,
      rgba(0, 12, 24, .30) 48%,
      rgba(164, 63, 0, .28) 100%
    ),
    url('Podujatia.png') center center / cover no-repeat !important;
}

/* Moje rezervácie */
#homePage button:nth-of-type(2) {
  background:
    linear-gradient(90deg,
      rgba(0, 15, 30, .70) 0%,
      rgba(0, 20, 38, .38) 52%,
      rgba(0, 31, 58, .30) 100%
    ),
    url('Mojerezervacie.png') center center / cover no-repeat !important;
}

/* Fatra Potraviny Rugby */
#homePage button:nth-of-type(3) {
  background:
    linear-gradient(90deg,
      rgba(28, 12, 0, .67) 0%,
      rgba(42, 18, 0, .34) 52%,
      rgba(118, 43, 0, .28) 100%
    ),
    url('Fatra.png') center center / cover no-repeat !important;
}

/* Tinuška */
#homePage button:nth-of-type(4) {
  background:
    linear-gradient(90deg,
      rgba(38, 0, 20, .67) 0%,
      rgba(42, 0, 24, .32) 52%,
      rgba(100, 0, 48, .25) 100%
    ),
    url('Tinuskafacepainting.png') center center / cover no-repeat !important;
}

/* O nás */
#homePage button:nth-of-type(5) {
  background:
    linear-gradient(90deg,
      rgba(0, 15, 28, .72) 0%,
      rgba(8, 18, 25, .34) 45%,
      rgba(74, 26, 0, .18) 100%
    ),
    url('Onas.png') center center / cover no-repeat !important;
}

/* Kontakt */
#homePage button:nth-of-type(6),
#contactBtn {
  background:
    linear-gradient(90deg,
      rgba(26, 16, 0, .66) 0%,
      rgba(30, 19, 4, .32) 50%,
      rgba(107, 48, 0, .22) 100%
    ),
    url('Kontakt.png') center center / cover no-repeat !important;
}

/* Biely text ostane ostrý nad fotografiami */
#homePage .menu-btn {
  color: #fff !important;
  text-shadow:
    0 2px 4px rgba(0,0,0,.95),
    0 0 8px rgba(0,0,0,.72) !important;
}
/* ===== DARK PROFESSIONAL HOME CARDS - FINAL OVERRIDE ===== */

/* PODUJATIA */
#homePage button:first-of-type {
  background:
    linear-gradient(90deg,
      rgba(0, 8, 15, .76) 0%,
      rgba(0, 8, 15, .57) 48%,
      rgba(38, 17, 4, .54) 100%
    ),
    url('Podujatia.png') center / cover no-repeat !important;
}

/* MOJE REZERVÁCIE */
#homePage button:nth-of-type(2) {
  background:
    linear-gradient(90deg,
      rgba(0, 10, 22, .78) 0%,
      rgba(0, 13, 27, .59) 50%,
      rgba(0, 18, 35, .55) 100%
    ),
    url('Mojerezervacie.png') center / cover no-repeat !important;
}

/* FATRA */
#homePage button:nth-of-type(3) {
  background:
    linear-gradient(90deg,
      rgba(20, 8, 0, .78) 0%,
      rgba(27, 10, 0, .58) 50%,
      rgba(55, 20, 0, .55) 100%
    ),
    url('Fatra.png') center / cover no-repeat !important;
}

/* TINUŠKA */
#homePage button:nth-of-type(4) {
  background:
    linear-gradient(90deg,
      rgba(35, 0, 18, .78) 0%,
      rgba(42, 0, 23, .59) 50%,
      rgba(60, 0, 31, .57) 100%
    ),
    url('Tinuskafacepainting.png') center / cover no-repeat !important;
}

/* O NÁS */
#homePage button:nth-of-type(5) {
  background:
    linear-gradient(90deg,
      rgba(0, 10, 20, .79) 0%,
      rgba(12, 10, 8, .58) 48%,
      rgba(43, 18, 2, .53) 100%
    ),
    url('Onas.png') center / cover no-repeat !important;

  /* miesto pre ikonku troch ľudí */
  padding-left: 100px !important;
}

/* KONTAKT */
#homePage button:nth-of-type(6),
#contactBtn {
  background:
    linear-gradient(90deg,
      rgba(20, 12, 0, .78) 0%,
      rgba(26, 15, 2, .59) 50%,
      rgba(55, 27, 2, .55) 100%
    ),
    url('Kontakt.png') center / cover no-repeat !important;
}

/* Text ešte čistejší a výraznejší */
#homePage .menu-btn {
  color: #fff !important;
  text-shadow:
    0 2px 3px rgba(0,0,0,1),
    0 0 7px rgba(0,0,0,.95) !important;
}
/* ===== FINAL DARK EDGE CARDS ===== */

/* PODUJATIA – veľmi tmavá oranžovo-bordová po oboch stranách */
#homePage button:first-of-type {
  background:
    linear-gradient(90deg,
      rgba(45, 13, 2, .96) 0%,
      rgba(72, 24, 3, .82) 15%,
      rgba(20, 12, 7, .20) 34%,
      rgba(10, 10, 10, .08) 50%,
      rgba(20, 12, 7, .20) 66%,
      rgba(72, 24, 3, .82) 85%,
      rgba(45, 13, 2, .96) 100%
    ),
    url('Podujatia.png') center / cover no-repeat !important;
}

/* MOJE REZERVÁCIE – veľmi tmavá modrá */
#homePage button:nth-of-type(2) {
  background:
    linear-gradient(90deg,
      rgba(0, 12, 27, .97) 0%,
      rgba(0, 27, 52, .84) 15%,
      rgba(0, 19, 36, .22) 34%,
      rgba(0, 10, 20, .08) 50%,
      rgba(0, 19, 36, .22) 66%,
      rgba(0, 27, 52, .84) 85%,
      rgba(0, 12, 27, .97) 100%
    ),
    url('Mojerezervacie.png') center / cover no-repeat !important;
}

/* FATRA – tmavá bordovo-oranžová */
#homePage button:nth-of-type(3) {
  background:
    linear-gradient(90deg,
      rgba(48, 13, 2, .97) 0%,
      rgba(76, 24, 3, .85) 15%,
      rgba(49, 17, 4, .23) 34%,
      rgba(20, 8, 2, .08) 50%,
      rgba(49, 17, 4, .23) 66%,
      rgba(76, 24, 3, .85) 85%,
      rgba(48, 13, 2, .97) 100%
    ),
    url('Fatra.png') center / cover no-repeat !important;
}

/* TINUŠKA – tmavá vínová, nie svetloružová */
#homePage button:nth-of-type(4) {
  background:
    linear-gradient(90deg,
      rgba(54, 0, 25, .97) 0%,
      rgba(87, 3, 42, .86) 15%,
      rgba(65, 2, 31, .24) 34%,
      rgba(25, 0, 12, .08) 50%,
      rgba(65, 2, 31, .24) 66%,
      rgba(87, 3, 42, .86) 85%,
      rgba(54, 0, 25, .97) 100%
    ),
    url('Tinuskafacepainting.png') center / cover no-repeat !important;
}

/* O NÁS – tmavá modrá + zachovaný oranžový západ slnka */
#homePage button:nth-of-type(5) {
  background:
    linear-gradient(90deg,
      rgba(0, 15, 29, .97) 0%,
      rgba(0, 28, 48, .84) 15%,
      rgba(25, 16, 8, .20) 34%,
      rgba(15, 8, 3, .06) 50%,
      rgba(25, 16, 8, .20) 66%,
      rgba(0, 28, 48, .84) 85%,
      rgba(0, 15, 29, .97) 100%
    ),
    url('Onas.png') center / cover no-repeat !important;

  /* rovnaké zarovnanie textu ako ostatné karty */
  padding-left: 66px !important;
}

/* KONTAKT – tmavá hnedo-bordová */
#homePage button:nth-of-type(6),
#contactBtn {
  background:
    linear-gradient(90deg,
      rgba(42, 18, 2, .97) 0%,
      rgba(70, 31, 4, .85) 15%,
      rgba(47, 25, 7, .23) 34%,
      rgba(20, 12, 5, .08) 50%,
      rgba(47, 25, 7, .23) 66%,
      rgba(70, 31, 4, .85) 85%,
      rgba(42, 18, 2, .97) 100%
    ),
    url('Kontakt.png') center / cover no-repeat !important;
}


/* ===== O NÁS – ikonka a text presne zarovnať ===== */

#aboutBtn::before,
#homePage button:nth-of-type(5)::before {
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* mobil – rovnaká os textu ako ostatné tlačidlá */
@media (max-width: 600px) {
  #homePage button:nth-of-type(5) {
    padding-left: 58px !important;
  }

  #aboutBtn::before,
  #homePage button:nth-of-type(5)::before {
    width: 34px !important;
    height: 34px !important;
    left: 16px !important;
  }
}
/* ===== FINAL DARK CINEMATIC BACKGROUND ===== */

body {
  background-image:
    linear-gradient(
      to bottom,
      rgba(2, 12, 22, .70) 0%,
      rgba(2, 14, 25, .73) 28%,
      rgba(2, 15, 27, .76) 52%,
      rgba(1, 12, 23, .84) 72%,
      rgba(0, 8, 16, .94) 88%,
      rgba(0, 5, 11, .98) 100%
    ),
    url('Pozadie.jpg') !important;

  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
/* =========================================================
   FINAL DARK LOOK – BACKGROUND + 6 HOME CARDS
   ========================================================= */

/* HLAVNÉ POZADIE */
body {
  background-image:
    linear-gradient(
      to bottom,
      rgba(0, 7, 15, .84) 0%,
      rgba(0, 9, 19, .86) 30%,
      rgba(0, 11, 22, .89) 58%,
      rgba(0, 8, 17, .95) 82%,
      rgba(0, 4, 9, .99) 100%
    ),
    url('Pozadie.jpg') !important;

  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}


/* =========================================================
   1. PODUJATIA
   tmavá bordovo-hnedá na OBOCH krajoch
   ========================================================= */

#homePage button:first-of-type {
  background:
    linear-gradient(90deg,
      rgba(35, 8, 2, 1) 0%,
      rgba(55, 13, 2, .98) 10%,
      rgba(65, 18, 3, .80) 20%,
      rgba(35, 12, 3, .35) 30%,
      rgba(0, 0, 0, .05) 40%,
      rgba(0, 0, 0, .02) 60%,
      rgba(35, 12, 3, .35) 70%,
      rgba(65, 18, 3, .80) 80%,
      rgba(55, 13, 2, .98) 90%,
      rgba(35, 8, 2, 1) 100%
    ),
    url('Podujatia.png') center / cover no-repeat !important;
}


/* =========================================================
   2. MOJE REZERVÁCIE
   hlboká tmavomodrá
   ========================================================= */

#homePage button:nth-of-type(2) {
  background:
    linear-gradient(90deg,
      rgba(0, 7, 17, 1) 0%,
      rgba(0, 13, 29, .98) 10%,
      rgba(0, 24, 46, .82) 20%,
      rgba(0, 18, 35, .35) 30%,
      rgba(0, 5, 12, .05) 40%,
      rgba(0, 5, 12, .02) 60%,
      rgba(0, 18, 35, .35) 70%,
      rgba(0, 24, 46, .82) 80%,
      rgba(0, 13, 29, .98) 90%,
      rgba(0, 7, 17, 1) 100%
    ),
    url('Mojerezervacie.png') center / cover no-repeat !important;
}


/* =========================================================
   3. FATRA
   tmavá bordovo-oranžová
   ========================================================= */

#homePage button:nth-of-type(3) {
  background:
    linear-gradient(90deg,
      rgba(40, 8, 1, 1) 0%,
      rgba(63, 14, 2, .98) 10%,
      rgba(75, 20, 2, .82) 20%,
      rgba(40, 13, 2, .35) 30%,
      rgba(0, 0, 0, .04) 40%,
      rgba(0, 0, 0, .02) 60%,
      rgba(40, 13, 2, .35) 70%,
      rgba(75, 20, 2, .82) 80%,
      rgba(63, 14, 2, .98) 90%,
      rgba(40, 8, 1, 1) 100%
    ),
    url('Fatra.png') center / cover no-repeat !important;
}


/* =========================================================
   4. TINUŠKA
   BORDOVÁ – nie ružová
   ========================================================= */

#homePage button:nth-of-type(4) {
  background:
    linear-gradient(90deg,
      rgba(38, 0, 15, 1) 0%,
      rgba(58, 0, 24, .99) 10%,
      rgba(78, 0, 32, .84) 20%,
      rgba(55, 0, 25, .38) 30%,
      rgba(15, 0, 7, .05) 40%,
      rgba(15, 0, 7, .02) 60%,
      rgba(55, 0, 25, .38) 70%,
      rgba(78, 0, 32, .84) 80%,
      rgba(58, 0, 24, .99) 90%,
      rgba(38, 0, 15, 1) 100%
    ),
    url('Tinuskafacepainting.png') center / cover no-repeat !important;
}


/* =========================================================
   5. O NÁS
   tmavomodré kraje, oranžový západ ostáva viditeľný
   ========================================================= */

#homePage button:nth-of-type(5) {
  background:
    linear-gradient(90deg,
      rgba(0, 7, 16, 1) 0%,
      rgba(0, 14, 27, .99) 10%,
      rgba(0, 26, 45, .82) 20%,
      rgba(5, 20, 29, .34) 30%,
      rgba(0, 0, 0, .04) 40%,
      rgba(0, 0, 0, .02) 60%,
      rgba(5, 20, 29, .34) 70%,
      rgba(0, 26, 45, .82) 80%,
      rgba(0, 14, 27, .99) 90%,
      rgba(0, 7, 16, 1) 100%
    ),
    url('Onas.png') center / cover no-repeat !important;
}


/* =========================================================
   6. KONTAKT
   tmavá hnedo-bordová
   ========================================================= */

#homePage button:nth-of-type(6),
#contactBtn {
  background:
    linear-gradient(90deg,
      rgba(31, 10, 1, 1) 0%,
      rgba(50, 17, 2, .99) 10%,
      rgba(66, 26, 4, .82) 20%,
      rgba(40, 21, 5, .35) 30%,
      rgba(0, 0, 0, .04) 40%,
      rgba(0, 0, 0, .02) 60%,
      rgba(40, 21, 5, .35) 70%,
      rgba(66, 26, 4, .82) 80%,
      rgba(50, 17, 2, .99) 90%,
      rgba(31, 10, 1, 1) 100%
    ),
    url('Kontakt.png') center / cover no-repeat !important;
}
/* =========================================================
   FINAL CINEMATIC TUNING
   Tatry + dark sky + sharper card centres
   ========================================================= */

/* POZADIE:
   tmavá obloha a voda,
   Tatry ostávajú čitateľnejšie,
   iba jemné teplé prieniky */
body {
  background-image:
    linear-gradient(
      to bottom,
      rgba(0, 5, 12, .91) 0%,
      rgba(2, 7, 13, .89) 16%,
      rgba(5, 9, 13, .86) 27%,
      rgba(0, 7, 14, .82) 39%,
      rgba(0, 8, 16, .84) 52%,
      rgba(0, 7, 15, .91) 68%,
      rgba(0, 5, 11, .97) 84%,
      rgba(0, 3, 7, .995) 100%
    ),
    radial-gradient(
      ellipse at 72% 19%,
      rgba(255, 119, 15, .18) 0%,
      rgba(255, 151, 30, .09) 12%,
      rgba(0, 0, 0, 0) 28%
    ),
    radial-gradient(
      ellipse at 55% 36%,
      rgba(255, 126, 12, .09) 0%,
      rgba(0, 0, 0, 0) 24%
    ),
    url('Pozadie.jpg') !important;

  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}


/* =========================================================
   PODUJATIA – tmavé hnedé kraje, čistý stred
   ========================================================= */
#homePage button:first-of-type {
  background:
    linear-gradient(90deg,
      rgba(27, 5, 1, 1) 0%,
      rgba(49, 10, 1, .99) 11%,
      rgba(65, 17, 2, .82) 21%,
      rgba(45, 13, 2, .42) 29%,
      rgba(0, 0, 0, .05) 39%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, .05) 61%,
      rgba(45, 13, 2, .42) 71%,
      rgba(65, 17, 2, .82) 79%,
      rgba(49, 10, 1, .99) 89%,
      rgba(27, 5, 1, 1) 100%
    ),
    url('Podujatia.png') center / cover no-repeat !important;
}


/* =========================================================
   MOJE REZERVÁCIE – tmavé navy kraje, čistý stred
   ========================================================= */
#homePage button:nth-of-type(2) {
  background:
    linear-gradient(90deg,
      rgba(0, 5, 13, 1) 0%,
      rgba(0, 12, 25, .99) 11%,
      rgba(0, 22, 40, .80) 21%,
      rgba(0, 15, 29, .38) 29%,
      rgba(0, 0, 0, .04) 39%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, .04) 61%,
      rgba(0, 15, 29, .38) 71%,
      rgba(0, 22, 40, .80) 79%,
      rgba(0, 12, 25, .99) 89%,
      rgba(0, 5, 13, 1) 100%
    ),
    url('Mojerezervacie.png') center / cover no-repeat !important;
}


/* =========================================================
   FATRA – výrazne tmavohnedé kraje
   ========================================================= */
#homePage button:nth-of-type(3) {
  background:
    linear-gradient(90deg,
      rgba(22, 5, 1, 1) 0%,
      rgba(39, 8, 1, 1) 12%,
      rgba(55, 13, 1, .96) 21%,
      rgba(49, 14, 2, .64) 29%,
      rgba(25, 7, 1, .20) 36%,
      rgba(0, 0, 0, 0) 45%,
      rgba(0, 0, 0, 0) 55%,
      rgba(25, 7, 1, .20) 64%,
      rgba(49, 14, 2, .64) 71%,
      rgba(55, 13, 1, .96) 79%,
      rgba(39, 8, 1, 1) 88%,
      rgba(22, 5, 1, 1) 100%
    ),
    url('Fatra.png') center / cover no-repeat !important;
}


/* =========================================================
   TINUŠKA – hlboká vínová/bordová, NIE ružová
   ========================================================= */
#homePage button:nth-of-type(4) {
  background:
    linear-gradient(90deg,
      rgba(22, 2, 7, 1) 0%,
      rgba(39, 3, 12, 1) 12%,
      rgba(55, 5, 18, .97) 21%,
      rgba(48, 5, 17, .65) 29%,
      rgba(24, 3, 9, .20) 36%,
      rgba(0, 0, 0, 0) 45%,
      rgba(0, 0, 0, 0) 55%,
      rgba(24, 3, 9, .20) 64%,
      rgba(48, 5, 17, .65) 71%,
      rgba(55, 5, 18, .97) 79%,
      rgba(39, 3, 12, 1) 88%,
      rgba(22, 2, 7, 1) 100%
    ),
    url('Tinuskafacepainting.png') center / cover no-repeat !important;
}


/* =========================================================
   O NÁS – tmavé navy kraje, fotografia čistá
   ========================================================= */
#homePage button:nth-of-type(5) {
  background:
    linear-gradient(90deg,
      rgba(0, 5, 12, 1) 0%,
      rgba(0, 12, 23, .99) 11%,
      rgba(0, 23, 38, .80) 21%,
      rgba(0, 16, 27, .38) 29%,
      rgba(0, 0, 0, .04) 39%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, .04) 61%,
      rgba(0, 16, 27, .38) 71%,
      rgba(0, 23, 38, .80) 79%,
      rgba(0, 12, 23, .99) 89%,
      rgba(0, 5, 12, 1) 100%
    ),
    url('Onas.png') center / cover no-repeat !important;
}


/* =========================================================
   KONTAKT – tmavohnedé kraje, čistý stred
   ========================================================= */
#homePage button:nth-of-type(6),
#contactBtn {
  background:
    linear-gradient(90deg,
      rgba(22, 7, 1, 1) 0%,
      rgba(39, 12, 1, .99) 11%,
      rgba(54, 19, 2, .82) 21%,
      rgba(39, 17, 3, .40) 29%,
      rgba(0, 0, 0, .04) 39%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, .04) 61%,
      rgba(39, 17, 3, .40) 71%,
      rgba(54, 19, 2, .82) 79%,
      rgba(39, 12, 1, .99) 89%,
      rgba(22, 7, 1, 1) 100%
    ),
    url('Kontakt.png') center / cover no-repeat !important;
}
/* MOJE REZERVÁCIE – 2 RIADKY */
#homePage button:nth-of-type(2) {
  max-width: 100% !important;
  padding-right: 44px !important;
}

#homePage button:nth-of-type(2) {
  white-space: normal !important;
}

#homePage button:nth-of-type(2) {
  font-size: 0 !important;
}

#homePage button:nth-of-type(2)::after {
  content: "Moje\A rezervácie";
  white-space: pre-line;
  font-size: 18px;
  line-height: 1.08;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 5px rgba(0,0,0,.28);
}

@media (max-width:600px) {
  #homePage button:nth-of-type(2)::after {
    font-size: 16px;
    line-height: 1.05;
  }
}

@media (max-width:390px) {
  #homePage button:nth-of-type(2)::after {
    font-size: 15px;
  }
}
/* OPRAVA – MOJE REZERVÁCIE VĽAVO, 2 RIADKY */

#homePage button:nth-of-type(2) {
  position: relative !important;
}

#homePage button:nth-of-type(2)::after {
  position: absolute !important;
  left: 100px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  content: "Moje\A rezervácie" !important;
  white-space: pre-line !important;

  font-size: 18px !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  text-align: left !important;
  color: #fff !important;
}

@media (max-width:600px) {
  #homePage button:nth-of-type(2)::after {
    left: 100px !important;
    font-size: 16px !important;
    line-height: 1.05 !important;
  }
}
/* ===== MOJE REZERVÁCIE – FINÁLNE ZAROVNANIE ===== */

@media (max-width: 600px) {
  #homePage button:nth-of-type(2)::after {
    left: 58px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    content: "Moje\A rezervácie" !important;
    white-space: pre-line !important;

    font-size: 16px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    text-align: left !important;

    color: #fff !important;
    text-shadow:
      0 2px 4px rgba(0,0,0,1),
      0 0 8px rgba(0,0,0,.9) !important;
  }
}

@media (max-width: 390px) {
  #homePage button:nth-of-type(2)::after {
    left: 54px !important;
    font-size: 15px !important;
  }
}
/* ===== COMMUNITY CHAT ===== */

#chatPage{
  position:fixed;
  inset:0;
  z-index:9999;
  background:#06111d;
  color:#fff;
  display:flex;
  flex-direction:column;
}

.chat-header{
  min-height:72px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  background:#081b2c;
  border-bottom:1px solid rgba(255,126,25,.45);
}

.chat-back{
  border:0;
  background:none;
  color:#ff7a18;
  font-size:38px;
  cursor:pointer;
}

.chat-title{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:21px;
  font-weight:900;
}

.chat-notifications{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:7px;
}

.chat-notifications small{
  font-size:11px;
  opacity:.85;
}

.chat-toggle{
  width:45px;
  height:24px;
  padding:2px;
  border:0;
  border-radius:20px;
  cursor:pointer;
  background:#c73535;
}

.chat-toggle span{
  display:block;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  transition:.2s;
}

.chat-toggle.on{
  background:#27a85c;
}

.chat-toggle.on span{
  transform:translateX(21px);
}

.chat-messages{
  flex:1;
  overflow-y:auto;
  padding:16px 12px 100px;
}

.chat-compose{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:10px;
  background:#081b2c;
  border-top:1px solid rgba(255,126,25,.35);
}

#chatMessageInput{
  flex:1;
  resize:none;
  max-height:110px;
  padding:11px 13px;
  border:1px solid #31536e;
  border-radius:18px;
  background:#10283a;
  color:#fff;
  font-size:15px;
  outline:none;
}

.chat-photo-btn,
.chat-send-btn{
  width:43px;
  height:43px;
  flex:0 0 43px;
  border:0;
  border-radius:50%;
  cursor:pointer;
  font-size:20px;
}

.chat-photo-btn{
  background:#18354b;
  color:#fff;
}

.chat-send-btn{
  background:#ff7417;
  color:#fff;
}

/* jednotlivá správa */
.chat-message{
  max-width:82%;
  margin:8px 0;
  padding:9px 12px;
  border-radius:16px;
  background:#173149;
}

.chat-message.mine{
  margin-left:auto;
  background:#74330d;
}

.chat-message-name{
  font-size:12px;
  font-weight:800;
  color:#ff9a4d;
}

.chat-message-time{
  margin-top:4px;
  font-size:10px;
  opacity:.65;
}

.chat-message img{
  display:block;
  max-width:100%;
  margin-top:7px;
  border-radius:12px;
}

/* bodka = nové správy */
.chat-unread-dot{
  position:absolute;
  top:2px;
  right:2px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#ff2f45;
  border:2px solid #fff;
}
/* ===== HOME CHAT BUTTON ===== */

#homePage .community-chat-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:118px;
  height:42px;
  margin:0 0 10px auto;
  padding:0 15px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:22px;
  background:#f47a20;
  color:#fff;
  font-size:15px;
  font-weight:900;
  box-shadow:0 5px 16px rgba(0,0,0,.28);
}

#homePage .community-chat-btn:active{
  transform:scale(.97);
}

#communityChatBtn .chat-unread-dot{
  position:absolute;
  top:-3px;
  right:-3px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#ff304f;
  border:2px solid #fff;
}
/* ===== CHAT – ORANGE CIRCLE TOP RIGHT ===== */

#homePage .community-chat-btn{
    position:absolute !important;
    top:82px !important;
    right:22px !important;
    z-index:20 !important;

    width:72px !important;
    height:72px !important;
    min-width:72px !important;
    min-height:72px !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:50% !important;
    border:2px solid rgba(255,255,255,.65) !important;

    background:#ff7a20 !important;
    color:#fff !important;

    font-size:0 !important;
    font-weight:900 !important;

    box-shadow:0 5px 16px rgba(0,0,0,.35) !important;
}

#communityChatBtn > span:first-child{
    font-size:0 !important;
}

#communityChatBtn > span:first-child::after{
    content:"CHAT";
    font-size:14px !important;
    font-weight:900 !important;
    color:#fff !important;
}

#communityChatBtn .chat-unread-dot{
    position:absolute !important;
    top:2px !important;
    right:2px !important;
    width:12px !important;
    height:12px !important;
    border-radius:50% !important;
    background:#ff304f !important;
    border:2px solid #fff !important;
}
/* ===== CHAT BUTTON – POSITION + SIZE FIX ===== */

#homePage #communityChatBtn.community-chat-btn{
    position:absolute !important;
    top:18px !important;
    right:18px !important;
    z-index:50 !important;

    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    min-height:56px !important;
    max-width:56px !important;

    margin:0 !important;
    padding:0 !important;

    border-radius:50% !important;
    border:2px solid rgba(255,255,255,.65) !important;

    background:#ff7a20 !important;
    background-image:none !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    color:#fff !important;
    box-shadow:0 4px 12px rgba(0,0,0,.30) !important;
}

#homePage #communityChatBtn > span:first-child::after{
    content:"CHAT" !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:900 !important;
    color:#fff !important;
}
/* ===== CHAT FINAL POSITION + MINT COLOUR ===== */

#homePage #communityChatBtn.community-chat-btn{
    top:92px !important;
    right:22px !important;

    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    min-height:56px !important;
    max-width:56px !important;

    background:#63DCC6 !important;
    background-image:none !important;

    border:2px solid #ffffff !important;
    border-radius:50% !important;

    box-shadow:
        0 4px 14px rgba(0,0,0,.38),
        0 0 12px rgba(99,220,198,.35) !important;
}

#homePage #communityChatBtn > span:first-child::after{
    content:"CHAT" !important;
    font-size:14px !important;
    font-weight:900 !important;
    color:#ffffff !important;
}
/* CHAT – POSUN TROCHU VYŠŠIE */
#homePage #communityChatBtn.community-chat-btn{
    top:72px !important;
}
/* CHAT – POSUN O 4 MM VYŠŠIE */
#homePage #communityChatBtn.community-chat-btn{
    top:57px !important;
}
/* ===== FIX PO PRIDANÍ CHAT TLAČIDLA ===== */

/* Zruší starý natvrdo vložený text z 2. tlačidla */
#homePage button:nth-of-type(2)::after {
    content: "›" !important;
    left: auto !important;
    right: 13px !important;
    top: 50% !important;
    transform: translateY(-52%) !important;
    white-space: normal !important;
    font-size: 32px !important;
    line-height: 1 !important;
    font-weight: 300 !important;
}

/* Vráti normálnu veľkosť textu tlačidlu Podujatia / Events */
#homePage button:nth-of-type(2) {
    font-size: 16px !important;
}
/* ===== HOME FOTKY – OPRAVA PO PRIDANÍ CHATU ===== */

/* PODUJATIA */
#homePage #eventsBtn {
  background:
    linear-gradient(90deg,
      rgba(27, 5, 1, 1) 0%,
      rgba(49, 10, 1, .99) 11%,
      rgba(65, 17, 2, .82) 21%,
      rgba(45, 13, 2, .42) 29%,
      rgba(0, 0, 0, .05) 39%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, .05) 61%,
      rgba(45, 13, 2, .42) 71%,
      rgba(65, 17, 2, .82) 79%,
      rgba(49, 10, 1, .99) 89%,
      rgba(27, 5, 1, 1) 100%
    ),
    url('Podujatia.png') center / cover no-repeat !important;
}

/* MOJE REZERVÁCIE */
#homePage #bookingsBtn {
  background:
    linear-gradient(90deg,
      rgba(0, 5, 13, 1) 0%,
      rgba(0, 12, 25, .99) 11%,
      rgba(0, 22, 40, .80) 21%,
      rgba(0, 15, 29, .38) 29%,
      rgba(0, 0, 0, .04) 39%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, .04) 61%,
      rgba(0, 15, 29, .38) 71%,
      rgba(0, 22, 40, .80) 79%,
      rgba(0, 12, 25, .99) 89%,
      rgba(0, 5, 13, 1) 100%
    ),
    url('Mojerezervacie.png') center / cover no-repeat !important;
}

/* FATRA */
#homePage #fatraBtn {
  background:
    linear-gradient(90deg,
      rgba(22, 5, 1, 1) 0%,
      rgba(39, 8, 1, 1) 12%,
      rgba(55, 13, 1, .96) 21%,
      rgba(49, 14, 2, .64) 29%,
      rgba(25, 7, 1, .20) 36%,
      rgba(0, 0, 0, 0) 45%,
      rgba(0, 0, 0, 0) 55%,
      rgba(25, 7, 1, .20) 64%,
      rgba(49, 14, 2, .64) 71%,
      rgba(55, 13, 1, .96) 79%,
      rgba(39, 8, 1, 1) 88%,
      rgba(22, 5, 1, 1) 100%
    ),
    url('Fatra.png') center / cover no-repeat !important;
}

/* TINUŠKA */
#homePage #faceBtn {
  background:
    linear-gradient(90deg,
      rgba(22, 2, 7, 1) 0%,
      rgba(39, 3, 12, 1) 12%,
      rgba(55, 5, 18, .97) 21%,
      rgba(48, 5, 17, .65) 29%,
      rgba(24, 3, 9, .20) 36%,
      rgba(0, 0, 0, 0) 45%,
      rgba(0, 0, 0, 0) 55%,
      rgba(24, 3, 9, .20) 64%,
      rgba(48, 5, 17, .65) 71%,
      rgba(55, 5, 18, .97) 79%,
      rgba(39, 3, 12, 1) 88%,
      rgba(22, 2, 7, 1) 100%
    ),
    url('Tinuskafacepainting.png') center / cover no-repeat !important;
}

/* O NÁS */
#homePage #aboutBtn {
  background:
    linear-gradient(90deg,
      rgba(0, 5, 12, 1) 0%,
      rgba(0, 12, 23, .99) 11%,
      rgba(0, 23, 38, .80) 21%,
      rgba(0, 16, 27, .38) 29%,
      rgba(0, 0, 0, .04) 39%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, .04) 61%,
      rgba(0, 16, 27, .38) 71%,
      rgba(0, 23, 38, .80) 79%,
      rgba(0, 12, 23, .99) 89%,
      rgba(0, 5, 12, 1) 100%
    ),
    url('Onas.png') center / cover no-repeat !important;
}

/* KONTAKT */
#homePage #contactBtn {
  background:
    linear-gradient(90deg,
      rgba(22, 7, 1, 1) 0%,
      rgba(39, 12, 1, .99) 11%,
      rgba(54, 19, 2, .82) 21%,
      rgba(39, 17, 3, .40) 29%,
      rgba(0, 0, 0, .04) 39%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, .04) 61%,
      rgba(39, 17, 3, .40) 71%,
      rgba(54, 19, 2, .82) 79%,
      rgba(39, 12, 1, .99) 89%,
      rgba(22, 7, 1, 1) 100%
    ),
    url('Kontakt.png') center / cover no-repeat !important;
}
/* =========================================================
   FINAL HOME MENU – FIX AFTER CHAT
   ========================================================= */

/* PODUJATIA */
#homePage #eventsBtn {
  background:
    linear-gradient(90deg,
      rgba(27, 5, 1, 1) 0%,
      rgba(49, 10, 1, .99) 11%,
      rgba(65, 17, 2, .82) 21%,
      rgba(45, 13, 2, .42) 29%,
      rgba(0, 0, 0, .05) 39%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, .05) 61%,
      rgba(45, 13, 2, .42) 71%,
      rgba(65, 17, 2, .82) 79%,
      rgba(49, 10, 1, .99) 89%,
      rgba(27, 5, 1, 1) 100%
    ),
    url('Podujatia.png') center / cover no-repeat !important;
}

/* MOJE REZERVÁCIE */
#homePage #bookingsBtn {
  position: relative !important;

  background:
    linear-gradient(90deg,
      rgba(0, 5, 13, 1) 0%,
      rgba(0, 12, 25, .99) 11%,
      rgba(0, 22, 40, .80) 21%,
      rgba(0, 15, 29, .38) 29%,
      rgba(0, 0, 0, .04) 39%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, .04) 61%,
      rgba(0, 15, 29, .38) 71%,
      rgba(0, 22, 40, .80) 79%,
      rgba(0, 12, 25, .99) 89%,
      rgba(0, 5, 13, 1) 100%
    ),
    url('Mojerezervacie.png') center / cover no-repeat !important;

  font-size: 0 !important;
  white-space: normal !important;
}

/* MOJE REZERVÁCIE – text na 2 riadky */
#homePage #bookingsBtn::after {
  content: "Moje\A rezervácie" !important;

  position: absolute !important;
  left: 58px !important;
  right: auto !important;
  top: 50% !important;

  transform: translateY(-50%) !important;

  white-space: pre-line !important;

  font-size: 16px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  text-align: left !important;

  color: #fff !important;

  text-shadow:
    0 2px 4px rgba(0,0,0,1),
    0 0 8px rgba(0,0,0,.9) !important;
}

/* FATRA */
#homePage #fatraBtn {
  background:
    linear-gradient(90deg,
      rgba(22, 5, 1, 1) 0%,
      rgba(39, 8, 1, 1) 12%,
      rgba(55, 13, 1, .96) 21%,
      rgba(49, 14, 2, .64) 29%,
      rgba(25, 7, 1, .20) 36%,
      rgba(0, 0, 0, 0) 45%,
      rgba(0, 0, 0, 0) 55%,
      rgba(25, 7, 1, .20) 64%,
      rgba(49, 14, 2, .64) 71%,
      rgba(55, 13, 1, .96) 79%,
      rgba(39, 8, 1, 1) 88%,
      rgba(22, 5, 1, 1) 100%
    ),
    url('Fatra.png') center / cover no-repeat !important;
}

/* TINUŠKA */
#homePage #faceBtn {
  background:
    linear-gradient(90deg,
      rgba(22, 2, 7, 1) 0%,
      rgba(39, 3, 12, 1) 12%,
      rgba(55, 5, 18, .97) 21%,
      rgba(48, 5, 17, .65) 29%,
      rgba(24, 3, 9, .20) 36%,
      rgba(0, 0, 0, 0) 45%,
      rgba(0, 0, 0, 0) 55%,
      rgba(24, 3, 9, .20) 64%,
      rgba(48, 5, 17, .65) 71%,
      rgba(55, 5, 18, .97) 79%,
      rgba(39, 3, 12, 1) 88%,
      rgba(22, 2, 7, 1) 100%
    ),
    url('Tinuskafacepainting.png') center / cover no-repeat !important;
}

/* O NÁS */
#homePage #aboutBtn {
  background:
    linear-gradient(90deg,
      rgba(0, 5, 12, 1) 0%,
      rgba(0, 12, 23, .99) 11%,
      rgba(0, 23, 38, .80) 21%,
      rgba(0, 16, 27, .38) 29%,
      rgba(0, 0, 0, .04) 39%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, .04) 61%,
      rgba(0, 16, 27, .38) 71%,
      rgba(0, 23, 38, .80) 79%,
      rgba(0, 12, 23, .99) 89%,
      rgba(0, 5, 12, 1) 100%
    ),
    url('Onas.png') center / cover no-repeat !important;
}

/* KONTAKT */
#homePage #contactBtn {
  background:
    linear-gradient(90deg,
      rgba(22, 7, 1, 1) 0%,
      rgba(39, 12, 1, .99) 11%,
      rgba(54, 19, 2, .82) 21%,
      rgba(39, 17, 3, .40) 29%,
      rgba(0, 0, 0, .04) 39%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, .04) 61%,
      rgba(39, 17, 3, .40) 71%,
      rgba(54, 19, 2, .82) 79%,
      rgba(39, 12, 1, .99) 89%,
      rgba(22, 7, 1, 1) 100%
    ),
    url('Kontakt.png') center / cover no-repeat !important;
}

/* Všetkých 6 názvov – finálna výraznosť */
#homePage #eventsBtn,
#homePage #bookingsBtn,
#homePage #fatraBtn,
#homePage #faceBtn,
#homePage #aboutBtn,
#homePage #contactBtn {
  color: #fff !important;
  font-weight: 900 !important;

  text-shadow:
    0 2px 3px rgba(0,0,0,1),
    0 0 7px rgba(0,0,0,.95) !important;
}

/* malý mobil */
@media (max-width:390px) {
  #homePage #bookingsBtn::after {
    left:54px !important;
    font-size:15px !important;
  }
}
/* ===== CHAT SCROLL + SMALL SCREEN FIX ===== */

#chatPage {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}

#chatPage .chat-header {
    flex: 0 0 auto !important;
}

#chatPage .chat-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    padding: 16px 12px !important;
}

#chatPage .chat-compose {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    z-index: 10 !important;
}

@media (max-height: 700px) {
    #chatPage .chat-header {
        min-height: 58px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    #chatMessageInput {
        max-height: 80px !important;
    }
}
/* ===== COMMUNITY CHAT – PHOTOS ===== */

.chat-photo-holder {
    margin-top: 7px;
}

.chat-photo {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 320px;
    border-radius: 12px;
    object-fit: contain;
    cursor: pointer;
}

/* Fotografia na celú obrazovku */
#chatPhotoViewer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(0, 0, 0, 0.96);
    align-items: center;
    justify-content: center;
    padding: 15px;
}

#chatPhotoViewerImage {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

#chatPhotoViewerClose {
    position: fixed;
    top: 12px;
    right: 15px;
    z-index: 20001;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: white;
    font-size: 34px;
    line-height: 42px;
    cursor: pointer;
}
/* ===== CHAT – DELETE OWN MESSAGE ===== */

.chat-message {
    position: relative;
}

.chat-delete-btn {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 14px;
    line-height: 25px;
    cursor: pointer;
    opacity: 0.65;
}

.chat-delete-btn:hover {
    opacity: 1;
}

.chat-message.mine {
    padding-right: 34px;
}
/* ===== CHAT – 30 DAY INFO BUTTON ===== */

#chatPage .chat-retention-info {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    opacity: .85;
}