/* Shared Django/HTMX components. Uses the design palette: forest, orange, muted, paper. */

/* Form fields (components/field.html) */
.kk-form{display:flex;flex-direction:column;gap:16px;width:100%}
.kk-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%}
.kk-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.kk-field>label{font:800 13px/1.12 Manrope,sans-serif;letter-spacing:-.03em;color:#123e32}
.kk-input{width:100%;min-width:0;padding:14px 16px;border:2px solid transparent;border-radius:8px;background:#ededed;font:15px/1.5 Inter,sans-serif;color:#123e32;outline-offset:3px}
.kk-input::placeholder{color:#52665c;opacity:1}
.kk-input:focus-visible{outline:2px solid #f65a30}
textarea.kk-input{resize:vertical;min-height:108px}
select.kk-input{appearance:auto;cursor:pointer}
.kk-field.has-error .kk-input{border-color:#c63c1b;background:#fff4f0}
.kk-field-error{font:13px/1.4 Inter,sans-serif;color:#c63c1b}
.kk-help{font:12px/1.5 Inter,sans-serif;color:#52665c}
.kk-on-white .kk-input{background:#ededed}
.kk-on-grey .kk-input{background:#fff}
.kk-button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:16px 20px;border:0;border-radius:8px;background:#f65a30;color:#fff;font:700 15px/1.12 Manrope,sans-serif;cursor:pointer}
.kk-button--forest{background:#123e32}
.kk-button--ghost{background:transparent;color:#123e32;border:2px solid #123e32;justify-content:center;width:auto}
.kk-button img{width:24px;height:24px}
.kk-button[disabled]{opacity:.6;cursor:progress}

/* Alerts / messages (components/message.html, *_success.html) */
.kk-alert{display:flex;flex-direction:column;gap:8px;width:100%;padding:24px;border-radius:12px;background:#dce8cf;color:#123e32;border:3px solid #fff}
.kk-alert h3{font:800 22px/1.2 Manrope,sans-serif;letter-spacing:-.02em}
.kk-alert p{font:15px/1.6 Inter,sans-serif;color:#2f4a3f}
.kk-alert--error{background:#fde3da}

/* HTMX request indicator */
.kk-indicator{display:none;align-items:center;gap:8px;font:13px/1 Inter,sans-serif;color:#52665c}
.htmx-request .kk-indicator,.htmx-request.kk-indicator{display:inline-flex}
.kk-indicator::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid #123e3240;border-top-color:#f65a30;animation:kk-spin .7s linear infinite}
@keyframes kk-spin{to{transform:rotate(360deg)}}
.htmx-request .kk-results,.kk-results.htmx-request{opacity:.55;transition:opacity .2s}
.htmx-added{animation:kk-fade .35s ease-out}
@keyframes kk-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Live search / category filter (components/filter_bar.html) */
.kk-filter{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:center;gap:12px;width:100%;padding:12px;border-radius:12px;background:#fff}
.kk-filter .kk-input{background:#ededed}
.kk-empty{width:100%;padding:40px 24px;border-radius:16px;background:#fff;text-align:center;font:15px/1.6 Inter,sans-serif;color:#52665c}
.kk-empty strong{display:block;font:800 22px/1.2 Manrope,sans-serif;color:#123e32;margin-bottom:8px}

/* Category chips (services/products/blog category pages) */
.kk-chips{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.kk-chip{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:999px;background:#fff;border:2px solid #fff;font:700 14px/1.2 Manrope,sans-serif;color:#123e32}
.kk-chip[aria-current="page"],.kk-chip:hover{background:#123e32;border-color:#123e32;color:#fff}

/* Data-driven versions of the fixed-width design rows */
.kk-wrap{flex-wrap:wrap}
.kk-service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:100%}
.kk-service-grid>*{width:100%;min-width:0}
.kk-service-grid>*>p,.kk-service-grid>*>a{width:100%}
.kk-stack{display:flex;flex-direction:column;gap:24px;width:100%}
.kk-faq-list{display:flex;flex-direction:column;gap:16px;width:100%}
.kk-faq-list>*,.kk-faq-list>*>p{width:100%}
.service-card .kk-card-link{color:inherit}
.service-card .kk-card-link:hover{text-decoration:underline;text-underline-offset:4px}
.service-card>[data-name^="Service image"] img{object-fit:cover}
.kk-feedback-grid>*{min-width:0}

/* Reviews / testimonials list */
.kk-review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:100%}
.kk-review{display:flex;flex-direction:column;gap:16px;padding:28px;border-radius:24px;background:#fff}
.kk-review .kk-stars{color:#f65a30;letter-spacing:2px;font-size:16px}
.kk-review blockquote{margin:0;font:16px/1.6 Inter,sans-serif;color:#2f4a3f}
.kk-review footer{display:flex;align-items:center;gap:12px;font:700 15px/1.3 Manrope,sans-serif;color:#123e32}
.kk-review footer small{display:block;font:400 13px/1.4 Inter,sans-serif;color:#52665c}
.kk-avatar{width:44px;height:44px;flex:0 0 44px;border-radius:50%;object-fit:cover;background:#dce8cf;display:flex;align-items:center;justify-content:center;font:800 14px Manrope,sans-serif;color:#123e32}
.kk-review-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px}

/* Detail pages (service/product) built on the journal layout */
.kk-detail-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.kk-detail-actions .journal-button{gap:16px}
.kk-detail-actions .kk-button--ghost{min-height:54px}
.kk-meta{display:flex;flex-wrap:wrap;gap:24px;margin-top:24px}
.kk-meta div{display:flex;flex-direction:column;gap:4px}
.kk-meta strong{font:800 20px/1.2 Manrope,sans-serif;color:#123e32}
.kk-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:8px}
.kk-features div{padding:20px;border-radius:16px;background:#fff}
.kk-features h3{font:800 18px/1.3 Manrope,sans-serif;color:#123e32;margin-bottom:6px}
.kk-features p{font-size:15px!important;line-height:1.6!important}
.kk-panel{padding:32px;border-radius:16px;background:#fff;border:3px solid #fff}
.kk-split{display:grid;grid-template-columns:minmax(0,416fr) minmax(0,864fr);gap:32px;align-items:start}
.kk-area-list{display:flex;flex-wrap:wrap;gap:12px}
.kk-area-list span{padding:12px 20px;border-radius:999px;background:#fff;font:700 15px/1.2 Manrope,sans-serif;color:#123e32}

@media(max-width:1100px){
 .kk-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .kk-review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .kk-form-row,.kk-filter,.kk-split,.kk-features,.kk-review-grid{grid-template-columns:1fr}
 .kk-service-grid{grid-template-columns:1fr}
 .kk-panel{padding:24px}
}
@media(prefers-reduced-motion:reduce){.htmx-added,.kk-indicator::before{animation:none}}

/* Rich text from the admin editor (blog excerpt & content) */
.kk-rich :is(p,ul,ol,blockquote,h3,pre)+:is(p,ul,ol,blockquote,h3,pre){margin-top:20px}
.kk-rich h3{font-size:23px;line-height:1.2;letter-spacing:-.025em;color:#123e32}
.kk-rich ul,.kk-rich ol{padding-left:1.4em;font-size:18px;line-height:1.85;color:#52665c}
.kk-rich ul{list-style:disc}.kk-rich ol{list-style:decimal}
.kk-rich li+li{margin-top:6px}
.kk-rich a{color:#123e32;text-decoration:underline;text-underline-offset:3px}
.kk-rich strong,.kk-rich b{color:#123e32}
.kk-rich blockquote{margin:0;padding:16px 24px;border-left:4px solid #f65a30;background:#fff;border-radius:0 12px 12px 0}
.kk-rich figure{margin:28px 0}
.kk-rich img{display:block;width:100%;height:auto;border-radius:16px;background:#e6ebdc}
.kk-rich p img{display:inline-block;width:auto;max-width:100%;vertical-align:middle}
.kk-rich figcaption{margin-top:10px;font-size:13px;line-height:1.5;color:#52665c}

/* Service card: the jobs included in a service (ServiceFeature) */
.kk-card-items{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0;padding:0;list-style:none;max-width:100%}
.kk-card-items li{padding:8px 14px;border-radius:999px;background:rgb(255 255 255 / 62%);font:500 14px/1.35 Inter,sans-serif;color:#123e32}
@media(max-width:760px){.kk-card-items li{font-size:13px;padding:6px 12px}}

/* Category page: compact category switcher above the services */
.kk-category-nav{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.kk-category-nav .kk-chip{background:#f6f5ee;border-color:#fff}
.kk-category-nav .kk-chip[aria-current="page"]{background:#123e32;border-color:#123e32;color:#fff}

/* ---------- Product detail page (kk-pd) ---------- */
.kk-pd{padding:48px 64px;background:#f6f5ee}
.kk-pd-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:start}
.kk-pd-main{aspect-ratio:1/1;border-radius:20px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.kk-pd-main>img{width:84%;height:84%;object-fit:contain}
.kk-pd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.kk-pd-thumb{aspect-ratio:1/1;border-radius:12px;background:#fff;border:2px solid transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.kk-pd-thumb.is-active{border-color:#123e32}
.kk-pd-thumb img{width:72%;height:72%;object-fit:contain}
.kk-pd-info h1{font:800 clamp(32px,3.4vw,46px)/1.08 Manrope,sans-serif;letter-spacing:-.04em;color:#123e32;margin:12px 0 10px}
.kk-pd-model{font:400 13.5px/1.5 Inter,sans-serif;color:#52665c}
.kk-pd-model b{color:#182b25;font-weight:600}
.kk-pd-price{margin:24px 0;padding:20px 24px;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.kk-pd-amount{font:800 36px/1 Manrope,sans-serif;letter-spacing:-.02em;color:#123e32}
.kk-pd-amount--quote{font-size:26px}
.kk-pd-was{font:400 15px Inter,sans-serif;color:#52665c;text-decoration:line-through}
.kk-pd-save{padding:6px 12px;border-radius:999px;background:#fde3da;color:#b23c17;font:700 13px Inter,sans-serif}
.kk-pd-quote-note{margin-top:8px;font:400 13px/1.5 Inter,sans-serif;color:#52665c}
.kk-pd-stock{width:100%;font:600 13px Inter,sans-serif;color:#23694e}
.kk-pd-stock::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:8px;vertical-align:1px}
.kk-pd-stock--out_of_stock{color:#b23c17}
.kk-pd-stock--pre_order,.kk-pd-stock--on_request{color:#8a6a12}
.kk-pd-heading{font:800 13px/1 Manrope,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#52665c;margin-bottom:12px}
.kk-pd-heading--gap{margin-top:24px}
.kk-pd-features ul{list-style:none;display:grid;gap:10px;padding:0}
.kk-pd-features li{display:flex;gap:10px;align-items:flex-start;font:400 15.5px/1.5 Inter,sans-serif;color:#182b25}
.kk-pd-features li::before{content:"";flex:0 0 20px;height:20px;margin-top:1px;border-radius:50%;background:#dce8cf url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123e32' stroke-width='3'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}
.kk-pd-summary{margin:0 0 10px;font:400 17px/1.6 Inter,sans-serif;color:#52665c;max-width:620px}
.kk-pd-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:24px 0}
.kk-pd-trust div{padding:14px;border-radius:12px;background:#fff;font:400 12.5px Inter,sans-serif;color:#52665c}
.kk-pd-trust b{display:block;font:800 15px Manrope,sans-serif;color:#123e32;margin-bottom:2px}
.kk-pd-cta{display:grid;grid-template-columns:1fr auto auto;gap:10px}
.kk-pd-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;height:52px;padding:0 20px;border-radius:8px;background:#f65a30;color:#fff;font:800 15px Manrope,sans-serif}
.kk-pd-ghost{display:flex;align-items:center;height:52px;padding:0 18px;border-radius:8px;border:2px solid #123e32;font:800 14px Manrope,sans-serif;color:#123e32}
.kk-pd-lower{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;margin-top:40px}
.kk-pd-lower--single{grid-template-columns:minmax(0,1fr)}
.kk-pd-panel{background:#fff;border-radius:16px;padding:28px}
.kk-pd-specs{width:100%;border-collapse:collapse;font:400 14px/1.5 Inter,sans-serif}
.kk-pd-specs th{text-align:left;padding:18px 0 8px;font:800 15px Manrope,sans-serif;color:#123e32}
.kk-pd-specs tr:first-child th{padding-top:0}
.kk-pd-specs td{padding:10px 12px;border-bottom:1px solid #eef0ea;vertical-align:top}
.kk-pd-specs td:first-child{width:42%;color:#52665c}
.kk-pd-specs tr:nth-child(even) td{background:#fafaf6}
.kk-pd-about .kk-rich p{font-size:15px;line-height:1.7;color:#52665c}
.kk-pd-box{display:flex;flex-wrap:wrap;gap:8px}
.kk-pd-box span{padding:6px 12px;border-radius:999px;background:#f6f5ee;font:400 13px Inter,sans-serif}
.kk-pd-note{margin-top:16px;padding:14px;border-radius:12px;background:#e8efe3;font:400 13px Inter,sans-serif;color:#123e32}
@media(max-width:1100px){.kk-pd{padding:40px 32px}}
@media(max-width:900px){.kk-pd-hero,.kk-pd-lower{grid-template-columns:1fr;gap:28px}}
@media(max-width:760px){.kk-pd{padding:32px 16px}.kk-pd-cta{grid-template-columns:1fr 1fr}.kk-pd-btn{grid-column:1/-1}.kk-pd-amount{font-size:30px}}

/* Missing content image: brand logo filling the image's own box (components/img_missing.html) */
.kk-img-missing{container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,3cqh,14px);width:100%;height:100%;min-height:120px;background:linear-gradient(135deg,#f3f2ea,#e6ebdc);color:#123e32;overflow:hidden}
.kk-img-missing img{width:clamp(28px,18cqmin,110px);height:auto;opacity:.9}
.kk-img-missing span{font:800 clamp(12px,6cqmin,30px)/1 Manrope,sans-serif;letter-spacing:-.03em;opacity:.85}
.kk-img-missing--hero{aspect-ratio:2/1;height:auto;border-radius:22px;max-height:560px}
.kk-img-missing--feature{min-height:380px;border-radius:16px}
.kk-img-missing--square{aspect-ratio:1/1;height:auto}

/* Language switcher (header) */
.kk-lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:#ededed;flex-shrink:0}
.kk-lang a{min-width:40px;padding:6px 10px;border-radius:999px;text-align:center;font:700 13px/1 Manrope,"Hind Siliguri",sans-serif;color:#52665c;text-decoration:none}
.kk-lang a[aria-current="true"]{background:#123e32;color:#fff}
.kk-lang a:not([aria-current]):hover{color:#123e32}

/* Bangla text: the design's Latin fonts have no Bengali glyphs, so Bengali characters
   (U+0980–09FF) in Manrope, Inter or Playfair text are drawn with Hind Siliguri. */
@font-face{font-family:"Manrope";src:url(/static/assets/ijwTs5juQtsyLLR5jN4cxBEofJs.ttf) format("truetype");font-weight:200 900;font-display:swap;unicode-range:U+0980-09FF,U+200C-200D,U+25CC}
@font-face{font-family:"Inter";src:url(/static/assets/ijwTs5juQtsyLLR5jN4cxBEofJs.ttf) format("truetype");font-weight:100 900;font-display:swap;unicode-range:U+0980-09FF,U+200C-200D,U+25CC}
@font-face{font-family:"Playfair Display";src:url(/static/assets/ijwTs5juQtsyLLR5jN4cxBEofJs.ttf) format("truetype");font-weight:400 900;font-display:swap;unicode-range:U+0980-09FF,U+200C-200D,U+25CC}
html[lang="bn"] body{line-height:1.6}

/* Images that got width/height from core.middleware: keep the ratio when CSS sets only the width.
   :where() has zero specificity, so any design rule that sets a height still wins. */
:where(img[data-auto-size]) { height: auto; }

/* Site Explorer (/site-map/): search-result style list of every page, with a live filter. */
.kk-serp-head{padding-bottom:24px}
.kk-explorer-search{display:flex;align-items:center;gap:12px;max-width:690px;margin-top:28px;padding:0 22px;border:1px solid #dfe1e5;border-radius:999px;background:#fff;color:#70757a;box-shadow:0 1px 6px rgba(32,33,36,.08)}
.kk-explorer-search:focus-within{box-shadow:0 1px 8px rgba(32,33,36,.2);border-color:transparent}
.kk-explorer-search input{flex:1;min-width:0;padding:15px 0;border:0;outline:0;background:transparent;font:400 16px/1.3 Arial,"Hind Siliguri",sans-serif;color:#202124}
.kk-serp-tabs{display:flex;flex-wrap:wrap;gap:6px 22px;max-width:690px;margin-top:22px;padding-bottom:10px;border-bottom:1px solid #dadce0}
.kk-serp-tabs a{font:500 14px/1.6 Arial,"Hind Siliguri",sans-serif;color:#5f6368;text-decoration:none}
.kk-serp-tabs a:hover{color:#1a0dab}
.kk-serp-stats{margin-top:12px;font:400 14px/1.4 Arial,"Hind Siliguri",sans-serif;color:#70757a}
.kk-serp{padding:8px 64px 64px;background:#fff}
.kk-serp-section{max-width:690px;padding-top:16px}
.kk-serp-section:first-of-type{padding-top:0}
.kk-serp-section h2{margin:24px 0 8px;font:700 13px/1.4 Arial,"Hind Siliguri",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#70757a}
.kk-serp-group{padding:12px 0;border-bottom:1px solid #f1f3f4}
.kk-serp-children{margin-left:28px;padding-left:18px;border-left:2px solid #e8eaed}
.kk-result{padding:14px 0;font-family:Arial,"Hind Siliguri",sans-serif}
.kk-result-site{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.kk-result-site img{width:28px;height:28px;border-radius:50%;border:1px solid #ecedef;background:#fff}
.kk-result-site span{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.kk-result-site b{font-size:14px;font-weight:400;color:#202124}
.kk-result-site cite{overflow:hidden;font-size:12px;font-style:normal;color:#4d5156;text-overflow:ellipsis;white-space:nowrap}
.kk-result h3{margin:0 0 4px;font-size:20px;font-weight:400;line-height:1.3}
.kk-result h3 a{color:#1a0dab;text-decoration:none}
.kk-result h3 a:visited{color:#681da8}
.kk-result h3 a:hover{text-decoration:underline}
.kk-result p{display:-webkit-box;margin:0;overflow:hidden;font-size:14px;line-height:1.58;color:#4d5156;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kk-result-foot{display:flex;align-items:center;gap:12px;margin-top:10px}
.kk-result-kind{padding:3px 10px;border-radius:999px;background:#f1f3f4;font-size:12px;color:#5f6368}
.kk-result-visit{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:999px;background:#123e32;font:700 13px/1 Manrope,"Hind Siliguri",sans-serif;color:#fff;text-decoration:none}
.kk-result-visit:hover{background:#f65a30}
.kk-explorer-none{max-width:690px;margin:24px 0 0;font:400 15px/1.5 Arial,"Hind Siliguri",sans-serif;color:#4d5156}
@media (max-width:760px){
 .kk-serp{padding:8px 24px 48px}
 .kk-serp-children{margin-left:8px;padding-left:12px}
 .kk-result h3{font-size:18px}
}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Service "About this service": space between the paragraphs of the description. */
.journal-prose #about p + p{margin-top:16px}