/* =========================================================
   FlexiCare Insurance — V1241 Other Products Family Refinement
   Scope: /alla-proionta, /alla-proionta/*, /energia/*, /pos
   Purpose: premium petrol-light visual balance for non-insurance support pages.
   ========================================================= */

.fc-op,
.fc-energy{
  --fc-op-petrol: #0a4f5f;
  --fc-op-petrol-soft: rgba(47,143,158,.13);
  --fc-op-border: rgba(47,143,158,.18);
  --fc-op-border-strong: rgba(47,143,158,.28);
  --fc-op-text: rgba(7,53,64,.94);
  --fc-op-muted: rgba(9,60,74,.72);
  --fc-op-surface: rgba(255,255,255,.92);
  --fc-op-surface-soft: rgba(247,252,253,.92);
}

.fc-op .fc-op-shell,
.fc-energy .fc-energy-shell{
  position: relative;
  isolation: isolate;
  padding: clamp(22px, 3vw, 34px);
  border-color: rgba(47,143,158,.16);
  background:
    radial-gradient(820px 300px at 12% 0%, rgba(47,143,158,.10), transparent 66%),
    radial-gradient(680px 260px at 96% 12%, rgba(105,194,204,.09), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,252,253,.88));
  box-shadow: 0 22px 58px rgba(7,53,64,.07);
}

.fc-op .fc-page-head,
.fc-energy .fc-page-head{
  max-width: 860px;
  margin-bottom: clamp(18px, 2.5vw, 26px);
}

.fc-op .fc-page-head .fc-h1,
.fc-energy .fc-page-head .fc-h1{
  max-width: 760px;
  margin-bottom: 10px;
  letter-spacing: -.035em;
  color: var(--fc-op-text);
}

.fc-op .fc-page-head .small,
.fc-energy .fc-page-head .small,
.fc-energy .fc-lead{
  max-width: 76ch;
  color: var(--fc-op-muted);
  line-height: 1.72;
}

.fc-op .fc-op-grid,
.fc-energy .fc-op-grid{
  gap: clamp(14px, 1.8vw, 18px);
  margin-top: clamp(16px, 2vw, 22px);
}

.fc-op .fc-op-card,
.fc-energy .fc-energy-card{
  min-height: 178px;
  padding: clamp(18px, 2vw, 22px);
  border-color: var(--fc-op-border);
  background:
    radial-gradient(420px 180px at 100% 0%, rgba(47,143,158,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,252,253,.92));
  box-shadow: 0 18px 42px rgba(7,53,64,.055);
}

.fc-op .fc-op-card::after{
  opacity: .62;
  right: -58px;
  top: -66px;
}

.fc-op .fc-op-card:hover,
.fc-energy .fc-energy-card:hover{
  border-color: var(--fc-op-border-strong);
  box-shadow: 0 24px 54px rgba(7,53,64,.085);
}

.fc-op .fc-op-card-h,
.fc-energy .fc-op-card-h{
  position: relative;
  z-index: 1;
  gap: 14px;
}

.fc-op .fc-op-icon,
.fc-energy .fc-op-icon{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  color: var(--fc-op-text);
  background:
    radial-gradient(80px 45px at 24% 18%, rgba(255,255,255,.94), rgba(255,255,255,0) 66%),
    linear-gradient(180deg, rgba(105,194,204,.25), rgba(47,143,158,.12));
  border-color: rgba(47,143,158,.24);
}

.fc-op .fc-op-title,
.fc-energy .fc-op-title{
  color: var(--fc-op-text);
  font-size: clamp(16px, 1.15vw, 17px);
  line-height: 1.25;
}

.fc-op .fc-op-desc,
.fc-energy .fc-op-desc{
  color: var(--fc-op-muted);
  line-height: 1.62;
}

.fc-op .fc-op-foot{
  position: relative;
  z-index: 1;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(47,143,158,.12);
  color: rgba(10,120,144,.96);
}

.fc-op .fc-op-split,
.fc-energy .fc-op-split{
  gap: clamp(14px, 2vw, 18px);
}

.fc-op .fc-panel,
.fc-energy .fc-panel{
  padding: clamp(18px, 2vw, 22px);
  border-color: var(--fc-op-border);
  background:
    radial-gradient(520px 180px at 100% 0%, rgba(47,143,158,.075), transparent 62%),
    linear-gradient(180deg, var(--fc-op-surface), var(--fc-op-surface-soft));
  box-shadow: 0 18px 42px rgba(7,53,64,.052);
}

.fc-op .fc-panel .fc-h2,
.fc-energy .fc-panel .fc-h2{
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.25;
  max-width: min(620px, 100%);
  color: var(--fc-op-text);
}

.fc-op .fc-list,
.fc-energy .fc-list{
  color: var(--fc-op-muted);
  line-height: 1.78;
}

.fc-op .fc-list li,
.fc-energy .fc-list li{
  padding-left: 2px;
}

.fc-op .fc-actions,
.fc-energy .fc-actions{
  gap: 10px;
}

.fc-op .fc-actions .btn,
.fc-energy .fc-actions .btn{
  min-height: 42px;
}

.fc-op .fc-op-cta,
.fc-energy .fc-op-cta{
  margin-top: clamp(18px, 2.2vw, 24px);
  border-color: rgba(47,143,158,.18);
  background:
    radial-gradient(620px 220px at 0% 0%, rgba(47,143,158,.11), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,252,253,.90));
}

.fc-op .fc-footnote,
.fc-energy .fc-footnote{
  max-width: 92ch;
  color: rgba(9,60,74,.66);
  line-height: 1.65;
}

@media (min-width: 981px){
  .fc-op .fc-op-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .fc-op .fc-op-card{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .fc-energy .fc-op-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px){
  .fc-op .fc-op-shell,
  .fc-energy .fc-energy-shell{
    padding: 20px;
  }

  .fc-op .fc-op-card,
  .fc-energy .fc-energy-card{
    min-height: auto;
  }
}

@media (max-width: 620px){
  .fc-op .fc-op-shell,
  .fc-energy .fc-energy-shell{
    padding: 16px;
    border-radius: 24px;
  }

  .fc-op .fc-op-card,
  .fc-op .fc-panel,
  .fc-energy .fc-panel,
  .fc-energy .fc-energy-card{
    padding: 16px;
    border-radius: 22px;
  }

  .fc-op .fc-op-card-h,
  .fc-energy .fc-op-card-h{
    gap: 12px;
  }

  .fc-op .fc-op-icon,
  .fc-energy .fc-op-icon{
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }

  .fc-op .fc-actions .btn,
  .fc-energy .fc-actions .btn{
    flex-basis: 100%;
  }
}

@media (hover: none) and (pointer: coarse){
  .fc-op .fc-op-card:hover,
  .fc-energy .fc-energy-card:hover{
    transform: none;
    box-shadow: 0 18px 42px rgba(7,53,64,.055);
  }
}