/* ============================================================
   /realestate/assets/css/re-buttons.css
   Isolated button styles — overrides main site CSS conflicts
   Loaded on every RE page
   ============================================================ */

/* ── SEARCH BUTTON ─────────────────────────────────────── */
a.re-btn-search,
button.re-btn-search,
.re-btn-search {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 32px !important;
    background: #2c5f6e !important;
    background-color: #2c5f6e !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    letter-spacing: 0.03em !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
a.re-btn-search:hover,
button.re-btn-search:hover,
.re-btn-search:hover {
    background: #1a3a42 !important;
    background-color: #1a3a42 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ── WHATSAPP BUTTON ───────────────────────────────────── */
a.re-btn-wa,
button.re-btn-wa,
.re-btn-wa {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 7px 12px !important;
    background: #25d366 !important;
    background-color: #25d366 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 0.76rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
a.re-btn-wa:hover,
button.re-btn-wa:hover,
.re-btn-wa:hover {
    background: #1da851 !important;
    background-color: #1da851 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.re-btn-wa svg {
    width: 13px !important;
    height: 13px !important;
    fill: #ffffff !important;
    stroke: none !important;
    flex-shrink: 0 !important;
}

/* ── CALL BUTTON ───────────────────────────────────────── */
a.re-btn-call,
button.re-btn-call,
.re-btn-call {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 7px 12px !important;
    background: #2c5f6e !important;
    background-color: #2c5f6e !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 0.76rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
a.re-btn-call:hover,
button.re-btn-call:hover,
.re-btn-call:hover {
    background: #1a3a42 !important;
    background-color: #1a3a42 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.re-btn-call svg {
    width: 13px !important;
    height: 13px !important;
    fill: #ffffff !important;
    stroke: none !important;
    flex-shrink: 0 !important;
}

/* ── FULL-WIDTH WA / CALL (inquiry box) ────────────────── */
a.re-btn-wa-full,
.re-btn-wa-full {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 13px 20px !important;
    background: #25d366 !important;
    background-color: #25d366 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    width: 100% !important;
}
a.re-btn-wa-full:hover, .re-btn-wa-full:hover {
    background: #1da851 !important;
    background-color: #1da851 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    opacity: 1 !important;
}
.re-btn-wa-full svg {
    width: 18px !important; height: 18px !important;
    fill: #ffffff !important; stroke: none !important; flex-shrink: 0 !important;
}

a.re-btn-call-full,
.re-btn-call-full {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 13px 20px !important;
    background: #2c5f6e !important;
    background-color: #2c5f6e !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    width: 100% !important;
}
a.re-btn-call-full:hover, .re-btn-call-full:hover {
    background: #1a3a42 !important;
    background-color: #1a3a42 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    opacity: 1 !important;
}
.re-btn-call-full svg {
    width: 18px !important; height: 18px !important;
    fill: #ffffff !important; stroke: none !important; flex-shrink: 0 !important;
}

/* ── SUBMIT BUTTON ─────────────────────────────────────── */
button.re-btn-submit,
.re-btn-submit {
    display: block !important;
    width: 100% !important;
    padding: 12px !important;
    background: #8b6f47 !important;
    background-color: #8b6f47 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
button.re-btn-submit:hover, .re-btn-submit:hover {
    background: #1a3a42 !important;
    background-color: #1a3a42 !important;
    color: #ffffff !important;
}

/* ── OUTLINE BUTTON ────────────────────────────────────── */
a.re-btn-outline,
button.re-btn-outline,
.re-btn-outline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    padding: 9px 14px !important;
    border: 1px solid #ddd8cc !important;
    border-radius: 6px !important;
    background: transparent !important;
    background-color: transparent !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    color: #2c5f6e !important;
    cursor: pointer !important;
    text-align: center !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}
a.re-btn-outline:hover,
button.re-btn-outline:hover,
.re-btn-outline:hover {
    background: #2c5f6e !important;
    background-color: #2c5f6e !important;
    color: #ffffff !important;
    border-color: #2c5f6e !important;
    text-decoration: none !important;
}

/* ── VIEW ALL LINK ─────────────────────────────────────── */
a.re-view-all,
.re-view-all {
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 0.84rem !important;
    color: #2c5f6e !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    padding-bottom: 2px !important;
}
a.re-view-all:hover, .re-view-all:hover {
    border-bottom-color: #2c5f6e !important;
    text-decoration: none !important;
}
.re-view-all svg {
    width: 14px !important; height: 14px !important;
    stroke: currentColor !important; fill: none !important;
}

/* ── NEXT / PREV FORM BUTTONS ──────────────────────────── */
button.re-btn-next, .re-btn-next {
    padding: 11px 28px !important;
    border: none !important;
    border-radius: 6px !important;
    background: #2c5f6e !important;
    background-color: #2c5f6e !important;
    color: #ffffff !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
button.re-btn-next:hover, .re-btn-next:hover {
    background: #1a3a42 !important;
    background-color: #1a3a42 !important;
    color: #ffffff !important;
}
button.re-btn-prev, .re-btn-prev {
    padding: 11px 24px !important;
    border: 1px solid #ddd8cc !important;
    border-radius: 6px !important;
    background: transparent !important;
    background-color: transparent !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 0.9rem !important;
    color: #6b6b6b !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
}
button.re-btn-prev:hover, .re-btn-prev:hover {
    background: #f5f0e8 !important;
    background-color: #f5f0e8 !important;
}

/* ── SAVE PROPERTY HEART ───────────────────────────────── */
button.re-card__save,
.re-card__save {
    position: absolute !important;
    top: 12px !important; right: 12px !important;
    width: 34px !important; height: 34px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.9) !important;
    background-color: rgba(255,255,255,0.9) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 0 !important;
}
button.re-card__save svg, .re-card__save svg {
    width: 16px !important; height: 16px !important;
    stroke: #6b6b6b !important; fill: none !important;
}
button.re-card__save.saved svg, .re-card__save.saved svg {
    stroke: #c0392b !important; fill: #c0392b !important;
}