/*	
    Author: Jonathan Schwartz
    Purpose: Custom styles for app
*/

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@600;800&family=Open+Sans&display=swap');

*,.open-sans {
  font-family: 'Open Sans', sans-serif;
}
h1,h2,h3,h4,h5,.dosis,.wizard-title,.wizard-title p,.wizard-title span {
  font-family: 'Dosis', sans-serif;
  font-weight:600;
}
.app-title,.dosis-strong {
  font-weight:800;
}
.app-title {
  font-size:38px;
}

/* Colors */
:root {
  --body-back:#f6f6f7;
  --text-headline:#515151;
  --text-black: #515151;
  --text-nav-seen:#515151;
  --text-nav-active:#515151;
  --text-nav-inactive:#9a9a9a;
  --highlight:#00B2CA;
  --error:#BE3410;
  --warning: #F79256;
  --primary:#1D4E89;
  --secondary:#DDDDDD;
  --tertiary:#7DCFB6;
}

/* Global Things */
.input-error-required {
  border: 2px solid var(--error);
}

.hidden {
  display: none !important;
}

body {  
  margin: 0;
  padding: 0;  
  font-weight: 400;
  color:var(--text-black);
  background-color:var(--body-back);
  font-family:"Helvetica Neue";  
}
h1 {
  font-size:20px;
  color:var(--text-headline);
  font-weight:bold;
  letter-spacing: 0.2px;
}

main {
  padding: 20px;
}

.form-control.inline {
  display: inline-block;
  width: auto;
  min-width: 125px;
}

.clip-btn {
  cursor: pointer;
}

.btn.disabled {
  cursor: not-allowed;
}

.slick-slide, .slick-slide * {
  outline: none !important;
}
.pointer:not(.disabled) {
  cursor:pointer;
}
.pointer.disabled {
  cursor:not-allowed;
}
.page-item.disabled .page-link {
  color: #6c757d;  
  background-color: #dddddd;  
}
.page-item.disabled .page-link svg {
  opacity:.6;
}
.box-shadow-highlight {
  box-shadow: 0px 0px 5px 7px #eeeeee !important;
}

/* Zip Color Palette */
/*** Containerss, Panels, Buttons, and Links ***/
.btn-secondary, .btn-secondary:hover, .btn-secondary:active {
  background-color:var(--secondary) !important;
  border-color:var(--secondary) !important;
  color:var(--text-black) !important;
}

.btn-primary, .btn-primary:hover, .btn-primary:disabled, .btn-primary.disabled {
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-info, .btn-info:hover {
  background-color: var(--tertiary);
  border-color: var(--tertiary);
}
.bg-info {
  background-color: var(--tertiary) !important;
  border-color: var(--tertiary);
}
.text-info, .text-info:hover {
  color: var(--tertiary);  
}

.btn-danger, .btn-danger:hover {
  background-color: var(--error);
  border-color: var(--error);
}

.text-danger, .text-danger:hover {
  color: var(--error);  
}

.btn-warning, .btn-warning:hover {
  background-color:var(--warning);
  border-color: var(--warning);
  color: white;
}
.text-warning, .text-warning:hover {
  color:var(--warning);    
}

.highlight-selected {
  border: 1px solid var(--highlight) !important;
}
.highlight-hover:hover {  
  box-shadow: 0px 0px 5px 7px #eeeeee !important;
}
a.nohover:hover {
  text-decoration:none!important;
}
.text-warning {
  color: var(--warning);
}

.text-danger {
  color: var(--error);
}

.card {
  box-shadow: 0 0 0 1px rgb(69 79 91 / 5%), 0 1px 3px 0 rgb(69 79 91 / 15%);  
  border:none;
  padding:15px;
  border-radius: .35rem;
}
.z-icon {
  display:inline-block;    
}
.z-icon svg {  
  width:18px !important;  
}
.z-icon.medium svg {  
  width:24px !important;  
}
.z-icon.large svg {  
  width:40px !important;  
}
.z-icon.xlarge svg {  
  width:80px !important;  
}
.z-icon.light path {
  fill:#FFFFFF;  
}
.z-icon.yellow path {
  fill:#ffcb67;  
}

span[data-toggle="tooltip"] svg {
  width:14px;
}
a[data-toggle="tooltip"] svg {
  width:14px;
}

/*** Zip Status Bar ***/
.wizard-step-header-steps {
  display: flex;
  justify-content: space-between;
  text-align: center;  
  align-items:baseline;
  margin: 0px 20px;
}

.wizard-step-header-steps .wizard-step-header-step {
  width: 20%;  
  /*min-height:50px;*/
  font-size:14px;  
  color:var(--text-nav-inactive);
}

.wizard-step-header-steps .wizard-step-header-step img {
  width:40px;  
  display:none;
}

.wizard-step-header-steps .wizard-step-header-step .active-line {
  display: none;
  width: 80%;
  margin: 10px auto 0px auto;
  border: none;
  border-bottom: 2px solid #3F9DBC !important;
}

.wizard-step-header-steps .wizard-step-header-step.seen {
  cursor: pointer;  
  color:var(--text-nav-seen);
}

.wizard-step-header-steps .wizard-step-header-step.active {
  font-weight: bold;
  color:var(--text-nav-active);
}

.wizard-step-header-steps .wizard-step-header-step.active img {  
  display:unset;
}

.wizard-step-header-steps .wizard-step-header-step .step-info {
  padding:0;  
  margin: 0;
  display: block;
  font-style: italic;
  font-weight: normal;
  font-size: 12px;
  display:none;
}

/*** Zip Editor Wizard ***/
#zip-editor .zip-link-types {
  color: black;
  min-height:800px;
}
#zip-editor .zip-link-types .card {
  width:80%;
  margin-left:auto;
  margin-right:auto;
}
#zip-editor .zip-link-types .card .zip-link-type-icon svg {
  width:40px;
  display:inline-block;
  margin-right:20px;
}
.customer-dest-option {
  border:1px solid #eee;
  max-width:248px;
  margin-left:0 !important;
  margin-right:20px;
  max-width:30%;
}
.customer-dest-options.discount .customer-dest-option {
  max-width:45%;
}
.customer-dest-option.url {
  overflow: hidden;  
  transition: all 500ms;
}
.customer-dest-option.url.highlight-selected {    
  max-width:100%;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  text-align:left !important;
  justify-content:flex-start !important;
  padding-right: 40px;
}
.customer-dest-option.url.highlight-selected label {
  padding-left:5px;
}
.customer-dest-option svg {
  margin-right:0px !important;
}
#zip-editor h3.card-title {
  margin:0px 0px 5px 0px;
  display: block;
  font-size: 18px;
}
#zip-editor p.card-content {  
  font-size: 14px;
}

#zip-editor .wizard-step {
  padding: 0px;
}

#zip-editor .wizard-step .wizard-step-internal {
  padding: 0px 20px 20px 20px;
}

#zip-editor .wizard-step .wizard-title {
  font-size: 24px;
  margin-bottom: 0px;  
}

#zip-editor .wizard-step .wizard-description {
  font-size: 14px;
  max-width: 70%;
  margin: 0px auto 20px auto;
}

#zip-editor .wizard-step .wizard-description.variants {
  display: none;
}

#zip-editor #zip-publish-url {
  background-color: white;
  height:40px;
  font-weight: bold;
}

#zip-editor #slug-path-group {
  width: 95%;
  margin: 0px auto;
}

#zip-editor #slug-path-group .input-group-text {
  font-size: 12px;
  color: black;
}

#zip-editor #slug-path-group #slug {
  background-color: white;
}

#zip-editor .link-type-content {
  display: none;
}

#zip-editor[data-link-type="cart"] .link-type-content-cart {
  display: unset;
}
#zip-editor[data-link-type="cart"] .link-type-content-cart.card {
  display: flex;
}

#zip-editor[data-link-type="checkout"] .link-type-content-checkout {
  display: unset;
}
#zip-editor[data-link-type="checkout"] .link-type-content-checkout.card {
  display: flex;
}
#zip-editor[data-link-type-dest="checkout"] .link-type-content-dest-checkout {
  display: unset;
}
#zip-editor[data-link-type-dest="checkout"] .link-type-content-dest-checkout.card {
  display: flex;
}
#zip-editor[data-link-type="discount"] .link-type-content-discount {
  display: unset;
}
#zip-editor[data-link-type="discount"] .link-type-content-discount.card {
  display: flex;
}

#zip-editor[data-link-type="reorder"] .link-type-content-reorder {
  display: unset;
}
#zip-editor[data-link-type="reorder"] .link-type-content-reorder.card {
  display: flex;
}

#zip-editor #zip-publish-reorder {
  font-size: 12px;
}

/*** Discount List ***/
input#discount-code {
  width:80%;
  border:none;
}
#discount-list-codes {
  max-height: 400px;
  overflow: auto;
}

#discount-list-codes li {
  cursor: pointer;
}

#discount-list-codes li:hover {
  background-color: #eee;
}

/*** Product/Variant List ***/
#product-selector-prods, #product-selector-prods-search {
  max-height: 340px;
  overflow: auto;
}

#product-selector-prods li, #product-selector-prods-search li {
  cursor: pointer;
}

#product-selector-prods img, #product-selector-prods-search img {
  width: 40px;
  margin-right: 20px;
}

#product-selector-prods img.noimage, #product-selector-prods-search img.noimage {
  border: 1px solid #eee;
}

#product-selector-prods input, #product-selector-prods-search input {
  margin-right: 20px;
  cursor: pointer;
}

#product-selector-prods li, #product-selector-prods-search li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.prod-item-props {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  margin-top: 10px;
  text-align: left;
}

.prod-item-props .prod-item-props-detail {
  display: none;
  margin-top: 10px;
  border: 1px solid #ccc;
  background-color: #eee;
  padding: 20px;
}

.prod-item-props .prod-item-props-detail input {
  font-size: 12px;
}

.prod-item-props.active .prod-item-props-detail {
  display: block;
}

.prod-item-props .props-toggle {
  color: black;
}

.prod-item-props .props-toggle:hover {
  text-decoration: none;
}

.prod-item-selling-plan {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  margin-top: 10px;
  text-align: left;
}

.prod-item-selling-plan .prod-item-selling-plan-detail {
  display: none;
  margin-top: 10px;
  border: 1px solid #ccc;
  background-color: #eee;
  padding: 20px;
}

.prod-item-selling-plan .prod-item-selling-plan-detail input {
  font-size: 12px;
}

.prod-item-selling-plan.active .prod-item-selling-plan-detail {
  display: block;
}

.prod-item-selling-plan .selling-plan-toggle {
  color: black;
}

.prod-item-selling-plan .selling-plan-toggle:hover {
  text-decoration: none;
}

.line-item-load {
  display: none;
}

.variants-chooser {  
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.variants-chooser .secondary-picker {
  cursor: pointer;
}

.variants-chooser .wizard-next {
  margin-top: 24px;
}

.variants-chooser.line-items-selected .wizard-next {
  display: inline-block;
}

.variants-chooser .line-item {  
  background-color: #fff;  
  margin-bottom: 10px;
  position: relative;  
  width: 100%;  
}
.variants-chooser .line-item-inner {  
  text-align:left;
  width:100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.chooser-preview {    
  align-items: center;
  justify-content: center;
  border: 1px dashed #888;
  flex-direction:row;
}

.variants-chooser .line-item input.variant-check {
  display: none;
}

.variants-chooser .line-item .prod-title {
  margin: 0px;
  font-size: 15px;
  display: inline-block;
}

.variants-chooser .line-item .variant-remove {
  position: absolute;
  top: -6px;
  right: 5px;
  display: inline-block;
  cursor: pointer;
  color: #000;
  font-size: 22px;
  font-weight: bold;
}

.variants-chooser .line-item .variant-qty {
  display: inline-block;
  visibility: hidden;
  margin: 0px 20px;
  border-top:1px solid #343a40;
  border-bottom:1px solid #343a40;
}

.variants-chooser .line-item .var-title {
  margin: 0px;
  display: inline-block;
}

.variants-chooser .line-item img {
  width: 60px;
  height: 60px;
  margin-right: 10px;
  display: inline-block;
}

.variants-chooser .line-item.single .variant-qty {
  visibility: visible;
}

.variants-chooser .line-item.single.selected .prod-title {  
  font-size: 14px;
}

.variants-chooser .line-item.single.selected .variant-qty {
  display: block;
}

.variants-chooser .line-item.multi {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-right: 0px;
  text-align: left;
}

.variants-chooser .line-item.multi .prod-item-vars {
  width: 100%;
  padding: 10px 30px 10px 10px;
  margin-top: 10px;
  max-height: 330px;
  overflow: auto;
}

.variants-chooser .line-item.multi .prod-item-vars::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

.variants-chooser .line-item.multi .prod-item-vars::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5;
}

.variants-chooser .line-item.multi .prod-item-vars::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555;
}

.variants-chooser .line-item.multi .var-item {
  padding: 10px 20px 10px 10px;
  border: 1px solid #eee;
  margin: 10px 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.variants-chooser .line-item.multi .var-item input.variant-check {
  display: inline-block;
  margin-right: 10px;
}

.variants-chooser .line-item.multi .var-item input.variant-check[readonly] {
  display: none;
}

.variants-chooser .line-item.multi .var-item img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  display: inline-block;
}

.variants-chooser .line-item.multi .var-item.selected {
  background-color: #3F9DBC;
}

.variants-chooser .line-item.multi .var-item.selected .variant-qty {
  visibility: visible;
}

.variants-chooser .line-item.multi .var-item.selected .var-title, .variants-chooser .line-item.multi .var-item.selected .var-title small {
  color: white !important;
}

.variants-chooser .input-group.qty-group {
  max-width: 100px;
  width: auto;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
}

.variants-chooser .input-group.qty-group .variant-qty {
  margin: 0px;
}

.variants-chooser .input-group.qty-group .btn-qty {
  min-width: 0px !important;
}

.variants-chooser .line-item.template, .variants-chooser .var-item.template {
  display: none !important;
}
.zip-link-summary {
  min-height:300px;
  margin-bottom:20px;
}
.tall-summary .zip-link-summary {
  min-height:500px;  
}
.zip-link-summary ul {
  padding-left:15px;
}
.zip-link-summary li {
  font-size:14px;
}

/*** Zip List ***/
.zip-description {
  font-size: 12px;
}

.zip-description span {
  font-weight: bold;
}

.zip-description > ul {
  margin: 0px;
  padding-left: 20px;
  list-style-type:none;
}
.zip-description > ul > li:not(.description-item):first-child {
  display:none;
}

.zip-list .btn {
  margin-bottom: 5px;
}
.zip-list.table th {
  border:none;
}
.zip-share {
  background-color:#eeeeee;
  padding:5px;
}

/*** FAQ Page ***/
.faqs .card-body {
  cursor: pointer;
}

.faqs .card-body .faq-answer {
  display: none;
  padding: 10px;
  background: #eee;
  margin-top: 10px;
}

.faqs .card-body.active .faq-answer {
  display: block;
}

/*** Upgrade/Plans ***/
ul.features {
  list-style-type: circle;
}

ul.features li {
  font-size: 24px;
  padding: 5px;
  color: #555;
}

/*** Admin ***/
.admin-log-detail {
  font-size: 10px;
  padding: 5px;
}

.admin-stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

/*** MOBILE ***/
@media screen and (max-width: 420px) {
  .admin-stats > div {
    width: 50%;
    padding-bottom: 10px;
  }  
  main {
    width: 100%;
  }
  .zip-link-types .btn {
    width: 100% !important;
  }
  #zip-editor #slug-path-group {
    width: 100%;
    margin: 0px;
  }
  #zip-editor .wizard-description {
    max-width: 100% !important;
  }
  #zip-editor .wizard-step-internal {
    padding: 10px !important;
  }
  #zip-editor #zip-publish-url {
    font-size: 12px;
  }
  .wizard-step-header-steps {
    display: block;
  }
  .wizard-step-header-steps .wizard-step-header-step {
    width: 100%;
    padding: 2px;
    margin-bottom: 0px;
    text-align: left;
  }
  .wizard-step-header-steps .wizard-step-header-step span {
    display: none;
  }
  .wizard-step-header-steps .wizard-step-header-final {
    display: none;
    width: 100%;
  }
  #zip-editor .zip-link-types .card {
    width:100%;
  }
  input#discount-code {
    width:70%;
  }
  .customer-dest-options > .d-flex {
    flex-wrap:wrap;
  }
  .customer-dest-options .customer-dest-option {
    max-width:100% !important;
  }
}

/* Advanced Options Toggle */
.option-more-off {
  display:none;
}

/* URL Params Options UI */
.params-utm .input-group-text {
  min-width:136px;
}
.params-list {
  margin:0;
  padding:0;
  list-style-type:none;
}
.params-list li {
  margin-bottom:8px;
}
.params-list li input {
  font-size:12px;
  display:inline;
}
.params-list li .small {
  font-size:11px;
}
.params-custom li {
  display:flex;
  justify-content:space-between;
}
.params-custom input {  
  width:48%;
}


/* Nav */
#zip-nav {
  display: none;
}

body.embed #zip-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* Zip Reviews */
.zip-review-star {
  cursor:pointer;
}
.zip-review-star svg:last-child {
  display:none;
}
.zip-review-star.active svg:first-child {
  display:none;
}
.zip-review-star.active svg:last-child {
  display:inline;
}