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; overflow-x: hidden; }
h1                            { font-size: 36px; line-height: 1.5; text-align: center; margin-top: 30px; }
h1 span                       { color: #139F40; }
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; position: relative; }

@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 35px auto; padding: 0 15px; }
.container.index              { margin: 40px auto 90px auto; }

@media (max-width: 768px)
{
  .container.index            { margin: 10px auto 60px auto; }
}


/* 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; z-index: 100; 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; }
}


/* 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); position: relative; }
.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; }
.stesticko-not-active          { display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; gap: 20px; left: 0px; top: 0px; right: 0px; bottom: 0px; background-color: rgba(255, 255, 255, 0.9); }

/* --- 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; }
.stesticko-points              { background: #E4F8EB; color: #16a34a; padding: 3px 10px; border-radius: 10px; font-weight: 500; font-size: 15px; white-space: nowrap; text-align: right; }
.stesticko-top-row             { display: flex; justify-content: space-between; align-items: center; }

/* --- Footer pod kartou --- */
.stesticko-actions             { display: flex; gap: 15px; align-items: center; justify-content: flex-end; }
.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; }
  .stesticko-actions          { width: 100%; flex-direction: column; }
  .stesticko-actions button   { width: 100%; }
  .stesticko-actions form     { width: 100%; text-align: center; }
}


/* Tvorba štěstíčka ----------------------------------------------------------------------------- */
.card-box                     { width: 100%; max-width: 500px; border: 1px solid #ccc; position: relative; z-index: 2; border-radius: 10px; box-sizing: border-box; display: block; margin: 0 auto; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.card-bookmarks               { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; gap: 15px; width: 100%; max-width: 500px; margin: 0px auto; }
.card-image                   { width: 100%; border-radius: 10px; display: block; clip-path: inset(2px); }
.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; }

/* -- */
.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; }

@media (max-width: 500px)
{
  .card-bookmarks a span span { display: none; }
}


/* Menu ----------------------------------------------------------------------------------------- */
.app-avatar{margin-left:auto;width:40px;height:40px;display:grid;place-items:center;border:1px solid #e5e7eb;border-radius:50%;background:#f3f4f6;cursor:pointer;font-size:20px;user-select:none;position:relative;z-index:60} /* NEW: z-index nad panelem */
.app-avatar .icon-close{display:none} /* NEW */
body.menu-open .app-avatar .icon-burger{display:none} /* NEW */
body.menu-open .app-avatar .icon-close{display:block} /* NEW */

.menu-noscroll{overflow:hidden;height:100vh;  position: fixed; /* Nová vlastnost pro iOS */  width: 100%;    /* Nová vlastnost pro iOS */}
.menu-user-row{display:none;align-items:center;gap:12px;padding:0;border-bottom:1px solid #e5e7eb;background:#fff}
.menu-avatar{width:44px;height:44px;border-radius:50%;background:#f3f4f6;display:grid;place-items:center; }
.menu-avatar-text{line-height:1.5}
.menu-user-name{font-weight:700}
.menu-user-secondary{font-size:12px;color:#6b7280}
.menu-points{position: relative; display:inline-flex;align-items:center;justify-content: center; width: 43px; height: 43px;gap:5px;background:rgba(34,197,94,.12);color:#16a34a;border-radius:999px;font-weight:700;text-decoration: none;}
.menu-points span {position: absolute; top: -9px; right: -5px; font-size: 17px !important; }
.user-row--as-trigger{margin-left:auto;cursor:pointer;border-bottom:0}
.menu-close-btn{width:40px;height:40px;border:1px solid #e5e7eb;border-radius:10px;background:#f3f4f6;cursor:pointer;font-size:22px;line-height:1}
#menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .15s;z-index:40}
#menu-overlay.menu-open{opacity:1;pointer-events:auto;backdrop-filter: blur(10px);}
#menu-panel{position:relative;background:rgba(255, 255, 255, 0.95);display:flex;flex-direction:column;z-index:50;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .4s,transform .4s;box-shadow:0 6px 18px rgba(0,0,0,.12)}
#menu-panel.menu-open{opacity:1;pointer-events:auto;transform:none}

/* NEW: řádek s body pro mobil */
.menu-points-row{display: flex;justify-content: space-between; font-weight: 600; line-height: 1.6;align-items: center;padding:10px 16px;border-bottom:1px solid #e5e7eb;}
.menu-points-row span {font-size: 12px; display: block; font-weight: 400; }

@media (max-width:899px){
  .app-avatar{display:grid}
  .menu-close-btn{display:none} /* close tlačítko v user-row se na mobilu nepoužívá */
  #menu-panel{position:fixed;top:0;right:0;height:100%;width:min(80%,380px);transform:translateX(100%);border-left:1px solid #e5e7eb}
  #menu-panel.menu-open{transform:translateX(0)}
  .menu-user-row{padding:19px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)}
}
@media (min-width:900px){
  .app-avatar{display:none}
  .menu-close-btn{display:none}
  #menu-overlay{display:none}
  #menu-panel{position:absolute;right:16px;top:75px;width:270px;max-height:70vh;overflow:auto;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 18px 36px rgba(0,0,0,.12)}
}
.menu-user-row .menu-spacer{flex:1}

/* Tlačítka přihlášení / registrace */
.menu-auth                   { border-bottom:1px solid #e5e7eb; padding: 20px 15px; }
.menu-auth-in                { display: flex; gap: 0; align-items: center; overflow: hidden; border-radius: 10px; background: #eaf8f0; }
.menu-auth .menu-btn         { flex: 1; display: inline-block; text-align: center; text-decoration: none; padding: 5px 15px 3px 15px; color: #145a32; background: #eaf8f0; border-radius: 10px; transition: background-color .2s ease, box-shadow .2s ease, transform .02s ease, filter .15s ease, color .2s ease; }
.menu-auth .menu-btn:hover   { background-color: #1E874B; color: #FFFFFF; }
.menu-auth .menu-btn-primary { color: #ffffff; background-color: #139F40; }

/* Tlačítka menu */
.menu-list                   { padding: 10px 0; }
.menu-item                   { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.menu-item a                 { text-decoration: none; padding: 10px 15px; width: 100%; box-sizing: border-box; }
.menu-item:hover             { background: #f3f4f6; }

@media (min-width:900px)
{
  .menu-item a               { padding: 5px 15px; }
}

/* Tlačítko odhlášení */
.menu-footer                 { padding: 10px 0; margin-top: auto; }
.menu-logout-btn             { display: block; width: 100%; padding: 5px 15px; color: #dc2626; text-decoration: none; transition: background-color .2s ease, color .2s ease; box-sizing: border-box; }
.menu-logout-btn:hover       { background: #f3f4f6; }

@media (max-width:899px)
{
  .menu-footer               { padding: 5px 0px;  margin-bottom: 20px; }
}