/**********************************************************************
* Custom CSS for the Emerald template (Hotel Garni Elena)
*
* Loaded by the module "Styles/CSS" (id 192) together with menu.css
* (offcanvas menu). After changes raise the ?v= number there, so
* browsers load the new file.
*
* Contents
*   Variables
*   Toolbar (menu & logo, booking button & coupons, language switcher)
*   Logo
*   Background slider, golf player & biker
*   Booking form (slide-in panel)
*   Mega menu
*   Home page modules (about us, rooms & prices, offers, inclusive
*   services, feedback, hotline)
*   Breadcrumbs
*   Articles (general, rooms & prices, golf & bike, getting there,
*   contact, about us, offers, services)
*   Convert Forms
*   Weather module
*   Footer (news & events, hotel, partner, copyright)
*   Template background images (smaller files)
*   Contrast (accessibility)
*   Other
**********************************************************************/


/**********************************************************************
* Variables: corporate colours and sizes for easy maintenance
**********************************************************************/

:root {
    --ge-header-height: 60px;
    --ge-primary: #e3ba62;
    --ge-secondary: #5F754B;
    --ge-hover: #edc878;
    --ge-red: #922529;
    /* Same hue as --ge-primary, dark enough for TEXT on light backgrounds (5.1:1 on white) */
    --ge-gold-text: #8e6819;
    /* Gold for links on light backgrounds (owner's choice, lighter than --ge-gold-text) */
    --ge-gold-link: #b8902f;
}


/**********************************************************************
* Toolbar
**********************************************************************/

/* Make the toolbar a flex container to have the elements in one line and avoid line breaks */
#sp-toolbar .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
}

/* Logo (large screens) */
#sp-toolbar-a {
    flex: 1 1 auto !important;
    width: auto !important;
}

/* Language switcher */
#sp-toolbar-b {
    flex: 0 0 auto !important;
    width: auto !important;
    order: 2; /* Move the switcher after the coupons */
}

/* Booking button & coupons */
#sp-toolbar-c {
    flex: 0 0 auto !important;
    width: auto !important;
    order: 1; /* Move the coupons before the switcher */
}

/* Fix the toolbar to have access to e.g. the language switcher all the time */
#sp-toolbar {
    background: rgba(0, 0, 0, .75);
    position: fixed !important;
    height: var(--ge-header-height);
    padding-top: 7px !important;
    z-index: 9999 !important; /* The menu icon and the language switcher must stay accessible, the carousel overlaps them otherwise */
}


/**********************************************************************
* Toolbar - Menu & Logo
**********************************************************************/

/* Logo module in the toolbar (large screens). The hamburger itself is the template's toggler,
   which menu.css shows on all screen widths in the top left corner. */
.ge-module-toggler {
    display: flex;
    align-items: center;
}

/* Logo in the toolbar, 50px margin leaves room for the hamburger on its left */
.ge-module-toggler .site-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: 50px;
}

.ge-module-toggler .site-logo a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.ge-module-toggler .site-logo img {
    display: block;
}

/* Hamburger in the corporate colour, like the links in the toolbar */
#offcanvas-toggler .burger-icon > span {
    background-color: var(--ge-primary) !important;
}

/* Links in the toolbar in the same colour as the hamburger */
#sp-toolbar-b a,
#sp-toolbar-c a {
    color: var(--ge-primary) !important;
}

/* White while hovered or focused (coupons link, language switcher): well visible on the
   dark toolbar, red would hardly be readable there. The icon in the link needs its own
   rule, the template colours "#sp-toolbar i" gold directly. */
#sp-toolbar-b a:hover,
#sp-toolbar-b a:focus,
#sp-toolbar-c a:hover,
#sp-toolbar-c a:focus,
#sp-toolbar-b a:hover i,
#sp-toolbar-b a:focus i,
#sp-toolbar-c a:hover i,
#sp-toolbar-c a:focus i {
    color: #fff !important;
}

/* The hamburger (template toggler) lives in #sp-logo: lift its stacking context above the fixed
   toolbar (z-index 9999, earlier in the DOM) on all screen widths, otherwise the toolbar covers
   the hamburger on large screens. #sp-logo itself has no height there, so it covers nothing. */
#sp-logo {
    z-index: 9999 !important;
}

@media (max-width: 991px) {
    #sp-logo {
        top: 3px !important;
    }
}


/**********************************************************************
* Toolbar - Booking Button & Coupons
**********************************************************************/

/* Booking button in the corporate colours, colours swapped on hover */
.ge-booking-button {
    padding-top: 7px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--ge-red);
    background: var(--ge-primary);
}

.ge-booking-button:hover {
    color: var(--ge-primary);
    background: var(--ge-red);
}

/* No z-index 99, otherwise the toolbar is not clickable in this area */
.block-coupons #sp-top-c {
    z-index: 1 !important;
}

@media (max-width: 575.99px) {
    /* Hide the coupon link on small screens */
    .ge-module-coupons a {
        display: none !important;
    }

    .ge-module-coupons button {
        margin-right: 0 !important;
    }

    /* Put the rest of toolbar c to the right side */
    #sp-toolbar-c {
        margin-left: auto !important;
    }
}


/**********************************************************************
* Toolbar - Language Switcher
**********************************************************************/

/* Hide the language switcher on small screens (it is also in the offcanvas menu) */
@media (max-width: 575.99px) {
    #sp-toolbar-b {
        display: none;
    }
}


/**********************************************************************
* Logo
**********************************************************************/

/* Hide the text in the slider */
.ge-module-logo h1 {
    display: none;
}

/* Remove the default Emerald logo (can not be changed in the template settings);
   on small screens it would also overlap the hamburger */
#sp-logo .logo {
    background: none !important;
}

/* Hide the logo below the text in the slideshow */
#sp-logo-header img {
    display: none;
}

/* Show the main logo and hide our own logo/text on small screens */
@media (max-width: 991px) {
    #sp-logo-header img {
        display: block;
        width: 107px;
        height: 40px;
    }

    #sp-logo .ge-module-logo {
        display: none;
    }
}

/* Logo to the right of the hamburger, fixed to avoid scrolling with the content */
#offcanvas-toggler + .logo {
    display: block !important;
    margin-left: 50px;
    margin-top: 7px;
    position: fixed;
}

/* From 992px on the template hides the logo image and the toolbar module shows the logo;
   hide the then empty link as well, otherwise an invisible link without text stays in the
   tab order (accessibility; higher specificity than the rule above) */
@media (min-width: 992px) {
    #sp-logo #offcanvas-toggler + .logo {
        display: none !important;
    }
}


/**********************************************************************
* Background Slider
**********************************************************************/

/* Make the overlay a little bit darker */
.vegas-overlay {
    opacity: 0.7;
    background-color: rgba(53, 52, 52, 0.15);
}


/**********************************************************************
* Golf Player & Biker (round links in the slideshow)
**********************************************************************/

/* Positioning context for the two modules */
#sp-slideshow > .sp-column {
    position: relative;
}

/* Common styles of both modules */
#sp-slideshow .ge-module-golf,
#sp-slideshow .ge-module-bike {
    position: absolute;
    bottom: 40px;
    z-index: 20;
    margin: 0 !important;
    padding: 0 !important;
}

/* Golf player bottom left, biker bottom right */
#sp-slideshow .ge-module-golf {
    left: 25px;
}

#sp-slideshow .ge-module-bike {
    right: 25px;
}

/* Common image styles: round, dark background */
#sp-slideshow .ge-module-golf img,
#sp-slideshow .ge-module-bike img {
    display: block;
    max-height: 250px;
    width: auto;
    padding: 20px;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    background: rgba(0, 0, 0, 0.75);
    transition: max-height 0.3s ease;
}

/* Tablets / medium-sized screens */
@media (max-width: 1199px) {
    #sp-slideshow .ge-module-golf img,
    #sp-slideshow .ge-module-bike img {
        max-height: 180px;
        padding: 15px;
    }
}

/* Small tablets / large smartphones */
@media (max-width: 991px) {
    #sp-slideshow .ge-module-golf img,
    #sp-slideshow .ge-module-bike img {
        max-height: 140px;
        padding: 12px;
    }

    #sp-slideshow .ge-module-golf {
        left: 15px;
    }

    #sp-slideshow .ge-module-bike {
        right: 15px;
    }
}

/* Smartphones */
@media (max-width: 767px) {
    #sp-slideshow .ge-module-golf img,
    #sp-slideshow .ge-module-bike img {
        max-height: 100px;
        padding: 10px;
    }

    #sp-slideshow .ge-module-golf,
    #sp-slideshow .ge-module-bike {
        bottom: 25px;
    }
}

/* Very small smartphones */
@media (max-width: 480px) {
    #sp-slideshow .ge-module-golf img,
    #sp-slideshow .ge-module-bike img {
        max-height: 75px;
        padding: 8px;
    }
}


/**********************************************************************
* Booking Form (slide-in panel)
*
* The form starts off-canvas to the right and slides in on toggle
* (see custom.js). It is fixed to the viewport so it stays visible
* while scrolling.
**********************************************************************/

#sp-booking {
    background-color: rgba(0, 0, 0, .8) !important;
    position: fixed;
    top: calc(var(--ge-header-height, 0px) + 40px);
    right: 0;
    width: 100%;
    max-width: 480px;
    max-height: calc(100dvh - var(--ge-header-height, 0));
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
}

/* Slide in when active */
#sp-booking.is-visible {
    transform: translateX(0);
}

/* Make the input elements better readable */
.checkin_module.datefield.form-control,
.checkout_module.datefield.form-control,
#room_opt1adults,
#children_ages_1,
#room_opt1children_ages1,
#room_opt1children_ages2 {
    opacity: 0.8;
    background-color: #ffffff !important;
}

/* The date fields are read-only and open the datepicker on click: no text caret (e.g. after
   keyboard focus), no text selection and a pointer cursor. On touch screens custom.js also
   prevents the focus, which avoids the blue caret handle ("drop"). */
.checkin_module.datefield,
.checkout_module.datefield {
    caret-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}


/**********************************************************************
* Mega Menu
**********************************************************************/

/* Customer wants no mega menu at all (navigation via offcanvas menu only) */
#sp-mega-menu {
    display: none;
}


/**********************************************************************
* Home - About us (home page only)
**********************************************************************/

/* Remove the background image */
#about-us {
    background-image: none;
}

/* More distance to the other modules */
.ge-home-about-us {
    margin-top: 5rem;
    margin-bottom: 6rem;
}

/* The welcome title and the four features are h4 headings (a correct outline below the
   h3 "Ferien im Tessin" for screen readers; formerly h6 and h5). The template styles
   headings by their level, so these rules keep the look of the former h6 / h5. */

/* Welcome title: look of the former h6, larger, in the gold for text (contrast) */
.ge-home-about-us .ge-about-welcome {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.5rem;
    color: var(--ge-gold-text);
}

/* Features below the icons: look of the former h5 */
.ge-home-about-us .ge-about-feature {
    font-family: Domine, sans-serif;
    font-size: 18px;
}

/* Center the title on small screens */
@media (max-width: 767px) {
    .ge-home-about-us .ge-about-welcome {
        text-align: center;
    }
}


/**********************************************************************
* Module - Rooms & Prices (also used in the article "Rooms & Prices"
* via the snippet "room-types-module")
**********************************************************************/

/* Make sure items in the same row have the same height */
.row.solidres-module-roomtype {
    display: flex;
    align-items: stretch;
}

.row.solidres-module-roomtype > [class*="col-"] {
    display: flex;
}

.row.solidres-module-roomtype .solidres-module-roomtype-item {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Customer does not want to have the description inside the image */
@media (min-width: 991px) {
    .solidres-module-roomtype-item .roomtype-desc,
    .solidres-module-roomtype-item .roomtype-detail {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
    }

    .solidres-module-roomtype-item {
        outline: 1px solid #e3b961;
        outline-offset: 3px;
    }

    .roomtype-desc {
        padding: 1rem;
        margin-top: 7px;
        background-color: #f8f8f8;
    }
}

/* Room type title in red, at most 3 lines. The title is h3 (heading outline, see the override
   html/mod_sr_roomtypes/default_carousel.php); font settings keep the look of the former h4. */
.roomtype-detail h4,
.roomtype-detail h3.ge-roomtype-name {
    font-family: Domine, sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    margin-top: 0;
    color: var(--ge-red);
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    padding-right: 10px;
}

/* Room type details (size, bed, guests) as inline flex items: icon and text stay in one line */
.roomtype-detail > p {
    display: inline-flex;
    align-items: center;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
}

/* More distance between the icon and the text */
.roomtype-detail > p i {
    margin-right: .5rem;
}

/* More distance to the other modules */
.ge-module-rooms-and-prices {
    margin-bottom: 8rem;
}

/* More distance below the heading */
.ge-module-rooms-and-prices > h3 {
    margin-bottom: 5rem;
}

/* Offer names are h4 (a correct heading outline below the h3 module title; the template
   uses h5): keep the look and hover colour the template gives the h5 */
.solidres-module-coupon-item .ge-coupon-title {
    font-size: 18px;
    text-transform: none; /* the template writes h4 in capitals */
    transition: all .3s ease-out;
}

.solidres-module-coupon-item:hover .ge-coupon-title {
    color: #e3b961;
}

/* The whole item of the room type, offer and service modules is clickable
   (see "Clickable Cards" in templates/emerald/local/js/custom.js) */
.solidres-module-roomtype-item,
.solidres-module-coupon-item,
.solidres-module-extra-item {
    cursor: pointer;
}

/* Bigger carousel control buttons, easier to click on mobile devices */
.carousel-control-prev,
.carousel-control-next {
    background-color: white;
    width: 7%;
}

/* Carousel control icons in the corporate colour to make them better visible */
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffd84d'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f5c542'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}


/**********************************************************************
* Module - Inclusive Services (home page only)
**********************************************************************/

/* The button has a "CHF 0.00" label which we do not want */
.ge-module-services a.btn.btn-primary {
    visibility: hidden;
}

/* More distance to the other modules */
.ge-module-services {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

/* More distance below the heading */
.ge-module-services h3 {
    margin-bottom: 5rem;
}

/* Images of the extra items in a uniform aspect ratio */
.solidres-module-extra-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1.8 / 1;
    object-fit: cover;
}


/**********************************************************************
* Module - Feedback (home page only)
**********************************************************************/

/* Feedback title in white */
.ge-module-feedback h3 {
    color: white;
    word-break: break-word;
}

/* Customer names are h4 (a correct heading outline below the h3 module title; formerly
   h5): keep the look the template gives the h5 (gold bar below the text) */
.feedback_name .ge-feedback-name {
    font-size: 18px;
    text-transform: none; /* the template writes h4 in capitals */
    margin: -15px -20px -20px;
    padding: 10px;
    background-color: #e3b961;
    color: #fff;
}

/* More distance to the headline */
#feedbacks {
    margin-top: 50px;
}

/* Set a min-height to avoid content jumping */
#sp-feedbacks .container-inner {
    min-height: 450px;
}

/* Sets the distance to the indicator buttons */
#sp-feedbacks .carousel-inner {
    min-height: 220px;
}

/* Increase the font size of the feedback text */
.feedback_txt {
    font-size: 1rem;
    line-height: 1.5rem;
    font-style: italic;
}

/* Move the indicator buttons to the top and add some space between them */
.carousel-indicators {
    position: absolute !important;
    margin-top: 0;
    top: -40px;
    gap: 10px;
}

/* Remove the default margin of the indicator buttons, the gap spaces them evenly */
.carousel-indicators button {
    margin: 0;
}

@media (max-width: 991.99px) {
    #sp-feedbacks .container-inner {
        min-height: 530px;
    }
}


/**********************************************************************
* Module - Hotline (.ge-module-hotline)
**********************************************************************/

.bookphone-img {
    overflow: hidden;
}

.bookphone-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bookphone-time {
    width: 40% !important;
    margin-bottom: 50px;
}

/* Heading outline: the module title is h2 (a page section, formerly h4), the phone number and
   the closing sentence are paragraphs (formerly h4 / h5, no headings). Same look as before. */
.bookphone-detail .ge-h4,
.bookphone-detail .ge-h5 {
    font-family: Domine, sans-serif;
    font-weight: 500;
    line-height: 1.2;
}

.bookphone-detail .ge-h4 {
    font-size: 22px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: .5rem;
}

.bookphone-detail .ge-h5 {
    font-size: 18px;
}

@media (max-width: 1199px) {
    .bookphone-time {
        width: 50% !important;
        margin-bottom: 30px;
    }
}

@media (max-width: 991px) {
    .bookphone-time {
        width: 40% !important;
        margin-bottom: 15px;
    }
}


/**********************************************************************
* Breadcrumbs
**********************************************************************/

/* Move the breadcrumbs a little bit down to avoid the background image
   of the header when auto scrolling to the content */
#sp-breadcrumbs {
    margin-top: 10px;
}


/**********************************************************************
* Articles
**********************************************************************/

/* More space above the section headings in articles, except for the first one.
   h3 = articles that still use h2 > h3; h2.ge-h3 = the former h3 (see "Heading outline");
   the golf subheadings (h3.ge-h5) never had this space. */
[itemprop="articleBody"] h3:not(:first-of-type):not(.ge-h5),
[itemprop="articleBody"] h2.ge-h3:not(:first-of-type) {
    margin-top: 3rem;
}

/* Heading outline: the page title is h1, so the article headings are h2 (formerly h3) and the
   golf subheadings h3 (formerly h5). The template styles headings by their level, so these
   rules keep the former look. Headings with a Bootstrap size class (.h4/.h5, rooms & prices)
   keep the size of that class. */
[itemprop="articleBody"] h2.ge-h3 {
    font-family: "Old Standard TT", sans-serif;
    font-weight: 500;
    line-height: 1.2;
}

[itemprop="articleBody"] h2.ge-h3:not(.h4):not(.h5) {
    font-size: 30px;
}

[itemprop="articleBody"] h3.ge-h5 {
    font-family: Domine, sans-serif;
    font-size: 18px;
    line-height: 1.2;
}

/* Hide the social share buttons in articles */
.article-ratings-social-share {
    display: none !important;
}


/**********************************************************************
* Articles - Rooms & Prices (incl. the single room type pages)
**********************************************************************/

.ge-booking-button-now {
    border: 1px solid var(--ge-red);
    background: var(--ge-primary);
    color: var(--ge-red);
    /* This should take effect with the btn-lg class, but it does not: */
    padding: 0.5rem 1rem !important;
    font-size: 1.25rem;
}

.ge-booking-button-now:hover {
    border-color: var(--ge-primary);
    background: transparent;
    color: var(--ge-red);
}

/* More space above the description text */
.unstyled.more_desc {
    margin-top: 3rem;
}

/* More space above the gallery */
.sr-gallery-container {
    margin-top: 2rem;
}

/* Override the annoying transitions of the gallery lightbox (VenoBox, only exists while open) */
.vbox-content.swipe-left,
.vbox-content.swipe-right {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* More space above and below the booking button */
#solidres div.call_to_action {
    margin-top: 4rem;
    margin-bottom: 5rem;
}


/**********************************************************************
* Articles - Golf & Bike
**********************************************************************/

/* Bold subheadings (discount per golf club) in the secondary colour */
#golf > h5,
#golf > h3.ge-h5 {
    font-weight: bold;
    color: var(--ge-secondary);
}

/* Fixed-size circular image, text flows around it */
.golf-image {
    width: 220px;
    height: 220px;
    object-fit: cover;        /* Crops the image to fit without distortion */
    border-radius: 50%;       /* Creates a perfect circle */
    shape-outside: circle();  /* Makes the text flow around the circular shape */
}

.golf-image-right {
    float: right;             /* Image on the right, text wraps on the left */
    shape-outside: circle(50% at 60% 50%); /* Slight offset for a smoother text flow */
    margin-left: 50px;
    margin-bottom: 15px;
}

.golf-image-left {
    float: left;              /* Image on the left, text wraps on the right */
    shape-outside: circle(50% at 40% 50%);
    margin-right: 75px;
    margin-bottom: 15px;
}

/* Stack the image above the text on screens narrower than 500px */
@media (max-width: 499px) {
    .golf-image,
    .golf-image-right,
    .golf-image-left {
        float: none;          /* No float, so the image sits above the text */
        display: block;       /* Block-level for centering */
        margin: 0 auto 20px;  /* Centered horizontally with spacing below */
        shape-outside: none;  /* No circular text wrapping */
    }
}


/**********************************************************************
* Articles - Getting There
**********************************************************************/

/* Airport list: limited height, scrollable */
.ge-plane {
    max-height: 330px;
    overflow: scroll;
}


/**********************************************************************
* Articles - Contact
**********************************************************************/

/* Background image for the form */
.ge-contact-page .convertforms {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
        url("../../../../images/hotel/contact-form-background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Remove the space on the left side */
.ge-contact-page .row > .col-lg-6:first-child {
    padding-left: 0;
}

/* Align the contact form to the right */
.ge-contact-page .row > .col-lg-6:last-child {
    display: flex;
    justify-content: flex-end;
}

/* Smaller screens: remove the space on the right side and center the contact form */
@media (max-width: 991.98px) {
    .ge-contact-page .row > .col-lg-6:last-child {
        padding-right: 0;
        justify-content: center;
    }
}


/**********************************************************************
* Articles - About us
**********************************************************************/

/* Scissor-cut effect for the team photo, with a drop shadow and a caption below it */
.scissor-cut-wrapper {
    float: right;
    margin: 0 0 1.5rem 1.5rem;
    filter: drop-shadow(3px 4px 6px rgba(0, 0, 0, 0.25));
}

/* Apply the irregular SVG clip-path (defined in the article) to the image */
.scissor-cut-wrapper img {
    display: block;
    width: 600px;
    max-width: 100%;
    height: auto;
    clip-path: url(#scissor-clip);
}

/* Caption below the image */
.scissor-caption {
    margin-top: 0.6rem;
    padding: 0 0.5rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.95rem;
    font-style: italic;
    color: #4a4a4a;
    text-align: center;
    line-height: 1.4;
}

/* Medium screens */
@media (max-width: 1199.99px) {
    .scissor-cut-wrapper img {
        width: 450px;
    }
}

/* Small screens: center the complete image wrapper */
@media (max-width: 767.99px) {
    .scissor-cut-wrapper {
        width: 100%;
        float: none;
        margin: 0 auto 1.5rem auto !important;
    }

    .scissor-cut-wrapper img {
        width: 100%;
        max-width: 100%;
    }
}


/**********************************************************************
* Articles - Offers
**********************************************************************/

/* Replace the background image of the template with our own */
#sp-coupons {
    /* Plain url() first as fallback for browsers without image-set(); image-set() lets the
       browser pick the first format it supports (AVIF, WebP, else JPEG) */
    background-image: url("../../../../images/hotel/coupons/background-tessin-mountains-1900x615.jpg");
    background-image: image-set(
        url("../../../../images/hotel/coupons/background-tessin-mountains-1900x615.avif") type("image/avif"),
        url("../../../../images/hotel/coupons/background-tessin-mountains-1900x615.webp") type("image/webp"),
        url("../../../../images/hotel/coupons/background-tessin-mountains-1900x615.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Phones: the box is roughly square, an 800 px wide centre crop covers it at the same scale */
@media (max-width: 767px) {
    #sp-coupons {
        background-image: url("../../../../images/hotel/coupons/background-tessin-mountains-800x615.jpg");
        background-image: image-set(
            url("../../../../images/hotel/coupons/background-tessin-mountains-800x615.avif") type("image/avif"),
            url("../../../../images/hotel/coupons/background-tessin-mountains-800x615.webp") type("image/webp"),
            url("../../../../images/hotel/coupons/background-tessin-mountains-800x615.jpg") type("image/jpeg"));
    }
}

/* Grid for an even horizontal and vertical spacing between the offers */
.offers-grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 4rem;
    row-gap: 4rem;
}

/* Offer cards with a background image and a semi-transparent white overlay (::before, 90 %)
   to keep the text readable; the card content is placed above the overlay via z-index */
.offer-card {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.offer-card .list-group-item {
    background-color: transparent;
}

.offer-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: 0;
}

.offer-card .card-body {
    position: relative;
    z-index: 1;
}

/* Background image per offer (images/hotel/coupons, 400x220 pixels) */
.offer-4for3 {
    background-image: url("../../../../images/hotel/coupons/detailed-bathroom-washbasin-400x220.jpg");
}

.offer-7for6 {
    background-image: url("../../../../images/hotel/coupons/cappuccino-on-a-sun-lounger-400x220.jpg");
}

.offer-senior {
    background-image: url("../../../../images/hotel/coupons/walking-seniors-400x220.jpg");
}

.offer-golf {
    background-image: url("../../../../images/hotel/coupons/golf-ball-on-green-400x220.jpg");
}

/* Two offers per row on larger screens */
@media (min-width: 992px) {
    .offers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/**********************************************************************
* Articles - Services
**********************************************************************/

/* Service cards: same principle as the offer cards (background image + white overlay) */
.service-card {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.service-card .list-group-item,
.service-card .alert-light {
    background-color: transparent;
}

.service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: 0;
}

.service-card .card-body {
    position: relative;
    z-index: 1;
}

/* Background image per service (images/hotel/services, 460x300 pixels) */
.service-breakfast {
    background-image: url("../../../../images/hotel/services/free-breakfast-460x300.jpg");
}

.service-parking {
    background-image: url("../../../../images/hotel/services/free-parking-460x300.jpg");
}

.service-pool {
    background-image: url("../../../../images/hotel/services/free-swimming-pool-460x300.jpg");
}


/**********************************************************************
* Convert Forms
**********************************************************************/

/* Background colour of the success message (default dark green), shown after sending a form */
.convertforms.cf-success .cf-response {
    background-color: var(--ge-primary);
}

/* Avoid content jumping while the captcha is loading */
#zen-captcha,
.zenc-captcha {
    height: 76px;
    min-height: 76px;
}


/**********************************************************************
* Module - Weather
**********************************************************************/

/* More space below the weather module on smaller screens */
@media (max-width: 991px) {
    .box-weather {
        margin-bottom: 20px;
    }
}


/**********************************************************************
* Footer
**********************************************************************/

/* Border at the bottom of the footer to separate it from the other modules */
#sp-bottom-wrapper {
    border-bottom: 1px solid var(--ge-primary);
}


/**********************************************************************
* Footer - News & Events
**********************************************************************/

/* Remove the padding on the left side of the menu to align it with the other footer modules */
.ge-news-and-events .menu {
    padding-left: 0 !important;
}

/* Icon after the menu text for links that open in a new tab */
.ge-news-and-events .menu > li > a[target="_blank"] {
    display: flex !important;
    align-items: center;
}

.ge-news-and-events .menu > li > a[target="_blank"] > span[class*="fa-"] {
    order: 2;
    margin-left: 0.5rem;
    margin-right: 0 !important;
    width: auto;
}


/**********************************************************************
* Footer - Hotel
**********************************************************************/

/* Remove the Emerald logo in the footer */
.logo-bottom .sp-module-title {
    background: none !important;
    padding-left: 47px !important;
    height: 36px;
}

/* Remove the padding on small screens */
@media (max-width: 991.98px) {
    .logo-bottom .sp-module-title {
        padding-left: 0 !important;
    }
}


/**********************************************************************
* Footer - Partner
**********************************************************************/

/* More space above and below the partner module, border to separate it from the other modules */
.ge-module-partner {
    background: transparent;
    margin-top: 9rem !important;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--ge-primary);
}

/* Module title in white (better readable on the dark background), more space below it */
.ge-module-partner h3.sp-module-title {
    color: white;
    margin-bottom: 6rem;
}

/* Partner names in the corporate colour */
.ge-module-partner h3 {
    color: var(--ge-primary);
}


/**********************************************************************
* Footer - Copyright
**********************************************************************/

/* Grid: text centered, language switcher on the right side */
#copyright .copyright-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    color: rgb(248, 245, 245);
}

#copyright .copyright-inner > div:last-child {
    justify-self: end;
    margin-right: 10px; /* Small margin to have the switcher in line with the top border */
}

#copyright p {
    margin: 0;
}

/* Small screens: copyright text and language switcher stacked */
@media (max-width: 767px) {
    #copyright .copyright-inner {
        grid-template-columns: 1fr;
        gap: 10px;
        text-align: center;
    }

    #copyright .copyright-inner > div:last-child {
        justify-self: center;
    }
}


/**********************************************************************
* Template background images: smaller files (PageSpeed)
*
* Same pictures as the template's bg_feedbacks.jpg / bg_bottom.jpg (each
* ~300 KB), recompressed as AVIF/WebP/JPEG in local/images (script:
* _raw/pagespeed-2026-10-14/make_images.py). The template shows them at
* natural size ("no-repeat center bottom"), so the -992 variants for
* smaller screens are centre crops: the visible part stays identical.
**********************************************************************/

.block-feedbacks {
    background-image: url("../images/bg_feedbacks.jpg");
    background-image: image-set(
        url("../images/bg_feedbacks.avif") type("image/avif"),
        url("../images/bg_feedbacks.webp") type("image/webp"),
        url("../images/bg_feedbacks.jpg") type("image/jpeg"));
}

#sp-bottom-wrapper {
    background-image: url("../images/bg_bottom.jpg");
    background-image: image-set(
        url("../images/bg_bottom.avif") type("image/avif"),
        url("../images/bg_bottom.webp") type("image/webp"),
        url("../images/bg_bottom.jpg") type("image/jpeg"));
}

@media (max-width: 991px) {
    .block-feedbacks {
        background-image: url("../images/bg_feedbacks-992.jpg");
        background-image: image-set(
            url("../images/bg_feedbacks-992.avif") type("image/avif"),
            url("../images/bg_feedbacks-992.webp") type("image/webp"),
            url("../images/bg_feedbacks-992.jpg") type("image/jpeg"));
    }

    #sp-bottom-wrapper {
        background-image: url("../images/bg_bottom-992.jpg");
        background-image: image-set(
            url("../images/bg_bottom-992.avif") type("image/avif"),
            url("../images/bg_bottom-992.webp") type("image/webp"),
            url("../images/bg_bottom-992.jpg") type("image/jpeg"));
    }
}


/**********************************************************************
* Contrast (accessibility, WCAG 2.1 AA)
*
* The corporate gold #e3b961 stays for backgrounds, icons and text on
* dark backgrounds. As TEXT on white it only reaches 1.84:1 (4.5:1 is
* needed, 3:1 for large headings), so text on light backgrounds uses
* --ge-gold-text, links --ge-gold-link (lighter, owner's choice).
**********************************************************************/

/* Gold text (not links) on light backgrounds: page titles, room names
   (the welcome title of "about us" is set in its own rule) */
.article-details .article-header h1,
#solidres > h3 {
    color: var(--ge-gold-text);
}

/* Links on light backgrounds: in the texts, tabs, phone number of the hotline, breadcrumbs.
   Note: #b8902f reaches 3:1 on white (WCAG asks 4.5:1 for normal text) - owner decision */
#about-us a,
.article-details a:not(.btn),
.article-details .nav-tabs .nav-link:not(.active),
.bookphone-detail a,
a.pathway {
    color: var(--ge-gold-link);
}

/* The same links in the corporate red while hovered or focused, so the visitor sees that it
   is a link (the template's own hover colour is the same as the normal one) */
#about-us a:hover,
#about-us a:focus,
.article-details a:not(.btn):hover,
.article-details a:not(.btn):focus,
.article-details .nav-tabs .nav-link:not(.active):hover,
.article-details .nav-tabs .nav-link:not(.active):focus,
.bookphone-detail a:hover,
.bookphone-detail a:focus,
a.pathway:hover,
a.pathway:focus {
    color: var(--ge-red);
}

/* Grey text on the beige boxes (weather, offers): #666 instead of #707070 (5.0:1).
   The weather widget sets its colours inline, hence !important there. */
.ge-module-weather,
.ge-module-weather .small {
    color: #666 !important;
}

/* Offer names: not while hovering, the template turns them gold then */
.solidres-module-coupon-item:not(:hover) .ge-coupon-title {
    color: #666;
}

/* "Booking hours" box (DE and IT): corporate red on the gold background instead of white
   (4.5:1, like the booking button in the toolbar) */
.bookphone-time {
    color: var(--ge-red) !important;
}

/* Contact form button in the corporate red instead of Convert Forms' blue (8.3:1) */
.convertforms .cf-btn {
    background-color: var(--ge-red) !important;
    border-color: var(--ge-red) !important;
    color: #fff !important;
}


/**********************************************************************
* Other
**********************************************************************/

/* The default colour is blue, which does not fit the corporate colours at all */
.btn-primary {
    background-color: var(--ge-hover) !important;
    border-color: var(--ge-hover) !important;
    color: var(--ge-red) !important;
}

/* Icons in the corporate red (room type details, offers, search button) */
.roomtype-detail .fa-check,
.fa-gift,
.fa-search {
    color: var(--ge-red) !important;
}

/* Use our own title icon */
.preset1 .sp-module-title {
    background: url("../../../../images/emerald/icon_title1.png") no-repeat center bottom;
    z-index: 9999;
}