/* Parking map — independently editable HTML artboard */
.parking-map--editable {
  --teal: #BC96E6;
  --teal-dark: #9B7EC8;
  --text: #371847;
  --white: #fff;
  --art-w: 1178;
  --art-h: 1490;
}

.parking-map--editable .parking-map__frame {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  position: relative;
  overflow: hidden;
}

.parking-map--editable .parking-map__viewer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.parking-map--editable .parking-map__artboard {
  position: absolute;
  top: 0;
  left: 0;
  width: 1178px;
  height: 1490px;
  transform-origin: top left;
  background: var(--white);
  overflow: hidden;
  border: 1px solid rgba(188, 150, 230, 0.18);
  box-sizing: border-box;
  font-family: Outfit, Arial, sans-serif;
}

.parking-map--editable .el {
  position: absolute;
  box-sizing: border-box;
}

.parking-map--editable .lot {
  background: var(--teal);
}

.parking-map--editable .road {
  background: var(--white);
}

.parking-map--editable .outline {
  border: 1px solid #777;
}

.parking-map--editable .label {
  position: absolute;
  margin: 0;
  padding: 0;
  line-height: 1.18;
  white-space: nowrap;
  color: var(--text);
  font-weight: 700;
}

.parking-map--editable .lot-label {
  color: var(--white);
  font-size: 17px;
  line-height: 1.22;
  text-align: center;
  white-space: nowrap;
  font-weight: 700;
}

.parking-map--editable .road-label {
  color: var(--text);
  font-size: 21px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.parking-map--editable .small-white {
  position: absolute;
  color: var(--white);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.parking-map--editable .pin {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold, #ffd166);
  border: 2px solid var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple, #210b2c);
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(33, 11, 44, 0.12);
}

.parking-map--editable .legend-text {
  color: var(--text);
  font-family: Outfit, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  white-space: nowrap;
}

.parking-map--editable .legend-small {
  color: var(--teal);
  font-family: Outfit, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
  white-space: nowrap;
}

.parking-map--editable .aurora {
  left: 0;
  top: 0;
  width: 1178px;
  height: 53px;
  border-bottom: 1px solid #777;
}

.parking-map--editable .aurora .road-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 31px;
}

.parking-map--editable .map-frame {
  left: 58px;
  top: 53px;
  width: 1041px;
  height: 880px;
  border: 1px solid #777;
}

.parking-map--editable .left-road {
  left: 0;
  top: 53px;
  width: 58px;
  height: 880px;
}

.parking-map--editable .edsa {
  left: 17px;
  top: 560px;
  transform: rotate(90deg);
  transform-origin: center;
  font-size: 25px;
}

.parking-map--editable .lot-01 { left: 67px; top: 53px; width: 98px; height: 177px; }
.parking-map--editable .lot-02 { left: 194px; top: 53px; width: 99px; height: 177px; }
.parking-map--editable .lot-03 { left: 319px; top: 53px; width: 224px; height: 177px; }
.parking-map--editable .lot-filler-gateway { left: 431px; top: 229px; width: 112px; height: 30px; }
.parking-map--editable .lot-04 { left: 569px; top: 53px; width: 160px; height: 57px; }
.parking-map--editable .lot-05 { left: 753px; top: 53px; width: 194px; height: 57px; }
.parking-map--editable .lot-06 { left: 970px; top: 53px; width: 137px; height: 880px; }
.parking-map--editable .lot-07 { left: 67px; top: 257px; width: 232px; height: 136px; }
.parking-map--editable .lot-08 { left: 67px; top: 420px; width: 232px; height: 186px; }
.parking-map--editable .lot-09 { left: 67px; top: 635px; width: 232px; height: 298px; }
.parking-map--editable .lot-10 { left: 319px; top: 257px; width: 224px; height: 349px; }
.parking-map--editable .lot-filler-gateway2 { left: 538px; top: 155px; width: 37px; height: 35px; }
.parking-map--editable .lot-filler-gateway3 { left: 723px; top: 155px; width: 37px; height: 35px; }
.parking-map--editable .lot-11 { left: 319px; top: 635px; width: 224px; height: 298px; }
.parking-map--editable .lot-filler-bridge { left: 541px; top: 692px; width: 30px; height: 58px; }
.parking-map--editable .lot-12 { left: 569px; top: 140px; width: 160px; height: 89px; }
.parking-map--editable .lot-13 { left: 753px; top: 140px; width: 194px; height: 89px; }
.parking-map--editable .lot-14 { left: 569px; top: 257px; width: 177px; height: 349px; }
.parking-map--editable .lot-15 { left: 775px; top: 257px; width: 172px; height: 349px; }
.parking-map--editable .lot-16 { left: 569px; top: 635px; width: 177px; height: 298px; }
.parking-map--editable .lot-17 { left: 775px; top: 635px; width: 172px; height: 298px; }

.parking-map--editable .gen-roxas { left: 67px; top: 230px; width: 232px; height: 27px; }
.parking-map--editable .gen-aguinaldo { left: 299px; top: 53px; width: 20px; height: 880px; }
.parking-map--editable .gen-malvar { left: 569px; top: 110px; width: 378px; height: 30px; }
.parking-map--editable .times-square { left: 746px; top: 257px; width: 29px; height: 349px; }
.parking-map--editable .gen-romulo { left: 947px; top: 257px; width: 15px; height: 349px; }
.parking-map--editable .gen-macarthur { left: 543px; top: 606px; width: 232px; height: 29px; }
.parking-map--editable .bottom-road { left: 0; top: 946px; width: 1178px; height: 54px; border-top: 1px solid #777; }

.parking-map--editable .gateway-mall { left: 431px; top: 125px; transform: translateX(-50%); font-size: 16px; }
.parking-map--editable .gateway-tower { left: 470px; top: 182px; transform: translateX(-50%); font-size: 16px; }
.parking-map--editable .aurora-tower { left: 649px; top: 65px; transform: translateX(-50%); }
.parking-map--editable .manhattan-parkway { left: 850px; top: 65px; transform: translateX(-50%); }
.parking-map--editable .new-frontier { left: 649px; top: 158px; transform: translateX(-50%); }
.parking-map--editable .manhattan-parkview { left: 850px; top: 158px; transform: translateX(-50%); }
.parking-map--editable .farmers-plaza { left: 183px; top: 312px; transform: translateX(-50%); }
.parking-map--editable .farmers-market { left: 183px; top: 502px; transform: translateX(-50%); }
.parking-map--editable .farmers-garden { left: 183px; top: 781px; transform: translateX(-50%); }
.parking-map--editable .bes { left: 329px; top: 268px; }
.parking-map--editable .smart {
  left: 431px;
  top: 384px;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 16px;
  line-height: 1.22;
  white-space: normal;
}
.parking-map--editable .gateway-script { left: 358px; top: 473px; }
.parking-map--editable .parking-garage { left: 396px; top: 525px; transform: translateX(-50%); }
.parking-map--editable .novotel { left: 505px; top: 524px; transform: translateX(-50%); }
.parking-map--editable .telus { left: 358px; top: 666px; transform: translateX(-50%); }
.parking-map--editable .cyber1 { left: 443px; top: 725px; transform: translateX(-50%); }
.parking-map--editable .cyber2 { left: 426px; top: 786px; transform: translateX(-50%); }
.parking-map--editable .cyber3 { left: 453px; top: 856px; transform: translateX(-50%); }
.parking-map--editable .fiesta { left: 659px; top: 393px; transform: translateX(-50%); }
.parking-map--editable .bus-station { left: 861px; top: 390px; transform: translateX(-50%); }
.parking-map--editable .manhattan-plaza { left: 861px; top: 496px; transform: translateX(-50%); }
.parking-map--editable .sm-araneta { left: 659px; top: 800px; transform: translateX(-50%); }
.parking-map--editable .ali-mall { left: 861px; top: 802px; transform: translateX(-50%); }
.parking-map--editable .manhattan-heights { left: 1030px; top: 608px; transform: translateX(-50%); }
.parking-map--editable .busport { left: 1030px; top: 809px; transform: translateX(-50%); }
.parking-map--editable .roxas-label { left: 183px; top: 238px; transform: translateX(-50%); font-size: 14px; }
.parking-map--editable .aguinaldo-label {
  left: 309px;
  top: 315px;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
  font-size: 13px;
  white-space: nowrap;
}
.parking-map--editable .malvar-label { left: 758px; top: 116px; transform: translateX(-50%); font-size: 14px; }
.parking-map--editable .times-label {
  left: 761px;
  top: 432px;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
  font-size: 13px;
}
.parking-map--editable .romulo-label {
  left: 955px;
  top: 432px;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
  font-size: 13px;
}
.parking-map--editable .macarthur-label { left: 659px; top: 615px; transform: translateX(-50%); font-size: 14px; }
.parking-map--editable .tuazon-label { left: 589px; top: 965px; transform: translateX(-50%); font-size: 29px; }

.parking-map--editable .p1 { left: 276px; top: 422px; }
.parking-map--editable .p2 { left: 276px; top: 344px; }
.parking-map--editable .p3 { left: 223px; top: 376px; }
.parking-map--editable .p4 { left: 369px; top: 177px; }
.parking-map--editable .p5 { left: 491px; top: 283px; }
.parking-map--editable .p6 { left: 667px; top: 269px; }
.parking-map--editable .p7 { left: 757px; top: 162px; }
.parking-map--editable .p8 { left: 889px; top: 63px; }
.parking-map--editable .p9 { left: 855px; top: 268px; }
.parking-map--editable .p10 { left: 894px; top: 432px; }
.parking-map--editable .p11 { left: 855px; top: 554px; }
.parking-map--editable .p12 { left: 989px; top: 645px; }
.parking-map--editable .p13 { left: 989px; top: 880px; }
.parking-map--editable .p14 { left: 788px; top: 876px; }
.parking-map--editable .p15 { left: 578px; top: 876px; }
.parking-map--editable .p16 { left: 491px; top: 648px; }
.parking-map--editable .p17 { left: 384px; top: 554px; }
.parking-map--editable .p18 { left: 334px; top: 690px; }
.parking-map--editable .p19 { left: 93px; top: 650px; }

.parking-map--editable .coliseum-circle {
  left: 368px;
  top: 321px;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  background: var(--teal);
  border: 1px solid var(--teal-dark);
}

.parking-map--editable .arrow {
  position: absolute;
  width: 22px;
  height: 30px;
}

.parking-map--editable .arrow::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 0;
  width: 4px;
  height: 19px;
  background: #555;
}

.parking-map--editable .arrow::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 13px;
  width: 13px;
  height: 13px;
  border-left: 4px solid #555;
  border-bottom: 4px solid #555;
  transform: rotate(-45deg);
}

.parking-map--editable .down1 { left: 171px; top: 59px; }
.parking-map--editable .down2 { left: 298px; top: 59px; }
.parking-map--editable .down3 { left: 546px; top: 59px; }
.parking-map--editable .down4 { left: 946px; top: 59px; }
.parking-map--editable .up1 { left: 546px; top: 904px; transform: rotate(180deg); }
.parking-map--editable .up2 { left: 749px; top: 904px; transform: rotate(180deg); }
.parking-map--editable .up3 { left: 946px; top: 904px; transform: rotate(180deg); }

.parking-map--editable .legend {
  position: absolute;
  left: 87px;
  top: 1004px;
  width: 1000px;
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.parking-map--editable .legend-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 0 322px;
}

.parking-map--editable .legend-col:nth-child(2) {
  flex-basis: 380px;
}

.parking-map--editable .legend-col:nth-child(3) {
  flex-basis: 298px;
}

.parking-map--editable .legend-item {
  position: relative;
  min-height: 50px;
  height: auto;
  flex: 0 0 auto;
}

.parking-map--editable .legend-item:has(.legend-small) {
  min-height: 72px;
}

.parking-map--editable .legend-item .pin {
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 46px;
  font-size: 16px;
  border-width: 3px;
}

.parking-map--editable .legend-item .legend-text {
  position: absolute;
  left: 58px;
  top: 13px;
}

.parking-map--editable .legend-item .legend-small {
  position: absolute;
  left: 58px;
  top: 35px;
}

@media (max-width: 700px) {
  .parking-map--editable .parking-map__frame {
    max-width: 100%;
  }
}