/* Trigger */
.arrow-pro { display: inline-flex; align-items:center; justify-content:center; }
.arrow-pro svg { display:block; width:100%; height:100%; }
.arrow-pro--popup { cursor: pointer; }
.arrow-pro--popup:hover { transform: var(--hover-transform, none); transition: transform .25s ease; }

/* Crescent SVG fill */
.arrow-pro .crescent-svg { width: 100%; height: 100%; display:block; }

/* Mirror crescent when direction = left */
.arrow-left .crescent-svg {
  transform: scaleX(-1);
  transform-origin: center;
}

/* Optional direction-aware nudge (feels great) */
.arrow-pro--popup.arrow-right:hover .crescent-svg { transform: translateX(4px); }
.arrow-pro--popup.arrow-left:hover .crescent-svg { transform: translateX(-4px) scaleX(-1); }

/* Modal backdrop */
.contact-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--popup-overlay, rgba(0,0,0,.6));
  align-items: center;
  justify-content: center;

  opacity: 0;
  transform: translateX(var(--popup-enter-x, 18px));
  transition: opacity .25s ease, transform .25s ease;
}

.contact-modal.active {
  display: flex;
  opacity: 1;
  transform: translateX(0);
}

/* Modal box */
.contact-modal-content {
  background: var(--popup-bg, #ffffff);
  color: var(--popup-text, #111111);

  max-width: var(--popup-width, 700px);
  width: 95%;
  max-height: 90vh;
  overflow: auto;

  border-radius: var(--popup-radius, 12px);
  padding: var(--popup-padding, 30px);

  position: relative;
  transform: scale(.96);
  transition: transform .25s ease;
  outline: none;
}

.contact-modal.active .contact-modal-content { transform: scale(1); }

/* Responsive padding via vars */
@media (max-width: 1024px) {
  .contact-modal-content {
    padding: var(--popup-padding-tablet, var(--popup-padding, 30px));
  }
}
@media (max-width: 767px) {
  .contact-modal-content {
    padding: var(--popup-padding-mobile, var(--popup-padding-tablet, var(--popup-padding, 30px)));
  }
}

/* Close button */
.contact-close {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 10;
  font-size: 28px;
  line-height: 1;
  background: transparent;
  border: 0;
  color: var(--popup-close, #2f3b8f);
  cursor: pointer;
  opacity: .9;
  transition: transform .2s ease, opacity .2s ease;
}
.contact-close:hover { opacity: 1; transform: scale(1.06); }

/* CF7 inputs - underline style */
#contact-modal input[type="text"],
#contact-modal input[type="email"],
#contact-modal input[type="tel"],
#contact-modal input[type="url"],
#contact-modal textarea {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--popup-underline, rgba(255,255,255,0.7));
  color: var(--popup-text, #ffffff);
  padding: 6px 0;
  width: 100%;
}

#contact-modal input::placeholder,
#contact-modal textarea::placeholder {
  color: rgba(255,255,255,.75);
}

#contact-modal input:focus,
#contact-modal textarea:focus {
  outline: none;
  border-bottom-color: var(--popup-text, #ffffff);
}

#contact-modal input[type="checkbox"] { accent-color: var(--popup-text, #fff); }

/* Success message animation */
.arrowpro-success { display: none; margin-top: 18px; font-weight: 700; letter-spacing: .5px; }
.contact-modal.success .arrowpro-success {
  display: block;
  animation: arrowproSuccessPop .35s ease forwards;
}
@keyframes arrowproSuccessPop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.contact-modal.success .wpcf7-form { opacity: .65; transition: opacity .25s ease; }