/**
 * Custom Property Info Styles
 * These styles are based on the Beyot Framework property-info component
 * and ensure consistent styling across Elementor and custom template renders
 * 
 * Source: https://evabauerrealestate.com/wp-content/plugins/beyot-framework/shortcodes/property-info/assets/scss/property-info.min.css
 */

/* Property single page title - remove padding */
.property-single-page-title {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Background image with low z-index to stay behind content */
.page-title-background {
  z-index: -1000;
  position: relative;
}

/* Full width, full height container */
.ube-property-info.g5plus-property-info {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* Container - centered layout */
.g5plus-property-info {
  text-align: center;
}

/* Top section with property info - dark overlay background */
.g5plus-property-info .property-info-top {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 35px 15px 23px;
}

/* Address text with icon */
.g5plus-property-info .property-info-top .property-info-address {
  font-size: 16px;
  margin-bottom: 5px;
  color: #bababa;
}

.g5plus-property-info .property-info-top .property-info-address i {
  margin-right: 10px;
}

/* Property title */
.g5plus-property-info .property-info-top .property-info-title {
  color: #fff;
  font-size: 48px;
  margin-bottom: 0;
  font-weight: 500;
}

/* Property price section */
.g5plus-property-info .property-info-top .property-info-price {
  font-size: 32px;
  font-weight: 600;
  color: #bababa;
}

/* Detail section with dark background */
.g5plus-property-info .property-info-detail {
  background-color: rgba(0, 0, 0, 0.8);
  padding: 35px 0;
}

/* Individual property info items */
.g5plus-property-info .property-info-detail .property-info-item {
  display: inline-block;
  text-align: left;
}

/* Icon and content container layout */
.g5plus-property-info .property-info-detail .property-info-item > span,
.g5plus-property-info .property-info-detail .property-info-item > div {
  display: table-cell;
  vertical-align: middle;
}

/* Icon styling */
.g5plus-property-info .property-info-detail .property-info-item > span {
  font-size: 24px;
  padding-right: 10px;
  color: var(--g5-color-accent, #fe6a00);
}

/* Paragraph text in items */
.g5plus-property-info .property-info-detail .property-info-item p {
  margin-bottom: 0;
  letter-spacing: 0.03em;
  line-height: 14px;
}

/* Property info value (the number) */
.g5plus-property-info .property-info-detail .property-info-item .property-info-value {
  font-weight: 600;
  font-size: 14px;
  color: #fff;
}

/* Property info key (the label) */
.g5plus-property-info .property-info-detail .property-info-item .property-info-key {
  font-weight: 400;
  font-size: 12px;
  color: #bababa;
  padding-top: 1px;
}

/* After price badge */
.g5plus-property-info .property-info-after-price {
  margin-left: 15px;
  margin-bottom: 2px;
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  font-size: 12px;
  color: #fff;
  vertical-align: middle;
  background-color: var(--g5-color-accent, #fe6a00);
}

/* Arrow pointer for price badge */
.g5plus-property-info .property-info-after-price .property-arrow {
  position: absolute;pro
  content: "";
  display: block;
  right: 100%;
  top: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid var(--g5-color-accent, #fe6a00);
}

/* Horizontal spacing between items */
.g5plus-property-info .property-info-detail .property-info-item {
  margin-right: 60px;
}

.g5plus-property-info .property-info-detail .property-info-item:last-child {
  margin-right: 0;
}

.g5plus-property-info .property-info-top {
     background-color: transparent !important; 
}

/* Mobile responsive styles */
@media (max-width: 768px) {
  .g5plus-property-info .property-info-top .property-info-title {
    font-size: 30px;
  }

  .g5plus-property-info .property-info-detail .property-info-item {
    margin-right: 30px !important;
    margin-left: 15px;
  }
}