/*!
 * MIT License for mit.css
 *
 * Copyright (c) 2024 Stanislav Rejthar
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
@import url("https://rsms.me/inter/inter.css");

html,
body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;

  font-family: "Inter", sans-serif;
  background-color: #f8f9fa;
  color: #212529;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}
header {
  background: #007bff;
  color: #fff;
  padding-top: 30px;
  border-bottom: #0056b3 3px solid;
}
header a {
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  text-decoration-color: #007bff; /* same color as background eased to hover color */
  transition: text-decoration-color 1.5s ease; /* Smooth transition for the underline color */
}
header a:hover {
  text-decoration: underline; /* Adds underline on hover */
  text-decoration-color: white; /* Changes the underline color */
}
header ul {
  padding: 0;
  list-style: none;
  text-align: center;
}
header li {
  display: inline;
  margin: 0 20px;
}
header .highlight,
header .current a {
  color: #ffc107;
  font-weight: bold;
}
main {
  flex: 1 0 auto;
  padding: 20px;
}
footer {
  flex-shrink: 0;

  background: #007bff;
  color: #fff;
  text-align: center;
  padding: 30px 0;
}
a.a-inherit {
  color: inherit;
}

/* from Prototype */
#drop_zone {
  width: 300px;
  height: 220px;
  border: 2px dashed #eee;
  text-align: center;
  padding: 10px;
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: black;
}
#edit #drop_zone {
  display: none;
} /* todo until I figure out how not to destroy text field in edit mode */
/* Edit full page */
.edit {
  position: fixed; /* not scrolling */
  /* cover the viewport */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* "disinherite" the original limits */
  width: auto;
  height: auto;
  /* best from .image-text-container */
  text-align: center;
  color: white;
  margin: 10px; /* Optional: adds space between the containers */
  background-color: #ccc;
}
.edit .hideOnEdit,
#edit .hideOnEdit {
  display: none; /* universal class to hide elements in edit mode */
}

.image-text-container[data-id="0"] button.deleteButton,
.edit[data-id="0"] button.deleteButton {
  display: none; /* delete button not needed for dropzone */
}

/* from BlueprintWeb */
#hamburger-menu {
  display: none;
  cursor: pointer;
}

@media (max-width: 600px) {
  #hamburger-menu {
    display: block;
  }

  nav ul {
    display: none;
  }
}

/* page-element */
.hidden {
  display: none;
} /* so that text element can always be present, even if empty */
a.next-route {
  display: none;
}
.image-text-container {
  position: relative;
  text-align: center;
  /* so that even dropzone <div/> within is cenered */
  align-items: center;
  display: flex;
  flex-direction: column;
  /* text MUST NOT stick outside */
  overflow: hidden;
}
.image-text-container.tile-balone {
  color: black;
  width: 57vh;
  height: 80vh; /* A5 = 148 x 210 mm */
  margin: 10px; /* Optional: adds space between the containers */
  background-color: white;
}
.image-text-container.tile-balone.textleft {
  align-items: flex-start;
}
.image-text-container.tile-balone.textright {
  align-items: flex-end;
}
.image-text-container.tile-square {
  color: white;
  width: 500px; /* TODO temporary solution, so that tiles don't overlap */
  height: 500px;
  margin: 10px; /* Adds space between the containers */
  background-color: #ccc;
}
.image-text-container.tile-aper,
.image-text-container.tile-aper2 {
  color: white;
  width: 80vw;
  height: 80vh;
  margin: 10px; /* Adds space between the containers */
  background-color: #ccc;
}

.image-text-container .centered-text,
.edit .centered-text {
  position: absolute;
  top: 80%; /* was 50% */
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: blue;
  padding: 10px;
  font-size: xx-large;
  max-height: 100%; /* to compare with clone */
}
.image-text-container.tile-aper2 .centered-text {
  width: 90%; /* so that text uses most of the width on top of semi-transparent black bottom (not just 50%) */
}
.image-text-container.tile-balone .top-wrapper,
.image-text-container.tile-balone.textleft .top-wrapper,
.image-text-container.tile-balone.textleft[data-image] .top-wrapper,
.image-text-container.tile-balone.textright .top-wrapper,
.image-text-container.tile-balone.textright[data-image] .top-wrapper {
  display: none;
}
.image-text-container.tile-balone[data-image] .top-wrapper,
.image-text-container.tile-aper2 .top-wrapper,
.edit.tile-aper2 .top-wrapper {
  height: 70%;
  display: inline-block;
}
.image-text-container.tile-balone.textleft .centered-text-wrapper,
.image-text-container.tile-balone.textright .centered-text-wrapper {
  height: 100%;
  width: 40%;
}
.image-text-container.tile-balone.textleft .centered-text,
.image-text-container.tile-balone.textright .centered-text {
  position: static; /* i.e. not inherite absolute */
  transform: none; /* i.e. not inherite */
  font-size: medium; /* todo 20pt is in PDF */
}

.image-text-container.tile-balone .centered-text-wrapper {
  height: 30%;
  background-color: white;
  width: 100%;
  margin-bottom: 0px;
}
.image-text-container.tile-aper2 .centered-text-wrapper,
.edit.tile-aper2 .centered-text-wrapper {
  height: 30%;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
}
.image-text-container.tile-balone .centered-text {
  text-align: left; /* in tile-balone, even the centered text below image should be aligned to the left; i.e. reset */
  background-color: white;
  font-size: medium; /* todo 20pt is in PDF */
  position: static; /* i.e. not inherite absolute */
  transform: none; /* i.e. not inherite */
}
.image-text-container.tile-balone.textright div.buttonPanel {
  /* so that buttonPanel doesn't cover the text field */
  left: 10px;
  right: initial;
}
.image-text-container.tile-aper2 .centered-text,
.edit.tile-aper2 .centered-text {
  background-color: initial;
}

.image-text-container .nice-text,
.edit .nice-text {
  padding: 20px;
  font-size: xx-large;
  text-align: left;
  overflow: hidden; /* so that clone can have different height and spot the overflowing text */
}
.image-text-container.tile-balone .nice-text {
  font-size: medium; /* todo 20pt is in PDF */
}

.image-text-container img {
  width: 100%;
  height: auto;
  max-height: 500px; /* TODO aby obrázek nebyl přes celou výšku a nezakrýval další elementy ... dořešit jinak */
}

.k-container-square {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap; /* aby se dlaždice zalamovaly na další řádky */
}
/* messages */
#banner-container {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.banner {
  z-index: 1100; /* Ensure it's above other content incl. overlay */
  padding: 10px 20px;
  margin: 10px 20px;
  color: #ededed; /* not white, so that always visible */
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 800px; /* Max width of the individual banners */
  position: relative; /* To position the button relative to the banner */
}

.banner.info {
  background-color: #0069d9;
}

.banner.warning {
  background-color: #dc3545;
}

.banner button {
  position: absolute;
  right: 5px;
  top: 5px;
  border: none;
  background: none;
  color: #ededed;
  font-size: 20px;
  cursor: pointer;
}
/* messages animation, then slide to its position */
@keyframes floatBanner {
  0% {
    transform: translateY(50vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.banner.floating {
  animation: floatBanner 1.8s ease forwards;
  position: fixed;
  top: 0%;
  transform: translate(-50%, -50%);
  opacity: 1;
}

/* .editable (todo move to SB) */
.editable textarea {
  cursor: pointer;
  margin: 10px;
  border-radius: 10px;
  border: 10px solid skyblue;
  padding: 10px;
  resize: none; /* Prevents resizing of textarea */
  border-radius: 5px;
}
/* overlay */
div#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  /* So that text-counter is below */
  flex-direction: column;
  gap: 5px; /* Adds space between textarea and counter */
}
div#overlay textarea#overlayTextarea {
  width: 60%;
  height: 60%;
  padding: 10px;
}
/* Counter of text in overlay */
.text-counter {
  font-size: 14px;
  color: whitesmoke;
}
div.buttonPanel {
  /* how does the panel look */
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* TODO till messages above - use sb/editable-field.css */
div.image-text-container div.buttonPanel button {
  /* to show when hover, so hide by default */
  opacity: 0;
  transition: opacity 0.5s ease /*, visibility 0s linear 0.5s*/; /* Delay visibility change until after opacity transition */
}
div.image-text-container:hover div.buttonPanel button,
div.image-text-container div.buttonPanel.dont-hide button {
  /* hiding/showing */
  opacity: 1;
}
/* change visibility by click */
div.image-text-container div.buttonPanel.dont-hide button.button--toggle {
  background-color: teal;
}
div.image-text-container div.buttonPanel button.button--toggle {
  opacity: 1;
  display: inline;
}
/* buttons */
button.responsive {
  text-align: left;
}
button.button--toggle,
button.responsive button.button--toggle {
  text-align: center;
}
@media (max-width: 980px) {
  /* for Pixel7 MUST be at least 980px, less doesn't change it */
  button.responsive {
    font-size: xx-large; /* todo experiment */
  }
}
button.button--cancel {
  background-color: #cc2222; /* some light red */
}
button.button--delete {
  color: red;
}
button.button--edit {
  color: green;
}
button.button--save {
  background-color: #6666ff; /* some light blue */
}
/* TODO till buttons above - use sb/editable-field.css */
button.when-next-route {
  display: none; /* hide drill down and print buttons ... */
}
.image-text-container[data-next-route] button.when-next-route {
  display: inline; /* ... unless they can be visible */
}
.image-text-container[data-next-route][data-sub-elements]
  button.hide-sub-elements {
  display: none; /* hide edit button for a cover page */
}

/* home text */
.container-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}
.container-flex .item-row {
  flex: 1 1 300px; /* flex-grow, flex-shrink, flex-basis */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.container-flex .item-row:nth-child(even) {
  flex-direction: row-reverse;
}
.container-flex img {
  max-width: 100%;
  max-height: 350px;
  height: auto;
  border-radius: 8px;
}
@media (max-width: 600px) {
  .container-flex .item-row {
    flex-direction: column;
  }
  .container-flex .item-row:nth-child(even) {
    flex-direction: column;
  }
}

/* predplatne text */
.container-flex.predplatne {
  align-items: stretch; /* Ensures all items have the same height */
}
.container-flex.predplatne .item-row {
  flex: 1 1 300px; /* Ensure flexible sizing with a minimum width */
  display: flex;
  flex-direction: column; /* Ensure content stacks vertically */
  justify-content: flex-start; /* Align content to the top */
  align-items: center; /* Center elements horizontally */
  gap: 20px;
  box-sizing: border-box; /* Ensure padding doesn't affect height */
}
.container-flex.predplatne .item-row.predplatne--green {
  background: linear-gradient(
    135deg,
    #28a745,
    #a8e063
  ); /* Harmonious green gradient */
  border: 1px solid #218838; /* A slightly darker green for contrast */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* A soft shadow for pop */
}
.container-flex.predplatne .item-row.predplatne--silver {
  background: linear-gradient(135deg, #d9d9d9, #ffffff); /* Silver gradient */
  border: 1px solid #c0c0c0; /* Add a silver border */
  padding: 20px; /* Ensure enough spacing */
  border-radius: 8px; /* Smooth corners */
}
.container-flex.predplatne .item-row.predplatne--silver2 {
  background: linear-gradient(
    135deg,
    #e0e0e0,
    #f2f2f2
  ); /* Light silver with cool tone */
  border: 1px solid #bfbfbf; /* Subtle border */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}
.container-flex.predplatne .item-row.predplatne--gold {
  background: linear-gradient(135deg, #ffd700, #ffef99); /* Gold gradient */
  border: 1px solid #daa520; /* Add a gold border */
  padding: 20px; /* Ensure enough spacing */
  border-radius: 8px; /* Smooth corners */
}
.container-flex.predplatne .item-row.predplatne--Xplatinum {
  background: linear-gradient(135deg, #e5e4e2, #f8f8f8); /* Platinum gradient */
  border: 1px solid #c9c9c9; /* Light gray border for metallic feel */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* A soft shadow for depth */
}
.container-flex.predplatne .item-row.predplatne--platinum {
  background: linear-gradient(
    135deg,
    #d4d4d4,
    #ececec
  ); /* Richer platinum tones */
  border: 1px solid #a6a6a6; /* Slightly darker border */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Enhanced shadow for luxury effect */
}

/* book menu */
.book-menu {
  display: flex;
  width: 100%;
  justify-content: space-between; /* the 1st item is pushed to the start (left) & the last item to the end (right) */
  align-items: center; /* Optional: vertically centers items */
}
.book-menu a {
  text-decoration: none;
}

/* Header gradient */
h1 span.title {
  background: linear-gradient(
    90deg,
    #f6b2a2 0%,
    #e84230 9.96%,
    #af2272 27.68%,
    #9f154b 32.1%,
    #5a00c1 45.83%,
    #c2c8e1 58.23%,
    #22c0f3 88%,
    #5cc2d7 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  -webkit-box-decoration-break: clone; /* for multiline */
}