:root {
  --caritas-red: #7A0F12;
  --caritas-red-rgb: 122,15,18;
  --text-color: #111;
  --accent-green: #1f4d3a;
  --bg: #f6f0e6;
}
*{box-sizing:border-box}
html,body {
	margin:0;
	padding:0;
	background:var(--bg);
	color:var(--text-color);
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.container {
	/*max-width:1140px;*/
        max-width:90%;
	margin:0 auto;
	padding:0 16px
}
.skip-link {
	position:absolute;
	left:-9999px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden
}
.skip-link:focus {
	left:16px;
	top:16px;
	width:auto;
	height:auto;
	background:#fff;
	padding:8px 12px;
	border-radius:6px
}

/* Translucent header with blur */
.site-header {
	position:sticky;
	top:0;
	z-index:1000;
	background:rgba(var(--caritas-red-rgb),0.85);
	backdrop-filter:blur(6px);
	-webkit-backdrop-filter:blur(6px);
	border-bottom:1px solid rgba(255,255,255,.18)
}
.header-inner {
    display:flex;
    align-items:center;
    gap:16px;
    min-height:64px
}

.logo img {
    height:40px;
    display:block
}
.nav-toggle{margin-left:auto;display:none;background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;padding:6px 10px;border-radius:6px}
.primary-nav{margin-left:auto}
.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:12px}
.primary-nav a{color:#fff;text-decoration:none;padding:8px 10px;border-radius:6px}
.primary-nav a:hover,.primary-nav a:focus{background:rgba(255,255,255,0.08);text-decoration:underline}

/* Hero with translucent panel over background */
/*
.hero {
    position:relative;
    background:url('../images/mapa_pozadi01.jpg') center/cover no-repeat;
    min-height: 220px
}
.hero-overlay{position:absolute;inset:0;background:rgba(246,240,230,0.65)}
.hero .container{position:relative;padding:40px 16px}
*/
/* Content layout */
/* with sidebar
.layout{
	display:grid;
	grid-template-columns:1fr 320px;
	gap:24px;
	padding:24px 0
}
.content{min-width:0}
.sidebar{min-width:0}
*/

/* without sidebar */
.layout {
    display: block;
    padding: 24px 0; /* můžeš upravit podle potřeby */
}

.sidebar {
    display: none !important;
}

.content {
    width: 100%;
}

/* Map section (for Leaflet or similar) */
.map-section{
    padding:24px 0;
}

/* Footer */
.site-footer{
	background:rgba(var(--caritas-red-rgb),0.85);
	color:#fff;
	margin-top:18px
}
.site-footer .container{padding:10px 10px}
.site-footer a{color:#fff}

.site-footer .container p {
    margin-bottom: 0;
}
/* Responsive */
@media (max-width: 992px){
  .layout{grid-template-columns:1fr}
}
@media (max-width: 768px){
  .nav-toggle{display:block}
  .primary-nav{display:none;width:100%}
  .primary-nav.open{display:block}
  .primary-nav ul{flex-direction:column;gap:0}
  .primary-nav a{display:block;padding:12px}
  .site-header{background:rgba(var(--caritas-red-rgb),0.90)}
  .hero{min-height:180px}
}


/* registrační formulář */

.com_users.view-registration .registration, #member-registration {
    max-width: 480px;
    margin: 32px auto;
    padding: 32px;
    
    background: rgba(255, 255, 255, 0.85);   /* světlé průhledné pozadí */
    backdrop-filter: blur(6px);              /* jemné rozmazání – moderní efekt */
    border-radius: 12px;

    box-shadow: 0 4px 20px rgba(0,0,0,0.08); /* lehký stín */
}

#member-registration button,
#member-registration .btn-primary {
    background-color: #7A0F12;    /* Caritas vínová */
    border-color: #7A0F12;
    color: #fff;
    padding: 5px 18px;
    border-radius: 6px;
    margin-top: 10px;
}

#member-registration .btn-secondary {
    padding: 5px 10px;
}
#member-registration button:hover,
#member-registration .btn-primary:hover {
    background-color: #5c0b0e;
    border-color: #5c0b0e;
}

#member-registration .control-group {
    margin-bottom: 18px;
}

#member-registration input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.input-password-toggle.btn.btn-secondary {
    background-color: #6c757d !important; /* Bootstrap secondary */
    border-color: #6c757d !important;
    color: #fff !important;
}

/* Hover efekt – rovněž standardní */
.input-password-toggle.btn.btn-secondary:hover,
.input-password-toggle.btn.btn-secondary:focus {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
    color: #fff !important;
}


/* Flexbox centrování obsahu uvnitř .controls */

.control-group .controls {
  display: flex;
  justify-content: center;   /* vodorovné centrování */
  align-items: center;       /* svislé zarovnání (u stejně vysokých prvků) */
  flex-wrap: wrap;           /* když je víc prvků, mohou se zalomit */
  gap: 12px;                 /* mezera mezi prvky (třeba mezi tlačítky) */
}

/* Pokud chceš, aby se prvky lámaly pod sebe na úzkých obrazovkách: */
@media (max-width: 480px) {
  .control-group .controls {
     flex-direction: column; /* pod sebe na malých zařízeních */
     align-items: center;    /* zarovnané na střed */
  }
}

/***************************************
 * LOGIN – stejné zarovnání a vzhled jako registrace
 * Vyhovuje HTML struktuře:
 * .com-users-login > form#com-users-login__form.form-validate ...
 ***************************************/

/* Karetní panel uprostřed (stejné proporce jako u registrace) */
.com-users-login #com-users-login__form {
  max-width: 480px;
  margin: 32px auto;
  padding: 32px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* Základ inputů (stejně jako u registrace) */
.com-users-login #com-users-login__form input[type="text"],
.com-users-login #com-users-login__form input[type="password"],
.com-users-login #com-users-login__form input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

/* Centrovat obsah controls a tlačítko Přihlásit se */
.com-users-login #com-users-login__form .control-group .controls,
.com-users-login #com-users-login__form .com-users-login__submit .controls {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Password skupina – input + toggle oko uprostřed, pěkné mezery */
.com-users-login #com-users-login__form .password-group,
.com-users-login #com-users-login__form .password-group .input-group {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

/* Šířka input-group a její centrace */
.com-users-login #com-users-login__form .input-group {
  max-width: 480px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Tlačítko Přihlásit se – Caritas vzhled jako u registrace */
.com-users-login #com-users-login__form .btn.btn-primary {
  background-color: #7A0F12;
  border-color: #7A0F12;
  color: #fff;
  padding: 5px 18px;
  border-radius: 6px;
  margin-top: 10px;
  cursor: pointer;
}
.com-users-login #com-users-login__form .btn.btn-primary:hover,
.com-users-login #com-users-login__form .btn.btn-primary:focus {
  background-color: #5c0b0e;
  border-color: #5c0b0e;
}

/* Toggle „oko“ – standardní šedá Bootstrap secondary (bez vlivu šablony) */

.com-users-login #com-users-login__form .input-password-toggle.btn.btn-secondary {
  background-color: #6c757d !important; /* Bootstrap secondary */
  border-color: #6c757d !important;
  color: #fff !important;
  padding: 5px 10px;
  border-radius: 6px;
  margin-top: 10px;
  cursor: pointer;
  
}
.com-users-login #com-users-login__form .input-password-toggle.btn.btn-secondary:hover,
.com-users-login #com-users-login__form .input-password-toggle.btn.btn-secondary:focus {
  background-color: #5a6268 !important;
  border-color: #545b62 !important;
  color: #fff !important;
}

/* „Pamatuj si mě“ – zarovnání obsahu na střed */
.com-users-login #com-users-login__form .com-users-login__remember .form-check {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* Na mobilu sázet prvky pod sebe, udržet střed */
@media (max-width: 480px) {
  .com-users-login #com-users-login__form .control-group .controls,
  .com-users-login #com-users-login__form .password-group,
  .com-users-login #com-users-login__form .password-group .input-group {
    flex-direction: column;
    align-items: center;
  }
}

/* Volitelné: odkazy Reset/Remind/Register pod formulářem do středu */
.com-users-login .com-users-login__options {
  max-width: 480px;
  margin: 12px auto 0 auto;
}
.com-users-login .com-users-login__options .list-group-item {
  text-align: center;
}

/* Větší mezery mezi odkazy v .com-users-login__options */
.com-users-login__options .list-group-item {
    margin: 10px 0;      /* svislé mezery mezi řádky */
    padding: 12px 12px;  /* zvětšený padding uvnitř */
    text-align: center;  /* zarovnání na střed */
}

/* Volitelně: více prostoru nad seznamem */
.com-users-login__options {
    margin-top: 24px;
}

.controls .small {
    font-size: 0.8em;
}

/********************************************
 * SJEDNOCENÝ VZHLED USER FORMŮ:
 * - Zapomenuté heslo (com-users-reset)
 * - Zapomenuté jméno (com-users-remind)
 * Vzhled = stejný jako registrace/login
 ********************************************/

/* Panel formuláře — stejný jako registrace/login */
.com-users-reset #user-registration,
.com-users-remind #user-registration {
    max-width: 480px;
    margin: 32px auto;
    padding: 32px;

    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* Legenda / popis nahoře */
.com-users-reset legend,
.com-users-remind legend {
    font-size: 1rem;
    margin-bottom: 18px;
    text-align: center;
}

/* Inputy — stejné jako registrace */
.com-users-reset #user-registration input,
.com-users-remind #user-registration input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

/* control-group struktura */
.com-users-reset .control-group,
.com-users-remind .control-group {
    margin-bottom: 18px;
}

/* Zarovnání kontrol na střed (e-mail input + tlačítko) */
.com-users-reset .control-group .controls,
.com-users-remind .control-group .controls {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Submit tlačítko — Caritas styl */
.com-users-reset .btn-primary,
.com-users-remind .btn-primary {
    background-color: #7A0F12;
    border-color: #7A0F12;
    color: #fff;
    padding: 8px 22px;
    border-radius: 6px;
    margin-top: 10px;
    cursor: pointer;
}

.com-users-reset .btn-primary:hover,
.com-users-remind .btn-primary:hover {
    background-color: #5c0b0e;
    border-color: #5c0b0e;
}

/* Front-end validace (červené inputy) vizuálně sjednotit */
.com-users-reset .form-control-danger,
.com-users-remind .form-control-danger {
    border-color: #dc3545;
}

/* Responzivní přepnutí pod sebe */
@media (max-width: 480px) {
    .com-users-reset .control-group .controls,
    .com-users-remind .control-group .controls {
        flex-direction: column;
        align-items: center;
    }
}

/* Options (pokud se později přidají) */
.com-users-reset .com-users-reset__options,
.com-users-remind .com-users-remind__options {
    max-width: 480px;
    margin: 12px auto 0 auto;
    text-align: center;
}

/* ---  --- */
/********************************************
 * USERS / PROFILE  (čtení profilu)
 ********************************************/
.com-users-profile.profile {
    max-width: 600px;
    margin: 32px auto;
    padding: 32px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* Legend */
.com-users-profile.profile legend {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 16px;
    text-align: center;
}

/* Zobrazení položek profilu */
.com-users-profile.profile dl {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.com-users-profile.profile dt {
    font-weight: 600;
    color: #7A0F12;
}

.com-users-profile.profile dd {
    margin-left: 0;
    padding: 4px 0 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* Tlačítko Upravit profil */
.com-users-profile__edit .btn {
    margin-bottom: 12px;
}

.com-users-profile__edit {
    margin-bottom: 16px;
}

/********************************************
 *   USERS – PROFILE EDIT
 *   Stejný vzhled jako registrační formulář
 ********************************************/

/* Celý formulář jako card (kopie #member-registration) */
.com-users-profile__edit.profile-edit #member-profile {
    max-width: 680px;
    margin: 32px auto;
    padding: 32px;

    background: rgba(255, 255, 255, 0.85); /* stejné jako registrace */
    backdrop-filter: blur(6px);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* Legenda stejná jako registrace */
.com-users-profile__edit.profile-edit legend {
    font-size: 1.3rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
}

/* Zarovnání .controls stejně jako u registrace */
.com-users-profile__edit.profile-edit .control-group .controls {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Inputy shodné se stylem registrace */
.com-users-profile__edit.profile-edit input,
.com-users-profile__edit.profile-edit select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    max-width: 480px;
}

/* Password group – stejný styl jako u registrace */
.com-users-profile__edit.profile-edit .password-group .input-group {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 480px;
}

.com-users-profile__edit.profile-edit .password-group .input-group input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.com-users-profile__edit.profile-edit .password-group .input-group .input-password-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    background-color: #6c757d !important; /* standard secondary */
    border-color: #6c757d !important;
    color: #fff !important;

    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hover efekt jako u registrace */
.com-users-profile__edit.profile-edit .password-group .input-group .input-password-toggle:hover {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
}

/* Meter + feedback doprostřed (shodné s registrací) */
.com-users-profile__edit.profile-edit meter,
.com-users-profile__edit.profile-edit #password-0 {
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

/* Submit sekce – stejné Caritas tlačítko jako registrace */
.com-users-profile__edit-submit .btn-primary {
    background-color: #7A0F12;
    border-color: #7A0F12;
    color: #fff;
    padding: 8px 22px;
    border-radius: 6px;
    cursor: pointer;
}

.com-users-profile__edit-submit .btn-primary:hover {
    background-color: #5c0b0e;
    border-color: #5c0b0e;
}

/* Sekundární (zrušit) tlačítko */
.com-users-profile__edit-submit .btn-danger {
    padding: 8px 22px;
    border-radius: 6px;
    margin-left: 8px;
}

.red {
    color: #FF0000;
}