/** Tänne määritellään responsiiviset css-tyylit, latautuu rajaplug.css:än jälkeen */



/* YLEISET */

/* Facettien koot (leveys ja korkeus) vaihtelevat hieman satunnaisesti skaalattaessa */
.facet-controls .facetwp-facet input.facetwp-location {
  min-width: 330px;
  height: 100%;
}
.facet-controls .fs-label-wrap {
  min-height: 60px;
}
.facet-controls select {
  min-height: 60px;
}
.facet-controls>button {
  min-height: 60px;
  --margin-top:10px;
}

.offer-response-container .facetwp-template {
  overflow: auto;
}

/* rating-tähdet eivät ole täysin keskellä  */
.offer-request-col.orc-rating-col {
  justify-content: center;
}

/* painikkeissa näyttäisi ettei teksti ole keskellä painiketta */
input.btn.btn-primary,
.btn.btn-yellow {
  padding: 1.5rem 3rem 1.25rem;
}

.services-container {
  max-width: max-content;
  max-width: 39rem !important;
  width: auto !important;
}

/* yleisiä marginkorjauksia */
.google-wrapper {
  margin: 1rem 0 !important;
}

/* tällaiset hieman huonoja ratkaisuja mobiilin kannalta */
.vehicle-details .form-input-field, .service-details .form-input-field {
  margin: 0 !important;
}
.parts-details .right-col, .rental-dates .right-col {
  margin-left: 1rem;
}
/* pitäisi pyrkiä ennemmin tällaiseen rakenteeseen */
.right-col,
#dropdown-container {
  gap: 1rem;
}
.vehicle-details, .service-details, .login-details, .parts-details, .tos-details, .rental-additional-parts, .rental-dates {
  gap: 1rem;
}
.parts-details .right-col,
.rental-dates .right-col,
.rental-additional-parts .right-col {
  margin-left: 0;
}

/* checklistin hallintanapit ovat kiinni listassa */
.single-content.entry-content .check-controls {
  margin: 1rem 0;
}

/* onko määritellyllä min-heightilla jokin tarkoitus? */
.single-offer-response-container {
  min-height: 0;
}
/* korjaamon logon/kuvan tasautuminen */
.single-offer-response-container .workshop-image,
.accepted-offer-col1 .workshop-image {
  margin: auto 1rem auto 0;
}

/* painikkeelle sama marginaali, kuin lomakkeen muille osille */
.offer-response-form .form-submit {
  margin: 1rem 1rem 0;
}

.offer-request-services-block {
  margin: 1rem 1rem 0;
}
.offer-form .offer-request-services-block {
  --padding: 0 0 2rem;
  margin: 0 0 1rem;
}
.my-account-sidebar .offer-request-services-block {
  margin: 0;
  padding: 2rem 0;
}
.my-account-sidebar .offer-request-vehicle-block {
  padding: 2rem 0;
}

/* sisältöalueet eivät tunnu tasautuvan oikein, mikäli margin on VAIN vasemmalla */
@media (min-width: 781px) {
  .wp-block-column:not(:first-child) {
      margin: 0 1rem;
      min-width:800px;
  }
}
@media (min-width: 600px) and (max-width: 781px) {
  .wp-block-column:nth-child(2n) {
      margin: 0 1rem;
  }
}






.offer-request-details-mobile {
  visibility: hidden;
  height: 0;
}
.offer-request-details-desktop {
  visibility: visible;
  height: auto;
}
/* Mobiilikorjaukset */

@media all and (max-width: 1300px) {

  .offer-request-details-mobile {
    visibility: visible;
    height: auto
  }
  .offer-request-details-desktop {
    visibility: hidden;
    height: 0;
  }

  .filter-controls {
    margin: 5rem 0 2rem;
  }
  .offer-request-row {
    font-size: 14px;
  }
  .offer-request-cols {
    flex-direction: column;
  }
  .offer-request-col {
    padding: 0.25rem;
  }
  .offer-request-row.header .offer-request-col .item {
    padding: 0;
  }
  input.btn.btn-primary, a.btn.large-button, .btn.btn-yellow {
    font-size: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 4px;
  }


  .offer-request-col.orc-rating-col {
    align-items: flex-start;
    margin: 1rem 0;
  }
  .offer-request-col.orc-button-col {
    align-items: flex-start;
    margin: 0;
  }


  .offer-requests-container .offer-request-row.header {
    display: none;
  }
  .offer-requests-container .offer-request-cols .offer-request-col {
    width: 100%;
    flex-basis: auto;
  }
  .offer-requests-container .offer-request-cols .offer-request-col:not(:last-child) {
    --margin-bottom: 2rem;
  }
  .offer-requests-container .offer-request-cols .offer-request-col-1,
  .offer-requests-container .offer-request-cols .offer-request-col-2,
  .offer-requests-container .offer-request-cols .offer-request-col-3,
  .offer-requests-container .offer-request-cols .offer-request-col-4 {
    padding-bottom: 2rem;
    border-bottom: solid 1px #718096;
  }
  .offer-requests-container .offer-request-cols .offer-request-col:before {
    display: block;
    /*background: #edf2f7;*/
    /*color: #718096;*/
    font-size: 16px;
    font-weight: 600;
    /*padding-bottom: 10px;*/
    /*border-bottom: solid 1px #718096;*/
    margin-bottom: 10px;
  }
  .offer-requests-container .listing .offer-request-cols .offer-request-col-1:before {
    --content: "Ajoneuvo";
  }
  .offer-requests-container .offer-request-cols .offer-request-col-1:before {
    content: unset;
  }
  .offer-requests-container .offer-request-cols .offer-request-col-2:before {
    content: "Huoltokohteet";
  }
  .offer-requests-container .offer-request-cols .offer-request-col-3:before {
    content: "Tarjouksien määrä";
  }
  .offer-requests-container .offer-request-cols .offer-request-col-4:before {
    content: "Jätetty";
  }
  .offer-requests-container .offer-request-cols .offer-request-col-5:before {
    content: "Sijainti";
  }

  .offer-requests-container .rental-request-row.listing .offer-request-cols .offer-request-col-1.show-mobile-make:before {
    content: "Ajoneuvo";
  }
  .offer-requests-container .rental-request-row.listing .offer-request-cols .offer-request-col-1:before {
    content: unset;
  }
  .offer-requests-container .rental-request-row.listing .offer-request-cols .offer-request-col-2:before {
    content: "Tarjouksien määrä";
  }
  .offer-requests-container .rental-request-row.listing .offer-request-cols .offer-request-col-3:before {
    content: "Ajankohta";
  }
  .offer-requests-container .rental-request-row.listing .offer-request-cols .offer-request-col-4:before {
    content: "Jätetty";
  }
  .offer-requests-container .rental-request-row.listing .offer-request-cols .offer-request-col-5:before {
    content: "Sijainti";
  }

  /* huolto */
  .offer-requests-container .service-request-row.listing .offer-request-cols .offer-request-col-1.show-mobile-make:before {
    content: "Ajoneuvo";
  }  
  .offer-requests-container .service-request-row .offer-request-cols .offer-request-col-1:before {
    content: unset;
  }
  .offer-requests-container .service-request-row .offer-request-cols .offer-request-col-2:before {
    content: "Huoltokohteet";
  }
  .offer-requests-container .service-request-row .offer-request-cols .offer-request-col-3:before {
    content: "Tarjouksien määrä";
  }
  .offer-requests-container .service-request-row .offer-request-cols .offer-request-col-4:before {
    content: "Jätetty";
  }
  .offer-requests-container .service-request-row .offer-request-cols .offer-request-col-5:before {
    content: "Sijainti";
  }



  .offer-requests-container input.btn.btn-primary,
  .offer-requests-container a.btn.large-button {
    width: fit-content;
  }
  .offer-requests-container a.btn.link-only {
    align-self: flex-start;
  }
}

@media all and (max-width: 1200px) {
  /* seuraa mihin kaikkialle vaikuttaa !!!!!!!!!!!!!!!!!!!! */
  .wp-block-columns {
    display: grid;
  }
  .flex-col-sidebar {
    margin: 0 2rem 4rem;
    margin: 0 1rem 4rem;
    padding-bottom: 4rem;
    border-bottom: 3px solid #3182ce;
  }
  .offer-form .flex-col-sidebar {
    padding-bottom: 2rem;
    border: 0;
  }

  .single-content .facet-controls {
    flex-direction: column;
  }
  .single-content .facetwp-facet {
    margin-bottom: 1rem;
  }

  .offer-request-col.orc-logo-col {
    width: 6rem;
    padding-right: 7rem;
  }
  .rating-diamonds {
    display: flex;
    --width: 150px;
  }
  .offer-workshop-container .offer-request-col.orc-button-col {
    width: 12rem;
  }

  input.btn.btn-primary.side-floated {
    position: relative;
    margin-left: 0;
  }

}

@media all and (max-width: 1024px) {
  .offer-request-col.orc-info-col {
    width: 14rem;
  }
  .rating-widget-container {
    --width: 12rem;
  }
  .rating-diamonds {
    --width: 120px;
  }

  .vehicle-details, .service-details, .login-details, .parts-details, .tos-details {
    flex-direction: column;
  }
  .vehicle-details .row-header,
  /*.service-details .row-header,*/
  .login-details .row-header,
  .parts-details .row-header,
  .tos-details .row-header {
    margin: 0 .5rem;
    white-space: nowrap;
  }
}

@media all and (max-width: 900px) {
  .offer-workshop-container .offer-request-cols {
    display: grid;
    grid-template-areas:
    'logo info button'
    'logo rating empty';
  }
  .orc-logo-col {
    grid-area: logo;
  }
  .orc-info-col {
    grid-area: info;
  }
  .orc-rating-col {
    grid-area: rating;
  }
  .orc-button-col {
    grid-area: button;
  }
  .offer-request-col.orc-rating-col {
    align-items: flex-start;
  }
}

@media all and (max-width: 800px) {
  h1 {
    font-size: 24px !important;
  }

  /* missä kaikkialla vaikuttaa? */
  .form-input-field.half-width {
    width: 100%;
  }
  .form-input-field.half-two-fifth-width,
  .form-input-field.half-three-fifth-width {
    width: 50%;
  }
  /* poistetaan jos ei tarvita näin tarkkoja määrityksiä */
  .my-account-workshop-display-info-form .half-width {
    width: 100%;
  }
  .my-account-workshop-display-info-form .half-two-fifth-width,
  .my-account-workshop-display-info-form .half-three-fifth-width {
    width: 50%;
  }

  .facet-controls .facetwp-facet input.facetwp-location {
    min-width: auto;
  }
  .single-content .facetwp-facet {
    flex-direction: column;
  }
  .facet-controls .facetwp-input-wrap {
    padding: 0;
    margin-bottom: 1rem;
  }

  .single-accepted-offer-container {
    flex-direction: column;
    max-width: 100%;
  }
}

@media all and (max-width: 700px) {
  .offer-workshop-container {
    display: block;
  }
  .offer-workshop-container .offer-request-cols {
    grid-template-columns: 100%;
    grid-template-areas:
    'logo'
    'info'
    'rating'
    'button';
  }
  .offer-request-col.orc-button-col {
    width: 100%;
    align-items: flex-start;
  }
  .workshop-image {
    margin: 0;
  }
  .offer-request-col.orc-logo-col {
    width: auto;
  }
  .offer-request-col.orc-rating-col {
    min-width: auto;
  }

  .form-input-field.half-two-fifth-width,
  .form-input-field.half-three-fifth-width {
    width: 100%;
  }
  .my-account-workshop-display-info-form .half-two-fifth-width,
  .my-account-workshop-display-info-form .half-three-fifth-width {
    width: 100%;
  }


  .vehicle-details .right-col,
  .service-details .right-col,
  .login-details .right-col,
  .parts-details .right-col,
  .tos-details .right-col {
    /*flex-direction: column;*/
    display: inline-flex;
  }
  #dropdown-container {
    display: contents !important;
  }
  .vehicle-details .form-input-field, .service-details .form-input-field,
  .vehicle-details input.form-control, .service-details input.form-control {
    width: 100% !important;
  }

  .service-complete-container {
    flex-direction: column;
  }

}

@media all and (max-width: 600px) {
  /*.offer-request-vehicle-block,
  .offer-request-user-block*/
  .offer-form .offer-request-services-block {
    padding: 1rem;
  }
  .offer-request-services-block {
    padding: 2rem 0;
  }
  .rental-dates .right-col {
    display: inline;
  }
  .offer-form .flex-col-sidebar {
    margin: 0;
  }
}

@media all and (max-width: 480px) {
  .single-offer-response-container {
    max-width: 100%;
    margin: 1rem;
    padding: 0.5rem 1rem;
  }

 .collapsed p {max-width:100%;}
}

.call-to-action {
  margin: 0.5rem 1rem 0.5rem;
  padding: 1rem 0 0;
  font-style: italic;
  border-top: solid 1px #edf2f7;
  transition: all .2s ease-out;
  color: #1a202b;
}


.first-message.collapsed p:not(:first-of-type) {
  display: none;
}
.first-message.collapsed p:first-of-type {
  display: block;
  line-height: 1.6rem;
  max-height: 1.6rem;
  text-overflow: ellipsis;
  overflow: hidden;
  padding-right: 1rem;
  white-space: nowrap;
  width: 20rem;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 600000s 0s, color 600000s 0s;
}


.left-col .row-image img {
  max-width: 9rem;
}
@media (max-width: 1024px) {
  .left-col {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 1rem;
  }
  .left-col .row-image img {
      height: 3rem;
      width: auto;
  }
}
@media (max-width: 700px) {
  .left-col {
      display: flex;
      flex-direction: row;
      width: 100%;
      --justify-content: space-between;
      align-items: center;
  }
}

.rp_offer_request .facetwp-facet.facetwp-facet-load_more_posts {
  text-align: center;
}
.rp_offer_request .facetwp-facet.facetwp-facet-load_more_posts button {
  margin-top: 3rem;
  margin-left: unset;
}