/* =========================================================================
   CODEROBOTICS — RESKIN LAYER
   -------------------------------------------------------------------------
   New typography + surface treatment (radius / shadow / buttons / cards /
   inputs / nav / spacing) + a real small-screen layer.

   RULES OF THIS FILE:
   -  NO colour changes. Every colour below is lifted verbatim from the
      existing theme (#26274b text, #2848ed CTA, #f8f9fb / #f1f2fb / #fff
      surfaces, #e1e1ef borders, rgba(40,72,237,*) / rgba(38,39,75,*) shadows).
   -  Loaded LAST on every page (see footer.php / admin/footer.php) so it wins
      the cascade over Bootstrap, newhome.css, stylesheet.css and the header
      <style> blocks. It still cannot beat inline style="" / !important, so a
      few view files carry one-line edits (see the plan file).

   FONT SWAP — how it works:
   The old design hard-codes  font-family:'Space Grotesk'  and
   font-family:'Manrope'  in ~40 view files (inline <style> + style="").
   Rather than edit them all, the @font-face blocks below RE-POINT those two
   family names (plus 'DM Sans') at a self-hosted body face. Bricolage
   Grotesque is then applied to real headings only, via selectors here.
      body / UI text .......... Plus Jakarta Sans
      headings ................ Bricolage Grotesque
   Files live in ../fonts/ . Google Fonts <link>/@import in header.php are
   commented out (fonts are now self-hosted, no render-blocking request).
   ========================================================================= */

/* ---- 1a. Real font faces ------------------------------------------------- */

@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/plus-jakarta-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/plus-jakarta-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/plus-jakarta-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/plus-jakarta-sans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/plus-jakarta-sans-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/bricolage-grotesque-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/bricolage-grotesque-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/bricolage-grotesque-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/bricolage-grotesque-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/bricolage-grotesque-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

/* ---- 1b. Aliases: old family names -> Plus Jakarta Sans ----------------- */
/* Any existing  font-family:'Space Grotesk' / 'Manrope' / 'DM Sans'  now
   renders as Plus Jakarta Sans. Icon fonts ("Font Awesome ...", boxicons,
   bootstrap-icons) are deliberately NOT aliased. */

@font-face{font-family:'Manrope';src:url('../fonts/plus-jakarta-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/plus-jakarta-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/plus-jakarta-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/plus-jakarta-sans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/plus-jakarta-sans-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

@font-face{font-family:'Space Grotesk';src:url('../fonts/plus-jakarta-sans-400.woff2') format('woff2');font-weight:300 400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/plus-jakarta-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/plus-jakarta-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/plus-jakarta-sans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/plus-jakarta-sans-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

@font-face{font-family:'DM Sans';src:url('../fonts/plus-jakarta-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/plus-jakarta-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/plus-jakarta-sans-700.woff2') format('woff2');font-weight:600 700;font-style:normal;font-display:swap}

/* ---- 2. Design tokens (existing palette only) -------------------------- */

:root{
  --font-primary:'Plus Jakarta Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-secondary:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:var(--font-secondary);

  --cr-text:#26274b;
  --cr-heading:#1a1d3a;
  --cr-muted:#5a5f7a;
  --cr-nav:#0d0c22;
  --cr-primary:#2848ed;
  --cr-primary-hover:#1a35c0;
  --cr-primary-tint:rgba(71,75,255,.10);
  --cr-bg:#f8f9fb;
  --cr-surface:#ffffff;
  --cr-lavender:#f1f2fb;
  --cr-border:#e1e1ef;

  --cr-radius-sm:10px;
  --cr-radius:14px;
  --cr-radius-lg:20px;
  --cr-radius-pill:999px;

  --cr-shadow-sm:0 1px 2px rgba(38,39,75,.06),0 1px 3px rgba(38,39,75,.08);
  --cr-shadow-md:0 6px 20px rgba(40,72,237,.08),0 2px 6px rgba(38,39,75,.06);
  --cr-shadow-lg:0 18px 48px rgba(40,72,237,.12);

  --cr-transition:180ms cubic-bezier(.2,.6,.2,1);
}

/* ---- 3. Base typography ---------------------------------------------------- */

html{overflow-x:hidden}

body{
  font-family:var(--font-primary);
  color:var(--cr-text);
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Typography only — NO colour is set here; headings keep their theme colour. */
h1,h2,h3,h4,h5,h6,
.text-12,
.section-title,.sec-title,
.cr-section-header h2,.cr-standout-header h2,.cr-achievements-header h2,
.cr-services-title,.cr-service-heading,
.cr-standout-card-title,.cr-standout-card h3,
.cr-prod-name,.cr-review-name,.cr-blog-title,
.cr-achievements-title,
.faq-question,.navbar-brand{
  font-family:var(--font-secondary);
  letter-spacing:-.02em;
  line-height:1.18;
}

h1,.text-12{font-weight:800}
h2,h3{font-weight:700}
h4,h5,h6{font-weight:600;letter-spacing:-.01em;line-height:1.3}

p{line-height:1.7}

.lead{
  font-family:var(--font-primary);
  font-weight:400;
  line-height:1.7;
  max-width:64ch;
}
.text-center .lead,.lead.text-center{margin-left:auto;margin-right:auto}

a{transition:color var(--cr-transition)}
/* NOTE: link colours are intentionally left to the existing theme — this file
   must not change any colour. */

hr{border-color:var(--cr-border);opacity:1}
::selection{background:var(--cr-primary-tint)}

/* ---- 4. Buttons --------------------------------------------------------- */

.btn,
button.btn,input.btn,input[type=submit],input[type=button],
.sign-in-button,
.navbar-form button,
#btn_parent button,#btn_sk1,#btn_sk2,
#detail_button,
.cr-show-more-btn,
#show-more-products-btn{
  border-radius:var(--cr-radius-pill) !important;
  font-family:var(--font-secondary) !important;   /* same face as h1 / menus */
  font-weight:600;
  letter-spacing:-.01em;
  transition:transform var(--cr-transition),box-shadow var(--cr-transition),background var(--cr-transition),color var(--cr-transition);
}

/* tab buttons on the product page: match the font, keep their own shape */
.prevbutton,.nav-tabs .nav-link{font-family:var(--font-secondary) !important;font-weight:600}

/* product-detail: the description-tab title (<h1 class="text-2">) is too small */
#details h1,#details h1.text-2,#mtsapce h1.text-2{
  font-size:clamp(1.4rem,calc(1rem + 1.6vw),2rem) !important;
  font-weight:700 !important;
  line-height:1.2;
  margin-bottom:1rem !important;
}

.btn:hover,
.sign-in-button:hover,
#btn_parent button:hover,
#detail_button:hover,
#show-more-products-btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--cr-shadow-md);
}
.btn:active,.sign-in-button:active{transform:translateY(0)}

.btn:focus-visible,
.sign-in-button:focus-visible,
a:focus-visible,
button:focus-visible,
.form-control:focus-visible{
  outline:2px solid var(--cr-primary);
  outline-offset:2px;
}

/* ---- 5. Cards / surfaces --------------------------------------------------- */

.card,
.cr-prod-card,.cr-standout-card,
.cr-review-card,.cr-blog-card,
.cr-service-card,
.faq-item{
  border-radius:var(--cr-radius-lg);
  border:1px solid var(--cr-border);
  background:var(--cr-surface);
  box-shadow:var(--cr-shadow-sm);
  transition:transform var(--cr-transition),box-shadow var(--cr-transition),border-color var(--cr-transition);
}

.card:hover,
.cr-prod-card:hover,.cr-standout-card:hover,
.cr-review-card:hover,.cr-blog-card:hover,
.cr-service-card:hover{
  box-shadow:var(--cr-shadow-md);
  transform:translateY(-3px);
}

.cr-cat-card{border-radius:var(--cr-radius);border-color:var(--cr-border)}
.cr-stat-card{border-radius:var(--cr-radius-lg)}

/* ---- 6. Inputs ---------------------------------------------------------- */

.form-control,.form-select,
input[type=text],input[type=email],input[type=password],
input[type=search],input[type=tel],input[type=number],
textarea,select,
.navbar-form input,
.bootstrap-select .dropdown-toggle{
  border-radius:var(--cr-radius) !important;
  border:1px solid var(--cr-border);
  font-family:var(--font-primary);
  transition:border-color var(--cr-transition),box-shadow var(--cr-transition);
}

.form-control:focus,.form-select:focus,
textarea:focus,select:focus,
.navbar-form input:focus{
  border-color:var(--cr-primary);
  box-shadow:0 0 0 3px var(--cr-primary-tint);
  outline:none;
}

.navbar-form,
.navbar-form input{border-radius:var(--cr-radius-pill) !important}
.navbar-form{max-width:100%}

/* ---- 7. Nav polish (colours untouched) -------------------------------- */

.fznaMn,
header .fznaMn{
  border-bottom:1px solid var(--cr-border);
  box-shadow:var(--cr-shadow-sm);
}

.sign-in-button{border-radius:var(--cr-radius-pill) !important}
.menu-item a{transition:color var(--cr-transition),background var(--cr-transition)}

/* menu / nav text uses the display font — same family as h1..h6.
   !important because a couple of items carry an inline font-family. */
header a,
.menu-item-title a,
nav.jkkBkE a,.product-finder,.product-finder .label,
.dropdown-toggle,
header .dropdown-menu .dropdown-item,
.dQHGwq span,
.sign-in-button,
.dropdown-content a,
#MENU_MODAL .menu .menu-item a,
#MENU_MODAL .menu .menu-item a span,
#footer .nav .nav-link,
#footer .finaltext,.finaltext{
  font-family:var(--font-secondary) !important;
  font-weight:500;
  letter-spacing:-.01em;
}

/* ---- 8. Section rhythm (padding only, no background changes) ---------- */

#content>section,
.cr-section-category,.cr-section-products,
.cr-services-section,.cr-standout-section,
.cr-achievements-section,.cr-faq-section,
.cr-testimonials-section,.cr-blogs-section{
  padding-top:clamp(2.25rem,5vw,3.75rem);
  padding-bottom:clamp(2.25rem,5vw,3.75rem);
}

.cr-carousel-shell{margin-top:1.5rem;margin-bottom:2rem}

/* ---- 9. Media hygiene ------------------------------------------------- */

#content img,#content video,#content iframe{max-width:100%}
table{max-width:100%}
pre,code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace}
pre{overflow:auto;border-radius:var(--cr-radius-sm)}

/* =========================================================================
   ADMIN + SELLER PANEL  (body#body-pd.body-pd — same shell for both)
   Body text -> Plus Jakarta Sans.  Menus, tables, buttons, titles ->
   Bricolage Grotesque (the h1 face).  Icons / colours left alone.
   ========================================================================= */

.body-pd,.body-pd .header{font-family:var(--font-primary)}

/* menus (sidebar + top bar) */
.body-pd .nav_link,.body-pd .nav_name,
.body-pd .nav_list a,.body-pd .nav_list a span,
.body-pd .l-navbar a,.body-pd .l-navbar span,
.body-pd .header .font,.body-pd .logout .font,
.body-pd .dropdown-menu .dropdown-item,
.body-pd .breadcrumb,.body-pd .breadcrumb a{
  font-family:var(--font-secondary) !important;
}

/* tables — headers AND body cells */
.body-pd table,.body-pd .table,
.body-pd table th,.body-pd table td,
.body-pd .dataTable th,.body-pd .dataTable td,
.body-pd .dataTables_wrapper,.body-pd .dataTables_info,
.body-pd .dataTables_length,.body-pd .dataTables_filter{
  font-family:var(--font-secondary) !important;
}

/* titles / headings */
.body-pd h1,.body-pd h2,.body-pd h3,
.body-pd h4,.body-pd h5,.body-pd h6,
.body-pd .card-title,.body-pd .page-title,.body-pd .title{
  font-family:var(--font-secondary) !important;
}

/* buttons (all Bootstrap variants + datatables paginate/export) */
.body-pd .btn,.body-pd button.btn,
.body-pd input[type=submit],.body-pd input[type=button],
.body-pd .dataTables_wrapper .paginate_button,
.body-pd .dataTables_wrapper .dt-button,
.body-pd .dt-buttons .btn{
  font-family:var(--font-secondary) !important;
  font-weight:600;
  border-radius:var(--cr-radius-pill) !important;
}

/* surface polish (no colour change) */
.body-pd .card,.body-pd .panel{
  border-radius:var(--cr-radius) !important;
  border:1px solid var(--cr-border);
  box-shadow:var(--cr-shadow-sm);
}
.body-pd .form-control,.body-pd .form-select,
.body-pd input[type=text],.body-pd input[type=email],
.body-pd input[type=password],.body-pd textarea{
  border-radius:var(--cr-radius-sm) !important;
}

/* keep the admin login screen's own layout too */
.authincation-content .btn{font-family:var(--font-secondary) !important;font-weight:600;border-radius:var(--cr-radius-pill) !important}

/* Note: icon fonts (Font Awesome / boxicons / bootstrap-icons) declare their own
   font-family with !important on their glyph classes, so nothing here reaches them. */

/* =========================================================================
   MOBILE LAYER
   ========================================================================= */

@media (max-width:1024px){
  .container,.container-lg,.container-md,.container-sm{
    padding-left:16px;padding-right:16px;
  }
  /* oversized gaps (catches inline style="" too) */
  [style*="gap: 239px"],[style*="gap:239px"]{gap:16px !important}
  [style*="gap: 118px"],[style*="gap:118px"],
  .logosecslide{gap:20px !important}
  [style*="gap: 168px"],[style*="gap:168px"],
  [style*="gap: 100px"],[style*="gap:100px"]{gap:24px !important}

  /* the desktop header search bar is a hard 400px wide and has no mobile
     variant — hide it where the nav collapses (mobile uses the hamburger). */
  .navbar-form{display:none !important}
}

@media (max-width:768px){
  h1,.text-12{font-size:clamp(1.55rem,6vw,2.15rem);line-height:1.2}
  h2{font-size:clamp(1.35rem,5vw,1.8rem)}
  h3{font-size:clamp(1.15rem,4.2vw,1.4rem)}

  #content img,#content video,#content iframe,
  .content-body img,.content-body table{max-width:100% !important}
  #content img:not([style*="height"]),#content video,#content iframe{height:auto}
  main img,section img,.container img{max-width:100%;height:auto}
  pre{max-width:100%;overflow:auto}

  /* --- any content table scrolls inside its own box (not just #content) --- */
  #content table,.content-body table,
  main table,section table,.container table{
    display:block;max-width:100%;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
  table.dataTable,#example{white-space:nowrap;width:100% !important}
  .dataTables_wrapper,.dt-container,#example_wrapper,
  .table-responsive{max-width:100%;overflow-x:auto}

  /* --- product-detail tab strip: long labels must wrap / scroll --- */
  #collTab,.nav-tabs{flex-wrap:wrap;overflow-x:auto}
  #collTab .nav-item,.nav-tabs .nav-item{flex:0 0 auto}
  .prevbutton{
    white-space:normal !important;
    font-size:.9rem !important;
    padding-left:14px !important;padding-right:14px !important;
    width:auto !important;min-width:0 !important;
  }

  /* --- product-detail video (Plyr) must be fluid --- */
  .viout,.video-container,#player,
  .plyr,.plyr__video-embed,.video-container iframe,#player iframe{
    width:100% !important;max-width:100% !important;
    margin-left:0 !important;margin-right:0 !important;
  }
  .plyr{min-width:0}

  /* known overflow / offset offenders */
  #btn_parent{margin-left:0 !important;margin-top:0 !important;flex-wrap:wrap}
  #btn_parent button{width:auto !important;min-width:180px}
  .card-heart{gap:12px !important;flex-wrap:wrap;justify-content:space-between !important}
  [style*="margin-left: -47px"],[style*="margin-left:-47px"]{margin-left:0 !important}
  [style*="left: 223px"],[style*="left:223px"]{position:static !important;margin:0 auto !important}

  /* cookie box within viewport */
  .cookie-consent-box{
    left:12px !important;right:12px !important;
    width:auto !important;max-width:none !important;
    top:auto !important;bottom:12px !important;
    transform:none !important;
  }

  /* tap targets */
  .nav-link,.menu-item a,.btn,.sign-in-button,
  button:not(.close-button):not(.close-layer):not(.backdrop):not(.btn-close):not(.carousel-control-prev):not(.carousel-control-next):not(.prevbutton){
    min-height:44px;
  }
  .btn,.sign-in-button{display:inline-flex;align-items:center;justify-content:center}

  /* stack any flex row that was spaced by a large inline gap */
  .d-lg-flex[style*="gap"]{flex-direction:column}

  #footer .row{gap:24px}
  #footer .nav{justify-content:center}
}

@media (max-width:400px){
  .container,.container-lg,.container-md,.container-sm{padding-left:12px;padding-right:12px}
  h1,.text-12{font-size:clamp(1.4rem,7vw,1.8rem)}
  .slider-image{width:100% !important}
  #btn_parent button{min-width:0;width:100% !important}
}