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

/*
    Základní vzhled Domy pro prvky content manageru, které vlastní návrh nemají (Upozornění, Odpočet,
    Formulář, Kvíz, Rezervace, Fotogalerie), a pro 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ář).

    Ovládací prvky platí na stránce (.theme-doma - web: obal stránky, náhled v adminu: body iframu)
    i v oknech, která web vykresluje do body mimo obal (body:has(.theme-doma) .ReactModalPortal).
    Proměnné šablony mají okna z modals.css. Rozsah je v :where(), takže pravidla mají stejnou váhu
    jako styly webu (načítají se po nich, proto platí) a ostatní části je snadno přepíšou.

    Nový design se tu nevymýšlí - písma, paleta, papír a zaoblení jsou ze šablony (theme.css).
*/

/* ------------------------------------------------------------------------------------------
    Upozornění (prvek Upozornění i hlášky webu: chyba, úspěch, varování, informace) - měkký lístek
    v barvě palety s tenkým lemem. Text je vždy tmavý, takže je čitelný i v tmavé sekci.
------------------------------------------------------------------------------------------ */
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .alert{
    --doma-alert-bg:var(--palette-paper);
    --doma-alert-line:var(--doma-line);
    --doma-alert-text:var(--palette-brown);
    padding:1.4rem 1.8rem;
    border:1.5px solid var(--doma-alert-line);
    border-radius:16px;
    background-color:var(--doma-alert-bg);
    box-shadow:none;
    color:var(--doma-alert-text);
    line-height:1.5;
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .alert *{
    line-height:1.5;
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .alert :is(p,li,span,strong,em){
    color:inherit;
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .alert.narrow{
    padding:.8rem 1.4rem;
    border-radius:12px;
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .alert-success{
    --doma-alert-bg:color-mix(in srgb, var(--palette-butter) 70%, var(--palette-paper));
    --doma-alert-line:color-mix(in srgb, var(--palette-gold) 60%, var(--palette-paper));
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .alert-warning{
    --doma-alert-bg:color-mix(in srgb, var(--palette-apricot) 75%, var(--palette-paper));
    --doma-alert-line:color-mix(in srgb, var(--palette-terracotta) 35%, var(--palette-apricot));
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .alert-danger{
    --doma-alert-bg:color-mix(in srgb, var(--palette-terracotta) 12%, var(--palette-paper));
    --doma-alert-line:color-mix(in srgb, var(--palette-terracotta) 55%, var(--palette-paper));
    --doma-alert-text:color-mix(in srgb, var(--palette-terracotta) 70%, var(--palette-brown));
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .alert-info{
    --doma-alert-bg:color-mix(in srgb, var(--palette-lavender) 80%, var(--palette-paper));
    --doma-alert-line:color-mix(in oklab, var(--palette-lavender) 80%, var(--palette-brown));
}
/* odkaz v upozornění má barvu textu upozornění - terakota odkazů by na barevném lístku neměla kontrast
   (:is místo :where, aby pravidlo přebilo podtržené odkazy v textu sekce z theme.css) */
:is(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .alert a:not(.btn){
    color:inherit;
    text-decoration:underline;
    text-underline-offset:.2em;
}

/* ------------------------------------------------------------------------------------------
    Zaškrtávací políčko a přepínač volby - čtvereček z papíru, zaškrtnutý máslový s kreslenou fajfkou.
    Skutečný input leží pod čtverečkem a přijímá klik i klávesnici, lem fokusu dostane čtvereček.
------------------------------------------------------------------------------------------ */
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) :is(.checkbox,.radio)::before{
    width:2.4rem;
    height:2.4rem;
    border:1.5px solid color-mix(in oklab, var(--palette-brown) 22%, var(--doma-line));
    border-radius:8px;
    background-color:var(--palette-paper);
    box-shadow:none;
    transition:background-color .3s, border-color .3s;
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .radio::before{
    border-radius:50%;
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) :is(.checkbox,.radio):hover::before{
    border-color:var(--palette-terracotta);
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) :is(.checkbox,.radio).checked::before{
    border-color:var(--doma-gold-deep);
    background-color:var(--palette-butter);
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .checkbox.checked::after{
    content:"";
    background-color:var(--palette-brown);
    -webkit-mask:url(svg/check.svg) center / 1.5rem auto no-repeat;
    mask:url(svg/check.svg) center / 1.5rem auto no-repeat;
    font-size:0;
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .radio.checked::after{
    left:.7rem;
    width:1rem;
    height:1rem;
    background-color:var(--palette-brown);
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) :is(.checkbox,.radio):has(input:focus-visible)::before{
    outline:3px solid var(--palette-terracotta);
    outline-offset:2px;
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) :is(.checkbox,.radio).required::before{
    border-color:color-mix(in srgb, var(--palette-terracotta) 70%, var(--palette-brown));
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) :is(.checkbox,.radio) label{
    padding-left:2.2rem;
    font-size:1.5rem;
    font-weight:500;
    line-height:1.45;
    color:var(--doma-text-body);
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) :is(.checkbox,.radio) label *{
    line-height:1.45;
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) :is(.checkbox,.radio).required label{
    color:color-mix(in srgb, var(--palette-terracotta) 70%, var(--palette-brown));
}

/* přepínač Ano / Ne (nastavení cookies) - pilulka, „Ano“ zlaté, „Ne“ jemně hnědé */
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .switch-yes-no{
    border:1.5px solid var(--doma-line);
    border-radius:999px;
    background-color:var(--palette-paper);
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .switch-yes-no .switch-value{
    font-size:1.5rem;
    color:var(--doma-text-muted);
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .switch-yes-no .switch-value.selected{
    color:var(--palette-brown);
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .switch-yes-no .switch-slider{
    border-radius:999px;
    background-color:color-mix(in srgb, var(--palette-brown) 12%, var(--palette-paper));
    transition:transform .5s var(--doma-ease), background-color .3s;
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .switch-yes-no .switch-slider.success{
    background:linear-gradient(180deg, var(--palette-lightgold), var(--palette-gold));
}

/* ------------------------------------------------------------------------------------------
    Rozbalovací výběr (čas rezervace, předvolba telefonu) - seznam jako lístek z papíru
------------------------------------------------------------------------------------------ */
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .input-group.select-box .value{
    padding-left:1.8rem;
    font-size:1.5rem;
    font-weight:600;
    color:var(--palette-brown);
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .input-group.select-box > ul{
    top:calc(100% + .6rem);
    padding:.6rem;
    border:1.5px solid var(--doma-line);
    border-radius:18px;
    background-color:var(--palette-paper);
    box-shadow:0 24px 48px -26px var(--doma-shadow-strong);
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .input-group.select-box ul li .select-box-option{
    padding:.8rem 1.2rem;
    border-radius:12px;
    font-size:1.5rem;
    color:var(--palette-brown);
    transition:background-color .2s;
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .input-group.select-box ul li .select-box-option:hover{
    background-color:color-mix(in srgb, var(--palette-butter) 55%, transparent);
    color:var(--palette-brown);
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .input-group.select-box ul li .select-box-option.selected{
    background-color:var(--palette-butter);
    box-shadow:none;
    font-weight:700;
    color:var(--palette-brown);
}

/* ------------------------------------------------------------------------------------------
    Kalendář rezervací (prvek Rezervace i krok rezervace v nákupním okně). Volné dny jsou máslové,
    vybraný den hnědý, obsazený den terakotový a přeškrtnutý - stav se pozná i bez barev.
------------------------------------------------------------------------------------------ */
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .calendar{
    border:1.5px solid var(--doma-line);
    border-radius:22px;
    background-color:var(--palette-paper);
    box-shadow:0 20px 40px -32px var(--doma-shadow);
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .calendar .months{
    padding:1.2rem 1.4rem;
    border-bottom:1.5px dashed var(--doma-line);
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .calendar .months .month{
    font-family:var(--font-heading, inherit);
    font-size:1.8rem;
    color:var(--doma-heading);
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .calendar .days .day{
    border:0;
    border-radius:12px;
    font-size:1.5rem;
    font-weight:600;
    color:var(--doma-text-body);
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .calendar .days .days-row.names .day{
    font-size:1.3rem;
    font-weight:700;
    color:var(--doma-text-muted);
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .calendar .days .day.in-past{
    color:color-mix(in oklab, var(--palette-brown) 38%, var(--palette-paper));
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .calendar .days .days-row:not(.names) .day:not(.blocked):not(.in-past):not(.empty):not(.selected){
    background-color:var(--palette-butter);
    color:var(--palette-brown);
    transition:background-color .2s;
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .calendar .days .days-row:not(.names) .day:not(.blocked):not(.in-past):not(.selected):not(.empty):hover{
    background-color:var(--palette-lightgold);
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .calendar :is(.days,.legend) .day.selected,
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .calendar .days .days-row:not(.names) .day.selected:not(.blocked):hover{
    background-color:var(--palette-brown);
    color:var(--palette-cream);
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .calendar :is(.days,.legend) .day.blocked{
    background-color:color-mix(in srgb, var(--palette-terracotta) 16%, var(--palette-paper));
    color:color-mix(in srgb, var(--palette-terracotta) 70%, var(--palette-brown));
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .calendar .days .day.blocked{
    text-decoration:line-through;
    text-decoration-thickness:.1em;
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .calendar .legend{
    border-top:1.5px dashed var(--doma-line);
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .calendar .legend .day{
    font-size:1.3rem;
    color:var(--doma-text-muted);
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .calendar .legend .day.blocked{
    box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--palette-terracotta) 55%, var(--palette-paper));
}
:where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .cm-reservation-place-calendar h4{
    font-family:var(--font-heading, inherit);
    font-weight:400;
    color:var(--doma-heading);
}

/* ------------------------------------------------------------------------------------------
    Odpočet - pruh jako pilulka z papíru, uvnitř pruh v barvě palety, čas nadpisovým písmem.
    Zaoblení z nastavení prvku platí, jen nulové (výchozí) šablona zakulatí.
------------------------------------------------------------------------------------------ */
.theme-doma .cm-countdown-element .cm-countdown-progress{
    min-height:4.6rem;
    padding:.4rem;
    border:1.5px solid var(--doma-line);
    background-color:var(--palette-paper);
    box-shadow:0 14px 30px -24px var(--doma-shadow);
}
.theme-doma .cm-countdown-element .cm-countdown-progress:is([style*="border-radius:0px"],[style*="border-radius: 0px"]){
    border-radius:999px !important;
}
.theme-doma .cm-countdown-element .cm-countdown-progress-bar{
    justify-content:center;
    padding:.6rem 1.8rem;
    border-radius:inherit;
    background-size:2.8rem 2.8rem;
    color:var(--palette-brown);
    animation-duration:3s;
}
.theme-doma .cm-countdown-element .cm-countdown-progress-bar *{
    color:inherit;
}
.theme-doma .cm-countdown-element .cm-countdown-progress-bar.success{
    background-color:var(--palette-gold) !important;
}
.theme-doma .cm-countdown-element .cm-countdown-progress-bar.warning{
    background-color:var(--palette-lightgold) !important;
}
.theme-doma .cm-countdown-element .cm-countdown-progress-bar.danger{
    background-color:color-mix(in srgb, var(--palette-terracotta) 75%, var(--palette-brown)) !important;
    color:var(--palette-cream);
}
.theme-doma .cm-countdown-element .count-down-time{
    font-family:var(--font-heading, inherit);
    font-size:3.6rem;
    font-weight:400;
    letter-spacing:.02em;
    font-variant-numeric:tabular-nums;
    color:var(--doma-heading);
}
.theme-doma .cm-countdown-element .count-down-time.bigger{
    font-size:5.2rem;
}

/* ------------------------------------------------------------------------------------------
    Formulář (přihlášení e-mailem) - pole a tlačítko ze šablony, jen trochu víc místa
------------------------------------------------------------------------------------------ */
.theme-doma .cm-form-element .input-group{
    max-width:36rem;
    min-height:5rem;
}
.theme-doma .cm-form-element .input-group input{
    padding-left:1.8rem;
}
.theme-doma .cm-form-element .input-group input.focus{
    padding:2rem 1.4rem .5rem 1.8rem;
}
.theme-doma .cm-form-element .input-group span.placeholder{
    left:1.8rem;
    color:var(--doma-text-muted);
    font-size:1.4rem !important;
}
.theme-doma .cm-form-element .input-group span.placeholder.focus{
    top:30%;
    font-size:1.2rem !important;
}
.theme-doma .cm-form-element .alert{
    max-width:46rem;
    margin:0 auto;
}
/* text tlačítka formuláře a rezervace je odstavec z editoru - bez okrajů odstavce, ať je text uprostřed */
.theme-doma :is(.cm-form-element,.cm-reservation-place-element) .btn :is(p,div){
    margin:0;
}

/* ------------------------------------------------------------------------------------------
    Fotogalerie - fotky v rámečku z papíru, střídavě lehce natočené, při najetí se narovnají
    (rámeček je přímo ve sloupci galerie, obrázek v prvku Obrázek leží o úroveň níž)
------------------------------------------------------------------------------------------ */
.theme-doma .cm-column-elements > .cm-image-content{
    padding:8px;
    border-radius:14px;
    background-color:var(--palette-paper);
    box-shadow:0 22px 40px -28px var(--doma-shadow);
    transition:rotate .9s var(--doma-ease), translate .9s var(--doma-ease), box-shadow .9s var(--doma-ease);
}
.theme-doma .cm-col:nth-child(odd) > .cm-column-elements > .cm-image-content{
    rotate:-.8deg;
}
.theme-doma .cm-col:nth-child(even) > .cm-column-elements > .cm-image-content{
    rotate:.8deg;
}
.theme-doma .cm-column-elements > .cm-image-content img:is([style*="border-radius:0px"],[style*="border-radius: 0px"]){
    border-radius:8px !important;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference){
    .theme-doma .cm-column-elements > .cm-image-content:hover{
        rotate:0deg;
        translate:0 -4px;
        box-shadow:0 30px 50px -28px var(--doma-shadow-strong);
    }
}

/* ------------------------------------------------------------------------------------------
    Rezervace - jméno nadpisovým písmem, fotka se zaoblením šablony
------------------------------------------------------------------------------------------ */
.theme-doma .cm-reservation-place-element h4.cm-reservation-place-name{
    font-size:2.6rem;
}
.theme-doma .cm-reservation-place-element .cm-image-content img:is([style*="border-radius:0px"],[style*="border-radius: 0px"]){
    border-radius:20px !important;
    box-shadow:0 26px 50px -34px var(--doma-shadow-strong);
}

/* ------------------------------------------------------------------------------------------
    Kvíz (web) - odpovědi, dlaždice, zpět, souhlas a karta výsledku v barvách šablony
    (průběh, velké číslo a výlučná dlaždice jsou v theme.css)
------------------------------------------------------------------------------------------ */
.theme-doma .cm-quiz .radio-row{
    padding:1rem 1.2rem;
    border-radius:14px;
}
.theme-doma .cm-quiz .radio-row.checked{
    background-color:color-mix(in srgb, var(--palette-butter) 70%, transparent);
}
.theme-doma .cm-quiz-tile{
    border:1.5px solid var(--doma-line);
    border-radius:18px;
    background-color:var(--palette-paper);
    color:var(--palette-brown);
}
.theme-doma .cm-quiz-tile.selected{
    padding:11.5px;
    border:2px solid var(--doma-gold-deep);
    background-color:color-mix(in srgb, var(--palette-butter) 70%, var(--palette-paper));
}
.theme-doma .cm-quiz-tile:focus-visible,
.theme-doma .cm-quiz-back:focus-visible{
    outline:3px solid var(--palette-terracotta);
    outline-offset:2px;
}
.theme-doma .cm-quiz-back{
    font-family:var(--font-body, inherit);
    font-size:1.5rem;
    font-weight:600;
    color:color-mix(in srgb, var(--link-color, var(--palette-terracotta)) 72%, var(--palette-brown));
    text-decoration:underline;
    text-underline-offset:.22em;
}
.theme-doma .cm-quiz-consent{
    opacity:1;
    color:var(--doma-text-muted);
}
.theme-doma .cm-quiz-timer{
    font-family:var(--font-heading, inherit);
    font-weight:400;
}
.theme-doma .cm-quiz-result-card{
    border:0;
    border-radius:8px 8px 26px 8px;
    background-color:var(--palette-paper);
    box-shadow:0 26px 50px -34px var(--doma-shadow-strong);
}

/* ------------------------------------------------------------------------------------------
    Omezení pohybu
------------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
    .theme-doma .cm-countdown-element .cm-countdown-progress-bar{
        animation:none !important;
    }
    .theme-doma .cm-column-elements > .cm-image-content,
    :where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) :is(.checkbox,.radio)::before,
    :where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .switch-yes-no .switch-slider,
    :where(.theme-doma, body:has(.theme-doma) .ReactModalPortal) .calendar .day{
        transition:none !important;
    }
}