/* ======================================
   ol-infobox.css  —  INFO-KNAP + MODAL
   - Centrerer popup med luft fra top/bund
   - Ingen konflikt med øvrig layout-CSS
   ====================================== */

/* Design tokens (justér frit) */
:root{
  --ol-brand:  #737373;   /* burgundy */
  --ol-text:   #111111;   /* near-black */
  --ol-border: #E6E0D8;   /* lys varm kant */
  --ol-h:      56px;      /* fælles højde for knapper/felter */
  --ol-radius: 12px;      /* afrunding */
  --ol-modal-vpad: clamp(48px, 12vh, 120px); /* LUFT fra top/bund til modal */
}

/* Info-knap ved siden af “Add to cart” (styling – ikke layout) */
.ol-infobox-wrap .ol-info{
  height:var(--ol-h);
  width:var(--ol-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1.5px solid var(--ol-border);
  border-radius:var(--ol-radius);
  background:#fff;
  color:var(--ol-brand);
  cursor:pointer;
  padding:0;
  margin:0;
}
.ol-infobox-wrap .ol-info:hover{
  box-shadow:0 0 0 3px rgba(128,0,32,.08);
}

/* Sikr at wrapperen ikke tilføjer ekstra luft (layout styres andetsteds) */
.single_variation_wrap .woocommerce-variation-add-to-cart .ol-infobox-wrap{
  width:var(--ol-h) !important;
  display:flex !important;
  align-items:stretch !important;
  margin:0 !important;
  padding:0 !important;
}

/* ===== MODAL (popup) ===== */

/* Skjult som udgangspunkt */
.ol-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;                         /* skjul */
}

/* Vis + centrér med luft fra top/bund */
.ol-modal[aria-hidden="false"]{
  display:flex;                         /* flex for centrering */
  align-items:flex-start;               /* start under top padding */
  justify-content:center;               /* vandret center */
  padding:var(--ol-modal-vpad) 16px;    /* LUFT fra top/bund + lidt sidepadding */
}

/* Baggrundsslør */
.ol-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
}

/* Selve boksen */
.ol-dialog{
  position:relative;
  width:min(640px, 100%);
  margin:0;                             /* ingen ekstra top-margin */
  background:#fff;
  color:var(--ol-text);
  border-radius:16px;
  padding:24px 24px 18px;
  box-shadow:0 12px 40px rgba(0,0,0,.22);

  /* Garanter at boksen passer i viewporten */
  max-height:calc(100vh - 2 * var(--ol-modal-vpad));
  overflow:auto;
}

/* Luk-knap */
.ol-close{
  position:absolute; top:10px; right:12px;
  height:36px; width:36px; border-radius:10px;
  border:1px solid #eee; background:#fff; cursor:pointer;
  font-size:20px; line-height:1;
}

/* Indhold */
#ol-modal-title{ margin:0 0 12px; color:var(--ol-brand); font-size:22px; }
.ol-modal-body{ font-size:15px; line-height:1.6; }
.ol-list{ margin:0 0 8px 18px; }
.ol-list li{ margin:4px 0; }
.ol-note{ opacity:.75; margin-top:6px; font-size:13px; }

/* Mobile tweaks */
@media (max-width: 480px){
  .ol-dialog{ width:calc(100% - 24px); padding:18px; }
}