/* Doma – modals (fáze 3) */

/*
    Okna a části webu mimo obal stránky: nákupní okno se všemi kroky, poděkování po nákupu,
    pokyny k platbě převodem, upozornění, výběr měny, okno formuláře, lišta a nastavení cookies,
    prohlížeč fotek.

    Web je vykresluje do body, mimo obal stránky s třídou .theme-doma (react-modal do .ReactModalPortal,
    lišta cookies a prohlížeč fotek přímo do body). Šablona se proto pozná podle body:has(.theme-doma),
    stejně jako okno s videem v theme.css. Stránky v jiné šabloně tenhle soubor vůbec nenačtou.

    Ovládací prvky, které web používá v obsahu stránky i v oknech (upozornění, zaškrtávátka, přepínač,
    rozbalovací výběr, kalendář), jsou v elements.css - jednou pro obojí.
*/

/* ------------------------------------------------------------------------------------------
    Proměnné šablony pro okna. Obal stránky je má z theme.css, okna mimo obal ne - kořeny oken
    je proto dostávají znovu se stejnými hodnotami (světlý kontext). Přepsané proměnné webu
    (--text-color, --line-color, --white-color, --red-color) přebarví i pravidla webu, která
    oknům barvy dávají.
------------------------------------------------------------------------------------------ */
body:has(.theme-doma) :is(.ReactModalPortal,.cookies-panel,.yarl__portal){
    --doma-ease:cubic-bezier(.22,1,.36,1);
    --doma-gold-deep:color-mix(in oklch, var(--palette-gold) 66%, var(--palette-brown));
    --doma-gold-line:color-mix(in oklch, var(--palette-gold) 88%, var(--palette-brown));
    --doma-line:color-mix(in oklab, var(--palette-brown) 10%, color-mix(in oklab, var(--palette-gold) 20%, var(--palette-cream)));
    --doma-ruled:color-mix(in oklab, var(--palette-brown) 5%, var(--palette-cream));
    --doma-shadow-base:color-mix(in srgb, var(--palette-brown) 78%, var(--palette-gold));
    --doma-shadow:color-mix(in srgb, var(--doma-shadow-base) 50%, transparent);
    --doma-shadow-strong:color-mix(in srgb, var(--doma-shadow-base) 58%, transparent);
    --doma-shadow-tape:color-mix(in srgb, var(--doma-shadow-base) 12%, transparent);
    --doma-button-shadow:color-mix(in srgb, var(--doma-gold-deep) 70%, transparent);
    --doma-text:var(--palette-brown);
    --doma-text-contrast:var(--palette-cream);
    --doma-text-soft:color-mix(in oklab, var(--palette-brown) 91%, var(--palette-cream));
    --doma-text-body:color-mix(in oklab, var(--palette-brown) 83%, var(--palette-cream));
    --doma-text-muted:color-mix(in oklab, var(--palette-brown) 72%, var(--palette-cream));
    --doma-heading:var(--headline-color-from, var(--palette-brown));
    --doma-accent:var(--doma-gold-deep);
    /* drobné odkazy a chybové texty - tmavší terakota, aby měly kontrast i malým písmem */
    --doma-link-ink:color-mix(in srgb, var(--link-color, var(--palette-terracotta)) 72%, var(--palette-brown));
    --doma-danger:color-mix(in srgb, var(--palette-terracotta) 70%, var(--palette-brown));
    --doma-danger-bg:color-mix(in srgb, var(--palette-terracotta) 12%, var(--palette-paper));
    --text-color:var(--palette-brown);
    --black-color:var(--palette-brown);
    --line-color:var(--doma-line);
    --white-color:var(--palette-paper);
    --red-color:var(--doma-danger);
    --grey-text-color:var(--doma-text-muted);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
@supports (color: oklch(from red l c h)){
    body:has(.theme-doma) :is(.ReactModalPortal,.cookies-panel,.yarl__portal){
        --doma-gold-deep:oklch(from var(--palette-gold) calc(l - .165) calc(c * .92) calc(h - 7));
        --doma-gold-line:oklch(from var(--palette-gold) calc(l - .055) c calc(h - 5));
    }
}

/* ------------------------------------------------------------------------------------------
    Obal okna - krémový papír se zrnitostí, páska nahoře, kulaté zavírací tlačítko
------------------------------------------------------------------------------------------ */
body:has(.theme-doma) .ReactModalPortal .modal-overlay{
    background-color:color-mix(in srgb, var(--palette-brown) 58%, transparent) !important;
}
@supports (backdrop-filter: blur(2px)){
    body:has(.theme-doma) .ReactModalPortal .modal-overlay{
        backdrop-filter:blur(3px);
    }
}
body:has(.theme-doma) .ReactModalPortal .modal-content{
    padding:4.4rem 4rem 4rem;
    border-radius:28px;
    background-color:var(--palette-cream);
    background-image:url(grain.png);
    background-size:160px 160px;
    box-shadow:0 40px 90px -40px var(--doma-shadow-strong), 0 0 0 1px color-mix(in srgb, var(--palette-brown) 6%, transparent);
    color:var(--doma-text-body);
    font-family:var(--font-body, inherit);
    margin-bottom:5rem;
}
/* páska nahoře - jen u okna s papírem (okno s recenzemi papír nemá) */
body:has(.theme-doma) .ReactModalPortal .modal-content:not(.no-background)::before{
    content:"";
    position:absolute;
    z-index:2;
    top:-1.3rem;
    left:50%;
    width:11rem;
    height:2.8rem;
    margin-left:-5.5rem;
    background-color:color-mix(in srgb, var(--palette-butter) 92%, transparent);
    box-shadow:0 2px 4px var(--doma-shadow-tape);
    rotate:-3deg;
    pointer-events:none;
}
body:has(.theme-doma) .ReactModalPortal .modal-content.no-background{
    background:none;
    box-shadow:none;
}
/* dekorace pozadí okna webu - v Domě je pozadím papír */
body:has(.theme-doma) .ReactModalPortal .modal-content .bg{
    display:none;
}

/*
    zavírací tlačítko - kolečko z papíru s křížkem (text „x“ se skryje, křížek jsou dvě čárky).
    Otočení při najetí řídí proměnná --doma-close-turn (0 až 1), ne plynulá změna rotate: kolečko
    přesahuje okno nad rozmazané pozadí a Safari při plynulé změně rotate pozadí přebliklo do tmavší.
*/
@property --doma-close-turn{
    syntax:"<number>";
    inherits:false;
    initial-value:0;
}
body:has(.theme-doma) .ReactModalPortal .modal-content .close{
    top:-1.6rem;
    right:-1.6rem;
    z-index:3;
    width:4.4rem;
    height:4.4rem;
    border-radius:50%;
    background-color:var(--palette-paper);
    box-shadow:0 12px 26px -12px var(--doma-shadow-strong), 0 0 0 1.5px var(--doma-line);
    color:transparent;
    font-size:0;
    line-height:0;
    rotate:calc(var(--doma-close-turn) * 90deg);
    transition:--doma-close-turn .5s var(--doma-ease), background-color .3s;
}
body:has(.theme-doma) .ReactModalPortal .modal-content .close::before,
body:has(.theme-doma) .ReactModalPortal .modal-content .close::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:1.7rem;
    height:2px;
    margin:-1px 0 0 -.85rem;
    border-radius:2px;
    background-color:var(--palette-brown);
    rotate:45deg;
}
body:has(.theme-doma) .ReactModalPortal .modal-content .close::after{
    rotate:-45deg;
}
body:has(.theme-doma) .ReactModalPortal .modal-content .close:hover{
    background-color:var(--palette-butter);
}

/* ------------------------------------------------------------------------------------------
    Písmo a text v okně
------------------------------------------------------------------------------------------ */
body:has(.theme-doma) .ReactModalPortal .modal-content :is(h1,h2,h3,h4){
    font-family:var(--font-heading, inherit);
    font-weight:400;
    line-height:1.2;
    letter-spacing:-.005em;
    color:var(--doma-heading) !important;
    text-wrap:balance;
}
body:has(.theme-doma) .ReactModalPortal .modal-content h1{
    font-size:2.6rem;
}
body:has(.theme-doma) .ReactModalPortal .modal-content h2{
    font-size:2.3rem;
}
body:has(.theme-doma) .ReactModalPortal .modal-content h3{
    font-size:2.1rem;
}
body:has(.theme-doma) .ReactModalPortal .modal-content h4{
    font-size:1.9rem;
}
body:has(.theme-doma) .ReactModalPortal .modal-content :is(p,li){
    line-height:1.6;
}
body:has(.theme-doma) .ReactModalPortal .modal-content strong{
    color:var(--doma-text);
}
body:has(.theme-doma) .ReactModalPortal .modal-content a:not(.btn){
    color:var(--doma-link-ink);
    text-decoration:underline;
    text-decoration-thickness:.08em;
    text-underline-offset:.22em;
    text-decoration-color:color-mix(in srgb, currentColor 45%, transparent);
    transition:text-decoration-color .3s;
}
body:has(.theme-doma) .ReactModalPortal .modal-content a:not(.btn):hover{
    text-decoration-color:currentColor;
}
body:has(.theme-doma) .ReactModalPortal .modal-content a:focus-visible{
    outline:2px solid var(--doma-link-ink);
    outline-offset:3px;
    border-radius:2px;
}
body:has(.theme-doma) .ReactModalPortal .modal-content hr{
    height:0;
    margin:2rem 0;
    border:0;
    border-top:1.5px dashed var(--doma-line);
    background:none;
}
body:has(.theme-doma) .ReactModalPortal ::selection{
    background-color:color-mix(in srgb, var(--palette-butter) 85%, transparent);
    color:var(--palette-brown);
}

/* ------------------------------------------------------------------------------------------
    Tlačítka v oknech a v liště cookies - tvar „pilulky“ jako na stránce (theme.css)
------------------------------------------------------------------------------------------ */
body:has(.theme-doma) :is(.ReactModalPortal,.cookies-panel) .btn{
    font-family:var(--font-body, inherit);
    font-weight:700;
    line-height:1.2;
    letter-spacing:.005em;
    padding:1.7rem 3.2rem 1.6rem;
    border:0;
    box-shadow:none;
    transition:translate .6s var(--doma-ease), box-shadow .6s var(--doma-ease), background-color .3s, color .3s, border-color .3s;
}
body:has(.theme-doma) :is(.ReactModalPortal,.cookies-panel) .btn:focus-visible{
    outline:3px solid var(--palette-terracotta);
    outline-offset:3px;
}
body:has(.theme-doma) :is(.ReactModalPortal,.cookies-panel) .btn-primary,
body:has(.theme-doma) :is(.ReactModalPortal,.cookies-panel) .btn-primary:hover{
    box-shadow:0 14px 30px -14px var(--doma-button-shadow);
}
body:has(.theme-doma) :is(.ReactModalPortal,.cookies-panel) .btn-primary.gradient,
body:has(.theme-doma) :is(.ReactModalPortal,.cookies-panel) .btn-primary.gradient:hover{
    background:linear-gradient(180deg, var(--button-bg-primary-from) 0%, var(--button-bg-primary-to, var(--button-bg-primary-from)) 100%);
}
/* šedé tlačítko (cookies) a tlačítko „Ne“ v upozornění - obrys */
body:has(.theme-doma) :is(.ReactModalPortal,.cookies-panel) :is(.btn-grey,.btn-red),
body:has(.theme-doma) :is(.ReactModalPortal,.cookies-panel) :is(.btn-grey,.btn-red):hover{
    padding-top:1.5rem;
    padding-bottom:1.4rem;
    border:2px solid var(--doma-text);
    background:transparent;
    color:var(--doma-text) !important;
    box-shadow:none;
}
body:has(.theme-doma) :is(.ReactModalPortal,.cookies-panel) :is(.btn-grey,.btn-red):hover{
    background-color:color-mix(in srgb, var(--palette-butter) 55%, transparent);
}
/* tlačítko jako odkaz (jiná měna, zpět) */
body:has(.theme-doma) .ReactModalPortal .btn.plain-text,
body:has(.theme-doma) .ReactModalPortal .btn.plain-text:hover{
    padding:0;
    border:0;
    background:none;
    box-shadow:none;
    font-weight:600;
    color:var(--doma-link-ink);
    text-decoration:underline;
    text-decoration-thickness:.08em;
    text-underline-offset:.22em;
    text-decoration-color:color-mix(in srgb, currentColor 45%, transparent);
}
body:has(.theme-doma) .ReactModalPortal .btn.thiner{
    padding:1.1rem 2.2rem 1rem;
    font-size:1.4rem;
}
body:has(.theme-doma) .ReactModalPortal .btn[disabled]{
    opacity:.7;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference){
    body:has(.theme-doma) :is(.ReactModalPortal,.cookies-panel) .btn:not([disabled],.plain-text):hover{
        translate:0 -2px;
    }
    body:has(.theme-doma) .ReactModalPortal .modal-content .close:hover{
        --doma-close-turn:1;
    }
}

/* ------------------------------------------------------------------------------------------
    Pole v oknech (osobní údaje, kupón). Obsah stránky je má z theme.css, tady jsou pro okna
    stejně - papír, jemná linka, při psaní terakotový lem. Popisek uvnitř pole je jediný
    popisek pole, proto má plný kontrast.
------------------------------------------------------------------------------------------ */
body:has(.theme-doma) .ReactModalPortal .input-group{
    height:auto;
    min-height:5rem;
    border:1.5px solid var(--doma-line);
    background-color:var(--palette-paper);
    box-shadow:none;
    transition:border-color .3s, box-shadow .3s;
}
body:has(.theme-doma) .ReactModalPortal .input-group:focus-within{
    border-color:var(--palette-terracotta);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--palette-terracotta) 18%, transparent);
}
body:has(.theme-doma) .ReactModalPortal .input-group.required{
    border-color:var(--doma-danger);
    background-color:var(--doma-danger-bg);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--palette-terracotta) 12%, transparent);
}
body:has(.theme-doma) .ReactModalPortal .input-group :is(input,select){
    padding-left:1.8rem;
    padding-right:1.4rem;
    background-color:transparent;
    font-family:var(--font-body, inherit);
    font-size:1.5rem;
    color:var(--palette-brown);
}
body:has(.theme-doma) .ReactModalPortal .input-group :is(input,select).focus{
    padding:2rem 1.4rem .5rem 1.8rem;
}
/*
    rozbalovací výběr bez nativního vzhledu - Safari u nativního výběru odsazení nebere, text vybrané
    hodnoty (země) zůstal uprostřed pole pod popiskem nahoře. Šipku kreslí obal pole, protože výběr
    pseudo-prvky nemá. Předvolba telefonu (výběr v .prepend) má šipku menší a blíž.
*/
body:has(.theme-doma) .ReactModalPortal .input-group select{
    -webkit-appearance:none;
    appearance:none;
    cursor:pointer;
}
body:has(.theme-doma) .ReactModalPortal .input-group > select,
body:has(.theme-doma) .ReactModalPortal .input-group > select.focus{
    padding-right:4.4rem;
}
body:has(.theme-doma) .ReactModalPortal .input-group:has(> select)::after{
    content:"";
    position:absolute;
    top:50%;
    right:2.2rem;
    width:.8rem;
    height:.8rem;
    margin-top:-.6rem;
    border:solid var(--palette-brown);
    border-width:0 2px 2px 0;
    rotate:45deg;
    pointer-events:none;
}
body:has(.theme-doma) .ReactModalPortal .input-group input.no-left-padding{
    padding-left:0;
}
body:has(.theme-doma) .ReactModalPortal .input-group :is(.prepend,.append){
    background-color:transparent;
}
body:has(.theme-doma) .ReactModalPortal .input-group .prepend{
    padding-left:1.6rem;
}
body:has(.theme-doma) .ReactModalPortal .input-group .prepend.border-right{
    border-right:1.5px solid var(--doma-line);
}
body:has(.theme-doma) .ReactModalPortal .input-group .prepend .input-group{
    min-height:0;
    border:0;
    background:transparent;
    box-shadow:none;
}
body:has(.theme-doma) .ReactModalPortal .input-group .prepend .input-group :is(select,input){
    padding:0;
}
body:has(.theme-doma) .ReactModalPortal .input-group .prepend .input-group > select{
    padding-right:2.2rem;
}
body:has(.theme-doma) .ReactModalPortal .input-group .prepend .input-group:has(> select)::after{
    right:.4rem;
    width:.7rem;
    height:.7rem;
}
body:has(.theme-doma) .ReactModalPortal .input-group span.placeholder{
    left:1.8rem;
    color:var(--doma-text-muted);
    font-size:1.4rem !important;
}
body:has(.theme-doma) .ReactModalPortal .input-group span.placeholder.no-left{
    left:0;
}
body:has(.theme-doma) .ReactModalPortal .input-group span.placeholder.focus{
    top:30%;
    font-size:1.2rem !important;
    color:var(--doma-text-muted);
}
body:has(.theme-doma) .ReactModalPortal .input-group.required span.placeholder{
    color:var(--doma-danger);
}
body:has(.theme-doma) .ReactModalPortal .text-area-group{
    border:1.5px solid var(--doma-line);
    border-radius:min(var(--input-border-radius), 2rem);
    background-color:var(--palette-paper);
    box-shadow:none;
    transition:border-color .3s, box-shadow .3s;
}
body:has(.theme-doma) .ReactModalPortal .text-area-group:focus-within{
    border-color:var(--palette-terracotta);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--palette-terracotta) 18%, transparent);
}
body:has(.theme-doma) .ReactModalPortal .text-area-group.required{
    border-color:var(--doma-danger);
    background-color:var(--doma-danger-bg);
}
body:has(.theme-doma) .ReactModalPortal .text-area-group textarea{
    padding:3rem 1.8rem 1.4rem;
    border-radius:min(var(--input-border-radius), 2rem);
    background-color:transparent;
    font-family:var(--font-body, inherit);
    font-size:1.5rem;
    color:var(--palette-brown);
}
body:has(.theme-doma) .ReactModalPortal .text-area-group span{
    left:1.8rem;
    top:1.1rem;
    color:var(--doma-text-muted);
}

/* ------------------------------------------------------------------------------------------
    Karty v oknech (souhrn údajů, údaje k platbě převodem, nabídka k objednávce)
------------------------------------------------------------------------------------------ */
body:has(.theme-doma) .ReactModalPortal .card{
    border:1.5px solid var(--doma-line);
    border-radius:20px;
    background-color:var(--palette-paper);
    box-shadow:0 20px 40px -32px var(--doma-shadow);
}
body:has(.theme-doma) .ReactModalPortal .card .card-header{
    border-bottom:1.5px dashed var(--doma-line);
}

/* ------------------------------------------------------------------------------------------
    Nákupní okno
------------------------------------------------------------------------------------------ */

/* titulek okna - lístek z papíru: název členství nadpisovým písmem, cena, termín rezervace */
body:has(.theme-doma) .ReactModalPortal .payment-process .title{
    position:relative;
    margin-bottom:3.2rem;
    padding:2.2rem 2.4rem 2rem;
    border:0;
    border-radius:8px 8px 26px 8px;
    background-color:var(--palette-paper);
    box-shadow:0 22px 44px -30px var(--doma-shadow-strong);
    font-family:var(--font-heading, inherit);
    font-size:2rem;
    font-weight:400;
    line-height:1.25;
    color:var(--doma-heading);
    text-wrap:balance;
}
body:has(.theme-doma) .ReactModalPortal .payment-process .title.with-photo{
    margin-bottom:1.6rem;
}
body:has(.theme-doma) .ReactModalPortal .payment-process .title .reservation-data{
    margin-top:.6rem;
    font-family:var(--font-body, inherit);
    font-size:1.5rem;
    font-weight:600;
    color:var(--doma-text-muted);
}
body:has(.theme-doma) .ReactModalPortal .payment-process .price{
    font-family:var(--font-heading, inherit);
    font-size:3.6rem;
    font-weight:400;
    line-height:1.15;
    color:var(--doma-heading);
}
body:has(.theme-doma) .ReactModalPortal .payment-process .title .price{
    margin-top:.6rem;
}
body:has(.theme-doma) .ReactModalPortal .payment-process .price span{
    color:var(--doma-heading);
}
body:has(.theme-doma) .ReactModalPortal .payment-process :is(.old-price,.price div.old-price){
    font-family:var(--font-body, inherit);
    font-size:1.6rem;
    font-weight:600;
    color:var(--doma-danger);
    text-decoration:line-through;
    text-decoration-thickness:.1em;
}
body:has(.theme-doma) .ReactModalPortal .payment-process img.membership-img{
    border-radius:18px;
    box-shadow:0 24px 44px -30px var(--doma-shadow-strong);
}

/*
    1. krok - zkušební období: „Vyzkoušej za“ ručním písmem, cena velká a zakroužkovaná ručně
    taženou terakotovou linkou (stejná kresba jako zakroužkování slov), při otevření se „nakreslí“.
*/
body:has(.theme-doma) .ReactModalPortal .free-trial-period > p.no-bottom-margin:has(+ .price){
    font-family:var(--font-accent, cursive);
    font-size:3rem;
    font-weight:600;
    line-height:1.1;
    color:var(--doma-accent);
    rotate:-2deg;
}
body:has(.theme-doma) .ReactModalPortal .free-trial-period > .price{
    position:relative;
    display:table;
    margin:2.4rem auto 1rem;
    padding:0 1.8rem;
    font-size:5.6rem;
    line-height:1.05;
}
body:has(.theme-doma) .ReactModalPortal .free-trial-period > .price::after{
    content:"";
    position:absolute;
    left:-9%;
    top:-28%;
    width:118%;
    height:156%;
    background-color:var(--palette-terracotta);
    -webkit-mask:url(svg/mark-circle.svg) 0 0 / 100% 100% no-repeat;
    mask:url(svg/mark-circle.svg) 0 0 / 100% 100% no-repeat;
    pointer-events:none;
}
@keyframes cm-doma-modal-draw{
    from{clip-path:inset(0 100% 0 0)}
    to{clip-path:inset(0 0 0 0)}
}
@media (prefers-reduced-motion: no-preference){
    body:has(.theme-doma) .ReactModalPortal .free-trial-period > .price::after{
        animation:cm-doma-modal-draw 1.1s .35s cubic-bezier(.65,0,.35,1) both;
    }
}
body:has(.theme-doma) .ReactModalPortal .payment-process .free-trial-period > .btn{
    margin:2.6rem 0 2.4rem;
}

/* typ členství - jedna cena bez výběru, nebo karty na výběr */
body:has(.theme-doma) .ReactModalPortal .payment-process .membership-type-panel .price{
    font-size:4rem;
}
body:has(.theme-doma) .ReactModalPortal .payment-process .membership-type-panel .name{
    margin-top:.4rem;
    font-family:var(--font-accent, cursive);
    font-size:2.8rem;
    font-weight:700;
    line-height:1.1;
    text-transform:none;
    color:var(--doma-accent);
}
body:has(.theme-doma) .ReactModalPortal .payment-process .membership-type-panel .description{
    color:var(--doma-text-muted);
    line-height:1.4;
}

/* karty na výběr - typ členství, členství z balíčku, místo rezervace */
body:has(.theme-doma) .ReactModalPortal .payment-process :is(.membership-type-panel.selectable,.membership-item.selectable,.reservation-place-panel){
    position:relative;
    border:2px solid var(--doma-line);
    border-radius:22px;
    background-color:var(--palette-paper);
    box-shadow:0 20px 40px -32px var(--doma-shadow);
    transition:border-color .3s, background-color .3s, box-shadow .6s var(--doma-ease), translate .6s var(--doma-ease);
}
body:has(.theme-doma) .ReactModalPortal .payment-process :is(.membership-type-panel.selectable,.membership-item.selectable,.reservation-place-panel):hover{
    border-color:var(--doma-gold-line);
}
body:has(.theme-doma) .ReactModalPortal .payment-process :is(.membership-type-panel.selectable,.membership-item.selectable,.reservation-place-panel).selected{
    border-color:var(--doma-gold-deep);
    background-color:color-mix(in srgb, var(--palette-butter) 75%, var(--palette-paper));
    box-shadow:0 24px 44px -28px var(--doma-shadow-strong);
}
/* vybraná karta má kromě barvy i fajfku v rohu - výběr se pozná i bez rozlišení barev */
body:has(.theme-doma) .ReactModalPortal .payment-process :is(.membership-type-panel.selectable,.membership-item.selectable,.reservation-place-panel).selected::before,
body:has(.theme-doma) .ReactModalPortal .payment-process :is(.membership-type-panel.selectable,.membership-item.selectable,.reservation-place-panel).selected::after{
    content:"";
    position:absolute;
    z-index:2;
    top:-1.2rem;
    right:-1.2rem;
    width:3.4rem;
    height:3.4rem;
    pointer-events:none;
}
body:has(.theme-doma) .ReactModalPortal .payment-process :is(.membership-type-panel.selectable,.membership-item.selectable,.reservation-place-panel).selected::before{
    border-radius:50%;
    background-color:var(--palette-brown);
    box-shadow:0 8px 16px -8px var(--doma-shadow-strong);
}
body:has(.theme-doma) .ReactModalPortal .payment-process :is(.membership-type-panel.selectable,.membership-item.selectable,.reservation-place-panel).selected::after{
    background-color:var(--palette-cream);
    -webkit-mask:url(svg/check.svg) center / 1.7rem auto no-repeat;
    mask:url(svg/check.svg) center / 1.7rem auto no-repeat;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference){
    body:has(.theme-doma) .ReactModalPortal .payment-process :is(.membership-type-panel.selectable,.membership-item.selectable,.reservation-place-panel):hover{
        translate:0 -3px;
    }
}
body:has(.theme-doma) .ReactModalPortal .payment-process .membership-type-panel.selectable .price{
    font-size:3.4rem;
    margin-bottom:.8rem;
}
body:has(.theme-doma) .ReactModalPortal .payment-process .membership-type-panel.selectable .name{
    font-size:2.6rem;
}

/* členství v balíčku */
body:has(.theme-doma) .ReactModalPortal .payment-process .membership-item{
    border:1.5px solid var(--doma-line);
    border-radius:18px;
    background-color:var(--palette-paper);
    box-shadow:0 18px 36px -30px var(--doma-shadow);
}
body:has(.theme-doma) .ReactModalPortal .payment-process .membership-item .card-body-thinner{
    padding:1.2rem;
}
body:has(.theme-doma) .ReactModalPortal .payment-process .choose-membership-type .memberships-list .membership-item h4{
    padding-bottom:.6rem;
    border-bottom:1.5px dashed var(--doma-line);
    font-size:1.7rem;
}
body:has(.theme-doma) .ReactModalPortal .payment-process .choose-membership-type .memberships-list :is(.img-container,.img-container img){
    border:0;
    border-radius:12px;
}
body:has(.theme-doma) .ReactModalPortal .payment-process .choose-membership-type .memberships-list .membership-item .price{
    font-size:1.8rem;
    line-height:1.2;
}
body:has(.theme-doma) .ReactModalPortal .payment-process .choose-membership-type .memberships-list .membership-item .old-price{
    font-size:1.3rem;
}

/* místo rezervace */
body:has(.theme-doma) .ReactModalPortal .payment-process .reservation-place-panel .name{
    font-family:var(--font-heading, inherit);
    font-size:1.9rem;
    font-weight:400;
    color:var(--doma-heading);
}

/* oddělovač mezi peněženkami a kartou - čárkované linky a „nebo“ ručním písmem */
body:has(.theme-doma) .ReactModalPortal .payment-process .express-checkout-separator::before,
body:has(.theme-doma) .ReactModalPortal .payment-process .express-checkout-separator::after{
    height:0;
    border-top:1.5px dashed var(--doma-line);
    background:none;
}
body:has(.theme-doma) .ReactModalPortal .payment-process .express-checkout-separator span{
    font-family:var(--font-accent, cursive);
    font-size:2.4rem;
    font-weight:600;
    color:var(--doma-accent);
}

/*
    krok platby - nadpisy výběru brány a údajů karty. Samotný formulář karty je iframe Stripe,
    jeho barvy a zaoblení nastavuje appearance podle šablony (web/Functions/WebTheme.js, GetStripeAppearance).
*/
body:has(.theme-doma) .ReactModalPortal .payment-process .payment-button-container h4{
    font-size:1.9rem;
}

/* doplňující texty pod poli, souhlas s podmínkami */
body:has(.theme-doma) .ReactModalPortal .payment-process :is(.sub-info,p.fs-14,p.fs-14 *){
    color:var(--doma-text-muted);
}
body:has(.theme-doma) .ReactModalPortal .payment-process p.fs-14 a{
    color:var(--doma-link-ink);
}

/* nabídka k objednávce (upsell) */
body:has(.theme-doma) .ReactModalPortal .upsell-bomb .card-header h3{
    font-size:1.8rem;
}
body:has(.theme-doma) .ReactModalPortal .upsell-bomb .card-header .price{
    font-family:var(--font-heading, inherit);
    font-weight:400;
}
body:has(.theme-doma) .ReactModalPortal .upsell-bomb :is(.img-container,.img-container img){
    border-radius:12px;
}
body:has(.theme-doma) .ReactModalPortal .upsell-bomb :is(.upsell-bomb-summary,.upsell-bomb-summary-total){
    border-top:1.5px dashed var(--doma-line);
}
body:has(.theme-doma) .ReactModalPortal .upsell-bomb .upsell-bomb-summary-total{
    color:var(--doma-text);
}

/* rezervační kalendář v okně - nadpisy */
body:has(.theme-doma) .ReactModalPortal .cm-reservation-place-calendar h4{
    font-size:1.9rem;
}

/* výběr měny - měny jako pilulky */
body:has(.theme-doma) .ReactModalPortal .modal-content .currency{
    border:1.5px solid var(--doma-line);
    border-radius:999px;
    background-color:var(--palette-paper);
    box-shadow:none;
    padding:.8rem 1.8rem;
    font-weight:700;
    color:var(--doma-text);
    transition:background-color .3s, border-color .3s;
}
body:has(.theme-doma) .ReactModalPortal .modal-content .currency:hover{
    border-color:var(--doma-gold-line);
    background-color:var(--palette-butter);
}

/* poděkování s přesměrováním do portálu - animace má bílé pozadí, papír okna ho pohltí */
body:has(.theme-doma) .ReactModalPortal .modal-content img[src$="developing_grey.gif"]{
    mix-blend-mode:multiply;
}

/* dotazník po nákupu - průběh ve zlaté jako u kvízu */
body:has(.theme-doma) #questionnaire .questionnaire-content .steps .step-progress .line{
    height:.6rem;
    border-radius:999px;
    background-color:var(--doma-ruled);
}
body:has(.theme-doma) #questionnaire .questionnaire-content .steps .step-progress .line .overline{
    height:.6rem;
    border-radius:999px;
}
body:has(.theme-doma) #questionnaire .questionnaire-content .steps .step-progress .line .overline.here{
    background-color:var(--doma-line);
}
body:has(.theme-doma) #questionnaire .questionnaire-content .steps .step-progress .line .overline.done{
    background-color:var(--palette-gold);
}
body:has(.theme-doma) #questionnaire .questionnaire-content .steps :is(.radio-row,.checkbox-row).checked{
    background-color:color-mix(in srgb, var(--palette-butter) 70%, transparent);
}

/* ------------------------------------------------------------------------------------------
    Lišta cookies - lístek z papíru v rohu obrazovky
------------------------------------------------------------------------------------------ */
body:has(.theme-doma) .cookies-panel{
    width:68rem;
    padding:3rem 3rem 2.6rem;
    border-radius:24px;
    background-color:var(--palette-paper);
    background-image:url(grain.png);
    background-size:160px 160px;
    box-shadow:0 30px 70px -30px var(--doma-shadow-strong), 0 0 0 1px color-mix(in srgb, var(--palette-brown) 7%, transparent);
    color:var(--doma-text-body);
    font-family:var(--font-body, inherit);
}
body:has(.theme-doma) .cookies-panel::before{
    content:"";
    position:absolute;
    top:-1.2rem;
    left:3.6rem;
    width:9.6rem;
    height:2.6rem;
    background-color:color-mix(in srgb, var(--palette-lavender) 95%, transparent);
    box-shadow:0 2px 4px var(--doma-shadow-tape);
    rotate:-4deg;
    pointer-events:none;
}
body:has(.theme-doma) .cookies-panel p{
    margin-bottom:2rem;
    font-size:1.5rem;
    line-height:1.6;
    color:var(--doma-text-body);
}
body:has(.theme-doma) .cookies-panel a{
    color:var(--doma-link-ink);
    text-decoration:underline;
    text-decoration-thickness:.08em;
    text-underline-offset:.22em;
}
body:has(.theme-doma) .cookies-panel a:focus-visible{
    outline:2px solid var(--doma-link-ink);
    outline-offset:3px;
    border-radius:2px;
}
/* tři tlačítka stejně vysoká, i když se text jednoho zalomí */
body:has(.theme-doma) .cookies-panel .cm-col{
    display:flex;
}
body:has(.theme-doma) .cookies-panel .btn{
    flex:1;
    padding-left:1.2rem;
    padding-right:1.2rem;
    font-size:1.5rem;
}
body:has(.theme-doma) .cookies-panel .btn-grey{
    padding-top:1.5rem;
    padding-bottom:1.4rem;
}

/* nastavení cookies - nadpisy skupin a přepínače */
body:has(.theme-doma) .ReactModalPortal .cookies-settings h3{
    margin-bottom:.6rem;
}
body:has(.theme-doma) .ReactModalPortal .cookies-settings p{
    color:var(--doma-text-body);
}

/* ------------------------------------------------------------------------------------------
    Prohlížeč fotek (fotogalerie) - teplé hnědé pozadí místo černé
------------------------------------------------------------------------------------------ */
body:has(.theme-doma) .yarl__portal{
    --yarl__color_backdrop:color-mix(in srgb, var(--palette-brown) 94%, transparent);
    --yarl__color_button:color-mix(in srgb, var(--palette-cream) 82%, transparent);
    --yarl__color_button_active:var(--palette-lightgold);
}

/* ------------------------------------------------------------------------------------------
    Telefon
------------------------------------------------------------------------------------------ */
@media (max-width: 767px){
    body:has(.theme-doma) .ReactModalPortal .modal-content{
        padding:3.4rem 2.2rem 2.6rem;
        border-radius:22px;
    }
    body:has(.theme-doma) .ReactModalPortal .modal-content h1{
        font-size:2.2rem;
    }
    body:has(.theme-doma) .ReactModalPortal .modal-content h2{
        font-size:2rem;
    }
    body:has(.theme-doma) .ReactModalPortal .modal-content h3{
        font-size:1.9rem;
    }
    body:has(.theme-doma) .ReactModalPortal .modal-content h4{
        font-size:1.7rem;
    }
    body:has(.theme-doma) .ReactModalPortal .payment-process .title{
        margin-bottom:2.4rem;
        padding:1.8rem 1.8rem 1.6rem;
        font-size:1.8rem;
    }
    body:has(.theme-doma) .ReactModalPortal .payment-process .price{
        font-size:3rem;
    }
    body:has(.theme-doma) .ReactModalPortal .free-trial-period > .price{
        font-size:4.6rem;
    }
    body:has(.theme-doma) .ReactModalPortal .payment-process .membership-type-panel .price{
        font-size:3.4rem;
    }
    body:has(.theme-doma) .ReactModalPortal .btn{
        padding:1.5rem 2.4rem 1.4rem;
    }
    body:has(.theme-doma) .cookies-panel{
        left:1.2rem;
        right:1.2rem;
        bottom:1.2rem;
        width:auto;
        padding:2.6rem 2rem 2rem;
        border-radius:20px;
    }
    body:has(.theme-doma) .cookies-panel p{
        font-size:1.4rem;
    }
}
@media (max-width: 575px){
    /* páska a zavírací kolečko přesahují nad okno - okno proto začíná o kousek níž */
    body:has(.theme-doma) .ReactModalPortal .modal-content{
        top:2.4rem;
    }
    body:has(.theme-doma) .ReactModalPortal .modal-content .close{
        top:-1.1rem;
        right:-.6rem;
        width:3.8rem;
        height:3.8rem;
    }
}

/* ------------------------------------------------------------------------------------------
    Omezení pohybu
------------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
    body:has(.theme-doma) :is(.ReactModalPortal,.cookies-panel) :is(.btn,.close,.input-group,.text-area-group,.membership-type-panel,.membership-item,.reservation-place-panel,.currency){
        transition:none !important;
    }
    body:has(.theme-doma) .ReactModalPortal .free-trial-period > .price::after{
        animation:none !important;
    }
}