/* ================= GLOBAL ================= */

.hover:hover {
  color: #f9e1c8 !important;
}

.icon {
  color: #7f021a !important;
  margin-top: -8px !important;
}

#email_address::placeholder {
  color: #02020252;
}

/* ================= MOBILE ================= */

@media (max-width: 767px) {
  .ms-mobile-4 {
    margin-left: 22px !important;
    margin-top: -9px !important;
  }
}

.hk-contact-form {
  gap: 13px !important;
}

/* ================= POPUP OVERLAY (BOTH) ================= */

.ongoing-popup-overlay {
    display: none;
}

.ongoing-popup-overlay.active {
    display: flex;
}

.popup-form,
.ongoing-popup-overlay {
  display: flex;
  align-items: center;
  justify-content: center;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.7);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;        /* hidden = no clicks */

  z-index: 99999;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ACTIVE STATE */
.popup-form.active,
.ongoing-popup-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;        /* active = clicks allowed */
}

/* Wrapper for better spacing */
.checkbox-wrapper {
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  margin-bottom: -15px !important;
}

/* Checkbox styling */
.checkbox-wrapper input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: #007bff; /* modern blue tick */
}

/* Label text */
.checkbox-wrapper label {
  cursor: pointer;
  color: #333;
}

/* Error message */
.error {
  color: #e74c3c;
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

/* Highlight checkbox error state (optional but nice UX) */
.checkbox-error {
  padding: 8px;
  border: 1px solid #e74c3c;
  border-radius: 6px;
  background: #fff5f5;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;   /* IMPORTANT: fixes vertical misalignment */
  gap: 10px;
  margin: 12px 0 6px;
}

/* checkbox itself */
.checkbox-wrapper input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: #8b0015; /* your brand red */
  flex-shrink: 0;
}

/* label */
.checkbox-wrapper label {
  font-size: 11px;
  line-height: 1.4;
  color: #333;
  cursor: pointer;
  user-select: none;
  left: 20px !important;
}

/* optional: hover effect */
.checkbox-wrapper:hover label {
  color: #000;
}

/* ================= POPUP CONTENT CARDS ================= */

.popup-content,
.ongoing-popup-card {
  background: #fff;
  width: 90%;
  max-width: 400px;

  padding: 20px 25px;
  border-radius: 16px;

  position: relative;
  transform: translateY(-50px);
  transition: transform 0.4s ease;
}

.popup-form.active .popup-content,
.ongoing-popup-overlay.active .ongoing-popup-card {
  transform: translateY(0);
}

/* ================= CLOSE BUTTONS ================= */

.close-popup,
#closeOngoingPopupBtn {
  position: absolute;
  right: 15px;
  top: 10px;

  font-size: 22px;
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
}

/* ================= ENQUIRY FORM ================= */

.hk-contact-head {
  margin-bottom: 20px;
}

.hk-contact-head h2 {
  margin-bottom: 4px;
}

.hk-input-group {
  position: relative;
  /* margin-bottom: 18px; */
}

.hk-input-group input,
.hk-input-group select {
  width: 100%;
  padding: 10px;
  border: 2px solid #ddd;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s;
}

.hk-input-group input:focus,
.hk-input-group select:focus {
  border-color: #7f021a;
}

.submit-btn {
  width: 100%;
  /* margin-top: 4px; */
}

.error {
  color: red;
  font-size: 12px;
  display: block;
  margin-top: 4px;
}

/* ================= ONGOING POPUP SPECIFICS ================= */

.ongoing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-right: 10px;
  border-bottom: 1px solid #00000024;
  padding-bottom: 10px;
}

.ongoing-header h3 {
  margin: 0;
}

.ongoing-projects-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.project-item {
  text-align: left;
  padding: 8px 0px;
  /* margin-bottom: 10px; */
  /* border-bottom: 1px solid #eee; */
}

.project-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    border-radius: 6px;
    padding: 8px 0px;
    /* margin-bottom: 15px; */
}

.project-img img {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px !important;
}

.project-info strong {
    font-size: 20px;
    display: block;
    color: #7f021a;
}

.project-info small {
    color: #000000;
    display: block;
    margin-top: 2px;
    font-size: 15px;
}

.area {
    font-size: 14px;
    color: #000000;
    margin-top: 3px;
}

.btn-proj a {
  font-size: 13px !important;
  padding: 12px 18px !important;
}

@media (max-width: 767px) {
  .btn-proj a {
    font-size: 12px !important;
    padding: 12px 16px !important;
  }

  .project-img img {
    width: 90px !important;
    height: 70px !important;
  }

  .project-info strong {
    font-size: 16px !important;
  }

  .project-info small, .area {
    font-size: 13px !important;
  }

}

/* ================= RESPONSIVE ================= */

@media (max-width: 767px) {
  .popup-content,
  .ongoing-popup-card {
    margin: 20px;
    padding: 20px;
  }
}

/* ================= MOBILE MENU ================= */

@media (max-width: 991px) {
  #nav[style*="display: block"] {
    display: block !important;
  }

  #nav li.menu-item-has-children > a::after {
    content: '▼';
    position: absolute;
    right: 10px;
  }
}