/*
 * APP-UDGAVEN (7.156.0) - kun aktiv paa body.syngbar-app.
 *
 * Et LAG oven paa de eksisterende sider: samme markup, samme felter -
 * her faar de bare mobil-taet, fuldskaerms paaklaedning, og startformularens
 * trin (sat af syngbar-app.js med data-syngbar-trin) vises ét ad gangen.
 */

/* -- tilbuds-banner (vises i ALMINDELIG visning, kun paa smalle skaerme) -- */
.syngbar-app-tilbud{display:none}
@media (max-width: 820px){
  body:not(.syngbar-app) .syngbar-app-tilbud{
    display:flex;gap:8px;align-items:center;justify-content:center;
    position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));
    z-index:9998;background:#2B5828;color:#fff;border-radius:12px;
    padding:11px 14px;font-size:15px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
  body:not(.syngbar-app) .syngbar-app-tilbud a{color:#fff;text-decoration:none;font-weight:700}
}

/* -- grundtone i app-udgaven -- */
body.syngbar-app{background:#FAF8F1}
/* Kun kendte blokke centreres - en bred [class^=syngbar-]-regel ramte alt
   med syngbar-klasser og pressede felterne sammen (7.158.0-rettelse). */
body.syngbar-app .syngbar-form,
body.syngbar-app .syngbar-intro,
body.syngbar-app .syngbar-fra,
body.syngbar-app .syngbar-taalmod{max-width:560px;margin-left:auto;margin-right:auto}

/* script/style i formularen maa ALDRIG blive synlige - uanset trin-maerker */
body.syngbar-app .syngbar-form script,
body.syngbar-app .syngbar-form style{display:none !important}

/* Luft og laesbarhed i felterne */
body.syngbar-app .syngbar-form label{display:block;margin:0 0 18px;font-weight:700;font-size:16px}
body.syngbar-app .syngbar-form label small{
  display:block;margin-top:7px;font-weight:400;font-size:13.5px;color:#6E6A58;line-height:1.45}
body.syngbar-app .syngbar-form input[type=text],
body.syngbar-app .syngbar-form textarea,
body.syngbar-app .syngbar-form select{
  display:block;width:100%;box-sizing:border-box;margin-top:7px;
  font-size:16px;font-weight:400;padding:13px;border-radius:12px;
  min-height:48px;border:1px solid #E5E1D2;background:#fff}
/* Alder/afsender staar i to spalter paa PC - paa mobilen under hinanden */
body.syngbar-app .syngbar-form .syngbar-to{display:block}
body.syngbar-app .syngbar-form .syngbar-to label{width:100%}
body.syngbar-app .syngbar-knap{
  display:block;width:100%;font-size:17px;font-weight:700;
  padding:15px;border-radius:14px}

/* -- skift-link i app-udgaven -- */
.syngbar-app-skift{text-align:center;padding:18px 0 26px;font-size:13.5px}
.syngbar-app-skift a{color:#6E6A58}

/* -- trinvisning af startformularen -- */
body.syngbar-app form.syngbar-form.syngbar-trinvis [data-syngbar-trin]{display:none}
body.syngbar-app form.syngbar-form.syngbar-trinvis [data-syngbar-trin].syngbar-trin-aktiv{display:block}
/* Taelleren skjuler sig selv, naar der intet er at sige (.vis mangler) - det
   maa trin-laget ikke overtrumfe (7.192.0: tom kasse som en streg hos Leif) */
body.syngbar-app form.syngbar-form.syngbar-trinvis .syngbar-taeller.syngbar-trin-aktiv:not(.vis){display:none}
/* Taelleren vises ud fra formularens aktive trin - ikke sin egen klasseliste (7.193.0) */
body.syngbar-app form.syngbar-form.syngbar-trinvis[data-syngbar-akt="3"] .syngbar-taeller.vis{display:block}

.syngbar-trin-hoved{display:flex;align-items:center;gap:10px;margin:4px 0 6px}
.syngbar-trin-hoved .syngbar-trin-skilt{
  font-size:13.5px;font-weight:700;color:#2B5828;background:#EFF5EC;
  border-radius:99px;padding:7px 13px}
.syngbar-trin-hoved .syngbar-trin-tilbage{
  border:1px solid #E5E1D2;background:#fff;color:#262419;border-radius:10px;
  padding:8px 12px;font-size:15px;cursor:pointer}
.syngbar-fremdrift{height:5px;border-radius:99px;background:#E5E1D2;margin:2px 0 16px;overflow:hidden}
.syngbar-fremdrift i{display:block;height:100%;background:#3E7C3A;border-radius:99px;transition:width .25s}

.syngbar-trin-frem{
  display:block;width:100%;border:0;border-radius:14px;background:#3E7C3A;color:#fff;
  font-size:17px;font-weight:700;padding:15px;cursor:pointer;margin-top:16px;
  transition:transform .08s,filter .08s;touch-action:manipulation}
.syngbar-trin-frem:active{transform:scale(.965);filter:brightness(.92)}

/* -- fast afspiller i bunden, naar siden har en melodi at spille -- */
.syngbar-app-spiller{
  position:fixed;left:0;right:0;bottom:0;z-index:9997;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(transparent, rgba(250,248,241,.6) 30%)}
.syngbar-app-spiller .syngbar-app-spiller-kasse{
  max-width:536px;margin:0 auto;background:#2B5828;color:#FAF8F1;border-radius:14px;
  padding:8px 12px}
.syngbar-app-spiller .syngbar-app-spiller-titel{
  font-size:12.5px;font-weight:700;margin:0 0 4px 2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.syngbar-app-spiller audio{width:100%;height:36px}
body.syngbar-app.syngbar-har-spiller{padding-bottom:120px}

/* -- taeppet mellem tryk og ventesiden -- */
.syngbar-app-taeppe{
  position:fixed;inset:0;z-index:99999;background:#FAF8F1;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:28px}
.syngbar-app-taeppe-inder{max-width:340px}
.syngbar-app-taeppe h2{font-size:22px;color:#262419;margin:18px 0 8px}
.syngbar-app-taeppe p{font-size:15px;color:#6E6A58;line-height:1.5;margin:0}
.syngbar-app-hjul{
  width:44px;height:44px;margin:0 auto;border-radius:99px;
  border:5px solid #E5E1D2;border-top-color:#3E7C3A;
  animation:syngbarHjul .9s linear infinite}
@keyframes syngbarHjul{to{transform:rotate(360deg)}}

/* Eget app-hoved (7.165.0): temaets hoved skjules helt i app-udgaven -
   det kan ikke opdrages paa en telefon. Egen slank bjaelke i stedet. */
body.syngbar-app :is(#masthead,#header,header.header,.header-wrapper,
  .header,#top-bar,.top-bar,#wpadminbar){display:none !important}
/* ... og temaets fod (7.165.0): bank, links og ikoner er stoej i et
   app-flow - mini-foden .syngbar-app-bund traeder i stedet. */
body.syngbar-app :is(#footer,footer.footer,.footer-wrapper,
  .absolute-footer,.footer-widgets,.footer){display:none !important}
.syngbar-app-bund{
  max-width:560px;margin:26px auto 8px;padding:0 16px 90px;
  text-align:center;font-size:12.5px;color:#6E6A58}
.syngbar-app-bund a{color:#6E6A58}
body.syngbar-app{padding-top:calc(56px + env(safe-area-inset-top,0px))}
/* Skrive-beskeden til kunden staar tydeligt (dobbeltlup 25.09):
   den roterende status + tiden, centreret under puls-bjaelken. */
body.syngbar-app .syngbar-vent-status{display:block;text-align:center;margin-top:16px}
body.syngbar-app .syngbar-arbejdstekst{display:block;font-weight:700;font-size:16px}
body.syngbar-app .syngbar-arbejdstid{display:block;margin-top:4px;font-size:13.5px;opacity:.75}
.syngbar-app-top{
  position:fixed;top:0;left:0;right:0;z-index:9997;height:52px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;padding-top:env(safe-area-inset-top,0);
  box-sizing:content-box;background:#FAF8F1;
  border-bottom:1px solid #E5E1D2}
.syngbar-app-top-navn{
  font-weight:800;font-size:17px;color:#2B5828;text-decoration:none;letter-spacing:.2px}
.syngbar-app-top-kurv{
  position:relative;font-size:22px;text-decoration:none;color:#2B5828;line-height:1}
.syngbar-app-top-kurv .tal{
  position:absolute;top:-7px;right:-11px;min-width:17px;height:17px;
  border-radius:99px;background:#3E7C3A;color:#fff;font-size:11px;
  font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* Skrive-skaermen (7.170.0): siden opdaterer sig selv, saa melodi-afspilning
   afbrydes hele tiden - afspilleren skjules dér, melodinavnet bliver. */
body.syngbar-app .syngbar-arbejder :is(audio,.syngbar-valgtmelodi .hoer){display:none}

/* Prissidens valgkort (7.175.0, Leif: "opdel kasserne mere kraftigt"):
   mere luft, tykkere kant, og beskrivelsen i normal vaegt - app-reglen
   gjorde alle label fede, og hele kortet ER en label. */
body.syngbar-app .syngbar-loesninger{gap:18px}
body.syngbar-app .syngbar-loesning{border-width:2px;border-radius:14px;padding:16px 18px}
body.syngbar-app .syngbar-loesning .hvad,
body.syngbar-app .syngbar-loesning .hvad *{font-weight:400 !important}

/* Kurv og kasse i app-udgaven (7.166.0) - KUN udseende, aldrig funktion */
body.syngbar-app .woocommerce{max-width:640px;margin:0 auto;padding:0 4px}
body.syngbar-app .woocommerce :is(.button,button[type=submit],input[type=submit]){
  border-radius:12px}

/* ------------------------------------------------------------------
   MOERK UDGAVE (7.161.0). Leif 25.09: "paa en telefon er det lidt mere
   smart at det er paa en moerk baggrund". App-udgaven foelger telefonens
   egen indstilling: moerk tilstand paa telefonen = moerk app. Varm moerk
   palet i samme familie som den lyse - ikke koligt kulsort.
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark){
  body.syngbar-app{background:#1B1A15 !important;color:#EDEAE0}

  /* Temaets og Thrives egne LYSE kasser laa ovenpaa den moerke bund
     (Leifs fund 25.09: "det ser underligt ud") - alle indpakninger
     tvinges gennemsigtige, saa den moerke bund slaar igennem. */
  body.syngbar-app :is(#wrapper,#main,.page-wrapper,.page,.container,
    article,.entry-content,section,.section,.section-content,.section-bg,
    .row,.col,.col-inner),
  body.syngbar-app [class*="thrv"],
  body.syngbar-app [class*="tcb-"],
  body.syngbar-app [class*="tve"]{
    background:transparent !important;background-color:transparent !important;
    background-image:none !important}

  /* Tekstfarver med muskelkraft, saa de ogsaa vinder over Thrives egne
     farvevalg - men IKKE inde i vores egne farvelagte elementer. */
  body.syngbar-app :is(h1,h2,h3,h4,h5,p,li,td,th,legend,strong,b,span,div,
    label,small,dt,dd,address,figcaption,pre,em){color:#EDEAE0 !important}
  body.syngbar-app a{color:#8FC98A !important}
  /* ... og vores egne farver genoprettes OVENPAA (senere regel vinder) */
  body.syngbar-app .syngbar-form label small{color:#A8A492 !important}
  body.syngbar-app .syngbar-trin-skilt{color:#9CC895 !important}
  body.syngbar-app .syngbar-app-skift a{color:#A8A492 !important}
  body.syngbar-app .syngbar-taeller.rolig,
  body.syngbar-app .syngbar-taeller.rolig :is(span,div){color:#C9E3C4 !important}
  body.syngbar-app .syngbar-taeller.mange,
  body.syngbar-app .syngbar-taeller.mange :is(span,div){color:#EBD3A0 !important}
  body.syngbar-app .syngbar-taeller.formeget,
  body.syngbar-app .syngbar-taeller.formeget :is(span,div){color:#EFB6AE !important}
  body.syngbar-app .syngbar-app-taeppe p{color:#A8A492 !important}

  /* Alle skrivefelter i moerk tilstand (7.167.0) - kassens felter stod
     hvide, fordi reglen kun daekkede .woocommerce-indpakningen. */
  body.syngbar-app :is(input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select){
    background:#26241C !important;border:1px solid #3A382E !important;
    color:#EDEAE0 !important}
  body.syngbar-app :is(input,textarea)::placeholder{color:#7C7868 !important}

  /* --- kurv og kasse (7.166.0) --- */
  body.syngbar-app .woocommerce :is(input[type=text],input[type=email],
    input[type=tel],input[type=password],input[type=number],input[type=search],
    textarea,select){
    background:#26241C !important;border:1px solid #3A382E !important;
    color:#EDEAE0 !important}
  body.syngbar-app .woocommerce :is(.button,button[type=submit],input[type=submit]){
    background:#3E7C3A !important;border-color:#3E7C3A !important;color:#fff !important}
  body.syngbar-app .woocommerce :is(table.shop_table,table.shop_table td,
    table.shop_table th,table.shop_table tr){
    background:transparent !important;border-color:#3A382E !important}
  body.syngbar-app :is(.cart_totals,.woocommerce-checkout-review-order,
    #order_review,.woocommerce-info,.woocommerce-message,
    .woocommerce-form-coupon,.woocommerce-form-login){
    background:#26241C !important;border-color:#3A382E !important;color:#EDEAE0 !important}
  body.syngbar-app .woocommerce-error{
    background:#33201D !important;border-color:#D0564A !important;color:#EFB6AE !important}
  body.syngbar-app .woocommerce-checkout #payment,
  body.syngbar-app .woocommerce-checkout #payment div.payment_box{
    background:#26241C !important;color:#EDEAE0 !important}
  body.syngbar-app .woocommerce-checkout #payment div.payment_box::before{
    border-bottom-color:#26241C !important}
  /* landevaelgeren (select2) - dens rullemenu haenger paa body */
  body.syngbar-app .select2-container--default .select2-selection--single,
  body.syngbar-app .select2-dropdown,
  body.syngbar-app .select2-search--dropdown .select2-search__field{
    background:#26241C !important;border-color:#3A382E !important;color:#EDEAE0 !important}
  body.syngbar-app .select2-container--default .select2-selection--single
    .select2-selection__rendered{color:#EDEAE0 !important}
  body.syngbar-app .select2-results__option{color:#EDEAE0}

  /* Pluginets egne lyse kort (7.167.0): proevevers-kassen, ventesiden,
     vers-kortene m.fl. stod hvide med lys tekst = udvasket. Males moerke. */
  body.syngbar-app :is(.syngbar-lyd,.syngbar-blok,.syngbar-naeste,
    .syngbar-koeb,.syngbar-bud,.syngbar-vent-boks,.syngbar-opgrader){
    background:#26241C !important;border-color:#3A382E !important}
  body.syngbar-app :is(.syngbar-hvaddufaar,.syngbar-valgblok,.syngbar-velkomst,.syngbar-fra){
    background:#22301F !important;border-color:#3E5B39 !important}
  body.syngbar-app .syngbar-koe{
    background:#332A17 !important;border-left-color:#D9A441 !important;color:#EBD3A0 !important}
  body.syngbar-app .syngbar-taalmod{border-left-color:#3E5B39 !important}
  body.syngbar-app .syngbar-lvalg{background:#26241C !important}
  body.syngbar-app :is(.syngbar-fremdrift,.syngbar-puls){background:#3A382E !important}
  body.syngbar-app .syngbar-pris{background:#26241C !important}
  body.syngbar-app .syngbar-loesning{
    background:#24221B !important;border:2px solid #4A473B !important}
  body.syngbar-app :is(.syngbar-loesning.valgt,.syngbar-loesning:has(input[name=loesning]:checked)){
    background:#22301F !important;border-color:#5CAB55 !important;
    box-shadow:0 0 0 2px rgba(92,171,85,.35)}
  body.syngbar-app .syngbar-loesning .pris{color:#9CC895 !important}
  body.syngbar-app .syngbar-loesning .hvad{color:#C9C5B5 !important}
  /* Systematisk fejning 7.174.0: de sidste lyse flader */
  body.syngbar-app .syngbar-tagmed-tekst{
    background:#26241C !important;border-color:#3A382E !important;color:#EDEAE0 !important}
  body.syngbar-app :is(.syngbar-tagmed,.syngbar-fordel){
    background:#22301F !important;border-color:#3E5B39 !important}
  body.syngbar-app :is(.syngbar-rest,.syngbar-note[style*="fff8e5"]){
    background:#332A17 !important;color:#EBD3A0 !important}
  body.syngbar-app .syngbar-valgtmelodi{
    background:#22301F !important;border-color:#3E5B39 !important;
    border-left-color:#5CAB55 !important}
  body.syngbar-app .syngbar-bestilvers.er-proevevers{
    background:#22301F !important;border-color:#3E5B39 !important;
    border-left-color:#5CAB55 !important}
  body.syngbar-app .syngbar-versknapper button{
    background:#26241C !important;border-color:#3A382E !important;color:#EDEAE0 !important}
  body.syngbar-app .syngbar-versknapper .vaek{color:#EFB6AE !important}
  body.syngbar-app .syngbar-knap.sekundaer{background:#3A382E !important}
  body.syngbar-app .status.god{background:#22301F !important;color:#9CC895 !important}
  body.syngbar-app .status.afvig{background:#33201D !important;color:#EFB6AE !important}
  body.syngbar-app .syngbar-fejl{
    background:#33201D !important;border-left-color:#D0564A !important;color:#EFB6AE !important}
  body.syngbar-app .syngbar-blandblok:hover{background:rgba(255,255,255,.06) !important}

  body.syngbar-app .syngbar-app-bund,
  body.syngbar-app .syngbar-app-bund a{color:#7C7868 !important}
  body.syngbar-app .syngbar-app-top{background:#1B1A15;border-bottom-color:#3A382E}
  body.syngbar-app .syngbar-app-top-navn{color:#8FC98A !important}
  body.syngbar-app .syngbar-app-top-kurv{color:#8FC98A !important}
  body.syngbar-app .syngbar-app-top-kurv .tal{background:#3E7C3A !important;color:#fff !important}

  /* Temaets indkoebskurv i hovedet stod som en hvid klods (Leifs fund
     25.09) - den males med i moerk tilstand: gennemsigtig krop, groen
     kant og lyst tal, samme familie som resten. Daekker Flatsomes
     tegnede kurv (strong + :after-hank) og et evt. ikon/tal-emblem. */
  body.syngbar-app :is(.header-cart-link,.cart-item,.cart-icon,.cart-icon strong){
    background:transparent !important;background-color:transparent !important;
    color:#EDEAE0 !important}
  body.syngbar-app .cart-icon strong{border-color:#8FC98A !important}
  body.syngbar-app .cart-icon strong:after{
    background:transparent !important;border-color:#8FC98A !important}
  body.syngbar-app :is(.cart-icon i,.header-cart-link i){color:#8FC98A !important}
  body.syngbar-app :is(.header-cart-link .badge,.cart-item .badge,
    .header-cart-link .cart-count,.badge-container .badge){
    background:#3E7C3A !important;border-color:#3E7C3A !important;color:#fff !important}

  body.syngbar-app .syngbar-form label{color:#EDEAE0}
  body.syngbar-app .syngbar-form label small{color:#A8A492}
  body.syngbar-app .syngbar-form input[type=text],
  body.syngbar-app .syngbar-form textarea,
  body.syngbar-app .syngbar-form select{
    background:#26241C;border-color:#3A382E;color:#EDEAE0}
  body.syngbar-app .syngbar-form input[type=text]::placeholder,
  body.syngbar-app .syngbar-form textarea::placeholder{color:#7C7868}

  body.syngbar-app .syngbar-trin-skilt{background:#22301F;color:#9CC895}
  body.syngbar-app .syngbar-trin-tilbage{
    background:#26241C;border-color:#3A382E;color:#EDEAE0}
  body.syngbar-app .syngbar-fremdrift{background:#3A382E}
  body.syngbar-app .syngbar-fremdrift i{background:#5CAB55}
  body.syngbar-app .syngbar-trin-frem{background:#3E7C3A}
  body.syngbar-app .syngbar-app-skift a{color:#A8A492}

  body.syngbar-app .syngbar-app-spiller-omraade{
    background:linear-gradient(transparent, rgba(27,26,21,.75) 30%)}

  /* tings-taelleren: dens lyse farver ligger i formularens egen
     style-blok - app-reglerne her er mere specifikke og vinder */
  body.syngbar-app .syngbar-taeller.rolig{background:#22301F;border-color:#5CAB55;color:#C9E3C4}
  body.syngbar-app .syngbar-taeller.mange{background:#332A17;border-color:#D9A441;color:#EBD3A0}
  body.syngbar-app .syngbar-taeller.formeget{background:#33201D;border-color:#D0564A;color:#EFB6AE}

  body.syngbar-app .syngbar-app-taeppe{background:#1B1A15}
  body.syngbar-app .syngbar-app-taeppe h2{color:#EDEAE0}
  body.syngbar-app .syngbar-app-taeppe p{color:#A8A492}
  body.syngbar-app .syngbar-app-hjul{border-color:#3A382E;border-top-color:#5CAB55}
}

@media (prefers-reduced-motion: reduce){
  .syngbar-fremdrift i,.syngbar-trin-frem{transition:none}
  .syngbar-app-hjul{animation:none}
}