/* GiC ONLY Default Tabs Bar v1
   Extracted from the approved GIC_DEFAULT_TABS_SWIPE_PATCH behavior.
   Scope: ONLY .gic-layer-tabs and its buttons/indicator.
   Nothing else on the card is styled here.
*/

/* Restore the bar itself to one stable, full-width rail. */
.gic-premium .gic-layer-tabs{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;

  display:flex !important;
  align-items:stretch !important;
  flex-shrink:0 !important;

  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  height:auto !important;
  min-height:0 !important;
  max-height:none !important;

  margin-top:auto !important;
  margin-left:auto !important;
  margin-right:auto !important;
  margin-bottom:0 !important;

  padding:5px !important;
  gap:5px !important;
  box-sizing:border-box !important;

  border:1px solid #e1e7e5 !important;
  border-radius:18px !important;
  background:#edf1ef !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:none !important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  overscroll-behavior-inline:contain;
  isolation:isolate;
  z-index:25 !important;
}

.gic-premium .gic-layer-tabs::-webkit-scrollbar{
  display:none !important;
}

/* Exactly the three default tabs fill the complete rail. */
.gic-premium .gic-layer-tabs:not(.gic-layer-tabs-scroll) > button{
  flex:1 1 0 !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
}

/* Extra tabs remain swipeable instead of squeezing the three defaults. */
.gic-premium .gic-layer-tabs.gic-layer-tabs-scroll{
  justify-content:flex-start !important;
  scroll-snap-type:x proximity;
}

.gic-premium .gic-layer-tabs.gic-layer-tabs-scroll > button{
  flex:0 0 118px !important;
  width:118px !important;
  min-width:118px !important;
  max-width:118px !important;
  scroll-snap-align:center;
}

/* One consistent button design on every card. */
.gic-premium .gic-layer-tabs > button{
  position:relative !important;
  z-index:2 !important;

  min-height:52px !important;
  height:52px !important;
  max-height:52px !important;

  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;

  margin:0 !important;
  padding:8px 6px !important;
  box-sizing:border-box !important;

  border:0 !important;
  border-radius:14px !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;

  color:#536762 !important;
  opacity:1 !important;

  font-size:11.5px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:0 !important;

  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

/* Keep icon size stable without touching any other card icons. */
.gic-premium .gic-layer-tabs > button svg{
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  flex:0 0 16px !important;
  opacity:.95 !important;
}

/* The approved behavior: no-content tab remains visible, gray and untappable. */
.gic-premium .gic-layer-tabs > button:disabled,
.gic-premium .gic-layer-tabs > button[aria-disabled="true"]{
  color:#aeb8b4 !important;
  background:transparent !important;
  box-shadow:none !important;
  opacity:.58 !important;
  cursor:default !important;
  pointer-events:none !important;
  transform:none !important;
}

.gic-premium .gic-layer-tabs > button:disabled svg,
.gic-premium .gic-layer-tabs > button[aria-disabled="true"] svg{
  opacity:.48 !important;
}

/* Available but not selected. */
.gic-premium .gic-layer-tabs > button:not(:disabled):not(.active){
  color:#536762 !important;
  opacity:1 !important;
}

/* Selected text remains strong; white moving indicator remains underneath. */
.gic-premium .gic-layer-tabs > button.active{
  background:transparent !important;
  color:#123f39 !important;
  font-weight:900 !important;
  box-shadow:none !important;
  transform:none !important;
}

.gic-premium .gic-layer-indicator{
  display:block !important;
  position:absolute !important;
  top:5px !important;
  bottom:5px !important;
  left:0 !important;
  height:auto !important;

  border:1px solid rgba(204,216,211,.9) !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:
    0 8px 18px rgba(17,54,50,.15),
    0 2px 5px rgba(17,54,50,.08) !important;

  opacity:1 !important;
  z-index:1 !important;
}

/* Preserve full labels on normal phones. */
@media(max-width:560px){
  .gic-premium .gic-layer-tabs{
    width:100% !important;
    border-radius:16px !important;
    padding:4px !important;
    gap:3px !important;
  }

  .gic-premium .gic-layer-tabs > button{
    min-height:50px !important;
    height:50px !important;
    max-height:50px !important;
    padding:7px 4px !important;
    gap:4px !important;
    font-size:10.4px !important;
  }

  .gic-premium .gic-layer-tabs > button svg{
    width:15px !important;
    height:15px !important;
    min-width:15px !important;
    flex-basis:15px !important;
  }

  .gic-premium .gic-layer-tabs.gic-layer-tabs-scroll > button{
    flex-basis:112px !important;
    width:112px !important;
    min-width:112px !important;
    max-width:112px !important;
  }

  .gic-premium .gic-layer-indicator{
    top:4px !important;
    bottom:4px !important;
    border-radius:13px !important;
  }
}

/* On very narrow devices keep all 3 names visible; only the bar's own type scales. */
@media(max-width:390px){
  .gic-premium .gic-layer-tabs > button{
    padding:6px 2px !important;
    gap:3px !important;
    font-size:9.7px !important;
  }

  .gic-premium .gic-layer-tabs > button svg{
    width:14px !important;
    height:14px !important;
    min-width:14px !important;
    flex-basis:14px !important;
  }
}