/* ===== assets/css/app.css ===== */

/* =========================================================
   BuddyCzech - Main stylesheet
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    font-family:
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    background: var(--bg);
    color: var(--text);

    transition:
        background .25s ease,
        color .25s ease;
}


img {
    max-width: 100%;
    display: block;
}


a {
    color: inherit;
    text-decoration: none;
}


button,
input,
textarea,
select {
    font: inherit;
}


/* =========================================================
   VARIABLES
   ========================================================= */


:root {

    /* layout */

    --container-width: 1400px;

    --header-height: 72px;

    --header-bg:rgba(255,255,255,.75);


    /* spacing */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;


    /* radius */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;


    /* shadows */

    --shadow-sm:
        0 2px 8px rgba(0,0,0,.08);

    --shadow-md:
        0 10px 25px rgba(0,0,0,.12);


    /* animation */

    --transition:
        .25s ease;


    /* colors */

    --primary:#0d6efd;
    --primary-hover:#0b5ed7;

    --success:#198754;
    --warning:#ffc107;
    --danger:#dc3545;



    /* LIGHT MODE */

    --bg:#ffffff;

    --surface:#f5f6f8;

    --card:#ffffff;

    --text:#202124;

    --text-muted:#6c757d;

    --border:#dee2e6;

}



/* =========================================================
   DARK MODE
   ========================================================= */


html[data-theme="dark"] {


    --bg:#0f172a;

    --surface:#1e293b;

    --card:#243247;

    --header-bg:rgba(15,23,42,.75);

    --text:#f8fafc;

    --text-muted:#94a3b8;


    --border:#334155;

}



/* =========================================================
   GLOBAL LAYOUT
   ========================================================= */


.app {

    min-height:100vh;

    display:flex;

    flex-direction:column;

}



.main {

    flex:1;

    background:var(--bg);

}



/* =========================================================
   CONTAINER
   ========================================================= */


.container {

    width:100%;

    max-width:var(--container-width);

    margin:0 auto;

    padding-left:var(--space-5);

    padding-right:var(--space-5);

}



/* =========================================================
   PAGE WRAPPER
   ========================================================= */



.page {

    width:100%;

    max-width:var(--container-width);

    margin:0 auto;

}

/* =========================================================
   MAIN CONTENT BLOCK
   ========================================================= */


.content-wrapper {

    width:83.333%; /* 10 z 12 */

    margin:var(--space-6) auto;


    background:var(--surface);

    padding:var(--space-6);

    border-radius:var(--radius-lg);

}






/* =========================================================
   12 COLUMN GRID
   ========================================================= */


.page-grid {

    display:grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    gap:var(--space-5);

}

/* =========================================================
   ROW GRID
   ========================================================= */


.row {

    display:grid;

    grid-template-columns:
        repeat(12, minmax(0,1fr));

    gap:var(--space-5);

}



.col-12 {

    grid-column:span 12;

}

.col-10 {

    grid-column:span 10;

}

.col-9 {

    grid-column:span 9;

}


.col-8 {

    grid-column:span 8;

}


.col-6 {

    grid-column:span 6;

}


.col-4 {

    grid-column:span 4;

}


.col-3 {

    grid-column:span 3;

}




.row .col-12 {

    grid-column:span 12;

}


.row .col-8 {

    grid-column:span 8;

}


.row .col-6 {

    grid-column:span 6;

}


.row .col-4 {

    grid-column:span 4;

}


.row .col-3 {

    grid-column:span 3;

}



/* =========================================================
   UTILITIES
   ========================================================= */


.flex {

    display:flex;

}


.flex-center {

    display:flex;

    justify-content:center;

    align-items:center;

}


.flex-between {

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.text-center {

    text-align:center;

}
.text-left {

    text-align:left;

}
.text-right {

    text-align:right;

}


.hidden {

    display:none !important;

}


.mt-1 {
    margin-top:var(--space-1);
}

.mt-2 {
    margin-top:var(--space-2);
}

.mt-3 {
    margin-top:var(--space-3);
}

.mt-4 {
    margin-top:var(--space-4);
}

.mt-5 {
    margin-top:var(--space-5);
}

.mb-1 {
    margin-bottom:var(--space-1);
}

.mb-2 {
    margin-bottom:var(--space-2);
}

.mb-3 {
    margin-bottom:var(--space-3);
}

.mb-4 {
    margin-bottom:var(--space-4);
}

.mb-5 {
    margin-bottom:var(--space-5);
}



/* =========================================================
   RESPONSIVE
   ========================================================= */


@media(max-width:1024px) {


    .page-grid {

        grid-template-columns:
            repeat(6, minmax(0,1fr));

    }

    .main {

        padding:0;

    }

    .content-wrapper {

    width:100%;

    border-radius:0;

    margin:0;

    

}


    .col-8 {

        grid-column:span 6;

    }


    .col-4 {

        grid-column:span 3;

    }


}



@media(max-width:768px) {


    .main {

        padding:0;

    }
    
    .container {

        padding-left:var(--space-4);

        padding-right:var(--space-4);

    }


    .page {

        padding:0;

        padding-right:0;

    }


    .page-grid {

        grid-template-columns:1fr;

    }


    .content-wrapper {

        width:100%;

        border-radius:0;

            margin:0;


    }


    [class^="col-"] {

        grid-column:1;

    }


}


/* =========================================================
   END
   ========================================================= */

   /* =========================================================
   Layer system
   ========================================================= */

:root {

    --z-header:900;

    --z-offcanvas-backdrop:1000;

    --z-offcanvas:1100;

    --z-toast:2000;

    --z-modal:3000;

}
/* ===== assets/css/navbar.css ===== */

/* =========================================================
   BuddyCzech - Navbar
   ========================================================= */


/* =========================================================
   HEADER
   ========================================================= */


.header {

    position:sticky;

    top:0;

    z-index:var(--z-header);

    width:100%;

    height:var(--header-height);


    background:var(--header-bg);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);


    border-bottom:1px solid var(--border);


    transition:
        background var(--transition),
        border-color var(--transition);

}




.header .container {

    height:100%;

}




/* =========================================================
   NAVBAR GRID
   ========================================================= */


.navbar {


    height:100%;


    display:grid;


    grid-template-columns:

        auto

        1fr

        auto;


    align-items:center;


    gap:var(--space-5);

}



/* =========================================================
   LOGO
   ========================================================= */


.logo {


    display:flex;


    align-items:center;


    gap:var(--space-2);


    font-size:1.35rem;


    font-weight:700;


    white-space:nowrap;


    color:var(--text);



    transition:
        color var(--transition);

}



.logo:hover {

    color:var(--primary);

}




/* =========================================================
   DESKTOP MENU
   ========================================================= */


.navbar-menu {


    display:flex;


    justify-content:center;


    align-items:center;


    gap:var(--space-5);


}



.navbar-menu a {


    position:relative;


    padding:
        var(--space-2)
        0;


    color:var(--text-muted);


    font-weight:500;


    transition:
        color var(--transition);

}



.navbar-menu a::after {


    content:"";


    position:absolute;


    left:0;


    bottom:-4px;


    width:0;


    height:2px;


    background:var(--primary);


    transition:
        width var(--transition);


}



.navbar-menu a:hover {


    color:var(--text);

}



.navbar-menu a:hover::after {


    width:100%;

}





/* =========================================================
   USER AREA
   ========================================================= */


.navbar-user {


    display:flex;


    align-items:center;


    gap:var(--space-3);


}



.user-link {


    display:flex;


    align-items:center;


    gap:var(--space-2);


    padding:
        6px
        10px;


    border-radius:var(--radius-md);


    transition:
        background var(--transition);

}



.user-link:hover {


    background:var(--surface);

}




/* =========================================================
   AVATAR
   ========================================================= */


.avatar {


    width:40px;


    height:40px;


    object-fit:cover;


    border-radius:50%;


    border:2px solid var(--border);


}




/* =========================================================
   BUTTONS IN NAVBAR
   ========================================================= */


.theme-toggle,
.hamburger {


    width:42px;


    height:42px;


    display:flex;


    align-items:center;


    justify-content:center;


    border:none;


    background:transparent;


    color:var(--text);


    cursor:pointer;


    border-radius:50%;


    font-size:1.2rem;


    transition:


        background var(--transition);

}



.theme-toggle:hover,
.hamburger:hover {


    background:var(--surface);

}



/* =========================================================
   HAMBURGER
   ========================================================= */


.hamburger {


    display:none;


}




/* =========================================================
   MOBILE
   ========================================================= */


@media(max-width:900px) {



    .navbar {


        grid-template-columns:


            1fr


            auto;



    }



    .navbar-menu {


        display:none;

    }



    .hamburger {


        display:flex;

    }



    .navbar-user .username {
    display:none;
    }



}



/* =========================================================
   SMALL MOBILE
   ========================================================= */


@media(max-width:480px) {



    .header {


        height:64px;

    }



    .logo {


        font-size:1.15rem;

    }



    .navbar-user {


        gap:var(--space-1);

    }


}

.navbar-menu a.active {

    color:var(--primary);

}


.navbar-menu a.active::after {

    width:100%;

}


.offcanvas-menu a.active {

    background:var(--surface);

    color:var(--primary);

}
/* ===== assets/css/navbar-user.css ===== */

/* ==========================================================
   NAVBAR USER
   ========================================================== */


.navbar-user {

    display:flex;

    align-items:center;

    gap:8px;

}





/* ==========================================================
   DROPDOWN
   ========================================================== */


.dropdown {

    position:relative;

}





/* ==========================================================
   ICON BUTTON
   ========================================================== */


.nav-icon-button {

    width:42px;

    height:42px;


    display:flex;

    align-items:center;

    justify-content:center;


    position:relative;


    flex-shrink:0;


    border:none;

    border-radius:50%;


    background:transparent;

    color:var(--text);


    cursor:pointer;


    transition:.2s;

}



.nav-icon-button:hover {

    background:var(--surface);

}



.nav-icon-button svg {

    width:20px;

    height:20px;

}





/* ==========================================================
   USER BUTTON
   ========================================================== */


.user-button {

    display:flex;

    align-items:center;

    gap:10px;


    height:42px;


    padding:0 10px;


    border:none;

    border-radius:999px;


    background:transparent;


    color:var(--text);


    cursor:pointer;


    transition:.2s;

}



.user-button:hover {

    background:var(--surface);

}





.username {

    font-weight:600;

    white-space:nowrap;

}





/* ==========================================================
   AVATAR
   ========================================================== */


.avatar {

    width:36px;

    height:36px;


    border-radius:50%;


    object-fit:cover;

}





/* ==========================================================
   BADGE
   ========================================================== */


.badge {

    position:absolute;


    top:-2px;

    right:-2px;


    min-width:18px;

    height:18px;


    display:flex;

    align-items:center;

    justify-content:center;


    padding:0 5px;


    border-radius:999px;


    background:var(--danger);


    color:white;


    font-size:.70rem;

    font-weight:700;


    line-height:1;


    z-index:10;


    border:

        2px solid var(--card);

}





/* ==========================================================
   DROPDOWN MENU
   ========================================================== */


.dropdown-menu {


    position:absolute;


    top:54px;

    right:0;


    width:320px;


    background:var(--card);


    border:

        1px solid var(--border);


    border-radius:16px;


    box-shadow:var(--shadow-md);


    overflow:hidden;


    display:none;


    z-index:1500;


}



.dropdown.open .dropdown-menu {

    display:block;

}





/* ==========================================================
   TITLE
   ========================================================== */


.dropdown-title {

    padding:16px;


    font-size:1rem;

    font-weight:700;


    border-bottom:

        1px solid var(--border);

}





/* ==========================================================
   ITEM
   ========================================================== */


.dropdown-item {


    display:flex;


    gap:12px;


    align-items:flex-start;


    padding:14px 16px;


    color:var(--text);


    text-decoration:none;


    transition:.2s;


}



.dropdown-item:hover {

    background:var(--surface);

}



.dropdown-item svg {


    width:18px;

    height:18px;


    margin-top:2px;


    flex-shrink:0;

}





.dropdown-item strong {


    display:block;


    font-size:.92rem;


    font-weight:600;


}



.dropdown-item small {


    display:block;


    margin-top:4px;


    color:var(--text-muted);


    font-size:.80rem;


}





/* ==========================================================
   FOOTER
   ========================================================== */


.dropdown-footer {


    display:block;


    padding:14px;


    text-align:center;


    font-weight:600;


    color:var(--primary);


    text-decoration:none;


    border-top:

        1px solid var(--border);


}



.dropdown-footer:hover {


    background:var(--surface);


}





/* ==========================================================
   DANGER
   ========================================================== */


.dropdown-item.danger {


    color:var(--danger);

}





/* ==========================================================
   HR
   ========================================================== */


.dropdown-menu hr {


    margin:0;


    border:none;


    border-top:

        1px solid var(--border);


}





/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:768px) {


    .navbar-user {

        gap:4px;

    }



    .username, .navbar-user .login-button {

        display:none;

    }



    .user-button {

        padding:0;

    }



    .nav-icon-button {

        width:38px;

        height:38px;

    }



    .badge {

        top:-3px;

        right:-3px;

    }



    .dropdown {

        position:static;

    }



    .dropdown-menu {

        position:fixed;

        top:calc(var(--header-height) - 6px);

        right:12px;

        left:auto;

        width:min(320px, calc(100vw - 24px));

        max-width:calc(100vw - 24px);

        margin:0;

        z-index:1500;

    }

}
/* ===== assets/css/footer.css ===== */

/* =========================================================
   BuddyCzech - Footer
   ========================================================= */


/* =========================================================
   FOOTER
   ========================================================= */


.footer {

    width:100%;

    background:var(--card);

    border-top:1px solid var(--border);

    transition:

        background var(--transition),

        border-color var(--transition);

}




.footer .container {

    min-height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

}



/* =========================================================
   FOOTER TEXT
   ========================================================= */


.footer p {

    margin:0;

    color:var(--text-muted);

    font-size:.9rem;

    text-align:center;

}



/* =========================================================
   FOOTER LINKS
   ========================================================= */


.footer-menu {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:var(--space-4);

    margin-bottom:var(--space-3);

}



.footer-menu a {


    color:var(--text-muted);


    transition:

        color var(--transition);


}



.footer-menu a:hover {


    color:var(--primary);


}



/* =========================================================
   FOOTER LAYOUT VARIANT
   ========================================================= */


.footer-content {


    width:100%;


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:var(--space-4);


}



/* =========================================================
   MOBILE
   ========================================================= */


@media(max-width:768px) {


    .footer .container {


        min-height:100px;


    }


    .footer-content {


        flex-direction:column;


        justify-content:center;


        text-align:center;

        padding-top: var(--space-3);


    }



    .footer-menu {


        flex-wrap:wrap;

    }


}
/* ===== assets/css/button.css ===== */

/* =========================================================
   BuddyCzech - Buttons
   ========================================================= */


/* =========================================================
   BASE BUTTON
   ========================================================= */


.button,
button.button {

    display:inline-flex;

    align-items:center;

    justify-content:center;


    gap:var(--space-2);


    min-height:42px;


    padding:
        0
        var(--space-5);



    border:none;


    border-radius:var(--radius-md);



    background:var(--primary);

    color:#ffffff;



    font-size:.95rem;

    font-weight:600;



    cursor:pointer;



    transition:

        background var(--transition),

        color var(--transition),

        border-color var(--transition),

        transform var(--transition),

        box-shadow var(--transition),

        filter var(--transition);

}



.button:hover,
button.button:hover {

    filter:brightness(.9);

}



.button:active,
button.button:active {

    transform:scale(.97);

}



.button:disabled,
button.button:disabled {

    opacity:.5;

    cursor:not-allowed;

    transform:none;

}







/* =========================================================
   BUTTON VARIANTS
   ========================================================= */



/* SECONDARY */

.button.button-secondary {


    background:var(--surface);


    color:var(--text);


    border:1px solid var(--border);


}



.button.button-secondary:hover {


    background:var(--border);


}






/* SUCCESS */


.button.button-success {


    background:var(--success);


    color:#fff;


}






/* DANGER */


.button.button-danger {


    background:var(--danger);


    color:#fff;


}







/* WARNING */


.button.button-warning {


    background:var(--warning);


    color:#000;


}







/* =========================================================
   OUTLINE
   ========================================================= */



.button.button-outline {


    background:transparent;


    color:var(--primary);


    border:1px solid var(--primary);


}



.button.button-outline:hover {


    background:var(--primary);


    color:#fff;


}







/* =========================================================
   GHOST
   ========================================================= */



.button.button-ghost {


    background:transparent;


    color:var(--text);


}



.button.button-ghost:hover {


    background:var(--surface);


}







/* =========================================================
   SIZES
   ========================================================= */



.button.button-sm {


    min-height:34px;


    padding:

        0

        var(--space-3);


    font-size:.85rem;


}






.button.button-lg {


    min-height:52px;


    padding:

        0

        var(--space-7);


    font-size:1.05rem;


}






.button.button-block {


    width:100%;


}







/* =========================================================
   ICON BUTTON
   ========================================================= */



.button.button-icon {


    width:42px;


    height:42px;


    padding:0;


    border-radius:50%;


}







/* =========================================================
   LOADING STATE
   ========================================================= */



.button.loading {


    pointer-events:none;


    opacity:.75;


}



.button.loading::after {


    content:"";


    width:16px;


    height:16px;


    border-radius:50%;



    border:

        2px solid rgba(255,255,255,.5);



    border-top-color:#fff;



    animation:

        button-spin .7s linear infinite;


}





@keyframes button-spin {


    to {

        transform:rotate(360deg);

    }


}
/* ===== assets/css/form.css ===== */

/* =========================================================
   BuddyCzech - Forms
   ========================================================= */


/* =========================================================
   FORM GROUP
   ========================================================= */

.form-group {

    display:flex;
    flex-direction:column;

    gap:var(--space-2);

    margin-bottom:var(--space-5);

}


/* =========================================================
   LABEL
   ========================================================= */

.form-label {

    font-size:.95rem;
    font-weight:600;

    color:var(--text);

}


/* =========================================================
   INPUTS
   ========================================================= */

.form-control {

    width:100%;
    min-height:44px;

    padding:0 var(--space-4);

    border:1px solid var(--border);
    border-radius:var(--radius-md);

    background:var(--card);
    color:var(--text);

    transition:
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);

}


.form-control::placeholder {

    color:var(--text-muted);

}


.form-control:hover {

    border-color:var(--primary);

}


.form-control:focus {

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(13,110,253,.15);

}


/* =========================================================
   TEXTAREA
   ========================================================= */

textarea.form-control {

    min-height:140px;

    padding:
        var(--space-3)
        var(--space-4);

    resize:vertical;

}


/* =========================================================
   SELECT
   ========================================================= */

select.form-control {

    cursor:pointer;

}


/* =========================================================
   FILE INPUT
   ========================================================= */

input[type="file"].form-control {

    padding:var(--space-3);

}


/* =========================================================
   CHECKBOX / RADIO
   ========================================================= */

.form-check-wrapper {

    margin-bottom:var(--space-5);

}


.form-check {

    display:flex;

    align-items:flex-start;

    gap:.6rem;

    margin:1.25rem 0;

    font-size:.85rem;

    line-height:1.4;

}


.form-check-input {

    width:1rem;
    height:1rem;

    margin-top:.15rem;

    flex-shrink:0;

    cursor:pointer;

}


.form-check-label {

    cursor:pointer;

    color:var(--text);

}


.form-check-label a {

    color:var(--success);

    text-decoration:none;

    font-weight:500;

}


.form-check-label a:hover {

    text-decoration:underline;

}


/* =========================================================
   HELP TEXT
   ========================================================= */

.form-help {

    font-size:.85rem;

    color:var(--text-muted);

}


/* =========================================================
   FORM ROW
   ========================================================= */

.form-row {

    display:grid;

    grid-template-columns:
        repeat(12,minmax(0,1fr));

    gap:var(--space-5);

}


.form-col-6 {

    grid-column:span 6;

}


.form-col-4 {

    grid-column:span 4;

}


.form-col-12 {

    grid-column:span 12;

}


/* =========================================================
   FORM ACTIONS
   ========================================================= */

.form-actions {

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:var(--space-3);

    margin-top:var(--space-6);

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:768px) {

    .form-row {

        grid-template-columns:1fr;

    }

    .form-col-6,
    .form-col-4,
    .form-col-12 {

        grid-column:1;

    }

    .form-actions {

        flex-direction:column;

        align-items:stretch;

    }

}
/* ===== assets/css/card.css ===== */

/* =========================================================
   BuddyCzech - Cards
   ========================================================= */


/* =========================================================
   BASE CARD
   ========================================================= */


.card {

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    padding:var(--space-5);


    transition:

        background var(--transition),

        border-color var(--transition),

        box-shadow var(--transition),

        transform var(--transition);

}



/* =========================================================
   HOVER CARD
   ========================================================= */


.card-hover {


    cursor:pointer;


}



.card-hover:hover {


    box-shadow:var(--shadow-md);


    transform:translateY(-3px);


}




/* =========================================================
   CARD HEADER
   ========================================================= */


.card-header {


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:var(--space-3);


    margin-bottom:var(--space-4);


}




.card-title {


    margin:0;


    font-size:1.1rem;


    font-weight:700;


    color:var(--text);


}




.card-subtitle {


    margin-top:var(--space-1);


    color:var(--text-muted);


    font-size:.9rem;


}



/* =========================================================
   CARD BODY
   ========================================================= */


.card-body {


    color:var(--text);


}




.card-body p {


    margin-top:0;


    margin-bottom:var(--space-3);


}




/* =========================================================
   CARD FOOTER
   ========================================================= */


.card-footer {


    margin-top:var(--space-5);


    padding-top:var(--space-4);


    border-top:

        1px solid var(--border);



    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:var(--space-3);


}




/* =========================================================
   CARD IMAGE
   ========================================================= */


.card-image {


    width:100%;


    height:220px;


    object-fit:cover;


    border-radius:var(--radius-md);


    margin-bottom:var(--space-4);


}



/* =========================================================
   PROFILE CARD
   ========================================================= */


.profile-card {


    text-align:center;


}



.profile-card .avatar {


    width:90px;


    height:90px;


    margin:0 auto var(--space-4);


}



.profile-card-name {


    font-size:1.2rem;


    font-weight:700;


    margin-bottom:var(--space-2);


}



.profile-card-info {


    color:var(--text-muted);


    font-size:.9rem;


}




/* =========================================================
   LOCATION CARD
   ========================================================= */


.location-card {


    overflow:hidden;


    padding:0;


}



.location-card .card-content {


    padding:var(--space-5);


}




/* =========================================================
   STAT CARD
   ========================================================= */


.stat-card {


    display:flex;


    align-items:center;


    gap:var(--space-4);


}



.stat-icon {


    width:52px;


    height:52px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:var(--radius-md);


    background:var(--surface);


    font-size:1.5rem;


}



.stat-value {


    font-size:1.5rem;


    font-weight:700;


}



.stat-label {


    color:var(--text-muted);


    font-size:.9rem;


}



/* =========================================================
   EMPTY CARD
   ========================================================= */


.card-empty {


    text-align:center;


    padding:var(--space-7);


    color:var(--text-muted);


}



/* =========================================================
   CARD GRID
   ========================================================= */


.card-grid {


    display:grid;


    grid-template-columns:


        repeat(3,minmax(0,1fr));


    gap:var(--space-5);


}




@media(max-width:1024px) {


    .card-grid {


        grid-template-columns:


            repeat(2,minmax(0,1fr));


    }


}




@media(max-width:600px) {


    .card-grid {


        grid-template-columns:1fr;


    }



    .card {


        padding:var(--space-4);


    }


}




/* =========================================================
   TABS
   ========================================================= */


.tabs {

    display:flex;

    border-bottom:1px solid var(--border);

    margin-bottom:var(--space-5);

}



.tab {

    flex:1;


    padding:var(--space-3);


    background:none;


    border:none;


    color:var(--text-muted);


    cursor:pointer;


    font-weight:600;


    border-bottom:2px solid transparent;


}



.tab:hover {

    color:var(--text);

}



.tab.active {

    color:var(--primary);

    border-bottom-color:var(--primary);

}





.tab-content {

    display:none;

}



.tab-content.active {

    display:block;

}



/* =========================================================
   INFO CARD
   ========================================================= */


.info-card {

    display:flex;

    align-items:center;

    gap:var(--space-6);

    padding:var(--space-6);

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

}




.info-card-image {


    width:220px;

    height:220px;


    flex-shrink:0;


    object-fit:cover;


    border-radius:var(--radius-md);


}





.info-card-content {


    display:flex;

    flex-direction:column;


    gap:var(--space-3);


}





.info-card-title {


    margin:0;


    font-size:1.5rem;


    color:var(--text);


}





.info-card-text {


    margin:0;


    color:var(--text-muted);


    line-height:1.6;


}






.info-card-actions {


    margin-top:var(--space-3);


    display:flex;


    gap:var(--space-3);


}







@media(max-width:768px) {


    .info-card {


        flex-direction:column;


        text-align:center;


    }



    .info-card-image {


        width:100%;


        height:220px;


    }



    .info-card-actions {


        justify-content:center;


        width:100%;


    }



}
/* ===== assets/css/profile.css ===== */

/* =========================================================
   BuddyCzech - Diver Profile
   ========================================================= */


/* ================= HERO ================= */


.profile-hero {

    background:var(--card);

    border-radius:var(--radius-lg);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    margin-bottom:var(--space-6);

}



.profile-cover {

    width:100%;

    height:280px;

    object-fit:cover;

}



.profile-header {

    display:flex;

    align-items:center;

    gap:var(--space-5);

    padding:var(--space-6);

}



.profile-avatar {

    width:150px;

    height:150px;

    object-fit:cover;

    border-radius:50%;

    border:6px solid var(--card);

    margin-top:-100px;

    box-shadow:var(--shadow-md);

}



.profile-info {

    flex:1;

}



.profile-info h1 {

    margin:0 0 var(--space-2) 0;

    font-size:2rem;

}



.profile-info p {

    margin:0 0 var(--space-2) 0;

    color:var(--text-muted);

}



.profile-location {

    color:var(--text-muted);

}



.profile-actions {

    margin-left:auto;

}





/* ================= STAT BOX ================= */


.profile-stat {

    text-align:center;

}



.profile-stat strong {

    display:block;

    font-size:2rem;

    color:var(--primary);

}



.profile-stat span {

    color:var(--text-muted);

}





/* ================= PROFILE CARD ================= */


.profile-section {

    height:100%;

}



.profile-section h3 {

    margin-top:0;

}



.profile-list {

    list-style:none;

    padding:0;

    margin:0;

}



.profile-list li {

    padding:var(--space-2) 0;

    border-bottom:1px solid var(--border);

}



.profile-list li:last-child {

    border-bottom:none;

}





/* ================= BADGES ================= */


.profile-badges {

    display:flex;

    flex-wrap:wrap;

    gap:var(--space-2);

}



.profile-badge {

    padding:

        6px

        12px;


    background:var(--surface);

    border-radius:20px;

    font-size:.85rem;

}





/* ================= GALLERY ================= */


.profile-gallery {

    display:grid;

    grid-template-columns:

        repeat(4,1fr);

    gap:var(--space-3);

}



.profile-gallery img {

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

    border-radius:var(--radius-md);

}





/* ================= MOBILE ================= */


@media(max-width:768px) {


    .profile-header {

        flex-direction:column;

        text-align:center;

    }



    .profile-avatar {

        margin-top:-80px;

    }



    .profile-actions {

        margin-left:0;

    }



    .profile-gallery {

        grid-template-columns:

            repeat(2,1fr);

    }


}
/* ===== assets/css/validator.css ===== */

/* =========================================================
   BuddyCzech - Validation
   ========================================================= */


/* =========================================================
   INPUT STATES
   ========================================================= */

.form-control {

    transition:
        border-color var(--transition),
        box-shadow var(--transition);

}


.form-control.is-valid {

    border-color:var(--success);

}


.form-control.is-valid:focus {

    border-color:var(--success);

    box-shadow:
        0 0 0 3px rgba(34,197,94,.15);

}


.form-control.is-invalid {

    border-color:var(--danger);

}


.form-control.is-invalid:focus {

    border-color:var(--danger);

    box-shadow:
        0 0 0 3px rgba(239,68,68,.15);

}


/* =========================================================
   FEEDBACK
   ========================================================= */

.valid-feedback,
.invalid-feedback,
.form-error {

    display:block;

    margin-top:var(--space-2);

    font-size:.85rem;

    line-height:1.35;

}


.valid-feedback {

    color:var(--success);

}


.invalid-feedback,
.form-error {

    color:var(--danger);

}


.valid-feedback:empty,
.invalid-feedback:empty,
.form-error:empty {

    display:none;

}


/* =========================================================
   VALIDATION ICONS
   ========================================================= */

.form-control.is-valid {

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2322c55e' viewBox='0 0 16 16'%3E%3Cpath d='M13.485 1.929a.75.75 0 011.06 1.06L6.5 11.036 2.454 6.99a.75.75 0 111.06-1.06L6.5 8.915l6.985-6.986z'/%3E%3C/svg%3E");

    background-repeat:no-repeat;
    background-position:right .75rem center;
    background-size:16px;

    padding-right:2.5rem;

}


.form-control.is-invalid {

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ef4444' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 01.708 0L8 7.293l2.646-2.647a.5.5 0 11.708.708L8.707 8l2.647 2.646a.5.5 0 01-.708.708L8 8.707l-2.646 2.647a.5.5 0 01-.708-.708L7.293 8 4.646 5.354a.5.5 0 010-.708z'/%3E%3C/svg%3E");

    background-repeat:no-repeat;
    background-position:right .75rem center;
    background-size:16px;

    padding-right:2.5rem;

}
/* ===== assets/css/offcanvas.css ===== */

/* =========================================================
   BuddyCzech - Offcanvas
   ========================================================= */


/* =========================================================
   BACKDROP
   ========================================================= */


.offcanvas-backdrop {

    position:fixed;

    inset:0;


    background:rgba(0,0,0,.45);


    opacity:0;


    visibility:hidden;


    transition:

        opacity var(--transition),

        visibility var(--transition);


    z-index:var(--z-offcanvas-backdrop);

}




.offcanvas-backdrop.active {


    opacity:1;


    visibility:visible;


}



/* =========================================================
   OFFCANVAS PANEL
   ========================================================= */


.offcanvas {


    position:fixed;


    top:0;


    left:0;


    width:320px;


    max-width:85vw;


    height:100vh;



    background:var(--card);


    border-right:1px solid var(--border);



    transform:translateX(-100%);



    transition:

        transform var(--transition);



    z-index:var(--z-offcanvas);



    display:flex;


    flex-direction:column;



    box-shadow:var(--shadow-md);

}




.offcanvas.active {


    transform:translateX(0);


}



/* =========================================================
   HEADER
   ========================================================= */


.offcanvas-header {


    height:var(--header-height);


    padding:

        0

        var(--space-5);



    display:flex;


    align-items:center;


    justify-content:space-between;



    border-bottom:1px solid var(--border);



    font-weight:700;


    font-size:1.1rem;

}




.offcanvas-close {


    width:40px;


    height:40px;



    display:flex;


    align-items:center;


    justify-content:center;



    border:none;


    background:transparent;


    color:var(--text);



    border-radius:50%;


    cursor:pointer;



    font-size:1.2rem;



    transition:

        background var(--transition);

}




.offcanvas-close:hover {


    background:var(--surface);


}




/* =========================================================
   MENU
   ========================================================= */


.offcanvas-menu {


    padding:var(--space-5);



    display:flex;


    flex-direction:column;


    gap:var(--space-2);



}



.offcanvas-menu a {


    display:flex;


    align-items:center;



    min-height:48px;


    padding:

        0

        var(--space-4);



    border-radius:var(--radius-md);



    color:var(--text);



    transition:

        background var(--transition),

        color var(--transition);

}



.offcanvas-menu a:hover {


    background:var(--surface);


    color:var(--primary);


}



/* =========================================================
   USER SECTION
   ========================================================= */


.offcanvas-user {


    margin-top:auto;


    padding:var(--space-5);


    border-top:1px solid var(--border);


}



.offcanvas-user .user-link {


    width:100%;


}




/* =========================================================
   DESKTOP BEHAVIOR
   ========================================================= */


@media(min-width:901px) {


    .offcanvas,
    .offcanvas-backdrop {


        display:none;


    }


}
/* ===== assets/css/toast.css ===== */

/* =========================================================
   BuddyCzech - Toast Notifications
   ========================================================= */


/* =========================================================
   CONTAINER
   ========================================================= */


#toastContainer,
.toast-container {

    position:fixed;

    top:var(--space-5);

    right:var(--space-5);


    display:flex;

    flex-direction:column;

    gap:var(--space-3);



    width:360px;

    max-width:calc(100vw - 40px);



    z-index:var(--z-toast);

}



/* =========================================================
   TOAST BASE
   ========================================================= */


.toast {


    display:flex;


    align-items:flex-start;


    gap:var(--space-3);



    padding:var(--space-4);



    background:var(--card);


    border:1px solid var(--border);


    border-left:5px solid var(--primary);



    border-radius:var(--radius-md);



    box-shadow:var(--shadow-md);



    color:var(--text);



    animation:

        toast-show .25s ease forwards;



    overflow:hidden;


}




/* =========================================================
   TOAST CONTENT
   ========================================================= */


.toast-content {


    flex:1;


}



.toast-title {


    margin:0 0 var(--space-1);


    font-size:.95rem;


    font-weight:700;


}



.toast-message {


    margin:0;


    font-size:.9rem;


    color:var(--text-muted);


}



/* =========================================================
   CLOSE BUTTON
   ========================================================= */


.toast-close {


    width:28px;


    height:28px;



    display:flex;


    align-items:center;


    justify-content:center;



    border:none;


    background:transparent;


    color:var(--text-muted);



    cursor:pointer;


    border-radius:50%;


    flex-shrink:0;


}



.toast-close:hover {


    background:var(--surface);


}



/* =========================================================
   TYPES
   ========================================================= */


.toast-success {


    border-left-color:var(--success);


}



.toast-danger {


    border-left-color:var(--danger);


}



.toast-warning {


    border-left-color:var(--warning);


}



.toast-info {


    border-left-color:var(--primary);


}



/* =========================================================
   REMOVE ANIMATION
   ========================================================= */


.toast.hide {


    animation:

        toast-hide .25s ease forwards;


}



/* =========================================================
   ANIMATIONS
   ========================================================= */


@keyframes toast-show {


    from {


        opacity:0;


        transform:

            translateX(40px);



    }


    to {


        opacity:1;


        transform:

            translateX(0);



    }


}




@keyframes toast-hide {


    from {


        opacity:1;


        transform:

            translateX(0);



    }


    to {


        opacity:0;


        transform:

            translateX(40px);



    }


}



/* =========================================================
   MOBILE
   ========================================================= */


@media(max-width:600px) {


    #toastContainer,
    .toast-container {


        top:var(--space-3);


        right:var(--space-3);


        left:var(--space-3);



        width:auto;


    }



}
/* ===== assets/css/modal.css ===== */

/* =========================================================
   BuddyCzech - Modal
   ========================================================= */


/* =========================================================
   MODAL ROOT
   ========================================================= */


#modalRoot {

    position: fixed;

    inset: 0;

    z-index:var(--z-modal);

    pointer-events:none;

}



/* =========================================================
   OVERLAY
   ========================================================= */


.modal-overlay {


    position:absolute;


    inset:0;



    background:rgba(0,0,0,.5);



    opacity:0;


    visibility:hidden;



    transition:

        opacity var(--transition),

        visibility var(--transition);



    display:flex;


    align-items:center;


    justify-content:center;



    padding:var(--space-5);


    overflow-y:auto;


}



.modal-overlay.active {


    opacity:1;


    visibility:visible;


    pointer-events:auto;


}



/* =========================================================
   MODAL WINDOW
   ========================================================= */


.modal {


    width:100%;


    max-width:560px;



    max-height:

        calc(100vh - 40px);



    display:flex;


    flex-direction:column;



    background:var(--card);



    border:1px solid var(--border);



    border-radius:var(--radius-lg);



    box-shadow:var(--shadow-md);



    overflow:hidden;



    transform:

        translateY(30px)

        scale(.95);



    opacity:0;



    transition:

        transform var(--transition),

        opacity var(--transition);


}



.modal-overlay.active .modal {


    transform:

        translateY(0)

        scale(1);



    opacity:1;


}



/* =========================================================
   HEADER
   ========================================================= */


.modal-header {


    min-height:64px;



    display:flex;


    align-items:center;


    justify-content:space-between;



    padding:

        0 var(--space-5);



    border-bottom:1px solid var(--border);



    flex-shrink:0;


}




.modal-title {


    margin:0;


    font-size:1.15rem;


    font-weight:700;


}




.modal-close {


    width:40px;


    height:40px;



    display:flex;


    align-items:center;


    justify-content:center;



    border:none;


    background:transparent;


    color:var(--text);



    cursor:pointer;



    border-radius:50%;



    font-size:1.2rem;



    transition:

        background var(--transition);


}



.modal-close:hover {


    background:var(--surface);


}



/* =========================================================
   BODY
   ========================================================= */


.modal-body {


    padding:var(--space-5);


    color:var(--text);



    overflow-y:auto;


    flex:1;


}




.modal-body p {


    margin-top:0;


}



/*
    pokud vložíme celou info stránku
*/


.modal-body .info-page {


    background:transparent;

    border:none;

    box-shadow:none;

    padding:0;

}



/* =========================================================
   FOOTER
   ========================================================= */


.modal-footer {


    display:flex;


    align-items:center;


    justify-content:flex-end;



    gap:var(--space-3);



    padding:

        var(--space-4)

        var(--space-5);



    border-top:1px solid var(--border);



    flex-shrink:0;


}




/* =========================================================
   SIZE VARIANTS
   ========================================================= */


/* výchozí */

.modal-md {

    max-width:560px;

}



.modal-sm {


    max-width:380px;


}



.modal-lg {


    max-width:900px;


}



.modal-xl {


    max-width:1200px;


}




.modal-fullscreen {

    width:100vw;

    height:100vh;

    max-width:none;

    max-height:none;

    border-radius:0;

}



/* =========================================================
   CONFIRM MODAL
   ========================================================= */


.modal-confirm {


    text-align:center;


}



.modal-confirm .modal-body {


    padding:

        var(--space-7)

        var(--space-5);


}




.modal-confirm-icon {


    width:64px;


    height:64px;



    margin:

        0 auto var(--space-4);



    display:flex;


    align-items:center;


    justify-content:center;



    border-radius:50%;



    background:var(--surface);


    font-size:2rem;


}



/* =========================================================
   MOBILE
   ========================================================= */


@media(max-width:600px) {


    .modal-overlay {


        padding:var(--space-3);


        align-items:flex-start;


    }



    .modal {


        max-height:

            calc(100vh - 24px);


    }



    .modal-fullscreen {


        width:100%;


        height:100%;


    }



    .modal-footer {


        flex-direction:column;


    }



    .modal-footer .button {


        width:100%;


    }


}
/* ===== assets/css/cookie-bar.css ===== */

/* =========================================================
   BuddyCzech - Cookie bar
   ========================================================= */


/* =========================================================
   COOKIE BAR
   ========================================================= */

.cookie-bar.hidden {

    display:none;

}

.cookie-bar {

    position:fixed;

    left:24px;

    right:24px;

    bottom:24px;


    display:flex;

    align-items:center;

    justify-content:space-between;


    gap:24px;


    padding:20px 24px;


    background:var(--card);

    color:var(--text);


    border:1px solid var(--border);

    border-radius:var(--radius-lg);


    box-shadow:var(--shadow-md);


    z-index:2500;


}



/* =========================================================
   CONTENT
   ========================================================= */


.cookie-content {

    display:flex;

    align-items:center;

    gap:16px;

    min-width:0;

}



.cookie-icon {

    width:48px;

    height:48px;


    flex-shrink:0;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:var(--surface);

    color:var(--primary);

}



.cookie-icon svg {

    width:26px;

    height:26px;

}



.cookie-text {

    min-width:0;

}



.cookie-text strong {

    display:block;

    margin-bottom:5px;

    font-size:1.05rem;

}



.cookie-text p {

    margin:0;


    max-width:700px;


    color:var(--text-muted);

    font-size:.9rem;

    line-height:1.5;

}



/* =========================================================
   ACTIONS
   ========================================================= */


.cookie-actions {

    display:flex;

    align-items:center;

    gap:12px;


    flex-shrink:0;

}



.cookie-settings {

    width:42px;

    height:42px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    border:1px solid var(--border);


    background:transparent;


    color:var(--text);


    cursor:pointer;


    transition:var(--transition);

}



.cookie-settings:hover {

    background:var(--surface);

}



.cookie-settings svg {

    width:20px;

    height:20px;

}



/* =========================================================
   COOKIE MODAL CONTENT
   ========================================================= */


.cookie-options {

    display:flex;

    flex-direction:column;


    gap:16px;


    margin-top:24px;

}



.cookie-option {

    display:flex;

    align-items:flex-start;


    gap:16px;


    padding:16px;


    background:var(--surface);


    border:1px solid var(--border);


    border-radius:var(--radius-md);

}



.cookie-option input {

    margin-top:5px;

}



.cookie-option strong {

    display:block;

    margin-bottom:4px;

}



.cookie-option p {

    margin:0;


    color:var(--text-muted);

    font-size:.9rem;

    line-height:1.5;

}



/* =========================================================
   MOBILE
   ========================================================= */


@media(max-width:768px){


    .cookie-bar {

        left:12px;

        right:12px;

        bottom:12px;


        flex-direction:column;

        align-items:stretch;


        padding:16px;


        gap:16px;

    }



    .cookie-content {

        align-items:flex-start;

    }



    .cookie-actions {

        justify-content:flex-end;

    }



    .cookie-text p {

        font-size:.85rem;

    }


}
/* ===== assets/css/pages/prihlaseni.css ===== */

/* =========================================================
   BuddyCzech - Auth
   ========================================================= */


/* =========================================================
   AUTH CARD
   ========================================================= */

.auth-card {

    width:100%;

    max-width:430px;

    margin:0 auto;

}


.auth-card h2 {

    margin-bottom:1.5rem;

    text-align:center;

}


/* =========================================================
   FORM HELPER
   ========================================================= */

.form-helper {

    margin-top:1rem;

    font-size:.85rem;

    color:var(--text-muted);
}


.form-helper a {

    color:var(--success);

    text-decoration:none;

    font-weight:500;

    transition:color var(--transition);

}


.form-helper a:hover {

    text-decoration:underline;

}
/* ===== assets/css/pages/lokality.css ===== */

/* ==========================================================

   BuddyCzech - Locations page

========================================================== */





/* ==========================================================

   PAGE

========================================================== */



.locations-page {

    width: 100%;

}





/* ==========================================================

   HEADER

========================================================== */



.locations-page-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 32px;

    margin-bottom: 32px;

}



.locations-page-header-text {

    max-width: 760px;

}



.locations-page-eyebrow {

    margin-bottom: 10px;

    color: #0d6efd;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}



.locations-page-header h1 {

    margin: 0;

    font-size: clamp(32px, 4vw, 46px);

    line-height: 1.1;

}



.locations-page-header p {

    max-width: 680px;

    margin: 14px 0 0;

    color: #6c757d;

    font-size: 16px;

    line-height: 1.7;

}





/* HLAVIČKA - AKČNÍ TLAČÍTKA */



.locations-page-header-action {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 12px;

    flex-shrink: 0;

}



.locations-page-header-action .button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 40px;

    margin: 0;

    white-space: nowrap;

}



.locations-page-header-action .button svg {

    display: block;

    flex-shrink: 0;

}



.locations-count {

    display: inline-flex;

    align-items: center;

    min-height: 40px;

    padding: 0 15px;

    border: 1px solid #dee2e6;

    border-radius: 10px;

    background: #f5f6f8;

    color: #6c757d;

    font-size: 14px;

    font-weight: 600;

}





/* ==========================================================

   CONTENT

========================================================== */



.locations-page-content {

    width: 100%;

}





/* ==========================================================

   FILTER TOOLBAR

========================================================== */



.location-toolbar {

    display: flex;

    align-items: flex-end;

    gap: 14px;

    margin-bottom: 22px;

    padding: 16px;

    border: 1px solid #dee2e6;

    border-radius: 12px;

    background: #f5f6f8;

}



.location-search {

    flex: 1 1 auto;

    min-width: 260px;

}



.location-filter {

    flex: 0 0 190px;

}



.location-search .form-label,

.location-filter .form-label {

    display: block;

    margin-bottom: 7px;

    color: #202124;

    font-size: 13px;

    font-weight: 600;

}



.location-search-input {

    position: relative;

}



.location-search-input .form-control {

    padding-left: 42px;

}



.location-search-icon {

    position: absolute;

    top: 50%;

    left: 14px;

    width: 18px;

    height: 18px;

    transform: translateY(-50%);

    fill: none;

    stroke: #6c757d;

    stroke-width: 1.8;

    pointer-events: none;

}



.location-reset {

    flex: 0 0 auto;

    white-space: nowrap;

}





/* ==========================================================

   FILTERS - DESKTOP

========================================================== */



.location-filters-toggle {

    display: none;

}



.location-advanced-filters {

    display: contents;

}



.location-filters-content {

    display: contents;

}





/* ==========================================================

   LIST HEADER

========================================================== */



.locations-list-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 16px;

}



.locations-list-header strong {

    color: #202124;

    font-size: 14px;

}





/* ==========================================================

   GRID

========================================================== */



.locations-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 20px;

}





/* ==========================================================

   CARD

========================================================== */



.location-card {

    display: flex;

    flex-direction: column;

    box-sizing: border-box;

    min-width: 0;

    height: 100%;

    overflow: hidden;

    border: 1px solid #dee2e6;

    border-radius: 16px;

    background: #ffffff;

    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        border-color .25s ease;

}



/* Oprava: display:flex jinak přebíjí výchozí chování hidden. */

.location-card[hidden] {

    display: none !important;

}



.location-card:hover {

    transform: translateY(-3px);

    border-color: rgba(13, 110, 253, .35);

    box-shadow: 0 10px 25px rgba(0, 0, 0, .12);

}





/* ==========================================================

   IMAGE

========================================================== */



.location-image {

    position: relative;

    height: 220px;

    overflow: hidden;

    background: linear-gradient(135deg, #1e293b, #0f172a);

}



.location-image-link {

    display: block;

    width: 100%;

    height: 100%;

}



.location-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .4s ease;

}



.location-card:hover .location-image img {

    transform: scale(1.04);

}





/* ==========================================================

   TYPE

========================================================== */



.location-type {

    position: absolute;

    top: 12px;

    left: 12px;

    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding: 0 10px;

    border-radius: 999px;

    background: rgba(15, 23, 42, .82);

    color: #ffffff;

    font-size: 11px;

    font-weight: 700;

    backdrop-filter: blur(6px);

}





/* ==========================================================

   FAVORITE

========================================================== */



.location-favorite {

    position: absolute;

    top: 10px;

    right: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, .22);

    border-radius: 50%;

    background: rgba(15, 23, 42, .72);

    color: #ffffff;

    cursor: pointer;

    backdrop-filter: blur(6px);

    transition:

        background .2s ease,

        border-color .2s ease,

        transform .2s ease;

}



.location-favorite:hover {

    background: #dc3545;

    border-color: #dc3545;

    transform: scale(1.05);

}



.location-favorite svg {

    width: 19px;

    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}



.location-favorite.is-favorite {

    background: #dc3545;

    border-color: #dc3545;

}



.location-favorite.is-favorite:hover {

    background: #bb2d3b;

    border-color: #bb2d3b;

}



.location-favorite.is-favorite svg {

    fill: currentColor;

}





/* ==========================================================

   BODY

========================================================== */



.location-body {

    display: flex;

    flex: 1 1 auto;

    flex-direction: column;

    padding: 18px;

}



.location-title-row {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px;

}



.location-title {

    margin: 0;

    color: #202124;

    font-size: 20px;

    line-height: 1.25;

}



.location-region {

    margin-top: 5px;

    color: #6c757d;

    font-size: 13px;

}



.rating {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    flex-shrink: 0;

    color: #d4a017;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

}



.location-description {

    height: calc(1.6em * 3);

    min-height: calc(1.6em * 3);

    margin: 14px 0 0;

    overflow: hidden;

    color: #6c757d;

    font-size: 14px;

    line-height: 1.6;

}





/* ==========================================================

   TAGS - POUZE JEDEN ŘÁDEK

========================================================== */



.location-tags {

    display: flex;

    flex-wrap: nowrap;

    align-items: flex-start;

    gap: 6px;

    height: 25px;

    min-height: 25px;

    margin-top: 14px;

    overflow: hidden;

}



.location-tag {

    display: inline-flex;

    align-items: center;

    flex: 0 0 auto;

    min-height: 25px;

    padding: 0 9px;

    border: 1px solid #dee2e6;

    border-radius: 999px;

    background: #f5f6f8;

    color: #6c757d;

    font-size: 11px;

    font-weight: 600;

    white-space: nowrap;

}





/* ==========================================================

   STATS - JEDNOTNÁ VÝŠKA

========================================================== */



.location-stats {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

    height: 68px;

    min-height: 68px;

    margin-top: 18px;

    margin-bottom: 12px;

}



.location-stat {

    padding: 11px;

    border: 1px solid #dee2e6;

    border-radius: 9px;

    background: #f5f6f8;

}



.location-stat strong {

    display: block;

    color: #202124;

    font-size: 13px;

}



.location-stat span {

    display: block;

    margin-top: 3px;

    color: #6c757d;

    font-size: 11px;

}





/* ==========================================================

   FOOTER

========================================================== */



.location-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-top: auto;

    padding-top: 16px;

    border-top: 1px solid #dee2e6;

}



.difficulty {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #6c757d;

    font-size: 12px;

    font-weight: 600;

}



.difficulty-dots {

    display: inline-flex;

    gap: 3px;

}



.difficulty-dots i {

    display: block;

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #dee2e6;

}



.difficulty-dots i.active {

    background: #0d6efd;

}



.location-button {

    min-height: 36px;

    padding: 0 13px;

    font-size: 12px;

}





/* ==========================================================

   EMPTY STATE

========================================================== */



.locations-empty {

    padding: 70px 20px;

    border: 1px dashed #dee2e6;

    border-radius: 16px;

    background: #f5f6f8;

    text-align: center;

}



.locations-empty[hidden] {

    display: none !important;

}



.locations-empty-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 56px;

    height: 56px;

    margin: 0 auto 16px;

    border-radius: 50%;

    background: #ffffff;

    color: #6c757d;

}



.locations-empty-icon svg {

    width: 25px;

    height: 25px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

}



.locations-empty h3 {

    margin: 0;

    color: #202124;

    font-size: 20px;

}



.locations-empty p {

    margin: 8px 0 20px;

    color: #6c757d;

    font-size: 14px;

}





/* ==========================================================

   DARK MODE

========================================================== */



html[data-theme="dark"] .locations-page-header p {

    color: #94a3b8;

}



html[data-theme="dark"] .locations-count {

    border-color: #334155;

    background: #1e293b;

    color: #94a3b8;

}



html[data-theme="dark"] .location-toolbar {

    border-color: #334155;

    background: #1e293b;

}



html[data-theme="dark"] .location-search .form-label,

html[data-theme="dark"] .location-filter .form-label {

    color: #f8fafc;

}



html[data-theme="dark"] .locations-list-header strong {

    color: #f8fafc;

}



html[data-theme="dark"] .location-card {

    border-color: #334155;

    background: #243247;

    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);

}



html[data-theme="dark"] .location-card:hover {

    border-color: rgba(13, 110, 253, .55);

    box-shadow: 0 10px 25px rgba(0, 0, 0, .28);

}



html[data-theme="dark"] .location-title {

    color: #f8fafc;

}



html[data-theme="dark"] .location-region,

html[data-theme="dark"] .location-description,

html[data-theme="dark"] .difficulty {

    color: #94a3b8;

}



html[data-theme="dark"] .location-tag {

    border-color: #334155;

    background: #1e293b;

    color: #94a3b8;

}



html[data-theme="dark"] .location-stat {

    border-color: #334155;

    background: #1e293b;

}



html[data-theme="dark"] .location-stat strong {

    color: #f8fafc;

}



html[data-theme="dark"] .location-stat span {

    color: #94a3b8;

}



html[data-theme="dark"] .location-footer {

    border-color: #334155;

}



html[data-theme="dark"] .difficulty-dots i {

    background: #334155;

}



html[data-theme="dark"] .difficulty-dots i.active {

    background: #38b6ff;

}



html[data-theme="dark"] .locations-empty {

    border-color: #334155;

    background: #1e293b;

}



html[data-theme="dark"] .locations-empty-icon {

    background: #243247;

}



html[data-theme="dark"] .locations-empty h3 {

    color: #f8fafc;

}



html[data-theme="dark"] .locations-empty p {

    color: #94a3b8;

}







/* ==========================================================

   DARK MODE – BLOK FILTRŮ

========================================================== */



html[data-theme="dark"] .location-toolbar {

    border-color: #475569;

    background: #2b3b52;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);

}











/* ==========================================================

   TABLET

========================================================== */



@media (max-width: 1100px) {

    .locations-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .location-toolbar {

        flex-wrap: wrap;

    }



    .location-search {

        flex: 1 1 100%;

    }



    .location-filter {

        flex: 1 1 0;

    }

}





/* ==========================================================

   MOBILE

========================================================== */



@media (max-width: 700px) {

    .locations-page-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 14px;

        margin-bottom: 24px;

    }



    .locations-page-header h1 {

        font-size: 32px;

    }



    .locations-page-header p {

        font-size: 14px;

    }



    .locations-page-header-action {

        width: 100%;

        flex-wrap: wrap;

        justify-content: flex-start;

    }



    .location-toolbar {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

        padding: 14px;

    }



    .location-search,

    .location-advanced-filters {

        width: 100%;

        min-width: 0;

    }



    .location-search {

        flex: none;

    }



    .location-advanced-filters {

        display: block;

    }



    .location-filter {

        width: 100%;

        min-width: 0;

        flex: none;

    }



    .location-filters-toggle {

        display: flex;

        align-items: center;

        justify-content: space-between;

        box-sizing: border-box;

        width: 100%;

        min-height: 46px;

        padding: 12px 15px;

        gap: 12px;

        border: 1px solid #dee2e6;

        border-radius: 12px;

        background: #ffffff;

        color: #212529;

        font: inherit;

        font-weight: 600;

        text-align: left;

        cursor: pointer;

        transition:

            background-color .2s ease,

            border-color .2s ease;

    }



    .location-filters-toggle:hover {

        border-color: #1497ff;

    }



    .location-filters-toggle-icon {

        flex-shrink: 0;

        transition: transform .2s ease;

    }



    .location-advanced-filters.is-open

    .location-filters-toggle-icon {

        transform: rotate(180deg);

    }



    .location-filters-content {

        display: none;

        grid-template-columns: minmax(0, 1fr);

        gap: 14px;

        margin-top: 8px;

        padding: 16px;

        border: 1px solid #dee2e6;

        border-radius: 12px;

        background: #ffffff;

    }



    .location-advanced-filters.is-open

    .location-filters-content {

        display: grid;

    }



    .location-filters-content .location-filter,

    .location-filters-content select {

        box-sizing: border-box;

        width: 100%;

        min-width: 0;

    }



    .location-reset {

        width: 100%;

    }



    .locations-grid {

        grid-template-columns: 1fr;

        gap: 16px;

    }



    .location-image {

        height: 200px;

    }

}





/* ==========================================================

   DARK MODE - MOBILE FILTERS

========================================================== */



html[data-theme="dark"] .location-filters-toggle {

    border-color: #334155;

    background: #243247;

    color: #f8fafc;

}



html[data-theme="dark"] .location-filters-toggle:hover {

    border-color: #1497ff;

}



html[data-theme="dark"] .location-filters-toggle-icon {

    color: #38b6ff;

}



html[data-theme="dark"] .location-filters-content {

    border-color: #334155;

    background: #243247;

}



html[data-theme="dark"] .location-filters-content .form-label {

    color: #f8fafc;

}



html[data-theme="dark"] .location-filters-content select {

    border-color: #334155;

    background-color: #1e293b;

    color: #f8fafc;

}



html[data-theme="dark"] .location-filters-content select option {

    background-color: #1e293b;

    color: #f8fafc;

}





/* ==========================================================

   SMALL MOBILE

========================================================== */



@media (max-width: 420px) {

    .location-body {

        padding: 16px;

    }



    .location-image {

        height: 180px;

    }



    .location-title {

        font-size: 18px;

    }

}




/* ===== assets/css/pages/location-create.css ===== */

.location-create {

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    padding: 32px 0 64px;

}



.location-create-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 32px;

    margin-bottom: 32px;

}



.location-create-eyebrow {

    display: block;

    margin-bottom: 8px;

    color: var(--primary);

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .08em;

}



.location-create-header h1 {

    margin: 0;

    color: var(--text);

    font-size: 34px;

    line-height: 1.15;

}



.location-create-header p {

    margin: 10px 0 0;

    color: var(--text-muted);

}





/* =========================================================

   PROGRESS

   ========================================================= */



.location-create-progress {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 8px;

    margin-bottom: 24px;

}



.location-create-step {

    display: flex;

    align-items: center;

    gap: 9px;

    min-width: 0;

    padding: 12px 10px;

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    background: var(--surface);

    color: var(--text-muted);

    font-size: 12px;

    font-weight: 600;

}



.location-create-step-number {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 28px;

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background: var(--border);

    color: var(--text-muted);

    font-size: 12px;

}



.location-create-step.is-active {

    border-color: var(--primary);

    background: color-mix(

        in srgb,

        var(--primary) 8%,

        var(--surface)

    );

    color: var(--text);

}



.location-create-step.is-active

.location-create-step-number {

    background: var(--primary);

    color: #fff;

}



.location-create-step.is-complete

.location-create-step-number {

    background: var(--success);

    color: #fff;

}





/* =========================================================

   PANEL

   ========================================================= */



.location-create-panel {

    padding: 32px;

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    background: var(--card);

    box-shadow: var(--shadow-sm);

}



.location-create-panel-header {

    display: flex;

    align-items: flex-start;

    gap: 16px;

    margin-bottom: 32px;

}



.location-create-panel-number {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 46px;

    width: 46px;

    height: 46px;

    border-radius: 12px;

    background: var(--primary);

    color: #fff;

    font-size: 13px;

    font-weight: 800;

}



.location-create-panel-header h2 {

    margin: 0;

    color: var(--text);

    font-size: 24px;

}



.location-create-panel-header p {

    margin: 5px 0 0;

    color: var(--text-muted);

}





/* =========================================================

   FORM

   ========================================================= */



.form-grid {

    display: grid;

    gap: 20px;

}



.form-grid-2 {

    grid-template-columns: repeat(2, minmax(0, 1fr));

}



.location-create .form-group {

    margin-bottom: 24px;

}



.location-create .form-group > label {

    display: block;

    margin-bottom: 8px;

    color: var(--text);

    font-size: 14px;

    font-weight: 700;

}



.location-create .form-group small {

    display: block;

    margin-top: 7px;

    color: var(--text-muted);

    font-size: 12px;

}



.location-create textarea.form-control {

    min-height: 150px;

    resize: vertical;

}



.form-error {

    margin-top: 6px;

    color: var(--danger);

    font-size: 12px;

}





/* =========================================================

   INFO

   ========================================================= */



.location-create-info {

    margin: 8px 0 24px;

    padding: 16px 18px;

    border-left: 3px solid var(--primary);

    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;

    background: var(--surface);

}



.location-create-info strong {

    color: var(--text);

}



.location-create-info p {

    margin: 5px 0 0;

    color: var(--text-muted);

    font-size: 13px;

}





/* =========================================================

   CHECKBOXES

   ========================================================= */



.location-create-checks {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

}



.location-create-check {

    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 48px;

    padding: 10px 12px;

    border: 1px solid var(--border);

    border-radius: var(--radius-sm);

    background: var(--surface);

    cursor: pointer;

    transition:

        border-color .2s ease,

        background .2s ease;

}



.location-create-check:hover {

    border-color: var(--primary);

}



.location-create-check input {

    width: 16px;

    height: 16px;

    accent-color: var(--primary);

}



.location-create-check span {

    color: var(--text);

    font-size: 13px;

    font-weight: 600;

}





/* =========================================================

   ACTIONS

   ========================================================= */



.location-create-actions {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    margin-top: 24px;

}



.location-publish-form {

    margin: 0;

}





/* =========================================================

   ERRORS

   ========================================================= */



.location-create-errors {

    margin-bottom: 20px;

    padding: 15px 18px;

    border: 1px solid var(--danger);

    border-radius: var(--radius-md);

    background: color-mix(

        in srgb,

        var(--danger) 8%,

        var(--card)

    );

    color: var(--danger);

}



.location-create-errors div + div {

    margin-top: 5px;

}





/* =========================================================

   COVER

   ========================================================= */



.location-create-existing-cover {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 28px;

    padding: 14px;

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    background: var(--surface);

}



.location-create-existing-cover img {

    width: 150px;

    height: 100px;

    object-fit: cover;

    border-radius: var(--radius-sm);

}



.location-create-existing-cover strong {

    color: var(--text);

}



.location-create-existing-cover p {

    margin: 5px 0 0;

    color: var(--text-muted);

    font-size: 13px;

}





/* =========================================================

   GALLERY

   ========================================================= */



.location-create-gallery {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 10px;

    margin-top: 20px;

}



.location-create-gallery img {

    display: block;

    width: 100%;

    aspect-ratio: 4 / 3;

    object-fit: cover;

    border-radius: var(--radius-sm);

}





/* =========================================================

   REVIEW

   ========================================================= */



.location-review {

    border-top: 1px solid var(--border);

}



.location-review-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 16px 0;

    border-bottom: 1px solid var(--border);

}



.location-review-row span {

    color: var(--text-muted);

    font-size: 13px;

}



.location-review-row strong {

    color: var(--text);

    text-align: right;

}



.location-review-description {

    padding: 20px 0;

    border-bottom: 1px solid var(--border);

}



.location-review-description > span {

    color: var(--text-muted);

    font-size: 13px;

}



.location-review-description p {

    margin: 10px 0 0;

    color: var(--text);

    line-height: 1.7;

}



.location-review-cover {

    margin-top: 24px;

}



.location-review-cover img {

    display: block;

    width: 100%;

    max-height: 420px;

    object-fit: cover;

    border-radius: var(--radius-md);

}





/* =========================================================

   CANCEL

   ========================================================= */



.location-create-cancel {

    margin-top: 28px;

    text-align: center;

}



.location-create-cancel button {

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--text-muted);

    font: inherit;

    font-size: 12px;

    cursor: pointer;

}



.location-create-cancel button:hover {

    color: var(--danger);

}





/* =========================================================

   MOBILE

   ========================================================= */



@media (max-width: 800px) {



    .location-create {

        padding-top: 20px;

    }



    .location-create-header {

        flex-direction: column;

        gap: 18px;

    }



    .location-create-header h1 {

        font-size: 28px;

    }



    .location-create-progress {

        grid-template-columns: 1fr;

    }



    .location-create-step {

        padding: 10px 12px;

    }



    .location-create-panel {

        padding: 22px;

    }



    .form-grid-2 {

        grid-template-columns: 1fr;

        gap: 0;

    }



    .location-create-checks {

        grid-template-columns: 1fr 1fr;

    }



    .location-create-gallery {

        grid-template-columns: 1fr 1fr;

    }



    .location-review-row {

        align-items: flex-start;

        flex-direction: column;

        gap: 5px;

    }



    .location-review-row strong {

        text-align: left;

    }

}





@media (max-width: 500px) {



    .location-create-panel {

        padding: 18px;

    }



    .location-create-checks {

        grid-template-columns: 1fr;

    }



    .location-create-actions {

        flex-direction: column-reverse;

        align-items: stretch;

    }



    .location-create-actions .button {

        width: 100%;

    }



    .location-publish-form {

        width: 100%;

    }



    .location-publish-form .button {

        width: 100%;

    }



    .location-create-existing-cover {

        align-items: flex-start;

        flex-direction: column;

    }



    .location-create-existing-cover img {

        width: 100%;

        height: auto;

        aspect-ratio: 16 / 9;

    }

}
/* ===== assets/css/pages/lokalita-detail.css ===== */

/* ==========================================================

   BuddyCzech – detail lokality

   Soubor: assets/css/pages/lokalita-detail.css

   ========================================================== */



.ld-page {

    width: 100%;

    max-width: 1220px;

    margin: 0 auto;

    padding: 0 0 30px;



    --ld-bg: var(--bg, #fff);

    --ld-surface: var(--surface, #f5f6f8);

    --ld-card: var(--card, #fff);

    --ld-text: var(--text, #202124);

    --ld-muted: var(--text-muted, #6c757d);

    --ld-border: var(--border, #dee2e6);

    --ld-primary: var(--primary, #0d6efd);

    --ld-radius: 17px;

    --ld-shadow: 0 7px 25px rgba(20, 40, 65, .06);



    color: var(--ld-text);

}



.ld-page *,

.ld-page *::before,

.ld-page *::after {

    box-sizing: border-box;

}



.ld-page a {

    text-decoration: none;

}



.ld-page button,

.ld-page textarea {

    font: inherit;

}



.ld-page img {

    display: block;

    max-width: 100%;

}



/* Drobečková navigace */



.ld-breadcrumbs {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin: 12px 0 18px;

    color: var(--ld-muted);

    font-size: 12px;

}



.ld-breadcrumbs a:hover {

    color: var(--ld-primary);

}



.ld-breadcrumbs [aria-current="page"] {

    color: var(--ld-text);

    font-weight: 650;

}



/* Úvodní fotografie */



.ld-hero {

    position: relative;

    min-height: 380px;

    overflow: hidden;

    isolation: isolate;

    border-radius: 22px;

    background: #10283a;

    color: #fff;

}



.ld-hero-image,

.ld-hero-overlay {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

}



.ld-hero-image {

    z-index: -2;

    object-fit: cover;

    object-position: center 48%;

}



.ld-hero-overlay {

    z-index: -1;

    background:

        linear-gradient(

            90deg,

            rgba(3, 17, 29, .88) 0%,

            rgba(3, 17, 29, .69) 48%,

            rgba(3, 17, 29, .13) 100%

        ),

        linear-gradient(

            0deg,

            rgba(3, 17, 29, .3),

            transparent 55%

        );

}



.ld-hero-content {

    max-width: 760px;

    padding: 42px 45px;

}



.ld-eyebrow,

.ld-section-kicker {

    display: block;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;

}



.ld-eyebrow {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #b5e3ff;

}



.ld-eyebrow-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #38b6ff;

    box-shadow: 0 0 0 5px rgba(56, 182, 255, .16);

}



.ld-hero h1 {

    margin: 17px 0 12px;

    color: #fff;

    font-size: clamp(35px, 4vw, 53px);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.6px;

}



.ld-hero-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    color: #dbe8f1;

    font-size: 13px;

}



.ld-type-pill {

    display: inline-flex;

    align-items: center;

    padding: 4px 10px;

    border: 1px solid rgba(255, 255, 255, .3);

    border-radius: 30px;

    background: rgba(255, 255, 255, .1);

    font-size: 11px;

}



.ld-hero-description {

    max-width: 580px;

    margin: 18px 0 22px;

    color: #e0eaf1;

    font-size: 14px;

    line-height: 1.75;



    display: -webkit-box;

    -webkit-line-clamp: 4;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.ld-hero-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

}



.ld-favorite-form {

    margin: 0;

}



/* Tlačítka stránky */



.ld-page .button.ld-button-primary,

.ld-page .button.ld-button-glass {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 42px;

    padding: 0 16px;

    border: 1px solid transparent;

    border-radius: 10px;

    font-size: 12px;

    font-weight: 750;

    cursor: pointer;

    transition:

        transform .18s ease,

        background .18s ease,

        border-color .18s ease;

}



.ld-page .button.ld-button-primary {

    background: var(--ld-primary);

    color: #fff;

}



.ld-page .button.ld-button-primary:hover {

    filter: brightness(.94);

    transform: translateY(-1px);

}



.ld-page .button.ld-button-glass {

    border-color: rgba(255, 255, 255, .4);

    background: rgba(255, 255, 255, .12);

    color: #fff;

    backdrop-filter: blur(8px);

}



.ld-page .button.ld-button-glass:hover,

.ld-page .button.ld-button-glass.is-active {

    background: rgba(255, 255, 255, .22);

}



.ld-page .ld-button-full {

    width: 100%;

}



/* Základní parametry */



.ld-facts {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 13px;

    margin: 17px 0 24px;

}



.ld-fact {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;

    padding: 16px;

    border: 1px solid var(--ld-border);

    border-radius: 14px;

    background: var(--ld-card);

    box-shadow: var(--ld-shadow);

}



.ld-fact-icon {

    display: grid;

    place-items: center;

    flex: 0 0 38px;

    width: 38px;

    height: 38px;

    border-radius: 11px;

    font-size: 20px;

    font-weight: 700;

}



.ld-icon-blue {

    color: #1263d8;

    background: #e5f1ff;

}



.ld-icon-aqua {

    color: #078b86;

    background: #def8f5;

}



.ld-icon-amber {

    color: #ac7600;

    background: #fff3d7;

}



.ld-icon-violet {

    color: #7751d8;

    background: #efe8ff;

}



.ld-fact-label {

    display: block;

    margin-bottom: 3px;

    color: var(--ld-muted);

    font-size: 10px;

}



.ld-fact strong {

    display: block;

    overflow-wrap: anywhere;

    font-size: 15px;

    line-height: 1.4;

}



.ld-difficulty {

    display: flex;

    gap: 4px;

    margin-top: 6px;

}



.ld-difficulty i {

    width: 13px;

    height: 3px;

    border-radius: 3px;

    background: var(--ld-border);

}



.ld-difficulty i.is-active {

    background: #19a783;

}



/* Navigace po sekcích */



.ld-section-nav {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-bottom: 23px;

    overflow-x: auto;

    border-bottom: 1px solid var(--ld-border);

    scrollbar-width: thin;

}



.ld-section-nav a {

    flex: 0 0 auto;

    padding: 12px 1px;

    border-bottom: 2px solid transparent;

    color: var(--ld-muted);

    font-size: 12px;

    font-weight: 700;

}



.ld-section-nav a:hover,

.ld-section-nav a:focus-visible {

    color: var(--ld-primary);

    border-bottom-color: var(--ld-primary);

}



/* Hlavní obsah */



.ld-content-grid {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 280px;

    align-items: start;

    gap: 20px;

}



.ld-main-column,

.ld-side-column {

    display: grid;

    align-content: start;

    gap: 18px;

    min-width: 0;

}



.ld-card {

    min-width: 0;

    padding: 25px;

    border: 1px solid var(--ld-border);

    border-radius: var(--ld-radius);

    background: var(--ld-card);

    box-shadow: var(--ld-shadow);

}



.ld-section-heading {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 18px;

}



.ld-section-heading h2 {

    margin: 0;

    color: var(--ld-text);

    font-size: 22px;

    font-weight: 780;

    line-height: 1.3;

    letter-spacing: -.55px;

}



.ld-section-kicker {

    margin-bottom: 5px;

    color: var(--ld-primary);

    font-size: 9px;

}



.ld-heading-number {

    color: var(--ld-border);

    font-size: 25px;

    font-weight: 800;

}



.ld-lead {

    margin: 0;

    color: var(--ld-text);

    font-size: 14px;

    line-height: 1.85;

    overflow-wrap: anywhere;

}



/* Tip */



.ld-tip {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 20px;

    padding: 15px;

    border: 1px solid var(--ld-border);

    border-radius: 12px;

    background: var(--ld-surface);

}



.ld-tip-icon {

    display: grid;

    place-items: center;

    flex: 0 0 25px;

    height: 25px;

    border-radius: 50%;

    background: rgba(13, 110, 253, .12);

    color: var(--ld-primary);

    font-size: 12px;

    font-weight: 800;

}



.ld-tip strong {

    font-size: 12px;

}



.ld-tip p {

    margin: 4px 0 0;

    color: var(--ld-muted);

    font-size: 11px;

    line-height: 1.7;

}



/* Galerie */



.ld-gallery {

    display: grid;

    grid-template-columns: 1.4fr 1fr;

    grid-template-rows: 115px 115px;

    gap: 9px;

}



.ld-gallery-photo {

    position: relative;

    min-width: 0;

    min-height: 0;

    padding: 0;

    overflow: hidden;

    border: 0;

    border-radius: 11px;

    background: var(--ld-surface);

    cursor: zoom-in;

}



.ld-gallery-photo.is-large {

    grid-row: 1 / 3;

}



.ld-gallery-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .25s ease;

}



.ld-gallery-photo:hover img {

    transform: scale(1.045);

}



.ld-gallery-zoom {

    position: absolute;

    right: 9px;

    bottom: 9px;

    display: grid;

    place-items: center;

    width: 30px;

    height: 30px;

    border: 1px solid rgba(255, 255, 255, .4);

    border-radius: 9px;

    background: rgba(0, 0, 0, .4);

    color: #fff;

    opacity: 0;

    transition: opacity .2s;

}



.ld-gallery-photo:hover .ld-gallery-zoom,

.ld-gallery-photo:focus-visible .ld-gallery-zoom {

    opacity: 1;

}



.ld-demo-note {

    margin: 10px 0 0;

    color: var(--ld-muted);

    font-size: 10px;

}



/* Praktické informace */



.ld-info-list {

    display: grid;

}



.ld-info-row {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 14px 0;

    border-bottom: 1px solid var(--ld-border);

}



.ld-info-row:first-child {

    padding-top: 0;

}



.ld-info-row:last-child {

    padding-bottom: 0;

    border-bottom: 0;

}



.ld-info-icon {

    display: grid;

    place-items: center;

    flex: 0 0 35px;

    height: 35px;

    border-radius: 10px;

    background: var(--ld-surface);

    color: var(--ld-primary);

    font-size: 16px;

    font-weight: 800;

}



.ld-info-row > div {

    min-width: 0;

    flex: 1;

}



.ld-info-row strong {

    display: block;

    margin: 1px 0 4px;

    font-size: 12px;

}



.ld-info-row p {

    margin: 0;

    color: var(--ld-muted);

    font-size: 11px;

    line-height: 1.7;

    overflow-wrap: anywhere;

}



/* Pravý sloupec */



.ld-side-column {

    gap: 15px;

}



.ld-side-card {

    padding: 20px;

}



.ld-side-card .ld-section-heading {

    align-items: center;

    margin-bottom: 13px;

}



.ld-side-card .ld-section-heading h2 {

    font-size: 17px;

}



.ld-side-heading-icon {

    display: grid;

    place-items: center;

    flex: 0 0 32px;

    width: 32px;

    height: 32px;

    border-radius: 9px;

    background: var(--ld-surface);

    color: var(--ld-primary);

    font-size: 17px;

}



.ld-mini-detail {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 10px;

    padding: 11px 0;

    border-top: 1px solid var(--ld-border);

    font-size: 11px;

}



.ld-mini-detail span {

    color: var(--ld-muted);

}



.ld-mini-detail strong {

    max-width: 58%;

    text-align: right;

    font-size: 11px;

    overflow-wrap: anywhere;

}



/* Hodnocení */



.ld-rating-overview {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 4px 0 18px;

}



.ld-rating-number {

    font-size: 39px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -1.3px;

}



.ld-stars {

    color: #e5a900;

    font-size: 14px;

    letter-spacing: 1px;

    white-space: nowrap;

}



.ld-rating-caption {

    display: block;

    margin-top: 4px;

    color: var(--ld-muted);

    font-size: 10px;

}



.ld-rating-bars {

    display: grid;

    gap: 9px;

}



.ld-rating-bar-row {

    display: grid;

    grid-template-columns: 69px minmax(0, 1fr) 26px;

    align-items: center;

    gap: 6px;

    color: var(--ld-muted);

    font-size: 9px;

}



.ld-rating-bar-row strong {

    text-align: right;

    font-size: 9px;

}



.ld-rating-bar {

    height: 6px;

    overflow: hidden;

    border-radius: 5px;

    background: var(--ld-surface);

}



.ld-rating-bar i {

    display: block;

    height: 100%;

    border-radius: inherit;

    background: #f0bd43;

}



/* Buddy karta */



.ld-buddy-card {

    position: relative;

    overflow: hidden;

    padding: 23px;

    border-radius: var(--ld-radius);

    background: linear-gradient(140deg, #0e6bd8, #123c79);

    color: #fff;

}



.ld-buddy-decoration {

    position: absolute;

    top: -17px;

    right: 12px;

    color: rgba(255, 255, 255, .14);

    font-size: 48px;

    letter-spacing: -14px;

}



.ld-buddy-card .ld-section-kicker {

    position: relative;

    margin-bottom: 9px;

    color: #c6e3ff;

}



.ld-buddy-card h2 {

    position: relative;

    margin: 0;

    color: #fff;

    font-size: 21px;

    line-height: 1.3;

}



.ld-buddy-card p {

    position: relative;

    margin: 10px 0 17px;

    color: #e0edff;

    font-size: 11px;

    line-height: 1.75;

}



.ld-buddy-card .button {

    position: relative;

}



/* Mapa – samostatná široká karta pod obsahem */



.ld-map-card {

    margin-top: 20px;

}



.ld-map-card .ld-section-heading {

    align-items: center;

}



.ld-map-placeholder {

    position: relative;

    min-height: 310px;

    overflow: hidden;

    isolation: isolate;

    border: 1px solid var(--ld-border);

    border-radius: 13px;

    background-color: #e8eee5;

    background-image:

        linear-gradient(

            30deg,

            transparent 48%,

            rgba(255, 255, 255, .7) 49%,

            rgba(255, 255, 255, .7) 51%,

            transparent 52%

        ),

        linear-gradient(

            110deg,

            transparent 46%,

            rgba(255, 255, 255, .8) 47%,

            rgba(255, 255, 255, .8) 49%,

            transparent 50%

        );

    background-size: 105px 85px, 130px 100px;

}



.ld-map-green {

    position: absolute;

    z-index: -1;

    border-radius: 48%;

    background: #d4e5ca;

}



.ld-map-green-one {

    top: -25%;

    right: -5%;

    width: 42%;

    height: 95%;

    transform: rotate(28deg);

}



.ld-map-green-two {

    bottom: -50%;

    left: 24%;

    width: 45%;

    height: 90%;

    transform: rotate(-25deg);

}



.ld-map-water {

    position: absolute;

    top: 7%;

    left: 8%;

    width: 33%;

    height: 86%;

    border-radius: 45% 55% 61% 39%;

    background: #9ed9e8;

    transform: rotate(-22deg);

    opacity: .96;

}



.ld-map-road {

    position: absolute;

    height: 7px;

    border: 1px solid #e3c9a1;

    border-radius: 8px;

    background: #fff7e7;

    box-shadow: 0 0 0 1px rgba(170, 148, 107, .08);

}



.ld-map-road-one {

    top: 27%;

    left: -5%;

    width: 110%;

    transform: rotate(13deg);

}



.ld-map-road-two {

    top: 68%;

    left: 12%;

    width: 95%;

    transform: rotate(-19deg);

}



.ld-map-road-three {

    top: 7%;

    left: 54%;

    width: 55%;

    transform: rotate(69deg);

}



.ld-map-road-four {

    top: 48%;

    left: 49%;

    width: 70%;

    transform: rotate(32deg);

}



.ld-map-path {

    position: absolute;

    top: 29%;

    left: 34%;

    width: 24%;

    height: 31%;

    border-right: 3px dashed #7f9b6b;

    border-bottom: 3px dashed #7f9b6b;

    border-radius: 0 0 45% 0;

    transform: rotate(-14deg);

}



.ld-map-marker {

    position: absolute;

    top: 43%;

    left: 48%;

    display: grid;

    place-items: center;

    width: 44px;

    height: 44px;

    border: 3px solid #fff;

    border-radius: 50% 50% 50% 8px;

    background: var(--ld-primary);

    color: #fff;

    box-shadow: 0 5px 17px rgba(0, 0, 0, .2);

    transform: rotate(-45deg);

}



.ld-map-marker span {

    font-size: 22px;

    transform: rotate(45deg);

}



.ld-map-label {

    position: absolute;

    top: calc(43% - 3px);

    left: calc(48% + 55px);

    display: flex;

    flex-direction: column;

    gap: 2px;

    max-width: 230px;

    padding: 9px 12px;

    border: 1px solid rgba(0, 0, 0, .06);

    border-radius: 9px;

    background: rgba(255, 255, 255, .94);

    color: #243747;

    box-shadow: 0 3px 12px rgba(0, 0, 0, .08);

}



.ld-map-label strong {

    font-size: 12px;

}



.ld-map-label span {

    color: #65756b;

    font-size: 10px;

}



.ld-map-legend {

    position: absolute;

    bottom: 12px;

    left: 12px;

    padding: 5px 8px;

    border-radius: 6px;

    background: rgba(255, 255, 255, .9);

    color: #65756b;

    font-size: 10px;

}



.ld-map-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 15px;

}



.ld-map-footer > div {

    display: flex;

    align-items: center;

    gap: 11px;

}



.ld-map-footer-icon {

    display: grid;

    place-items: center;

    width: 38px;

    height: 38px;

    border-radius: 11px;

    background: var(--ld-surface);

    color: var(--ld-primary);

    font-size: 20px;

}



.ld-map-footer strong {

    display: block;

    font-size: 12px;

}



.ld-map-footer p {

    margin: 3px 0 0;

    color: var(--ld-muted);

    font-size: 11px;

}



.ld-map-notice {

    color: var(--ld-muted);

    font-size: 10px;

}



/* Diskuze */



.ld-discussion-card {

    margin-top: 20px;

}



.ld-section-description {

    max-width: 600px;

    margin: 8px 0 0;

    color: var(--ld-muted);

    font-size: 12px;

    line-height: 1.7;

}



.ld-comment-form {

    padding: 18px;

    border: 1px solid var(--ld-border);

    border-radius: 13px;

    background: var(--ld-surface);

}



.ld-comment-form label {

    display: block;

    margin-bottom: 9px;

    color: var(--ld-text);

    font-size: 12px;

    font-weight: 750;

}



.ld-comment-form textarea {

    display: block;

    width: 100%;

    min-height: 110px;

    padding: 13px;

    resize: vertical;

    border: 1px solid var(--ld-border);

    border-radius: 10px;

    outline: none;

    background: var(--ld-card);

    color: var(--ld-text);

    font-size: 13px;

    line-height: 1.65;

    transition: border-color .18s, box-shadow .18s;

}



.ld-comment-form textarea::placeholder {

    color: var(--ld-muted);

    opacity: .85;

}



.ld-comment-form textarea:focus {

    border-color: var(--ld-primary);

    box-shadow: 0 0 0 3px rgba(13, 110, 253, .1);

}



.ld-comment-form-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 12px;

}



.ld-comment-hint {

    max-width: 440px;

    color: var(--ld-muted);

    font-size: 10px;

    line-height: 1.6;

}



.ld-comment-feedback {

    margin: 8px 0 0;

    color: var(--ld-primary);

    font-size: 11px;

}



.ld-comments-list {

    display: grid;

    gap: 0;

    margin-top: 8px;

}



.ld-comment {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 19px 0;

    border-bottom: 1px solid var(--ld-border);

}



.ld-comment:last-child {

    border-bottom: 0;

    padding-bottom: 0;

}



.ld-comment-avatar {

    display: grid;

    place-items: center;

    flex: 0 0 40px;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: #e1efff;

    color: #1b61b9;

    font-size: 11px;

    font-weight: 800;

}



.ld-comment-avatar.ld-avatar-blue {

    background: #dff7f3;

    color: #087e77;

}



.ld-comment-content {

    min-width: 0;

    flex: 1;

}



.ld-comment-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

}



.ld-comment-meta strong {

    color: var(--ld-text);

    font-size: 12px;

}



.ld-comment-meta span {

    color: var(--ld-muted);

    font-size: 10px;

}



.ld-comment-content p {

    margin: 8px 0 0;

    color: var(--ld-muted);

    font-size: 12px;

    line-height: 1.75;

    overflow-wrap: anywhere;

}



/* Lightbox */



.ld-lightbox {

    position: fixed;

    inset: 0;

    z-index: 10000;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 45px 20px;

    background: rgba(3, 10, 18, .92);

}



.ld-lightbox.is-open {

    display: flex;

}



.ld-lightbox img {

    max-width: min(1100px, 100%);

    max-height: 85vh;

    object-fit: contain;

    border-radius: 10px;

}



.ld-lightbox-close {

    position: absolute;

    top: 16px;

    right: 20px;

    display: grid;

    place-items: center;

    width: 42px;

    height: 42px;

    border: 1px solid rgba(255, 255, 255, .35);

    border-radius: 50%;

    background: rgba(255, 255, 255, .1);

    color: #fff;

    font-size: 28px;

    cursor: pointer;

}



body.ld-lightbox-open {

    overflow: hidden;

}



/* Spodní odkazy */



.ld-page-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 23px;

    padding: 18px 2px 0;

    border-top: 1px solid var(--ld-border);

}



.ld-page-bottom a {

    color: var(--ld-primary);

    font-size: 11px;

    font-weight: 700;

}



.ld-page-bottom a:hover {

    text-decoration: underline;

}



/* Tablet */



@media (max-width: 1050px) {

    .ld-content-grid {

        grid-template-columns: minmax(0, 1fr) 250px;

        gap: 15px;

    }



    .ld-card {

        padding: 21px;

    }



    .ld-side-card {

        padding: 17px;

    }



    .ld-fact {

        padding: 13px;

        gap: 9px;

    }



    .ld-fact-icon {

        flex-basis: 33px;

        width: 33px;

        height: 33px;

    }



    .ld-fact strong {

        font-size: 13px;

    }

}



/* Mobil */



@media (max-width: 760px) {

    .ld-page {

        padding-bottom: 22px;

    }



    .ld-breadcrumbs {

        gap: 7px;

        margin: 12px 0;

        font-size: 11px;

    }



    .ld-hero {

        min-height: 405px;

        border-radius: 16px;

    }



    .ld-hero-image {

        object-position: 60% center;

    }



    .ld-hero-overlay {

        background:

            linear-gradient(

                90deg,

                rgba(3, 17, 29, .85),

                rgba(3, 17, 29, .35)

            ),

            linear-gradient(

                0deg,

                rgba(3, 17, 29, .45),

                transparent 80%

            );

    }



    .ld-hero-content {

        padding: 31px 23px;

    }



    .ld-hero h1 {

        font-size: 38px;

        overflow-wrap: anywhere;

    }



    .ld-hero-description {

        font-size: 12px;

    }



    .ld-facts {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 9px;

        margin: 12px 0 17px;

    }



    .ld-fact {

        min-width: 0;

        align-items: flex-start;

        padding: 12px;

    }



    .ld-fact-label {

        font-size: 9px;

    }



    .ld-fact strong {

        font-size: 13px;

    }



    .ld-section-nav {

        gap: 20px;

        margin-bottom: 16px;

    }



    .ld-section-nav a {

        font-size: 11px;

    }



    .ld-content-grid {

        grid-template-columns: minmax(0, 1fr);

        gap: 15px;

    }



    .ld-main-column,

    .ld-side-column {

        width: 100%;

        gap: 15px;

    }



    .ld-side-column {

        grid-template-columns: minmax(0, 1fr);

    }



    .ld-card,

    .ld-side-card,

    .ld-buddy-card,

    .ld-map-card,

    .ld-discussion-card {

        width: 100%;

        min-width: 0;

    }



    .ld-card {

        padding: 19px;

    }



    .ld-side-card {

        padding: 19px;

    }



    .ld-section-heading h2 {

        font-size: 20px;

    }



    .ld-gallery {

        grid-template-rows: 100px 100px;

    }



    .ld-map-card,

    .ld-discussion-card {

        margin-top: 15px;

    }



    .ld-map-placeholder {

        min-height: 260px;

    }



    .ld-map-label {

        left: calc(48% + 39px);

        max-width: 145px;

        padding: 7px 9px;

    }



    .ld-map-label strong {

        font-size: 10px;

    }



    .ld-map-label span {

        font-size: 9px;

    }



    .ld-map-marker {

        width: 38px;

        height: 38px;

    }



    .ld-map-footer {

        align-items: flex-start;

        flex-direction: column;

    }



    .ld-comment-form {

        padding: 13px;

    }



    .ld-comment-form-footer {

        align-items: stretch;

        flex-direction: column;

    }



    .ld-comment-form-footer .button {

        width: 100%;

    }

}



/* Menší telefony */



@media (max-width: 420px) {

    .ld-hero {

        min-height: 420px;

    }



    .ld-hero-content {

        padding: 26px 17px;

    }



    .ld-hero h1 {

        font-size: 33px;

    }



    .ld-hero-meta {

        font-size: 11px;

    }



    .ld-hero-actions {

        align-items: stretch;

        flex-direction: column;

    }



    .ld-hero-actions .button {

        width: 100%;

    }



    .ld-fact {

        gap: 8px;

        padding: 10px;

    }



    .ld-fact-icon {

        flex-basis: 29px;

        width: 29px;

        height: 29px;

        font-size: 16px;

    }



    .ld-fact strong {

        font-size: 12px;

    }



    .ld-card {

        padding: 16px;

    }



    .ld-section-heading h2 {

        font-size: 19px;

    }



    .ld-gallery {

        grid-template-rows: 82px 82px;

        gap: 6px;

    }



    .ld-rating-bar-row {

        grid-template-columns: 65px minmax(0, 1fr) 24px;

        gap: 5px;

    }



    .ld-map-placeholder {

        min-height: 220px;

    }



    .ld-map-label {

        top: calc(43% + 39px);

        left: 42%;

        max-width: 150px;

    }



    .ld-map-marker {

        top: 28%;

        left: 40%;

    }



    .ld-map-path {

        top: 21%;

        left: 28%;

    }



    .ld-page-bottom {

        align-items: flex-start;

        flex-direction: column;

    }

}













/* ========================================

   OpenStreetMap – detail lokality

   ======================================== */



.ld-map-real {

    width: 100%;

    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--border-color, #dce5ed);

    border-radius: 14px;

    background: var(--card-background, #ffffff);

}



.ld-map-real iframe {

    display: block;

    width: 100%;

    height: 400px;

    border: 0;

    background: #eaf1f5;

}



.ld-map-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 12px;

    padding: 12px 16px;

    border-top: 1px solid var(--border-color, #dce5ed);

    font-size: 0.875rem;

}



.ld-map-footer p {

    margin: 0;

    color: var(--text-muted, #64748b);

    line-height: 1.5;

}



.ld-map-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    color: var(--primary-color, #1497ff);

    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;

    transition: color 0.2s ease;

}



.ld-map-link:hover {

    color: var(--primary-hover, #0879d1);

    text-decoration: underline;

}



.ld-map-link:focus-visible {

    outline: 2px solid var(--primary-color, #1497ff);

    outline-offset: 4px;

    border-radius: 4px;

}



/* Stav, kdy souřadnice nejsou dostupné */



.ld-map-unavailable {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 220px;

    padding: 32px 20px;

    color: var(--text-muted, #64748b);

    text-align: center;

    background: var(--card-background, #ffffff);

    border: 1px dashed var(--border-color, #cbd5e1);

    border-radius: 14px;

}



.ld-map-unavailable p {

    max-width: 420px;

    margin: 0;

    line-height: 1.6;

}



/* Tmavý režim */



[data-theme="dark"] .ld-map-real,

[data-theme="dark"] .ld-map-unavailable {

    background: var(--card-background, #172536);

    border-color: var(--border-color, #334155);

}



[data-theme="dark"] .ld-map-footer {

    border-top-color: var(--border-color, #334155);

}



[data-theme="dark"] .ld-map-footer p,

[data-theme="dark"] .ld-map-unavailable {

    color: var(--text-muted, #a8b6c7);

}



/* Tablet a mobil */



@media (max-width: 768px) {

    .ld-map-real {

        border-radius: 12px;

    }



    .ld-map-real iframe {

        height: 320px;

    }



    .ld-map-footer {

        align-items: flex-start;

        flex-direction: column;

        padding: 12px;

        gap: 8px;

    }



    .ld-map-link {

        white-space: normal;

    }



    .ld-map-unavailable {

        min-height: 180px;

        padding: 24px 16px;

    }

}



@media (max-width: 480px) {

    .ld-map-real iframe {

        height: 280px;

    }

}











/* Stránkování komentářů */

.ld-pagination {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 0.4rem;

    margin-top: 1.5rem;

}



.ld-pagination[hidden] {

    display: none;

}



.ld-pagination-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 2.5rem;

    min-height: 2.5rem;

    padding: 0.5rem 0.75rem;

    border: 1px solid var(--border-color, #d9e2ec);

    border-radius: 0.5rem;

    background: var(--surface-color, #fff);

    color: var(--text-color, #243447);

    font: inherit;

    cursor: pointer;

    transition:

        background-color 0.15s ease,

        border-color 0.15s ease,

        color 0.15s ease;

}



.ld-pagination-button:hover:not(:disabled) {

    border-color: #1497ff;

    color: #1497ff;

}



.ld-pagination-button.is-active {

    border-color: #1497ff;

    background: #1497ff;

    color: #fff;

    font-weight: 600;

}



.ld-pagination-button:disabled {

    opacity: 0.45;

    cursor: not-allowed;

}



.ld-pagination-button:focus-visible {

    outline: 2px solid #1497ff;

    outline-offset: 3px;

}



.ld-pagination-dots {

    padding: 0 0.15rem;

    color: var(--text-muted, #6b7280);

}



@media (max-width: 480px) {

    .ld-pagination {

        gap: 0.25rem;

    }



    .ld-pagination-button {

        min-width: 2.2rem;

        min-height: 2.2rem;

        padding: 0.4rem 0.55rem;

    }

}















.ld-user-rating {

    margin-top: 1.25rem;

}



.ld-user-rating > p:first-child {

    margin-bottom: 0.5rem;

}



.ld-user-rating-stars {

    display: flex;

    align-items: center;

    gap: 0.3rem;

}



.ld-user-rating-star {

    padding: 0;

    border: 0;

    background: transparent;

    color: #f5b82e;

    font-size: 1.8rem;

    line-height: 1.2;

    cursor: pointer;

    transition: transform 0.15s ease, color 0.15s ease;

}



.ld-user-rating-star:hover:not(:disabled) {

    transform: scale(1.12);

}



.ld-user-rating-star:disabled {

    cursor: default;

    opacity: 0.75;

}



.ld-user-rating-star:focus-visible {

    outline: 2px solid #1497ff;

    outline-offset: 3px;

    border-radius: 3px;

}



.ld-rating-message {

    margin-top: 0.5rem;

    font-size: 0.875rem;

}



.ld-rating-message.is-error {

    color: #d94848;

}



















.ld-comment-counter {

    margin-top: 0.35rem;

    text-align: right;

    font-size: 0.8rem;

    color: var(--text-muted, #777);

    transition: color 0.2s ease;

}



.ld-comment-counter.is-warning {

    color: #d99a19;

}



.ld-comment-counter.is-limit {

    color: #d94848;

    font-weight: 600;

}





















/* ==========================================================

   BuddyCzech – hlavička detailu lokality

========================================================== */



.ld-hero {

    min-height: 380px;

    display: flex;

    align-items: stretch;

    position: relative;

    overflow: hidden;

}



.ld-hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 850px;

    padding: 32px 45px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



/* Název */



.ld-hero h1 {

    margin: 16px 0 18px;

    overflow-wrap: anywhere;

}



/* Lokalizace, souřadnice a typ */



.ld-hero-meta {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 11px;

    width: 100%;

    font-size: 14px;

}



.ld-hero-location {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #dbe8f1;

    line-height: 1.5;

}



.ld-hero-location-icon {

    flex-shrink: 0;

    color: #8ed7ff;

    font-size: 20px;

    line-height: 1;

}



.ld-hero-location-text {

    display: inline-flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

}



.ld-location-separator {

    color: rgba(255, 255, 255, .6);

}



/* GPS souřadnice */

/* Souřadnice v hlavičce jako odkaz na mapu */

.ld-hero-coordinates {

    display: inline-flex;

    align-items: center;

    gap: 8px;



    margin-left: 0;

    color: #dbe8f1;

    font-size: 13px;

    line-height: 1.5;

    font-variant-numeric: tabular-nums;



    text-decoration: none;

    cursor: pointer;

    transition: color .2s ease;

}



.ld-hero-coordinates:hover {

    color: #8ed7ff;

}



.ld-hero-coordinates:focus-visible {

    outline: 2px solid #8ed7ff;

    outline-offset: 4px;

    border-radius: 3px;

}



.ld-hero-coordinate-icon {

    flex-shrink: 0;

    color: #8ed7ff;

    font-size: 19px;

    line-height: 1;

}



/* Štítek typu na samostatném řádku */



.ld-type-pill {

    align-self: flex-start;

    flex-shrink: 0;

    margin-top: 2px;

}



/* Tlačítka při spodním okraji */



.ld-hero-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    width: 100%;

    margin-top: auto;

    padding-top: 24px;

}



.ld-favorite-form {

    margin: 0;

}



/* Tablet */



@media (max-width: 768px) {

    .ld-hero {

        min-height: 350px;

    }



    .ld-hero-content {

        padding: 28px 25px;

    }



    .ld-hero h1 {

        font-size: clamp(30px, 6vw, 42px);

        line-height: 1.12;

        letter-spacing: -0.8px;

    }



    .ld-hero-meta {

        gap: 9px;

    }



    .ld-hero-actions {

        padding-top: 20px;

    }

}



/* Menší telefony */



@media (max-width: 420px) {

    .ld-hero {

        min-height: 400px;

    }



    .ld-hero-content {

        padding: 25px 18px;

    }



    .ld-hero h1 {

        font-size: 31px;

    }



    .ld-hero-location-text {

        gap: 6px;

    }



    .ld-hero-coordinates {

        font-size: 12px;

        overflow-wrap: anywhere;

    }



    .ld-hero-actions {

        flex-direction: column;

        align-items: stretch;

        gap: 10px;

    }



    .ld-hero-actions > .button,

    .ld-favorite-form,

    .ld-favorite-form .button {

        width: 100%;

    }

}











/* ==========================================================

   Poslední aktualizace – hlavička lokality

========================================================== */



/* Desktop: datum se pozicuje vůči celé hlavičce */

.ld-hero {

    position: relative;

}



.ld-hero-updated {

    position: absolute;

    z-index: 2;

    right: 28px;

    bottom: 20px;



    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 3px;



    color: rgba(255, 255, 255, .7);

    font-size: 11px;

    line-height: 1.5;

    text-align: right;

}



.ld-hero-updated time {

    color: rgba(255, 255, 255, .9);

    font-size: 12px;

    font-weight: 500;

    font-variant-numeric: tabular-nums;

}



/* ==========================================================

   Tablet a mobil: datum pod celým obsahem hlavičky

========================================================== */



@media (max-width: 768px) {

    .ld-hero {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        height: auto;

    }



    .ld-hero-content {

        flex: 0 0 auto;

        width: 100%;

        max-width: none;

        box-sizing: border-box;

    }



    .ld-hero-updated {

        position: static;

        flex: 0 0 auto;

        align-self: stretch;

        box-sizing: border-box;



        margin: 0;

        padding: 0 25px 22px;



        align-items: flex-start;

        text-align: left;

    }

}



@media (max-width: 420px) {

    .ld-hero-updated {

        padding-right: 18px;

        padding-left: 18px;

    }

}
/* ===== assets/css/pages/info-page.css ===== */

/* ===========================
   INFO PAGE
=========================== */


/* HEADER */

.info-page-header {

    display:flex;

    align-items:center;

    gap:20px;

    padding:32px;

    border-bottom:1px solid var(--border-color);

}



.info-page-icon {

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:50%;

    background:var(--primary-color);

    color:var(--text-color);


}



.info-page-icon svg {

    width:50px;

    height:50px;

}



.info-page-header h1 {

    margin:0 0 6px;

    font-size:2rem;

}



.info-page-header p {

    margin:0;

    color:var(--text-muted);

}



/* CONTENT */


.info-page-content {

    padding:32px;

    line-height:1.7;

}


.info-page-content p {

    color:var(--text-muted);

}



.info-page-content h2 {

    margin-top:35px;

    margin-bottom:12px;

    color:var(--text-color);

    font-size:1.3rem;

}



/* COOKIE TYPES */


.info-list {

    list-style:none;

    padding:0;

    margin:20px 0;

    display:flex;

    flex-direction:column;

    gap:14px;

}



.info-list li {

    padding:16px;

    border-radius:var(--radius-md);

    background:var(--background-soft);

    border:1px solid var(--border-color);

}



.info-list strong {

    display:block;

    margin-bottom:6px;

}



.info-list span {

    color:var(--text-muted);

}



/* BULLET LIST */


.info-bullets {

    padding-left:25px;

    color:var(--text-muted);

}



.info-bullets li {

    margin-bottom:10px;

}



/* NOTE */


.info-page-note {

    margin-top:35px;

    padding:20px;

    border-radius:var(--radius-md);

    background:rgba(0,102,204,.08);

    border-left:4px solid var(--primary-color);

}



.info-page-note strong {

    display:block;

    margin-bottom:8px;

}



.info-page-note p {

    margin:0;

}



/* MOBILE */


@media(max-width:768px){


    .info-page-header {

        padding:22px;

        align-items:flex-start;

    }


    .info-page-content {

        padding:22px;

    }


    .info-page-icon {

        width:52px;

        height:52px;

    }


    .info-page-icon svg {

        width:40px;

        height:40px;

    }


    .info-page-header h1 {

        font-size:1.5rem;

    }


}
/* ===== assets/css/pages/index.css ===== */

/* ==========================================================
   BuddyCzech - Home page
========================================================== */


/* ==========================================================
   HERO
========================================================== */


.home-page .hero {


    min-height:620px;


    display:flex;

    align-items:center;


    padding:90px 0;



    color:#fff;



    background:

        linear-gradient(
            rgba(0,25,45,.65),
            rgba(0,25,45,.65)
        ),

        url("../assets/images/hero.jpg");



    background-size:cover;

    background-position:center;



    overflow:hidden;


}



.home-page .hero-content {


    max-width:720px;


    padding-left:80px;


}



.home-page .hero h1 {


    margin:0;


    font-size:clamp(2.5rem,5vw,4rem);


    line-height:1.1;


    font-weight:700;


}



.home-page .hero p {


    margin:

        var(--space-5)

        0;



    max-width:600px;


    font-size:1.1rem;


    line-height:1.8;


    color:rgba(255,255,255,.9);


}



.home-page .hero-buttons {


    display:flex;


    flex-wrap:wrap;


    gap:16px;


}





/* ==========================================================
   HOW IT WORKS
========================================================== */


.home-page .how-it-works {


    padding:45px 0;


    background:var(--surface);


    overflow:hidden;


}



.home-page .step {


    text-align:center;


    width:100%;


}



.home-page .step-icon {


    width:72px;

    height:72px;



    display:flex;

    justify-content:center;

    align-items:center;



    margin:

        0

        auto

        var(--space-3);



    border-radius:50%;



    background:var(--card);



    box-shadow:var(--shadow-sm);


}



.home-page .step-icon svg {


    width:34px;

    height:34px;



    fill:none;


    stroke:var(--primary);


    stroke-width:2;


    stroke-linecap:round;


    stroke-linejoin:round;


}



.home-page .step h3 {


    margin:

        0

        0

        var(--space-2);



    font-size:1.2rem;


}



.home-page .step p {


    margin:0;


    color:var(--text-muted);


    line-height:1.6;


}





/* ==========================================================
   MOBILE
========================================================== */


@media(max-width:768px){



    /* =====================
       HERO
    ===================== */


    .home-page .hero {


        min-height:auto;


        padding:

            50px

            0

            60px;


    }



    .home-page .hero-content {


        max-width:none;


        padding-left:var(--space-4);

        padding-right:var(--space-4);


        text-align:center;


    }



    .home-page .hero p {


        margin-left:auto;

        margin-right:auto;


    }



    .home-page .hero-buttons {


        flex-direction:column;


        align-items:stretch;


        width:100%;


    }



    .home-page .hero-buttons .button {


        width:100%;


    }





    /* =====================
       HOW IT WORKS
    ===================== */


    .home-page .how-it-works {


        padding:35px 0;


    }



    .home-page .how-it-works .row {


        grid-template-columns:1fr;


        gap:32px;


    }



    .home-page .how-it-works .col-3 {


        grid-column:1;


    }



    .home-page .step-icon {


        width:68px;

        height:68px;


    }



    .home-page .step-icon svg {


        width:32px;

        height:32px;


    }



}