.ehsic-app{
  /* ===== COLOR THEME — edit these to re-color the whole block ===== */
  --ehsic-accent:#0e7c86;
  --ehsic-accent-dark:#0b5f66;
  --ehsic-card-bg:#f1f8f8;
  --ehsic-tag-bg:#e4f2f1;
  --ehsic-tag-text:#0e6b73;
  --ehsic-status-bg:#eaf5f0;
  --ehsic-status-text:#1a6b4f;
  --ehsic-ink:#16202e;
  --ehsic-muted:#5b6b7d;
  --ehsic-line:#dbe8e8;
  /* ================================================================== */

  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ehsic-ink);

  /* ===== ELEMENTOR FULL-WIDTH COMPATIBILITY =====
     No fixed/restrictive max-width on the main wrapper — it simply fills
     whatever container holds it. Inside a normal boxed page/column it
     stays boxed; inside an Elementor "Full Width" section/container it
     stretches to the full available width automatically. width:100% (not
     100vw) avoids the horizontal-scrollbar bug that 100vw causes. */
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
  box-sizing:border-box;
  overflow-x:hidden;
}
.ehsic-app *{ box-sizing:border-box; }
.ehsic-app img{ max-width:100%; height:auto; }

/* Extra safety net: some themes/page-builders put a max-width on generic
   wrapper elements inside their containers. These rules are scoped ONLY to
   .ehsic-app nested in those containers — Elementor's own classes/layout are
   never touched or overridden globally. */
.elementor-widget-container .ehsic-app,
.elementor-element .ehsic-app,
.e-con .ehsic-app,
.e-con-inner .ehsic-app,
.elementor-section .ehsic-app{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
}
.ehsic-app a{ color:var(--ehsic-accent-dark); }
.ehsic-app h1{ font-size:28px; margin:0 0 8px; line-height:1.3; }
.ehsic-app h2{ font-size:22px; margin:0 0 6px; line-height:1.35; }
.ehsic-app h3{ font-size:16px; margin:0 0 10px; }
.ehsic-app p{ margin:0 0 16px; }
.ehsic-app .ehsic-sub{ font-size:15px; color:var(--ehsic-muted); margin:0 0 24px; line-height:1.55; }

.ehsic-app .ehsic-controls{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.ehsic-app .ehsic-search{ flex:1 1 240px; position:relative; }
.ehsic-app .ehsic-search input{
  width:100%; padding:12px 14px 12px 38px; border:1px solid var(--ehsic-line); border-radius:9px;
  font-size:14.5px; background:#fff; outline:none;
}
.ehsic-app .ehsic-search input:focus{ border-color:var(--ehsic-accent); }
.ehsic-app .ehsic-search::before{
  content:"\1F50D"; position:absolute; left:13px; top:50%; transform:translateY(-50%);
  font-size:13px; opacity:.55;
}
.ehsic-app select.ehsic-sel{
  padding:12px; border:1px solid var(--ehsic-line); border-radius:9px; background:#fff;
  font-size:14px; color:var(--ehsic-ink); min-width:160px;
}
.ehsic-app .ehsic-count{ font-size:13px; color:var(--ehsic-muted); margin:0 0 14px; }

.ehsic-app .ehsic-card{
  background:var(--ehsic-card-bg); border:1px solid var(--ehsic-line); border-left:5px solid var(--ehsic-accent);
  border-radius:10px; padding:18px 20px; margin-bottom:16px;
  width:100%; box-sizing:border-box;
}
.ehsic-app .ehsic-card[hidden]{ display:none; }

/* TOP ROW: code + title left, badges right, same row, vertically centered (flexbox, no absolute positioning) */
.ehsic-app .ehsic-card-top{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.ehsic-app .ehsic-card-title{ font-size:17px; font-weight:700; margin:0; line-height:1.4; text-align:left; }
.ehsic-app .ehsic-card-badges{ display:flex; align-items:center; gap:8px; flex:0 0 auto; flex-wrap:wrap; }
.ehsic-app .ehsic-pill{
  flex:0 0 auto; font-size:12px; font-weight:600; padding:5px 12px; border-radius:20px;
  background:var(--ehsic-tag-bg); color:var(--ehsic-tag-text); white-space:nowrap;
}
.ehsic-app .ehsic-status-pill{ background:var(--ehsic-status-bg); color:var(--ehsic-status-text); }

/* SUMMARY: directly below header, same left edge as title, full available width */
.ehsic-app .ehsic-card-summary{ font-size:14.5px; color:var(--ehsic-muted); line-height:1.6; margin:0 0 14px; text-align:left; }

/* BOTTOM: Year/Category on the left, buttons directly below — normal
   document flow, everything left-aligned (no space-between / margin-left:auto / right:0). */
.ehsic-app .ehsic-card-meta{ text-align:left; font-size:12px; color:var(--ehsic-muted); line-height:1.7; margin:0 0 12px; }
.ehsic-app .ehsic-card-meta b{ color:var(--ehsic-accent-dark); font-weight:700; }
.ehsic-app .ehsic-card-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.ehsic-app .ehsic-btn{
  display:inline-flex; align-items:center; gap:7px; border:none; border-radius:8px;
  background:var(--ehsic-accent); color:#fff !important; font-size:13.5px; font-weight:600;
  padding:9px 16px; cursor:pointer; text-decoration:none;
  /* the button text is already "Read More" / "Download PDF" in normal case —
     force-override any theme CSS (e.g. a global `button{text-transform:
     uppercase}` rule) that would otherwise render it in ALL CAPS */
  text-transform:none;
}
.ehsic-app .ehsic-btn:hover{ background:var(--ehsic-accent-dark); }
.ehsic-app .ehsic-btn svg{ width:15px; height:15px; flex:0 0 auto; }

/* Read More + Download on the card: forced to identical outer dimensions
   so neither button's own text/icon length changes its size. white-space:
   nowrap keeps the label on one line even if a theme's line-height/letter
   spacing squeezes things a little tighter than usual. */
.ehsic-app .ehsic-card-action-btn{
  width:134px; min-width:134px; height:33px;
  box-sizing:border-box; justify-content:center;
  white-space:nowrap; overflow:hidden;
}

.ehsic-app .ehsic-empty{ text-align:center; padding:50px 20px; color:var(--ehsic-muted); font-size:14.5px; display:none; }

.ehsic-app .ehsic-pagination{ display:flex; justify-content:center; align-items:center; gap:6px; flex-wrap:wrap; margin-top:22px; }
.ehsic-app .ehsic-page-btn{
  min-width:36px; height:36px; padding:0 10px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--ehsic-line); border-radius:8px; background:#fff;
  color:var(--ehsic-ink); font-size:13.5px; font-weight:600; cursor:pointer;
}
.ehsic-app .ehsic-page-btn:hover{ border-color:var(--ehsic-accent); color:var(--ehsic-accent-dark); }
.ehsic-app .ehsic-page-btn.is-active{ background:var(--ehsic-accent); border-color:var(--ehsic-accent); color:#fff !important; }
.ehsic-app .ehsic-page-btn:disabled{ opacity:.4; cursor:default; }
.ehsic-app .ehsic-page-btn:disabled:hover{ border-color:var(--ehsic-line); color:var(--ehsic-ink); }

.ehsic-app .ehsic-back-link{
  display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ehsic-muted);
  text-decoration:none; margin-bottom:18px; cursor:pointer; border:none; background:none; padding:0;
}
.ehsic-app .ehsic-back-link:hover{ color:var(--ehsic-accent-dark); }
/* The outer wrapper no longer draws its own box — .ehsguru-is-detail below
   supplies the entire visual design, so this just stays a plain container. */
.ehsic-app .ehsic-detail-card{ background:transparent; border:0; padding:0; }

.ehsic-app [hidden]{ display:none !important; }

@media (max-width:600px){
  .ehsic-app h1{ font-size:23px; }
}

/* ==========================================================================
   IS CODE DETAIL PAGE — premium redesign
   Everything below is scoped under .ehsguru-is-detail (nested inside the
   plugin's own .ehsic-app wrapper) so it can never leak into the active
   theme or any other plugin's markup, and the theme can never leak into it.
   Colour tokens are defined as custom properties on the wrapper itself,
   independent from the --ehsic-* tokens the card/list view uses above.
   ========================================================================== */
.ehsic-app .ehsguru-is-detail{
  --eg-navy:#102A43;
  --eg-purple:#5B3CC4;  --eg-purple-bg:#F4F0FF;  --eg-purple-line:#E3D9FA;
  --eg-blue:#3478D4;    --eg-blue-bg:#EEF5FF;
  --eg-green:#36A269;   --eg-green-bg:#EFFAF4;
  --eg-orange:#F2994A;  --eg-orange-bg:#FFF5EA;
  --eg-pink:#D6336C;    --eg-pink-bg:#FFF0F3;
  --eg-teal:#0E8074;    --eg-teal-bg:#EAFBFA;
  --eg-slate:#51667A;   --eg-slate-bg:#F1F4F8;
  --eg-line:#E7EAF0;
  --eg-muted:#64748B;
  --eg-shadow:0 2px 10px rgba(16,42,67,.06);
  --eg-shadow-hover:0 10px 24px rgba(16,42,67,.12);
  color:var(--eg-navy);
}
.ehsic-app .ehsguru-is-detail *{ box-sizing:border-box; }

/* ---- Header: accent bar + large navy title ---- */
.ehsic-app .ehsguru-is-detail .ehsguru-header{ display:flex; gap:14px; margin:0 0 4px; }
.ehsic-app .ehsguru-is-detail .ehsguru-header-bar{ flex:0 0 auto; width:4px; border-radius:4px; background:var(--eg-purple); }
.ehsic-app .ehsguru-is-detail .ehsguru-title{ font-size:26px; font-weight:800; line-height:1.35; color:var(--eg-navy); margin:0; }

/* ---- Badges ---- */
.ehsic-app .ehsguru-is-detail .ehsguru-badges{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 26px; }
.ehsic-app .ehsguru-is-detail .ehsguru-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  padding:7px 14px; border-radius:20px; white-space:nowrap;
}
.ehsic-app .ehsguru-is-detail .ehsguru-badge svg{ width:14px; height:14px; flex:0 0 auto; }
.ehsic-app .ehsguru-is-detail .ehsguru-badge-category{ background:var(--eg-teal-bg); color:var(--eg-teal); }
.ehsic-app .ehsguru-is-detail .ehsguru-badge-status{ background:var(--eg-green-bg); color:var(--eg-green); }

/* ---- Quick-facts grid: IS Code / Standard Title / Year / Category /
   Sub-Category / EHS Domain / Industry / Latest Amendment ---- */
.ehsic-app .ehsguru-is-detail .ehsguru-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin:0 0 30px;
}
.ehsic-app .ehsguru-is-detail .ehsguru-tile{
  display:flex; gap:14px; align-items:flex-start; background:#fff;
  border:1px solid var(--eg-line); border-radius:16px; padding:16px;
  box-shadow:var(--eg-shadow); min-width:0;
  opacity:0; transform:translateY(10px);
  animation:ehsguruFadeIn .35s ease forwards;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ehsic-app .ehsguru-is-detail .ehsguru-tile:hover{
  transform:translateY(-2px); box-shadow:var(--eg-shadow-hover); border-color:transparent;
}
.ehsic-app .ehsguru-is-detail .ehsguru-tile-icon{
  flex:0 0 auto; width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .18s ease;
}
.ehsic-app .ehsguru-is-detail .ehsguru-tile:hover .ehsguru-tile-icon{ transform:scale(1.06); }
.ehsic-app .ehsguru-is-detail .ehsguru-tile-icon svg{ width:20px; height:20px; }
.ehsic-app .ehsguru-is-detail .ehsguru-tile-label{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--eg-muted); margin:0 0 4px;
}
.ehsic-app .ehsguru-is-detail .ehsguru-tile-value{ font-size:15px; font-weight:700; color:var(--eg-navy); line-height:1.4; word-break:break-word; }

.ehsic-app .ehsguru-is-detail .ehsguru-c-purple .ehsguru-tile-icon{ background:var(--eg-purple-bg); color:var(--eg-purple); }
.ehsic-app .ehsguru-is-detail .ehsguru-c-blue .ehsguru-tile-icon{ background:var(--eg-blue-bg); color:var(--eg-blue); }
.ehsic-app .ehsguru-is-detail .ehsguru-c-green .ehsguru-tile-icon{ background:var(--eg-green-bg); color:var(--eg-green); }
.ehsic-app .ehsguru-is-detail .ehsguru-c-orange .ehsguru-tile-icon{ background:var(--eg-orange-bg); color:var(--eg-orange); }
.ehsic-app .ehsguru-is-detail .ehsguru-c-pink .ehsguru-tile-icon{ background:var(--eg-pink-bg); color:var(--eg-pink); }
.ehsic-app .ehsguru-is-detail .ehsguru-c-teal .ehsguru-tile-icon{ background:var(--eg-teal-bg); color:var(--eg-teal); }
.ehsic-app .ehsguru-is-detail .ehsguru-c-slate .ehsguru-tile-icon{ background:var(--eg-slate-bg); color:var(--eg-slate); }

@keyframes ehsguruFadeIn{ to{ opacity:1; transform:translateY(0); } }
/* subtle staggered entrance — capped, not excessive */
.ehsic-app .ehsguru-is-detail .ehsguru-tile:nth-child(1){ animation-delay:0s; }
.ehsic-app .ehsguru-is-detail .ehsguru-tile:nth-child(2){ animation-delay:.03s; }
.ehsic-app .ehsguru-is-detail .ehsguru-tile:nth-child(3){ animation-delay:.06s; }
.ehsic-app .ehsguru-is-detail .ehsguru-tile:nth-child(4){ animation-delay:.09s; }
.ehsic-app .ehsguru-is-detail .ehsguru-tile:nth-child(5){ animation-delay:.12s; }
.ehsic-app .ehsguru-is-detail .ehsguru-tile:nth-child(6){ animation-delay:.15s; }
.ehsic-app .ehsguru-is-detail .ehsguru-tile:nth-child(7){ animation-delay:.18s; }
.ehsic-app .ehsguru-is-detail .ehsguru-tile:nth-child(8){ animation-delay:.21s; }

/* ---- Collapsible sections: Scope, Description, Highlights, Reference ---- */
.ehsic-app .ehsguru-is-detail .ehsguru-section{ border-top:1px solid var(--eg-line); padding:22px 0; }
.ehsic-app .ehsguru-is-detail .ehsguru-section-header{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; padding:0; margin:0; cursor:pointer; text-align:left;
  font:inherit; color:inherit;
}
.ehsic-app .ehsguru-is-detail .ehsguru-section-header-left{ display:flex; align-items:center; gap:10px; }
.ehsic-app .ehsguru-is-detail .ehsguru-section-header-left svg{ width:18px; height:18px; flex:0 0 auto; color:var(--eg-purple); }
.ehsic-app .ehsguru-is-detail .ehsguru-section-header h3{ font-size:16px; font-weight:700; color:var(--eg-navy); margin:0; }
.ehsic-app .ehsguru-is-detail .ehsguru-chevron{ display:flex; color:var(--eg-muted); transition:transform .2s ease; flex:0 0 auto; }
.ehsic-app .ehsguru-is-detail .ehsguru-chevron svg{ width:18px; height:18px; }
.ehsic-app .ehsguru-is-detail .ehsguru-section[data-expanded="false"] .ehsguru-chevron{ transform:rotate(180deg); }
.ehsic-app .ehsguru-is-detail .ehsguru-section-body{ overflow:hidden; transition:max-height .25s ease; }
.ehsic-app .ehsguru-is-detail .ehsguru-section-body-inner{ padding-top:14px; }
.ehsic-app .ehsguru-is-detail .ehsguru-body-text{ font-size:15px; line-height:1.75; color:#33455a; margin:0; white-space:pre-line; }

/* ---- Key Highlights checklist ---- */
.ehsic-app .ehsguru-is-detail .ehsguru-highlights{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 20px;
  background:var(--eg-green-bg); border-radius:14px; padding:16px 18px;
}
.ehsic-app .ehsguru-is-detail .ehsguru-highlight-item{ display:flex; align-items:flex-start; gap:8px; font-size:14.5px; line-height:1.55; color:#204534; min-width:0; }
.ehsic-app .ehsguru-is-detail .ehsguru-highlight-item svg{ width:18px; height:18px; flex:0 0 auto; color:var(--eg-green); margin-top:1px; }

/* ---- Reference box ---- */
.ehsic-app .ehsguru-is-detail .ehsguru-reference-box{
  background:var(--eg-purple-bg); border:1px solid var(--eg-purple-line); border-radius:14px;
  padding:14px 16px; font-size:14.5px; line-height:1.6; color:#3d2e78;
}

/* ---- Actions: Download PDF (existing attachment URL) + View Source ---- */
.ehsic-app .ehsguru-is-detail .ehsguru-actions{ margin-top:26px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.ehsic-app .ehsguru-is-detail .ehsguru-download-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; background:var(--eg-purple); color:#fff !important; text-decoration:none;
  font-size:15.5px; font-weight:700; padding:15px 20px; border-radius:14px;
  box-shadow:0 8px 20px rgba(91,60,196,.25);
  transition:background-color .18s ease, transform .18s ease;
  text-transform:none;
}
.ehsic-app .ehsguru-is-detail .ehsguru-download-btn:hover{ background:#4c31a8; transform:translateY(-1px); }
.ehsic-app .ehsguru-is-detail .ehsguru-download-btn svg{ width:19px; height:19px; transition:transform .18s ease; flex:0 0 auto; }
.ehsic-app .ehsguru-is-detail .ehsguru-download-btn:hover svg{ transform:translateX(3px); }
.ehsic-app .ehsguru-is-detail .ehsguru-source-link{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--eg-blue); text-decoration:none; padding:6px;
}
.ehsic-app .ehsguru-is-detail .ehsguru-source-link:hover{ text-decoration:underline; }
.ehsic-app .ehsguru-is-detail .ehsguru-source-link svg{ width:15px; height:15px; flex:0 0 auto; }

@media (max-width:680px){
  .ehsic-app .ehsguru-is-detail .ehsguru-title{ font-size:21px; }
  .ehsic-app .ehsguru-is-detail .ehsguru-grid{ grid-template-columns:1fr; gap:12px; }
  .ehsic-app .ehsguru-is-detail .ehsguru-highlights{ grid-template-columns:1fr; padding:14px; }
  .ehsic-app .ehsguru-is-detail .ehsguru-tile{ padding:14px; border-radius:14px; }
  .ehsic-app .ehsguru-is-detail .ehsguru-section{ padding:18px 0; }
  .ehsic-app .ehsguru-is-detail .ehsguru-download-btn{ padding:16px 20px; font-size:15px; }
}