/* =========================================================
   Share Market Gyan — Insurance Page
   Page-specific styles only.
   Header / navigation / footer remain controlled by the
   existing site-wide CSS files.
   ========================================================= */

:root{
  --ins-navy:#081e39;
  --ins-blue:#1766c4;
  --ins-blue-dark:#0d4a99;
  --ins-green:#08ad59;
  --ins-green-dark:#078b47;
  --ins-yellow:#f4bf16;
  --ins-text:#111f3b;
  --ins-muted:#64748a;
  --ins-border:#dce5ee;
  --ins-bg:#f7fbff;
}

#insurance-page,
#insurance-page *{box-sizing:border-box}

#insurance-page{
  color:var(--ins-text);
  background:#fff;
  font-family:Inter,Arial,sans-serif;
}

.ins-container{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
}

.ins-heading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:0 0 17px;
}
.ins-heading span{
  width:36px;
  height:1px;
  background:#9db9d8;
}
.ins-heading h2{
  margin:0;
  font-family:Poppins,Inter,sans-serif;
  text-transform:uppercase;
  color:#102858;
  font-size:15px;
  letter-spacing:.01em;
}

/* HERO */
.ins-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(115deg,#eef7ff 0%,#f9fcff 55%,#edf7ff 100%);
  border-bottom:1px solid #e1ebf5;
}
.ins-hero:after{
  content:"";
  position:absolute;
  right:-20px;
  bottom:-35px;
  width:180px;
  height:160px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 45%,#d9eefb 0 18%,transparent 19%),
             radial-gradient(circle at 70% 60%,#d5eafa 0 15%,transparent 16%);
  opacity:.8;
}
.ins-hero-grid{
  min-height:255px;
  display:grid;
  grid-template-columns:220px minmax(0,1fr) 285px;
  gap:22px;
  align-items:center;
}
.ins-hero-art{
  align-self:end;
  height:255px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.ins-family-art{
  width:220px;
  height:255px;
}
.ins-hero-copy{
  padding:10px 0;
}
.ins-hero-copy h1{
  margin:0 0 13px;
  font-family:Poppins,Inter,sans-serif;
  font-size:42px;
  line-height:1.05;
  letter-spacing:-.04em;
  color:#12285e;
}
.ins-hero-copy p{
  max-width:570px;
  margin:0;
  color:#1e2b3e;
  font-size:14px;
  line-height:1.6;
}
.ins-actions{
  display:flex;
  gap:14px;
  margin-top:20px;
}
.ins-btn{
  min-height:37px;
  border:0;
  border-radius:5px;
  padding:9px 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  cursor:pointer;
  transition:.2s ease;
}
.ins-btn:hover{transform:translateY(-1px)}
.ins-primary{
  color:#fff;
  background:var(--ins-blue);
  box-shadow:0 6px 16px rgba(23,102,196,.17);
}
.ins-primary:hover{background:var(--ins-blue-dark)}
.ins-wa{
  color:#fff;
  background:var(--ins-green);
  box-shadow:0 6px 16px rgba(8,173,89,.16);
}
.ins-wa:hover{background:var(--ins-green-dark)}

.ins-lic-card{
  width:255px;
  padding:9px 12px 11px;
  border:1px solid #e0e7ef;
  border-radius:9px;
  background:#fff;
  box-shadow:0 8px 22px rgba(25,64,103,.08);
  text-align:center;
}
.ins-lic-logo{
  display:flex;
  height:62px;
  justify-content:center;
}
.ins-lic-emblem{
  width:70px;
  display:grid;
  place-items:center;
  color:#fff;
  background:#125ca8;
  border-radius:4px 0 0 4px;
  font-size:25px;
}
.ins-lic-word{
  width:145px;
  display:grid;
  place-items:center;
  color:#0c4086;
  background:#f4c316;
  border-radius:0 4px 4px 0;
  font-size:38px;
  font-weight:900;
}
.ins-lic-card>b{
  display:block;
  color:#19406f;
  font-size:12px;
  margin-top:6px;
}
.ins-lic-card>small{
  display:block;
  color:#315a81;
  font-size:10px;
  font-weight:800;
  margin-top:2px;
}

/* CATEGORY */
.ins-section{padding:20px 0}
.ins-categories{padding-bottom:13px}
.ins-category-grid{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:13px;
}
.ins-category-card{
  min-height:108px;
  border:1px solid var(--ins-border);
  border-radius:7px;
  background:#fff;
  padding:12px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:pointer;
  color:var(--ins-text);
  transition:.2s ease;
}
.ins-category-card:hover,
.ins-category-card.active{
  border-color:#9fc0e7;
  background:#f7fbff;
  box-shadow:0 7px 18px rgba(25,65,105,.08);
  transform:translateY(-2px);
}
.ins-category-icon{
  width:43px;
  height:43px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin-bottom:9px;
  font-size:18px;
}
.ins-category-card strong{
  font-size:12px;
  line-height:1.35;
}
.cat-blue{background:#e4efff;color:#1766c4}
.cat-shield{background:#e5efff;color:#15549c}
.cat-pink{background:#fde8ed;color:#cb3652}
.cat-green{background:#def2e4;color:#128a48}
.cat-red{background:#fde9e9;color:#bc2632}
.cat-purple{background:#eee2fb;color:#7345a5}
.cat-orange{background:#fff0d2;color:#c67600}
.cat-teal{background:#def4f4;color:#15929d}

/* SEARCH */
.ins-search-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px auto;
  gap:18px;
  align-items:center;
  margin-top:20px;
}
.ins-search-box{
  height:39px;
  border:1px solid var(--ins-border);
  border-radius:6px;
  background:#fff;
  display:flex;
  align-items:center;
}
.ins-search-box i{
  padding-left:13px;
  color:#5d728b;
  font-size:12px;
}
.ins-search-box input{
  width:100%;
  height:100%;
  padding:0 11px;
  border:0;
  outline:0;
  color:var(--ins-text);
  font-size:12px;
}
.ins-search-row select{
  height:39px;
  border:1px solid var(--ins-border);
  border-radius:6px;
  background:#fff;
  color:#2d415b;
  padding:0 12px;
  font-size:12px;
  outline:0;
}
.ins-search-row>button{
  border:0;
  background:none;
  color:var(--ins-blue);
  cursor:pointer;
  font-size:10.5px;
  white-space:nowrap;
}

/* POPULAR / CARDS */
.ins-popular{padding-top:10px}
.ins-plan-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.ins-plan-card{
  min-width:0;
  border:1px solid var(--ins-border);
  border-radius:7px;
  background:#fff;
  padding:13px;
  display:flex;
  flex-direction:column;
  box-shadow:0 3px 14px rgba(25,65,105,.035);
}
.ins-plan-card:hover{
  box-shadow:0 9px 25px rgba(25,65,105,.09);
}
.ins-card-head{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.ins-plan-icon{
  width:53px;
  height:53px;
  flex:0 0 53px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:21px;
}
.ins-card-title{min-width:0}
.ins-tag{
  display:inline-block;
  padding:3px 6px;
  border-radius:4px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
}
.ins-card-title h3{
  margin:5px 0 3px;
  color:#10275e;
  font-family:Poppins,Inter,sans-serif;
  font-size:14px;
  line-height:1.3;
}
.ins-card-title small{
  color:#26354b;
  font-size:9.5px;
}
.ins-card-description{
  min-height:55px;
  margin:13px 0 7px;
  color:#263548;
  font-size:12px;
  line-height:1.55;
}
.ins-feature-list{
  min-height:76px;
  margin:0 0 12px;
  padding:0;
  list-style:none;
}
.ins-feature-list li{
  color:#27374b;
  font-size:12px;
  line-height:1.65;
}
.ins-feature-list li:before{
  content:"✓";
  color:#128a48;
  font-weight:900;
  margin-right:7px;
}
.ins-card-actions{
  display:grid;
  grid-template-columns:1fr 1.18fr;
  gap:7px;
  margin-top:auto;
}
.ins-card-btn{
  min-height:29px;
  border:1px solid var(--ins-blue);
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:var(--ins-blue);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.ins-card-btn.whatsapp{
  border-color:var(--ins-green);
  background:var(--ins-green);
  color:#fff;
}
.ins-center{text-align:center;margin-top:17px}
.ins-center .ins-btn{min-width:160px}

/* SEPARATE CATEGORY SECTIONS */
.ins-all-plans{padding-top:0}
.ins-category-section{padding:15px 0 4px}
.ins-category-section-title{
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:13px;
}
.ins-category-section-title span{
  height:1px;
  flex:1;
  background:#d3dfeb;
}
.ins-category-section-title h2{
  margin:0;
  color:#12285d;
  font-family:Poppins,Inter,sans-serif;
  font-size:17px;
  white-space:nowrap;
}
.ins-empty{
  text-align:center;
  padding:35px 15px;
  color:#65768a;
}
.ins-empty i{display:block;font-size:25px;color:#1766c4;margin-bottom:10px}
.ins-empty b{display:block;color:#12285d}
.ins-empty p{font-size:12px}

/* DETAILS */
.ins-detail-section{
  background:linear-gradient(#fbfdff,#f3f8fd);
  padding-bottom:23px;
}
.ins-detail-box{
  border:1px solid var(--ins-border);
  border-radius:7px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 4px 16px rgba(25,65,105,.04);
}
.ins-detail-layout{
  min-height:280px;
  display:grid;
  grid-template-columns:155px minmax(0,1fr) 255px;
}
.ins-tabs{
  background:#fbfdff;
  border-right:1px solid var(--ins-border);
}
.ins-tabs button{
  width:100%;
  min-height:39px;
  padding:0 13px;
  border:0;
  border-bottom:1px solid #e4ebf2;
  background:#fff;
  color:#172944;
  text-align:left;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}
.ins-tabs button.active{
  background:#dceaff;
  color:#07509e;
}
.ins-detail-main{padding:18px}
.ins-detail-pane{display:none}
.ins-detail-pane.active{display:block}
.ins-detail-title-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.ins-detail-title-row h3{
  margin:0 0 4px;
  font-family:Poppins,Inter,sans-serif;
  font-size:15px;
  color:#13233f;
}
.ins-detail-title-row h3 span{font-family:Inter,Arial,sans-serif;font-size:11px}
.ins-detail-title-row small{font-size:12px;color:#69798b}
.ins-detail-badge{
  flex:none;
  padding:5px 9px;
  border-radius:14px;
  background:#f6c315;
  color:#4d3b00;
  font-size:10px;
}
.ins-detail-description{
  margin:16px 0 13px;
  color:#2c3a4e;
  font-size:12px;
  line-height:1.55;
}
.ins-detail-table{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px 18px;
}
.ins-detail-table div{
  display:grid;
  grid-template-columns:125px 1fr;
  gap:6px;
  font-size:9.5px;
  line-height:1.4;
}
.ins-detail-table span{color:#07509e}
.ins-detail-table b{font-weight:500;color:#263548}
.ins-detail-pane>h3{
  margin:0 0 10px;
  font-family:Poppins,Inter,sans-serif;
  color:#13233f;
  font-size:15px;
}
.ins-detail-list{
  margin:0;
  padding-left:17px;
  color:#2b3b50;
  font-size:12px;
  line-height:1.8;
}
.ins-detail-side{
  padding:18px;
  border-left:1px solid #f0e2b1;
  background:#fff6d9;
}
.ins-detail-side h3{
  margin:0 0 10px;
  color:#182a45;
  font-family:Poppins,Inter,sans-serif;
  font-size:15px;
}
.ins-detail-side p{
  margin:0 0 14px;
  color:#2d3a4d;
  font-size:12px;
  line-height:1.55;
}
.ins-detail-side .ins-btn{width:100%;text-transform:none;font-size:12px}
.ins-side-illustration{
  height:105px;
  position:relative;
  margin-top:15px;
}
.ins-shield{
  position:absolute;
  left:22px;
  bottom:10px;
  width:62px;
  height:70px;
  clip-path:polygon(50% 0,92% 17%,88% 68%,50% 100%,12% 68%,8% 17%);
  background:#5da3df;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:24px;
}
.ins-mini-family{
  position:absolute;
  right:15px;
  bottom:12px;
  display:flex;
  align-items:flex-end;
  gap:5px;
}
.ins-mini-family i{
  display:block;
  width:18px;
  height:34px;
  border-radius:9px 9px 4px 4px;
  background:#efb31b;
}
.ins-mini-family i:nth-child(2){height:48px;background:#14779c}
.ins-mini-family i:nth-child(3){height:28px;background:#d74472}
.ins-mini-family i:nth-child(4){height:23px;background:#f0a919}

/* DISCLAIMER */
.ins-disclaimer{
  padding:8px 0 20px;
  background:#f6faff;
}
.ins-disclaimer-box{
  min-height:58px;
  padding:10px 18px;
  display:grid;
  grid-template-columns:38px 1fr auto;
  align-items:center;
  gap:12px;
  border-radius:6px;
  background:#eaf3ff;
}
.ins-info-icon{
  width:31px;
  height:31px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#1766c4;
  color:#fff;
}
.ins-disclaimer-box p{
  margin:0;
  color:#17365c;
  font-size:12px;
  line-height:1.5;
}
.ins-disclaimer-box .ins-btn{
  min-width:155px;
  font-size:12px;
}

/* RESPONSIVE — do not modify global nav behavior */
@media(max-width:1100px){
  .ins-category-grid{grid-template-columns:repeat(4,1fr)}
  .ins-plan-grid{grid-template-columns:repeat(3,1fr)}
  .ins-hero-grid{grid-template-columns:180px 1fr 240px}
  .ins-family-art{width:180px}
}
@media(max-width:800px){
  .ins-container{width:calc(100% - 24px)}
  .ins-hero-grid{grid-template-columns:1fr;min-height:auto;padding-top:18px}
  .ins-hero-copy{text-align:center;order:1}
  .ins-hero-copy p{margin:0 auto}
  .ins-actions{justify-content:center}
  .ins-hero-art{order:2;height:185px}
  .ins-family-art{width:220px;height:185px}
  .ins-lic-card{order:3;margin:0 auto 22px}
  .ins-search-row{grid-template-columns:1fr}
  .ins-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ins-detail-layout{grid-template-columns:1fr}
  .ins-tabs{display:flex;overflow:auto;border-right:0;border-bottom:1px solid var(--ins-border)}
  .ins-tabs button{min-width:120px;white-space:nowrap}
  .ins-detail-side{border-left:0;border-top:1px solid #f0e2b1}
  .ins-disclaimer-box{grid-template-columns:38px 1fr}
  .ins-disclaimer-box .ins-btn{grid-column:1/-1;justify-self:center}
}
@media(max-width:560px){
  .ins-category-grid{grid-template-columns:repeat(2,1fr)}
  .ins-plan-grid{grid-template-columns:1fr}
  .ins-hero-copy h1{font-size:31px}
  .ins-hero-copy p{font-size:14px}
  .ins-actions{flex-direction:column}
  .ins-actions .ins-btn{width:100%}
  .ins-detail-table{grid-template-columns:1fr}
  .ins-detail-title-row{display:block}
  .ins-detail-badge{display:inline-block;margin-top:8px}
}