/*=========================================================================
# Project Overview
===========================================================================
Project Name    : Weplugins 
Author          : Weplugins
Version         : 1.0.1
Created On      : 15 January 2025
Last Updated    : 15 January 2025
Description     : This stylesheet is designed for an weplugins. 
                  Includes responsive design principles and accessibility.
===========================================================================*/

/*=========================================================================
# General Guidelines
===========================================================================
1. Follow the BEM (Block Element Modifier) naming convention.
2. Maintain a modular approach for styles.
3. Test styles across all major browsers (Chrome, Firefox, Safari, Edge).
4. Ensure proper accessibility (e.g., WCAG compliance).
===========================================================================*/

/* Embed font family
===========================================================================*/
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");

/* Variables
===========================================================================*/
:root {
  --wep-black: #000000;
  --wep-white: #ffffff;
  --wep-primary: rgb(67, 144, 255);
  --wep-secondary: #fafafa;
  --wep-success: #37b24d;
  --wep-danger: #e03131;
  /* Link */
  --wep-link-color: inherit;
  --wep-link-hover-color: inherit;

  /* Default Props */
  --wep-body-color: rgb(72, 72, 72);
  --wep-body-bg: var(--wep-white);
  --wep-body-font-family: inherit;
  --wep-body-font-size: 16px;
  --wep-body-font-weight: 400;
  --wep-body-line-height: 1.3;

  /* Border */
  --wep-border-width: 1px;
  --wep-border-style: solid;
  --wep-border-color: #dedede;

  /* Heading */
  --wep-heading-color: inherit;
  --wep-heading-font-weight: inherit;
  --wep-heading-line-height: inherit;

  /* Button */
  --wep-btn-padding-x: 12px;
  --wep-btn-padding-y: 12px;
  --wep-btn-font-size: inherit;
  --wep-btn-line-height: 1.15;
  --wep-btn-font-weight: inherit;
  --wep-btn-font-family: inherit;
  --wep-btn-color: inherit;
  --wep-btn-hover-color: inherit;
  --wep-btn-bg: transparent;
  --wep-btn-hover-bg: transparent;
  --wep-btn-width: 90px;
  --wep-btn-border-width: var(--wep-border-width);
  --wep-btn-border-color: inherit;
  --wep-btn-border-radius: 6px;
  --wep-btn-box-shadow: none;
  --wep-btn-hover-border-color: inherit;

  /* Form Control */
  --wep-form-control-height: 52px;
  --wep-form-control-padding-x: 22px;
  --wep-form-control-padding-y: 12px;
  --wep-form-control-font-size: inherit;
  --wep-form-control-line-height: 1.15;
  --wep-form-control-font-weight: inherit;
  --wep-form-control-font-family: inherit;
  --wep-form-control-border-radius: 6px;
  --wep-form-control-box-shadow: none;
  --wep-form-control-bg: rgb(255, 255, 255);
  --wep-form-control-color: rgb(72, 72, 72, 0.8);
  --wep-form-control-placeholder-color: rgb(72, 72, 72, 0.8);
  --wep-form-control-border-color: var(--wep-border-color);

  /* Form Select */
  --wep-form-select-width: 120px;
  --wep-form-select-height: 52px;
  --wep-form-select-padding-x: 22px;
  --wep-form-select-padding-y: 12px;
  --wep-form-select-font-size: inherit;
  --wep-form-select-line-height: 1.3;
  --wep-form-select-font-weight: inherit;
  --wep-form-select-font-family: inherit;
  --wep-form-select-border-radius: 6px;
  --wep-form-select-box-shadow: none;
  --wep-form-select-bg: rgb(255, 255, 255);
  --wep-form-select-color: rgba(72, 72, 72, 0.8);
  --wep-form-select-border-color: var(--wep-border-color);

  /* Dropdown Variables */
  --wep-dropdown-zindex: 100;
  --wep-dropdown-min-width: 150px;
  --wep-dropdown-padding-x: 0;
  --wep-dropdown-padding-y: 10px;
  --wep-dropdown-spacer: 8px;
  --wep-dropdown-font-size: 0.875em;
  --wep-dropdown-color: inherit;
  --wep-dropdown-bg: var(--wep-white);
  --wep-dropdown-link-color: inhert;
  --wep-dropdown-link-hover-color: inhert;
  --wep-dropdown-link-hover-bg: var(--wep-secondary);
  --wep-dropdown-border-radius: 6px;
  --wep-dropdown-box-shadow: 0 8px 13px 0 rgba(0, 0, 0, 0.28);
  --wep-dropdown-item-padding-x: 12px;
  --wep-dropdown-item-padding-y: 6px;

  /* Chip Variables */
  --wep-chip-padding-x: 8px;
  --wep-chip-padding-y: 4px;
  --wep-chip-bg: rgba(55, 133, 204, 0.15);
  --wep-chip-color: rgb(55, 133, 204);
  --wep-chip-success-bg: rgba(74, 214, 147, 0.15);
  --wep-chip-success-color: rgb(74, 214, 147);
  --wep-chip-border-radius: 4px;

  /* Other Variables */
  --wep-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

/* Browser native scrollbar
===========================================================================*/
* {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar:horizontal {
  height: 4px;
}

::-webkit-scrollbar-track {
  border-radius: 4px;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(0, 0, 0, 0.2);
}

/* Defaulting
===========================================================================*/
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 0;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

.wep-root :is(h6, h5, h4, h3, h2, h1) {
  margin-top: 0;
  margin-bottom: 0;
  /* font-weight: var(--wep-heading-font-weight);
  line-height: var(--wep-heading-line-height);
  color: var(--wep-heading-color); */
}

.wep-root a {
  text-decoration: none !important;
}

.wep-root a:hover,
.wep-root a:focus {
  outline: 0 none;
}

.wep-root a > code {
  color: inherit;
}

.wep-root a:not([href]):not([class]),
.wep-root a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

.wep-root p {
  margin-top: 0;
  margin-bottom: 0;
}

.wep-root img {
  max-width: 100%;
}

/* Map content */
/* div[data-map-content-id="true"] {
  display: none;
} */

/* Form Control
===========================================================================*/
input.wep-form-control {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--wep-form-control-padding-y) var(--wep-form-control-padding-x);
  font-size: var(--wep-form-control-font-size);
  font-family: var(--wep-form-control-font-family);
  font-weight: var(--wep-form-control-font-weight);
  line-height: var(--wep-form-control-line-height);
  color: var(--wep-form-control-color);
  min-height: var(--wep-form-control-height);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--wep-form-control-bg);
  background-clip: padding-box;
  border: var(--wep-border-width) solid var(--wep-form-control-border-color);
  border-radius: var(--wep-form-control-border-radius);
  box-shadow: var(--wep-form-control-box-shadow);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input.wep-form-control:focus {
  border-color: inherit;
  border-style: var(--wep-border-style);
  outline: 0;
}

input.wep-form-control::placeholder {
  color: var(--wep-form-control-placeholder-color);
  opacity: 1;
}

input.wep-form-control::-moz-placeholder {
  color: var(--wep-form-control-placeholder-color);
  opacity: 1;
}

.wep-input-error {
  border-color: var(--wep-danger) !important;
  box-shadow: 0 0 0 4px rgba(224, 49, 49, 0.5) !important;
}

/* Form Select
===========================================================================*/

select.wep-form-select {
  --wep-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--wep-form-select-padding-y)
    calc(var(--wep-form-select-padding-x) + 10px)
    var(--wep-form-select-padding-y) var(--wep-form-select-padding-x);
  font-size: var(--wep-form-select-font-size);
  font-family: var(--wep-form-select-font-family);
  font-weight: var(--wep-form-select-font-weight);
  line-height: var(--wep-form-select-line-height);
  color: var(--wep-form-select-color);
  min-height: var(--wep-form-select-height);
  min-width: var(--wep-form-select-width);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--wep-form-select-bg);
  background-image: var(--wep-form-select-bg-img);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: var(--wep-border-width) solid var(--wep-form-select-border-color);
  border-radius: var(--wep-form-select-border-radius);
  box-shadow: var(--wep-form-select-box-shadow);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

select.wep-form-select:focus {
  border-color: inherit;
  outline: 0;
}

/* Form Checkbox and Radio
===========================================================================*/
.wep-form-check {
  display: block;
  min-height: 1.5rem;
  padding-left: 2em;
}
.wep-form-check input.wep-form-check-input {
  float: left;
  margin-left: -1.75em;
}

input.wep-form-check-input {
  --wep-form-check-bg: var(--wep-body-bg);
  --wep-form-check-border-color: var(--wep-border-color);
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  cursor: pointer;
  vertical-align: top;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--wep-form-check-bg);
  background-image: var(--wep-form-check-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: var(--wep-border-width) solid var(--wep-form-check-border-color) !important;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
  print-color-adjust: exact;
}
input.wep-form-check-input[type="checkbox"] {
  border-radius: 2px;
}
input.wep-form-check-input[type="radio"] {
  border-radius: 50%;
}
input.wep-form-check-input:active {
  filter: brightness(90%);
}
input.wep-form-check-input:focus {
  --wep-form-check-border-color: var(--wep-primary);
  outline: 0;
  box-shadow: none;
}
input.wep-form-check-input:focus:checked,
input.wep-form-check-input:checked {
  --wep-form-check-active-bg: var(--wep-primary);
  --wep-form-check-border-color: var(--wep-primary);
  background-color: var(--wep-form-check-active-bg) !important;
}
.wep-form-check-input:checked[type="checkbox"] {
  --wep-form-check-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,1)'%3E%3Cpath d='M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z'%3E%3C/path%3E%3C/svg%3E");
}
.wep-form-check-input:checked[type="radio"] {
  --wep-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.wep-form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--wep-primary);
  border-color: var(--wep-primary);
  --wep-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.wep-form-check-input:disabled {
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}
.wep-form-check-input[disabled] ~ .wep-form-check-label,
.wep-form-check-input:disabled ~ .wep-form-check-label {
  cursor: default;
  opacity: 0.5;
}

.wep-form-check-label {
  font-weight: 400;
}

.wep-form-check-label[for] {
  cursor: pointer;
}

/* Button
===========================================================================*/

.wep-btn {
  display: inline-block;
  padding: var(--wep-btn-padding-y) var(--wep-btn-padding-x);
  font-family: var(--wep-btn-font-family);
  font-size: var(--wep-btn-font-size);
  font-weight: var(--wep-btn-font-weight);
  line-height: var(--wep-btn-line-height);
  min-width: var(--wep-btn-width);
  color: var(--wep-btn-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: var(--wep-btn-border-width) solid var(--wep-btn-border-color);
  border-radius: var(--wep-btn-border-radius, 6px);
  box-shadow: var(--wep-btn-box-shadow);
  background-color: var(--wep-btn-bg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.wep-btn:hover,
.wep-btn:focus {
  color: var(--wep-btn-hover-color);
  background-color: var(--wep-btn-hover-bg);
  border-color: var(--wep-btn-hover-border-color);
}

.wep-btn-primary {
  --wep-btn-color: var(--wep-white);
  --wep-btn-bg: var(--wep-primary);
  --wep-btn-border-color: var(--wep-primary);
  --wep-btn-hover-color: var(--wep-white);
  --wep-btn-hover-bg: #5fa1ff;
  --wep-btn-hover-border-color: #5fa1ff;
}

.wep-btn-filter {
  --wep-btn-filter-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --wep-btn-color: rgb(72, 72, 72, 0.8);
  --wep-btn-border-color: var(--wep-border-color);
  --wep-btn-hover-border-color: var(--wep-border-color);
  --wep-btn-bg: var(--wep-white);
  background-image: var(--wep-btn-filter-bg-img);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  padding-right: calc(var(--wep-btn-padding-x) + 24px);
  display: flex;
  align-items: center;
  gap: 8px;
}

.wep-btn-filter:hover,
.wep-btn-filter:focus {
  background-color: var(--wep-secondary);
}

.wep-btn-default {
  --wep-btn-color: var(--wep-body-color);
  --wep-btn-bg: var(--wep-white);
  --wep-btn-border-color: transparent;
  --wep-btn-hover-color: var(--wep-body-color);
  --wep-btn-hover-bg: var(--wep-secondary);
  --wep-btn-hover-border-color: var(--wep-secondary);
}

.wep-btn-icon {
  min-width: auto;
  padding: 5px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dropdown
===========================================================================*/
.wep-dropdown {
  position: relative;
  display: inline-block;
}

.wep-dropdown-toggle {
  display: inline-flex;
  cursor: pointer;
}

.wep-dropdown-menu {
  position: absolute;
  right: 0;
  z-index: var(--wep-dropdown-zindex);
  display: none;
  min-width: var(--wep-dropdown-min-width);
  padding: var(--wep-dropdown-padding-y) var(--wep-dropdown-padding-x);
  margin: var(--wep-dropdown-spacer) 0 0;
  font-size: var(--wep-dropdown-font-size);
  color: var(--wep-dropdown-color);
  text-align: left;
  list-style: none;
  background-color: var(--wep-dropdown-bg);
  background-clip: padding-box;
  border-radius: var(--wep-dropdown-border-radius);
  box-shadow: var(--wep-dropdown-box-shadow);
}

.wep-dropdown .wep-dropdown-menu.show {
  display: block;
}

.wep-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: var(--wep-dropdown-item-padding-y) var(--wep-dropdown-item-padding-x);
  clear: both;
  color: var(--wep-dropdown-link-color);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
}

.wep-dropdown-item:hover,
.wep-dropdown-item:focus {
  color: var(--wep-dropdown-link-hover-color);
  background-color: var(--wep-dropdown-link-hover-bg);
}

.wep-dropdown-item > i,
.wep-dropdown-item > svg,
.wep-dropdown-item > object {
  text-align: center;
  width: 1em;
}

.wep-dropdown-header {
  display: flex;
  margin-bottom: 10px;
}

.wep-dropdown-header .title {
  font-weight: bold;
}

.wep-dropdown-header .wep-btn {
  margin-left: auto;
  margin-top: -8px;
  margin-right: -10px;
}

/* Input Group
===========================================================================*/
.wep-input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
.wep-input-group > .wep-form-control,
.wep-input-group > .wep-form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.wep-input-group > .wep-form-control:focus,
.wep-input-group > .wep-form-select:focus {
  z-index: 5;
}
.wep-input-group .wep-btn {
  position: relative;
  z-index: 2;
}
.wep-input-group .wep-btn:focus {
  z-index: 5;
}
.wep-input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.wep-input-group > :not(:first-child):not(.wep-dropdown-menu) {
  margin-left: calc(var(--wep-border-width) * -1);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Ratio
===========================================================================*/

.wep-ratio {
  position: relative;
  width: 100%;
}

.wep-ratio::before {
  display: block;
  padding-top: var(--wep-aspect-ratio);
  content: "";
}

.wep-ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wep-ratio img {
  object-fit: cover;
}

.wep-ratio--5x3 {
  --wep-aspect-ratio: 66%;
}

/* Chip
===========================================================================*/
.wep-chip {
  display: inline-flex;
  align-items: center;
  color: var(--wep-chip-color);
  background: var(--wep-chip-bg);
  border-radius: var(--wep-chip-border-radius);
  font-size: 0.875em;
  padding: var(--wep-chip-padding-y) var(--wep-chip-padding-x);
  white-space: nowrap;
}

.wep-chip-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

/* Pagination
===========================================================================*/
.wep-root .wpgmp_pagination {
  padding-block: 30px 10px;
  font-size: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.wep-root .wpgmp_pagination :is(a, span) {
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  margin-right: 0;
  padding: 10px 20px;
  background: transparent;
  color: rgba(72, 72, 72, 0.8);
  border: 1px solid var(--wep-border-color);
  border-radius: var(--wep-btn-border-radius);
}

.wep-root .wpgmp_pagination :is(a:hover, a:focus, span.current) {
  background: var(--wep-primary);
  border-color: var(--wep-primary);
  color: var(--wep-white);
}

/* Icons
===========================================================================*/
.wep-icon {
  position: relative;
  display: inline-flex;
}

.wep-icon::before {
  content: "";
  display: block;
  height: 24px;
  width: 24px;
}

.wep-icon-filter {
  background: url(../images/icons/icon-filter.svg) center no-repeat;
}

.wep-icon-search {
  background: url(../images/icons/icon-search.svg) center no-repeat;
}

.wep-icon-map {
  background: url(../images/icons/icon-map.svg) center no-repeat;
}

.wep-icon-location {
  background: url(../images/icons/icon-location.svg) center no-repeat;
}

.wep-icon-direction {
  background: url(../images/icons/icon-direction.svg) center no-repeat;
}

.wep-icon-direction-1 {
  background: url(../images/icons/icon-direction-1.svg) center no-repeat;
}

.wep-icon-close {
  background: url(../images/icons/icon-close.svg) center no-repeat;
}

.wep-icon-more {
  background: url(../images/icons/icon-more.svg) center no-repeat;
}

.wep-icon-pin-o {
  background: url(../images/icons/icon-pin-o.svg) center no-repeat;
}

.wep-icon-pin {
  background: url(../images/icons/icon-pin.svg) center no-repeat;
}

.wep-icon-route {
  background: url(../images/icons/icon-route.svg) center no-repeat;
}

.wep-icon-bed {
  background: url(../images/icons/icon-bed.svg) center no-repeat;
}

.wep-icon-bathtub {
  background: url(../images/icons/icon-bathtub.svg) center no-repeat;
}

.wep-icon-blueprint {
  background: url(../images/icons/icon-blueprint.svg) center no-repeat;
}

.wep-icon-arrow-left {
  background: url(../images/icons/icon-arrow-left.svg) center no-repeat;
}

.wep-icon-arrow-right {
  background: url(../images/icons/icon-arrow-right.svg) center no-repeat;
}

.wep-icon-arrow-up {
  background: url(../images/icons/icon-arrow-up.svg) center no-repeat;
}

.wep-icon-arrow-down {
  background: url(../images/icons/icon-arrow-down.svg) center no-repeat;
}

/* Toggle style
===========================================================================*/
.wep-toggle-content {
  max-height: 0; /* Initially collapsed */
  overflow: hidden; /* Hide overflowing content */
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out; /* Smooth transition */
  opacity: 0; /* Initially hidden */
}

.wep-toggle-content.show {
  max-height: none; /* Allow full height when active */
  opacity: 1; /* Fully visible */
}

/* Spinner style
===========================================================================*/

@keyframes spinner-border {
  to {
    transform: rotate(360deg) /* rtl:ignore */;
  }
}

.wep-spinner-border {
  --wep-spinner-width: 16px;
  --wep-spinner-height: 16px;
  --wep-spinner-vertical-align: -3px;
  --wep-spinner-border-width: 2px;
  --wep-spinner-animation-speed: 0.75s;
  --wep-spinner-animation-name: spinner-border;
  display: inline-block;
  width: var(--wep-spinner-width);
  height: var(--wep-spinner-height);
  vertical-align: var(--wep-spinner-vertical-align);
  border: var(--wep-spinner-border-width) solid currentcolor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: var(--wep-spinner-animation-speed) linear infinite
    var(--wep-spinner-animation-name);
  animation: var(--wep-spinner-animation-speed) linear infinite
    var(--wep-spinner-animation-name);
}

.wep-btn .wep-spinner-border {
  margin-right: 10px;
}