/* Additions on top of the production package: the floating Vonge weather button
   and modal, the EMIKO service fee calculator and the cookie consent modal.
   Uses the variables from site.css. Applied by _tools/apply-extras.php. */

/* ── Vonge weather: floating button ───────────────────────────────────── */
.vgw-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 900;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.15rem .8rem 1rem; border: 0; border-radius: 999px;
  background: var(--ink, #12151a); color: #fff;
  font: 600 .92rem/1 var(--font-body, "Inter", system-ui, sans-serif);
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(18,21,26,.28), 0 2px 6px rgba(0,0,0,.12);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.vgw-fab:hover { transform: translateY(-2px); background: #000; box-shadow: 0 14px 36px rgba(18,21,26,.34); }
.vgw-fab:focus-visible { outline: 3px solid var(--gold, #fbcf2e); outline-offset: 3px; }
.vgw-fab__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold, #fbcf2e); animation: vgwPulse 2.2s ease-in-out infinite; }
.vgw-fab svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes vgwPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@media (max-width: 640px) {
  .vgw-fab { right: 14px; bottom: 14px; padding: .7rem 1rem .7rem .85rem; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { .vgw-fab__dot { animation: none; } }

/* ── Vonge weather: modal ──────────────────────────────────────────────── */
.vgw-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.vgw-modal[hidden] { display: none; }
.vgw-modal__overlay { position: absolute; inset: 0; background: rgba(18,21,26,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); cursor: pointer; }
.vgw-modal__box {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  width: 100%; max-width: 960px; height: 86vh; max-height: 860px;
  background: #fff; border-radius: var(--r, 14px); overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  animation: vgwIn .22s ease-out;
}
@keyframes vgwIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.vgw-modal__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.4rem 1rem; background: var(--ink, #12151a); color: #fff;
  border-bottom: 3px solid var(--gold, #fbcf2e);
}
.vgw-modal__title { margin: 0; font: 700 1.15rem/1.2 var(--font-head, "Schibsted Grotesk", sans-serif); color: #fff; }
.vgw-modal__sub { margin: .3rem 0 0; display: flex; align-items: center; gap: .35rem; font-size: .82rem; color: rgba(255,255,255,.75); }
.vgw-modal__sub svg { width: 12px; height: 12px; fill: currentColor; }
.vgw-modal__close {
  flex-shrink: 0; width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.vgw-modal__close:hover { background: rgba(255,255,255,.28); }
.vgw-modal__close:focus-visible { outline: 2px solid var(--gold, #fbcf2e); outline-offset: 2px; }
.vgw-modal__close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; }
.vgw-modal__body { flex: 1; position: relative; background: var(--bg-2, #f6f8fa); }
.vgw-modal__body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.vgw-modal__foot {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1.4rem; border-top: 1px solid var(--line, #e3e6ea); background: var(--bg-2, #f6f8fa);
  font-size: .78rem; color: var(--ink-3, #5b616b);
}
.vgw-modal__foot a { color: var(--brand, #2563c9); font-weight: 600; text-decoration: none; }
.vgw-modal__foot a:hover { text-decoration: underline; }
.vgw-live { display: inline-flex; align-items: center; gap: .4rem; }
.vgw-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #38a35a; animation: vgwPulse 2.2s ease-in-out infinite; }
@media (max-width: 640px) {
  .vgw-modal { padding: 0; align-items: flex-end; }
  .vgw-modal__box { height: 94vh; max-height: none; border-radius: var(--r, 14px) var(--r, 14px) 0 0; }
}
body.vgw-open { overflow: hidden; }

/* ── /vonge-weather/ page ───────────────────────────────────────────────── */
.vgw-page { margin-top: 1.5rem; }
.vgw-page__mount { min-height: 480px; border-radius: var(--r, 14px); overflow: hidden; }
.vgw-page__fallback { margin-top: 1rem; font-size: .9rem; color: var(--ink-3, #5b616b); }

/* ── EMIKO service fee calculator ──────────────────────────────────────── */
.emiko-multi-widget { width: 100%; font-size: .95rem; color: var(--ink, #12151a); }
.emiko-label-main { display: block; font-weight: 600; margin-bottom: .15rem; line-height: 1.25; }
.emiko-label-sub { display: block; font-size: .8rem; font-weight: 400; color: var(--ink-3, #5b616b); }
.emiko-global-settings { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.25rem; }
.emiko-global-group { flex: 1 1 260px; }
.emiko-equipment-card, .emiko-global-settings {
  border: 1px solid var(--line, #e3e6ea); border-radius: var(--r, 14px); padding: 1.1rem 1.2rem; background: #fff;
}
#emikoEquipmentList { display: flex; flex-direction: column; gap: 1rem; }
.emiko-equipment-header { display: grid; grid-template-columns: repeat(3, 1fr) minmax(300px, 1.8fr) .8fr; gap: 1.25rem; align-items: flex-start; }
.emiko-field label { display: block; margin-bottom: .2rem; }
.emiko-multi-widget select, .emiko-multi-widget input[type="number"] {
  width: 100%; margin-top: .3rem; padding: .6rem .7rem; border-radius: var(--r-sm, 10px);
  border: 1px solid var(--line, #e3e6ea); background: #fff; font: inherit; font-size: .92rem; color: inherit;
}
.emiko-multi-widget select:focus, .emiko-multi-widget input:focus { outline: 2px solid var(--brand, #2563c9); outline-offset: 1px; }
.emiko-equipment-desc { margin-top: .3rem; font-size: .8rem; color: var(--ink-3, #5b616b); }
.emiko-summary { font-size: .85rem; background: var(--bg-2, #f6f8fa); border-radius: var(--r-sm, 10px); padding: .8rem .9rem; }
.ecr-item { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .2rem 0; }
.ecr-label { font-size: .82rem; color: var(--ink-2, #474d57); }
.ecr-value { font-weight: 700; white-space: nowrap; }
.emiko-sla-badge {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; padding: .35rem .6rem;
  border-radius: var(--r-sm, 10px); background: var(--acc-tint, rgba(37,99,201,.1)); font-size: .78rem;
}
.emiko-sla-icon { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .7rem; background: #38a35a; color: #fff; font-weight: 700; }
.emiko-sla-badge a { margin-left: auto; color: var(--brand, #2563c9); font-weight: 600; text-decoration: underline; }
.emiko-sla-badge a:hover { text-decoration: none; }
.emiko-field.emiko-actions { display: flex; align-items: center; height: 100%; }
.emiko-row-actions { display: flex; flex-direction: column; gap: .5rem; width: 100%; margin-top: 1.6rem; }
.emiko-link-btn, .emiko-remove-btn {
  padding: .7rem .9rem; border-radius: var(--r-sm, 10px); border: 1px solid var(--line, #e3e6ea);
  background: #fff; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; color: var(--ink, #12151a);
}
.emiko-link-btn:hover { background: var(--bg-2, #f6f8fa); }
.emiko-remove-btn { color: #9e2b2b; border-color: rgba(200,60,60,.25); }
.emiko-remove-btn:hover { background: rgba(200,60,60,.08); }
.emiko-discount-panel { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--line, #e3e6ea); }
.emiko-discount-panel p { margin: 0 0 .5rem; font-size: .82rem; color: var(--ink-2, #474d57); }
.emiko-discount-panel table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.emiko-discount-panel th, .emiko-discount-panel td { border: 1px solid var(--line-2, #eef0f3); padding: .4rem .5rem; text-align: center; }
.emiko-discount-panel th { background: var(--bg-2, #f6f8fa); font-weight: 600; }
.emiko-discount-row-current { background: var(--acc-tint, rgba(37,99,201,.1)); font-weight: 700; }
.erc-add { text-align: center; margin: 1.25rem 0; }
.emiko-totals-box { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: .5rem; }
.total-card { background: var(--ink, #12151a); color: #fff; padding: 1.3rem 1rem; border-radius: var(--r, 14px); text-align: center; }
.total-card:last-child { background: var(--gold, #fbcf2e); color: var(--ink-on-gold, #14161a); }
.total-label { font-size: .85rem; font-weight: 600; opacity: .85; margin-bottom: .35rem; }
.total-value { font: 700 1.6rem/1.15 var(--font-head, "Schibsted Grotesk", sans-serif); }
span.total-um { font-size: .8rem; font-weight: 500; opacity: .8; }
.emiko-note { margin-top: 1.5rem; font-size: .85rem; color: var(--ink-3, #5b616b); }
@media (max-width: 1024px) { .emiko-equipment-header { grid-template-columns: 1fr 1fr; } .emiko-totals-box { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .emiko-equipment-header, .emiko-totals-box { grid-template-columns: 1fr; } .emiko-global-settings { flex-direction: column; } .emiko-global-group { flex-basis: auto; } }

/* ── Cookie consent: modal with overlay + floating button ─────────────── */
.ck-ov {
  position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px;
  background: rgba(18,21,26,.58); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: ckFade .25s ease-out;
}
@keyframes ckFade { from { opacity: 0; } to { opacity: 1; } }
html.ck-open, html.ck-open body { overflow: hidden; }
.ck {
  width: min(560px, 100%);
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: #fff; color: var(--ink, #12151a);
  border-top: 4px solid var(--gold, #fbcf2e); border-radius: var(--r, 14px);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  padding: 1.5rem 1.6rem 1.6rem;
  font: 400 .95rem/1.55 var(--font-body, "Inter", system-ui, sans-serif);
  animation: ckIn .35s cubic-bezier(.2,.8,.3,1);
}
@keyframes ckIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ck, .ck-ov { animation: none; } }
.ck__icon {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold, #fbcf2e); color: var(--ink-on-gold, #14161a);
}
.ck__icon svg, .ck-fab svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.ck__icon circle, .ck-fab circle { fill: currentColor; stroke: none; }
.ck__body { flex: 1; min-width: 0; }
.ck__title { margin: .2rem 0 .4rem; font: 700 1.25rem/1.25 var(--font-head, "Schibsted Grotesk", sans-serif); }
.ck__text { margin: 0 0 1rem; color: var(--ink-2, #474d57); }
.ck__text a { color: var(--brand, #2563c9); font-weight: 600; }
.ck__now { margin: -.4rem 0 1rem; font-size: .85rem; color: var(--ink-3, #5b616b); }
.ck__acts { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.ck__close {
  margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--line, #e3e6ea); border-radius: 50%;
  background: #fff; color: var(--ink-2, #474d57); cursor: pointer; display: grid; place-items: center;
}
.ck__close:hover { background: var(--bg-2, #f6f8fa); }
.ck__close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.ck-fab {
  position: fixed; left: 20px; bottom: 20px; z-index: 900;
  width: 50px; height: 50px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--ink, #12151a); color: var(--gold, #fbcf2e); display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(18,21,26,.28), 0 2px 6px rgba(0,0,0,.12);
  transition: transform .16s ease, background .16s ease;
}
.ck-fab:hover { transform: translateY(-2px); background: #000; }
.ck-fab:focus-visible { outline: 3px solid var(--gold, #fbcf2e); outline-offset: 3px; }
.ck-fab[hidden] { display: none; }
.vg-cklink { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }
.vg-cklink:hover { text-decoration: none; }
@media (max-width: 640px) {
  .ck-ov { padding: 0; align-items: end; }
  .ck { border-radius: var(--r, 14px) var(--r, 14px) 0 0; padding: 1.2rem 1.15rem 1.3rem; gap: .8rem; }
  .ck__icon { flex-basis: 40px; width: 40px; height: 40px; }
  .ck__icon svg { width: 22px; height: 22px; }
  .ck__title { font-size: 1.1rem; }
  .ck-fab { left: 14px; bottom: 14px; width: 46px; height: 46px; }
}