/* === Design tokens (khaki + orange accent) === */
:root{
  --clr-bg:#F3F0E2;
  --clr-text:#2F2D18;
  --clr-primary:#6B5E2E;
  --clr-primary-light:#D9D6A4; //#D9CDA4; 
  --clr-accent:#D97706;
  --radius:8px;
  --shadow:0 2px 8px rgba(0,0,0,.08);
  --header-h:56px;
  --fw-bold:600;
  --trans:all .2s ease-in-out;
}
@media(max-width:640px){:root{--header-h:48px}}

*{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;display:block}

html, body {
  height: 100%;
  min-height: 100%;
}

body{
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    background:var(--clr-bg);
    color:var(--clr-text);
    line-height:1.55;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header + Nav */
header{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;
  padding:0 1rem;background:var(--clr-primary);color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.1)}
header h1{font-size:1.25rem;font-weight:700}
header nav{display:flex;gap:.75rem;font-size:.95rem}
header nav a{color:#fff;text-decoration:none;position:relative;padding-bottom:2px}
header nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--clr-accent);transition:width .2s}
header nav a:hover::after{width:100%}

.hamb{display:none;background:transparent;border:0;color:#fff;font-size:1.7rem;cursor:pointer}
@media(max-width:640px){
 .hamb{display:block}
 header nav{position:absolute;top:var(--header-h);right:0;width:70vw;max-width:260px;flex-direction:column;gap:.6rem;background:var(--clr-primary);padding:.9rem .75rem;display:none;border-bottom-left-radius:var(--radius)}
 header nav.show{display:flex}
}

/* Map */
#map{height:calc(100vh - var(--header-h));width:100vw}

/* Buttons */
button,.btn{padding:.7rem 1.25rem;border:0;border-radius:var(--radius);background:var(--clr-accent);color:#fff;font-weight:var(--fw-bold);cursor:pointer;transition:var(--trans)}
button:hover,.btn:hover{filter:brightness(.94)}

/* Forms */
.form-wrapper{display:flex;justify-content:center;padding:3rem 1rem}
.auth-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);width:100%;max-width:420px;padding:1.75rem 1.5rem}
.auth-card h1{text-align:center;font-size:1.4rem;margin-bottom:1.3rem;color:var(--clr-primary)}
.auth-card label{font-size:.95rem;margin-bottom:.85rem;color:var(--clr-text);display:block;font-weight:500}
.auth-card input,.auth-card textarea{padding:.7rem .75rem;font-size:1rem;border:1px solid #cbd5e1;border-radius:var(--radius);width:100%;background:#fff;margin-top:.3rem;transition:border-color .2s}
.auth-card input:focus,.auth-card textarea:focus{outline:none;border-color:var(--clr-accent)}
.error{color:#d33;text-align:center;margin-bottom:.8rem}

@media(max-width:480px){.form-wrapper{padding:2rem .5rem}.auth-card{padding:1.4rem 1rem}}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:1.5rem;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
th,td{padding:.7rem .9rem;border-bottom:1px solid #e5e7eb}
th{background:var(--clr-primary);color:#fff;text-align:left;font-weight:600}
tr:last-child td{border-bottom:none}
tr:nth-child(even) td{background:#faf9f2}

/* Utility */
.info{text-align:center;margin:2rem;font-size:1.05rem}
.lang-switch a{color:#fff;font-size:.9rem;text-decoration:none;margin-left:.6rem}
.lang-switch a:hover{text-decoration:underline}


.locate-buttons {
  position: absolute;
  right: .75rem;
  bottom: 1.75rem;
  display: flex;
  flex-direction: column; /* tlačítka pod sebe */
  gap: 0.5rem;
  z-index: 1001;
  pointer-events: auto;
}

.locate-buttons .locate-btn {
  background: var(--clr-accent);
  color: white;
  border: none;
  padding: .6rem 1.2rem;
  border-radius: var(--radius);
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: var(--shadow);
  transition: filter .2s;
  pointer-events: auto;
}

.locate-buttons .locate-btn:disabled {
  background: #888;
  cursor: not-allowed;
  opacity: 0.8;
}

.spinner {
  width: 1em;
  height: 1em;
  border: 2px solid white;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}

.locate-btn.loading .spinner {
  display: inline-block;
}

.locate-btn.loading .btn-text {
  opacity: 0.6;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
  .locate-buttons {
    right: .5rem;
    bottom: 1rem;
  }
}


#user-position {
  font-weight: bold;
  margin: 1em 0 .5em 0;
}
.event-item {
  padding: 0.7em 1em;
  margin-bottom: 1em;
  border-radius: 8px;
  background: #faf9f2;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.event-item a {
  color: #d97706;
  text-decoration: underline;
  font-size: .97em;
}

.mapycz-btn {
  display: inline-block;
  padding: 0.42em 1.5em;
  font-size: 1em;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(180deg, #53d128 0%, #4cc417 100%);
  border-radius: 18px;
  border: none;
  outline: none;
  box-shadow: none;
  text-decoration: none;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.12s, filter 0.12s;
}

.mapycz-btn:hover,
.mapycz-btn:focus {
  background: linear-gradient(180deg, #41ba13 0%, #34a306 100%);
  text-decoration: underline;
  filter: brightness(1.04);
}

.event-item .mapycz-btn {
  color: #fff !important;
  text-decoration: none;
}


/* Footer – spodní lišta */
footer {
  background: var(--clr-primary-light); /* světlejší než header */
  color: var(--clr-bg);                 /* kontrastní světlý text */
  padding: 2.3em 0 1.4em 0;
  text-align: center;
  width: 100vw;
  box-shadow: 0 -2px 18px #0001;
  margin-top: auto;
  font-size: 1.13em;
  border-top: 2px solid var(--clr-accent);
}

.footer-nav {
  display: flex;
  justify-content: center;
  gap: 2.8em;
  flex-wrap: wrap;
  margin-bottom: 0.7em;
}

.footer-nav a {
  color: var(--clr-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.08em;
  letter-spacing: 0.01em;
  transition: color .18s, background .2s;
  padding: 0 .5em;
  border-radius: 6px;
}

.footer-nav a:hover {
  color: var(--clr-primary);
  background: #f6f2e2;
}

.footer-copy {
  font-size: 1em;
  opacity: 0.82;
  margin-top: .6em;
}