/** Globals **/
bundle-builder-cart-box *,
bundle-builder-item-modal * {
  box-sizing: border-box;
}

/** Cart Block **/
bundle-builder-cart-box  {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--bb-border-color);
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: var(--bb-font-size, 100%);
  color: var(--bb-font-color);
  text-align: var(--bb-font-alignment, left);
  background: var(--bb-background, transparent);
  width: 100%;
}

bundle-builder-cart-box [data-bb-selector="bb-bundle-title-cost"] {
  display: flex;
  flex: 1 auto;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 12px;
}

bundle-builder-cart-box [data-bb-selector="bb-title"] {
  flex-grow: 1;
  padding-right: 16px;
}

bundle-builder-cart-box [data-bb-selector="bb-title"],
bundle-builder-cart-box [data-bb-selector="bb-price"] {
  font-weight: bold;
  font-size: 110%;
  border: none;
  text-align: left;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  border: 0;
}

bundle-builder-cart-box [data-bb-selector="bb-price"] {
  white-space: nowrap;
}

bundle-builder-cart-box [data-bb-selector="bb-view"] {
  cursor: pointer;
  color: var(--bb-button-color);
  background: var(--bb-button-background, transparent);
  align-self: flex-start;
  padding: 0.5rem 1rem;
  border-radius: var(--bb-button-radius);
  border: 1px solid var(--bb-border-color);
}

bundle-builder-cart-box [data-bb-selector="bb-view"]:hover {
  opacity: 0.8;
}

/* Modal */
bundle-builder-item-modal [data-bb-selector="modal-container"] {
  pointer-events: all;
  display: flex;
  position: fixed;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 99999;
}
bundle-builder-item-modal [data-bb-selector="underlay"] {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  background-color: #333;
  opacity: 0;
  transition: opacity 250ms ease-in-out;
  display: block;
}
[data-bb-animate="open"] [data-bb-selector="underlay"] {
 opacity: 0.5;
}
bundle-builder-item-modal [data-bb-selector="modal-inner"] {
  display: flex;
  flex-direction: column;
  width: 95%;
  max-width: 1080px;
  max-height: 85%;
  background: var(--bb-modal-background, #ffffff);
  color: var(--bb-modal-font-color, #000000);
  z-index: 999;
  margin-top: 0;
}
@media only screen and (max-width: 1023px) {
  bundle-builder-item-modal [data-bb-selector="modal-inner"] {
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    max-width: 100%;
    max-height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
  }
  [data-bb-selector="underlay"] {
    display: none;
  }
}
bundle-builder-item-modal [data-bb-selector="modal-header"] {
  display: flex;
  padding: 20px;
  border-bottom: 2px solid var(--bb-modal-border-color, #C4C4C4);
}
bundle-builder-item-modal [data-bb-selector="modal-footer"] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;
  border-top: 2px solid var(--bb-modal-border-color, #C4C4C4);
}

bundle-builder-item-modal [data-bb-selector="modal-total"] {
  flex-grow: 1;
  font-size: 18px;
  font-weight: bold;
}

bundle-builder-item-modal [data-bb-selector="modal-title"] {
  flex-grow: 1;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: initial;
  border: 0;
  margin: 0;
  padding: 0;
  text-align: left;
  line-height: 1.5;
  color: var(--bb-modal-font-color, #000000);
}
bundle-builder-item-modal [data-bb-selector="modal-content"] {
 flex-grow: 1;
 padding: 20px;
 overflow-x: auto;
 /* opacity: 1; */
 transition: opacity .3s ease;
}

[data-bb-selector="done"],
[data-bb-selector="modal-close-x"],
[data-bb-line-item-card-action] {
  cursor: pointer;
}

[data-bb-selector="modal-close-x"] > svg > path {
  fill: var(--bb-modal-font-color, #000000);
}

bundle-builder-item-modal [data-bb-selector="done"] {
  color: var(--bb-button-color);
  background: var(--bb-button-background, transparent);
  padding: 0.5rem 1rem;
  border-radius: var(--bb-button-radius);
}

bundle-builder-item-modal [data-bb-selector="done"]:hover {
  opacity: 0.8;
}

/* ANIMATE */
[data-bb-animate="open"] [data-bb-selector="modal-inner"] {
  -moz-animation: slideUp 0.5s ease;
  -webkit-animation: slideUp 0.5s ease;
  animation: slideUp 0.5s ease;
  animation-fill-mode: forwards;
}

[data-bb-animate="close"] [data-bb-selector="modal-inner"] {
  -moz-animation: slideDown 0.5s ease;
  -webkit-animation: slideDown 0.5s ease;
  animation: slideDown 0.5s ease;
  animation-fill-mode: forwards;
}

/* slide Anim */

@-webkit-keyframes slideUp {
  from {margin-top: 80vh; opacity: 0;} to { margin-top: 0px; opacity: 1;}
}
@-moz-keyframes slideUp {
  from {margin-top: 80vh; opacity: 0;} to { margin-top: 0px; opacity: 1;}
}
@keyframes slideUp {
  from {margin-top: 80vh; opacity: 0;} to { margin-top: 0px; opacity: 1;}
}

@-webkit-keyframes slideDown {
  from {margin-top: 0; opacity: 1 } to { margin-top: 80vh; opacity: 0 }
}
@-moz-keyframes slideDown {
  from {margin-top: 0; opacity: 1 } to { margin-top: 80vh; opacity: 0 }
}
@keyframes slideDown {
  from {margin-top: 0; opacity: 1 } to { margin-top: 80vh; opacity: 0 }
}

/** Line Item Card **/

bundle-builder-line-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 16px;
  border: 2px solid var(--bb-modal-border-color, #c4c4c4);
  padding-top: 16px;
  border-radius: 4px;
  box-shadow: -4px -4px 12px rgba(0,0,0,0.1);
  transition: opacity 20ms ease;
  background-color: var(--bb-modal-item-background, transparent);
}

bundle-builder-line-card [data-bb-selector="line-item-card-header"] {
  display: flex;
  width: 100%;
}

bundle-builder-line-card [data-bb-selector="line-item-card-details"] {
  display: flex;
  width: 100%;
}

@media only screen and (max-width: 767px) {
  bundle-builder-line-card [data-bb-selector="line-item-card-details"] {
    flex-direction: column;
  }
}

bundle-builder-line-card [data-bb-selector="line-item-card-title"] {
  color: var(--bb-modal-font-color, #000000);
  padding: 0;
  margin: 0;
  border: 0;
  text-align: left;
  letter-spacing: initial;
}

bundle-builder-line-card [data-bb-selector="line-item-card-title-price"] {
  flex-grow: 1;
  font-size: 18px;
  font-weight: bold;
}


bundle-builder-line-card [data-bb-selector="line-item-card-price"] {
  font-weight: normal;
  margin-bottom: 8px;
  margin-top: 8px;
}

bundle-builder-line-card [data-bb-selector="line-item-card-actions"] {
  display: flex;
  align-self: flex-start;
  flex-wrap: wrap;
}

bundle-builder-line-card [data-bb-line-item-card-action] {
  opacity: 0.8;
  margin-bottom: 8px;
}
bundle-builder-line-card [data-bb-line-item-card-action] span {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 8px;
  padding-top: 8px;
  border-right: 1px solid #ccc;
}

bundle-builder-line-card [data-bb-line-item-card-action]:last-child span {
  border-right: 0px;
}

bundle-builder-line-card [data-bb-selector="line-item-bundle-contents"] {
  padding: 8px;
  background-color: var(--bb-modal-item-content-background, #f1f1f1);
  display: flex;
  flex-wrap: wrap;
}

bundle-builder-line-card [data-bb-selector="line-item-card-thumnail-wrapper"] {
  margin-right: 16px;
  margin-left: 16px;
  margin-bottom: 16px;
}

@media only screen and (max-width: 767px) {
  bundle-builder-line-card [data-bb-selector="line-item-card-thumnail-wrapper"] {
    margin-right: 8px;
    margin-left: 8px;
    margin-bottom: 8px;
  }
}

bundle-builder-line-card [data-bb-selector="line-item-thumbnail"] {
  width: 120px;
  height: auto;
}

bundle-builder-line-card [data-bb-selector="line-item-card-contents"] {
  display: flex;
}

bundle-builder-line-card [data-bb-selector="line-item-card-contents-item"] {
  display: flex;
  max-width: calc(25% - 8px);
  flex: 1 auto;
  margin: 4px;
  margin-bottom: 8px;
  border: 1px solid var(--bb-modal-border-color, #c4c4c4);
  background-color: var(--bb-modal-item-product-background, #fff);
  padding: 8px;
  border-radius: 4px;
}

@media only screen and (max-width: 1023px) {
  bundle-builder-line-card [data-bb-selector="line-item-card-contents-item"] {
    max-width: calc(33% - 8px);
  }
}
@media only screen and (max-width: 767px) {
  bundle-builder-line-card [data-bb-selector="line-item-card-contents-item"] {
    max-width: calc(50% - 8px);
  }
}
@media only screen and (max-width: 564px) {
  bundle-builder-line-card [data-bb-selector="line-item-card-contents-item"] {
    max-width: calc(100% - 8px);
  }
}

bundle-builder-line-card [data-bb-selector="line-item-card-contents-thumbnail"] {
  width: 80px;
  min-width: 80px;
  margin-right: 16px;
}

bundle-builder-line-card [data-bb-selector="line-item-card-contents-thumbnail-image"] {
  width: 100%;
  height: auto;

}

bundle-builder-line-card [data-bb-selector="line-item-card-contents-details-title"] {
  font-size: 14px;
  opacity: 0.8;
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 1.5;
  text-align: left;
  letter-spacing: initial;
}
bundle-builder-line-card [data-bb-selector="line-item-card-contents-qty"] {
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 8px;
  font-weight: bold;
}

/* Accodion */
[data-bb-selector="line-item-bundle-accordion"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
[data-bb-selector="line-item-bundle-accordion"] [data-bb-selector="chevron-icon"] {
  transition: transform .3s ease-in-out;
}
[data-bb-selector="line-item-bundle-accordion"][open] [data-bb-selector="chevron-icon"] {
  transform: rotate(180deg);
}
[data-bb-selector="line-item-bundle-accordion"] summary {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  padding: 8px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
[data-bb-selector="line-item-bundle-accordion"] summary:hover {
  opacity: 1;
}

[data-bb-selector="line-item-bundle-accordion"][open] summary {
  border-bottom: 1px solid #ccc;
}
/* Loading bar */

[data-bb-selector="loading-bar"] {
  width: 100%;
  min-width: 100%;
  height: 5px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

[data-bb-selector="loading-indicator"] {
  animation: SPAN-SPACE 3s infinite;
  text-indent: -999em;
  display: block;
  border-radius: 4px;
  background-color: #cccccc;
  background-image: linear-gradient(144deg, #555, #666 48%, #444);
}
@keyframes SPAN-SPACE{
  0%   { width: 0%; opacity: 1}
  75% {width: 100%; opacity: 0.8}
  100% { width: 0%; opacity: 1}
}

[data-bb-selector="composed-image-block"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  padding: 0px;
  margin-right: 8px;
}
[data-bb-selector="composed-sub-thumbnail"] {
  max-width: 50%;
  padding: 2px;
  text-indent: 0px;
  margin: 0px;
  flex: 1 auto;
}
[data-bb-selector="composed-sub-thumbnail"] img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--bb-modal-border-color, #C4C4C4);
}
[data-bb-selector="dots"] {
  flex-grow: 1;
  background-color: #333;
  min-height: 50%;
}

/* Theme editor alert */
#bundle-builder-editor-alert {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ebf9fc;
  border-top: solid 1px #98c6cd;
  color: black;
  padding: 1rem;
  z-index: 10000;
}

#bundle-builder-editor-alert .bundle-builder-editor-alert-content {
  display: flex;
}

#bundle-builder-editor-alert .bundle-builder-editor-alert-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 1rem;
  margin-top: 0.25rem;
  fill: #00a0ac;
}

#bundle-builder-editor-alert .bundle-builder-editor-alert-title {
  font-weight: bold;
  font-size: 120%;
}

#bundle-builder-editor-alert .bundle-builder-editor-alert-buttons {
  margin-top: 1rem;
}

#bundle-builder-editor-alert .bundle-builder-editor-alert-button-primary {
  background-color: #ebf9fc;
  border: solid 1px #98c6cd;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
}

#bundle-builder-editor-alert .bundle-builder-editor-alert-button-primary:hover {
  background-color: #e4f7fa
}

#bundle-builder-editor-alert .bundle-builder-editor-alert-button-secondary {
  border: none;
  color: black;
  outline: none;
  background: none;
  margin-left: 1rem;
}

#bundle-builder-editor-alert .bundle-builder-editor-alert-button-secondary:hover {
  text-decoration: underline;
}

.bundle-builder-no-accelerated-checkout [data-shopify="dynamic-checkout-cart"] {
  display: none;
}