:root{
--color-primary: <?php echo THEME_PRIMARY; ?>;
--color-accent: <?php echo THEME_ACCENT; ?>;
--color-dark: <?php echo THEME_DARK; ?>;
--color-light: <?php echo THEME_LIGHT; ?>;
}


body{ background: var(--color-light); }
.brand-text{ color: var(--color-dark); }
.btn-cta{ background: var(--color-primary); border-color: var(--color-primary); color:#fff; }
.btn-cta:hover{ filter: brightness(0.95); color:#fff; }


.hero{ min-height: 58vh; background: var(--color-dark); }
.hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter: saturate(1.05) contrast(1.02); }
.hero-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,43,51,0.45) 0%, rgba(11,43,51,0.85) 100%); }


.table td, .table th{ vertical-align: middle; }
.rating{ font-variant-numeric: tabular-nums; }


.footer a:hover{ text-decoration: underline; }

/* Logotyp (HTML + inline SVG) */
.brand { text-decoration: none; }
.brand-icon { display:inline-block; }
.brand-text {
  font-weight: 800;
  letter-spacing: .1px;
  line-height: 1;
  display:inline-block;
  font-size: 1.05rem;
}
.brand-word1 { color: var(--color-dark); }
.brand-word2 { color: var(--color-primary); }

/* Liten skärm – låt texten brytas snyggt */
@media (max-width: 400px){
  .brand-text { font-size: .98rem; }
}

/* Mörk navbar-stöd (om du byter tema) */
.navbar.bg-dark .brand-word1 { color: #fff; }
.navbar.bg-dark .brand-word2 { color: var(--color-accent); }
.icon { width:20px; height:20px; vertical-align:-3px; fill: var(--color-primary); }.

/* Robust CTA-knapp som inte blir överkörd av Bootstrap-varianter */
.btn.btn-cta{
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}

.btn.btn-cta:hover,
.btn.btn-cta:focus,
.btn.btn-cta:active,
.btn.btn-cta:focus-visible{
  background-color: #0c6f6e !important; /* mörkare nyans av --color-primary */
  border-color: #0c6f6e !important;
  color: #fff !important;
}

.btn.btn-cta:disabled,
.btn.btn-cta.disabled{
  background-color: #9ccfce !important;
  border-color: #9ccfce !important;
  color: #fff !important;
  opacity: .85;
  cursor: not-allowed;
}

/* Gör .btn-cta till en riktig Bootstrap-variant via CSS-variabler */
.btn-cta{
  /* Grundfärger */
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-color: #fff;

  /* Hover/active */
  --bs-btn-hover-bg: #0c6f6e;           /* lite mörkare än --color-primary */
  --bs-btn-hover-border-color: #0c6f6e;
  --bs-btn-hover-color: #fff;

  --bs-btn-active-bg: #0b5f5e;
  --bs-btn-active-border-color: #0b5f5e;
  --bs-btn-active-color: #fff;

  /* Disabled */
  --bs-btn-disabled-bg: #9ccfce;
  --bs-btn-disabled-border-color: #9ccfce;
  --bs-btn-disabled-color: #fff;

  /* Övrigt (se till att inget “gloss” eller gradient smyger sig in) */
  background-image: none;
}

/* Extra säkerhet om något annat sätter färg direkt */
.btn.btn-cta{
  background-color: var(--bs-btn-bg) !important;
  border-color: var(--bs-btn-border-color) !important;
  color: var(--bs-btn-color) !important;
}
/* --- CTA-knapp som Bootstrap-variant via CSS-variabler --- */
.btn-cta{
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-color: #fff;

  --bs-btn-hover-bg: #0c6f6e;
  --bs-btn-hover-border-color: #0c6f6e;
  --bs-btn-hover-color: #fff;

  --bs-btn-active-bg: #0b5f5e;
  --bs-btn-active-border-color: #0b5f5e;
  --bs-btn-active-color: #fff;

  --bs-btn-disabled-bg: #9ccfce;
  --bs-btn-disabled-border-color: #9ccfce;
  --bs-btn-disabled-color: #fff;

  background-image: none;
}
.btn.btn-cta{
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
}

/* --- Mobilvänliga kort för erbjudanden --- */
.card-offer .badge{ font-weight:600; }
.card-offer img{ object-fit:contain; }

/* Hero justering på små skärmar så inget “sidleds-scroll” uppstår */
@media (max-width: 575.98px){
  .hero{ min-height: 46vh; }
  .hero-img{ object-position: center 20%; }
}

/* Tabell-visibility already handled i index.php med d-none/d-md-block */

/* 1) Sätt grundfärg – om den saknades tidigare */
:root{
  --color-primary: #0E7C7B; /* samma som theme-color */
}

/* 2) Gör .btn-cta till en riktig Bootstrap-variant + hårda fallbacks */
.btn-cta{
  /* Bootstrap-variabler för alla states */
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #0c6f6e;
  --bs-btn-hover-border-color: #0c6f6e;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #0b5f5e;
  --bs-btn-active-border-color: #0b5f5e;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #9ccfce;
  --bs-btn-disabled-border-color: #9ccfce;
  --bs-btn-disabled-color: #fff;

  /* HÅRD fallback om variablerna mot förmodan inte appliceras */
  background-color: var(--bs-btn-bg, #0E7C7B) !important;
  border-color: var(--bs-btn-border-color, #0E7C7B) !important;
  color: var(--bs-btn-color, #fff) !important;

  background-image: none;
  text-decoration: none;
}

/* Se till att länkar inte får blå länkfärg pga a:visited etc. */
a.btn-cta,
a.btn-cta:visited{
  color: #fff !important;
}

/* Styr hover/active med “hårda” regler ifall variabler inte räcker */
.btn-cta:hover,
.btn-cta:focus{
  background-color: #0c6f6e !important;
  border-color: #0c6f6e !important;
  color: #fff !important;
}
.btn-cta:active{
  background-color: #0b5f5e !important;
  border-color: #0b5f5e !important;
  color: #fff !important;
}
.btn-cta:disabled,
.btn-cta.disabled{
  background-color: #9ccfce !important;
  border-color: #9ccfce !important;
  color: #fff !important;
  opacity: .9;
  cursor: not-allowed;
}
/* Fallback för hamburgarikonen om Bootstrap-CSS inte levererar bakgrundsbilden */
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}