/* Airbnb-inspired utility theme for housing surfaces and CTAs */

:root {
    --airbnb: #ff385c;
    --airbnb-rgb: 255, 56, 92;
    --airbnb-dark: #e31c5f;
    --airbnb-light: #fff1f3;
    --airbnb-border: #ffb8c4;
}

.text-airbnb {
    color: var(--airbnb) !important;
}

.link-airbnb {
    color: var(--airbnb);
}

.link-airbnb:hover,
.link-airbnb:focus {
    color: var(--airbnb-dark);
}

.bg-airbnb {
    color: white;
    background-color: var(--airbnb) !important;
}

.bg-airbnb-subtle {
    background-color: var(--airbnb-light) !important;
}

.border-airbnb {
    border-color: var(--airbnb-border) !important;
}

.btn-airbnb {
    color: white;
    background-color: var(--airbnb);
    border-color: var(--airbnb);
}

.btn-airbnb:hover,
.btn-airbnb:focus,
.btn-airbnb:active,
.btn-airbnb.active,
.show > .btn-airbnb.dropdown-toggle {
    color: white !important;
    background-color: var(--airbnb-dark) !important;
    border-color: var(--airbnb-dark) !important;
}

.btn-airbnb:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(var(--airbnb-rgb), 0.28);
}

.btn-outline-airbnb {
    color: var(--airbnb);
    border-color: var(--airbnb);
}

.btn-outline-airbnb:hover,
.btn-outline-airbnb:focus,
.btn-outline-airbnb:active,
.btn-outline-airbnb.active,
.btn-check:checked + .btn-outline-airbnb,
.btn-check:active + .btn-outline-airbnb,
.show > .btn-outline-airbnb.dropdown-toggle {
    color: white !important;
    background-color: var(--airbnb) !important;
    border-color: var(--airbnb) !important;
}

.btn-check:checked + .btn-outline-airbnb,
.btn-check:active + .btn-outline-airbnb {
    box-shadow: 0 4px 8px rgba(var(--airbnb-rgb), 0.18);
}

.btn-outline-airbnb:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(var(--airbnb-rgb), 0.22);
}

.card-airbnb {
    border: 1px solid rgba(var(--airbnb-rgb), 0.18);
    box-shadow: 0 10px 30px rgba(var(--airbnb-rgb), 0.08);
}

.badge-airbnb {
    color: var(--airbnb-dark);
    background-color: var(--airbnb-light);
}


.nav-airbnb .nav-link {
  color: var(--airbnb) !important;
}

.nav-airbnb .nav-link:hover,
.nav-airbnb .nav-link:focus,
.nav-airbnb .nav-link.active {
  color: var(--airbnb-dark) !important;
    font-weight: bold;
}