/**
Theme Name: bozkov
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bozkov
Template: astra
*/

/* Základní styly pro kontejner */
/* Základní styly pro kontejner */
.byty-container {
    width: 100%;
    font-family: Arial, sans-serif;
    color: #333;
    background: white;
}

/* Desktop tabulka - přesně podle návrhu */
.byty-table-wrapper {
    overflow-x: auto;
    border-radius: 0;
    background: white;
}

.byty-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    font-size: 12px;
}

.byty-table thead th {
    background-color: white;
    padding: 8px 4px;
    text-align: center;
    font-weight: bold;
    font-size: 10px;
    color: #000;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.byty-table tbody td {
    padding: 12px 8px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12px;
    white-space: nowrap;
    vertical-align: middle;
}



.byty-table tbody tr {
    background: white;
    transition: all 0.2s ease;
    cursor: pointer;
}

.byty-table tbody tr:hover {
    background-color: #FDE6B2;
}

/* Stavy bytů - přesně podle návrhu */
.byty-table tbody tr.volny {
    background: white;
}

.byty-table tbody tr.volny:hover {
    background: #f0f9ff;
}

.byty-table tbody tr.rezervovany {
    background: #fff7ed;
}

.byty-table tbody tr.rezervovany:hover {
    background: #fed7aa;
}

.byty-table tbody tr.obsazeny {
    background: #fef2f2;
    opacity: 0.8;
    cursor: not-allowed;
}

.byty-table tbody tr.obsazeny:hover {
    background: #fef2f2;
}

/* První řádek - modrý border */
.byty-table tbody tr:first-child {
    border-top: 2px solid #afafaf;
}

/* Stav indikátory - kulaté tečky */
.stav-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
}

.stav-indicator::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
}

.stav-indicator.volny {
    color: #000;
}

.stav-indicator.volny::before {
    background-color: #22c55e;
}

.stav-indicator.rezervovany {
    color: #000;
}

.stav-indicator.rezervovany::before {
    background-color: #f97316;
}

.stav-indicator.obsazeny {
    color: #000;
}

.stav-indicator.obsazeny::before {
    background-color: #dc2626;
}

/* Mobilní karty */
.byty-cards {
    display: none;
    gap: 16px;
    flex-direction: column;
    padding: 16px;
}

.byt-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s;
}

.byt-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.byt-card.volny {
    border-left: 4px solid #22c55e;
}

.byt-card.rezervovany {
    border-left: 4px solid #f97316;
    background-color: #fff7ed;
}

.byt-card.obsazeny {
    border-left: 4px solid #dc2626;
    background-color: #fef2f2;
    opacity: 0.7;
    cursor: not-allowed;
}

.byt-card.obsazeny:hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.byt-cislo {
    font-size: 18px;
    font-weight: bold;
    color: #281209;
}

.card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.card-row.highlight {
    font-weight: bold;
    background-color: #f8fafc;
    margin: 0 -8px;
    padding: 8px;
    border-radius: 4px;
}

.card-row .label {
    color: #64748b;
    font-size: 13px;
}

.card-row .value {
    color: #1e293b;
    font-weight: 500;
}

/* Modal styly - přes celý web */
.byt-modal {
    display: none;
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    animation: fadeIn 0.3s;
    overflow-y: auto;
}

.modal-content {
    background-color: white;
    margin: 0;
    padding: 0;
    border-radius: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    position: relative;
    animation: slideIn 0.3s;
    overflow-y: auto;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-close {
    position: fixed;
    right: 30px;
    top: 30px;
    color: #666;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1000000;
    background: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
}

.modal-close:hover {
    color: #000;
    transform: scale(1.1);
}

.modal-header {
    padding: 40px 80px 30px 40px;
    border-bottom: 1px solid #e5e7eb;
    background: white;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.modal-header h2 {
    margin: 0 0 20px 0;
    font-size: 28px;
    color: #1e293b;
    font-weight: bold;
}

.modal-tabs {
    display: flex;
    gap: 8px;
}

.tab-btn {
    padding: 10px 24px;
    border: 1px solid #d1d5db;
    background: white;
    color: #374151;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.tab-btn.active {
    background: #92400e;
    color: white;
    border-color: #92400e;
}

.tab-btn:hover:not(.active) {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.modal-body {
    padding: 40px;
    background: white;
    min-height: calc(100vh - 200px);
    max-width: 1440px;
    margin: 0 auto;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Půdorys container - podle návrhu */
.pudorys-container {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 60px;
    align-items: start;
}

.byt-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-box {
    background: #ffffff;
    color: black;
    padding: 20px;
    border-radius: 0;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.info-row:last-child {
    margin-bottom: 0;
}

.info-label {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.info-value {
    font-size: 16px;
    font-weight: bold;
}

.parkovani-note {
    background: #fef3c7;
    color: #92400e;
    padding: 16px;
    border-radius: 0;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
    text-transform: uppercase;
}

.mistnosti-detail {
    background: #f8fafc;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.mistnost-row {
    display: grid;
    grid-template-columns: 60px 1fr 80px;
    padding: 10px 16px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
    align-items: center;
}

.mistnost-row:last-child {
    border-bottom: none;
}

.mistnost-row.total {
    background: #e5e7eb;
    font-weight: bold;
    text-transform: uppercase;
}

.mistnost-kod {
    color: #64748b;
    font-weight: bold;
    font-size: 11px;
}

.mistnost-nazev {
    color: #1e293b;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.mistnost-plocha {
    text-align: right;
    font-weight: bold;
    color: #1e293b;
}

.pudorys-image {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.pudorys-image img {
    max-width: 100%;
    height: auto;
    border: 1px solid #e5e7eb;
}

/* Kontaktní formulář - podle návrhu */
.kontakt-forma {
    max-width: 1440px;
        display: flex;
    flex-direction: row;
    padding:20px;
}

.title-col {
    width: 36%;
}

.form-col {
    width: 64%;
}
@media screen and (max-width:640px){
    .kontakt-forma {
        flex-direction: column;
    }
    .title-col {
        width: 100%;
    }
    .form-col {
        width: 100%;
    }
}

.kontakt-forma h3 {
    margin: 0 0 8px 0;
    font-size: 28px;
    color: #1e293b;
    font-weight: bold;
}

.form-subtitle {
    color: #64748b;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 6px;
    font-size: 14px;
    color: #374151;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 0;
    font-size: 14px;
    transition: border-color 0.2s;
    background: white;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
    font-family: Arial, sans-serif;
}

.form-checkboxes {
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
    line-height: 1.4;
}

.checkbox-wrapper input[type="checkbox"] {
    margin-right: 10px;
    margin-top: 2px;
    flex-shrink: 0;
}

.submit-btn {
    background: #0ea5e9;
    color: white;
    padding: 16px 32px;
    border: none;
    border-radius: 0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.submit-btn:hover {
    background: #0284c7;
}

.submit-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

/* Responzivní breakpointy */
@media (max-width: 1024px) {
    .pudorys-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .modal-body {
        padding: 30px;
    }
    
    .modal-header {
        padding: 30px 70px 20px 30px;
    }
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: flex !important;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .modal-close {
        right: 20px;
        top: 20px;
        font-size: 28px;
        width: 36px;
        height: 36px;
    }
    
    .modal-header {
        padding: 20px 60px 20px 20px;
    }
    
    .modal-header h2 {
        font-size: 24px;
        margin-bottom: 16px;
    }
    
    .modal-body {
        padding: 20px;
    }
    
    .tab-btn {
        padding: 8px 20px;
        font-size: 13px;
    }
    
    .info-box {
        padding: 16px;
    }
    
    .mistnost-row {
        grid-template-columns: 50px 1fr 70px;
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .byty-cards {
        padding: 8px;
    }

    .kontakt-forma {
        padding-bottom: 100px;
    }
}

@media (max-width: 480px) {
    .byty-table-wrapper {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .byt-card {
        margin: 0;
        border-radius: 4px;
    }
    
    .modal-close {
        right: 15px;
        top: 15px;
        font-size: 24px;
        width: 32px;
        height: 32px;
    }
}

/* Utility classes */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

/* Loading states */
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px;
    font-size: 16px;
    color: #64748b;
}

.loading-spinner::after {
    content: '';
    width: 24px;
    height: 24px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #868686;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 12px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.success-message {
    text-align: center;
    padding: 60px 40px;
    color: #059669;
}

.success-message h4 {
    margin: 0 0 20px 0;
    color: #047857;
    font-size: 24px;
}

.error-message {
    text-align: center;
    padding: 60px 40px;
    color: #dc2626;
    background: #fef2f2;
    border-radius: 4px;
    margin: 20px;
}

.swiper-pagination {
    text-align:right;
}


.byty-table tbody td.informace {
    text-align: left;
}
.card-row .btn.btn-primary,
.byty-table tbody td .btn.btn-primary {
    color: #FDE6B2;
    background: #281209;
    border:2px solid #281209;
    padding: 8px 16px;
    font-weight: bold;
    border-radius: 40px;
}
.card-row .btn.btn-primary.hover,
.byty-table tbody td .btn.btn-primary:hover { 
    color: #281209;
    background: #ffffff;
    border:2px solid #281209;
}

.card-row .btn.btn-primary {
        margin: 0 auto;
}

.cislo {
        font-size: 20px !important;
    font-weight: bold;
    letter-spacing: -1px;
}

td.cena {
    font-size: 16px !important;
    font-weight: bold;
}

.jplogo {
    display: flex;
    width: 200px;
    text-align: left;
    flex-direction: row;
    margin: 0 auto;
}

.jplogo::before {
   content: '';
   width: 40px;
   height: 40px;
   margin-top: 5px;
   margin-right: 10px;
   display: block;
   background: url(/wp-content/themes/bozkov/jp-logo.png) no-repeat center;
   background-size: contain;
}
.footer-text-design {
        font-size: 12px;
    line-height: 12px;
}