/*

 * MallsDB.com | screen.css

 * Umistit na server jako: /css/screen.css

 */





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

   RESET

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



*, *::before, *::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    font-size: 16px;

    scroll-behavior: smooth;

}



body {

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

    font-size: 15px;

    line-height: 1.6;

    color: #222;

    background: #f4f6f9;

}



a {

    color: #1a6fc4;

    text-decoration: none;

}



a:hover {

    color: #0d4f8f;

    text-decoration: underline;

}



ul, ol {

    list-style: none;

}





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

   WRAP

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



#wrap {

    max-width: 1100px;

    margin: 0 auto;

    background: #ffffff;

    box-shadow: 0 0 40px rgba(0,0,0,0.10);

    min-height: 100vh;

}





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

   HEADER

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



#header {

    background: linear-gradient(120deg, #0f2b5b 0%, #1a4a8a 60%, #1e5ea0 100%);

    padding: 0;

}



#header-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 32px;

    height: 72px;

    gap: 24px;

}



#logo-area {

    display: flex;

    align-items: center;

    gap: 12px;

}



#logo-icon {

    width: 44px;

    height: 44px;

    background: rgba(255,255,255,0.12);

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    border: 1px solid rgba(255,255,255,0.2);

}



#logo-text {

    display: flex;

    flex-direction: column;

    gap: 1px;

}



#logo-text a {

    font-size: 1.65rem;

    font-weight: 800;

    color: #ffffff;

    letter-spacing: -0.5px;

    line-height: 1;

    text-decoration: none;

}



#logo-text a:hover {

    opacity: 0.9;

    text-decoration: none;

}



#logo-text a .logo-accent {

    color: #f5c842;

}



#slogan {

    font-size: 0.7rem;

    color: rgba(255,255,255,0.5);

    text-transform: uppercase;

    letter-spacing: 1.2px;

}



#nav ul {

    display: flex;

    gap: 4px;

}



#nav ul li a {

    display: block;

    padding: 7px 16px;

    font-size: 0.87rem;

    font-weight: 500;

    color: rgba(255,255,255,0.82);

    border-radius: 6px;

    transition: all 0.15s;

    border: 1px solid transparent;

}



#nav ul li a:hover,

#nav ul li.active a {

    background: rgba(255,255,255,0.14);

    color: #ffffff;

    border-color: rgba(255,255,255,0.18);

    text-decoration: none;

}



/* Header dekorativni pruh dole */

#header-bar {

    height: 4px;

    background: linear-gradient(90deg, #f5c842, #f59b42, #f5c842);

}





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

   BREADCRUMBS

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



#breadcrumbs {

    background: rgba(0,0,0,0.18);

    padding: 8px 32px;

    font-size: 0.81rem;

    display: flex;

    align-items: center;

    gap: 0;

    flex-wrap: wrap;

}



#breadcrumbs a {

    color: rgba(255,255,255,0.65);

    transition: color 0.15s;

}



#breadcrumbs a:hover {

    color: #f5c842;

    text-decoration: none;

}



#breadcrumbs .sep {

    color: rgba(255,255,255,0.3);

    margin: 0 8px;

    font-size: 0.75rem;

}



#breadcrumbs .current {

    color: rgba(255,255,255,0.88);

    font-weight: 500;

}





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

   HOMEPAGE

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



.home-hero {

    background: linear-gradient(135deg, #0f2b5b 0%, #1a4a8a 50%, #1e6eb5 100%);

    padding: 52px 40px 44px;

    text-align: center;

    color: #fff;

    position: relative;

    overflow: hidden;

}



.home-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

}



.home-hero h1 {

    font-size: 2.4rem;

    font-weight: 800;

    color: #ffffff;

    margin-bottom: 14px;

    letter-spacing: -0.5px;

    position: relative;

}



.home-hero p {

    font-size: 1.05rem;

    color: rgba(255,255,255,0.78);

    max-width: 540px;

    margin: 0 auto;

    line-height: 1.7;

    position: relative;

}



.stats-bar {

    display: flex;

    background: #0f2b5b;

    border-bottom: 3px solid #f5c842;

}



.stat-item {

    flex: 1;

    text-align: center;

    padding: 16px 8px;

    border-right: 1px solid rgba(255,255,255,0.07);

}



.stat-item:last-child {

    border-right: none;

}



.stat-number {

    font-size: 1.7rem;

    font-weight: 800;

    color: #f5c842;

    line-height: 1.1;

    font-variant-numeric: tabular-nums;

}



.stat-label {

    font-size: 0.73rem;

    color: rgba(255,255,255,0.55);

    text-transform: uppercase;

    letter-spacing: 0.6px;

    margin-top: 3px;

}



.home-adsense {

    padding: 20px 32px 4px;

    background: #f4f6f9;

}



.states-section {

    padding: 28px 32px 32px;

    background: #f4f6f9;

}



.states-section-title {

    font-size: 0.78rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.2px;

    color: #999;

    margin-bottom: 14px;

    display: flex;

    align-items: center;

    gap: 10px;

}



.states-section-title::after {

    content: "";

    flex: 1;

    height: 1px;

    background: #e0e4ea;

}



.states-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));

    gap: 8px;

}



.state-item a {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 14px;

    background: #ffffff;

    border: 1px solid #e0e4ea;

    border-radius: 8px;

    color: #1a1a2e;

    font-size: 0.9rem;

    font-weight: 500;

    transition: all 0.16s ease;

    box-shadow: 0 1px 3px rgba(0,0,0,0.05);

}



.state-item a:hover {

    background: #0f2b5b;

    color: #ffffff;

    border-color: #0f2b5b;

    text-decoration: none;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(15,43,91,0.25);

}



.state-icon {

    font-size: 1.1rem;

    flex-shrink: 0;

}



.home-about {

    margin: 0 32px 32px;

    padding: 22px 26px;

    background: #ffffff;

    border-radius: 10px;

    border: 1px solid #e0e4ea;

    border-left: 4px solid #1a4a8a;

}



.home-about h2 {

    font-size: 1.0rem;

    color: #0f2b5b;

    margin-bottom: 8px;

}



.home-about p {

    font-size: 0.9rem;

    color: #555;

    line-height: 1.75;

    max-width: 760px;

}





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

   CATEGORY - seznam mallu ve state

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



.category-hero {

    background: linear-gradient(120deg, #0f2b5b 0%, #1a4a8a 100%);

    padding: 38px 32px 30px;

    color: #ffffff;

}



.category-hero h1 {

    font-size: 1.9rem;

    font-weight: 800;

    color: #ffffff;

    margin-bottom: 8px;

    letter-spacing: -0.3px;

}



.category-hero p {

    font-size: 0.95rem;

    color: rgba(255,255,255,0.72);

    max-width: 580px;

}



.mall-list {

    padding: 20px 28px;

    background: #f4f6f9;

}



.mall-card {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px 18px;

    background: #ffffff;

    border: 1px solid #e0e4ea;

    border-radius: 10px;

    margin-bottom: 8px;

    transition: all 0.16s ease;

    box-shadow: 0 1px 4px rgba(0,0,0,0.05);

    cursor: pointer;

}



.mall-card:hover {

    border-color: #1a4a8a;

    box-shadow: 0 4px 16px rgba(15,43,91,0.12);

    transform: translateX(3px);

}



.mall-card-icon {

    width: 46px;

    height: 46px;

    min-width: 46px;

    background: linear-gradient(135deg, #0f2b5b, #1a6fc4);

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.3rem;

    color: #fff;

    box-shadow: 0 2px 8px rgba(15,43,91,0.3);

}



.mall-card-body {

    flex: 1;

    min-width: 0;

}



.mall-card-title {

    font-size: 1.0rem;

    font-weight: 700;

    color: #0f2b5b;

    margin-bottom: 2px;

}



.mall-card-title a {

    color: #0f2b5b;

    text-decoration: none;

}



.mall-card-title a:hover {

    color: #1a6fc4;

    text-decoration: none;

}



.mall-card-address {

    font-size: 0.83rem;

    color: #777;

}



.mall-card-meta {

    display: flex;

    gap: 6px;

    margin-top: 5px;

    flex-wrap: wrap;

}



.badge {

    font-size: 0.71rem;

    padding: 2px 9px;

    border-radius: 20px;

    font-weight: 600;

    background: #f0f2f5;

    color: #666;

    border: 1px solid #e0e4ea;

}



.badge-stores {

    background: #e8f0fb;

    color: #1a4a8a;

    border-color: #c8d8f0;

}



.mall-card-arrow {

    color: #ddd;

    font-size: 1.5rem;

    font-weight: 200;

    flex-shrink: 0;

    transition: color 0.15s;

}



.mall-card:hover .mall-card-arrow {

    color: #1a6fc4;

}



/* Adsense inline */

.adsense-block-inline {

    margin: 8px 0;

    padding: 12px;

    background: #f8f9fb;

    border-radius: 8px;

    border: 1px solid #e8eaee;

    text-align: center;

}





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

   DETAIL - stranka mallu

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



.mall-hero {

    background: linear-gradient(120deg, #0f2b5b 0%, #1a4a8a 100%);

    padding: 36px 32px 28px;

    color: #ffffff;

}



.mall-hero h1 {

    font-size: 1.85rem;

    font-weight: 800;

    color: #ffffff;

    margin-bottom: 8px;

    letter-spacing: -0.3px;

}



.mall-hero-location {

    display: flex;

    align-items: center;

    gap: 6px;

    color: rgba(255,255,255,0.7);

    font-size: 0.93rem;

}



.mall-info-strip {

    display: grid;

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

    background: #0a1f45;

    border-top: 1px solid rgba(255,255,255,0.08);

}



.mall-info-cell {

    padding: 13px 14px;

    text-align: center;

    border-right: 1px solid rgba(255,255,255,0.07);

}



.mall-info-cell:last-child {

    border-right: none;

}



.cell-label {

    font-size: 0.66rem;

    text-transform: uppercase;

    letter-spacing: 0.7px;

    color: rgba(255,255,255,0.42);

    margin-bottom: 4px;

}



.cell-value {

    font-size: 0.88rem;

    font-weight: 700;

    color: #ffffff;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.mall-body {

    display: grid;

    grid-template-columns: 1fr 290px;

    gap: 24px;

    padding: 24px 28px;

    background: #f4f6f9;

    align-items: start;

}



.mall-main, .mall-sidebar {

    min-width: 0;

}



/* Karty v obsahu */

.content-card {

    background: #ffffff;

    border: 1px solid #e0e4ea;

    border-radius: 12px;

    overflow: hidden;

    margin-bottom: 20px;

    box-shadow: 0 1px 4px rgba(0,0,0,0.05);

}



.content-card-header {

    padding: 14px 20px;

    font-size: 0.92rem;

    font-weight: 700;

    color: #0f2b5b;

    border-bottom: 1px solid #eef0f4;

    background: #f8f9fb;

    display: flex;

    align-items: center;

    gap: 8px;

}



.content-card-body {

    padding: 18px 20px;

}



.content-card-body p {

    font-size: 0.92rem;

    color: #444;

    line-height: 1.78;

}



/* Tabulka */

.info-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 0.87rem;

}



.info-table tr {

    border-bottom: 1px solid #f0f2f5;

}



.info-table tr:last-child {

    border-bottom: none;

}



.info-table td {

    padding: 8px 6px;

    vertical-align: top;

}



.info-table td:first-child {

    width: 110px;

    font-size: 0.79rem;

    text-transform: uppercase;

    letter-spacing: 0.3px;

    color: #aaa;

    white-space: nowrap;

    padding-right: 12px;

}



.info-table td:last-child {

    color: #333;

    font-weight: 500;

}



/* Mapa */

#map_canvas, #map_canvasb {

    height: 290px;

    width: 100%;

    display: block;

}



.map-credit {

    padding: 6px 14px;

    font-size: 0.74rem;

    color: #aaa;

    background: #f8f9fb;

    border-top: 1px solid #eef0f4;

}



.map-credit a {

    color: #aaa;

}



/* Stores grid */

.stores-grid {

    display: grid;

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

    padding: 8px 0;

    min-height: 60px;

}



.stores-column {

    border-right: 1px solid #f0f2f5;

}



.stores-column:last-child {

    border-right: none;

}



.stores-column ul li a {

    display: block;

    padding: 5px 16px;

    font-size: 0.86rem;

    color: #333;

    border-left: 3px solid transparent;

    transition: all 0.12s;

    line-height: 1.5;

}



.stores-column ul li a:hover {

    background: #f0f5ff;

    color: #0f2b5b;

    border-left-color: #1a4a8a;

    text-decoration: none;

    padding-left: 20px;

}





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

   SIDEBAR

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



.sidebar-widget {

    background: #ffffff;

    border: 1px solid #e0e4ea;

    border-radius: 12px;

    overflow: hidden;

    margin-bottom: 16px;

    box-shadow: 0 1px 4px rgba(0,0,0,0.05);

}



.sidebar-widget-title {

    background: #0f2b5b;

    color: #ffffff;

    padding: 11px 16px;

    font-size: 0.78rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.8px;

}



.sidebar-widget-body {

    padding: 14px 16px;

}



.adsense-block {

    margin: 0 0 16px;

    text-align: center;

    min-height: 90px;

}





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

   BRAND DETAIL - stranka obchodu

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



.brand-hero {

    background: linear-gradient(120deg, #0d2240 0%, #1a3d6e 100%);

    padding: 36px 32px 0;

    color: #ffffff;

}



.brand-hero h1 {

    font-size: 1.85rem;

    font-weight: 800;

    color: #ffffff;

    margin-bottom: 6px;

}



.brand-in-mall {

    font-size: 0.9rem;

    color: rgba(255,255,255,0.65);

    display: flex;

    align-items: center;

    gap: 6px;

    padding-bottom: 20px;

}



.brand-in-mall a {

    color: #f5c842;

    text-decoration: none;

}



.brand-in-mall a:hover {

    text-decoration: underline;

}



.brand-info-panel {

    display: flex;

    flex-wrap: wrap;

    background: #091830;

    border-top: 1px solid rgba(255,255,255,0.08);

}



.brand-info-row {

    flex: 1;

    min-width: 150px;

    padding: 13px 20px;

    border-right: 1px solid rgba(255,255,255,0.07);

}



.brand-info-row:last-child {

    border-right: none;

}



.brand-info-row .label {

    font-size: 0.66rem;

    text-transform: uppercase;

    letter-spacing: 0.7px;

    color: rgba(255,255,255,0.4);

    margin-bottom: 4px;

}



.brand-info-row .value {

    font-size: 0.88rem;

    font-weight: 600;

    color: #ffffff;

}



.brand-info-row .value a {

    color: #f5c842;

    text-decoration: none;

}



.brand-body {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    padding: 24px 28px;
    background: #f4f6f9;
    align-items: start;
}

.brand-main {
    min-width: 0;
}

.brand-sidebar {
    min-width: 0;
}

/* Reklamni blok plne sirky - VEN z gridu */
.ad-fullwidth {
    padding: 16px 28px;
    background: #f4f6f9;
    text-align: center;
    overflow: visible;
    clear: both;
}

.ad-fullwidth .adsense-block {
    margin: 0 auto;
    max-width: 970px;
    min-height: 90px;
    overflow: visible;
}



.nearby-card {

    padding: 12px 16px;

    background: #ffffff;

    border: 1px solid #e0e4ea;

    border-radius: 8px;

    margin-bottom: 8px;

    transition: all 0.14s;

    box-shadow: 0 1px 3px rgba(0,0,0,0.04);

}



.nearby-card:hover {

    border-color: #1a4a8a;

    box-shadow: 0 3px 10px rgba(15,43,91,0.10);

}



.nearby-card a {

    font-weight: 600;

    font-size: 0.9rem;

    color: #0f2b5b;

    display: block;

    margin-bottom: 3px;

    text-decoration: none;

}



.nearby-card a:hover {

    color: #1a6fc4;

}



.nearby-address {

    font-size: 0.79rem;

    color: #999;

    line-height: 1.5;

}





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

   FOOTER

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



#footer-outer {

    background: #0a1830;

}



.footer-states {

    padding: 28px 32px;

    border-top: 3px solid #f5c842;

}



.footer-states h3 {

    font-size: 0.73rem;

    text-transform: uppercase;

    letter-spacing: 1.2px;

    color: rgba(255,255,255,0.35);

    margin-bottom: 14px;

}



.footer-states-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

    gap: 3px;

}



.footer-states-grid a {

    font-size: 0.81rem;

    color: rgba(255,255,255,0.5);

    padding: 3px 0;

    transition: color 0.14s;

    text-decoration: none;

}



.footer-states-grid a:hover {

    color: #f5c842;

}



#footer-bottom {

    background: #060f1f;

    color: rgba(255,255,255,0.38);

    padding: 14px 32px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 0.79rem;

    flex-wrap: wrap;

    gap: 8px;

    border-top: 1px solid rgba(255,255,255,0.05);

}



#footer-bottom a {

    color: rgba(255,255,255,0.38);

    transition: color 0.14s;

}



#footer-bottom a:hover {

    color: #f5c842;

    text-decoration: none;

}



#footer-bottom strong {

    color: rgba(255,255,255,0.6);

}





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

   RESPONSIVE

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



@media (max-width: 900px) {



    #header-top {

        padding: 0 20px;

        height: 62px;

    }



    .home-hero {

        padding: 36px 24px 28px;

    }



    .home-hero h1 {

        font-size: 1.85rem;

    }



    .mall-info-strip {

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

    }



    .mall-body, .brand-body {

        grid-template-columns: 1fr;

        padding: 18px 20px;

    }



    .states-section, .mall-list {

        padding: 18px 20px;

    }



    .mall-hero, .category-hero, .brand-hero {

        padding: 28px 20px 22px;

    }



    .stores-grid {

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

    }



    .footer-states {

        padding: 20px;

    }



    #footer-bottom {

        padding: 12px 20px;

        flex-direction: column;

        text-align: center;

    }



    #breadcrumbs {

        padding: 8px 20px;

    }



}



@media (max-width: 600px) {



    .home-hero h1 {

        font-size: 1.5rem;

    }



    .mall-info-strip {

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

    }



    .states-grid {

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

    }



    .stores-grid {

        grid-template-columns: 1fr;

    }



    .stat-number {

        font-size: 1.35rem;

    }



    #logo-text a {

        font-size: 1.35rem;

    }



    #slogan {

        display: none;

    }



    .brand-info-panel {

        flex-direction: column;

    }



}