@import "frontend/variables";
@import "admin-dashboard";

code {
  line-height: 1.6;
}

/** === WordPress default notices === **/
.notice {
  padding: 10px;

  b {
    font-weight: bold;
  }
}

.red-bg {
  background: #ff3131 !important;
  border-color: #ff3131 !important;
  &:hover {
    background: #dc3232 !important;
    border-color: #dc3232 !important;
  }
}

.eazydocs-close-notice {
  display: inline-block;
}

a.eazydocs-close-notice:focus,
a.eazydocs-close-notice:active {
  outline: none;
  box-shadow: none;
}

.eazydocs-close-notice,
.notice ul li a {
  text-decoration: none;
}

.eazydocs-close-notice i {
  font-size: 16px;
  text-decoration: none;
  margin-top: 2px;
  margin-left: -5px;
  color: #dc3232;
}

.eazydocs-close-notice span {
  margin-left: -3px;
}

.eazydocs-close-notice:hover,
.eazydocs-close-notice {
  color: #dc3232;
  font-weight: 600;
}

.notice .notice-action {
  position: relative;
  color: #00a0d2;
}

.notice .notice-action:after {
  content: '';
  position: absolute;
  height: 2px;
  background: #00a0d2;
  width: 100%;
  left: 0;
  bottom: -2px;
}

.metabox-holder #eazydocs_basics.group {
  display: block !important;
}

#get_docs_archive, #get_docs_single, #get_docs_slug {
  text-decoration: none;
  width: 220px;
  background: #050505;
  display: block;
  color: #ffffffb3;
  text-transform: uppercase;
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 2px 2px black;
  float: left;
  margin: 0 20px 0 0;

  &:hover {
    background: #0d0e2b;
    color: white;
  }

  &:focus {
    outline: none
  }
}


/** === Codestar Fontawesome replaced with Dashicons === **/
/** Down arrow **/
.csf-field .chosen-container-single .chosen-single div b:before,
.csf-nav ul li .csf-arrow:after {
  content: "\f347";
  font-family: dashicons;
  font-size: 12px;
}

/** Cross icon **/
.csf-field .chosen-container-single .chosen-single abbr:before,
.csf-field .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:before {
  content: "\f335" !important;
  font-family: dashicons;
}

.csf-field .chosen-container-active.chosen-with-drop .chosen-single div b:before {
  content: "\f343";
  font-family: dashicons;
}

.csf-field-image_select figure:before {
  content: "\f147";
  font-family: dashicons;
  font-size: 14px;
}

/** === Codestar options / Pro Alert === **/
.csf-field-image_select figure {
  width: 100px;
}

.csf-nav .csf-tab-icon {
  font-size: 15px !important;
}

.csf-field-repeater .csf-repeater-content {
  background-color: #f7f7f78f;
}

.csf-field-image_select {
  img {
    opacity: .6;

    &:hover {
      opacity: 1;
    }
  }

  .csf--active img {
    opacity: 1;
  }
}

.csf-options {
  max-width: 1200px;
}

.csf-field-text input {
  width: 70%;
}

.csf-field {
  .csf-title {
    width: 30%;
  }

  .csf-fieldset {
    width: calc(70% - 20px);
  }

  &.csf-field-heading .csf-title {
    width: 100%;
  }
}

.csf-field-heading .csf-title {
  width: 100%;
}

body.ezd_no_promax .eazydocs-promax-notice.csf-field,
.eazydocs-pro-notice.csf-field {
  position: relative;
  cursor: pointer;
}

.csf-fieldset {
  .csf-fieldset-content {
    &[data-depend-id="footnotes_colum_opt"] {
      border: none !important;
      box-shadow: none;
      outline: none;

      .csf-field {
        float: left;
        border: none;
        padding: 0;

        &:last-child {
          min-width: 240px;
          margin-left: 25px;

          .csf-title {
            margin-top: 4px;
          }
        }
      }
    }
  }
}

body.valid.docy .active-theme-docy .csf-title,
body.valid.docy .active-theme-docy .csf-fieldset,
body.valid.docly .active-theme-docly .csf-title,
body.valid.docly .active-theme-docly .csf-fieldset,
body.valid .active-theme .csf-title,
body.valid .active-theme .csf-fieldset {
  pointer-events: inherit;
  opacity: 1;
}

body.valid.docy .active-theme-docy.csf-field::before,
body.valid.docy .active-theme-docy.csf-field::after,
body.valid.docly .active-theme-docly.csf-field::before,
body.valid.docly .active-theme-docly.csf-field::after,
body.valid .active-theme.csf-field::before,
body.valid .active-theme.csf-field::after {
  display: none;
}

// Case 1: Body NOT ezd-premium, show badge on all .eazydocs-pro-notice except those with active-theme-*
body:not(.ezd-premium) {
  .eazydocs-pro-notice.csf-field:not([class*="active-theme"]) {
    &::before {
      content: "Pro";
      background-color: #f1bd6c;
      color: #000;
      padding: 3px 10px;
      border-radius: 3px;
      margin-bottom: 10px;
    }

    &::after {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: transparent;
      z-index: 2;
    }
  }

  .eazydocs-pro-notice:not([class*="active-theme"]) .csf-title,
  .eazydocs-pro-notice:not([class*="active-theme"]) .csf-fieldset {
    opacity: 0.5;
    pointer-events: none;
  }
}

// Case 2: Body NOT valid, show badge only on eazydocs-pro-notice with active-theme-* classes
body:not(.valid):not(.ezd-premium) {
  .eazydocs-pro-notice.csf-field[class*="active-theme"] {
    &::before {
      content: "Pro";
      background-color: #f1bd6c;
      color: #000;
      padding: 3px 10px;
      border-radius: 3px;
      margin-bottom: 10px;
    }

    &::after {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: transparent;
      z-index: 2;
    }
  }

  .eazydocs-pro-notice[class*="active-theme"] .csf-title,
  .eazydocs-pro-notice[class*="active-theme"] .csf-fieldset {
    opacity: 0.5;
    pointer-events: none;
  }
}

body.ezd_no_promax {
  .eazydocs-promax-notice {
    &.csf-field::before {
      content: "Pro-Max";
      background-color: #f1bd6c;
      color: #000;
      padding: 3px 10px;
      border-radius: 3px;
      margin-bottom: 10px;
    }

    .csf-title, .csf-fieldset {
      opacity: 0.5;
      pointer-events: none;
    }
  }
}

body.ama {
  .eazydocs-pro-notice.active-theme-ama {
    .csf-title,
    .csf-fieldset {
      opacity: unset !important;
      pointer-events: unset !important;
    }
    &.csf-field::before, &.csf-field::after {
      display: none;
    }
  }
}

.upgrade-link {
  background-color: #f1bd6c;
  color: #000;
  padding: 2px 6px;
}

/** === Sweet alart === **/
h2#swal2-title {
  font-size: 28px;
  line-height: 1.2;
}

#swal2-html-container {
  font-size: 14px;
  line-height: 1.5;
}

.swal2-styled.swal2-confirm.upgrade-premium-button {
  background-color: #f1bd6c;
  outline: none;
  box-shadow: none !important;
}

.swal2-title.upgrade-premium-heading {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  margin-bottom: -15px;
}

.pro-notification-body-text {
  font-size: 15px;
  display: block;
  margin-bottom: 25px;
}

.swal2-styled.swal2-confirm.upgrade-premium-button > a {
  color: black;
  font-weight: normal;
}

.swal2-footer.notification-pro-footer-wrap {
  border-top: none;
  margin: 8px 0 0;
  padding: 0;
}

.swal2-html-container {
  line-height: 1.6;
}

#customize-controls .csf-field-image_select img {
  width: 85px;
  height: auto;
}

.notice.is-dismissible.bottom-10 {
  padding-bottom: 15px;
}

.notice-warning.eaz-notice {
  background: #ffffbe;
}

/** ONE PAGE CSS **/
body.post-type-onepage-docs .wrap .page-title-action:not(.add-onepage),
#adminmenu #toplevel_page_eazydocs ul li a:empty {
  display: none !important;
}

.ezd-select-full {
  max-width: 100% !important;
  padding: 5px 10px !important;
  font-size: 15px !important;
  font-weight: 500;
}

select#ezd_docs_select {
  max-width: 100%
}

label[for="ezd_docs_select"] {
  display: block;
  text-align: left;
  margin: 15px 0 10px;
  font-weight: 400;
  font-size: 16px;
}

label[for="ezd_docs_sidebar"] {
  display: block;
  text-align: left;
  margin: 20px 0 10px;
  font-weight: 500;
  font-size: 16px;
}

label[for="ezd_edit_docs_sidebar"] {
  display: block;
  text-align: left;
  margin: 20px 0 10px;
  font-weight: 400;
  font-size: 16px;
}

textarea#ezd_edit_docs_sidebar {
  min-height: 100px
}

body.post-type-onepage-docs .bulkactions select option:nth-child(2),
body.post-type-onepage-docs .wrap .page-title-action:not(.add-onepage),
#e-admin-top-bar-root ~ #wpbody .wrap .page-title-action:not(.add-onepage),
body.post-type-onepage-docs .type-onepage-docs .row-actions span.inline {
  display: none;
}

.ezd-blank_state {
  padding: 5em 0;
  margin: auto;
  max-width: 520px;
  text-align: center;
  color: #6d7882;
  font-family: Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;

  .title {
    font-size: 32px;
    font-weight: 700;
    margin: 10px 0;
    line-height: 1.2;
  }

  p {
    margin: 0;
  }
}

p.big-p {
  font-size: 16px;
}

.ezd-btn {
  font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  outline: none;
  border-radius: 3px;
  transition-duration: .3s;

  &.btn-lg {
    font-size: 12px;
    padding: 8px 22px;
    font-weight: 500;
  }

  &.btn-red {
    background: rgb(255, 0, 0);;
    color: #fff;
    border-color: rgb(255, 0, 0);

    &:hover {
      background: #d70202;
      border-color: #d70202;
    }
  }

  &.ezd-btn-pro:hover {
    background: #f4cc8a;
    color: #000;
    border-color: #f4cc8a;
  }

  &.ezd-btn-pro {
    background: #f1bd6c;
    color: #000;
    border-color: #f1bd6c;
  }
}

.button-inline {
  margin-top: 40px;
  display: flex;
  gap: 10px;

  .button:last-child {
    background-color: #007BFF;
    color: #fff;
    border: none;

    &:hover {
      background-color: #0056b3;
    }
  }
}

.ezd-shortcodes-wrap {
  border: 1px solid #e8e8e8;
  background: #fafafa;

  tr {
    color: #575757de;
    display: block;
    font-size: 14px;
    padding: 6px 6px;
    border-bottom: 1px solid #5757571f;

    &:nth-child(odd) {
      background: #f6f6f6
    }

    &:last-child {
      border-bottom: none
    }
  }
}

/** Date Picker **/
.daterangepicker {

   th.prev .glyphicon-chevron-left::before {
    content: "\44";
    display: block;
    font-family: 'ElegantIcons';
    font-size: 16px;
    line-height: 1;
    font-style: normal;
  }
  
  th.next .glyphicon-chevron-right::before {
    content: "\45";
    display: block;
    font-family: 'ElegantIcons';
    font-size: 16px;
    line-height: 1;
    font-style: normal;
  }
  
  .ranges {
    float: none !important;
    display: block;
    padding: 20px;

    button.applyBtn {
      padding: 5px 15px;
      font-size: 14px;
      font-weight: 500;
      border-radius: 3px;
      border: 1px solid var(--ezd_brand_color);
      background: brand_color_rgba(.8);
      color: #fff;
      margin-right: 10px;
      margin-top: 10px;
      cursor: pointer;

      &:hover {
        background: #0866ff;
      }

      &.active {
        background: #f1bd6c;
        color: #000;
        border-color: #f1bd6c;
      }
    }

    button.cancelBtn {
      padding: 5px 15px;
      font-size: 14px;
      font-weight: 500;
      border-radius: 3px;
      border: 1px solid #e8e8e8;
      background: #fafafa;
      color: #575757de;
      margin-top: 10px;
      cursor: pointer;

      &:hover {
        background: #f6f6f6;
      }
    }
  }
}


/** === Customizer === **/
.customize-pane-parent {
  li#accordion-section-shortcode_fields,
  li#accordion-section-role_manager_fields,
  li#accordion-section-design_fields,
  li#accordion-section-role_manager_fields {
    display: none !important;
  }
}

// Admin dashboard review notice
#ezd_notify_review {
  display: flex;
  gap: 20px;
  align-items: center;
  border-radius: 4px;
  border: 1px solid rgba(195, 196, 199, 0.4117647059);
  background: white;
  padding: 20px;

  p, h3 {
    margin: 0px 0 5px;
  }

  img {
    max-height: 120px;
  } 

  .action_links {
    margin: 0 0 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    a:first-child{
      color: white;
    }
  }

  .btn {
    text-decoration: none;
    font-size: 14px;
    color: #098f3e;
    font-weight: 400;

    span {
      font-weight: 500;
    }

    &:focus{
      outline: none;
      border: none;
      box-shadow: none;
    }

    &.red{
      color:red;
    }
  }
}

.ezd-migration-wrapper {
  margin: auto;
  align-items: center;
  height: 100vh;
  display: flex;
  justify-content: center;

  .ezd-migration-inner {
    padding: 50px;
    background: #ffffff;
    text-align: center;
    box-sizing: border-box;
    border-radius: 20px;

    h1 {
      font-size: 26px;
      font-weight: 600;
      margin: 15px 0 30px;
    }

    p {
      font-size: 16px;
      line-height: 1.6;
      color: #444;
      margin: 10px 0 20px;
    }

    button.button-primary {
      padding: 2px 15px;
      font-size: 16px;
      font-weight: 500;
      margin-top: 30px;
      background: var(--clr-blue);
    }

    img {
      max-width: 250px;
    }

    ul {
      margin: 20px auto 0;
      list-style: disc;
      text-align: left;
      max-width: 600px;
      padding-left: 20px;
      font-size: 15px;

      li {
        margin-bottom: 5px;
        line-height: 1.6;
      }
    }

    span {
      margin: 20px auto 30px;
      color: #888;
      font-size: 14px;
      display: block;

      a {
        text-decoration: none;
      }
    }
  }

  .ezd-migration-content {
    text-align: left;
  }
}

.migration-alert-info {
  p {
    margin: 0;
  }

  label {
    display: block;
    text-align: left;
    margin-top: 30px;

    strong {
      text-transform: uppercase;
    }
  }

  .migration-alert-text {
    border: 1px solid #c7c7c7;
    border-radius: 10px;
    text-align: left;
    margin: 20px 0 0;
    background: #fff8e1;
    border-left: 5px solid #ffc107;
    padding: 15px;
    color: #760000;
    font-size: 15px;
    box-sizing: border-box;
  }

  .migration-field-wrap {
    display: flex;
    gap: 16px;
    align-items: center;
    margin: 10px 0 0;

    fieldset {
      border: 1px solid gray;
      padding: 4px 15px;
      font-size: 16px;
      line-height: 28px;
      border-radius: 4px;
      font-weight: 500;
      background: #fdfdfd;
    }

    select#ezd_migration_options {
      padding: 3px 30px 5px 15px;
      font-size: 16px;
      line-height: 28px;
      border-radius: 4px;
      width: 60%;

      &:focus {
        outline: none;
        box-shadow: none;

      }
    }
  }

}

.ezd-collaboration-data {
    background: #fbfbfb;
    padding: 10px 0 0;
    margin-top: 12px;
    border-radius: 5px;
  .title-wrapper {
      ul {
        border-bottom: 1px solid #d9d9d9;
        padding: 0 20px;
        li {
          display: inline-block;
          margin-right: 20px;
          margin-bottom: 0;
          font-size: 16px;
          border-bottom: 2px solid transparent;
          padding-bottom: 2px;
          font-weight: 500;
          color: #c4c4c4;
          text-transform: uppercase;
          letter-spacing: .5px;
          cursor: pointer;
          &.active {
            border-color: #4b4bef;
            color: #4b4bef;
          }
      }
    }
  }
  .content-wrapper {
    .inner-content{
      .content-row{
          display: flex;
          width: 100%;
          flex-wrap: wrap;
          justify-content: space-between;
          border-bottom: 1px solid #d9d9d9;
          padding: 10px 20px;
          color: black;
          &:last-child {
            border-bottom: none;
          }
          &:first-child {
            font-weight: bold;
          }
          div {
            &:first-child {
              flex: 1;
              display: flex;
              align-items: center;
              gap: 10px;
              font-size: 16px;
              a {
                color: black;
                text-decoration: none;
                font-weight: normal;
                text-transform: capitalize;
                &:hover {
                  color: #002fff;
                }
              }
            }
            &:last-child {
              flex: 1;
              display: flex;
              justify-content: flex-end;
              align-items: center;
              text-align: center;
              li {
                list-style: none;
                min-width: 80px;
                font-size: 16px;
              }
            }
          }
          &:not(:first-child) {
            &:nth-child(even) {
              background: #ebebeb6e;
            }
          }
          .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            img {
              width: auto;
              height: auto;
              max-width: 100%;
              max-height: 100%;
            }
          }
      }
    }
  }
}
.collaboration-filter{
  li {
    &.active {
      opacity: .5;
      border-color: gray;
    }
  }
}
#collboration_chart {
    background: white;
    margin-top: 11px;
    border-radius: 8px;
}