/**
 * CFS Cataract Page - Custom CSS overrides
 * Tab+panel connected shapes on mobile for cataract-specific sections.
 */

/* Cataract — tab+panel connected gray shape on mobile */
@media (max-width: 1023px) {
  /* All connected tab sections: base tab style */
  [data-tabs="understanding"] .cat-tab,
  [data-tabs="riskfactors"] .cat-tab,
  [data-tabs="surgery-group1"] .cat-tab,
  [data-tabs="surgery-group2"] .cat-tab,
  [data-tabs="iol-group1"] .cat-tab,
  [data-tabs="iol-group2"] .cat-tab {
    background: transparent !important;
    color: #2b286f !important;
    border-radius: 0 !important;
    border: none !important;
    position: relative;
  }

  /* Active tab: gray bg + rounded top + underline */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"],
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"],
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"],
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"],
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"],
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"] {
    background: #f4f4f8 !important;
    border-radius: 13px 13px 0 0 !important;
    border-bottom: none !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-color: #2b286f !important;
    text-decoration-thickness: 2px !important;
  }

  /* Inverse rounded corners: pseudo-elements */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 13px;
    height: 13px;
    background: transparent;
  }

  /* Left scoop */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]::before {
    left: -13px;
    border-bottom-right-radius: 13px;
    box-shadow: 5px 5px 0 5px #f4f4f8;
  }

  /* Right scoop */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]::after {
    right: -13px;
    border-bottom-left-radius: 13px;
    box-shadow: -5px 5px 0 5px #f4f4f8;
  }

  /* First tab: hide left scoop */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]:first-child::before {
    display: none;
  }

  /* Last tab: hide right scoop */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]:last-child::after {
    display: none;
  }

  /* Risks mobile: navy bg variant */
  [data-tabs="risks-mobile"] .cat-tab {
    background: transparent !important;
    color: #2b286f !important;
    border-radius: 0 !important;
    border: none !important;
    position: relative;
  }

  /* Risks tab active: navy */
  [data-tabs="risks-mobile"] .cat-tab[data-tab="risks-tab"][aria-selected="true"] {
    background: #2b286f !important;
    color: white !important;
    border-radius: 13px 13px 0 0 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-color: white !important;
    text-decoration-thickness: 2px !important;
  }

  /* Prevention tab active: gray */
  [data-tabs="risks-mobile"] .cat-tab[data-tab="prevention-tab"][aria-selected="true"] {
    background: #f4f4f8 !important;
    color: #2b286f !important;
    border-radius: 13px 13px 0 0 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-color: #2b286f !important;
    text-decoration-thickness: 2px !important;
  }

  [data-tabs="risks-mobile"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="risks-mobile"] .cat-tab[aria-selected="true"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 13px;
    height: 13px;
    background: transparent;
  }

  /* Risks tab scoops: navy */
  [data-tabs="risks-mobile"] .cat-tab[data-tab="risks-tab"][aria-selected="true"]::before {
    left: -13px;
    border-bottom-right-radius: 13px;
    box-shadow: 5px 5px 0 5px #2b286f;
  }

  [data-tabs="risks-mobile"] .cat-tab[data-tab="risks-tab"][aria-selected="true"]::after {
    right: -13px;
    border-bottom-left-radius: 13px;
    box-shadow: -5px 5px 0 5px #2b286f;
  }

  /* Prevention tab scoops: gray */
  [data-tabs="risks-mobile"] .cat-tab[data-tab="prevention-tab"][aria-selected="true"]::before {
    left: -13px;
    border-bottom-right-radius: 13px;
    box-shadow: 5px 5px 0 5px #f4f4f8;
  }

  [data-tabs="risks-mobile"] .cat-tab[data-tab="prevention-tab"][aria-selected="true"]::after {
    right: -13px;
    border-bottom-left-radius: 13px;
    box-shadow: -5px 5px 0 5px #f4f4f8;
  }

  [data-tabs="risks-mobile"] .cat-tab[aria-selected="true"]:first-child::before {
    display: none;
  }

  [data-tabs="risks-mobile"] .cat-tab[aria-selected="true"]:last-child::after {
    display: none;
  }

  /* Content panel overflow visible for scoops */
  [data-tabs="understanding"] .cat-panel:not(.hidden),
  [data-tabs="riskfactors"] .cat-panel:not(.hidden),
  [data-tabs="surgery-group1"] .cat-panel:not(.hidden),
  [data-tabs="surgery-group2"] .cat-panel:not(.hidden),
  [data-tabs="iol-group1"] .cat-panel:not(.hidden),
  [data-tabs="iol-group2"] .cat-panel:not(.hidden),
  [data-tabs="risks-mobile"] .cat-panel:not(.hidden) {
    position: relative;
    overflow: visible;
  }
}