/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 /* Styling for modal window parcel shops*/
#pluginsdk-bring-shipping-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 50px; /* Location of the box */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  }
  
  /* Modal-content grid container */
  #pluginsdk-bring-shipping-modal-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 20px 0.5fr 1.5fr 50px;
    gap: 0px 25px;
    grid-template-areas:
      ". close"
      "map-container shop"
      "map-container list"
      ". confirm";
    background-color: #ffffff;
    margin: auto;
    padding: 10px 20px 20px 20px;
    border: 1px solid #353535;
    height: 500px;
    width: 70%;
    object-fit: cover;
  }
  
  /* Grid elements */
  #map {
    width: fit-content;
    height: fit-content;
  }

  #map-container {
  grid-area: map-container;
  border:1px solid #353535;
  
  }
  
  #shop {
    grid-area: shop;
  }
  
  #list {
    grid-area: list;
    overflow: auto;
  }
  
  
  /* Other */
  p#selected-parcelshop {
    font-weight: bold;
  }
  
  #close {
    grid-area: close;
  }

  #confirm {
    grid-area: confirm;
  }
  
  button#pluginsdk-bring-shipping-confirm-button-modal {
    margin-top: 15px;
    float:right;
  }

  button#pluginsdk-bring-shipping-close-button-modal {
    padding: 12px;
    float:right;
  }
  
  button#bring-pickup-points-search {
    margin-top: 5px;
    width: 75%;
  }
  
  .shop-name {
    font-weight: bold;
  }
  
  /* Styling for 'input' elements (parcelshop radio buttons)  in modal*/
  input.shops[type="radio"] {
    margin-right: 10px;
    transform: translateY(-20px);
  }
  
  label.shops[type="radio"] {
    display: flex;
    align-items: center;
   }
  
  input.shops[type="radio"] + label {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    border: 2px solid #ccc;
    color: #666;
    width: 90%;
    height: max-content;
  }
  
  input.shops[type="radio"]:hover + label {
    color: #555;
    background-color: #eee;
  }
  
  input.shops[type="radio"]:checked + label {
    background-color: 
    #10acef;
    border-color: 
    #10acef;
    /* color: #fff; */
  }
  
  #bring-input-zipcode-div {
    float:right;
  }
  input#bring-input-zipcode {
    width: 75%;
  }
  
  table#bring-search-field-table {
    padding-top: 0px;
  }
  
 /* .woocommerce-checkout-review-order-table tfoot th {
    background-color: #f7f7f7;
  }*/

  table#bring-search-field-table tfoot th {
    background-color: #f7f7f7;
    width:52%;
  }

/* Tweak size and positioning of the icons */
  .awesome-marker i {
    font-size: 18px;
    margin-left: 3px;
}

.opening-hours {
  font-size: small;
  font-weight: bold;
  font-style: italic;
}

/* View on devices with screen width smaller then 415px, tested on Galaxy A8 2018 with screen width 360px */

@media only screen and (max-width: 415px) {
  
  #pluginsdk-bring-shipping-modal-content {
    grid-template-columns: 1fr;
    grid-template-rows: 0.3fr 1.5fr 0.3fr 1.5fr 0.25fr;
    gap: 0px 25px;
    grid-template-areas:
      "close"
      "map-container"
      "shop"
      "list"
      "confirm";
    margin: auto;
    padding: 10px;
    height: 90%;
    width: 85%;
  }

  .opening-hours {
    font-size: x-small;
  }
}