/* K319 C (Kim 30/10, godkendt forslag A + svævende pille): »Vis som kunde« – kun admin-værktøj.
   Orange (#E07A2E) bruges KUN her, så det aldrig forveksles med kundens UI. */
:root {
    --v247-viewas-orange: #E07A2E;
    --v247-viewas-orange-soft: #FDF1E7;
    --v247-viewas-orange-ink: #9A4A12;
}

/* Inde i telefon-forhåndsvisningen ses siden præcis som kundens – uden admin-værktøjet */
html.v247-in-frame .v247-viewas-bar,
html.v247-in-frame .v247-viewas-pill-wrap,
html.v247-in-frame .v247-viewas-phone-stage { display: none !important; }

/* ---- Båndet øverst ---- */
.v247-viewas-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 7px 16px;
    background: var(--v247-viewas-orange);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}
.v247-viewas-bar b { font-weight: 700; }
.v247-viewas-bar .mud-menu { display: inline-flex; }
.v247-viewas-bar-link {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    color: #fff !important;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.v247-viewas-seg {
    display: inline-flex;
    margin-left: auto;
    padding: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
}
.v247-viewas-seg button,
.v247-viewas-env > a,
.v247-viewas-env > span {
    appearance: none;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 999px;
    cursor: pointer;
}
.v247-viewas-seg button.is-on,
.v247-viewas-env > span.is-on { background: #fff; color: var(--v247-viewas-orange); font-weight: 700; }
/* K327: TEST | LIVE – samme stil som Mobil/PC; vises også på mobil */
.v247-viewas-env > a { text-decoration: none; }
.v247-viewas-env > a:hover, .v247-viewas-env > a:focus-visible { text-decoration: underline; }
.v247-viewas-bar .v247-viewas-seg.v247-viewas-env { display: inline-flex; margin-left: 0; }
/* K336: pakkenummer – samme chip som TEST | LIVE, bare ikke klikbar */
.v247-viewas-env.v247-viewas-release > span { cursor: default; font-variant-numeric: tabular-nums; }
.v247-viewas-pill-env { padding: 8px 14px; border-bottom: 1px solid #E6E4DC; }
.v247-viewas-pill-env .v247-viewas-env { display: inline-flex; margin-left: 0; background: var(--v247-viewas-orange); }
.v247-viewas-short { display: none; }
@media (max-width: 699px) {
    .v247-viewas-bar { padding: 7px 12px; gap: 4px 10px; font-size: 12px; }
    .v247-viewas-long { display: none; }
    .v247-viewas-short { display: inline; }
    /* Telefonrammen giver kun mening på en stor skærm */
    .v247-viewas-seg { display: none; }
    .v247-viewas-back { margin-left: auto; }
}

/* ---- Valgene (menu, mobil, pille) ---- */
.v247-viewas-opt .mud-menu-item-text,
.v247-viewas-opt { display: flex; flex-direction: column; align-items: flex-start; }
.v247-viewas-opt-hint { display: block; color: #5E6B66; font-size: 12px; font-weight: 400; }
.v247-viewas-opt.is-current .v247-viewas-opt-label { font-weight: 700; }
.v247-viewas-list { display: flex; flex-direction: column; padding: 4px 0; }
.v247-viewas-list .v247-viewas-opt {
    appearance: none;
    border: 0;
    background: none;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: 14px;
    color: #1A2421;
    padding: 8px 14px;
    cursor: pointer;
}
.v247-viewas-list .v247-viewas-opt:hover,
.v247-viewas-list .v247-viewas-opt:focus-visible { background: #EEF2EE; }
.v247-viewas-list .v247-viewas-opt.is-current { background: #EEF2EE; }
/* K350: tynd linje mellem »Mig (normal)« og kundetilstandene */
.v247-viewas-list .v247-viewas-opt-sep { height: 1px; margin: 4px 14px; background: #E6E4DC; }

/* Profilmenu/Administration: det orange punkt (som i mockup'en) */
.v247-viewas-entry,
.v247-viewas-entry .mud-button-root,
.v247-viewas-entry > .mud-menu-activator {
    background: var(--v247-viewas-orange-soft) !important;
    color: var(--v247-viewas-orange-ink) !important;
    font-weight: 600 !important;
}
.v247-viewas-entry { border-left: 3px solid var(--v247-viewas-orange); }
.v247-viewas-mobile .v247-viewas-entry { display: flex; justify-content: space-between; width: 100%; }
.v247-viewas-mobile .v247-viewas-list { background: var(--v247-viewas-orange-soft); padding-left: 16px; }

/* ---- Den svævende pille ---- */
.v247-viewas-pill-wrap {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1150;
    touch-action: none;
}
.v247-viewas-pill {
    display: inline-flex;
    align-items: stretch;
    border-radius: 999px;
    background: var(--v247-viewas-orange);
    color: #fff;
    box-shadow: 0 8px 20px rgba(224, 122, 46, .4);
    font-size: 13px;
    font-weight: 700;
    user-select: none;
}
.v247-viewas-pill button { appearance: none; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.v247-viewas-pill-main { padding: 10px 6px 10px 16px; cursor: grab !important; touch-action: none; }
.v247-viewas-pill-wrap.is-dragging .v247-viewas-pill-main { cursor: grabbing !important; }
.v247-viewas-pill-x { padding: 10px 14px 10px 8px; opacity: .85; font-size: 15px !important; line-height: 1; }
.v247-viewas-pill-x:hover { opacity: 1; }
.v247-viewas-pill-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    width: 260px;
    background: #fff;
    border: 1px solid #E6E4DC;
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .14);
    overflow: hidden;
}
.v247-viewas-pill-wrap.is-below .v247-viewas-pill-menu { bottom: auto; top: calc(100% + 8px); }
.v247-viewas-pill-wrap.is-left .v247-viewas-pill-menu { right: auto; left: 0; }
.v247-viewas-pill-head {
    padding: 10px 14px;
    border-bottom: 1px solid #E6E4DC;
    background: var(--v247-viewas-orange-soft);
    color: var(--v247-viewas-orange-ink);
    font-size: 13px;
    font-weight: 700;
}

/* ---- K346 A (Kim 30/10): kontrolcentret i pillen + tynd statuslinje øverst ---- */
.v247-viewas-pill-caret { opacity: .85; font-weight: 600; margin-left: 4px; }
.v247-viewas-pill-menu.v247-viewas-cc {
    width: 300px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    counter-reset: v247-cc;
}
.v247-viewas-cc .v247-viewas-pill-head { display: flex; justify-content: space-between; align-items: center; }
.v247-viewas-cc-sec { padding: 8px 14px 10px; border-bottom: 1px solid #E6E4DC; counter-increment: v247-cc; }
.v247-viewas-cc-sec:last-child { border-bottom: 0; }
.v247-viewas-cc-sec.is-list { padding: 8px 0 4px; }
.v247-viewas-cc-sec.is-list .v247-viewas-cc-lab { padding: 0 14px; }
.v247-viewas-cc-lab {
    display: block;
    margin-bottom: 6px;
    color: #5E6B66;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.v247-viewas-cc-lab::before { content: counter(v247-cc) " · "; }
.v247-viewas-cc-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.v247-viewas-cc .v247-viewas-seg,
.v247-viewas-cc .v247-viewas-seg.v247-viewas-env { display: inline-flex; margin-left: 0; background: var(--v247-viewas-orange); }
.v247-viewas-cc .v247-viewas-list { padding: 0; }
.v247-viewas-cc .v247-viewas-list .v247-viewas-opt { padding: 5px 14px; }
.v247-viewas-cc-back {
    margin-left: auto;
    color: var(--v247-viewas-orange-ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
@media (max-width: 699px) {
    /* Telefonrammen giver kun mening på en stor skærm – Skærm skjules, og numrene tælles om */
    .v247-viewas-cc .v247-viewas-cc-screen { display: none; }
}

/* ---- K350 (Kim 30/10): kontrolcentret bliver stående ----
   Lukker kun med pillen eller »–« i hovedet. Sektionerne kan foldes sammen (huskes). På PC (≥ 1100 px) er kortet
   docket i højre side, og siden rykker til venstre, så man kan arbejde ved siden af; pillen står fast nederst i kortet. */
.v247-viewas-cc .v247-viewas-pill-head { position: sticky; top: 0; z-index: 1; gap: 10px; }
.v247-viewas-cc-head-end { display: inline-flex; align-items: center; gap: 8px; }
/* K350.1: »▾ Minimér« og »✕ Luk« i panelets hoved (som i den godkendte mockup) */
.v247-viewas-cc-head-end { gap: 6px; }
.v247-viewas-cc-btn {
    appearance: none;
    border: 1px solid #F3D9C3;
    background: #fff;
    color: var(--v247-viewas-orange-ink);
    border-radius: 999px;
    padding: 3px 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.v247-viewas-cc-btn:hover,
.v247-viewas-cc-btn:focus-visible { border-color: var(--v247-viewas-orange); }
.v247-viewas-cc-foot { padding: 10px 14px; border-top: 1px solid #E6E4DC; color: #5E6B66; font-size: 12px; }
.v247-viewas-cc-grip,
.v247-viewas-cc-dim { display: none; }
/* Mens panelet er åbent, er pillen væk (panelet selv er påmindelsen) – undtagen mens Panel vælger element */
.v247-viewas-pill-wrap.is-card-open .v247-viewas-pill { display: none; }
@media (max-width: 1099px) {
    .v247-viewas-pill-wrap.is-card-open:has(.is-panel-min) .v247-viewas-pill { display: inline-flex; }
}
.v247-viewas-cc-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
button.v247-viewas-cc-lab {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
button.v247-viewas-cc-lab::after { content: " ▾"; letter-spacing: 0; }
.v247-viewas-cc-sec.is-collapsed button.v247-viewas-cc-lab::after { content: " ▸"; }
button.v247-viewas-cc-lab:hover,
button.v247-viewas-cc-lab:focus-visible { color: var(--v247-viewas-orange-ink); }
.v247-viewas-cc-sec.is-collapsed .v247-viewas-cc-lab { margin-bottom: 0; }
.v247-viewas-cc-sec.is-list .v247-viewas-cc-head { padding: 0 14px; }
.v247-viewas-cc-sec.is-list .v247-viewas-cc-head .v247-viewas-cc-lab { padding: 0; }
.v247-viewas-cc-sec.is-list.is-collapsed { padding-bottom: 10px; }
.v247-viewas-cc-sum { color: #5E6B66; font-size: 12px; font-weight: 600; }
/* Panel-værktøjets vært i »Mig (normal)« – fylder intet, før Panel er i gang */
.v247-viewas-bar.is-tool-only { display: block; padding: 0; background: none; }
@media (max-width: 1099px) {
    /* Mens Panel vælger element, er kortet midlertidigt væk – det kommer igen bagefter (eller med et tryk på pillen) */
    .v247-viewas-cc.is-panel-min { display: none; }
}
@media (min-width: 1100px) {
    html:not(.v247-in-frame):has(.v247-viewas-cc) body { padding-right: 320px; }
    html:has(.v247-viewas-cc) .v247-viewas-phone-stage { right: 320px; }
    .v247-viewas-pill-menu.v247-viewas-cc,
    .v247-viewas-pill-wrap.is-below .v247-viewas-pill-menu.v247-viewas-cc,
    .v247-viewas-pill-wrap.is-left .v247-viewas-pill-menu.v247-viewas-cc {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 320px;
        max-height: none;
        display: flex;
        flex-direction: column;
        padding-bottom: 0;
        border-width: 0 0 0 1px;
        border-radius: 0;
        box-shadow: -12px 0 36px rgba(0, 0, 0, .08);
    }
    .v247-viewas-pill-wrap:has(.v247-viewas-cc) {
        left: auto !important;
        top: auto !important;
        right: 18px !important;
        bottom: 18px !important;
    }
    .v247-viewas-pill-wrap:has(.v247-viewas-cc) .v247-viewas-pill { position: relative; z-index: 2; }
    .v247-viewas-pill-wrap:has(.v247-viewas-cc) .v247-viewas-pill-main { cursor: pointer !important; }
    /* K350.1: på PC lukker man med »✕ Luk« – Minimér er kun til mobil/tablet; foden står nederst i panelet */
    .v247-viewas-cc-min { display: none; }
    .v247-viewas-cc .v247-viewas-cc-foot { margin-top: auto; }
}

/* ---- K350.1 (Kim 30/10): aktiv profil i »Vis som« – orange kant, orange flueben og »Aktiv« ---- */
.v247-viewas-list .v247-viewas-opt {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    border-left: 4px solid transparent;
}
.v247-viewas-opt-ck {
    flex: none;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 2px solid #D9D6CC;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}
.v247-viewas-opt-t { display: flex; flex-direction: column; min-width: 0; }
.v247-viewas-list .v247-viewas-opt.is-active { background: var(--v247-viewas-orange-soft); border-left-color: var(--v247-viewas-orange); }
.v247-viewas-opt.is-active .v247-viewas-opt-ck { background: var(--v247-viewas-orange); border-color: var(--v247-viewas-orange); color: #fff; }
.v247-viewas-opt.is-active .v247-viewas-opt-label { font-weight: 800; color: var(--v247-viewas-orange-ink); }
.v247-viewas-opt-now {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--v247-viewas-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

/* ---- K350.1: safe-area og mobilens bundark (< 700 px) ---- */
.v247-viewas-pill-wrap {
    right: calc(18px + env(safe-area-inset-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 699px) {
    .v247-viewas-cc-dim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(26, 36, 33, .35);
    }
    .v247-viewas-pill-menu.v247-viewas-cc,
    .v247-viewas-pill-wrap.is-below .v247-viewas-pill-menu.v247-viewas-cc,
    .v247-viewas-pill-wrap.is-left .v247-viewas-pill-menu.v247-viewas-cc {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        width: auto;
        max-height: calc(100vh - 110px);
        max-height: calc(100dvh - 110px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-width: 1px 0 0;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, .22);
    }
    .v247-viewas-cc-grip {
        display: block;
        width: 40px;
        height: 5px;
        margin: 8px auto 0;
        border-radius: 99px;
        background: #D9D6CC;
    }
    .v247-viewas-cc .v247-viewas-cc-grip + .v247-viewas-pill-head { margin-top: 8px; }
    .v247-viewas-cc .v247-viewas-pill-head { font-size: 14px; }
    /* Minimeret: den lille pille nederst på midten (kan stadig trækkes) */
    .v247-viewas-pill-wrap.is-minimized:not([style*="left"]) {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ---- Mobil-forhåndsvisning (390 px) ---- */
.v247-viewas-phone-stage {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 16px;
    background: #ECEAE3;
    overflow: auto;
}
.v247-viewas-phone {
    height: 100%;
    max-height: 860px;
    border: 10px solid #1b1b1b;
    border-radius: 36px;
    overflow: hidden;
    background: #fafaf8;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}
.v247-viewas-phone iframe { display: block; width: 100%; height: 100%; border: 0; }
body.v247-viewas-phone-open { overflow: hidden; }

/* ---- »Kun visning« på købsknapper ---- */
.v247-view-only-btn,
.v247-view-only-btn:disabled {
    cursor: not-allowed !important;
    opacity: .75;
}

/* K319: »Kun visning«-besked, når en gæst-knap (Log ind / Opret konto) klikkes i gæstevisningen */
.v247-viewas-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
    max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 10px;
    background: #1F1A14; color: #fff; font-size: 14px; line-height: 1.4;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18); opacity: 0; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease; z-index: 2147483000;
}
.v247-viewas-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.v247-viewas-guest-signin { padding-top: 48px; padding-bottom: 64px; }
.v247-viewas-guest-signin h1 { font-size: 1.6rem; margin: 0 0 12px; }