/**
 * =============================================================
 * PROPERTY ACTION CARDS
 * =============================================================
 * Shared styling voor [omnicasa_virtual_tour_button]
 * en [omnicasa_appointment_button].
 *
 * Deze module gebruikt brand tokens uit `whv-tokens.css`.
 * Lokale aanpassingen: pas de --omni-action-* variabelen aan.
 * Site-brede aanpassingen: pas tokens in whv-tokens.css aan.
 * =============================================================
 */

.omni-action-card {

    /* ── Card ───────────────────────────────────────────── */
    --omni-action-bg:              var(--whv-color-overlay-white);
    --omni-action-border:          1px solid var(--whv-color-border-soft);
    --omni-action-radius:          var(--whv-radius-none);
    --omni-action-padding:         var(--whv-space-2xl);
    --omni-action-gap:             var(--whv-space-lg);

    /* ── Title ──────────────────────────────────────────── */
    --omni-action-title-font:      var(--whv-font-heading);
    --omni-action-title-size:      22px;
    --omni-action-title-weight:    300;
    --omni-action-title-color:     var(--whv-color-headline);
    --omni-action-title-spacing:   -0.594px;
    --omni-action-title-leading:   1.2;

    /* ── Button ─────────────────────────────────────────── */
    --omni-action-btn-font:        var(--whv-font-body);
    --omni-action-btn-size:        15px;
    --omni-action-btn-weight:      400;
    --omni-action-btn-color:       var(--whv-color-headline);
    --omni-action-btn-bg:          transparent;
    --omni-action-btn-border:      1px solid var(--whv-color-headline);
    --omni-action-btn-radius:      var(--whv-radius-none);
    --omni-action-btn-padding:     13px var(--whv-space-xl);
    --omni-action-btn-hover-bg:    var(--whv-color-headline);
    --omni-action-btn-hover-color: var(--whv-color-white);
    --omni-action-btn-transition:  background-color var(--whv-transition-base), color var(--whv-transition-base);

    /* ── Layout ─────────────────────────────────────────── */
    background-color: var(--omni-action-bg);
    border:           var(--omni-action-border);
    border-radius:    var(--omni-action-radius);
    padding:          var(--omni-action-padding);

    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             var(--omni-action-gap);
    text-align:      center;

    box-sizing: border-box;
}

.omni-action-card__title {
    font-family:    var(--omni-action-title-font);
    font-size:      var(--omni-action-title-size);
    font-weight:    var(--omni-action-title-weight);
    color:          var(--omni-action-title-color);
    letter-spacing: var(--omni-action-title-spacing);
    line-height:    var(--omni-action-title-leading);
    margin:         0;
}

.omni-action-card__button {
    display:         inline-block;
    font-family:     var(--omni-action-btn-font);
    font-size:       var(--omni-action-btn-size);
    font-weight:     var(--omni-action-btn-weight);
    color:           var(--omni-action-btn-color);
    background-color: var(--omni-action-btn-bg);
    border:          var(--omni-action-btn-border);
    border-radius:   var(--omni-action-btn-radius);
    padding:         var(--omni-action-btn-padding);
    text-decoration: none;
    line-height:     1;
    cursor:          pointer;
    transition:      var(--omni-action-btn-transition);
}

.omni-action-card__button:hover,
.omni-action-card__button:focus {
    background-color: var(--omni-action-btn-hover-bg);
    color:            var(--omni-action-btn-hover-color);
    text-decoration:  none;
}

/* ── Omnicasa widget-generated buttons ────────────────────
 * Wanneer widget.js de <a> vervangt door <button>, behoud
 * dezelfde look-and-feel als onze eigen knop.
 * ─────────────────────────────────────────────────────────── */
.omni-action-card button#reservation-open,
.omni-action-card button#contact-open {
    display:          inline-block !important;
    font-family:      var(--omni-action-btn-font) !important;
    font-size:        var(--omni-action-btn-size) !important;
    font-weight:      var(--omni-action-btn-weight) !important;
    color:            var(--omni-action-btn-color) !important;
    background-color: var(--omni-action-btn-bg) !important;
    border:           var(--omni-action-btn-border) !important;
    border-radius:    var(--omni-action-btn-radius) !important;
    padding:          var(--omni-action-btn-padding) !important;
    line-height:      1 !important;
    cursor:           pointer;
    transition:       var(--omni-action-btn-transition);
}

.omni-action-card button#reservation-open:hover,
.omni-action-card button#contact-open:hover {
    background-color: var(--omni-action-btn-hover-bg) !important;
    color:            var(--omni-action-btn-hover-color) !important;
}