:root {
    --color-primary: #e7216c;
    --color-primary-hover: #bb1e5a;
    --color-white: #fff;
    --color-grey: #f1f2f5;
    --color-black-text: #262626;
    --color-booking: #2b2b2b;
}

a, p, span, h1, h2, h3, h4, h5, h6, .navbar * {
    color: var(--color-black-text);
}

.primary {
    color: var(--color-primary);
}

.btn-shop {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn-shop:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-white);
}

/* BRANCHES */
.branch-banner .title, .branch-banner .detail {
    color: var(--color-white);
}

.branch-carousel .schedule {
    border-top: 3px solid var(--color-black-text);
    border-bottom: 3px solid var(--color-black-text);
}

/* HEADER */
header {
    background-color: var(--color-grey);
}

header nav {
    background-color: var(--color-grey);
}

/* FOOTER */
footer {
    background-color: var(--color-primary);
}

/* SLICK */
.slick-dots li.slick-active button:before {
    color: var(--color-primary) !important;
}

/* OWL CAROUSEL */
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: var(--color-primary) !important;
}
.owl-theme .owl-dots .owl-dot span {
    background: var(--color-grey) !important;
}

.owl-theme .owl-nav [class*=owl-] {
    background: var(--color-grey) !important;
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background: var(--color-primary) !important;
}

/* SCROLL */
body::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar-thumb {
    background: var(--color-primary);
}

/* Ponemos un color de fondo y redondeamos las esquinas del track */
body::-webkit-scrollbar-track, .scroll::-webkit-scrollbar-track {
    background: var(--color-grey);
}

/* RESERVAS */
.bookings form {
    background-color: var(--color-booking);
}

.bookings label {
    color: var(--color-white);
}

.bookings .form-control, .bookings .form-select {
    border-bottom: 1px solid var(--color-white);
    color: var(--color-white);
}

.bookings .form-select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='white' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
}

.bookings .form-control, .bookings .form-select {
    border-bottom: 1px solid var(--color-white);
    color: var(--color-white);
}

.bookings input[type=date].form-control::-webkit-calendar-picker-indicator {
    filter: invert(1);
}