/*
Theme Name:   Hello Elementor Child
Theme URI:    https://militum.se/
Description:  Child theme of Hello Elementor for the Militum Respons site.
              Holds custom code (shortcodes, single-offer template, scroll-to-top,
              partners grid) and overrides for the WP migration of militum.se.
Author:       Militum Respons
Author URI:   https://militum.se/
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  hello-elementor-child
*/

/* CSS split: this file = components (Site Header, HFE nav); assets/css/militum.css = site-wide type + CF7. Both enqueued in functions.php (militum.css last so it can override). */

/* 1. Site Header — actions column (search + 3 CTA buttons) on RIGHT of cream bar; layout here so build script needs no inline <style>. */
.ctm_gunplay_font :is(.elementor-heading-title) {
  font-family: "Gunplay", "Inter" !important;
}

/* Custom styles for the home page */
.ctm_home_member_section .elementor-icon-list-item:not(:last-child):after {
  width: 85%;
  margin-left: auto;
}

.ctm_graph_icon_list .elementor-icon-box-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Whole right column of the cream bar. */
.militum-header-actions {
  text-align: right;
}

/* ---- Search box ---- */

.militum-header-search {
  margin-bottom: 10px;
}

/* Constrain form width on the right of the bar. */
.militum-header-search form {
  display: inline-block;
  width: 100%;
  max-width: 360px;
  margin: 0;
}

/* Search input; inline URL-encoded SVG magnifier (#1f2937 stroke) so no asset file needed. */
.militum-header-search input[type="search"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px 10px 38px; /* extra left padding for the icon */
  border: 1px solid #d4ccab;
  border-radius: 4px;
  font-size: 14px;
  color: #1f2937;
  background: #ffffff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>")
    no-repeat 12px center / 16px 16px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.militum-header-search input[type="search"]::placeholder {
  color: #6b7280;
}
.militum-header-search input[type="search"]:hover {
  border-color: #b9ad81;
}
.militum-header-search input[type="search"]:focus {
  outline: none;
  border-color: #5d8c3d;
  box-shadow: 0 0 0 3px rgba(93, 140, 61, 0.25);
}

/* ---- CTA buttons (shop / Inloggning / Bli medlem) ---- */
/* Three button widgets in one column; flip Elementor's vertical stack into a right-aligned row. */
.militum-header-cta-col > .elementor-widget-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
/* Override Elementor's width:100% so buttons shrink to content for the row. */
.militum-header-cta-col > .elementor-widget-wrap > .elementor-widget {
  width: auto !important;
  max-width: none !important;
}

/* ---- Responsive (tablet / phone) ---- */
@media (max-width: 1024px) {
  .militum-header-actions {
    text-align: center;
  }
  .militum-header-search form {
    display: block;
    margin: 0 auto;
  }
  .militum-header-cta-col > .elementor-widget-wrap {
    justify-content: center;
  }
}

.ctm_militum-offer-partners {
  max-width: 1170px;
  margin: 0 auto;
}

/* 2. Partner detail page (single militum_job, _zoo_item_type=customers) — routed to templates/partner-detail.php via template_include; name + description + 2-col grid of [militum_offers] cards. */
.militum-partner-detail {
  padding: 60px 15px;
}

.militum-partner-detail .militum-partner-wrap {
  max-width: 1170px;
  margin: 0 auto;
}

/* Joomla source uses `.floatbox { margin-bottom: 20px; }` between blocks. */
.militum-partner-wrap > * + * {
  margin-top: 20px;
}

.militum-partner-title {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
  line-height: 24px;
  color: #000000;
  font-family: "Inter", sans-serif;
  text-transform: none;
}

.militum-partner-description {
  font-size: 14px;
  line-height: normal;
  color: #000;
  font-family: "Inter", sans-serif;
}
.militum-partner-description p {
  margin: 0 0 15px;
}
.militum-partner-description p:last-child {
  margin-bottom: 0;
}
/* Top gap above the offers grid (grid drops to one column on narrow screens on its own). */
.militum-partner-offers {
  padding: 20px 0 60px !important;
  margin: 0 !important;
}

.militum-partner-offers .militum-offers-grid {
  width: fit-content;
  gap: 20px 10px;
}

.militum-partner-offers .militum-offer {
  max-width: 262px;
  width: 262px;
}
.militum-offer__related {
  margin: 0 0 60px;
}

.militum-offer__related--partners .militum-offers-loadmore__cta-wrap {
  display: none;
}

@media (max-width: 900px) {
  .militum-partner-detail {
    padding: 32px 16px 60px;
  }
  /* Title size unchanged on mobile (Joomla's 21px works everywhere); header reflows via flex-wrap. */
  .militum-partner-logo img {
    max-width: 140px;
  }
}
/* 3. HFE navigation — sub-menu padding */
.hfe-nav-menu .hfe-has-submenu .sub-menu {
  padding: 10px !important;
}

/* 4. wp-admin militum_job edit — restyle ACF tabs as native nav-tab UI; loaded only on post.php/post-new.php via admin_enqueue_scripts */

/* Strip ACF's own tab chrome */
.post-type-militum_job .acf-postbox .acf-tab-wrap,
.post-type-militum_job .acf-postbox .acf-tab-group {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Tab strip (the row of tabs) — mirrors .nav-tab-wrapper */
.post-type-militum_job .acf-postbox .acf-tab-group {
  display: block;
  margin: 0 0 14px;
  padding: 9px 0 0;
  border-bottom: 1px solid #c3c4c7;
  overflow: hidden;
  list-style: none;
  line-height: inherit;
}
.post-type-militum_job .acf-postbox .acf-tab-group li {
  float: left;
  margin: 0 0 -1px 0.5em;
  padding: 0;
  background: none;
  border: 0;
}

/* Individual tabs — mirror .nav-tab */
.post-type-militum_job .acf-postbox .acf-tab-button {
  display: inline-block;
  padding: 6px 12px;
  background: #dcdcde;
  border: 1px solid #c3c4c7;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  color: #50575e;
  font-size: 14px;
  line-height: 1.71428571;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}
.post-type-militum_job .acf-postbox .acf-tab-button:hover {
  background: #e5e5e5;
  color: #1d2327;
}

/* Active tab — mirrors .nav-tab-active. ACF marks current tab as li.active OR .acf-tab-button.selected (version-dependent). */
.post-type-militum_job .acf-postbox .acf-tab-group li.active .acf-tab-button,
.post-type-militum_job .acf-postbox .acf-tab-button.selected,
.post-type-militum_job .acf-postbox .acf-tab-button:focus {
  background: #f0f0f1;
  color: #000;
  border-bottom: 1px solid #f0f0f1;
  outline: none;
  box-shadow: none;
}

/* 5. [member_cards] — row of compact white cards: logo + discount + category; data from militum_job offers */

.militum-member-cards__grid {
  display: grid;
  grid-template-columns: repeat(var(--mc-cols, 4), 1fr);
  gap: 20px;
  max-width: 1170px;
  margin: 0 auto;
}

.militum-member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 1px solid #f0ede9;
  border-radius: 10px;
  padding: 20px 28px;
}

.militum-member-card__logo {
  margin-bottom: 18px;
}
.militum-member-card__logo img {
  max-width: 100%;
  height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.militum-member-card__logo-fallback {
  font-weight: 700;
  font-size: 13px;
  color: #2b2b2b;
  text-align: center;
}

.militum-member-card__discount {
  margin: 0 0 20px;
  text-align: center;
  font-family: "Inter", sans-serif;
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
}

.militum-member-card__pct {
  display: inline;
  font-size: 24px;
  font-weight: 700;
  color: #000;
  line-height: 32px;
}

.militum-member-card__desc {
  display: inline;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  line-height: normal;
  text-align: left;
}

.militum-member-card__title {
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: 700;
  color: #000000;
  text-align: center;
  line-height: normal;
  font-family: "Inter", sans-serif;
}

.militum-member-card__cat {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: #303c19;
  text-align: center;
  font-family: "Inter", sans-serif;
  line-height: normal;
}

/* Responsive collapse */
@media (max-width: 1024px) {
  .militum-member-cards__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}
@media (max-width: 560px) {
  .militum-member-cards__grid {
    grid-template-columns: 1fr;
  }
  .militum-member-card {
    min-height: 0;
    padding: 22px 16px;
  }
  .militum-member-cards__heading {
    font-size: 17px;
    letter-spacing: 1.2px;
  }
}
/* 6. [popular_categories] — round-icon category grid */

.militum-popular-cats__grid {
  display: grid;
  grid-template-columns: repeat(var(--mpc-cols, 4), 1fr);
  gap: 22px;
}
.militum-popular-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: #f6f5f4;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  padding: 24px 16px;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.militum-popular-cat__circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #303c19;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.militum-popular-cat__circle img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.militum-popular-cat__name {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #000;
  text-align: center;
  line-height: normal;
  overflow-wrap: anywhere;
}

/* 6b. [popular_categories] carousel mode — JS adds .is-carousel only when there
   are more than 5 categories. Shows 5 per view (4 ≤1024px, 2 ≤767px), arrows
   only (no dots). Card design/styling unchanged. */
.militum-popular-cats {
  --mpc-ppv: 5;
  --mpc-gap: 22px;
  display: flex;
  align-items: stretch;
  gap: var(--mpc-gap);
}
.militum-popular-cats.is-carousel {
  position: relative;
}
/* "Nära dig" — fixed card, one slot wide, OUTSIDE the scroll track (so the
   category cards never sit under/below it; they scroll strictly to its right). */
.militum-popular-cats__pinned {
  flex: 0 0
    calc((100% - (var(--mpc-ppv) - 1) * var(--mpc-gap)) / var(--mpc-ppv));
}
.militum-popular-cats__pinned .militum-popular-cat__circle {
  background: #303c19;
}
/* the scrolling track: the other categories + the prev/next arrows */
.militum-popular-cats__track {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}
.militum-popular-cats.is-carousel .militum-popular-cats__grid {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--mpc-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.militum-popular-cats.is-carousel
  .militum-popular-cats__grid::-webkit-scrollbar {
  display: none;
}
.militum-popular-cats.is-carousel .militum-popular-cats__grid.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
.militum-popular-cats.is-carousel .militum-popular-cats__grid img {
  -webkit-user-drag: none;
  user-select: none;
}
/* scrolling cards match the pinned width; show (ppv-1) in the track so
   pinned + (ppv-1) = ppv visible at a time. */
.militum-popular-cats.is-carousel
  .militum-popular-cats__grid
  .militum-popular-cat {
  flex: 0 0
    calc((100% - (var(--mpc-ppv) - 2) * var(--mpc-gap)) / (var(--mpc-ppv) - 1));
  scroll-snap-align: start;
}
.militum-popular-cats__nav {
  display: none;
}
.militum-popular-cats.is-carousel .militum-popular-cats__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #d8d8d8;
  background: #fff;
  color: #303c19;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition:
    background 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}
.militum-popular-cats.is-carousel .militum-popular-cats__nav:hover {
  background: #303c19;
  color: #fff;
}
.militum-popular-cats.is-carousel .militum-popular-cats__nav[disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.militum-popular-cats__nav--prev {
  left: -10px;
}
.militum-popular-cats__nav--next {
  right: -10px;
}
.militum-popular-cats__nav svg {
  width: 20px;
  height: 20px;
}
@media (max-width: 1024px) {
  .militum-popular-cats.is-carousel {
    --mpc-ppv: 4;
    --mpc-gap: 18px;
  }
}
@media (max-width: 767px) {
  .militum-popular-cats.is-carousel {
    --mpc-ppv: 2;
    --mpc-gap: 14px;
  }
  .militum-popular-cats__nav--prev {
    left: 0;
  }
  .militum-popular-cats__nav--next {
    right: 0;
  }
}

/* 7. [offers_loadmore] — offer card grid + AJAX Load More */
.militum_heading_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 30px;
}
.militum_heading {
  font-family: "Gunplay", "Inter" !important;
  font-weight: 400;
  font-size: 24px;
  line-height: normal;
  text-align: center;
  margin: 0;
}
/* "─── ★ ───" decoration: flanking lines via ::before/::after, gold star is a URL-encoded SVG bg. */
.militum_heading_shape {
  position: relative;
  display: block;
  width: 100%;
  max-width: 190px;
  height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eaad2a'><polygon points='12,2 14.9,9 22,9.6 16.5,14.3 18,22 12,18.5 6,22 7.5,14.3 2,9.6 9.1,9'/></svg>")
    no-repeat center / 18px 18px;
}
.militum_heading_shape::before,
.militum_heading_shape::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 22px);
  height: 1px;
  background: #eaad2a;
  transform: translateY(-50%);
}
.militum_heading_shape::before {
  left: 0;
}
.militum_heading_shape::after {
  right: 0;
}
.militum-offers-loadmore__grid {
  display: grid;
  grid-template-columns: repeat(var(--mol-cols, 4), 1fr);
  gap: 20px;
  max-width: 1170px;
  margin: 0 auto;
}

.militum-loadmore-card {
  position: relative;
  background: #f6f5f4;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
/* Whole card clickable: the media link is "stretched" to cover the entire card
   (it already points to the offer URL and carries the aria-label = title). */
.militum-loadmore-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.militum-loadmore-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
.militum-loadmore-card__media {
  display: block;
  height: 110px;
  overflow: hidden;
  background: #f6f5f4;
}
.militum-loadmore-card__img {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
}
.militum-loadmore-card:hover .militum-loadmore-card__img {
  transform: scale(1.05);
}
.militum-loadmore-card__img--ph {
  background: linear-gradient(135deg, #3d4a26 0%, #5a6a3a 100%);
}
/* Small city label for local offers — top-left badge on the card image,
   matching the green city pill on militum.se. Non-interactive so the whole
   card stays a single clickable link. */
.militum-loadmore-card__city {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 16px);
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: #303c19;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.militum-loadmore-card__city svg {
  flex-shrink: 0;
}
.militum-loadmore-card__city-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.militum-loadmore-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  flex: 1;
}
.militum-loadmore-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #000;
  font-family: "Inter", sans-serif;
  line-height: normal;
}
/* /alla-erbjudanden/ only: titles carrying a " - " separator render as a bold
   lead line + a normal-weight second line. Titles without one keep the plain
   bold h3 above. */
.militum-loadmore-card__title-main {
  display: block;
  font-weight: 700;
}
.militum-loadmore-card__title-sub {
  display: block;
  font-weight: 400;
}
.militum-loadmore-card__desc {
  margin: 0;
  font-size: 12.5px;
  color: #6b7280;
  line-height: 1.4;
}
.militum-loadmore-card__cta {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 6px 20px;
  border: 1px solid #303c19;
  border-radius: 6px;
  background: #303c19;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  align-self: center;
  line-height: normal;
  margin-top: auto;
}
.militum-loadmore-card__cta:hover {
  color: #eaad2a;
}

.militum-offers-loadmore__cta-wrap {
  text-align: center;
  margin-top: 30px;
}
.militum-offers-loadmore__btn {
  display: inline-block;
  padding: 12px 30px;
  border: 1px solid #303c19;
  border-radius: 8px;
  background: transparent;
  color: #303c19;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
  font-family: "Inter", sans-serif;
}

.militum-offers-loadmore__btn:hover {
  background: #303c19;
  color: #fff;
  transform: translateY(-1px);
}
.militum-offers-loadmore__btn:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

@media (max-width: 1024px) {
  .militum-offers-loadmore__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .militum-offer__related {
    margin: 0 0 50px;
  }
  .militum_heading {
    font-size: 22px;
  }
  .militum_heading_shape {
    max-width: 160px;
  }
  .militum_heading_shape::before,
  .militum_heading_shape::after {
    width: calc(50% - 16px);
  }
  .militum_heading_wrap {
    margin-bottom: 24px;
  }
}
@media (max-width: 991px) {
  .militum-offers-loadmore__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .militum-loadmore-card__media {
    height: 110px;
  }
}
@media (max-width: 767px) {
  .militum_heading_shape {
    max-width: 120px;
  }
  .militum_heading {
    font-size: 20px;
  }
  .militum-offer__related {
    margin: 0 0 40px;
  }
  .militum-offers-loadmore__grid {
    grid-template-columns: 1fr;
  }
  .militum-loadmore-card__media {
    height: 150px;
  }
  .militum_heading_wrap {
    margin-bottom: 16px;
  }
}

/* 7a. Empty section. Popular categories: hide entirely. Offers grid: keep the
   section but hide the (empty) grid + load-more and show the "not found" message
   (drill/hero/search JS toggles --empty on each AJAX swap). */
.militum-popular-cats--empty {
  display: none;
}
.militum-offers-loadmore--empty > .militum-offers-loadmore__grid,
.militum-offers-loadmore--empty > .militum-offers-loadmore__cta-wrap {
  display: none;
}
/* JS-set marker: hides the heading/divider sibling of an empty section so no orphan heading dangles. */
.militum-section-title-hidden {
  display: none !important;
}

/* 7b. Search results view. A keyword typed into the hero turns the page into a
   results view, matching what the header search's /?s= page (search.php) shows:
   the category row and featured slider step aside and the grid becomes a titled
   cream panel. Both marker classes are set by the hero JS and dropped again the
   moment the keyword is cleared. Values mirror .militum-search in search.php —
   keep the two in step. */
.militum-hidden-during-search {
  display: none !important;
}
.militum-offers-loadmore--search {
  background: #f7f6f2;
  padding: 60px 15px;
}
.militum-offers-loadmore__searchhead {
  max-width: 1170px;
  margin: 0 auto 30px;
}
.militum-offers-loadmore__searchhead[hidden] {
  display: none;
}
.militum-offers-loadmore__searchtitle {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #1b1b1b;
  line-height: 1.3;
}
.militum-offers-loadmore__searchtitle em {
  font-style: normal;
  color: #303c19;
}
@media (max-width: 1024px) {
  .militum-offers-loadmore--search {
    padding: 50px 15px;
  }
}
@media (max-width: 767px) {
  .militum-offers-loadmore--search {
    padding: 40px 15px;
  }
  .militum-offers-loadmore__searchhead {
    margin-bottom: 20px;
  }
  .militum-offers-loadmore__searchtitle {
    font-size: 22px;
  }
}

/* 7. [militum_offers_hero] — hero band: title/subtitle/search/pills; live-filters grid via militum_offers_loadmore AJAX. bg= anchored bottom, cream top. .is-loading dims grid during fetch. */

.militum-offers-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.militum-offers-hero__form {
  width: 100%;
  max-width: 760px;
}

.militum-offers-hero__search-wrap {
  position: relative;
}

.militum-offers-hero__search-btn {
  background: transparent !important;
  border: 0;
  padding: 0 !important;
  margin: 0;
  cursor: pointer;
  color: #000 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  transition: color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 18px;
}

.militum-offers-hero__search-icon {
  display: block;
  pointer-events: none;
  width: 26px;
  height: 26px;
}

.militum-offers-hero__search {
  flex: 1;
  border: 1px solid #b7b7b7 !important;
  background-color: #ffffff !important;
  outline: 0;
  padding: 13px 18px 13px 58px !important;
  font-size: 20px;
  line-height: normal;
  color: #000;
  font-family: inherit;
  border-radius: 8px !important;
}
.militum-offers-hero__search::placeholder {
  color: #000;
  opacity: 1;
}
/* .militum-offers-hero__search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 16px; width: 16px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 4l8 8M12 4l-8 8' stroke='%23999' stroke-width='2' stroke-linecap='round'/></svg>") center no-repeat;
    cursor: pointer;
} */

/* Pills row. */
.militum-offers-hero__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.militum-offers-hero__pill {
  background: #4e5838;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 14px 20px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  line-height: normal;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.militum-offers-hero__pill:hover {
  background: #5d6944;
  transform: translateY(-1px);
}
.militum-offers-hero__pill.is-active {
  background: #d8a23c;
  color: #1f240f;
  box-shadow: 0 0 0 2px rgba(216, 162, 60, 0.35);
}
.militum-offers-hero__pill:focus-visible {
  outline: 2px solid #d8a23c;
  outline-offset: 2px;
}

/* AJAX search/filter loading: spinner at action (button/pill) AND result (grid). */

@keyframes militum-spin {
  to {
    transform: rotate(360deg);
  }
}

/* 1. Search button — icon swaps for spinner while loading. */
.militum-offers-hero.is-loading .militum-offers-hero__search-icon {
  display: none;
}
.militum-offers-hero.is-loading .militum-offers-hero__search-btn::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(48, 60, 25, 0.18);
  border-top-color: #303c19;
  border-radius: 50%;
  animation: militum-spin 0.7s linear infinite;
}
.militum-offers-hero.is-loading .militum-offers-hero__search-btn {
  cursor: progress;
}

/* 2. Pill in-flight — inline spinner; color = currentColor for olive/gold. */
.militum-offers-hero__pill.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}
.militum-offers-hero__pill.is-loading::after {
  content: "";
  display: inline-block;
  margin-left: 10px;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: militum-spin 0.7s linear infinite;
}

/* 3. Offers + Popular-cats grids — dim + centered spinner during AJAX. */
.militum-offers-loadmore__grid.is-loading,
.militum-popular-cats__grid.is-loading {
  position: relative;
  min-height: 180px;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.militum-offers-loadmore__grid.is-loading > *,
.militum-popular-cats__grid.is-loading > * {
  opacity: 0.35;
  transition: opacity 0.15s ease;
  filter: blur(0.4px);
}
.militum-offers-loadmore__grid.is-loading::after,
.militum-popular-cats__grid.is-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 3px solid rgba(48, 60, 25, 0.18);
  border-top-color: #303c19;
  border-radius: 50%;
  animation: militum-spin 0.7s linear infinite;
  z-index: 2;
  pointer-events: none;
}

/* 4. Clicked category card — no per-card spinner; grid overlay (rule 3) is the loader. .is-loading only powers JS double-click guard, no visual. */
.militum-popular-cat.is-loading {
  pointer-events: none;
}
.militum-offers-loadmore__empty {
  display: none; /* shown only when the section carries the --empty class */
  text-align: center;
  color: #4a5a3a;
  font-size: 15px;
  padding: 32px 16px;
  margin: 0;
}
.militum-offers-loadmore--empty .militum-offers-loadmore__empty {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .militum-offers-hero.is-loading .militum-offers-hero__search-btn::after,
  .militum-offers-hero__pill.is-loading::after,
  .militum-offers-loadmore__grid.is-loading::after,
  .militum-popular-cats__grid.is-loading::after {
    animation-duration: 1.4s;
  }
}

@media (max-width: 900px) {
  .militum-offers-hero__inner {
    gap: 18px;
  }
  .militum-offers-hero__search {
    font-size: 17px;
  }
  .militum-offers-hero__search-icon {
    width: 22px;
    height: 22px;
  }
  .militum-offers-hero__pills {
    gap: 12px;
  }
  .militum-offers-hero__pill {
    padding: 11px 16px;
    font-size: 14px;
  }
}
@media (max-width: 560px) {
  .militum-offers-hero__inner {
    gap: 14px;
  }
  .militum-offers-hero__search {
    font-size: 15px;
  }
  .militum-offers-hero__search-icon {
    width: 20px;
    height: 20px;
  }
  .militum-offers-hero__pills {
    gap: 8px;
  }
  .militum-offers-hero__pill {
    padding: 9px 14px;
    font-size: 13px;
  }
}
/* bli-medlem */

#wppb-register-user {
  font-family: "Inter", sans-serif;
  max-width: 600px;
  margin: 0 auto;
  color: #000000;
}

#wppb-register-user > ul:first-of-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 30px;
  list-style: none;
  padding: 0;
  margin: 0 !important;
}

.wppb-send-credentials-checkbox {
  display: none;
}

/* Left Column */
#wppb-form-element-20 {
  grid-column: 1;
  grid-row: 1;
} /* För-efternamn */
#wppb-form-element-12 {
  grid-column: 1;
  grid-row: 2;
} /* Lösenord */
#wppb-form-element-8 {
  grid-column: 1;
  grid-row: 3;
} /* E-postadress */
#wppb-form-element-14 {
  grid-column: 1;
  grid-row: 4;
} /* Vapenslag */
#wppb-form-element-15 {
  grid-column: 1;
  grid-row: 5;
} /* Välj län */

/* Right Column */
#wppb-form-element-2 {
  grid-column: 2;
  grid-row: 1;
} /* Användarnamn */
#wppb-form-element-13 {
  grid-column: 2;
  grid-row: 2;
} /* Bekräfta lösenord */
#wppb-form-element-19 {
  grid-column: 2;
  grid-row: 4;
} /* Aktiveringskod */
#wppb-form-element-17 {
  grid-column: 2;
  grid-row: 5;
} /* Ort */

#wppb-form-element-21 .wppb-checkboxes{
	width:100% !important;
}
#wppb-form-element-21 .wppb-checkboxes li > input{
	width:auto !important;
}
#wppb-form-element-21 .wppb-checkboxes li > label > a{
	color:#1d4ed8;
}
#wppb-form-element-21 .wppb-checkboxes li > label > a:hover{
	text-decoration:underline;
}
#wppb-form-element-21 .wppb-checkboxes li > label{
	margin-bottom:0 !important;
	vertical-align: bottom;
}
#wppb-form-element-21 .wppb-checkboxes li{
	display:flex;
	gap:6px;
	padding:0 !important;
	align-items:center;
}
#wppb-form-element-21 > label{
	display:none !important;
}
#wppb-form-element-21,
#wppb-form-element-18 {
  grid-column: 1 / -1 !important;

  margin-top: -10px !important;

  border-top: 1px solid #c3c3c3 !important;
  padding-top: 20px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

#wppb-form-element-18 > label {
  margin-bottom: 0 !important;
}

/* 3. TYPOGRAPHY & LABELS */

#wppb-register-user label {
  width: 100% !important;
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  line-height: 22px;
  margin-bottom: 10px;
}

#wppb-form-element-20 {
  margin: 0;
  padding: 0;
}

#wppb-register-user input[type="text"],
#wppb-register-user input[type="password"],
#wppb-register-user input[type="email"],
#wppb-register-user select {
  width: 100%;
  height: 60px;
  background: #ffffff;
  border: 1px solid #d5d5d5;
  border-radius: 6px;
  box-sizing: border-box;
  padding: 0 16px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #000000;
  outline: none;
  transition: border-color 0.3s ease;
}

#wppb-register-user select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23134563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

/* Container (Rectangle 51) */
#wppb-register-user .wppb-radios {
  position: relative !important;
  width: 200px !important;
  height: 60px !important;
  background: #d9d9d9 !important;
  border-radius: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}

#wppb-register-user .wppb-radios li {
  position: absolute !important;
  top: 5px !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#wppb-register-user .wppb-radios li:first-child {
  left: 8px !important;
  width: 90px !important;
}

#wppb-register-user .wppb-radios li:last-child {
  left: 106px !important;
  width: 86px !important;
}

#wppb-register-user .wppb-radios input[type="radio"] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#wppb-register-user .wppb-radios label.wppb-rc-value {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #000000 !important;
  border-radius: 6px !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
  background: transparent;
  transition: background 0.2s ease-in-out;
}

#wppb-register-user
  .wppb-radios
  input[type="radio"]:checked
  + label.wppb-rc-value {
  background: #ffffff !important;
}
#wppb-register-user > ul:not(:first-of-type) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

#wppb-register-user .form-submit {
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: start !important;
  width: 100% !important;
}

#wppb-register-user input#register {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 170px;
  height: 50px;
  background: transparent;
  border: 1px solid #303c19;
  border-radius: 8px;
  color: #303c19;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.wppb-user-forms ul li {
  margin: 0 !important;
}

#wppb-register-user input#register:hover {
  background: #303c19;
  color: #ffffff;
}

#wppb-form-element-12 .wppb-password-group .wppb-password-field-container {
  width: 100% !important;
}
#wppb-form-element-13 .wppb-password-field-container {
  width: 100% !important;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  #wppb-register-user label {
    font-size: 15px;
    margin-bottom: 6px;
  }

  #wppb-register-user input[type="text"],
  #wppb-register-user input[type="password"],
  #wppb-register-user input[type="email"],
  #wppb-register-user select {
    height: 50px;
    font-size: 15px;
  }

  #wppb-register-user .wppb-radios {
    height: 52px !important;
  }

  #wppb-register-user .wppb-radios li {
    height: 42px !important;
    top: 5px !important;
  }

  #wppb-register-user .wppb-radios label.wppb-rc-value {
    font-size: 15px !important;
  }

  #wppb-register-user > ul:first-of-type {
    row-gap: 18px;
    column-gap: 24px;
  }
}

@media screen and (max-width: 768px) {
  #wppb-register-user {
    padding: 0 15px;
  }

  #wppb-register-user > ul:first-of-type {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  #wppb-register-user input[type="text"],
  #wppb-register-user input[type="password"],
  #wppb-register-user input[type="email"],
  #wppb-register-user select {
    height: 44px;
    font-size: 14px;
  }

  #wppb-register-user label {
    margin-bottom: 4px;
    font-size: 14px;
  }

  #wppb-register-user .wppb-radios {
    width: 180px !important;
    height: 50px !important;
  }

  #wppb-register-user .wppb-radios li {
    top: 3px !important;
    height: 44px !important;
  }

  #wppb-register-user .wppb-radios li:first-child {
    left: 3px !important;
    width: 86px !important;
  }

  #wppb-register-user .wppb-radios li:last-child {
    left: 91px !important;
    width: 86px !important;
  }

  #wppb-register-user .wppb-radios label.wppb-rc-value {
    font-size: 14px !important;
  }

  #wppb-form-element-20,
  #wppb-form-element-12,
  #wppb-form-element-8,
  #wppb-form-element-14,
  #wppb-form-element-15,
  #wppb-form-element-2,
  #wppb-form-element-13,
  #wppb-form-element-19,
  #wppb-form-element-17,
  #wppb-form-element-18 {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  #wppb-form-element-20 {
    order: 1;
  } /* För-efternamn */
  #wppb-form-element-2 {
    order: 2;
  } /* Användarnamn */
  #wppb-form-element-8 {
    order: 3;
  } /* E-postadress */
  #wppb-form-element-12 {
    order: 4;
  } /* Lösenord */
  #wppb-form-element-13 {
    order: 5;
  } /* Bekräfta lösenord */
  #wppb-form-element-14 {
    order: 6;
  } /* Vapenslag */
  #wppb-form-element-19 {
    order: 7;
  } /* Aktiveringskod */
  #wppb-form-element-15 {
    order: 8;
  } /* Välj län */
  #wppb-form-element-17 {
    order: 9;
  } /* Ort */

  #wppb-form-element-18 {
    order: 10;
    margin-top: 10px !important;
  }

  #wppb-register-user input#register {
    width: 100%;
  }
}
/* Login and reset password */
.wppb-user-forms {
  font-family: "Inter", sans-serif;
  max-width: 600px;
  margin: 0 auto;
  color: #000000;
}

#wppb-loginform,
#wppb-recover-password ul {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#wppb-loginform p.wppb-form-field,
#wppb-recover-password li.wppb-form-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  width: 100%;
}

#wppb-recover-password > p:first-of-type {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 25px;
  color: #000000;
}
/*
#wppb-recover-password > p:first-of-type {
    font-size: 15px;
    line-height: 1.6;
    color: #444444;
    margin-bottom: 25px;
    padding: 12px 16px;
    background-color: #f8f9fa;
    border-left: 4px solid #134563;
    border-radius: 0 4px 4px 0;
} */

#wppb-loginform label,
#wppb-recover-password label {
  display: block;
  width: 100% !important;
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  line-height: 22px;
  margin-bottom: 10px;
  text-align: left;
}

#wppb-loginform input[type="text"],
#wppb-loginform input[type="password"],
#wppb-recover-password input[type="text"] {
  width: 100% !important;
  max-width: 100%;
  height: 60px;
  background: #ffffff;
  border: 1px solid #d5d5d5;
  border-radius: 6px;
  box-sizing: border-box;
  padding: 0 16px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #000000;
  outline: none;
  transition: border-color 0.3s ease;
}

#wppb-loginform input[type="text"]:focus,
#wppb-loginform input[type="password"]:focus,
#wppb-recover-password input[type="text"]:focus {
  border-color: #134563;
}

#wppb-loginform .wppb-password-field-container {
  width: 100%;
  display: block;
}

#wppb-loginform p.login-remember {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

#wppb-loginform p.login-remember input[type="checkbox"] {
  margin: 0;
  width: 18px !important;
  height: 18px;
  cursor: pointer;
}

#wppb-loginform p.login-remember label {
  width: auto;
  margin-bottom: 0;
  cursor: pointer;
}

#wppb-loginform p.form-submit,
#wppb-recover-password p.form-submit {
  display: flex;
  flex-direction: row;
  justify-content: start;
  margin: 15px 0 0 0;
  padding: 0;
  width: 100%;
}

/* Width is auto with a 170px floor, not a hard 170px: this rule is shared by
   the login popup ("Logga in") and the recover form ("Skicka
   återställningslänk"). A submit input clips its value to the content box, so
   the longer recover label was being cut off. min-width keeps the short login
   button at its original size; the horizontal padding gives longer labels room. */
#wppb-loginform input[type="submit"],
#wppb-recover-password input[type="submit"] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 170px;
  width: auto;
  height: 50px;
  background: transparent;
  border: 1px solid #303c19;
  border-radius: 8px;
  color: #303c19;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
  padding: 0 22px;
}

#wppb-loginform input[type="submit"]:hover,
#wppb-recover-password input[type="submit"]:hover {
  background: #303c19;
  color: #ffffff;
}

/* "Tillbaka till inloggning" — appended after the recover form by the
   wppb_recover_password_before_content_output filter (functions.php §…).
   It lands *outside* #wppb-recover-password (the filter appends after the
   .wppb_holder closing div), so it is styled on its own classes rather than as
   a descendant of the form. Secondary treatment — muted border and a lighter
   weight — so it reads below the primary submit rather than competing with it.
   Auto width + horizontal padding means the label can never clip. */
.back-to-login-wrapper {
  display: flex;
  justify-content: start;
  margin-top: 12px;
}

.back-to-login-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  background: transparent;
  border: 1px solid rgba(48, 60, 25, 0.35);
  border-radius: 8px;
  color: #303c19;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.back-to-login-btn:hover,
.back-to-login-btn:focus {
  background: #303c19;
  border-color: #303c19;
  color: #ffffff;
  text-decoration: none;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  #wppb-loginform,
  #wppb-recover-password ul {
    gap: 18px;
  }

  #wppb-loginform label,
  #wppb-recover-password label {
    font-size: 15px;
    margin-bottom: 6px;
  }

  #wppb-loginform input[type="text"],
  #wppb-loginform input[type="password"],
  #wppb-recover-password input[type="text"] {
    height: 50px;
    font-size: 15px;
  }

  #wppb-recover-password > p:first-of-type {
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 18px;
  }
}

@media screen and (max-width: 768px) {
  .wppb-user-forms {
    padding: 0 15px;
  }

  #wppb-loginform,
  #wppb-recover-password ul {
    gap: 16px;
  }

  #wppb-loginform label,
  #wppb-recover-password label {
    font-size: 14px;
    margin-bottom: 4px;
  }

  #wppb-loginform input[type="text"],
  #wppb-loginform input[type="password"],
  #wppb-recover-password input[type="text"] {
    height: 44px;
    font-size: 14px;
  }

  #wppb-recover-password > p:first-of-type {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 16px;
  }

  #wppb-loginform input[type="submit"],
  #wppb-recover-password input[type="submit"] {
    width: 100%;
  }

  /* The back link sits outside .wppb-user-forms, so it misses that element's
     mobile side padding — repeat it here to keep it flush with the form. */
  .back-to-login-wrapper {
    padding: 0 15px;
  }

  .back-to-login-btn {
    width: 100%;
  }
}
/* Contact Us */

.elementor-shortcode .militum-fabrik-form {
  background-color: #ffffff;
  width: 100%;
  padding: 0px !important;
  box-sizing: border-box;
  border-radius: 8px;
  border: none !important;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.militum-fabrik-form form {
  border: none !important;
  box-shadow: none !important;
  padding: 0px;
  border-radius: 0px;
}

.elementor-shortcode .militum-fabrik-form fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.elementor-shortcode .militum-fabrik-form legend {
  display: none;
}

.elementor-shortcode .militum-fabrik-form .militum-fabrik-row {
  margin-bottom: 30px;
  width: 100%;
}

.elementor-shortcode .militum-fabrik-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  color: #000;
  font-weight: 400;
	line-height:normal;
}

.elementor-shortcode .militum-fabrik-form .mf-req {
  color: #ff0000;
}

.elementor-shortcode .militum-fabrik-form input[type="text"],
.elementor-shortcode .militum-fabrik-form input[type="email"],
.elementor-shortcode .militum-fabrik-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #dcdcdc;
  border-radius: 4px !important;
  background-color: #ffffff;
  font-family: sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.3s ease;
  box-shadow: none;
}

.elementor-shortcode .militum-fabrik-form input[type="text"]:focus,
.elementor-shortcode .militum-fabrik-form input[type="email"]:focus,
.elementor-shortcode .militum-fabrik-form textarea:focus {
  border-color: #888888;
}

.elementor-shortcode .militum-fabrik-form textarea {
  height: 120px;
  resize: none;
}

.elementor-shortcode .militum-fabrik-form .militum-fabrik-actions {
  border-top: 1px solid #dcdcdc;
  padding-top: 30px;
  margin-top: 0px;
  width: 100%;
}

.elementor-shortcode .militum-fabrik-form button.militum-fabrik-submit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 232px !important;
  height: 50px !important;
  box-sizing: border-box;
  padding: 0;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  background: transparent !important;
  background-image: none !important;
  font-size: 16px;
  line-height: 22px;
  color: #303c19 !important;
  text-align: center;
  background-color: transparent !important;
  border: 1px solid #303c19 !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: none !important;
}

.elementor-shortcode .militum-fabrik-form button.militum-fabrik-submit:hover {
  background-color: #303c19 !important;
  color: #ffffff !important;
}

.elementor-shortcode .militum-fabrik-intro h3 {
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
  margin-bottom: 25px;
}
.custom-cf7-wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
  box-sizing: border-box;
}

.cf7-form-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.custom-cf7-wrapper label {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  width: 100%;
  margin-bottom: 0 !important;
}

.custom-cf7-wrapper input[type="text"],
.custom-cf7-wrapper input[type="email"],
.custom-cf7-wrapper input[type="number"],
.custom-cf7-wrapper textarea {
  width: 100%;
  background: #ffffff !important;
  border: 1px solid #d5d5d5 !important;
  border-radius: 6px !important;
  box-sizing: border-box;
  padding: 0 16px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #000000;
  outline: none;
  transition: border-color 0.3s ease;
  box-shadow: none !important;
}

.custom-cf7-wrapper input[type="text"],
.custom-cf7-wrapper input[type="email"],
.custom-cf7-wrapper input[type="number"] {
  height: 60px !important;
}

.custom-cf7-wrapper textarea {
  height: 114px !important;
  padding: 20px 16px;
  resize: vertical;
}

.custom-cf7-wrapper input:focus,
.custom-cf7-wrapper textarea:focus {
  border-color: #303c19 !important;
}
.cf7-submit-group p {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.custom-cf7-wrapper p {
  margin: 0 !important;
  padding: 0;
}
.custom-cf7-wrapper {
  height: auto;
}

.custom-cf7-wrapper input[type="submit"] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 44px;
  width: 200px !important;
  height: 50px !important;
  background: transparent !important;
  border: 1px solid #303c19 !important;
  border-radius: 8px !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 22px;
  color: #303c19 !important;
  cursor: pointer;
  transition: all 0.3s ease;
}

.custom-cf7-wrapper input[type="submit"]:hover {
  background: #303c19 !important;
  color: #ffffff !important;
}

.cf7-response-text {
  font-family: "Inter", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  padding-bottom: 40px !important;
}
/* .wpcf7-spinner {
  display: none;
} */

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .custom-cf7-wrapper {
    gap: 18px;
  }

  .custom-cf7-wrapper label {
    font-size: 15px;
    line-height: 20px;
    gap: 6px;
  }

  .custom-cf7-wrapper input[type="text"],
  .custom-cf7-wrapper input[type="email"],
  .custom-cf7-wrapper input[type="number"] {
    height: 50px !important;
    font-size: 15px;
  }

  .custom-cf7-wrapper textarea {
    font-size: 15px;
    padding: 16px;
  }

  .cf7-response-text {
    font-size: 15px;
    line-height: 20px;
  }
}

@media screen and (max-width: 768px) {
  .custom-cf7-wrapper {
    padding: 0 15px;
    gap: 16px;
  }

  .custom-cf7-wrapper label {
    font-size: 14px;
    line-height: 18px;
    gap: 4px;
  }

  .custom-cf7-wrapper input[type="text"],
  .custom-cf7-wrapper input[type="email"],
  .custom-cf7-wrapper input[type="number"] {
    height: 44px !important;
    font-size: 14px !important;
    padding: 0 12px;
  }

  .custom-cf7-wrapper textarea {
    font-size: 14px !important;
    padding: 12px;
  }

  .custom-cf7-wrapper input[type="submit"] {
    width: 100% !important;
    font-size: 14px !important;
  }

  .cf7-response-text {
    font-size: 14px;
    line-height: 18px;
  }
}

@media (max-width: 1024px) {
  .militum-popular-cats__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }

  .militum-popular-cat__circle {
    width: 90px;
    height: 90px;
  }

  .militum-popular-cat__circle img {
    width: 46px;
    height: 46px;
  }
  .militum-popular-cat__name {
    font-size: 18px;
  }
  .militum-popular-cat {
    gap: 20px;
    padding: 24px 16px;
  }

  .militum-loadmore-card__title {
    font-size: 16px;
  }
  .militum-loadmore-card__cta {
    padding: 6px 18px;
    font-size: 18px;
  }
  .militum-loadmore-card__body {
    padding: 18px;
  }
  .militum-offers-loadmore__btn {
    padding: 12px 30px;
    font-size: 14px;
  }

  .militum-offers-loadmore__cta-wrap {
    margin-top: 24px;
  }

  .militum-offers-hero__search {
    padding: 10px 18px 10px 58px !important;
    font-size: 16px;
  }

  .militum-offers-hero__inner {
    gap: 20px;
  }

  .militum-offers-hero__pills {
    gap: 16px;
  }

  .militum-offers-hero__pill {
    padding: 12px 18px;
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .militum-popular-cats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .militum-popular-cat__circle {
    width: 64px;
    height: 64px;
  }
  .militum-popular-cat__circle img {
    width: 36px;
    height: 36px;
  }
  .militum-popular-cat__name {
    font-size: 13px;
  }
  .militum-offers-hero__search {
    padding: 10px 18px 10px 40px !important;
    font-size: 14px;
  }
  .militum-offers-hero__search-btn {
    left: 12px;
  }
  .militum-offers-hero__pill {
    padding: 10px 16px;
    font-size: 12px;
  }
  .militum-offers-hero__pills {
    gap: 10px;
  }

  .militum-popular-cat,
  .militum-offers-hero__inner {
    gap: 16px;
  }
}
/* Below ~360px the popular-category row overflowed on category pages: in
   non-carousel mode the pinned "Nära dig" card + the 2-column track = three
   cards, each at least 64px circle + 2x16px padding + border = 98px, which
   does not fit in a 290px content box. 8px side padding makes a card 82px, so
   three fit down to 320px. */
@media (max-width: 360px) {
  .militum-popular-cat {
    padding: 20px 8px;
  }
}
/* 8. [militum_partners] — "Våra partners" logo grid + "Visa alla" CTA; expand/collapse via shortcode's inline <script>. */
.militum-partners-grid {
  display: grid;
  grid-template-columns: repeat(var(--mp-cols, 6), 1fr);
  gap: 60px 30px;
  align-items: center;
  justify-items: center;
}
.militum-partner-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 100%;
  max-width: 180px;
  transition: transform 0.15s ease;
}
a.militum-partner-tile:hover {
  transform: translateY(-2px);
}
.militum-partner-tile img {
  max-width: 100%;
  max-height: 70px;
  object-fit: contain;
}
.militum-partner-tile.is-hidden {
  display: none;
}
.militum-partners-cta {
  text-align: center;
  margin-top: 50px;
}
.militum-partners-cta.is-hidden {
  display: none;
}
.militum-partners-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 44px;
  color: #303c19;
  border: 1px solid #303c19;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.militum-partners-link:hover {
  background: #303c19;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.militum-partners-link:focus-visible {
  outline: 2px solid #303c19;
  outline-offset: 3px;
}
.militum-partners-chev {
  display: inline-block;
  flex-shrink: 0;
}

@media (max-width: 1280px) {
  .militum-partners-grid {
    gap: 40px 40px;
  }
}
@media (max-width: 1024px) {
  .militum-partners-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 36px 32px;
  }
}
@media (max-width: 767px) {
  .militum-partners-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 20px;
  }
  .militum-partner-tile img {
    max-height: 46px;
  }
  .militum-partner-tile {
    max-width: 140px;
  }
  .militum-partners-link {
    padding: 12px 26px;
    font-size: 14px;
  }
  .militum-partners-cta {
    margin-top: 40px;
  }
}

/* 9. [militum_coordinates] — geolocated "Förmåner nära dig" list; nearest cities + best local discount, filled client-side via /militum/v1/nearby-cities (inline <script>). */
.militum-coords__panel {
  display: flex;
  flex-direction: column;
}
.militum-coords__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #1a1a1a;
}
/* minmax(0, 1fr), not 1fr: a plain 1fr column will not shrink below its
   content's min width, so a long offer title + the nowrap discount pushed the
   two columns wider than the panel and the page scrolled sideways at
   768-1024px. minmax(0, …) lets the column shrink and the title wrap. */
.militum-coords__list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 28px;
}
.militum-coords__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  line-height: normal;
  font-weight: 600;
  font-family: "Inter", sans-serif;
}
/* Whole row is one link to the offer's detail page; it carries the row layout
   so the flex gap is not applied twice. */
.militum-coords__link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.militum-coords__link:hover .militum-coords__city,
.militum-coords__link:focus-visible .militum-coords__city {
  text-decoration: underline;
}
.militum-coords__pin {
  color: #000;
  display: inline-flex;
  flex: 0 0 auto;
}
.militum-coords__km {
  font-weight: 400;
  color: #888;
  margin-left: 6px;
}
.militum-coords__city {
  font-weight: 600;
  color: #000;
  font-size: 16px;
}
.militum-coords__discount {
  margin-left: auto;
  font-size: 16px;
  color: #000;
  white-space: nowrap;
}
.militum-coords__state {
  grid-column: 1 / -1;
  color: #777;
  font-size: 14px;
}
/* Tablet: the list sits beside the map in ~60% of the width, which is too
   narrow for two columns (titles wrapped every word or two and the nowrap
   discount ran into the next column). One column reads like the desktop row. */
@media (max-width: 1024px) {
  .militum-coords__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}
@media (max-width: 640px) {
  .militum-coords__list {
    grid-template-columns: 1fr;
  }
  .militum-coords__item {
    gap: 8px;
    font-size: 16px;
  }
  .militum-coords__link {
    gap: 8px;
  }
}

/* login popup */
/* LOGIN POPUP */

.login-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 999999;
}

.login-popup-overlay.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-popup-box {
  position: relative;
  width: 500px;
  max-width: 95%;
  background: #fff;
  padding: 50px;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.login-popup-close {
  position: absolute;
  top: 20px;
  right: 25px;
  border: 0;
  background: transparent !important;
  padding: 0;
  font-family: inherit;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  color: #000 !important;
}
.login-popup-close:hover {
  color: #3d4a26;
}
.login-popup-close:focus-visible {
  outline: 2px solid #3d4a26;
  outline-offset: 2px;
  color: #3d4a26;
}

.login-popup-box h2 {
  margin: 0 0 35px;
  font-family: "Inter", sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #000;
  text-align: left;
}

/* remove extra width restriction */
.login-popup-box .wppb-user-forms {
  max-width: 100%;
  margin: 0;
}

/* forgot password spacing */
.login-popup-box #wppb-loginform {
  gap: 25px;
}

.popup-register-link {
  text-align: center;
  margin-top: 20px;
  font-size: 15px;
}

.popup-register-link a {
  color: #f26a21;
  font-weight: 600;
  text-decoration: none;
}

.popup-forgot-links {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 20px;
}

.popup-forgot-links a {
  font-size: 14px;
  color: #28a8d8;
  text-decoration: none;
}

.popup-register-link {
  text-align: center;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
  font-size: 15px;
  line-height: 22px;
}

.popup-register-link span {
  color: #555;
}

.popup-register-link a {
  color: #f26a21;
  font-weight: 600;
  text-decoration: none;
}

.popup-register-link {
  text-align: center;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
  font-size: 15px;
  line-height: 22px;
}

.popup-register-link span {
  color: #555;
}

.popup-register-link a {
  color: #f26a21;
  font-weight: 600;
  text-decoration: none;
}

/* Hide WPPB's built-in lost password link inside the popup */
.login-popup-box .wppb-form-field.lost_password {
  display: none;
}

/* ── Forgot Password (WPPB built-in link) ── */
.login-popup-box #wppb-loginform .lost-password {
  text-align: start;
  margin: 14px 0 0;
}

.login-popup-box #wppb-loginform .lost-password a {
  font-size: 14px;
  font-family: "Inter", sans-serif;
  color: #28a8d8;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.login-popup-box #wppb-loginform .lost-password a:hover {
  color: #1a8ab8;
  text-decoration: underline;
}

/* ── Register Link hover (missing from your current CSS) ── */
.popup-register-link a:hover {
  color: #d4581a;
  text-decoration: underline;
}
/* 10. Header — hide the custom login button for logged-in users (WP core adds body.logged-in). */
body.logged-in .ctm_login_btn {
  display: none !important;
}

/* Lock background scroll while the login popup is open. */
body.login-popup-open {
  overflow: hidden;
}

/* Restore the login trigger on tablet/mobile. The Elementor header marks the
   button elementor-hidden-tablet/mobile, so phone/tablet visitors otherwise have
   NO way to open the login popup. Re-show it (logged-out only); it reuses the
   same popup via the .open-login-popup class. Verify placement on a device. */
@media (max-width: 1024px) {
  body:not(.logged-in) .elementor-element.ctm_login_btn.elementor-hidden-tablet,
  body:not(.logged-in)
    .elementor-element.ctm_login_btn.elementor-hidden-mobile {
    display: block !important;
  }
}

/* Logged-in: JS repurposes the login button as a Logout button (.ctm_logout_btn).
   Reveal it (overrides the member-hide above) on every viewport. */
body.logged-in .ctm_login_btn.ctm_logout_btn {
  display: block !important;
}
@media (max-width: 1024px) {
  body.logged-in .elementor-element.ctm_logout_btn.elementor-hidden-tablet,
  body.logged-in .elementor-element.ctm_logout_btn.elementor-hidden-mobile {
    display: block !important;
  }
}

/* 10b. Header member CTA — "two elements, one slot". Mirrors the Joomla
   access-level setup that swapped "Bli medlem" for "Min profil": both elements
   exist in the template, exactly one is ever visible.

     .ctm_member_btn    "Bli medlem - gratis"   Elementor widget 61a1276 -> /bli-medlem/
     .ctm_profile_btn   "Min profil"            Elementor widget 496a494 -> /min-profil/

   Those two widgets are DESKTOP ONLY (elementor-hidden-tablet/-mobile), inside
   header template 9472. The mobile/tablet equivalents are nav menu items in
   menu 2403 (rendered by widget dd5d250 inside container bdb6f20), which is why
   the same two classes are also set on those menu items — one pair of rules
   then covers both breakpoints.

   body.logged-in is added by WP core get_body_class().

   The nav menu items are additionally dropped server-side by the
   wp_nav_menu_objects filter in functions.php; that filter is the authority for
   the menu. These rules are what handles the Elementor widgets, which have no
   server-side equivalent — per-widget display conditions are Elementor Pro, and
   only the free plugin is installed here. */
body.logged-in .ctm_member_btn {
  display: none !important;
}

body:not(.logged-in) .ctm_profile_btn {
  display: none !important;
}

/* 11. Header desktop search (.ctm_header_searchbar) — collapse the HFE "Input
   Box With Button" (layout icon_text) into a toggle: the magnifier reveals the
   input (slides out to the left), text searches, empty collapses. JS adds
   .js-toggle so the box stays usable without JS. Desktop-only widget. */
.ctm_header_searchbar.js-toggle .hfe-search-form__container {
  position: relative;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: unset;
}
.ctm_header_searchbar.js-toggle #clear-with-button {
  display: none;
}
.ctm_header_searchbar.js-toggle .hfe-search-form__input {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 8px;
  width: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  background: #fff;
  border-radius: 8px;
  box-sizing: border-box;
  pointer-events: none;
  transition:
    width 0.25s ease,
    opacity 0.2s ease,
    padding 0.2s ease;
}
.ctm_header_searchbar.js-toggle.is-open .hfe-search-form__input {
  width: 240px;
  padding: 10px 12px;
  border: 1px solid #ccc;
  opacity: 1;
  pointer-events: auto;
  z-index: 10;
  border-radius: 6px;
}
.ctm_header_searchbar.js-toggle .hfe-search-submit {
  cursor: pointer;
  min-width: auto !important;
}

/* =========================
   TABLET
========================= */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .login-popup-box {
    width: 600px;
    padding: 40px;
  }

  .login-popup-box h2 {
    font-size: 28px;
    margin-bottom: 28px;
  }

  .login-popup-close {
    top: 18px;
    right: 20px;
    font-size: 28px;
  }

  .login-popup-box #wppb-loginform {
    gap: 18px;
  }

  .login-popup-box label {
    font-size: 15px;
    line-height: 20px;
  }

  .login-popup-box input[type="text"],
  .login-popup-box input[type="password"],
  .login-popup-box input[type="email"] {
    height: 50px !important;
    font-size: 15px;
  }

  .login-popup-box input[type="submit"] {
    font-size: 15px;
  }
}

/* =========================
   MOBILE
========================= */
@media screen and (max-width: 768px) {
  .login-popup-box {
    width: calc(100% - 30px);
    max-width: 450px;
    padding: 24px 20px;
    border-radius: 6px;
  }

  .login-popup-box h2 {
    font-size: 24px;
    margin-bottom: 22px;
  }

  .login-popup-close {
    top: 12px;
    right: 16px;
    font-size: 24px;
  }

  .login-popup-box #wppb-loginform {
    gap: 16px;
  }

  .login-popup-box label {
    font-size: 14px;
    line-height: 18px;
  }

  .login-popup-box input[type="text"],
  .login-popup-box input[type="password"],
  .login-popup-box input[type="email"] {
    height: 44px !important;
    font-size: 14px !important;
    padding: 0 12px;
  }

  .login-popup-box input[type="submit"] {
    width: 100% !important;
    font-size: 14px !important;
  }

  /* remember me row */
  .login-popup-box .login-remember {
    font-size: 14px;
  }

  /* forgot password links */
  .login-popup-box .wppb-form-field a {
    font-size: 14px;
  }
  #wppb-loginform p.form-submit {
    margin: 0px !important;
  }
  .ctm_header_searchbar.js-toggle.is-open .hfe-search-form__input {
    width: 200px;
    padding: 8px 10px;
  }
}

/* 12. [militum_selected_ads] — premium-tier (Platina/Guld) featured-offers hero
   carousel. Flow/flex layout: the banner photo + dark gradient are layered into a
   single background, the brand sits at the top and the title/CTA at the bottom.
   Only the corner ribbon and the slider arrows use position:absolute. The slider
   JS (slide/autoplay/swipe) stays inline in the shortcode. */
.militum-sads {
  position: relative; /* anchor for the slider arrows */
  max-width: 1170px;
  margin: 0 0 60px;
  box-sizing: border-box;
}
.militum-sads__viewport {
  overflow: hidden;
  border-radius: 14px;
}
.militum-sads__track {
  display: flex;
  transition: transform 0.5s ease;
}
.militum-sads__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  height: var(--msa-h, 360px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 50px 30px;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #1d3557;
  background-size: cover;
  background-position: center;
}
.militum-sads__slide--ph {
  background-image: linear-gradient(135deg, #1d3557, #3b6e9a);
}
.militum-sads__ribbon {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  /* Image-based gold corner triangle (Figma node 619:893) — swap the URL for a custom image. */
  background: top right / 100% 100% no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='sadsRibbon' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f7c850'/%3E%3Cstop offset='0.55' stop-color='%23eaad2a'/%3E%3Cstop offset='1' stop-color='%23d6950c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0H150V150Z' fill='url(%23sadsRibbon)'/%3E%3C/svg%3E");
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));
}
/* Discount text: rotated 45deg onto the triangle's centre, dark green (Figma node 619:895). */
.militum-sads__ribbon i {
  position: absolute;
  top: 50px; /* centroid of a 150px corner triangle = (100, 50) */
  left: 100px;
  transform: translate(-50%, -50%) rotate(45deg);
  transform-origin: center;
  white-space: nowrap;
  font-style: normal;
  font-family: "Open Sans", "Inter", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: #303c19;
}
.militum-sads_header-wrap {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  max-width: 80%;
}

.militum-sads__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 8px;
  padding: 5px 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.militum-sads__logo {
  height: 30px !important;
  width: auto;
  max-width: 120px !important;
  object-fit: contain;
  display: block;
}
.militum-sads__content {
  margin-top: auto; /* flexbox pushes the title/CTA to the bottom */
  max-width: 62%;
}
.militum-sads__title {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 46px;
}
.militum-sads__title a {
  color: #fff;
  text-decoration: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.militum-sads__cta {
  display: inline-block;
  padding: 14px 44px;
  border-radius: 8px;
  background: #161a1699 !important;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none !important;
  transition:
    background 0.15s,
    color 0.15s;
  line-height: 22px;
  border: 1px solid #fff;
}
.militum-sads__cta:hover {
  background: #303c19 !important;
  color: #fff !important;
  border-color: #303c19 !important;
}
.militum-sads__nav {
  position: absolute;
  top: calc(var(--msa-h, 360px) / 2);
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  padding: 0;
  background: transparent !important;
  border: none !important;
  outline: none !important;
}
.militum-sads__nav--prev {
  left: -25px;
}
.militum-sads__nav--next {
  right: -25px;
}
.militum-sads__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 30px;
}
.militum-sads__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f6f5f4 !important;
  cursor: pointer;
  padding: 0;
  transition:
    background 0.15s,
    transform 0.15s;
  border: 1px solid #cacaca;
}
.militum-sads__dot.is-active {
  background: #303c19 !important;
}
@media (max-width: 1024px) {
  .militum-sads__title {
    font-size: 26px;
    line-height: normal;
  }
  .militum-sads_header-wrap {
    gap: 20px;
  }
  .militum-sads__slide {
    padding: 20px 40px 30px;
  }
  .militum-sads {
    margin: 0 0 50px;
  }
  .militum-sads__nav,
  .militum-sads__nav > svg {
    width: 40px;
    height: 40px;
  }
  .militum-sads__nav--prev {
    left: -20px;
  }
  .militum-sads__nav--next {
    right: -20px;
  }
  .militum-sads__ribbon {
    top: -1px;
    right: -1px;
    width: 140px;
    height: 140px;
  }
  .militum-sads__dots {
    margin-top: 24px;
  }
  .militum-sads__dot {
    width: 14px;
    height: 14px;
  }
  .militum-sads__cta {
    padding: 12px 34px;
  }
}
@media (max-width: 767px) {
  .militum-sads {
    margin: 0 0 40px;
  }
  .militum-sads__content {
    max-width: 92%;
  }
  .militum-sads__title {
    font-size: 19px;
  }
  .militum-sads__nav,
  .militum-sads__nav > svg {
    width: 36px;
    height: 36px;
  }
  .militum-sads__ribbon {
    width: 110px;
    height: 110px;
  }
  .militum-sads__ribbon i {
    top: 37px;
    left: 73px;
    font-size: 20px;
  }
  .militum-sads__logo {
    height: 22px;
  }
  .militum-sads_header-wrap {
    gap: 20px;
  }
  .militum-sads__slide {
    padding: 20px 30px 30px;
    height: 260px;
  }
  .militum-sads__cta {
    padding: 10px 24px;
    font-size: 14px;
  }
  .militum-sads__nav {
    top: calc(260px / 2);
  }
  .militum-sads__dots {
    margin-top: 18px;
  }
  .militum-sads__dot {
    width: 12px;
    height: 12px;
  }
  .militum-sads_header-wrap {
    max-width: 100%;
  }
  .militum-sads__logo {
    height: 28px !important;
    max-width: 100px !important;
  }
}

@media (max-width: 575px) {
  .militum-sads__slide {
    padding: 18px 24px 24px;
  }
}

/* ===== DESKTOP ONLY ===== */
@media (min-width: 1025px) {
  .hfe-nav-menu .sub-menu .sub-menu {
    left: calc(100% + 10px) !important;
    margin-top: 0px !important;
  }
  .sub-menu {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    margin-top: 10px !important;
  }
}

/* ===== MOBILE ONLY ===== */
@media (max-width: 1024px) {
  /* Fix sideways scroll / blank strip on the right on phones. While the
     hamburger is closed, HFE only hides the menu (visibility:hidden; height:0)
     but still lays it out inside the 50px header widget (dd5d250), so the
     submenu arrows stick ~57px past the screen and widen the page. Clip it
     while closed; once the toggle gets .hfe-active-menu it is untouched. */
  .hfe-nav-menu__toggle:not(.hfe-active-menu) + .hfe-nav-menu__layout-horizontal,
  .hfe-nav-menu__toggle:not(.hfe-active-menu) + .hfe-nav-menu__layout-vertical {
    overflow: hidden;
  }

  /* Fix empty space - hide closed menus */
  .hfe-nav-menu .sub-menu:not(.sub-menu-open) {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  .hfe-nav-menu .sub-menu.sub-menu-open {
    display: block !important;
    height: auto !important;
  }

  /* LEVEL 1 sub-menu items (e.g. Bil & Fordon) */
  .hfe-nav-menu .sub-menu > li > a,
  .hfe-nav-menu .sub-menu > li > .hfe-has-submenu-container > a {
    padding-left: 40px !important;
    font-size: 15px !important;
    color: #333333 !important;
    background-color: #f5f5f5 !important;
  }

  /* LEVEL 2 sub-sub-menu items (e.g. Båt, Cykel) */
  .hfe-nav-menu .sub-menu .sub-menu > li > a {
    padding-left: 65px !important;
    font-size: 15px !important;
    color: #333333 !important;
    background-color: #f5f5f5 !important;
  }

  .hfe-nav-menu .hfe-has-submenu .sub-menu {
    padding: 0px !important;
  }

  /* Fix nested position */
  .hfe-nav-menu .sub-menu .sub-menu {
    left: 0 !important;
    margin-top: 0px !important;
    width: 100% !important;
  }
}

/* "Exempel på förmåner nära dig" — on home 2634 (container 42310d2, columns
   9f71719 + 5871347) and on Alla erbjudanden 8509 (columns 94623a0 + f615509):
   Elementor gives the two columns 40% (map) + 65% (list) plus a 20px
   gap, i.e. 105% + 20px, so the list column ran off the right edge from 768px
   up to ~1300px (at 1280px the "65% rabatt" values were cut off) and the page
   could scroll sideways. Fit it into what is left. The proper home for this is
   the container's Width setting in the Elementor editor; this mirrors
   Elementor's own --width variable so it stays in sync if that is changed. */
@media (min-width: 768px) {
  .elementor-2634 .elementor-element.elementor-element-5871347.e-con,
  .elementor-8509 .elementor-element.elementor-element-f615509.e-con {
    --width: calc(60% - 20px);
  }
}

/* ==========================================================================
   1. GLOBAL & BASE TYPOGRAPHY
   ========================================================================== */

/* wppb forms — shared styling for Bli medlem (#wppb-register-user)
   and Min profil (#wppb-edit-user). Both forms carry the class
   .wppb-user-forms, so we scope everything to that instead of one ID. */
.wppb-user-forms {
  font-family: "Inter", sans-serif;
  max-width: 600px;
  margin: 0 auto;
  color: #000000;
}

.wppb-user-forms label {
  width: 100% !important;
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  line-height: 22px;
  margin-bottom: 10px;
}

/* Base field width/float for some layouts */
.wppb-form-field input[type="text"],
.wppb-form-field input[type="number"],
.wppb-form-field input[type="email"],
.wppb-form-field input[type="url"],
.wppb-form-field input[type="search"],
.wppb-form-field select,
.wppb-form-field textarea,
.wppb-form-field .wppb-password-field-container,
.wppb-checkboxes,
.wppb-radios,
#wppb-login-wrap .login-username input,
#wppb-login-wrap .login-auth input {
  width: 69.9%;
  float: left;
}

/* Read-only notice text & delimiters */
.wppb-user-forms .wppb-form-field p {
  width: 100%;
  display: block;
  margin: 0 0 8px 0;
  font-size: 14px;
  line-height: 20px;
  color: #6b6b6b;
}

#wppb-edit-user .wppb-form-field p {
  color: #000000;
}

.wppb-user-forms .wppb-description-delimiter {
  display: block;
  width: 100%;
  font-size: 13px;
  color: #8a8a8a;
  margin-top: 4px;
}

/* ==========================================================================
   2. GRID LAYOUT & COLUMNS
   ========================================================================== */

.wppb-user-forms > ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 30px;
  list-style: none;
  padding: 0;
  margin: 0 !important;
  justify-items: stretch !important;
}

.wppb-user-forms > ul > li {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.wppb-send-credentials-checkbox {
  display: none;
}

/* Left Column */
#wppb-form-element-20 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding: 0;
} /* För-efternamn */
#wppb-form-element-12 {
  grid-column: 1;
  grid-row: 2;
} /* Lösenord */
#wppb-form-element-8 {
  grid-column: 1;
  grid-row: 3;
} /* E-postadress */
#wppb-form-element-14 {
  grid-column: 1;
  grid-row: 4;
} /* Vapenslag / Organisation */
#wppb-form-element-15 {
  grid-column: 1;
  grid-row: 5;
} /* Välj län */

/* Right Column */
#wppb-form-element-2 {
  grid-column: 2;
  grid-row: 1;
} /* Användarnamn */
#wppb-form-element-13 {
  grid-column: 2;
  grid-row: 2;
} /* Bekräfta lösenord */
#wppb-form-element-19 {
  grid-column: 2;
  grid-row: 4;
} /* Aktiveringskod */
#wppb-form-element-17 {
  grid-column: 2;
  grid-row: 5;
} /* Ort */

/* Full Width Elements */
#wppb-form-element-18 {
  grid-column: 1 / -1 !important;
  margin-top: -10px !important;
  border-top: 1px solid #c3c3c3 !important;
  padding-top: 30px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
}
#wppb-form-element-18 > label {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   3. INPUTS & FIELDS
   ========================================================================== */

.wppb-user-forms
  input:not([type="button"]):not([type="reset"]):not([type="submit"]):not(
    [type="file"]
  ):not([value="agree"]),
.wppb-user-forms select,
.wppb-user-forms textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  width: 100% !important;
  border-radius: 6px !important;
  padding-left: 16px;
  box-sizing: border-box;
}

.wppb-user-forms input[type="text"],
.wppb-user-forms input[type="password"],
.wppb-user-forms input[type="email"],
.wppb-user-forms select {
  width: 100%;
  height: 60px;
  background: #ffffff;
  border: 1px solid #d5d5d5;
  border-radius: 6px !important;
  box-sizing: border-box;
  padding: 0 16px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #000000;
  outline: none;
  transition: border-color 0.3s ease;
}

/* Custom Select Dropdown Arrow */
.wppb-user-forms select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23134563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

/* Locked/Disabled fields (e.g. Användarnamn on edit-profile) */
.wppb-user-forms input:disabled,
.wppb-user-forms input[readonly] {
  background: #f2f2f2;
  color: #777777;
  cursor: not-allowed;
}

/* Password field containers */
#wppb-form-element-12 .wppb-password-group .wppb-password-field-container,
#wppb-form-element-13 .wppb-password-field-container {
  width: 100% !important;
}

/* ==========================================================================
   4. RADIO BUTTONS (CUSTOM STYLING)
   ========================================================================== */

.wppb-user-forms .wppb-radios {
  position: relative !important;
  width: 200px !important;
  height: 60px !important;
  background: #d9d9d9 !important;
  border-radius: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}

.wppb-user-forms .wppb-radios li {
  position: absolute !important;
  top: 5px !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Target first and second radio items specifically so they don't overlap */
.wppb-user-forms .wppb-radios li:nth-child(1) {
  left: 8px !important;
  width: 90px !important;
}
.wppb-user-forms .wppb-radios li:nth-child(2) {
  left: 106px !important;
  width: 86px !important;
}

.wppb-user-forms .wppb-radios input[type="radio"] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wppb-user-forms .wppb-radios label.wppb-rc-value {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #000000 !important;
  border-radius: 6px !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
  background: transparent;
  transition: background 0.2s ease-in-out;
}

/* Highlight Selected Radio */
.wppb-user-forms
  .wppb-radios
  input[type="radio"]:checked
  + label.wppb-rc-value {
  background: #ffffff !important;
}

/* ==========================================================================
   5. SUBMIT BUTTON
   ========================================================================== */

.wppb-user-forms .form-submit {
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
  width: 100% !important;
}

.wppb-user-forms .form-submit input[type="submit"] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 170px;
  height: 50px;
  background: #303c19;
  border: 1px solid #303c19;
  border-radius: 8px;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

/* ==========================================================================
   6. PROFILE EDIT FORM SPECIFIC OVERRIDES (#wppb-edit-user)
   ========================================================================== */

/* Min profil (#wppb-edit-user) only — override the shared row4/row5 layout.
   Vapenslag/Organisation, Ort and Användarvillkor are not part of this form
   (mu-plugins/militum-pb-edit-profile-fields.php drops them), so the last
   pair moves up into row 4 — left on row 5 it would leave row 4 empty and
   the grid would still count its 30px row-gap. */
#wppb-edit-user #wppb-form-element-19 {
  grid-column: 1;
  grid-row: 4;
} /* Aktiveringskod — left */

#wppb-edit-user #wppb-form-element-15 {
  grid-column: 2;
  grid-row: 4;
} /* Välj län — beside it */

/* "Avbryt" — the way back to the read-only profile. Printed into Profile
   Builder's own .form-submit row by mu-plugins/militum-profile-view.php, on
   the `wppb_form_after_submit_button` hook, so the form markup is untouched.

   It wears the ghost variant of the button the register form uses
   (#wppb-register-user input#register): the same box as the submit button
   beside it, outline instead of fill, so the pair reads primary + secondary.

   flex-wrap/gap are added to #wppb-edit-user's row only — the register form's
   single-button .form-submit keeps the §5 declaration exactly as it was. */
#wppb-edit-user .form-submit {
  flex-wrap: wrap;
  gap: 16px;
}

#wppb-edit-user .militum-profile-cancel {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 170px;
  height: 50px;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid #303c19;
  border-radius: 8px;
  color: #303c19;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

#wppb-edit-user .militum-profile-cancel:hover,
#wppb-edit-user .militum-profile-cancel:focus {
  background: #303c19;
  color: #ffffff;
  text-decoration: none;
}

#wppb-edit-user .militum-profile-cancel:focus-visible {
  outline: 2px solid #303c19;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #wppb-edit-user .militum-profile-cancel {
    transition: none;
  }
}

/* Note under the button row: how to change Vapenslag/Organisation, which the
   edit form no longer carries (mu-plugins/militum-pb-edit-profile-fields.php
   drops the field and prints this line on `wppb_after_edit_profile_fields`).

   It is printed after </form>, so it is a sibling of .wppb-user-forms rather
   than a descendant and inherits none of its box — the same max-width and auto
   margins are repeated here so the note's left edge lines up with the fields
   and the buttons above it. Nothing inside .form-submit is touched. */
.militum-profile-note {
  max-width: 600px;
  margin: 20px auto 0;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 22px;
  color: #000000;
}

.militum-profile-note a {
  color: inherit;
  text-decoration: underline;
}

.militum-profile-note a:hover,
.militum-profile-note a:focus {
  color: #303c19;
}

/* ==========================================================================
   7. RESPONSIVE DESIGN
   ========================================================================== */

/* TABLET */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .wppb-user-forms label {
    font-size: 15px;
    margin-bottom: 6px;
  }
  .wppb-user-forms input[type="text"],
  .wppb-user-forms input[type="password"],
  .wppb-user-forms input[type="email"],
  .wppb-user-forms select {
    height: 50px;
    width: 100%;
    font-size: 15px;
  }
  .wppb-user-forms .wppb-radios {
    height: 52px !important;
  }
  .wppb-user-forms .wppb-radios li {
    height: 42px !important;
    top: 5px !important;
  }
  .wppb-user-forms .wppb-radios label.wppb-rc-value {
    font-size: 15px !important;
  }
  .wppb-user-forms > ul {
    row-gap: 18px;
    column-gap: 24px;
  }
}

/* MOBILE */
@media screen and (max-width: 768px) {
  .wppb-user-forms {
    padding: 0 15px;
  }
  .wppb-user-forms > ul {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
  .wppb-user-forms input[type="text"],
  .wppb-user-forms input[type="password"],
  .wppb-user-forms input[type="email"],
  .wppb-user-forms select {
    height: 44px;
    font-size: 14px;
  }
  .wppb-user-forms label {
    margin-bottom: 4px;
    font-size: 14px;
  }
  .wppb-user-forms .wppb-radios {
    width: 180px !important;
    height: 50px !important;
  }
  .wppb-user-forms .wppb-radios li {
    top: 3px !important;
    height: 44px !important;
  }
  .wppb-user-forms .wppb-radios li:nth-child(1) {
    left: 3px !important;
    width: 86px !important;
  }
  .wppb-user-forms .wppb-radios li:nth-child(2) {
    left: 91px !important;
    width: 86px !important;
  }
  .wppb-user-forms .wppb-radios label.wppb-rc-value {
    font-size: 14px !important;
  }

  /* Force single column order on Mobile */
  #wppb-form-element-20,
  #wppb-form-element-12,
  #wppb-form-element-8,
  #wppb-form-element-14,
  #wppb-form-element-15,
  #wppb-form-element-2,
  #wppb-form-element-13,
  #wppb-form-element-19,
  #wppb-form-element-17,
  #wppb-form-element-18 {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  #wppb-form-element-20 {
    order: 1;
  }
  #wppb-form-element-2 {
    order: 2;
  }
  #wppb-form-element-8 {
    order: 3;
  }
  #wppb-form-element-12 {
    order: 4;
  }
  #wppb-form-element-13 {
    order: 5;
  }
  #wppb-form-element-14 {
    order: 6;
  }
  #wppb-form-element-19 {
    order: 7;
  }
  #wppb-form-element-15 {
    order: 8;
  }
  #wppb-form-element-17 {
    order: 9;
  }

  #wppb-form-element-18 {
    order: 10;
    margin-top: 10px !important;
  }

  .wppb-user-forms .form-submit input[type="submit"] {
    width: 100%;
  }

  /* Avbryt stacks under the full-width submit button rather than being
     squeezed beside it — .form-submit already wraps (§6). */
  #wppb-edit-user .militum-profile-cancel {
    width: 100%;
  }
}

.militum-theme-toggle:focus {
  background-color: white;
  color: #303c19;
}

/* ==========================================================================
   8. DARK MODE
   Moved to assets/css/militum-dark.css. That file is now an unconditional dark
   stylesheet; whether it applies is decided by the <link media> attribute that
   functions.php sets from the militum_theme cookie (light / dark / system).
   A dark rule added here would be pinned to the OS setting and ignore the
   toggle, so put it in militum-dark.css instead.
   ========================================================================== */

/* custom css for mobile screen */
.ctm_login_btn a{
	padding: 10px 8px 10px 8px !important;
}