/* Hand-written adjustments on top of the generated skirental.css: things the original site did
   with Vue/Nuxt features (background-image styles, icon webfont) that are done differently here. */

/* Material Design Icons are inline SVGs instead of the webfont */
.mdi { display: inline-block; }
.mdi svg { width: 1em; height: 1em; vertical-align: -.125em; }

/* Chevron glyphs the original drew with the MDI font in ::after / ::before */
.sk-site .show-more a::after,
.sk-site .v-root button::after,
.sk-site .price-info li::before {
    content: "" !important;
    font: inherit;
    background-color: currentColor;
    -webkit-mask: var(--sk-chevron) center / 1em 1em no-repeat;
    mask: var(--sk-chevron) center / 1em 1em no-repeat;
    height: 1em;
}
.sk-site .show-more a::after,
.sk-site .v-root button::after { --sk-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z'/%3E%3C/svg%3E"); }
.sk-site .show-more a::after { font-size: 2.5em; margin-bottom: 8px; }
.sk-site .v-root button::after { font-size: 45px; }
.sk-site .price-info li::before {
    --sk-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/%3E%3C/svg%3E");
    width: 1em;
    top: .5em;
}

/* Header photos: the original used background-image; here an editable image layer behind the overlay */
.sk-site .page-header > .sk-page-header-bg,
.sk-site .section-container > .sk-section-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.sk-site .sk-page-header-bg div,
.sk-site .sk-page-header-bg picture,
.sk-site .sk-section-bg div,
.sk-site .sk-section-bg picture { display: block; width: 100%; height: 100%; }
.sk-site .sk-page-header-bg img,
.sk-site .sk-section-bg img {
    width: 100%;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: left center;
}
.sk-site .section-container.frama .sk-section-bg img { object-position: 80% center; }
.sk-site .section-container.privat .sk-section-bg img { object-position: 40% center; }
.sk-site .page-header::after,
.sk-site .section-container::after { pointer-events: none; }

/* Sidebar contact badges: CMS rich text instead of the original plain <p>/<a> */
.sk-site .badges .media-content p { margin: 0; }
.sk-site .badges .media-content a { color: #fff; white-space: nowrap; display: block; }
.sk-site .badges .media-content a:hover { color: #fff; text-decoration: underline; }

/* Footer contacts: icon + CMS block side by side (the block may contain extra wrappers in admin mode) */
.sk-site .footer .content > div { display: flex; align-items: center; gap: .3em; color: #fff; }
.sk-site .footer .content > div > [cw-b-text] p { margin: 0; }
.sk-site .footer .content a { color: #f3f2f0; }
.sk-site .footer .content a:hover { color: #f3f2f0; text-decoration: underline; }

.sk-site .footer .content > div > [cw-b-text] { font-size: 1em; margin: 0; padding: 0; border: 0; min-width: 2em; }

/* Cross-link to the other sub-site (Penzion / Půjčovna): icon drawn inside the editable link */
.sk-site .menu .sk-cross-link a::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .3em;
    vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: var(--sk-icon) center / contain no-repeat;
    mask: var(--sk-icon) center / contain no-repeat;
    --sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19%2C7H11V14H3V5H1V20H3V17H21V20H23V11A4%2C4 0 0%2C0 19%2C7M7%2C13A3%2C3 0 0%2C0 10%2C10A3%2C3 0 0%2C0 7%2C7A3%2C3 0 0%2C0 4%2C10A3%2C3 0 0%2C0 7%2C13Z'/%3E%3C/svg%3E");
}
.sk-site.is-privat .menu .sk-cross-link a::before {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -.2em;
    --sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M432 96c26.5 0 48-21.5 48-48S458.5 0 432 0s-48 21.5-48 48 21.5 48 48 48zm73 356.1c-9.4-9.4-24.6-9.4-33.9 0-12.1 12.1-30.5 15.4-45.1 8.7l-135.8-70.2 49.2-73.8c12.7-19 10.2-44.5-6-60.6L293 215.7l-107-53.1c-2.9 19.9 3.4 40 17.7 54.4l75.1 75.2-45.9 68.8L35 258.7c-11.7-6-26.2-1.5-32.3 10.3-6.1 11.8-1.5 26.3 10.3 32.3l391.9 202.5c11.9 5.5 24.5 8.1 37.1 8.1 23.2 0 46-9 63-26 9.3-9.3 9.3-24.5 0-33.8zM120 91.6l-11.5 22.5c14.4 7.3 31.2 4.9 42.8-4.8l47.2 23.4c-.1.1-.1.2-.2.3l114.5 56.8 32.4-13 6.4 19.1c4 12.1 12.6 22 24 27.7l58.1 29c15.9 7.9 35 1.5 42.9-14.3 7.9-15.8 1.5-35-14.3-42.9l-52.1-26.1-17.1-51.2c-8.1-24.2-40.9-56.6-84.5-39.2l-81.2 32.5-62.5-31c.3-14.5-7.2-28.6-20.9-35.6l-11.1 21.7h-.2l-34.4-7c-1.8-.4-3.7.2-5 1.7-1.9 2.2-1.7 5.5.5 7.4l26.2 23z'/%3E%3C/svg%3E");
}

/* Rooms (/privat/pokoje): every other room mirrored like the original's .is-row-revert;
   photos: one wide, two below it */
.sk-site .v-pokoje .sk-room:nth-child(even) { flex-direction: row-reverse; }
.sk-site .v-pokoje .gallery-wrapper .img-wrapper img { object-fit: cover; }
.sk-site .v-pokoje .sk-ghost { pointer-events: none; }

/* Engine admin UI is fixed-positioned; keep its wrapper from adding height below the page */
.cw-admin { height: 0; }

/* "Kontaktujte nás" arrow: the glyph box of the icon font covered the link's underline */
.sk-site .contact-modal .mdi { vertical-align: -.4em; padding-bottom: .1em; }

/* Logos: let the <img> rendered by CWImg take part in the brand's flex layout like the original <img> */
.sk-site .navbar-brand [cw-b-img],
.sk-site .navbar-brand picture { display: contents; }

/* Form result messages (the original site had no visible confirmation) */
.sk-site .notification { padding: 1em 1.25em; margin-bottom: 1.5em; color: #fff; }
.sk-site .notification.is-success { background: #96c; }
.sk-site .notification.is-danger { background: #f14668; }

/* Ghost headings behind the content (z-index:-1) must be clickable while editing */
.sk-site .title.is-disabled.cursor-pointer { z-index: 1; }
.sk-site .title.is-disabled.cursor-pointer ~ .content { position: relative; z-index: 2; }

/* Frama price list: CWTable wrapper stands in for the original <figure class="table"> */
.sk-site .content .table { margin: 0 2em 1.5em; text-align: center; overflow-x: auto; }
.sk-site .content .table table { width: 100%; }

/* Content areas: spacing comes from the original typography (collapsing margins), not from the
   Engine's flex column with gap — outside edit mode only, the editor needs its own layout */
.sk-site [cw-content-area] > .flex-grow:not(:has(.cursor-pointer)) { display: block; }
/* ...and a text block followed by another block keeps the paragraph margin it had in one rich text */
.sk-site [cw-content-area] .group\/block:not(:last-child) [cw-b-text] > :last-child { margin-bottom: 1em; }

/* Forms (booking + contact modal) */
.sk-site .sk-form .label { font-weight: 500; font-size: .875rem; color: #16171b; margin-bottom: .4em; }
.sk-site .sk-form .sk-required { color: #96c; }
.sk-site .sk-form .input,
.sk-site .sk-form .textarea {
    border: 1px solid #d5d5d5;
    border-radius: 2px;
    box-shadow: none;
    height: 2.75em;
    transition: border-color .2s, box-shadow .2s;
}
.sk-site .sk-form .textarea { height: auto; min-height: 9em; padding: .75em; resize: vertical; }
.sk-site .sk-form .input:hover,
.sk-site .sk-form .textarea:hover { border-color: #b5b5b5; }
.sk-site .sk-form .input:focus,
.sk-site .sk-form .textarea:focus { border-color: #96c; box-shadow: 0 0 0 .2em rgba(153, 102, 204, .15); }
.sk-site .sk-form .input::placeholder,
.sk-site .sk-form .textarea::placeholder { color: #b5b5b5; }
.sk-site .sk-form .field:not(:last-child) { margin-bottom: 1.25em; }
.sk-site .sk-form .button.is-primary { height: 3em; padding: 0 2.25em; font-size: 1rem; border-radius: 2px; }

.sk-site .sk-booking { max-width: 52em; }
.sk-site .sk-booking .sk-form-row { margin: 0 -.75rem !important; }
.sk-site .sk-booking .sk-form-row > .column { padding-top: 0; padding-bottom: 1.25em; }
.sk-site .sk-booking .form-group { margin-bottom: 5em !important; }
.sk-site .sk-booking .sk-form-title {
    font-family: Playfair Display, serif;
    font-size: 1.5em;
    color: #16171b;
    margin-bottom: 1em;
}
.sk-site .sk-booking .sk-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin-top: 2em;
}
.sk-site .sk-booking .sk-form-hint { margin: 0; font-size: .875em; color: #8a8a8a; }
.sk-site .sk-booking-sent { max-width: 52em; line-height: 1.7; }

/* Privat price info: the original separated the price headline with an empty spacer heading */
.sk-site .price-info [cw-content-area] h2 { margin-bottom: 2.82em; }

/* Edit mode on dark backgrounds: Engine highlights editable blocks with a light fill — keep text readable */
.sk-site :is(.footer, .main-navigation, .page-header, .section-container) .cursor-pointer.bg-cw-soft-secondary,
.sk-site :is(.footer, .main-navigation, .page-header, .section-container) .cursor-pointer.bg-cw-soft-secondary * { color: #16171b !important; }

/* Booking: stay calendar (Web.Client/Forms/StayCalendar.razor) */
.sk-site .sk-cal {
    --sk-accent: #96c;
    --sk-accent-soft: #f2eaf9;
    position: relative;
    padding: 1.5em;
    border: 1px solid #e6e3df;
    background: #fff;
}
.sk-site .sk-cal-nav { position: absolute; top: 1.15em; left: 1em; right: 1em; display: flex; justify-content: space-between; pointer-events: none; }
.sk-site .sk-cal-arrow {
    pointer-events: auto;
    width: 2.25em; height: 2.25em;
    border: 0; border-radius: 50%;
    background: transparent; color: #16171b;
    font-size: 1.25em; line-height: 1; cursor: pointer;
}
.sk-site .sk-cal-arrow:hover:not(:disabled) { background: var(--sk-accent-soft); color: var(--sk-accent); }
.sk-site .sk-cal-arrow:disabled { color: #d0d0d0; cursor: default; }
.sk-site .sk-cal-months { display: flex; gap: 2.5em; }
.sk-site .sk-cal-month { flex: 1; min-width: 0; }
.sk-site .sk-cal-title {
    text-align: center;
    font-family: Playfair Display, serif;
    font-size: 1.15em;
    color: #16171b;
    text-transform: capitalize;
    margin-bottom: .75em;
    line-height: 2.25rem;
}
.sk-site .sk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: .2em; }
.sk-site .sk-cal-dayname { text-align: center; font-size: .75em; color: #8a8a8a; text-transform: uppercase; padding-bottom: .4em; }
.sk-site .sk-cal-day {
    position: relative;
    height: 2.5em;
    border: 0;
    background: transparent;
    color: #363636;
    font: inherit;
    font-size: .9em;
    cursor: pointer;
}
.sk-site .sk-cal-day:hover:not(:disabled) { color: var(--sk-accent); font-weight: 600; }
.sk-site .sk-cal-day:disabled { color: #cfcfcf; cursor: default; }
.sk-site .sk-cal-day.is-today { text-decoration: underline; text-underline-offset: .25em; }
.sk-site .sk-cal-day.is-in-range { background: var(--sk-accent-soft); }
.sk-site .sk-cal-day.is-preview { background: #f7f3fb; }
.sk-site .sk-cal-day.is-preview-end { box-shadow: inset 0 0 0 1px var(--sk-accent); border-radius: 50%; }
.sk-site .sk-cal-day.is-start,
.sk-site .sk-cal-day.is-end { color: #fff; font-weight: 600; z-index: 1; }
.sk-site .sk-cal-day.is-start::before,
.sk-site .sk-cal-day.is-end::before {
    content: "";
    position: absolute; inset: 0;
    margin: auto;
    width: 2.5em; height: 2.5em;
    border-radius: 50%;
    background: var(--sk-accent);
    z-index: -1;
}
/* connect the filled start/end circles with the range band */
.sk-site .sk-cal-day.is-start:has(~ .is-in-range, ~ .is-end) { background: linear-gradient(90deg, transparent 50%, var(--sk-accent-soft) 50%); }
.sk-site .sk-cal-day.is-end { background: linear-gradient(90deg, var(--sk-accent-soft) 50%, transparent 50%); }
.sk-site .sk-cal-day.is-start.is-end { background: transparent; }
.sk-site .sk-cal-summary {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5em 1em;
    margin-top: 1.25em; padding-top: 1em;
    border-top: 1px solid #eee;
    color: #363636;
}
.sk-site .sk-cal-summary strong { color: #16171b; }
.sk-site .sk-cal-hint { color: #8a8a8a; }
.sk-site .sk-cal-clear { border: 0; background: none; padding: 0; color: var(--sk-accent); font: inherit; font-size: .875em; cursor: pointer; text-decoration: underline; }
.sk-site .sk-cal-warning { margin: .75em 0 0; font-size: .875em; color: #8a6d3b; }
.sk-site .sk-date-error { margin-top: .75em; }
@media screen and (max-width: 600px) {
    .sk-site .sk-cal { padding: 1em .75em; }
    .sk-site .sk-cal-month:nth-child(n+2) { display: none; }
}

/* Booking: guest steppers */
.sk-site .sk-guests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.sk-site .sk-stepper {
    display: flex; align-items: center; justify-content: space-between; gap: .75em;
    padding: .75em 1em;
    border: 1px solid #e6e3df;
    background: #fff;
}
.sk-site .sk-stepper-text { display: flex; flex-direction: column; line-height: 1.3; }
.sk-site .sk-stepper-label { font-size: .9em; color: #16171b; font-weight: 500; }
.sk-site .sk-stepper-hint { font-size: .75em; color: #8a8a8a; }
.sk-site .sk-stepper-controls { display: flex; align-items: center; gap: .6em; }
.sk-site .sk-stepper-btn {
    width: 2em; height: 2em;
    border: 1px solid #d5d5d5; border-radius: 50%;
    background: #fff; color: #16171b;
    font-size: 1em; line-height: 1; cursor: pointer;
}
.sk-site .sk-stepper-btn:hover:not(:disabled) { border-color: #96c; color: #96c; }
.sk-site .sk-stepper-btn:disabled { color: #d0d0d0; border-color: #eee; cursor: default; }
.sk-site .sk-stepper-value { min-width: 1.25em; text-align: center; font-weight: 600; color: #16171b; }
.sk-site .sk-children-age { margin-top: 1.25em; }
@media screen and (max-width: 768px) {
    .sk-site .sk-guests { grid-template-columns: 1fr; }
}