/* claude-stroemcss-20260806 - LP's stroemberegner-popup.
   Flyttet UD af countdown.phtml (modulets template, LP-only) 06-08-2026.
   Den laa inline paa HVER LP-produktside: 13.430 B raa / ~3,1 KB gzip pr.
   sidevisning, selv om popup'en er display:none indtil brugeren klikker.
   Nu ét cachebart hit. Aabne-knappens egne regler bliver inline - den ER
   synlig i koebsboksen og maa ikke vente paa et udskudt ark.
   Markup, klasser og ID'er er UAENDREDE; showBasic()/showAdvanced() virker.
   RET HER - ikke i templaten. Versionen i <link ?v=> skal bumpes ved rettelser. */
/* --- Selve modalen ---------------------------------------------------- */
aside.modal-popup.stroembesparelse-modal .modal-inner-wrap { width:660px; max-width:calc(100% - 24px); transform:translateY(-15%); max-height:110%; border-radius:12px; overflow:hidden; border:1px solid #E5DCC8; box-shadow:0 18px 48px rgba(46,74,42,.22); }
aside.modal-popup.stroembesparelse-modal header.modal-header { background-color:#4A7539; padding:14px 20px 13px !important; border:0; }
aside.modal-popup.stroembesparelse-modal header.modal-header.advanced { padding-left:16px !important; }
aside.modal-popup.stroembesparelse-modal header.modal-header h1 { color:#fff; font-family:'Nunito','Open Sans',sans-serif; font-weight:800 !important; font-size:18px !important; line-height:1.25 !important; letter-spacing:-.2px; border:none !important; padding:0 40px 0 0 !important; margin:0 !important; }
aside.modal-popup.stroembesparelse-modal button.action-close { padding:14px 18px !important; }
aside.modal-popup.stroembesparelse-modal button.action-close:before { color:#fff !important; font-size:18px !important; line-height:initial !important; margin:0 !important; }
aside.modal-popup.stroembesparelse-modal button.action-close:focus-visible { outline:2px solid rgba(255,255,255,.85); outline-offset:-4px; border-radius:10px; }
aside.modal-popup.stroembesparelse-modal footer.modal-footer { display:none; }
aside.modal-popup.stroembesparelse-modal div.modal-content { padding:0 !important; background:#fff; }

#stroembesparelse-popup { color:#2E4A2A; font-family:'Open Sans',sans-serif; font-size:14px; line-height:1.6; }

/* --- Toppen: creme-flade med forklaring + kWh-felt -------------------- */
#stroembesparelse-popup .top { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; background:#FBF6EC; border-bottom:1px solid #E5DCC8; margin-bottom:0; padding:18px 24px; }
#stroembesparelse-popup .top.advanced { padding:16px; }
#stroembesparelse-popup .top ul, #stroembesparelse-popup .bottom ul { padding:0; margin:0; }
#stroembesparelse-popup .top ul li, #stroembesparelse-popup .bottom ul li { list-style:none; padding:0; margin:0; }
#stroembesparelse-popup .popup-top-container.left { flex:1 1 auto; min-width:0; }
#stroembesparelse-popup .popup-top-container.left p { margin:0 0 2px; font-size:13.5px; line-height:1.55; color:#5C6153; }
#stroembesparelse-popup .popup-top-container.left p:first-child { font-family:'Nunito','Open Sans',sans-serif; font-size:17px; font-weight:800 !important; line-height:1.25; letter-spacing:-.2px; color:#2E4A2A; margin-bottom:6px; }
#stroembesparelse-popup .popup-top-container.right { flex:0 0 auto; }
#stroembesparelse-popup .popup-top-container.right li:first-child span { display:block; font-family:'Nunito','Open Sans',sans-serif; font-size:12px; font-weight:800; letter-spacing:.2px; color:#2E4A2A; margin-bottom:5px; }
#stroembesparelse-popup .popup-top-container.right li:nth-child(2) { display:flex; align-items:center; gap:7px; }
#stroembesparelse-popup .popup-top-container.right li:nth-child(2) span { font-size:13px; font-weight:700; color:#5C6153; }
#stroembesparelse-popup #kwhPris { width:118px; height:42px; padding:0 12px; border:1.5px solid #CDE0BC; border-radius:10px; background:#fff; box-shadow:none; font-family:'Nunito','Open Sans',sans-serif; font-size:16px; font-weight:800; color:#2E4A2A; font-variant-numeric:tabular-nums; }
#stroembesparelse-popup #kwhPris:focus { border-color:#4A7539; box-shadow:0 0 0 3px rgba(74,117,57,.18); outline:0; }

/* --- Bunden: forbrugs-chip + de tre kolonner -------------------------- */
#stroembesparelse-popup .bottom { padding:18px 24px 20px; background:#fff; }
#stroembesparelse-popup .bottom.advanced { padding:16px 24px 0; }
#stroembesparelse-popup .productuse { display:inline-flex; align-items:baseline; gap:6px; font-size:13px; font-weight:600; color:#2E4A2A; background:#EDF3E4; border:1px solid #CDE0BC; border-radius:999px; padding:6px 14px; margin:0 0 16px; }
#stroembesparelse-popup .productuse strong { font-family:'Nunito','Open Sans',sans-serif; font-size:14px; font-weight:800; }
#stroembesparelse-popup .productuse.standby { margin-left:8px; }
#stroembesparelse-popup .bottom.advanced .productuse { font-size:13px; }

#stroembesparelse-popup .comparison { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; font-size:14px; }
#stroembesparelse-popup .comparison ul { width:auto; padding:12px 14px 13px; border:1px solid #EBE2D2; border-radius:12px; background:#FBF6EC; }
#stroembesparelse-popup .comparison ul:last-of-type { border:1px solid #EBE2D2; }
#stroembesparelse-popup .comparison ul li { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
#stroembesparelse-popup .comparison ul li:first-child { display:block; font-family:'Nunito','Open Sans',sans-serif; font-size:13px; letter-spacing:-.1px; color:#2E4A2A; padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid #E5DCC8; }
#stroembesparelse-popup .comparison ul li:first-child span { font-weight:800 !important; }
#stroembesparelse-popup .comparison ul li + li { margin-top:4px; }
#stroembesparelse-popup .comparison ul li div span { font-size:12.5px; font-weight:400; color:#5C6153; }
#stroembesparelse-popup .comparison ul li div:last-child span { font-family:'Nunito','Open Sans',sans-serif; font-size:15px; font-weight:800 !important; color:#2E4A2A; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* --- Skift til/fra avanceret udregner --------------------------------- */
#stroembesparelse-popup .showadvanced { text-align:center; margin-top:20px; margin-bottom:2px; }
#stroembesparelse-popup .showadvanced a { display:inline-block; background-color:#4A7539; color:#fff; border-radius:999px; padding:10px 24px; text-decoration:none; font-family:'Nunito','Open Sans',sans-serif; font-size:13.5px; font-weight:800; line-height:1.2; }
#stroembesparelse-popup .showadvanced a:hover { background-color:#3B5F2D; color:#fff; }
#stroembesparelse-popup .showadvanced a:focus-visible { outline:2px solid #2E4A2A; outline-offset:2px; }

/* --- Avanceret udregner ----------------------------------------------- */
/* .advancedContainer ligger uden for .bottom i markup'en og har derfor
   brug for sin egen sideafstand, ellers gaar felterne helt ud til kanten. */
#stroembesparelse-popup .advancedContainer { font-size:13.5px; padding:0 24px 4px; }
#stroembesparelse-popup .advancedContainer > .inputContainer:first-child { margin-top:0; }
#stroembesparelse-popup .inputContainer { padding-left:0; margin-top:14px; }
#stroembesparelse-popup .inputContainer > span, #stroembesparelse-popup .advancedHours > span { font-family:'Nunito','Open Sans',sans-serif; font-size:12.5px; font-weight:800; color:#2E4A2A; }
#stroembesparelse-popup .inputContainerChild { width:132px; background:#FBF6EC; border:1px solid #E5DCC8; border-radius:10px; padding:6px 8px; margin-top:4px; }
#stroembesparelse-popup .inputContainerChild input { width:62px; border:1px solid #CDE0BC; border-radius:8px; height:32px; padding:0 8px; font-weight:700; color:#2E4A2A; background:#fff; }
#stroembesparelse-popup .inputContainerChild label { font-size:12.5px; color:#5C6153; }
#stroembesparelse-popup .advancedHours { padding-left:0; margin-top:14px; }
#stroembesparelse-popup .avancedHoursSliderContainer { background:#FBF6EC; border:1px solid #E5DCC8; width:100%; max-width:320px; border-radius:10px; padding:10px 12px; font-size:13px; font-weight:700; color:#2E4A2A; display:flex; align-items:center; gap:10px; justify-content:space-between; margin-top:6px; }
#stroembesparelse-popup .addsavebtn { padding-left:0; padding-bottom:8px; border-bottom:1px solid #E5DCC8; margin-top:18px; font-family:'Nunito','Open Sans',sans-serif; font-size:13.5px; font-weight:800; color:#2E4A2A; }
#stroembesparelse-popup .addsaveContainer { display:block; background:#FBF6EC; border:1px solid #E5DCC8; border-top:0; border-radius:0 0 12px 12px; padding:14px; }
#stroembesparelse-popup .addsaveContainer label { margin-right:10px; margin-left:5px; }
#stroembesparelse-popup .addsaveContainer input { border:1px solid #CDE0BC; border-radius:8px; width:50px; height:32px; padding:0 6px; background:#fff; color:#2E4A2A; font-weight:700; }
#stroembesparelse-popup .addsaveContainer p { font-size:12.5px; color:#5C6153; line-height:1.55; }
#stroembesparelse-popup ul#addsaveInputContainer { list-style:none; padding:0; display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-bottom:0; }
#stroembesparelse-popup ul#addsaveInputContainer li { display:flex; flex-direction:column; margin-right:0; width:95px; }
#stroembesparelse-popup ul#addsaveInputContainer li span { font-size:12px; font-weight:700; color:#5C6153; margin-bottom:3px; }
#stroembesparelse-popup ul#addsaveInputContainer li input { width:100% !important; }
#stroembesparelse-popup #addsaveBtnAdd { background:#4A7539; color:#fff; border:0; border-radius:999px; padding:9px 18px; font-family:'Nunito','Open Sans',sans-serif; font-weight:800; font-size:13px; }
#stroembesparelse-popup #addsaveBtnAdd:hover { background:#3B5F2D; }
#stroembesparelse-popup #savedTable { width:100%; line-height:1.5; margin-top:12px; font-size:12.5px; }
#stroembesparelse-popup #savedTable thead { font-family:'Nunito','Open Sans',sans-serif; font-weight:800; background:#EDF3E4; color:#2E4A2A; }
#stroembesparelse-popup #savedTable td { padding:5px 6px; border-bottom:1px solid #E5DCC8; }
#stroembesparelse-popup input#currentProductAmountInput,
#stroembesparelse-popup input#currentProductHoursInput { background:#fff; border:1px solid #CDE0BC; border-radius:8px; height:30px; width:58px; padding:0 6px; margin-top:0; color:#2E4A2A; font-weight:700; }
#stroembesparelse-popup a.removeCalcLine { display:inline-block; text-decoration:none; background:#A39781; color:#fff; padding:0 7px 2px; border-radius:999px; font-weight:700; line-height:1.5; }
#stroembesparelse-popup a.removeCalcLine:hover { background:#B4231F; color:#fff; cursor:pointer; }
#stroembesparelse-popup a.saveCalcLine { color:#4A7539; font-weight:800; text-decoration:none; }
#stroembesparelse-popup a.saveCalcLine:hover { color:#3B5F2D; text-decoration:underline; }
#stroembesparelse-popup ul#results { padding:0; list-style:none; margin-top:20px; border:1px solid #EBE2D2; border-radius:12px; overflow:hidden; }
#stroembesparelse-popup ul#results li { padding:7px 14px; font-size:13px; color:#5C6153; }
#stroembesparelse-popup ul#results .results-title { background:#EDF3E4; font-family:'Nunito','Open Sans',sans-serif; font-weight:800; color:#2E4A2A; font-size:12.5px; }
#stroembesparelse-popup ul#results li span:nth-child(2) { float:right; font-family:'Nunito','Open Sans',sans-serif; font-weight:800; color:#2E4A2A; font-variant-numeric:tabular-nums; }
#stroembesparelse-popup ul#results li.total { background:#FBF6EC; font-weight:800; color:#2E4A2A; }
#hoursRange { -webkit-appearance:none; appearance:none; flex:1 1 auto; height:8px; border-radius:999px; background:#CDE0BC; outline:none; }
#hoursRange::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:#4A7539; cursor:pointer; border:2px solid #fff; box-shadow:0 1px 3px rgba(46,74,42,.35); }
#hoursRange::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:#4A7539; cursor:pointer; border:2px solid #fff; }
#hoursRange:focus-visible { box-shadow:0 0 0 3px rgba(74,117,57,.25); }

/* --- Mobilens sticky koeb-bjaelke ligger oven paa modalen -------------
   Samme greb som ved kurv-drawer'en (lp-2026.css afsnit 10): kun display,
   bjaelkens egen logik, position og --frem-tilstand er uroert, saa den
   kommer igen af sig selv, naar modalen lukkes. Hoejdelaasen paa
   .product-add-form i produktside.js roeres ikke - bjaelken er
   position:fixed og fylder intet i dokumentets flow. */
body:has(aside.modal-popup.stroembesparelse-modal._show) .sdk-koebsbjaelke,
body:has(aside.modal-popup.stroembesparelse-modal._show) #sdk-samtykke-forny { display:none !important; }

/* --- Mobil: kolonnerne stakker --------------------------------------- */
@media only screen and (max-width:767px){
    #stroembesparelse-popup #mobile-savecalcline-text{display:block !important;}
    #stroembesparelse-popup #desktop-savecalcline-text{display:none;}
    aside.modal-popup.stroembesparelse-modal .modal-inner-wrap { width:calc(100% - 20px); max-width:none; min-height:auto !important; margin:24px auto; transform:none; }
    aside.modal-popup.stroembesparelse-modal header.modal-header { padding:13px 16px !important; }
    aside.modal-popup.stroembesparelse-modal header.modal-header h1 { font-size:16px !important; }
    #stroembesparelse-popup .top { flex-direction:column; gap:14px; padding:16px; }
    #stroembesparelse-popup .bottom { padding:16px; }
    #stroembesparelse-popup .bottom.advanced { padding:16px 16px 0; }
    #stroembesparelse-popup .advancedContainer { padding:0 16px 4px; }
    #stroembesparelse-popup .avancedHoursSliderContainer { max-width:none; }
    #stroembesparelse-popup .comparison { grid-template-columns:1fr; gap:10px; }
    #stroembesparelse-popup .comparison ul { width:100% !important; margin-bottom:0; }
    #stroembesparelse-popup .popup-top-container.right { margin-top:0; }
    #stroembesparelse-popup #kwhPris { width:100%; max-width:160px; }
    #stroembesparelse-popup .productuse.standby { margin-left:0; margin-top:6px; }
}