@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');

:root {
    --sl-font-primary: "League Spartan", Arial, sans-serif;
}

.pyf-hotel-preview { background-color: var(--sl-background-color-white); border-radius: 1.5rem; }
.pyf-hotel-preview .pyf-hotel-preview-cover { overflow: hidden; border-radius: 1.5rem 1.5rem .75rem .75rem; }
.pyf-hotel-preview .pyf-hotel-preview-cover a { display: block; }
.pyf-hotel-preview .pyf-hotel-preview-cover img { transition: scale 500ms ease; display: block; }
.pyf-hotel-preview .pyf-hotel-preview-cover:hover img { scale: 1.1; }
.pyf-hotel-preview .pyf-hotel-preview-content { padding: .5rem 1rem 1rem 1rem; }
.pyf-hotel-preview .pyf-hotel-preview-content-top { display: flex; align-items: center; }
.pyf-hotel-preview .pyf-hotel-preview-content-top .pyf-hotel-preview-content-top-heading { width: 100%; }
.pyf-hotel-preview .pyf-hotel-preview-content-top .pyf-hotel-preview-content-top-heading a { text-decoration: none; }
.pyf-hotel-preview .pyf-hotel-preview-content-top .pyf-hotel-preview-content-top-heading h2 { font-size: 1.1rem !important; font-weight: bold; color: var(--sl-text-color-primary); margin: 0; }
.pyf-hotel-preview .pyf-hotel-preview-content-top .pyf-hotel-preview-content-top-heading a + div { font-size: .9rem !important; color: var(--sl-text-color-secondary); }
.pyf-hotel-preview .pyf-hotel-preview-content-top .pyf-hotel-preview-content-top-price { width: 7rem; text-align: right; }
.pyf-hotel-preview .pyf-hotel-preview-content-top .pyf-hotel-preview-content-top-price .pyf-price-text { font-size: 1.6rem; color: var(--sl-text-color-secondary); }
.pyf-hotel-preview .pyf-hotel-preview-content-top .pyf-hotel-preview-content-top-price .pyf-price-prefix { font-size: .7rem; }
.pyf-hotel-preview .pyf-hotel-preview-content-top .pyf-hotel-preview-content-top-price .pyf-price-suffix { font-size: .7rem; }
.pyf-hotel-preview .pyf-hotel-preview-content-description { font-size: .8rem; margin-top: .5rem; }
.pyf-hotel-preview .pyf-tripadvisor-review { font-size: .9rem; margin-top: .5rem; }

.pyf-hotel-stars { display: flex; font-size: .7rem; color: var(--sl-text-color-secondary); margin-bottom: .25rem; }
.pyf-hotel-stars > .fa-star { display: none; }
[data-pyf-stars="1"] > .fa-star:nth-child(1), [data-pyf-stars="2"] > .fa-star:nth-child(1), [data-pyf-stars="3"] > .fa-star:nth-child(1), [data-pyf-stars="4"] > .fa-star:nth-child(1), [data-pyf-stars="5"] > .fa-star:nth-child(1) { display: block; }
[data-pyf-stars="2"] > .fa-star:nth-child(2), [data-pyf-stars="3"] > .fa-star:nth-child(2), [data-pyf-stars="4"] > .fa-star:nth-child(2), [data-pyf-stars="5"] > .fa-star:nth-child(2) { display: block; }
[data-pyf-stars="3"] > .fa-star:nth-child(3), [data-pyf-stars="4"] > .fa-star:nth-child(3), [data-pyf-stars="5"] > .fa-star:nth-child(3) { display: block; }
[data-pyf-stars="4"] > .fa-star:nth-child(4), [data-pyf-stars="5"] > .fa-star:nth-child(4) { display: block; }
[data-pyf-stars="5"] > .fa-star:nth-child(5) { display: block; }

.pyf-tripadvisor-review { display: flex; gap: .5rem; margin-top: .75rem; }
.pyf-tripadvisor-review .pyf-tripadvisor-review-note { display: flex; gap: .125rem; }
.pyf-tripadvisor-review .pyf-tripadvisor-review-note:before { content: ''; display: block; width: 1.5rem; height: .9rem; background-image: url('https://www.playayfiesta.com/theme/PlayaYFiesta/img/2023/socials/tripadvisor.png'); background-size: contain; background-repeat: no-repeat; background-position: center; margin-right: .25rem; }
.pyf-tripadvisor-review .pyf-tripadvisor-review-note .pyf-tripadvisor-note { width: .9rem; height: .9rem; display: block; background: #00aa6c; border-radius: 100%; border: 1px solid #00aa6c; }
[data-pyf-note="1"] > .pyf-tripadvisor-note:nth-child(5), [data-pyf-note="1.5"] > .pyf-tripadvisor-note:nth-child(5),
[data-pyf-note="2"] > .pyf-tripadvisor-note:nth-child(5), [data-pyf-note="2.5"] > .pyf-tripadvisor-note:nth-child(5),
[data-pyf-note="3"] > .pyf-tripadvisor-note:nth-child(5), [data-pyf-note="3.5"] > .pyf-tripadvisor-note:nth-child(5),
[data-pyf-note="4"] > .pyf-tripadvisor-note:nth-child(5) { background: #fff; }
[data-pyf-note="4.5"] > .pyf-tripadvisor-note:nth-child(5) { background: linear-gradient(to left, #fff, #fff 45%, #00aa6c 45%, #00aa6c 100%); }
[data-pyf-note="1"] > .pyf-tripadvisor-note:nth-child(4), [data-pyf-note="1.5"] > .pyf-tripadvisor-note:nth-child(4),
[data-pyf-note="2"] > .pyf-tripadvisor-note:nth-child(4), [data-pyf-note="2.5"] > .pyf-tripadvisor-note:nth-child(4),
[data-pyf-note="3"] > .pyf-tripadvisor-note:nth-child(4) { background: #fff; }
[data-pyf-note="3.5"] > .pyf-tripadvisor-note:nth-child(4) { background: linear-gradient(to left, #fff, #fff 45%, #00aa6c 45%, #00aa6c 100%); }
[data-pyf-note="1"] > .pyf-tripadvisor-note:nth-child(3), [data-pyf-note="1.5"] > .pyf-tripadvisor-note:nth-child(3),
[data-pyf-note="2"] > .pyf-tripadvisor-note:nth-child(3) { background: #fff; }
[data-pyf-note="2.5"] > .pyf-tripadvisor-note:nth-child(3) { background: linear-gradient(to left, #fff, #fff 45%, #00aa6c 45%, #00aa6c 100%); }
[data-pyf-note="1"] > .pyf-tripadvisor-note:nth-child(2) { background: #fff; }
[data-pyf-note="1.5"] > .pyf-tripadvisor-note:nth-child(2) { background: linear-gradient(to left, #fff, #fff 45%, #00aa6c 45%, #00aa6c 100%); }

.pyf-destination { display: block; }
.pyf-destination figure { overflow: hidden; position: relative; display: block; border-radius: 1.5rem; }
.pyf-destination figure img { transition: scale 500ms ease; display: block; }
.pyf-destination:hover figure img { scale: 1.1; }
.pyf-destination figure figcaption { position: absolute; bottom: 0; left: 0; width: 100%; text-align: right; padding: 1rem; font-weight: bold; color: var(--sl-text-color-light); font-size: 1.8rem; }

h1, h2, h3 { font-family: var(--sl-font-heading); }
h1 { margin-bottom: 2rem; }
h1, h1 * { font-size: 2.4rem !important; color: var(--sl-text-color-primary) !important; font-weight: 800; line-height: 1; }
h2 { margin-bottom: 2rem; }
h2, h2 * { font-size: 2.2rem !important; color: var(--sl-text-color-secondary) !important; font-weight: 700; }
h3 { font-size: 1.8rem !important; font-weight: 600; margin-bottom: 1rem; }
.figure-img { border-radius: 1rem; }

.pyf-container > .container { margin: 3rem auto;background: #fff; border-radius: 2rem; padding: 3rem; }