/* panel.css */

/* —————————————————————————————————————————————————————————
   PANEL: BILDE + TEKST
—————————————————————————————————————————————————————————*/
.et_pb_section.panel {
padding: var(--spacing-section);
}

@media only screen and (max-width: 981px) {
    .et_pb_section.panel {
        padding: var(--spacing-section-mobile);
    }    
}

/* Seksjonen rundt panelet har nå klassen .tekst-bilde-panel slik
   at vi kan styre marg og padding uavhengig av andre Divi seksjoner */
.et_pb_section.tekst-bilde-panel {
  padding: var(--spacing-section);
}
/* Nytt: Tekst panel seksjon spacing og containerbredde */
.et_pb_section.tekst-panel { padding: var(--spacing-section); }
/* Desktop: reduce vertical spacing specifically for Tekst panel */
@media (min-width: 981px) {
  .et_pb_section.tekst-panel { padding-top: 36px; padding-bottom: 20px; }
}
.tekst-panel .et_pb_row { max-width: var(--container-narrow); width: calc(100% - var(--container-hpad-desktop)); margin: 0 auto; padding-left: 0 !important; padding-right: 0 !important; }
/* Remove Divi default column side padding for clean alignment */
.tekst-panel .et_pb_column { padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 980px){ .tekst-panel .et_pb_row { width: calc(100% - var(--container-hpad-tablet)); } }
@media (max-width: 768px){ .tekst-panel .et_pb_row { width: calc(100% - var(--container-hpad-mobile)); } }

/* Shortcode panel: match Tekst panel container and spacing */
.et_pb_section.shortcode-panel { padding: var(--spacing-section); }
@media (min-width: 981px) {
  /* Give shortcode panel comfortable vertical breathing room */
  .et_pb_section.shortcode-panel { padding-top: 64px; padding-bottom: 48px; }
}
.shortcode-panel .et_pb_row { max-width: var(--container-narrow); width: calc(100% - var(--container-hpad-desktop)); margin: 0 auto; padding-left: 0 !important; padding-right: 0 !important; }
.shortcode-panel .et_pb_column { padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 980px){ .shortcode-panel .et_pb_row { width: calc(100% - var(--container-hpad-tablet)); } }
@media (max-width: 768px){ .shortcode-panel .et_pb_row { width: calc(100% - var(--container-hpad-mobile)); } }
/* Make shortcode panel visually identical to Tekst panel */
.shortcode-panel .panel { background-color: transparent; color: inherit; padding: 0; }
.shortcode-panel .panel.panel-simple { padding-top: 24px; padding-bottom: 24px; }
@media (max-width: 767px){ .shortcode-panel .panel.panel-simple { padding-top: 12px; padding-bottom: 12px; } }
.shortcode-panel .panel-tekst { padding: 0; }
/* Order form: use full available width inside container */
.shortcode-panel .panel-tekst .bx-order-form { max-width: none; width: 100%; margin-left: 0; margin-right: 0; }
/* Also cover when shortcode is rendered inside Tekst panel content */
.tekst-panel .panel-tekst .bx-order-form { max-width: none; width: 100%; }

/* BX Order Form – inherit theme colors/typography in panels */
.shortcode-panel .bx-order-form,
.tekst-panel .bx-order-form {
  /* Map plugin vars to theme or sensible defaults */
  --bx-primary-color: var(--color-primary, #000);
  --bx-card-color: var(--color-white, #fff);
  --bx-background-color: transparent;
  /* 50% tint of primary for hover/active states (keeps text readable) */
  --bx-primary-tint-50: color-mix(in srgb, var(--bx-primary-color) 50%, transparent);
  color: inherit;
  font-family: var(--font-body, sans-serif);
}
.shortcode-panel .bx-order-form h1,
.shortcode-panel .bx-order-form h2,
.shortcode-panel .bx-order-form h3,
.tekst-panel .bx-order-form h1,
.tekst-panel .bx-order-form h2,
.tekst-panel .bx-order-form h3 {
  color: #000;
  font-family: var(--font-display, inherit);
  font-weight: 400; /* normal, not bold */
  margin: 0 0 16px; /* add more breathing room */
}
/* Normalize Step headings to theme H3 scale */
.shortcode-panel .bx-order-form h2,
.shortcode-panel .bx-order-form h3,
.tekst-panel .bx-order-form h2,
.tekst-panel .bx-order-form h3 { font-size: 24px; line-height: 150%; }

/* Increase vertical spacing between logical sections inside the order form */
.shortcode-panel .bx-order-form .bx-step,
.tekst-panel .bx-order-form .bx-step { margin-bottom: 48px; }
.shortcode-panel .bx-order-form h3,
.tekst-panel .bx-order-form h3 { margin-bottom: 16px; }
.shortcode-panel .bx-order-form .bx-price-box,
.tekst-panel .bx-order-form .bx-price-box { margin: 28px 0; }
.shortcode-panel .bx-order-form .bx-price-vat,
.tekst-panel .bx-order-form .bx-price-vat { text-align: center; margin: 0 0 8px 0; font-size: 14px; font-weight: 400; color: inherit; font-family: var(--font-body, inherit); }

/* Normalize unit price style to match theme */
.shortcode-panel .bx-order-form .bx-price-unit,
.tekst-panel .bx-order-form .bx-price-unit { font-family: var(--font-body, inherit); font-size: 14px; font-weight: 400; color: inherit; text-align: center; }
.shortcode-panel .bx-order-form .bx-customization,
.tekst-panel .bx-order-form .bx-customization { margin: 28px 0; }
.shortcode-panel .bx-order-form .bx-button-container,
.tekst-panel .bx-order-form .bx-button-container { margin-top: 36px; }

/* Extra space before the "Antall" section heading */
.shortcode-panel .bx-order-form .bx-sizes + h3,
.tekst-panel .bx-order-form .bx-sizes + h3 { margin-top: 40px; }

/* Sizes grid – simple border when not active */
.shortcode-panel .bx-order-form .bx-sizes,
.tekst-panel .bx-order-form .bx-sizes {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* max 4 per row on desktop */
  gap: 12px;
}
@media (max-width: 980px) {
  .shortcode-panel .bx-order-form .bx-sizes,
  .tekst-panel .bx-order-form .bx-sizes {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .shortcode-panel .bx-order-form .bx-sizes,
  .tekst-panel .bx-order-form .bx-sizes {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .shortcode-panel .bx-order-form .bx-sizes,
  .tekst-panel .bx-order-form .bx-sizes {
    grid-template-columns: 1fr;
  }
}
.shortcode-panel .bx-order-form .bx-size,
.tekst-panel .bx-order-form .bx-size {
  border: 1px solid var(--bx-sizes-border, #e0e0e0); /* allow plugin overrides */
  background: var(--bx-sizes-bg, #fff);
  color: var(--bx-sizes-text, inherit);
  border-radius: var(--bx-sizes-radius, 0);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px; /* a bit taller */
  min-height: 52px;
  cursor: pointer;
  text-align: left;
}
.shortcode-panel .bx-order-form .bx-size input[type="radio"],
.tekst-panel .bx-order-form .bx-size input[type="radio"] {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  accent-color: var(--bx-primary-color);
}
.shortcode-panel .bx-order-form .bx-size input[type="radio"],
.tekst-panel .bx-order-form .bx-size input[type="radio"] { flex: 0 0 auto; }
.shortcode-panel .bx-order-form .bx-size .bx-size-label,
.tekst-panel .bx-order-form .bx-size .bx-size-label { flex: 1 1 auto; }
.shortcode-panel .bx-order-form .bx-size:hover,
.tekst-panel .bx-order-form .bx-size:hover {
  border-color: var(--bx-sizes-hover-border, #d0d0d0);
  background: var(--bx-sizes-hover-bg, #f5f5f5);
  color: var(--bx-sizes-hover-text, inherit);
}
.shortcode-panel .bx-order-form .bx-size.is-active,
.tekst-panel .bx-order-form .bx-size.is-active {
  border-color: var(--bx-sizes-active-border, var(--bx-primary-color, #d0d0d0));
  background: var(--bx-sizes-active-bg, #f5f5f5);
  color: var(--bx-sizes-active-text, inherit);
}

/* Checkboxes – simple border when not active, theme color when checked */
.shortcode-panel .bx-order-form input[type="checkbox"],
.tekst-panel .bx-order-form input[type="checkbox"] {
  accent-color: var(--bx-primary-color);
  background: #fff;
  border-radius: 4px; /* for browsers that honor it */
  /* Draw a subtle border even when unchecked */
  outline: 1px solid #e0e0e0;
  outline-offset: -1px;
}
.shortcode-panel .bx-order-form input[type="checkbox"]:hover,
.tekst-panel .bx-order-form input[type="checkbox"]:hover {
  outline-color: #d0d0d0;
}
.shortcode-panel .bx-order-form input[type="checkbox"]:checked,
.tekst-panel .bx-order-form input[type="checkbox"]:checked {
  outline-color: var(--bx-primary-color);
}
.shortcode-panel .bx-order-form input[type="checkbox"]:focus-visible,
.tekst-panel .bx-order-form input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(0,0,0,0.12);
  outline-color: var(--bx-primary-color);
  outline-offset: 2px;
}

/* Prevent inputs from overflowing form container */
.shortcode-panel .bx-order-form input,
.shortcode-panel .bx-order-form select,
.shortcode-panel .bx-order-form textarea,
.tekst-panel .bx-order-form input,
.tekst-panel .bx-order-form select,
.tekst-panel .bx-order-form textarea {
  box-sizing: border-box;
  max-width: 100%;
}
/* Explicitly fix quantity input overflow */
.shortcode-panel .bx-order-form .bx-quantity,
.tekst-panel .bx-order-form .bx-quantity {
  box-sizing: border-box;
  width: 100%;
  display: block;
}

/* Tekst panel should be transparent and inherit surrounding text color */
.tekst-panel .panel { background-color: transparent; color: inherit; padding: 0; }
.tekst-panel .panel.panel-simple { padding-top: 24px; padding-bottom: 24px; }
@media (max-width: 767px){ .tekst-panel .panel.panel-simple { padding-top: 12px; padding-bottom: 12px; } }
.tekst-panel .panel-tekst h2,
.tekst-panel .panel-tekst .panel-beskrivelse { color: inherit; }
.tekst-panel .panel-tekst { padding: 0; }
/* Align tekst-og-bilde panel with site container width */
.tekst-bilde-panel .et_pb_row { max-width: var(--container-narrow); width: calc(100% - var(--container-hpad-desktop)); margin: 0 auto; padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 980px){ .tekst-bilde-panel .et_pb_row { width: calc(100% - var(--container-hpad-tablet)); } }
@media (max-width: 768px){ .tekst-bilde-panel .et_pb_row { width: calc(100% - var(--container-hpad-mobile)); } }

/* Add a bit more horizontal breathing room inside the panel on larger viewports */
@media (min-width: 981px) {
  .tekst-bilde-panel .panel { padding-left: calc(var(--spacing-panel-padding) * 1.5); padding-right: calc(var(--spacing-panel-padding) * 1.5); }
}
@media (min-width: 769px) and (max-width: 980px) {
  .tekst-bilde-panel .panel { padding-left: calc(var(--spacing-panel-padding) * 1.25); padding-right: calc(var(--spacing-panel-padding) * 1.25); }
}

@media only screen and (max-width: 768px) {
  .et_pb_section.tekst-bilde-panel { padding: 40px 0; }
}
/* Rely on global mobile section padding */

/* Uniform spacing handled globally */

.panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  padding: var(--spacing-panel-padding);
  background-color: var(--panel-default-bg);
  color: var(--panel-text-color);
  box-sizing: border-box;
}

/* Full-bleed background for Tekst & bilde: color on section, panel transparent */
.tekst-bilde-panel .panel { background-color: transparent; }

.panel-innhold {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  gap: var(--spacing-panel-gap);
}

/* Reduce inter-column gap for Tekst & bilde so it doesn't feel spaced out */
@media (min-width: 981px) {
  .tekst-bilde-panel .panel-innhold { gap: 32px; }
}
@media (min-width: 769px) and (max-width: 980px) {
  .tekst-bilde-panel .panel-innhold { gap: 24px; }
}

/* Keep one row for Tekst & bilde on tablet/desktop and allow shrink */
@media (min-width: 769px) {
  .tekst-bilde-panel .panel-innhold { flex-wrap: nowrap; align-items: center; }
  .tekst-bilde-panel .panel-bilde,
  .tekst-bilde-panel .panel-tekst { flex: 1 1 0; max-width: none; min-width: 0; }
}

@media (max-width: 768px) {
  .panel-innhold {
    flex-wrap: wrap !important;
  }
}
.panel-bilde,
.panel-tekst {
  flex: 1 1 calc(50% - var(--spacing-panel-gap) / 2);
  max-width: calc(50% - var(--spacing-panel-gap) / 2);
  box-sizing: border-box;
}

/* Add padding around the image container to mirror the text block */
.panel-bilde {
  padding: 0 var(--spacing-panel-padding);
}

/* ----------------------------------------------------------------
   Desktop/Tablet (≥769px): .panel-bilde container has fixed height 
   and <img> covers it via object-fit
---------------------------------------------------------------- */
@media (min-width: 769px) {
  .panel-bilde {
    position: relative;    /* create positioning context for img */
    width: 100%;
    min-height: 300px;     /* base height; grows with taller text */
    overflow: hidden;  /* hide overflow if image is larger */
  }

  .panel-bilde img {
    position: absolute;    /* fill the entire .panel-bilde */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;     /* scale/crop to fully cover container */
    object-position: center;
    
  }
}

/* Circle image variant for Tekst & bilde (match hero promo style) */
.tekst-bilde-panel .panel-bilde { position: static; min-height: auto; overflow: visible; display: flex; justify-content: center; padding: 0; }
.tekst-bilde-panel .panel-bilde img { position: static; width: 100%; max-width: 260px; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; display: block; }
@media (max-width: 1200px){ .tekst-bilde-panel .panel-bilde img { max-width: 240px; } }
@media (max-width: 767px){ .tekst-bilde-panel .panel-bilde img { max-width: 220px; } }

/* ----------------------------------------------------------------
   Mobile (≤768px): reset .panel-bilde to auto height 
   so image flows naturally
---------------------------------------------------------------- */
@media (max-width: 768px) {
  .panel-bilde {
    position: static;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .panel-bilde img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block; /* remove baseline gap under images */
    
  }
}

.panel-tekst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--spacing-panel-padding);
}

/* ————————————————————————————————————————————————
   Simple variant: logo/image left, text right
   - No forced fill, no circle, no fixed min-height
   - Image keeps natural aspect, fits within sensible bounds
———————————————————————————————————————————————— */
.panel.panel-simple .panel-bilde,
.panel.panel-simple .panel-tekst {
  flex: 0 0 auto;
  max-width: none;
}
.panel.panel-simple .panel-bilde {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* remove inner padding to avoid line wrap; use gap instead */
  padding: 0;
  position: static;
  min-height: 0;
  overflow: visible;
  width: auto; /* reset desktop rule that sets width:100% */
}
.panel.panel-simple .panel-tekst {
  flex: 1 1 0;
  max-width: 100%;
  min-width: 0; /* allow text to shrink in flex row without forcing wrap */
}
.panel.panel-simple .panel-bilde img {
  position: static;
  width: auto;
  height: auto;
  max-width: 260px;   /* adjust as needed for logos */
  max-height: 120px;  /* prevents overly tall logos */
  object-fit: contain;
  border-radius: 0;    /* remove circle rounding */
  aspect-ratio: auto;
  display: block;
}

/* Override default desktop object-fit cover behavior */
@media (min-width: 769px) {
  .panel.panel-simple .panel-innhold { flex-wrap: nowrap; }
  .panel.panel-simple .panel-bilde { position: static; min-height: 0; overflow: visible; width: auto; }
  .panel.panel-simple .panel-bilde img { position: static; width: auto; height: auto; object-fit: contain; }
}

/* Override circle image variant for simple panels */
.panel.panel-simple .panel-bilde { padding: 0; }
.panel.panel-simple .panel-bilde img { max-width: 200px; border-radius: 0; aspect-ratio: auto; }

/* Consistent space between logo and text */
.tekst-panel .panel.panel-simple .panel-innhold { gap: 25px; }
@media (max-width: 767px){ .tekst-panel .panel.panel-simple .panel-innhold { gap: 25px; } }

@media (max-width: 1200px){ .panel.panel-simple .panel-bilde img { max-width: 170px; } }
@media (max-width: 767px){ .panel.panel-simple .panel-bilde img { max-width: 140px; max-height: 90px; } }

/* In simple layout, don't spread items; rely on gap */
.panel.panel-simple .panel-innhold { justify-content: flex-start; align-items: center; }

.panel-tekst h2,
.panel-tekst .panel-beskrivelse,
.panel-knapp {
  color: var(--panel-text-color);
}

.panel-knapp {
  margin-top: 20px;
  background: #000;
  color: #fff;
  text-decoration: underline;
  padding: 8px 16px;
  border-radius: 10px;
  width: fit-content;
}

.panel-knapp:hover {
text-decoration: underline;
}

/* Reverse / normal order */
.panel-venstre .panel-bilde { order: 0; }
.panel-venstre .panel-tekst { order: 1; }
.panel-hoyre  .panel-bilde { order: 1; }
.panel-hoyre  .panel-tekst { order: 0; }

/* ----------------------------------------------------------------
   Ensure stacking on mobile: both .panel-bilde and .panel-tekst 
   take full width
---------------------------------------------------------------- */
@media (max-width: 767px) {
  .panel-innhold,
  .panel-bilde,
  .panel-tekst {
    flex-basis: 100%;
    max-width: 100%;
  }
  /* Use same spacing between items as outer padding for symmetry */
  .tekst-bilde-panel .panel-innhold { gap: var(--spacing-panel-padding-mobile); }
  .tekst-panel .panel-innhold { gap: var(--spacing-panel-padding-mobile); }
  /* Force stacking for simple Tekst panel */
  .tekst-panel .panel.panel-simple .panel-innhold { flex-direction: column; align-items: flex-start; }
  .tekst-panel .panel.panel-simple .panel-bilde,
  .tekst-panel .panel.panel-simple .panel-tekst { flex: 0 0 100% !important; max-width: 100% !important; }
  .panel-bilde {
    padding: 0; /* rely on .panel padding for consistent edges */
  }
  .panel-tekst {
    padding: 0; /* rely on .panel padding for consistent edges */
  }
  .panel {
    padding: var(--spacing-panel-padding-mobile);
  }
}

/* Ensure no inner padding for Tekst panel on mobile as well */
@media (max-width: 767px) {
  .tekst-panel .panel { padding: 0; }
}

/* Fine‑tune mobile spacing specifically for tekst‑bilde panel
   to avoid cramped content while keeping symmetry */
@media (max-width: 767px) {
  .tekst-bilde-panel .panel {
    padding: 1.5rem; /* equal on all sides */
  }
  .tekst-bilde-panel .panel-innhold {
    gap: 1.5rem; /* equal spacing between image and text */
  }
}

/* Fyll hele bredden når panel har kun tekst */
.tekst-panel .panel-innhold.only-text .panel-tekst {
  flex: 1 1 100%;
  max-width: 100%;
}