/*--------- ÄGARENS LÄGENHET(ER) --------*/
.owner-admin-panel {box-sizing: border-box; padding: 20px; margin-bottom: 20px;}
.owner-admin-panel .edit-info {display: flex; flex-direction: column; row-gap: 12px;}
.add-rental-period, .rental-periods-list {padding-top: 20px;}

.bildorubrik {display: flex; align-items: center; flex-direction: row; margin-top: 4vh;}
.bildorubrik img {height: 80px; width: 80px; padding-right: 2vw;}
.bildorubrik h4 {margin: 0;}

.titeloknapp {align-items: baseline; display: flex; flex-direction: row; justify-content: space-between;}


/*--------- KRYSSRUTOR MED FEATURES --------*/
.apartinfo {display: flex; flex-direction: column;}
.apartinfo .features {display: flex; flex-wrap: wrap; font-size: 13px; gap: 1vh;}

.apartinfo label {align-items: center; border: 1px solid; border-radius: 5px; display: flex; padding: 6px 10px;}


/*--------- ANGE RUM OCH SOVPLATSER --------*/
.kryssrubrik, .sovplatsrubrik, .uthyrningsrubrik {margin-bottom: 4px!important;}
.room-info, .uthyrningsrubrik {padding-top: 8vh!important; margin-top: 0!important;}

.room-info span {font-size: 18px; margin-right: 10px;}
.add-bedroom, .add-livingroom {margin-right: 10px;}


.add-bedroom, .add-livingroom, .save-sleeping-places {padding: 10px 20px; font-size: 16px;}
.save-sleeping-places {margin-left: auto;}

.room-container {padding: 8px; box-sizing: border-box; margin: 10px 0;}
.room-container .titlebutton {align-items: baseline; display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 1.5vh;}
.room-container button, .delete-period {background: #bf420a!important;}
.bed-types {display: flex; flex-direction: row; justify-content: space-between; }
.sleeping-places label {font-size: 14px;}
.sleeping-places input {height: 16px; width: 32px;}


.minimum-days-container, #single-apartment-search-form, .booking-summary, .booking-summary .last {margin-bottom: 14px;}

.save-features, .room-info button, .save-minimum-days, .add-period, .update-period, .delete-period, .cleaning-fee-container button {align-items: center; flex-direction: row; height: 20px; font-size: 12px; display: inline-flex;}

.save-cleaning-fee {display: inline;}

/*--------- FORMULÄR: REGISTRERA NY UTHYRNINGSPERIOD --------*/
.minimum-days-container input {width:  50px;}
.new-period-fields {align-items: end; display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 14px;}
.labelfield {display: flex; flex-direction: column; font-size: 12px;}
.minimum-days-container input, .sleeping-places input, .labelfield input, .edit-rental-period input, .cleaning-fee-container input {border: 1px solid; font-size: 12px; margin-right: 20px; text-align: center;}

.labelfield input, .edit-rental-period input {width: 110px;}

.edit-rental-period {margin-bottom: 2px;}
.edit-rental-period input {background: #e0ffef;}

.rental-periods-list {margin-bottom: 10vh;}


/*--------- FORMULÄR: Städavgift --------*/
.cleaning-fee-container select {text-align: center;}



/*--------- LISTAN MED HITTADE LÄGENHETER --------*/
#search-results {min-height: 800px;}
.apartment-item, .alternative-dates  {display: flex; align-items: center; min-height: 130px; margin-block-end: 14px; overflow: hidden; text-decoration: none;}
.apartment-item h4 {font-size: 18px;}

.apartment-details p {margin-bottom: 6px;}
.apartment-details .wp-element-button {width: fit-content;}
.apartment-image, .alternative-dates img {padding-right: 20px; object-fit: cover;}
.apartment-details h4 {margin: 0;}
.wp-element-button, .wp-element-button, .save-features {font-size: 12px!important;}



/*--------- AUTO-INFO - IKONER SVG --------*/
.apartment-info {box-sizing: border-box; display: flex; flex-direction: row;}
.all-features {display: flex; flex-direction: row; flex-wrap: wrap; row-gap: 3vh;}
.all-features h4 {flex-basis: 100%;}
.feature {align-items: center; display: flex; flex-direction: column; justify-content: flex-start; text-align: center; width: 120px;}
.all-features svg {height: 45px; width: 45px;}


/*--------- Lista alternativa datum, när egen sökning ger inga lägenheter--------*/
.apartment-periods ul {max-height: 125px; overflow-y: scroll;}
.apartment-periods ul li {padding: 4px 13px 4px 0;}
.apartment-title-link {display: flex; flex-direction: column; margin-right: 4vw;}



.apt-form {height: fit-content; padding: 2vw;}
.book-apt {align-items: center; display: flex; flex-direction: row; box-sizing: border-box; justify-content: space-around; flex-wrap: wrap;}
.book-apt h3 {flex-basis: 100%;}


/*--------- Boka på enskild lägenhets sida --------*/
.book-apt {align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: row;}
.avail-dates {margin-right: 4vw;}
.avail-dates ul {padding: 0 0 0 18px;}
.date-inputs {box-sizing: border-box; display: flex; flex-direction: row; align-items: end; flex-wrap: wrap;}
.booking-summary input {min-width: 170px;}



/*--------- Konto-sidan (shortcode my_apartments) --------*/
.my-apartment {display: flex; flex-direction: row; justify-content: space-between; align-items: center;}


@media only screen and (max-width: 800px) {
.apartment-info {flex-direction: column;}
.all-features {justify-content: center;}
.all-features h4 {text-align: center; margin-top: 80px;}
.feature {width: 160px;}
.allrooms-info {display: flex; flex-direction: column; align-items: center;}
.book-apt {align-items: center; flex-direction: column;}
.avail-dates {margin-right: unset; text-align: center;}

}


@media screen and (max-width: 750px){
.apartment-details {padding: 2vw;}
.apartment-item, .alternative-dates {flex-direction: column; height: unset;}
.apartment-image, .alternative-dates img {max-height: 200px; padding-right: 0; width: 100%;}
.apartment-item .knappen {display: flex; justify-content: center;}

.apartment-title-link {align-items: center; flex-direction: row; padding: 25px 0;}
.apartment-title-link h5 {padding-right: 40px;}
.apartment-periods {text-align: center;}

}
        

@media only screen and (max-width: 700px) {
.labelfield {width: 40vw;}
.labelfield input {width: unset;}

/*--------- UTHYRNING PERIODER --------*/
.edit-rental-period  {padding-bottom: 30px;}
.edit-rental-period input[type="date"], .edit-rental-period input[type="number"] {width: 40vw;}

.feature {width: 110px;}
.all-features svg {height: 40px; width: 40px;}
.feature p {font-size: 12px;}
}

@media only screen and (max-width: 550px) {
.date-inputs {justify-content: center;}
#single-apartment-search-form .wp-element-button {flex-basis: 65%;  margin-top: 10px; width: 0;}
.titeloknapp {flex-direction: column; margin-bottom: 20px;}

.booking-summary input {margin-bottom: 20px; min-width: 80vw;}
.bed-types {flex-wrap: wrap;}
.sleeping-places label {margin-top: 6px; width: 30vw;}
.labelfield {width: 30vw;}

.minimum-days-container label {font-size: 14px;}
.edit-rental-period input[type="date"], .edit-rental-period input[type="number"] {width: 30vw;}

.cleaning-fee-container select {width: 170px;}
}