/* CraftStrom calculator pop-up and the floating "Solar Calculator" tab.
   Moved from the synced pattern "calculator popup" (6942) into the Solar Check plugin. */

/* calculator popup */
#cs-calc{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;background:rgba(20,18,18,.7);padding:16px}
#cs-calc.open{display:flex}
#cs-calc .cs-calc-box{position:relative;width:min(1000px,100%);height:min(88vh,860px);background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4)}
#cs-calc iframe{width:100%;height:100%;border:0}
#cs-calc button{position:absolute;top:10px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:#302e2e;color:#fff;font-size:22px;line-height:1;cursor:pointer;z-index:2}
/* calculator popup: site calculator */
#cs-calc .cs-calc-box{background:#f2f2f2}
#cs-calc .cs-calc-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:Poppins,sans-serif;color:#6b6767}
#cs-calc iframe{position:relative;opacity:0;transition:opacity .2s}
#cs-calc.ready iframe{opacity:1}
/* floating calculator tab */
/* Floating calculator tab: CraftStrom green, a spinning sun in a white disc, and a small nudge every few seconds */
#cs-calc-fab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:9998;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 10px 16px;background:linear-gradient(170deg,#55d46e 0%,#43c35b 55%,#35a94c 100%);color:#fff!important;border-radius:22px 0 0 22px;box-shadow:-6px 10px 26px rgba(40,140,60,.4),inset 0 1px 0 rgba(255,255,255,.35);text-decoration:none!important;font-family:Poppins,sans-serif;font-weight:500;font-size:14px;letter-spacing:.04em;transition:padding .25s,filter .25s;animation:cs-fab-nudge 7s ease-in-out 2s infinite}
#cs-calc-fab:hover{padding-right:18px;filter:brightness(1.06);animation-play-state:paused}
#cs-calc-fab svg{display:none}
#cs-calc-fab:before{content:"";flex:none;width:34px;height:34px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.6' fill='%23f9a51b'/%3E%3Cpath d='M12 2v2.6M12 19.4V22M2 12h2.6M19.4 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M4.9 19.1l1.8-1.8M17.3 6.7l1.8-1.8' stroke='%23f9a51b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/24px no-repeat;box-shadow:0 2px 8px rgba(0,0,0,.15);animation:cs-fab-spin 14s linear infinite}
#cs-calc-fab:hover:before{animation-duration:3s}
@keyframes cs-fab-spin{to{transform:rotate(360deg)}}
@keyframes cs-fab-nudge{0%,84%,100%{transform:translateY(-50%) translateX(0)}88%{transform:translateY(-50%) translateX(-9px)}92%{transform:translateY(-50%) translateX(0)}95%{transform:translateY(-50%) translateX(-4px)}98%{transform:translateY(-50%) translateX(0)}}
@media (prefers-reduced-motion:reduce){#cs-calc-fab,#cs-calc-fab:before{animation:none}}
#cs-calc-fab span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
#cs-calc.open ~ #cs-calc-fab{display:none}
@media(max-width:600px){#cs-calc-fab{padding:10px 8px 13px;font-size:12px;gap:8px}#cs-calc-fab:before{width:28px;height:28px;background-size:20px}}
/* calculator close button */
#cs-calc .cs-calc-x{position:absolute!important;top:14px!important;right:14px!important;width:42px!important;height:42px!important;min-width:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:50%!important;background:#fff!important;color:#302e2e!important;box-shadow:0 4px 14px rgba(0,0,0,.18)!important;display:flex!important;align-items:center;justify-content:center;cursor:pointer;z-index:3;transition:background .15s,color .15s,transform .15s}
#cs-calc .cs-calc-x:hover,#cs-calc .cs-calc-x:focus-visible{background:#f9a51b!important;color:#302e2e!important;transform:rotate(90deg)}
#cs-calc .cs-calc-x svg{display:block;pointer-events:none}
/* calculator popup header */
#cs-calc .cs-calc-box{display:flex;flex-direction:column}
#cs-calc .cs-calc-head{flex:none;display:flex;align-items:center;gap:12px;height:70px;padding:0 70px 0 24px;background:#302e2e;border-bottom:4px solid #f9a51b}
#cs-calc .cs-calc-head-ico{width:36px;height:36px;flex:none;border-radius:50%;background:#f9a51b;color:#302e2e;display:flex;align-items:center;justify-content:center}
#cs-calc .cs-calc-head h2{margin:0!important;padding:0;font-family:"Barlow Condensed",sans-serif;font-size:28px;line-height:1;font-weight:700;letter-spacing:.01em;color:#fff!important}
#cs-calc .cs-calc-x{top:14px!important}
#cs-calc iframe{flex:1;height:auto;min-height:0}
#cs-calc .cs-calc-load{top:74px}
@media(max-width:600px){#cs-calc .cs-calc-head{height:60px;padding-left:16px}#cs-calc .cs-calc-head h2{font-size:23px}#cs-calc .cs-calc-x{top:9px!important}}

/* Once the calculator has loaded, its "Loading" note must not show through. */
#cs-calc.ready .cs-calc-load { display: none; }

/* Loading animation: a turning sun sends rays down to a solar panel, which slowly brightens
   from dark to CraftStrom blue as it "charges" while the calculator loads. */
#cs-calc .cs-calc-load { flex-direction: column; gap: 14px; }
#cs-calc .cs-load-art { width: 150px; height: auto; overflow: visible; }
#cs-calc .cs-load-sun { transform-origin: 80px 30px; transform-box: view-box; animation: cs-load-spin 9s linear infinite; }
#cs-calc .cs-load-rays line { stroke-dasharray: 5 9; animation: cs-load-ray 0.9s linear infinite; }
#cs-calc .cs-load-panel { fill: #26344d; animation: cs-load-charge 9s ease-out forwards; }
#cs-calc .cs-load-shine { fill: #fff; opacity: 0; animation: cs-load-glint 2.4s ease-in-out 1s infinite; }
/* For screen readers only: the animation says it visually. */
#cs-calc .cs-load-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes cs-load-spin { to { transform: rotate(360deg); } }
@keyframes cs-load-ray { to { stroke-dashoffset: -28; } }
@keyframes cs-load-charge { 0% { fill: #26344d; } 60% { fill: #2f5c9e; } 100% { fill: #3a7bd5; } }
@keyframes cs-load-glint { 0%, 100% { opacity: 0; } 50% { opacity: 0.18; } }
@media (prefers-reduced-motion: reduce) {
  #cs-calc .cs-load-sun, #cs-calc .cs-load-rays line, #cs-calc .cs-load-shine { animation: none; }
  #cs-calc .cs-load-panel { animation-duration: 0.01s; }
}