<?php
header("Content-type: text/css; charset: UTF-8");
?>

/* ===================================== */
/* GLOBALNE                             */
/* ===================================== */

body {
    background: #ededed;
    margin: 0;
    padding: 0;
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: #666;
    text-align: center;
}
html {
    background: #e9e9e9;
}
#content h1 {
   text-align: center;
}
#content {
    font-family: 'Muli', sans-serif;
    line-height: 1.45;
}
a {
    text-decoration: none;
    color: #2c6fb3;
}

a:hover {
    text-decoration: underline;
}


/* ===================================== */
/* GÓRNY PASEK OFERTY                   */
/* ===================================== */


:root {
    --left-column: 240px;
}
.offer-header {
    display: grid;
    grid-template-columns: var(--left-column) 1fr var(--left-column);
    background: #5fa0d6;
    color: #fff;
    align-items: center;
    min-height: 30px;
}

.box::before {
    content: "";
    position: absolute;
    top: 42px;
    bottom: 0;
    left: var(--left-column);
    width: 2px;
    background: #ccc;
}

.offer-nr {
    text-align: center;
    border-right: 2px solid #fff;
    font-family: 'Muli', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
}

.sold {
    text-align: center;
    font-family: 'Muli', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
}

.price {
    text-align: center;
    padding-right: 0px;
    padding-left: 0px;
    border-left: 2px solid #fff;
    font-family: 'Muli', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
}


/* ===================================== */
/* TREŚĆ OFERTY                         */
/* ===================================== */


.clear {
    clear: both;
}
.text {
    font-family: 'Muli', sans-serif;
    overflow:hidden;
}
/* ===================================== */
/* RESPONSYWNOŚĆ                        */
/* ===================================== */

@media screen and (max-width: 1150px) {

.box {
    width:1180px;
    margin: 25px auto;
    background: #f6f6f6;
    border: 1px solid #999;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

    .image {
        float: none;
        width: 100%;
        text-align: center;
        padding: 20px 0;
    }

    .text {
        margin-left: 0;
        padding: 20px;
    }

    .offer-nr,
    .price {
        float: none;
        text-align: center;
        display: block;
    }

}
/* =============================== */
/* SEKCJA OFERT DOMÓW             */
/* =============================== */

.offer-row {
    margin-bottom: 10px;
    font-family: 'Muli', sans-serif;
    font-weight: 400;
    line-height: 1.45;
}

.bold {
    font-weight: 600;
}
.highlight {
    font-weight: 700;
    color: #3888C6;
}

.gallery-links {
    margin-top: 10px;
    font-size: 14px;
    text-align: center;
    font-family: 'Muli', sans-serif;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.gallery-links a {
    display: inline-block;
    margin: 3px 6px;
    position: relative;
}
.gallery-links a:not(:last-child)::after {
    content: "|";
    margin-left: 8px;
    color: #666;
}
.box {
    max-width: 1180px;
    width: 1180px;
    margin: 25px auto;
    background: #f6f6f6;
    border: 1px solid #999;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.box .image {
float: left;
width: var(--left-column);
padding: 20px 0;
margin-right: 20px;
text-align: center;
}


.box .image img {
    width: 170px;
    height: auto;
    border: 1px solid #aaa;
    display: block;
    margin: 0 auto;
}
.box .text {
    margin-left: 210px;
    padding: 20px 20px 20px 25px;

    text-align: left;
    line-height: 1.45;
    font-family: 'Muli', sans-serif;
    font-weight: 300;

    overflow: hidden;
}
nav {
    width: 1180px;
    margin: 0 auto;
    padding: 0;
}
#topnav {
    width: 100%;
    background-color: #FFFFFF;
    height: 32px;
    position: relative;
}

#topnav ol {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    list-style: none;
}

#topnav ol a {
    display: block;
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    color: #000;
    text-decoration: none;
}

#topnav ol > li:first-child {
    border-left: 1px dashed #044482;
}

#topnav ol > li > ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: none;
    position: absolute;
    top: 32px;
    width: 160px;
    background: #3888C6;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 1000;
}
#topnav ol > li:hover > ul {
    display: block;
}
#topnav ol > li > ul > li {
    width: 160px;
    height: 32px;
    border-top: 1px dashed #044482;
}
#topnav ol > li > ul a {
    color: #fff;
    line-height: 32px;
}
#topnav ol > li > ul > li:hover {
    background-color: #f0ebeb;
}
#topnav ol > li > ul > li:hover a {
    color: #000;
}
#container {
    min-width: 1300px;
    margin:auto;
}
#header {
    width: 1180px;
    margin: 10px auto;
    background-color: white;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}

#logo {
    float: left;
    width: 150px;
    margin-top: 20px;
}
#logo img {
    width: 127px;
    height: 127px;
    opacity: 0.8;
}
#owner {
    float: left;
    width: 150px;
    margin-top: 1px;
    text-align: right;
    opacity: 0.8;
}

#owner img {
    width: 103px;
    height: 127px;
    margin: 0;
    padding: 0;
}

#bcard {
    float: left;
    width: 880px;
    text-align: center;
    padding-top: 10px;
}
#language {
    float: right;
    margin-top: 0px;
    margin-right: 40px;
}

#bcard h1 {
    font-family: 'Muli', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 42px;
    margin-top: 40px;
    margin-bottom: 10px;
    text-align: center;
}

#topnav ol a {
    font-family: 'Muli', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    display: block;
    line-height: 32px;
    text-align: center;
}
#topnav ol > li:hover {
    background-color: #2f6fa5;
    transition: background 0.2s;
}

#topnav ol > li {
    width: 160px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 160px;
    background-color: #3888C6;
    border-right: 1px solid #2f6fa5;
}
.nav-empty {
    width: 160px;
    height: 40px;
    background: #fff;
}
.offers-title {
    font-family: 'Muli', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 42px;
    color: #666;
    margin-top: 0;
    margin-bottom: 0px;
    padding-top: 10px;
    text-align: center;
}
.negocjacja {
    font-family: 'Muli', sans-serif;
    font-weight: 700;
    color: #3888C6;
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 18px;
    letter-spacing: 1px;
}
#stopka {
    width: 1180px;
    margin: 40px auto 20px auto;
    padding: 15px 0;
    font-family: 'Muli', sans-serif;
    font-size: 14px;
    color: #666;
    text-align: center;
    border-top: 1px solid #ccc;
}
.contact-box{
    width:1180px;
    margin:30px auto;
    display:flex;
}

.contact-text{
    width:390px;
    text-align:left;
    line-height:1.6;
}

.contact-map{
    width:790px;
    text-align:right;
}

.contact-map iframe{
    width:790px;
    height:420px;
    border:1px solid #aaa;
}
.contact-photos{
    width:1180px;
    margin:40px auto;
    display:flex;
    justify-content:center;
    gap:40px;
}
.contact-photos img{
    width:100%;
    height:260px;
    object-fit:cover;
    border:1px solid #aaa;
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
}
.img-wejscie{
    object-position:top;
}
.contact-page{
    width:1180px;
    margin:0 auto;
}
.photo-box{
    width:420px;
    text-align:center;
}
.photo-box img{
    width:100%;
    height:260px;
    object-fit:cover;
    border:1px solid #aaa;
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

.img-wejscie{
    object-position:top;
}

.photo-caption{
    margin-top:8px;
    font-size:14px;
    color:#444;
}
.intro-box{
    width:1180px;
    margin:5px auto 25px auto;
    background:#ffffff;

    border:1px solid #ccc;
    border-radius:10px;

    padding:15px 25px;
    text-align:justify;
}

.intro-box p{
    margin:0 0 10px 0;
    text-indent:20px;
}

.signature{
    text-align:right;
    font-family: 'Great Vibes', cursive;
    font-size:34px;
    color:#1f4fb5;
    margin-top:10px;
}
.home-boxes{
    width:1180px;
    margin:20px auto;
    display:flex;
    gap:40px;
}

.home-card{
width:360px;
background:#fff;
border:1px solid #ccc;
border-radius:12px;
text-align:center;
text-decoration:none;
color:#000;
padding:15px;
transition:0.25s;
}

.home-card:hover{
    box-shadow:0 6px 15px rgba(0,0,0,0.2);
}

.home-title{
    font-size:22px;
    font-weight:700;
    margin-bottom:10px;
}

.home-card img{
    width:100%;
    height:auto;
    border-radius:8px;
}

.home-bottom{
    margin-top:10px;
    font-size:18px;
    font-weight:700;
    color:#3888C6;
}
.visit-counter{
    width:1180px;
    margin:20px auto 3px auto;
    text-align:center;
    font-size:12px;
    color:#3888C6;
}

.facebook-box{
    width:1180px;
    margin:0 auto 15px auto;
    text-align:center;
    padding-bottom:10px;
}

.facebook-box a{
    color:#1877F2;
    text-decoration:none;
    font-size:13px;
}

.facebook-box i{
    font-size:18px;
    margin-right:6px;
}
.box-text{
    padding:20px 25px;
}
.box-text::before{
    display:none;
}
#box3{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:25px;
    justify-items:center;
    align-items:center;
    margin-top:20px;
}

.firmy{
    text-align:center;
}

.firmy img{
    max-width:180px;
    height:auto;
}
.firmy-info{
    text-align:center;
    font-size:16px;
    margin:10px 0 20px 0;
}
.rodo-left{
    text-align:left;
    font-weight:600;
}

.rodo-right{
    padding-right:20px;
}

.rodo-right p{
    padding-bottom:12px;
    margin:0;
}
.rodo-row{
    display:grid;
    grid-template-columns:28% 72%;
    gap:30px;
    padding-bottom:18px;
    margin-bottom:18px;
    border-bottom:1px dotted #999;
}
.rodo-row:last-child .rodo-right {
    border-bottom: none;
}
.rodo-row:last-child{
border-bottom:none;
}
.rodo-row:last-child .rodo-left,
.rodo-row:last-child .rodo-right {
    border-bottom: none;
}
#update-box p{
text-align:center !important;
color:#c00000 !important;
font-weight:600;
margin:0;
}
#update-box{
text-align:center !important;
color:#c00000;
background:#fff6f6;
border:2px solid #e0a0a0;
}
.highlight-box {
    font-weight: 700;
    color:#c00000;
}
.form-row{
display:grid;
grid-template-columns:50% 50%;
align-items:center;
margin-bottom:10px;
}

.form-row label{
text-align:right;
padding-right:15px;
font-weight:600;
}

.form-row input,
.form-row select{
width:260px;
}

.form-row-full{
text-align:center;
}
.form-row-full label{
display:inline-block;
}
.form-row-full textarea{
width:50%;
height:120px;
display:block;
margin:10px auto;
}

.form-buttons{
text-align:center;
margin-top:20px;
}

.form-buttons input{
margin:0 10px;
padding:6px 18px;
}
input[type="date"]{
width:140px;
}
.age-group{
display:flex;
align-items:center;
gap:10px;
}

.age-group span{
font-size:14px;
}

.age-group input{
width:4ch;
text-align:center;
}
input[name="pesel"]{
width:11ch;
}
input[name="kod_pocztowy"]{
width:6ch;
}
.radio-group label{
display:flex;
align-items:center;
gap:5px;
font-weight:normal;
}
.radio-group{
display:inline-flex;
gap:20px;
align-items:center;
}
.radio-group input{
width:auto;
}
input[name="telefon"]{
width:11ch;
}

.upper{
text-transform:uppercase;
}
.uwagi{
width:50%;
height:120px;
display:block;
margin:10px auto;
}
textarea{
resize:vertical;
}
.pesel-ok{
border:2px solid #2ecc71;
background:#f0fff5;
}

.pesel-bad{
border:2px solid #e74c3c;
background:#fff3f3;
}
.pesel-group{
display:flex;
align-items:center;
gap:10px;
}

#pesel-error{
font-size:13px;
color:#e74c3c;
white-space:nowrap;
}

.box-text p:last-child{
margin-bottom:0;
}
.obliczsk{
margin-top:5px;
padding-top:10px;
padding-bottom:10px;
}
.obliczsk p:first-child{
margin-top:0;
}

.obliczsk p:last-child{
margin-bottom:0;
}
.obliczsk p{
margin:0;
text-indent:30px;
}
.info-tip{
position:relative;
display:inline-block;
margin-left:6px;
cursor:help;
color:#1e73be;
font-size:16px;
}

.info-tip::after{
content:attr(data-tip);
position:absolute;
left:20px;
top:-5px;
width:260px;
background:#333;
color:#fff;
padding:8px 10px;
border-radius:6px;
font-size:12px;
opacity:0;
pointer-events:none;
transition:opacity 0.2s;
z-index:9999;
}

.info-tip:hover::after{
opacity:1;
}
.info-tip{
color:red !important;
font-size:20px !important;
}
.tipicon{
color:#1e73be !important;
cursor:help;
font-size:16px;
margin-left:4px;
}
.image img{
width:260px;
height:auto;
border-radius:6px;
}
.box .sold {
    text-align: center;
    font-family: 'Muli', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
}
/* ===== WYNAJEM ===== */

.rent .offer-header {
    grid-template-columns: var(--left-column) 1fr 300px;
}

.rent .price {
    text-align: center;
    white-space: nowrap;
}
.tools{
position:absolute;
top:0;
left:0;
right:0;
display:flex;
justify-content:space-between;
background:rgba(0,0,0,0.5);
padding:2px;
}

.tools button,
.tools span{
background:none;
border:none;
color:white;
font-size:16px;
cursor:pointer;
}

.drag{
cursor:move;
}
.miniatura-oferty{
    width:170px;
    height:120px;
    object-fit:cover;
    border:1px solid #aaa;
    display:block;
    margin:0 auto;
}
/* ========================= */
/* DEBUG – ramki pomocnicze */
/* ========================= */

/*.box .image {*/
 /*   outline: 3px solid red;*/
/*}/