/* =====================================================================
   Blue Oasis premium icon tiles — the Academy dashboard look on the dark
   website: a soft tinted circle, a hairline ring of the same hue and a
   Phosphor duotone glyph in a brighter shade. Colours cycle per card.
   ===================================================================== */
:root {
    --ico-blue: 46, 134, 222;   --ico-blue-i: 125, 185, 255;
    --ico-teal: 0, 199, 176;    --ico-teal-i: 90, 236, 214;
    --ico-violet: 139, 92, 246; --ico-violet-i: 186, 160, 255;
    --ico-amber: 232, 160, 40;  --ico-amber-i: 255, 205, 110;
    --ico-rose: 236, 72, 110;   --ico-rose-i: 255, 140, 165;
    --ico-green: 34, 180, 100;  --ico-green-i: 112, 226, 150;
}

/* Phosphor duotone keeps its two-tone look; give the secondary layer a soft lift */
.ph-duotone::before { opacity: .38; }

/* Icon containers inside page sections (benefit-icon, feature-icon, info-icon, cw-card-icon …) */
:where(#bo-main, main[data-scroll-container]) section :is(
    [class$="-icon"], [class*="-icon "], [class*="-icon-tech"], .division-icon-wrapper, .d-icon, .tech-feature-check, .wear-step-num
):not(i):not(svg):not(img):not(.faq-icon):not([class*="faq-icon"]):not(.testimonial-quote):not(.social-icon):not(.sn-ico) {
    --t: var(--ico-blue); --ti: var(--ico-blue-i);
    border-radius: 50% !important;
    background: radial-gradient(120% 120% at 30% 20%, rgba(var(--t), .26), rgba(var(--t), .10)) !important;
    border: 1px solid rgba(var(--t), .32) !important;
    color: rgb(var(--ti)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 26px rgba(var(--t), .14) !important;
    display: inline-flex; align-items: center; justify-content: center;
}
:where(#bo-main, main[data-scroll-container]) section :is([class$="-icon"], [class*="-icon "], [class*="-icon-tech"], .division-icon-wrapper, .d-icon) :is(i, svg) {
    color: inherit !important;
}
:where(#bo-main, main[data-scroll-container]) section :is([class$="-icon"], [class*="-icon "], .d-icon) svg { stroke: currentColor; }

/* colour cycle: by the card's position among its siblings */
:where(#bo-main, main[data-scroll-container]) section :nth-child(6n+2) > :is([class$="-icon"], [class*="-icon "], [class*="-icon-tech"], .d-icon, .division-icon-wrapper),
:where(#bo-main, main[data-scroll-container]) section :nth-child(6n+2) > * > :is([class$="-icon"], .d-icon) { --t: var(--ico-teal); --ti: var(--ico-teal-i); }
:where(#bo-main, main[data-scroll-container]) section :nth-child(6n+3) > :is([class$="-icon"], [class*="-icon "], [class*="-icon-tech"], .d-icon, .division-icon-wrapper),
:where(#bo-main, main[data-scroll-container]) section :nth-child(6n+3) > * > :is([class$="-icon"], .d-icon) { --t: var(--ico-violet); --ti: var(--ico-violet-i); }
:where(#bo-main, main[data-scroll-container]) section :nth-child(6n+4) > :is([class$="-icon"], [class*="-icon "], [class*="-icon-tech"], .d-icon, .division-icon-wrapper),
:where(#bo-main, main[data-scroll-container]) section :nth-child(6n+4) > * > :is([class$="-icon"], .d-icon) { --t: var(--ico-amber); --ti: var(--ico-amber-i); }
:where(#bo-main, main[data-scroll-container]) section :nth-child(6n+5) > :is([class$="-icon"], [class*="-icon "], [class*="-icon-tech"], .d-icon, .division-icon-wrapper),
:where(#bo-main, main[data-scroll-container]) section :nth-child(6n+5) > * > :is([class$="-icon"], .d-icon) { --t: var(--ico-rose); --ti: var(--ico-rose-i); }
:where(#bo-main, main[data-scroll-container]) section :nth-child(6n) > :is([class$="-icon"], [class*="-icon "], [class*="-icon-tech"], .d-icon, .division-icon-wrapper),
:where(#bo-main, main[data-scroll-container]) section :nth-child(6n) > * > :is([class$="-icon"], .d-icon) { --t: var(--ico-green); --ti: var(--ico-green-i); }

/* Inline list icons (ticks, meta) just take the brighter accent */
:where(#bo-main, main[data-scroll-container]) section li > i.ph-duotone:first-child { color: rgb(var(--ico-teal-i)); }

/* ---------------- navigation icons (mega menu + mobile sheet) ---------------- */
.sn-ico {
    --t: var(--ico-blue); --ti: var(--ico-blue-i);
    border-radius: 50% !important;
    background: radial-gradient(120% 120% at 30% 20%, rgba(var(--t), .30), rgba(var(--t), .10)) !important;
    border: 1px solid rgba(var(--t), .36) !important;
    color: rgb(var(--ti)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 20px rgba(var(--t), .16);
}
.sn-ico i { font-size: 19px !important; }
li:nth-child(6n+2) > a > .sn-ico { --t: var(--ico-teal); --ti: var(--ico-teal-i); }
li:nth-child(6n+3) > a > .sn-ico { --t: var(--ico-violet); --ti: var(--ico-violet-i); }
li:nth-child(6n+4) > a > .sn-ico { --t: var(--ico-amber); --ti: var(--ico-amber-i); }
li:nth-child(6n+5) > a > .sn-ico { --t: var(--ico-rose); --ti: var(--ico-rose-i); }
li:nth-child(6n) > a > .sn-ico { --t: var(--ico-green); --ti: var(--ico-green-i); }
.sn-tile i { width: 34px; height: 34px; border-radius: 50%; display: inline-flex !important; align-items: center; justify-content: center; font-size: 17px !important;
    background: rgba(0, 199, 176, .16); border: 1px solid rgba(0, 199, 176, .32); }
.sn-tiles .sn-tile:nth-child(2) i { color: rgb(var(--ico-violet-i)); background: rgba(var(--ico-violet), .18); border-color: rgba(var(--ico-violet), .34); }
.sn-tiles .sn-tile:nth-child(3) i { color: rgb(var(--ico-green-i)); background: rgba(var(--ico-green), .18); border-color: rgba(var(--ico-green), .34); }
.sn-tiles .sn-tile:nth-child(4) i { color: rgb(var(--ico-amber-i)); background: rgba(var(--ico-amber), .18); border-color: rgba(var(--ico-amber), .34); }