/* ═══════════════════════════════════════════════
   Ákotí Tabs v2 — CSS-Only with Radio Buttons
   Zero JavaScript.

   Usage:
     <div class="akt2">
       <input type="radio" name="tabs" id="tab1" checked class="akt2-radio" />
       <label for="tab1" class="akt2-tab">Overview</label>

       <input type="radio" name="tabs" id="tab2" class="akt2-radio" />
       <label for="tab2" class="akt2-tab">
         Details
         <span class="akt2-badge">3</span>
       </label>

       <input type="radio" name="tabs" id="tab3" class="akt2-radio" />
       <label for="tab3" class="akt2-tab">Settings</label>

       <div class="akt2-panels">
         <div class="akt2-panel" id="panel1">Overview content...</div>
         <div class="akt2-panel" id="panel2">Details content...</div>
         <div class="akt2-panel" id="panel3">Settings content...</div>
       </div>
     </div>

   The trick: radio buttons are hidden. Labels are the tabs.
   :checked + label styles the active tab.
   nth-of-type selectors show the right panel.
   ═══════════════════════════════════════════════ */

.akt2 {
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  width: 100%;
}

/* Hide radio buttons */
.akt2-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Tab labels — inline row */
.akt2-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #8a8a96;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 3px solid transparent;
  user-select: none;
}

.akt2-tab:hover { color: #2c4a8a; }

/* Active tab */
.akt2-radio:checked + .akt2-tab {
  color: #1a2f5e;
  font-weight: 700;
  border-bottom-color: #a8c8e8;
}

/* Badge */
.akt2-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  background: #e8b4b8;
  color: #1e1e24;
  border-radius: 9px;
}

/* Disabled tab */
.akt2-radio:disabled + .akt2-tab {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ═══ PANELS ═══ */
.akt2-panels {
  border-top: 1px solid rgba(26, 47, 94, 0.1);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.03);
}

.akt2-panel {
  display: none;
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #4a4a56;
  animation: akt2-fade 0.25s;
}

@keyframes akt2-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Show the right panel based on which radio is checked */
/* Tab 1 checked → show panel 1 */
.akt2-radio:nth-of-type(1):checked ~ .akt2-panels .akt2-panel:nth-child(1) { display: block; }
.akt2-radio:nth-of-type(2):checked ~ .akt2-panels .akt2-panel:nth-child(2) { display: block; }
.akt2-radio:nth-of-type(3):checked ~ .akt2-panels .akt2-panel:nth-child(3) { display: block; }
.akt2-radio:nth-of-type(4):checked ~ .akt2-panels .akt2-panel:nth-child(4) { display: block; }
.akt2-radio:nth-of-type(5):checked ~ .akt2-panels .akt2-panel:nth-child(5) { display: block; }
.akt2-radio:nth-of-type(6):checked ~ .akt2-panels .akt2-panel:nth-child(6) { display: block; }

/* ═══ PILL VARIANT ═══ */
.akt2-pills .akt2-tab {
  border-bottom: none;
  border-radius: 16px 5px 16px 5px;
  background: rgba(26, 47, 94, 0.03);
  border: 1px solid rgba(26, 47, 94, 0.06);
  margin-right: 4px;
  margin-bottom: 8px;
}

.akt2-pills .akt2-radio:checked + .akt2-tab {
  background: #a8c8e8;
  color: #0f1b3d;
  border-color: #a8c8e8;
  border-radius: 5px 16px 5px 16px;
}

/* ═══ CARD VARIANT ═══ */
.akt2-cards .akt2-tab {
  border-bottom: none;
  background: rgba(26, 47, 94, 0.03);
  border: 1px solid rgba(26, 47, 94, 0.08);
  border-bottom: none;
  border-radius: 14px 6px 0 0;
  margin-bottom: -1px;
  position: relative;
  z-index: 0;
}

.akt2-cards .akt2-radio:checked + .akt2-tab {
  background: white;
  color: #1a2f5e;
  z-index: 1;
  border-bottom: 1px solid white;
}

.akt2-cards .akt2-panels {
  border: 1px solid rgba(26, 47, 94, 0.08);
  border-radius: 0 0 14px 14px;
  border-top: 1px solid rgba(26, 47, 94, 0.08);
}

/* ═══ MOBILE ═══ */
@media (max-width: 640px) {
  .akt2 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .akt2::-webkit-scrollbar { display: none; }
}