html, body                    { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; font-size: 16px; line-height: 1.8; color: #333333; height: 100%; display: flex; flex-direction: column; background-color: #FAF9F6;  background-image: url("/_img/bg.png"); background-repeat: repeat; background-size: 300px;  }
h1                            { font-size: 36px; line-height: 1.5; text-align: center; margin-top: 30px; }
p                             { margin-bottom: 24px; }
input                         { font-family: 'Poppins', sans-serif; font-size: 16px; padding: 10px 16px; border: 1px solid #ccc; border-radius: 8px; width: 100%; box-sizing: border-box; }
form                          { display: inline-block; } /* item.php - 2 tlačítka vedle sebe */
label                         { display: block; }
button, .button               { font-family: 'Poppins', sans-serif; font-size: 16px; line-height: normal; padding: 10px 24px; background-color: #139F40; color: #fff; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.2s ease-in-out; text-decoration: none; }
button:hover, .button:hover   { background-color: #1e874b; }
ul, ol                        { list-style: none; margin: 0; padding: 0; }
li                            { margin: 6px 0; }
a                             { color: #139F40; }
.center                       { margin: 0 auto; display: table; text-align: center; }
.errors                       { display: flex; justify-content: center; align-items: center; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); }
.errors_box                   { background: rgba(255, 255, 255, 0.6); border-radius: 12px; padding: 20px; color: black; backdrop-filter: blur(8px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); max-width: 410px; width: 75%; text-align: center; }


#map                          { height: 400px; margin-bottom: 80px; }
.buttons                      { display: flex; gap: 20px; justify-content: center; }

@media (max-width: 500px)
{
  .buttons                    { flex-direction: column; }
}


/* Hlavička ------------------------------------------------------------------------------------- */
header                        { background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.header_in                    { max-width: 1200px; margin: 0 auto; padding: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; }

@media (max-width: 768px)
{
  h1                          { font-size: 32px; }
  .header_in                  { flex-direction: row; flex-wrap: nowrap; }
}


/* Hlavní --------------------------------------------------------------------------------------- */
main                          { flex: 1; }


/* Patička -------------------------------------------------------------------------------------- */
footer                        { background-color: rgba(240, 237, 229, 0.9); text-align: center; font-size: 0.9rem; padding: 32px 0; position: relative; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); }
.footer_in                    { max-width: 1200px; margin: 0 auto; padding: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; }
.footer-left                  { font-size: 14px; }
.social-icons                 { display: flex; align-items: center; gap: 20px; }
.social-icons a               { display: flex; align-items: center; }
.social-icons svg             { width: 32px; height: 32px; fill: #959595; transition: fill 0.2s ease; }
.social-icons a:hover svg     { fill: #000; }

@media (max-width: 768px)
{
  .footer_in                  { justify-content: center; flex-direction: column; }
}


/* Logo ----------------------------------------------------------------------------------------- */
.logo img                     { width: 210px; max-width: 100%; height: auto; display: block; }


/* Hlavní --------------------------------------------------------------------------------------- */
.container                    { max-width: 800px; margin: 0px auto 20px auto; padding: 0 15px; }


/* Vyhledávací formulář ------------------------------------------------------------------------- */
.search_form                  { display: flex; gap: 15px; justify-content: center; }
.search_form input            { max-width: 300px; }

@media (max-width: 350px)
{
  .search_form                { flex-direction: column; }
  .search_form input          { max-width: none; }
}


/* Registrace ----------------------------------------------------------------------------------- */
.register                     { display: none; justify-content: center; align-items: center; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); }
.register_box                 { background: rgba(255, 255, 255, 0.6); border-radius: 12px; padding: 20px; color: black; backdrop-filter: blur(8px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); max-width: 410px; width: 75%; text-align: center; }

.register_form                { display: flex; gap: 15px; justify-content: center; }
.register_form input          { max-width: 300px; }

.register_next_time           { display: block; padding-top: 15px; font-size: 14px; }

@media (max-width: 500px)
{
  .register_form              { flex-direction: column; }
  .register_form input        { max-width: none; }
}


/* Hlavní menu ----------------------------------------------------------------------------- */
.right-controls               { display: flex; align-items: center; gap: 16px; }

@media (max-width: 768px)
{
  .right-controls             { margin-left: auto; display: flex; gap: 12px; align-items: center; }
}


/* Uživatelské menu ----------------------------------------------------------------------------- */
.avatar                       { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: block; }

.user-menu                    { position: relative; }
.user-menu .dropdown          { display: none; position: absolute; right: 0; background: white; border: 1px solid #ddd; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); padding: 10px; border-radius: 6px; min-width: 180px; z-index: 100; }
.user-menu.open .dropdown     { display: block; }

@media (hover: hover)
{
  .user-menu:hover .dropdown  { display: block; }
  .user-menu.open .dropdown   { display: none; }
}

.dropdown a                   { text-decoration: none; color: #00897b; font-weight: 500; }


/* Galerie -------------------------------------------------------------------------------------- */
.gallery-wrapper              { overflow: hidden; width: 100%; margin-bottom: 40px; }
.gallery                      { display: flex; animation: scroll 60s linear infinite; will-change: transform; }
.gallery img                  { width: 200px; height: 200px; object-fit: cover; margin-right: 20px; border-radius: 8px; flex-shrink: 0; }

@keyframes scroll             { 0% { transform: translateX(0); } 100% { transform: translateX(-2500px); } }


/* Seznam štěstíček ----------------------------------------------------------------------------- */

/* --- Karta --- */
.stesticko-wrapper             { padding: 15px; margin-bottom: 25px; line-height: 1.5; border-radius: 12px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.stesticko-card                { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "img right"; gap: 15px; align-items: start; align-content: start; }
.stesticko-photo               { grid-area: img; max-width: 160px; height: auto; align-self: start; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; }
.stesticko-right               { grid-area: right; display: flex; flex-direction: column; gap: 15px; }

/* --- Meta uvnitř --- */
.stesticko-meta                { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.stesticko-info                { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }
.stesticko-code                { font-size: 22px; font-weight: 700; color: #2e7d32; }
.stesticko-date, .stesticko-location { font-size: 14px; color: #666; }
.stesticko-points              { background: #fff3cd; padding: 3px 10px; border-radius: 10px; font-weight: 500; font-size: 15px; color: #333; white-space: nowrap; text-align: right; }
.stesticko-top-row             { display: flex; justify-content: space-between; align-items: center; }
.not_active                    { background: #f3f3f3; }

/* --- Footer pod kartou --- */
.footer-under-card             { display: flex; gap: 15px; margin-top: 12px; }
.stesticko-badges              { display: flex; gap: 15px; align-items: center; }
.stesticko-badges button       { padding: 2px 10px; background: #ffd54f; color: #5d4037; font-size: 12px; border-radius: 8px; }
.stesticko-actions             { display: flex; gap: 15px; margin-left: auto; align-items: center; }
.stesticko-actions button, .stesticko-actions label { padding: 3px 15px; }

/* --- Mobil --- */
@media (max-width: 600px) {
  .stesticko-card                { grid-template-columns: auto 1fr; grid-template-areas: "img meta" "content content"; align-items: start; }
  .stesticko-right               { display: contents; }
  .stesticko-meta                { grid-area: meta; }
  .stesticko-content             { grid-area: content; }
  .stesticko-photo               { max-width: 100px; }
  .footer-under-card             { flex-direction: column; }
  .stesticko-actions             { width: 100%; flex-direction: column; }
  .stesticko-actions button      { width: 100%; }
}


/* Tvorba štěstíčka ----------------------------------------------------------------------------- */
.card-box                     { width: 100%; max-width: 400px; border: 1px solid #ccc; border-radius: 10px; display: block; margin: 0 auto; }
.card-image                   { width: 100%; border-radius: 10px; display: block; clip-path: inset(2px); }
.btn-download                 { display: inline-block; margin-top: 0.5em; padding: 0.6em 1.2em; background-color: #f0f0f0; color: #333; text-decoration: none; border-radius: 6px; border: 1px solid #ccc; font-weight: bold; transition: background-color 0.2s ease; }
.btn-download:hover           { background-color: #e0e0e0; }
.activation-section           { margin-top: 3em; }
.activation-section h2        { margin-bottom: 0.5em; font-size: 1.4em; }
.lead                         { font-size: 1.05em; line-height: 1.6; margin-bottom: 1em; }
.muted                        { font-size: 0.9em; color: #666; margin-top: 1em; }
.warning                      { color: #a94442; font-size: 0.9em; margin-top: 0.3em; font-weight: bold; }

/* -- */
.tips-container               { max-height: 0; overflow: hidden; transition: max-height 0.5s ease, padding 0.5s ease; padding: 0 0; }
.tips-container.open          { max-height: 600px; padding: 1em 0; }


/* Přihlášení ----------------------------------------------------------------------------------- */
.login-form input             { margin-bottom: 15px; }