/* Per-property QR code (houzez-clean 1.0.19+)
   Placement styles for the single-property QR. The SVG is self-hosted/inline. */

.property-qr-code {
    display: inline-block;
    line-height: 0;
}

.property-qr-code svg {
    display: block;
    width: 140px;
    height: 140px;
    max-width: 100%;
}

.property-qr-caption {
    line-height: 1.3;
    margin-top: 8px;
    font-size: 13px;
    text-align: center;
    color: #6d6d6d;
}

/* Below description / overview / contact info: block, with a little spacing. */
.property-qr-below_description,
.property-qr-overview,
.property-qr-contact_info {
    margin-top: 20px;
}

/* Sidebar: centered card. */
.widget-property-qr .property-qr-code {
    display: inline-block;
}

/* ---- Promo Section (Layout Manager): QR left, content right ----
   Goal: one uniform pill for every share/custom button, with every icon
   (Houzez font glyph OR inline Viber SVG) normalized to the SAME square box so
   nothing renders tiny or off-baseline. */

.property-promo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
}

.property-promo-qr {
    flex: 0 0 auto;
    align-self: center; /* vertically center the QR against the buttons column */
    line-height: 0;
}

.property-promo-qr svg {
    display: block;
    width: 180px;
    height: 180px;
    max-width: 100%;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 8px;
}

.property-promo-body {
    flex: 1 1 420px;
    min-width: 0;
}

/* 3 columns (default 6 networks => 3 cols × 2 rows), row-first flow. */
.property-promo-share,
.property-promo-custom {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.property-promo-custom {
    margin-top: 12px;
}

/* The pill — icon + label vertically centered. */
.property-promo-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid #e4e6ea;
    background: #fff;
    color: #2a2f36;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.property-promo-btn:hover,
.property-promo-btn:focus-visible {
    transform: translateY(-1px);
    border-color: #d4d7dd;
    color: #111;
}

.property-promo-btn:focus-visible {
    outline: 2px solid #2a7de1;
    outline-offset: 2px;
}

/* Icon normalizer: every icon is an identical 20px square, centered, so all
   networks (incl. inline brand SVGs) render at exactly the same size. */
.property-promo-btn > .property-promo-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.property-promo-ico svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Custom buttons may still use a Houzez/Font Awesome <i> glyph. */
.property-promo-custom-btn > i {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 1;
}

.property-promo-btn-label {
    line-height: 1.2;
}

/* Resting state: brand-colored icon, neutral label (the iconbuddy look). */
.property-promo-share-whatsapp .property-promo-ico { color: #25d366; }
.property-promo-share-viber    .property-promo-ico { color: #7360f2; }
.property-promo-share-telegram .property-promo-ico { color: #29a9eb; }
.property-promo-share-facebook .property-promo-ico { color: #1877f2; }
.property-promo-share-x        .property-promo-ico { color: #000;    }
.property-promo-share-linkedin .property-promo-ico { color: #0a66c2; }
.property-promo-share-email    .property-promo-ico { color: #4b5563; }

/* Hover/focus: fill the pill with the brand color; icon + label go white. */
.property-promo-share-whatsapp:hover, .property-promo-share-whatsapp:focus-visible { background: #25d366; border-color: #25d366; color: #fff; }
.property-promo-share-viber:hover,    .property-promo-share-viber:focus-visible    { background: #7360f2; border-color: #7360f2; color: #fff; }
.property-promo-share-telegram:hover, .property-promo-share-telegram:focus-visible { background: #29a9eb; border-color: #29a9eb; color: #fff; }
.property-promo-share-facebook:hover, .property-promo-share-facebook:focus-visible { background: #1877f2; border-color: #1877f2; color: #fff; }
.property-promo-share-x:hover,        .property-promo-share-x:focus-visible        { background: #000;    border-color: #000;    color: #fff; }
.property-promo-share-linkedin:hover, .property-promo-share-linkedin:focus-visible { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.property-promo-share-email:hover,    .property-promo-share-email:focus-visible    { background: #4b5563; border-color: #4b5563; color: #fff; }

/* Icon follows the white text on hover/focus. */
.property-promo-btn:hover .property-promo-ico,
.property-promo-btn:focus-visible .property-promo-ico { color: #fff; }

.property-promo-text {
    margin-top: 16px;
    color: #5a616b;
}

@media (prefers-reduced-motion: reduce) {
    .property-promo-btn { transition: none; }
    .property-promo-btn:hover, .property-promo-btn:focus-visible { transform: none; }
}

/* Tablets / narrower content columns: drop 3 → 2 columns. */
@media (max-width: 991.98px) {
    .property-promo-share,
    .property-promo-custom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phones: one button per row. */
@media (max-width: 575.98px) {
    .property-promo {
        gap: 18px;
    }
    .property-promo-qr svg {
        width: 150px;
        height: 150px;
    }
    .property-promo-share,
    .property-promo-custom {
        grid-template-columns: 1fr;
    }
}