/*
 * Nyt look 2026 - Bjørns oplæg 07-09-2026.
 * Indlæses EFTER style_2022_09_02.css og hamburgers.min.css og overskriver dem.
 *
 * Farver:  baggrund #2c323b, guld #d2b47c, lys #f5f4f0
 * Skrift:  Playfair Display til overskrifter og logo, Montserrat til brødtekst
 * Knapper: changerende guld (diagonal gradient med vandrende glans)
 * Bokse:   guldramme, radius 9.1px
 * Burger:  to guldstreger
 * Flow:    .dw-reveal glider 25 px op når den scrolles ind (a la cofoco.dk)
 */

:root {
  --dw-bg: #2c323b;
  --dw-bg-box: #343a43;
  --dw-gold: #d2b47c;
  --dw-gold-dark: #b8975a;
  --dw-gold-light: #efdcb0;
  --dw-ivory: #f5f4f0;
  --dw-ivory-box: #fbfaf7;
  --dw-text-on-light: #2c323b;
  --dw-muted-on-light: #5a5f66;
  --dw-gold-on-light: #8a6d3b;
}

/* ---------- Grundfarver og skrift ---------- */

body {
  background-color: var(--dw-bg) !important;
  color: var(--dw-ivory);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 500;
}

a, a:hover, a:visited {
  color: var(--dw-gold);
}

/* ---------- Knapper: changerende guld ---------- */

@keyframes dw-sheen {
  from { background-position: 0% 0; }
  to   { background-position: 100% 0; }
}
@keyframes dw-sheen-hover {
  from { background-position: 0% 0; }
  to   { background-position: 100% 0; }
}

.bs-button.is-primary,
.btn-primary, .btn-primary:hover, .btn-primary:visited, .btn-primary:focus,
.modal-content .btn.btn-primary,
.modal-content .btn.btn-lg.btn-primary.btn-block,
.modal-content .btn.btn-xs.btn-primary {
  background: linear-gradient(105deg, var(--dw-gold-dark) 0%, var(--dw-gold) 28%, var(--dw-gold-light) 50%, var(--dw-gold) 72%, var(--dw-gold-dark) 100%);
  background-size: 220% 100%;
  background-position: 100% 0;
  animation: dw-sheen 2.4s ease-in-out 0.3s 1 both;
  color: var(--dw-bg);
  border-radius: 7px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  font-weight: 500;
}
/* Hover: samme glans én gang til. dw-sheen beholdes i listen, så den ikke starter forfra når musen forlader knappen */
.bs-button.is-primary:hover,
.btn-primary:hover,
.modal-content .btn.btn-primary:hover {
  animation: dw-sheen 2.4s ease-in-out 0.3s 1 both, dw-sheen-hover 1.4s ease-in-out 1 both;
  color: var(--dw-bg);
}

/* Sekundære knapper (filtre m.m.): guldramme, ingen fyld */
.bs-button {
  background: transparent;
  color: var(--dw-ivory);
  border: 1px solid var(--dw-gold);
  border-radius: 7px;
  box-shadow: none;
}
.bs-button:hover {
  background: rgba(210, 180, 124, 0.14);
}
.bs-button.is-checked,
.bs-primary-button.is-checked {
  background: var(--dw-gold);
  color: var(--dw-bg);
  box-shadow: none;
}

/* ---------- Navbar ---------- */

.bslab-navbar {
  background: var(--dw-bg);
}

.dw-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  height: 70px;
  text-decoration: none !important;
}
.dw-logo-name {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--dw-gold);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.dw-logo-dates {
  font-family: 'Montserrat', Arial, sans-serif;
  color: var(--dw-ivory);
  font-size: 14.5px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  min-height: 1.2em;
  text-align: center;
}
@media screen and (max-width: 600px) {
  .dw-logo { gap: 6px; }
  .dw-logo-name { font-size: 17px; }
  .dw-logo-dates { font-size: 12.3px; }
}

/* Burger: to guldstreger, bliver til et kryds når den er aktiv */
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after,
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: var(--dw-gold);
}
.hamburger--spring .hamburger-inner {
  top: 6px;
  transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), top 0.22s ease;
}
.hamburger--spring .hamburger-inner::before {
  display: none;
}
.hamburger--spring .hamburger-inner::after {
  top: 12px;
  transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), top 0.22s ease;
}
.hamburger--spring.is-active .hamburger-inner {
  top: 12px;
  background-color: var(--dw-gold) !important;
  transform: rotate(45deg);
  transition-delay: 0s;
}
.hamburger--spring.is-active .hamburger-inner::after {
  top: 0;
  transform: rotate(-90deg);
  transition-delay: 0s;
}

/* Fuldskærmsmenu: centreret Playfair, tynd guldlinje, folder sig ud punkt for punkt */
.bslab-navigation-menu.active {
  background-color: var(--dw-bg);
}
.bslab-navigation-content {
  margin: 0 auto !important;
  padding: 90px 20px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.bslab-navigation-content ul {
  margin: 0;
  padding: 0;
}
.bslab-navigation-content ul li {
  opacity: 0;
  transform: translateY(25px);
}
.bslab-navigation-menu.active .bslab-navigation-content ul li {
  animation: dw-menu-in 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
@keyframes dw-menu-in {
  from { opacity: 0; transform: translateY(25px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bslab-navigation-content ul li:nth-child(1)  { animation-delay: 0.10s; }
.bslab-navigation-content ul li:nth-child(2)  { animation-delay: 0.18s; }
.bslab-navigation-content ul li:nth-child(3)  { animation-delay: 0.26s; }
.bslab-navigation-content ul li:nth-child(4)  { animation-delay: 0.34s; }
.bslab-navigation-content ul li:nth-child(5)  { animation-delay: 0.42s; }
.bslab-navigation-content ul li:nth-child(6)  { animation-delay: 0.50s; }
.bslab-navigation-content ul li:nth-child(7)  { animation-delay: 0.58s; }
.bslab-navigation-content ul li:nth-child(8)  { animation-delay: 0.66s; }
.bslab-navigation-content ul li:nth-child(9)  { animation-delay: 0.74s; }
.bslab-navigation-content ul li:nth-child(10) { animation-delay: 0.82s; }
/* Sprog, guldlinje og ikoner kommer til sidst */
.bslab-navigation-content ul.bslab-lang_flags { opacity: 0; transform: translateY(25px); }
.bslab-navigation-menu.active .bslab-navigation-content ul.bslab-lang_flags { animation: dw-menu-in 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) 0.9s forwards; }
.bslab-navigation-content ul.bslab-lang_flags li { opacity: 1; transform: none; animation: none !important; }
.bslab-navigation-content ul li a.effect-3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 30px;
  line-height: 1.3;
  padding: 6px 0;
  color: var(--dw-ivory);
  text-decoration: none;
}
.bslab-navigation-content ul li a.effect-3:hover {
  color: var(--dw-gold);
}
.bslab-navigation-content ul li a.effect-3:before {
  background: var(--dw-gold);
}
/* Dansk / English: to små spærrede ord, det valgte i guld med en tynd streg under */
.bslab-navigation-content ul li:has(a.lang) {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 26px;
}
.bslab-navigation-content ul li:has(a.lang) > span {
  display: none;
}
.bslab-navigation-content ul li a.lang,
.bslab-navigation-content ul li a.lang:visited {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245, 244, 240, 0.55);
  padding: 4px 0 6px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.bslab-navigation-content ul li a.lang:hover {
  color: var(--dw-ivory);
}
.bslab-navigation-content ul li a.lang.flag_chosen {
  color: var(--dw-gold);
  border-bottom-color: var(--dw-gold);
}
/* Tynd guldlinje og SoMe-ikoner nederst */
.bslab-navigation-content ul.bslab-lang_flags {
  margin: 44px 0 0 !important;
  padding: 0 !important;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 28px;
}
.bslab-navigation-content ul.bslab-lang_flags li {
  display: flex;
  margin: 0;
  padding: 0;
}
/* Det tredje li i markuppen er tomt (kun whitespace) og skal ikke tage plads i rækken */
.bslab-navigation-content ul.bslab-lang_flags li:empty,
.bslab-navigation-content ul.bslab-lang_flags li:not(:has(a)) { display: none !important; }
.bslab-navigation-content ul.bslab-lang_flags li:empty { display: none; }
.bslab-navigation-content ul.bslab-lang_flags li a { display: block; line-height: 0; }
.bslab-navigation-content ul.bslab-lang_flags li a svg { display: block; }
.bslab-navigation-content ul.bslab-lang_flags li a:hover svg { stroke: var(--dw-ivory); }
@media (max-width: 600px) {
  .bslab-navigation-content ul li a.effect-3 { font-size: 24px; }
}

/* ---------- Forsiden: CMS-teksten i mørke kort med guldramme (kun body.dw-page-forside) ---------- */

.dw-page-forside .homepage-content .markdown {
  padding-top: 40px;
}
.dw-page-forside .homepage-content .markdown h2 {
  font-size: 40px;
  line-height: 1.1;
  margin-top: 0;
  color: var(--dw-ivory);
}
@media (max-width: 600px) {
  .dw-page-forside .homepage-content .markdown h2 { font-size: 28px; }
}
.dw-page-forside .homepage-content .markdown .row + .row > .col-md-4 {
  background: var(--dw-bg-box);
  border: 1px solid var(--dw-gold);
  border-radius: 9.1px;
  padding: 22px 22px 24px;
  margin-top: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
@media (min-width: 992px) {
  .dw-page-forside .homepage-content .markdown .row + .row {
    display: flex;
    gap: 30px;
  }
  .dw-page-forside .homepage-content .markdown .row + .row > .col-md-4 {
    flex: 1 1 0;
    width: auto;
    float: none;
  }
}
.dw-page-forside .homepage-content .markdown .row + .row h4 {
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dw-ivory);
}
.dw-page-forside .homepage-content .markdown img.img-responsive {
  border: 0;
  border-radius: 0;
}
/* Billederne i de tre kolonner fylder hele kolonnens bredde (ud over boksens padding), uden ramme.
   Øverst og nederst følger de boksens runde hjørner. */
.dw-page-forside .homepage-content .markdown .row + .row > .col-md-4 .component img.img-responsive {
  display: block;
  width: calc(100% + 44px);
  max-width: none;
  margin: 10px -22px !important;
}
.dw-page-forside .homepage-content .markdown .row + .row > .col-md-4 > .component:first-child img.img-responsive {
  margin-top: -22px !important;
  border-radius: 8px 8px 0 0;
}
/* Sidste billede i en kolonne fylder resten af boksen ned til bunden (kolonnerne er lige høje) */
.dw-page-forside .homepage-content .markdown .row + .row > .col-md-4 { display: flex; flex-direction: column; }
.dw-page-forside .homepage-content .markdown .row + .row > .col-md-4 > .component:last-child:has(img.img-responsive) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 10px -22px -24px;
}
.dw-page-forside .homepage-content .markdown .row + .row > .col-md-4 > .component:last-child:has(img.img-responsive) > a { flex: 1 1 auto; display: flex; min-height: 0; }
.dw-page-forside .homepage-content .markdown .row + .row > .col-md-4 > .component:last-child img.img-responsive {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  margin: 0 !important;
  border-radius: 0 0 8px 8px;
}

/* Restaurantkategorier */
.borderline-heading span {
  border: 1px solid var(--dw-gold);
  color: var(--dw-ivory);
  border-radius: 5px;
  letter-spacing: 0.04em;
}

/* ---------- Restaurantkort ---------- */

.restaurant-item {
  border: 1px solid var(--dw-gold);
  background-color: var(--dw-bg-box);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.restaurant-meta {
  background-color: rgba(44, 50, 59, 0.85);
}
.restaurant-details {
  background-color: rgba(44, 50, 59, 0.72);
}
.restaurant-details span {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500 !important;
}

/* ---------- Restaurantsiden: filtre og søgning ---------- */

.sticky-filter-summary,
.sticky-filter-search,
.bs-filter-bg {
  background-color: var(--dw-bg) !important;
  background-image: none;
}
.form-control,
.search-input {
  background: var(--dw-ivory);
  color: var(--dw-text-on-light);
  border: 1px solid var(--dw-gold) !important;
  border-radius: 7px;
  box-shadow: none;
}
.form-control:focus {
  border-color: var(--dw-gold-light);
  box-shadow: 0 0 0 2px rgba(210, 180, 124, 0.25);
}

/* ---------- Modal (restaurantvisning) ---------- */

.modal-content {
  background-color: var(--dw-ivory);
  border: 1px solid var(--dw-gold);
  border-radius: 9.1px;
}
.modal-content .modal-header,
.modal-content .res-header {
  background-color: var(--dw-bg) !important;
  color: var(--dw-ivory);
}
.panel-default {
  border-color: var(--dw-gold);
}

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

.footer,
.footer a {
  color: rgba(245, 244, 240, 0.75);
}
.footer {
  border-top: 1px solid rgba(210, 180, 124, 0.28);
  padding-top: 40px;
}

/* ---------- Ticker ---------- */

.ticker-banner-container {
  background-color: var(--dw-gold);
  color: var(--dw-bg);
}

/* ---------- Scroll-flow (kræver nyt_look_2026 JS i _template.php) ---------- */

html.dw-js .dw-reveal {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 1s ease-in-out, transform 1.1s cubic-bezier(0.25, 0.1, 0.25, 1);
}
html.dw-js .dw-reveal.active {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  html.dw-js .dw-reveal { opacity: 1; transform: none; transition: none; }
  html.dw-js #myModal .modal-body .dw-reveal { transition: none; }
  .bs-button.is-primary, .btn-primary, .dw-buybar-btn, .dw-sheet-show,
  #myModal :is(.modal-content, .dw-as-sheet) a.dw-confirm, #myModal :is(.modal-content, .dw-as-sheet) a.dw-confirm:hover { animation: none !important; }
  .bslab-navigation-content ul li, .bslab-navigation-content ul li a { animation: none !important; }
  /* Kort-glid, titel-glid og indtoning i modalen springes over (JS rydder op efter samme tid som før) */
  #myModal *, #myModal::before, #myModal.dw-ghost-slide { animation-duration: 0.01s !important; transition-duration: 0.01s !important; }
  .dw-buybar { transition: none; }
}

/* ---------- Restaurantsiden: filterpaneler (Favoritter, Landsdele, Menuer, Sorter) ---------- */

.panel-default,
.panel-default > .panel-heading {
  background: transparent !important;
  background-image: none !important;
  color: var(--dw-ivory) !important;
  border-color: var(--dw-gold) !important;
}
.panel-default > .panel-heading {
  border-radius: 7px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
}
.panel-default > .panel-heading:hover {
  background: rgba(210, 180, 124, 0.14) !important;
}
.panel-default > .panel-heading .caret {
  color: var(--dw-gold);
}
.panel-default > .panel-collapse > .panel-body,
.panel-default > .panel-body {
  background: var(--dw-bg-box);
  color: var(--dw-ivory);
  border-top-color: var(--dw-gold);
}
.filterRemove.btn-default {
  background: transparent;
  color: var(--dw-ivory);
  border: 1px solid var(--dw-gold);
}

/* ---------- Restaurantsiden: badges, valgte filtre, UDSOLGT ---------- */

.filter-count {
  background-color: var(--dw-gold) !important;
  color: var(--dw-bg) !important;
}
.close-panel.btn-link,
.close-panel.btn-link:hover,
.close-panel.btn-link:focus {
  color: var(--dw-gold);
}
.list-group-item {
  background: var(--dw-bg-box);
  color: var(--dw-ivory);
  border-color: rgba(210, 180, 124, 0.4);
}
.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover,
button.close-menu,
button.close-menu:focus,
button.close-menu:hover {
  color: var(--dw-bg) !important;
  background-color: var(--dw-gold) !important;
  border-color: var(--dw-gold) !important;
}
.glyphicon-ok { color: var(--dw-gold) !important; }
.glyphicon-stop { color: rgba(245, 244, 240, 0.35) !important; }
.search-icon { color: var(--dw-gold-on-light) !important; }
.clear-icon { color: var(--dw-muted-on-light) !important; }
.label-danger {
  background-color: var(--dw-gold);
  color: var(--dw-bg);
}
#filterResult, .sticky-filter-summary a.goToFilters {
  color: var(--dw-ivory);
}

/* ---------- Restaurant-modalen ----------
 * Mørk som resten af sitet. Reglerne er skrevet med #myModal foran, fordi
 * ajax_restaurant_new.php indlæser sin egen <style> senere og ellers ville vinde.
 */

#myModal .modal-content {
  background-color: var(--dw-bg);
  color: var(--dw-ivory);
  border: 1px solid var(--dw-gold);
  border-radius: 9.1px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
#myModal .modal-header {
  background-color: var(--dw-bg) !important;
  border-bottom: 1px solid rgba(210, 180, 124, 0.35);
}
#myModal .modal-title,
#myModal .modal-title span {
  color: var(--dw-ivory) !important;
  font-family: 'Playfair Display', Georgia, serif;
}
#myModal .modal-body span[style*="rgb(38, 61, 86)"] {
  color: rgba(245, 244, 240, 0.75) !important;
}
#myModal .modal-body,
#myModal .modal-body p,
#myModal .modal-body li,
#myModal .modal-body td {
  color: var(--dw-ivory);
}
#myModal .modal-body h1, #myModal .modal-body h2, #myModal .modal-body h3,
#myModal .modal-body h4, #myModal .modal-body h5 {
  color: var(--dw-ivory);
}
#myModal .modal-body a:not(.btn):not(.dw-chip):not(.dw-confirm) {
  color: var(--dw-gold);
}
#myModal .modal-body .restaurant_images img,
#myModal .modal-body .img-responsive {
  border: 1px solid var(--dw-gold);
  border-radius: 9.1px;
}
/* Små ikoner (vinglas, blad, cocktail) i overskrifter skal ikke have ramme */
#myModal .modal-body h1 img, #myModal .modal-body h2 img, #myModal .modal-body h3 img,
#myModal .modal-body h4 img, #myModal .modal-body strong img, #myModal div.menuBox img,
#myModal .modal-body img[src*="_icon_"] {
  border: 0;
  border-radius: 0;
}

/* Header-knapper: hjerte, forrige, næste, luk */
#myModal .modal-header .btn.btn-xs.btn-primary,
#myModal .modal-header .btn.btn-xs.btn-primary:hover {
  background: transparent;
  animation: none;
  color: var(--dw-ivory);
  border: 1px solid var(--dw-gold);
  box-shadow: none;
}
#myModal .modal-header .btn.btn-xs.btn-primary:hover {
  background: rgba(210, 180, 124, 0.2);
}

/* Menukortet */
#myModal div.menuBox {
  background-color: var(--dw-ivory-box);
  border: 1px solid var(--dw-gold);
  border-radius: 9.1px;
  color: var(--dw-text-on-light);
}
#myModal div.menuBox p,
#myModal div.menuBox span,
#myModal div.menuBox div { color: var(--dw-text-on-light); }
#myModal div.menuBox h1, #myModal div.menuBox h2, #myModal div.menuBox h3, #myModal div.menuBox h4,
#myModal div.menuBox strong, #myModal div.menuBox b {
  color: var(--dw-text-on-light);
}
#myModal div.menuBox h2, #myModal div.menuBox h3,
#myModal div.menuBox h2 span, #myModal div.menuBox h3 span { color: var(--dw-gold-on-light); }
#myModal div.menuBox span[style*="rgb(38, 61, 86)"],
#myModal div.menuBox small { color: var(--dw-muted-on-light) !important; }

/* Beskrivelse (inline blå baggrund i view'et) og madbillet-bjælken nederst */
/* Salgsteksten under billederne: ingen ramme, fuld bredde som billedet, guldstreg under */
#myModal .modal-about,
#myModal .salgstekst.colored {
  background-color: var(--dw-bg) !important;
  color: var(--dw-ivory) !important;
  border-radius: 0;
  border: 0;
  margin-left: -15px;
  margin-right: -15px;
  padding: 18px 40px 20px !important;
}
#myModal .dw-image-note small { color: rgba(245, 244, 240, 0.7); font-size: 13px; }
@media (max-width: 767px) {
  #myModal .modal-about,
  #myModal .salgstekst.colored { margin-left: -10px; margin-right: -10px; padding: 16px 22px 18px !important; }
}
#myModal .row[style*="rgb(1,71,80)"],
#myModal .row[style*="rgb(1, 71, 80)"],
#myModal .col-xs-12[style*="rgb(38, 61, 86)"],
#myModal .col-xs-12[style*="rgb(38,61,86)"] {
  background-color: var(--dw-bg) !important;
}
#myModal .row[style*="rgb(1,71,80)"],
#myModal .row[style*="rgb(1, 71, 80)"] {
  border-top: 1px solid rgba(210, 180, 124, 0.35);
}

/* Dato- og pax-vælgeren */
#myModal .dw-chooser {
  border: 1px solid var(--dw-gold);
  border-radius: 9.1px;
  background: var(--dw-bg);
  color: var(--dw-ivory);
}
#myModal .dw-chooser-label { color: var(--dw-gold); }
#myModal .dw-times-title,
#myModal .dw-summary-heading {
  color: var(--dw-ivory);
}
#myModal .dw-times-sub,
#myModal .dw-hint,
#myModal .dw-summary-label {
  color: rgba(245, 244, 240, 0.65);
}
#myModal .dw-times { border-top: 1px solid rgba(210, 180, 124, 0.35); }
#myModal .dw-summary-row { border-bottom: 1px solid rgba(210, 180, 124, 0.25); }

#myModal :is(.modal-content, .dw-as-sheet) .dw-chip,
#myModal :is(.modal-content, .dw-as-sheet) a.dw-chip,
#myModal :is(.modal-content, .dw-as-sheet) a.dw-chip:visited {
  background: transparent;
  border: 1px solid var(--dw-gold);
  color: var(--dw-ivory);
  box-shadow: none;
  border-radius: 7px;
}
#myModal :is(.modal-content, .dw-as-sheet) .dw-chip:hover,
#myModal :is(.modal-content, .dw-as-sheet) a.dw-chip:hover {
  background: rgba(210, 180, 124, 0.18);
  color: var(--dw-ivory);
}
#myModal :is(.modal-content, .dw-as-sheet) .dw-chip.dw-selected,
#myModal :is(.modal-content, .dw-as-sheet) .dw-chip.dw-selected:hover {
  background: var(--dw-gold);
  border-color: var(--dw-gold);
  color: var(--dw-bg);
}
#myModal :is(.modal-content, .dw-as-sheet) .dw-chip.dw-disabled,
#myModal :is(.modal-content, .dw-as-sheet) .dw-chip.dw-disabled:hover {
  background: transparent;
  border-color: rgba(245, 244, 240, 0.18);
  color: rgba(245, 244, 240, 0.35);
}

/* Bootstrap-paneler inde i modalen (fx "Praktisk info") */
#myModal .panel-primary > .panel-heading {
  background-color: var(--dw-bg) !important;
  border-color: var(--dw-gold) !important;
  color: var(--dw-ivory);
}
#myModal .panel-primary { border-color: var(--dw-gold); }
#myModal .panel-body { color: var(--dw-ivory); background: var(--dw-bg); }
#myModal .alert-danger {
  background: rgba(169, 68, 66, 0.2);
  border-color: rgba(169, 68, 66, 0.6);
  color: #f2c9c5;
}

/* ---------- Undersider (gavekort-siden som forbillede: mørk, Playfair-overskrift, lys tekst) ---------- */

.textpage h1, .textpage h2, .textpage h3,
.homepage-content .markdown h1, .homepage-content .markdown h2, .homepage-content .markdown h3 {
  color: var(--dw-ivory);
}
.homepage-content .markdown h1 { font-size: 40px; line-height: 1.15; }
.homepage-content .markdown h2 { font-size: 30px; line-height: 1.2; }
.homepage-content .markdown h3 { font-size: 24px; line-height: 1.25; }
.homepage-content .markdown hr { border-color: rgba(210, 180, 124, 0.35); }

/* Spørgsmål og svar: harmonika-paneler som filtrene, spørgsmål i Montserrat */
.panel-group .panel {
  border-radius: 7px;
  border-color: var(--dw-gold);
}
.panel-default > .panel-heading .panel-title,
.panel-default > .panel-heading .accordion_title_span {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dw-ivory);
}
.panel-default > .panel-heading .caret { color: var(--dw-gold); }
.homepage-content .panel-body,
.homepage-content .panel-body a {
  color: var(--dw-ivory);
}
.homepage-content .panel-body {
  background-color: var(--dw-bg-box);
  border-top: 1px solid rgba(210, 180, 124, 0.4);
}
.homepage-content .panel-body a { color: var(--dw-gold); text-decoration: underline; }

/* Søgefeltet på hjælp-siden */
.homepage-content .help_search input {
  background-color: var(--dw-ivory);
  color: var(--dw-text-on-light);
  border: 1px solid var(--dw-gold);
  border-radius: 7px;
}
.homepage-content .help_search input:focus {
  border-color: var(--dw-gold-light);
  box-shadow: 0 0 0 2px rgba(210, 180, 124, 0.25);
}
.homepage-content .help_search_clear:hover,
.homepage-content .help_search_clear:focus {
  background-color: rgba(210, 180, 124, 0.3);
}
.help_search_empty {
  border-color: var(--dw-gold);
  color: var(--dw-ivory);
}

/* ---------- Modalen: bekræft-trinnet, ingen ledige tider, kø-knap ---------- */

#myModal .dw-summary-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--dw-ivory);
}
#myModal .dw-summary-value {
  color: var(--dw-ivory);
  font-weight: 500;
}
#myModal .dw-summary-label {
  color: var(--dw-gold);
}
#myModal :is(.modal-content, .dw-as-sheet) a.dw-confirm,
#myModal :is(.modal-content, .dw-as-sheet) a.dw-confirm:visited {
  background: linear-gradient(105deg, var(--dw-gold-dark) 0%, var(--dw-gold) 28%, var(--dw-gold-light) 50%, var(--dw-gold) 72%, var(--dw-gold-dark) 100%);
  background-size: 220% 100%;
  background-position: 100% 0;
  animation: dw-sheen 2.4s ease-in-out 0.3s 1 both;
  color: var(--dw-bg);
  border-radius: 7px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  font-weight: 500;
}
#myModal :is(.modal-content, .dw-as-sheet) a.dw-confirm:hover {
  animation: dw-sheen 2.4s ease-in-out 0.3s 1 both, dw-sheen-hover 1.4s ease-in-out 1 both;
  color: var(--dw-bg);
}
#myModal .dw-change { font-weight: 500; }
#myModal :is(.modal-content, .dw-as-sheet) a.dw-change-link,
#myModal :is(.modal-content, .dw-as-sheet) a.dw-change-link:visited {
  color: var(--dw-gold);
}
#myModal .dw-none {
  background: rgba(210, 180, 124, 0.12);
  border: 1px solid var(--dw-gold);
  color: var(--dw-ivory);
  border-radius: 7px;
}
#myModal .modal-footer { border-top: 0; }
#myModal .modal-body small { color: rgba(245, 244, 240, 0.65); }

/* Footer: Facebook-ikon i guld */
.footer .dw-footer-fb { display: inline-block; line-height: 0; }
.footer .dw-footer-fb svg { display: inline-block; }
.footer a { text-decoration: underline; }

/* Modalens tæller (122/201) og kortenes hover */
#myModal .res_index_text { color: rgba(245, 244, 240, 0.7); font-size: 13px; }
.restaurant-item { transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.restaurant-item:hover { border-color: var(--dw-gold-light); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); }
#myModal .dw-chip small { color: inherit; opacity: 0.85; }

/* Filterpaneler: én ramme på panelet, ingen ekstra ramme på overskriften */
.panel-group .panel,
.panel.panel-default {
  border: 1px solid var(--dw-gold) !important;
  border-radius: 7px !important;
  box-shadow: none;
  overflow: hidden;
}
.panel-default > .panel-heading {
  border: 0 !important;
  border-radius: 0 !important;
}
.panel-default > .panel-body,
.panel-default > .panel-collapse > .panel-body {
  border-top: 1px solid rgba(210, 180, 124, 0.4);
}

/* Filterkolonnen flugter med logoet i navbaren (kolonnen sad 5 px for langt til højre) */
@media (min-width: 1200px) {
  /* Wrapperen har overflow hidden, så kolonnen rykkes som helhed i stedet for via padding */
  .flex-sidebar .sidebar-sticky-wrapper { margin-left: -5px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  /* Her er containeren fuld bredde, og kolonnen lå helt ude i kanten, til venstre for logoet */
  .flex-sidebar .sidebar-sticky-wrapper { margin-left: 12px; }
}

/* Fluebenet i filter-tælleren sættes med inline guldfarve af JS; på det gule badge skal det være mørkt */
.filter-count .glyphicon { color: var(--dw-bg) !important; }

/* ---------- Modalen: elegant indlæsning og indgang ---------- */

#myModal .modal-content { position: relative; }
/* Spøgelset: kopi af den forrige restaurant, der glider ud mens det nye kort glider ind */
#myModal .modal-dialog { position: relative; clip-path: inset(0); }
#myModal .modal-dialog.dw-ghost-inner::after { display: none; }
#myModal .modal-dialog .dw-ghost {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
  background: transparent; /* den nye krop glider ind under boksen og skal kunne ses */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: none;
  min-height: 0;
  will-change: transform;
  transition: none;
}
/* Sitets eget script fader .modal-body ud under indlæsning; det må ikke ramme kopien */
#myModal .modal-dialog .dw-ghost .modal-body,
#myModal .modal-dialog .dw-ghost .modal-footer,
#myModal .modal-dialog .dw-ghost .modal-header .btn { opacity: 1 !important; }
/* Udglidningen som animation (ikke transition), så den også kører selv om klassen sættes i samme frame */
@keyframes dw-ghost-out-next { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes dw-ghost-out-prev { from { transform: translateX(0); } to { transform: translateX(100%); } }
/* Selve boksen staar stille (overflow hidden klipper); det er indholdet inde i shadow root'en, der glider.
   Reglen rammer wrapperen #myModal.dw-ghost-slide inde i kopien, fordi stylesheetet klones derind. */
#myModal.dw-ghost-slide.dw-swoosh-next { animation: dw-ghost-out-next 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
#myModal.dw-ghost-slide.dw-swoosh-prev { animation: dw-ghost-out-prev 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
/* Forsidens "Henter restaurant..."-pladsholder */
#myModal .modal-content > div > h3 { color: rgba(245, 244, 240, 0.6); font-size: 18px; }
@keyframes dw-modal-in { from { opacity: 0; } to { opacity: 1; } }
#myModal .modal-content.dw-loaded > .modal-header,
#myModal .modal-content.dw-loaded > .modal-body,
#myModal .modal-content.dw-loaded > .modal-footer { animation: dw-modal-in 0.45s ease-in-out both; }
/* Sektionerne inde i modalen glider ind som paa forsiden (klasserne saettes af scriptet i _template.php) */
html.dw-js #myModal .modal-body .dw-reveal { transition-delay: 0.05s; }
/* Menukortet falder på plads lige efter vælgeren */
/* Vælgeren står fuldt synlig fra start; menukort, billeder og beskrivelse glider ind lige efter */
html.dw-js #myModal .modal-body div.menuBox.dw-reveal { transition-delay: 0.25s; transition-duration: 1s, 1.1s; }
html.dw-js #myModal .modal-body div.menuBox.dw-reveal ~ div.menuBox.dw-reveal { transition-delay: 0.45s; }
html.dw-js #myModal .modal-body #restaurant_images_div.dw-reveal { transition-delay: 0.55s; }
html.dw-js #myModal .modal-body .modal-about.dw-reveal { transition-delay: 0.65s; }
/* Cycle2-slideshowet: ingen egen transition på billederne (cycle styrer opacity), og fast ramme om containeren */
#myModal .modal-body .restaurant_images img { transition: none; }
#myModal .modal-body .restaurant_images { border: 0; border-radius: 0; overflow: hidden; background: var(--dw-bg-box); }
#myModal .modal-body .restaurant_images img { border: 0; border-radius: 0; }

/* ---------- Afkrydsningsfelter og radioknapper i filtrene: guld i stedet for systemblå ---------- */

.panel-body input[type="checkbox"],
.panel-body input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1px solid var(--dw-gold);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.panel-body input[type="radio"] { border-radius: 50%; }
.panel-body input[type="checkbox"]:hover,
.panel-body input[type="radio"]:hover {
  background: rgba(210, 180, 124, 0.18);
}
.panel-body input[type="checkbox"]:checked,
.panel-body input[type="radio"]:checked {
  background-color: var(--dw-gold);
  border-color: var(--dw-gold);
}
.panel-body input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid var(--dw-bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.panel-body input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dw-bg);
}
.panel-body input[type="checkbox"]:focus-visible,
.panel-body input[type="radio"]:focus-visible {
  outline: 2px solid rgba(210, 180, 124, 0.5);
  outline-offset: 2px;
}
/* Bootstraps .checkbox/.radio placerer feltet absolut med margin-left -20px; giv teksten lidt mere luft */
.panel-body .checkbox label,
.panel-body .radio label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-left: 0;
  line-height: 20px;
  min-height: 20px;
}
.panel-body .checkbox input[type="checkbox"],
.panel-body .radio input[type="radio"] {
  position: relative;
  left: auto;
  top: auto;
  flex-shrink: 0;
  margin: 0;
}
/* Knapperne i headeren ændrer ikke udseende, mens der hentes; de er blot spærret for dobbeltklik */
#myModal .modal-header .btn.disabled,
#myModal .modal-header .btn[disabled] { opacity: 1; cursor: default; }
#myModal .modal-header .btn.disabled:hover,
#myModal .modal-header .btn[disabled]:hover { background: transparent; }
/* Ingen ring efter museklik; guldringen vises kun ved tastaturfokus (:focus-visible ovenfor) */
.panel-body input[type="checkbox"]:focus,
.panel-body input[type="radio"]:focus {
  outline: none;
  box-shadow: none;
}
.panel-body input[type="checkbox"]:focus:not(:focus-visible),
.panel-body input[type="radio"]:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- Modalen: mindre luft i toppen ---------- */
@media (min-width: 768px) {
  #myModal .modal-header { padding: 10px 15px 8px; }
  #myModal .modal-header .btn.btn-xs.btn-primary { margin-top: 0; margin-bottom: 0; vertical-align: top; }
  #myModal .modal-header .text-center { margin-top: 6px; }
  #myModal .modal-title { line-height: 1.15; }
  #myModal .modal-body { padding-top: 8px; }
}
/* Adresse og metro: mindre linjeafstand, mindre metro-logo */
#myModal .modal-body > .text-center:first-child { line-height: 1.45; padding-bottom: 4px; }
#myModal .modal-body > .text-center:first-child span[style*="top:11px"],
#myModal .modal-body > .text-center:first-child span[style*="top: 11px"] { top: 6px !important; }
#myModal .modal-body > .text-center:first-child span[style*="top:11px"] svg,
#myModal .modal-body > .text-center:first-child span[style*="top: 11px"] svg { width: 24px; height: 24px; }
#myModal .modal-body > .text-center:first-child span[style*="top:6px"],
#myModal .modal-body > .text-center:first-child span[style*="top: 6px"] { top: 4px !important; }
#myModal .modal-body > .text-center:first-child span[style*="top:6px"] svg,
#myModal .modal-body > .text-center:first-child span[style*="top: 6px"] svg { width: 20px; height: 20px; }

/* Billedslideshowet fylder rammen præcist: containeren følger 3:2, som alle restaurantfotos er (1200x800) */
#myModal .modal-body .restaurant_images {
  height: auto !important;
  aspect-ratio: 3 / 2;
}
#myModal .modal-body .restaurant_images img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Menukortet: dobbelt guldramme, så den også ses mod den lyse boks (som på menukortet i nyhedsbrevene) */
#myModal div.menuBox {
  border: 1px solid var(--dw-gold-dark);
  outline: 1px solid var(--dw-gold);
  outline-offset: 4px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
}

/* Vælgeren toner blot ind, uden at glide op */
html.dw-js #myModal .modal-body .dw-chooser { opacity: 1; transform: none; transition: none; }
/* Luft mellem vælgeren og det første menukort, som mellem menukortene indbyrdes (28 px) */
#myModal .dw-chooser { margin-bottom: 28px !important; }
#myModal div.menuBox { margin-top: 5px; }

/* ---------- Kort-glid mellem restauranter (forrige/næste) ---------- */
@keyframes dw-swoosh-in-next { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes dw-swoosh-in-prev { from { transform: translateX(-100%); } to { transform: translateX(0); } }
/* Rammen står stille; det er indholdet (header, krop, footer), der glider ind når det er hentet */
#myModal .modal-content { clip-path: inset(0 round 9.1px); }
#myModal .modal-content.dw-loaded.dw-swoosh-next > .modal-body,
#myModal .modal-content.dw-loaded.dw-swoosh-next > .modal-footer { animation: dw-swoosh-in-next 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
#myModal .modal-content.dw-loaded.dw-swoosh-prev > .modal-body,
#myModal .modal-content.dw-loaded.dw-swoosh-prev > .modal-footer { animation: dw-swoosh-in-prev 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
/* Headeren og stregen under den står helt stille ved skift; kun navn, hjerte og tæller skifter */
#myModal .modal-content.dw-loaded.dw-swoosh-next > .modal-header,
#myModal .modal-content.dw-loaded.dw-swoosh-prev > .modal-header { animation: none; }
/* Det tomme kort: indholdet er skjult, indtil den nye restaurant er hentet */
/* Under hentning toner det gamle kort ud paa stedet (inline opacity fra leaveCard); ingen visibility-skift */
#myModal .modal-content.dw-pending > .modal-body,
#myModal .modal-content.dw-pending > .modal-footer { pointer-events: none; }
/* Ved skift toner det nye indhold ind som ét stykke, ingen trinvis indgang */
html.dw-js #myModal .modal-content.dw-swoosh-next .dw-reveal,
html.dw-js #myModal .modal-content.dw-swoosh-prev .dw-reveal { transition: none; opacity: 1; transform: none; }

/* Rammen tegnes som et lag oven på indholdet, så den bliver stående når indholdet glider ind og ud */
#myModal .modal-content { border-color: transparent; }
#myModal .modal-dialog::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--dw-gold);
  border-radius: 9.1px;
  pointer-events: none;
  z-index: 10002;
}

/* Restaurantkort: større navn og by, lidt mørkere bund så teksten står klart */
.restaurant-details {
  font-size: 15px;
  line-height: 1.35;
  padding: 9px 6px 10px;
  background-color: rgba(44, 50, 59, 0.8);
}
.restaurant-details span {
  font-size: 1.35em;
  letter-spacing: 0.01em;
}
@media (max-width: 767px) {
  .restaurant-details { font-size: 14px; }
  .restaurant-details span { font-size: 1.3em; }
}

/* Headeren bærer selv rammens overkant, så den ses når headeren hænger fast i toppen ved scroll */
#myModal .modal-content { border-width: 0; }
#myModal .modal-header {
  border-top: 1px solid var(--dw-gold);
  border-radius: 9.1px 9.1px 0 0;
  background-clip: padding-box;
}
/* Sidekanterne følger med headeren, så hjørnerne er hele når den hænger fast */
#myModal .modal-header {
  border-left: 1px solid var(--dw-gold);
  border-right: 1px solid var(--dw-gold);
}

/* Headeren står fast præcis der, hvor modalen starter (dialogens topmargen), og flytter sig aldrig */
#myModal .modal-header { position: -webkit-sticky; position: sticky; top: var(--dw-header-top, 10px) !important; }

/* Restaurantnavnet i headeren glider ud og ind sammen med kroppen */
#myModal .modal-header .text-center { overflow: hidden; }
@keyframes dw-title-out-next { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes dw-title-out-prev { from { transform: translateX(0); } to { transform: translateX(100%); } }
#myModal .modal-header .text-center.dw-title-out.dw-swoosh-next > .modal-title { animation: dw-title-out-next 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
#myModal .modal-header .text-center.dw-title-out.dw-swoosh-prev > .modal-title { animation: dw-title-out-prev 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
#myModal .modal-content.dw-loaded.dw-swoosh-next > .modal-header .text-center > .modal-title { animation: dw-swoosh-in-next 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
#myModal .modal-content.dw-loaded.dw-swoosh-prev > .modal-header .text-center > .modal-title { animation: dw-swoosh-in-prev 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) both; }

/* Åbning fra et kort: alt gammelt indhold (og pladsholderen "...") er skjult, indtil den nye restaurant er hentet */
#myModal .modal-content.dw-opening > * { visibility: hidden; }

/* Intet må scrolle synligt over modalens header: et sticky, mørkt felt i modalens bredde dækker
   striben mellem vinduets top og headeren (farven svarer til siden bag backdroppen).
   Feltet fortsætter ned i headerens to øverste hjørner: uden for headerens runding ville
   rammens lige sidelinjer (og dialogens baggrund) ellers stikke op som små pinde, når man scroller. */
#myModal.in::before {
  --dw-strip: 10px;
  --dw-r: 9.1px;
  content: "";
  display: block;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10004; /* over rammen (10002) og titel-kopien (10003) */
  height: calc(var(--dw-strip) + var(--dw-r));
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  pointer-events: none;
  background:
    linear-gradient(#161a1c, #161a1c) 0 0 / 100% var(--dw-strip) no-repeat,
    radial-gradient(circle at var(--dw-r) var(--dw-r), transparent calc(var(--dw-r) - 0.3px), #161a1c calc(var(--dw-r) + 0.7px)) left 0 top var(--dw-strip) / var(--dw-r) var(--dw-r) no-repeat,
    radial-gradient(circle at 0 var(--dw-r), transparent calc(var(--dw-r) - 0.3px), #161a1c calc(var(--dw-r) + 0.7px)) right 0 top var(--dw-strip) / var(--dw-r) var(--dw-r) no-repeat;
}
/* Headeren skal ligge under dækfeltet, men dens bund skal hænge præcis ved feltets bånd: derfor er
   det kun båndet (--dw-strip), der skubber dialogen ned, ikke hjørnedelen */
#myModal.in > .modal-dialog { margin-top: calc(-1 * var(--dw-r, 9.1px)) !important; }
@media (max-width: 767px) {
  #myModal.in::before { --dw-strip: 8px; }
}

/* Kopien må aldrig lægge sig over den fastlåste header: baggrunden flyttes til dialogen,
   og modal-content (med headeren) lægges over kopien med gennemsigtig baggrund */
#myModal.in > .modal-dialog { background: var(--dw-bg); border-radius: 9.1px; }
#myModal.in > .modal-dialog > .modal-content { background: transparent; position: relative; z-index: 40; }
#myModal .modal-dialog .dw-ghost { z-index: 30; }

/* Kopi af restaurantnavnet, der glider ud sammen med kroppen (ligger præcis over headerens titel) */
#myModal .modal-dialog .dw-title-ghost {
  position: absolute;
  left: 0; right: 0;
  z-index: 10003;
  overflow: hidden;
  pointer-events: none;
  text-align: center;
}
#myModal .modal-dialog .dw-title-ghost > .modal-title { margin: 0; }
#myModal .modal-dialog .dw-title-ghost.dw-title-out.dw-swoosh-next > .modal-title { animation: dw-title-out-next 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
#myModal .modal-dialog .dw-title-ghost.dw-title-out.dw-swoosh-prev > .modal-title { animation: dw-title-out-prev 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) both; }


/* ======================================================================
   Mobil (2026-09-11): lavere navbar, modalen som fuldskærmsark med kompakt
   header og købsbjælke, filtrene som bund-ark, større søgefelt
   ====================================================================== */

/* Købsbjælken og filter-arket findes kun på mobil */
@media (min-width: 768px) {
  .dw-filter-btn, .dw-sheet-head, .dw-sheet-foot { display: none !important; }
}
#myModal:not(.in) .dw-buybar { display: none; }

@media (max-width: 767px) {

  /* --- 32: navbar 60 px --- */
  .bslab-navbar { height: 60px; }
  .bslab-navbar .bslab-navbar-content { line-height: 60px; }
  .dw-logo { height: 60px; gap: 3px; }
  .dw-logo-name { font-size: 17px; }
  .dw-logo-dates { font-size: 11px; }
  .bslab-navbar .bslab-navbar-more { margin-top: 8px; padding-top: 10px !important; }
  .homepage-content { top: 62px !important; }
  .bslab-navigation-content { margin-top: 60px !important; }
  /* Opsummeringen hænger lige under navbaren uden sprække (restaurants.php's egen style siger top 70 og kommer senere) */
  .sticky-filter-summary { top: 60px !important; padding-top: 8px; margin-top: -8px; }

  /* --- 1 + 2: modal-header: mindre titel, og én linje når headeren hænger fast --- */
  #myModal .modal-header { padding: 8px 8px 6px; }
  #myModal .modal-header .text-center { margin-top: 4px; }
  #myModal .modal-title {
    font-size: 20px;
    line-height: 1.2;
    padding: 0 6px;
  }
  /* Navnet bliver staaende i samme stoerrelse, ogsaa naar der scrolles */
  #myModal .modal-header .text-center { overflow: hidden; }

  /* --- 3: modalen fylder hele skærmen: intet dækfelt, ingen hjørner, ingen ramme --- */
  #myModal.in::before { display: none; }
  #myModal.in > .modal-dialog {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    min-height: 100%;
    border-radius: 0;
  }
  #myModal .modal-dialog::after { display: none; }
  #myModal .modal-header { top: 0 !important; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
  #myModal .modal-content { clip-path: none; border-radius: 0; }
  #myModal .modal-body { padding-left: 10px; padding-right: 10px; }
  #myModal div.menuBox { margin-left: 0; margin-right: 0; }

  /* --- 4: købsbjælke i bunden af modalen --- */
  .dw-buybar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10006;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(44, 50, 59, 0.96);
    border-top: 1px solid var(--dw-gold);
    transition: opacity 0.18s ease;
  }
  .dw-buybar.dw-buybar-hidden { opacity: 0; pointer-events: none; }
  .dw-buybar-btn,
  .dw-buybar-btn:visited,
  .dw-buybar-btn:hover,
  .dw-buybar-btn:focus,
  .dw-sheet-show {
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.25;
    color: var(--dw-bg) !important;
    text-decoration: none !important;
    padding: 11px 14px;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(105deg, var(--dw-gold-dark) 0%, var(--dw-gold) 28%, var(--dw-gold-light) 50%, var(--dw-gold) 72%, var(--dw-gold-dark) 100%);
    background-size: 220% 100%;
    background-position: 100% 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  }
  .dw-buybar-btn small { display: block; font-weight: 400; font-size: 13px; opacity: 0.85; margin-top: 1px; }
  #myModal.dw-has-buybar .modal-footer { padding-bottom: 96px; }

  /* --- 23: filtrene som bund-ark --- */
  .dw-page-restaurants .flex-sidebar,
  .dw-page-restaurant .flex-sidebar { display: none; }
  body.dw-filters-open .flex-sidebar {
    display: block;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1200;
    background: var(--dw-bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-width: none;
    flex: none;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.dw-filters-open { overflow: hidden; }
  /* Navbaren (z 101) ligger over arket, fordi .homepage-content er sin egen stacking-kontekst med z 1 */
  body.dw-filters-open .bslab-navbar { visibility: hidden; }
  body.dw-filters-open .flex-sidebar .row { margin-left: 0; margin-right: 0; }
  body.dw-filters-open .sidebar-sticky-wrapper { padding: 0 12px 100px !important; }
  body.dw-filters-open .filter-left-col,
  body.dw-filters-open .filter-right-col { width: 100%; float: none; padding-left: 0; padding-right: 0; }
  .dw-sheet-head {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 8px;
    margin-bottom: 10px;
    background: var(--dw-bg);
    border-bottom: 1px solid rgba(210, 180, 124, 0.35);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    color: var(--dw-ivory);
  }
  .dw-sheet-close {
    width: 44px; height: 44px;
    border: 0; padding: 0;
    background: transparent;
    color: var(--dw-gold);
    font-size: 34px;
    line-height: 44px;
  }
  .dw-sheet-foot {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1201;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(44, 50, 59, 0.96);
    border-top: 1px solid var(--dw-gold);
  }
  /* Søgefeltet og Filtre-knappen på én linje (knappen ligger uden for .form-group, så ikonerne bliver i feltet) */
  .sticky-filter-search { display: flex; align-items: flex-start; gap: 8px; }
  .sticky-filter-search .form-group { flex: 1 1 auto; min-width: 0; }
  .dw-filter-btn {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--dw-gold);
    border-radius: 4px;
    background: transparent;
    color: var(--dw-ivory);
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
  }
  .dw-filter-btn .dw-filter-cnt {
    display: inline-block;
    min-width: 20px;
    height: 20px;
    margin-left: 6px;
    border-radius: 10px;
    background: var(--dw-gold);
    color: var(--dw-bg);
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    font-weight: 700;
  }
  .dw-filter-btn .dw-filter-cnt:empty { display: none; }
  #goToFiltersSpan { display: none !important; }

  /* --- 30: søgefeltet 44 px højt --- */
  .sticky-filter-search input.search-input { height: 44px; -webkit-appearance: none; appearance: none; }
  .sticky-filter-search input.search-input::-webkit-search-cancel-button,
  .sticky-filter-search input.search-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
  .sticky-filter-search .clear-icon { left: auto; right: 12px; }
}

/* ---------- Mobil, runde to (11-09-2026): menutekst, kort, chips, tap ---------- */

/* 8: ingen grå tap-highlight; egen aktiv-tilstand i guld */
a, button, .dw-chip, .grid-item, .panel-heading, .filterRemove { -webkit-tap-highlight-color: transparent; }
.dw-chip:active { background: rgba(210, 180, 124, 0.28) !important; }
.grid-item .restaurant-item { transition: transform 0.12s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.grid-item:active .restaurant-item { transform: scale(0.985); }
.dw-filter-btn:active, .filterRemove:active, .dw-sheet-close:active { background: rgba(210, 180, 124, 0.18) !important; }
#myModal .modal-header .btn:active, .dw-change-link:active { background: rgba(210, 180, 124, 0.25) !important; }

@media (max-width: 767px) {

  /* 1: menukortet: 15 px, tættere linjer, luft før overskrifterne, pris og gebyr på én linje */
  #myModal div.menuBox { font-size: 15px; line-height: 1.4; }
  #myModal div.menuBox p { font-size: 15px; line-height: 1.4; margin: 0 0 5px; }
  #myModal div.menuBox p.dw-course { margin-top: 16px; margin-bottom: 6px; letter-spacing: 0.04em; }
  #myModal div.menuBox p.dw-sep { margin: 4px 0 2px; opacity: 0.6; line-height: 1; }
  #myModal div.menuBox > h3 { margin-bottom: 8px; }
  /* Gebyret staar paa sin egen linje under prisen; kun den ene tomme linje efter det droppes */
  #myModal div.menuBox > h3 ~ br:nth-of-type(3) { display: none; }
  #myModal div.menuBox > h3 ~ span > strong { font-size: 17px; }

  /* 2: kortene: navn 14 px, by 12 px, menutype og pris som tekstlinje */
  .restaurant-details .visible-xs { font-size: 14px !important; line-height: 1.25; }
  .restaurant-details .visible-xs-inline-block { font-size: 12px !important; }
  .restaurant-details .dw-card-menu {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: var(--dw-gold);
    letter-spacing: 0.02em;
    margin-top: 3px;
  }
  .restaurant-details .dw-card-menu span { font-family: inherit; font-size: inherit !important; font-weight: inherit !important; }

  /* 4: valgte filtre som chips under søgefeltet; topteksten skjules */
  #restaurantsTopText { display: none; }
  .sticky-filter-search { flex-wrap: wrap; }
  .sticky-filter-search #filterRemoves { flex: 0 0 100%; }
  .sticky-filter-search #filterRemoves:empty { display: none; }
  .sticky-filter-search #filterRemoves .filterRemove { margin: 0 6px 6px 0; min-height: 32px; font-size: 13px; }

  /* 6: dato-chips 12 px, headerknapper 44 px */
  #myModal .dw-date-chip small { font-size: 12px; }
  #myModal .modal-header .btn.btn-xs.btn-primary {
    min-height: 44px;
    min-width: 44px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
  }

  /* 7: "Ændr mit valg" som sekundær knap i fuld bredde */
  #myModal .dw-change { margin-top: 10px; }
  #myModal :is(.modal-content, .dw-as-sheet) a.dw-change-link,
  #myModal :is(.modal-content, .dw-as-sheet) a.dw-change-link:visited {
    display: block;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--dw-gold);
    border-radius: 7px;
    color: var(--dw-gold);
    text-decoration: none;
    font-weight: 500;
    text-align: center;
  }
}

/* ---------- Mobil: teksten under billedet på restaurantkortene (11-09-2026) ----------
   Sitets script sætter kortets højde til bredde*2/3 inline; her får kortet højde efter indholdet:
   billedet i 3:2 og en fast tekstblok på 78 px nedenunder, så rækkerne stadig flugter i Shuffle. */
@media (max-width: 767px) {
  .dw-page-restaurants .grid-item,
  .dw-page-restaurant .grid-item { height: auto !important; }
  .grid-item .restaurant-item { height: auto; display: flex; flex-direction: column; }
  .grid-item .restaurant-image-container { position: relative; height: auto; aspect-ratio: 3 / 2; flex: 0 0 auto; }
  .grid-item .restaurant-image { border-radius: 0; }
  .grid-item .restaurant-details {
    position: static;
    height: 78px;
    flex: 0 0 78px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px 6px 6px;
    background: var(--dw-bg-box);
    border-top: 1px solid rgba(210, 180, 124, 0.35);
    border-radius: 0;
    overflow: hidden;
  }
  .grid-item .restaurant-details br { display: none; }
  .restaurant-details .visible-xs:not(.dw-card-menu) {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
  }
  .restaurant-details .visible-xs-inline-block { line-height: 1.3; }
  .restaurant-details .dw-card-menu { margin-top: 2px; }
}

/* ---------- Mobil: menuen først, vælgeren som ark nedefra (11-09-2026) ---------- */
@media (max-width: 767px) {
  #myModal > .dw-chooser.dw-as-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10008;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 !important;
    border: 0;
    border-top: 1px solid var(--dw-gold);
    border-radius: 14px 14px 0 0;
    background: var(--dw-bg);
    padding: 0 14px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
  }
  #myModal.dw-sheet-open > .dw-chooser.dw-as-sheet { opacity: 1; visibility: visible; transition: opacity 0.18s ease, visibility 0s; }
  .dw-sheet-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 6px;
    margin-bottom: 8px;
    background: var(--dw-bg);
    border-bottom: 1px solid rgba(210, 180, 124, 0.35);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 20px;
    color: var(--dw-ivory);
  }
  .dw-sheet-backdrop {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 10007;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }
  #myModal.dw-sheet-open > .dw-sheet-backdrop { opacity: 1; pointer-events: auto; }
  #myModal.dw-sheet-open .dw-buybar { opacity: 0; pointer-events: none; }

  /* Naar en tid er valgt: "Ændr" ved siden af købsknappen åbner arket igen */
  .dw-buybar { display: flex; align-items: stretch; gap: 8px; }
  .dw-buybar .dw-buybar-btn { flex: 1 1 auto; min-width: 0; }
  .dw-buybar .dw-buybar-change {
    display: none;
    flex: 0 0 auto;
    padding: 0 14px;
    border: 1px solid var(--dw-gold);
    border-radius: 7px;
    background: transparent;
    color: var(--dw-gold);
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
  }
  .dw-buybar.dw-buybar-has-change .dw-buybar-change { display: block; }
}

/* ---------- Skift mellem restauranter toner over i stedet for at glide (11-09-2026, alle skærme) ---------- */
@media all {
  @keyframes dw-fade-out { from { opacity: 1; } to { opacity: 0; } }
  @keyframes dw-fade-in { from { opacity: 0; } to { opacity: 1; } }
  /* Fade med retning: det gamle toner ud 24 px i swipe-retningen, det nye toner ind fra den modsatte side */
  @keyframes dw-fade-out-next { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-24px); } }
  @keyframes dw-fade-out-prev { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(24px); } }
  @keyframes dw-fade-in-next { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes dw-fade-in-prev { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
  /* Kopien af det gamle kort (inde i shadow root'en; stilarket klones derind) */
  #myModal.dw-ghost-slide.dw-swoosh-next { animation: dw-fade-out-next 0.15s ease-out both; }
  #myModal.dw-ghost-slide.dw-swoosh-prev { animation: dw-fade-out-prev 0.15s ease-out both; }
  /* Det nye kort: kort indtoning (180 ms) uden forskydning */
  @keyframes dw-enter-next { from { opacity: 0; } to { opacity: 1; } }
  @keyframes dw-enter-prev { from { opacity: 0; } to { opacity: 1; } }
  #myModal .modal-content.dw-loaded.dw-swoosh-next > .modal-body,
  #myModal .modal-content.dw-loaded.dw-swoosh-next > .modal-footer { animation: dw-enter-next 0.18s ease-out both; }
  #myModal .modal-content.dw-loaded.dw-swoosh-prev > .modal-body,
  #myModal .modal-content.dw-loaded.dw-swoosh-prev > .modal-footer { animation: dw-enter-prev 0.18s ease-out both; }
  /* Mens fingeren traekker: indtoningens animation (fill both) slippes, saa den inline transform virker; headeren roerer sig ikke */
  #myModal .modal-content.dw-dragging > .modal-body,
  #myModal .modal-content.dw-dragging > .modal-footer { animation: none !important; will-change: transform; }
  /* Restaurantnavnet */
  #myModal .modal-header .text-center.dw-title-out.dw-swoosh-next > .modal-title,
  #myModal .modal-header .text-center.dw-title-out.dw-swoosh-prev > .modal-title,
  #myModal .modal-dialog .dw-title-ghost.dw-title-out.dw-swoosh-next > .modal-title,
  #myModal .modal-dialog .dw-title-ghost.dw-title-out.dw-swoosh-prev > .modal-title { animation: dw-fade-out 0.15s ease-out both; }
  #myModal .modal-content.dw-loaded.dw-swoosh-next > .modal-header .text-center > .modal-title,
  #myModal .modal-content.dw-loaded.dw-swoosh-prev > .modal-header .text-center > .modal-title { animation: dw-fade-in 0.18s ease-out both; }
}

/* ---------- Desktop: vælgeren skjult som standard, knap under adressen åbner den som panel (11-09-2026) ---------- */
@media (min-width: 768px) {
  /* Knappen haenger fast lige under headeren, naar man scroller forbi den (baggrund daekker menuen bagved) */
  #myModal .modal-body > .dw-buybar {
    position: -webkit-sticky;
    position: sticky;
    /* 2 px overlap med headeren, saa intet kan ses scrolle i sprækken mellem dem */
    top: calc(var(--dw-header-top, 10px) + var(--dw-header-h, 80px) - 2px);
    z-index: 20;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    margin: 0 -15px 12px;
    padding: 10px 15px 8px;
    background: var(--dw-bg);
  }
  #myModal .modal-body > .dw-buybar .dw-buybar-btn { max-width: 440px; }
  #myModal .modal-body > .dw-buybar .dw-buybar-btn,
  #myModal .modal-body > .dw-buybar .dw-buybar-btn:visited,
  #myModal .modal-body > .dw-buybar .dw-buybar-btn:hover,
  #myModal .modal-body > .dw-buybar .dw-buybar-btn:focus {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.25;
    color: var(--dw-bg) !important;
    text-decoration: none !important;
    padding: 11px 16px;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(105deg, var(--dw-gold-dark) 0%, var(--dw-gold) 28%, var(--dw-gold-light) 50%, var(--dw-gold) 72%, var(--dw-gold-dark) 100%);
    background-size: 220% 100%;
    background-position: 100% 0;
    animation: dw-sheen 2.4s ease-in-out 0.3s 1 both;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    cursor: pointer;
  }
  #myModal .modal-body > .dw-buybar .dw-buybar-btn:hover { animation: dw-sheen 2.4s ease-in-out 0.3s 1 both, dw-sheen-hover 1.4s ease-in-out 1 both; }
  #myModal .modal-body > .dw-buybar .dw-buybar-btn small { display: block; font-weight: 400; font-size: 13px; opacity: 0.85; margin-top: 1px; }
  #myModal .modal-body > .dw-buybar .dw-buybar-change {
    display: none;
    flex: 0 0 auto;
    padding: 0 16px;
    border: 1px solid var(--dw-gold);
    border-radius: 7px;
    background: transparent;
    color: var(--dw-gold);
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
  }
  #myModal .modal-body > .dw-buybar.dw-buybar-has-change .dw-buybar-change { display: block; }
  #myModal .modal-body > .dw-buybar .dw-buybar-change:hover { background: rgba(210, 180, 124, 0.18); }

  /* Panelet: samme element som mobilens ark, men centreret over modalen */
  #myModal > .dw-chooser.dw-as-sheet {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(640px, 92vw);
    max-height: 85vh;
    overflow-y: auto;
    z-index: 10008;
    margin: 0 !important;
    border: 1px solid var(--dw-gold);
    border-radius: 12px;
    background: var(--dw-bg);
    padding: 0 20px 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
  }
  #myModal.dw-sheet-open > .dw-chooser.dw-as-sheet { opacity: 1; visibility: visible; transition: opacity 0.18s ease, visibility 0s; }
  .dw-sheet-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 8px;
    margin-bottom: 10px;
    background: var(--dw-bg);
    border-bottom: 1px solid rgba(210, 180, 124, 0.35);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    color: var(--dw-ivory);
  }
  .dw-sheet-top .dw-sheet-close {
    width: 40px; height: 40px;
    border: 0; padding: 0;
    background: transparent;
    color: var(--dw-gold);
    font-size: 32px;
    line-height: 40px;
    cursor: pointer;
  }
  .dw-sheet-backdrop {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 10007;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }
  #myModal.dw-sheet-open > .dw-sheet-backdrop { opacity: 1; pointer-events: auto; }
}

/* ---------- Glansen (changering) på guldknapperne er slået fra (11-09-2026) ----------
   Gradienten står stille i midterstillingen; selve reglerne ovenfor er beholdt, så den kan slås til igen. */
.bs-button.is-primary, .btn-primary,
.modal-content .btn.btn-primary, .modal-content .btn.btn-lg.btn-primary.btn-block, .modal-content .btn.btn-xs.btn-primary,
.bs-button.is-primary:hover, .btn-primary:hover, .modal-content .btn.btn-primary:hover,
#myModal :is(.modal-content, .dw-as-sheet) a.dw-confirm, #myModal :is(.modal-content, .dw-as-sheet) a.dw-confirm:hover,
#myModal .modal-body > .dw-buybar .dw-buybar-btn, #myModal .modal-body > .dw-buybar .dw-buybar-btn:hover,
.dw-buybar-btn, .dw-sheet-show {
  animation: none !important;
  background-position: 50% 0 !important;
  /* Dæmpet gradient: fra mørk guld over guld til et svagt lysere midtpunkt (#dcc48f i stedet for #efdcb0) */
  background-image: linear-gradient(105deg, var(--dw-gold-dark) 0%, var(--dw-gold) 35%, #d7bb85 50%, var(--dw-gold) 65%, var(--dw-gold-dark) 100%) !important;
  background-size: 100% 100% !important;
  background-color: var(--dw-gold) !important;
}
.bs-button.is-primary:hover, .btn-primary:hover, .modal-content .btn.btn-primary:hover,
#myModal :is(.modal-content, .dw-as-sheet) a.dw-confirm:hover,
#myModal .modal-body > .dw-buybar .dw-buybar-btn:hover,
.dw-buybar-btn:hover, .dw-sheet-show:hover {
  background-image: linear-gradient(105deg, #a8875a 0%, var(--dw-gold-dark) 35%, #c4a76a 50%, var(--dw-gold-dark) 65%, #a8875a 100%) !important;
}

/* Header-knapperne (hjerte, forrige, næste, luk) har fået guldfyld af reglen ovenfor: mørk tekst på guld */
#myModal .modal-header .btn.btn-xs.btn-primary,
#myModal .modal-header .btn.btn-xs.btn-primary:hover,
#myModal .modal-header .btn.btn-xs.btn-primary:focus { color: var(--dw-bg) !important; }

/* Dato/tid-linjen i købsknappen: fuld mørk, ikke nedtonet */
.dw-buybar-btn small { opacity: 1 !important; color: var(--dw-bg) !important; }

/* Arkets overskrift: restaurantens navn med menutype og pris under */
.dw-sheet-top .dw-sheet-title { display: block; min-width: 0; line-height: 1.15; padding-right: 10px; }
.dw-sheet-top .dw-sheet-title small {
  display: block;
  margin-top: 3px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--dw-gold);
}

/* Arkets overskrift følger trinnet; opsummeringens egen overskrift er overflødig i arket */
.dw-as-sheet .dw-sheet-title-confirm { display: none; }
.dw-as-sheet.dw-confirming .dw-sheet-title-choose { display: none; }
.dw-as-sheet.dw-confirming .dw-sheet-title-confirm { display: block; }
.dw-as-sheet .dw-summary-heading { display: none; }

/* Mobil: ingen guldkant over købsbjælken og arket (11-09-2026) */
@media (max-width: 767px) {
  .dw-buybar { border-top: 0; }
  #myModal > .dw-chooser.dw-as-sheet { border-top: 0; }
}

/* ---------- Mobil: CMS-siders billedrækker (Om Dining Week m.fl.), ikke forsiden (11-09-2026) ----------
   Billederne ligger i .col > .component > img, ofte blandet med tekstkomponenter i samme kolonne.
   1) Tre billedkolonner i en række: alle tre side om side, skaleret ned.
   2) Tekst + billede (col-md-6): teksten først, billedet bagefter beskåret til 16:9.
   3) To billedkolonner i en række: side om side. */
@media (max-width: 767px) {
  body:not(.dw-page-forside) .markdown .row { display: flex; flex-direction: column; }
  /* Bootstraps clearfix-pseudoelementer bliver ellers flex-items og skubber kolonnerne 16 px ind */
  body:not(.dw-page-forside) .markdown .row::before,
  body:not(.dw-page-forside) .markdown .row::after { display: none; }
  body:not(.dw-page-forside) .markdown .row > .col { display: flex; flex-direction: column; }
  /* Billedkomponenter kommer efter tekstkomponenterne i samme kolonne, og billedkolonner efter tekstkolonner */
  body:not(.dw-page-forside) .markdown .row > .col > .component:has(> img.img-responsive) { order: 2; }
  body:not(.dw-page-forside) .markdown .row > .col:not(:has(:is(h1, h2, h3, h4, p, .btn))) { order: 2; }

  /* 1: tre billedkolonner: alle tre side om side, skaleret ned til skærmbredden */
  body:not(.dw-page-forside) .markdown .row:has(> .col-md-4:nth-child(3)):not(:has(:is(h1, h2, h3, h4, p, .btn))) {
    flex-direction: row;
    gap: 8px;
    margin: 6px 0;
  }
  body:not(.dw-page-forside) .markdown .row:has(> .col-md-4:nth-child(3)):not(:has(:is(h1, h2, h3, h4, p, .btn))) > .col {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 0;
  }
  body:not(.dw-page-forside) .markdown .row:has(> .col-md-4:nth-child(3)):not(:has(:is(h1, h2, h3, h4, p, .btn))) > .col img.img-responsive {
    width: 100%;
    margin: 0 !important;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 6px;
  }

  /* 2: billederne i en col-md-6-række beskæres til 16:9 */
  body:not(.dw-page-forside) .markdown .row:has(> .col-md-6) > .col img.img-responsive {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 12px 0 !important;
    border-radius: 6px;
  }

  /* 3: to billedkolonner side om side */
  body:not(.dw-page-forside) .markdown .row:has(> .col-md-4:nth-child(2):last-child):not(:has(:is(h1, h2, h3, h4, p, .btn))) {
    flex-direction: row;
    gap: 10px;
  }
  body:not(.dw-page-forside) .markdown .row:has(> .col-md-4:nth-child(2):last-child):not(:has(:is(h1, h2, h3, h4, p, .btn))) > .col {
    flex: 1 1 0;
    width: auto;
    padding: 0;
  }
  body:not(.dw-page-forside) .markdown .row:has(> .col-md-4:nth-child(2):last-child):not(:has(:is(h1, h2, h3, h4, p, .btn))) > .col img.img-responsive {
    width: 100%;
    margin: 6px 0 !important;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 6px;
  }
}

/* Hjælp-siden: svarene i accordionen på lys baggrund med mørk tekst (11-09-2026) */
.homepage-content .panel-group .panel-body {
  background-color: var(--dw-ivory-box);
  color: var(--dw-text-on-light);
  border-top: 1px solid var(--dw-gold);
}
.homepage-content .panel-group .panel-body p,
.homepage-content .panel-group .panel-body li,
.homepage-content .panel-group .panel-body span,
.homepage-content .panel-group .panel-body div { color: var(--dw-text-on-light); }
.homepage-content .panel-group .panel-body a { color: var(--dw-gold-on-light); text-decoration: underline; }
.homepage-content .panel-group .panel-body strong,
.homepage-content .panel-group .panel-body b,
.homepage-content .panel-group .panel-body h1,
.homepage-content .panel-group .panel-body h2,
.homepage-content .panel-group .panel-body h3,
.homepage-content .panel-group .panel-body h4 { color: var(--dw-text-on-light); }

/* ---------- Kanthints til swipe: svage guldpile i modalens kanter, kun paa touch-skaerme (11-09-2026) ---------- */
.dw-edge-hint { display: none; }
@media (max-width: 767px) and (pointer: coarse) {
  #myModal.in .dw-edge-hint {
    display: block;
    position: fixed;
    top: 50%;
    width: 26px;
    height: 56px;
    margin-top: -28px;
    z-index: 10005;
    pointer-events: none;
    /* Usynlige i hvile; lyser op i takt med traekket */
    opacity: var(--dw-lit, 0);
    transition: opacity 0.15s ease;
  }
  #myModal.in .dw-edge-hint::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-top: 2px solid var(--dw-gold);
    border-right: 2px solid var(--dw-gold);
  }
  #myModal.in .dw-edge-prev { left: 2px; }
  #myModal.in .dw-edge-prev::before { left: 9px; transform: rotate(-135deg); }
  #myModal.in .dw-edge-next { right: 2px; }
  #myModal.in .dw-edge-next::before { right: 9px; transform: rotate(45deg); }
  #myModal.in .dw-edge-hint.dw-edge-off { display: none; }
  #myModal.dw-sheet-open .dw-edge-hint { opacity: 0; }
}

/* Forsiden paa mobil/tablet: luft om de tre bokse (raekkens negative margener trak dem ud til skaermkanten) */
@media (max-width: 991px) {
  .dw-page-forside .homepage-content .markdown .row + .row { margin-left: 0; margin-right: 0; }
}

/* Filter-arket paa mobil: hoejere paneloverskrifter, nemmere at ramme (11-09-2026) */
@media (max-width: 767px) {
  body.dw-filters-open .flex-sidebar .panel-default > .panel-heading {
    min-height: 46px;
    padding: 11px 12px !important;
    font-size: 16.5px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  body.dw-filters-open .flex-sidebar .panel-default { margin-bottom: 10px; }
  body.dw-filters-open .flex-sidebar .panel-body .checkbox label,
  body.dw-filters-open .flex-sidebar .panel-body .radio label { min-height: 36px; font-size: 15.5px; }
  body.dw-filters-open .flex-sidebar .panel-body input[type="checkbox"],
  body.dw-filters-open .flex-sidebar .panel-body input[type="radio"] { width: 20px; height: 20px; }
  body.dw-filters-open .flex-sidebar .panel-body input[type="checkbox"]:checked::after { left: 6px; top: 2px; width: 6px; height: 12px; }
  body.dw-filters-open .flex-sidebar .panel-body input[type="radio"]:checked::after { left: 5px; top: 5px; width: 8px; height: 8px; }
}

/* Desktop: opsummeringen (chips + antal) lige under soegefeltet, ingen spraekke (11-09-2026) */
@media (min-width: 768px) {
  .sticky-filter-summary {
    top: calc(70px + var(--dw-search-h, 40px)) !important;
    z-index: 100 !important; /* over soegefeltet (99), som ellers vinder paa DOM-orden */
    padding-top: 4px;
  }
}

/* Billederne i modalen: ingen ramme, helt ud til modalens kant (kroppens padding er 15 px, 10 px paa mobil) */
#myModal .modal-body #restaurant_images_div { margin-left: -15px; margin-right: -15px; }
@media (max-width: 767px) {
  #myModal .modal-body #restaurant_images_div { margin-left: -10px; margin-right: -10px; }
}

/* Mobil: den sticky opsummering med Filtre-knap til hoejre; tryk paa tallet ruller op til soegefeltet (11-09-2026) */
@media (max-width: 767px) {
  .sticky-filter-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
  .sticky-filter-summary > div { min-width: 0; }
  .sticky-filter-summary .dw-summary-filter { display: none; height: 36px; padding: 0 12px; font-size: 14px; margin-left: auto; }
  body.dw-search-off .sticky-filter-summary .dw-summary-filter { display: block; }
}

/* Ingen tom luft mellem salgsteksten og footerens guldstreg: linjeskiftene og polstringen omkring foden droppes */
#myModal .modal-about + br,
#myModal .modal-footer > br { display: none; }
#myModal .modal-body { padding-bottom: 0; }
#myModal .modal-footer { padding-top: 0; }
#myModal .modal-footer > div[style*="clear"] { display: none; }

/* ---------- Skelet, mens en restaurant hentes (vises efter 300 ms) ---------- */
@keyframes dw-sk-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
#myModal .dw-skeleton {
  position: absolute;
  left: 0; right: 0;
  z-index: 35;
  padding: 14px 15px 0;
  pointer-events: none;
  animation: dw-sk-pulse 1.2s ease-in-out infinite;
}
#myModal .dw-skeleton > div { background: rgba(245, 244, 240, 0.08); border-radius: 8px; margin: 0 auto 14px; }
#myModal .dw-skeleton .dw-sk-line { width: 55%; height: 16px; }
#myModal .dw-skeleton .dw-sk-btn { width: 440px; max-width: 100%; height: 44px; border-radius: 7px; }
#myModal .dw-skeleton .dw-sk-menu { width: 100%; height: 300px; border-radius: 9.1px; }
#myModal .dw-skeleton .dw-sk-img { width: calc(100% + 30px); margin-left: -15px; aspect-ratio: 3 / 2; border-radius: 0; }
@media (max-width: 767px) {
  #myModal .dw-skeleton { padding: 12px 10px 0; }
  #myModal .dw-skeleton .dw-sk-menu { height: 240px; }
  #myModal .dw-skeleton .dw-sk-img { width: calc(100% + 20px); margin-left: -10px; }
}

/* Modalen maa aldrig vise hvidt: moerk baggrund paa html/body (overscroll paa iOS viser siden bag scroll-feltet),
   paa selve modalen paa mobil (den fylder hele skaermen) og paa dialog/indhold uanset Bootstraps .in-tilstand */
html, body { background-color: var(--dw-bg); }
#myModal > .modal-dialog { background: var(--dw-bg); }
#myModal .modal-content { background-color: var(--dw-bg); }
#myModal.in > .modal-dialog > .modal-content { background: transparent; }
@media (max-width: 767px) {
  #myModal { background-color: var(--dw-bg); }
}

/* Skelet for restaurantnavnet i headeren */
#myModal .modal-header .text-center { position: relative; }
#myModal .dw-sk-title {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  height: 20px;
  margin: -10px 0 0 -23%;
  border-radius: 8px;
  background: rgba(245, 244, 240, 0.1);
  animation: dw-sk-pulse 1.2s ease-in-out infinite;
  pointer-events: none;
  visibility: visible; /* titlens wrapper er visibility:hidden under skiftet; barnet maa gerne ses */
}
@media (max-width: 767px) { #myModal .dw-sk-title { width: 62%; margin-left: -31%; height: 18px; margin-top: -9px; } }

/* Skelet ved foerste aabning: egen header med fire knapfelter og navnebjaelke */
#myModal .dw-skeleton-open { padding-top: 0; }
#myModal .dw-skeleton .dw-sk-header {
  position: relative;
  height: 82px;
  margin: 0 -15px 14px;
  border-bottom: 1px solid rgba(210, 180, 124, 0.35);
  background: transparent;
  border-radius: 0;
}
#myModal .dw-skeleton .dw-sk-header > span {
  position: absolute;
  top: 10px;
  width: 46px;
  height: 28px;
  border-radius: 6px;
  background: rgba(210, 180, 124, 0.25);
}
#myModal .dw-skeleton .dw-sk-header > span:nth-child(1) { left: 15px; }
#myModal .dw-skeleton .dw-sk-header > span:nth-child(2) { left: 50%; margin-left: -110px; width: 90px; }
#myModal .dw-skeleton .dw-sk-header > span:nth-child(3) { left: 50%; margin-left: 20px; width: 90px; }
#myModal .dw-skeleton .dw-sk-header > span:nth-child(4) { right: 15px; }
#myModal .dw-skeleton .dw-sk-title-open {
  position: absolute;
  left: 50%; top: 50px;
  width: 46%;
  height: 20px;
  margin-left: -23%;
  border-radius: 8px;
  background: rgba(245, 244, 240, 0.1);
}
@media (max-width: 767px) {
  #myModal .dw-skeleton .dw-sk-header { height: 85px; margin: 0 -10px 12px; }
  #myModal .dw-skeleton .dw-sk-header > span { top: 8px; width: 44px; height: 44px; }
  #myModal .dw-skeleton .dw-sk-header > span:nth-child(1) { left: 10px; }
  #myModal .dw-skeleton .dw-sk-header > span:nth-child(2) { margin-left: -70px; width: 44px; }
  #myModal .dw-skeleton .dw-sk-header > span:nth-child(3) { margin-left: 26px; width: 44px; }
  #myModal .dw-skeleton .dw-sk-header > span:nth-child(4) { right: 10px; }
  #myModal .dw-skeleton .dw-sk-title-open { top: 58px; width: 62%; margin-left: -31%; height: 18px; }
}

/* Salgsteksten i samme skrift som menukortet: 16,8 px / 1,6 paa desktop, 15 px / 1,4 paa mobil (inline line-height overstyres) */
#myModal .modal-about,
#myModal .modal-about p,
#myModal .modal-about div { font-size: 16.8px; line-height: 1.6 !important; }
@media (max-width: 767px) {
  #myModal .modal-about,
  #myModal .modal-about p,
  #myModal .modal-about div { font-size: 15px; line-height: 1.4 !important; }
}

/* Samme luft over og under billedet: ingen usynlig linje under billedfeltet, og salgstekstens toppadding matcher menukortets bundmargen */
#myModal .modal-body #restaurant_images_div { line-height: 0; font-size: 0; }
#myModal .modal-body #restaurant_images_div + br { display: none; }
#myModal .modal-about,
#myModal .salgstekst.colored { padding-top: 32px !important; }

/* Metrolinjernes badges (M1-M4): cirklen fylder hele viewBox'en og blev klippet i bunden ved afrunding til 20 px;
   overflow visible og en halv pixel luft i boksen */
#myModal .modal-body > .text-center svg { overflow: visible; }
#myModal .modal-body > .text-center:first-child span[style*="top:6px"] svg,
#myModal .modal-body > .text-center:first-child span[style*="top: 6px"] svg { width: 22px !important; height: 22px !important; padding: 1px; box-sizing: border-box; overflow: visible; }

/* ---------- Indlaesningsstreg: guldstreg der loeber under headeren, mens der hentes; vises med det samme (11-09-2026) ---------- */
@keyframes dw-loadbar-sweep { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@keyframes dw-loadbar-show { from { opacity: 0; } to { opacity: 1; } }
#myModal .dw-loadbar,
#myModal.dw-busy > .modal-dialog::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  z-index: 10004;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--dw-gold) 40%, var(--dw-gold-light) 50%, var(--dw-gold) 60%, transparent 100%);
  background-size: 45% 100%;
  background-repeat: no-repeat;
  opacity: 1;
  animation: dw-loadbar-sweep 1.1s ease-in-out infinite;
}
#myModal .dw-loadbar { bottom: -1px; }            /* i headerens underkant, oven paa stregen */
#myModal.dw-busy-rtl .dw-loadbar { animation-direction: reverse; } /* naeste: fra hoejre mod venstre */
#myModal.dw-busy > .modal-dialog::before { top: 0; }   /* foerste aabning: ingen header endnu */
#myModal.dw-busy:has(.modal-content .modal-header) > .modal-dialog::before { display: none; }

/* Luft mellem adresse/metrolinjer og knappen "Vaelg dato og tid" (badges sidder 4 px lavere end linjen) */
#myModal .modal-body > .text-center:first-child { padding-bottom: 12px !important; }

/* Forsidens headervideo som link: synlig fokusring til tastatur, ingen URL ved udskrift (11-09-2026) */
.dw-video-link { display: block; }
.dw-video-link:focus-visible { outline: 2px solid var(--dw-gold); outline-offset: -4px; }
@media print { .dw-video-link::after { content: none; } }