/* SHL Accounting Elementor Addon - front-end styles. Colours come from CSS variables; change them in each widget's Style tab. */
.shl-w{--b:#16A34A;--b2:#15803D;--hi:#F59E0B;--tint:#E8F9EE;--text:#0F172A;--muted:#5B6678;--line:#E6EAF2;--card:#fff;--soft:#F5F7FB;--bg:#fff;--shadow:0 12px 34px rgba(15,23,42,.08);
font-family:"Noto Sans Sinhala","Inter",system-ui,sans-serif;color:var(--text);line-height:1.7;box-sizing:border-box;width:100%;position:relative}
.shl-w *,.shl-w *:before,.shl-w *:after{box-sizing:border-box}
.shl-w h1,.shl-w h2,.shl-w h3,.shl-w p{margin:0;padding:0}
.shl-w a{text-decoration:none}
.shl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,var(--b),var(--b2));color:#fff!important;padding:13px 26px;border-radius:14px;font:700 15px/1.4 "Noto Sans Sinhala",Inter,sans-serif;border:0;cursor:pointer;min-height:44px;box-shadow:0 10px 24px color-mix(in srgb,var(--b) 32%,transparent);transition:transform .2s}
.shl-btn:hover{transform:translateY(-2px)}
.shl-btn.out{background:var(--card);color:var(--text)!important;border:1.5px solid var(--line);box-shadow:none}
.shl-btn.white{background:#fff;color:var(--b2)!important;box-shadow:none}
/* heading */
.shl-eye{text-align:center;color:var(--b);font:800 12px Inter,sans-serif;letter-spacing:.16em}
.shl-h2{font-size:clamp(25px,4vw,36px);text-align:center;margin:8px 0 10px!important;line-height:1.35}
.shl-sub{text-align:center;color:var(--muted);max-width:640px;margin:0 auto 12px!important}
/* hero */
.shl-hero{padding:28px 0 12px}
.shl-hero .shl-blob{position:absolute;width:280px;height:280px;top:0;right:-60px;border-radius:50%;filter:blur(60px);opacity:.3;background:var(--b);animation:shl-fl 9s ease-in-out infinite;pointer-events:none}
.shl-hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;position:relative}
.shl-badge{display:inline-flex;gap:8px;align-items:center;padding:7px 18px;border-radius:99px;font:700 13px "Noto Sans Sinhala",Inter,sans-serif;color:#fff;background:linear-gradient(110deg,var(--b) 30%,#86EFAC 50%,var(--b) 70%);background-size:200% 100%;animation:shl-sh 3s linear infinite}
@keyframes shl-sh{to{background-position:-200% 0}}
.shl-tagline{margin:14px 0 -4px;font-weight:700;font-size:15px;color:var(--hi)}
.shl-h1{font-size:clamp(30px,5.2vw,54px);line-height:1.25;margin:18px 0 12px!important;letter-spacing:-.01em}
.shl-h1 em{font-style:normal;color:var(--b)}
.shl-caret{display:inline-block;width:3px;height:.9em;background:var(--b);margin-left:4px;vertical-align:middle;animation:shl-bl 1s steps(2) infinite}
@keyframes shl-bl{50%{opacity:0}}
.shl-hero .shl-p{color:var(--muted);margin:0 0 26px!important;max-width:520px}
.shl-btns{display:flex;gap:12px;flex-wrap:wrap}
.shl-hs{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.shl-stat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 20px;min-width:116px;box-shadow:var(--shadow)}
.shl-stat b{display:block;font:800 26px Inter,sans-serif;color:var(--b);line-height:1.3}
.shl-stat span{font-size:12px;color:var(--muted)}
.shl-photo{aspect-ratio:4/5;max-width:360px;width:100%;margin:auto;border-radius:34px;background:linear-gradient(160deg,var(--tint),var(--soft));border:1px solid var(--line);display:grid;place-items:center;text-align:center;position:relative;box-shadow:var(--shadow);animation:shl-fl 6s ease-in-out infinite}
.shl-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:34px}
.shl-photo-ph b{font-size:72px;display:block}.shl-photo-ph small{color:var(--muted)}
@keyframes shl-fl{50%{transform:translateY(-12px)}}
.shl-chip{position:absolute;display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);padding:10px 16px;border-radius:16px;box-shadow:var(--shadow);font-size:13px;line-height:1.3;animation:shl-fl 5s ease-in-out infinite;z-index:2}
.shl-chip b{display:block;font-size:14px}.shl-chip small{color:var(--muted)}.shl-chip em{font-style:normal;font-size:22px}
.shl-chip.c1{top:30px;left:-34px}.shl-chip.c2{top:46%;right:-30px;animation-delay:-1.5s}.shl-chip.c3{bottom:34px;left:-24px;animation-delay:-3s}
/* grids */
.shl-grid{display:grid;gap:20px;grid-template-columns:repeat(4,1fr)}
/* feature cards */
.shl-fc{--c:#16A34A;position:relative;overflow:hidden;border-radius:24px;border:1.5px solid var(--line);background:var(--card);cursor:pointer;transition:transform .35s,box-shadow .35s,border-color .35s,background .4s,color .3s;-webkit-tap-highlight-color:transparent}
.shl-fc:hover{transform:translateY(-8px);border-color:var(--c);box-shadow:0 18px 42px color-mix(in srgb,var(--c) 30%,transparent)}
.shl-fimg{height:160px;display:grid;place-items:center;font-size:64px;position:relative;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 22%,var(--card)),color-mix(in srgb,var(--c) 6%,var(--card)));transition:background .4s}
.shl-fimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shl-fimg span{transition:transform .45s;line-height:1.2}.shl-fc:hover .shl-fimg span{transform:scale(1.2) rotate(-8deg)}
.shl-fb{padding:20px 22px 24px;position:relative}
.shl-fb h3{font-size:19px;margin:0 0 6px!important;line-height:1.4}.shl-fb p{color:var(--muted);font-size:15px}
.shl-more{max-height:0;overflow:hidden;opacity:0;font-size:14px;color:var(--muted);transition:max-height .5s,opacity .4s,margin .4s}
.shl-tap{display:block;margin-top:12px;font:700 12px Inter,sans-serif;color:var(--c);letter-spacing:.04em}
.shl-fc.act{background:linear-gradient(145deg,var(--c),color-mix(in srgb,var(--c) 55%,#000));border-color:var(--c);color:#fff;transform:translateY(-8px) scale(1.02);box-shadow:0 24px 54px color-mix(in srgb,var(--c) 48%,transparent)}
.shl-fc.act h3{color:#fff}.shl-fc.act p,.shl-fc.act .shl-more,.shl-fc.act .shl-tap{color:rgba(255,255,255,.94)}
.shl-fc.act .shl-more{max-height:180px;opacity:1;margin-top:10px}.shl-fc.act .shl-fimg{background:rgba(255,255,255,.18)}
.shl-fc.act:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.45),transparent 55%);animation:shl-rp .8s ease-out forwards}
@keyframes shl-rp{from{opacity:1;transform:scale(.2)}to{opacity:0;transform:scale(1.8)}}
/* process */
.shl-proc{display:grid;max-width:760px;margin:auto;position:relative}
.shl-proc:before{content:"";position:absolute;left:21px;top:10px;bottom:10px;width:2px;background:var(--line)}
.shl-pi{display:flex;gap:20px;padding:0 0 26px;position:relative}
.shl-pi i{flex:none;width:44px;height:44px;border-radius:50%;background:var(--b);color:#fff;display:grid;place-items:center;font:800 15px Inter,sans-serif;z-index:1;font-style:normal}
.shl-pi h3{font-size:18px;line-height:1.4}.shl-pi p{margin:2px 0 0!important;color:var(--muted);font-size:15px}
/* tabs + cards */
.shl-tabs{display:flex;gap:6px;justify-content:center;background:var(--soft);border:1px solid var(--line);padding:5px;border-radius:99px;width:max-content;max-width:100%;margin:0 auto 26px;flex-wrap:wrap}
.shl-tab{border:0;background:transparent;color:var(--muted);padding:10px 26px;border-radius:99px;font:700 15px Inter,sans-serif;cursor:pointer;min-height:44px}
.shl-tab.on{background:var(--b);color:#fff}
.shl-pane{display:none}.shl-pane.on{display:grid;animation:shl-in .4s}
@keyframes shl-in{from{opacity:0;transform:translateY(10px)}}
.shl-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px;transition:transform .25s,box-shadow .25s}
.shl-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.shl-card h3{margin:0 0 6px!important;font-size:18px;line-height:1.4}
.shl-card img.shl-cimg{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;margin-bottom:14px}
.shl-tag{display:inline-block;background:var(--tint);color:var(--b);font:800 11px Inter,sans-serif;letter-spacing:.08em;padding:3px 12px;border-radius:99px;margin-bottom:10px}
.shl-row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-bottom:1px dashed var(--line);padding:9px 0;font-size:15px}.shl-row b{color:var(--b)}
.shl-card .shl-p{color:var(--muted);font-size:15px}
.shl-soon{text-align:center;max-width:520px;margin:0 auto;padding:44px 26px}.shl-soon .m{font-size:46px;display:inline-block;animation:shl-fl 3s ease-in-out infinite}
/* marquee */
.shl-mq{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.shl-mqt{display:flex;gap:18px;width:max-content;animation:shl-mv var(--sp,45s) linear infinite;padding:6px 0}
.shl-mqt.rev{animation-direction:reverse}.shl-mq:hover .shl-mqt{animation-play-state:paused}
@keyframes shl-mv{to{transform:translateX(-50%)}}
.shl-tc{width:340px;flex:none;white-space:normal}
.shl-tc .who{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.shl-av{--c:#16A34A;flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 55%,#000));color:#fff;font:800 18px Inter,sans-serif;overflow:hidden;border:3px solid var(--card);box-shadow:0 0 0 2px var(--c)}
.shl-av img{width:100%;height:100%;object-fit:cover}
.shl-tc b{display:block;line-height:1.3}.shl-tc small{color:var(--muted)}.shl-st{color:var(--hi);letter-spacing:2px;font-size:14px}
.shl-tc p{color:var(--text);font-size:15px}
.shl-gp{--c:#16A34A;width:230px;aspect-ratio:4/5;border-radius:22px;position:relative;overflow:hidden;display:grid;place-items:center;font-size:54px;background:linear-gradient(150deg,color-mix(in srgb,var(--c) 28%,var(--card)),color-mix(in srgb,var(--c) 6%,var(--card)));border:1px solid var(--line);transition:transform .4s;flex:none}
.shl-gp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.shl-gp:hover{transform:scale(1.05) rotate(-1.5deg)}
.shl-gp small{position:absolute;left:14px;bottom:12px;font:700 13px "Noto Sans Sinhala",sans-serif;color:var(--text);background:color-mix(in srgb,var(--bg) 85%,transparent);padding:3px 12px;border-radius:99px;line-height:1.5}
/* link list */
.shl-links{display:grid;gap:12px;max-width:720px;margin:auto}
.shl-links a{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px;color:var(--text);font-weight:700;transition:.2s}
.shl-links a:hover{border-color:var(--b);transform:translateX(4px)}
.shl-links i{font-style:normal;width:44px;height:44px;flex:none;border-radius:14px;background:var(--tint);display:grid;place-items:center;font-size:22px}
.shl-links small{display:block;color:var(--muted);font-weight:500}
/* cta */
.shl-cta{background:linear-gradient(135deg,var(--b),var(--b2));color:#fff;text-align:center;border-radius:30px;padding:56px 22px;position:relative;overflow:hidden}
.shl-cta h2{color:#fff;font-size:clamp(25px,4vw,36px);margin:0 0 10px!important;line-height:1.35}
.shl-cta p{margin:0 0 24px!important;opacity:.92}.shl-cta .shl-btn{margin:4px}
/* reveal */
.shl-js .shl-rv{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s}.shl-js .shl-rv.in{opacity:1;transform:none}
.elementor-editor-active .shl-rv{opacity:1!important;transform:none!important}
@media(max-width:1024px){.shl-grid{grid-template-columns:repeat(2,1fr)}.shl-hero-in{grid-template-columns:1fr}.shl-photo{max-width:300px}.shl-chip.c1{left:-8px}.shl-chip.c2{right:-8px}.shl-chip.c3{left:-6px}}
@media(max-width:767px){.shl-grid{grid-template-columns:1fr}.shl-hero .shl-btns .shl-btn{width:100%}.shl-stat{min-width:0;flex:1;padding:12px 14px}.shl-stat b{font-size:22px}.shl-tc{width:290px}.shl-gp{width:190px}.shl-tab{padding:10px 18px}.shl-photo{max-width:260px}}
@media(prefers-reduced-motion:reduce){html:not(.shl-always-motion) .shl-w *{animation:none!important;transition:none!important}html:not(.shl-always-motion) .shl-js .shl-rv,html:not(.shl-always-motion).shl-js .shl-rv{opacity:1;transform:none}}
/* extras */
.shl-al-left .shl-eye,.shl-al-left .shl-h2,.shl-al-left .shl-sub{text-align:left}.shl-al-left .shl-sub{margin-left:0!important}
.shl-pane.on{gap:20px}
.shl-btn.sm{padding:9px 20px;font-size:14px;box-shadow:none;min-height:40px}


/* Kadence / WordPress integration */
html{scroll-behavior:smooth;scroll-padding-top:var(--shl-scroll-offset,90px)}
.shl-al-right .shl-eye,.shl-al-right .shl-h2,.shl-al-right .shl-sub{text-align:right}.shl-al-right .shl-sub{margin-right:0!important}
.shl-w .shl-h2,.shl-w .shl-h1,.shl-w .shl-fb h3,.shl-w .shl-card h3,.shl-w .shl-pi h3,.shl-w .shl-cta h2{font-family:inherit;color:inherit;text-transform:none}
.shl-cta h2{color:#fff}
.shl-w .shl-links a:hover,.shl-w .shl-links a:focus{color:var(--text)}
.shl-w .shl-photo>img,.shl-w .shl-fimg img,.shl-w .shl-gp img,.shl-w .shl-av img,.shl-w img.shl-cimg{max-width:none}
.elementor-widget[class*="elementor-widget-shl_"] .elementor-widget-container{overflow:visible}
/* column fallbacks (Elementor "Columns" control overrides these) */
.shl-pane{grid-template-columns:repeat(2,1fr)}
@media(max-width:767px){.shl-pane{grid-template-columns:1fr}}
.shl-hero{overflow-x:clip}
.shl-hero .shl-blob{right:0}

/* Dark mode for the widgets + theme-aware container classes (works with the SHL Theme and with the plugin's own theme module) */
html[data-shl-theme="dark"] .shl-w{--text:#ECFDF3;--muted:#9DB8A8;--line:#1C3A28;--card:#10261A;--soft:#0B1C12;--bg:#07130C;--tint:#12301F;--shadow:0 12px 34px rgba(0,0,0,.4);--b:#4ADE80;--b2:#86EFAC}
html[data-shl-theme="dark"] .shl-btn.white{color:#14532D!important}
.shl-soft{background:var(--shl-soft,#F5F7FB)}
.shl-hero-bg{background:linear-gradient(160deg,var(--shl-tint,#E8F9EE),var(--shl-bg,#fff))}


/* ===== v1.3: box style (chathuradev look): squarer corners, solid cards, 1px borders; icons instead of emoji ===== */
.shl-w{--r:12px;--rs:8px}
.shl-btn,.shl-btn.sm{border-radius:var(--rs)}
.shl-badge,.shl-tab,.shl-tag{border-radius:var(--rs)}
.shl-tabs{border-radius:var(--r);padding:4px}.shl-tab{border-radius:var(--rs)}
.shl-stat,.shl-chip,.shl-card,.shl-links a{border-radius:var(--r);background:var(--card);box-shadow:none}
.shl-stat,.shl-chip{border-color:var(--line)}
.shl-photo,.shl-photo>img{border-radius:var(--r)}
.shl-fc{border-radius:var(--r);border-width:1px;background:var(--card)}
.shl-fc:hover{transform:translateY(-4px);box-shadow:0 10px 28px color-mix(in srgb,var(--c) 22%,transparent)}
.shl-fc.act{transform:translateY(-4px)}
.shl-fimg{height:130px;font-size:44px}
.shl-gp{border-radius:var(--r)}.shl-gp small{border-radius:var(--rs);background:var(--card)}
.shl-links i{border-radius:var(--rs)}
.shl-av{border-radius:var(--rs)}
.shl-cta{border-radius:var(--r)}
.shl-card img.shl-cimg{border-radius:var(--rs)}
/* corner accent on boxes (small coloured notch, like a terminal window) */
.shl-card,.shl-stat{position:relative}
.shl-card:before,.shl-stat:before{content:"";position:absolute;left:-1px;top:14px;width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--b)}

/* icons (Font Awesome inside widgets) */
.shl-ic{font-size:1em;line-height:1;color:var(--b)}
.shl-fimg .shl-ic{color:var(--c)}
.shl-fc.act .shl-fimg .shl-ic{color:#fff}
.shl-chip em .shl-ic{font-size:20px}
.shl-links i .shl-ic{font-size:20px}
.shl-badge .shl-ic{color:#fff;font-size:.95em}
.shl-photo-ph b .shl-ic{font-size:64px;color:var(--b)}
.shl-soon .m .shl-ic{font-size:44px}
.shl-gp .shl-ic{color:var(--c);font-size:44px}
/* review stars: SVG */
.shl-st{display:inline-flex;gap:3px;letter-spacing:0}
.shl-st svg{width:16px;height:16px;fill:var(--hi)}
/* animated Telegram emoji (Lottie) */
.shl-tge{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.25em;line-height:1}
.shl-tge svg{width:100%!important;height:100%!important;display:block}
.shl-fimg .shl-tge{width:64px;height:64px;vertical-align:middle}
.shl-photo-ph b .shl-tge{width:96px;height:96px}
.shl-chip em .shl-tge{width:28px;height:28px}
.shl-links i .shl-tge{width:28px;height:28px}
.shl-soon .m .shl-tge{width:64px;height:64px}
.shl-gp .shl-tge{width:72px;height:72px}

/* ===== v1.4: SVG icons + colours/animation parity with the SHL HTML design ===== */
.shl-ic{width:1em;height:1em;display:inline-block;vertical-align:-.14em;flex:none;color:var(--b);stroke-width:1.9;overflow:visible}
.shl-fimg{font-size:50px}
.shl-fimg .shl-ic{color:var(--c);width:1em;height:1em;vertical-align:middle}
.shl-fc.act .shl-fimg .shl-ic{color:#fff}
.shl-chip em .shl-ic{font-size:22px;vertical-align:middle}
.shl-links i .shl-ic{font-size:22px}
.shl-badge .shl-ic{color:currentColor;font-size:15px}
.shl-photo-ph b{font-size:72px;line-height:1.1}
.shl-photo-ph b .shl-ic{font-size:72px;color:var(--b)}
.shl-soon .m .shl-ic{font-size:46px}
.shl-gp{font-size:46px}.shl-gp .shl-ic{color:var(--c);font-size:46px}
/* hero background like the HTML: soft tinted glows in two corners */
.shl-hero-bg{background:radial-gradient(700px 360px at 88% 0,var(--shl-tint,#E8F9EE),transparent 70%),radial-gradient(500px 300px at 0 100%,var(--shl-tint,#E8F9EE),transparent 70%)}
/* dark mode: bright green buttons/badges get dark text (as in the HTML) */
html[data-shl-theme="dark"] .shl-btn{color:#07130C!important}
html[data-shl-theme="dark"] .shl-btn.out{color:var(--text)!important}
html[data-shl-theme="dark"] .shl-btn.white{color:#15803D!important}
html[data-shl-theme="dark"] .shl-badge,html[data-shl-theme="dark"] .shl-tab.on,html[data-shl-theme="dark"] .shl-pi i{color:#07130C}
html[data-shl-theme="dark"] .shl-cta{color:#07130C}
html[data-shl-theme="dark"] .shl-cta h2,html[data-shl-theme="dark"] .shl-cta p{color:#07130C}