$border-color: #DDDDDD;
$hover-border-color: rgb(177, 177, 177);

.sp-location-weather-tabs-panel {

  // components title css.
  .spl-weather-component-title {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #2F2F2F;
  }

  // components default box shadow wrap.
  .spl-weather-select-field,
  .components-input-control {
    .components-input-control__backdrop {
      border-color: $border-color !important;
    }

    div:focus-within:not(:has(:is(.components-input-control__suffix):focus-within)) .components-input-control__backdrop,
    &:hover .components-input-control__backdrop {
      box-shadow: none;
      border-color: $hover-border-color !important;
    }
  }

  svg.swiper-navigation-icon {
    width: 5px;
  }

  svg.swiper-navigation-icon path {
    fill: #fff;
  }

  /* Pro badge container */
  .spl-pro-panel .spl-pro-badge {
    a {
      height: 20px;
      font-size: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      color: #fff;
      background: rgba(17, 161, 12, 1);
      padding: 4px 6px;
      border-radius: 4px;
      text-decoration: none;
      font-weight: 500;
      margin-left: 10px;

      /* Icon inside link */
      &::before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cg clip-path='url(%23clip0_19846_6595)'%3E%3Cpath d='M6.38574 3.76074C6.50346 3.97645 6.70098 4.13761 6.94336 4.18848C7.18995 4.2401 7.44217 4.16788 7.63281 3.99316C8.11984 3.54672 8.60669 3.09979 9.09375 2.65332C8.93567 3.90923 8.7782 5.165 8.62012 6.4209H1.38867C1.23059 5.165 1.07215 3.90923 0.914062 2.65332C1.40131 3.09997 1.88876 3.54655 2.37598 3.99316C2.56663 4.16792 2.81882 4.24011 3.06543 4.18848C3.30784 4.13762 3.50532 3.97644 3.62305 3.76074L5.00391 1.22754L6.38574 3.76074Z' stroke='white' stroke-width='0.84656'/%3E%3Cpath d='M8.5771 9.28125H1.43153C1.20184 9.28125 1.01562 9.05366 1.01562 8.77292V7.65625H8.99304V8.77292C8.99301 9.05366 8.8068 9.28125 8.5771 9.28125Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_19846_6595'%3E%3Crect width='10' height='10' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
      }

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

.spl-weather-component-mb {
  margin-bottom: 16px;
}

.sp-mb-8px {
  margin-bottom: 8px;
}

.splw-weather-details-slider {
  position: relative;

  .splw-weather-swiper {
    padding: 0 20px;
  }
}

.lw-title-wrapper .options-title {
  margin-right: 3px;
}

.d-none {
  display: none;
}

.location-weather-tab-panel .splw-forecast-toggle-btn {
  cursor: move;
}

div:has(>.sp-location-weather-tabs-panel) ~ div:has(>.block-editor-block-inspector__advanced) {
    display: none;
}

.spl-weather-sortable-item {
  .spl-weather-component-mb {
    margin-bottom: 10px;
  }
}

.spl-weather-popover-component.spl-weather-component-mb {
  margin-bottom: 12px;
}

.spl-weather-box-shadow-component {
  .spl-weather-units {

    button[value='Inset'],
    button[value='Outset'] {
      width: 100%;
      padding: 0 8px;
      text-transform: capitalize;
    }
  }
}

.spl-weather-block-description {
  a {
    text-decoration: none;
    font-weight: 500;
    display: inline-block;
    width: fit-content;

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

// editor hover css.
.spl-weather-country-city-name,
.spl-weather-current-time,
.spl-weather-date,
.spl-weather-card-current-temperature,
.spl-weather-condition-icon,
.spl-weather-card-short-desc,
.spl-weather-search-popup-btn,
// .spl-weather-details-wrapper,
.spl-weather-forecast-data,
.spl-weather-card-footer,
.spl-weather-sun-orbit,
.spl-weather-forecast-swiper,
.spl-weather-forecast-header-area,
.spl-weather-forecast-table-layout,
.spl-weather-card-daily-details {
  border: 1px solid transparent;
  // padding: 0 3px;

  &:hover {
    cursor: pointer;
    border: 1px solid #0082ce;
  }
}

.components-panel__body.active {
  position: relative;

  &::before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    left: 0;
    bottom: -16px;
    border: 2px solid #F26C0D;
    border-radius: 2px;
  }
}


.spl-weather-block-description a {
  display: none;
}

.block-editor-block-inspector {
  .spl-weather-block-doc-link {
    margin-top: -12px;
    a {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      column-gap: 2px;
      font-size: 12px;
      line-height: 16px;
      text-decoration: none;
      font-weight: 500;
      width: fit-content;
      margin-bottom: 22px;
      margin-left: 36px;
      color: #2271B1;
    }
  }
}

.spl-weather-current-weather-card,
.sp-location-weather-block-wrapper {
  .spl-weather-video-player {
    z-index: 0;
  }

  .spl-weather-card-location-name {
    .block-editor-inner-blocks {
      width: fit-content;

      .block-editor-block-list__layout,
      [data-type="sp-location-weather-pro/weather-search"] {
        position: unset;
      }
    }
  }
}

.location-weather-tab-panel {
  .spl-weather-video-player {
    z-index: 1;
  }
}

.spl-weather-forecast-popup {
  .spl-weather-video-player {
    z-index: -1;
  }
}

// forecast popup editor styles.
.spl-weather-forecast-popup-style-selector-component {
  .spl-weather-forecast-popup-styles {
    gap: 8px;
  }
}

.spl-weather-forecast-popup-content {
  margin: 50px auto !important;

  .spl-weather-forecast-min-temp,
  .spl-weather-forecast-max-temp {
    display: flex;
    align-items: center;
  }

  .spl-weather-forecast-max-temp {
    gap: 4px;
  }

}

.sp-location-weather-block-wrapper {
  .spl-weather-forecast-popup .spl-weather-popup-content {
    height: fit-content;
    transform: translate(50%, 180px);
    max-width: 1200px;
    border-radius: 4px;
  }
}

.interface-interface-skeleton__content:has(.spl-weather-popup-content.active) {
  z-index: 100001;
}

.editor-block-list-item-sp-location-weather-pro-map,
.editor-block-list-item-sp-location-weather-pro-accordion,
.editor-block-list-item-sp-location-weather-pro-aqi-detailed,
.editor-block-list-item-sp-location-weather-pro-historical-aqi,
.editor-block-list-item-sp-location-weather-pro-historical-wether,
.editor-block-list-item-sp-location-weather-pro-sun-moon,
.editor-block-list-item-sp-location-weather-pro-combined {
  position: relative;
  cursor: not-allowed;
}

/* Default circular badge (icon only) */
.editor-block-list-item-sp-location-weather-pro-map::before,
.editor-block-list-item-sp-location-weather-pro-accordion::before,
.editor-block-list-item-sp-location-weather-pro-aqi-detailed::before,
.editor-block-list-item-sp-location-weather-pro-historical-weather::before,
.editor-block-list-item-sp-location-weather-pro-historical-aqi::before,
.editor-block-list-item-sp-location-weather-pro-sun-moon::before,
.editor-block-list-item-sp-location-weather-pro-combined::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  font-size: 10px;
  border-radius: 50%;
  color: #fff;
  background: rgba(17, 161, 12, 1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  transition: all 0.3s ease;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 15px;
  box-sizing: border-box;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cg clip-path='url(%23clip0_19846_6595)'%3E%3Cpath d='M6.38574 3.76074C6.50346 3.97645 6.70098 4.13761 6.94336 4.18848C7.18995 4.2401 7.44217 4.16788 7.63281 3.99316C8.11984 3.54672 8.60669 3.09979 9.09375 2.65332C8.93567 3.90923 8.7782 5.165 8.62012 6.4209H1.38867C1.23059 5.165 1.07215 3.90923 0.914062 2.65332C1.40131 3.09997 1.88876 3.54655 2.37598 3.99316C2.56663 4.16792 2.81882 4.24011 3.06543 4.18848C3.30784 4.13762 3.50532 3.97644 3.62305 3.76074L5.00391 1.22754L6.38574 3.76074Z' stroke='white' stroke-width='0.84656'/%3E%3Cpath d='M8.5771 9.28125H1.43153C1.20184 9.28125 1.01562 9.05366 1.01562 8.77292V7.65625H8.99304V8.77292C8.99301 9.05366 8.8068 9.28125 8.5771 9.28125Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_19846_6595'%3E%3Crect width='10' height='10' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

/* Hover: expand + reveal text */
.editor-block-list-item-sp-location-weather-pro-map:hover::before,
.editor-block-list-item-sp-location-weather-pro-accordion:hover::before,
.editor-block-list-item-sp-location-weather-pro-aqi-detailed:hover::before,
.editor-block-list-item-sp-location-weather-pro-historical-aqi:hover::before,
.editor-block-list-item-sp-location-weather-pro-historical-weather:hover::before,
.editor-block-list-item-sp-location-weather-pro-sun-moon:hover::before,
.editor-block-list-item-sp-location-weather-pro-combined:hover::before {
  width: 50px;
  border-radius: 12px;
  background-position: 8px center;
  content: "PRO";
}

.spl-block-pro-notice {
  padding: 12px;
  text-align: left;
  border-radius: 8px;
  border: 1px solid #159E2E;
  background: #EDFAEF;
  color: #0F290E;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  /* 153.846% */
  margin-bottom: 16px;

  .spl-pro-only-title {
    color: #0E7B22;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 8px;
  }

  a {
    color: #159E2E;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;

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

  .spl-pro-notice-heading {
    color: #2F2F2F;
    font-weight: 600;
  }

  ul {
    font-size: 12px;
    margin: 2px 0 8px 0;

    li {
      margin: 0 0 3px 0;
    }
  }

  .spl-upgrade-pro-btn {
    margin-top: 14px;
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    color: #fff;
    display: flex;
    border-radius: 4px;
    background: linear-gradient(90deg, #11AB56 0%, #159E2E 65.02%);
  }
}

.spl-weather-pro-blocks-placeholder {
  border-radius: 11px;
  border: 1px solid #FFCC82;
  background: #FFF5E3;
  max-width: 846px;
  margin: 0 auto;
  padding: 32px 32px 0 32px;
  box-sizing: border-box;
  position: relative;

  .spl-weather-pro-block-placeholder-remove {
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    position: absolute;
    right: 14px;
    top: 13px;
    color: #757575;
    font-size: 18px;
  }
}

.spl-weather-pro-block-placeholder-title {
  color: #2F2F2F;
  font-size: 20px;
  font-weight: 700;
}

.spl-weather-pro-block-placeholder-desc {
  color: #2F2F2F;
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  margin-top: 12px;
}

.spl-weather-pro-plan-btn-wrapper {
  gap: 13px;
  margin-top: 34px;

  a {
    text-decoration: none;
    padding: 11px 24px;
    border-radius: 5.975px;
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    outline: none;
    transition: all .3s;

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

    &.spl-weather-pro-plan-demo-btn {
      background-color: #F26C0D;
      &:hover {
        background-color: #e9510c;
        color: #ffffff;
      }
    }

    &.spl-weather-pro-plan-upgrade-btn {
      background-color: #01B150;
      &:hover {
        background-color: #00a247;
        color: #ffffff;
      }
    }
  }
}