/*==========================================================================
  Insurance page (insurance.html) - additions from the site review:
  hero sub-line and the "Getting Your Centre Empanelled" section (steps +
  document checklist). Headings reuse .svc-sol-title / .svc-sol-intro from
  service-detail.css.
==========================================================================*/

/* ---------- Hero sub-line ---------- */
.breadcrumb-wrapper .page-heading .breadcrumb-items-area .ins-hero-sub {
    position: relative;
    z-index: 9;
    max-width: 560px;
    margin: 6px 0 0;
    color: var(--white);
    font-size: 18px;
    line-height: 1.6;
}

@media (max-width: 1199px) {
    .breadcrumb-wrapper .page-heading .breadcrumb-items-area .ins-hero-sub {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 575px) {
    .breadcrumb-wrapper .page-heading .breadcrumb-items-area .ins-hero-sub {
        font-size: 16px;
    }
}

/* ---------- Getting empanelled ---------- */
.page-insurance .ins-empanel-section {
    background: #eef5f5;
}

.ins-empanel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    margin-top: 10px;
}

.ins-empanel-card {
    padding: 34px 32px 30px;
    border-radius: 16px;
    background: var(--white);
    border: 1px solid rgba(32, 64, 102, 0.1);
    box-shadow: 0 10px 30px rgba(32, 64, 102, 0.06);
}

.ins-empanel-card h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 22px;
}

.ins-empanel-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--theme-color);
    color: var(--white);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* numbered steps joined by a thin line */
.ins-steps {
    counter-reset: ins-step;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ins-steps li {
    position: relative;
    counter-increment: ins-step;
    padding: 0 0 22px 56px;
    line-height: 1.6;
    color: var(--text);
}

.ins-steps li:last-child {
    padding-bottom: 0;
}

.ins-steps li::before {
    content: counter(ins-step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 152, 74, 0.12);
    color: var(--theme-color);
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ins-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 42px;
    bottom: 4px;
    width: 2px;
    background: rgba(0, 152, 74, 0.2);
}

.ins-steps strong {
    display: block;
    color: var(--header);
    font-size: 17px;
    margin-bottom: 2px;
}

.ins-empanel-times {
    margin-top: 24px;
    padding: 16px 18px;
    border-radius: 12px;
    background: #eef5f5;
}

.ins-empanel-times p {
    display: flex;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

.ins-empanel-times p + p {
    margin-top: 8px;
}

.ins-empanel-times i {
    margin-top: 4px;
    color: var(--theme-color);
}

/* document checklist */
.ins-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ins-checklist li {
    position: relative;
    padding: 10px 0 10px 32px;
    border-bottom: 1px dashed rgba(32, 64, 102, 0.14);
    line-height: 1.5;
    color: var(--text);
}

.ins-checklist li:last-child {
    border-bottom: 0;
}

.ins-checklist li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--theme-color);
    color: var(--white);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ins-empanel-note {
    display: flex;
    gap: 8px;
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
}

.ins-empanel-note i {
    margin-top: 4px;
    color: var(--theme-color);
}

@media (max-width: 991px) {
    .ins-empanel-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .ins-empanel-card { padding: 26px 22px 24px; }
    .ins-empanel-card h3 { font-size: 20px; }
}

/* ---------- Getting empanelled: white section ----------
   The tinted section ran straight into the tinted "Our Insurance Advantage"
   panel below. The section is now white and the two cards take the page's
   light-teal panel fill instead; the timing box inside turns white. */
.page-insurance .ins-empanel-section {
    background: var(--white);
}

.page-insurance .ins-empanel-card {
    background: #eef5f5;
    border-color: transparent;
    box-shadow: none;
}

.page-insurance .ins-empanel-times {
    background: var(--white);
}

.page-insurance .ins-checklist li {
    border-bottom-color: rgba(32, 64, 102, 0.16);
}

/* ---------- Getting empanelled: a little more room at the bottom ----------
   30px more than the shared .section-padding at each size (75 / 100 / 80). */
.page-insurance .ins-empanel-section {
    padding-bottom: 105px;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .page-insurance .ins-empanel-section { padding-bottom: 130px; }
}

@media (max-width: 991px) {
    .page-insurance .ins-empanel-section { padding-bottom: 110px; }
}

/* ---------- Getting empanelled: a little less room at the top ----------
   30px less than the shared .section-padding at each size (75 / 100 / 80). */
.page-insurance .ins-empanel-section {
    padding-top: 45px;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .page-insurance .ins-empanel-section { padding-top: 70px; }
}

@media (max-width: 991px) {
    .page-insurance .ins-empanel-section { padding-top: 50px; }
}

/* On a phone the 50px above stacks on the 80px the intro section closes with,
   leaving 130px of empty screen between the enquiry card and this heading.
   The section above already provides the whole gap. */
@media (max-width: 767px) {
    .page-insurance .ins-empanel-section { padding-top: 0; }
}