/* Animation Keyframes
===========================================================================*/
@-webkit-keyframes fc-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fc-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.wpgmp-map-tester-wrapper {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.wpgmp-options::-webkit-scrollbar {
  width: 6px;
}

.wpgmp-options::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.wpgmp-options::-webkit-scrollbar-track {
  background: #f9f9f9;
}

.wpgmp-instruction {
  margin-left: 10px;
  color: #999999;
}
.wpgmp-drawer {
  width: 30%;
  border: solid;
  padding: 20px;
  position: fixed;
  top: 20px;
  left: 0;
  z-index: 9999;
  background: #ffffff;
  z-index: 9999;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #ddd;
  overflow-y: auto;
  max-height: 90vh;
}
.wpgmp-map-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 20px;
}

.wpgmp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* spacing between columns */
  margin-bottom: 20px;
}

.wpgmp-col {
  flex: 1 1 0;
  min-width: 200px; /* fallback on small screens */
}

.wpgmp-map-selector > div {
  display: flex;
  flex-direction: column;
  min-width: 180px;
}

.wpgmp-map-selector label {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 14px;
}

.wpgmp-map-selector select,
.wpgmp-map-selector input[type="text"],
.wpgmp-map-selector input[type="number"],
.wpgmp-map-selector input[type="checkbox"],
.wpgmp-map-selector input[type="radio"] {
  padding: 6px 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.wpgmp-map-selector button[type="submit"] {
  padding: 8px 16px;
  background: #0073aa;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}

.wpgmp-map-selector button[type="submit"]:hover {
  background: #005f8d;
}

.wpgmp-map-selector img {
  border: 1px solid #ccc;
  border-radius: 4px;
  display: block;
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.wpgmp-map-selector .color-preview {
  width: 24px;
  height: 24px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

span.wpgmp-color-schema {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 5px;
}

/* Select Provider Button
===========================================================================*/
.fc-select-provider-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

.fc-btn-google,
.fc-btn-leaflet {
  position: relative;
  display: inline-flex;
  padding: 10px 20px 10px 50px;
  background-color: #ebebeb;
  color: #666666;
  border-radius: 6px;
  border: 1px solid #ebebeb;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
}
.fc-btn-google:is(:hover, :focus),
.fc-btn-leaflet:is(:hover, :focus) {
  background-color: #ffffff;
  color: #666666;
  border-color: #ffffff;
}
.fc-btn-google.selected,
.fc-btn-leaflet.selected {
  background-color: #fff;
  color: #222222;
  border-color: #ff2773;
  font-weight: 700;
}
.fc-btn-google::before,
.fc-btn-leaflet::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  z-index: 1;
  height: 22px;
  width: 22px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.fc-btn-google::before {
  background: url("./images/icon-google.svg");
}
.fc-btn-leaflet::before {
  background: url("./images/icon-leaflet.svg");
}

/* Drawer
===========================================================================*/
.fc-drawer {
  --fc-drawer-padding-x: 30px;
  --fc-drawer-padding-y: 30px;
  --fc-drawer-bg: #f4f8ff;
  --fc-drawer-color: #666666;
  --fc-drawer-zindex: 9999;
  --fc-drawer-width: 350px;
  --fc-drawer-height: 100%;
  --fc-drawer-box-shadow: 0px 0 15px rgba(0, 0, 0, 0.15);
  position: fixed;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  z-index: var(--fc-drawer-zindex) !important;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  -ms-touch-action: manipulation;
  -webkit-touch-callout: inherit;
  touch-action: manipulation;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  background-color: var(--fc-drawer-bg);
  color: var(--fc-drawer-color);
  height: var(--fc-drawer-height);
  width: var(--fc-drawer-width);
  box-shadow: var(--fc-drawer-box-shadow);
  display: flex;
  flex-direction: column;
}

.fc-drawer.fc-open {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.fc-drawer-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--fc-drawer-padding-y) * 0.5) var(--fc-drawer-padding-x);
  min-height: 72px;
  border-bottom: 1px solid #eee;
}

.fc-drawer-btn-close {
  background-color: transparent;
  color: #222222;
  height: 32px;
  width: 32px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0 none;
  transition: all 0.3s ease;
}

.fc-drawer-btn-close:is(:hover, :focus) {
  background-color: rgba(0, 0, 0, 0.1);
  color: #222222;
}

.fc-drawer-header .fc-drawer-title {
  font-size: 22px;
  color: #222222;
}

.fc-drawer-header .fc-drawer-title,
.fc-drawer-section-heading {
  font-weight: 500;
  font-family: inherit;
  color: #222222;
}

.fc-drawer-body {
  flex: 1;
  overflow-y: auto;
}

.fc-drawer-body-inner {
  padding: var(--fc-drawer-padding-y) var(--fc-drawer-padding-x) !important;
}

.fc-drawer-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--fc-drawer-padding-y) * 0.5) var(--fc-drawer-padding-x);
  border-top: 1px solid #eee;
}

.fc-drawer-section {
  position: relative;
}

.fc-drawer-section + .fc-drawer-section {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #eee;
}

.fc-drawer-section-heading {
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  margin-bottom: 24px;
}

.fc-drawer-section-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media screen and (min-width: 768px) {
  .fc-drawer {
    --fc-drawer-width: 450px;
  }
}

.fc-drawer.fc-drawer-reveal {
  --fc-drawer-zindex: 10000;
  --fc-drawer-width: 100%;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

.fc-drawer.fc-drawer-reveal.fc-open {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.fc-drawer .fc-btn-more-setting,
.fc-drawer .fc-btn-buy-now {
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 20px;
  background-color: #ffffff;
  color: #062171;
  border: 1px solid #062171;
  display: inline-flex;
}

.fc-drawer .fc-btn-more-setting:is(:hover, :focus),
.fc-drawer .fc-btn-buy-now:is(:hover, :focus) {
  background-color: #062171;
  color: #ffffff;
}

.fc-drawer-reveal form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
}

/* Customizer button Style
===========================================================================*/
.wpgmp-demo-customizer {
  position: fixed;
  top: 20vh;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.wpgmp-demo-customizer > button {
  border: 0 none;
  border-radius: 50px 0 0 50px;
  color: #fff;
  padding: 10px;
  height: 52px;
  width: 70px;
  font-size: 28px;
}

.wpgmp-demo-customizer > button > i {
  -webkit-animation: fc-spin 2s infinite linear;
  animation: fc-spin 2s infinite linear;
}

/* Map Controls Style
===========================================================================*/
.fc-map-controls-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.fc-map-control {
  position: relative;
  display: flex;
  flex-direction: column;
}

.fc-map-control-radio,
.fc-map-control-checkbox {
  display: none;
}

.fc-map-control-label {
  display: inline-block;
  padding: 10px 15px;
  background-color: #ebebeb;
  color: #666666;
  border-radius: 6px;
  border: 1px solid #ebebeb;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 12px;
  font-weight: 500;
}

.fc-map-control-radio:checked + .fc-map-control-label,
.fc-map-control-checkbox:checked + .fc-map-control-label {
  background-color: #fff;
  color: #222222;
  border-color: #ff2773;
}

.fc-map-control-label:hover {
  background-color: #ffffff;
  border-color: #ffffff;
}

.fc-map-control-radio:checked + .fc-map-control-label:hover,
.fc-map-control-checkbox:checked + .fc-map-control-label:hover {
  background-color: #fff;
}

.fc-map-control-color-schema {
  display: inline-block;
  height: 28px;
  width: 28px;
  border-radius: 4px;
  background-color: #ff2773;
  font-size: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fc-map-control-radio:checked + .fc-map-control-color-schema {
  border-radius: 50%;
}

/* Map Skin Style
===========================================================================*/
.fc-map-skins-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 10px;
}
.fc-map-skin {
  height: 55px;
  width: 64px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}

.fc-map-skin.selected {
  border: 3px solid #ff2773;
}

.fc-map-skin > img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.fc-map-skin-more {
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Map listing Style
===========================================================================*/
.fc-map-listing-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 10px;
}

.fc-map-listing-image {
  height: 90px;
  width: 100%;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  cursor: pointer;
}

.fc-map-listing-content {
  padding: 8px;
  background-color: #ebebeb;
  border-radius: 0 0 8px 8px;
}

.fc-map-listing {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  text-align: center;
  background-color: #ebebeb;
}

.fc-map-listing.selected {
  border: 3px solid #ff2773;
}

.fc-map-listing-image > img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.fc-map-listing-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 2px !important;
  color: #222222 !important;
}

.fc-map-listing-description {
  font-size: 10px;
}

.fc-map-listing-more {
  height: 100%;
}
.fc-map-listing-more .fc-map-listing-content {
  position: absolute;
  inset: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 8px;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Infobox Style
===========================================================================*/
/*.wpgmp-map-tester-wrapper .fc-infobox-root {
  --fc-infobox-max-width: 380px;
}*/

/* Infobox List Style
===========================================================================*/
.fc-infobox .fc-infobox-msg {
  text-align: justify;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 4;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.fc-infobox .fc-infobox-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.fc-infobox-list-item {
  align-items: center;
}

.fc-infobox-list-item span.fc-label {
  text-transform: capitalize;
  white-space: nowrap;
}

/* Icons
===========================================================================*/
.wep-icon-spin {
  -webkit-animation: fc-spin 2s infinite linear;
  animation: fc-spin 2s infinite linear;
}

/* Listing Style
===========================================================================*/
.wpgmp-map-tester-wrapper
  .wpgmp_listing_container
  *:not([class^="wep-icon-"]):not([class*=" wep-icon-"]) {
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1.3;
}

.wpgmp-map-tester-wrapper .wpgmp_listing_container .fc-item-title a {
  font-size: 20px !important;
  font-weight: 500;
  text-decoration: none;
}

.wpgmp_listing_container .fc-infobox-list {
  flex-direction: row;
  flex-wrap: wrap;
}

.wpgmp_listing_container .fc-extra-content {
  float: left;
  width: 100%;
}

.wpgmp_listing_container .fc-extra-content:not(:first-child) {
  margin-top: 15px;
}

/* Listing Default style
===========================================================================*/
.wpgmp-map-tester-wrapper
  .wpgmp_listing_list
  .wpgmp_locations
  .wpgmp_location_title {
  margin-bottom: 0;
}
.wpgmp-map-tester-wrapper
  .wpgmp_listing_list
  .wpgmp_locations
  .wpgmp_location_title
  a {
  font-size: 18px;
  font-weight: 500;
}
.wpgmp-map-tester-wrapper
  .wpgmp_listing_list
  .wpgmp_locations
  .wpgmp_locations_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.wpgmp_listing_container .fc-item-default .fc-extra-content {
  float: none;
  width: 100%;
}

.wpgmp-map-tester-wrapper .fc-item-default .fc-badge .fc-badge {
  padding: 0;
  background-color: transparent;
  color: inherit;
}

/* Listing Aare style
===========================================================================*/
.wpgmp-map-tester-wrapper
  .wpgmp_listing_container
  .fc-item-aare
  .fc-item-title {
  margin-bottom: 8px;
  text-transform: none;
}

.wpgmp-map-tester-wrapper .fc-item-aare .read-more {
  border: 1px solid #444444;
  color: #444444;
  font-size: 12px;
  padding: 6px 12px;
  text-decoration: none;
}

.wpgmp-map-tester-wrapper .fc-item-aare .read-more:is(:hover, :focus) {
  color: #fff;
  background-color: #444444;
}

/* Listing acerra style
===========================================================================*/
.wpgmp-map-tester-wrapper .fc-infowindow-acerra .fc-item-box img {
  width: 100% !important;
}
.wpgmp-map-tester-wrapper .fc-infowindow-acerra .fc-item-meta {
  display: inline-flex;
  background-color: #e3e3e3;
  color: #23272f;
  font-size: 12px !important;
  padding: 4px 12px;
  margin-bottom: 10px;
}

/* Listing fano style
===========================================================================*/
.wpgmp-map-tester-wrapper .fc-infowindow-fano .fc-item-box img {
  width: 100% !important;
}

.wpgmp-map-tester-wrapper .fc-infowindow-fano .fc-item-title {
  position: static;
}

.wpgmp-map-tester-wrapper .fc-infowindow-fano .fc-item-meta {
  right: auto;
  bottom: auto;
  top: 20px;
  left: 20px;
}

.wpgmp-map-tester-wrapper .fc-item-fano div.fc-item-meta {
  padding: 0;
  background-color: transparent;
  color: inherit;
}

/* Listing kairav style
===========================================================================*/
.wpgmp-map-tester-wrapper .fc-infowindow-kairav .fc-item-box img {
  width: 100% !important;
}

.wpgmp-map-tester-wrapper .fc-infowindow-kairav .fc-item-meta {
  display: inline-flex;
  background-color: #e3e3e3;
  color: #23272f;
  font-size: 12px !important;
  padding: 4px 12px;
  margin-bottom: 10px;
}

/* Events Listing style
===========================================================================*/
.fc-events-list .fc-label {
  font-weight: 500 !important;
  color: #444444;
}
.fc-events-list :is(.fc-label, .fc-infobox-list-item-content) {
  font-size: 14px !important;
}

@media screen and (min-width: 768px) {
  .fc-events-list {
    gap: 20px;
  }
}

/* Restaurant & Service-center Listing style
===========================================================================*/
.fc-restaurant-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.fc-stores-list .fc-label,
.fc-services-list .fc-label,
.fc-restaurant-list .fc-label {
  font-weight: 500 !important;
  color: #444444;
}

.fc-stores-list :is(.fc-label, .fc-infobox-list-item-content),
.fc-services-list :is(.fc-label, .fc-infobox-list-item-content),
.fc-restaurant-list :is(.fc-label, .fc-infobox-list-item-content) {
  font-size: 14px !important;
}

@media screen and (min-width: 768px) {
  /* Default listing style */
  .wpgmp_listing_container .fc-infowindow-default .fc-stores-list,
  .wpgmp_listing_container .fc-infowindow-default .fc-services-list,
  .wpgmp_listing_container .fc-infowindow-default .fc-restaurant-list {
    display: flex;
    flex-direction: row;
    column-gap: 20px;
    row-gap: 10px;
  }
}

/* Stores & Service-center Listing style
===========================================================================*/
.wpgmp_listing_container .fc-services-list,
.wpgmp_listing_container .fc-stores-list {
  flex-direction: column;
}

/* Infowindow layout-6 style
===========================================================================*/
.wpgmp-map-tester-wrapper .fc-infobox-layout-6 .fc-infobox-list {
  grid-template-columns: 1fr;
}

/* Industry demo style
===========================================================================*/
.wpgmp-industry-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.wpgmp-industry-demo a:visited,
.wpgmp-industry-demo a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-size: 14px;
  color: #062171;
}

.wpgmp-industry-demo-item.active a,
.wpgmp-industry-demo a:is(:hover, :focus) {
  background-color: #062171;
  color: #fff;
}

.wpgmp-industry-demo-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}

.fc-drawer-btn-tour,
.wpgmp-industry-demo-header #wpgmp-reset-tour {
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  color: #fff;
  border: 0 none;
}

@media screen and (min-width: 768px) {
  .wpgmp-industry-demo-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media screen and (max-width: 767px) {
  .wpgmp-industry-demo-header #wpgmp-reset-tour {
    order: 1;
  }
  .wpgmp-industry-demo-header .wpgmp-industry-demo {
    order: 2;
  }
}

/* Tour popup style
===========================================================================*/
.driver-popover-footer button {
  background-color: #062171;
  color: #fff;
  text-shadow: none;
  border: 0 none;
  padding: 6px 12px;
  border-radius: 4px;
}

.driver-popover-footer button:is(:hover, :focus) {
  background-color: #062171;
  color: #fff;
}

/* Exit Popup
===========================================================================*/
#wpgmp-exit-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wpgmp-exit-popup-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
}
.wpgmp-exit-popup-content {
  position: relative;
  background: #fff;
  max-width: 520px;
  width: 90%;
  padding: 0px;
  border-radius: 10px;
  text-align: center;
  z-index: 10000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.wpgmp-convert-box {
  background: #eef3ff;
  border: 1px solid #062171;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  margin: 0px auto;
  max-width: 600px;
}

.wpgmp-convert-box h2 {
  font-size: 24px;
  line-height: 36px;
  color: #062171;
}

.wpgmp-convert-box p {
  font-size: 16px;
  color: #444;
  margin-bottom: 15px;
}

.wpgmp-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  text-align: left;
  display: inline-block;
}

.wpgmp-benefits-list li {
  font-size: 14px;
  margin: 5px 0;
}

.wpgmp-upgrade-button {
  background: #062171;
  color: #fff;
  padding: 12px 24px;
  font-size: 16px;
  text-decoration: none;
  border-radius: 6px;
  display: inline-block;
  margin-block: 10px;
}

.wpgmp-upgrade-button:is(:hover, :focus) {
  background: #051c5f;
  color: #fff;
}

.wpgmp-subtext {
  font-size: 13px;
  color: #777;
  margin-top: 12px;
}

/* Step section
===========================================================================*/
.howto-step .description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.step-number {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.25);
  margin-left: auto;
  margin-right: auto;
}